/* ======================================================
   CSS OTTIMIZZATO PER LANDING PAGE PASS/LAS
   ====================================================== */

/* --- STILI DI BASE E FONT --- */
body, html {
    font-family: sans-serif;
    font-size: 17px;
    color: #363636;
    background-color:#ffffff;
}

@media (min-width:768px){
    body,html{
        font-size:16px;
    }
}

@media (max-width:767px){
    body,html{
        font-size:14px;
    }
}

.logoContainer{
    margin-top:40px;
    display:flex;
    align-items: center;
    justify-content: flex-start;
}

.vr{
    border-radius:50%;
    margin-left: 3px;
    width: 1px;
    background-color: white;
    opacity: 1;
}

.schoolName{
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    line-height: 13px;

    font-size:13px;
    margin:0;
    margin-left:5px;
    color:white; 
    text-align: left;
}

.navigation, .ctaButton{
    height:57px;
    background-color:#EEEEEE;
    width:300px;
    border-radius:40px;
    display:flex;
    align-items: center;
    justify-content: flex-start;
}

.ctaButton{
    width:199px;
    background-color: white;
    border:1px solid #E30614;
}

.circle, .circleRed{
    width:40px;
    background-color:white;
    aspect-ratio: 1/1;
    border-radius:50%;
    margin-left:10px;
    display:flex;
    align-items: center;
    justify-content: center;
}

.circleRed{
    background-color:#E30614;
}

.circle:hover{
    cursor:pointer;
}

.fas{color:White;}

/* Quando passo sopra a ctaButton... */
.ctaButton:hover {
    background-color: #E30614;
    cursor:pointer;
}

.ctaButton:hover p {
    color: #ffffff; /* Testo diventa bianco */
}

.ctaButton:hover .circle {
    background-color: #ffffff; /* Cerchio diventa bianco */
}

.ctaButton:hover .circle i {
    color: #E30614; /* Freccia diventa rossa */
}

.ctaButton:hover .circleRed{
    background-color: #ffffff;
}

.ctaButton:hover .circleRed .fas{
    color: #E30614;
}

.flex{
    display:flex;
    align-items: flex-start;
    justify-content: space-between;
    padding:16px;
    flex-wrap: wrap;
}

.container {
    max-width:1440px;
}

.intro-text-content{
    background-color: #EEEEEE;
    border-radius:40px;
    display:inline-block;
    padding:6px 20px 6px 20px;
    margin:0;
    margin-bottom:35px;
}

.intro-text-content h2{
    margin:0;
}

/* --- SEZIONE SUPERIORE (HEADER & FORM) --- */
.bg-rep{
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../info_openday_professional/sfondo.webp");
    background-repeat: no-repeat;
    background-size: cover;
    border-radius:30px;
    width:96%;
    margin-left:2%;
    margin-right:2%;
    margin-top:35px;
}

.bg-rep2{
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../info_openday_professional/sfondo2.webp");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 0% 60%;
    border-radius:30px;
    width:96%;
    margin-left:2%;
    margin-right:2%;
    margin-top:35px;
}

.text-white {
    color: #FFFFFF !important; /* Corretto per rendere il testo bianco */
}

.text-grey {
    color: #363636 !important; /* Corretto per rendere il testo bianco */
}

.text-cream{
    color: #ffffff;
    font-family: "Montserrat", sans-serif;
    font-weight:600;
}

.titleSize{
    font-size:5.5rem;
}

.subtitleSize{
    font-size:3.7rem;
    text-align: left;
    font-family: 'playfair-display', serif;
    font-style: italic;
    font-weight:400;
    color:#fff;
}

.headlineSize{
    font-size:3rem;
}

.bg-cream{
    background-color:#ffffff;
}

/* Stili per il form - Versione Ottimizzata */
.form-fildset input,
.form-fildset .custom-select {
    background-color: transparent;
    border: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    color: #363636;
    padding: 25px 12px 0px 0 !important;
    width: 100%;
    margin-bottom: 10px;
    border-radius: 0;
}

