:root{
--primary:#087f8c;
--primary-dark:#055963;
--teal:#12b8a6;
--blue:#1479d1;
--navy:#092b3a;
--text:#405866;
--muted:#718692;
--light:#f2fafb;
--white:#fff;
--border:#dcecef;
--shadow:0 20px 50px rgba(9,43,58,.12);
}

*{margin:0;padding:0;box-sizing:border-box}

html{scroll-behavior:smooth;scroll-padding-top:80px}

body{
font-family:Arial,Helvetica,sans-serif;
color:var(--text);
background:#fff;
line-height:1.7;
overflow-x:hidden;
}

a{text-decoration:none;color:inherit}
button{font:inherit}
.container{width:min(1160px,90%);margin:auto}

.header{
position:fixed;
top:0;
left:0;
width:100%;
z-index:1000;
background:rgba(255,255,255,.92);
backdrop-filter:blur(16px);
border-bottom:1px solid rgba(220,236,239,.8);
}

.nav-container{
height:78px;
display:flex;
align-items:center;
justify-content:space-between;
}

.logo{display:flex;align-items:center;gap:11px}

.logo-mark{
width:44px;
height:44px;
display:block;
border-radius:13px;
overflow:hidden;
flex-shrink:0;
}

.logo-mark img{
width:100%;
height:100%;
object-fit:contain;
display:block;
transition:opacity .8s ease;
}

.logo-text{display:flex;flex-direction:column;line-height:1}

.logo-text strong{
color:var(--navy);
font-size:17px;
letter-spacing:1px;
}

.logo-text small{
color:var(--primary);
font-size:8px;
font-weight:800;
letter-spacing:1.2px;
margin-top:5px;
}

.nav{display:flex;gap:30px;align-items:center}

.nav a{
color:var(--navy);
font-size:14px;
font-weight:700;
transition:.3s;
}

.nav a:hover,.nav a.active{color:var(--primary)}

.menu-toggle{
display:none;
border:0;
background:none;
font-size:28px;
color:var(--navy);
cursor:pointer;
}

