:root, [data-bs-theme=light] {
    --bd-purple: #4c0bce;
    --bd-violet: #712cf9;
    --bd-accent: #ffe484;
    --bd-violet-rgb: 113, 44, 249;
    --bd-accent-rgb: 255, 228, 132;
    --bd-pink-rgb: 214, 51, 132;
    --bd-teal-rgb: 32, 201, 151;
    --bd-violet-bg: var(--bd-violet);
    --bd-toc-color: var(--bd-violet);
    --bd-sidebar-link-bg: rgba(var(--bd-violet-rgb), .1);
    --bd-callout-link: 10, 88, 202;
    --bd-callout-code-color: #ab296a;
    --bd-pre-bg: var(--bs-tertiary-bg);
}

html, body { 
margin:0; 
padding: 0;
background-color: #000000; /* sfondo generale */
font-size: 100%;
font-family: "Poppins", sans-serif;

}


.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
  white-space: nowrap;
}



/* Per Chrome, Safari, Edge */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #000000;
}

::-webkit-scrollbar-thumb {
  background-color: #fb00ff;
  border-radius: 6px;
  border: 2px solid #000000; /* bordo per effetto "spessore" */
}
/* Per Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: #fb00ff #000000;
}





  @media (max-width: 460px) {

#video-j1{
  max-width:16rem !important;
}


  }

  /* ———————————————— XS (extra small) ———————————————— */
/* Default, non serve media query: <576px */

/* ———————————————— SM (small) ———————————————— */
/* Da 576px in su */
@media (min-width: 576px) {
  /* es. .some-class { font-size: 1rem; } */
}
/* Fino a 575.98px */
@media (max-width: 575.98px) {

  #hero {

  padding: 0 2.5rem !important;
}


#hero h1{
font-size:5rem!important;
}



#gestionale h2{
font-size: 3.5rem!important;
}

#gestionale .subtitle{
font-size:3.5rem!important;
}

#gestionale p{
font-size: 1.3rem!important;
}






#forms .icon-flow-container {
  display: flex;               /* o inline-flex se preferisci che sia inline */
  justify-content: center;     /* centra orizzontalmente */
  align-items: center;         /* centra verticalmente */
  width: 100%;                 /* occupa tutta la larghezza del genitore */
  font-size: 2.5rem !important;           /* puoi tenerlo qui o lasciarlo inline */
}



#forms p{
  font-size: 1.1rem !important;
}

#servizi-automazione h2{
font-size: 3rem!important;
}

#servizi-automazione h2 span{
font-size: 3rem!important;
}




#about h2, #about2 h2{
text-align:center;
}

#about h2{
font-size:2.0rem!important;line-height:2.2rem!important;

}











}

/* ———————————————— MD (medium) ———————————————— */
/* Da 768px in su */
@media (min-width: 768px) {
  /* es. .some-class { padding: 2rem; } */

}
/* Fino a 767.98px */

  /* Nascondi linea e dot su schermi piccoli */
  @media (max-width: 767.98px) {


      #hero h1{
    font-size:8rem;
  }

  #servizi .row {
    margin-right: 0;
    margin-left: 0;
}

 #servizi-automazione h2{
    font-size: 4rem;
  }

   #servizi-automazione h2 span{
    font-size: 5rem;
  }


  #video-j1{
  max-width:30rem;
}




#contatti .logo, #preventivo .logo{
  max-width:3.5rem!important;
}


#contatti h2, #preventivo h2{
  font-size:2.8rem; line-height:1;
}




  }


@media (min-width: 992px) {
  #servizi-automazione .top-line {
display:none;
  }



}
/* ———————————————— LG (large) ———————————————— */
/* Da 992px in su */
@media (max-width: 992px) {
  html, body {
    font-size: 90%;  /* es. ~80px */
  }

  #servizi .card-text{
  font-size:1.1rem!important;
}


    .timeline-line,
    .timeline-dot {
      display: none;
    }
    .timeline-item .content {
      opacity: 1 !important;
    }
    .timeline-item {
      margin-bottom: 2rem !important;
    }




    #ai-integrate p{
  font-size: 1.3rem !important; 
}


