/*		homepage.css	version 1		3/20/26		*/



	:root {
		--vw1600: min(100vw, 1600px);
		}



/* =============================================================== PAGE WRAPPERS ============================================================== */

	* {
		box-sizing: border-box;								/*	Include Padding And Border In Calculations										*/
		margin: 0;											/*	Margin														0					*/
		padding: 0;											/*	Padding														0					*/
		}
		
	html, body {
		height: 100%;										/*	Height														100%				*/
		}
	
	body
		{
/*		transform: scale(1.0) translateY(0);					Scale Page From Its Original Size												*/
		transform-origin: center;							/*	Keeps The Top-Left Corner As The Origin											*/
		border: 0px solid purple;							/*	Border:										Purple			2px					*/
		border-radius: 15px;								/*	Border-Radius Corners										15px				*/
		overflow-y: auto;									/*	Allow Vert. Scrolling															*/
		position: relative;									/*	Allow Content Positioning														*/
		min-width: 320px;									/*	Min-Width													320px				*/
		max-width: 1600px;									/*	Max-Width													1600px				*/
		width: 96%;											/*	Width														96%					*/
		height: auto;										/*	Height														auto				*/
		background-color: black;							/* 	Background-Color							Black								*/
		color: white;										/*	Font Color									White								*/
		font-family: Arial, sans-serif;						/*	Font Family																		*/
		top: 0;												/*	Adjust Vert. Pos (Top: 10%)									10%					*/
		margin: 0 auto;										/* 	Margin														0 Auto				*/
		}

.grid-1 {											/*	Main Grid For The Entire Page	*/
		display: block;										/*	Pos. Children Within Grid														*/
		border: 0px solid green;							/*	Border										Green			1px					*/
		border-radius: 15px;								/*	Radius Corners												15px				*/
		min-width: 320px;									/*	Min-Width													320px				*/
		max-width: 1600px;									/*	Max-Width													1600px				*/
		color: white;										/*	Font Color									White								*/
		gap: 0;												/*	Gap															0					*/
		box-sizing: border-box;								/*	Box-Sizing																		*/
		margin: 0 auto;										/*	Margin														0 Auto				*/
		padding: calc(48 * var(--vw1600) / 1600);			/*	Padding														48px / Max			*/
		padding-bottom: calc(32 * var(--vw1600) / 1600);	/*	Padding-Bottom												32px / Max			*/
		}

/* ================================================================= Container ! ============================================================== */

	.container-1 {									/*	Logo To Contact Section Wrapper  */
		border: 0px solid violet;							/*	Border: Col.								White			1px					*/
		border-radius: 15px;								/*	Radius Corners												15px				*/
		}

	.logo {											/* Logo Section */
		width: calc(var(--vw1600) * 0.48);	
		margin:		0 auto;									/*	Margin														0px auto / Max		*/
		}

	.logo img {
		display:	block;
		height:		auto;									/*	Height														auto				*/
		width:		100%;									/*	Width														100%				*/
		}

	.h1 {											/* Landscaping - Brick Paving - Decks  */
		color:		 #A68A6D;								/*	Font Color									Dark Tan							*/ 
		text-align: center;									/*	Text: Align Center																*/
		font-size:	calc(48 * var(--vw1600) / 1600);		/*	Font Size													48px / Max			*/
		font-family: 'Roboto', Helvetica, sans-serif;
		letter-spacing: 0.1em;								/*	Letter-Spacing												0.1em				*/
		font-style:	italic;									/*	Font-Style					Italic												*/
		margin:		calc(48 * var(--vw1600) / 1600) auto	/*	Margin														48px auto / Max		*/
					0 auto;									/*	Margin														0px auto / Max		*/
		padding:	0;										/*	Padding														0					*/
		}

	.h1-single {
		display:		block;									/*	Visible By Default										*/
		}

	.h1-portrait {
		display:		none;									/*	Hidden By Default — Portrait Only						*/
		}

	.h2 {											/*	A Picture Is Worth,...	*/
		border: 0px solid blueviolet;						/*	Border: Col.								White			1px					*/
		border-radius: 15px;								/*	Border-Radius Corners										15px				*/
		text-align: center;
		color:		#2DC8FF;								/*	Font Color									Aqua Blue							*/
		font-size: calc(38.4 * var(--vw1600) / 1600);		/*	Font-Size													38.4px / Max		*/
		letter-spacing: 0.05em;								/*	Letter-Spacing												0.05em				*/
		font-style:	italic;
		font-weight: bold;
		width:		100%;									/*	Width														100%				*/
		margin:		calc(8 * var(--vw1600) / 1600) 0		/*	Margin														16px / Max			*/
					calc(4 * var(--vw1600) / 1600) 0;		/*	Margin														48px / Max			*/
		padding:	calc(0 * var(--vw1600) / 1600)
					calc(4 * var(--vw1600) / 1600)			/*	Padding														0 4px / Max			*/
					calc(32 * var(--vw1600) / 1600)
					calc(4 * var(--vw1600) / 1600);			/*	Padding														0 4px / Max			*/
		}

