@charset "UTF-8";

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


/* body - remove scroll bar, but allow scrolling (for different browsers) */
body {overflow: auto;}
::-webkit-scrollbar {display: none;}
html {scrollbar-width: none;}
body {-ms-overflow-style: none;}






/* cursor - circle styling */
.cursor-circle {
	border-radius: 50%;
	height: 30px;
	pointer-events: none;
	position: absolute;
	transform: translate(-50%, -50%);
	width: 30px;
	z-index: 1200;
}

/* easy color classes */
.orange {
	background-color: rgba(255, 85, 0, 0.7);
	color: rgba(255, 85, 0, 1);
}
.yellow {
	background-color: rgba(255, 244, 165, 0.7);
	color:  rgba(255, 244, 165, 1)
}
.green {
	background-color: rgba(59, 114, 34, 0.7);
	color: rgba(59, 114, 34, 1)
}
.purple {
	background-color: rgba(236, 221, 254, 0.7);
	color: rgba(236, 221, 254, 1)
}


/* easy color classes for hover effect*/
.hover-orange:hover {
	color: rgba(255, 85, 0, 1);
}
.hover-yellow:hover {
	color:  rgba(255, 244, 165, 1)
}
.hover-green:hover {
	color: rgba(59, 114, 34, 1)
}
.hover-purple:hover {
	color: rgba(236, 221, 254, 1)
}





/* color overlay - used on hover effect */
.color-overlay {
	background: #ECDDFE;
	height: 100%;
	left: 0;
	pointer-events: none;
	position: fixed;
	top: 0;
	transform: scaleY(0);
	transform-origin: bottom;
	transition: transform 0.1s ease-out;
	width: 100%;
	z-index: -1;
}








/* header - styling */
header {
	align-items: baseline;
	background-color: transparent;
	box-sizing: border-box;
	display: flex;
	height: 100vh;
	justify-content: space-between;
	margin: 0;
	min-height: 200px;
	padding: 50px 100px;
	pointer-events: none;
	position: fixed;
	width: 100%;
	z-index: 900;
}

/* allow pointer events on logo, nav and burger */
.nav-links, #logo, .burger-menu {
	pointer-events: auto;
}








/* logo - styling */
#logo {
	color: #000;
	font-family: "proxima-nova", sans-serif;
	font-size: 30px;
	font-style: normal;
	font-weight: 400; /* 500 = medium */
	line-height: 35px;
	margin: 0;
	position: absolute;
	text-align: left;
	text-decoration: none;
}

/* logo - styling on hover (orange and italic) */
#logo:hover {
	color: #FF5500;
	font-style: italic;
}

/* logo - places letters horisontally */
.bouncing-text {
	display: flex;
	position: relative;
}

/* logo - add spacing between words */
.jonv-a-anordi,
.jonva-a-nordi{
	padding-right: 11px;
}

/* logo - pure css animation */
@keyframes bounce {
	0%   { transform: scale(1,1) translateY(0); }
	10%  { transform: scale(1.1,.9) translateY(0); }
	30%  { transform: scale(.9,1.1)   translateY(-10px);}
	50%  { transform: scale(1.05,.95) translateY(0); }
	65%  { transform: scale(1,1) translateY(0);}
	100% { transform: scale(1,1) translateY(0);}
}

.j-onvaanordi, .j-o-nvaanordi, .jo-n-vaanordi, .jon-v-aanordi, .jonv-a-anordi, .jonva-a-nordi, .jonvaa-n-ordi, .jonvaan-o-rdi, .jonvaano-r-di, .jonvaanor-d-i, .jonvaanord-i {
	animation: none; /* no animation if hover = false */
}

.bouncing-text:hover .j-onvaanordi,
.bouncing-text:hover .j-o-nvaanordi,
.bouncing-text:hover .jo-n-vaanordi,
.bouncing-text:hover .jon-v-aanordi,
.bouncing-text:hover .jonv-a-anordi,
.bouncing-text:hover .jonva-a-nordi,
.bouncing-text:hover .jonvaa-n-ordi,
.bouncing-text:hover .jonvaan-o-rdi,
.bouncing-text:hover .jonvaano-r-di,
.bouncing-text:hover .jonvaanor-d-i,
.bouncing-text:hover .jonvaanord-i {
	animation: bounce 1.2s ease infinite;
	font-weight: 600;
}

