/* ============================================================================
   Coding Ninjas Clone - Main Stylesheet
   This file contains all CSS styles for the application
   ============================================================================ */

/* ============================================================================
   CSS Variables & Reset
   ============================================================================ */

/* Basic reset & CSS custom properties (variables) */
:root {
  /* primary accent color used for links, buttons and highlights*/
  --accent: #ff6b1a;
  /* muted text color : used for secondary text and metadata*/
  --muted: #6b7280
}

/* universal box sizing -ensures  padding and border are included in width/height*/
* {
  box-sizing: border-box
}

/*================================================================================
                                    Base style
  =================================================================================
  */

/** body size and color*/
body {
  font-family: Inter, system-ui, Arial, Helvetica, sans-serif;
  margin: 0;
  color: #111;
  background: #fff
}

/*container -centered content wrap with max-width*/
.container {
  max-width: 1700px;
  margin: 0 auto;
  padding: 0 16px
}

/* ============================================================================
                                
                                  Header and Navigation 

     =========================================================================*/
/* site header- sticky navigation bar at the top of the page*/
.site-header {
  background: #fff;
  border-bottom: 1px solid #eee;
  position: sticky;
  top: 0;
  z-index: 50;
  height: 90px;
}


/*Header Inner -Flex container for logo and navigation*/
/* .header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0
  } */
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  background: linear-gradient(to right, #ffffff, #ffffff);
}

/*Logo -site branding*/
.logo {
  font-weight: 100%;
  color: #111;
  text-decoration: none;
  font-size: 18px
}

/*Logo span-accent color for part of logo*/
.logo span {
  color: var(--accent);
  margin-left: 6px
}

/*Main Navigation-Navigation Menu container*/
.main-nav {
  display: flex;
  gap: 20px;
  align-items: center;
  font-size: 20px;

}

/*Navigation Links-Individual Navigation items*/
.nav-link {
  color: #111;
  text-decoration: none
}

.logo-img {
  height: 225px;
}

/* ============================================================================
   Buttons
   ============================================================================ */

/*Button hover -default button hover state*/
.btn {
  border: 1px solid #ddd;
  padding: 8px 12px;
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  color: #0f2a44;
}

/*orangeButton -primary action button(accent color)*/

.btn.orange {
  background: var(--accent);
  color: #fff;
  border: 0;
  text-decoration: none;
  font-family: 'Inter', 'Poppins', sans-serif;
  /* Matches nav links font */
  font-size: 16px;
  /* Same text size as nav links */
  font-weight: 500;
  /* Lowered weight to match nav links */

  padding: 10px 22px;
  /* Balanced spacing around longer text */
  border-radius: 8px;
  text-decoration: none;
  display: inline-block;
  transition: all 0.3s ease;


}

/* ==============================================================================
                  Hero section
  ==============================================================================*/
/*hero section -Main Landing Banner section*/

/*Hero Heading -Main headLine */
.hero h1 {
  font-size: 34px;
  margin: 0 0 8px
}

/*Hero Paragraph-subHeadLIne text*/

.hero p {
  opacity: 0.95;
  margin: 0 0 16px
}

/*Hero ctas-call to action button container*/
.hero-ctas {
  display: flex;
  gap: 12px
}

/*================================================================================
                          Feature Section
    ================================================================================
  Feature Grid -Grid layout for grid cards  */

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 18px 0;
  /* height:150px; */
}

/* Feature - Individual feature card */

.feature {
  background: #f8fafc;
  padding: 12px;
  border-radius: 8px
}

/*=================================================================================
                            Course listing and features
    =================================================================================
  Main grid -Layout for filters sidebar and course list */
.main-grid {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 20px;
  padding: 12px 0
}

/*Filters -sidebar container for filters*/
.filters {
  background: #f9fafb;
  padding: 16px;
  border-radius: 8px;
  border: 1px solid #eee;
  width: 300px;
}

/* Filter select-Dropdown select elements*/

.filters select {
  width: 100%;
  padding: 8px;
  border-radius: 8px;
  border: 1px solid #ddd;
  margin-bottom: 10px
}

/*=============================================================================================
  Course cards
  ==============================================================================================*/
/*Card -Individual course card container */
.card {
  background: #fff;
  border-radius: 10px;
  padding: 8px;
  border: 1px solid #eee;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 420px;
}

/*card image-card thumbnail image */
.card img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  border-radius: 8px
}

/*card title -course title text*/
.card .title {
  font-weight: 700
}

/*card meta -secondary text (description ,metadata)*/
.card .meta {
  font-size: 13px;
  color: var(--muted)
}



/* ============================================================================
   Footer
   ============================================================================ */

/* Site Footer - Footer container */
.modal {
  width: 90%;
  max-width: 540px;
  border-radius: 12px;
  padding: 18px;
  border: 1px solid #ddd;
  background: #fff;
  position: relative
}

/*Dim background-overlay when modal is open*/
.modal::backdrop {
  background: rgba(0, 0, 0, 0.5);
}

/* close button for modal*/

.modal-close {
  position: absolute;
  right: 16px;
  top: 16px;
  border: 0;
  background: transparent;
  font-size: 20px;
  cursor: pointer;
  color: #666;
  padding: 4px 8px
}

/*modal heading style */
.modal h2 {
  margin: 0 0 16px 0;
  font-size: 24px
}

/* ===============================
   CONTACT FORM STYLING
   =============================== */
/*Layout for contact form */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 15px;
  max-width: 600px
}

/*contact and textarea styling*/

.contact-form input,
.contact-form textarea {
  padding: 8px;
  border-radius: 6px;
  border: 1px solid #ddd
}

/* ===============================
   AUTH MODAL FORM STYLING
   =============================== */

/* Common layout for authentication forms (login/signup) */
#authContent form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Input field styling */
#authContent input {
  padding: 8px;
  border-radius: 6px;
  border: 1px solid #ddd;
}

/* Label styling */
#authContent label {
  font-weight: 500;
  margin-top: 8px;
}


/* ===============================
   RESPONSIVE DESIGN
   =============================== */

/* Adjust layout for small screens (mobile) */
@media (max-width: 900px) {
  .main-grid {
    grid-template-columns: 1fr;
  }

  .feature-grid {
    grid-template-columns: 1fr;
  }

  .hero h1 {
    font-size: 26px;
  }
}


/* ===============================
   TOAST NOTIFICATION STYLING
   =============================== */

/* Toast popup for success/error messages */
.toast {
  position: fixed;
  right: 16px;
  bottom: 16px;
  background: #111;
  color: #fff;
  padding: 10px 14px;
  border-radius: 8px;
  display: none;
  z-index: 999;
}


/* ===============================
   FOOTER STYLING
   =============================== */

.site-footer {
  background: linear-gradient(180deg, #0b0f1a 0%, #1a1f35 100%);
  color: #fff;
  padding: 50px 20px 30px;
  margin-top: 60px;
  position: relative;
}

/* Accent border line on top of footer */
.site-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background:rgb(4, 136, 4);
  opacity: 0.8;
}

/* Footer heading style */
.site-footer h3 {
  color: #fff;
  font-size: 1.2rem;
  margin: 0 0 16px 0;
  font-weight: 600;
  position: relative;
  padding-bottom: 10px;
}

/* Underline effect for footer headings */
.site-footer h3::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 40px;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
}

/* Paragraph text in footer */
.site-footer p {
  margin: 8px 0;
  line-height: 1.6;
  opacity: 0.85;
  color: #d1d5db;
}

/* Remove default list styles */
.site-footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Footer link items hover animation */
.site-footer li {
  margin: 10px 0;
  transition: all 0.3s ease;
}

.site-footer li:hover {
  transform: translateX(5px);
}

/* Footer links */
.site-footer a {
  color: #d1d5db;
  text-decoration: none;
  transition: all 0.3s ease;
  display: inline-block;
}

/* Footer link hover effect */
.site-footer a:hover {
  color: var(--accent);
  transform: translateX(3px);
}

/* Footer layout container */
.footer-grid {
  display: flex;
  flex-direction: column;
  gap: 35px;
  margin-bottom: 30px;
}

/* Social media icons container */
.socials {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-size: 0.95rem;
}

/* Social icon styles */
.socials a {
  color: #d1d5db;
  transition: all 0.3s ease;
  padding: 5px 10px;
  border-radius: 6px;
}

/* Social icon hover effect */
.socials a:hover {
  color: var(--accent);
  background: rgba(255, 107, 26, 0.1);
  transform: translateY(-2px);
}

/* Copyright section */
.copy {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 20px;
  margin-top: 20px;
  color: #9ca3af;
  font-size: 0.9rem;
  text-align: center;
}


/* ===============================
   FOOTER RESPONSIVE ADJUSTMENTS
   =============================== */

/* Adjust footer layout for tablets and larger screens */
@media (min-width: 768px) {
  .site-footer {
    padding: 60px 30px 40px;
  }

  .footer-grid {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
  }

  .footer-grid>div {
    flex: 1;
    max-width: 350px;
  }
}

/* ============================= */
/* HOME SLIDER STYLES */
/* ============================= */

.slider-section {
  width: 100%;
  margin: 30px 0;
  overflow: hidden;
}

.slider-container {
  position: relative;
  width: 100%;
  max-width: 1100px;
  margin: auto;
  overflow: hidden;
  border-radius: 12px;
}

.slider-wrapper {
  display: flex;
  transition: transform 0.6s ease-in-out;
}

.slide {
  min-width: 100%;
  height: 360px;
  position: relative;
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slide-title {
  position: absolute;
  bottom: 20px;
  left: 20px;
  background: rgba(0, 0, 0, 0.65);
  color: white;
  padding: 12px 18px;
  border-radius: 6px;
  font-size: 18px;
  font-weight: bold;
}

.slider-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.6);
  color: white;
  border: none;
  padding: 12px 16px;
  cursor: pointer;
  font-size: 22px;
  border-radius: 50%;
}

.slider-btn.prev {
  left: 15px;
}

.slider-btn.next {
  right: 15px;
}

/*  HERO SECTION DOUBLE HEIGHT */

.hero {
  height: 600px;
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: background-image 1s ease-in-out;

  max-width: 1450px;
  margin: 0 auto;
  border-radius: 16px;
  overflow: hidden;
}

/*  OVERLAY — LOWER OPACITY */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.15);
}

/*  TEXT ABOVE OVERLAY */
.hero-inner {
  position: relative;
  z-index: 2;

  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px;
  color: white;
}

/* ADMIN BUTTON */
.hero-admin-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 5;
  padding: 8px 12px;
  background: white;
  border: 1px solid #ccc;
  cursor: pointer;
}

.phone-group {
  display: flex;
  gap: 10px;
}

.phone-group select {
  width: 120px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
}

.phone-group input {
  flex: 1;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
}

.captcha-section {
  margin-top: 15px;
}

.captcha-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.captcha-row img {
  height: 45px;
  border: 1px solid #ccc;
}

.captcha-row button {
  padding: 6px 10px;
  cursor: pointer;
}

.error-text {
  display: block;
  color: #d93025;
  font-size: 12px;
  margin-top: 4px;
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.modal-overlay.hidden {
  display: none;
}

.modal-box {
  background: #fff;
  padding: 25px;
  border-radius: 6px;
  width: 90%;
  max-width: 400px;
  text-align: center;
}

.modal-box h3 {
  margin-bottom: 10px;
}

.modal-box p {
  margin-bottom: 20px;
}


/* ===== COURSE CARD ===== */

.course-card {
  width: 100% !important;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.course-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.15);
}

.course-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
}

.course-card h3 {
  font-size: 18px;
  margin: 12px;
}

.course-card p {
  font-size: 14px;
  color: #555;
  margin: 0 12px 12px;
}

.course-card .price {
  font-weight: bold;
  color: #ff6a00;
  margin: 0 12px 12px;
}

/* ================= FORCE LAYOUT FIX ================= */

/* Main layout */
.main-grid {
  display: grid !important;
  grid-template-columns: 280px 1fr !important;
  gap: 32px;
}

/* Courses section */
.courses {
  width: 100%;
}

/* Grid container */
.courses-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px !important;
}

/* Card */
.course-card {
  width: 100% !important;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  cursor: pointer;
  height: 500px;
}

/* Image */
.course-card img {
  width: 100%;
  height: 300px;
  object-fit: cover;
}

/* Text */
.course-card h3 {
  font-size: 18px;
  margin: 12px;
}

.course-card p {
  font-size: 15px;
  color: #555;
  margin: 0 12px 12px;
}

.course-card .price {
  font-weight: bold;
  color: #ff6a00;
  margin: 0 12px 12px;
  font-size: 15px;
}

.notification-container {
  position: relative;
  cursor: pointer;
}

.badge {
  position: absolute;
  top: -6px;
  right: -6px;
  background: red;
  color: white;
  border-radius: 50%;
  padding: 2px 6px;
  font-size: 12px;
}

.dropdown {
  position: absolute;
  right: 0;
  top: 30px;
  background: white;
  border: 1px solid #ccc;
  width: 260px;
}

.notification-item {
  padding: 8px;
  border-bottom: 1px solid #eee;
}

.hidden {
  display: none;
}

/* ===============================
   RESPONSIVE DESIGN
================================ */

@media (max-width: 768px) {

  .contact-form {
    padding: 18px;
  }

  .phone-group {
    flex-direction: column;
  }

  .phone-group select,
  .phone-group input {
    width: 100%;
  }

  .captcha-row {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ================= CART ================= */

.cart-container {
  position: relative;
  color: #349b3c;
}

.cart-container i {
  font-size: 20px;
}

.cart-badge {
  position: absolute;
  top: -8px;
  right: -10px;
  background: red;
  color: white;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 50%;
}

.menu-toggle {
  display: none;
}

/* =========================
   TABLET VIEW
========================= */

@media (max-width:1024px) {

  .container {
    padding: 0 20px;
  }

  .logo-img {
    height: 95px;
  }

  .main-nav {
    gap: 18px;
  }

  .nav-link {
    font-size: 18px;
  }

  /* hero section */

  .hero {
    padding: 80px 20px;
    text-align: center;
  }

  .hero h1 {
    font-size: 36px;
  }

  .hero p {
    font-size: 18px;
  }

  .hero-ctas {
    gap: 15px;
  }

  /* features */

  .feature-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
  }

  /* courses */

  .courses-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
  }

  /* footer */

  .footer-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
  }

}

/* =========================
   MOBILE VIEW
========================= */

@media (max-width:768px) {

  /* hamburger */

  .menu-toggle {
    display: block;
  }

  /* mobile navigation */

  .main-nav {
    position: absolute;
    top: 90px;
    left: 0;
    width: 100%;
    background: #fff;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 25px 0;
    display: none;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  }

  .main-nav.active {
    display: flex;
  }

  .nav-link {
    font-size: 18px;
  }

  /* logo */

  .logo-img {
    height: 130px;
    margin-left: -25px;
  }

  /* hero */

  .hero {
    padding: 70px 20px;
    text-align: center;
  }

  .hero h1 {
    font-size: 28px;
  }

  .hero p {
    font-size: 16px;
    margin-bottom: 20px;
  }

  .hero-ctas {
    display: flex;
    flex-direction: column;
    gap: 15px;
  }

  .hero-ctas .btn {
    width: 40%;
    margin: auto;
  }

  /* features */

  .feature-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  /* courses */

  .courses-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }


  /* cart */

  .cart-container {
    margin-bottom: 10px;
  }

  /* footer */

  .footer-grid {
    display: flex;
    flex-direction: column;
    gap: 25px;
    text-align: center;
  }


  .hero {
    height: auto;
    min-height: 420px;
    border-radius: 12px;
  }

  .site-footer h3 {
    text-align: center;
  }

  .site-footer h3::after {
    left: 50%;
    transform: translateX(-50%);
  }


  .menu-toggle {
    display: block;
    font-size: 24px;
    background: none;
    border: none;
    cursor: pointer;
  }

  .main-nav {
    position: absolute;
    top: 90px;
    left: 0;
    width: 100%;
    background: white;
    flex-direction: column;
    align-items: center;
    display: none;
    padding: 15px 0;
    border-top: 1px solid #eee;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
  }

  .main-nav.active {
    display: flex;
  }

  .nav-link {
    padding: 12px 0;
    font-size: 16px;
  }

  .cart-container1 {
    margin: 10px 0;
  }

  .btn.orange {
    font-size: 14px;
    padding: 8px 16px;
  }



}

/* =========================
   SMALL MOBILE
========================= */

@media (max-width:480px) {

  .hero h1 {
    font-size: 24px;
  }

  .hero p {
    font-size: 15px;
  }

  .logo-img {
    height: 85px;
  }

  .btn {
    font-size: 14px;
    padding: 10px 14px;
  }

  .site-footer {
    padding: 40px 15px;
  }

  .logo-img {
    height: 150px;
    margin-left: -25px;
  }
}

/* ===== COURSE SLIDER ===== */

.slider-container {
  position: relative;
  display: flex;
  align-items: center;
  max-width: 1800px;
  margin: auto;
  background: rgb(230, 230, 217);
}

/* Slider track */
.courses-slider {
  display: flex;
  overflow-x: auto;
  scroll-behavior: smooth;
  gap: 20px;
  padding: 20px;

}

/* Hide scrollbar */
.courses-slider::-webkit-scrollbar {
  display: none;
}

/* .preview-courses {
 width:100vw;
  margin-left: calc(-50vw + 50%);
  padding :40px 0;
} */

/* Course card */
.course-card {
  min-width: 260px;
  flex: 0 0 auto;
  background: #fff;
  padding: 18px;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  transition: 0.3s;
}

.course-card:hover {
  transform: translateY(-5px);
}

/* Buttons */
.slider-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: #ff6600;
  color: white;
  border: none;
  padding: 10px 14px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 2;
}

.slider-btn.left {
  left: -10px;
}

.slider-btn.right {
  right: -10px;
}

.courses-slider {
  display: flex;
  overflow-x: auto;
  scroll-behavior: smooth;
  gap: 20px;
  padding: 20px;
}

/* Hide scrollbar */
.courses-slider::-webkit-scrollbar {
  display: none;
}

.courses-slider {
  display: flex;
  overflow-x: auto;
  gap: 20px;
}

/*  THIS IS THE FIX */
.courses-slider .card {
  min-width: 300px;
  /* force width */
  flex: 0 0 auto;
  /* prevent shrinking */
}

/* ===== TESTIMONIAL SECTION ===== */

.testimonial-section {
  padding: 80px 5%;
  background: #f9f9f9;
}

.testimonial-container {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 1400px;
  margin: auto;
}

/* LEFT IMAGE */
.testimonial-image {
  flex: 1;
}

.testimonial-image img {
  width: 500px;
  border-radius: 20px;
  object-fit: cover;
}

/* RIGHT TEXT */
.testimonial-text {
  flex: 1;
  background: #0b132b;
  color: white;
  padding: 60px;
  margin-left: -60px;
  border-radius: 20px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
}

.testimonial-text p {
  font-size: 25px;
  line-height: 2.0;
  margin-bottom: 25px;
}

.author {
  color: #fca311;
  font-weight: bold;
  font-size: 16px;
}

@media (max-width: 768px) {
  .testimonial-container {
    flex-direction: column;
  }

  .testimonial-text {
    margin-left: 0;
    margin-top: 20px;
    padding: 30px;
  }
}

.testimonial-image {
  flex: 1;
  opacity: 0;
  transform: translateX(-80px);
  animation: slideLeft 1s ease forwards;
}

@keyframes slideLeft {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.testimonial-image img {

  border-radius: 20px;
  object-fit: cover;
  transition: transform 0.5s ease;
}

/* Hover zoom effect */
.testimonial-image img:hover {
  transform: scale(1.05);
}

.testimonial-text {
  flex: 1;
  background: #0b132b;
  color: white;
  padding: 70px;
  margin-left: -80px;
  border-radius: 20px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.25);

  opacity: 0;
  transform: translateX(80px);
  animation: slideRight 1s ease forwards;
  animation-delay: 0.3s;
}

