.elementor-279 .elementor-element.elementor-element-c7f1ffc{--display:flex;}/* Start custom CSS for html, class: .elementor-element-7b70c4d *//* =============================================
   ORAL HEALTH LANDING PAGE
============================================= */

:root{

    --oh-background:#f7efe6;

    --oh-background-light:#fbf5ee;

    --oh-green:#435944;

    --oh-green-light:#6f806a;

    --oh-sage:#a9ae91;

    --oh-gold:#c8a35b;

    --oh-text:#4f5e50;

}


*{
    box-sizing:border-box;
}


#oral-health-page{
    overflow:hidden;
}


.oh-page{

    width:100%;

    padding:
        70px
        28px
        55px;

    color:var(--oh-text);

    font-family:
        Arial,
        sans-serif;

    background:

        radial-gradient(
            circle at 50% 22%,
            rgba(255,255,255,.72),
            transparent 37%
        ),

        linear-gradient(
            180deg,
            #faf2e9 0%,
            #f7eee5 100%
        );

}



/* =============================================
   HERO
============================================= */

.oh-hero{

    width:100%;

    max-width:1100px;

    margin:0 auto;

    text-align:center;

}


.oh-main-title{

    margin:0;

    color:var(--oh-green);

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

    font-size:
        clamp(
            52px,
            7vw,
            96px
        );

    font-weight:400;

    line-height:.88;

    letter-spacing:-2px;

}


.oh-main-title > span{

    display:block;

}


.oh-title-divider{

    display:flex !important;

    align-items:center;

    justify-content:center;

    gap:20px;

    margin:
        15px
        0
        7px;

}


.oh-title-divider i{

    display:block;

    width:66px;

    height:1px;

    background:
        var(--oh-gold);

}


.oh-title-divider em{

    color:var(--oh-green);

    font-family:
        Arial,
        sans-serif;

    font-size:23px;

    font-style:normal;

    font-weight:500;

    letter-spacing:4px;

}


.oh-intro{

    margin:
        28px
        auto
        0;

    color:#536653;

    font-size:
        clamp(
            15px,
            1.45vw,
            20px
        );

    font-weight:600;

    line-height:1.55;

}



/* =============================================
   MAIN THREE COLUMN AREA
============================================= */

.oh-connections{

    position:relative;

    width:100%;

    max-width:1260px;

    margin:
        40px
        auto
        0;

    display:grid;

    grid-template-columns:
        minmax(230px,1fr)
        minmax(420px,1.62fr)
        minmax(230px,1fr);

    align-items:center;

    gap:0;

}



/* =============================================
   SIDE COLUMNS
============================================= */

.oh-side{

    position:relative;

    z-index:7;

    display:flex;

    flex-direction:column;

    gap:44px;

}


.oh-health-item{

    position:relative;

    display:flex;

    align-items:center;

    gap:17px;

}


.oh-side-left
.oh-health-item{

    justify-content:flex-end;

}


.oh-side-right
.oh-health-item{

    justify-content:flex-start;

}



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

.oh-copy{

    width:100%;

    max-width:190px;

}


.oh-side-left
.oh-copy{

    text-align:right;

}


.oh-side-right
.oh-copy{

    text-align:left;

}


.oh-copy h3{

    margin:
        0
        0
        6px;

    color:
        var(--oh-green-light);

    font-size:14px;

    line-height:1.15;

    font-weight:700;

}


.oh-copy p{

    margin:0;

    color:#4d5b4d;

    font-size:13px;

    line-height:1.43;

    font-weight:500;

}

.oh-benefit-card:nth-child(3) .oh-health-icon {
    width: 70px;
}

/* =============================================
   SIDE ICON CIRCLES
============================================= */

.oh-icon-circle{

    position:relative;

    width:80px;

    min-width:80px;

    height:80px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

background: radial-gradient(circle at 32% 26%, rgba(255, 255, 255, .18), transparent 36%), #a7ad90;

    box-shadow:
        0 7px 18px
        rgba(76,87,68,.08);

  

}


/* spacing only - animations removed */
.oh-health-item:nth-child(2){
    gap:17px !important;
}

.oh-health-item:nth-child(3){
    gap:20px !important;
}



/* static icon ring - no animation */
.oh-icon-circle::after{
    content:"";
    position:absolute;
    inset:-4px;
    border-radius:50%;
    border:1px solid rgb(158 167 137);
    opacity:0;
    transform:scale(.92);
}

.oh-health-item:hover .oh-icon-circle::after{
    opacity:1;
    transform:scale(1.05);
}

