/*====================================================
            OUR DENTISTS & TEAM
====================================================*/

body{
    background:#f7fbff;
    font-family:'Segoe UI',sans-serif;
    color:#5c6f88;
}

/*====================================================
                HERO
====================================================*/

.team-header{
    background:linear-gradient(135deg,#043769,#0d5ea8);
    color:#fff;
    padding:50px 0;
}

.team-title{
    font-size:2rem;
    font-weight:700;
    margin-bottom:.5rem;
}

.team-subtitle{
    max-width:600px;
    margin:auto;
    font-size:.92rem;
    line-height:1.6;
    opacity:.95;
}

/*====================================================
                TEAM SECTION
====================================================*/

.team-section{
    padding:40px 0;
}

/*====================================================
                TEAM CARD
====================================================*/

.team-card{
    background:#fff;
    border-radius:14px;
    overflow:hidden;
    cursor:pointer;
    height:100%;
    border:1px solid #e5edf8;
    box-shadow:0 .4rem 1.1rem rgba(4,55,105,.08);
    transition:all .35s ease;
}

.team-card:hover{
    transform:translateY(-6px);
    border-color:#0d5ea8;
    box-shadow:0 .8rem 1.5rem rgba(4,55,105,.18);
}

/*====================================================
                IMAGE
====================================================*/

.team-image{
    width:100%;
    height:260px;
    object-fit:contain;
    object-position:center;
    background:#f8fafc;
    padding:10px;
}

.team-card:hover .team-image{
    transform:scale(1.05);
}

/*====================================================
                CARD BODY
====================================================*/

.team-card-body{
    padding:16px 14px 18px;
    text-align:center;
}

.team-card-body h5{
    color:#043769;
    font-size:1.05rem;
    font-weight:700;
    line-height:1.3;
    margin-bottom:6px;
}

.team-card-body span{
    display:block;
    color:#6b7a90;
    font-size:.82rem;
    margin-bottom:14px;
}

/*====================================================
                BUTTON
====================================================*/

.btn-team{
    background:#043769;
    color:#fff;
    border:none;
    border-radius:50px;
    padding:8px 20px;
    font-size:12.5px;
    font-weight:600;
    transition:all .3s ease;
}

.btn-team:hover{
    background:#0d5ea8;
    color:#fff;
    transform:translateY(-2px);
}

.btn-team i{
    margin-left:6px;
    transition:.3s;
}

.team-card:hover .btn-team i{
    transform:translateX(4px);
}

/*====================================================
                    MODAL
====================================================*/

.modal-dialog{
    max-width:820px;
}

.team-modal{
    position:relative;
    border:none;
    border-radius:16px;
    overflow:hidden;
    background:#fff;
    box-shadow:0 18px 42px rgba(4,55,105,.18);
}

/*====================================================
                MODAL WRAPPER
====================================================*/

.team-modal-wrapper{
    display:flex;
    align-items:stretch;
    min-height:440px;
}

/*====================================================
                LEFT PANEL
====================================================*/

.modal-left{
    flex:0 0 65%;
    padding:28px 32px;
    overflow-y:auto;
}

.modal-left h2{
    color:#043769;
    font-size:1.55rem;
    font-weight:700;
    line-height:1.25;
    margin-bottom:.3rem;
}

.modal-left h5{
    color:#0d5ea8;
    font-size:.95rem;
    font-weight:600;
    margin-bottom:.75rem;
}

.modal-left hr{
    width:60px;
    height:3px;
    border:none;
    background:#0d5ea8;
    opacity:1;
    margin:0 0 20px;
}

.modal-left p{
    color:#5f6f86;
    font-size:.88rem;
    line-height:1.7;
    text-align:justify;
    margin-bottom:.9rem;
}

.modal-left p:last-child{
    margin-bottom:0;
}

/*====================================================
                RIGHT PANEL
====================================================*/

.modal-right{
    flex:0 0 35%;
    display:flex;
    flex-direction:column;
    border-left:1px solid #dbe7f5;
    background:#fff;
}

/*====================================================
                MEMBER IMAGE
====================================================*/

.modal-image{
    width:100%;
    height:220px;
    object-fit:contain;
    padding:12px;
    background:#fff;
    /* border-bottom:1px solid #dbe7f5; */
}

.modal-image{
    border-bottom:none;
    padding:16px 16px 10px;
}

.hours-card{
    border-top:1px solid #d9e6f5;
}

.hours-card{
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    padding:18px 22px;
}



.hours-card h4{
    color:#043769;
    font-size:1.15rem;
    font-weight:700;
    display:flex;
    align-items:center;
    gap:.6rem;
    margin-bottom:16px;
}

.hours-card table{
    
    border-collapse:separate;
    border-spacing:0 4px;   /* spacing between rows */
    font-size:13px;
}

.hours-card table{
    max-width:300px;
}

.hours-card td{
    padding:3px 0;
    vertical-align:middle;
}

.hours-card td:first-child{
    width:45%;
    color:#043769;
    font-weight:600;
    padding-right:14px;
}

.hours-card td:last-child{
    text-align:right;
    color:#666;
}
/*====================================================
                CLOSE BUTTON
====================================================*/
/* 
.modal-close{
    position:absolute;
    top:16px;
    right:16px;
    z-index:100;
    background:#fff;
    border-radius:50%;
    opacity:1;
    padding:.7rem;
    box-shadow:0 4px 15px rgba(0,0,0,.12);
}

.modal-close:hover{
    background:#eef6ff;
} */

/*====================================================
                ANIMATION
====================================================*/

.modal.fade .modal-dialog{
    transform:scale(.95);
    transition:transform .25s ease;
}

.modal.show .modal-dialog{
    transform:scale(1);
}

.modal-close{
    position:absolute;
    top:14px;
    right:14px;
    z-index:1056;

    width:34px;
    height:34px;

    display:flex;
    align-items:center;
    justify-content:center;

    background:#fff;
    border:none;
    border-radius:50%;
    box-shadow:0 5px 14px rgba(0,0,0,.15);

    opacity:1;
}

.modal-close:hover{
    background:#f4f8fc;
}

.modal-close.btn-close{
    background-size:12px;
    filter:none;
}

.btn-close{
    background-image: var(--bs-btn-close-bg) !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 12px !important;
    opacity: 1 !important;
}

.team-heading{
    color:#043769;
    font-size:1.55rem;
    font-weight:700;
    margin:18px 0 12px;
    padding:0;
    line-height:1.2;
}

.team-heading-wrapper{
    max-width:1320px;
    margin:0 auto;
    padding:0 12px;
}

.team-section{
    padding:8px 0 50px;
}