/* =========================
ROOT VARIABLES
========================= */

:root{

--bg:#F5F2EE;
--bg-soft:#FAF7F3;
--bg-elevated:#F8F5F1;

--white:#ffffff;

--text:#111111;
--body:#5D5A57;

--muted:#D9D2CB;
--muted-soft:#E8E2DC;

--accent:#9BB8B1;
--accent-dark:#7E9C95;
--accent-soft:#D7E3DF;

--line:#E6E0DA;

--shadow:
0 10px 30px rgba(17,17,17,.03);

--shadow-soft:
0 20px 60px rgba(17,17,17,.04);

--container:1380px;

--radius:100px;

--transition:
cubic-bezier(.16,1,.3,1);

}

/* =========================
RESET
========================= */

*{

margin:0;
padding:0;
font-family:
'Cormorant Garamond',
'Tiro Devanagari Hindi',
serif;
box-sizing:border-box;
font-variant-numeric:
tabular-nums lining-nums;
font-feature-settings:
"liga" 1,
"kern" 1;
}

html[lang="hi"] body{

font-family:'Hind',sans-serif;
}
html[lang="hi"] .hero-title,
html[lang="hi"] .editorial-title,
html[lang="hi"] .studies-title,
html[lang="hi"] .section-title{
font-size:38px !important;
font-weight:300;
}
html[lang="hi"] .cta-title{
font-size:25px !important;
font-weight:300;
}
html[lang="hi"] .editorial-title {
    line-height: 1.5;
}

html[lang="hi"] .hero-title,
html[lang="hi"] .difference-text,
html[lang="hi"] .section-title, html[lang="hi"] .fortranslation{

font-family:'Cormorant Garamond',serif;
font-weight:300;
line-height:1.75;

max-width:1100px;

margin:auto;

}





html{

scroll-behavior:smooth;

}
body{

background:var(--bg);

color:var(--text);

overflow-x:hidden;

-webkit-font-smoothing:antialiased;

text-rendering:optimizeLegibility;
letter-spacing:-0.01em;

}

/* =========================
TYPOGRAPHY RESET
=========================

h1,
h2,
h3,
h4,
h5,
h6{

font-kerning:normal;



}

/* =========================
SELECTION
========================= */

::selection{

background:var(--accent);

color:#fff;

}

/* =========================
MEDIA
========================= */

img,
video{

max-width:100%;

display:block;

}

/* =========================
LINKS
========================= */

a{

text-decoration:none;

color:inherit;

}

/* =========================
BUTTON RESET
========================= */

button{

border:none;

background:none;

cursor:pointer;

}

/* =========================
INPUTS
========================= */

input,
textarea,
button{

font-family:inherit;

outline:none;

}

/* =========================
LISTS
========================= */

ul,
ol{

list-style-position:inside;

}

/* =========================
CONTAINER
========================= */

.container{

width:100%;

max-width:var(--container);

margin:auto;

padding-inline:54px;

}

/* =========================
SECTION
========================= */

section{

position:relative;

}

.section{

padding:
160px 0;

}

/* =========================
LUXURY TYPOGRAPHY
========================= */

h1,
h2,
h3,
.section-title,
.hero-title,
.headline,
.blog-title,
.step-title,
.cta-title,
.editorial-title{


font-weight:300;

letter-spacing:-1.8px;

line-height:1.02;

color:var(--text);

text-wrap:balance;

}

/* =========================
BODY TEXT
========================= */

p{

font-size:18px;

line-height:1.95;

font-weight:400;

color:var(--body);

}

/* =========================
SECTION TITLE
========================= */

.section-title{

font-size:
clamp(48px,4vw,84px);

text-align:center;

max-width:980px;

margin-inline:auto;

line-height:1.08;

}

/* =========================
LINE
========================= */

.line{

width:48px;
height:1px;

background:var(--accent);

margin:
0 auto;

opacity:.7;

}

/* =========================
BUTTONS
========================= */

.btn{

min-width:240px;
width: auto;
height:58px;
padding: 5px 15px;
border-radius:var(--radius);

border:
1px solid rgba(155,184,177,.42);

background:
rgba(255,255,255,.42);

backdrop-filter:blur(12px);

display:flex;
align-items:center;
justify-content:center;
gap:18px;

font-size:13px;

font-weight:500;

letter-spacing:3px;

text-transform:uppercase;

color:var(--text);

transition:
transform .55s var(--transition),
background .45s ease,
border-color .45s ease,
box-shadow .45s ease,
letter-spacing .45s ease;
}

