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

body{
color:#222;
}

/* NAVBAR */

.navbar{

position:fixed;
top:0;
left:0;

width:100%;

z-index:1000;

background:rgba(255,255,255,0.65);
backdrop-filter:blur(14px);

border-bottom:1px solid rgba(255,255,255,0.2);

transition:0.4s;

}

.nav-container{

display:flex;
align-items:center;
justify-content:space-between;

padding:18px 8%;

}


/* LOGO */

.logo{

font-size:24px;
font-weight:700;
letter-spacing:1px;

}

.logo span{
color:#3b82f6;
}


/* NAV LINKS */

.nav-links{

display:flex;
gap:35px;

}

.nav-links a{

position:relative;

text-decoration:none;
color:#111;

font-weight:500;

padding:6px 0;

}


/* animated underline */

.nav-links a::after{

content:"";

position:absolute;

left:0;
bottom:-4px;

width:0;
height:2px;

background:#3b82f6;

transition:0.4s;

}

.nav-links a:hover::after{
width:100%;
}


/* CTA BUTTON */

.nav-cta{

background:linear-gradient(135deg,#3b82f6,#2563eb);

color:white;

padding:12px 22px;

border-radius:30px;

font-weight:600;

cursor:pointer;

box-shadow:0 8px 20px rgba(59,130,246,0.4);

transition:0.3s;

}

.nav-cta:hover{

transform:translateY(-2px);

box-shadow:0 12px 25px rgba(59,130,246,0.6);

}


/* MOBILE MENU */

/* HAMBURGER MENU */

.menu-toggle{

display:none;

flex-direction:column;
justify-content:center;

width:30px;
height:22px;

cursor:pointer;

position:relative;

z-index:1100;

}

.menu-toggle span{

position:absolute;

width:100%;
height:3px;

background:#111;

border-radius:3px;

transition:0.4s cubic-bezier(.77,0,.18,1);

}

/* bar positions */

.menu-toggle span:nth-child(1){
top:0;
}

.menu-toggle span:nth-child(2){
top:9px;
}

.menu-toggle span:nth-child(3){
bottom:0;
}

/* ACTIVE STATE (hamburger → X) */

.menu-toggle.active span:nth-child(1){

transform:rotate(45deg);
top:9px;

}

.menu-toggle.active span:nth-child(2){

opacity:0;

}

.menu-toggle.active span:nth-child(3){

transform:rotate(-45deg);
bottom:9px;

}


/* NAVBAR SCROLL EFFECT */

.navbar.scrolled{

background:white;

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

}

/*@media(max-width:900px){

.nav-links{

position:absolute;

top:70px;
left:0;

width:100%;

background:white;

flex-direction:column;

align-items:center;

padding:20px;

display:none;

}

.nav-links.active{
display:flex;
}

.menu-toggle{
display:flex;
}

.nav-cta{
display:none;
}

}*/

/* HERO SECTION */

/*.hero{

height:100vh;

background:url("https://images.unsplash.com/photo-1609840112855-9e4d7d3b0e3f?q=80&w=1920&auto=format&fit=crop") center/cover no-repeat;

position:relative;

display:flex;
align-items:center;

color:white;

}*/

.hero{

height:100vh;

background:
linear-gradient(
90deg,
rgba(0,0,0,0.7) 0%,
rgba(0,0,0,0.4) 50%,
rgba(0,0,0,0.2) 100%
),
url("https://images.unsplash.com/photo-1629909613654-28e377c37b09?q=80&w=1168&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");

background-size:cover;

background-position:center;

display:flex;
align-items:center;

color:white;

}

/* dark overlay */

/*.hero-overlay{

position:absolute;

top:0;
left:0;

width:100%;
height:100%;

background:linear-gradient(
90deg,
rgba(0,0,0,0.7) 0%,
rgba(0,0,0,0.4) 50%,
rgba(0,0,0,0.2) 100%
);

z-index: 1;

}*/

/* container */

.hero-container{

position:relative;

z-index: 2;

display:grid;

grid-template-columns:1.2fr 1fr;

align-items:center;

gap:60px;

padding:0 8%;

width:100%;

}

/* hero text */

.hero-text h1{

font-size:72px;

line-height:1.1;

margin-bottom:25px;

font-weight:700;

}

.hero-text span{

color:#60a5fa;

}

.hero-text p{

font-size:18px;

max-width:500px;

margin-bottom:30px;

opacity:0.9;

}

/* buttons */

.hero-buttons{

display:flex;

gap:20px;

}

.btn-primary{

background:#3b82f6;

color:white;

padding:14px 28px;

border-radius:30px;

font-weight:600;

cursor:pointer;

transition:0.3s;

}

.btn-primary:hover{

transform:translateY(-2px);

box-shadow:0 10px 20px rgba(59,130,246,0.5);

}

.btn-secondary{

border:2px solid white;

padding:14px 28px;

border-radius:30px;

cursor:pointer;

transition:0.3s;

}

.btn-secondary:hover{

background:white;

color:#111;

}

/* floating offer card */

.hero-card{

display:flex;
justify-content:center;

}

.card{

background:white;

color:#111;

padding:35px;

border-radius:16px;

box-shadow:0 25px 50px rgba(0,0,0,0.25);

max-width:280px;

text-align:center;

}

.card h3{

margin-bottom:10px;

}

.card-btn{

display:inline-block;

margin-top:15px;

background:#3b82f6;

color:white;

padding:10px 18px;

border-radius:20px;

cursor:pointer;

}

.hero-text{

opacity:0;

transform:translateY(40px);

transition:1s;

}

/*.btn-primary{

background:#2563eb;
color:white;
padding:14px 28px;
border-radius:30px;
display:inline-block;
margin-right:15px;
cursor:pointer;
}

.btn-outline{

border:2px solid white;
padding:14px 28px;
border-radius:30px;
}*/

/* SERVICES SECTION */

.services{

padding:120px 8%;

background:#f8fafc;

}

/* header */

.services-header{

text-align:center;

max-width:650px;

margin:auto;
margin-bottom:70px;

}

.section-tag{

color:#3b82f6;

font-weight:600;

letter-spacing:1px;

text-transform:uppercase;

font-size:14px;

}

.services-header h2{

font-size:42px;

margin-top:10px;

margin-bottom:15px;

}

.services-header p{

color:#666;

font-size:17px;

}

/* grid */

.services-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

gap:35px;

}

