html,
   body {
       font-family: 'Roboto', 'Open Sans', 'Quicksand', Arial, sans-serif;
       color: white;

   }


   * {
       margin: 0;
       padding: 0;
       box-sizing: border-box;
       font-family: 'Roboto', 'Open Sans', 'Quicksand', Arial, sans-serif;
   }

   :root {
       --primary-blue: #004687;

       --text-dark: #333;
       --white: #ffffff;
   }

   .reveal {
       opacity: 0;
       transform: translateY(30px);
       /* Adjust this for more/less movement */
       transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
       transition-property: opacity, transform;

   }

   /* 2. State when scrolled into view */
   .reveal.active {
       opacity: 1 !important;
       transform: translateY(0) !important;
       visibility: visible !important;
   }

   /* Optional: Add a 'reveal-left' variant if you want things to slide in from the side */
   .reveal.reveal-left {
       transform: translateX(-50px);
   }

   .reveal.reveal-left.active {
       transform: translateX(0);
   }

   /* --- ABOUT HERO SECTION --- */
   /* Force sub-pixel rendering and hardware isolation */
   .char,
   #about-title,
   #about-p,
   .story-title,
   #story-description {
       -webkit-font-smoothing: antialiased;
       -moz-osx-font-smoothing: grayscale;
       backface-visibility: hidden;
       -webkit-backface-visibility: hidden;
       transform: translateZ(0);
       /* The most important line for sharpness */
       perspective: 1000px;
       will-change: transform, opacity;
   }

   .about-hero {
       font-family: 'Roboto', 'Open Sans', 'Quicksand', Arial, sans-serif;
       position: relative;
       width: 100%;
       height: 80vh;
       /* Shorter than the main hero */
       display: flex;
       align-items: center;
       justify-content: center;
       text-align: center;
       overflow: hidden;
       background-color: #000;
   }

   .about-hero::before {
       content: "";
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       /* Dark gradient overlay to make white text pop */
       background: linear-gradient(to right,
               rgba(0, 0, 0, 0.9) 0%,
               rgba(0, 0, 0, 0) 30%,
               rgba(0, 0, 0, 0) 70%,
               rgba(0, 0, 0, 0.9) 100%),
           url('../../static/assets/aboutHero2.png');

       background-size: cover;
       background-position: center;
       background-size: cover;
       background-position: center;
       z-index: 0;
       animation: heroEntry 5s ease-out forwards;
   }

   .about-hero-content {
       position: relative;
       z-index: 10;
       color: #ffffff;
       padding: 0 20px;
       isolation: isolate;
       transform: translate3d(0, 0, 0);
   }

   .about-hero h1 {
       font-size: 4rem;
       margin-bottom: 20px;
       letter-spacing: -2px;
       line-height: 1.2;
       color: #ffffff;
   }

   .about-hero p {
       font-size: 1.3rem;
       color: rgba(255, 255, 255, 0.8);
       max-width: 600px;
       margin: 0 auto;
       line-height: 1.3;
   }

   /* --- CHARACTER BASE STATE --- */
   .char {
       display: inline-block;
       opacity: 0;
       transform: translateY(15px);
       /* Subtle rise effect */
       transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
   }

   /* --- REVEALED STATE --- */
   .char.visible {
       opacity: 1;
       transform: translate3d(0);
   }

   @keyframes heroEntry {
       0% {
           transform: scale(1);
           filter: blur(10px) brightness(0.8);
           /* Starts blurry and dark */
       }

       100% {
           transform: scale(1.1);
           filter: blur(0px) brightness(1);
           /* Ends sharp and clear */
       }
   }

   /* Ensure the parent container doesn't hide the text while it's moving */
   .about-hero-content {
       position: relative;
       z-index: 10;
   }

   /* --- STORY CONTENT STYLING --- */
   .our-story-container {
       display: flex;
       align-items: center;
       /* Vertically centers text with the image */
       justify-content: space-between;
       gap: 100px;
       /* Space between image and text */
       padding: 80px 5%;
       background-color: #ffffff;

   }

   .story-content {
       flex: 1;
       /* Takes up equal space in the flex container */

       padding: 20px;
   }

   .story-title {
       font-size: 2.8rem;
       color: #003366;
       /* Your brand's deep navy */
       margin-bottom: 35px;
       font-weight: 700;
       letter-spacing: -0.5px;
       position: relative;
   }

   /* Subtle accent line under the title */
   .story-title::after {
       content: "";
       position: absolute;
       bottom: -10px;
       left: 0;
       width: 60px;
       height: 4px;
       background-color: #5189c1;
       /* Your brand's light blue */
       border-radius: 2px;
   }

   .story-description {
       font-size: 1.5rem;
       line-height: 1.7;
       text-align: left;
       color: #003366;
       /* THE FIX: Prevents hyphenation and forces whole-word wrapping */
       overflow-wrap: normal;
       word-break: normal;
       hyphens: none;

       /* Ensure the text has enough horizontal space */
       width: 100%;
       max-width: 800px;
       /* Increased from 700px to allow more words per line */
   }

   /* Character Animation Helper Class */
   .story-description .char {
       display: inline-block;
       opacity: 0;
       transform: translateY(10px);
       transition: all 0.4s ease;
   }

   .story-description .word {
       display: inline-block;
       /* This is the magic line that stops word-breaking */
       white-space: nowrap;
       /* Prevents the word itself from breaking */
   }

   .story-description.char.visible {
       opacity: 1 !important;
       transform: translateY(0) !important;
   }

   /* --- IMAGE SIZE CONTROL --- */
   .story-visual {
       flex: 0 0 40%;
       /* Image takes up exactly 40% of the width */
       max-width: 500px;
       /* Limits the maximum size on large screens */
       border-radius: 20px;
       overflow: hidden;
       box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
       opacity: 0;
       transform: scale(0.5);
       /* Starts at half size */
       transition: transform 1.8s cubic-bezier(0.165, 0.84, 0.44, 1),
           opacity 1.5s ease;
       will-change: transform, opacity;
   }

   .story-visual img {
       width: 100%;
       height: auto;
       display: block;
       object-fit: cover;
       transform: scale(1.3);
       transition: transform 3s ease;
       opacity: 0;
   }

   .our-story-container.is-visible .story-visual {
       opacity: 1;
       transform: scale(1);
   }

   .our-story-container.is-visible .story-visual img {
       transform: scale(1);
       /* Returns to original width/height */
       opacity: 1;
   }


   /*   Stat card          */

   .premium-stats {
       display: flex;
       justify-content: center;
       gap: 30px;
       background-color: #f8f9fa;
       /* Light background to make the Navy cards pop */
       padding: 100px 20px;
   }

   .stat-card {
       position: relative;
       flex: 1;
       max-width: 320px;
       padding: 50px 40px;
       background: #003366;
       /* Your Brand Color */
       border-radius: 24px;
       overflow: hidden;
       text-align: left;
       box-shadow: 0 20px 40px rgba(0, 51, 102, 0.15);
       transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
   }

   /* The Animated Top Border Reveal */
   .stat-card::before {
       content: '';
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 6px;
       background: linear-gradient(90deg, #00d2ff 0%, #ffffff 100%);
       transform: translateX(-101%);
       transition: transform 0.5s ease;
   }

   .stat-card:hover {
       transform: translateY(-10px);
   }

   .stat-card:hover::before {
       transform: translateX(0);
   }

   .stat-number {
       font-size: 4.5rem;
       font-weight: 800;
       margin: 0;
       /* Premium Silver-to-White Gradient Text */
       background: linear-gradient(180deg, #ffffff 40%, #5189c1 100%);
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       line-height: 1;
       letter-spacing: -2px;
   }

   .stat-label {
       color: rgba(255, 255, 255, 0.7);
       font-size: 1.1rem;
       margin-top: 20px;
       font-weight: 500;
       text-transform: uppercase;
       letter-spacing: 1px;
   }

   /* --- PREMIUM SECTION BACKGROUND --- */
   /* --- PREMIUM VM SECTION --- */
   /* --- SECTION BASE --- */
   .elite-vm-section {
       position: relative;
       padding: 10px 0;
       background-color: #fff;
       overflow: hidden;
   }

   /* Background Watermark */


   .vm-wrapper {
       max-width: 1400px;
       margin: 0 auto;
       position: relative;
       z-index: 1;
   }

   /* --- THE OFFSET FEATURE --- */
   .vm-feature {
       display: flex;
       align-items: center;
       gap: 0;
       /* Elements will overlap */
       margin-bottom: 100px;
   }

   .vm-image-box {
       flex: 1.2;
       height: 500px;
       position: relative;
       border-radius: 4px;
       overflow: hidden;
       box-shadow: 0 40px 100px rgba(0, 0, 0, 0.1);
   }

   .vm-image-box img {
       width: 100%;
       height: 100%;
       object-fit: cover;
   }

   .vm-overlay {
       position: absolute;
       inset: 0;
       background: linear-gradient(45deg, rgba(0, 51, 102, 0.4), transparent);
   }

   /* --- TEXT BOX (THE OVERLAP) --- */
   .vm-text-box {
       flex: 1;
       background: #ffffff;
       padding: 30px;
       margin-left: -100px;
       /* Forces overlap with image */
       position: relative;
       box-shadow: 20px 20px 60px rgba(0, 0, 0, 0.05);
       border-top: 6px solid #5189c1;
   }

   .mission-feature {
       display: flex !important;
       flex-direction: row !important;
       /* Forces Text-Left, Image-Right */
       align-items: center !important;
       justify-content: center !important;
   }

   .mission-feature .vm-text-box {
       margin-right: -100px !important;
       /* Pulls text OVER the image */
       margin-left: 0 !important;
       /* Resets Vision-style margin */
       z-index: 10 !important;
       /* Keeps text on top layer */
       position: relative !important;
       background: #ffffff !important;
       /* Keeps background solid */
   }

   /* Ensure the Mission Image stays in the background */
   .mission-feature .vm-image-box {
       flex: 1.2 !important;
       z-index: 1 !important;
       position: relative !important;
   }

   .vm-index {
       font-size: 1rem;
       font-weight: 900;
       color: #5189c1;
       letter-spacing: 5px;
       display: block;
       margin-bottom: 20px;
   }

   .vm-text-box h2 {
       font-size: 3.5rem;
       color: #003366;
       margin-bottom: 25px;
       font-weight: 800;
   }

   .vm-decorative-line {
       width: 60px;
       height: 2px;
       background: #5189c1;
       margin-bottom: 30px;
   }

   .vm-text-box p {
       font-size: 1.2rem;
       line-height: 1.9;
       color: #444;
   }

   /* Mobile Fixes */
   @media (max-width: 992px) {
       .vm-feature {
           flex-direction: column !important;
       }

       .vm-text-box {
           margin: -50px 20px 0 !important;
           padding: 40px 30px;
       }

       .vm-image-box {
           height: 350px;
           width: 100%;
       }
   }

   /* Mobile Adjustments */
   @media (max-width: 992px) {
       .our-story-container {
           flex-direction: column;
           text-align: center;
       }
   }







   /* The ARCH Logic */
   .arch-frame {
       width: 100%;
       overflow: hidden;
       /* This creates the exact window arch */
       border-radius: 200px 200px 0 0;
       border: 1px solid rgba(244, 194, 194, 0.3);
   }

   .arch-frame img {
       width: 100%;
       height: 100%;
       object-fit: cover;
       /* Prevents image stretching */
       display: block;
   }

   .featured .arch-frame {
       height: 480px;
   }

   .small .arch-frame {
       height: 200px;
   }

   /* Text Label Boxes */
   .label-box {
       border: 1px solid var(--rose-pink);
       margin-top: 15px;
       padding: 15px 5px;
       text-align: center;
       position: relative;
   }

   .label-box h2 {
       font-size: 2rem;
       margin: 0;
   }

   .label-box h3 {
       font-size: 1rem;
       margin: 0;
   }

   .label-box p {
       font-size: 0.8rem;
       margin: 5px 0 0;
       font-family: Arial, sans-serif;
   }

   /* Notches on the side of the box (as seen in image) */
   .label-box::before {
       content: "";
       position: absolute;
       left: -1px;
       top: 50%;
       height: 12px;
       width: 5px;
       background: var(--brand-blue);
       transform: translateY(-50%);
   }

   /* New Vision/Mission Text Animation States */
   .vm-text-box h2,
   .vm-text-box .vm-decorative-line,
   .vm-text-box p {
       opacity: 0;
       transform: translateY(30px);
       transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
   }

   /* When the "revealed" class is added via JS */
   .vm-text-box.revealed h2,
   .vm-text-box.revealed .vm-decorative-line,
   .vm-text-box.revealed p {
       opacity: 1;
       transform: translateY(0);
   }

   /* Staggering the elements so they come in one after another */
   .vm-text-box.revealed h2 {
       transition-delay: 0.1s;
   }

   .vm-text-box.revealed .vm-decorative-line {
       transition-delay: 0.3s;
   }

   .vm-text-box.revealed p {
       transition-delay: 0.5s;
   }

   /* Mobile Responsiveness */
   /* --- GLOBAL RESPONSIVE ADJUSTMENTS --- */

   /* Tablets (Large Screens) */
   @media (max-width: 1200px) {
       .about-hero h1 {
           font-size: 3.2rem;
       }

       .vm-text-box h2 {
           font-size: 2.8rem;
       }

       .story-title {
           font-size: 2.4rem;
       }
   }

   /* Tablets & Small Laptops (The "Stacking" Point) */
   @media (max-width: 992px) {

       /* Hero Section */
       .about-hero {
           height: 60vh;
       }

       .about-hero h1 {
           font-size: 2.5rem;
           letter-spacing: -1px;
       }

       /* Our Story Section */
       .our-story-container {
           flex-direction: column !important;
           gap: 40px;
           padding: 60px 8%;
           text-align: center;
       }

       .story-visual {
           flex: 0 0 100%;
           width: 100%;
           max-width: 100%;
       }

       .story-title::after {
           left: 50%;
           transform: translateX(-50%);
       }

       /* Center the accent line */
       .story-description {
           text-align: center;
           font-size: 1.1rem;
       }

       /* Ensure the container is the base for layering */
       .vm-feature {
           position: relative;
           display: flex;
           align-items: center;
           z-index: 1;
       }

       /* Elevate the Text Box to the top layer */
       .vm-text-box {
           position: relative;
           z-index: 10 !important;
           /* Higher number keeps it above the image */
           background: #ffffff;
           /* Solid white background hides the image underneath */
       }

       /* Keep the Image Box in the background layer */
       .vm-image-box {
           position: relative;
           z-index: 1;
       }

       /* --- VISION SECTION (Image Left, Text Right) --- */
       .vision-feature .vm-text-box {
           margin-left: -100px;
           /* Pulls the text block over the image */
       }

       /* --- MISSION SECTION (Text Left, Image Right) --- */
       .mission-feature {
           flex-direction: row;
           /* Keeps text on left and image on right */
       }

       .mission-feature .vm-text-box {
           margin-right: -100px;
           /* Pulls the text block over the image to its right */
           margin-left: 0;
           /* Resets any vision-specific margins */
       }

       
   }

   /* Mobile Phones (Small Screens) */
   

   /* 1. Remove the blur entirely from the About page text */
   .AboutUs .char,
   .AboutUs .section-title span,
   .AboutUs #story-description span {
       filter: none !important;
       /* Forces the browser to stop calculating blur */
       -webkit-filter: none !important;
       backface-visibility: hidden;
       transform-style: preserve-3d;
       -webkit-font-smoothing: antialiased;
   }

   /* 2. Force a clean rendering layer for the Hero Content */
   .about-hero-content {
       isolation: isolate;
       transform: translateZ(0);
   }

   /* 3. Fix the blurred text during/after transforms */
   .char.visible {
       opacity: 1 !important;
       transform: translateY(0) !important;
       filter: blur(0) !important;
       /* Explicitly clear it */
       will-change: auto;
       /* Tell the browser it can stop optimizing this layer */
   }

   .mahindra-story {
       width: 100%;
   }



   :root {
       --primary-red: #003366;
       --bg-color: #F4F1EA;
       --text-gray: #666;
   }

   body {
       margin: 0;
       padding: 0;
       background-color: var(--bg-color);
       overflow-x: hidden;
   }

   .mahindra-timeline {
       display: flex;
       flex-wrap: wrap;
       /* Allows the title to stay on its own line */
       background-color: var(--bg-color);
       min-height: 400vh;

   }

   .timeline-header {
       flex: 0 0 100%;
       text-align: center;
       margin-bottom: 10px;
       /* Space between title and timeline content */
   }

   /* Style for your centered title */
   .main-title {
       font-size: 4rem;
       color: #003366;
       /* Matching LogicMotive corporate blue */
       text-align: center;
       padding-top: 40px;
       width: 100%;
   }

   /* Ensure your existing columns still sit side-by-side */
   .timeline-left,
   .timeline-right {
       flex: 1;
       /* Adjust based on your existing width preferences */
       /* keep your existing styles for these classes */
   }

   /* Left Sidebar Layout */
   .timeline-left {
       flex: 1.5;
       position: sticky;
       top: 0;
       height: 100vh;
       display: flex;
       align-items: center;
       justify-content: flex-end;
       padding-right: 50px;
       overflow: hidden;
   }

   /* Vertical Ruler */
   .ruler-container {
       position: absolute;
       left: 10%;
       height: 200px;
       width: 40px;
       display: flex;
       flex-direction: column;
       justify-content: space-between;
   }

   .ruler-line {
       width: 1px;
       height: 100%;
       background: #ccc;
       margin: auto;
   }

   .ruler-mark {
       position: absolute;
       top: 0%;
       width: 20px;
       height: 2px;
       background: var(--primary-red);
       transition: top 0.3s ease;
   }

   /* Year Scrolling Logic */
   .year-scroller {
       position: relative;
       height: 100vh;
       width: 100%;
       display: flex;
       flex-direction: column;
       justify-content: flex-start;
       align-items: center;
       overflow: hidden;
   }

   /* The Focal Circle with Progress Border */
   .focus-lens {
       position: absolute;
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
       width: 400px;
       height: 400px;
       z-index: 10;
       pointer-events: none;
   }

   .progress-ring {
       transform: rotate(-90deg);
       /* Start from 12 o'clock */
   }

   .ring-bg {
       fill: none;
       stroke: rgba(0, 0, 0, 0.05);
       /* Faint guide */
       stroke-width: 1;
   }

   .ring-active {
       fill: none;
       stroke: var(--primary-red);
       stroke-width: 3;
       stroke-linecap: round;
       /* Circumference for r=158 is ~993 */
       stroke-dasharray: 993;
       stroke-dashoffset: 993;
       transition: stroke-dashoffset 0.1s linear;
   }

   .year-list {
       display: flex;
       flex-direction: column;
       transition: transform 0.7s cubic-bezier(0.23, 1, 0.32, 1);
       will-change: transform;
       padding-top: calc(50vh - 125px);
       padding-bottom: 50vh;
       margin: 0;
   }

   .year-item {
       height: 250px;
       width: 100%;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 11rem;
       font-weight: 900;
       color: #E0DDD5;
       transition: color 0.5s ease, transform 0.5s ease;
       box-sizing: border-box;
       flex-shrink: 0;
   }

   .year-item.active {
       color: var(--primary-red);
       transform: scale(1.1);
   }

   /* Right Content Container */
   .timeline-right {
       flex: 1.2;
       padding: 0 50px;
   }

   .story-section {
       min-height: 90vh;
       display: flex;
       flex-direction: column;
       justify-content: center;
       border-bottom: 1px solid rgba(0, 0, 0, 0.05);
       padding: 40px 0;
   }

   .story-section h4 {
       color: var(--primary-red);
       margin-bottom: 10px;
       font-size: 1.2rem;
       letter-spacing: 2px;
   }

   .story-section h2 {
       font-size: 2.8rem;
       color: #003366;
       margin: 0 0 20px 0;
   }

   .story-section p {
       font-size: 1.25rem;
       color: var(--text-gray);
       line-height: 1.7;
       max-width: 450px;
       margin: 0;
   }

   @media (max-width: 1024px) {
       .year-item {
           font-size: 6rem;
       }

       .focus-lens {
           width: 200px;
           height: 200px;
       }

       .progress-ring {
           width: 200px;
           height: 200px;
       }

       /* Adjust circumference for smaller ring if needed */
   }


   .top-bar {
       background-color: #003366;
       color: #ffffff;
       padding: 8px 0;
       font-size: 13px;
   }

   .top-bar .container {
       display: flex;
       justify-content: space-between;
       max-width: 1200px;
       margin: 0 auto;
       padding: 0 20px;
   }

   .top-bar ul {
       list-style: none;
       display: flex;
       gap: 20px;
   }

   .top-bar i {
       margin-right: 8px;
       color: var(--accent-green);
   }

   /* Navbar */
   .navbar {
       display: flex;
       justify-content: space-between;
       align-items: center;
       padding: 15px 5%;
       background: var(--white);
       box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
       position: sticky;
       top: 0;
       z-index: 1000;
   }

   .nav-links {
       display: flex;
       list-style: none;
       gap: 45px;
       align-items: center;
   }

   .nav-links a {
       font-size: 20px;
       text-decoration: none;
       color: var(--text-dark);
       font-weight: 500;
       transition: 0.3s;
   }

   .nav-links a:hover {
       color: var(--primary-blue);
   }

   .logo {
       height: 60px;
       width: auto;
   }

   /* Dropdown */
   .dropdown {
       position: relative;
   }

   .dropdown-menu {

       position: absolute;
       top: 100%;
       left: 0;
       background: var(--white);
       min-width: 220px;
       box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
       list-style: none;
       padding: 10px 0;
       border-top: 3px solid var(--primary-blue);
       opacity: 0;
       visibility: hidden;
       transform: translateY(15px);
       transition: 0.3s;
       border-radius: 10px;
   }

   .dropdown:hover .dropdown-menu {
       opacity: 1;
       visibility: visible;
       transform: translateY(0);
   }

   .dropdown-item {
       padding: 12px 20px;
       display: block;
       font-size: 14px !important;
       text-decoration: none;
       color: var(--text-dark);
   }

   .dropdown-item:hover {
       background: #f8f9fa;
       color: var(--primary-blue);
   }

   /* Dot Menu */
   .dot-menu {
       display: grid;
       grid-template-columns: repeat(3, 1fr);
       gap: 4px;
       cursor: pointer;
       width: 30px;
       transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
   }

   .dot-menu span {
       width: 5px;
       height: 5px;
       background-color: #003366;
       border-radius: 50%;
   }

   /* Rotation happens when this class is added via JS */
   .dot-menu.is-rotated {
       transform: rotate(90deg);
   }



   /* Pulse only when rotated (sidebar open) */
   .dot-menu.is-rotated span {
       animation: dotPulse 1.5s infinite ease-in-out;
   }

   /* Staggered pulse effect */
   .dot-menu.is-rotated span:nth-child(odd) {
       animation-delay: 0.2s;
   }

   .dot-menu.is-rotated span:nth-child(even) {
       animation-delay: 0.4s;
   }

   /* Define the Pulse Animation */
   @keyframes dotPulse {
       0% {
           transform: scale(1);
           opacity: 1;
       }

       50% {
           transform: scale(1.4);
           opacity: 0.7;
           background-color: var(--accent-green);
           /* Pulse to green */
       }

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

   /* Apply the animation to all 9 dots when the sidebar is active */
   .contact-section.active~.navbar .dot-menu span {
       animation: dotPulse 1.5s infinite ease-in-out;
   }

   /* Stagger the animation for each dot for a wave effect */
   .dot-menu span:nth-child(odd) {
       animation-delay: 0.2s;
   }

   .dot-menu span:nth-child(even) {
       animation-delay: 0.4s;
   }

   /* Mobile Toggle Icon */
   .menu-toggle {
       display: none;
       flex-direction: column;
       gap: 5px;
       cursor: pointer;
       width: 30px;
   }

   .menu-toggle span {
       width: 100%;
       height: 3px;
       background: #003366;
       transition: 0.3s;
   }

   .menu-toggle.is-active span {
       background-color: var(--primary-blue);
   }

   /* Contact Sidebar */
   .contact-section {
       position: fixed;
       top: 0;
       right: -100%;
       width: 350px;
       height: 100vh;
       background-color: #003366;
       box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
       z-index: 9999;
       padding: 40px;
       transition: 0.4s;
       color: #ffffff;
       transition: transform 0.4s cubic-bezier(0.77, 0, 0.175, 1);
       will-change: transform;
       pointer-events: none;
       /* Prevents accidental clicks when hidden */
       visibility: hidden;
   }

   .contact-section.active {
       right: 0;
       transform: translateX(0);
       pointer-events: all;
       visibility: visible;
   }

   .close-contact {
       position: absolute;
       top: 20px;
       right: 20px;
       font-size: 24px;
       cursor: pointer;
   }

   /* Sidebar Content Styling */
   .contact-section img {
       margin-bottom: 25px;
       display: block;
   }

   .contact-desc {
       font-size: 15px;
       line-height: 1.6;
       color: #e0e0e0;
       /* Light gray for readability on dark background */
       margin-bottom: 30px;
   }

   .contact-info {
       display: flex;
       flex-direction: column;
       gap: 20px;
   }

   .info-item {
       display: flex;
       align-items: flex-start;
       gap: 15px;
       font-size: 15px;
       color: #ffffff;

   }

   .info-item i {
       color: var(--accent-green);
       /* Highlights your icons in green */
       width: 20px;
       text-align: flex-start;
       font-size: 18px;
       margin-top: 5px;
   }

   /* RESPONSIVE STYLES */
   @media (max-width: 992px) {
       .top-bar {
           display: none;
       }

       .menu-toggle {
           display: flex;
           color: #003366;

           z-index: 1100;
           margin-left: 0;
       }

       .nav-links {
           position: fixed;
           top: var(--lm-navbar-height);
           left: 0;
           width: 100%;
           height: calc(100vh - var(--lm-navbar-height));
           background: #ffffff;
           display: flex;
           flex-direction: column;
           align-items: center;
           justify-content: flex-start;
           padding-top: 30px;
           gap: 20px;
           visibility: hidden;
           opacity: 0;
           transform: translateX(100%);
           transition: transform 0.4s cubic-bezier(0.77, 0, 0.175, 1), opacity 0.3s ease;
           z-index: 1001;
           overflow-y: auto;
           pointer-events: none;
       }

       /* This is the class the JavaScript triggers */
       .nav-links.active {
           right: 0 !important;
           visibility: visible;
           opacity: 1;
           transform: translateX(0);
           pointer-events: auto;
       }

       /* Hamburger to X Animation */
       .menu-toggle.is-active span:nth-child(1) {
           transform: translateY(8px) rotate(45deg);
       }

       .menu-toggle.is-active span:nth-child(2) {
           opacity: 0;
       }

       .menu-toggle.is-active span:nth-child(3) {
           transform: translateY(-8px) rotate(-45deg);
       }

       /* Mobile Dropdown */
       .dropdown {
           width: 100%;
           display: flex;
           /* Added */
           flex-direction: column;
           /* Added */
           align-items: center;
           /* Added: This centers the "Services +" text */
       }

       .dropdown-menu {
           position: static;
           opacity: 1;

           visibility: visible;
           display: none;
           width: auto;
           /* Changed from 100% to auto to prevent stretching */
           min-width: 200px;
           /* Added for consistent look */
           background-color: #f9f9f9;
           border-top: none;
           border-left: 3px solid var(--primary-blue);
           margin-top: 10px;
           text-align: center;
           /* Added: Centers the text inside sub-links */
       }

       .dropdown-item {
           padding: 10px 20px;
           /* Slightly reduced padding for a tighter look */
           display: block;
           font-size: 14px !important;
           /* Change this value to your preferred smaller size */
           text-decoration: none;
           color: var(--text-dark);
           font-weight: 200;
           /* Normal weight makes it look smaller than the 500 bold main links */
           transition: background 0.2s, color 0.2s;
       }

       .dropdown-item:hover {
           background-color: #f8f9fa;
           color: var(--primary-blue);
       }

       /* Active state for mobile */
       .dropdown.active .dropdown-menu {
           display: block;
           animation: fadeIn 0.3s ease;
       }

       .dropdown-toggle::after {

           font-size: 14px;
           transition: transform 0.3s;
           display: inline-block;
       }

       .dropdown.active .dropdown-toggle::after {
           transform: rotate(180deg);
       }

       .dropdown-menu .dropdown-item {
           font-size: 14px !important;
           /* Smaller font for mobile dropdown items */
           padding: 8px 15px;
       }
   }

  @media (max-width: 468px) {

  /* 1. Reset the Navbar to align children to the edges */
  .navbar {
    display: flex !important;
    justify-content: space-between !important;
    /* Pushes Logo left, Menu right */
    align-items: center !important;
    height: 70px !important;
    padding: 0 20px !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 100000 !important;
    background: #ffffff !important;
  }

  /* 2. Position the Menu Toggle in the right corner */
  .menu-toggle {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    width: 35px !important;
    height: 30px !important;
    margin-left: 0 !important;
    /* CRITICAL: Removes the 320px margin that pushes it off-screen */
    margin-right: 0 !important;
    cursor: pointer !important;
    z-index: 100000 !important;
    order: 2;
    /* Ensures it stays to the right of the logo */
  }

  /* 3. Ensure the Hamburger lines are visible */
  .menu-toggle span {
    display: block !important;
    width: 28px !important;
    height: 3px !important;
    background-color: #003366 !important;
    /* Brand Blue */
    margin: 3px 0 !important;
    border-radius: 2px !important;
    transition: 0.3s !important;
  }

  /* 4. Responsive Full-Width Mobile Menu Links */
.nav-links {
    position: fixed !important;
    top: 70px !important;
    left: 0 !important;
    width: 100% !important;
    height: calc(100vh - 70px) !important;
    background: #ffffff !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding-top: 40px !important;
    gap: 25px !important;

    /* 1. CRITICAL: Add visibility here */
    visibility: hidden; 
    opacity: 0;
    
    /* Slide-in animation */
    transform: translateX(100%) !important;
    transition: transform 0.4s cubic-bezier(0.77, 0, 0.175, 1), opacity 0.3s ease !important;
    z-index: 100001 !important;
    overflow-y: auto !important;
    pointer-events: none;
  }

  .nav-links.active {
    /* 2. CRITICAL: Make it visible and clickable when active */
    visibility: visible !important;
    opacity: 1 !important;
    transform: translateX(0) !important;
    pointer-events: auto !important; 
    z-index: 100002 !important; 
  }

  .nav-links li {
    width: 100%;
    text-align: center;
    list-style: none;
  }

  .nav-links a {
    font-size: 1.3rem !important;
    color: #003366 !important;
    font-weight: 600 !important;
    text-decoration: none;
    display: block;
    padding: 15px 0;
  }
   .nav-links .dropdown {
    width: 100%;
    text-align: center;
  }

  /* 2. Style the "Services +" Toggle Link */
  .nav-links .dropdown-toggle {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 15px 0;
    border-bottom: 1px solid rgba(0, 51, 102, 0.05);
  }

  /* 3. The Menu that slides down */
.nav-links .dropdown-menu {
        display: none !important; /* Removed !important to allow class toggling */
        position: static !important;
        width: 100%;
        background-color: #f8f9fa;
        border-left: 4px solid var(--primary-blue);
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        transition: max-height 0.4s ease, opacity 0.3s ease;
    }

  /* 4. Active State (when clicked via JS) */
.nav-links .dropdown.active .dropdown-menu {
        display: block !important; /* Force it visible */
        max-height: 500px; /* Allow content to grow */
        opacity: 1;
        visibility: visible;
        padding: 10px 0;
    }

  /* 5. Sub-items styling */
  .nav-links .dropdown-item {
    font-size: 1rem !important;
    padding: 12px 20px !important;
    color: #555 !important;
    font-weight: 400 !important;
    text-align: center;
    display: block !important;
    width: 100%;
    padding: 15px 0 !important;
  }

  /* 6. Rotating the "+" icon if you add one */
  .dropdown.active .dropdown-toggle::after {
    transform: rotate(180deg);
  }
  /* Hide unnecessary elements on small mobile */
  .dot-menu,
  .top-bar {
    display: none !important;
  }
}

   @keyframes fadeIn {
       from {
           opacity: 0;
           transform: translateY(-10px);
       }

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


   .footer {
       background-color: #0b2a4a;
       /* enterprise blue */
       color: #cfd8e3;
       font-size: 14px;
   }

   .footer-container {
       max-width: 1200px;
       margin: auto;
       padding: 50px 30px 30px;
       display: grid;
       grid-template-columns: repeat(3, 1fr);
       gap: 40px;
   }

   /* Logo */
   .footer-logo {
       height: 90px;
       margin-bottom: 15px;
   }

   /* Description */
   .footer-desc {
       line-height: 1.6;
       color: #b9c6d4;
   }

   /* Column titles */
   .footer-col h4 {
       color: #ffffff;
       font-size: 16px;
       margin-bottom: 15px;
   }

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

   .footer-col ul li {
       margin-bottom: 10px;
   }

   .footer-col ul li a {
       color: #b9c6d4;
       text-decoration: none;
       transition: color 0.3s ease;
   }

   .footer-col ul li a:hover {
       color: #003366;
   }

   /* Contact */
   .contact-list li {
       display: flex;
       align-items: center;
       gap: 10px;
       margin-bottom: 10px;
   }

   .contact-list i {
       color: #003366;
   }

   /* Social icons */
   .social-links {
       margin-top: 15px;
       display: flex;
       gap: 12px;
   }

   .social-links a {
       width: 36px;
       height: 36px;
       border-radius: 50%;
       background: rgba(255, 255, 255, 0.08);
       display: flex;
       align-items: center;
       justify-content: center;
       color: #ffffff;
       text-decoration: none !important;
       transition: background 0.3s ease;
   }

   .social-links a:hover {
       background: #003366;
   }

   .social-links a:visited,
   .social-links a:hover,
   .social-links a:focus,
   .social-links a:active {
       text-decoration: none !important;
   }

   /* Keep footer social icons decoration-free across all link states */
   .footer .social-links a,
   .footer .social-links a:link,
   .footer .social-links a:visited,
   .footer .social-links a:hover,
   .footer .social-links a:focus,
   .footer .social-links a:active,
   .footer .social-links a i {
       text-decoration: none !important;
       border-bottom: none !important;
   }

   /* Bottom bar */
   .footer-bottom {
       border-top: 1px solid rgba(255, 255, 255, 0.1);
       text-align: center;
       padding: 15px;
       font-size: 13px;
       color: #aeb9c6;
   }

   .footer-legal {
       margin-top: 6px;
       font-size: 12px;
       color: #aeb9c6;
   }

   .contact-list li i {
       color: #fff;
   }


   /* --- COMPREHENSIVE RESPONSIVE CSS (MAX-WIDTH: 468PX) --- */
@media  (max-width: 468px) {
    
    /* 1. Global Reset to kill horizontal scroll */
    html, body {
       
        overflow-x: hidden !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    * {
        box-sizing: border-box !important;
    }

    /* 2. About Hero Section */
    .about-hero {
        padding: 60px 20px !important;
        text-align: center;
    }

    #about-title {
        font-size: 2rem !important; /* Scale down heading */
        line-height: 1.2;
    }

    #about-p {
        font-size: 0.95rem !important;
        margin-top: 15px;
    }

    /* 3. Our Story Section */
    .our-story-container {
        display: flex;
        flex-direction: column !important; /* Stack image and text */
        padding: 40px 20px !important;
        gap: 20px;
    }

    .story-visual, .story-content {
        width: 100% !important;
    }

    .story-visual img {
        width: 100%;
        height: auto;
        border-radius: 10px;
    }

    .story-title {
        font-size: 1.8rem !important;
        text-align: center;
    }

    .story-description {
        text-align: justify;
        font-size: 0.9rem;
        line-height: 1.6;
    }

    /* 4. Premium Stats (Horizontal space fix) */
    .premium-stats {
        display: grid !important;
        grid-template-columns: 1fr !important; /* One per row */
        gap: 20px;
        padding: 30px 20px !important;
    }

    .stat-card {
        width: 100% !important;
        padding: 20px;
    }

    /* 5. Mahindra Timeline (CRITICAL FIX) */
    .mahindra-timeline {
        padding: 40px 10px !important;
        overflow: hidden;
    }

    .timeline-left {
        display: flex !important;
        position: sticky;
        top: 70px;
        height: 250px;
        justify-content: center;
        align-items: center;
        padding-right: 0 !important;
        margin-bottom: 12px;
        background: var(--bg-color);
        z-index: 8;
    }

    .timeline-right {
        width: 100% !important;
        padding: 0 10px !important;
        display: flex;
        flex-direction: column;
        gap: 30px;
    }

    .year-scroller {
        height: 250px;
        width: 100%;
    }

    .focus-lens {
        width: 180px;
        height: 180px;
    }

    .progress-ring {
        width: 180px;
        height: 180px;
    }

    .ruler-container {
        left: 8px;
        height: 140px;
    }

    .year-item {
        font-size: 3.2rem;
    }

    .story-section {
        opacity: 1 !important; /* Ensure visibility */
        transform: none !important;
        text-align: center;
        border-left: 3px solid var(--primary-blue);
        padding: 20px !important;
        background: #f9f9f9;
        border-radius: 0 10px 10px 0;
    }

    .story-section h4 {
        font-size: 1.5rem !important; /* Year number */
        margin-bottom: 5px;
    }

    /* 6. Elite Vision/Mission Section */
   .elite-vm-section {
        padding: 40px 15px !important;
        overflow: hidden !important; /* Prevents any remaining horizontal scroll */
    }

    .vm-wrapper {
        width: 100% !important;
        display: flex;
        flex-direction: column !important; /* Forces vertical stack */
        gap: 50px !important; /* Space between Vision block and Mission block */
    }

    /* 2. Reset the Feature Containers */
    .vm-feature {
        flex-direction: column !important; /* Stack image on top of text */
        width: 100% !important;
        margin-bottom: 0 !important;
    }

    .mission-feature {
        flex-direction: column !important; /* Standardize Mission order for mobile */
    }

    /* 3. Image Box Fixes */
    .vm-image-box {
        width: 100% !important;
        height: 250px !important; /* Fixed height for consistent look */
        margin-left: 0 !important;
        margin-right: 0 !important;
        flex: none !important;
        z-index: 1 !important;
    }

    /* 4. Text Box Fixes (The most important part) */
    .vm-text-box {
        width: 100% !important;
        margin-left: 0 !important; /* REMOVE DESKTOP OVERLAP */
        margin-right: 0 !important; /* REMOVE DESKTOP OVERLAP */
        margin-top: -30px !important; /* Create a small, controlled overlap on top of the image */
        padding: 30px 20px !important;
        position: relative !important;
        z-index: 10 !important; /* Keeps text above image */
        background: #ffffff !important;
        box-shadow: 0 10px 30px rgba(0,0,0,0.1) !important;
        text-align: center !important;
        border-top: none !important;
        border-bottom: 5px solid #5189c1 !important; /* Accent line at bottom for mobile */
    }

    .mission-feature .vm-text-box {
        margin-right: 0 !important;
        margin-top: -30px !important;
    }

    /* 5. Typography Scaling */
    .vm-text-box h2 {
        font-size: 2.2rem !important; /* Scaled down from 3.5rem */
        margin-bottom: 15px !important;
    }

    .vm-decorative-line {
        margin: 0 auto 20px !important; /* Centers the blue line */
    }

    .vm-text-box p {
        font-size: 1rem !important;
        line-height: 1.6 !important;
        padding: 0 5px !important;
    }
}

@media (max-width: 468px) {
  /* 1. Force the container into a single centered column */
  .footer-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    padding: 40px 20px !important;
    gap: 35px !important; /* Space between sections */
  }

  /* 2. Fix individual columns to take full width */
  .footer-col {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* 3. Center the logo and description */
  .footer-logo {
    margin: 0 auto 15px !important;
    height: 70px !important; /* Scale down slightly */
  }

  .footer-desc {
    font-size: 14px;
    line-height: 1.6;
    padding: 0 10px;
    margin-bottom: 0;
  }

  /* 4. Center list items and icons */
  .footer-col ul {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
  }

  .contact-list li {
    justify-content: center !important; /* Centers icons with text */
    text-align: center;
    width: 100%;
  }

  .social-links {
    justify-content: center !important;
    margin-top: 20px;
  }

  /* 5. Fix the bottom legal bar */
  .footer-bottom {
    padding: 20px 10px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }

  .footer-legal {
    display: block; /* Force CIN and GST to wrap if needed */
    line-height: 1.8;
    margin-top: 10px;
    font-size: 11px;
  }
}

/* Compact but fully animated timeline for mobile/tablet */
@media (max-width: 992px) {
  .mahindra-timeline {
    flex-direction: column;
    min-height: auto;
    padding: 32px 12px;
  }

  .timeline-left,
  .timeline-right {
    width: 100%;
    flex: none;
  }

  .timeline-left {
    display: flex !important;
    position: sticky;
    top: 70px;
    height: 280px;
    justify-content: center;
    padding-right: 0;
    margin-bottom: 18px;
    background: var(--bg-color);
    z-index: 6;
  }

  .ruler-container {
    left: 12px;
    height: 150px;
  }

  .year-scroller {
    height: 280px;
  }

  .year-list {
    padding-top: calc(50% - 125px);
    padding-bottom: 140px;
  }

  .focus-lens {
    width: 180px;
    height: 180px;
  }

  .progress-ring {
    width: 180px;
    height: 180px;
  }

  .year-item {
    font-size: 4rem;
  }

  .timeline-right {
    padding: 0 8px;
  }

  .story-section {
    min-height: 70vh;
    text-align: center;
    border-left: 3px solid var(--primary-blue);
    padding: 20px;
    background: #f9f9f9;
    border-radius: 0 10px 10px 0;
  }

  .story-section p {
    max-width: 100%;
  }
}

.timeline-mobile-footer {
  display: none;
}

/* Mobile timeline mirrors the current Tech Mahindra milestone pattern. */
@media (max-width: 992px) {
  .mahindra-timeline.is-mobile-timeline {
    min-height: auto !important;
    padding: 50px 0 !important;
    overflow: hidden;
  }

  .mahindra-timeline.is-mobile-timeline .timeline-header {
    position: static;
    margin-bottom: 0;
    padding: 0 15px 12px;
  }

  .mahindra-timeline.is-mobile-timeline .main-title {
    padding-top: 0;
    font-size: 2.2rem;
  }

  .mahindra-timeline.is-mobile-timeline .timeline-left,
  .mahindra-timeline.is-mobile-timeline .timeline-right,
  .mahindra-timeline.is-mobile-timeline .timeline-mobile-footer {
    width: 100%;
    flex: none;
  }

  .mahindra-timeline.is-mobile-timeline .timeline-left {
    position: relative !important;
    top: auto !important;
    height: auto !important;
    display: block !important;
    padding: 0 !important;
    margin-bottom: 0;
    background: transparent !important;
    overflow: visible;
  }

  .mahindra-timeline.is-mobile-timeline .ruler-container {
    display: none !important;
  }

  .mahindra-timeline.is-mobile-timeline .year-scroller {
    position: relative;
    height: 290px !important;
    width: 100%;
    overflow: visible;
  }

  .mahindra-timeline.is-mobile-timeline .focus-lens {
    display: block !important;
    width: 250px;
    height: 250px;
    top: 60px;
    left: 50%;
    transform: translate(-50%, -10%) scale(0.8);
    z-index: 0;
    pointer-events: none;
  }

  .mahindra-timeline.is-mobile-timeline .progress-ring {
    width: 250px;
    height: 250px;
  }

  .mahindra-timeline.is-mobile-timeline .year-list {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 200px;
    padding-top: 30px;
    padding-bottom: 0;
    padding-left: 0;
    margin: 0;
    transition: none;
    will-change: auto;
    transform: none !important;
  }

  .mahindra-timeline.is-mobile-timeline .year-item {
    position: absolute;
    top: 30px;
    left: 50%;
    z-index: 1;
    width: auto;
    min-width: 0;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 94px !important;
    line-height: 200px;
    font-weight: 500;
    color: #e5dfd3;
    text-align: center;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) scale(0.88) !important;
    transition: color 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
  }

  .mahindra-timeline.is-mobile-timeline .year-item::after {
    content: none;
  }

  .mahindra-timeline.is-mobile-timeline .year-item.is-prev,
  .mahindra-timeline.is-mobile-timeline .year-item.is-next {
    opacity: 0.28;
    pointer-events: auto;
  }

  .mahindra-timeline.is-mobile-timeline .year-item.is-prev {
    transform: translateX(-145%) scale(0.82) !important;
  }

  .mahindra-timeline.is-mobile-timeline .year-item.is-next {
    transform: translateX(45%) scale(0.82) !important;
  }

  .mahindra-timeline.is-mobile-timeline .year-item.active {
    z-index: 2;
    opacity: 1;
    pointer-events: auto;
    color: var(--primary-red);
    letter-spacing: 0;
    transform: translateX(-50%) scale(1) !important;
  }

  .mahindra-timeline.is-mobile-timeline .timeline-right {
    display: block !important;
    width: 100%;
    overflow: hidden;
    padding: 50px 0 0 !important;
    touch-action: pan-y;
  }

  .mahindra-timeline.is-mobile-timeline .timeline-mobile-track {
    display: flex;
    align-items: stretch;
    width: 100%;
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
  }

  .mahindra-timeline.is-mobile-timeline .story-section {
    display: flex;
    flex: 0 0 100%;
    width: 100%;
    min-height: auto !important;
    box-sizing: border-box;
    margin: 0 !important;
    padding: 0 15px !important;
    flex-direction: column;
    justify-content: flex-start;
    text-align: left !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .mahindra-timeline.is-mobile-timeline .story-section.active {
    animation: timelineMobileReveal 0.35s ease;
  }

  .mahindra-timeline.is-mobile-timeline .story-section h4 {
    color: gray;
    font-size: 12px !important;
    line-height: 19px;
    font-weight: 600;
    letter-spacing: 0.08em;
    margin-bottom: 12px;
  }

  .mahindra-timeline.is-mobile-timeline .story-section h2 {
    color: #000000;
    font-size: 1.1rem;
    line-height: 1.45;
    font-weight: 500;
    margin-bottom: 10px;
    max-width: 100%;
  }

  .mahindra-timeline.is-mobile-timeline .story-section p {
    max-width: 100%;
    font-size: 14px;
    line-height: 21px;
    padding: 0;
    border: none;
  }

  .mahindra-timeline.is-mobile-timeline .timeline-mobile-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding-top: 36px;
  }

  .mahindra-timeline.is-mobile-timeline .timeline-mobile-pager {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 10px;
    min-height: 30px;
    margin-bottom: 28px;
  }

  .mahindra-timeline.is-mobile-timeline .timeline-mobile-dot {
    width: 2px;
    height: 10px;
    border: none;
    padding: 0;
    background: #2c2c2c;
    cursor: pointer;
    transition: height 0.3s ease, margin-top 0.3s ease, background 0.3s ease;
  }

  .mahindra-timeline.is-mobile-timeline .timeline-mobile-dot.active {
    height: 30px;
    margin-top: -10px;
    background: var(--primary-red);
  }

  .mahindra-timeline.is-mobile-timeline .timeline-mobile-continue {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
    padding: 0;
    background: transparent;
    color: #000000;
    font-size: 14px;
    line-height: 21px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    cursor: pointer;
  }

  .mahindra-timeline.is-mobile-timeline .timeline-mobile-continue i {
    font-size: 1rem;
  }
}

@media (max-width: 767.95px) {
  .mahindra-timeline.is-mobile-timeline .year-scroller {
    height: 290px !important;
  }

  .mahindra-timeline.is-mobile-timeline .focus-lens {
    width: 250px;
    height: 250px;
  }

  .mahindra-timeline.is-mobile-timeline .progress-ring {
    width: 250px;
    height: 250px;
  }

  .mahindra-timeline.is-mobile-timeline .year-item {
    font-size: 94px !important;
  }
}

@keyframes timelineMobileReveal {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

:root {
  --lm-top-bar-height: 37px;
  --lm-navbar-height: 90px;
  --lm-fixed-header-height: calc(var(--lm-top-bar-height) + var(--lm-navbar-height));
}

html {
  scroll-padding-top: calc(var(--lm-fixed-header-height) + 12px);
}

header {
  padding-top: var(--lm-fixed-header-height);
}

.top-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--lm-top-bar-height);
  padding: 0;
  display: flex;
  align-items: center;
  z-index: 1002;
}

.top-bar .container {
  height: 100%;
  align-items: center;
}

.navbar {
  position: fixed;
  top: var(--lm-top-bar-height);
  left: 0;
  width: 100%;
  height: var(--lm-navbar-height);
  z-index: 1001;
}

@media (max-width: 992px) {
  :root {
    --lm-top-bar-height: 0px;
    --lm-navbar-height: 90px;
    --lm-fixed-header-height: var(--lm-navbar-height);
  }

  .top-bar {
    display: none;
  }

  .navbar {
    top: 0;
  }
}

@media (max-width: 468px) {
  :root {
    --lm-navbar-height: 70px;
    --lm-fixed-header-height: var(--lm-navbar-height);
  }

  .navbar {
    top: 0 !important;
  }
}