* {
    margin:                     0;
    padding:                    0;
    box-sizing:                 border-box;
}

html {
    font-size:                  16px;    
    height:                     100%;    	
    scroll-behavior:            smooth;              
	scroll-padding-top:			var(--navht); 		  
}

body {
    color:                      rgb(var(--white));  
    background:                 rgb(var(--black));    
    font-family:                "Roboto Slab", serif;    
    line-height:                var(--mdlh);   
    display:                    flex;                 
    flex-direction:             column;               
    justify-content:            center; /* Center vertically */
    align-items:                center; /* Centers horizontally */
    min-height:                 100vh;                
    margin:                     0; 
	padding: 					var(--navht) 0 0;
}

:root {

    /* Colors */
	--red:						235, 	56, 	37;
	--white:					231, 	231, 	231;
	--blue:						16, 	139, 	204;
	--black:					0, 		0, 		0;         
	--grey:						128, 	128, 	128;  	

	/* size reference 
	xs extra small
	sm small
	ms medium small
	md medium
	ml medium large
	lg large
	xl extra large
	xx double extra large
	3x triple extra large
	*/

    /* Font sizes */	
	--xstxt:  					1.25rem;
	--smtxt:  					1.50rem;
	--mstxt:  					1.75rem;
	--mdtxt:  					2.00rem;
	--mltxt:					2.70rem;
	--lgtxt:  					3.25rem;
	--xltxt:					5.25rem;

    /* Line heights */    
	--smlh:                     1.00;
    --mdlh:                     1.15;
    --lglh:                     1.25;
	
	/* letter spacing */
	--usls:						-0.2rem;
	--xsls:						-0.5rem;
	--smls:						-0.1rem;
	--mdls:						0.05rem;

    /* Padding / Margin / Gap */
	--xspmg: 					0.23rem;
	--smpmg: 					0.53rem;
	--mspmg:					1.00rem;
	--mdpmg: 					1.52rem;
	--mlpmg: 					1.70rem;
	--lgpmg: 					2.25rem;
	--xlpmg: 					3.04rem;
	--xxpmg: 					4.56rem;
	--3xpmg:					6.00rem;
	
	/* navbar */
	--navht:					0rem; /* 8 */
	
	/* golden ratio */
	--glg:						62%;
	--gsm:						38%;
	
}

	/* debug 
	section 	{				border: 1px solid purple;}
	.container 	{			border: 1px solid lime;}
	.content 	{				border: 2px solid blue;}
	*/
	
section, nav {						/* full width container for a section */
    display:                    flex;
	flex-direction:				column;
    align-items:        	    center;
	width: 						100%;
	padding:					var(--mdpmg) 0;
}

.container {					/* inner container to limit width, holds everything including sectitle */
	width: 						1600px;
}

.sectitle {						/* section title */				
	font-size:					var(--lgtxt);
	font-weight:				900;
	padding:					var(--smpmg) var(--mdpmg);
	margin-bottom:				var(--mdpmg);
	text-align:					center;	
}

.sectitle br {display: 			none;}

.light {						/* white bg section title */
	color:						rgb(var(--black));
	background:					rgb(var(--white));
}

.dark {							/* black bg section title, compensate for text weight illusion */
	color:						rgb(var(--white));
	background:					rgb(var(--black));
	font-weight:				800;
}

h3 {
	font-size:					var(--mdtxt);
	font-weight:				900;
	padding:					var(--xspmg) 0;
}

strong {						/* bold text spans */
	font-weight:				700;
}

#herobuttons {
	display: inline-flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--mdpmg);
	width: max-content;  
}

.cta,
.moreinfo {
	display: 					flex; 
	justify-content: 			center;  
	white-space: 				nowrap;
	letter-spacing:				var(--mdls);
	font-weight:				900;
	padding:					var(--mdpmg) var(--xlpmg);
	text-align:					center;
}

