/* ==========================================================================
   DIVYAKSHETRA HARIHARAPURA - EXACT SCREENSHOT HEADER & BANNER DESIGN
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Montserrat:wght@600;700;800;900&display=swap');

:root {
  --divine-maroon: #840000;
  --divine-maroon-dark: #660000;
  --divine-gold-bright: #ffd700;
  --divine-gold-bar: #e5a823;
  --divine-gold-border: #fae4be;
  --text-dark: #111827;
  --font-nav: 'Inter', 'Montserrat', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-nav);
  background-color: #fbf9f5;
  color: var(--text-dark);
  overflow-x: hidden;
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
  color: inherit;
}

/* ==========================================================================
   HEADER CONTAINER & GOLD TOP BORDER
   ========================================================================== */
.header-main-wrapper {
  position: relative;
  width: 100%;
  background-color: var(--divine-maroon);
  border-top: 3px solid var(--divine-gold-bar);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
  z-index: 1000;
}

.header-inner-flex {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  min-height: 84px;
  width: 100%;
  background-color: #780404;
  background-image: 
    linear-gradient(rgba(120, 4, 4, 0.28), rgba(90, 0, 0, 0.48)),
    url('../assets/images/header_bg_swamiji.png');
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
  position: relative;
}

/* ==========================================================================
   LEFT: WHITE SLANTED LOGO SECTION
   ========================================================================== */
.header-logo-container {
  background: #ffffff;
  display: flex;
  align-items: center;
  padding: 8px 42px 8px 24px;
  position: relative;
  clip-path: polygon(0 0, 100% 0, calc(100% - 34px) 100%, 0 100%);
  -webkit-clip-path: polygon(0 0, 100% 0, calc(100% - 34px) 100%, 0 100%);
  z-index: 5;
  flex-shrink: 0;
  box-shadow: 4px 0 12px rgba(0, 0, 0, 0.2);
}

.header-logo-link {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.temple-main-logo-img {
  height: 64px;
  width: auto;
  display: block;
  object-fit: contain;
}

/* ==========================================================================
   RIGHT: 2-ROW MAROON NAVIGATION MENU
   ========================================================================== */
.header-nav-container {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-grow: 1;
  padding-right: 32px;
  padding-left: 10px;
}

.nav-rows-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
}

.desktop-nav-menu {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
}

.desktop-nav-menu .nav-primary-list {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  list-style: none;
  margin: 0;
  padding: 3px 0;
  gap: 24px;
  width: 100%;
}

.desktop-nav-menu .nav-primary-list li {
  position: relative;
  display: flex;
  align-items: center;
}

.desktop-nav-menu .nav-primary-list li a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #ffffff;
  font-family: var(--font-nav);
  font-size: 13.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 4px 0;
  position: relative;
  transition: color 0.2s ease;
  white-space: nowrap;
}

/* Active State & Hover State */
.desktop-nav-menu .nav-primary-list li.active a,
.desktop-nav-menu .nav-primary-list li a:hover {
  color: var(--divine-gold-bright);
}

.desktop-nav-menu .nav-primary-list li.active a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background-color: var(--divine-gold-bright);
  border-radius: 1px;
}

.desktop-nav-menu .nav-primary-list li a:hover::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background-color: var(--divine-gold-bright);
  border-radius: 1px;
}

/* Horizontal Divider Line */
.nav-horizontal-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.24);
  width: 100%;
  margin: 4px 0;
}

/* Row 2: Secondary / Announcement Links */
.nav-secondary-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  padding: 3px 0;
}

.nav-secondary-link {
  color: #ffffff;
  font-family: var(--font-nav);
  font-size: 13.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  text-decoration: none;
  transition: color 0.2s ease;
  white-space: nowrap;
}

.nav-secondary-link:hover {
  color: var(--divine-gold-bright);
}

/* Dropdown Sub-menu */
.desktop-nav-menu .has-dropdown {
  position: relative;
}

