/* 1. FONT IMPORTS */
@import url('https://fonts.googleapis.com/css2?family=Montserrat+Alternates:wght@500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Text:ital@0;1&display=swap');

/* 2. COLOR VARIABLES */
:root {
  --deep-green:    #046C4E;
  --warm-gold:     #CBB26A;
  --ivory:         #FFF4CA;
  --light-ivory:   #F7F7F7;
  --text-dark:     #4D5C59;
  --text-muted:    #A8B4A5;
  --dark-block-bg: #0F2A26;
}

/* 3. RESET & BASE */
*,
*::before,
*::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
html, body {
  overflow-x: hidden;
  width: 100%;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Montserrat Alternates', sans-serif;
  color: var(--text-dark);
  background: #fff;
  line-height: 1.6;
}
h1,h2,h3,h4,h5,h6 {
  font-family: 'DM Serif Text', serif;
  margin-bottom: 1rem;
  color: var(--deep-green);
}
a { text-decoration: none; color: inherit; }

/* ─────────────────────────────
   GLASS NAVBAR (Final)
───────────────────────────── */
/* 1) Kill any global horizontal overflow */
html, body {
  overflow-x: hidden;
}

/* ===== Glassmorphism Navbar ===== */
.glass-navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  width: 100%;
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,0.2);
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  border-radius: 0 0 16px 16px;
  padding: 0.5rem 0;
  z-index: 9999;
}

/* Ensure container doesn’t overflow */
.glass-navbar .container {
  max-width: 100%;
  padding: 0 1rem;
}

/* Brand logo sizing */
.navbar-brand img {
  max-height: 48px;
}

/* Toggler styling */
.navbar-toggler {
  background: rgba(255,255,255,0.2);
  border: none;
  padding: 0.3rem 0.75rem;
}

/* Nav links */
.navbar-nav .nav-link {
  color: #ffffffcc !important;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  font-weight: 500;
  transition: background 0.3s, color 0.3s;
}
.navbar-nav .nav-link:hover {
  background: rgba(255,255,255,0.2) !important;
  color: #fff !important;
}

/* Collapse menu on mobile */
@media (max-width: 991.98px) {
  .navbar-collapse {
    background: rgba(0,0,0,0.65);
    margin-top: 0.5rem;
    border-radius: 12px;
    padding: 1rem;
    width: 100%;
  }
  .navbar-nav {
    text-align: center;
    width: 100%;
  }
  .navbar-nav .nav-item {
    margin: 0.5rem 0;
  }
}



/* 5. HERO */
.hero-section {
  background: 
    linear-gradient(rgba(4,108,78,0.8), rgba(0,0,0,0.7)),
    url('bgi.png') center/cover no-repeat;
  min-height: 60vh;
  padding-top:100px;
  display:flex; align-items:center; justify-content:center; text-align:center;
}
.hero-title {
  font-size: clamp(2rem,5vw,3rem);
  color: var(--ivory);
  font-weight:700;
  text-shadow:1px 1px 6px rgba(0,0,0,0.4);
}
.hero-subtitle {
  font-size: clamp(1rem,2.5vw,1.25rem);
  color: var(--ivory);
  margin-top:.5rem;
  max-width: 90%;
  text-shadow:1px 1px 5px rgba(0,0,0,0.4);
}
.btn-cta {
  background: var(--warm-gold);
  color: var(--deep-green)!important;
  padding:.75rem 1.5rem;
  border-radius:25px;
  font-weight:700;
  transition: transform .2s, box-shadow .2s;
}
.btn-cta:hover {
  transform: scale(1.05);
  box-shadow:0 0 12px rgba(203,178,106,0.7);
  background: #a38b53; color:#fff!important;
}

/* 6. INFO SECTION */
.info-section {
  background:#fff; padding:3rem 1rem; text-align:center;
}
.info-section .icon {
  color: var(--deep-green);
  font-size:2.25rem;
  margin-bottom:1rem;
}
.info-section h3 { font-size:1.25rem; margin-bottom:.5rem; }
.info-section p { color: var(--text-muted); line-height:1.5; }

