/* =====================================================
GLOBAL RESET
===================================================== */

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Inter',sans-serif;
}

html{
scroll-behavior:smooth;
}


/* =====================================================
COLOR VARIABLES
===================================================== */

:root{

--primary:#0F2854;
--secondary:#1C4D8D;
--accent:#4988C4;
--light:#BDE8F5;

--bg-light:#f7f9fc;
--bg-section:#eef3f8;

--text-dark:#222;
--text-gray:#6b6b6b;

}


/* =====================================================
BODY
===================================================== */

body{
background:#ffffff;
color:var(--text-dark);
line-height:1.6;
overflow-x:hidden;
animation:fadeInPage .8s ease;
}

@keyframes fadeInPage{
from{
opacity:0;
transform:translateY(10px);
}
to{
opacity:1;
transform:translateY(0);
}
}

img{
max-width:100%;
display:block;
}

.back-button{
position:fixed;
top:20px;
left:20px;
background:#0F2854;
color:#fff;
padding:10px 18px;
border-radius:30px;
font-weight:600;
cursor:pointer;
box-shadow:0 5px 15px rgba(0,0,0,0.2);
transition:0.3s;
z-index:999;
text-decoration: none;
}

.back-button:hover{
background:#1C4D8D;
transform:translateY(-2px);
}

/* Mobile Screen */

@media (max-width:768px){

.back-button{
top:15px;
left:15px;
padding:8px 14px;
font-size:13px;
}

}

/* Small Mobile */

@media (max-width:580px){

.back-button{
top:80px;
left:12px;
padding:10px 15px;
font-size:15px;
}

}


/* =====================================================
ANNOUNCEMENT BAR
===================================================== */

.announcement-bar{
width:100%;
text-align:center;
padding:12px;
font-size:18px;
font-weight:600;
border-bottom:1px solid #eee;
background:#fff;
}

.announcement-bar span{
color:var(--primary);
}


/* Animated announcement text */

#changingText{
display:inline-block;
font-size: 25px;
font-family: "Noto Sans Devanagari", sans-serif;
transition:opacity .4s ease, transform .4s ease;
}

#changingText.fade-out{
opacity:0;
transform:translateY(-6px);
}

#changingText.fade-in{
opacity:1;
transform:translateY(0);
}

/* =====================================================
CONTAINER
===================================================== */

.container{
max-width:1200px;
margin:auto;
padding:20px;
display:flex;
align-items:center;
justify-content:space-between;
gap:40px;
flex-wrap:wrap;
}


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

.hero{
background:linear-gradient(135deg,#f7f9fc,#eaf2f8);
padding:80px 20px;
}

.left{
flex:1;
min-width:280px;
}

.right{
flex:1;
display:flex;
justify-content:center;
}


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

.badge{
display:inline-block;
background:#fff;
padding:6px 14px;
border-radius:25px;
font-size:13px;
color:var(--primary);
font-weight:600;
margin-bottom:14px;
box-shadow:0 3px 10px rgba(0,0,0,0.08);
}


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

.hero-title{
font-size:64px;
font-weight:800;
line-height:1.2;
margin-bottom:16px;
color:var(--text-dark);
}

.hero-title span{
color:var(--secondary);
position:relative;
}

.hero-title span::after{
content:"";
position:absolute;
left:0;
bottom:-6px;
width:100%;
height:6px;
background:var(--light);
border-radius:6px;
}

.hero-sub{
font-size:18px;
color:var(--text-gray);
margin-bottom:15px;
}


/* =====================================================
PRIMARY BUTTON
===================================================== */

.btn{
background:linear-gradient(135deg,var(--primary),var(--secondary));
color:#fff;
padding:16px 36px;
border-radius:40px;
font-weight:800;
font-size: 20px;
text-decoration:none;
display:inline-block;
box-shadow:0 10px 25px rgba(0,0,0,0.15);
transition:.35s;
}

.btn:hover{
transform:translateY(-3px);
box-shadow:0 15px 35px rgba(0,0,0,0.25);
}

.note{
margin-top:12px;
font-size:24px;
color:#2a9d5b;
}


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

.circle{
width:360px;
height:360px;
border-radius:50%;
overflow:hidden;
box-shadow:
0 20px 60px rgba(0,0,0,0.15),
0 0 0 8px rgba(73,136,196,0.08);
}

.circle img{
width:100%;
height:100%;
object-fit:cover;
}


/* ==========================
SOLUTION SECTION
========================== */

.solution{
background:#ffffff;
padding:30px 20px;
text-align:center;
}

.solution h2{
font-size:32px;
margin-bottom:20px;
color:var(--secondary);
font-weight:700;
}


/* ==========================
GRID LAYOUT
========================== */

.problem-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:20px;
max-width:900px;
margin:auto;
}


