@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&family=Playwrite+GB+S:ital,wght@0,100..400;1,100..400&family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap');
:root{
    --heading-font : "Work Sans", sans-serif;
    --text-font : "Nunito Sans", sans-serif;
    --note-text : "Playwrite GB S", cursive;
    --main-color : #000;
    --alt-color : #141414; 
    --main2-color : #ffff00;
}
*{
    padding: 0;
    box-sizing: border-box;
}
body{
    padding: 0;
    margin: 0;
    background-color: var(--main-color);
}
header , section , footer{
    width: 100%;
    height: auto;
}
section , footer{
    padding: 55px 0px;
    overflow: hidden;
}
section{
    margin-top: 70px;
}
ul{
    padding: 0;
}
li{
    list-style: none;
}
a{
    text-decoration: none;
    display: block;
}
img{
    max-width: 100%;
}
span{
    display: block;
}
input , textarea , select{
    height: 100%;
    outline: none;
    padding: 5px 15px;
    color: #24141b;
    font-family: var(--text-font);
    font-size: 17px;
}
/* css to the loader */
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999999;
    background-color: var(--main-color);
    width: 100%;
    height: 100%;
}
#loader {
    width: 55px;
    aspect-ratio: 1;
    --g1:conic-gradient(from  90deg at 3px  3px ,var(--main2-color) 90deg,var(--main2-color) 0);
    --g2:conic-gradient(from -90deg at 22px 22px,var(--main2-color) 90deg,var(--main2-color) 0);
    background:var(--g1),var(--g1),var(--g1), var(--g2),var(--g2),var(--g2);
    background-size: 25px 25px;
    background-repeat: no-repeat;
    animation: l7 1.5s infinite;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50% , -50%);
    -webkit-transform: translate(-50% , -50%);
    -moz-transform: translate(-50% , -50%);
    -ms-transform: translate(-50% , -50%);
    -o-transform: translate(-50% , -50%);
}
  @keyframes l7 {
    0%   {background-position:0    0   ,0 100%,100% 100% }
    25%  {background-position:100% 0   ,0 100%,100% 100% }
    50%  {background-position:100% 0   ,0 0   ,100% 100% }
    75%  {background-position:100% 0   ,0 0   ,0    100% }
    100% {background-position:100% 100%,0 0   ,0    100% }
}
/* start css to the scrollbar */
::-webkit-scrollbar{
    width: 5px;
    background-color: var(--main-color);
}
::-webkit-scrollbar-thumb{
    background-color: var(--main2-color);
    height: 50px;
}
/* start css to the header */
header{
    overflow: hidden;
    position: relative;
}
nav{
    display: flex;
    width: 100%;
    height: auto;
    padding: 12px 20px;
    align-items: center;
    background-color: transparent;
    justify-content: space-around;
    text-align: center;
}
nav.nav-slider{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
}
nav .logo img{
    width: 100px;
    height: 100px;
}
nav .menu{
    margin-top: 15px;
}
nav .menu ul li{
    display: inline-block;
    font-size: 18px;
    text-transform: capitalize;
    margin: 0px 10px;
    font-family: var(--text-font);
    font-weight: 700;
    position: relative;
}
nav .menu ul li a{
    color: #fff;
}
nav .menu ul li::before{
    position: absolute;
    content: "";
    background-color: var(--main2-color);
    left: 0;
    bottom: -8px;
    width: 0;
    height: 3px;
    border-radius: 20%;
    -webkit-border-radius: 20%;
    -moz-border-radius: 20%;
    -ms-border-radius: 20%;
    -o-border-radius: 20%;
}
nav .menu ul li:hover::before{
    width: 100%;
    transition: .3s ease-in-out;
    -webkit-transition: .3s ease-in-out;
    -moz-transition: .3s ease-in-out;
    -ms-transition: .3s ease-in-out;
    -o-transition: .3s ease-in-out;
}
nav .menu ul li.active a{
    color: var(--main2-color);
}
nav .menu ul li.active::before{
    width: 100%;
}
nav .nav-icons{
    display: flex;
    align-items: center;
    justify-content: space-around;
}
nav .nav-icons div{
    margin: 0px 5px;
}
nav .nav-icons .search{
    background-color: var(--main2-color);
    border: 1px solid var(--main2-color);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    line-height: 40px;
    text-align: center;
    cursor: pointer;
}
nav .nav-icons .search i{
    color: var(--main-color);
    font-weight: bold;
}
nav .nav-icons .lang img{
    width: 50px;
    height: 50px;
}
nav .nav-icons .mobile-icon i{
    color: #fff;
    font-size: 30px;
}
nav .nav-icons .mobile-icon{
    display: none;
    cursor: pointer;
}
@media only screen and (max-width : 992px){
    nav .nav-icons .mobile-icon{
        display: block;
    }
    nav{
        justify-content: space-between;
    }
    nav .menu ,
    nav .nav-icons .lang ,
    header .header-text {
        display: none;
    }
}
nav.show{
    background-color: #000;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99999;
    transition: .5s linear all;
    -webkit-transition: .5s linear all;
    -moz-transition: .5s linear all;
    -ms-transition: .5s linear all;
    -o-transition: .5s linear all;
    border-bottom: 1px solid #919090;
}
/* start css to the search-modal */
.search-modal{
    background-color: rgba(0, 0, 0, 0.9);
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99999;
    overflow: hidden;
    transform: translateY(-100%);
    -webkit-transform: translateY(-100%);
    -moz-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    -o-transform: translateY(-100%);
    transition: 1s ease-in-out;
    -webkit-transition: 1s ease-in-out;
    -moz-transition: 1s ease-in-out;
    -ms-transition: 1s ease-in-out;
    -o-transition: 1s ease-in-out;
}
.search-modal form{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50% , -50%);
    -webkit-transform: translate(-50% , -50%);
    -moz-transform: translate(-50% , -50%);
    -ms-transform: translate(-50% , -50%);
    -o-transform: translate(-50% , -50%);
    display: flex;
    align-items: center;
    width: 560px;
    height: 65px;
    background-color: #fff;
    border: 1px solid #fff;
    border-radius: 12px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    -ms-border-radius: 12px;
    -o-border-radius: 12px;
    overflow: hidden;
}
.search-modal form input{
    border: none;
    width: 85%;
}
.search-modal form button{
    background-color: var(--main2-color);
    border: 1px solid var(--main2-color);
    color: var(--main-color);
    width: 15%;
    height: 100%;
    position: relative;
    z-index: 99;
}
.search-modal form button::before{
    position: absolute;
    content: "";
    top: -5%;
    left: 0;
    width: 100%;
    height: 0%;
    background-color: var(--main2-color);
    border: 1px solid var(--main2-color);
}
.search-modal form button:hover::before{
    height: 110%;
    transition: .6s ease-in-out;
    -webkit-transition: .6s ease-in-out;
    -moz-transition: .6s ease-in-out;
    -ms-transition: .6s ease-in-out;
    -o-transition: .6s ease-in-out;
    z-index: -1;
}
.search-modal .close-search{
    background-color: var(--main2-color);
    border: 1px solid var(--main2-color);
    color: var(--main-color);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    text-align: center;
    line-height: 50px;
    cursor: pointer;
    position: absolute;
    left: 47%;
    top: 5%;
    transform: translateY(-100px);
    -webkit-transform: translateY(-100px);
    -moz-transform: translateY(-100px);
    -ms-transform: translateY(-100px);
    -o-transform: translateY(-100px);
}
.search-modal:hover .close-search{
    transform: translateY(0);
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transition: 1s ease-in-out;
    -webkit-transition: 1s ease-in-out;
    -moz-transition: 1s ease-in-out;
    -ms-transition: 1s ease-in-out;
    -o-transition: 1s ease-in-out;
}
@media only screen and (max-width : 768px){
    .search-modal form{
        width: 80%;
        max-width: 100%;
    }
}
/* start css to the mobile-nav */
.mobile-nav{
    background-color: var(--main-color);
    width: 300px;
    height: 100%;
    position: fixed;
    top: 0;
    left: -100%;
    text-align: left;
    overflow-y: scroll;
    z-index: 9999999;
    padding: 10px 20px;
    transition: 1s ease-in-out;
    -webkit-transition: 1s ease-in-out;
    -moz-transition: 1s ease-in-out;
    -ms-transition: 1s ease-in-out;
    -o-transition: 1s ease-in-out;
}
.mobile-nav .close-nav{
    width: 40px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    background-color: var(--main2-color);
    border: 1px solid var(--main2-color);
    position: absolute;
    top: 2%;
    right: 2%;
    color: #000;
    cursor: pointer;
}
.mobile-nav .mobile-logo{
    padding: 10px 0px;
}
.mobile-nav .mobile-logo img{
    width: 70px;
    height: 70px;
}
.mobile-nav .mobile-menu{
    margin: 20px 0px;
}
.mobile-nav .mobile-menu ul li{
    width: 100%;
    height: 40px;
    line-height: 40px;
    border-bottom: 1px dashed #ddd;
    font-size: 17px;
    font-family: var(--text-font);
    text-transform: capitalize;
    margin: 10px 0px;
}
.mobile-nav .mobile-menu ul li a{
    color: #fff;
}
.mobile-nav .mobile-menu ul li:hover a{
    color: var(--main2-color);
}
/* start css to the carousel */
.carousel{
   z-index: 2;
}
.carousel .carousel-item{
    position: relative;
}
.carousel .carousel-item .overlay{
    position: absolute;
    background-color: rgba(8, 8, 9, 0.6);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    text-align: center;
}
.carousel .carousel-item .overlay .text{
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50% , -40%);
    -webkit-transform: translate(-50% , -40%);
    -moz-transform: translate(-50% , -40%);
    -ms-transform: translate(-50% , -40%);
    -o-transform: translate(-50% , -40%);
    animation: showtext 1s ease-in;
    -webkit-animation: showtext 1s ease-in;
}
.carousel .carousel-item .overlay .text span{
    color: var(--main2-color);
    font-size: 22px;
    font-family: var(--note-text);
    display: block;
    margin: 15px 0px;
    line-height: 28px;
    font-weight: 600;
    margin: 15px 0px;
}
.carousel .carousel-item .overlay .text h2{
    color: #fff;
    font-size: 45px;
    font-family: var(--heading-font);
    font-weight: 700;
    line-height: 70px;
    text-transform: capitalize;
}
.carousel .carousel-item .overlay .text button{
    width: 150px;
    height: 45px;
    margin: 10px;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
    text-transform: capitalize;
}
.carousel .carousel-item .overlay .text button:first-of-type , 
.carousel .carousel-item .overlay .text button:last-of-type:hover{
    background-color: var(--main-color);
    border: 1px solid var(--main-color);
}
.carousel .carousel-item .overlay .text button:first-of-type:hover{
    background-color: transparent;
}
.carousel .carousel-item .overlay .text button:last-of-type{
    background-color: transparent;
    border: 1px solid var(--main2-color);
}
.carousel .carousel-item .overlay .text button a{
    font-weight: 600;
    font-size: 17px;
    color: #fff;
}
@keyframes showtext{
    0%{
        transform: translate(-50% , -100%) scale(.8);
        -webkit-transform: translate(-50% , -100%) scale(.8);
        -moz-transform: translate(-50% , -100%) scale(.8);
        -ms-transform: translate(-50% , -100%) scale(.8);
        -o-transform: translate(-50% , -100%) scale(.8);
        opacity: 0;
}
    100%{
        transform: translate(-50% , -50%) scale(1);
        -webkit-transform: translate(-50% , -50%) scale(1);
        -moz-transform: translate(-50% , -50%) scale(1);
        -ms-transform: translate(-50% , -50%) scale(1);
        -o-transform: translate(-50% , -50%) scale(1);
}
}
.carousel-control-next, .carousel-control-prev {
    width: 45px;
    height: 45px;
    text-align: center;
    line-height: 45px;
    opacity: 1;
    background-color: var(--main-color);
    border: 1px solid var(--main-color);
    top: 60%;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}