#about .desc, #about .desc span{
  font-size:1.1rem!important;
}


 
}
/* Fino a 991.98px */
@media (max-width: 991.98px) {
  /* es. .some-class { display: block; } */
}

/* ———————————————— XL (extra large) ———————————————— */
/* Da 1200px in su */
@media (min-width: 1200px) {
  /* es. .some-class { margin: 0 auto; } */
}
/* Fino a 1199.98px */
@media (max-width: 1199.98px) {
  /* es. .some-class { margin: 0; } */
  #forms h2{
  font-size:3.5rem!important;
}

}

/* ———————————————— XXL ———————————————— */
/* Da 1400px in su */
@media (min-width: 1400px) {
  /* es. .some-class { max-width: 1320px; } */
}
/* Fino a 1399.98px */
@media (max-width: 1399.98px) {
  /* es. .some-class { max-width: 100%; } */
}


    /* ————————————————————————————————
       TEXT BASIC CSS 
    ———————————————————————————————— */

.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;
}

.grey-bg{
  background:#FBFBFB;
}



    /* ————————————————————————————————
       SFONDI BG e SFONDI TEXT
    ———————————————————————————————— */

.text-grad-j1 {
  display: inline-block;
  white-space: nowrap;            /* evita rotture di riga indesiderate */
  background: linear-gradient(90deg, #00c6ff, #f200ff) no-repeat center/100% auto;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

.grey-bg-grad{
  background: linear-gradient(180deg, #e3e3e3, #ffffff);
}


.text-grad-j1-2{
  background: linear-gradient(90deg, #e74c3c, #f1c40f);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-grad-j1-3{
  
    background: linear-gradient(90deg, #4adbff, #ffd324);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}




/* ————————————————————————————————
    HERO
———————————————————————————————— */
/* 1) Prima dichiaro un fallback “old‐school” */
#hero {
  height: 100vh;
  /* sui WebKit (iOS Safari) obbliga a riempire la viewport “vero” */
  height: -webkit-fill-available;
  /* sui nuovi browser impiega il dynamic viewport unit (esclude chrome/barre UI) */
  height: 100dvh;
  /* assicura che nessuna UI bottom copra il contenuto */
  padding-bottom: env(safe-area-inset-bottom, 0);
  /* se vuoi centrare verticalmente sempre con flex */
  display: flex;
  flex-direction: column;
  justify-content: center;

  padding: 0 5rem;
}


#hero h1{
font-size: 6rem; line-height: 1;
}


#hero h2{
  font-size:1.5rem;
}


#hero .btn{
  font-size:1.3rem !important;
}



/* Il container del logo come sfondo */
#hero .logo-bg-container {
  width: 150%;             
  height: 150%;           
  opacity: 0.2;
  background-image: url('//just1studio.it/img/web/just1logo-w-bord-sfum.webp');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain; 
  z-index: 2;   /* sopra overlay */
}


#hero .logo{
  max-width: 5rem;
}

/* ————————————————————————————————
    SERVIZI
———————————————————————————————— */

#servizi h2 span{
  font-size:6rem; line-height: 1;
}

#servizi h2{
  font-size:4rem; line-height: 1;
}





#gestionale h2{
font-size: 5rem; line-height: 1;
}

#gestionale .subtitle{
font-size:5rem; line-height:1;
}

#gestionale p{
font-size: 1.5rem;
}



#forms h2 {
  font-size: 4rem; line-height: 1;
}





#servizi-automazione h2{
  font-size: 4rem; line-height: 1;
}

#servizi-automazione span{
  font-size:6rem; line-height: 1;
}

