÷html,
body {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.for-header-margin {
    margin-top: 100px;
}

@media (max-width:991px){
    .for-header-margin {
        margin-top: 90px;
    }
}

header {
    position: fixed;
    z-index: 20;
    width: 100%;
    background: #FFFFFF;
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.12);
    height: 100px;
}

.navbar-toggler{
    position: absolute;
    left: 10px;
    height: 80px;
    border: none;
    border-radius: 0;
}

.navbar-toggler:focus{
    box-shadow: none;
}

    header nav {
        height: 100px;
    }

    header .navbar-light .navbar-nav .nav-link {
        font-size: 18px;
    }

    .navbar-main-href{
        width: 89%;
        justify-content: start;
    }

    @media (max-width:991px){
        header{
            height: 80px!important;
        }
        header nav{
            height: 80px!important;
        }
        header .navbar-light .navbar-nav .nav-link {
            width: 100%;
        }
        .navbar-href-content{
            gap: 0px!important;
            width: 100%!important;
        }
        .offcanvas-navbar-items{
            display: block!important;
        }
        .offcanvas-body{
            flex-direction: column-reverse!important;
            justify-content: start;
        }
    }

    @media (min-width:992px){
        header .navbar-light .navbar-nav .nav-item img{
            display: none;
        }
    }

    header .navbar-light .navbar-nav .nav-item img{
        width: 24px;
        height: 24px;
        margin-right: 8px;
        align-self: center;
    }

    @media (min-width:992px) and (max-width:1200px){
        .menu-right{
            position: absolute;
            right: 60px;
            top: 4px;
        }
    }
/* 1201px*/
    @media (min-width:992px){
        .menu-right{
            position: relative;
            right: -70px;
            top: 4px;
        }

        .menu-user{
            position: relative;
            right: -50px;
            top: 18px;
        }
    }

    @media (min-width:992px){
        .nav-link-help{
            font-size: 16px!important;
        }

        .offcanvas-navbar-items{
            border-bottom: 1px solid gray;
            width: calc(100% - 150px);
        }
    }

    .offcanvas-navbar-items{
        display: flex;
    }

    .navbar-href-content{
        gap: 20px;
    }

    header .dropdown-menu {
        border-radius: 12px;
        box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.12);
        border: none;
    }

    header .menu-right {
        align-items: center;
    }

            header .menu-right .menu-contact a {
                font-weight: 500;
                font-size: 18px;
                line-height: 20px;
                color: black;
                text-decoration: none;
            }

            header .menu-right .menu-contact:hover {
                text-decoration: underline;
            }

        header .menu-right .menu-user img {
            width: 30px;
        }

        header .menu-user-mobile{
            display: none;
        }

        header .menu-right a,
        header .menu-right .menu-user {
            margin-left: 30px;
        }

        header .menu-right .cart,
        header .menu-right .profile  {
            background: none;
            border: none;
            padding: 0;
        }

            header .menu-right .cart .cart-items-counter {
                position: absolute;
                transform: translate(90%, -190%);
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: center;
                min-width: 20px;
                height: 20px;
                padding-left: 4px;
                padding-right: 4px;
                border-radius: 50px;
                font-size: 12px;
                color: #fff;
                background: #3797e5;
            }

@media (max-width:991px){

    .dropdown-item{
        height: 60px;
        border-bottom: 1px solid black;
        padding-left: 20px;
        align-content: center;
    }

    header .dropdown-menu {
        box-shadow: none;
        border: none;
        border-radius: 0px;
        padding: 0;
        font-size: 18px;
    }

    header .dropdown-menu .dropdown-divider {
        width: 50%;
    }

    header .navbar-light .navbar-nav .nav-item{
        width: 100%;
    }

    header .navbar-light .navbar-nav .nav-item:hover {
        background-color: whitesmoke;
    }

    header .navbar-light .navbar-nav .nav-link {
        color: #000;
        height: 60px;
        display: flex;
        align-items: center;
    }

    header .navbar-light .navbar-nav .nav-link:hover{
        color: #000;
    }

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

        header .menu-right .menu-contact {
            display: flex;
            flex-wrap: wrap;
            height: 60px;
            align-content: center;
            width: 96%;
            border-bottom: 1px solid darkgray;
        }

    header .menu-right .menu-contact a{
        margin-left: 33px;
        width: 100%;
    }
    header .menu-right .menu-user{
        display: none;
        height: 60px;
        border-bottom: 1px solid black;
        margin-left: 0px!important;
        width: 96%;
    }

    header .menu-user-mobile{
        display: block!important;
        position: absolute;
        right: 25px;
    }

    .cart-mobile,
    .contact-mobile,
    .user-mobile{
        background: none;
        border: none;
        padding: 0;
    }

    .cart-mobile img,
    .contact-mobile img{
        width: 30px;
    }

    header .cart-items-counter-mobile {
        position: absolute;
        transform: translate(90%, -190%);
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        min-width: 20px;
        height: 20px;
        padding-left: 4px;
        padding-right: 4px;
        border-radius: 50px;
        font-size: 12px;
        color: #fff;
        background: #3797e5;
    }


        header .menu-right .menu-user .cart{
            margin-left: 20px;
            width: 100%;
            height: 100%;
            text-align: start;
        }

        header .menu-right .menu-user .cart img {
            width: 35px;
        }

    .offcanvas-body .nav-item{
        border-bottom: 1px solid darkgray;
    }

    .cart-container .cart-wrapper .cart-holder .cart-content .cart-footer .order-container #make-order{
        padding: 30px !important;
        justify-content: center;
        text-align: center;
    }

    .cart-container .cart-wrapper .cart-holder .cart-content .cart-footer .order-container .cart-price {
        text-align: center;
        white-space: nowrap;
    }

    .cart-container .cart-wrapper .cart-holder .cart-content .cart-footer #comeback{
        padding: 0 !important;
    }

    .cart-container .cart-wrapper .cart-holder .cart-content .cart-footer .order-container {
        justify-content: space-between !important;
        width: 100%;
    }

    .cart-container .cart-wrapper .cart-holder .cart-content .itemstobuy-container .item-cont .item-to-buy .itb-container .itb-title-prop {
        gap: 10px;
    }
}

@media (max-width:991px){
    .navbar .container-xxl{
        justify-content: center!important;
    }
}

@media (max-width:450px){
    .navbar .container-xxl{
        justify-content: start!important;
        margin-left: 55px;
    }
}

@media (max-width:340px){
    .navbar .container-xxl .navbar-brand{
        display: none;
    }
}

.home-banner {
    padding-top: 60px;
}

    .home-banner .swiper-container {
        aspect-ratio: 1032/400;
        width: 80%;
        height: auto;
        border-radius: 12px;
        user-select: none;
    }

    .home-banner .block {
        position: relative;
        height: 400px;
        width: 100%;
        overflow: hidden;
    }

        .home-banner .block img {
            position: absolute;
            top: 0;
            right: 0;
            height: auto;
            width: inherit;
        }

.top-products .products-title,
.new-products .products-title,
.all-products .products-title {
    margin-top: 30px;
    margin-bottom: 10px;
    text-align: center;
}

@media (max-width:1000px){
    .all-products .products-wrapper {
        justify-content: center !important;
    }

    .top-products .products-title,
    .new-products .products-title {
        font-size: 32px;
        font-weight: 600;
        border-bottom: 1px solid darkgray;
        padding-bottom: 10px;
    }
}

@media (max-width:385px){
    .top-products .products-wrapper,
    .new-products .products-wrapper,
    .all-products .products-wrapper {
        gap: 10px!important;
    }
}

.top-products .products-wrapper,
.new-products .products-wrapper,
.all-products .products-wrapper {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    justify-items: center;
    gap: 8px;
    margin: 8px 0px;
}

@media (min-width:1200px){
    .top-products .products-wrapper,
    .new-products .products-wrapper{
        grid-template-columns: repeat(4, 1fr)!important;
    }
}


@media (max-width:1199px){
    .top-products .products-wrapper,
    .new-products .products-wrapper,
    .all-products .products-wrapper {
        grid-template-columns: repeat(4, 1fr);        
    }
}

@media (max-width:767px){
    .top-products .products-wrapper,
    .new-products .products-wrapper,
    .all-products .products-wrapper {
        grid-template-columns: repeat(2, 1fr);        
    }
}

