/* Global Colors - The following color variables are used throughout the website. Updating them here will change the color scheme of the entire website */
:root {
	--background-color: #2d313e;
	--default-color: #e8e8e8;
	--heading-color: #f0f0f0;
	--accent-color: #d300b7;
	--surface-color: #2d2d2d;
	--contrast-color: #ffffff;
	--bg-color: #be2bc0;
	--nav-color: #e8e8e8;
	--nav-hover-color: #c222e6;
	--nav-mobile-background-color: #2d2d2d;
	--nav-dropdown-background-color: #932bc0;
	--nav-dropdown-color: #ffffff;
	--nav-dropdown-hover-color: #e622cc;
}

/* Color Presets */

.light-background {
	--background-color: #2d2d2d;
	--surface-color: #3d3d3d;
	--default-color: #e8e8e8;
	--heading-color: #f0f0f0;
}

.dark-background {
	--background-color: #1a1a1a;
	--default-color: #e8e8e8;
	--heading-color: #f0f0f0;
	--surface-color: #2d2d2d;
	--contrast-color: #ffffff;
}

/* Smooth scroll */
:root {
	scroll-behavior: smooth;
}

/*--------------------------------------------------------------
# General Styling & Shared Classes
--------------------------------------------------------------*/
html {
	overflow-x: hidden;
	width: 100%;
}

body {
	color: var(--accent-color);
	background-color: var(--background-color);
	font-family: var(--default-font);
	overflow-x: hidden;
	width: 100%;
	position: relative;
}

a {
	color: var(--accent-color);
	text-decoration: none;
	transition: 0.3s;
}

a:hover {
	color: color-mix(in srgb, var(--accent-color), transparent 25%);
	text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	color: var(--heading-color);
	font-family: var(--heading-font);
}

/* PHP Email Form Messages
------------------------------*/
.php-email-form .error-message {
	display: none;
	background: #df1529;
	color: #ffffff;
	text-align: left;
	padding: 15px;
	margin-bottom: 24px;
	font-weight: 600;
}

.php-email-form .sent-message {
	display: none;
	color: #ffffff;
	background: #059652;
	text-align: center;
	padding: 15px;
	margin-bottom: 24px;
	font-weight: 600;
}

.php-email-form .loading {
	display: none;
	background: var(--surface-color);
	text-align: center;
	padding: 15px;
	margin-bottom: 24px;
}

.php-email-form .loading:before {
	content: '';
	display: inline-block;
	border-radius: 50%;
	width: 24px;
	height: 24px;
	margin: 0 10px -6px 0;
	border: 3px solid var(--accent-color);
	border-top-color: var(--surface-color);
	animation: php-email-form-loading 1s linear infinite;
}

