:where([class^="ri-"])::before {
	content: "\f3c2";
}

html {
	scroll-behavior: smooth;
}


body {
	font-family: 'Poppins', sans-serif;
	scroll-behavior: smooth;
}

/* loader.css */
#loader {
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background: white;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 9999;
}

#gif-loader.fade-out {
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.5s ease, visibility 0.5s ease;
}



.hero-section {
	background-image: linear-gradient(to right, rgba(15, 76, 129, 0.9), rgba(15, 76, 129, 0.7), rgba(15, 76, 129, 0.5), rgba(15, 76, 129, 0.3), rgba(15, 76, 129, 0.1), rgba(0, 0, 0, 0)), url('/assets/home-banner.webp');
	background-size: cover;
	background-position: center;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.custom-checkbox {
	display: flex;
	align-items: center;
	cursor: pointer;
}

.custom-checkbox input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
}

.checkmark {
	height: 20px;
	width: 20px;
	background-color: #fff;
	border: 2px solid #e2e8f0;
	border-radius: 4px;
	position: relative;
}

.custom-checkbox input:checked~.checkmark {
	background-color: #0f4c81;
	border-color: #0f4c81;
}

.checkmark:after {
	content: "";
	position: absolute;
	display: none;
	left: 6px;
	top: 2px;
	width: 5px;
	height: 10px;
	border: solid white;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.custom-checkbox input:checked~.checkmark:after {
	display: block;
}

.custom-switch {
	position: relative;
	display: inline-block;
	width: 50px;
	height: 24px;
}

.custom-switch input {
	opacity: 0;
	width: 0;
	height: 0;
}

.slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #e2e8f0;
	transition: .4s;
	border-radius: 24px;
}

.slider:before {
	position: absolute;
	content: "";
	height: 18px;
	width: 18px;
	left: 3px;
	bottom: 3px;
	background-color: white;
	transition: .4s;
	border-radius: 50%;
}

input:checked+.slider {
	background-color: #0f4c81;
}

input:checked+.slider:before {
	transform: translateX(26px);
}

.custom-range {
	-webkit-appearance: none;
	width: 100%;
	height: 6px;
	border-radius: 5px;
	background: #e2e8f0;
	outline: none;
}

.custom-range::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #0f4c81;
	cursor: pointer;
}

.custom-range::-moz-range-thumb {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #0f4c81;
	cursor: pointer;
	border: none;
}

.tab-active {
	background-color: #0f4c81;
	color: white;
}

.project-card:hover .project-overlay {
	opacity: 1;
}

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

.counter-value {
	transition: all 0.5s ease;
}

.testimonial-slide {
	transition: all 0.3s ease;
}

@media (max-width: 768px) {
	.hero-section {
		background-position: 70% center;
	}

	.min-h-screen {
		min-height: 60vh !important;
	}

	.bg-white.rounded-full.shadow-sm.p-1.inline-flex {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
	}

}

.whatsapp-icon {
	background-color: #25D366;
}





.loader-dots {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	gap: 8px;
}

.loader-dots div {
	width: 12px;
	height: 12px;
	background-color: #0F4C81;
	border-radius: 50%;
	animation: bounce 0.6s infinite alternate;
}

.loader-dots div:nth-child(2) {
	animation-delay: 0.2s;
}

.loader-dots div:nth-child(3) {
	animation-delay: 0.4s;
}

@keyframes bounce {
	from {
		transform: translateY(0);
		opacity: 0.6;
	}

	to {
		transform: translateY(-10px);
		opacity: 1;
	}
}