/*  - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

	.h5 {											/*	Welcome!  */
		border: 0px solid blueviolet;						/*	Border: Col.								White			1px					*/
		border-radius: 15px;								/*	Border-Radius Corners										15px				*/
		text-align:	center;
		color:		#FCE8D4;								/*	Font Color									Off White							*/ 
		font-size:		calc(56 * var(--vw1600) / 1600);	/*	Font Size:													56px / Max			*/
		font-style:		italic;
		font-weight:	bold;
		margin-bottom:	calc(0 * var(--vw1600) / 1600);	/*	Pull H4 Up Closer												0px / Max			*/
		padding:	calc(0 * var(--vw1600) / 1600)
					calc(0 * var(--vw1600) / 1600)			/*	Space above/right											0px / Max			*/
					calc(8 * var(--vw1600) / 1600)
					calc(0 * var(--vw1600) / 1600);			/*	Space below/left											8,0px / Max			*/
		}

	.h4 {											/*	We Are A Full-Service Provider,...	*/
		border: 0px solid blueviolet;						/*	Border: Col.								White			1px					*/
		border-radius: 15px;								/*	Border-Radius Corners										15px				*/
		text-align:	center;
		color:		#FCE8D4;								/*	Font Color									Off White							*/ 
		font-size:	calc(34 * var(--vw1600) / 1600);		/*	Font-Size													36 px / Max			*/
/*		font-family: 'Dancing Script', cursive;	 	*/		/*	Scriptive Feel																	*/
/*		font-family: 'Great Vibes', cursive;	*/			/*	Scriptive shuffle-speed-label													*/
		letter-spacing: 0.1em;								/*	Letter-Spacing												0.18em				*/
		font-style:		italic;
		margin:		calc(0 * var(--vw1600) / 1600)			/*	Margin														0px / Max			*/
					calc(0 * var(--vw1600) / 1600);			/*	Margin														0px / Max			*/
		padding:	calc(0 * var(--vw1600) / 1600) 18px		/*	Padding														24 24px / Max		*/
					calc(32 * var(--vw1600) / 1600) 18px;	/*	Padding														0 24px / Max		*/
		}

/*  - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Contact Section 1 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

	.contact-link-wrapper {
		display:		flex;
		border: 0px solid Green;							/*	Border:										Purple			2px					*/
		border-radius: 15px;								/*	Border-Radius Corners										15px				*/
		justify-content: center;
		width:			100%;
		}

	.contact-link {
		color:			#ffff00;							/*	UC Link Yellow								UC Link Yellow						*/
		font-size:		calc(44 * var(--vw1600) / 1600);	/*	Font Size:													36px / Max			*/
		font-weight:	bold;
		font-style:		italic;
		text-decoration: none;
		cursor:			pointer;
		}

	.contact-link:hover {
		color:			#FF5733;							/*	Hover:										Burnt Orange						*/
		letter-spacing: 0.02em;								/*	Letter-Spacing												0.1em				*/
		text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
		}

/*  - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Upper Link Toggle Row - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

	.upper-link-toggle-row {
		display:		grid;
		grid-template-columns: 32% 26% 20% 22%;				/*	Four Columns For Contact, Blank, Icon, & AddIconLabel							*/
		border: 0px solid blueviolet;						/*	Border: Col.								White			1px					*/
		border-radius: 15px;								/*	Border-Radius Corners										15px				*/
		align-items:	center;								/*	Vertically Center Each Label													*/
		text-align:		center;								/*	Centers Inline Content In Each Cell												*/
		width:			100%;
		}

	.upper-link-toggle-row .label-wrapper {
		font-size:		calc(44 * var(--vw1600) / 1600);
		font-weight:	bold;
		}

	.upper-link-toggle-row .label-wrapper_left				/*	Left Column;			label - 'Contact'					Center Align		*/
		{ justify-self: center; }
	.upper-link-toggle-row .label-wrapper_left-center		/*	Left Center Column;		Blank								Center Align		*/
		{ justify-self: center; }
	.upper-link-toggle-row .label-wrapper_right-center		/*	Right Center Column;	Icon Preview						end Align		*/	
		{ justify-self: end; }	
	.upper-link-toggle-row .label-wrapper_right {			/*	Right Column;			label - 'Add UC to Phone'			Start Align			*/
		justify-self:	start;
		white-space:	nowrap;
		padding-left:	calc(24 * var(--vw1600) / 1600);
		}

	.add-icon-link {
		color:			#ffff00;							/*	UC Link Yellow																	*/
		font-style:		italic;
		text-decoration: none;
		cursor:			pointer;
		}

	.add-icon-link:hover {
		color:			#FF5733;							/*	Hover:	Burnt Orange															*/
		letter-spacing:	0.02em;
		text-shadow:	1px 1px 2px rgba(0, 0, 0, 0.3);
		}