.cta {						
	font-size: 					var(--lgtxt);

	background:					rgb(var(--red));
    box-shadow:                 0 8px 8px rgba(0, 0, 0, 0.5);
	
    transition:                 background 0.2s steps(4, end),
								transform 0.2s steps(4, end),
								box-shadow 0.2s steps(4, end); 
}

.cta:hover {					
	background:					rgb(var(--blue));
    box-shadow:                 0 3px 6px rgba(0, 0, 0, 0.5);
	transform:					scale(0.98);
	
    transition:                 background 0.1s steps(4, end),
							    transform 0.1s steps(4, end),
								box-shadow 0.1s steps(4, end); 
}

#herobuttons br {
	display: 					none;
}

.moreinfo {
	font-size: 					var(--mstxt);

	border:						2px solid rgb(var(--white));

    transition:                 background 0.2s steps(4, end),
								transform 0.2s steps(4, end),
								box-shadow 0.2s steps(4, end); 
}

.moreinfo:hover {
	background:					rgb(var(--blue));
    box-shadow:                 0 3px 6px rgba(0, 0, 0, 0.5);
	
	border:						2px solid rgba(0, 0, 0, 0);
	
	transform:					scale(0.98);
	
    transition:                 background 0.1s steps(4, end),
							    transform 0.1s steps(4, end),
								box-shadow 0.1s steps(4, end); 
}

.nobreak {
	display: 					inline-block;
}

#navigation {
	background:					rgb(var(--black));
    position:                   fixed;
    top:                        0;
    z-index:                    999;
	width: 						100%;
	padding: 					var(--mspmg) 0;
}

#navigation .content {
	display: 					flex;
	flex-direction: 			row;
	justify-content:			space-between;
	gap:						var(--mdpmg);
}

#navigation img {
	display: 					block;
	height: 					4rem;
	width: 						auto;
    transition:                 transform 0.2s steps(4, end);
}

#navigation img:hover {
	transform:					scale(0.96);
    transition:					transform 0.1s steps(4, end);
}

#hide { 						/* hide nav title text to replace with logo */
    position:                   absolute;
    width:                      1px;
    height:                     1px;
    padding:                    0;
    margin:                     -1px;
    overflow:                   hidden;
    clip:                       rect(0, 0, 0, 0);
    border:                     0;
}

#navigation h3 {
    display:                    flex;
	flex-direction:				column;
	justify-content: 			center;
	font-size:					var(--mdtxt);
	font-weight:				500;
    transition:                 transform 0.2s steps(4, end);
	padding: 0;
}

#navigation h3:hover {
	transform:					scale(0.97);
    transition:					transform 0.1s steps(4, end);
}

#navigation h3 a {
	display: 					flex;
	flex-direction: 			row;
	align-items: 				center;
	height: 					100%;


}

#navigation h3 span {
	line-height: 0.7;

}

.nav-label {
	font-weight:				900;
}

#navcta {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	font-size: 					var(--mdtxt);
	font-weight:				900;
	letter-spacing:				var(--mdls);
	text-wrap:					nowrap;
	padding:					0 var(--mdpmg);
	color:						rgb(var(--white));
	background:					rgb(var(--red));
	min-width: 					37.4%;
    transition:                 background 0.2s steps(4, end),
								transform 0.2s steps(4, end),
								box-shadow 0.2s steps(4, end); 
}

#navcta:hover {					
	background:					rgb(var(--blue));
    box-shadow:                 0 3px 6px rgba(0, 0, 0, 0.5);
	transform:					scale(0.98);
	
    transition:                 background 0.1s steps(4, end),
							    transform 0.1s steps(4, end),
								box-shadow 0.1s steps(4, end); 
}


#hero {						
	background-position:		top right 25%;
	background-size:			cover;
	background-attachment:		fixed;
	background-repeat:			no-repeat;
	
    height:                     calc(100vh - var(--navht)); 
	padding: 					0;
}

