/* =========================================================
   SAHADEV ASTROLOGY
   ALL SERVICES
   GURUJI STYLE 3D MOUSE TILT
========================================================= */


/* =========================================================
   FONT FAMILY
========================================================= */

.sahadev-services-grid,
.sahadev-service-card {
    font-family: "Inter", sans-serif;
}

.sahadev-service-title {
    font-family: "Cinzel", serif;
}


/* =========================================================
   SERVICES GRID
========================================================= */

.sahadev-services-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 24px;

    width: 100%;

    margin: 0;
    padding: 0;
}


/* =========================================================
   SERVICE CARD
========================================================= */

.sahadev-service-card {

    --rotate-x: 0deg;
    --rotate-y: 0deg;

    --shadow-x: 0px;
    --shadow-y: 10px;
    --shadow-blur: 25px;

    position: relative;

    display: block;

    width: 100%;
    height: auto;

    overflow: hidden;

    margin: 0;
    padding: 0;

    background: #faf8f3;

    border: 1px solid #ddd6c9;

    border-radius: 15px;

    color: inherit;

    text-decoration: none !important;

    /*
     * 3D perspective
     */
    transform:
        perspective(1000px)
        rotateX(var(--rotate-x))
        rotateY(var(--rotate-y));

    transform-origin: center center;

    transform-style: preserve-3d;

    /*
     * Default shadow
     */
    box-shadow:
        var(--shadow-x)
        var(--shadow-y)
        var(--shadow-blur)
        rgba(55, 38, 24, 0.13);

    /*
     * IMPORTANT:
     * Transition is used only when returning
     * from mouse position.
     */
    transition:
        transform 0.35s cubic-bezier(.4, 0, .2, 1),
        box-shadow 0.35s cubic-bezier(.4, 0, .2, 1);

    will-change: transform;
}


/* =========================================================
   ACTIVE MOUSE TILT
   NO TRANSITION = INSTANT FOLLOW
========================================================= */

.sahadev-service-card.is-tilting {

    transition: none !important;

    will-change: transform;
}


/* =========================================================
   HOVER SHADOW
========================================================= */

.sahadev-service-card:hover {

    box-shadow:
        var(--shadow-x)
        var(--shadow-y)
        var(--shadow-blur)
        rgba(55, 38, 24, 0.16);
}


/* =========================================================
   MAGIC CARD COMPATIBILITY
========================================================= */

.sahadev-service-card.magic-card,
.sahadev-service-card.magic-card.is-visible {

    transform:
        perspective(1000px)
        rotateX(var(--rotate-x))
        rotateY(var(--rotate-y))
        !important;
}


/*
 * Disable any old transition while mouse
 * is controlling the card.
 */

.sahadev-service-card.magic-card.is-tilting,
.sahadev-service-card.magic-card.is-visible.is-tilting {

    transition: none !important;
}


/* =========================================================
   IMAGE WRAPPER
========================================================= */

.sahadev-service-image {

    position: relative;

    display: block;

    width: 100%;

    height: 254px;

    overflow: hidden;

    margin: 0;
    padding: 0;

    background: #28140f;

    transform: translateZ(0);
}


/* =========================================================
   SERVICE IMAGE
========================================================= */

.sahadev-service-image img,
.sahadev-service-image .sahadev-service-img {

    display: block;

    width: 100% !important;
    height: 100% !important;

    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

    object-fit: cover;

    object-position: center center;

    border: 0 !important;

    border-radius: 0 !important;

    transition:
        transform 0.5s cubic-bezier(.22, .61, .36, 1);
}


/* =========================================================
   IMAGE HOVER
========================================================= */

.sahadev-service-card:hover
.sahadev-service-image img,

.sahadev-service-card:hover
.sahadev-service-image .sahadev-service-img {

    transform: scale(1.035);
}


/* =========================================================
   IMAGE OVERLAY
========================================================= */

.sahadev-service-image-overlay {

    position: absolute;

    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    z-index: 1;

    display: block;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.03) 0%,
            rgba(32, 9, 5, 0.08) 42%,
            rgba(72, 17, 12, 0.40) 100%
        );
}


/* =========================================================
   SERVICE BADGE
========================================================= */

.sahadev-service-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    height: 24px;
    padding: 0 11px;
    margin: 0;
    border: 0;
    border-radius: 999px;
    background: #7e191c;
    color: #ffffff !important;
    font-family: "Inter",
        sans-serif !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 24px !important;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    white-space: nowrap;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
}


/* =========================================================
   BADGE ICON
========================================================= */

.sahadev-service-badge-icon {

    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 13px;
    height: 13px;

    margin: 0;
    padding: 0;

    color: #ffffff;
}


.sahadev-service-badge-icon svg {

    display: block;

    width: 13px;
    height: 13px;

    margin: 0;
    padding: 0;

    stroke: currentColor;
}


/* =========================================================
   CONTENT
========================================================= */

.sahadev-service-content {

    position: relative;

    display: block;

    width: 100%;

    min-height: 187px;

    margin: 0;

    padding:
        27px
        27px
        26px;

    background: #faf8f3;

    box-sizing: border-box;

    z-index: 2;
}


/* =========================================================
   REMOVE OLD CONTENT LINE
========================================================= */

.sahadev-service-content::before {

    display: none !important;

    content: none !important;
}


/* =========================================================
   SERVICE TITLE
========================================================= */

