@media only screen and ( max-width: 1440px){
    .container{ max-width: 95%;}
}

@media only screen and ( max-width: 1200px){
    .ham { display: block; z-index: 102;}
    header .nav-bar .menu-section .menu{
        width: 100%;
        height: 100vh;
        position: fixed;
        display: block;
        background-color: var(--thm-white);
        left: -120%;
        top: 0;
        padding: 100px 60px;
        z-index: 101;
        transition: 0.5s;
    }
    header .nav-bar .menu-section .menu.show-menu{ left: 0; border-radius: 0; }
    header .nav-bar .menu-section .menu > li{ padding: 6px 0px; margin: 5px 0px; }
    header .nav-bar .menu-section .menu .active::before,
    header .nav-bar .menu-section .menu li:hover::before{width: 0;}

    .dropdown-megamenu .mega-menu{ width: 100%; display: none; opacity: 1; visibility: visible;}
    .dropdown-megamenu .mega-menu.show-drop-down{ position: absolute; top: 30px; left: 0%; height: 70vh; overflow-y: scroll; transform: translatex(0%); display: block; opacity: 1; z-index: 10; visibility: visible;}

    .banner-three .content { max-width: 700px; z-index: 10; padding: 250px 0 140px;}
    .banner-three .content h1 { font-size: 36px; margin-bottom: 20px;}

}
@media only screen and ( max-width: 991px){
    .mb-80{ margin-bottom: 60px;}
    .mt-80{ margin-top: 60px;}
    .row-reverse{flex-direction: column-reverse;}
    .social-media-container div:first-child{display: none;}
    
    .banner-bottom-img2{ display: none;}
    .points-section .points-section-container { grid-template-columns: repeat(2, 1fr);}
    
    .access-adv-section .access-adv-container .access-img-content{ margin-right: 0px;}

    .compy-fact-section .compy-fact-points{ grid-template-columns: repeat(2, 1fr);}
    .perspective-section{ padding: 0px;}

    .our-products-section .products-items-container{
        grid-template-columns: repeat(2,1fr);
    }
    .process-step-container{ display: grid; gap: 30px; grid-template-columns: repeat(2,1fr);}

}
@media only screen and ( max-width: 768px){
    .heading{font-size: 25px;}

    .banner-three .content { max-width: 700px; z-index: 10; padding: 250px 0 140px;}
    .banner-three .content h1 { font-size: 32px; margin-bottom: 20px;}

    .our-products-section .products-items-container{
        display: grid;
        gap: 25px;
        grid-template-columns: repeat(1,1fr);
    }
}