@keyframes slideRight {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.testimonial-text p {
  font-size: 22px;
  line-height: 1.9;
}

.author {
  color: #fca311;
  font-weight: bold;
  font-size: 17px;
}

.testimonial-text:hover {
  transform: translateY(-8px);
  transition: 0.4s ease;
}

.features {
  padding: 100px 5%;
  background: linear-gradient(135deg, #f9fafc, #eef2f7);
  text-align: center;
}

.features h2 {
  font-size: 36px;
  margin-bottom: 60px;
  font-weight: 700;
  color: #0b132b;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 40px;
  /*  more spacing */
  max-width: 1300px;
  /*  increased width */
  margin: auto;
}

.feature {
  background: white;
  padding: 40px 30px;
  border-radius: 20px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
}

.feature::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #fca311, #ff6b00);
  top: 0;
  left: -100%;
  transition: 0.5s;
  z-index: 0;
}

.feature:hover::before {
  left: 0;
}

.feature h3,
.feature p {
  position: relative;
  z-index: 1;
}

.feature:hover {
  transform: translateY(-12px) scale(1.03);
  color: white;
}

.feature:hover h3,
.feature:hover p {
  color: white;
}

.roadmap-section {
  padding: 80px 20px;
  background: #f8f9fb;
  text-align: center;
}

.title {
  font-size: 32px;
  font-weight: bold;
  margin-bottom: 50px;
}

.roadmap-container {
  position: relative;
  max-width: 1000px;
  margin: auto;
  height: 350px;
}

.roadmap-path {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  /* behind nodes */
}

/* Nodes */
.node {
  position: absolute;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: all 0.6s ease;
}

.node::before {
  content: "";
  width: 16px;
  height: 16px;
  background: #fca311;
  border-radius: 50%;
  display: block;
  margin: auto;
}

.node.show {
  opacity: 1;
  transform: translate(-50%, -50%);
}

/* Cards */
.card {
  margin-top: 10px;
  padding: 10px 15px;
  background: white;
  border-radius: 10px;
  font-size: 14px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  white-space: nowrap;
  transition: transform 0.3s;
}

.card:hover {
  transform: scale(1.1);
}

.node {
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 2;
  /* above path */
}

/* ================= ROADMAP SECTION ================= */
.roadmap-section {
  padding: 60px 20px;
  background: #ffffff;
  text-align: center;
}

.roadmap-title {
  font-size: 32px;
  font-weight: 700;
  color: #0f2a44;
  /* navy blue */
  margin-bottom: 30px;
}

.roadmap-image-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}


.roadmap-img {
  max-width: 100%;
  width: 1800px;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  height: 550px;
}

.feature {
  background: linear-gradient(135deg, #fca311, #ff6b00);
  /* ORANGE DEFAULT */
  color: white;

  padding: 40px 30px;
  border-radius: 20px;

  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
  transition: all 0.4s ease;

  position: relative;
  overflow: hidden;
}

/* REMOVE overlay animation OR disable it */
.feature::before {
  display: none;
  /* IMPORTANT */
}

/* TEXT */
.feature h3,
.feature p {
  color: white;
  transition: 0.3s;
}

/* HOVER → WHITE */
.feature:hover {
  background: white;
  color: #0b132b;

  transform: translateY(-10px) scale(1.03);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
}

/* TEXT ON HOVER */
.feature:hover h3,
.feature:hover p {
  color: #0b132b;
}

/* ========================= */
/*  BASE SYSTEM */
/* ========================= */

:root {
  --navy: #0a2540;
  --text: #1f2937;
  --muted: #6b7280;
  --orange: #ff7a00;
  --bg: #ffffff;
  --light-bg: #f8fafc;
  --border: #e5e7eb;
}

body {
  font-family: "Inter", sans-serif;
  background: rgb(230, 230, 217);
  color: var(--text);
  line-height: 1.6;
}

.container {
  width: 90%;
  max-width: 1500px;
  margin: auto;
}

section {
  padding: 80px 0;
}

/* ========================= */
/*  TYPOGRAPHY */
/* ========================= */

h2 {
  font-size: 34px;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 16px;
}

p {
  color: var(--muted);
  font-size: 15px;
}

.center {
  text-align: center;
  max-width: 650px;
  margin: auto;
}

/* ========================= */
/*  HERO POLISH */
/* ========================= */

.hero h1 {
  font-size: 48px;
  font-weight: 600;
  line-height: 1.2;
}

.hero p {
  margin-top: 10px;
  font-size: 16px;
}

/* ========================= */
/*  COURSE SECTION */
/* ========================= */

.courses-section {
  background: var(--light-bg);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.section-header a {
  color: var(--orange);
  font-weight: 500;
}



.card {
  min-width: 260px;
  background: white;
  border-radius: 10px;
  border: 1px solid var(--border);
  overflow: hidden;
  transition: 0.2s ease;
}

.card:hover {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
  transform: translateY(-4px);
}

.card img {
  width: 100%;
  height: 150px;
  object-fit: cover;
}

/* ========================= */
/*  IMPACT */
/* ========================= */

.impact-section {
  text-align: center;
  background: rgb(245, 245, 226);
}

.impact-card {
  margin-top: 30px;
  background: white;
  border-radius: 12px;
  padding: 35px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  border: 1px solid var(--border);

}

.impact-card h3 {
  font-size: 26px;
  color: var(--navy);
}

/* ========================= */
/*  BRIDGE */
/* ========================= */

.bridge-section h2 {
  font-size: 38px;
}

.bridge-section p {
  margin-top: 12px;
}

/* ========================= */
/*  PROGRAMS */
/* ========================= */

.program-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
  margin-top: 30px;
}

.program-card {
  background: white;
  border-radius: 12px;
  padding: 18px;
  border: 1px solid var(--border);
  transition: 0.2s;
}

.program-card img {
  width: 100%;
  border-radius: 8px;
  margin-bottom: 12px;
}

.program-card:hover {
  box-shadow: 0 8px 20px rgba(5, 5, 5, 0.05);
}

/* ========================= */
/*  TESTIMONIAL */
/* ========================= */

.testimonial-section {
  padding: 0;
  background: rgb(245, 245, 226);
}

.testimonial-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.testimonial-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.testimonial-text {
  background: #0a0f1a;
  color: white;
  padding: 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.testimonial-text p {
  font-size: 17px;
  line-height: 1.7;
  margin-bottom: 20px;
}

.testimonial-text span {
  font-size: 13px;
  color: #aaa;
}


/* ========================= */
/*  BACKGROUND SHAPES */
/* ========================= */



.bridge-section::after {
  content: "";
  position: absolute;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, #552c06, transparent);
  bottom: -60px;
  left: -60px;
}

/* ========================= */
/*  BUTTON */
/* ========================= */

.btn.orange {
  background: linear-gradient(45deg, #f5781f, #ffb347);
  color: white;
  padding: 10px 20px;
  border-radius: 6px;
  text-decoration: none;
  transition: 0.2s;

  font-family: 'Inter', 'Poppins', sans-serif;
  /* Matches nav links font */
  font-size: 16px;
  /* Same text size as nav links */
  font-weight: 500;
  /* Lowered weight to match nav links */

  padding: 10px 22px;
  /* Balanced spacing around longer text */
  border-radius: 8px;
  text-decoration: none;
  display: inline-block;
  transition: all 0.3s ease;
}

.btn.orange:hover {
  background: #e56a00;
}

/* ========================= */
/*  RESPONSIVE */
/* ========================= */

@media (max-width: 768px) {

  .impact-card,
  .program-grid {
    grid-template-columns: 1fr;
  }

  .testimonial-wrapper {
    grid-template-columns: 1fr;
  }

  .hero h1 {
    font-size: 32px;
  }

}



/* ========================= */
/*  CARD (FIX SIZE) */
/* ========================= */

.card {
  flex: 0 0 auto;
  width: 300px;
  /* IMPORTANT: fixed width */

  background: white;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  overflow: hidden;

  transition: 0.25s ease;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.card img {
  width: 100%;
  height: 160px;
  object-fit: cover;
}



.card .title {
  font-size: 17px;
  font-weight: 600;
  padding: 12px;

  /* FIX CUT TEXT */
  white-space: normal;
  word-wrap: break-word;
  line-height: 1.4;
}

/* description */
.card .meta {
  padding: 0 12px 12px;
  font-size: 14px;
  color: #6b7280;
}



.slide-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  /* PERFECT CENTER */

  width: 42px;
  height: 42px;

  border-radius: 50%;
  border: none;

  background: white;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);

  cursor: pointer;
  z-index: 10;

  display: flex;
  align-items: center;
  justify-content: center;
}

.slide-btn.left {
  left: -20px;
}

.slide-btn.right {
  right: -20px;
}

/* .slide-btn:hover {
  background: #ff7a00;
  color: white;
} */
.course-slider-wrapper {
  position: relative;
  margin-top: 30px;
}

/* SLIDER */
.course-slider {
  display: flex;
  gap: 20px;
  overflow-x: hidden;
  /* IMPORTANT: hide scroll */
}

/* CARD */
.card {
  flex: 0 0 300px;
  /* fixed width */
  background: #fff;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  overflow: hidden;
}

.card img {
  width: 100%;
  height: 160px;
  object-fit: cover;
}

/* TITLE FIX */
.card .title {
  padding: 12px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
}

/* BUTTONS */
.slide-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;

  width: 45px;
  height: 45px;
  border-radius: 50%;
  border: none;

  background: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);

  cursor: pointer;
  font-size: 22px;
}

.slide-btn.left {
  left: -10px;
}

.slide-btn.right {
  right: -10px;
}

.course-slider-wrapper {
  position: relative;
}

.slide-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 100;

  width: 45px;
  height: 45px;
  border-radius: 50%;
  border: none;

  background: white;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  cursor: pointer;
}

.slide-btn.left {
  left: 0;
}

.slide-btn.right {
  right: 0;
}

/* CARD */
.card {
  flex: 0 0 300px;
  background: white;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  overflow: hidden;

  display: flex;
  flex-direction: column;
}

/* IMAGE */
.card img {
  width: 100%;
  height: 160px;
  object-fit: cover;
}

/* BODY */
.card-body {
  padding: 12px;

}

/* TITLE */
.card .title {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;

  margin-bottom: 6px;
  /* FIX GAP */
}

/* DESCRIPTION FIX */
.card .meta {
  font-size: 14px;
  color: #6b7280;

  line-height: 1.5;

  /* CONTROL HEIGHT PROPERLY */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  /* show 2 lines */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.slide-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 100;

  width: 45px;
  height: 45px;
  border-radius: 50%;
  border: none;

  /*  ALWAYS VISIBLE */
  background: #ffffff;
  color: #0a2540;

  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);

  display: flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;
}

/* INSIDE POSITION */
.slide-btn.left {
  left: 10px;
}

.slide-btn.right {
  right: 10px;
}

/* HOVER ONLY SLIGHT CHANGE */
.slide-btn:hover {
  background: #f3f4f6;
}

.card .meta {
  font-size: 13px;
  color: #6b7280;
  line-height: 1.5;

  /* CLEAN CUT */
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;

  /* FIX HEIGHT EXACTLY FOR 2 LINES */
  max-height: 2em;
  /* 2 lines (1.5 * 2) */
}

.testimonial-section {
  padding: 80px 0;
  background: #f8fafc;
}

/* MAIN FIX */
.testimonial-wrapper {
  max-width: 1000px;
  margin: auto;
  /* center */

  display: grid;
  grid-template-columns: 1fr 1fr;

  border-radius: 16px;
  overflow: hidden;

  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.testimonial-text {
  background: linear-gradient(135deg, #0a2540, #111827);
  color: white;

  padding: 50px 40px;

  display: flex;
  flex-direction: column;
  justify-content: center;
}

.testimonial-text p {
  font-size: 16px;
  line-height: 1.8;
  margin-bottom: 25px;
  color: #e5e7eb;
}

.testimonial-text h4 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.testimonial-text span {
  font-size: 13px;
  color: #35445f;
}

.testimonial-img img {
  border-radius: 0;
  /* handled by wrapper */
}

@media (max-width: 768px) {
  .testimonial-wrapper {
    grid-template-columns: 1fr;
  }

  .testimonial-text {
    padding: 30px;
  }
}

/* ========================= */
/*  IMPACT BACKGROUND */
/* ========================= */

.impact-section {
  position: relative;
  background: #f8fafc;
  overflow: hidden;
  z-index: 1;
}

/* SOFT GRADIENT CIRCLES */
.impact-section::before {
  content: "";
  position: absolute;
  inset: 0;

  background:
    radial-gradient(circle at 80% 20%, rgba(255, 122, 0, 0.15), transparent 200px),
    radial-gradient(circle at 20% 80%, rgba(59, 130, 246, 0.15), transparent 200px);

  z-index: 0;
}

/* CONTENT ABOVE */
.impact-section .container {
  position: relative;
  z-index: 2;
}

/* ========================= */
/*  BRIDGE BACKGROUND */
/* ========================= */

.bridge-section {
  position: relative;
  background: #ffffff;
  overflow: hidden;
  z-index: 1;
}


.bridge-section::before {
  content: "";
  position: absolute;
  inset: 0;

  background:
    radial-gradient(circle at center, rgba(71, 39, 9, 0.12), transparent 250px);

  z-index: 0;
}

/* CONTENT ABOVE */
.bridge-section .container {
  position: relative;
  z-index: 2;
}

.bridge-section::after {
  content: "";
  position: absolute;

  width: 200px;
  height: 200px;

  background: linear-gradient(135deg, #c4650c, #a08312);
  opacity: 0.08;

  border-radius: 20px;

  bottom: -60px;
  right: -60px;

  transform: rotate(25deg);
}

.impact-section::before {
  content: "";
  position: absolute;
  inset: 0;

  background:
    radial-gradient(circle at 80% 20%, rgba(255, 122, 0, 0.18), transparent 280px),
    radial-gradient(circle at 20% 80%, rgba(59, 130, 246, 0.18), transparent 280px);

  z-index: 0;
}

.bridge-section::before {
  content: "";
  position: absolute;
  inset: 0;

  background:
    radial-gradient(circle at center, rgba(255, 122, 0, 0.16), transparent 280px);

  z-index: 0;
}

/* ================= TESTIMONIAL================= */

.testimonial-section {
  padding: 100px 0;
  background: #f8fafc;
}

/* FLEX LAYOUT */
.testimonial-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;

  max-width: 1100px;
  margin: auto;

  position: relative;
}

/* IMAGE LEFT */
.testimonial-img {
  width: 420px;
  height: 300px;

  flex-shrink: 0;
  position: relative;
  z-index: 2;
}

.testimonial-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;

  border-radius: 20px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.25);
}

/* TEXT RIGHT */
.testimonial-text {
  background: linear-gradient(135deg, #0a0f1a, #111827);
  color: rgb(219, 213, 213);
  width: 750px;
  height: 500px;

  padding: 70px 70px 70px 120px;

  border-radius: 20px;

  margin-left: -80px;

  width: 650px;
}

/* TEXT STYLE */
.testimonial-text p {
  font-size: 18px;
  line-height: 1.8;
  margin-bottom: 20px;
}

.testimonial-text h4 {
  margin: 0;
  font-size: 18px;
}

.testimonial-text span {
  font-size: 14px;
  color: #aaa;
}

.testimonial-img img {
  animation: floatImage 4s ease-in-out infinite;
}

@keyframes floatImage {
  0% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-10px);
  }

  100% {
    transform: translateY(0px);
  }
}

.testimonial-text {
  opacity: 0;
  transform: translateX(60px);
  transition: all 0.8s ease;
}

.testimonial-wrapper.show .testimonial-text {
  opacity: 1;
  transform: translateX(0);
}

.btn-orange {
  display: block;
  margin: 20px auto 12px;

  max-width: 140px;
  background: linear-gradient(45deg, #f5781f, #ffb347);
  border: none;
  padding: 12px;
  color: white;
  font-size: 15px;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  transition: 0.3s ease;

  font-family: 'Inter', 'Poppins', sans-serif;
  /* Matches nav links font */
  font-size: 16px;
  /* Same text size as nav links */
  font-weight: 500;
  /* Lowered weight to match nav links */

  padding: 10px 22px;
  /* Balanced spacing around longer text */
  border-radius: 8px;
  text-decoration: none;
  display: inline-block;
  transition: all 0.3s ease;
}

.card {
  display: flex;
  flex-direction: column;
  height: 100%;
  /* ensures equal height */
}

.card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
}

/*  FIX TITLE HEIGHT */
.title {
  min-height: 48px;
  /* keeps space even if title is short */
  font-weight: 600;
}

/*  FIX DESCRIPTION HEIGHT */
.meta {
  min-height: 40px;
}


.btn-orange {
  margin-top: auto;
  margin-bottom: 10px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 140px;

  font-family: 'Inter', 'Poppins', sans-serif;
  /* Matches nav links font */
  font-size: 16px;
  /* Same text size as nav links */
  font-weight: 500;
  /* Lowered weight to match nav links */

  padding: 10px 22px;
  /* Balanced spacing around longer text */
  border-radius: 8px;
  text-decoration: none;
  display: inline-block;
  transition: all 0.3s ease;
}

