@font-face {
	font-family: 'Darleston';
	src: url('../assets/fonts/Darleston/Darleston.eot');
	src: url('../assets/fonts/Darleston/Darleston.eot?#iefix') format('embedded-opentype'),
				url('../assets/fonts/Darleston/Darleston.woff2') format('woff2'),
				url('../assets/fonts/Darleston/Darleston.woff') format('woff'),
				url('../assets/fonts/Darleston/Darleston.ttf')  format('truetype');
}

/* 
***************************************************************************************
** VARIABLES
***************************************************************************************
*/
:root {
	--font-weight-100: 100;
	--font-weight-bold: bold;
	--font-color-grey: grey;
	--font-color-black: black;
	--font-color-yellow: #fbbf24;
	--font-color-white: white;
	--margin-title: 1rem 0;
}

/* 
***************************************************************************************
** ELEMENTS
***************************************************************************************
*/
html, body {
	font-family: 'Mulish', sans-serif;
	margin: 0;
	padding: 0;
	font-weight: var(--font-weight-100);
}

p {
	font-family: 'Mulish', sans-serif;
	font-weight: var(--font-weight);
}

.section {
	padding: 2rem 0;
}

.container-internal {
	margin: 0 auto;
	padding: 0 1rem;
}

@media (min-width: 640px) {
	.container-internal {
		padding: 0 10rem;
	}
}

.about-text {
	line-height: 3;
}

.section-services, .section-nelma, .section-contact {
	background-color: #FBF8EE;
}

.section-title {
	font-family: 'Mulish', sans-serif;
	font-size: 1.5rem;
	font-weight: var(--font-weight-bold);
	line-height: 1.2;
	color: var(--font-color-grey);
	margin: var(--margin-title);
}

.section-subtitle {
	font-family: 'Mulish', sans-serif;
	font-weight: var(--font-weight-bold);
	font-size: 1.125rem;
	line-height: 1.5;
	color: var(--font-color-black);
	transition: color 0.2s ease;
	text-transform: uppercase;
	margin-bottom: 1rem;
}

.group:hover .section-subtitle {
	color: var(--font-color-yellow);
}

.section-subtitle:hover {
	color: var(--font-color-yellow);
}

.section-cta-text {
	font-family: 'Mulish', sans-serif;
	font-weight: var(--font-weight-bold);
	font-size: 1.8rem;
	color: var(--font-color-white);
	text-transform: uppercase;
	text-align: center;
	max-width: 80%;
	margin-left: auto;
	margin-right: auto;
}

.button {
	display: inline-block;
	padding: .8rem 1.6rem;
	background-color: #000;
	color: #fff;
	font-size: 0.75rem;
	font-weight: 600;
	border-radius: 9999px;
	box-shadow: 0 4px 10px rgba(0,0,0,0.25);
	text-decoration: none;
	transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.button:hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 14px rgba(0,0,0,0.28);
	color: white;
}

.button-cookies {
	display: inline-block;
	padding: .4rem 1rem;
	background-color: #000;
	color: #fff;
	font-size: 0.75rem;
	font-weight: 600;
	border-radius: 9999px;
	box-shadow: 0 4px 10px rgba(0,0,0,0.25);
	text-decoration: none;
	transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.button-cookies:hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 14px rgba(0,0,0,0.28);
	color: white;
}

.yellow-row {
	background-color: var(--font-color-yellow);
}

/* 
***************************************************************************************
** LOADER
***************************************************************************************
*/
.loader {
	display: flex;
  	align-items: center;
  	justify-content: center;

	position: fixed;
	background-color: rgb(241, 241, 241, .5);
	border: 1px solid gray;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}


.hero-swiper {
	width: 100%;
	height: 100%;
}

.hero-swiper .swiper-slide {
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-position: center;
}

.content-swiper {
	width: 100%;
	height: auto;
}

.content-swiper .swiper-slide {
	opacity: 0;
	-webkit-transition: opacity 0.5s ease;
	-moz-transition: opacity 0.5s ease;
	-ms-transition: opacity 0.5s ease;
	-o-transition: opacity 0.5s ease;
	transition: opacity 0.5s ease;
}

.content-swiper .swiper-slide-active {
	opacity: 1;
}

/* Navigation Buttons */
.swiper-button-next,
.swiper-button-prev {
	color: white;
	width: 44px;
	height: 44px;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
}

.swiper-button-next:after,
.swiper-button-prev:after {
	font-size: 20px;
	font-weight: bold;
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
	color: #fbbf24;
	-webkit-transform: scale(1.1);
	-moz-transform: scale(1.1);
	-ms-transform: scale(1.1);
	-o-transform: scale(1.1);
	transform: scale(1.1);
}

/* Pagination */
.swiper-pagination-bullet {
	background: white;
	opacity: 0.5;
	width: 12px;
	height: 12px;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
}

.swiper-pagination-bullet-active {
	background: #fbbf24;
	opacity: 1;
	-webkit-transform: scale(1.2);
	-moz-transform: scale(1.2);
	-ms-transform: scale(1.2);
	-o-transform: scale(1.2);
	transform: scale(1.2);
}

