/* @import url("https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,400;0,600;0,800;1,400;1,600;1,800&display=swap"); */
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

* {
    margin: 0;
    padding: 0;
    border: none;
    text-decoration: none;
    list-style: none;
    outline: none;
    /* font-family: "Mulish", sans-serif; */
    font-family: "Poppins", sans-serif;
    box-sizing: border-box;
}

.hide {
    display: none !important;
}

.head-text {
    color: #284080;
    font-size: 32px;
    font-weight: 800;
}

.custom-select {
    width: 218px;
    background: #fafaf9;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    padding: 14px 12px;
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    appearance: none;
    position: relative;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 20px;
    color: #777777;
    font-size: 15px;
    font-weight: 500;
}

.choices {
    max-height: 49px;
    width: 100%;
}

.choices.is-open {
    width: 100%;
}

.choices.is-open .choices__input {
    padding-left: 12px;
}

.choices.is-focused .choices__input {
    padding-left: 12px;
}

.choices__inner {
    display: flex !important;
    justify-content: center;
    flex-direction: column !important;
    padding: 11px 12px !important;
    border-radius: 8px !important;
    min-height: auto !important;
    height: 100%;
    white-space: nowrap;

    &.has-error {
        border: 1px solid #ff5f2d;

        input {
            border: 0;
        }
    }
}

.choices__input {
    order: 1;
    margin: 0 !important;
    padding: 0 !important;
    font-weight: 500;
}

.choices__list {
    order: 2;
}

.choices__list--multiple {
    display: flex !important;
    align-items: center !important;
    column-gap: 3px;

    .choices__item {
        margin: 0 !important;
        padding: 2px 5px !important;
        background-color: #284080 !important;
        border-color: #284080 !important;
    }
}

.choices__item[data-deletable] {
    padding: 0 !important;
    margin: 0 !important;
    padding-left: 5px !important;
    background-color: #284080 !important;
    border-color: #284080 !important;
}

.choices__button {
    margin: 0 4px !important;
    z-index: 5;
}

.has-error .custom-select {
    border: 1px solid #ff5f2d;
    background-position: right 25px center;
}

.has-error textarea {
    border: 1px solid #ff5f2d;
}

.custom-select option {
    font-size: 15px;
    font-weight: 500;
    line-height: 24px;
    color: #7f7667;
    padding: 14px 12px;
}

.custom-input {
    background: #fafaf9;
    border: 1px solid #e8e8e8;
    padding: 14px 12px;
    font-size: 15px;
    font-weight: 500;
    border-radius: 8px;
    color: #777777;
}

.custom-input-first {
    border-radius: 8px 0px 0px 8px;
    width: 125px;
}

.custom-input-second {
    border-radius: 0px 8px 8px 0px;
    width: 93px;
}

.personal_info.has-error {
    display: flex;
    flex-direction: column;
}

.product.has-error {
    display: flex;
    flex-direction: column;
}

.error-hint {
    display: none;
    font-size: 14px;
    color: #ff5f2d;
}

body {
    position: relative;
}

button {
    cursor: pointer;
}

.box {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
}

.box_item {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.box_item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pd_t50 {
    padding-top: 50%;
}

.reklam-left {
    width: 12%;
    position: fixed;
    left: 0;
    top: 84px;
    z-index: 60;
}

.reklam-left img {
    width: 100%;
}

.reklam-right {
    width: 12%;
    position: fixed;
    right: 0;
    top: 84px;
    z-index: 60;
}

.reklam-right img {
    width: 100%;
}

.content_border {
    border: 1px solid #d9d9d9;
    border-radius: 20px;
    padding: 32px 40px;
}

.traktor-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

.traktor-head-search {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
}

.traktor-head-search-text {
    font-size: 16px;
    font-weight: 510;
    line-height: 24px;
    color: #313131;
}

.traktor-head-search-input-cont {
    border: 1px solid #d1d1d1;
    border-radius: 40px;
    padding: 8px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.traktor-head-search-input-cont-input::placeholder {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #777777;
}

.traktor-head-search-input-cont-icon {
    margin-left: 8px;
    cursor: pointer;
}

.traktor-head-ul {
    padding: 10px 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    font-size: 22px;
    font-weight: 700;
}

.traktor-head-ul li {
    display: flex;
    align-items: center;
    font-size: 18px;
    position: relative;
}

.traktor-head-ul li:not(:first-child)::before {
    content: "/\00a0";
    color: #000000;
    padding: 0 8px;
}

.traktor-head-ul-title {
    font-size: 16px;
    font-weight: 400;
    color: #313131;
}

.traktor-head-ul-title1 {
    font-size: 32px;
    font-weight: 800;
    line-height: 48px;
    color: #284080;
}

.product-title {
    font-size: 32px;
    padding: 0;
}

@media screen and (max-width: 992px) {
    .traktor-head {
        flex-direction: column;
        align-items: start;
        margin-bottom: 8px;
    }

    .traktor-head-ul {
        padding: 10px;
        gap: 14px;
    }

    .traktor-head-ul li {
        margin-left: -9px;
    }

    .traktor-head-search {
        justify-content: space-between;
        max-width: 272px;
        width: 100%;
    }

    .traktor-head-search-input-cont {
        width: 100%;
    }

    .product-title {
        font-size: 27px;
    }
}

/* HEADER */

.header {
    background: #f8f8f8;
    padding: 20px 16px;
    position: relative;
}

.container {
    max-width: 75%;
    margin: 0 auto;
    padding: 0 15px;
}

.home-container {
    max-width: 75%;
    margin: 0 auto;
    padding: 0 15px;
}

.nav {
    max-width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.nav-logo {
    display: flex;
    align-items: center;
    gap: 8px;
}

.nav-logo-cont {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.nav-logo-cont-img {
    width: 59px;
    height: 34px;
}

.nav-logo-cont-text {
    font-size: 18px;
    line-height: 24px;
    font-weight: 600;
    color: #313131;
    letter-spacing: 8%;
    font-style: italic;
}

.nav-links {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

#language-web {
    appearance: none;
    position: relative;
    font-size: 20px;
    cursor: pointer;
    background-color: transparent !important;
    color: #000000;

    &:visited{
        color: inherit;
    }
}

.nav-links li {
    text-align: center;
}

.nav-links-responsive {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
    display: none;
}

.nav-link {
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    letter-spacing: 2%;
    color: #1e1e1e;
    cursor: pointer;
}

.nav-link#place-announcement {
    background-color: #284080;
    color: #ffffff;
    padding: 10px 18px 10px 14px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    column-gap: 5px;
}

#auth,
#auth-mobile,
#register,
#register-mobile {
    background-color: #284080;
    color: #ffffff;
    padding: 10px 18px 10px 14px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    column-gap: 5px;
}

#auth-mobile,
#register-mobile {
    display: none !important;
}

.header-links {
    display: none;
    height: 100px;
}

.swiper-slide {
    background-color: #f3f3f3;
}

.header-links li {
    font-size: 18px;
    text-align: left;
}

.swiper {
    width: 100%;
    height: 100%;
}

.swiper-slide {
    background-position: center;
    background-size: cover;
}

.swiper-slide #place-announcement {
    font-size: 13px !important;
}

.swiper-container {
    overflow: hidden;
}

.header-swiper {
    height: 100% !important;
}

.header-swiper .swiper-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0px;
    width: 80%;
}

.header-swiper .swiper-slide {
    font-size: 18px;
    font-weight: 800;
    line-height: 24px;
    color: #1e1e1e;
    text-align: center;
    margin-right: 0;
    height: auto !important;
}

.header-swiper .swiper-button-next::after {
    position: absolute;
    top: 80%;
    font-size: 18px !important;
    font-weight: 400;
    line-height: 24px;
    text-align: center;
    color: #1e1e1e;
}

.header-swiper .swiper-button-prev::after {
    position: absolute;
    font-size: 18px !important;
    font-weight: 400;
    line-height: 24px;
    text-align: center;
    color: #1e1e1e;
}

.header-swiper .swiper-button-next,
.swiper-rtl .swiper-button-prev {
    top: -13px !important;
    right: -2px !important;
}

.header-swiper .swiper-button-next:after {
    width: 25px;
    height: 25px;
    background: linear-gradient(270deg, #f8f8f8 71.88%, rgba(248, 248, 248, 0) 100%);
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-swiper .swiper-button-prev:after {
    width: 25px;
    height: 25px;
    background: linear-gradient(270deg, #f8f8f8 71.88%, rgba(248, 248, 248, 0) 100%);
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-icons {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;

    #place-announcement {
        display: none;
    }
}

#dropdown-icon {
    fill: #1e1e1e;
    transition: all 0.3s;

    &.active {
        fill: #2a4b94;
        stroke: #284080;
    }
}

#dropdown {
    position: absolute;
    top: 70%;
    right: 12%;
    border: 1px solid #2a4b94;
    background-color: #ffffff;
    border-radius: 16px;
    padding: 20px 18px;
    z-index: 999;
    transition: all 0.3s;
    width: 190px;

    ul {
        display: flex;
        justify-content: center;
        flex-direction: column;
        gap: 16px;

        a {
            font-size: 18px;
            font-weight: 500;
            line-height: 24px;
            color: #333333;
            display: flex;
            align-items: center;
            gap: 8px;
            border-bottom: 1px solid transparent;
        }

        a.active,
        a:hover {
            transition: all 0.3s;
            border-bottom: 1px solid #2a4b94;
        }
    }
}

.nav-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 24px;

    img{
        width: 22px;
    }

    &#trigger-dropdown {
        cursor: pointer;
    }
}

.nav-icon-basket {
    position: relative;
}

.basket_counter {
    position: absolute;
    top: -5px;
    right: -3px;
    color: #ffffff;
    background: #ff5f2d;
    font-size: 8px;
    font-weight: 800;
    line-height: 7px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    border-radius: 50%;
    width: 8px;
    height: 8px;
    padding: 2px;
}

.header-swiper .swiper-wrapper {
    padding: 0 40px;
}

.nav-slider {
    display: none;
}

@media screen and (max-width: 992px) {
    #auth,
    #register {
        display: none !important;
    }

    #trigger-dropdown {
        display: none !important;
    }

    #auth-mobile,
    #register-mobile {
        display: flex !important;
        padding: 10px 45px !important;
        font-weight: bold;
    }

    .nav-slider {
        display: block;
    }

    .header {
        padding: 20px 16px;
    }

    .traktor-head-ul li:not(:first-child) {
        padding-left: 0;
    }

    .traktor-head-ul li + li:before {
        display: none;
    }

    .container {
        margin: 0;
    }

    .nav {
        flex-wrap: wrap;
    }

    .nav-links {
        display: none;
    }

    .nav-logo-cont {
        order: 1;
    }

    .nav-links {
        order: 3;
        flex: 0 0 100%;
    }

    .nav-icons {
        order: 2;
    }

    .header-links {
        display: block;
        height: auto !important;
    }
}

/* HEADER */

.category {
    position: relative;
    margin-top: 48px;
}

.category-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 32px 40px;
    border: 1px solid #d9d9d9;
    border-radius: 20px;
}

.category-content-head {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    gap: 24px;
}

.category-content-head-title-cont {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
}

.no-flex {
    display: initial;
}

.category-content-head-title-cont-writing {
    display: inline;
    font-size: 25px;
    font-weight: 800;
    line-height: 48px;
    color: #284080;
}

.category-content-head-title-cont-number {
    display: inline;
    font-size: 25px;
    font-weight: 300;
    line-height: 48px;
    color: #284080;
}

.category-content-head-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
}

.filter-button {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 40px;
    border: 1px solid #777777;
    color: #777777;
    padding: 8px 20px;
    background: transparent;
    gap: 8px;
    height: 45px;

    h3 {
        font-size: 18px;
        line-height: 24px;
        font-weight: 600;
    }
}

