/* =========================================================
   ADI YOGPEETH
   PRENATAL SEO HERO — MATCHED TO CURRENT PHP
   =========================================================
   PHP structure/classes matched exactly to:
   course-prenatal-seo.php

   Main classes:
   .prenatal-seo-hero
   .prenatal-seo-hero__container
   .prenatal-seo-hero__content
   .prenatal-seo-hero__visual
   .prenatal-seo-hero__image
   .prenatal-seo-learning
   .prenatal-seo-hero__actions

   Design:
   • Premium ivory background
   • Forest green + muted gold
   • Editorial SEO content
   • Large circular mother/child image
   • 9 learning items
   • Brochure + WhatsApp CTAs
   • Quote under visual
   ========================================================= */


/* =========================================================
   01 — ROOT / VARIABLES
   ========================================================= */

.prenatal-seo-hero {

    --prenatal-green: #173f32;
    --prenatal-green-2: #234c3e;

    --prenatal-gold: #b77a28;
    --prenatal-gold-light: #d7ae6c;

    --prenatal-cream: #fbf8f1;
    --prenatal-cream-2: #f4ede1;

    --prenatal-text: #38443f;
    --prenatal-muted: #66706b;

    --prenatal-border:
        rgba(183,122,40,.25);

    position: relative;

    width: 100%;

    overflow: hidden;

    color: var(--prenatal-text);

    background:
        linear-gradient(
            115deg,
            #fcfaf5 0%,
            #faf5ec 52%,
            #f4ecdf 100%
        );

    border-top:
        1px solid
        rgba(183,122,40,.12);

    border-bottom:
        1px solid
        rgba(183,122,40,.14);
}


/* =========================================================
   02 — MAIN CONTAINER
   ========================================================= */

.prenatal-seo-hero__container {

    position: relative;

    z-index: 2;

    width:
        min(
            calc(100% - 70px),
            1420px
        );

    min-height: 760px;

    display: grid;

    /*
     * IMPORTANT:
     * Left and right are separate columns.
     * The image can never push into the SEO text.
     */
    grid-template-columns:
        minmax(0, 1.14fr)
        minmax(540px, .86fr);

    column-gap: 45px;

    align-items: center;

    margin: 0 auto;

    padding:
        62px 0 55px;
}


/* =========================================================
   03 — LEFT CONTENT
   ========================================================= */

.prenatal-seo-hero__content {

    position: relative;

    z-index: 5;

    min-width: 0;

    max-width: 820px;

    padding-left: 4px;
}


/* =========================================================
   04 — EYEBROW
   ========================================================= */

.prenatal-seo-hero__eyebrow {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    margin-bottom: 15px;

    color: var(--prenatal-gold);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: .17em;

    line-height: 1.4;

    text-transform: uppercase;
}


.prenatal-seo-hero__eyebrow-icon {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 21px;

    height: 21px;

    color: var(--prenatal-gold);

    font-size: 18px;

    line-height: 1;
}


/* =========================================================
   05 — MAIN HEADING
   ========================================================= */

.prenatal-seo-hero__content h2 {

    max-width: 800px;

    margin: 0;

    color: var(--prenatal-green);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(
            46px,
            4.4vw,
            72px
        );

    font-weight: 500;

    letter-spacing: -.035em;

    line-height: .98;
}


/* =========================================================
   06 — ORNAMENT
   ========================================================= */

.prenatal-seo-hero__ornament {

    width: 160px;

    display: flex;

    align-items: center;

    gap: 10px;

    margin:
        20px 0 14px;
}


.prenatal-seo-hero__ornament span {

    flex: 1;

    height: 1px;

    background:
        var(--prenatal-gold-light);
}


.prenatal-seo-hero__ornament i {

    flex: 0 0 auto;

    color:
        var(--prenatal-gold);

    font-size: 13px;

    font-style: normal;
}


/* =========================================================
   07 — TAGLINE
   ========================================================= */

.prenatal-seo-hero__tagline {

    margin:
        0 0 14px;

    color:
        var(--prenatal-green-2);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(
            20px,
            1.65vw,
            27px
        );

    font-weight:
        500;

    letter-spacing:
        .005em;

    line-height:
        1.25;
}


