.menu-icon {

    display: none;

    color: #10243e;

}



.container-gasdryer{

    max-width: 1100px;

    margin: 0 auto;

    padding: 3rem 1.5rem;

}





.pages {

    display: flex;

    flex-direction: row;

    margin-bottom: 2rem;

    gap: 0.3rem;

    align-items: center;

}



p.namepages, p.pagemanotcoinfree {

    font-size: 0.9rem;

    color: #9ca3af;

}



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

    color: #9ca3af;

    font-size: 0.7rem;

}



.container-text {

    margin: 1rem 0;

}



h3.texts {

    font-size: clamp(2rem, 3.5vw, 2.8rem);

    line-height: 1.15;

    letter-spacing: -0.02em;

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

    color: #18324d;

    font-weight: 400;

    margin: 0;

}



.container-dryer {

    display: flex;

    gap: 2rem;

    padding: 1.5rem 0;

    align-items: flex-start;

    border-top: 1px solid #e3e8ed;

    border-bottom: 1px solid #e3e8ed;

}



.img {

    width: 50%;

    height: 400px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 0.5rem;

    box-sizing: border-box;

}



.img-dryer {

    max-width: 100%;

    height: 400px;

    object-fit: contain;

}



.description {

    margin: 1rem 0;

}



h3.des-text {

    font-size: 1.5rem;

    line-height: 1.4;

    letter-spacing: 0;

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

    color: #245f9f;

    font-weight: 400;

    font-style: normal;

    margin-top: 0;

}



p.description-subtext {

    line-height: 1.75;

    letter-spacing: 0;

    font-family: "Raleway", Arial, sans-serif;

    color: #6d7885;

    font-size: 0.94rem;

}



h3.des-subtext {

    color: #1557d6;

    font-size: 1.15rem;

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

    font-weight: 700;

    letter-spacing: .02em;

}



li.des-li {

    font-size: 0.9rem;

    font-family: "Raleway", Arial, sans-serif;

    color: #6d7885;

    line-height: 1.6;

    letter-spacing: 0;

    font-weight: 500;

}



.link-brochuer {

    margin: 1.5rem 0;

    padding: 0.5rem 0;

}



a.file {

    color: #1557d6;

    text-decoration: none;

    letter-spacing: 0;

    font-family: "Raleway", Arial, sans-serif;

    font-size: 0.9rem;

    font-weight: 700;

    border-bottom: 1px solid rgba(21, 87, 214, 0.35);

    padding-bottom: 2px;

    transition: color 0.2s ease, border-color 0.2s ease;

}



a.file:hover {

    color: #10243e;

    border-color: #10243e;

}



.contact-info{

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

    gap: 0.8rem;

}



h3.contact-text {

    font-size: 1.5rem;

    color: #10243e;

    line-height: 1.4;

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

    font-weight: 400;

}





p.contact-subtext {

    width: 70%;

    color: #6d7885;

    font-family: "Raleway", Arial, sans-serif;

    line-height: 1.7;

    font-size: 0.95rem;

    letter-spacing: 0;

}



.contact-buttons {

    display: flex;

    flex-direction: row;

    gap: 2rem;

    align-items: center;

    margin-top: 1.5rem;

}



a.contact-link {

    position: static;

    padding: 0.9rem 2rem;

    background: #10243e;

    color: white;

    border-radius: 40px;

    border: 1px solid #10243e;

    text-decoration: none;

    font-family: "Raleway", Arial, sans-serif;

    font-weight: 700;

    transition: all 0.3s ease;

    font-size: 0.85rem;

    letter-spacing: 0.04em;

}



.modal {

    position: fixed;

    inset: 0;

    width: 100vw;

    height: 100vh;



    background: rgba(7, 21, 34, 0.55);

    backdrop-filter: blur(4px);

    -webkit-backdrop-filter: blur(4px);



    display: flex;

    justify-content: center;

    align-items: center;



    z-index: 99999;



    overflow-y: auto;

    padding: 40px 20px;

}



.modal-content {

    background: #fff;

    width: min(700px,100%);

    max-height: 90vh;



    overflow-y: auto;



    border-radius: 14px;



    padding: 30px;



    position: relative;

}



.hidden {

    display: none;

}



.checkout-steps {

    display: flex;

    flex-direction: row;

    gap: 1rem;

    margin: 1rem 0;

}



.step {

    color: #999;

    font-weight: 500;

    position: relative;

    transition: all 0.3s ease;

}



/* step attivo */

.step.active {

    color: #1557d6;

    text-decoration-color: #1557d6;

}



/* linea sotto animata */

.step::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: -5px;

    width: 0%;

    height: 2px;

    transition: width 0.3s ease;

}