/* ==========================
PILL BUTTON
========================== */

.pill{
background:#ffffff;
border:1px solid #e1e5ec;
border-radius:18px;
padding:16px 22px;
cursor:pointer;
transition:all .3s ease;
font-weight:700;
box-shadow:0 3px 10px rgba(0,0,0,0.04);
}


/* HEADER */

.pill-title{
display:flex;
justify-content:space-between;
align-items:center;
color:#0F2854;
font-weight:700;
font-size:15px;
}


/* HOVER EFFECT */

.pill:hover{
transform:translateY(-6px);
box-shadow:0 10px 25px rgba(0,0,0,0.08);
}


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

.pill-content{
max-height:0;
overflow:hidden;
transition:max-height .35s ease;
margin-top:12px;
font-weight:700;
color:#333;
line-height:1.6;
font-size:14px;
text-align:left;
}


/* EXPAND DOWNWARD */

.pill.active .pill-content{
max-height:120px;
}


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

.pill-title span{
transition:transform .3s ease;
}

.pill.active .pill-title span{
transform:rotate(90deg);
}


/* ==========================
RESPONSIVE
========================== */

@media(max-width:900px){

.problem-grid{
grid-template-columns:repeat(2,1fr);
}

}

@media(max-width:600px){

.problem-grid{
grid-template-columns:1fr;
}

}

/* =====================================================
THERAPY BENEFITS SECTION
===================================================== */

.therapy-benefits{
padding:35px 6%;   /* reduced vertical space */
background:#f4f7fd;
text-align:center;
}

.therapy-benefits h2{
font-size:34px;
color:#1d3b7a;
margin-bottom:20px;   /* reduced gap under heading */
font-weight:700;
}


/* GRID LAYOUT */

.benefits-grid{
display:grid;
grid-template-columns:repeat(5, 1fr);
gap:20px;              /* slightly tighter spacing */
max-width:1300px;
margin:auto;
}


/* CARD */

.benefit-card{
background:#ffffff;
border-radius:16px;
box-shadow:0 10px 30px rgba(0,0,0,0.08);
padding:22px 18px;     /* slightly reduced card padding */
text-align:center;
transition:all 0.35s ease;
cursor:pointer;
}


/* IMAGE */

.benefit-card img{
width:110px;
height:110px;
object-fit:contain;
margin-bottom:12px;
transition:0.35s;
}


/* TITLE */

.benefit-card h3{
font-size:20px;
color:#0f2854;
font-weight:700;
margin-bottom:6px;
}


/* TEXT */

.benefit-card p{
font-size:14px;
line-height:1.6;
color:#444;
}


/* HOVER EFFECT */

.benefit-card:hover{
transform:translateY(-8px);
box-shadow:0 18px 40px rgba(0,0,0,0.15);
}

.benefit-card:hover img{
transform:scale(1.12);
}


/* RESPONSIVE */

@media(max-width:1100px){

.benefits-grid{
grid-template-columns:repeat(3,1fr);
}

}

@media(max-width:768px){

.benefits-grid{
grid-template-columns:repeat(2,1fr);
}

}