/* =========================================================
   08 — SECOND DIVIDER
   ========================================================= */

.prenatal-seo-hero__divider {

    width: 125px;

    display: flex;

    align-items: center;

    gap: 9px;

    margin-bottom: 19px;
}


.prenatal-seo-hero__divider span {

    flex: 1;

    height: 1px;

    background:
        rgba(183,122,40,.55);
}


.prenatal-seo-hero__divider i {

    color:
        var(--prenatal-gold);

    font-size: 11px;

    font-style: normal;
}


/* =========================================================
   09 — SEO TEXT
   ========================================================= */

.prenatal-seo-hero__text {

    max-width: 790px;
}


.prenatal-seo-hero__text p {

    margin:
        0 0 14px;

    color:
        var(--prenatal-text);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        15px;

    font-weight:
        400;

    line-height:
        1.72;
}


.prenatal-seo-hero__text p:last-child {

    margin-bottom:
        0;
}


.prenatal-seo-hero__text strong {

    color:
        var(--prenatal-green);

    font-weight:
        800;
}


/* =========================================================
   10 — WHAT YOU WILL LEARN
   ========================================================= */

.prenatal-seo-learning {

    max-width: 790px;

    margin-top:
        25px;
}


/* Heading */
.prenatal-seo-learning__heading {

    display:
        grid;

    grid-template-columns:
        minmax(35px, 1fr)
        auto
        minmax(35px, 1fr);

    align-items:
        center;

    gap:
        12px;

    margin-bottom:
        12px;
}


.prenatal-seo-learning__heading span {

    height:
        1px;

    background:
        rgba(183,122,40,.38);
}


.prenatal-seo-learning__heading h3 {

    margin:
        0;

    color:
        var(--prenatal-green);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        19px;

    font-weight:
        500;

    line-height:
        1.25;

    text-align:
        center;
}


/* 9-item grid */
.prenatal-seo-learning__grid {

    display:
        grid;

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

    gap:
        8px;
}


/* Individual learning card */
.prenatal-seo-learning__item {

    min-height:
        72px;

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    padding:
        9px 10px;

    border:
        1px solid
        rgba(183,122,40,.18);

    border-radius:
        8px;

    background:
        rgba(255,253,248,.58);

    box-shadow:
        0 5px 15px
        rgba(70,55,35,.025);

    transition:
        transform .2s ease,
        border-color .2s ease,
        background .2s ease;
}


.prenatal-seo-learning__item:hover {

    transform:
        translateY(-2px);

    border-color:
        rgba(183,122,40,.42);

    background:
        rgba(255,253,248,.88);
}


/* Learning icon */
.prenatal-seo-learning__icon {

    width:
        32px;

    height:
        32px;

    flex:
        0 0 32px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        var(--prenatal-gold);

    border:
        1px solid
        rgba(183,122,40,.32);

    border-radius:
        50%;

    font-size:
        15px;

    line-height:
        1;
}


.prenatal-seo-learning__item strong {

    color:
        var(--prenatal-green);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        11px;

    font-weight:
        700;

    line-height:
        1.35;
}


/* =========================================================
   11 — RIGHT VISUAL
   ========================================================= */

.prenatal-seo-hero__visual {

    position:
        relative;

    min-width:
        0;

    min-height:
        650px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;
}


/* Outer halo */
.prenatal-seo-hero__visual::before {

    content:
        "";

    position:
        absolute;

    top:
        49%;

    left:
        50%;

    width:
        610px;

    height:
        610px;

    transform:
        translate(
            -50%,
            -50%
        );

    border:
        1px solid
        rgba(183,122,40,.25);

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,.76) 0%,
            rgba(247,239,226,.32) 58%,
            transparent 72%
        );

    box-shadow:
        inset
        0 0 0 15px
        rgba(255,255,255,.30);

    pointer-events:
        none;
}


