*{  padding:0;

    margin:0;

    box-sizing: border-box;

}



.border{

    border:1px solid black;

}

.d-none{

    display: none;

}

.col-4{

    width: 40%;

}

.col-5{

    width:50%;

}

.col-6{

    width: 60%;

}

.py-50{

    padding:50px 0px;

}

.w-100{

    width:100%;

}

.font{

    

font-family: 'Poppins', sans-serif;



}



body{

    font-family: 'Amatic SC', cursive;

font-family: 'Bad Script', cursive;

font-family: 'Montserrat', sans-serif;

font-family: 'Poppins', sans-serif;

font-family: 'PT Sans', sans-serif;

font-family: 'Quicksand', sans-serif;

font-family: 'Radio Canada', sans-serif;

font-family: 'Raleway', sans-serif;





}



html{

    scroll-behavior: smooth;

}

.container{

    width:95%;

    margin:0 auto;

}

.lblue{

    color:yellowgreen;

}

.bgblue{

    background-color:#56bbf1;

}

.px-1{

    padding:2px 0px;

}



.p-absolute{

    position:absolute;

    top: -1px;

    right: 0px;

}

.p-relative{

    position:relative;

}

.flex-row{

    display: flex;

    flex-wrap: nowrap;

    justify-content: center;

    align-items: center;

}

.address{

    width:50%;

}

.address span{

    padding:0px 5px;

    color:white;

}

.social-icons{

    width:50%;

    text-align: right;

    

}

#header-flex-row{

    padding:10px 0px;

}

.social-icons a{

    padding:0px 15px;

    color:white;

    text-decoration: none;

}

.header{

    background-color: #56bbf1;

}

.logo{

    width:15%;

    text-align: center;

}

.logo img{

    width: 48%;

}

.navii{

    width:70%;

}



.appointment{

    width:15%;

}

.nav-list li{

    list-style-type: none;

    display: inline-block;

    padding:0px 18px;

}

.nav-list li a{

    text-decoration: none;

    color:gray;

}

.nav-list li a::after{

    content:"";

    width: 0px;

    height: 3px;

    position: absolute;

    display: block;

    background-color: #56bbf1;

    margin-top: 5px;

    border-radius: 13px;

    transition: 0.9s;

}

.nav-list li a:hover::after{

    width: 69px;

}





.appoint{

    transition: 1s;

}

.appoint:hover{

    background-color: #40a1d5;

    transition: 1s;

}

.navii{

    text-align: right;

}

.appointment{

    text-align: center;

}

.appointment a{

    padding: 10px 40px;

    background-color: #56bbf1;

    display: inline-block;

    border-radius: 5px;

    text-decoration: none;

    color:white;

}

.navigate{

    background-color: whitesmoke;

    transition: 0.9s ;

}

.dropdown li{

    display: block;

    padding: 12px 130px 12px 26px;

    cursor: pointer;

    transition: 0.9s;



}

.dropdown li:hover {

    background-color:#56bbf1;

    transition: 1s;

}

.dropdown li i{

    font-weight: 900;

    margin: 0px 5px 0px 0px;

    font-size: 20px;

    color: #56bbf1;

    transition:0.9s;

}

.dropdown2 li i{

    font-weight: 900;

    margin: 0px 5px 0px 0px;

    font-size: 20px;

    color: #56bbf1;

    transition:0.9s;

}



.dropdown li:hover i{

    color:white;    

    transition:0.9s;

}

.dropdown li a{

    position: relative;

    left: 0px;

    transition: 1s;

}

.dropdown li:hover a{

    color:white;

    transition: 0.9s;

    position: relative;

    left: 7px;

}

.dropdown{

    position: absolute;

    top: 47px;

    background-color: azure;

    border-top: 2px solid #56bbf1;

    display: none;

    z-index: 9;

    right: -218px;

    left: 0px;

    text-align: left;

    border-radius: 0px 0px 5px 5px;

    box-shadow: 0px 0px 3px 0px grey;

    

}



.dropdown2{

    position: absolute;

    top: 47px;

    background-color: azure;

    border-top: 2px solid #56bbf1;

    z-index: 9;

    display: none;

    right: -218px;

    left: 0px;

    text-align: left;

    border-radius: 0px 0px 5px 5px;

    box-shadow: 0px 0px 3px 0px grey;

}



.dropdown2 li{

    display: block;

    padding: 12px 130px 12px 26px;

    cursor: pointer;

    transition: 0.9s;

}

