*,
* button:focus {
    outline: 0;
    &::selection {
        background-color: #F0C800;
        color: #fff;
    }
    &::-webkit-scrollbar {
        width: 13px;
    }
    &::-webkit-scrollbar-track {
        background-color: #9994;
    }
    &::-webkit-scrollbar-thumb {
        background: #F0C800;
        border-radius: 5px;
    }
    &::-webkit-scrollbar-thumb:hover {
        background: #f8bd9b;
    }
}

body {
    font-family: 'Tajawal', sans-serif;
    text-decoration: none;
    font-size: .9em;
    overflow-x: hidden;
    position: relative;
    background-color: #fff;
}

body p {
    font-family: 'Tajawal', sans-serif;
    font-size: 14px;
    margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Tajawal', sans-serif;
    font-weight: 600;
}

body a:hover {
    text-decoration: none;
    color: inherit;
}

body a:focus {
    outline: 0
}

body ul {
    list-style-type: none
}

.btn-default:active,
.btn-default:active:focus,
.btn-default:active:hover,
.btn-default:focus,
.btn-default:hover,
.btn-primary:not(:disabled):not(.disabled):active:focus,
.btn:not(:disabled):not(.disabled).active,
.btn:not(:disabled):not(.disabled):active {
    -webkit-appearance: none
}

.btn:active,
.btn:active:focus,
.btn:active:hover,
.btn:focus,
.btn:hover,
.btn:not(:disabled):not(.disabled).active,
.btn:not(:disabled):not(.disabled):active {
    -webkit-transition: all .6s ease;
    -moz-transition: all .6s ease;
    transition: all .6s ease;
    outline: 0
}

.container,
.container-fluid {
    position: relative;
    z-index: 20;
}


/* ==================== global style ============================== */

a,
span,
img {
    display: inline-block;
    transition: all 0.3s ease;
    color: inherit;
}

a:hover {
    color: #999;
}

ul {
    padding: 0;
}

img {
    max-width: 100%;
    max-height: 100%;
}

p {
    font-size: 14px;
    color: #888;
    line-height: 1.7;
}

.text {
    font-size: 14px;
    line-height: 2;
    color: #666;
}

small.text {
    font-size: 12px;
}

.bg-gray {
    background-color: #f7f7f7;
}

.valign {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.balign {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
}

.section-padding {
    padding: 80px 0;
}

.butn {
    padding: 10px 30px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 500;
}

.butn img {
    width: 20px;
    height: 20px;
    object-fit: contain;
    margin-left: 5px;
}

.butn.main_bg {
    background-color: #F9DE1C;
    span {
        color: #000;
    }
}

.butn.sub_bg {
    background-color: #F46150;
    span {
        color: #fff;
    }
}

button {
    border: 0;
}

.main_bg {
    background-color: #F9DE1C !important;
}

.form-control {
    padding: 10px;
    color: #666;
    border-radius: 10px;
    border: 1px solid#9993;
    min-height: 50px;
}

.form-control:focus {
    box-shadow: none;
    outline: 0;
    border-color: #F9DE1C;
}

.custom-control-input:checked~.custom-control-label::before {
    border-color: #F9DE1C;
    background-color: #F9DE1C;
}

.section-head {
    margin-bottom: 80px;
    h2 {
        color: #F46150;
        font-size: 28px;
    }
}

.head {
    padding: 15px;
    border-bottom: 1px solid#9992;
    display: flex;
    justify-content: space-between;
    h6 {
        font-weight: 600;
        font-size: 15px;
        position: relative;
        display: inline-block;
        &::after {
            position: absolute;
            content: "";
            right: calc(50% - 20px);
            bottom: -10px;
            width: 40px;
            height: 1px;
            background: linear-gradient(to left, transparent, #F46150, transparent);
        }
        &::before {
            position: absolute;
            content: "";
            right: calc(50% - 30px);
            bottom: -15px;
            width: 60px;
            height: 1px;
            background: linear-gradient(to left, #F46150, transparent, #F46150);
        }
    }
    .edit {
        a {
            width: 40px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            border-radius: 50%;
            background-color: #f5f5f5;
            margin: 0 3px;
        }
    }
}

.main_color {
    color: #F9DE1C !important;
}

.sub_color {
    color: #F46150 !important;
}

.w_items {
    padding: 30px 10px;
    background-color: #fff;
    border-radius: 20px;
}

.swiper-pagination-bullet-active {
    background-color: #F9DE1C;
}


/* ----------------- navbar  ------------------ */

.navbar {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 99;
    .navbar-brand {
        margin-top: 5px;
        img {
            width: 100px;
        }
    }
    .sections_btn {
        padding: 10px 35px;
        border: 0 solid#9995;
        border-radius: 10px;
        margin-right: 50px;
        background-color: #fff;
        img {
            width: 15px;
            height: 15px;
            object-fit: contain;
            margin-left: 5px;
        }
    }
    .navbar-nav {
        .nav-item {
            .nav-link {
                font-size: 16px;
                margin: 35px 15px 0;
                font-weight: 500;
                color: #151514;
            }
        }
    }
    .login_btns {
        padding-top: 37px;
        a {
            padding: 8px 25px;
            border-radius: 10px;
            background-color: #151514;
            font-size: 12px;
            color: #fff;
            font-weight: 500;
            border: 1px solid#151514;
            &:hover {
                background-color: transparent;
                color: #151514;
            }
            // &:last-of-type {
            //     background-color: transparent;
            //     color: #151514;
            //     border: 1px solidtransparent;
            //     &:hover {
            //         background-color: #151514;
            //         border-color: #151514;
            //         color: #fff;
            //     }
            // }
        }
        .search_link {
            width: 35px;
            height: 35px;
            line-height: 35px;
            background-color: transparent;
            color: #151514;
            text-align: center;
            border-radius: 7px;
            padding: 0;
            margin-right: 20px;
            &:hover {
                background-color: #151514;
                color: #F9DE1C;
            }
        }
    }
    .login_user {
        display: flex;
        align-items: center;
        width: 100%;
        justify-content: flex-end;
        a.u_img {
            img {
                width: 65px;
                height: 65px;
                border-radius: 50%;
                object-fit: cover;
            }
        }
        a.bell {
            width: 35px;
            height: 35px;
            line-height: 35px;
            border-radius: 50%;
            text-align: center;
            background-color: #D8001B;
            color: #fff;
            margin-right: 15px;
        }
        .dropdown-toggle::after {
            display: none;
        }
        .dropdown-menu {
            right: auto;
            left: 0;
            padding: 0;
            border: 0;
            min-width: 300px;
            border-radius: 5px;
            box-shadow: 0 10px 20px rgba(0, 0, 0, .05);
            z-index: 9999;
            top: calc(100% + 20px);
            .dropdown-item {
                display: flex;
                padding: 15px 20px;
                border-bottom: 1px solid#9991;
                .img {
                    width: 70px;
                    img {
                        width: 60px;
                        height: 60px;
                        border-radius: 50%;
                        object-fit: cover;
                    }
                }
                .info {
                    width: calc(100% - 70px);
                    h6 {
                        font-weight: 500;
                        font-size: 15px;
                        margin: 0;
                    }
                    p {
                        font-size: 13px;
                        margin-top: 5px;
                    }
                    small {
                        color: #888;
                    }
                }
            }
            .arrow-up {
                width: 0;
                position: absolute;
                height: 0;
                top: -10px;
                left: 10px;
                border-left: 10px solidtransparent;
                border-right: 10px solidtransparent;
                border-bottom: 10px solid#fff;
            }
        }
    }
}

.fixed_search {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #000000da;
    z-index: 99999999;
    display: none;
}

.fixed_search .form {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: #ffffffec;
    padding: 100px 5vw;
    border-radius: 15px;
    min-width: 70vw;
}

.fixed_search .form .form-control {
    width: 100%;
    background-color: transparent;
    color: #000;
    border: 0;
    border-radius: 0;
    border-bottom: 1px solid#0005;
}

.fixed_search .form .form-group {
    position: relative;
}

.fixed_search .form .form-group button {
    position: absolute;
    left: 5px;
    top: 5px;
    border: 0;
    border-radius: 7px;
    background-color: #fff;
    color: #000;
    width: 40px;
    height: 40px;
}

.fixed_search .cls {
    position: absolute;
    right: 30px;
    top: 30px;
    color: #fff;
    font-size: 30px;
    cursor: pointer;
}

// --------- search_drop ------------
.search_drop {
    padding: 10px 20px;
    min-width: 325px;
    border-radius: 15px;
    border: 0;
    left: 0;
    right: auto;
    top: calc(100% + 15px);
    .form-group {
        position: relative;
        .form-control {
            width: 100%;
            background-color: transparent;
            color: #000;
            border: 0;
            border-radius: 0;
            border-bottom: 1px solid#0005;
            font-size: 13px;
            padding: 0;
            min-height: 40px;
        }
        button {
            position: absolute;
            left: 0;
            top: 0;
            border: 0;
            border-radius: 7px;
            background-color: #fff;
            color: #000;
            width: 35px;
            height: 35px;
            background-color: #F9DE1C;
            font-size: 12px;
            font-weight: bold;
        }
    }
}

.navbar {
    .dropdown-toggle::after {
        display: none;
    }
}


/* Icon 2 */

#nav-icon2 {
    width: 45px;
    height: 35px;
    position: relative;
    margin: 10px auto;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
    cursor: pointer;
    float: right;
    display: none;
}

#nav-icon2 span {
    display: block;
    position: absolute;
    height: 4px;
    width: 50%;
    background: #F9DE1C;
    opacity: 1;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    -o-transition: .25s ease-in-out;
    transition: .25s ease-in-out;
}

#nav-icon2 span:nth-child(even) {
    left: 50%;
    border-radius: 0 9px 9px 0;
}

#nav-icon2 span:nth-child(odd) {
    left: 0px;
    border-radius: 9px 0 0 9px;
}

#nav-icon2 span:nth-child(1),
#nav-icon2 span:nth-child(2) {
    top: 0px;
}

#nav-icon2 span:nth-child(3),
#nav-icon2 span:nth-child(4) {
    top: 12px;
}

#nav-icon2 span:nth-child(5),
#nav-icon2 span:nth-child(6) {
    top: 24px;
}

#nav-icon2.open span:nth-child(1),
#nav-icon2.open span:nth-child(6) {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}

#nav-icon2.open span:nth-child(2),
#nav-icon2.open span:nth-child(5) {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

#nav-icon2.open span:nth-child(1) {
    left: 5px;
    top: 7px;
}

#nav-icon2.open span:nth-child(2) {
    left: calc(50% - 5px);
    top: 7px;
}

#nav-icon2.open span:nth-child(3) {
    left: -50%;
    opacity: 0;
}

#nav-icon2.open span:nth-child(4) {
    left: 100%;
    opacity: 0;
}

#nav-icon2.open span:nth-child(5) {
    left: 5px;
    top: 19px;
}

#nav-icon2.open span:nth-child(6) {
    left: calc(50% - 5px);
    top: 19px;
}