.h-gen 		{background-image:       url(images/sisters-hvac-service.jpg);}

.h-res 		{background-image:       url(images/residential-hvac-service.jpg);}

.h-com 		{background-image:       url(images/commercial-hvac-service.jpg);}


#hero .container {
	height: 					100%;
	display: 					flex;
	flex-direction: 			column;
	justify-content: 			center;
	padding:					var(--lgpmg) 0;
}

#hero .content {
	display: 					flex;
	flex-direction: 			column;
	gap: 						var(--mdpmg);
}



#maintenance {
	background:					url(images/bg-maintenance.jpg);
}

#repair {
	background:					url(images/bg-repair.jpg);
}

#installation {
	background:					url(images/bg-installation.jpg);
}

#quilt {						
	background-position:		top right 25%;
	background-size:			cover;
	background-attachment:		fixed;
	background-repeat:			no-repeat;
	
	background-image:       	url(images/residential-hvac-service.jpg);
}

#lottery {
	font-size: 					var(--xstxt);
	background:					url(images/bg-local-love-lottery.jpg);
	background-position: 		center bottom;
}

#lottery p {
	text-align: left;
}

#maintenance, #repair, #installation, #lottery {
	padding: 					var(--xxpmg);
	background-attachment:		fixed;
	background-size: 			cover;
}

#maintenance .content, #repair .content, #installation .content, #lottery .content, #quilt .content {
	background-color: 			rgba(0, 0, 0, 0.75);
	padding:					var(--mdpmg);
}

#quilt.landing p {
	text-align:					left;
	font-size:					var(--mstxt);
	font-weight:				300;	
}

#quilt.landing ul {
	padding:					0 0 0 var(--mdpmg);
}

#quilt.landing li {
	font-size:					var(--mstxt);
	font-weight: 				300;
	padding:					0 0 var(--mspmg) var(--xspmg);
}

#quilt.landing li::marker {
    content: "▶ ";
	font-size:					var(--xstxt);
}

#quilt.landing h3:first-of-type {
	padding:					0 0 var(--mdpmg);
}	

#quilt.landing h3 {
	text-align: center;
	padding:					var(--mdpmg) 0 var(--mdpmg) 0;
}

.landing p {
	text-align:					center;
	font-size:					var(--mdtxt);
	font-weight:				300;
	line-height:				var(--lglh);
	margin-bottom: 				var(--mdpmg);
}

.landing a {
	text-decoration:			underline;
}

.gallery {
	width: 						100%;
	display: 					flex;
	flex-direction: 			column;
	justify-content: 			center;
	gap: 						var(--mdpmg);
	padding-top:				var(--mdpmg);
}


.quiltimg {
	display: 					flex;
	flex-direction:				row;
	gap:						var(--mdpmg);
	width: 						100%;
	justify-content: 			center;
}

.quiltimg img {
	width: 						calc(50% - calc(var(--mdpmg) / 2)); 
	height: 					auto;
}

.imgbox {
	display: 					flex;
	flex-direction:				row;
	gap:						var(--mdpmg);
	width: 						100%;
	justify-content: 			center;
}

.imgbox img {
	width: 						calc(50% - calc(var(--mdpmg) / 2)); 
	height: 					auto;
}

.capbox {
	display: 					flex;
	flex-direction: 			row;
	justify-content: 			space-between;
	width: 						100%;
}

.capbox h4 {
	font-size: 					var(--mdtxt);
}




.video-wrapper {
    display: 					flex;
    justify-content: 			center;
}

.video-wrapper iframe {
    aspect-ratio: 				16 / 9;
    width: 						100% !important;
}

#rated, #title, #subtitle {		/* shadow for small intro text */
    text-shadow:                0 3px 2px rgba(0, 0, 0, 0.7);	
}

#rated {
	font-size: 					var(--mdtxt);
	font-weight: 				400;
}	