/* Cross-browser compatibility styles */
main {
	/* Flexbox fallbacks */
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	flex-direction: column;
	
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
	
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
}

/* Slide animations */
.slide-title,
.slide-text {
	-webkit-animation: slideInUp 0.8s ease-out;
	-moz-animation: slideInUp 0.8s ease-out;
	-ms-animation: slideInUp 0.8s ease-out;
	-o-animation: slideInUp 0.8s ease-out;
	animation: slideInUp 0.8s ease-out;
}

.slide-text {
	-webkit-animation-delay: 0.2s;
	-moz-animation-delay: 0.2s;
	-ms-animation-delay: 0.2s;
	-o-animation-delay: 0.2s;
	animation-delay: 0.2s;
	opacity: 0;
	-webkit-animation-fill-mode: forwards;
	-moz-animation-fill-mode: forwards;
	-ms-animation-fill-mode: forwards;
	-o-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}

@keyframes slideInUp {
	from {
		opacity: 0;
		-webkit-transform: translateY(30px);
		-moz-transform: translateY(30px);
		-ms-transform: translateY(30px);
		-o-transform: translateY(30px);
		transform: translateY(30px);
	}
	to {
		opacity: 1;
		-webkit-transform: translateY(0);
		-moz-transform: translateY(0);
		-ms-transform: translateY(0);
		-o-transform: translateY(0);
		transform: translateY(0);
	}
}

@-webkit-keyframes slideInUp {
	from {
		opacity: 0;
		-webkit-transform: translateY(30px);
		transform: translateY(30px);
	}
	to {
		opacity: 1;
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
}

/* Mobile-first responsive adjustments */
@media screen and (max-width: 640px) {
	main {
		min-height: 100vh;
		min-height: -webkit-fill-available; /* iOS Safari fix */
	}
	
	h1 {
		font-size: clamp(2.5rem, 8vw, 4rem);
		line-height: 1.1;
	}
	
	.swiper-button-next,
	.swiper-button-prev {
		display: none; /* Hide navigation on mobile */
	}
}

@media screen and (min-width: 641px) and (max-width: 1024px) {
	h1 {
		font-size: clamp(3.5rem, 6vw, 5rem);
	}
}

@media screen and (min-width: 1025px) {
	h1 {
		font-size: clamp(4rem, 5vw, 6rem);
	}
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
	.slide-title,
	.slide-text,
	.swiper-button-next,
	.swiper-button-prev,
	.swiper-pagination-bullet {
		-webkit-animation: none;
		-moz-animation: none;
		-ms-animation: none;
		-o-animation: none;
		animation: none;
		
		-webkit-transition: none;
		-moz-transition: none;
		-ms-transition: none;
		-o-transition: none;
		transition: none;
		
		-webkit-transform: none;
		-moz-transform: none;
		-ms-transform: none;
		-o-transform: none;
		transform: none;
	}
	
	.slide-text {
		opacity: 1;
	}
}

/* 
***************************************************************************************
** CONTACT PAGE STYLES (migrated from inline <style>)
***************************************************************************************
*/

/* Process Steps Section Styles */
.step-item {
	position: relative;
}

/* 
***************************************************************************************
** FOOTER STYLES (migrated from inline <style>)
***************************************************************************************
*/

/* Footer responsive enhancements */
footer {
	background: linear-gradient(135deg, #1a1a1a 0%, #000000 100%);
}

/* Social media icons hover effects */
footer .social-icon {
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
}

footer .social-icon:hover {
	-webkit-transform: scale(1.1) translateY(-2px);
	-moz-transform: scale(1.1) translateY(-2px);
	-ms-transform: scale(1.1) translateY(-2px);
	-o-transform: scale(1.1) translateY(-2px);
	transform: scale(1.1) translateY(-2px);
	
	-webkit-box-shadow: 0 5px 15px rgba(255, 193, 7, 0.3);
	-moz-box-shadow: 0 5px 15px rgba(255, 193, 7, 0.3);
	box-shadow: 0 5px 15px rgba(255, 193, 7, 0.3);
}

/* Links hover effects */
footer a {
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
}

/* Mobile optimizations */
@media screen and (max-width: 640px) {
	footer {
		padding-top: 3rem;
	}
	
	footer .grid {
		gap: 2rem;
	}
}

/* Tablet adjustments */
@media screen and (min-width: 641px) and (max-width: 1024px) {
	footer {
		padding-top: 4rem;
	}
}

/* Desktop enhancements */
@media screen and (min-width: 1025px) {
	footer {
		padding-top: 5rem;
	}
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
	footer .social-icon,
	footer a {
		-webkit-transition: none;
		-moz-transition: none;
		-ms-transition: none;
		-o-transition: none;
		transition: none;
		
		-webkit-transform: none;
		-moz-transform: none;
		-ms-transform: none;
		-o-transform: none;
		transform: none;
	}
}

/* 
***************************************************************************************
** VISIT PAGE STYLES (migrated from inline <style>)
***************************************************************************************
*/

/* Profile section responsive enhancements */
@media screen and (max-width: 640px) {
	#profile img {
		width: 100%;
		max-width: 300px;
		height: 360px;
	}
}

@media screen and (min-width: 641px) and (max-width: 1024px) {
	#profile img {
		width: 100%;
		max-width: 350px;
		height: 420px;
	}
}