/* ----------------- header ------------------ */

header {
    background-color: #f2f2f2;
    position: relative;
    padding-top: 150px;
    &:after {
        position: absolute;
        content: "";
        left: 0;
        top: 0;
        width: 65%;
        height: 100%;
        background-color: #F9DE1C;
        border-bottom-right-radius: 300px;
        pointer-events: none;
    }
    .info {
        padding: 85px 30px 0;
        clip-path: polygon(100% 100%, 100% 100%, 100% 0, 100% 0);
        transition: all 1s ease-in-out;
        transition-delay: 0.4s;
        h2 {
            margin-bottom: 15px;
            font-weight: 500;
            strong {
                font-weight: 900;
            }
        }
        p {
            color: #151514;
            margin-bottom: 30px;
            font-size: 17px;
        }
        &.animated {
            clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 0);
        }
    }
    .form_box {
        background-color: #fff;
        border-radius: 30px;
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
        border: 8px solid#f9f9f9;
        overflow: hidden;
        margin-bottom: -80px;
        .head_cont {
            overflow: auto;
            &::-webkit-scrollbar {
                width: 3px;
                height: 5px;
            }
            .nav-pills {
                background-color: #FEFADA;
                justify-content: space-around;
                flex-wrap: nowrap;
                width: max-content;
                margin: 0;
                li {
                    width: 80px;
                    a {
                        padding: 15px;
                        img {
                            width: 30px;
                        }
                        &.active {
                            filter: invert(21%) sepia(70%) saturate(4110%) hue-rotate(353deg) brightness(90%) contrast(94%);
                        }
                    }
                }
            }
        }
        .form-row {
            padding: 15px;
            h5 {
                margin-bottom: 20px;
            }
        }
    }
}


/* ----------------- sections ------------------ */

.sections {
    padding: 150px 0;
    .content {
        ul {
            display: flex;
            li {
                width: calc(100% / 7);
                padding: 5px;
                a {
                    display: block;
                    text-align: center;
                    border-top-left-radius: 5px;
                    border-top-right-radius: 5px;
                    position: relative;
                    .cont_head {
                        img {
                            width: 60px;
                            height: 35px;
                            object-fit: contain;
                            margin: 20px 8px 10px;
                        }
                        span {
                            display: block;
                            font-size: 16px;
                            font-weight: bold;
                        }
                    }
                    .brands {
                        position: absolute;
                        background-color: #fff;
                        padding: 10px 5px;
                        display: flex;
                        flex-wrap: wrap;
                        justify-content: space-around;
                        border-bottom-left-radius: 5px;
                        border-bottom-right-radius: 5px;
                        opacity: 0;
                        overflow: hidden;
                        height: 0;
                        transition: all 0.4s ease;
                        border: 5px solid#F9DE1C;
                        img {
                            width: 45%;
                            height: 25px;
                            margin: 10px 0;
                            object-fit: contain;
                        }
                    }
                    &:hover {
                        background-color: #F9DE1C;
                        width: 100%;
                        .brands {
                            opacity: 1;
                            height: 150px;
                        }
                    }
                }
            }
        }
    }
}


/* ----------------- sections_tabs ------------------ */

.sections_tabs {
    padding: 100px 0;
    .content {
        ul {
            display: flex;
            li {
                width: calc(100% / 7);
                a {
                    display: block;
                    text-align: center;
                    border-top-left-radius: 10px;
                    border-top-right-radius: 10px;
                    position: relative;
                    padding: 5px;
                    .cont_head {
                        img {
                            width: 60px;
                            height: 35px;
                            object-fit: contain;
                            margin: 20px 8px 10px;
                        }
                        span {
                            display: block;
                            font-size: 16px;
                            font-weight: bold;
                        }
                    }
                    // &:hover,
                    &.active {
                        background-color: #F9DE1C;
                        width: 100%;
                    }
                }
            }
        }
        .tab-content {
            .tab_cont {
                background-color: #F9DE1C;
                padding: 5px;
                display: flex;
                border-bottom-right-radius: 10px;
                border-bottom-left-radius: 10px;
                .items {
                    background-color: #fff;
                    padding: 20px;
                    border-radius: 10px;
                    margin: 0.8%;
                    text-align: center;
                    display: block;
                    width: 15%;
                    .ico {
                        margin-bottom: 10px;
                        img {
                            width: 45px;
                            height: 45px;
                            object-fit: contain;
                        }
                    }
                }
            }
        }
    }
}


/* ----------------- products  ------------------ */

.products {
    .nav-pills {
        padding: 5px;
        background-color: #f5f5f5;
        border-radius: 50px;
        width: max-content;
        margin: auto;
        a {
            padding: 12px 40px;
            background-color: transparent;
            border-radius: 50px;
            font-size: 14px;
            font-weight: 500;
            &.active {
                background-color: #F46150;
                color: #fff;
            }
        }
    }
    .prod_cont {
        display: flex;
        flex-wrap: wrap;
        .prod_items {
            border-radius: 5px;
            overflow: hidden;
            box-shadow: 0 5px 10px rgba(0, 0, 0, 0.07);
            background-color: #fff;
            padding: 0;
            margin-top: 30px;
            width: 31%;
            margin: 30px 1% 0;
            transition: all 0.3s ease;
            position: relative;
            .img {
                height: 250px;
                position: relative;
                display: block;
                width: 100%;
                overflow: hidden;
                .fav-btn {
                    position: absolute;
                    top: 20px;
                    right: 20px;
                    width: 40px;
                    height: 40px;
                    z-index: 10;
                    border-radius: 50%;
                    background-color: #fff;
                    input {
                        opacity: 0.6;
                        width: 1px;
                        height: 1px;
                    }
                }
                .status {
                    position: absolute;
                    left: 20px;
                    top: 20px;
                    padding: 10px 30px;
                    font-size: 10px;
                    font-weight: 600;
                    border-radius: 10px;
                    z-index: 10;
                }
                img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    transition: all 0.4s ease-in-out;
                }
            }
            .another_btns {
                position: absolute;
                top: 15px;
                right: 50px;
                a {
                    width: 30px;
                    height: 30px;
                    line-height: 30px;
                    margin: 0 3px;
                    text-align: center;
                    z-index: 10;
                    border-radius: 50%;
                }
            }
            .info {
                padding: 20px;
                h6 {
                    font-weight: bold;
                    font-size: 16px;
                    color: #201d2a;
                    display: flex;
                    justify-content: space-between;
                    width: 100%;
                    span {
                        color: #F46150;
                        direction: ltr;
                    }
                }
                p {
                    margin: 15px 0;
                    i {
                        color: #F46150;
                        margin-left: 5px;
                    }
                }
                .by {
                    img {
                        width: 35px;
                        height: 35px;
                        border-radius: 50%;
                        overflow: hidden;
                    }
                    span {
                        margin: 8px 10px;
                        font-weight: bold;
                        font-size: 10px;
                        color: #888;
                    }
                }
            }
            &:hover {
                box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
                .img {
                    img {
                        transform: rotate(5deg) scale(1.1);
                    }
                }
            }
        }
        &.list {
            .prod_items {
                width: 48%;
                display: flex;
                .img {
                    height: 200px;
                    width: 45%;
                }
                .info {
                    width: 55%;
                }
            }
        }
    }
    .grid_list_btn {
        margin-top: -40px;
        padding: 0 15px;
        margin-bottom: 20px;
        span {
            font-size: 21px;
            margin: 0 5px;
            color: #888;
            cursor: pointer;
            &.active {
                color: #F46150;
            }
        }
    }
}

// -------------- live icon ---------------
.status.live_status {
    padding: 0 !important;
    left: 0 !important;
    top: 0 !important;
}

.video__icon {
    position: absolute;
    width: 50px;
    left: 10px;
    top: 15px;
}

.video__icon .circle--outer {
    border: 1px solid#F9DE1C;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin: 0 auto 5px;
    position: relative;
    opacity: .8;
    -webkit-animation: circle 2s ease-in-out infinite;
    animation: circle 2s ease-in-out infinite;
}

.video__icon .circle--inner {
    background: #F9DE1C;
    left: 15px;
    top: 10px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    position: absolute;
    opacity: .8;
}

.video__icon .circle--inner:after {
    content: '';
    display: block;
    border: 2px solid#F9DE1C;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    top: -4px;
    left: -4px;
    position: absolute;
    opacity: .8;
    -webkit-animation: circle 2s ease-in-out .2s infinite;
    animation: circle 2s ease-in-out .2s infinite;
}

.video__icon p {
    color: #F9DE1C;
    text-align: center;
}

