/* ========================================================= */
 /* --- NAV BAR, LINKS, ICONS, & DROPDOWNS --- */
 /* ========================================================= */
 body {
     font-family: 'Manrope', sans-serif;
     font-weight: 400;
 }

 .navbar-brand img {
     height: 80px;
     margin-left: 60px;
     animation: logoJiggle 0.5s ease-in-out 0.5s 1 forwards;
 }

 .nav-link {
     color: black !important;
     margin-right: 15px;
     font-weight: 500;
     opacity: 0;
     animation: navSlideDown 0.5s ease-out forwards;
 }

 /* Nav link staggered delays */
 .nav-link:nth-child(1) {
     animation-delay: 0.8s;
 }

 .nav-link:nth-child(2) {
     animation-delay: 0.9s;
 }

 .nav-link:nth-child(3) {
     animation-delay: 1.0s;
 }

 .nav-link:nth-child(4) {
     animation-delay: 1.1s;
 }

 .nav-link:nth-child(5) {
     animation-delay: 1.2s;
 }

 .nav-link:nth-child(6) {
     animation-delay: 1.3s;
 }

 .nav-link:nth-child(7) {
     animation-delay: 1.4s;
 }

 .nav-link:hover {
     color: #0056b3 !important;
 }

 /* Icon Buttons (Search, Translate) */
 .icon-btn {
     background: none;
     border: none;
     margin-left: 10px;
     font-size: 1.2rem;
     color: black;
     cursor: pointer;
     transition: transform 0.2s ease-in-out;
 }

 .icon-btn:hover {
     transform: scale(1.1);
 }

 .icon-btn:hover i {
     color: #0056b3;
 }

 .navbar .icon-btn i {
     color: #000;
 }

 .navbar .icon-btn:hover i {
     color: #0d6efd;
 }

 /* Anchor container */
 .translate-wrapper {
     position: relative;
 }

 /* Google Translate Widget */
 #google_translate_element {
     position: absolute;
     top: 45px;
     /* appears just below button */
     right: 0;
     z-index: 9999;
     background-color: #fff;
     padding: 6px 8px;
     border-radius: 6px;
     box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
     max-height: 300px;
     overflow-y: auto;
     overflow-x: hidden;
     display: none;
 }

 /* Hide Google junk UI */
 .goog-logo-link,
 .goog-te-gadget span,
 .goog-te-spinner-pos {
     display: none !important;
 }

 .goog-te-banner-frame.skiptranslate {
     display: none !important;
 }

 body {
     top: 0 !important;
 }


 /* --- Dropdown Fixes & Mega-Menu Specific Styles --- */
 .nav-item.dropdown-hover {
     position: relative;
 }

 .dropdown-menu {
     position: absolute;
     top: 100%;
     left: 0;
     z-index: 1000;
     background-color: white;
     border: 1px solid #ccc;
     border-radius: 8px;
     box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
     text-align: center;
 }

 /* Animation Keyframes (Nav links) */
 @keyframes navSlideDown {
     0% {
         opacity: 0;
         transform: translateY(-20px);
     }

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

 /* Staggered animation delays (Re-declared for completeness) */
 .nav-link:nth-child(1) {
     animation-delay: 0.1s;
 }

 .nav-link:nth-child(2) {
     animation-delay: 0.2s;
 }

 .nav-link:nth-child(3) {
     animation-delay: 0.3s;
 }

 .nav-link:nth-child(4) {
     animation-delay: 0.4s;
 }

 .nav-link:nth-child(5) {
     animation-delay: 0.5s;
 }

 .nav-link:nth-child(6) {
     animation-delay: 0.6s;
 }

 .nav-link:nth-child(7) {
     animation-delay: 0.7s;
 }

 /* Re-declared .nav-link styles */
 .nav-link {
     color: black !important;
     margin-right: 15px;
     font-weight: 400;
     opacity: 1;
     /* make visible */

     font-family: 'Manrope', sans-serif;
     font-weight: 400;

     font-size: 1rem;
     transition: color 0.3s ease;
 }

 .nav-link:hover {
     color: #0056b3 !important;
 }

 /* Small Desktop Adjustments (992px to 1200px) */
 @media (min-width: 992px) and (max-width: 1200px) {
     .navbar-brand img {
         margin-left: 20px;
         height: 45px;
     }

     .nav-link {
         margin-right: 10px;
         font-size: 0.95rem;
     }

     .icon-btn {
         margin-left: 5px;
         font-size: 1.1rem;
     }

     /* 燥 ADJUSTMENT: Reduced minimum width for a more compact look on smaller desktops */
     .dropdown-menu {
         min-width: 350px;
         max-width: 70vw;
         /* Added a max width to be responsive */
         min-height: 300px;
     }
 }

 /* Desktop Hover Functionality (min-width: 992px) */
 @media (min-width: 992px) {
     .dropdown-hover:hover>.dropdown-menu {
         display: block;
     }

     .nav-item.dropdown-hover>.dropdown-menu:not(.show) {
         display: none;
     }

     /* 燥 ADJUSTMENT: Reduced minimum width and added a maximum width */
     .dropdown-menu {
         min-width: 500px;
         /* More compact width for standard desktops */
         max-width: 650px;
         /* Prevent it from getting too wide on huge screens */
         min-height: 350px;
         padding: 20px 0;
         left: 50%;
         transform: translateX(-50%);
     }

     .dropdown-menu .row .dropdown-section:not(:first-child) {
         border-left: 1px solid #eee;
     }

     .dropdown-menu-custom-3 {
         min-width: 450px;
         padding: 20px;
         left: unset;
         transform: unset;
     }

     /* ... (rest of the desktop styles remain the same) ... */
     /*
   ... (The rest of the styles in this block continue below this point) ...
   */
 }


 /* ========================================================= */
 /* --- SCROLL BUTTON STYLES --- */
 /* ========================================================= */

 #scroll-toggle-btn {
     /* Base styles for all screens */
     position: fixed;
     z-index: 1000;
     border: none;
     border-radius: 50%;
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
     color: rgb(19, 17, 17);
     transition: all 0.3s ease-in-out;
     display: flex;
     justify-content: center;
     align-items: center;


     /* Controlled by JS, but set as default */
     opacity: 0;
     visibility: hidden;
 }

 #scroll-toggle-btn:hover {
     background-color: #7e99d3;
     transform: scale(1.1);
 }





 /* ========================================================= */
 /* --- FOOTER STYLES --- */
 /* ========================================================= */

 :root {
     --footer-bg: #000000;
     --text-light: #ffffff;
 }

 .site-footer {
     background-color: var(--footer-bg);
     color: var(--text-light);

     font-family: 'Manrope', sans-serif;
     font-weight: 400;

     line-height: 1.5;

 }

 .site-footer a {
     color: var(--text-light);
     text-decoration: none;
     transition: color 0.2s ease;
     font-size: 0.9rem;
 }

 /* Custom Padding Classes for Edge-to-Edge Layout */
 .logo-padding-left {
     padding-left: 7rem;
 }

 .footer-padding-right {
     padding-right: 7rem;
 }

 /* Headings Style */
 .footer-heading {
     font-size: 1rem;
     font-weight: bold;
     letter-spacing: 1.5px;
     margin-bottom: 0.5rem;
 }

 /* TIGHT LIST ITEM SPACING */
 .list-unstyled li {
     margin-bottom: 0.2rem;
     padding: 0;
 }

 .contact-list {
     margin-bottom: 0.5rem;
 }

 /* Column 1: Logo Elements */
 .logo-circle {
     width: 30px;
     height: 30px;
     background-color: var(--text-light);
     border-radius: 50%;
     margin-right: 8px;
 }

 .logo-line {
     width: 2px;
     height: 30px;
     background-color: var(--text-light);
 }

 .mission-text {
     color: var(--text-light);
     font-size: 0.9rem;
     line-height: 1.5;
     margin-top: -10px;
     text-align: left;
 }

 /* Button Style */
 .book-meeting-btn {
     color: var(--text-light);
     border-color: var(--text-light);
     background-color: transparent;
     padding: 8px 15px;
     font-size: 0.8rem;
     letter-spacing: 1px;
     border-width: 1px;
     margin-top: 0.5rem;
     transition: background-color 0.3s, color 0.3s;
 }

 .book-meeting-btn:hover {
     color: var(--footer-bg);
     background-color:gray
 }

 /* Footer Submenu Toggle Styles */
 .footer-link-toggle {
     font-weight: 600;
     cursor: pointer;
     display: block;
 }

 .footer-submenu {
     margin-left: 15px;
     margin-top: 5px;
     list-style: none;
     padding-left: 0;
 }

 .footer-submenu a {
     font-size: 0.95rem;
     text-decoration: none;
 }


 /* ========================================================= */
 /* --- RESPONSIVE STYLES (NAVBAR, FOOTER, SCROLL) --- */
 /* ========================================================= */

 /* Small Desktop Adjustments (992px to 1200px) */
 @media (min-width: 992px) and (max-width: 1200px) {
     .navbar-brand img {
         margin-left: 20px;
         height: 45px;
     }

     .nav-link {
         margin-right: 10px;
         font-size: 0.95rem;
     }

     .icon-btn {
         margin-left: 5px;
         font-size: 1.1rem;
     }

     .dropdown-menu {
         min-width: 600px;
         min-height: 300px;
     }
 }

 /* Desktop Hover Functionality (min-width: 992px) */
 @media (min-width: 992px) {
     .dropdown-hover:hover>.dropdown-menu {
         display: block;
     }

     .nav-item.dropdown-hover>.dropdown-menu:not(.show) {
         display: none;
     }

     .dropdown-menu {
         min-width: 750px;
         min-height: 350px;
         padding: 20px 0;
         left: 50%;
         transform: translateX(-50%);
     }

     .dropdown-menu .row .dropdown-section:not(:first-child) {
         border-left: 1px solid #eee;
     }

     .dropdown-menu-custom-3 {
         min-width: 450px;
         padding: 20px;
         left: unset;
         transform: unset;
     }

     .dropdown-menu.about-us-menu {
         min-width: 420px;
     }

     .dropdown-menu-custom-3 {
         background-color: white;
         border-radius: 12px;
         border: 1px solid #cce0ff;
         box-shadow: 0 6px 25px rgba(0, 0, 0, 0.15);
         padding: 25px;
         min-width: 450px;
         transition: all 0.3s ease-in-out;
     }

     .dropdown-hover:hover .dropdown-menu-custom-3 {
         transform: translateY(5px);
         opacity: 1;
     }

     .dropdown-menu-custom-3 .dropdown-section {
         padding: 10px 20px;
         text-align: left;
     }

     .dropdown-menu-custom-3 h6 {
         font-size: 1.1rem;
         font-weight: 700;
         color: #000;
         text-transform: capitalize;
         margin-bottom: 10px;
         position: relative;
     }

     .dropdown-menu-custom-3 h6::after {
         content: "";
         display: block;
         width: 40px;
         height: 3px;
         background: #000;
         margin-top: 6px;
         border-radius: 2px;
     }

     .dropdown-menu-custom-3 a {
         display: inline-block;
         color: #000;
         font-weight: 500;
         text-decoration: none;
         font-size: 0.95rem;
         transition: all 0.3s ease-in-out;
     }

     .dropdown-menu-custom-3 a:hover {
         color: #0056b3;
         transform: translateX(3px);
     }

     .dropdown-menu-custom-3 p {
         color: #222;
         font-size: 0.9rem;
         line-height: 1.4;
         margin: 0;
     }

     .dropdown-menu .dropdown-section {
         padding: 0 35px;
         text-align: center;
     }

     .dropdown-menu h6 {
         font-weight: bold;
         margin-bottom: 8px;
         text-transform: capitalize;
         font-size: 1.1rem;
         color: #333;
     }

     .dropdown-menu ul {
         list-style: none;
         padding: 0;
         margin-bottom: 0;
     }

     .dropdown-menu ul li {
         margin-bottom: 2px;
     }

     .dropdown-menu ul li a {
         text-decoration: none;
         color: #333;
         font-size: 0.9rem;
         display: block;
         padding: 2px 0;
         line-height: 1.2;
         text-transform: capitalize;
         transition: all 0.3s ease;
     }

     .dropdown-menu ul li a:hover {
         color: #0056b3;
         background-color: #f8f9fa;
         text-decoration: none;
     }

     .dropdown-menu-custom-3 a {
         color: #000;
         text-decoration: none;
         transition: color 0.3s ease, transform 0.3s ease;
     }

     .dropdown-menu-custom-3 a:hover {
         color: #0056b3;
         transform: translateX(3px);
     }
 }


 /* Mobile Styling (max-width: 991.98px) - Navbar & Menu */
 @media (max-width: 991.98px) {

     /* Navbar */
     .navbar-brand img {
         margin-left: 10px;
         height: 40px;
     }

     #google_translate_element {
         top: 60px;
         right: 10px;
     }

     .icon-btn {
         display: inline-block;
         margin: 5px 15px 5px 0;
         font-size: 1.3rem;
     }

     /* Collapse Fix */
     .navbar-collapse:not(.show) {
         display: none !important;
     }

     .navbar-collapse.show {
         display: block !important;
         position: absolute;
         top: 100%;
         left: 0;
         width: 100%;
         background-color: white;
         z-index: 999;
         box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
         padding-bottom: 10px;
     }

     /* Nav Links */
     .nav-link {
         opacity: 1 !important;
         transform: none !important;
         animation: none !important;
         padding-left: 20px;
     }

     .navbar-nav {
         margin-top: 5px;
     }

     /* Dropdown/Menu */
     .dropdown-menu {
         position: static !important;
         border: none !important;
         box-shadow: none !important;
         padding: 0 10px 10px 25px !important;
         min-width: auto !important;
         transform: none !important;
         display: none;
     }

     .dropdown-menu.show {
         display: block !important;
     }

     .dropdown-menu .row .dropdown-section:not(:first-child) {
         border-left: none;
         margin-top: 15px;
     }

     .dropdown-menu .dropdown-section {
         padding: 0 10px;
         width: 100%;
         text-align: left;
     }

     .dropdown-menu .row,
     .dropdown-menu-custom-3 .row {
         display: block;
     }

     .dropdown-menu-custom-3 {
         min-width: auto;
         padding: 0;
         border: none;
         box-shadow: none;
         background: #ffffff;
     }

     .dropdown-menu-custom-3 .dropdown-section {
         padding: 8px 0;
     }

     .dropdown-menu a,
     .dropdown-menu-custom-3 a {
         padding: 5px 0;
     }
 }

 /* Footer Responsive Refinements */
 @media (max-width: 768px) {

     .logo-padding-left,
     .footer-padding-right {
         padding-left: 1rem;
         padding-right: 1rem;
     }

     .site-footer .row>div {
         margin-bottom: 30px;
     }
 }

 @media (min-width: 769px) and (max-width: 991px) {
     .site-footer .row>div {
         margin-bottom: 25px;
     }
 }

 /* Scroll Button Responsive Styles */
 @media (min-width: 577px) {
     #scroll-toggle-btn {
         bottom: 30px;
         right: 30px;
         width: 50px;
         height: 50px;
         font-size: 1.2rem;
         background-color: hsl(180, 9%, 98%);
     }
 }

 @media (max-width: 576px) {
     #scroll-toggle-btn {
         bottom: 20px;
         right: 20px;
         width: 40px;
         height: 40px;
         font-size: 1rem;
         background-color: hsl(180, 9%, 98%);
         color: #000;
     }
 }


 .icon-btn {
     background: none;
     border: none;
     font-size: 1.2rem;
     margin-left: 12px;
     cursor: pointer;
     color: #333;
     transition: color 0.3s ease, transform 0.2s ease;
 }

 .icon-btn:hover {
     color: #007bff;
     transform: scale(1.1);
 }

 .dropdown-hover:hover>.dropdown-menu {
     display: block;
     margin-top: 0;
 }

 .dropdown-menu {
     border-radius: 10px;
     border: none;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
 }

 .navbar .nav-link {
     font-weight: 500;
     color: #222 !important;
     padding: 10px 15px;
     transition: color 0.3s;
 }

 .navbar .nav-link:hover {
     color: #007bff !important;
 }

 /* Gallery dropdown links */
 .dropdown-menu a {
     text-decoration: none;
     color: #000 !important;
     transition: color 0.3s ease;
 }

 /* Optional hover effect */
 .dropdown-menu a:hover {
     color: #007bff !important;
     text-decoration: none;
 }


 /* --- Footer Height Adjustment --- */
 .site-footer {
     padding-top: 80px;
     padding-bottom: 80px;
     min-height: 350px;
     /* optional */
 }

 .site-footer .row>div {
     padding-top: 20px;
     padding-bottom: 20px;
 }

 /* Mobile submenu hidden by default */
 @media (max-width: 991.98px) {
     .dropdown-hover .dropdown-menu {
         display: none !important;
     }

     /* Show submenu when JS toggles 'show' class */
     .dropdown-hover .dropdown-menu.show {
         display: block !important;
     }
 }

 /* nav bar gallery dropdown */
 /* Small Desktop Adjustments (992px to 1200px) */
 @media (min-width: 992px) and (max-width: 1200px) {
     .navbar-brand img {
         margin-left: 20px;
         height: 45px;
     }

     .nav-link {
         margin-right: 10px;
         font-size: 0.95rem;
     }

     .icon-btn {
         margin-left: 5px;
         font-size: 1.1rem;
     }

     /* 燥 ADJUSTMENT: Reduced minimum width for a more compact look on smaller desktops */
     .dropdown-menu {
         min-width: 350px;
         max-width: 70vw;
         /* Added a max width to be responsive */
         min-height: 300px;
     }
 }

 /* Desktop Hover Functionality (min-width: 992px) */
 @media (min-width: 992px) {
     .dropdown-hover:hover>.dropdown-menu {
         display: block;
     }

     .nav-item.dropdown-hover>.dropdown-menu:not(.show) {
         display: none;
     }

     /* 燥 ADJUSTMENT: Reduced minimum width and added a maximum width */
     .dropdown-menu {
         min-width: 500px;
         /* More compact width for standard desktops */
         max-width: 650px;
         /* Prevent it from getting too wide on huge screens */
         min-height: 150px;
         padding: 20px 0;
         left: 50%;
         transform: translateX(-50%);
     }

     .dropdown-menu .row .dropdown-section:not(:first-child) {
         border-left: 1px solid #eee;
     }

     .dropdown-menu-custom-3 {
         min-width: 450px;
         padding: 20px;
         left: unset;
         transform: unset;
     }

     /* ... (rest of the desktop styles remain the same) ... */
     /*
    ... (The rest of the styles in this block continue below this point) ...
    */
 }










 /* (Existing styles for NAV BAR, FOOTER, SCROLL BUTTON remain unchanged) */

 /* ... (Existing styles up to the Hero Section) ... */


 /* --- Hero Video Section Styles (UPDATED FOR FULL SCREEN & GSAP) --- */
 /* ========================= */
 /* GLOBAL RESET (SAFE)       */
 /* ========================= */

 html,
 body {
     margin: 0;
     padding: 0;
     width: 100%;
     overflow-x: hidden;
     /* ❗ Do NOT set height here */
 }

 /* ========================= */
 /* NAVBAR                    */
 /* ========================= */

 .navbar {
     position: fixed;
     top: 0;
     width: 100%;
     z-index: 9999;
 }

 /* ========================= */
 /* HERO VIDEO SECTION        */
 /* ========================= */

 .hero-video-container {
     position: relative;
     width: 100%;
     /* height: 600vh; */
     height: 100vh;
     /* Full screen */
     overflow: hidden;
     background: #000;
     color: #fff;
 }



 /* Mobile safe viewport */
 @supports (height: 100svh) {
     .hero-video-container {
         height: 100svh;
     }
 }

 /* ================= VIDEO ================= */
 .hero-video-container {
     position: relative;
     height: 100vh;
     overflow: hidden;
 }

 /* .hero-video {
     position: absolute;
     top: 50%;
     left: 50%;
     width: 100vw;
     height: 100vh;
     transform: translate(-50%, -50%) scale(1.25);
     pointer-events: none;
 } */

