* {
    margin: 0px;
    padding: 0px;
    font-family: 'poppins';
    box-sizing: border-box;
    scroll-behavior: smooth;
}

a {
    text-decoration: none;
}

ul {
    list-style: none;
}
body{
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    width: 100%;
    background-color: #f5f5f5;
}
#main-body{
    overflow-x: hidden;
}
.fixedbody{
    display: flex;
    flex-direction: column;
}

:root {
    --logo-icon-color: #060606;
    --logo-text-color: #060606;
    --dark-logo-icon-color: #ffffff;
    --dark-logo-text-color: #ffffff;
    --heading-color: #060606;
    --paragraph-color: #5d5d5d;
    --main-color: #000000;
    --second-main-color: #c80c24;
    --third-main-color: #FAF0E6;
    --light-main-color: #ffb9c2;
    --border-color: #eeeeee;
    --bg-color: #ffffff;
    --footer-bg-color: #1f1f1f;
    --product-section-bg-color: #1f1f1f;

}

/*==Header=====================================*/
header{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    background-color: #ffffff;
    position: relative;
}
/*==Header-top=================================*/
.header-top{
    width: 100%;
    background-color: #000000;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 6px 0px;
}
.header-top-content{
    width: 90%;
    max-width: 1600px;
    padding: 10px 0px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.header-top .header-links{
    display: flex;
    justify-content: center;
    align-items: center;
}
.header-top .header-links li a{
    margin-right: 20px;
    font-size: 0.9rem;
    color: #474747;
    transition: all ease 0.3s;
}
.header-top .header-links li a:hover{
    color: var(--main-color);
}
.header-top .header-track-order{
    font-size: 0.8rem;
    color: #474747;
    background-color: #f3f3f3;
    padding: 4px 20px;
    border-radius: 10px;
}
.header-top .header-track-order i{
    margin-right: 4px;
    color: #f10202;
}
/*==header-main========================*/
.header-main{
    display: flex;
    justify-content: space-between;
    align-items: center;
    grid-gap: 30px;
    max-width: 1600px;
    width: 90%;
    padding: 20px 0px;
}
.header-main .logo strong{
    font-size: 1.4rem;
    letter-spacing: 3px;
    color: var(--heading-color) !important;
    font-weight: 400;
    text-transform: uppercase;
}
.header-main .logo i{
    color: #d80c0c;
    font-size: 1.4rem;
    margin-right: 10px;
}
.logo img{
    max-height: 75px;
}
.header-container{
    background-color: #ffffff;
    height: 180px;
    width: 100%;
    position: relative;
    padding: 0px 10px 20px 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: searchanimation 0.6s;
}
.header-search{
    height: 80%;
    border-bottom: 1px solid #696969;
    width: 80%;
    max-width: 1400px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #ffffff;
    position: relative;
}
.header-search i{
    margin: 0px 20px;
    color: #333333;
}
.header-search input{
    width: 100%;
    height: 100%;
    outline: none;
    border: none;
    font-size: 2.8rem;
    color: #000000;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.header-search input::placeholder{
    color: #2c2c2c !important;
    opacity: 1;
}
.header-search button{
    width: 180px;
    height: 100%;
    outline: none;
    border: none;
    font-weight: 600;
    color: #ffffff;
    background-color: transparent;
    cursor: pointer;
    border-radius: 5px;
    font-size: 2rem;
}
.header-search button i{
    color: #272727;
}
.header-u-w-c{
    display: flex;
    justify-content: center;
    align-items: center;
    grid-gap: 15px;
}
.header-u-w-c a{
    color: #333333;
    position: relative;
    font-size: 1.2rem;
}
.header-u-w-c a span{
    width: 15px;
    height: 15px;
    font-size: 0.6rem;
    font-weight: 700;
    color: #ffffff;
    background-color: #d80c0c;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    right:-8px;
    top: -5px;
}
.search-container{
    display: none !important;
}
#searchshow:checked ~ .search-container{
    display: flex !important;
}
#searchshow:checked ~ #header{
    margin-top: 180px;
    animation: headeranimation 0.6s;
}
@keyframes searchanimation{
    0%{
        height: 0px;
    }
    100%{
        height: 180px;
    }
}

@keyframes headeranimation{
    0%{
        margin-top: 0px;
    }
    100%{
        margin-top: 180px;
    }
}
#searchshow{
    display: none;
}
.close-btn-search{
    position: absolute;
    right: 50px;
    top: 30px;
    background-color: #c4c4c4;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    font-size: 1.8rem;
    cursor: pointer;
    z-index: 10;
}
.close-btn-search i{
    margin-bottom: -2px;
    color: #fff6fb;
}
@media(max-width:1110px){
    .close-btn-search{
        right: 70px;
    }
}

/*==nav-bar=============================*/
.navigation{
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1600px;
    width: 90%;
    margin: auto;
    padding: 20px 0px;
    background-color: #ffffff;
    border-bottom: 1px solid #e2e2e26e;
    z-index: 90;
    position: relative;
}
.logo{
    font-size: 1.8rem;
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: 1px;
    color: #222222;
}
.logo img{
    max-width: 180px;
    max-height: 75px;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    object-fit: contain;
    object-position: center;
}
.menu{
    display: flex;
    align-items: center;
}
.menu li a,
.menu li label{
    margin-left:42px;
    color: #1d1d1d;
    letter-spacing: 0.5px;
    font-weight: 450;
    transition: all ease 0.3s;
    font-size: 1.063rem;
    cursor: pointer;
} 
.menu li label i{
    margin-left: 3px;
}
.menu li a:hover,
.menu li label:hover{
    color: var(--second-main-color)  !important;
}
.nav-contact{
    background-color: #222222;
    color: #ffffff;
    padding: 10px 30px;
    border-radius: 20px;
    letter-spacing: 1px;
}
.drop-collections{
    position: fixed;
    left: 0px;
    transform: translateX(0%);
    top: 178px;
    background-color: #ffffff;
    z-index: 101;
    width: 100%;
    width: 100%;
    padding: 20px;
    border-radius: 0px 0px 10px 10px;
    display: none;
    padding-bottom: 50px;
}
.drop-collections-menu{
    max-width: 1200px;
    margin: auto;
    margin-top: 40px;
}
#header.fixed .drop-collections{
    top: 100px;
}

.nav-drop-down{
    position: relative;
}
#header.fixed .header-top{
    display: none ;
}
#header.fixed{
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    z-index: 100;
    box-shadow: 2px 2px 16px rgba(0, 0, 0, 0.05);
    animation: navanimation 0.6s;
    border-top: 1px solid #f1f1f1;
}
#header.fixed nav{
    border-bottom: none;
}
@keyframes navanimation{
    0%{
        top: -100%;
    }
    100%{
        top: 0px;
    }
}
@keyframes navanimation2{
    0%{
        top: -100%;
    }
    100%{
        top: 100px;
    }
}
@media(min-width:1000px){
nav:after{
    content: '';
    position: absolute;
    left: 0px;
    top: 100%;
    background-color: #f3f3f3;
    width: 100%;
    height: 1px;
    z-index: 102;
    
}
.nav-drop-down:hover .drop-collections{
    display: block;
    animation: none !important;
}
.product-bg{
    display: none;
}
#show-drop-collections:checked ~ .product-bg{
    display: block;
}
#header.fixed .product-bg{
    border-top: 1px solid #f3f3f3;
}

.drop-collections{
    max-height: 60vh;
    overflow-y: auto;
}
}
.drop-collections-menu{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 35px;
}
.drop-box-img{
    height: 100px;
}
.drop-box-img img{
    height: 100%;
    object-fit: contain;
}
.nav-drop-box{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    transition: all ease 0.3s;
    border: 1px solid #ebebeb;
    padding: 20px;
    margin-left: 0px !important;
}
.nav-drop-box:hover{
    opacity: 0.8;
}
.drop-collections-heading{
    color: #333036;
    font-weight: 600;
    text-align: center;
    font-size: 1.8rem;
    margin-bottom: 10px;
    display: flex;
    justify-content: center;
    width: 100%;
    margin: auto;
    margin-bottom: 30px;
    margin-top: 30px;
    text-transform: uppercase;
}
#show-drop-collections:checked ~ nav .menu-container .menu li .drop-collections{
    display: block !important;}
#show-drop-collections:checked  ~ nav .menu-container .menu li label {
    color: var(--second-main-color) !important;
}
/*==making-responsive============*/
.menu-icon,
.menu-btn,
.language-dropdown-container-mobile{
    display: none;
}
#show-drop-collections{
    display: none;
}
.show-drop-collections label{
    margin-left: 0px !important;
}
.close-bg{
    display: none;
}
@media(max-width:1075px){
    .header-top{
        z-index: 100;
    }
    .language-dropdown-container{
        grid-column: 1/2;
        grid-row: 1/2;
    }
    .language-dropdown-container label{
        margin-left: 0px !important;
    }
    .logo{
        grid-column: 2/3;
        grid-row: 1/2;
    }
    .navigation .menu-icon{
        grid-column: 3/4;
        margin-left: auto;
    }
    .close-bg{
        position: fixed;
        left: 0px;
        top: 0px;
        width: 100%;
        height: 100%;
        background-color: #00000028;
        z-index: -1;
    }
    .navigation{
        display: grid !important;
        grid-template-columns: 78px 1fr 78px;
        padding: 15px 20px;
        position: relative;
        width: 100%;
        background-color: #ffffff;
        position: relative;
    }
    .navigation::after{
        content: '';
        position: absolute;
        left: 0px;
        top: 0px;
        width: 100%;
        height: 100%;
        z-index: -1;
        background-color: #ffffff;
    }
    .logo{
        margin: 0px auto;
    }
    .language-dropdown-container-mobile{
        display: block;
    }
    .show-drop-collections label{
        position: absolute;
        right: 20px;
    }
    .drop-collections{
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: calc(100% + 4px);
        background-color: #ffffff;
        z-index: 101;
        width: 100%;
        width: 850px;
        padding: 20px;
        border-radius: 0px 0px 10px 10px;
        display: none;
    }
    .language-dropdown-container2{
        display: none;
    }
    .logo img{
        max-height: 45px;}
    .menu-container{
        display: none;
        flex-direction: column;
        position: absolute;
        left: 0px;
        top:calc(100% + 1px);
        width: 100%;
        max-height: calc(100vh - 150px);
        overflow-y: auto;
        box-shadow: 2px 22px 30px rgba(0, 0, 0, 0.05);
    }
    #header .menu-container{
        top: calc(100%);
        border-top: 1px solid #f0f0f0;
    }
    .navigation .menu{
        display: block;
        background-color: #ffffff;
        width: 100%;
        padding: 0px;
        margin: 0px;
        box-shadow: 2px 30px 30px rgba(0,0,0,0.05);
        overflow-y: auto;
    }
    .navigation .menu li{
        width:100%;
        margin: 0px;
        padding: 0px;
    }
    .navigation .menu li a,
    .navigation .menu li .show-drop-collections{
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0px;
        padding: 20px;
        border-bottom: 1px solid #e2e2e26e;
    }
    .navigation .menu li .show-drop-collections a{
        border: none;
        padding: 0px;
    }
    .drop-collections{
        position: static;
        transform: translateX(0%);
        top: 0px;
        background-color:transparent;
        width: 100%;
        border-radius: 0px;
    }
  
    #show-drop-collections:checked ~ nav .menu-container .menu li .drop-collections{
        display: block !important;}

    .drop-collections-heading{
        margin-top: 10px;
        margin-bottom: 10px;
    }
    .menu-icon{
        display: block !important;
    }
    .navigation .menu-icon{
        cursor: pointer;
        float: right;
        padding: 10px 0px;
        position: relative;
        user-select: none;
        z-index: 106;
        /* position: absolute; */
        /* left: 25px; */
        /* top: 50%; */
        /* transform: translateY(-50%); */
    }
    .navigation .menu-icon .nav-icon{
        background-color: #181818;
        display: block;
        position: relative;
        height: 2px;
        transition: background 0.2s ease-out;
        width: 25px;
    }
    .navigation .menu-icon .nav-icon::before,
    .navigation .menu-icon .nav-icon::after{
        background-color: #181818;
        content: '';
        position: absolute;
        height: 100%;
        transition: all ease-out 0.2s;
        width: 100%;
    }

    .navigation .menu-icon .nav-icon::before{
        top: 9px;
    }
    .navigation .menu-icon .nav-icon::after{
        top: -9px;
    }
    .navigation .menu-icon:checked ~ .menu-icon .nav-icon,
    .navigation .menu-btn:checked ~ .menu-icon .nav-icon{
        background-color: transparent;
    }
    .navigation .menu-btn:checked ~ .close-bg{
        display: block;
    }
    .navigation .menu-btn:checked ~ .menu-icon .nav-icon::before{
        transform: rotate(-45deg);
        top: 0px;
    }
    .navigation .menu-btn:checked ~ .menu-icon .nav-icon::after{
        transform: rotate(45deg);
        top: 0px;
    }
 
    .navigation .menu-btn:checked ~ .menu-container{
        display: flex;
    }
    
}
@media(max-width:724px){
    .drop-collections-menu{
        grid-template-columns: 1fr 1fr;
    }
    .drop-box-text{
        text-align: center;
    }
    .drop-collections-heading{
        font-size: 1.2rem;
    }
}
@media(max-width:620px){
    .nav-contact{
        font-size: 0.9rem;
        padding: 10px 20px;
    }
}
@media(max-width:420px){
    .drop-collections-menu{
        grid-template-columns: 1fr;
    }
}
@media(max-width:333px){
    .nav-contact{
        display: none;
    }
}
/*==main============================*/
.content-container {
    max-width: 1600px;
    width: 90%;
    margin: 20px auto;
    margin-bottom: 40px;
}
.home-banner .content-container {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0px !important;
}

