@charset "UTF-8";
/* CSS Document */

@media (max-width: 1500px){
    .products-slider-list, .customers-say-list{
        padding: 0 24px;
        position: relative;
    }
    .products-slider-prev{
        left: 0;
    }
    .products-slider-next{
        right: 0;
    }

    .swiper-slider-prev{
        left: 0;
    }
    .swiper-slider-next{
        right: 0;
    }
}

@media (max-width: 1280px){
	.banner-content{
	    padding: 32px;
    }
    
    .shop-by-category-list{
        padding-bottom: 24px;
    }
    .shop-by-category-list-item{
        min-width: 300px;
    }

    .about-values-list{
        grid-template-columns: repeat(3, 1fr);
    }

    .footer-cta{
        position: relative;
        padding: 64px 48px;
        border-radius: 16px;
    }
    .contact-form-wrap{
        padding-left: 24px;
        padding-right: 24px;
    }
    .installation-video-list-items{
        grid-template-columns: repeat(2, 1fr);
    }
    .our-hiring-process-items{
        grid-template-columns: repeat(2, 1fr);
    }

}

@media (min-width: 1025px){
    .menu-overlay{
        opacity: 0 !important;
        visibility: hidden !important;
    }
    .menu-open-overflow{
        overflow: auto !important;
    }
    .login-icon{
        display: none;
    }

    .burger-menu{
        display: none;
    }

    .header-search-icon-mobile{
        display: none;
    }

    .header-bottom{
        display: block !important;
    }

    .close-menu{
        display: none;
    }
    .nav > ul > li > a{
	    border-radius: 48px;
        padding: 8px 12px;
        gap: 8px;
    }
    .nav > ul > li:hover > a, .nav > ul > li.active > a, .nav > ul > li.current-menu-item > a{
        background: var(--color-primary-900);
        color: var(--color-primary-100);
    }
    .menu-arrow{
        display: flex;
        align-items: center;
    }

    .nav ul li .sub-menu{
        position: absolute;
        top: 100%;
        left: 0;
        background: var(--color-white);
        border-radius: 8px;
        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
        text-align: left;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease-in-out;
        white-space: nowrap;
    }

    .nav ul li:hover .sub-menu{
        opacity: 1;
        visibility: visible;
    }
    .header-right-mobile{
        display: none;
    }

    .mobile-bottom-menu{
        display: none;
    }
}

@media (min-width: 1280px){
    .nav > ul > li > a{
        padding: 8px 20px;
    }
}

