@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');



html,

body {

    margin: 0;

    padding: 0;

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

    overflow-x: hidden;

    scroll-behavior: smooth;

}



:root {

    --color-background: #fff;

    --color-background-secondary: #454545;

    --color-primary: #4051B0;

    --color-secondary: #EBD560;

    --font-black: #000;

    --font-white: #fff;

}



/* width */

::-webkit-scrollbar {

    width: 10px;

}



/* Track */

::-webkit-scrollbar-track {

    background: var(--color-background-secondary);

}



/* Handle */

::-webkit-scrollbar-thumb {

    background: var(--color-primary);

    border-radius: 10px;

}



/* Handle on hover */

::-webkit-scrollbar-thumb:hover {

    background: var(--color-secondary);

}



.website-wrapper {

    display: flex;

    flex-direction: column;

}



/* 

    HEADER

*/



#header {

    position: fixed;

    left: 50%;

    transform: translateX(-50%);

    top: 1vw;

    width: 40rem;

    z-index: 9999;

    background-color: white;

    display: flex;

    flex-direction: row;

    justify-content: center;

    text-align: center;

    align-items: center;

    gap: 3rem;

    padding: 10px;

    border-radius: 20px;

    margin: auto;

    text-decoration: none;

    box-shadow: 5px 5px 15px var(--font-black);

    transition: all .3s;

}



#header:hover {

    opacity: 100%;

}



.header-onscroll {

    opacity: 75%;

}



#header a,

#header-mobile a {

    text-decoration: none;

    font-size: 1rem;

    padding: 4px 10px;

    border-radius: 5px;

    color: black;

    transition: all .3s;

}



#header a:hover,

#header-mobile a:hover {

    transform: translateY(-3px);

    background-color: var(--color-primary);

    color: var(--font-white);

    border-radius: 15px;

}



#header img {

    width: 80px;

}



.nav-link,

.nav-link-mobile {

    border: 2px solid transparent;

}



.active {

    border: 2px solid var(--color-primary);

}



#nav-mobile {

    display: none;

}



#nav-mobile-spacer {

    display: none;

}



#hamburger-btn {

    cursor: pointer;

}



.mobile-header-hidden {

    transform: translateY(-100%);

    display: none;

    /* animation-name: headerScrollOut;

    animation-duration: .5s; */

}



.mobile-header-visible {

    display: flex;

    flex-direction: column;

    transform: translateY(0%);

}



@keyframes headerScrollOut {

    from {

        transform: translateY(0%);

    }



    to {

        transform: translateY(-100%);

    }

}



.mobile-header {

    display: none;

    position: fixed;

    width: 100%;

    flex-direction: column;

    z-index: 999;

}



#header-mobile {

    flex-direction: column;

    text-align: center;

    align-items: center;

    justify-content: center;

    gap: 2rem;

    padding: 1rem 0 2rem 0;

    justify-content: center;

    background: rgba(255, 255, 255, 1);

    box-shadow: 0 13px 30px rgba(0, 0, 0, 0.1);



    animation-name: headerScrollIn;

    animation-duration: .5s;

}



@keyframes headerScrollIn {

    from {

        transform: translateY(-100%);

    }



    to {

        transform: translateY(0%);

    }

}



#header-mobile a {

    text-decoration: none;

    color: black;

    font-size: 1.5rem;

}



.close-header {

    background-color: black;

    opacity: 50%;

    flex: 100vh;

    background: rgba(0, 0, 0, 0.61);

    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);

    backdrop-filter: blur(17.7px);

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



    animation-name: closeHeaderFadeIn;

    animation-duration: .5s;

}



@keyframes closeHeaderFadeIn {

    from {

        /* transform: translateY(-100%);

        background: rgba(0, 0, 0, 0);

        backdrop-filter: blur(0px);

        -webkit-backdrop-filter: blur(0px); */

        flex: 0vh;

    }



    to {

        /* transform: translateY(0%);

        background: rgba(0, 0, 0, 0.5);

        backdrop-filter: blur(17.7px);

        -webkit-backdrop-filter: blur(17.7px); */

        flex: 100vh;

    }

}