@media (hover:hover){
    .top-products .products-wrapper .product:hover,
    .new-products .products-wrapper .product:hover,
    .all-products .products-wrapper .product:hover {
        scale: 1.03;
    }
    .top-products .products-wrapper .product .name:hover,
    .new-products .products-wrapper .product .name:hover,
    .all-products .products-wrapper .product .name:hover {
        color: #ffb23e;
    }
    .top-products .products-wrapper .product .buy-btn-div .buy:hover,
    .new-products .products-wrapper .product .buy-btn-div .buy:hover,
    .all-products .products-wrapper .product .buy-btn-div .buy:hover {
        box-shadow: inset 0px 0px 60px rgba(0, 0, 0, 0.15);
    }

    .top-products .products-wrapper .product:hover .buy-btn-div .buy,
    .new-products .products-wrapper .product:hover .buy-btn-div .buy,
    .all-products .products-wrapper .product:hover .buy-btn-div .buy {
        opacity: 1;
    }
}

@media (hover:none){
    .top-products .products-wrapper .product .buy-btn-div .buy,
    .new-products .products-wrapper .product .buy-btn-div .buy,
    .all-products .products-wrapper .product .buy-btn-div .buy {        
        opacity: 1 !important;
    }

    .top-products .products-wrapper .product,
    .new-products .products-wrapper .product,
    .all-products .products-wrapper .product {
        display: flex;
        flex-direction: column;
        max-width: 230px !important;
        margin: 0px !important;
        text-align: center;
        border-radius: 5px;
    }
}

    .top-products .products-wrapper .product,
    .new-products .products-wrapper .product,
    .all-products .products-wrapper .product {
        display: flex;
        flex-direction: column;
        max-width: 200px;
        width: 100%;
        text-align: center;
        border-radius: 4px;
        /* box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.12); */
        border: 1px solid lightgray;
    }

        .top-products .products-wrapper .product .img img,
        .new-products .products-wrapper .product .img img,
        .all-products .products-wrapper .product .img img {
            height: 160px;
            width: 100%;
            margin-bottom: 15px;
            margin-top: 15px;
            object-fit: contain;
        }

        .top-products .products-wrapper .product .name,
        .new-products .products-wrapper .product .name,
        .all-products .products-wrapper .product .name {
            margin-left: 5px;
            margin-right: 5px;
            display: inline;
            height: 40px;
            font-weight: 500;
            font-size: 14px;
            color: #3797e5;
            text-decoration: none;
            overflow: hidden;
        }

            

        .top-products .products-wrapper .product .availability,
        .new-products .products-wrapper .product .availability,
        .all-products .products-wrapper .product .availability {
            margin-top: 10px;
            font-size: 14px;
        }

        .top-products .products-wrapper .product .price,
        .new-products .products-wrapper .product .price,
        .all-products .products-wrapper .product .price {
            font-weight: 700;
            font-size: 16px;
        }

        .top-products .products-wrapper .product .old-price,
        .new-products .products-wrapper .product .old-price,
        .all-products .products-wrapper .product .old-price {
            margin-top: 5px;
            font-weight: 400;
            font-size: 14px;
            line-height: 15px;
            height: 15px;
            color: #a6a5a5;
            text-decoration: line-through;
        }

        .top-products .products-wrapper .product .buy-btn-div .buy,
        .new-products .products-wrapper .product .buy-btn-div .buy,
        .all-products .products-wrapper .product .buy-btn-div .buy {
            align-self: center;
            margin: 10px;
            display: flex;
            justify-content: center;
            text-decoration: none;
            width: 100%;
            height: 40px;
            background: #3797e5;
            border-radius: 4px;
            line-height: 38px;
            font-weight: 500;
            font-size: 15px;
            color: white;
        }

        .buy-btn-div{
            display: flex;
        }

        .top-products .products-wrapper .product .buy-btn-div .buy-cart,
        .new-products .products-wrapper .product .buy-btn-div .buy-cart,
        .all-products .products-wrapper .product .buy-btn-div .buy-cart{
            align-content: center;
            margin: 10px;
            display: none;
        }

           

.top-products .products-wrapper,
.new-products .products-wrapper {
    justify-content: space-evenly !important;
}

    .top-products .products-wrapper .product,
    .new-products .products-wrapper .product {
        max-width: 230px;
        flex-basis: auto !important;
    }

footer {
    background: black;
    padding: 20px 0 10px 0;
    flex: 0 0 auto;
    margin-top: 30px;
}

    footer .footer-wrapper {
        display: flex;
        justify-content: space-between;
        color: white;
        flex-wrap: wrap;
    }

        footer .footer-wrapper .footer-up {
            margin-bottom: 30px;
        }

            footer .footer-wrapper .footer-up a img {
                width: 160px;
                margin-bottom: 20px;
            }

            footer .footer-wrapper .footer-up a .social-logo {
                width: 60px;
                height: 60px;
                margin-right: 10px;
            }

            footer .footer-wrapper .footer-up .catalog ul {
                list-style: none;
            }

                footer .footer-wrapper .footer-up .catalog ul li {
                    padding-top: 6px;
                }

            footer .footer-wrapper .footer-up .catalog li::before {
                content: "•";
            }

            footer .footer-wrapper .footer-up .catalog a {
                text-decoration: none;
                color: white;
            }

                footer .footer-wrapper .footer-up .catalog a:hover {
                    color: #ffb23e;
                    text-decoration: underline;
                }

            footer .footer-wrapper .footer-up .tel-number {
                margin-top: 10px;
                margin-bottom: 20px;
            }

            footer .footer-wrapper .footer-up a {
                text-decoration: none;
                color: white;
            }

                footer .footer-wrapper .footer-up a:hover {
                    text-decoration: underline;
                    color: #ffb23e;
                }

.delivery-content {
    flex: 1 0 auto;
    margin-left: 50px;
    margin-right: 50px;
}

    .delivery-content .content-wrapper h2 {
        margin-top: 20px;
        margin-bottom: 30px;
        margin-left: 5px;
    }

    .delivery-content .content-wrapper ul {
        margin-left: 15px;
        padding: 0;
    }

        .delivery-content .content-wrapper ul li {
            padding-left: 15px;
            list-style: none;
            position: relative;
            margin-top: 15px;
        }

            .delivery-content .content-wrapper ul li::before {
                content: "";
                width: 8px;
                height: 8px;
                border-radius: 50%;
                background-color: #ffb23e;
                position: absolute;
                left: 0;
                top: 50%;
                transform: translateY(-50%);
            }

.payment-delivery {
    padding-top: 10px;
}

    .payment-delivery .payment-delivery__item {
        padding: 30px;
    }

        .payment-delivery .payment-delivery__item .row {
            align-items: center;
        }

        .payment-delivery .payment-delivery__item .row img{
            height: 100px;
            width: 100px;
            object-fit: contain;
        }

        .payment-delivery .payment-delivery__item:nth-child(odd) {
            background-color: rgba(0, 0, 0, 0.05);
        }

.warranty-content,
.delivery-content {
    margin-left: 50px;
    margin-right: 50px;
}

@media (max-width:991px){
    .warranty-content {
        margin-left: 0px!important;
        margin-right: 0px!important;
    }

    .delivery-content {
        margin-left: 0px!important;
        margin-right: 0px!important;
}
}

    .warranty-content h1,
    .delivery-content h1 {
        margin-top: 20px;
        /* margin-bottom: 30px; */
        margin-left: 15px;
    }

    .warranty-content p,
    .delivery-content p {
        margin-bottom: 10px;
        font-size: 16px;
        font-weight: 400;
    }

.all-products .raw {
    display: flex;
}

