body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
  margin: 0 !important;
  padding: 0 !important;
  background-color: #f8fafc !important;
  color: #333 !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 100vh !important;
}

/* Navigation Styles */
.navbar {
  background-color: #1e293b !important;
  color: #ffffff !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 50 !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
  padding-top: 0.25rem !important;
  padding-bottom: 0.25rem !important;
}

.nav-btn {
  padding: 0.5rem 1rem !important;
  border-radius: 0.375rem !important;
  font-weight: 500 !important;
  transition: background-color 0.2s, color 0.2s !important;
}

.nav-btn:hover {
  background-color: #3b82f6 !important;
  color: white !important;
}

/* Mobile Menu Styles */
.mobile-menu-container {
  display: none !important;
  width: 100% !important;
  background-color: #0f172a !important;
  border-top: 1px solid #1e293b !important;
}

.mobile-menu-container.active {
  display: block !important;
}

.mobile-btn {
  display: block !important;
  padding: 1rem !important;
  border-bottom: 1px solid #1e293b !important;
  transition: background-color 0.2s !important;
}

.mobile-btn:hover {
  background-color: #1e293b !important;
  color: #60a5fa !important;
}

/* Banner Styles */
.hero-banner {
  background: linear-gradient(rgba(15, 23, 42, 0.7), rgba(15, 23, 42, 0.7)), url('https://images.unsplash.com/photo-1550745165-9bc0b252726f?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80') !important;
  background: linear-gradient(rgba(15, 23, 42, 0.7), rgba(15, 23, 42, 0.7)), url('../assets/hero_emblem-1920x715.png') !important;
  background-size: cover !important;
  background-position: center !important;
  /* height: 60vh !important; */
  min-height: 360px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  color: white !important;
}

main {
  flex: 1 !important;
  background-color: rgb(243, 236, 170) !important;
}

/* Footer Styles */
.flex.flex-wrap.justify-center.gap-4.md\:gap-6.mb-8 {
  background-color: #b6baaa !important;
  /* color: #ffffff !important; */
  padding: 1rem !important;
  text-align: center !important;
}

section p {
  color: #38404b !important;
}

#back-top {
  color: white !important;
  padding-bottom: 1rem !important;
  font-size: 1.5rem !important;
  margin-left: 9rem !important;
}

#back-top:hover {
  color: #E4405F !important;
  font-size: 1.7rem !important; 
}

.social-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  font-size: 30px !important;
  border-radius: 50% !important;
  background-color: #000000 !important;
  color: white !important;
  transition: background-color 0.3s, transform 0.2s !important;
}

.social-icon>i {
  color: white !important;
  border-radius: 50% !important;
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.social-icon.twitter>svg>path {
  color: white !important;
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.social-icon:hover {
  /* background-color: #3b82f6 !important; */
  transform: scale(1.1) !important;
}

.social-icon.facebook>i:hover {
  background-color: #1877F2 !important;
}

.social-icon.twitter:hover {
  background-color: #000000 !important;
}

.social-icon.youtybe>i:hover {
  background-color: #FF0000 !important;
}

.social-icon.instagram>i:hover {
  background-color: #E4405F !important;
}

.social-icon.tiktok>i:hover {
  background-color: #000000 !important;
}

.social-icon.blogger>i:hover {
  background-color: #F57C00 !important;
}