/*  AUTH OVERLAY */
.auth-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(10, 10, 25, 0.8);
  backdrop-filter: blur(6px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

/* MODAL */
.auth-modal {
  display: flex;
  width: 700px;
  max-width: 90%;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  animation: slideUp 0.4s ease;
}

/* LEFT PANEL */
.auth-left {
  flex: 1;
  background: linear-gradient(135deg, #ff6b00, #cc9042);
  color: white;
  padding: 30px;
}

/* RIGHT PANEL */
.auth-right {
  flex: 1;
  padding: 30px;
}

/* INPUT */
.auth-right input {
  width: 100%;
  padding: 12px;
  margin: 10px 0;
}

/* BUTTON */
.auth-right button {
  width: 100%;
  padding: 12px;
  background: #ff6b00;
  color: white;
  border: none;
  cursor: pointer;
  border-radius: 6px;
}

/* ERROR */
.error {
  color: red;
  font-size: 12px;
}

/* TERMS */
.terms {
  font-size: 14px;
}

/* ANIMATION */
@keyframes slideUp {
  from {
    transform: translateY(40px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/*  BLOCK PAGE */
body.auth-active {
  overflow: hidden;
}

.auth-active .container {
  filter: blur(6px);
  pointer-events: none;
}

/* CAPTCHA BOX */
.captcha-box {
  margin: 10px 0;
}

/* ROW */
.captcha-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* CAPTCHA IMAGE */
#captchaImage {
  height: 45px;
  border-radius: 6px;
  border: 1px solid #ddd;
}

/* REFRESH BUTTON */
.refresh-btn {
  padding: 6px 10px;
  border: none;
  background: #eee;
  cursor: pointer;
  border-radius: 6px;
}

/* INPUT */
#captchaInput {
  width: 100%;
  padding: 10px;
  margin-top: 8px;
}

/* NAME ROW */
.name-row {
  display: flex;
  gap: 10px;
}

.name-row input {
  width: 100%;
}

/* TERMS BOX */
.terms-box {
  background: #f8f9ff;
  border: 1px solid #e0e3ff;
  padding: 10px;
  border-radius: 8px;
  margin: 10px 0;
}

.terms-title {
  font-weight: bold;
  margin-bottom: 5px;
}

.terms-box ul {
  padding-left: 15px;
  font-size: 13px;
}

.terms-box li {
  margin-bottom: 4px;
}

.terms-inline {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  margin-top: 10px;
  cursor: pointer;
}

.terms-inline input {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.resend-btn {
  margin-top: 10px;
  background: transparent;
  color: #ff6b00;
  border: none;
  cursor: pointer;
}

p {
  display: block;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  unicode-bidi: isolate;
}

/* ================= BRAND COLORS ================= */
:root {
  --primary-orange: #ff7a00;
  --primary-orange-dark: #e66a00;

  /* UPDATED NAVY (clean + visible) */
  --navy: #0c2855;
  /* main text */
  --navy-light: #082c5f;
  /* secondary */

  --white: #ffffff;
}

/* ================= NAVBAR BASE ================= */
body {
  font-family: 'Poppins', sans-serif;
}

.site-header {
  background: var(--white);
  border-bottom: 1px solid rgba(56, 123, 211, 0.08);
  /* navy subtle */
}

/* ================= NAV CONTAINER ================= */
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ================= NAV LINKS ================= */
.main-nav {
  display: flex;
  align-items: center;
  gap: 28px;
}

/* NAV ITEMS */
.nav-link {
  font-size: 20px;

  color: var(--navy);
  text-decoration: none;
  position: relative;
  letter-spacing: 0.3px;
  transition: all 0.3s ease;
}

/* Hover underline */
.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 0%;
  height: 2px;
  background: var(--primary-orange);
  transition: width 0.3s ease;
}

.nav-link:hover {
  color: var(--primary-orange);
}

.nav-link:hover::after {
  width: 100%;
}

/* ACTIVE LINK */
.nav-link.active {
  color: var(--primary-orange);
}

.nav-link.active::after {
  width: 100%;
}

/* ================= LOGIN BUTTON ================= */
.btn.orange {
  background: #f58220;;
  color: var(--white);
  font-weight: 600;
  padding: 8px 18px;
  border-radius: 8px;
  transition: all 0.3s ease;

  font-family: 'Inter', 'Poppins', sans-serif;
  /* Matches nav links font */
  font-size: 16px;
  /* Same text size as nav links */
  font-weight: 500;
  /* Lowered weight to match nav links */

  padding: 10px 22px;
  /* Balanced spacing around longer text */
  border-radius: 8px;
  text-decoration: none;
  display: inline-block;
  transition: all 0.3s ease;
}

.btn.orange:hover {
  background: var(--primary-orange-dark);
  transform: translateY(-1px);
}

/* ================= CART ================= */
.cart-container i {
  font-size: 18px;
  color: var(--navy);
  transition: 0.3s;
}

.cart-container i:hover {
  color: var(--primary-orange);
}

/* Badge */
.cart-badge {
  font-size: 11px;
  font-weight: 600;
  background: red;
  color: var(--white);
  padding: 2px 6px;
  border-radius: 50%;
}

/* UNDERLINE (hidden by default) */
.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0%;
  height: 2.5px;
  background: var(--primary-orange);
  border-radius: 2px;
  transition: width 0.3s ease;
}

/* HOVER EFFECT */
.nav-link:hover {
  color: var(--navy);
  /* keep text navy */
}

.nav-link:hover::after {
  width: 100%;
}

/* ================= SEGMENT SECTION ================= */

.segment-section {
  padding: 140px 0;
  background: #f9fbfd;
}

/* ================= TABS ================= */

.segment-tabs {
  display: flex;
  justify-content: space-between;

  width: 100%;
  max-width: 1500px;
  /* INCREASED WIDTH */
  margin: 0 auto 70px;

  background: #ffffff;
  padding: 12px;
  border-radius: 50px;
  font-size: 22px;

  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.segment-tabs .tab {
  flex: 1;
  text-align: center;

  padding: 14px 0;
  border-radius: 40px;

  font-weight: 400;
  color: #0b1f3a;

  cursor: pointer;
  transition: all 0.3s ease;
}

.segment-tabs .tab.active {
  background: #0b1f3a;
  color: #fff;
}

/* ================= CONTENT ================= */

.segment-content {
  max-width: 1500px;
  margin: auto;
}

.segment-pane {
  display: none;
  opacity: 0;
  transform: translateY(20px);
}

.segment-pane.active {
  display: block;
  opacity: 1;
  transform: translateY(0);
  transition: all 0.4s ease;
}

/* ================= GRID ================= */

.segment-grid {
  display: flex;
  align-items: center;
  gap: 60px;
}

/* IMAGE */

.segment-img {
  width: 50%;
  border-radius: 20px;
  object-fit: cover;
  height: 630px;

}

/* TEXT */

.segment-text {
  width: 50%;
}

.segment-text h3 {
  font-size: 20px;
  margin-bottom: 6px;
  color: #0b1f3a;
}

.segment-text p {
  font-size: 15px;
  color: #555;
  line-height: 1.6;
  margin-bottom: 26px;
}

/* BUTTON */

.segment-btn {
  display: inline-block;
  margin-top: 10px;
  padding: 12px 24px;
  background: #ff7a00;
  color: #fff;
  border-radius: 30px;
  text-decoration: none;
  font-weight: 600;
  transition: 0.3s;
}

.segment-btn:hover {
  background: #e66a00;
}

/* ================= RESPONSIVE ================= */

@media (max-width: 768px) {

  .segment-grid {
    flex-direction: column;
  }

  .segment-img,
  .segment-text {
    width: 100%;
  }

  .segment-tabs {
    flex-direction: column;
    border-radius: 20px;
  }
}

.segment-text p {
  max-width: 520px;
}

/* ================= SEGMENT SECTION ================= */

.segment-section {
  padding: 140px 0;
  background: #f9fbfd;
}

/* ================= TABS ================= */

.segment-tabs {
  display: flex;
  justify-content: space-between;

  max-width: 1500px;
  margin: 0 auto 70px;

  background: #fff;
  padding: 12px;
  border-radius: 50px;

  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.segment-tabs .tab {
  flex: 1;
  text-align: center;
  padding: 14px 0;
  border-radius: 40px;
  font-weight: 600;
  color: #0b1f3a;
  cursor: pointer;
  transition: 0.3s;
}

.segment-tabs .tab.active {
  background:var(--accent-green);
  color: #fff;
}

/* ================= GRID ================= */

.segment-grid {
  display: flex;
  gap: 60px;
  align-items: flex-start;
}

/* LEFT SIDE */

.segment-left {
  width: 50%;
}

/* IMAGE BOX */

.segment-image-box {
  position: relative;
}

/* IMAGE */

.segment-img {
  width: 100%;
  border-radius: 20px;
  object-fit: cover;
}

/* ICON */

.segment-icon {
  position: absolute;
  bottom: -45px;
  /* slightly more down */
  left: 25px;

  width: 125px;
  /* increased from 60px */
  height: 125px;

  background: #110249;
  color: #fff;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;

  font-size: 45px;
  /* bigger icon */
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

/* TEXT BELOW IMAGE */

.segment-left-text {
  margin-top: 50px;
}

.segment-left-text h2 {
  font-size: 28px;
  color: #0b1f3a;
  margin-bottom: 12px;
}

.segment-left-text p {
  font-family: 'Inter', sans-serif;

  font-size: 18px;
  line-height: 1.9;
  letter-spacing: 0.4px;

  background:var(--text-navy);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  max-width: 520px;
}

/* RIGHT SIDE */

.segment-text {
  width: 50%;
}

.segment-text h3 {
  font-size: 20px;
  margin-bottom: 6px;
  color: #0b1f3a;
}

.segment-text p {
  font-size: 15px;
  color: #555;
  line-height: 1.6;
  margin-bottom: 26px;
}

/* BUTTON */

.segment-btn {
  display: inline-block;
  margin-top: 10px;
  padding: 12px 24px;
  background:#f58220;
  color: #fff;
  border-radius: 30px;
  text-decoration: none;
  font-weight: 600;
  transition: 0.3s;
}

.segment-btn:hover {
  background: #e66a00;
}

/* ================= PANES ================= */

.segment-pane {
  display: none;
}

.segment-pane.active {
  display: block;
}

/* ================= RESPONSIVE ================= */

@media (max-width: 768px) {

  .segment-grid {
    flex-direction: column;
  }

  .segment-left,
  .segment-text {
    width: 100%;
  }

  .segment-tabs {
    flex-direction: column;
    border-radius: 20px;
  }
}

/* ================= TESTIMONIAL================= */

.testimonial-section {
  padding: 120px 0;
  background: #f8fafc;
  overflow: hidden;
}

.testimonial-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 1500px;
  /* Increased to fit larger components */
  margin: auto;
  position: relative;
}

/* IMAGE LEFT - LARGER DIMENSIONS */
.testimonial-img {
  width: 600px;
  /* Increased width from 420px */
  height: 500px;
  /* Increased height from 300px */
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}

.testimonial-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 24px;
  /* Slightly rounder for the larger size */
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
  animation: floatLarge 5s ease-in-out infinite;
}

/* TEXT RIGHT - ADJUSTED FOR LARGE IMAGE */
.testimonial-text {
  background: linear-gradient(135deg, #0a0f1a, #111827);
  color: rgb(219, 213, 213);
  width: 800px;
  /* Increased width */
  min-height: 350px;
  /* Increased height to match scale */

  /* Pushing the text further right to clear the larger image */
  padding: 80px 80px 80px 160px;

  border-radius: 24px;
  margin-left: -120px;
  /* Deeper overlap for a premium feel */
  display: flex;
  flex-direction: column;
  justify-content: center;

  /* Animation */
  opacity: 0;
  transform: translateX(80px);
  transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.testimonial-wrapper.show .testimonial-text {
  opacity: 1;
  transform: translateX(0);
}

/* TEXT STYLE */
.testimonial-text p {
  font-size: 22px;
  /* Slightly larger font for the bigger container */
  line-height: 1.7;
  margin-bottom: 25px;
  font-style: italic;
}

.testimonial-text h4 {
  font-size: 24px;
  margin: 0;
  color: #fff;
}

.testimonial-text span {
  font-size: 16px;
  color: #3b82f6;
  /* Accent color */
}

/* ANIMATIONS */
@keyframes floatLarge {
  0% {
    transform: translateY(0px) rotate(0deg);
  }

  50% {
    transform: translateY(-15px) rotate(1deg);
  }

  100% {
    transform: translateY(0px) rotate(0deg);
  }
}

/* MOBILE FIX */
@media (max-width: 1100px) {
  .testimonial-wrapper {
    flex-direction: column;
    padding: 0 20px;
  }

  .testimonial-img {
    width: 100%;
    max-width: 500px;
    height: 350px;
  }

  .testimonial-text {
    width: 100%;
    margin-left: 0;
    margin-top: -60px;
    padding: 100px 40px 40px 40px;
    min-height: auto;
  }
}

/* ===============================
   FOOTER STYLING (FINAL REFINED)
   =============================== */

.site-footer {
  background: #0a0f1a;
  /* solid dark for better contrast */
  color: #fff;
  padding: 80px 0 30px;
  margin-top: 80px;
  position: relative;
  border-top: 3px solid #e7e2df;
  /* Accent Line */
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto 40px;
  padding: 0 20px;
}

/* Brand Area */
.footer-brand .logo-img {
  max-height: 220px;
  margin-bottom: 20px;
  display: block;
}

.footer-brand p {
  color: #9ca3af;
  line-height: 1.6;
  font-size: 0.95rem;
  margin-bottom: 25px;
  max-width: 350px;
}

/* SOCIAL ICONS FIX */
.socials {
  display: flex;
  gap: 15px;
}

.socials a {
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.1);
  /* Visible background */
  color: #ffffff !important;
  /* Force white color */
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.3s ease;
  text-decoration: none;
}

.socials a i {
  font-size: 18px;
  /* Icon size */
}

.socials a:hover {
  background: #ff6b1a;
  transform: translateY(-5px);
  color: #fff;
}

/* Headings */
.site-footer h3 {
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 25px;
  position: relative;
  padding-bottom: 10px;
}

.site-footer h3::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 30px;
  height: 2px;
  background: #ff6b1a;
}

/* Links */
.footer-links ul {
  list-style: none;
  padding: 0;
}

.footer-links li {
  margin-bottom: 12px;
}

.footer-links a {
  color: #9ca3af;
  text-decoration: none;
  transition: 0.3s;
  font-size: 0.95rem;
}

.footer-links a:hover {
  color: #ff6b1a;
  padding-left: 5px;
}

/* Contact Section */
.footer-contact p {
  color: #9ca3af;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
}

.footer-contact i {
  color: #ff6b1a;
  width: 20px;
}

/* Bottom Copy */
.copy {
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding-top: 25px;
  text-align: center;
  color: #6b7280;
  font-size: 0.9rem;
}

/* ===============================
   RESPONSIVENESS
   =============================== */

@media (min-width: 768px) {
  .footer-grid {
    grid-template-columns: 1.5fr 1fr 1fr;
  }
}

@media (min-width: 1024px) {
  .footer-grid {
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
  }
}

/* ==========================================
   MOBILE & TABLET RESPONSIVENESS (PRO)
   ========================================== */

/* 1. FLUID TYPOGRAPHY & SPACING */
:root {
  --section-padding: 60px 0;
}

@media (max-width: 1024px) {
  :root {
    --section-padding: 40px 0;
  }

  .container {
    padding: 0 24px;
  }
}

/* 2. HEADER & NAVIGATION */
@media (max-width: 992px) {
  .site-header {
    padding: 10px 0;
  }

  .menu-toggle {
    display: block;
    /* Show hamburger */
    font-size: 1.5rem;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--primary-navy);
  }

  .main-nav {
    position: fixed;
    top: 0;
    right: -100%;
    /* Side drawer effect */
    width: 80%;
    max-width: 300px;
    height: 100vh;
    background: #fff;
    flex-direction: column;
    justify-content: flex-start;
    padding: 80px 30px;
    transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.1);
    z-index: 1000;
  }

  .main-nav.active {
    right: 0;
  }

  .nav-link {
    font-size: 1.2rem;
    padding: 15px 0;
    border-bottom: 1px solid #f0f0f0;
    width: 100%;
  }

  .cart-container {
    margin: 20px 0;
  }
}

/* 3. HERO SECTION */
@media (max-width: 768px) {
  .hero {
    padding: 80px 0 40px;
    text-align: center;
  }

  #heroTitle {
    font-size: 2.2rem;
    line-height: 1.2;
  }

  .hero-ctas {
    flex-direction: column;
    gap: 15px;
  }

  .hero-ctas .btn {
    width: 160px;
  }
}

/* 4. IMPACT SECTION */
@media (max-width: 768px) {
  .impact-card {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* 2x2 on mobile */
    gap: 20px;
    padding: 30px 15px;
  }

  .impact-card div {
    border-right: none;
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
  }

  .impact-card div:nth-child(even) {
    border-right: none;
  }

  .impact-card div:last-child {
    border-bottom: none;
  }
}

/* 5. SEGMENT SECTION (TABS & CONTENT) */
@media (max-width: 992px) {
  .segment-tabs {
    overflow-x: auto;
    /* Scrollable tabs on mobile */
    white-space: nowrap;
    justify-content: flex-start;
    padding-bottom: 10px;
    -webkit-overflow-scrolling: touch;
  }

  .tab {
    padding: 8px 17px;
    font-size: 0.9rem;
  }

  .segment-grid {
    grid-template-columns: 1fr;
    /* Stack Left and Right blocks */
    gap: 40px;
  }

  .segment-left {
    text-align: center;
  }

  .segment-image-box {
    max-width: 400px;
    margin: 0 auto;
  }

  .segment-text {
    padding-left: 0;
  }

  .segment-tabs .tab.active {
    width: 8px;

  }
}

/* 6. PROGRAMS & CAROUSEL */
@media (max-width: 768px) {
  .program-grid {
    grid-template-columns: 1fr;
  }

  .course-slider-wrapper {
    padding: 0 10px;
  }

  .slide-btn {
    display: none;
    /* Hide desktop arrows on mobile, use touch swipe */
  }

  #previewList {
    overflow-x: auto;
    gap: 15px;
    padding-bottom: 20px;
  }
}

/* 7. TESTIMONIAL */
@media (max-width: 768px) {
  .testimonial-wrapper {
    flex-direction: column;
    text-align: center;
    padding: 40px 20px;
  }

  .testimonial-img {
    width: 250px;
    height: 180px;
    margin: 0 auto 20px;
  }

  .testimonial-text p {
    font-size: 1.1rem;
  }
}

/* 8. FOOTER */
@media (max-width: 768px) {
  .footer-grid {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 40px;
  }

  .footer-brand {
    align-items: center;
  }

  .socials {
    justify-content: center;
  }

  .footer-links ul {
    padding: 0;
  }

  .footer-contact p {
    justify-content: center;
  }
}

/* 9. MODALS (Forms) */
@media (max-width: 600px) {
  .auth-modal {
    flex-direction: column;
    width: 95%;
    margin: 10px;
  }

  .auth-left {
    display: none;
    /* Hide promo text on mobile login for focus */
  }

  .auth-right {
    padding: 30px 20px;
  }
}

/* Tablet View Adjustments */
@media (min-width: 768px) and (max-width: 1024px) {

  /* Increase Logo Size */
  .logo-img {
    max-width: 300px;
    /* Adjust this value as needed */
    height: auto;
    transition: transform 0.3s ease;
  }

  /* Shift Nav Links to the Right */
  .header-inner {
    display: flex;
    justify-content: space-between;
    /* Ensures logo stays left, nav stays right */
    align-items: center;
  }

  .main-nav {
    display: flex !important;
    /* Ensure nav is visible on tablets */
    gap: 25px;
    /* Increase spacing between links */
    margin-left: auto;
    /* Pushes the entire nav block to the right */
    padding-right: 5px;
    /* Optional: adds a little breathing room from the edge */
  }

  /* Adjusting individual nav links for better tap targets on tablets */
  .nav-link {
    font-size: 1rem;
    padding: 10px 5px;
  }

  /* Ensure the hamburger menu is hidden if you want the full nav on tablets */
  .menu-toggle {
    display: none;
  }
}

/* Tablet View Adjustments (768px to 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {

  .header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* Ensure the container isn't squeezing the logo */
    padding-left: 10px;
    max-width: 100%;
  }

  .logo {
    /* Move logo slightly left */
    margin-left: -15px;
    display: flex;
    align-items: center;
  }

  .logo-img {
    /* Increased logo size */
    max-width: 350px;
    height: auto;
  }

  .main-nav {
    display: flex !important;
    /* Push nav links to the right */
    margin-left: auto;
    gap: 20px;
  }

  /* Hide hamburger menu on tablets to show full nav */
  .menu-toggle {
    display: none;
  }
}

@media (max-width: 768px) {

  .main-nav {
    position: fixed;
    top: 70px;
    left: 0;
    width: 550px;
    height: auto;

    background: #ffffff;

    display: none;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    padding: 40px 0;
    gap: 25px;

    z-index: 999;
  }

  .main-nav.active {
    display: flex;
  }

  .btn.orange {
    max-width: 180px;
  }

}

@media (max-width: 768px) {

  .main-nav a,
  .main-nav button {
    width: 200px;
    text-align: center;
  }

  .nav-link {
    font-size: 18px;
  }

}

/* Slider Container Fix */
.course-slider-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.course-slider {
  display: flex;
  overflow-x: auto;
  scroll-behavior: smooth;
  gap: 20px;
  padding: 20px 0;
  scrollbar-width: none;
  /* Hide scrollbar Firefox */
  -ms-overflow-style: none;
  /* Hide scrollbar IE/Edge */
  scroll-snap-type: x mandatory;
  /* Enable snap behavior */
}

.course-slider::-webkit-scrollbar {
  display: none;
  /* Hide scrollbar Chrome/Safari */
}

/* Individual Card Snap Logic */
.course-card {
  flex: 0 0 calc(33.33% - 20px);
  /* 3 cards on desktop */
  scroll-snap-align: start;
  transition: transform 0.3s ease;
}

/* --- Mobile View Adjustments --- */
@media (max-width: 768px) {
  .course-card {
    flex: 0 0 100%;
    /* Show exactly 1 card */
    scroll-snap-align: center;
    /* Snap to center on mobile */
  }

  .slide-btn {
    display: flex;
    /* Ensure buttons are visible */
    position: absolute;
    z-index: 10;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    border: 1px solid #ddd;
    top: 50%;
    transform: translateY(-50%);
  }

  .slide-btn.left {
    left: 5px;
  }

  .slide-btn.right {
    right: 5px;
  }

  /* Optional: Hide buttons on very small screens if user prefers swiping */
  /* .slide-btn { display: none; } */
}

