@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
/* Reset */
body, html{background: #ECEEFF; font-family: "Poppins", serif; sans-serif; line-height: 1; font-size: 16px; color: #303FC8; box-sizing: border-box;margin: 0;padding: 0;}*,*:before,*:after{ box-sizing: border-box; }h1,h2,h3,h4,h5,h6, p, ol,{margin: 0 0 1rem 0;padding: 0;}ol,ul{padding-left: 20px;line-height: 1.5;}img{height: auto;}h1{font-size: 4rem;} h2{font-size: 3rem;} h3{font-size: 2rem;} h4{font-size: 1rem;} h5{font-size: 0.8rem;} h6{font-size: 0.6rem;}a{text-decoration:none}strong{padding:0!important;}

a, button { cursor: pointer;}

html{scroll-behavior: smooth;}

/* Menu */
:root { --menu-bg: #F4FBFF; --menu-color: #303FC8; }

main {position: relative; max-width: 1320px; margin: auto;}

nav {
	color: #303FC8;
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100%;
  padding: 10px 15px;
  background-color: transparent;   /* Colore iniziale trasparente */
  transition: background-color 0.3s ease;
}

.header.scrolled {
  background-color: #fff;          /* Colore bianco dopo lo scroll */
  -webkit-box-shadow: 2px 3px 26px -13px rgba(48, 63, 200, 1);
-moz-box-shadow: 2px 3px 26px -13px rgba(48, 63, 200, 1);
box-shadow: 2px 3px 26px -13px rgba(48, 63, 200, 1);
}
.header__content{max-width: 1200px;width: 100%;margin: 0 auto; display: flex;justify-content: space-between;}

.header__logo,
.header__quick{display: flex; align-items: center;color:var(--menu-color)}

/* Larghezza iniziale del logo */
    .logo {
      width: 150px;
      transition: width 0.3s ease;
    }

    /* Larghezza dopo lo scroll */
    .scrolled .logo {
      width: 55px;
    }
.header__menu{padding: 0;margin: 0;}
.header__menu li{display: inline-block;}
.header__menu li a {
  color: var(--menu-color);
  display: block;
  padding: 16px;
  font-size: 15px;
  position: relative; /* necessario per poter posizionare lo pseudoelemento */
  text-decoration: none; /* per rimuovere l’eventuale underline di default */
}

/* Pseudoelemento per la “linea” animata */
.header__menu li a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0%;
  height: 2px; /* spessore della linea */
  background-color: var(--menu-color);
  transition: width 0.3s ease; /* durata e tipo di transizione */
}

/* Effetto in hover: la larghezza passa al 100% */
.header__menu li a:hover::after {
  width: 100%;
}


@media (max-width: 768px) {
  .header__menu{   
    position: absolute; top:85px; right:0; background-color: white; width: 100%; height: 100vh;  
    overflow: hidden;transition: all 0.5s cubic-bezier(.215, .61, .355, 1); transform: translateX(101%);
  }

  .header__menu li{width: 100%;}
  .menu-open .header__menu{transform: translateX(0%);}

  .icon-hamburger{height: 50px;width: 40px;margin-left: 20px;padding-top: 5px;}
  .icon-hamburger span{height: 2px; width: 30px;background: var(--menu-color);position: relative;display: block;margin-top: 11px;transition: all 0.2s cubic-bezier(.215, .61, .355, 1);}
  
  .menu-open .icon-hamburger span:nth-child(1){transform: rotate(45deg) translateY(9px);}
  .menu-open .icon-hamburger span:nth-child(2){transform: rotate(-45deg) translateY(-9px);}

  .header__quick{display: flex; justify-content: flex-end; width: 50%;}

}

/* ! Spacer */
.spacer{height: 100px;}


/* ! Grid System */
.grid { margin: 0 auto; padding: 0 15px; max-width: 1250px; display: flex; flex-flow: row; flex-wrap: wrap;}
.grid--center{justify-content: center;}
.col{ flex: 1;}

[class*='col-'] { position: relative;padding: 0 15px;}

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

@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%; }
}


