#facilities-page  .smartcls-sec{
    height: calc(100vh - 94.17px);
    display: flex;
    align-items: center;
}
#facilities-page  .library-sec{
    height: calc(100vh - 94.17px);
    display: flex;
    align-items: center;
    background-color: var(--light-black);
}
#facilities-page  .science-lab-sec{
    height: calc(100vh - 94.17px);
    display: flex;
    align-items: center;
}
#facilities-page  .mathematic-lab-sec{
    height: calc(100vh - 94.17px);
    display: flex;
    align-items: center;
    background-color: var(--light-black);
}
#facilities-page  .computerlab-sec{
    height: calc(100vh - 94.17px);
    display: flex;
    align-items: center;
}
#facilities-page  .smartcls-sec{
    height: calc(100vh - 94.17px);
    display: flex;
    align-items: center;
}
#facilities-page  .kindergarten-sec{
    height: calc(100vh - 94.17px);
    display: flex;
    align-items: center;
    background-color: var(--light-black);
}
#facilities-page  .sports-sec{
    height: calc(100vh - 94.17px);
    display: flex;
    align-items: center;
}
#facilities-page h3 {
    text-align: center;
    position: relative;
    z-index: 3;
    top: -180px;
    font-size: 35px;
    text-transform: uppercase;
    font-weight: bold;
}

#facilities-page h3::after {
    content: "";
    position: absolute;
    height: 3px;
    width: 5%;
    background-color: var(--red);
    left: 0;
    bottom: -5px;
    left: 50%;
    transform: translate(-50%);
}

#facilities-page .laboratory-sec {
    background-color: var(--light-black);
}

#facilities-page .container {
    position: relative;
}

#facilities-page .row::before {
    width: 100%;
    content: "";
    background-color: var(--blue);
    height: 294px;
    position: absolute;
    bottom: -83px;
    z-index: 0;
}
#facilities-page  .science-lab-sec .row::before {
    
    background-color: #6c757d;
   
}
#facilities-page  .computerlab-sec .row::before {
    
    background-color: var(--green);
   
}
#facilities-page .row::after {
    width: 32%;
    content: "";
    background-color: var(--red);
    height: 420PX;
    position: absolute;
    z-index: 0;
    right: 458px;
    top: -12px;
}


#text {
    display: none;
}
#facilities-page  .readmore-btn{
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    cursor: pointer;
    border: none;
   
    
    background-color: var(--blue);
    padding: 10px 20px;
    color: white;
   box-sizing: border-box;
}
#facilities-page .library-sec .bg-color2{
    background-color: var(--green);
   
}
#facilities-page .science-lab-sec .bg-color3{
    background-color: #6c757d;
}
#facilities-page .mathematic-lab-sec .bg-color4{
    background-color: var(--blue);
}
#facilities-page .computerlab-sec .bg-color5{
    background-color: var(--green);
}
#facilities-page .kindergarten-sec .bg-color6{
    background-color: #6c757d;
}
#facilities-page .sports-sec .bg-color7{
    background-color: var(--blue);
}



#facilities-page .facilities-content-cards {
    background-color: white;
    position: absolute;
    bottom: -174px;
    width: 40%;
    z-index: 2;
    padding: 50px;
    left: 100px;
    text-align: justify;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

#facilities-page .facilities-content-cards h2 {
    font-weight: bold;
    color: var(--red);
    position: relative;
    width: fit-content;
    text-transform: uppercase;
    font-size: 26px;

}

#facilities-page .facilities-content-cards h2::after {
    content: "";
    height: 3px;
    width: 50%;
    background-color: var(--blue);
    position: absolute;
    bottom: -10px;
    left: 0;
}

#facilities-page .facilities-content-cards p {
    margin: 25px 0;
    line-height: 30px;
}

.facilities-page-button {
    background-color: var(--blue);
    color: white;
    padding: 10px 20px;
    display: block;
    margin-top: 20px;
    width: fit-content;
}
#facilities-page .carousel-control-next, #facilities-page .carousel-control-prev {
    position: absolute;
    top: unset;
    bottom: 0;
    width: 32px;
    height: 32px;
    left: 50%;
    background-color: var(--red);
    transform: translate(-50%);
    display: none;
}
#facilities-page .carousel-control-next{
   right: 45%;
   transform: translate(-45%);
}

