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


@font-face {
font-family: 'Budokan';
src: url('/wp-content/fonts/BudokanRounded-Bold.woff2') format(woff2);
font-weight:700;
font-style:normal;
font-display:swap;
}

@keyframes revealHeader{
0%{
    padding:unset;
    width:100%;
}
50%{
    padding:unset;
    width:100%;
}  
100%{
    padding:0 30px;
    width:200%;
}
}


@keyframes wiggle {
0%   { transform: translateX(-100%) rotate(0deg); }
7%   { transform: translateX(-100%) rotate(-6deg); } 
15%  { transform: translateX(-100%) rotate(6deg); }
23%  { transform: translateX(-100%) rotate(-6deg); } 
30%  { transform: translateX(-100%) rotate(0deg); }

100% { transform: translateX(-100%) rotate(0deg); }
}



.loaderVideo video {
    width: 100%;
    height: 100%;
}


.loader-overlay {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    pointer-events: none;
    left: 0;
    z-index: 9999999999999;
    cursor: default;
    opacity: 0;
}

.loaderVideo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: auto;
    max-width: 500px;
    min-width: 150px;
    z-index: 10;
    opacity: 0;
    height: auto;
}


.shape-overlays {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    pointer-events: none;
    left: 0;
    z-index: 1;
}



html body .visible{
    opacity:1;
    pointer-events:all;
}

.rotate{
    transform: rotate(180deg);
}

html,body{
scroll-behavior:smooth;
}

.headerNav {
position: fixed;
width: 100%;
height: 10vh;
background-color: #88b04b;
}

.headerLogo>a {
width: 100%;
height: 100%;
display: block;
}

.headerLogo svg {
width: 100%;
height: 100%;
display: block;
object-fit: contain;
}

.headerLogo {
width: auto;
height: 100%;
max-height: 8vh;
aspect-ratio: 1.07/1;
transition: all 0.25s cubic-bezier(.83,.37,0,.51);
}


.headerNav {
position: fixed;
width: 100%;
height: 10vh;
background-color: #88b04b;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
padding: 0 4%;
box-sizing: border-box;
z-index: 110;
transition: all 0.25s cubic-bezier(.83,.37,0,.51);
}


.headerNav>div {
width: 50%;
height: 100%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}


.leftHalf .desktopNavLink {
margin-right: 18%;
}

.headerNav a {
font-family: 'Budokan';
text-decoration: unset;
color: white;
font-size: 1.3em;
}

.servicesDropdown {
position: relative;
height: 100%;
background-color: #88b04b;
}


a.desktopNavLink {
font-family: 'Budokan';
text-decoration: unset;
color: white;
font-size: 1.3em;
height: 100%;
display: flex;
align-items: center;
padding: 0 30px;
overflow: clip;
position: relative;
transition: all 0.25s ease-in-out;
z-index: 10;
}

a.desktopNavLink::before {
content: '';
position: absolute;
top: 20%;
left: 0;
width: 100%;
height: 80%;
background-color: white;
z-index: -1;
border-top-right-radius: 13px;
border-top-left-radius: 13px;
transform: translateY(105%);
transition: transform 0.15s cubic-bezier(.97,1.04,.26,.8);
pointer-events: unset;
}


a.desktopNavLink:hover::before{
transform: translateY(0);
}

.headerCurrentLink::before{
transform: translateY(0)!important;
}

.headerCurrentLink{
color:#88b04b!important;
}


a.desktopNavLink:hover {
color: #88b04b;
}

.floatingWhatsapp {
position: fixed;
top: 84%;
transition: transform 0.15s cubic-bezier(.97,1.04,.26,.8);
animation: wiggle 2.5s infinite;
left: 94.5%;
z-index: 99;
width: 60px;
height: 60px;
transform: translateX(-100%);
}

.floatingWhatsapp:hover {
animation-play-state: paused;
}

.floatingWhatsapp a {
transition: transform 0.15s cubic-bezier(.97,1.04,.26,.8);
display: block;
width: 100%;
height: 100%;
}

.floatingWhatsapp:hover a{
transform:scale(1.1);
}

.headerSpacer {
padding-top: 10vh;
background-color: #88b04b;
transition: all 0.25s cubic-bezier(.83,.37,0,.51);
}

header#header:has(.headerStuck) .headerSpacer {
padding-top: 8vh;
}

.headerNav.headerStuck {
height: 8vh;
filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.3));
}


.servicesDropdownInner {
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: fit-content;
background-color: white;
border-bottom-left-radius: 13px;
border-bottom-right-radius: 13px;
z-index: -10;
padding: 20px;
transition: all 0.25s cubic-bezier(.97,1.04,.26,.8);
transform: translateY(-101%);
padding: unset;
overflow: clip;
}

.servicesDropdownInner :is(li,a) {
color: white;
font-family: 'Barlow';
font-size: 1.1em;
margin: 0.9em 0;
white-space: nowrap;
text-wrap: nowrap;
transition: all 0.95s cubic-bezier(.83,.37,0,.51);
}



.servicesDropdown:hover .servicesDropdownInner {
animation: revealHeader 0.5s cubic-bezier(.97,1.04,.26,.8) forwards;
transform: translateY(0);
filter: drop-shadow(0px 15px 16px rgba(0,0,0,0.1));
}

.servicesDropdown:hover .servicesDropdownInner :is(li,a) {
color: #88b04b;
}
.servicesDropdown:hover a.desktopNavLink::before {
transform: translateY(0);
}


.servicesDropdown:hover a.desktopNavLink {
color:#88b04b;
}

.servicesDropdownInner a {
overflow: clip;
display: block;
padding-bottom: 5px;
position: relative;
width: fit-content;
}