#filter-form {
    .form-container-element,
    .form-container-element_col3 {
        position: relative;

        label {
            position: absolute;
            left: 12px;
            top: 15px;
            font-size: 14px;
            font-weight: 500;
            color: #777777;
            z-index: 1;
            transition: all 0.3s;

            &.small {
                top: 0;
                left: 12px;
                font-size: 13px;
                transition: all 0.3s;
            }
        }

        input {
            width: 100%;
        }
    }

    .form-container-div:last-child {
        justify-content: flex-start;
        gap: 16px;

        .tractor-type.tractor-type_3 {
            padding: 14px 32px;
            height: auto !important;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }

    .form-container-element_col3 {
        .choices {
            width: 100%;
            max-height: 52px;

            .choices__inner {
                height: 52px;

                /* overflow-x: auto; */

                &::-webkit-scrollbar {
                    height: 5px;
                }

                &::-webkit-scrollbar-track {
                    background: #f1f1f1;
                    border-radius: 22px;
                }

                &::-webkit-scrollbar-thumb {
                    background: #284080;
                    border-radius: 2px;
                }

                &::-webkit-scrollbar-thumb:hover {
                    background: #284080;
                }

                /* this code creates ellipsis effect */

                .choices__list.choices__list--multiple {
                    display: inline !important;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    width: 100%;
                    overflow: hidden;
                    margin-top: 4px;
                }

                .choices__input {
                    /* display: none; */
                    width: 100% !important;
                    height: 0;
                }
            }

            .choices__list--dropdown {
                z-index: 2 !important;
                .choices__item.is-selected {
                    background-color: #2a4b94e3 !important;
                    color: #ffffff !important;
                }
            }
        }
    }

    .apply-filter,
    .reset-filter {
        margin-top: 40px;
    }

    .apply-filter {
        margin-left: 1.5%;
    }
}
#order {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 40px;
    border: 1px solid #777777;
    padding: 0px 20px;
    background: transparent;
    gap: 8px;
    position: relative;
    padding: 8px 20px;

    select,
    span {
        font-size: 18px;
        line-height: 24px;
        font-weight: 600;
        color: #777777;
    }

    select {
        cursor: pointer;
        font-weight: normal !important;
        -webkit-appearance: none;
        -moz-appearance: none;
        -ms-appearance: none;
        appearance: none;
        background-color: transparent;
        background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
        background-repeat: no-repeat;
        background-position: right center;
        background-size: 20px;
    }
}

.category-content-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    width: 100%;
}

.category-content-cards-card-link {
    width: calc((100% - 64px) / 3);

    .category-content-card-image-box {
        height: 300px;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
    }
}

.category-content-cards.category-page .category-content-cards-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    background: #fafaf9;
    padding: 16px;
}

.category-content-cards-card {
    background: #fafaf9;
    padding: 16px;
}

.category-content-cards-card-img-cont {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

.traktor-usage {
    display: flex;
    gap: 0px;
    flex-wrap: wrap;
    position: absolute;
    top: 10px;
    left: 10px;
}

.traktor-usage-product-detail {
    position: inherit;
}

.traktor-usage span {
    display: flex;
    align-items: center;
    font-size: 12px;
    font-weight: 400;
    border-radius: 5px;
    padding: 5px;
    line-height: 14px;
    color: #212c3a;
    gap: 5px;
    position: relative;

    .text {
        opacity: 0;
        position: absolute;
        top: 110%;
        left: 6px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #ffffff;
        font-weight: 500;
        padding: 5px;
        border-radius: 8px;
        transition: all 0.3s;
        width: max-content;
    }
}

.traktor-usage span:hover {
    .text {
        opacity: 1;
        
        transition: all 0.3s;

        &::after {
            content: "";
            position: absolute;
            left: 7px;
            top: -2px;
            width: 6px;
            height: 6px;
            border-radius: 1px;
        }
    }
}

.category-content-cards-card-img-cont-img {
    width: 100%;
    height: 300px;
    object-fit: cover;
}

.category-content-cards-card-title-cont {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px 0;
}

.category-content-cards-card-title-cont-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.category-content-cards-card-title-cont-head-title {
    font-size: 18px;
    line-height: 24px;
    font-weight: 800;
    color: #000000;
}

.category-content-cards-card-title-cont-price {
    font-size: 26px;
    line-height: 32px;
    font-weight: 400;
    color: #000000;
    opacity: 60%;
}

.category-content-cards-card-title-cont-span {
    font-size: 18px;
    line-height: 24px;
    font-weight: 400;
    color: #000000;
    letter-spacing: 10%;
}

.category-content-button {
    background: #ffffff;
    padding: 14px 81px;
    border: 1px solid #2a4b94;
    color: #2a4b94;
    border-radius: 8px;
    font-size: 16px;
    line-height: 24px;
    font-weight: 800;
    margin-top: 24px;
}

.category-slider {
    display: none;
}

.category-filter_modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 99;
    background: #4b56707e;
    display: none;
    justify-content: center;
    padding: 100px 0;
}

.category-filter_modal.active {
    display: flex;
}

.category-filter_modal-content {
    width: 90%;
    max-width: 1010px;
    height: 100%;
    background: linear-gradient(0deg, #ffffff, #ffffff);
    padding: 32px 40px;
    border: 1px solid #d9d9d9;
    border-radius: 20px;
}

.category-filter_modal-content_head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.close-filter_modal {
    display: flex;
    align-items: center;
    cursor: pointer;
    gap: 10px;
    background: #313131;
    border-radius: 20px;
    padding: 4px 14px;
    color: #fff;
}

.close-filter_modal span:last-child {
    font-size: 18px;
    font-weight: 700;
}

.category-filter_modal-content_body form {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.category-filter_list {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.category-filter_list-item {
    width: 218px;
    position: relative;
    display: flex;
}

.offer_types {
    display: flex;
    justify-content: space-between;
}

.offer-type {
    border-radius: 8px;
    outline: none;
    padding: 14px 32px;
    border: 1px solid #2a4b94;
    font-size: 14px;
    font-weight: 500;
    color: #284080;
    background: #fff;
    width: 30%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.offer-type.active {
    background: #284080;
    color: #fff;
}

.offer-type input {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.category-filter_list-item.type_2 {
    width: 296px;
}

.category-filter_list-item.type_2 .custom-input-second {
    width: 171px;
}

.type-buttons {
    width: 100%;
    border: 1px solid #2a4b94;
    border-radius: 8px;
    height: 52px;
    display: flex;
}

.tractor-type {
    width: calc(100% / 3);
    outline: none;
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    padding: 14px 0;
    border-right: 1px solid #2a4b94;
    background: #fff;
    color: #284080;
    cursor: pointer;
    position: relative;
    display: inline-block;
    height: 100%;
}

.tractor-type.tractor-type_2 {
    width: 50%;
}

.tractor-type.tractor-type_3 {
    width: 100%;
    border-radius: 6px !important;
    background-color: transparent;
}

.tractor-type input {
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
}

.tractor-type:first-child {
    border-radius: 6px 0 0 6px;
}

.tractor-type:last-child {
    border-radius: 0 6px 6px 0;
    border: none;
}

.tractor-type.active {
    color: #fff;
    background: #2a4b94;
}

.category-filter_list-item.charachteristics button,
.char-button {
    display: inline-block;
    width: 100%;
    border-radius: 8px;
    outline: none;
    padding: 14px 0;
    border: 1px solid #2a4b94;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    color: #284080;
    background: #fff;
    position: relative;
    cursor: pointer;
}

.char-button.active {
    background: #284080;
    color: #fff;
}

.char-button input {
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
}

.tractor_supplies span {
    display: inline-block;
    border-radius: 8px;
    outline: none;
    padding: 14px 32px;
    border: 1px solid #2a4b94;
    font-size: 14px;
    font-weight: 500;
    color: #284080;
    background: #fff;
    position: relative;
    cursor: pointer;
}

.tractor_supplies span input {
    cursor: pointer;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
}

.tractor_supplies span.active {
    background: #284080;
    color: #fff;
}

#burger-menu-btn {
    display: none !important;
}

#menu-mobile {
    display: none;
}

@media screen and (max-width: 962px) {
    .category-filter_list-item {
        width: 100%;
    }

    .category-filter_list-item .custom-select {
        width: 100%;
    }

    .category-filter_list-item.type-buttons .tractor-type {
        width: 33.3%;
    }

    .category-filter_list-item .custom-input {
        width: 100%;
    }
}

.tractor_supplies-header {
    font-size: 18px;
    font-weight: 600;
    color: #313131;
}

.category-filter_modal-content_foot {
    margin-top: 40px;
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.reset-filter,
.apply-filter {
    display: inline-block;
    border-radius: 8px;
    outline: none;
    padding: 14px 0;
    border: 1px solid #2a4b94;
    font-size: 14px;
    font-weight: 500;
    color: #284080;
    background: #fff;
    text-align: center;
    width: 49%;
}

.apply-filter {
    background: #2a4b94;
    color: #fff;
}

/* .category-filter_modal-content_foot button {
    display: inline-block;
    border-radius: 8px;
    outline: none;
    padding: 14px 0;
    border: 1px solid #2a4b94;
    font-size: 14px;
    font-weight: 500;
    color: #284080;
    background: #fff;
    text-align: center;
    width: 49%;
}

.category-filter_modal-content_foot button:last-child {
    background: #2a4b94;
    color: #fff;
} */

#uploads {
    display: flex;
    align-items: center;
    flex-direction: row;
    gap: 24px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 10px 0;
    width: 100%;

    &.has-error {
        border: 1px solid #ff5f2d;
        border-radius: 8px;
    }

    /* custom scrollbar styles */

    &::-webkit-scrollbar {
        height: 10px;
    }

    &::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 20px;
    }

    &::-webkit-scrollbar-thumb {
        background: #284080;
        border-radius: 20px;
    }

    &::-webkit-scrollbar-thumb:hover {
        background: #284080;
    }

    #upload-results {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 24px;
    }

    #trigger-upload-input {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        width: 224px;
        height: 224px;
        position: static;
        border: 1px solid #e8e8e8;
        background-color: #fafaf9;
        border-radius: 8px;
        gap: 10px;
        cursor: pointer;
    }

    #circle {
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        border: 1px solid #e8e8e8;
        background-color: #fafaf9;
        order: 1;

        label {
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
        }
    }

    .image-box {
        width: 224px;
        height: 224px;
        min-width: 224px;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px solid #e8e8e8;
        border-radius: 8px;
        overflow: hidden;
        transition: all 0.3s;

        &:hover {
            border: 1px solid #284080;

            .custom-checkbox {
                display: block !important;
            }
        }

        .remove-image {
            position: absolute;
            top: 10px;
            right: 10px;
            padding: 15px;
            background-color: #ffffff;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid white;
            border-radius: 8px;
            z-index: 999;
            background-image: url("../Icons/remove.svg");
            background-repeat: no-repeat;
            background-position: center center;
            transition: all 0.3s;

            &:hover {
                background-image: url("../Icons/remove-red.svg");
            }
        }

        img {
            width: 224px;
            height: 224px;
            object-fit: contain;
        }

        .custom-checkbox {
            display: none;
            position: absolute;
            bottom: 12px;
            cursor: pointer;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            padding: 8px 10px 8px 40px;
            background-color: #333333;
            color: #ffffff;
            border-radius: 32px;
            font-size: 16px;
            font-weight: 600;

            &:has(.input-checkbox:checked) {
                display: block !important;
                background-color: #ffffff;
                color: #333333;
            }
        }

        .custom-checkbox input {
            position: absolute;
            opacity: 0;
            cursor: pointer;
            height: 0;
            width: 0;
        }

        .checkmark {
            position: absolute;
            top: 8px;
            left: 8px;
            height: 25px;
            width: 25px;
            background-color: #eee;
            border-radius: 50%;
            border: 2px solid #ffffff;
        }

        .custom-checkbox:hover input ~ .checkmark {
            background-color: #ccc;
        }

        .custom-checkbox input:checked ~ .checkmark {
            background-color: #333333;
        }

        .checkmark:after {
            content: "";
            position: absolute;
            display: none;
        }

        .custom-checkbox input:checked ~ .checkmark:after {
            display: block;
        }

        .custom-checkbox .checkmark:after {
            left: 7px;
            top: 3px;
            width: 5px;
            height: 10px;
            border: solid white;
            border-width: 0 3px 3px 0;
            -webkit-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            transform: rotate(45deg);
        }
    }
}