.container {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

.filters {
    width: auto;
    padding: 0;
    margin: 0;
    margin-top: 5px;
    float: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;
}

.catalog-mobile-container{
    display: none;
}

@media (max-width:991px) {
    .container .raw {
        margin-top: 0px !important;
    }

    .filters {
        margin-top: 0px !important;
        background-color: #f7f7f7;
        padding-top: 20px;
    }

    .filters.active{
        display: flex;
    }

    .filters.disabled{
        display: none;
    }

        .filters .filters-form-wrapper {
            display: flex;
            flex-wrap: wrap;
            flex-direction: row;
            gap: 20px;
            justify-content: center;
        }

    .catalog-mobile-container {
        display: flex;
        justify-content: center;
    }

        .catalog-mobile-container p {
            font-size: 30px;
            font-weight: 600;
            margin: 0;
        }

        .catalog-mobile-container button {
            border: 1px solid lightgray;
            background: none;
            border-radius: 4px;
            padding: 2px 5px;
            width: 100%;
            height: 40px;
            color: black;
        }

        .catalog-mobile-container img {
            height: 40px;
            width: 40px;
        }

    .filters .filters-form-wrapper .submit-buton {
        position: sticky;
        left: 0;
        top: 80%;
        margin-bottom: 40px;
        display: flex !important;
        align-items: center;
        justify-content: center;
        border: none;
        background: #ffb23e;
        border-radius: 8px;
        height: 50px;
        font-size: 16px;
        font-weight: 500;
    }

    .sort-by{
        justify-content: center;
    }

    .sort-wrapper {
        background: none!important;
    }
}

    .filters .filter-param {
        display: flex;
        flex-direction: column;
        margin-bottom: 30px;
    }

        .filters .filters-form-wrapper .submit-buton {
            display: none;
        }

        .filters .filter-param .has-toggle {
            padding: 7px 0;
            display: flex;
            align-items: center;
            width: 100%;
            flex-direction: row;
            justify-content: flex-start;
        }

            .filters .filter-param .has-toggle input {
                margin-right: 10px;
                filter: hue-rotate(155deg);
                scale: 1.3;
            }

            .filters .filter-param .has-toggle .filter-litle-count {
                color: darkgray;
                font-size: 12px;
                padding-left: 6px;
            }

.container .model-name {
    margin-bottom: 20px;
    font-size: 36px;
    font-weight: 600;
}

.container .raw {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 50px;
}

@media (max-width:991px){

    .img-container .litle-images{
        display: none!important;
    }

    .main-image{
        display: none!important;
    }

    .home-banner-article{
        display: block!important;
    }

    .for-header-margin-article{
        margin-top: 20px!important;
    }
}

.swiper-container-artecle{
    aspect-ratio: unset!important;
}

.home-banner-article{
    display: none;
}

.swiper-slide-img{
    height: inherit!important;
    object-fit: contain;
}

.swiper-slide-article{
    height: 280px!important;
}

.swiper-pagination-article{
    position: unset!important;
}

    .container .raw .img-container {
        display: flex;
        width: 100%;
    }

    .container .raw .litle-images {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 630px;
    }

        .container .raw .litle-images .scroll-mask {
            height: 490px;
            overflow: hidden;
        }

        .container .raw .litle-images .litle-img-scroll-container {
            gap: 30px;
            display: flex;
            flex-direction: column;
            transition: transform 0.3s ease-in-out;
        }

            .container .raw .litle-images .litle-img-scroll-container .thumb-img {
                border: 1px solid transparent;
                padding: 2px;
                cursor: pointer;
                height: 100px;
                width: 100px;
                object-fit: contain;
            }

            .container .raw .litle-images .litle-img-scroll-container .active {
                border: 1px solid #ffb23e;
                border-radius: 5px;
            }

            .container .raw .litle-images .litle-img-scroll-container .thumb-img:hover {
                border: 1px solid #ffb23e;
                border-radius: 5px;
            }

        .container .raw .litle-images .thumb-slider {
            width: 100px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

            .container .raw .litle-images .thumb-slider .thumb-slider-btn {
                display: inline-block;
                height: 20px;
                width: 20px;
                border: none;
                cursor: pointer;
                z-index: 1;
                text-align: center;
                background: transparent;
            }

                .container .raw .litle-images .thumb-slider .thumb-slider-btn::before {
                    content: "";
                    display: inline-block;
                    width: 14px;
                    height: 14px;
                    border-right: 2px solid #3797e5;
                    border-bottom: 2px solid #3797e5;
                }

            .container .raw .litle-images .thumb-slider .disabled::before {
                border-color: gray;
            }

        .container .raw .litle-images .prev .thumb-slider-btn::before {
            transform: translate(-2px, 10px) rotate(225deg);
        }

        .container .raw .litle-images .next .thumb-slider-btn::before {
            transform: translate(-2px, -10px) rotate(45deg);
        }

    .container .raw .main-image {
        margin-left: 80px;
        margin-right: 20px;
        display: flex;
        align-items: center;
        padding-bottom: 80px;
    }

        .container .raw .main-image img {
            width: 100%;
            height: 630px;
            max-width: 430px;
            object-fit: contain;
        }

    .container .raw .options-container {
        margin-left: 50px;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: start;
    }

        .container .raw .options-container .availability {
            border-radius: 4px;
        }

            .container .raw .options-container .availability p {
                margin-left: 10px;
                margin-right: 10px;
                margin-bottom: 0px;
                font-style: italic;
            }

        .container .raw .options-container .price-info {
            margin-top: 5px;
            margin-bottom: 10px;
        }

            .container .raw .options-container .price-info .old-price {
                display: flex;
            }

            .container .raw .options-container .price-info .old-price .promo-5{
                position: relative;
                background-color: red;
                width: 50px;
                right: -10px;
                font-size: 14px;
                border-radius: 4px;
                opacity: 0.85;
                color: white;
                height: 22px;
                display: flex;
                justify-content: center;
                align-self: center;
            }

                .container .raw .options-container .price-info .old-price .price-grn {
                    color: #a6a5a5;
                    text-decoration: line-through;
                    font-size: 22px;
                    display: flex;
                    flex-wrap: wrap;
                    align-content: center;
                }

                .container .raw .options-container .price-info .old-price .price-usd {
                    color: #a6a5a5;
                    text-decoration: line-through;
                    font-size: 15px;
                    margin-left: 20px;
                    display: flex;
                    flex-wrap: wrap;
                    align-content: center;
                }

            .container .raw .options-container .price-info .new-price {
                display: flex;
            }

                .container .raw .options-container .price-info .new-price .price-grn {
                    font-size: 36px;
                    font-weight: 700;
                    display: flex;
                    flex-wrap: wrap;
                    align-content: center;
                }

                .container .raw .options-container .price-info .new-price .price-usd {
                    font-size: 20px;
                    font-weight: 700;
                    margin-left: 20px;
                    display: flex;
                    flex-wrap: wrap;
                    align-content: center;
                }

        .container .raw .options-container .memory-container {
            display: flex;
            flex-direction: column;
            border-top: 1px solid gray;
            width: 100%;
            margin-bottom: 20px;
        }

            .container .raw .options-container .memory-container .description {
                margin: 10px 0px;
                font-weight: 600;
            }

                .container .raw .options-container .memory-container .description .description-memory {
                    font-weight: 400;
                    color: gray;
                }

            .container .raw .options-container .memory-container .memory-buttons-container {
                display: flex;
                gap: 8px;
            }

                .container .raw .options-container .memory-container .memory-buttons-container a {
                    border: 1px solid #999999;
                    box-sizing: border-box;
                    border-radius: 4px;
                    font-weight: 500;
                    font-size: 13px;
                    line-height: 18px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    text-align: center;
                    color: black;
                    padding: 0 16px 0 16px;
                    text-decoration: none;
                    height: 33px;
                    position: relative;
                }

                    .container .raw .options-container .memory-container .memory-buttons-container a:hover {
                        border: 1px solid #ffb23e;
                    }

                .container .raw .options-container .memory-container .memory-buttons-container .active {
                    border: 1px solid #ffb23e;
                    background: #ffb23e;
                }

        .container .raw .options-container .color-container {
            display: flex;
            flex-direction: column;
            border-top: 1px solid gray;
            width: 100%;
            margin-bottom: 20px;
        }

            .container .raw .options-container .color-container .description {
                margin: 10px 0;
                font-weight: 600;
            }

                .container .raw .options-container .color-container .description .description-color {
                    font-weight: 400;
                    color: gray;
                }

            .container .raw .options-container .color-container .color-buttons-container {
                display: flex;
                gap: 8px;
            }

                .container .raw .options-container .color-container .color-buttons-container .colatt {
                    width: 30px;
                    height: 30px;
                    display: flex;
                    border-radius: 4px;
                    border: 2px solid #bcbcbc;
                }

                .container .raw .options-container .color-container .color-buttons-container .active{
                    border: 4px solid #ffb23e;
                }

                    .container .raw .options-container .color-container .color-buttons-container .colatt .color-attribute {
                        height: 100%;
                        width: 100%;
                    }

                    .container .raw .options-container .color-container .color-buttons-container .colatt:hover {
                        border-color: #ffb23e;
                    }

        .container .raw .options-container .buy-buttons-container {
            padding-top: 30px;
            width: 100%;
            display: flex;
            gap: 30px;
        }

        @media (max-width:991px){
            .container .raw .options-container .buy-buttons-container{
                flex-direction: column;
                padding-top: 15px;
                gap: 15px;
            }
        }

            .container .raw .options-container .buy-buttons-container .buy-btn-one-click {
                font-weight: 600;
                color: black;
                font-size: 16px;
                height: 55px;
                align-items: center;
                justify-content: center;
                display: flex;
                background: none;
                margin: 0;
                outline: 0;
                position: relative;
                text-align: center;
                border: none;
                border-radius: 4px;
                width: 100%;
                text-decoration: none;
                border: 3px solid #ffb23e;
            }

            .container .raw .options-container .buy-buttons-container .buy-btn {
                text-decoration: none;
                font-weight: 600;
                color: black;
                font-size: 16px;
                height: 55px;
                align-items: center;
                justify-content: center;
                display: flex;
                background: #ffb23e;
                margin: 0;
                outline: 0;
                position: relative;
                text-align: center;
                border: none;
                border-radius: 4px;
                width: 100%;
            }

            .container .raw .options-container .buy-buttons-container .buy-btn-one-click:hover {
                box-shadow: inset 0px 0px 60px rgba(0, 0, 0, 0.15);
            }

            .container .raw .options-container .buy-buttons-container .buy-btn:hover {
                box-shadow: inset 0px 0px 60px rgba(0, 0, 0, 0.15);
            }

.container .item-description #article-description {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 30px;
    width: 100%;
}

    .container .item-description #article-description img {
        width: auto;
        max-width: 100%;
    }