#servizi-automazione #timelineWrapper p{
  font-size:1.1rem;
}



#ai-integrate h2{
  font-size: 4rem; line-height: 1;
}


#ai-integrate p{
  font-size: 1.1rem; 
}





/* ————————————————————————————————
    ABOUT
———————————————————————————————— */


#about h2{
font-size:3.5rem;line-height:3.2rem;

}

#about .desc{
font-size:1rem; line-height:1.5;

}

#about span{
font-size:1rem;

}






.biglietto{
    max-width: 20rem;
    /* trasformazioni esistenti */
    transform: rotate(330deg) skew(-39deg, 47deg);
    /* ombra “leggera” sul fondo per dare profondità */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
    border-radius:1rem;
}

@media (max-width: 1380px) {
  /* es. .some-class { margin: 0; } */
 .biglietto{
    max-width: 16rem;
}

}







#about2 h2{
font-size:3.5rem; line-height:0.9;display: inline-block;

}

#about2 .headline{
font-size:3.5rem; line-height:1.3;

}


#about2 ul{
  font-size: 1.1rem;
}

#about2 ul span, #about2 ul i{
  font-size: 1.3rem; line-height:1;
}






/* ————————————————————————————————
    CONTATTI E PREV
———————————————————————————————— */


#contatti .logo, #preventivo .logo{
  max-width:3rem;
}


#contatti h2, #preventivo h2{
  line-height:1;
}





/* ————————————————————————————————
    BUTTONS
———————————————————————————————— */


.btn-custom-1{
  box-sizing: border-box;
 /* Stato iniziale: nessuna ombra interna */
  box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0)!important;  background-color:#000;
  transition: all 0.6s ease !important;

}

.btn-custom-1:hover{
  background-color: #fff!important;
  color: #000!important;
  box-shadow: inset 0 0 0 3px #212529 !important;

}




.btn-custom-3{
  box-sizing: border-box;
 /* Stato iniziale: nessuna ombra interna */
  box-shadow: inset 0 0 0 3px #ffffff !important;
  background-color:#ffffff;
  color: #000000;
  transition: all 0.6s ease !important;

}

.btn-custom-2:hover{
  background-color: transparent!important;
  color: #ffffff!important;
  box-shadow: inset 0 0 0 3px #ffffff !important;

}







.btn-custom-3-inv{
  background-color: #fff!important;
  color: #000!important;
  box-shadow: inset 0 0 0 3px #000000 !important;

}

.btn-custom-3-inv:hover{
  box-sizing: border-box;
 /* Stato iniziale: nessuna ombra interna */
  box-shadow: inset 0 0 0 3px #000000 !important;
  background-color:#000000!important;
  color: #ffffff!important;
  transition: all 0.6s ease !important;
}






.btn-custom-4-nohover{
  background-color: #ffffff!important;
  color: #000!important;
  box-shadow: inset 0 0 0 3px #ffffff !important;

}


.btn-nav-desk{
  font-size:0.8rem;margin-top:2px;text-transform:uppercase;letter-spacing:0.3px;
}

.btn-nav-mob{
font-size:1rem;margin-top:2px;text-transform:uppercase;letter-spacing:0.3px;border:1px solid rgba(0,0,0,0.1);
}







.fade-div {
  width: 100%;
  height: 200px; 
  background: linear-gradient(
    to bottom, 
    #000000,       /* inizio nero */
    #0a0a3c        /* fine: blu scuro */
  );
}

