@media (max-width: 1800px) {
	
	html { 						/* general base font-size */
		font-size:              14px;   
	}

	nav, section { 				/* sections get padding so .container doesn't touch viewport edges */
		padding-left: 			calc(var(--xxpmg) + 30px) !important;
		padding-right: 			calc(var(--xxpmg) + 30px) !important;
	}

	.container { 				/* containers take full viewport width */
		width: 					100%;
	}
	
	#benefits { 				/* benefits gets special adjustments because its padding is set up differently */
		padding: 				var(--xxpmg) 0 0 !important;}
	
	#benefits .container { 		/* benefits gets special adjustments because its padding is set up differently */
		padding: 				0 calc(var(--xxpmg) + 30px) var(--xxpmg) !important;}
		
	.benefit img {				/* benefits icons */
		height: 				6rem;
	}		
		
	.benefit h3 {
		font-size: 				var(--mltxt);
	}	
	
	.benefit p {
		font-size: 				var(--smtxt);
	}
	
	
	#mission-text br {
		display: 				none;
	}
	
}

@media (max-width: 1600px) {

	#footer .container {
		display: 				flex;
		flex-direction: 		column;
		flex-wrap: 				wrap;
		gap: 					var(--mspmg);
	}
	
	#footer-main {
		order: 					3;
		width: 					100%;
		gap: 					var(--mspmg);
	}
	
	#mail {
		order: 					1;
		width: 					100%;
	}
	  
	#office {
		order: 					2;
		width: 					100%;
	}
	
	.address {
		display: 				flex;
		flex-direction: 		row;
		gap: 					var(--smpmg);
		justify-content: 		center;
	}

	.address p:first-of-type::after {
		content: ",";
	}	
	
}

@media (max-width: 1550px) {
	
	#appt-contact br {
		display: 				none;
	}
	
	.appt-label {
		display: 				block;
	}
		
}

@media (max-width: 1400px) {
	
	#navcta {
		padding:				0 var(--lgpmg);
	}
	
	#hero {
		background-position: 	top right 10%;
	}
		
	#rated {
		font-size: 				var(--mstxt);
	}	

	#slogan {
		font-size: 				var(--lgtxt);
	}

	#title {
		font-size: 				var(--mltxt);
	}

	#subtitle {
		font-size: 				var(--mltxt);
	}

	.stars {
		font-size: 				calc(var(--mstxt) * 1.4);
	}
	
	.cta {
		font-size:				var(--mltxt);
	}
	
	.h-gen {
		background-image: 
		linear-gradient(30deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 70%),
		url(images/sisters-hvac-service.jpg);}

	.h-res {
		background-image:       
		linear-gradient(30deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 70%),
		url(images/residential-hvac-service.jpg);}

	.h-com {
		background-image:       
		linear-gradient(30deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 70%),
		url(images/commercial-hvac-service.jpg);}
	
	.benefit p {
		font-size: 				var(--mdtxt);}
	
	#group-pic img {
		height: 				auto;
		object-fit:				fill;
	}
		
	#mission-text p {
		font-size: 				var(--smtxt);}
	
	#cards {
		grid-template-columns: repeat(3, 1fr);
	}
		
	#services h4 {
		font-size: 				var(--smtxt);}			

}

@media (max-width: 1300px) {
	
	#navigation h3, #navcta {
		font-size: 				var(--mstxt);
	}
	
	#fso h2 br {
		display: 				inline;
	}
	
	#free {
		font-size:				calc((var(--xltxt)) * 1.7);	
	}
	
	#fso h2 {
		padding-top:			var(--smpmg);
	}

}

