:root {
	--primary-color: #2e8b57;
	--secondary-color: #faf3e0;
	--accent-color: #f4a261;
	--text-color: #333333;

	--font-heading: "Poppins", sans-serif;
	--font-body: "Open Sans", sans-serif;
}

html,
body {
	overflow-x: clip;
	max-width: 100vw;
}

html {
	scroll-behavior: smooth;
}

.icon-accent {
	color: #e9893b;
}

.truebg {
	background-color: #b8cabd;
}
.truebg2 {
	background-color: #c1d1c6;
}

.nav-link {
	position: relative;
	padding-bottom: 4px;
	transition: color 0.3s ease;
}

.nav-link.active {
	color: #fff;
}

/* Animated underline base */
.nav-link::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -3px;
	width: 0%;
	height: 3px;
	border-radius: 1px;
	background-color: var(--accent-color, #ffc107);
	transition: width 0.3s ease-in-out;
}

/* Trigger underline on active link */
.nav-link.active::after {
	width: 100%;
	font-weight: bold;
}

.btn-accent {
	background-color: #f4a261;
}

.btn-accent:hover {
	background-color: #f4a261;
	color: #fff;
}

.hero-slide {
	height: 90vh;
	background-size: cover;
	background-position: center;
	position: relative;
}

.hero-slide .overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5); /* dark overlay */
	z-index: 1;
}

.hero-slide .container {
	z-index: 2;
	position: relative;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
}

.carousel-indicators button {
	background-color: #fff;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
	background-color: rgba(0, 0, 0, 0.25);
	border-radius: 50%;
}

@keyframes fadeInUp {
	0% {
		opacity: 0;
		transform: translateY(60px);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

.hero-slide .container > * {
	opacity: 0;
	animation: fadeInUp 1s ease-out forwards;
}

.hero-slide h1 {
	animation-delay: 0.2s;
}

.hero-slide p {
	animation-delay: 0.4s;
}

.hero-slide a.btn {
	animation-delay: 0.6s;
}

.block-color {
	background-color: var(--primary-color);
}

.counter-plus::after {
	content: "+";
	margin-left: 2px;
}

.timeline {
	position: relative;
	padding: 60px 0;
}

.timeline-line {
	position: relative;
	padding-top: 40px;
	max-width: 90%;
	margin-left: auto;
	margin-right: auto;
}

.timeline-line::before {
	content: "";
	position: absolute;
	top: 21px; /* aligns with dot top offset */
	left: 0;
	height: 3px;
	width: 0%;
	background-color: var(--accent-color);
	z-index: 1;
	transition: width 1.6s ease-in-out;
}

.timeline-line.animate::before {
	width: 100%;
}

.timeline-line::after {
	content: "";
	position: absolute;
	top: 14px;
	right: -10px;
	width: 0;
	height: 0;
	border-top: 9px solid transparent;
	border-bottom: 9px solid transparent;
	border-left: 14px solid var(--accent-color);

	opacity: 0;
	transform: translateX(12px);
	transition: opacity 1.8s ease, transform 1.8s ease;
}

.timeline-line[data-aos="fade-right"].aos-animate::after {
	opacity: 1;
	transform: translateX(0);
}

.timeline-step {
	position: relative;
	text-align: center;
}

.timeline-step .dot {
	width: 16px;
	height: 16px;
	background-color: var(--accent-color);
	border-radius: 50%;
	position: absolute;
	top: -26px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 2;
	border: 3px var(--accent-color);
}

.gcard i {
	flex-shrink: 0;
}

.gcard {
	border-left: 4px solid var(--primary-color);
	background-color: #b3d4c2;
	padding: 15px;
}

.accordian-theme {
	background-color: #b3d4c2;
	border-left: 4px solid var(--primary-color);
}

.gallery-img-wrapper {
	overflow: hidden;
	border-radius: 8px;
	height: 240px;
	position: relative;
}

.gallery-img-wrapper img {
	transition: transform 0.4s ease;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.gallery-img-wrapper:hover img {
	transform: scale(1.05);
}

.text-accent {
	color: var(--accent-color);
}

footer {
	max-width: 100%;
	overflow-x: hidden;
}

footer a:hover {
	text-decoration: underline;
}

#scrollTopBtn {
	display: none;
	bottom: 2rem;
	right: 1rem;
	border-radius: 25%;
	z-index: 999;
	opacity: 0.9;
	transition: opacity 0.3s ease-in-out;
}

#scrollTopBtn:hover {
	opacity: 1;
}