@keyframes php-email-form-loading {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

/*--------------------------------------------------------------
# Global Header
--------------------------------------------------------------*/
.header {
	background: linear-gradient(135deg, #2d2d2d 0%, #1a1a1a 100%);
	backdrop-filter: blur(10px);

	padding: 20px 0;
	transition: all 0.5s ease;
	z-index: 997;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.header .logo {
	line-height: 1;
	transition: transform 0.3s ease;
}

.header .logo:hover {
	transform: scale(1.05);
}

.header .logo img {
	width: 55px;
	height: 55px;
	margin-right: 15px;
	border-radius: 50%;
	border: 3px solid #d300b7;

	transition: all 0.3s ease;
}

.header .logo .logo-text {
	font-size: 28px;
	margin: 0;
	font-weight: bold;
	background: linear-gradient(135deg, #d300b7 0%, #db2cc3 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	font-family: var(--heading-font);

	letter-spacing: 1px;
}

.header .logo h1 {
	font-size: 30px;
	margin: 0;
	font-weight: 400;
	color: var(--heading-color);
}

.header .btn-getstarted,
.header .btn-getstarted:focus {
	color: var(--contrast-color);
	background: linear-gradient(135deg, #78106a 0%, #d300b7 100%);
	font-size: 14px;
	padding: 10px 30px;
	margin: 0 0 0 30px;
	border-radius: 50px;
	transition: all 0.3s ease;

	border: none;
}

.header .btn-getstarted:hover,
.header .btn-getstarted:focus:hover {
	color: var(--contrast-color);
	background: linear-gradient(135deg, #d300b7 0%, #55074b 100%);
	transform: translateY(-2px);
}

@media (max-width: 1200px) {
	.header {
		padding: 15px 0;
	}

	.header .logo {
		order: 1;
	}

	.header .btn-getstarted {
		order: 2;
		margin: 0 15px 0 0;
		padding: 8px 20px;
	}

	.header .navmenu {
		order: 3;
	}
}

.scrolled .header {
	background: rgba(29, 29, 46, 0.95);
	backdrop-filter: blur(20px);
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
	padding: 15px 0;
}

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/* Navmenu - Desktop */
@media (min-width: 1200px) {
	.navmenu {
		padding: 0;
	}

	.navmenu ul {
		margin: 0;
		padding: 0;
		display: flex;
		list-style: none;
		align-items: center;
	}

	.navmenu li {
		position: relative;
	}

	.navmenu a,
	.navmenu a:focus {
		color: #e8e8e8;
		padding: 10px 18px;
		font-size: 16px;
		font-family: var(--nav-font);
		font-weight: 500;
		display: flex;
		align-items: center;
		justify-content: space-between;
		white-space: nowrap;
		transition: all 0.3s ease;
		border-radius: 8px;
		position: relative;
		margin: 0 5px;
	}

	.navmenu a::before {
		content: '';
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 0;
		height: 3px;
		background: linear-gradient(90deg, #521249, #d300b7);
		border-radius: 3px;
		transition: width 0.3s ease;
	}

	.navmenu a i,
	.navmenu a:focus i {
		font-size: 12px;
		line-height: 0;
		margin-left: 5px;
		transition: 0.3s;
	}

	.navmenu li a {
		border-radius: 8px;
		margin: 0 5px;
	}

	.navmenu li:hover > a,
	.navmenu .active,
	.navmenu .active:focus {
		color: #d300b7;

		transform: translateY(-2px);
	}

	.navmenu li:hover > a::before,
	.navmenu .active::before {
		width: 80%;
	}

	.navmenu .dropdown ul {
		margin: 0;
		padding: 10px 0;
		background: var(--nav-dropdown-background-color);
		display: block;
		position: absolute;
		visibility: hidden;
		left: 14px;
		top: 130%;
		opacity: 0;
		transition: 0.3s;
		border-radius: 4px;
		z-index: 99;
		box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
	}

	.navmenu .dropdown ul li {
		min-width: 200px;
	}

	.navmenu .dropdown ul a {
		padding: 10px 20px;
		font-size: 15px;
		text-transform: none;
		color: var(--nav-dropdown-color);
	}

	.navmenu .dropdown ul a i {
		font-size: 12px;
	}

	.navmenu .dropdown ul a:hover,
	.navmenu .dropdown ul .active:hover,
	.navmenu .dropdown ul li:hover > a {
		color: var(--nav-dropdown-hover-color);
	}

	.navmenu .dropdown:hover > ul {
		opacity: 1;
		top: 100%;
		visibility: visible;
	}

	.navmenu .dropdown .dropdown ul {
		top: 0;
		left: -90%;
		visibility: hidden;
	}

	.navmenu .dropdown .dropdown:hover > ul {
		opacity: 1;
		top: 0;
		left: -100%;
		visibility: visible;
	}
}

/* Mobile Menu - Base Styles (Hidden on Desktop) */
.mobile-toggle {
	display: none;
}

.mobile-menu {
	display: none;
}

.mobile-header {
	display: none;
}

/* Navmenu - Mobile */
@media (max-width: 1199px) {
	/* Hide desktop header on mobile */
	.header {
		display: none !important;
	}

	/* Show mobile header */
	.mobile-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 15px 20px;
		background: linear-gradient(135deg, #2d2d2d 0%, #1a1a1a 100%);

		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 9999;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
	}

	.mobile-header .logo {
		display: flex;
		align-items: center;
		gap: 10px;
		text-decoration: none;
	}

	.mobile-header .logo img {
		width: 40px;
		height: 40px;
		border-radius: 50%;
		border: 2px solid #d300b7;
	}

	.mobile-header .logo .logo-text {
		font-size: 20px;
		font-weight: 700;
		background: linear-gradient(135deg, #d300b7 0%, #43143c 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		background-clip: text;
		margin: 0;
	}

	/* Add padding to main content on mobile to account for fixed header */
	.main {
		padding-top: 70px;
	}

	/* Prevent horizontal scroll on mobile */
	.container-fluid,
	.container-xl,
	.container {
		max-width: 100%;
		padding-left: 15px;
		padding-right: 15px;
	}

	.navmenu {
		padding: 0;
		z-index: 9997;
	}

	.navmenu > ul {
		display: none;
	}

	/* Mobile Toggle Button */
	.mobile-toggle {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		width: 30px;
		height: 22px;
		background: transparent;
		border: none;
		cursor: pointer;
		padding: 0;
		z-index: 10001;
		position: relative;
		transition: all 0.3s ease;
	}

	/* Show mobile menu container on mobile (but keep it hidden until active) */
	.mobile-menu {
		display: block;
		opacity: 0;
		visibility: hidden;
	}

	.mobile-toggle:focus {
		outline: none;
	}

	.mobile-toggle span {
		display: block;
		width: 100%;
		height: 3px;
		background: linear-gradient(135deg, #d300b7 0%, #501448 100%);
		border-radius: 3px;
		transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
		transform-origin: center;
	}

	.mobile-toggle:hover span {
		background: linear-gradient(135deg, #4a1643 0%, #d300b7 100%);
	}

	/* Mobile Menu */
	.mobile-menu {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 99999;
		opacity: 0;
		visibility: hidden;
		transition:
			opacity 0.3s ease,
			visibility 0.3s ease;
		pointer-events: none;
	}

	.mobile-menu.active {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
	}

	.mobile-menu__overlay {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.9);
		backdrop-filter: blur(8px);
		opacity: 0;
		transition: opacity 0.3s ease;
	}

	.mobile-menu.active .mobile-menu__overlay {
		opacity: 1;
	}

	.mobile-menu__content {
		position: absolute;
		top: 0;
		right: -100%;
		width: 85%;
		max-width: 380px;
		height: 100%;
		background: linear-gradient(180deg, #1a1a1a 0%, #2d2d2d 100%);
		box-shadow: -5px 0 40px rgba(0, 0, 0, 0.6);
		display: flex;
		flex-direction: column;
		transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
		overflow-y: auto;
		overflow-x: hidden;
		-webkit-overflow-scrolling: touch;
		z-index: 100000;
	}

	.mobile-menu.active .mobile-menu__content {
		right: 0;
	}

	/* Mobile Menu Header */
	.mobile-menu__header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 25px 20px;

		background: linear-gradient(
			135deg,
			rgba(211, 0, 207, 0.15) 0%,
			rgba(204, 34, 230, 0.08) 100%
		);
	}

	.mobile-menu__logo {
		display: flex;
		align-items: center;
		gap: 12px;
		text-decoration: none;
		transition: all 0.3s ease;
	}

	.mobile-menu__logo:hover {
		transform: scale(1.05);
	}

	.mobile-menu__logo img {
		width: 45px;
		height: 45px;
		border-radius: 50%;
		border: 2px solid #d300b7;
	}

	.mobile-menu__logo span {
		font-size: 22px;
		font-weight: 700;
		background: linear-gradient(135deg, #d300b7 0%, #45113e 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		background-clip: text;
		font-family: var(--heading-font);
	}

	.mobile-menu__close {
		width: 42px;
		height: 42px;
		background: rgba(211, 0, 204, 0.2);

		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		transition: all 0.3s ease;
		color: #d300b7;
		font-size: 20px;
	}

	.mobile-menu__close:hover {
		background: linear-gradient(135deg, #d300b7 0%, #41103b 100%);
		border-color: #d300b7;
		color: white;
		transform: rotate(90deg) scale(1.1);
	}

	/* Mobile Menu Navigation */
	.mobile-menu__nav {
		flex: 1;
		padding: 30px 0;
		overflow-y: auto;
	}

	.mobile-menu__list {
		list-style: none;
		padding: 0;
		margin: 0;
	}

	.mobile-menu__list li {
		margin: 0;
		padding: 0;
		opacity: 0;
		transform: translateX(30px);
		animation: slideInRight 0.4s ease forwards;
	}

	.mobile-menu.active .mobile-menu__list li:nth-child(1) {
		animation-delay: 0.1s;
	}

	.mobile-menu.active .mobile-menu__list li:nth-child(2) {
		animation-delay: 0.15s;
	}

	.mobile-menu.active .mobile-menu__list li:nth-child(3) {
		animation-delay: 0.2s;
	}

	.mobile-menu.active .mobile-menu__list li:nth-child(4) {
		animation-delay: 0.25s;
	}

	@keyframes slideInRight {
		to {
			opacity: 1;
			transform: translateX(0);
		}
	}

	.mobile-menu__link {
		display: flex;
		align-items: center;
		gap: 15px;
		padding: 18px 25px;
		color: rgba(232, 232, 232, 0.95);
		text-decoration: none;
		font-size: 17px;
		font-weight: 500;
		font-family: var(--nav-font);
		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
		position: relative;
		border-left: 3px solid transparent;
	}

	.mobile-menu__link::before {
		content: '';
		position: absolute;
		left: 0;
		top: 0;
		height: 100%;
		width: 0;
		background: linear-gradient(
			90deg,
			rgba(211, 84, 0, 0.15) 0%,
			transparent 100%
		);
		transition: width 0.3s ease;
	}

	.mobile-menu__link:hover::before,
	.mobile-menu__link.active::before {
		width: 100%;
	}

	.mobile-menu__link:hover,
	.mobile-menu__link.active {
		color: #d300b7;
		border-left-color: #43133c;
		background: rgba(200, 0, 211, 0.12);
		transform: translateX(8px);
	}

	.mobile-menu__link i {
		font-size: 22px;
		width: 38px;
		height: 38px;
		display: flex;
		align-items: center;
		justify-content: center;
		background: rgba(183, 0, 211, 0.18);
		border-radius: 10px;
		color: #d300b7;
		transition: all 0.3s ease;
		flex-shrink: 0;
	}

	.mobile-menu__link:hover i,
	.mobile-menu__link.active i {
		background: linear-gradient(135deg, #40123a 0%, #d300b7 100%);
		color: white;
		transform: scale(1.1) rotate(5deg);
	}

	.mobile-menu__link span {
		flex: 1;
	}

	/* Mobile Menu Footer */
	.mobile-menu__footer {
		padding: 25px 20px;
		border-top: 2px solid rgba(211, 84, 0, 0.3);
		background: linear-gradient(
			135deg,
			rgba(211, 84, 0, 0.08) 0%,
			rgba(230, 126, 34, 0.08) 100%
		);
	}

	.mobile-menu__contact {
		display: flex;
		flex-direction: column;
		gap: 12px;
		margin-bottom: 20px;
	}

	.mobile-menu__contact-item {
		display: flex;
		align-items: center;
		gap: 12px;
		padding: 12px 15px;
		background: rgba(211, 84, 0, 0.12);
		border-radius: 10px;
		border: 1px solid rgba(211, 84, 0, 0.25);
		text-decoration: none;
		color: rgba(232, 232, 232, 0.95);
		font-size: 15px;
		transition: all 0.3s ease;
	}

	.mobile-menu__contact-item:hover {
		background: rgba(211, 84, 0, 0.25);
		border-color: #40183a;
		transform: translateX(5px);
		color: #d300b7;
	}

	.mobile-menu__contact-item i {
		font-size: 18px;
		color: #d300b7;
		width: 32px;
		height: 32px;
		display: flex;
		align-items: center;
		justify-content: center;
		background: rgba(211, 84, 0, 0.2);
		border-radius: 50%;
		transition: all 0.3s ease;
	}

	.mobile-menu__contact-item:hover i {
		background: linear-gradient(135deg, #4d0e45 0%, #d300b7 100%);
		color: white;
		transform: scale(1.1);
	}

	.mobile-menu__social {
		display: flex;
		gap: 12px;
		justify-content: center;
	}

	.mobile-menu__social a {
		width: 44px;
		height: 44px;
		display: flex;
		align-items: center;
		justify-content: center;
		background: rgba(183, 0, 211, 0.18);

		border-radius: 50%;
		color: #d300b7;
		font-size: 19px;
		text-decoration: none;
		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
		position: relative;
		overflow: hidden;
	}

	.mobile-menu__social a::before {
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		width: 0;
		height: 0;
		background: linear-gradient(135deg, #410e3a 0%, #d300b7 100%);
		border-radius: 50%;
		transform: translate(-50%, -50%);
		transition: all 0.4s ease;
		z-index: -1;
	}

	.mobile-menu__social a:hover::before {
		width: 100%;
		height: 100%;
	}

	.mobile-menu__social a:hover {
		color: white;
		border-color: #d300b7;
		transform: translateY(-5px) scale(1.1);
	}
}

/*--------------------------------------------------------------
# Global Footer
--------------------------------------------------------------*/
.footer {
	color: var(--default-color);
	background: linear-gradient(180deg, #1a1a1a 0%, #0f0f1e 100%);
	font-size: 14px;
	position: relative;
}

.footer .footer-newsletter {
	background-color: color-mix(in srgb, var(--default-color), transparent 97%);
	padding: 50px 0;
}

.footer .footer-newsletter h4 {
	font-size: 24px;
}

.footer .footer-newsletter .newsletter-form {
	margin-top: 30px;
	margin-bottom: 15px;
	padding: 6px 8px;
	position: relative;
	border-radius: 4px;
	background-color: var(--surface-color);
	border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
	box-shadow: 0px 2px 25px rgba(0, 0, 0, 0.1);
	display: flex;
	transition: 0.3s;
	border-radius: 50px;
}

.footer .footer-newsletter .newsletter-form:focus-within {
	border-color: var(--accent-color);
}

.footer .footer-newsletter .newsletter-form input[type='email'] {
	border: 0;
	padding: 4px;
	width: 100%;
	background-color: var(--surface-color);
	color: var(--default-color);
}

.footer .footer-newsletter .newsletter-form input[type='email']:focus-visible {
	outline: none;
}

.footer .footer-newsletter .newsletter-form input[type='submit'] {
	border: 0;
	font-size: 16px;
	padding: 0 20px;
	margin: -7px -8px -7px 0;
	background: var(--accent-color);
	color: var(--contrast-color);
	transition: 0.3s;
	border-radius: 50px;
}

.footer .footer-newsletter .newsletter-form input[type='submit']:hover {
	background: color-mix(in srgb, var(--accent-color), transparent 20%);
}

.footer .footer-top {
	padding: 60px 40px;
	border-bottom: 1px solid rgba(211, 84, 0, 0.2);
}

.footer .social-links {
	display: flex;
	gap: 12px;
	margin-top: 20px;
}

.footer .social-links a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 45px;
	height: 45px;
	border-radius: 50%;
	background: linear-gradient(
		135deg,
		rgba(211, 84, 0, 0.2) 0%,
		rgba(230, 126, 34, 0.2) 100%
	);
	border: 2px solid rgba(211, 84, 0, 0.4);
	font-size: 18px;
	color: #d300b7;
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
}

.footer .social-links a::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(0);
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #520848 0%, #d300b7 100%);
	border-radius: 50%;
	transition: transform 0.3s ease;
	z-index: -1;
}

.footer .social-links a:hover {
	color: #ffffff;
	border-color: #d300b7;
	transform: translateY(-3px);
}

.footer .social-links a:hover::before {
	transform: translate(-50%, -50%) scale(1);
}

.footer h4 {
	font-size: 20px;
	font-weight: bold;
	position: relative;
	padding-bottom: 20px;
	margin-bottom: 25px;
	color: #d300b7;
	background: linear-gradient(135deg, #d300b7 0%, #3a0f35 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.footer h4::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 50px;
	height: 3px;
	background: linear-gradient(90deg, #270d23, #d300b7);
	border-radius: 3px;
}

.footer .footer-links {
	margin-bottom: 30px;
}

.footer .footer-links ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.footer .footer-links ul i {
	margin-right: 3px;
	font-size: 12px;
	line-height: 0;
	color: var(--accent-color);
}

.footer .footer-links ul li {
	padding: 10px 0;
	display: flex;
	align-items: center;
}

.footer .footer-links ul li:first-child {
	padding-top: 0;
}

.footer .footer-links ul a {
	display: inline-block;
	color: rgba(232, 232, 232, 0.7);
	line-height: 1.8;
	transition: all 0.3s ease;
	position: relative;
	padding-left: 0;
}

.footer .footer-links ul a::before {
	content: '→';
	position: absolute;
	left: -20px;
	opacity: 0;
	transition: all 0.3s ease;
	color: #d300b7;
}

.footer .footer-links ul a:hover {
	color: #d300b7;
	padding-left: 20px;
	transform: translateX(5px);
}

.footer .footer-links ul a:hover::before {
	opacity: 1;
	left: 0;
}

.footer .footer-about a {
	color: var(--heading-color);
	font-size: 24px;
	font-weight: 600;
	font-family: var(--heading-font);
}

.footer .footer-contact p {
	margin-bottom: 5px;
}

.footer .footer-brand {
	margin-bottom: 30px;
}

.footer .footer-brand .logo {
	margin-bottom: 20px;
}

.footer .footer-brand .logo img {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	border: 3px solid #d300b7;
	box-shadow: 0 4px 15px rgba(211, 84, 0, 0.4);
}

.footer .footer-brand .logo .logo-text {
	font-size: 26px;
	background: linear-gradient(135deg, #d300b7 0%, #45193f 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.footer .footer-brand p {
	margin-top: 20px;
	margin-bottom: 0;
	color: rgba(232, 232, 232, 0.8);
	line-height: 1.8;
	font-size: 15px;
}

.footer .footer-contact ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.footer .footer-contact ul li {
	padding: 12px 0;
	display: flex;
	align-items: center;
	color: rgba(232, 232, 232, 0.8);
	transition: all 0.3s ease;
	border-radius: 5px;
	padding-left: 10px;
}

.footer .footer-contact ul li:hover {
	background: rgba(211, 84, 0, 0.1);
	transform: translateX(5px);
}

.footer .footer-contact ul li i {
	display: flex;
	align-items: center;
	justify-content: center;
	color: #d300b7;
	margin-right: 12px;
	font-size: 18px;
	width: 32px;
	width: 32px;
	height: 32px;
	text-align: center;
	background: rgba(211, 84, 0, 0.2);
	padding: 18px;
	border-radius: 50%;
	transition: all 0.3s ease;
	border: 2px solid rgba(211, 84, 0, 0.4);
}

.footer .footer-contact ul li:hover i {
	background: linear-gradient(135deg, #380e32 0%, #d300b7 100%);
	color: #ffffff;
	transform: scale(1.1);
}

.footer .copyright {
	padding: 30px 0;
	background: rgba(30, 15, 30, 0.8);

	text-align: center;
}

.footer .copyright p {
	margin-bottom: 0;
	color: rgba(232, 232, 232, 0.6);
	font-size: 14px;
	letter-spacing: 0.5px;
}

.footer .credits {
	margin-top: 6px;
	font-size: 13px;
}

/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/
#preloader {
	position: fixed;
	inset: 0;
	z-index: 999999;
	overflow: hidden;
	background: var(--background-color);
	transition: all 0.6s ease-out;
}

#preloader:before {
	content: '';
	position: fixed;
	top: calc(50% - 30px);
	left: calc(50% - 30px);
	border: 6px solid #ffffff;
	border-color: var(--accent-color) transparent var(--accent-color) transparent;
	border-radius: 50%;
	width: 60px;
	height: 60px;
	animation: animate-preloader 1.5s linear infinite;
}

@keyframes animate-preloader {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

/*--------------------------------------------------------------
# Scroll Top Button
--------------------------------------------------------------*/
.scroll-top {
	position: fixed;
	visibility: hidden;
	opacity: 0;
	right: 15px;
	bottom: 15px;
	z-index: 99999;
	background-color: var(--accent-color);
	width: 40px;
	height: 40px;
	border-radius: 4px;
	transition: all 0.4s;
}

.scroll-top i {
	font-size: 24px;
	color: var(--contrast-color);
	line-height: 0;
}

.scroll-top:hover {
	background-color: color-mix(in srgb, var(--accent-color), transparent 20%);
	color: var(--contrast-color);
}

.scroll-top.active {
	visibility: visible;
	opacity: 1;
}

/*--------------------------------------------------------------
# Disable aos animation delay on mobile devices
--------------------------------------------------------------*/
@media screen and (max-width: 768px) {
	[data-aos-delay] {
		transition-delay: 0 !important;
	}
}

/*--------------------------------------------------------------
# Global Page Titles & Breadcrumbs
--------------------------------------------------------------*/
.page-title {
	color: var(--default-color);
	background-color: var(--background-color);
	padding: 20px 0;
	position: relative;
}

.page-title h1 {
	font-size: 28px;
	font-weight: 700;
	margin: 0;
}

.page-title .breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	padding: 0 0 10px 0;
	margin: 0;
	font-size: 14px;
	font-weight: 400;
}

.page-title .breadcrumbs ol li + li {
	padding-left: 10px;
}

.page-title .breadcrumbs ol li + li::before {
	content: '/';
	display: inline-block;
	padding-right: 10px;
	color: color-mix(in srgb, var(--default-color), transparent 70%);
}

/*--------------------------------------------------------------
# Global Sections
--------------------------------------------------------------*/
section,
.section {
	color: var(--bg-color);
	background-color: var(--background-color);
	padding: 60px 0;
	scroll-margin-top: 90px;
	overflow: clip;
}

@media (max-width: 1199px) {
	section,
	.section {
		scroll-margin-top: 66px;
	}
}

/*--------------------------------------------------------------
# Global Section Titles
--------------------------------------------------------------*/
.section-title {
	text-align: center;
	padding-bottom: 60px;
	position: relative;
}

.section-title h2 {
	font-size: 32px;
	font-weight: 700;
	margin-bottom: 15px;
}

.section-title p {
	margin-bottom: 0;
}

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
.hero {
	width: 100%;
	min-height: 70vh;
	position: relative;
	padding: 120px 0 60px 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	overflow: hidden;
}

/* Hero Background Animation */
.hero-background-animation {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	opacity: 0.1;
	background: linear-gradient(45deg, #d35400, #e67e22, #c0392b, #d35400);
	background-size: 400% 400%;
	animation: gradientShift 15s ease infinite;
}

@keyframes gradientShift {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

.hero-background-animation::before,
.hero-background-animation::after {
	content: '';
	position: absolute;
	width: 200px;
	height: 200px;
	border-radius: 50%;
	background: rgba(211, 84, 0, 0.2);
	animation: float 6s ease-in-out infinite;
}

.hero-background-animation::before {
	top: 10%;
	left: 10%;
	animation-delay: 0s;
}

.hero-background-animation::after {
	bottom: 10%;
	right: 10%;
	animation-delay: 3s;
}

@keyframes float {
	0%,
	100% {
		transform: translateY(0) scale(1);
		opacity: 0.3;
	}
	50% {
		transform: translateY(-30px) scale(1.1);
		opacity: 0.5;
	}
}

.hero .container {
	position: relative;
	z-index: 1;
}

.hero h2 {
	margin: 0;
	font-size: 48px;
	font-weight: 700;
	line-height: 56px;
}

.hero p {
	color: color-mix(in srgb, var(--default-color), transparent 30%);
	margin: 5px 0 10px 0;
	font-size: 20px;
	font-weight: 400;
}

.hero .download-btn {
	color: var(--contrast-color);
	background: color-mix(in srgb, var(--accent-color) 90%, black 50%);
	font-family: var(--heading-font);
	font-weight: 500;
	font-size: 15px;
	padding: 8px 30px 10px 30px;
	border-radius: 3px;
	transition: 0.5s;
	display: flex;
	align-items: center;
	justify-content: center;
}

.hero .download-btn + .download-btn {
	margin-left: 20px;
}

.hero .download-btn:hover {
	background: var(--accent-color);
	color: var(--contrast-color);
}

.hero .download-btn i {
	font-size: 16px;
	line-height: 0;
	margin-right: 8px;
}

@media (max-width: 768px) {
	.hero h2 {
		font-size: 28px;
		line-height: 36px;
	}

	.hero p {
		font-size: 18px;
		line-height: 24px;
		margin-bottom: 30px;
	}

	.hero .download-btn {
		font-size: 14px;
		padding: 8px 20px 10px 20px;
	}
}

/*--------------------------------------------------------------
# About Section
--------------------------------------------------------------*/
.company-info-card {
	background: linear-gradient(
		135deg,
		var(--surface-color) 0%,
		rgba(211, 84, 0, 0.05) 100%
	);
	border-radius: 20px;
	padding: 35px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
	border: 2px solid rgba(211, 84, 0, 0.2);
	height: 100%;
	transition: all 0.3s ease;
}

.company-info-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 15px 40px rgba(211, 84, 0, 0.3);
	border-color: rgba(211, 84, 0, 0.4);
}

.company-info-card h3 {
	color: var(--heading-color);
	font-size: 1.5rem;
	margin-bottom: 25px;
	display: flex;
	align-items: center;
	gap: 10px;
}

.company-info-card h3 i {
	color: #d35400;
	font-size: 1.8rem;
}

.company-info-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.company-info-list li {
	padding: 12px 0;
	border-bottom: 1px solid rgba(211, 84, 0, 0.1);
	color: rgba(232, 232, 232, 0.9);
	line-height: 1.6;
}

.company-info-list li:last-child {
	border-bottom: none;
}

.company-info-list li strong {
	color: var(--heading-color);
	display: inline-block;
	min-width: 140px;
}

.about ul {
	list-style: none;
	padding: 0;
}

.about ul li {
	padding-bottom: 5px;
	display: flex;
	align-items: center;
}

.about ul i {
	font-size: 20px;
	padding-right: 4px;
	color: var(--bg-color);
}

.about .read-more {
	background: var(--accent-color);
	color: var(--bg-color);
	font-family: var(--heading-font);
	font-weight: 600;
	font-size: 16px;
	letter-spacing: 1.2px;
	padding: 12px 32px;
	border-radius: 8px;
	transition:
		background-color 0.3s ease,
		box-shadow 0.3s ease;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	cursor: pointer;
	user-select: none;
	text-decoration: none;
}

.about .read-more i {
	font-size: 18px;
	margin-left: 8px;
	line-height: 0;
	transition: transform 0.3s ease;
}

.about .read-more:hover {
	background: color-mix(in srgb, var(--accent-color), transparent 20%);
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.about .read-more:hover i {
	transform: translateX(6px);
}

/*--------------------------------------------------------------
# Features Section
--------------------------------------------------------------*/
#features {
	background-color: var(--bg-color);
	color: var(--contrast-color);
}

/* Flip Card Styles */
.flip-card {
	background-color: transparent;
	width: 100%;
	height: 400px;
	perspective: 1000px;
	margin-bottom: 2rem;
}

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

.flip-card-front,
.flip-card-back {
	position: absolute;
	width: 100%;
	height: 100%;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	border-radius: 1.5rem;
	padding: 2.5rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.flip-card-front {
	background: linear-gradient(
		135deg,
		var(--surface-color) 0%,
		rgba(211, 84, 0, 0.1) 100%
	);
	border: 2px solid rgba(211, 0, 211, 0.3);
	color: var(--default-color);
}

.flip-card-back {
	background: linear-gradient(135deg, #d300cf 0%, #e622e6 100%);
	color: white;
	transform: rotateY(180deg);
}

.flip-card-front .feature-icon {
	width: 100px;
	height: 100px;
	background: linear-gradient(135deg, var(--accent-color), #e622dc);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 1.5rem;
	position: relative;
	box-shadow: 0 8px 25px rgba(169, 0, 211, 0.4);
	transition: all 0.3s ease;
}

.flip-card:hover .flip-card-front .feature-icon {
	transform: scale(1.1) rotate(360deg);
}

.flip-card-front .feature-icon i {
	font-size: 2.5rem;
	color: white;
}

.flip-card-front h4 {
	font-size: 1.5rem;
	margin-bottom: 1rem;
	color: var(--heading-color);
	font-weight: 600;
}

.flip-card-front p {
	color: rgba(232, 232, 232, 0.8);
	line-height: 1.6;
	margin-bottom: 1.5rem;
}

.flip-card-back h4 {
	font-size: 1.5rem;
	margin-bottom: 1.5rem;
	color: white;
	font-weight: 600;
}

.flip-card-back .feature-list {
	list-style: none;
	padding: 0;
	margin: 0;
	text-align: left;
	width: 100%;
}

.flip-card-back .feature-list li {
	padding: 0.75rem 0;
	display: flex;
	align-items: center;
	color: rgba(255, 255, 255, 0.9);
	font-size: 1rem;
}

.flip-card-back .feature-list li i {
	margin-right: 0.75rem;
	font-size: 1.2rem;
	color: white;
}

.flip-hint {
	margin-top: auto;
	font-size: 0.85rem;
	color: rgba(190, 0, 211, 0.7);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding-top: 1rem;
	border-top: 1px solid rgba(211, 0, 200, 0.2);
	width: 100%;
}

.flip-card-back .flip-hint {
	color: rgba(255, 255, 255, 0.7);
	border-top-color: rgba(255, 255, 255, 0.2);
}

.flip-hint i {
	animation: rotate 2s linear infinite;
}

@keyframes rotate {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

.feature-icon {
	width: 80px;
	height: 80px;
	background: linear-gradient(135deg, var(--accent-color), #e67e22);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 1.5rem;
	position: relative;
}

.feature-icon i {
	font-size: 2rem;
	color: white;
}

.feature-content h4 {
	font-size: 1.5rem;
	font-weight: 600;
	margin-bottom: 1rem;
	color: var(--heading-color);
}

.feature-content p {
	font-size: 1rem;
	line-height: 1.6;
	margin-bottom: 1.5rem;
	color: var(--default-color);
}

.feature-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.feature-list li {
	position: relative;
	padding-left: 1.5rem;
	margin-bottom: 0.5rem;
	font-size: 0.9rem;
	color: var(--default-color);
}

.feature-list li::before {
	content: '→';
	position: absolute;
	left: 0;
	color: var(--accent-color);
	font-weight: bold;
}

.faq-elem:hover {
	border-color: var(--accent-color);
	box-shadow: 0 10px 30px rgba(211, 84, 0, 0.15);
	transform: translateY(-3px);
}

/*--------------------------------------------------------------
# Feature Details Section
--------------------------------------------------------------*/
.feature-details {
	position: relative;
	overflow: hidden;
}

/* Feature Details Background Animation */
.feature-details-background-animation {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	opacity: 0.08;
	background: radial-gradient(circle at 20% 50%, #d35400 0%, transparent 50%),
		radial-gradient(circle at 80% 80%, #e67e22 0%, transparent 50%);
	animation: pulse 8s ease-in-out infinite;
}

@keyframes pulse {
	0%,
	100% {
		opacity: 0.08;
		transform: scale(1);
	}
	50% {
		opacity: 0.15;
		transform: scale(1.05);
	}
}

.feature-details .container {
	position: relative;
	z-index: 1;
}

.feature-details .features-item {
	color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.feature-details .features-item + .features-item {
	margin-top: 100px;
}

@media (max-width: 640px) {
	.feature-details .features-item + .features-item {
		margin-top: 40px;
	}
}

.feature-details .features-item h3 {
	font-weight: 700;
	font-size: 28px;
	margin-bottom: 1.5rem;
	color: var(--heading-color);
	background: linear-gradient(135deg, #dc22e6 0%, #ac00d3 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.feature-details .features-item ul {
	list-style: none;
	padding: 0;
}

.feature-details .features-item ul li {
	padding-bottom: 10px;
	display: flex;
	align-items: center;
}

.feature-details .features-item ul li:last-child {
	padding-bottom: 0;
}

.feature-details .features-item ul i {
	font-size: 20px;
	padding-right: 4px;
	color: var(--accent-color);
}

.feature-details .features-item p:last-child {
	margin-bottom: 0;
}

/* Feature Image Wrapper with Hover Effect */
.feature-image-wrapper {
	position: relative;
	border-radius: 2rem;
	overflow: hidden;
	box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
	transition: all 0.4s ease;
}

.feature-image-wrapper:hover {
	transform: translateY(-10px) scale(1.02);
	box-shadow: 0 25px 60px rgba(211, 84, 0, 0.4);
}

.feature-image {
	width: 100%;
	height: auto;
	display: block;
	transition: all 0.4s ease;
	border-radius: 2rem;
}

.feature-image-wrapper:hover .feature-image {
	transform: scale(1.1);
	filter: brightness(0.8);
}

.image-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(
		135deg,
		rgba(211, 84, 0, 0.7) 0%,
		rgba(230, 126, 34, 0.7) 100%
	);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: all 0.4s ease;
	border-radius: 2rem;
}

.feature-image-wrapper:hover .image-overlay {
	opacity: 1;
}

.image-overlay i {
	font-size: 4rem;
	color: white;
	animation: pulseIcon 2s ease-in-out infinite;
}

@keyframes pulseIcon {
	0%,
	100% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.2);
	}
}

.feature-content-wrapper {
	padding: 2rem;
}

.feature-content-wrapper p {
	line-height: 1.8;
	margin-bottom: 1.5rem;
	color: rgba(232, 232, 232, 0.9);
}

.feature-content-wrapper .fst-italic {
	font-style: italic;
	color: rgba(230, 34, 230, 0.9);
	font-size: 1.1rem;
	margin-bottom: 1rem;
}

/* Feature Benefits */
.feature-benefits {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin-top: 2rem;
}

.benefit-item {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1rem;
	background: rgba(211, 0, 197, 0.1);
	border-radius: 0.75rem;
	border-left: 4px solid #9700d3;
	transition: all 0.3s ease;
}

.benefit-item i {
	font-size: 1.5rem;
	color: #e67e22;
	min-width: 30px;
}

.benefit-item span {
	color: var(--default-color);
	font-weight: 500;
	font-size: 1rem;
}
.feature-item-container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	gap: 15px;
}

.feature-item {
	display: flex;
	align-items: center;
	width: 100%;
	padding: 5px 15px;
	border: 1px solid #e0e0e0;
	border-radius: 10px;
	background-color: var(--background-color);
	transition:
		transform 0.3s,
		box-shadow 0.3s;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.feature-item:hover {
	transform: translateY(-5px);
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.feature-icon {
	font-size: 40px;
	color: var(--accent-color);
	margin-right: 15px;
}

.feature-text {
	font-size: 16px;
	color: #333;
	line-height: 1.5;
}

.feature-item strong {
	font-size: 18px;
	color: var(--accent-color);
}

/*--------------------------------------------------------------
# Gallery Section
--------------------------------------------------------------*/
.gallery {
	overflow: hidden;
}

.gallery .swiper-wrapper {
	height: auto;
}

.gallery .swiper-pagination {
	margin-top: 20px;
	position: relative;
}

.gallery .swiper-pagination .swiper-pagination-bullet {
	background-color: var(--background-color);
	border: 1px solid var(--accent-color);
	width: 12px;
	height: 12px;
	opacity: 1;
}

.gallery .swiper-pagination .swiper-pagination-bullet-active {
	background-color: var(--accent-color);
}

.gallery .swiper-slide-active {
	text-align: center;
}

@media (min-width: 992px) {
	.gallery .swiper-wrapper {
		padding: 60px 0;
	}

	.gallery .swiper-slide-active {
		background: var(--background-color);
		border: 6px solid var(--accent-color);
		padding: 4px;
		z-index: 1;
		transform: scale(1.2);
		border-radius: 25px;
		transition: none;
	}
}

/* Styles pour le bloc Témoignages */
.testimonials-section {
	padding: 120px 0;
	background-color: var(--background-color);
	position: relative;
	overflow: hidden;
}

/* Testimonials Background Animation */
.testimonials-background-animation {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	opacity: 0.1;
	background: radial-gradient(
			circle at 10% 20%,
			rgba(211, 84, 0, 0.3) 0%,
			transparent 50%
		),
		radial-gradient(
			circle at 90% 80%,
			rgba(230, 126, 34, 0.3) 0%,
			transparent 50%
		),
		radial-gradient(
			circle at 50% 50%,
			rgba(192, 57, 43, 0.2) 0%,
			transparent 70%
		);
	animation: testimonialPulse 10s ease-in-out infinite;
}

@keyframes testimonialPulse {
	0%,
	100% {
		opacity: 0.1;
		transform: scale(1);
	}
	50% {
		opacity: 0.2;
		transform: scale(1.1);
	}
}

.testimonials-section .container {
	position: relative;
	z-index: 1;
}

.testimonial-card {
	border-radius: 20px;
	padding: 40px 35px;

	position: relative;
	transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	height: 100%;
	border: 2px solid rgba(211, 0, 207, 0.2);
	overflow: hidden;
	cursor: pointer;
}

.testimonial-quote {
	font-size: 4rem;
	color: rgba(211, 84, 0, 0.15);
	position: absolute;
	top: 15px;
	left: 25px;
	line-height: 1;
	transition: all 0.4s ease;
}

.testimonial-card:hover .testimonial-quote {
	color: rgba(211, 84, 0, 0.3);
	transform: scale(1.2) rotate(5deg);
}

.testimonial-rating {
	display: flex;
	gap: 5px;
	margin-bottom: 25px;
	position: relative;
	z-index: 2;
}

.testimonial-rating i {
	font-size: 1.2rem;
	color: #ffd700;
	transition: all 0.3s ease;
	filter: drop-shadow(0 2px 4px rgba(255, 215, 0, 0.3));
}

.testimonial-card:hover .testimonial-rating i {
	transform: scale(1.2) rotate(10deg);
	animation: starTwinkle 0.5s ease;
}

@keyframes starTwinkle {
	0%,
	100% {
		transform: scale(1.2) rotate(10deg);
	}
	50% {
		transform: scale(1.4) rotate(15deg);
	}
}

.testimonial-text {
	font-size: 1.05rem;
	line-height: 1.8;
	font-style: italic;
	margin-bottom: 30px;
	position: relative;
	z-index: 2;
	color: rgba(232, 232, 232, 0.9);
	transition: all 0.4s ease;
}

.testimonial-card:hover .testimonial-text {
	color: var(--default-color);
	transform: translateX(5px);
}

.testimonial-author {
	display: flex;
	align-items: center;
	position: relative;
	z-index: 2;
	padding-top: 20px;
	border-top: 1px solid rgba(211, 84, 0, 0.2);
	transition: all 0.4s ease;
}

.testimonial-card:hover .testimonial-author {
	border-top-color: rgba(211, 84, 0, 0.4);
}

.testimonial-author-img {
	width: 70px;
	height: 70px;
	border-radius: 50%;
	background: linear-gradient(135deg, #d35400 0%, #e67e22 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 20px;
	border: 3px solid rgba(211, 84, 0, 0.3);
	box-shadow: 0 5px 15px rgba(211, 84, 0, 0.3);
	transition: all 0.4s ease;
	position: relative;
	overflow: hidden;
}

.testimonial-author-img::before {
	content: '';
	position: absolute;
	top: -50%;
	left: -50%;
	width: 200%;
	height: 200%;
	background: linear-gradient(
		45deg,
		transparent,
		rgba(255, 255, 255, 0.3),
		transparent
	);
	transform: rotate(45deg);
	transition: all 0.5s ease;
}

.testimonial-card:hover .testimonial-author-img::before {
	animation: shine 1s ease;
}

@keyframes shine {
	0% {
		transform: translateX(-100%) translateY(-100%) rotate(45deg);
	}
	100% {
		transform: translateX(100%) translateY(100%) rotate(45deg);
	}
}

.testimonial-card:hover .testimonial-author-img {
	transform: scale(1.1) rotate(5deg);
	border-color: rgba(211, 84, 0, 0.6);
	box-shadow: 0 8px 25px rgba(211, 84, 0, 0.5);
}

.testimonial-author-img i {
	font-size: 2rem;
	color: white;
	position: relative;
	z-index: 1;
	transition: all 0.4s ease;
}

.testimonial-card:hover .testimonial-author-img i {
	transform: scale(1.1);
}

.testimonial-author-info {
	flex: 1;
}

.testimonial-author-name {
	font-weight: 600;
	margin-bottom: 5px;
	font-size: 1.3rem;
	color: var(--heading-color);
	transition: all 0.4s ease;
}

.testimonial-card:hover .testimonial-author-name {
	color: #e67e22;
	transform: translateX(5px);
}

.testimonial-author-title {
	font-size: 0.9rem;
	color: rgba(232, 232, 232, 0.7);
	transition: all 0.4s ease;
}

.testimonial-card:hover .testimonial-author-title {
	color: rgba(232, 232, 232, 0.9);
}

/* Responsive adjustments */
@media (max-width: 991.98px) {
	.pricing-section,
	.testimonials-section {
		padding: 80px 0;
	}

	.testimonial-card {
		margin-bottom: 30px;
	}

	.pricing-card.featured {
		transform: scale(1);
		margin-top: 30px;
		margin-bottom: 30px;
	}

	.pricing-card.featured:hover {
		transform: translateY(-10px);
	}
}

@media (max-width: 767.98px) {
	.pricing-price {
		font-size: 2rem;
	}

	.pricing-title {
		font-size: 1.3rem;
	}

	.testimonials-section {
		padding: 60px 0;
	}

	.testimonial-card {
		margin-bottom: 25px;
		padding: 30px 25px;
	}

	.testimonial-quote {
		font-size: 3rem;
		top: 10px;
		left: 15px;
	}

	.testimonial-author-img {
		width: 60px;
		height: 60px;
		margin-right: 15px;
	}

	.testimonial-author-img i {
		font-size: 1.5rem;
	}

	.testimonial-author-name {
		font-size: 1.1rem;
	}
}
/*--------------------------------------------------------------
# Pricing Section
--------------------------------------------------------------*/
.pricing {
	position: relative;
	overflow: hidden;
	padding: 120px 0;
}

.pricing-background-animation {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	opacity: 0.08;
	background: radial-gradient(
			circle at 30% 30%,
			rgba(211, 84, 0, 0.2) 0%,
			transparent 50%
		),
		radial-gradient(
			circle at 70% 70%,
			rgba(230, 126, 34, 0.2) 0%,
			transparent 50%
		);
	animation: pricingPulse 12s ease-in-out infinite;
}

@keyframes pricingPulse {
	0%,
	100% {
		opacity: 0.08;
	}
	50% {
		opacity: 0.15;
	}
}

.pricing .container {
	position: relative;
	z-index: 1;
}

.pricing-card {
	background: linear-gradient(
		135deg,
		var(--surface-color) 0%,
		rgba(211, 84, 0, 0.05) 100%
	);
	border-radius: 20px;
	padding: 40px 35px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
	position: relative;
	transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	height: 100%;
	border: 2px solid rgba(211, 84, 0, 0.2);
	overflow: hidden;
}

.pricing-card.featured {
	border: 2px solid #d35400;
	background: linear-gradient(
		135deg,
		rgba(211, 84, 0, 0.1) 0%,
		rgba(230, 126, 34, 0.1) 100%
	);
	transform: scale(1.05);
	z-index: 2;
}

.pricing-badge {
	position: absolute;
	top: 20px;
	right: -30px;
	background: linear-gradient(135deg, #d35400 0%, #e67e22 100%);
	color: white;
	padding: 5px 40px;
	font-size: 0.85rem;
	font-weight: 600;
	transform: rotate(45deg);
	box-shadow: 0 4px 15px rgba(211, 84, 0, 0.4);
}

.pricing-card:hover {
	transform: translateY(-10px) scale(1.02);
	box-shadow: 0 20px 50px rgba(211, 84, 0, 0.3);
	border-color: rgba(211, 84, 0, 0.5);
}

.pricing-card.featured:hover {
	transform: translateY(-10px) scale(1.07);
}

.pricing-header {
	text-align: center;
	margin-bottom: 30px;
	padding-bottom: 25px;
	border-bottom: 2px solid rgba(211, 84, 0, 0.2);
}

.pricing-header h3 {
	font-size: 1.8rem;
	font-weight: 600;
	color: var(--heading-color);
	margin-bottom: 15px;
}

.pricing-price {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 5px;
	margin-bottom: 10px;
}

.pricing-price .currency {
	font-size: 1.5rem;
	color: rgba(232, 232, 232, 0.8);
	font-weight: 500;
}

.pricing-price .amount {
	font-size: 3.5rem;
	font-weight: 700;
	background: linear-gradient(135deg, #e67e22 0%, #d35400 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	line-height: 1;
}

.pricing-price .period {
	font-size: 1rem;
	color: rgba(232, 232, 232, 0.6);
}

.pricing-description {
	color: rgba(232, 232, 232, 0.7);
	font-size: 0.95rem;
	margin: 0;
}

.pricing-features {
	margin-bottom: 30px;
}

.pricing-features ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.pricing-features ul li {
	padding: 12px 0;
	display: flex;
	align-items: center;
	color: rgba(232, 232, 232, 0.9);
	font-size: 1rem;
	transition: all 0.3s ease;
}

.pricing-features ul li:hover {
	color: var(--default-color);
	transform: translateX(5px);
}

.pricing-features ul li i {
	margin-right: 12px;
	font-size: 1.2rem;
}

.pricing-features ul li i.bi-check-circle-fill {
	color: #059652;
}

.pricing-features ul li i.bi-x-circle {
	color: rgba(232, 232, 232, 0.4);
}

.pricing-cta {
	text-align: center;
}

.btn-pricing {
	display: inline-block;
	padding: 14px 40px;
	background: linear-gradient(135deg, #d35400 0%, #c0392b 100%);
	color: white;
	border-radius: 50px;
	font-weight: 600;
	text-decoration: none;
	transition: all 0.3s ease;
	box-shadow: 0 4px 15px rgba(211, 84, 0, 0.4);
	border: none;
	width: 100%;
}

.btn-pricing:hover {
	background: linear-gradient(135deg, #e67e22 0%, #d35400 100%);
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(211, 84, 0, 0.6);
	color: white;
}

.pricing-comparison {
	background: rgba(29, 29, 46, 0.5);
	border-radius: 20px;
	padding: 40px;
	margin-top: 50px;
}

/* Override Bootstrap table styles to remove white background */
.table {
	--bs-table-bg: transparent;
	background-color: transparent !important;
	color: var(--default-color);
}

.table > :not(caption) > * > * {
	background-color: transparent !important;
	box-shadow: none !important;
}

.table tbody tr {
	background-color: transparent !important;
}

.table tbody td {
	background-color: transparent !important;
}

.table thead th {
	background-color: transparent !important;
}

.btn-cta-primary {
	display: inline-block;
	padding: 16px 50px;
	background: linear-gradient(135deg, #c800d3 0%, #c02ba0 100%);
	color: white;
	border-radius: 50px;
	font-weight: 700;
	font-size: 1.1rem;
	text-decoration: none;
	transition: all 0.3s ease;

	border: none;
}

.btn-cta-primary:hover {
	background: linear-gradient(135deg, #d922e6 0%, #ba00d3 100%);
	transform: translateY(-3px);
	box-shadow: 0 10px 35px rgba(211, 0, 186, 0.7);
	color: white;
}

.cta-note {
	margin-top: 15px;
	font-size: 0.9rem;
	color: rgba(232, 232, 232, 0.7);
	font-style: italic;
}

.pricing .pricing-item {
	background-color: var(--surface-color);
	padding: 60px 40px;
	box-shadow: 0 3px 20px -2px rgba(0, 0, 0, 0.1);
	height: 100%;
	position: relative;
	border-radius: 2rem;
}

.pricing h3 {
	font-weight: 600;
	margin-bottom: 15px;
	font-size: 20px;
}

.pricing h4 {
	font-size: 48px;
	color: var(--accent-color);
	font-family: var(--heading-font);
	font-weight: 400;
}

.pricing h4 sup {
	font-size: 28px;
}

.pricing h4 span {
	color: color-mix(in srgb, var(--default-color), transparent 60%);
	font-size: 18px;
}

.pricing ul {
	padding: 20px 0;
	list-style: none;
	color: color-mix(in srgb, var(--default-color), transparent 30%);
	text-align: left;
	line-height: 20px;
}

.pricing ul li {
	padding: 10px 0;
	display: flex;
	align-items: center;
}

.pricing ul i {
	color: #059652;
	font-size: 24px;
	padding-right: 3px;
}

.pricing ul .na {
	color: color-mix(in srgb, var(--default-color), transparent 60%);
}

.pricing ul .na i {
	color: color-mix(in srgb, var(--default-color), transparent 60%);
}

.pricing ul .na span {
	text-decoration: line-through;
}

.pricing .buy-btn {
	color: color-mix(in srgb, var(--default-color), transparent 40%);
	background-color: var(--background-color);
	display: inline-block;
	padding: 8px 35px 10px 35px;
	border-radius: 4px;
	border: 1px solid color-mix(in srgb, var(--default-color), transparent 60%);
	transition: none;
	font-size: 16px;
	font-weight: 500;
	font-family: var(--heading-font);
	transition: 0.3s;
}

.pricing .buy-btn:hover {
	background: var(--accent-color);
	border-color: var(--accent-color);
	color: var(--contrast-color);
}

.pricing .featured {
	z-index: 10;
}

.pricing .featured h3,
.pricing .featured h4,
.pricing .featured h4 span,
.pricing .featured ul,
.pricing .featured ul .na,
.pricing .featured ul i,
.pricing .featured ul .na i {
	color: var(--contrast-color);
}

.pricing .featured .buy-btn {
	background: var(--accent-color);
	color: var(--contrast-color);
	border-color: var(--contrast-color);
}

.pricing .featured .buy-btn:hover {
	background: color-mix(in srgb, var(--background-color), transparent 92%);
}

/*--------------------------------------------------------------
# Faq Section
--------------------------------------------------------------*/
.faq .faq-container {
	margin-top: 15px;
}

.faq .faq-container .faq-item {
	background-color: color-mix(in srgb, var(--default-color), transparent 96%);
	position: relative;
	padding: 20px;
	margin-bottom: 20px;
	overflow: hidden;
	transition: 0.3s;
	border-radius: 2rem;
}

.faq .faq-container .faq-item h3 {
	font-weight: 600;
	font-size: 18px;
	line-height: 24px;
	margin: 0 30px 0 32px;
	transition: 0.3s;
	cursor: pointer;
}

.faq .faq-container .faq-item h3 span {
	color: var(--accent-color);
	padding-right: 5px;
}

.faq .faq-container .faq-item h3:hover {
	color: var(--accent-color);
}

.faq .faq-container .faq-item .faq-content {
	display: grid;
	grid-template-rows: 0fr;
	transition: 0.3s ease-in-out;
	visibility: hidden;
	opacity: 0;
}

.faq .faq-container .faq-item .faq-content p {
	margin-bottom: 0;
	overflow: hidden;
}

.faq .faq-container .faq-item .faq-icon {
	position: absolute;
	top: 22px;
	left: 20px;
	font-size: 20px;
	line-height: 0;
	transition: 0.3s;
	color: var(--accent-color);
}

.faq .faq-container .faq-item .faq-toggle {
	position: absolute;
	top: 20px;
	right: 20px;
	font-size: 16px;
	line-height: 0;
	transition: 0.3s;
	cursor: pointer;
}

.faq .faq-container .faq-item .faq-toggle:hover {
	color: var(--accent-color);
}

.faq .faq-container .faq-active {
	background-color: var(--accent-color);
	transition: 0.3s;
}

.faq .faq-container .faq-active h3,
.faq .faq-container .faq-active h3:hover,
.faq .faq-container .faq-active .faq-toggle,
.faq .faq-container .faq-active .faq-icon,
.faq .faq-container .faq-active .faq-content {
	color: var(--contrast-color);
}

.faq .faq-container .faq-active .faq-content {
	grid-template-rows: 1fr;
	visibility: visible;
	opacity: 1;
	padding-top: 10px;
}

.faq .faq-container .faq-active .faq-toggle {
	transform: rotate(90deg);
}

/*--------------------------------------------------------------
# Contact Section
--------------------------------------------------------------*/
.contact .info-item {
	background: color-mix(in srgb, var(--default-color), transparent 96%);
	padding: 30px;
	border-radius: 2rem;
}

.contact .info-item i {
	font-size: 38px;
	line-height: 0;
	color: var(--accent-color);
}

.contact .info-item h3 {
	font-size: 20px;
	font-weight: 700;
	margin: 20px 0 10px 0;
}

.contact .info-item p {
	padding: 0;
	line-height: 24px;
	font-size: 14px;
	margin-bottom: 0;
}

.contact .php-email-form {
	background: color-mix(in srgb, var(--default-color), transparent 96%);
	padding: 30px;
	height: 100%;
	border-radius: 2rem;
}

.contact .php-email-form input[type='text'],
.contact .php-email-form input[type='email'],
.contact .php-email-form textarea {
	font-size: 14px;
	padding: 10px 15px;
	box-shadow: none;
	border-radius: 0;
	color: var(--default-color);
	background-color: color-mix(
		in srgb,
		var(--background-color),
		transparent 50%
	);
	border-color: color-mix(in srgb, var(--default-color), transparent 80%);
}

.contact .php-email-form input[type='text']:focus,
.contact .php-email-form input[type='email']:focus,
.contact .php-email-form textarea:focus {
	border-color: var(--accent-color);
}

.contact .php-email-form input[type='text']::placeholder,
.contact .php-email-form input[type='email']::placeholder,
.contact .php-email-form textarea::placeholder {
	color: color-mix(in srgb, var(--default-color), transparent 70%);
}

.contact .php-email-form button[type='submit'] {
	background: var(--accent-color);
	color: var(--contrast-color);
	border: 0;
	padding: 10px 30px;
	transition: 0.4s;
	border-radius: 4px;
}

.contact .php-email-form button[type='submit']:hover {
	background: color-mix(in srgb, var(--accent-color), transparent 20%);
}

#cookie-popup {
	position: fixed;
	bottom: 30px;
	left: 50%;
	transform: translateX(-50%) translateY(100px);
	background: linear-gradient(135deg, #2d2d2d 0%, #1a1a1a 100%);
	color: var(--default-color);
	border: 2px solid rgba(211, 84, 0, 0.4);
	padding: 25px 30px;
	font-family: var(--default-font);
	box-shadow:
		0 10px 40px rgba(0, 0, 0, 0.6),
		0 0 20px rgba(211, 84, 0, 0.2);
	border-radius: 20px;
	font-size: 15px;
	max-width: 600px;
	width: calc(100% - 40px);
	z-index: 99999;
	display: none;
	opacity: 0;
	visibility: hidden;
	transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
	backdrop-filter: blur(10px);
}

#cookie-popup[style*='display: flex'] {
	display: flex !important;
}

#cookie-popup.show {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}

#cookie-popup::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, #d35400 0%, #e67e22 50%, #d35400 100%);
	border-radius: 20px 20px 0 0;
}

#cookie-popup p {
	margin: 0;
	padding: 0;
	line-height: 1.6;
	color: rgba(232, 232, 232, 0.95);
}

#cookie-popup .popup-content {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	width: 100%;
	flex-wrap: wrap;
}

#cookie-popup .popup-message {
	flex: 1;
	min-width: 250px;
	display: flex;
	align-items: center;
	gap: 15px;
}

#cookie-popup .popup-message::before {
	content: '🍪';
	font-size: 28px;
	flex-shrink: 0;
	filter: drop-shadow(0 2px 4px rgba(211, 84, 0, 0.3));
}

#cookie-popup button {
	background: linear-gradient(135deg, #d35400 0%, #e67e22 100%);
	color: white;
	border: none;
	padding: 12px 30px;
	border-radius: 50px;
	cursor: pointer;
	font-size: 15px;
	font-weight: 600;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	box-shadow: 0 4px 15px rgba(211, 84, 0, 0.4);
	white-space: nowrap;
	flex-shrink: 0;
	position: relative;
	overflow: hidden;
}

#cookie-popup button::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.2);
	transform: translate(-50%, -50%);
	transition:
		width 0.6s ease,
		height 0.6s ease;
}

#cookie-popup button:hover::before {
	width: 300px;
	height: 300px;
}

#cookie-popup button:hover {
	background: linear-gradient(135deg, #e67e22 0%, #d35400 100%);
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(211, 84, 0, 0.6);
}

#cookie-popup button:active {
	transform: translateY(0);
}

#cookie-popup .popup-message a {
	color: #e67e22;
	text-decoration: none;
	font-weight: 600;
	transition: all 0.3s ease;
	border-bottom: 1px solid transparent;
}

#cookie-popup .popup-message a:hover {
	color: #d35400;
	border-bottom-color: #d35400;
}

@media (max-width: 768px) {
	#cookie-popup {
		bottom: 20px;
		left: 20px;
		right: 20px;
		width: auto;
		max-width: none;
		transform: translateY(100px);
		padding: 20px;
	}

	#cookie-popup.show {
		transform: translateY(0);
	}

	#cookie-popup .popup-content {
		flex-direction: column;
		align-items: stretch;
		gap: 15px;
	}

	#cookie-popup .popup-message {
		min-width: auto;
	}

	#cookie-popup button {
		width: 100%;
		padding: 14px 30px;
	}
}

.footer .copyright {
	padding: 25px 0;
	font-size: 15px;
	border-top: 1px solid rgba(256, 256, 256, 0.1);
}

.footer .copyright a {
	color: var(--light);
}

.footer .copyright {
	padding: 1.5rem 0;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	margin-top: 2rem;
}

.about_elem {
	margin-bottom: 2rem;
}

.swiper-slide {
	opacity: 0.4;
	transform: scale(0.92);
	transition: all 0.3s ease-in-out;
}

.swiper-slide-active {
	opacity: 1;
	transform: scale(1);
	z-index: 2;
}

.swiper-pagination-bullet {
	background-color: #888;
	opacity: 0.6;
	transition: all 0.3s ease;
}

.swiper-button-next,
.swiper-button-prev {
	background-color: rgba(255, 255, 255, 0);
	border: 1px solid var(--bg-color);
	color: var(--accent-color);
	width: 40px;
	height: 40px;
	border-radius: 50%;
	transition: all 0.3s ease;
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
	background-color: var(--bg-color);
	color: var(--accent-color);
}

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

/*--------------------------------------------------------------
# About Page Styles
---------------------------------------------------------------*/
.about-hero {
	position: relative;
	padding: 120px 0 80px;
	overflow: hidden;
}

.about-hero-background {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	opacity: 0.1;
	background: radial-gradient(
			circle at 20% 30%,
			rgba(211, 84, 0, 0.3) 0%,
			transparent 50%
		),
		radial-gradient(
			circle at 80% 70%,
			rgba(230, 126, 34, 0.3) 0%,
			transparent 50%
		);
	animation: aboutPulse 10s ease-in-out infinite;
}

@keyframes aboutPulse {
	0%,
	100% {
		opacity: 0.1;
	}
	50% {
		opacity: 0.2;
	}
}

.about-hero .container {
	position: relative;
	z-index: 1;
}

.about-hero h1 {
	font-size: 3.5rem;
	font-weight: 700;
	margin-bottom: 1.5rem;
	background: linear-gradient(135deg, #e622e3 0%, #d300cf 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.about-hero .lead {
	font-size: 1.3rem;
	line-height: 1.8;
	color: rgba(232, 232, 232, 0.9);
	margin-bottom: 3rem;
}

.hero-stats {
	display: flex;
	gap: 2rem;
	margin-top: 3rem;
	flex-wrap: wrap;
}

.stat-item {
	text-align: center;
	padding: 1.5rem;
	background: rgba(211, 84, 0, 0.1);
	border-radius: 15px;
	border: 2px solid rgba(211, 84, 0, 0.2);
	transition: all 0.3s ease;
	min-width: 150px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
}

.stat-item:hover {
	transform: translateY(-5px);
	border-color: rgba(211, 84, 0, 0.5);
	background: rgba(211, 84, 0, 0.15);
}

.stat-icon {
	width: 60px;
	height: 60px;
	background: linear-gradient(135deg, #d35400 0%, #e67e22 100%);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 5px 20px rgba(211, 84, 0, 0.4);
	transition: all 0.3s ease;
}

.stat-item:hover .stat-icon {
	transform: scale(1.1) rotate(5deg);
	box-shadow: 0 8px 30px rgba(211, 84, 0, 0.6);
}

.stat-icon i {
	font-size: 1.8rem;
	color: white;
}

.stat-number {
	font-size: 2.5rem;
	font-weight: 700;
	background: linear-gradient(135deg, #e67e22 0%, #d35400 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	line-height: 1;
	margin-bottom: 0.5rem;
}

.stat-label {
	font-size: 0.95rem;
	color: rgba(232, 232, 232, 0.9);
	font-weight: 500;
}

.hero-image-wrapper {
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
	transition: all 0.4s ease;
}

.hero-image-wrapper:hover {
	transform: scale(1.02);
	box-shadow: 0 25px 60px rgba(211, 84, 0, 0.4);
}

.hero-image-wrapper img {
	width: 100%;
	height: auto;
	display: block;
}

.mission-vision {
	padding: 100px 0;
}

.mission-card {
	background: linear-gradient(
		135deg,
		var(--surface-color) 0%,
		rgba(211, 0, 200, 0.05) 100%
	);
	border-radius: 20px;
	padding: 40px;
	height: 100%;
	border: 2px solid rgba(193, 0, 211, 0.2);
	transition: all 0.4s ease;
	position: relative;
	overflow: hidden;
}

.mission-card h3 {
	font-size: 1.8rem;
	color: var(--heading-color);
	margin-bottom: 20px;
	position: relative;
	z-index: 1;
}

.mission-card p {
	color: rgba(232, 232, 232, 0.9);
	line-height: 1.8;
	margin-bottom: 15px;
	position: relative;
	z-index: 1;
}

.value-card {
	background: linear-gradient(
		135deg,
		var(--surface-color) 0%,
		rgba(211, 84, 0, 0.05) 100%
	);
	border-radius: 15px;
	padding: 30px;
	height: 100%;
	border: 2px solid rgba(211, 84, 0, 0.2);
	transition: all 0.4s ease;
	text-align: center;
}

.value-card:hover {
	transform: translateY(-10px);
	border-color: rgba(211, 84, 0, 0.5);
	box-shadow: 0 15px 40px rgba(211, 84, 0, 0.3);
}

.value-icon {
	width: 70px;
	height: 70px;
	background: linear-gradient(135deg, #d35400 0%, #e67e22 100%);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 20px;
	transition: all 0.4s ease;
}

.value-card:hover .value-icon {
	transform: scale(1.15) rotate(360deg);
}

.value-icon i {
	font-size: 2rem;
	color: white;
}

.value-card h4 {
	font-size: 1.3rem;
	color: var(--heading-color);
	margin-bottom: 15px;
}

.value-card p {
	color: rgba(232, 232, 232, 0.8);
	line-height: 1.7;
	margin: 0;
}

.story {
	padding: 100px 0;
}

.story-image-wrapper {
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
	transition: all 0.4s ease;
}

.story-image-wrapper:hover {
	transform: scale(1.03);
	box-shadow: 0 20px 50px rgba(193, 0, 211, 0.4);
}

.story-image-wrapper img {
	width: 100%;
	height: auto;
	display: block;
}

.story h2 {
	font-size: 2.5rem;
	color: var(--heading-color);
	margin-bottom: 2rem;
	background: linear-gradient(135deg, #c222e6 0%, #d300cc 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.story-content p {
	font-size: 1.1rem;
	line-height: 1.9;
	color: rgba(232, 232, 232, 0.9);
	margin-bottom: 1.5rem;
}

.about-cta {
	padding: 80px 0;
	background: linear-gradient(
		135deg,
		rgba(211, 84, 0, 0.1) 0%,
		rgba(230, 126, 34, 0.1) 100%
	);
	border-top: 2px solid rgba(211, 84, 0, 0.2);
	border-bottom: 2px solid rgba(211, 84, 0, 0.2);
}

.about-cta h2 {
	font-size: 2.5rem;
	margin-bottom: 1rem;
	color: var(--heading-color);
}

.about-cta .lead {
	font-size: 1.2rem;
	color: rgba(232, 232, 232, 0.8);
	margin-bottom: 2rem;
}

/*--------------------------------------------------------------
# Contact Page Styles
---------------------------------------------------------------*/
.contact-hero {
	position: relative;
	padding: 120px 0 80px;
	overflow: hidden;
}

.contact-hero-background {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	opacity: 0.1;
	background: radial-gradient(
			circle at 30% 40%,
			rgba(211, 84, 0, 0.3) 0%,
			transparent 50%
		),
		radial-gradient(
			circle at 70% 60%,
			rgba(230, 126, 34, 0.3) 0%,
			transparent 50%
		);
	animation: contactPulse 12s ease-in-out infinite;
}

@keyframes contactPulse {
	0%,
	100% {
		opacity: 0.1;
	}
	50% {
		opacity: 0.2;
	}
}

.contact-hero .container {
	position: relative;
	z-index: 1;
}

.contact-hero h1 {
	font-size: 3.5rem;
	font-weight: 700;
	margin-bottom: 1.5rem;
	background: linear-gradient(135deg, #e622df 0%, #d300d3 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.contact-quick-info {
	margin-top: 3rem;
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.quick-info-item {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	padding: 1.5rem;
	background: rgba(211, 84, 0, 0.1);
	border-radius: 15px;
	border: 2px solid rgba(211, 84, 0, 0.2);
	transition: all 0.3s ease;
}

.quick-info-item:hover {
	transform: translateX(10px);
	border-color: rgba(211, 84, 0, 0.5);
	background: rgba(211, 84, 0, 0.15);
}

.quick-info-item i {
	font-size: 2rem;
	color: #d35400;
	min-width: 40px;
}

.quick-info-item strong {
	display: block;
	color: var(--heading-color);
	margin-bottom: 0.3rem;
}

.quick-info-item p {
	margin: 0;
	color: rgba(232, 232, 232, 0.8);
}

.contact-image-wrapper {
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
	transition: all 0.4s ease;
}

.contact-image-wrapper:hover {
	transform: scale(1.02);
	box-shadow: 0 25px 60px rgba(211, 84, 0, 0.4);
}

.contact-methods {
	padding: 100px 0;
}

.contact-method-card {
	background: linear-gradient(
		135deg,
		var(--surface-color) 0%,
		rgba(211, 84, 0, 0.05) 100%
	);
	border-radius: 20px;
	padding: 40px 30px;
	text-align: center;
	height: 100%;
	border: 2px solid rgba(211, 84, 0, 0.2);
	transition: all 0.4s ease;
}

.contact-method-card:hover {
	transform: translateY(-10px);
	border-color: rgba(211, 84, 0, 0.5);
	box-shadow: 0 20px 50px rgba(211, 84, 0, 0.3);
}

.method-icon {
	width: 90px;
	height: 90px;
	background: linear-gradient(135deg, #d35400 0%, #e67e22 100%);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 25px;
	box-shadow: 0 8px 25px rgba(211, 84, 0, 0.4);
	transition: all 0.4s ease;
}

.contact-method-card:hover .method-icon {
	transform: scale(1.15) rotate(360deg);
}

.method-icon i {
	font-size: 2.5rem;
	color: white;
}

.contact-method-card h4 {
	font-size: 1.5rem;
	color: var(--heading-color);
	margin-bottom: 10px;
}

.contact-method-card > p {
	color: rgba(232, 232, 232, 0.7);
	margin-bottom: 15px;
}

.method-link {
	display: inline-block;
	color: #e67e22;
	font-weight: 600;
	text-decoration: none;
	transition: all 0.3s ease;
	font-size: 1.1rem;
}

.method-link:hover {
	color: #d35400;
	transform: translateX(5px);
}

.method-note {
	margin-top: 15px;
	font-size: 0.9rem;
	color: rgba(232, 232, 232, 0.6);
	font-style: italic;
}

.contact-form-wrapper {
	background: linear-gradient(
		135deg,
		var(--surface-color) 0%,
		rgba(211, 0, 207, 0.05) 100%
	);
	border-radius: 20px;
	padding: 50px 40px;
	border: 2px solid rgba(190, 0, 211, 0.2);
	box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
}

.form-header h2 {
	font-size: 2.2rem;
	color: var(--heading-color);
	margin-bottom: 1rem;
	background: linear-gradient(135deg, #e622e6 0%, #d300d3 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.contact-form label {
	display: block;
	margin-bottom: 8px;
	color: var(--heading-color);
	font-weight: 500;
	font-size: 0.95rem;
}

.contact-form .form-control {
	background: rgba(29, 29, 46, 0.5);
	border: 2px solid rgba(211, 0, 211, 0.2);
	border-radius: 10px;
	padding: 12px 18px;
	color: var(--default-color);
	transition: all 0.3s ease;
}

.contact-form .form-control:focus {
	background: rgba(29, 29, 46, 0.7);
	border-color: #b000d3;
	box-shadow: 0 0 0 3px rgba(207, 0, 211, 0.2);
	color: var(--default-color);
}

.contact-form select.form-control {
	cursor: pointer;
}

.btn-submit {
	background: linear-gradient(135deg, #d300cf 0%, #af2bc0 100%);
	color: white;
	border: none;
	padding: 14px 50px;
	border-radius: 50px;
	font-weight: 600;
	font-size: 1.1rem;
	transition: all 0.3s ease;
	box-shadow: 0 6px 25px rgba(193, 0, 211, 0.5);
	cursor: pointer;
}

.btn-submit:hover {
	background: linear-gradient(135deg, #e622dc 0%, #cf00d3 100%);
	transform: translateY(-2px);
	box-shadow: 0 10px 35px rgba(204, 0, 211, 0.7);
}

/* New Contact Form Styles */
.contact-form-new {
	margin-top: 30px;
}

.form-field-group {
	margin-bottom: 25px;
}

.form-label-new {
	display: block;
	margin-bottom: 8px;
	color: var(--heading-color);
	font-weight: 500;
	font-size: 0.95rem;
}

.required-star {
	color: #d35400;
	margin-left: 3px;
}

.form-input-new,
.form-textarea-new {
	width: 100%;
	background: rgba(29, 29, 46, 0.5);
	border: 2px solid rgba(211, 84, 0, 0.2);
	border-radius: 10px;
	padding: 12px 18px;
	color: var(--default-color);
	transition: all 0.3s ease;
	font-size: 0.95rem;
	font-family: var(--default-font);
}

.form-input-new:focus,
.form-textarea-new:focus {
	outline: none;
	background: rgba(29, 29, 46, 0.7);
	border-color: #d35400;
	box-shadow: 0 0 0 3px rgba(211, 84, 0, 0.2);
	color: var(--default-color);
}

.form-input-new::placeholder,
.form-textarea-new::placeholder {
	color: rgba(232, 232, 232, 0.5);
}

.form-input-new.is-invalid,
.form-textarea-new.is-invalid {
	border-color: #df1529;
	background: rgba(223, 21, 41, 0.1);
}

.form-input-new.is-valid,
.form-textarea-new.is-valid {
	border-color: #059652;
}

.invalid-feedback {
	display: none;
	color: #df1529;
	font-size: 0.85rem;
	margin-top: 5px;
}

.form-input-new.is-invalid ~ .invalid-feedback,
.form-textarea-new.is-invalid ~ .invalid-feedback {
	display: block;
}

.form-textarea-new {
	resize: vertical;
	min-height: 120px;
}

.form-submit-button {
	background: linear-gradient(135deg, #d300cf 0%, #bb2bc0 100%);
	color: white;
	border: none;
	padding: 14px 50px;
	border-radius: 50px;
	font-weight: 600;
	font-size: 1.1rem;
	transition: all 0.3s ease;
	box-shadow: 0 6px 25px rgba(200, 0, 211, 0.5);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	justify-content: center;
}

.form-submit-button:hover {
	background: linear-gradient(135deg, #e622e3 0%, #d300c8 100%);
	transform: translateY(-2px);
	box-shadow: 0 10px 35px rgba(204, 0, 211, 0.7);
}

.form-submit-button:disabled {
	opacity: 0.7;
	cursor: not-allowed;
	transform: none;
}

.form-submit-button svg {
	transition: transform 0.3s ease;
}

.form-submit-button:hover svg {
	transform: translateX(3px);
}

.form-status {
	margin-top: 20px;
}

.form-status .loading {
	display: none;
	color: #3b82f6;
	font-weight: 600;
	text-align: center;
	padding: 15px;
	background: var(--surface-color);
	border-radius: 10px;
}

.form-status .loading:before {
	content: '';
	display: inline-block;
	border-radius: 50%;
	width: 24px;
	height: 24px;
	margin: 0 10px -6px 0;
	border: 3px solid var(--accent-color);
	border-top-color: var(--surface-color);
	animation: php-email-form-loading 1s linear infinite;
}

.form-status .error-message {
	display: none;
	color: #ffffff;
	background: #df1529;
	text-align: left;
	padding: 15px;
	margin-bottom: 24px;
	font-weight: 600;
	border-radius: 10px;
}

.form-status .sent-message {
	display: none;
	color: #ffffff;
	background: #059652;
	text-align: center;
	padding: 15px;
	margin-bottom: 24px;
	font-weight: 600;
	border-radius: 10px;
}

.office-location {
	padding: 100px 0;
}

.office-info {
	display: flex;
	flex-direction: column;
	gap: 2rem;
	margin-top: 2rem;
}

.office-item {
	display: flex;
	align-items: flex-start;
	gap: 1.5rem;
	padding: 1.5rem;
	background: rgba(211, 84, 0, 0.1);
	border-radius: 15px;
	border: 2px solid rgba(211, 84, 0, 0.2);
	transition: all 0.3s ease;
}

.office-item:hover {
	transform: translateX(10px);
	border-color: rgba(211, 84, 0, 0.5);
	background: rgba(211, 84, 0, 0.15);
}

.office-item i {
	font-size: 2rem;
	color: #d35400;
	min-width: 40px;
	margin-top: 5px;
}

.office-item h4 {
	color: var(--heading-color);
	margin-bottom: 0.5rem;
	font-size: 1.2rem;
}

.office-item p {
	color: rgba(232, 232, 232, 0.8);
	margin: 0;
	line-height: 1.6;
}

.map-wrapper {
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
	height: 400px;
	background: rgba(29, 29, 46, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	border: 2px solid rgba(211, 84, 0, 0.2);
}

.map-placeholder {
	text-align: center;
	color: rgba(232, 232, 232, 0.6);
}

.map-placeholder i {
	font-size: 4rem;
	color: #d35400;
	margin-bottom: 1rem;
}

.map-note {
	margin-top: 1rem;
	font-size: 0.9rem;
	color: rgba(232, 232, 232, 0.5);
}

.faq-quick-card {
	background: linear-gradient(
		135deg,
		var(--surface-color) 0%,
		rgba(211, 84, 0, 0.05) 100%
	);
	border-radius: 15px;
	padding: 30px;
	height: 100%;
	border: 2px solid rgba(211, 84, 0, 0.2);
	transition: all 0.4s ease;
	text-align: center;
}

.faq-quick-card:hover {
	transform: translateY(-10px);
	border-color: rgba(211, 84, 0, 0.5);
	box-shadow: 0 15px 40px rgba(211, 84, 0, 0.3);
}

.faq-quick-card i {
	font-size: 3rem;
	color: #d35400;
	margin-bottom: 20px;
	transition: all 0.3s ease;
}

.faq-quick-card:hover i {
	transform: scale(1.2) rotate(5deg);
}

.faq-quick-card h4 {
	color: var(--heading-color);
	margin-bottom: 15px;
	font-size: 1.2rem;
}

.faq-quick-card p {
	color: rgba(232, 232, 232, 0.8);
	line-height: 1.7;
	margin-bottom: 20px;
}

.faq-link {
	color: #e67e22;
	text-decoration: none;
	font-weight: 600;
	transition: all 0.3s ease;
}

.faq-link:hover {
	color: #d35400;
	transform: translateX(5px);
}

/*--------------------------------------------------------------
# FAQ Page Styles
---------------------------------------------------------------*/
.faq-hero {
	position: relative;
	padding: 120px 0 80px;
	overflow: hidden;
}

.faq-hero-background {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	opacity: 0.1;
	background: radial-gradient(
			circle at 25% 35%,
			rgba(211, 84, 0, 0.3) 0%,
			transparent 50%
		),
		radial-gradient(
			circle at 75% 65%,
			rgba(230, 126, 34, 0.3) 0%,
			transparent 50%
		);
	animation: faqPulse 11s ease-in-out infinite;
}

@keyframes faqPulse {
	0%,
	100% {
		opacity: 0.1;
	}
	50% {
		opacity: 0.2;
	}
}

.faq-hero .container {
	position: relative;
	z-index: 1;
}

.faq-hero h1 {
	font-size: 3.5rem;
	font-weight: 700;
	margin-bottom: 1.5rem;
	background: linear-gradient(135deg, #e67e22 0%, #d35400 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.faq-search-box {
	position: relative;
	margin-top: 2rem;
	max-width: 500px;
}

.faq-search-box input {
	width: 100%;
	padding: 15px 50px 15px 20px;
	background: rgba(29, 29, 46, 0.7);
	border: 2px solid rgba(211, 84, 0, 0.3);
	border-radius: 50px;
	color: var(--default-color);
	font-size: 1rem;
	transition: all 0.3s ease;
}

.faq-search-box input:focus {
	outline: none;
	border-color: #d35400;
	box-shadow: 0 0 0 3px rgba(211, 84, 0, 0.2);
	background: rgba(29, 29, 46, 0.9);
}

.faq-search-box i {
	position: absolute;
	right: 20px;
	top: 50%;
	transform: translateY(-50%);
	color: #d35400;
	font-size: 1.2rem;
}

.faq-image-wrapper {
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
	transition: all 0.4s ease;
}

.faq-image-wrapper:hover {
	transform: scale(1.02);
	box-shadow: 0 25px 60px rgba(211, 84, 0, 0.4);
}

.faq-categories {
	padding: 80px 0;
}

.faq-category-card {
	background: linear-gradient(
		135deg,
		var(--surface-color) 0%,
		rgba(211, 84, 0, 0.05) 100%
	);
	border-radius: 20px;
	padding: 40px 30px;
	text-align: center;
	height: 100%;
	border: 2px solid rgba(211, 84, 0, 0.2);
	transition: all 0.4s ease;
	cursor: pointer;
}

.faq-category-card:hover {
	transform: translateY(-10px);
	border-color: rgba(211, 84, 0, 0.5);
	box-shadow: 0 20px 50px rgba(211, 84, 0, 0.3);
}

.faq-category-card.active {
	border-color: #d35400;
	background: linear-gradient(
		135deg,
		rgba(211, 84, 0, 0.15) 0%,
		rgba(230, 126, 34, 0.15) 100%
	);
}

.faq-category-card i {
	font-size: 3.5rem;
	color: #d35400;
	margin-bottom: 20px;
	transition: all 0.3s ease;
}

.faq-category-card:hover i {
	transform: scale(1.2) rotate(10deg);
}

.faq-category-card h4 {
	color: var(--heading-color);
	margin-bottom: 10px;
	font-size: 1.3rem;
}

.faq-category-card p {
	color: rgba(232, 232, 232, 0.7);
	margin: 0;
	font-size: 0.9rem;
}

.faq-accordion {
	padding: 100px 0;
}

.faq-category-section {
	margin-bottom: 60px;
}

.faq-category-title {
	font-size: 2rem;
	color: var(--heading-color);
	margin-bottom: 30px;
	padding-bottom: 15px;
	border-bottom: 3px solid rgba(211, 84, 0, 0.3);
	background: linear-gradient(135deg, #e67e22 0%, #d35400 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.accordion-item {
	background: linear-gradient(
		135deg,
		var(--surface-color) 0%,
		rgba(211, 84, 0, 0.05) 100%
	);
	border: 2px solid rgba(211, 84, 0, 0.2);
	border-radius: 15px;
	margin-bottom: 15px;
	overflow: hidden;
	transition: all 0.3s ease;
}

.accordion-item:hover {
	border-color: rgba(211, 84, 0, 0.4);
}

.accordion-button {
	background: transparent;
	border: none;
	color: var(--heading-color);
	font-weight: 600;
	font-size: 1.1rem;
	padding: 20px 25px;
	transition: all 0.3s ease;
}

.accordion-button:not(.collapsed) {
	background: rgba(211, 84, 0, 0.1);
	color: #e67e22;
	box-shadow: none;
}

.accordion-button:focus {
	box-shadow: 0 0 0 3px rgba(211, 84, 0, 0.2);
	border-color: transparent;
}

.accordion-button::after {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236c5ce7'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
	transition: transform 0.3s ease;
}

.accordion-button:not(.collapsed)::after {
	transform: rotate(180deg);
}

.accordion-body {
	padding: 25px;
	color: rgba(232, 232, 232, 0.9);
	line-height: 1.8;
	font-size: 1rem;
	background: rgba(29, 29, 46, 0.3);
}

.faq-contact {
	padding: 80px 0;
	background: linear-gradient(
		135deg,
		rgba(211, 84, 0, 0.1) 0%,
		rgba(230, 126, 34, 0.1) 100%
	);
	border-top: 2px solid rgba(211, 84, 0, 0.2);
}

.faq-contact h2 {
	font-size: 2.5rem;
	margin-bottom: 1rem;
	color: var(--heading-color);
}

.faq-contact .lead {
	font-size: 1.2rem;
	color: rgba(232, 232, 232, 0.8);
	margin-bottom: 2rem;
}

/* Responsive Styles for New Pages */
@media (max-width: 991.98px) {
	.about-hero h1,
	.contact-hero h1,
	.faq-hero h1 {
		font-size: 2.5rem;
	}

	.hero-stats {
		gap: 1rem;
	}

	.stat-item {
		min-width: 120px;
		padding: 1rem;
	}

	.stat-icon {
		width: 50px;
		height: 50px;
	}

	.stat-icon i {
		font-size: 1.5rem;
	}

	.stat-number {
		font-size: 2rem;
	}

	.mission-card,
	.value-card,
	.contact-method-card,
	.faq-category-card {
		margin-bottom: 2rem;
	}
}

@media (max-width: 767.98px) {
	.about-hero,
	.contact-hero,
	.faq-hero {
		padding: 80px 0 60px;
	}

	.about-hero h1,
	.contact-hero h1,
	.faq-hero h1 {
		font-size: 2rem;
	}

	.about-hero .lead,
	.contact-hero .lead,
	.faq-hero .lead {
		font-size: 1.1rem;
	}

	.hero-stats {
		flex-direction: column;
		gap: 1rem;
	}

	.stat-item {
		width: 100%;
	}

	.mission-vision,
	.contact-methods,
	.faq-accordion {
		padding: 60px 0;
	}

	.contact-form-wrapper {
		padding: 30px 20px;
	}

	.form-header h2 {
		font-size: 1.8rem;
	}

	.faq-search-box {
		max-width: 100%;
	}

	.faq-category-title {
		font-size: 1.5rem;
	}

	.accordion-button {
		font-size: 1rem;
		padding: 15px 20px;
	}

	.story h2 {
		font-size: 2rem;
	}

	.about-cta h2,
	.faq-contact h2 {
		font-size: 2rem;
	}
}

/*--------------------------------------------------------------
# Policy Pages Styles (Cookie, Privacy, Terms)
---------------------------------------------------------------*/
.policy-hero {
	position: relative;
	padding: 120px 0 80px;
	overflow: hidden;
}

.policy-hero-background {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	opacity: 0.1;
	background: radial-gradient(
			circle at 20% 30%,
			rgba(211, 84, 0, 0.3) 0%,
			transparent 50%
		),
		radial-gradient(
			circle at 80% 70%,
			rgba(230, 126, 34, 0.3) 0%,
			transparent 50%
		);
	animation: policyPulse 10s ease-in-out infinite;
}

@keyframes policyPulse {
	0%,
	100% {
		opacity: 0.1;
	}
	50% {
		opacity: 0.2;
	}
}

.policy-hero .container {
	position: relative;
	z-index: 1;
}

.policy-hero h1 {
	font-size: 3.5rem;
	font-weight: 700;
	margin-bottom: 1.5rem;
	background: linear-gradient(135deg, #e322e6 0%, #d300be 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.policy-hero .lead {
	font-size: 1.3rem;
	line-height: 1.8;
	color: rgba(232, 232, 232, 0.9);
	margin-bottom: 2rem;
}

.policy-meta {
	display: flex;
	gap: 2rem;
	flex-wrap: wrap;
	margin-top: 2rem;
}

.meta-item {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	color: rgba(232, 232, 232, 0.7);
	font-size: 0.95rem;
}

.meta-item i {
	color: #d35400;
	font-size: 1.2rem;
}

.policy-image-wrapper {
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
	transition: all 0.4s ease;
}

.policy-image-wrapper:hover {
	transform: scale(1.02);
	box-shadow: 0 25px 60px rgba(211, 84, 0, 0.4);
}

.policy-content-card {
	background: linear-gradient(
		135deg,
		var(--surface-color) 0%,
		rgba(211, 84, 0, 0.05) 100%
	);
	border-radius: 20px;
	padding: 50px 40px;
	border: 2px solid rgba(211, 84, 0, 0.2);
	box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
	margin-bottom: 2rem;
}

.content-icon {
	width: 80px;
	height: 80px;
	background: linear-gradient(135deg, #d300cf 0%, #e622d6 100%);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 25px;
	box-shadow: 0 8px 25px rgba(193, 0, 211, 0.4);
}

.content-icon i {
	font-size: 2.5rem;
	color: white;
}

.policy-content-card h2 {
	font-size: 2.2rem;
	color: var(--heading-color);
	margin-bottom: 20px;
	background: linear-gradient(135deg, #c922e6 0%, #cf00d3 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.policy-content-card h3 {
	font-size: 1.5rem;
	color: var(--heading-color);
	margin-top: 30px;
	margin-bottom: 15px;
}

.policy-content-card p {
	color: rgba(232, 232, 232, 0.9);
	line-height: 1.8;
	margin-bottom: 15px;
}

.policy-content-card ul {
	color: rgba(232, 232, 232, 0.9);
	line-height: 1.8;
	margin-bottom: 20px;
	padding-left: 25px;
}

.policy-content-card li {
	margin-bottom: 10px;
}

.company-details-box {
	background: rgba(211, 84, 0, 0.1);
	border-radius: 15px;
	padding: 25px;
	margin-top: 20px;
	border: 2px solid rgba(211, 84, 0, 0.2);
}

.company-details-box p {
	margin-bottom: 10px;
	color: rgba(232, 232, 232, 0.9);
}

.company-details-box a {
	color: #e67e22;
	text-decoration: none;
	transition: all 0.3s ease;
}

.company-details-box a:hover {
	color: #d35400;
}

/* Cookie Types */
.cookie-reason-card,
.data-type-card,
.usage-reason-card,
.service-term-card {
	background: linear-gradient(
		135deg,
		var(--surface-color) 0%,
		rgba(211, 84, 0, 0.05) 100%
	);
	border-radius: 15px;
	padding: 30px;
	height: 100%;
	border: 2px solid rgba(211, 84, 0, 0.2);
	transition: all 0.4s ease;
}

.cookie-reason-card:hover,
.data-type-card:hover,
.usage-reason-card:hover,
.service-term-card:hover {
	transform: translateY(-10px);
	border-color: rgba(211, 84, 0, 0.5);
	box-shadow: 0 15px 40px rgba(211, 84, 0, 0.3);
}

.reason-icon,
.data-icon,
.term-icon {
	width: 70px;
	height: 70px;
	background: linear-gradient(135deg, #d35400 0%, #e67e22 100%);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 20px;
	transition: all 0.4s ease;
}

.cookie-reason-card:hover .reason-icon,
.data-type-card:hover .data-icon,
.service-term-card:hover .term-icon {
	transform: scale(1.15) rotate(360deg);
}

.reason-icon i,
.data-icon i,
.term-icon i {
	font-size: 2rem;
	color: white;
}

.cookie-reason-card h4,
.data-type-card h4,
.usage-reason-card h4,
.service-term-card h4 {
	font-size: 1.3rem;
	color: var(--heading-color);
	margin-bottom: 15px;
}

.cookie-reason-card p,
.data-type-card p,
.usage-reason-card p,
.service-term-card p {
	color: rgba(232, 232, 232, 0.8);
	line-height: 1.7;
	margin-bottom: 15px;
}

.cookie-reason-card ul,
.data-type-card ul {
	color: rgba(232, 232, 232, 0.8);
	line-height: 1.7;
	margin: 0;
	padding-left: 20px;
}

.cookie-reason-card li,
.data-type-card li {
	margin-bottom: 8px;
}

/* Cookie Type Cards */
.cookie-type-card {
	background: linear-gradient(
		135deg,
		var(--surface-color) 0%,
		rgba(211, 84, 0, 0.05) 100%
	);
	border-radius: 20px;
	padding: 35px;
	height: 100%;
	border: 2px solid rgba(211, 84, 0, 0.2);
	transition: all 0.4s ease;
}

.cookie-type-card:hover {
	transform: translateY(-10px);
	border-color: rgba(211, 84, 0, 0.5);
	box-shadow: 0 20px 50px rgba(211, 84, 0, 0.3);
}

.type-header {
	display: flex;
	align-items: center;
	gap: 20px;
	margin-bottom: 20px;
}

.type-icon {
	width: 60px;
	height: 60px;
	background: linear-gradient(135deg, #d35400 0%, #e67e22 100%);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.type-icon i {
	font-size: 1.8rem;
	color: white;
}

.type-header h3 {
	font-size: 1.5rem;
	color: var(--heading-color);
	margin: 0;
}

.type-badge {
	display: inline-block;
	padding: 5px 12px;
	border-radius: 20px;
	font-size: 0.85rem;
	font-weight: 600;
	background: rgba(211, 84, 0, 0.2);
	color: #e67e22;
	margin-top: 5px;
}

.type-badge.optional {
	background: rgba(230, 126, 34, 0.2);
	color: #d35400;
}

.cookie-list {
	list-style: none;
	padding: 0;
	margin: 20px 0;
}

.cookie-list li {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 10px;
	color: rgba(232, 232, 232, 0.8);
}

.cookie-list i {
	color: #d35400;
	font-size: 1.2rem;
}

.cookie-duration {
	margin-top: 20px;
	padding-top: 20px;
	border-top: 2px solid rgba(211, 84, 0, 0.2);
	color: rgba(232, 232, 232, 0.7);
	font-size: 0.95rem;
}

.browser-links ul {
	list-style: none;
	padding: 0;
	margin-top: 15px;
}

.browser-links li {
	margin-bottom: 10px;
}

.browser-links a {
	color: #e67e22;
	text-decoration: none;
	transition: all 0.3s ease;
}

.browser-links a:hover {
	color: #d35400;
	text-decoration: underline;
}

.duration-list,
.legal-basis-list,
.obligations-list,
.prohibited-list,
.ip-restrictions,
.liability-list,
.retention-list {
	list-style: none;
	padding: 0;
	margin: 20px 0;
}

.duration-list li,
.legal-basis-list li,
.obligations-list li,
.prohibited-list li,
.ip-restrictions li,
.liability-list li,
.retention-list li {
	padding: 15px;
	margin-bottom: 15px;
	background: rgba(183, 0, 211, 0.1);
	border-radius: 10px;
	border-left: 4px solid #d300c5;
	color: rgba(232, 232, 232, 0.9);
	line-height: 1.7;
}

.obligations-list i,
.prohibited-list i {
	color: #d35400;
	margin-right: 10px;
	font-size: 1.2rem;
}

.ip-restrictions i {
	color: #e67e22;
	margin-right: 10px;
}

.important-note {
	background: rgba(211, 84, 0, 0.15);
	border-left: 4px solid #d35400;
	padding: 15px 20px;
	border-radius: 10px;
	margin-top: 20px;
	color: rgba(232, 232, 232, 0.9);
}

.last-updated {
	margin-top: 30px;
	padding-top: 20px;
	border-top: 2px solid rgba(211, 84, 0, 0.2);
	color: rgba(232, 232, 232, 0.7);
	font-size: 0.95rem;
}

.sharing-list {
	margin: 20px 0;
}

.sharing-item {
	padding: 20px;
	margin-bottom: 20px;
	background: rgba(211, 84, 0, 0.1);
	border-radius: 15px;
	border: 2px solid rgba(211, 84, 0, 0.2);
}

.sharing-item h4 {
	color: var(--heading-color);
	margin-bottom: 10px;
	display: flex;
	align-items: center;
	gap: 10px;
}

.sharing-item h4 i {
	color: #d35400;
}

.sharing-item p {
	color: rgba(232, 232, 232, 0.8);
	margin: 0;
	line-height: 1.7;
}

.security-measures {
	list-style: none;
	padding: 0;
	margin: 20px 0;
}

.security-measures li {
	display: flex;
	align-items: center;
	gap: 15px;
	padding: 15px;
	margin-bottom: 10px;
	background: rgba(211, 84, 0, 0.1);
	border-radius: 10px;
	color: rgba(232, 232, 232, 0.9);
}

.security-measures i {
	color: #d35400;
	font-size: 1.3rem;
}

.right-card {
	background: linear-gradient(
		135deg,
		var(--surface-color) 0%,
		rgba(211, 84, 0, 0.05) 100%
	);
	border-radius: 15px;
	padding: 30px;
	height: 100%;
	border: 2px solid rgba(211, 84, 0, 0.2);
	transition: all 0.4s ease;
	text-align: center;
}

.right-card:hover {
	transform: translateY(-10px);
	border-color: rgba(211, 84, 0, 0.5);
	box-shadow: 0 15px 40px rgba(211, 84, 0, 0.3);
}

.right-icon {
	width: 70px;
	height: 70px;
	background: linear-gradient(135deg, #d35400 0%, #e67e22 100%);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 20px;
	transition: all 0.4s ease;
}

.right-card:hover .right-icon {
	transform: scale(1.15) rotate(360deg);
}

.right-icon i {
	font-size: 2rem;
	color: white;
}

.right-card h4 {
	font-size: 1.3rem;
	color: var(--heading-color);
	margin-bottom: 15px;
}

.right-card p {
	color: rgba(232, 232, 232, 0.8);
	line-height: 1.7;
	margin: 0;
}

.policy-contact {
	padding: 80px 0;
	background: linear-gradient(
		135deg,
		rgba(211, 84, 0, 0.1) 0%,
		rgba(230, 126, 34, 0.1) 100%
	);
	border-top: 2px solid rgba(211, 84, 0, 0.2);
}

.policy-contact h2 {
	font-size: 2.5rem;
	margin-bottom: 1rem;
	color: var(--heading-color);
}

.policy-contact .lead {
	font-size: 1.2rem;
	color: rgba(232, 232, 232, 0.8);
	margin-bottom: 2rem;
}

.contact-info-box {
	border-radius: 15px;
	padding: 30px;
	margin: 30px 0;
	border: 2px solid #d300d3;
}

.contact-info-box p {
	margin-bottom: 15px;
	color: rgba(232, 232, 232, 0.9);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	flex-wrap: wrap;
}

.contact-info-box i {
	color: #d300d3;
	font-size: 1.2rem;
}

.contact-info-box a {
	color: #d300d3;
	text-decoration: none;
	transition: all 0.3s ease;
}

.contact-info-box a:hover {
	color: #d300d3;
	text-decoration: underline;
}

/*--------------------------------------------------------------
# Thanks Page Styles
---------------------------------------------------------------*/
.thanks-hero {
	position: relative;
	padding: 120px 0 80px;
	overflow: hidden;
	text-align: center;
}

.thanks-hero-background {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	opacity: 0.1;
	background: radial-gradient(
		circle at 50% 50%,
		rgba(211, 84, 0, 0.4) 0%,
		transparent 70%
	);
	animation: thanksPulse 8s ease-in-out infinite;
}

@keyframes thanksPulse {
	0%,
	100% {
		opacity: 0.1;
		transform: scale(1);
	}
	50% {
		opacity: 0.2;
		transform: scale(1.1);
	}
}

.thanks-hero .container {
	position: relative;
	z-index: 1;
}

.thanks-icon-wrapper {
	margin-bottom: 30px;
}

.thanks-icon {
	width: 120px;
	height: 120px;
	background: linear-gradient(135deg, #d35400 0%, #e67e22 100%);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto;
	box-shadow: 0 15px 50px rgba(211, 84, 0, 0.5);
	animation: thanksIconPulse 2s ease-in-out infinite;
}

@keyframes thanksIconPulse {
	0%,
	100% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.05);
	}
}

.thanks-icon i {
	font-size: 4rem;
	color: white;
}

.thanks-hero h1 {
	font-size: 3.5rem;
	font-weight: 700;
	margin-bottom: 1.5rem;
	background: linear-gradient(135deg, #e622e6 0%, #e622e6 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.thanks-meta {
	margin-top: 2rem;
	display: flex;
	justify-content: center;
	gap: 2rem;
	flex-wrap: wrap;
}

.next-step-card {
	background: linear-gradient(
		135deg,
		var(--surface-color) 0%,
		rgba(211, 84, 0, 0.05) 100%
	);
	border-radius: 20px;
	padding: 40px 30px;
	height: 100%;
	border: 2px solid rgba(211, 84, 0, 0.2);
	transition: all 0.4s ease;
	text-align: center;
	position: relative;
}

.next-step-card:hover {
	transform: translateY(-10px);
	border-color: rgba(211, 84, 0, 0.5);
	box-shadow: 0 20px 50px rgba(211, 84, 0, 0.3);
}

.step-number {
	position: absolute;
	top: -15px;
	left: 50%;
	transform: translateX(-50%);
	width: 40px;
	height: 40px;
	background: linear-gradient(135deg, #d35400 0%, #e67e22 100%);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	font-weight: 700;
	font-size: 1.2rem;
	box-shadow: 0 5px 15px rgba(211, 84, 0, 0.4);
}

.step-icon {
	width: 80px;
	height: 80px;
	background: linear-gradient(135deg, #d35400 0%, #e67e22 100%);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 20px auto 25px;
	transition: all 0.4s ease;
}

.next-step-card:hover .step-icon {
	transform: scale(1.15) rotate(360deg);
}

.step-icon i {
	font-size: 2.5rem;
	color: white;
}

.next-step-card h4 {
	font-size: 1.4rem;
	color: var(--heading-color);
	margin-bottom: 15px;
}

.next-step-card p {
	color: rgba(232, 232, 232, 0.8);
	line-height: 1.7;
	margin: 0;
}

.wait-content-card {
	background: linear-gradient(
		135deg,
		var(--surface-color) 0%,
		rgba(211, 84, 0, 0.05) 100%
	);
	border-radius: 20px;
	padding: 50px 40px;
	border: 2px solid rgba(211, 84, 0, 0.2);
	box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
}

.wait-content-card h2 {
	font-size: 2.2rem;
	color: var(--heading-color);
	margin-bottom: 20px;
	background: linear-gradient(135deg, #e67e22 0%, #d35400 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.explore-options {
	margin-top: 30px;
}

.explore-item {
	display: flex;
	align-items: flex-start;
	gap: 20px;
	padding: 25px;
	margin-bottom: 20px;
	background: rgba(211, 84, 0, 0.1);
	border-radius: 15px;
	border: 2px solid rgba(211, 84, 0, 0.2);
	transition: all 0.3s ease;
}

.explore-item:hover {
	transform: translateX(10px);
	border-color: rgba(211, 84, 0, 0.5);
	background: rgba(211, 84, 0, 0.15);
}

.explore-item i {
	font-size: 2.5rem;
	color: #d35400;
	min-width: 50px;
	margin-top: 5px;
}

.explore-item h4 {
	color: var(--heading-color);
	margin-bottom: 10px;
	font-size: 1.2rem;
}

.explore-item p {
	color: rgba(232, 232, 232, 0.8);
	line-height: 1.7;
	margin-bottom: 10px;
}

.explore-link {
	color: #e67e22;
	text-decoration: none;
	font-weight: 600;
	transition: all 0.3s ease;
}

.explore-link:hover {
	color: #d35400;
	transform: translateX(5px);
}

.contact-quick-links {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin: 30px 0;
	max-width: 500px;
	margin-left: auto;
	margin-right: auto;
}

.contact-link-item {
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 20px;
	background: rgba(211, 84, 0, 0.1);
	border-radius: 15px;
	border: 2px solid rgba(211, 84, 0, 0.2);
	transition: all 0.3s ease;
}

.contact-link-item:hover {
	transform: translateX(10px);
	border-color: rgba(211, 84, 0, 0.5);
	background: rgba(211, 84, 0, 0.15);
}

.contact-link-item i {
	font-size: 2rem;
	color: #d35400;
	min-width: 40px;
}

.contact-link-item strong {
	display: block;
	color: var(--heading-color);
	margin-bottom: 5px;
}

.contact-link-item p {
	margin: 0;
	color: rgba(232, 232, 232, 0.8);
}

.contact-link-item a {
	color: #e67e22;
	text-decoration: none;
	transition: all 0.3s ease;
}

.contact-link-item a:hover {
	color: #d35400;
	text-decoration: underline;
}

.contact-info-thanks {
	padding: 100px 0;
}

.contact-info-thanks h2 {
	font-size: 2.5rem;
	color: var(--heading-color);
	margin-bottom: 1rem;
	background: linear-gradient(135deg, #e67e22 0%, #d35400 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.contact-info-thanks .lead {
	font-size: 1.2rem;
	color: rgba(232, 232, 232, 0.8);
	margin-bottom: 2rem;
}

.thanks-cta {
	padding: 80px 0;
	background: linear-gradient(
		135deg,
		rgba(211, 84, 0, 0.1) 0%,
		rgba(230, 126, 34, 0.1) 100%
	);
	border-top: 2px solid rgba(211, 84, 0, 0.2);
}

.thanks-cta h2 {
	font-size: 2.5rem;
	margin-bottom: 1rem;
	color: var(--heading-color);
}

.thanks-cta .lead {
	font-size: 1.2rem;
	color: rgba(232, 232, 232, 0.8);
	margin-bottom: 2rem;
}

.cta-buttons {
	display: flex;
	gap: 20px;
	justify-content: center;
	flex-wrap: wrap;
}

.btn-cta-secondary {
	background: transparent;
	color: #e67e22;
	border: 2px solid #d35400;
	padding: 14px 50px;
	border-radius: 50px;
	font-weight: 600;
	font-size: 1.1rem;
	transition: all 0.3s ease;
	text-decoration: none;
	display: inline-block;
}

.btn-cta-secondary:hover {
	background: rgba(211, 84, 0, 0.1);
	border-color: #e67e22;
	color: #e67e22;
	transform: translateY(-2px);
}

/* Responsive Styles for Policy Pages */
@media (max-width: 991.98px) {
	.policy-hero h1,
	.thanks-hero h1 {
		font-size: 2.5rem;
	}

	.policy-content-card {
		padding: 35px 25px;
	}
}

@media (max-width: 767.98px) {
	.policy-hero,
	.thanks-hero {
		padding: 80px 0 60px;
	}

	.policy-hero h1,
	.thanks-hero h1 {
		font-size: 2rem;
	}

	.policy-hero .lead,
	.thanks-hero .lead {
		font-size: 1.1rem;
	}

	.policy-content-card {
		padding: 25px 20px;
	}

	.policy-content-card h2 {
		font-size: 1.8rem;
	}

	.thanks-icon {
		width: 100px;
		height: 100px;
	}

	.thanks-icon i {
		font-size: 3rem;
	}

	.cta-buttons {
		flex-direction: column;
		align-items: center;
	}

	.btn-cta-primary,
	.btn-cta-secondary {
		width: 100%;
		max-width: 300px;
	}

	.wait-content-card {
		padding: 30px 20px;
	}

	.explore-item {
		flex-direction: column;
		text-align: center;
	}

	.contact-info-thanks h2 {
		font-size: 2rem;
	}

	.contact-info-thanks .lead {
		font-size: 1.1rem;
	}

	.contact-quick-links {
		max-width: 100%;
	}
}