.dropdown2 li:hover a{

    color:white;

    transition: 0.9s;

    position: relative;

    left: 7px;

}

.dropdown2 li:hover i{

    color:white;    

    transition:0.9s;

}

.dropdown2 li:hover {

    background-color:#56bbf1;

    transition: 1s;

}

.dropdown2 li a{

    position: relative;

    left: 0px;

    transition: 1s;

}

.abt{

    flex:1;

    margin:0px 35px;

}

.abt img{

    width: 35%;

    margin: 10px 0px;

}

.abt p{

    line-height: 28px;

    text-align: justify;

}

.foot li{

    line-height: 37px;

    list-style-type: none;

    text-align: left;

}

.foot li a{

    color:black;

    text-decoration: none;

}

.abt h2{

    text-align: left;

    color: white;

    word-spacing: 5px;

    letter-spacing: 3px;

}

.footerr{

    background-color:#56bbf1;

    

}

.pp{width:50%;}

.ss{width:50%;}



.social li{

    list-style-type: none;

    display: inline-block;

    padding:0px 15px;

    

}

.social{

    text-align: right;

}

.social li a{

    color:white;

    text-decoration: none;

}

.bg{background-color:#186893;

    padding: 20px 0px;

}

.p-10{

    padding: 0px 20px;



}

.py-20{

    padding: 20px 0px;

}

.ss p{

    color:white;

    cursor:pointer;

}

.p10{

    padding:10px;

}



.w-50{

    width:50%;

}

.about-img img{

    width:100%;

}

.slide img{

    width:100%;

}

.slick-next{

    background: #0000008a!important;    

    width: 50px!important;

    height: 50px!important;

    color: #0000003b!important;

    border-radius:30px!important;

    right:15px!important;

}

.slick-prev{

    background: #0000008a!important;    

    width: 50px!important;

    height: 50px!important;

    color: #0000003b!important;

    border-radius:30px!important;    

    z-index: 1!important;

    left: 15px!important;



}

.slick-dots li button{

    background: #000000fa!important;

    width: 15px!important;

    height: 15px!important;

    border-radius: 15px!important;

}

.sticky{

    position: fixed;

    top:0;

    width:100%;

    z-index: 9;

    box-shadow: 0px 0px 7px 3px grey;

    transition: 0.9s;

}

.img-column img{

    width:100%;

    border-radius: 10px;

    box-shadow: 2px 2px 6px 1px grey;

}



.about-col h1{

    font-size: 46px;

    line-height: 53px;

    letter-spacing: 1px;

    color:#56bbf1;

    margin: 23px 0px;

}

.about-col{

    margin: 0px 10px;

    padding: 0px 40px;

}

.about-col{

    line-height: 35px;

    color: gray;

    font-weight: 500;

}

.about-col p span{

    color: #56bbf1;

    font-size: 27px;

    font-weight: bold;

}

.slick-dots{

    display: none!important;

}

.flex-roww{

    display: flex;

}

.ser{

    text-align: center;

    font-size: 40px;

    color:#56bbf1;

}

.ser-p{

    margin: 20px 200px;

    line-height: 29px;

    color: gray;

}

.card img{

    width:50%;

    text-align: center;

    position: relative;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -162%);

}

.card{

    width: 320px!important;

    height: 75vh!important;

    text-align: center;

    padding: 20px;

    margin: 0px 25px;

    width: 398px;

    background-color: aliceblue;

    border-radius: 15px;

    box-shadow: 2px 2px 6px 1px grey;

    cursor:pointer;

    position:relative;

    

}

.card h1{

    margin: 10px 0px;

}

.card p{

    text-align: justify;

    line-height: 30px;

}

.card a{

    display: inline-block;

    margin: 20px 0px;

    padding: 12px 90px;

    border-radius: 5px;

    background-color:#186893;

    text-decoration: none;

    color: snow;

    position: absolute;

    left: 27px;

    bottom: 18px;

    right: 27px;



}

.autoplay .slick-list{

    padding:10px 0px!important;

}



.card2{

    width: 90%;

       text-align: center;

       background: aliceblue;

       border-radius: 10px;

       display: inline-block;

       margin: 20px 0px;

}

.card2 img{

    width: 50%;

}

.card2 a{

    display: block;

    text-anchor: none;

    text-decoration: none;

    color: white;

    background-color: #186893;

    padding: 10px 0px;

    border-radius:0px 0px 10px 10px;

    font-size: 25px;



}

