*,
*::after,
*::before{
    padding: 0;
    margin: 0;
    box-sizing: inherit;
}

@font-face {
	font-family: "font-light";
	src:url("assets/fonts/woff/YekanBakhFaNum-Light.woff") format("woff"),
        url("assets/fonts/woff2/YekanBakhFaNum-Light.woff2") format("woff2");
        font-display: swap
}

@font-face {
	font-family: "font-regular";
	src:url("assets/fonts/woff/YekanBakhFaNum-Regular.woff") format("woff"),
        url("assets/fonts/woff2/YekanBakhFaNum-Regular.woff2") format("woff2");
        font-display: swap
}

@font-face {
	font-family: "font-semi-bold";
	src: url("assets/fonts/woff/YekanBakhFaNum-SemiBold.woff") format("woff"),
         url("assets/fonts/woff2/YekanBakhFaNum-SemiBold.woff2") format("woff2");
        font-display: swap
}

@font-face {
	font-family: "font-bold";
	src: url("assets/fonts/woff/YekanBakhFaNum-Bold.woff") format("woff"),
         url("assets/fonts/woff2/YekanBakhFaNum-Bold.woff2") format("woff2");
        font-display: swap
}

@font-face {
	font-family: "r-ultra-font-bold";
	src: url("assets/fonts/rokh/woff/RokhFaNum-UltraBold.woff") format("woff"),
         url("assets/fonts/rokh/woff2/RokhFaNum-UltraBold.woff2") format("woff2");
        font-display: swap
}
@font-face {
	font-family: "r-font-bold";
	src: url("assets/fonts/rokh/woff/RokhFaNum-SemiBold.woff") format("woff"),
         url("assets/fonts/rokh/woff2/RokhFaNum-SemiBold.woff") format("woff2");
        font-display: swap
}

:root{
    --primary-color: #D71A21;
    --primary2-color: #EE9DA0;
    --primary3-color:#FBE8E9;
    --primary4-color:#E8F3EE;
    --primary-tx-color:#3D3D3D;
    --secondary-tx-color: #2C2C2C;
    --third-text-color: #474b53;
    --g500: #494949;
    --g800: #1E1E1E;
    --g100: #7F7F7F;
    --g80: #9B9B9B;
    --g400 : #575757;
    --g900 : #121212;
    --n70 : #A3A3A3;
    --border-color : #e0e0e0;
    --primary-box-shadow :0px 7px 32px rgba(215, 26, 33, 0.51);

}

html{
    box-sizing: border-box;
    font-size: 62.25%;
}
body{
    font-family: 'font-regular', 'Myriad Pro', Tahoma;
    font-weight: 400;
    direction: rtl;
     color: var(--primary-tx-color); 
    background-color: #fafafa;
    line-height: 1.6;    
}


.primary-bg{
    background-color: var(--primary-color);
}
.primary3-bg{
    background-color: var(--primary3-color);
}
.primary4-bg{
    background-color: #E8F3EE;
}
.primary-tx{
    color: var(--primary-color) !important;
}
.secondary-tx-c{
    color: var(--secondary-tx-color) !important;
}
.primary-tx-c{
    color: var(--primary-tx-color) !important;
}
.tx-green{
    color: #198855 !important;
}
.g100-tx-c{
    color: var(--g100) !important;
}
.g500-tx-c{
    color: var(--g500) !important;
}
.g80-tx-c{
    color: var(--g80) !important;
}
.g800-tx-c{
    color: var(--g800) !important;
}
.g400-tx-c{
    color: var(--g400) !important;
}
.g900-tx-c{
    color: var(--g900) !important;
}
.n600-tx-c{
    color: #2E2E2E !important;
}
.n70-tx-c{
    color: var(--n70);
}
.white-tx{
    color: #fff !important;
}
.white-bg{
    background-color: #fff !important;
}
.font-semi-bold{
    font-family: "font-semi-bold" !important;
}
.r-ultrabold{
    font-family: "r-ultra-font-bold";
}
.r-semi-bold{
    font-family: "r-font-bold";
}

