/* Responsive CSS */

@media screen and (max-width:1350px) and (min-width:850px) {
	html{overflow-x:hidden; }
	.banner-wrap h2{
		font-size: 40px !important;
	}
	.banner-service {
	    padding: 10px !important;
	    gap: 5px;
	}
}

@media screen and (max-width: 980px){
	.fse-overlap-image{ position:relative !important; right:auto !important; bottom:auto !important; margin:25px 0 !important;}
	.wp-block-section-01 h2, .wp-block-section-02 h2{ font-size:28px !important; }
	.wpcf7 input[type="text"], 
	.wpcf7 input[type="tel"], 
	.wpcf7 input[type="email"], 
	.wpcf7 textarea{ 
		width:100%;
	}	
	.blog-area .wp-block-post-template{
		grid-template-columns: auto auto;
	}
	.menu-header,
	.menu-header p,
	.banner-wrap h2,
	.banner-wrap p,
	.team-text-box,
	.top-bar p{
		text-align: center;
	}
	.top-bar .wp-block-social-links,
	.menu-header nav,
	.menu-header ul,
	.menu-header .wp-block-buttons,
	.banner-wrap .wp-block-buttons,
	.logo-box {
		justify-content: center;
	}
	.services-main-box,.team-main-box {
	    display: grid !important;
	    grid-template-columns: auto auto;
	    gap: 80px;
	}
	.about-us-box {
	    flex-wrap: nowrap !important;
		justify-content: center !important;
		align-items: center !important;
	}
	.inner-col-service {
	    flex-wrap: nowrap !important;
	    gap: 8px !important;
	}
}
@media screen and (max-width:991px) and (min-width:501px){
	.top-bar .columnn-1 p, .top-bar .columnn-2 p{
		justify-content: center;
	}
	.top-bar .wp-block-columns{
		display: grid;
		grid-template-columns: auto auto;
	}
	.top-bar .wp-block-columns .wp-block-column:nth-child(3){
		display: none;
	}
}
@media screen and (max-width:767px) {
	*{box-sizing:border-box;}
	.top-bar .columnn-1 p, .top-bar .columnn-2 p{
		justify-content: center;
	}
	.top-bar .wp-block-columns .wp-block-column:nth-child(3){
		display: none;
	}
	.wp-block-navigation__responsive-container.is-menu-open.has-modal-open{ padding:25px;}
	.banner-wrap:after {
	    width: auto;
	}
	.banner-wrap h2, .project-section .project-sec-heading, .solar-services h2, .testimonial-box h2.main-heading, .team-section h2, .blog-section .main-heading{
		font-size: 32px !important;
	}
	.blog-section p,
	.testimonial-box{
		text-align: center !important;
	}
	.banner-service{
		margin-top: 15px !important;
		padding: 10px !important;
		gap: 15px;
		display: flex !important;
	}
	.inner-col-service h3{
		font-size: 20px !important;
	}
	.team-main-box {
	    display: flex !important;
	}
	.about-us-box {
	    flex-wrap: wrap !important;
	}
	.project-section .project-box-info{
		max-width: 100%;
	}
	footer .footer-div {
		text-align: center;
	}
	.site-blog-box,
	.site-blog-box h3,
	.site-blog-box p{
		text-align: center;
	}
	footer .wp-block-columns:has(.footer-div){
		gap: 25px;
	}
	footer .footer-div .wp-block-social-links{
		justify-content: center;
	}
}

@media screen and (max-width:991px) and (min-width:768px){
	.top-bar .wp-block-social-links{
		justify-content: center;
	}
	.banner-wrap h2{
		font-size: 38px !important;
	} 

	.blog-section .site-blog-box .wp-block-columns, .banner-service{
		flex-wrap: nowrap !important;
	}
	.main-slider .wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column:nth-child(1),
	.main-slider .wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column:nth-child(3){
		flex-basis: 5% !important;
	}
	.main-slider .wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column:nth-child(2){
		flex-basis: 90% !important;
	}
	footer .wp-block-columns{
		display: grid;
		grid-template-columns: 50% 50%;
		gap: 12px;
	}
	footer .footer-2, .banner-service .inner-col-servicess{
		display: none;
	}
	.banner-service{
		padding: 20px 10px !important;
	}
	.banner-service.wp-block-columns:not(.is-not-stacked-on-mobile)>.feat-cols-1,
	.banner-service.wp-block-columns:not(.is-not-stacked-on-mobile)>.feat-cols-2,
	.banner-service.wp-block-columns:not(.is-not-stacked-on-mobile)>.feat-cols-3{
		flex-basis: 33.33% !important;
	}
	.team-main-box {
	    display: grid !important;
	    grid-template-columns: auto auto;
	    gap: 80px;
	}
}

@media screen and (max-width:1199px) and (min-width:768px){
	.project-section .project-outer-boxes{
		flex-wrap: nowrap !important;
		gap: 15px;
	}
	.project-section .project-box-info{
		max-width: 100%;
		padding: 10px !important;
	}
	.project-section .project-box .project-bg{
		min-height: 400px !important;
	}
	.banner-service h3{
		font-size: 20px !important;
	}	
	.project-section .project-sec-heading, .solar-services h2, .testimonial-box h2.main-heading, .team-section h2, .blog-section .main-heading{
		font-size: 34px !important;
	}
}

@media screen and (max-width:1550px) and (min-width:1300px) {
	.top-bar .header-social-icons ul.social-icons{
		gap: 15px !important;
	}
	.wp-block-button.header-btn a {
		padding: 10px !important;
	}
}

@media screen and (max-width:1199px) and (min-width:768px){
	.header-navv .wp-block-navigation ul {
		gap: 13px;
	}
	.header-navv .wp-block-navigation ul li{
		font-size: 15px !important;
	}
}

@media screen and (max-width:1499px) and (min-width:1200px){
	.header-navv .wp-block-navigation ul {
		gap: 12px 25px;
	}
	.wp-block-button.header-btn a {
        font-size: 13px !important;
        padding: 12px 16px !important;
    }

}
@media screen and (max-width:1599px) and (min-width:992px){
	.columnn-1,.columnn-2, .columnn-3,.columnn-4{
		flex-basis: 25% !important;
	}
}

@media screen and (max-width:1250px) and (min-width:850px) {

	.wp-block-button.header-btn a {
        font-size: 13px !important;
        padding: 8px !important;
    }
	.banner-wrap{
		min-height: 530px !important;
	}

	.banner-service p{
		font-size: 14px !important;
	}
	.inner-col-servicess{
		flex-basis: 5% !important;
	}

	.feat-cols-1{
		flex-basis: 28% !important;
	}
	.feat-cols-2{
		flex-basis: 26% !important;
	}
	.feat-cols-3{
		flex-basis: 36% !important;
	}

}

@media screen and (max-width:1300px) and (min-width:1px) {
	[class*="wp-container-core-group-is-layout-"] > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
		max-width: 90%;
	}
	.main-slider .owl-stage-outer{
		max-width: 100%;
	}
}