@font-face {
    font-family: variable;
    src: url(assets/fonts/WorkSans-VariableFont_wght.ttf);
}

*{
    margin: 0%;
    padding: 0%;
    box-sizing: border-box;
}

body {
    width: 100%;
    min-height: 100vh;
    background-color: hsl(275, 100%, 97%);
    position: relative;
    display: flex;
    justify-content: center;
    /* align-items: center; */
    font-family: variable;
}

.img {
    background-image: url(assets/images/background-pattern-desktop.svg);
    width: 100%;
    height: 30vh;
    position: relative;
}

.hero {
    background-color: white;
    width: 600px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: absolute;
    top: 50px;
    border-radius: 20px;
    padding: 40px;
} 

.faq {
    display: flex;
    width: 100%;
}

.faq h1 {
    font-size: 50px;
    margin-left: 10px;

}

.mentor {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    margin: 20px 0;
}

.mentor {
    display: flex;

}

.mentor img {
    margin-left: 50px;
}

.offers {
    width: 100%;
    opacity: 0.8;
    border-bottom: 1px solid rgba(174, 174, 174, 0.692) ;
    padding: 20px 0;

}

.free {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 0.5px solid rgba(174, 174, 174, 0.692) ;
    min-height: 50px;
}



.project {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 0.5px solid rgba(174, 174, 174, 0.692) ;
    padding: 10px 0;
}

.project img {
        margin-left: 48px;
}

.stuck {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
}

.stuck img {
    margin-left: 92px;
}

@media (max-width: 486px) {
        .img {
            background-image: url(assets/images/background-pattern-mobile.svg);
            height: 30vh;
            width: 100vw;
        }
        .hero {
            width: 340px;
            min-height: 60vh;
        }
}