@media screen and (max-width: 992px) {
    .category {
        margin-top: 16px;
    }
    .category-content {
        padding: 0;
        border: none;
    }

    .category-content-head {
        flex-direction: column;
        align-items: start;
    }

    .category-content-head-buttons {
        /* flex-direction: column; */
        align-items: start;
        gap: 16px;
    }

    .category-content-cards {
        flex-wrap: wrap;
        justify-content: center;
    }

    .category-content-cards-card-link {
        width: 100%;
        max-width: 300px;
    }

    .category-content-cards.category-page {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    .category-content-cards.category-page .category-content-cards-card {
        width: 100%;
    }

    .category-slider {
        display: block;
        width: 100%;
    }

    .swiper-container.category-slider {
        height: 500px;
        position: relative;
    }

    .category-content-cards-card {
        width: 100% !important;
    }

    .category-content-cards-card-img-cont {
        width: 100%;
        /* height: 226px; */
    }

    #filter-form {
        .form-container-element {
            width: 50%;
        }

        .reset-filter {
            margin-top: 20px;
            width: 100%;
        }

        .apply-filter {
            margin-top: 10px;
            margin-left: 0;
            width: 100%;
            position: sticky;
            bottom: 35px;
            z-index: 5;
        }
    }
}

/* MAIN-CARDS */

.section-2 {
    margin-top: 48px;
}

.section-2-content {
    display: flex;
    justify-content: space-between;
    gap: 48px;
}

.section-2-content-kalkulyator {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 1px solid #d9d9d9;
    background-color: #fafaf9;
    border-radius: 20px;
    padding: 40px 40px 52px 40px;
    width: 49%;
}

.section-2-content-kalkulyator-head {
    color: #284080;
    font-size: 32px;
    font-weight: 800;
    line-height: 48px;
    margin-bottom: 32px;
}

.section-2-content-kalkulyator-button {
    padding: 14px 0;
    font-family: Mulish;
    font-size: 16px;
    font-weight: 800;
    line-height: 24px;
    text-align: center;
    color: #ffffff;
    background-color: #2a4b94;
    border-radius: 8px;
}

.section-2-content-kalkulyator-button:hover {
    transition: 0.5s;
    background-color: #284080;
}

.calculator-body {
    display: flex;
    gap: 32px;
    margin-bottom: 20px;
}

.calculator-body_left {
    width: 288px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.calculator-body_left-card {
    position: relative;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    padding: 14px 12px;
    background-color: #fff;
}

.calculator-body_left-card span {
    font-size: 15px;
    font-weight: 400;
    color: #7f7667;
}

.calculator-body_left-card input {
    display: inline-block;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
}

.calculator-body_right {
    width: 288px;
}

.calculator-body_right li:first-child {
    padding-top: 0;
}

.calculator-body_right select {
    width: 100%;
    background: #fff;
    border-radius: 8px;
    padding: 12px;
    height: 40px;
}

.calculator-body_right select option {
    font-size: 15px;
    font-weight: 500;
    line-height: 24px;
    color: #7f7667;
    padding: 14px 12px;
}

.calculator-body_right li {
    padding: 12px 0;
    display: flex;
    justify-content: space-between;
}

.calculator-body_right li:not(:last-child) {
    border-bottom: 1px solid #d9d9d9;
}

.calculator-body_right li span {
    font-size: 18px;
    font-weight: 400;
    color: #777777;
}

.calculator-foot button {
    width: 100%;
}

.section-2-content-reklam {
    width: 49%;
}

.section-2-content-reklam-img {
    width: 100%;
}

@media screen and (max-width: 767px) {
    .header{
        .container{
            padding: 0;
        }
    }

    .section-2-content {
        flex-direction: column;
        gap: 48px;
    }

    .section-2-content-reklam {
        width: 100%;
    }

    .section-2-content-kalkulyator {
        width: 100%;
        padding: 24px;
    }

    .calculator-body {
        flex-direction: column;
        width: 100%;
    }

    .calculator-body_left {
        width: 100%;
    }

    .page-head_left {
        li {
            &:first-child {
                display: none;
            }

            &:last-child {
                display: block !important;
            }
        }
    }

    #main-slider {
        max-width: 100%;
        max-height: 330px;

        .swiper-navigation {
            display: none !important;
        }

        .swiper-pagination {
            color: white !important;
            background-color: #000000;
            opacity: 0.7;
            display: flex !important;
            justify-content: center;
            width: 50px;
            left: 50%;
            translate: -50%;
            border-radius: 10px;
            padding: 5px;
        }

        .swiper-slide {
            .slide-background {
                display: none !important;
            }

            img {
                object-fit: cover !important;
                filter: none !important;
                height: 100%;
            }
        }
    }

    #slider-modal {
        justify-content: space-between !important;
        align-items: flex-start !important;

        .modal-head {
            .product-info {
                display: none !important;
            }

            .controller {
                width: 100%;
                justify-content: space-between;
                align-items: center;

                #open-hidden-info-modal {
                    display: none;
                }

                #close-modal {
                    order: 1;
                    z-index: 1;
                }

                .favorites-icon {
                    order: 3;
                    z-index: 1;
                }

                .modal-swiper-pagination {
                    order: 2;
                    display: flex !important;
                    width: auto !important;
                    color: #ffffff !important;
                }
            }
        }

        .sliders {
            padding: 0 !important;
            height: 80% !important;

            .modal-slider {
                width: 100% !important;
                height: 100% !important;

                .swiper-slide img {
                    width: 100% !important;
                }

                .swiper-navigation {
                    display: none !important;
                }
            }
        }

        .content {
            display: flex !important;
            width: 100%;
            color: #ffffff;
            padding: 0 15px 10px;
            align-items: center;
            justify-content: space-between;
            height: 100px;

            .product-info {
                display: flex;
                flex-direction: column;
                max-width: 80%;
            }

            #user-phone-mobile {
                /* align-self: flex-end; */
                border: 1px solid #3db460;
                border-radius: 50%;
                background-color: #3db460;
                width: 50px;
                height: 50px;
                display: flex;
                align-items: center;
                justify-content: center;
            }
        }
    }

    .custom-checkbox {
        display: block !important;
    }

    .breadcrumbs {
        display: none;
    }

    .breadcrumbs-mobile {
        display: flex !important;
        align-items: center;

        .traktor-head-ul-title {
            font-size: 13px;
            font-weight: 400;
        }

        .traktor-head-ul {
            gap: 0;

            li {
                padding: 0 4px;

                &:not(:last-child)::after {
                    content: "/";
                    color: #000000;
                    padding: 0 4px;
                    font-size: 13px;
                    font-weight: normal;
                }
            }
        }
    }

    /* .category-content-cards{
        row-gap: 16px;
        column-gap: 0;
        justify-content: space-between;

        .category-content-cards-card-link{
            width: 49%;

            .category-content-cards-card-title-cont{
                gap: 12px;
                padding: 16px 0 0;
            }
        }
    } */

    .nav-icons {
        #place-announcement {
            display: flex;
            padding: 6px 10px;
            font-size: 14px;
            gap: 3px;
        }
    }

    .category-content-cards-card {
        padding: 0;

        .category-content-cards-card-title-cont {
            padding: 16px;
        }
    }

    .search-component {
        display: none;
    }

    .category-filter_modal {
        padding: 0;

        .category-filter_modal-content {
            width: 100%;
            border-radius: 0;

            .category-filter_modal-content_foot {
                flex-direction: column;
                gap: 10px;

                button {
                    width: 100%;
                }
            }
        }
    }

    .form-container-div.contact {
        gap: 10px !important;
    }

    #order {
        span {
            display: none;
        }
    }

    .category-content-head-title-cont-writing {
        font-size: 19px;
    }

    .category-content-head-title-cont-number {
        font-size: 19px;
    }

    #language-web {
        display: none;
    }

    #language-mobile {
        position: relative;
        font-size: 18px;
        cursor: pointer;
        background-color: transparent !important;
        color: #000000;
        font-weight: bold;
        width: 50%;
        margin-inline: auto;
        text-align: center;

        &:visited{
            color: inherit;
        }
    }
}

/* STEPS */
.steps {
    margin: 24px 0;
}

.steps-content {
    background-color: #284080;
    border-radius: 20px;
    overflow: hidden;
}

.steps-content-main {
    padding: 32px 40px 2px 40px;
}

.steps-content-title {
    margin-bottom: 32px;
    font-size: 32px;
    font-weight: 800;
    line-height: 48px;
    color: #ffffff;
}

.steps-content-sec {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 57px;
    gap: 24px;
}

.steps-content-sec-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
}

.steps-content-sec-item-num {
    color: #ffffff;
    font-size: 32px;
    font-weight: 300;
    line-height: 120px;
}

.steps-content-sec-item-main {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 24px;
}

.steps-content-sec-item-main-text {
    font-size: 20px;
    font-weight: 800;
    line-height: 24px;
    color: #ffffff;
}

.steps-content-back-photo-img {
    width: 100%;
    margin-bottom: -4px;
}

@media screen and (max-width: 992px) {
    .steps-content-sec {
        flex-direction: column;
        align-items: start;
        padding: 0;
    }
}

.clients {
    margin-top: 40px;
    margin-bottom: 40px;
}

