.menu-icon {

    display: none;

    color: #10243e;

}



.containerContact {

    display: flex;

    flex-direction: column;

    width: 80%;

    margin: 0 auto;

    padding: 2rem;

}



.pages {

    display: flex;

    flex-direction: row;

    margin-bottom: 2rem;

    gap: 0.3rem;

    align-items: center;

}



p.namecontact, p.pagecontact {

    font-size: 0.9rem;

    color: #7b8794;

}



i.fa-solid.fa-angle-right {

    color: #7b8794;

    font-size: 0.7rem;

}



.imgpage {

    background: linear-gradient(rgba(16, 36, 62, 0.68), rgba(16, 36, 62, 0.68)), url(/img//contact.jpg);

    background-position: center;

    min-height: 480px;

    background-repeat: no-repeat;

    background-size: cover;

}



.texts {

    width: 50%;

    position: relative;

    top: 23rem;

    left: 5rem;

}



h3.textpage {

    color: white;

    position: relative;

    font-size: 2.5rem;

    letter-spacing: 2px;

    font-family: "DM Serif Display", serif;

    font-style: italic;

}



.contact-info {

    display: flex;

    padding: 3rem 0;

    flex-direction: row;

    gap: 3rem;

}



.contact-des {

    width: 75%;

}



.subtitle-contact {

    display: block;

    margin: 2rem 0;

    position: relative;

}



h3.name {

    color: #10243e;

    font-family: "DM Serif Display", Georgia, serif;

    font-weight: 400;

    font-size: 2rem;

    letter-spacing: 1px;

}



.address-contact,

.phone-contact,

.email-contact {

    display: flex;

    gap: 1.5rem;

    position: relative;

    align-items: center;

    padding-bottom: 1rem;

}



i.fa-solid.fa-location-dot,

i.fa-solid.fa-phone,

i.fa-solid.fa-mobile,

i.fa-solid.fa-envelope {

    font-size: 1.5rem;

    background-color: #10243e;

    color: white;

    padding: 0.9rem;

    border-radius: 0.5rem;

    cursor: pointer;

    transition: transform 0.3s ease;

    width: 12%;

    text-align: center;

}



i.fa-solid.fa-location-dot:hover,

i.fa-solid.fa-phone:hover,

i.fa-solid.fa-mobile:hover,

i.fa-solid.fa-envelope:hover {

    transform: scale(1.2);

}



p.description {

    color: #1557d6;

    font-size: 1.1rem;

    cursor: pointer;

}



.container-map {

    width: 100%;

    height: 450px;

    margin-top: 2rem;

}



.container-map iframe {

    width: 100%;

    height: 100%;

    border: 0;

}



.form-contact {

    display: flex;

    flex-direction: column;

    align-items: center;

    background: #f6f8fa;

    border: 1px solid #dce3ea;

    border-radius: 14px;

}



.name-form {

    position: relative;

    margin: 2rem;

}



h3.text-form {

    color: #10243e;

    font-family: "DM Serif Display", Georgia, serif;

    font-weight: 400;

    font-size: 2rem;

    margin-bottom: 1rem;

    letter-spacing: 1px;

}



form.contact {

    width: 100%;

    height: auto;

}



.container-form {

    width: 80%;

    margin: 1rem auto 0;

    display: flex;

    flex-wrap: wrap;

    gap: 2rem;

    justify-content: center;

}



.oggetto,

.nome,

.cognome,

.email,

.indirizzo,

.citta,

.stato,

.cap,

.message {

    display: flex;

    flex-direction: column;

    flex: 0 1 calc(50% - 1rem);

    min-width: 0;

    align-items: flex-start;

}





.terms,

.btn {

    width: 100%;

}





label {

    font-size: 1.1rem;

    letter-spacing: 1px;

    font-family: 'Raleway';

    font-weight: bold;

}



.oggetto-select,

.name-input,

.surname-input,

.email-input,

.address-input,

.city-input,

.state-input,

.cap-input,

.message-input {

    display: flex;

    flex-direction: column;

    align-items: center;

    padding: 0.5rem;

    border-radius: 1rem;

    width: 100%;

    font-size: 1.1rem;

    color: #526273;

    border: 1px solid #cbd5df;

}



textarea {

    min-height: 6em;

    resize: vertical;

}



a.acontact {

    text-decoration: underline;

}



input.check {

    font-family: 'Raleway', sans-serif;

}



/* Messaggi di errore / validità */

.error-message {

    display: block;

    color: #b42318;      /* forza il colore */

    font-weight: 500;

    font-family: 'Afacad Flux', sans-serif;

    overflow: visible;

}



.valid-message {

    display: block;

    color: #198754;    /* forza il colore */

    font-weight: 500;

    font-family: 'Afacad Flux', sans-serif;

    overflow: visible;

}



/* Input */

.input-valid {

    border: 2px solid #198754;

    background-color: #ecfdf3;

}



.input-error {

    border: 2px solid #b42318;

    background-color: #fef2f2;

}



button.btn-submit {

    cursor: pointer;

    width: 25%;

    padding: 1rem;

    background: rgb(11, 60, 93);

    border-width: 1px;

    border-style: solid;

    border-color: rgb(11, 60, 93);

    border-image: initial;

    border-radius: 1rem;

}



#btnText {

    font-size: 1.2rem;

    color: white;

    text-transform: uppercase;

    letter-spacing: 1.5px;

}



.loading {

    opacity: 0.6;

    pointer-events: none;

}



#loader{

    position: fixed;

    top:0;

    left:0;

    width:100%;

    height:100%;

    backdrop-filter: blur(4px);

    display:flex !important;

    align-items:center;

    justify-content:center;

    z-index:9999;

    visibility:hidden;

    opacity:0;

    transition: opacity 0.3s ease;

}



#loader.active{

    visibility:visible;

    opacity:1;

}



.spinner{

    width:50px;

    height:50px;

    border:5px solid rgba(0,0,0,0.2);

    border-top:5px solid #1557d6;

    border-radius:50%;

    animation: spin 1s linear infinite;

    color: #1557d6;

}



@keyframes spin{

    from{ transform:rotate(0deg); }

    to{ transform:rotate(360deg); }

}



@media (max-width: 767px) {

    .containerContact {

        width: 100%;

    }

    .imgpage {

        min-height: 300px;

        background-size: contain;

        background-color: #e4e9ee;

    }

    .texts {

        top: 15rem;

    }

    h3.textpage {

        font-size: 1.8rem;

    }

    .container-map {

        height: 300px;

    }

    .contact-info {

        flex-direction: column;

    }

    .contact-des {

        width: 100%;

    }

    i.fa-solid.fa-location-dot, i.fa-solid.fa-phone, i.fa-solid.fa-envelope{

        width: 18%;

    }

    .oggetto, .nome, .cognome, .email, .indirizzo, .citta, .stato, .cap, .message {

        width: 100%;

    }

    button.btn-submit {

        width: 50%;

    }

}



@media (min-width: 768px) and (max-width: 1024px) {

    .contact-info {

        flex-direction: column;

    }

}