@media (max-width: 1200px) {

	#navigation img {
		height: 				3.5rem;
	}

	#navigation h3, #navcta {
		font-size: 				var(--mstxt);
	}

	#navigation h3 a {
		flex-direction: 		column;
		justify-content:		space-between;
	}
	
	#navcta {
		padding:				0 var(--mdpmg);
	}

	#hero {
		background-attachment: 	scroll;
	}
	
	#hero .container {
		justify-content: 		flex-end;
		padding:				var(--3xpmg) 0;
	}

	.main-carousel {
		height: 				23rem;
	}

	#mission .content {
		flex-direction: 		column;}
	
	#group-pic {
		width:					100%;}

	#mission-text {
		width:					100%;}
		
	#fso h2 {
		font-size:					var(--lgtxt);
		padding-bottom:				var(--lgpmg);
	}

	#fso h3 {
		font-size:					var(--mdtxt);
		padding-bottom:				var(--lgpmg);
	}

	#fso h3:first-of-type {
		padding-bottom:				0;
	}

	#fso p {
		font-size:					var(--mstxt);
		padding-bottom:				var(--lgpmg);
	}

	#fso h4 {
		font-size:					var(--xstxt);
	}
	
	#free {
		font-size:				calc((var(--xltxt)));	
	}
		
	#services h4 {
		font-size:				calc(var(--xstxt) * 1);
	}
	
}

@media (max-width: 1100px) {
	
	nav, section { 				/* general sections get padding so the .container doesn't touch viewport edges */
		padding-left: 			var(--mdpmg) !important;
		padding-right: 			var(--mdpmg) !important;
	}

	#navigation h3, #navcta {
		font-size: 				calc(var(--mdtxt) * 0.95);
	}
	
	#hero {
		background-attachment: 	scroll;
	}
	
	#hero .container {
		padding:				var(--mdpmg) 0 var(--xxpmg);}
	
	#rated {
		font-size: 				var(--xstxt);
	}	

	#slogan {
		font-size: 				var(--mltxt);
	}

	#title {
		font-size: 				var(--mstxt);
	}

	#subtitle {
		font-size: 				var(--mstxt);
	}

	.stars {
		font-size: 				calc(var(--xstxt) * 1.4);
	}
	
	.cta {
		font-size:				var(--mstxt);
	}
	
	.moreinfo {
		font-size: 				var(--xstxt);
	}
	
	.landing p, .capbox h4 {
		font-size: 				var(--mstxt);
	}
	
	.landing p strong {
		font-size: 				var(--mdtxt);
	}
	
	#benefits { 				/* benefits gets special adjustments because its padding is set up differently */
		padding: 				var(--xxpmg) 0 0 !important;}
	
	
	#benefits .container { 		/* benefits gets special adjustments because its padding is set up differently */
		padding: 				0 var(--mdpmg) var(--xxpmg) !important;}
		
	#benefits .content {
		flex-direction: 		column;}	
	
	.benefit {
		align-items: 			center;}
		
	.benefit br {				
		display: 				none;}
		
	.benefit p {				
		width: 					70%;}
		
	.review .stars {
		font-size:				var(--mltxt);
	}		

	.main-carousel {
		height:					17rem;
	}

	.carousel-cell blockquote {
		font-size: 				calc(var(--xstxt) * 0.95);
	}

	#services h4 {
		font-size: 				calc(var(--xstxt) * 0.9);
	}
	
	#social h4 {
		font-size:				var(--xstxt);
	}

	#social img {
		height:					2rem;
	}

}

@media (max-width: 1000px) {
		
	#navigation h3, #navcta {
		font-size: 				calc(var(--mdtxt) * 0.85);
	}
	
	#hero .content {
		gap:					var(--mspmg);
	}

	#rated {
		font-size: 				var(--xstxt);
	}	

	#slogan {
		font-size: 				var(--mltxt);
	}

	#title {
		font-size: 				var(--mstxt);
	}

	#subtitle {
		font-size: 				var(--mstxt);
	}

	.stars {
		font-size: 				calc(var(--xstxt) * 1.4);
	}
	
	.cta {
		font-size:				var(--mstxt);
	}
	
	.main-carousel {
		height:					18rem;
	}
	
	.quiltimg {
		display: 					flex;
		flex-direction:				column; /* Stack images vertically */
		gap:						var(--mdpmg);
		width: 						100%;
		align-items: 				center;  /* Optional: center images horizontally */
	}

	.quiltimg img {
		width: 						100%;     /* or a fixed width like 500px if you prefer */
		height: 					auto;
	}

	#fso p br {
		display: none;
	}		
		
	#appt-contact h3 {
		font-size: 				var(--mdtxt);
	}

	#services h4 {
		font-size: 				calc(var(--xstxt) * 0.8);
	}
	
}