@media (max-width: 760px) {

    #header {

        display: none;

    }



    #nav-mobile {

        background-color: white;

        z-index: 999;

        position: fixed;

        width: calc(100% - 2rem);

        top: 0;

        padding: .2rem 1rem;

        display: flex;

        justify-content: space-between;

    }



    #nav-mobile-logo {

        width: 64px;

    }



    #nav-mobile-spacer {

        display: flex;

    }



    .mobile-header {

        display: flex;

    }

}



/* 

    HERO

*/



.hero-section {

    position: relative;

    top: 0;

    color: var(--font-white);

    height: 47vw;

}



#hero-background {

    user-select: none;

    width: 100vw;

    height: auto;

    position: absolute;

    z-index: -1;

}



.hero-title {

    display: flex;

    flex-direction: column;

    padding-left: calc(2.5vw + .2rem);

    position: absolute;

    margin-top: 10vw;

    min-height: 100px;

}



.hero-title h2 {

    font-weight: 300;

    font-size: calc(2vw + .2rem);

    line-height: 75%;

    margin: 0;

}



.hero-title h1 {

    font-weight: bolder;

    font-size: clamp(1.5rem, 4vw, 40rem);

    text-wrap: nowrap;

    line-height: 100%;

    margin: 0;

}



.hero-title h1 span {

    color: var(--color-primary);

    -webkit-text-stroke: 2px #fff;

}



.hero-title a {

    margin-top: calc(2vw + .3rem);

    font-size: 1.2vw;

    background: var(--color-primary);

    background: linear-gradient(135deg, rgba(64, 81, 176, 1) 55%, rgba(255, 229, 22, 1) 100%);

    color: var(--font-white);

    text-decoration: none;

    width: calc(8vw + .5rem);

    text-align: center;

    padding: calc(1vw + .1rem);

    border-radius: 1vw;

    transition: all .2s;

    background-size: 100% 400%;

    background-position: 100% 0%;

    box-shadow: 7px 7px 10px rgba(0, 0, 0, 25%);

}



.hero-title a:hover {

    border-radius: 1.5vw;

    background-position: 100% 50%;

}



/* 

    MEDIA QUERY FOR MOBILE DEVICES

*/

@media (max-width: 760px) {

    .hero-section {

        height: 75vw;

    }



    #hero-background {

        width: 200%;

        top: -10vw;

        left: -100%;

    }



    .hero-title {

        margin-top: 13vw;

    }



    .hero-title h2 {

        font-size: 2rem;

    }



    .hero-title h1 {

        font-size: 3.5rem;

    }



    .hero-title h1 span {

        -webkit-text-stroke: 1px #fff;

    }



    .hero-title a {

        font-size: 1.25rem;

        width: 7rem;

    }

}



@media (max-width: 700px) {

    .hero-section {

        height: calc(100vw + 15rem);

    }



    #hero-background {

        width: 300%;

        top: 0;

        left: -180%;

    }



    .hero-title h2 {

        font-size: 2.5rem;

    }



    .hero-title h1 {

        font-size: 3rem;

    }



    .hero-title h1 span {

        -webkit-text-stroke: 1px #fff;

    }



    .hero-title a {

        font-size: 1rem;

        width: 6rem;

    }

}



@media (max-width: 500px) {

    .hero-section {

        height: calc(100vw + 5rem);

    }



    #hero-background {

        width: 300%;

        top: 0;

        left: -180%;

    }



    .hero-title h2 {

        font-size: 5vw;

    }



    .hero-title h1 {

        font-size: 10vw;

    }



    .hero-title h1 span {

        -webkit-text-stroke: 1px #fff;

    }



    .hero-title a {

        font-size: 1rem;

        width: 6rem;

    }

}



/* 

    SERVIZI

*/



#ready2go-logo {

    width: 256px;

}



.servizi-section {

    text-align: center;

    margin-top: 3rem;

    position: relative;

}



.servizi-cards {

    display: flex;

    flex-direction: row;

    flex-wrap: wrap;

    justify-content: space-evenly;

    margin-top: 2.5rem;

    gap: 2.5rem;

    padding: 5rem 0;

}



.servizio-card {

    width: 198px;

    justify-content: center;

    text-align: center;

    position: relative;

    box-shadow: 0px 8px 50px 6px rgba(0, 0, 0, 25%);

    border-bottom-left-radius: 1rem;

    border-bottom-right-radius: 1rem;

    transition: all .3s;

    margin-bottom: 2.5rem;

}