.font-light{
    font-family: "font-light";
}
.font-11{
    font-size: 1.1rem !important;
}
.font-12{
    font-size: 1.2rem !important;
}
.font-14{
    font-size: 1.4rem !important;
}
.font-16{
    font-size: 1.6rem !important;
}
.font-2{
    font-size: 2rem !important;
}
.font-24{
    font-size: 2.4rem !important;
}
.font-20{
    font-size: 2rem !important;
}
.font-32{
    font-size: 3.2rem !important;
}
.mx--08{
    margin: 0 -0.8rem;
}
.px-08{
    padding: 0 0.8rem;
}
.mr-08{
    margin-right: 0.8rem !important;
}
.ml-08{
    margin-left: 0.8rem !important;
}
.mb-08{
    margin-bottom: 0.8rem !important;
}
.p-08{
    padding: 0.8rem !important;
}
.py-08{
    padding: 0.8rem 0 !important;
}
.mt-08{
    margin-top: 0.8rem !important;
}
.mx--32{
    margin: 0 -3.2rem;
}
.p-32{
    padding: 3.2rem !important;
}
.pr-32{
    padding-right: 3.2rem;
}
.pl-32{
    padding-left: 3.2rem;
}
.pb-32{
    padding-bottom: 3.2rem;
}
.px-32{
    padding: 0 3.2rem !important;
}
.pt-32{
    padding-top: 3.2rem !important;
}
.py-32{
    padding: 3.2rem 0 !important;
}
.p-16{
    padding: 1.6rem !important;
}
.pb-16{
    padding-bottom: 1.6rem !important;
}
.mb-16{
    margin-bottom: 1.6rem !important;
}
.py-16{
    padding: 1.6rem 0 !important;
}
.mx--16{
    margin: 0 -1.6rem;
}
.px-16{
    padding: 0 1.6rem !important;
}
.ml-16{
    margin-left: 1.6rem;
}
.mb-32{
    margin-bottom: 3.2rem !important;
}
.mb-12{
    margin-bottom: 1.2rem !important;
}
.mr-12{
    margin-right: 1.2rem !important;
}
.mx--12{
    margin: 0 -1.2rem !important;
}
.py-12{
    padding: 1.2rem 0 !important;
}
.px-12{
    padding: 0 1.2rem !important;
}
.p-12{
    padding: 1.2rem !important;
}
.ml-24{
    margin-left: 2.4rem !important;
}

.mt-12{
    margin-top: 1.2rem !important;
}
.mb-24{
    margin-bottom: 2.4rem !important;
}
.mt-24{
    margin-top: 2.4rem !important;
}
.pb-24{
    padding-bottom: 2.4rem !important;
}
.pt-24{
    padding-top: 2.4rem !important;
}
.p-24{
    padding: 2.4rem !important;
}
.py-8{
    padding: 8rem 0 !important;
}
.pt-8{
    padding-top: 8rem;
}
.my-8{
    margin: 8rem 0 !important; 
}
.mb-8{
    margin-bottom: 8rem!important; 
}
.mb-5{
    margin-bottom: 5rem!important; 
}
.p--2{
    padding: 2rem !important;
}
img,svg,i{
    line-height: 0;
}
.rotate-180{
    transform: rotate(180deg);
}
.border-r-4{
    border-radius: 4px;
}
.border-r-8{
    border-radius: 8px;
}
.border-r-12{
    border-radius: 12px;
}
.zindex-2{
    z-index: 2;
}

.toggle-menu{
    left: 0 !important;
}
input:focus,
button,
button:focus{
    outline: none;
}
button{
    background-color: transparent;
    border: none;
}
input[type=search],
input[type=text],
input[type=number],
input[type=email]{
    border: 1px solid var(--border-color);
    background: rgba(255,255,255,0.3);
    padding: 2px 10px;
    font-size: 1.4rem;
    border-radius: 8px;
    height: 5.6rem;
    color: var(--white-color);
}

select{
    padding: 2px 10px;
    font-size: 1.6rem;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: rgba(255,255,255,0.3);
    height: 4rem;
    font-size: 1.4rem;
    color: var(--white-color);
}

input[type=submit]{
    border: 1px solid transparent;
}

input[type=search]:focus,
input[type=text]:focus,
input[type=number]:focus,
input[type=email]:focus,
textarea:focus{
    box-shadow: none;
}
select:focus-visible {
    outline: none;
}

textarea:focus{
    outline: none;
}

textarea{
    resize: none;
    border: 1px solid var(--border-color);
    background: rgba(255,255,255,0.3);
    padding: 15px 10px;
    font-size: 1.4rem;
    border-radius: 8px;
    color: var(--white-color);

}
::placeholder { 
    color:  var(--g100);
    opacity: 1; 
    font-weight: inherit;   
    font-size: 1.2rem;
  }
  
:-ms-input-placeholder { 
    color:  var(--g100);
    opacity: 1; 
    font-weight: inherit;   
    font-size: 1.2rem;
}

::-ms-input-placeholder { 
    color:  var(--g100);
    opacity: 1; 
    font-weight: inherit;   
    font-size: 1.2rem;
}

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