.container .item-characteristic h2 {
    margin-top: 30px;
}

.container .item-characteristic .characteristics-full__group {
    margin-top: 50px;
}

    .container .item-characteristic .characteristics-full__group .characteristics-full__sub-heading {
        font-size: 25px;
        margin-bottom: 20px;
    }

    .container .item-characteristic .characteristics-full__group .characteristics-full__item {
        display: flex;
    }

    .container .item-characteristic .characteristics-full__group .characteristics-full__label {
        align-self: flex-start;
        width: 50%;
        height: 20px;
        border-bottom: 1px dotted #d2d2d2;
    }

        .container .item-characteristic .characteristics-full__group .characteristics-full__label span {
            display: inline-block;
            background: white;
            padding-right: 10px;
        }

    .container .item-characteristic .characteristics-full__group .characteristics-full__label,
    .container .item-characteristic .characteristics-full__group .characteristics-full__value {
        font-size: 14px;
        font-weight: 500;
    }

        .container .item-characteristic .characteristics-full__group .characteristics-full__label li,
        .container .item-characteristic .characteristics-full__group .characteristics-full__value li {
            list-style: none;
        }

            .container .item-characteristic .characteristics-full__group .characteristics-full__label li a,
            .container .item-characteristic .characteristics-full__group .characteristics-full__value li a,
            .container .item-characteristic .characteristics-full__group .characteristics-full__label li span,
            .container .item-characteristic .characteristics-full__group .characteristics-full__value li span {
                text-decoration: none;
                color: black;
                font-weight: 500;
            }

.cart-container {
    position: fixed;
    z-index: 100;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow-x: hidden;
    overflow-y: auto;
}

    .cart-container .cart-wrapper {
        background-color: rgba(0, 0, 0, 0.4);
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1;
    }

@media (min-width:1000px) {
    .cart-container .cart-wrapper .cart-holder {
            width: 60%;
        }
}


@media (max-height:600px){
    .cart-container .cart-wrapper .cart-holder .cart-content .itemstobuy-container{
        min-height: auto !important;
        height: calc(100dvh - 85px - 70px) !important;
    }
}

@media(hover:none){
    .cart-container .cart-wrapper .cart-holder {
        width: -webkit-fill-available;
    }
}
        .cart-container .cart-wrapper .cart-holder {
            background: white;
            height: auto;
            border-radius: 4px;
            margin: auto;
            position: relative;
        }

            .cart-container .cart-wrapper .cart-holder .cart-header {
                position: sticky;
                top: 0px;
                padding-left: 30px;
                padding-right: 30px;
                display: flex;
                justify-content: space-between;
                box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.12);
                height: 70px;
                align-items: center;
            }

                .cart-container .cart-wrapper .cart-holder .cart-header h3 {
                    margin: 0;
                }

                .cart-container .cart-wrapper .cart-holder .cart-header #cart-close {
                    background: none;
                    border: none;
                    font-size: 20px;
                    font-weight: 600;
                    color: gray;
                }

                    .cart-container .cart-wrapper .cart-holder .cart-header #cart-close:hover {
                        color: red;
                    }

            .cart-container .cart-wrapper .cart-holder .cart-content {
                display: flex;
                flex-direction: column;
                width: 100%;
            }

                .cart-container .cart-wrapper .cart-holder .cart-content .itemstobuy-container {
                    position: relative;
                    width: 100%;
                    min-height: 250px;
                    max-height: 400px;
                    padding: 20px 0px;
                    overflow: auto;
                    padding-left: 30px;
                    padding-right: 30px;
                }

                    .cart-container .cart-wrapper .cart-holder .cart-content .itemstobuy-container .item-cont .item-to-buy {
                        height: 150px;
                        margin-bottom: 15px;
                        border-bottom: 1px dotted gray;
                    }

                        .cart-container .cart-wrapper .cart-holder .cart-content .itemstobuy-container .item-cont .item-to-buy .itb-container {
                            height: 100%;
                            display: flex;
                            align-items: center;
                        }

                            .cart-container .cart-wrapper .cart-holder .cart-content .itemstobuy-container .item-cont .item-to-buy .itb-container .itb-delete-btn {
                                background: none;
                                border: none;
                                text-decoration: none; 
                                font-size: 15px;
                                font-weight: 300;
                                color: gray;
                            }
                                .cart-container .cart-wrapper .cart-holder .cart-content .itemstobuy-container .item-cont .item-to-buy .itb-container .itb-delete-btn .img {
                                    background: black;
                                    -webkit-mask: url("../img/free-icon-font-trash-3917242.png") center/contain;
                                    mask: url("../img/free-icon-font-trash-3917242.png") center/contain;
                                }

                                .cart-container .cart-wrapper .cart-holder .cart-content .itemstobuy-container .item-cont .item-to-buy .itb-container .itb-delete-btn .img:hover {
                                    background: red;
                                    -webkit-mask: url("../img/free-icon-font-trash-3917242.png") center/contain;
                                    mask: url("../img/free-icon-font-trash-3917242.png") center/contain;
                                }

                            .cart-container .cart-wrapper .cart-holder .cart-content .itemstobuy-container .item-cont .item-to-buy .itb-container .itb-img {
                                height: 120px;
                                width: 120px;
                                object-fit: contain;
                                margin-left: 20px;
                            }

                            @media (max-width:991px){
                                .cart-container .cart-wrapper .cart-holder .cart-content .itemstobuy-container .item-cont .item-to-buy .itb-container .itb-img {
                                    height: 80px;
                                    width: 80px;
                                    object-fit: contain;
                                    margin-left: 0px;
                                }

                                .cart-container .cart-wrapper .cart-holder .cart-content .itemstobuy-container .item-cont .item-to-buy .itb-container .itb-title-prop{
                                    margin: 0 10px !important;
                                }

                                    .cart-container .cart-wrapper .cart-holder .cart-content .itemstobuy-container .item-cont .item-to-buy .itb-container .itb-title-prop .itb-href{
                                        max-width: none !important;
                                        margin-bottom: 0px !important;
                                    }
                            }

                            .cart-container .cart-wrapper .cart-holder .cart-content .itemstobuy-container .item-cont .item-to-buy .itb-container .itb-title-prop {
                                display: flex;
                                justify-content: space-between;
                                width: 100%;
                                margin: 0 0 0 30px;
                                align-items: center;
                            }

                                .cart-container .cart-wrapper .cart-holder .cart-content .itemstobuy-container .item-cont .item-to-buy .itb-container .itb-title-prop .itb-href {
                                    text-decoration: none;
                                    margin-bottom: 40px;
                                    font-size: 16px;
                                    max-width: 400px;
                                }

                                .cart-container .cart-wrapper .cart-holder .cart-content .itemstobuy-container .item-cont .item-to-buy .itb-container .itb-title-prop .itb-price {
                                    margin-left: 15px;
                                    font-size: 20px;
                                    font-weight: 400;
                                }

                                .cart-container .cart-wrapper .cart-holder .cart-content .itemstobuy-container .item-cont .item-to-buy .itb-container .itb-title-prop #cart-quantity-price-d {
                                    padding-left: 10px;
                                    gap: 10px;
                                    text-align: center;
                                }

                                #cart-quantity-price-d button{
                                    border: none;
                                    background: none;
                                    color: black;
                                    font-size: 26px;
                                    padding: 0;
                                    width: 26px;
                                }