@-webkit-keyframes circle {
    from {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    to {
        -webkit-transform: scale(1.5);
        transform: scale(1.5);
        opacity: 0;
    }
}

@keyframes circle {
    from {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    to {
        -webkit-transform: scale(1.5);
        transform: scale(1.5);
        opacity: 0;
    }
}

// ---------------- fav-btn ----------------
.fav-btn {
    input[type="checkbox"] {
        transform: translate3D(-50%, -50%, 0);
        left: 50%;
        top: 50%;
        position: absolute;
        //The heart! :before is the static one, :after is the heart which will animate
        &:before,
        &:after {
            content: "";
            cursor: pointer;
            background-image: url(../images/heart.png);
            background-size: cover;
            height: 25px;
            width: 25px;
            position: absolute;
            top: 65%;
            left: 50%;
            transform: translate3D(-50%, -50%, 0);
            filter: grayscale(100%);
        }
        //This is the heart we're going to animate
        &:after {
            opacity: 0;
            filter: grayscale(0%);
        }
        //When it's checked, remove the greyscale from the static heart and animate the other heart
        &:checked {
            &:before {
                filter: grayscale(0%);
            }
            &:after {
                animation: ascend ease-in-out 800ms;
            }
        }
    }
    //Ascend animation keyframes
    @-webkit-keyframes ascend {
        0% {
            transform: translate3D(-50%, -50%, 0);
            opacity: 1;
        }
        100% {
            transform: translate3D(-50%, -200%, 0);
            opacity: 0;
        }
    }
    @-moz-keyframes ascend {
        0% {
            transform: translate3D(-50%, -50%, 0);
            opacity: 1;
        }
        100% {
            transform: translate3D(-50%, -200%, 0);
            opacity: 0;
        }
    }
    @keyframes ascend {
        0% {
            transform: translate3D(-50%, -50%, 0);
            opacity: 1;
        }
        100% {
            transform: translate3D(-50%, -200%, 0);
            opacity: 0;
        }
    }
}


/* ----------------- mazad style  ------------------ */

.mazad {
    .mazad_lg {
        border-radius: 30px;
        overflow: hidden;
        background: linear-gradient(#ffbea2 0%, #e86866 100%);
        padding: 15px;
        position: relative;
        img.circle {
            object-fit: contain;
            &:nth-of-type(1) {
                width: 350px;
                height: 350px;
                position: absolute;
                right: 0;
                top: 0;
                transform: translate(25%, -25%);
            }
            &:nth-of-type(2) {
                width: 350px;
                height: 350px;
                position: absolute;
                left: 0;
                bottom: 0;
                transform: translate( -20%, 20%);
            }
        }
        // --------------- small mazad -------------
        &.mazad_sm {
            padding-bottom: 0;
            margin-bottom: 20px;
            .mazad_time {
                padding: 10px 20px;
                background-color: #fff;
                border-radius: 30px;
                box-shadow: 0 5px 10px rgba(0, 0, 0, 0.05);
                text-align: center;
                p {
                    color: #F46150;
                    font-size: 12px;
                }
            }
            .countdown {
                ul {
                    margin: 0;
                    li {
                        font-size: 12px;
                    }
                    li span {
                        font-size: 11px;
                    }
                }
            }
            .bottom {
                margin-top: 10px;
                align-items: center;
                .inf {
                    h5 {
                        font-size: 17px;
                    }
                    a {
                        font-size: 13px;
                    }
                }
                .price {
                    height: max-content;
                    span {
                        font-size: 16px;
                        &.old {
                            font-size: 12px;
                        }
                    }
                }
                .img {
                    width: 20%;
                    height: 145px;
                    position: relative;
                    margin: 0;
                }
            }
        }
    }
    .top {
        display: flex;
        justify-content: space-between;
        position: relative;
        z-index: 10;
        .butn {
            padding: 15px 40px;
        }
        .mazad_time {
            padding: 15px 30px;
            background-color: #fff;
            border-radius: 30px;
            box-shadow: 0 5px 10px rgba(0, 0, 0, 0.05);
            text-align: center;
            p {
                color: #F46150;
            }
        }
    }
    .img {
        height: 180px;
        margin: 50px 0;
        position: relative;
        z-index: 10;
        img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }
    }
    .bottom {
        display: flex;
        justify-content: space-between;
        position: relative;
        z-index: 10;
        .inf {
            h5 {
                font-weight: 600;
                font-size: 22px;
                color: #fff;
                margin-bottom: 0;
            }
            a {
                font-weight: 500;
                font-size: 17px;
                color: #fff;
                position: relative;
                padding: 10px 0;
                &::after {
                    position: absolute;
                    content: "";
                    right: 0;
                    bottom: 0;
                    width: 30px;
                    height: 2px;
                    background-color: #fff;
                }
                &::before {
                    position: absolute;
                    content: "";
                    right: 40px;
                    bottom: 0;
                    width: 40px;
                    height: 2px;
                    background-color: #fff;
                }
            }
        }
        .price {
            padding: 10px 30px;
            background-color: #fff;
            border-radius: 30px;
            box-shadow: 0 5px 10px rgba(0, 0, 0, 0.05);
            text-align: center;
            text-align: center;
            span {
                color: #F46150;
                font-size: 30px;
                direction: ltr;
                font-weight: bold;
                display: block;
                &.old {
                    font-size: 20px;
                    text-decoration: line-through;
                }
                small {
                    font-weight: 300;
                }
            }
        }
    }
    .l_side {
        .mazad_sm {
            &:nth-of-type(1) {
                background: linear-gradient( 45deg, #ffa2a2 0%, #e4e866 100%);
            }
            &:nth-of-type(2) {
                background: #000;
            }
        }
    }
    &.mazad_vr {
        .l_side {
            height: calc(100% - 20px);
            .mazad_sm {
                height: 50%;
            }
        }
    }
}

.countdown {
    ul {
        margin: 5px 0 0;
        display: flex;
        justify-content: space-around;
        li {
            display: inline-block;
            font-size: 15px;
            list-style-type: none;
            text-transform: uppercase;
        }
        li span {
            display: block;
            font-size: 14px;
            font-weight: bold;
        }
    }
}


/* ----------------- add ------------------ */

.dv {
    .content {
        background: url(../images/ad_back.png);
        background-repeat: repeat;
        background-size: contain;
        padding: 50px 130px 15px 15px;
        position: relative;
        &::before {
            position: absolute;
            content: "";
            left: 0;
            top: 20%;
            width: 100%;
            height: 80%;
            background-color: #232C35;
            clip-path: polygon(0 0, 100% 89%, 100% 100%, 0% 100%);
        }
        .row {
            position: relative;
            z-index: 10;
        }
        .info {
            p {
                font-size: 30px;
                color: #fff;
            }
            h3 {
                font-weight: bold;
                font-size: 40px;
                color: #fff;
            }
            .prc {
                font-size: 30px;
                color: #F9DE1C;
                font-weight: bold;
                direction: ltr;
                margin-top: 100px;
                small {
                    color: #fff;
                    font-weight: thin;
                }
            }
        }
        .logo_y {
            position: absolute;
            right: 0;
            top: 0;
            width: 90px;
            height: 90px;
            img {
                width: 100%;
                height: 100%;
                object-fit: contain;
            }
        }
        .add_y {
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            clip-path: polygon(0 100%, 0 100%, 0 0, 0 0);
            transition: all 1s ease-in-out;
            transition-delay: 0.2s;
            &.animated {
                clip-path: polygon(100% 100%, 0 100%, 0 0, 100% 0);
            }
        }
    }
}


/* ----------------- newsletter ------------------ */

.newsletter {
    .content {
        background-color: #F9DE1C;
        padding: 100px;
        clip-path: polygon(100% 100%, 100% 100%, 100% 0, 100% 0);
        transition: all 1s ease-in-out;
        &.animated {
            clip-path: polygon(0 95%, 100% 100%, 100% 0, 0 5%);
        }
        h6 {
            font-size: 25px;
            font-weight: 400;
            margin-bottom: 15px;
        }
        .form-group {
            margin-bottom: 0;
            margin-top: 30px;
            position: relative;
            input {
                background-color: #fff;
                padding: 30px;
                width: 100%;
                border: 0;
                padding-right: 150px;
            }
            button {
                position: absolute;
                right: 8px;
                top: 8px;
                background-color: #000;
                color: #fff;
                padding: 22px 40px;
                border: 0;
            }
        }
    }
}


/* ----------------- footer ------------------ */

footer {
    padding: 80px 0;
    background-color: #F9F3F1;
    position: relative;
    .items_logo {
        .foot_logo {
            max-width: 120px;
        }
        p {
            font-size: 12px;
            line-height: 2;
            color: #747474;
            margin: 30px 0;
        }
        .foot_socail {
            a {
                width: 30px;
                height: 30px;
                background-color: #e86866;
                color: #fff;
                margin-left: 20px;
                border-radius: 50%;
                line-height: 30px;
                text-align: center;
            }
        }
    }
    .links_items {
        h5 {
            font-weight: bold;
            font-size: 14px;
            color: #201d2a;
            margin-bottom: 30px;
        }
        ul {
            li {
                display: block;
                margin-bottom: 15px;
                a {
                    font-weight: 400;
                    font-size: 13px;
                    color: #747474;
                    display: flex;
                    justify-items: center;
                    line-height: 2;
                    width: max-content;
                    &:hover {
                        color: #e86866;
                    }
                    i {
                        width: 30px;
                        height: 30px;
                        line-height: 30px;
                        background-color: #e86866;
                        color: #fff;
                        margin-left: 8px;
                        border-radius: 50%;
                        text-align: center;
                        display: inline-block;
                    }
                }
            }
        }
    }
    .col-lg-2 {
        &:last-of-type {
            padding: 0;
        }
    }
    .foot_tr {
        position: absolute;
        top: 0;
        right: 0;
        pointer-events: none;
    }
    .foot_bl {
        position: absolute;
        left: 0;
        bottom: 0;
        pointer-events: none;
    }
}


/* ----------------- pages style ------------------ */


/* ----------------- inner_header ------------------ */

.inner_nav {
    background-color: #F9DE1C;
    position: relative;
}

.inner_header {
    background-image: url(../images/inner_header.png);
    background-repeat: no-repeat;
    background-size: cover;
    padding: 30px;
    .top {
        a {
            color: #fff;
            position: relative;
            padding-left: 40px;
            &::after {
                position: absolute;
                content: "";
                left: 12px;
                top: 6px;
                width: 10px;
                height: 10px;
                border-radius: 50%;
                background-color: #F9DE1C;
            }
        }
        span {
            color: #fff;
        }
    }
    h2 {
        color: #fff;
        font-size: 30px;
        margin: 40px 15px 30px;
    }
}


/* ----------------- mazad_count ------------------ */

.mazad_bottom_info {
    padding: 20px;
    border-top: 1px solid#9993;
    .mazad_price {
        text-align: center;
        margin-bottom: 5px;
        h6 {
            display: inline-block;
            margin: 5px;
        }
    }
    .mazad_count {
        text-align: center;
        .running {
            display: flex;
            flex-wrap: wrap;
            margin-top: 5px;
            timer {
                width: 100%;
                display: flex;
                .col {
                    width: 25%;
                    padding: 0;
                    span {
                        display: block;
                        width: 100%;
                        text-align: center;
                        color: #F46150;
                        font-size: 14px;
                        font-weight: bold;
                    }
                    small {
                        display: block;
                        width: 100%;
                        text-align: center;
                        color: #888;
                        font-size: 11px;
                        font-weight: bold;
                    }
                }
            }
        }
    }
}

.mazad_filter {
    border-radius: 20px;
    overflow: hidden;
    background-color: #F8F8F8;
    margin-top: 30px;
    .head {
        text-align: center;
        padding: 30px;
        color: #fff;
        background-color: #D8001B;
        border-bottom: 5px solid#F9DE1C;
        h5 {
            margin: 0;
            font-size: 16px;
        }
    }
    .content {
        padding: 0 10px 30px;
        .form-group {
            label {
                margin-bottom: 5px;
                font-size: 12px;
            }
            .form-control {
                font-size: 11px;
                color: #333;
                border-radius: 8px;
                border: 0;
            }
            i {
                position: absolute;
                bottom: 18px;
                right: 12px;
                color: #D8001B;
                font-size: 12px;
            }
            p {
                color: #333;
                margin: 10px 0;
            }
            .cont {
                display: flex;
                flex-wrap: wrap;
                .item {
                    border: 2px solid#9992;
                    border-radius: 10px;
                    padding: 15px 0;
                    text-align: center;
                    width: 31%;
                    margin: 1%;
                    position: relative;
                    input[type="checkbox"] {
                        position: absolute;
                        left: 0;
                        top: 0;
                        width: 100%;
                        height: 100%;
                        z-index: 5;
                        opacity: 0;
                        cursor: pointer;
                    }
                    .item_mirror {
                        position: absolute;
                        top: -2px;
                        left: -2px;
                        width: calc(100% + 4px);
                        height: calc(100% + 4px);
                        z-index: 2;
                        border: 2px solid#000;
                        border-radius: 10px;
                        padding: 15px 0;
                        text-align: center;
                        transform: scale(1.3);
                        opacity: 0;
                        transition: all 0.3s ease;
                        filter: invert(11%) sepia(88%) saturate(5473%) hue-rotate(348deg) brightness(89%) contrast(117%);
                    }
                    input:checked~.item_mirror {
                        transform: scale(1);
                        opacity: 1;
                    }
                }
            }
        }
    }
    .search_results {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 30px;
        .butn {
            padding: 15px 20px;
        }
    }
}


/* ----------------- inner_subscribe ------------------ */

.inner_subscribe {
    border-top: 1px solid#9991;
    padding: 60px 0;
    .r_side {
        display: flex;
        .icons {
            i {
                width: 50px;
                height: 50px;
                text-align: center;
                line-height: 50px;
                color: #D8001B;
                background-color: #f7f7f7;
                border-radius: 50%;
                font-size: 21px;
                margin-left: 20px;
            }
        }
        p {
            color: #888;
            margin-top: 10px;
        }
    }
    .l_side {
        .form-group {
            position: relative;
            margin: 0;
            input {
                width: 100%;
                border: 1px solid#9992;
                border-radius: 0;
                min-height: 60px;
                color: #777;
                padding-right: 150px;
            }
            button {
                position: absolute;
                right: 0;
                bottom: 0;
                height: 100%;
                width: 130px;
                color: #fff;
                background-color: #D8001B;
                text-align: center;
                border: 0;
            }
        }
    }
}


/* ----------------- register ------------------ */

.register {
    background-color: #fcfcfc;
    position: relative;
    overflow: hidden;
    .back_img {
        position: absolute;
        right: 30px;
        top: -100px;
        width: 40%;
        opacity: 0.1;
        pointer-events: none;
    }
    .back_img2 {
        position: absolute;
        left: 30px;
        bottom: 30px;
        width: 40%;
        opacity: 0.1;
        transform: translateX(-50%);
        pointer-events: none;
    }
    .r_side {
        padding: 150px 0;
        background-color: #F9DE1C;
        height: 100%;
        position: relative;
        z-index: 10;
        h2 {
            font-size: 2.5rem;
        }
        img {
            width: 35%;
            margin-top: 30px;
        }
    }
    .contt {
        padding: 30px;
        border-radius: 30px;
        background-color: #f4f4f4;
        margin: 50px 0;
    }
    .l_side {
        // background-color: #FCFCFC;
        padding: 7vw;
        height: 100%;
        position: relative;
        z-index: 10;
        .form-group {
            margin-top: 15px;
        }
        .butn {
            filter: drop-shadow(0px 7px 22px rgba(249, 222, 28, 0.44));
            width: 100%;
            padding: 20px;
            margin: 15px 0;
            font-weight: bold;
        }
    }
    .form-control {
        color: #333;
        border-radius: 8px;
    }
    .code_input {
        input {
            width: 45px;
            height: 45px;
            border: 2px solid#9991;
            background-color: #fff;
            border-radius: 3px;
            text-align: center;
            font-weight: bold;
            font-size: 18px;
            margin-left: 5px;
        }
    }
    .upload_img_usr {
        margin-bottom: 30px !important;
        text-align: center;
        #img-profile {
            width: 130px;
            height: 130px;
            object-fit: cover;
            border-radius: 50%;
        }
        .bttn {
            display: inline-block;
            background-color: #222;
            color: #fff;
            padding: 7px 25px;
            border-radius: 50px;
            margin-top: -30px;
            position: relative;
            input {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                z-index: 10;
                cursor: pointer;
            }
        }
    }
    .phone_code {
        position: relative;
        height: max-content;
        .d-flex {
            div {
                &:first-of-type {
                    width: 85%;
                }
            }
            div {
                &:last-of-type {
                    width: 15%;
                }
            }
            .w-100 {
                .zip_code {
                    left: 15px;
                }
            }
            select {
                border: 0;
                background-color: #fff;
                min-height: 50px;
                border-top-left-radius: 10px;
                border-bottom-left-radius: 10px;
                width: 100%;
                padding-right: 15px;
            }
            input {
                border-top-left-radius: 0;
                border-bottom-left-radius: 0;
            }
            .zip_code {
                position: absolute;
                left: 15%;
                height: 50px;
                bottom: 0;
                background-color: #000;
                color: #fff;
                text-align: center;
                width: 70px;
                line-height: 50px;
            }
        }
    }
    .map_show {
        button {
            min-width: 150px;
            font-size: 12px;
            font-weight: 500;
            img {
                width: 30px;
                height: 30px;
                object-fit: contain;
                margin-left: 5px;
            }
        }
    }
}

.shad_btn {
    .butn {
        width: 100%;
        padding: 20px;
        margin: 15px 0;
        font-weight: bold;
    }
    .sub_bg {
        filter: drop-shadow(0px 7px 22px rgba(211, 53, 32, 0.3));
    }
    .main_bg {
        filter: drop-shadow(0px 7px 22px rgba(249, 222, 28, 0.3));
    }
}


/* ----------------- mazad_show ------------------ */

.mazad_show {
    .mazad_show_slider {
        padding: 30px 15px;
        .mazad_top_price {
            padding: 20px 10px;
            border-radius: 15px;
            // border: 1px solid#9993;
            background-color: #f9f9f9;
            box-shadow: inset 0 0px 15px rgba(0, 0, 0, .1);
            margin-top: 15px;
            h5 {
                font-size: 13px;
            }
            h2 {
                color: #ce2b37;
                font-size: 25px;
            }
            p {
                color: #888;
                font-size: 10px;
                margin: 0;
            }
        }
        p {
            color: #444;
            margin: 10px 0;
            span {
                position: relative;
                margin-right: 16px;
                font-weight: bold;
                &::after {
                    position: absolute;
                    content: "";
                    right: -14px;
                    top: 8px;
                    height: 8px;
                    width: 8px;
                    border-radius: 50%;
                    background-color: #F46150;
                }
            }
        }
        small {
            display: inline-block;
            margin-bottom: 10px;
            i {
                color: #F46150;
                margin-left: 5px;
            }
        }
        .swiper-container {
            width: 100%;
            height: 300px;
            margin-left: auto;
            margin-right: auto;
            .swiper-slide {
                background-size: cover;
                background-position: center;
            }
        }
        .gallery-top {
            height: 80%;
            width: 100%;
            position: relative;
            img {
                width: 100%;
                height: 430px;
                object-fit: cover;
            }
        }
        .gallery-thumbs {
            height: 20%;
            box-sizing: border-box;
            padding: 10px 0;
            img {
                width: 100%;
                height: 120px;
                object-fit: cover;
            }
            .swiper-slide {
                height: 100%;
                opacity: 0.4;
            }
            .swiper-slide-thumb-active {
                opacity: 1;
            }
        }
        .slider {
            position: relative;
            margin-top: 30px;
            .ribbon {
                width: 150px;
                height: 132px;
                overflow: hidden;
                position: absolute;
                z-index: 10;
            }
            .ribbon::before,
            .ribbon::after {
                position: absolute;
                z-index: -1;
                content: '';
                display: block;
                border: 5px solid#F46150;
            }
            .ribbon span {
                position: absolute;
                display: block;
                width: 225px;
                padding: 7px 0;
                background-color: #F46150;
                box-shadow: 0 5px 10px rgba(0, 0, 0, .1);
                color: #fff;
                font-size: 13px;
                font-weight: 600;
                text-shadow: 0 1px 1px rgba(0, 0, 0, .2);
                text-transform: uppercase;
                text-align: center;
            }
            /* top right*/
            .ribbon-top-right {
                top: -10px;
                right: -10px;
            }
            .ribbon-top-right::before,
            .ribbon-top-right::after {
                border-top-color: transparent;
                border-right-color: transparent;
            }
            .ribbon-top-right::before {
                top: 0;
                left: 18px;
            }
            .ribbon-top-right::after {
                bottom: 0;
                right: 0;
            }
            .ribbon-top-right span {
                left: -25px;
                top: 30px;
                transform: rotate(45deg);
            }
        }
    }
    .more_details {
        .det_content {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            .items {
                width: 32%;
                display: flex;
                margin-top: 20px;
                .icon {
                    i {
                        color: #333;
                        background-color: #f5f5f5;
                        width: 45px;
                        height: 45px;
                        line-height: 45px;
                        text-align: center;
                        border-radius: 50%;
                        margin-left: 15px;
                    }
                }
                .inf {
                    p,
                    strong {
                        font-size: 13px;
                    }
                }
            }
        }
    }
    .about_mazad {
        .nav-pills {
            background-color: #343434;
            padding: 0 50px;
            border-top-left-radius: 20px;
            border-top-right-radius: 20px;
            .nav-item {
                a {
                    color: #fff;
                    padding: 30px;
                    font-weight: bold;
                    font-size: 16px;
                    position: relative;
                    &.active {
                        background-color: #fff;
                        color: #151514;
                        &::after {
                            position: absolute;
                            content: "";
                            left: 0;
                            top: -9px;
                            width: 100%;
                            height: 10px;
                            background-color: #fff;
                            border-top: 6px solid#D8001B;
                        }
                    }
                }
            }
        }
        .tab-content {
            padding: 3vw;
            p {
                margin-bottom: 30px;
                font-size: 16px;
            }
            h6 {
                margin-bottom: 10px;
            }
            ul {
                li {
                    width: 48%;
                    display: inline-block;
                    color: #777;
                    line-height: 2.5;
                    position: relative;
                    padding-right: 20px;
                    &::before {
                        position: absolute;
                        content: "\f111";
                        font-weight: 900;
                        font-family: "Font Awesome 5 Free";
                        right: 0;
                        top: 8px;
                        color: #D8001B;
                        font-size: 8px;
                    }
                }
            }
        }
    }
    .about_car {
        .items {
            display: flex;
            margin-top: 20px;
            .icon {
                i {
                    color: #333;
                    background-color: #f5f5f5;
                    width: 45px;
                    height: 45px;
                    line-height: 45px;
                    text-align: center;
                    border-radius: 50%;
                    margin-left: 15px;
                }
            }
            .inf {
                p,
                strong {
                    font-size: 13px;
                }
            }
        }
        .car_parts {
            position: relative;
            .dots {
                a {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    width: 10px;
                    height: 10px;
                    background-color: #ce2b37;
                    border-radius: 50%;
                    position: absolute;
                    &:before {
                        content: "";
                        width: inherit;
                        height: inherit;
                        border: 5px solid#ce2b37;
                        border-radius: inherit;
                        position: absolute;
                        z-index: 10;
                        opacity: 0;
                        animation: 2s expand cubic-bezier(.29, 0, 0, 1) infinite;
                        animation-delay: 1s;
                    }
                    &:nth-of-type(1) {
                        top: 20%;
                        right: 15%;
                    }
                    &:nth-of-type(2) {
                        top: 20%;
                        right: 30%;
                    }
                    &:nth-of-type(3) {
                        bottom: 20%;
                        right: 15%;
                    }
                    &:nth-of-type(4) {
                        bottom: 20%;
                        right: 30%;
                    }
                    &:nth-of-type(5) {
                        top: 22%;
                        left: 37%;
                    }
                    &:nth-of-type(6) {
                        bottom: 20%;
                        left: 37%;
                    }
                    &:nth-of-type(7) {
                        bottom: 40%;
                        left: 12%;
                    }
                }
            }
        }
    }
    .l_side {
        .running {
            display: flex;
            flex-wrap: wrap;
            margin-top: 5px;
            timer {
                width: 100%;
                display: flex;
                .col {
                    width: 25%;
                    padding: 0;
                    span {
                        display: block;
                        width: 100%;
                        text-align: center;
                        color: #F46150;
                        font-size: 14px;
                        font-weight: bold;
                    }
                    small {
                        display: block;
                        width: 100%;
                        text-align: center;
                        color: #888;
                        font-size: 11px;
                        font-weight: bold;
                    }
                }
            }
        }
        .form-control {
            border: 0;
            background-color: #f9f9f9;
            font-size: 13px;
        }
        p {
            font-size: 13px;
        }
        .mazad_table {
            thead {
                background-color: #343434;
                th {
                    color: #fff;
                    border: 0;
                    font-size: 10px;
                }
            }
            .by {
                line-height: 1;
                img {
                    width: 35px;
                    height: 35px;
                    border-radius: 50%;
                    overflow: hidden;
                }
                span {
                    margin: 8px 0;
                    font-weight: bold;
                    font-size: 10px;
                    color: #888;
                }
            }
            td {
                padding: 10px;
                font-size: 11px;
                line-height: 2.5;
                border: 0;
            }
        }
        .adv_owner {
            .top {
                border-bottom: 1px solid#9993;
                padding: 20px 0;
                .img {
                    img {
                        width: 90px;
                        height: 90px;
                        object-fit: cover;
                        border-radius: 50%;
                        margin-bottom: 15px;
                    }
                }
                .info {
                    h6 {
                        font-weight: bold;
                        font-size: 14px;
                        color: #000;
                        margin: 0;
                    }
                    p {
                        color: #999;
                        margin: 7px 0;
                    }
                    a {
                        color: #D8001B;
                        font-weight: bold;
                        border-bottom: 1px solid#D8001B;
                        font-size: 11px;
                    }
                }
            }
            .bottom {
                .btns {
                    padding: 10px 0;
                    a {
                        width: 40px;
                        height: 40px;
                        line-height: 40px;
                        text-align: center;
                        border-radius: 50%;
                        margin: 5px;
                    }
                }
                ul {
                    padding: 0 3vw;
                    li {
                        margin: 20px 0;
                        i {
                            color: #F46150;
                            margin: 0 5px;
                        }
                    }
                }
            }
        }
        .simillar {
            .items {
                display: flex;
                margin-bottom: 30px;
                .img {
                    width: 40%;
                    height: 100px;
                    img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                        border-radius: 8px;
                    }
                }
                .info {
                    width: 55%;
                    margin-right: 5%;
                    h6 {
                        font-size: 14px;
                        margin-top: 10px;
                    }
                    .rate {
                        i {
                            color: #F9DE1C;
                            font-size: 12px;
                        }
                    }
                    .price {
                        color: #D8001B;
                        margin-top: 10px;
                        font-size: 15px;
                        font-weight: bold;
                    }
                }
            }
        }
        .semantics {
            .cntt {
                a {
                    width: 30%;
                    text-align: center;
                    border: 1px solid#9993;
                    border-radius: 5px;
                    padding: 8px;
                    color: #777;
                    margin: 1%;
                }
            }
        }
        .map {
            iframe {
                border-radius: 15px;
                overflow: hidden;
            }
        }
    }
}

.mazad_add_pg {
    .upload-img {
        padding: 30px 15px;
        border-radius: 20px;
        background-color: #fff;
        margin-bottom: 30px;
        p {
            margin-top: 10px;
        }
        input {
            display: none;
        }
        .upload-front {
            img {
                cursor: pointer;
            }
            margin-bottom: 30px;
        }
        .gallery {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            img {
                width: 150px;
                height: 100px;
                border-radius: 15px;
                object-fit: cover;
                margin: 10px;
                border: 1px solid#9993;
                position: relative;
                &::after {
                    position: absolute;
                    content: "";
                    left: 0;
                    top: 0;
                    width: 50px;
                    height: 50px;
                    background-color: red;
                    z-index: 20;
                }
            }
        }
    }
    .upload_video {
        background-color: #fff;
        margin-bottom: 30px;
        .r_side {
            position: relative;
            .img {
                position: relative;
                overflow: hidden;
                input {
                    position: absolute;
                    left: 0;
                    top: 0;
                    width: 100%;
                    height: 100%;
                    z-index: 10;
                    opacity: 0;
                    cursor: pointer;
                }
            }
        }
        #list {
            video {
                width: 130px;
                height: 100px;
                object-fit: cover;
                border-radius: 15px;
            }
        }
    }
    .cont {
        .form-row {
            background-color: #FCFCFC;
            padding: 50px 4vw;
            .form-group {
                margin-bottom: 30px;
                padding: 0 15px;
            }
            .form-control {
                // border: 0;
                min-height: 50px;
                &::placeholder {
                    color: #999;
                }
            }
            .phone_code {
                position: relative;
                height: max-content;
                .d-flex {
                    div {
                        &:first-of-type {
                            width: 85%;
                        }
                    }
                    div {
                        &:last-of-type {
                            width: 15%;
                        }
                    }
                    .w-100 {
                        .zip_code {
                            left: 15px;
                        }
                    }
                    select {
                        border: 0;
                        background-color: #fff;
                        min-height: 50px;
                        border-top-left-radius: 10px;
                        border-bottom-left-radius: 10px;
                        width: 100%;
                        padding-right: 15px;
                    }
                    input {
                        border-top-left-radius: 0;
                        border-bottom-left-radius: 0;
                    }
                    .zip_code {
                        position: absolute;
                        left: 15%;
                        height: 50px;
                        bottom: 0;
                        background-color: #000;
                        color: #fff;
                        text-align: center;
                        width: 70px;
                        line-height: 50px;
                    }
                }
            }
            .checks {
                display: flex;
                flex-wrap: wrap;
                .custom-checkbox {
                    width: 30%;
                    padding-right: 2rem;
                    font-size: 17px;
                    font-weight: 500;
                    color: #777;
                    margin-top: 10px;
                    .custom-control-label {
                        &::before {
                            width: 1.7rem;
                            height: 1.7rem;
                            border-radius: 50%;
                            border: 0;
                            right: -2.3rem;
                            top: -0.2rem;
                            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.07);
                        }
                        &::after {
                            top: -0.1rem;
                            right: -2.2rem;
                            display: block;
                            width: 1.5rem;
                            height: 1.5rem;
                        }
                    }
                }
                .custom-checkbox .custom-control-input:indeterminate~.custom-control-label::before {
                    background-color: #fff;
                    border: 1px solid#9992;
                }
            }
            .shad_btn {
                .butn {
                    filter: none;
                    width: 50%;
                }
            }
        }
    }
    .map_show {
        button {
            min-width: 150px;
            font-size: 12px;
            font-weight: 500;
            img {
                width: 30px;
                height: 30px;
                object-fit: contain;
                margin-left: 5px;
            }
        }
    }
    .search_tabs {
        text-align: center;
        padding: 50px 30px;
        background-color: #e86866;
        border-radius: 0;
        box-shadow: 0 10px 20px rgba(0, 0, 0, .1);
        margin-bottom: 0;
        label {
            color: #fff;
            font-size: 18px;
            i {
                color: #F9DE1C;
                cursor: pointer;
                font-size: 14px;
                position: relative;
                bottom: 5px;
            }
        }
    }
}

