@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@100;200;300;400;500;600;700;800;900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Niconne&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500;600;700&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@100;200;300;400;500;600;700&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Baloo+Tamma+2:wght@400;500;600;700;800&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Jost:wght@100;200;300;400;500;600;700;800;900&display=swap');

 h4{
    font-size: 18px !important;
    padding: 22 !important;
    font-size: 16px !important;
    margin-bottom: 27px !important;
    margin-top: 10px !important;
    color: #313030 !important;
    /* font-weight: 600; */
    line-height: 30px !important;
    /* font-family: 'Exo 2', sans-serif; */
}

.nav-scroll .menu-icon{
    
    display:none !important;
}

header{

position: fixed;
top: 0;
z-index: 2;
width: 100%;

}

.logo{
    position: relative;
    z-index: 3;
}




.icon-bx-wraper {
    position: relative;
}

.d-flex {
    display: flex!important;
}

.box-number {
   font-size: 55px;
    font-weight: 100;
    font-family: poppins;
    line-height: 60px;
    padding: 0 0 15px 3px;
    position: relative;
    float: left;
    width: 23%;
    color: #fff;
}

.dlab-tilte {
           align-self: end;
    font-size: 28px;
    line-height: 30px;
    margin-bottom: 10px;
    padding-left: 30px;
    font-weight: 800;
    /* font-family: 'Josefin Sans', sans-serif; */
    color: #fff;
 
}

.box-number:after {
content: "";
position: absolute;
width: 80px;
height: 1px;
bottom: 0;
left: 0;
background-color: #fff;
}





.welback{

position: relative;
padding: 100px 0px;
}



.welleft {
top: 2%;
left: -9%;
position: absolute;
width: 24%;
opacity: 1;
}







.welcome{
    
    position: relative;
    
}



.pc1{

    position: absolute;
    left: 0%;
    top: -1%;
    z-index: 1;
    width: 20%;

}



.pc2{

position: absolute;
    right: 0%;
    top: 20%;
    z-index: 1;
    width: 42%;

}



.pc3{

    position: absolute;
    left: 0%;
    top: 3%;
    width: 80%;

}



.pc4{

      position: absolute;
    right: 10%;
    top: 59%;
    /* width: 80%; */
    z-index: -1;

}

.pc{
    position: relative;
    z-index: 2;
    width: 70%;
    left: 12%;
}



@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }



.welheading{
    
   font-family: jost;
    font-size: 55px;
    font-weight: 300;
    line-height: 55px;
    position: relative;
    color: #0cc0c9;
    
}

.welheading span{
    
    font-weight: 900;
    color: #db5f5f;
    
}




.welheading:after{
    
     content: "";
    width: 126%;
    height: 100%;
    background: #fde0e0a6;
    /* margin-left: 15px; */
    /* margin-bottom: 7px; */
    -webkit-transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    -ms-transition: .25s ease-in-out;
    -o-transition: .25s ease-in-out;
    transition: .25s ease-in-out;
    position: absolute;
    top: 0;
    left: -24%;
    z-index: -1;
    
    
}







.para{
    margin: 30px 0px;
    
}







@keyframes slide{
	from { background-position: 0 0; }
    to { background-position: -200px 0; }
}

@-webkit-keyframes slide{
	from { background-position: 0 0; }
    to { background-position: -200px 0; }
}






.welheading span{

font-weight: 800;

}



.Salvador{
-webkit-text-stroke-color: #97e5d7a6;
    position: absolute;
    bottom: 17%;
    right: 2%;
    font-size: 70px;
    text-transform: uppercase;
    font-family: Poppins;
    color: transparent !important;
    -webkit-text-stroke-width: 1px;
    z-index: 0;
    line-height: 75px;
    text-align: right;

}









.categoryback{
margin: 50px 0px;
position: relative;
background: #40dbd0;
    padding: 50px 0px;
}




 .category-detail {
       position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: 100px auto;
    /* display: flex; */
    /* align-items: center; */
    z-index: 1;
    text-align: center;
    padding: 50px 50px;
     color: #fff;
}


























.productback{
    position: relative;
    margin-top: 6%;
}





.product1{
    position: absolute;
    right: 0%;
    top: -7%;
    
}






.center{
    text-align: center;
}

.product{
    
   margin-top: 50px; 
    
}