.step.active::after {

    width: 100%;

}



.button-container {

    display: flex;

    flex-direction: row;

    gap: 2rem;

    justify-content: center;

    margin: 2rem;

}



button#nextStep1,

button#backStep2,

button#nextStep2,

button#backStep3,

button#nextStep3 {

    font-size: 0.8rem;

    padding: 0.8rem 1.2rem;

    border: 1px solid #10243e;

    background: #10243e;

    color: white;

    border-radius: 2rem;

    text-transform: uppercase;

    cursor: pointer;

    font-family: "Raleway", Arial, sans-serif;

    font-weight: 700;

    letter-spacing: 0.04em;

    transition: all 0.3s ease;

}



button#nextStep1:hover,

button#backStep2:hover, button#nextStep2:hover,

button#backStep3:hover, button#nextStep3:hover {

    transform: translateY(-3px);

    box-shadow: 0 10px 25px rgba(31, 79, 216, 0.3);

}



.close {

    position: absolute;

    top: 0.6rem;

    right: 1rem;

    cursor: pointer;

    font-size: 2.4rem;

    color: #7b8794;

}



h3.modal-title {

    position: relative;

    margin-top: 1.5rem;

    color: #1f4fd8;

    font-size: 1.5rem;

    font-family: 'Dm Serif Display';

    font-weight: normal;

}



.form-modal {

    display: flex;

    flex-direction: row;

    justify-content: center;

    width: 80%;

    margin: 0.5rem auto;

    gap: 1rem;

    flex-wrap: wrap;

}



.nome, .email, .phone, .notes {

    display: flex;

    flex-direction: column;

    width: 48%;

    align-items: flex-start;

}



label {

    font-size: 1.1rem;

    letter-spacing: 1px;

    font-family: 'Raleway';

    font-weight: bold;

}



.form-control {

    display: flex;

    flex-direction: column;

    align-items: center;

    padding: 0.5rem;

    border-radius: 1rem;

    width: 100%;

    font-size: 1.1rem;

    color: grey;

}



textarea {

    min-height: 6em;

    resize: vertical;

}



.preventivo {

    padding: 0.9rem 1.5rem;

    border-radius: 40px;

    border: 1px solid #10243e;

    background: white;

    font-family: "Raleway", Arial, sans-serif;

    font-size: 0.85rem;

    font-weight: 700;

    color: #10243e;

    cursor: pointer;

    transition: all 0.25s ease;

}



a.contact-link:hover,

.preventivo:hover {

    background: #1557d6;

    border-color: #1557d6;

    color: #ffffff;

    transform: translateY(-2px);

}



.summary {

    display: flex;

    flex-direction: column;

    gap: 1rem;

}



.summary-content {

    display: flex;

    flex-direction: column;

    gap: 0.5rem;

}



.summary-content p {

    font-size: 1.1rem;

    letter-spacing: 1px;

    font-family: 'raleway';

}



.confirm p {

    font-size: 1.2rem;

    letter-spacing: 1px;

    font-family: 'raleway';

    margin: 1.5rem 0;

}



.confirm-btn{

    margin-top:30px;

    display:flex;

    justify-content:center;

}



h3.modal-confirm {

    color: green;

    letter-spacing: 1px;

    margin: 2rem 0;

    font-size: 1.4rem;

    font-family: 'raleway';

}



p.modal-message {

    font-size: 1.2rem;

    letter-spacing: 1px;

    font-family: 'raleway';

}



/* Messaggi di errore / validità */

.error-message {

    display: block;

    color: red;      /* forza il colore */

    font-weight: 500;

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

    overflow: visible;

}



.valid-message {

    display: block;

    color: green;    /* forza il colore */

    font-weight: 500;

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

    overflow: visible;

}



/* Input */

.input-valid {

    border: 2px solid #28a745;

    background-color: #f0fff4;

}



.input-error {

    border: 2px solid #dc3545;

    background-color: #fff5f5;

}



#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 #000;

    border-radius:50%;

    animation: spin 1s linear infinite;

    color: blue;

}



@keyframes spin{

    from{ transform:rotate(0deg); }

    to{ transform:rotate(360deg); }

}



@media (max-width: 768px) {

    .container-dryer {

        flex-direction: column;

    }



    .img,

    .img-dryer {

        height: auto;

        text-align: center;

    }



    p.contact-subtext {

        width: 100%;

    }



    a.contact-link {

        padding-left: 1rem;

    }



    .form-modal {

        width: 100%;

    }



    .nome, .azienda, .email, .phone, .notes {

        width: 100%;

    }



    .button-container {

        width: 100%;

        margin-left: 0;

        gap: 1rem;

    }

}