.desktop-nav-menu .has-dropdown > a i {
  font-size: 10px;
  transition: transform 0.25s ease;
}

.desktop-nav-menu .has-dropdown:hover > a i {
  transform: rotate(180deg);
}

.desktop-nav-menu .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 210px;
  background: #ffffff;
  border-radius: 8px;
  padding: 8px 0;
  list-style: none;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
  border: 1.5px solid var(--divine-gold-border);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 0;
  height: auto !important;
}

.desktop-nav-menu .has-dropdown:hover .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.desktop-nav-menu .sub-menu li {
  height: auto !important;
  display: block;
}

.desktop-nav-menu .sub-menu li a {
  display: block;
  padding: 9px 18px;
  color: #374151;
  font-size: 12.5px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0.3px;
  transition: all 0.2s ease;
}

.desktop-nav-menu .sub-menu li a:hover {
  background-color: #fcf6eb;
  color: var(--divine-maroon);
  padding-left: 22px;
}

.desktop-nav-menu .sub-menu li a::after {
  display: none !important;
}

/* Devotee Profile Icon Button */
.profile-btn-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
}

.devotee-profile-circle-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7c0404 0%, #560101 100%);
  border: 2px solid var(--divine-gold-bright);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35);
  transition: all 0.25s ease;
  padding: 0;
}

.devotee-profile-circle-btn i {
  font-size: 18px;
  color: #ffffff;
  transition: all 0.25s ease;
}

.devotee-profile-circle-btn:hover {
  border-color: #ffffff;
  transform: scale(1.08);
  box-shadow: 0 4px 14px rgba(255, 215, 0, 0.5);
}

.devotee-profile-circle-btn:hover i {
  color: var(--divine-gold-bright);
}

/* Profile Dropdown */
.profile-dropdown-card {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  min-width: 190px;
  background: #ffffff;
  border-radius: 10px;
  border: 1.5px solid var(--divine-gold);
  box-shadow: 0 12px 32px rgba(132, 0, 0, 0.25);
  padding: 6px 0;
  list-style: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: all 0.25s ease;
  z-index: 1001;
}

.profile-btn-wrap:hover .profile-dropdown-card,
.profile-btn-wrap.active .profile-dropdown-card {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.profile-dropdown-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 700;
  color: #374151;
  transition: all 0.2s ease;
}

.profile-dropdown-item i {
  color: var(--divine-maroon);
  font-size: 15px;
}

.profile-dropdown-item:hover {
  background-color: #faf6f0;
  color: var(--divine-maroon);
  padding-left: 20px;
}

/* ==========================================================================
   MOBILE CONTROLS & OFFCANVAS DRAWER
   ========================================================================== */
.mobile-controls {
  display: none;
  align-items: center;
  gap: 14px;
}

.mobile-hamburger-btn {
  background: transparent;
  border: none;
  color: #ffffff;
  font-size: 24px;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mobile-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(3px);
  z-index: 10000;
  opacity: 0;
  visibility: hidden;
  transition: all 0.35s ease;
}

.mobile-drawer-overlay.active {
  opacity: 1;
  visibility: visible;
}

.mobile-drawer-content {
  position: absolute;
  top: 0;
  left: -320px;
  width: 300px;
  max-width: 85%;
  height: 100%;
  background: #ffffff;
  box-shadow: 4px 0 25px rgba(0, 0, 0, 0.35);
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  transition: left 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y: auto;
}

.mobile-drawer-overlay.active .mobile-drawer-content {
  left: 0;
}

.drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1.5px solid var(--divine-gold-border);
  padding-bottom: 16px;
  margin-bottom: 20px;
}

.drawer-close-btn {
  background: #faf6f0;
  border: 1px solid var(--divine-gold-border);
  color: var(--divine-maroon);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.drawer-menu-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.drawer-menu-list > li {
  border-bottom: 1px solid #f3f4f6;
}

.drawer-menu-list > li > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 4px;
  color: var(--text-dark);
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
}

