body{
    background-color: #292828;
    font-family: "Inter", sans-serif;
    font-weight: 400;
    color: white;
 }

.globale{
    width:100%;
}



.logotipo{
width: 150px;
height: 100px;
}

.pittogramma{
    height: 100px;
    width: auto;
    margin-top: 70px;
}

/* FONT COMUNI */
p{
    font-size: 20px;
    font-weight: 300;
}

h2{
    font-size: 24px;
    font-weight: 500;
    font-style: normal;
    text-align: center;
}

.titolo-grigio-thin{
  font-family: "Alumni Sans Pinstripe", sans-serif;
  font-weight: 400;
  font-size: 80px;
}


.paragrafo-nota{
    font-size: 12px;
    color: #656565;
}
 

/* NAVBAR */
#mainNav {
    padding-top: 0;
    padding-bottom: 0;
    border-bottom: none;
    background-color: transparent;
    transition: background-color 0.3s ease-in-out;
}
#mainNav.navbar-shrink {
    background-color: #333;
}

/* PRIMA SCHERMATA */

.hero {
    position: relative;
    height: 100vh;
    width: 100vw;
    color: white;
} 

.background-video {
    
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    z-index: -1;
}

.hero-content {
    z-index: 1;
    position: absolute;
    width: 50vw;
    margin-left:50px;
    margin-top:-450px;
}


.hero-content-titolo-intro{
    color: white;
    font-weight: 100;
    font-style: normal;
    font-size: 130px;
}


.hero-content-trasparent-button {
    background: transparent;
    border: 2px solid white;
    border-radius: 30px;
    padding: 10px 20px;
    font-size: 1.2em;
    color: white;
    cursor: pointer;
    text-transform: none;
    transition-behavior: normal;
    transition-delay: 0s;
    transition-duration: 0.2s;
    transition-property: all;
    transition-timing-function: ease;
}

.hero-content-trasparent-button:hover {
    background: white;
    color: black;
    transition: 0.7s;
}

/* 2^ SCHERMATA */
.presentazione-sfondo-nero{
    background-color: black;
    height: 100vh;
    width: 100vw;
    padding: 70px;
}
.titolo-presentazione{
    color: white;
    font-size: 90px;
    font-weight: 200;
    text-align: center;
    line-height: 130%;
    letter-spacing:20px;
    max-width: 1024px;
    margin:auto;
}


.benvenuti{ 
    float:right;
    margin-top:60px;
    font-weight: 300;
    font-style: normal;
    font-size: 14px;
    width: 520px;
}
.benvenuti p{
    font-size:14px;
}

/*3^ SCHERMATA*/
.primo-suv{
    text-align: center;
    height: 120vh!important;
}

.primo-suv-casla{
    text-align: center;
    font-family: "Khand", sans-serif;
    color: #7E7A7A;
    font-size: 48px;
}

h2{
    font-size: 40px;
    font-weight: 500;
    font-style: normal;
    text-align: center;
    font-family: "Khand", sans-serif;
    color: white;
}

h1.primo-suv-leone{
    font-family: "Alumni Sans Pinstripe", sans-serif;
    font-weight: 400;
    font-size: 400px;
    font-weight: 100;
    letter-spacing: 50px;
    text-align: center;
    color: #656565;

}
.primo-suv-tesla-black{
    height: 300px;
    width: 100%;
    text-align: center;

}

.primo-suv-tesla-black img{
    height: auto;
    width: 1300px;
    margin-top:-190px;
    z-index: 1;

}
.primo-suv-prenota{
    display: block;
    width:1024px;
    max-width:1024px;
    margin:auto;
    text-align: center;
}
.primo-suv-prenota-button{
    display: block;
    margin: 20px auto;
    border-radius: 20px;
    border: none;
    color: black;
    background-color:white;
    padding: 8px;
    font-size: 18px;
    width: 300px;
    
}
.primo-suv a{
text-decoration:none;
}



