@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');


*{

    box-sizing: border-box;
    margin: 0px;
    padding: 0px;
}
html{

    scroll-behavior: smooth;
}

body{

    margin: 0px;
    padding: 0px;
    width: 100%;
    display: block;
    font-family: "Roboto", sans-serif;
}

section{

    min-height: 100vh;
    width: 100%;
    display: block;
}


/*whatsappfloating*/

.whatsappfloating{

    margin: 0px;
    padding: 0px;
    position: fixed;
    bottom: 50px;
    right: 30px;
    z-index: 9999;
    cursor: pointer;
}

.whatsappfloating i{

    color: rgba(5, 255, 101, 0.788);
    font-size: clamp(24px , 5vw , 48px);
}



/*----------headertop---------*/


.headertopbg{

    margin: 0px;
    padding: 5px 0px;
    background-color: #276acd;
    width: 100%;
    display: block;
}

.headertopbgleft{

    margin: 0px;
    padding: 0px;

}

.headertopbgleft ul{

    margin: 0px;
    padding: 0px;
    display: flex;
}

.headertopbgleft ul li{

    margin: 0px;
    padding: 0px 15px;
    list-style: none;
}

.headertopbglefticon{

    margin: 0px;
    padding: 0px;
    display: flex;
    gap: 12px;
}

.headertopbglefticon i{

    color: white;
    line-height: 25px;
} 

.headertopbglefticon p , .headertopbglefticon p a{

    color: white;
    text-decoration: none;
}

.headertopright{

    margin: 0px;
    padding: 0px;
    width: 100%;
    display: block;
}

.headertopright ul{

    margin: 0px;
    padding: 0px;
    display: flex;
    justify-content: right;

}

.headertopright ul li{

    margin: 0px;
    padding: 0px 14px;
    list-style: none;
}

.headertopright ul li a i{

    color: white;
}

/*-------------navigation&logo-----------*/

.navigationbox{

    margin: 0px;
    padding: 0px;
}

.logobox{

    margin: 0px;
    padding: 0px;
}

.headernavigation{

    margin: 0px;
    padding: 0px;
}

.headernavigation ul{

    margin: 0px;
    padding: 0px;
    width: 100%;
    display: flex;
    justify-content: right;
    margin-top: 45px;
}

.headernavigation ul li{

    margin: 0px;
    padding: 0px;
    list-style: none;
}

.headernavigation ul li a{

    margin: 0px;
    padding: 0px 25px;
    font-size: 16px;
    color: black;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.5s ease-in-out;

}

.headernavigation ul li a:hover , .headernavigation ul li a.active{

    color: #276acd;
}


/*-----------banner-----*/

.bannerbox{

    margin: 0px;
    padding: 0px;
    width: 100%;
    display: block;
}