.fade-div-inv {
  width: 100%;
  height: 200px;
  background: linear-gradient(
    to bottom, 
    #0a0a3c,
    #000000      
  );
}





    /* ————————————————————————————————
       ELEMENTI
    ———————————————————————————————— */


    /* CARD con bordo sfumato */
      .card-wrapper {
  /* 1) Applico il gradiente come sfondo sul wrapper */
  background: linear-gradient(45deg, #00c6ff 0%, #f200ff 100%);

  /* 2) Il raggio d’angolo complessivo */
  border-radius: 14px;

  /* 3) padding (spessore del "bordo") */
  padding: 2px; 
  padding-bottom:5px;

  /* 4) Blocco di formato, larghezza, altezza… */
  display: inline-block; 
  /* overflow: hidden evita che eventuali elementi figli escano dai bordi arrotondati */
  overflow: hidden;
}

.card-content {
  /* 5) Qui definisci lo sfondo interno (es. bianco) */
  background-color: #ffffff;
  /* 6) Stesso border-radius meno il padding per non avere spigoli all’interno */
  border-radius: 11px; /* 12px wrapper - 3px padding → 9px: 
                          scegli per comodità 8px o 9px, 
                          basta che sia >0 e <12px */
  /* 7) Ora dentro card-content metti tutti i tuoi contenuti, 
       testo, immagini, ecc. */
  padding: 1rem;
}





/* AI BOX */
  /* Contenitore esterno: sfondo sfumato che fungerà da “bordo” */
  .outer {
    display: inline-block;
                      background: linear-gradient(180deg, #e74c3c, #f1c40f);

    border-radius: 20px;
    padding: 5px; /* spessore del “bordo” sfumato */
  }

  /* Contenitore interno: sfondo nero, con padding e angoli arrotondati */
  .inner {
    background-color: #000;
    border-radius: 17px; /* 20px (outer) - 3px (padding) */
    padding: 15px 20px;
  }

  /* Testo con riempimento sfumato */
  .gradient-text {
    display: inline-block;
    font-weight: 600;
                  background: linear-gradient(180deg, #e74c3c, #f1c40f);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    font-size:4rem;
  }








  /* SERVIZI BOX about */
    /* Contenitore principale per pulsanti + wrapper */
  .cards-container {
    position: relative;
    width: 100%;
  }

  /* Wrapper che contiene tutte le card in orizzontale */
  .cards-wrapper {
    display: flex;
    overflow-x: auto;       /* abilita scroll orizzontale nativo */
    scroll-behavior: smooth; /* scrolling fluido */
    scrollbar-width: none;   /* Firefox: nasconde la scrollbar */
  }
  .cards-wrapper::-webkit-scrollbar {
    display: none;          /* Chrome/Safari: nasconde la scrollbar */
  }

  /* Se entra in classe “centered”, centro tutte le card */
  .cards-wrapper.centered {
    justify-content: center;
  }

  /* Ogni card ha larghezza fissa di 250px e non si riduce */
  .cards-wrapper .card-item {
    flex: 0 0 auto;
    width: 15.6rem;
    margin-right: 1rem; /* spazio tra le card */
  }

  /* Margine sinistro aggiuntivo al primo box */
  .cards-wrapper .card-item:first-child {
    margin-left: 1rem; /* ms-3 equivalente */
  }

  /* Pulsanti freccia posizionati ai lati del wrapper */
  .scroll-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(86, 93, 102, 0.9);
    border: none;
    color: white;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 20;           /* sopra la navbar */
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    user-select: none;
  }

  .scroll-button.left {
    left: 0.5rem;
  }

  .scroll-button.right {
    right: 0.5rem;
  }

  .scroll-button i {
    font-size: 1.5rem;
  }






#servizi-automazione .top-line {
  /* sfondo nero di base, poi sopra il gradiente che sfuma ai bordi */
  background-color: #000;
  background-image: linear-gradient(
    90deg,
    rgba(0,0,0,1)   10%,
    #e74c3c        30%,
    #f1c40f        70%,
    rgba(0,0,0,1)  90%
  );
  height: 1px;
  margin-bottom:2rem;
}




  /* =============================
     TIMELINE AUTOMATIZZAZIONE
     ============================= */
  .timeline-container {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }

  /* La linea verticale che cresce in altezza */
  .timeline-line {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 14px;                 /* spessore linea */
    height: 0;                  /* parte da 0 e cresce via JS */
background: linear-gradient(180deg, #e74c3c, #f1c40f);
    transition: height 0.2s ease-out;
    z-index: 1;
  }

  /* Pallino nascosto di default, appare con .visible */
  .timeline-dot {
    position: absolute;
    top: 50%;                   /* centrato verticalmente rispetto alla riga */
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: 50px;
    height: 50px;
    border-radius: 50%;
background: #fff;
    border: 7px solid #000;
    transition: transform 0.4s ease-out;
    z-index: 2;
  }
  /* Quando l’item diventa visibile, il dot scala a 1 */
  .timeline-item.visible .timeline-dot {
    transform: translate(-50%, -50%) scale(1);
  }

  /* Contenuto dell’item inizialmente trasparente */
  .timeline-item .content {
    opacity: 0;
    transition: opacity 0.6s ease-out;
  }
  /* Quando l’item è visibile, content diventa opaco */
  .timeline-item.visible .content {
    opacity: 1;
  }





  /* =============================
     NAVBARS
     ============================= */
    /* classe che applica sfondo semi‐trasparente + blur */
.nav-container.nav-blur {
  background-color: rgba(0, 0, 0, 0);
  backdrop-filter: blur(6px);
  transition: background-color 0.3s ease, backdrop-filter 0.3s ease;
}


/* blur per desktop e wrapper mobile */
.nav-blur {
  background-color: rgba(0,0,0,0.5);
  backdrop-filter: blur(8px);
  transition: background-color .3s, backdrop-filter .3s;
}

/* blur “statico” per il pannello link mobile */
#navbarNav.nav-blur-mob {
  backdrop-filter: blur(8px);
}

#navbar-mob.navbar{
 padding: 0px !important;
}