.cart-container .cart-wrapper .cart-holder .cart-content .itemstobuy-container .item-cont .item-to-buy:last-child {
    border: none;
}

                .cart-container .cart-wrapper .cart-holder .cart-content .cart-footer {
                    border-top: 1px solid gray;
                    background: none;
                    padding: 0px 0px;
                    margin-top: 0px;
                    width: 100%;
                    height: 85px;
                    display: flex;
                    justify-content: space-between;
                    padding-left: 30px;
                    padding-right: 30px;
                }

                    .cart-container .cart-wrapper .cart-holder .cart-content .cart-footer #comeback {
                        margin: 25px 0px;
                        border: none;
                        background: none;
                        color: lightslategray;
                        font-size: 15px;
                        text-decoration: underline;
                    }

                    .cart-container .cart-wrapper .cart-holder .cart-content .cart-footer .order-container {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        gap: 12px;
                    }

                        .cart-container .cart-wrapper .cart-holder .cart-content .cart-footer .order-container .cart-price {
                            font-size: 20px;
                            font-weight: 500;
                        }

                        .cart-container .cart-wrapper .cart-holder .cart-content .cart-footer .order-container #make-order {
                            display: flex;
                            align-items: center;
                            text-decoration: none;
                            padding: 5px;
                            color: black;
                            border: none;
                            background: #ffb23e;
                            border-radius: 4px;
                            height: 50px;
                            font-size: 16px;
                            font-weight: 500;
                        }

                            .cart-container .cart-wrapper .cart-holder .cart-content .cart-footer .order-container #make-order:hover {
                                box-shadow: inset 0px 0px 60px rgba(0, 0, 0, 0.15);
                            }

.order-content .order-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 70px;
    border-bottom: 1px solid lightgray;
}

.order-content .order-title {
    margin: 20px 0px;
}

.order-content .cn-title {
    display: flex;
    align-items: center;
}

    .order-content .cn-title .number {
        display: flex;
        justify-content: center;
        align-items: center;
        background: lightgray;
        border-radius: 50px;
        width: 36px;
        height: 36px;
    }

    .order-content .cn-title .ttl {
        margin-left: 20px;
        font-weight: 500;
    }

.order-content .cn-inputs-conteiner {
    margin-left: 18px;
    padding-left: 37px;
    margin-top: 10px;
    padding-top: 10px;
    padding-bottom: 30px;
    margin-bottom: 10px;
    border-left: 1px solid lightgray;
}

@media (max-width:991px){
    .order-content .cn-inputs-conteiner .cn-inputs{
        flex-wrap: wrap;
        gap: 0px!important;
        margin-top: 0px!important;
    }
    .order-content .cn-inputs-conteiner .cn-in-ad-c{
        flex-wrap: wrap;
        gap: 10px!important;
    }
    .order-content .cn-inputs-conteiner .cn-in-np-c{
        flex-wrap: wrap;
    }
    .order-content .content-order-f .raww{
        margin-bottom: 80px!important;
        margin-left: 0!important;
    }
}

    .order-content .cn-inputs-conteiner .cn-inputs {
        display: flex;
        width: auto;
        margin-top: 10px;
        gap: 20px;
    }

        .order-content .cn-inputs-conteiner .cn-inputs .cn-input-nm {
            display: flex;
            flex-direction: column;
            width: 100%;
        }

        .required-star{
            display: flex;
            gap: 3px;
        }

        .cn-in-title-star,
        .cn-in-np-title-star,
        .cn-in-ad-title-star{
            color: red;
            font-size: 18px;
        }

            .order-content .cn-inputs-conteiner .cn-inputs .cn-input-nm .cn-in-title {
                font-size: 12px;
                font-weight: 500;
                margin: 5px 0px;
            }

            .order-content .cn-inputs-conteiner .cn-inputs .cn-input-nm .cn-in-input {
                border: 1px solid lightgray;
                border-radius: 5px;
                height: 40px;
                padding: 2px 12px;
                outline-color: #3797e5;
                /* outline-color: #ffb23e; */
            }

                .order-content .cn-inputs-conteiner .cn-inputs .cn-input-nm .cn-in-input::-webkit-outer-spin-button,
                .order-content .cn-inputs-conteiner .cn-inputs .cn-input-nm .cn-in-input::-webkit-inner-spin-button {
                    -webkit-appearance: none;
                }

            .order-content .cn-inputs-conteiner .cn-inputs .cn-input-nm .cn-in-err {
                font-size: 12px;
                font-weight: 500;
                /* margin: 5px 0px; */
                color: red;
            }

    .order-content .cn-inputs-conteiner .cn-rb-container {
        display: flex;
        flex-direction: column;
        gap: 30px;
        justify-content: center;
    }

        .order-content .cn-inputs-conteiner .cn-rb-container .cn-rb-cont {
            display: flex;
            align-items: center;
        }

            .order-content .cn-inputs-conteiner .cn-rb-container .cn-rb-cont .in-rb-delivery,
            .order-content .cn-inputs-conteiner .cn-rb-container .cn-rb-cont .in-rb-pay {
                width: 30px;
                height: 30px;
                cursor: pointer;
                /* filter: hue-rotate(160deg); */
            }

            .order-content .cn-inputs-conteiner .cn-rb-container .cn-rb-cont label {
                margin-left: 20px;
                font-size: 14px;
                cursor: pointer;
            }

    .order-content .cn-inputs-conteiner .cn-in-d-c {
        display: none;
    }

        .order-content .cn-inputs-conteiner .cn-in-d-c .cn-in-c {
            display: flex;
            flex-direction: column;
        }

            .order-content .cn-inputs-conteiner .cn-in-d-c .cn-in-c .cn-in-c-c{
                display: flex;
                margin-top: 20px;
                gap: 30px;
            }

            .order-content .cn-inputs-conteiner .cn-in-d-c .cn-in-c .cn-sf-da,
            .order-content .cn-inputs-conteiner .cn-in-d-c .cn-in-c .cn-sf-ti {
                border: 1px solid lightgray;
                border-radius: 5px;
                padding: 5px 10px;
            }

            .order-content .cn-inputs-conteiner .cn-in-d-c .cn-in-c .cn-in-c-err {
                font-size: 12px;
                font-weight: 500;
                margin: 5px 0px;
                color: red;
            }

            .order-content .cn-inputs-conteiner .active {
                display: block !important;
            }

    .order-content .cn-inputs-conteiner .cn-in-ad-c {
        display: flex;
        margin-top: 20px;
        gap: 20px;
    }

    .cn-in-ad-c-np{
        display: flex;
        flex-wrap: wrap;
        margin-top: 20px;
        gap: 20px;
    }

    .cn-in-ad-st-c-np-1{
        width: 100%;
    }

    .cn-in-ad-st-c-np-2{
        width: 66%;
    }

    .cn-in-ad-st-c-np-3{
        width: 30%;
    }

    .cn-rb-cont-div-np{
        display: flex;
        flex-direction: column;
    }

    .cn-rb-cont-np-lablel{
        font-size: 12px!important;
        color: gray;
    }

    @media (max-width:991px){
        .cn-in-ad-st-c-np-1,
        .cn-in-ad-st-c-np-2,
        .cn-in-ad-st-c-np-3{
            width: 100%!important;
        }
    }

        .order-content .cn-inputs-conteiner .cn-in-ad-c .cn-in-ad-st-c {
            display: flex;
            flex-direction: column;
        }

            .order-content .cn-inputs-conteiner .cn-in-ad-c .cn-in-ad-st-c .cn-in-ad-err {
                font-size: 12px;
                font-weight: 500;
                color: red;
            }

            .order-content .cn-inputs-conteiner .cn-in-ad-c .cn-in-ad-st-c .cn-in-ad-title {
                font-size: 12px;
                font-weight: 500;
                margin: 5px 0px;
            }

            .order-content .cn-inputs-conteiner .cn-in-ad-c .cn-in-ad-st-c .cn-in-ad-input {
                border: 1px solid lightgray;
                border-radius: 5px;
                height: 40px;
                padding: 2px 12px;
                outline-color: #3797e5;
            }

                .order-content .cn-inputs-conteiner .cn-in-ad-c .cn-in-ad-st-c .cn-in-ad-input::-webkit-outer-spin-button,
                .order-content .cn-inputs-conteiner .cn-in-ad-c .cn-in-ad-st-c .cn-in-ad-input::-webkit-inner-spin-button {
                    -webkit-appearance: none;
                }

        .order-content .cn-inputs-conteiner .cn-in-ad-c #cn-in-ad-st-c-large {
            width: 100%;
        }

    .order-content .cn-inputs-conteiner .cn-in-dt-c {
        margin-top: 20px;
        display: flex;
        gap: 30px;
    }

        .order-content .cn-inputs-conteiner .cn-in-dt-c .cn-in-dt-c-c{
            display: flex;
            flex-direction: column;
        }

            .order-content .cn-inputs-conteiner .cn-in-dt-c .cn-in-dt-c-c .cn-in-dt-err {
                font-size: 12px;
                font-weight: 500;
                margin: 5px 0px;
                color: red;
            }

            .order-content .cn-inputs-conteiner .cn-in-dt-c .cn-sf-dt-da,
            .order-content .cn-inputs-conteiner .cn-in-dt-c .cn-sf-dt-ti {
                border: 1px solid lightgray;
                border-radius: 5px;
                padding: 5px 10px;
            }

    .order-content .cn-inputs-conteiner .cn-in-np-c {
        gap: 30px;
        margin-top: 20px;
    }

        .order-content .cn-inputs-conteiner .cn-in-np-c .cn-in-ad-np-c {
            display: flex;
            flex-direction: column;
        }

            .order-content .cn-inputs-conteiner .cn-in-np-c .cn-in-ad-np-c .cn-in-ad-err {
                font-size: 12px;
                font-weight: 500;
                color: red;
            }

            .order-content .cn-inputs-conteiner .cn-in-np-c .cn-in-ad-np-c .cn-in-np-title {
                font-size: 12px;
                font-weight: 500;
                margin: 5px 0px;
            }

            .order-content .cn-inputs-conteiner .cn-in-np-c .cn-in-ad-np-c .cn-in-np-input {
                border: 1px solid lightgray;
                border-radius: 5px;
                height: 40px;
                padding: 2px 12px;
                outline-color: #3797e5;
            }

                .order-content .cn-inputs-conteiner .cn-in-np-c .cn-in-ad-np-c .cn-in-np-input::-webkit-outer-spin-button,
                .order-content .cn-inputs-conteiner .cn-in-np-c .cn-in-ad-np-c .cn-in-np-input::-webkit-inner-spin-button {
                    -webkit-appearance: none;
                }

        .order-content .cn-inputs-conteiner .cn-in-np-c #cn-in-ad-np-c-large {
            width: 100%;
        }


        #city_help,
        #warehouse_help{
            padding: 0;
            border: 1px solid lightgrey;
            border-radius: 5px;
            overflow: hidden;
            max-height: 400px;
            overflow-y: auto;
        }

        @media(max-width:991px){
            .city_pick,
            .warehouse_pick{
                padding: 10px 12px!important;
                height: auto!important;
        }
        }

        .city_pick,
        .warehouse_pick{
            list-style: none;
            height: 40px;
            padding: 0 20px 0 20px;
            align-content: center;
        }

        .comments-input{
            display: flex;
            width: 100%;
            border: 1px solid lightgray;
            border-radius: 5px;
            height: 104px;
            padding: 2px 12px;
            outline-color: #3797e5;
            resize: none;
        }