.btn:hover{

background:
rgba(155,184,177,.08);

border-color:
rgba(155,184,177,.8);

transform:
translateY(-3px);

letter-spacing:3.6px;

box-shadow:
var(--shadow-soft);

}
.btn {
    -webkit-tap-highlight-color: transparent;
    -webkit-appearance: none;
    appearance: none;
}


/* =========================
FILLED BUTTON
========================= */

.btn-filled{

background:var(--accent);

border:none;

color:#fff;

}

.btn-filled:hover{

background:var(--accent-dark);

}

/* =========================
TOPBAR
========================= */

.topbar{

padding-top:30px;

position:relative;

text-align:center;

z-index:50;

}

/* =========================
LANGUAGE
========================= */

.lang{

position:absolute;

top:44px;
right:54px;



font-size:18px;

font-weight:400;

letter-spacing:.6px;

cursor:pointer;

transition:
opacity .3s ease,
transform .3s ease;

}

.lang:hover{

opacity:.65;

transform:
translateY(-1px);

}

.lang::after{

content:'';

display:block;

width:42px;
height:1px;

background:var(--accent);

margin-top:8px;

margin-left:auto;

opacity:.75;

}

/* =========================
LOGO
========================= */

.logo-wrap{

display:flex;
align-items:center;
justify-content:center;
gap:26px;

}

.logo-divider{

width:54px;
height:1px;

background:
linear-gradient(
to right,
transparent,
rgba(155,184,177,.6),
transparent
);

opacity:.65;

}

.logo-image{

width:100%;
max-width:240px;

height:auto;

object-fit:contain;

}

/* =========================
EYEBROW
========================= */

.eyebrow{

font-size:13px;

letter-spacing:8px;

font-weight:500;

text-transform:uppercase;

text-align:center;

opacity:.62;

margin-bottom:28px;

}

/* =========================
REVEAL
========================= */

.reveal{

opacity:0;

transform:
translateY(42px);

will-change:
transform,
opacity;

}

/* =========================
HEADLINE TRANSITION
========================= */

.headline{

transition:
opacity .9s ease,
transform .9s ease,
filter .9s ease;

will-change:
transform,
opacity,
filter;

}

/* =========================
HEADLINE SPANS
========================= */

.headline span{

display:inline-block;

}

/* =========================
PAGE NOISE
========================= */

.page-noise{

position:fixed;

inset:0;

pointer-events:none;

z-index:999;

opacity:.018;

mix-blend-mode:soft-light;

background-image:
url("../images/noise.png");

background-size:cover;

}

/* =========================
PAGE TRANSITION
========================= */

.page-transition{

position:fixed;

inset:0;

background:#F5F2EE;

z-index:9999;

pointer-events:none;

opacity:0;

}

/* =========================
TRANSITION OVERLAY
========================= */

.transition-overlay{

position:absolute;

inset:0;

background:
linear-gradient(
to bottom,
rgba(245,242,238,.96),
rgba(245,242,238,1)
);

}

/* =========================
EDITORIAL SECTION
========================= */

.editorial-section{

padding:
170px 0 100px;

}

.editorial-inner{

text-align:center;

max-width:1040px;

}

.editorial-title{

font-size:
clamp(50px,4vw,84px);

line-height:1.08;

}

.editorial-line{

width:46px;
height:1px;

background:var(--accent);

margin:
38px auto 0;

opacity:.7;

}

/* =========================
BOOKING SECTION
========================= */

.booking-section{

padding:
80px 0 180px;

}

.booking-grid{

display:grid;

grid-template-columns:
repeat(4,1fr);

gap:48px;


}

.booking-item{

text-align:left;

}

.booking-label{

font-size:11px;

letter-spacing:4px;

text-transform:uppercase;

margin-bottom:20px;

color:#8D8781;

}

.booking-value{

font-size:24px;

line-height:1.7;


font-weight:400;

color:var(--text);

}

.booking-location{

font-size:18px;

line-height:2;

}

/* =========================
FOOTER
========================= */