#slogan {
	font-size: 					var(--xltxt);
	font-weight:				900;
	letter-spacing:				var(--mdls);
	line-height:				var(--smlh);
    text-shadow:                0 3px 3px rgba(0, 0, 0, 0.7);
	margin:						0 0 var(--smpmg) 0;
}

#title {
	font-size: 					var(--lgtxt);
	font-weight:				600;
}

#subtitle {
	font-size: 					var(--lgtxt);
	font-weight: 				300;
}

.stars {
	font-size: 					calc(var(--mdtxt) * 1.4);
	color:						rgb(var(--red));
	letter-spacing:				var(--smls);
}


#benefits {						
    background:                 linear-gradient(to bottom, rgba(var(--blue), 1) 98%, rgba(0, 0, 0, 1) 100%);
								/* this gradient is to fix a glitch with a 1px line of the blue bg showing beneath the mountains image */	

	padding:					var(--3xpmg) 0 0;
}

#benefits .container {
	padding:					0 0 var(--3xpmg);
}

#benefits .content {
	display: 					flex;
	flex-direction: 			row;
	gap: 						var(--xlpmg);
	justify-content: 			space-between;
}

.benefit {
	flex:						1;
    text-align:                 center;
    display:                    flex; 
    flex-direction:             column; 
}

.benefit img {
	margin-bottom: 				var(--smpmg);
	height:						8rem;
}

.benefit h3 {
	margin-bottom: 				var(--smpmg);	
	font-size:					var(--lgtxt);
}

.benefit p {
	font-size:					var(--mdtxt);
	font-weight:				200;
	line-height:				var(--lglh);
}

#mountains {
	width: 						100%;
}

#mountains img {
	display:					block;
	width: 						100%;
	object-fit:					contain;
}

#reviews {
	padding-top: 0;
}

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

.reviewer {
	font-weight:				400;
	font-size:					var(--smtxt);
    align-self: 				flex-end;
	margin-top: 				auto; 
	text-align:					right;
}

#full-reviews {
	text-align:					center;
	font-weight: 				200;
	font-size: 					var(--xstxt);
	color:						rgb(var(--grey));
}

.main-carousel {
    position: 					relative;
    margin: 					0 0 var(--mdpmg); 
    padding: 					0;
	height: 					19rem;
}

.carousel-cell {
    box-sizing:                 border-box; /* Includes padding in width calculation */
    text-align:                 center; /* Centers all text inside the div horizontally */
    display:                    flex; /* Flexbox for centering content vertically */
    flex-direction:             column; /* Stacks the elements vertically */
    align-items:                center; /* Centers the content horizontally */
    justify-content:            top; /* Aligns content to the top instead of centering vertically */
	margin:						0 calc((var(--mdpmg)) / 2);
    width: 						calc(35.4% - (2 * var(--mdpmg))); /* 3 slides with spacing */
	height: 					100%;
	opacity:					0.4;
    transition:                 opacity 0.5s ease-out; 
}

.carousel-cell:hover {
	opacity: 1.0;
}

.carousel-cell.is-selected {
    opacity: 					1.0;
    transition:                 opacity 0.5s ease-out; 				
}

.carousel-cell blockquote {
	font-size: 					var(--smtxt);
	font-weight:				100;	
	padding-bottom:				var(--smpmg);
	text-align: 				left;
	font-style:					italic;
	line-height:				var(--lglh);
	border:						solid rgb(var(--white));
	border-width:				4px 0 0;
	padding-top:				var(--mdpmg);
	width:						100%;
	height:						100%;
}

#mission {
	background:					rgb(var(--blue));
}

#mission .content {
	display: 					flex;
	flex-direction: 			row;
	gap:						var(--mdpmg);
}

#group-pic {
    display:                    flex;
	flex-direction:				column;
	width:						var(--glg);
}

#group-pic img {
	width: 						100%;
	height: 					100%;
	object-fit: 				cover;
}

