/*======================================
          DOCTOR HERO
=======================================*/

.doctor-hero{

    position:relative;
    min-height:100vh;
    display:flex;
    align-items:center;
    overflow:hidden;
    padding:170px 0 120px;
    background:
    linear-gradient(135deg,#041B38 0%,#0A4D8F 55%,#1A73E8 100%);

}

/* Background Glow */

.doctor-hero::before{

    content:"";
    position:absolute;
    width:700px;
    height:700px;
    right:-180px;
    top:-180px;
    border-radius:50%;
    background:
    radial-gradient(circle,
    rgba(255,255,255,.10),
    transparent 70%);

}

.doctor-hero::after{

    content:"";
    position:absolute;
    width:450px;
    height:450px;
    left:-120px;
    bottom:-120px;
    border-radius:50%;
    background: radial-gradient(circle,rgba(0,180,216,.20),transparent 70%);

}

.hero-overlay{

    position:absolute;
    inset:0;
    background:
    linear-gradient(90deg,rgba(2,20,45,.55), rgba(2,20,45,.18));

}

.hero-content{

    position:relative;
    z-index:10;
    color:#fff;

}

.hero-badge{

    display:inline-block;
    padding:10px 22px;
    border-radius:50px;
    background:rgba(255,255,255,.12);
    backdrop-filter:blur(12px);
    color:#fff;
    font-weight:600;
    margin-bottom:25px;

}

.hero-content h1{

    font-size:70px;
    font-weight:800;
    line-height:1.1;
    margin-bottom:25px;

}

.hero-content h1 span{

    display:block;
    color:#8fd3ff;

}

.hero-content p{

    font-size:21px;
    line-height:36px;
    color:#eef6ff;
    margin-bottom:35px;

}

.hero-buttons{

    display:flex;
    gap:20px;
    margin-bottom:60px;

}

.hero-buttons .btn{

    padding:15px 35px;
    border-radius:50px;

}

.hero-buttons .btn-outline-light:hover{

    background:#fff;
    color:#0d6efd;

}

.doctor-highlights{

    display:flex;
    gap:60px;

}

.doctor-highlights h3{

    font-size:42px;
    font-weight:700;
    margin-bottom:5px;

}

.doctor-highlights span{

    color:#dbe8ff;

}

.hero-image{

    position:relative;
    z-index:5;
    text-align:center;
}

.hero-image img{

    max-height:900px;
    animation:floatDoctor 5s ease-in-out infinite;

}

@keyframes floatDoctor{

0%{

transform:translateY(0px);

}

50%{

transform:translateY(-12px);

}

100%{

transform:translateY(0px);

}

}

@media(max-width:991px){

.hero-content{

text-align:center;

}

.hero-content h1{

font-size:46px;

}

.hero-buttons{

justify-content:center;
flex-wrap:wrap;

}

.doctor-highlights{

justify-content:center;
gap:25px;
flex-wrap:wrap;
margin-bottom:40px;

}

.hero-image{

margin-top:40px;

}

.hero-image img{

max-height:420px;

}

}


/*=========================
    DIRECTORY
=========================*/

.doctor-directory{

    padding:110px 0 50px;
    background:#f7fbff;

}

.doctor-filter{

    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:18px;
    margin-top:50px;

}

.filter-btn{

    border:none;
    background:#fff;
    padding:14px 28px;
    border-radius:50px;
    font-weight:600;
    color:#183153;
    box-shadow:0 8px 20px rgba(0,0,0,.08);
    transition:.35s;

}

.filter-btn:hover,

.filter-btn.active{

    background:#0d6efd;
    color:#fff;
    transform:translateY(-3px);

}


/*==========================
    DOCTOR CARDS
==========================*/

.doctor-card-section{

padding:30px 0 120px;
background:#f7fbff;

}

.doctor-card{

background:#fff;
border-radius:25px;
overflow:hidden;
box-shadow:0 15px 40px rgba(0,0,0,.08);
transition:.35s;
height:100%;

}

.doctor-card:hover{

transform:translateY(-12px);
box-shadow:0 25px 60px rgba(13,110,253,.18);

}

.doctor-image{

position:relative;
overflow:hidden;

}

.doctor-image img{

width:100%;
height:420px;
object-fit:cover;
transition:.5s;

}

.doctor-card:hover img{

transform:scale(1.08);

}

.doctor-social{

position:absolute;
top:20px;
right:20px;
display:flex;
flex-direction:column;
gap:10px;
opacity:0;
transition:.35s;

}

.doctor-card:hover .doctor-social{

opacity:1;

}

.doctor-social a{

width:42px;
height:42px;
background:#fff;
display:flex;
justify-content:center;
align-items:center;
border-radius:50%;
color:#0d6efd;
text-decoration:none;

}

.doctor-body{

padding:30px;

}

.department{

display:inline-block;
padding:8px 16px;
border-radius:40px;
background:#edf6ff;
color:#0d6efd;
font-size:13px;
font-weight:600;
margin-bottom:18px;

}

.doctor-body h3{

font-size:28px;
margin-bottom:12px;
color:#183153;

}

.doctor-body p{

line-height:28px;
color:#666;

}

.doctor-exp{

margin:25px 0;
font-weight:600;
color:#183153;

}

.doctor-exp i{

margin-right:10px;
color:#0d6efd;

}

.doctor-buttons{

display:flex;
gap:15px;

}

.profile-btn{

flex:1;
padding:12px;
background:#edf6ff;
text-align:center;
border-radius:50px;
text-decoration:none;
color:#0d6efd;
font-weight:600;

}

.consult-btn{

flex:1;
padding:12px;
background:#0d6efd;
color:#fff;
text-align:center;
border-radius:50px;
text-decoration:none;
font-weight:600;

}