.carousel-control-prev{
    left: 3%;
}
.carousel-control-next{
    right: 3%;
}
.carousel-control-prev-icon , 
.carousel-control-next-icon{
    width: 15px;
}
@media only screen and (max-width : 992px){
    .carousel .carousel-item .overlay .text span{
        font-size: 15px;
        margin-top: 5px;
    }
    .carousel .carousel-item .overlay .text h2 {
        font-size: 30px;
        line-height: 50px;
    }
}
@media only screen and (max-width : 768px){
    .carousel .carousel-item .overlay .text  , 
    .carousel-control-next, .carousel-control-prev  {
        display: none;
    }
}
/* start css to the about section */
.about span.years{
    color: var(--main2-color);
    font-family: var(--note-text);
    font-size: 15px;
    font-weight: 600;
    margin-top: 25px;
}
.about h2{
    font-size: 42px;
    font-family: var(--heading-font);
    margin-top: 25px;
    line-height: 65px;
    color: #fff;
    font-weight: 700;
    word-wrap: break-word;
}
.about p{
    color: #f9f9f9;
    font-size: 16px;
    line-height: 26px;
    margin-top: 20px;
    letter-spacing: .2px;
    font-family: var(--text-font);
}
.about button , 
.products button.last-btn , 
.our-offers button.last-btn , 
.product-details button{
    background-color: var(--main2-color);
    border: 1px solid var(--main2-color);
    width: 220px;
    height: 55px;
    border-radius: 30px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    -ms-border-radius: 30px;
    -o-border-radius: 30px;
    margin-top: 30px;
}
.about button a , 
.products button.last-btn a , 
.our-offers button.last-btn a , 
.product-details button a{
    display: flex;
    justify-content: space-around;
    color: var(--main-color);
    text-transform: capitalize;
    font-size: 15px;
    font-weight: 500;
    line-height: 50px;
}
.about button a .icon , 
.products button.last-btn a .icon , 
.our-offers button.last-btn a .icon ,
.product-details button a .icon{
    width: 40px;
    height: 40px;
    background-color: var(--main-color);
    border: 1px solid var(--main-color);
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    text-align: center;
    line-height: 40px;
    margin-top: 5px;
    color: var(--main2-color);
}
.about button:hover , 
.products button.last-btn:hover , 
.our-offers button.last-btn:hover , 
.product-details button:hover{
   background-color: transparent;
   border: 1px solid var(--main2-color);
}
.about button:hover a , 
.about button:hover a , 
.products button.last-btn:hover a , 
.our-offers button.last-btn:hover a , 
.product-details button:hover a{
    color: var(--main2-color);
}
.about button:hover .icon , 
.products button.last-btn:hover .icon , 
.our-offers button.last-btn:hover .icon , 
.product-details button:hover .icon{
    animation: iconshake .5s ease-in-out alternate infinite;
    -webkit-animation: iconshake .5s ease-in-out alternate infinite;
}
.about .about-img , 
.contact .contact-img{
    height: 350px;
    width: 100%;
    margin-top: 25px;
    overflow: hidden;
}
.about .about-img img , 
.contact .contact-img img{
    width: 100%;
    height: 100%;
    border-radius: 12px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    -ms-border-radius: 12px;
    -o-border-radius: 12px;
}
.about .about-box , 
.contact .info{
    background-color: var(--main2-color);
    border: 1px solid var(--main2-color);
    margin-top: 25px;
}
.about .about-box ,
.about .about-adv , 
.about .about-box .about-text , 
.about .about-adv .adv-box , 
.contact .info , 
.contact .info .info-box{
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
    padding: 20px;
}
.about .about-box .about-text , 
.about .about-adv .adv-box , 
.contact .info .info-box{
    border: 1px dashed var(--main-color);
}
.about .about-box .about-text .about-text-header , 
.about .about-adv .adv-item{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.about .about-box .about-text .about-text-header span{
    color: var(--main-color);
    font-size: 15px;
    font-family: var(--text-font);
    font-weight: 600;
}
.about .about-box .about-text .about-text-header h2{
    color: var(--main-color);
    margin-top: 10px;
}
.about .about-box .about-text .about-text-header .icon{
    width: 50px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    border-radius: 50px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    -ms-border-radius: 50px;
    -o-border-radius: 50px;
    background-color: var(--alt-color);
    border: 1px solid var(--alt-color);
    color: var(--main2-color);
    font-size: 25px;
}
.about .about-box .about-text p{
    color: #212121;
    font-size: 16px;
    margin-top: 10px;
}
.about .about-adv{
    background-color: var(--alt-color);
    border: 1px solid var(--alt-color);
    margin-top: 35px;
}
.about .about-adv ul{
    margin-top: 20px;
}
.about .about-adv ul li{
    margin-top: 15px;
    font-size: 15px;
    font-family: var(--text-font);
    color: #fff;
    text-transform: capitalize;
}
.about .about-adv ul li i{
    color: var(--main2-color);
    margin-right: 8px;
    font-size: 22px;
}
.about .about-adv span{
    border: 1px dashed #fff;
    margin: 20px 0px;
}
.about .about-adv .adv-item {
    margin-top: 30px;
}
.about .about-adv .adv-item .icon{
    width: 16%;
    height: 50px;
    line-height: 50px;
    text-align: center;
    background-color: var(--main2-color);
    border: 1px solid var(--main2-color);
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    margin-right: 10px;
    color: var(--main-color);
    font-size: 22px;
}
.about .about-adv .adv-item h4{
    color: #fff;
    text-transform: capitalize;
    font-family: var(--heading-font);
    font-size: 17px;
    line-height: 30px;
}
.about .about-adv .adv-box a{
    color: #fff;
    font-size: 17px;
    text-transform: capitalize;
    margin-top: 50px;
}
@media only screen and (max-width : 768px){
    .about h2{
        font-size: 30px;
        line-height: 50px;
    }
}
@media only screen and (max-width : 992px){
    .about .about-adv .adv-item {
        justify-content: start;
    }
}
/* start css to the category section */
.category{
    text-align: center;
    position: relative;
    background-color: #141414;
}
.category .divider{
    position: absolute;
    top: 0%;
    left: 0;
    width: 100%;
    height: auto;
}
.category h2 , 
.products h2 , 
.why-us h2 ,
.related-products h2 , 
.factory h2 ,
.covering h2{
    color: #fff;
    font-size: 45px;
    line-height: 55px;
    margin-top: 25px;
    text-transform: capitalize;
    font-weight: 700;
    font-family: var(--heading-font);
}
.category .row , 
.products .row{
    margin: 25px 0px;
}
.category p , 
.products p , 
.why-us p ,
.factory p ,
.covering p{
    color: #f6f6f6;
    font-size: 16px;
    line-height: 26px;
    margin: 25px 0px;
    text-transform: capitalize;
    font-family: var(--text-font);
}
.category .img-sec , 
.products .img-sec , 
.why-us .img-sec ,
.factory .img-sec ,
.covering .img-sec{
    width: 250px;
}
.category .category-box , 
.products .box , 
.our-offers .box ,
.shop .box , 
.related-products .box , 
.factory .fac-box ,
.covering .covering-box{
    width: 100%;
    height: auto;
    max-width: 100%;
    text-align: center;
    overflow: hidden;
    margin-top: 40px;
    background-color: #fff;
    border: 1px solid #252525;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
    position: relative;
}
.category .category-box .img , 
.products .box .img-box , 
.our-offers .offers .box .img-box , 
.shop .box .img-box , 
.related-products .box .img-box ,
.factory .fac-box .fac-img ,
.covering .cover-img{
    overflow: hidden;
}
.category .category-box .img img , 
.products .box .img-box img , 
.our-offers .offers .box .img-box img , 
.shop .box .img-box img , 
.related-products .box .img-box img , 
.factory .fac-box .fac-img img ,
.covering .cover-img img{
    width: 100%;
    height: auto;
    /* border-radius: 12px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    -ms-border-radius: 12px;
    -o-border-radius: 12px; */
}
.category .category-box .category-title{
    background-color: var(--main-color);
    border: 1px solid var(--main-color);
    width: 90%;
    height: auto;
    padding: 15px 10px;
    text-align: center;
    margin: auto;
    border-radius: 12px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    -ms-border-radius: 12px;
    -o-border-radius: 12px;
    position: absolute;
    bottom: 5%;
    left: 5%;
}
.category .category-box .category-title h3{
    font-size: 23px;
    color: var(--main2-color);
    text-transform: capitalize;
    font-family: var(--heading-font);
    letter-spacing: 1px;
}
.category .category-box .category-text{
    background-color: #fff;
    width: 85%;
    height: 90%;
    position: absolute;
    top: 0;
    left: 8%;
    margin: 20px auto;
    padding: 20px;
    border-radius: 12px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    -ms-border-radius: 12px;
    -o-border-radius: 12px;
    transform: translateY(-150%);
    -webkit-transform: translateY(-150%);
    -moz-transform: translateY(-150%);
    -ms-transform: translateY(-150%);
    -o-transform: translateY(-150%);
    overflow: hidden;
}
.category .category-box .category-text .icon{
    width: 60px;
    height: 60px;
    margin: 30px auto;
}
.category .category-box .category-text h3{
    color: #141414;
    font-size: 22px;
    font-family: var(--heading-font);
    text-transform: capitalize;
}
.category .category-box .category-text span{
    width: 100px;
    height: 3px;
    background-color: var(--main2-color);
    text-align: center;
    margin: 10px auto;
}
.category .category-box .category-text p{
    color: #212121;
    font-family: var(--text-font);
    font-size: 15px;
    line-height: 28px;
}
.category .category-box .category-text button{
    width: 120px;
    height: 45px;
    background-color: var(--main-color);
    border: 1px solid var(--main-color);
    text-align: center;
    margin: 15px auto;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
}
.category .category-box .category-text button a{
    color: #fff;
    text-transform: capitalize;
}
.category .category-box .category-text button:hover {
    background-color: var(--main2-color);
    border: 1px solid var(--main2-color);
    transition: .5s ease-in-out;
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -ms-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
}
.category .category-box .category-text button:hover a{
    color: var(--main-color);
}
.category .category-box:hover img{
    transform: scale(1.2);
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    transition: 1s ease-in-out;
    -webkit-transition: 1s ease-in-out;
    -moz-transition: 1s ease-in-out;
    -ms-transition: 1s ease-in-out;
    -o-transition: 1s ease-in-out;
}
.category .category-box:hover .category-title{
    transform: translateY(180%);
    -webkit-transform: translateY(180%);
    -moz-transform: translateY(180%);
    -ms-transform: translateY(180%);
    -o-transform: translateY(180%);
    transition: .3s ease-in-out;
    -webkit-transition: .3s ease-in-out;
    -moz-transition: .3s ease-in-out;
    -ms-transition: .3s ease-in-out;
    -o-transition: .3s ease-in-out;
}
.category .category-box:hover .category-text{
    transform: translateY(0);
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transition: .7s ease-in-out;
    -webkit-transition: .7s ease-in-out;
    -moz-transition: .7s ease-in-out;
    -ms-transition: .7s ease-in-out;
    -o-transition: .7s ease-in-out;
}
@media only screen and (max-width : 768px){
    .category .category-box .category-text p{
        display: none;
    }
}
/* start css to the certificate section */
.certificates{
    background-color: var(--main2-color);
    overflow: hidden;
    padding: 10px 0px;
    white-space: nowrap;
    position: relative;
    margin-top: 0px;
}
.certificates::before{
    position: absolute;
    content: "";
    width: 200px;
    height: 100%;
    top: 0;
    left: 0;
    background: linear-gradient(to left , rgba(8, 32, 125, 0) , var(--main-color));
    z-index: 2;
}
.certificates .certi-boxes {
    display: inline-block;
    animation: slidecerti 25s infinite;
    -webkit-animation: slidecerti 25s infinite;
}
.certificates .certi-boxes .box{
    background-color: #fff;
    border: 1px solid #fff;
    width: 150px;
    height: auto;
    display: inline-block;
    padding: 10px;
    margin: 0px 25px;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
}
.certificates .certi-boxes .box span{
    display: block;
    text-align: center;
    color: var(--main-color);
    font-weight: 600;
    font-family: var(--note-text);
}
.certificates:hover .certi-boxes{
    animation-play-state:paused ;
}
@keyframes slidecerti{
    0%{
        transform: translateX(0%);
        -webkit-transform: translateX(0%);
        -moz-transform: translateX(0%);
        -ms-transform: translateX(0%);
        -o-transform: translateX(0%);
}
100%{
    transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
    -moz-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    -o-transform: translateX(-100%);
}
}
/* start css to the products */
.products{
    text-align: center;
    position: relative;
}
.products .box , 
.our-offers .offers .box , 
.shop .box , 
.related-products .box , 
.covering .covering-box ,
.factory .fac-box{
    box-shadow: 0px 10px 30px 0px rgba(255, 255, 255, 0.1);
}
.products .box ,
.products .box .img-box , 
.our-offers .box ,
.our-offers .offers .box .img-box , 
.shop .box .img-box , 
.related-products .box .img-box{
    position: relative;
}
.products .box .img-box button , 
.our-offers .offers .box button , 
.shop .box button , 
.related-products .box button{ 
    background-color: var(--main-color);
    border: 1px solid var(--main-color);
    width: 130px;
    height: 42px;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
    position: absolute;
    bottom: -20%;
    left: 50%;
    transform: translate(-50% , 50%);
    -webkit-transform: translate(-50% , 50%);
    -moz-transform: translate(-50% , 50%);
    -ms-transform: translate(-50% , 50%);
    -o-transform: translate(-50% , 50%);
}
.products .box .img-box button a , 
.our-offers .offers .box .img-box button a , 
.shop .box .img-box button a , 
.related-products .box .img-box button a{
    text-transform: capitalize;
    color: #fff;
}
.products .box:hover .img-box button , 
.our-offers .offers .box:hover .img-box button , 
.shop .box:hover .img-box button ,
.related-products .box:hover .img-box button{
    bottom: 8%;
    transition: .5s ease-in-out;
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -ms-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
}
.products .box:hover .img-box button:hover , 
.our-offers .offers .box:hover .img-box button:hover , 
.shop .box:hover .img-box button:hover , 
.related-products .box:hover .img-box button:hover{
    background-color: var(--main2-color);
    border: 1px solid var(--main2-color);
    transition: .5s ease-in-out;
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -ms-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
}
.products .box:hover .img-box button:hover a, 
.our-offers .offers .box:hover .img-box button:hover a, 
.shop .box:hover .img-box button:hover a, 
.related-products .box:hover .img-box button:hover a{
    color: #212121;
}
.products .box .text-box , 
.our-offers .offers .box .text-box , 
.shop .box .text-box , 
.related-products .box .text-box , 
.covering .covering-box .cover-title , 
.factory .fac-box .fac-text{
    padding: 25px 10px;
}
.products .box .text-box a , 
.our-offers .offers .box .text-box a , 
.shop .box .text-box a , 
.related-products .text-box a , 
.covering .covering-box .cover-title h3 , 
.factory .fac-box .fac-text h4{
    color: #212121;
    font-size: 18px;
    font-family: var(--heading-font);
    font-weight: 500;
    text-transform: capitalize;
}
.products .box .text-box a:hover ,
.our-offers .offers .box .text-box a:hover , 
.shop .box .text-box a:hover , 
.related-products .box .text-box a:hover{
    color: var(--main2-color);
    transition: .1s ease-in-out;
    -webkit-transition: .1s ease-in-out;
    -moz-transition: .1s ease-in-out;
    -ms-transition: .1s ease-in-out;
    -o-transition: .1s ease-in-out;
}
.products .box .text-box span:not(.text-box span.offer) , 
.our-offers .offers .box .text-box span:not(.text-box span.offer) , 
.related-products .offers .box .text-box span:not(.text-box span.offer){
    color: #919090; 
    font-size: 13px;
    font-family: var(--note-text);
    margin-top: 10px;
}
.products .box:hover img , 
.our-offers .box:hover img ,
.shop .box:hover img , 
.related-products .box:hover img{
    transform: scale(1.2);
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    transition: .5s ease-in-out;
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -ms-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
}
.products .box span.offer ,
.our-offers .box span.offer , 
.shop .box span.offer ,
.related-products .box span.offer{
    position: absolute;
    top: 3%;
    left: 3%;
    z-index: 999;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    background-color: var(--main2-color);
    border: 1px solid var(--main2-color);
    color: #212121;
    text-transform: capitalize;
    font-size: 14px;
    line-height: 50px;
    transform: translateY(-100px);
    -webkit-transform: translateY(-100px);
    -moz-transform: translateY(-100px);
    -ms-transform: translateY(-100px);
    -o-transform: translateY(-100px);
}
.products .box:hover span.offer , 
.our-offers .box:hover span.offer , 
.shop .box:hover span.offer , 
.related-products .box:hover span.offer{
    transform: translateY(0);
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transition: .5s ease-in-out;
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -ms-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
}
.box #one , 
.box #two , 
.box #three , 
.box #four {
    position: absolute;
    background-color: var(--main2-color);
    width: 0;
    height: 0;
}
.box #one{
    top: 0;
    right: 0;
}
.box #two{
    top: 0;
    left: 0;
}
.box #three{
    left: 0px;
    bottom: 0px;
} 
.box #four{
    right: 0px;
    bottom: 0px;
}
.box:hover #one , 
.box:hover #three{
    width: 100%;
    transition: .5s;
    height: 5px;
}
.box:hover #two , 
.box:hover #four{
    height: 100%;
    transition: .5s;
    width: 5px;
}
.products button.last-btn{
    display: block;
    margin: 25px auto;
    height: 50px;
    width: 220px;
}
.products button.last-btn a{
    font-size: 18px;
    letter-spacing: .2px;
}
.products .feature{
    top: 5%;
    left: 3%;
}
.products .zaitoun{
    bottom: 3%;
    right: 8%;
    width: 100px;
    height: 100px;
}
.products .feature , 
.products .zaitoun , 
.contact img.faq , 
.product-details img.zaitoun{
    position: absolute;
    animation: move 3s ease-in-out infinite alternate;
    -webkit-animation: move 3s ease-in-out infinite alternate;
}
@keyframes move{
    100%{
        transform: translateY(-50px);
        -webkit-transform: translateY(-50px);
        -moz-transform: translateY(-50px);
        -ms-transform: translateY(-50px);
        -o-transform: translateY(-50px);
}
}
@media only screen and (max-width : 768px){
    .products .feature{
        width: 100px;
        height: 100px;
    }
    .products .zaitoun , 
    .product-details .zaitoun{
        display: none;
    }
}
/* start css to the our-offers section */
.our-offers {
    background-color: #141414;
    padding: 90px 0px;
}
.our-offers span.offer-banner{
    color: var(--main2-color);
    font-family: var(--note-text);
    font-weight: 500;
    font-size: 20px;
    margin-top: 20px;
}
.our-offers h2{
    color: #fff;
    font-size: 35px;
    font-weight: 700;
    font-family: var(--heading-text);
    line-height: 60px;
    text-transform: capitalize;
    margin-top: 25px;
}
.our-offers p{
    color: #919090;
    font-size: 16px;
    font-family: var(--text-font);
    line-height: 26px;
    margin-top: 20px;
}
.our-offers .box{
    box-shadow: none !important;
    border: 1px solid #ccc;
}
.slick-slide {
    margin:10px;
}
.slick-prev {
    left: 89%;
}
.slick-prev, .slick-next {
    width: 50px;
    height: 50px;
    background-color: transparent;
    border: 2px solid var(--main2-color);
    top: 110%;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    z-index: 9;
}
.slick-next{
    right: 0%;
}
.slick-prev::before , .slick-next::before{
    color: var(--main2-color);
    font-weight: bold;
}
@media only screen and (max-width : 992px){
    .slick-prev {
        left: 84%;
    }
}
@media only screen and (max-width : 768px){
    .slick-prev {
        left: 70%;
    }
}
/* start css to the scroll */
.scroll{
    background-color: var(--main2-color);
    border: 1px solid var(--main2-color);
    text-align: center;
    width: 50px;
    height: 50px;
    line-height: 50px;
    color: var(--main-color);
    cursor: pointer;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    font-size: 26px;
    position: fixed;
    right: 1.5%;
    bottom: 2%;
    z-index: 999;
    transform: translateY(-1500px);
    -webkit-transform: translateY(-1500px);
    -moz-transform: translateY(-1500px);
    -ms-transform: translateY(-1500px);
    -o-transform: translateY(-1500px);
    transition: 1s ease-in-out;
    -webkit-transition: 1s ease-in-out;
    -moz-transition: 1s ease-in-out;
    -ms-transition: 1s ease-in-out;
    -o-transition: 1s ease-in-out;
}
.scroll:hover{
    background-color: var(--main-color);
    border: 1px solid #fff;
    color: var(--main2-color);
    transition: .5s ease-in-out;
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -ms-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    z-index: 999;
}
/* ========================================================== about us page */
/* start css to the banner section */
.banner{
    margin-top: 0;
    padding: 0;
    background:url("../img/slide1.jpg") center/cover no-repeat fixed;
}
.banner .overlay{
    background-color: rgba(8, 8, 9, 0.6);
    position: relative;
    padding-top: 50px;
}
.banner .overlay span{
    color: var(--main2-color);
    font-size: 17px;
    font-weight: 700;
    font-family: var(--note-text);
    margin-top: 25px;
}
.banner .overlay h2{
    color: #fff;
    font-size: 70px;
    font-family: var(--note-text);
    line-height: 96px;
    font-weight: 400;
    margin-top: 25px;
    text-transform: capitalize;
}
.banner .overlay img:not(img.shape){
    margin-top: 15px;
    width: 200px;
}
.banner .overlay li{
    display: flex;
    font-size: 18px;
    font-family: var(--note-text);
    align-items: center;
    font-weight: 500;
    margin: 50px 0px;
    text-transform: capitalize;
}
.banner .overlay li a{
    color: #fff;
}
.banner .overlay li i{
    margin: 0px 20px;
    color: #fff;
}
.banner img.shap{
    position: absolute;
    left: 0;
    bottom: -5%;
    width: 100%;
    height: 70px;
}
@media only screen and (max-width : 992px){
    .banner .overlay span{
        font-size: 13px;
        margin-top : 10px
    }
    .banner .overlay h2{
        font-size: 30px;
        margin-top : 10px;
        line-height: 40px;
    }
    .banner .overlay img:not(img.shape){
        margin-top: 5px;
    }
    .banner .overlay li{
        font-size: 14px;
        margin-top : 30px
    }
}
/* start css to the why-us section */
.why-us{
    margin-bottom: 70px;
    text-align: center;
}
.why-us .why-us-box{
    margin-top: 60px;
    background-image: -webkit-linear-gradient(rgba(255, 255, 0, 0.2), rgba(0, 0, 0, 0.2));
    background-image: -o-linear-gradient(rgba(255, 255, 0, 0.2), rgba(0, 0, 0, 0.2));
    background-image: linear-gradient(rgba(255, 255, 0, 0.2), rgba(0, 0, 0, 0.2));
    border-radius: 20px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 0, 0.1);
}
.why-us .why-us-box ,
.why-us .why-us-box .inner-box{
    padding: 25px;
    text-align: center;
    border-radius: 12px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    -ms-border-radius: 12px;
    -o-border-radius: 12px;
}
.why-us .why-us-box .inner-box{
    border: 1px dashed #ccc;
}
.why-us .why-us-box .inner-box .why-item{
    padding: 10px;
    margin-top: 10px;
    color: #fff;
    border-left: 1px dashed #ccc;
}
.why-us .why-us-box .inner-box .col-lg-4:first-child .why-item{
    border-left: none;
}
.why-us .why-us-box .inner-box .why-item .icon{
    width: 90px;
    height: 90px;
    margin: 10px auto;
    background-color: var(--main2-color);
    border: 1px solid var(--main2-color);
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    line-height: 90px;
}
.why-us .why-us-box .inner-box img{
    width: 50px;
    height: 50px;
}
.why-us .why-us-box .inner-box h3{
    color: #fff;
    font-family: var(--note-text);
    font-size: 20px;
    font-weight: 600;
    margin: 25px 0px;
    text-transform: capitalize;
}
.why-us .why-us-box .inner-box p{
    color: #f6f6f6;
    font-size: 16px;
    line-height: 27px;
    font-family: var(--text-font);
}
@media only screen and (max-width : 992px){
    .why-us .why-us-box .inner-box .why-item{
        border-left: none;
    }
}
/* ============================================== shop page ============*/
.shop .side-shop , 
.shop .popular{
    background-color: #fff;
    border: 1px solid #777;
    margin-top: 25px;
    border-radius: 12px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    -ms-border-radius: 12px;
    -o-border-radius: 12px;
    overflow: hidden;
}
.shop .side-shop .side-shop-title , 
.shop .popular .popular-text{
    background-color: #f8f82d;
    border: 1px solid #f8f82d;
    color: #212121;
    height: auto;
    padding: 15px 20px;
    border-radius: 12px 12px 0px 0px;
    -webkit-border-radius: 12px 12px 0px 0px;
    -moz-border-radius: 12px 12px 0px 0px;
    -ms-border-radius: 12px 12px 0px 0px;
    -o-border-radius: 12px 12px 0px 0px;
}
.shop .side-shop .side-shop-title h2 , 
.shop .popular .popular-text h2{
    font-size: 20px;
    font-family: var(--heading-font);
    font-weight: 600;
    margin-top: 10px;
    text-transform: capitalize;
}
.shop .side-shop ul{
    padding: 25px 20px;
}
.shop .side-shop ul li{
    font-size: 18px;
    width: 100%;
    height: 45px;
    line-height: 45px;
    text-transform: capitalize;
    border-bottom: 1px solid #ccc;
    font-family: var(--heading-text);
    font-weight: 600;
    margin: 15px 0px;
    overflow: hidden;
    padding-bottom: 10px;
}
.shop .side-shop ul li a{
    color: #212121;
    display: flex;
    align-items: center;
    transform: translateX(-19px);
    -webkit-transform: translateX(-19px);
    -moz-transform: translateX(-19px);
    -ms-transform: translateX(-19px);
    -o-transform: translateX(-19px);
}
.shop .side-shop ul li a i{
    font-size: 25px;
    font-weight: 600;
    margin-top: 2px;
}
.shop .side-shop ul li a span{
    display: inline-block;
}
.shop .side-shop ul li:hover a{
    color: var(--main-color);
    transform: translateX(0);
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transition: .2s ease-in-out;
    -webkit-transition: .2s ease-in-out;
    -moz-transition: .2s ease-in-out;
    -ms-transition: .2s ease-in-out;
    -o-transition: .2s ease-in-out;
}
.shop .side-shop ul li:hover a i{
    color: var(--main2-color);
}
.shop .popular .popular-items{
    padding: 7px;
}
.shop .popular .popular-item{
    display: flex;
    margin: 5px 0px;
    padding: 10px;
    align-items: center;
    border-bottom: 1px solid #ccc;
}
.shop .popular .popular-item:last-child{
    border-bottom: none;
}
.shop .popular .popular-item .img{
    width: 25%;
    height: 80px;
    border-radius: 12px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    -ms-border-radius: 12px;
    -o-border-radius: 12px;
    margin-right: 10px;
    overflow: hidden;
}
.shop .popular .popular-item .img img{
    border-radius: 12px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    -ms-border-radius: 12px;
    -o-border-radius: 12px;
}
.shop .popular .popular-item .text{
    width: 75%;
}
.shop .popular .popular-item a{
    color: #212121;
    font-size: 17px;
    font-weight: 600;
    text-transform: capitalize;
} 
.shop .popular .popular-item a:hover{
    color: var(--main-color);
}
.shop .col-lg-8 h3{
    font-size: 17px;
    font-weight: 500;
    font-family: var(--heading-font);
    margin-top: 25px;
    text-transform: capitalize;
    color: var(--main2-color);
}
.shop select{
    width: 100%;
    height: 60px;
    font-size: 16px;
    text-transform: capitalize;
    font-family: var(--text-font);
    color: #212121;
    border-radius: 30px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    -ms-border-radius: 30px;
    -o-border-radius: 30px;
    margin-top: 10px;
    background-color: #f6f6f6;
    border: 1px solid #f6f6f6;
    cursor: pointer;
}
.shop select option{
    height: 40px;
}
.shop select:hover{
    color: var(--main2-color);
    background-color: transparent;
    border: 1px solid var(--main2-color);
}
.shop select:hover option{
    color: #212121;
}
.shop .box .text-box li , 
.shop .popular .popular-item li , 
.product-details li , 
.related-products .box li{
    display: inline-flex;
    font-size: 17px;
    font-weight: 600;
    align-items: center;
    height: auto;
    padding: 5px 0px;
}
.shop .box .text-box li span , 
.shop .popular .popular-item li span , 
.related-products .box li span{
    margin: 0px 5px 0px 0px !important;
    color: var(--main-color) !important;
}
.shop .box .text-box li del , 
.shop .popular .popular-item del , 
.related-products .box li del{
    color: #919090;
}
.product-details li del , 
.related-products .box li del{
    margin-left: 5px;
}
.shop .box .rate ,
.related-products .box .rate{
    margin-top: 3px;
}
.shop .box .rate i , 
.product-details .rate i , 
.related-products .box .rate i{
    color: #ffbb05;
    font-size: 12px;
}
.shop .page-count{
    text-align: center;
    margin-top: 50px;
}
.shop .page-count li{
    width: 50px;
    height: 50px;
    background-color: #ccc;
    border: 1px solid #ccc;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    line-height: 50px;
    margin: 5px 2px;
    display: inline-block;
}
.shop .page-count li i , 
.shop .page-count li a{
    color: var(--main-color);
    font-weight: 600;
    font-size: 17px;
}
.shop .page-count li.active{
    background-color: var(--main2-color);
    border: 1px solid var(--main2-color);
}
.shop .page-count li.active a{
    color: #212121;
}
.shop .last-col4{
    display: none;
}
@media only screen and (max-width : 992px){
    .shop .first-col4{
        display: none;
    }
    .shop .last-col4{
        display: block;
    }
}
/* ============================================ product deatils page ============ */
/* start css to the product-details section */
.product-details{
    position: relative;
}
.product-details .product-img {
    width: 100%;
    height: 500px;
    max-height: 500px;
    border-radius: 12px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    -ms-border-radius: 12px;
    -o-border-radius: 12px;
    margin-top: 25px;
}
.product-details .product-img img{
    width: 100%;
    height: 100%;
    max-height: 100%;
    border-radius: 12px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    -ms-border-radius: 12px;
    -o-border-radius: 12px;
}
.product-details span a{
    text-transform: uppercase;
    font-size: 15px;
    line-height: 26px;
    color: var(--main2-color);
    margin-top: 25px;
    font-weight: 600;
}
.product-details h2{
    font-size: 30px;
    line-height: 36px;
    color: #fff;
    margin-top: 25px;
    font-family: var(--heading-font);
    font-weight: 500;
    text-transform: capitalize;
}
.product-details .rate {
    margin-top: 10px;
}
.product-details li{
    margin-top: 25px;
    font-size: 20px;
    color: #f7f7f7;
}
.product-details li del{
    color: var(--main2-color);
}
.product-details p{
    color: #f7f7f7;
    font-size: 16px;
    line-height: 28px;
    margin-top: 25px;
    font-family: var(--text-font);
    font-weight: 400;
}
.product-details li.cat-type{
    color: #ffbb05;
    font-size: 18px;
    text-transform: capitalize;
    display: block;
}
.product-details li.cat-type span{
    display: inline-block;
    margin-left: 5px;
    color: #fff;
}
.product-details .zaitoun{
    top: 5%;
    right: 8%;
    z-index: 9;
    width: 120px;
    height: 120px;
}
/* start css to the related-products section */
.related-products{
    text-align: center;
    margin-bottom: 70px;
}
/* ========================================= covering page ================ */
/* start css to the covering section */
.covering{
    text-align: center;
}
/* ========================================= order page ================ */
/* start css to the order section */
.order .order-img img{
    border-radius: 12px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    -ms-border-radius: 12px;
    -o-border-radius: 12px;
}
/* ========================================= factory page ================ */
/* start css to the factory section */
.factory .row:first-child{
    text-align: center;
}
.factory h3 , 
.factory h4{
    color: var(--main2-color);
    font-family: var(--heading-font);
}
.factory ul{
    margin-top: 25px;
}
.factory ul li{
    color: #fff;
    display: block;
    margin: 6px 0px;
    font-size: 17px;
    font-family: var(--note-text);
}
/* =========================================== contact page =========== */
/* start css to the contact section */
.contact{
    position: relative;
}
.contact .contact-img , 
.order .order-img{
    height: 240px;
    margin-top: 25px;
}
.contact .info .info-box .info-item{
    display: flex;
    align-items: center;
    margin: 20px 0px;
    padding: 5px 0px;
}
.contact .info .info-box .info-item .icon{
    width: 55px;
    height: 55px;
    color: #fff;
    background-color: #52320a;
    border: 1px solid #52320a;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    text-align: center;
    line-height: 55px;
    margin-right: 15px;
    font-size: 22px;
}
.contact .info .info-box .info-item .text h4{
    color: #212121;
    font-size: 19px;
    font-family: var(--text-font);
    text-transform: capitalize;
}
.contact .info .info-box .info-item .text span{
    font-size: 15px;
    margin-top: 7px;
    text-transform: capitalize;
    color: #333;
    font-family: var(--text-font);
}
.contact .info .info-box .info-item:hover{
    transform: translateY(-5px);
    -webkit-transform: translateY(-5px);
    -moz-transform: translateY(-5px);
    -ms-transform: translateY(-5px);
    -o-transform: translateY(-5px);
    transition: .5s ease-in-out;
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -ms-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
}
.contact span.title , 
.order span.title{
    color: var(--main-color);
    font-size: 17px;
    font-weight: 600;
    font-family: var(--note-text);
    margin-top: 25px;
    text-transform: capitalize;
}
.contact h2 , 
.order h2{
    font-size: 40px;
    font-weight: 700;
    font-family: var(--heading-font);
    line-height: 55px;
    margin-top: 30px;
    color: #fff;
    text-transform: capitalize;
}
.contact span.sec-title , 
.order span.sec-title{
    color: #f7f7f7;
    font-size: 17px;
    margin-top: 15px;
    font-family: var(--text-font);
}
.contact img.layer{
    width: 200px;
    margin-top: 20px;
}
.contact form , 
.order form{
    margin-top: 30px;
    padding: 15px 0px;
}
.contact form input , 
.contact form textarea , 
.order form input ,
.order form textarea{
    width: 100%;
    height: 60px;
    background-color: #f3f5f3;
    border: 1px solid #f3f5f3;
    border-radius: 30px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    -ms-border-radius: 30px;
    -o-border-radius: 30px;
    margin-top: 25px;
    color: #777;
}
.contact form textarea , 
.order form textarea{
    height: 170px;
    padding: 15px;
}
.contact form input::placeholder , 
.contact form textarea::placeholder , 
.order form input::placeholder , 
.order form textarea::placeholder{
    color: #212121;
    text-transform: capitalize;
    font-size: 14px;
}
.contact form input:hover , 
.contact form textarea:hover , 
.order form input:hover , 
.order form textarea:hover{
    background-color: #010101;
    border: 1px solid var(--main2-color);
    transition: .5s ease-in-out;
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -ms-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
}
.contact form input:hover::placeholder , 
.contact form textarea:hover::placeholder , 
.order form input:hover::placeholder , 
.order form textarea:hover::placeholder{
    color: var(--main2-color);
    transition: .5s ease-in-out;
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -ms-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
}
.contact form button , 
.order form button{
    width: 200px;
    background-color: var(--main2-color);
    border: 1px solid var(--main2-color);
    color: var(--main-color);
}
.contact img.faq{
    position: absolute;
    width: 60px;
    height: 60px;
    top: 5%;
    right: 5%;
    z-index: 3;
}
/* =============================================== privacy page ================= */
/* start css to the privacy section */
.privacy h3{
    color: var(--main2-color);
    font-family: var(--heading-font);
    font-size: 20px;
    margin: 20px 0px;
    line-height: 60px;
    text-transform: capitalize;
}
.privacy p{
    color: #fff;
    font-size: 16px;
    line-height: 26px;
    text-transform: capitalize;
}
.privacy li{
    list-style-type: decimal;
    color: #fff;
    margin: 10px 0px;
    font-size: 17px;
}
/* start css to the footer */
footer{
    background-color:var(--main-color);
    padding-bottom: 15px;
    position: relative;
}
footer .row:not(footer .row:last-child){
    margin-top: 20px;
    padding: 20px 0px;
}
footer img{
    width: 100px;
    height: 100px;
    margin-top: -30px;
}
footer h2{
    color: #fff;
    font-family: var(--note-text);
    font-size: 25px;
    text-align: left;
}
footer .social ul li{
    background-color: var(--main2-color);
    border: 1px solid var(--main2-color);
    width: 50px;
    height: 50px;
    line-height: 50px;
    margin: 0px 5px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    text-align: center;
    display: inline-block;
}
footer .social ul li a{
    color: var(--main-color);
}
footer .social ul li:hover{
    background-color: transparent;
    border: 1px solid var(--main2-color);
    transform: translateY(-5px);
    -webkit-transform: translateY(-5px);
    -moz-transform: translateY(-5px);
    -ms-transform: translateY(-5px);
    -o-transform: translateY(-5px);
    transition: .3s ease-in-out;
    -webkit-transition: .3s ease-in-out;
    -moz-transition: .3s ease-in-out;
    -ms-transition: .3s ease-in-out;
    -o-transition: .3s ease-in-out;
}
footer .social ul li:hover a{
    color: var(--main2-color);
    transition: .3s ease-in-out;
    -webkit-transition: .3s ease-in-out;
    -moz-transition: .3s ease-in-out;
    -ms-transition: .3s ease-in-out;
    -o-transition: .3s ease-in-out;
}
footer .line{
    border: 1px dashed #919090;
}
footer h3{
    color: #fff;
    font-size: 23px;
    line-height: 28px;
    font-weight: 600;
    font-family: var(--heading-font);
    text-transform: capitalize;
}
footer .adv , 
footer .links , 
footer form{
    margin-top: 25px;
}
footer .adv li , 
footer .links li {
    font-size: 17px;
    color: #f7f5f0;
    font-family: var(--text-font);
    margin-top: 10px;
}
footer .adv li{
    margin-bottom: 20px;
}
footer .adv li i , 
footer .links li i{
    color: var(--main2-color);
    margin-right: 15px;
}
footer .adv li a , 
footer .links li a{
    color: #f7f5f0;
    text-transform: capitalize;
}
footer .adv li:hover , 
footer .links li:hover{
    transform: translateX(10px);
    -webkit-transform: translateX(10px);
    -moz-transform: translateX(10px);
    -ms-transform: translateX(10px);
    -o-transform: translateX(10px);
    transition: .5s ease-in-out;
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -ms-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
}
footer .adv li:hover a , 
footer .links li:hover a{
    color: var(--main2-color);
}
footer form input{
    width: 100%;
    height: 55px;
    outline: none;
    background-color: rgba(255, 255, 0, 0.7);
    border: 1px solid rgba(255, 255, 0, 0.7);
    border-radius: 35px;
    -webkit-border-radius: 35px;
    -moz-border-radius: 35px;
    -ms-border-radius: 35px;
    -o-border-radius: 35px;
    font-size: 20px;
    font-family: var(--text-font);
    color: #fff;
    padding-left: 15px;
    margin-top: 25px;
}
footer form input::placeholder{
    font-size: 14px;
    font-weight: 500;
    font-family: var(--text-font);
    color: var(--main-color);
}
footer form input:hover , 
footer form input:focus{
    background-color: #fff;
    transition: .3s ease-in-out;
    -webkit-transition: .3s ease-in-out;
    -moz-transition: .3s ease-in-out;
    -ms-transition: .3s ease-in-out;
    -o-transition: .3s ease-in-out;
}
footer form input:focus::placeholder{
    color: var(--main2-color);
    transition: .3s ease-in-out;
    -webkit-transition: .3s ease-in-out;
    -moz-transition: .3s ease-in-out;
    -ms-transition: .3s ease-in-out;
    -o-transition: .3s ease-in-out;
}
footer form button{
    width: 100%;
    background-color: #fff;
    border: 1px solid #fff;
    color: var(--alt-color);
}
footer form button , 
.contact form button , 
.order form button{
    height: 55px;
    line-height: 55px;
    border-radius: 35px;
    -webkit-border-radius: 35px;
    -moz-border-radius: 35px;
    -ms-border-radius: 35px;
    -o-border-radius: 35px;
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: space-between;
    font-size: 15px;
    font-family: var(--text-font);
    font-weight: 500;
    text-transform: capitalize;
    margin-top: 25px;
    padding: 0px 15px;
    transition: .5s ease-in-out;
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -ms-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
}
footer form button .icon , 
.contact form button .icon ,
.order form button .icon{
    width: 40px;
    height: 40px;
    background-color: var(--main-color);
    border: 1px solid var(--main-color);
    color: var(--main2-color);
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    text-align: center;
    line-height: 40px;
    transition: .5s ease-in-out;
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -ms-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
}
footer form button:hover , 
.contact form button:hover , 
.order form button:hover {
    background-color: transparent;
    border: 1px solid rgba(255, 255, 0, 0.9);
    color: #fff;
}
footer form button:hover .icon , 
.contact form button:hover .icon , 
.order form button:hover .icon {
   animation: iconshake .5s ease-in-out alternate infinite;
   -webkit-animation: iconshake .5s ease-in-out alternate infinite;
}
@keyframes iconshake{
    100%{
        transform: translateX(-60px);
        -webkit-transform: translateX(-60px);
        -moz-transform: translateX(-60px);
        -ms-transform: translateX(-60px);
        -o-transform: translateX(-60px);
        opacity: .5;
}
}
footer .row:last-child span , 
footer .row:last-child a{
    color: #f7f5f0;
    font-size: 15px;
    font-family: var(--text-font);
    text-transform: capitalize;
    display: block;
    font-weight: 600;
}
footer .row:last-child a{
    float: right;
    margin-top: -10px;
}
footer .row:last-child a i{
    color: var(--main2-color);
    margin-right: 10px;
    font-weight: 500;
    font-size: 25px;
}
footer .row:last-child a span{
    display: inline-block;
    color: var(--main2-color);
}
footer img.ft-shap{
    position: absolute;
    bottom: 0;
    right: 0;
    width: 300px;
    height: 300px;
    opacity: .3;
}
@media only screen and (max-width : 992px){
    footer .row:first-child .col-lg-4:nth-child(2){
        display: none;
    }
    footer .row:first-child h2{
        display: none;
    }
    footer .social{
        float: none;
    }
    footer img{
        margin-top: -5px;
    }
    footer .row:last-child{
        text-align: center;
    }
}
@media only screen and (max-width : 768px){
    footer .row:first-child{
        text-align: center ;
    }
    footer .row:first-child .social{
        margin-top: 20px;
    }
    footer .row:last-child a{
        float: none;
        margin-top: 2px;
    }
    footer img.ft-shap{
        display: none;
    }
}