/* Inner halo */
.prenatal-seo-hero__visual::after {

    content:
        "";

    position:
        absolute;

    top:
        49%;

    left:
        50%;

    width:
        570px;

    height:
        570px;

    transform:
        translate(
            -50%,
            -50%
        );

    border:
        1px solid
        rgba(23,63,50,.14);

    border-radius:
        50%;

    pointer-events:
        none;
}


/* =========================================================
   12 — CIRCULAR IMAGE
   ========================================================= */

.prenatal-seo-hero__image {

    position:
        relative;

    z-index:
        4;

    width:
        520px;

    height:
        520px;

    flex:
        0 0 520px;

    overflow:
        hidden;

    border:
        9px solid
        #ffffff;

    border-radius:
        50%;

    background:
        #eee3d1;

    box-shadow:
        0 26px 65px
        rgba(23,63,50,.17),
        0 4px 20px
        rgba(80,60,35,.08);
}


/* Image */
.prenatal-seo-hero__image img {

    width:
        100%;

    height:
        100%;

    display:
        block;

    object-fit:
        cover;

    /*
     * Keeps mother and child visible.
     * No facial/person alteration.
     */
    object-position:
        center 47%;

    transform:
        scale(1.04);
}


/* Gold inner ring */
.prenatal-seo-hero__image-ring {

    position:
        absolute;

    z-index:
        5;

    inset:
        9px;

    border:
        1px solid
        rgba(183,122,40,.72);

    border-radius:
        50%;

    pointer-events:
        none;
}


/* =========================================================
   13 — BOTANICAL
   ========================================================= */

.prenatal-seo-hero__botanical {

    position:
        absolute;

    z-index:
        2;

    right:
        10px;

    top:
        42px;

    width:
        120px;

    height:
        220px;

    opacity:
        .17;

    border-left:
        1px solid
        var(--prenatal-gold);

    border-radius:
        50%;

    transform:
        rotate(
            31deg
        );
}


/* =========================================================
   14 — CTA BUTTONS
   ========================================================= */

.prenatal-seo-hero__actions {

    position:
        absolute;

    z-index:
        8;

    left:
        50%;

    bottom:
        58px;

    width:
        375px;

    display:
        flex;

    flex-direction:
        column;

    gap:
        9px;

    transform:
        translateX(-50%);
}


/* Base button */
.prenatal-seo-hero__action {

    min-height:
        68px;

    box-sizing:
        border-box;

    display:
        flex;

    align-items:
        center;

    gap:
        13px;

    padding:
        9px 15px;

    border-radius:
        11px;

    text-decoration:
        none;

    box-shadow:
        0 14px 32px
        rgba(23,63,50,.18);

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}


.prenatal-seo-hero__action:hover {

    transform:
        translateY(-2px);

    box-shadow:
        0 18px 40px
        rgba(23,63,50,.23);
}


/* Brochure */
.prenatal-seo-hero__action--brochure {

    color:
        #ffffff;

    background:
        var(--prenatal-green);

    border:
        1px solid
        rgba(255,255,255,.28);
}


.prenatal-seo-hero__action--brochure:hover {

    background:
        #12372c;
}


/* WhatsApp */
.prenatal-seo-hero__action--whatsapp {

    color:
        var(--prenatal-green);

    background:
        #fffdf8;

    border:
        1px solid
        #c28a3d;
}


.prenatal-seo-hero__action--whatsapp:hover {

    background:
        #ffffff;
}


/* CTA icon */
.prenatal-seo-hero__action-icon {

    width:
        43px;

    height:
        43px;

    flex:
        0 0 43px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;
}


.prenatal-seo-hero__action--brochure
.prenatal-seo-hero__action-icon {

    color:
        #e4b76a;

    border:
        1px solid
        rgba(228,183,106,.62);
}


.prenatal-seo-hero__action--whatsapp
.prenatal-seo-hero__action-icon {

    color:
        #ffffff;

    background:
        #20a95a;

    border:
        1px solid
        #20a95a;
}