/* ! Title System */
h1, .text-1 {font-size: 3.6rem;margin-bottom:1rem}
h2, .text-2 {font-size: 2.2rem;margin-bottom:1rem;line-height: 1.5; font-weight: 500;}
h3, .text-3  {font-size: 1.8rem;margin-bottom:1rem;line-height: 1.2;}
h4, .text-4 {font-size: 1.5rem;margin-bottom:1rem;line-height: 1.2;}
p{font-size: 1rem;margin-bottom:1rem; line-height: 1.2;}

/* ! Button System */
.button { 
  font-size: 1rem; text-transform: uppercase; background: #DA498D; color:#fff; 
  text-decoration: none;padding: 14px 25px; display: inline-block;
  border-radius: 50px; font-weight: 700;
}  

.button:hover{
  background: #333; 
}

.button-small { 
  font-size: 12px; text-transform: uppercase; background: #f65e5e; color:#fff; 
  text-decoration: none;padding: 10px 20px; display: inline-block;
  border-radius: 5px; font-weight: 400;
}

.wp-element-button {
  position: relative; /* Necessario per posizionare in modo corretto lo pseudoelemento */
  text-decoration: none; /* Rimuove underline predefinito, se presente */
  overflow: hidden; /* Utile se fai animazioni che potrebbero uscire dal contenitore */
  /* Altri stili di base del pulsante: padding, border, background, ecc. */
  padding: 12px 24px;
  background-color: #f0f0f0;
  border-radius: 4px;
  border: none;
  cursor: pointer;
}

/* Creiamo la “linea” con lo pseudoelemento ::after */
.wp-element-button::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  background-color: currentColor; /* Usa il colore del testo */
  transition: width 0.3s ease;
}

/* Al passaggio del mouse la linea si espande */
.wp-element-button:hover::after {
  width: 100%;
}


/* ! Helpers  */
.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 }

.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-right { text-align: right; }
.text-left { text-align: left; }
.img-res { width: 100%; height: auto; margin-bottom: 20px;vertical-align: middle;}

.icone-lista {
  list-style-type: none; /* rimuove il puntino */
  list-style-image: url('path/della-tua-icona.png');
  /* Attenzione: con list-style-image avrai meno controllo sul posizionamento
     rispetto a un background posizionato su un pseudo-elemento */
}

.container { position: relative; max-width: 1320px; margin: auto; }

.colonna-form {position: relative;
    background: white;
    padding: 35px;
    border-radius: 20px;
    width: 490px;
    margin-top: -150px;
    z-index: 2;
	-webkit-box-shadow: 3px 9px 38px -23px rgba(26, 118, 142, 0.64);
-moz-box-shadow: 3px 9px 38px -23px rgba(26, 118, 142, 0.64);
box-shadow: 3px 9px 38px -23px rgba(26, 118, 142, 0.64);
}

.wp-block-video video {
    vertical-align: middle;
    width: 100%;
	border: 5px solid white;
    border-radius: 25px;
	-webkit-box-shadow: 10px 8px 8px -5px rgba(218, 73, 141, 0.44);
-moz-box-shadow: 10px 8px 8px -5px rgba(218, 73, 141, 0.44);
box-shadow: 10px 8px 8px -5px rgba(218, 73, 141, 0.44);
}

.full-width {
    left: calc(-50vw + 680px); /* Centrare rispetto al container */
    width: 100vw;
    background-color: lightblue;
}


/* Helpers - Utility */
.img-round{ border-radius: 50%;}
.round{border-radius: 20px;}
.spacer{height: 10vh;}
.relative{position: relative;}
.overflow-h{overflow: hidden;}
@media (max-width: 768px) {
  .sma-text-center{text-align: center;}
}

.img-small{height: 270px;object-fit: cover;}
.ionicon{width: 20px;height: 20px;margin: 10px;}
.font-normal{font-weight: 400;}
.z-index {position: relative; z-index: 999;}

.wpforms-container .wpforms-field, .wp-core-ui div.wpforms-container .wpforms-field {
    padding: 5px 0!important;
}

div.wpforms-container-full .wpforms-form textarea.wpforms-field-large {
    height: calc(var(--wpforms-field-size-input-height)* 2.1)!important;
}