.bouncing-text:hover .j-o-nvaanordi { animation-delay: 0.1s; }
.bouncing-text:hover .jo-n-vaanordi { animation-delay: 0.2s; }
.bouncing-text:hover .jon-v-aanordi { animation-delay: 0.3s; }
.bouncing-text:hover .jonv-a-anordi { animation-delay: 0.4s; }
.bouncing-text:hover .jonva-a-nordi { animation-delay: 0.5s; }
.bouncing-text:hover .jonvaa-n-ordi { animation-delay: 0.6s; }
.bouncing-text:hover .jonvaan-o-rdi { animation-delay: 0.7s; }
.bouncing-text:hover .jonvaano-r-di { animation-delay: 0.8s; }
.bouncing-text:hover .jonvaanor-d-i { animation-delay: 0.9s; }
.bouncing-text:hover .jonvaanord-i  { animation-delay: 1s; }












/* nav links - spacing and placement */
.nav-links {
	display: flex;
	flex-direction: column; /* nav link appears as vertical list */
	justify-content: space-between;
	overflow: hidden;
	position: absolute;
	right: 100px;	
}

/* nav link - styling */
.nav-link {
	color: #000;
	font-family: "proxima-nova", sans-serif;
	font-size: 20px;
	font-style: normal;
	font-weight: 400;
	line-height: 32px;
	text-align: right;
	text-decoration: none;
}

.alt-nav-links {
	flex-direction: row;
	justify-content: center;
	line-height: 35px;
	text-align: right;
}

.alt-nav-link {
	margin-left: 25px;
}

/* nav link - styling on hover including different colors for each link */
.nav-link:hover {
	font-style: italic;
}
#designProjects:hover {
	color: #FF5500;
}
#photography:hover {
	color: #FFF4A5;
}
#about:hover {
	color: #477333;
}
#contact:hover {
	color: #ECDDFE;
}

/* nav links - change list to horisontal after scroll */
.nav-links.horizontal-nav {
	flex-direction: row;
	justify-content: center;
	line-height: 35px;
	text-align: right;
}

/* nav links - add spacing between horisontal nav links */
.nav-links.horizontal-nav .nav-link {
	gap: 25px;
	margin-left: 25px;
}








/* burger menu - hide by default */
.burger-menu {
	display: none;
	height: 15px;
	width: 50px;
}

.burger-icon span {
	background-color: #000;
	display: block;
	height: 2px;
	left: 0;
	position: absolute;
	width: 100%;
}

.burger-icon span:nth-child(1) {
	top: 0;
}

.burger-icon span:nth-child(2) {
	top: 50%;
	transform: translateY(-50%);
}

.burger-icon span:nth-child(3) {
	bottom: 0;
}


.fixed-btn {
  position: fixed;
  bottom: 40px; /* 20px from the bottom */
  padding: 10px 20px;
  background-color: rgba(0,0,0,0.2);
  color: #fff;
  text-decoration: none;
  font-size: 20px;
  z-index: 1000;
	font-family: "proxima-nova", sans-serif;
	font-weight: 400;
}

.fixed-btn:hover {
  background-color: #FF5500;
	color: #ECDDFE;
	font-style: italic;
	font-weight: 600;
}

.prev-btn {
  left: 100px;              /* 20px from the left */
}

.next-btn {
  right: 100px;             /* 20px from the right */
}







/* landing page slideshow/carousel */
.slider-container {
	align-items: center;
	display: flex;
	height: auto;
	width: 100%;
	z-index: 3;
}

.slide {
	height: 100%;
	left: 0;
	object-fit: cover;
	padding: 270px 100px 0px 100px;
	top: 0;
	width: 100%;
	z-index: 4;
}




/* gap between items */
.gap1 {
	margin-top: 250px;
}

.gap2 {
	margin-top: 50px;
}

.gap3 {
	margin-bottom: 10px;
}

.gap4 {
	padding-top: 270px;
}

.gap5 {
	margin-bottom: 200px;
}

.gap6 {
	margin-bottom: 300px;
}
.gap7 {
	padding-top: 800px;
}

.gap8 {
	padding-top: 600px;
}

h1 {
	color: #000;
	display: inline-block;
	font-family: "proxima-nova", sans-serif;
	font-size: 30px;
	font-weight: 400;
	line-height: 60px;
	position: relative;
	width: auto;
}

h1:hover {
	color: #FF5500;
	font-style: italic;
	font-weight: 600;
}


.h1-margin {
	margin: 0px 100px;
}



/* photo gallery - styling */
.photo-gallery {
	display: grid;
	gap: 20px;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: auto;
	object-fit: cover;
	padding: 0 100px;
	position: relative;
	width: 100vw;
}

.photo-gallery a img {
	display: block;
	height: auto;
	width: 100%;
	overflow: hidden;
}

.gallery-item {
	background-color: #ECDDFE;
	display: inline-block;
	height: auto;
	margin: 0px 0px 0px 0px;
	position: relative;
	width: 100%;
}

