@import 'global';

/**********************************************
    Start Public Classes
**********************************************/
.section {
    position: relative;
    padding: 70px 0 ;
    overflow: hidden;
}

.swiper-container ,
.products_sec  {
    // pagination
    .swiper-pagination {
        bottom: 0;
        .swiper-pagination-bullet {
            width: 10px;
            height: 10px;
            border-radius: 25px;
        }
        .swiper-pagination-bullet-active {
            // width: 30px;
            background: var(--primary);
        }
    }
    // nav buttons
    .swiper-button-next, 
    .swiper-button-prev {
        background-image: unset;
        width: 40px;
        height: 40px;
        border: 1px solid transparent;
        border-radius: 50%;
        background-image: unset;
        background-color: #bc817144;
        transition: all .3s linear;
        // opacity: .7;
        &::before {
            font-family: "Font Awesome 6 Pro";
            font-weight: 900;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            font-size: 15px;
            color: #333;
            transition: all .3s linear;
        }
        &:hover{
            background-color: var(--primary);
            opacity: 1;
            &::before{
                color: #fff;
            }
        }
    }
    .swiper-button-next,
    .swiper-container-rtl .swiper-button-prev{
        right: 2%;
        left: auto;
        &::before {
            content: '\f178';
        }
    }
    .swiper-button-prev,
    .swiper-container-rtl .swiper-button-next{
        left: 2%;
        right: auto;
        &::before {
            content: '\f177';
        }
    }
}

.butn {
    position: relative;
    padding: .7rem 2rem;
    width: fit-content;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 20px;
    font-family: somar_bold;
    border: 1px solid transparent;
    border-radius: 5px;
    i {
        margin-inline-end: 7px;
    }
    .icon {
        transition: all .1s linear;
    }
    &.sm_butn {
        padding: 0;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        .icon {
            width: 20px;
            height: 20px;
            object-fit: contain;
        }
    }
    &.primary_butn {
        background-color: var(--primary);
        color: #fff;
    }
    &.primary_border_butn {
        border: 1px solid var(--primary);
        color: var(--primary);
        background-color: transparent;
    }
    &.secondary_butn {
        background-color: var(--secondary);
        color: #1E1E1E;
    }
    &.secondary_border_butn {
        border: 1px solid var(--secondary);
        color: var(--secondary);
        background-color: transparent;
    }
    &.white_butn {
        background-color: #fff;
        color: #333;
    }
    &.white_border_butn {
        background-color: #fff;
        border: 1px solid #D6D3D3;
    }
    &.gray_butn {
        background-color: #f5f5f5;
        color: var(--primary);
    }
    &:hover {
        background-color: #aa7364;
        border-color:  #aa7364;
        color: #fff !important;
        .icon {
            filter:  invert(99%) sepia(0%) saturate(47%) hue-rotate(41deg) brightness(127%) contrast(96%);
        }
    }
}

.icon18 {
    width: 18px;
    height: 18px;
    object-fit: contain;
}

.icon15 {
    width: 15px;
    height: 15px;
    object-fit: contain;
}

.sec_head {
    .title_head {
        font-size: 60px;
    }
    .subtitle_head {
        font-size: 30px;
    }
    &.has_border {
        position: relative;
        &::after {
            content: '';
            width: 100%;
            height: 33px;
            display: block;
            background: url(../images/border.png) no-repeat center;
            background-size: contain;
            margin: 35px 0 0px 0;
        }
    }
}

.title_w_border {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    &::after {
        content: '';
        width: calc(100% - 225px);
        border: 1px dashed var(--primary);
        display: inline-block;
        height: 1px;
    }
}

.modal {
    .btn-close {
        filter: var(--filterPrimary);
        position: absolute;
        left: 15px;
        top: 15px;
    }
    .modal-content {
        padding: 40px;
        border-radius: 20px;
        .form-control {
            border-radius: 35px;
        }

        .butn {
            min-width: 100px;
        }
    }
}

.logoutModal {
    .icon_box {
        margin: 0 auto 25px auto;
        .icon {
            width: 80px;
            height: 80px;
            object-fit: contain;
        }
    }
}

.stateModal {
    .icon {
        margin: 0 auto 25px auto;
        width: 235px;
        display: block;
        object-fit: contain;
    }
    .title {
        font-size: 20px !important;
    }
}


.rateModal{
    .stars-content{
        .star-rating {
            display:flex;
            flex-direction: row-reverse;
            font-size: 2em;
            justify-content: center;
            padding:0 .2em;
            text-align:center;
            // width:5em;
            margin: auto;
            i{
                margin: 0 5px;
            }
        }
          
        .star-rating input {
            display:none;
        }
          
        .star-rating label {
            color:#FFEEC9;
            cursor:pointer;
        }
          
        .star-rating :checked ~ label {
            color:#FFD06A;
        }
          
        .star-rating label:hover,
        .star-rating label:hover ~ label {
            color:#FFB820;
        }
    }

    .butn{
        min-width: 140px;
        font-size: 16px;
     
    }
}

[type="tel"], [type="url"], [type="email"], [type="number"] {
    direction: inherit;
}

/**********************************************
   Start Edit Navbar & Footer
**********************************************/

