/* Auto-generated from the original style.css during code reorganization.
   Grouped by component so each concern can be found and debugged independently. */

/* ==========================================================
DOCTORS
========================================================== */

.doctors{

padding:130px 0;

background:#F7FBFC;

}

.doctor-grid{

display:flex;

flex-direction:column;

gap:50px;

margin-top:70px;

}

.doctor-card{

display:grid;

grid-template-columns:420px 1fr;

background:#fff;

border:1px solid rgba(11,114,133,.08);

border-radius:24px;

overflow:hidden;

box-shadow:var(--shadow);

min-height:520px;

transition:
transform .45s cubic-bezier(.22,.61,.36,1),
box-shadow .45s cubic-bezier(.22,.61,.36,1);

will-change:transform;

}

.doctor-card:hover{

transform:translateY(-8px);

box-shadow:0 30px 60px rgba(0,0,0,.12);

}


.doctor-image{

position:relative;

overflow:hidden;

height:520px;

background:#f5f8fa;

}

.doctor-image::after{

content:"";

position:absolute;

inset:0;

background:linear-gradient(
180deg,
transparent 60%,
rgba(0,0,0,.08)
);

opacity:0;

transition:.45s;

pointer-events:none;

}

.doctor-card:hover .doctor-image::after{

opacity:1;

}

.doctor-image img{

width:100%;

height:100%;

display:block;

object-fit:cover;

transform:scale(1);

transition:
transform .8s cubic-bezier(.22,.61,.36,1);

backface-visibility:hidden;

will-change:transform;

}


.doctor-card:hover .doctor-image img{

transform:scale(1.08);

}

.doctor-info{

padding:60px;

display:flex;

flex-direction:column;

justify-content:flex-start;

}

.doctor-info h3{

font-size:38px;
line-height:1.2;

font-weight:800;

color:var(--dark);

margin-bottom:12px;

}

.designation{

display:inline-block;

align-self:flex-start;

padding:10px 18px;

border-radius:50px;

background:linear-gradient(
135deg,
#EAFBFA,
#DCF7F5
);

color:var(--primary);

font-weight:700;

margin-bottom:28px;

}

.doctor-description{

font-size:18px;

line-height:1.9;

color:#56656F;

margin:0 0 30px;

max-width:95%;

}

.specialties span{

padding:8px 14px;

border-radius:50px;

background:#F4F8FA;

font-size:13px;

font-weight:600;

color:var(--dark);

border:1px solid #E7EEF2;

}

.doctor-info ul{

margin-bottom:30px;

}

.doctor-info li{

margin-bottom:12px;

font-size:17px;

color:#56656F;

}

.doctor-btn{

display:inline-flex;

align-items:center;

justify-content:center;

padding:16px 34px;

min-width:220px;

height:56px;

border-radius:50px;

background:var(--secondary);

color:#ffffff;

font-size:16px;

font-weight:700;

text-decoration:none;

border:none;

outline:none;

cursor:pointer;

white-space:nowrap;

transition:
background .35s,
transform .35s,
box-shadow .35s;

}

.doctor-btn:hover{

    background:#00989b;

    transform:translateY(-3px);

    box-shadow:0 12px 28px rgba(0,181,184,.28);

}

.doctor-btn:active{

    transform:translateY(-1px);

}

.secondary-btn{

background:white;

color:var(--primary);

border:2px solid var(--primary);

}

.secondary-btn:hover{

background:var(--primary);

color:white;

}

.doctor-meta{

display:flex;

gap:40px;

margin-bottom:30px;

padding:24px 0;
border-top:1px solid #eef3f6;
border-bottom:1px solid #eef3f6;
}

.doctor-meta strong{

display:block;

font-size:28px;

color:var(--primary);

margin-bottom:6px;

}

.doctor-meta span{

font-size:15px;

color:var(--text);

}
.doctor-intro{

font-size:18px;

line-height:1.8;

color:var(--text);

margin:20px 0 30px;

max-width:620px;

}
.specialties{

display:flex;

flex-wrap:wrap;

gap:14px;

margin:30px 0 40px;

}

.doctor-actions{

    display:flex;

    align-items:center;

    justify-content:flex-start;

    gap:18px;

    margin-top:35px;

    flex-wrap:wrap;

}


.doctor-outline{

display:inline-flex;

align-items:center;

justify-content:center;

padding:16px 34px;

min-width:220px;

height:56px;

border-radius:50px;

background:white;

color:var(--primary);

border:2px solid var(--primary);

font-size:16px;

font-weight:700;

text-decoration:none;

white-space:nowrap;

transition:.35s;

}

.doctor-outline:hover{

background:var(--primary);

color:white;

transform:translateY(-3px);

}