html {
	scroll-behavior: smooth;
}

:root {
	--bg: #FFFFFF;
	--primary: #381E72;
	--secondary: #F6F4FB;
	--accent: #152551;
}

body {
	background: var(--bg);
	color: #333;
	font-family: sans-serif;
	padding-top: 4rem;
}

html {
	scroll-behavior: smooth;
}

.text-primary {
	color: var(--primary);
}

.bg-primary {
	background-color: var(--primary);
}

.bg-secondary {
	background-color: var(--secondary);
}

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

.btn-primary {
	padding: 0.75rem 1.5rem;
	border-radius: 0.5rem;
	background-color: var(--primary);
	color: #fff;
	transition: background-color 0.3s;
}

	.btn-primary:hover {
		background-color: var(--accent);
	}

.blur-bg {
	background-color: rgba(255,255,255,0.2);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

@keyframes fadeSlideUp {
	0% {
		opacity: 0;
		transform: translateY(20px);
	}

	100% {
		opacity: 1;
		transform: translateY(0);
	}
}
/* fadeSlideUp now only used outside hero to avoid jank */

.perspective-1000 {
	perspective: 1000px;
}

.transform-style-preserve-3d {
	transform-style: preserve-3d;
	transition: transform 0.6s;
}

.backface-hidden {
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

.rotate-y-180 {
	transform: rotateY(180deg);
}

.group:hover .transform-style-preserve-3d {
	transform: rotateY(180deg);
}

/* FAQ inner height uniform */
.faq-inner {
	min-height: 12rem;
	overflow: visible;
}

/* Marquee */
.marquee {
	overflow: hidden;
}

.marquee-content {
	display: flex;
	animation: marquee 20s linear infinite;
	will-change: transform;
}

@keyframes marquee {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(-50%);
	}
}

[x-cloak] {
	display: none;
}

/* Hero blur hint */
.hero-blur-will-change {
	will-change: backdrop-filter;
}

/* at the bottom of style.css */

.border-primary {
	border-color: var(--primary);
}

.border-solid {
	border-style: solid;
}

/* Modal Background */
.modal {
	display: flex;
	justify-content: center;
	align-items: center;
	position: fixed;
	z-index: 1000;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.7); /* Slightly darker for better contrast */
}

/* Modal Content */
.modal-content {
	background-color: white;
	padding: 30px;
	border-radius: 8px; /* More rounded corners */
	text-align: center;
	position: relative;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); /* Soft shadow */
	max-width: 500px; /* Limit the width for better readability */
	margin: 20px; /* Margin to prevent edges touching the viewport */
}

/* Title Style */
#modal-title {
	font-size: 24px; /* Larger font for title */
	margin-bottom: 15px; /* Space below the title */
	color: #333; /* Darker color for title */
}

/* Message Style */
#modal-message {
	font-size: 16px; /* Standard font size for messages */
	color: #555; /* Slightly lighter color for text */
	line-height: 1.6; /* Improve line spacing */
}

/* Close Button */
.close-button {
	position: absolute;
	right: 15px;
	top: 15px;
	cursor: pointer;
	font-size: 20px;
	color: #888; /* Light gray color for close button */
	transition: color 0.3s; /* Smooth transition for hover effect */
}

	.close-button:hover {
		color: #d9534f; /* Change color on hover for visibility */
	}

/* Responsive Design */
@media (max-width: 600px) {
	.modal-content {
		width: 90%; /* Use a smaller width on small screens */
		padding: 20px; /* Adjust padding for mobile */
	}
}