.home-sections {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 0px auto;
}

.home-sections_m {
    margin-top: 70px;
}

.home-sections h3,
.faqs h3 {
    color: var(--heading-color);
    font-weight: 600;
    font-size: 1.1rem;
    letter-spacing: 0.3px;
}

.main-heading-container {
    display: flex;
    align-items: center;
    padding: 10px 0px;
    border-radius: 5px;
}

.main-heading-container h3 b {
    text-decoration: underline;
    font-weight: 500;
}

.main-heading-container svg {
    margin-right: 10px;
    height: 20px;
}

.home-sections h4 {
    color: var(--heading-color);
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: 0.3px;
    background-color: #f5f5f5;
    padding: 10px 15px;
    border-radius: 5px;
    border: 1px solid #eeeeee;
}

.icons-box-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-gap: 30px;
    margin-top: 30px;
}

.icons-box-container.icons-box-container-product {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    margin-top: 20px;
}

.icon-box {
    background-color: #f6f6f6;
    overflow: hidden;
    transition: all ease 0.3s;
    padding: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.icon-box img {
    max-height: 80px;
}

.icon-box:hover {
    background-color: #e9e9e9;
}

.icon-box a {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px;
}

.icon-box img,
.icon-box svg {
    width: 90%;
    height: 70%;
    object-fit: contain;
    object-position: center;
}

@media(max-width:1500px) {
    .icon-box {
        padding: 20px;
    }
}

@media(max-width:1050px) {

    .icons-box-container,
    .icons-box-container.icons-box-container-product {
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    }
}

@media(max-width:600px) {
    .icons-box-container {
        grid-gap: 20px;
    }

    .icon-box {
        padding: 20px;
    }
    .icon-box img,
    .icon-box svg {
    height: 100%;
    width: 100%;}
}

@media(max-width:500px) {

    .icons-box-container,
    .icons-box-container.icons-box-container-product {
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }
}

@media(max-width:324px) {

    .icons-box-container,
    .icons-box-container.icons-box-container-product {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

@media(max-width:262px) {

    .icons-box-container,
    .icons-box-container.icons-box-container-product {
        grid-template-columns: 1fr 1fr;
    }
    .icon-box img,
    .icon-box svg {
    height: 80%;
    width: 80%;}
}

/*==ads=============================*/
.ads {
    width: 100%;
    height: 100%;
    min-height: 50px;
    margin: 20px auto;
    height: 100%;
}

.ads img,
.ads a {
    width: 100%;
    object-fit: contain;
}

.header-ad {
    max-width: 1300px;
    width: 90%;
}

/*==scroll-up-btn===========================*/
.scroll-up {
    position: fixed;
    right: 20px;
    bottom: 20px;
    background-color: var(--second-main-color);
    width: 35px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    outline: none;
    border-radius: 4px;
    cursor: pointer;
}

.scroll-up.hide {
    display: none;
}

.scroll-up.show {
    display: flex;
}

#nav-open-btn,
.menu-icon {
    display: none;
}

@media(max-width:900px) {
    .top-nav {
        position: absolute;
        left: 0px;
        top: calc(100% + 1px);
        width: 100%;
        flex-direction: column;
        display: none;
    }
    .header-menu-container{
        background-color: #f5f5f5;
        width: 100%;
        margin: auto;
        padding: 0px !important;
    }

    .color-svg-picker-box {
        width: 100%;
        border-radius: 0px;
    }

    header,
    #header.fixed {
        padding: 0px 0px;
    }

    .navigation {
        margin-top: 0px;
    }

    header nav {
        width: 100%;
    }
    .search-container{
        width: 100%;
        overflow: hidden;
    }
    .close-btn-search{
        display: none;
    }
    .header-search button{
        font-size: 1.1rem;
        width: auto;
    }

    .header-search{
        width: 90%;
    }
    .header-search input{
        font-size: 1.2rem;
    }
    .header-container{
        height: 80px;
    }

    
@keyframes searchanimation{
    0%{
        height: 0px;
    }
    100%{
        height: 80px;
    }
}

@keyframes headeranimation{
    0%{
        margin-top: 0px;
    }
    100%{
        margin-top: 80px;
    }
}

#searchshow:checked ~ #header{
    margin-top: 80px;
}

    .navigation .logo strong {
        display: none;
    }

    .menu-icon {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        font-weight: 800;
        cursor: pointer;
    }

    .menu li:first-child a {
        border-bottom: 1px solid var(--border-color);
    }

    .menu li a {
        padding: 15px 10px;
        margin: 0px;
        display: flex;
        width: 100%;
        border-bottom: 1px solid var(--border-color);
    }
    .home-main .menu {
        background-color: var(--product-section-bg-color);
    }
    .home-main .menu li a,
    .home-main .menu li:first-child a{
        border-bottom: 1px solid #333333;
    }
    .home-main .menu-icon {
        color: #ffffff;
    }
    #header.fixed .menu-icon{
        color: #000000;
    }
    #nav-open-btn:checked~nav .top-nav {
        display: flex;
    }

}


@media(max-width:450px) {
    .search-left span {
        display: none;
    }

    .search-container {
        grid-template-columns: 30px 1fr;
    }
}

/*==product-page============================*/
#main_product {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: var(--product-section-bg-color);
    padding: 70px 0px;
}

.main_product_container {
    max-width: 1600px;
    width: 90%;
}

.main_product_container {
    display: grid;
    grid-template-columns: 1fr 500px;
    grid-gap: 50px;
}

.main_product_box_container {
    background-color: #ffffff;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 30px;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 2px 2px 30px rgba(0, 0, 0, 0.94);
    position: relative;
}

.main_product_box_img {
    width: 100%;
    height: 100%;
    max-height: 250px;
    margin: 20px 0px;
}

.main_product_box_img img,
.main_product_box_img svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

.main_product_detail {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.main_product_detail h1 {
    color: #ffffff;
    font-weight: 700;
    font-size: 1.5rem;
}

.main_product_detail p {
    color: #989898;
    margin-top: 10px;
    letter-spacing: 0.4px;
}

.main-product-share-btns {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: auto;
}

.main-product-share-btns span {
    font-weight: 500;
    color: #2e2e2e;
    margin-right: 20px;
}

.main-product-share-btns a {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background-color: #f5f5f5;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 8px;
}

.main_product_detail_code {
    position: relative;
}

.main_product_detail_code span {
    position: absolute;
    right: -20px;
    top: 40px;
    width: 40px;
    height: 40px;
    background-color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    box-shadow: 2px 2px 30px rgba(255, 255, 255, 0.112);
    cursor: pointer;
}

.main_product_detail pre {
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow: auto;
    font-family: 'Courier New', monospace;
    background-color: #242427;
    padding: 10px;
    border: 1px solid #3e3e3e;
    padding: 10px 20px;
    border-radius: 10px;
    margin-top: 20px;
    text-align: start;
    color: #3af18c;
    font-size: 0.9rem;
}

.main_product_detail_code pre code {
    word-break: break-all;
}

.main_product_detail_download_btn {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 10px;
    margin-top: 20px;
}

.main_product_detail_download_btn a {
    width: 100%;
    height: 45px;
    background-color: #30f565;
    color: #333036;
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 4px;
    overflow: hidden;
}

.main_product_detail_download_btn a span {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.main_product_detail_download_btn a svg {
    width: 50px;
    height: 100%;
    padding: 15px;
    border-left: 1px solid #eaeaea;
}

.main_product_detail_download_btn a:nth-child(1) {
    background-color: #ffffff;
}

.main_product_detail_download_btn a:nth-child(2) svg {
    border-left: 1px solid #00000038;
}

@media(max-width:1024px) {
    .main_product_container {
        grid-template-columns: 1fr;
    }
}

@media(max-width:500px) {
    .main_product_detail_download_btn {
        grid-template-columns: 1fr;
    }

    .main_product_detail_code span {
        right: -9px;
        top: -4px;
    }
}

.product-details-content {
    display: flex;
    flex-direction: column;
    border-radius: 5px;
}

.product-details-content h2,
.product-details-content h3{
    color: var(--heading-color);
    font-size: 1rem;
    font-weight: 600;
    background-color: #f9f9f9;
    border-radius: 5px;
    border: 1px solid #e2e2e2;
    padding: 10px 20px;
    border-radius: 5px;
    width: 100%;
    margin: 10px 0px;
}

.product-details-content h4 {
    color: var(--heading-color);
    font-size: 1rem;
    font-weight: 600;
    border-radius: 5px;
    border-radius: 5px;
    width: 100%;
    margin-bottom: 10px;
}

.product-details-content p {
    color: #454545;
    margin: 10px 0px;
}

.product-details-content strong {
    color: #373737;
    margin-top: 5px;
    margin-bottom: 20px;
    font-weight: 600;
}

.product-details-content ul {
    list-style: inside;
}

.product-details-content ul li {
    color: #454545;
}

.product-details-content {
    margin: 0px 0px 0px;
}

.faqs {
    margin-top: 0px;
    display: flex;
    flex-direction: column;
}

.faqs h3 {
    margin-bottom: 20px;
    background-color: #f9f9f9;
    padding: 10px 20px;
    border-radius: 5px;
    border: 1px solid #e2e2e2;
}

.faqs .faq-box {
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    padding: 10px 0px;
    border-radius: 5px;
    border-bottom: 1px solid #e4e4e4;
    margin-bottom: 10px;
}

.faqs .faq-box .faq-question strong {
    color: #2a2a2a;
    font-size: 1rem;
    font-weight: 600;
}

.faqs .faq-box .faq-answer p {
    color: #545454;
    margin-top: 10px;
}

.sp-replacer {
    width: 60% !important;
    min-width: 100px;
    height: 45px !important;
    z-index: 100 !important;
    background-color: transparent !important;
    border-radius: 6px;
    border: 1px solid #ebebeb !important;
    display: flex;
    justify-content: center;
    align-items: center;
}

.sp-preview {
    border-radius: 4px;
    overflow: hidden !important;
    width: calc(100% - 15px) !important;
    height: 35px !important;
}

/* .sp-dd {
    display: none !important;
} */

#colorPicker {
    display: none !important;
}

.main_product_container_popup {
    position: fixed !important;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    height: auto;
    max-height: 70vh;
    background-color: rgb(255, 255, 255);
    box-shadow: none;
    padding: 40px;
    z-index: 10002;
    border-radius: 10px;
    overflow-y: auto;
    display: none;
}

.main_product_container_popup .main_product_box_container {
    box-shadow: none;
    background-color: #f2f2f2;
}

.blur-bg-popup {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background-color: #000000b6;
    z-index: 10001;
    backdrop-filter: blur(2px);
    display: none;
}

.main_product_container_popup .main_product_detail_download_btn a:nth-child(1) {
    background-color: #f2f2f2 !important;
    border: 1px solid #e4e4e4;
}

.main_product_detail_color_container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-top: 5px;
}

