/* ============================
   Stripe Payment Styling
   ============================ */
.StripeElement {
  background-color: white;
  height: 40px;
  padding: 10px 12px;
  border-radius: 4px;
  border: 1px solid transparent;
  box-shadow: 0 1px 3px 0 #e6ebf1;
  -webkit-transition: box-shadow 150ms ease;
  transition: box-shadow 150ms ease;
}
.StripeElement--focus {
  box-shadow: 0 1px 3px 0 #cfd7df;
}
.StripeElement--invalid {
  border-color: #fa755a;
}
.StripeElement--webkit-autofill {
  background-color: #fefde5 !important;
}

/* ============================
   🌟 Brand Styling (ComeUpStartup)
   ============================ */

/* CTA Button (Gold) */
.btn.bg-gold {
  background-color: #FFD700 !important;
  color: #ffffff !important;
}
.btn.bg-gold:hover {
  background-color: #e6c200 !important;
  color: #ffffff !important;
}

/* Navbar */
.navbar .nav-link,
.navbar .navbar-brand {
  color: #ffffff !important;
}
.navbar .nav-link:hover {
  color: #FFD700 !important;
}

.bg-gold-dark {
  background-color: #E6C200 !important; /* darker, richer gold */
  color: #002B5B !important;
}

.bg-navy {
  background-color: #002B5B !important;
  color: #FFD700 !important;
}

.btn-primary-action {
  background-color: #002B5B !important;
  color: #ffffff !important;
  border: none;
}

.btn-primary-action:hover {
  background-color: #001d3a !important;
  color: #FFD700 !important; /* subtle gold hover effect */
}


.btn-secondary-action {
  background-color: #007C76 !important;
  color: #ffffff !important;
  border: none;
}

.btn-secondary-action:hover {
  background-color: #005f5a !important;
  color: #FFD700 !important;
}


.btn-join-planner {
  background-color: #007C76 !important;
  color: #ffffff !important;
  font-weight: 600;
}

.btn-login-alt {
  background-color: #002B5B !important;
  color: #ffffff !important;
  font-weight: 600;
}


/* Teal (Join the Planner Suite) */
.bg-teal {
  background-color: #007C76 !important;
  color: #ffffff !important;
}
.bg-teal:hover {
  background-color: #005e5b !important;
  color: #ffffff !important;
}

/* Navy (Login Button) */
.bg-navy {
  background-color: #002B5B !important;
  color: #ffffff !important;
}
.bg-navy:hover {
  background-color: #001e3e !important;
  color: #ffffff !important;
}


.dropdown-menu {
  background-color: #002B5B !important;
}
.dropdown-menu .dropdown-item {
  color: white !important;
}
.dropdown-menu .dropdown-item:hover {
  background-color: #FFD700 !important;
  color: #002B5B !important;
}



.btn-join-planner {
  background-color: #007C76 !important;
  color: #ffffff !important;
  font-weight: 600;
  border: none;
  border-radius: 8px;
  padding: 0.5rem 1.2rem;
}

.btn-join-planner:hover {
  background-color: #005f5a !important;
  color: #ffffff !important;
}




/* Mobile Toggle Icon Bars */
.navbar-toggler .navbar-toggler-icon .bar1,
.navbar-toggler .navbar-toggler-icon .bar2,
.navbar-toggler .navbar-toggler-icon .bar3 {
  background-color: #ffffff !important;
}

/* Hero Subtitle + Brand Colors */
.text-purple {
  color: #005089 !important;
}
.text-brand-sub {
  color: #005089 !important;
}

/* Ecosystem Dropdown */
.dropdown-menu .dropdown-item:hover {
  background-color: #002B5B !important;
  color: #ffffff !important;
}

/* Ensure Navbar Links Are Bright */
.navbar-nav .nav-link,
.navbar-nav .fw-bolder {
  color: #ffffff !important;
}
.navbar-nav .nav-link:hover,
.navbar-nav .fw-bolder:hover {
  color: #FFD700 !important;
}

/* ============================
   🌙 Dark Mode Styles
   ============================ */

