body {
    font-family: "Roboto", serif;
    font-weight: 400;
    font-style: normal;
    background-color: #FFFCF2;
}

a {
    text-decoration: none;
}

/* HEADER*/

.fullnav {
    background-color: #403D39;
    padding: 20px;
    height: 15vh;
}

.fullnav h3 {
    font-family: "Oswald", serif;
    margin-bottom: 0;
    line-height: 0;
}


.navpagelink {
    list-style: none;
    font-family: 'Fjalla One', sans-serif;


}

.navpagelink a {
    text-decoration: none;
    font-family: "Oswald", serif;
    color: white;


}

.buttonnav button {
    background-color: #EB5E28;
    color: #FFFCF2;
    border-radius: 25px;
    transition: transform .5s;
    /* Animation */
}

.buttonnav button:hover {
    background-color: #EB5E28;
    color: #FFFCF2;
    border-radius: 25px;
    transform: scale(1.1);
}

/*HOMEMAIN*/

.homejumbo {
    height: 85vh;
    background-image: url(img/homejumbo2.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}

.homejumbo h1 {
    color: black;
}

.homejumbo button {
    width: 20vw;
    color: #252422;
    text-decoration: none;
}

.welcome {
    height: 60vh;

}

.intro h1 {
    color: rgb(97, 97, 97);
}

.illustration {
    margin-top: 200px;
    margin-bottom: 150px;
    opacity: 1;
    transition: all .4s;

}

.homejumbo button {
    background-color: #CCC5B9;
    border-radius: 25px;
    color: #252422;
    text-decoration: none;
}



.homejumbo button:hover {
    background-color: #EB5E28;
    transition: all .4s;
}

.illustration button {
    background-color: #CCC5B9;
    border-radius: 25px;
    width: 200px;
    color: #252422;
    text-decoration: none;
}



.illustration button:hover {
    background-color: #EB5E28;
    transition: all .4s;
}


.illustration img {
    width: 100%;
    border-radius: 10px;
}

.illustration h1 {
    color: rgb(97, 97, 97);
}

.illustration h3 {
    color: #252422;
}

.illustration p {
    color: #403D39;
}

/*SERVICE PART*/

.servicejumbo {
    height: 85vh;
    background-image: url(img/serviceback.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}

/*CONTACTJUMBO*/

.contactjumbo {
    height: 85vh;
    background-image: url(img/contact.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}

.contactcontent {
    width: 100%;
    height: 80vh;
}

.brand-bar {
    width: 100%;
    height: 20vh;
    background-color: #CCC5B9;
    /* Grigio chiaro */
    overflow: hidden;
    display: flex;
    align-items: center;
    /* Centra verticalmente gli elementi */
    position: relative;
}

/* Contenitore scorrevole */
.marquee {
    display: flex;
    gap: 100px;
    /* Spazio tra i loghi */
    align-items: center;
    white-space: nowrap;
    animation: scroll 20s linear infinite;
}

/* Stile per i loghi */
.brand-logo {
    height: 8vh;
    /* Altezza dei loghi in base alla barra */
    object-fit: contain;
}

.buttoncontact {
    background-color: #EB5E28;
    color: #FFFCF2;
}

/* Animazione per lo scorrimento */
@keyframes scroll {
    0% {
        transform: translateX(100%);
    }

    100% {
        transform: translateX(-100%);
    }
}


/*SERVICE*/

.flip {
    position: relative;

    >.front,
    >.back {
        display: block;
        transition-timing-function: cubic-bezier(.175, .885, .32, 1.275);
        transition-duration: .5s;
        transition-property: transform, opacity;
    }

    >.front {
        transform: rotateY(0deg);
    }

    >.back {
        position: absolute;
        opacity: 0;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        transform: rotateY(-180deg);
    }

    &:hover {
        >.front {
            transform: rotateY(180deg);
        }

        >.back {
            opacity: 1;
            transform: rotateY(0deg);
        }
    }

    &.flip-vertical {
        >.back {
            transform: rotateX(-180deg);
        }

        &:hover {
            >.front {
                transform: rotateX(180deg);
            }

            >.back {
                transform: rotateX(0deg);
            }
        }
    }
}


.flip {
    position: relative;
    display: inline-block;
    margin-right: 2px;
    margin-bottom: 1em;
    width: 450px;


    >.front,
    >.back {
        display: block;
        color: white;
        width: inherit;
        background-size: cover !important;
        background-position: center !important;
        height: 320px;
        padding: 1em 2em;
        background: #313131;
        border-radius: 10px;

        p {
            font-size: 0.9125rem;
            line-height: 160%;
            color: #999;
        }
    }
}

.front h1 {
    font-size: 35px;
}

@media screen and (max-width: 460px) {

    .front h1 {
        font-size: 30px;
    }


}

@media screen and (max-width: 399px) {

    .front h1 {
        font-size: 25px;
    }


}

@media screen and (max-width: 350px) {

    .front h1 {
        font-size: 20px;
    }


}

@media screen and (max-width: 302px) {

    .front h1 {
        font-size: 16px;
    }


}


.text-shadow {
    text-shadow: 1px 1px rgba(0, 0, 0, 0.04), 2px 2px rgba(0, 0, 0, 0.04), 3px 3px rgba(0, 0, 0, 0.04), 4px 4px rgba(0, 0, 0, 0.04), 0.125rem 0.125rem rgba(0, 0, 0, 0.04), 6px 6px rgba(0, 0, 0, 0.04), 7px 7px rgba(0, 0, 0, 0.04), 8px 8px rgba(0, 0, 0, 0.04), 9px 9px rgba(0, 0, 0, 0.04), 0.3125rem 0.3125rem rgba(0, 0, 0, 0.04), 11px 11px rgba(0, 0, 0, 0.04), 12px 12px rgba(0, 0, 0, 0.04), 13px 13px rgba(0, 0, 0, 0.04), 14px 14px rgba(0, 0, 0, 0.04), 0.625rem 0.625rem rgba(0, 0, 0, 0.04), 16px 16px rgba(0, 0, 0, 0.04), 17px 17px rgba(0, 0, 0, 0.04), 18px 18px rgba(0, 0, 0, 0.04), 19px 19px rgba(0, 0, 0, 0.04), 1.25rem 1.25rem rgba(0, 0, 0, 0.04);
}

@media screen and (max-width: 550px) {

    .flip {
        width: 400px;
    }


}

@media screen and (max-width: 500px) {

    .flip {
        width: 350px;
    }


}

@media screen and (max-width: 450px) {

    .flip {
        width: 300px;
    }


}

@media screen and (max-width: 380px) {

    .flip {
        width: 260px;
    }


}

@media screen and (max-width: 350px) {

    .flip {
        width: 220px;
    }


}

@media screen and (max-width: 300px) {

    .flip {
        width: 180px;
    }


}

@media screen and (max-width: 500px) {

    .flip {
        position: relative;
        display: inline-block;
        margin-right: 2px;
        margin-bottom: 1em;



        >.front,
        >.back {
            display: block;
            color: white;
            width: inherit;
            background-size: cover !important;
            background-position: center !important;
            height: 320px;
            padding: 1em 2em;
            background: #313131;
            border-radius: 10px;

            p {
                font-size: 13px;
                line-height: 160%;
                color: #999;
            }
        }
    }

    .back h2 {
        font-size: 18px;
    }
}

@media screen and (max-width: 440px) {

    .flip {
        position: relative;
        display: inline-block;
        margin-right: 2px;
        margin-bottom: 1em;



        >.front,
        >.back {
            display: block;
            color: white;
            width: inherit;
            background-size: cover !important;
            background-position: center !important;
            height: 320px;
            padding: 1em 2em;
            background: #313131;
            border-radius: 10px;

            p {
                font-size: 11px;
                line-height: 160%;
                color: #999;
            }
        }
    }
}

@media screen and (max-width: 380px) {

    .flip {
        position: relative;
        display: inline-block;
        margin-right: 2px;
        margin-bottom: 1em;



        >.front,
        >.back {
            display: block;
            color: white;
            width: inherit;
            background-size: cover !important;
            background-position: center !important;
            height: 320px;
            padding: 1em 2em;
            background: #313131;
            border-radius: 10px;

            p {
                font-size: 10px;
                line-height: 160%;
                color: #999;
            }
        }
    }
}

@media screen and (max-width: 329px) {

    .flip {
        position: relative;
        display: inline-block;
        margin-right: 2px;
        margin-bottom: 1em;



        >.front,
        >.back {
            display: block;
            color: white;
            width: inherit;
            background-size: cover !important;
            background-position: center !important;
            height: 320px;
            padding: 1em 2em;
            background: #313131;
            border-radius: 10px;

            p {
                font-size: 10px;
                line-height: 160%;
                color: #999;
            }
        }
    }

    .back h2 {
        font-size: 16px;
    }
}

@media screen and (max-width: 310px) {

    .flip {
        position: relative;
        display: inline-block;
        margin-right: 2px;
        margin-bottom: 1em;



        >.front,
        >.back {
            display: block;
            color: white;
            width: inherit;
            background-size: cover !important;
            background-position: center !important;
            height: 320px;
            padding: 1em 2em;
            background: #313131;
            border-radius: 10px;

            p {
                font-size: 10px;
                line-height: 160%;
                color: #999;
            }
        }
    }

    .back h2 {
        font-size: 14px;
    }
}



/*MEDIAQUERY*/


/*INTRO MEDIAQUERY*/

@media screen and (max-width: 989px) and (min-width: 729px) {
    .intro {
        padding-top: 80px;
        padding-bottom: 80px;
    }

    .intro p {
        font-size: 16px;
    }

    .intro h3 {
        font-size: 22px;
    }


}

@media screen and (max-width: 729px) and (min-width: 650px) {
    .intro {
        padding-top: 80px;
        padding-bottom: 80px;
    }

    .intro p {
        font-size: 16px;
    }

    .intro h3 {
        font-size: 18px;
    }


}

@media screen and (max-width: 650px) and (min-width: 465px) {
    .intro {
        padding-top: 120px;
        padding-bottom: 120px;
    }

    .intro p {
        font-size: 16px;
    }

    .intro h3 {
        font-size: 18px;
    }


}

@media screen and (max-width: 465px) and (min-width: 411px) {
    .intro {
        padding-top: 180px;
        padding-bottom: 180px;
    }

    .intro p {
        font-size: 16px;
    }

    .intro h3 {
        font-size: 17px;
    }


}

@media screen and (max-width: 411px) and (min-width: 351px) {
    .intro {
        padding-top: 180px;
        padding-bottom: 180px;
    }

    .intro p {
        font-size: 14px;
    }

    .intro h1 {
        font-size: 18px;
    }

    .intro h3 {
        font-size: 16px;
    }
}

@media screen and (max-width: 351px) and (min-width: 0px) {
    .intro {
        padding-top: 220px;
        padding-bottom: 220px;
    }

    .intro p {
        font-size: 14px;
    }

    .intro h1 {
        font-size: 16px;
    }

    .intro h3 {
        font-size: 13px;
    }


}

/*ILLUSTRATION QUERY*/

@media screen and (min-width: 1730px) {

    .illustration p {
        font-size: 25px;
    }



}

@media screen and (max-width: 1730px) {

    .illustration p {
        font-size: 25px;
    }


}

@media screen and (max-width: 1600px) {

    .illustration p {
        font-size: 23px;
    }

}

@media screen and (max-width: 1500px) {

    .illustration p {
        font-size: 22px;
    }



}

@media screen and (max-width: 1400px) {

    .illustration p {
        font-size: 20px;
    }



}

@media screen and (max-width: 1300px) {

    .illustration p {
        font-size: 19px;
    }



}

@media screen and (max-width: 1200px) {

    .illustration p {
        font-size: 17px;
    }

}

@media screen and (max-width: 1100px) {

    .illustration p {
        font-size: 19px;
    }

}

@media screen and (max-width: 1020px) {

    .illustration p {
        font-size: 17.5px;
    }

}

@media screen and (max-width: 900px) {

    .illustration p {
        font-size: 15px;
    }

}

@media screen and (max-width: 800px) {

    .illustration p {
        font-size: 12px;
    }

}

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

    .illustration p {
        font-size: 11.5px;
    }

}

@media screen and (max-width: 767px) {

    .illustration p {
        font-size: 20px;
    }



}

@media screen and (max-width: 450px) {

    .illustration p {
        font-size: 16px;
    }



}





@media screen and (max-width: 1000px) and (min-width: 808px) {
    .illustration h1 {
        font-size: 23px;
    }


    .illustration h3 {
        font-size: 18px;
    }

    .illustration button {
        width: 60%;
    }
}

@media screen and (max-width: 808px) and (min-width: 768px) {
    .illustration h1 {
        font-size: 21px;
    }


    .illustration h3 {
        font-size: 16px;
    }

    .illustration button {
        width: 60%;
    }
}

@media screen and (max-width: 1500px) {

    .contactcontent {
        height: 100%;
    }



}

@media screen and (max-width: 1300px) {

    .contactcontent {
        flex-direction: column;
    }



}

@media screen and (max-width: 450px) {

    .homejumbo button {
        width: 150px;
    }



}

@media screen and (max-width: 700px) {

    iframe {
        width: 500px;
    }



}

@media screen and (max-width: 620px) {

    iframe {
        width: 450px;
    }



}

@media screen and (max-width: 560px) {

    iframe {
        width: 400px;
    }



}

@media screen and (max-width: 500px) {

    iframe {
        width: 350px;
    }



}

@media screen and (max-width: 450px) {

    iframe {
        width: 300px;
    }



}

@media screen and (max-width: 370px) {

    iframe {
        width: 250px;
    }



}

@media screen and (max-width: 350px) {

    iframe {
        width: 200px;
        height: 300px;
    }



}