.main_product_detail_color_picker {
    width: 100%;
}


.main_product_detail_color_container strong {
    color: #242427;
    font-size: 1rem;
    font-weight: 600;
    word-break: keep-all;
    white-space: nowrap;
    margin-right: 20px;
}

.main_product_container_popup .main_product_detail_code span {
    background-color: #eaeaea;
}

.main_product_detail h3 {
    font-size: 1.5rem;
    margin-bottom: 10px;
}

@media(max-width:600px) {
    .main_product_container_popup {
        padding: 20px;
    }
}

@media(max-width:400px) {
    .main_product_container_popup {
        padding: 20px;
    }

    .main_product_detail_color_container {
        flex-direction: column;
        align-items: flex-start;
        margin-top: 20px;
    }

    .sp-replacer {
        width: 100% !important;
        margin-top: 5px !important;
    }
}

#open_change_popup:checked~.blur-bg-popup,
#open_change_popup:checked~.main_product_container_popup {
    display: flex;
}

#open_change_popup {
    display: none;
}

.close-change-popup {
    position: absolute;
    right: 20px;
    top: 20px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #e6e6e6;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.color-edit-btn {
    position: absolute;
    right: 20px;
    top: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f7f6ff;
    padding: 5px 15px;
    border-radius: 5px;
    cursor: pointer;
    border: 1px solid #e1e9fd;
}

.color-edit-btn span {
    font-size: 0.9rem;
    white-space: nowrap;
    font-weight: 500;
    color: #353535;
    letter-spacing: 0.4px;
    cursor: pointer;
}

.color-edit-btn svg {
    height: 20px !important;
    margin-right: 10px;
    fill: #0d0d0d;
}

@media(max-width:1000px) {
    .main_product_container_popup {
        flex-direction: column !important;
    }

    .close-change-popup {
        z-index: 1;
        right: 10px;
        top: 10px;
    }

    .main_product_detail_color_container svg {
        height: 20px;
    }

    .main_product_box_container {
        overflow: unset;
        height: 100%;
    }
}

.search-not-found span {
    color: #f53030;
    font-size: 1rem;
}

/*==Static-page======================*/
.static-page {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    width: 100%;
    max-width: 1600px;
    margin: auto;
}

.static-container {
    width: 100%;
    border-radius: 5px;
}
.static-title h1 {
    font-size: 2rem;
    line-height: 2rem;
    color: #0f1012;
    font-weight: 500;
}

.static-content {
    background-color: #ffffff;
    padding: 10px 20px;
    border: 1px solid #e2e2e2;
    border-radius: 10px;
    margin-top: 20px;
}

.static-page-title-label {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--second-main-color);
}

.static-content h2,
.static-content h3,
.static-content h4,
.static-content h5,
.static-content h6 {
    font-size: 1.4rem;
    color: #1f1f1f;
    font-weight: 500;
}
.static-content strong{
    color: #1a1a1a;
}
.static-content p {
    color: #525252;
    margin: 10px 0px;
}
.static-content a{
    color: var(--second-main-color);
}
.static-content a:hover{
    text-decoration: underline;
}
.static-content blockquote{
    font-size: 1rem;
    padding-left: 20px;
    border-left: 4px solid #eeeeee;
}

.static-content ul {
    list-style: square;
    padding: 0px 30px;
}

.static-content img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.main-img-news{
    max-height: 550px !important;
    border-radius: 20px;
}
.static-content table,
.static-content th,
.static-content td{
    border: 1px solid #000;
}
.static-content table{
    width: 100%;
    margin: 30px 0px;
}

@media(max-width:600px) {

    .static-title h1 {
        font-size: 1.2rem;
        line-height: 1.8rem;
    }

    .static-container {
        padding: 0px;
        width: 100%;
    }

}

.search-not-found {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.search-not-found svg {
    /* background-color: #f8faff; */
    border-radius: 50%;
    margin-bottom: 40px;
    max-height: 500px;
    max-width: 500px;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.search-not-found span {
    font-size: 1.2rem;
    text-align: center;
}

/*==hero-section===================================*/
#search-banner {
    height: 250px;
    border-radius: 10px 10px 0px 0px;
    background-color: var(--main-color);
    margin: 10px auto;
    margin-bottom: 0px;
    margin-top: 0px;
    position: relative;
    overflow: hidden;
    padding: 20px;
    display: flex;
    align-items: center;
    width: 100%;
}

#search-banner::before {
    content: '';
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(4, 21, 73, 0.7) 0%, rgba(5, 54, 79, 0) 100%);
    z-index: 1;
}

.bg-1 {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.search-banner-text {
    display: flex;
    flex-direction: column;
    width: 500px;
    margin-left: 70px;
    position: relative;
    z-index: 2;
}

.search-banner-text h1 {
    font-size: 2.5rem;
    line-height: 55px;
    color: #ffffff;
}

.search-banner-text strong {
    color: var(--main);
    font-size: 1.2rem;
    margin-top: 4px;
}

.search-banner-text p {
    color: var(--paragraph-color);
    margin: 20px 0px;
    font-weight: 500;
}

.search-banner-text a {
    max-width: 180px;
    width: 100%;
    height: 50px;
    color: #ffffff;
    background-color: var(--main);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 30px;
    font-weight: 500;
    margin-top: 30px;
}

.search-banner-text a i {
    margin-left: 7px;
}

@media(max-width:750px) {

    .search-banner-text {
        margin-left: 20px;
    }

    .search-banner-text h1 {
        font-size: 2rem;
        line-height: 30px;
    }
}

@media(max-width:500px) {
    #search-banner {
        height: 150px;
        background-size: 300px;
        border-radius: 10px 10px 0px 0px;
    }

    .search-banner-text a {
        max-width: 100px;
        height: 40px;
        margin-top: 10px;
    }

    .search-banner-text {
        margin-left: 0px;
        max-width: 200px;
    }

    .search-banner-text h1 {
        font-size: 1.3rem;
    }
}

.nav-social {
    display: flex;
    justify-content: center;
    align-items: center;
}

.nav-social a {
    margin: 0px 10px;
    width: 30px;
    height: 30px;
    background-color: #f6f6f6;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.nav-social a svg {
    height: 15px;
}

.footer-social {
    margin: 10px 0px;
    margin-bottom: 20px;
}

.home-main {
    background-color: var(--product-section-bg-color);
    padding-bottom: 80px;
}


.home-main .menu li a {
    color: var(--heading-color);
}

.home-main .logo {
    margin-top: 10px;
}

.menu li a:hover,
.logo svg,
.logo strong {
    color: var(--main-color);
    fill: var(--main-color);
}
.menu li a.active{
    color: var(--second-main-color);
}

.home-main .navigation .search-container {
    display: none;
}

.home-main header {
    border: none;
}

.home-main-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 50px 0px;
}

.home-main-search.search-container {
    grid-template-columns: 120px 1fr;
    width: 90%;
    max-width: 900px;
    background-color: var(--bg-color);
    height: 70px;
    padding: 3px;
}

.home-main .search-box {
    grid-template-columns: 1fr 80px;
}

.home-main .search-box input::placeholder {
    color: #262626;
    opacity: 1;
}

.home-main .search-box button {
    background-color: #000000;
    font-size: 1.1rem;
}

.search-left {
    font-size: 20px;
}

.home-main-container h1 {
    font-size: 2.6rem;
    color: #ffffff;
    margin-bottom: 20px;
    font-weight: 600;
}

.home-main #header.fixed .menu li a {
    color: var(--paragraph-color);
}

.home-main #header.fixed .logo {
    margin-top: 0px;
}

.home-main #header.fixed .menu li a:hover,
.home-main #header.fixed .logo svg,
.home-main #header.fixed .logo strong {
    color: var(--heading-color);
    fill: var(--heading-color);
}

.home-main #header.fixed .navigation .search-container {
    display: grid;
}

.home-main #header.fixed {
    border: 1px solid var(--border-color);
}

#header.fixed .search-box {
    grid-template-columns: 1fr 40px;
}

.home-main-icons-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    padding-bottom: 50px;
    max-width: 1600px;
    width: 90%;
    margin: auto;
    grid-gap: 40px 20px;
}

.home-main-icons-container svg {
    width: 100%;
    max-height: 70px;
}

/*==icons group=================*/
.home-icons-group {
    background-color: #272829;
    padding: 20px 30px 30px 20px;
}

.home-icons-group-heading h3 {
    font-size: 1.2rem;
    font-weight: 500;
    color: var(--bg-color);
}

.icons-group-box-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 20px;
    margin-top: 30px;
}

.icons-group-box {
    width: 100%;
    height: 100%;
    max-height: 50px;
    border-radius: 4px;
    padding: 10px 0px;
}

