/* // Intro */
#intro		{display:grid; grid-template-columns:minmax(400px,2fr) minmax(300px,1fr); column-gap:1.5rem}
@media (max-width:800px){
	#intro	{display:block}
}


/* Content Sections */
.sections	{display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:1.5rem;}
.sections > div {box-shadow: rgba(0, 0, 0, 0.3) 0px 9px 19px, rgba(0, 0, 0, 0.22) 0px 7px 6px;
				padding:2rem; border-radius:var(--rounded);}
.topImage		{background-size:cover; width:100%; height:250px; border-top-left-radius:var(--rounded);
					border-top-right-radius:var(--rounded)}
.sectionGreen > div	{background-color:var(--logoGreen); color:#ffffff}
.sectionBlue > div {background-color:var(--contentBlue); color:#ffffff}
.sectionGold > div 	{background-color:var(--footerLinkColor);}

.interiorLink	{text-align:center; padding:.6rem 1rem; background-color:var(--orange); border-radius:var(--rounded);
					display:inline-block; transition:background-color 100ms ease-in;}
.interiorLink:hover	{background-color:#ffffff; color:var(--orange);}
.interiorLink:hover	a {background-color:#ffffff; color:var(--orange);}
.interiorLink a {color:#ffffff; text-decoration:none; transition:color 200ms ease-in;}
.interiorLink a:hover {color:var(--orange);; text-decoration:none}

.insideContent	{padding:1rem 1.5rem 2rem 1.5rem}

/* Steps Content, Why Choose Us */
#stepContent	{display:grid; font-family:"Barlow", sans-serif; padding:2rem;
				background-image:url(/assets/images/header/interiorPainting_1_header.jpg);
				background-size:cover; 
				background-color: rgba(0, 0, 0, 0.5);
				background-blend-mode: multiply;
				grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:1.5rem;
	
	.step		{display:flex; flex-direction:column; gap:.5rem; padding:1.75rem; background-color:#ffffff;
					box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; border-radius:var(--rounded);
					transition:all 300ms ease-in; position:relative;}
	.step::before {
		content:''; position:absolute; top:0; left:0; width:0; height: 10px;
		border-top-left-radius: var(--rounded); border-top-right-radius: var(--rounded);
		background-color:var(--logoGreen);
		transition: width 300ms ease;
	  }
	.stepTop	{display:flex; flex-direction:row; justify-content:space-between; align-items:center}
	.stepNum	{background-color:#efefef; border-radius:10px; padding:1rem 1.3rem; transition:all 300ms ease-in}
	.stepIcon	{font-size:1.5rem}
	.stepTitle	{font-weight:500;}
	.stepInfo	{font-size:1.1rem; font-weight:200}
	.step:hover	{box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px; }
	.step:hover .stepNum {background-color:var(--logoGreen); color:#ffffff;}
	.step:hover::before {
		width: 100%;
	}
}
#chooseContent	{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:1.5rem;
	font-family:"Barlow", sans-serif;
	.step		{display:flex; flex-direction:column; gap:.5rem; padding:1.75rem; background-color:#ffffff;
					box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; border-radius:var(--rounded);
					transition:all 300ms ease-in}
	.stepIcon	{font-size:1.5rem}
	.stepTitle	{font-weight:500;}
	.stepInfo	{font-size:1.1rem; font-weight:200}
	.step:hover	{box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;}
	.step:hover .stepNum {background-color:var(--logoGreen); color:#ffffff;}
}
.faq		{margin-top:1rem; display:flex; flex-direction:column; gap:1rem;background-color:#ffffff; 
				border-radius:var(--rounded); padding:1rem;}
.faqTop		{display:flex; flex-direction:row; justify-content: flex-start; align-items:center; gap:0.5rem;}
.question	{font-weight:bold; cursor:pointer;}
.arrow		{padding-top:0.5rem; transition:transform 150ms ease-in;}
.answer		{display:none; padding-left:40px; padding-bottom:1rem;}