/*
Theme Name: Nextframe
Theme URI: https://dominio
Author: Mario Rossi
Author URI: https://dominio
Description: Stile base del tema
Requires PHP: 7.0
*/

/* ! Reset */
/*------------------------------------------------------------------*/
:root{
  --header-bg:#254360; /* --- Blu --- */
  --header-color:white;
  --button-bg: white;
  --button-bg-hover:#fcb900; /* --- Arancione --- */
  --button-color: #3E8D3B; /* --- Verde --- */
  --button-text: white;
  --link: #254360;
}

/* ! CSS per modificare il colore blu di default al focus sugli elementi del form */
/*------------------------------------------------------------------*/
.wpcf7 select:focus,
.wpcf7 input:focus,
.wpcf7 textarea:focus {
  border: 2px solid #254360; /* tuo colore personalizzato */
  outline: none; /* rimuove il bordo blu */
  box-shadow: 0 0 5px rgba(37, 67, 97, 0.5); /* effetto glow opzionale */
}



html {
	scroll-behavior: smooth;
}
body, html{ font-size: 16px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif; box-sizing: border-box;margin: 0;padding: 0;}
*,*:before,*:after{ box-sizing: border-box; }
h1,h2,h3,h4,h5,h6, p, ol, ul{margin: 0;padding: 0;}
ol,ul{list-style-type: none;}
ul li{font-size: 20px;}
img{height: auto;}
a{text-decoration: none;}
hr{border:none; border-bottom: 1px solid #ddd}

/*Colore dei link*/
a{text-decoration:none; color: var(--link);}
p{line-height: 1.3;}

/* Utilizzato per spaziare le cose */
.spacer{height: 70px;}


/* ! Title System */
/*------------------------------------------------------------------*/
.text-0{font-size: 5rem !important; line-height: 1;}
h1, .text-1{font-size: 3.5rem;}
h2, .text-2{font-size: 2.5rem;}
h3, .text-3{font-size: 1.8rem;}
h4, p, .text-4{font-size: 1.25rem;}

h1, h2, h3, h4, p, ol, ul{margin-bottom: 1rem;}

@media (max-width: 768px) {
  .text-0{font-size: 4rem}
  h1, .text-1{font-size: 2.8rem;}
  h2, .text-2{font-size: 2rem;}
  h3, .text-3{font-size: 1.5rem;}
  h4, p, .text-4{font-size: 1.2rem;}
}

/* ! Button system con wp-block... andiamo ad impostare lo stile di default dei bottoni in wordpress */
/*------------------------------------------------------------------*/

/* ! Single */
/*------------------------------------------------------------------*/


/* ! Footer */
/*------------------------------------------------------------------*/
.footer {
  background-color: #2c3e5b; /* colore blu scuro */
  padding: 40px 20px;
  color: #fff;
  font-family: "Arial", sans-serif;
}

.footer-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  gap: 30px;
}

.footer-column {
  flex: 1 1 200px;
  min-width: 200px;
}

.footer-logo {
  max-width: 200px;
  height: auto;
}

.footer-column h4 {
  font-size: 16px;
  margin-bottom: 10px;
  font-weight: bold;
}

.footer-column p,
.footer-column a {
  font-size: 14px;
  color: #ffffff;
  text-decoration: none;
}

.footer-column a:hover {
  text-decoration: underline;
}

.footer-column ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-column ul li {
  margin-bottom: 6px;
}

.social-icon img {
  margin-top: 10px;
  width: 50px;
  height: 50px;
  border-radius: 4px;
  padding: 5px;
  display: inline-block;
}

.certificazioni{display:flex;}

.certificazioni img {
  max-width: 120px;
  margin-right: 10px;
  vertical-align: middle;
}

.codici-certificazioni p {
  font-size: 12px;
  margin: 4px 0 0;
}

.footer_cookie{text-align: end; margin: 25px 50px;}
/* ! Style per i button social */
.wrapper {
  display: inline-flex;
  list-style: none;
  margin-top: 1rem;
  margin-bottom: 0.5rem !important;
}