.clients-comments {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.clients-comments-left {
    width: 49%;
    position: relative;
    height: 400px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.clients-comments-left img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: 20px;
}

.clients-comments_left-head h2 {
    font-size: 32px;
    font-weight: 800;
    color: #fff;
    position: relative;
    z-index: 3;
}

.clients-comments_left-body {
    position: relative;
    z-index: 3;
}

.clients-comments_left-body h4 {
    font-size: 16px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 16px;
}

.clients-comments_left-body p {
    font-size: 24px;
    font-weight: 400;
    color: #fff;
}

.clients-comments-right {
    width: 49%;
    border-radius: 20px;
    background: linear-gradient(0deg, #ffffff, #ffffff);
    border: 1px solid #d9d9d9;
    padding: 40px;
}

.clients-comments-right_head h2 {
    font-size: 32px;
    font-weight: 800;
    line-height: 48px;
    color: #284080;
    margin-bottom: 16px;
}

.clients-comments-right_body .comments-slider {
    width: 100%;
    position: relative;
}

.comments-slider .swiper-pagination {
    top: 94%;
}

.comments-card {
    width: 100%;
    display: flex;
    gap: 40px;
    align-items: center;
    padding: 20px;
}

.comments-card_right h2 {
    font-size: 22px;
    font-weight: 600;
}

.comments-card_right p {
    font-size: 16px;
    font-weight: 400;
}

.comments-slider .swiper-pagination-bullet {
    border: 1px solid #284080;
    width: 6px !important;
    height: 6px !important;
    border-radius: 16px !important;
    background-color: #fff;
    opacity: 1 !important;
    transition: all 0.2s !important;
}

.comments-slider .swiper-pagination-bullet-active {
    width: 24px !important;
}

@media screen and (max-width: 992px) {
    .clients-comments {
        gap: 24px;
    }

    .clients-comments-left {
        width: 100%;
    }

    .clients-comments-right {
        width: 100%;
    }

    .comments-card_left {
        width: 100%;
    }

    .comments-card_right {
        width: 100%;
    }

    .comments-card {
        flex-wrap: wrap;
    }
}

/* marks */
.marks {
    border: 1px solid #d9d9d9;
    padding: 32px 40px;
    border-radius: 20px;
    margin-top: 80px;
}

.marks h2 {
    color: #284080;
    font-size: 32px;
    font-weight: 800;
    margin-bottom: 24px;
}

.marks .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background-color: transparent;
}

.marks-slider {
    position: relative;
}

.marks .swiper-container {
    height: 100px;
}

.marks .swiper-wrapper {
    height: auto !important;
}

.marks .swiper-pagination-bullet {
    border: 1px solid #284080;
    width: 6px !important;
    height: 6px !important;
    border-radius: 16px !important;
    background-color: #fff;
    opacity: 1 !important;
    transition: all 0.2s !important;
}

.marks .swiper-pagination-bullet-active {
    width: 24px !important;
}

/* CREATE */
#create-form,
#update-form {
    .form-container-div {
        .tractor-type_3 {
            height: auto !important;
            padding: 14px 32px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }
}

.create {
    padding-top: 48px;
}

.create-content {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
}

.create-content-main {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 40px;
    border: 1px solid #d9d9d9;
    border-radius: 20px;
    background-color: #f1eee9;
}

.create-content-main-cont {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.create-content-main-cont-item {
    width: calc((100% - 40px) / 2);
    background: linear-gradient(0deg, #fafaf9, #fafaf9);
    border-radius: 8px;
    padding-right: 12px;
}

.create-content-main-cont-item-select {
    width: 100%;
    padding: 14px 12px;
    background: transparent;
}

.create-content-main-cont-item-option {
    font-size: 15px;
    font-weight: 500;
    line-height: 24px;
    color: #7f7667;
    padding: 14px 12px;
}

/* CREATE */

/* FOOTER */

.footer {
    margin-top: 56px;
}

.footer-information {
    background-color: #f3f3f3;
    position: relative;
    padding-bottom: 80px;
}

.footer-information img {
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    object-fit: contain;
}

.footer-information-content {
    padding: 25px 50px;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 40px;
}

.footer-contact-content-writings {
    width: 100%;
}

.footer-information-content-item {
    gap: 6px;
}

.footer-information-content-item-head {
    font-size: 22px;
    font-weight: 800;
    line-height: 32px;
    letter-spacing: 0.5%;
    color: #313131;
}

.footer-information-content-item-link {
    font-size: 18px;
    font-weight: 400;
    line-height: 32px;
    letter-spacing: 0.5%;
    color: #313131;
}

.footer-foto-img {
    width: 100%;
    margin-bottom: -4px;
}

.footer-contact {
    background-color: #313131;
}

.footer-contact-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 42px 0 64px 0;
    gap: 92px;
}

.footer-contact-content-writings-ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
    margin-bottom: 20px;
}

.footer-contact-content-writings li,
.footer-contact-content-writings li a.nav-link {
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    line-height: 40px;
    color: #ffffff;
}

.footer-contact-content-writings-div {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-contact-content-writings-div-links {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 29px;
}

.footer-contact-content-writings-div-links-link {
    font-size: 13px;
    font-weight: 400;
    line-height: 24px;
    color: #ffffff;
}

.footer-contact-content-writings-div-icons {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
}

@media screen and (max-width: 992px) {
    .footer-information {
        padding-bottom: 40px;
    }

    .footer-information img {
        display: none;
    }

    .footer-information-content {
        flex-direction: column;
        justify-content: space-between;
        align-items: start;
        padding: 40px 16px 40px 16px;
    }

    .footer-contact {
        padding: 27px 0 16px 32px;
    }

    .footer-contact-content {
        flex-direction: column;
        align-items: start;
        gap: 32px;
    }

    .footer-contact-content-writings {
        gap: 32px;
    }

    .footer-contact-content-writings-ul {
        flex-direction: column;
        align-items: start;
        gap: 16px;
    }

    .footer-contact-content-writings-div {
        flex-direction: column;
        align-items: start;
        gap: 25px;
    }

    .footer-contact-content-writings-div-links {
        flex-direction: column;
        align-items: start;
        gap: 16px;
    }
}

/* FOOTER */

/* SELECT */
.select {
    padding: 32px 0 156px 0;
}

.breadcrumbs-mobile {
    display: none;
}

.select-content {
    border: 1px solid #d9d9d9;
    border-radius: 20px;
    padding: 32px 40px;

    .breadcrumbs {
        .traktor-head-ul {
            li {
                font-size: 10px;

                a {
                    font-size: 14px;
                }

                .traktor-head-ul-title1 {
                    font-size: 22px;
                }
            }
        }
    }
}

.select-content-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 48px;
}

.traktor-detail-body_head {
    display: flex;
    justify-content: space-between;
}

.traktor-detail-body_head .sliders {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#slides-list {
    max-width: 640px;
    height: auto !important;

    &::-webkit-scrollbar {
        height: 5px;
    }

    &::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 22px;
    }

    &::-webkit-scrollbar-thumb {
        background: #284080;
        border-radius: 2px;
    }

    &::-webkit-scrollbar-thumb:hover {
        background: #284080;
    }

    .swiper-slide {
        .count {
            position: absolute;
            inset: 0;
            background-color: #000000;
            color: #ffffff;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 12px;
            background: -webkit-gradient(
                linear,
                left bottom,
                left top,
                from(rgba(0, 0, 0, 0.51)),
                to(rgba(0, 0, 0, 0.51))
            );
            background: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.51), rgba(0, 0, 0, 0.51));
            background: linear-gradient(0deg, rgba(0, 0, 0, 0.51), rgba(0, 0, 0, 0.51));
        }

        img {
            object-fit: cover;
            height: 100%;
        }
    }
}

#main-slider {
    width: 640px;
    height: 480px;

    .swiper-pagination {
        display: none;
    }

    .swiper-slide {
        height: 100%;
        background-color: rgba(0, 0, 0, 0.9);

        .slide-background {
            width: 100%;
            height: 100%;
            background-position: center center;
            background-repeat: no-repeat;
            background-size: 150%;
            display: flex;
            -webkit-filter: blur(20px) brightness(0.6);
            filter: blur(20px) brightness(0.6);
        }

        img {
            object-fit: contain;
            position: absolute;
            inset: 0;
            max-width: 100%;
            max-height: 100%;
            filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.25));
        }
    }
}

.traktor-images {
    width: 100%;
    padding-bottom: 0 !important;

    &.main {
        position: relative;

        .swiper-slide {
            cursor: pointer;
        }

        .swiper-navigation {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;

            button {
                background-color: transparent;
                font-size: 20px;
                font-weight: bold;
                color: white;
                padding: 10px;
                transition: all 0.3s;
                position: absolute;
                top: 50%;
                transform: translate(0, -50%);
                z-index: 999;

                &.navigation-next {
                    right: 0;
                }

                &.navigation-prev {
                    left: 0;
                }

                &:hover {
                    opacity: 0.5;
                }
            }
        }
    }
}

.traktor-images.list {
    height: 70px !important;

    .swiper-wrapper {
        align-items: center;

        .swiper-slide {
            cursor: pointer;
        }
    }

    .swiper-slide {
        width: 70px !important;
        height: 50px !important;
    }
}

.traktor-images img {
    width: 100%;
    aspect-ratio: 1 !important;
}

.traktor-images .swiper-pagination-bullet {
    border: 1px solid #284080;
    background-color: #fff;
    width: 6px !important;
    height: 6px !important;
    border-radius: 16px !important;
    opacity: 1 !important;
    transition: all 0.2s !important;
}

.traktor-images .swiper-pagination-bullet-active {
    width: 24px !important;
}

.traktor-detail_info {
    width: 30%;
}

.traktor-detail_info-head {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
}

.traktor-detail_info .traktor-price span {
    font-size: 40px;
    font-weight: 700;
    color: #000000;
}

.traktor-detail_info .traktor-price2 span {
    font-size: 32px;
    font-weight: 500;
}

.traktor-price2 {
    width: 100%;
}

.traktor-detail_info-body {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 50px;
}

.traktor-detail_info-body li {
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 16px;
    background: #f3f3f3;
    border-radius: 8px;
}

.traktor-detail_info-body li span {
    font-size: 16px;
    font-weight: 400;
    color: #313131;
}

.traktor-detail_info-body li a {
    font-size: 16px;
    font-weight: 400;
    color: #313131;
    outline: none;
}

.traktor-detail_info-foot {
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.traktor-detail_info-foot button,
.traktor-detail_info-foot a {
    display: inline-block;
    width: 100%;
    padding: 14px 0;
    border: 1px solid #2a4b94;
    border-radius: 8px;
    text-align: center;
    color: #2a4b94;
    background: #fff;
    font-weight: 800;
    font-size: 16px;
}

.traktor-detail_main-char {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.traktor-detail_main-char .calculator {
    width: 30%;
    display: flex;
    flex-direction: column;
    border: 1px solid #e8e8e8;
    border-radius: 20px;
    background-color: #fafaf9;
    max-height: 800px;
    padding: 40px;

    #send {
        color: #ffffff;
        background-color: #284080;
        padding: 14px 32px;
        border: 1px solid #284080;
        border-radius: 8px;
        font-size: 16px;
        line-height: 24px;
        font-weight: 800;
    }
}

.traktor-detail_main-char .calculator h3 {
    color: #284080;
    font-size: 32px;
    font-weight: 800;
    line-height: 48px;
    margin-bottom: 36px;
}

.traktor-detail_main-char .calculator h4 {
    color: #313131;
    font-weight: 700;
    font-size: 22px;
    line-height: 24px;
    margin-bottom: 16px;
}

.traktor-detail_main-char .calculator .data-inputs {
    display: flex;
    flex-direction: column;
    row-gap: 16px;
    margin-bottom: 32px;
}

.traktor-detail_main-char .calculator .input-holder {
    display: flex;
    width: 100%;
    position: relative;
    flex-direction: column;

    input {
        border: 1px solid #e8e8e8;
        border-radius: 8px;
        font-size: 15px;
    }

    label {
        top: 2px;
    }
}

.traktor-detail_main-char .calculator .input-holder input[type="number"] {
    width: 100%;
    padding: 22px 12px 6px;
    border-radius: 8px;
}

.traktor-detail_main-char .calculator .input-holder select {
    width: 100%;
    padding: 14px;
    border-radius: 8px;
    color: #7f7667;
}

.traktor-detail_main-char .calculator .data-outputs {
    display: flex;
    flex-direction: column;
    margin-top: 16px;
    margin-bottom: 32px;

    .output {
        color: #777777;
        font-size: 18px;
        line-height: 24px;
        border-bottom: 1px solid #b3b3b3;
        padding: 16px 0;
        display: flex;
        justify-content: space-between;
    }
}

/* remove arrows from input[type="number"] */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

.traktor-detail_main-char .calculator .input-holder input[type="range"] {
    position: absolute;
    bottom: 0;
    -webkit-appearance: none;
    appearance: none;
    width: 100%;

    &:focus {
        outline: none;
    }

    &::-webkit-slider-runnable-track {
        width: 100%;
        height: 2px;
        cursor: pointer;
        background: #2fb4ff;
    }

    &::-webkit-slider-thumb {
        width: 14px;
        height: 14px;
        border-radius: 50%;
        border: 1px solid #ffffff;
        background: #2fb4ff;
        cursor: pointer;
        -webkit-appearance: none;
        margin-top: -6px;
    }
}

.traktor-detail_main-char .section-2-content-kalkulyator .calculator-body {
    flex-direction: column;
}

.traktor-detail_chars {
    /* width: 60%; */
    width: 640px;
}

.traktor-detail_chars ul li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
    font-weight: 500;
    font-size: 16px;
}

.traktor-detail_chars ul li:last-child {
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
}

.traktor-detail_chars ul li:not(:last-child) {
    border-bottom: 1px solid #77777769;
}

.traktor-detail_chars ul li span {
    width: 49%;
    text-align: left;
}

.traktor-detail_chars ul li:last-child span {
    width: auto !important;
}

.traktor-detail_chars ul:first-child {
    margin-bottom: 70px;
}

.common-traktors {
    padding: 32px;
    border-radius: 20px;
    border: 1px solid #d9d9d9;
    margin-top: 48px;
}

.common-traktors-head {
    display: flex;
    gap: 15px;
    align-items: center;
    margin-bottom: 24px;
}

.common-traktors-head span {
    font-size: 32px;
    font-weight: 300;
    color: #284080;
}

