/* Подклчючение шрифтов */
@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Monstserrat/Montserrat-VariableFont_wght.ttf') format('truetype-variations');
    font-weight: 100 900; 
    font-style: normal;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Monstserrat/Montserrat-Italic-VariableFont_wght.ttf') format('truetype-variations');
    font-weight: 100 900;
    font-style: italic;
}

@font-face {
    font-family: 'Smeshariki';
    src: url('../fonts/Smeshariki/smeshariki_font.ttf');
    font-weight: 100 900; 
    font-style: normal;
}

/* ================== */


:root {
    /* Colors */
    --violet-0: #8331A7;
    --violet-1: #8E20C9;
    --violete-gradient-0: linear-gradient(90deg, #8634AA, #C965F4);
    --violete-gradient-1: linear-gradient(270deg, #8634AA, #C965F4);


    --orange-0: #F8AC16;
    --orange-1: #F84B16;
    --orange-gradient-0: linear-gradient(90deg, #F8AC16, #FC740A);

    --purple-0: #F6D2FF;
    --purple-1: #F9EDFD;
    --purple-2: #FDF5FF;



    --text-main-color: #484848;

    /* Consts */
    --content-max-width: 1760px;
}

* {
    padding: 0;
    margin: 0;

    color: var(--text-main-color);
    scroll-behavior: smooth;
}

body {
    font-family: 'Montserrat', sans-serif;

    background-color: rgb(255, 255, 255);
}

/* Если открыт поповер, то запрещаем скролл под ним */
body:has(.mobile-popover:popover-open) {
    overflow: hidden;
}

.site-container {
    position: relative; 
    overflow-x: hidden; 
}

/* === UI === */
.header-button-buy,
.button-buy {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    background-color: var(--violet-0);
    border: none;
    width: 214px;
    height: 58px;
    border-radius: 50px;

    font-size: 20px;
    color: white;
    font-family: 'Montserrat';
    font-weight: 600;

    transition: transform 0.15s ease, background-color 0.15s ease;
}

.header-button-buy:hover,
.button-buy:hover {
    cursor: pointer;
    transform: scale(1.05);
    background-color: var(--orange-0);
}

.button-buy-icon {
    width: 22px;
    height: 22px;
}
/* ========== */

/* decorations */
.bg-decorations {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; 
    z-index: 0;
}

.bg-decor-top {
    position: absolute;
    display: block;

    top: 0;
    left: 0;
    width: 100%;
    height: 800px;
    pointer-events: none; 
    z-index: -10;
}

.bg-decor-middle {
    position: absolute;
    display: block;

    top: 2100px;
    left: 0;
    width: 100%;
    height: 800px;
    pointer-events: none; 
    z-index: 101;
}

.bg-decor-bottom {
    position: absolute;
    display: block;

    top: 3750px;
    left: 0;
    width: 100%;
    height: 950px;
    pointer-events: none; 
    z-index: -10;
}
/* ========== */

.light-circle {
    top: 170px;
    position: absolute;
    width: 850px;
    height: 750px;
    background-color: rgb(255, 255, 255, 0.35);
    border-radius: 100%;
    left: 60%;
    transform: translateX(-50%);

    filter: blur(25px);
    will-change: filter;
}

@media (max-width: 1800px) {
    .bg-decor-bottom {
        width: 1800px;
        left: 50%;
        transform: translateX(-50%);
    }
}

@media (max-width: 1360px) { 
    .bg-decor-middle{
        top: 2650px;
        height: 760px;
        width: 1360px;

    }

    .bg-decor-bottom {
        top: 4310px;
        height: 890px;
    }
}

@media (max-width: 990px) { 
    .bg-decor-middle {
        height: 850px;
        top: 2500px;

    }

    .bg-decor-bottom {
        top: 4230px;
        height: 950px;
    }
}

@media (max-width: 900px) { 
    .bg-decor-bottom {
        top: 4230px;
        height: 1580px;
    }
}

@media (max-width: 820px) {
    .bg-decor-top {
        height: 710px;
        width: 820px;
        left: 50%;
        transform: translateX(-50%);
    }

    .bg-decor-middle{
        top: 2830px;
        left: 50%;
        transform: translateX(-50%);
    }

    .bg-decor-bottom {
        top: 4570px;
        height: 1600px;
    }
}

@media (max-width: 576px) {
    .bg-decor-middle{
        top: 2650px;
    }

    .bg-decor-bottom {
        top: 4400px;
    }
}

@media (max-width: 560px) {
    .bg-decor-middle{
        top: 2470px;
    }

    .bg-decor-bottom {
        top: 4150px;
        height: 1560px;
    }
}

@media (max-width: 500px) {
    .bg-decor-bottom {
        height: 1550px;
    }

    .bg-decor-bottom {
        height: 1450px;
    }
}


@media (max-width: 450px) { 
    .bg-decor-middle{
        top: 2630px;
        height: 790px;
    }

    .bg-decor-bottom {
        top: 4050px;
        height: 1420px;
    }
}

@media (max-width: 440px) { 
    .bg-decor-middle{
        top: 2590px;
        height: 810px;
    }

    .bg-decor-bottom {
        height: 1450px;
    }
}


@media (max-width: 1000px) {
    .button-buy {
        height: 48px;
        width: 100%;
    }
}