/* photo gallery - image styling */
.gallery-item img {
	box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
	display: block;
	height: auto;
	position: relative;
	transition: transform 0.3s ease-in-out;
	width: 100%;
}

/* on hover: move the image up and left */
.gallery-item:hover img {
	transform: translate(-15px, -15px);
}

/* ensure the background stays under the image */
.gallery-item::before {
	background-color: #ECDDFE;
	content: "";
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: -1;
}

/* caption - styling */
.caption {
	bottom: 40px;
	filter: grayscale(1);
	font-family: "proxima-nova", sans-serif;
	font-size: 20px;
	font-weight: 400;
	left: 15px;
	line-height: 22px;
	mix-blend-mode: luminosity;
	opacity: 0;
	position: absolute;
	transition: opacity 0.3s ease-in-out;
	z-index: 2;
}

/* show caption on hover */
.gallery-item:hover .caption {
	opacity: 1;
}




/* button - styling */
.button {
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
	cursor: pointer;
	transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.button:hover {
	box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
	transform: translateY(4px);
}

/* more pronounced effect while clicking */
.button:active {
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
	transform: translateY(6px);
}

/* view all projects button - styling */
.button-container {
	align-items: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin-bottom: 0px;
	margin-top: 80px;
	width: 100%;
}

/* view all projects button - styling */
.view-all-projects-btn {
	align-items: center;
	background-color: black;
	color: white;
	cursor: pointer;
	display: flex;
	font-family: "proxima-nova", sans-serif;
	font-size: 20px;
	font-weight: 400;
	height: 60px;
	justify-content: center;
	padding: 15px 20px;
	position: relative;
	text-decoration: none;
	width: 400px;
}

.view-all-projects-btn:hover {
	background-color: #FF5500;
	color: #ECDDFE;
	font-style: italic;
	font-weight: 600;
}

.vie-w-allprojects, .viewal-l-projects {
	padding-right: 6px;
}

.view-all-projects-btn.v-iewallprojects, .v-i-ewallprojects, .vi-e-wallprojects, .vie-w-allprojects, .view-a-llprojects, .viewa-l-lprojects, .viewal-l-projects, .viewall-p-rojects, .viewallp-r-ojects, .viewallpr-o-jects, .viewallpro-j-ects, .viewallproj-e-cts, .viewallproje-c-ts, .viewallprojec-t-s, .viewallproject-s {
	animation: none; /* no animation if hover = false */
}

.view-all-projects-btn:hover .v-iewallprojects,
.view-all-projects-btn:hover .v-i-ewallprojects,
.view-all-projects-btn:hover .vi-e-wallprojects,
.view-all-projects-btn:hover .vie-w-allprojects,
.view-all-projects-btn:hover .view-a-llprojects,
.view-all-projects-btn:hover .viewa-l-lprojects,
.view-all-projects-btn:hover .viewal-l-projects,
.view-all-projects-btn:hover .viewall-p-rojects,
.view-all-projects-btn:hover .viewallp-r-ojects,
.view-all-projects-btn:hover .viewallpr-o-jects,
.view-all-projects-btn:hover .viewallpro-j-ects,
.view-all-projects-btn:hover .viewallproj-e-cts,
.view-all-projects-btn:hover .viewallproje-c-ts,
.view-all-projects-btn:hover .viewallprojec-t-s,
.view-all-projects-btn:hover .viewallproject-s {
	animation: bounce 1.2s ease infinite;
	font-weight: 600;
}

.view-all-projects-btn:hover .v-i-ewallprojects { animation-delay: 0.1s; }
.view-all-projects-btn:hover .vi-e-wallprojects { animation-delay: 0.2s; }
.view-all-projects-btn:hover .vie-w-allprojects { animation-delay: 0.3s; }
.view-all-projects-btn:hover .view-a-llprojects { animation-delay: 0.4s; }
.view-all-projects-btn:hover .viewa-l-lprojects { animation-delay: 0.5s; }
.view-all-projects-btn:hover .viewal-l-projects { animation-delay: 0.6s; }
.view-all-projects-btn:hover .viewall-p-rojects { animation-delay: 0.7s; }
.view-all-projects-btn:hover .viewallp-r-ojects { animation-delay: 0.8s; }
.view-all-projects-btn:hover .viewallpr-o-jects { animation-delay: 0.9s; }
.view-all-projects-btn:hover .viewallpro-j-ects { animation-delay: 1s; }
.view-all-projects-btn:hover .viewallproj-e-cts { animation-delay: 1.1s; }
.view-all-projects-btn:hover .viewallproje-c-ts { animation-delay: 1.2s; }
.view-all-projects-btn:hover .viewallprojec-t-s { animation-delay: 1.3s; }
.view-all-projects-btn:hover .viewallproject-s { animation-delay: 1.4s; }




/* let's create something cool - button animation and styling */
.get-in-touch {
	align-items: center;
	background-color: transparent;
	display: flex;
	width: auto;
	height: auto;
	color: #FF5500;
	font-family: "proxima-nova", sans-serif;
	font-size: 70px;
	font-weight: 600;
	justify-content: center;
	line-height: 50px;
	position: relative;
	text-align: center;
}

.l-et-screatesomethingcool, .l-e-t-screatesomethingcool, .le-t--screatesomethingcool, .let---screatesomethingcool, .let--s-createsomethingcool, .let-s-c-reatesomethingcool, .let-sc-r-eatesomethingcool, .let-scr-e-atesomethingcool, .let-scre-a-tesomethingcool, .let-screa-t-esomethingcool, .let-screat-e-somethingcool, .let-screate-s-omethingcool, .let-screates-o-methingcool, .let-screateso-m-ethingcool, .let-screatesom-e-thingcool, .let-screatesome-t-hingcool, .let-screatesomet-h-ingcool, .let-screatesometh-i-ngcool, .let-screatesomethi-n-gcool, .let-screatesomethin-g-cool, .let-screatesomething-c-ool, .let-screatesomethingc-o-ol, .let-screatesomethingco-o-l, .let-screatesomethingcoo-l {
	animation: none;
}

.get-in-touch:hover .l-et-screatesomethingcool,
.get-in-touch:hover .l-e-t-screatesomethingcool,
.get-in-touch:hover .le-t--screatesomethingcool,
.get-in-touch:hover .let---screatesomethingcool,
.get-in-touch:hover .let--s-createsomethingcool,
.get-in-touch:hover .let-s-c-reatesomethingcool,
.get-in-touch:hover .let-sc-r-eatesomethingcool,
.get-in-touch:hover .let-scr-e-atesomethingcool,
.get-in-touch:hover .let-scre-a-tesomethingcool,
.get-in-touch:hover .let-screa-t-esomethingcool,
.get-in-touch:hover .let-screat-e-somethingcool,
.get-in-touch:hover .let-screate-s-omethingcool,
.get-in-touch:hover .let-screates-o-methingcool,
.get-in-touch:hover .let-screateso-m-ethingcool,
.get-in-touch:hover .let-screatesom-e-thingcool,
.get-in-touch:hover .let-screatesome-t-hingcool,
.get-in-touch:hover .let-screatesomet-h-ingcool,
.get-in-touch:hover .let-screatesometh-i-ngcool,
.get-in-touch:hover .let-screatesomethi-n-gcool,
.get-in-touch:hover .let-screatesomethin-g-cool,
.get-in-touch:hover .let-screatesomething-c-ool,
.get-in-touch:hover .let-screatesomethingc-o-ol,
.get-in-touch:hover .let-screatesomethingco-o-l,
.get-in-touch:hover .let-screatesomethingcoo-l {
	animation: bounce 1.2s ease infinite;
	font-style: italic;
	font-weight: 600;
}

.get-in-touch:hover .l-e-t-screatesomethingcool { animation-delay: 0.1s; }
.get-in-touch:hover .le-t--screatesomethingcool { animation-delay: 0.2s; }
.get-in-touch:hover .let---screatesomethingcool { animation-delay: 0.3s; }
.get-in-touch:hover .let--s-createsomethingcool { animation-delay: 0.4s; }
.get-in-touch:hover .let-s-c-reatesomethingcool { animation-delay: 0.5s; }
.get-in-touch:hover .let-sc-r-eatesomethingcool { animation-delay: 0.6s; }
.get-in-touch:hover .let-scr-e-atesomethingcool { animation-delay: 0.7s; }
.get-in-touch:hover .let-scre-a-tesomethingcool { animation-delay: 0.8s; }
.get-in-touch:hover .let-screa-t-esomethingcool { animation-delay: 0.9s; }
.get-in-touch:hover .let-screat-e-somethingcool { animation-delay: 1s; }
.get-in-touch:hover .let-screate-s-omethingcool { animation-delay: 1.1s; }
.get-in-touch:hover .let-screates-o-methingcool { animation-delay: 1.2s; }
.get-in-touch:hover .let-screateso-m-ethingcool { animation-delay: 1.3s; }
.get-in-touch:hover .let-screatesom-e-thingcool { animation-delay: 1.4s; }
.get-in-touch:hover .let-screatesome-t-hingcool { animation-delay: 1.5s; }
.get-in-touch:hover .let-screatesomet-h-ingcool { animation-delay: 1.6s; }
.get-in-touch:hover .let-screatesometh-i-ngcool { animation-delay: 1.7s; }
.get-in-touch:hover .let-screatesomethi-n-gcool { animation-delay: 1.8s; }
.get-in-touch:hover .let-screatesomethin-g-cool { animation-delay: 1.9s; }
.get-in-touch:hover .let-screatesomething-c-ool { animation-delay: 2s; }
.get-in-touch:hover .let-screatesomethingc-o-ol { animation-delay: 2.1s; }
.get-in-touch:hover .let-screatesomethingco-o-l { animation-delay: 2.2s; }
.get-in-touch:hover .let-screatesomethingcoo-l { animation-delay: 2.3s; }

.let--s-createsomethingcool, .let-screat-e-somethingcool, .let-screatesomethin-g-cool {
	padding-right: 25px;
}











/* h2 styling -  */
h2 {
	align-items: center;
	background-color: transparent;
	display: flex;
	width: auto;
	height: auto;
	color: #FF5500;
	font-family: "proxima-nova", sans-serif;
	font-size: 30px;
	font-weight: 600;
	justify-content: center;
	line-height: 50px;
	padding-bottom: 10px;
	margin-top: 100px;
	position: relative;
	text-align: center;
}


/* paragraph styling */
p {
	font-family: "proxima-nova", sans-serif;
}

.contact-me {
	align-items: center;
	background-color: #FF5500;
	color: #ECDDFE;
	cursor: pointer;
	display: flex;
	font-family: "proxima-nova", sans-serif;
	font-size: 20px;
	font-weight: 600;
	height: 60px;
	justify-content: center;
	padding: 15px 20px;
	position: relative;
	text-decoration: none;
	width: 400px;
	margin-bottom: -50px;
}

.contact-me:hover {
	font-style: italic;
}






















/* media query - adaptations for different screen sizes */

/* extra large devices - large desktops and laptops */
@media only screen and (min-width: 1200px) {

}


/* large devices - laptops and desktops */
@media only screen and (max-width: 992px) {

}




/* medium devices - landscape tablets */
@media only screen and (max-width: 992px) {
	/* adjust margin */
	header {
		padding: 50px 50px;
	}
	/* hide regular nav links */
	.nav-links {
		display: none;
		left: 50px;
	}
	/* show the burger menu */
	.burger-menu {
		display: block;
		position: fixed;
		margin-top: 0;
		right: 50px;
		z-index: 999;
		cursor: pointer;
		top: 60px;
	}
	/* When active, show the nav links in a mobile-friendly layout */
	.nav-links.mobile-active {
		display: flex;
		flex-direction: column;
		position: fixed;
		margin-top: 50px; /* Adjust based on your header height */
		background-color: transparent;
		z-index: 1100;
	}
	.nav-link {
		text-align: left;
		left: 0px;
		font-size: 16px;
		line-height: 27px;
	}
	.nav-links.horizontal-nav .nav-link {
		margin-left: 0px;
	}
	.slide {
		padding: 250px 50px 0px 50px;
	}
	
	.gap1 {
		margin-top: 80px;
	}
	
	.gap2 {
		margin-top: 0px;
	}
	
	
	/* photo gallery - styling */
	.photo-gallery {
		position: relative;
		width: 100%;
		object-fit: cover;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
		padding: 0 50px;
	}

	.photo-gallery a img {
		width: 100%;
		height: auto;
		display: block;
	}*
	h2 {
		margin: 150px 50px 30px;
	}
	#logo {
		color: #FF5500;
		font-size: 22px;
	}
	
	.bouncing-text .j-onvaanordi,
	.bouncing-text .j-o-nvaanordi,
	.bouncing-text .jo-n-vaanordi,
	.bouncing-text .jon-v-aanordi,
	.bouncing-text .jonv-a-anordi,
	.bouncing-text .jonva-a-nordi,
	.bouncing-text .jonvaa-n-ordi,
	.bouncing-text .jonvaan-o-rdi,
	.bouncing-text .jonvaano-r-di,
	.bouncing-text .jonvaanor-d-i,
	.bouncing-text .jonvaanord-i {
		animation: bounce 3.5s ease infinite;
		font-weight: 600;
		}
	.bouncing-text .j-o-nvaanordi { animation-delay: 0.1s; }
	.bouncing-text .jo-n-vaanordi { animation-delay: 0.2s; }
	.bouncing-text .jon-v-aanordi { animation-delay: 0.3s; }
	.bouncing-text .jonv-a-anordi { animation-delay: 0.4s; }
	.bouncing-text .jonva-a-nordi { animation-delay: 0.5s; }
	.bouncing-text .jonvaa-n-ordi { animation-delay: 0.6s; }
	.bouncing-text .jonvaan-o-rdi { animation-delay: 0.7s; }
	.bouncing-text .jonvaano-r-di { animation-delay: 0.8s; }
	.bouncing-text .jonvaanor-d-i { animation-delay: 0.9s; }
	.bouncing-text .jonvaanord-i  { animation-delay: 1s; }
}