body.dark-mode {
  background-color: #121212;
  color: #e0e0e0;
}

/* Navbar */
body.dark-mode .navbar {
  background-color: #1e1e1e !important;
}
body.dark-mode .navbar .nav-link,
body.dark-mode .navbar .navbar-brand,
body.dark-mode .navbar-nav .nav-link,
body.dark-mode .navbar-nav .fw-bolder {
  color: #ffffff !important;
}
body.dark-mode .navbar .nav-link:hover,
body.dark-mode .navbar-nav .nav-link:hover,
body.dark-mode .navbar-nav .fw-bolder:hover {
  color: #FFD700 !important;
}
body.dark-mode .navbar-toggler .navbar-toggler-icon .bar1,
body.dark-mode .navbar-toggler .navbar-toggler-icon .bar2,
body.dark-mode .navbar-toggler .navbar-toggler-icon .bar3 {
  background-color: #ffffff !important;
}

/* Buttons */
body.dark-mode .btn.bg-gold {
  background-color: #FFD700 !important;
  color: #ffffff !important;
}
body.dark-mode .btn.bg-gold:hover {
  background-color: #e6c200 !important;
  color: #ffffff !important;
}



.btn.bg-gold {
  background-color: #FFD700 !important;
  color: #ffffff !important;
}
.btn.bg-gold:hover {
  background-color: #e6c200 !important;
  color: #ffffff !important;
}

.btn.bg-gold-dark {
  background-color: #b99700 !important;
  color: #ffffff !important;
}
.btn.bg-gold-dark:hover {
  background-color: #a68400 !important;
  color: #ffffff !important;
}


/* Hero Headings + Brand */
body.dark-mode .text-purple,
body.dark-mode .text-brand-sub {
  color: #91c9ff !important;
}

/* Dropdown Menu */
body.dark-mode .dropdown-menu {
  background-color: #1e1e1e !important;
}
body.dark-mode .dropdown-menu .dropdown-item {
  color: #ffffff !important;
}
body.dark-mode .dropdown-menu .dropdown-item:hover {
  background-color: #FFD700 !important;
  color: #002B5B !important;
}

/* Footer */
body.dark-mode footer {
  background-color: #1e1e1e !important;
  color: #ccc !important;
}
body.dark-mode footer a {
  color: #FFD700 !important;
}

/* Typography (General) */
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6,
body.dark-mode p,
body.dark-mode li,
body.dark-mode a:not(.btn) {
  color: #eaeaea !important;
}

body, .navbar, footer, .dropdown-menu {
  transition: background-color 0.3s ease, color 0.3s ease;
}




.page-header {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.text-brand-sub {
  color: #005089 !important;
}

.hover-shadow:hover {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12) !important;
}

.icon i.feather {
  vertical-align: middle;
}