.productlist{
    width: 31.1%;
    border-radius: 20px;
 
    display: inline-block;
    /* margin-top: 122px; */
    padding:5px 15px; 
    position: relative;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    position: relative;
      box-shadow: 0px 20px 35px rgb(0 0 0 / 15%);
    margin: 5% 1%;
}




.productlist:hover {
    background-color: #fdfdfdfa !important;
  
}






.productlist:nth-child(1){
      background-color: #ff151559;
     color: #457B9D;
}

.productlist:nth-child(2){
  background: #887067;
    color: #f39909;
}



.productlist:nth-child(3){
    background: #3333333;
    color: #764641;
}


.productlist:nth-child(4){
       background: #83b0eafa;
    color: #2b412d;
    
}

.productlist:nth-child(5){
      background: #ffffff;
    color: #2b275b;
    
}

.productlist:nth-child(6) {
    background: #7ba5dc;
    color: #153532;
}




.gl{
    margin-top: -31%;
    
}


.productlist .detailp {
   
        /* font-family: "Roboto", sans-serif; */
    font-size: 20px;
    font-weight: 400;
    height: 100%;
    line-height: 28px;
    letter-spacing: 0.3em;
    margin: 0;
    position: absolute;
    right: 25px;
    text-align: center;
    text-transform: uppercase;
    top: 3px;
    -ms-writing-mode: tb-lr;
    writing-mode: vertical-lr;
}


.proname h2 {

font-family: jost;
font-size: 24px;
font-weight: 300;
line-height: 28px;
letter-spacing: 0.2em;
margin: 20px 0px;
text-transform: uppercase;
transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
}


.proname h2 span{
    font-weight: 700;
}






.padd0{
    padding: 0px;
    
}




.proheading{
   margin-bottom: 0px;
}



.heading{
        font-family: jost;
    font-size: 50px;
    font-weight: 200;
    line-height: 55px;
    position: relative;
    color: #31708f;
    display: inline-block;
        padding: 0% 6%;
}


.heading span{
    font-weight: 900;
}


.headingicon1{
position: absolute;
left: 0%;
top: 0%;
width: 8%;
}


.headingicon2{
    position: absolute;
    right: 0%;
    top: 0%;
    width: 7%;
    animation: spin 4s linear infinite;

}





a#backToTop {
        /* width: 40px; */
    /* height: 40px; */
    /* opacity: 0.5; */
    position: fixed;
    bottom: 5px;
    right: 0%;
    bottom: 0%;
    /* text-indent: -10000px; */
    outline: none !important;
    /* background-image: url(top.png); */
    background-repeat: no-repeat;
   
}





.kidback{
    position: relative;
}

.cloud{
    
    
    position: absolute;
    top: 0%;
    left: 0%;
}



.testiback{
    margin: 50px 0px;
    
    position: relative;
    
}

.testiright{
position: absolute;
right: 0%;
bottom: 0%;
    width: 38%;
}





.whyback{
    margin: 50px 0px;
    position: relative;
  
   
}


.whybackimage{
    position: absolute;
    top: 20%;
    left: 0%;
}

.choose-image-shape{
position: relative;
}

.choose-image-shape .shape-1 {
position: absolute;
top: -50px;
left: 0;
z-index: 1;
-webkit-animation: moveLeftBounce 3s linear infinite;
animation: moveLeftBounce 3s linear infinite;
}

.choose-image-shape .shape-2 {
position: absolute;
right: -10%;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
z-index: 1;
-webkit-animation: moveLeftBounce 3s linear infinite;
animation: moveLeftBounce 3s linear infinite;
z-index: -1;
}

.choose-image-shape .shape-3 {
position: absolute;
bottom: 10%;
left: 12%;
z-index: -1;
-webkit-animation: moveLeftBounce 3s linear infinite;
animation: moveLeftBounce 3s linear infinite;
}


.whyheading{
font-family: jost;
    font-size: 50px;
    font-weight: 200;
    line-height: 55px;
    position: relative;
        margin: 0px 0px 30px;
color: #f3610c;
}


.whydetail{
    
    border-left: 4px solid #000;
    padding-left: 40px;
    margin-bottom: 50px;
}
.whyheading span{
    font-weight: 800;
}