/* small devices - portrait tablets and large phones */
@media only screen and (max-width: 768px) {
	/* adjust margin */
	header {
		padding: 25px 25px;
	}
	/* hide regular nav links */
	.nav-links {
		display: none;
		left: 25px;
	}
	/* show the burger menu */
	.burger-menu {
		display: block;
		position: fixed;
		margin-top: 0;
		right: 25px;
		z-index: 999;
		cursor: pointer;
		top: 34px;
	}
	/* When active, show the nav links in a mobile-friendly layout */
	.nav-links.mobile-active {
		display: flex;
		flex-direction: column;
		position: fixed;
		margin-top: 50px; /* Adjust based on your header height */
		background-color: transparent;
		z-index: 1100;
	}
	.nav-link {
		text-align: left;
		left: 0px;
		font-size: 16px;
		line-height: 27px;
	}
	.nav-links.horizontal-nav .nav-link {
		margin-left: 0px;
	}
	.slide {
		padding: 200px 25px 0px 25px;
	}
	
	.gap1 {
		margin-top: 80px;
	}
	
	.gap2 {
		margin-top: 0px;
	}
	
	
	/* selected projects - 1 columns styling for smaller screens */
	.photo-gallery {
		display: flex;
		flex-direction: column;
		width: 100%;
		object-fit: cover;
		padding: 0 25px;
	}
	.photo-gallery a img {
		width: 100%;
		height: auto;
		display: block;
	}
	h2 {
		margin: 100px 25px 30px;
	}
	#logo {
		color: #FF5500;
		font-size: 22px;
	}
	
