@media only screen and ( max-width: 1650px) {
    .top-header{
        padding: 14px 100px;
    }
    .nav-bar{
        padding: 12px 80px;
    }
}

@media only screen and ( max-width: 1450px) {
    .top-header{
        padding: 14px 50px;
    }
    .nav-bar{
        padding: 12px 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;
    }
    .banner-section .banner-content {
        width: 85%;
        margin: auto;
        z-index: 20;
        padding: 130px 0px;
    }
}
@media only screen and ( max-width: 1200px){
    .roofing-points-section .roofing-points{
        margin-bottom: 25px;
    }
    .work-process-section .process-step{
        margin-bottom: 25px;
    }
    .wcu-section .wcu-container .wcu-img{
        width: 120%;
    }
}

@media only screen and ( max-width: 1140px){
    h1{ font-size: 40px;} 
    .ham { display: block; z-index: 20;}
    .nav-bar .menu{
        width: 100%;
        height: 100vh;
        position: fixed;
        display: block;
        background-color: var(--thm-base2);
        left: -100%;
        top: -100px;
        padding: 100px 60px;
        z-index: 5;
        transition: 0.5s;
        border-radius: 50%;
    }
    .nav-bar .menu.show-menu{ left: 0; top: 0; border-radius: 0; }
    .nav-bar .menu li{ padding: 6px 0px; margin: 5px 0px; }
    .nav-bar .menu li:hover{ color: var(--thm-base); background-color: transparent; }
    .nav-bar .menu li:hover::before{ width: 0%; }
    .nav-bar .menu > .active{ display: inline; background-color: transparent; }
    .nav-bar .menu .active a{ color: var(--thm-base); }
    .nav-bar .menu .active::before{ background: linear-gradient(to right, #9F7337, #BA9956, #D7C278, #F4EB9A, #D7C278, #BA9956, #9F7337);}

    .sticky .menu li a,
    .sticky .menu li i{ color: var(--thm-white);}
    .sticky .menu .active a{ color: var(--thm-base);}
    .inner-pages-header .menu li a,
    .inner-pages-header .menu li i{ color: var(--thm-white);}
    .inner-pages-header .menu li:hover a,
    .inner-pages-header .menu li:hover i{ color: var(--thm-base);}
    .inner-pages-header .menu .active a{ color: var(--thm-base);}
   
    .menu .drop-down .drop-down-menu{
        display: none;
        top: 45px !important;
        width: 900px;
        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;
    }
    .callToAction-section .callToAction-container{
        width: 90%;
        margin: auto;
        text-align: center;
        color: var(--thm-white);
    }
}
@media only screen and ( max-width: 991px){
    .menu .drop-down .drop-down-menu{
        width: 420px;
        height: 74vh;
        overflow-y: scroll;
    }
    .menu .drop-down .drop-down-menu .menu-left{
        margin-bottom: 10px;
    }

    .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;
    }
    .roofing-solution-section .roofing-solution-container .rSolution-content {
        display: grid;
        gap: 15px;
        grid-template-columns: repeat(3,1fr);
    }
    .contact-info{
        display: grid;
        gap: 20px;
        grid-template-columns: repeat(1, 1fr);
    }
    .contact-info-social {
        margin-top: 15px;
        padding-top: 15px;
        margin-bottom: 10px;
    }
    .service-detail-page .side-bar{
        margin-bottom: 0px;
        margin-top: 30px;
    }
    .service-detail-page .service-detail-content{
        margin-right: 0px;
    }
}

@media only screen and ( max-width: 850px){
    .social-media-container div:first-child{
        display: none;
    }
}
@media only screen and ( max-width: 768px){
    h1{ font-size: 35px;} 
    .banner-section{
        position: relative;
        min-height: 550px;
        padding-top: 140px;
        background-repeat: no-repeat;
        background-size: cover;
        overflow: hidden;
    }
    .year-section .year-content{
        flex-wrap: wrap;
        padding: 40px 0px;
    }


    /* .year-section{
        min-height: 500px;
        padding-top: 300px;
        background-image: url(../images/photovoltaic-panels-on-the-house-roof-2022-08-19-05-49-58-utc.jpg);
        background-position: right;
        background-repeat: no-repeat;
        background-size: cover;
        box-shadow: rgba(0, 0, 0, 0.07) 0px 3px 8px;
    } */
    .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: 17px;}
    h4{ font-size: 16px;}
    h5{ font-size: 16px;}
    .container{ max-width: 98%;}
    .heading-tag{ font-size: 12px; margin-bottom: 10px;}
    .heading-tag img{ width: 25%;}
    .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-box{ padding: 7px 15px; font-size: 12px;}
    .owl-dot { width: 8px; height: 8px; margin-top: 10px !important;}
    .top-header{ padding: 10px 15px; }
    .nav-bar{ padding: 10px 15px;}
    .nav-bar .logo .white-logo,
    .sticky .logo .colour-logo,
    .inner-pages-header .logo .colour-logo{ width: 70%; }
    .top-header .header-tag-line p{ font-size: 12px;}
    .top-header .header-tag-line i{ font-size: 15px; margin-top: -3px;}
    .top-header .header-tag-line{ display: none;}
    .top-header{ justify-content: center;}
    .nav-connect div > a i{ font-size: 18px; padding: 13px; margin-right: -10px;}
    .nav-connect > a{ display: none;}
    .nav-bar .menu{ padding: 100px 20px;}
    .menu .drop-down .drop-down-menu .menu-left li a{ padding: 0px 10px; font-size: 14px;}
    .menu .drop-down .drop-down-menu{
        max-width: 320px;
        height: 74vh;
        overflow-y: scroll;
    }
    .inner-pages-header .menu li a{
        font-size: 14px;
    }
    .banner-section .banner-silder .banner-content{
        width: 100%;
        padding: 100px 0px 0px;
    }
    .banner-section{
        min-height: 500px;
        padding-top: 100px;
        background-position: center;
    }

    .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: 10px;
        border: 3px solid var(--thm-footer);
    }
    .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;
    }
    .about-section .about-img{
        margin-bottom: 15px;
    }
    .year-section .year-content{
        padding: 20px 0px;
    }
    .year-section .year-content div span{
        font-size: 70px;
        margin-bottom: 14px;
    }
    .year-section .year-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 .service-content h3 a{
        font-size: 15px;
    }

    .our-service-section .service-container .service-items .service-content{
        padding: 12px;
    }
    .our-service-section .service-container  .service-items .service-type a{ font-size: 13px;}
    .our-service-section.service-page .service-container  .service-items .service-type a{ font-size: 14px;}
    .our-service-section .service-container  .service-items .btn-box{
        padding: 14px 18px;
        font-size: 12px;
    }
    .callToAction-section .container{
        padding: 30px 10px;
    }

    


     .why-choose-us-section{
        padding: 40px 0px;
     }
    .why-choose-us-section .why-choose-us-items h5{
        font-size: 16px;
    }
    .why-choose-us-section .why-choose-us-items img{
        max-width: 45px;
    }

    .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;
        border-radius: 4px;
        margin-bottom: 0px;
        transition: 0.5s;
    }


    .work-process-section{
        padding: 40px 0px;
    }
    .work-process-section .process-step{
        padding: 10px;
        margin-bottom: 15px;
    }
    .work-process-section .process-step .process-icon img{
        width: 90%;
    }
    .work-process-section .process-step h5{
        margin: 5px 0px 10px 0px;
    }
    .testimonials-section .testimonials-silder-div{
        padding: 15px;
    }
    .testimonials-section .testimonials-silder-div .person-info div h5 {
    font-weight: 400;
    font-size: 14px;
    color: #ffffff99;
}
    .testimonials-section .testimonials-silder-div .person-info .reating{
        font-size: 10px;
    }
    

    
    .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: 60px 0px 10px;}
    .breadcrumb-section .breadcrumb-bg nav{ padding: 10px; border-radius: 15px;}
    .breadcrumb-section .breadcrumb-heading { font-size: 20px;}
    .breadcrumb-section .breadcrumb { margin-top: 0px;  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;} 
    
    .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;
    }

    .form-section { padding: 20px 15px;}
    .form-heading { display: inline-block; font-size: 16px; margin-bottom: 10px;}
    .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 h4{
        font-size: 16px;
        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;
    }
    .service-detail-page .side-bar li a {
        font-size: 13px;
    }

}