// ------------- apload_car_parts ------------
.apload_car_parts {
    padding: 30px;
    background-color: #fff;
    // box-shadow: 0 5px 20px rgba(0, 0, 0, .1);
    border-radius: 20px;
    margin: 30px 0;
    .upload-text {
        display: none !important;
    }
    .image-uploader {
        min-height: 10rem;
        border: 1px solid#9993;
        position: relative;
        border-radius: 10px;
        height: 200px;
        cursor: pointer;
        .uploaded {
            width: 100%;
            height: 100%;
            padding: 0;
            .uploaded-image {
                width: 100%;
                height: 100%;
                margin: 0;
                img {
                    border-radius: 10px;
                    object-fit: contain;
                    padding: 10px;
                    z-index: 1;
                    right: 0 !important;
                }
            }
        }
        .delete-image {
            z-index: 2;
        }
    }
    .items_part {
        margin: 15px 0;
        h6 {
            font-size: 12px;
            padding: 10px 30px;
            border-radius: 8px;
            color: #333;
            background-color: #f5f5f5;
            margin-top: 5px;
            text-align: center;
        }
        .icon {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -70%);
            pointer-events: none;
            z-index: 0;
            max-width: 100px;
            max-height: 150px;
            object-fit: contain;
            opacity: 0.3;
        }
    }
}