.bouncing-text .j-onvaanordi,
.bouncing-text .j-o-nvaanordi,
.bouncing-text .jo-n-vaanordi,
.bouncing-text .jon-v-aanordi,
.bouncing-text .jonv-a-anordi,
.bouncing-text .jonva-a-nordi,
.bouncing-text .jonvaa-n-ordi,
.bouncing-text .jonvaan-o-rdi,
.bouncing-text .jonvaano-r-di,
.bouncing-text .jonvaanor-d-i,
.bouncing-text .jonvaanord-i {
	animation: bounce 3.5s ease infinite;
	font-weight: 600;
}
.bouncing-text .j-o-nvaanordi { animation-delay: 0.1s; }
.bouncing-text .jo-n-vaanordi { animation-delay: 0.2s; }
.bouncing-text .jon-v-aanordi { animation-delay: 0.3s; }
.bouncing-text .jonv-a-anordi { animation-delay: 0.4s; }
.bouncing-text .jonva-a-nordi { animation-delay: 0.5s; }
.bouncing-text .jonvaa-n-ordi { animation-delay: 0.6s; }
.bouncing-text .jonvaan-o-rdi { animation-delay: 0.7s; }
.bouncing-text .jonvaano-r-di { animation-delay: 0.8s; }
.bouncing-text .jonvaanor-d-i { animation-delay: 0.9s; }
.bouncing-text .jonvaanord-i  { animation-delay: 1s; }
}



