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

:root {
	--accent-color: #A7D91D;
	--accent-dark: #2d3d01;
	--bg-color: #080A02;
	--text-color: #fff;
}

::selection {
  background-color: var(--accent-color);
  color: var(--bg-color);
}

body{
	margin: 0;
	padding: 0;
	color: var(--text-color);
	background-color: #080A02;
	font-family: 'Oswald', sans-serif;
	font-weight: 100;
	font-size: 24px;
}

a:link, a:visited{
	color: var(--accent-color);
	text-decoration: none;
}

a:hover, a:focus {
	color: var(--accent-color);
	text-decoration: underline;
}

/*--- Big Columns ---*/
.flex-logo-nav {
	display: flex;
	width: 100%;
	max-width: 1680px; /* Set the maximum width + padding for the column-1-3*/
	margin: 0 auto; /* Centers horizontally */
	flex-direction: row-reverse; /* Horizontal layout by default */
	padding: 0 10px 0 10px; /* Optional for spacing */
}

.column-1-3 {
	flex: 1; /* Takes 1 part of the total space */
	padding: 140px 0 0 80px; 
}

.column-2-3 {
	flex: 2; /* Takes 2 parts of the total space */
	padding: 140px 0 0 0; 
}


/*--- Fixes pages where is only Heading+paragraph ---*/

.small-content-center{ 
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 100vh;
	padding-top: 180px;
}

.small-content-center span:first-child {
	display: block;
	font-family: 'Bebas Neue', 'Oswald', 'Arial', sans-serif;
	font-weight: 500;
	font-size: clamp(100px, 14vw, 250px); /*Dinamically change size*/
	line-height: 1;
	letter-spacing: -7px;
	position: relative;
	left: -100px;
}

.small-content-center span:nth-child(2) {
	display: block;
	font-family: 'Bebas Neue', 'Oswald', 'Arial', sans-serif;
	font-weight: 500;
	font-size: clamp(100px, 14vw, 250px); /*Dinamically change size*/
	line-height: 1;
	letter-spacing: -7px;
	color: var(--accent-color);
	position: relative;
	top: -90px; /* Adjust position to overlap with the first span */
	left: 60px;

}

.small-content-fix{
	position: relative;
	top: -130px;
	left: 70px;
}

/*--- Logo ---*/

.logo{
	position: fixed;
}

.logo img{
	width: 100%;
}

/*--- Headline ---*/

.column-2-3 .flex-content:first-child .content-heading {
	font-family: 'Bebas Neue', sans-serif;
	font-weight: 500;
	font-size: clamp(150px, 14vw, 220px); /*Dinamically change size*/
	line-height: 1;
	letter-spacing: -7px;
	text-align: left;
	flex: 5; /* Fix the size of the flex, so heading is on one row*/
}

.column-2-3 .flex-content:first-child .content-paragraph {
	flex: 1; /* Fix the size of the flex, so heading is on one row*/
}

.column-2-3 .flex-content:nth-child(2) .content-paragraph {
	position: relative;
	top: -140px;
	font-family: 'Bebas Neue', sans-serif;
	font-weight: 500;
	font-size: clamp(150px, 14vw, 220px); /*Dinamically change size*/
	line-height: 1;
	letter-spacing: -7px;
	color: var(--accent-color);
}

.column-2-3 .flex-content:nth-child(3){
	margin-top: -140px;
}


/*--- Content ---*/

.flex-content {
	display: flex;
	width: 100%;
	flex-direction: row;
	padding: 0 0 50px 0;
}

.content-heading{
	flex: 1; 
}

.content-heading h2{
	font-family: 'Oswald', sans-serif;
	font-weight: 500;
	font-size: 34px;
	line-height: 30px;
	text-align: right;
	margin: -3px 0 10px 0;
	padding: 0 24px 0 0;
}

.content-paragraph{
	flex: 5; 
}

.content-paragraph p{
	line-height: 30px;
	text-align: left;
}

.content-paragraph img{
	margin: 0 30px 0 0;
	float: left;
}

.content-paragraph ul li{
	font-size: 20px;
	list-style: square;
	margin: -5px 0 0 0;
}

/*--- Navigation ---*/

#nav{
	position: fixed;
	bottom: 0;
}



nav ul {
	padding: 0 0 0 60px;

}

nav ul li{
	list-style: none;
	font-family: 'Bebas Neue', sans-serif;
	font-size: 96px;
	font-weight: 500;
	letter-spacing: -2px;
	line-height: 64px; /* Fix for sub-nav first li element overflow hidden bug*/
	margin: 7px 0 0 0; /* Fix for sub-nav first li element overflow hidden bug*/
}

/* Nav button that does not scroll the page when clicked */