/*BOX SOSTENIBILITà*/
.box-nero{
    background-color:black;
    border-radius: 30px;
    width: 70%;
    height: 30vh;
    margin:60px auto;
    padding: 1px 1px 1px 1px ;
    background-image: linear-gradient(150deg, #858585 0%, #000000 50%, #454545 100%);
}
.box-nero-interno{
    background-color: black;
    border-radius: 29px;
    width: 100%;
    height: 100%;
    padding: 100px;
    text-align: left;

}
.box-nero-button{
    margin: 10px 0 0 0;
    border-radius: 20px;
    border: 1px solid white;
    color: white;
    background-color:transparent;
    padding: 8px;
    font-size: 14px;
    width: 200px;
}
.box-titolone{
    text-align: center;
}    

.box-nero-interno.sostenibilita{
    display:flex;
    align-items: center;
    padding:0px 0;
}
.box-nero-interno.sostenibilita.due{
    display:flex;
    align-items: center;
}

.img-box-nero{
    height:350px ;
    border-radius: 29px;

}

.box-nero-interno.futuro .img-box-nero{
    height:auto;
    width:250px;
    float:right;
}

.paragrafo-verde{
    color: #029050;
    font-weight: 600;
}












/* PAGINA CASLA */

.hero-casla{
    display: flex;
    text-align:  center;
    justify-content: space-around;
    align-items: end;
    background-image: url(img/img_auto_png/hero-casla\ 1.jpg);
    background-size: cover;
    background-position: center;
    height: 100vh;
    width: 100vw;
    padding: 30px;
}

.titolo-casla{
    font-family: "Khand", sans-serif;
    font-size: 130px;
    font-weight: 600;
}

.button-configura{
    background-color: #2A3FFE;
    border-radius: 30px;
    padding: 10px 30px;
    font-size: 18px;
    color: white;
    font-weight: 500;
    cursor: pointer;
    text-transform: none;
    transition-behavior: normal;
    transition-delay: 0s;
    transition-duration: 0.2s;
    transition-property: all;
    transition-timing-function: ease;
}

.button-configura:hover {
    background: white;
    color:#2A3FFE;
    transition: 0.7s;
}
.hero-casla-2{
    height: 100vh;
    background:url(img/img_auto_png/casla-fronte.png) no-repeat;
    background-size: 90%;
    background-position-x: 300px;
    background-position-y: 350px;
    padding:80px;
}

.testo-alto {
    border-bottom:1px solid white;
    padding:10px;
    height:60px;;
}
.testo-alto h2, .testo-alto p{
    display:block;
    float:left;
    width:50%;
    text-align: left;;
}
.testo-alto p{
    text-align: right;
}

.hero-casla-2 .container{
    padding:200px 0;
    
}
.hero-casla-2 .container h3{
    color:#2A3FFE;
    font-size:50px;
    font-weight:800;
}
.hero-casla-2 .container p{
    color:#dddddd;
    font-size:20px;
    font-weight:300;
}
button.dettagli-tecnici, button.dettagli-tecnici-chiudi {
    border-radius:20px;
    padding:6px 20px;
}

.casla-fronte{
    width: 1000px;
    height: auto;
    float: right;
}


.sfondo-design{
    background-image: url(edit_tesla-v1/tesla_edit_design_interno.jpg);
    background-size: cover;
}

.sfondo-guida{
    background-image: url(edit_tesla-v1/tesla_edit_cerchio.jpg);
    background-size: cover;
}

.sfondo-prestazioni{
    background-image: url(edit_tesla-v1/tesla_edit_design_fari2.jpg);
    background-size: cover;
}



.test-drive{
    background-image: url(edit_tesla-v1/test-drive-mockup.jpg);
    height: 100vh;
    background-size: cover;
}

.testo-test-drive{
    justify-content: center;
    text-align: center;
    height: 100px;
    width: 400px;
    color: white;
    margin:auto;
    padding-top:740px;
}

.paragrafo-test-drive{
    font-size: 16px;
}

.bottone-test-drive{
    border-radius: 20px;
    border: none;
    color: black;
    background-color:white;
    padding: 8px;
    font-size: 18px;
    width: 300px;
    cursor: pointer;
    text-transform: none;
}

.contenitore-video-casla, .contenitore-grid{
    width:100%;
    padding:60px 30px;
}
.video-casla{
    border-radius: 30px;
    width: 100%;
    height:auto;
}


/*GRIGLIA*/
.grid {
    background: transparent;
    width: 100%;
    max-width:100vw;
    height: 90vh;
    display: grid;
    gap: 1.5vw;
    padding: 30px;
    margin-bottom: 60px;;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: auto;
    grid-template-areas:
    "hero hero hero hero aside2 aside2"
    "hero hero hero hero aside2 aside2"
    "hero hero hero hero aside2 aside2"
    "hero hero hero hero aside2 aside2"
    "aside3 aside3 aside4 aside4 aside5 aside5 ";
  }

  .item {
    border: 2px solid #464545;
    border-radius: 20px;
  }
  
  .grid .item:nth-child(1) {
    grid-area: hero;
    background-image: url(edit_tesla-v1/mockup_volante.jpg);
    background-size: cover;
  }
  .grid .item:nth-child(2) {
    grid-area: aside2;
    background-image: url(edit_tesla-v1/tesla_edit_portaoggetti.jpg);
    background-size: cover;
  }
  
  .grid .item:nth-child(3) {
    grid-area: aside3;
    background-image: url(edit_tesla-v1/tesla_edit_design_touchscreen.jpg);
    background-size:cover;
  }
  .grid .item:nth-child(4) {
    grid-area: aside4;
    background-image: url(edit_tesla-v1/tesla_edit_design_sedile1.jpg);
    background-size: cover;
  }
  
  .grid .item:nth-child(5) {
    grid-area: aside5;
    background-image: url(edit_tesla-v1/tesla_edit_design_interno.jpg);
    background-size: cover;
  }


/*FINE GRIGLIA*/

.contenitore-cerchi{

}

.contenitore-cerchi-testo{
    flex-direction:column;
    align-items: left;
    align-self: center;
}
.contenitore-colori{
    padding-bottom:60px;
}

.img-colore{
    width: 300px;
    height: auto;
}




.paragrafo-blu{
    color: #2A3FFE;
    font-weight: 600;
}

.ricarica{
    display: flex;
    background-image: url(edit_tesla-v1/tesla_edit_ricarica.jpg);
    height: 100vh;
    background-size: cover;
}


.mappa{
    justify-content: right;
}




/* Carousel base class */
.carousel {
    margin-bottom: 0;
  }
  /* Since positioning the image, we need to help out the caption */
  .carousel-caption {
    bottom: 3rem;
    z-index: 10;
  }
  
  /* Declare heights because of positioning of img element */
  .carousel-item {
    height: 40rem;
  }



 .box-griglia{
    display: grid;
    grid-template-columns: auto auto auto;
    grid-column-gap: 30px;
    padding: 60px;
    background-color: white;
    
} 

.box-tecnologia{
    position:relative;
    border-radius: 20px;
    background-color: #EEEFF2;
    width: 500px;
    height: 650px;
    box-shadow: 0px 4px 8px rgba(44, 39, 56, 0.08);
}
.box-tecnologia .testo{
    padding: 0 ;
}
.box-tecnologia h1, .box-tecnologia p{
    margin: 40px;
    color:black
}

.box-tecnologia.due h1, .box-tecnologia.due p{
    margin: 40px 40px 5px 5px;
    text-align: right;
}
.box-tecnologia.due .testo{
    float:right;;
    width:55%;
}   
.img_tecnologia{
    border-radius: 19px;
}

.box-tecnologia.uno .img_tecnologia{
    bottom:0;
    width:100%; 
    height:auto;
}
.box-tecnologia.due .img_tecnologia{
    position:absolute;
    bottom:0;
    width:40%; 
    height:auto; 
    margin-right:10px;    
}
.box-tecnologia.tre .img_tecnologia{
    bborder-radius: 20px;
    width: 100%;
    height: auto;
    }
.box-tecnologia.tre .testo{
    position:absolute;
    bottom:0;
}   


/* SCHERMATA AUTOPILOT*/
.autopilot{
    display: flex;
    margin-top: 40px;
    margin-left: 40px;
}

.testo-autopilot{
    margin: 40px;
    width: 40%;
    padding-right:10%;
}

.div-video-autopilot{
    width: 50%;
    height: auto;
}

.video-autopilot{
    border-radius: 30px;
    width: 100%;

}



  /*CSS LISTA PER CONFIGURAZIONE */
.list-group {
  width: 100%;
  max-width: 460px;
  margin-inline: 1.5rem;
}

.form-check-input:checked + .form-checked-content {
  opacity: .5;
}

.form-check-input-placeholder {
  border-style: dashed;
}
[contenteditable]:focus {
  outline: 0;
}

.list-group-checkable .list-group-item {
  cursor: pointer;
}
.list-group-item-check {
  position: absolute;
  clip: rect(0, 0, 0, 0);
}
.list-group-item-check:hover + .list-group-item {
  background-color: var(--bs-secondary-bg);
}
.list-group-item-check:checked + .list-group-item {
  color: #fff;
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}
.list-group-item-check[disabled] + .list-group-item,
.list-group-item-check:disabled + .list-group-item {
  pointer-events: none;
  filter: none;
  opacity: .5;
}

.list-group-radio .list-group-item {
  cursor: pointer;
  border-radius: .5rem;
}
.list-group-radio .form-check-input {
  z-index: 2;
  margin-top: -.5em;
}
.list-group-radio .list-group-item:hover,
.list-group-radio .list-group-item:focus {
  background-color: var(--bs-secondary-bg);
}

.list-group-radio .form-check-input:checked + .list-group-item {
  background-color: var(--bs-body);
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 2px var(--bs-primary);
}
.list-group-radio .form-check-input[disabled] + .list-group-item,
.list-group-radio .form-check-input:disabled + .list-group-item {
  pointer-events: none;
  filter: none;
  opacity: .5;
}
/*FINE*/

 /*CSS SIDEBARS*/
 .dropdown-toggle { outline: 0; }

.btn-toggle {
  padding: .25rem .5rem;
  font-weight: 600;
  color: var(--bs-emphasis-color);
  background-color: transparent;
}
.btn-toggle:hover,
.btn-toggle:focus {
  color: rgba(var(--bs-emphasis-color-rgb), .85);
  background-color: var(--bs-tertiary-bg);
}

.btn-toggle::before {
  width: 1.25em;
  line-height: 0;
  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%280,0,0,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
  transition: transform .35s ease;
  transform-origin: .5em 50%;
}

[data-bs-theme="dark"] .btn-toggle::before {
  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%28255,255,255,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
}

.btn-toggle[aria-expanded="true"] {
  color: rgba(var(--bs-emphasis-color-rgb), .85);
}
.btn-toggle[aria-expanded="true"]::before {
  transform: rotate(90deg);
}

.btn-toggle-nav a {
  padding: .1875rem .5rem;
  margin-top: .125rem;
  margin-left: 1.25rem;
}
.btn-toggle-nav a:hover,
.btn-toggle-nav a:focus {
  background-color: var(--bs-tertiary-bg);
}

.scrollarea {
  overflow-y: auto;
}
/*FINE*/


  .paragrafo-lista{
    font-size: 14px;
  }




/*CONFIGURAZIONE CASLA*/
.esterno-configurazione{
   display: flex; 
   margin-top: 160px;
}

.img-configurazione{
    width: 60%;
    
  
}
.img-configurazione img{
   width: 100%;
   height: auto;
   padding: 10px; 
   position: sticky;
   top:100px;
}

.img-configurazione {
    width: 60%;
  
}
.img-configurazione #img2{
   width: 80%;
   height: auto;
   padding: 10px; 
   position: sticky;
   top:100px;
   border-radius: 20px;
   margin-left: 90px;
}