//start Navbar
.navs-container {
    .top_nav {
        background-color: #FFF1E7;
        padding: 10px 0;
        color: var(--primary);
        .p {
            font-size: 13px;
            color: var(--primary);
        }
        .social_links {
            color: var(--primary);
            a {
                margin: 0 7px;
                color: var(--primary);
            }
        }
    }

    .middle_nav {
        position: relative;
        z-index: 99;
        .inner {
            border-bottom: 1px solid #eee;
            padding: 1rem .5rem;
            .dropdown {
                button {
                    font-size: 14px;
                    .icon {
                        height: 30px;
                        object-fit: contain;
                        &.icon_flag {
                            max-width: 35px;
                        }
                    }
                }
                .dropdown-menu {
                    text-align: center;
                    border-radius:  15px;
                    border-color: transparent;
                    box-shadow: 0px 0px 15px 0 #3331;
                    font-size: 13px;
                    border: 1px solid #eee;
                    .dropdown-item {
                        padding: 0.5rem 1rem;
                    }
                }
            }
            .logo {
                width: 100px;
                object-fit: contain;
                display: block;
                margin: auto;
            }
            .nav_end .nav_link {
                margin: 0 1vw;
                .icon {
                    width: 28px;
                    height: 28px;
                    object-fit: contain;
                }
            }
        }
    }

    .navbar{
        padding: 1rem .5rem;
        position: relative;
        z-index: 9;
        .nav-link {
            margin: 0 1vw;
            font-size: 18px;
            color: #1E1E1E;
            &.active {
                font-weight: bold;
                color: var(--primary);
            }
        }

        .has_dropdown {
            position: relative;
            .drop_down {
                background-color: #fff;
                border-radius: 15px;
                width: 200px;
                padding: .5rem ;
                position: absolute;
                top: 55px;
                box-shadow: 0px 0px 15px 0 rgba(94, 94, 94, 0.067);
                transition: all .3s linear;
                opacity: 0;
                visibility: hidden;
                filter: blur(10px);
                transform: translateY(10px);
                border: 1px solid #f5f5f5;
                a {
                    display: block;
                    padding: .3rem 1rem;
                    padding-bottom: 1rem;
                    margin-bottom: 1rem;
                    color: #888;
                    font-size: 15px;
                    border-bottom: 1px solid #eee;
                    text-align: center;
                    &:last-child {
                        border-bottom: none;
                        margin-bottom: 0;
                    }
                    &:hover {
                        padding-inline-start: 20px;
                    }
                }
            
            }
            .nav-link::before {
                content: '\f0da';
                font-family: "Font Awesome 6 Pro";
                font-weight: 900;
                font-size: 12px;
                color: #1E1E1E;
                position: absolute;
                left: 0;
                top: 10px;
                transform: rotate(90deg);
                transition: all .3s linear;
            }
            &:hover .drop_down {
                opacity: 1;
                visibility: visible;
                filter: blur(0px);
                transform: translateY(0px);
            }
        }

        .navbar-toggler
        {
            width: 30px;
            height: 30px;
            cursor: pointer;
            background-color: rgba($color: #ddd, $alpha: .3);
            border: none;
            position: relative;
            &.active{
                .navbar-toggler-icon {
                    box-shadow: 0px 0px 0px grey;
                    background: rgba(0, 0, 0, 0);
                    &::before {
                        top: 0px !important;
                        transform: rotate(45deg);
                    }
                    &::after {
                        top: 0px !important;
                        transform: rotate(135deg);
                    }
                }
            }
            .navbar-toggler-icon
            {
                width: 20px;
                height: 2px;
                background: var(--primary);
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                transition: 0.5s;
                &::after,
                &::before
                {
                    content: "";
                    position: absolute;
                    width: 20px;
                    height: 2px;
                    background: var(--primary);
                    transition: 0.5s;
                }
                &::after{
                    top: -6px;
                    right: 0px;
                }
                &::before{
                    top: 6px;
                    right: 0px;
                }
            }
        }
    }
}


//start Footer
.footer {
    .border_img {
        width: 100%;
        height: 30px;
        display: block;
        object-fit: cover;
    }
    .head_flex {
        .logo {
            width: 200px;
            object-fit: contain;
        }
        .social_links {
            font-size: 25px;
            color: var(--primary);
            a {
                margin: 0 .8vw;
                color: var(--primary);
            }
        }
    }
    .content {
        margin-bottom: 30px;
        .links a {
            display: block;
            margin-bottom: 15px;
            font-size: 15px;
            color: #737373;
        }
    }
    .foot {
        background-color: #FFF1E7;
        text-align: center;
        .p {
            font-size: 13px;
            .alyom_logo {
                margin-inline-start: 5px;
                width: 55px;
                object-fit: contain;
            }
        }
    }
}

/**********************************************
    Start Edit Home Page 
**********************************************/

//start header
.header {
    background-image: linear-gradient(to right , #FFF1E7 , #BC8171);

    .txt_box {
        .title {
            font-size: 70px;
            font-size: calc(35px + 2vw );
        }
        .p {
            text-align: justify;
            color: #1E1E1E;
        }
    }

    .img_box {
        position: relative;
        .img {
            object-fit: contain;
            position: relative;
            z-index: 5;
        }
        &::before {
            content: '';
            width: 100%;
            max-width: 420px;
            height: 100%;
            background: url(../images/circle_white.svg) no-repeat center;
            background-size: contain;
            position: absolute;
            top: -100px;
            left: 0;
        }
        &::after {
            content: '';
            width: 100%;
            height: 100%;
            background: url(../images/ciecles_header.png) no-repeat center;
            background-size: contain;
            position: absolute;
            top: 0;
            left: -50px;
            z-index: 1;
            animation: rotating 35s alternate-reverse linear infinite;
        }
    }

}

//start banners_sec
.banners_sec {
    .banner_card{
        position: relative;
        border-radius: 15px;
        overflow: hidden;
        height: 530px;
        margin: 15px 0;
        .secImg {
            transition: all .3s linear;
        }
        &::after {
            content: '';
            // display: none;
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: #fff;
            background: linear-gradient(to right, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 100%);
            pointer-events: none;
            z-index: 3;
            opacity: 0;
            transform: skew(30deg);
        }
        &::before {
            display: block;
            content: "";
            position: absolute;
            top: 5px;
            bottom: 5px;
            left: 5px;
            right: 5px;
            border: 1px solid rgba(255, 255, 255, 0.25);
            z-index: 1;
            border-radius: 10px;
        }
        &:hover {
            .secImg {
                transform: scale(1.03);
            }
            &::after {
                animation: shine 0.75s linear 1;
            }
        }
    }

      
}


//start  products_sec
.products_sec {
    .nav-link {
        width: 200px;
        height: 50px;
        background-color: transparent;
        color: #1E1E1E;
        margin: 0 1vw;
        font-size: 20px;
        &.active {
            background-color: transparent;
            color: var(--primary);
            font-weight: bold;
        }
    }

    .prod_card {
        position: relative;
        margin-bottom: 30px;
        .img_box {
            height: 430px;
            position: relative;
            border-radius: 5px;
            overflow: hidden;
            .cart_butn {
                position: absolute;
                bottom: 10px;
                width: calc(100% - 20px);
                left: 10px;
                height: 50px;
                transform: translateX(-100%);
                opacity: 0;
                transition: all .5s linear;
            }
            .sizes_box {
                background-color: #fff;
                padding: 7px;
                border-radius: 5px;
                width: calc(100% - 20px);
                position: absolute;
                bottom: 70px;
                left: 10px;
                transition: all .5s linear;
                transform: translateX(100%);
                opacity: 0;
                .sizes_radios .form-check {
                    position: relative;
                    padding: 0 ;
                    margin-inline-end: 15px;
                    margin-bottom: 15px;
                    .form-check-label {
                        width: 35px;
                        height: 35px;
                        border-radius: 50%;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        color: #1E1E1E;
                        border: 1px solid #eee;
                        font-size: 12px;
                        font-weight: bold;
                        position: relative;
                    }
                    .form-check-input:checked ~ .form-check-label{
                        background-color: var(--primary);
                        color: #fff;
                        border-color: var(--primary);
                    }   
                    .form-check-input:disabled ~ .form-check-label {
                        border-color: #999;
                        &::after {
                            content: '';
                            width: 50px;
                            height: 1px;
                            background-color: #999;
                            position: absolute;
                        }
                    }
                    .form-check-input {
                        position: absolute;
                        top: 0;
                        right: 0;
                        width: 100%;
                        height: 100% !important;
                        opacity: 0;
                        cursor: pointer;
                    }
                }
            }
            .badge_new {
                padding: .5rem .6rem;
                border-radius: 5px;
                background-color: #E74040;
                color: #fff;
                border-radius: 5px;
                position: absolute;
                top: 10px;
                right: 10px;
                font-size: 12px;
            }
            .rate_badge {
                background-color: #fff;
                border-radius: 5px;
                padding: .5rem .5rem;
                position: absolute;
                top: 10px;
                left: 10px;
                font-size: 12px;
                font-weight: bold;
                i {
                    margin-inline-end: 5px;
                    color: rgb(225, 192, 25);
                }
            }
        }
        .card-body {
            .subCateg {
                font-size: 13px;
                color: #888;
            }
            .prod_name {
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            .fav_butn {
                &:hover {
                    background-color: var(--primary) !important;
                }
                &.active {
                    background-color: var(--secondary);
                }
            }
            .price_box {
                .fw-bold {
                    color: var(--primary);
                }
                .prev_price  {
                    color: #C4C4C4;
                    text-decoration: line-through;
                }
            }
        }
        &:hover {
            .img_box {
                .cart_butn ,
                .sizes_box {
                    transform: translateX(0%);
                    opacity: 1;
                }
            }
        }
    }

    .prod_card_row {
        position: relative;
        margin-bottom: 30px;
        .img_box {
            height: 240px;
            position: relative;
            border-radius: 5px;
            overflow: hidden;
        }
        .card-body {
            .prod_name {
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            .fav_butn {
                width: 25px;
                height: 25px;
                .icon {
                    width: 15px;
                    height: 15px;
                }
            }
            .price_box {
                .fw-bold {
                    color: var(--primary);
                }
                .prev_price  {
                    color: #C4C4C4;
                    text-decoration: line-through;
                }
            }
            .sizes_box {
                border: 1px solid #FFF1E7;
                padding: 7px;
                border-radius: 5px;
                .sizes_radios .form-check {
                    position: relative;
                    padding: 0 ;
                    margin: 5px;
                    .form-check-label {
                        width: 25px;
                        height: 25px;
                        border-radius: 50%;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        color: #1E1E1E;
                        border: 1px solid #eee;
                        font-size: 10px;
                        font-weight: bold;
                        position: relative;
                    }
                    .form-check-input:checked ~ .form-check-label{
                        background-color: var(--primary);
                        color: #fff;
                        border-color: var(--primary);
                    }   
                    .form-check-input:disabled ~ .form-check-label {
                        border-color: #999;
                        &::after {
                            content: '';
                            width: 30px;
                            height: 1px;
                            background-color: #999;
                            position: absolute;
                        }
                    }
                    .form-check-input {
                        position: absolute;
                        top: 0;
                        right: 0;
                        width: 100%;
                        height: 100% !important;
                        opacity: 0;
                        cursor: pointer;
                    }
                }
            }
            .cart_butn {
                background-color: #FFF1E7;
                padding: .3rem 2rem;
                &:hover {
                    background-color: var(--primary);
                }
            }
        }
    }

    .swiper-button-next,
    .swiper-button-prev {
        top: 62%;
    }
}


//start banner_shopping
.banner_shopping {
    .inner {
        background-color: #FFF1E7;
        border-radius: 5px;
        position: relative;
        overflow: hidden;
        padding: 0 2vw;
        .txt_box {
            padding: 20px 1vw;
            position: relative;
            text-align: center;
            .title {
                font-size: 84px;
                font-size: calc(3vw + 40px);
            }
            .p {
                font-size: 20px;
                // line-height: 1.8;
            }
        }
        .secImg {
            width: 95%;
            object-fit: contain;
            object-position: right bottom;
        }
        &::before {
            content: '';
            background: url(../images/logo.svg) no-repeat center;
            background-size: contain;
            width: 130px;
            height: 75px;
            position: absolute;
            bottom: 10px;
            left: 10px;
        }
    }
}


//start  categ_sec
.categ_sec {
    .categ_card {
        text-align: center;
        position: relative;
        margin-bottom: 25px;
        .img_box {
            height:  420px;
            position: relative;
            border-radius: 5px;
            overflow: hidden;
            &::after {
                content: '';
                // display: none;
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                background: #fff;
                background: linear-gradient(to right, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 100%);
                pointer-events: none;
                z-index: 3;
                opacity: 0;
                transform: skew(30deg);
            }
            &::before {
                display: block;
                content: "";
                position: absolute;
                top: 5px;
                bottom: 5px;
                left: 5px;
                right: 5px;
                border: 1px solid rgba(255, 255, 255, 0.25);
                z-index: 1;
                border-radius: 10px;
            }
        }
        .categ_name {
            margin-top: 20px;
            font-size: 25px;
        }
        &:hover {
            .img_box {
                &::after {
                    animation: shine 0.75s linear 1;
                }
            }
        }
    }
}


//start features_sec
.features_sec { 
    .feature_card {
        padding: 70px 2vw;
        text-align: center;
        position: relative;
        margin-bottom: 30px;
        border: 1px solid #FFF1E7;
        border-radius: 5px;
        height: calc(100% - 30px);
        .content {
            .icon {
                width: 75px;
                height: 75px;
                object-fit: contain;
                display: block;
                margin: 0 auto 15px auto;
            }
            .title{
                font-size: 26px;
            }
            .p {
                font-size: 16px;
            }
        }
        &::before {
            content: '';
            background-color: #FFF1E7;
            width: 100%;
            height: 0;
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            transition: all .3s linear;
            border-radius: 5px;
        }
        &:hover {
            &::before {
                height: 100%;
            }
        }
    }
}



//start newsletter_sec
.newsletter_sec {
    .inner {
        padding: 30px 20px;
        border-radius: 5px;
        border: 1px solid #E6E6E6;
        .feedback_box {
            padding: 50px 3vw;
            border-inline-end: 1px solid #E6E6E6 ;
            .feedback_card {
                text-align: center;
                .stars i {
                    color: #ccc;
                    &.active {
                        color: #F3CD03;
                    }
                }
                .p {
                    color: #737373;
                    font-size: 17px;
                    font-weight: bold;
                    line-height: 2;
                }
                .prof_data {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    .avatar {
                        width: 50px;
                        height: 50px;
                        border-radius: 50%;
                        object-fit: cover;
                        margin-inline-end: 15px;
                    }
                    .name {
                        font-weight: bold;
                        color: #000;
                    }
                }
            }
        }
        .newsletter_box {
            text-align: center;
            padding: 10px 3vw;
            .title {
                font-size: 55px;
                line-height: .9;
            }
            .form-group {
                .form-control {
                    border-radius: 5px;
                    height: 55px !important;
                    background-color: #f9f9f9;
                }
                .submit_butn {
                    position: absolute;
                    inset-inline-end: 0;
                    top: 0;
                    width: 50px;
                    height: 55px;
                    background-color: var(--primary);
                    color: #fff;
                    border-radius: 5px 0 0 5px;
                }
            }
        }
    }
}



/**********************************************
    Start Edit pg-header
**********************************************/
.pg_header {
    padding: 30px 0;
    background-color: var(--primary);
    .title {
        font-size: calc(1.2vw + 30px );
    }
    .bread .item {
        color: #fff;
        margin: 0 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        
        &::after {
            content: '';
            background: url(../images/icon.svg) no-repeat center;
            background-size: contain;
            display: inline-block;
            width: 50px;
            height: 30px;
            margin-inline-start: 20px;
            pointer-events: none;
        }
        &.active {
            &::after {
                display: none;
            }
        }
    }
    a:hover {
        color: var(--secondary) !important;
    }
    img {
        opacity: .1;
        object-fit: contain;
        position: absolute;
        pointer-events: none;
        &.vector1 {
            width: 11%;
            left: 0;
            bottom: -17px;
            transform: rotate(38deg);
        }
        &.vector2 {
            width: 50px;
            right: 0;
            bottom: 0;
            transform: rotateY(180deg);
        }
    }

}



/**********************************************
    Start Edit register Page 
**********************************************/
.register_pg {
    .inner {
        border: 5px solid var(--secondary);
        border-radius: 25px ;
        background-color: #fff;
        .sec_head.has_border::after {
            background-size: contain;
            margin: 20px 0 0px 0;
        }

        .form_box {
            padding: 45px 3vw;
            .text_box .p {
                font-size: 12px;
                color: #888;
            }
            .form-group {
                .form-control {
                    padding-inline-start: 55px;
                }
                .icon {
                    font-size: 20px;
                    color: var(--primary);
                    position: absolute;
                    inset-inline-start: 20px;
                    top: 16px;
                }
            }
            .phone_group {
                .form-control {
                    padding-left: 95px;
                    text-align: left;
                }
                .phoneSelect {
                    border: none !important;
                    position: absolute;
                    left: 10px;
                    top: 0;
                    width: 80px;
                    background-color: transparent;
                    &:focus-visible {
                        border: none !important ;
                        box-shadow: none !important;
                    }
                }
                .countryCode_span {
                    position: absolute;
                    left: 1px;
                    top: 1px;
                    height: calc(100% - 2px);
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    padding: 0 1rem ;
                    background-color: #eee;
                    font-size: 15px;
                    font-weight: bold;
                    direction: ltr;
                    border-radius: 24px 0 0 24px  ;
                }
                .submit_phone_butn {
                    position: absolute;
                    right: 54px;
                    top: 26px;
                    color: var(--secondary);
                    font-size: 11px;
                    text-decoration: underline !important;
                    font-weight: bold;
                }
         
            }
            .forget_link ,
            .resend_link ,
            .txt_code  {
                color: #666 !important;
                font-size: 14px !important;
            }
            .forget_link ,
            .resend_link {
                &:hover {
                    color: var(--primary) !important;
                }
            }

            .another_opt {
                font-size: 12px;
                color: #888;
                a {
                    color: var(--primary);
                }
            }


            .submit_butn {
                font-size: 22px;
                height: 60px;
                border-radius: 24px;
            }
        }

        .restore_tabs .nav-link  {
            color: #012E47;
            width: 100%;
            height: 70px;
            background-color: #fff;
            border: 1px solid #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-inline-end: 10px;
            font-weight: bold;
            color: #012E47;
            font-size: 12px;
            border-radius: 25px;
            .icon {
                width: 25px;
                height: 25px;
                display: flex;
                justify-content: center;
                align-items: center;
                background-color: #f5f5f5;
                color: var(--primary);
                border-radius: 5px;
                margin-inline-end: 10px;
            }

            &.active {
                border-color: #f8bc9e !important;
                background-color: #FFF2F2;
                .icon {
                    background-color: #fff;
                }
            }
        }

        .form-check .form-check-label{
            font-size: 12px;
            color: #012E47; 
            a {
                color: #8E8E8E ;
            }
        }
    }

    .drop_box {
        overflow: hidden;
        height: 60px;
        background-color: #fff;
        border: 1px solid #fff;
        position: relative;
        display: flex;
        align-items: center;
        border-radius: 25px;
        cursor: pointer;
        padding-inline-start: 55px;
        .kwt-file{
            width: 100%;
        }
        .kwt-file__drop-area {
            position: relative;
            display: flex;
            align-items: center;
            width: 100%;
            padding: 10px;
            transition: 0.3s;
        }
        .kwt-file__drop-area.is-active {
            background-color: transparent;
        }
        .kwt-file__choose-file {
            flex-shrink: 0;
            background-color: #fff;
            border-radius: 5px;
            margin-inline-end: 10px;
            color: var(--primary);
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 15px;
            display: none !important;
        }
        .kwt-file__choose-file.kwt-file_btn-text {
            border-radius: 4px;
            width: auto;
            height: auto;
            padding: 10px 20px;
            font-size: 14px;
        }
        .kwt-file__choose-file svg {
            width: 19px;
            height: 19px;
            display: block;
        }
        .kwt-file__msg {
            color: #888;
            font-size: 12px;
            font-weight: 400;
            line-height: 1.4;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .kwt-file__input {
            position: absolute;
            left: 0;
            top: 0;
            height: 100%;
            width: 100%;
            cursor: pointer;
            opacity: 0;
        }
        .kwt-file__input:focus {
            outline: none;
        }
        .kwt-file__delete {
            display: none;
            position: absolute;
            inset-inline-end: 20px;
            width: 18px;
            height: 18px;
            cursor: pointer;
        }
        .kwt-file__delete:before {
            content: "";
            position: absolute;
            left: 0;
            transition: 0.3s;
            top: 0;
            z-index: 1;
            width: 100%;
            height: 100%;
            background-size: cover;
            background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg fill='%231d3557' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 438.5 438.5'%3e%3cpath d='M417.7 75.7A8.9 8.9 0 00411 73H323l-20-47.7c-2.8-7-8-13-15.4-18S272.5 0 264.9 0h-91.3C166 0 158.5 2.5 151 7.4c-7.4 5-12.5 11-15.4 18l-20 47.7H27.4a9 9 0 00-6.6 2.6 9 9 0 00-2.5 6.5v18.3c0 2.7.8 4.8 2.5 6.6a8.9 8.9 0 006.6 2.5h27.4v271.8c0 15.8 4.5 29.3 13.4 40.4a40.2 40.2 0 0032.3 16.7H338c12.6 0 23.4-5.7 32.3-17.2a64.8 64.8 0 0013.4-41V109.6h27.4c2.7 0 4.9-.8 6.6-2.5a8.9 8.9 0 002.6-6.6V82.2a9 9 0 00-2.6-6.5zm-248.4-36a8 8 0 014.9-3.2h90.5a8 8 0 014.8 3.2L283.2 73H155.3l14-33.4zm177.9 340.6a32.4 32.4 0 01-6.2 19.3c-1.4 1.6-2.4 2.4-3 2.4H100.5c-.6 0-1.6-.8-3-2.4a32.5 32.5 0 01-6.1-19.3V109.6h255.8v270.7z'/%3e%3cpath d='M137 347.2h18.3c2.7 0 4.9-.9 6.6-2.6a9 9 0 002.5-6.6V173.6a9 9 0 00-2.5-6.6 8.9 8.9 0 00-6.6-2.6H137c-2.6 0-4.8.9-6.5 2.6a8.9 8.9 0 00-2.6 6.6V338c0 2.7.9 4.9 2.6 6.6a8.9 8.9 0 006.5 2.6zM210.1 347.2h18.3a8.9 8.9 0 009.1-9.1V173.5c0-2.7-.8-4.9-2.5-6.6a8.9 8.9 0 00-6.6-2.6h-18.3a8.9 8.9 0 00-9.1 9.1V338a8.9 8.9 0 009.1 9.1zM283.2 347.2h18.3c2.7 0 4.8-.9 6.6-2.6a8.9 8.9 0 002.5-6.6V173.6c0-2.7-.8-4.9-2.5-6.6a8.9 8.9 0 00-6.6-2.6h-18.3a9 9 0 00-6.6 2.6 8.9 8.9 0 00-2.5 6.6V338a9 9 0 002.5 6.6 9 9 0 006.6 2.6z'/%3e%3c/svg%3e");
        }
        .kwt-file__delete:after {
            content: "";
            position: absolute;
            opacity: 0;
            left: 50%;
            top: 50%;
            width: 100%;
            height: 100%;
            transform: translate(-50%, -50%) scale(0);
            background-color: #1d3557;
            border-radius: 50%;
            transition: 0.3s;
        }
        .kwt-file__delete:hover:after {
            transform: translate(-50%, -50%) scale(2.2);
            opacity: 0.1;
        }
    }
}

.form-control {
    padding: .5rem 1.75rem;
    font-size: 12px;
    border-radius: 24px;
    border-color: #eee;
    background-color: #fff;

    &::placeholder {
        font-size: 12px;
    }
}

.map_box iframe {
    border-radius: 25px;
}

.show_hide_password .show_pass {
    position: absolute;
    top: 23px;
    inset-inline-end: 20px;
    cursor: pointer;
    color: #888;
}


.profile-avatar {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    border: 2px solid #eee;
    margin: auto;
    position: relative;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    input {
        position: absolute;
        bottom: 0;
        left: 64%;
        background-color: #fff;
        border-radius: 30px;
        display: inline-block;
        color: #222;
        width: 50px;
        height: 50px;
        line-height: 50px;
        cursor: pointer;
        border: none;
        opacity: 0;
        z-index: 3;
    }
    button {
        width: 45px;
        height: 45px;
        box-shadow: 0px 0px 10px #ddd;
        background-color: var(--primary);
        color: #fff;
        border-radius: 50%;
        text-align: center;
        cursor: pointer !important;
        border: 1px solid #eee;
        position: absolute;
        right: 2px;
        bottom: 0px;
        cursor: pointer;
        i {
            position: relative;
            top: 1px;
            cursor: pointer !important;
        }
    }
}



/**********************************************
    Start Edit about Page 
**********************************************/
.about_pg {
    .img_box {
        height: 450px;
        position: relative;

        .secImg {
            width: 90%;
            display: block;
            margin: auto;
            box-shadow: 5px 5px 10px 0 #0001;
            border-radius: 5px;
            position: relative;
            z-index: 5;
        }
        &::before {
            content: '';
            width: 40%;
            height: calc(100% + 50px);
            position: absolute;
            top: -25px;
            right: 0px;
            background-color: var(--secondary);
            border-radius: 0 5px 5px 0;

        }
    }
    .txt_box {
        .title {
            font-size: 30px;
        }
        .p {
            font-size: 17px;
            line-height: 2;
            text-align: justify
        }
    }
}   


/**********************************************
    Start Edit products Page 
**********************************************/
.products_pg {
    .categ_box {
        background-color: #fff;
        border: 1px solid #eee;
        padding: 30px;
        border-radius: 5px;
        position: relative;
        .item{
            margin-bottom: 30px;
            max-height: fit-content;
            .categ_title {
                text-transform: uppercase;
                font-size: 16px;
                color: #282828;
            }
            .checks .form-check {
                font-size: 14px;
                color: #999;
                margin-bottom: 15px;
                margin-inline-start: 10px;
                .form-check-input:checked {
                    background-color: var(--primary);
                    border-color: var(--primary);
                    ~ label {
                        color: #222;
                    }
                }
            }
            .links .link {
                display: block;
                color: #7E7E7E;
                font-size: 15px;
                margin-bottom: 15px;
                text-transform: capitalize;
                &.active {
                    color: var(--primary);
                }
            }
            &:last-child {
                margin-bottom: 0;
            }
        }
    }
    .filter_box{
        background-color: #fff;
        border: 1px solid #eee;
        border-radius: 5px;
        position: relative;
        .title_box{
            border-radius: 5px 5px 0 0;
            background-color: var(--primary);
            padding: 17px 20px;
            .del_link:hover {
                color: #fff !important;
            }
        }
        .card-body {
            padding: 1.5rem 1.3rem;
        }
        .item {
            padding: 0 5px;
            padding-bottom: 15px;
            margin-bottom: 15px;
            border-bottom: 1px solid #ddd;
            .collapse_title {
                text-transform: uppercase;
                font-size: 16px;
                color: #282828;
            } 
            .collapse_body{
                padding: 1.25rem 0 0 0 ;
                .brands_radios .form-check {
                    position: relative;
                    padding: 0 ;
                    margin-inline-end: 15px;
                    margin-bottom: 15px;
                    .form-check-label {
                        width: 60px;
                        height: 60px;
                        border: 1px solid #ddd;
                        border-radius: 10px;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        .brand_logo {
                            width: 35px;
                            height: 35px;
                            object-fit: contain;
                        }
                    }
                    .form-check-input:checked ~ .form-check-label{
                        border-color: var(--primary);
                    }   
                    .form-check-input {
                        position: absolute;
                        top: 0;
                        right: 0;
                        width: 100%;
                        height: 100% !important;
                        opacity: 0;
                        cursor: pointer;
                    }
                }
                .checkboxes .form-check {
                    position: relative;
                    .form-check-label {
                        color: #7E7E7E;
                        font-size: 15px;
                        &::before {
                            content: '\f00c';
                            font-family: "Font Awesome 5 Pro";
                            font-weight: 900;
                            display: inline-block;
                            position: absolute;
                            inset-inline-start: 4px;
                            top: 6px;
                            color: var(--primary);
                            font-size: 8px;
                            opacity: 0;
                        }
                    }
                    .form-check-input:checked {
                        background-color: #fff;
                        ~ .form-check-label {
                            color: var(--primary);
                            &::before {
                                opacity: 1;
                            }
                        }
                    }
                    .form-check-input:checked[type=checkbox] {
                        background-image: unset;
                    }

                }
                .price-wrapper{
                    .ui-slider-horizontal {
                        width: 100%;
                        .ui-slider-handle {
                            border-radius: 50%;
                        }
                    }
                    .ui-widget-header {
                        background: var(--primary);
                    }
                    .inputs-wrapper{
                        width: 100%;
                        display: inline-flex;
                        justify-content: space-between;
                        align-items: center;
                        .price-range-field {
                            width: 90px;
                            border: 1px solid #F2F2F2;
                            background-color: #F2F2F2;
                            border-radius: 30px;
                            margin: 0 4px;
                            height: 40px !important;
                            text-align: center;
                            &::placeholder {
                                color: #9999999f;
                            }
                        }
                        .currency_title {
                            color: #7E7E7E;
                            font-size: 16px;
                        }
                    }
                
                }
            }
            &:last-child {
                padding-bottom: 0px;
                margin-bottom: 0px;
                border-bottom: none;
            }
        }
    }
    .search_filter  {
        .form-group .form-control {
            height: 50px !important;
            font-size: 12px;
            border-radius: 5px;
            background-color: #f9f9f9;
            border-color: #f5f5f5;
        }
    }
} 


.pagination-wrapper {
    .pagination .page-link {
        border-radius: 5px !important;
        background-color: transparent;
        color: var(--primary);
        margin: 0 4px;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0;
        width: 45px;
        height: 40px;
        &:hover ,
        &.active {
            background-color: var(--primary);
            color: #fff !important;
        }
    }
}

/**********************************************
    Start Edit products_det Page 
**********************************************/
.products_det {
    .product_imgs {
        .gallery-top img {
            height: 600px;
            border-radius: 5px;
            padding: 10px;
            border: 1px solid #eee;
        }
        .gallery-thumbs{
            height: 600px;
            overflow: hidden;
            img{
                height: 110px;
                padding: 10px;
                border: 1px solid #eee;
                border-radius: 5px;
                transition: all .3s linear;
                opacity: .7;
            }
            .swiper-slide-thumb-active img {
                border-color: var(--primary);
                opacity: 1;
            }
        }
 
        .share_links {
            .title {
                font-weight: bold;
                position: relative;
                display: inline-block;
                &::after {
                    content: '';
                    width: 45px;
                    height: 2px;
                    display: inline-block;
                    background-color: var(--primary);
                    margin: 0 10px;
                }
            }
            .links {
                a {
                    margin: 0 10px;
                    font-size: 20px;
                }
                .fa-facebook-f {
                    color: #0866FF;
                }
                .fa-x-twitter {
                    color: #000;
                }
                .fa-paper-plane {
                    color: #33A8DA;
                }
                .fa-whatsapp {
                    color: #2DB061;
                }
                .fa-link {
                    color: var(--primary);
                }
            }
        }
  
        

    }
    .txt_box {
        .rating i{
            color: #BDBDBD;
            &.active {
                color: #DE980F;
            }
        }
        .prod_name {
            font-size: calc(1vw + 35px);
        }
        
        .price_box {
            font-size: 20px;
            .fw-bold {
                color: var(--primary);
            }
            .prev_price  {
                font-size: 85%;
                color: #C4C4C4;
                text-decoration: line-through;
            }
        }

        .form-group {
            background-color: #f9f9f9;
            padding: 1rem 1rem .5rem 1rem;
            border-radius: 5px;

            &.size-group {
                .size-flex {
                    flex-wrap: wrap;
                }
                .form-check {
                    position: relative;
                    padding: 0 ;
                    margin-inline-end: 15px;
                    margin-bottom: 15px;
                    .form-check-label {
                        width: 35px;
                        height: 35px;
                        border-radius: 50%;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        color: #1E1E1E;
                        border: 1px solid #eee;
                        font-size: 10px;
                        font-weight: bold;
                        position: relative;
                    }
                    .form-check-input:checked ~ .form-check-label{
                        background-color: var(--primary);
                        color: #fff;
                        border-color: var(--primary);
                    }   
                    .form-check-input:disabled ~ .form-check-label {
                        border-color: #999;
                        &::after {
                            content: '';
                            width: 50px;
                            height: 1px;
                            background-color: #999;
                            position: absolute;
                        }
                    }
                    .form-check-input {
                        position: absolute;
                        top: 0;
                        right: 0;
                        width: 100%;
                        height: 100% !important;
                        opacity: 0;
                        cursor: pointer;
                    }
                }
            }
    
            &.color-group {
                .colors-flex {
                    flex-wrap: wrap;
                }
                .form-check {
                    position: relative;
                    padding-left: 0;
                    margin-inline-end: 10px;
                    padding-right: 0em;
                    .form-check-input {
                        position: absolute;
                        left: 0px;
                        top: 0;
                        opacity: 0;
                        width: 35px;
                        height: 35px !important;
                        cursor: pointer;
                    }
                    .form-check-label {
                        width: 35px;
                        height: 35px;
                        border-radius: 50%;
                        background-color: #f6f6f6;  
                        cursor: pointer;
                        .checkmark {
                            position: absolute;
                            opacity: 0;
                            left: 15px;
                            top: 11px;
                            width: 5px;
                            height: 10px;
                            border: solid #fff;
                            border-width: 0 2px 2px 0;
                            transform: rotate(45deg);
                        }
            
                    }
                    .form-check-input:checked ~  .form-check-label .checkmark{
                        opacity: 1;
                    }   
                }
            
            }
        }


        .butns {
            .cart_butn {
                height: 50px;
            }
            .sm_butn {
                border-radius: 5px;
                height: 50px;
                width: 50px;
            }
        }

    }

    .desc_wrapper {
        .nav {
            background-color: #f9f9f9;
            padding: 0 2rem;
            border-radius: 5px 5px 0 0;
            .nav-link {
                font-size: 13px;
                padding: .5rem 1.5rem;
                height: 60px;
                border-radius: 0;
                font-weight: bold;
                color: #888;
                border-top: 5px solid transparent;
                &.active {
                    background-color: #fff;
                    color: var(--primary);
                    border-top: 5px solid var(--primary);
                    height: 66px;
                    margin-top: -6px;
                
                } 
            }
        }
        .tab_wrapper {
            border: 1px solid #eee;
            background-color: #fff;
            border-radius: 0 0 5px 5px;
            padding: 45px 2vw;
            .p {
                font-size: 12px;
                line-height: 2.2;
                text-align: justify;
            }
            .ul_custom {
                .li {
                    position: relative;
                    padding-inline-start: 30px;
                    margin-bottom: 15px;
                    &::before {
                        content: '';
                        width: 20px;
                        height: 5px;
                        background-color: var(--primary);
                        clip-path: polygon(0 0, 100% 0, 90% 90%, 0% 100%);
                        display: block;
                        position: absolute;
                        left: 0;
                        top: 9px;
                    }
                    
                }
                .li:nth-child(even) {
                    &::before {
                        background-color: var(--secondary);
                    }
                }
            }
            .table {
                td , th {
                    font-size: 14px;
                    padding: .8rem 1.5rem;
                }
                th {
                    background-color: #f9f9f9;
                }
            }
            .review_item{
                position: relative;
                padding: 30px 2vw;
                border-radius: 0px;
                margin-bottom: 0px;
                border-bottom: 1px solid #ddd;
                background-color: #fff;
                &:last-child {
                    border-bottom: none;
                }
                .prof_data {
                    .avatar {
                        width: 50px;
                        height: 50px;
                        object-fit: cover;
                        border-radius: 50%;
                        margin-inline-end: 15px;
                        border: 1px solid #eee;
                    }
                    .name {
                        font-size: 17px;
                    }
                    .rating {
                        i {
                            font-size: 11px;
                            color: #BDBDBD;
                            &.active {
                                color: #DE980F;
                            }
                        }
                        .date {
                            color: #7E7E7E;
                            font-size: 11px;
                        }
                    }
                }
                .review_det {
                    color: #606060;
                    font-size: 12px;
                    margin-bottom: 0;
                }
            }
        }
    }
}

.badge {
    padding: 0.5rem 1rem;
    text-transform: capitalize;
    // border-radius: 5px;
    &.white_badge {
        color: var(--primary);
        background-color: #fff;
    }
    &.secondary_badge {
        color: var(--primary);
        background-color: var(--secondary);
    }
    &.gray_bagde {
        background-color: #eee;
        color: var(--primary);
    }
    &.offer_badge {
        background-color: #CBFFD8;
        color: #333;
    }
    &.primary_badge {
        background-color: var(--primary);
        color: #fff;
    }  
}

.qty-container{
    display: flex;
    align-items: center;
    justify-content: center;
    // background-color: #f5f5f5;
    border: 1px solid #eee;
    width: fit-content;
    border-radius: 5px;
    padding: 5.5px;
    .input-qty{
        text-align: center;
        padding: 6px 10px;
        border: 1px solid transparent !important;
        max-width: 60px;
        font-size: 15px;
        font-weight: bold;
        background-color: transparent;
    }
    .qty-btn-minus,
    .qty-btn-plus {
        // border: 1px solid #d4d4d4;
        background-color: transparent;
        padding: 10px 13px;
        font-size: 12px;
        height: 38px;
        width: 45px;
        transition: 0.3s;
        color: #777;
        box-shadow: none !important;
    }
    .qty-btn-plus{
        margin-left: -1px;
    }
    .qty-btn-minus{
        margin-right: -1px;
    }
}


/**********************************************
    Start Edit cart_pg  
**********************************************/
.cart_pg {

    .summary_checkout {
        background-color: #F6F6F6;
        border-radius: 5px;
        padding: 25px 2vw ;
        .title {
            font-size: 16px;
            padding-bottom: 20px;
            border-bottom: 1px solid #D6D3D3;
            margin-bottom: 20px; 
        }
        .item {
            font-size: 15px;
            margin: 15px 0;

            &:last-child {
                font-weight: bold   ;
            }
        }
    }

    .box {
        background-color: #fff;
        border: 1px solid #eee;
        border-radius: 5px;
        padding: 2vw ;
        position: relative;
        margin-bottom: 20px;
        .table {
            thead, tbody, tfoot, tr, td, th {
                border-color: unset;
                border-style: unset;
                border-width: unset;
            }
            thead tr {
                background-color: #f6f6f6;
                border-radius: 5px;
                text-align: center;
                th {
                    color: #1C1C1C;
                    font-size: 14px;
                    padding: 1rem 1rem;
                    &:nth-child(1) {
                        border-radius: 0 5px 5px 0;
                    }
                    &:last-child {
                        border-radius: 5px 0 0 5px;
                    }
                }
            }
            
            td {
                vertical-align: middle;
                padding: 1rem;
                border-bottom: 1px solid #eee;
                font-size: 12px;
                text-align: center;
                .name {
                    font-size: 13px !important;
                    margin-bottom: 10px !important;
                }
                .codeProd {
                    font-size: 12px !important;
                }
                .prodImg {
                    width: 100px;
                    height: 100px;
                    border: 1px solid #eee;
                    border-radius: 5px;
                    object-fit: cover;
                }
                .qty-container {
                    padding: 0;
                }
                .delete_butn {
                    font-size: 12px;
                }
            }
            tr:last-child td {
                border-bottom: 1px solid transparent;
            }
          
        }

        .qty-container {
            background-color: #f9f9f9;
            border-radius: 5px;
            padding: .2rem .5rem;
            width: fit-content;
            margin: auto;
        }

    }

    .butns {
        .butn{
            font-size: 18px;
            i {
                margin-inline-start: 7px;
                margin-inline-end: 0;
                font-size: 15px;
            }
        }
    }
}

.bg_transparent {
    background-color: transparent !important;
}


.rates_sec {
    .inner {
        background-color: #fff;
        border: 1px solid #D3D3D3;
        border-radius: 20px;
        padding: 30px 3vw;
        .head_rates {
            padding: 0 .5vw;
            padding-bottom: 25px;
            border-bottom: 1px solid #D3D3D3;

        }
    
        .rates_body {
            padding-top: 30px;
            .rates_r {
                border-left: 1px solid #D3D3D3;
                padding: 25px 2vw;

                .stars {
                    i {
                        color: #ccc;
                        &.active {
                            color: #2E9600;
                        }
                    }
                    .num_rates {
                        color: #747474;
                    }
                }

   
                .stars_progress {
                    .item {
                        .star {
                            color: #012E47;
                            font-size: 18px;
                        }
                        .progress {
                            width: calc(100% - 80px);
                        }
                        .progress_num {
                            color: #012E47;
                            font-weight: bold;
                            font-size: 18px;
                        }

                        &:nth-child(1) {
                            .star i {
                                color: #2E9600;
                            }
                            .progress-bar {
                                background-color: #2E9600;
                            }
                        }
                        &:nth-child(2) {
                            .star i {
                                color: #7F9E00;
                            }
                            .progress-bar {
                                background-color: #7F9E00;
                            }
                        }
                        &:nth-child(3) {
                            .star i {
                                color: #F7AA2C;
                            }
                            .progress-bar {
                                background-color: #F7AA2C;
                            }
                        }
                        &:nth-child(4) {
                            .star i {
                                color: #F6752F;
                            }
                            .progress-bar {
                                background-color: #F6752F;
                            }
                        }
                        &:nth-child(5) {
                            .star i {
                                color: #f24d30;
                            }
                            .progress-bar {
                                background-color: #f24d30;
                            }
                        }
                    }
           
                }

                .faq_items {
                    .p {
                        font-size: 18px;
                    }
                }
            }

            .rates_l {
                padding: 10px 2vw 25px 2vw;
                .head_rates_l {
                    padding-bottom: 25px;
                    border-bottom: 1px solid #D3D3D3;
                    .form-control {
                        height: 50px !important;
                        background-color: transparent;
                        border: 1px solid #eee;
                    }
                }

                .review_item{
                    position: relative;
                    padding: 30px 2vw;
                    border-radius: 0px;
                    margin-bottom: 0px;
                    border-bottom: 1px solid #ddd;
                    background-color: #fff;
                    &:last-child {
                        border-bottom: none;

                    }
                    .prof_data {
                        .avatar {
                            width: 50px;
                            height: 50px;
                            object-fit: cover;
                            border-radius: 50%;
                            margin-inline-end: 15px;
                        }
                        .name {
                            font-size: 16px;
                        }
                        .rating {
                            i {
                                font-size: 12px;
                                color: #BDBDBD;
                                &.active {
                                    color: #DE980F;
                                }
                            }
                            .date {
                                color: #7E7E7E;
                                font-size: 10px;
                            }
                        }
                    }
                    .review_det {
                        color: #606060;
                        font-size: 11px;
                        margin-bottom: 0;
                    }

                    // &:last-child {
                    //     border-bottom: none;
                    //     padding-bottom: 0;
                    // }
                }

            }

            .rates_form {
                .stars-content{
                    .star-rating {
                        display:flex;
                        flex-direction: row-reverse;
                        font-size: 2em;
                        justify-content: start;
                        padding:0 .2em;
                        text-align:center;
                        // width:5em;
                        margin: auto;
                        i{
                            margin: 0 5px;
                        }
                    }
                      
                    .star-rating input {
                        display:none;
                    }
                      
                    .star-rating label {
                        color:#FFEEC9;
                        cursor:pointer;
                    }
                      
                    .star-rating :checked ~ label {
                        color:#FFD06A;
                    }
                      
                    .star-rating label:hover,
                    .star-rating label:hover ~ label {
                        color:#FFB820;
                    }
                }
            }
        }

        .form-control {
            background-color: #f5f5f5 !important;
            padding-top: 25px;
        }

    }
}

/**********************************************
    Start Edit checkout Page 
**********************************************/
.checkout_pg {
    .box {
        border: 1px solid #eee;

        .form-check {
            margin: 10px 0;
            padding: 0;
            .sm_img {
                width: 50px;
                height: 50px;
                object-position: top;
                display: block;
                margin-bottom: 15px;
                object-fit: contain;
                margin: 0 auto 10px  auto !important;
            }
            .form-check-input {
                display: none;
            }
            .form-check-label {
                text-align: center;
                padding: 25px 20px; 
                background-color: #fff;
                border-radius: 20px;
                display: block;
                border: 1px solid #eee;
                cursor: pointer;
                font-size: 14px;
            }
            .form-check-input:checked ~ .form-check-label {
                color: var(--primary);
                border-color: var(--primary);
                background-color: #CA121405;
            }
            
            
        }

        .phone_group {
            .form-control {
                padding-left: 75px;
                text-align: left;
            }
            .countryCode_span {
                position: absolute;
                left: 1px;
                top: 1px;
                height: calc(100% - 2px);
                display: flex;
                justify-content: center;
                align-items: center;
                padding: 0 1rem ;
                background-color: #eee;
                font-size: 15px;
                font-weight: bold;
                direction: ltr;
                border-radius: 24px 0 0 24px  ;
            }

     
        }
    }

    .couboun_box {
        background-color: #F6F6F6;
        padding: 20px;
        border-radius: 5px;
        .form-control {
            background-color: #fff;
        }
        .apply_butn {
            position: absolute;
            left: 5px;
            top: 5px;
            height: 50px;
            font-size: 16px;
            border-radius: 24px;
        }

    }

    .sm_box {
        padding: 25px;
    }

    .border-none {
        border: none;
    }
}


/**********************************************
    Start Edit profile_pg
**********************************************/
.profile_pg {
    // .prof-side {
    //     .wrapper{
    //         padding: 3vw 2vw;
    //         border-radius: 5px;
    //         margin-bottom: 25px;
    //         border: 1px solid #eee;
    //         &.links-data{
    //             .nav-link {
    //                 color: #666;
    //                 padding: 0.8rem 1rem;
    //                 border-radius: 15px;
    //                 font-size: 16px;
    //                 font-weight: bold;
    //                 margin-bottom: 5px;
    //                 &.active{
    //                     background-color: var(--primary);
    //                     color: #fff !important;
    //                 }
    //             }
    //         }
    //     }
    // }
    
    .main_nav {
        background-color: #f7f7f7;
        padding: 0 2rem;
        border-radius: 5px 5px 0 0;
        .nav-link {
            font-size: 13px;
            padding: .5rem 1.5rem;
            height: 60px;
            border-radius: 0;
            font-weight: bold;
            color: #888;
            border-top: 5px solid transparent;
            &.active {
                background-color: #fff;
                color: var(--primary);
                border-top: 5px solid var(--primary);
                height: 66px;
                margin-top: -6px;
            
            } 
        }
    }

    .tab_wrapper {
        padding: 50px 3vw;
        border-radius: 5px;
        border: 1px solid #eee;
        position: relative;

        .primary_butn {
            min-width: 180px;
            font-size: 20px;
        }

        &.profile_tab {
            .editData_box{
                display: none;
            }
            .phone_group {
                .form-control {
                    padding-left: 95px;
                    text-align: left;
                }
                .countryCode_span {
                    position: absolute;
                    left: 1px;
                    top: 1px;
                    height: calc(100% - 2px);
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    padding: 0 1rem ;
                    background-color: #eee;
                    font-size: 15px;
                    font-weight: bold;
                    direction: ltr;
                    border-radius: 24px 0 0 24px  ;
                }

         
            }

            .editPhone_butn {
                position: absolute;
                left: 5px;
                bottom: 5px;
                width: 100px;
                min-width: 100px;
            }
        }

        &.orders_tab {
            .nav-link {
                margin-inline-end: 7px;
                width: 100px;
                height: 45px;
                border-radius: 25px;
                background-color: #fff;
                border: 1px solid  #eee;
                font-weight: bold;
                color: #1C1C1C;
                font-size: 12px;
                &.active {
                    border-color: var(--primary) !important;
                    background-color: #FFF2F2;

                }
            }
            .table {
                thead, tbody, tfoot, tr, td, th {
                    border-color: unset;
                    border-style: unset;
                    border-width: unset;
                    text-align: center;
                }
                thead tr {
                    background-color: var(--primary);
                    border-radius: 5px;
                    text-align: center;
                    th {
                        color: #fff;
                        font-size: 15px;
                        padding: 1rem 1rem;
                        &:nth-child(1) {
                            border-radius: 0 5px 5px 0;
                        }
                        &:last-child {
                            border-radius: 5px 0 0 5px;
                        }
                    }
                }
                
                td {
                    vertical-align: middle;
                    padding: 1rem;
                    border-bottom: 1px solid #eee;
                    font-size: 13px;
                    .prodImg {
                        width: 100px;
                        height: 100px;
                        border: 1px solid #eee;
                        border-radius: 5px;
                        object-fit: cover;
                    }
                    .qty-container {
                        padding: 0;
                    }
                }
                tr:last-child td {
                    border-bottom: 1px solid transparent;
                }

                .butn.sm_butn {
                    padding: 0;
                    width: 30px;
                    height: 30px;
                    font-size: 13px;
                }
              
            }
        }

        &.loc_tab {
            .loc_card{
                background-color: #fff;
                border: 1px solid #eee;
                border-radius: 25px;
                margin: 0 auto 25px auto; 
                .heading{
                    padding: 25px;
                    border-bottom: 1px solid #eee;
                    .icon-outer{
                        width: 45px;
                        height: 45px;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        background-color: #f7f7f7;
                        color: var(--primary);
                        border-radius: 25px;
                        margin-inline-end: 15px;
                    }
                    .title {
                        font-size: 15px;

                    }
                    .card_butn{
                        background-color: transparent;
                        margin-inline-end:  10px;
                        font-size: 12px;
                        &.edit{
                            color: rgb(58, 155, 39);
                        }
                        &.delete{
                            color: rgb(241, 67, 67);
                        }
                    }
                }
                .card-body{
                    padding: 1.25rem 2rem;
                    .icon-outer{
                        width: 60px;
                        height: 60px;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        margin-inline-end: 25px;
                        background-color: var(--primary);
                        border-radius: 10px;
                        font-size: 20px;
                        color: #fff;
                    }
                    .content {
                        width: calc(100% - 80px);
                        .country {
                            font-size: 13px;
                        }
                    }
                }
            }
        }

        &.notification_tab {
            .noti_card {
                background-color: #fff;
                border-radius: 15px;
                padding: 35px 20px;
                margin-bottom: 25px;
                border: 1px solid #ddd;
                // box-shadow: 3px 6px 15px 0 #5551;
                position: relative;
                .date {
                    font-size: 10px;
                    font-weight: bold;
                    color: #aaa;
                }
                .bell_icon {
                    font-size: 50px;
                    color: var(--primary);
                    margin-inline-end: 25px;
                }
                .logo {
                    width: 50px;
                    height: 50px;
                    margin-inline-end: 25px;
                }
                .content {
                    width: calc(100% - 80px);
                    .title {
                        font-weight: bold;
                        color: #666;
                        transition: all .3s linear;
                        font-size: 14px;
                        margin-bottom: 10px !important;
                    }
                    .p {
                        margin-top: 5px;
                        font-size: 10px;
                        color: #888;
                    }
                }
                &:hover {
                    .title {
                        color: var(--primary);
                    }
                }
            }
        }


    }
}

.data-group{
    margin: 10px 0;
    position: relative;
    .label {
        font-size: 12px;
        font-weight: bold;
    }
    .data {
        padding: 1.1rem 1.5rem;
        border-radius: 24px;
        font-size: 14px;
        background-color: #f9f9f9;
        margin-top: 10px;
        border: 1px solid #f9f9f9;
        i {
            color: var(--primary);
            margin-inline-end: 5px;
        }
    }

}

/**********************************************
    Start Edit content Page 
**********************************************/
.content_pg {
    .inner {
        padding: 0 3vw 50px 3vw;
        border-radius: 25px;
        background-color: #f7f7f7;
        margin-top: 50px;
        .sec_head {
            outline: 15px solid #fff;
            padding: 1.5rem 2vw;
            border-radius: 15px;
            display: block;
            position: relative;
            top: -45px;
            background: #f7f7f7;
        }
        .det {
            line-height: 2.2;
            color: #505050;
            margin-bottom: 0;
            font-size: 16px;
        }
    }
}


/**********************************************
    Start Edit contact Page 
**********************************************/
.contact_pg {
    .text_box {
        .item {
            position: relative;
            padding-inline-start: 20px;
            margin-bottom: 35px;
            .label {
                font-weight: bold;
                font-size: 17px;
                margin-bottom: 10px;
            }
            .data{
                color: #808080;
                font-size: 15px;
                margin-bottom: 0;
            }
            .social_links a {
                width: 35px;
                height: 35px;
                border-radius: 5px;
                margin-inline-end: 7px;
                color: var(--primary);
                background-color: #eee;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 12px;
                &:hover {
                    background-color: var(--primary);
                    color: #fff !important;
                }
            }
            &::before {
                content: '';
                width: 5px;
                height: 26px;
                background-color: var(--primary);
                position: absolute;
                inset-inline-start: 0;
                top: 0px;
            }
        }
    }
    .map_box  iframe {
        border-radius: 5px;
        border: 5px solid #fff;
    }

    .inner {
        border-radius: 5px;
        position: relative;
        overflow: hidden;
        background-color: #fff;
        border: 1px solid #eee;
        .form {
            padding: 50px 3vw;
            .label {
                font-size: 13px;
                margin-bottom: .6rem;
                text-transform: capitalize;
            }
            input , select {
                height: 55px !important; 
            }
            .form-group {
                .form-control {
                    padding-inline-start: 55px;
                }
                .icon {
                    font-size: 20px;
                    color: var(--primary);
                    position: absolute;
                    inset-inline-start: 20px;
                    top: 16px;
                }
            }
            .phone_group {
                .form-control {
                    padding-left: 95px;
                    text-align: left;
                }
                .countryCode_span {
                    position: absolute;
                    left: 1px;
                    top: 1px;
                    height: calc(100% - 2px);
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    padding: 0 1rem ;
                    background-color: #eee;
                    font-size: 15px;
                    font-weight: bold;
                    direction: ltr;
                    border-radius: 24px 0 0 24px  ;
                }
                .submit_phone_butn {
                    position: absolute;
                    right: 54px;
                    top: 26px;
                    color: var(--secondary);
                    font-size: 11px;
                    text-decoration: underline !important;
                    font-weight: bold;
                }
         
            }
            textarea {
                padding-top: 20px;
            }
            .butn {
                font-size: 22px;
                height: 55px;
                min-width: 180px;
            }
        }
        .box {
            height: 100%;
            position: relative;
            padding: 40px 3vw;
            text-align: center;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: var(--primary);
            .p {
                font-size: 12px;
                line-height: 1.7;
            }
            &::before {
                content: '';
                width: 100%;
                height: 100%;
                background: url(../images/pattern_contact.png) no-repeat;
                background-size: cover;
                position: absolute;
                bottom: 0;
                left: 0;
                background-position: left bottom;
                opacity: .5;
            }
        }
    }
}


/**********************************************
    Start Edit order_det Page 
**********************************************/
.order_det_pg {
    background-color: #f8f8f8;
    .order-details {
        padding: 0 3vw 150px 3vw;
        background-color: #fff;
        border-radius: 20px;
        margin-top: 120px;
        .order-head {
            border-radius: 20px;
            padding: 2.5vw;
            margin-bottom: 50px;
            outline: 15px solid #f8f8f8;
            border-radius: 20px;
            position: relative;
            top: -80px;
            background-color: #fff;
            p{
                margin:  10px 0;
                font-size: 16px;
                span{
                    font-weight: bold;
                    margin-right: 15px;
                }
            }
        }
    
        .order-body {
            .table-bordered {
                border: none;
                th, td {
                    border: 1px solid #9993;
                    &.text-left{
                        text-align: initial;
                    }
                }
            }
            .table{
                .img img {
                    width: 80px;
                    height: 80px;
                    object-fit: cover;
                    border: 1px solid #ddd;
                    border-radius: 10px;
                }
                thead {
                    th{
                        background-color: #f9f9f9;
                        color: #000;
                    }
                }
            }
        }
    }
    .table th, .table td {
        font-size: 14px;
        text-align: center;
        vertical-align: middle;
        padding: 1rem 1.5rem;
    }
    .table_box {
        // border: 1px solid #ddd;
        border-radius: 15px;
        border-top: .2px solid #9993;
        border-right: 1px solid #9993;
        border-left: 1px solid #9993;
        border-bottom: .2px solid #9993;

        overflow: hidden;
      
    }
    .order_foot {
        border-radius: 20px;
        padding: 2.5vw;
        margin-bottom: 50px;
        outline: 15px solid #f8f8f8;
        border-radius: 20px;
        position: relative;
        // top: -80px;
        margin-top: -100px;
        background-color: #fff;
        .qr_box {
            // background-color: #F2F2F2;
            border-radius: 15px;
            overflow: hidden;
            // box-shadow: 3px 6px 10px 0 #0001;
            margin-top: 30px;
            padding: 30px;
            border: 1px solid #9993;
            .sec-img {
                height: 200px;
                object-fit: contain;
                display: block;
                margin: auto;
            }
        }
    
        .pay_box {
            margin-top: 30px;
            .label {
                color: #012E47;
            }
            li{
                font-size: 15px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 15px 0;
                border-bottom: 1px solid #9993;
                &:last-of-type {
                    border: 0;
                    padding-bottom: 0;
                }
            }
        }
    }


}


/**********************************************
    Start Edit coming_soon Page 
**********************************************/
.coming_pg {
    background-image: linear-gradient(to right , #FFF1E7 , #BC8171);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    .txt_box {
        .title {
            font-size: 65px;
            font-size: calc(35px + 1.8vw );
        }
        .p {
            text-align: justify;
            color: #1E1E1E;
        }
        .form-group {
            .form-control {
                border-radius: 5px;
                height: 55px !important;
                background-color: #f9f9f9;
            }
            .submit_butn {
                position: absolute;
                inset-inline-end: 0;
                top: 0;
                width: 50px;
                height: 55px;
                background-color: var(--primary);
                color: #fff;
                border-radius: 5px 0 0 5px;
            }
        }
    }

    .img_box {
        position: relative;
        .img {
            object-fit: contain;
            position: relative;
            z-index: 5;
        }
        &::before {
            content: '';
            width: 100%;
            max-width: 420px;
            height: 100%;
            background: url(../images/circle_white.svg) no-repeat center;
            background-size: contain;
            position: absolute;
            top: -60px;
            left: 0;
        }
        &::after {
            content: '';
            width: 100%;
            height: 100%;
            background: url(../images/ciecles_header.png) no-repeat center;
            background-size: contain;
            position: absolute;
            top: 0;
            left: -50px;
            z-index: 1;
            animation: rotating 35s alternate-reverse linear infinite;
        }
    }
}



/**********************************************
    Start Edit error_404 Page 
**********************************************/
.error_pg {
    .secImg {
        height: auto;
        object-fit: contain;
    }
}

/**********************************************
    Start Edit Media screens 
**********************************************/
@media screen and (max-width: 991px) {
    .order_md_1 {
        order: -1;
    }
    .navs-container {
        .top_nav {
            .p {
                font-size: 9px;
            }
            .social_links {
                font-size: 12px;
                a {
                    margin: 0 5px;
                }
            }
        }
       .middle_nav .inner{
        border-bottom: none;
            .logo {
                margin: 5px 0 20px 0;
            }
            .dropdown button{
                font-size: 10px;
                .icon  {
                    width: 13px;
                    height: 13px;
                    margin-inline-end: 4px !important;
                    // display: none;
                }
            }
        }
        .navbar {
            padding: 0 1rem;
            z-index: 99;
            .navbar-toggler {
                position: absolute;
                top: -43px;
            }
        }
    }
    .header {
        .txt_box .title {
            font-size: 30px;
        }
        .img_box{
            &::before {
                top: 0;
            }
        }
    }
    .sec_head {
        .title_head {
            font-size: 45px;
        } 
        .subtitle_head {
            font-size: 20px;
        }
    }
    .products_sec .nav-link {
        width: fit-content;
        padding: .5rem;
        font-size: 12px;
        margin: 0 .6vw;
    }
    .banner_shopping .inner {
        .txt_box{
            .title {
                font-size: calc(1vw + 40px);
            }
            .p {
                font-size: 12px;
            }
        }
        .secImg {
            width: 70%;
        }
    }
    .newsletter_sec .inner{
        .feedback_box {
            border-inline-end: none;
            border-bottom:  1px solid #E6E6E6;
           .feedback_card .p {
                font-size: 14px;
            }
        }
        .newsletter_box .title {
            font-size: 35px;
        }
    }

    .footer {
        .head_flex .logo {
            width: 140px;
        }
        .foot .p {
            font-size: 11px;
        }
    }
}

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

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


/**********************************************
    Start Edit EN direction 
**********************************************/
html[dir="ltr"]{

    @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');

    body{
        direction: ltr;
        font-family: 'Poppins', sans-serif;
    }

}