/* 7. AVATAR SHOWCASE */
.avatar-section {
  background: var(--light-ivory);
  padding:4rem 1rem; text-align:center;
}
.avatar-title {
  font-size: clamp(1.75rem,4vw,2.5rem);
  margin-bottom:1rem;
  color:var(--deep-green);
}
.avatar-desc {
  font-size: clamp(1rem,2.5vw,1.125rem);
  margin-bottom:1.5rem;
  color:var(--text-muted);
}
.avatar-features li {
  display:flex; align-items:center; gap:.75rem;
  margin-bottom:.75rem;
  color:var(--ivory); font-weight:500;
}
.avatar-features li i {
  color:var(--warm-gold); font-size:1.2rem;
}
.avatar-media {
  display:flex; justify-content:center; padding:1rem 0;
}
.media-placeholder {
  width:260px; height:260px;
  background:#e0e0e0; border-radius:16px;
  box-shadow:0 8px 24px rgba(0,0,0,0.1);
  display:flex; align-items:center; justify-content:center;
  color:#666; font-style:italic;
  overflow:hidden;
}
.avatar-video {
  width:100%; height:100%; object-fit:cover; border-radius:16px;
}

/* 8. PRICING */
.pricing-section {
  background: var(--light-ivory);
  padding:5rem 1rem; text-align:center;
}
.pricing-section .section-title {
  font-size:clamp(1.75rem,4vw,2.5rem);
  margin-bottom:.5rem; color:var(--deep-green);
}
.pricing-section .section-subtext {
  font-size:clamp(.9rem,2vw,1rem);
  color:var(--text-muted); margin-bottom:2rem;
}
.pricing-card {
  position:relative; background:#fff;
  border-radius:15px; overflow:hidden;
  box-shadow:0 8px 24px rgba(0,0,0,0.1);
  transition:transform .3s, box-shadow .3s;
  margin:1rem auto; max-width:380px;
}
.pricing-card:hover {
  transform: translateY(-6px);
  box-shadow:0 12px 32px rgba(0,0,0,0.15);
}
.pricing-card.popular .ribbon {
  position:absolute; top:16px; right:-40px;
  background:var(--warm-gold); color:var(--deep-green);
  padding:6px 60px; transform:rotate(45deg);
  font-family:'DM Serif Text',serif; font-style:italic;
  font-size:.85rem; font-weight:500;
  box-shadow:0 2px 6px rgba(0,0,0,0.2);
}
.pricing-card .card-header {
  padding:2rem 1.5rem 1rem;
}
.pricing-card h3 {
  font-family:'Montserrat Alternates',sans-serif;
  font-size:1.5rem; font-weight:700;
  color:var(--deep-green);
}
.pricing-card .price {
  font-family:'DM Serif Text',serif;
  font-style:italic; font-size:2.25rem;
  color:var(--warm-gold);
}
.features-list {
  list-style:none; padding:0 2rem; margin:1.5rem 0;
}
.features-list li {
  position:relative; padding-left:1.5rem;
  margin-bottom:.75rem;
  color:var(--text-muted);
  font-weight:500;
}
.features-list li::before {
  content:"✔"; position:absolute; left:0;
  color:var(--warm-gold);
}
.pricing-card .card-footer {
  padding:1rem 1.5rem 2rem;
}
.btn-pricing {
  background:var(--deep-green); color:var(--ivory)!important;
  padding:.6rem 1.5rem; border-radius:25px;
  font-weight:700; transition:transform .2s, box-shadow .2s;
}
.btn-pricing:hover {
  transform:scale(1.05);
  box-shadow:0 0 12px rgba(4,108,78,0.7);
}
.btn-pricing.btn-highlight {
  background:var(--warm-gold)!important;
  color:var(--deep-green)!important;
}
.btn-pricing.btn-highlight:hover {
  background:#A38B53!important;
}

/* 9. DARK-BLOCK WRAPPER */
.dark-block {
  background:var(--dark-block-bg);
  color:var(--light-ivory);
  border-top:4px solid var(--warm-gold);
  padding:2rem 1rem;
}
.dark-block h2,h3,h4 {
  color:var(--ivory);
}
.dark-block a.btn,
.dark-block .btn-pricing {
  background:var(--warm-gold);
  color:var(--dark-block-bg)!important;
}
.dark-block a.btn:hover,
.dark-block .btn-pricing:hover {
  background:#A38B53;
}
.dark-block .card {
  background:#133631;
  box-shadow:0 8px 24px rgba(0,0,0,0.4);
}

/* 10. FOOTER */
.footer-section {
  background:#232e2b;
  color:#f1f5f4;
  padding:3rem 1rem;
  text-align:center;
}
.footer-section h5,h6 {
  margin-bottom:1rem;
}
.footer-section a {
  color:#f1f5f4; opacity:.8; transition:opacity .3s;
}
.footer-section a:hover {
  opacity:1;
}

/* 11. BREAKPOINT TWEAKS */
@media (max-width: 992px) {
  .pricing-card { max-width:320px; }
  .hero-title { font-size: clamp(1.75rem,5vw,2.5rem); }
}
@media (max-width: 576px) {
  .hero-section { min-height:40vh; padding-top:60px; }
  .media-placeholder { width:200px; height:200px; }
}