/* ======================================================= Container 2 - Portfolio Bracnh ===================================================== */

	.nav-path-portfolio-header {					/*	Explore 'Portfolios & Photo Albums'	*/
		border: 0px solid blueviolet;						/*	Border: Col.								White			1px					*/
		border-radius: 15px;								/*	Border-Radius Corners										15px				*/
		text-align:	center;
		color:		#99FF99;								/*	Font Color									UC Green							*/ 
		font-size:	calc(48 * var(--vw1600) / 1600);		/*	Font-Size													36 px / Max			*/
/*		font-family: 'Dancing Script', cursive;	 	*/		/*	Scriptive Feel																	*/
/*		font-family: 'Great Vibes', cursive;	*/			/*	Scriptive shuffle-speed-label													*/
		font-style:		italic;
		font-weight:	bold;								/*	Font Weight:								Bold				*/
		letter-spacing: 0.1em;								/*	Letter-Spacing												0.18em				*/
		margin:		calc(0 * var(--vw1600) / 1600)			/*	Margin														0px / Max			*/
					calc(0 * var(--vw1600) / 1600);			/*	Margin														64px / Max			*/
		padding:	calc(96 * var(--vw1600) / 1600) 0		/*	Padding														0px / Max			*/
					calc(4 * var(--vw1600) / 1600) 0;		/*	Padding														12px / Max			*/
		}

/*  - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

	.nav-path-others-header {						/*	Browse By 'Sideshow' or 'Enjoy Nature At Home'	*/
		border: 0px solid blueviolet;						/*	Border: Col.								White			1px					*/
		border-radius: 15px;								/*	Border-Radius Corners										15px				*/
		text-align:	center;
		color: #2DC8FF;										/*	Font Color: Light						 Aqua Blue								*/
		font-size:	calc(32 * var(--vw1600) / 1600);		/*	Font-Size													36 px / Max			*/
/*		font-family: 'Dancing Script', cursive;	 	*/		/*	Scriptive Feel																	*/
/*		font-family: 'Great Vibes', cursive;	*/			/*	Scriptive shuffle-speed-label													*/
		letter-spacing: 0.1em;								/*	Letter-Spacing												0.18em				*/
		margin:		calc(0 * var(--vw1600) / 1600)			/*	Margin														0px / Max			*/
					calc(0 * var(--vw1600) / 1600);			/*	Margin														64px / Max			*/
		padding:	calc(0 * var(--vw1600) / 1600) 0		/*	Padding														0px / Max			*/
					calc(24 * var(--vw1600) / 1600) 0;		/*	Padding														12px / Max			*/
		}

	.altBrowsingTextLg {
		font-size:	calc(36 * var(--vw1600) / 1600);		/*	Font Size:													40px / Max			*/
		font-weight:	bold;
		font-style:		italic;
		}

	.altBrowsingTextSm {
		font-size:	calc(32 * var(--vw1600) / 1600);		/*	Font Size:													32px / Max			*/
		}

	.others-header-single {
		display:	block;									/*	Visible By Default — All Views Except Portrait									*/
		}

	.others-header-portrait {
		display:	none;									/*	Hidden By Default — Portrait Only												*/
		}


/* ================================================================= Container 2 =============================================================== */