@media(max-width:480px){

.benefits-grid{
grid-template-columns:1fr;
}

}

/* =====================================================
STORIES SECTION
===================================================== */
/* =====================================================
STORIES SECTION (PREMIUM RESPONSIVE FIX)
===================================================== */

.stories{
  background:#ffffff;
  padding:30px 20px;
  text-align:center;
}

.stories h2{
  font-size:30px;
  margin-bottom:25px;
  color:var(--secondary);
  font-weight:700;
}


/* ==========================
GRID (UPDATED)
========================== */

.story-cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:25px;
  max-width:1000px;
  margin:auto;
}


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

.story-card{
  background:#fff;
  border-radius:18px;
  padding:12px;
  box-shadow:0 8px 25px rgba(0,0,0,0.08);
  transition:0.35s ease;
  cursor:pointer;

  opacity:0;
  transform:translateY(40px);
  animation:fadeUp .8s ease forwards;
}

.story-card:nth-child(1){animation-delay:.2s}
.story-card:nth-child(2){animation-delay:.4s}
.story-card:nth-child(3){animation-delay:.6s}

.story-card:hover{
  transform:translateY(-10px);
  box-shadow:0 20px 45px rgba(0,0,0,0.15);
}


/* ==========================
VIDEO WRAPPER (MAIN FIX 🔥)
========================== */

.video-wrapper{
  width:100%;
  aspect-ratio:9/16; /* perfect mobile ratio */
  border-radius:14px;
  overflow:hidden;
  position:relative;
}

.video-wrapper video{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:14px;
  transition:transform .4s ease;
}

.story-card:hover video{
  transform:scale(1.05);
}


/* ==========================
PLAY BUTTON OVERLAY
========================== */

.video-wrapper::after{
  content:"▶";
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  font-size:34px;
  color:#fff;
  background:rgba(0,0,0,0.45);
  width:65px;
  height:65px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  transition:.3s;
}

.story-card:hover .video-wrapper::after{
  background:#0F2854;
  transform:translate(-50%,-50%) scale(1.1);
}


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

.story-card p{
  margin-top:10px;
  font-weight:600;
  color:#333;
  font-size:15px;
}


/* ==========================
ANIMATION
========================== */

