/* ==================================================
   DOCTOR ARCHIVE PAGE
==================================================*/

.doctor-archive {
    padding: 70px 0;
    background: #f8fafc;
}



/* ==================================================
   PAGE HEADER
==================================================*/

.doctor-archive .section-heading {
    text-align: center;
    max-width: 750px;
    margin: 0 auto 60px;
}

.doctor-archive .section-heading h1 {
    font-size: 42px;
    margin-bottom: 15px;
    color: #222;
}

.doctor-archive .section-heading p {
    color: #666;
    font-size: 17px;
    line-height: 1.8;
}



/* ==================================================
   DOCTOR GRID
==================================================*/

.doctor-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 35px;
}



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

.doctor-card {
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(0, 0, 0, .08);
    transition: .35s;
}

.doctor-card:hover {
    transform: translateY(-8px);
}

.doctor-card-image img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    display: block;
}

.doctor-content {
    padding: 30px;
}

.doctor-content h2 {
    margin-bottom: 20px;
}

.doctor-content h2 a {
    color: #222;
    text-decoration: none;
}

.doctor-content p {
    margin-bottom: 15px;
    color: #555;
    line-height: 1.7;
}

.doctor-specialization {
    color: #009688;
    font-weight: 600;
}



/* ==================================================
   BUTTON
==================================================*/

.doctor-button {
    display: inline-block;
    margin-top: 20px;
    padding: 12px 28px;
    background: #009688;
    color: #fff;
    text-decoration: none;
    border-radius: 8px;
    transition: .3s;
}

.doctor-button:hover {
    background: #00796b;
}



/* ==================================================
   DOCTOR FILTER
================================================== */


.doctor-filter-form {

    display: flex;

    align-items: center;

    gap: 15px;

    background: #ffffff;

    padding: 25px;

    border-radius: 20px;

    border: 1px solid #e6edf5;

    margin-bottom: 40px;

}




/* Search Box */


.doctor-search-box {

    flex: 1;

}



.doctor-search-box input {


    width: 100%;

    height: 50px;

    padding: 0 20px;

    border-radius: 30px;

    border: 1px solid #dbe4ee;

    font-size: 16px;

    outline: none;

    transition: .3s ease;


}



.doctor-search-box input:focus {


    border-color: #0d9488;

    box-shadow: 0 0 0 3px rgba(13, 148, 136, .12);


}






/* Button */


.doctor-filter-form button {


    height: 50px;

    padding: 0 30px;

    border: none;

    border-radius: 30px;

    background: #0d9488;

    color: #ffffff;

    font-size: 16px;

    cursor: pointer;

    transition: .3s ease;


}



.doctor-filter-form button:hover {


    background: #087f75;


}






/* Responsive */


@media(max-width:768px) {


    .doctor-filter-form {


        flex-direction: column;

        align-items: stretch;


    }



    .doctor-filter-form button {


        width: 100%;


    }


}


/* Specialization Select */


.doctor-filter-field select {


    width: 100%;

    height: 50px;

    padding: 0 20px;

    border-radius: 30px;

    border: 1px solid #dbe4ee;

    background: #fff;

    font-size: 16px;

    outline: none;


}



.doctor-filter-field select:focus {


    border-color: #0d9488;


}






/* ==================================================
   DOCTOR FILTER DROPDOWNS
================================================== */


.doctor-filter-field {

    flex: 1;

}



.doctor-filter-field select {


    width: 100%;

    height: 50px;

    padding: 0 20px;

    border-radius: 30px;

    border: 1px solid #dbe4ee;

    background: #ffffff;

    color: #444;

    font-size: 16px;

    outline: none;

    cursor: pointer;

    transition: .3s ease;


}



.doctor-filter-field select:hover {


    border-color: #0d9488;


}



.doctor-filter-field select:focus {


    border-color: #0d9488;

    box-shadow:
        0 0 0 3px rgba(13, 148, 136, .12);


}





/* Filter Layout Update */


.doctor-filter-form {


    display: grid;

    grid-template-columns:

        2fr 1fr 1fr auto;

    gap: 15px;

    align-items: center;


}







/* Responsive */


@media(max-width:900px) {


    .doctor-filter-form {


        grid-template-columns: 1fr 1fr;


    }


}



@media(max-width:600px) {


    .doctor-filter-form {


        grid-template-columns: 1fr;


    }


}








/* ==================================================
   RESPONSIVE
==================================================*/

@media(max-width:768px) {

    .doctor-archive {
        padding: 50px 0;
    }

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

    .doctor-archive .section-heading h1 {
        font-size: 32px;
    }

    .doctor-content {
        padding: 22px;
    }

}