.card2-col{

    display: none;

    text-align: center;

}

.d-flex{

    display: flex;

}

.align-center{

    align-items: center;

}

.justify-center{

    justify-content: center;

}

.hospital{

    width:50%;

    background-color:#56bbf1;

    padding: 30px;

    height:406px;

}

.image-column{

    width:50%;

}

.image-column img{

    width:100%;

    height: 65vh;

}

.ser{

    padding:20px 0px;

}

.hospital h1{

    color: white;

    font-size: 40px;

    padding: 15px 0px;

}

.hoss li a{

    text-decoration: none;

    color:white;

 }

 .hoss li{

    line-height: 40px;

    list-style-type: circle;

    color: white;

 }

 .hospital>a{

    border: 2px solid white;

    display: inline-block;

    padding: 10px 25px;

    color: white;

    border-radius: 5px;

    text-decoration: none;

    transition: 0.9s;

    margin-top: 30px;



 }

 .hospital>a:hover{

    background-color: #186893;

    border: 2px solid #186893;

    transition: 0.9s;

 }

 .dd img{

    height: 54vh;

 }

 .doc-img{

    width:50%;



 }

 .doc-img img{

    width:100%;

 }

 .doc-col{

    padding:20px;



 }

 .doc-col h1{

    font-size: 36px;

    text-align: center;

    color:#40a1d5;

 }

 .dr li{

    line-height: 40px;

    font-size: 20px;

    list-style-type: none;

    margin: 10px 0px;

    

 }

.dr-row{

    box-shadow: 2px 2px 4px 1px grey;

    border-radius: 0px;

    padding: 20px 20px;

    margin: 60px 0px;

    background-color: aliceblue;

}

.locates{

    padding: 20px;

    box-shadow: 2px 2px 10px 0px lightgrey;

    margin: 50px 0px;

}

.locate-map h1{

    color: #40a1d5;

    font-size: 30px;

    padding: 10px 0px;

}

.locate-map{

    padding:15px;}

.get{

    padding:15px;

 }   

.get h1{

    color: #40a1d5;

    font-size: 30px;

    padding: 10px 0px;

}

.get p{

    line-height: 39px;

}



#form{

    background-image: url(../img/form.png);

    height:100vh;

    background-position: center;

    background-repeat: no-repeat;

    background-size: cover;

    

}

.form{

    line-height: 50px;

}

.form-con{

    display: inline-block;

    width: 50%;

    padding: 20px;

    background-color: whitesmoke;

    margin-left: 47%;

    margin-top: 6%;

}

.form-con h1{

    text-align: center;

    font-size: 40px;

    color:#40a1d5;

}

.form input{

    border: none!important;

    background-color: #f0f8ff00;

    border-bottom: 2px solid gray!important;

    width: 67%;

    font-size: 17px;

    outline:none;

}

.form label{

    width: 27%;

    display: inline-block;

    font-size: 15px;

}

.make button{

    

    padding: 10px 45px;

    font-size: 20px;

    background-color: cornflowerblue;

    text-align: center;

     color: white; 

    text-decoration: none;

    border: none;

    cursor: pointer;

}

.make{

    text-align: center;

}

.form textarea{

    width: 70%;

    height: 100px;

}

.dss{

    position: absolute;

    right: 100px;

}



.bar1, .bar2, .bar3 {

    width: 35px;

    height: 5px;

    background-color: #333;

    margin: 6px 0;

    transition: 0.4s;

  }

  

  /* Rotate first bar */

  .change .bar1 {

    transform: translate(0, 11px) rotate(-45deg);

  }

  

  /* Fade out the second bar */

  .change .bar2 {opacity: 0;}

  

  /* Rotate last bar */

  .change .bar3 {

    transform: translate(0, -11px) rotate(45deg);

  }

.three{

    cursor:pointer;

    display: none;

}

.bg-img{

    background-image: url(../img/service.png);

    height: 30vh;

    background-size: cover;

    background-repeat: no-repeat;

    background-position: unset;

    filter: brightness(0.6);

}

.or{

    position: absolute;

    top: 0%;

    color: white;

    font-size: 65px;

    transform: translate(0%, 93%);

    left: 50%;

    cursor:pointer;

    

}



.ortho-details{

    padding: 30px;

}

.ortho-details h1{

    font-size: 40px;

    color: deepskyblue;

    padding: 10px 0px;

}

.ortho-details p{

    line-height: 28px;

    color: gray;

}