.common-traktors-cards {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.common-traktors-cards .category-content-cards-card {
    background: #fafaf9;
    padding: 16px;
}

.common-traktors-cards .category-content-cards-card .category-content-cards-card-title-cont {
    padding: 16px 0;
}

.common-traktors-card {
    background: #fafaf9;
    padding: 16px;
}

.common-traktors-card .common-traktors-card_head {
    width: 328px;
    height: 328px;
}

.common-traktors-card_head img {
    width: 100%;
    height: 100%;
}

.common-traktors-card_body h2 {
    margin-top: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.common-traktors-card_body h2 p {
    display: flex;
    gap: 8px;
    align-items: center;
    font-size: 18px;
    font-weight: 800;
}

.common-traktors-card_body .traktor-price {
    font-size: 26px;
    font-weight: 400;
    margin: 20px 0;
    color: #6d6d6c;
}

.common-traktors-card_body .traktor-year {
    font-size: 18px;
    font-weight: 400;
}

.common-traktors-foot {
    width: 100%;
    margin-top: 24px;
    display: flex;
    justify-content: center;
}

.common-traktors-foot button {
    display: inline-block;
    border: 1px solid #2a4b94;
    background: #fff;
    padding: 14px;
    width: 236px;
    font-size: 16px;
    font-weight: 800;
    color: #284080;
    text-align: center;
    border-radius: 8px;
}

@media screen and (max-width: 992px) {
    .traktor-detail-body_head {
        flex-wrap: wrap;
    }

    .traktor-detail-body_head .sliders {
        width: 100%;
    }

    .sliders .traktor-images.list {
        display: none;
    }

    .traktor-detail_info {
        width: 100%;
        margin-top: 40px;
    }

    .traktor-detail_main-char {
        flex-wrap: wrap;
        margin-top: 40px;
    }

    .traktor-detail_chars {
        width: 100%;
    }

    .traktor-detail_main-char .section-2-content-kalkulyator {
        margin-top: 40px;
        width: 100% !important;
    }

    .common-traktors-cards {
        gap: 30px;
    }

    .common-traktors-card {
        width: 100%;
    }
}

.traktor-head-select-logo {
    background-color: #f3f3f3;
    border-radius: 40px;
    padding: 5px 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

/* SELECT */

/* NEWS */

.news {
    padding-bottom: 156px;
    padding-top: 40px;
}

.news-content {
    border: 1px solid #d9d9d9;
    border-radius: 20px;
    padding: 32px 40px 56px 40px;
    display: flex;
    flex-direction: column;
}

.news-content-card-cont {
    display: flex;
    justify-content: center;
    align-items: start;
    gap: 32px;
    flex-wrap: wrap;
}

.news-content-card-cont-item {
    width: calc((100% - 70px) / 3);
    border: 1px solid #e8e8e8;
    border-radius: 6px;
    overflow: hidden;
}

.news-content-card-cont-item-foto {
    width: 100%;
    height: 232px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.news-content-card-cont-item-foto-img {
    height: 232px;
    width: 100%;
    object-fit: contain;
}

.news-content-card-cont-item-foto-img img {
    width: 100%;
    height: 100%;
}

.news-content-card-cont-item-text {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 24px;
    gap: 14px;
}

.news-content-card-cont-item-text-time {
    font-size: 11px;
    font-weight: 700;
    line-height: 12px;
    letter-spacing: 8%;
    color: #777777;
}

.news-content-card-cont-item-text-head {
    font-size: 18px;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: 1%;
    color: #232323;
}

.news-content-card-cont-item-text-p {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #232323;
    word-wrap: break-word;
}

.news-content-card-cont-item-text-link {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 1%;
    color: #777777;
}

.news-content-btn-cont {
    text-align: center;
    margin-top: 56px;
}

.news-content-btn-cont-btn,
.campaign-content-btn-cont-btn {
    background: #ffffff;
    padding: 14px 81px;
    color: #2a4b94;
    border: 1px solid #2a4b94;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 800;
    line-height: 24px;
}

.switch {
    display: flex;
    column-gap: 1px;
    align-items: center;
    background-color: #ffffff;
    border: 1px solid #2a4b94;
    border-radius: 6px;
    padding: 1px;
    overflow: hidden;
}

.switch-btn {
    border-radius: 5px;
    border: 1px solid transparent;
    color: #7f7667;
    background-color: #ffffff;
    padding: 0 24px;
    font-size: 14px;
    line-height: 24px;
    font-weight: 500;

    &.active {
        border-color: #2a4b94;
        background-color: #2a4b94;
        color: #ffffff;
    }
}

@media screen and (max-width: 992px) {
    .news > .container {
        padding: 0;
    }

    .news-content {
        border: none;
    }

    .news-content > .traktor-head {
        padding: 32px 16px;
    }

    .news-content-card-cont {
        flex-direction: column;
        align-items: start;
    }

    .news-content-card-cont-item {
        flex-direction: column;
        width: 100%;
        border: none;
    }

    .news-content-btn-cont {
        margin-top: 32px;
    }
}

/* News Inner */

.newsInner {
    margin: 50px 0;
}

.newsInner_content_bannerImage {
    margin-bottom: 24px;
}

.newsInner_content_bannerImage img {
    width: 100%;
}

.newsInner_content_main {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 20px 0;
}

.newsInner_content_main_left {
    width: 70%;
}

.newsInner_content_main_right {
    width: 28%;
}

.newsInner_content_main_right img {
    width: 100%;
}

.newsInner_content_main_date {
    font-size: 11px;
    font-weight: 700;
    line-height: 12px;
    letter-spacing: 0.08em;
    text-align: left;
    color: #777777;
    margin-bottom: 11px;
}

.newsInner_content_main_title {
    font-size: 22px;
    font-weight: 700;
    line-height: 32px;
    letter-spacing: 0.01em;
    text-align: left;
    color: #232323;
    margin-bottom: 32px;
}

.newsInner_content_main_text {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0.01em;
    text-align: left;
    color: #232323;
}

/* FAQ */
.faq {
    padding-bottom: 156px;
    padding-top: 40px;
}

.faq-content {
    padding: 32px 40px 72px 40px;
    border: 1px solid #d9d9d9;
    border-radius: 20px;
}

.faq-content-main {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.faq-content-main-accordion {
    border-bottom: 1px solid #000000;
}

.faq-content-main-accordion:last-child {
    border-bottom: none;
}

.faq-content-main-accordion-header {
    font-size: 22px;
    font-weight: 700;
    background-color: #ffffff;
    color: #232323;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: left;
    transition: 0.4s;
}

.accordion-icon {
    font-size: 40px;
    font-weight: 800;
    color: #2a4b94;
    margin-left: 20px;
}

.faq-content-main-accordion-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

.faq-content-main-accordion-panel-answer {
    font-size: 18px;
    line-height: 24px;
    font-weight: 400;
    color: #232323;
    margin-bottom: 8px;
}

@media screen and (max-width: 992px) {
    .faq-content {
        border: none;
        border-radius: 0;
        padding: 0 16px;
    }
}

/* FAQ */

/*CONTACT*/
.contacts {
    padding-bottom: 156px;
    padding-top: 40px;
    position: relative;
}

.contacts-content {
    padding: 32px 40px 72px 40px;
    border: 1px solid #d9d9d9;
    border-radius: 20px;
}

.contacts-content-main {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.contacts-content-main-about-sec {
    padding-bottom: 32px;
    border-bottom: 1px solid #000000;
}

.contacts-content-main-title {
    font-size: 22px;
    font-weight: 700;
    line-height: 32px;
    letter-spacing: 1%;
    color: #232323;
    margin-bottom: 20px;
}

.contacts-content-main-about-sec-text {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 1%;
    color: #232323;
    margin-top: 16px;
}

.contacts-content-main-contact-sec {
    gap: 16px;
    padding: 32px 0;
    border-bottom: 1px solid #000000;
}

.contacts-content-main-contact-sec-texts {
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: 32px;
    margin-top: 16px;
}

.contacts-content-main-contact-sec-texts-item {
    gap: 16px;
}

.contacts-content-main-contact-sec-texts-item-title {
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    color: #232323;
}

.contacts-content-main-contact-sec-texts-item-text {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #555555;
}

.contacts-content-main-contact-sec-texts-icons img {
    margin-left: 20px;
    cursor: pointer;
}

.contacts-content-main-form-sec {
    padding: 32px 0;
}

.contacts-content-main-form-sec-input-cont {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 24px;
    gap: 16px;
}

.contacts-content-main-form-sec-input-cont div {
    width: 100%;
}

.contacts-content-main-form-sec-input-cont textarea {
    width: 456px;
    height: 128px;
}

.contacts-content-main-form-sec-item {
    padding: 16px 13px;
    border: 1px solid #6f7979;
    border-radius: 4px;
}

.contacts-content-main-form-sec-item::placeholder {
    color: #6b6b6b;
    font-size: 17px;
    line-height: 32px;
    font-weight: 400;
}

.formBtn {
    padding: 12px 32.5px;
    background-color: #2a4b94;
    border-radius: 4px;
}

@media screen and (max-width: 992px) {
    .contacts-content {
        padding: 32px 16px;
        border: none;
    }

    .contacts-content-main-contact-sec-texts {
        flex-direction: column;
    }

    .contacts-content-main-form-sec-input-cont {
        flex-direction: column;
        align-items: unset;
    }
}

/*CONTACT*/

/*CAMPAIGN*/

.campaign {
    padding-bottom: 156px;
    padding-top: 40px;
}

.campaign-content {
    padding: 32px 40px 72px 40px;
    border: 1px solid #d9d9d9;
    border-radius: 20px;
}

.campaign-content-cards-sec {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 32px;
}

.campaign-content-cards-sec-card {
    width: 100%;
    display: flex;
    border: 1px solid #e8e8e8;
    border-radius: 6px;
}

.campaign-content-cards-sec-card-foto {
    width: 341px;
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
}

.campaign-content-cards-sec-card-foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.campaign-content-cards-sec-card-text-sec {
    padding: 24px;
    gap: 15px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.campaign-content-cards-sec-card-text-sec-time {
    font-size: 11px;
    font-weight: 700;
    line-height: 12px;
    letter-spacing: 8%;
    color: #2abdbd;
}

.campaign-content-cards-sec-card-text-sec-head {
    font-size: 18px;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: 1%;
    color: #232323;
}

.campaign-content-cards-sec-card-text-sec-text {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 1%;
    color: #232323;
}

.campaign-content-cards-sec-card-text-sec-link {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 1%;
    color: #777777;
}

@media screen and (max-width: 992px) {
    .campaign-content {
        border: none;
        padding: 0 16px;
    }

    .campaign-content-cards-sec-card {
        flex-direction: column;
    }
}

/*CAMPAIGN*/

/* credit and leasing */
.credit-leasing_page {
    margin: 40px 0 150px 0;
    border: 1px solid #d9d9d9;
    border-radius: 20px;
}

.page-head {
    padding: 40px 40px 0 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
}

.page-head_left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.page-head_left:first-child a {
    font-size: 16px;
    font-weight: 400;
    color: #313131;
}

.page-head_left p {
    display: flex;
    gap: 16px;
    align-items: center;
}

.elements-count {
    font-size: 32px;
    font-weight: 300;
    color: #284080;
}

.page-head_right {
    display: flex;
    border-radius: 5px;
    border: 1px solid #2a4b94;
    padding: 2px;
}

.page-head_right span {
    font-size: 14px;
    font-weight: 500;
    color: #7f7667;
    background: #fff;
    padding: 8px 24px;
    text-align: center;
    cursor: pointer;
}

.page-head_right span.active {
    background: linear-gradient(0deg, #2a4b94, #2a4b94);
    color: #fff;
    border-radius: 8px;
}

.leasing-about {
    padding: 0 40px 0 40px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.leasing-about-element {
    width: 47%;
}

.leasing-about-element p {
    font-size: 16px;
    font-weight: 400;
    color: #232323;
    margin-bottom: 20px;
}

.leasing-banner {
    padding: 40px;
    background: #f3f3f3;
    margin-bottom: 48px;
}

.leasing-banner h2 {
    font-size: 40px;
    font-weight: 800;
    color: #232323;
    margin-bottom: 32px;
}

.leasing-banner ul {
    display: flex;
    gap: 58px;
    flex-wrap: wrap;
}

.leasing-banner ul li {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.leasing-banner ul li span:first-child {
    font-size: 16px;
    font-weight: 400;
    color: #232323;
}

.leasing-banner ul li span:nth-child(2) {
    display: flex;
    gap: 24px;
    align-items: center;
}

.leasing-banner ul li span.opportunity-value {
    font-size: 56px;
    font-weight: 900;
    color: #2a4b94;
}

.leasing-terms {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.leasing-term_element {
    width: 49%;
    margin-bottom: 40px;
    padding: 0 40px 0 40px;
}

.leasing-term_element h2 {
    font-size: 32px;
    font-weight: 800;
    color: #232323;
}

.leasing-term_element p {
    font-size: 16px;
    font-weight: 400;
    color: #232323;
    margin: 24px 0;
}

.leasing-term_element ul {
    padding-left: 20px;
}

.leasing-term_element ul li {
    list-style: disc;
    margin: 15px 0;
    font-size: 16px;
    font-weight: 400;
    color: #232323;
}

.leasing-term_element:last-child {
    width: 52%;
}

.leasing-term_element:last-child h2 {
    font-size: 22px;
    font-weight: 800;
    color: #232323;
    margin-bottom: 16px;
}

.leasing-term_element:last-child ol {
    padding-left: 20px;
}

.leasing-term_element:last-child ol li {
    font-size: 16px;
    font-weight: 400;
    color: #232323;
    list-style: decimal;
    margin: 15px 0;
}

.leasing-terms_2 {
    padding: 0 40px 0 40px;
}

.leasing-terms_2 h2 {
    font-size: 32px;
    font-weight: 800;
    color: #232323;
    margin-bottom: 25px;
}

.leasing-terms_2 ul li {
    display: flex;
    justify-content: space-between;
    padding: 14px 0;
}

.leasing-terms_2 ul li:not(:last-child) {
    border-bottom: 0.5px solid #00000063;
}

.leasing-terms_2 ul li span {
    width: 49%;
    font-size: 16px;
    font-weight: 400;
    color: #232323;
}

.leasing-advantages {
    padding: 0 40px 40px 40px;
}

.leasing-advantages h2 {
    font-size: 32px;
    font-weight: 800;
    color: #232323;
    margin: 30px 0;
}

.leasing-advantages ul {
    padding-left: 20px;
    width: 48%;
}

.leasing-advantages ul li {
    margin: 15px 0;
    list-style: disc;
    font-size: 16px;
    font-weight: 400;
    color: #232323;
}

.leasing-advantages_elements {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

@media screen and (max-width: 992px) {
    .page-head {
        flex-direction: column;
        gap: 25px;
    }

    .page-head_left {
        width: 100%;
    }

    .page-head_right {
        width: 100%;
    }

    .leasing-about-element {
        width: 100%;
        margin-bottom: 20px;
    }

    .leasing-opportunities li {
        width: 100%;
    }

    .leasing-term_element {
        width: 100% !important;
    }

    .leasing-terms_2 ul li {
        flex-direction: column;
        gap: 10px;
    }

    .leasing-advantages_elements ul {
        width: 100%;
    }
}

/* privacy page  */
.privacy_page {
    margin: 40px 0 150px 0;
    border: 1px solid #d9d9d9;
    border-radius: 20px;
    padding: 40px;
}

.privacy_page .page-head {
    padding: 0;
}

.medium-header {
    font-size: 22px;
    font-weight: 700;
    color: #232323;
    margin: 20px 0;
}

.small-header {
    font-size: 18px;
    font-weight: 700;
    color: #232323;
    margin: 20px 0;
}

.privacy_page p {
    font-size: 16px;
    font-weight: 500;
    color: #232323;
    margin: 20px 0;
}

/*SELECT*/

.select-main {
    width: 1124px;
    height: 1720px;
    top: 120px;
    border: 1px solid #d9d9d9;
    border-radius: 20px;
    margin-left: 190px;
    font-family: "Mulish", sans-serif;
}

/*---select-nav---*/

.select-main-nav {
    width: 1144px;
    height: 48px;
    margin-top: 32px;
    margin-left: 40px;
    display: flex;
}

.select-main-nav-main {
    display: flex;
    justify-content: space-between;
    width: 90%;
}

.select-main-nav-main-left {
    display: flex;
}

.select-main-nav-main-left a {
    color: #000000;
    margin-top: 5px;
    padding-left: 20px;
}

.select-main-nav-main-left-1 {
    font-family: "Mulish", sans-serif;
    color: #284080;
}

.select-main-nav-main-left-2 {
    color: #284080;
    font-weight: 300;
}

/*---select-nav---*/

/*---select-contact---*/

.select-main-contact-main {
    display: flex;
}

.select-main-contact-main-left {
    width: 50%;
    padding-top: 16px;
    padding-left: 16px;
    width: 660px;
    height: 701px;
}

.select-main-contact-main-left-slider {
    width: 692px;
    height: 789px;
}

.select-main-contact-main-right-text-left h2 {
    padding: 20px 0 35px 0;
}

.select-main-contact-main-right {
    padding-left: 30px;
    padding-top: 10px;
}

.select-main-contact-main-right-inputs {
    margin-top: 10px;
    display: flex;
    padding: 12px 16px 12px 16px;
    width: 412px;
    height: 48px;
    border: 1px solid #f3f3f3;
    background-color: #f3f3f3;
    gap: 16px;
    border-radius: 8px;
}

.select-main-contact-main-right-button {
    margin-top: 30px;
}

.select-main-contact-main-right-buttons {
    width: 412px;
    height: 52px;
    padding: 12px 32px 12px 32px;
    border: 1px solid #2a4b94;
    gap: 10px;
    border-radius: 8px;
    margin-top: 10px;
    font-weight: 800;
    font-family: "Mulish", sans-serif;
    color: #2a4b94;
    font-size: 16px;
    text-align: center;
    line-height: 24px;
}

.select-main-contact-main-right-calculator {
    width: 412px;
    height: 720px;

    border: 1px solid #d9d9d9;
    border-radius: 20px;
    background-color: #d9d9d9;
}

.select-main-contact-main-left-about {
    width: 692px;
    height: 336px;
    padding-top: 15px;
    display: block;
}

.select-main-contact-main-left-about-text-left {
    width: 660px;
}

.select-main-contact-main-left-about-text-left-texts {
    border-bottom: 0.5px solid #777777;
    display: flex;
    justify-content: space-between;
    line-height: 24px;
    padding: 10px 10px 0 10px;
}

.select-main-contact-main-left-about-text-left-texts-p1 {
    width: 281px;
}

.select-main-contact-main-left-about-text-left-texts-p2 {
    width: 339px;
}

.select-main-contact-main-left-about-text-left-bottom {
    padding-top: 86px;
}

/*---select-contact---*/

.select-main-contact-main-oxsar-traktorlar {
    width: 1124px;
    height: 712px;
    padding: 32px 40px 32px 40px;
    gap: 24px;
    border: 1px solid #d9d9d9;
    border-radius: 20px;
    margin-left: 190px;
    font-family: "Mulish", sans-serif;
    margin-top: 120px;
}

/*---oxsar-traktorlar---*/

/*---oxsar-traktorlar---*/

/*---select----*/

/*swiper-slider*/
swiper-container {
    width: 660px;
    height: 731px;
}

swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 660px;
    height: 701px;
}

swiper-slide img {
    display: block;
    width: 660px;
    height: 701px;
    object-fit: cover;
}

/*swiper-slider*/

.comparison-page {
    padding: 40px;
    border-radius: 20px;
    border: 1px solid #d9d9d9;
    margin-top: 40px;
}

.comparison-page .comparison-head {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 40px;
}

.comparison-head li a {
    font-size: 16px;
    font-weight: 400;
    color: #313131;
    text-decoration: none;
}

.comparison-head li:last-child {
    display: flex;
    align-items: center;
    gap: 16px;
}

.comparison-head li span {
    font-size: 32px;
    font-weight: 400;
    color: #284080;
}

.comparison-head li .comparison-traktor_name {
    border-bottom: 1px solid #284080;
}

.comparison-body {
    display: flex;
    justify-content: space-between;
}

.comparison-item {
    width: 47%;
}

.comparison-item-foot {
    margin-top: 32px;
    display: flex;
    justify-content: center;
}

.comparison-item-foot button {
    font-size: 16px;
    font-weight: 800;
    color: #284080;
    align-items: center;
    border: 1px solid #2a4b94;
    border-radius: 8px;
    background: #fff;
    padding: 14px 0;
    width: 236px;
}

.comparison-item-head h2 {
    margin: 20px 0;
}

.comparison-item-head h2 .traktor-name {
    font-size: 32px;
    font-weight: 800;
    color: #284080;
}

.comparison-item-head h2 span {
    font-size: 32px;
    font-weight: 300;
    color: #284080;
}

.comparison-item-head-price-actions {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.comparison-item-head-price-actions h3 {
    font-size: 40px;
    font-weight: 700;
}

.comparison-item-head-price-actions .traktor-head-select-logo {
    width: 122px;
}

.comparison-item-actions {
    display: flex;
    gap: 16px;
    align-items: center;
}

.comparison-item-head-price-actions h4 {
    width: 100%;
    font-size: 32px;
    font-weight: 500;
}

.comparison-body .traktor-images {
    width: 100%;
    height: 500px;
}

.authorization {
    display: flex;
    align-items: center;
    justify-content: center;
}

.authorization-content {
    display: flex;
    margin-top: 60px;
}

.authorization-left {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #284080;
    width: 350px;
    border-radius: 20px 0 0 20px;
}

.authorization-right {
    padding: 66px 88px 40px 40px;
    background: #f3f3f3;
    border-radius: 0 20px 20px 0;
}

.authorization-headText {
    font-size: 32px;
    font-weight: 800;
    color: #284080;
    margin-bottom: 16px;
}

.authorization-input {
    width: 100%;
    position: relative;
    margin: 16px 0;
}

.authorization-input label {
    position: absolute;
    top: 4px;
    left: 12px;
    font-size: 13px;
    font-weight: 500;
    color: #7f7667;
}

.authorization-input input {
    width: 100%;
    padding: 22px 12px 7px 12px;
    font-size: 15px;
    font-weight: 500;
    color: #313131;
    border-radius: 8px;
    border: 1px solid #e8e8e8;
    outline: none;
}

.see_password,
.see_password_confirm {
    position: absolute;
    right: 12px;
    top: 27%;
    cursor: pointer;
}

.error-icon {
    display: none;
}

.has-error input {
    border: 1px solid #ff5f2d;
}

.has-error .error-hint {
    display: inline;
}

.has-error .see_password,
.has-error .see_password_confirm {
    right: 34px;
}

.has-error .error-icon {
    display: inline-block;
    position: absolute;
    right: 12px;
    top: 20%;
    cursor: pointer;

    &.preload {
        z-index: 100;
        top: 35%;
        display: none;
    }
}

.authorization-checkbox {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 16px 0;
}

.authorization-checkbox label {
    font-size: 14px;
    font-weight: 400;
    color: #313131;
}

.authorization-checkbox label span {
    font-weight: 700;
}

.authorization-submit {
    margin-top: 40px;
}

.authorization-submit button {
    display: inline-block;
    width: 100%;
    padding: 14px 0;
    text-align: center;
    background: #284080;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 800;
    color: #fff;
}

.authorization-links {
    margin-top: 32px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.authorization-links li {
    font-size: 15px;
    color: #2a4b94;
    font-weight: 400;
}

.authorization-links li a {
    text-decoration: none;
    font-weight: 700;
    color: #2a4b94;

    &:visited{
        color: inherit;
    }
}

.confirm-modal {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    background-color: #00000034;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.confirm-modal_content {
    width: 40%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px;
    padding: 40px;
    background: #f3f3f3;
    border-radius: 20px;
    position: relative;
}

.confirm-modal.active {
    display: flex;
}

.confirm-modal_content h3 {
    font-weight: 800;
    font-size: 22px;
    color: #284080;
}

.confirm-modal_content p {
    font-size: 15px;
    font-weight: 400;
    color: #2a4b94;
}

.close-confirm_modal {
    position: absolute;
    right: 20px;
    top: 20px;
    cursor: pointer;
}

@media screen and (max-width: 962px) {
    .authorization-content {
        margin-top: 0;
        width: 100%;
        height: 100%;
        flex-direction: column;
    }

    .authorization-left {
        width: 100%;
        height: 275px;
        border-radius: 0;
    }

    .authorization-right {
        border-radius: 0;
    }
}

.user-module_head {
    display: flex;
    justify-content: center;
    margin: 32px 0;
}

.user-module_head_content {
    display: flex;
}

.user-module_head_content a {
    font-size: 22px;
    font-weight: 500;
    color: #2a4b94;
    border: 1px solid #2a4b94;
    padding: 8px 36px;
    cursor: pointer;
    transition: 0.4s;
    text-decoration: none;
}

.user-module_head_content a:hover {
    background: #2a4b94;
    color: #fff;
}

.user-module_head_content a.active {
    background: #2a4b94;
    color: #fff;
}

.user-module_head_content li:first-child a {
    border-radius: 64px 0 0 64px;
}

.user-module_head_content li:last-child a {
    border-radius: 0 64px 64px 0;
}

.user-module-content {
    padding: 40px;
    border: 1px solid #d9d9d9;
    border-radius: 20px;
}

.user-module-page-head_right {
    display: flex;
    gap: 24px;
}

.new-add {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    padding: 8px 16px;
    background: #2a4b94;
    border-radius: 4px;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
}

.user-module-cards {
    position: relative;
}

.user-module-card {
    border: 1px solid #d1d1d1;
    padding: 16px 32px;
    border-radius: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.user-module-card_left {
    display: flex;
    align-items: center;
    gap: 32px;
}

.user-module-card_date {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.user-module-card_views {
    display: flex;
    align-items: center;
    gap: 8px;
}

.user-module-card_views span {
    font-size: 14px;
    font-weight: 400;
    color: #284080;
}

.user-module-card_date .add-expire_date {
    display: inline-block;
    font-size: 14px;
    font-weight: 400;
    color: #000000;
}

.user-module-card_date .add-expire_duration {
    color: #777777;
    font-size: 14px;
    font-weight: 400;
}

.user-module-card_date .add-expire_duration.little-time {
    color: #ff5f2d;
}

.add-used_traktor {
    display: none;
}

.add-used_traktor.active {
    display: inline-block;
}

.user-module-card_img {
    width: 152px;
    height: 152px;
}

.user-module-card_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.user-module-card_info .traktor-name {
    font-size: 18px;
    font-weight: 800;
    color: #000000;
}

.user-module-card_info .traktor-price {
    font-size: 26px;
    font-weight: 400;
    color: #666666;
    margin: 10px 0;
}

.user-module-card_info .traktor-year {
    font-size: 18px;
    font-weight: 400;
    color: #000000;
}

.user-module-card_right {
    display: flex;
    gap: 24px;
}

.user-module-card_right span {
    cursor: pointer;
}

.add-modal {
    position: fixed;
    top: 0;
    left: 0;
    display: none;
    justify-content: center;
    align-items: center;
    background-color: #00000034;
    width: 100%;
    height: 100vh;
    z-index: 1000;
}

.add-modal.active {
    display: flex;
}

.add-modal-content {
    padding: 35px;
    width: 70%;
    border-radius: 20px;
    background: #fff;
}

.add-modal-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.add-modal-body p {
    margin: 20px 0;
    font-size: 18px;
    font-weight: 600;
    color: #313131;
}

.add-modal-foot {
    display: flex;
    justify-content: space-between;
}

.add-modal-foot button {
    display: inline-block;
    width: 49%;
    border-radius: 8px;
    text-align: center;
    padding: 16px 0;
    font-size: 16px;
    font-weight: 800;
    outline: none;
}

.add-modal-foot .cancel-delete {
    color: #284080;
    border: 1px solid #2a4b94;
    background: #fff;
}

.add-modal-foot .submit-delete {
    background: #f4364c;
    color: #fff;
}

.add-modal-foot .submit-update {
    background: #2a4b94;
    color: #fff;
}

.add-modal-body_inputs {
    display: flex;
    gap: 24px;
    margin: 24px 0;
    flex-wrap: wrap;
}

.add-modal-body_inputs input {
    padding: 12px 14px;
    font-size: 15px;
    font-weight: 500;
    color: #7f7667;
    border-radius: 8px;
    border: 1px solid #e8e8e8;
}

#cities,
#cities-home,
#cities-filter{
    display: none;
}

.new-add_content {
    padding: 40px 0;

    .custom-select,
    .custom-input {
        padding-bottom: 0;
    }

    .choices {
        max-height: 53px;
        height: 53px;

        .choices__inner {
            padding-bottom: 0 !important;
        }
    }

    .choices__input {
        font-weight: 500;
        height: 0;
    }

    .choices__list--dropdown {
        z-index: 2 !important;
    }
}

.new-add_content .head-text {
    margin-bottom: 24px;
}

.form-container {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

.form-container-div {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.form-container-div.margin-top {
    margin-top: 30px;
    gap: 24px;
}

.form-container-div.contact {
    gap: 2%;
    justify-content: flex-start;
}

.form-container-div.contact .form-container-element_middle.personal_info {
    width: 76%;
}

.form-container-element_large {
    width: 100%;
}

.form-container-element_middle {
    display: flex;
    width: 49%;
    position: relative;
}

.form-container-element_col3 {
    display: flex;
    width: 32%;
}

.form-container-element_small {
    display: flex;
    width: 24%;
    position: relative;
    flex-direction: column;
}

.form-container-element_small .note {
    position: absolute;
    font-size: 14px;
    bottom: -45px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 100%;
}

.form-container-div.tractor_supplies {
    justify-content: flex-start;
    gap: 16px;
}

.form-container-element_large input,
.form-container-element_large textarea {
    width: 100%;
}

.form-container-element_middle .custom-input {
    width: 100%;
}

.personal_info .custom-input {
    padding-top: 24px;
    border-radius: 8px;
}

.form-container-element_small label {
    position: absolute;
    left: 12px;
    top: 15px;
    font-size: 14px;
    font-weight: 500;
    color: #777777;
    z-index: 1;
    transition: all 0.3s;
}

label.small {
    top: 0;
    left: 12px;
    font-size: 13px;
    transition: all 0.3s;
    width: 100%;
}

label.multiselect {
    width: 100%;
    height: 100%;
}

.form-container-element_small .custom-input,
.form-container-element_small select {
    height: 53px;
    width: 100%;

    option[value="-1"] {
        display: none;
    }
}

.form-container-element_col3 .custom-input,
.form-container-element_col3 select {
    height: 53px;
    width: 100%;
}

.form-container-element_col3 .custom-input-first,
.form-container-element_col3 .custom-input-second {
    width: 50%;
}

.form-container-element_small .custom-input-first,
.form-container-element_small .custom-input-second {
    width: 50%;
}

.form-container-buttons {
    width: 100%;
    margin-top: 16px;
}

.create-traktor {
    display: inline-block;
    width: 312px;
    text-align: center;
    padding: 14px 0;
    background: #2a4b94;
    color: #fff;
    border-radius: 8px;
    outline: none;
    font-size: 16px;
    font-weight: 800;
}

.search-tractor {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 312px;
    width: 100%;
    text-align: center;
    padding: 14px 0;
    background: #2a4b94;
    color: #fff;
    border-radius: 8px;
    outline: none;
    font-size: 16px;
    font-weight: 800;
}

.search-tractor-text {
    margin-right: 20px;
}

.addition-search {
    display: inline-block;
    width: 312px;
    text-align: center;
    padding: 14px 0;
    border: 2px solid #284080;
    background: #f7f5f2;
    color: #284080;
    border-radius: 8px;
    outline: none;
    font-size: 16px;
    font-weight: 800;
}

.personal_info-content {
    padding: 40px;
    border: 1px solid #d9d9d9;
    border-radius: 20px;
}

.personal_info-content .page-head,
.packages-head_content .page-head {
    padding: 0;
}

.packages {
    padding-bottom: 60px;
}

.packages-head_content {
    padding: 40px;
    border: 1px solid #d9d9d9;
    border-radius: 20px;
    margin-bottom: 48px;
}

.package-foot {
    margin-top: 36px;
    display: flex;
    justify-content: space-between;
}

.active_package-info {
    display: flex;
    gap: 24px;
}

.active_package-info p {
    font-size: 22px;
    font-weight: 500;
    color: #2a4b94;
}

.active_package-info p span {
    font-weight: 700;
}

.package-foot button {
    background: #2a4b94;
    border-radius: 8px;
    width: 196px;
    text-align: center;
    padding: 16px 0;
    font-size: 16px;
    font-weight: 800;
    color: #fff;
}

.package-cards {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.package-card {
    width: 31%;
}

.package-card_head {
    width: 100%;
    height: 240px;
    border-radius: 20px;
    border: 1px solid #d9d9d9;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 32px;
}

.package-card_head .package_type {
    font-size: 32px;
    font-weight: 800;
    color: #fff;
    z-index: 2;
}

.package-card_head .package_duration {
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    z-index: 2;
}

.package-card_head .package_price {
    width: 214px;
    height: 214px;
    position: absolute;
    right: -30px;
    bottom: -30px;
    border-radius: 50%;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 72px;
    color: #284080;
    font-weight: 400;
}

.package-card_head .package_price.first {
    background: #ff9c00;
}

.package-card_head .package_price.second {
    background: #ffb800;
}

.package-card_head .package_price.third {
    color: #fff;
    background: #2f80ed;
}

.package-card_head.first {
    background: linear-gradient(0deg, #2f80ed, #2f80ed), linear-gradient(0deg, #d9d9d9, #d9d9d9);
}

.package-card_head.first::after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    background-image: url("../images/package1.png");
    background-repeat: no-repeat;
    background-position: right;
}

.package-card_head.second {
    background: linear-gradient(0deg, #726f62, #726f62), linear-gradient(0deg, #d9d9d9, #d9d9d9);
}

.package-card_head.second::after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    background-image: url("../images/package2.png");
    background-repeat: no-repeat;
    background-position: right;
}

.package-card_head.third {
    background: linear-gradient(0deg, #b4291a, #b4291a), linear-gradient(0deg, #d9d9d9, #d9d9d9);
}

.package-card_head.third::after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    background-image: url("../images/package2.png");
    background-repeat: no-repeat;
    background-position: right;
}

.package-card_body {
    margin-top: 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 372px;
}

.package-card_body li {
    padding: 24px 0;
}

.package-card_body li:not(:last-child) {
    border-bottom: 1px solid #4a4a4a;
}

.package-card_body li span {
    font-size: 22px;
    font-weight: 500;
    color: #284080;
}

.package-card_foot {
    margin-top: 44px;
}

.package-card_foot button {
    display: inline-block;
    padding: 14px 0;
    color: #2a4b94;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 800;
    border: 1px solid #2a4b94;
    width: 100%;
    text-align: center;
    background: #fff;
}

@media (max-width: 992px) {
    .user-module_head_content {
        flex-wrap: nowrap;
        overflow: auto;
        gap: 40px;
        align-items: center;
        padding: 20px 0;
    }

    .user-module_head_content a {
        border: none;
        font-size: 14px;
        padding: 0;
        white-space: nowrap;
    }

    .user-module_head_content li a.active {
        border-radius: 64px;
        padding: 10px 16px;
    }

    .user-module-content {
        padding: 0 16px;
    }

    .user-module-content .page-head {
        padding: 40px 0px;
        margin-bottom: 24px;
    }

    .user-module-content .page-head_left {
        justify-content: flex-start;
    }

    .user-module-content .page-head_left li:nth-child(2),
    .user-module-content .page-head_left li:nth-child(3) {
        display: none;
    }

    .user-module-page-head_right {
        width: 100%;
        flex-direction: column;
    }

    .filter-button {
        width: max-content;
    }

    .user-module-card {
        flex-direction: column;
        gap: 25px;
    }

    .user-module-card_left {
        flex-direction: column;
        width: 100%;
    }

    .user-module-card_img {
        width: 100%;
        height: 280px;
    }

    .user-module-card_info {
        width: 100%;
    }

    .user-module-card_date {
        width: 100%;
    }

    .user-module-card_views {
        width: 100%;
    }

    .add-modal .head-text {
        font-size: 32px;
    }

    .add-modal-foot {
        flex-direction: column;
        gap: 15px;
    }

    .add-modal-foot button {
        width: 100%;
    }

    .add-modal-body_inputs {
        flex-direction: column;
    }

    .add-modal-body_inputs input {
        width: 100%;
    }

    .form-container-div {
        gap: 16px;
    }

    .form-container-element_middle {
        width: 100% !important;
    }

    .form-container-element_col3 {
        width: 100%;
    }

    .form-container-element_small {
        display: flex;
        width: 100%;
    }

    .form-container-element_small.empty {
        display: none;
    }

    .create-traktor {
        width: 100%;
    }

    .personal_info-content .page-head_left li:nth-child(2),
    .personal_info-content .page-head_left li:nth-child(3) {
        display: none;
    }

    .package-foot {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .active_package-info {
        flex-direction: column;
    }

    .packages .page-head_left li:nth-child(2),
    .packages .page-head_left li:nth-child(3) {
        display: none;
    }

    .package-cards {
        gap: 20px;
    }

    .package-card {
        width: 100%;
    }

    .package-card_body {
        height: auto;
    }

    .package-card_foot {
        margin-top: 20px;
    }

    .package-card_head .package_type {
        font-size: 25px;
    }

    .package-card_head .package_duration {
        font-size: 19px;
    }

    .package-card_head .package_price {
        font-size: 57px;
    }
}

main {
    margin-top: 32px;
}

.search-component {
    padding: 28px 32px;
    border: 1px solid #d9d9d9;
    background: #f7f5f2;
    border-radius: 20px;

    #search {
        .form-container-element {
            position: relative;
            width: 50%;

            label {
                position: absolute;
                left: 12px;
                top: 15px;
                font-size: 14px;
                font-weight: 500;
                color: #777777;
                z-index: 1;
                transition: all 0.3s;

                &.small {
                    top: 0;
                    left: 12px;
                    font-size: 13px;
                    transition: all 0.3s;
                }
            }

            input {
                width: 100%;
                background-color: #fafaf9;
            }
        }

        .form-container-element_small {
            flex-direction: row;

            .choices {
                width: 100%;
                max-height: 52px;

                .choices__inner {
                    height: 52px;

                    /* overflow-x: auto; */

                    &::-webkit-scrollbar {
                        height: 5px;
                    }

                    &::-webkit-scrollbar-track {
                        background: #f1f1f1;
                        border-radius: 22px;
                    }

                    &::-webkit-scrollbar-thumb {
                        background: #284080;
                        border-radius: 2px;
                    }

                    &::-webkit-scrollbar-thumb:hover {
                        background: #284080;
                    }

                    /* this code creates ellipsis effect */

                    .choices__list.choices__list--multiple {
                        display: inline !important;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        width: 100%;
                        overflow: hidden;
                        margin-top: 4px;
                    }

                    .choices__input {
                        display: none;
                    }
                }

                .choices__list--dropdown {
                    .choices__item.is-selected {
                        background-color: #2a4b94e3 !important;
                        color: #ffffff !important;
                    }
                }
            }
        }
    }
}

.search-component .type-buttons {
    height: auto;
    display: flex;
}

.search-component .custom-input {
    background: #fff;
}

@media screen and (max-width: 768px) {
}

@media screen and (max-width: 962px) {
    .tractor-type {
        font-size: 12px;
        padding: 16px 0;
    }

    .custom-input.custom-input-first,
    .custom-input.custom-input-first::placeholder {
        font-size: 12px;
    }

    .custom-input.custom-input-second,
    .custom-input.custom-input-second::placeholder {
        font-size: 12px;
    }

    .custom-select {
        font-size: 12px;
    }

    .search-tractor {
        font-size: 12px;
    }

    .addition-search {
        font-size: 12px;
    }

    .header-swiper .swiper-button-next:after {
        top: 100%;
    }

    .form-container {
        gap: 10px;
    }
}

/* fixes  */

@media screen and (max-width: 962px) {
    .form-container-buttons {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .confirm-modal img {
        width: 60px;
        height: 60px;
    }

    .confirm-modal h3 {
        font-size: 18px;
    }
}

@media screen and (max-width: 962px) {
    .tractor-type {
        font-size: 12px;
        padding: 16px 0;
    }

    .custom-input.custom-input-first,
    .custom-input.custom-input-first::placeholder {
        font-size: 12px;
    }

    .custom-input.custom-input-second,
    .custom-input.custom-input-second::placeholder {
        font-size: 12px;
    }

    .custom-select {
        font-size: 12px;
    }

    .search-tractor {
        font-size: 12px;
    }

    .addition-search {
        font-size: 12px;
    }

    .header-swiper .swiper-button-next:after {
        top: 100%;
    }

    .form-container {
        gap: 10px;
    }
}

/* fixes  */

@media screen and (max-width: 962px) {
    .form-container-buttons {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .confirm-modal img {
        width: 60px;
        height: 60px;
    }

    .confirm-modal h3 {
        font-size: 18px;
    }

    .form-container-element_col3 {
        width: 100%;
    }

    .scroll {
        max-height: 130vh;
    }

    .reklam-left {
        display: none;
    }

    .reklam-right {
        display: none;
    }

    .container {
        max-width: 100%;
    }

    .home-container {
        max-width: 95%;
    }

    .close-add_modal {
        display: none;
    }

    .add-modal .head-text {
        font-size: 28px;
    }

    .swiper-button-next,
    .swiper-button-prev {
        display: none !important;
    }

    .campaign-content-cards-sec-card-foto {
        width: 100%;
    }
}

.hidden {
    overflow: hidden;
    position: fixed;
    inset: 0;
}

.scroll {
    overflow-y: scroll;
    max-height: 100dvh;
}

.favorites {
    padding-bottom: 156px;
    padding-top: 40px;
}

.favorites-content {
    padding: 32px 40px;
    border: 1px solid #d9d9d9;
    border-radius: 20px;
}

.favorite-text:hover,
.non-favorite-text:hover {
    text-decoration: underline;
}

.favorites-icon .favorite,
.favorites-icon .favorite-text {
    display: none;
}

.favorites-icon.active .non-favorite,
.favorites-icon.active .non-favorite-text {
    display: none;
}

.favorites-icon.active .favorite,
.favorites-icon.active .favorite-text {
    display: inline;
}

.favorites-icon-single-product {
    height: 40px;
    width: 40px;
    border: 1px solid #d1d1d1;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.favorites-content li {
    margin: 0 !important;
}

.favorites-count {
    margin-left: 16px;
    font-size: 32px;
    font-weight: 300;
    line-height: 48px;
    color: #284080;
}

.traktor-detail_wishlist {
    display: flex;
    align-items: center;
}

.product-verification-explanation {
    margin-top: 16px;
}

.error-page {
    width: 100%;
    max-width: 650px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-top: 136px;
    margin-left: auto;
    margin-right: auto;
}

.error-page .error-page--img-box {
    width: 171px;
    height: 122px;
}

.error-page--img-box img {
    width: 100%;
    max-width: 100%;
}

.error-page--title {
    color: #b4291a;
    font-size: 32px;
    line-height: 48px;
    font-weight: 800;
    margin-top: 21px;
    margin-bottom: 18px;
}

.error-page--text {
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    text-align: center;
    color: #232323;
    margin-bottom: 40px;
}

.error-page--control {
    display: flex;
}

.error-page--control a {
    padding: 16px 49px;
    background-color: #2a4b94;
    color: #ffffff;
    font-size: 16px;
    line-height: 24px;
    font-weight: 800;
    border-radius: 8px;
}

#open-hidden-info,
#open-hidden-info-modal,
#hidden-info-modal,
#hidden-info-modal > div,
#hidden-info > div {
    display: flex;
    align-items: center;
    gap: 16px;
}

#open-hidden-info-modal {
    background-color: #3db460;
    width: 220px;
    border-radius: 7px;
    height: 40px;
    justify-content: center;

    #user-phone {
        color: #ffffff;
        background-color: transparent;
    }
}

#hidden-info-modal {
    width: 220px;
    height: 40px;

    #user-phone-hidden {
        color: #ffffff;
        background-color: transparent;
    }
}

#notification {
    display: flex;
    gap: 24px;
    align-items: center;
    margin-top: 10px;
}

#notification .img-box img {
    width: 60px;
}

#notification .text-box {
    display: flex;
    flex-direction: column;
    justify-content: space-around;

    h3 {
        color: #284080;
        font-size: 24px;
        font-weight: 800;
    }

    span {
        color: #ff5b5c;
        font-size: 16px;
        font-weight: 600;
    }
}

#slider-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    width: 100%;
    height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-color: rgba(0, 0, 0);

    .modal-head {
        display: flex;
        width: 100%;
        justify-content: space-between;
        align-items: center;
        background-color: rgba(255, 255, 255, 0.1);
        height: 60px;
        padding: 0 15px;

        .product-info {
            color: #ffffff;
            font-size: 16px;
            font-weight: bold;
            display: flex;
            align-items: center;

            span:nth-child(2) {
                padding: 0 20px;
                font-size: 20px;
            }
        }

        .controller {
            display: flex;
            gap: 50px;

            #close-modal {
                display: flex;
                padding: 10px;
                background-color: transparent;
            }

            .modal-swiper-pagination {
                display: none;
            }

            .favorites-trigger {
                display: flex;
                align-items: center;
                gap: 10px;
                color: #ffffff;
                cursor: pointer;
            }
        }
    }

    .sliders {
        width: 100%;
        height: calc(100% - 60px);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 15px;

        .modal-slider {
            width: 60%;
            height: 80%;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-block: auto;

            .swiper-navigation {
                width: 100%;
                display: flex;
                justify-content: space-between;
                align-items: center;

                button {
                    background-color: transparent;
                    font-size: 20px;
                    font-weight: bold;
                    color: white;
                    padding: 10px;
                    transition: all 0.3s;
                    position: absolute;
                    top: 50%;
                    transform: translate(0, -50%);
                    z-index: 999;

                    &.navigation-next {
                        right: 0;
                    }

                    &.navigation-prev {
                        left: 0;
                    }

                    &:hover {
                        opacity: 0.5;
                    }
                }
            }

            .swiper-slide {
                display: flex;
                align-items: center;
                justify-content: center;
                background-color: #000000;
                overflow: hidden;

                img {
                    object-fit: contain;
                    width: inherit;
                    height: inherit;
                }
            }
        }

        #modal-images-list {
            height: 80px;
            overflow-x: auto;
            height: auto !important;
            padding-bottom: 5px !important;

            &::-webkit-scrollbar {
                height: 5px;
            }

            &::-webkit-scrollbar-track {
                background: #f1f1f1;
                border-radius: 22px;
            }

            &::-webkit-scrollbar-thumb {
                background: #284080;
                border-radius: 2px;
            }

            &::-webkit-scrollbar-thumb:hover {
                background: #284080;
            }

            .swiper-wrapper {
                justify-content: center;

                .swiper-slide {
                    img {
                        height: 100%;
                        object-fit: cover;
                    }
                }
            }
        }
    }

    .content {
        display: none;
    }
}

.product-not-visible-pending {
    background: #fdac41 !important;
    color: white !important;
}

.product-not-visible-rejected {
    background: #ff5b5c !important;
    color: white !important;
}

.product-not-visible-future-date {
    background: #00cfdd !important;
    color: white !important;
}

.product-not-visible-expired {
    background: #656565 !important;
    color: white !important;
}

.tractor-statistics {
    margin: 15px 0;

    ul {
        margin: 0;
        padding: 0;
        list-style: none;

        li {
            display: -webkit-inline-box;
            display: -ms-inline-flexbox;
            display: inline-flex;
            position: relative;
            padding: 0 10px;
        }

        li:is(:first-child) {
            display: -webkit-inline-box;
            display: -ms-inline-flexbox;
            display: inline-flex;
            position: relative;
            padding-left: 0;
        }

        li:not(:first-child)::before {
            content: "";
            position: absolute;
            left: 0;
            top: 50%;
            width: 3px;
            height: 3px;
            border-radius: 50%;
            background-color: #8d94ad;
            -webkit-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
        }
    }

    span {
        color: #313131;
        font-size: 15px;
        line-height: 18px;
    }
}

/* Responsive */
@media screen and (max-width: 992px) {
    main {
        margin-top: 0;
    }

    #calculator {
        width: 100%;
        padding: 30px;
    }

    .select {
        padding: 0;
    }

    .traktor-detail_chars ul li:last-child {
        flex-direction: column;
        align-items: flex-start;
        row-gap: 10px;

        span:last-child {
            width: 100%;
        }
    }

    .select-content {
        padding: 16px 10px;
    }

    .news {
        padding: 0;
    }

    .category-content-cards-card-img-cont-img {
        object-fit: cover;
        height: auto;
    }

    .error-page {
        margin-top: 50px;
    }

    .error-page--title {
        text-align: center;
        margin-top: 0;
        font-size: 28px;
    }

    .error-page--text {
        text-align: center;
    }

    .error-page--control {
        margin-bottom: 25px;
    }

    .contacts {
        padding: 0;
    }

    #burger-menu-btn {
        display: flex !important;
        background-color: transparent;
        outline: none;
    }

    #menu-mobile {
        display: flex;
        flex-direction: column;
        gap: 10px;
        position: absolute;
        background-color: #f8f8f8;
        z-index: 100500;
        inset: 0;
        top: 76px;
        left: 1500px;
        border-top: 1px solid #2a4b94;
        transition: all 0.3s;
        padding: 25px;
    }

    #menu-mobile.active {
        display: flex;
        left: 0;
        transition: all 0.3s;
    }

    #menu-mobile .nav-links-mobile {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        gap: 10px;

        &:last-child {
            li:last-child {
                margin-top: 30px;
            }
        }
    }

    body,
    html {
        overflow-x: hidden;
    }

    body.menu-open,
    html.menu-open {
        overflow: hidden !important;
    }

    .confirm-modal_content {
        width: 80%;
    }

    .authorization {
        width: 100%;
    }

    .authorization-right {
        padding: 40px;
    }

    .footer-contact-content-writings-div-links-link:first-child {
        order: 1;
    }

    .form-container-element_small .note {
        bottom: -25px;
    }

    .tractor-statistics {
        margin-bottom: 0;
        margin-top: 20px;

        ul {
            li {
                display: block !important;
                padding: 0;
            }

            li:not(:first-child)::before {
                content: none;
            }
        }
    }

    .favorite-text,
    .non-favorite-text {
        display: none !important;
    }
}