/* extra small devices - phones */
@media only screen and (max-width: 600px) {
	/* adjust margin */
	header {
		padding: 25px 25px;
	}
	/* hide regular nav links */
	.nav-links {
		display: none;
		left: 25px;
	}
	/* show the burger menu */
	.burger-menu {
		display: block;
		position: fixed;
		margin-top: 0;
		right: 25px;
		z-index: 999;
		cursor: pointer;
		top: 34px;
	}
	/* When active, show the nav links in a mobile-friendly layout */
	.nav-links.mobile-active {
		display: flex;
		flex-direction: column;
		position: fixed;
		margin-top: 50px; /* Adjust based on your header height */
		background-color: transparent;
		z-index: 1100;
	}
	.nav-link {
		text-align: left;
		left: 0px;
		font-size: 16px;
		line-height: 27px;
	}
	.nav-links.horizontal-nav .nav-link {
		margin-left: 0px;
	}
	.slide {
		padding: 200px 25px 0px 25px;
	}
	
	.gap1 {
		margin-top: 80px;
	}
	
	.gap2 {
		margin-top: 0px;
	}
	
	/* selected projects - 1 columns styling for smaller screens */
	.photo-gallery {
		display: flex;
		flex-direction: column;
		width: 100%;
		object-fit: cover;
		padding: 0 25px;
	}
	.photo-gallery a img {
		width: 100%;
		height: auto;
		display: block;
	}
	h2 {
		margin: 100px 25px 30px;
	}
	
	#logo {
		color: #FF5500;
		font-size: 22px;
	}
	
