@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');
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400..700&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;
}

:root{
--themecolor:#9d2064;
--themecolor1: #ed008c;

}

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-120{

    margin-top: 120px;
}

.mt-150{

    margin-top: 150px;
}


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


.headertop{

    margin: 0px;
    padding: 2px 0px;
    background-color: var(--themecolor);
    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 14px;
    display: flex;
    list-style: none;
}

.headertopleft ul li .headertoplefticon{

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

.headertopleft ul li .headertoplefticon i{

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

.headertopleft ul li .headertoplefticon p , .headertopleft ul li .headertoplefticon p a{

    color: white;
    font-size: 16px;
    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 14px;
    list-style: none;
}

.headertopright ul li a i{

    color: white;
}

/*logo&navaigation*/

.navigationbox{

    margin: 0px;
    padding: 0px;
    width: 100%;
    display: block;
    background-color: white;
}

.navlogo{

    margin: 0px;
    padding: 0px;
}

.headernavigation{

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

.headernavigation ul{

    margin: 0px;
    padding: 0px;
    display: flex;
    justify-content: center;
    margin-top: 14px;
}

.headernavigation ul li{

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

.headernavigation ul li a{

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

.headernavigation ul li a:hover{

    color: var(--themecolor);
}

.headerappointment{

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

.headerappointment button{

    background-color: var(--themecolor);
    color: white;
}

.headerappointment button:hover{

    background-color: var(--themecolor);
    color: white;
}


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

.bannerbox{

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

.bannerbox1{

    margin: 0px;
    padding: 0px;
}

.bannerbox1 h2{

    font-size: 48px;
  
}

.bannerbox1 h2 span{

    color: var(--themecolor);
}


.bannerbox1 button{

    background-color: var(--themecolor);
    color: white;
}

.bannerbox1 button:hover{

    background-color: var(--themecolor);
    color: white;
}


/*-----howcanhelp----*/

.howcanhelpleft{

margin: 0px;
padding: 20px;
background-color: rgb(236, 236, 236);
border-radius: 14px;
box-shadow: 6px 6px 6px rgb(204, 204, 204);

}

.howcanhelplefttext{

    margin: 0px;
    padding: 0px;
    border-right: dotted 1px var(--themecolor);
}

.howcanhelplefttext h2{

    color: var(--themecolor);
}

.howcanhelplefttext h6 a{

    color: var(--themecolor);
    text-decoration: none;
}

.howcanhelplefttextservice{

    margin: 0px;
    padding: 0px;
}


.howcanhelplefttextservice1{

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

.howcanhelplefttextservice1icon{

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

.howcanhelplefttextservice1icon i{

    color: white;
}

.howcanhelplefttextservice1icon p{

    color: black;
}

.howcanhelpright{

    margin: 0px;
    padding: 20px;
    background-color: var(--themecolor);
    border-radius: 14px;
}

.howcanhelpright h2{

    color: white;
    font-family: "Dancing Script", cursive;
}

.howcanhelpright p{

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

.howcanhelpright1{

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

.howcanhelpright1icon{

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


.howcanhelpright1icon i{

    color: var(--themecolor);
}

.howcanhelpright1 p a{

    color: white;
    text-decoration: none;
    font-size: 24px;

}


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

.aboutusleft{


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

.aboutusleft1{

    width: 50%;
    display: block;
    margin: 0px;
    padding: 0px 14px;
}

.aboutusleft1 img{

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

.aboutusleft1 img:nth-child(2){

    border-radius: 0px 0px 20px 20px;  
}

.aboutusright{

    margin: 0px;
    padding: 0px;
}

.aboutusright h4{

    color: black;
    font-family: "Dancing Script", cursive;
}

.aboutusright h4 span{

    color: var(--themecolor);
}

.aboutusright h5{

    color: black;
}

.aboutusright p{

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

.aboutusrighticon{

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

.aboutusrighticon1{

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

.aboutusrighticon1box{

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

.aboutusrighticon1box i{

    color: white;
}

.aboutusright button{

    background-color: var(--themecolor);
    color: white;
    margin-top: 8px;
}

.aboutusright button:hover{

    background-color: var(--themecolor);
    color: white;
}

/*-----OurServices------*/

.ourservices{

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

.ourservices h4{

    color: var(--themecolor);
    font-family: "Dancing Script", cursive;

}

.ourservices h2{


    color: black;
}

.ourservicesbox{

    margin: 0px;
    padding: 0px;
    width: 100%;
    display: block;
    transition: all 0.5s ease-in-out;
}

.ourservicesbox:hover{

    transform: translateY(-20px);
}

.ourservicesboximg{

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

.ourservicesboximg img{

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

.ourservicesboxtext
{

    width: 100%;
    display: block;
    margin: 0px;
    padding: 20px;
    border-radius: 15px;
    background-color: rgb(236, 236, 236);
    /* position: relative;
    top: -120px;
    z-index: 2; */
    
}

.ourservicesboxtext h4{

    color: var(--themecolor);
    font-family: "Dancing Script", cursive;
}

.ourservicesboxtext p{

    color: black;
    font-size: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.ourservicesboxtext h6 a{

    color: var(--themecolor);
    text-decoration: none;
}


.ourservicebtn{

    margin: 0px auto;
    text-align: center;
    margin-top: 20px;
}

.ourservicebtn button{

    background-color: var(--themecolor);
    color: white;
}

.ourservicebtn button:hover{

    background-color: var(--themecolor);
    color: white;
}

/*----technologies------*/

.technologiesbox{

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

.technologiesbox1{

    margin: 0px;
    padding: 20px;
}

.technologiesbox1 img{

    width: 100%;
    height: auto;

}

.technologiesbox1text{

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

.technologiesbox1text h4{

    color: var(--themecolor);
}

.technologiesbox1text h6 a{

    color: #9d2064;
    text-decoration: none;
}


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

.gallerybox{

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


.gallerybox1{

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

.gallerybox1 img{

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


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

.testimonialbox{

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

.testimonialboxmain{

    margin: 0px;
    padding: 0px;
}

.testimonialboxmain1{

    margin: 0px;
    padding: 20px;
    width: 100%;
    display: block;
    border-radius: 14px;
    border: solid 1px var(--themecolor);
}

.testimonialboxmaintext{

    margin: 0px;
    padding: 0px;
}


.testimonialboxmaintextdown{

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

.testimonialboxmaintextdown h6{

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

.testimonialsboxright{

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

.testimonialsboxright1{

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

.testimonialsboxright1 img{

    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 100px 100px 0px 100px;
}


.testimonialsboxright2{

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

.testimonialsboxright2 img{

    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 100px 100px 100px 0px;
}

.testimonialsboxright3{

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

.testimonialsboxright3 img{

    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 100px 0px 100px 100px;
}

.testimonialsboxright4{

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

.testimonialsboxright4 img{

    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 0px 100px 100px 100px;
}

/*-----------form------------*/

.formleft{

    margin: 0px;
    padding: 20px;
    background-color: rgb(240, 240, 240);
    border-radius: 14px;
    border: solid 1px var(--themecolor);
}


.formleft h2{

    color: var(--themecolor);
    font-family: "Dancing Script", cursive;

}

.formleft1{

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

.formleft1 input{

    width: 100%;
    display: block;
    /*margin: 12px 0px;*/
    padding: 12px;
    font-size: 16px;
    color: black;
    border-radius: 14px;
    border: solid 1px var(--themecolor);
}

.formleft1 input:focus{

    outline: none;
}



.formleft1 textarea{

    width: 100%;
    display: block;
    margin: 12px 0px;
    padding: 12px;
    font-size: 16px;
    color: black;
    border-radius: 14px;
    border: solid 1px var(--themecolor);
    height: 80px;
}


.formleft1 textarea:focus{

    outline: none;
}

.formleft1 button{

    background-color: var(--themecolor);
    color: white;
}

.formleft1 button:hover{

    background-color: var(--themecolor);
    color: white;
}

.formright{

    margin: 0px;
    padding: 20px;
}

.formright h4{

    color: var(--themecolor);
    font-family: "Dancing Script", cursive;

}


.formright h2{

    color: black;
    margin-bottom: 15px;
}

.formright1{

    display: flex;
    justify-content: space-between;
    margin: 12px 0px;
    padding: 0px;
    border-bottom: dotted 3px var(--themecolor);
}

.formright1 p{

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

/*--------footer--------*/

.footerbody{

    background-color: #FFF2F2;
    margin: 0px;
    padding-top: 60px;
    padding-bottom: 15px;
}

.footerbodyleft{

    margin: 0px;
    padding: 0px;
}

.footerbodyleft p{

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

.footermiddle{

    margin: 0px;
    padding: 0px;
}

.footermiddle h2{

    color: var(--themecolor);
    font-size: 32px;
    margin-bottom: 10px;
}

.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{

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

.footernav ul li a:hover{

    color: var(--themecolor);
}

.footerright{

    margin: 0px;
    padding: 0px;
}

.footerright h2{

    color: var(--themecolor);
    margin-bottom: 20px;
}

.footerright1{

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

.footerright1 i{

    color: var(--themecolor);
    line-height: 25px;
}

.footerright1 p ,.footerright1 p a {

    color: black;
    text-decoration: none;
}

.footercopyright{

    margin: 0px;
    padding: 6px 0px;
    display: flex;
    align-items: center;
    background-color: var(--themecolor);
}

.footercopyright1{

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

.footercopyright1 p, .footercopyright1 p a{

    color: white;
    text-decoration: none;
}

.sticky{

    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    display: block;
    z-index: 9990;
    border-bottom: solid 1px var(--themecolor);
}

.resnav{

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


/*=============aboutuspage=================*/

.aboutuspagebanner{


    margin: 0px;
    padding: 0px;
    background-color: #FCD7DB;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.aboutuspagebanner h2{

color: black;

}

.aboutuspagebanner h4 , .aboutuspagebanner h4 a{

    color: var(--themecolor);

}


/*============servicepage=============*/


.ourservicesboxText
{

    width: 100%;
    display: block;
    margin: 0px;
    padding: 20px;
    border-radius: 15px;
    background-color: rgb(236, 236, 236);
    /* position: relative;
    top: -120px;
    z-index: 2; */
    
}


.ourservicesboxText h4{

    color: var(--themecolor);
    font-family: "Dancing Script", cursive;
}

.ourservicesboxText p{

    padding: 20px; 
    width: 100%;
    resize: vertical;
    overflow: auto;
    /*height: 150px;*/
    scrollbar-width: none;
}

.ourservicesboxText h6 a{

    color: var(--themecolor);
    text-decoration: none;
}


/*==========technologies===========*/


.technologiesbox{

    margin: 0px;
    padding: 0px;
    width: 100%;
    display: block;
    border-radius: 14px;
    border: solid 1px  var(--themecolor);
}


.technologiesboxImg{

    margin: 0 auto;
    display: table;
    padding: 0px;
}

.technologiesboxtext{

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

.technologiesboxtext h4{

    color: var(--themecolor);
}

.technologiesboxtext p{

    color: black;
}


/*=============contactus===========*/

.contactusbox{

    margin: 0px;
    padding: 20px;
    width: 100%;
    display: block;
    border: solid 1px var(--themecolor);
    border-radius: 15px;
}

.contactusboxicon{

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

.contactusboxicon i{

    color: var(--themecolor);
    font-size: 24px;
} 


.contactusboxtext{

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


.contactusboxtext h4{

    color: var(--themecolor);
    font-family: "Dancing Script", cursive;
}

.contactusboxtext p ,.contactusboxtext p a {

    color: black;
    font-size: 16px;
    text-decoration: none;
}


/*----map------*/

.mapbox{

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


@media(max-width:991px){

    .resnav{

        display: block;
    }

    .dis-none{

        display: none;
    }

    .headernavigation{

        width: 250px;
        background-color: white;
        height: 100%;
        position: fixed;
        top: 0;
        left: -100%;
        margin: 0px;
        padding: 0px;
        display: block;
        transition: all 0.5s ease-in-out;
        z-index: 99999;

    }

    .headernavigation ul{

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

    .headernavigation ul li{

        margin: 0px;
        padding: 10px 0px;
        text-decoration: none;
    }

    .headernavigation.main{

        left: 0;
    }
    .bannerbox1{

        text-align: center;
    }
    
    .bannerbox1 h2{

        font-size: 32PX;
    }

    .bannerbox{

        height: 350PX;
    }

    .howcanhelplefttext{

        border-bottom: dotted 1PX var(--themecolor);
        border-right: none;
    }

}