.order-content .cn-disable {
    display: none;
}

.order-content .content-order-f {
    display: flex;
    position: sticky;
    top: 30px;
}

    .order-content .content-order-f .raww {
        background: rgba(0, 0, 0, 0.04);
        width: 100%;
        margin: 0;
        margin-left: 40px;
        border-radius: 4px;
    }

        .order-content .content-order-f .raww .co-c-ttl {
            display: flex;
            margin-top: 10px;
            margin-left: 20px;
            font-size: 20px;
        }

        .order-content .content-order-f .raww .co-cart-c {
            display: flex;
            flex-direction: column;
        }

            .order-content .content-order-f .raww .co-cart-c .co-c-item {
                margin: 15px 20px;
                display: flex;
                padding-bottom: 10px;
                border-bottom: 1px solid lightgray;
            }

                .order-content .content-order-f .raww .co-cart-c .co-c-item img {
                    height: 80px;
                    width: 50px;
                    object-fit: contain;
                }

                .order-content .content-order-f .raww .co-cart-c .co-c-item .co-c-t-c {
                    display: flex;
                    flex-direction: column;
                    margin-left: 20px;
                    margin-top: 10px;
                }

                    .order-content .content-order-f .raww .co-cart-c .co-c-item .co-c-t-c a {
                        text-decoration: none;
                        font-size: 13px;
                        font-weight: 400;
                    }

                    .order-content .content-order-f .raww .co-cart-c .co-c-item .co-c-t-c .co-c-t-p {
                        font-size: 13px;
                        font-weight: 300;
                    }

        .order-content .content-order-f .raww .co-c-pr-c .co-pr {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 10px 20px;
            border-bottom: 1px solid lightgray;
            height: 60px;
        }

            .order-content .content-order-f .raww .co-c-pr-c .co-pr .co-pr-t {
                font-size: 14px;
                color: gray;
            }

            .order-content .content-order-f .raww .co-c-pr-c .co-pr .co-pr-p {
                font-size: 14px;
                font-weight: 600;
            }

            .order-content .content-order-f .raww .co-c-pr-c .co-pr #co-pr-pp-p {
                font-size: 24px;
            }

        .order-content .content-order-f .raww .co-c-but-c {
            display: flex;
            justify-content: center;
            margin: 30px 0 20px;
        }

@media (max-width:991px){
    .order-content .content-order-f .raww .co-c-but-c .co-c-con{
        padding: 15px 30px !important;
    }
}
            .order-content .content-order-f .raww .co-c-but-c .co-c-con {
                border: none;
                background-color: #ffb23e;
                color: black;
                border-radius: 8px;
                padding: 15px 30px;
                font-size: 18px;
                font-weight: 500;
            }

        .order-content .content-order-f .raww #co-c-err {
            display: none;
            justify-content: center;
            margin: 10px;
            color: red;
        }

.confirmed-order-content {
    position: fixed;
    z-index: 100;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

    .confirmed-order-content .co-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background-color: rgba(0, 0, 0, 0.4);
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1;
    }

    @media (min-width:1000px){
        .confirmed-order-content .co-container .co-wrapper{
            width: 40%;
        }
    }

        .confirmed-order-content .co-container .co-wrapper {
            background: white;
            height: auto;
            border-radius: 10px;
            margin: auto;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 30px;
            padding: 50px;
        }

            .confirmed-order-content .co-container .co-wrapper .con-symb-c {
                height: 180px;
                width: 180px;
                border: 7px solid #02bc53;
                border-radius: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
            }

                .confirmed-order-content .co-container .co-wrapper .con-symb-c #conf-symbol {
                    font-size: 150px;
                    color: #02bc53;
                }

            .confirmed-order-content .co-container .co-wrapper .con-th {
                font-size: 20px;
                text-align: center;
            }

                .confirmed-order-content .co-container .co-wrapper .con-th #order-id-ttl {
                    font-weight: 700;
                }

            .confirmed-order-content .co-container .co-wrapper a {
                background-color: #ffb23e;
                border-radius: 8px;
                padding: 5px 10px;
                text-decoration: none;
                color: black;
                text-align: center;
            }

@media(max-width:991px) {
    .itemstobuy-container {
        padding: 20px 0px !important;
        max-height: calc(100svh - 70px)!important;
    }
    .cart-holder{
        height: 70svh!important;
        display: flex;
        flex-direction: column;
    }
    .cart-content{
        height: calc(70svh - 70px);
        justify-content: space-between;
    }
    .cart-footer{
        padding: 0px 10px!important;
    }
    #comeback{
        display:none;
    }
    .itb-title-prop{
        flex-direction: column;
    }
    .itb-href{
        font-size:14px!important;
        display: flex;
        justify-content: start;
        width: 100%;
        padding-left: 10px;
    }
    #cart-quantity-price-d{
        width: 100%;
        justify-content: space-between!important;
    }
    .options-container{
        margin: 0 15px!important;
    }
    .catalog-menu{
        padding: 0!important;
    }
    .info-menu{
        padding:0!important;
    }
    .footer-wrapper{
        margin-left: 30px;
        flex-direction: column;
    }
    .model-name{
        font-size: 26px!important;
    }
    .new-price .price-grn{
        font-size: 26px!important;
    }
    .new-price .price-usd{
        font-size: 14px!important;
    }
    .old-price .price-grn{
        font-size: 20px!important;
    }
    .old-price .price-usd{
        font-size: 13px!important;
    }
    .home-banner{
        padding-top: 20px!important;
    }
    .swiper-container{
        width: 100%!important;
        border-radius: 10px!important;
    }
}

@media (min-width: 576px) and (max-width: 991px){
    .container {
        max-width: none;
    }
}

.minus-quantity,
.add-quantity{
    align-self: center;
}

.add-minus-quantity-container{
    display: flex;
    gap: 10px;
    border: 1px solid darkgray;
    border-radius: 4px;
}

.add-minus-quantity-container span{
    display: flex;
    align-items: center; 
    justify-content: center;
}

#msgBox {
    padding: 10px;
    background-color: Orange;
    text-align: center;
    display: none;
    font: bold 1.4em Verdana;
}

#msgCloseButton {
    float: right;
}

.add-to-cart-notification {
    z-index: 1000;
    position: fixed;
    display: none;
    width: 100%;
    height: 60px;
    background-color: gray;
    border-radius: 20px;
    bottom: 5px;
    left: 0;
    color: white;
    opacity: 0.97;
    transform: translate(calc(50vw - 50%),0);
}