.servicesDropdownInner a:hover::after {
transform: translateY(-100%);
}

.servicesDropdownInner a::after {
content: '';
position: absolute;
top: 100%;
left: 0;
transform: translateY(-100%) translateX(-100%);
background-color: #88b04b;
width: 100%;
height: 3px;
transition: all 0.25s cubic-bezier(.83,.37,0,.51);
border-radius: 20px;
}


.headerStuck a.desktopNavLink {
font-size: 1.1em;
}

.headerStuck .headerLogo {
max-height: 6vh;
}

.headerNav .responsive{
display:none;
}

@media only screen and (max-width:1600px){
a.desktopNavLink {
font-size: 1em;
}
.headerLogo {
max-height: 7vh;
}
.leftHalf .desktopNavLink {
margin-right: 12%;
}

.headerStuck a.desktopNavLink {
font-size: 0.9em;
}

.servicesDropdownInner :is(li,a) {
font-size: 1em;
}


}

@media only screen and (max-width:1200px){
.rightHalf, .leftHalf{
    display:none!important;
}

.headerNav .responsive {
display: flex;
width: 100%;
justify-content: space-between;
height: 100%;
}

.headerNav .responsive {
display: flex;
width: 100%;
justify-content: space-between;
height: 100%;
}

.headerMenuPhone {
width: 70px;
height: 100%;
}


button.menu {
width: 100%;
height: 100%;
}

button.menu svg {
width: 100%;
height: 100%;
}


.phoneDropdown {
display: flex;
flex-direction: column;
}

.headerMenuPhone::after {
content: '';
position: absolute;
top: 10%;
left: 0;
width: 100%;
height: 90%;
background-color: transparent;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
pointer-events: none;
transition: all 0.25s cubic-bezier(.83,.37,0,.51);
z-index: -1;
}


.headerMenuPhone:has(.menu.opened)::after {
background-color:white;
}

.headerMenuPhone:has(.menu.opened) button>svg, .headerMenuPhone:has(.menu.opened) button>svg * {
stroke: #88b04b;
}

.phoneDropdownText {
display: flex;
flex-direction: row;
align-items: center;
}

.phoneInnerDropdown {
overflow: clip;
height: 0;
transition: all 0.25s cubic-bezier(.83,.37,0,.51);
}

.phoneDropdownText>svg {
width: 17px;
height: 17px;
margin-left: 9px;
transition: all 0.25s cubic-bezier(.83,.37,0,.51);
}

.activeDropdown{
transform: rotate(90deg);
}

.mobileMenu a {
font-family: 'Budokan';
color: #88b04b;
text-align: left;
font-size: 1.6em;
margin: 0.3em 0;
}

.phoneDropdownText>svg {
width: 17px;
height: 17px;
margin-left: 9px;
}

.phoneInnerDropdown :is(a,li,ul) {
font-family: 'Barlow';
color: #88b04b;
margin: 0.4em 0;
}


}







/*Burger menu*/

@keyframes growDown {
0% {
    transform: scaleY(0);
}
100% {
    transform: scaleY(1);
}
}

@keyframes growDownR {
0% {
    transform: scaleY(1);
}
100% {
    transform: scaleY(0);
}
}


div#captcha-1 {
    transform: translate(1000vh)!important;
}

.growDown {
animation: growDown 300ms ease-in-out forwards;
transform-origin: top center;
}

.growDownR {
animation: growDownR 300ms ease-in-out forwards;
transform-origin: top center;
}




@media only screen and (max-width:1200px){
.displayNone {
    display: none!important;
}

.headerMenuPhone {
    display: flex;
    justify-content: flex-end;
    position: relative;
}
.menu svg {
        width: 50px;
        height: 50px;
}




button.menu {
background-color: transparent;
border: none;
}
.line {
    fill: none;
    stroke: white;
    stroke-width: 6;
    transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1), stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1), stroke 0.25s cubic-bezier(.83,.37,0,.51);;
}
.line1 {
    stroke-dasharray: 60 207;
    stroke-width: 6;
}
.line2 {
    stroke-dasharray: 60 60;
    stroke-width: 6;
}
.line3 {
    stroke-dasharray: 60 207;
    stroke-width: 6;
}
.opened .line1 {
    stroke-dasharray: 90 207;
    stroke-dashoffset: -134;
    stroke-width: 6;
}
.opened .line2 {
    stroke-dasharray: 1 60;
    stroke-dashoffset: -30;
    stroke-width: 6;
}
.opened .line3 {
    stroke-dasharray: 90 207;
    stroke-dashoffset: -134;
    stroke-width: 6;
}
.mobileMenu {
    filter: drop-shadow(0px 16px 16px rgba(0,0,0,0.2));
    flex-direction: column;
    position: absolute;
    z-index: 10;
    background-color: white;
    width: max-content;
    border-top: unset;
    transition: all 0.4s ease-in-out;
    top: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    height: auto;
    max-height: 80vh;
    padding: 3vh 4vh;
    border-bottom-left-radius: 17px;
    border-bottom-right-radius: 17px;
    width: 23vw;
    right: 0px;
}
.mobileMenu ul {
    padding: 0;
    margin: 0;
    transform: scale(0.85) translateY(-7.5%);
}



}

/*BURGER MENU*/



@media only screen and (max-width:600px){
    .loaderVideo {
    width: 150px;
    height: 150px;
}

.mobileMenu {
width: 60vw;
}
.mobileMenu a {
font-size: 1.5em;
}
.mobileMenu ul {
transform: scale(0.85) translateY(-6%);
}
}

@media only screen and (max-width:600px) and (max-height:750px){
.mobileMenu{
    width:72vw;
}

.phoneDropdownText>svg {
width: 20px;
height: 20px;
}
}