:root {
	--background: 0 0% 100%;
	--foreground: 215 25% 27%;
	--card: 0 0% 100%;
	--card-foreground: 215 25% 27%;
	--popover: 0 0% 100%;
	--popover-foreground: 215 25% 27%;
	--primary: 211 84% 35%;
	--primary-foreground: 0 0% 100%;
	--secondary: 210 40% 96.1%;
	--secondary-foreground: 215 25% 27%;
	--muted: 210 40% 96.1%;
	--muted-foreground: 215 16% 47%;
	--accent: 14 90% 60%;
	--accent-foreground: 0 0% 100%;
	--destructive: 0 84.2% 60.2%;
	--destructive-foreground: 0 0% 100%;
	--border: 214 31% 91%;
	--input: 214 31% 91%;
	--ring: 211 84% 35%;
	--radius: 0.5rem;
	--ocean-blue: 211 84% 35%;
	--ocean-blue-dark: 211 84% 25%;
	--ocean-blue-light: 211 60% 90%;
	--coral: 14 90% 60%;
	--coral-light: 14 90% 95%;
	--slate: 215 25% 27%;
	--slate-light: 215 16% 47%;
	--gradient-hero: linear-gradient(
		135deg,
		hsl(211 84% 35%) 0%,
		hsl(211 84% 25%) 100%
	);
	--gradient-overlay: linear-gradient(
		180deg,
		rgba(0, 0, 0, 0.4) 0%,
		rgba(0, 0, 0, 0.6) 100%
	);
	--shadow-card: 0 2px 8px rgba(0, 0, 0, 0.08);
	--shadow-elevated: 0 4px 16px rgba(0, 0, 0, 0.12);
	--transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	--sidebar-background: 0 0% 98%;
	--sidebar-foreground: 240 5.3% 26.1%;
	--sidebar-primary: 240 5.9% 10%;
	--sidebar-primary-foreground: 0 0% 98%;
	--sidebar-accent: 240 4.8% 95.9%;
	--sidebar-accent-foreground: 240 5.9% 10%;
	--sidebar-border: 220 13% 91%;
	--sidebar-ring: 217.2 91.2% 59.8%;
	--color-primary: #0e57a4;
}
.section-wrapper {
	position: relative;
	--max-width: 1200px;
	--padding: 1.25rem;
	width: min(var(--max-width), 100% - var(--padding) * 2);
	margin-inline: auto;
}

/* Text and background color utilities */
.text-primary {
	color: #0e57a4;
}

.text-secondary {
	color: hsl(var(--secondary-foreground));
}

.text-secondary-foreground {
    color: hsl(var(--secondary-foreground));
}

.font-heading {
	font-family: Outfit, system-ui, sans-serif;
}

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

.text-muted-foreground {
	color: hsl(var(--muted-foreground));
}

.text-foreground {
    color: hsl(var(--foreground));
}

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

.hover\:text-white:hover {
	color: hsl(0 0% 100%);
}

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

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

.hover\:bg-primary\/90:hover {
	background-color: hsl(var(--primary) / 0.9);
}

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

.bg-secondary\/30 {
	background-color: hsl(var(--secondary) / 0.3);
}

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

.bg-ocean-blue-light {
	background-color: hsl(var(--ocean-blue-light));
}

@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap");

.font-outfit {
	font-family: "Outfit", sans-serif;
}

.bg-gradient-overlay {
	background: linear-gradient(
		180deg,
		rgba(0, 0, 0, 0.4) 0%,
		rgba(0, 0, 0, 0.6) 100%
	);
}

.bg-gradient-to-t {
	background-image: linear-gradient(
		to top,
		var(--gradient-from),
		var(--gradient-to)
	);
}

.from-black-60 {
	--gradient-from: rgba(0, 0, 0, 0.6);
	--gradient-to-position: 100%;
	--gradient-to: rgba(0, 0, 0, 0) var(--gradient-to-position);
	--gradient-stops: var(--gradient-from), var(--gradient-to);
}

.to-transparent {
	--gradient-to: transparent var(--gradient-to-position);
}
    .supports-\[backdrop-filter\]\:bg-background\/60 {
        background-color: hsl(var(--background) / .6);
    }

/* utilities */
button {
	cursor: pointer;
}
.bg-accent {
    background-color: hsl(var(--accent));
}
.hover\:bg-accent:hover {
	background-color: hsl(var(--accent));
}
.bg-card {
    background-color: hsl(var(--card));
}
.hover\:text-accent-foreground:hover {
	color: hsl(var(--accent-foreground));
}

.hover\:bg-secondary\/80:hover {
	background-color: hsl(var(--secondary) / 0.8);
}
.bg-muted {
    background-color: hsl(var(--muted));
}
.bg-gradient-hero {
	background-image: var(--gradient-hero);
}

/* layout utilities */
.section-padding {
	padding-top: 4rem;
	padding-bottom: 4rem;
}

.container-wide {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	padding-left: 1rem;
	padding-right: 1rem;
}

.min-h-\[400px\] {
	min-height: 400px;
}

.space-y-2 > :not([hidden]) ~ :not([hidden]) {
	--tw-space-y-reverse: 0;
	margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
	margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}



@media (min-width: 640px) {
	.container-wide {
		padding-left: 1.5rem;
		padding-right: 1.5rem;
	}
}

@media (min-width: 768px) {
	.section-padding {
		padding-top: 6rem;
		padding-bottom: 6rem;
	}

	.md\:min-h-\[500px\] {
		min-height: 500px;
	}
  .md\:grid-cols-2 {
    grid-template-columns: repeat(2,minmax(0,1fr));
}


}

@media (min-width: 1024px) {
	.container-wide {
		padding-left: 2rem;
		padding-right: 2rem;
	}
  .lg\:grid-cols-4 {
    grid-template-columns: repeat(4,minmax(0,1fr));
}
}

/* card utilities */
* {
	border-color: hsl(var(--border));
}
.bg-card {
	background-color: hsl(var(--card));
}
.text-card-foreground {
	color: hsl(var(--card-foreground));
}

/* shadow utilities */
.shadow-card {
	--tw-shadow-color: hsl(var(--card));
	--tw-shadow: var(--tw-shadow-colored);
}

.shadow-sm {
	--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
	--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
		var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.hover\:shadow-elevated:hover {
	--tw-shadow: var(--shadow-elevated);
	--tw-shadow-colored: var(--shadow-elevated);
	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
		var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

/* Transition utilities */
.transition-colors {
	transition-property: color, background-color, border-color,
		text-decoration-color, fill, stroke;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	transition-duration: 0.15s;
}

.transition-shadow {
	transition-property: box-shadow;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	transition-duration: 0.15s;
}
.blue-gradient {
    background: linear-gradient(135deg, #0e57a4 0%, #0a3e75 100%);
}
.hover\:bg-accent:hover {
    background-color: hsl(var(--accent));
}