@media only screen and ( max-width: 1400px){
    .container{ 
        max-width: 95%;
    }
    .nav-bar .container .logo{
        max-width: 400px;
        padding: 12px 75px 12px 0px;
    }
    .nav-bar .menu-section .menu{
        gap: 20px;
    }
}

@media only screen and ( max-width: 1230px){
    .ham { display: block; z-index: 102;}
    .nav-bar .menu-section .menu{
        width: 100%;
        height: 100vh;
        position: fixed;
        display: block;
        background-color: var(--thm-white);
        left: -100%;
        bottom: -100%;
        top: 0;
        padding: 100px 60px;
        z-index: 101;
        transition: 0.5s;
        border-radius: 50%;
    }
    .nav-bar .menu-section .menu.show-menu{ left: 0; bottom: 0; border-radius: 0; }
    .nav-bar .menu-section .menu > li{ padding: 6px 0px; margin: 5px 0px; }
    .nav-bar .menu-section .menu .active::before,
    .nav-bar .menu-section .menu li:hover::before{width: 0;}
    .nav-bar .menu-section .menu .arrow-dropdown{ font-size: 18px; display: inline; margin-left: 1px;}
    
    .menu .drop-down .drop-down-menu{
        display: none; 
    }
    .nav-bar .menu .drop-down:hover .drop-down-menu{
        top: 40px;
    }
    .menu .drop-down .drop-down-menu.show-drop-down{
        display: block;
    } 
    .top-header .social-media-container div:first-child{
        display: none;
    }
    .flex-w-lg{
        flex-wrap: wrap;
    }
    .product-application-section .product-application-container .product-application-items .prod-app-img{
        margin: 0px;
    }
}


@media only screen and ( max-width: 1120px){
    .banner-silder .banner-content h1 {
        font-size: 30px;
        font-weight: 800;
        margin-bottom: 15px;
    }

    .products-section .products-items-container {
        display: grid;
        gap: 25px;
        grid-template-columns: repeat(3, 1fr);
    }
    .our-products-section .products-items-container{
        display: grid;
        gap: 25px;
        grid-template-columns: repeat(3, 1fr);
    }
    .about-section {
        padding: 30px;
        background-image: none;
    }

    .product_style {
        margin-right: 0;
        padding: 15px 5px;
    }

    .product_style li a i {
        font-size: 10px;
    }

}
@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-contact-form{
        display: none;
    }
    .banner-silder .banner-content{ padding: 30px 0px 30px 20px; margin-left: 0px; }
    .banner-silder .banner-content h1{
        font-size: 28px;
        margin-bottom: 10px;
    }
    .iso-logo {
        top: 20px;
        right: 10px;
        max-width: 240px;
    }

    .about-section {
        padding: 0px;
    }
    .about-imgs{
        margin-top: 30px;
        margin-right: 0px;
    }
    .about-section.about-section22{
        width: 100%;
    }
    .about-section .about-page-img {
        margin-bottom: 60px;
    }
    .adv-section .adv-section-container{
        grid-template-columns: repeat(1, 1fr);
    }
    .points-section-container{
        display: grid;
        gap: 20px;
        grid-template-columns: repeat(2, 1fr);
    }
    .points-section.about-page-points .points-section-container{
        display: grid;
        gap: 10px;
        grid-template-columns: repeat(2, 1fr);
    }
    .points-section.about-page-points .points-section-items{
        border: 1px solid var(--thm-base2);
    }

    .products-section .products-items-container {
        display: grid;
        gap: 25px;
        grid-template-columns: repeat(2, 1fr);
    }
    .our-products-section .products-items-container{
        display: grid;
        gap: 25px;
        grid-template-columns: repeat(2, 1fr);
    }
    .breadcrumb-section .breadcrumb-bg nav {
        display: block;
        text-align: start;
    }
    .breadcrumb-section .breadcrumb-heading{
        font-size: 22px;
    }

    .service-detail-page .service-detail-content h2{
        font-size: 30px;
    }
}