/* -------------------------------- */
#facilities-page .img-card-left .corousel-container {
    margin-left: 90px;
}

#facilities-page .img-card-left .facilities-content-cards {
    left: 560px;
}

#facilities-page .img-card-left .row::after {
    right: 550px;
    height: 350px;
    z-index: 0;
}

#facilities-page .smartcls-sec .row::after {
    top: 30px;
}

#facilities-page .carousel {
    position: relative;
    z-index: 1;
}

#facilities-page .library-sec .row::before {
    background-color: var(--green);

}

#facilities-page .library-sec .facilities-page-button {
    background-color: var(--green);
}

#facilities-page .playway-sec .row::before {
    background-color: #6c757d;

}

#facilities-page .playway-sec .facilities-page-button {
    background-color: #6c757d;
}

#facilities-page .sports-sec .row::before {
    background-color: var(--blue);

}

#facilities-page .sports-sec .facilities-page-button {
    background-color: var(--blue);
}

#facilities-page .kindergarten-sec .row::before {
    background-color: #6c757d;

}

#facilities-page .kindergarten-sec .facilities-page-button {
    background-color: #6c757d;
}
#facilities-page .carousel-indicators [data-bs-target] {
    
    width: 12px;
    height: 12px;
    border-radius: 50%;
   background-color: #e9ecef;
   border: 2px solid #212529;
   opacity: 1;
}
#facilities-page .carousel-indicators .active {
    opacity: 1;
    background-color: var(--red);
}


/* --------------------------------Responsive------------------------ */
@media screen and (max-width:1600px){
    #facilities-page h3 {
       top: -100px;
    }
    #facilities-page .facilities-content-cards {
    bottom: -120px;
       
    }
    #facilities-page .facilities-content-cards {
       padding: 30px 30px;
    }
}

@media screen and (max-width:1536px){
    #facilities-page .facilities-content-cards {
        bottom: -110px;
    }
}
@media screen and (max-width:1366px){
    #facilities-page .facilities-content-cards p {
        font-size: 14px;
    }
    #facilities-page .facilities-content-cards {
        padding: 30px 30px;
        
    }
    #facilities-page h3 {
        top: -80px;
    }
    #facilities-page  .smartcls-sec{
        height: 90vh;
    }
    #facilities-page  .library-sec{
        height: 90vh;
    }
    #facilities-page  .science-lab-sec{
        height: 90vh;
    }
    #facilities-page  .mathematic-lab-sec{
        height: 90vh;
    }
    #facilities-page  .computerlab-sec{
        height: 90vh;
    }
    #facilities-page  .smartcls-sec{
        height: 90vh;
    }
    #facilities-page  .kindergarten-sec{
        height: 90vh;
    }
    #facilities-page  .sports-sec{
        height: 90vh;
    }
    #facilities-page .img-card-left .row::after {
        right: 476px;
        height: 294px;
        z-index: 0;
    }
    #facilities-page .row::after {
        
        height: 335PX;
        right: 396px;
       
    }
    #facilities-page #smartclass_sec{
        padding-bottom: 30px;
    }
    #facilities-page #library_sec{
        padding-bottom: 30px;
    }
    #mathematics_lab_sec{
        padding-bottom: 30px;
    }
    #kindergarten_sec{
        padding-bottom: 30px;
    }
    #facilities-page #transport_sec{
        padding-bottom: 30px;
    }
}