/* Panoramic Section */
	.container-2 {									/*	Nav Button & Panoramic Image Container	*/
		display: grid;
		grid-template-columns: 22% 77%;						/*	Left Column (Narrow), Right Column (Wide)										*/
		border: 0px solid aquamarine;						/*	Border: Col.								Aquamarine		1px					*/
		border-radius: 15px;								/*	Border-Radius Corners										15px				*/
		column-gap: 1%;										/*	Column-Gap													1%					*/
		align-items: stretch;								/*	Align Content At The Top														*/
		width: 100%;										/*	Width														100%				*/
		max-width: 1600px;									/*	Max Width													1600px				*/
		padding:	calc(0 * var(--vw1600) / 1600)	0		/*	Padding														96px 0 / Max			*/
					calc(0 * var(--vw1600) / 1600) 0;		/*	Padding														0px 0 / Max			*/
		}

/* Left Column - Panoramic Section*/
	.container-2 .left-column-panoramic {			/*	Upper Nav Button Wrapper  */
		border: 0px solid orange;							/*	Border: Col.								Orange			1px					*/
		border-radius: 15px;								/*	Border-Radius Corners										15px				*/
		}

/* Right Column - Panoramic Section */
	.container-2 .right-column-panoramic {			/*	Image Wrapper  */
		display: flex;  
		border: 0px solid Red;								/*	Border										Red				1px					*/
		border-radius: 15px;								/*	Border-Radius Corners										15px				*/
		justify-content: center;							/*	horizontal centering															*/
		align-items: strech;								/*	vertical centering																*/
		height: 100%;										/*	Height														100%				*/
		width: 100%;										/*	Width														100%				*/
		box-sizing: border-box;
		}

	.container-2 .right-column-panoramic img {		/*	Image Element	*/
		border: 0px solid white;							/*	Border: Col.								White			1px					*/
		border-radius: 15px;								/*	Radius Corners												15px				*/
		max-width: 100%;
		max-height: 100%;
		height: auto;										/*	Height: Maintain Aspect Ratio								Auto				*/
		width: 100%;										/*	Width														100%				*/
		margin: 0;											/*	Margin														0					*/
		padding: 0;											/*	Padding														0					*/
		}






/* ======================================================= Container 3 - Slideshow Branch ===================================================== */

	.container-3 {									/*	Slide Show Container	*/
		border: 0px solid red;								/*	Border: Col.								Red				1px					*/
		border-radius: 15px;								/*	Border-Radius Corners										15px				*/
		margin:		calc(0 * var(--vw1600) / 1600) 0;		/*	Margin														4px 0 / Max			*/
		padding:	calc(120 * var(--vw1600) / 1600) 0		/*	Padding														96px 0 / Max		*/
					calc(0 * var(--vw1600) / 1600) 0;		/*	Padding														0px 0 / Max			*/
		}

	.slideshow-header {								/*	Browse Projects With Slideshow	*/
		border: 0px solid blueviolet;						/*	Border: Col.								White			1px					*/
		border-radius: 15px;								/*	Border-Radius Corners										15px				*/
		text-align:	center;
		color:		#99FF99;								/*	Color										UC Green							*/
		font-size:	calc(48 * var(--vw1600) / 1600);		/*	Font-Size													36 px / Max		*/
/*		font-family: 'Dancing Script', cursive;	 	*/		/*	Scriptive Feel																	*/
/*		font-family: 'Great Vibes', cursive;	*/			/*	Scriptive Feel																	*/
		letter-spacing: 0.1em;								/*	Letter-Spacing												0.18em				*/
		font-style:		italic;
		margin:		calc(0 * var(--vw1600) / 1600)			/*	Margin														32px / Max			*/
					calc(12 * var(--vw1600) / 1600);		/*	Margin														64px / Max			*/
		padding:	calc( 0 * var(--vw1600) / 1600)	0		/*	Padding														96px / Max			*/
					calc(12 * var(--vw1600) / 1600) 0;		/*	Padding														12px / Max			*/
		}

	#hoverMessage {
		position: fixed;
		z-index: 9999;
		border: 1px solid #99FF99;							/*	Color										UC Green		1px					*/
		background: #222;
		color: #D7FDD5;										/*	Dynamic Text Color: Off White				Mint Green							*/
		line-height:	calc(20 * var(--vw1600) / 1600);	/*	Letter-Spacing												16px / Max			*/
		padding:		calc(20 * var(--vw1600) / 1600)		/*	Padding														6px / Max			*/
						calc(30 * var(--vw1600) / 1600);	/*	Padding														9px / Max			*/
		border-radius:	calc(30 * var(--vw1600) / 1600);		/*	Border-Radius Corners										8px / Max			*/
		box-shadow:	  0	calc(8 * var(--vw1600) / 1600)
						calc(16 * var(--vw1600) / 1600)
						rgba(0,0,0,0.35);
		font-size: calc(30 * var(--vw1600) / 1600);			/*	Font-Size													12px	/ Max		*/
		pointer-events: none;
		opacity: 0;
		transition: opacity 0.15s;
		}

	#hoverMessage.visible {
		opacity: 1;
		}