@media (max-width: 1024px){

    .header-wrap{
        height: 64px;
    }

    .header-wrap.sticky{
        height: 64px;
    }

    .header-wrap.sticky .header{
        /* padding: 8px 0; */
    }

    .header-right-mobile{
        display: flex;
        align-items: center;
        gap: 16px;
    }

    .header-cta{
        display: none !important;
    }

    .header-search{
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--color-white);
        padding: 0 16px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        z-index: 100;
        opacity: 0;
        max-height: 0;
        /* overflow: hidden; */
        pointer-events: none;
        transition: opacity 0.3s ease, max-height 0.3s ease, padding 0.3s ease;
    }

    .header-search.mobile-open{
        display: block;
        opacity: 1;
        max-height: 80px;
        padding: 12px 16px;
        pointer-events: auto;
    }

    .mobile-bottom-menu-wrap{
        display: block;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background: var(--color-white);
        padding: 8px 16px;
        box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
        z-index: 5;
    }

    .mobile-bottom-menu{
        display: flex;
        align-items: center;
        gap: 16px;
        justify-content: space-between;
    }

    .mobile-bottom-menu-item{
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        color: var(--color-gray-900);
        transition: all 0.3s ease-in-out;
        font-size: 14px;
    }

    .mobile-bottom-menu-item:hover *{
        color: var(--color-primary-700);
    }

    .mobile-bottom-menu button{
        border: 0;
        padding: 0;
        background: transparent;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        color: var(--color-gray-900);
        transition: all 0.3s ease-in-out;
        cursor: pointer;
        position: relative;
    }

    .mobile-bottom-menu button span{
        color: var(--color-white) !important;
    }

    .mobile-bottom-menu a{
        display: flex;
        flex-direction: column;
        align-items: center;
        font-weight: 500;
        gap: 4px;
        color: var(--color-gray-900);
        transition: all 0.3s ease-in-out;
    }

    .header-search{
        display: none;
    }

    .burger-menu button{
        width: 40px;
        height: 40px;
        background: transparent;
        border: 0;
        padding: 0;
        cursor: pointer;
        color: var(--color-primary-900);
        transition: all 0.3s ease-in-out;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .burger-menu button:hover{
        color: var(--color-primary-700);
    }
    .header-search-icon-mobile{
        display: block;
        width: 40px;
        height: 40px;
        background: var(--color-white);
        color: var(--color-gray-900);
        border: 1px solid var(--color-gray-500);
        border-radius: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease-in-out;
        cursor: pointer;
        position: relative;
    }
    .header-search-icon-mobile:hover{
        background: var(--color-gray-900);
        color: var(--color-white);
    }

    .login-text{
        display: none;
    }
    .header-cta .btn-sm{
        padding: 8px;
    }

    .nav > ul > li > a{
        display: flex !important;
        justify-content: space-between;
        align-items: center;
        gap: 4px;
        padding: 8px 8px;
    }

    .nav ul li a:hover{
        color: var(--color-primary-700);

    }

    .header-bottom{
        transform: translateX(100%);
        position: fixed;
        z-index: 12;
        width: 100%;
        max-width: 360px;
        top: 0;
        right: 0;
        background: var(--color-gray-100);
        padding: 24px 16px;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease-in-out;
        padding-top: 60px;
    }

    .header-bottom .container{
        height: calc(100dvh - 60px);
        overflow-y: auto;
    }

    .header-bottom.active{
        transform: translateX(0);
        opacity: 1;
        visibility: visible;
    }

    .header-bottom .nav{
        justify-content: left;
        text-align: left;
    }

    .header-bottom .nav > ul{
        display: flex;
        flex-direction: column;
        justify-content: left;
        gap: 0 12px;
        width: 100%;
    }
    .header-bottom .nav > ul > li{
        border-bottom: 1px solid var(--color-gray-300);
        padding-top: 6px;
        padding-bottom: 6px;
    }
    .header-bottom .nav > ul > li:last-child{
        border-bottom: none;
    }
    .menu-arrow{
        display: flex;
        align-items: center;
        transition: all 0.3s ease-in-out;
    }
    .menu-arrow.menu-arrow--open{
        transform: rotate(180deg);
    }
    .nav ul li .sub-menu{
        display: none;
    }
    .nav ul li .sub-menu ul li a{
        padding: 8px 0px 8px 40px;
    }
    .nav ul li .sub-menu ul li a img{
        left: 8px;
    }
    .header{
        /* padding: 8px 0; */
    }

    .logo img{
        width: 80px;
    }

    .close-menu{
        display: block;
    }

    .close-menu{
        width: 24px;
        height: 24px;
        color: var(--color-primary-900);
        background: transparent;
        border: 0;
        position: absolute;
        top: 24px;
        right: 24px;
        z-index: 2;
        cursor: pointer;
    }

    .js-marquee img{
        margin: 0 16px;
    }

    .our-impact-content-title, .our-impact-content-stats{
        width: 100%;
    }
    .meet-our-team-list{
        grid-template-columns: repeat(2, 1fr);
    }

    .our-commitment{
	    grid-template-columns: repeat(1, 1fr);
    }
    .contact-detail{
        width: 100%;
    }

    .contact-form-wrap{
        width: 100%;
    }
    .contact-detail{
        padding-top: 0;
        width: 100%;
    }
    .contact-form-wrap{
        padding: 24px;
        width: 100%;
        border-radius: 16px;
    }
    .shop-by-category-list {
        margin: 0 -15px;
        padding-left: 15px;
    }
    .blog-list{
        grid-template-columns: repeat(2, 1fr);
    }

    .blog-detail-inner-wrap{
        flex-direction: column;
        gap: 32px;
    }

    .blog-detail-right{
        width: 100%;
    }

    .thankyou-404{
        padding: 96px 0;
    }

    .thankyou-404-img{
        padding-bottom: 24px;
    }

    .thankyou-404-img img{
        width: 160px;
        height: 160px;
    }

    .customers-say-list-inner-wrap{
        grid-template-columns: repeat(1, 1fr);
    }

    .limited-warranty-info{
        flex-direction: column;
        gap: 32px;
    }

    .careers-listing{
        flex-direction: column;
        gap: 32px;
    }

    .limited-warranty-info-left{
        width: 100%;
    }

    .careers-listing-left{
        width: 100%;
    }
}

