/* Font Face Declarations */
@font-face {
	font-family: "Montserrat";
	src: url("../assets/fonts/montserrat/Montserrat-Regular.woff2")
		format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Montserrat";
	src: url("../assets/fonts/montserrat/Montserrat-Medium.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Montserrat";
	src: url("../assets/fonts/montserrat/Montserrat-Bold.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Montserrat";
	src: url("../assets/fonts/montserrat/Montserrat-Black.woff2") format("woff2");
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}

/* Base styles */
* {
	font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI",
		Roboto, sans-serif;
}

@layer utilities {
	.no-scrollbar::-webkit-scrollbar {
		display: none;
	}
	.no-scrollbar {
		-ms-overflow-style: none;
		scrollbar-width: none;
	}
}

body{
    overflow-x: hidden;
}

/* Custom Container */
.container {
	max-width: 1440px;
	padding: 0 30px;
	margin: 0 auto;
}

/* Mobile responsive container */
@media (max-width: 768px) {
	.container {
		padding: 0 16px;
	}
}

/* Navbar styles */
.navbar {
	transition: all 0.3s ease;
}

.navbar.scrolled {
	background-color: rgba(0, 0, 0, 0.05) !important;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

/* Navigation link active state */
.nav-link.active {
	color: white !important;
	font-weight: 600;
}

/* Language specific styles that can't be replicated with Tailwind */
.header__lang.opened {
	border-radius: 5px 5px 0 0 !important;
	transition-delay: 0s !important;
}

.header__lang.opened .header__lang--options {
	height: 72px !important;
}

/* Project tabs styles */
.project-tab {
	font-size: 24px;
	font-weight: 500;
	padding: 9px 20px;
	border-radius: 100px;
	background: rgba(255, 255, 255, 0.05);
	color: white;
	border: none;
	cursor: pointer;
	transition: all 0.3s ease;
}

@media screen and (max-width: 1800px) {
	.project-tab {
		font-size: 18px;
		padding: 8px 15px;
	}
}

.project-tab:hover {
	background: rgba(255, 255, 255, 0.1);
}

/* Active tab gradients */
.project-tab.active[data-project="0"] {
	background: linear-gradient(68.97deg, #9c51ff 10.14%, #d8bbff 87.49%);
}

.project-tab.active[data-project="1"] {
	background: linear-gradient(68.97deg, #9fca25 10.14%, #ebfeb5 87.49%);
}

.project-tab.active[data-project="2"] {
	background: linear-gradient(68.97deg, #06a5ff 10.14%, #a7efff 87.49%);
}

.project-tab.active[data-project="3"] {
	background: linear-gradient(68.97deg, #fff60d 10.14%, #fffdca 87.49%);
}

.project-tab.active[data-project="4"] {
	background: linear-gradient(68.97deg, #e2ff14 10.14%, #00adee 87.49%);
}

/* Project title highlights with gradient backgrounds */
.project-title-highlight {
	padding: 2px 15px;
	border-radius: 20px 5px 20px 5px;
	display: inline-block;
}

.project-title-highlight[data-project="0"] {
	background: linear-gradient(68.97deg, #9c51ff 10.14%, #d8bbff 87.49%);
}

.project-title-highlight[data-project="1"] {
	background: linear-gradient(68.97deg, #9fca25 10.14%, #ebfeb5 87.49%);
}

.project-title-highlight[data-project="2"] {
	background: linear-gradient(68.97deg, #06a5ff 10.14%, #a7efff 87.49%);
}

.project-title-highlight[data-project="3"] {
	background: linear-gradient(68.97deg, #fff60d 10.14%, #fffdca 87.49%);
}

.project-title-highlight[data-project="4"] {
	background: linear-gradient(68.97deg, #e2ff14 10.14%, #00adee 87.49%);
}

/* Complex approach section card titles */
.complex-title[data-card="0"] {
	background: linear-gradient(90deg, #ccf7ff 0%, #ffc9af 84.52%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

.complex-title[data-card="1"] {
	background: linear-gradient(90deg, #d0f0ff 0%, #b18cff 55.77%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

.complex-title[data-card="2"] {
	background: linear-gradient(90deg, #e5ee97 0%, #acdf92 57.16%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

/* Shining animation keyframes */
@keyframes shine {
	0% {
		transform: translateX(-100%);
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	100% {
		transform: translateX(100%);
		opacity: 0;
	}
}

/* Complex card hover effects with shining animation */
.complex-card {
	position: relative;
	overflow: hidden;
	transition: transform 0.3s ease;
}

.complex-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(45deg, 
		transparent 40%, 
		rgba(255, 255, 255, 0.3) 50%, 
		transparent 60%);
	transform: translateX(-100%);
	opacity: 0;
	transition: all 0.6s ease;
	z-index: 10;
	pointer-events: none;
}

/* Card specific shining colors */
.complex-card[data-shine="0"]::before {
	background: linear-gradient(45deg, 
		transparent 30%, 
		rgba(204, 247, 255, 0.4) 45%,
		rgba(255, 201, 175, 0.4) 55%,
		transparent 70%);
}

.complex-card[data-shine="1"]::before {
	background: linear-gradient(45deg, 
		transparent 30%, 
		rgba(208, 240, 255, 0.4) 45%,
		rgba(177, 140, 255, 0.4) 55%,
		transparent 70%);
}

.complex-card[data-shine="2"]::before {
	background: linear-gradient(45deg, 
		transparent 30%, 
		rgba(229, 238, 151, 0.4) 45%,
		rgba(172, 223, 146, 0.4) 55%,
		transparent 70%);
}

.complex-card-parent:hover .complex-card::before {
	animation: shine 1s ease-in-out;
}

.complex-card-parent:hover .complex-card {
	transform: translateY(-5px);
}

.complex-card-img{
	transition: all .2s;
}

.complex-card-parent:hover .complex-card-img{
	transform: translateY(-5px);
}

/* After-shine background glow effect */
.complex-card::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	border-radius: inherit;
	opacity: 0;
	transition: opacity 0.8s ease;
	z-index: -1;
	pointer-events: none;
}

.complex-card[data-shine="0"]::after {
	background: radial-gradient(circle at center, 
		rgba(204, 247, 255, 0.08) 0%,
		rgba(255, 201, 175, 0.06) 40%,
		transparent 70%);
}

.complex-card[data-shine="1"]::after {
	background: radial-gradient(circle at center, 
		rgba(208, 240, 255, 0.08) 0%,
		rgba(177, 140, 255, 0.06) 40%,
		transparent 70%);
}

.complex-card[data-shine="2"]::after {
	background: radial-gradient(circle at center, 
		rgba(229, 238, 151, 0.08) 0%,
		rgba(172, 223, 146, 0.06) 40%,
		transparent 70%);
}

.complex-card-parent:hover .complex-card::after {
	opacity: 1;
}

/* Project card styles */
.project-card {
	cursor: pointer;
	text-decoration: none;
}