/*
Theme Name: Starter v4
Theme URI: https://aap.design
Author: AAP design - AlessandroAntonio Panariello
Author URI: https://aap.design
Description: The starter theme for creating fantastic websites
Version: 1.0
Requires at least: 6.8
Tested up to: 6.8
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: starter
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

:root{
  --white:#F6F4F4;
  --azure:#375DE5;
  --black:#0b0b0b;
  --honeydew:#D6ECDB;
  --strawberry:#EA5E90;
  --green:#59BE5C;
}

body{font-family: 'Google Sans Flex';font-size: 16px; font-weight: 400;background: var(--black);color: var(--white);overflow-x: hidden;}
body, html{box-sizing: border-box;margin: 0;padding: 0;line-height: 1;;overflow-x: hidden;}
section{position: relative;width: 100%;/* height: 100vh;  */ overflow: hidden;}

/* ! color */
.white-co{color: var(--white);}
.white-bg{background: var(--white);}
.azure-co{color: var(--azure);}
.azure-bg{background: var(--azure);}
.black-co{color: var(--black);}
.black-bg{background: var(--black);}
.honeydew-co{color: var(--honeydew);}
.honeydew-bg{background: var(--honeydew);}
.strawberry-co{color: var(--strawberry);}
.strawberry-bg{background: var(--strawberry);}
.green-co{color: var(--green);}
.green-bg{background: var(--green);}

/* ! Title System */
h1,h2{font-family: 'Google Sans Flex';font-weight: 900;}
h3,h4{font-family: 'Google Sans Flex';font-weight: 700;}
h5,h6,p,ul,ol{font-family: 'Google Sans Flex';font-weight: 400;}
button{font-family: 'Google Sans Flex';}
h1, .text-1 {font-size: 4rem;margin-bottom:0.5rem}
h2, .text-2 {font-size: 2.5rem;margin-bottom:1rem}
h3, .text-3  {font-size: 2rem;margin-bottom:1rem}
h4, p, ol, ul, .text-4 {font-size: 1.125rem;margin-bottom:1rem; line-height: 1.5;}
h5{font-size: 1rem;} 
h6{font-size: 0.8rem;}
ol,ul{padding-left: 4em;line-height: 2;}
a{color: coral}

.italic{font-style: italic;}

/* List */
ul.check-list {list-style: none; padding-left: 0;}
ul.check-list li {position: relative;padding-left: 30px;}
ul.check-list li::before {content: ""; position: absolute; left: 0; top: 0.4em; width: 28px; height: 22px; background-image: url("assets/img/check.webp"); background-size: contain; background-repeat: no-repeat;}

/* Portrait */
@media screen 
and (min-width: 768px) 
and (max-width: 1024px) 
and (orientation: portrait) {
h2, .text-2{font-size: 2.2rem;}
ul.check-list {display: flex; flex-wrap: wrap; justify-content: center; align-items: center;}
.slider-stack ul.check-list{justify-content: flex-start;}
}
/* Landscape */
@media screen
and (min-width: 768px)
and (max-width: 1200px)
and (orientation: landscape)  {
  
}

@media (max-width: 767px) {
h1, .text-1 {font-size: 3rem;}
h2, .text-2 {font-size: 2rem;}
h3, .text-3  {font-size: 1.5rem;}
ul.wp-block-list {padding: 0 20px 0px 40px;}
ul.wp-block-list li{margin-bottom: 5px;}
ul.check-list{margin: 15px 0;line-height: 1.6;padding: 0 10px 0 0;}
ul.check-list li {padding-left: 30px; margin-bottom: 5px;}
.slider-stack ul.check-list li {padding-left: 30px;line-height: 1.3;font-size: 1rem;}

ul.check-list li::before {top: 0.2em;width: 20px;height: 20px;}

}