.servizio-card:hover {

    background-color: var(--color-background-secondary);

    color: var(--font-white);

}



.servizio-card img {

    position: absolute;

    top: -51px;

    left: 0;

    width: 198px;

}



.servizio-card-text {

    margin-top: 4.5rem;

    padding: 0 .5rem;

}



.servizio-card h1 {

    font-size: 1.25rem;

    line-height: 50%;

}



.servizio-card p {

    margin-top: 1.25rem;

    font-size: .9rem;

    margin-bottom: 1.5rem;

    line-height: 125%;

    padding: 5px;

}



/* On screens with width > 2000px */

@media (min-width: 2000px) {

    .servizi-section {

        font-size: 1.5rem;

        padding: 10rem 0;

    }



    .servizio-card {

        width: 256px;

    }



    .servizio-card img {

        top: -68px;

        width: 256px;

    }



    .servizio-card h1 {

        font-size: 1.5rem;

        margin-top: 6rem;

    }



    .servizio-card p {

        font-size: 1.2rem;

    }

}



@media (max-width: 760px) {

    .servizi-section {

        margin-top: 5rem;

    }



    .servizi-cards {

        padding-top: 3rem;

    }



    #ready2go-logo {

        width: 70vw;

    }

}



/* 

    SEZIONI DI PRESENTAZIONE

*/



.custom-shape-divider-top-1716672411 {

    top: 0;

    left: 0;

    width: 100%;

    line-height: 0;

    position: relative;

    user-select: none;

}



.custom-shape-divider-top-1716672411 svg {

    position: relative;

    display: block;

    width: calc(149% + 1.3px);

    /* height: 164px; */

}



.custom-shape-divider-top-1716672411 .shape-fill {

    fill: #FFFFFF;

}



/* bottom shape divider for right section */



.custom-shape-divider-bottom-1716931696 {

    bottom: 0;

    left: 0;

    width: 100%;

    overflow: hidden;

    line-height: 0;

    transform: rotate(180deg);

}



.custom-shape-divider-bottom-1716931696 svg {

    position: relative;

    display: block;

    width: calc(140% + 1.3px);

    height: 92px;

}



.custom-shape-divider-bottom-1716931696 .shape-fill {

    fill: #4051B0;



}



.section-left-image {

    position: absolute;

    right: 32px;

    bottom: 164px;

    padding-top: 10vw;

    width: 60rem;

}



.section-left {

    height: auto;

    padding-bottom: 10%;

    display: flex;

    flex-direction: column;

    position: relative;

    overflow: visible;

    background-color: var(--color-primary);

}



.section-left p,

.section-right p {

    width: 40vw;

    padding: 0 4rem;

    color: white;

    font-size: 2.2rem;

}



.section-left p {

    text-align: left;

}



.section-right p {

    text-align: right;

    color: black;

    float: right;

}



.section-right {

    overflow: hidden;

    position: relative;

    z-index: 1;

    background-color: transparent;

    height: auto;

    padding-bottom: 10%;

    display: flex;

    text-align: right;

    justify-content: right;

    align-items: end;

    flex-direction: column;

}



#image-staff,

#image-macchina {

    width: 50%;

    bottom: 10vw;

    user-select: none;

}



#image-macchina {

    position: absolute;

    width: 45%;

    top: -15vw;

    left: 5rem;

    z-index: 100;

}



#image-macchina-mobile {

    display: none;

}



#image-simulatore {

    width: 25vw;

    bottom: 124px;

}



.wave-bottom-white {

    bottom: 0;

    position: absolute;

    width: 100vw;

    user-select: none;

}



.wave-bottom-blue {

    display: none;

    bottom: 0;

    position: absolute;

    width: 100vw;

    user-select: none;

}



/* Sections p font-size responsiveness */

@media (min-width: 4000px) {



    .section-left p,

    .section-right p {

        font-size: 300%;

    }

}



@media (max-width: 2900px) {



    .section-left p,

    .section-right p {

        font-size: 2.2rem;

    }

}



@media (max-width: 2050px) {



    .section-left p,

    .section-right p {

        font-size: 1.75rem;

    }

}



@media (max-width: 1750px) {



    .section-left p,

    .section-right p {

        font-size: 1.5rem;

    }

}



@media (max-width: 1350px) {



    .section-left p,

    .section-right p {

        font-size: 1.25rem;

    }

}



