:root {
	--blue: #1D1C53;
	--yellow: #FFB248;
}

/* raleway-300 - latin */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Raleway';
	font-style: normal;
	font-weight: 300;
	src: url('../fonts/raleway-v34-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* raleway-regular - latin */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Raleway';
	font-style: normal;
	font-weight: 400;
	src: url('../fonts/raleway-v34-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* raleway-700 - latin */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Raleway';
	font-style: normal;
	font-weight: 700;
	src: url('../fonts/raleway-v34-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* allura-regular - latin */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Allura';
	font-style: normal;
	font-weight: 400;
	src: url('../fonts/allura-v21-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

ul {
	list-style: none;
	padding-left: 0;
	margin-left: 0;
}

	ul li {
		padding-left: 1.5em;
		position: relative;
	}

		ul li::before {
			content: "\2756"; /* Diamond symbol */
			position: absolute;
			left: 0;
			color: var(--yellow);
		}

		h1,h2,h3,h4,h5,h6 {
		}

.font-hand {
	color: var(--blue);
	font-family: Allura;
}

html {
	color: #000;
	scroll-behavior: smooth;
	font-family: Raleway, sans-serif;
}

.glass-effect {
	backdrop-filter: blur(10px);
	background: rgba(255, 255, 255, 0.9);
}

.gradient-text {
	background: linear-gradient(135deg, #2563eb, #4f46e5);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.service-card {
	transition: all 0.3s ease;
}

	.service-card:hover {
		transform: translateY(-5px);
		box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
	}

.bracketed-container {
	position: relative;
}

	.bracketed-container::before,
	.bracketed-container::after {
		content: '';
		position: absolute;
		top: 0;
		height: 100%;
		width: 15%;
		border: 20px solid var(--yellow);
	}

	.bracketed-container::before {
		left: 0;
		border-right: none;
	}

	.bracketed-container::after {
		right: 0;
		border-left: none;
	}

	#navbar.top .logo {
		max-height: 100px;
	}
#navbar.content .logo {
	max-height: 56px;
}


/* Custom Flower Divider Styles */
.flower-divider {
	position: relative;
	height: 40px;
	margin: 2rem 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

	.flower-divider::before,
	.flower-divider::after {
		content: "";
		flex: 1;
		height: 1px;
		background: #e2e8f0; /* light gray line color */
	}

	.flower-divider .flower-image {
		display: inline-block;
		position: relative;
		width: 36px;
		height: 36px;
		margin: 0 15px;
		background-size: contain;
		background-position: center;
		background-repeat: no-repeat;
		background-image: url(../img/flower.webp)
	}

	/* Light variant */
	.flower-divider.light::before,
	.flower-divider.light::after {
		background: #e2e8f0;
	}

	/* Dark variant */
	.flower-divider.dark::before,
	.flower-divider.dark::after {
		background: #4a5568;
	}

	/* Fancy variant with gradient */
	.flower-divider.fancy::before,
	.flower-divider.fancy::after {
		height: 2px;
		background: linear-gradient(to var(--direction, right), transparent, #718096);
	}

	.flower-divider.fancy::before {
		--direction: right;
	}

	.flower-divider.fancy::after {
		--direction: left;
	}

	.yellow {
		color: var(--yellow);
	}

	.blue {
		color: var(--blue);
	}

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

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

.mobile-menu-container .flex {
	flex-direction: column;
	align-items: flex-start;
}

.mobile-menu-container a {
	display: block;
	width: 100%;
}

.mobile-menu-container .bg-yellow {
	margin-top: 0.5rem;
	text-align: center;
}