/* ! button system */
.button a,
.cover .button{ background: #333; color:var(--black); text-decoration: none;padding: 9px 25px; display: inline-block; border-radius: 5px; font-weight: 900;position: relative;}

.cover .button--strawberry{background: var(--strawberry);}
.cover .button--azure{background: var(--azure);}
.cover .button--green{background: var(--green);}

.button a.has-azure-background-color::before,
.cover .button--azure::before,
.button a.has-green-background-color::before,
.cover .button--green::before,
.button a.has-strawberry-background-color::after,
.cover .button--strawberry::after,
.button a.has-azure-background-color::after,
.cover .button--azure::after{content: ""; position: absolute;top: 0; width: 24px; height: 100%; mask: url("./assets/img/mask.svg") no-repeat center / contain; -webkit-mask: url("./assets/img/mask.svg") no-repeat center / contain;}

.button a.has-strawberry-background-color::after,
.cover .button--strawberry::after{background-color: var(--strawberry);right: -16px;}

.button a.has-azure-background-color::before,
.cover .button--azure::before{transform: rotate(180deg);background-color: var(--azure); left: -16px;}
.button a.has-azure-background-color::after,
.cover .button--azure::after{background-color: var(--azure);transform: scaleY(-1);right: -16px;}
.button a.has-green-background-color::before,
.cover .button--green::before{background-color: var(--green); left: -16px;transform: scaleX(-1);}

.button__arrow {display: inline-block; width: 40px;height: 30px; position: relative;z-index: 99; mask: url("./assets/img/arrow.svg") no-repeat center / contain; -webkit-mask: url("./assets/img/arrow.svg") no-repeat center / contain; background-color: var(--black);margin-right: 10px;}

.button a.has-strawberry-background-color,
.cover .button--strawberry,
.button a.has-azure-background-color,
.cover .button--azure,
.button a.has-green-background-color,
.cover .button--green,
.button a.has-azure-background-color::before,
.cover .button--azure::before,
.button a.has-green-background-color::before,
.cover .button--green::before,
.button a.has-strawberry-background-color::after,
.cover .button--strawberry::after,
.button a.has-azure-background-color::after,
.cover .button--azure::after,
.button__arrow{transition: all .3s linear;}

.button a:hover .button__arrow,
.cover .button:hover .button__arrow{transform: rotate(-45deg);}
.button a.has-strawberry-background-color:hover .button__arrow,
.cover .button--strawberry:hover .button__arrow{background-color: var(--strawberry);}
.button a.has-azure-background-color:hover .button__arrow,
.cover .button--azure:hover .button__arrow{background-color: var(--azure);}
.button a.has-green-background-color:hover .button__arrow,
.cover .button--green:hover .button__arrow{background-color: var(--green);}

.button a.has-strawberry-background-color:hover,
.cover .button--strawberry:hover{color: var(--strawberry)!important;}
.button a.has-azure-background-color:hover,
.cover .button--azure:hover{color: var(--azure)!important;}
.button a.has-green-background-color:hover,
.cover .button--green:hover{color: var(--green)!important;}

.button a:hover,
.cover .button:hover,
.button a.has-azure-background-color:hover::before,
.cover .button--azure:hover::before,
.button a.has-green-background-color:hover::before,
.cover .button--green:hover::before,
.button a.has-strawberry-background-color:hover::after,
.cover .button--strawberry:hover::after,
.button a.has-azure-background-color:hover::after,
.cover .button--azure:hover::after{background-color: var(--honeydew)!important;}

.button a.has-azure-background-color:hover::before,
.cover .button--azure:hover::before,
.button a.has-azure-background-color:hover::after,
.cover .button--azure:hover::after{color: var(--azure)!important;}
.button a.has-green-background-color:hover::before,
.cover .button--green:hover::before{color: var(--green)!important;}
.button a.has-strawberry-background-color:hover::after,
.cover .button--strawberry:hover::after{color: var(--strawberry)!important;}

/* Portrait */
@media screen 
and (min-width: 768px) 
and (max-width: 1024px) 
and (orientation: portrait) {
  
}
/* Landscape */
@media screen
and (min-width: 768px)
and (max-width: 1200px)
and (orientation: landscape)  {
  .contact-cta .wp-block-button__link{font-size: 1.6rem!important;}
}

@media (max-width: 767px) {
  .button{padding: 14px 10px;}
  .button__arrow{width: 25px;height: 20px;margin-right: 5px;}

  .cover .button{padding: 9px 10px;}
}

/* Menu */
.header{ background-color: transparent; position: fixed; top:0;  left:0; z-index: 9999; width: 100%; padding: 20px 15px;  transition: all 0.4s ease;}

.header__content{ max-width: 94vw; width: 100%;margin: 0 auto; display: flex;justify-content: space-between;align-items: center;}

.header__logo{display: flex; align-items: center;}
.header__logo img{width: 355px;height: 61px;object-fit: contain;}
.header.is-light .header__logo img {content: url('./assets/img/logo-black.png');}

.header__menu{padding: 0;margin: 0;}
.header__menu li{display: inline-block;}
.header__menu li a{position: relative; color:var(--black); display: block;padding: 10px 10px 10px 20px;font-size: 1.25rem;font-weight: 900;text-transform: uppercase;margin-right: 25px;text-decoration: none;}

.header__menu li:first-child a {background: var(--strawberry);border-bottom-left-radius: 5px;border-top-left-radius: 5px;padding: 8px 10px 8px 20px;}
.header__menu li:nth-child(2) a {background: var(--azure);padding: 8px;}
.header__menu li:last-child a {background: var(--green);padding: 8px 20px 8px 10px;border-bottom-right-radius: 5px;border-top-right-radius: 5px;}

.header__menu li:first-child a::after,
.header__menu li:nth-child(2) a::before,
.header__menu li:nth-child(2) a::after,
.header__menu li:last-child a::before{content: ""; position: absolute;top: 0; width: 28px; height: 100%; mask: url("./assets/img/mask.svg") no-repeat center / contain; -webkit-mask: url("./assets/img/mask.svg") no-repeat center / contain;}

.header__menu li:first-child a::after {right: -18px;background-color: var(--strawberry);}
.header__menu li:nth-child(2) a::before{transform: rotate(180deg);background-color: var(--azure); left: -20px;}
.header__menu li:nth-child(2) a::after{background-color: var(--azure);transform: scaleY(-1);}
.header__menu li:last-child a::before{background-color: var(--green); left: -20px;transform: scaleX(-1);}

.header__menu li a,
.header__menu li:first-child a::after,
.header__menu li:nth-child(2) a::before,
.header__menu li:nth-child(2) a::after,
.header__menu li:last-child a::before{transition: all .3s linear;}

.header__menu li a:hover {background: var(--honeydew);}

.header__menu li a:hover::before,
.header__menu li a:hover::after {background-color: var(--honeydew);}

.header__menu li:first-child a:hover{color: var(--strawberry);}
.header__menu li:nth-child(2) a:hover{color: var(--azure);}
.header__menu li:last-child a:hover{color: var(--green);}

.icon-hamburger{display: none;}

/* Portrait */
@media screen 
and (min-width: 768px) 
and (max-width: 1024px) 
and (orientation: portrait) {
  .header__logo img {width: 240px; height: 50px;}
  .header__menu li a {font-size: 1.1rem;}
  .header__menu li:last-child a {margin-right: 0;}
}
/* Landscape */
@media screen
and (min-width: 768px)
and (max-width: 1200px)
and (orientation: landscape)  {
  .header__menu li:last-child a {margin-right: 0;}
  
}

@media (max-width: 767px) {
  .header__menu{position: absolute; top:4.2em; left:0em; background-color: transparent; width: 100%; height: 10vh; overflow-x: auto; overflow-y: hidden; white-space: nowrap;transform: translateX(100%); transition: all 1s cubic-bezier(.215, .61, .355, 1);}

  .header__logo img{width: 240px;height: 45px;object-fit: contain;}

.header__menu ul {display: flex; flex-direction: row; align-items: center; padding: 0 2em; margin: 0; list-style: none;}

.header__menu li { display: inline-block; flex: 0 0 auto; opacity: 0; transform: translateX(50px); transition: opacity 0.5s ease, transform 0.5s ease;}

.menu-open .header{background-color: var(--black);height: 20vh;}
.header.is-light{background-color: var(--white);}
.menu-open .header__menu{transform: translateX(0);}

.menu-open .header.is-light .header__menu{background-color: transparent;}

.menu-open .header__menu li { opacity: 1; transform: translateX(0);}

.menu-open .header__menu li:nth-child(1) {margin-left: 30px; transition-delay: 0.2s; }
.menu-open .header__menu li:nth-child(2) { transition-delay: 0.3s; }
.menu-open .header__menu li:nth-child(3) { transition-delay: 0.4s; }
.menu-open .header__menu li:nth-child(4) { transition-delay: 0.5s; }

  .icon-hamburger{display: block;border: 0; color: var(--white);background: transparent;text-transform: uppercase;font-weight: 700;letter-spacing: 1px;}
  .header.is-light .icon-hamburger {color: var(--black);}
  
}

/* ! bg wrap */
.bg-wrapper {display: flex;align-items: center;justify-content: center;min-height: 100vh;}
.bg-wrapper.wrap{flex-wrap: wrap!important;flex-direction: row;align-content: center;}

.bg-wrapper.wrap h2{justify-content: flex-start;}

/* ! Cover */
.cover{position: relative;z-index: 12; text-align: center; margin:0px; height:100vh; width:100%; display:flex; flex-direction:column; justify-content:center; background-position: center center; background-size:cover;}
.cover__content{max-width: 1000px;margin: 0 auto;line-height: .8;}
.cover__content .button{margin:0 15px 20px 0;}
.cover__content .button--azure{margin:0 15px 20px 15px;}
.cover__content .button--green{margin:0 0 20px 15px;}
.cover__content h1{max-width: 100%;margin-bottom: 0;}
.cover__content h2{margin-top: 0;}

.cover__content h1,
.cover__content h2{transform: translateY(-20px);line-height: 1.4;}

.page-template-no-feat-img-template .cover__content h1,
.page-template-no-feat-img-template .cover__content h2{line-height: 1.25;}

.img-hero{width: 100%;height: 380px;object-fit: contain;position: relative;transform: translateY(20px);}

/* Portrait */
@media screen 
and (min-width: 768px) 
and (max-width: 1024px) 
and (orientation: portrait) {
.img-hero {width: 300px;height: 330px;}
.cover__content .button--green {margin: 20px 0 20px 15px;}
.cover__content h2 {margin-top: 12px;}
.page-template-no-feat-img-template .cover__content{padding: 0 50px;}
}
/* Landscape */
@media screen
and (min-width: 768px)
and (max-width: 1200px)
and (orientation: landscape)  {
.img-hero{height: 230px;}
  .cover__content h1,
.cover__content h2{font-size: 2rem;line-height: 1.2;}
.page-template-no-feat-img-template .cover__content h1,
.page-template-no-feat-img-template .cover__content h2{font-size: 4rem;}
.page-template-no-feat-img-template .cover__content h1{margin-top: 0;}
}

@media (max-width: 767px) {
.cover{height: 90vh;}    
.img-hero{height: 240px;z-index: -1;}
.cover__content h1,
.cover__content h2{font-size: 1.675rem;}
.cover__content .button{font-size: 1.375rem;}  
.cover__content .button{margin:10px 10px 10px 0;}
.cover__content .button--azure{display: block; margin: 0 15px 10px 15px;}
.cover__content .button--green{margin:20px 0;}
.cover__content h1{margin-top: 25px;margin-bottom: 8px;}
.page-template-no-feat-img-template .cover{height: 77vh;padding: 15px;}
.page-template-no-feat-img-template .cover__content h1{font-size: 2.3rem;text-align: left;}
.excerpt{font-size: 1.563rem; text-align: left;}
}

/* ! background scroll */
/* .circle-svg {width: 100%; height: 100%; position: fixed; bottom: 0; left: 0; pointer-events: none; z-index: 10;overflow: hidden;} */
.circle-svg circle {will-change: attr;}

/* Nascondi di default tutti gli SVG, visibili solo quando attivi */
.circle-svg {
  width: 100%; height: 100%;
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 10;
  overflow: visible; /* importante: il cerchio può uscire dai bordi */
  opacity: 0;        /* nascosto di default */
}

.bg-scroll.strawberry,
.bg-scroll.has-strawberry-background-color {--fill-color: #EA5E90;--text-visible: #F6F4F4;}
.bg-scroll.azure,
.bg-scroll.has-azure-background-color{--fill-color:#375DE5;--text-visible: #F6F4F4;}
.bg-scroll.black,
.bg-scroll.has-black-background-color {--fill-color: #0b0b0b;--text-visible: #F6F4F4;}
.bg-scroll.honeydew,
.bg-scroll.has-honeydew-background-color {--fill-color: #D6ECDB;--text-visible: #0b0b0b;}
.bg-scroll.white,
.bg-scroll.has-white-background-color {--fill-color: #F6F4F4;--text-visible: #0b0b0b;}

.bg-scroll {position: relative; min-height: 100vh; overflow: hidden; display: flex; justify-content: center; align-items: center;z-index: 12;}

.circle-mask {position: absolute!important;inset: 0; background: var(--fill-color); clip-path: circle(0% at 50% 50%);will-change: clip-path, transform; z-index: 1;overflow: hidden;}

.higlight-text {position: relative; z-index: 2; max-width: 880px; margin: 0 auto;}
.higlight-text p{line-height: 2;}

/* Portrait */
@media screen 
and (min-width: 768px) 
and (max-width: 1024px) 
and (orientation: portrait) {
.higlight-text {padding: 0 25px;}
}
/* Landscape */
@media screen
and (min-width: 768px)
and (max-width: 1200px)
and (orientation: landscape)  {
  
}

@media (max-width: 767px) {
  .bg-scroll {width: 100%; max-width: 100%;}

  .circle-mask {clip-path: circle(0% at 50% 40%); max-width: none; width: 100%;}

  .higlight-text {padding: 0 15px;max-width: none; width: 100%; overflow: hidden; }
  .higlight-text p {line-height: 1.5; max-width: none; word-break: break-word; overflow-wrap: break-word;}
}

/* ! horizontal-text */
.bg-scroll-horizontal-text { height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; background: var(--white); color: var(--black); overflow: hidden; position: relative; z-index: 10;}

.horizontal-text {position: relative; z-index: 2; width: 100%; margin: 0; display: flex;justify-content: center;}
.horizontal-text p {font-size: 7rem; font-weight: 900; text-transform: uppercase; color: var(--black); margin: 0; line-height: 1.2; text-align: center; white-space: nowrap; will-change: transform;}

/* Portrait */
@media screen 
and (min-width: 768px) 
and (max-width: 1024px) 
and (orientation: portrait) {
.horizontal-text p {white-space: normal;}
}
/* Landscape */
@media screen
and (min-width: 768px)
and (max-width: 1024px)
and (orientation: landscape)  {
  
}

@media (max-width: 767px) {
.horizontal-text p{font-size: 3rem;white-space: normal;}

}

/* ! bio */
.bio img{width: 245px;height: 346px;object-fit: contain;}

@media (max-width: 767px) {
  .bio img{width: 100%;height: 250px;}
  .media-text .wp-block-columns{max-width: 90vw!important;}
}

/* ! Anime text */
.anime-text__container{position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden;height: 100vh;}

.anime-text{width: 85%;}

.anime-text h2{margin-bottom: 0;text-transform: uppercase;}
.anime-text h2,
.anime-text p{font-size: 2rem;color: var(--white);font-weight: 900;line-height: 1.4;white-space: normal;}
.anime-text p{margin-top: 0; margin-bottom: 2rem;display: block;}

.anime-text .word{display: inline-block;position: relative;margin-right: 0.2rem;margin-bottom: 0.2rem;padding: 0.1rem 0.2rem;border-radius: 2rem;white-space: nowrap; /* will-change: background-color, opacity; */}

.anime-text .word.keyword-wrapper{margin: 0 0.4rem 0.2rem 0.2rem;}

.anime-text .word span{position: relative;}
.anime-text .word span.keyword{display: inline-block;width: 100%;height: 100%;border-radius: 2rem;padding: 0.3rem 0.2rem;color: var(--black);text-align: center;transition: all .2s;}

.anime-text .word span.keyword::before {content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0); width: calc(100% + 1rem); height: calc(100% + 0.4rem); background-color: var(--white); border-radius: 0.9rem; z-index: -1; transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);}

.anime-text .word span.keyword.revealed::before {transform: translate(-50%, -50%) scale(1);}

.anime-text .word span.keyword.prodotto::before,
.anime-text .word span.keyword.lavoro::before,
.anime-text .word span.keyword.tecnica::before{background-color: var(--azure);}

.anime-text .word span.keyword.team::before,
.anime-text .word span.keyword.costruire::before,
.anime-text .word span.keyword.esperienza::before{background-color: var(--strawberry);}

.anime-text .word span.keyword.collaboro::before,
.anime-text .word span.keyword.progetti::before,
.anime-text .word span.keyword.credibile::before{background-color: var(--green);}

.anime-text .word,
.anime-text .word span{opacity: 0;}

@media screen and (width >= 1800px) {
.anime-text{width: 78%;}
.anime-text h2,
.anime-text p{font-size: 2.55rem;}
}

/* Portrait */
@media screen 
and (min-width: 768px) 
and (max-width: 1024px) 
and (orientation: portrait) {
  .anime-text{width: 90%;}
  .anime-text h2,
.anime-text p{font-size: 1.5rem;}
}
/* Landscape */
@media screen
and (min-width: 768px)
and (max-width: 1200px)
and (orientation: landscape)  {
  .media-text .wp-block-columns{ max-width: 90%;}
  .anime-text h2, .anime-text p{font-size: 1.5rem;}

}

@media (max-width: 767px) {
  .anime-text__container{height: 100vh!important;}
  .anime-text{width: 93%}

  .anime-text h2,
  .anime-text p{font-size: 1.1rem;line-height: 1.1;}

  .anime-text p{margin-bottom: 1rem;}

  .anime-text .word {margin-right: 0; margin-bottom: 0; padding: 0.3rem 0.2rem;}

.anime-text .word span.keyword {padding:0;}
.anime-text .word.keyword-wrapper {margin: 0 0.4rem;}
}

/* ! Big horizontal text */
 .big-horizontal-text__wrapper { position: relative; width: 100vw; height: 100vh; z-index: 9999;overflow: hidden; display: flex;flex-direction: column; justify-content: center;}

.big-horizontal-text__row {position: relative; width: 100%; height: 33.33vh;margin-top: 0; display: flex; align-items: center; overflow: hidden;}

.border-top { border-top: 10px solid var(--honeydew); }
.border-central{border-top: 10px solid var(--honeydew); border-bottom: 10px solid var(--honeydew);}
.border-bottom { border-bottom: 10px solid var(--honeydew); }

.big-horizontal-text {display: flex; white-space: nowrap; font-size: 9rem; line-height: 1.1; text-transform: uppercase; padding: .1em 0; width: max-content;}

.big-horizontal-text-3 { font-weight: 200; font-style: italic; }
.big-horizontal-text-2 { font-weight: 900; }
.big-horizontal-text-1 { font-weight: 400; }

/* ! bg scroll left to right */
.bg-scroll-left-to-right,
.bg-scroll-right-to-left{position: relative;background-repeat: no-repeat;}
.bg-scroll-left-to-right.azure {background: linear-gradient(to right, #375DE5 var(--bg-progress, 0%), #0b0b0b 0%);}
.bg-scroll-left-to-right.strawberry {background: linear-gradient(to right, #EA5E90 var(--bg-progress, 0%), #0b0b0b 0%);}

.bg-scroll-right-to-left.azure {background: linear-gradient(to left, #375DE5 var(--bg-progress, 0%), #0b0b0b 0%);}
.bg-scroll-right-to-left.strawberry {background: linear-gradient(to left, #EA5E90 var(--bg-progress, 0%), #0b0b0b 0%);}

/* Portrait */
@media screen 
and (min-width: 768px) 
and (max-width: 1024px) 
and (orientation: portrait) {
  #con-chi .bg-wrapper { padding: 0!important; }
  #con-chi h2,
  #con-chi p{padding: 0 75px;}
}
/* Landscape */
@media screen
and (min-width: 768px)
and (max-width: 1200px)
and (orientation: landscape)  {
  #con-chi .bg-wrapper { padding: 0!important;}
  #con-chi h2,
  #con-chi p{padding: 0 0 0 75px;}
}
@media (max-width: 767px) {
.bg-scroll-left-to-right,
.bg-scroll-right-to-left,
.bg-scroll-left-to-right .bg-wrapper{padding: 15px!important;}

.bg-scroll-left-to-right .bg-wrapper{padding-top: 100px!important}

.bg-scroll-left-to-right.azure,
.bg-scroll-right-to-left.azure {background: linear-gradient(to bottom, #375DE5 var(--bg-progress, 0%), #0b0b0b 0%);}

.bg-scroll-left-to-right.strawberry,
.bg-scroll-right-to-left.strawberry {background: linear-gradient(to bottom, #EA5E90 var(--bg-progress, 0%), #0b0b0b 0%);}
}

/* Slider-stack */
.slider-stack__wrapper{position: relative;min-height: 100vh;}

.slider-stack{position: absolute!important; top: 12%; left: calc(50% - 42.5%); width: 85%; display: flex; align-items: center; justify-content: center; margin-top: 0;}
.slider-stack img{margin-bottom: 0;position: relative;}
.slider-stack .slider-stack__content{display: flex;align-items: center;flex-wrap: wrap;align-content: center;}

/* Portrait */
@media screen 
and (min-width: 768px) 
and (max-width: 1024px) 
and (orientation: portrait) {
  .slider-stack img {height: 250px!important; object-fit: contain;} 
}
/* Landscape */
@media screen
and (min-width: 768px)
and (max-width: 1200px)
and (orientation: landscape)  {
  .slider-stack {left: calc(50% - 47%); width: 94%;}
  .slider-stack .wp-block-columns{max-width: 89vw;}
  .slider-stack img {height: 100%!important;} 
}

@media (max-width: 767px) {
.slider-stack__wrapper{min-height: 100vh;}
  .slider-stack{position: absolute; top: 2%; left: calc(50% - 47%); width: 94%; height: 73vh;}
  .slider-stack .wp-block-columns{max-width: 86vw;}
.slider-stack h2{font-size: 1.6rem;margin-bottom: 10px;}
.slider-stack p{margin-top: 10px;font-size: 1rem;}
  .slider-stack img {height: 130px!important; object-fit: contain;} 
}

/* Accordion */
.accordion {width: 100%;}

.accordion-header {border: none;font-size: 1.25rem;  font-weight: 900; text-align: left; cursor: pointer; display: flex; justify-content: space-between; align-items: center;margin: 20px 0;}

.accordion-item .button__arrow { margin-left: 30px;}

.accordion-content {max-height: 0%; overflow: hidden; transition: max-height .4s linear;}

.accordion-content p {padding:0 36px; line-height: 1.2; margin: 1em 0 !important;}
.accordion-content ol,
.accordion-content ul{  line-height: 1.2;}

.accordion-item.active .button__arrow {transform: rotate(44deg);}

/* Portrait */
@media screen 
and (min-width: 768px) 
and (max-width: 1024px) 
and (orientation: portrait) {
  
}
/* Landscape */
@media screen
and (min-width: 768px)
and (max-width: 1200px)
and (orientation: landscape)  {
  .contact .accordion{font-size: 1.6rem;}

  .contact .accordion ol,
  .contact .accordion ul {padding-left: 3em;}
.contact .accordion-content p {padding: 0 15px;}

}

@media (max-width: 767px) {
  .accordion{padding: 0 15px;}
  .accordion-header{padding: 0;}
  .accordion-header .wp-block-button__link{padding: 20px 10px;}
  .accordion-content{margin-top: 0;}
  .active .accordion-content{margin-top: 24px;}
.accordion-content p { padding: 0 20px;}
.accordion-content ol{padding-left: 2.8em;line-height: 1.4;}
}

/* ! footer */
footer{position: relative;z-index: 99;max-width: 94vw; width: 100%;margin: 0 auto; padding: 70px 0;font-size: 1.125rem;background: var(--black);}

.claim{font-size: 1.25rem;text-transform: uppercase;text-align: center;font-weight: 900;line-height: 1.1;}

footer .menu{display: flex;flex-direction: column; text-align: right;text-transform: uppercase;font-weight: 200;line-height: 1.6;list-style-type: none;}
footer .menu a{color: var(--white);text-decoration: underline;}

.footer__logo{display: flex;justify-content: center;margin: 40px 0;}
.footer__logo img{width: 412px;height: 73px;object-fit: contain;}

/* Portrait */
@media screen 
and (min-width: 768px) 
and (max-width: 1024px) 
and (orientation: portrait) {
 footer .wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column{flex-basis: 20%!important;align-self: baseline;}

 .claim,
 footer p,
 footer .menu{font-size: 1rem;}

}
/* Landscape */
@media screen
and (min-width: 768px)
and (max-width: 1024px)
and (orientation: landscape)  {
  
}

@media (max-width: 767px) {
  footer{padding: 0;}
  footer p,
  footer .menu{text-align: center;}
  footer .menu{display: none;}
  .footer__logo{margin: 30px 0;}

  .footer__logo img{width: 300px;height: 65px;}

  .footer__content{min-height: 36vh;}

  footer .wp-block-columns {margin-bottom: 0;}
  
}

/* ! animation */
.fade-in{opacity: 0;transform: translateY(1rem);}
.text-reveal{transform: translateY(1rem);clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);}

.fade-up{opacity: 0;transform: translateY(3rem);}
.slide-down {opacity: 0; transform: translateY(-1rem);}

.zoom-in {opacity: 0; transform: scale(0.7); will-change: transform, opacity;}

/* ! form */
label{padding-bottom: 20px;font-weight: 900;text-transform: uppercase;}
input,
textarea{width: 100%; font-family: 'Google Sans Flex';border-radius: 15px;padding: 20px;border: 3px solid var(--green);outline: var(--green);background-color: var(--white);}

input{font-size: 1.4rem;}
textarea{font-size: 1.125rem;}

.check-privacy p{text-align: center;font-family: 'Google Sans Flex';text-transform: uppercase; font-weight: 700;}
.check-privacy .wpcf7-form-control-wrap{text-align: left;}
.check-privacy .wpcf7-list-item{margin: 0 0em 0 0;}
.submit{width: 100%;font-size: 1.4rem;text-align: center;border: 0;text-transform: uppercase;margin-top: 3%;}
.submit:hover{cursor: pointer;}

/* Portrait */
@media screen 
and (min-width: 768px) 
and (max-width: 1024px) 
and (orientation: portrait) {
  
}
/* Landscape */
@media screen
and (min-width: 768px)
and (max-width: 1200px)
and (orientation: landscape)  {
  .contact{padding-left: 35px!important; padding-right: 35px!important; }
}
@media (max-width: 767px) {
  .contact{padding-left: 15px!important; padding-right: 15px!important; }
}

/* ! Splide */
.cursor-personas{position:fixed;top:0;left:0;width:50px;height:50px;pointer-events:none;z-index:9999;opacity:0;transform:translate(-50%,-50%);}
.cursor-personas::before {content: ""; position: absolute; top: 25%; left: 50%; width: 70px; height: 70px; background-color: var(--black); border-radius: 50%; z-index: -1; transition: transform 0.2s ease;}
.cursor-personas.active::before {transform: translate(-50%, -50%) scale(1);}

.cursor-personas svg{width:100%;height:auto;fill:var(--honeydew);}
#personas figure{text-align: center;}
#personas img{height: 324px;object-fit: contain;margin-bottom: 2em;}
#personas figcaption{text-align: center;line-height: 1;}

.slider-carousel-personas {
    /* Dice a Lenis e al browser di non interferire con il tocco/trascinamento */
    touch-action: pan-y; 
    pointer-events: auto;
}

/* Evita che Lenis applichi lo smooth scroll agli elementi interni dello slider */
.slider-carousel-personas * {
    user-select: none;
}


/* Portrait */
@media screen 
and (min-width: 768px) 
and (max-width: 1024px) 
and (orientation: portrait) {
  
}
/* Landscape */
@media screen
and (min-width: 768px)
and (max-width: 1200px)
and (orientation: landscape)  {
  
}
@media (max-width: 767px) {
#personas img{height: 250px;}
  
}

/* ! Scroll text */
.scroll-text {position: fixed; pointer-events: none; bottom: 20px; left: 50%; transform: translateX(-50%); font-family: 'Google Sans Flex'; font-weight: 200; font-size: 12px;text-transform: uppercase; letter-spacing: 2px; color: var(--white); display: flex; flex-direction: column; align-items: center; gap: 10px; z-index: 1000; transition: opacity 0.4s ease, visibility 0.4s;}
.scroll-text.hidden {opacity: 0; visibility: hidden;}

.scroll-text.is-light {color: var(--black);}
.scroll-text.is-light::before {background: var(--black);}

.scroll-text::before {content: ""; width: 1px; height: 40px; background: linear-gradient(to bottom, #F6F4F4 50%, transparent 50%); background-size: 100% 200%; background-position: 0 100%; animation: scroll-line-top 2s infinite ease-in-out;}

@keyframes scroll-line-top {
  0% {background-position: 0 100%; transform: scaleY(0); transform-origin: top; opacity: 0; }
  20% { background-position: 0 100%; transform: scaleY(1);transform-origin: top; opacity: 1;}
  60% {background-position: 0 0%; transform: scaleY(1); transform-origin: bottom; opacity: 1;}
  100% {background-position: 0 0%; transform: scaleY(0); transform-origin: bottom; opacity: 0;}
}

/* ! Site loader */
/*----------------------------------------------------------------------------------- */
#site-loader {position: fixed; top: 0;left: 0; width: 100%; height: 100%; background: var(--black); display: flex; align-items: center; justify-content: center; z-index: 9999; opacity: 1; visibility: visible; transition: opacity 0.6s ease, visibility 0.6s ease;}

/* #site-loader.loaded { opacity: 0; visibility: hidden;} */

.site-loader__content { display: flex;align-items: center; justify-content: center; flex-direction: column; animation: fadeIn 1s ease;}

.site-loader__content img{ width: 250px; height: auto; animation: pulse 1.8s ease-in-out infinite;}

@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.05); opacity: 0.8; }
}

/* ! Helpers */
/*----------------------------------------------------------------------------------- */
.br{border: 1px solid red;}
.img-res{width: 100%;}

.mt-0{margin-top: 0 }
.mt-1{margin-top: 10px}
.mt-2{margin-top: 20px}
.mt-3{margin-top: 40px}
.mt-4{margin-top: 100px }

.ml-0{margin-left: 0 }
.ml-1{margin-left: 10px}
.ml-2{margin-left: 20px}
.ml-3{margin-left: 40px!important}
.ml-4{margin-left: 100px }

.mb-0{margin-bottom: 0}
.mb-1{margin-bottom: 10px}
.mb-2{margin-bottom: 20px}
.mb-3{margin-bottom: 40px}
.mb-4{margin-bottom: 100px}

.p-0{padding: 0}
.p-1{padding: 10px}
.p-2{padding: 20px}
.p-3{padding: 40px}
.p-4{padding: 100px}

.pt-1{padding-top: 10px;}
.pt-3{padding-top: 20px;}
.pt-3{padding-top: 40px;}
.pt-4{padding-top: 15vh;}

.pb-1{padding-bottom: 10px;}
.pb-2{padding-bottom: 20px;}
.pb-3{padding-bottom: 40px;}
.pb-4{padding-bottom: 15vh;}

.text-center{text-align: center}
.text-left{text-align: left}
.text-right{text-align: right}

.icon-small{width: 40px;padding: 8px;}
.icon-white{filter: invert(1);}
.bg-dark{background: #000;}
.text-white{color:#fff}
.text-dark{color: #000;}
.v-center{display: flex; justify-content: center; flex-flow: column}
.d-none,
.only-sma{display: none!important;}
.mx-auto{margin: 0 auto!important;}

.none{display: none;}

/* Portrait */
@media screen 
and (min-width: 768px) 
and (max-width: 1024px) 
and (orientation: portrait) {
    .sma-none{display: none;}
}
/* Landscape */
@media screen
and (min-width: 768px)
and (max-width: 1200px)
and (orientation: landscape)  {
    .sma-none{display: none;}
}
@media (max-width: 768px) {
  .ml-3{margin-left: 25px!important}
}
@media (max-width: 767px) {
    .sma-spacer{height: 50px!important;}
  .sma-spacer-100{height: 100px!important;}
  .only-sma{display: block!important;}
  .sma-text-center{text-align: center!important;}
}

/* ! Grid System */
.grid{display: flex; flex-wrap: wrap; max-width: 1650px; margin: 0 auto}
.grid--small{max-width: 900px}
.contact-cta {max-width: 1250px; margin: 0 auto;}
.grid--center{justify-content: center;}
.col{ flex: 1;}
.wrapper-FW{min-width: 1150px;}

.col-20{width:20%}
.col-25{width:25%}
.col-30{width:30%}
.col-33{width:33.33%}
.col-40{width:40%}
.col-50{width:50%}
.col-60{width:60%}
.col-70{width:70%}
.col-80{width:80%}
.col-90{width:90%}
.col-100{width:100%}

[class*='col-']{padding: 3%;}

.contact .grid{}
.contact [class*='col-']{padding: 1.5%;}

/* Portrait */
@media screen 
and (min-width: 768px) 
and (max-width: 1024px) 
and (orientation: portrait) {
  
.wrapper-FW {min-width: auto;padding: 0 50px;text-align: center;}
  .contact-cta {padding: 0 50px;}
  .contact-cta .wp-block-columns{padding-top:75px!important;}
  #faq {padding: 0 75px;}
}  
/* Landscape */
@media screen
and (min-width: 768px)
and (max-width: 1200px)
and (orientation: landscape)  {
 .wrapper-FW {min-width: auto;padding: 0 35px;text-align: left;}
 .bg-wrapper.wrap {margin: 0 auto; display: block;}
.contact-cta {max-width: 90%;}
#faq .wp-block-column{flex-basis: 80%!important;}
}

@media (max-width: 991px) {
    .tab-20 { width: 20%; }
    .tab-25 { width: 25%; }
    .tab-33 { width: 33.33%; }
    .tab-50 { width: 50%; }
    .tab-100 { width: 100%; }
}

@media (max-width: 768px) {
    [class*='col-'] { width: 100%;}
    .sma-20 { width: 20%; }
    .sma-25 { width: 25%; }
    .sma-33 { width: 33.33%; }
    .sma-50 { width: 50%; }
    .sma-100 { width: 100%; }
}

@media (max-width: 767px) {
  .grid {padding: 0;}
  section,
  .grid--FH{height: 100%;}
  .bg-wrapper{min-height: 100%;padding: 75px 0;}
  .sma-reverse {flex-flow: column-reverse;}
  .contact-cta {padding: 0 15px;max-width: none;}

  .contact-cta .wp-block-columns {padding-top: 110px!important; padding-bottom: 0 !important; margin-bottom: 24px;}

  .wrapper-FW {min-width: auto;}
	

}

/* ! Wordpress Styles */
/*----------------------------------------------------------------------------------- */
.wp-block-cover.video-parallax {position: relative; overflow: hidden;}

.wp-block-cover.video-parallax .wp-block-cover__video-background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; z-index: 0;}

.wp-block-cover.video-parallax .wp-block-cover__inner-container,
.wp-block-cover.video-parallax .wp-block-cover__background {position: relative; z-index: 1;}
.wp-block-group,
.wp-block-group__inner-container,
.wp-block-group.alignfull { position: relative;}

#slider-stack {position: relative;}
.nav-dots {position: absolute;right: 4%;transform: translateY(-50%); z-index: 9999;}
.nav-dot{display: block;width: 3px;height: 20px;background: #ccc;color: transparent; margin-bottom: 15px;transition: all 1s cubic-bezier(.215, .61, .355, 1);}
.nav-dot--active{background: #000;height: 40px;}

.site-info .dashicons{line-height: 1.4!important;}
.dashicons-heart{color:red;}

.alignfull img, 
.alignwide img {width: 100%; height: auto;}

/* Accessibility
--------------------------------------------- */

/* Text meant only for screen readers. */
.screen-reader-text {border: 0;	clip: rect(1px, 1px, 1px, 1px);	clip-path: inset(50%);height: 1px;margin: -1px;	overflow: hidden;padding: 0;position: absolute !important;width: 1px;word-wrap: normal !important;}
.screen-reader-text:focus {	background-color: #f1f1f1;	border-radius: 3px;	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);clip: auto !important;	clip-path: none;color: #21759b;display: block;	font-size: 0.875rem;font-weight: 700;height: auto;left: 5px;line-height: normal;padding: 15px 23px 14px;text-decoration: none;top: 5px;width: auto;	z-index: 100000;}
/* Do not show the outline on the skip link target. */
#primary[tabindex="-1"]:focus {	outline: 0;}

*,*:before,*:after{ box-sizing: border-box; }