.whylist{
    
    display: inline-block;
    width: 49%;
    text-align: center;
    
}


.whylist .mkdf-numbered-dual-image-holder{
position: relative;
/* width: 31%; */
display: inline-block;
/* margin: 10% 1% 0%; */
text-align: center;
}






.mkdf-numbered-dual-image-holder .mkdf-numbered-holder .mkdf-number-background-holder {
    width: 140px;
    height: 140px;
    background-color: currentColor;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 6px 12px rgb(0 0 0 / 22%);
}
.mkdf-numbered-dual-image-holder .mkdf-numbered-holder .mkdf-number-background-holder:before {
    content: '';
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: #fff;
    opacity: .9;
    border-radius: 50%;
    -webkit-transition: opacity .3s ease;
    -o-transition: opacity .3s ease;
    transition: opacity .3s ease;
}

.mkdf-numbered-dual-image-holder .mkdf-numbered-holder .mkdf-number-border-holder {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border: 2px currentColor dashed;
    border-radius: 50%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    animation: spin 4s linear infinite;
}

.mkdf-numbered-dual-image-holder .mkdf-numbered-holder {
  
   
    width: 140px;
    height: 140px;
    
}
.mkdf-numbered-dual-image-holder .mkdf-numbered-holder .mkdf-number {
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 70px;
    line-height: 1em;
 font-family: jost;
    letter-spacing: -.01em;
    z-index: 10;
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}

.wname{
       font-size: 25px;
    font-family: jost;
    /* text-transform: uppercase; */
    font-weight: 400;

margin-top: 20px;
}






@keyframes rotateMe {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
@keyframes rotate3d {
    0% {
        transform: rotateY(0deg);
    }
    100% {
        transform: rotateY(360deg);
    }
}
@keyframes moveScale {
    0% {
        transform: scale(0.6);
    }
    50% {
        transform: scale(0.8);
    }
    100% {
        transform: scale(0.6);
    }
}
@keyframes moveLeftBounce {
    0% {
        transform: translateX(0px);
    }
    50% {
        transform: translateX(20px);
    }
    100% {
        transform: translateX(0px);
    }
}
@keyframes moveBounce {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(20px);
    }
    100% {
        transform: translateY(0px);
    }
}
@keyframes border-transform-default {
    0%, to {
        border-radius: 63% 37% 54% 46%/55% 48% 52% 45%;
    }
    14% {
        border-radius: 40% 60% 54% 46%/49% 60% 40% 51%;
    }
    28% {
        border-radius: 54% 46% 38% 62%/49% 70% 30% 51%;
    }
    42% {
        border-radius: 61% 39% 55% 45%/61% 38% 62% 39%;
    }
    56% {
        border-radius: 61% 39% 67% 33%/70% 50% 50% 30%;
    }
    70% {
        border-radius: 50% 50% 34% 66%/56% 68% 32% 44%;
    }
    84% {
        border-radius: 46% 54% 50% 50%/35% 61% 39% 65%;
    }
}






















.so {
    margin: 12px 0px;
}

.so li {
    list-style: none;
    display: inline-block;
    font-family: 'Baloo Paaji 2', cursive;
    font-size: 17px;
}
.soo li:nth-child(1) span {
    background: #0aaecb;
}
.so li span {
    position: relative;
    font-size: 18px;
    width: 35px;
    height: 35px;
    line-height: 34 px;
    text-align: center;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    transition: all 500ms ease;
    background: #fbb419;
    margin-right: 18px;
    border: 2px solid #fff;
}
.soo li:nth-child(2) span {
    background: #6bcff5;
}
.soo li:nth-child(3) span {
    background: #ff0101;
}

.fooheading h6 {
       font-size: 30px;
    /* font-family: 'Baloo Paaji 2', cursive; */
    font-weight: 600;
    margin: 20px 0px 30px;
    font-family: jost;
    color: #fff;
}
.footer-contacts {
    margin: 0px;
    padding: 0px;
}

.footer-contacts li {
    float: left;
    width: 100%;
    /* padding: 8px 0; */
    font-weight: 500;
    line-height: 21px;
    list-style: none;
    color: #fff;
    position: relative;
    padding-left: 10%;
    margin-bottom: 20px;
}
.footer-contacts li i {
    position: relative;
    top: 2px;
    color: #fff !important;
    font-weight: 500;
    font-size: 14px;
    position: absolute;
    top: 10%;
    left: 0%;
}
.footer-contacts li span {
    float: left;
    text-align: left;
    padding-right: 12px;
    text-transform: uppercase;
}