#group-pic h4 {
	color:						rgb(var(--white));
	background:					rgb(var(--black));
	font-weight:				500;
	font-size: 					var(--smtxt);
	padding:					var(--smpmg);
	margin:						var(--mdpmg) 0 0;
	text-align:					center;
	width:						100%;
}

#group-pic h4 br {
	display: 					none;
}

#mission-text {
	width:						var(--gsm);
	display: 					flex;
	flex-direction: 			column;
}

#mission-text p {
    font-size:                  var(--mdtxt);
	font-weight:				200;
    margin-bottom:              var(--mdpmg); 
	line-height:				var(--lglh);
}

#mission-text p:last-of-type {
	margin-bottom: 				0;
}


#expertise {
    background:					url(images/sisters-area.jpg) 
								no-repeat center center; 
    background-size: 			cover;
	background-attachment:		fixed;
	background-position:		center;
}

#expertise .content {
	display: 					flex;
	flex-direction: 			column;
	gap:						var(--mdpmg);
}

.ex-intro {
	display: 					flex;
	height:						100%;
	background:					rgb(var(--black));
	padding: 					var(--mdpmg);
	flex-direction: 			column;
	justify-content:			center;
	text-align:					center;
	font-weight:				200;
	line-height:				var(--lglh);
	font-size: 					var(--mdtxt);
	
	grid-column: span 3;
}

.ex-intro p {
	font-weight:				200;
	padding-bottom:				var(--smpmg);
}

.ex-intro p:last-of-type {
	padding:					0;
}



#cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--mdpmg);
}



.card-container {
    height:                     100%;
    perspective:                3500px;
	height: 					35rem;
}

.card-container.ex-intro {
	height: auto;
}

.card-container h3 {
	font-size:					var(--smtxt);
	font-weight:				900;
	text-align:					center;
}



/* card flip effect temporarily disabled 
.card-container:hover > .card {
    cursor:                     pointer;
    transform:                  rotateY(180deg);
    transition:                 transform 0.35s ease-out;
}
*/

.card {
    height:                     100%;
    width:                      100%;
    position:                   relative;
    transform-style:            preserve-3d;
    transition:                 transform 0.75s ease-in-out;
}

.front,
.back {
    width:                      100%;
	height: 					100%;
    backface-visibility:        hidden;
	display:					flex;
	flex-direction:				column;
	padding:					var(--mdpmg);
}


.front {
	background-color:			rgb(var(--blue));
	background-size: 			cover;
	background-repeat:			no-repeat;
	background-position:		bottom center;
}

.card-mike .front {				background-image: url(images/hvac-technician-mike.jpg);}

.card-joel .front {				background-image: url(images/hvac-technician-joel.jpg);}

.card-trey .front {				background-image: url(images/hvac-technician-trey.jpg);}

.card-chase .front {			background-image: url(images/hvac-technician-chase.jpg);}

.card-jerry .front {			background-image: url(images/hvac-technician-jerry.jpg);}

.card-emerald .front {			background-image: url(images/sisters-hvac-emerald.jpg);}

.card-meghan .front {			background-image: url(images/hvac-manager-meghan.jpg);}

.card-chris .front {			background-image: url(images/technician-temp.jpg);}

.card-rooger .front {			background-image: url(images/hvac-dog-rooger.jpg);}

.front h3 {
	background:					rgb(var(--white));
	color:						rgb(var(--black));
	font-size:					var(--smtxt);
	padding: 					var(--smpmg);
	width: 						100%;
}

.back h3 {
	background:                 rgb(var(--black));
	color:						rgb(var(--white));
	padding:					var(--smpmg);
	width: 						100%;
}

.front h4 {
	font-size:					var(--smtxt);
	padding: 					var(--smpmg);
	margin: 					auto 0 0;
	background:					rgb(var(--white));
	color:						rgb(var(--black));
	font-weight:				500;	
	text-align:					center;
}

