@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rowdies:wght@300;400;700&display=swap');
body{
    margin: 0;
    padding: 0;
    font-family: 'Roboto', sans-serif;
   /* overflow-x: hidden;  Nasconde il contenuto che fuoriesce orizzontalmente */
}
#backgroundImg{
    position: absolute;
    width: 100%;
    margin-top: -15%;
}
#backgroundMask{
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
    background: linear-gradient(to right, rgba(17, 25, 51, 0.95) 0%, rgba(20, 28, 54, 0) 90%);

}
.mobileMain{
    display: none;
}
.main{
    position: absolute;
    z-index: 2;
    width: 100%;
    color: white;
}
a{
    color: white;
    text-decoration: none;
    margin-left: 2%;
    font-size: 1.1vw;
}
header{
    display: flex;
    align-items: center;
    margin-top: 1%;
}
#logo{
    width: 15%;
    margin-left: 5%;
    margin-right: 51%;
}
#mainContainer{
    width: 100%;
}
.landingThx{
    width: 45%;
    margin-top: 13%;
    font-size: 3vw;
    font-weight: 500;
    margin-left: 5%;
    color: #2985e1;
}
#firstRow{
    color: #2985e1;
    color: white;
    font-size: 4.5vw;
    font-weight: bolder;
}
.btnContainer{
    height: 40%;
    width: 100%;
}
button{
    border-radius: 20px;
    border: none;
    height: 100%;
    width: 9%;
    padding: 1.2%;
    color: #2985e1;
    transition: background-color 0.3s ease, color 0.3s ease;
}
button:hover{
    background-color: rgb(218, 216, 216);
    cursor: pointer;
}
#bookARide{
    background-color: #2985e1;
    color: white;
    height: 100%;
    margin-right: 2%;
    margin-left: 5%;
}
#bookARide:hover{
    background-color: #1b5d9f;
}
#downloadLink{
    background-color: #2985e1;
    border-radius: 20px;
    color: white;
    border: none;
    padding: 9px;
    transition: background-color 0.3s ease, color 0.3s ease;
}
#downloadLink:hover{
    background-color: #1b5d9f;
}
.secondContainer{
    display: flex;
    align-items: center;
    width: 100%;
    margin-top: 22%;
    line-height: 1.5;
}
.secondContainer h1{
    color: #2985e1;
    font-weight: bolder;
    font-size: 3.6vw;
    margin: 0;
    font-family: 'Rowdies', cursive;
}
.secondContainer p{
    font-size: 1.2vw;
}
.textContainer{
    width: 50%;
    color: black;
    margin-left: 10%;
    margin-right: 10%;
}
#img1{
    width: 20%;
}
.title{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}
.title img{
    width: 7%;
}
.imgsContainer{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2%;
    color: black;
}
.imgContainer{
    margin: 0;
    width: 20%;
    height: 10%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-left: 3%;
}
.imgContainer img{
    width: 95%;
}
.imgContainer p{
    text-align: center;
    margin: 0;
    margin-top: 5%;
}
.aiTitle{
    color: #2985e1;
    font-family: 'Rowdies', cursive;
    font-size: 1.2vw;
}
footer{
    background-color: #2985e1;
    display: flex; 
    width: 100%;
    height: 10%;
    margin-top: 8%;
}
.footerColumn{
    width: 20%;
    height: 100%;
    margin-top: 2.5%;
    margin-bottom: 2.5%;
    display: flex;
    flex-direction: column;
}
.footerColumn p{
    margin: 10px;
}
.footerColumn a{
    margin: 10px;
    width: 50%;
    display: inline-flex;
    align-items: center; /* Allinea l'immagine e il testo verticalmente */
    align-items: center;
}
.footerColumn img{
    width: 15%;
    margin-right: 5%;
}
.footerSubtitle{
    font-weight: bolder;
}
.footerColumn1{
    margin-left: 5%;
}
#footerLogoImg{
    margin-left: 5%;
    width: 35%;
}