.configurazione{
    width: 30%;
}

.configurazione h1.titolo-casla{
    font-family: "Khand", sans-serif;
    font-size: 100px;
    font-weight: 400;
}
.configurazione-2{
    padding:5px 0;
    border-bottom: 1px solid #ccc; 
    clear:both;   
}
.configurazione-2 p{
    display:inline-block;
    width: 48%;
    color: white;
    margin-bottom:0;
}
.configurazione-2 p:nth-child(2){
    text-align:right;
}

.configurazione-3.container{
    padding:10px 0;
    margin-top: 50px;
}
.configurazione-3.container .col{
    display:inline-block;
    margin-right:20px;
}
.configurazione-3.container .row{
    display:block;
}

.configurazione-3.container h3{
    color:#2A3FFE;
    font-size:30px;
    font-weight:400;
}
.configurazione-3.container p{
    color:#dddddd;
    font-size:14px;
    font-weight:300;
}
.configurazione-4 span{
    display:inline-block;
    background-color:#fff;
    font-size:14px;
    border-radius:50%;
    width:30px;
    height:30px;
    margin-right: 10px;;
}
.configurazione-4 span:nth-child(2){background-color: black;}
.configurazione-4 span:nth-child(3){background-color: red;}
.configurazione-4 span:nth-child(4){background-color: blue;}