p{
    font-size: 1.6rem;
    color: var(--primary-tx-color);
    line-height: 1.9;
}

.text-color{
    color: #0C1319;
}
a{
    font-size: 1.4rem;
    color: var(--primary-tx-color); 
}


a{
    transition: all 0.3s ease-in-out;
    text-decoration: none;
}

[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
    
  }

.btn{
    border-radius: 4px;
    display: inline-block;
    font-family: "font-semi-bold";
} 
.primary-btn{
    color: #fff;
    background-color: var(--primary-color);
    padding:1.6rem 2.4rem;
    font-size: 1.4rem;

}
.primary2-btn{
    color: var(--primary-color);
    background-color: var(--primary3-color);
    padding:1.6rem 2.4rem;
    font-size: 1.4rem;

}
.primary3-btn{
    background-color: var(--primary3-color);
    color: var(--primary-color);
    padding:1.6rem 2.4rem;
    font-size: 1.4rem;
}
    
.primary3-icon-btn{
    background-color: var(--primary3-color);
    padding: 1.6rem;
}



li{
    list-style: none;
}


.swiper {
    width: 100%;
    height: 100%;
}

  .swiper-slide {
    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}

.swiper-button-prev svg, .swiper-button-next svg {
    width: auto;
    height: auto;
}




.sticky{
    width: 100%;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 2;
    background-color: #fff;
    margin: 0 !important;
    padding: 2.5rem 3rem !important;
}


.web-container{
    max-width: 1810px;
    margin: 0 auto;
}

.border-full{
    border: 1px solid var(--border-color);
}
.border-right{
    border-right: 1px solid var(--border-color);
}

.border-left{
    border-left: 1px solid var(--border-color);
}
.border-bottom{
    border-bottom: 1px solid var(--border-color);
}
.border-top{
    border-top: 1px solid var(--border-color);
}

::-webkit-scrollbar {
    width: 8px;
  }
  
  /* Track */
  ::-webkit-scrollbar-track {
    border-radius: 16px;
    background-color: #F6F6F6;

  }
  
  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: #B6B6B6;
    border-radius: 16px;

    
  }
.no-dot::before{
    content: none !important;
   
}
.bookmarked{
    background-color: var(--primary2-color) !important;
}
.bookmarked svg path{
    stroke: #fff;
}

@media print {
    .table__print{
      display:none !important;
    }
  }
/********************breadcrumbs*********************/
.breadcrumbs a,
.breadcrumbs span{ 
    color: #8D8D8D;
}


/**************************************************/
/*******************Front Page********************/
/*************************************************/
/*********************title*************************/
.section-title{
    font-size: 2.4rem;
    font-weight: 700;
    margin-bottom: 4rem;
    color: var(--third-text-color);
    position: relative;
    padding-right: 2rem;
    font-family: "r-ultra-font-bold";

}
.section-title::before{
    content: "";
    background-color: var(--third-text-color);
    position: absolute;
    width: 0.7rem;
    height: 0.7rem;
    top: 50%;
    right: 0%;
    transform: translate(0, -50%);
}

/*********************header*************************/

.top-header{
    padding: 2.5rem 1.5rem;
    border-bottom: 1px solid var(--border-color) ;
}
.top-header__date{
    font-size: 1.4rem;
    margin-left:1.2rem;
    border-left: 1px solid var(--border-color);
    padding: 0.25rem 0 0.25rem 1.2rem ;
}

.top-header__blinker{
    background-color: var(--primary3-color);
    width: 16px;
    height: 16px;
    border-radius: 50px;
    margin-bottom: 0.35rem;
}

.top-header__blinker::before,
.top-header__blinker::after{
    content: "";
    top: 50%;
    right: 50%;
    transform: translate(50%, -50%);
    position: absolute;
}
.top-header__blinker::before{
    background-color: var(--primary2-color);
    width: 12px;
    height: 12px;
    border-radius: 50px;
}

.top-header__blinker::after{
    background-color: var(--primary-color);
    width: 8px;
    height: 8px;
    border-radius: 50px;
}
.Typewriter__wrapper,
.Typewriter__cursor{
    font-size: 1.4rem;
    font-family: "font-semi-bold";
    color: var(--secondary-tx-color);
}
.Typewriter__cursor{
    color: var(--primary-color);
}

.tob-header__contact a{
    font-size: 1.8rem;
}
.tob-header__phone{
    margin-right: 1.2rem;
    padding-right: 1.2rem;
    border-right: 1px solid var(--border-color);

}