.icons-group-box img {
    width: 100%;
    height: 100%;
    max-height: 50px;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

.home-icons-group-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 50px;
    margin-bottom:100px;
}


.home-icons-group-container .home-icons-group:nth-child(odd) {
    background-color: #f0f6ff;
}

.home-icons-group-container .home-icons-group:nth-child(odd) h3 {
    color: var(--heading-color);
}

.home-icons-group-container .home-icons-group:nth-child(odd) img {
    filter: brightness(0) invert(0);
}

.group-heading {
    font-weight: 600;
    font-size: 2rem;
    color: var(--heading-color);
    margin-bottom: 70px !important;
    margin-top: 130px !important;
    max-width: 800px;
    text-align: center;
    margin: auto;
    display: flex;
}
.product-like-heading a{
    color: var(--heading-color);
    font-size: 1rem;
}
.product-like-heading{
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f9f9f9;
    padding: 10px 20px;
    border-radius: 5px;
    border: 1px solid #e2e2e2;
}
.tags-container{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    margin: 18px 0px;
    margin-bottom: 30px;
}
.tags-container a{
    color: #000000;
    padding: 5px 10px;
    border-radius: 4px;
    background-color: #f2f2f2;
    margin: 6px 10px;
    font-size: 0.9rem;
}
.product-like-heading h3{
    font-weight: 600;
    font-size: 1rem;
    color: var(--heading-color);
}
.page-number{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 30px;
}
.page-number a{
    color: var(--heading-color);
    margin: 0px 10px;
    border-radius: 3px;
}
.icons-box-container-home{
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}
.icons-box-container-home a{
    padding: 25px;
}
.icons-box-container-home{
    margin-bottom: 70px;
}
.home-recent-icon-heading{
    background-color:#262626;
    padding: 20px 20px;
    margin-top: 60px;
}
.home-recent-icon-heading h3{
    color: #ffffff;
}
.error_page_container{
    display: flex;
    flex-direction: column;
    max-width: 500px;
    margin: 50px auto;
    justify-content: center;
    align-items: center;
}
.error_page_container svg{
    margin-bottom: 30px;
    height: 37vh;
    width: 100%;
    object-fit: contain;
    object-position: center;
}
.error_page_container h1{
    color: var(--heading-color);
    font-size: 1.6rem;
}
.error_page_container p{
    color: var(--paragraph-color);
}
.error_page_container a{
    color: #1d69f7;
    margin-top: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}