@media only screen and ( max-width:768px){
    .footer-other-logo{
        margin-bottom: 15px;
    }
    .top-header{ display: flex; flex-wrap: wrap; justify-content: center;}
}


@media only screen and ( max-width:650px){
    .container{ 
        max-width: 99%;
    }
    .mb-80{ margin-bottom: 40px;}
    .mt-80{ margin-top: 40px;}
    h4{ font-size: 16px;}
    .btn-display-none{ display: none;}
    .tag-line:before {width: 10px;height: 3px;top: -14px; }
    .tag-line:after {width: 35px;height: 3px;top: -14px; }
    .section-container:hover .tag-line:before{width: 35px; }
    .section-container:hover .tag-line::after{width: 10px;margin-left: 45px; }
    .description{font-size: 13px;margin-bottom: 10px; }
    .heading-tag{font-size: 12px;margin-bottom: 5px; padding: 4px 10px;}
    .heading{font-size: 19px;margin-bottom: 10px; }
    .btn-box {padding: 6px 14px;font-size: 12px; }
    .btn-box i{font-size: 12px; }
    .owl-dot {width: 15px; height: 3px; margin-top: 15px !important;}
    .top-header .header-contact-info{display: none;}
    .tag-line-header{display: none;}
    .top-header{justify-content: center;}

    .ham { width: 50px; margin: 0px; }
    .nav-bar .nav-connect{
        gap: 6px;
    }
    /* .nav-bar .menu-section .nav-connect .call a:last-child{display: black;} */
    .top-header a {
        font-size: 12px;
    }    
    .top-header i {
        font-size: 15px;
        font-weight: 400;
        margin-right: -3px;
    }
    .nav-bar .menu-section {
        display: flex;
        gap: 10px;
        align-items: center;
    }
    .top-header .social-media-container div{
        flex-wrap: wrap;
        gap: 0px 8px;
        padding: 5px 10px;
    }
    .nav-bar .iso-nav-logo {
        display: none;
    }
    .nav-bar .container .logo {
        max-width: 250px;
        padding: 0px;
    }
    .nav-bar .menu-section .menu{
        padding: 60px 30px;
    }
    .menu .drop-down .drop-down-menu{
        width: 320px;
        height: 70vh;
        padding: 5px;
        overflow-y: scroll;
    }


    .banner-silder .banner-content{
        padding: 15px 30px 30px 15px;
    }
    .banner-silder .banner-content h6 {
        padding: 5px 0px 0px;
        font-size: 13px;
    }
    .banner-silder .banner-content h1{
        font-size: 18px;
        margin-bottom: 10px;
    }
    .banner-silder .owl-dot {
        width: 15px;
        height: 3px;
    }
    .banner-section{
        margin-bottom: 40px;
    }

    .about-section {
        padding: 0px;
        background-image: none;
    }
    .about-section.about-section22 {
        padding: 40px 0px;
    }
    .quality-img img {
        width: 100%;
    }
    .adv-section .adv-section-container .adv-content{
        padding: 15px;
    }
    .adv-section .adv-section-container .adv-content .heading{
        font-size: 22px;
    }
    .perspective-section .perspective-items {
        padding: 15px;
    }
    .perspective-section .perspective-items h5{
        font-size: 15px;
    }
    .perspective-section .perspective-items img {
        max-width: 45px;
        margin-bottom: 8px;
    }

    .about-imgs{
        margin-top: 20px;
    }
    .funfact {
        padding: 40px 0px;
    }
    .funfact .funfact-content{
        gap: 20px 10px ;
        grid-template-columns: repeat(2, 1fr);
    }
    .funfact .funfact-content .funfact-items{
        padding: 10px;
        margin-top: 14px;
    }
    .funfact .funfact-content .funfact-items h2 span:first-child{
        font-size: 24px;
    }
    .funfact .funfact-content .funfact-items h2{
        font-size: 24px;
    }
    .funfact .funfact-content .funfact-items .description2{
        font-size: 14px;
    }
    .funfact .funfact-content .funfact-items .funfact-icon{
        margin-top: -35px;
        margin-bottom: 5px;
     }
     .funfact .funfact-content .funfact-items .funfact-icon i{
        font-size: 24px;
        padding: 10px;
    }

    .products-section .products-items-container{
        display: grid;
        gap: 20px 10px;
        grid-template-columns: repeat(2,1fr);
    }
    .products-section .products-items-container .products-items .product-name h5 a{
        font-size: 13px;
    }
    .products-section .products-items-container .products-items .product-name .arrow-icon{
        display: none;
    }
    .products-section .products-items-container .products-items .product-name{
        display: flex;
        justify-content: center;
        padding: 8px 2px;
        border-radius: 0px 0px 6px 6px;
    }

    .product-application-section .product-application-container .product-application-items .prod-app-img{
        margin: 0px;
    }
    .product-application-section .product-application-container .product-application-items h4{
        /* margin-top: 7px; */
        font-size: 13px;
    }
    
    .wcu-img{
        margin-top: 10px;
    }
    .wcu-section .wcu-points{
        display: grid;
        gap: 5px;
        grid-template-columns: repeat(1, 1fr);
        padding: 15px;
        border-left: 3px solid var(--thm-base);
    }
    .wcu-section .wcu-points p{
        font-size: 14px;
    }
    .wcu-section .wcu-points p i{
        font-size: 12px;
    }
    .points-section-container{
        display: grid;
        gap: 0px;
        grid-template-columns: repeat(1, 1fr);
    }
    .points-section-items{
        padding: 0px;
        border: none;
        border-bottom: 1px solid var(--thm-light);
        margin-bottom: 10px;
        border-radius: 0px;
    }
    .points-section .step{
        text-align: center;
        margin-bottom: 15px;
    }
    .points-section .step img{
        max-width: 50px;
        margin-bottom: 10px;
    }
    .points-section .step h4{
        margin-bottom: 5px;
    }
    .tagline-section{
        background-position: right bottom;
        padding: 20px 0px;
    }
    .access-adv-section{
        margin: 0px;
    }


    .points-section.about-page-points .points-section-container{
        display: grid;
        gap: 0px;
        grid-template-columns: repeat(1, 1fr);
    }
    .points-section.about-page-points .points-section-items{
        border: 1px solid var(--thm-base2);
    }


    .points-section.about-page-points .step{
        margin-bottom: 0px;
    }
    .points-section.about-page-points .points-section-items .step img {
        max-width: 40px;
    }

    .points-section.about-page-points .points-section-items .step h4 span {
        font-size: 13px;
    }
    .wcu-section.about-wcu-section .wcu-points {
        display: grid;
        gap: 10px 20px;
        grid-template-columns: repeat(1, 1fr);
    }

    .our-products-section {
        background-color: var(--thm-base2-light);
        padding: 60px 0px;
    }
    .our-products-section .products-items-container{
        display: grid;
        gap: 25px;
        grid-template-columns: repeat(1, 1fr);
    }


    
    .brands-section .brands-silder img {
        margin: 10px 0px;
        padding: 0px 5px;
    }




    .testimonial-section .testimonial-silder .testimonial-silde-items {
        margin: 2px;
        padding: 15px;
    }
    .testimonial-section .testimonial-silder .testimonial-silde-items .name-section {
        gap: 0px;  
    }
    .testimonial-section .testimonial-silder .testimonial-silde-items .name-section div img{
        width: 75%;
    }
    .testimonial-section .testimonial-silder .testimonial-silde-items .name-section div h4{
        font-size: 14px;
    }
    .reating{
        font-size: 10px;
    }
    .callToAction-section .calltoaction-content h2{
        font-size: 20px;
        margin-bottom: 15px;
    }
    .footer-container{
        padding: 40px 10px 10px 10px;
    }
    .footer-quick-links{
        display: none;
    }
    .footer-logo a img{
        width: 280px;
    }
    .footer-other-logo a img{
        max-width: 140px;
    }
    .footer-services.grid-footer-services {
        display: block;
        gap: 0px 15px;
        margin-bottom: 15px;
        flex-wrap: wrap;
    }
    .footer-services.grid-footer-services li{
        margin-bottom: 0px;
    }
    .footer-container .description{
        font-size: 13px;
        margin-bottom: 0px;
    }
    .footer-container .sub-heading{
        font-size: 17px;
        margin-bottom: 15px;
    }
    .footer-services li{
        margin-bottom: 5px;
        overflow: hidden;
    }
    .footer-services li a{
        font-size: 13px;
    }
    .footer-contact p a{
        font-size: 13px;
    }
    .footer-contact p{
        font-size: 13px;
    }
    .footer-bottom-section{
        padding: 20px 0px;
    }
    .footer-bottom-section .container{
        display: block;
        text-align: center;
    }
    .footer-bottom-section p {
        font-size: 12px;
    }
    .footer-bottom-section .social-media{
        margin-top: 10px;
        justify-content: center;
    }
    .footer-bottom-section .social-media i{
        font-size: 16px;
    }
    .footer-bottom-section .social-media a:hover::before{
        width: 35px;
        height: 35px;
    }
    .breadcrumb-section .breadcrumb-bg {
        padding: 40px 0px;
        background-size: cover;
        background-position: right;
    }
    .breadcrumb-section .breadcrumb-bg nav{
        display: block;
    }
    .breadcrumb-section .breadcrumb-heading {
        font-size: 18px;
    }
    .breadcrumb-section .breadcrumb .breadcrumb-item {
        font-size: 13px;
    }
    .about-section .about-page-img{
        width: 100%;
        margin-bottom: 30px;
        border: 12px solid var(--thm-base3-light);
    }
    .our-products-section.our-products-section2 .products-items-container{
        display: grid;
        gap: 20px;
        grid-template-columns: repeat(1,1fr);
    }
    .contact-info-page .contact-info{
        display: grid;
        grid-template-columns: repeat(1, 1fr);
    }
    .contact-info-page .contact-info .contact-info-items i{
        font-size: 22px;
        padding: 10px;
    }
    .contact-info-page .contact-info .contact-info-items p{
        font-size: 15px;
    }
    .contact-info-page .contact-info .contact-info-items a{
       font-size: 14px;
       display: inline-block;
    }
    .contact-info-page .contact-info .contact-info-items span {
        font-size: 15px;
    }
    .contact-info-page .contact-info-social {
        gap: 0px 15px;
    }
    .contact-info-page .contact-info-social h4{
        font-size: 16px;
    }
    .form-heading {
        font-size: 18px;
    }
    .contact-info-page .form-section .row{
        padding: 15px;
    }

    .form-section { padding: 20px 15px;}
    .form-heading { display: inline-block; font-size: 16px; margin-bottom: 10px; padding-bottom: 2px; border-bottom: 1px solid var(--thm-base);}
    .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;}

    .service-detail-page .side-bar li a {
        padding: 8px 10px;
        font-size: 13px;
    }
    .service-detail-page .side-bar-form .form-section .form-heading{
        font-size: 16px;
    }
    .service-detail-page .service-detail-content h2{ font-size: 22px; margin-bottom: 10px;}
    .service-detail-page .service-detail-content h3 {
        font-size: 15px;
        margin-bottom: 10px;
    }
    .social-btn {
        width: 50px;
    }
    .social-btn img {
        width: 30px;
    }
    #back-to-top-button { width: 40px; height: 40px; bottom: 20px; right: 20px;}
    #back-to-top-button::after { font-size: 20px; line-height: 40px;}
}