/* Imgs Section Couresel john */
   
        /* 1. Carousel Container and Scroll Behavior */
        .app-scroll-wrapper {
            position: relative;
           
            padding: 0; 
        }

        .app-scroll-container {
            overflow-x: auto;
            /* Hide the scrollbar for a clean carousel look */
            -ms-overflow-style: none; /* IE and Edge */
            scrollbar-width: none; /* Firefox */
          
            
            /* Ensures we are not using Bootstrap's default gutter spacing on the very ends */
            margin: 0 -0.5rem;
            padding: 0 0.5rem;

            /* DRAG STYLES */
            cursor: grab; /* Indicates it's draggable */
            user-select: none; /* Prevents text selection during drag */
            -webkit-user-select: none; /* Safari */
            -moz-user-select: none; /* Firefox */
        }

        .app-scroll-container::-webkit-scrollbar {
            display: none; /* Chrome, Safari, and Opera */
        }
        
        /* Dragging state */
        .app-scroll-container.is-dragging {
            cursor: grabbing;
        }

        /* 2. Responsive Card Widths (Increased Size) */
        .app-scroll-item {
            height: auto; 
            flex: 0 0 auto;
            /* Default: Show 3 items on large screens (33.333% width) */
            width: 33.333%;
            max-width: 33.333%;
        }

        /* Tablet/Medium Screens: Show 2 items */
        @media (max-width: 992px) {
            .app-scroll-item {
                width: 50%;
                max-width: 50%;
            }
        }

        /* Mobile/Small Screens: Show 1 item (Max Size) */
        @media (max-width: 576px) {
            .app-scroll-item {
                width: 100%;
                max-width: 100%;
            }
        }

        /* 3. Image Card Styling (Border Shadows and Rounded Corners) */
        .app-image-card {
            height: 100%;
            display: flex;
            flex-direction: column;
            border-radius: 0.5rem; 
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
            transition: box-shadow 0.3s ease;
        }

        .app-image-card:hover {
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
        }

        /* 4. Aspect Ratio Wrapper (Maintains 16:9 landscape orientation) */
        .app-card-inner-wrapper {
            position: relative;
            /* CRITICAL: Use padding-top to force a 16:9 aspect ratio (9 / 16 * 100 = 56.25%) */
            padding-top: 56.25%; 
            height: 0;
            overflow: hidden;
            border-radius: 0.3rem;
            width: 100%; /* Ensure it spans the full width of the card */
            /* Background color for letterboxing space */
            background-color: #f7f7f7; 
        }

        .app-full-image {
            /* CRITICAL: Absolute position the image to fill the 16:9 wrapper */
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            /* CHANGED: Use contain to ensure the entire image is visible (no cropping) */
            object-fit: contain; 
            transition: transform 0.3s ease-in-out;
            pointer-events: none; /* Ensures drag events target the container, not the image */
        }

        /* 5. Image Hover Effect (Zoom In) */
        .app-image-card:hover .app-full-image {
            transform: scale(1.1); /* Zooms the image on hover */
        }

        /* 6. Navigation Button Styling (Reduced Size) */
        .app-nav-controls {
            text-align: center;
            /* Setting margin-top to 0 to remove space between cards and controls */
            margin-top: 0;
        }

        .app-custom-control {
            background-color: #07770d;
            color: white;
            border: none;
            padding: 0;
            /* Reduced button size */
            width: 44px; 
            height: 44px; 
            border-radius: 50%;
            margin: 0 10px;
            cursor: pointer;
            transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
        }

        .app-custom-control:hover {
            background-color: #c3e408;
            transform: scale(1.05);
            box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
        }

        .app-custom-control:active {
            transform: scale(0.95);
        }

        /* Style the Bootstrap icons */
        .app-custom-control .carousel-control-prev-icon,
        .app-custom-control .carousel-control-next-icon {
            /* Reduced icon size to match smaller button */
            width: 1.2rem; 
            height: 1.2rem; 
        }

   
   
         /* ****************************************************************************************************************************************** */
   
   
  
      
      
 /* *******************************************************************************************************  */
    
        /* CSS video COuresel  */
        :root {
            --color-dark-green: #0A2814; /* Dark Green for the left side */
            --color-accent-light: #FFCC00; /* Yellowish-Orange for accent/light side */
            --color-text-primary: #FFFFFF;
            --section-padding: 8vw;
            --fade-duration: 1.0s; /* Duration of the video cross-fade */
        }

        /* --- Global Reset  --- */
        .hero-section * {
            box-sizing: border-box; /* Ensure padding/border don't affect width/height */
        }
        
        /* REVERTED: Re-adding body reset for margin and padding */
        body {
            margin: 0;
            padding: 0;
        }
        /* --------------------------------------------------------- */

        /* ----------------------------------- */
        /* 1. HERO SECTION CONTAINER & LAYOUT */
        /* ----------------------------------- */
        .hero-section {
            position: relative;
            width: 100%;
            height: 100vh; 
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            font-family: 'Inter', sans-serif;
            background-color: #111;
        }

        /* ----------------------------------- */
        /* 2. VIDEO BACKGROUND STYLING */
        /* ----------------------------------- */
        .hero-section .video-background {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
        }

        .hero-section .video-background video {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover; 
            display: block;
            transition: opacity var(--fade-duration) ease-in-out;
        }
        
        #bgVideo2 {
            opacity: 0;
        }

        /* ----------------------------------- */
        /* 3. GRADIENT OVERLAY (The core visual effect) */
        /* ----------------------------------- */
        .hero-section .gradient-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 2;
            background: linear-gradient(
                to right,
                /* 0%: Dark Green (highly opaque) */
                rgba(10, 40, 20, 0.95) 0%,
                /* 50%: Mid-point transition (dark green with medium opacity) */
                rgba(10, 40, 20, 0.7) 50%, 
                /* 100%: Accent Yellow (50% opacity for clear visibility but some video texture) */
                rgba(255, 204, 0, 0.5) 100%
            );
            backdrop-filter: brightness(0.8);
        }

        /* ----------------------------------- */
        /* 4. CONTENT & TYPOGRAPHY */
        /* ----------------------------------- */
        .hero-content {
            position: relative;
            z-index: 3;
            max-width: 1400px;
            width: calc(100% - (2 * var(--section-padding)));
            padding: 0 var(--section-padding);
            color: var(--color-text-primary);
            /* SHIFT UPWARD: Pushes the content block up by 10% of its own height */
            transform: translateY(-10%); 
        }

        /* Initial state for all animated content */
        .hero-content h1, 
        .hero-content .theme-text, 
        .hero-section .read-more-btn {
            opacity: 0;
        }

        /* H1 Animation (Slide In) */
        .hero-content h1 {
            font-size: clamp(2.5rem, 6vw, 5.5rem);
            font-weight: 900;
            line-height: 1.1;
            /* TIGHTER SPACING: Reduced below heading */
            margin-bottom: 0.5rem; 
            /* ADJUSTED: Increased max-width for better flow on desktop/tablet */
            max-width: 70%; 
            text-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
            transform: translateX(-100%); 
        }

        /* Target H1 when 'is-loaded' class is added by JS */
        .hero-content h1.is-loaded {
            animation: slideIn 1.5s ease-out forwards;
        }

        @keyframes slideIn {
            to {
                transform: translateX(0);
                opacity: 1;
            }
        }
        
        /* ----------------------------------- */
        /* DYNAMIC TEXT CAROUSEL STYLING */
        /* ----------------------------------- */
        .hero-content .dynamic-text-wrapper {
            position: relative;
            /* Explicit height to prevent content shift during transition */
            min-height: 80px; 
            margin-top: 1rem; 
            margin-bottom: 0.5rem; 
            /* ADJUSTED: Increased max-width for consistency */
            max-width: 70%; 
        }

        /* Dynamic Text Slides - Base Styling */
        .hero-content .dynamic-text-slide {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            opacity: 0;
            /* Transition for the fade in/out effect */
            transition: opacity 0.5s ease-in-out; 
            
            /* Subtext Base Styling */
            font-size: clamp(0.9rem, 1.5vw, 1.3rem);
            font-weight: 400;
            line-height: 1.4;
            text-align: justify;
            margin-top: 0; 
            margin-bottom: 0;
        }

        /* Utility class to hide slide completely before fade-in/after fade-out */
        .hero-content .slide-hidden {
            display: none;
        }
        
        /* Class applied by JS to make the current slide visible */
        .hero-content .dynamic-text-slide.active {
            opacity: 1;
        }
        
        /* ----------------------------------- */

        /* Theme Text Styling and Animation */
        .hero-content .theme-text {
            font-size: clamp(0.8rem, 1.2vw, 1rem);
            font-weight: 700;
            line-height: 1.5;
            padding-top: 0.5rem;
            border-top: 3px solid var(--color-accent-light); 
            display: inline-block;
            /* INCREASED SPACING: Below button */
            margin-top: 1.5rem; 
            margin-bottom: 0.5rem; 
            /* REMOVED 1.5s delay to allow JS to control the start time for a smoother sequence */
            transition: opacity 1s ease-out; 
        }

        /* Read More Button Styling and Animation */
        .hero-section .read-more-btn {
            background-color: var(--color-accent-light);
            color: var(--color-dark-green);
            font-weight: 700;
            padding: 0.5rem 1.25rem;
            border-radius: 9999px; /* Fully rounded */
            border: none;
            cursor: pointer;
            /* REMOVED 1.5s delay on opacity transition for a smoother sequence */
            transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s, opacity 1s ease-out; 
            display: block; 
            /* INCREASED SPACING: Below dynamic text wrapper */
            margin-top: 1.5rem; 
            width: fit-content;
            box-shadow: 0 4px 15px rgba(255, 204, 0, 0.4);
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        .hero-section .read-more-btn:hover {
            background-color: #ffe066;
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(255, 204, 0, 0.6);
        }


        /* ----------------------------------- */
        /* 5. NEW ABSTRACT DESIGN ELEMENTS */
        /* ----------------------------------- */

        .hero-section .abstract-shape {
            position: absolute;
            z-index: 3;
            pointer-events: none;
        }

        /* 1. Circle Top Right (Large, soft, blurred shape) */
        .hero-section .circle-top-right {
            top: 5%;
            right: 0;
            width: clamp(200px, 20vw, 350px);
            height: clamp(200px, 20vw, 350px);
            background-color: var(--color-accent-light);
            border-radius: 50%;
            opacity: 0.3;
            filter: blur(50px);
            transform: translateX(30%);
        }

        /* 2. Triangles Bottom Left (Solid shapes) */
        .hero-section .triangle-bottom-left {
            bottom: 0; 
            left: var(--section-padding);
            width: 60px;
            height: 60px;
            background-color: var(--color-accent-light);
            clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
            opacity: 0.7;
            transform: translateY(50%);
        }

        .hero-section .triangle-bottom-left-small {
            bottom: 0;
            width: 40px;
            height: 40px;
            background-color: var(--color-accent-light);
            clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
            left: calc(var(--section-padding) + 65px);
            opacity: 0.9;
            transform: translateY(20%);
        }

        /* ----------------------------------- */
        /* Responsive adjustments */
        /* ----------------------------------- */
        @media (max-width: 768px) {
            /* CRITICAL FOR LANDSCAPE VIEW: 
               Setting height to 56.25vw (which is 9/16 of the width) forces a 16:9
               aspect ratio, ensuring the hero section maintains a wide, landscape-like 
               view regardless of device orientation or dynamic browser UI height changes.
            */
            .hero-section {
                height: 56.25vw; 
                min-height: 350px;
            }
            
            /* CONTENT RESPONSIVENESS AND SPACING FOR 16:9 HEIGHT */
            .hero-content {
                padding: 0 4vw;
                /* ADJUSTED: Removed upward shift to ensure all content is fully visible */
                transform: translateY(0); 
            }
            
            .hero-content h1,
            .hero-content .dynamic-text-wrapper {
                max-width: 100%; /* Ensure content takes full width */
            }

            .hero-content h1 {
                /* TIGHTER SPACING: Below heading */
                margin-bottom: 0.25rem; 
            }

            .hero-content .dynamic-text-wrapper {
                /* Sufficient height for text on mobile */
                min-height: 120px; 
                margin-top: 0.5rem;
                margin-bottom: 0.5rem;
            }
            
            .hero-content .dynamic-text-slide {
                font-size: 1rem;
            }

            .hero-section .read-more-btn {
                /* Increased spacing for mobile */
                margin-top: 1rem; 
                margin-bottom: 0.25rem;
            }
            
            .hero-content .theme-text {
                /* Increased spacing for mobile */
                margin-top: 1rem; 
                margin-bottom: 0.2rem; 
                padding-top: 0.3rem; 
            }

            .hero-section .circle-top-right {
                width: 150px;
                height: 150px;
                filter: blur(30px);
            }
        }