@media(max-width:910px){
    .home-icons-group-container {
        grid-template-columns: 1fr 1fr;
    }
    .home-main-search.search-container{
        margin-right: 0px !important;
        margin-left: 0px !important;
    }
    .home-main-container h1{
        font-size:1.8rem;
        text-align: center;
        width: 90%;
    }
    .home-main-search.search-container{
        height: 60px;
    }
}
@media(max-width:750px){
    .group-heading{
        margin-top: 100px !important;
        margin-bottom:70px !important;
        font-size: 1.8rem;
    }
    .home-icons-group-container{
        grid-gap: 30px;
    }
    .home-main{
        padding-bottom: 40px;
    }
    .home-main-search.search-container{
        grid-template-columns: 50px 1fr;
        height: 50px;
    }
    .home-main .search-box{
        grid-template-columns: 1fr 50px;
    }
    .home-main .home-main-search .search-box button{
        border-radius: 5px;
    }
}
@media(max-width:570px){
    .home-icons-group-container {
        grid-template-columns: 1fr;
    }
}
.nav-social-icons{
    display: flex;
    justify-content: center;
    align-items: center;
}
.nav-social-icons a{
    display: flex;
    margin: 0px 10px;
}
.nav-social-icons a:first-child{
    margin-left: 0px;
}
.nav-social-icons a svg{
    height: 16px;
    fill: #ffffff;
    transition: all ease 0.3s;
}
.nav-social-icons a i{
    color: #ffffff;
    transition: all ease 0.3s;
    font-size: 1.1rem;
}
.nav-social-icons a:hover svg,
.nav-social-icons a:hover i{
    fill: var(--second-main-color);
    color: var(--second-main-color);
}
.header-top-contact-box{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 1.1rem;
}
.header-top-contact-box i{
    color: #ffffff;
}
.header-top-contact-box span{
    color: #ffffff;
    margin-left: 7px;
    font-size: 0.8rem;
    font-weight: 400;
    letter-spacing: 0.6px;
}
.header-top-contact-box span a{
    color: #ffffff;
}
.header-top-contact{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    grid-gap: 30px;
}
.search-container{
    display: flex;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    height: 100%;
    min-height: 100vh;
    position: fixed;
    left: 0px;
    top: 0px;
    background-color: #000000c0;
    z-index: 110;
}
/*==========================*/
/*==main=======================*/
#main{
    width: 100%;
    background-color: #fff6fb;
    position: relative;
}
.main-text{
    position: absolute;
    left: 10%;
    top: 50%;
    transform: translate(-10%,-50%);
    display: flex;
    flex-direction: column;
    max-width: 450px;
    padding: 20px 0px;
    z-index: 3;
}
.main-text strong{
    color: var(--second-main-color);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 0.9rem;
    font-weight: 500;
}
.main-text h1{
    font-size: 2rem;
    color: var(--bg-color);
}
.main-text h1 span{
    background-color: #e3f2ff;
    padding: 0px 5px;
}
.main-text p{
    color: #313131;
    margin: 15px 0px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
.main-text a{
    width: 180px;
    height: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    background-color: #ffffff;
    color: #050505;
    margin-top: 30px;
}
.main-bg{
    position: absolute;
    left: 0px;
    top: 0px;
    height: 100%;
    width: 100%;
}
.main-bg img{
    height: 100%;
    object-fit: cover;
    object-position: center;
    width: 100%;
}
.category-view-all-btn{
    max-width: 180px;
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--second-main-color);
    color: var(--bg-color);
    border-radius: 5px;
    margin: auto;
    margin-top: 40px;
}
/*==partner============================*/
#partner{
    display: flex;
    flex-direction: column;
    max-width: 1600px;
    width: 90%;
    margin: 0px auto 50px auto;
    padding: 20px 0px;
}
.logo-container{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    grid-gap: 15px;
}
.logo-container img{
    height: 50px;
    object-fit: contain;
    object-position: center;
    filter: grayscale(1);
    opacity: 0.3;
    transition: all ease 0.3s;
}
.logo-container img:hover{
    opacity: 1;
    filter: grayscale(0);
}
/*==recent-product==============================*/
.recent-product{
    margin: 50px auto;
    max-width: 1600px;
    width: 90%;
}
.product-heading{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin: auto;
}
.product-heading h3{
    font-size: 1.56rem;
    font-weight: 700;
    color: #202020;
    letter-spacing: 0.5px;
}
.product-heading a{
    color: #a7a7a7;
    font-weight: 400;
    letter-spacing: 1px;
}
.product-center-heading{
    justify-content: center;
    flex-direction: column;
    text-align: center;
    margin-top: 90px;
    margin-bottom: 60px;
}
.product-heading.product-center-heading h3{
    font-size: 2.4rem;
    font-weight: 800;
}
.product-heading.product-center-heading p{
    color: #535353;
    font-size: 0.9rem;
    margin-top: 10px;
}
.r-product-container{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 20px;
    width: 100%;
    margin: 20px auto;
}
.r-product-box{
    max-width: 100%;
    width: 100%;
    background-color: #ffffff;
    padding: 10px;
    display: grid;
    grid-template-columns: 0.5fr 1fr;
    border-radius: 5px;
    border: 1px solid #ececec;
    transition: all ease 0.3s;
}
.r-product-box.r-category-box{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: none;
    padding: 0px !important;
}
.r-product-box:hover{
    box-shadow: 2px 6px 16px rgba(0,0,0,0.07);
}
.r-product-box.r-category-box:hover{
    box-shadow: none;
}
.r-product-box .r-product-img img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}
.r-product-text{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    padding: 10px;
}
.r-product-text .product-box-p-name,
.product-text .product-box-p-name{
    color: #313131;
    font-size: 1rem;
    font-weight: 600;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
.r-product-text .p-box-category,
.product-text .p-box-category{
    font-size: 0.9rem;
    color: var(--second-main-color);
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
.r-product-text .p-box-category a,
.product-text .p-box-category a{
    color: var(--second-main-color);
}
.r-product-text .p-box-price,
.product-text .p-box-price{
    color: #1d1d1d;
    font-weight: 500;
    font-size: 1.2rem;
    margin-top: 10px;
}
.r-product-text .p-box-price del,
.product-text del{
    color: #215f99;
    font-size: 0.9rem;
}
.r-product-box.r-category-box .r-product-img{
    overflow: hidden;
    height: 400px;
    border: 10px solid #ffffff;
}
.r-product-img img{
    transition: all ease 0.3s;
}
.r-product-box.r-category-box:hover .r-product-img img{
    transform: scale(1.2);
}
.r-product-box.r-category-box .r-product-text{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0px !important;
}
.r-product-box.r-category-box .r-product-text strong{
    font-weight: 700;
}
.r-product-box.r-category-box .r-product-text a span{
    margin-top: 30px;
    display: flex;
    flex-direction: column;
}
.r-product-text a{
    width: 100%;
    height:50px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top:30px;
    color: #535353;
    transition: all ease 0.3s;
}
.r-product-box.r-category-box:hover .r-product-text a{
    background-color: var(--second-main-color);
    color: #ffffff;
}
.r-product-box.r-category-box .r-product-img{
    height: 300px;}
/*==sale==============================*/
.sale{
    max-width: 1600px;
    width: 90%;
    margin: 20px auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 20px;
}
.sale-box{
    width: 100%;
    max-width: 450px;
    border-radius: 20px;
    position: relative;
}
.sale-box img{
    width: 100%;
    height: 100%;
    object-position: center right;
    object-fit: cover;
}
.sale-text{
    position: absolute;
    left: 20%;
    top: 50%;
    transform: translate(-20%,-50%);
    display: flex;
    flex-direction: column;
    color: #1b1919;
}
.sale-text strong{
    font-size: 1.2rem;
    font-weight: 700;
    max-width: 180px;
}
.sale-text span{
    font-size: 1rem;
    color: #792323;
    font-weight: 600;
    text-transform: uppercase;
}
/*==popular-product=======================*/
#popular-product{
    max-width: 1600px;
    width: 90%;
    margin: 50px auto;
    overflow-x: hidden;
}
.popular-product-container{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 20px;
    width: 100%;
    margin: 20px auto;
}
.product-box{
    max-width:100%;
    width: 100%;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    border: 1px solid #ececec;
    padding: 20px 10px;
    transition: all ease 0.3s;
}
.product-box:hover{
    box-shadow: 2px 6px 16px rgba(0,0,0,0.05);
}
.product-box .product-img{
    overflow: hidden;
}
.product-box .product-img img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    transition: all ease 0.3s;
}
.all-news-container .product-box .product-img img{
    max-height: 120px;
    object-fit: cover;
}
.product-box:hover img{
    transform: scale(1.2);
}
.product-text{
    display: flex;
    flex-direction: column;
    width: 100%;
    justify-content: center;
    align-items: flex-start;
    padding: 10px;
}
.product-text p{
    font-weight: 400;
    color: #575757;
    font-size: 0.9rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 10px;
    width: 100%;
    word-break: break-all;
}
/*==contact=======================*/
.home-contact{
    width: 100%;
    min-height: 250px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #f2f2f2;
    position: relative;
}
.h-contact-text{
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background-color: #a4e2ff15;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 3;
}
.h-contact-text span{
    text-transform: uppercase;
    letter-spacing: 5px;
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--second-main-color);
}
.h-contact-text h3{
    font-size: 2rem;
    color: #1d1d1d;
    text-align: center;
    max-width: 400px;
}
.h-contact-text a{
    width: 180px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #181818;
    color: #ffffff;
    border-radius: 25px;
    margin-top: 20px;
    font-weight: 500;
}
.contact-bg-left{
    position: absolute;
    left: 0px;
    top: 0px;
    height: 100%;
    object-fit: contain;
    object-position: center;
    z-index: 2;
}
.contact-bg-right{
    position: absolute;
    right: 0px;
    top: 0px;
    height: 100%;
    object-fit: contain;
    object-position: center;
    z-index: 2;
}
/*==services========================*/
.services{
    max-width: 1600px;
    width: 90%;
    margin: 50px auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 20px;
}
.services-box{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 1px solid rgba(0,0,0,0.1);
    width: 100%;
    max-width: 100%;
    padding: 20px;
    background-color: #ffffff;
}
.services-box i{
    color: var(--second-main-color);
    font-size: 2rem;
    margin: 15px;
}
.services-box span{
    color: #222222;
    font-weight: 600;
    letter-spacing: 0.5px;
    font-size: 1rem;
}
.services-box p{
    color: #878787;
    font-size: 0.9rem;
    text-align: center;
}
/*==footer======================*/
.footer-payment{
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: #141414;
    padding: 20px 0px;
    border-bottom: 1px solid #1f1f1f;
}
.footer-payment strong{
    color: #cacaca;
    font-size: 1rem;
    font-weight: 500;
}
.footer-payment-logos{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
    grid-gap: 20px;
}
.footer-payment-logos img{
    height: 25px;
    margin: 0px 20px;
    object-fit: contain;
    object-position: center;
}
footer{
    background-color: #141414;
    width: 100%;
}
.footer-container{
    max-width: 1600px;
    width: 90%;
    margin: 0px auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 50px 0px;
}
.footer-company-box,
.footer-subscribe{
    max-width: 330px;
}
.footer-contact-box{
    margin-bottom: 16px !important;
}
.footer-subscribe strong{
    display: flex;
    margin-bottom: 25px;
}
.footer-company-box .footer-logo{
    color: #ffffff;
    font-size: 1.8rem;
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: 1px;
}
.footer-logo{
    display: flex;
    margin-bottom: 20px;
}
.footer-logo img{
    max-height: 85px;
    height: 100%;
    object-fit: contain;
    object-position: center;
}
.footer-company-box p,
.footer-subscribe p{
    color: #dfdfdf;
    margin: 10px 0px;
    font-size: 1rem;
    line-height: 1.8rem;
    letter-spacing: 0.4px;
}
.footer-social{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
.footer-social a{
    margin-top: 10px;
    margin-right: 10px;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #252525;
    color: #ffffff;
    font-size: 1rem;
    transition: all ease 0.3s;
}
.footer-social a svg{
    height: 20px;
    fill: #ffffff;
    transition: all ease 0.3s;
}
.footer-social a:hover{
    color: var(--second-main-color);
}
.footer-social a:hover svg{
    fill: var(--second-main-color);
}
.footer-link-box strong,
.footer-subscribe strong{
    font-size: 1.4rem;
    color: var(--second-main-color);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 2px;
}
.footer-link-box ul{
    margin-top: 30px;
}
.footer-link-box ul li a{
    color: #b8b8b8;
    transition: all ease 0.3s;
    font-size: 0.96rem;
    margin-bottom: 16px;
    display: flex;
}
.footer-link-box ul li a:hover{
    color: var(--second-main-color);
}
.subscribe-box{
    width: 100%;
    border: 1px solid #535353;
    display: flex;
    justify-content: center;
    height: 100%;
    margin-top: 10px;
    border-radius: 5px;
    overflow: hidden;
}
.subscribe-box input{
    width: 100%;
    border: none;
    outline: none;
    background-color: transparent;
    padding: 0px 15px;
    color: #ffffff;
}
.subscribe-box button{
    border: none;
    outline: none;
    background-color: #ffffff;
    color: #000000;
    text-transform: uppercase;
    font-weight: 600;
    height: 40px;
    padding: 0px 20px;
    cursor: pointer;
}
.footer-bottom{
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    grid-gap: 10px;
    border-top: 1px solid #1f1f1f;
    padding: 20px 0px;
    margin: auto;
    background-color: #141414;
}
.footer-bottom span{
    color: #c4c4c4;
    font-size: 0.9rem;
}
.footer-bottom-link{
    display: flex;
    justify-content: center;
    align-items: center;
}
.footer-bottom-link a{
    color: #cacaca;
    font-size: 0.9rem;
    margin-right: 15px;
    transition: all ease 0.3s;
}
.footer-bottom-link a:hover{
    color: var(--second-main-color);
}
/*==making-responsive==========================*/
@media(max-width:1200px){
    .main-text{
        left: 0px;
        top: 0px;
        transform: translate(0,0);
        width: 100%;
        max-width: 700px;
        height: 100%;
        padding: 50px;
        justify-content: center;
    }
    .footer-container{
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 40px;
    }
}
@media(max-width:1100px){
    .r-product-container{
        grid-template-columns: 1fr 1fr;
    }
}
@media(max-width:1074px){
    .contact-bg-left{
        display: none;
    }
    .contact-bg-right{
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
    }
    .h-contact-text{
        background-color: #f5fcff96;
    }
}
@media(max-width:965px){
    .logo-container img{
        height: 40px;
    }
}
@media(max-width:870px){
    .r-product-box{
        grid-template-columns: 100px 1fr;
    }

}
@media(max-width:810px){
    .popular-product-container{
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }
    .sale{
        grid-template-columns: 1fr 1fr;
    }
}
@media(max-width:750px){
    .main-text h1{
        font-size: 1.4rem;
    }
    .main-text{
        padding: 20px;
    }
    .r-product-container{
        grid-template-columns: 1fr;
    }
    .r-product-box{
        grid-template-columns: 80px 1fr;
    }
    .home-contact{
        min-height: 200px;
    }
    .h-contact-text h3,
    .product-heading h3{
        font-size: 1.4rem;
    }
    .services{
        grid-template-columns: 1fr 1fr;
    }
}
@media(max-width:635px){
    .popular-product-container{
        grid-template-columns: 1fr 1fr 1fr;
    }
    .footer-payment{
        flex-direction: column-reverse;
        justify-content: center;
        grid-gap: 20px;
    }
}
@media(max-width:500px){
    .popular-product-container{
        grid-template-columns: 1fr 1fr;
    }
    .sale{
        grid-template-columns: 1fr;
    }
    .logo{
        max-width: 120px;
    }
    .logo img{
        width: 100%;
    }
    .services{
        grid-template-columns: 1fr;
    }
    .footer-container{
        grid-template-columns: 1fr;
    }
}
@media(max-width:320px){
    .popular-product-container{
        grid-template-columns: 1fr;
    }
}
/*==product-page========================*/
#product_details{
    display: grid;
    background-color: #ffffff;
    grid-template-columns: 1.1fr 1fr;

    width: 100%;
    margin: 0px auto 50px auto;
}
.d-product-img{
    border-right: 1px solid #dfdfdf;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.d-product-img img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}
.d-product-text{
    display: flex;
    flex-direction: column;
    padding: 30px;
    justify-content: flex-start;
}
.d-product-text .category{
    color: var(--second-main-color);
    font-size: 0.8rem;
}
.d-product-text strong{
    color: #1b1b1d;
    font-weight: 00;
    font-size: 1.4rem;
    margin-bottom: 10px;
}
.d-product-text .rating{
    color: #f3a006;
    font-size: 0.8rem;
    margin-top: 5px;
}
.d-product-text .rating span{
    color: #161616;
    margin-left: 2px;
    font-weight: 500;
}
.d-product-text p{
    color: #4d4d4d;
    margin: 3px 0px;
    font-size: 0.8rem;
    font-weight: 400;
}
.d-product-text p b{
    color: #000000;
    font-weight: 600;
}
.d-product-text .price{
    color: #181818;
    font-size: 1.4rem;
    font-weight: 700;
    margin-top: 30px;
}
.d-product-text .price del{
    color: #f80f0f;
    font-weight: 500;
    font-size: 1rem;
}
.d-product-text .quantity{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-top: 10px;
}
.d-product-text .quantity span{
    color: #363636;
    margin-right: 10px;
    font-weight: 500;
}
.d-product-text .quantity input{
    width: 70px;
    height: 40px;
    background-color: #f3f3f3;
    text-align: center;
    border: 1px solid #ebebeb;
    border-radius: 3px;
}
.d-product-text a{
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    color: #ffffff;
    background-color:var(--second-main-color);
    margin-top: 20px;
    max-width: 160px;
    font-size: 0.85rem;
}
.relative-products .product-heading{
    background-color: #f5f5f5;
    border: 1px solid rgb(236,236,236);
    padding: 10px 20px;
    border-radius: 5px;
}
.d-product-description{
    background-color: #ffffff;
    padding: 20px;
}
.d-product-description h2{
    color: #060606;
    font-size: 1.2rem;
    font-weight: 700;
}
.d-product-description p{
    margin-top: 5px;
    font-size: 0.8rem;
    color: #333333;

}
.d-product-show{
    width: 100%;
    margin: 50px auto 0px auto;
    display: flex;
    flex-direction: column;
    max-width: 1000px;
}
.d-product-show h2{
    color: #000000;
    font-size: 1.2rem;
    margin-bottom: 10px;
    font-weight: 700;
    border-bottom: 1px solid var(--main-color);
}
.d-product-show img{
    width: 100%;
    object-fit: contain;
}
.main-product-container{
    display: grid;
    grid-template-columns: 300px 1fr;
    grid-gap: 20px;
    max-width: 1600px;
    margin: auto;
}
.sidebar-main{
    display: flex;
    flex-direction: column;
    width: 100%;
    position: relative;
}
.sidebar-category{
    border: 1px solid #ebebeb;
    background-color: #ffffff;
}
.sidebar-category-heading{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 10px;
    background-color: var(--main-color);
}
.sidebar-category-heading strong{
    color: #ffffff;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
}
.sidebar-category-heading i{
    color: #ffffff;
}
.sidebar-category-menu{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.sidebar-category-menu li{
    width: 90%;
}
.sidebar-category-menu li a {
    padding: 10px 0px;
    color: #202020;
    display: flex;
    width: 100%;
    font-size: 0.8rem;
    border-bottom: 1px dashed #cfcfcf;
    transition: all ease 0.3s;
}
.sidebar-category-menu li a.active{
    color: var(--second-main-color);
}
.sidebar-category-menu li a:hover{
    color: var(--second-main-color);
}
.sidebar-category-menu li:last-child a{
    border-bottom: none;
}
.sidebar-contact-box{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 30px 20px;
    margin-top: 20px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border-radius: 6px;
    position: relative;
    overflow: hidden;
}
.sidebar-contact-box::after{
    content: '';
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.6) 100%); 
}
.sidebar-contact-box-icon{
    position: relative;
    z-index: 1;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--second-main-color);
}
.sidebar-contact-box-icon i{
    color: #ffffff;
    font-size: 1.2rem;
}
.sidebar-contact-box strong{
    color: #ffffff;
    z-index: 2;
    font-weight: 500;
    font-size: 0.8rem;
    margin: 10px 0px;
    letter-spacing: 1px;
}
.sidebar-contact-box p{
    color: #ffffff;
    font-size: 0.75rem;
    width: 90%;
    z-index: 2;
    font-weight: 400;
    letter-spacing: 0.2px;
    line-height: 1.5rem;
}
.sidebar-contact-box a{
    color: #000000;
    background-color:#ffffff;
    max-width: 110px;
    width: 100%;
    height: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
    font-size: 0.8rem;
    border-radius: 30px;
    font-weight: 500;
    margin-top: 20px;
}
.sidebar-recent-product{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    border: 1px solid #eeeeee;
    padding: 15px;
    margin-top: 20px;
    position: sticky;
    position: -webkit-sticky;
    background-color: #ffffff;
    top: 10px;
}
.sidebar-recent-box{
    display: grid;
    grid-template-columns: 60px 1fr;
    grid-gap: 10px;
    margin-bottom: 10px;
    border-bottom: 1px dashed #cfcfcf;
    padding-bottom: 10px;
    transition: all ease 0.3s;
    width: 100%;
}
.sidebar-recent-box:hover{
    opacity: 0.8;
}
.sidebar-recent-product .sidebar-recent-box:last-child{
    padding-bottom: 0px;
    margin-bottom: 0px;
    border-bottom: none;
}
.sidebar-recent-box-img img{
    width: 100%;
    max-height: 80px;
    height: 100%;
    object-fit: contain;
    object-position: center;
}
.sidebar-recent-box-text{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.sidebar-recent-box-text a{
    color: #333036;
    font-size: 0.8rem;
    font-weight: 500;
    margin-bottom: 15px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sidebar-recent-box-text span{
    width: 100%;
    height: 1px;
    display: flex;
    border-bottom: 1px solid #dddddd;
    margin-bottom: 6px;
}
.sidebar-recent-box-text span:last-child{
    width: 70%;
    margin-bottom: 0px;
}
.sidebar-recent-heading{
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid #e2e2e2;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width:90%;
}
.sidebar-recent-heading i{
    color: var(--main-color);
    margin-right: 14px;
}
.sidebar-recent-heading strong{
    color: #1d1d1d;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
}
/*==making-product-page-responsive============*/
@media(max-width:820px){
    #product_details{
        grid-template-columns: 1fr;
    }
    .d-product-img{
        max-height: 400px;
    }
    .d-product-text{
        padding: 10px;
        margin-top: 30px;
    }
}
@media(max-width:1024px){
    .main-product-container{
        display: flex;
        flex-direction: column-reverse;
    }
}
@media(max-width:724px){
    .d-product-text strong{
        font-size: 1.4rem;
    }
    .all-news-container .product-box .product-img img{
        max-height: 300px;
    }
}
/*==hot-product-page===================*/
.hot-products{
    margin-top: 20px;
}
.hot-products .product-heading{
    flex-direction: column;
    justify-content: center;
    margin-bottom: 30px;
}
.hot-products .product-heading h3{
    font-size: 3rem;
}
.hot-products .product-heading span{
    color: #313131;
    font-size: 1rem;
    text-align: center;
}
@media(max-width:724px){
    .hot-products .product-heading h3{
        font-size: 1.4rem;
    }
}
.mySwiper2,
.d-product-img,
.mySwiper{
    width: 100%;
    overflow: hidden;
}
.mySwiper{
    width: 90%;
    padding-bottom: 4px;
    padding-left: 3px;
}
.mySwiper2 .swiper-wrapper .swiper-slide img{
    max-height: 450px;
}
.mySwiper .swiper-wrapper .swiper-slide img{
    max-height: 100px;
    padding: 3px 0px;
}
.mySwiper .swiper-wrapper .swiper-slide{
    opacity: 0.6;
    margin: 0px -1px;
}
.swiper-slide-thumb-active{
    border: 1px solid var(--main-color) !important;
    border-radius: 4px !important;
    opacity: 1 !important;
}
.swiper-button-prev::after,
.swiper-button-next::after{
    font-size: 24px !important;
    color: var(--main-color) !important;
}
@media(max-width:1080px){
    .popular-product-container{
        grid-template-columns: 1fr 1fr 1fr !important;}
}
@media(max-width:650px){
    .popular-product-container{
        grid-template-columns: 1fr 1fr !important;}
}
@media(max-width:330px){
    .popular-product-container{
        grid-template-columns: 1fr !important;}
}
.popular-product-container.category-container{
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
}
.popular-product-container.category-container .r-product-img{
    width: 90% !important;
    height: 280px !important;
}
.r-product-text .product-box-p-name{
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}
.popular-product-container.category-container .r-product-text{
    text-align: center !important;
}
@media(max-width:1210px){
    .popular-product-container.category-container{
        grid-template-columns: 1fr 1fr 1fr !important;
    }
}
@media(max-width:990px){
    .popular-product-container.category-container{
        grid-template-columns: 1fr 1fr !important;
    }
}
@media(max-width:470px){
    .popular-product-container.category-container{
        grid-template-columns: 1fr !important;
    }
}
.footer-contact-box{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    background-color: #1b1b1d;
    border-radius: 20px;
    margin-bottom: 10px;
    padding: 5px 15px;
}
.footer-contact-box i{
    color: var(--second-main-color);
    margin-right: 7px;
}
.footer-contact-box span{
    color: #ebebeb;
    font-size: 0.9rem;
}
@media(max-width:840px){
    .header-top-contact{
        display: none;
    }
    .nav-social-icons{
        margin-left: 0px !important;
    }
}
@media(max-width:724px){
    
    .product-heading.product-center-heading h3{
        font-size: 1.6rem;
    }
    .whatwedo-text h3,
    .blog-heading h3{
        font-size: 1.4rem !important;
    }
}

/**/
.category-banner{
    width: 100%;
    max-width: 1600px;
    height: 250px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    margin: auto;
    margin-bottom: 30px;
}
.category-banner::after{
    content: '';
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background-color: #000000a1;
}
.category-banner img{
    width: 100%;
    height: 100%;
    object-position: center;
    object-fit: cover;
    position: absolute;
    left: 0px;
    top: 0px;
}
.category-banner h1{
    position: relative;
    z-index: 3;
    color: #ffffff;
    font-weight: 500;
    letter-spacing: 2px;
    font-size: 3rem;
    text-align: center;
    width: 90%;
}
@media(max-width:1100px){
    .category-banner{
        width: 100%;}
}
@media(max-width:724px){
    .category-banner{
        height: 180px;
    }
.category-banner h1{
    font-size: 1.4rem;}
}
/*--blog--------------------------*/
#blog{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 40px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    background-color: #ffffff;
}
#blog.blog-1{
    padding-top: 70px;
}
.blog-heading{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-top: 30px;
    margin-bottom: 50px;
}
.blog-heading span{
    color: #6b6b6b;
}
.blog-heading h3{
    font-size: 3.17rem;
    color: #2b2b2b;
    font-weight: 800;
}
.blog-container{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    margin: 20px 0px;
    flex-wrap: wrap;
    max-width: 1600px;
    grid-gap: 50px;
    align-items: flex-start;
}
 