@media (max-width: 991px){
    .hero-slider .swiper-slide{
        flex-direction: column-reverse;
    }
	.banner-content{
        width: 100%;
    }
    .banner-img{
        width: 100%;
    }
    .banner-content{
	    padding: 24px;
    }

    .h1, h1{
	    font-size: 36px;
    }
    .h2, h2{
        font-size: 28px;
    }
    .h3, h3{
        font-size: 22px;
    }
    .h4, h4{
        font-size: 20px;
    }
    .h5, h5{
        font-size: 18px;
    }
    .h6, h6{
        font-size: 16px;
    }

    .about-values-list{
        grid-template-columns: repeat(3, 1fr);
    }
    .about-battmech-content{
        flex-direction: column;
    }

    .about-battmech-left{
	    width: 100%;
    }

    .about-battmech-right{
        width: 100%;
    }

    .about-battmech-right-video-icon, .about-battmech-right-video-icon a{
        width: 72px;
        height: 72px;
    }

    .about-battmech-right-video-icon img{
        width: 32px;
        height: 32px;
    } 

    .footer-menu{
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
    
    .pagination{
        gap: 16px 8px;
    }

    .installation-video{
        flex-direction: column;
    }

    .installation-video-left{
        width: 100%;
    }

    .join-the-team{
        flex-direction: column-reverse;
        gap: 32px;
    }
    .join-the-team-content{
        width: 100%;
    }
     .join-the-team-img{
        width: 100%;
    }

}

@media (min-width: 768px){
   .our-impact-content-stats ul li:nth-child(3n) {
        border-right: none;
    }

    .our-impact-content-stats ul li:nth-last-child(-n+3) {
        border-bottom: none;
    }
}

@media (max-width: 767px){
    .h1, h1{
	    font-size: 32px;
    }
    .h2, h2{
        font-size: 24px;
    }
    .h3, h3{
        font-size: 20px;
    }
    .h4, h4{
        font-size: 18px;
    }
    .h5, h5{
        font-size: 16px;
    }
    .h6, h6{
        font-size: 14px;
    }

    .banner{
	    border-radius: 16px;
    }

    .header-cta, .header-cart-wishlist{
        gap: 8px;
    }

    .header-cta .icon{
        width: 20px;
        height: 20px;
    }

    .header-cart-wishlist button{
        width: 36px;
        height: 36px;
        padding: 0;
    }

    .header-search-icon-mobile{
        width: 36px;
        height: 36px;
    }

    .burger-menu button .icon{
        width: 32px;
        height: 32px;
    }

    .about-values-list{
        grid-template-columns: repeat(2, 1fr);
    }

     .footer-cta{
        position: relative;
        padding: 32px 24px;
    }
    .footer-menu{
        grid-template-columns: repeat(1, 1fr);
        gap: 32px;
    }
    .copyright{
        flex-direction: column-reverse;
    }
    .footer-logo{
        padding-top: 0;
    }

    .our-impact{
        padding: 24px;
        border-radius: 16px;
    }

    .our-impact-content-stats ul{
        grid-template-columns: repeat(2, 1fr);
    }
    .our-impact-content-stats ul li:nth-child(2n) {
        border-right: none;
    }

    .our-impact-content-stats ul li:nth-last-child(-n+2) {
        border-bottom: none;
    }

    .our-impact-stats-value{
        font-size: 42px;
    }
    .our-vision-mission{
        grid-template-columns: repeat(1, 1fr);
    }

    .meet-our-team-list{
        grid-template-columns: repeat(2, 1fr);
    }

    .product-component-content-desc{
        display: none;
    }

    .products-slider-list{
        padding: 0;
    }

    .products-slider-list, .customer-say-slider{
        padding-bottom: 48px;
    }

    .swiper-slider-next, .swiper-slider-prev{
        top: 100%;
        transform: translateY(0%);
    }

    .swiper-slider-next{
        right: 50% !important;
        transform: translateX(100%);
        margin-right: -8px;
    }
    .swiper-slider-prev{
        left: 50% !important;
        transform: translateX(-100%);
        margin-left: -8px;
    }

    .products-slider-prev,
    .products-slider-next{
	    margin-top: -30px;
    }

    .customer-say-prev, .customer-say-next{
        margin-top: -30px;
    }

    .installation-video-list-items{
        grid-template-columns: repeat(1, 1fr);
    }

    .our-hiring-process-items{
        grid-template-columns: repeat(1, 1fr);
    }

    .our-hiring-process-item-inner-arrow svg{
        transform: rotate(90deg);
    }

    .our-hiring-process-item{
        padding-right: 10px;
        padding-bottom: 56px;
    }

    .our-hiring-process-item-inner-arrow{
        position: absolute;
        right: 50%;
        transform: translateX(50%);
        bottom: 0px;
        top: auto;
    }

    .careers-listing-item{
        padding: 24px 16px;
    }

    .contact-info-items{
        grid-template-columns: repeat(1, 1fr);
    }

    .full-width-grid-item{
        grid-column:auto
    }

    .blog-by-author{
        flex-direction: column;
        align-items: start;
    }
     
}

@media (max-width: 580px){
    .about-values-list{
        grid-template-columns: repeat(1, 1fr);
    }
    .blog-list{
        grid-template-columns: repeat(1, 1fr);
    }
}