/* Основные стили остаются без изменений */

@media (max-width: 768px) {


    .footer .container {
        max-width: 100%;
        padding: 30px 15px;
    }

    .footer .row {
        flex-direction: column;
        align-items: center;
    }

    .footer .col-2, .footer .col-8 {
        width: 100%;
        text-align: center;
        margin-bottom: 15px;
    }

    .footer .col-8 {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .footer .footer-link {
        margin: 5px 0;
        font-size: 14px;
    }

    .footer .footer-icon {
        margin: 0 5px;
    }

    .footer-line {
        width: 164%;
        margin: 20px 0;
    }

    /* Стили для других элементов */

    .navbar .navbar-nav .dropdown-menu {
        left: 0;
        transform: none;
        width: 100%;
        position: relative;
    }
    .server::before {
        content: '';
        order: 1;
        display: block;
    }

    .block-container {
        flex-direction: column;
        gap: 20px;
        margin-top: -5100px;

    }

    .server {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .server img {
        order: 2;
        width: 55px;
        margin-top: 25px;
        left: 15px;
        position: relative;
    }


    .contact {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        margin-top: 50px;
    }

    .contact img {
        order: 2;
        width: 55px;
        margin-top: 25px;
        left: 15px;
        position: relative;
    }



    .online-boxes {
        flex-direction: column;
        padding: 0;
        gap: 20px;
        visibility: hidden;
    }

    .online-server {
        width: 100%;
        margin: 10px 0;
    }

    .select-server {
        width: 100%;
        padding: 11px;
        font-size: 16px;
        margin-top: 50px;
    }

    .select-text {
        width: 100%;
        padding: 5px;
        font-size: 11px;
        margin-top: 162px;
    }


    .server-link {
        display: block;
        margin: 10px 100px;
    }

    .table-donate {
        width: 100%;
        overflow-x: auto;
    }
    .select-server p {
        margin-bottom: 18px;
        display: block;
        text-align: center;
    }
    .contact-box {
        padding: 10px;
    }

    .box {
        width: 100%;
        margin: 10px 0;
    }

    .arrow-right {
        margin-right: 0;
        position: fixed;
    }

    .blue-stripe {
        width: 100%;
        left: 0;
    }

    .nav__title {
        font-size: 26px;
        line-height: 30px;
        padding: 100px 0;
        width: 100%;
    }

    .nav__text {
        font-size: 14px;
        margin-top: -80px;
    }


    .nav_btn {
        font-size: 16px;
        width: 100px;
        height: 40px;
        left: 93px;
        margin-top: 25px;
        position: relative;
    }

    .nav_btns {
        font-size: 16px;
        width: 150px;
        height: 40px;
        left: 20px;
        margin-top: 20px;
        position: relative;
    }

    .nav__images {
        margin-top: -80px;

        visibility: hidden;
    }

    .nav_img {
        width: 100%;
        height: auto;
    }

    .blue-strip {
        width: 100%;
        top: auto;
        bottom: -80px;
        left: 0;
    }

    .column-text {
        margin-top: 950px;
    }

    .left-column {
        display: none; /* Скрываем левую часть на мобильных устройствах */
    }

    .right-column h3 {
        left: 30px;
    }

    .right-column p {
        left: 15px;
    }

    .right-column {
        width: 100%; /* Ширина занимает всю доступную область */
        margin-left: -8px;
        padding: 20px; /* Оставляем отступы внутри правой части */
    }

    .form-button-login {
        width: 100%; /* Ширина кнопки занимает всю доступную область */
    }

    .form-control {
        width: 100%; /* Ширина инпутов занимает всю доступную область */
    }

    .form-labels {
        margin-bottom: 15px; /* Добавляем отступ между инпутами */
    }

    .select-form {
        left: 35px !important;
    }

    .form-check {
        font-size: 10px;
    }

    .forgot-password {
        font-size: 10px;
        top: -3px;
        position: relative;
    }

    .header {
        flex-direction: column;
        align-items: flex-start;
    }

    .header .cabinet {
        order: 1;
    }

    .header .profile-pic {
        order: 2;
    }

    .cabinet {
        color: white;
        font-family: 'Minecraft';
        font-size: 20px;
        margin: 5px;
        left: 45px;
        position: relative;
    }

    .profile-pic img {
        width: 40px;
        height: 40px;
        position: relative;
        left: 125px;
    }

    .sections ul {
        width: 90%;
        gap: 10px;
        display: flex;
        left: 0;
        position: relative;
        flex-wrap: wrap;
        align-items: center;
        padding: 20px 20px 20px 0;
        flex-direction: column;
    }

    .info, .col-right {
        margin-top: 20px;
    }

    .user-info {
        flex-direction: column;
        align-items: flex-start;
    }

    .info {
        width: 84% !important;
        background-color: #212025;
        margin-left: 26px;
        border-radius: 10px;
        height: 400px !important;
    }

    .info-box {
        width: 84% !important;
        background-color: #212025;
        margin-left: 26px;
        border-radius: 10px;
        height: 150px !important;

    }
    .blue-bar {
        width: 89%;
    }

    .balance {
        font-size: 12px;
        display: flex;
        margin: 15px 15px 0 15px;
        color: rgba(241, 241, 243, 0.64);
    }

    .logout {
        margin-top: 100px;
        left: 37px;
        position: relative;
    }

    .profile {
        display: flex;
        background-color: #212025;
        width: 90%;
        font-family: 'Minecraft';
        padding: 8px 0 8px 100px;
        border-radius: 10px;
        /* gap: 25px; */
        left: 16px;
        list-style-type: none;
        margin-top: 103px;
        font-size: 14px;
        /* margin-left: 15px; */
        color: white;
        position: relative;
    }

    .skin-section {
        background-color: #212025;
        width: 90%;
        border-radius: 10px;
        height: 450px;
        left: 17px;
        margin-top: 25px;
        position: relative;
    }

    .skin {
        height: 0;
        position: relative;
        left: 24px;
        top: 5px;

    }

    .nav_btns_d {
        font-size: 13px;
        color: #ffffff;
        background: no-repeat;
        border: 1px solid #327AF3;
        border-radius: 10px;
        cursor: pointer;
        height: 45px;
        top: -20px;
        margin-left: 35px;
        width: 100px;
        transition: background-color 0.3s ease;
        z-index: 2;
        position: relative;
    }

    .bnt-del {
        font-size: 10px;
        color: #ffffff;
        background-color: #17161B;
        border-radius: 10px;
        cursor: pointer;
        height: 47px;
        top: -7px;
        left: 70px;
        padding: 14px;
        margin: 8px 0 0 20px;
        width: 104px;
        transition: background-color 0.3s ease;
        z-index: 2;
        position: relative;
    }

    .info-settings {
        width: 83% !important;
        background-color: #212025;
        margin-left: 28px;
        border-radius: 10px;
        height: 390px !important;
    }

    .form-control-setting {
        background-color: #17161B;
        color: white;
        border: 1px solid rgba(241, 241, 243, 0.15);
        border-radius: 10px;
        padding: 10px;
        top: 15px;
        margin-bottom: 10px;
        font-size: 14px;
        width: 80%;
        display: flex;
        margin-left: 10px;
        position: relative;
    }

    .medium {
        background-color: #327AF3;
        color: white;
        border: none;
        border-radius: 10px;
        padding: 10px 30px;
        cursor: pointer;
        font-size: 14px;
        margin-left: 10px;
        margin-top: 30px;
    }


    .info-payments {
        width: 83% !important;
        background-color: #212025;
        margin-left: 28px;
        border-radius: 10px;
        height: 350px !important;
    }

    .payments {
        gap: 0;
        margin-left: 10px;
        flex-direction: column;

    }

    .navbar-nav .nav-link[data-bs-target="#start"] {
        display: none;
    }

    .shop {
        display: block;
    }

    .shop-name {
        color: white;
        font-family: 'Minecraft';
        font-size: 22px;
        margin-left: 60px;
    }


    .products {
        display: grid;
        gap: 20px;
    }

    .product-box {
        border-radius: 10px;
        width: calc(100% - 20px);

        box-sizing: border-box;
        text-align: center;
        left: 15px;
        position: relative;
    }

    .modal-content.shop {
        width: 90% !important;
        border: none !important;
        left: 15px;
    }

    .groups ul {
        width: 100%;
        display: block;
        padding: 5px;
        margin-left: 12px;
        height: 100px;
    }

    .button-group {
        display: flex;
        /* justify-content: space-evenly; */
        /* margin-top: 10px; */
        right: 139px;
        gap: 34px;
        position: relative;
    }

    .server-list {
        display: block;
        width: 100%;
    }

    .server-box {
        display: block;
        text-align: center;
        padding: 10px;
        width: 0;
        /* margin-top: 33px; */
        /* margin-right: -7px; */
        /* margin-left: -40px; */
        margin: 20px 0 -45px -50px;
        height: 50px;
    }

    .groups-warning {
        width: 100%;
        margin-left: 12px;
        display: block;
        text-align: center;
        padding: 10px;
    }

    .non-clickable {
        color: rgba(241, 241, 243, 0.64);
        font-size: 14px;
        font-weight: bold;
        margin: 40px 0 0 90px;
        position: relative;
        top: 30px;
    }

    .notification-show {
        opacity: 1!important;
    }

    .notification {
        display: block;
        align-items: center;
        padding: 15px;
        margin-bottom: 10px;
        border-radius: 5px;
        color: #fff;
        opacity: 0;
        transition: opacity 0.5s ease-in-out;
        animation: shake 0.5s;
        margin-left: 20px;
    }

    .notification-warning {
        background-color: #212025;
        color: #F1F1F3;
    }

    .warning-item {
        color: #FFD31D;
        /* margin-left: 5px; */
    }

    .balance-shop {
        font-size: 16px;
        display: flex;
        /* margin: 5px 15px 0 0; */
        color: rgba(241, 241, 243, 0.64);
        left: 150px;
        /* text-align: right; */
        position: relative;
    }

    .skin-buttons {
        margin-top: 342px;
        left: 0;
        display: flex;
        position: relative;
    }

    .user-details {
        color: white;
        gap: 15px;
        font-size: 14px;
    }
    .skin-buttons-del {
        display: flex;
        left: -49px;
        position: relative;
    }
    .custom-button-cloak {
        font-size: 10px;
        color: #ffffff;
        background: no-repeat;
        border: 1px solid #327AF3;
        border-radius: 10px;
        cursor: pointer;
        padding: 14px 13px;
        height: 45px;
        top: -20px;
        margin-left: 19px;
        width: 104px;
        transition: background-color 0.3s ease;
        z-index: 2;
        position: relative;
    }

    .custom-button {
        font-size: 10px;
        color: #ffffff;
        background: no-repeat;
        border: 1px solid #327AF3;
        border-radius: 10px;
        cursor: pointer;
        height: 45px;
        top: -20px;
        padding: 14px 14px;
        margin-left: -4px;
        width: 102px;
        transition: background-color 0.3s ease;
        z-index: 2;
        position: relative;
    }

    .tags {
        display: flex;
        gap: 20px;
        margin-top: -18px;
        /* margin-bottom: 7px; */
        top: 20px;
        position: relative;
    }

    .server-margin {
        margin-top: 0!important;
    }

    /* Ограничиваем ширину всех контейнеров */
    .container,  .col-2, .col-8, .block-container, .info, .info-box, .profile, .skin-section {

        box-sizing: border-box;
        overflow: hidden;
    }


    /*!* Убираем любые отрицательные значения, которые могут вызвать выход за пределы экрана *!*/
    /*.block-container, .right-column, .profile, .skin-section, .product-box {*/
    /*    margin-left: 0;*/
    /*    margin-right: 30px;*/
    /*    position: relative;*/
    /*}*/

    /*!* Корректируем left и margin значения *!*/
    /*.server img, .nav_btn, .nav_btns, .nav_btns_d, .bnt-del, .balance-shop, .skin-buttons-del, .custom-button-cloak, .custom-button {*/
    /*    left: auto;*/
    /*    margin-left: 0;*/
    /*    position: relative;*/
    /*}*/

    /*!* Если у каких-то элементов все же есть отрицательные отступы *!*/
    /** {*/
    /*    margin-left: 0 !important;*/
    /*}*/

}