.add-to-cart-notification p{
    display: flex;
    flex-wrap: wrap;
    height: inherit;
    align-content: center;
    justify-content: center;
}

.page-container {
    display: flex;
    justify-content: center;
    margin-top: 20px;
    gap: 10px;
}

.page-button {
    background: none;
    border: 1px solid gray;
    border-radius: 4px;
    height: 40px;
    width: 40px;
    color: black;
    text-align: center;
    padding: 0;
    margin: 0;
}

.active-page-btn {
    background-color: #3797e5;
    color: white;
    border: 2px solid gray;
}

.page-button:hover {
    border-color: #3797e5;
}

.sort-by {
    display: flex;
    gap: 10px;
    align-items: center;
    font-size: 14px;
}

.sortBy-select {
    width: 100%;
    height: 40px;
    border-radius: 4px;
    border: 1px solid lightgray;
    padding: 0 5px;
    color: black;
    background: white;
}

.sort-wrapper {
    background: ghostwhite;
    padding: 5px;
    display: grid;
    gap: 8px;
}

.search-phone-input{
    width: 400px;
    height: 35px;
    border: 1px solid black;
    border-radius: 7px;
    padding-left: 10px;
    padding-right: 10px;
    border-right: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.search-phone-input:focus{
    outline: none;
}

.search-phone-input-btn{
    background: white;
    border: 1px solid black;
    border-top-right-radius: 7px;
    border-bottom-right-radius: 7px;

    img{
        width: 30px;
    }
}

.find-phone{
    display: flex;
}

@media (max-width: 991px){
    .sort-wrapper{
        padding: 0;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .search-phone-input{
        width: 100%;
    }

    .find-phone{
        width: 80vw;
        min-width: 264px;
        margin-bottom: 20px;
    }
}

@media (min-width: 992px) {
    .phone-properties {
      margin: 50px;
    }

    .sortBy-select {
    width: 190px;
    height: 35px;
}
  
    .phone-properties .container {
      display: flex;
      flex-wrap: wrap;
      flex-direction: column;
      gap: 40px;
      background-color: ghostwhite;
      padding-top: 20px;
      padding-bottom: 20px;
    }
  
    .phone-properties .properties-block {
      display: flex;
      flex-wrap: wrap;
      flex-direction: column;
    }
  
    .phone-properties .properties-block td:first-child {
      width: 450px;
      vertical-align: top;
    }
  
    .phone-properties .properties-block td {
      padding-top: 10px;
    }
  
    .phone-properties .property-description {
      display: flex;
      flex-direction: column;
    }
  
    .phone-properties h3 {
      width: -webkit-fill-available;
      font-size: 24px;
    }
  
    .phone-properties span {
      font-size: 14px;
    }
  
    .phone-properties label {
      position: relative;
      font-size: 14px;
    }
  
    .phone-properties label::before {
      content: "";
      border-bottom: 1px dotted #d2d2d2;
      display: block;
      position: absolute;
      left: calc(100% + 20px);
      bottom: 4px;
      width: calc(420px - 100%);
    }
  }
  
  @media (max-width: 991px) {
    .phone-properties {
      margin: 20px;
    }
  
    .phone-properties .container {
      display: flex;
      flex-wrap: wrap;
      flex-direction: column;
      gap: 20px;
      background-color: ghostwhite;
      padding-top: 20px;
      padding-bottom: 20px;
    }
  
    .phone-properties .properties-block {
      display: flex;
      flex-wrap: wrap;
      flex-direction: column;
    }
  
    .phone-properties .properties-block td:first-child {
      width: 30%;
      vertical-align: top;
    }
  
    .phone-properties .properties-block td:last-child {
      padding-left: 15px;
    }
  
    .phone-properties .properties-block td {
      border-bottom: 1px solid gray;
    }
  
    .phone-properties .property-description {
      display: flex;
      flex-direction: column;
    }
  
    .phone-properties h3 {
      width: -webkit-fill-available;
      font-size: 24px;
    }
  
    .phone-properties span {
      font-size: 14px;
    }
  
    .phone-properties label {
      position: relative;
      font-size: 14px;
    }
  }

@media (min-width: 768px) {
  .all-models-div {
      display: none!important;
  }
}

@media (max-width: 767px) {
   .phone-model-container{
        margin: 0!important;
        max-height: 148px;
        overflow: hidden;
        transition: max-height 0.6s ease;
    }

    .phone-model-container.collapsed {
        max-height: 148px
    }

    .phone-model-container.expanded {
        max-height: none;
    }
}

.all-models-div {
    display: flex;
    justify-content: center;
    margin: 8px 0;
    height: 40px;
}

#showMoreBtn{
    width: 100%;
    background: white;
    border: 1px solid lightgray;
    border-radius: 4px;
    color: black;
}

#showMoreBtn .arrow{
    width: 10px;
    height: 10px;
    display: inline-block;
    position: relative;
    transition: transform 0.3s ease;
    margin-left: 5px;
}

#showMoreBtn .arrow::before,
#showMoreBtn .arrow::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 2px;
    height: 100%;
    background-color: black;
    transform-origin: bottom center;
}

#showMoreBtn .arrow::before{
    transform: rotate(45deg);
}

#showMoreBtn .arrow::after{
    transform: rotate(-45deg);
}

#showMoreBtn .arrow.open {
    transform: rotate(180deg);
}
  

.phone-model-container{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: 8px;
    margin: 20px 0;
    justify-items: center;
}

.phone-model-item{
    width: 90px;
    height: 148px;
    text-align: center;
    text-decoration: none;
    color: black;
    font-size: 14px;
    /* box-shadow: 0 0px 25px rgba(0, 0, 0, 0.12); */
    padding: 0 5px;
    border: 1px solid lightgray;
    border-radius: 4px;
}

.phone-model-item:hover{
    color: #ffb23e;
}

.phone-model-span-img{
    display: flex;
    flex-direction: column;
    height: 100px;
    justify-content: center;
    align-items: center;
}

.phone-model-span-img img {
    height: 80px;
}

.all-models-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    justify-items: center;
    gap: 12px;
    padding: 20px 20px;
    max-width: 900px;
    margin-top: 10px;
}

.model-item-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 225px;
    text-align: center;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 0px 25px rgba(0, 0, 0, 0.12);
    text-decoration: none;
    color: #222;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.model-item-container:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.model-item-container img {
    max-width: 100%;
    height: auto;
    padding: 12px;
    object-fit: contain;
    max-height: 200px;
}

.model-item-name {
    font-size: 16px;
    font-weight: 600;
    padding: 10px 0 12px;
    color: #333;
}


.new-product-promo{
    display: flex;
    flex-direction: column;
    height: 0;
}

.new-product-promo-gift{
    display: flex;
    flex-direction: column;
    height: 0;
}

.new-product-promo .promo-1{
    position: relative;
    top: 160px;
    background-color: dodgerblue;
    width: 60px;
    font-size: 12px;
    right: -5px;
    border-radius: 4px;
    opacity: 0.85;
    color: white;
}

.new-product-promo .promo-2{
    position: relative;
    top: 142px;
    background-color: dodgerblue;
    width: 110px;
    right: -5px;
    font-size: 12px;
    border-radius: 4px;
    opacity: 0.85;
    color: white;
}

.new-product-promo .promo-3{
    position: relative;
    top: 80px;
    background-color: forestgreen;
    width: 40px;
    right: -5px;
    font-size: 12px;
    border-radius: 4px;
    opacity: 0.85;
    color: white;
}

.new-product-promo .promo-5{
    position: relative;
    top: 120px;
    background-color: red;
    width: 40px;
    right: -5px;
    font-size: 12px;
    border-radius: 4px;
    opacity: 0.85;
    color: white;
}

.new-product-promo-gift .promo-4{
    position: relative;
    left: 5px;
    top: 8px;
    background-color: coral;
    width: 100px;
    right: -5px;
    font-size: 12px;
    border-radius: 4px;
    opacity: 0.85;
    color: white;
}

.promo-gift-action{
    border: 1px solid coral;
    border-radius: 6px;
    margin: 30px 0 5px 0;
    display: flex;
    background: white;
    position: relative;
    z-index: 5;
}

.promo-gift-action img{
    width: 80px;
    object-fit: contain;
}

.gift-container{
    display: flex;
    flex-direction: column;
    padding: 5px 10px;
}

.gift-gift{
    display: flex;
    height: 70px;
    padding: 0 5px;
    background: coral;
    color: white;
    position: absolute;
    border-radius: 5px;
    top: 5px;
}