.oh-health-item:hover .oh-icon-circle{
    box-shadow:0 12px 25px rgba(73,87,66,.14);
}


.oh-icon-circle svg{

    display:block;

    width:48px;

    height:48px;

    fill:none;

    stroke:#f4f1e7;

    stroke-width:1.6;

    stroke-linecap:round;

    stroke-linejoin:round;

}

}

/* =============================================
   ICONS IN A SLIGHT ARC
   REFERENCE-LIKE CURVE
============================================= */

/*
    LEFT:

           ●
        ●
        ●
           ●
*/

.oh-side-left
.oh-health-item:nth-child(1)
.oh-icon-circle{

    transform:
        translateX(20px) !important;

}


.oh-side-left
.oh-health-item:nth-child(2)
.oh-icon-circle{

    transform:
        translateX(1px) !important;

}


.oh-side-left
.oh-health-item:nth-child(3)
.oh-icon-circle{

    transform:
        translateX(1px) !important;

}


.oh-side-left
.oh-health-item:nth-child(4)
.oh-icon-circle{

    transform:
        translateX(12px) !important;

}



/*
    RIGHT:

      ●
         ●
         ●
      ●
*/

.oh-side-right
.oh-health-item:nth-child(1)
.oh-icon-circle{

    transform:
        translateX(-20px) !important;

}


.oh-side-right
.oh-health-item:nth-child(2)
.oh-icon-circle{

    transform:
        translateX(-1px)!important;

}


.oh-side-right
.oh-health-item:nth-child(3)
.oh-icon-circle{

    transform:
        translateX(-1px) !important;

}


.oh-side-right
.oh-health-item:nth-child(4)
.oh-icon-circle{

    transform:
        translateX(-12px) !important;

}



/*
   Retain horizontal curve while
   icon also moves vertically.
*/

}



/* =============================================
   CENTER AREA
============================================= */

.oh-center{

    position:relative;

    z-index:3;

    display:flex;

    align-items:center;

    justify-content:center;

    min-width:0;

}



/* =============================================
   PORTRAIT WRAPPER
============================================= */

.oh-portrait-wrap{

    position:relative;

    width:100%;

    max-width:500px;

    height:600px;

    display:flex;

    align-items:center;

    justify-content:center;

}



/* =============================================
   EGG / VERTICAL OVAL RING

   IMPORTANT:
   width and height are intentionally different.
============================================= */

.oh-portrait-ring{

    position:absolute;

    left:50%;

    top:50%;

    width:95%;

    height:94%;

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

    border:
        1.4px solid
        var(--oh-gold);

    border-radius:50%;

    z-index:1;

    pointer-events:none;

}



/* =============================================
   DOT ORBIT

   Same exact dimensions as the border.
   JS moves dots using an ellipse equation.
============================================= */

.oh-orbit-spin{

    position:absolute;

    left:50%;

    top:50%;

    width:95%;

    height:94%;

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

    border-radius:50%;

    z-index:6;

    pointer-events:none;

}



/* =============================================
   GOLD DOTS
============================================= */

.oh-dot{

    position:absolute;

    left:50%;

    top:50%;

    width:10px;

    height:10px;

    background:
        var(--oh-gold);

    border-radius:50%;

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

    box-shadow:

        0 0 0 4px
        rgba(201,165,92,.06),

        0 3px 7px
        rgba(99,76,34,.13);

}



/*
   IMPORTANT

   Old top / right / bottom / left
   positioning must NOT apply.
*/

.dot-1,
.dot-2,
.dot-3,
.dot-4{

    right:auto !important;

    bottom:auto !important;

}



/* =============================================
   WOMAN IMAGE OVAL
============================================= */

.oh-portrait{

    position:absolute;

    left:50%;

    top:53%;

    width:90%;

    height:87%;

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

    /*
       Vertical oval clipping
    */

    border-radius:
        50% / 47%;

    overflow:hidden;

    z-index:2;

    background:
        transparent;

    display:flex;

    justify-content:center;

    align-items:flex-end;

}



/* =============================================
   WOMAN IMAGE
============================================= */

.oh-portrait img{

    display:block;

    width:100%;

    height:100%;

    object-fit:cover;

    /*
       Change second number if you
       need to move woman up/down.

       30% = move crop upward
       45% = move crop downward
    */

    object-position:
        center
        34%;

    transform:
        scale(1.035);

    transform-origin:
        center center;


}


.oh-portrait-wrap:hover
.oh-portrait img{

    transform:
        scale(1.06);

}



/* =============================================
   BIGGER PICTURE SECTION
============================================= */

