/*
Theme Name: Shifa Hospital
Theme URI: https://valudas.com/shifahospital/
Description: Custom theme for Shifa Hospital.
Author: Aakib Valuda
Author URI: https://valudas.com/
Template: Divi
Version: 1.0.0
*/

/* Import parent theme styles */
@import url("../Divi/style.css");

/* Your custom styles go here */


/* ================================================
Department Single Page Styles
================================================ */

/* General Layout */
/* Collapse and Expand Button */


.bread-crumb-container{
    background-color: #CF252C;
    color: white;
    padding: 0 !important;
}

.bread-crumb-section a{
    color: white;
    text-decoration: none;
    font-weight: 600;
}

.dept-container *{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Nunito Sans', Helvetica, Arial, Lucida, sans-serif;
    font-weight: 400;
    color: rgba(0,0,0,0.64)!important;
}

.dept-container .content h1, 
.dept-container .content h2, 
.dept-container .content h3, 
.dept-container .contenth4, 
.dept-container .content h5, 
.dept-container .content h6 {
    border-bottom: 1px solid #eaeaea;
    font-weight: 800 !important;
    /* margin-bottom: 32px; */
}

.department-thumbnail img{
    width:100px ! important;
    height:100px !important;
    max-width:100px ! important;
    max-height:100px !important;
}

.dept-container img{
    width:100px ! important;
    height:100px !important;
    max-width:100px ! important;
    max-height:100px !important;
}

.dept-container p{
   margin-bottom: 10px;
}

.content:first-child{
    margin-top: 0px !important;
}           

.dept-container{
   
    display: flex;
}

.collapsible{
    width: 40%;
    height: fit-content;
    position: sticky;
    top: 0;
}

.collapse-title{
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #CF252C;
   
}

.collapse-title h4{
    font-size: 16px;
    color: white;
    padding: 15px;
    font-weight: 700 !important;
    letter-spacing: .5px;
    text-transform: uppercase;
}


.dept-container  h1,
.dept-container h2,
.dept-container h3,
.dept-container h4,
.dept-container h5,
.dept-container h6{
    color: #000;
    font-size: 14px;
    font-weight: 600;
    line-height: 28px;
    text-transform: capitalize;
    
    
    
}

.fa-solid{
    color:white !important;
    margin:0 10px;
}

.wp-block-heading {
    padding: 10px 0px !important;
    font-size: unset !important;
    color: unset !important;
    margin-bottom: unset !important;
    background-color: unset !important;
}

@keyframes dropdown {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(180deg);
    }
}

@keyframes dropdown-reverse {
    0% {
        transform: rotate(180deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

.collapse-title i {
   
    transition: transform 0.3s ease-in-out;
}

.collapse-title h4{
    color:white !important;
}
.collapse-title i.expanded {
    animation: dropdown 0.3s ease-in-out forwards;
}

.collapse-title i:not(.expanded) {
    animation: dropdown-reverse 0.3s ease-in-out forwards;
}


.collapse-items a{
    text-decoration: none;
    color: rgba(0,0,0,0.64)!important;
}

.collapse-items li{
    list-style: none;
    padding: 15px;
    /* color: rgba(0,0,0,0.64)!important; */
    font-size: 14px;
    border-width: 0 1px 1px 1px;
    border-style: solid;
    border-color:rgb(218, 218, 218);
}

.collapse-items li:hover {
    background-color: #FEF5ED;
   
            color: #CF252C!important;
}

.collapse-items li:hover a{
     
            color: #CF252C!important;
}

.content{
    width: 100%;
    padding-left: 60px;
}

.content h1{
   
    margin-bottom: 10px;
    color: #CF252C;
    font-size: 22px !important;
    font-weight: 600 !important;
    line-height: 32px !important;
}

.content p{
    margin-top: 20px;
    color: rgba(0,0,0,0.64)!important;
    line-height: 1.6em;
}



/* =-=-=-=-=-=-=-=-=-=-=-=-==-=-=-=--= media query =-=-=-=-=-=-==-=-=-==-=-==-===-=-=-=-=-=-==-=- */

@media screen and (max-width: 768px) {
    
    .dept-container{
        /*padding: 60px;*/
        display: block;
    }

    .collapsible{
        width: 100%;
        position: unset;
    }

    .content{
        margin-top: 40px;
        padding-left: unset;
    }
}


@media screen and (max-width: 425px) {
    
    .dept-container{
        /*padding: 60px 40px;*/
    }
}