.footer{

padding:
20px 20px;

text-align:center;

font-size:15px;

line-height:2.1;

color:var(--body);

background:#FAF8F5;

border-top:
1px solid rgba(230,224,218,.7);

}

/* =========================
SCROLLBAR
========================= */

::-webkit-scrollbar{

width:8px;

}

::-webkit-scrollbar-track{

background:#F2ECE6;

}

::-webkit-scrollbar-thumb{

background:#CFC6BE;

border-radius:50px;

}

::-webkit-scrollbar-thumb:hover{

background:#BFB5AC;

}

/* =========================
GLOBAL TRANSITIONS
========================= */

section,
img,
button,
a{

transition:
background .35s ease,
color .35s ease,
border-color .35s ease;

}

/* =========================
FOCUS STATES
========================= */

a:focus-visible,
button:focus-visible{

outline:
1px solid rgba(155,184,177,.7);

outline-offset:4px;

}

/* =========================
REDUCED MOTION
========================= */

@media(prefers-reduced-motion:reduce){

*{

animation:none !important;

transition:none !important;

scroll-behavior:auto !important;

}

}


/* =========================
LANGUAGE BUTTON FIX
========================= */

.lang{

z-index:9999;

pointer-events:auto;

cursor:pointer;

}

/* OVERLAY FIX */

.hero-overlay,
.hero-vignette,
.film-grain,
.film-scratch{

pointer-events:none;

}
/* =========================
FOOTER
========================= */

.footer{

padding:
20px 20px 20px;

text-align:center;

background:#faf8f5;

}

.footer-line{

width:60px;
height:1px;

background:var(--accent);

margin:
0 auto 40px;

}

.footer-clinic{

font-size:32px;

line-height:1.2;

font-weight:300;

margin-bottom:14px;

color:#111111;

}

.footer-address{

font-size:23px;

line-height:1.9;

color:#5d5a57;

margin-bottom:10px;

}

.footer-contact{

font-size:20px;

line-height:1.8;

margin-bottom:40px;

color:#111111;

}

.footer-contact a{

color:inherit;

text-decoration:none;

border-bottom:
1px solid transparent;

transition:
border-color .3s ease;

}

.footer-contact a:hover{

border-color:currentColor;

}

.footer-links{

margin-bottom:40px;

}

.footer-links a{

font-size:16px;

color:#5d5a57;

text-decoration:underline;

}

.footer-crafted{

font-size:15px;

line-height:1.8;

color:#8d8781;

}

.footer-crafted a{

color:#5d5a57;

text-decoration:none;

}



.whatsaoobutton{

position:fixed !important;

right:20px !important;
bottom:20px !important;

z-index:999999 !important;

display:flex;

align-items:center;
justify-content:center;

width:90px;
height:48px;

font-size:13px;
font-weight:600;

letter-spacing:1px;

border-radius:6px;

color:#fff;

text-decoration:none;

background:
linear-gradient(
180deg,
#719684 0%,
#145033 100%
);
border:1px solid
rgba(0,180,255,.35);

box-shadow:
0 0 8px rgba(0,180,255,.25),
0 0 20px rgba(0,180,255,.15),
inset 0 0 10px rgba(0,180,255,.12);

overflow:hidden;

animation:
panelGlow 2.5s ease-in-out infinite;
display: none;
}

/* inner blue panel */

.whatsaoobutton::before{

content:"";

position:absolute;

inset:4px;

border-radius:5px;

background:
linear-gradient(
180deg,
rgba(120,220,255,.18),
rgba(0,90,140,.08)
);

box-shadow:
inset 0 0 12px rgba(120,220,255,.25);
transition:
all .35s ease;
}

/* moving shine */

.whatsaoobutton::after{

content:"";

position:absolute;

top:0;
left:-150%;

width:60%;
height:100%;

background:

linear-gradient(
90deg,
transparent,
rgba(255,255,255,.18),
transparent
);

transform:skewX(-25deg);

animation:
shine 4s linear infinite;

}
.whatsaoobutton:hover{

transform:
translateY(-2px);

color:#ffffff;

border-color:
rgba(0,180,255,.8);

box-shadow:
0 0 15px rgba(0,180,255,.35),
0 0 30px rgba(0,180,255,.25),
0 0 60px rgba(0,180,255,.15),
inset 0 0 15px rgba(0,180,255,.20);

}