/* card */

.service-card{

position:relative;

border-radius:18px;

overflow:hidden;

cursor:pointer;

height:360px;

box-shadow:0 15px 40px rgba(0,0,0,0.12);

transition:0.4s;

}

.service-card img{

width:100%;
height:100%;

object-fit:cover;

transition:0.6s;

}

/* overlay */

.service-overlay{

position:absolute;

bottom:0;
left:0;

width:100%;

padding:30px;

color:white;

background:linear-gradient(
transparent,
rgba(0,0,0,0.85)
);

transition:0.4s;

}

/* text */

.service-overlay h3{

font-size:22px;

margin-bottom:8px;

}

.service-overlay p{

font-size:14px;

opacity:0.9;

margin-bottom:12px;

}

/* button */

.service-btn{

font-size:14px;

font-weight:600;

color:#60a5fa;

cursor:pointer;

}

/* hover effects */

.service-card:hover img{

transform:scale(1.12);

}

.service-card:hover{

transform:translateY(-10px);

box-shadow:0 25px 60px rgba(0,0,0,0.2);

}

.about{
padding:100px 8%;
background:#f7f7f7;
}

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

.about img{
width:100%;
border-radius:15px;
}

.about-text p{
margin-bottom:25px;
}


/* TEAM SECTION */

.team{

padding:120px 8%;

background:#f8f9fb;

text-align:center;

}

.team-header{

max-width:650px;

margin:auto;

margin-bottom:70px;

}

.team-header h2{

font-size:42px;

margin-top:10px;

}

.team-header p{

color:#666;

}

/* grid */

.team-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

gap:40px;

max-width:1100px;

margin:auto;

}

/* doctor card */

.doctor-card{

background:white;

border-radius:16px;

overflow:hidden;

box-shadow:0 15px 40px rgba(0,0,0,0.08);

transition:transform .4s;

}

.doctor-card:hover{

transform:translateY(-10px);

}

/* image */

.doctor-img{

position:relative;

height:320px;

overflow:hidden;

}

.doctor-img img{

width:100%;

height:100%;

object-fit:cover;

transition:transform .5s;

}

.doctor-card:hover img{

transform:scale(1.08);

}

/* social overlay */

.doctor-social{

position:absolute;

bottom:20px;

left:50%;

transform:translateX(-50%);

display:flex;

gap:12px;

opacity:0;

transition:.4s;

}

.doctor-card:hover .doctor-social{

opacity:1;

}

.doctor-social a{

background:white;

padding:8px 12px;

border-radius:20px;

font-size:12px;

text-decoration:none;

color:#333;

box-shadow:0 5px 15px rgba(0,0,0,0.15);

}

/* info */

.doctor-info{

padding:25px;

}

.doctor-info h3{

margin-bottom:5px;

font-size:20px;

}

.doctor-info span{

color:#777;

font-size:14px;

}

/* TESTIMONIAL SECTION */

.testimonials{

padding:120px 8%;

background:white;

text-align:center;

}

.test-header{

max-width:650px;

margin:auto;

margin-bottom:60px;

}

.test-header h2{

font-size:42px;

margin-top:10px;

}

.test-header p{

color:#666;

}