/* Hero */
.hero{
	border-radius: 20px;
    padding: 50px;
    margin-top: 45px;
	-webkit-box-shadow: 3px 9px 38px -23px rgba(26, 118, 142, 0.64);
-moz-box-shadow: 3px 9px 38px -23px rgba(26, 118, 142, 0.64);
box-shadow: 3px 9px 38px -23px rgba(26, 118, 142, 0.64);
}

.hero-shape {
	position: absolute;
	top: 0;
	width: 100%;
	height: 870px;
	background-image: url('../images/hero-background.png');

}

/* Accordion */
.accordions {
  margin: 0 auto;
}

.accordion {
    border-top: 1px solid #303FC8;
  margin-bottom: 1rem;
    overflow: hidden;
  transition: border-color .5s ease;
}

.accordion:hover {
  border-color: #000;
}

.accordion__header {
  cursor: pointer;
  font-weight: 500;
  font-size: 1rem;
  display: flex;
  align-items: center;
  position: relative;
  padding: 1rem;
  color: #303FC8;

}
.accordion__header:after, .accordion__header:before {
  content: '';
  position: absolute;
  right: 1.5em;
  width: 2px;
  height: 0.75em;
  background-color: #303FC8;
  transition: all 0.2s;
}
.accordion__header:after {
  transform: rotate(90deg);
}

.accordion:has(input:checked) .accordion__header {
  color: #303FC8;
}

.accordion__content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease;
  * {
        padding: 0 1em 1em;
  }
}

.accordion input {
  display: none;
}

.accordion:has(input:checked) {
  border-color: #303FC8;
  background-color: #fff;
  box-shadow: rgba(33, 35, 38, 0.1) 0px 10px 10px -10px;
}

.accordion input:checked ~ .accordion__header:before {
    transform: rotate(270deg) !important;
  background-color: #303FC8;
 }

.accordion input:checked ~ .accordion__header:after {
    transform: rotate(270deg) !important;
  background-color: #303FC8;
 }

.accordion input:checked ~ .accordion__content {
    max-height: 1000px; /* Adjust based on content length */
}

 /* Carousel */




/* Footer */
.footer{background-color: #EF6362;color:#fff}
.footer-bottom{background-color: #ad3939;color:#fff; padding: 20px;text-align: center;margin-bottom: 0;}
.footer-bottom a{color:#fff}










/* Desktop */
@media only screen and (min-width: 992px) {
  /* Inserisci qui le tue regole CSS per desktop */
}

/* Tablet in modalità landscape */
@media only screen and (min-width: 768px) and (max-width: 1366px) and (orientation: landscape) {
  /* Inserisci qui le tue regole CSS per tablet in modalità landscape */
	
	.container {padding: 0 15px;}
	.colonna-form {width: auto;}
	.card-detailes h2 {font-size: 1.5rem;}
	.blocco-libro {padding: 78px 20px;}
	.libro { right: 0px; height: 665px;}

}

/* Tablet in modalità portrait */
@media only screen and (min-width: 768px) and (max-width: 991px) and (orientation: portrait) {
  /* Inserisci qui le tue regole CSS per tablet in modalità portrait */
	
	.container {padding: 0 15px;}
}

/* Smartphone in modalità landscape */
@media only screen and (max-width: 767px) and (orientation: landscape) {
  /* Inserisci qui le tue regole CSS per smartphone in modalità landscape */
	
	
}

/* Smartphone in modalità portrait */
@media only screen and (max-width: 767px) and (orientation: portrait) {
  /* Inserisci qui le tue regole CSS per smartphone in modalità portrait */
	
	.hero {margin: 0 15px;}
	.header__menu li a { font-size: 30px; text-decoration: underline; /* per rimuovere l’eventuale underline di default */}
	.container {padding: 0 15px;}
	.colonna-form {width: auto;}
	.card-detailes h2 {font-size: 1.5rem;}
	.blocco-libro {padding: 78px 20px;}
	.libro {top: -660px; right: -15px; height: 300px;}
	.logo {width: 55px;}
	.blocco-libro {margin: 0 15px;}
	.wp-image-115 { height: 260px!important;}
	.wpforms-container {padding: 0 15px!important;}
	.wp-block-cover {margin-top: 70px!important;}
	.no-padding {padding: 0 15px!important;}
	.no-margin {margin: 0!important;}
	
}