.gift-gf{
    position: relative;
    z-index: -5;
}

.gift-price{
    display: flex;
    gap: 15px;
}

.gift-price-old{
    color: gray;
    text-decoration: line-through;
}

.gift-price-new{
    color: coral;
    font-weight: 600;
}

.characteristics-main{
    border-top: 1px solid gray;
    width: 100%;
    padding: 15px 0;
}

.characteristics-main div{
    display: flex;
    justify-content: space-between;
    position: relative;
}

.characteristics-main div::after{
    content: "";
    border-bottom: 1px dotted #666;
    height: 1px;
    position: absolute;
    top: 14px;
    left: 0;
    right: 0;
    z-index: 1;
}

.characteristics-main span{
    background-color: white;
    z-index: 2;
}

.characteristics-main span:first-child{
    padding-right: 8px;
}

.characteristics-main span:last-child{
    padding-left: 8px;
}

.h2-content{
    margin-top: 30px;
    margin-bottom: 30px;
}

@media (max-width: 991px){
    .raiting-container{
        margin-left: 0px!important;
    }

    .raiting-name-container{
        flex-direction: column;
        gap: 0px!important;
    }

    .client-raiting{
        display: block!important;
    }

    .raiting-main-container{
        display: block!important;
    }

    .raiting-make-stars-container{
        justify-items: center;
    }

    .raiting-button-submit{
        width: 50%!important;
        justify-self: center;
    }

    .raiting-make-name-container{
        width: 100%!important;
    }

    .raiting-make-text-conatiner textarea{
        width: 100%!important;
    }

    #next-reviews{
        width: 100%;
    }
}

.raiting-container{
    display: flex;
    gap: 20px;
    padding-bottom: 30px;
    margin-bottom: 30px;
    border-bottom: 1px solid gray;
}

.stars-container{
    display: flex;
    flex-direction: column;
}

.main-raiting{
    font-size: 40px;
    line-height: normal;
}

.raiting-count{
    font-size: 12px;
}

.raiting-container a{
    background: none;
    border: 1px solid black;
    text-decoration: none;
    color: black;
    border-radius: 4px;
    padding: 5px 15px;
    align-content: center;
    text-align: center;
}

.raiting-name-container{
    display: flex;
    gap: 10px;
}

.raiting-img-container{
    float: left;
    margin-right: 15px;
}

.raiting-img-container img{
    height: 55px;
    width: 55px;
}

.client-raiting{
    display: flex;
}

.raiting-main-container{
    display: flex;
    flex-direction: column;
}

.raiting-date-container{
    display: flex;
    gap: 10px;
}

.raiting-coment-container{
    margin-top: 10px;
}

.raitings-clients-container{
    margin-bottom: 30px;
    padding-bottom: 30px;
    border-bottom: 1px solid gray;
}

.raiting-make-container h3{
    margin-bottom: 20px;
}

.raiting-make-name-container{
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
    width: 40%;
}

.raiting-make-name-container input{
    border: 1px solid lightgray;
    border-radius: 5px;
    height: 40px;
    padding: 2px 12px;
    outline-color: #3797e5;
}

.raiting-make-text-conatiner textarea{
    border: 1px solid lightgray;
    border-radius: 5px;
    height: 100px;
    width: 60%;
    padding: 2px 12px;
    outline-color: #3797e5;
}

.raiting-make-stars-container{
    margin: 20px 0;
}

.raiting-button-submit{
    text-decoration: none;
    font-weight: 600;
    color: black;
    font-size: 16px;
    height: 55px;
    align-items: center;
    justify-content: center;
    display: flex;
    background: #ffb23e;
    margin: 0;
    outline: 0;
    position: relative;
    text-align: center;
    border: none;
    border-radius: 4px;
    width: 15%;
}

.raiting-make-error{
    font-size: 12px;
    font-weight: 500;
    margin: 5px 0px;
    color: red;
}

#raiting-make-container-id{
    scroll-margin-top: 90px;
}

.strs{
    margin: 10px 0;
}

.raiting-make-name-name{
    margin-bottom: 20px;
}

#next-reviews{
    background: none;
    border: 1px solid black;
    text-decoration: none;
    color: black;
    border-radius: 4px;
    padding: 5px 30px;
    text-align: center;
    display: flex;
    margin-bottom: 30px;
    justify-content: center;
}

/*-------------------------------------------------*/
.my-dropdown-menu{
    position: absolute;
    top: calc(100vh);
    display: flex;
    flex-direction: column;
    width: 100%;
    background: white;
    border-top-right-radius: 12px;
    border-top-left-radius: 12px;
    transition: all .5s;
    border: 1px solid black;
    left: 0;
}

.menu-user-mobile-opacity{
    display: none;
    height: 100vh;
    width: 100vw;
    background-color: black;
    z-index: 10;
    opacity: 0.3;
    position: absolute;
}

.dropmenu-span{
    height: 40px;
    display: flex;
    justify-content: center;
    border-bottom: 1px solid darkgray;
    align-items: center;
    font-size: 18px;
    font-weight: 500;
}

.dropmenu-buttons{
    padding: 15px;
    display: flex;
    flex-direction: column;
}

.dropmenu-buttons img{
    margin-right: 20px;
}

.dropmenu-buttons a{
    text-decoration: none;
    color: black;
    width: 100%;
    height: 100%;
    align-content: center;
}

.dropmenu-divs{
    display: flex;
    height: 40px;
    align-items: center;
}

.footer-contacts{
    padding-top: 6px;
}

.footer-contacts a span{
    padding-left: 10px;
}
/*-------------------------------------------------*/

#container-xxl-wrap-option{
    flex-wrap: wrap!important;
}

@media (max-width: 991px){
    .phone-main-info{
        width: 100%!important;
    }

    .ctalog-main-products{
        width: 100%!important;
    }

    .catalog-main-filters-param{
        width: 100%!important;
    }

    .order-main-data{
        width: 100%!important;
    }

    .order-main-phone-info{
        width: 100%!important;
    }
}

/* --------------------------------------------- */

.mini-maxi-button{
    background: none;
    border: none;
    color: #5285cc;
    text-decoration: underline;
    text-align: start;

    .mini-maxi-button-span{
        margin-right: 10px;
    }

    .mini-maxi-button-arrow{
        display: inline-block;
        width: 8px;
        height: 8px;
        border-right: 1px solid #5285cc;
        border-bottom: 1px solid #5285cc;
        transform: translateY(-25%) rotate(45deg);
        transition: all .5s;
    }
}

/*--------------------order mobile--------------------------*/

@media (max-width: 991px){
   .cn-inputs-conteiner{
        margin: 10px 3px!important;
        padding: 0!important;
        border: none!important;
   }

   .cn-input-nm{
        margin-bottom: 10px;
   }

   .cn-rb-container{
        gap: 10px!important;
   }

   .client-name-container{
        border: 1px solid lightgray;
        border-radius: 4px;
        box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.05);
        padding: 5px;
        margin-bottom: 10px;
   }

   .order-content .content-order-f .raww {
        background: none!important;
        border: 1px solid lightgray;
        box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.05);
   }
}

.call-button {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 60px;
  height: 60px;
  background-color: #007BFF; /* Оранжевий (заміни на #007BFF для голубого) */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  text-decoration: none;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
  z-index: 9999;
}

.call-button, 
.call-button:visited, 
.call-button:active, 
.call-button:focus {
  color: white !important; /* Колір іконки завжди білий */
  background-color: #007BFF !important; /* Твій оранжевий колір */
  outline: none; /* Прибираємо рамку фокусу */
  text-decoration: none;
}

/* Ховаємо на десктопах */
@media screen and (min-width: 1025px) {
  .call-button { display: none !important; }
}

/* Анімація трясіння іконки */
.call-button-icon {
  animation: wiggle 5s infinite;
}

@keyframes wiggle {
  0%, 90% { transform: rotate(0); }
  92% { transform: rotate(15deg); }
  94% { transform: rotate(-15deg); }
  96% { transform: rotate(15deg); }
  98% { transform: rotate(-15deg); }
  100% { transform: rotate(0); }
}

/************************************/

.footer-credentials {
    display: flex;
    flex-direction: column;
    align-items: center; 
    text-align: center;
    gap: 10px;   
    padding: 10px 0 0 0;
    border-top: 1px solid #2d2d2d;
}

.footer-credentials-text{
    color: darkgray;
    font-size: 0.8rem;
}

.footer-credentials-img {
    display: flex;
    gap: 10px;
}

@media (min-width: 768px) {
    .footer-credentials {
        flex-direction: row;         
        justify-content: space-between;
        border-bottom: none;           
    }

    .footer-credentials-text{
        font-size: 1rem;
    }
}