.configurazione-5 .list-group,
.configurazione-7 .list-group {
    margin-inline: 0rem!important;
}
.configurazione-5 .list-group-item,
.configurazione-7 .list-group-item {
    background-color: transparent;
    border-radius:20px;
    margin-bottom: 20px;
    color:white;
}
.list-group-item+.list-group-item {
    border-top-width: 1px;
}

button.scegli-set{
    background-color: white;
}
ul.scegli-set-lista li, 
ul.scegli-set-lista li a, ul.scegli-set-lista li a:link, ul.scegli-set-lista li a:visited, ul.scegli-set-lista li a:focus{
    color: white!important;
}
.btn-toogle-nav a, .btn-toogle-nav a:link, , .btn-toogle-nav a:focul{
    background-color: white!important;
}

.configurazione-sedili span{
    display:inline-block;
    background-color:#000;
    font-size:14px;
    border-radius:50%;
    width:30px;
    height:30px;
    border:1px solid #fff;
    line-height: 30px;
    text-align: center;
}
.configurazione-sedili ul{
    font-size:14px;
    line-height: 18px;
    padding:0 0 0 10px;
    margin-top: 20px;;
}




    
.opzione.cerchi.selezionato{
    background-color: #444444;
    border-color: #2a3ffe;    
  }