.footer-contacts {
    margin: 0px;
    padding: 0px;
}

.footer-contacts li i {
    position: relative;
    top: 2px;
    color: #fff !important;
    font-weight: 500;
    font-size: 14px;
    position: absolute;
    top: 10%;
    left: 0%;
}
.footer-contacts li a {
    color: #fff;
}

footer{
    position: relative;
    background: #38bfd5;
    margin: 50px 0px 0px;
    padding-top: 150px;
}

.footop{
    position:absolute;
    top: 0%;
    left: 0%;
}

.footer1{
    position: absolute;
    top: -35%;
    left: 0%;
    width: 20%;
}



.copyright {
    text-align: center;
    border-top: 1px solid #54deed;
    padding: 20px 0px;
    margin-top: 10px;
}

.copy{
    margin: 0px;
    color: #fff;
    font-weight: 500;
    letter-spacing: 1px;
}




















.poster3 {
    position: relative;
    margin: 20px 0px;
}
.poster3 .p3img {
    position: absolute;
    bottom: 0%;
    left: 0%;
}

.postersmallright {
    text-align: right;
   margin: 20% 10%;
}

 .postersmallleft {
    
   margin: 25% 10% 20% 0%;
}


.postersmallright h1 {
     margin-left: -50%;
    font-size: 45px;
    margin-bottom: 20px;
    font-weight: 200;
    color: #000;
    margin-top: 0px;
    line-height: 45px;
    padding-bottom: 10px;
    /* font-family: 'Playfair Display', serif; */
    font-family: 'Cormorant Garamond', serif;
    font-family: jost;
    background: #fff;
    padding: 5px 10px;
}


.postersmallleft h1 {
     margin-left: -35%;
    font-size: 45px;
    margin-bottom: 60px;
    font-weight: 800;
    color: #000;
    margin-top: 0px;
    line-height: 45px;
    padding-bottom: 10px;
    /* font-family: 'Playfair Display', serif; */
  display: inline-block;
    font-family: jost;
    background: #fff;
    padding: 5px 10px;
    position: relative;
  
}


.postersmallleft h1:before {
    content: '';
    position: absolute;
    width: 10%;
    height: 3px;
    right: 0%;
    top: 0%;
    background: #000;
}

.pline {
    position: relative;
}

.pline:before {
    content: '';
    position: absolute;
    width: 20%;
    height: 2px;
    left: -10%;
    top: 22%;
    background: #000;
}

.poster4 {
    margin: 40px 0px;
    position: relative;
}

.poster4 .p4img {
    position: absolute;
    bottom: 0%;
    right: 0%;
}



.poster4 .menright {
        position: absolute;
    top: -12%;
    right: 0%;
    width: 23%;
    z-index: 1;
}



.poster4 .menleft {
        position: absolute;
    top: -12%;
    left: 0%;
    width: 23%;
    z-index: 1;
}



.pline2 {
    position: relative;
}


.addback{
    position: relative;
}







.drop{
    
position: absolute;
    right: -23%;
    bottom: -40%;
    width: 55%;
    z-index: -1;
 
    
}


.addimageleft{
    
    position: relative;
    z-index: 2;
    margin-bottom: 50px;
    box-shadow: 0 8px 33px rgb(0 0 0 / 18%);
    
}

.addimageright{
    
    position: relative;
    z-index: 2;
 
    box-shadow: 0 8px 33px rgb(0 0 0 / 18%);
    
}

.addleft {
    margin: 18% 0% 0% 10%;
    position: relative;
}

.addleft h4 {
    
    font-size: 52px;
    margin-bottom: 60px;
    font-weight: 800;
    color: #0cc0c9;
    margin-top: 0px;
    line-height: 55px;
    padding-bottom: 10px;
    /* font-family: 'Playfair Display', serif; */
  display: inline-block;
    font-family: jost;
    
    padding: 5px 10px;
    position: relative;
  
}


.addleft h4 span{
    
    color: #db5f5f;
    
}