.hero{
min-height:100vh;
display:flex;
align-items:center;
position:relative;
overflow:hidden;
padding:130px 0 80px;
background:
radial-gradient(circle at 85% 20%,rgba(18,184,166,.18),transparent 30%),
linear-gradient(135deg,#e9f9fa,#fff 55%,#edf7ff);
}

.hero-background{
position:absolute;
width:500px;
height:500px;
right:-180px;
top:100px;
border-radius:50%;
background:rgba(20,121,209,.08);
animation:float 7s ease-in-out infinite;
}

.hero-content{
position:relative;
z-index:2;
display:grid;
grid-template-columns:1.2fr .8fr;
gap:70px;
align-items:center;
}

.eyebrow{
display:inline-block;
color:var(--primary);
font-size:11px;
font-weight:900;
letter-spacing:2px;
margin-bottom:15px;
}

.hero h1{
max-width:720px;
font-size:clamp(44px,6vw,76px);
line-height:1.03;
letter-spacing:-3px;
color:var(--navy);
margin-bottom:24px;
}

.hero h1 span,
.section-heading h2 span,
.why-content h2 span{color:var(--primary)}

.hero-text>p{
max-width:620px;
font-size:18px;
color:var(--muted);
margin-bottom:32px;
}

.hero-buttons{display:flex;flex-wrap:wrap;gap:14px}

.btn{
min-height:52px;
padding:0 25px;
display:inline-flex;
align-items:center;
justify-content:center;
border-radius:12px;
font-size:14px;
font-weight:800;
transition:.3s;
}

.btn-primary{
color:#fff;
background:linear-gradient(135deg,var(--primary),var(--teal));
box-shadow:0 12px 30px rgba(8,127,140,.25);
}

.btn-primary:hover{transform:translateY(-4px)}

.btn-outline{
background:#fff;
border:2px solid var(--border);
color:var(--navy);
}

.btn-outline:hover{
border-color:var(--primary);
color:var(--primary);
transform:translateY(-4px);
}

.hero-trust{
display:flex;
gap:32px;
margin-top:45px;
}

.hero-trust div{
display:flex;
flex-direction:column;
}

.hero-trust strong{
color:var(--navy);
font-size:16px;
}

.hero-trust span{
color:var(--muted);
font-size:11px;
}

.hero-card{
padding:42px 35px;
border-radius:28px;
background:rgba(255,255,255,.88);
border:1px solid rgba(255,255,255,.9);
box-shadow:var(--shadow);
backdrop-filter:blur(15px);
}

.medical-icon{
    width:100%;
    height:180px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:20px;
    background:linear-gradient(135deg,#e0f7f5,#e7f2ff);
    margin-bottom:24px;
    overflow:hidden;
}

.medical-icon img{
    width:100%;
    height:100%;
    object-fit:contain;
    display:block;
}

.hero-card h3{
color:var(--navy);
font-size:26px;
margin-bottom:12px;
}

.hero-card p{
color:var(--muted);
font-size:14px;
margin-bottom:24px;
}

.hero-card a{
color:var(--primary);
font-weight:800;
font-size:14px;
}

.scroll-indicator{
position:absolute;
bottom:25px;
left:50%;
transform:translateX(-50%);
color:var(--muted);
font-size:10px;
letter-spacing:1px;
text-transform:uppercase;
}

.scroll-indicator span{
display:block;
width:2px;
height:25px;
background:var(--teal);
margin:0 auto 6px;
}

.section{padding:110px 0}

.section-heading{
max-width:680px;
margin-bottom:60px;
}

.section-heading.centered{
text-align:center;
margin-left:auto;
margin-right:auto;
}

.section-heading h2{
font-size:clamp(35px,5vw,52px);
line-height:1.08;
letter-spacing:-1.5px;
color:var(--navy);
margin-bottom:18px;
}

.section-heading p{
color:var(--muted);
font-size:16px;
}

.about{
background:#fff;
}

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

.about-image{
    width:100%;
    aspect-ratio:4 / 3;
}

.image-placeholder{
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    border-radius:30px;
    overflow:hidden;
    background:
    linear-gradient(135deg,#e5f8f7,#eef6ff);
}

.image-placeholder img{
    width:100%;
    height:100%;
    object-fit:contain;
    border-radius:30px;
    display:block;
}

.image-placeholder span{
font-size:50px;
font-weight:300;
}

.image-placeholder p{
font-weight:800;
margin-top:8px;
}

.image-placeholder small{
font-size:11px;
color:var(--muted);
}

.about-content h3{
font-size:30px;
line-height:1.2;
color:var(--navy);
margin-bottom:18px;
}

.about-content>p{
color:var(--muted);
margin-bottom:30px;
}

.about-points{
display:flex;
flex-direction:column;
gap:20px;
}

.point{
display:flex;
gap:15px;
}

.point>span{
width:31px;
height:31px;
flex:0 0 31px;
display:grid;
place-items:center;
border-radius:50%;
background:#e4f8f5;
color:var(--primary);
font-weight:900;
}

.point strong{
color:var(--navy);
font-size:15px;
}

.point p{
color:var(--muted);
font-size:13px;
margin-top:2px;
}

.services{
background:
linear-gradient(180deg,#f3fbfc,#fff);
}

.services-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:20px;
}

.service-card{
padding:32px 25px;
background:#fff;
border:1px solid var(--border);
border-radius:20px;
transition:.35s;
position:relative;
overflow:hidden;
}

.service-card::before{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:4px;
background:linear-gradient(90deg,var(--primary),var(--teal));
transform:scaleX(0);
transform-origin:left;
transition:.35s;
}

.service-card:hover{
transform:translateY(-9px);
box-shadow:var(--shadow);
}

.service-card:hover::before{
transform:scaleX(1);
}

.service-icon{
width:58px;
height:58px;
display:grid;
place-items:center;
border-radius:17px;
background:linear-gradient(135deg,#e4f8f6,#eaf3ff);
color:#087f8c;
font-size:23px;
margin-bottom:22px;
transition:transform .3s ease,box-shadow .3s ease,color .3s ease;
}

.service-card:hover .service-icon{
transform:translateY(-4px) scale(1.05);
box-shadow:0 10px 24px rgba(8,127,140,.15);
color:#055963;
}

.service-card h3{
color:var(--navy);
font-size:18px;
line-height:1.3;
margin-bottom:12px;
}

.service-card p{
color:var(--muted);
font-size:13px;
margin-bottom:20px;
}

.service-card a{
color:var(--primary);
font-size:13px;
font-weight:800;
}

/* WHY US */

.why{
background:var(--navy);
color:#fff;
position:relative;
overflow:hidden;
}

.why::before{
content:"";
position:absolute;
width:420px;
height:420px;
right:-180px;
top:-150px;
border-radius:50%;
background:rgba(18,184,166,.12);
}

.why-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:80px;
align-items:center;
position:relative;
z-index:2;
}

.why-content .eyebrow{
color:#62e2d4;
}

.why-content h2{
font-size:clamp(35px,5vw,52px);
line-height:1.08;
letter-spacing:-1.5px;
margin-bottom:20px;
}

.why-content h2 span{
color:#62e2d4;
}

.why-content>p{
color:#b9cbd2;
font-size:16px;
margin-bottom:35px;
}

.why-list{
display:flex;
flex-direction:column;
gap:18px;
}

.why-item{
display:flex;
gap:15px;
align-items:flex-start;
}

.why-item>span{
width:34px;
height:34px;
flex:0 0 34px;
display:grid;
place-items:center;
border-radius:50%;
background:rgba(18,184,166,.16);
color:#62e2d4;
font-weight:900;
}

.why-item strong{
display:block;
font-size:15px;
margin-bottom:3px;
}

.why-item p{
color:#9fb5bd;
font-size:13px;
}

.why-stats{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:18px;
}

.stat-card{
padding:30px 25px;
border:1px solid rgba(255,255,255,.1);
background:rgba(255,255,255,.05);
border-radius:20px;
backdrop-filter:blur(10px);
transition:.3s;
}

.stat-card:hover{
transform:translateY(-6px);
background:rgba(255,255,255,.08);
}

.stat-card strong{
display:block;
font-size:34px;
color:#62e2d4;
line-height:1;
margin-bottom:10px;
}

.stat-card span{
font-size:12px;
color:#b9cbd2;
}


/* TEAM */

.team{
background:#fff;
}

.team-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:24px;
}

.team-card{
background:#fff;
border:1px solid var(--border);
border-radius:24px;
overflow:hidden;
transition:.35s;
}

.team-card:hover{
transform:translateY(-8px);
box-shadow:var(--shadow);
}

.team-photo{
    position:relative;
    height:100%;
    min-height:520px;
    aspect-ratio:auto;
    display:flex;
    align-items:flex-end;
    justify-content:center;
    overflow:hidden;
    border-radius:28px;
}

.team-photo img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center top;
    display:block;
}

.team-info{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    z-index:2;
    padding:80px 32px 32px;
    color:white;
    background:linear-gradient(
        transparent,
        rgba(0,0,0,0.85)
    );
}

.team-info h3{
color:var(--navy);
font-size:20px;
margin-bottom:4px;
}

.team-role{
display:block;
color:var(--primary);
font-size:12px;
font-weight:800;
margin-bottom:13px;
}

.team-info h3,
.team-info .team-role,
.team-info p{
    -webkit-text-stroke:0.4px rgba(255,255,255,0.35);
    text-shadow:0 2px 4px rgba(0,0,0,0.8);
}

.team-info p{
color:var(--muted);
font-size:13px;
}


/* GALLERY */

.gallery{
background:#f5fbfc;
}

.gallery-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:18px;
}

