/* =====================================================
   FINAL style.css (Reference gradient + readable + clean)
   - Navbar gradient matches hero
   - Back-to-top uses same gradient
   - Text readable, cards scale with font
   ===================================================== */

/* -----------------------------
   Global Layout
   ----------------------------- */
   html,
   body {
     height: 100%;
     margin: 0;
     display: flex;
     flex-direction: column;
     font-family: "Poppins", sans-serif;
     scroll-behavior: smooth;
     background-color: #f9f9f9;
   }
   
   main {
     flex: 1;
   }
   
   /* -----------------------------
      Gradient tokens (from your reference)
      ----------------------------- */
   :root {
     --brand-green: #009933;
     --eco-gradient: linear-gradient(135deg, #0f2c64, #1e3c72, #2a5298, #009688);
     --card-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
     --card-shadow-hover: 0 12px 35px rgba(0, 0, 0, 0.12);
   }
   
   /* -----------------------------
      Navbar (MATCH HERO GRADIENT)
      ----------------------------- */
      .navbar {
        padding: 15px 0;
        transition: background 0.3s ease, box-shadow 0.3s ease;
      }
      .navbar.scrolled {
        background: #222 !important;
        box-shadow: 0 4px 20px rgba(0,0,0,0.1);
      }
      

   /* Brand */
   .navbar-brand {
     color: #00a651 !important;
     font-weight: 700;
     font-size: 1.45rem; /* readable */
     display: flex;
     align-items: center;
     /* gap: 10px; */
   }
   
   .navbar-brand img {
     max-height: 100px; /* bigger logo */
     width: auto;
     margin-right: 10px;
     object-fit: contain;
   }
   
   /* Nav links */
   .navbar .nav-link {
     color: rgba(255, 255, 255, 0.92) !important;
     font-weight: 600;
     font-size: 1rem;
   }
   
   .navbar .nav-link:hover {
     color: #fff !important;
   }
   
   /* Active underline like your old look */
   .navbar .nav-link.active {
     color: #fff !important;
     position: relative;
   }
   
   .navbar .nav-link.active::after {
     content: "";
     position: absolute;
     left: 0;
     bottom: -7px;
     width: 100%;
     height: 2px;
     background: #1cc88a;
     border-radius: 2px;
   }
   
   /* -----------------------------
      Hero Section (REFERENCE GRADIENT)
      ----------------------------- */
   .hero {
     min-height: 60vh;
     background: var(--eco-gradient);
     color: #fff;
     text-align: center;
   
     display: flex;
     align-items: center;
     justify-content: center;
   
     padding: 70px 20px;
   }
   
   .hero-content {
     /* keep your animation */
     animation: fadeInDown 1s ease;
     max-width: 900px;
   }
   
   /* Title: logo green (your requirement) */
   .hero h1 {
     font-size: 3.1rem;
     font-weight: 800;
     margin-bottom: 18px;
     color: var(--brand-green);
   }
   
   .hero p {
     font-size: 1.2rem;
     opacity: 0.92;
     margin-bottom: 28px;
   }
   
   .hero .btn {
     background: #fff;
     color: #333;
     font-weight: 700;
     border-radius: 10px;
     padding: 10px 18px;
     box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
   }
   
   /* -----------------------------
      About Section
      ----------------------------- */
   .about-section {
     background: #f0f4f8;
     padding: 80px 20px;
     text-align: center;
   }
   
   .about-section p {
     font-size: 1.08rem; /* readable */
     line-height: 1.8;
     color: #333;
     max-width: 950px;
     margin: 18px auto;
   }
   
   .about-section em {
     color: #444;
     font-style: italic;
   }
   
   /* -----------------------------
      Section Title
      ----------------------------- */
   .section-title {
     font-weight: 800;
     position: relative;
     margin-bottom: 40px;
     font-size: 2.05rem;
   }
   
   .section-title::after {
     content: "";
     display: block;
     width: 64px;
     height: 4px;
     background: #1cc88a;
     margin: 10px auto 0;
     border-radius: 2px;
   }
   
   /* -----------------------------
      Cards (scaled up with font)
      ----------------------------- */
   .team-card,
   .advisor-card,
   .product-card,
   .mission-card {
     background: #fff;
     border-radius: 16px;
     transition: 0.3s ease;
   
     /* keep your scroll fade logic */
     opacity: 0;
     transform: translateY(40px);
   
     box-shadow: var(--card-shadow);
     padding: 28px 22px; /* ✅ bigger cards so text doesn't cramp */
   }
   
   /* Hover */
   .team-card:hover,
   .advisor-card:hover,
   .product-card:hover,
   .mission-card:hover {
     transform: translateY(-8px) scale(1.03);
     box-shadow: var(--card-shadow-hover);
   }
   
   /* Team image */
   .team-img {
     width: 155px;
     height: 155px;
     border-radius: 50%;
     object-fit: cover;
     object-position: center -2%;
   }
   
   /* Product cards (if you ever use img) */
   .product-card img {
     height: 190px;
     width: 100%;
     object-fit: cover;
   }
   
   /* SVG Icon Container (for your current products page) */
   .card-icon {
     width: 100%;
     height: 200px; /* ✅ scales with card size */
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 1rem;
   }
   .card-icon svg {
     width: 98px;
     height: 98px;
     display: block;
   }
   
   /* -----------------------------
      Mission Section
      ----------------------------- */
   .mission-section {
     background: #ffffff;
     padding: 70px 20px;
   }
   
   .mission-card {
     text-align: center;
     background: #fff;
   }
   
   .mission-card:hover {
     background-color: #f7fcfa;
   }
   
   .mission-card i {
     font-size: 34px;
     color: #1cc88a;
     margin-bottom: 16px;
   }
   
   .mission-card h5 {
     font-weight: 700;
     margin-bottom: 10px;
     font-size: 1.12rem;
   }
   
   .mission-card p {
     font-size: 1rem;
     color: #666;
     min-height: 64px;
   }
   
   .icon i {
     color: #1cc88a;
     transition: transform 0.3s ease;
   }
   
   .mission-card:hover .icon i {
     transform: scale(1.1);
   }
   
   /* -----------------------------
      Invest Button — match gradient
      ----------------------------- */
   .btn-invest {
     background: var(--eco-gradient);
     color: #fff;
     font-weight: 700;
     border: none;
     padding: 10px 16px;
     border-radius: 10px;
     transition: all 0.3s ease;
   }
   
   .btn-invest:hover {
     filter: brightness(1.05);
     transform: translateY(-2px);
   }
   
   /* -----------------------------
      Contact Page
      ----------------------------- */
   .contact-section {
     padding: 70px 0;
     background: #f0f4f8;
   }
   
   .contact-card {
     background: #fff;
     border-radius: 16px;
     padding: 32px;
     box-shadow: var(--card-shadow);
   }
   
   /* Make form readable */
   .form-label {
     font-weight: 700;
     font-size: 1rem;
   }
   .form-control,
   textarea {
     font-size: 1rem;
     padding: 0.85rem 0.95rem;
     border-radius: 12px;
   }
   
   /* -----------------------------
      Footer
      ----------------------------- */
   footer {
     background: #222;
     color: #fff;
     text-align: center;
     padding: 20px;
     margin-top: auto;
   }
   
   /* -----------------------------
      Back to Top Button (same gradient)
      ----------------------------- */
   #backToTop {
     display: none;
     position: fixed;
     bottom: 30px;
     right: 30px;
   
     background: var(--eco-gradient);
     color: #fff;
   
     border: none;
     border-radius: 50%;
     width: 52px;
     height: 52px;
     font-size: 22px;
     font-weight: 900;
   
     cursor: pointer;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.22);
     transition: transform 0.3s ease;
     z-index: 9999;
   }
   
   #backToTop:hover {
     transform: translateY(-4px) scale(1.05);
   }
   
   /* -----------------------------
      Animations (your code)
      ----------------------------- */
   @keyframes fadeInDown {
     from {
       opacity: 0;
       transform: translateY(-30px);
     }
     to {
       opacity: 1;
       transform: translateY(0);
     }
   }
   
   /* -----------------------------
      Responsive Spacing (your code)
      ----------------------------- */
   @media (max-width: 767px) {
     .mission-card {
       margin-bottom: 20px;
     }
     .about-section p {
       text-align: left;
       padding: 0 15px;
     }
   
     /* Hero scale */
     .hero h1 {
       font-size: 2.2rem;
     }
     .hero p {
       font-size: 1.05rem;
     }
   
     /* Logo smaller on mobile */
     .navbar-brand img {
       max-height: 42px;
     }
   
     /* Card icon spacing for mobile */
     .card-icon {
       height: 170px;
     }
     .card-icon svg {
       width: 88px;
       height: 88px;
     }
   }