@keyframes fadeUp{
  from{
    opacity:0;
    transform:translateY(40px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}


/* ==========================
RESPONSIVE
========================== */

@media(max-width:900px){
  .story-cards{
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:600px){
  .story-cards{
    grid-template-columns:1fr;
  }

  .stories h2{
    font-size:22px;
  }

}

/* =====================================================
APPOINTMENT SECTION
===================================================== */

.appointment{
display:flex;
justify-content:center;
align-items:center;
padding:40px 20px;
background:#f6f8fb;
}

/* FORM CARD */

.appointment-container{

max-width:700px;
width:100%;

margin:auto;

background:#ffffff;

padding:45px;

border-radius:18px;

box-shadow:0 20px 60px rgba(0,0,0,0.08);

}


/* TITLE */

.appointment-title{

font-size:28px;

font-weight:700;

color:#0F2854;

text-align:center;

margin-bottom:8px;

}


.appointment-subtitle{

text-align:center;

color:#666;

margin-bottom:30px;

}


/* GRID */

.two-col{

display:grid;

grid-template-columns:1fr 1fr;

gap:15px;

}


.form-row{

margin-bottom:16px;

}


/* INPUT DESIGN */

.appointment-form input,
.appointment-form select,
.appointment-form textarea{

width:100%;

padding:14px 16px;

border-radius:10px;

border:1px solid #e6e9ee;

background:#fafafa;

font-size:15px;

transition:all 0.35s ease;

}


/* TEXTAREA */

textarea{

height:110px;

resize:none;

}


/* FOCUS EFFECT */

.appointment-form input:focus,
.appointment-form select:focus,
.appointment-form textarea:focus{

outline:none;

border-color:#1C4D8D;

background:#fff;

box-shadow:0 0 0 4px rgba(28,77,141,0.08);

transform:scale(1.02);

}


/* BUTTON */

.appointment-btn{

margin-top:10px;

display:block;

margin-left:auto;
margin-right:auto;

padding:14px 35px;

border:none;

border-radius:40px;

background:linear-gradient(135deg,#1C2559,#0F2854);

color:#fff;

font-size:16px;

font-weight:600;

cursor:pointer;

transition:all 0.35s ease;

}


/* BUTTON HOVER */

.appointment-btn:hover{

transform:translateY(-4px);

box-shadow:0 10px 25px rgba(0,0,0,0.18);

}


/* CARD ANIMATION */

@keyframes fadeUp{

0%{

opacity:0;
transform:translateY(50px);

}

100%{

opacity:1;
transform:translateY(0);

}

}


/* INPUT APPEAR ANIMATION */

.appointment-form input,
.appointment-form select,
.appointment-form textarea{

animation:slideIn 0.8s ease;

}

@keyframes slideIn{

0%{

opacity:0;
transform:translateX(-30px);

}

100%{

opacity:1;
transform:translateX(0);

}

}


/* MOBILE */

@media(max-width:768px){

.two-col{

grid-template-columns:1fr;

}

.appointment-container{

padding:30px 20px;

}

.appointment-title{

font-size:22px;

}

}



/* =========================
BRANCH SECTION
========================= */

.branches{
padding:70px 6%;
background:#ffffff;
text-align:center;
}

.branch-title{
font-size:34px;
color:#1C4D8D;
margin-bottom:40px;
font-weight:700;
}

/* GRID */

.branch-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;
max-width:1000px;
margin:auto;
}

/* CARD */

.branch-card{
border-radius:18px;
overflow:hidden;
position:relative;
box-shadow:0 12px 30px rgba(0,0,0,0.12);
cursor:pointer;
transition:0.4s;
}

.branch-card:hover{
transform:translateY(-8px);
box-shadow:0 20px 40px rgba(0,0,0,0.18);
}

.branch-card img{
width:100%;
height:220px;
object-fit:cover;
}

/* CITY NAME */

.branch-card h3{
position:absolute;
bottom:15px;
left:15px;
color:#ffffff; 
font-size:22px;
font-weight:700;
text-shadow:0 3px 8px rgba(0,0,0,0.6);
}

/* MOBILE */

@media(max-width:768px){

.branch-grid{
grid-template-columns:1fr;
}

}



/* =========================
FOOTER
========================= */

.footer{
background:#f7f9fc;
padding:60px 0 20px;
font-family:'Inter',sans-serif;
}

.container{
max-width:1200px;
margin:auto;
padding:0 20px;
}

/* GRID */

.footer-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:60px;
align-items:center;
}

/* CONTACT */

.footer-contact{
display:flex;
flex-direction:column;
gap:20px;
font-size:15px;
color:#555;
line-height:1.6;
}

/* MAP */

.footer-map iframe{
width:100%;
height:260px;
border-radius:14px;
border:none;
box-shadow:0 8px 25px rgba(0,0,0,0.1);
}

/* =========================
FOOTER BOTTOM
========================= */

.footer-bottom{
margin-top:40px;
padding-top:20px;
border-top:1px solid #e5e7ef;
}

.bottom-content{
display:flex;
justify-content:space-between;
align-items:center;
flex-wrap:wrap;
gap:20px;
font-size:14px;
color:#666;
}

/* LINKS */

.legal-links{
display:flex;
gap:18px;
}

.legal-links a{
text-decoration:none;
color:#666;
transition:0.3s;
}

.legal-links a:hover{
color:#1C4D8D;
}

/* CREDITS */

.credits{
color:#888;
font-size:13px;
}

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

@media(max-width:768px){

.footer-grid{
grid-template-columns:1fr;
gap:30px;
}

.bottom-content{
flex-direction:column;
text-align:center;
}

.legal-links{
justify-content:center;
}

}