:root {
	--primary-maroon: #7A1C1C;
	--secondary-maroon: #5A1212;
	--bg-cream: #FFF9F3;
	--text-dark: #333333;
	--text-muted: #666666;
}

body {
	font-family: 'Poppins', sans-serif;
	color: var(--text-dark);
	background-color: #ffffff;
	overflow-x: hidden;
}

h1, h2, h3, .serif-font {
	font-family: 'Playfair Display', serif;
	font-weight: 600;
}
.toptext{
	background: #f8ece0;
	padding: 10px;
	border-radius: 20px;

}
.txtmaron{
	color: #7A1C1C;
}
.btn-maroon {
	background-color: var(--primary-maroon);
	color: white;
	border-radius: 8px;
	padding: 10px 24px;
	font-weight: 500;
	transition: all 0.3s;
}
.btn-maroon:hover {
	background-color: var(--secondary-maroon);
	color: white;
}

.btn-whatsapp {
	background-color: #fff;
	color: #000;
	font-weight: 600;
	border-radius: 8px 0 0 8px;
}
.btn-whatsapp:hover {
	background-color: #20ba5a;
	color: white;
}

/* Hero Section */
.hero-section {
	background-color: var(--bg-cream);
	padding: 40px 0 0 0;
	position: relative;
}
.nav-link {
	color: var(--text-dark);
	font-weight: 500;
	font-size: 0.9rem;
}
.nav-link:hover {
	color: var(--primary-maroon);
}
.hero-img {
	max-width: 100%;
	height: auto;
	display: block;
}

/* Apa itu STIFIn Section */
.stifin-info-section {
	background-color: var(--primary-maroon);
	color: white;
	padding: 60px 0;
}
.intelligence-card {
	background: white;
	color: var(--text-dark);
	border-radius: 16px;
	padding: 40px 30px;
}
.mesin-kecerdasan-item i {
	font-size: 1.8rem;
	margin-bottom: 10px;
}

/* Color coding untuk 5 Mesin Kecerdasan */
.icon-sensing { color: #3B5998; }
.icon-thinking { color: #8B5A2B; }
.icon-intuiting { color: #4A7023; }
.icon-feeling { color: #C71585; }
.icon-insting { color: #D2691E; }

/* Manfaat Section */
.manfaat-section {
	background-color: var(--bg-cream);
	padding: 80px 0;
}
.manfaat-card {
	background: white;
	border: 1px solid #F3E5D8;
	border-radius: 12px;
	padding: 30px 20px;
	height: 100%;
	box-shadow: 0 4px 15px rgba(122, 28, 28, 0.03);
}
.manfaat-card i {
	font-size: 2rem;
	color: var(--primary-maroon);
	margin-bottom: 15px;
}

/* Proses Section */
.proses-section {
	padding: 80px 0;
}
.proses-step {
	position: relative;
}
.step-number {
	background-color: var(--primary-maroon);
	color: white;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 0.8rem;
	margin-top: -10px;
}
.proses-icon-wrapper {
	position: relative;
	display: inline-block;
	margin-bottom: 15px;
}
.proses-icon-wrapper i {
	font-size: 2.5rem;
	color: var(--primary-maroon);
}

/* Testimoni Section */
.testi-section {
	background-color: var(--bg-cream);
	padding: 80px 0;
}
.testi-card {
	background: white;
	border-radius: 12px;
	padding: 30px;
	height: 100%;
}
.avatar {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	object-fit: cover;
}

/* CTA Section */
.cta-section {
	/*background-color: var(--primary-maroon);*/
	background-image: url('/images/222.png');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	color: white;
	padding: 60px 0;
	border-radius: 20px;
}

/* Footer */
.footer-top {
	padding: 40px 0;
	border-bottom: 1px solid #eeeeee;
}
.footer-bottom {
	background-color: var(--secondary-maroon);
	color: rgba(255,255,255,0.7);
	padding: 15px 0;
	font-size: 0.85rem;
}
.w-40px{
	width: 40px !important;
}
.w-50px{
	width: 50px !important;
}
.w-60px{
	width: 60px !important;
}
.w-70px{
	width: 70px !important;
}
.w-80px{
	width: 80px !important;
}

.animate-on-scroll {
      opacity: 0;
      transform: translateY(36px);
      transition: opacity 0.65s ease, transform 0.65s ease;
    }
    .animate-on-scroll.animated {
      opacity: 1;
      transform: translateY(0);
    }
    .delay-1 { transition-delay: 0.08s; }
    .delay-2 { transition-delay: 0.16s; }
    .delay-3 { transition-delay: 0.24s; }
    .delay-4 { transition-delay: 0.32s; }

.floating-wa {
	position: fixed;
	bottom: 24px; /* Jarak dari bawah layar */
	right: 24px;  /* Jarak dari kanan layar */
	width: 40px;
	height: 40px;
	background-color: #25D366; /* Warna khas WhatsApp */
	color: #ffffff !important;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 32px;
	box-shadow: 2px 5px 15px rgba(0, 0, 0, 0.25);
	z-index: 9999; /* Memastikan tombol selalu berada di lapisan paling atas */
	transition: all 0.3s ease;
	text-decoration: none;
}

/* Efek Hover (Saat kursor diarahkan ke tombol) */
.floating-wa:hover {
	transform: scale(1.1); /* Sedikit membesar */
	background-color: #20ba5a;
	box-shadow: 2px 5px 20px rgba(0, 0, 0, 0.4);
}

/* Efek Animasi Berdenyut (Pulse Effect) */
.floating-wa::before {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: #25D366;
	border-radius: 50%;
	z-index: -1;
	animation: waPulse 2s infinite;
}

@keyframes waPulse {
	0% {
		transform: scale(0.95);
		opacity: 0.8;
	}
	100% {
		transform: scale(1.5);
		opacity: 0;
	}
}