.oh-bigger-picture{

    position:relative;

    width:100%;

    max-width:1380px;

    margin:
        50px
        auto
        0;

    padding:
        75px
        45px
        20px;

}



/* top curved line */

.oh-curve{

    position:absolute;

    top:0;

    left:50%;

    width:118%;

    height:105px;

    transform:
        translateX(-50%);

    border-top:
        1.3px solid
        #73816e;

    border-radius:
        50%
        50%
        0
        0
        /
        95%
        95%
        0
        0;

    opacity:.72;

}



/* heading */

.oh-section-heading{

    position:relative;

    z-index:2;

    text-align:center;

}


.oh-section-heading span{

    display:block;

    color:
        var(--oh-green-light);

    font-size:15px;

    font-weight:700;

    letter-spacing:1.4px;

}


.oh-section-heading h2{

    margin:
        5px
        0
        0;

    color:
        var(--oh-green);

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

    font-size:
        clamp(
            29px,
            3.4vw,
            48px
        );

    font-weight:400;

    line-height:1.1;

}



/* =============================================
   BOTTOM BENEFITS
============================================= */

.oh-benefit-grid{

    margin-top:38px;

    display:grid;

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

}


.oh-benefit-card{

    min-height:170px;

    padding:
        7px
        30px;

    display:grid;

    grid-template-columns:
        72px
        1fr;

    gap:18px;

    align-items:start;

}


.oh-benefit-card +
.oh-benefit-card{

    border-left:
        1px solid
        rgba(74,94,72,.14);

}



/* bottom icons */

.oh-benefit-icon{

    width:100px;
 
    display:flex;

    align-items:center;

    justify-content:center;


}


.oh-benefit-icon svg{

    width:60px;

    height:60px;

    fill:none;

    stroke:#9ca486;

    stroke-width:2;

    stroke-linecap:round;

    stroke-linejoin:round;

}


.oh-benefit-card:hover
.oh-benefit-icon{

    transform:
        translateY(-5px);

}



/* bottom typography */

.oh-benefit-card h3{

    margin:
        4px
        0
        7px;

    color:
        var(--oh-green-light);

    font-size:14px;

    font-weight:700;

}


.oh-benefit-card p{

    margin:0;

    color:#536253;

    font-size:13px;

    line-height:1.5;

}



/* =============================================
   FINAL TEXT
============================================= */

.oh-bottom-copy{

    margin-top:38px;

    text-align:center;

    color:#697866;

}


.oh-bottom-copy strong{

    font-size:14px;

    font-weight:600;

}


.oh-bottom-copy p{

    margin:
        8px
        0
        0;

    font-size:13px;

    line-height:1.5;

}

.oh-icon-circle img {
    width:50px;
    height:50px;
    object-fit:contain;
    display:block;
    position:relative;
    z-index:2;
    pointer-events:none;
}
.oh-health-icon{
    width:100px;
    height:auto;
    object-fit:contain;
    display:block;
    position:relative;
    z-index:2;
    pointer-events:none;
}
/* scroll animation removed - content always visible */
.reveal,
.reveal.is-visible{
    opacity:1;
    transform:none;
}




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

@media
(max-width:1100px){

    .oh-page{

        padding-left:18px;

        padding-right:18px;

    }


    .oh-connections{

        grid-template-columns:

            minmax(190px,1fr)

            minmax(340px,1.45fr)

            minmax(190px,1fr);

    }


    .oh-side{

        gap:35px;

    }


    .oh-icon-circle{

        width:70px;

        height:70px;

        min-width:70px;

    }


    .oh-icon-circle svg{

        width:42px;

        height:42px;

    }


    .oh-copy{

        max-width:160px;

    }


    .oh-copy h3{

        font-size:12px;

    }


    .oh-copy p{

        font-size:11.5px;

    }


    .oh-portrait-wrap{

        max-width:420px;

        height:520px;

    }

}



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