/* slider */

.testimonial-slider{

max-width:900px;

margin:auto;

overflow:hidden;

}

.testimonial-track{

display:flex;

transition:transform .6s ease;

}

/* card */

.testimonial-card{

min-width:100%;

background:#f8f9fb;

padding:50px;

border-radius:16px;

box-shadow:0 10px 35px rgba(0,0,0,0.08);

}

.quote{

font-size:18px;

color:#444;

line-height:1.6;

margin-bottom:30px;

}

/* patient */

.patient{

display:flex;

align-items:center;

gap:15px;

justify-content:center;

}

.patient img{

width:50px;

height:50px;

border-radius:50%;

object-fit:cover;

}

.patient h4{

margin:0;

}

.patient span{

font-size:13px;

color:#777;

}

/* dots */

.testimonial-dots{

margin-top:30px;

}

.dot{

height:10px;

width:10px;

background:#ccc;

border-radius:50%;

display:inline-block;

margin:0 6px;

cursor:pointer;

}

.dot.active{

background:#2b6df6;

}

/*.contact{
padding:100px 8%;
text-align:center;
}

.contact-form{

max-width:500px;
margin:auto;
display:flex;
flex-direction:column;
gap:15px;
}

.contact-form input,
.contact-form textarea{

padding:12px;
border:1px solid #ccc;
border-radius:8px;
}

.contact-form button{

background:#2563eb;
color:white;
border:none;
padding:14px;
border-radius:30px;
cursor:pointer;
}*/

/* APPOINTMENT SECTION */

.appointment{

padding:120px 8%;

background:#f8f9fb;

}

.appointment-container{

max-width:1100px;

margin:auto;

display:grid;

grid-template-columns:1fr 1fr;

gap:60px;

align-items:center;

}

/* left content */

.appointment-info h2{

font-size:42px;

margin:15px 0;

}

.appointment-info p{

color:#666;

margin-bottom:20px;

}

.appointment-benefits{

list-style:none;

padding:0;

color:#444;

}

.appointment-benefits li{

margin-bottom:10px;

}

/* form */

.appointment-form{

background:white;

padding:40px;

border-radius:16px;

box-shadow:0 15px 40px rgba(0,0,0,0.08);

}

.appointment-form form{

display:flex;

flex-direction:column;

gap:15px;

}

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

padding:12px;

border:1px solid #ddd;

border-radius:8px;

font-size:14px;

}

.appointment-form textarea{

resize:none;

height:90px;

}

.appointment-form button{

background:#2b6df6;

color:white;

border:none;

padding:14px;

border-radius:8px;

font-size:15px;

cursor:pointer;

transition:.3s;

}

.appointment-form button:hover{

background:#1f4ed8;

}

/* responsive */

/*@media (max-width:900px){

.appointment-container{

grid-template-columns:1fr;

}

}*/

/* FOOTER */

.footer{

background:#0f172a;

color:white;

padding:80px 8% 30px;

}

.footer-container{

max-width:1200px;

margin:auto;

display:grid;

grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

gap:40px;

}

/* logo */

.footer-logo{

font-size:24px;

margin-bottom:15px;

}

.footer-col p{

color:#cbd5e1;

line-height:1.6;

}

/* links */

.footer-col h4{

margin-bottom:15px;

}

.footer-col ul{

list-style:none;

padding:0;

}

.footer-col ul li{

margin-bottom:10px;

}

.footer-col a{

color:#cbd5e1;

text-decoration:none;

transition:.3s;

}

.footer-col a:hover{

color:#4fd1c5;

}

/* social */

.footer-social{

margin-top:15px;

display:flex;

gap:10px;

}

.footer-social a{

background:#1e293b;

padding:8px 12px;

border-radius:20px;

font-size:12px;

}

/* contact */

.contact-info li{

color:#cbd5e1;

}

/* bottom */

.footer-bottom{

text-align:center;

border-top:1px solid #1e293b;

margin-top:50px;

padding-top:20px;

color:#94a3b8;

font-size:14px;

}


/* BEFORE AFTER SECTION */

/* BEFORE AFTER SECTION */

.before-after{

padding:120px 8%;

background:white;

text-align:center;

}

.ba-header{

max-width:650px;

margin:auto;

margin-bottom:60px;

}

.ba-header h2{

font-size:42px;

margin-top:10px;

}

.ba-header p{

color:#666;

}

/* container */

.ba-container{

max-width:1000px;

margin:auto;

}

/* image wrapper */

.ba-image{

position:relative;

width:100%;

aspect-ratio:16/9;

overflow:hidden;

border-radius:18px;

box-shadow:0 25px 60px rgba(0,0,0,0.15);

}

/* images */

.ba-image img{

position:absolute;

width:100%;

height:100%;

object-fit:cover;

top:0;
left:0;

}