.back {
	align-items:				center;
    background:                 rgb(var(--white));
	color:						rgb(var(--black));
    transform:                  rotateY(180deg);
    position:                   absolute;
	top: 						0;
}

.back p {
	font-size: 					var(--smtxt);
	font-weight:				300;
	margin-top:           		auto;
	text-align: 				left;
}

#fso {
	color:						rgb(var(--blue));
	background:					rgb(var(--white));
	display:					flex;
	text-align: 				center;
	padding-bottom:				0;
}

#fso h2 {
	font-size:					var(--xltxt);
	padding-bottom:				var(--xlpmg);
}

#fso h3 {
	font-size:					var(--lgtxt);
	font-weight:				700;
	padding-bottom:				var(--xlpmg);
}

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

#fso p {
	font-size:					var(--mdtxt);
	font-weight:				300;
	padding-bottom:				var(--xlpmg);
}


#fso h4 {
	font-size:					var(--xstxt);
	font-weight:				300;
}

#free {
	font-weight:				900;
}

.ltwt {
	font-weight:				400;
}

.mdwt {
	font-weight:				300;
}

#fso h2 br {
	display: none;
}


#appointment {
	background:					rgb(var(--white));
}

#appointment .container {
	background:					rgb(var(--red));
	padding:					0 0 var(--mdpmg) 0;
}

#appointment .sectitle {
	margin:						var(--mdpmg);
}

#appointment .content {
	display: 					flex;
	flex-direction: 			row;
	gap:						var(--mdpmg);
}

#appt-contact {
	width:						var(--glg);
	display: 					flex;
	flex-direction:				column;
	gap:						var(--mdpmg);
	justify-content:			space-between;
	padding:					0 0 0 var(--mdpmg);
}


#appt-contact a {
	display: 					inline-block;
	transition:                 transform 0.2s steps(4, end);
}

#appt-contact a:hover {
	transform:					scale(0.98);
	transition:					transform 0.1s steps(4, end);
}

#appt-rooger {
	width: 						var(--gsm);	
	padding:					0 var(--mdpmg) 0 0;
}

#appt-rooger img {
	width: 						100%;
	height: 					100%;
	object-fit: 				cover;
	display: 					block;
}

#appt-contact p {
	color:						rgb(var(--black));
	font-size:					var(--mdtxt);
	font-weight:				300;
}

#appt-contact h3 {
	font-size:					var(--mltxt);
	color:						rgb(var(--white));
	font-weight:				500;
}

.appt-label {
	color:						rgb(var(--black));
	font-weight:				900;
}

#appt-phone {
	display:					flex;
	flex-direction:				row;
	width:						100%;
	gap:						var(--lgpmg);
}



#services {
	background:					rgb(var(--black));
}

#services .container {

}

#services .content {
	display:					flex;
	flex-direction:				row;
	justify-content:			space-between;
	gap:						var(--mdpmg);
}

#residential, #commercial {
	display:					flex;
	flex-direction:				row;
	width: 100%;
	gap:						var(--mdpmg);
}

#services a {
	width: 100%;
}

#services h4 {
	background:					rgb(var(--white));
	color:						rgb(var(--black));
	text-align:					center;
	font-size:					var(--mdtxt);
	font-weight:				800;
	margin-top:					var(--mdpmg);
	padding:					var(--smpmg);
	width: 						100%;
	transition:                 background 0.2s steps(4, end),
								color 0.2s ease-in-out;
}

.service-item:hover h4 {
	background:					rgb(var(--blue));
	color:						rgb(var(--white));
	transition:                 background 0.1s steps(4, end),
								color 0.1s ease-in-out;
}

.service-item {
	display:					flex;
	flex-direction:				column;
}

.service-item img {
	width: 						100%;
	height: 					auto;
	transition:                 transform 0.2s steps(4, end),
								filter 0.2s ease-in-out;
}

