@media (max-width: 720px) {
    #section-1.stack-section {
        padding-top: 5.5rem !important; /* Adjust to match navbar height */
    }
}
/* Roadmap milestone pop-up animation */
.milestone {
    opacity: 0;
    transform: scale(0.92) translateY(24px);
    transition: opacity 0.25s cubic-bezier(.4,0,.2,1), transform 0.25s cubic-bezier(.4,0,.2,1);
}
.milestone.milestone-visible {
    opacity: 1;
    transform: scale(1) translateY(0);
}
/* Add a dark overlay on background images for stack-section on mobile for readability */
@media (max-width: 720px) {
    .stack-section {
        position: relative !important;
    }
    .stack-section::before {
        content: '';
        position: absolute;
        inset: 0;
        background-color: rgba(17, 24, 39, 0.1); /* 10% dark overlay */
        z-index: 1;
        pointer-events: none;
    }
    /* Make overlay for team member section much darker on mobile */
    #section-team.stack-section::before {
        display: block !important;
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(rgba(17, 24, 39, 0.46), rgba(17, 24, 39, 0.46));
        z-index: 1;
        pointer-events: none;
    }
    /* Shrink background image width for team member section on mobile */
    #section-team {
        background-size: 95% auto !important;
        background-position: center top !important;
    }
    .stack-card {
        position: relative;
        z-index: 2;
        /* Add text shadow for readability on mobile */
    }
    .stack-card, .stack-card * {
        text-shadow: 0 2px 8px rgba(0,0,0,0.45);
    }
}
/* Custom scrollbar for a more modern look */
        ::-webkit-scrollbar {
            width: 8px;
        }
        ::-webkit-scrollbar-track {
            background: #111827; /* Dark background for the track */
        }
        ::-webkit-scrollbar-thumb {
            background: #4F46E5; /* A vibrant accent color */
            border-radius: 10px;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: #6366F1;
        }
        
        /* Base font and background settings */
        body {
            font-family: 'Inter', sans-serif;
            background-color: #111827;
            color: #D1D5DB; /* Light gray as the default text color */
        }

        /* The main container for the stacking sections */
        .stack-container {
            position: relative;
        }

        /* Each stacking section configuration */
        .stack-section {
            min-height: 100vh; /* Full viewport height */
            width: 100%;
            position: sticky; /* The magic for the stacking effect */
            top: 0;
            z-index: 10; /* default stacking baseline for sticky sections */
            padding: 4rem 1rem;
            display: flex;
            align-items: center;
            justify-content: center;
            box-sizing: border-box;
            background-color: #111827; /* Default background for sections */
        }

        /* Responsive fix: on small screens, stacking sections become normal blocks for full content visibility */
        @media (max-width: 720px) {
            .stack-section {
                position: static !important;
                min-height: auto !important;
                padding: 2rem 0.5rem !important;
                display: block !important;
            }
            .stack-card {
                max-width: 100vw !important;
                width: 100% !important;
                margin: 0 !important;
                border-radius: 0.75rem !important;
                box-shadow: none !important;
                padding-left: 0.5rem !important;
                padding-right: 0.5rem !important;
            }
        }

        /* Applying different background colors to create visual separation */
        #section-1 {
            z-index: 1;
            position: relative; /* Required for the overlay */
            /* Replace with your image from Freepik or other sources */
            background-image: url('https://pub-071769ad6df54ea78f7aed67b3d66d73.r2.dev/10999.png');
            background-size: cover;
            background-position: center;
        }
        /* Add a dark overlay to the hero section to ensure text is readable */
        #section-1::before {
            content: '';
            position: absolute;
            inset: 0;
            background-color: rgba(17, 24, 39, 0.7); /* semi-transparent dark overlay */
            z-index: -1; /* Place overlay behind the content */
        }

        #section-2 {
            z-index: 2;
            background-image:
                linear-gradient(rgba(17, 24, 39, 0.7), rgba(17, 24, 39, 0.7)),
                url('https://pub-071769ad6df54ea78f7aed67b3d66d73.r2.dev/core-portfolio.png');
            background-size: cover;
            background-position: center;
        }
        #section-2::before {
            content: '';
            position: absolute;
            inset: 0;
            background-color: rgba(17, 24, 39, 0.55); /* subtle dark overlay for text readability */
            z-index: -1;
        }
        #section-4 { /* History Section */
            z-index: 4;
            background-image: url('https://pub-071769ad6df54ea78f7aed67b3d66d73.r2.dev/construction-unsplash.png');
            background-size: cover;
            background-position: center;
            background-attachment: fixed; /* Parallax-like effect */
        }
        #section-4::before {
            content: '';
            position: absolute;
            inset: 0;
            background-color: rgba(36, 48, 77, 0.8); /* Dark blue overlay */
            backdrop-filter: blur(2px);
            z-index: -1;
        }

        #section-5 { z-index: 5; background-color: #2d3a5f; } /* Roadmap */
        #section-6 { /* Vision & Mission */
            z-index: 6;
            background-image: url('https://pub-071769ad6df54ea78f7aed67b3d66d73.r2.dev/jepak-bridge.png');
            background-size: 110% auto;
            background-position: center;
            background-repeat: no-repeat;
            background-attachment: fixed; /* Parallax-like effect */
        }
        #section-6::before {
            content: '';
            position: absolute;
            inset: 0;
            
            background-color: rgba(54, 70, 114, 0.85); /* Darker blue overlay */
            backdrop-filter: blur(2px);
            z-index: -1;
        }
        #section-7 { z-index: 8; background-color: #1a233a; } /* Personnel */
        #section-team {
            z-index: 9;
            background-image: url('https://pub-071769ad6df54ea78f7aed67b3d66d73.r2.dev/Image_3zthpb3zthpb3zth.png');
            background-size: cover;
            background-position: center;
            background-attachment: fixed;
        }
        #section-team::before {
            content: '';
            position: absolute;
            inset: 0;
            background-image:
                linear-gradient(rgba(17, 24, 39, 0.92), rgba(17, 24, 39, 0.92)),
                url('https://pub-071769ad6df54ea78f7aed67b3d66d73.r2.dev/Image_3zthpb3zthpb3zth.png');
            background-size: cover;
            background-position: center;
            background-attachment: fixed;
            background-color: rgba(17, 24, 39, 0.92); /* Much darker overlay */
            backdrop-filter: blur(2px);
            z-index: -1;
        }
        #section-hod {
            z-index: 7;
            background-color: #151f38;
            background-image: radial-gradient(circle at 20% 20%, rgba(99, 102, 241, 0.25), transparent 55%),
                radial-gradient(circle at 80% 25%, rgba(79, 70, 229, 0.18), transparent 50%),
                linear-gradient(180deg, rgba(17, 24, 39, 0.95), rgba(17, 24, 39, 0.98));
        }
    /* Activities section styling - make it sticky to participate in the stack roll effect */
    #section-activities {
        z-index: 10; /* Ensure it has a proper place in the stacking order */
        background-color: #1f2937; /* A slightly lighter dark shade for variety */
    }
    /* Documents stacking: allow it to participate in the sticky stack effect */
    #section-docs { z-index: 11; }
    /* Footer should not be sticky or overlap content */
    #section-8 { 
        z-index: 7; 
        position: relative !important; 
        top: auto !important; 
        min-height: auto !important; 
        padding-top: 2rem; 
        padding-bottom: 4rem; 
        background-color: #111827; /* Match the body for a seamless end */ 
    }

        /* A subtle border to help distinguish the 'cards' as they stack */
        .stack-card {
             border-radius: 1.5rem;
             border: 1px solid rgba(255, 255, 255, 0.05);
             box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
             transform-origin: center top;
             transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.5s ease-in-out;
             margin: auto;
             max-width: 1200px;
             position: relative; /* Ensure content is above the pseudo-element */
        }
        
        /* Hide the card styling on the first and last sections for a clean entry/exit */
        #section-1 .stack-card, #section-team .stack-card, #section-8 .stack-card {
            border: none;
            box-shadow: none;
            background-color: transparent;
        }

        /* Glow effect for headings */
        .glow-text {
            text-shadow: 0 0 8px rgba(255, 255, 255, 0.3), 0 0 20px rgba(99, 102, 241, 0.2);
        }
        
        /* Modern button styling */
        .modern-btn {
            transition: all 0.3s ease;
            box-shadow: 0 0 15px rgba(99, 102, 241, 0.4);
        }
        .modern-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 0 25px rgba(99, 102, 241, 0.7);
        }

        /* Custom scrollbar for the timeline */
        .timeline-container::-webkit-scrollbar {
            height: 6px;
        }
        .timeline-container::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.1);
            border-radius: 10px;
        }
        .timeline-container::-webkit-scrollbar-thumb {
            background: #4F46E5;
            border-radius: 10px;
        }

        /* Styling for the vertical timeline line */
        .timeline-line {
            position: absolute;
            left: 1rem;
            top: 0;
            bottom: 0;
            width: 2px;
            background-color: #374151; /* gray-700 */
            z-index: 0;
        }

        /* Chronology / Infographic styles (alternating timeline) */
        .chronology {
            position: relative;
            max-width: 1100px;
            margin: 0 auto;
            padding: 2rem 1rem;
        }
        /* center vertical line */
        .chronology::before{
            content:'';
            position:absolute;
            left:50%;
            transform:translateX(-50%);
            top:0; bottom:0;
            width:4px;
            background: linear-gradient(180deg, rgba(99,102,241,0.9), rgba(79,70,229,0.6));
            border-radius:2px;
            box-shadow:0 6px 18px rgba(79,70,229,0.08);
            z-index:1;
        }
        .chronology .entry{ position:relative; margin:1.25rem 0; z-index:2 }
        .chronology .entry-year{
            width:72px; height:72px; border-radius:50%; background:linear-gradient(135deg,#4f46e5,#7c3aed);
            color:white; display:flex; align-items:center; justify-content:center; font-weight:700; box-shadow:0 10px 30px rgba(79,70,229,0.18);
            position:relative; margin:0 auto 0.5rem auto;
        }
        .chronology .entry-content{ background: rgba(0,0,0,0.6); border:1px solid rgba(255,255,255,0.04); padding:1rem; border-radius:0.75rem; color:#cbd5e1; position:relative }
        .chronology .entry-content h4{ color:#fff; margin:0 0 .25rem 0 }
        .chronology .entry-content ul{ margin:0; padding-left:1.2rem }

        /* Desktop alternating layout */
        @media (min-width: 768px){
            .chronology .entry{ display:grid; grid-template-columns: 1fr 120px 1fr; align-items:start; gap:20px }
            .chronology .entry-year{ grid-column:2; margin:0; justify-self:center; margin-top:6px }
            .chronology .entry-left .entry-content{ grid-column:1; text-align:right }
            .chronology .entry-right .entry-content{ grid-column:3; text-align:left }
            /* connectors from content to center line */
            .chronology .entry-left .entry-content::after{
                content:''; position:absolute; right:-16px; top:24px; width:16px; height:2px; background:rgba(255,255,255,0.06)
            }
            .chronology .entry-right .entry-content::after{
                content:''; position:absolute; left:-16px; top:24px; width:16px; height:2px; background:rgba(255,255,255,0.06)
            }
        }
        /* Restore stacking effect: remove non-sticky overrides for #section-chronology */
            /* Removed dark overlay to prevent double-darkening */
            #section-chronology::before {
                display: none !important;
            }
        /* Ensure the timeline content has breathing room at the end */
        .chronology { padding-bottom: 4rem }

    /* Lazy image fade-in */
    img.lazy-img { opacity: 0; transform: translateY(8px); transition: opacity 600ms ease, transform 600ms ease; will-change: opacity, transform; }
    img.lazy-img.loaded { opacity: 1; transform: none; }
    
    /* Back to top floating button */
    #back-to-top {
        position: fixed;
        right: 1.5rem;
        bottom: 1.5rem;
        width: 48px;
        height: 48px;
        border-radius: 9999px;
        background: linear-gradient(135deg, #6366F1, #4F46E5);
        color: #fff;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 10px 30px rgba(79,70,229,0.18);
        border: none;
        cursor: pointer;
        z-index: 60; /* Above header (z-50) */
        opacity: 0;
        visibility: hidden;
        transform: translateY(8px);
        transition: opacity 220ms ease, transform 220ms ease, visibility 220ms;
    }
    #back-to-top:focus { outline: 3px solid rgba(99,102,241,0.25); }
    #back-to-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
    #back-to-top:hover { transform: translateY(-3px) scale(1.03); }

    /* Navbar auto-hide on mobile */
@media (max-width: 720px) {
  #main-navbar.navbar-hidden {
    transform: translateY(-100%);
    transition: transform 0.3s cubic-bezier(.4,0,.2,1);
  }
}