h1 {
    font-size: 3.12vw;
    font-weight: 100;
    font-family: 'Ysabeau', sans-serif;
}

h2{
    font-family: 'Ysabeau', sans-serif;
    font-size: 2.6vw;
    font-weight: 200;
    margin: 0;
    padding: 0;
    text-transform: uppercase;
}


h4 {
    font-family: 'Ysabeau', sans-serif;
    font-size: 2.08vw;
    font-weight: 400;
}

p {
    font-family: 'Ysabeau', sans-serif;
    margin: 0;
    padding: 0;
}

.btn{
    font-family: 'Ysabeau', sans-serif;
    gap: 0.52vw;
    align-items: center;
    display: inline-flex;
    border-radius: 2.08vw;
    text-decoration: none;
    transition: background 0.2s ease;
    text-transform: uppercase;
    width: fit-content;
    font-size: 0.83vw;
    font-weight: 600;
    letter-spacing: 0.1em;
    white-space: nowrap;


}

/* широка */
.btn--wide {
    padding: 0.78vw 1.56vw ;
}

/* вузька */
.btn--narrow {
    padding: 0.52vw 1.15vw;

}

/* зелена заливка */
.btn--green {
    background: #3aaa35;
}
/* біла заливка */
.btn--white {
    background: #FFFFFF;
}

.btn--green:hover {
    background: #31942d;
}

.btn--white:hover {
    background: rgba(255,255,255,0.12);
}




/* білий бордер */
.btn--border-white {
    border: 1px solid #fff;
}
/* зелений бордер */
.btn--border-green {
    border: 1px solid #3aaa35;
}
/* чорний бордер */
.btn--border-black {
    border: 1px solid #000000;
}

/* білий текст */
.btn--text-white {
    color: #fff;
}
/* зелений текст */
.btn--text-green {
    color: #3aaa35;
}
/* чорний текст */
.btn--text-black {
    color: #000000;
}

.btn--icon::after {
    content: "";
    width: 1.25vw;
    height: 1.25vw;
    display: inline-block;

    mask: url("/static/main/img/arrow-right.svg") center/contain no-repeat;
    background-color: currentColor; /* Іконка забарвлюється як текст */
}


.section_subtitle{
    font-size: 1.56vw;
    font-weight: 500;
    margin: 0;
    padding: 0;

}

.section_paragraph{
    color: #8B8B8B;
    font-weight: 400;
    font-size: 1.56vw;
}


@media (max-width: 480px) {
    h1 {
        font-size: 10.66vw;
        letter-spacing: 0;
        font-weight: 200;
    }

    h2{
        font-size: 8vw;
    }


    h4 {
        font-size: 6.93vw;
        font-weight: 400;
    }

    p {

    }

    .btn{
        gap: 3.2vw;
        border-radius: 10.6vw;
        font-size: 3.73vw;
        font-weight: 600;
    }

    /* широка */
    .btn--wide {
        padding: 4vw 8vw ;
    }

    /* вузька */
    .btn--narrow {
        padding: 2.6vw 5.86vw;

    }

    .btn--icon::after {
        width: 6.4vw;
        height: 6.4vw;
    }


    .section_subtitle{
        font-size: 5.3vw;
    }

    .section_paragraph{
        font-size: 5.3vw;
    }
}