/* --- Riipen-Style Mobile Transformation --- */
@media (max-width: 768px) {

  /* 1. Hide the Tabs entirely on mobile */
  .segment-tabs {
    display: none !important;
  }

  /* 2. Force all panes to show (Stacked Layout) */
  .segment-pane {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    margin-bottom: 60px;
    /* Space between the three categories */
    border-bottom: 1px solid #eee;
    padding-bottom: 40px;
  }

  /* 3. Hide the Images as requested */
  .segment-image-box,
  .segment-icon {
    display: none !important;
  }

  /* 4. Layout Adjustments */
  .segment-grid {
    display: block;
    /* Remove Flex/Grid for simple stacking */
    padding: 0 10px;
  }

  .segment-left-text {
    text-align: left;
    margin-bottom: 25px;
  }

  .segment-left-text h2 {
    font-size: 1.8rem;
    color: #ff9800;
    /* Use your brand color for the main titles */
    font-weight: 700;
    margin-bottom: 10px;
  }

  .segment-left-text p {
    font-size: 1rem;
    line-height: 1.6;
    color: #444;
    margin-bottom: 20px;
  }

  /* 5. Bullet Points Styling */
  .segment-text h3 {
    font-size: 1.1rem;
    margin-top: 25px;
    color: #222;
    font-weight: 600;
  }

  .segment-text p {
    font-size: 0.95rem;
    color: #666;
    margin-top: 5px;
  }

  /* 6. Buttons */
  .segment-btn {
    display: inline-block;
    margin-top: 20px;
    width: 100%;
    /* Full width button for easier tapping */
    text-align: center;
    padding: 15px;
  }
}

/* Preloader Styles */
#preloader-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  /* Higher than your header */
  background: #f9f4ee;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: opacity 0.6s ease, visibility 0.6s;
}

#preloader-overlay.fade-out {
  opacity: 0;
  visibility: hidden;
}

.loader-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.logo-svg {
  width: 100px;
  height: auto;
  overflow: visible;
}

.magnifier-group {
  animation: elastic-bounce 2s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite;
  transform-origin: 40px 40px;
}

.weaver-lines {
  stroke: #ffffff;
  stroke-width: 3.5;
  stroke-linecap: round;
  animation: lines-pulse 2s ease-in-out infinite;
}

.brand-name {
  display: flex;
  align-items: center;
  font-family: 'Inter', sans-serif;
  font-size: 32px;
  letter-spacing: -1px;
}

.word-anim {
  opacity: 0;
  display: inline-block;
  transform: translateX(15px);
  animation: pro-reveal 2.5s ease-out infinite;
}

.my {
  color: #1a2b56;
  font-weight: 800;
  animation-delay: 0.1s;
}

.weaver {
  color: #f58220;
  font-weight: 800;
  animation-delay: 0.3s;
  margin-left: 6px;
}

.labs {
  color: #1a2b56;
  font-weight: 900;
  font-style: italic;
  margin-left: 8px;
  animation-delay: 0.5s;
}

/* Animations */
@keyframes elastic-bounce {

  0%,
  100% {
    transform: scale(1) translateY(0);
  }

  40% {
    transform: scale(1.1, 0.9) translateY(-15px);
  }

  60% {
    transform: scale(0.9, 1.1) translateY(5px);
  }
}

@keyframes lines-pulse {

  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.6;
    transform: scale(0.8);
  }
}

@keyframes pro-reveal {
  0% {
    opacity: 0;
    transform: translateX(15px);
    filter: blur(4px);
  }

  15%,
  85% {
    opacity: 1;
    transform: translateX(0);
    filter: blur(0px);
  }

  95%,
  100% {
    opacity: 0;
    transform: translateX(-5px);
  }
}

section {
  background: transparent;
  /* IMPORTANT */
}


/* ===== GLOBAL BACKGROUND FIX ===== */

body {
  background: #f9f4ee !important;
}

/* Remove all section backgrounds */
.courses-section,
.impact-section,
.segment-section,
.testimonial-section,
.features,
.bridge-section,
.programs-section {
  background: transparent !important;
}

.impact-section,
.segment-section,
.testimonial-section,
.features,
.bridge-section {
  background: #f9f4ee !important;
}

.bg-circle {
  position: fixed;
  border: 1px solid rgba(160, 91, 8, 0.25);
  border-radius: 50%;
  z-index: -1;
}

/* Different circle sizes + positions */
.circle1 {
  width: 250px;
  height: 250px;
  top: 120px;
  left: 40px;
}

.circle2 {
  width: 300px;
  height: 300px;
  bottom: 100px;
  right: 60px;
}

.circle3 {
  width: 180px;
  height: 180px;
  top: 60%;
  left: 20%;
}

.circle4 {
  width: 220px;
  height: 220px;
  top: 40%;
  right: 15%;
}

.circle5 {
  width: 120px;
  height: 120px;
  top: 20%;
  right: 30%;
}

/* RECTANGLE OUTLINES */
.bg-rect {
  position: fixed;
  border: 1px solid rgba(255, 140, 0, 0.25);
  border-radius: 30px;
  z-index: -1;
}

/* Top Right Tilted */
.rect1 {
  width: 350px;
  height: 160px;
  top: 80px;
  right: 60px;
  transform: rotate(25deg);
}

/* Top Left Tilted */
.rect2 {
  width: 300px;
  height: 140px;
  top: 60px;
  left: 40px;
  transform: rotate(-20deg);
}

/* Middle Right */
.rect3 {
  width: 400px;
  height: 180px;
  top: 45%;
  right: 10%;
  transform: rotate(18deg);
  opacity: 0.6;
}

/* Bottom Left */
.rect4 {
  width: 320px;
  height: 150px;
  bottom: 80px;
  left: 50px;
  transform: rotate(-25deg);
}

/* Bottom Center Light */
.rect5 {
  width: 500px;
  height: 200px;
  bottom: 40px;
  left: 30%;
  transform: rotate(10deg);
  opacity: 0.4;
}

@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=Inter:wght@400;500&display=swap');

.faq-section {
  background-color: #FAF7F2;
  /* Cream background */
  padding: 100px 20px;
  font-family: 'Inter', sans-serif;
  color: #0A192F;
  /* Navy Blue text */
}

.container {
  max-width: 1455px;
  margin: 0 auto;
}

.faq-title {
  font-family: 'DM+Serif+Display', serif;
  /* Stylish Serif font */
  font-size: 3.5rem;
  margin-bottom: 60px;
  font-weight: 400;
}

.faq-wrapper {
  border-top: 2px solid #070642;
  /* Green line at top */
}

.faq-item {
  border-bottom: 2px solid #070642;
  /* Green line between items */
  cursor: pointer;
}

.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30px 0;
  font-size: 1.4rem;
  font-weight: 500;
  transition: color 0.3s ease;
}

.faq-item:hover .faq-question {
  color: #FF8C00;
  /* Orange hover effect */
}

/* The Green Circle Icon */
.arrow-circle {
  width: 45px;
  height: 45px;
  background-color: #08074b;
  /* Forest Green */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.arrow-circle svg {
  width: 20px;
}

/* Animation Logic */
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease-in-out;
}

.faq-answer p {
  padding-bottom: 30px;
  font-size: 1.2rem;
  line-height: 1.6;
  max-width: 80%;
  color: #444;
}

/* Active State */
.faq-item.active .arrow-circle {
  transform: rotate(180deg);
  background-color: #FF8C00;
  /* Turns orange when open */
}

.faq-item.active .faq-answer {
  max-height: 300px;
}

/* --- PROGRAMS SECTION --- */
.programs-section {
  padding: 100px 0;
  background-color: var(--bg-page);
}

.center-title {
  text-align: center;
  margin-bottom: 60px;
  font-size: 2.5rem;
  color: var(--navy);
}

.program-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 40px;
}

.program-card {
  background: var(--white);
  border-radius: 24px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(0, 0, 0, 0.05);
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),
    border-color 0.4s ease,
    box-shadow 0.4s ease;
}

/* HOVER ANIMATION: Lift card and change border to brand orange */
.program-card:hover {
  transform: translateY(-12px);
  border-color: var(--accent-green);
  box-shadow: 0 20px 40px rgba(26, 43, 86, 0.1);
}

.card-img-wrapper {
  width: 100%;
  height: 240px;
  overflow: hidden;
}

.card-img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.program-card:hover .card-img-wrapper img {
  transform: scale(1.08);
  /* Subtle zoom on hover */
}

.card-body {
  padding: 35px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.card-body h3 {
  font-size: 1.5rem;
  margin-bottom: 18px;
  color: var(--navy);
  line-height: 1.3;
}

.card-body p {
  font-size: 1rem;
  color: var(--text-muted);
  line-height: 1.7;
  margin-bottom: 30px;
  flex-grow: 1;
}

/* --- LEARN MORE BUTTON --- */
.learn-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--navy);
  font-weight: 700;
  font-size: 0.95rem;
  transition: color 0.3s ease;
}

.learn-more-btn i {
  transition: transform 0.3s ease;
  color: #120b3f;
  /* Green arrow matching your reference */
}

.learn-more-btn:hover {
  color: var(--orange);
}

.learn-more-btn:hover i {
  transform: translateX(8px);
  /* Arrow slides right on hover */
}

/* --- ENTRANCE ANIMATION (SCROLL REVEAL) --- */
.animate-scroll {
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.animate-scroll.reveal {
  opacity: 1;
  transform: translateY(0);
}

/* Partners Section Styles */
.partners-section {
  padding: 60px 0;
  background-color: #fff;
  /* or your cream color */
  text-align: center;
  overflow: hidden;
}

.partners-title {
  font-family: 'Serif', 'Georgia', serif;
  /* Matching your FAQ style */
  font-size: 2rem;
  color: #001f3f;
  /* Navy Blue */
  margin-bottom: 40px;
  font-weight: 500;
}

.logo-track-container {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  padding: 20px 0;
}

/* Optional gradient fade on edges */
.logo-track-container::before,
.logo-track-container::after {
  content: "";
  position: absolute;
  top: 0;
  width: 100px;
  height: 100%;
  z-index: 2;
}


.logo-track {
  display: inline-flex;
  align-items: center;
  gap: 60px;
  animation: scrollLogos 2s linear infinite;
}

.logo-track img {
  height: 45px;
  width: auto;
  filter: grayscale(100%);
  opacity: 0.6;
  transition: all 0.3s ease;
}

.logo-track img:hover {
  filter: grayscale(0%);
  opacity: 1;
  transform: scale(1.05);
}

@keyframes scrollLogos {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

/* Mobile responsive */
@media (max-width: 768px) {
  .partners-title {
    font-size: 1.5rem;
  }

  .logo-track img {
    height: 35px;
  }

  .logo-track {
    gap: 40px;
  }
}

.partners-section {
  padding: 60px 0;
  background-color: #fff;
  overflow: hidden;
  /* Hide the logos that move outside the container */
}

.partners-title {
  text-align: center;
  font-size: 2rem;
  color: #1a2b56;
  /* Navy Blue from your theme */
  margin-bottom: 40px;
  font-weight: 700;
}

.logo-track-container {
  width: 100%;
  position: relative;
  display: flex;
}

.logo-track {
  display: flex;
  gap: 80px;
  animation: scrollLogos 35s linear infinite;
  /* Adjust time to change speed */
  white-space: nowrap;
  align-items: center;
}

.logo-track img {
  height: 40px;
  /* Uniform height for all logos */
  width: auto;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.7;
  transition: all 0.3s ease;
}

.logo-track img:hover {
  filter: grayscale(0%);
  opacity: 1;
  transform: scale(1.1);
}

/* The Animation Logic */
@keyframes scrollLogos {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

/* Pause animation on hover for better user experience */
.logo-track-container:hover .logo-track {
  animation-play-state: paused;
}

.logo-track img {
  height: 45px;
  width: auto;
  object-fit: contain;

  filter: none;
  opacity: 1;
  transition: transform 0.3s ease;
  padding: 0 10px;
}

.logo-track img:hover {
  transform: scale(1.1);
}


.partners-section {
  background-color: #ffffff;
  padding: 60px 0;
  overflow: hidden;
}

.partners-header {
  text-align: center;
  margin-bottom: 50px;
}

/* The first, smaller line */
.sub-title {
  display: block;
  /* Ensures it sits on its own line */
  font-size: 1rem;
  /* Small size */
  color: #f58220;
  /* Using your theme's orange for emphasis */
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 600;
  margin-bottom: 10px;
}

/* The second, bigger line */
.partners-title {
  font-size: 2.8rem;
  /* Significantly bigger */
  color: #1a2b56;
  /* Your Navy Blue theme color */
  font-weight: 700;
  margin: 0;
  line-height: 1.2;
}

/* Responsive fix for mobile devices */
@media (max-width: 768px) {
  .partners-title {
    font-size: 2rem;
    /* Scales down for smaller screens */
  }

  .sub-title {
    font-size: 0.9rem;
  }
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  /* Gives the brand more room */
  gap: 30px;
}

/* ============================================================
   profile-dropdown.css
   Profile icon + dropdown styles — navy & orange only.
   Link this in every page that uses the header.
============================================================ */

/* ── tokens ─────────────────────────────────────────────── */
:root {
  --pd-navy: #0d1b3e;
  --pd-navy-mid: #1a2d5a;
  --pd-orange: #f47b20;
  --pd-orange-dark: #d4631a;
  --pd-orange-pale: #fff3e8;
}

/* ── profile icon button ────────────────────────────────── */
.profile-wrap {
  position: relative;
  display: inline-block;
}

.profile-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--pd-orange);
  border: 2px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.03em;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.profile-btn:hover,
.profile-btn.open {
  border-color: var(--pd-orange);
  box-shadow: 0 0 0 3px rgba(244, 123, 32, 0.35);
}

/* ── dropdown panel ─────────────────────────────────────── */
.profile-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 290px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(9, 19, 40, 0.28);
  overflow: hidden;
  z-index: 9999;
  animation: pdDropIn 0.18s ease;
}

.profile-dropdown.visible {
  display: block;
}

@keyframes pdDropIn {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── header strip (navy bg with avatar + name/email) ─────── */
.pd-header {
  background: var(--pd-navy);
  padding: 0.9rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.pd-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--pd-orange);
  color: #fff;
  font-size: 0.95rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 2px solid rgba(255, 255, 255, 0.2);
  letter-spacing: 0.04em;
}

.pd-info {
  min-width: 0;
}

.pd-name {
  color: #fff;
  font-size: 0.88rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pd-email {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.73rem;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── section label ──────────────────────────────────────── */
.pd-section-label {
  font-size: 0.67rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #9aa3b2;
  padding: 0.6rem 1rem 0.2rem;
}

/* ── list item (fav / saved) ────────────────────────────── */
.pd-item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 1rem;
  font-size: 0.82rem;
  color: var(--pd-navy);
  cursor: pointer;
  transition: background 0.15s;
  text-decoration: none;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
}

.pd-item:hover {
  background: var(--pd-orange-pale);
  color: var(--pd-orange-dark);
}

.pd-item svg {
  flex-shrink: 0;
  opacity: 0.65;
}

.pd-item:hover svg {
  opacity: 1;
}

/* ── purchase history row ───────────────────────────────── */
.pd-purchase-row {
  border-left: 3px solid var(--pd-orange);
  margin: 0.2rem 1rem;
  padding: 0.3rem 0.55rem;
  background: var(--pd-orange-pale);
  border-radius: 0 6px 6px 0;
  font-size: 0.76rem;
  color: var(--pd-navy);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pd-purchase-row span {
  font-weight: 600;
  color: var(--pd-orange-dark);
}

/* ── empty state ────────────────────────────────────────── */
.pd-empty {
  font-size: 0.76rem;
  color: #b0b8c9;
  padding: 0.25rem 1rem 0.5rem;
  font-style: italic;
}

/* ── divider ────────────────────────────────────────────── */
.pd-divider {
  height: 1px;
  background: #f0f2f5;
  margin: 0.35rem 0;
}

/* ── logout button ──────────────────────────────────────── */
.pd-logout {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.6rem 1rem;
  font-size: 0.82rem;
  color: #c0392b;
  cursor: pointer;
  transition: background 0.15s;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  font-weight: 600;
}

.pd-logout:hover {
  background: #fff0f0;
}



/* ================= NAV LINKS (DESKTOP) ================= */
.nav-link {
  font-family: 'Inter', 'Poppins', sans-serif;
  /* Changes the font face */
  font-size: 1 rem;

  color: var(--navy);
  text-decoration: none;
  position: relative;
  letter-spacing: 0.5px;
  transition: all 0.3s ease;
}

/* ================================================= */
/*             FOOTER RESPONSIVENESS                 */
/* ================================================= */

@media (max-width: 1024px) {
  .footer-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* 2 columns for tablets */
    gap: 40px;
    padding-bottom: 30px;
  }

  .footer-brand {
    grid-column: span 2;
    /* Brand description takes full width on tablet */
    text-align: center;
    margin-bottom: 20px;
  }

  .footer-brand .socials {
    justify-content: center;
    /* Center icons */
  }
}

@media (max-width: 768px) {
  .site-footer {
    padding: 50px 0 20px;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    /* Stack everything in 1 column */
    text-align: center;
    gap: 30px;
  }

  .footer-brand {
    grid-column: span 1;
  }

  .footer-links ul {
    padding: 0;
    list-style: none;
  }

  .footer-links h3 {
    margin-bottom: 15px;
    font-size: 1.2rem;
  }

  /* Center the contact info icons */
  .footer-contact p {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
  }

  .copy {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }
}

@media (max-width: 480px) {
  .footer-brand p {
    font-size: 0.9rem;
  }

  .footer-links h3 {
    font-size: 1.1rem;
  }

  .site-footer .container {
    padding: 0 20px;
  }
}


/* MOBILE VIEW */
@media (max-width: 768px) {

  .header-inner {
    position: relative;
  }

  /* HAMBURGER BUTTON */
  .menu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    z-index: 1002;
  }

  .menu-toggle i {
    font-size: 24px;
    color: #000;
  }

  /* MOBILE NAV MENU */
  .main-nav {

    position: absolute;

    top: 70px;
    left: 0;

    max-width: 100%;

    background: #fff;

    padding: 32px 24px;

    display: none;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    gap: 22px;

    border-radius: 0 0 16px 16px;

    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);

    z-index: 1001;
  }

  /* SHOW MENU */
  .main-nav.active {
    display: flex;
  }

  /* NAV LINKS */
  .main-nav .nav-link {
    width: 100%;

    text-align: center;

    font-size: 22px;
  

    color: #111;
  }

  /* LOGIN BUTTON */
  .main-nav .btn {
    width: 100%;
    text-align: center;
  }

  /* CART */
  .cart-container {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  /* PROFILE */
  .profile-wrap {
    position: relative;

    width: fit-content;

    margin: 0 auto;
  }

  .profile-btn {
    margin: 0 auto;
  }

  /* DROPDOWN */
  .profile-dropdown {

    display: none;

    position: absolute;

    top: 48px;

    left: 50%;

    transform: translateX(-50%);

    width: 320px;
    max-width: 90vw;

    background: #fff;

    border-radius: 14px;

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);

    z-index: 9999;
  }

  .profile-dropdown.show {
    display: block;
  }

  /* CART */
  .cart-container {
    position: relative;

    display: flex;
    justify-content: center;
    align-items: center;
  }

  .cart-container a {
    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .cart-badge {
    position: absolute;

    top: -8px;
    right: 152px;

    min-width: 18px;
    height: 18px;

    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 11px;
    font-weight: 600;

    background: red;
    color: #fff;
  }
}

@media (max-width: 768px) {

  .main-nav {

    position: fixed;

    top: 0;
    left: 0;

    width: 100vw;


    background: #fff;

    padding: 90px 24px 40px;

    display: none;

    flex-direction: column;
    align-items: center;

    gap: 28px;

    /* overflow-y: auto; */

    z-index: 1001;
  }

  .main-nav.active {
    display: flex;
  }

}

/* ===============================
   FOOTER STYLING (WHITE TO GREEN)
   =============================== */

.site-footer {
  /* Blends from an elegant off-white down into your sage green */
  background: linear-gradient(to bottom, #f8fafc 0%, #f1f5f9 40%, var(--complient-sage-green, #114d27) 100%);

  padding: 80px 0 30px;
  margin-top: 80px;
  border-top: 3px solid #e7e2df;
  position: relative;


}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 2fr 2fr 2fr 2fr;
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto 40px;
  padding: 0 20px;
}

/* Responsive drop for mobile screen layouts */
@media (max-width: 768px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }
}