@media (max-width: 900px) {

	.sectitle {font-size:		var(--mltxt);}

	#navigation .content {
		gap:					var(--mspmg);
	}
	
	#navigation img {
		height: 				3rem;
	}
	
	#navigation h3, #navcta {
		font-size: 				calc(var(--mdtxt) * 0.75);
	}
	
	.benefit img {				
		height: 				5rem;
	}	
	
	#cards {
		grid-template-columns: repeat(2, 1fr);
	}
	
	.ex-intro {
		font-size: 				var(--mstxt);
		grid-column: span 1;
	}
		
	.ex-intro br {
		display: 				none;
	}
		
	.card h4 br {
		display: 				inline;
	}
	
	#appointment .content {
		display: 				flex;
		flex-direction: 		column;
		padding:				0 var(--mdpmg) 0 0;
		gap:					var(--mdpmg);}
		
	#appt-contact {				
		width: 					100%;}

	#appt-rooger {
		width: 					100%;
		padding: 				0 0 0 var(--mdpmg);}
			
	#appt-contact br {
		display:				none;}
		
	#appt-contact h3 {
		font-size: 				var(--lgtxt);}
					
	#services h4 {
		font-size: 				calc(var(--xstxt) * 0.8);
	}
}

@media (max-width: 799px) {
	
	.sectitle br {
		display: 				inline;}
	
	.nav-label {
		display: 				block;
	}
	
	#navigation img {
		height:					2.5rem;
	}
	
	#navigation h3, #navcta {
		font-size: 				calc(var(--mdtxt) * 0.65);
	}

	#hero .container {
		padding:				var(--lgpmg) 0;
	}

	.review .stars {
		font-size:				var(--lgtxt);
	}		

	.main-carousel {
		height:					16rem;
	}

	.carousel-cell blockquote {
		font-size: 				var(--smtxt);
	}

	.carousel-cell { 
		width: 100%; 
	}

	.landing p, .capbox h4 {
		font-size: 				var(--smtxt);
	}
	
	.landing p strong {
		font-size: 				var(--mstxt);
	}

	.benefit br {				
		display: 				inline;}
	
	.benefit h3 {
		font-size:				var(--mltxt);
	}

	.benefit p {
		font-size:				var(--mstxt);
	}
	
	#appt-contact h3 {
		font-size: 				var(--mltxt);}
	
	#services h4 {
		font-size: 				calc(var(--xstxt) * 0.6);
	}
	
	#social h3 br {
		display: 				inline;
	}
	
	.address h4, #sitemap p, .address p, #ccb, #legal {
		font-size: 				var(--xstxt) !important;
	}

}

@media (max-width: 700px) {
	
	#navigation img {
		height:					2.3rem;
	}
	
	#navigation h3, #navcta {
		font-size: 				calc(var(--mdtxt) * 0.55);
	}
	
	#group-pic h4 {
		font-size: 				var(--xstxt);
	}
	
	#group-pic h4 br {
		display: 				inline;
	}
		
	#social h3 br {
		display: 				none;
	}	
}

@media (max-width: 650px) {
		
	#navigation .content {
		flex-wrap: 				wrap;
		align-items: 			center;
	}
	
	#navigation h3 a {
		flex-direction: 		row;
	}
	
	#navigation h3, #navcta {
		font-size: 				calc(var(--mdtxt) * 0.8);
	}
	
	#navcta {
		order: 					3;
		flex: 					0 0 100%;
		padding:				var(--smpmg);
	}
	
	#hero .content {
		gap:					var(--smpmg);
	}
	
	#herobuttons {
		width: 100%;
	}
	
	.main-carousel {
		height:					16rem;
	}

	.ex-intro {
		font-size: 					var(--smtxt);
	}

	#fso h3 br {
		display: none;
	}

	#appt-contact p {
		font-size: 				var(--mstxt);
	}

	#appt-contact h3 {
		font-size: 				var(--mdtxt);}
	
	#services .content {
		flex-direction:			column;
		gap:					var(--xlpmg);
	}
	
	#services h4 {
		font-size: 				calc(var(--xstxt) * 1.2);
	}

	.address h4, #sitemap p, .address p {
		font-size: 				calc(var(--xstxt) * 0.8)  !important;
	}
	
	#social h3 br {
		display: 				inline;
	}
	
	#social h3 {
		font-size: 				var(--smtxt);
	}
	
	#social h4 {
		font-size: 				calc(var(--xstxt) * 0.8);
	}

}