.main-header{
    padding: 2.5rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
}
.main-header::after{
    content: "";
    width: 1px;
    height: 24px;
    background-color: var(--border-color);
    position: absolute;
    top: 50%;
    right: 60%;
    transform: translate(0, -50%);
} 

.main-header__navigator > ul >li:not(:last-child){
    border-left:1px solid var(--border-color) ;
}

.main-header__navigator > ul >li{
    display: inline-block;
    margin-left: 2.4rem;
} 
.main-header__navigator > ul{
    display: flex;
    align-items: center;
}
.main-header__navigator > ul >li > a{
    padding-left: 3.2rem;
    display: flex;
    font-size: 1.4rem;
    font-family: "font-semi-bold";

}
/******************mega menu*****************/
.megamenu-cat {
    max-height: 0;
    visibility: hidden;
    box-shadow: 0 20px 40px 0 #00000026;
    -webkit-box-shadow: 0 20px 40px 0 #00000026;
    transform: perspective(600px) rotateX(-90deg);
    -webkit-transform: perspective(600px) rotateX(-90deg);
    transform-origin: 50% 0;
    -webkit-transform-origin: 50% 0;
    transition: all .3s cubic-bezier(.4,0,0,1);
    -webkit-transition: all .3s cubic-bezier(.4,0,0,1);
    width: 1100px;
    position: absolute;
    top: 95%;
    right: 87px;
    left: 0;
    z-index: 11;
}



.megamenu-cat.active{
    max-height: 1000px;
    transform: perspective(600px) rotate3d(0, 0, 0, 0);
    -webkit-transform: perspective(600px) rotate3d(0, 0, 0, 0);
    visibility: visible;
}



.megamenu-cat__main{
    background: #fff;
    position: absolute;
    border-radius: 0 0 4px 4px;
    box-shadow: 0 2px 10px rgba(59, 70, 98, .06);
    overflow: hidden;
    top: 0;
    right: 70px;
    left: 0;
    padding:0 1rem;

}


.megamenu-navs a{
    position: relative;
    display: flex;
    justify-content: space-between;
    padding: 1.6rem 1.2rem 1.6rem 0.8rem;
    align-items: center;
    color: #121212;
    font-family: "font-semi-bold";
}


.megamenu-navs a::before{
    content: "";
    position: absolute;
    width: 4px;
    height: 0;
    background: var(--primary-color);
    border-radius: 4px 0px 0px 4px;
    right: 0;
    top: 50%;
    transform: translate(0, -50%);
    transition: 0.3s ease-in-out;
}
.megamenu-navs a:hover{
    color: #636363;
}
.megamenu-navs a:hover svg path{
    transition: all 0.3s ease-in-out;
}

.megamenu-navs a:hover svg path{
    stroke: var(--primary-color);
}

.megamenu-navs a:hover::before{
    height: 32px !important;
}

.megamenu-navs a span,
.megamenu-navs a svg{
    pointer-events: none;
}

.megamenu-navs a:hover:before {
    height: 100%;
}



.megamenu-pils__item {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    padding: 1rem 4rem 2.4rem 1rem;
}

.megamenu-pils__item a{
    display: block;
}

.megamenu-pils__cat a{
    padding: 0.25rem 1rem;
    width: 100%;
    margin-bottom: 1rem;
    position: relative;
    font-family: "font-bold";
    color: var(--secondary-tx-color);
}
.megamenu-pils__cat a::before{
    content: "";
    width: 4px;
    height: 8px;
    background: var(--primary-color);
    border-radius: 4px 0px 0px 4px;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translate(0, -50%);

}

.megamenu-pils__post a{
    padding: 0.5rem 1.25rem;
    color: #636363;
}

/******************categories*********************/

.f-categories__wrapper li{
    padding: 0.8rem;
    width: 12.5%;
    flex: 0 0 auto;
}

.f-categories__wrapper a{
    padding: 5.2rem 1rem;
    border-radius: 0.8rem;
    border-bottom: 4px solid var(--primary-color);
    width: 100%;
}

.f-categories__title{
    font-size: 1.8rem;
    font-family: "font-bold";

}


.f-categories__more{
    position: absolute;
    bottom: 0;
    right: 50%;
    transform:translate(50%,0);
    transition: all 0.3s ease-in-out;
}
.f-categories__more span{
    margin-left: 0.4rem;
    font-size: 1.2rem;
    transition: all 0.3s ease-in-out;
}