.form-fildset .custom-select {
background-position: calc(100% - .79rem) calc(50% + 12px)!important;
}




.form-floating > .form-select {
    background-color: #ffffff;
}

.form-fildset input::placeholder{
    color: #B4B4B4 !important; /* Aggiunto !important per forzare l'override */

   
}
/* 1. Colore di default (non a fuoco) */
.form-floating > label {
    color: transparent;
    opacity: 0.9;
    padding:0.8rem .75rem;
    padding-left:0;
}

.form-floating>.form-control{
    height: calc(3.5rem + calc(var(--bs-border-width) * 1));
    min-height: 0;
    padding: 1rem .75rem;
    padding-bottom: 0;
    line-height: 1;
}

/* 2. Colore quando l'input è a fuoco */
.form-floating > .form-control:focus ~ label {
    color: #363636; /* Arancione Vivace */
}


/* Effetto quando l'utente clicca sul campo */
.form-fildset input:focus,
.form-fildset .custom-select:focus {
    border-radius: 0;
    border-bottom-color: #B5B5B5; 
    outline: none; 
   	box-shadow: none;
    background-color: transparent;
}

form a {
    color: #363636;
    text-decoration: underline;
}

form a:hover {
    color: #F03E36  ;
}

.form-floating > .form-select ~ label, .form-floating > .form-control:not(:placeholder-shown) ~ label {
    opacity: 0.6;
    transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
    color:#363636;
}



input:not(:focus):not(:placeholder-shown):invalid, .form-error{
	border-color: #FD0004!important;
    background-image: url("data:image/svg+xml,%3Csvg class='w-6 h-6' fill='red' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' d='M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z' clip-rule='evenodd'%3E%3C/path%3E%3C/svg%3E")!important;
	
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}


input:required:valid, select:required:valid, #input-box:required:valid, .form-ok{
	border-color: #07c247!important;
    background-image: url("data:image/svg+xml,%3Csvg class='w-6 h-6' fill='green' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z' clip-rule='evenodd'%3E%3C/path%3E%3C/svg%3E")!important;
	
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}




.informati-ora-btn {
    background: #E30614;
    color: #ffffff;
    border: none;
    cursor: pointer;
    
  
    display: flex;
    align-items: center;
    justify-content: space-between; 
     width: 210px;
    height:49.42px;
    padding: 0 5px 0 25px;
    border-radius:40px;
    
    position: relative;
    overflow: hidden; 
    z-index: 1;

   
    box-sizing: border-box; 
}


.informati-ora-btn:hover {
    background-color: #E30614;
    color: #ffffff; 
}


.informati-ora-btn .btn-icon-circle {
    background-color: #F03E36;
    color: white; 
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 10px;
    flex-shrink: 0; 
    z-index: 2; 
}


/* Sostituisci questo blocco nel tuo CSS */
.informati-ora-btn input[type="submit"].jqconferma {
    /* Nascondi l'aspetto del bottone */
    background: none;
    border: none;
    outline: none;
    padding: 0;
    margin: 0;
    
    /* Nascondi il testo interno dell'input per non farlo sovrapporre */
    font-size: 0; 
    color: transparent; 
    text-indent: -9999px;

    /* Rendi l'input un overlay a copertura totale */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10; /* Deve essere più alto degli altri elementi come l'icona */
    cursor: pointer;
}

/* Modifica il testo visibile al suo interno per essere quello che si vedeva prima */
.informati-ora-btn .input-visual-text { 
    /* Questa classe è un nuovo span che dovrai aggiungere manualmente in HTML */
    font-size:0.88235rem;
    font-weight: bold;
    font-family: "Montserrat", sans-serif;
    text-transform: uppercase;
    color: inherit;
    text-align: left;
	padding:15px 0 0 0;
    flex-grow: 1;
    z-index: 2; /* Sotto l'input, ma sopra lo sfondo */
}

/* --- SEZIONE INTRODUTTIVA (Problema/Soluzione) --- */
.intro-solution-section {
    padding: 40px 15px !important;
    font-family: "Montserrat", sans-serif;
    text-align:center;
}

