header .nav-list {
    background-color: #FFFFFF;
    color: var(--main-color);
}
.hero{
    background-color: #FFFFFF;
    padding-top: 15vh;
}
.hero-title{
    position: relative;
    margin: 5vh 8vw ;
}
.hero h1 {
    font-family: 'Inter';
    font-weight: 900;
    font-size: max(40px, 7vw);
    width: fit-content;
    color: var(--main-color);
}
.hero-illu-title{
    position: absolute;
    width: max(35px, 7vw);
    top: min(-10px, -4.1vw);
}
.hero-illu-title img{
    width: 100%;
}
.hero-illu-left{
    width: 30vw;
    margin-left: -12vw;
}
.hero-illu-left img{
    width: 100%;
}
.contact-info.container{
    position: absolute;
    top: 17vh;
    right: 0;
    width: 50vw;
    background-color: var(--main-color);
    padding: 15% calc(10vw + 5%) 15% 8%;
    border-radius: 5vw 0 0 5vw;
}
.contact-card__item{
    font-family: 'Grumpy';
    font-size: max(20px, 3vw);
    color: #FFFFFF;
    position: relative;
    width: fit-content;
}
.contact-card__item svg{
    position: absolute;
    width: max(21px,3vw);
    top: -40%;
    right: 0;
    transform: translateX(90%);
}
.contact-card__item:hover{
    color: var(--accent-color);
    path {
        stroke: var(--accent-color);
    }
}
footer{
    position: relative;
    bottom: 0;
}