.f-categories .Intersection-layer{
    z-index: 2;
    bottom: 0;
    visibility: hidden;
    opacity: 0;
    right: 0;

}
.f-categories__wrapper ul{
    margin: -0.8rem;
}
.f-categories__wrapper a{
    transition: none;
}
.f-categories__wrapper a:hover{
    background-color: var(--primary-color) !important;
    color: #fff;
    box-shadow: var(--primary-box-shadow)

    
}

.f-categories__wrapper a:hover img{
    filter: opacity(0.4);
    visibility: visible;
    opacity: 1;
}

.f-categories__wrapper a:hover svg,
.f-categories__wrapper .f-categories__title{
    transition: all 0.3s ease-in-out;
}
.f-categories__wrapper a:hover > svg,
.f-categories__wrapper a:hover .f-categories__title{
    transform: translateY(-18px);
}

.f-categories__wrapper a:hover .f-categories__more{
    transform: translate(50%, -18px);

}
.f-categories__wrapper a:hover svg path{
    stroke: #fff;
}



/******************products*********************/
.product-table thead{
    background-color: #F6F6F6;
}
.product-table tr{
    height: 5.6rem;
}
.product-table tr th{
    font-weight: normal;
}
.product-table thead tr,
.product-table tbody tr:not(:last-child){
    border-bottom: 1px solid var(--border-color);
}
.product-cart-btn,
.product-chart-btn{
    width: 3.2rem;
    height: 3.2rem;
}
.f-products__bazar{
    padding: 1.6rem;
}
.f-products__condition{
    margin-bottom: 0.4rem;
    padding-bottom: 1.6rem;
}
.f-products__bazar-g {
    padding: 0.8rem 1.2rem;
    
}
.f-products__bazar img{
    margin-top: 3.6rem;
}

/******************about*********************/
.f-about p{
    margin-bottom: 2.6rem;
}

