.abouttopbannerbg_1 {
    /* max-height: 70%; */
    height: 80%;
    z-index: -99;
    width: 100%;
    position: absolute;
    background: #D7DBFF;
    border-radius: 30px;
}

.abouttopbannerbg h3 {

    font-size: 42px;
    font-weight: 900;
    line-height: 48px;
    color: #14478A;
    text-align: center;

}
.aboutus_title_desp h2{
    font-size: 42px;
    font-weight: 900;
    line-height: 48px;
    color: #14478A;
    text-align: center;
}
.aboutus_title_desp p{
    color: #302f2f;
 text-align: justify;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 170%;
}

.Why_Choose_Us h6 {
    border: 2px solid #2ECC71;
    background: #BAC1FF;
    color: #ffffff;
    padding: 12px 25px 12px 25px;
    gap: 10px;
    border-radius: 20px 20px 0px 20px;
    border: 2px 0px 0px 0px;

}

.hospital h3 {
    font-size: 42px;
    font-weight: 700;
    /* line-height: 62.4px; */
    color: #14478A;

}

.bg-hover-effect {

    border-radius: 20px;
    -webkit-transition: background-color 700ms linear, color 700ms linear;
    /* transition: 200ms; */

}

.bg-hover-effect h3 {
    font-size: 22px !important;
    color: #5D7EB6;
    transition: color 700ms linear;
}

.bg-hover-effect p {
    color: #5B5B5B;
    transition: color 700ms linear;
}

.bg-hover-effect::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0%;
    width: 0;
    border-radius: 30px;
    height: 100%;
    background: #BAC1FF;
    transition: width 700ms ease, left 700ms ease;
    z-index: -1;
    /* Make sure the background is behind the content */
}

.bg-hover-effect:hover::before {
    width: 98%;

    left: 0%;
    /* Center the background */
}

.bg-hover-effect:hover h3 {
    color: #14478A;

    /* Center the background */
}
.bg-hover-effect:hover .icon_about_us {
    border: 1px solid white;
    transition: width 700ms ease, left 700ms ease;
    background-color: white;

    /* Center the background */
}

.bg-hover-effect:hover p {
    color: #14478A;
    /* Center the background */
}

.icon_about_us {
    padding: 10px;
    border-radius: 100%;
    border: 1px solid #2677BC99
}

.title_vision_mission {
    color: #14478A;
    font-family: Roboto;
    font-size: 42px;
    font-style: normal;
    text-align: center;
    font-weight: 900;
    line-height: 48px;
    /* 114.286% */
}

.desp_vision_mission {
    color: #302F2F;
    text-align: center;
    font-family: Roboto;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 34px;
    /* 170% */
}

.our_mission {
    border-radius: 30px;
    background: #F6E9D9;
    width: 320px;

    flex-shrink: 0;
}

.our_mission h2 {
    color: #636363;
    font-family: Roboto;
    font-size: 30px;
    font-style: normal;
    font-weight: 900;
    line-height: 48px;
    /* 160% */
}

.our_mission h2>span {
    color: #B39877;
    font-family: Roboto;
    font-size: 30px;
    font-style: normal;
    font-weight: 900;
    line-height: 48px;
}

.our_vision {
    border-radius: 30px;
    background: #BDE3FD;
    width: 320px;

    flex-shrink: 0;
}

.our_vision h2 {
    color: #636363;
    font-family: Roboto;
    font-size: 30px;
    font-style: normal;
    font-weight: 900;
    line-height: 48px;
    /* 160% */
}

.our_vision h2>span {
    color: #026AB2;
    font-family: Roboto;
    font-size: 30px;
    font-style: normal;
    font-weight: 900;
    line-height: 48px;
}

.our_vision p {
    /* max-height: 100px; */
}

.our_mission p {
    /* max-height: 100px; */
}

.our_values {
    border-radius: 30px;
    background: #C3EAD4;
    width: 320px;

    flex-shrink: 0;
}

.our_values h2 {
    color: #636363;
    font-family: Roboto;
    font-size: 30px;
    font-style: normal;
    font-weight: 900;
    line-height: 48px;
    /* 160% */
}

.our_values h2>span {
    color: #538C6C;
    font-family: Roboto;
    font-size: 30px;
    font-style: normal;
    font-weight: 900;
    line-height: 48px;
}

.who_we_are h2{
    color: #14478A;
font-family: Roboto;
font-size: 42px;
font-style: normal;
font-weight: 900;
line-height: 48px; /* 114.286% */
}
.who_we_are p{
    color: #302F2F;
    font-family: Roboto;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 34px; /* 170% */
}
.who_we_container{
    margin: 10% 0% 6% 0%;
}

@media screen and (max-width: 767px) {
    .title_vision_mission {
        font-size: 30px;
    }
    .our_mission{
        width: 100%;
    }
    .our_vision{
        width: 100%;
    }
    .our_values{
        width: 100%;
    }
    .hospital h3{
        font-size: 16px !important;
    }

    .abouttopbannerbg h3{
        font-size: 22px ;
        line-height: normal;
    }

    .who_we_are h2{
        font-size: 26px;
    }

    .who_we_are p{
        text-align: center;
        font-size: 14px;
    }
    .aboutus_title_desp h2{
        font-size: 26px;

    }
    .aboutus_title_desp p{
        font-size: 14px;
        padding: 10px;

    }

    .bg-hover-effect h3{
        font-size: 16px !important;
    }

    .bg-hover-effect p{
        margin-top: 1%;
        font-size: 14px ;
    }

    .desp_vision_mission {
        font-size: 12px;
        line-height: 22px;
    }

    .doctorDesign h3 {
        font-size: 14px;
        height: 30px;
        /* margin-bottom: -10px !important; */
        display: flex;
        align-items: self-end;
        justify-content: center;
    
      }
    
      .doctorDesign h6 {
        font-size: 10px;
        width: 98% !important;
        line-height: normal !important;
    
    
      }
    
      .doctorDesign p {
        font-size: 12px;
    
      }

      .abouttopbannerbg_1{
        width: 94% !important;
      }
    
      .doctorDesign img {
        width: 70%;
      }
    
      .specailsed_doctor_contain {
    
        height: 281px !important;
    
      }
}
@media only screen and (min-device-width: 766px) and (max-device-width: 1025px) and (orientation: portrait){
    .doctorDesign h3{
        height: 40px!important;
      }
      .doctorDesign {
        grid-template-columns: repeat(2, 1fr);
    }
}