.ortho-details ul{

    line-height: 25px;

    padding: 10px 0px;

    display: flex; 

    justify-content: space-around;

}

.ortho-details ul li{

    list-style-type: circle;

    color: black;

    line-height: 35px;

}



.sli-img img{

    width:100%;

}





.images img {

    width:30%;

    margin:10px;

}



.images{

    display: flex;

    flex-wrap: wrap;

}



.modal{

    position:fixed;

    height:100%;

    width:100%;

    top:0;

    left:0;

    background-color: rgba(0, 0, 0, 0.7);

    opacity:0;

}

.modal-content{

    min-height: 100vh;

    display: flex;

    justify-content: center;

    align-items: center;

    flex-direction: column;

}

.modal-content img{

    width:50%;

    max-width:700px;

    animation:zoom 0.3s linear;

}



@keyframes zoom {

    from{

        transform: scale(0);

    }

    to{

        transform: scale(1);

    }

}



.close{

    position: absolute;

    top: 5rem;

    right: 9.5rem;

    font-size: 35px;

    color: #fff9f9;

    cursor:pointer;

}

.modal.appear{

    opacity:1;

}



.flex-col img{

    width:30%;

    margin:10px;

    border-radius:5px;

    cursor:pointer;

}



.gal{

    text-align: center;

    font-size: 40px;

    margin: 30px 0px

}



.dr-card{

    width: 30%;

    text-align: center;

    padding: 10px 0px;

    margin:20px 10px;

    background-color: aliceblue;

    box-shadow: 2px 2px 5px 1px darkgrey;

    display: inline-block;

}

.dr-card img{

    width: 60%;

    border: 2px solid  #949994;

}

.dr-card h1{

    padding: 10px 0px;

}

.dr-card h4{

    color:gray;

}

.dr-card a{

    text-decoration: none;

    color: #f6eeee;

    padding: 10px 45px;

    display: inline-block;

    margin: 15px 0px;

    background-color: cornflowerblue;

    transition: 1s;

}

.dr-card a:hover{

    background-color: #40a1d5;

    transition: 1s;

}

.semi-column{

    text-align: center;

    padding:20px;

}

.semi-column h1{

    padding: 15px 0px;

}

.semiImg img{

    width:30%;

    cursor:pointer;

}

.car{

    text-align: center;

    margin: 20px auto;

    width: 90%;

}

table{

    width:100%;

    border:none;

    border:2    px solid #40a1d5;

    border-spacing: 0;

    border-radius:10px 10px 0px 0px;

    box-shadow: 2px 2px 6px 2px lightgrey;



}

table thead tr th{

    border:none;

    background-color: #40a1d5;

    padding:10px 15px;

    

    

} 

    

tbody tr th{

    border:none;

    padding:10px 15px;

}



.page{

    width: 40%;

    padding: 10px;

    border-radius: 5px;

    background-color: whitesmoke;

    box-shadow: 1px 1px 3px 1px darkgrey;

    position: absolute;

    top: 105px;

    left: 227px;

    z-index:1;

    text-align: left;

    visibility: hidden;

    opacity: 0;

    transition: 0.9s; 

}





.aboutPage:hover .page{

    visibility: visible;

    opacity: 1;

}



.tie:hover .tie-page{

    visibility: visible;

    opacity: 1;

}



.tie-page{

    position:absolute;

    background-color: #f6eeee;

    text-align: left;

    padding:10px;

    box-shadow: 1px 1px 3px 1px darkgrey;

    width: 50%;

    top:112px;

    left:337px;

    opacity: 0;

    visibility: hidden;

    transition: 0.9s;

    border-radius: 5px;

    z-index:1;

   

}



.tie:hover .tie-page{

    visibility: visible;

    opacity: 1;

}

.tie-flex{

    display: flex;

    align-items: center;

}

.tie-list{

    line-height: 30px;

}

.tie-list li{

    border-bottom: 1px solid gray;  

    width: 90%;

}

.tie-col h1{

    color: cadetblue;

}

.page h1{

    padding: 5px 0px;

    color: cadetblue;

    

}

.page p{

    padding: 5px 0px;

}

.page img{

    width:100%;

}

.page span{

    display: block;

}

.docc{

    left: 92px;

    position: absolute;

    background-color: #f6eeee;

    width: 40%;

    text-align: left;

    z-index: 1;

    padding: 10px;

    width: 50%;

    border-radius: 5px;

    box-shadow: 1px 1px 3px 1px darkgrey;

    top: 97px;

    opacity: 0;

    visibility: hidden;

    transition: 0.9s;

}