.bouncing-text .j-onvaanordi,
.bouncing-text .j-o-nvaanordi,
.bouncing-text .jo-n-vaanordi,
.bouncing-text .jon-v-aanordi,
.bouncing-text .jonv-a-anordi,
.bouncing-text .jonva-a-nordi,
.bouncing-text .jonvaa-n-ordi,
.bouncing-text .jonvaan-o-rdi,
.bouncing-text .jonvaano-r-di,
.bouncing-text .jonvaanor-d-i,
.bouncing-text .jonvaanord-i {
	animation: bounce 3.5s ease infinite;
	font-weight: 600;
}
.bouncing-text .j-o-nvaanordi { animation-delay: 0.1s; }
.bouncing-text .jo-n-vaanordi { animation-delay: 0.2s; }
.bouncing-text .jon-v-aanordi { animation-delay: 0.3s; }
.bouncing-text .jonv-a-anordi { animation-delay: 0.4s; }
.bouncing-text .jonva-a-nordi { animation-delay: 0.5s; }
.bouncing-text .jonvaa-n-ordi { animation-delay: 0.6s; }
.bouncing-text .jonvaan-o-rdi { animation-delay: 0.7s; }
.bouncing-text .jonvaano-r-di { animation-delay: 0.8s; }
.bouncing-text .jonvaanor-d-i { animation-delay: 0.9s; }
.bouncing-text .jonvaanord-i  { animation-delay: 1s; }
}




/* subtle scroll animation on some items */
.scroll-animation {
	transition: transform 0.5s ease-out;
}









/* footer styling */
footer {
	background-color: #ECDDFE;
	color: #FF5500;
	padding: 100px 100px 50px 100px;
	font-family: "proxima-nova", sans-serif;
	font-weight: 400;
	font-style: normal;
	width: 100%;
	margin-top: 20px;
}

.footer-wrapper {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: 20px;
	max-width: 500px;
	margin: 0;
}

.footer-column {
	flex: 1;
	min-width: 200px;
}

.footer-column h3 {
	font-size: 18px;
	margin: 35px 0px;
	font-weight: 600;
}

.footer-column p,
.footer-column ul,
.footer-column a {
    font-size: 18px;
    line-height: 2;
	font-weight: 400;
	color: #FF5500;
	text-decoration: none;
}

.footer-column ul {
    list-style-type: none;
    padding: 0;
}

.footer-column ul li a:hover {
    text-decoration: underline;
}




/* CSS for the ripple color effect */
.ripple {
  position: fixed;
  width: 50px;
  height: 50px;
  background-color: #ECDDFE;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  opacity: 1;
  pointer-events: none;
  z-index: -2;
  transition: transform 2.5s ease-out;
}



/* ========== ABOUT HERO SECTION ========== */
.about-hero {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  /* Spacing so it doesn't hide under fixed header */
  padding-top: 270px; 
  padding-bottom: 200px; 
  margin: 0 100px 0 100px;
	align-items: flex-start;
}

/* Left column: text */
.about-hero-text {
  flex: 1 1 50%;
  max-width: 600px;
  margin-right: 20px;
}

.about-hero-text h2 {
  font-size: 40px;
  font-weight: 600;
  color: #000; /* Or adjust to your preferred accent color */
  margin-bottom: 20px;
}

.about-hero-text p {
  font-size: 18px;
  line-height: 1.6;
  color: #000;
}

/* Right column: image */
.about-hero-image {
  flex: 1 1 40%;
  display: flex;
  justify-content: flex-end;
}

.about-hero-image img {
  width: 100%;
  max-width: 500px;
}

/* Responsive stacking for smaller screens */
@media (max-width: 768px) {
  .about-hero {
    margin: 0 25px;
    flex-direction: column;
    align-items: center;
    padding-top: 120px; /* adjust as needed for your header */
  }
  
  .about-hero-text, 
  .about-hero-image {
    flex: 1 1 100%;
    max-width: 100%;
    margin-right: 0;
  }
  
  .about-hero-text h1 {
    text-align: left;
  }
}

/* Smooth transition for the background color change */
body {
  transition: background-color 0.3s ease;
}

/* Class that sets the background to yellow */
body.hover-yellow {
  background-color: #FFF4A5; /* Adjust shade as needed */
}
body.hover-green {
  background-color: #477333; /* Adjust shade as needed */
}
/* When hovering over the <p>, change the styling for the highlighted text */
.about-hero-text p:hover .highlight-ksd {
  text-transform: uppercase;
  font-weight: 600;
  font-style: italic;
	color: #477333;
}


