*{
    box-sizing:border-box;
}

body{
    overflow-x: hidden;
}


.page{
    height: 100vh;
    width: 100vw;
    padding-top: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    scroll-snap-align: start;
}
.all-pages{
    scroll-snap-type: y mandatory;
    overflow-y: scroll;
    height: 100vh;
    width: 100vw;
    overflow-x: hidden;
}
.page-footer{
    height: auto !important;
}

.project-card{
    width: 80%;
    height: 90%;
    border-radius: 30px;
    overflow: hidden;
    position: relative;
    -webkit-box-shadow: 0px 0px 19px 5px rgba(0,0,0,0.22); 
box-shadow: 0px 0px 19px 5px rgba(0,0,0,0.22);
}

.background-illu{
    position: absolute;
    top: 0;
    left: 0;
    /* background-color: aliceblue; */
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.background-illu img{
    height: auto;
    width: 120%;
    position: absolute;
    transform: translate(-50%, -70%);
    top:80%;
    left: 80%;
}


.card-info{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 20;
}

.consultcars{
    background-color: #444444;

}

.family{
    background-color: #242425;
}

.family .info h2{
    margin-top: -150px;
    color: white;
    font-size: 5rem;
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-weight: bold;
}
.family .info h3{
    color: #F39200;
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-size: 2rem;
    font-weight: 600;
    margin-top: -10px;
}

.family .info p{
    color: rgb(255, 255, 255);
    font-size: 1.2rem;
    margin-top: 30px;
}

.family .info .btn-site:hover{
background: #242425;
box-shadow:  10px 10px 60px #1f1f1f,
             -10px -10px 60px #29292b;
transition: 0.3s;
}
.family .info .btn-site{
    
    transition: 0.3s;
border-radius: 50px;
background: #242425;
box-shadow:  20px 20px 60px #1c1c1d,
             -20px -20px 60px #2c2c2d;
margin-top: 30px;
text-align: center;
font-size: 1.2rem;
color: white;
text-decoration: none;
width: 300px;
padding: 20px;
text-align: center;
}

.family .techno p{
    color: rgb(255, 255, 255);
background: #242425;
box-shadow:  20px 20px 60px #1b1b1b,
             -20px -20px 60px #29292b;
    
}




.fifty{
    background-color: #F3F3F3;
}

.fifty .info h2{
    margin-top: -150px;
    color: #272727;
    font-size: 5rem;
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-weight: bold;
}
.fifty .info h3{
    color: #60B02C;
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-size: 2rem;
    font-weight: 600;
    margin-top: -10px;
}

.fifty .info p{
    color: #272727;
    font-size: 1.2rem;
    margin-top: 30px;
}

.fifty .info .btn-site:hover{
    background: #F3F3F3;
    box-shadow:  10px 10px 60px #cfcfcf,
                 -10px -10px 60px #ffffff;
transition: 0.3s;
}
.fifty .info .btn-site{
    
    transition: 0.3s;
    border-radius: 50px;
    background: #F3F3F3;
    box-shadow:  20px 20px 60px #cfcfcf,
                 -20px -20px 60px #ffffff;
margin-top: 30px;
text-align: center;
font-size: 1.2rem;
color: #272727;
text-decoration: none;
width: 300px;
padding: 20px;
text-align: center;
}

.fifty .techno p{
    color: #272727;
    border-radius: 50px;
    background: #F3F3F3;
    box-shadow:  20px 20px 60px #cfcfcf,
                 -20px -20px 60px #ffffff;
    
}










.techno{
    display: flex;
    flex-wrap: wrap;
    /* background-color: aliceblue; */
    padding-left: 30px;
}

.techno p {
    padding: 10px 30px;
    margin: 30px 10px 0 10px;
    border-radius: 10px;
}

.info{
    width: 50%;
    /* background-color: aqua; */
    padding-left: 50px;
    display: flex;
    flex-direction: column;
    /* align-items: center; */
    justify-content: center;
    height: 100%;
}


.consultcars .info h2{
    margin-top: -150px;
    color: white;
    font-size: 5rem;
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-weight: bold;
}
.consultcars .info h3{
    color: #E65300;
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-size: 2rem;
    font-weight: 600;
    margin-top: -10px;
}

.consultcars .info p{
    color: rgb(218, 218, 218);
    font-size: 1.2rem;
    margin-top: 30px;
}

.consultcars .info .btn-site:hover{
box-shadow:  10px 10px 20px #3b3b3b, -10px -10px 20px #4d4d4d;
transition: 0.3s;
}
.consultcars .info .btn-site{
    background-color: #444444;
    transition: 0.3s;
border-radius: 50px;
background: #444444;
box-shadow:  15px 15px 40px #333333, -15px -15px 40px #555555;
margin-top: 30px;
text-align: center;
font-size: 1.2rem;
color: white;
text-decoration: none;
width: 300px;
padding: 20px;
text-align: center;
}

/* MOBIL ----------------------------- */

.consultcars .techno p{
    color: rgb(218, 218, 218);
background: #444444;
             box-shadow:  17px 17px 34px #393939,
             -17px -17px 34px #4f4f4f;
    
}


.alpmobil{
    background-color: #EBEBEB;

}

.alpmobil .info h2{
    margin-top: -200px;
    color: #444;
    font-size: 5rem;
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-weight: bold;
}
.alpmobil .info h3{
    color: #009EA9;
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-size: 2rem;
    font-weight: 600;
    margin-top: -10px;
}

.alpmobil .info p{
    color: #444;
    font-size: 1.2rem;
    margin-top: 30px;
}

.alpmobil .info .btn-site:hover{
    box-shadow:  9px 9px 20px #e4e4e4,
             -9px -9px 20px #f2f2f2;
transition: 0.3s;
}
.alpmobil .info .btn-site{
    background-color: #EBEBEB;
    transition: 0.3s;
border-radius: 50px;
box-shadow:  14px 14px 28px #dddddd,
             -14px -14px 28px #f9f9f9;
margin-top: 30px;
text-align: center;
font-size: 1.2rem;
color: #444;
text-decoration: none;
width: 300px;
padding: 20px;
text-align: center;
}



.alpmobil .techno p{
    color: #444;
    background: #EBEBEB;
    box-shadow:  14px 14px 28px #dddddd,
             -14px -14px 28px #f9f9f9;
    
}


/* NOVA ------------------------ */

.nova{
    background-color: #2F125B;

}

.nova .info h2{
    margin-top: -200px;
    color: white;
    font-size: 5rem;
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-weight: bold;
}
.nova .info h3{
    color: #df00ba;
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-size: 2rem;
    font-weight: 600;
    margin-top: -10px;
}

.nova .info p{
    color: #EBEBEB;
    font-size: 1.2rem;
    margin-top: 30px;
}

.nova .info .btn-site:hover{
    box-shadow:  12px 12px 24px #26104b,
                 -12px -12px 24px #38186f;
transition: 0.3s;
}
.nova .info .btn-site{
    transition: 0.3s;
border-radius: 50px;
background: #2F145D;
box-shadow:  24px 24px 48px #200e40,
             -24px -24px 48px #3e1a7a;
margin-top: 30px;
text-align: center;
font-size: 1.2rem;
color: white;
text-decoration: none;
width: 300px;
padding: 20px;
text-align: center;
}


.nova .techno p{
    color: #EBEBEB;
    background: #2F145D;
box-shadow:  24px 24px 48px #200e40,
             -24px -24px 48px #3e1a7a;
    
}


/* MAGIC ------------------------------ */
.magic{
    background-color: #EBEBEB;

}

.magic .info h2{
    margin-top: -200px;
    color: #444;
    font-size: 5rem;
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-weight: bold;
}
.magic .info h3{
    color: #CC3A7B;
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-size: 2rem;
    font-weight: 600;
    margin-top: -10px;
}

.magic .info p{
    color: #444;
    font-size: 1.2rem;
    margin-top: 30px;
}

.magic .info .btn-site:hover{
    box-shadow:  9px 9px 20px #e4e4e4,
             -9px -9px 20px #f2f2f2;
transition: 0.3s;
}
.magic .info .btn-site{
    transition: 0.3s;
border-radius: 50px;
box-shadow:  14px 14px 28px #dddddd,
             -14px -14px 28px #f9f9f9;
margin-top: 30px;
text-align: center;
font-size: 1.2rem;
color: #444;
text-decoration: none;
width: 300px;
padding: 20px;
text-align: center;
background-color: #EBEBEB;
}



.magic .techno p{
    color: #444;
    background: #EBEBEB;
    box-shadow:  14px 14px 28px #dddddd,
             -14px -14px 28px #f9f9f9;
    
}

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

    .background-illu img{
        width: 200%;
        transform: translate(-50%, -30%);
    }
    .project-card{
        min-height: 95%;
        height: auto;
    }
    .info{
        width: 80%;
        padding:0 15px;
    }
    .techno{
        padding: 0;
        /* margin: 15px; */
    }
    .techno p{
        /* padding:0; */
        margin: 10px 10px 0 10px;
    }
}
@media screen and (max-width:480px)
{

    .background-illu img{
        width: 150%;
        transform: translate(-50%, -50%);
    }
}