@media
(max-width:820px){

    .oh-page{

        padding-top:45px;

    }


    .oh-main-title{

        line-height:.94;

        letter-spacing:-1px;

    }


    .oh-intro br{

        display:none;

    }


    .oh-connections{

        grid-template-columns:1fr;

        gap:30px;

        margin-top:30px;

    }


    /*
       woman first
    */

    .oh-center{

        grid-row:1;

    }


    .oh-portrait-wrap{

        max-width:480px;

        height:570px;

    }


    /*
       2-column health cards
    */

    .oh-side{

        display:grid;

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

        gap:15px;

    }


    .oh-health-item,
    .oh-side-left
    .oh-health-item,
    .oh-side-right
    .oh-health-item{
     display:grid;
    grid-template-columns:70px minmax(0, 1fr);
    align-items:center;
    justify-content:initial;
    gap:16px;

    padding:18px;
    border-radius:15px;
    border:1px solid rgba(80,99,78,.08);
    background:rgba(255,255,255,.22);
    }

.oh-health-item .oh-icon-circle{
    grid-column:1;
    grid-row:1;
}

.oh-health-item .oh-copy{
    grid-column:2;
    grid-row:1;
}
    /*
       disable curve positioning
       on mobile
    */

    .oh-side-left
    .oh-health-item
    .oh-icon-circle,

    .oh-side-right
    .oh-health-item
    .oh-icon-circle{

        transform:none !important;

    }


    .oh-side-left
    .oh-copy,

    .oh-side-right
    .oh-copy{

        max-width:none;

        text-align:left;

    }


    .oh-copy h3{

        font-size:13px;

    }


    .oh-copy p{

        font-size:12px;

    }



    .oh-bigger-picture{

        padding:
            65px
            0
            10px;

    }


    .oh-benefit-grid{

        grid-template-columns:1fr;

        gap:10px;

    }


    .oh-benefit-card{

        border-left:none !important;

        border-bottom:
            1px solid
            rgba(80,99,78,.12);

        padding:
            14px
            0
            24px;

    }


    .oh-benefit-card:last-child{

        border-bottom:none;

    }

}



/* =============================================
   PHONE
============================================= */

@media
(max-width:540px){

    .oh-page{

        padding:
            38px
            15px
            35px;

    }


    .oh-main-title{

        font-size:46px;

    }


    .oh-title-divider{

        gap:12px;

    }


    .oh-title-divider i{

        width:40px;

    }


    .oh-title-divider em{

        font-size:16px;

    }


    .oh-intro{

        font-size:13px;

    }


    .oh-portrait-wrap{

        max-width:360px;

        height:450px;

    }


    .oh-side{

        grid-template-columns:1fr;

    }


    .oh-health-item,
    .oh-side-left
    .oh-health-item,
    .oh-side-right
    .oh-health-item{

        display:grid;

        grid-template-columns:
            64px
            1fr;

        align-items:center;

        gap:14px;

    }


    .oh-icon-circle{

        width:62px;

        min-width:62px;

        height:62px;

    }


    .oh-icon-circle svg{

        width:37px;

        height:37px;

    }


    .oh-copy{

        order:initial;

    }


    .oh-benefit-card{

        grid-template-columns:
            60px
            1fr;

    }


    .oh-benefit-icon{

        width:56px;

        height:56px;

    }


    .oh-benefit-icon svg{

        width:52px;

        height:52px;

    }

}




/* ==================================================
   DESKTOP - KEEP ARC + TEXT CLOSE TO ICON
================================================== */
@media (min-width:821px){

    .oh-health-item{
        gap:6px !important;
    }

    /* IMPORTANT:
       Old icon translate remove hoga,
       curve poore item par lagegi
    */
    .oh-side-left .oh-health-item .oh-icon-circle,
    .oh-side-right .oh-health-item .oh-icon-circle{
        transform:none !important;
    }


    /* ==========================
       LEFT SIDE CURVE
    ========================== */

    .oh-side-left .oh-health-item:nth-child(1){
        transform:translateX(55px);
    }

    .oh-side-left .oh-health-item:nth-child(2){
        transform:translateX(50px);
    }

    .oh-side-left .oh-health-item:nth-child(3){
        transform:translateX(59px);
    }

    .oh-side-left .oh-health-item:nth-child(4){
        transform:translateX(72px);
    }


    /* ==========================
       RIGHT SIDE CURVE
    ========================== */

    .oh-side-right .oh-health-item:nth-child(1){
        transform:translateX(-55px);
    }

    .oh-side-right .oh-health-item:nth-child(2){
        transform:translateX(-50px);
    }

    .oh-side-right .oh-health-item:nth-child(3){
        transform:translateX(-59px);
    }

    .oh-side-right .oh-health-item:nth-child(4){
        transform:translateX(-72px);
    }


    /* text width */
    .oh-copy{
        max-width:182px;
    }

    .oh-side-left .oh-copy{
        text-align:right;
    }

    .oh-side-right .oh-copy{
        text-align:left;
    }

 
} 

/* =========================================
   PREMIUM SECTION REVEAL
========================================= */

/* CENTER IMAGE */
.oh-connections .oh-portrait {
    opacity: 0;
    clip-path: inset(0 50% 0 50% round 50%);
    filter: blur(7px);

    transition:
        clip-path 1.5s cubic-bezier(.16, 1, .3, 1),
        opacity 1s ease,
        filter 1.2s ease;
}