/* Background color for the p-hover effect (adjust the color as needed) */
body.hover-ksd {
  background-color: #FFF4A5;
}
body.hover-ksdg {
  background-color: #477333;
}






.card {
	width: 500px;
	height: 100%;
	padding-top: 270px;
}

.card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.card:hover .card-inner {
  transform: rotateY(180deg);
}

.card-front,
.card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
}

.card-front {
  background: white;
  border: 1px solid #e5e7eb;
}

.card-back {
  background: #8b5cf6;
  color: white;
  transform: rotateY(180deg);
}

/* moving text styling */
.cdp {
	padding: 0px 100px 0px 100px;
	margin-right: 100px;
	font-size: 20px;
	overflow: hidden;
	display: flex;
	white-space: nowrap;
	font-family: "proxima-nova", sans-serif;
}









/* Grid container with a fixed margin */
.grid-container {
  display: grid;
  gap: 5px;         /* Equal gap between items */
  margin: 0px 100px;
  grid-auto-rows: 200px; /* Default row height */
	padding-top: 50px;
}

/* Responsive grid columns using media queries */

/* Large screens: 6 columns */
@media (min-width: 1200px) {
  .grid-container {
    grid-template-columns: repeat(6, 1fr);
  }
  /* Spanning styles for larger screens */
	.grid-item.plus {
    grid-column: span 4;
    grid-row: span 2;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  }
	.grid-item.square {
    grid-column: span 2;
    grid-row: span 2;
  }
  .grid-item.big {
    grid-column: span 3;
    grid-row: span 2;
  }
  .grid-item.medium {
    grid-column: span 2;
  }
  .grid-item.small {
    grid-column: span 1;
  }
	.grid-item.text-wide {
		grid-column: span 2;
		grid-row: span 2;
	}
	.grid-item.wide {
		grid-column: span 2;
		grid-row: span 1;
	}
	.grid-item.big-square {
		grid-column: span 4;
		grid-row: span 4;
	}
	.grid-item.medium-square {
		grid-column: span 3;
		grid-row: span 3;
	}
}

/* Medium screens: 4 columns */
@media (min-width: 800px) and (max-width: 1199px) {
  .grid-container {
    grid-template-columns: repeat(4, 1fr);
  }
  /* Adjust spans for medium screens */
  .grid-item.big {
    grid-column: span 2;
    grid-row: span 2;
  }
  .grid-item.medium {
    grid-column: span 2;
  }
  .grid-item.small {
    grid-column: span 1;
  }
}

/* Small screens: 2 columns */
@media (max-width: 799px) {
  .grid-container {
    grid-template-columns: repeat(2, 1fr);
  }
  /* For small devices, let all items take full width of the 2-column grid */
  .grid-item.big,
  .grid-item.medium,
  .grid-item.small {
    grid-column: span 2;
  }
}

/* Base styling for grid items */
.grid-item {
  background-color: transparent;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Ensure images fill the grid item while maintaining aspect ratio */
.grid-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
	box-shadow: 0 4px 4px rgba(0, 0, 0, 0.8);
}

/* Text block styling */
.grid-item.text-wide {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* Aligns content at the top/left */
  justify-content: flex-start; /* Ensure content starts at the top */
  font-size: 20px;
  color: #333;
  text-align: left;
  padding: 0px;
}



h3 {
	margin: 0px 100px;
	font-family: "proxima-nova", sans-serif;
	font-size: 20px;
	font-weight: 400;
}


/* Existing grid styles remain unchanged... */

/* Lightbox Modal Styling */
.lightbox {
  display: none; /* Hidden by default */
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(236,221,254,0.9);
  align-items: center;
  justify-content: center;
}

.lightbox-content {
  max-width: 80%;
  max-height: 80%;
  margin: auto;
  display: block;
}

.lightbox .close {
  position: absolute;
  top: 20px;
  right: 40px;
  color: #FF5500;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
}

.lightbox .prev, .lightbox .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  color: #FF5500;
  font-size: 60px;
  padding: 16px;
  margin-top: -50px;
  user-select: none;
}

.lightbox .prev {
  left: 20px;
}

.lightbox .next {
  right: 20px;
}

.sauce {
	align-items: center;
	background-color: transparent;
	display: flex;
	width: auto;
	height: auto;
	color: #FF5500;
	font-family: "proxima-nova", sans-serif;
	font-size: 70px;
	font-weight: 600;
	justify-content: center;
	line-height: 50px;
	position: relative;
	text-align: center;
}
@media (min-width: 2000px) {
	.large-screen {
		padding-top: 700px;
	}
	footer {
		padding-top: 400px;
	}
	
}

@media (min-width: 800px)