.blog-box{
    width:100%;
    background-color: #ffffff;
    border: 1px solid #ececec;
    display: flex;
    flex-direction: column;
}
.blog-img{
    width:100%;
    height: auto;
    display: flex;
}
.blog-img img{
    width:100%;
    max-height: 310px;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.blog-text{
    padding: 30px;
    display: flex;
    flex-direction: column;
}
.blog-text span{
    color: var(--second-main-color);
    font-size: 0.9rem;
}
.blog-text .blog-title{
    font-size: 1.3rem;
    font-weight: 500;
    color: #272727;
}
.blog-text p{
    color: #9b9b9b;
    font-size: 0.9rem;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 20px 0px;
}
.blog-text a{
    color: #0f0f0f;
}
.blog-text a:hover{
    color: var(--second-main-color);
    transition: all ease 0.3s;
}
 
 
@media(max-width:1250px){
 
    .blog-container{
        grid-template-columns:1fr 1fr ;
    }
} 
@media(max-width:724px){
    .blog-container{
        grid-template-columns:1fr ;
    }
}
 
@media(max-width:550px){
   
    .blog-box{
        margin: 20px 0px;
        width: 100%;
    }
    #blog{
        padding:20px;
    }
}
#certificate{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 80px auto;
    background-color: #ffffff;
}
#certificate .blog-heading{
    margin-top: 60px;
    width: 90%;
    max-width: 500px;
}
.mySwiperCertificate{
    width: 100%;
    margin-top: -50px;
    padding-top: 50px;
    padding-bottom: 50px;
    margin-bottom: 50px;
}
.mySwiperCertificate .swiper-slide {
    background-position: center;
    background-size: contain;
    width: 390px;
  }
  .mySwiperCertificate .swiper-slide img{
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  @media(max-width:724px){
    .mySwiperCertificate .swiper-slide {
        width: 260px;
      }
      .mySwiperCertificate{
        width: 100%;
        margin-top: -30px;}
  }

/**/
#whatwedo{
    width: 100%;
    height: 100%;
    min-width: 250px;
    min-height: 400px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 50px 10px;
    position: relative;
    max-width: 1600px;
    margin:auto;
    border-radius: 10px;
    overflow: hidden;
}
#whatwedo::after{
    content: '';
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background-color: #000000a1;
}
#whatwedo img{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0px;
    top: 0px;
    object-fit: cover;
}
.whatwedo-text{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    z-index: 5;
    max-width: 550px;
}
.whatwedo-text h3{
    color: #ffffff;
    font-size: 2.6rem;
}
.whatwedo-text p{
    color: #d4d4d4;
    margin: 10px 0px;
    font-weight: 500;
    letter-spacing: 0.1px;
}
.whatwedo-text a{
    color: #ffffff;
    background-color: var(--second-main-color);
    height: 45px;
    max-width: 160px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    margin-top: 10px;
}
/*==Contact-page======================*/
#contact-page{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 60px auto;
    width: 100%;
    padding: 50px 0px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    position: relative;
}
#contact-page h2{
    color: #ffffff;
    font-size: 2rem;
    font-weight: 500;
    z-index: 3;
    text-align: start;
    display: flex;
    width: 90%;
    max-width: 1400px;
}
#contact-page h3{
    color: #ffffff;
    font-size: 1rem;
    z-index: 3;
    font-weight: 400;
    margin-bottom: 50px;
    display: flex;
    width: 90%;
    max-width: 1400px;
    margin-top: 5px;
}
#contact-page::after{
    content: '';
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background-color: #000000c5;
}
.contact-page{
    max-width: 1400px;
    display: flex;
    flex-direction: column;
    width: 90%;
    background-color: #ffffff;
    padding: 30px;
    border: 1px solid #f1f1f1;
    position: relative;
    z-index: 4;
    border-radius: 10px;
}
.contact-form{
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-top: 8px;
}
.contact-form input{
    width: 100%;
    height: 45px;
    background-color: #f5f5f5;
    border: none;
    outline: none;
    padding: 10px;
    margin-bottom: 10px;
    border-left: 3px solid #000;
}
.contact-form textarea{
    background-color: #f5f5f5;
    border: none;
    outline: none;
    padding: 10px;
    margin-bottom: 10px;
    font-size: 0.9rem;
    min-height: 150px;
    resize: none;
    border-left: 3px solid #000;
    margin-top: 10px;
}
.contact-form input[type="submit"]{
    background-color: var(--second-main-color);
    color: #ffffff;
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 0px;
    cursor: pointer;
    border-left:none;
}
.contact-page-img{
    max-width: 300px;
    max-height: 500px;
    margin-right: 40px;
}
.contact-page-img img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}
.contact-page h1{
    color: #ffffff;
    background-color: #000000;
    padding: 10px 20px;
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: 10px;
}
.contact-details-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
}

