@import url("https://use.fontawesome.com/releases/v5.8.1/css/all.css");
    @import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css");
    @import url('https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.css');
    @import url('../vendors/pincode/css/jquery-pincode-autotab.css');
    @import url('../css/owl.carousel.min.css');
    @import url('https://fonts.googleapis.com/css2?family=Almarai:wght@300;400;700;800&display=swap');

    
    h1, h2 ,h3 ,h4 ,h5, h6{
        font-family: 'Almarai', sans-serif;
    }
    .fa, .fab, .fal, .far, .fas{
        line-height: inherit !important;
    }
    body {
        width: 100%;
        font-family: 'Almarai', sans-serif;
        font-weight: 400;
        font-size: 14px;
    }
    a,a:hover {
        text-decoration: none;
    }
    .text-theme{
        color:  var(--default-color) !important;
    }

    .by-default{
        background-color: var(--default-color) !important;
        color: #fff;
    }



    form.disabled{
        opacity: .75;
        pointer-events: none;
    }
    section{
        padding: 60px 0;
    }
    .dropdown-menu{ 
        width: 197px;
        border: none;
        background: #FFFFFF;
        box-shadow: 0px 3px 26px #00000029;
        border-radius: 10px;
        padding: 1rem;
    }
    .dropdown-menu .dropdown-item{
        font-size: 14px;
        font-weight: 700;
        color: #141211;
        padding: .5rem 1rem;
        border-radius: 8px;
        line-height: 1.5;
        position: relative;
        cursor: pointer;
    }
    .sub-dropdown-item:after
    {
        left: 9px;
    position: absolute;
    }
    .dropdown-menu .dropdown-item:hover{
        color: var(--default-color) !important;
        background-color: rgb(140 140 140 / 20%);
    }
    .dropdown-menu .dropdown-item:active,
    .dropdown-menu .dropdown-item:focus{
        color: #fff;
        background-color: rgb(208, 1, 26, 1);
    }
    .page-content{
       font-size: 16px;
       line-height: 2;
       color: #141211;
    }
    .page-content h5
    {
        line-height: 1.5;
    }
    /*------------------------------------------
        button
    ------------------------------------------*/
    .w-1000{
        width: 100% !important;
    }
    .li-arrow
    {
        font-size: 20px;
    padding: 0px 12px;
    color: #000;
    cursor: pointer;
    }
    .li-arrow:hover, .li-arrow:hover a
    {
        color: var(--default-color) !important;
    }
    .p-number{
        padding: 5px;
        margin: 2px;
        background-color: var(--default-color) !important;
        width: 30px;
        color: #212529 ;
        font-weight: 400;
        
    }
    .p-number a{
        color: #ffffff;
    }
    .p-active{
        color: #212529 ;

    }
    .p-number.active{
        background-color: #212529;
        color: #ffffff;
    }
	.btn{
		position: relative;
		overflow: hidden;
        height: 45px;
        line-height: 45px;
        font-size: 14px;
        padding: 0;
        border-radius: 16px;
		transition: all ease-in-out .5s;
        outline: none !important;
        box-shadow: none !important; 
	}
	.btn::after {
		content: "";
		display: block;
		position: absolute;
		top: 0;
		left: 25%;
		height: 100%;
		width: 50%;
		background-color: #fff;
		border-radius: 50%;
		opacity: 0;
		pointer-events: none;
		transition: all ease-in-out 0.5s;
		transform: scale(5, 5);
	}
	.btn:active::after{
		padding: 0;
		margin: 0;
		opacity: .2;
		transition: 0s;
		transform: scale(0, 0);
	} 
    .btn-theme{
        background-color:  var(--default-color) !important;
        border-color:  var(--default-color) !important;
        color: #fff;
    }
    .btn-theme:hover,
    .btn-theme:focus{
        background-color: #000000;
        border-color:  #000000;
        color: #fff;
    } 

    .btn-theme-light{
        background-color:  #fff;
        border-color:  #fff;
        color: var(--default-color) !important;
    }
    .btn-theme-light:hover,
    .btn-theme-light:focus{
        background-color: var(--default-color) !important;;
        border-color:  var(--default-color) !important;;
        color: #fff;
    } 
  

    /*------------------------------------------
        Navbar Top
    ------------------------------------------*/

    .nav-top{ 
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 56px;
        background-color: #fff;
        border-bottom: 1px solid #DBDBDB;
    }
    .nav-top-container{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .nav-top-container .dropdowns .dropdown{
        display: inline-block;
        font-size: 14px;
    }
    .nav-top-container .dropdowns .dropdown .dropdown-toggle{
        display: inline-block;
        font-size: 14px;
        color: #655151;
    }
    .nav-top-container .contacts .nav .nav-item{
        border-inline-end: 1px solid #707070;
        height: 17px;
        padding: 0 2rem;
        line-height: 1;
    }
    .nav-top-container .contacts .nav .nav-item:last-child{
        border-inline-end: none;
        padding-inline-end: 0;
    }
    .nav-top-container .contacts .nav .nav-link{
        color: #000000;
        font-size: 14px;
        padding: 0;
    }
    .nav-top-container .contacts .nav .nav-link:hover{
        color: var(--default-color) !important;
    }
    .nav-top-container .contacts .nav-social-media{
        gap: 1rem;
    }
    .nav-top-container .contacts .nav-social-media a{
        display: block;
        font-size: 14px;
        color: #777777;
        transition: all .3s ease;
    }
    .nav-top-container .contacts .nav-social-media a:hover{
        color: var(--default-color) !important;
    }

    /*------------------------------------------
        Navbar
    ------------------------------------------*/
    
    .navbar{
        z-index: 998;
        background-color: #fff;
        padding: 0;
        padding: 40px 0;
    }
    .navbar-container{
        width: 100%;
        display: flex;
    }
    .navbar-container .logo{
        min-width: 123px;
        height: 123px;
        overflow: hidden;
        margin-inline-end: 40px;
    }
    .navbar-container .logo img{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
     
    .navbar-container .nav-content{
        display: block;
        width: 100%;
    }
    .navbar-container .content{
        width: 100%;
        display: flex;
        justify-content: space-between;
        margin-bottom: 1rem;
    }
    .search-box{
        width: 520px;
        display: flex;
        border-radius: 11px;
        overflow: hidden;
        border: 1px solid #B7BDBF;
    }
    .search-box .form-control{
        border: none;
        box-shadow: none !important;
    }
    .search-box .form-control::placeholder{
        color: #141211;
    }
    .search-box .btn{
        width: 50px;
        height: 50px;
        line-height: 45px;
        border-radius: 11px;
    }
    
    .navbar-container .content .action .btn{
        width: 150px;
        font-weight: 700;
        transition: all .3s ease;
    }
    .navbar-container .content .action .btn:hover{
        background-color: rgb(140 140 140 / 20%);
        color: var(--default-color) !important;
    }
    .navbar-container .content .action .btn-custom{
        padding-top: 0;
        padding-bottom: 0;
    }
    .navbar-container .content .action .btn-custom i{
        font-size: 30px;
        color: #000;
    }
    .navbar-container .content .action .btn-custom .balance{
        font-weight: 700;
        font-size: 20px;
        color: #000;
    }
    .navbar-container .content .action .btn-custom .count{
        width: 20px;
        height: 20px;
        line-height: 20px;
        font-weight: 700;
        border-radius: 50%;
        color: #fff;
        background-color: var(--default-color) !important;
        display: inline-block;
        text-align: center;
        margin-inline-end: -1rem;
        position: relative;
        z-index: 1;
    }
    .menu{
        background-color:var(--secondary-color) !important;
        border-radius: 11px;
        height: 56px;
        line-height: 56px; 
    }
    .menu .navbar-nav{
        gap: 1rem;
    }
    .menu .nav-link{
        position: relative;
        font-size: 16px;
        padding: 0 1.5rem !important;
        color: #fff;
    }
    .menu .nav-link::after{
        position: absolute;
        content: "";
        bottom: 7.5px;
        left: 50%;
        width: 0;
        transform: translateX(-50%);
        height: 3px;
        border-radius: 5px;
        background-color: #fff;
        opacity: 0;
        transition: all.3s ease;
    }
    
    .menu .nav-link:hover::after,
    .menu .active .nav-link::after{
        width: 30px;
        opacity: 1;
    }
    .menu .nav-link:hover,
    .menu .active .nav-link{
        background-color: var(--default-color) !important;
        color: #FFFFFF !important;
    }

    /*------------------------------------------
        Header
    ------------------------------------------*/

    .owl-header-box{
        position: relative;
        width: 100%;
        height: 440px;
        border-radius: 0;
        overflow: hidden; 
    } 
   
    .owl-header-box .header-pic{
        object-fit: cover;
        width: 100%;
        height: 100%;
    }
    .owl-header-box .owl-header-box-content{
        position: absolute;
        content: "";
        bottom: 0;
        right: 0; 
        z-index: 2;
        max-width: 550px;
        width: 100%;
        background-color: var(--default-color) !important;
        color: #fff;
        padding: 70px;
    }
    [dir="ltr"] .owl-header-box .owl-header-box-content{
        right: auto; 
        left: 0; 
    }
    .owl-header-box .owl-header-box-content .title{
        color: #fff;
        font-size: 44px;
        margin-bottom: 20px;
    }
    .owl-header-box .owl-header-box-content .info{
        color: #fff;
        font-size: 20px;
        line-height: 32px;
        margin-bottom: 20px;
    }
    .owl-header-box .owl-header-box-content .btn{
        max-width: 160px;
        width: 100%;
    }
    #header .owl-nav.disabled+.owl-dots{
        position: absolute;
        bottom: 30px; 
        right: 90px;
    }
    [dir="ltr"] #header .owl-nav.disabled+.owl-dots{ 
        right: auto;
        left: 90px;
    }
    
    #header .owl-dots .owl-dot span{
        background-color: #DBDBDB;
        width: 20px;
        height: 5px;
        border-radius: 0;
    }
    #header .owl-dots .owl-dot.active span,
    #header .owl-dots .owl-dot:hover span{
        background-color: #000;
    }

    .inner-header{
        display: flex;
        align-items: center;
        height: 200px;
        background-color: var(--default-color) !important;
    }
    .inner-header .title{
        font-size: 32px;
        font-weight: 800;
        color: #fff;
    }
    .inner-header .breadcrumb{
        margin-bottom: 0;
    }
    .inner-header .breadcrumb-item,
    .inner-header .breadcrumb-item+.breadcrumb-item::before,
    .inner-header .breadcrumb-item.active{
        color: #fff;
    }

    @media only screen and (min-width: 1200px){ 
        .col-lg-1-5 {
            width: 20%;
        }
    }
 
    /*------------------------------------------
        section title
    ------------------------------------------*/

    .section-title{
        position: relative;
        margin-bottom: 2rem;
        border-bottom: 2px solid #DBDBDB;
    }
    .section-title::after{
        position: absolute;
        content: "";
        bottom: -2px;
        right: 0;
        background-color: var(--default-color) !important;
        width: 300px;
        height: 2px;
    }
    [dir="ltr"] .section-title::after{
        right: auto;
        left: 0;
    }
    .section-title .title{
        font-size:26px;
        color: var(--default-color) !important;
        margin-bottom: 1rem;
    }

    /*------------------------------------------
        Products
    ------------------------------------------*/

    .nav-product {
        gap:0.8rem;
        margin-bottom: 2rem;
    }
    .nav-product .nav-link{
        background-color: #F2F2F2;
        color: #141211;
        font-size:18px;
        border-radius: 8px;
    }


    .main-category .nav-link{
        background-color: #ffffff;
    }

    .nav-product .nav-link:hover{
        background-color: rgb(209, 0, 24, .2);
        color: var(--default-color) !important;
    }
    .nav-product .nav-link.active,
    .nav-product .nav-link:active,
    .nav-product .nav-link:focus{
        background-color: var(--default-color) !important;
        color: #fff;
    }

    .product-box{
        background-color: #F7F7F9;
        padding: 1rem;
        border-radius: 12px;
        margin-bottom: 1.5rem;
        transition: all .3s ease;
        height: 300px;
        position: relative;
    }
    .product-box .pic{
        width: 100%;
        height: 120px;
        overflow: hidden;
        border-radius: 12px;
        margin-bottom: 1rem;
    }
    .product-box .pic img{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .product-box .content {
      
        padding-bottom: 30px;
    }
    .product-box .content .title{
        height: 20px;
        font-size: 16px;
        color: #141211;
        margin-bottom: 1rem;
    }
    .product-box .content .price{
        font-size: 18px;
        color: #141211;
    }
    .old{
        text-decoration: line-through;
        margin-inline-end: 1rem;
    }
    .product-box .content .price .new{
        color: var(--default-color) !important;
    }
    .product-box .content .add-cart{
        position: absolute;
        display: block;
        bottom: 1rem;
    left: 1rem;
        width: 30px;
        height: 30px;
        line-height: 30px;
        border-radius: 50%;
        text-align: center;
        color: #fff;
        font-size: 30px;
        background-color: var(--default-color) !important;
    }

    [dir="ltr"] .product-box .content .add-cart{
        left: auto;
        right: -1rem;
    }
    .product-box:hover{
        transform: translateY(-.5rem);
        box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
    }

    /*------------------------------------------
        product-view
    ------------------------------------------*/
    .box-gift{
        position:absolute;left:
         5px;z-index:1;
         width: 25px;height: 25px;
         top: 5px;
         line-height: 25px;
         text-align: center;
         justify-content: center;
    }
    .head .fa-gift{
        background: #fff;
        width: 52px;
        height: 52px;
        text-align: center;
        line-height: 52px !important;
    }
    .product-view{
        display: flex; 
    }
    .product-view .content{
        width: 100%;
    }
    .product-view .pic{
        min-width: 450px;
        width: 450px;
        border-radius: 15px;
        overflow: hidden;
        margin-inline-end: 2rem;
    }
    .product-view .pic img{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .product-view .head{
        width: 100%;
        padding: 1rem 2rem;
        background-color: #F5F5F5;
        border-radius: 15px;
        margin-bottom: 1.5rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .product-view .head .title{
        font-size: 24px;
        font-weight: 800;
        margin-bottom: 1rem;
        color: #141211;
    }
    .product-view .head .category{
        font-size: 16px;
        font-weight: 400;
        color: #141211;
        margin-bottom: 1rem;
    }
    .product-view .head .nav-review {
        gap: .5rem;
    }
    .product-view .head .nav-review .nav-item{
        font-size: 16px;
        font-weight: 400;
        color: #B4B4B4;
    }
    .product-view .head .price{
        font-size: 24px;
        font-weight: 800;
        color: var(--default-color) !important; 
    }

    .product-view .body{
        margin-bottom: 1rem;
    }
    .product-view .body .details{
        font-size: 14px;
        line-height: 2;
        color: #46494A;
        padding: 1rem;
        border-radius: 15px;
        border: 1px solid #DBDBDB;
    }
    
    .form-check .form-check-input{
        margin-top: 6px;
        box-shadow: none !important;
    }
    .option-box{
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        
    } 
    .option-box .cost,.form-check-input
    {
        margin-top: 10px;
    }
    .cart-count{
        display: flex;
        align-items: center; 
        border-radius: 14px;
        max-width: 130px;
        margin-top: 10px;
    }
    .cart-count.disabled{
        pointer-events: none;
        opacity: .7;
    }
    .cart-count .output{ 
        border: none;
        background: transparent;
        width: 50px;
        text-align: center;
        font-size: 16px;
        font-weight: 800;
        color: #141211;
    }
    .cart-count .counter-btn{
        padding: 0; 
        font-size: 10px;
        text-align: center; 
        min-width: 30px;
        width: 30px;
        height: 30px;
        line-height: 25px; 
        color: #141211;
        border-radius: 50%;
        box-shadow: 1px 3px 6px rgb(0, 0, 0, .16) !important;
    }
    .cart-count .counter-btn:hover{
        background-color: rgb(140 140 140 / 20%); 
        color: var(--default-color) !important;
    }
    .cart-count .counter-btn:focus{
        background-color: var(--default-color) !important;
        color: #fff;
    }
    .form-note{
        font-size: 14px;
        color: #179A26;
    }
    
    .box-c{
     width:50%;
    position: absolute;
    bottom: 40px;
    margin: auto !important;
    justify-content: center;
    padding: 0;
    left: 10%;    
    }
    
    .form-action{
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 1rem;
        width: 100%;
    }
    .form-action .cart-count .counter-btn{
        min-width: 40px;
        width: 40px;
        height: 40px;
        line-height: 35px;
    }
    .add-bookmark{
        display: block;
        min-width: 40px;
        width: 40px;
        height: 40px;
        line-height: 40px;
        border-radius: 50%;
        color: #fff;
        text-align: center;
        background-color: #141211;
    }
    .add-bookmark:hover{ 
        background-color: rgb(208, 1, 26,.2);
        color: rgb(208, 1, 26);
    }
    .add-bookmark.active{ 
        background-color: var(--default-color) !important;
    }
    .add-bookmark.active:hover{ 
        color: #fff;
    }
    .form-action .total{
        font-size: 20px;
        font-weight: 800;
        color: var(--default-color) !important;
    }
    .form-action .btn{
        min-width: 160px;
    }
    /*------------------------------------------
        app-box
    ------------------------------------------*/
    
    .app-section{
        padding: 0;
    }
    .app-box{
        border-radius: 12px;
        padding: 2rem;
        display: block;
        align-items: center;
        justify-content: space-around;
        text-align: center;
        color: #fff;
        
    }
    .app-box .content .title{
        font-size: 30px;
        font-weight: 800;
        margin-bottom: 1rem;
    }
    .app-box .content .info{
        font-size:16px;
        font-weight: 300;
        margin-bottom: 0;
    }
    .app-section .btn-app{
        padding: 0;
    }

    .app-box .link .app-link img{
        width: 170px;
    }

    /*------------------------------------------
        services-pic
    ------------------------------------------*/
    
    .services-pic{
        position: relative;
    }
    .services-pic img{
        max-width: 500px;
    }
    .services-pic .content{
        position: absolute;
        top: 50%;
        left: 0;
        transform: translate(5%, -50%);
        display: inline-block;
        padding: 1rem 2rem;
        background-color: var(--default-color) !important;
        border-radius: 12px;
        color: #fff;
        text-align: center;
    }
    [dir="ltr"] .services-pic .content{
        left: auto;
        right: 0;
        transform: translate(-5%, -50%);
    }
    .services-pic .content .title{
        font-size: 20px;
        margin-top: 1rem;
    }
    .services-boxs{
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
    }
    .services-box{
        padding: 1rem;
        display: block;
        width: calc((100% / 3) - 0.7rem);
        border: 1px solid #DBDBDB;
        border-radius: 15px;
        transition: all .3s ease;
    }
    .services-box:hover{
        border-color: transparent;
        transform: translateY(-.5rem);
        box-shadow: 0 10px 15px rgb(0, 0, 0, .16);
    }
    .services-box .icon{
        height: 34px;
        margin-bottom: 1rem;
    }
    .services-box .icon img{
        height: 100%;
    }
    .services-box .content .title{
        font-size: 18px;
        font-weight: 700;
        color: #000;
    }
    .services-box .content hr{
        width: 40px;
        height: 3px;
        background-color: var(--default-color) !important;
        opacity: 1;
    }
    .services-box .content .info{
        font-size: 14px;
        font-weight: 300;
        color: #000;
    }

    /*------------------------------------------
        testimonial
    ------------------------------------------*/
     
    .testimonial-box {
        padding: 2rem 1rem;
        border-radius: 5px;
        background-color: #fff;
        border: 1px solid #efefef;
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
        -o-border-radius: 8px;
        border-radius: 8px;
        -webkit-box-shadow: 0px 10px 15px 0px rgba(5, 5, 5, .05);
        -moz-box-shadow: 0px 10px 15px 0px rgba(5, 5, 5, .05);
        box-shadow: 0px 10px 15px 0px rgba(5, 5, 5, .05);
    }

    .testimonial-box .author{
        position: relative;
        display: flex;
        justify-content: center;
        padding: 2rem;
        flex-direction: column;
    }
    .testimonial-box .text
    {
        position: relative;
        padding-right: 35px;
    }
    .testimonial-box .text .pic::before{
        position: absolute;
        content: "";
        background-image: url(../img//say.svg);
        background-repeat: no-repeat;
        background-size: contain;
        bottom: 0;
        right: 0;
        width: 26px;
        height: 26px;
        top: 0px;
    }
    .testimonial-box .author .nav-review
    {
        font-size: 16px;
    font-weight: 400;
    color: #B4B4B4;
    }
    [dir="ltr"] .testimonial-box .text .pic::before{
        right: auto;
        left: 0;
    }
    /*.testimonial-box .text .pic{
        position: relative;
        margin-inline-end: 1rem;
    }*/
    .testimonial-box .text .pic .img-author{
        width: 90px;
        height: 90px;
        line-height: 90px;
        text-align: center;
        overflow: hidden;
        background-color: #F5F5F5;
        color: #000;
        font-weight: 800;
        font-size: 30px;
        border-radius: 50%;
    }
    .testimonial-box .text .pic .img-author img{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .testimonial-box .content .name{
        font-size: 20px;
        color: #434242;
        margin-bottom: .5rem;
    } 
    .testimonial-box .content .job{
        font-size: 16px;
        color: #434242;
        margin-bottom: 0;
    } 
 
    .testimonial-section .owl-dots .owl-dot span{
        background-color: #F5F5F5;
        width: 12px;
        height: 12px;
    }
    .testimonial-section .owl-dots .owl-dot.active span,
    .testimonial-section .owl-dots .owl-dot:hover span{
        background-color: var(--default-color) !important;
    }
    .testimonial-section{
    background-image: linear-gradient(180deg, rgba(244, 244, 249, .8) 50%, rgba(244, 244, 249, .05) 100%);
    }

    /*------------------------------------------
        Footer
    ------------------------------------------*/

    .footer{
        padding: 5rem 0 5rem;
        border-top: 1px solid #DBDBDB;
    }
    .footer .about-website{
        font-size: 15px;
        line-height: 2;
        color: #777777;
    }
    .footer .nav-social-media{
        padding: 1rem 0;
    }
    .footer .nav-social-media .nav-link{
        font-size: 16px;
        line-height: 2;
        color: #777777;
        font-size: 20px;
    }
    .footer .nav-social-media .nav-link:hover{
        color: var(--default-color) !important;
    }
    .footer .footer-links{
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
    }
    .footer .footer-links .nav{
        width: calc((100% / 4) - 1rem);
    }
    .footer .footer-links .nav .title{
        font-size: 18px;
        font-weight: 800;
        margin-bottom: 1rem;
    }
    .footer .footer-links .nav .nav-item{
        color: #777777;
        padding: .5rem  0.0rem;
    }
    .footer .footer-links .nav .nav-link{
        position: relative;
        color: #777777; 
        transition: all .3s ease;
        padding: 0;
        display: inline-block;
    } 
    .footer .footer-links .nav .nav-item:hover,
    .footer .footer-links .nav .nav-link:hover{
        color: var(--default-color) !important;
    } 
    .copyright{
        padding: 1rem ;
        background-color: var(--default-color) !important;
        color: #fff;
        text-align: center;
    }
    .copyright a{
        color: #fff;
    }
    #box_whatsapp{
        position: fixed;
        left: 30px;
        background: #4baf4f;
        width: 50px;
        height: 50px;
        font-size: 1.9rem;
        text-align: center;
        border-radius: 50%;
        line-height: 50px;
        bottom: 30px;
        color: #fff;
    }
    /*------------------------------------------
        contact
    ------------------------------------------*/

    .contact-info{
        display: flex;
        flex-wrap: wrap;
    }
    .contact-info .contact-box{
        
        display: flex;
        align-items: center;
        margin-bottom: 2rem;
    }
    .contact-form{
        padding: 10% ;
        border: 1px solid #70707033;
        border-radius: 14px;
    }

    .login-form{
        padding: 60px;
        background-color: #F5F5F5;
        border-radius: 16px;
        text-align: center;
    }
    .login-form .title{
        font-size: 20px;
        font-weight: 800;
        margin-bottom: 1.5rem;
    }
    .login-form .info{
        font-size: 16px;
        font-weight: 300;
        margin-bottom: 2rem;
    }
    .login-form .btn-submit{
        color: #fff;
        background-color: var(--default-color) !important;
        border-color: var(--default-color) !important;
        max-width: 270px;
        width: 100%;
        margin: auto;
    }
    .phone-number{
        position: relative;
    }
    .phone-number .form-control{
        padding-left: 60px !important;
        line-height: 28px;
        background-image: none !important;
    }
    .phone-number .code{
        direction: ltr;
        position: absolute;
        content: "";
        top: 0;
        left: 0;
        text-align: center;
        width: 60px;
        height: 50px;
        line-height: 42px; 
        color: #141211;
        font-size: 14px;
        font-weight: 800;
    }
    
    .pincode input{
        width: 50px;
        height: 50px;
        line-height: 50px;
        background: #FFFFFF;
        border: 1px solid #141211;
        border-radius: 14px;
    }
    .pincode input:focus{
        border-color: var(--main-color);
    }
    .no-code a.pointer-events{
        pointer-events: none;
        color: #222;
        text-decoration: line-through;
    }

 /*------------------------------------------
        .profile
    ------------------------------------------*/
    
    .profile-sidebar{
        background-color: #000000;
        border-radius: 15px;
        padding: 50px;
        margin-bottom: 2rem;
        position: sticky;
        top: 100px;
    }
    .profile-sidebar .user-box{
        display: flex;
        align-items: center;
        color: #fff;
    }
    .profile-sidebar .user-box .pic{
        min-width: 70px;
        width: 70px;
        height: 70px;
        border-radius: 50%;
        margin-inline-end: 1rem;
    }
    .profile-sidebar .user-box .pic img{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .profile-sidebar .user-box .content .name{
        font-size: 20px;
        font-weight: 800;
        margin-bottom: .5rem;
    }
    .profile-sidebar .user-box .content .phone{
        font-size: 16px;
        font-weight: 300;
        margin-bottom: 0;
    }
    .profile-sidebar .user-box .content {
        width: 100%;
    }
    .profile-sidebar .user-box .btn-collapse{
        margin-inline-start: 1rem;
        font-size: 30px;
    }

    .profile-list .nav-link{
        color: #fff;
        font-size: 18px;
        font-weight: 700;
        padding: 1rem;
        border-radius: 15px;
    }
    .profile-list .nav-link.active{
        color: #fff;
        background-color: var(--default-color) !important;
    }

    /*--------------------------------------
        cart-box
    --------------------------------------*/
    
    .cart-box{
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1rem;
        background-color: #F5F5F5;
        border-radius: 15px;
        margin-bottom: 1rem;
    }
    .cart-box .product-cart-box{ 
        display: flex; 
        align-items: center;
    }
    .cart-box .product-cart-box .pic{
        min-width: 80px;
        width: 80px;
        height: 80px;
        overflow: hidden;
        border-radius: 15px;
        margin-inline-end: 1rem;
    }
    .cart-box .product-cart-box .pic img{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .cart-box .product-cart-box .title{
        font-size: 20px;
        color: #141211;
        font-weight: 700;
    }
    .cart-box .product-cart-box .price{
        font-size: 16px;
        font-weight: 700;
        color: var(--default-color) !important;
        margin-bottom: 0;
    }
    .cart-box .product-cart-box .price{
        font-size: 14px;
        color: var(--default-color) !important;
        margin-bottom: 0;
    } 

    .cart-total{
        font-weight: 880;
        font-size: 20px;
        color: #141211;
    }
    .cart-total span{
        color: var(--default-color) !important;
    }
    
    .nav-cart-payment{
        padding: 4rem 0;
        justify-content: center;
        flex-wrap: nowrap; 
    }
    .nav-cart-payment .nav-item {
        position: relative;
        text-align: center;
        padding: 0 5rem;
    }
    .nav-cart-payment .nav-item::before,
    .nav-cart-payment .nav-item::after{
        position: absolute;
        content: "";
        top: 10px;
        left: 0;
        width: 50%;
        height: 1px;
        border-top: 1px dashed #868686;
        z-index: -1;
    }
    
    .nav-cart-payment .nav-item::before{
        left: auto;
        right: 0;
    }
    .nav-cart-payment .nav-item:first-child:before{
        display: none;
    }
    .nav-cart-payment .nav-item:last-child::after{
        display: none;
    }
    .nav-cart-payment .nav-item span{
        position: relative;
        display: inline-block;
        width: 20px;
        height: 20px; 
        border-radius: 50%;
        background-color: #fff;
        border: 1px solid #868686;
        margin-bottom: 1.5rem;
    }
    .nav-cart-payment .nav-item span::before{
        position: absolute;
        content: "";
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background-color: #868686;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    .nav-cart-payment .nav-item .title{
        font-size: 16px;
        font-weight: 800;
        color: #868686;
    }
    
    .nav-cart-payment .nav-item.active span{
        border-color: var(--default-color) !important;
    }
    .nav-cart-payment .nav-item.active span::before{
        background-color: var(--default-color) !important;
    }
    .nav-cart-payment .nav-item.active .title{
        color: var(--default-color) !important;
    }
    .nav-cart-payment .nav-item.done span{
        border-color: #141211;
    }
    .nav-cart-payment .nav-item.done span::before{
        background-color: #141211;
    }
    .nav-cart-payment .nav-item.done .title{
        color: #141211;
    }

    .delivery-box{
        padding: 3rem 0;
    }
    .delivery-box .title{
        font-size: 20px;
        font-weight: 800;
    }   
    .order-box{
        background-color: #FFF;
    color: black;
        padding: 2rem;
        border-radius: 15px;
        border: 1px solid #908d8d;
    }
    .order-box .table{
        color: #000;
        margin-bottom: 0;
    }
    /*--------------------------------------
        address-box
    --------------------------------------*/
    
    .address-box{
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1.2rem 2rem;
        background-color: #F5F5F5;
        border-radius: 15px;
        margin-bottom: 1rem;
    }
    .address-box .address-info{
        display: flex;
        align-items: center;
    }
    .address-box .address-info .icon{
        min-width: 50px;
        width: 50px;
        height: 50px;
        line-height: 50px;
        border-radius: 50%;
        text-align: center;
        background-color: #fff;
        margin-inline-end: 1rem;
        color: var(--default-color) !important; 
        font-size: 20px;
        transition: all .3s ease;
    }
    .address-box:hover .address-info .icon{
        background-color: var(--default-color) !important;
        color: #fff;
    }
    .address-box .address-info .title{
        font-size: 20px;
        color: #141211;
        font-weight: 700;
    }
    .address-box .address-info .info{
        font-size: 16px;
        color: #141211;
        margin-bottom: 0;
    }

    .add-address-box{
        padding: 3rem;
    }
    .add-address-box .title{
        font-weight: 800;
        font-size: 20px;
    }
    .add-address-box .form-labek{
        font-size: 14px;
    }

    /*--------------------------------------
        payment
    --------------------------------------*/
  
  
  
    .payment-way-box{ 
        background-color: #F5F5F5;
        border-radius: 15px;
        margin-bottom: 1rem;
    }
    .payment-way-box input[type=radio]{
        display: none;
    }
    .payment-way-box .title{
        padding: 2rem;
        position: relative;
        font-weight: 800;
        font-size: 18px;
        display: block;
        color: #141211;
        cursor: pointer;
    } 
    .payment-way-box .title::after{
        position: absolute;
        font-family: "Font Awesome 5 Free"; 
        font-weight: 900; 
        content: "\f00c";
        top: 50%;
        left: 2rem;
        transform: translateY(-50%);
        width: 20px;
        height: 20px;
        line-height: 18px;
        font-size: 11px;
        color: #F5F5F5;
        text-align: center;
        border-radius: 50%;
        border: 1px solid var(--default-color) !important;
    }
    [dir="ltr"] .payment-way-box .title::after{
        left: auto;
        right: 2erm;
    }
    
    .payment-way-box input[type=radio]:checked + label.title::after{
        background-color: var(--default-color) !important;
        color: #fff;
    }

    
    .e-payment-way .nav-link input[type=radio]{
        display: none;
    }
    .e-payment-way .nav-link label{
        cursor: pointer;
        width: 90px;
        height: 60px;
        display: block;
        padding: .75rem;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid transparent;
        border-radius: 12px;
    }
    .e-payment-way .nav-link img{ 
        height: 35px;
    }

    .e-payment-way input[type=radio]:checked + label{
        border-color: var(--default-color) !important;
    }
        
    .bank-payment-way .nav-link input[type=radio]{
        display: none;
    }
    .bank-payment-way .nav-link label{
        cursor: pointer;
        width: 90px;
        height: 60px;
        display: block;
        padding: .75rem;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid transparent;
        border-radius: 12px;
    }
    .bank-payment-way .nav-link img{ 
        height: 35px;
    }
    .bank-payment-way input[type=radio]:checked + label{
        border-color: var(--default-color) !important;
    }
    /*--------------------------------------
        request-box
    --------------------------------------*/
    
    .request-box{
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 2rem;
        background-color: #F5F5F5;
        border-radius: 15px;
        margin-bottom: 1rem;
    }
    .request-box .request-date{
        font-size: 16px;
        font-weight: 700;
        margin-bottom: .5rem;
    }
    .request-box .request-no{
        font-size: 16px;
        font-weight: 700;
        margin-bottom: 0;
    } 
    .request-box .total{
        font-size: 16px;
        margin-bottom: 0;
        color: #141211;
    } 
    .request-box .total span{
        font-weight: 700; 
    } 

    /*--------------------------------------
       request-timeline
    --------------------------------------*/
    .request-timeline{
        margin: 2rem 0;
        padding-inline-start: 2.5rem;
        margin-inline-start: 1.5rem;
        border-inline-start: 2px solid #D8DFE5;
    }
    .request-timeline-box{
        position: relative;
        margin-bottom: 2rem;
    }
    .request-timeline .nav-item:last-child .request-timeline-box{
        margin-bottom: 0;
    }
    .request-timeline-box::before{
        position: absolute;
        content: "";
        top: 50%;
        right: -3.2rem;
        transform: translateY(-50%);
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background-color: #D8DFE5;
    }
    .request-timeline-box.active::before{
        background-color: var(--default-color) !important;
    }
    .request-timeline-box .title{
        font-size: 16px;
        font-weight: 800;
        color: #141211;
    }
    .request-timeline-box .info{
        font-size: 12px; 
        color: #8E8E8E;
    }

    /*--------------------------------------
        notefication
    --------------------------------------*/
    
    .notefication-box{
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1rem;
        background-color: #F5F5F5;
        border-radius: 15px;
        margin-bottom: 1rem;
    }
    .notefication-box .title{
        font-size: 20px;
        color: #141211;
    }
    .notefication-box .info{
        font-size: 16px;
        color: #141211;
        margin-bottom: 0;
    }
    .notefication-box .date{
        min-width: 50px;
        font-size: 13px;
        color: #141211;
        margin-bottom: 0;
    }

    /*--------------------------------------
        request
    --------------------------------------*/

    .nav-request{
        justify-content: center;
        gap: 1rem;
        margin-bottom: 3rem;
    }
    .nav-request .nav-link{
        position: relative;
        background-color: transparent;
        color: #141211;
        border: 1px solid #141211;
        font-weight: 700;
        font-size: 16px;
        border-radius: 15px;
        padding: .5rem 1.5rem;
    }
    .nav-request .nav-link::before{
        position: absolute;
        content: "";
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: var(--default-color) !important;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        opacity: 0;
        transition: all .3s ease;
    }
    .nav-request .nav-link.active::before{
        bottom: -1.5rem;
        opacity: 1;
    }
    .nav-request .nav-link:focus,
    .nav-request .nav-link:active,
    .nav-request .nav-link.active,
    .nav-request .nav-link:hover{
        background-color: transparent;
        color: var(--default-color) !important;
        border: 1px solid var(--default-color) !important; 
    }
    .request-box{
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1rem;
        background-color: #F5F5F5;
        border-radius: 15px;
        margin-bottom: 1rem;
    }
    .request-box .title{
        font-size: 20px;
        color: #141211;
    }
    .request-box .info{
        font-size: 16px;
        color: #141211;
        margin-bottom: 0;
    }
    .request-box .status .price{ 
        min-width: 90px;
        font-size: 16px;
        color: #141211;
        margin-bottom: .5rem;
    }
    .request-box .status .badge{
        min-width: 90px;
        border-radius: 25px;
        padding: .5rem 0;
        font-weight: 400;
    }
#check_promocode
{
    background: #198754;
    border: #FFF;
}
    /*------------------------------------------
        Form
    ------------------------------------------*/
    
    .form-group{
        margin-bottom: 1.5rem;
    }
    .form-group .form-header{ 
        font-size: 16px;
        font-weight: 800;
        color: #141211;
    }
    .form-group label{
        margin-bottom: 1rem;
        font-size: 16px;
        color: #141211;
    }
    textarea.form-control
    {
        height: 245px;
    }
    .form-control{
        min-height: 40px;
        height: 40px;
        border: 1px solid #30344233;
        border-radius: 12px;
        font-size: 14px !important;
    }
    .btn-outline-form-control {
        border: 1px solid #30344233;
    }
    .form-control::placeholder{
        color: #707070;
    }
    .form-control:focus {
        color: #222; 
        outline: 0; 
        box-shadow: none;
    }
    .form-check-input {
        width: 1.2em;
        height: 1.2em;
        margin-top: .35em;
    }
    .form-check-input:checked {
        background-color: var(--default-color) !important;
        border-color: var(--default-color) !important;
    }
    .form-check-input:focus {
        border-color: var(--default-color) !important;
        outline: 0; 
    }
    .modal-backdrop.show {
        opacity: .80;
    }
    
    @media (min-width: 768px){
        .animate {
          animation-duration: 0.3s;
          -webkit-animation-duration: 0.3s;
          animation-fill-mode: both;
          -webkit-animation-fill-mode: both;
        }
    }
    @keyframes slideIn {
        0% {
          transform: translateY(2rem);
          opacity: 0;
        }
      
        100% {
          transform: translateY(0rem);
          opacity: 1;
        }
      
        0% {
          transform: translateY(2rem);
          opacity: 0;
        }
      }
      
      @-webkit-keyframes slideIn {
        0% {
          -webkit-transform: transform;
          -webkit-opacity: 0;
        }
      
        100% {
          -webkit-transform: translateY(0);
          -webkit-opacity: 1;
        }
      
        0% {
          -webkit-transform: translateY(2rem);
          -webkit-opacity: 0;
        }
    }
    .slideIn {
        -webkit-animation-name: slideIn;
        animation-name: slideIn;
    }