#navbar-mob .navbar-toggler {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23fff' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")!important;
}

#navbar-mob .navbar-toggler:focus,
#navbar-mob .navbar-toggler:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

#navbar-mob .nav-link{
 font-size:1.3rem;
}



.nav-container.fixed-top {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;        
  z-index: 1000;      
}
    /* Container principale della navbar */
    .nav-container {
      display: flex;                    /* flex per tenere logo+menu sulla stessa riga */
      justify-content: space-between;   /* logo a sinistra + menu (ul) a destra */
      align-items: center; 
      position: relative;            /* serve per posizionare l'indicatore in rapporto a questa area */
      padding: 0.5rem 1rem;
      background-color: transparent;         /* di default trasparente */

    }

      /* Logo a sinistra */
    .nav-container #logo {
      max-width:6.5rem;
      transition: opacity 0.3s ease;
    }
    

    /* Lista orizzontale */
    .nav-menu {
      display: flex;
      justify-content: center;      
      list-style: none;
      margin: 0;
      padding: 0;
    }
    
    /* Ogni voce di menu (li) */
    .nav-menu li {
      margin: 0 0.8rem;               
      position: relative;            
    }
    
    /* Stile base degli <a> */
    .nav-menu li a {
      display: inline-block;
      text-decoration: none;
      color: #fff;
      font-size: 1.1rem;
      font-weight:200;
      padding: 0.5rem 0.5rem;            
      transition: color 0.2s ease;
            transition: color 0.3s ease;

    }
    .nav-menu li a:hover {
      color: #fff;
    }
    
    /* Se un link è “attivo” */
    .nav-menu li a.active {
      color: #fff;
      font-weight:300;
    }
    
    /* Indicatore  */
    .nav-indicator {
      position: absolute;
      bottom: 0;
      height: 2px;                
      background-color:rgb(255, 255, 255);    
      transition: background-color 0.3s ease, left 0.2s ease, width 0.2s ease;
      /* all’inizio lo rendiamo invisibile fino a quando lo posizioneremo via JS */
      left: 0;
      width: 0;
    }
    



    /* navmobile hacks */
    #navbar-mob.bg-light, #navbar-mob.bg-dark{
    background-color:transparent!important;
    }
    #navbar-mob.navbar-light .nav-link{
    color:#000!important;
    }

    #navbar-mob.navbar-dark .nav-link{
    color:#fff!important;
    }










  /* =============================
     FORMS CONTATTI E PREV
     ============================= */