.prenatal-seo-hero__action-icon svg {

    width:
        23px;

    height:
        23px;

    display:
        block;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.7;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


/* CTA text */
.prenatal-seo-hero__action-content {

    min-width:
        0;

    display:
        flex;

    flex-direction:
        column;

    gap:
        3px;
}


.prenatal-seo-hero__action-content strong {

    display:
        block;

    color:
        inherit;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        14px;

    font-weight:
        800;

    line-height:
        1.2;

    text-transform:
        uppercase;
}


.prenatal-seo-hero__action-content small {

    display:
        block;

    color:
        inherit;

    opacity:
        .78;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        11px;

    line-height:
        1.35;
}


/* =========================================================
   QUOTE — BELOW CTA BUTTONS
   ========================================================= */

.prenatal-seo-hero__quote {

    position: absolute;

    z-index: 6;

    right: 0;

    /*
     * Move quote below the CTA stack.
     */
    bottom: -125px;

    width: 275px;

    padding: 14px 20px;

    color: var(--prenatal-green);

    text-align: center;

    pointer-events: none;
}


.prenatal-seo-hero__quote-mark {

    display: block;

    height: 20px;

    color: var(--prenatal-gold);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 48px;

    font-weight: 700;

    line-height: .7;
}


.prenatal-seo-hero__quote p {

    margin: 0;

    color: var(--prenatal-green);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 20px;

    font-style: italic;

    line-height: 1.42;
}


.prenatal-seo-hero__quote-mark--end {

    height: 12px;

    margin-top: 5px;

    font-size: 32px;
}


/* =========================================================
   16 — LARGE DESKTOP
   ========================================================= */

@media (min-width: 1500px) {

    .prenatal-seo-hero__container {

        min-height:
            800px;
    }


    .prenatal-seo-hero__image {

        width:
            555px;

        height:
            555px;

        flex-basis:
            555px;
    }


    .prenatal-seo-hero__visual::before {

        width:
            650px;

        height:
            650px;
    }


    .prenatal-seo-hero__visual::after {

        width:
            605px;

        height:
            605px;
    }

}


/* =========================================================
   17 — 1200px
   ========================================================= */

@media (max-width: 1200px) {

    .prenatal-seo-hero__container {

        width:
            min(
                calc(100% - 45px),
                1160px
            );

        grid-template-columns:
            minmax(0, 1fr)
            minmax(470px, .82fr);

        column-gap:
            25px;
    }


    .prenatal-seo-hero__content h2 {

        font-size:
            clamp(
                42px,
                4.2vw,
                62px
            );
    }


    .prenatal-seo-hero__image {

        width:
            450px;

        height:
            450px;

        flex-basis:
            450px;
    }


    .prenatal-seo-hero__visual::before {

        width:
            535px;

        height:
            535px;
    }


    .prenatal-seo-hero__visual::after {

        width:
            500px;

        height:
            500px;
    }


    .prenatal-seo-hero__actions {

        width:
            340px;

        bottom:
            52px;
    }


    .prenatal-seo-hero__quote {

        width:
            245px;
    }

}


/* =========================================================
   18 — TABLET / STACK
   ========================================================= */

@media (max-width: 900px) {

    .prenatal-seo-hero__container {

        width:
            min(
                calc(100% - 36px),
                760px
            );

        min-height:
            0;

        grid-template-columns:
            1fr;

        row-gap:
            42px;

        padding:
            48px 0 55px;
    }


    .prenatal-seo-hero__content {

        max-width:
            100%;

        padding-left:
            0;
    }


    .prenatal-seo-hero__text {

        max-width:
            100%;
    }


    .prenatal-seo-learning {

        max-width:
            100%;
    }


    .prenatal-seo-hero__visual {

        min-height:
            590px;
    }


    .prenatal-seo-hero__image {

        width:
            430px;

        height:
            430px;

        flex-basis:
            430px;
    }


    .prenatal-seo-hero__visual::before {

        width:
            500px;

        height:
            500px;
    }


    .prenatal-seo-hero__visual::after {

        width:
            470px;

        height:
            470px;
    }


    .prenatal-seo-hero__actions {

        width:
            365px;

        bottom:
            53px;
    }


    .prenatal-seo-hero__quote {

        right:
            50%;

        bottom:
            -3px;

        transform:
            translateX(50%);
    }


    .prenatal-seo-hero__botanical {

        right:
            4%;
    }

}


/* =========================================================
   19 — MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .prenatal-seo-hero__container {

        width:
            calc(100% - 30px);

        padding:
            36px 0 42px;

        row-gap:
            28px;
    }


    .prenatal-seo-hero__eyebrow {

        font-size:
            10px;

        letter-spacing:
            .13em;
    }


    .prenatal-seo-hero__eyebrow-icon {

        width:
            18px;

        height:
            18px;

        font-size:
            15px;
    }


    .prenatal-seo-hero__content h2 {

        font-size:
            39px;

        line-height:
            1.02;
    }


    .prenatal-seo-hero__tagline {

        font-size:
            20px;

        line-height:
            1.25;
    }


    .prenatal-seo-hero__text p {

        font-size:
            14px;

        line-height:
            1.68;
    }


    .prenatal-seo-learning {

        margin-top:
            22px;
    }


    .prenatal-seo-learning__heading {

        grid-template-columns:
            25px
            auto
            25px;

        gap:
            8px;
    }


    .prenatal-seo-learning__heading h3 {

        font-size:
            17px;
    }


    .prenatal-seo-learning__grid {

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

        gap:
            7px;
    }


    .prenatal-seo-learning__item {

        min-height:
            68px;

        padding:
            8px;

        gap:
            7px;
    }


    .prenatal-seo-learning__icon {

        width:
            29px;

        height:
            29px;

        flex-basis:
            29px;

        font-size:
            13px;
    }


    .prenatal-seo-learning__item strong {

        font-size:
            10px;
    }


    .prenatal-seo-hero__visual {

        min-height:
            505px;
    }


    .prenatal-seo-hero__image {

        width:
            315px;

        height:
            315px;

        flex-basis:
            315px;

        border-width:
            7px;
    }


    .prenatal-seo-hero__image-ring {

        inset:
            7px;
    }


    .prenatal-seo-hero__visual::before {

        width:
            360px;

        height:
            360px;
    }


    .prenatal-seo-hero__visual::after {

        width:
            340px;

        height:
            340px;
    }


    .prenatal-seo-hero__actions {

        width:
            min(
                calc(100% - 8px),
                350px
            );

        bottom:
            50px;

        gap:
            8px;
    }


    .prenatal-seo-hero__action {

        min-height:
            61px;

        padding:
            8px 11px;

        border-radius:
            10px;
    }


    .prenatal-seo-hero__action-icon {

        width:
            38px;

        height:
            38px;

        flex-basis:
            38px;
    }


    .prenatal-seo-hero__action-content strong {

        font-size:
            13px;
    }


    .prenatal-seo-hero__action-content small {

        font-size:
            10px;
    }


    .prenatal-seo-hero__quote {

        width:
            240px;

        bottom:
            -1px;

        padding:
            8px 10px;
    }


    .prenatal-seo-hero__quote-mark {

        font-size:
            38px;
    }


    .prenatal-seo-hero__quote p {

        font-size:
            17px;
    }


    .prenatal-seo-hero__botanical {

        display:
            none;
    }

}


/* =========================================================
   20 — SMALL MOBILE
   ========================================================= */

@media (max-width: 400px) {

    .prenatal-seo-hero__content h2 {

        font-size:
            35px;
    }


    .prenatal-seo-learning__grid {

        grid-template-columns:
            1fr;
    }


    .prenatal-seo-hero__visual {

        min-height:
            470px;
    }


    .prenatal-seo-hero__image {

        width:
            285px;

        height:
            285px;

        flex-basis:
            285px;
    }


    .prenatal-seo-hero__visual::before {

        width:
            325px;

        height:
            325px;
    }


    .prenatal-seo-hero__visual::after {

        width:
            305px;

        height:
            305px;
    }


    .prenatal-seo-hero__actions {

        bottom:
            43px;

        width:
            100%;
    }


    .prenatal-seo-hero__quote p {

        font-size:
            15px;
    }

}


/* =========================================================
   21 — ACCESSIBILITY
   ========================================================= */

.prenatal-seo-hero__action:focus-visible {

    outline:
        2px solid
        var(--prenatal-gold);

    outline-offset:
        3px;
}