@media only screen and ( max-width: 1650px) {
    .top-header{ padding: 14px 80px;}
    .nav-bar{ padding: 12px 80px;}
}
@media only screen and ( max-width: 1450px) {
    .top-header{ padding: 10px 40px;}
    .top-header .social-media-container div:nth-child(2){ display: none;}
    .nav-bar{ padding: 8px 40px;}
    .roofing-points-section{ margin: 20px; margin-bottom: 60px;}
}
@media only screen and ( max-width: 1250px){
    .container{  max-width: 95%;}
    .nav-connect .call div:last-child{ display: none;}
}
@media only screen and ( max-width: 1200px){
    .roofing-points-section .roofing-points{ margin-bottom: 25px;}
    .work-process-section .process-step{ margin-bottom: 25px;}
}

@media only screen and ( max-width: 1140px){
    h1{ font-size: 40px;} 
    .ham { display: block; z-index: 20;}
    .menu{ width: 100%; height: 100vh; position: fixed; display: block; background-color: var(--thm-white); left: -100%; bottom: -100%; padding: 100px 60px; z-index: 5; transition: 0.5s; border-radius: 50%;}
    .menu.show-menu{ left: 0; bottom: 0; border-radius: 0; }
    .menu li{ margin: 5px 0px; justify-content: center;}
    .menu li:hover{ color: var(--thm-base); background-color: transparent; }
    .menu li:hover::before{ width: 0%; }
    .menu > .active{  background-color: transparent; }
    .menu .active a{ color: var(--thm-base); }

    .menu .drop-down .drop-down-menu{ display: none; top: 45px !important; width: 100%; left: 0px;}
    .menu .drop-down .drop-down-menu.show-drop-down{ display: block;}
    .menu .drop-down .drop-down-menu .arrow-top{ left: 74px;}
    .social-media-container div:nth-child(2){ display: none;}
    .menu .drop-down .drop-down-menu .menu-left li {
        text-align: center;
    }
}
@media only screen and ( max-width: 991px){
    .menu .drop-down .drop-down-menu .menu-left{ margin-bottom: 10px;}
    .banner-section { min-height: 600px;}
    .banner-section .banner-silder .banner-content { padding: 140px 0px;}

    .wcu-section .wcu-container{ grid-template-columns: repeat(1, 1fr);}
    .wcu-container.wcu-page-container{ grid-template-columns: repeat(2, 1fr);}
    .wcu-section .wcu-container .text-right .wcu-items{ text-align: start;}
    .wcu-section.wcu-page-section .wcu-container.wcu-page-container { gap: 20px; grid-template-columns: repeat(2, 1fr);}

    .vismis-section .vismis-bg{ width: 62%;}
    .our-service-section.service-page .service-container.service-container-items .service-items .service-img img { max-width: 300px;}
    .contact-info{ display: grid; gap: 20px; grid-template-columns: repeat(1, 1fr);}
    .contact-info-social{ margin: 40px 0px;}
    .service-detail-page .side-bar{ margin-bottom: 0px; margin-top: 30px;}
}