.bannerbox1{

    margin: 0px;
    padding: 0px;
    width: 100%;
    display: block;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 460px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.bannerbox1 h2{

    color: #010E2A;
    font-size: clamp(24px ,5vw, 32px);
    width: 100%;
    max-width: 1200px;
}


/*-------aboutus-----------*/

.aboutusleft{

    margin: 0px;
    padding: 0px;
}

.aboutusleft img{

width: 100%;
height: 600px;
border-radius: 15px;
object-fit: cover;

}

.aboutusright{

    margin: 0px;
    padding: 0px;
    width: 100%;
    display: block;
}

.aboutusright h4{

    color: #276acd;
} 

.aboutusright h2{

    color: black;
}

.aboutusright p{

    color: rgb(53, 53, 53);
}

.aboutusrighteyecare{

    margin: 14px 0px;
    padding: 10px;
    width: 100%;
    display: block;
    background-color: antiquewhite;
}

.aboutusrighteyecare1{

    margin: 0px;
    padding: 0px;
    display: flex;
    gap: 14px;
}

.aboutusrighteyecare1 i{

    color: #276acd;
    line-height: 25px;
}

.aboutusrighteyecare2{

    margin: 10px 0px;
    padding: 0px;

}


/*---------------------rateing--------------*/

.rateingbox{

    margin: 0px;
    padding: 0px;
    width: 100%;
    display: block;
}

.rateingboxicon{

    margin: 0px;
    padding: 0px;
    width: 100%;
  text-align: center;
}


.rateingboxicon h4{

    color: #276acd;
}

.rateingboxicon h2{

    color: black;
    font-size: 24px;
}

/*-----------------callbox---------------*/

.callbox{

    margin: 0px;
    padding: 0px;
    width: 100%;
    display: block;
}

.callbox1{

    margin: 0px;
    padding: 20px;
    width: 100%;
    display: block;
    background-color: aliceblue;
    margin-top: 50px;
    border-radius: 20px;
}

.callboxleft{

    margin: 0px;
    padding: 0px;
}

.callboxleft h2{

    color: #276acd;
    font-size: clamp(24px , 5vw , 44px)
}

.callboxright{

    margin: 0px;
    padding: 0px;
    display: flex;
    justify-content: right;
}

.callboxright h2 a{

    color: #276acd;
    text-decoration: none;
}


/*------------------service----------------------*/

.servicebox{

    margin: 0px;
    padding: 0px;
    margin-top: 50px;
    width: 100%;
    display: block;
}

.servicetext{

    margin: 0px;
    padding: 0px;
}

.servicetext h4{

    color: #276acd;
    text-align: center;
}

.servicebox1{

    margin: 0px;
    padding: 0px;
    width: 100%;
    display: block;
}

.servicebox1img{

    margin: 0px;
    padding: 0px;
    width: 100%;
    display: block;
}

.servicebox1img img{

    width: 100%;
    height: 220px;
    border-radius: 20px;
    object-fit: cover;
}


.servicebox1text{

    margin: 0px;
    padding: 0px;
    width: 100%;
    display: block;
    margin-top: 20px;
}

.servicebox1text h4{

    color: #276acd;
}


.servicebox1text p{

    color: black;
    padding: 20px; 
    width: 100%;
    resize: vertical;
    overflow: auto;
    height: 140px;
    scrollbar-width: none;
}

.servicebox1text2{

    margin: 0px;
    padding: 20px;
    width: 100%;
  background-color: #010E2A;
  border-radius: 15px;
}

.servicebox1text2 button{

    background-color: #276acd !important;
    color: white !important;
    text-align: center;
}

.servicebox1text2 button:hover{

    background-color: #276acd !important;
    color: white !important;
}

.servicebox1text2 h4{

    color: white;
}

.servicebox1text2 p{

    color: white;
}

/*-------------map&form--------------*/

.mapbox{

    margin: 0px;
    padding: 0px;
    width: 100%;
    display: block;
    margin-top: 50px;
}

.mapboxmain{

    margin: 0px;
    padding: 0px;
    width: 100%;
    display: block;
}

.mapboxmain iframe{

    border-radius: 15px;
}


/*---------testimonial----------*/

 .testimonialbox{

    margin: 0px;
    padding: 0px;
    width: 100%;
    display: block;
    margin-top: 30px;
 }


 .testimonialbox1{

    margin: 0px;
    padding: 0px;
    margin-top: 20px;
    border-top: solid 2px #276acd;
    border-bottom: solid 2px #276acd;
    margin-bottom: 20px;
 }

 .testimonialbox1img{

    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin: 40px auto;
    display: table;

 }

 .testimonialbox1text{

    margin: 15px 0px;
    padding: 0px;
 }

 .testimonialbox1img img{

    width: 80px;
    height: 80px;
    border-radius: 50%;
 }


 .testimonialbox1text{

    margin: 15px 0px;
    padding: 0px;
 }

 .testimonialbox1text p{

    color: #010E2A;
    text-align: center;
 }

 .testimonialbox1text h6{

    color: #276acd;
    text-align: center;
 }








.formbox{

    margin: 0px;
    padding: 20px;
    width: 100%;
    display: block;
    background-color: antiquewhite;
    border-radius: 20px;
}

.formbox1{

    margin: 0px;
    padding: 0px;
  

}

.formbox1 input{

/*    margin: 10px 0px;*/
    padding: 10px;
    border: solid 1px #276acd;
    width: 100%;
    display: block;
    background-color: white;
    font-size: 16px;
    color: black;
    border-radius: 15px;
}

.formbox1 input:focus{

    outline: none;
}

.formbox1 textarea{

    margin: 10px 0px;
    padding: 10px;
    border: solid 1px #276acd;
    width: 100%;
    display: block;
    background-color: white;
    font-size: 16px;
    color: black;
    border-radius: 15px;
    height: 100px;
}

.formbox1 button{

    background-color: #276acd !important;
    color: white !important;
    border-radius: 15px;
    width: 100%;
}

.formbox1 button:hover{

    background-color: #276acd !important;
    color: white !important;
    border-radius: 15px;
}

.footerbg{

    background-color: #276acd;
    margin: 0px;
   padding-top: 30px;
   padding-bottom: 10px;
    width: 100%;
    display: block;
}

.footerleft{

    margin: 0px;
    padding: 0px;
}


.footerleft p{

    color: white;
    font-size: 16px;

}

.footermiddle{

    margin: 0px;
    padding: 0px;
}

.footermiddle h2{

    color: white;

}

.footernav{

    margin: 0px;
    padding: 0px;
}

.footernav ul{

    margin: 0px;
    padding: 0px;
    display: block;
}

.footernav ul li{

    margin: 0px;
    padding: 10px 0px;
    display: block;
    list-style: none;
}

.footernav ul li a{

    margin: 0px;
    padding: 0px;
    cursor: pointer;
    text-decoration: none;
    font-size: 16px;
    color: white;
}

.footerright{

    margin: 0px;
    padding: 0px;
}

.footerright h2{
    
    color: white;
}

.footerrighticon{

    margin: 15px 0px;
    padding: 0px;   
}

.footerrighticon1{

    margin: 10px 0px;
    padding: 0px;
    display: flex;
    gap: 15px;
}

.footerrighticon1 i{

    color: white;
    font-size: 18px;
    line-height: 25px;
}

.footerrighticon1 p , .footerrighticon1 p a {

    color: white;
    text-decoration: none;
}

.footercopyright{

    margin: 0px;
    padding: 5px 0px;
    background-color: #010E2A;
    display: flex;
    align-items: center;
}

.footercopyrighttext{

    margin: 0px;
    padding: 0px;
    text-align: center;
    margin-top: 5px;
}

.footercopyrighttext p ,.footercopyrighttext p a {

color: white;
text-decoration: none;

}

.sticky{

    margin: 0px;
    padding: 0px;
    width: 100%;
    display: block;
    background-color: white;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    border-bottom: dotted 1px #276acd;
}

/*---------------gallery-------------------*/


.gallerybox{

    margin: 0px;
    padding: 0px;
    width: 100%;
    display: block;
    margin-top: 30px;
}


.gallerybox h4{
    margin-top:70px;
    color: #276acd;
    text-align:center;
    font-size:30px;
}








.gallerybox1{

    margin: 0px;
    padding: 0px;
}

.galleryboxmain{

    /*margin: 0px;*/
    padding: 0px;
    width: 100%;
    display: block;
    margin-top: 70px;
}


.galleryboxmain img{

    width: 100%;
    height: 250px;
    object-fit: cover;
    border-radius: 15px;
}








@media(max-width:991px){

    .dis-none{

        display: none;
    }

    .bannerbox1{

        height: 150px;
    }

    .hightcontrol{

        min-height: 40vh;
    }
    .callboxright{

        justify-content: left;
    }
}