.doctor:hover .docc{

    visibility: visible;

    opacity: 1;

}



.doc-imagee img{

    width:100%;

}

.doc-flex{

    display: flex;

}

.drr{

    line-height: 27px;

}

.doc-details h1{

    text-align: center;

     color: cadetblue;

}



.facilities{

    position: absolute;

    top: 40px;

    left: -406px;

    z-index: 1;

    opacity: 0;

    visibility: hidden;

    transition: 0.9s;

    right: -570px;

}



.flex-fac{

    align-items: baseline;

    display: flex;

    text-align: left;

    background-color: aliceblue;

    padding: 10px;

    border-radius: 5px;

    box-shadow: 1px 1px 3px 1px darkgrey;

}

.fac-col {

    margin:0px 10px;

    width: 30%;

}

.fac-col h3{

    color: cadetblue;

}

.fac-col ul{

    line-height: 20px;

    font-size: 15px;

}

.fac-col ul li{

    border-bottom: 1px solid gray;

    width:100%;

}



.services:hover .facilities{

    visibility: visible;

    opacity: 1;

}

.neuro h2{

    background-color: #56bbf1;

    padding: 10px 5px;

}



@media only screen and (max-width: 896px) {

    .address{

        display: none;

    }

    .social-icons{

        width:60%;

    }

    .nav-list{

        display: block;

    }

    .navii{

        display: none;

    } 

    .appointment{

        display: block;

    }

    .flex-row{

        flex-wrap:wrap;

    }

    .img-column{

        width:80%;

    }

    .about-col{

        width:100%;

    }

    .d-flex{

        display: block;

    }

    .image-column{

        width:100%;

    }

    .hospital{

        width:100%;

        height: fit-content;

    }

    .image-column img{

        height:auto;

    }

    .doc-img{

        width:100%;

    }

    .locate-map span iframe{

        width:100%;

    }

    .form-con{

        margin-left:0px;

        width:100%;

    }

    .flex-roww{

        display: block;

        background-color: #40a1d5;

    }

    .logo img{

        width:100%;

    } 

    .header{

        display: none;

    }

    .appointment a{

        display: none;

    }

    .three{

        display: block;

    }

    .logo{

        margin-left:-186px;

    }

    .three{

        position: absolute;

    top: 3px;

    right: 10px;

    }

    .sticky{

        box-shadow: none;

    }

    .bg{

        padding:45px 0px;

    }

    .pp{

        width:60%;

    }

    .ss{

        width:40%;

    }

    .bg-img{

        background-image: url(../img/service.png);

    height: 14vh;

    background-size: auto;

    background-repeat: no-repeat;

    background-position: inherit;

    filter: brightness(0.6);

    }

    .or{

        position: absolute;

    top: -4%;

    color: white;

    font-size: 25px;

    transform: translate(0%, 93%);

    left: 26%;

    cursor: pointer;

    }

    .ortho-img img{

        width:100%;

    }

    .navii{

        display: none;

        position: absolute;

        top: 43px;

        z-index: 2;

        background-color: aliceblue;

        left: 0;

        right: 0px;

        width: 100%;

        height: 70vh;

        opacity: 1;

        visibility: visible;



    }

    .nav-list li{

        display: block;

        padding:10px 10px;

    }

    .nav-list{

        text-align: left;

    }

    .dr li{

        font-size:17px;

    }

    .car{text-align: center;

        margin: 0px 0px;

        width: 100%;

    overflow-x: auto;

    }

    .dss{

        position: absolute;

        right: 13px;

    }

    .dr-card{

        width: 100%;

        text-align: center;

        padding: 10px 0px;

        margin: 20px 10px;

        background-color: aliceblue;

        box-shadow: 2px 2px 5px 1px darkgrey;

        display: inline-block;

    }

    .dr-card a{

        padding: 10px 3px;

    }

    .card2-col{

        display: block;

    }

    .card{

        display: none!important;

    }

    .card2{

        width:90%;

    }

    .slick-next ,.slick-prev{

        display: none!important;

    }

    

    @media screen and (min-width: 390px) and (max-width: 899px) { 

        .card img{

            top:36%;

        }

        .card{

            display: none!important;

        }

        .card2-col{

            display: block;

        }

        .slick-next ,.slick-prev{

            display: none!important;

        }

    }

}