/* ================================================================ Toggle Row ================================================================ */

	.toggle-row {									/*	Toggle Row Container - Load New Projects / Images Wrapper  */
		border: 0px solid orange;							/*	Border: Col.								Orange			1px					*/
		border-radius: 15px;								/*	Border-Radius Corners										15px				*/
		display:	grid;
		grid-template-columns: 1fr 1fr 1fr;					/*	Three Equal Columns For Left, Center, Right Labels								*/
		align-items: center;								/*	Vertically Center Each Label													*/
		text-align: center;									/*	Centers Inline Content In Each Cell												*/
		width:		100%;
		margin:		calc(0 * var(--vw1600) / 1600) 0;		/*	Margin														0 0px / Max			*/
		padding:	0 calc(108 * var(--vw1600) / 1600)		/*	Padding														0 108px  / Max		*/
					12px calc(108 * var(--vw1600) / 1600);	/*	Padding														12 108px / Max		*/
		}

	.toggle-row .label-wrapper {
		color:		#ffff00;								/*	UC Link Yellow																	*/
		font-size:	calc(32 * var(--vw1600) / 1600);
		font-weight: bold;
		cursor:		pointer;								/*	Looks Clickable																	*/
		}

	.label-wrapper.left		{ justify-self: start; }		/*	Left-Aligned Column																*/
	.label-wrapper.center	{ justify-self: center; }		/*	Centered Column																	*/
	.label-wrapper.right	{ justify-self: end; }			/*	Right-Aligned Column															*/

/* ============================================================== Labels Toggle Row =========================================================== */

	.label-wrapper.left {						/*	Far Left Label	*/
		margin-left: calc(16 * var(--vw1600) / 1600);
		}

	.shuffle-label {
		text-align: center;
		}

	.shuffle-prompt,
	.shuffle-title {
		line-height: calc(20.8 * var(--vw1600) / 1600);
		text-decoration: none;
		font-style: italic;
		}

/*  - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

	.label-wrapper.center {							/*	Center Label	*/
		width: max-content;
		}

	.project-label {
		text-align: center;
		cursor:			pointer;
		}

	.project-prompt,
	.project-title {
		line-height: calc(20.8 * var(--vw1600) / 1600);
		text-decoration: none;
		font-style: italic;
		}
	
		.click-prompt {
		color: #2DC8FF;						/*	UC Aqua Blue	*/
		}

	.click-title {
		color: #D7FDD5;						/*	UC Mint Green	*/
		}

	.project-label {
		text-align: center;
		}

