@font-face{font-family:Poppins;src:url(fonts/Poppins/Poppins-Thin.ttf);font-weight:300;font-display:swap}
@font-face{font-family:Poppins;src:url(fonts/Poppins/Poppins-Regular.ttf);font-weight:400;font-display:swap}
@font-face{font-family:Poppins;src:url(fonts/Poppins/Poppins-Medium.ttf);font-weight:500;font-display:swap}
@font-face{font-family:Poppins;src:url(fonts/Poppins/Poppins-SemiBold.ttf);font-weight:600;font-display:swap}
@font-face{font-family:Poppins;src:url(fonts/Poppins/Poppins-Bold.ttf);font-weight:700;font-display:swap}
/* 1440px  1080px 720px 480px*/
:root{
	--primary:#3A0130;
	--light-blue:#793d7f;
	--secondary-color:#ffeff7;
	--text-color:#010101;
	--accent-color:#af0853;
	--gray-background:#F2F1F6;
	--base-font:'Poppins',sans-serif;
	--separator:1em;
	--double-separator:2em;
	--container-width:1440px;
	}
*{box-sizing:border-box;-o-box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box}
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
html {
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}
body{ overflow-X:hidden;height:100%;    width: 100%;line-height: 1.5; -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;font-family:var(--base-font);    color: var(--text);}
ol,ul{list-style:none}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}
table{border-collapse:collapse;border-spacing:0}
img, picture, video, canvas, svg {display: block;max-width: 100%}
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}
p{opacity:.9}
input, button, textarea, select {font: inherit}
.logo{height:100px}
.container{max-width:var(--container-width);margin:0 auto;width:90vw}
.content{padding:var(--separator) 0}
.flex{display:flex}
.productsList:after {content: "";flex: auto}
.fwrap{flex-wrap:wrap}
.acenter{align-items:center}
.fcenter{justify-content:center}
.fspace{justify-content:space-between}
.b1{width:100%}
.b2{width:calc(90% / 2)}
.b3{width:calc(100% / 3)}
.b4{width:calc(100% / 4)}
.b5{width:calc(100% / 5)}
.b6{width:calc(100% / 6)}
.b75{width:calc(100% * 0.75)}
.b8{width:calc(100% / 8)}
.b12{width:calc(100% / 12)}
.flexBlock{border:1px solid #000;background:var(--gray-background)}
.overflowHidden{overflow:hidden}
.crsIcon{position: relative;display: inline-block;transition: all .3s ease-in-out;position:relative}
.s8{width:8px;height:8px}
.s12{width:12px;height:12px}
.s14{width:14px;height:14px}
.s16{width:16px;height:16px}
.s20{width:20px;height:20px}
.s24{width:24px;height:24px}
.s36{width:36px;height:36px}
.s48{width:48px;height:48px}
.s60{width:60px;height:60px}
.crsIcon:before{content:"";display:block;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background-repeat:no-repeat;width:100%;height:100%}
.cartIcon:before{background:url(icons/cart.svg) center center;background-size:contain}
section{position:relative;min-height:calc(100vh - 132px );margin-bottom:1px!important}
.firstContent{ margin:20px 180px;font-size:1.25rem;line-height:2}.mainContent{ padding:60px 180px;font-size:1.25rem;line-height:2}
.secondSection{font-size:18px;line-height:1.5;text-align:center}
ul svg{margin-right:16px}
h1{       font-size: 4rem;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -1px;margin-bottom:20px}
h2{font-size:2.5rem;margin-bottom:20px;font-weight:600;line-height:1.25}
h1 strong,h2 strong{    color: var(--accent-color);    --underline: 3px;
    background-image: linear-gradient(currentColor,currentColor);
    background-size: 100% 2px;
    background-position: 0 1.1em;
    background-repeat: no-repeat;}
.blue h2{color:#fff}
.blue h2 strong{color:#81c2ff}
.roundedBefore{width:600px;height:600px;display:block;position:absolute;left:0;top:0;z-index:-1}
.roundedBefore:before {
    content: "";
    background-color: var(--gray-background);
    width: 600px;
    height: 600px;
    top: -200px;
    left: -100px;
    border-radius: 300px;
    position: absolute;
    z-index: -1;
    transform: translateZ(0);
    transition: opacity .3s .5s,transform .7s .3s;
}
.whatWedo{padding:0;font-size: 16px;text-align:left;width:100%;margin:var(--double-separator) auto}
h3{color:var(--accent-color);
    border-radius: 8px;
    display: inline;
    font-weight: 600;
    font-size: 28px;}
	.whatWedo ul{margin-top:var(--separator)}
	.whatWedo li{margin-bottom:var(--double-separator);padding-left: var(--double-separator);
    position: relative;}.whatWedo ul li{padding:0;margin:0}
.button { cursor:pointer;
 text-decoration:none;
 color:#1e1e1e;
    z-index: 1;
    border: 2px solid #ececec;
    border-radius: 60px;
    display: flex;
    height: 60px;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    transition: transform .2s ease-in-out,background-color .3s,color .4s,border-color .5s;
    padding-left: 30px;
    padding-right: 30px;    display: inline-block;
    line-height: 58px;
   
}
.callto{ border:none; background-color: var(--primary);color:#fff; box-shadow: 0 18px 34px -20px var(--light-blue);}
.iconButton{padding-right:70px}
.iconButton span{    background: var(--light-blue);
    display: inline-block;
    margin-left: 16px;
    border-radius: 50%;
    padding: 14px;
    position: absolute;
    right: 6px;
    top: 6px;}
	.blue,.grey{padding-top:170px;padding-bottom:170px;position:relative;}
	.blue .mainContent{background:var(--primary);}
	.light{background:var(--gray-background);}
	.grey .mainContent{background:var(--gray-background);}
	.blue:before{    content: "";
    background-color: var(--primary);
    width: 100%;
    height: 170px;
    left: 0;
    position: absolute;    -webkit-clip-path: ellipse(54% 150% at center calc(156.5% + 1px));
    clip-path: ellipse(54% 150% at center calc(156.5% + 1px));top:0}
	.blue:after{    content: "";
    background-color: var(--primary);
    width: 100%;
    height: 170px;
    left: 0;
    position: absolute;    -webkit-clip-path: ellipse(54% 150% at center calc(156.5% + 1px));
    clip-path: ellipse(54% 150% at center calc(156.5% + 1px));bottom:0;transform:rotate(180deg)}
	.firstImage{width:100%;margin-left:10vw;
    border-radius: 40px;height:calc(100vh - 340px);min-height:360px;
    overflow: hidden;position:relative;z-index:1}.firstContent{position:relative}
	.specialButton{border-radius:0 40px 0 0;background:#fff;position:absolute;bottom:-1px;left:10vw;padding:20px;z-index:2}
	.specialButton:before{content:"";background-color: #fff;
    width: 40px;
    height: 40px;
    clip-path: path("M0 0 Q0,40 40,40 L 0 40 Z");display:block;top:-39px;left:-1px;position:absolute}
	.specialButton:after{content:"";background-color: #fff;
    width: 40px;
    height: 40px;
    clip-path: path("M0 0 Q0,40 40,40 L 0 40 Z");display:block;bottom:-1px;right:-39px;position:absolute}
	.firstImage video{height: calc(100vh - 340px);
    object-fit: cover;}
	.ball{background-image:radial-gradient(100% 100% at 85.2671% 39.7648%, var(--light-blue) 0%, var(--light-blue) 2.5%, var(--light-blue) 44.27%, var(--primary) 80%, var(--primary) 100%);width: 200px;
    height: 200px;
    border-radius: 100px;
    position: absolute;
    right: 5%;z-index:9;
    top: 40px;
    box-shadow: 0 18px 34px -20px rgb(40 36 67 / 80%);animation:bounce 5.5s infinite;
	 animation-timing-function: ease-in-out;
    -webkit-animation-timing-function: ease-in-out;
}
h4{    font-weight: 600;
    font-size: 2rem;
margin-bottom: 20px;}
footer a{padding:30px 0}.copyright{font-size:14px}
	footer .callUs a{color:inherit;text-decoration:none;padding:var(--separator)}
@media (prefers-reduced-motion: no-preference) {
	@-webkit-keyframes bounce {
	0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);}	
	40% {-webkit-transform: translateY(-30px);}
	60% {-webkit-transform: translateY(-15px);}
}
 
@-moz-keyframes bounce {
	0%, 20%, 50%, 80%, 100% {-moz-transform: translateY(0);}
	40% {-moz-transform: translateY(-30px);}
	60% {-moz-transform: translateY(-15px);}
}
 
@-o-keyframes bounce {
	0%, 20%, 50%, 80%, 100% {-o-transform: translateY(0);}
	40% {-o-transform: translateY(-30px);}
	60% {-o-transform: translateY(-15px);}
}
@keyframes bounce {
	0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
	40% {transform: translateY(-30px);}
	60% {transform: translateY(-15px);}
}
	.animated {
    animation-timing-function: ease-in-out;
    -webkit-animation-timing-function: ease-in-out;
	    -webkit-animation-duration: .75s;
    animation-duration: .75s;
}
.fadeInRight{animation-name:fadeInRight}
.fadeInTop{animation-name:fadeInTop}
.fadeInLeft{animation-name:fadeInLeft}
.fadeInBottom{animation-name:fadeInBottom}
@keyframes fadeInRight {
0%{opacity:0;transform:translatex(100px);-webkit-transform:translatex(100px)}
100%{opacity:1;transform:translatex(0);-webkit-transform:translatex(0)}
}
@keyframes fadeInLeft {
0%{opacity:0;transform:translatex(-100px);-webkit-transform:translatex(-100px)}
100%{opacity:1;transform:translatex(0);-webkit-transform:translatex(0)}
}
@keyframes fadeInTop {
0%{opacity:0;transform:translatey(-100px);-webkit-transform:translatey(-100px)}
100%{opacity:1;transform:translatey(0);-webkit-transform:translatey(0)}
}
@keyframes fadeInBottom {
0%{opacity:0;transform:translatey(100px);-webkit-transform:translatey(100px)}
100%{opacity:1;transform:translatey(0);-webkit-transform:translatey(0)}
}}
header .button{margin-left:20px}
.button{transition: all ease-in-out .5s;position:relative;overflow:hidden}
.button:before{content:"";background:var(--primary);opacity:0;transition: all ease-in-out .3s;position:absolute;top:50%;left:50%;    transform: translate(-50%,50%) scale(.5);z-index: -1;width:100%;height:0;    border-radius: 100%;}
.only-mobile{display:none}
#whatsappNew {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 999;
}
#whatsappNew a {
    display: block;
    width: 60px;
    height: 60px;
    background: #25d366;
    border-radius: 50%;
    box-shadow: 0px 0px 15px 0px rgb(0 0 0 / 15%);
    position: relative;
}#whatsappNew a:before {
    content: "";
    background: url(whatsapp.svg);
    width: 36px;
    height: 36px;
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    background-repeat: no-repeat;
    background-size: cover;
}
.beforeLights{position:relative;border-radius:40px;background:var(--gray-background);padding:40px;margin-top:40px}
.beforeLights:before{content:"";background:url('bg.png') center top no-repeat;background-size:contain;display:block;width:100%;height:100%;position:absolute;z-index:0;opacity:0.25;    top: 0;}
.beforeLights .container{z-index:2;position:relative}
.beforeLights ul strong{    display: block;
    margin-top: 20px;
    font-weight: 600;
    position: relative;
    padding-left: 40px;
font-size: 18px;}.beforeLights ul strong:before{content:"";width:30px;height:1px;background:currentColor;display:block;position:absolute;left:0;top:50%;transform:translateY(-50%)}
@media (min-width:1080px) {
.button:hover:before{opacity: 1;
    transform: translate(-50%,-50%) scale(1);height:200%;width:110%;
    transition: background-color .3s,transform .4s ease-out,opacity .4s .1s;}
	.button:hover{border-color:var(--primary);transform:scale(1.05);color:#fff}
}
.overflowHidden{overflow:hidden}
@media (max-width:1279px) {
	.firstContent{margin:40px}
	.ball{    top: 80px;    right: -10%;}
	
}
@media (max-width:900px) {
	.only-mobile {
    display: block;
}

.callUs {padding:20px}
.navigation .callUs a{font-size:20px;text-decoration:none;    margin-bottom: 0;margin-left:10px}
.navigation .callUs li{margin:20px 0}
.navigation .callUs img{filter: invert(100%) sepia(1%) saturate(3064%) hue-rotate(193deg) brightness(113%) contrast(101%);}
	.b2{width:90%;margin: 20px 5%;}
	.logo {    margin-left: 5vw;
}
	.navigation .no-mobile{display:none}
#hamburger,.visible{    z-index: 99999;display:flex}
.menu-icon{ 
    height: 16px;
position: relative;transform:translateX(-10px)}
.menu-icon span{   width: 20px;height: 2px;
    border-radius: 2px;
    display: block;
    background: #fff;
    position: absolute;
    left: 0;
    top: 0;
      -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;}
.navigation{position: fixed;
    background: var(--primary);
    top: 0;
    right: 0;
padding-top: 100px;
    height: 100%;width:100%;
    z-index: 99;}	
.navigation.visible{    display: block;}
.navigation a{    color: #fff;
    display: block;
margin-bottom: 20px;}.no-mobile{display:none}
.navigation .callto{    background: var(--light-blue);
    color: var(--primary);
font-weight: bold;}
.menu-icon span:nth-child(2){width:10px;top:7px;left:5px}
.menu-icon span:nth-child(3){top:14px}
.close .menu-icon span:nth-child(1) {margin-top: 6px;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
.close .menu-icon span:nth-child(2) {
    background-color: transparent;
    -webkit-transition: none;
    -moz-transition: none;
    -o-transition: none;
    transition: none;
}
.close .menu-icon span:nth-child(3) {
     margin-top: -8px;
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
h1 {margin:20px auto;
font-size: 2.5rem;}
h2{font-size:1.75rem}
h4{font-size:1.5rem}
.ball{width: 160px;
        height: 160px;
        right: 0;}
.mainContent {
padding: 10% 5%}.firstImage{margin-left:20px}
.roundedBefore:before,.roundedBefore{    width: 100%;
height: 400px;}
.whatWedo{width:100%}
header .button {
    margin-right: 5%;
}.specialButton {
    left: 19px;
}
}
@media (max-width:640px) {
	.firstImage{        margin-left: 0;
        margin-right: 5vw;    height: calc(100vh - 380px);
	width: 90vw;}.specialButton {
    left: -1px;
}
	h1{font-size: 2rem;margin:20px 0 50px 0}
    .firstContent {
        margin: 0;
    }	
	
	
}