nav ul li button{
	background-color: transparent;
	border: none;
	color: #fff;
	font-family: 'Bebas Neue', sans-serif;
	font-size: 96px;
	font-weight: 500;
	letter-spacing: -2px;
	line-height: 64px; /* Fix for sub-nav first li element overflow hidden bug*/
	margin: 0 0 0 0; /* Fix for sub-nav first li element overflow hidden bug*/

}

nav ul li button:hover{
	background-color: transparent;
	border: none;
	color: var(--accent-color);
	font-family: 'Bebas Neue', sans-serif;
	font-size: 96px;
	font-weight: 500;
	letter-spacing: -2px;
	line-height: 64px; /* Fix for sub-nav first li element overflow hidden bug*/
	margin: 0 0 0 0; /* Fix for sub-nav first li element overflow hidden bug*/
	cursor: pointer;
}


nav ul li a:link, nav ul li a:visited{
	display: inline-block;
	text-decoration: none;
	color: #fff;
}

nav ul li a:hover, nav ul li a:focus {
	display: inline-block;
	text-decoration: none;
	color: var(--accent-color);
}

.nav-line {
	height: 64px;
	border-left: 2px solid white;
}

.sub-nav{
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s ease-in-out;
}


.sub-nav ul {
	padding: 0 0 0 90px;
}
.sub-nav ul li{
	list-style: none;
	font-family: 'Bebas Neue', sans-serif;
	font-size: 60px;
	font-weight: 500;
	letter-spacing: -2px;
	line-height: 46px;
	margin: 0;
}


.sub-nav ul li:first-child { /* Fix for sub-nav first li element overflow hidden bug*/
	padding: 22px 0 0 0;
	margin: -20px 0 0 0;
}

.sub-nav ul li a{
	display: inline-block;
	text-decoration: none;
	color: #fff;
}

.sub-nav ul li a:hover{
	display: inline-block;
	text-decoration: none;
	color: var(--accent-color);
}

/*--- Hamburger Icon ---*/

.mobile_nav{
	display: none;
}

.hamburger-icon {
	font-size: 40px;
	background: none;
	border: none;
	cursor: pointer;
}

.hamburger-icon i:hover {
	color: var(--accent-color);
}

/*--- Vectical Line ---*/

.vertical-line {
  position: fixed; /* Ensures the line stays in place as you scroll */
  top: 0; /* Aligns the line to the top of the viewport */
  right: 0; /* Positions the line on the very right side */
  width: 15px; /* Adjust the width of the line */
  height: 100vh; /* Makes the height span the entire viewport */
  background-color: var(--accent-color); /* Set the color of the line */
  z-index: 50; /* Ensures it appears above other elements */
}

/*--- Footer ---*/

.column-2-3 .flex-content:last-child {
	padding: 0; /*Remove padding from flex-content*/
}

footer hr{
	border: 0;
	height: 1px;
	background-color: #818181;
}

.content-paragraph footer p{
	padding: 32px 0;
	font-size: 20px;
}

/*--- Social Media Links ---*/

.social-media-links {
	width: 50px;
	position: fixed;
	right: 0;
	top: 80%;
	z-index: 60;
	background-color: var(--accent-color);
	text-align: center;
	padding: 10px 0;
}

.social-media-links i {
	display: block;
	margin: 5px 0;
	font-size: 32px; 
	color: var(--bg-color);
}

/*--- Separate Pages Personalized Styles ---*/

/* Content List */

.content-list{
	padding: 20px 0 0 30px;
	display: flex;
}

/* About Page - Service Lists */
.services-lists {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

.services-lists div {
	flex: 1;
	padding: 0 0 0 30px; 
}

.services-lists ul li:first-child {
	margin: 20px 0 5px -30px;
	list-style: none;
	font-size: 32px;

}

.services-lists h3{
	font-weight: 400;
	font-size: 26px;
	color: var(--accent-color);
}




/*--- Contact Form ---*/
.form-row {
	display: flex;
	justify-content: space-between;
	gap: 10px;
}

.form-row input[type="text"], .form-row input[type="email"] {
	width: 50%;
	height: 40px;
	padding: 10px;
	border: none;
	font-size: 16px;
	background-color: var(--accent-dark);
	color: var(--text-color);
}

.content-paragraph form textarea {
	display: block;
	width: 100%;
	height: 180px;
	padding: 10px;
	margin: 10px 0;
	border: none;
	font-size: 16px;
	background-color: var(--accent-dark);
	color: var(--text-color);
}

.form-row input[type="text"]:focus,
.form-row input[type="email"]:focus,
.content-paragraph form textarea:focus {
    border: none;
    outline: none; /* Optional: removes the blue outline as well */
}

.content-paragraph form button {
	width: 100%;
	height: 40px;
	background-color: var(--accent-dark);
	color: var(--text-color);
	border: none;
	padding: 10px 20px;
	font-size: 16px;
	cursor: pointer;
}

/*--- Work Page Entries ---*/

.work-left-entry {
	display: flex;
	flex-direction: row;
}

.work-left-entry h2, .work-right-entry h2 {
	font-family: 'Bebas Neue', sans-serif;
	font-weight: 400;
	font-size: 50px;
	line-height: 38px;
	padding: 0 10px 0 0;
}

.work-left-entry > div:first-child {
	flex: 1;
	text-align: left;
}

.work-left-entry > div:nth-of-type(2) {
	flex: 4;
}


.work-right-entry {
	display: flex;
	flex-direction:row-reverse;
}

.work-right-entry > div:first-child {
	flex: 1;
	text-align: right;
}

.work-right-entry > div:nth-of-type(2) {
	flex: 4;
}

/*Work Page entries effects*/
.work-image {
	display: inline-block;
	position: relative;
	overflow: hidden;
}

.work-image img {
	display: block;
	width: 100%;
	filter: grayscale(100%);
	transition: filter 0.4s;
	z-index: 1;
}

.work-image::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(39, 50, 7, 0.8); /* greenish overlay */
	pointer-events: none;
	transition: opacity 0.4s;
	opacity: 1;
	z-index: 2;
}