/*  - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

	.label-wrapper.right {							/*	Far Right Label	*/
		margin-right: calc(16 * var(--vw1600) / 1600);
		}

	.image-label {
		text-align: center;
		}

	.image-prompt,
	.image-title {
		line-height: calc(20.8 * var(--vw1600) / 1600)
		text-decoration: none;
		font-style: italic;
		}

	.label-clicked {
		opacity: 0;
		transition: opacity 150ms ease-in-out;
		}

	.hover-prompt,
	.hover-title {
		display: block;
		text-align: center;
		letter-spacing: 0.1em;								/*	Letter-Spacing												0.1em				*/
		}

	.hover-prompt {color: #99FF99;}
	.hover-title {color: #D7FDD5;}
													/*	UC Green		#99FF99									*/
													/*	Off White		#D7FDD5									*/

/* ========================================================= Container 4 - Upper Photoset ====================================================== */

/* Photo Set Upper Section */

	.photo-set-1-wrapper {								/*	Upper Photoset Wrapper	*/
		display: block;
		border: 0px solid aquamarine;						/*	Border: Col.								White			1px					*/
		border-radius: 15px;								/*	Border-Radius Corners										15px				*/
		height: auto;
		min-height: 1px;
		}

	.image-style {											/*	Photo Set 1: Style	*/
		display: grid;										/*	Pos. Children Within Grid														*/
		grid-template-columns: repeat(4, 1fr);				/*	4 Equal-Width Columns For Images												*/
		background-color: black;							/*	Background Color:							Black								*/
		border: 0px solid white;							/*	Border Col.& Thickness:						White			1px					*/
		border-radius: 15px;								/*	Border-Radius Corners										15px				*/
		gap:	calc(12 * var(--vw1600) / 1600);			/*	Gap															12px 0 / Max		*/
		margin: calc(12 * var(--vw1600) / 1600) 0			/*	Space Above Content											12px 0 / Max		*/
				calc(12 * var(--vw1600) / 1600) 0;			/*	Space Above Content											12px 0 / Max		*/
		padding: 0;											/*	Padding														0px					*/
		}

	.image-style div img{
		position: relative;
		aspect-ratio: 7.5 / 5;								/*	Each Photo Slot = 7 wide, 5 tall */
		overflow: hidden;									/*	Clip Overflow */
		border-radius: 15px;								/*	Radius Corners												15px				*/
		}

	.image-style img {
		display: block;										/*	Remove Extra Space Below Image													*/
		border: 0px solid yellow;							/*	Border Col.& Thickness:						Yellow			1px					*/
		border-radius: 15px;								/*	Border-Radius Corners										15px				*/
		object-fit: cover;									/*	Ensures Image Fills Container Without Losing Aspect Ratio						*/
		object-position: center;
		height: auto;										/*	Height														Auto				*/
		width: 100%;										/*	Width														100%				*/
		}

/* ========================================== Container 5 - Lower Nav Buttons & Text Window Wrapper ============================================ */

/* Text Section	*/
	.container-5 {									/*	Lower Nav Buttons & Text Window Wrapper	*/
		display: grid;
		grid-template-columns: 22% 77%;						/*	Left Column (Narrow), Right Column (Wide)										*/
		border: 0px solid red;								/*	Border: Col.					Fixed			White			1px				*/
		border-radius: 15px;								/*	Radius Corners					Fixed							15px			*/
		gap: 1%;											/*	Spacing Between Columns */
		align-items: stretch;								/*	Align Content At The Top */
		width: 100%;
		margin: 0;											/*	Space Above Content				Dynamic							0.75vw			*/
		padding:	calc(12 * var(--vw1600) / 1600)	0		/*	Padding														0px 0 / Max			*/
					calc(12 * var(--vw1600) / 1600) 0;		/*	Padding														0px 0 / Max			*/
		}

/* Right Column Text Section */
	.container-5 .right-column-text {
		display: flex;              						/*	Make It A Flex Container */
		flex-direction: column;     						/*	Stack Children Vertically */
		border-radius: 15px;
		overflow: hidden;									/*	Prevent It From Escaping Container Height */	
		}

/* Text: Main Body */								/*	Text Window Wrapper  */
	.main-body-text	{
		overflow: auto;										/*	Allows Scrolling If Needed														*/
		border: 0px solid yellow;							/*	Border: Col.					Fixed			White			1px				*/
		border-radius: 15px;								/*	Radius Corners					Fixed							15px			*/
		background-color: #99FF99;							/*	Background Color:								#99FF99 UC Green				*/
		color: black;										/*	Font Color:										Black							*/
		font-size: 1.1em;									/*	Font Size:						Dynamic							1.3em			*/
		line-height: 1.1;									/*	Text Line Height:				Dynamic							1.25em			*/
		padding: 0	calc(var(--vw1600) * 0.0125)
					calc(var(--vw1600) * 0.01875)
					calc(var(--vw1600) * 0.01875);			/*	Space Within Border				Fixed							40px			*/
		margin: 0;											/*	Space Above Content				Dynamic							0.75vw			*/
		box-sizing: border-box;								/*	Include Padding In Calculations													*/
		}

/* Title */											
	.main-body-text .mainTextTitle {				/*	Welcome!  */
		line-height: inherit;								/*	Line-Height: Inherit From Parent												*/
		font-size: calc(52 * var(--vw1600) / 1600);			/*	Font Size:															40px / Max	*/
		text-align: center;									/*	Text Align: Center																*/
		font-weight: bold;
		margin: 7% 0% 2% 0%;								/*	Space Above Content				Dynamic							7% 0% 2% 0%		*/
		}

/* Sub-Title */
	.main-body-text .subtitle {						/*	General Contracting, Manufacturing, About Our Designs  */
		color: #440000;										/*	Font Color:										Black							*/		
		font-size: calc(40 * var(--vw1600) / 1600);			/*	Font Size:														32px / Max	*/
		text-align: left;									/*	Text Align: Left																*/
		font-weight: bold;
		margin: 0% 0% 1% 0%;								/*	Space Around Content			Dynamic							3vw				*/
		}

	.main-body-text p {								/*	Paragraph: Style Inside Text Section  */
		text-align: justify;								/*	Text Align: Justify																*/
		text-indent: 2em;									/*	Text Indent: First Lines Only													*/
		font-size: calc(40 * var(--vw1600) / 1600);			/*	Font Size:														30.4px / Max	*/
		margin: 0% 0% 0% 0%;								/*	Space Below Content				Dynamic							0vw				*/
		}


/* ========================================================= Container 6 - Lower Photoset ====================================================== */

	.photo-set-2-wrapper {							/*	Lower Photoset Wrapper	*/
		border: 0px solid aquamarine;						/*	Border: Col.								Aquamarine		1px					*/
		border-radius: 15px;								/*	Radius Corners												15px				*/
		display: block;
		height: auto;
		min-height: 1px;
		}

	.photo-set-2-wrapper {
		margin-top: auto;									/*	Pushes This Section To The Bottom Of The Right Column							*/
		}

	.image-style {									/*	Photoset Wrapper - Check For Redunduncy with Photoset Wrappers Above?  */
		display: grid;										/*	Pos. Children Within Grid														*/
		grid-template-columns: repeat(4, 1fr);				/*	4 Equal-Width Columns For Images												*/
		background-color: black;							/*	Background Color:							Black								*/
		border: 0px solid white;							/*	Border Col.& Thickness:						White			1px					*/
		border-radius: 15px;								/*	Border-Radius Corners										15px				*/
		gap:	calc(12 * var(--vw1600) / 1600);			/*	Gap															12px 0 / Max		*/
		margin: calc(0 * var(--vw1600) / 1600) 0			/*	Space Above Content											12px 0 / Max		*/
				calc(0 * var(--vw1600) / 1600) 0;			/*	Space Above Content											12px 0 / Max		*/
		padding: 0;											/*	Padding														0px					*/				
		}

	.image-style img {								/*	Image Element Wrapper  */
		display: block;										/*	Remove Extra Space Below Image													*/
		border: 0px solid yellow;							/*	Border Col.& Thickness:						Yellow			1px					*/
		border-radius: 15px;								/*	Border-Radius Corners										15px				*/
		object-fit: cover;									/*	Cover Space Without Distorting													*/
		object-position: center;
		height: auto;										/*	Height: Maintain Aspect Ratio								Auto				*/
		width: 100%;										/*	Width														100%				*/
		}






/* ======================================================== Container 7 - Nature Branch ======================================================== */

	.container-7 {									/*	Nature Branch Wrapper  */
		border: 0px solid blue;								/*	Border: Col.								Blue			1px					*/
		border-radius: 15px;								/*	Border-Radius Corners										15px				*/
		margin:		calc(4 * var(--vw1600) / 1600) 0;		/*	Margin														4px 0 / Max			*/
		padding:	calc(120 * var(--vw1600) / 1600) 0		/*	Padding														96px / Max			*/
					calc(36 * var(--vw1600) / 1600) 0;		/*	Padding														12px / Max			*/
		}

	.nature-Slogan {								/*	Appreciate The Visitors Sharing Our Space  */
		border: 0px solid red;								/*	Border: Col.								Red				1px					*/
		border-radius: 15px;								/*	Border-Radius Corners										15px				*/
		color: #99FF99;										/*	Font Color: Light Aqua Blue					2DC8FF								*/
		font-style: italic;
		text-align: center;									/* 																					*/
		font-size: calc(48 * var(--vw1600) / 1600);			/*	Font-Size													36px / Max			*/
		letter-spacing: 0.1em;								/*	Letter-Spacing												0.18em				*/
		margin: calc(0 * var(--vw1600) / 1600) 0			/*	Margin											 			192px / Max			*/
				calc(0 * var(--vw1600) / 1600) 0;			/*	Margin														48px / Max			*/
		padding:	calc(0 * var(--vw1600) / 1600)	0		/*	Padding														0px 0 / Max			*/
					calc(12 * var(--vw1600) / 1600) 0;		/*	Padding														0px 0 / Max			*/
		}

	.h3 {											/*	Nature Header - Nature To Enjoy From Home*/
		text-align: center;									/* 																					*/
		color:		#2DC8FF;								/*	Font Color: Light Aqua Blue					Aqua Blue							*/
		font-size:	calc(43.2 * var(--vw1600) / 1600);		/*	Font Size													43.2px / Max		*/
		letter-spacing: 0.05em;								/*	Letter-Spacing												0.05em				*/
		font-style:	italic;
		width:		100%;									/*	Width														100%				*/
		margin:		calc(4 * var(--vw1600) / 1600) 0		/*	Margin														16px 0 / Max		*/
					calc(48 * var(--vw1600) / 1600) 0;		/*	Margin														48px 0 / Max		*/
		padding:	0 calc(4 * var(--vw1600) / 1600)		/*	Padding														0 4px / Max			*/
					0 calc(4 * var(--vw1600) / 1600);		/*	Padding:													0 4px / Max			*/
		}

	.nature-header {								/*	Nature To Enjoy From Home  */
		border: 0px solid yellow;							/*	Border: Col.								Yellow			1px					*/
		border-radius: 15px;								/*	Border-Radius Corners										15px				*/
		color: #2DC8FF;										/*	Font Color: Light						 Aqua Blue								*/
		font-style: italic;
		text-align: center;									/* 																					*/
		font-size: calc(40 * var(--vw1600) / 1600);			/*	Adjust Per Viewport											28px / Max			*/
		letter-spacing: 0.1em;								/*	Letter-Spacing												0.18em				*/
		margin: calc(0 * var(--vw1600) / 1600) 0			/*	Margin											 			32px / Max			*/
				calc(0 * var(--vw1600) / 1600) 0;			/*	Margin														32px 0 / Max		*/
		padding:	calc(0 * var(--vw1600) / 1600)	0		/*	Padding														0px 0 / Max			*/
					calc(12 * var(--vw1600) / 1600) 0;		/*	Padding														0px 0 / Max			*/
		}

	.nature-images {								/*	Nature Photoset Wrapper	*/
		border: 0px solid pink;								/*	Border: Col.								Pink			1px					*/
		border-radius: 15px;								/*	Border-Radius Corners										15px				*/
		display: grid;										/*	Pos. Children Within Grid														*/
		grid-template-columns: repeat(4, 1fr);				/*	4 Equal-Width Columns For Images												*/
		gap: calc(12 * var(--vw1600) / 1600);				/*	Gap															12px / Max			*/
		margin: calc(0 * var(--vw1600) / 1600) 0			/*	Margin											 			12px / Max			*/
				calc(0 * var(--vw1600) / 1600) 0;			/*	Margin														12px / Max			*/
		}

	.nature-images img {							/*	Image Elements  */
		display: block;										/*	Remove Extra Space Below Image													*/
		border: 0px solid yellow;							/*	Border Col.& Thickness:						Yellow			1px					*/
		border-radius: 15px;								/*	Border-Radius Corners										15px				*/
		object-fit: cover;									/*	Cover Space Without Distorting													*/
		object-position: center;
		height: auto;										/*	Height: Maintain Aspect Ratio								Auto				*/
		width: 100%;										/*	Width:														100%				*/
		}

	.nature-images a {								/*	Caption Container	*/
		display:flex;
		flex-direction: column;
		text-decoration: none;								/*	Remove Underline From Link														*/
		color: inherit;										/*	Optional: Inherit Caption Color													*/
		cursor: pointer;
		}

	.nature-caption-wrapper {						/*	Caption Wrapper  */
		border: 0px solid pink;								/*	Border Col.& Thickness:						Pink			1px					*/
		border-radius: 15px;								/*	Border-Radius Corners										15px				*/
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		margin-top: calc(0 * var(--vw1600) / 1600);
		padding:	calc(12 * var(--vw1600) / 1600)	0		/*	Padding														0px 0 / Max			*/
					calc(0 * var(--vw1600) / 1600) 0;		/*	Padding														0px 0 / Max			*/
	}

	.nature-caption {								/*	Caption  */
		border: 0px solid red;								/*	Border Col.& Thickness:						Red				1px					*/
		border-radius: 15px;								/*	Border-Radius Corners										15px				*/
		text-align: center;									/*	Text: Align Center																*/
		color: #99FF99;										/*	Match Nav Text Color						UC Green							*/
		margin: calc(0 * var(--vw1600) / 1600) 0			/*	Margin											 			16px / Max			*/
				calc(0 * var(--vw1600) / 1600) 0;			/*	Margin														48px / Max			*/
		font-size: calc(36 * var(--vw1600) / 1600);			/*	Font-Size													28px / Max			*/
		letter-spacing: 0.1em;								/*	Letter-Spacing												0.18em				*/
		text-decoration: none;
		}

/* ================================================================================================================================== */

.progressive-img {
	filter: blur(2px);
	opacity: 0.6;
	transition: filter 0.5s, opacity 0.5s;
	}




http://localhost:8000/images/size_600px/902/902-1.jpg















