/* graditnt */
.background-container {
    position: relative;
    z-index: 0;
    background-color: black;
    overflow: hidden;
    min-height: 100vh;
    width: 100%;
    padding-bottom: 10vh;
}
.background-container::before {
    content: "";
    position: absolute;
    width: 50vw;
    height: 50vw; 
    border-radius: 50%;
    filter: blur(8vw); 
    opacity: 0.6;
    z-index: 0;
}

.background-container::after {
    content: "";
    position: absolute;
    width: 60vw; 
    height: 60vw; 
    border-radius: 50%;
    filter: blur(7vw);  
    opacity: 0.5;
    z-index: 0;
}
.background-container::before {
    background: linear-gradient(to right, #C9260C 5%, #FF8000 100%);
    top: 10%;   
    left: 1%; 
}
.background-container::after {
    background: linear-gradient(to right, 
        #C9260C 0%, 
        #FA9CEA 51%, 
        #7300FF 100%
    );
    top: 0%;     
    left: 40%;   
}
@media (max-width: 768px) {
    .background-container {
        padding-bottom: 50vh;  /* Увеличиваем отступ на мобильных */
    }

    .background-container::before {
        width: 70vw;      /* Больше размер на мобильных */
        height: 70vw;     /* Больше размер на мобильных */
        filter: blur(13vw); /* Меньше размытие на мобильных */
        top: 10%;        /* Другая позиция */
        left: -20%;       /* Другая позиция */
    }

    .background-container::after {
        width: 80vw;      /* Больше размер на мобильных */
        height:80vw;     /* Больше размер на мобильных */
        filter: blur(13vw); /* Меньше размытие на мобильных */
        top: 2%;        /* Другая позиция */
        left: 25%;        /* Другая позиция */
    }
}
@media (max-width: 425px) {
    .background-container {
        padding-bottom: 50vh;  /* Увеличиваем отступ на мобильных */
    }

    .background-container::before {
        width: 100vw;      /* Больше размер на мобильных */
        height: 100vw;     /* Больше размер на мобильных */
        filter: blur(15vw); /* Меньше размытие на мобильных */
        top: 30%;        /* Другая позиция */
        left: -20%;       /* Другая позиция */
    }

    .background-container::after {
        width: 120vw;      /* Больше размер на мобильных */
        height: 120vw;     /* Больше размер на мобильных */
        filter: blur(17vw); /* Меньше размытие на мобильных */
        top: 3%;        /* Другая позиция */
        left: 25%;        /* Другая позиция */
    }
}
@media (max-width: 375px){
    .background-container {
        padding-bottom: 20vh;
    }
}
@media (max-width: 320px){
    .background-container {
        padding-bottom: 5vh;
    }
}