.oh-connections.oh-scene-active .oh-portrait {
    opacity: 1;
    clip-path: inset(0 0 0 0 round 50%);
    filter: blur(0);
}


/* GOLD OVAL RING */
.oh-connections .oh-portrait-ring {
    opacity: 0;
    scale: .85;

    transition:
        opacity 1.2s ease .35s,
        scale 1.6s cubic-bezier(.16, 1, .3, 1) .35s;
}

.oh-connections.oh-scene-active .oh-portrait-ring {
    opacity: 1;
    scale: 1;
}


/* GOLD DOTS */
.oh-connections .oh-dot {
    opacity: 0;
    scale: 0;
    transition:
        opacity .7s ease,
        scale .9s cubic-bezier(.34, 1.56, .64, 1);
}

.oh-connections.oh-scene-active .dot-1 {
    opacity: 1;
    scale: 1;
    transition-delay: .65s;
}

.oh-connections.oh-scene-active .dot-2 {
    opacity: 1;
    scale: 1;
    transition-delay: .82s;
}

.oh-connections.oh-scene-active .dot-3 {
    opacity: 1;
    scale: 1;
    transition-delay: .99s;
}

.oh-connections.oh-scene-active .dot-4 {
    opacity: 1;
    scale: 1;
    transition-delay: 1.16s;
}


/* =========================================
   LEFT ICONS
========================================= */

.oh-side-left .oh-icon-circle {
    opacity: 0;
    translate: -55px 0;

    transition:
        translate 1.25s cubic-bezier(.16, 1, .3, 1),
        opacity .9s ease,
        scale .35s ease,
        box-shadow .35s ease;
}


/* RIGHT ICONS */
.oh-side-right .oh-icon-circle {
    opacity: 0;
    translate: 55px 0;

    transition:
        translate 1.25s cubic-bezier(.16, 1, .3, 1),
        opacity .9s ease,
        scale .35s ease,
        box-shadow .35s ease;
}


/* ACTIVE */
.oh-connections.oh-scene-active .oh-icon-circle {
    opacity: 1;
    translate: 0 0;
}


/* =========================================
   ICON DELAYS
========================================= */

.oh-connections.oh-scene-active
.oh-side-left .oh-health-item:nth-child(1) .oh-icon-circle {
    transition-delay: .9s;
}

.oh-connections.oh-scene-active
.oh-side-right .oh-health-item:nth-child(1) .oh-icon-circle {
    transition-delay: 1.05s;
}

.oh-connections.oh-scene-active
.oh-side-left .oh-health-item:nth-child(2) .oh-icon-circle {
    transition-delay: 1.2s;
}

.oh-connections.oh-scene-active
.oh-side-right .oh-health-item:nth-child(2) .oh-icon-circle {
    transition-delay: 1.35s;
}

.oh-connections.oh-scene-active
.oh-side-left .oh-health-item:nth-child(3) .oh-icon-circle {
    transition-delay: 1.5s;
}

.oh-connections.oh-scene-active
.oh-side-right .oh-health-item:nth-child(3) .oh-icon-circle {
    transition-delay: 1.65s;
}

.oh-connections.oh-scene-active
.oh-side-left .oh-health-item:nth-child(4) .oh-icon-circle {
    transition-delay: 1.8s;
}

.oh-connections.oh-scene-active
.oh-side-right .oh-health-item:nth-child(4) .oh-icon-circle {
    transition-delay: 1.95s;
}


/* =========================================
   TEXT REVEAL
========================================= */

.oh-connections .oh-copy {
    opacity: 0;
    translate: 0 18px;
    filter: blur(3px);

    transition:
        opacity 1s ease,
        translate 1.2s cubic-bezier(.16, 1, .3, 1),
        filter 1s ease;
}

.oh-connections.oh-scene-active .oh-copy {
    opacity: 1;
    translate: 0 0;
    filter: blur(0);
}


/* TEXT DELAYS */
.oh-health-item:nth-child(1) .oh-copy {
    transition-delay: 1.15s;
}

.oh-health-item:nth-child(2) .oh-copy {
    transition-delay: 1.45s;
}

.oh-health-item:nth-child(3) .oh-copy {
    transition-delay: 1.75s;
}

.oh-health-item:nth-child(4) .oh-copy {
    transition-delay: 2.05s;
}


/* =========================================
   PREMIUM HOVER
========================================= */

.oh-health-item:hover .oh-icon-circle {
    scale: 1.07;
    box-shadow: 0 12px 28px rgba(67, 89, 68, .16);
}/* End custom CSS */