.gallery-item{
height:250px;
border-radius:20px;
overflow:hidden;
position:relative;
background:
linear-gradient(135deg,#dff5f3,#eaf2ff);
display:flex;
align-items:center;
justify-content:center;
color:var(--primary);
font-size:42px;
transition:.35s;
}

.gallery-item:hover{
transform:scale(1.02);
box-shadow:var(--shadow);
}

.gallery-item::after{
content:"D-BAMS";
position:absolute;
bottom:15px;
left:15px;
font-size:10px;
font-weight:900;
letter-spacing:2px;
color:rgba(9,43,58,.45);
}


/* CTA */

.cta{
padding:90px 0;
background:
linear-gradient(135deg,var(--primary),#075f72 55%,#087f8c);
color:#fff;
position:relative;
overflow:hidden;
}

.cta::after{
content:"";
position:absolute;
width:500px;
height:500px;
right:-220px;
top:-250px;
border-radius:50%;
border:80px solid rgba(255,255,255,.06);
}

.cta-content{
position:relative;
z-index:2;
display:flex;
align-items:center;
justify-content:space-between;
gap:40px;
}

.cta h2{
font-size:clamp(32px,5vw,50px);
line-height:1.08;
margin-bottom:12px;
letter-spacing:-1px;
}

.cta p{
color:#d4f3f0;
font-size:15px;
max-width:600px;
}

.cta-buttons{
display:flex;
gap:12px;
flex-wrap:wrap;
}

.btn-light{
background:#fff;
color:var(--navy);
}

.btn-light:hover{
transform:translateY(-4px);
box-shadow:0 12px 25px rgba(0,0,0,.15);
}


/* CONTACT */

.contact{
background:#fff;
}

.contact-grid{
display:grid;
grid-template-columns:.85fr 1.15fr;
gap:60px;
align-items:start;
}

.contact-info h3{
font-size:30px;
color:var(--navy);
line-height:1.2;
margin-bottom:18px;
}

.contact-info>p{
color:var(--muted);
font-size:15px;
margin-bottom:30px;
}

.contact-list{
display:flex;
flex-direction:column;
gap:20px;
}

.contact-item{
display:flex;
gap:15px;
align-items:flex-start;
}

.contact-icon{
width:45px;
height:45px;
flex:0 0 45px;
display:grid;
place-items:center;
border-radius:13px;
background:#e5f8f6;
color:var(--primary);
font-size:18px;
}

.contact-item strong{
display:block;
color:var(--navy);
font-size:14px;
}

.contact-item span,
.contact-item a{
display:block;
color:var(--muted);
font-size:13px;
margin-top:2px;
}

.contact-item a:hover{
color:var(--primary);
}

.contact-card{
padding:35px;
border-radius:25px;
background:#f5fbfc;
border:1px solid var(--border);
}

.contact-card h3{
color:var(--navy);
font-size:24px;
margin-bottom:8px;
}

.contact-card>p{
color:var(--muted);
font-size:13px;
margin-bottom:25px;
}

.contact-actions{
display:grid;
grid-template-columns:1fr 1fr;
gap:12px;
}

.contact-action{
padding:18px;
border-radius:14px;
background:#fff;
border:1px solid var(--border);
color:var(--navy);
font-size:13px;
font-weight:800;
transition:.3s;
}

.contact-action:hover{
border-color:var(--primary);
color:var(--primary);
transform:translateY(-3px);
}


/* FOOTER */

.footer{
padding:45px 0 25px;
background:#061f2b;
color:#fff;
}

.footer-grid{
display:grid;
grid-template-columns:1.5fr 1fr 1fr;
gap:50px;
padding-bottom:35px;
border-bottom:1px solid rgba(255,255,255,.1);
}

.footer-brand .logo-text strong{
color:#fff;
}

.footer-brand p{
color:#8fa8b2;
font-size:13px;
max-width:330px;
margin-top:18px;
}

.footer h4{
font-size:14px;
margin-bottom:17px;
}

.footer-links{
display:flex;
flex-direction:column;
gap:9px;
}

.footer-links a{
color:#8fa8b2;
font-size:12px;
transition:.25s;
}

.footer-links a:hover{
color:#62e2d4;
}

.footer-bottom{
padding-top:22px;
display:flex;
justify-content:space-between;
gap:20px;
color:#718b95;
font-size:11px;
}

.whatsapp-float{
position:fixed;
right:22px;
bottom:22px;
width:58px;
height:58px;
display:grid;
place-items:center;
border-radius:50%;
background:#20c863;
color:#fff;
font-size:26px;
box-shadow:0 12px 30px rgba(0,0,0,.2);
z-index:999;
transition:.3s;
}

.whatsapp-float:hover{
transform:translateY(-5px) scale(1.05);
}


/* ANIMATIONS */

.reveal{
opacity:0;
transform:translateY(30px);
transition:opacity .8s ease,transform .8s ease;
}

.reveal.visible{
opacity:1;
transform:translateY(0);
}

@keyframes float{
0%,100%{transform:translateY(0)}
50%{transform:translateY(-20px)}
}

@keyframes pageIn{
from{opacity:0}
to{opacity:1}
}

.page-loaded{
animation:pageIn .7s ease both;
}


/* TABLET */

@media(max-width:950px){

.nav{
gap:18px;
}

.hero-content{
grid-template-columns:1fr;
gap:45px;
}

.hero-card{
max-width:600px;
}

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

.about-grid,
.why-grid,
.contact-grid{
grid-template-columns:1fr;
gap:45px;
}

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

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

.cta-content{
flex-direction:column;
align-items:flex-start;
}

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

}

/* MOBILE */

@media(max-width:700px){

.container{
width:min(92%,1160px);
}

.nav-container{
height:70px;
}

.logo-mark{
width:40px;
height:40px;
font-size:20px;
}

.logo-text strong{
font-size:15px;
}

.logo-text small{
font-size:7px;
}

.nav{
position:absolute;
top:70px;
left:0;
width:100%;
padding:20px 5%;
display:flex;
flex-direction:column;
align-items:flex-start;
gap:0;
background:rgba(255,255,255,.98);
border-bottom:1px solid var(--border);
box-shadow:0 15px 30px rgba(9,43,58,.08);
transform:translateY(-20px);
opacity:0;
visibility:hidden;
transition:.3s;
}

.nav.open{
transform:translateY(0);
opacity:1;
visibility:visible;
}

.nav a{
width:100%;
padding:13px 0;
border-bottom:1px solid #edf4f5;
}

.nav a:last-child{
border-bottom:0;
}

.menu-toggle{
display:block;
}

.hero{
padding:110px 0 70px;
min-height:auto;
}

.hero-content{
gap:35px;
}

.hero h1{
font-size:clamp(40px,12vw,58px);
letter-spacing:-2px;
}

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

.hero-trust{
gap:20px;
flex-wrap:wrap;
margin-top:30px;
}

.hero-card{
padding:30px 25px;
border-radius:22px;
}

.section{
padding:75px 0;
}

.section-heading{
margin-bottom:40px;
}

.section-heading h2{
font-size:36px;
}

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

.service-card{
padding:28px 23px;
}

.why-stats{
grid-template-columns:1fr 1fr;
}

.stat-card{
padding:25px 18px;
}
}

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

.team-photo{
height:240px;
}

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

.gallery-item{
height:220px;
}

.cta{
padding:70px 0;
}

.cta h2{
font-size:36px;
}

.contact-actions{
grid-template-columns:1fr;
}

.contact-card{
padding:27px 22px;
}

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

.footer-bottom{
flex-direction:column;
gap:7px;
}

.whatsapp-float{
width:54px;
height:54px;
right:16px;
bottom:16px;
font-size:23px;
}

}


/* SMALL PHONES */

@media(max-width:400px){

.hero h1{
font-size:39px;
}

.hero-buttons{
flex-direction:column;
}

.btn{
width:100%;
}

.hero-trust{
display:grid;
grid-template-columns:1fr 1fr;
}

.why-stats{
grid-template-columns:1fr;
}

.contact-info h3{
font-size:27px;
}

}


/* ACCESSIBILITY */

@media(prefers-reduced-motion:reduce){

html{
scroll-behavior:auto;
}

*{
animation-duration:.01ms!important;
animation-iteration-count:1!important;
transition-duration:.01ms!important;
}

.reveal{
opacity:1;
transform:none;
}

}