* {
        margin: 0;
        padding: 0;
    }
    
    body {
        background-image: url("media/category_images/fon5 27kb.webp");
        background-size: cover;
        background-position: center;
        background-attachment: fixed;
        position: relative;
    }
    
    body::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        /* Полупрозрачное черное наложение */
        z-index: -1;
        /* Псевдоэлемент находится под содержимым body */
    }
    /* Header */
    
    .header {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        background-color: rgba(29, 29, 29, 0.206);
        width: 100%;
        height: 50px;
        text-align: center;
        align-items: center;
    }
    
    .h-info {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        background-color: rgba(32, 43, 53, 0);
        height: auto;
        font-size: 1vw;
    }
    
    @media (min-width: 100px) and (max-width: 600px) {
        .h-info {
            font-size: 1.7vw;
        }
    }
    
    @media (min-width: 601px) and (max-width: 900px) {
        .h-info {
            font-size: 1.7vw;
        }
    }
    
    .h-header-info {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        background-color: rgba(29, 29, 29, 0.206);
        height: 3vw;
        font-size: 1.3vw;
    }
    
    .h-header_info1 {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        background-color: rgba(29, 29, 29, 0.206);
        width: 100%;
        height: 2vw;
        font-size: 1.3vw;
    }
    
    @media (min-width: 100px) and (max-width: 600px) {
        .h-header_info1 {
            height: 4vw;
        }
    }
    
    @media (min-width: 601px) and (max-width: 900px) {
        .h-header_info1 {
            height: 4vw;
        }
    }
    
    .header_a {
        color: #ffffff;
        text-decoration: none;
        cursor: pointer;
    }
    
    .header_plus {
        display: flex;
        position: relative;
        /* flex-direction: row;
    justify-content: space-around; */
        background-color: rgba(240, 248, 255, 0);
        /* width: 60%; */
        height: auto;
        font-size: 1.3vw;
    }
    
    .header_logo {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        background-color: rgba(32, 43, 53, 0);
        width: 40%;
        height: auto;
        font-size: 1.3vw;
    }
    
    .header button,
    p {
        background-color: rgba(240, 248, 255, 0);
        color: #ffffff;
    }
    
    .header button:hover {
        transform: scale(1.2);
        transition: transform 0.2s ease;
    }
    /* Кнопка выбора города */
    /* Стили для кнопки dropdown */
    
    .dropdown {
        position: relative;
        display: inline-block;
    }
    
    .dropbtn {
        background-color: #00ff0a00;
        color: white;
        padding: 3px;
        font-size: 1.2vw;
        border: 1.5px solid white;
        cursor: pointer;
        width: 12vw;
    }
    
    .city {
        color: white;
        padding: 10px;
        font-size: 2vw;
        border: none;
        cursor: pointer;
        justify-content: flex-start;
        align-items: baseline;
    }
    /* Стили для содержимого dropdown */
    
    .dropdown-content {
        display: none;
        position: absolute;
        background-color: rgba(29, 29, 29, 0.638);
        min-width: 247px;
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
        z-index: 1;
        left: 50%;
        /* Позиционирование в центре кнопки */
        transform: translateX(-50%);
        margin-top: 0%;
        justify-items: center;
    }
    /* Стили для ссылок внутри dropdown */
    
    .dropdown-content a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
        color: white;
    }
    /* Стили при наведении на ссылку */
    
    .dropdown-content a:hover {
        background-color: rgba(29, 29, 29, 0);
        transform: scale(1.2);
        transition: transform 0.2s ease;
    }
    /* Показ содержимого dropdown при наведении на dropdown */
    
    .dropdown:hover .dropdown-content {
        display: block;
    }
    /* Изменение цвета кнопки при наведении на dropdown */
    
    .dropdown:hover .dropbtn {
        background-color: rgba(29, 29, 29, 0);
    }
    /* --------------------------------Banner----------------------------------- */
    
    .banner {
        display: flex;
        flex-direction: row;
        background-color: rgba(255, 0, 132, 0);
        width: 100%;
        height: 26vw;
        align-items: center;
        justify-content: center;
        margin-top: 1%;
    }
    
    @media (min-width: 100px) and (max-width: 600px) {
        .banner {
            height: 30vw;
        }
    }
    
    @media (min-width: 601px) and (max-width: 900px) {
        .banner {
            height: 30vw;
        }
    }
    
    .banner div {
        display: flex;
        width: 100%;
        height: 26vw;
        border-radius: 30px;
    }
    
    @media (min-width: 100px) and (max-width: 600px) {
        .banner div {
            border-radius: 10px;
            height: 29vw;
        }
    }
    
    @media (min-width: 601px) and (max-width: 900px) {
        .banner div {
            border-radius: 20px;
            height: 29vw;
        }
    }
    
    .banner_first:hover {
        transform: scale(1.03);
        transition: transform 0.5s ease;
    }
    
    .banner_second:hover {
        transform: scale(1.03);
        transition: transform 0.5s ease;
    }
    
    .clickable-link {
        display: block;
        width: 100%;
        margin: 1%;
    }
    
    .img_banner {
        display: flex;
        width: 100%;
        border-radius: 30px;
        object-fit: cover;
        object-position: top;
        border: 1.5px solid white;
    }
    
    @media (min-width: 100px) and (max-width: 600px) {
        .img_banner {
            border-radius: 10px;
        }
    }
    
    @media (min-width: 601px) and (max-width: 900px) {
        .img_banner {
            border-radius: 20px;
        }
    }
    
    .banner_p {
        display: flex;
        position: absolute;
        margin: 10px 0 0;
        text-shadow: -1px -3px 21px #000000, 3px 0px 15px rgb(0, 0, 0), 1px 3px 16px rgb(0, 0, 0), -1px -3px 21px #000000, 3px 0px 15px rgb(0, 0, 0), 1px 3px 16px rgb(0, 0, 0);
        font-size: 2vw;
        padding-left: 2vw;
        padding-top: 20.5vw;
        width: 45vw;
        align-self: center;
    }
    
    @media (min-width: 100px) and (max-width: 600px) {
        .banner_p {
            font-size: 2.5vw;
            padding-top: 19.5vw;
            width: 44%;
            text-shadow: -1px -3px 21px #000000, 3px 0px 15px rgb(0, 0, 0), 1px 3px 16px rgb(0, 0, 0), -1px -3px 10px #000000, 3px 0px 5px rgb(0, 0, 0), 1px 3px 5px rgb(0, 0, 0);
        }
    }
    
    @media (min-width: 601px) and (max-width: 800px) {
        .banner_p {
            font-size: 2.5vw;
            padding-top: 19.5vw;
            width: 44%;
            text-shadow: -1px -3px 21px #000000, 3px 0px 15px rgb(0, 0, 0), 1px 3px 16px rgb(0, 0, 0), -1px -3px 10px #000000, 3px 0px 5px rgb(0, 0, 0), 1px 3px 5px rgb(0, 0, 0);
        }
    }
    
    @media (min-width: 801px) and (max-width: 900px) {
        .banner_p {
            font-size: 2.5vw;
            padding-top: 21vw;
            width: 44%;
            text-shadow: -1px -3px 21px #000000, 3px 0px 15px rgb(0, 0, 0), 1px 3px 16px rgb(0, 0, 0), -1px -3px 10px #000000, 3px 0px 5px rgb(0, 0, 0), 1px 3px 5px rgb(0, 0, 0);
        }
    }
    
    .banner_info {
        display: flex;
        position: absolute;
        margin: 10px 0 0;
        font-size: 1.7vw;
        padding-left: 2vw;
        /* padding-top: 18vw; */
        width: 44vw;
        color: black;
        text-align: center;
    }
    
    @media (min-width: 100px) and (max-width: 900px) {
        .banner_info {
            font-size: 1.8vw;
            margin: 0;
            padding-top: 1vw;
        }
    }
    /* ----------------------------------------------End Banner--------------------------------------------- */
    /* ----------------------------------------------Body--------------------------------------------- */
    
    .body {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        background-color: rgba(29, 29, 29, 0);
        width: 100%;
        height: auto;
    }
    
    .body_div_first {
        display: flex;
        flex-direction: row;
        text-align: center;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        width: 83%;
        height: 100vh;
        color: #ffffff;
        margin-top: 2%;
        justify-content: space-between;
    }
    
    @media (min-width: 100px) and (max-width: 600px) {
        .body_div_first {
            width: 81%;
        }

        .body_div_first {
            height: auto;
        }
    }
    
    @media (min-width: 601px) and (max-width: 900px) {
        .body_div_first {
            width: 81%;
            font-size: 2.5vw;
        }

        .body_div_first {
            height: auto;
        }
    }
    
    .body_div_first div {
        display: flex;
        justify-content: center;
        height: 12.4vw;
        border-radius: 20px;
        border: 1.5px solid white;
        margin-bottom: 5%;
    }
    
    @media (min-width: 100px) and (max-width: 600px) {
        .body_div_first div {
            height: 26vw;
        }
    }
    
    @media (min-width: 601px) and (max-width: 900px) {
        .body_div_first div {
            height: 26vw;
        }
    }
    
    .div_other {
        background-color: #0202028f;
        height: 3vw;
        z-index: 100;
        width: 110%;
        position: absolute;
        margin-top: 9vw;
    }
    
    @media (min-width: 100px) and (max-width: 500px) {
        .div_other {
            margin-top: 17vw;
            width: 150%;
        }
    }
    
    @media (min-width: 501px) and (max-width: 800px) {
        .div_other {
            margin-top: 16vw;
            width: 150%;
        }
    }
    
    @media (min-width: 801px) and (max-width: 900px) {
        .div_other {
            margin-top: 20vw;
            width: 150%;
        }
    }
    /*  */
    
    .body_div_second {
        display: flex;
        flex-direction: column;
        text-align: center;
        align-items: center;
        flex-wrap: wrap;
        width: 14%;
        margin-top: 2%;
        margin-bottom: 5%;
        margin-right: 1%;
        margin-left: 1%;
    }
    
    @media (min-width: 100px) and (max-width: 600px) {
        .body_div_second {
            width: 14%;
            margin-left: 1.5%;
        }
    }
    
    @media (min-width: 601px) and (max-width: 900px) {
        .body_div_second {
            width: 16%;
        }
    }
    
    .body_div_second div {
        display: flex;
        justify-content: center;
        background-color: #0000008c;
        width: 100%;
        height: 20vw;
        border-radius: 10px;
        border: 0.3em solid white;
        margin-bottom: 15%;
    }
    
    @media (min-width: 100px) and (max-width: 600px) {
        .body_div_second div {
            height: 24vw;
            border: 0.1em solid white;
        }
    }
    
    @media (min-width: 601px) and (max-width: 900px) {
        .body_div_second div {
            height: 28vw;
            border: 0.1em solid white;
        }
    }
    /*  */
    
    .category-link {
        text-decoration: none;
        color: inherit;
        width: 18%;
        margin-left: 1vw;
        /* margin-right: 0.9vw; */
        margin-bottom: 1vw;
    }
    
    @media (min-width: 100px) and (max-width: 600px) {
        .category-link {
            width: 46%;
            margin-right: 1.5vw;
        }
    }
    
    @media (min-width: 601px) and (max-width: 900px) {
        .category-link {
            width: 30%;
            margin-right: 1.5vw;
        }
    }
    
    .category-item {
        width: 100%;
        height: 200px;
        overflow: hidden;
        position: relative;
    }
    
    .div1 {
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }
    
    .category-text {
        position: relative;
        margin: 10px 0 0;
        justify-content: center;
        margin-top: 9vw;
        z-index: 1000;
        font-size: 1.4vw;
        align-self: center;
    }
    
    .div2 {
        background-image: url('imggel/gel_otdih.jpg');
        background-size: cover;
        background-position: center;
    }
    
    .div3 {
        background-image: url('imggel/gel_magaz.webp');
        background-size: cover;
        background-position: center;
    }
    
    .body .body_div_first p {
        padding: 34% 0% 0% 0%;
        font-size: 2vw;
        width: 100%;
        z-index: 101;
        align-items: center;
    }
    
    @media (min-width: 100px) and (max-width: 500px) {
        .body .body_div_first p {
            padding: 39% 0% 0% 0%;
            font-size: 4vw;
            font-weight: 700;
        }

        .body_div_first {
            height: auto;
        }
    }
    
    @media (min-width: 501px) and (max-width: 600px) {
        .body .body_div_first p {
            padding: 37% 0% 0% 0%;
            font-size: 4vw;
            font-weight: 700;
        }

        .body_div_first {
            height: auto;
        }
    }
    
    @media (min-width: 601px) and (max-width: 900px) {
        .body .body_div_first p {
            padding: 78% 0% 0% 0%;
            font-size: 2.5vw;
            font-weight: 700;
        }
    }
    /*  */
    
    .body .body_div_second p {
        color: #ffffff;
        padding: 109% 0% 0% 0%;
        font-size: 1.7vw;
        z-index: 100;
        align-items: center;
    }
    
    @media (min-width: 100px) and (max-width: 600px) {
        .body .body_div_second p {
            font-size: 2vw;
            padding-top: 14vw;
        }
    }
    
    @media (min-width: 501px) and (max-width: 600px) {
        .body .body_div_second p {
            font-size: 2vw;
            padding-top: 15vw;
        }
    }
    
    @media (min-width: 601px) and (max-width: 900px) {
        .body .body_div_second p {
            font-size: 2.3vw;
            padding-top: 19vw;
        }
    }
    
    .body_div_first div:hover {
        box-shadow: 0px 0px 35px 5px rgb(255, 255, 255);
        transform: scale(1.04);
        transition: transform 0.4s ease;
    }
    /*  */
    
    .right_category-link {
        text-decoration: none;
        color: inherit;
        width: 100%;
    }
    
    .right_category-item {
        width: 100%;
        height: 200px;
        overflow: hidden;
        position: relative;
    }
    /*  */
    
    .right_div1 {
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }
    
    .right_category-text {
        position: relative;
        margin: 10px 0 0;
    }
    /*  */
    
    #search-results-container {
        list-style: none;
        padding: 0;
        /* border: 1px solid #ccc; */
        max-height: 360px;
        overflow-y: auto;
        position: absolute;
        /* Установите на absolute, чтобы они не влияли на поток документа */
        background: white;
        /* Убедитесь, что фон белый */
        z-index: 1000;
        /* Убедитесь, что результаты находятся выше других элементов */
        /* width: calc(100% - 20px); */
        width: 100%;
        margin-top: 33%;
        color: black;
        box-shadow: 0px 0px 20px #000000, 5px 0 55em rgb(0, 0, 0), 0 0px 0.1em rgb(0, 0, 0);
        border-radius: 10px;
    }
    
    #search-results-container a {
        color: black;
        padding: 3%;
    }
    
    .body_div_second div .other_p {
        display: flex;
        height: 5vw;
        margin-top: 15.5vw;
        z-index: 5;
        position: absolute;
    }
    
    @media (min-width: 100px) and (max-width: 500px) {
        .body_div_second div .other_p {
            height: 7vw;
            margin-top: 17vw;
            border: 0.1em solid white;
        }
    }
    
    @media (min-width: 501px) and (max-width: 600px) {
        .body_div_second div .other_p {
            height: 7vw;
            margin-top: 17vw;
            border: 0.1em solid white;
        }
    }
    
    @media (min-width: 601px) and (max-width: 900px) {
        .body_div_second div .other_p {
            height: 7vw;
            margin-top: 21vw;
            border: 0.1em solid white;
        }
    }
    
    .language-selector {
        display: inline-block;
        align-content: center;
    }
    
    .dropdown {
        position: relative;
        display: inline-block;
    }
    
    .dropbtn {
        background-color: #00ff0a00;
        color: white;
        padding: 3px;
        font-size: 1.2vw;
        border: 1.5px solid white;
        cursor: pointer;
        width: 12vw;
    }
    
    .dropbtn:hover {
        background-color: #00ff0a00;
        color: white;
    }
    
    @media (min-width: 100px) and (max-width: 500px) {
        .dropbtn {
            font-size: 1.5vw;
        }
    }
    
    @media (min-width: 501px) and (max-width: 600px) {
        .dropbtn {
            font-size: 1.5vw;
        }
    }
    
    @media (min-width: 601px) and (max-width: 900px) {
        .dropbtn {
            font-size: 1.5vw;
        }
    }
    
    .dropdown-content {
        display: none;
        position: absolute;
        background-color: rgba(29, 29, 29, 0.638);
        min-width: 247px;
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
        z-index: 1;
        left: 50%;
        transform: translateX(-50%);
        margin-top: 0%;
        justify-items: center;
    }
    
    @media (min-width: 100px) and (max-width: 500px) {
        .dropdown-content {
            min-width: 152px;
        }
    }
    
    @media (min-width: 501px) and (max-width: 600px) {
        .dropdown-content {
            min-width: 201px;
        }
    }
    
    @media (min-width: 601px) and (max-width: 900px) {
        .dropdown-content {
            min-width: 288px;
        }
    }
    
    .dropdown-content a {
        padding: 12px 16px;
        text-decoration: none;
        display: block;
        color: white;
        border-bottom: 1px solid #ddd;
        border-radius: 5px;
    }
    
    .dropdown-content a:hover {
        background-color: rgba(29, 29, 29, 0);
        transform: scale(1.2);
        transition: transform 0.2s ease;
    }

    .img_banner {
        height: 26vw;
    }
    
    @media (min-width: 100px) and (max-width: 500px) {
        .dropdown-content a {
            font-size: 4vw;
        }

        .category-text {
            margin-top: 16.5vw;
            font-size: 3.5vw;
        }

        .img_banner {
            height: 29vw;
        }
    }
    
    @media (min-width: 501px) and (max-width: 600px) {
        .dropdown-content a {
            font-size: 4vw;
        }

        .category-text {
            margin-top: 15vw;
            font-size: 3.5vw;
        }

        .img_banner {
            height: 29vw;
        }
    }
    
    @media (min-width: 601px) and (max-width: 900px) {
        .dropdown-content a {
            font-size: 3vw;
        }

        .category-text {
            margin-top: 20vw;
            font-size: 2.5vw;
        }

        .img_banner {
            height: 29vw;
        }
    }
    
    .dropdown:hover .dropdown-content {
        display: block;
    }
    /* Изменение цвета кнопки при наведении на dropdown */
    
    .dropdown:hover .dropbtn {
        background-color: rgba(29, 29, 29, 0);
    }