.opzione.setcerchi.selezionato{
    background-color: #444444;
    border:1px solid #2a3ffe;

}
  
  
.opzione.esterni:hover{
  border:1px solid yellow;
  border-radius:50%;
  }
.opzione.esterni.bianco:hover{
  border:1px solid yellow;
  border-radius:50%;
  }
.opzione.esterni.selezionato{
  border:1px solid yellow;
  border-radius:50%;
  } 
.opzione.esterni.bianco.selezionato{
  border:1px solid yellow;
  border-radius:50%;
  }      
  
.opzione.gancio:hover{
    background-color: #444444;
    border-color: #2a3ffe;    
  }
  
.opzione.gancio.selezionato{
    background-color: #444444;
    border-color: #2a3ffe;    
  }
  
.opzione.interni:hover{
  border:1px solid #2a3ffe;

  }
.opzione.interni.selezionato{
  border:1px solid #2a3ffe;
  
  }   
  
.sedili-elenco ul{
  padding-left:10px;
}    

.opzione.accessori:hover{
    background-color: #444444;
    border-color: #2a3ffe;    
  }
  
.opzione.accessori.selezionato{
    background-color: #444444;
    border-color: #2a3ffe;    
  }





/*FINE CONFIGURAZIONE CASLA*/

.b-example-divider {
    width: 100%;
    height: 3rem;
    background-color: rgba(0, 0, 0, .1);
    border: solid rgba(0, 0, 0, .15);
    border-width: 1px 0;
    box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
}