#contatti input::placeholder,
#contatti textarea::placeholder {
  color: #888888;
}
#contatti input::-webkit-input-placeholder,
#contatti textarea::-webkit-input-placeholder {
  color: #888888;
}
#contatti input::-moz-placeholder,
#contatti textarea::-moz-placeholder {
  color: #888888;
}
#contatti input:-moz-placeholder,
#contatti textarea:-moz-placeholder {
  color: #888888;
}
#contatti input:-ms-input-placeholder,
#contatti textarea:-ms-input-placeholder {
  color: #888888;
}

    #contatti small.text-muted{
      font-weight:200!important;
      font-size:0.8rem;
      color:#fff!important;
    }

 #contatti .form-select{
          --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    display: block;
    width: 100%;
    padding: .8rem 2.25rem .8rem 1.5rem;
 
    color: #cacaca;
    background-color: #000000;
    background-image: var(--bs-form-select-bg-img),var(--bs-form-select-bg-icon,none);
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 16px 12px;
    border: var(--bs-border-width) solid #cacaca;
    border-radius: 5rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-width: 1px;
    }





#contatti textarea.form-control {
    display: block;
    width: 100%;
    min-height:200px;
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.5;
    color: #ffffff;
    background-color: #000000;
    background-clip: padding-box;
    border: var(--bs-border-width) solid #cacaca;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: var(--bs-border-radius);
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}


#contatti .form-control {
    display: block;
    width: 100%;
    padding: .8rem 1.2rem;
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.5;
    color: #ffffff;
    background-color: #000000;
    background-clip: padding-box;
    border: var(--bs-border-width) solid #cacaca;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 5rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    border-width: 1.5px;
    
}





#contatti #prefisso-contatti {
          --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    display: block;
    width: 100%;
    padding: .8rem 2.25rem .8rem 1.5rem;
 
    color: #cacaca;
    background-color: #000000;
    background-image: var(--bs-form-select-bg-img),var(--bs-form-select-bg-icon,none);
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 16px 12px;
    border: var(--bs-border-width) solid #cacaca;
    border-radius: 5rem 0 0 5rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-width: 1px;
}

#contatti #telefono-contatti.form-control {
    display: block;
    width: 100%;
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.5;
    color: #ffffff;
    background-color: #000000;
    background-clip: padding-box;
    border: var(--bs-border-width) solid #cacaca;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0 5rem 5rem 0;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}





    #contatti
    .btn-outline-light {
        --bs-btn-color: #f8f9fa;
        --bs-btn-border-color: #777777;
        --bs-btn-hover-color: #fff;
        --bs-btn-hover-bg: rgb(251 251 251) !important;
        --bs-btn-hover-border-color: #f8f9fa;
        --bs-btn-focus-shadow-rgb: 248, 249, 250;
        --bs-btn-active-color: #fb00ff;
        --bs-btn-active-bg: rgb(0 0 0) !important;
        --bs-btn-active-border-color: #fb00ff;
        --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
        --bs-btn-disabled-color: #f8f9fa;
        --bs-btn-disabled-bg: transparent;
        --bs-btn-disabled-border-color: #f8f9fa;
        --bs-gradient: none;
        border-width: 2px;
    

    }



#contatti .form-label {
  margin-bottom: .5rem;  /* come mb-2 */
  font-size: 1.1rem;
}