/* ===================================================
   TEXT COLOR CONTRAST REFINEMENTS
   Because the top half is white, text needs to be dark at 
   the top and stand out cleanly across the whole block.
   =================================================== */

/* Headings (Now dark charcoal so they stand out on the white top half) */
.site-footer h3 {
  color: #1e293b;
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 25px;
  position: relative;
  padding-bottom: 10px;
}

.site-footer h3::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 30px;
  height: 2px;
  background: #ff6b1a;
}

/* Main Brand Text paragraph */
.footer-brand p {
  color: #334155;
  line-height: 1.6;
  font-size: 0.95rem;
  margin-bottom: 25px;
  max-width: 350px;
}

/* Navigation Links */
.footer-links ul {
  list-style: none;
  padding: 0;
}

.footer-links li {
  margin-bottom: 12px;
}

.footer-links a {
  color: #334155;
  text-decoration: none;
  transition: 0.3s;
  font-size: 0.95rem;
}

.footer-links a:hover {
  color: #ff6b1a;
  padding-left: 5px;
}

/* Contact Info Area */
.footer-contact p {
  color: #334155;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
}

.footer-contact i {
  color: #ff6b1a;
  width: 20px;
}

/* SOCIAL ICONS (Dark borders/icons so they look clean on the bright background) */
.socials {
  display: flex;
  gap: 15px;
}

.socials a {
  width: 40px;
  height: 40px;
  background: rgba(30, 41, 59, 0.08);
  /* Muted semi-transparent dark ring */
  color: #1e293b !important;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.3s ease;
  text-decoration: none;
}

.socials a:hover {
  background: #ff6b1a;
  transform: translateY(-5px);
  color: #fff !important;
}

/* Bottom Copyright Strip */
.copy {
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  padding-top: 25px;
  text-align: center;
  color: #e2e8f0;
  /* Crisp white-slate text to pop perfectly off the green base */
  font-size: 0.9rem;
}



/* Responsive drop for mobile screen layouts */
@media (max-width: 768px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }
}



/* Headings */
.site-footer h3 {
  color: #0b0b45;
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 25px;
  position: relative;
  padding-bottom: 10px;
}

.site-footer h3::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 30px;
  height: 2px;
  background: #ff6b1a;
}

/* Main Brand Text paragraph */
.footer-brand p {
  color: #0b0b45;
  line-height: 1.6;
  font-size: 0.95rem;
  margin-bottom: 25px;
  max-width: 350px;
}

/* Navigation Links */
.footer-links ul {
  list-style: none;
  padding: 0;
}

.footer-links li {
  margin-bottom: 12px;
}

.footer-links a {
  color: #0b0b45;
  text-decoration: none;
  transition: 0.3s;
  font-size: 0.95rem;
}

.footer-links a:hover {
  color: #ff6b1a;
  padding-left: 5px;
}

/* Contact Info Area */
.footer-contact p {
  color: #0b0b45;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
}

.footer-contact i {
  color:#f58220;;
  width: 20px;
}

/* SOCIAL ICONS */
.socials {
  display: flex;
  gap: 15px;
}

.socials a {
  width: 40px;
  height: 40px;
  background: rgba(11, 11, 69, 0.08);
  color: #0b0b45 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.3s ease;
  text-decoration: none;
}

.socials a:hover {
  background: #ff6b1a;
  transform: translateY(-5px);
  color: #fff !important;
}


.copy {
  border-top: 1px solid rgba(11, 11, 69, 0.1);
  padding-top: 25px;
  text-align: center;
  color: #e2e8f0;
  font-size: 0.9rem;
}

/* ==========================================================================
   GET STARTED NAVBAR BUTTON - EXTRA WIDE EDITION
   ========================================================================== */
.nav-btn-get-started {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;

  /* --- MAXIMUM WIDTH LAYOUT CHANGES --- */
  min-width: 150px !important;
  /* Significantly wider baseline footprint */
  height: 52px !important;
  /* Proportional height boost for larger width */
  padding: 0 76px 0 36px !important;
  /* Generous horizontal inner spacing */
  box-sizing: border-box !important;
  border-left: 2px;

  /* Styling & Colors */
  background-color: #ffffff !important;
  color: #1a253c !important;
  /* Deep Navy Blue text */
  font-family: system-ui, -apple-system, sans-serif !important;
  font-size: 22px !important;
  /* Slightly larger text to match size */
  font-weight: 400 !important;
  text-decoration: none !important;
  border: 1px solid #f58220 !important;
  /* Clean orange border */
  border-radius: 8px !important;

  /* Vector Arrow Setup */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 32 24' stroke='%23f97316' stroke-width='3'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M2 12h26M20 4l8 8-8 8'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: calc(100% - 28px) center !important;

  /* --- EXTRA WIDE ARROW GRAPHIC DIMENSIONS --- */
  background-size: 36px 24px !important;
  /* Expanded scale for a longer, more prominent arrow */

  transition: all 0.2s ease-in-out !important;
  cursor: pointer !important;
}

/* Dynamic Interactive States */
.nav-btn-get-started:hover {
  background-color: #fff7ed !important;
  background-position: calc(100% - 22px) center !important;
  /* Smooth tracking micro-movement */
  box-shadow: 0 4px 12px rgba(249, 115, 22, 0.15) !important;
}

#authBtn[style*="display: none"],
#authBtn[style*="display:none"] {
  display: none !important;
  width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Layout Defaults and Canvas Tone */
.platform-hero-section {
  width: 100%;
  min-height: 100vh;
  background-color: #F8F6F0;
  /* Warm off-white tone */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px;
  overflow: hidden;
  position: relative;
  box-sizing: border-box;
}

.platform-hero-section * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.platform-hero-container {
  max-width: 1280px;
  width: 100%;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 40px;
  align-items: center;
  position: relative;
}

/* Left Sidebar Typography Mapping */
.platform-hero-left {
  z-index: 10;
}

.platform-hero-heading {
  font-family: 'Georgia', serif;
  font-size: 3.4rem;
  font-weight: 400;
  line-height: 1.15;
  color: #0A1E33;
  margin-bottom: 48px;
  max-width: 620px;
}

/* Button Call To Action Layout Rules */
.platform-hero-ctas {
  display: flex;
  gap: 20px;
}

.platform-hero-cta-block {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.platform-hero-label {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  color: #555A60;
  letter-spacing: 0.3px;
  text-align: center;
  width: 100%;
  max-width: 165px;
}

.platform-hero-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  background-color: #FFFFFF;
  text-decoration: none;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: #0A1E33;
  padding: 10px 12px 10px 24px;
  border-radius: 12px;
  min-width: 185px;
  height: 75px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
  transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.25s ease;
}

.platform-hero-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(10, 30, 51, 0.08);
}

.platform-hero-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: #FFFFFF;
  font-size: 1.1rem;
}

.platform-circle-green {
  background-color: #086636;
}

.platform-circle-orange {
  background-color: #FF7300;
}


/* ==========================================================================
   GRAPHIC MATRIX: RESOLVING VISUAL OVERLAP ERRORS
   ========================================================================== */