.hero-video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100vw;
    height: 56.25vw;
    min-height: 100vh;
    min-width: 177.78vh;
    transform: translate(-50%, -50%) scale(1.15);
    pointer-events: none;
    border: none;
}

 /* ================= OVERLAY ================= */

 .video-overlay {
     position: absolute;
     inset: 0;
     background: rgba(0, 0, 0, 0.4);
     z-index: 1;
     pointer-events: none;
     /* 🔥 Allow clicks */
 }

 /* ================= TEXT ================= */

 .hero-video-content {
     position: absolute;
     z-index: 2;
     max-width: 700px;
     padding: 20px;
     top: 50%;
     left: 6%;
     transform: translateY(-50%);
     text-align: left;
 }

 .hero-video-content h1 {
     font-size: clamp(2rem, 5vw, 4.5rem);
     font-weight: 700;
     line-height: 1.1;
     margin-bottom: 8px;
     text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7);
 }

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

 .hero-cta-button .cta-btn {
     border-radius: 50px;
     padding: 12px 30px;
     font-weight: 600;
     font-size: 1.1rem;
     transition: background-color 0.3s, color 0.3s;
 }

 .hero-cta-button .cta-btn:hover {
     background-color: #fff;
     color: #000 !important;
 }

 /* ================= PAGE CONTENT ================= */
 /* Important for scroll + earth animation */

 .page-content {
     position: relative;
     z-index: 2;
 }

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

 @media (max-width: 992px) {
     .hero-video-content {
         left: 5%;
         max-width: 90%;
     }
 }

 @media (max-width: 576px) {
     .hero-video-content h1 {
         font-size: 2rem;
     }
 }






 /* --- Products Section Styles (NEW MODERN CARDS) --- */
 .products-section {
     background-color: #1e1e1e;
     /* Dark background for contrast and modern feel */
     padding: 80px 0;
     color: white;
 }

 .products-section h2 {
     font-size: 3.5rem;
     font-weight: 800;
     text-align: center;
     color: white;
     margin-bottom: 10px !important;
 }

 .products-section p.lead {
     font-size: 1.25rem;
     text-align: center;
     color: #ccc;
     margin-bottom: 60px !important;
 }

 .product-card {
     /* Base for 3D effect */
     perspective: 1000px;
     border: none;
     overflow: hidden;
     position: relative;
     border-radius: 15px;
     height: 400px;
     /* Taller card for more impact */
     box-shadow: 0 10px 40px rgba(245, 245, 245, 0.4);
     transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
     /* Smoother transition */
     background-color: #000;
 }

 .product-card a {
     text-decoration: none;
     display: block;
     height: 100%;
     color: white;
     position: relative;
 }

 /* Product Image Styling */
 .product-card .product-image {
     width: 100%;
     height: 100%;
     object-fit: cover;
     position: absolute;
     top: 0;
     left: 0;
     opacity: 0.85;
     /* Slight opacity for modern look */
     filter: brightness(0.9);
     transition: transform 0.6s ease, filter 0.6s ease;
 }

 /* Content Overlay Styling */
 .product-content-overlay {
     position: absolute;
     bottom: 0;
     left: 0;
     width: 100%;
     z-index: 10;
     padding: 20px;
     /* Dark-to-transparent gradient for readability */
     background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 10%, rgba(0, 0, 0, 0.6) 50%, rgba(0, 0, 0, 0) 100%);
     transition: padding 0.5s ease;
 }

 .product-card .card-title {
     font-size: 2rem;
     font-weight: 700;
     margin-bottom: 10px;
     position: relative;
     transition: all 0.5s ease;
     color: #ffffff !important;
 }

 .product-card .card-text {
     font-size: 1rem;
     opacity: 0.8;
     max-height: 50px;
     /* Limit text height */
     overflow: hidden;
     margin-bottom: 15px;
     transition: all 0.5s ease;
     color: #ffffff !important;
     /* color: rgb(255, 255, 255); */
 }

 .product-card .view-details {
     display: inline-block;
     font-weight: 600;
     color: #00ff00;
     /* Accent color for the link */
     transition: transform 0.4s ease, color 0.4s ease;
 }

 .view-details {
     display: inline-flex;
     align-items: center;
     gap: 5px;
     font-weight: 600;
     font-size: 18px;
     text-decoration: none;
     color: #00ff00;
     transition: 0.3s ease;
     cursor: pointer;
     position: relative;
 }

 .view-details i {
     transition: 0.3s ease;
 }

 .view-details:hover {
     color: #00ff00;
     /* neon glow */
 }

 .view-details:hover i {
     transform: translateX(6px);
 }

 /* Neon underline on hover */
 .view-details::after {
     content: "";
     position: absolute;
     bottom: -4px;
     left: 0;
     width: 0;
     height: 2px;
     background: #00ff00;
     transition: 0.4s ease;
     border-radius: 2px;
 }

 .view-details:hover::after {
     width: 100%;
 }

 .view-details {
     color: #00ff00 !important;
     text-decoration: none;
     font-weight: 600;
     transition: 0.3s ease;
     cursor: pointer;
 }

 .view-details i {
     transition: 0.3s ease;
 }

 .view-details:hover {
     color: #00ff00;
     /* bright aqua glow */
 }

 .view-details:hover i {
     transform: translateX(5px);
 }


 /* --- MODERN HOVER EFFECT: 3D Lift, Image Zoom, and Glow --- */
 .product-card:hover {
     transform: translateY(-15px) rotateX(1deg);
     /* Lift and subtle 3D tilt */
     box-shadow: 0 20px 60px rgba(255, 253, 253, 0.3), 0 10px 30px rgba(0, 0, 0, 0.7);
     /* Glow shadow */
 }

 .product-card:hover .product-image {
     transform: scale(1.08);
     /* Image zoom */
     filter: brightness(1);
     /* Full brightness */
     opacity: 1;
 }

 .product-card:hover .card-title {
     /* color: white; */
     color: yellow !important;
     transform: translateX(5px);
 }

 .product-card:hover .view-details {
     transform: translateX(5px);
     color: white;
 }


 .product-card:hover .card-text {
     opacity: 1;
     /* Fade in more text */
     max-height: 100px;
 }

 .products-section h2 {
     font-size: 3.5rem;
     font-weight: 800;
     text-align: center;
     color: #2362a5c9;
     /* Heading Color: Blue */
     margin-bottom: 10px !important;
 }

 .products-section p.lead {
     font-size: 1.25rem;
     text-align: center;
     color: #000000;
     /* Subheading Color: Black (Low visibility on dark background) */
     margin-bottom: 60px !important;
 }


 /* ========================================================= */
 /* --- RESPONSIVE STYLES (Includes all Apple/Mac screens) --- */
 /* ========================================================= */

 /* Responsive adjustments for Hero Section (All screens) */
 @media (max-width: 992px) {
     .hero-video-container {
         height: 500px;
     }

     .hero-video-content {
         top: 50%;
         left: 5%;
         max-width: 90%;
         padding: 10px;
     }

     .hero-video-content h1 {
         font-size: 1.5rem;
     }

     .hero-video-content .hero-subtitle {
         font-size: 1.1rem;
     }

     .products-section {
         padding: 60px 0;
     }

     .product-card {
         height: 350px;
     }
 }

 /* Mobile adjustments (iPhone/smaller screens) */
 @media (max-width: 576px) {
     .hero-video-container {
         height: 400px;
     }

     .hero-video-content h1 {
         font-size: 2rem;
     }

     .hero-video-content .hero-subtitle {
         font-size: 1rem;
     }

     .products-section h2 {
         font-size: 2.5rem;
     }

     .product-card {
         height: 300px;
     }

     .product-card .card-title {
         font-size: 1.5rem;
     }

     .product-card .card-text {
         font-size: 0.9rem;
         max-height: 40px;
     }
 }









 /* ========================================================= */
 /* --- TRANSFORMATION MATRIX RECYCLING SECTION STYLES --- */
 /* ========================================================= */

 .transformation-matrix-section {
     padding: 80px 0;
     /* Dark, aggressive background with a linear pattern overlay */
     background-color: #1a1a1a;
     color: #ffffff;
     position: relative;
     overflow: hidden;
     /* A subtle, animated background effect using CSS gradient */
     background-image: repeating-linear-gradient(-45deg,
             rgba(255, 255, 255, 0.05) 0px,
             rgba(255, 255, 255, 0.05) 1px,
             transparent 1px,
             transparent 100px);
     animation: backgroundShift 60s linear infinite;
 }

 /* Background animation */
 @keyframes backgroundShift {
     from {
         background-position: 0 0;
     }

     to {
         background-position: 10000px 10000px;
     }
 }

 /* Large screens */
 @media (min-width: 1400px) {
     .transformation-matrix-section {
         padding: 100px 0;
     }
 }

 /* Small screens */
 @media (max-width: 576px) {
     .transformation-matrix-section {
         padding: 60px 0;
     }
 }

 /* Tagline Style */
 .transformation-matrix-section .section-tag-line {
     color: #00ff00;
     /* Neon Green */
     font-weight: 700;
     letter-spacing: 6px;
     text-transform: uppercase;
     margin-bottom: 10px;
     font-size: 1.4rem;
     text-shadow: 0 0 5px rgba(0, 255, 0, 0.5);
 }

 /* Main Heading Style */
 .transformation-matrix-section h2 {
     color: #ffffff;
     font-size: 3.8rem;
     font-weight: 900 !important;
 }

 /* --- Geometric Divider --- */
 .geometric-divider {
     text-align: center;
     margin: 40px 0;
 }

 .dot-line {
     width: 100%;
     height: 10px;
     background: repeating-linear-gradient(90deg,
             #00ff00,
             #00ff00 5px,
             transparent 5px,
             transparent 15px);
     opacity: 0.5;
 }


 /* --- Transformation Matrix Card Styling --- */
 .matrix-card {
     background: #252525;
     border: 2px solid #3a3a3a;
     border-radius: 10px;
     min-height: 280px;
     text-align: center;
     position: relative;
     overflow: hidden;
     cursor: pointer;
     transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
     box-shadow: 0 5px 30px rgba(0, 0, 0, 0.7);
 }

 /* Step Number Overlay */
 .matrix-card::before {
     content: attr(data-step);
     position: absolute;
     top: -10px;
     left: -10px;
     padding: 10px 20px;
     background: #00ff00;
     color: #1a1a1a;
     font-weight: 900;
     font-size: 1.2rem;
     clip-path: polygon(0 0, 100% 0, 100% 70%, 70% 100%, 0 100%);
     z-index: 2;
     transition: all 0.5s;
 }

 /* Card Content Area */
 .matrix-card .card-content {
     padding: 40px 25px;
     position: relative;
     z-index: 3;
 }

 /* Hover Effect: Melt & Reveal (Dramatic Background Change) */
 .matrix-card::after {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: linear-gradient(135deg, #007bff, #00ff00);
     z-index: 1;
     opacity: 0;
     transform: scale(0.5) rotate(45deg);
     /* Starts small and rotated */
     transition: all 0.7s cubic-bezier(0.68, -0.55, 0.265, 1.55);
 }

 .matrix-card:hover::after {
     opacity: 1;
     transform: scale(1) rotate(0deg);
 }

 /* Bring content to front on hover */
 .matrix-card:hover .card-content * {
     color: #1a1a1a !important;
     transition: color 0.4s;
 }

 .matrix-card:hover {
     transform: translateY(-15px) scale(1.05);
     border-color: #00ff00;
     box-shadow: 0 15px 50px rgba(0, 255, 0, 0.3);
 }

 /* Card Heading */
 .matrix-card h4 {
     color: #ffffff;
     font-size: 1.6rem;
     text-shadow: 0 0 5px rgba(255, 255, 255, 0.1);
 }

 /* Card Body Text */
 .matrix-card p {
     color: #cccccc;
     font-size: 1rem;
 }

 /* --- Icon Styling --- */
 .matrix-icon {
     display: inline-flex;
     width: 60px;
     /* Adjust size as you like */
     height: 70px;



     font-size: 2.5rem;
     color: #00ff00;
     padding: 10px;
     border-radius: 5px;
     background: rgba(0, 255, 0, 0.1);
     box-shadow: 0 0 10px rgba(0, 255, 0, 0.4);
     transition: all 0.5s ease-in-out;
 }

 .matrix-card:hover .matrix-icon {
     color: #1a1a1a;
     background: #ffffff;
     transform: rotate(360deg) scale(1.1);
     box-shadow: 0 0 15px #ffffff;
 }

 /* --- Responsive Adjustments --- */
 @media (max-width: 992px) {
     .transformation-matrix-section h2 {
         font-size: 3rem;
     }
 }

 @media (max-width: 576px) {
     .transformation-matrix-section h2 {
         font-size: 2.2rem;
     }

     .matrix-card {
         min-height: 250px;
     }
 }









 /* CSS from your provided snippet */

 /* --- KEY CHANGE 1: Set initial background to WHITE --- */
 body {

     font-family: 'Manrope', sans-serif;
     font-weight: 400;

     margin: 0;
     padding: 0;
     background-color: #fff;
     /* Initial background is WHITE */
     min-height: 800vh;
     /* Add transition for a fallback smooth background change (GSAP is better) */
     transition: background-color 0.5s ease-in-out;
     padding-bottom: -80px;
 }

 .no_letterspacing {
     letter-spacing: 0;
 }

 /* Placeholder for full-width container styling, typically a wrapper or body class */
 .inner {
     max-width: 1200px;
     margin: 0 auto;
     padding: 0 24px;
 }

 /* Hero Text Styling (Changed text color to BLACK for the initial WHITE background) */
 .esg_section .before_flow_area .main_section_tit_area {
     position: absolute;
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
     color: #000;
     /* Changed to BLACK so it's visible on the initial white background */
     z-index: 10;
     text-align: center;
 }

 /* Helper Class for Title Font/Size */
 .main_section .main_section_tit_area .category_name {
     margin-bottom: 10px;
     font-size: 16px;
 }

 .main_section .main_section_tit_area .section_title {
     font-size: 48px;
     line-height: 1.42;
 }

 .esg_section .inner {
     background-color: #000;
 }

 /* ESG */
 .esg_section {
     position: relative;
     padding: 0;
 }

 .esg_section .before_flow_area {
     position: relative;
     height: 100vh;
 }

 .esg_section .before_flow_area .bigger_bg {
     position: absolute;
     left: 50%;
     bottom: 0;
     transform: translateX(-50%);
 }

 .esg_section .before_flow_area .bigger_bg .for_size_change {
     position: absolute;
     left: 50%;
     bottom: 0;
     transform: translateX(-50%);
     margin: 0 auto;
     width: 385px;
     /* Initial width */
     height: 244px;
     /* Initial height */
     transition: width 1s ease, height 1s ease, border-radius 1s ease;
     border-radius: 14px 14px 0 0;
     overflow: hidden;
     transform-origin: center bottom;
 }

 /* JS will add the 'on' class to trigger the full-screen/zoom animation */
 .esg_section .before_flow_area .bigger_bg .for_size_change.on {
     width: 100vw;
     height: 100vh;
     border-radius: 0;
 }

 .esg_section .before_flow_area .bigger_bg .for_size_change .bg_img_area {
     position: relative;
     left: 50%;
     bottom: 0;
     transform: translateX(-50%);
     width: 100%;
     height: 100%;
     background-size: cover;
     background-position: center center;
     background-repeat: no-repeat;
     transition: background-position 1s ease;
     background-image: url('assets/images/earth01.jpeg');
 }

 .esg_section .before_flow_area .bigger_bg .for_size_change.on .bg_img_area {
     background-position: center bottom;
 }

 .esg_section .before_flow_area .bigger_bg .for_size_change .bg_dimd {
     position: absolute;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
     /* Change dim color to a dark shade for contrast */
     background-color: rgba(0, 0, 0, .6);
     opacity: 0;
     transition: opacity 1s ease;
 }

 .esg_section .before_flow_area .bigger_bg .for_size_change.on .bg_dimd {
     opacity: 1;
 }

 .esg_section .flow_list_w {
     margin-top: 100vh;

 }

 /* Desktop Flow Layout */
 .esg_section .flow_list_w .swiper-wrapper {
     display: flex;
     flex-wrap: wrap;
     flex-direction: row-reverse;
     width: 100%;
 }

 .esg_section .flow_list_w .flow_list {
     position: relative;
     display: block;
     margin-top: 160px;
     margin-left: calc(100% - 770px);
     width: 385px;
     background: transparent;
 }

 .esg_section .flow_list_w .flow_list .for_parallax {
     position: relative;
     top: 0;
 }

 .esg_section .flow_list_w .flow_list .img_area_w {
     position: relative;
     width: 100%;
     padding-top: 130%;
     border-radius: 14px;
     overflow: hidden;
 }

 .esg_section .flow_list_w .flow_list .img_area_w .img_area {
     position: absolute;
     left: 0;
     top: 0;
     width: 250%;
     height: 80%;
     background-size: cover;
     background-position: center center;
     background-repeat: no-repeat;
     transform: scale(1);
     transition: transform .4s ease;
 }

 .esg_section .flow_list_w .flow_list .txt_area {
     margin: 20px 0 0 20px;
     color: #fffdfd;
     /* Text should be white on the zoomed-in dark background */
 }

 .esg_section .flow_list_w .flow_list .txt_area .category {
     margin-bottom: 12px;
     font-size: 20px;
     line-height: 1.6;
 }

 .esg_section .flow_list_w .flow_list .txt_area .list_txt {
     font-size: 16px;
     line-height: 1.62;
 }

 /* Staggering the 'even' items (2, 4, 6) to the left column */
 .esg_section .flow_list_w .flow_list:nth-child(2n) {
     top: 160px;
     margin-left: 0;
     margin-top: 160px;
 }

 /* Staggering the 'odd' items (1, 3, 5) to the right column */
 .esg_section .flow_list_w .flow_list:nth-child(2n-1) {
     top: 0;
     margin-left: calc(100% - 770px);
     margin-top: 160px;
 }

 /* The first element needs a different starting margin to align correctly */
 .esg_section .flow_list_w .flow_list:nth-child(1) {
     margin-top: 0;
 }

 .esg_section .flow_list_w .swiper-pagination {
     display: none;
 }

 .esg_section .flow_list_w .flow_list:hover .img_area_w .img_area {
     transform: scale(1.1);
 }

 /* --- ADDED RESPONSIVENESS (TABLET) --- */
 @media screen and (min-width: 769px) and (max-width: 1200px) {

     /* Make the list item width fluid for tablets/small desktops */
     .esg_section .flow_list_w .flow_list {
         width: calc(50% - 20px);
         /* 2 columns with a gutter */
         margin-top: 80px;
     }

     /* Odd items (1, 3, 5) - Right column */
     .esg_section .flow_list_w .flow_list:nth-child(2n-1) {
         margin-left: auto;
         margin-right: 0;
         margin-top: 80px;
     }

     /* Even items (2, 4, 6) - Left column */
     .esg_section .flow_list_w .flow_list:nth-child(2n) {
         margin-left: 0;
         margin-right: auto;
         top: 80px;
         margin-top: 80px;
     }

     /* First item */
     .esg_section .flow_list_w .flow_list:nth-child(1) {
         margin-top: 0;
     }

     .esg_section .flow_list_w .swiper-wrapper {
         justify-content: space-between;
     }
 }


 /* Responsive styles remain the same but ensure text/background is visible */
 @media screen and (max-width: 768px) {

     /* 1. Reset initial hero area for mobile (disable 100vh scroll effect) */
     .esg_section .before_flow_area {
         height: auto;
     }

     /* 2. Reposition Hero Text (now static/normal flow) */
     .esg_section .before_flow_area .main_section_tit_area {
         position: relative;
         /* Change from absolute to relative */
         left: 0;
         top: 0;
         transform: none;
         padding-top: 60px;
         padding-bottom: 30px;
         color: #000;
         /* Text is black on mobile white BG */
         text-align: left;
     }

     .esg_section .flow_list_w {
         margin-top: 0;
         /* Flow list starts immediately */
     }

     /* 3. Adjust Image container for mobile (no fixed bottom position) */
     .esg_section .before_flow_area .bigger_bg {
         position: relative;
         transform: none;
         left: 0;
         width: 100%;
     }

     /* Make the initial image container full-width and fixed height */
     .esg_section .before_flow_area .bigger_bg .for_size_change {
         position: relative;
         transform: none;
         left: 0;
         width: 100%;
         height: 200px;
         /* Fixed height for mobile */
         border-radius: 0;
     }

     /* 4. Flow List container to stack items */
     .esg_section .flow_list_w .swiper-wrapper {
         flex-direction: column;
         /* Stack vertically */
         padding: 0 24px;
     }

     /* 5. Reset all desktop/staggering list positioning for single column */
     .esg_section .flow_list_w .flow_list,
     .esg_section .flow_list_w .flow_list:nth-child(2n),
     .esg_section .flow_list_w .flow_list:nth-child(2n-1),
     .esg_section .flow_list_w .flow_list:nth-child(1) {
         width: 100%;
         margin-top: 40px;
         margin-left: 0;
         top: 0;
     }

     .esg_section .flow_list_w .flow_list:first-child {
         margin-top: 0;
     }

     .esg_section .flow_list_w .flow_list .txt_area {
         color: #000;
         /* Text is dark on mobile's white background */
         margin: 20px 0 0 0;
     }

     /* When mobile switches to swiper, the main body BG remains white */
     .esg_section .before_flow_area .bigger_bg {
         background-color: #fff;
         /* Ensure mobile BG is white */
     }

     body {
         background-color: #fff !important;
     }
 }

 /* --- OVERRIDES FROM YOUR ORIGINAL SNIPPET (No changes made) --- */

 .esg_section .inner {
     background-color: #000 !important;
 }

 .esg_section .flow_list_w {
     margin-top: 0 !important;
 }

 .main_section.esg_section,
 .before_flow_area,
 .main_section_tit_area {
     background: #fff !important;
 }

 .bigger_bg {
     background: #000;
 }

 .swiper_black_bg {
     background: #000;
     width: 100vw;
     position: relative;
     left: 50%;
     right: 50%;
     margin-left: -50vw;
     margin-right: -50vw;
     padding: 40px 0;
     /* optional spacing */
 }



 * {
     box-sizing: border-box;
 }



 /* ============================
   🔵 EXTRA RESPONSIVE SUPPORT
   (Only Added – No Changes Done)
================================*/

 /* 🖥️ Extra Large Screens (1600px+) */
 @media screen and (min-width: 1600px) {
     .inner {
         max-width: 1440px;
     }

     .esg_section .before_flow_area .main_section_tit_area .section_title {
         font-size: 56px;
     }

     .esg_section .before_flow_area .bigger_bg .for_size_change {
         width: 500px;
         height: 300px;
     }
 }

 /* 💻 Normal Desktop (1201px–1599px) */
 @media screen and (min-width: 1201px) and (max-width: 1599px) {
     .esg_section .before_flow_area .main_section_tit_area .section_title {
         font-size: 50px;
     }

     .esg_section .flow_list_w .flow_list {
         margin-left: calc(100% - 700px);
     }
 }

 /* 📱 Landscape Tablets (769px–1024px) – Extra refinement */
 @media screen and (min-width: 769px) and (max-width: 1024px) {
     .esg_section .before_flow_area .main_section_tit_area .section_title {
         font-size: 42px;
     }

     .esg_section .flow_list_w .flow_list .txt_area .category {
         font-size: 18px;
     }

     .esg_section .flow_list_w .flow_list .txt_area .list_txt {
         font-size: 14px;
     }
 }

 /* 📱 Small Mobile Screens (375px–480px) */
 @media screen and (max-width: 480px) {
     .esg_section .before_flow_area .main_section_tit_area {
         padding-top: 40px;
         padding-bottom: 20px;
         text-align: center;
         /* better for small screens */
     }

     .esg_section .before_flow_area .main_section_tit_area .section_title {
         font-size: 30px;
         line-height: 1.3;
     }

     .esg_section .before_flow_area .main_section_tit_area .category_name {
         font-size: 14px;
     }

     .esg_section .before_flow_area .bigger_bg .for_size_change {
         height: 160px;
         /* smaller image */
     }

     .esg_section .flow_list_w .flow_list .txt_area .category {
         font-size: 16px;
     }

     .esg_section .flow_list_w .flow_list .txt_area .list_txt {
         font-size: 14px;
     }

     .esg_section .flow_list_w .swiper-wrapper {
         padding: 0 10px;
     }
 }

 /* 📱 Very Small Devices (Under 360px) */
 @media screen and (max-width: 360px) {
     .esg_section .before_flow_area .main_section_tit_area .section_title {
         font-size: 26px;
     }

     .esg_section .before_flow_area .bigger_bg .for_size_change {
         height: 140px;
     }

     .esg_section .flow_list_w .flow_list .txt_area .category {
         font-size: 14px;
     }

     .esg_section .flow_list_w .flow_list .txt_area .list_txt {
         font-size: 12px;
     }
 }

 /* ============================
   📌 RESPONSIVE SWIPER SUPPORT
   (Paste at end of CSS)
================================*/

 /* 📱 Swiper Styling for Mobile (Under 768px) */
 @media screen and (max-width: 768px) {

     /* Swiper container full width */
     .swiper_black_bg,
     .esg_section .flow_list_w {
         width: 100vw !important;
         margin-left: -50vw;
         left: 50%;
         padding: 30px 0;
     }

     /* Swiper Slide Width */
     .esg_section .flow_list_w .flow_list {
         width: 85vw !important;
         margin: 0 auto 30px auto !important;
         display: block;
     }

     /* Fixed aspect ratio for image blocks */
     .esg_section .flow_list_w .flow_list .img_area_w {
         padding-top: 140%;
     }

     /* Smaller text inside slide */
     .esg_section .flow_list_w .flow_list .txt_area {
         padding: 10px 0;
     }

     .esg_section .flow_list_w .flow_list .txt_area .category {
         font-size: 16px;
     }

     .esg_section .flow_list_w .flow_list .txt_area .list_txt {
         font-size: 14px;
     }

     /* Swiper Pagination Dots */
     .esg_section .flow_list_w .swiper-pagination {
         display: block !important;
         bottom: 10px;
     }

     .swiper-pagination-bullet {
         width: 8px;
         height: 8px;
         background: #fff !important;
         opacity: 0.6;
     }

     .swiper-pagination-bullet-active {
         background: #00ffcc !important;
         opacity: 1;
     }
 }

 /* 📲 Very Small Phones (Under 380px) */
 @media screen and (max-width: 380px) {
     .esg_section .flow_list_w .flow_list {
         width: 90vw !important;
     }

     .esg_section .flow_list_w .flow_list .txt_area .category {
         font-size: 15px;
     }

     .esg_section .flow_list_w .flow_list .txt_area .list_txt {
         font-size: 13px;
     }

     .swiper-pagination-bullet {
         width: 6px;
         height: 6px;
     }
 }


 a {
     text-decoration: none !important;
     color: inherit !important;
 }

















 /* --- Strategic Planning Section --- */

 .strategic-planning-section {
     position: relative;
     overflow: hidden;
     min-height: 800px;
     display: flex;
     align-items: center;
     padding: 50px 20px;
 }

 /* ------------------------- */
 /* Content Column (Left) */
 /* ------------------------- */
 .content-column {
     flex: 1;
     z-index: 10;
     padding-right: 40px;
 }

 /* Strategic List Styling */
 .strategic-list {
     padding-top: 30px;
 }

 .strategic-item {
     display: flex;
     align-items: flex-start;
     margin-bottom: 30px;
     padding-bottom: 20px;
     border-bottom: 1px solid #eee;
 }

 .strategic-item:last-child {
     margin-bottom: 0;
     padding-bottom: 0;
     border-bottom: none;
 }

 .icon-box {
     font-size: 2rem;
     padding: 15px;
     margin-right: 20px;
     border: 2px solid #ddd;
     border-radius: 8px;
     color: #007bff;
     line-height: 1;
     min-width: 60px;
     display: flex;
     justify-content: center;
     align-items: center;
     background-color: #f7f7f7;
 }

 .strategic-item:nth-child(1) .icon-box {
     border-color: #007bff;
     color: #007bff;
 }

 .strategic-item:nth-child(2) .icon-box {
     border-color: #6c757d;
     color: #6c757d;
 }

 .strategic-item:nth-child(3) .icon-box {
     border-color: #17a2b8;
     color: #17a2b8;
 }

 .text-content {
     flex-grow: 1;
 }

 .text-content p {
     color: #555;
     margin-bottom: 0;
 }

 /* ------------------------- */
 /* Image Column (Right) */
 /* ------------------------- */
 .image-column {
     flex: 1;
     min-height: 750px;
     position: relative;
 }

 /* Angled Visual Container */
 .angled-visual-container {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     width: 100%;
     height: 100%;
 }

 /* Angled Shapes */
 .angled-shape {
     position: absolute;
     width: 300px;
     height: 300px;
     background-size: cover;
     background-position: center;
     clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
     border: 5px solid white;
     filter: grayscale(100%);
     opacity: 0.8;
     cursor: pointer;
     transition: transform 0.4s ease, filter 0.4s ease, opacity 0.4s ease;
 }

 .angled-shape:hover {
     transform: scale(1.05) rotate(0deg);
     filter: grayscale(0%);
     opacity: 1;
 }

 /* Individual Shape Positioning */
 .shape-1 {
     top: 0;
     left: 50%;
     transform: translateX(-50%);
     width: 320px;
     height: 320px;
     z-index: 5;
 }

 .shape-2 {
     top: 250px;
     right: 0;
     width: 350px;
     height: 350px;
     z-index: 6;
 }

 .shape-3 {
     top: 400px;
     left: 20px;
     width: 280px;
     height: 280px;
     z-index: 4;
 }

 /* Central Image */
 .main-focus-image {
     position: absolute;
     top: 50%;
     left: 35%;
     transform: translate(-50%, -50%) rotate(45deg);
     width: 300px;
     height: 300px;
     overflow: hidden;
     z-index: 7;
     border-radius: 10px;
     box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
 }

 .main-focus-image img {
     transform: rotate(-45deg) scale(1.4);
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: opacity 0.5s ease, transform 0.5s ease;
 }

 /* Diagonal Separator */
 .diagonal-separator {
     position: absolute;
     top: 0;
     right: 0;
     width: 100%;
     height: 100%;
     background: white;
     clip-path: polygon(70% 0, 100% 0, 100% 100%, 30% 100%);
     opacity: 0.2;
     z-index: 1;
 }






 /* ============================= */
 /* 📌 RESPONSIVE MEDIA QUERIES   */
 /* ============================= */

 /* ---------- Tablet Landscape & Large Tablets (1024px - 1200px) ---------- */
 @media (max-width: 1200px) {
     .strategic-planning-section {
         min-height: 700px;
         padding: 40px 20px;
     }

     .image-column {
         min-height: 650px;
     }

     .angled-shape {
         width: 250px;
         height: 250px;
     }

     .shape-1 {
         width: 260px;
         height: 260px;
     }

     .shape-2 {
         width: 280px;
         height: 280px;
     }

     .shape-3 {
         width: 230px;
         height: 230px;
     }

     .main-focus-image {
         width: 250px;
         height: 250px;
     }
 }

 /* ---------- Tablets Portrait (768px - 1023px) ---------- */
 @media (max-width: 992px) {
     .strategic-planning-section {
         flex-direction: column;
         text-align: center;
         min-height: auto;
         padding: 50px 20px;
     }

     .content-column {
         padding-right: 0;
         margin-bottom: 40px;
     }

     .strategic-item {
         justify-content: center;
         text-align: left;
     }

     .image-column {
         width: 100%;
         height: auto;
         min-height: 500px;
         margin-top: 20px;
     }

     .angled-shape {
         width: 220px;
         height: 220px;
     }

     .shape-1 {
         width: 230px;
         height: 230px;
     }

     .shape-2 {
         width: 250px;
         height: 250px;
     }

     .shape-3 {
         width: 200px;
         height: 200px;
     }

     .main-focus-image {
         width: 220px;
         height: 220px;
     }
 }

 /* ---------- Mobile (576px - 767px) ---------- */
 @media (max-width: 768px) {
     .icon-box {
         font-size: 1.6rem;
         min-width: 50px;
         margin-right: 15px;
     }

     .angled-visual-container {
         transform: translate(-50%, -40%);
         /* small shift upwards */
     }

     .angled-shape {
         width: 180px;
         height: 180px;
     }

     .shape-1 {
         width: 190px;
         height: 190px;
         top: 10px;
     }

     .shape-2 {
         width: 200px;
         height: 200px;
         top: 220px;
     }

     .shape-3 {
         width: 160px;
         height: 160px;
         top: 370px;
     }

     .main-focus-image {
         width: 180px;
         height: 180px;
         left: 50%;
     }
 }

 /* ---------- Very Small Mobile (Below 576px) ---------- */
 @media (max-width: 576px) {
     .strategic-item {
         flex-direction: column;
         align-items: center;
         text-align: center;
     }

     .icon-box {
         margin-bottom: 10px;
         margin-right: 0;
     }

     .angled-shape {
         width: 140px;
         height: 140px;
     }

     .shape-1 {
         width: 150px;
         height: 150px;
     }

     .shape-2 {
         width: 160px;
         height: 160px;
         top: 180px;
     }

     .shape-3 {
         width: 130px;
         height: 130px;
         top: 310px;
     }

     .main-focus-image {
         width: 140px;
         height: 140px;
         top: 55%;
         left: 50%;
     }
 }

 /* ---------- Ultra Small Devices (Below 420px) ---------- */
 @media (max-width: 420px) {

     .angled-shape,
     .main-focus-image {
         width: 120px;
         height: 120px;
     }

     .shape-1 {
         top: 0;
     }

     .shape-2 {
         top: 150px;
     }

     .shape-3 {
         top: 260px;
     }

     .main-focus-image {
         top: 48%;
     }
 }





 body {
     margin: 0;

     font-family: 'Manrope', sans-serif;
     font-weight: 400;

     background-color: #fff;
     color: #fff;
 }

 .counters-section {
     background: #0d0e0d;
     /* green background same as image */
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     padding: 50px 20px;
     gap: 20px;
 }

 .counter {
     flex: 1 1 150px;
     max-width: 200px;
     text-align: center;
 }

 .counter i {
     font-size: 40px;
     margin-bottom: 15px;
     display: block;
 }

 .counter-number {
     font-size: 28px;
     font-weight: bold;
     margin-bottom: 5px;
 }

 .counter-title {
     font-size: 16px;
     line-height: 1.3;
     color: #fff;
 }

 .counters-wrapper {
     text-align: center;
     padding: 50px 0px;
     background-color: #000000;
     /* Optional background */
 }

 .counters-heading {
     font-size: 2.5rem;
     font-weight: 700;
     color: #fdfafa;
     margin-bottom: 50px;
     position: relative;
     display: inline-block;
     padding-bottom: 10px;
 }

 .counters-heading::after {
     content: "";
     width: 60%;
     height: 3px;
     background: #007BFF;
     /* Accent color */
     position: absolute;
     left: 50%;
     transform: translateX(-50%);
     bottom: 0;
     border-radius: 5px;
 }

 .counters-section {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     gap: 40px;
 }

 .counter {
     width: 180px;
     text-align: center;
 }

 .counter i {
     font-size: 2rem;
     margin-bottom: 10px;
     color: #007BFF;
     /* Icon color */
 }

 .counter-number {
     font-size: 2rem;
     font-weight: bold;
 }

 .counter-title {
     font-size: 1rem;
     color: #e6e3e3;
 }

 @media (max-width: 768px) {
     .counters-section {
         padding: 30px 10px;
     }

     .counter {
         flex: 1 1 40%;
         max-width: none;
     }
 }

 @media (max-width: 480px) {
     .counter {
         flex: 1 1 80%;
     }

     .counter i {
         font-size: 30px;
     }

     .counter-number {
         font-size: 24px;
     }

     .counter-title {
         font-size: 14px;
     }
 }
















 /* ====== Certifications Section ====== */
 .certifications-section {
     text-align: center;
     padding: 60px 20px;
     background: #f7f8fa;
 }

 .certifications-heading {
     font-size: 2.5rem;
     font-weight: 700;
     color: #222;
     margin-bottom: 50px;
     position: relative;
     display: inline-block;
     padding-bottom: 10px;
 }

 .certifications-heading::after {
     content: "";
     width: 60%;
     height: 3px;
     background: #007BFF;
     /* Accent color */
     position: absolute;
     left: 50%;
     transform: translateX(-50%);
     bottom: 0;
     border-radius: 5px;
 }

 /* ====== Grid Layout ====== */
 .certifications-container {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
     gap: 30px;
     max-width: 1200px;
     margin: auto;
 }

 /* ====== Card Style ====== */
 .certification-link {
     text-decoration: none;
     display: block;
 }

 .certification-card {
     background: #fff;
     border-radius: 12px;
     padding: 15px;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
     transition: 0.4s ease;
     cursor: pointer;
     border: 2px solid transparent;
     position: relative;
     overflow: hidden;
 }

 .certification-card:hover {

     transform: translateY(-8px);
     box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15);
 }

 /* ====== Image Effect ====== */
 .certification-img {
     width: 100%;
     border-radius: 10px;
     transition: 0.4s ease;
     transform: scale(1);
 }

 .certification-card:hover .certification-img {
     transform: scale(1.07);
     filter: brightness(1.05);
 }

 .certification-img {
     width: 100%;
     height: 360px;
     /* 👉 FIX IMAGE HEIGHT */
     object-fit: cover;
     /* 👉 CROP PERFECTLY WITHOUT STRETCHING */
     border-radius: 10px;
     transition: 0.4s ease;
     transform: scale(1);
 }

 @media (max-width: 768px) {
     .certification-img {
         height: 200px;
         /* smaller height for tablet/phone */
     }
 }

 @media (max-width: 480px) {
     .certification-img {
         height: 160px;
         /* small mobiles */
     }
 }


 /* ====== Responsive ====== */
 @media (max-width: 768px) {
     .certifications-heading {
         font-size: 2rem;
     }
 }

 @media (max-width: 480px) {
     .certifications-heading {
         font-size: 1.7rem;
     }

     .certifications-container {
         gap: 20px;
     }
 }



















 /* --- SUSTAINABILITY SECTION STYLES (Clean Card Look) --- */

 .sustainability-section {
     background-color: var(--bg-light, #f8f9fa);
 }


 .Sustainability-heading {
     font-size: 2.5rem;
     font-weight: 700;
     color: #222;
     margin-bottom: 50px;
     position: relative;
     display: inline-block;
     padding-bottom: 10px;
 }

 .Sustainability-heading::after {
     content: "";
     width: 60%;
     height: 3px;
     background: #007BFF;
     /* Accent color */
     position: absolute;
     left: 50%;
     transform: translateX(-50%);
     bottom: 0;
     border-radius: 5px;
 }

 /* Base Card Style */
 .policy-block,
 .emission-block {
     padding: 40px;
     border: 1px solid #eee;
     border-radius: 15px;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
     transition: box-shadow 0.3s ease;
     background-color: #fff;
 }

 .policy-block:hover,
 .emission-block:hover {
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
 }

 .policy-title {
     color: var(--primary-blue, #007bff);
     font-weight: 700;
     margin-bottom: 15px;
     font-size: 1.8rem;
 }

 .text-content p {
     color: var(--text-muted, #6c757d);
     line-height: 1.7;
     margin-bottom: 25px;
 }

 /* Image Box Styling */
 .image-box {
     border-radius: 12px !important;
     overflow: hidden;
     position: relative;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 }

 .policy-img {
     width: 100%;
     height: auto;
     /* Important */
     display: block;
     /* Removes extra space */
     transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }

 /* Image Hover Scale Effect */
 .hover-scale:hover .policy-img {
     transform: scale(1.08);
 }

 /* Stat List Styling (Emission Block) */
 .stat-item {
     font-size: 1.05rem;
     margin-bottom: 15px;
     padding-left: 0;
     list-style: none;
     display: flex;
     align-items: center;
     font-weight: 500;
 }

 .stat-item strong {
     font-size: 1.2rem;
     color: var(--primary-green, #28a745);
     margin-right: 5px;
 }

 .stat-item i {
     color: var(--primary-green, #28a745);
     font-size: 1.3rem;
     min-width: 30px;
 }

 /* Primary Button Style (Modern Pill Shape) */
 .btn-primary {
     background-color: var(--primary-blue, #007bff);
     border-color: var(--primary-blue, #007bff);
     font-weight: 600;
     padding: 10px 25px;
     border-radius: 50px;
     transition: all 0.3s ease;
 }

 .btn-primary:hover {
     background-color: #0056b3;
     border-color: #0056b3;
     transform: translateY(-2px);
     box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3);
 }























 /* Card Setup and Responsiveness */
 .business-card-container {
     /* Standard business card size ratio */
     width: 90vw;
     /* Responsive width */
     max-width: 400px;
     /* Standard card max width */
     aspect-ratio: 1.75 / 1;
     /* 3.5in x 2in ratio (90mm x 50mm approx) */
     position: relative;
     perspective: 1000px;
     /* For 3D flip animation */

     font-family: 'Manrope', sans-serif;
     font-weight: 400;

 }

 .card-side {
     position: absolute;
     width: 100%;
     height: 100%;
     border-radius: 10px;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
     transition: transform 0.6s;
     backface-visibility: hidden;
     overflow: hidden;
     /* To contain the background image */
 }

 /* Colors */
 :root {
     --yellow: #f5a623;
     --dark-text: #333333;
     --light-text: #ffffff;
     --line-color: #e0e0e0;
 }

 /* Front Side Layout */
 .front {
     display: flex;
     flex-direction: row-reverse;
     /* Puts the background on the right */
     background-color: #ffffff;
 }

 /* Content Area (Left Side) */
 .card-content {
     flex: 1;
     padding: 10%;
     /* Responsive padding */
     display: flex;
     flex-direction: column;
     justify-content: space-between;
 }

 .name {
     margin: 0;
     font-size: 1.2em;
     font-weight: bold;
     color: var(--dark-text);
 }

 .title {
     margin: 0;
     font-size: 0.8em;
     color: #999;
 }

 /* Contact Details */
 .details-list {
     margin-top: 10%;
 }

 .detail-item {
     display: flex;
     align-items: center;
     margin-bottom: 5px;
     border-bottom: 1px solid var(--line-color);
     padding-bottom: 5px;
 }

 .detail-icon {
     background-color: var(--yellow);
     color: var(--light-text);
     padding: 4px;
     border-radius: 50%;
     width: 1.5em;
     height: 1.5em;
     display: flex;
     justify-content: center;
     align-items: center;
     margin-right: 10px;
     font-size: 0.8em;
 }

 .detail-text {
     font-size: 0.7em;
     color: var(--dark-text);
     text-decoration: none;
 }

 /* Background Area (Right Side) */
 .card-background {
     width: 50%;
     /* Image takes roughly half the card */
     background-image: url('city-skyline.jpg');
     /* Replace with your actual image path or a placeholder */
     background-size: cover;
     background-position: center;
     position: relative;
 }

 /* --- THE COMPLEX TRIANGLE PATTERN --- */
 .card-background::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: 1;

     /* Create the white/yellow/dark triangle shape using clip-path */
     /* This is an approximation and will need fine-tuning based on the exact image */
     clip-path: polygon(0% 0%,
             0% 100%,
             100% 100%,
             100% 0%,
             50% 0%);

     /* Use a gradient to create the pattern overlay */
     background:
         /* The main yellow line (diagonal) */
         linear-gradient(to top right, transparent 48%, var(--yellow) 48%, var(--yellow) 50%, transparent 50%),

         /* The faint white/gray/black diagonal stripe pattern */
         repeating-linear-gradient(45deg,
             rgba(255, 255, 255, 0.3) 0,
             rgba(255, 255, 255, 0.3) 1px,
             rgba(0, 0, 0, 0.3) 1px,
             rgba(0, 0, 0, 0.3) 3px,
             transparent 3px,
             transparent 6px);
 }

 /* Back Side Styling */
 .back {
     transform: rotateY(180deg);
     /* Start hidden for 3D flip */
     background-color: #ffffff;
     display: flex;
     flex-direction: row;
 }

 .back .logo-area {
     width: 50%;
     padding: 10%;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
 }

 .logo-box {
     background-color: var(--yellow);
     padding: 10px;
     border-radius: 5px;
     margin-bottom: 5px;
 }

 .logo-shape {
     color: var(--light-text);
     font-size: 2em;
 }

 /* ... rest of the back side styling ... */



























 /* --- BASE STYLES --- */
 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;

     font-family: 'Manrope', sans-serif;
     font-weight: 400;

 }

 body {
     background-color: #fff;
     color: #fff;
     overflow-x: hidden;
 }

 /* --- 1. INTRO SCREEN SECTION --- */
 .intro-screen-section {
     height: 100vh;
     width: 100%;
     background-color: #fff;
     /* Changed display to block to handle absolute children better if needed, 
       but keeping flex for centering of visual content */
     display: flex;
     justify-content: center;
     align-items: center;

     position: relative;
     /* CRITICAL for absolute positioning of image */
     z-index: 10;
     overflow: hidden;
     /* To prevent image overflow during zoom */
 }

 .intro-screen-section {
     position: relative;
     overflow: hidden;
 }

 .scroll-button {
     position: absolute;
     bottom: 20px;
     left: 50%;
     transform: translateX(-50%);
     z-index: 10;
 }

 /* Other intro content (like h2, p) should fade out above the image */
 .intro-visual-content {
     text-align: center;
     max-width: 800px;
     color: #000;
     /* NEW: Increase z-index so text is visible over the small image */
     z-index: 2;
     position: relative;
     /* To enforce the z-index */
 }

 .esg-label {
     font-size: 1.5rem;
     letter-spacing: 5px;
     margin-bottom: 20px;
     font-weight: bold;
 }

 .intro-visual-content h2 {
     font-size: 3rem;
     line-height: 1.3;
     margin-bottom: 40px;
 }

 .earth-intro-image {
     width: 80%;
     max-width: 400px;
     height: auto;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
     /* NEW: Absolute position so its scale can fill the viewport */
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     z-index: 1;
     /* Keep it above other intro content, but below the scrolling timeline */
 }


 /* --- 1. INTRO SCREEN SECTION --- */
 .intro-screen-section {
     height: 100vh;
     width: 100%;
     background-color: #fff;

     display: flex;
     justify-content: center;
     align-items: center;
     /* This centers the intro-visual-content vertically */

     position: relative;
     z-index: 10;
     overflow: hidden;
 }

 .intro-visual-content {
     text-align: center;
     max-width: 800px;
     color: #000;
     z-index: 2;
     position: relative;

     /* CRITICAL: Use flexbox to stack children vertically */
     display: flex;
     flex-direction: column;
     /* Stack text wrapper and image vertically */
     align-items: center;
     /* Center them horizontally */

     /* NEW: Add some padding to the top of the whole content block,
            or ensure there's enough space above the text */
     padding-top: 50px;
     /* Adjust this value as needed to push everything down */
 }

 /* Style for the new text wrapper */
 .intro-text-wrapper {
     margin-bottom: 40px;
     /* Space between text and image */
 }

 .esg-label {
     font-size: 1.5rem;
     letter-spacing: 5px;
     margin-bottom: 20px;
     font-weight: bold;
 }

 .intro-visual-content h2 {
     font-size: 3rem;
     line-height: 1.3;
     /* margin-bottom is now on intro-text-wrapper */
 }

 .earth-intro-image {
     width: 80%;
     max-width: 400px;
     height: auto;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
     position: relative;
     top: auto;
     left: auto;
     transform: translate(0, 0);
     z-index: 1;
     /* margin-top: 20px; - This is now controlled by intro-text-wrapper margin-bottom */
 }

 /* --- Keep the rest of the existing CSS styles unchanged --- */



 /* --- 2. EARTH CONTAINER (The main scrolling section) --- */
 .earth-container {
     position: relative;
     min-height: 400vh;
     width: 100%;

     /* 💥 CRITICAL CHANGE: The FIXED background image is what creates the seamless 'hold'
       as the pinned section unpins. This is the continuous image. */
     background-color: #000;
     background-size: cover;
     background-position: center;
     background-attachment: fixed;
     /* 💥 KEEPS THE IMAGE IN PLACE WHILE CONTENT SCROLLS */

     background-color: rgba(0, 0, 0, 0.6);
     background-blend-mode: darken;

     display: flex;
     flex-direction: column;
     align-items: center;
     padding: 100px 20px;
     z-index: 1;
 }


 /* --- 2B. TIMELINE CONTENT STYLES --- */

 .timeline-h1 {
     text-align: center;
     font-size: 3rem;
     margin-bottom: 80px;
     color: #fff;
     text-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
     opacity: 0;
 }

 /* Timeline Center Line */
 .earth-container::before {
     content: '';
     position: absolute;
     top: 0;
     bottom: 0;
     left: 50%;
     width: 3px;
     background: linear-gradient(to bottom, transparent, #00BCD4, transparent);
     transform: translateX(-50%);
     z-index: 1;
 }

 /* --- 3. TIMELINE ITEM STYLES --- */
 .timeline-item {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin: 50px auto;
     max-width: 1100px;
     padding: 0 50px;
     position: relative;

     opacity: 1;
     z-index: 10;
     /* Ensures content scrolls *over* the fixed background */
 }

 /* Item dot on the timeline line */
 .timeline-item::after {
     content: '';
     position: absolute;
     top: 50%;
     left: 50%;
     width: 15px;
     height: 15px;
     background-color: #00BCD4;
     border: 3px solid #01579B;
     border-radius: 50%;
     transform: translate(-50%, -50%);
     z-index: 11;
 }

 .timeline-item.right {
     flex-direction: row;
 }

 .timeline-item.left {
     flex-direction: row-reverse;
 }

 .timeline-item img {
     width: 40%;
     /* reduced from 45% to make images smaller */
     max-width: 380px;
     /* reduced from 450px */
     border-radius: 15px;
     box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8);
     transition: transform 0.3s ease, box-shadow 0.3s ease;
     height: 500px;
     /* ensures responsive proportional height */
     object-fit: cover;
     /* maintains image proportion without distortion */
 }

 .timeline-item p {
     width: 45%;
     padding: 30px;
     background: rgba(10, 25, 47, 0.8);
     border-radius: 10px;
     line-height: 1.6;
     text-align: left;
 }

 .timeline-item.left p {
     text-align: left;
 }


 /* 📱 MEDIA QUERIES FOR RESPONSIVENESS 💻 */
 /* ==================================================== */

 /* --- Tablet and Mobile Screens (Max 768px) --- */
 @media (max-width: 768px) {

     /* 1. INTRO SCREEN */
     .intro-visual-content h2 {
         font-size: 2rem;
         /* Reduce heading size */
     }

     .intro-text-wrapper {
         margin-bottom: 20px;
         /* Reduce space before image */
     }

     /* 2. EARTH CONTAINER & TIMELINE */
     .earth-container {
         padding: 50px 10px;
         /* Reduce overall padding */
     }

     .timeline-h1 {
         font-size: 2.5rem;
     }

     /* CRITICAL: Convert timeline to single column */
     .earth-container::before {
         left: 30px;
         /* Move the line to the left edge */
     }

     .timeline-item {
         flex-direction: column;
         max-width: 90%;
         padding: 0 15px;
         margin: 30px auto;
     }

     /* Re-align items to the left side */
     .timeline-item.right,
     .timeline-item.left {
         flex-direction: column;
         align-items: flex-start;
         margin-left: 30px;
     }

     .timeline-item img {
         width: 100%;
         /* Full width image */
         max-width: 100%;
         height: 300px;
         margin-bottom: 20px;
     }

     .timeline-item p {
         width: 100%;
         /* Full width text */
         padding: 20px;
     }

     /* Reposition the dot for a left-aligned timeline */
     .timeline-item::after {
         left: 30px;
         top: 0;
         transform: translate(-50%, 0);
     }

     /* 4. HERO VIDEO SECTION (Using your existing styles) */
     .hero-video-container {
         height: 400px;
     }

     .hero-video-content {
         top: 80px;
         left: 30px;
         max-width: 90%;
         padding: 10px;
     }

     .hero-video-content h1 {
         font-size: 2.5rem;
     }

     .hero-video-content p {
         font-size: 1rem;
     }

     /* 5. PRODUCT CARDS SECTION */
     .products-section {
         padding: 40px 15px;
     }

     .products-section h2 {
         font-size: 2.2rem;
     }

     .products-section .lead {
         font-size: 1rem;
         margin-bottom: 30px;
     }

     /* Ensure product cards stack nicely (assuming a grid or flex parent in HTML) */
     .product-card {
         min-height: 300px;
         margin-bottom: 20px;
         /* Add spacing between stacked cards */
     }

     .product-card .card-title {
         font-size: 1.5rem;
     }

     /* 6. RECYCLING SECTION */
     .recycling-section {
         padding: 40px 15px;
     }

     .recycling-section h3 {
         font-size: 2rem;
     }

     /* Assuming process steps are in a row, they should stack/scale */
 }

 /* --- Extra Small Mobile Screens (Max 480px) --- */
 @media (max-width: 480px) {

     /* 1. INTRO SCREEN */
     .intro-visual-content h2 {
         font-size: 1.8rem;
     }

     /* 2. EARTH CONTAINER & TIMELINE */
     .earth-container {
         padding: 30px 5px;
     }

     .timeline-h1 {
         font-size: 2rem;
     }

     .timeline-item {
         margin-left: 20px;
     }

     .earth-container::before {
         left: 15px;
         /* Adjust line position */
     }

     .timeline-item::after {
         left: 15px;
         /* Adjust dot position */
     }

     /* 4. HERO VIDEO SECTION */
     .hero-video-content h1 {
         font-size: 2rem;
     }

     .hero-video-content {
         left: 15px;
         top: 60px;
     }

     /* 5. PRODUCT CARDS SECTION */
     .product-card .card-body {
         padding: 20px;
     }
 }







 /* GPU + smooth animation */
 .timeline-item,
 .timeline-item img,
 .timeline-item p {
     will-change: transform, opacity, filter;
 }

 /* Hover depth feel */
 .timeline-item img {
     cursor: pointer;
     transform-origin: center;
 }

 /* Mobile safety */
 @media (max-width: 768px) {
     .timeline-item img {
         transform: none !important;
     }
 }

 /* ============================================================ */
/* --- ESG EARTH ZOOM (GSAP ScrollTrigger) --- */
/* ============================================================ */

/* Override the fixed px size so GSAP can animate freely */
.esg_section .before_flow_area .bigger_bg .for_size_change {
    width: 385px;
    height: 244px;
    border-radius: 14px 14px 0 0;
    overflow: hidden;
    transition: none !important; /* Let GSAP handle all transitions */
    transform-origin: center bottom;
    will-change: width, height, border-radius;
}

.esg_section .before_flow_area .bigger_bg .for_size_change .bg_dimd {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    opacity: 0;
    transition: none !important; /* Let GSAP handle */
    pointer-events: none;
}

/* Ensure the before_flow_area has enough height to trigger scroll */
.esg_section .before_flow_area {
    position: relative;
    height: 100vh;
    overflow: hidden;
}

/* Keep bg_img_area filling its container */
.esg_section .before_flow_area .bigger_bg .for_size_change .bg_img_area {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    transition: none !important;
}

/* Mobile: disable the GSAP zoom, show static image instead */
@media (max-width: 768px) {
    .esg_section .before_flow_area .bigger_bg .for_size_change {
        width: 100% !important;
        height: 200px !important;
        border-radius: 0 !important;
        position: relative;
        transform: none !important;
        left: 0 !important;
    }

    .esg_section .before_flow_area .bigger_bg .for_size_change .bg_dimd {
        opacity: 0.5 !important; /* Always slightly visible on mobile */
    }
}

@media (max-width: 768px) {
    .esg_section .before_flow_area {
        height: auto !important;
        min-height: unset !important;
        overflow: visible !important;
    }

    .esg_section .before_flow_area .bigger_bg {
        position: relative !important;
        left: 0 !important;
        bottom: unset !important;
        transform: none !important;
        width: 100% !important;
    }
}



/* FIX ESG SECTION REFRESH ISSUE */

.before_flow_area {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
}

.main_section_tit_area {
    z-index: 20;
}

.bigger_bg {
    z-index: 1;
}

.swiper_black_bg {
    position: relative;
    z-index: 5;
    margin-top: 0;
}

/* Prevent overlapping on refresh */
.esg_section {
    background: #000;
}

/* Smooth loading */
.for_size_change {
    will-change: transform, width, height;
}