.addleft h1:before {
    content: '';
    position: absolute;
    width: 10%;
    height: 3px;
    right: 0%;
    top: 0%;
    background: #000;

}




.addright {
    margin: 18% 10% 0% 0%;
    position: relative;
    text-align: right;
}

.aeroo{
    
      position: absolute;
    left: -18%;
    bottom: -41%;
    width: 46%;
    
}

.addright h5 {
    
    font-size: 52px;
    margin-bottom: 60px;
    font-weight: 800;
    color: #ef668d;
    margin-top: 0px;
    line-height: 55px;
    padding-bottom: 10px;
    /* font-family: 'Playfair Display', serif; */
  display: inline-block;
    font-family: jost;
    
    padding: 5px 10px;
    position: relative;
   
  
}


.addright h5 span{
    
    color:#e9ac39;
    
}


.addright h1:before {
    content: '';
    position: absolute;
    width: 10%;
    height: 3px;
    left: 0%;
    top: 0%;
    background: #000;

}

.quality{
    
    margin-top: 30px;
    color: #fff;
    
}



.sidenav {
  height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    right: 0;
    background-color: #fff;
    overflow-x: hidden;
    transition: 0.5s;
    padding: 50px 0px 50px 0px;

}

.sidenav a {
  
  text-decoration: none;
  
  color: #3c3a3a;
  display: block;
  transition: 0.3s;

}



.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}




.xx{
font-size: 15px;
    cursor: pointer;
    /* color: #74c508; */
    text-align: right;
    /* border-left: 1px solid #c1d2ae; */
    /* display: flex; */
    text-align: right;
}

.xx .one{
    
    
    width:50%;
    padding: 18px 0px;
}



.xx .two{
   
   padding: 15px 0px;
    color: #fff;
    font-size: 20px;
}



.one .one-detail{
      
    background: #fff;
    border-radius: 25px;
    
    box-shadow: 5px 10px 30px rgba(0,0,0,0.1);
    position: absolute;
    top: 100%;
    right: 0;
    visibility:hidden;
    opacity: 0;
    
    width: 360px;

    z-index: 999;
    
 
    
}

.one:hover .one-detail{
    
   visibility:visible;
    opacity: 1; 
    
    
}

.menu-controls{
   
    cursor: pointer;
    margin: 15px 0px;
    text-align: right;
}


.get .imagee {
    width: 77%;
    
}

.get h1 {
    
    font-size: 16px;
    margin-bottom: 27px;
    margin-top: 10px;
  
    color: #313030;
    /* font-weight: 600; */
  
    line-height: 30px;
    /* font-family: 'Exo 2', sans-serif; */
  
    
}





.be-mobile-menu-icon {
    display: inline-block;
    position: relative;
    -webkit-transform: translateX(0) translateY(-50%);
    -ms-transform: translateX(0) translateY(-50%);
    transform: translateX(0) translateY(-50%);
    width: 30px;
    height: 3px;
    top: 0px;
    -webkit-transition: background-color .3s;
    -o-transition: background-color .3s;
    transition: background-color .3s;
    visibility: hidden;
    background: #fff;
}

.be-mobile-menu-icon.style2 .hamburger-line-1, .be-mobile-menu-icon.style2 .hamburger-line-3 {
    width: 50%;
}
.be-mobile-menu-icon .hamburger-line-1 {
    top: -8px;
}
.be-mobile-menu-icon span {
    display: inline-block;
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: inherit;
    right: 0;
    -webkit-transition: top .5s, width .2s, -webkit-transform .5s;
    transition: top .5s, width .2s, -webkit-transform .5s;
    -o-transition: transform .5s, top .5s, width .2s;
    transition: transform .5s, top .5s, width .2s;
    transition: transform .5s, top .5s, width .2s, -webkit-transform .5s;
    visibility: visible;
}

.be-mobile-menu-icon.style2 .hamburger-line-1, .be-mobile-menu-icon.style2 .hamburger-line-3 {
    width: 50%;
}
.be-mobile-menu-icon .hamburger-line-3, .be-mobile-menu-icon:after {
    top: 8px;
}



.jojo {
    
    margin: 0px;
    padding-right: 25px;
}

.jojo li {
    list-style: none;

    text-transform: uppercase;
    padding: 6px 0px;
    border-bottom: 1px dashed #d8d4d4;
}