.intro-solution-section .section-title.text-left {
    text-align: center;
}

.section-title {
    font-family: "Montserrat", sans-serif;
    font-size: 14px;
    color: #363636;
    margin-bottom: 90px;
    font-weight: 400;
    text-align: left;
    text-transform: uppercase;
}

.bg-footer {
    background-color:#E30614;
    border-radius:20px;
    width:96%;
    margin-left:2%;
    margin-right:2%;
}

.border-top-dashed{
    background-size: 15px 1px;
    background-image: linear-gradient(to right, #D2D2D2 70%, rgba(54, 54, 54, 0) 0%); 
    background-repeat: repeat-x;
    background-position: 0 100%;
    padding-bottom: 5px;
    height: 50px;
}

.discover-button {
    /* Stile del cerchio esterno */
    display: inline-flex; /* Per centrare l'icona facilmente con flexbox */
    align-items: center; /* Centra verticalmente */
    justify-content: center;
    width: 53px;
    height: 53px;
    border: 2px solid #F03E36;
    border-radius: 50%;
    background-color: transparent;
    cursor: pointer;
    text-decoration: none;
    color: #F03E36;
    font-size: 24px;
}

.discover-button:hover {
    background-color: #F03E36;
    color: #ffffff;
    text-decoration: none;
}

.box-dashed {
    border-radius: 20px;
    padding: 30px;
    height: 100%;
    overflow: hidden;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
}

.box-title {
    font-size: 1.4rem;
    font-weight: bold;
    margin-bottom: 10px;
    padding-bottom: 5px;
}

button{
    border:0;
}

button:focus{
    outline: 0;
}

.accordion-item {
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 1px solid #e0e0e0;
    background-color: transparent;
}

.accordion-button {
  background-color: #ffffff;
  color: #363636;
  padding: 40px 0 10px 0;
  font-size: 1.5625rem;
  display: flex;
  justify-content: space-between; /* spinge titolo e icona ai lati opposti */
  align-items: center;            /* li allinea verticalmente */
  text-align: left;
  width: 100%;
}

.accordion-title {
  flex: 1; /* fa sì che il testo occupi tutto lo spazio disponibile */
  padding-right: 10px;
}

.accordion-button:focus {
    box-shadow: none;
    border-color: transparent;
}

.accordion-body {
    padding: 0 0 20px 0;
    color: #363636;
}

.accordion-button::after{
    width:0;
}

.faq-toggle-btn {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background-color: #D2D2D2;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease, background-color 0.3s ease;
  flex-shrink: 0; /* evita che si riduca */
}

.faq-toggle-btn .plus-icon {
  color: #363636;
  font-size: 1.5rem;
  line-height: 1;
  font-weight: 300;
}

.accordion-button:not(.collapsed){
    background-color:#ffffff;
    color:#363636;
}

.accordion-button:not(.collapsed) .faq-toggle-btn {
  transform: rotate(45deg);
  background-color: #F03E36;
}

.accordion-button:not(.collapsed) .faq-toggle-btn .plus-icon {
  color: white;
}

.bebasNeue{
    /*font-family: 'bebas-neue', Arial, sans-serif;
    line-height: normal;*/
font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.bebasNeuePro{
    font-family: sans-serif;
    font-size: 1.68rem;
    font-weight: lighter;
}

.playfairDisplay{
    font-family: 'playfair-display', serif;
    font-size:1.125rem;
    text-align: left;
}

.ctaFontSize{
    font-size:3.5rem;
	line-height: normal;
}

.card-image-bg {
    width: 100%;
    height: 250px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 10px;
}

.card-item {
    overflow: hidden; 
}

.card-title{
    font-size:1.375rem
}

.mt-7{
    margin-top: 12rem;
}

.mt-8{
    margin-top: 17rem;
}

.swiper{
    font-family: "Montserrat", sans-serif;
}

.swiper-wrapper{
    padding: 5px;
}

.swiper-indicator {
  display: flex;
  align-items: center;
  justify-content:center;
  margin-top: 20px; 
  padding:4px;
}

.swiper-pagination.ml-3.swiper-pagination-progressbar {
  position: relative !important; 
  background: #EEEEEE !important;
  height: 2px;
}

.swiper-indicator p {
  margin: 0 0 0 12px;
  flex-shrink: 0;
  font-size: 0.9em;
}

.swiper-pagination.ml-3 .swiper-pagination-progressbar-fill {
  background: red !important;
  height: 2px !important; 
}

.timeline {
    position: relative;
    list-style: none;
    padding: 0;
    margin: 0;
}

/* LINEA CON SFUMATURA */
.timeline::before {
    content: '';
    position: absolute;
    left: 7px; /* centra la linea rispetto ai pallini */
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(
        to bottom,
        rgba(240, 62, 54, 0) 0%,      /* completamente trasparente in alto */
        rgba(240, 62, 54, 1) 15%,     /* colore pieno da circa il 15% */
        rgba(240, 62, 54, 1) 85%,     /* resta pieno fino quasi in fondo */
        rgba(240, 62, 54, 0) 100%     /* sfuma di nuovo in trasparenza */
    );
    z-index: 0;
}

/* ELEMENTI DELLA TIMELINE */
.timeline-item {
    position: relative;
    padding: 20px 0 20px 30px; 
    display: flex;
    align-items: center;
}

/* PALLINI */
.timeline-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    background-color: #F03E36;
    border-radius: 50%;
    z-index: 1;
}

.no-pb{
    padding-bottom: 0 !important;
}

#cosa-aspetti{
    font-family: "Montserrat", sans-serif;
}