@media screen and (max-width:1199px){
    #facilities-page .img-card-left .row::after {
        right: 397px;
        height: 195px;
        z-index: 0;
    }
    #facilities-page h3 {
        top: -120px;
    }
    #facilities-page .img-card-left .facilities-content-cards {
        left: 500px;
    }
    #facilities-page .row::after {
        height: 290PX;
        right: 334px;
    }
    #facilities-page .smartcls-sec {
        height: 80vh;
    }
    #facilities-page .smartcls-sec .facilities-content-cards {
        bottom: -145px;
    }
    #facilities-page .library-sec .facilities-content-cards {
        bottom: -145px;
    }
    #facilities-page .mathematic-lab-sec .facilities-content-cards {
        bottom: -145px;
    }
    #facilities-page .science-lab-sec .facilities-content-cards {
        bottom: -145px;
    }
    #facilities-page .computerlab-sec {
        height: 75vh;
    }
    #facilities-page .computerlab-sec .facilities-content-cards {
        bottom: -145px;
    }
    #facilities-page .kindergarten-sec .facilities-content-cards {
        bottom: -145px;
    }
    #facilities-page .sports-sec {
        height: 70vh;
    }
    #facilities-page .sports-sec .facilities-content-cards {
        bottom: -135px;
    }
}
@media screen and (max-width:992px){
    #facilities-page .science-lab-sec {
        height: 78vh;
    }
    #facilities-page .mathematic-lab-sec {
        height: 75vh;
    }
}

@media screen and (max-width:991px){
    #facilities-page .facilities-sec {
        height: auto;
        padding: 30px 0px;
    }
    #facilities-page .facilities-content-cards {
        width: 100%;
        position: unset;
    }
    #facilities-page .row .col-12 {
      order: 1;
    }
    #facilities-page .row  {
       row-gap: 12px;
      }
    #facilities-page .img-card-left .corousel-container {
        margin-left: 0px;
    }
    #facilities-page h3 {
      position: unset;
      padding: 20px 0px;
    }
    #facilities-page h3::after {
        content: "";
        position: absolute;
        top: 66px;
        width: 8%;
    }
    #facilities-page .row::after {
       position: unset;
       height: 0;
    }
    #facilities-page .img-card-left .row {
       flex-direction: column-reverse;
    }
    #facilities-page .img-card-left .row::after {
        position: unset;
        height: 0;
       
    }
    #facilities-page .smartcls-sec .row::before {
       height: 180px;
       bottom: -12px;
    }
    #facilities-page .row::before {
      
        height: 180px;
        bottom: 0px;
      
    }
    #facilities-page .science-lab-sec .row::before,
    #facilities-page .computerlab-sec .row::before,
    #facilities-page .sports-sec .row::before {
      
        bottom: -12px;
    }
   
    
    #facilities-page #transport_sec .row::before {
        bottom: 0px;
        background-color:var(--blue);
    }
    
    
}

@media screen and (max-width:575px){
    #facilities-page .facilities-content-cards {
      padding: 30px 40px;
        
    }
    #facilities-page .readmore-btn {
       
        padding: 8px 15px;
        
    }
    #facilities-page h3 {
        padding: 5px 0px;
    }
    #facilities-page h3::after {
       top: 50px;
    }
}

@media screen and (max-width:432px){
    #facilities-page h3 {
        font-size: 30px;
    }
    #facilities-page h3::after {
        top: 42px;
        width: 10%;
    }
    #facilities-page .facilities-content-cards {
        padding: 30px 30px;
    }
    #facilities-page .facilities-content-cards h2 {
       font-size: 22px;
    }
    #facilities-page .facilities-sec {
       
        padding: 20px 0 25px 0;
    }
    #facilities-page .smartcls-sec .row::before {
        height: 120px;
    }
    #facilities-page .row::before {
       height: 120px;
    }
    #facilities-page .readmore-btn {
        padding: 6px 12px;
    }
    #facilities-page .facilities-content-cards p {
       
        line-height: 25px;
    }
    #facilities-page .facilities-content-cards {
        padding: 20px 20px;
    }
    #facilities-page h3 {
        font-size: 25px;
    }
}

@media screen and (max-width:394px) {
    #facilities-page .readmore-btn {
        padding: 7px 12px;
        font-size: 14px;
    }
}

@media screen and (max-width:385px){
    #facilities-page .facilities-content-cards h2 {
        font-size: 20px;
    }
}
@media screen and (max-width:320px){
    #facilities-page h3 {
        font-size: 25px;
    }
    #facilities-page .facilities-content-cards h2 {
        font-size: 20px;
    }
}