menu{
width: 100vw;
background: linear-gradient (rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(imm.jpeg);
background-size: cover;
}



/*POP-UP SPECIFICHE*/

.popup-sfondo{
    display:none;
    position: fixed;
    top: 0;
    left: 0;    
    width: 100vw;
    height: 100vh;
    background-color: rgba(255,255,255, 0.4);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
  }

  .box-popup{
    background-color: black;
    border-radius: 20px;
    max-width: 80vw;
    margin:100px auto;
  }

.titolo-specifiche{
    color: #2A3FFE;
    font-weight: 600;
    padding-bottom: 10px;
    border-bottom: #2A3FFE solid;
    font-size: 24px;

}

.nome-specifiche{
font-size: 18px;
color: #858585;
}

.descrizione-specifiche{
    font-size: 14px;
}



@media  (max-width: 640px){
    .hero {
        position: relative;
        height: 100vh;
        width: 100vw;
        color: white;
        
    } 
    .background-video {
        width: 100vw;
        height: 65vh;
        object-fit: cover;
    }
    .hero-content {
        z-index: 3;
        position: absolute;
        height: 50vw;
        margin-left:50px;
        margin-top: 0px;
    }    
    .hero-content-titolo-intro{
        font-size: 70px;
    }
    .presentazione-sfondo-nero{
        height: 75vh;
        width: 100vw;
        padding: 30px;
    }
    .titolo-presentazione{
        font-size: 40px;
        text-align: center;
        max-width: 100%;
        margin:auto;
        letter-spacing: -2px;
    }
    
    .benvenuti{ 
        float:none;
        font-size: 16px;
        width: 100%;
        text-align: center;
    }
    .benvenuti p{
        font-size:16px;
    }
    .primo-suv{
        height:85vh!important;
    }
   
    .primo-suv-casla{
        text-align: center;
        font-family: "Khand", sans-serif;
        color: #7E7A7A;
        font-size: 48px;
    }
    h1.primo-suv-leone{
        font-size: 150px;
        letter-spacing: 10px;
        color: #656565;
    
    }
    .primo-suv-tesla-black{
        height: 100px;
        width: 100%;
    }
    .primo-suv-tesla-black img{
        height: auto;
        width: 100%;
        margin-top:-100px;
        z-index: 1;
    
    }
    .primo-suv-prenota{
        display: block;
        width:100%;
        max-width:100%;
    }
    .primo-suv-prenota-button{
    }
    .box-nero{
        width: 90%;
        height: 35vh;
        margin:30px;
    }
    .box-nero-interno{
        padding: 30px;
        text-align: center;
    
    }
    .box-nero-interno.futuro .img-box-nero{
        width:200px;
        float:none;
        margin-bottom: 50px;;
    }
    .box-nero-interno.futuro p.text-start{
        width:100%;
        text-align: center!important;
    }
    
    .box-nero-button{
        margin: 30px 0 0 0;
    }
    .box-titolone{
        width: 100% !important;
        margin-left:0%;
    }    
    .box-titolone h1.titolo-grigio-thin{
        font-size: 50px;
        text-align: center;
      }
      
    .box-nero-interno.sostenibilita{
        flex-direction: column;
        padding:0px 0;
    }
    .box-nero-interno.sostenibilita.due{
    }
    .box-nero-interno.sostenibilita div{
        width: 100%!important;
    }
    .box-nero-interno.sostenibilita div img{
        width: 100%!important;
        height:180px;
        border-radius:0 0 20px 20px; 
    }
    .box-nero-interno.sostenibilita.due div img{
        border-radius:20px 20px 0 0; 
    }
    
                           
    .hero-casla{
        background-size: 170%;
        background-repeat: no-repeat;
        background-position:top center;
        height: 50vh;
        width: 100%;
        padding: 30px;
        align-items: end;
   }
    .titolo-casla{
        font-size: 70px;
    }
    .casla-caratteristiche .container ul li,
    .casla-caratteristiche .container ul h3,
    .casla-caratteristiche .container ul p{
        text-align: center;
    }
    .casla-caratteristiche button.dettagli-tecnici{
        display: block;
        margin:auto;
    }
    
    .hero-casla-2{
        height:80vh;
        background-size: 120%;
        background-position-x: center;
        background-position-y: bottom;
        padding:30px 30px 280px 30px;
    }   
    .hero-casla-2 .container{
        padding:0px;
    }   
    .testo-alto h2, .testo-alto p{

    }
    .hero-casla-2 .container h3{
        font-size:36px;
        font-weight:600;
    }
    .hero-casla-2 .container p{
        color:#dddddd;
        font-size:20px;
        font-weight:300;
    }
    .testo-alto p{
        text-align: right;
        padding-left:20%;
        padding-top:6px;
        font-size:12px;
    }
    .popup-sfondo{
      }
    
    .box-popup{
        max-width: 90vw;
        margin:30px auto;
      }
    .box-popup.p-5{
        padding:30px!important;
      }
    .box-popup.p-5 .container{
        width: 100% !important;;
        padding:30px!important;
      }
    .box-popup.p-5 .container img{
        width: 100% !important;;
      }
    
    .titolo-specifiche{
        color: #2A3FFE;
        font-weight: 600;
        padding-bottom: 10px;
        border-bottom: #2A3FFE solid;
        font-size: 20px;
    
    }
    
    .nome-specifiche{
        font-size: 14px;
        color: #858585;
        }
    
    .descrizione-specifiche{
        font-size: 12px;
    }
    
    .box-griglia{
        display:block;
        padding: 60px;
    } 
    
    .box-tecnologia{
        position:relative;
        display: block;
        width: 100%;
        height: 650px;
        margin-bottom: 50px;
    }
 
    .test-drive{
        height: 400px;
        background-size: contain;
        background-repeat: no-repeat;
    }   
    .testo-test-drive{
        justify-content: center;
        text-align: center;
        height: 100px;
        width: 100%;
        color: white;
        margin:auto;
        padding-top:150px;
    }
    .contenitore-video-casla{
        display:block!important;;
        width:100%;
        padding:30px;
    }
    .video-casla{
        width: 100%;
        height:auto;
        margin:auto;
    }
    .contenitore-grid {

     }
     .grid {
        height: 40vh;
        gap: 1.5vw;
        padding: 30px;
        margin-bottom: 60px;
      }
    
    .configurazione-3.container .col{
        display:block;
        margin-right:20px;
    }
          
    .contenitore-cerchi{
        flex-direction:column;
         align-items: left;
         align-self: center;
        width:100%;
        padding-top: 60px;
    }
    .contenitore-cerchi > div{
        padding:0 30px 30px 30px !important;
        display:flex;
        flex-flow: column;
 
    } 
    .contenitore-cerchi div img{
        width: 100%;
 
    }   
    .contenitore-cerchi .cerchi-19 img{
        order:2;
    }     
    .contenitore-cerchi .cerchi-19 p{
        order:1;
    }     
    .contenitore-cerchi-testo{
        width:100%!important;
        padding:0!important;
        flex-direction:column;
         align-items: left;
         align-self: center;
    }
    .contenitore-motore {
        width:100%!important;
        padding-top: 60px;
        flex-direction: column;
        
    }
    .contenitore-motore > div{
        display:block;
        width:100%!important;
        padding:0 30px 30px 30px !important;
        
    }
    .contenitore-motore img{
        display:block;
        width:100%!important;
        
    }
    .box-griglia{
        width:100%!important;
        padding:0 30px 30px 30px !important;
        
    }
    .box-griglia > div{
        width:100%!important;
        padding:30px 0 0 0 !important;
        min-height:500px;
        
    }
    .box-tecnologia .testo{
    }
    .box-tecnologia h1, .box-tecnologia p{
        margin: 40px;
        color:black
    }
    .box-griglia > div.box-tecnologia.due{
        padding:30px 0 0 0 !important;
        min-height:300px;
        height: 630px;
        
    }
    
    .box-tecnologia.due .img_tecnologia{
        top: 0px;
        left:30px;
        width: 90px;
    }
    .box-tecnologia.due h1, .box-tecnologia.due p{
    }
    .box-tecnologia.due .testo{
        width:70%;
        margin-top: 0px;
        margin-left: 0px;
        margin-right: 0px;
    }   
    .box-griglia > div.box-tecnologia.tre{
        padding:0px 0 0 0 !important;
        min-height:300px;
        height: 500px;
        
    }

    .img-motore{
        align-items: start;
    }

    .autopilot{
        display: flex;
        flex-direction: column;
        margin: 0px;
        padding:30px;
    }
    
    .testo-autopilot{
        margin: 0px;
        width: 100%;
        padding-right:0px;
    }
    
    .div-video-autopilot{
        border-radius: 30px;
        width: 100%;
        height: auto;
    }


    .esterno-configurazione{
        display: flex;
        flex-direction: column;
        margin-top:0;
    }
    
    .img-configurazione{
        width: 100%;
        padding:100px 30px 30px 30px;
    }
    .img-configurazione img{
       width: 100%;
       height: auto;
       padding: 10px;
    }
    .img-configurazione #img2 {
        width: 100%;
        height: auto;
        margin:0px;
        padding: 0px;
        position: relative;
        top: 0px;
        border-radius: 20px;
    }    
    

    .configurazione{
        width: 100%;
        padding: 30px;
    }

    .form-casla{
        display:block!important;
        padding: 0 !important;
        margin: 30px!important;
    }
    .form-casla iframe{
        width: 100%;
    }
    
.footer{
    justify-content: center!important;
    width: 100%;
}
    
    .nav-footer{
        font-size: 14px;
        justify-content: center!important;
    }

}