:root {
     --brand-navy: #0B2840;
     --brand-orange: #E7630D;
     --brand-gray: #e8e8e8;
     --brand-dark: 0B2840;
     --brand-light: hsl(0, 0%, 98%);
     --brand-lightbeige: #f8f6f0;
   }

   body {
     background-color: var(--brand-lightbeige);
     color: var(--brand-dark);
     font-family: 'Poppins', sans-serif;
     margin: 0;
     overflow-x: hidden;
   }

   .hero-image-bg {
     background-color: var(--brand-navy);
   }

   .hero-img {
     width: 100%;
     height: 88vh;
     object-fit: contain;
   }

   .navbar-section {
     position: -webkit-sticky;
     position: sticky;
     top: 0;
     z-index: 1020;
     /* above content */
   }

   .text-justify {
     text-align: justify;
   }

   .navbar {
     background-color: var(--brand-lightbeige);
   }

   .section-cream {
     /* background: linear-gradient(360deg, var(--brand-gray) 50%, var(--brand-lightbeige) 100%); */
     background-color: var(--brand-gray);
     padding: 50px 0;
   }

   .section-light {
     background-color: var(--brand-light);
     padding: 50px 0;
     border-radius: 15px;
   }

   h2 {
     font-weight: 700;
     color: var(--brand-navy);
     position: relative;
     margin-bottom: 3rem;
     text-align: center;
   }

   h2::after {
     content: '';
     width: 80px;
     height: 5px;
     background-color: var(--brand-orange);
     position: absolute;
     bottom: -15px;
     left: 50%;
     transform: translateX(-50%);
   }

 .never-miss-highlight {
  background: linear-gradient(135deg, var(--brand-orange), #ff7f50);
  border-radius: 15px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
}



   /* Feature Cards */
   .feature-card {
     background-color: var(--brand-light);
     border-radius: 15px;
     text-align: center;
     transition: transform 0.3s ease, box-shadow 0.3s ease;
     margin-bottom: 30px;
     height: 100%;
   }

   #about-us .feature-card:hover {
     transform: translateY(-10px);
     border-color: #0B2840;
   }

   .feature-card:hover i {
     transform: scale(1.3);
     background-color: var(--brand-navy);
     width: 50px;
     height: 50px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
   }

   .card-icon-circle {
     background-color: var(--brand-orange);
     width: 50px;
     height: 50px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
   }

   .text-orange {
     color: var(--brand-orange);
   }

   .text-dark {
     color: var(--brand-navy);
   }


   .how-it-works-card:hover {
     transform: translateY(-10px) scale(1.02);
     box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
   }

   .text-list-connect-sell {
     font-size: 5rem;
   }

   /* Categories */
   .categories .card {
     background-color: var(--brand-light);
     border-radius: 10px;
     border: none;
     box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
     transition: transform 0.3s ease, box-shadow 0.3s ease;
     height: 100%;
   }

   .categories .card:hover {
     transform: translateY(-8px);
     box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
   }

   .categories .card i {
     color: var(--brand-orange);
     font-size: 2.5rem;
   }

   /* About Us Image */
   .about-image {
     max-width: 100%;
     border-radius: 15px;
     box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
   }

   /* Join Alerts Section */
   .join-alerts-section {
     background-color: var(--brand-orange);
     color: var(--brand-navy);
      padding: 80px 0;

   }

   /* Contact Section */

   .contact-section {
    /* background: linear-gradient(360deg, var(--brand-gray) 50%, var(--brand-orange) 100%); */
     background-color: var(--brand-navy);

     color: var(--brand-light);
     padding: 80px 0;
     border-radius: 0;
   }


   /* Shared form styles for Contact and Join Alerts sections */
   .contact-section .card,
   .join-alerts-section .card {
     border-radius: 15px;
     background-color: var(--brand-light);
   }

   .contact-section .form-label,
   .join-alerts-section .form-label {
     color: var(--brand-navy);
   }

   .contact-section .form-control,
   .join-alerts-section .form-control {
     border-radius: 10px;
     border: 1px solid var(--brand-gray);
     background-color: #fff;
     color: var(--brand-navy);
     padding: 12px;
   }

   .contact-section .form-control:focus,
   .join-alerts-section .form-control:focus {
     border-color: var(--brand-orange);
     box-shadow: 0 0 0 0.2rem rgba(231, 99, 13, 0.25);
   }

   .bg-brand-gray {
     background-color: var(--brand-gray) !important;
   }

   /* Footer */
   .footer {
     background-color: var(--brand-gray);
     color: var(--brand-dark);
     padding: 80px 0;
   }

   .footer a {
     color: var(--brand-dark);
     text-decoration: none;
     transition: color 0.3s ease;
   }

   .footer a:hover {
     color: var(--brand-orange);
   }

   .social-icons a {
     font-size: 1.8rem;
     margin: 0 12px;
     transition: transform 0.3s ease;
   }

   .social-icons a:hover {
     transform: scale(1.2);
   }

   .footer-logo img {
     height: 80px;
     margin-bottom: 20px;
   }

   /* Responsive Design */
   /*   @media (max-width: 992px) {
     .hero-slogan-section h1 {
       font-size: 3rem;
     }

     .hero-image-section {
       height: 60vh;
     }
   } */

   @media (max-width: 768px) {
     .brand-logo {
       height: 50px;
     }

     h2 {
       font-size: 1.8rem;
     }

     .feature-card {
       padding: 20px;
     }

     .hero-slogan-section h1 {
       font-size: 2rem;
     }

      .text-list-connect-sell {
    font-size: 5rem; /* Adjust as needed */
    white-space: nowrap;  /* Prevent text from wrapping if it’s long */
    overflow: hidden; /* Hide overflowed text */
  }
   }


   /* Bootstrap color overrides with brand colors */
   .text-primary {
     color: var(--brand-orange) !important;
   }

   .text-secondary {
     color: var(--brand-navy) !important;
   }

   .text-dark {
     color: var(--brand-navy) !important;
   }

   .text-light {
     color: var(--brand-light) !important;
   }

   .bg-primary {
     background-color: var(--brand-orange) !important;
   }

   .bg-secondary {
     background-color: var(--brand-navy) !important;
   }

   .bg-light {
     background-color: var(--brand-lightbeige) !important;
   }

   .bg-dark {
     background-color: var(--brand-navy) !important;
   }

   .btn-primary {
     background-color: var(--brand-orange) !important;
     border-color: var(--brand-orange) !important;
     color: var(--brand-light) !important;
   }

   .btn-primary:hover,
   .btn-primary:focus {
     background-color: var(--brand-navy) !important;
     border-color: var(--brand-navy) !important;
     color: var(--brand-light) !important;
   }

   .btn-secondary {
     background-color: var(--brand-navy) !important;
     border-color: var(--brand-navy) !important;
     color: var(--brand-light) !important;
   }

   .btn-secondary:hover,
   .btn-secondary:focus {
     background-color: var(--brand-orange) !important;
     border-color: var(--brand-orange) !important;
     color: var(--brand-light) !important;
   }

   .btn-dark {
     background-color: var(--brand-navy) !important;
     border-color: var(--brand-navy) !important;
     color: var(--brand-light) !important;
   }

   .btn-dark:hover,
   .btn-dark:focus,
   .btn-dark:active {
     background-color: var(--brand-orange) !important;
     border-color: var(--brand-orange) !important;
     color: var(--brand-light) !important;
   }