@media only screen and ( max-width: 1570px) {
    header .top-header{padding: 8px 50px;}
    header .nav-bar{ padding: 6px 50px; }
}
@media only screen and ( max-width: 1350px) {
    .container{ max-width: 95%;}
    /* .animation-bolb {width: 450px; height: 450px; } */
}
@media only screen and ( max-width: 1200px) {
    .ham {
        display: block;  
        z-index: 1002;
    }
    header .nav-bar .nav-menu .menu{
        width: 100%;
        height: 100vh;
        position: fixed;
        display: block;
        background-color: var(--thm-color);
        left: -100%;
        top: 0;
        padding: 100px 60px;
        z-index: 1001;
        transition: 0.5s;
    }
    header .nav-bar .nav-menu .menu.show-menu{
        left: 0;
    }
    header .nav-bar .nav-menu .menu > li > a{
        margin: 10px 0px;
    }
    header .nav-bar .nav-menu .menu .drop-down .drop-down-menu{
        display: none;
        top: 45px !important;
    }
    header .nav-bar .nav-menu .menu .drop-down .drop-down-menu.show-drop-down{
        display: block;
    }
    .drop-down-icon{
        display: block;
    }
}
@media only screen and ( max-width: 991px){
    header .top-header > a:first-child,
    header .top-header > a:nth-child(3){
        display: none;
    }
    
    .hero-banner-section .banner .content{
        width: 90% !important;
    }
    .industries-serve-section .industries-we-serve-container .rSolution-content { grid-template-columns: repeat(3,1fr);}
    .contact-page-info .contact-info-data{
        grid-template-columns: repeat(2, 1fr);
    }
}
@media only screen and ( max-width: 768px){
    .funfact .funfact-content{ display: grid; gap: 20px; grid-template-columns: repeat(2, 1fr);}
    .footer-section .footer-bg-img .footer-logo-conatiner{ display: block;}

    .about-section.about-page .iso{ width: 100%; float: none; margin-right: 0px; margin-bottom: 0px; margin-bottom: 20px; text-align: center;}
    .contact-page-info .contact-info-data{
        grid-template-columns: repeat(1, 1fr);
    }

}
@media only screen and ( max-width: 580px){
    h1{ font-size: 22px;} 
    h2{ font-size: 20px;}
    h3{ font-size: 17px;}
    h4{ font-size: 16px;}
    h5{ font-size: 16px;} 
    .container{ max-width: 98%;}
    .content-box h6{ font-size: 12px; margin-bottom: 6px;}
    .content-box h2{ font-size: 18px; margin-bottom: 8px;}
    .description{ font-size: 13px; margin-bottom: 10px;}
    .heading-content{ text-align: start; margin-bottom: 15px;}
    .mb-80{ margin-bottom: 40px;}
    .mt-80{ margin-top: 40px;}
    .btn-one{ padding: 5px 15px; font-size: 12px;}
    .owl-dot { width: 8px; height: 3px; margin-top: 20px !important;}

    header .top-header a span,
    header .top-header .social-media p, 
    header .nav-bar .nav-menu .nav-toggle .btn-one{ display: none;}
    header .top-header{ gap: 8px; padding: 8px 20px;}
    header .top-header a{ padding-right: 8px;}
    header .top-header .social-media{ gap: 10px;}
    header .top-header a i,
    header .top-header .social-media a i{ font-size: 13px;}
    header .nav-bar{ padding: 6px 20px;}
    header .nav-bar .logo-section a .logo-img{ max-width: 110px; margin-top: -30px;}
    .ham { width: 50px; margin: -15px;}

    header .nav-bar .nav-menu .menu{ padding: 100px 30px;}
    header .nav-bar .nav-menu .menu li a{ font-size: 14px;}
    .drop-down-menu{ width: 315px; }
    
    .hero-banner-section .banner .banner-video { width: 100%; height: 60vh; object-fit: cover; margin-bottom: -8px;}
    .hero-banner-section .banner .content{ width: 98% !important; padding: 14px 14px 20px; backdrop-filter: blur(1px); border-radius: 20px 20px 0px 0px;}
    .hero-banner-section .banner .content h5{ font-size: 14px; font-weight: 500;}
    .hero-banner-section .banner .content h1{ font-size: 18px; margin-bottom: 5px;}

    .about-section { padding: 30px 0px;}
    .about-section .content-box .highlight{ border-left: 3px solid var(--thm-base); padding-left: 8px; border-radius: 2px;}
    .about-section .content-box .points-ul li { margin-bottom: 5px;}
    .about-section .content-box .points-ul li:last-child{ margin-bottom: 12px;}

    .funfact.mb-80{ margin-bottom: 0px;} 
    .funfact .funfact-content{ gap: 10px; grid-template-columns: repeat(2, 1fr);}
    .funfact .funfact-content .funfact-items { padding: 8px 10px; display: block; text-align: center;}
    .funfact .funfact-content .funfact-items .funfact-icon i{ display: none; font-size: 22px; padding: 8px; border-radius: 6px;}
    .funfact .funfact-content .funfact-items h2{ font-size: 24px;}

    .service-section{ background-color: #e2e2e260; padding: 40px 0px;}
    .service-section .inner-container { padding: 0px; border-radius: 0px; background-color: transparent ;}
    .service-section .find-solution a .img-hight{ height: 250px;}
    .service-section .find-solution{ border-radius: 10px;}
    .service-section .find-solution .down-flow a h4{ font-size: 15px;}

    .main-cta .main-cta-container h2{ font-size: 16px;}

    .medik-section .medik-item{ border-radius: 12px; height: 96%;}
    .medik-section .medik-item img{ border-radius: 12px 12px 0px 0px;}
    .medik-section .medik-item div{ padding: 14px;}
    .medik-section .medik-item h5{ font-size: 16px; margin-bottom: 8px;}

    .industries-serve-section .industries-we-serve-container .rSolution-content { gap: 10px; grid-template-columns: repeat(2,1fr);}
    .industries-serve-section .industries-we-serve-container{ padding: 20px 12px 12px; text-align: center; border-radius: 12px;}
    .industries-serve-section .industries-we-serve-container .rSolution-content .rSolution-items{ padding: 10px; border-radius: 10px;}
    .industries-serve-section .industries-we-serve-container .rSolution-content .rSolution-items img{ max-width: 40px;}
    .industries-serve-section .industries-we-serve-container .rSolution-content .rSolution-items p{ font-weight: 500; font-size: 13px;}

    .why-choose-us-section .why-choose-us-cantent .wcu-points{ gap: 10px; grid-template-columns: repeat(1, 1fr);}
    .why-choose-us-section .why-choose-us-cantent .wcu-points .wcu-items h5{ gap: 8px; font-weight: 600; padding: 6px 15px 6px; font-size: 14px;}
    .why-choose-us-section .why-choose-us-cantent .wcu-points .wcu-items h5 i{ font-size: 22px;}
    .why-choose-us-section .why-choose-us-cantent .wcu-points .wcu-items .wcu-item-desc{ padding: 8px 12px; border-radius: 0px 0px 10px 10px; transition: 0.5s;}

    .testimonial-section{ padding: 40px 0px;}
    .testimonials-silder-div{ padding: 12px; border-radius: 8px;}
    .testimonials-silder-div .person-info{ gap: 3px;}
    .testimonials-silder-div .person-info div h5{ font-size: 14px; font-weight: 600;}
    .testimonials-silder-div .person-info div p{ font-size: 12px; font-weight: 500;}
    .testimonials-silder-div .person-info div img{ width: 80% !important; margin: auto;}
    .testimonials-silder-div .person-info .reating{ font-size: 10px; padding: 6px 8px;}

    .footer-section .footer-bg-img{ padding: 40px 0px 20px 0px;}
    .footer-section .footer-logo a img{ max-width: 120px; margin-bottom: 14px;}
    .footer-section .footer-bg-img .footer-logo-conatiner{ padding: 10px 12px; border-radius: 12px;}

    .footer-section .sub-heading{ font-size: 15px;}
    .footer-section .footer-services li{ margin-bottom: 15px;}
    .footer-section .footer-services li a{ gap: 6px; line-height: 1.1; font-size: 13px;}
    .footer-section .footer-services li a i{ font-size: 9px; margin-left: -10px;}

    .footer-section .footer-contact p{ gap: 10px; margin-bottom: 7px; padding-bottom: 7px; border-bottom: 1px solid #ffffff10;}
    .footer-section .footer-contact p a{ font-size: 13px;}
    .footer-section .social-media i{ font-size: 18px;}
    .footer-section .footer-bottom-section{ padding: 12px 0px;}

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

    .breadcrumb-section .breadcrumb-heading { font-size: 20px;}
    .breadcrumb-section .breadcrumb .breadcrumb-item { font-size: 14px;}
    .breadcrumb-section .breadcrumb .symbol-breadcrumb { font-size: 9px; padding: 0px 7px;} 

    .our-product-page .our-product-item .our-product-content a h3 { font-size: 14px;}
    .our-product-page .our-product-item .our-product-btn { font-size: 13px;}

    .facilities{ padding: 40px 0px;}
    .facilities .facilities-item{ padding: 13px; border-radius: 10px; min-height: 90px;}
    .facilities .facilities-item h4{ font-size: 17px; margin-bottom: 5px;}
    .facilities .facilities-item .points-ul li{ list-style: inside; font-weight: 600; font-size: 14px;}

    .contact-page-info .contact-info-data{ gap: 15px; grid-template-columns: repeat(1, 1fr);}
    .contact-page-info .contact-info-data .contact-item{ padding: 10px 15px 10px 0px; border-radius: 10px;}
    .contact-page-info .contact-info-data .contact-item div{margin-bottom: 8px;}
    .contact-page-info .contact-info-data .contact-item i{ font-size: 18px; padding: 8px 9px 8px 8px;}
    .contact-page-info .contact-info-data .contact-item h4{ font-size: 17px;}
    .contact-page-info .contact-info-data .contact-item a{ font-size: 14px; margin-left: 10px;}

    .form-section { padding: 15px 12px; border-radius: 10px;}
    .form-heading { font-size: 16px;}
    .form-control{ margin-top: 0px; padding: 7px 15px; font-size: 14px;}
    .form-select { margin-top: 0px; padding: 7px 15px; font-size: 14px;}
    .contact-form iframe{ min-height: 300px; border-radius: 10px; padding: 6px;}

    .service-detail-page .service-detail-content h2{ font-size: 20px;}
    .service-detail-page .service-detail-content h5{ font-size: 16px; margin-bottom: 5px; margin-top: 20px;}

    .service-detail-page .side-bar h5{ font-size: 13px;}
    .service-detail-page .side-bar{ margin-bottom: 20px; padding: 6px;}
    .service-detail-page .side-bar li a{ padding: 8px 12px; font-size: 14px;}

}