.wrapper .icon {
  position: relative;
  background: white;
  border-radius: 50%;
  padding: 15px;
  margin: 10px;
  width: 50px;
  height: 50px;
  font-size: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  color: var(--header-color);
}

.insta{filter: invert(69%) sepia(85%) saturate(405%) hue-rotate(350deg) brightness(101%) contrast(99%);}


.wrapper .tooltip {
  position: absolute;
  top: 0;
  font-size: 14px;
  background: #ffffff;
  color: #ffffff;
  padding: 5px 8px;
  border-radius: 5px;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.wrapper .tooltip::before {
  position: absolute;
  content: "";
  height: 8px;
  width: 8px;
  background: #ffffff;
  bottom: -3px;
  left: 50%;
  transform: translate(-50%) rotate(45deg);
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.wrapper .icon:hover .tooltip {
  top: -45px;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.wrapper .icon:hover span,
.wrapper .icon:hover .tooltip {
  text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.1);
}

.wrapper .facebook:hover,
.wrapper .facebook:hover .tooltip,
.wrapper .facebook:hover .tooltip::before {
  background: #1877F2;
  color: #ffffff;
}

.wrapper .instagram:hover,
.wrapper .instagram:hover .tooltip,
.wrapper .instagram:hover .tooltip::before {
  background: #E4405F;
}

.wrapper .instagram:hover .insta{filter: invert(1);}

.wrapper .linkedin:hover,
.wrapper .linkedin:hover .tooltip,
.wrapper .linkedin:hover .tooltip::before {
  background: #0D65C2;
  color: #ffffff;
}

.footer-bottom {
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap; /* per gestire il mobile */
  padding: 20px 0;
  font-size: 14px;
  border-top: 1px solid #eee;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

.footer-bottom p {
  margin: 0;
  color: white;
  max-width: 80%;
  font-size: 14px;
}

.footer-bottom a {
  color: white; /* colore arancione principale */
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-bottom a:hover {
  color: white; /* hover nero */
}


/* ! Grid System */
/*------------------------------------------------------------------*/
.grid{display: flex; flex-wrap: wrap; max-width: 100%; width:100%; margin: 0 auto;box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);}
.grid--small{max-width: 900px}
.grid--medium{max-width: 1450px;}
.grid--center{justify-content: center;}
.grid--content{max-width: 1200px;}
.grid--full{max-width: 100%}
.grid--footer{display: flex; justify-content: center; flex-wrap: wrap; max-width: 1450px; width: 100%; margin: 0 auto;}

.col-10{width: 10%;}
.col-15{width: 15%;}
.col-20{width:20%}
.col-25{width:25%}
.col-30{width:30%}
.col-33{width:33.33%}
.col-35 {width:35%}
.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: 10px;}

.grid--full [class*='col-'],
.grid .grid [class*='col-'] {padding: 0;}


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

/* ! ------------------------------------------------------------------- */
/* ! Blocks */
/* ----------------------------------------------------------------------------------- */

.cover{
  background: #000;padding: 20px;min-height: 100vh;
  display: flex; flex-flow: column;
  justify-content: center;
  align-items: center;
  position:relative;
}
.cover__bg{position: absolute;top: 0;left: 0;width: 100%;height: 100%;background:url(bridge.jpg) center center;background-size:cover;z-index:0;border: 1px solid #000}
.cover__bg:after{ content: ' ';position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(0,0,0,0.7) 100%);;background-size:cover;}

.cover__content{max-width: 1200px; margin: 0 auto; position:relative; z-index: 1;width: 100%;}

.cover__content h1{max-width: 1000px}

.available{width: 300px; height: 300px; position:absolute; top:25%; right:10%;}

@media (max-width: 768px) {
  .available{width: 200px; height: 200px;  top:8%; right:2%;}
}

/* ! 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(5rem);}


/* ! Helpers */
/*------------------------------------------------------------------*/
.br{border: 1px solid red;}
.img-res{width: 100%;}
.video-res{width: 100%;height: 100%;overflow: hidden;}
.video-res video{width: 100%;height: 100%;object-fit: cover}

.relative{position: relative;}
.absolute{position: absolute;}

.mt-0{margin-top: 0;}
.mt-1{margin-top: 1rem !important;}
.mt-2{margin-top: 2rem !important;}
.mt-3{margin-top: 3rem !important;}
.mt-4{margin-top: 4rem !important;}
.mt-5{margin-top: 5rem !important;}
.mt-6{margin-top: 6rem !important;}

.mtneg10{margin-top: -10px;}

.mb-0{margin-bottom: 0;}
.mb-1{margin-bottom: 1rem !important;}
.mb-2{margin-bottom: 2rem !important;}
.mb-3{margin-bottom: 3rem !important;}
.mb-4{margin-bottom: 4rem !important;}

.mbneg15{margin-bottom: -15px;}

.ml-0{margin-left: 0;}
.ml-1{margin-left: 1rem !important;}
.ml-2{margin-left: 2rem !important;}
.ml-3{margin-left: 3rem !important;}
.ml-4{margin-left: 4rem !important;}
.ml-5{margin-left: 5rem !important;}
.ml-6{margin-left: 6rem !important;}

.mr-0{margin-right: 0;}
.mr-1{margin-right: 1rem !important;}
.mr-2{margin-right: 2rem !important;}
.mr-3{margin-right: 3rem !important;}
.mr-4{margin-right: 4rem !important;}
.mr-5{margin-right: 5rem !important;}
.mr-6{margin-right: 6rem !important;}

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

.p-0{padding: 0 !important;}
.p-1{padding: 1rem;}
.p-2{padding: 2rem;}
.p-3{padding: 3rem;}
.p-4{padding: 4rem;}

.pt-0{padding-top: 0;}
.pt-1{padding-top: 1rem;}
.pt-2{padding-top: 2rem;}
.pt-3{padding-top: 3rem;}
.pt-4{padding-top: 4rem;}

.pb-0{padding-bottom: 0;}
.pb-1{padding-bottom: 1rem;}
.pb-2{padding-bottom: 2rem;}
.pb-3{padding-bottom: 3rem;}
.pb-4{padding-bottom: 4rem;}

.pl-0{padding-left: 0;}
.pl-1{padding-left: 1rem;}
.pl-2{padding-left: 2rem;}
.pl-3{padding-left: 3rem;}
.pl-4{padding-left: 4rem;}

.mlr-10{margin-left: -10px; margin-right: -10px;}

.w-10{width: 10%;}
.w-20{width: 20%;}
.w-30{width: 30%;}
.w-40{width: 40%;}
.w-50{width: 50%;}
.w-60{width: 60%;}
.w-70{width: 70%;}

.fw-100{font-weight: 100;}
.fw-200{font-weight: 200;}
.fw-300{font-weight: 300;}
.fw-400{font-weight: 400;}
.fw-500{font-weight: 500;}
.fw-600{font-weight: 600;}
.fw-700{font-weight: 700;}
.fw-800{font-weight: 800;}
.fw-900{font-weight: 900;}
.fw-bold{font-weight: bold;}

.rotate-20{transform: rotate(20deg);}

.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;align-items: flex-start;}
 
.alg-center{align-items: center !important;}
.alg-start{align-items: start;}
.alg-end{align-items: flex-end !important;}

.just-center{justify-content: center !important;}
.just-start{justify-content: start !important;}
.just-end{justify-content: end !important;}

.flex{display: flex;} 

.pointer{cursor: pointer;}

.margin-auto{margin: 0 auto !important;}

.font-normal{font-weight: 400;}
.fz-20{font-size: 20px;}

.shadow{box-shadow: 5px 5px 10px 1px #3D3D3D;}

.none{display: none;}
@media (max-width: 768px) {
  .sma-none{display: none;}
}

@media (min-width: 768px) {
  .desk-none{display: none;}
/* -------------------------------------------------------------------------------- */
/* ! Smartphone Helpers */
/* -------------------------------------------------------------------------------- */}
@media (max-width: 768px) {

  .s-m0{margin: 0 !important;}

  .s-mt-0{margin-top: 0 !important;}
  .s-mt-1{margin-top: 1rem !important;}
  .s-mt-2{margin-top: 2rem !important;}
  .s-mt-3{margin-top: 3rem !important;}
  .s-mt-4{margin-top: 4rem !important;}
  .s-mt-5{margin-top: 5rem !important;}
  .s-mt-6{margin-top: 6rem !important;}

  .s-mb-0{margin-bottom: 0 !important;}
  .s-mb-1{margin-bottom: 1rem !important;}
  .s-mb-2{margin-bottom: 2rem !important;}
  .s-mb-3{margin-bottom: 3rem !important;}
  .s-mb-4{margin-bottom: 4rem !important;}

  .s-ml-0{margin-left: 0 !important;}
  .s-ml-1{margin-left: 1rem !important;}
  .s-ml-2{margin-left: 2rem !important;}
  .s-ml-3{margin-left: 3rem !important;}
  .s-ml-4{margin-left: 4rem !important;}
  .s-ml-5{margin-left: 5rem !important;}
  .s-ml-6{margin-left: 6rem !important;}

  .s-mr-0{margin-right: 0 !important;}
  .s-mr-1{margin-right: 1rem !important;}
  .s-mr-2{margin-right: 2rem !important;}
  .s-mr-3{margin-right: 3rem !important;}
  .s-mr-4{margin-right: 4rem !important;}
  .s-mr-5{margin-right: 5rem !important;}
  .s-mr-6{margin-right: 6rem !important;}

  .s-p-0{padding: 0;}
  .s-p-1{padding: 1rem;}
  .s-p-2{padding: 2rem;}
  .s-p-3{padding: 3rem;}
  .s-p-4{padding: 4rem;}

  .s-pt-0{padding-top: 0;}
  .s-pt-1{padding-top: 1rem;}
  .s-pt-2{padding-top: 2rem;}
  .s-pt-3{padding-top: 3rem;}
  .s-pt-4{padding-top: 4rem;}

  .s-pb-0{padding-bottom: 0;}
  .s-pb-1{padding-bottom: 1rem;}
  .s-pb-2{padding-bottom: 2rem;}
  .s-pb-3{padding-bottom: 3rem;}
  .s-pb-4{padding-bottom: 4rem;}

  .s-pl-0{padding-left: 0 !important;}
  .s-pl-1{padding-left: 1rem !important;}
  .s-pl-2{padding-left: 2rem !important;}
  .s-pl-3{padding-left: 3rem !important;}
  .s-pl-4{padding-left: 4rem !important;}
  
  .s-text-center{text-align: center;}
  
  .s-justend{justify-content: end;}
}


/* ! Wordpress Styles */
/*------------------------------------------------------------------*/

input, textarea{border: 3px solid #ddd; border-radius: 3px;padding: 10px;}
input[type=submit], button{border: 3px solid #ddd; background: #ddd; border-radius: 3px;padding: 10px;}

.form-search{width: 100%;border: 3px solid #ddd;border-radius: 100px;padding-left: 15px;}
.form-search input{width: calc(100% - 40px); border: none;}
.form-search button{padding: 0; background: transparent; border: none;}
.form-search img{width: 25px;margin-bottom: -8px;}

/* il calc viene utilizzato per spostare l'immagine, in .alignfull: Prima viene centrata con 50% e poi 
viene allineata a sinistra con il - 50vw di modo cosi che sia a tutto schermo e risulti responsive. 
Stesso discorso per .alignwide solo che viene spostate di -45vw di modo da dargli del margine ai lati.*/
.alignfull{width: 100vw;margin-left: calc(50% - 50vw);}
.alignwide{width: 90vw;margin-left: calc(50% - 45vw);}