@media (max-width: 550px) {
	
	.sectitle {font-size:		var(--mstxt);}
	
	#navigation h3, #navcta {
		font-size: 				calc(var(--mdtxt) * 0.5);
	}
	
	#navcta {
		padding:				var(--smpmg);
	}
	
	#hero .container {
		padding:				var(--lgpmg) 0 var(--3xpmg);		
	}

	.cta {
		font-size:				var(--smtxt);
		padding: 				var(--smpmg) var(--smpmg);
	}
	
	.moreinfo {
		font-size:				var(--xstxt);
	}
	
	.moreinfo {
		padding:				var(--smpmg) var(--mdpmg);
	}
	
	#rated {
		font-size: 				calc(var(--xstxt) * 0.8);
	}	

	#slogan {
		font-size: 				var(--mdtxt);
	}

	#title {
		font-size: 				var(--xstxt);
	}

	#subtitle {
		font-size: 				var(--xstxt);
	}

	.stars {
		font-size: 				var(--xstxt);
	}
		
	.benefit img {				
		height: 				4rem;
	}		
	
	.benefit h3 {
		font-size:				var(--mdtxt);
	}

	.benefit p {
		font-size:				var(--smtxt);
	}
	
	.main-carousel {
		height:					18rem;
	}
	
	#cards {
		grid-template-columns: repeat(1, 1fr);
	}
	
	.card-container {
	height: 					40rem;
}
	
	.card-container h3 {
	font-size:					var(--xstxt);
	}
	
	.card-container h4 {
	font-size:					var(--xstxt);
	}
	
	#appt-contact p {			
		font-size: 				var(--smtxt);
	}	
	
	#appt-contact h3 {
		font-size: 				var(--smtxt);
	}
		
	#services h4 {
		font-size: 				calc(var(--xstxt) * 0.7);
	}
		
	#social h3 br {
		display: 				none;
	}	
		
	.address h4, #sitemap p, .address p, #ccb, #legal {
		font-size: 				calc(var(--xstxt) * 0.7)  !important;
	}
	
}


@media (max-width: 450px) {
	
	.card-container h3 {
		font-size:					calc(var(--xstxt) * 0.8);
	}
	
	.card-container h4 {
		font-size:					calc(var(--xstxt) * 0.8);
	}
	
	#herobuttons br {
		display: 				inline;
	}
	
}


@media (max-width: 400px) {
	
	#navigation h3, #navcta {
		font-size: 				calc(var(--mdtxt) * 0.45);
	}
	
	#rated {
		font-size: 				calc(var(--xstxt) * 0.8);
	}	

	#slogan {
		font-size: 				var(--mstxt);
	}

	#title {
		font-size: 				calc(var(--xstxt) * 0.9);
	}

	#subtitle {
		font-size: 				calc(var(--xstxt) * 0.9);
	}

	.stars {
		font-size: 				var(--xstxt);
	}
	
	.benefit img {				
		height: 				3rem;
	}
	
	.main-carousel {
		height:					20rem;
	}
		
	#appt-contact h3 {
		font-size: 				var(--xstxt);}
		
	#sitemap {
		flex-direction: 		column;
		align-items:			center;
		gap:					var(--smpmg);
		padding:				var(--smpmg);
	}
	
	#sitemap p {
		font-size: 				var(--smtxt) !important;
	}
	
	#ccb, #legal {
		font-size: 				calc(var(--smtxt) * 0.8) !important;
	}
		
	#sitemap p:not(:last-child)::after {
		content: 				""; 
	}
	
	.address {		
		display: 				flex;
		flex-direction:			column;
		align-items:			center;
		gap: 					var(--xspmg);
		padding-bottom:			var(--smpmg);
	}
	
	.address h4, .address p {
		font-size: 				var(--smtxt) !important;
	}
		
}

@media (max-width: 350px) {
	
	#navigation h3, #navcta {
		font-size: 				calc(var(--xstxt) * 0.6);
	}
	
	.main-carousel {
		height:					21rem;
	}
		
}


/* hero adjust */

@media (max-height: 675px) {
	
		
		#hero .container {
			padding: 				var(--mdpmg) 0;
		}
		
	}