@media only screen and ( max-width: 850px){
    .social-media-container div:first-child{ display: none;}
    .vismis-section .vismis-bg{ width: 70%;}
}
@media only screen and ( max-width: 768px){
    h1{ font-size: 35px;} 
    .vismis-section .vismis-bg .vismis-content{ padding-right: 0px;}
    .vismis-section .vismis-bg{ width: 100%; background-color: var(--thm-base); -webkit-clip-path: none; clip-path: none; padding-left: calc((100% - 1170px) / 2);}
    .callToAction-section .callToAction-container{ width: 100%; margin: auto; text-align: center; color: var(--thm-white);}
}

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

    .top-header{ padding: 10px 15px; justify-content: center;}
    .top-header .header-tag-line p{ font-size: 12px;}
    .top-header .header-tag-line i{ font-size: 15px; margin-top: -3px;}
    .top-header .social-media-container .social-media{ display: none;}
    .nav-bar{ padding: 10px 15px;}
    .nav-bar .logo img {max-width: 160px;}

    .nav-connect div > a i{ font-size: 18px; padding: 13px; margin-right: -10px;}
    .nav-connect > a{ display: none;}
    .menu{ padding: 120px 20px;}
    .menu .drop-down .drop-down-menu .menu-left li a{ padding: 0px 10px; font-size: 14px;}

    .banner-section .banner-silder .banner-content{ width: 100%; padding: 20px 0px;}
    .banner-section{ min-height: 500px; padding-top: 100px; background-position: center;}
    .banner-section .shape-1,
    .banner-section .shape-2,
    .banner-section .shape-3,
    .banner-section .shape-5,
    .banner-section .shape-6 { display: none;}
    .banner-content h6{ padding: 7px 15px; font-size: 12px;}
    .banner-content p{ margin-bottom: 15px; font-size: 12px;}

    .roofing-points-section{ padding: 20px 0px; margin: 0px;}
    .roofing-points-section .roofing-points{ padding: 14px; margin-bottom: 15px;}
    .roofing-points-section .roofing-points h4{ font-size: 16px; padding-bottom: 3px;}
    .roofing-points-section .roofing-points i{ font-size: 16px;}


    .vismis-section .vismis-bg .container { padding: 40px 0px;}
    .vismis-section .vismis-bg .vismis-content div h4 { font-size: 24px; font-weight: 200;}
    .vismis-section .vismis-bg .vismis-content div h3{ font-size: 18px;}

    .our-service-section .service-container .service-items .service-content a h4{ font-size: 16px;}
    .our-service-section .service-container .service-items{ padding: 6px;}
    .our-service-section .service-container .service-items .service-content{ padding: 12px;}
    .our-service-section .service-container  .service-items .service-type{ padding: 12px;}
    .our-service-section .service-container  .service-items .btn-box{ padding: 14px 18px; font-size: 12px;}

    .wcu-section .wcu-container .wcu-img{ margin-bottom: 20px;}
    .wcu-section .wcu-container .wcu-items i{ font-size: 25px;}
    .wcu-section .wcu-container .wcu-items{ margin-bottom: 20px; border: 1px solid var(--thm-footer); padding: 10px; background-color: var(--thm-base2-light); margin-bottom: 15px;}
    .wcu-section .wcu-container .wcu-items h5{ font-size: 16px;}
    .wcu-section .wcu-container .wcu-items .description{ margin-bottom: 0px;}
    .wcu-section .wcu-btn{ text-align: center; margin-top: 10px;}

    .wcu-container.wcu-page-container{ grid-template-columns: repeat(1, 1fr);}
    .wcu-section .wcu-container.wcu-page-container > .wcu-items{ padding: 10px; border: 1px solid var(--thm-light); background-color: transparent; margin-bottom: 0px; transition: 0.5s;}
    .wcu-section.wcu-page-section .wcu-container.wcu-page-container { gap: 20px; grid-template-columns: repeat(1, 1fr);}

    .testimonials-section { padding: 40px 0px;}
    .testimonials-section .testimonials-silder-div{ padding: 15px;}
    .testimonials-section .testimonials-silder-div .person-info .reating{ font-size: 10px;}

    .callToAction-section{ padding: 40px 0px;}
    .callToAction-section .callToAction-container{ width: 100%; margin: auto; text-align: center; color: var(--thm-white);}
    .callToAction-section .callToAction-container .callToAction-btn{ display: block; gap: 5px; align-items: center; justify-content: center; flex-wrap: wrap; margin-top: 15px;}
    .callToAction-section .callToAction-container .callToAction-btn br{ display: block;}
    .callToAction-section .callToAction-container .callToAction-btn a{ font-size: 12px; margin: 5px 0px;}
    .callToAction-section .callToAction-container .callToAction-btn span{ font-size: 16px;}

    .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{ grid-template-columns: repeat(1, 1fr);}
    .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: 15px 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: 60px 0px;}
    .breadcrumb-section .breadcrumb-heading { font-size: 22px;}
    .breadcrumb-section .breadcrumb { margin-top: 5px;  padding: 4px 10px;}
    .breadcrumb-section .breadcrumb .breadcrumb-item a { font-size: 12px;}
    .breadcrumb-section .breadcrumb .breadcrumb-item.active { font-size: 12px;}
    .breadcrumb-section .breadcrumb .symbol-breadcrumb { font-size: 10px; padding: 0px 6px; margin-top: 0px;} 

    .our-service-section.service-page .service-container.service-container-items .service-items { display: block;}
    .our-service-section.service-page .service-container.service-container-items .service-items .service-img img { max-width: 100%; height: 100%; margin-bottom: 10px; object-fit: cover;}
    
    .service-type-heading { font-size: 15px;}
    .our-service-section.service-page .service-items { margin-bottom: 18px;}
    .our-service-section2{ padding: 40px 0px;}
    
    .contact-info-section{ padding: 40px 0px;}
    .contact-info-item { gap: 10px; padding: 10px;}
    .contact-info-item i{ font-size: 22px; padding: 13px;}
    .contact-info-item p{ font-size: 13px;}
    .contact-info-item .bg-shape{ height: 3px;}
    .contact-info-social{ margin: 20px 0px;}
    .contact-info-social .social-media{ margin-top: 10px; padding: 8px 20px; border-radius: 2px;}
    .contact-info-social .social-media a:hover::before{ width: 35px; height: 35px;}

    .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 h2{ font-size: 20px; margin-bottom: 10px;}
    .service-detail-page .service-detail-content h5{ font-size: 15px; margin-bottom: 10px;}
    .service-detail-page .service-detail-content h5 i{ font-size: 13px;}
    .service-detail-page .side-bar{ margin-top: 20px; padding: 10px;}
    .service-detail-page .side-bar  .call-container{ padding: 30px;}
    .service-detail-page .side-bar  .call-container h4{ font-size: 15px; margin-bottom: 10px;}
    .service-detail-page .side-bar .call-container .service-call{ margin-bottom: 15px; font-size: 14px;}

}