.platform-hero-right {
  position: relative;
  width: 100%;
  height: 540px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.platform-geo-shape {
  position: absolute;
  transition: transform 0.1s ease-out;
}

/* Layer 1: Navy Wedge */
.platform-blue-wedge {
  top: -40px;
  right: 60px;
  width: 350px;
  height: 350px;
  background: linear-gradient(135deg, #0e3475 0%, #536992 40%, #F8F6F0 85%);
  clip-path: polygon(100% 0, 0 0, 100% 100%);
  z-index: 1;
}

/* Layer 2: Skewed Diamond (Man) */
.platform-man-diamond {
  top: 20px;
  right: -10px;
  width: 260px;
  height: 310px;
  z-index: 3;
  clip-path: polygon(28% 0%, 100% 12%, 72% 100%, 0% 88%);
  overflow: hidden;
}

.inner-gradient-bg-blue {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #2561CD 0%, #5893F7 50%, #C6DCFF 100%);
  z-index: 1;
}

.cutout-portrait {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}

.portrait-man {
  bottom: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translateX(-50%) scale(1.05);
}

/* Layer 3: Circular Geometric Node Wrapper (Woman) */
.platform-woman-circle {
  top: 130px;
  left: -20px;
  width: 310px;
  height: 310px;
  z-index: 4;
  overflow: hidden;
  clip-path: circle(50% at 50% 50%);
  /* Clamps the container tightly into a perfect round circle */
}

.inner-gradient-bg-green {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 30%, #228B22 0%, #006400 55%, #8FBC8F 85%, #F8F6F0 100%);
  z-index: 1;
}

/* THE FIX: Blends the profile photo cleanly directly into our CSS green background gradient */
.blended-portrait-woman {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
  z-index: 2;
  /* This drops the white image background and merges the girl right into our green radial setup */
  mix-blend-mode: multiply;
  opacity: 0.95;
}

/* Layer 4: Lower Green Accent Pill */
.platform-green-pill {
  bottom: -35px;
  right: 150px;
  width: 200px;
  height: 145px;
  background-color: #0A5C2C;
  border-radius: 38px;
  transform: rotate(-28deg);
  z-index: 2;
}

/* Layer 5: Orange Background Base Circle */
.platform-orange-circle {
  bottom: -120px;
  right: -100px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: radial-gradient(circle at 55% 55%, #EE7916 0%, #F49D51 45%, #FAD4B2 80%, #F8F6F0 100%);
  z-index: 1;
}

/* Responsive Structural Breakpoints */
@media (max-width: 1024px) {
  .platform-hero-container {
    grid-template-columns: 1fr;
    gap: 80px;
  }

  .platform-hero-heading {
    font-size: 2.8rem;
    max-width: 100%;
  }

  .platform-hero-right {
    max-width: 520px;
    margin: 0 auto;
  }
}

/* Container Box setting up the geometry */
.profile-circle-container {
  position: relative;
  width: 310px;
  height: 310px;
  border-radius: 50%;
  overflow: hidden;
  /* Fallback containment */

  /* CRITICAL FIX: This acts as an invisible cookie cutter, clamping 
       the image background strictly into a perfect circle */
  clip-path: circle(50% at 50% 50%);
  -webkit-clip-path: circle(50% at 50% 50%);
}

/* Layer 1: The Green + White Radial Blend Background */
.circle-gradient-backdrop {
  position: absolute;
  inset: 0;
  /* Soft, glowing green wash turning into the clean light cream edge */
  background: radial-gradient(circle at 45% 45%, #228B22 0%, #0B592E 50%, #8FBC8F 85%, #F8F6F0 100%);
  z-index: 1;
}

/* Layer 2: Image Masking and Zoom Positioning */
.masked-portrait {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  /* object-fit: cover zooms into the portrait to make her look centered,
       hiding unnecessary portions of her left/right office walls */
  object-fit: cover;
  object-position: center 25%;
  /* Slightly adjusts the height focus on her face */

  z-index: 2;

  /* OPTIONAL MIX-BLEND: If you want the green gradient to tint or bleed into 
       the dark areas of her office photo, uncomment the line below: */
  /* mix-blend-mode: multiply; */
}

/* Layer 3: Circular Geometric Node Wrapper (Woman Portrait) */
.platform-woman-circle {
  position: absolute;
  /* Keeps your structural alignment position exactly where it is */
  top: 195px;
  left: 0px;

  width: 300px;
  height: 300px;
  z-index: 4;
  overflow: hidden;

  /* The mask cleanly trims the rectangular photo boundaries into a circle */
  clip-path: circle(50% at 50% 50%);
  -webkit-clip-path: circle(50% at 50% 50%);
}

/* The Green Gradient Backdrop sitting safely behind the portrait */
.inner-gradient-bg-green {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 30%, #228B22 0%, #006400 55%, #8FBC8F 85%, #F8F6F0 100%);
  z-index: 1;
}

/* FIXED PORTRAIT STYLING: Restores natural photo coloration */
.blended-portrait-woman {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;

  /* Scales her portrait to fill the space smoothly like a window view */
  object-fit: cover;
  object-position: center bottom;

  /* FIX: Set to normal to clear out the green color tint override */
  mix-blend-mode: normal;
  opacity: 1;

  z-index: 2;
}

/* ==========================================================================
   1. BUTTONS & HOVER EFFECTS (The Premium Arrow Growth)
   ========================================================================== */

.platform-hero-btn {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  gap: 12px;
  position: relative;
  overflow: visible;
  transition: color 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Base style for the circle surrounding the arrow */
.platform-hero-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  /* Playful elastic snap */
  position: relative;
}

/* Individual arrow wrapper for independent scaling */
.platform-hero-circle .arrow {
  display: inline-block;
  font-size: 18px;
  transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transform-origin: center;
}

/* ULTRA PRO HOVER STATE */
.platform-hero-btn:hover .platform-hero-circle {
  transform: scale(1.12);
  /* Slightly grows the outer circle background */
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
  /* Adds premium depth */
}

.platform-hero-btn:hover .arrow {
  /* Enlarges the arrow and nudges it forward slightly */
  transform: scale(1.4) translateX(2px);
}

/* Dynamic glow effects based on theme color */
.platform-circle-green {
  background-color: #4CAF50;
  color: white;
}

.platform-hero-btn:hover .platform-circle-green {
  box-shadow: 0 0 25px rgba(76, 175, 80, 0.5);
}

.platform-circle-orange {
  background-color: #FF9800;
  color: white;
}

.platform-hero-btn:hover .platform-circle-orange {
  box-shadow: 0 0 25px rgba(255, 152, 0, 0.5);
}


/* ==========================================================================
   2. ULTRA PRO MAX ENTRANCE ANIMATIONS (Page Load)
   ========================================================================== */

/* Left Side Text Revelations */
.animate-fade-up {
  opacity: 0;
  transform: translateY(40px);
  animation: premiumFadeUp 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.animate-fade-up-delayed {
  opacity: 0;
  transform: translateY(30px);
  animation: premiumFadeUp 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: 0.3s;
}

/* Right Side Geometric Shapes & Image Reveals */
.pop-in {
  opacity: 0;
  transform: scale(0.7) translateY(50px) rotate(-5deg);
  filter: blur(10px);
  /* Cinematic camera focus effect */
  animation: ultraPopIn 1.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: var(--delay, 0s);
}

/* Gentle floating idle animation so the section doesn't feel dead after loading */
.platform-geo-shape {
  will-change: transform;
}

.platform-man-diamond {
  animation: ultraPopIn 1.4s cubic-bezier(0.16, 1, 0.3, 1) forwards, floatMan 6s ease-in-out infinite alternate;
  animation-delay: 0.4s, 1.8s;
  /* Floating starts AFTER entry finishes */
}

.platform-woman-circle {
  animation: ultraPopIn 1.4s cubic-bezier(0.16, 1, 0.3, 1) forwards, floatWoman 7s ease-in-out infinite alternate;
  animation-delay: 0.6s, 2s;
}


/* ==========================================================================
   3. KEYFRAMES
   ========================================================================== */

@keyframes premiumFadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes ultraPopIn {
  0% {
    opacity: 0;
    transform: scale(0.7) translateY(60px) rotate(-5deg);
    filter: blur(15px);
  }

  50% {
    filter: blur(0px);
  }

  100% {
    opacity: 1;
    transform: scale(1) translateY(0) rotate(0deg);
    filter: blur(0px);
  }
}

/* Idle floating animation keys */
@keyframes floatMan {
  0% {
    transform: translateY(0px) rotate(0deg);
  }

  100% {
    transform: translateY(-12px) rotate(1deg);
  }
}

@keyframes floatWoman {
  0% {
    transform: translateY(0px) scale(1);
  }

  100% {
    transform: translateY(10px) scale(1.02);
  }
}

/* ==========================================================================
   1. CTA WRAPPER & CENTERING CENTRIC LAYOUT
   ========================================================================== */

.platform-hero-ctas {
  display: flex;
  justify-content: center;
  /* Centers the buttons horizontally */
  align-items: center;
  /* Vertically aligns them if heights vary */
  gap: 40px;
  /* Generous modern spacing between blocks */
  width: 100%;
  /* Uses entire container width to calculate center */
  margin-top: 30px;
  /* Separates button tier from the main heading */
  flex-wrap: wrap;
  /* Graceful wrapping for mobile screens */
}

.platform-hero-cta-block {
  display: flex;
  flex-direction: column;
  /* Places label neatly directly over the button */
  align-items: center;
  /* Centers both label and button relative to each other */
  gap: 8px;
  /* Space between tiny label and interactive button */
}

.platform-hero-label {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  opacity: 0.7;
  text-align: center;
  /* Ensures label text is centered */
}

/* ==========================================================================
   2. INTERACTIVE BUTTON STYLES & ARROW GROW HOVER
   ========================================================================== */

.platform-hero-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  gap: 14px;
  padding: 10px 24px;
  background-color: rgba(255, 255, 255, 0.08);
  /* Optional premium backdrop pill track */
  border-radius: 50px;
  transition: background 0.3s ease, transform 0.3s ease;
}

.platform-hero-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  /* Smooth elastic response bounce curve for premium feel */
  transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.platform-hero-circle .arrow {
  display: inline-block;
  font-size: 18px;
  transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* --- HOVER MICRO-INTERACTIONS --- */
.platform-hero-btn:hover {
  background-color: rgba(255, 255, 255, 0.15);
  transform: translateY(-2px);
  /* Slight lift off the baseline */
}

.platform-hero-btn:hover .platform-hero-circle {
  transform: scale(1.15);
  /* Expands color circle container background */
}

.platform-hero-btn:hover .arrow {
  transform: scale(1.35) translateX(3px);
  /* Enlarges and drives arrow forward */
}

/* Dynamic Shadow Glows */
.platform-circle-green {
  background-color: #2e7d32;
  color: #ffffff;
}

.platform-hero-btn:hover .platform-circle-green {
  box-shadow: 0 0 20px rgba(46, 125, 50, 0.6);
}

.platform-circle-orange {
  background-color: #ef6c00;
  color: #ffffff;
}

.platform-hero-btn:hover .platform-circle-orange {
  box-shadow: 0 0 20px rgba(239, 108, 0, 0.6);
}

/* ==========================================================================
   3. STRUCTURAL ENTRANCE ANIMATIONS
   ========================================================================== */
.animate-fade-up {
  opacity: 0;
  transform: translateY(30px);
  animation: premiumFadeUp 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.animate-fade-up-delayed {
  opacity: 0;
  transform: translateY(20px);
  animation: premiumFadeUp 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: 0.2s;
}

@keyframes premiumFadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* ==========================================================================
   UPDATED CTA WRAPPER (Shifted Slightly Left)
   ========================================================================== */

.platform-hero-ctas {
    display: flex;
    justify-content: flex-start; /* Aligns items to the left side */
    align-items: center;      
    gap: 40px;                /* Modern, spacious gap between blocks */
    width: 100%;              
    margin-top: 35px;         /* Generous spacing below heading */
    
    /* CONTROL THE SHIFT HERE */
    padding-left: 15px;       /* Gives it a slight offset breathing room from the extreme left edge */
    
    flex-wrap: wrap;          /* Responsive fallback for smaller screens */
}

.platform-hero-cta-block {
    display: flex;
    flex-direction: column;   /* Places label cleanly over the button */
    align-items: flex-start;  /* Aligns both label and button to their local left edges */
    gap: 8px;                 
}

.platform-hero-label {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    opacity: 0.75;
    padding-left: 4px;        /* Micro-alignment tweak to line up with the button curve */
}

/* ==========================================================================
   BUTTON STYLES & PREMIUM INTERACTIONS (Retained)
   ========================================================================== */

.platform-hero-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    gap: 14px;
    padding: 10px 24px;
    background-color: rgba(255, 255, 255, 0.08); 
    border-radius: 50px;
    transition: background 0.3s ease, transform 0.3s ease;
}

.platform-hero-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Smooth elastic snap */
}

.platform-hero-circle .arrow {
    display: inline-block;
    font-size: 18px;
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Hover Actions */
.platform-hero-btn:hover {
    background-color: rgba(255, 255, 255, 0.15);
    transform: translateY(-2px); 
}

.platform-hero-btn:hover .platform-hero-circle {
    transform: scale(1.15); 
}

.platform-hero-btn:hover .arrow {
    transform: scale(1.35) translateX(3px); 
}

/* Glow Themes */
.platform-circle-green { background-color: #2e7d32; color: #ffffff; }
.platform-hero-btn:hover .platform-circle-green {
    box-shadow: 0 0 20px rgba(46, 125, 50, 0.6);
}

.platform-circle-orange { background-color: #f58220; color: #ffffff; }
.platform-hero-btn:hover .platform-circle-orange {
    box-shadow: 0 0 20px rgba(239, 108, 0, 0.6);
}
/* Styling variables to match your exact requested palette */
:root {
  --bg-beige: #f5f2eb;        /* Section background */
  --card-white: #ffffff;      /* Card background */
  --text-navy: #0f172a;       /* Base Navy Blue color for text */
  
  /* Accent Colors for inner card text elements */
  --accent-orange: #f97316;   
  --accent-green:#0f6145;    
  --accent-navy: #0e1e49;     
}

.why-us-section {
  
  padding: 80px 24px;
  font-family: system-ui, -apple-system, sans-serif;
  display: flex;
  justify-content: center;
}

.why-us-container {
  max-width: 1400px;
  width: 100%;
 
  border-radius: 28px;
  padding: 60px 40px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
  text-align: center;
}

.why-us-title {
  color: var(--text-navy);
  font-size: 2.25rem;
  font-weight: 700;
  margin-bottom: 16px;
}

.why-us-subheading {
  color: var(--text-navy);
  opacity: 0.85;
  font-size: 1.1rem;
  line-height: 1.6;
  max-width: 750px;
  margin: 0 auto 48px auto;
}

.why-us-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

/* Individual Card Setups */
.why-us-card {
  background-color: #f8fafc; /* Sub-box background */
  border-radius: 16px;
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.why-us-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
}

.card-icon svg {
  width: 28px;
  height: 28px;
}

.card-title {
  color: var(--text-navy);
  font-size: 1.5rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.card-text {
  font-size: 18px;
  line-height: 1.5;
  margin: 0;
  font-weight: 500;
}

/* Dynamic Accent Themes for text / icons inside the sub-boxes */
.theme-orange {
  color: var(--accent-green);
}
.theme-orange .card-text, .theme-orange .card-title { color: var(--accent-green); }

.theme-green {
  color: #f58220;
}
.theme-green .card-text, .theme-green .card-title { color:#f58220; }

.theme-navy {
  color: var(--accent-navy);
}
.theme-navy .card-text, .theme-navy .card-title { color: var(--accent-navy); }



.why-us-subheading {
  color: var(--text-navy);
  opacity: 0.85;
  
  /* Forces the content to stay on a single line */
  white-space: nowrap; 
  
  /* Uses a fluid typography value so it scales dynamically down on medium screens */
  font-size: clamp(0.85rem, 1.4vw, 1.1rem); 
  
  line-height: 1.6;
  max-width: 100%;
  margin: 0 auto 48px auto;
}

/* Graceful handling for mobile displays where text must wrap */
@media (max-width: 768px) {
  .why-us-subheading {
    white-space: normal;
    font-size: 1rem;
  }
}
/* Generic scroll elements */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.animate-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Why Us cards — JS controls these inline, no CSS needed */
.why-us-card {
  will-change: opacity, transform;
}
/* ========================================= */
/* WHY US SECTION - WITH BRIDGE BACKGROUND  */
/* ========================================= */

.why-us-section {
  position: relative;
  /* Retains the page baseline beige tone while allowing gradients to blend on top */
  background: var(--bg-beige); 
  padding: 80px 24px;
  font-family: system-ui, -apple-system, sans-serif;
  display: flex;
  justify-content: center;
  overflow: hidden;
  z-index: 1;
}

/* CENTER ORANGE GLOW (PORTED FROM THE BRIDGE DESIGN ENGINE) */
.why-us-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(255, 122, 0, 0.16), transparent 380px);
  z-index: 0;
  pointer-events: none; /* Prevents interference with scroll selection interaction */
}


.why-us-section::after {
  content: "";
  position: absolute;
  width: 200px;
  height: 200px;
  background: linear-gradient(135deg, #c4650c, #a08312);
  opacity: 0.08;
  border-radius: 20px;
  bottom: -60px;
  right: -60px;
  transform: rotate(25deg);
  z-index: 0;
  pointer-events: none;
}

/* KEEPS INNER MAIN INTERFACE CONTAINER STABLY DISPLAYED OVER RADIAL SHADOWS */
.why-us-container {
  position: relative;
  max-width: 1400px;
  width: 100%;
  
  border-radius: 28px;
  padding: 60px 40px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
  text-align: center;
  z-index: 2; /* Forces contents forward above the pseudo radial glow filters */
}

.why-us-title {
  color: var(--navy);
  font-size: 2.25rem;
  font-weight: 700;
  margin-bottom: 16px;
}

.why-us-subheading {
  color:var(--pd-navy);
  opacity: 0.85;
  white-space: nowrap; 
  font-size: clamp(0.85rem, 1.4vw, 1.1rem); 
  line-height: 1.6;
  max-width: 100%;
  margin: 0 auto 48px auto;
  font-weight: 300px;
}

/* Graceful handling for mobile displays where text must wrap */
@media (max-width: 768px) {
  .why-us-subheading {
    white-space: normal;
    font-size: 1rem;
  }
}
/* Styling for the Professional Bridge Paragraph Text */
.bridge-professional-text {
  /* High-end executive editorial font treatment */
  font-family: "Playfair Display", "Georgia", "Times New Roman", serif;
  font-size: 1.35rem;
  line-height: 1.8;
  letter-spacing: -0.01em;
  color: #1e293b; /* Premium deep slate instead of harsh pure black */
  max-width: 950px;
  margin: 16px auto 0 auto;
  text-align: center;
  font-weight: 400;
  
  /* Text-rendering optimization for sleek look */
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  
  /* Ensures the brand text does not awkwardly decouple on larger screens */
  white-space: normal; 
}

/* Brand Name Inline Grouping Container */
.brand-split {
  /* Keeps the brand font clean, modern, and perfectly grouped on one line */
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-weight: 700;
  letter-spacing: -0.03em;
  display: inline-flex;
  white-space: nowrap; /* Prevents "My" or "Weaver" from dropping to a new line alone */
}

/* Brand Name Color Split Rules */
.brand-my {
  color: #f97316; /* Clean crisp Orange */
}

.brand-weaver {
  color: #0f172a; /* Deep Corporate Navy Blue */
}

.brand-labs {
  color: #f97316; /* Clean crisp Orange */
}

/* Clean scaling for mobile viewports */
@media (max-width: 768px) {
  .bridge-professional-text {
    font-size: 1.15rem;
    line-height: 1.6;
    padding: 0 12px;
  }
}
/* Styling for the Professional Bridge Paragraph Text */
.bridge-professional-text {
  /* High-end executive editorial font treatment */
  font-family: "Playfair Display", "Georgia", "Times New Roman", serif;
  
  /* Fluid typography shrinks the text automatically so the whole sentence fits on one line */
  font-size: clamp(0.75rem, 1.45vw, 1.25rem); 
  
  line-height: 1.8;
  letter-spacing: -0.01em;
  color: #1e293b; /* Premium deep slate instead of harsh pure black */
  width: 100%;
  margin: 16px auto 0 auto;
  text-align: center;
  font-weight: 100;
  
  /* Text-rendering optimization for sleek look */
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  
  /* STRICTLY FORCES THE ENTIRE PARAGRAPH INTO ONE SINGLE LINE */
  white-space: nowrap; 
}

/* Brand Name Inline Grouping Container */
.brand-split {
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-weight: 700;
  letter-spacing: -0.03em;
  display: inline-flex;
  white-space: nowrap; 
}

/* Brand Name Color Split Rules */
.brand-my {
  color: #f97316; /* Clean crisp Orange */
}

.brand-weaver {
  color: #0f172a; /* Deep Corporate Navy Blue */
}

.brand-labs {
  color: #f97316; /* Clean crisp Orange */
}

/* On ultra-small screens/mobiles, force single-line text to allow horizontal swipe or adjust gently */
@media (max-width: 600px) {
  .bridge-professional-text {
    font-size: 0.7rem; /* Shrinks even further to protect the single-line rule on tiny screens */
  }
}
/* ================= CLEAN LINE-ONLY TABS ================= */

/* 1. Reset the container */
.segment-tabs {
  display: flex;
  gap: 40px; 
  border-bottom: 5px solid #e2e8f0; /* Soft baseline for the tabs to sit on */
  margin-bottom: 40px;
  background: transparent !important; /* Forces out any background on the wrapper */
  padding: 0 !important;
}

/* 2. Strip ALL box styles from the tabs */
.segment-tabs .tab {
  font-family: 'Poppins', sans-serif;
  font-size: 18px;
  font-weight: 500;
  color: #555555;
  
  /* Critical overrides to remove the box structure */
  padding: 12px 0 !important;       /* No horizontal padding */
  background: transparent !important; /* Removes rectangle background */
  background-color: transparent !important;
  border: none !important;            /* Removes rectangle borders */
  box-shadow: none !important;        /* Removes any shadow boxes */
  border-radius: 0 !important;        /* Removes rounded corners */
  
  cursor: pointer;
  position: relative;
  transition: color 0.3s ease;
}

/* 3. Text colors on state changes */
.segment-tabs .tab:hover {
  color: #0b1f3a;
}

.segment-tabs .tab.active {
  color: #0b1f3a;
  font-weight: 600;
}

/* 4. The underlying line indicator */
.segment-tabs .tab::after {
  content: "";
  position: absolute;
  bottom: -2px; /* Sits perfectly right on the container line */
  left: 0;
  width: 100%;
  height: 6px; /* Thickness of your orange line */
  background-color: rgb(9, 117, 9) !important; /* Your signature orange */
  border-radius: 12px;
  /* Line animation hook */
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

/* 5. Trigger line display */
.segment-tabs .tab.active::after,
.segment-tabs .tab:hover::after {
  transform: scaleX(1);
}
/* ─────────────────────────────────────────────────
   MYWEAVERLABS NAVBAR – Simplified Riipen Aesthetic
───────────────────────────────────────────────── */

.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #ffffff;
  box-shadow: 0 1px 0 rgba(0,0,0,.08);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2rem;
  height: 68px;
  max-width: 1600px;
  margin: 0 auto;
}


/* Pure CSS Hamburger Button (No FontAwesome dependency) */
.menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  width: 30px;
  height: 22px;
  flex-direction: column;
  justify-content: space-between;
  padding: 0;
  z-index: 1001;
}

.menu-toggle span {
  display: block;
  width: 100%;
  height: 3px;
  background-color: #1a2b56;
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

/* Hamburger to X Transformation */
.menu-toggle.open span:nth-child(1) { transform: translateY(9.5px) rotate(45deg); }
.menu-toggle.open span:nth-child(2) { opacity: 0; }
.menu-toggle.open span:nth-child(3) { transform: translateY(-9.5px) rotate(-45deg); }

/* ── Top-level nav ── */
.main-nav {
  display: flex;
  align-items: center;
  gap: 6px;
}

.nav-item { 
  position: relative; 
}

/* All top-level links and toggle buttons */
.nav-link,
.nav-item > .nav-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  font-family: 'DM Sans', 'Poppins', sans-serif;
  font-size: 22px;
  
  color: #1a2b56;
  text-decoration: none;
  border-radius: 6px;
  white-space: nowrap;
  background: none;
  border: none;
  cursor: pointer;
  transition: color .16s, background .16s;
  letter-spacing: .01em;
  outline: none;
}

.nav-link:hover,
.nav-item:hover > .nav-link,
.nav-item.open > .nav-link {
  color: #f58220;
}

/* Riipen-style Active Indicator Underline */
.nav-item.open > .nav-link {
  position: relative;
}
.nav-item.open > .nav-link::after {
  content: '';
  position: absolute;
  bottom: -14px; /* Pins nicely underneath the bottom of header layout */
  left: 14px;
  right: 14px;
  height: 2px;
  border-radius: 2px;
  background: #f58220;
  z-index: 1000;
}

/* Chevron arrow indicator */
.nav-chevron {
  width: 10px;
  height: 6px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .2s ease;
}
.nav-item.open > .nav-link .nav-chevron { 
  transform: rotate(180deg); 
}

/* ─────────────────────────────────────────────
   MEGA / FULL-WIDTH DROPDOWNS (Unified)
───────────────────────────────────────────── */
.mega-menu {
  position: fixed;
  top: 68px;
  left: 0;
  right: 0;
  background: #ffffff;
  border-top: 1px solid #e8eaf0;
  border-bottom: 1px solid #e8eaf0;
  box-shadow: 0 8px 32px rgba(26,43,86,.10);
  z-index: 998;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity .18s, transform .18s cubic-bezier(.4,0,.2,1);
}

.nav-item.open .mega-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* Inner block - scales with maximum header containment metrics */
.mega-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 32px 2rem 36px;
  display: flex;
  gap: 64px;
}

.mega-col {
  min-width: 160px;
}

/* Header Text categorization context tags */
.mega-col-heading {
  font-family: 'DM Sans', 'Poppins', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: .09em;

  color: #a0abc0;
  margin: 0 0 14px;
  padding: 0;
}

/* Interactive routes within dropdown cards */
.mega-link {
  display: block;
  font-family: 'DM Sans', 'Poppins', sans-serif;
  font-size: 0.9rem;
  font-weight: 400;
  color: #1a2b56;
  text-decoration: none;
  padding: 6px 0;
  transition: color .15s;
  line-height: 1.4;
}
.mega-link:hover { 
  color: #f58220; 
}

/* Dummy/In-progress styling rule sets */
.mega-link-soon {
  color: #b0bac8;
}
.mega-link-soon::after {
  content: ' — soon';
  font-size: 0.75rem;
  color: #c8d0dc;
}

/* ── Login / Action Interface Button ── */
.nav-btn-login {
  margin-left: 12px;
  padding: 8px 22px;
  background: transparent;
  color: #1a2b56;
  border: 1.5px solid #1a2b56;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 600;
  font-family: 'DM Sans', 'Poppins', sans-serif;
  text-decoration: none;
  cursor: pointer;
  transition: background .18s, color .18s;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
}

.nav-btn-login:hover {
  background: #1a2b56;
  color: #ffffff;
}

/* ── Backdrop Layout ── */
#megaBackdrop {
  display: none;
  position: fixed;
  inset: 68px 0 0 0;
  background: rgba(10,20,50,.15);
  z-index: 997;
}
#megaBackdrop.active { 
  display: block; 
}

/* ─────────────────────────────
   MOBILE RESPONSIVE OVERRIDES
───────────────────────────────*/
@media (max-width: 900px) {
  .menu-toggle { 
    display: flex; 
  }

  .main-nav {
    display: none;
    flex-direction: column;
    align-items: stretch;
    position: absolute;
    top: 68px;
    left: 0; 
    right: 0;
    background: #ffffff;
    border-top: 1px solid rgba(0,0,0,.07);
    box-shadow: 0 8px 24px rgba(26,43,86,.1);
    padding: 16px;
    gap: 4px;
    z-index: 999;
    max-height: calc(100vh - 68px);
    overflow-y: auto;
  }
  .main-nav.open { 
    display: flex; 
  }

  .nav-item { width: 100%; }
  .nav-link { width: 100%; border-radius: 7px; justify-content: space-between; padding: 12px 14px; }
  .nav-item.open > .nav-link::after { display: none; }

  .mega-menu {
    position: static;
    transform: none !important;
    border: none;
    box-shadow: none;
    display: none;
    padding: 0;
    background: #fafafa;
    border-radius: 6px;
  }
  .nav-item.open .mega-menu { 
    display: block; 
    opacity: 1; 
  }

  .mega-inner {
    flex-direction: column;
    gap: 20px;
    padding: 16px;
  }
  
  .mega-col-heading { 
    margin-bottom: 8px; 
  }

  .nav-btn-login { 
    margin: 12px 0 4px; 
    justify-content: center; 
    width: 100%; 
  }
  
  #megaBackdrop { 
    display: none !important; 
  }
}
/* ─────────────────────────────────────────────────
   MYWEAVERLABS NAVBAR – Professional Card Layout
───────────────────────────────────────────────── */

.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #ffffff;
  box-shadow: 0 1px 0 rgba(0,0,0,.06);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2rem;
  height: 68px;
  max-width: 1600px;
  margin: 0 auto;
}

.logo-img { 
  margin-top: 30px;
  height: 220px; 
  width: auto; 
  display: block; 
}

/* Mobile Toggle Hamburger */
.menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  width: 26px;
  height: 18px;
  flex-direction: column;
  justify-content: space-between;
  padding: 0;
  z-index: 1001;
}

.menu-toggle span {
  display: block;
  width: 100%;
  height: 2.5px;
  background-color: #1a2b56;
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.menu-toggle.open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.menu-toggle.open span:nth-child(2) { opacity: 0; }
.menu-toggle.open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* ── Top Level Navigation links ── */
.main-nav {
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav-item { 
  position: relative; 
}


.nav-link:hover,
.nav-item:hover > .nav-link,
.nav-item.open > .nav-link {
  color: #f58220;
}

/* Underline Indicator */
.nav-item.open > .nav-link {
  position: relative;
}
.nav-item.open > .nav-link::after {
  content: '';
  position: absolute;
  bottom: -14px;
  left: 16px;
  right: 16px;
  height: 2px;
  border-radius: 2px;
  background: #f58220;
  z-index: 1000;
}

.nav-chevron {
  width: 10px;
  height: 6px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .2s ease;
}
.nav-item.open > .nav-link .nav-chevron { 
  transform: rotate(180deg); 
}

/* ─────────────────────────────────────────────
   PROFESSIONAL CARD-BASED MEGA DROPDOWNS
───────────────────────────────────────────── */
.mega-menu {
  position: fixed;
  top: 68px;
  left: 0;
  right: 0;
  background: #ffffff;
  border-top: 1px solid #eef0f5;
  border-bottom: 1px solid #eef0f5;
  box-shadow: 0 12px 40px rgba(26, 43, 86, 0.08);
  z-index: 998;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity .2s, transform .2s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-item.open .mega-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.mega-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 40px 2rem;
}

.mega-col {
  width: 100%;
  max-width: 760px; /* Limits width so descriptions remain scannable */
  display: flex;
  flex-direction: column;
}

/* Layout Meta Tags (Small Context indicator text) */
.mega-tag {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  color: #f58220;
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.mega-col-heading {
  font-family: 'DM Sans', 'Poppins', sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: #1a2b56;
  margin: 0 0 24px 0;
  padding: 0;
}

/* The Premium Card Item */
.mega-card {
  display: block;
  text-decoration: none;
  padding: 16px 20px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid transparent;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  margin-bottom: 12px;
  cursor: pointer;
}

.mega-card:last-child {
  margin-bottom: 0;
}

/* Hover States for Active Menu Cards */
.mega-card:not(.coming-soon):hover {
  background-color: #f8fafc;
  border-color: #e2e8f0;
  transform: translateY(-1px);
}

.mega-card-title {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  color: #1a2b56;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: color 0.2s ease;
}

.mega-card:not(.coming-soon):hover .mega-card-title {
  color: #f58220;
}

.mega-card-desc {
  font-family: 'DM Sans', sans-serif;
  font-size:16px;
  font-weight: 600;
  color: #64748b;
  line-height: 1.5;
}

/* Coming Soon & Inactive Card Configurations */
.coming-soon {
  cursor: default;
  opacity: 0.75;
}

.badge-soon {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  background-color: #f1f5f9;
  color: #64748b;
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0.02em;
}

/* ── Login / Actions Button ── */
.nav-btn-login {
  margin-left: 8px;
  padding: 8px 20px;
  background: transparent;
  color: #1a2b56;
  border: 1.5px solid #1a2b56;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 600;
  font-family: 'DM Sans', sans-serif;
  text-decoration: none;
  cursor: pointer;
  transition: background .18s, color .18s, border-color .18s;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
}

.nav-btn-login:hover {
  background: #1a2b56;
  color: #ffffff;
}

/* Backdrop Overlay */
#megaBackdrop {
  display: none;
  position: fixed;
  inset: 68px 0 0 0;
  background: rgba(15, 23, 42, 0.1);
  backdrop-filter: blur(2px); /* Adds high-end glass texture to workspace background */
  z-index: 997;
}
#megaBackdrop.active { 
  display: block; 
}

/* ─────────────────────────────
   MOBILE RESPONSIVE OVERRIDES
───────────────────────────────*/
@media (max-width: 900px) {
  .menu-toggle { 
    display: flex; 
  }

  .main-nav {
    display: none;
    flex-direction: column;
    align-items: stretch;
    position: absolute;
    top: 68px;
    left: 0; 
    right: 0;
    background: #ffffff;
    border-top: 1px solid #edf2f7;
    box-shadow: 0 10px 25px rgba(26, 43, 86, 0.08);
    padding: 16px;
    gap: 4px;
    z-index: 999;
    max-height: calc(100vh - 68px);
    overflow-y: auto;
  }
  .main-nav.open { 
    display: flex; 
  }

  .nav-item { width: 100%; }
  .nav-link { width: 100%; border-radius: 7px; justify-content: space-between; padding: 12px 14px; }
  .nav-item.open > .nav-link::after { display: none; }

  .mega-menu {
    position: static;
    transform: none !important;
    border: none;
    box-shadow: none;
    display: none;
    padding: 0;
    background: #f8fafc;
    border-radius: 6px;
  }
  .nav-item.open .mega-menu { 
    display: block; 
    opacity: 1; 
  }

  .mega-inner {
    padding: 16px;
  }
  
  .mega-col-heading { 
    margin-bottom: 16px; 
    font-size: 1rem;
  }

  .mega-card {
    padding: 12px;
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
  }

  .nav-btn-login { 
    margin: 12px 0 4px 0; 
    justify-content: center; 
    width: 100%; 
    padding: 12px;
  }
  
  #megaBackdrop { 
    display: none !important; 
  }
}
/* ─────────────────────────────────────────────────
   EXPLORE MORE BUTTON STYLES
───────────────────────────────────────────────── */

/* Centering container with comfortable top spacing below slider */
.explore-more-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 40px; /* Space between slider layout and the button */
  width: 100%;
}

