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

@media only screen and ( max-width: 1120px){
    .our-products-section .products-items-container {
        display: grid;
        gap: 25px;
        grid-template-columns: repeat(3, 1fr);
    }
    .about-section {
        padding: 30px;
        background-image: none;
    }
}
@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;}
    .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%;
        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;
    }
    .menu .drop-down .drop-down-menu.show-drop-down{
        display: block;
    } 
    .banner-contact-form{
        display: none;
    }
    .about-section {
        padding: 0px;
    }
    .about-imgs{
        display: grid;
        gap: 10px;
        grid-template-columns: repeat(2, 1fr);
        margin-top: 10px;
    }
    .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);
    }
}

@media only screen and ( max-width:768px){
    .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: 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: 15px; margin-top: 15px !important;}
    .top-header .header-contact-info{display: none;}
    .tag-line-header{display: none;}
    .top-header{justify-content: center;}
    .nav-bar .menu-section .nav-connect .call a:last-child{display: none;}
    .nav-bar .menu-section {
        display: flex;
        gap: 10px;
        align-items: center;
    }
    .banner-silder .banner-img{
        min-height: 400px;
    }
    
    .banner-silder .banner-content{
        padding: 10px;
    }
    .banner-silder .banner-content h6 {
        padding: 5px 10px;
        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: 80px;
    }

    .about-section {
        padding: 0px;
        background-image: none;
    }
    .about-imgs{
        display: grid;
        gap: 10px;
        grid-template-columns: repeat(2, 1fr);
        margin-top: 10px;
    }
    .our-products-section{
        padding: 40px 0px;
    }
    .our-products-section .products-items-container{
        display: grid;
        gap: 12px;
        grid-template-columns: repeat(2,1fr);
    }
    .our-products-section .products-items-container .products-items .product-name{
        padding: 2px 0px;
    }
    .our-products-section .products-items-container .products-items .product-name h5 a{
        font-size: 13px;
        margin-left: -22px;
    }
    
    .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: 20px;
        grid-template-columns: repeat(1, 1fr);
    }
    .points-section-items{
        padding: 10px;
    }
    .points-section .step{
        text-align: center;
        margin-bottom: 15px;
    }
    .points-section .step img{
        margin-bottom: 10px;
    }
    .points-section .step h4{
        margin-bottom: 10px;
    }
    .tagline-section{
        background-position: right bottom;
        padding: 20px 0px;
    }
    .access-img-content{
        position: absolute;
        top: 20px;
        left: 20px;
    }
    .access-btn{
        position: absolute;
        bottom: 20px;
        left: 20px;
    }
    .access-img-content h3 {
        font-size: 18px;
    }
    .access-img-content.access-img-content3 p{
        color: #fff;
        font-size: 15px;
    }


    .adv-section .adv-section-container{
        display: grid;
        gap: 20px;
        grid-template-columns: repeat(1, 1fr);
    }
    .adv-section .adv-section-container .adv-content{
        padding: 20px;
    }
    .adv-section .adv-section-container .adv-content.adv-content2 .adv-container{
        padding: 20px 0px 20px 20px;
    }
    /* .adv-section .adv-section-container .adv-content-img{
        background-image: url(../images/image-24.jpg);
        background-size: cover;
        background-position: center, center;
        height: 200px;
    } */
    .brands-section{
        padding: 40px 0px;
    }
    .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{
        padding: 20px 0px 50px 0px;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: right bottom;
    }
    .callToAction-section .calltoaction-content h2{
        font-size: 24px;
        margin-bottom: 15px;
    }
    .footer-container{
        padding: 40px 10px 10px 10px;
    }
    /* .footer-logo a img{
        width: 35%;
    } */
    .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-heading {
        font-size: 30px;
    }
    .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: 25px;
    }
    .contact-info-page .contact-info .contact-info-items p{
        font-size: 16px;
    }
    .contact-info-page .contact-info .contact-info-items a{
       font-size: 14px;
    }
    .contact-info-page .contact-info-social h4{
        font-size: 18px;
        margin-top: 30px;
    }
    .contact-info-page .contact-info-social .social-media{
        margin-bottom: 30px;
    }
    .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 .service-detail-content h3 {
        font-size: 22px;
        margin-bottom: 10px;
    }
    .service-detail-page .side-bar li a {
        padding: 8px 20px;
        font-size: 13px;
    }
    .service-detail-page .side-bar-form .form-section .form-heading{
        font-size: 16px;
    }
    .service-detail-page .service-detail-content h5 {
        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;
    }
}