.work-image:hover img {
	filter: none;
}

.work-image:hover::before {
	opacity: 0;
}

/*Work Page Gallery Effects*/
.modal {
  display: none;
  justify-content: center;
  align-items: flex-start; /* Align to top so scrolling works naturally */
  position: fixed;
  z-index: 9999;
  top: 0; left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,0.8);
  overflow-y: auto; /* Enable vertical scrolling */
}

.modal-content {
  width: auto;
  height: auto;
  max-width: 100%;
  /* Remove max-height */
  display: block;
  margin: 40px auto; /* Add some top margin for aesthetics */
  object-fit: contain;
}

.modal-close {
  position: absolute;
  display: block;
  top: 30px;
  right: 50px;
  color: #fff;
  font-size: 48px;
  font-weight: bold;
  cursor: pointer;
  z-index: 1001;
}

/*Bots Protection*/
span.rev { unicode-bidi:bidi-override; direction:rtl }
span.rev.email:before { content:"moc.kooltuo@" }
span.rev.email:after { content:".rimorbod" }
span.rev.phone:before { content:"197 970 " }
span.rev.phone:after { content:" 953+" }


/* Media query for mobile screens */
@media (max-width: 1024px) {

	.flex-logo-nav {
		flex-direction: column; /* Stack items vertically on mobile */
		padding: 0 30px 0 20px; 
	}

	.column-1-3 {
		padding: 40px 0 0 0; /* Adjust padding for mobile */
	}

	.column-2-3 {
		padding: 0; /* Adjust padding for mobile */
	}

	.logo{
		position: static;
		text-align: left;
	}

	.logo img{
		width: 40%;
	}

	.column-2-3 .flex-content:first-child .content-heading, .column-2-3 .flex-content:nth-child(2) .content-paragraph{
		font-size: 90px; 
		letter-spacing: -2px;
	}

	.column-2-3 .flex-content:nth-child(2) .content-paragraph {
		top: -60px;
		left: 40px;
		margin-bottom: 60px;
	}

  	.flex-content {
		flex-direction: column; /* Horizontal layout by default */
		padding: 0 0 20px 0;
	}

	.content-heading h2{
		text-align: left;
	}

	.small-content-center{ 
		padding-top: 180px;
	}

	.content-paragraph p{
		line-height: 22px;
		font-size: 18px;
	}

	.content-paragraph h2{
		font-size: 30px;
		line-height: 0.8;
	}


	/*--- Fixes pages where is only Heading+paragraph ---*/

	.small-content-center span:first-child {
		letter-spacing: -4px;
		position: relative;
		left: -10px;
	}

	.small-content-center span:nth-child(2) {
		letter-spacing: -4px;
		position: relative;
		top: -30px; /* Adjust position to overlap with the first span */
		left: 30px;

	}

	.small-content-fix{
		position: relative;
		top: -50px;
		left: 30px;
	}

	#nav{
		display: hidden;
		top: 40%;
		left: 50%;
		transform: translate(-50%, -50%); /* Center the Mobile Nav */
	}

	/*Hamburger Icon*/

	.mobile_nav{ 
		position: absolute;
		top: 50px;
		right: 50px;
		display: block;
	}

	.nav-line {
		display: none; /* Hide the vertical line on mobile */
	}

	.nav-overlay {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.8); /* Semi-transparent background */
		display: none; /* Hidden by default */
		justify-content: center;
		align-items: center;
		z-index: 200; /* Ensure it appears above other elements */
		}

	.nav-overlay.active {
		display: flex; /* Display the overlay */
	}
}