*,::before,::after{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html{
    font-size: 14px;
}
ul{
    list-style-type: none;
}
a{
    text-decoration: none !important;
}
img{
    display: block;
}
.wraper{
    max-width: 1250px;
    margin-left: auto;
    margin-right: auto;
}
.padding-left-right-ten-mobile{
    padding-left: 10px!important;
    padding-right: 10px!important;
}
.padding-left-right-twenty-mobile{
    padding-left: 20px!important;
    padding-right: 20px!important;
}
.padding-left-right-thirty-mobile{
    padding-left: 30px!important;
    padding-right: 30px!important;
}
.padding-left-right-fourty-mobile{
    padding-left: 40px!important;
    padding-right: 40px!important;
}
.padding-left-right-fifty-mobile{
    padding-left: 50px!important;
    padding-right: 50px!important;
}
.padding-left-right-sxity-mobile{
    padding-left: 60px!important;
    padding-right: 60px!important;
}
.padding-left-right-seventy-mobile{
    padding-left: 70px!important;
    padding-right: 70px!important;
}
.padding-left-right-eighty-mobile{
    padding-left: 80px!important;
    padding-right: 80px!important;
}
.padding-left-right-ninty-mobile{
    padding-left: 90px!important;
    padding-right: 90px!important;
}
.padding-left-right-hundred-mobile{
    padding-left: 100px!important;
    padding-right: 100px!important;
}
.padding-top-bottom-ten-mobile{
    padding-top: 10px!important;
    padding-bottom: 10px!important;
}
.padding-top-bottom-twenty-mobile{
    padding-top: 20px!important;
    padding-bottom: 20px!important;
}
.padding-top-bottom-thirty-mobile{
    padding-top: 30px!important;
    padding-bottom: 30px!important;
}
.padding-top-bottom-fourty-mobile{
    padding-top: 40px!important;
    padding-bottom: 40px!important;
}
.padding-top-bottom-fifty-mobile{
    padding-top: 50px!important;
    padding-bottom: 50px!important;
}
.padding-top-bottom-sxity-mobile{
    padding-top: 60px!important;
    padding-bottom: 60px!important;
}
.padding-top-bottom-seventy-mobile{
    padding-top: 70px!important;
    padding-bottom: 70px!important;
}
.padding-top-bottom-eighty-mobile{
    padding-top: 80px!important;
    padding-bottom: 80px!important;
}
.padding-top-bottom-ninty-mobile{
    padding-top: 90px!important;
    padding-bottom: 90px!important;
}
.padding-top-bottom-hundred-mobile{
    padding-top: 100px!important;
    padding-bottom: 100px!important;
}
/* navbar css code start */
.nav-bar-container{
    font-family: 'Times New Roman', Times, serif !important;
    background: #833ab4;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #fcb045, #fd1d1d, #833ab4);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #fcb045, #fd1d1d, #833ab4); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    width:100%;
    min-height: 60px;
    z-index: 10;
    top: -100px;
}
.nav-sticky{
    position: sticky;
    top:0px;
    left: 0px;
    z-index: 9;
    transition: all 2s ease-out;
}
.nav-center{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
} 
.nav-log-section{
    overflow: hidden;
    border: 2px white solid;
    padding: 4px 7px;
    border-radius: 5px;
    box-shadow: 0px 0px 20px white;
    -moz-box-shadow:0px 0px 20px white;
    -webkit-box-shadow:0px 0px 20px white;
}
@keyframes auto-zoom {
    0%{
        transform: scale(1.4);
        transition: all 1s linear;
    }
    10%{
        transform: scale(1.1);
        transition: all 2s linear;
    }
    20%{
        transform: scale(0.9);
        transition: all 2s linear;
    }
    30%{
        transform: scale(0.8);
        transition: all 2s linear;
    }
    40%{
        transform: scale(0.9);
        transition: all 1s linear;
    }
    50%{
        transform: scale(1.1);
        transition: all 3s linear;
    }
    60%{
        transform: scale(1.2);
        transition: all 2s linear;
    }
    70%,80%{
        transform: scale(1.3)translateX(8px);
        transition: all 2s linear;
    }
    90%,100%{
        transform: scale(1.5) translateX(5px);
        transition: all 3s linear;
    }
    
}
.nav-log-section img{
    width: 70px;
    animation: auto-zoom 2s linear 0ms infinite forwards normal;
}
.hambuger-menu img{
    width: 60px;
    cursor: pointer;
}
.nav-links-main{
    display: none;
}
.nav-sign-link{
    display: none;
}
/* navbar css code end */
/* asidebar css code start */
.asidebar-container{
    width:100%;
    min-height: 100vh;
    background: #833ab4;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #fcb045, #fd1d1d, #833ab4);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #fcb045, #fd1d1d, #833ab4); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    position: fixed;
    top:0px;
    left: -100%;
    z-index: 10;
}
.asidebar-center{
    width:100%;
}
.asidebar-header-section{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.asidebar-log-section{
    overflow: hidden;
    border: 2px white solid;
    padding: 4px 7px;
    border-radius: 5px;
    box-shadow: 0px 0px 20px white;
    -moz-box-shadow:0px 0px 20px white;
    -webkit-box-shadow:0px 0px 20px white;
}
@keyframes auto-zoom {
    0%{
        transform: scale(1.4);
        transition: all 1s linear;
    }
    10%{
        transform: scale(1.1);
        transition: all 2s linear;
    }
    20%{
        transform: scale(0.9);
        transition: all 2s linear;
    }
    30%{
        transform: scale(0.8);
        transition: all 2s linear;
    }
    40%{
        transform: scale(0.9);
        transition: all 1s linear;
    }
    50%{
        transform: scale(1.1);
        transition: all 3s linear;
    }
    60%{
        transform: scale(1.2);
        transition: all 2s linear;
    }
    70%,80%{
        transform: scale(1.3)translateX(8px);
        transition: all 2s linear;
    }
    90%,100%{
        transform: scale(1.5) translateX(5px);
        transition: all 3s linear;
    }
    
}
.asidebar-log-section img{
    width:60px;
    animation: auto-zoom 2s linear 0ms infinite forwards normal;
}
.asidebar-close-section img{
    width: 60px;
    cursor: pointer;
}
.asidebar-body-section{
    display: flex;
    flex-direction: column;
    row-gap: 40px;

}
.asidebar-nav-links-main{
    width:100%
}
.asidebar-nav-links{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    row-gap: 30px;
}
.asidebar-nav-link{
    font-size: 2.2rem;
    color: white;
    font-weight: bolder;
    letter-spacing: 0.3rem;
    padding: 5px 7px 5px 7px;
    border-radius: 5px;
}
.asidebar-nav-link:hover{
    border: 4px white solid;
    transition: all .3s linear;
}
.active{
    background-color: white;
    color: rgb(48,48,48);
}
.asidebar-social-links-main{
    width:100%;
}
.asidebar-social-links{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    row-gap: 15px;
    column-gap: 30px;
    justify-content: center;
    align-items: center;
}
.asidebar-social-link img{
    width:40px;
}
.asidebar-social-link{
    padding: 4px 7px;
    border: 4px white solid;
    border-radius: 10px;
}
.asidebar-social-link:hover{
    transform: scale(0.9);
    box-shadow: 0px 0px 20px white;
    -moz-box-shadow:0px 0px 20px white;
    -webkit-box-shadow:0px 0px 20px white;
    transition: all .3s linear;
}
.asidebar-login-section{
    margin: auto;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    column-gap: 10px;
    padding: 4px 15px;
    border: 5px white solid;
    border-radius: 15px;
}
.asidebar-login-section a{
    color: white !important;
    font-size: 1.9rem;
    font-weight: bold;
    text-align: center;
    letter-spacing: 0.2rem;
}
.asidebar-login-section img{
    width: 50px;
}
.asidebar-login-section:hover{
    transform: scale(0.9);
    box-shadow: 0px 0px 20px white;
    -moz-box-shadow:0px 0px 20px white;
    -webkit-box-shadow:0px 0px 20px white;
    transition: all .3s linear;
}
/* asidebar css code end */
/* footer css code start */
.footer-container{
    width:100%;
    background-image: url('../asserts/footer-image.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 30% 40%;
    background-clip: border-box;
    position: relative;
    z-index: 5;
}
.footer-container::before{
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top:0px;
    left:0px;
    background-color: rgba(88, 87, 87, 0.382);
    z-index: -2;
}
.footer-center{
    width:100%
}
.footer-section{
    display: flex;
    flex-direction: column;
    row-gap: 30px;
}
.footer-nav-links-main{
    width:100%;
}
.footer-nav-links{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    row-gap: 10px;
    column-gap: 9px;
    justify-content: center;
    align-items: center;
}
.footer-nav-link{
    font-size: 1.6rem;
    letter-spacing: 0.0001rem;
    color: white !important;
    padding-bottom: 5px;
    border-radius: 3px;
}
.footer-nav-link .active{
    border-bottom: 3px red solid;
}
.footer-nav-link:hover{
    border-bottom:3px red solid;
}
.active-ur{
    border-bottom:3px red solid;
}
.footer-social-links-main{
    width: 100%;
}
.footer-social-links{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    column-gap: 20px;
}
.footer-social-link{
    padding: 5px 7px;
    border: 3px white solid;
    border-radius: 5px;
}
.footer-social-link img{
    width: 30px;
}
.footer-social-link:hover{
    transform: translateY(-5px);
    box-shadow: 0px 0px 20px white;
    -moz-box-shadow:0px 0px 20px white;
    -webkit-box-shadow:0px 0px 20px white;
    transition: all .3s linear;
}
.footer-desc{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-content: center;
}
.footer-desc .desc{
    text-align: center;
    text-align-last: center;
    font-size: 1.5rem;
    line-height: 1.5;
    color: white;
}
/* footer css code end */
/* banner css code start */
.banner-page-container{
    width:100%;
    font-family: cursive;
}
.banner-page-center{
    width:100%
}
.banner-page-center .img-component{
    aspect-ratio: 650/450;
    overflow: hidden;
}
.banner-page-center .img-component img{
    width: 100%;
    height: 100%;
    object-position: center;
    object-fit: cover;
}
.banner-page-section{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    row-gap: 20px;
    background: #A770EF;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #FDB99B, #CF8BF3, #A770EF);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #FDB99B, #CF8BF3, #A770EF); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.banner-page-desc .desc{
    text-align: center;
    font-size: 1.3rem;
    font-weight: 400;
    text-transform: capitalize;
    letter-spacing: 0.1rem;
    line-height: 1.3;
    word-spacing: 0.1rem;
    color: white;
}
.help-button{
    border-radius: 5px;
    outline-offset: 5px;
    outline: 3px white solid;
    background: #1c92d2;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #f2fcfe, #1c92d2);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #f2fcfe, #1c92d2); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    cursor: pointer;
}
.help-button:active{
    transform: scale(0.9);
    transition: all 3s linear;
}
.help-button a{
    text-align: center;
    font-size: 1.2rem;
    color: rgb(48, 48, 48);
}
/* banner css code end */
/* our insfrastructure   css code start */
.infrastructure-container{
    width:100%;
}
.infrastructure-center{
    width:100%
}
.infrastructure-section{
    width:100%;
    margin-top: 40px;
}
.hospital-blue-print{
    width:100%;
}
.hospital-blue-print .img-component{
    aspect-ratio: 650/520;
    overflow: hidden;
    margin-bottom: 20px;
    border-radius: 5px;
}
.hospital-blue-print .img-component img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.hospital-infromation{
    width:100%
}
.hospital-details{
    font-size: 1.4rem;
    line-height: 1.3;
    text-align: left;
    font-family: 'Roboto Flex', sans-serif;
}
.secondary-bttn{
    cursor: pointer;
    display: inline-block;
    margin-top: 13px;
    padding: 10px 20px;
    border-radius: 10px;
    background-color: #5BC0F8;
}
.secondary-bttn a{
    color: white;
    font-size: 1.5rem;
    letter-spacing: 0.2rem;
}
.secondary-bttn:active{
    transform: scale(0.8);
    transition: all .3s linear;
}
.secondary-bttn:hover{
    transform: translateX(10px);
    transition: all .3s linear;
    border-radius: 10px;
}
/* our insfrastructure   css code end */
/* our facilities css code start */
.facilities-container{
    width:100%;
    margin-top: 50px;
    margin-bottom: 80px;
}
.facilities-center{
    width: 100%;background-color: #393E46;
}
.section-heading{
    width:100%;
}
.section-title{
    text-align: center;
    font-size: 2.1rem;
    letter-spacing: 0.2rem;
    font-weight: 800;
    color: #C58940;
}
.underline{
    margin: auto;
    margin-top: 16px;
    width: 30%;
    height: 8px;
    background-color: #E5BA73;
    border-radius: 5px;
}
.facilities-section{
    background-color: #393E46;
    width:100%;
    margin-top: 30px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    column-gap: 10px;
    z-index: 3;
    overflow: hidden;
    scroll-behavior: smooth;

}
.facilities-section::-webkit-scrollbar{
    width: 0px;
    height: 0px;
}
.facilities-section::-webkit-scrollbar-track{
    background-color: transparent;
}
.each-facility{
    width: 400px;
    height: 290px;
    flex-shrink: 0;
    border-radius: 10px;
    border: 5px #393E46 solid;
    background-color: #FFFFFF;
}
.each-facility .img-component{
    aspect-ratio: 650/350;
    overflow: hidden;
}
.each-facility .img-component img{
    width:100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.facility-desc{
    width:100%;
    margin-top: 15px;
}
.facility-desc .desc{
    text-align: center;
    font-size: 1.9rem;
    letter-spacing: 0.3rem;
    font-weight: 600;
}
.each-facility:hover{
    transform: translateX(-15px);
    -webkit-box-shadow: 0px 3px 14px 8px rgba(252,252,252,1);
    -moz-box-shadow: 0px 3px 14px 8px rgba(252,252,252,1);
    box-shadow: 0px 3px 14px 8px rgba(252,252,252,1);
    transition: all .3s linear;
}
.each-facility .img-component img:hover{
    transform: scale(1.1);
    transition: all .3s linear;
}
/* grid layout */
.three-column-layout{
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 30px;
    column-gap: 50px;
}
/* our facilities css code end*/
/* quick geasture css code start */
.quick-geasture-container{
    width:100%;
}
.quick-geasture-center{
    width:100%
}
.quick-geasture-section{
    width: 100%;
    margin-top: 15px;
    margin-bottom: 20px;
}
.each-geasture{
    width:100%;
    
}
.each-geasture:nth-child(1){
    border-right: 3px black solid;
    border-bottom: 3px black solid;
}
.each-geasture:nth-child(3){
    border-right: 3px black solid;
}

.each-geasture:nth-child(2){
    border-bottom: 3px black solid;
}
.geasture-icon a{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    row-gap: 15px;
}
.geasture-icon img{
    width: 50px;
}
.geasture-desc{
    font-size: 1.6rem;
    text-align: center;
}
/* two column grid layout */
.two-column-layout{
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-content: center;
    align-items: center;
    
}
/* quick geasture css code end */
/* our branches css code start */
.hospital-branch-container{
    width:100%;
}
.hospital-branch-center{
    width: 100%;
}
.hospital-branch-section{
    width:100%;
    margin-top: 30px;
    margin-bottom: 40px;
}
.each-branch{
    border: 5px black solid;
    border-radius: 10px;
}
.branch-main-component{
    width: 100%;
    position: relative;
}
.branch-img-component{
    aspect-ratio: 650/450;
    overflow: hidden;
}
.branch-img-component img{
    width:100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 5px;
}
.branch-img-component img:hover{
    transform: scale(1.2);
    transition: all .3s linear;
}
.branch-location{
    cursor: pointer;
    background-color: white;
    position: absolute;
    bottom: -20px;
    left:50%;
    transform: translateX(-50%);
    border-radius: 35px;
    padding: 5px 9px;
    border: 3px black solid;
}
.branch-location img{
    display: inline-block;
    width: 50px;
}
.branch-location img:hover{
    transform: rotate(60deg);
    transition: all .3s linear;
}
.branch-details{
    width: 100%;
}
.branch-title{
    text-align: center;
    font-size: 2.1rem;
    letter-spacing: 0.1rem;
}
.branch-address{
    margin-top: 10px;
    text-align: center;
    font-size: 1.2rem;
    margin-bottom: 10px;
}
.branch-desc{
    font-size: 1.6rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;  
    overflow: hidden;
}
.each-branch:hover{
    transform: translateY(-5px);
    -webkit-box-shadow: 0px 3px 14px 8px rgba(18,17,18,1);
    -moz-box-shadow: 0px 3px 14px 8px rgba(18,17,18,1);
    box-shadow: 0px 3px 14px 8px rgba(18,17,18,1);
    transition: all .3s linear;
}
/* our branches css code end */
/* our specialities css code start */
.specialities-container{
    width:100%;
}
.specialities-center{
    width:100%;
}
/* four column layout grid */
.four-column-layout{
    display: grid;
    grid-template-columns: 1fr 1fr;
    row-gap: 15px;
    column-gap: 10px;
}
.each-specialities{
    width:100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 2px black solid;
    border-radius: 5px;
}
.specialities-info{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    row-gap: 20px;
}
.specialities-info img{
    width: 50px;
}
.specialities-desc{
    text-align: center;
    font-size: 1.2rem;
    letter-spacing: 0.1rem;
}
.each-specialities:hover{
    transform: translateY(-5px);
    box-shadow: 1px 17px 12px -5px rgba(0,0,0,0.75);
    -webkit-box-shadow: 1px 17px 12px -5px rgba(0,0,0,0.75);
    -moz-box-shadow: 1px 17px 12px -5px rgba(0,0,0,0.75);
    background-color: brown;
    color: white;
    transition: all .3s linear;
}
.specialities-bttn{
    cursor: pointer;
    padding: 15px 13px;
    margin: auto;
    width: 150px;
    background-color:#5BC0F8;
    border-radius: 10px;
}
.specialities-bttn a{
    text-align: center;
    font-size: 1.3rem;
    color: white;
    letter-spacing: 0.2rem;
}
.specialities-bttn:active{
    transform: scale(0.9);
    transition: all .3s linear;
}
/* our specialities css code end */
/* our moto css code start */
.moto-container{
    width:100%;
    margin-top: 40px;
    margin-bottom: 20px;
    background-color: brown;
}
.moto-center{
    width:100%;
}
.moto-section{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
/* one  column layout grid  */
.one-column-layout{
    display: grid;
    grid-template-columns: 1fr;
}
.each-moto{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    row-gap: 20px;
    border-radius: 5px;

}
.each-moto:nth-child(2){
    border-top: 3px black solid;;
}
.moto-title{
    color: white;
    font-size: 1.9rem;
    letter-spacing: 0.3rem;
}
.moto-log img{
    width: 50px;
}
.moto-desc{
    color: white;
    text-align: center;
    font-size: 1.4rem;
    line-height: 1.3;
}
/* our moto css code end */
/* contact us css code start */
.contact-container{
    width:100%;
    margin-top: 30px;
    margin-bottom: 40px;
}
.contact-center{
    width: 100%;
}
.title-desc{
    text-align: center;
    font-size: 1.5rem;
    font-weight: 200;
}
.contact-section{
 width: 100%;
}
/* contact grid three column layout */
.contact-three-column-layout{
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 30px;
}
.each-contact-info{
    display: flex;
    flex-direction: column;
    row-gap: 20px;
    border: 5px sienna solid;
    border-radius: 10px;
}
.contact-header{
    display: flex;
    flex-direction: row;
    align-items: center;
    column-gap: 50px;
}
.contact-header img{
    width: 45px;
}
.contact-header .heading{
    text-align: center;
    font-size: 1.5rem;
}
.contact-info .info{
    font-size: 1.3rem;
    line-height: 1.4;
}
.each-contact-info:hover{
    border:5px brown solid;
    box-shadow: 1px 17px 12px -5px rgba(0,0,0,0.75);
    -webkit-box-shadow: 1px 17px 12px -5px rgba(0,0,0,0.75);
    -moz-box-shadow: 1px 17px 12px -5px rgba(0,0,0,0.75);
    background-color: brown;
    color: white;
    transform: translateY(-5px);
    transition: all .3s linear;
}
/* contact us css code end */
/* testimonial css code start */
.testimonial-container{
    width: 100%;
    background-color: #393E46;
    margin-top: 50px;
    margin-bottom: 50px;
}
.testimonial-center{
    width:100%
}
.testimonial-section{
    width: 100%;
    display: flex!important;
    flex-direction: row;
    flex-wrap: nowrap;
    column-gap: 20px;
    z-index: 4;
    overflow:hidden;
}
.testimonial-section::-webkit-scrollbar{
    width: 0px;
}
.width-sized{
    width: 20%;
}
.each-testimonial{
    background-color: white;
    width: 400px;
    height: 450px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
}
.review-info .review-desc{
    text-align: justify;
    font-size: 1.5rem;
    line-height: 1.5;
    white-space: normal;
    word-spacing: 0.2rem;
}
.patient-name{
    padding-top: 20px;
    font-size: 1.7rem;
    letter-spacing: 0.2rem;
}
.person-title{
    padding-top: 2px;
    font-size: 1.2rem;
    letter-spacing: 0.1rem;
}
.each-testimonial:hover{
    -webkit-box-shadow: 2px 2px 58px -16px rgba(255,252,255,1);
    -moz-box-shadow: 2px 2px 58px -16px rgba(255,252,255,1);
    box-shadow: 2px 2px 58px -16px rgba(255,252,255,1);
    transition: all .3s linear;
}
/* testimonial css code end */
/* about us css code start */
.about-us-container{
    width:100%;
}
.about-us-center{
    width:100%;
}
.about-us-section{
    width:100%;
}
/* about-us-one-column layout grid */
.about-us-one-column-layout{
    display: grid;
    grid-template-columns: 1fr;
}
.each-about-us{
    width:100%;
}
.about-us-component{
    position: relative;
}
.about-us-img-component{
    aspect-ratio: 450/250;
    overflow: hidden;
    margin-bottom: 20px;
}
.about-us-img-component img{
    width:100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.sliders-arrow-section{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    column-gap: 20px;
}
.sliders-arrow-section img{
    display: inline;
    width:30px;
    border: 2px black solid;
}
.sliders-arrow-section img:active{
    transform: scale(0.8);
    transition: all 3s linear;
}
.about-us-info{
    width: 100%;
    display: flex;
    flex-direction: column;
    row-gap: 40px;
}
.about-us-desc{
    text-align: justify;
    font-size: 1.3rem;
    line-height: 1.4;
    white-space: normal;
    font-family: 'Roboto Flex', sans-serif;
}
/* about us css code end */
/* our doctors css code start */
.doctors-container{
    width: 100%;
}
.doctors-center{
    width:100%;
}
.doctors-section{
    width:100%;
}
.each-doctor-profile{
    cursor: pointer;
    border: 5px #146C94 solid;
    display: flex;
    flex-direction: column;
    row-gap: 20px;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
}
.doctor-img-component{
    aspect-ratio: 450/350;
    overflow: hidden;
}
.doctor-img-component img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.doctor-details{
    width:100%;
    display: flex;
    flex-direction: column;
    row-gap: 10px;
}
.doctor-name{
    text-align: center;
    font-size: 1.4rem;
    letter-spacing: 0.2rem;
    border-bottom:4px mediumpurple dotted ;
    padding-bottom: 5px;
}
.doctor-title{
    text-align: center;
    font-size: 1.2rem;
    letter-spacing: 0.2rem;
}
.doctor-desc{
    font-size: 1.3rem;
    text-align: justify;
    white-space: normal;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.each-doctor-profile:hover{
    transform: translateY(-10px);
    box-shadow: 2px 10px 29px 7px rgba(0,0,0,0.75);
    -webkit-box-shadow: 2px 10px 29px 7px rgba(0,0,0,0.75);
    -moz-box-shadow: 2px 10px 29px 7px rgba(0,0,0,0.75);
    transition: all .3s linear;
}
/* our doctors css code end */
/* login panel css code start */
.border-color{
    border-radius: 5px;
    border-color:white !important ;
}
.width-up{
    width: 60px !important;
}
.login-panel-container{
    width: 100%;
}
.login-panel-center{
    width:100%;
}
.each-login{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    row-gap: 50px;
    border: 20px black double;
    border-radius: 10px;
}
.login-img-component{
    aspect-ratio: 550/450;
    overflow: hidden;
}
.login-img-component img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.login-secondary-bttn{
    border-radius: 5px;
    cursor: pointer;
    padding: 10px 40px;
    border: 2px black  solid;
    background-color: cornflowerblue;
}
.login-secondary-bttn a{
    color: white;
    text-align: center;
    font-size: 1.5rem;
    letter-spacing: 0.1rem;
}
/* login panel css code end */
/* admin page login css code  start*/
.admin-login-page-container{
    width: 100%;
    margin-top: 50px;
    margin-bottom: 60px;
}
.admin-login-page-center{
    display: flex;
    flex-direction: column;
    row-gap: 20px;
    justify-content: center;
    align-items: center;
}
.page-tile-section{
    width: 100%;
}
.title-wish{
    text-align: center;
    font-size: 1.5rem;
    margin-bottom: 10px;
    letter-spacing: 0.1rem;
    white-space: normal;
    font-weight: 300;
}
.wish-desc{
    text-align: center;
    font-size: 1.1rem;
    font-weight: 300;
    padding-bottom: 10px;
    line-height: 1.6;
    border-bottom:2px black solid ;
}
.login-info-show-section{
    width: 100%;
}
.login-desc{
    text-align: center;
    font-size: 1.1rem;
    font-weight: 300;
    line-height: 1.6;
}
.sigin-bttn-section{
    margin-top: 20px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    column-gap: 20px;
}
.least-primary-bttn{
    cursor: pointer;
    padding: 10px 20px;
    background-color: cornflowerblue;
    border-radius: 10px;
}
.least-primary-bttn a{
    text-align: center;
    font-size: 1.2rem;
    letter-spacing: 0.1rem;
    color: white;
}
.least-primary-bttn:active{
    transform: scale(0.9);
    transition: all .3s linear;
}
/* admin page login css code  start */
/* feedback css code start */
.feedback-container{
    margin-top: 50px;
    width: 100%;
    margin-bottom: 90px;
}
.feedback-center{
    width:100%;
}
.feedback-section{
    margin-top: 60px;
    width: 100%;
    margin-bottom: 70px;
}
.each-feedback{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    row-gap: 40px;
}
.each-feedback .img-component{
    aspect-ratio: 550/350;
    overflow: hidden;
}
.each-feedback .img-component img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 5px;
}
.feedback-section{
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 30px;
}
.feedback-info{
    display: flex;
    flex-direction: column;
    row-gap: 50px;
}
.text-input-enter{
    width: 100%;
    border: none;
    outline: 2px black solid;
    outline-offset: 5px;
    border-radius: 2px;
    text-transform: capitalize;
    padding-top: 15px;
    padding-bottom: 15px;
    padding-left: 10px;
}
.text-input-enter::placeholder{
    font-size: 1.5rem;
    text-transform: capitalize;
}
.text-input-enter:focus{
    outline-color:cornflowerblue ;
}
.comment-box{
    width: 100%;
    resize: vertical;
    border: none;
    outline: 2px black solid;
    outline-offset: 5px;
    border-radius: 2px;
    padding-left: 10px;
    padding-top: 15px;
}
.comment-box::placeholder{
    font-size: 1.5rem;
}
.comment-box:focus{
    outline-color:cornflowerblue ;
}
.contact-submit{
    width: 100%;
    text-align: center;
    font-size: 1.9rem;
    letter-spacing: 0.2rem;
    text-transform: capitalize;
    color: white;
    background-color: cornflowerblue;
    border: none;
    border-radius: 9px;
    cursor: pointer;
}
.contact-submit:active{
    transform: scale(0.9);
    transition: all 3s linear;
}
/* feedback css code end */
@media screen and (min-width:712px) {
    /* grid layout */
    .three-column-layout{
        display: grid;
        grid-template-columns: 1fr;
        row-gap: 40px;
        column-gap: 50px;
    }
    .each-facility{
        width: 600px;
        height: 390px;
        flex-shrink: 0;
    }
    .section-title{
        font-size: 2.5rem;
    }
    .underline{
        width: 20%;
    }
    .facility-desc .desc{
        font-size: 2.3rem;
    }
    .branch-img-component{
        aspect-ratio: 560/350;
    }
    /* four column layout grid */
    .four-column-layout{
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        row-gap: 15px;
        column-gap: 10px;
    }
    .specialities-bttn{
        width: 150px;
    }
    .specialities-bttn a{
        text-align: center;
        font-size: 1.5rem;
    }
    /* contact grid three column layout */
    .contact-three-column-layout{
        display: grid;
        grid-template-columns: repeat(3,1fr);
        row-gap: 30px;
        column-gap: 20px;
    }
    /* about us css code */
    .about-us-img-component{
        aspect-ratio: 750/450;
    }
    .sliders-arrow-section img{
        cursor: pointer;
        width: 50px;
    }
    /* login panel css code */
    .login-img-component{
        aspect-ratio: 750/650;
    }
    .login-secondary-bttn a{
        font-size: 1.9rem;
    }
}
@media screen  and (min-width:992px){
    .padding-left-right-ten-desktop{
        padding-left: 10px!important;
        padding-right: 10px!important;
    }
    .padding-left-right-twenty-desktop{
        padding-left: 20px!important;
        padding-right: 20px!important;
    }
    .padding-left-right-thirty-desktop{
        padding-left: 30px!important;
        padding-right: 30px!important;
    }
    .padding-left-right-fourty-desktop{
        padding-left: 40px!important;
        padding-right: 40px!important;
    }
    .padding-left-right-fifty-desktop{
        padding-left: 50px!important;
        padding-right: 50px!important;
    }
    .padding-left-right-sxity-desktop{
        padding-left: 60px!important;
        padding-right: 60px!important;
    }
    .padding-left-right-seventy-desktop{
        padding-left: 70px!important;
        padding-right: 70px!important;
    }
    .padding-left-right-eighty-desktop{
        padding-left: 80px!important;
        padding-right: 80px!important;
    }
    .padding-left-right-ninty-desktop{
        padding-left: 90px!important;
        padding-right: 90px!important;
    }
    .padding-left-right-hundred-desktop{
        padding-left: 100px!important;
        padding-right: 100px!important;
    }
    .padding-top-bottom-ten-desktop{
        padding-top: 10px!important;
        padding-bottom: 10px!important;
    }
    .padding-top-bottom-twenty-desktop{
        padding-top: 20px!important;
        padding-bottom: 20px!important;
    }
    .padding-top-bottom-thirty-desktop{
        padding-top: 30px!important;
        padding-bottom: 30px!important;
    }
    .padding-top-bottom-fourty-desktop{
        padding-top: 40px!important;
        padding-bottom: 40px!important;
    }
    .padding-top-bottom-fifty-desktop{
        padding-top: 50px!important;
        padding-bottom: 50px!important;
    }
    .padding-top-bottom-sxity-desktop{
        padding-top: 60px!important;
        padding-bottom: 60px!important;
    }
    .padding-top-bottom-seventy-desktop{
        padding-top: 70px!important;
        padding-bottom: 70px!important;
    }
    .padding-top-bottom-eighty-desktop{
        padding-top: 80px!important;
        padding-bottom: 80px!important;
    }
    .padding-top-bottom-ninty-desktop{
        padding-top: 90px!important;
        padding-bottom: 90px!important;
    }
    .padding-top-bottom-hundred-desktop{
        padding-top: 100px!important;
        padding-bottom: 100px!important;
    }
    /* nav bar css code */
    .hambuger-menu{
        display: none;
    }
    .nav-bar-container{
        width:100%;
        min-height: 95px;
    }
    .nav-center{
        display: flex;
        flex-direction: row;
        justify-content:space-between;
        align-items: center;
    }
    .nav-log-section{
        width: 100px;
        flex-shrink: 3;
    }
    .nav-log-section img{
        width: 85px;
    }
    .nav-links-main{
        display: block;
    }
    .nav-links{
        display: flex;
        flex-direction: row;
        column-gap: 23px;
    }
    .nav-link{
        font-size: 2.2rem;
        color: white ;
        font-weight: bolder;
        letter-spacing: 0.3rem;
        padding: 5px 7px 5px 7px;
        border-radius: 5px;
    }
    .nav-link:hover{
        background-color: white;
        color: rgb(48, 48, 48);
        transition: all .3s linear;
    }
    .active{
        background-color: white;
        color: rgb(48,48,48);
    }
    .nav-sign-link{
        border: 3px white solid;
        display:flex ;
        padding: 5px 8px ;
        border-radius: 5px ;
        cursor: pointer ;
    }
    .nav-sign-link a{
        color: white ;
        font-size: 1.9rem ;
        font-weight: bold ;
        text-align: center;
        letter-spacing: 0.2rem ;
    }
    .nav-sign-link img{
        width: 40px ;
    }
    .nav-sign-link:hover{
        transform: translateX(5px);
        box-shadow: 0px 0px 20px white;
        transition: all 1s linear;
    }
    /* aside bar */
    .asidebar-container{
        display: none;
    }
    /* Footer css code */
    .footer-container{
        background-position: 40% 30%;
    }
    .footer-nav-links{
        display: flex;
        column-gap: 30px;
    }
    .footer-nav-link{
        font-size: 2.3rem;
    }
    .footer-social-links{
        display: flex;
        flex-direction: row;
        column-gap: 30px;
    }
    .footer-social-link img{
        width: 45px;
    }
    .footer-desc .desc{
        font-size: 2.3rem;
    }
    /* banner css code */
    .banner-page-center{
        position: relative;
    }
    .banner-page-center .img-component{
        aspect-ratio: 1050/490;
        background-color: #CF8BF3;
    }
    .banner-page-section{
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0px;
        left: 0px;
        overflow: hidden;
        background: transparent;
    }
    .banner-page-desc .desc{
        font-size: 2.3rem;
        line-height: 1.6;
    }
    .banner-page-desc{
        position: relative;
        top:25%;
        transform: translateY(-25%);
    }
    .help-button{
        position: relative;
        top:25%;
        transform: translateY(-25%);
    }
    .help-button a{
        text-align: center;
        font-size: 2.9rem;
    }
    .help-button:hover{
        -webkit-box-shadow: 10px 6px 64px 25px rgba(219, 214, 214, 0.55);
        -moz-box-shadow: 10px 6px 64px 25px rgba(219, 214, 214, 0.55);
        box-shadow: 10px 6px 64px 25px rgba(219, 214, 214, 0.55);

    }
    /* our facilites css code */
    /* grid layout */
    .three-column-layout{
        display: grid;
        grid-template-columns: 1fr 1fr 1fr ;
        row-gap: 40px;
        column-gap: 30px;
    }
    .each-facility{
        width: 600px;
        height: 390px;
        flex-shrink: 0;
    }
    .section-title{
        font-size: 2.9rem;
    }
    .underline{
        width: 10%;
    }
    .facilities-section{
        margin-top: 50px;
    }
    .facility-desc .desc{
        font-size: 2.3rem;
    }
    /* infrastructure css code */
    .hospital-blue-print .img-component{
        aspect-ratio:520/210;
    }
    /* quick-geasture css code */
    /* two column grid layout */
    .two-column-layout{
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        justify-content: center;
        align-items: center;
        
    }
    .each-geasture{
        border-bottom:3px black solid ;
    }
    .each-geasture:nth-child(2){
        border-right: 3px black  solid;
    }
    .geasture-desc{
        font-size: 2.2rem;
    }
    /* four column layout grid */
    .four-column-layout{
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        row-gap: 15px;
        column-gap: 10px;
    }
    .specialities-bttn{
        width:150px;
    }
    .specialities-bttn:hover{
        transform: translateX(10px);
        transition: all .3s linear;
    }
    /* our moto css code */
    /* one  column layout grid  */
    .one-column-layout{
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 20px;
        justify-content: center;
        align-items: start;
    }
    .each-moto{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .each-moto:nth-child(1){
        padding-right: 20px;
    }
    .each-moto:nth-child(2){
        border-top:none ;
        border-left: 5px black solid;
        padding-left: 20px;
    }
    .moto-log img{
        width: 90px;
    }
    .moto-title{
        font-size: 2.5rem;
    }
    .moto-desc{
        font-size: 1.9rem;
    }
    /* contact us css code */
    /* contact grid three column layout */
    .contact-three-column-layout{
        display: grid;
        grid-template-columns: repeat(3,1fr);
        row-gap: 30px;
        column-gap: 30px;
    }
    .contact-header .heading{
        font-size: 1.6rem;
        letter-spacing: 0.2rem;
    }
    .contact-header img{
        width: 55px;
    }
    .width-sized{
        width: 10%;
    }
    /* about us css code */
    .about-us-one-column-layout{
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 40px;
    }
    .about-us-img-component{
        aspect-ratio: 850/450;
    }
    .sliders-arrow-section img{
        width: 60px;
    }
    .sliders-arrow-section img:hover{
        border-color: crimson;
    }
    .about-us-desc{
        font-size: 1.7rem;
        line-height: 1.7;
    }
    /* admin login page css code */
    .title-wish{
        font-size: 2.9rem;
    }
    .wish-desc{
        font-size: 1.6rem;
    }
    .login-desc{
        font-size: 1.4rem;
    }
    .least-primary-bttn{
        padding: 15px 25px;
    }
    .least-primary-bttn a{
        font-size: 1.5rem;
    }
    /* feedback css code */
    .each-feedback{
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-content: center;
        row-gap: 40px;
        column-gap: 30px;
    }
    .each-feedback .img-component{
        aspect-ratio: 850/650;
        overflow: hidden;
    }
    .feedback-section{
        display: grid;
        grid-template-columns: 1fr 1fr;
        row-gap: 30px;
        column-gap: 20px;
        justify-content: baseline;
        align-items: center;
    }
}
@media screen and (min-width:1300px) {
    /* banner page css code */
    .banner-page-desc .desc{
        font-size: 3rem;
    }
    /* four column layout grid */
    .four-column-layout{
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        row-gap: 25px;
        column-gap: 20px;
    }
    /* infrastructure css code */
    .hospital-blue-print{
        display: flex;
        flex-direction: row;
        column-gap: 40px;
    }
    .hospital-blue-print .img-component{
        aspect-ratio:520/210;
    }
}