/* Reset padding/margin for better alignment */
body, html {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Improve spacing around headers and sections */
.page-header {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

section {
  padding-top: 4rem;
  padding-bottom: 4rem;
}



/* Feature Card Branding */
.feature-box, .hover-shadow {
  background-color: #ffffff !important;
  border: 1px solid #e0e0e0;
  border-radius: 1rem;
  transition: all 0.3s ease-in-out;
}

.feature-box:hover {
  box-shadow: 0 4px 20px rgba(0, 43, 91, 0.1);
  transform: translateY(-5px);
}

/* Feature Icon Styling */
.icon i.feather {
  color: #FFD700 !important;
}

/* Feature Title Styling */
.feature-box h6 {
  color: #002B5B !important;
  font-weight: 600;
  font-family: 'Work Sans', sans-serif;
}



.btn-get-started {
  background-color: #FFD700 !important;
  color: #002B5B !important;
  font-family: 'Work Sans', sans-serif;
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  border-radius: 0.6rem;
  box-shadow: 0 4px 12px rgba(255, 215, 0, 0.3);
  transition: background-color 0.3s ease;
}

.btn-get-started:hover {
  background-color: #e6c200 !important;
  color: #002B5B !important;
}


@media (max-width: 768px) {
  .page-header .container.mt-5 {
    margin-top: 1rem !important; /* reduce top margin on mobile */
  }
}

/* Navy Blue Button */
.btn-navystart {
  background-color: #002B5B !important;
  color: #ffffff !important;
  font-family: 'Work Sans', sans-serif;
  font-weight: 600;
  padding: 0.7rem 1.6rem;
  border-radius: 0.6rem;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 43, 91, 0.15);
}

.btn-navystart:hover {
  background-color: #001b3a !important;
  color: #ffffff !important;
}

/* Outline Navy Button */
.btn-outline-navy {
  background-color: transparent !important;
  border: 2px solid #002B5B;
  color: #002B5B !important;
  font-family: 'Work Sans', sans-serif;
  font-weight: 600;
  padding: 0.7rem 1.6rem;
  border-radius: 0.6rem;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-outline-navy:hover {
  background-color: #002B5B !important;
  color: #ffffff !important;
}




/* Feature Icon Container */
.icon-shape {
  width: 70px;
  height: 70px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: #F3F7FB; /* subtle background */
  box-shadow: 0 4px 12px rgba(0, 43, 91, 0.05);
  transition: all 0.3s ease;
}

.icon-shape:hover {
  background-color: #002B5B;
  transform: scale(1.05);
}

.icon-shape svg {
  width: 28px;
  height: 28px;
  color: #002B5B;
  stroke: #002B5B;
}

.icon-shape:hover svg {
  color: #FFD700;
  stroke: #FFD700;
}


/* Homepage H1 Branding */
.homepage-hero h1 {
  font-family: 'Work Sans', sans-serif;
  color: #002B5B;
  font-weight: 700;
}

/* Homepage Hero & Section Headings */
.homepage-hero h1,
.homepage-hero h2,
.homepage-hero h3,
.homepage-section h2,
.homepage-section h3 {
  font-family: 'Work Sans', sans-serif;
  color: #002B5B;
  font-weight: 700;
}

/* Feature Section Icon Headings */
.feature-icon-section h5 {
  font-family: 'Work Sans', sans-serif;
  color: #002B5B;
  font-weight: 600;
  line-height: 1.4;
}



/* Homepage Story Section Title */
.homepage-section h3 {
  font-family: 'Work Sans', sans-serif;
  color: #002B5B;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 1rem;
  border-bottom: 2px solid #FFD700; /* subtle golden underline */
  display: inline-block;
  padding-bottom: 4px;
  transition: all 0.3s ease-in-out;
}

/* Optional hover glow */
.homepage-section h3:hover {
  color: #001f3f;
  border-color: #e6c200;
}

/* Homepage Story Section Paragraph */
.homepage-section p {
  font-family: 'Work Sans', sans-serif;
  color: #444444;
  font-size: 16px;
  line-height: 1.6;
  transition: opacity 0.4s ease-in-out;
}

/* Optional fade-in effect with AOS (already used) */
[data-aos] {
  opacity: 0;
  transition-property: opacity, transform;
}

[data-aos].aos-animate {
  opacity: 1;
}


footer a.text-white:hover {
  color: #FFD700 !important;
  text-decoration: underline;
}



.btn-gold-cta {
  background-color: #FFD700;
  color: #002B5B !important;
  font-family: 'Work Sans', sans-serif;
  font-size: 16px;
  border: none;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.btn-gold-cta:hover {
  background-color: #e6c200;
  color: #ffffff !important;
  transform: translateY(-2px);
}






.bg-info {
  background-color: #002B5B !important;
  border-radius: 12px;
}

.bg-gold {
  background-color: #FFD700 !important;
}

.btn-gold-brand {
  background-color: #FFD700;
  color: #002B5B !important;
  font-family: 'Work Sans', sans-serif;
  font-weight: 600;
  border-radius: 6px;
  padding: 10px 24px;
  transition: all 0.3s ease;
}

.btn-gold-brand:hover {
  background-color: #e6c200;
  color: #ffffff !important;
  transform: translateY(-2px);
}