.drawer-menu-list > li.active > a,
.drawer-menu-list > li > a:hover {
  color: var(--divine-maroon);
}

.drawer-submenu {
  list-style: none;
  padding: 0 0 10px 16px;
  display: none;
}

.drawer-submenu.open {
  display: block;
}

.drawer-submenu li a {
  display: block;
  padding: 7px 0;
  color: #4b5563;
  font-size: 13.5px;
  font-weight: 600;
  text-transform: none;
}

/* ==========================================================================
   HERO BANNER SECTION
   ========================================================================== */
.hero-showcase-section {
  position: relative;
  width: 100%;
  overflow: hidden;
  background-color: #0b131b;
}

.hero-img-container {
  width: 100%;
  position: relative;
  line-height: 0;
  display: block;
}

.hero-img {
  width: 100%;
  height: auto;
  display: block;
}

/* ==========================================================================
   BANNER CALL TO ACTION BUTTON (Get Started)
   ========================================================================== */
.banner-cta-wrapper {
  background: linear-gradient(180deg, #fbf7ee 0%, #ffffff 50%, #fbf7ee 100%);
  border-bottom: 2px solid var(--divine-gold-border);
  padding: 24px 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  box-shadow: 0 4px 18px rgba(132, 0, 0, 0.05);
}

.btn-get-started {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: linear-gradient(135deg, #840000 0%, #5a0000 100%);
  color: #ffffff !important;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 14px 38px;
  border-radius: 50px;
  border: 2px solid var(--divine-gold-bright);
  box-shadow: 0 6px 20px rgba(132, 0, 0, 0.35);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  text-decoration: none;
}

.btn-get-started::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.3), transparent);
  transition: left 0.6s ease;
}

.btn-get-started:hover {
  background: linear-gradient(135deg, #a00000 0%, #700000 100%);
  color: var(--divine-gold-bright) !important;
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 10px 26px rgba(132, 0, 0, 0.45);
  border-color: #ffffff;
}

.btn-get-started:hover::before {
  left: 100%;
}

.btn-get-started i {
  color: var(--divine-gold-bright);
  font-size: 16px;
  transition: transform 0.3s ease;
}

.btn-get-started:hover i {
  transform: translateX(4px);
  color: #ffffff;
}

/* ==========================================================================
   RESPONSIVE MEDIA QUERIES
   ========================================================================== */
@media (max-width: 1200px) {
  .header-logo-container {
    padding: 6px 28px 6px 16px;
  }
  .temple-main-logo-img {
    height: 52px;
  }
  .desktop-nav-menu .nav-primary-list {
    gap: 14px;
  }
  .desktop-nav-menu .nav-primary-list li a {
    font-size: 12px;
    letter-spacing: 0.4px;
  }
  .nav-secondary-row {
    gap: 22px;
  }
  .nav-secondary-link {
    font-size: 12px;
  }
}

@media (max-width: 991px) {
  .header-inner-flex {
    min-height: 64px;
  }
  .nav-rows-wrapper {
    display: none !important;
  }
  .mobile-controls {
    display: inline-flex;
  }
  .header-nav-container {
    padding-right: 16px;
    flex-grow: 0;
  }
  .header-logo-container {
    padding: 6px 24px 6px 14px;
    clip-path: polygon(0 0, 100% 0, calc(100% - 20px) 100%, 0 100%);
  }
  .temple-main-logo-img {
    height: 42px;
  }
}

@media (max-width: 576px) {
  .header-logo-container {
    padding: 5px 18px 5px 10px;
    clip-path: polygon(0 0, 100% 0, calc(100% - 15px) 100%, 0 100%);
  }
  .temple-main-logo-img {
    height: 34px;
  }
  .btn-get-started {
    font-size: 14px;
    padding: 12px 28px;
  }
}