/* after image */

.after-wrapper{

position:absolute;

top:0;
left:0;

width:50%;

height:100%;

overflow:hidden;

}

/* slider */

.slider{

position:absolute;

top:0;

left:50%;

width:3px;

height:100%;

background:white;

cursor:ew-resize;

z-index:3;

}

/* slider handle */

.handle{

position:absolute;

top:50%;
left:50%;

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

width:40px;
height:40px;

border-radius:50%;

background:white;

box-shadow:0 0 15px rgba(0,0,0,0.3);

}

/* labels */

.label{

position:absolute;

top:20px;

padding:6px 14px;

background:rgba(0,0,0,0.5);

color:white;

font-size:12px;

letter-spacing:1px;

border-radius:20px;

z-index:4;

}

.before-label{

left:20px;

}

.after-label{

right:20px;

}

/* STATS SECTION */

.stats{

padding:120px 8%;

background:#0f172a;

color:white;

}

.stats-container{

max-width:1100px;

margin:auto;

display:grid;

grid-template-columns:repeat(auto-fit,minmax(200px,1fr));

gap:40px;

text-align:center;

}

.stat h3{

font-size:48px;

margin-bottom:10px;

font-weight:700;

color:#4fd1c5;

}

.stat p{

font-size:15px;

color:#d1d5db;

letter-spacing:1px;

}

.nav-cta {
    text-decoration: none;
    border-bottom: none; /* Removes a border-based underline */
    box-shadow: none;     /* Removes a shadow-based underline */
}
.btn-secondary{
    text-decoration: none;
    /*border-bottom: none; *//* Removes a border-based underline */
    /*box-shadow: none;*/     /* Removes a shadow-based underline */
    color: whitesmoke;
}
.btn-primary{
    text-decoration: none;
    border-bottom: none; /* Removes a border-based underline */
    box-shadow: none;     /* Removes a shadow-based underline */
}

/* --- RESPONSIVE UPDATES --- */

/* Hero Section Adjustments */

/* --- ENHANCED RESPONSIVE FIXES --- */

/* ===============================
GLOBAL MOBILE IMPROVEMENTS
=============================== */

img{
width:100%;
height:auto;
display:block;
}

section{
overflow:hidden;
}

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

@media (max-width: 1024px){

.hero-container{
grid-template-columns:1fr;
gap:40px;
text-align:center;
}

.hero-card{
order:2;
}

.hero-buttons{
justify-content:center;
}

.hero-text h1{
font-size:52px;
}

.about-grid{
grid-template-columns:1fr;
gap:40px;
text-align:center;
}

.appointment-container{
grid-template-columns:1fr;
}

}

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

@media (max-width: 768px){

/* MOBILE NAVBAR */

.menu-toggle{
display:flex;
}

.nav-cta{
display:none;
}

.nav-links .nav-cta-mobile{
display:inline-block;

background:linear-gradient(135deg,#3b82f6,#2563eb);

color:white;

padding:12px 22px;

border-radius:30px;

font-weight:600;

margin-top:10px;
}

.nav-links{

position:absolute;
top:70px;
left:0;

width:100%;

background:white;

flex-direction:column;

align-items:center;

gap:25px;

padding:25px;

display:none;

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

}

.nav-links.active{
display:flex;
}

.nav-container{
padding:15px 6%;
}

.hero{
padding-top:100px;
height:auto;
min-height:100vh;
}

.hero-container{
padding:0 6%;
}

.hero-text h1{
font-size:38px;
}

.hero-text p{
font-size:16px;
}

.hero-buttons{
flex-direction:column;
gap:15px;
align-items:center;
}

.btn-primary,
.btn-secondary{
width:100%;
max-width:260px;
text-align:center;
}

.card{
max-width:100%;
}

.services{
padding:80px 6%;
}

.services-header h2{
font-size:32px;
}

.team{
padding:80px 6%;
}

.team-header h2{
font-size:32px;
}

.about{
padding:80px 6%;
}

.testimonials{
padding:80px 6%;
}

.testimonial-card{
padding:30px;
}

.appointment{
padding:80px 6%;
}

.appointment-info h2{
font-size:32px;
}

.appointment-form{
padding:25px;
}

.stats{
padding:80px 6%;
}

.stat h3{
font-size:36px;
}

.footer{
padding:60px 6% 30px;
}

}

/* ===============================
SMALL PHONES
=============================== */

@media (max-width:480px){

.hero-text h1{
font-size:30px;
}

.services-header h2,
.team-header h2,
.test-header h2,
.ba-header h2,
.appointment-info h2{
font-size:28px;
}

.quote{
font-size:16px;
}

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

.stat h3{
font-size:32px;
}

.footer-container{
gap:30px;
}

}

/*double icon problem*/
.nav-cta-mobile{
display:none;
}