.ctaWidth{
    width:217px;
}

.ctaWidth2{
    width:243px;
}

.ctaWidth3{
    width:272px;
}

.info{
    display:flex;
    align-items:flex-start;
    justify-content:flex-start;
    font-weight:bold;
    flex-wrap:wrap;
}


.info .infoTitle {
    /* Forma */
    width: 180px;
    height: 180px;
    border-radius: 50%;
    
    /* Colore e stile */
    border: 1px solid #E30614;
    color: #E30614;
    font-weight: 500;
    font-size: 16px;
    
    /* Centratura del testo interna al cerchio */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    
    /* Reset */
    padding: 10px;
    margin: 0;
}

/* --- DESCRIZIONE SOTTO --- */
.description {
    width: 100%; /* Si adatta alla larghezza del genitore (180px) */
    font-weight: 500;
    margin-top: 20px;
    font-size: 14px; /* Opzionale: dimensione font descrizione */
    text-align: center; /* Fondamentale: centra il testo della descrizione */
    line-height: 1.4;
    color: #333; /* Colore testo descrizione */
    margin-bottom: 0;
}

.centerButton{
    display:flex;
    align-items: center;
    justify-content: center;
}

.info {
    display: flex;
    justify-content: center; /* Centra i blocchi nella pagina */
    align-items: flex-start; /* Allinea i blocchi in alto */
    gap: 40px; /* Spazio tra i tre blocchi (sostituisce il margin-right) */
    padding: 20px 0;
}

.info > div {
    display: flex;
    flex-direction: column; /* Mette cerchio sopra e testo sotto */
    align-items: center;    /* Centra orizzontalmente cerchio e testo */
    width: 180px;           /* Definisce la larghezza della colonna */
}

/*.sticky-container {
  position: relative;
  display: flex;
  flex-direction: column;
  max-width: 480px;
  gap: 24px;
  margin: 50px auto;
  height: 2040px;
  align-items: center;
}

.card {
  width: 80%;
  margin: 0 20px;
  box-sizing: border-box;
  background: #dedede;
  min-height: 400px;
  border-radius: 32px;
  position: sticky;
  top:100px;
  display:flex;
  align-items: center;
  justify-content: center;
  font-family : 'system-ui', sans-serif;
  font-size: 90px;
  font-weight: medium;
  color: #FFF;
}

.one {
  background: #6b04fd;
}
.two {
  background: #5a03d5;
}
.three {
  background: #4b05ad;
}

.four {
  background: #2c0076;
}

.sticky-title {
  position: sticky;
  top: 0;
  z-index: 10;

  background: white;
  width: 100%;
  text-align: center;

  font-family: system-ui, sans-serif;
  font-size: 32px;
  font-weight: 600;
    background-color:transparent;
}*/

