@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;
}

body{

    margin: 0px;
    padding: 0px;
    font-family: "Roboto", sans-serif;
}

.mt-30{

    margin-top: 30px !important;
}

.mt-60{

    margin-top: 60px !important;
}

.mt-90{

    margin-top: 90px;
}

.mt-110{

    margin-top: 110px;
}

.mt-130{

    margin-top: 130px;
}

.mt-150{

    margin-top: 150px;
}

:root{

    --thmecolor:#8bc43f;
}

.headertop{

    background-color: #0a2722;
    margin: 0px;
    padding: 2px 0px;
    display: flex;
    align-items: center;
}

.headertopleft{

    margin: 0px;
    padding: 0px;
}

.headertopleft ul{

    margin: 0px;
    padding: 0px;
    display: flex;
    margin-top: 8px;
}

.headertopleft ul li{

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

.headertoplefticon{

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

}

.headertoplefticon i{

color: var(--thmecolor);
font-size: 18px;
margin: 0px;
padding: 0px;
line-height: 23px;

}

.headertoplefticon p ,.headertoplefticon p a {

    color: white;
    text-decoration: none;
}

.headertopright{

    margin: 0px;
    padding: 0px;
}

.headertopright ul{

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

.headertopright ul li{

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


.headertopright ul li a i{

color: white;

}


/*----logo&nav------*/

.navigationbox{

    margin: 0px;
    padding: 0px;
    display: flex;
    align-items: center;

}

.navlogo{

    margin: 0px;
    padding: 0px;
}

.headernavigationmain{

    margin: 0px;
    padding: 20px 0px;
    background-color: #32b6a1;
}


.headernavigation{

   
    margin: 0px;
    padding: 6px 0px;
    display: flex;
    align-items: center;
    width: 100%;
    display: block;
 
}

.headernavigation ul{

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

.headernavigation ul li{

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

.headernavigation ul li a{

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

.headernavigation ul li a:hover{

    color: black;
}

.headerappointment{

    margin: 0px;
    padding: 0px;
    width: 100%;
    display: block;
    text-align: right;

}

.headerappointment button{

    background-color: var(--thmecolor);
}

.headerappointment button:hover{

    background-color: var(--thmecolor);
}


/*banner*/

.bannerbox{

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


.bannerboximg{

    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 550px;
    display: block;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

/*-------callus----------*/

.callusbox{

    background-color: #32b6a1;
    margin: 0px;
    padding: 2px 0px;
    display: flex;
    align-items: center;
    border-radius: 15px;
}

.callusbox1{

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

.callusbox1 i{

    color: white;
    font-size: 30px;
}

.callusbox2{

    margin: 0px;
    padding: 0px;
}

.callusbox2 h4{

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

.callusbox2 p a, .callusbox2 p{

    color: white;
    text-decoration: none;
    font-size: 18px;
}

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

.aboutusleft{

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

.aboutusleft img{

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

.aboutusleft1{

    position: absolute;
    content: "";
    top: 0;
    right: 190px;
}

.aboutusleft1 svg{

    width: 170px;
    height: 170px;
    font-size: 19px;
    text-transform: uppercase;
    letter-spacing: 4px;
    font-weight: 600;
    position: absolute;
    top: 0;
    left: 0;
    transform: rotate(0deg);
    -webkit-animation: spin 15s linear infinite;
    -moz-animation: spin 15s linear infinite;
    animation: spin 15s linear infinite;
}

@keyframes spin{

    100%{

        transform: rotate(360deg);
    }
}

.aboutusright{

    margin: 0px;
    padding: 0px;
}

.aboutusright h4{

    color: #32b6a1;
}

.aboutusright h2{

    color: #0a2722;
}

.aboutusrighticon{

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

}

.aboutusrighticon i{

    color:#32b6a1;
    line-height: 20px;
}

.aboutusrighticon p{

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

.aboutusright button{

    background-color: var(--thmecolor);
}

.aboutusright button:hover{

    background-color: var(--thmecolor);
}

/*----whatweoffer---*/

.whatweoffetext{

    margin: 0px;
    padding: 0px;
}

.whatweoffetext h2{

    color: #32b6a1;
    text-align: center;
}

.whatweofferleft{

    margin: 0px;
    padding: 20px;
    background-color:rgb(240, 240, 240);
    height: 300px;  
}

.whatweofferleft h4{

    color: #32b6a1;
    font-size: 18px;
}

.whatweofferleft p{

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

.whatweofferleft h6 a{

    color: black;
}

.whatweofferleftimg{

    width: 100%;
    display: block;
    height: 300px; 

}

.whatweofferleftimg img{

    width: 100%;
    display: block;
    height: 300px;
    object-fit: cover;
}

/*-------whychooseus-----*/

.whychooseusleft{

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

.whychooseusleft img{

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

.whychooseusright{

    margin: 0px;
    padding: 0px;
    width: 100%;
    display: block;
    background-color: rgb(250, 250, 250);
}

.whychooseusright h4{

    color: #32b6a1;
}

.whychooseusright1{

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

.whychooseusright1icon{

    width: 30px;
    height: 30px;
    background-color: var(--thmecolor);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.whychooseusright1icon i{

    color: white;
    width: 30px;
    height: 30px;
    background-color: var(--thmecolor);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.whychooseusrighttext{

    margin: 0px;
    padding: 0px;
}

.whychooseusrighttext p{

    color: black;
}

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

.testimonialbox{

    margin: 0px;
    padding: 0px;
}

.testimonialbox1{

    margin: 0px;
    padding: 20px;
    width: 100%;
    display: block;
    background-color: rgb(240, 240, 240);
    border: solid 1px var(--thmecolor);
    border-radius: 15px;
}

.testimonialboxtext{

    margin: 0px;
    padding: 0px;
}

.testimonialboxtext i{

    color: #32b6a1;
    font-size: 24px;
}

.testimonialboximg{

    margin: 15px 0px;
    padding: 0px;
    text-align: center;
}

.testimonialboximg1{

    width: 70px;
    height: 70px;
    border-radius: 50%; 
    text-align: center;
    margin: 0 auto;
    display: table;
}

.testimonialboximg1 img{

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

.testimonialboximg1 h6{

    color: #32b6a1;
    text-align: center;
    margin: 15px auto;
}

/*----bookanappointment-----*/

.bookappointmentleft{

    margin: 0px;
    padding: 0px;
}

.bookappointmentleft img{

    width: 100%;
    display: block;
    height: 380px;
    object-fit: cover;
    border-radius: 15px;
}

.bookappointmentright{

    margin: 0px;
    padding: 20px;
    background-color: rgb(243, 243, 243);
    border-radius: 15px;
    
}

.bookappointmentright h4{

    color: #32b6a1;
}


.bookappointmentright1{

    margin: 0px;
    padding: 0px;
}

.bookappointmentright1 input{
    width: 100%;
    display: block;
    border-radius: 15px;
    border: solid 1px #32b6a1;
    /*margin: 10px 0px;*/
    padding: 10px;
    color: black;
    font-size: 16px;
}

.bookappointmentright1 input:focus{

    outline: none;
}


.bookappointmentright1 textarea{
    width: 100%;
    display: block;
    border-radius: 15px;
    border: solid 1px #32b6a1;
    margin: 10px 0px;
    padding: 10px;
    color: black;
    font-size: 16px;
    height: 100px;
}

.bookappointmentright1 button{

    background-color: var(--thmecolor);
    color: black;
}

.bookappointmentright1 button:hover{

    background-color: var(--thmecolor);
    color: black;
}

/*=======footer=========*/

.footerbox{

    margin: 0px;
    padding: 0px;
    background-color: rgb(241, 241, 241);
    padding-top: 60px;
    padding-bottom: 10px;
}

.footerleft{

    margin: 0px;
    padding: 0px;
}


.footerleft p{

    color: black;

}

.footermiddle{

    margin: 0px;
    padding: 0px;
}

.footermiddle h2{

    color: #32b6a1;
    font-size: 32px;
}

.footernav{

    margin-top: 20px;
    padding: 0px;
}

.footernav ul{

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

.footernav ul li{

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

.footernav ul li a{

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

.footernav ul li a:hover{

    color: #32b6a1;
    padding-left: 14px;
}
.footerright{

    margin: 0px;
    padding: 0px;
}

.footerright h2{

    color: #32b6a1;
    font-size: 32px;  
    margin-bottom: 20px; 
}

.footerrighticon{

    margin-top: 14px 0px;
    padding: 0px;
    display: flex;
    gap: 15px;
}


.footerrighticon i{

    color: var(--thmecolor);
    line-height: 24px;
}

.footerrighticon p ,.footerrighticon p a {

    color: black;
    text-decoration: none;
}

.footercopyright{

    background-color: #0a2722;
    display: flex;
    align-items: center;
}

.footercopyrighttext{

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

.footercopyrighttext p ,.footercopyrighttext p a {

    color: white;
    font-size: 16px;
    text-decoration: none;
    margin-top: 10px;
}

.sticky{

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

.resbtn{

    margin: 0px;
    padding: 0px;
    float: right;
    display: none;
    margin-top: -45px;
}


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

.aboutuspagebaneer{

    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 250px;
    background-image: url(../img/aboutuspage.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.aboutuspagebaneer::before{

    background: rgba(139, 196, 66, 0.60);
    content: "";
    height: 100%;
    left: -14%;
    position: absolute;
    top: 0;
    width: 60%;
    z-index: -1;
    transform: skew(40deg, 0deg);
}

.aboutuspagebaneer h2{

    color: white;
}

.aboutuspagebaneer h4 ,.aboutuspagebaneer h4 a {

    color: white;
    text-decoration: none;
}

/*mission&vesion*/

.missionbg{

    background-image: url(../img/mission-vision-bg.jpg);
    width: 100%;
    display: block;
    margin: 0px;
    padding: 60px 0px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.missionbox{

    width: 100%;
    display: block;
    border-radius: 15px;
    border: solid 1px #8bc43f;
    margin: 0px;
    padding: 20px;

}

.missionbox h4{

    color: var(--thmecolor);
    text-align: center
}

.missionbox p{

    color: white;
    font-size: 16px;
}


/*---service---*/

.servicebox{

    margin: 0px;
    padding: 20px;
    width: 100%;
    display: block;
    border: solid 1px #8bc43f;
    background-color: rgb(238, 238, 238);
    border-radius: 14px;
}

.serviceboximg{

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

.serviceboximg img{

    width: 100%;
    height: 300px;
    border-radius: 14px;
    object-fit: cover;
}

.serviceboxtext{

    margin: 14px 0px;
    padding: 0px;
}

.serviceboxtext h4{

    color: #32b6a1;
    font-weight: bold;
    font-style: italic;
}


/*-------Products----------*/

.productstext{

    margin: 0px;
    padding: 0px;
}


.productstext h4{

    color: #32b6a1;
    text-align: center;
}

.productstext h5{

    color: #32b6a1;
}

.productsimg{

    margin: 14px 0px;
    padding: 0px;
}

.productsimg1{

    margin: 0px;
    padding: 0px;
}


.productsimg2{

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

.productsimg2main{

    margin: 0px;
    padding: 0px;
}

.productsimg2main img{

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

.productsimg2text{

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

.productsimg2text h4{

    color: #32b6a1;
}

.productsimg2text p{

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

.productsimg2text h6 a{

    color: #32b6a1;
    text-decoration: none;
}


/*=============contactuspage=================*/

.contactusbox{

    margin: 0px;
    padding: 20px;
    width: 100%;
    display: block;
    border: solid 1px #8bc43f;
    border-radius: 15px;
}


.contactusboxicon{

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

.contactusboxicon i{

    color: #32b6a1;
    font-size: 24px;
}

.contactusboxtext{

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

.contactusboxtext p , .contactusboxtext p a{

    color: #000000;
    text-decoration: none;
    text-align: center;
 
}

.mapbox{

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

.mapbox iframe{

    border-radius: 14px;
}


@media only screen and (min-width:991px) and (max-width:1200px){

    .headernavigation ul li a{

        padding: 0px 15px;
    }

    .headerappointment{

        margin-right: 20px;
    }

    .headertoplefticon p a{

        font-size: 14px;
    }
}



@media (max-width:991px){

    .resbtn{

        display: block;
    }

    .dis-none{

        display: none;
    }
    .headernavigation{

        width: 250px;
        height: 100%;
        position: fixed;
        z-index: 999;
        top: 0px;
        left: -100%;
        background-color: white;
        transition: all 0.4s ease-in-out;
        
    }

    .headernavigation ul{

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

    }
    .headernavigation ul li{

        margin: 0px;
        padding: 12px 0px;
        list-style:none ;
    }
    .headernavigation ul li a{

        font-size: 16px;
        color: black;
    }
    .headernavigation.main{

        left: 0;
    }

    .headernavigationmain{

        background-color: white;
    }

    .aboutuspagebaneer::before{

        left: -30%;
    }

    .headernavigationmain{

        padding: 0px;
    }
    .bannerboximg{

        height: 350px;
    }
}