.whatsaoobutton:hover::before{

background:
linear-gradient(
180deg,
rgba(120,220,255,.25),
rgba(0,90,140,.12)
);

}

.whatsaoobutton:hover span{

text-shadow:
0 0 8px rgba(255,255,255,.35);

}
.whatsaoobutton span{

position:relative;

z-index:2;

}

@keyframes panelGlow{

0%{

box-shadow:
inset 0 0 10px rgba(0,180,255,.12),
0 0 10px rgba(0,180,255,.12);

}

50%{

box-shadow:
inset 0 0 18px rgba(0,180,255,.28),
0 0 24px rgba(0,180,255,.35);

}

100%{

box-shadow:
inset 0 0 10px rgba(0,180,255,.12),
0 0 10px rgba(0,180,255,.12);

}

}

@keyframes shine{

0%{
left:-150%;
}

100%{
left:150%;
}

}

.intro-overlay.hide{

opacity:0;

visibility:hidden;

}


@media(max-width:768px){

.whatsaoobutton{

/* display:flex !important; */
}

}



/* ================================
   PREMIUM GLOBAL ACTION BUTTON
================================ */

.premium-action-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 190px;
    min-height: 52px;
    padding: 10px 28px;

    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;

    border-radius: 6px;

    color: #fff !important;
    text-decoration: none !important;

    background:
        linear-gradient(
            180deg,
            #719684 0%,
            #145033 100%
        );

    border: 1px solid rgba(0, 180, 255, .35);

    box-shadow:
        0 0 8px rgba(0, 180, 255, .25),
        0 0 20px rgba(0, 180, 255, .15),
        inset 0 0 10px rgba(0, 180, 255, .12);

    overflow: hidden;

    animation:
        premiumPanelGlow 2.5s ease-in-out infinite;

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;

    cursor: pointer;
}


/* INNER PANEL */

.premium-action-btn::before {
    content: "";

    position: absolute;

    inset: 4px;

    border-radius: 4px;

    background:
        linear-gradient(
            180deg,
            rgba(120, 220, 255, .18),
            rgba(0, 90, 140, .08)
        );

    box-shadow:
        inset 0 0 12px rgba(120, 220, 255, .25);

    transition: all .35s ease;

    pointer-events: none;
}


/* MOVING SHINE */

.premium-action-btn::after {
    content: "";

    position: absolute;

    top: 0;
    left: -150%;

    width: 60%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, .18),
            transparent
        );

    transform: skewX(-25deg);

    animation:
        premiumShine 4s linear infinite;

    pointer-events: none;
}


/* TEXT / ICON */

.premium-action-btn span {
    position: relative;
    z-index: 2;
}


/* HOVER */

.premium-action-btn:hover {
    transform: translateY(-2px);

    color: #ffffff !important;

    border-color:
        rgba(0, 180, 255, .8);

    box-shadow:
        0 0 15px rgba(0, 180, 255, .35),
        0 0 30px rgba(0, 180, 255, .25),
        0 0 60px rgba(0, 180, 255, .15),
        inset 0 0 15px rgba(0, 180, 255, .20);
}


.premium-action-btn:hover::before {
    background:
        linear-gradient(
            180deg,
            rgba(120, 220, 255, .25),
            rgba(0, 90, 140, .12)
        );
}


.premium-action-btn:hover span {
    text-shadow:
        0 0 8px rgba(255, 255, 255, .35);
}


/* ANIMATION */

@keyframes premiumPanelGlow {

    0% {
        box-shadow:
            inset 0 0 10px rgba(0, 180, 255, .12),
            0 0 10px rgba(0, 180, 255, .12);
    }

    50% {
        box-shadow:
            inset 0 0 18px rgba(0, 180, 255, .28),
            0 0 24px rgba(0, 180, 255, .35);
    }

    100% {
        box-shadow:
            inset 0 0 10px rgba(0, 180, 255, .12),
            0 0 10px rgba(0, 180, 255, .12);
    }

}


@keyframes premiumShine {

    0% {
        left: -150%;
    }

    100% {
        left: 150%;
    }

}



@media(max-width:768px){
.premium-action-btn {
padding: 10px 10px 10px 18px;
font-size: 15px;
margin-top: 10px;
}
}
    .rrds-wrap b, .rrds-wrap strong{font-weight: 800;color: #155234;}
