body, html {
    font-family: sans-serif;
    font-size: 17px;
    color: #000000;
    background-color:#ffffff;
}

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

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

a{
    text-decoration: none;
}

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

.circle:hover{
    cursor:pointer;
}

.flex{
    display:flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
}

.subtitleSize, .subtitleSize2{
    font-size:5.4rem;
    text-align: left;
    font-weight:300;
    color:#fff;
}

.subtitleSize2{
    font-size:1rem;
}

.form-floating {
    position: relative;
    margin-bottom: 20px;
}

/* Stile Base Input e Select */
.form-control,
.form-select {
    display: block;
    width: 100%;
    height: calc(3.5rem + 2px);
    padding: 1rem 0.75rem;
    font-size: 1rem;
    font-weight: 700 !important;
    line-height: 1.25;
    background-color: #F2F0EB !important;
    color: #1c1c1c !important;
    border: 1px solid transparent; /* Importante per vedere i bordi rosso/verde dopo */
    border-radius: 6px !important;
    box-shadow: none !important;
    outline: none !important;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    appearance: none; /* Rimuove stile nativo browser */
}

/* Gestione Focus */
.form-control:focus,
.form-select:focus {
    background-color: #F2F0EB !important;
    color: #1c1c1c !important;
    border-color: #86b7fe;
    outline: 0;
}

/* --- LOGICA FLOATING LABEL --- */
.form-floating > label {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    padding: 1rem 0.75rem;
    pointer-events: none;
    border: 1px solid transparent;
    transform-origin: 0 0;
    transition: opacity .1s ease-in-out,transform .1s ease-in-out;
    color: #1c1c1c !important;
    font-weight: 700 !important;
}

.form-control::placeholder {
    color: transparent !important;
}

.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-select ~ label {
    opacity: 1 !important;
    transform: scale(0.85) translateY(-0.7rem) translateX(0.15rem) !important;
    padding-left: 12px; 
    background-color: transparent; 
}

.form-floating > .form-control.errore-visibile ~ label,
.form-floating > .form-select.errore-visibile ~ label {
    color: #FD0004 !important;
    font-weight: bold;
}

/* Successo (Bordo Verde + Spunta) */
.form-control:required:valid, 
.form-select:required:valid {
    border: 1px solid #07c247 !important;
    padding-right: 40px;
    background-image: url("data:image/svg+xml,%3Csvg 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);
}

/* --- STILE BOTTONE SUBMIT --- */
.informati-ora-btn {
    background: #1B5FF9;
    color: #ffffff;
    border: none;
    cursor: pointer;
    width: 100%; /* Adattato per occupare spazio nel div */
    max-width: 200px; /* O la larghezza che preferisci */
    height: 50px;
    border-radius: 7px;
    position: relative;
    overflow: hidden; 
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.informati-ora-btn input[type="submit"] {
    background: none;
    border: none;
    outline: none;
    width: 100%;
    height: 100%;
    color: white;
    font-weight: bold;
    text-transform: uppercase;
    font-family: "Inter", sans-serif; /* O il font del sito */
    cursor: pointer;
}

.form-control.errore-visibile, 
.form-select.errore-visibile {
    border: 1px solid #FD0004 !important;
    padding-right: 40px;
    background-image: url("data:image/svg+xml,%3Csvg 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);
}

.error {
    display: none !important;
}

.courses200{
    width:98%;
    display:flex;
    align-items: flex-end;
    justify-content: space-between;
    padding-left:5%;
    padding-right:5%;
}

.courses200 p{
    font-size:1.3rem;
}


@media (max-width: 767px) {
    .informati-ora-btn{
        background-color: #1B5FF9;
        color:#F2F0EB;
    }

    .informati-ora-btn input[type="submit"] {
        font-weight: bold;
    }
    

    .subtitleSize{
        font-size:3rem;
    }
}

@media (max-width: 600px){
    .subtitleSize2{
        font-size:1.5rem;
    }
}