/* Premium action link designed as a solid button */
.btn-explore-more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 36px;
    background: linear-gradient(45deg, #f5781f, #ffb347);/* Navy Blue theme background */
  color: #ffffff;
  font-family: 'Inter', 'DM Sans', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(26, 43, 86, 0.15);
  transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

/* Smooth motion chevron/arrow inside button */
.btn-explore-more .btn-arrow {
  font-size: 1.1rem;
  transition: transform 0.2s ease;
}

/* Hover States */
.btn-explore-more:hover {
  background-color: #f58220; /* Changes cleanly to your accent Orange */
  box-shadow: 0 6px 20px rgba(245, 130, 32, 0.25);
  transform: translateY(-2px); /* Subtle pro-tier micro lift */
}

/* Push arrow slightly rightward on hover */
.btn-explore-more:hover .btn-arrow {
  transform: translateX(4px);
}

/* Active press state */
.btn-explore-more:active {
  transform: translateY(0);
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .explore-more-container {
    margin-top: 28px;
    padding: 0 16px;
  }
  .btn-explore-more {
    width: 100%; /* Spans full width on mobile viewports for easier thumb targets */
    justify-content: center;
    padding: 14px;
  }
}

/* 1. HIDDEN STATE: Strict visibility blocks when mouse is outside */
.main-nav .nav-item .mega-menu {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important; /* Prevents ghost clicks when hidden */
    
    /* Smooth visual fade transition */
    transition: opacity 0.2s ease, visibility 0.2s ease !important;
}

/* 2. ACTIVE STATE: Triggered cleanly when mouse enters the link or dropdown block */
.main-nav .nav-item:hover .mega-menu {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important; /* Re-enables clicking inside the dropdown */
}
/* 1. HIDDEN STATE: Strict visibility blocks when mouse is outside */
.main-nav .nav-item .mega-menu {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important; /* Prevents ghost clicks when hidden */
    
    /* Smooth visual fade transition */
    transition: opacity 0.2s ease, visibility 0.2s ease !important;
}

/* 2. ACTIVE STATE: Triggered cleanly when mouse enters the link or dropdown block */
.main-nav .nav-item:hover .mega-menu {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important; /* Re-enables clicking inside the dropdown */
}
/* ============================================================
   REVERSED TYPOGRAPHY HIERARCHY (BIG TAGS, SMALLER SUBHEADS)
============================================================ */

/* 1. Main Accent Label — Swapped to be the dominant, biggest element */
.main-nav .mega-tag {
        font-family: Crimsonpro variablefont wght, sans-serif !important; /* Switched to bold display font */
    font-size: 22px !important;       /* Making it drastically bigger */
    font-weight: 800 !important;       /* Ultra bold structural thickness */
     /* Clean capitalization style */
    letter-spacing: -0.3px !important; /* Tight tracking for pro editorial aesthetic */
    color: #ff6b00 !important;         /* Vibrant brand orange pop */
    margin-bottom: 4px !important;
    display: block !important;
}

/* 2. Secondary Column Sub-Heading — Scaled down to sit under the tag */
.main-nav .mega-col-heading {
   font-family: Dmsans, sans-serif important; /* Switched to cleaner body font */
    font-size: 14px !important;       /* Small, elegant tag scale */
    font-weight: 800 !important;       /* Medium premium weight */
 
    letter-spacing: 1px !important;    /* Slightly spaced out readability */
         /* Muted high-contrast slate tone */
    margin: 0 0 24px 0 !important;     /* Creates breathing room before the cards */
}
/* ============================================================
   HERO TYPOGRAPHY RE-ENGINEERING: ULTRA-MASSIVE DIGIT
============================================================ */

/* The main sentence: Downscaled with Crimson Pro variable serif font */
.platform-hero-section .platform-hero-heading {
    font-family: 'Crimson Pro', 'CrimsonPro VariableFont', serif !important;
    font-size: 32px !important;       /* Clean, decreased font size for elegant reading */
    font-weight: 600 !important;       /* Lighter weight to contrast against the massive digit */
    line-height: 1.4 !important;
    color: #002147 !important;         /* Deep corporate Navy Blue */
    display: block !important;
}

/* The standalone number "1": Made completely dominant */
.platform-hero-section .hero-massive-digit {
    font-family: 'Crimson Pro', 'CrimsonPro VariableFont', serif !important;
    font-size: 56px !important;       /* Ultra-massive high-end display scale */
    font-weight: 800 !important;       /* Heavy structural thickness */
    color: #ff6b00 !important;         /* Dynamic brand orange signature pop */
    display: inline-block !important;
    line-height: 0.8 !important;       /* Snaps the alignment vertical center */
    margin-right: 6px !important;      /* Tight, pro-tier spacing right before the "st" */
    transform: translateY(6px) !important; /* Micro-alignment adjustment for perfect baseline tracking */
    font-variant-numeric: lining-nums !important;
}
/* ============================================================
   HERO TYPOGRAPHY RE-ENGINEERING: SEAMLESS ULTRA-MASSIVE DIGIT
============================================================ */

/* The main sentence: Downscaled with Crimson Pro variable serif font */
.platform-hero-section .platform-hero-heading {
    font-family: 'Crimson Pro', 'CrimsonPro VariableFont', serif !important;
    font-size: 44px !important;       /* Clean, decreased font size for elegant reading */
    font-weight: 600 !important;       /* Lighter weight to contrast against the massive digit */
    line-height: 1.4 !important;
    color: #002147 !important;         /* Deep corporate Navy Blue */
    display: block !important;
}

/* The standalone number "1": Zero-gap layout integration */
.platform-hero-section .hero-massive-digit {
    font-family: 'Crimson Pro', 'CrimsonPro VariableFont', serif !important;
    font-size: 44px !important;       /* Ultra-massive high-end display scale */
    font-weight: 600 !important;       /* Heavy structural thickness */
    color: #f58220!important;         /* Dynamic brand orange signature pop */
    display: inline !important;        /* Inline execution drops all structural layout margins */
    line-height: 1.4 !important;
    letter-spacing: -4px !important;   /* Pulls the "st" completely flush against the 1 */
    font-variant-numeric: lining-nums !important;
}
/* ============================================================
   WHY US SECTION RESPONSIVE COMPRESSION & PADDING FIX
============================================================ */

/* 1. Reduce overall section container height padding */
.why-us-section {
    padding: 3px 0 !important; /* Brought down from heavy padding to a crisp, compact height */
}

.why-us-container {
    max-width: 1400px !important;
    margin: 0 auto !important;
}

/* 2. Tighten titles and clear excess bottom margin */
.why-us-title {
    margin-bottom: 8px !important;
}

.why-us-subheading {
    margin-bottom: 40px !important; /* Controls space right before the grid cards start */
}

/* 3. Compress the cards padding internally */
.why-us-grid {
    gap: 24px !important; /* Optimizes the space between cards */
}

.why-us-card {
    padding: 30px 24px !important; /* Drastically reduced internal padding to fix box blowing up */
    border-radius: 16px !important;
}

/* 4. Downscale and center the inline vector icons */
.why-us-card .card-icon {
    width: 48px !important;  /* Elegant, smaller layout sizing */
    height: 48px !important; /* Perfectly square footprint matching */
    margin-bottom: 16px !important; /* Pulls header content closer to icon */
}

.why-us-card .card-icon svg {
    width: 24px !important;  /* Clean vector interior dimension */
    height: 24px !important;
}

/* 5. Clean up card typographic lines margins */
.why-us-card .card-title {
    margin: 0 0 10px 0 !important;
    font-size: 20px !important;
}

.why-us-card .card-text {
    margin: 0 !important;
    line-height: 1.5 !important;
}
/* ============================================================
   ELIMINATE GAP BETWEEN HERO & WHY US SECTIONS
============================================================ */

/* 1. Strip any bottom spacing from the preceding Hero section */
.platform-hero-section {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* 2. Strip top spacing from the Why Us section so it snaps straight up */
.why-us-section {
    margin-top: 0 !important;
    padding-top: 0 !important; /* Pulls the content flush against the hero above */
}
/* ============================================================
   PULL UP THE WHY US GRID & THE REST OF THE PAGE CONTENT
============================================================ */

/* 1. Reset background overflow spacing on the container */
.why-us-container {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* 2. Pull the interior Grid Content upwards using negative margins */
.why-us-grid {
    margin-top: 60px !important; /* Force-shifts the interactive cards straight up over the container bounds */
    position: relative !important;
    z-index: 10 !important;        /* Ensures content stays completely clickable and clean */
}

/* 3. Strip structural footer gaps from Why Us to pull subsequent sections upward */
.why-us-section {
    padding-bottom: 20px !important; /* Compresses bottom spacing down to a minimum */
    margin-bottom: 0 !important;
}

/* 4. Pull the Explore Projects / Courses section up immediately below it */
.courses-section, 
.bridge-section, 
main > section {
    margin-top: 0 !important;
    padding-top: 20px !important; /* Compresses any lazy space between subsequent row items */
}
/* ============================================================
   TIGHTEN SPACE BETWEEN ICON AND CONTENT IN WHY US CARDS
============================================================ */

/* 1. Remove left padding and bring text flush with the icon alignment */
.why-us-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important; /* Ensures everything lines up cleanly on the left */
}

/* 2. Shrink the spacing directly below the icon box */
.why-us-card .card-icon {
    margin-bottom: 8px !important; /* Drastically reduced from 16px to bring the title up */
}

/* 3. Tighten the gap between the title and the descriptive paragraph */
.why-us-card .card-title {
    margin-top: 0 !important;
    margin-bottom: 4px !important; /* Pulls the card text immediately up under the heading */
}
/* Tighten the bottom spacing of the project slider section */
.courses-section {
    padding-bottom: 20px !important; /* Reduces large default bottom padding */
    margin-bottom: 0 !important;
}

/* Remove any excessive top padding on the bridge container */
.bridge-section {
    padding-top: 40px !important;    /* Creates a clean, balanced spacing between sections */
    margin-top: 0 !important;
}
/* Add this to assets/css/styles.css */
.brand-split {
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
}

.brand-split .brand-my,
.brand-split .brand-labs {
  font-style: normal;
  color: #1a2b56; /* Navy Blue */
}

.brand-split .brand-weaver {
  font-family: 'Georgia', serif; /* Distinct italic serif font */
  font-style: italic;
  font-weight: 700;
  color: #f58220; /* Orange Accent */
  padding: 0 2px;
}
.explore-projects-heading {
  color: var(--pd-orange);
}
.explore-projects-heading {
  font-size: 34px;
  font-weight: 600;
  color: var(--orange);
  margin-bottom: 16px;
  align-items: center;
}
/* ==========================================================================
   Tightening Layout Gaps (Testimonial -> FAQ -> Footer)
   ========================================================================== */

/* 1. Reduce gap between Testimonial and FAQ section */
.testimonial-section {
    padding-bottom: 20px !important; /* Lowers bottom spacing of testimonials */
    margin-bottom: 0 !important;
}

.faq-section {
    padding-top: 20px !important;    /* Lowers top spacing of FAQ section */
    padding-bottom: 5 !important; /* Reduces bottom spacing to pull footer closer */
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* 2. Reduce gap between FAQ section and the Footer */
.site-footer {
    padding-top: 30px !important;    /* Tightens the top edge inside the footer */
    margin-top: 0 !important;        /* Prevents layout margins from pushing away from FAQ */
}

/* 3. Cleanup internal wrapper margins that create invisible spacing */
.faq-wrapper {
    margin-bottom: 0 !important;     /* Ensures the last FAQ item doesn't push down */
}
.why-us-title {
  font-size: 2.5rem;
  font-weight: 700;
  text-align: center;
}

/* High-contrast Classic Corporate Navy */
.text-virtual {
  background: linear-gradient(180deg, #183253 0%, #0c2647 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Cyber Pumpkin to Coral Orange */
.text-labs {
  font-style: italic;
  font-weight: 900;
  background: linear-gradient(180deg, #FF6A00 0%, #FF2E00 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 0px 4px 20px rgba(255, 106, 0, 0.15); /* Soft premium glow */
}
/* Base Brand Container */
.brand-split {
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  display: inline-flex;
  align-items: baseline;
}

/* "my" -> Lowercase, Navy Blue */
.brand-my {
  font-style: normal;
  color: #1a2b56;
  text-transform: lowercase;
}

/* "weaver" -> Lowercase, Italic Georgia, Orange, No Spaces */
.brand-weaver {
  font-family: 'Georgia', serif;
  font-style: italic;
  font-weight: 600;
  color: #f58220;
  text-transform: lowercase;
}

/* "Labs" -> Mixed case (Capital L), Italic DM Sans, Navy Blue */
.brand-labs {
  font-style: italic !important;
  font-weight: 600;
  color: #1a2b56;
  padding-left: 2px; /* Adds just a tiny bit of breathing room for the italic lean */
}
/* ==========================================================================
   PREMIUM CIRCULAR EXPANSION AUTO-SLIDER
   ========================================================================== */

/* Keeps the container relative so absolute slides stack perfectly within it */
.testimonial-slider {
  position: relative;
  width: 400px !important;
  min-height: 350px !important; /* Adjust if needed to prevent layout shifts during shifts */
  display: grid;
  align-items: center;
}

/* Hide inactive slides cleanly */
.testimonial-slide {
  grid-area: 1 / 1 / 2 / 2; /* Stacks all slides on top of each other */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Active Slide: Triggers the high-end circular expansion revealing effect */
.testimonial-slide.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  animation: circleReveal 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

/* Keyframe for the expanding circle transition */
@keyframes circleReveal {
  0% {
    /* Starts as a small circle in the middle of the text zone */
    clip-path: circle(0% at 50% 50%);
  }
  100% {
    /* Smoothly grows to reveal the full content area */
    clip-path: circle(150% at 50% 50%);
  }
}
/* ==========================================================================
   UPDATED LAYOUT: IMAGE OVERLAPS TEXT CARD
   ========================================================================== */

.testimonial-section {
  padding: 80px 5%;
  background: rgb(245, 245, 226); /* Matches your exact beige background tint */
}

.testimonial-container {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 1450px;
  margin: auto;
}

/* LEFT IMAGE: Now positioned on top layer */
.testimonial-image {
  flex: 1;
  position: relative;
  z-index: 2; /* Higher z-index forces it on top of the text container */
  margin-right: -60px; /* Pulls the image to the right over the text card */
  
  opacity: 0;
  transform: translateX(-80px);
  animation: slideLeft 1s ease forwards;
}

.testimonial-image img {
  width: 600px;
  max-height: 420px !important;
  border-radius: 20px;
  object-fit: cover;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3); /* Adds a premium shadow casting onto the text block */
  transition: transform 0.5s ease;
}

/* Hover zoom effect on image stays active on the top layer */
.testimonial-image img:hover {
  transform: scale(1.05);
}

/* RIGHT TEXT: Receives the automatic circle expanding slides */
.testimonial-text {
  flex: 1;
  background: #0a0f1a; /* Your exact deep black-blue color */
  color: white;
  padding: 70px 70px 70px 90px; /* Added extra left padding so text clears the overlapping image beautifully */
  border-radius: 20px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.25);
  position: relative;
  z-index: 1; /* Lower z-index places it safely underneath the image block */

  opacity: 0;
  transform: translateX(80px);
  animation: slideRight 1s ease forwards;
  animation-delay: 0.3s;
  transition: transform 0.4s ease;
}

.testimonial-text:hover {
  transform: translateY(-8px);
}

/* ==========================================================================
   SLIDER LAYER PIPELINES (Circle Transition Mechanics)
   ========================================================================== */

.testimonial-slider {
  position: relative;
  width: 100%;
  min-height: 220px;
  display: grid;
  align-items: center;
}

.testimonial-slide {
  grid-area: 1 / 1 / 2 / 2 ;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  padding-left: 80px;
}

.testimonial-slide.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  animation: circleReveal 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes circleReveal {
  0% {
    clip-path: circle(0% at 50% 50%);
  }
  100% {
    clip-path: circle(150% at 50% 50%);
  }
}

.testimonial-text p {
  font-size: 22px;
  line-height: 1.9;
  margin-bottom: 20px;
}

.author {
  color: #fca311;
  font-weight: bold;
  font-size: 17px;
  margin: 0;
}

.testimonial-text span {
  font-size: 13px;
  color: #aaa;
}

/* Keyframes for initial section entering animations */
@keyframes slideLeft {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideRight {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Responsive adjustments for phones and tablets */
@media (max-width: 768px) {
  .testimonial-container {
    flex-direction: column;
  
  }

  .testimonial-image {
    margin-right: 0;
    margin-bottom: -40px; /* Creates a vertical stack overlap on mobile instead */
    z-index: 2;
   
  }

  .testimonial-text {
    padding: 60px 30px 30px 30px;
    z-index: 1;
    width: 100%;
  }
}
/* ==========================================================================
   FINAL UNIFIED FIXED TESTIMONIAL LAYOUT
   ========================================================================== */

.testimonial-section {
  padding: 80px 5%;
  background: rgb(245, 245, 226); /* Matches your exact beige tone */
}

/* Master row organizer */
.testimonial-container {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 1400px; /* Keeps the total section beautifully contained on big monitors */
  margin: auto;
}

/* LEFT IMAGE LAYOUT */
.testimonial-image {
  flex: 1;
  position: relative;
  z-index: 2; /* Sits on top of the text */
  margin-right: -60px; /* Overlaps seamlessly into the black container */
  opacity: 0;
  transform: translateX(-80px);
  animation: slideLeft 1s ease forwards;
}

.testimonial-image img {
  width: 100%;
  max-height: 450px;
  border-radius: 20px;
  object-fit: cover;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
  transition: transform 0.5s ease;
}

.testimonial-image img:hover {
  transform: scale(1.05);
}

/*RIGHT BLACK TEXT CONTAINER FIX */
.testimonial-text {
  flex: 1.5; /* Gives the text block extra width compared to the image */
  background: #0a0f1a;
  color: white;
  padding: 60px 60px 60px 100px; /* 100px left padding keeps text completely clear of the image layout overlap */
  border-radius: 20px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.25);
  position: relative;
  z-index: 1;
  
  /* Force this card layout to open completely wide */
  display: block; 
  width: 100%;
  box-sizing: border-box;

  opacity: 0;
  transform: translateX(80px);
  animation: slideRight 1s ease forwards;
  animation-delay: 0.3s;
}

/*  SLIDER ENGINE - FORCE 100% HORIZONTAL ROW AVAILABILITY */
.testimonial-slider {
  position: relative;
  width: 100% !important;
  display: block !important; /* Removes grid line bottlenecks */
}

/*  INDIVIDUAL SLIDES - EXPAND TO MATCH WIDESCREEN EDGES */
.testimonial-slide {
  width: 100% !important;
  display: none;
  box-sizing: border-box;
}

/* Active Slide state override */
.testimonial-slide.active {
  display: block !important;
  animation: circleReveal 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

/*  PARAGRAPH DESIGN - COMPLETELY EXTENDS ACROSS WIDESCREEN SPACE */
.testimonial-text p {
  font-size: 22px;
  line-height: 1.9;
  margin-bottom: 25px;
  
  /* Removes any inherited constraints forcing sentences to wrap early */
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
  white-space: normal !important; 
}

/* AUTHOR METRICS */
.author {
  color: #fca311;
  font-weight: bold;
  font-size: 17px;
  margin: 0 0 5px 0;
}

.testimonial-text span {
  font-size: 13px;
  color: #aaa;
}

/* ENTRY ANIMATIONS */
@keyframes slideLeft {
  to { opacity: 1; transform: translateX(0); }
}
@keyframes slideRight {
  to { opacity: 1; transform: translateX(0); }
}

/* SMOOTH CIRCLE SLIDE SWITCH REVEAL */
@keyframes circleReveal {
  0% { clip-path: circle(0% at 50% 50%); }
  100% { clip-path: circle(150% at 50% 50%); }
}

/* RESPONSIVE MOBILE FLOW */
@media (max-width: 768px) {
  .testimonial-container {
    flex-direction: column;
  }
  .testimonial-image {
    margin-right: 0;
    margin-bottom: -40px;
    z-index: 2;
  }
  .testimonial-text {
    padding: 60px 30px 30px 30px;
    z-index: 1;
    width: 100%;
  }
}
/*  SHIFTS THE WHOLE CONTENT BLOCK TO THE RIGHT OVER THE SLIDER LAYER */
.testimonial-slide {
  width: 100% !important;
  display: none;
  box-sizing: border-box;
  
  /*  Increased Left Padding to push the paragraph and author further right */
  padding-left: 140px; /* Increase this to 110px or 120px if you want it even further right */
  padding-right: 40px; /* Keeps the text from hitting the very right edge of the card */
  padding-top: 80px;;
}

/* Retains correct rendering on slide switch */
.testimonial-slide.active {
  display: block !important;
  animation: circleReveal 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
/* ==========================================================================
   HEADER SEARCH ICON POSITIONING & SPACING GRID
   ========================================================================== */

.header-search-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #1a2b56; /* Anchors to your classic brand Navy Blue */
  font-size: 1.15rem;
  text-decoration: none;
  
  /* Structural Gaps: Adds clean horizontal margins to separate elements */
  margin-left: 25px;   /* Creates a distinct gap between the last nav item (contact) and search */
  margin-right: 25px;  /* Creates a distinct gap between search and the Login button */
  
  transition: color 0.3s ease, transform 0.2s ease;
}

/* Premium hover interaction matching your signature brand aesthetic */
.header-search-link:hover {
  color: #f58220; /* Transitions beautifully into your brand orange */
  transform: scale(1.08);
}

/* Mobile/Tablet View: Completely hides the search icon on small devices */
@media (max-width: 768px) {
  .header-search-link {
    display: none !important;
  }
}
@media (max-width: 768px) {
  platform-hero-section .platform-hero-heading {
    font-family: 'Crimson Pro', 'CrimsonPro VariableFont', serif !important;
    font-size: 28px !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    color: #002147 !important;
    display: block !important;
}
}
/* Mobile View Responsiveness (Up to 768px) */
@media screen and (max-width: 768px) {
  .testimonial-container {
    display: flex;
    flex-direction: column; /* Stacks image and text vertically */
    gap: 2rem;             /* Spacing between the image and the text slider */
    padding: 1.5rem;       /* Prevents content from hugging the screen edges */
  }

  .testimonial-image, 
  .testimonial-text {
    width: 100%;           /* Spans full width of the mobile viewport */
  }

  .testimonial-image img {
    width: 100%;
    height: auto;
    max-height: 250px;     /* Prevents the image from taking up the entire screen */
    object-fit: cover;     /* Keeps the image crisp and perfectly cropped */
    border-radius: 8px;    /* Optional: Rounds corners for a cleaner aesthetic */
  }

  /* Typography Adjustments for Smaller Screens */
  .testimonial-slide p {
    font-size: 1.05rem;    /* Makes the quote highly readable on mobile */
    line-height: 1.6;
    margin-bottom: 1rem;
  }

  .testimonial-slide .author {
    font-size: 1.1rem;
    margin-bottom: 0.2rem;
  }

  .testimonial-slide span {
    font-size: 0.9rem;
    display: block;        /* Ensures the job title sits nicely below the name */
  }
}
@media screen and (max-width: 768px) {
  
  /* 1. Force the parent wrapper to stack elements vertically */
  .testimonial-section,
  .testimonial-container {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 15px !important;
    box-sizing: border-box !important;
    position: relative !important;
  }

  /* 2. Reset the image container so it sits at the top */
  .testimonial-image {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 1.5rem 0 !important; /* Spacing below the image */
    position: relative !important;
    left: 0 !important;
    transform: none !important;
  }

  .testimonial-image img {
    width: 100% !important;
    height: auto !important;
    max-height: 220px !important;
    object-fit: cover !important;
  }

  /* 3. CRITICAL FIX: Strip all desktop offsets pushing text to the right */
  .testimonial-text,
  .testimonial-slider,
  .testimonial-slide {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    
    /* Erase any absolute positioning/margins pushing it right */
    position: relative !important; 
    left: 5px !important;
    right: 5px !important;
    margin-left: 10px !important;
    margin-right:14px !important;
    padding: 0 !important;
    transform: none !important;
    
    float: none !important;
    box-sizing: border-box !important;
  }

  /* 4. Fix typography presentation */
  .testimonial-slide p {
    font-size: 1.1rem !important;
    line-height: 1.6 !important;
    text-align: left !important;  /* Aligns text nicely to the left edge */
    width: 80% !important;
    margin: 0 0 1rem 0 !important;
    white-space: normal !important;
    padding-top: 35px;; /* Forces normal word wrapping across full width */
  }

  .testimonial-slide .author {
    font-size: 1.1rem !important;
    margin: 0 !important;
  }

  .testimonial-slide span {
    font-size: 0.9rem !important;
    display: block !important;
  }
  .logo-img{
    max-height: 170px;
    margin-top:1px;
   
  }
}
/* 1. Ensure the main container stacks and centers everything vertically */
#mainNav.main-nav.open.active {
    display: flex;
    flex-direction: column;
    align-items: center;      /* Centers items horizontally */
    justify-content: center;   /* Centers items vertically if needed, or use flex-start with gaps */
    text-align: center;
    gap: 10px;                 /* Adds clean, even spacing between all elements */
    width: 100%;
    padding-top: 5px;
}

/* 2. Fix the navigation links so they don't stretch or push content to edges */
@media (max-width: 900px) {
    .nav-link {
        display: inline-flex;     /* Changes from block/flex width 100% */
        width: auto;              /* Lets the link shrink to its text size */
        justify-content: center;  /* Centers text inside the link if width is applied */
        align-items: center;
        padding: 10px 20px;       /* Gives them a nice, clickable touch target */
        text-align: center;
    }
}

/* 3. Ensure the cart and login elements inherit the centering */
.cart-container, 
#authBtn
 {
    margin: 0 auto;           /* Fail-safe backup for horizontal centering */
    display: inline-flex;
    justify-content: center;
    align-items: center;
}
/* 1. Tighten the parent container's layout */
#mainNav.main-nav.open.active {
    display: flex;
    flex-direction: column;
    align-items: center;
    
    /* CHANGE THIS: Stops elements from stretching vertically to fill the screen */
    justify-content: flex-start; 
    
    /* Adjust this top padding to control exactly how close the links sit to the logo */
    padding-top: 40px; 
    
    /* Spacing between the individual items */
    gap: 15px; 
}

/* 2. Remove any accidental top margins on the first link wrapper */
.nav-item:first-of-type,
.nav-link:first-of-type {
    margin-top: 0;
}
/* Makes all hero buttons slightly wider and removes default link underlines */
.hero-ctas .btn {
    padding-left: 32px;  /* Increased from standard padding */
    padding-right: 32px; /* Increased from standard padding */
    text-decoration: none; /* Removes the underline from 'Connect' and 'Explore' links */
    display: inline-flex;
    align-items: center;
    justify-content: center;
     font-size: large;
}
/* Container block for heading and subheading */
.courses-header-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* Forces absolute left alignment */
  text-align: left;        /* Ensures text wraps nicely to the left */
  margin-bottom: 24px;     /* Professional breathing room before the slider */
  width: 100%;
}

/* Main Section Heading - Updated to Orange */
.explore-projects-heading {
  font-size: 2rem;
  font-weight: 700;
  color: #f58220;     /* Signature Orange */
  margin: 0 0 12px 0; /* Clears default margins, adds spacing below */
}

/* Subheading Text */
.bridge-professional-text {
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  color: #1a2b56;     /* Deep Navy Blue */
  line-height: 1.6;
  margin: 0;          /* Clears top/bottom default margins */
  max-width: 800px;   /* Prevents the paragraph from stretching too wide on massive screens */
}

/* Centering layout fix for the 'Explore More' button wrapper at the bottom */
.explore-more-container {
  display: flex;
  justify-content: center;
  margin-top: 30px;

}
/* Base styling for your sub-heading */
.why-us-subheading {
  font-family: 'DM Sans', sans-serif;
  color: #1a2b56; /* Deep Navy Blue */
  font-size: 1.1rem;
  line-height: 1.6;
}

/* Specific styling targeted only to the word "Labs" */
.why-us-subheading i {
  color: #f58220 ;      /* Signature Orange */
  font-style: italic;   /* Forces italicization */
  font-weight: 600;     /* Gives it a slightly bolder look to stand out */
}
/* ==========================================================================
    NAVIGATION STYLES
   ========================================================================== */

:root {
  --nav-font-family: 'DM Sans', sans-serif;
  --color-text-primary: #111928; 
  --color-text-muted: #4b5563;   /* Slate gray for menu descriptions */
  --color-accent: #047857;       /* Emerald Green accent line / active text */
  --header-bg: #ffffff;
  --dropdown-bg: #ffffff;
}

/* Base Header Setup */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: var(--header-bg);
  border-bottom: 1px solid #f3f4f6;
  z-index: 1000;
  font-family: var(--nav-font-family);
}

.header-inner {
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 2rem;
  height: 80px; /* Matching the comfortable height of Riipen's navbar */
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Navigation Links Style */
.main-nav {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  height: 100%;
}

.nav-item {
  display: inline-block;
  height: 100%;
}

/* Exact typography properties from screenshot */
.nav-link, 
.nav-item button.nav-link {
  background: none;
  border: none;
  outline: none;
  cursor: pointer;
  font-family: var(--nav-font-family);
     font-size: 20px;/* Precise font scale */
/* Medium weight styling */
  color: var(--color-text-primary);
  text-transform: capitalize; 
  text-decoration: none;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 0.25rem;
  position: relative;
  transition: color 0.2s ease;
}

/* Hover and Active Visual states */
.nav-link:hover,
.nav-item:hover button.nav-link,
.nav-link.active {
  color:  #f58220!important;
}

/* Bottom green accent bar matching Riipen's dropdown active state */
.nav-item:hover button.nav-link::after,
.nav-link.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background-color:  #f58220;
  border-radius: 3px 3px 0 0;
}

/* ==========================================================================
   DROPDOWN / MEGA MENU STRUCTURE OVERRIDE
   ========================================================================== */

/* Full-width container positioned precisely below the navbar boundary */
.mega-menu {
  position: fixed;
  top: 80px; /* Must match .header-inner height exactly */
  left: 0;
  width: 100%;
  background-color: var(--dropdown-bg);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.02);
  border-bottom: 1px solid #f3f4f6;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-5px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
  z-index: 999;
}

/* Shows dropdown state using your existing JS trigger mechanisms */
.nav-item:hover .mega-menu,
.nav-item button[aria-expanded="true"] + .mega-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Layout framework matching Screenshot (15).jpg */
.mega-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 2.5rem 2rem 4rem 2rem; /* Clean asymmetric padding layout */
  display: flex;
  flex-direction: column;
}

/* Main Top Section Heading */
.mega-col-heading {
  font-family: var(--nav-font-family);
  font-size: 24px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0 0 1.5rem 0;
}

/* Subheading Content Stack Style */
.mega-tag {
  font-family: var(--nav-font-family);
  font-size: 18px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 1rem;
  display: block;
}

/* List/Card layout for inner column references */
.mega-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.85rem;
}