/* Placeholder solo dentro #preventivo */
#preventivo input::placeholder,
#preventivo textarea::placeholder {
  color: #888888;
}
#preventivo input::-webkit-input-placeholder,
#preventivo textarea::-webkit-input-placeholder {
  color: #888888;
}
#preventivo input::-moz-placeholder,
#preventivo textarea::-moz-placeholder {
  color: #888888;
}
#preventivo input:-moz-placeholder,
#preventivo textarea:-moz-placeholder {
  color: #888888;
}
#preventivo input:-ms-input-placeholder,
#preventivo textarea:-ms-input-placeholder {
  color: #888888;
}

/* Posiziona le icone in alto a destra del label */
#preventivo .btn-radio-box {
  position: relative;
}

/* Icona “+” mostrata di default */
#preventivo .btn-radio-box .plus-icon {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  font-size: 1.5rem;
  color: currentColor;
  display: block;
}

/* Icona “check” nascosta di default */
#preventivo .btn-radio-box .check-icon {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  font-size: 1.5rem;
  color: currentColor;
  display: none;
}

/* Quando il checkbox è selezionato, nasconde “+” e mostra “check” */
#preventivo .btn-check:checked + .btn-radio-box .plus-icon {
  display: none;
}
#preventivo .btn-check:checked + .btn-radio-box .check-icon {
  display: block;
}

    #preventivo small.text-muted{
      font-weight:200!important;
      font-size:0.8rem;
      color:#fff!important;
    }

   #servizio.form-select{
          --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    display: block;
    width: 100%;
    padding: .8rem 2.25rem .8rem 1.5rem;
    font-size: 1.2rem;
    font-weight: 400;
    line-height: 1.5;
    color: #cacaca;
    background-color: #000000;
    background-image: var(--bs-form-select-bg-img),var(--bs-form-select-bg-icon,none);
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 16px 12px;
    border: var(--bs-border-width) solid #cacaca;
    border-radius: 5rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-width: 1px;
    text-align:center;
    }


    #preventivo .form-select{
          --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    display: block;
    width: 100%;
    padding: .8rem 2.25rem .8rem 1.5rem;
 
    color: #cacaca;
    background-color: #000000;
    background-image: var(--bs-form-select-bg-img),var(--bs-form-select-bg-icon,none);
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 16px 12px;
    border: var(--bs-border-width) solid #cacaca;
    border-radius: 5rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-width: 1px;
    }





#preventivo textarea.form-control {
    display: block;
    width: 100%;
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.5;
    color: #ffffff;
    background-color: #000000;
    background-clip: padding-box;
    border: var(--bs-border-width) solid #cacaca;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: var(--bs-border-radius);
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}


#preventivo .form-control {
    display: block;
    width: 100%;
    padding: .8rem 1.2rem;
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.5;
    color: #ffffff;
    background-color: #000000;
    background-clip: padding-box;
    border: var(--bs-border-width) solid #cacaca;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 5rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    border-width: 1.5px;
    
}


.section-border {
  height: 1px;
  opacity:0.5;
  background: linear-gradient(
    90deg,
    /* lato sinistro nero che si fonde */
    rgba(0,0,0,1)   0%,
    /* poi il tuo azzurro */
    #00c6ff       20%,
    /* quindi il viola */
    #f200ff       80%,
    /* e infine nero che si fonde */
    rgba(0,0,0,1)   100%
  );
}

#preventivo #sezione-dati-contatto #prefisso {
          --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    display: block;
    width: 100%;
    padding: .8rem 2.25rem .8rem 1.5rem;
 
    color: #cacaca;
    background-color: #000000;
    background-image: var(--bs-form-select-bg-img),var(--bs-form-select-bg-icon,none);
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 16px 12px;
    border: var(--bs-border-width) solid #cacaca;
    border-radius: 5rem 0 0 5rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-width: 1px;
}