.description{
    border:none;
    color:black;
}

.red{
    color:#E30614;
}
.swiper-button-next, 
.swiper-button-prev {
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    min-height: 50px !important;
    position: relative !important;
    margin-top: 0 !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    border-radius: 50%;
    border: 1px solid #E30614;
    background-color: transparent;
    background-image: none;
    z-index: 50;
    display: flex !important;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.swiper-button-next{
    margin-left:5px;
}

.swiper-button-next:after, 
.swiper-button-prev:after {
    color: #E30614 !important;
    font-size: 16px !important;
    font-weight: bold;
}

.swiper-button-next:after{
    margin-left:2px;
}

.swiper-button-prev:after{
    margin-right:2px;
}

.swiper-button-next:hover, 
.swiper-button-prev:hover {
    background-color: #E30614;
    border-color: #E30614;
}

.swiper-button-next:hover:after, 
.swiper-button-prev:hover:after {
    color: #ffffff !important;
}

/* --- MEDIA QUERIES RESPONSIVE --- */
@media (max-width: 991px) {
    .intro-solution-section .img-fluid {
        margin-bottom: 40px;
    }
    .intro-solution-section .section-title.text-left {
        text-align: center;
    }

    .mt-7{
        margin-top:2.5rem;
    }

    .mt-8{
        margin-top:4rem;
    }

    .ctaButton{
        height:54px;
        width:181px;
    }

    p{
        text-align:center;
        margin-left:0;
    }

    .centerButton{
        display:flex;
        align-items: center;
        justify-content: center;
    }

    .ctaWidth{
        width:197px;
    }

    .ctaWidth2{
        width:222px;
    }

    .ctaWidth3{
        width:245px;
    }

    .ctaButton{
        background-color: #E30614;
    }

    .ctaButton p{
        color:#ffffff;
        font-size:14px;
    }

    .ctaButton .circle{
        background-color: #ffffff;
    }

    .ctaButton .circle i{
        color: #E30614;
    }
    .fa-arrow-right:before{
        color:#E30614;
    }

    .circleRed{
        background-color:#ffffff;
    }

    .container div h3{
        text-align:center;
    }

    .info {
        flex-wrap: wrap;
        gap: 30px;
    }

    .info > div {
        width: calc(50% - 15px); 
    }

    .info .infoTitle {
        width: calc(50% - 8px); 
        height: auto; 
        aspect-ratio: 1 / 1;
        font-size: 17px; 
        padding: 5px;
    }

    .titleSize{
        font-size:5.5rem;
    }

    .subtitleSize{
        font-size:3.4rem;
    }

    .headlineSize{
        font-size:2.4rem;
    }

    .swiper-indicator {
        margin-top: 10px; 
    }

    .swiper-button-next:after, 
    .swiper-button-prev:after {
        color: #ffffff !important;
    }

    .swiper-button-next, 
    .swiper-button-prev {
        background-color: #E30614;
        border-color: #E30614;
    }
}

@media (max-width: 767px) {
    .col-11{
        flex: 0 0 96%;
        max-width: 96%;
    }
    
    .discover-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 53px;
        height: 53px;
        border: 2px solid #F03E36;
        border-radius: 50%;
        background-color: #F03E36;
        cursor: pointer;
        text-decoration: none;
        color: #ffffff;
        font-size: 24px;
    }
    .informati-ora-btn{
        background-color: #E30614;
        color:#ffffff;
    }
    .info > div {
        width: 100%;
    }

    .titleSize{
        font-size:4rem;
    }

    .subtitleSize{
        font-size:3rem;
        margin-bottom:20px;
    }

    .headlineSize{
        font-size:2rem;
    }
}