/******************inquiry*********************/
.f-inquiry__card{
    background: linear-gradient(90deg, #B20007 0%, #D71A21 100%);

}

.f-inquiry .Intersection-layer{
    bottom: 0;
    right: 0;
    filter: opacity(0.4);
}
.f-inquiry .inquiry-img{
    left: -49px;
    top: 0;
}
/******************adv*********************/

.f-adv__card{
    border-bottom: 4px solid var(--primary-color);
}
.f-adv__card svg{
    margin-left: 2rem;
}

/*****************footer*************************/
footer{
    background-color: var(--g800);
}
.footer__main{
    border-bottom: 1px solid var(--secondary-tx-color);

}
.footer-container{
    max-width: 1554px;
    padding: 7rem 0 6.5rem;
}
.footer__social{
    padding: 3rem 0;

}
.footer__social ul{
    background-color: var(--g800);
    margin-bottom: -118px;
}
.footer__content{
    padding: 3.2rem 4.6rem;
    position: relative;
}
.footer__content p{
    color: #ECECEC !important;
    border-bottom: 1px solid var(--secondary-tx-color);
    margin-bottom: 3rem;

}
.footer__social li:not(:last-child),
.footer__contact li:not(:last-child){
    border-left: 1px solid var(--secondary-tx-color);
}

.footer__content .subtract{
    position: absolute;
    top: 0;
    z-index: 1;
    right: 1.5rem;
    top: 0;
    width: calc(100% - 3rem);
}
.footer__contact{
    margin-top: 1rem;
}
.footer__contact a{
    color: #C4C4C4;
}
.footer__content .enamad{
    bottom: -38px;
    left: 3%;
}

.subfooter{
    color: #7e7e7e;
}



/**************************************************/
/*******************Front Page********************/
/*************************************************/

.contactus__wrapper{
    background: url(assets/img/contact/map.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    height: 100%;
    padding: 10rem 11rem;
}

.contactus__card{
    border-radius: 8px;
    padding: 2.4rem;
}

.contactus__contact li{
    border-bottom: 1px solid var(--border-color);
}

.contactus__card .contactus__contact-box div{
    color: #959DB0;
}

.contactus__card .contactus__contact-box span{
    color: #515765;
}
.contactus__social-call{
    background-color: rgba(255,255,255,0.15);
    height: 4rem;
    line-height: 4rem;
    width: 11rem;
}

.whatsapp{
    background: linear-gradient(91.85deg, #2DCE44 0%, #3DD954 100%);

}

.telegram{
    background: linear-gradient(91.85deg, #863FA6 0%, #0077B6 0.01%, #009CEE 100%);

}

.instagram{
    background: linear-gradient(91.85deg, #863FA6 0%, #D52E6A 46.9%, #F46F46 100%);

}

.contactus__form textarea{
    height: 13.6rem;
}
.contactus__form input,
.contactus__form textarea{
    margin-bottom: 2.1rem;
}
/**************************************************/
/*******************About Page********************/
/*************************************************/
.aboutus__desc .about__head{
    width: 82%;
    margin: 0 auto;
}

.video-intro-right{
    flex: 0 0 42%;
    width: 42%;
}

.video-intro-left{
    flex: 0 0 58%;
    width: 58%;
}
.aboutus__employees ul li:nth-child(1){
    z-index: 4;

}
.aboutus__employees ul li:nth-child(2){
    z-index: 3;
    margin-right: -2.25rem;

}
.aboutus__employees ul li:nth-child(3){
    z-index: 2;
    margin-right: -2.25rem;

}

.aboutus__employees ul li:nth-child(4){
    z-index: 1;
    margin-right: -2.25rem;

}
.aboutus__catalogue{
    background: linear-gradient(90deg, #B20007 0%, #D71A21 100%);
}

.aboutus__catalogue-img{
    right: -6px;
    top: -50px;
}

.aboutus__catalogue .Intersection-catalogue{
    left: 0;
    top: 0;
    filter: opacity(0.4);

}

.aboutus__catalogue a{
    margin: 2rem;
}
@media (min-width: 1200px) {
    .aboutus__catalogue .col-lg-8{
        width: 58%;
    }
    .aboutus__catalogue .col-lg-2{
        width: 21%;
    }
    
}

.aboutus__timeline{
    margin-top: 12rem;
    padding-bottom: 35rem;
}



.timeline__card{
    box-shadow: 0px 4px 52.8px rgba(0, 0, 0, 0.05);
    max-width: 424px;
    line-height: 2;

}
.timeline__card-b{
    border-top: 4px solid var(--g800);
   
}

.timeline__card-r{
    border-top: 4px solid var(--primary-color);
    
}

.timeline__desc{
    color: #949494
}
.timeline-1{
    position: absolute;
    top: 11%;
    right: 0;
}
.timeline-2{
    position: absolute;
    top: 2%;
    left: 0;
}
.timeline-3{
    position: absolute;
    top: 54%;
    right: 8%;

}
.timeline-4{
    position: absolute;
    top: 60%;
    left:10%;
}


/**************************************************/
/*******************Blog Page********************/
/*************************************************/
/* .blog__selected > .col-md-6 > img{
    height: 420px;
}

.blog__selected .col-12 img{
    height: 201px;
} */

.blog__selected a::after{
    content: "";
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 67.92%, #000000 100%);
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    border-radius: 8px;
}


.blog__selected-card .blog__selected-box{
    position: absolute;
    bottom: 4rem;
    z-index: 2;
    line-height: 1.6;
    right: 2rem;
}
.blog__selected-box .d-inline-block,
.blog__selected-boxs .d-inline-block,
.article__cat{
    padding: 0.4rem 2.7rem;

}


.blog__selected-card .blog__selected-boxs{
    position: absolute;
    bottom: 1.5rem;
    z-index: 2;
    line-height: 1.6;
    right: 2rem;
}
.blog__services{
    background: linear-gradient(90deg, #B20007 0%, #D71A21 100%);

}
.blog__services{
    padding: 3.2rem 1.5rem;

}
.blog__services img{
    bottom: 0;
    right: 0;
    filter: opacity(0.4);
}

.next-btn,.prev-btn{
    cursor: pointer;
}

/*****************single blog********************/
.linkedin{
    background: linear-gradient(91.85deg, #863FA6 0%, #0077B6 0.01%, #009CEE 100%);
}
article .linkedin,
article .whatsapp{
    padding: 0.8rem 1.6rem;
}


.sidebar-single__box{
    padding: 2.9rem 1.6rem;
    
}
.sidebar__title{
    font-size: 1.6rem;
    position: relative;
    padding-right: 1.3rem;
    font-weight: 700;
    font-family: "r-ultra-font-bold";

   
}
.sidebar__title::before{
    content: "";
    background-color: var(--third-text-color);
    position: absolute;
    width: 0.5rem;
    height: 0.5rem;
    top: 45%;
    right: 0%;
    transform: translate(0, -50%);
}

.sidebar__head{
    margin-bottom: 1.6rem;
    padding-bottom: 1.6rem;
    border-bottom: 1px solid var(--border-color);

}

.table-contents li a{
    color: var(--g80);
    font-size: 1.4rem;
    margin-bottom: 0.8rem;
    display: block;
}
.post__description *{
    font-size: 1.6rem;
    color: var(--primary-tx-color);
    line-height: 1.9;
}
.post__description h1,
.post__description h2,
.post__description h3,
.post__description h4{
    color: var(--secondary-tx-color);
    font-size: 1.8rem;
    font-family: "font-semi-bold";
    margin-bottom: 1rem;

}
.post__description ul:not(:last-child),
.post__description p:not(:last-child){
    margin-bottom: 1rem;
}
.post__description a{
    color: var(--primary-color);
}


.rotate-btn{
    transform: rotate(-90deg);
}
.comments__wrapper textarea{
    height: 120px;
}

.comments__list{
    max-height: 370.5px;
    overflow: hidden;
    position: relative;
    overflow-y: auto;
}

.comments__list img{
    border-radius: 50%;
}

.comments__list li:not(:last-child){
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 2.3rem;
    padding-bottom: 2.3rem;
}


/******************product categories**********************/
.primary-categories .swiper-button-prev:after,
.primary-categories .swiper-button-next:after{
    content:"";
}
.primary-categories .swiper-button-prev,
.primary-categories .swiper-button-next{
    border-radius: 22px;
    opacity: 1!important;
    width: 38px;
    height: 38px;
    top: 57%;
    background: #fafafa;
}

.primary-categories .swiper-button-next{
    border-right: 1px solid var(--border-color);
    left: -20px;
    right: auto;
}

.primary-categories .swiper-button-prev{
    border-left: 1px solid var(--border-color);
    right: -20px;
    left: auto;
}    
.primary-categories .swiper-button-disabled svg path{
    stroke: var(--g80);
}

.product-table-archive .primary2-btn{
    padding: 0.8rem 1.6rem;
}

.product-table-archive .product-update{
    background-color: #F6F6F6;
    padding: 0.8rem 1.2rem;
}

/* .product-table-archive > table > tbody > tr:nth-child(even){
    background-color: red;

} */
.product-table  table tbody tr:nth-child(even){
    background-color: #fcfcfc;
}

.accordion .Intersection-layer{
    top: 0;
    right: 0;
    filter: opacity(0.4);
}
.accordion-button.collapsed svg path{
    stroke: var(--g900);
}
.accordion-button svg path{
    stroke: #fff;
}
.accordion-button.collapsed svg{
    transform: rotate(0);
} 
.accordion-button svg {
    transform: rotate(90deg);
    transition: all 0.3s ease-in-out;
}

.category-desc .category-desc__wrapper{
    height: 65rem;
    overflow: auto;
    color: var(--secondary-tx-color) !important;
    padding: 1.6rem;
}

.sidebar__filter .filter-wrapper button{
    border-bottom: 1px solid var(--border-color);
}

.sidebar__filter .filter-wrapper .filter-inner {
    padding: 2.4rem;
    max-height: 0;
    transition: 0.3s ease-in-out;
    display: none;
    overflow-y: auto;
}

.show-filter {
    max-height: 200px !important;
    display: block !important;
}

.checkbox-box {
    display: block;
    position: relative;
    padding-right: 2.2rem;
    margin-bottom: 1.6rem;
    cursor: pointer;
    font-size: 1.4rem;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
	font-family: "font-semi-bold";
}

.checkbox-box input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.checkmark {
    position: absolute;
    top: 2px;
    right: 0;
    height: 16px;
    width: 16px;
    background-color: #ECECEC;
    border: 1px solid #E0E0E0;
    border-radius: 4px;
}





.tax-added input[type=checkbox]{
	height: 0;
	width: 0;
	visibility: hidden;
}

.tax-added label {
	cursor: pointer;
	text-indent: -9999px;
	width: 40px;
	height: 24px;
    background: rgba(120, 120, 128, 0.16);
	display: block;
	border-radius: 100px;
	position: relative;
}

.tax-added label:after {
	content: '';
	position: absolute;
	top: 2px;
	left: 2px;
	width: 20px;
	height: 20px;
	background: #fff;
	border-radius: 90px;
	transition: 0.3s;
}

.tax-added input:checked + label {
	background: #0d6efd;
}

.tax-added input:checked + label:after {
	left: calc(100% - 2px);
	transform: translateX(-100%);
}

.tax-added label:active:after {
	width: 26px;
}

/**************video**************/

.video-container video {
    border-radius: 1.6rem;
    width: 100%;
    height: auto;
}
.video-container button {
    height: 97%;
    position: absolute;
    top: 49%;
    right: 50%;
    transform: translate(50%, -50%);
    z-index: 0;
    border-radius: 1.6rem;
    background: rgba(0, 0, 0, 0.14);
    backdrop-filter: blur(10px);
}



/******************checkbox toggle*********************/
.toggle-checkbox{
    width: 14.2857%;
    flex: 0 0 auto;
} 
 .toggle-checkbox .checkbox {display: none;}
 .toggle-checkbox .label-btn {
    display: block;
    color: var(--g900);
    font-size: 1.4rem;
    text-align: center;
    height: 5.6rem;
    line-height: 5.6rem;
    background-color: #ececec;
    width: 100%;
    cursor: pointer;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;

  }

  /*state change*/
.toggle-checkbox .checkbox:checked + .label-btn {
    color: #fff;
    background-color: var(--primary-color);
  }

  
/*****************search box**********************/

.contact-form .search-spinner{
    width: 100%;
    background-color: rgba(0,0,0,0.3);
    position: fixed;
    right: 0;
    top: 0;
    height: 100vh;
    z-index: 99;
}
.search-spinner img{
    position: absolute;
    top: 50%;
    right: 50%;
    transform: translate(50%,-50%);
}


.search__box{
    background: #fafafacc;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    position: fixed;
    left: 0;
    top: 0;
    height: 100vh;
    z-index: 99;
    padding-top: 30rem;
    z-index: 1031;
    opacity: 0;
    visibility: hidden;
    transition: all .8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    width: 0;
}

#search__field::placeholder { 
    color: var(--g80);
    font-size: 1.2rem;
  }
  
  #search__field:-ms-input-placeholder { 
    color:  #C4C4C4;
    font-size: 1.2rem;
}

#search__field::-ms-input-placeholder { 
    color:  #C4C4C4;  
    font-size: 1.2rem;
}
.search__box__toggle{
    opacity: 1 !important;
    visibility: visible !important;
    width: 100% !important;
}
.search__box svg{
    vertical-align: middle;
}
.search-btn{
    height: 5.4rem;
    margin-left: -4rem;
    width: 3.5rem;
}
.search__box input{
    width: 40rem;
    color: var(--g900);
    font-size: 1.6rem;
    padding: 2px 4.3rem 2px 10px;

}
.close-box{
    position: absolute;
    left: 2%;
    top: 4%;
}
.search__result{
    width: 60rem;
    height: 32rem;
    position: absolute;
    right: 62px;
    top: 8.3%;
    background-color: #fafafa;
    padding: 2rem 1.5rem;

}
.search__result svg{
    margin-left: 0.8rem;
}
.search__result ul li:not(:last-child){
    border-bottom: 1px solid var(--border-color);

}
.search__result ul li a{
    padding: 1rem 0;
}
.search__result ul li span{
    font-size: 1.4rem;
}

.error-display{

}

.success-display{
    color: #149414;
}


/******************chart********************/
.chart-wrapper .chart-time{
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    padding: 1.2rem 2.4rem;
}

.chart-btn svg{
    pointer-events: none;
}

.chart-wrapper .chart-spinner{
    position: absolute;
    top: 0;
    right: 50%;
    transform: translate(50%,0);
}

.chart-wrapper .primary-btn{
    color: #fff !important;
}





.product-table__sm > table > thead > tr > th,
.product-table__sm > table > tbody > tr > td {
    padding: 0 1.6rem;
}

.product-table__sm .show-product svg{
    transition: all 0.3s ease-in-out;
}
.product-table__sm .show-product:not(.collapsed) svg{
    transform: rotate(180deg);
}



/*************************background wave***************************/
.wave-placeholder{
    background: -o-linear-gradient(320deg, #cacaca, #e1e1e1, #e7e7e7);
    background: linear-gradient(130deg, #cacaca, #e1e1e1, #e7e7e7);
    background-size: 400% 400%;
    animation: gradient 1.2s ease infinite;
    -webkit-animation: gradient 1.2s ease infinite;
    display: block;
    border-radius: 0.2rem;
}

.products-category .product-table__body h3 span.wave-placeholder{
    width: 85%;
    height: 92.5%;
} 
.products-category .prduct-table__body-head ul.wave-placeholder {
    max-width: 27rem;
    width: 100%;
    height: 3.5rem;
}
.products .prduct-table__body-head span.wave-placeholder{
    max-width: 27rem;
    width: 20rem;
    height: 3.5rem;
}
.swiper .product-table .product-table__body h3 span.wave-placeholder {
    width: 85%;
    height: 75%;
    margin-top: 2rem;
}
.product-table .product-table__body table td,
.product-table .product-table__body table th{
    display: table-cell;
}

@-webkit-keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}