// ------------ modals style --------------
.modal_login {
    .modal-body {
        padding: 30px;
    }
    .icon {
        img {
            width: 70px;
            height: 70px;
            object-fit: contain;
        }
    }
    h4 {
        margin: 20px 0;
        font-size: 18px;
        line-height: 1.5;
    }
    .checks {
        .custom-checkbox {
            border: 1px solid#9992;
            padding: 10px 30px;
            border-radius: 30px;
            margin: 5px;
            // background-color: #fbfbfb;
        }
    }
}


/* ----------------- payment page ------------------ */

.payment {
    background-color: #f7f7f7;
    padding: 3vw;
    .content {
        .items {
            background-color: #fff;
            padding: 30px;
            border-radius: 30px;
            margin-top: 50px;
            padding-bottom: 120px;
            height: calc(100% - 50px);
            box-shadow: 0 8px 15px #0002;
            text-shadow: 0 4px 5px #0003;
            .top {
                padding: 15px 0;
                border-bottom: 2px solid#9992;
                h5 {
                    font-size: 30px;
                    // font-weight: 500;
                }
                h2 {
                    font-size: 45px;
                    small {
                        font-size: 20px;
                    }
                }
            }
            .btm {
                padding: 15px 0;
                ul {
                    li {
                        position: relative;
                        padding-right: 15px;
                        font-size: 16px;
                        font-weight: bold;
                        // text-shadow: 0 4px 5px #0005;
                        color: #333;
                        margin: 20px 0;
                        display: flex;
                        justify-content: space-between;
                        line-height: 1.8;
                        &::after {
                            position: absolute;
                            content: "";
                            right: 0;
                            top: 10px;
                            width: 5px;
                            height: 5px;
                            border-radius: 50%;
                            background-color: #333;
                        }
                        small {
                            color: #9999;
                            padding: 5px 15px;
                            border: 1px solid#9993;
                            border-radius: 30px;
                        }
                    }
                }
                .shad_btn {
                    position: absolute;
                    max-width: calc(100% - 100px);
                    bottom: 50px;
                    .butn {
                        border-radius: 10px;
                        margin: 30px 0 0;
                        width: 100%;
                    }
                }
            }
            &.active {
                margin-top: 15px;
                background-color: #1A1F25;
                .top {
                    border-color: #ffffffec;
                    h5 {
                        // font-size: 40px;
                        // font-weight: 800;
                        color: #fff;
                    }
                    h2 {
                        color: #fff;
                    }
                }
                .btm {
                    li {
                        color: #fff;
                    }
                    .shad_btn {
                        .butn {
                            border-radius: 10px;
                            margin: 50px 0 0;
                            background-color: #fff !important;
                            filter: drop-shadow(0px 7px 22px rgba(181, 21, 230, 0.397));
                        }
                    }
                }
            }
            &.wht {
                .top {
                    border-color: #ffffffec;
                    h5 {
                        color: #fff;
                    }
                    h2 {
                        color: #fff;
                    }
                }
                .btm {
                    li {
                        color: #fff;
                        &::after {
                            background-color: #fff;
                        }
                    }
                    .shad_btn {
                        .butn {
                            border-radius: 10px;
                            margin: 50px 0 0;
                            background-color: #fff !important;
                            filter: drop-shadow(0px 7px 22px #fff1);
                        }
                    }
                }
            }
            &.bronz {
                background-color: #F9DE1C;
                // -----------------------
                // background: linear-gradient( -72deg, #ca7345, #ffdeca 16%, #ca7345 21%, #ffdeca 24%, #ca6238 27%, #ca7345 36%, #ffdeca 45%, #ffdeca 60%, #ca7345 72%, #ffdeca 80%, #ca7345 84%, #ca5121);
            }
            &.silver {
                background: #C0C0C0;
                background: linear-gradient(to bottom, #C0C0C0 0%, #B1B1B1 100%);
                background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #C0C0C0), color-stop(100%, #B1B1B1));
                background: -webkit-linear-gradient(top, #C0C0C0 0%, #B1B1B1 100%);
                background: -moz-linear-gradient(top, #C0C0C0 0%, #B1B1B1 100%);
                background: -o-linear-gradient(top, #C0C0C0 0%, #B1B1B1 100%);
                background: -ms-linear-gradient(top, #C0C0C0 0%, #B1B1B1 100%);
                border: 1px solid#A2A2A2;
                box-shadow: inset 0 1px 0 #CFCFCF;
                -webkit-box-shadow: inset 0 1px 0 #CFCFCF;
                -moz-box-shadow: inset 0 1px 0 #CFCFCF;
                // ----------------------------
                // background: linear-gradient( -72deg, #dedede, #ffffff 16%, #dedede 21%, #ffffff 24%, #454545 27%, #dedede 36%, #ffffff 45%, #ffffff 60%, #dedede 72%, #ffffff 80%, #dedede 84%, #a1a1a1);
            }
            &.gold {
                background-image: url(../images/gold_back2.jpg);
                background-size: cover;
                background-repeat: no-repeat;
                // -------------------------
                // background: linear-gradient( -72deg, #ffde45, #ffffff 16%, #ffde45 21%, #ffffff 24%, #452100 27%, #ffde45 36%, #ffffff 45%, #ffffff 60%, #ffde45 72%, #ffffff 80%, #ffde45 84%, #452100);
            }
            &.plt {
                background-image: url(../images/plat_back4.jpg);
                background-size: cover;
                background-repeat: no-repeat;
                // ----------------------
                // background: linear-gradient( -72deg, #dedeff, #ffffff 16%, #dedeff 21%, #ffffff 24%, #555564 27%, #dedeff 36%, #ffffff 45%, #ffffff 60%, #dedeff 72%, #ffffff 80%, #dedeff 84%, #555564);
            }
        }
    }
    .modal_pay {
        .modal-content {
            border-radius: 25px;
            padding: 20px;
        }
        .pay-selection {
            display: inline-flex;
            justify-content: space-between;
            width: 100%;
            label {
                width: 100%;
                .time-input-element {
                    opacity: 0;
                    position: absolute;
                }
                .time-input {
                    width: fit-content;
                    padding: 20px 30px;
                    border: 1px solidtransparent;
                    cursor: pointer;
                    background-color: #f8f8f8;
                    border-radius: 25px;
                    .panel-heading img {
                        width: 100px;
                        height: 50px;
                        object-fit: contain;
                    }
                }
                .time-input-element:checked+.time-input {
                    border: 1px solid#F39C74;
                }
            }
        }
        .main-butn {
            width: 300px;
            height: 55px;
            line-height: 55px;
            background: linear-gradient(90deg, rgba(155, 67, 141, 1) 35%, rgba(241, 111, 92, 1) 100%);
            &:hover {
                background: linear-gradient(90deg, rgba(241, 111, 92, 1) 35%, rgba(241, 111, 92, 1) 100%);
            }
        }
        .butn {
            padding: 12px 40px;
        }
        .pay_check {
            padding: 20px;
            .hed {
                margin-bottom: 15px;
                h4 {
                    span {
                        color: #fd1d1d;
                    }
                }
            }
            ul {
                li {
                    line-height: 2;
                    color: #777;
                }
            }
            p {
                line-height: 2;
                color: #777;
            }
            .copon {
                padding: 30px;
                border-radius: 20px;
                background-color: #f9f9f9;
                margin: 50px 0;
                input {
                    width: 100%;
                    padding: 15px;
                    background-color: #fff;
                    border-radius: 10px;
                    border: 0;
                    margin: 15px 0;
                }
                h6 {
                    margin-top: 10px;
                    strong {
                        color: #fd1d1d;
                        margin: 0 10px;
                    }
                }
            }
        }
    }
}


/* ----------------- contact_pg ------------------ */

.contact_pg {
    background-color: #FCFCFC;
    .img {
        height: 100%;
        position: relative;
        clip-path: polygon(20% 0, 100% 0, 80% 100%, 0% 100%);
        &::after {
            position: absolute;
            content: "";
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: #F9DE1C;
            opacity: 0.4;
        }
        img {
            height: 100%;
            width: 100%;
            object-fit: cover;
        }
    }
    .l_side {
        padding: 80px 15px;
    }
}


/* ----------------- about_pg ------------------ */

.about_pg {
    background-color: #FCFCFC;
    .img {
        height: 100%;
        position: relative;
        clip-path: polygon(20% 0, 100% 0, 80% 100%, 0% 100%);
        &::after {
            position: absolute;
            content: "";
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: #F9DE1C;
            opacity: 0.4;
        }
        img {
            height: 100%;
            width: 100%;
            object-fit: cover;
        }
    }
    .l_side {
        padding: 80px 15px;
        .img_logo {
            img {
                width: 150px;
                margin-bottom: 40px;
            }
        }
        .text {
            color: #777;
            line-height: 2;
            margin-bottom: 20px;
            font-size: 16px;
        }
    }
}


/* ----------------- rang slider ------------------ */

.range-slider .range-group {
    margin: 15px 0;
}

.range-slider .range-group .range-input {
    position: absolute;
    left: 0;
    top: 0;
    margin-bottom: 0;
    -webkit-appearance: none;
    width: 100%;
    border-bottom: 0;
    height: 5px;
    background-color: #D8001B;
    filter: invert(9%) sepia(100%) saturate(7491%) hue-rotate(357deg) brightness(92%) contrast(93%);
}

.range-slider .range-group .range-input:focus {
    outline: 0
}

.range-slider .range-group .range-input::-webkit-slider-runnable-track {
    width: 100%;
    height: 2px;
    cursor: pointer;
    animation: .2s;
    background: #006195;
    border-radius: 1px;
    box-shadow: none;
    border: 0
}

.range-slider .range-group .range-input::-webkit-slider-thumb {
    z-index: 2;
    position: relative;
    height: 18px;
    width: 18px;
    border-radius: 50%;
    background: #006195;
    cursor: pointer;
    -webkit-appearance: none;
    margin-top: -7px
}

.range-slider .range-group .range-input::-moz-range-track {
    width: 100%;
    height: 2px;
    cursor: pointer;
    animation: .2s;
    background: #006195;
    border-radius: 1px;
    box-shadow: none;
    border: 0
}

.range-slider .range-group .range-input::-moz-range-thumb {
    z-index: 2;
    position: relative;
    box-shadow: 0px 0px 0px #000;
    border: 1px solid#006195;
    height: 18px;
    width: 18px;
    border-radius: 50%;
    background: #006195;
    cursor: pointer
}

.range-slider .range-group .range-input::-ms-track {
    width: 100%;
    height: 5px;
    cursor: pointer;
    animation: .2s;
    background: transparent;
    border-color: transparent;
    color: transparent
}

.range-slider .range-group .range-input::-ms-fill-lower,
.range-slider .range-group .range-input::-ms-fill-upper {
    background: #006195;
    border-radius: 1px;
    box-shadow: none;
    border: 0
}

.range-slider .range-group .range-input::-ms-thumb {
    z-index: 2;
    position: relative;
    height: 18px;
    width: 18px;
    border-radius: 50%;
    background: #006195;
    cursor: pointer
}

.range-slider .number-group {
    text-align: center;
    color: #D8001B;
    font-weight: bold;
    padding: 15px 0;
    input {
        border: 0;
        background-color: transparent;
        color: #D8001B;
        width: max-content;
        font-weight: bold;
        font-size: 18px;
        text-align: center;
    }
}

.checks {
    display: flex;
    flex-wrap: wrap;
    .custom-checkbox {
        width: 30%;
        padding-right: 2rem;
        font-size: 17px;
        font-weight: 500;
        color: #777;
        margin-top: 10px;
        .custom-control-label {
            &::before {
                width: 1.7rem;
                height: 1.7rem;
                border-radius: 50%;
                border: 0;
                right: -2.3rem;
                top: -0.2rem;
                box-shadow: 0 2px 5px rgba(0, 0, 0, 0.07);
            }
            &::after {
                top: -0.1rem;
                right: -2.2rem;
                display: block;
                width: 1.5rem;
                height: 1.5rem;
            }
        }
    }
    .custom-checkbox .custom-control-input:indeterminate~.custom-control-label::before {
        background-color: #fff;
    }
}


/* ----------------- profile_pg ------------------ */

.profile_pg {
    background-color: #f3f3f3;
    .side_menu {
        .user_info {
            background-color: #fff;
            border-radius: 50px;
            box-shadow: 0 0 15px rgba(0, 0, 0, .05);
            .img {
                height: 300px;
                border-top-left-radius: 30px;
                border-top-right-radius: 30px;
                overflow: hidden;
                position: relative;
                &::after {
                    position: absolute;
                    content: "";
                    left: 0;
                    top: 0;
                    background-color: #F9DE1C;
                    opacity: 0;
                    width: 100%;
                    height: 100%;
                    transition: all 0.3s ease;
                    pointer-events: none;
                }
                a {
                    position: absolute;
                    right: 20px;
                    bottom: 20px;
                    width: 45px;
                    height: 45px;
                    text-align: center;
                    line-height: 45px;
                    border-radius: 50%;
                    background-color: #222;
                    color: #fff;
                    font-size: 16px;
                    z-index: 10;
                }
                input {
                    position: absolute;
                    right: 20px;
                    bottom: 20px;
                    width: 45px;
                    height: 45px;
                    opacity: 0;
                    z-index: 20;
                    cursor: pointer;
                }
                img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
                &:hover {
                    &::after {
                        opacity: 0.3;
                    }
                }
                .h_num {
                    position: absolute;
                    left: 15px;
                    top: 15px;
                    color: #000;
                    padding: 8px 30px;
                    border-radius: 30px;
                    background-color: #F9DE1C;
                    font-weight: bold;
                }
            }
            .info {
                padding: 15px;
                border-bottom: 1px solid#9992;
                h4 {
                    font-size: 20px;
                    font-weight: 600;
                    margin-bottom: 20px;
                    a {
                        float: left;
                        color: #999;
                        transform: rotate(-15deg);
                    }
                }
                .edit {
                    a {
                        width: 35px;
                        height: 35px;
                        text-align: center;
                        line-height: 35px;
                        border-radius: 50%;
                        font-size: 14px;
                        margin: 5px;
                    }
                }
            }
            .cont {
                padding: 15px 2vw;
                li {
                    margin: 15px 0;
                    a {
                        font-weight: 500;
                        font-size: 16px;
                        i {
                            margin-left: 10px;
                        }
                    }
                }
                .social {
                    padding: 5px;
                    text-align: center;
                    a {
                        width: 35px;
                        height: 35px;
                        line-height: 35px !important;
                        text-align: center;
                        border-radius: 50%;
                        margin: 0 3px;
                        color: #fff;
                        &:nth-of-type(1) {
                            background-color: #3b5998;
                        }
                        &:nth-of-type(2) {
                            background: linear-gradient(45deg, #405de6, #5851db, #833ab4, #c13584, #e1306c, #fd1d1d);
                        }
                        &:nth-of-type(3) {
                            background-color: #1da1f2;
                        }
                        &:nth-of-type(4) {
                            background-color: #FFFC00;
                        }
                    }
                }
            }
        }
        .side_links {
            background-color: #fff;
            border-radius: 50px;
            box-shadow: 0 0 15px rgba(0, 0, 0, .05);
            margin-top: 30px;
            padding: 15px 2vw;
            .nav-pills {
                li {
                    text-align: center;
                    margin: 15px 0;
                    position: relative;
                    a {
                        color: #888;
                        &.active {
                            color: #000;
                            font-weight: bold;
                        }
                    }
                    .m_num {
                        position: absolute;
                        right: 0;
                        top: -3px;
                        width: 25px;
                        height: 25px;
                        line-height: 25px;
                        text-align: center;
                        font-size: 12px;
                        border-radius: 50%;
                        color: #fff;
                        background-color: #e86866;
                    }
                }
            }
        }
        .fllw {
            display: flex;
            justify-content: center;
            .items {
                width: 45%;
                margin: 2%;
                padding: 10px;
                border-radius: 15px;
                background-color: #fcfcfc;
            }
        }
        .wallet {
            background: #f5f5f5;
            border-radius: 20px;
            margin: 1vw 0;
            padding: 20px;
            text-align: center;
            h2 {
                color: #EF4744;
                margin: 15px 0;
            }
        }
    }
    .content {
        padding: 50px 30px;
        background-color: #fcfcfc;
        border-radius: 50px;
        position: relative;
        // height: 100%;
        .form-group-search {
            position: relative;
            button {
                position: absolute;
                right: 15px;
                top: 12px;
                font-size: 16px;
                background-color: transparent;
                color: #000;
                border: 0;
            }
            input {
                padding-right: 50px;
            }
        }
        .products {
            .prod_cont {
                .prod_items {
                    .img {
                        height: 150px;
                        .fav-btn {
                            top: 15px;
                            right: 15px;
                            width: 30px;
                            height: 30px;
                        }
                        .fav-btn input[type="checkbox"]:before,
                        .fav-btn input[type="checkbox"]:after {
                            width: 17px;
                            height: 17px;
                        }
                    }
                }
            }
        }
        .rate_tab {
            .items_rate {
                padding: 40px;
                border-radius: 50px;
                background-color: #fff;
                display: flex;
                margin-top: 30px;
                .img {
                    width: 20%;
                    img {
                        width: 100px;
                        height: 100px;
                        border-radius: 50%;
                        object-fit: cover;
                        margin-left: 30px;
                    }
                }
                .info {
                    padding-top: 10px;
                    width: 65%;
                    h6 {
                        .star_rate {
                            color: #9995;
                            margin-right: 6vw;
                        }
                    }
                    p {
                        color: #000;
                    }
                    small {
                        color: #888;
                    }
                }
                .time {
                    width: 15%;
                    text-align: left;
                    font-weight: bold;
                    color: #777;
                    padding-top: 10px;
                }
            }
        }
        .user_info {
            height: 0;
            overflow: hidden;
            padding-bottom: 20px;
            &.show,
            &.active {
                height: max-content;
            }
            input {
                display: block;
                border: 0;
                width: 100%;
                background-color: #f5f5f5;
                padding: 12px;
                border-radius: 5px;
                margin-top: 5px;
            }
            &.info_edit {
                input {
                    background-color: #fff;
                }
            }
            .form-group {
                position: relative;
                .show_pass {
                    position: absolute;
                    left: 10px;
                    bottom: 10px;
                    cursor: pointer;
                }
            }
        }
        .msg_navs {
            display: flex;
            a {
                text-align: center;
                position: relative;
                img {
                    width: 80px;
                    height: 80px;
                    border-radius: 50%;
                    object-fit: cover;
                    margin: 20px 5px 10px;
                }
                .sts {
                    position: absolute;
                    right: 5px;
                    top: 77px;
                    color: #bebebe;
                    &.active {
                        color: #67E184;
                    }
                }
            }
        }
        .msg_cont {
            .msg_name {
                .sts {
                    font-size: 14px;
                    margin-left: 5px;
                    color: #bebebe;
                    &.active {
                        color: #67E184;
                    }
                }
            }
            .day {
                position: relative;
                &::after {
                    position: absolute;
                    content: "";
                    left: 0;
                    top: 50%;
                    width: 100%;
                    height: 1px;
                    background-color: #9995;
                }
                span {
                    padding: 10px 20px;
                    color: #999;
                    background-color: #fcfcfc;
                    position: relative;
                    z-index: 10;
                }
            }
            .l_msg {
                display: flex;
                width: 60%;
                justify-content: flex-end;
                margin: 20px auto 20px 0;
                img {
                    width: 40px;
                    height: 40px;
                    border-radius: 50%;
                    object-fit: cover;
                    margin: 0 15px;
                }
                .msg_cnt {
                    background-color: #f5f5f5;
                    padding: 10px 30px;
                    border-radius: 10px;
                    border-bottom-left-radius: 0;
                }
            }
            .r_msg {
                display: flex;
                width: 60%;
                margin: 20px 0 20px auto;
                .msg_cnt {
                    background-color: #34332E;
                    padding: 10px 30px;
                    border-radius: 10px;
                    border-bottom-right-radius: 0;
                    color: #fff;
                }
            }
            .form-group {
                position: relative;
                input[type=text] {
                    width: 100%;
                    padding: 15px;
                    border: 1px solid#9994;
                    border-radius: 50px;
                    padding-left: 150px;
                }
                button {
                    position: absolute;
                    left: 7px;
                    bottom: 6px;
                    width: 40px;
                    height: 40px;
                    border-radius: 50%;
                    background-color: #151515;
                    color: #fff;
                }
                .add_img {
                    position: absolute;
                    left: 55px;
                    bottom: 6px;
                    padding: 7px 15px;
                    height: 40px;
                    background-color: #f2f2f2;
                    border-radius: 50px;
                    input {
                        position: absolute;
                        left: 0;
                        top: 0;
                        width: 100%;
                        height: 100%;
                        opacity: 0;
                        z-index: 5;
                    }
                }
            }
            .messages_content {
                height: 400px;
                overflow: auto;
                overflow-x: hidden;
                scroll-behavior: auto;
                scrollbar-width: thin;
                scrollbar-color: #f5821f50 #f5f5f5;
            }
            .messages_content::-webkit-scrollbar {
                height: 5px;
                width: 3px;
                background: #f5f5f5;
            }
            .messages_content::-webkit-scrollbar-thumb {
                background: #f5821f50;
                -webkit-border-radius: 0;
            }
            .messages_content::-webkit-scrollbar-corner {
                background: #f5821f50;
            }
        }
        .noti_tab {
            .items {
                padding: 20px 30px;
                background-color: #fff;
                box-shadow: inset 0 0 10px rgba(0, 0, 0, .05);
                margin-bottom: 30px;
                border-radius: 20px;
                overflow: hidden;
                position: relative;
                display: flex;
                align-items: center;
                .img {
                    width: 120px;
                    img {
                        width: 100px;
                        height: 100px;
                        object-fit: cover;
                        border-radius: 50%;
                        margin-left: 50px;
                    }
                }
                .info {
                    width: calc(100% - 120px);
                    display: block;
                    h6 {
                        color: #fd1d1d;
                        margin: 0;
                    }
                    small,
                    p {
                        color: #777;
                    }
                }
                .cls {
                    position: absolute;
                    left: 0;
                    top: 0;
                    width: 45px;
                    height: 45px;
                    line-height: 45px;
                    text-align: center;
                    border-radius: 50%;
                    background-color: #fff;
                    box-shadow: inset 0 0 10px rgba(0, 0, 0, .05);
                }
            }
        }
        .mazad_tab {
            .nav-pills {
                justify-content: center;
                margin-bottom: 10px;
                .nav-item {
                    a {
                        color: #111;
                        background-color: #f1f1f1;
                        letter-spacing: 1px;
                        padding: 12px 50px;
                        border-radius: 50px;
                        box-shadow: 0 10px 20px #F9DE1C50;
                        margin: 10px;
                        font-weight: 500;
                        &.active {
                            background-color: #F9DE1C;
                        }
                    }
                }
            }
            .prod_cont.list {
                .prod_items {
                    width: 100%;
                    .img {
                        height: 210px;
                    }
                    &:hover {
                        .img {
                            img {
                                transform: none;
                            }
                        }
                    }
                }
            }
        }
    }
}

.end_req {
    .modal-content {
        background-color: #f5f5f5;
        border-radius: 15px;
        overflow: hidden;
        padding: 15px 30px;
        h5 {
            font-size: 17px;
            margin-bottom: 10px;
            font-weight: 600;
        }
    }
}

.modal {
    .modal-content {
        border-radius: 15px;
        overflow: hidden;
    }
}


/* ---------- rate --------- */

.stars {
    display: block;
    position: relative;
    text-align: center;
    margin-bottom: 30px;
    direction: ltr;
}

.stars input {
    border-radius: 0;
    visibility: hidden;
    width: 30px;
    cursor: pointer;
}

.stars input:after {
    content: '\f005';
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 30px;
    color: #EEE;
    visibility: visible;
    display: inline-block;
    width: 30px;
    height: 30px;
    -webkit-transition: background 0.3s;
    transition: background 0.3s;
    text-shadow: 0px 2px 4px RGBA(0, 0, 0, 0.2);
    -webkit-transition: -webkit-transform 0.6s;
    transition: -webkit-transform 0.6s;
    transition: transform 0.6s;
    transition: transform 0.6s, -webkit-transform 0.6s;
}

.stars input:hover:after {
    opacity: 0.8;
}

.rate-stars {
    color: #fc0;
}

.stars input:checked:after {
    color: #fc0;
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
}

.stars input:checked~input:after {
    color: #fc0;
}

.stars input:not(:checked):after {
    color: #eee;
}


/* ----------------- commission_pg ------------------ */

.commission_pg {
    .content {
        padding: 50px;
        border-radius: 20px;
        .input_crd {
            background-color: #fff;
            padding: 30px;
            border: 1px solid#9992;
            border-radius: 15px;
            .row {
                border: 1px solid#9992;
                padding: 5px;
                align-items: center;
                margin: 15px 0;
                border-radius: 10px;
                &:last-of-type {
                    border: 0;
                    background-color: #f5f5f5;
                    .form-control {
                        background-color: #f5f5f5;
                    }
                }
                .form-control {
                    border: 0;
                    border-right: 1px solid#9993;
                    border-radius: 0;
                }
            }
        }
    }
}

.modal_pay {
    .modal-content {
        border-radius: 25px;
        padding: 20px;
    }
    .pay-selection {
        display: inline-flex;
        justify-content: space-between;
        width: 100%;
        label {
            width: 100%;
            .time-input-element {
                opacity: 0;
                position: absolute;
            }
            .time-input {
                width: fit-content;
                padding: 20px 30px;
                border: 1px solidtransparent;
                cursor: pointer;
                background-color: #f8f8f8;
                border-radius: 25px;
                .panel-heading img {
                    width: 100px;
                    height: 50px;
                    object-fit: contain;
                }
            }
            .time-input-element:checked+.time-input {
                border: 1px solid#F39C74;
            }
        }
    }
    .main-butn {
        width: 300px;
        height: 55px;
        line-height: 55px;
        background: linear-gradient(90deg, rgba(155, 67, 141, 1) 35%, rgba(241, 111, 92, 1) 100%);
        &:hover {
            background: linear-gradient(90deg, rgba(241, 111, 92, 1) 35%, rgba(241, 111, 92, 1) 100%);
        }
    }
    .butn {
        padding: 12px 40px;
    }
}


/*********************** Start Page of commission ***********************/

.commission-pg .image-content {
    width: 100%;
    height: 500px;
}

.commission-pg .image-content img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 10px solid#fff;
    object-fit: contain;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
}

.commission-pg .text {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
}

.commission-pg .text h1 {
    line-height: 3.3rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    font-size: 2.4rem;
}

.commission-pg .text p {
    line-height: 2rem;
    font-size: 16px;
}

.commission-pg .text .more {
    padding: 15px 40px;
    margin-top: 15px;
}

.calc-commission .inner {
    padding: 80px 40px;
    background-color: #fff;
    border-radius: 25px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    -ms-border-radius: 25px;
    -o-border-radius: 25px;
}

.calc-commission .inner .basic_title {
    width: fit-content;
    margin: auto;
    display: block;
}

.calc-commission .inner .com_input_wrapper {
    border: 1px solid#ddd;
    text-align: center;
    padding: 10px;
    margin: 20px 0px 15px 0px;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}

.calc-commission .inner .com_input_wrapper.disabled-input-wrapper {
    background-color: #F5F6F8;
}

.calc-commission .inner .com_input_wrapper.disabled-input-wrapper span {
    color: #999;
}

.calc-commission .inner .com_input_wrapper.disabled-input-wrapper .form-control {
    color: #999;
}

.calc-commission .inner .com_input_wrapper span {
    font-weight: bold;
    font-size: 16px;
    line-height: 40px;
}

.calc-commission .inner .com_input_wrapper .form-control {
    border: 1px solidtransparent;
    border-right: 1px solid#ddd;
    text-align: center;
}

.form-control:disabled,
.form-control[readonly] {
    background-color: transparent;
}

.calc-commission .inner .text-content {
    text-align: center;
    margin: 40px 0px 0px 0px;
}

.calc-commission .inner .text-content h5 {
    font-weight: 600;
    margin-bottom: 15px;
}

.calc-commission .inner .text-content h5 span {
    color: #EF4744;
    margin-right: 5px;
}

.calc-commission .inner .text-content .mada {
    color: #14901c;
    font-size: 15px;
    margin: 1.5rem 0rem;
    font-weight: 600;
}

.calc-commission .inner .text-content p i {
    margin: 0 3px;
}

.calc-commission .inner .text-content .more {
    padding: 15px 70px;
    margin-top: 15px;
    font-size: 16px;
    margin-bottom: 40px;
    border: 1px solid#E1714C;
}

.calc-commission .inner .text-content .payment-methods {
    margin: 15px 0px 15px 0px;
}

.calc-commission .inner .text-content .payment-methods img {
    width: 30px;
    margin: 0px 5px;
    object-fit: contain;
}

.calc-commission .inner .text-content .bank {
    color: #fda500;
    font-size: 15px;
    margin: 1.5rem 0rem;
    font-weight: 600;
}

.calc-commission .inner .item {
    width: 100%;
    border-radius: 10px;
    -webkit-box-shadow: 8px 10px 0 rgba(0, 0, 0, 0.1);
    box-shadow: 8px 10px 0 rgba(0, 0, 0, 0.1);
    padding: 30px 15px 15px 15px;
    margin-bottom: 25px;
    background-color: #F5F6F8;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}

.calc-commission .inner .item .bank-logo {
    width: 40px;
    object-fit: contain;
    position: absolute;
    top: 15px;
    left: 25px;
}

.calc-commission .inner .item .name {
    font-size: 16px;
    color: #202020;
    font-weight: bold;
}

.calc-commission .inner .item span {
    font-weight: bold;
    color: #888;
}

.calc-commission .inner .item h6 {
    color: #E1714C;
    font-weight: bold;
    margin-top: .5rem;
    margin-bottom: .9rem;
}

.calc-commission .inner .item h6.ipan {
    color: #666;
    font-weight: 500;
}

.calc-commission .bank-transfer {
    padding: 50px 30px;
    background-color: #f9f9f9;
    border-radius: 20px;
    margin-bottom: 50px;
}

.calc-commission .bank-transfer h4 {
    font-weight: 900;
    margin-bottom: .9rem;
}

.calc-commission .bank-transfer .desc {
    color: #777;
    font-size: 15px;
    margin: 1.5rem 0rem;
    font-weight: 600;
}

.calc-commission .bank-transfer .form-group {
    text-align: start;
    margin-bottom: 1.5rem;
}

.calc-commission .bank-transfer .form-group label {
    color: #666;
    font-size: 15px;
    font-weight: 600;
    display: grid;
    margin-bottom: .7rem;
}

.calc-commission .bank-transfer .form-group .form-control {
    text-align: start;
    color: #333;
    font-weight: 500;
}

.calc-commission .bank-transfer .form-group select.form-control {
    text-align-last: start;
}

.calc-commission .bank-transfer .more {
    margin-bottom: 10px !important;
}

.calc-commission .bank-transfer .link-butn {
    display: block;
    font-size: 17px;
    font-weight: 600;
    color: #E1714C;
}


/* ----------------- animation ------------------ */

@keyframes expand {
    1% {
        width: 0;
        height: 0;
        opacity: 1;
    }
    100% {
        width: 750%;
        height: 750%;
        opacity: 0;
        border-color: #fff;
        background-color: none;
        border-width: 2px;
    }
}


/* ----------------- responsive ------------------ */

@media screen and (max-width: 991px) {
    header .col-lg-5 {
        order: 2;
    }
    .navbar {
        position: relative;
        padding: 15px;
        overflow: hidden;
        width: 100%;
    }
    .navbar .w-100 {
        width: auto !important;
    }
    .navbar-toggler {
        float: left;
        padding: 15px 0;
    }
    #nav-icon2 {
        display: block;
    }
    .sections_btn {
        float: left;
        margin-top: -45px;
    }
    .navbar .navbar-nav {
        background-color: #F9DE1C;
        margin-top: 20px;
    }
    .navbar .navbar-nav .nav-item .nav-link {
        margin: 10px;
    }
    header {
        padding-top: 30px;
    }
    header .info {
        padding: 0;
    }
    header .form_box {
        margin-bottom: 30px;
    }
    header .form_box .nav-pills li {
        width: calc(100% / 4);
    }
    .sections .content ul {
        flex-wrap: wrap;
        justify-content: center;
    }
    .sections .content ul li {
        width: calc(100% / 2);
        margin-bottom: 30px;
    }
    .products .prod_cont .prod_items,
    .products .prod_cont.list .prod_items {
        width: 100%;
        display: block;
    }
    .products .prod_cont.list .prod_items .img {
        width: 100%;
        height: 250px;
    }
    .products .prod_cont.list .prod_items .info {
        width: 100%;
    }
    .mazad .top .butn {
        font-size: 10px;
        min-width: 120px;
        padding: 15px;
        text-align: center;
        margin-left: 5px;
    }
    .dv .content {
        padding: 120px 30px;
    }
    .dv .content .info .prc {
        margin-top: 30px;
    }
    .newsletter .content.animated {
        padding: 15px;
        clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 0%);
    }
    .mazad .mazad_lg {
        margin-bottom: 30px;
        overflow: hidden;
    }
    footer .col-lg-2:last-of-type {
        padding: 0 15px;
    }
    .inner_subscribe .l_side .form-group {
        margin-top: 30px;
    }
    .mazad_show .more_details .det_content .items {
        width: 50%;
    }
    .mazad_show .about_mazad .nav-pills {
        padding: 0 20px;
    }
    .head .edit a {
        width: 30px;
        height: 30px;
        line-height: 30px;
    }
    .mazad_add_pg .cont .form-row .checks .custom-checkbox {
        width: 50%;
        margin-top: 15px !important;
    }
    .profile_pg .side_menu .side_links {
        margin-bottom: 50px;
    }
    .show_btn.w-50 {
        width: 100% !important;
    }
    .profile_pg .content .msg_cont .r_msg,
    .profile_pg .content .msg_cont .l_msg {
        width: 80% !important;
    }
    .profile_pg .content .rate_tab .items_rate {
        display: block;
        text-align: center;
    }
    .profile_pg .content .rate_tab .items_rate .img,
    .profile_pg .content .rate_tab .items_rate .info {
        width: 100%;
    }
    .profile_pg .content .rate_tab .items_rate .info h6 .star_rate {
        margin: 10px 0;
        display: block;
    }
    .profile_pg .content .rate_tab .items_rate .time {
        display: block;
        width: 100%;
        text-align: center;
    }
    .profile_pg .content .rate_tab .items_rate .img img {
        margin: 0;
    }
}