.sahadev-service-title {

    display: block;

    margin:
        0
        0
        13px !important;

    padding: 0 !important;

    color: #3b241c !important;

    font-family:
        "Cinzel",
        serif !important;

    font-size: 20px !important;

    font-weight: 600 !important;

    line-height: 1.45 !important;

    letter-spacing: 0 !important;

    text-align: left;

    text-transform: none !important;

    word-break: normal;

    transition:
        color 0.25s ease;
}


.sahadev-service-card .sahadev-service-title,
.sahadev-service-card:hover .sahadev-service-title {

    color: #3b241c !important;
}

.sahadev-service-card:hover {
    border-color: #75171775;
    border-width: 1px;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.sahadev-service-description {
    width: 100%;
    margin: 0
        0
        20px !important;
    padding: 0 !important;
    overflow: hidden;
    color: #735f55 !important;
    font-family: "Inter",
        sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.75 !important;
    letter-spacing: 0 !important;
    text-align: left;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}


/* =========================================================
   LEARN MORE
========================================================= */

.sahadev-service-link {
    display: inline-flex;
    align-items: center;
    width: auto;
    max-width: 100%;
    margin: 0;
    padding: 0;
    color: #8d2020 !important;
    font-family: "Inter",
        sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
    letter-spacing: 0 !important;
    text-decoration: none !important;
    transition: color 0.25s ease;
}

/* =========================================================
   LINK TEXT
========================================================= */

.sahadev-service-link-text {

    display: inline;

    color: inherit;

    font-family: inherit;

    font-size: inherit;

    font-weight: inherit;

    line-height: inherit;
}


/* =========================================================
   ARROW
========================================================= */

.sahadev-service-link-arrow {

    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: auto;

    margin-left: 8px;

    color: inherit;

    font-family:
        Arial,
        sans-serif;

    font-size: 19px;

    font-weight: 400;

    line-height: 1;

    transform:
        translateX(0);

    transition:
        transform 0.3s cubic-bezier(.4, 0, .2, 1);
}


/* =========================================================
   LINK HOVER
========================================================= */

.sahadev-service-card:hover
.sahadev-service-link {

    color: #751717 !important;
}


.sahadev-service-card:hover
.sahadev-service-link-arrow {

    transform:
        translateX(5px);
}


/* =========================================================
   REMOVE UNDERLINE
========================================================= */

.sahadev-service-card,
.sahadev-service-card:hover,
.sahadev-service-card:focus,
.sahadev-service-card:active,

.sahadev-service-card h3,
.sahadev-service-card span {

    text-decoration: none !important;
}


/* =========================================================
   FOCUS
========================================================= */

.sahadev-service-card:focus-visible {

    outline:
        2px solid #8d2020;

    outline-offset: 3px;
}


/* =========================================================
   NO IMAGE
========================================================= */

.sahadev-service-no-image {

    display: block;

    width: 100%;
    height: 100%;

    background:
        radial-gradient(
            circle at center,
            #5b301f 0%,
            #351810 55%,
            #1d0b08 100%
        );
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

    .sahadev-services-grid {

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        gap: 20px;
    }


    .sahadev-service-image {

        height: 240px;
    }


    .sahadev-service-content {

        min-height: 185px;

        padding:
            26px
            25px
            25px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .sahadev-services-grid {

        grid-template-columns: 1fr;

        gap: 20px;
    }


    /*
     * Disable 3D effect on touch screens
     */
    .sahadev-service-card {

        --rotate-x: 0deg;
        --rotate-y: 0deg;

        transform:
            none !important;

        transition:
            box-shadow 0.3s ease;
    }


    .sahadev-service-card.magic-card,
    .sahadev-service-card.magic-card.is-visible {

        transform:
            none !important;
    }


    .sahadev-service-image {

        height: 245px;
    }


    .sahadev-service-content {

        min-height: auto;

        padding:
            24px
            22px
            25px;
    }


    .sahadev-service-title {

        margin-bottom:
            12px !important;

        font-size:
            18px !important;

        line-height:
            1.5 !important;
    }


    .sahadev-service-description {

        min-height: auto;

        max-height: none;

        margin-bottom:
            18px !important;

        font-size:
            14px !important;

        line-height:
            1.7 !important;

        -webkit-line-clamp: 3;
    }


    .sahadev-service-link {

        font-size:
            13px !important;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .sahadev-services-grid {

        gap: 18px;
    }


    .sahadev-service-image {

        height: 230px;
    }


    .sahadev-service-badge {

        top: 11px;

        right: 11px;

        height: 23px;

        padding:
            0 10px;

        font-size:
            9px !important;
    }


    .sahadev-service-content {

        padding:
            22px
            20px
            24px;
    }


    .sahadev-service-title {

        font-size:
            17px !important;
    }


    .sahadev-service-description {

        font-size:
            13.5px !important;
    }

}


/* =========================================================
   SINGLE SERVICE PAGE
========================================================= */

.single-astrologer_service .site-main {

    margin-right:
        0 !important;
}


.single-astrologer_service
.site-content
.content-area {

    width:
        100% !important;
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .sahadev-service-card {

        transform:
            none !important;

        transition:
            none !important;
    }


    .sahadev-service-image img,
    .sahadev-service-image .sahadev-service-img {

        transition:
            none !important;
    }


    .sahadev-service-link-arrow {

        transition:
            none !important;
    }

}