@media only screen and ( max-width: 550px){
    .mb-80{ margin-bottom: 40px;}
    .mt-80{ margin-top: 40px;}
    h4{ font-size: 16px;}
    .btn-display-none{ display: none;}
    .container{ max-width: 97%;}

    .description{font-size: 13px;margin-bottom: 10px; }
    .heading-tag{font-size: 14px;margin-bottom: 5px; }
    .heading{font-size: 20px;margin-bottom: 10px; }
    .btn-box {padding: 6px 14px;font-size: 13px; }
    .btn-box i{font-size: 12px; }
    .owl-dot {width: 10px; height: 4px; margin-top: 15px !important;}

    header .nav-bar .container .logo{ max-width: 250px; padding: 8px 70px 10px 10px; margin-bottom: -25px; margin-top: -1px; margin-left: -13px;}
    header .nav-bar .nav-connect .btn-box.style3{ display: none;}

    header .nav-bar .menu-section .menu{
        padding: 60px 25px;
    }
    header .nav-bar .menu-section .menu > li {
        padding: 6px 0px;
        margin: 0px;
    }
    header .nav-bar .menu-section .menu > li a{
        font-size: 13px;
    }

    .banner-three .content { max-width: 700px; z-index: 10; padding: 250px 0 30px;}
    .banner-three .content h1 { font-size: 24px; margin-bottom: 20px;}
    .banner-three .content h1::before { width: 80px; height: 1px;}

    .banner-bottom img{ display: none;}
    .banner-bottom .section-container .heading { border-top: 2px solid;}

    .points-section .points-section-container{ grid-template-columns: repeat(1, 1fr);}
    .points-section .points-section-container .points-section-items{ padding: 10px 14px;}
    .points-section .points-section-container .points-section-items .step img{ max-width: 35px;}
    .points-section .points-section-container .points-section-items .step h4{ font-size: 16px; margin-bottom: 5px;}

    .over-year .container { padding: 20px;}
    .global-reach{ padding: 20px 0px;}
    .global-reach .container{ padding: 20px 10px; border-top: 1px solid; border-bottom: 1px solid; border-image: linear-gradient(to right, var(--thm-base), var(--thm-base2)) 1;}

    .access-adv-section .access-adv-container { padding: 5px;}
    .access-adv-section .access-adv-container .row{ padding: 15px 5px 15px; margin: 5px;}
    .access-adv-section .access-adv-container .access-img img{ max-width: 100%; padding: 0px; transition: 0.5s;}
    .access-adv-section .access-adv-container .access-img-content h3{ margin-bottom: 5px; font-size: 15px;}
    .access-adv-section .access-adv-container .access-img-content h6{ font-size: 14px;margin-bottom: 10px;}

    .custom-hinges-cta h4 { padding: 3px 5px 0px; margin-top: 10px; font-size: 15px;}
    .quality-control-box { padding: 16px;}
    
    .testimonials-section{ padding: 40px 0px;}
    .testimonials-section .testimonial-container{ padding: 0px; }
    .testimonials-section .testimonial-container .testimonials-silder-div{ padding: 15px; }
    .testimonials-section .testimonial-container .testimonials-silder-div > div{ padding-right: 0px; }
    .testimonials-section .testimonial-container .testimonials-silder-div .person-info{ display: flex; gap: 10px; align-items: center; margin-bottom: 20px; }
    .testimonials-section .testimonial-container .testimonials-silder-div .person-info div h5{ font-size: 15px; font-weight: 500;}
    .testimonials-section .testimonial-container .testimonials-silder-div .person-info .reating{ font-size: 10px; margin-top: 1px; }
    .testimonials-section .testimonial-container .testimonials-silder-div .comma-img{ width: 80% !important; }
    .google-icon{max-width: 26px;}

    .tagline-section { padding: 30px 0px;}

    .footer-section .footer-container{ padding: 50px 0px; position: relative;}
    .footer-section .footer-container .footer-logo a img{ max-width: 200px;}

    .footer-section .footer-container .sub-heading{ font-size: 15px; margin-bottom: 15px; }
    .footer-section .footer-container .footer-services li a{ font-size: 13px; font-weight: 500;}
    .footer-section .footer-container .border-footer { border: none; padding: 0px; margin-bottom: 0px; height: auto;}
    .footer-section .footer-container .footer-contact p a{ font-size: 13px; }
    
    .footer-bottom-links{ gap: 0px 5px; padding: 10px 8px;}
    .footer-bottom-links b{ font-weight: 500;}
    .footer-bottom-links a{font-size: 13px;}

    .footer-section .footer-bottom-section{ text-align: center; padding: 20px 0px; border-top: 1px solid  var(--thm-line); border-image: linear-gradient(to right, var(--thm-base), var(--thm-base2)) 1;}
    .footer-section .footer-bottom-section .container{ justify-content: center;}
    .footer-section .footer-bottom-section p{ font-size: 12px;}
    .footer-section .footer-bottom-section p a{transition: 0.5s; color: var(--thm-white);}
    .footer-section .footer-bottom-section p a:hover{ color: var(--thm-base);}
    .footer-section .footer-bottom-section .social-media{ display: flex; gap: 22px; align-items: center;}
    .footer-section .footer-bottom-section .social-media a{ position: relative; z-index: 2;}
    .footer-section .footer-bottom-section .social-media i{ font-size: 18px; color: var(--thm-white); background-color: transparent; transition: 0.5s;}
    .footer-section .footer-bottom-section .social-media a::before{ position: absolute; content: ""; width: 0px; height: 0px; background-color: var(--thm-base); top: 55%; left: 50%; transform: translate(-50%, -55%); z-index: -1; border-radius: 50%; transition: 0.3s;}
    .footer-section .footer-bottom-section .social-media a:hover i{ color: var(--thm-white);}
    .footer-section .footer-bottom-section .social-media a:hover::before{ width: 35px; height: 35px;}

    .breadcrumb-section .breadcrumb-bg { padding: 120px 0px 10px; background-size: cover; background-position: right; border-bottom: 10px solid var(--thm-base-light);}
    .breadcrumb-section .breadcrumb-heading { font-size: 22px;}
    .breadcrumb-section .breadcrumb .breadcrumb-item { font-size: 12px;}
    .breadcrumb-section .breadcrumb { margin-top: 2px; padding-top: 2px;}
    
    .about-section .section-container { padding-left: 44px;}
    .about-section .about-imgs{ padding-left: 8px;}
    .about-section .heading img{ top: 60px; left: -100px; width: 150px;}
    
    .compy-fact-section h6{ font-size: 16px;}
    .compy-fact-section .compy-fact-points{ padding: 10px 10px 9px; gap: 1px; grid-template-columns: repeat(1, 1fr);}
    .compy-fact-section .compy-fact-points .compy-fact-items{ padding: 5px 10px;}
    .compy-fact-section .compy-fact-points .compy-fact-items .step{gap: 7px;}
    .compy-fact-section .compy-fact-points .compy-fact-items .step img{ max-width: 37px;}

    .compy-fact-section .compy-fact-points .compy-fact-items .step h4{ font-size: 14px;}
    .compy-fact-section .compy-fact-points .compy-fact-items .step h4 span{ font-size: 13px; }

    .contact-info-page .contact-info{ display: grid; grid-template-columns: repeat(1, 1fr); padding: 10px;}
    .contact-info-page .contact-info .contact-info-items i{ font-size: 18px;}
    .contact-info-page .contact-info .contact-info-items p{ font-size: 15px; margin-bottom: -2px;}
    .contact-info-page .contact-info .contact-info-items a{ font-size: 14px;}
    .contact-info-page .contact-info-social h4{ font-size: 16px;}
    .contact-info-page .form-section { padding: 14px;}
    .form-control{ margin-top: 0px; padding: 7px 15px; font-size: 14px; border: 1px solid var(--thm-footer);}
    .form-select { margin-top: 0px; padding: 7px 15px; font-size: 14px; border: 1px solid var(--thm-footer);}
    .form-select:focus { border: 1px solid var(--thm-color);}
    .form-control:focus { border: 1px solid var(--thm-color);}
    .form-section .btn-box{ width: 100%; margin-top: 5px;}

    td{ padding: 5px 5px; font-weight: 600; font-size: 13px;}
    th{ padding: 5px; font-size: 12px;}

    .btn-whatsapp-pulse { bottom: 20px; left: 20px; font-size: 26px; padding: 20px; }
    #back-to-top-button { width: 40px; height: 40px; bottom: 20px; right: 20px;}
    #back-to-top-button::after { font-size: 20px; line-height: 40px;}

    .custom-sheet-metal {padding: 14px;}
    .service-detail-page .service-detail-content h3 { font-size: 17px;}
    .service-detail-page-links li{
        font-size: 12px;
    }

    .process-step-container{ grid-template-columns: repeat(1,1fr);}
    .work-process-section .process-step h5{ font-size: 16px; font-weight: 700; margin: 10px 0px;}
}