@media(max-width:800px){
    #contact-page{
        justify-content: center;
        align-items: center;
    }
    .contact-page-img{
        display: none;
    }
    .contact-page{
        padding: 20px;
    }
}
@media(max-width:724px){
.contact-details-grid{
    grid-template-columns: 1fr;
}
#contact-page h2{
    font-size: 1.8rem;
}
}

.messages-profile li{
    color: #27c42e;
    font-size: 0.9rem;
}
.mySwiperBanner{
    width: 100%;
}
.mySwiperBanner .swiper-slide{
    width: 100%;
    height: 100%;
}
.mySwiperBanner .swiper-slide img{
    width: 100%;
    object-position: center;
    object-fit: contain ;
}
.product-contact-btns{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    grid-gap: 10px;
    margin-top: 20px;
}
.product-contact-btns a{
    margin-top: 0px;
    font-weight: 500;
    font-size: 0.8rem;
}
.product-contact-btns a i{
    color: #ffffff;
    margin-right: 8px;
}
/*==============*/
#about-us{
    padding: 120px 0px 100px 0px;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.about-us-heading{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-bottom: 80px;
    width: 90%;
}
.about-us-heading h3{
    color: #1a1a1a;
    font-size: 3.125rem;
    text-transform: uppercase;
    font-weight: 800;
}
.about-us-heading strong{
    color: var(--second-main-color);
    font-size: 1rem;
    font-weight: 400;
}
.about-us-container{
    max-width: 1600px;
    width: 90%;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr 700px;
    grid-gap: 40px;
    align-items: center;
}
.about-us-text h1{
    font-size: 1.4rem;
    color:var(--second-main-color);
    font-weight: 600;
}
.about-us-text h1 span{
    background-color: #dceeff;
    padding: 0px 5px;
}
.about-us-text p{
    color: #6e6e6e;
    margin: 20px 0px;
    letter-spacing: 0.1px;
    line-height: 2.8rem;
    font-size: 1.375rem;
}
.about-us-text a{
    width: 200px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 30px;
    background-color: #257df1;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.about-us-img{
    width: 100%;
}
.about-us-img iframe,
.about-us-img video{
    width: 100%;
    height: 300px;
    object-fit: cover;
    object-position: center;
    border: none;
    outline: none;
    border-radius: 10px;
    overflow: hidden;
    background-color: #f5f5f5;
}
@media(max-width:1100px){
    .about-us-container{
        grid-template-columns: 1fr;
    }
    .about-us-text {
        text-align: center;
    }
}
@media(max-width:600px){
    .about-us-heading h3{
        font-size: 1.4rem;
    }
    .about-us-img iframe{
        width: 100%;
        height: 250px;}
    .product-center-heading{
        margin-top: 0px !important;
    }
    .about-us-text p{
        font-size: 1.1rem;
        line-height: 2rem;
    }
    .about-us-heading{
        margin-bottom: 10px;
    }
}
.go-home-btn{
    color: var(--second-main-color) !important;
}
.whatwedo-box-container{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.whatwedo-box-wrapper{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    max-width: 1600px;
    width: 90%;
    grid-gap: 50px;
}
@media(max-width:770px){
    .whatwedo-box-wrapper{
        grid-template-columns: 1fr;
    }
    .whatwedo-box-text p{
        margin-top: 5px !important;
    }
    .whatwedo-box-wrapper{
        grid-gap: 90px;
    }
    .blog-heading{
        margin-bottom: 0px;
    }
    .blog-container{
        margin: 0px;
    }
    .blog-container{
        grid-gap: 0px;
    }
    .blog-box{
        box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.05);
    }

}
.whatwedo-box{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.whatwedo-box-icon{
    width: 120px;
    height: 120px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f0f0f0;
    color: #0f0f0f;
    font-size: 4rem;
    margin-top: -60px;
    z-index: 10;
}
.whatwedo-box-text{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.whatwedo-box-text strong{
    color: #131313;
    font-size: 2rem;
    font-weight: 500;
}
.whatwedo-box-text p{
    color: #252525;
    font-size: 1rem;
    margin: 30px 0px;
    max-width: 300px;
}
#home-contact{
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 80px 0px;
    overflow-x: hidden;
}
#home-contact::before{
    content: '';
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background-color: #000000c2;
}
.swiper-button-next::after, .swiper-button-prev::after{
    color: #000000 !important;
    background-color: #ffffff;
    padding: 20px !important;
    box-shadow: 2px 2px 30px rgba(0, 0, 0, 0.12);
}
#home-contact h3{
    font-size: 2.8rem;
    color: #ffffff;
    z-index: 3;
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: 1px;
}
.home-contact-bg{
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: -1;
}
.home-contact-container{
    display: grid;
    grid-template-columns: 1fr 650px;
    grid-gap: 100px;
    margin-top: 40px;
    width: 90%;
    max-width: 1600px;
    align-items: center;
}
.swiper-slide img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.home-contact-slider{
    width: 100%;
    overflow: hidden;
}
.home-contact-text{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    z-index: 3;
}
.home-contact-text strong{
    color: #ffffff;
    font-size: 2rem;
    font-weight: 600;
    border-bottom: 5px solid var(--second-main-color);
    line-height: 4rem;
}
.home-contact-text p{
    color: #ffffff;
    font-size: 1.2rem;
    margin: 40px 0px;
    line-height: 2.5rem;
}
.home-contact-text a{
    color: #ffffff;
    background-color:var(--second-main-color);
    max-width: 140px;
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    font-size: 1.1rem;
    font-weight: 500;
}

@media(max-width:1110px){
    
.home-contact-container{
    grid-template-columns: 1fr;}
}
@media(max-width:724px){
    
    #home-contact h3{
        font-size: 1.8rem;
    }
    .home-contact-container{
        grid-gap: 50px;
    }
    
.swiper-button-next::after, .swiper-button-prev::after{
    padding: 10px  !important;
}
.home-contact-text strong{
    font-size: 1.6rem;
}

.home-contact-text p{
    font-size: 1rem;
    line-height: 1.8rem;
}
.home-contact-text a{
    height: 40px;
}

}

.all-news-container{
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 1fr;
}
.all-news-container .product-box{
    display: grid;
    grid-template-columns: 180px 1fr;
    grid-gap: 20px;
    padding: 5px;
}
.all-news-container .product-img{
    background-color: #f1f1f1;
    padding: 5px;
    border-radius: 5px;
    overflow: hidden;
}
.all-news-container .product-text span{
    color: #949494;
    font-size: 0.89rem;
}
.all-news-container .product-text .product-text-read{
    color: var(--second-main-color);
    margin-top: 8px;
    font-size: 0.9rem;}


.all-news-container .product-text .product-text-read:hover{
    text-decoration: underline;
}
@media(max-width:500px){
    .all-news-container .product-box{
        grid-template-columns: 1fr;
    }
}
/*==FAQs=============================*/
.faqs-page-container{
    display: grid;
    grid-template-columns: 1fr 1fr;
    max-width: 1600px;
    margin: 50px auto;
    grid-gap: 50px;
}
.faq-heading{
    display: flex;
    flex-direction: column;
    padding-left: 46px;
    margin-bottom: 24px;
}
.faq-box-container h3{
    font-weight: 700;
    font-size: 1.3rem;
    color: var(--heading-color);
    margin-bottom: 15px;
}
.faq-heading p{
    font-weight: 400;
    font-size: 13.175px;
    line-height: 20px;
    color: #727272;
    max-width: 461px;
}
.faq-content{
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    width: 100%;
    align-items: flex-start;
}
.faq-box{
    padding: 10px 20px;
    background: rgba(255, 255, 255, 0.4);
    border: 1px solid #FFFFFF;
    box-shadow: 14px 14px 60px rgba(59, 42, 130, 0.06);
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-bottom: 20px;
}
.faq-box:last-child{
    margin-bottom: 0px;
}
.faq-box-question{
    display: grid;
    grid-template-columns: 1fr 30px;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    user-select: none;
}
.faq-box-question h4{
    font-weight: 700;
    font-size: 1rem;
    line-height: 31px;
    color: #464545;
    font-weight: 600;
}
.faq-box-answer{
    max-height: 0px;
    overflow: hidden;
    transition: all ease-in-out 0.5s;
}
.faq-box-answer p{
    font-weight: 400;
    font-size: 13.175px;
    line-height: 20px;
    color: #666666;
    padding-top: 20px;
}
.faq-img{
    width: 100%;
    overflow: hidden;
    border-radius: 27px 0px 0px 27px;
    display: flex;
    box-shadow: 14px 14px 60px rgba(59, 42, 130, 0.06);
}
.faq-box-container{
    margin-right: 40px;
}
.faq-img img{
    width: 100%;
    object-fit: contain;
    object-position: right;
}

.faq-box-icon{
        display: block;
        position: relative;
        height: 3px;
        transition: background 0.2s ease-out;
        width: 23px;
        margin-left: auto;
    }
    .faq-box-icon::before,
    .faq-box-icon::after{
        background: #000000;
        content: '';
        position: absolute;
        height: 100%;
        transition: all ease-out 0.2s;
        width: 100%;
        border-radius: 3px;
    }

    .faq-box-icon::before{
        top: 0px;
    }
    .faq-box-icon::after{
        transform: rotate(90deg);
        top: 0px;
    }
    .faq-box-question.active .faq-box-icon::after{
        transform: rotate(0deg);
    }
    @media(max-width:1200px){
        #faq{
            padding: 84px 0px 144px 20px;
        }
    }
    @media(max-width:800px){
        #faq{
            padding: 84px 0px 144px 20px;
        }
        .faq-content{
            grid-template-columns: 1fr;
        }   
        .faq-box-container{
            margin-right: 0px;
            padding-right: 20px;
        }
        .faq-img{
            margin-top: 25px;
        }
    }
    @media(max-width:724px){
        #faq{
            padding: 82px 0px 80px 20px;
        }
        .faq-img{
            border-radius: 18.0651px 0px 0px 18.0651px;
        }
        .faq-heading{
            padding: 0px 20px;
        }
        .faq-heading h3{
            font-weight: 700;
            font-size: 26.2px;
            line-height: 33px;
        }
        .faq-box-question h4{
            font-weight: 700;
            font-size: 19px;
            line-height: 26px;
        }
        .faq-box{
            padding: 24px 21px;
        }
        .faq-box-icon{
            width: 16px;
        }
        .faq-box-question{
            grid-template-columns: 1fr 16px;
        }
        .faqs-page-container{
            display: grid;
            grid-template-columns: 1fr;
        }
    }