@media screen and (max-width:800px)
{
    .background-illu img{
        width: 150%;
        transform: translate(-50%, -20%);
    }
    h2{
        font-size: 3.5rem !important;
        margin-top: 0 !important;
    }
    h3{
        font-size: 1.5rem !important;
    }
    .card-info{
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
    }
    .info{
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: 100%;
        align-items: center;
        width: 100%;
    }
    .techno{
        justify-content: center;
        margin-top: 10px;
    }

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

    .project-card{
        width: 85%;
    }
    .page{
        height: 100vh;
    }
    
    .techno p{
        font-size: 0.7rem;
        font-weight: 600;
        margin: 5px;
        padding: 10px 20px;
    }

    

    h2{
        font-size: 2.3rem !important;
        margin-top: -100px !important;
        
    }
    h3{
        font-size: 1.5rem !important;
    }
    .info p{
        font-size: 1.1rem !important;
    }
    .info .btn-site{
        padding: 15px !important;
        width: 80% !important;
    }

    .techno{
        display: none;
    }
}
@media screen and (max-width:360px)
{

    

    h2{
        font-size: 1.6rem !important;
        margin-top: 0px !important;
        
    }
    h3{
        font-size: 1.2rem !important;
        margin-top: -5px !important;
    }
    .info p{
        font-size: 1.1rem !important;
    }
    .info .btn-site{
        padding: 15px !important;
        font-size: 1rem !important;
        width: 80% !important;
    }
}


@media screen and (max-height:600px)
{
}