#preventivo #sezione-dati-contatto #telefono.form-control {
    display: block;
    width: 100%;
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.5;
    color: #ffffff;
    background-color: #000000;
    background-clip: padding-box;
    border: var(--bs-border-width) solid #cacaca;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0 5rem 5rem 0;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}





    #preventivo
    .btn-outline-light {
        --bs-btn-color: #f8f9fa;
        --bs-btn-border-color: #777777;
        --bs-btn-hover-color: #fff;
        --bs-btn-hover-bg: rgb(251 251 251) !important;
        --bs-btn-hover-border-color: #f8f9fa;
        --bs-btn-focus-shadow-rgb: 248, 249, 250;
        --bs-btn-active-color: #fb00ff;
        --bs-btn-active-bg: rgb(0 0 0) !important;
        --bs-btn-active-border-color: #fb00ff;
        --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
        --bs-btn-disabled-color: #f8f9fa;
        --bs-btn-disabled-bg: transparent;
        --bs-btn-disabled-border-color: #f8f9fa;
        --bs-gradient: none;
        border-width: 2px;
    

    }


    /* Piccolo margine fra i box radio */
    .btn-radio-box {
      cursor: pointer;
      /* Forziamo altezza minima uguale per tutti */
      color:#ffffff;
    }
    .btn-radio-box .fw-bold {
      font-weight:300;
    }
    .btn-radio-box small {
      font-size: 0.85rem;
    }
    /* Se vogliamo un’ombra delicata quando è attivo */
    .btn-radio-box.active {
      box-shadow: 0 0 0.25rem rgba(0, 123, 255, 0.25);
    }
    /* Spazio extra fra le sezioni */
    .form-section {
      margin-top: 1.5rem;
      padding-top: 1rem;
    }

#servizio.has-selection {
  border-color: rgb(0, 0, 0);
  color: #000000;
  font-weight: 600;

  /* prima la freccetta, poi il gradient */
  background-image:
    var(--bs-form-select-bg-img),              /* freccetta SOPRA */
    linear-gradient(90deg, #00c6ff, #f200ff);   /* gradient SOTTO */

  background-repeat: no-repeat, no-repeat;
  /* freccetta in alto a destra; gradient al centro che copre tutto */
  background-position: right .75rem center, center center;
  background-size: 16px 12px, cover;
}
#preventivo .form-label {
  margin-bottom: .5rem;  /* come mb-2 */
  font-size: 1.1rem;
}










  /* =============================
     FOOTER
     ============================= */


#footer .logo{
max-width:2rem
}

#footer .logo-span{
  font-size:1.3rem; line-height:1;
}



#footer h5{
  font-size:0.9rem;
  opacity: 0.8;
  font-weight:300;
  padding-bottom: 0.6rem;
}


#footer ul li{
  font-size: 1.2rem;
  font-weight:300;
  padding-bottom: 0.3rem;
}


#footer .link_utili ul li{
  font-size: 1rem!important;
  font-weight:300;
  padding-bottom: 0.3rem;
}

#footer .info h5{
  font-size:0.9rem;
  opacity: 0.8;
  font-weight:300;
  padding-bottom: 0rem;
}

#footer .info a{
  font-size: 1rem;
  font-weight:300;
  padding-bottom: 0.3rem;
}


#footer .disclaimer{
  font-size: 0.8rem;
  font-weight:300;
  color: #cacaca;
}

#footer .disclaimer a{
  color: #cacaca;
}



  /* =============================
     MODALS
     ============================= */

     .modal-header{
      border-bottom:0!important;
     }


      .modal-footer{
      border-top:0!important;
     }


     .modal-text{
      font-size: 0.8rem!important;
     }





#modal-preventivo {
--bs-modal-bg: #000000;
--bs-modal-header-border-color: #000000;
--bs-modal-footer-border-color: #000000;
}

#modal-preventivo .btn-close {
  --bs-btn-close-color: #ffffff;
  --bs-btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");

--bs-btn-close-opacity: 0.8; 
    --bs-btn-close-hover-opacity: 1;
}