/* Button hover effects with cross-browser support */
.visit-btn {
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
	
	-webkit-transform: translateZ(0);
	-moz-transform: translateZ(0);
	-ms-transform: translateZ(0);
	-o-transform: translateZ(0);
	transform: translateZ(0);
}

.visit-btn:hover {
	-webkit-transform: scale(1.05) translateZ(0);
	-moz-transform: scale(1.05) translateZ(0);
	-ms-transform: scale(1.05) translateZ(0);
	-o-transform: scale(1.05) translateZ(0);
	transform: scale(1.05) translateZ(0);
	
	-webkit-box-shadow: 0 10px 25px rgba(0,0,0,0.2);
	-moz-box-shadow: 0 10px 25px rgba(0,0,0,0.2);
	box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}

/* Image responsive behavior */
#profile img {
	-webkit-transition: transform 0.3s ease;
	-moz-transition: transform 0.3s ease;
	-ms-transition: transform 0.3s ease;
	-o-transition: transform 0.3s ease;
	transition: transform 0.3s ease;
}

#profile img:hover {
	-webkit-transform: scale(1.02);
	-moz-transform: scale(1.02);
	-ms-transform: scale(1.02);
	-o-transform: scale(1.02);
	transform: scale(1.02);
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
	.visit-btn,
	#profile img {
		-webkit-transition: none;
		-moz-transition: none;
		-ms-transition: none;
		-o-transition: none;
		transition: none;
		
		-webkit-transform: none;
		-moz-transform: none;
		-ms-transform: none;
		-o-transform: none;
		transform: none;
	}
}

/* Utility: clamp text to 2 lines */
.line-clamp-2 {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.step-number {
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
	
	-webkit-transform: translateZ(0);
	-moz-transform: translateZ(0);
	-ms-transform: translateZ(0);
	-o-transform: translateZ(0);
	transform: translateZ(0);
	
	-webkit-box-shadow: 0 4px 15px rgba(0,0,0,0.1);
	-moz-box-shadow: 0 4px 15px rgba(0,0,0,0.1);
	box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.step-item:hover .step-number {
	-webkit-transform: scale(1.1) translateZ(0);
	-moz-transform: scale(1.1) translateZ(0);
	-ms-transform: scale(1.1) translateZ(0);
	-o-transform: scale(1.1) translateZ(0);
	transform: scale(1.1) translateZ(0);
	
	-webkit-box-shadow: 0 8px 25px rgba(0,0,0,0.15);
	-moz-box-shadow: 0 8px 25px rgba(0,0,0,0.15);
	box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.step-content h3,
.step-content p {
	-webkit-transition: color 0.3s ease;
	-moz-transition: color 0.3s ease;
	-ms-transition: color 0.3s ease;
	-o-transition: color 0.3s ease;
	transition: color 0.3s ease;
}

/* Responsive adjustments for steps */
@media screen and (max-width: 640px) {
	.step-number-wrapper {
		margin-bottom: 1.5rem;
	}
	
	.step-item {
		margin-bottom: 2rem;
	}
}

@media screen and (min-width: 641px) and (max-width: 1024px) {
	.step-item:nth-child(odd) {
		margin-bottom: 3rem;
	}
}

/* Final CTA section responsive background */
.final-cta-section {
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

@media screen and (max-width: 640px) {
	.final-cta-section {
		background-attachment: scroll; /* Better performance on mobile */
	}
}

/* CTA Button enhancements */
.final-cta-section a {
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
	
	-webkit-transform: translateZ(0);
	-moz-transform: translateZ(0);
	-ms-transform: translateZ(0);
	-o-transform: translateZ(0);
	transform: translateZ(0);
}

.final-cta-section a:hover {
	-webkit-transform: scale(1.05) translateZ(0);
	-moz-transform: scale(1.05) translateZ(0);
	-ms-transform: scale(1.05) translateZ(0);
	-o-transform: scale(1.05) translateZ(0);
	transform: scale(1.05) translateZ(0);
	
	-webkit-box-shadow: 0 15px 35px rgba(0,0,0,0.2);
	-moz-box-shadow: 0 15px 35px rgba(0,0,0,0.2);
	box-shadow: 0 15px 35px rgba(0,0,0,0.2);
}

/* Reduced motion support for contact page */
@media (prefers-reduced-motion: reduce) {
	.step-number,
	.step-content h3,
	.step-content p,
	.final-cta-section a {
		-webkit-transition: none;
		-moz-transition: none;
		-ms-transition: none;
		-o-transition: none;
		transition: none;
		
		-webkit-transform: none;
		-moz-transform: none;
		-ms-transform: none;
		-o-transform: none;
		transform: none;
	}
}