@media (max-width: 1250px) {



    .section-left p,

    .section-right p {

        font-size: 1rem;

    }

}



/* Media query for mobile layout */

@media (max-width: 760px) {

    .custom-shape-divider-top-1716672411 {

        display: none;

    }



    .wave-bottom-blue {

        display: block;

    }



    .section-left {

        height: min-content;

    }



    .section-right {

        height: min-content;

    }



    .section-left,

    .section-right {

        display: flex;

        flex-direction: column;

        text-align: center;

        justify-content: center;

        align-items: center;

        float: none;

    }



    .section-left p,

    .section-right p {

        margin-top: 5rem;

        width: 90vw;

        text-align: center;

        font-size: 1rem;

    }



    .section-left-image {

        position: static;

        right: auto;

        bottom: auto;

        padding-top: 0;

    }



    #image-staff {

        position: block;

        width: 100vw;

    }



    #image-macchina {

        display: none;

    }



    #image-macchina-mobile {

        width: 90vw;

        display: block;

    }



    #image-simulatore {

        width: 50vw;

        bottom: 0px;

    }

}



@media (min-width: 2000px) {}



/* 

    MAPS

*/



.maps-section {

    text-align: center;

    justify-content: center;

    margin-top: 5rem;

}



.maps-section h1 {

    margin-bottom: 3rem;

}



.maps-section iframe {

    border-radius: 10px;

    border: 2px solid transparent;

    box-shadow: 0px 8px 50px 6px rgba(0, 0, 0, 25%);

    user-select: none;

    transition: all .3s;

}



.maps-section iframe:hover {

    border-radius: 20px;

    user-select: none;

}



/* Media query for bigger screens */

@media (min-width: 3000px) {

    .maps-section iframe {

        width: 30%;

        height: 20vw;

        height: calc(width);

    }

}



/* Media query for mobile layout */

@media (max-width: 760px) {

    .maps-section iframe {

        width: 95%;

        height: calc(width);

    }

}



/* 

    FOOTER

*/



footer {

    margin-top: 10rem;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    color: white;

}



.contatti-section {

    display: flex;

    flex-direction: row;

    justify-content: space-between;

    color: white;

}



.contatti-logo {

    display: flex;

    text-align: center;

    justify-content: center;

    align-items: center;

    margin-inline: auto;

}



.contatti-logo img {

    width: 20vw;

}



.contact-info {

    background-color: var(--color-primary);

    width: 43.33vw;

    border-top-left-radius: 20px;

    padding: 20px 0;

    display: flex;

    flex-direction: row;

    align-items: center;

}



.items {

    color: white;

    display: flex;

    flex-direction: column;

    justify-content: center;

    gap: 2rem;

}



.contact-item a {

    display: flex;

    text-decoration: none;

    text-align: center;

    align-items: center;

    color: white;

    margin-left: -24px;

    transition: all .3s;

    width: fit-content;

    border-radius: 40px;

    padding-right: 24px;

}



.contact-item a:hover {

    background-color: var(--color-secondary);

    color: black;

    transform: translateY(-3px);

}



.contact-item a span {

    margin-left: .5rem;

    text-align: center;

    justify-content: center;

    align-items: center;

    padding: 10px;

}



.contact-info .contact-item img {

    width: 48px;

    height: 48px;

}



.legal-stuff {

    padding: 5rem 0;

    background-color: var(--color-primary);

    text-align: center;

}



/* Media query for mobile layout */

@media (max-width: 760px) {

    footer {

        margin-top: 4rem;

    }



    .contatti-section {

        flex-direction: column;

    }



    .contatti-logo {

        margin-bottom: 5rem;

    }



    .contatti-logo img {

        width: 50vw;

    }



    .contact-info {

        border-top-left-radius: 0;

        width: 100%;

        text-align: center;

        justify-content: center;

        align-items: center;

    }



    .items {

        text-align: center;

        align-items: center;

        gap: 1rem;

        flex-direction: row;

        flex-wrap: wrap;

        justify-content: space-evenly;

    }



    .contact-item a {

        flex-direction: column;

        text-align: center;

        align-items: center;

        justify-content: center;

        width: auto;

        padding: 5px;

        border-radius: 10px;

        margin: 0;

    }



    .contact-item span {

        display: none;

    }



    .legal-stuff {

        padding: 0 10px;

    }

}