/* oem-odm */
.oem-odm-p{
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    max-width: 1000px;
    width: 100%;
    margin: auto;
    color: #252525;
    font-size: 1.1rem;
    line-height: 2rem;
}
.oemodm-page-container{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 50px;
    max-width: 1600px;
    margin: 50px auto;
}
.oem-box{
    display: grid;
    grid-template-columns: 180px 1fr;
    grid-gap: 20px;
    align-items: flex-start;
    background-color: #ffffff;
    padding: 30px;
    border-radius: 5px;
}
.oem-box-img{
    width: 100%;
    border: 1px solid #f1f1f1;
    padding: 5px;
    border-radius: 5px;
}
.oem-box-img img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.oem-box-text strong{
    color: var(--second-main-color);
    font-size: 1rem;
    font-weight: 600;
}
.oem-box-text p{
    color: var(--paragraph-color);
    margin-top: 10px;
    line-height: 1.6rem;
}
.oem-box-text p b{
    color: #1a1a1a;
    font-weight: 600;
}
.custome-oem .whatwedo-box-icon img{
    height: 50px !important;
    object-fit: contain;
}
.custome-oem .whatwedo-box-text strong{
    font-size: 1.1rem;
    margin-top: 15px;
    font-weight: 600;
    color: var(--second-main-color);
}
.custome-oem .whatwedo-box-wrapper{
    align-items: initial;
    grid-gap: 50px;
}
.custome-oem .whatwedo-box-text p{
    margin-top: 10px;
}
.custome-oem .whatwedo-box{
    box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.05);
}
.custome-oem .whatwedo-box{
    justify-content: flex-start;
    padding: 0px 10px;
    background-color: #ffffff;
}
.custome-oem-banner{
    padding: 20px 0px !important;
    min-height: 300px !important;
    margin: auto;
    border-radius: 10px;
    overflow: hidden;
}
@media(max-width:1100px){
    
.oemodm-page-container{
    grid-template-columns: 1fr 1fr;
}
.oem-box{
    grid-template-columns: 100px 1fr;}

}
@media(max-width:770px){   
.custome-oem .whatwedo-box{
    margin-bottom: 30px;
}
}
@media(max-width:700px){
    
    .oemodm-page-container{
        grid-template-columns: 1fr;
    }
}
@media(max-width:324px){
    
.oem-box{
    grid-template-columns: 1fr;
}
}

.popular-product-container.search-product-container,
.popular-product-container.category-container,
.popular-product-container.category-product-container {
    grid-template-columns: 1fr 1fr 1fr;
}
@media(min-width:1000px){
    .fixedbody .sidebar-recent-product{
        padding-top: 110px !important;
    }}
@media(min-width:724px) and (max-width:1000px){
.fixedbody .sidebar-recent-product{
    padding-top: 70px !important;
}}

.language-dropdown-container{
    position: relative;
}
.language-dropdown{
    position: absolute;
    right: 0px;
    top: calc(100% + 10px);
    background-color: #ffffff;
    display: none;
    flex-direction: column;
    z-index: 100;
    border-radius: 2px;
    box-shadow: 2px 2px 30px rgba(0, 0, 0, 0.1);
}
.language-dropdown a{
    color: #000000;
    font-size: 0.9rem;
    border-bottom: 1px solid #f0f0f0;
    width: 100%;
    display: flex;
    padding: 5px 10px;
    transition: all ease 0.3s;
}
.language-dropdown a:hover{
    color: var(--second-main-color);
}
#language-dropdown-check:checked ~ .language-dropdown,
#language-dropdown-check2:checked ~ .language-dropdown{
    display: flex;
}
#language-dropdown-check,
#language-dropdown-check2{
    display: none;
}
a .alibaba{
    height: 30px !important;
}
.footer-social a .alibaba{
    width: 30px !important;
    transition: all ease 0.3s;
}
.footer-social a:hover .alibaba{
    fill: var(--second-main-color);
}
#contact-details{
    max-width: 1600px;
    width: 90%;
    margin: 80px auto;
    margin-bottom: 0px;
    z-index: 4;
}
#contact-details h2{
    color: #ffffff;
    font-size: 2rem;
    font-weight: 500;
    border-radius: 5px;
}
.contact-details-container{
    display: flex;
    flex-direction: column;
    margin: 50px 0px;
}
.contact-details-box{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 20px;
}
.contact-details-box .contact-details-box-icon{
    margin-right: 20px;
}
.contact-details-box .contact-details-box-icon i{
    color: #ffffff;
}
.contact-details-box-text{
    color: #ffffff;
    font-size: 1.1rem;
    font-weight: 400;
}
.contact-available-text{
    padding: 20px 0px;
    border-top: 1px dashed #ffffff;
    border-bottom: 1px dashed #ffffff;
    font-weight: 600;
    margin-top: 20px;
    font-size: 1.2rem;
    color: #ffffff;
    width: 100%;
    display: flex;
}
@media(max-width:724px){
    #contact-details h2{
        font-size: 1.6rem;
    }
}
/* mgnifer */

.loupe {
    display: none;
    position: absolute;
    width: 200px;
    height: 200px;
    border: 1px solid rgb(196, 196, 196);
    box-shadow: 5px 5px 12px rgb(0, 0, 0,0.12);
    background: rgba(0, 0, 0, 0.25);
    cursor: crosshair;
    overflow: hidden;
    z-index: 1000;
  }
  
  .loupe img {
    position: absolute;
    right: 0;
  }

  .about-page{
    background-color: #ffffff;
    width: 100%;
    overflow-x: hidden;
  }

  .about-page-about{
    max-width: 620px;
    width: 90%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 80px 0px 0px 0px;
    margin: auto;
  }
  .about-page-about h2{
    font-size:2rem ;
    font-weight: 800;
    color: #303030;
    margin-bottom: 20px;
  }
  .about-page-about p{
    color: #5f5f5f;
    font-weight: 300;
  }
  .about-page-about p b{
    font-weight: 600;
  }
  .about-category-banner::after{
    display: none !important;
}
.about-page-customers{
    max-width: 1600px;
    width: 90%;
    margin: 50px auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.about-page-customers h3,
.about-page-story h4{
    color: #1f1f1f;
    font-size: 2rem;
    font-weight: 800;
    border-bottom: 5px solid var(--second-main-color);
    padding-bottom: 10px;
    margin-top: 40px;
    text-align: center;
}
.about-page-customers-box-container{
    margin: 80px 0px;
    display: flex;
    flex-direction: column;
    width: 100%;
    grid-gap: 100px;
}
.about-page-customer-box{
    display: flex;
    grid-gap: 50px;
    align-items: center;
}
.about-page-customers-box-container .about-page-customer-box:nth-child(even){
    flex-direction: row-reverse;
}
.about-page-customer-box-img{
    width: 50%;
    height: 400px;
}
.about-page-customer-box-img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.about-page-customer-box-text{
    width: 50%;
}
.about-page-customer-box-text h4{
    color: #414141;
    font-size: 1.4rem;
}
.about-page-customer-box-text p{
    color: #575757;
    margin-top: 10px;
}
.about-page-oem{
    max-width: 620px;
    width: 90%;
    margin: 90px auto 50px auto;
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: center;
    align-items: center;
}
.about-page-oem h4{
    color: #0f1012;
    font-size: 1.6rem;
    font-weight: 700;
}
.about-page-oem a{
    color: #ffffff;
    font-size: 1.3rem;
    font-weight: 800;
    text-transform: uppercase;
    padding: 10px 20px;
    border-radius: 30px;
    background-color: var(--second-main-color);
    margin-top: 20px;
    font-weight: 700;
    letter-spacing: 1px;
    box-shadow: 2px 2px 30px rgba(0, 0, 0, 0.05);
}
.about-page-story{
    width: 90%;
    max-width: 1000px;
    margin: 100px auto 50px auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.about-page-story h4{
    margin-bottom: 20px;
}
.about-page-story p{
    color: #525252;
    font-weight: 400;
    letter-spacing: 0.1px;
    margin: 10px 0px;
}
.about-page-story p b{
    color: var(--second-main-color);
    font-weight: 400;
}

.about-page-banner-large{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

}
.about-page-banner-large img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}
@media(max-width:900px){
    
.about-page-customer-box{
    flex-direction: column !important;
}
.about-page-customer-box-img{
    width: 100%;
}
.about-page-customer-box-text{
    width: 100%;
}
}
@media(max-width:724px){
    .about-page-about h2{
        font-size:1.9rem ;
        width: 80%;
        letter-spacing: 0px;
        line-height: 2.3rem;
    }
    .about-category-banner{
        margin-top: 20px !important;
    }

    .about-category-banner{
        height: 100%;
        width: 100%;
    }
    .about-category-banner img{
        height: 100%;
        position: static;
    }
    .about-page-customers h3,
    .about-page-story h4{
        font-size: 1.4rem;
        border-bottom: none;
        position: relative;
        padding-bottom: 15px;
    }
    .about-page-customers h3::after,
    .about-page-story h4::after{
        content: '';
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: 100%;
        background-color: var(--second-main-color);
        width: 90%;
        height: 6px;
    }
    .about-page-about{
        padding-top: 80px;
    }
    .about-page-customer-box-img{
        height: 250px;
    }
    .about-page-customer-box-text{
        text-align: center;
    }
    .about-page-customer-box-text h4{
        font-size: 1.2rem;
    }
    .about-page-customer-box{
        grid-gap: 15px;
    }
    .about-page-oem h4{
        font-size: 1.2rem;
    }
    .about-page-oem a{
        font-size: 1rem;
    }
    .about-page-story h4{
        font-size: 1.8rem;
    }
}
.cloud-zoom-big{
    border: none !important;
}
.cloud-zoom,
.swiper-slide #wrap
{
    height: 100%;
}

/* News  */
.static-container.new-static-container{
    max-width: 1100px;
    margin: auto;
}
.static-container.new-static-container .static-content p{
    color: #252525;
}

@media(max-width:724px){
    #about-us{
        padding-top:60px;
    }
}
.category-flex-container{
    display: flex;
    align-items: center;
    grid-gap: 0px 4px;
    flex-wrap: wrap;
    line-height: 1.3rem;
    color: #424242;
}
.news-navigation{
    display: flex;
    align-items: center;
    margin-top: 30px;
    grid-gap: 20px;
}