*, *::before, *::after { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;}
body {
    position:relative;
    margin: 0;        
    font-size: 1rem;     
    background-color: white;
    color:#01111e;
    width:100%; 
    min-height:100vh;   
    font-family: 'Exo 2', sans-serif;        
}

html {scroll-behavior: smooth; scroll-padding-top: 60px; max-width:100%; overflow-x: hidden; }
section {outline:none;}
img { max-width: 100%; }

.whatsapp {
    display: block;
    position: fixed;
    bottom: 20px;
    left: 30px;
    z-index: 99;    
    border: none;
    outline: none;    
    cursor: pointer;
    filter: drop-shadow(1px 1px 3px rgba(0, 0, 0, 0.4));
    transition: filter ease-out 250ms; 
  }
  .whatsapp:hover {filter: drop-shadow(2px 2px 6px rgba(0, 0, 0, 0.4)); }
  .wrapper {overflow-x: hidden;}

  .navbar {
    background: #0060a0;
    color: white;
    padding: 0.5em 2em;
    position: relative;
    position: fixed;
    z-index:9999;
    box-shadow: 1px 1px 1px white;
    width:100%;
    display:flex;
    align-items: center;
    justify-content: space-between;
  }

  .navbar a {
    color: white;
    display: block;
    padding: 0em 1em;
    text-transform: uppercase;
    text-decoration: none;
    text-align:center;
  }
  
  .navbar a:hover,
  .navbar a:focus {    
    color: #1ac0f2;
  }

  .interno-nav { margin:0;}

  .logo {width:13.5em;  margin:0; }
  .interno-nav ul {list-style:none; display:flex;}

  .scrolled-nav .navbar { width:100%; box-shadow: 1px 1px 1px white; top:0; } 
  .scrolled-nav .logo  { width:10.5em !important; transition: all .5s linear; }

  .hero {display:flex; height:100vh; width:100%; align-items: center; justify-content: center;}
  .img-hero {width:100%;}
  .slogan {width:100%; text-align: left; display:flex; flex-direction: column; padding: 0 3em; }
  .slogan p {line-height:1.6;}
  h1 {text-transform: uppercase; font-size:2em; margin:0.5em 0; font-weight:700; color:#0060a0;}
  h2 {margin:0;}
  .btn {width:100%; margin:1em 0;}
  .btn-txt, .coupon {width:auto; padding:0.7em 1.5em; background:#1d95d8; color:white; border-radius:50px; text-decoration: none; transition: background ease-out 250ms; 
    filter: drop-shadow(1px 1px 3px rgba(0, 0, 0, 0.4)); font-size:1.2em;}
    .btn-txt:hover {background:#023a63;}

    /* OFFERTA */
    #offerta { padding:3em; background:#f3fbfd;}
    #offerta h2 {text-align:center; width:70%;}
    .container-offerta {margin-top:2em; display:flex; width:100%; align-items:flex-start; justify-content: center;}
    .interno-offerta {width:100%; display:flex; flex-direction: column; align-items: center; justify-content: center;}
    .interno-offerta + .interno-offerta {margin-left:2em;}
    .txt-promo {text-align:center; font-size:1.1em;}
    .interno-offerta h3 {margin:0.5em; text-align:center;}
    .promo {font-size:3.5em; color:red; font-weight:700; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6); text-align:center;}
    .specifiche-offerta, .elenco-lavorazioni-ammesse {margin-top:2em; font-size:1em; text-align:left; width:80%; line-height:1.6;}
    .row-button {width:80%; background:#0060a0; margin:2em 0; padding:1em; display:flex; align-items: center; justify-content: center; text-decoration: none; padding:0; border-radius:5px;}
    .link-come-funziona {color:white; margin-right:1em; padding:0;}    
    .icona-bianca {color:white;}
    .come-funziona {width:80%; }
    .lista-come-funziona {list-style:none; width:100%; margin:0; padding:0 2em; }
    .allinea-lista {display:flex; align-items: flex-start; justify-content: flex-start; text-align:left; margin:0; width:100%; line-height:1.6;}
    .allinea-lista + .allinea-lista {margin-top:1em;}
    .icona-numeri {width:25px; height:25px;}
    .sotto-lista {margin:1em 0; list-style:disc; width:100%;}
    .interno-lista + .interno-lista {margin-left:1em;}
    .width-5 {width:5%;}
    .width-95 {width:95%;}    
    

    /* TIPI DI LAVORAZIONE */
 .interno-offerta-box {display:flex; flex-direction: column; width:80%; justify-content: center !important; align-items:center; text-align:center;}  
  
.container-lavorazioni {width:80%; margin-top:2em; text-align:left !important;}
.box_active {background:#1ac0f2 !important; }
.tipo-di-lavorazione { display:flex; position:relative; cursor:pointer; text-align:left; transition-duration: .2s; transition-property: border, box-shadow; width:100%; border-radius:5px; padding:0.5em 1.5em; background:white; transition: background 0.2s ease, padding 0.5s linear; filter: drop-shadow(1px 1px 3px rgba(0, 0, 0, 0.4)); }

.tipo-di-lavorazione:hover {  padding-left:2em; background:#1ac0f2;}
.tipo-di-lavorazione .interno-tipo-di-lavorazione {display:flex; justify-content: center; align-items: center; height:50px; width:100%; }
.interno-tipo-di-lavorazione p {color:#01111e; font-size:1em; font-weight:400; letter-spacing: 1px; margin:0; padding:0; }
.spiegazione-lavorazione {display:block; background:white; width:100%; height:auto; transition: all 0.5s ease; }
.spiegazione-lavorazione p {display:none; color:#01111e !important; margin:0; padding:0 !important; line-height:1.6; font-size:0.9em; }
.altezza0 p {display:none; color:#01111e !important; margin:0; padding:1em; line-height:1.6; font-size:0.9em; } 
.show_box {display:block; margin:1em 0; padding:1em 2em; border-radius:5px; height:auto; transition: all 0.5s; margin-top:0; } 

.allinea {display:flex; align-items: center; justify-content: space-between; width:100%; }
.interno-allinea {width:95%; }
.interno-allinea2 {width:5%;}

.elenco-lavorazioni-ammesse {display:flex;align-items:center; justify-content: center;}
.elenco-lavorazioni-ammesse ul {list-style: none; padding:0; width:auto;}
.elenco-lavorazioni-ammesse ul li {display:flex; align-items: center; line-height:1.6; font-size:1.2em; }
.allinea-contenuto + .allinea-contenuto {margin-left:0.5em;}
.fa-circle-arrow-right {color:#1d95d8;}

/* SERVIZI */
#servizi { padding:3em; background:white;}
.wrap-box {width:100%; display:flex; flex-wrap:wrap; margin:3em 0; align-content:center; justify-content: center; gap:1em;}
.box-servizi {display:flex; width:550px; padding:1em; border-radius:5px; color:white;}

.box-colore1 {background:#0d2130;}
.box-colore2 {background:#2abdef;}
.box-colore3 {background:#0361a1;}
.box-colore4 {background:#123b61;}
.box-colore5 {background:#2279be;}
.box-colore6 {background:#3aa2ba;}
.box-colore7 {background:#3d86af;}
.box-colore8 {background:#2a597c;}
.box-colore9 {background:#4d6a7f;}
.interno-box-servizi + .interno-box-servizi {margin-left:1em; }
.interno-box-servizi-sx {width:120px; display:flex; align-items:center; justify-content: center;}
.interno-box-servizi-dx {width:100%; display:flex; flex-direction: column; font-size:0.9em; line-height:1.6; }
.row-interno-box-servizi + .row-interno-box-servizi {border-top:1px solid white;}
.img-servizi {width:120px;}
.link-box {color:inherit;}

/* FOOTER */

footer {background:#023a63; color:white; display:flex; flex-direction: column; width:100%; justify-content: center; align-items: center;}
.top-footer {display:flex; width:80%; font-size:0.9em; padding:1.5em 0; justify-content: center;}
.col {width:400px; }
.col + .col {margin-left:2em;}
.bottom-footer {font-size:0.8em; border-top:1px solid white; width:100%; text-align:center;} 
.link-footer {color:white; text-decoration: none;}
.link-footer:hover {color:#1ac0f2;}

@media (max-width:498px) {
  nav {padding:0.5em 1em;}
  .nav-link {font-size:0.8em;}
  .hero {flex-direction:column;}
  .logo {width:10em;}
  .img-hero {width:85%;}
  .slogan {text-align:center; align-items: center; justify-content: center;}
  .slogan + .slogan {margin-top:2em;}
  h1 {font-size:1.4em;}
  h2 {font-size:1.1em;}
  .slogan p {font-size:0.9em;}
  .btn-txt, .coupon {font-size:1em;}
  #offerta {padding:3em 2em;}
  .container-offerta {flex-direction:column;}
  .specifiche-offerta, .interno-offerta-box, .come-funziona, .row-coupon, .row-button, .container-lavorazioni, .lista-come-funziona {width:100%;}
  .width-5 {width:10%;}
  .width-95 {width:90%;}
  .top-footer {flex-direction:column; align-items:center; justify-content: center; text-align:center;}
  .tipo-di-lavorazione, .spiegazione-lavorazione {width:100%;}
  .interno-offerta + .interno-offerta {margin-left:0; margin-top:2em;}
  .col {width:100%;}
  .col + .col {margin-left:0; margin-top:2em;}
  .elenco-lavorazioni-ammesse ul li {font-size:1em; }
  .interno-tipo-di-lavorazione p {font-size:0.9em;}
  .interno-box-servizi-sx {align-items:flex-start; padding-top:1em;}
  .tipo-di-lavorazione { padding:1em 1.5em;}
  .tipo-di-lavorazione .interno-tipo-di-lavorazione {height:60px; }
}


@media (min-width:499px) and (max-width:736px) and (orientation:landscape) {
  .slogan {padding:0 2em; height:auto;}
  .slogan-txt {padding-top:90px; padding-right:0;}
  h1 {font-size:1.1em;}
  h2 {font-size:0.9em;}
  .slogan p {font-size:0.8em; }
  .btn-txt, .coupon {font-size:0.8em;}
  #offerta {padding:3em 2em;}
  .container-offerta {flex-direction:column;}
  .specifiche-offerta, .interno-offerta-box, .come-funziona, .row-coupon, .row-button, .container-lavorazioni, .lista-come-funziona {width:100%;}
  .width-5 {width:10%;}
  .width-95 {width:90%;}
  .top-footer {flex-direction:column; align-items:center; justify-content: center; text-align:center;}
  .interno-offerta + .interno-offerta {margin-left:0; margin-top:2em;}
  .tipo-di-lavorazione, .spiegazione-lavorazione {width:100%;}
  
}

@media (min-width:499px) and (max-width:736px) and (orientation:portrait) {
  .hero {flex-direction:column;}
  .logo {width:10em;}
  .img-hero {width:65%;}
  .slogan {text-align:center; align-items: center; justify-content: center;}
  .slogan + .slogan {margin-top:2em;}
  h1 {font-size:1.4em;}
  h2 {font-size:1.1em;}
  .slogan p {font-size:0.9em;}
  .btn-txt, .coupon {font-size:1em;}
  #offerta {padding:3em 2em;}
  .container-offerta {flex-direction:column;}
  .specifiche-offerta, .interno-offerta-box, .come-funziona, .row-coupon, .row-button, .container-lavorazioni, .lista-come-funziona {width:100%;}
  .width-5 {width:10%;}
  .width-95 {width:90%;}
  .top-footer {flex-direction:column; align-items:center; justify-content: center; text-align:center;}
  .interno-offerta + .interno-offerta {margin-left:0; margin-top:2em;}
  .tipo-di-lavorazione, .spiegazione-lavorazione {width:100%;}
  .col + .col {margin-left:0; margin-top:1em;}  
  .elenco-lavorazioni-ammesse ul li {font-size:1em; }
}

/*TABLET */
@media (min-width: 737px) and (max-width:1024px) and (orientation:portrait) {
  .hero {flex-direction:column;}
  .logo {width:10em;}
  .img-hero {width:70%;}
  .slogan {text-align:center; align-items: center; justify-content: center;}
  .slogan + .slogan {margin-top:2em;}
  h1 {font-size:1.7em;}
  h2 {font-size:1.2em;}
  #offerta {padding:3em 1em;}
  .container-offerta {flex-direction:column; align-items: center;}
  .specifiche-offerta, .interno-offerta-box, .come-funziona, .row-coupon, .row-button, .container-lavorazioni {width:90%;}
  .elenco-lavorazioni-ammesse ul li {font-size:1em; }
  .interno-offerta + .interno-offerta {margin-left:0; margin-top:2em;}
}
@media (min-width: 737px) and (max-width:1024px) and (orientation:landscape) {  
  .slogan {padding:0 2em; height:auto;}
  .slogan-txt {padding-top:90px; padding-right:0;}
  h1 {font-size:1.1em;}
  h2 {font-size:0.9em;}
  .slogan p {font-size:0.8em; }
  .btn-txt, .coupon {font-size:0.8em;}
  #offerta {padding:3em 1em;}
  .container-offerta {flex-direction:column; align-items: center;}
  .specifiche-offerta, .interno-offerta-box, .come-funziona, .row-coupon, .row-button, .container-lavorazioni {width:90%;}
  .interno-offerta + .interno-offerta {margin-left:0; margin-top:2em;}
  .logo {width:10em;}
  .img-hero {width:85%;}
  
}

/*ipad pro 10, tablet galaxy */


@media (min-width:1024px) and (max-width:1280px) {
  h1 {font-size:1.7em;}
  h2 {font-size:1.3em;}
  .width-5 {width:10%;}
  .width-95 {width:90%;}
  .specifiche-offerta, .interno-offerta-box, .come-funziona, .row-coupon, .row-button {width:100%;}
}

@media (min-width:1281px) and (max-width:1600px){
  .slogan-img {margin-top:75px;}
}

@media (min-width:1900px){
  .img-hero {width:80%;}
}