.service-item:hover img {
	transform:					scale(0.95);
	filter: 					invert(100%) sepia(0%) saturate(4176%) hue-rotate(299deg) 	brightness(113%) contrast(81%);	
	transition:                 transform 0.1s steps(4, end),
								filter 0.1s ease-in-out;
}

.service-icon {
    position:                   relative; 
    z-index:                    1;       
    overflow:                   hidden; 
    background:          		rgb(var(--white));
    transition:                 background 0.2s ease-in-out;
}

.service-item:hover .service-icon {
    background:           		rgb(var(--blue));
    transition:                 background 0.1s ease-in-out;
}

#residential .service-icon::before, #commercial .service-icon::before {
	content:                    "";
    position:                   absolute;
    top:                        0;
    left:                       0;
    width:                      100%;
    height:                     100%;
    z-index:                    -1; 
}

#residential .service-icon::before {
	background: 				url("images/residential-hvac.svg") no-repeat top / cover;
}

#commercial .service-icon::before {
	background: 				url("images/commercial-hvac.svg") no-repeat top / cover;
}



#social {
	background:					rgb(var(--blue));
}

#social h3 {					/* title */
	font-weight:				300;
	font-size:					var(--mdtxt);
	padding: 					0 var(--mdpmg) var(--lgpmg);
	text-align:					center;
}

#social h3 br {
	display: 					none;
}

#social h4 {					/* label */
	font-size:					var(--smtxt);
}

#social .content > * { 
	/* make middle items equal width so they align evenly */
	width: 10rem;
	display: flex;
	justify-content: center;
}

#social .content > :first-child, #social .content > :last-child {
	/* make first and last items equal width so they align evenly */	
	width: 6.5rem;
}

#social .content > :first-child {
	justify-content: left;
}

#social .content > :last-child {
	justify-content: right;
}

#social .content {
	display:					flex;
	justify-content:			space-between;
	flex-direction:				row;
}

.account {
	text-align: center;	
}

#social img {
	transition:                 transform 0.1s steps(4, end);
	margin-bottom:				var(--smpmg);
	height: 					3rem;
}

#social a:hover img {
	transform:					scale(0.85);
    transition:                 transform 0.1s steps(4, end);
}

#social a {
	color:						rgb(var(--white));	
}

#footer {
	background:					rgb(var(--white));
	color:						rgb(var(--black));
	padding:					var(--lgpmg) 0;
}

#footer .container {
	display: 					flex;
	flex-direction: 			row;
	gap:						var(--mdpmg);
	justify-content: 			space-between;
}

#footer-main {
	display: 					flex;
	flex-direction: 			column;
	justify-content: 			space-between;
	align-items: 				center;
}

#office {
	text-align:					right;
}

.address {
	width: 						22%;
	line-height:				var(--lglh);
	color:						rgb(var(--black));
	letter-spacing:				var(--mdls);
}

.address h4 {
	font-size: 					var(--smtxt);
	font-weight:				800;
}

.address p {
	font-weight:				300;
	font-size: 					var(--smtxt);
}

#sitemap {
    display: 					flex;
	font-weight:				600;
	font-size:					var(--sstxt);
}

#sitemap p {
	font-size: 					var(--smtxt);
}

#sitemap a {
	color:						rgb(var(--blue));
    transition:                 color 0.2s steps(4, end);
}

#sitemap a:hover {
	color:						rgb(var(--red));
    transition:                 color 0.1s steps(4, end);
}

#ccb, #legal {
	font-size:					var(--xstxt);
	color:						rgb(var(--grey));
}

#ccb {
	font-weight:				600;
}

#legal {
	font-weight:				300;
}

#sitemap p:not(:last-child)::after {
  content: "\00a0|\00a0";  /* adds non-breaking spaces before and after the pipe */
}


a {
	text-decoration: 			none;
	color:						rgb(var(--white));
    transition:                 transform 0.2s steps(4, end);
}