/* Links inside dropdown mapping to screenshot styling */
.mega-card {
  text-decoration: none;
  display: block;
  transition: transform 0.2s ease;
}

.mega-card-title {
  font-family: var(--nav-font-family);
  font-size: 15px;
  font-weight: 400;
  color: var(--color-text-muted);
  transition: color 0.15s ease;
}

.mega-card:hover .mega-card-title {
  color: var(--color-accent);
}

/* Hide descriptions to match cleaner text alignment in screenshot 2 */
.mega-card-desc, .badge-soon, .mega-tag {
  display: none !important; 
}
/* ==========================================================================
   DROPDOWN SPACING ADJUSTMENTS
   ========================================================================== */

/* Inner container padding - reduced top/bottom padding for a tighter fit */
.mega-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 1.5rem 2rem 2rem 2rem; /* Reduced from 2.5rem and 4rem */
  display: flex;
  flex-direction: column;
}

/* Main Heading margin - reduced bottom gap */
.mega-col-heading {
  font-family: var(--nav-font-family);
  font-size: 24px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0 0 0.75rem 0; /* Cut in half from 1.5rem */
}

/* Subheading Content Stack Style */
.mega-tag {
  font-family: var(--nav-font-family);
  font-size: 18px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 0.5rem; /* Reduced from 1rem */
  display: block;
}

/* Column Link Stack - controls the gap between individual links */
.mega-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem; /* Tightened gap between lines from 0.85rem */
}

/* Individual Link Container adjustments */
.mega-card {
  text-decoration: none;
  display: block;
  padding: 0.15rem 0; /* Small vertical padding target for easy clicking */
  transition: transform 0.2s ease;
}

.mega-card-title {
  font-family: var(--nav-font-family);
  font-size: 15px;
  font-weight: 400;
  color: var(--color-text-muted);
  line-height: 1.2; /* Tighter text tracking */
  transition: color 0.15s ease;
}

.mega-card:hover .mega-card-title {
  color: var(--color-accent);
}

/* Keeps descriptions hidden to maintain clean layout */
.mega-card-desc, .badge-soon, .mega-tag {
  display: none !important; 
}
/* ==========================================================================
   RIIPEN-INSPIRED NAVIGATION STYLES (INHERITED WEIGHTS)
   ========================================================================== */

:root {
  --nav-font-family: 'DM Sans', sans-serif;
  --color-text-primary: #111928; 
  --color-text-muted: #4b5563;   /* Slate gray for menu descriptions */
  --color-accent: #047857;       /* Emerald Green accent line / active text */
  --header-bg: #ffffff;
  --dropdown-bg: #ffffff;
}

/* Base Header Setup */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: var(--header-bg);
  border-bottom: 1px solid #f3f4f6;
  z-index: 1000;
  font-family: var(--nav-font-family);
}

.header-inner {
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 2rem;
  height: 80px; 
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Navigation Links Style */
.main-nav {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  height: 100%;
}

.nav-item {
  display: inline-block;
  height: 100%;
}

/* Exact typography properties - font-weight removed */
.nav-link, 
.nav-item button.nav-link {
  background: none;
  border: none;
  outline: none;
  cursor: pointer;
  font-family: var(--nav-font-family);
  font-size: 1 rem;            
  color: var(--color-text-primary);
  text-transform: capitalize; 
  text-decoration: none;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 0.25rem;
  position: relative;
  transition: color 0.2s ease;
}

/* Hover and Active Visual states */


/* Bottom green accent bar matching Riipen's dropdown active state */
.nav-item:hover button.nav-link::after,
.nav-link.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  
  border-radius: 3px 3px 0 0;
}

/* ==========================================================================
   DROPDOWN SPACING ADJUSTMENTS
   ========================================================================== */

/* Inner container padding - tight fit */
.mega-menu {
  position: fixed;
  top: 80px; 
  left: 0;
  width: 100%;
  background-color: var(--dropdown-bg);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.02);
  border-bottom: 1px solid #f3f4f6;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-5px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
  z-index: 999;
}

.nav-item:hover .mega-menu,
.nav-item button[aria-expanded="true"] + .mega-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.mega-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 1.5rem 2rem 2rem 2rem; 
  display: flex;
  flex-direction: column;
}

/* Main Heading margin - reduced bottom gap */
.mega-col-heading {
  font-family: var(--nav-font-family);
  font-size: 24px;
  font-weight: 600; /* Keeping weight here just for the giant dropdown title */
  color: var(--color-text-primary);
  margin: 0 0 0.75rem 0; 
}

/* Column Link Stack - controls the close gap between individual links */
.mega-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem; 
}

/* Individual Link Container adjustments - font-weight removed */
.mega-card {
  text-decoration: none;
  display: block;
  padding: 0.15rem 0; 
  transition: transform 0.2s ease;
}

.mega-card-title {
  font-family: var(--nav-font-family);
  font-size: 15px;
  color: var(--color-text-muted);
  line-height: 1.2; 
  transition: color 0.15s ease;
}

.mega-card:hover .mega-card-title {
  color: var(--color-accent);
}

/* Keeps descriptions hidden to maintain clean layout */
.mega-card-desc, .badge-soon, .mega-tag {
  display: none !important; 
}
.hero {
  /* Adjust the 20px value up or down depending on exactly how low you want it */
  margin-top: 94px; 
}

/* ==========================================================================
   GLOBAL TYPOGRAPHY UNIFICATION (Font Family Only)
   ========================================================================== */

/* 
   Targeting all text elements across the platform to explicitly enforce 
   the 'DM Sans' typeface without altering structural layout properties.
*/
html, 
body, 
h1, h2, h3, h4, h5, h6, 
p, span, a, button, input, label, textarea, b, s, u {
  font-family: 'DM Sans', sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 
   Explicit fallback protection for all your layout-specific class names 
   to overwrite any legacy font declarations from older files.
*/
.platform-hero-heading,
.why-us-title,
.explore-projects-heading,
.center-title,
.card-title,
.mega-col-heading,
.mega-card-title,
.author,
.why-us-subheading,
.bridge-professional-text,
.card-text,
.mega-card-desc,
.nav-link,
.nav-link-text,
.btn-text {
  font-family: 'DM Sans', sans-serif !important;
}
/* ==========================================================================
   MYWEAVERLABS - PLATFORM HERO TYPOGRAPHY UNIFICATION
   ========================================================================== */

/* Target all text elements within the platform hero right wrapper */
.platform-hero-right,
.platform-hero-right div,
.platform-hero-right span,
.platform-hero-right h1,
.platform-hero-right h2,
.platform-hero-right h3,
.platform-hero-right h4,
.platform-hero-right p,
.platform-hero-right a {
  font-family: 'DM Sans', sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Ensure any future icon implementations inside these shapes maintain font files */
.platform-hero-right i,
.platform-hero-right [class*="fa-"] {
  font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands" !important;
  font-weight: 900 !important;
}