/* ==========================================
   SVMM HOSPITAL - DOCTORS PAGE
   ========================================== */

:root{

    --primary:#0B2C5D;
    --primary-dark:#081F43;
    --secondary:#ffffff;
    --light:#F6F8FB;
    --border:#E5E7EB;
    --text:#333;
    --gray:#666;

}

.container{

    width:min(1320px,92%);
    margin:auto;

}

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

.doctor-hero{

    background:
    linear-gradient(rgba(11,44,93,.75),rgba(11,44,93,.75)),
    url("../img/banner/04.png");

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;

    height:380px;

    display:flex;

    align-items:center;

}

.doctor-hero-content{

    width:100%;

    text-align:center;

}

.doctor-hero-title{

    color:#fff;

    font-size:52px;

    font-weight:700;

    margin-bottom:20px;

    line-height:1.2;

}

.doctor-hero-text{

    color:#fff;

    font-size:18px;

    line-height:1.8;

    max-width:760px;

    margin:0 auto;

}

.doctor-breadcrumb{

    margin-top:30px;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:10px;

    color:#fff;

    font-size:15px;

}

.doctor-breadcrumb a{

    color:#fff;

    text-decoration:none;

}

.doctor-breadcrumb a:hover{

    text-decoration:underline;

}

.doctor-breadcrumb span{

    opacity:.8;

}

/* ==========================================
   SEARCH
   ========================================== */

.doctor-search{

    margin-top:-45px;
    position:relative;
    z-index:5;

}

.search-wrapper{

    background:#fff;

    padding:30px;

    border-radius:15px;

    box-shadow:0 8px 30px rgba(0,0,0,.08);

    display:flex;

    gap:20px;

    flex-wrap:wrap;

    align-items:center;

}

.search-box{

    flex:1;
    min-width:300px;
    position:relative;

}

.search-box i{

    position:absolute;
    left:18px;
    top:18px;
    color:var(--primary);

}

.search-box input{

    width:100%;
    height:55px;

    padding-left:48px;

    border:1px solid var(--border);

    font-size:15px;

    outline:none;

}

.search-wrapper select{

    width:240px;
    height:55px;

    border:1px solid var(--border);

    background:#fff;

    padding:0 15px;

    outline:none;

}

.doctor-count{

    margin-top:20px;

    font-weight:600;

    color:var(--primary);

}

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

.doctor-directory-section{

    padding:70px 0;

    background:#fff;

}

.doctor-directory{

    display:flex;

    flex-direction:column;

}

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

.doctor-directory-card{

    display:flex;

    align-items:flex-start;

    gap:22px;

    padding:22px 0;

    border-bottom:1px solid #E5E7EB;

}

.doctor-directory-photo{

    width:150px;

    flex-shrink:0;

}

.doctor-directory-photo img{

    width:150px;

    height:185px;

    object-fit:cover;

    display:block;

}

.doctor-directory-info{

    flex:1;

}

.doctor-directory-name{

    font-size:24px;

    font-weight:700;

    color:#0B2C5D;

    text-decoration:none;

    line-height:1.25;

}

.doctor-directory-name:hover{

    text-decoration:underline;

}

.designation{

    margin-top:4px;

    font-size:15px;

    color:#444;

    font-weight:600;

}

.department{

    margin-top:6px;

    font-size:15px;

    color:#0B2C5D;

    font-weight:600;

}

.qualification{

    margin-top:6px;

    font-size:14px;

    color:#666;

}

.speciality,

.experience,

.languages{

    margin-top:5px;

    font-size:14px;

    color:#555;

    line-height:1.55;

}

.view-profile{

    display:inline-block;

    margin-top:10px;

    font-size:14px;

    font-weight:600;

    color:#0B2C5D;

    text-decoration:none;

}

.view-profile:hover{

    text-decoration:underline;

}

/* ==========================================
   PAGINATION
   ========================================== */

.pagination-section{

    padding-bottom:80px;

}

.pagination{

    display:flex;

    justify-content:center;

    gap:10px;

    flex-wrap:wrap;

}

.pagination button{

    width:42px;

    height:42px;

    border:1px solid var(--border);

    background:#fff;

    cursor:pointer;

    transition:.3s;

}

.pagination button:hover,

.pagination button.active{

    background:var(--primary);

    color:#fff;

    border-color:var(--primary);

}

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

@media(max-width:992px){

.search-wrapper{

    flex-direction:column;

}

.search-wrapper select{

    width:100%;

}

}

@media(max-width:768px){

.hero-content h1{

    font-size:34px;

}

.doctor-directory-card{

    flex-direction:column;

}

.doctor-directory-photo{

    width:100%;

}

.doctor-directory-photo img{

    width:100%;

    height:auto;

}

.doctor-directory-name{

    font-size:26px;

}

}