/* GOOGLE FONTS */
         @import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;700&display=swap');
         @import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap');

         /* BASE & BACKGROUND STYLES */
         body, html {
            height: 100%;
            margin: 0;
            padding: 0;
         }

         body {
            font-family: 'Roboto Mono', monospace;
            background-color: #000000;
            color: #FDE047;
            background-image: url('images/Vector.png');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            overflow-x: hidden; /* Prevent horizontal scroll */
         }

         /* Page Content Wrapper: Use min-height to allow content to grow on mobile */
         #page-content {
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.6s ease-in 1s; /* Fade-in after loader animation */
            min-height: 100vh; /* Changed from height to min-height */
         }

         body.loaded #page-content {
            opacity: 1;
            visibility: visible;
         }

         /* CUSTOM BUTTON STYLE */
         .custom-button {
            background-color: #FDE047;
            color: #000000;
            clip-path: polygon(10% 0, 100% 0, 100% 70%, 90% 100%, 0 100%, 0 30%);
            transition: all 0.2s ease-in-out;
            border: none;
            cursor: pointer;
         }
         .custom-button:hover {
            transform: scale(1.05);
         }

         /* RESPONSIVE STYLES */
         @media (min-width: 768px) {
            body {
               background-size: contain;
               overflow: hidden; /* Re-apply overflow:hidden ONLY for desktop */
            }
            #page-content {
               height: 100vh; /* Use fixed height on desktop */
            }
         }

         /* CUSTOM FONT DEFINITIONS */
         @font-face {
            font-family: 'Wornout';
            src: url('fonts/Wornout.eot');
            src: url('fonts/Wornout.eot?#iefix') format('embedded-opentype'),
                 url('fonts/Wornout.woff2') format('woff2'),
                 url('fonts/Wornout.woff') format('woff'),
                 url('fonts/Wornout.otf') format('opentype');
            font-weight: normal;
            font-style: normal;
            font-display: swap;
         }

         .wornout-font {
            font-family: 'Wornout', sans-serif;
         }

         .chakra-font {
            font-family: "Chakra Petch", sans-serif;
         }

         /* --- LOADER ANIMATION --- */
         .loader-wrapper {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999;
            display: flex; justify-content: center; align-items: center; overflow: hidden;
         }
         .loader {
            display: flex; position: relative; justify-content: center; align-items: center;
         }
         .bar {
            width: 100px; height: 120vh; transform: skewX(-20deg);
            transition: transform 1s cubic-bezier(0.86, 0, 0.07, 1);
         }

         /* --- Styles for Mobile Screens ONLY --- */
        @media (max-width: 767px) {
            .bar {
                width: 15vw; /* 15% of the viewport width */
                height: 120vh;
                transform: skewX(-20deg);
                transition: transform 1s cubic-bezier(0.86, 0, 0.07, 1);
            }
        }

        /* --- Your Original Styles for Tablet & Desktop --- */
        @media (min-width: 768px) {
            .bar {
                width: 100px;
                height: 120vh;
                transform: skewX(-20deg);
                transition: transform 1s cubic-bezier(0.86, 0, 0.07, 1);
            }
        }

         .bar1 { background-color: #AD2020; transition-delay: 0s; }
         .bar2 { background-color: #C5411A; transition-delay: 0.1s; }
         .bar3 { background-color: #BA2B2C; transition-delay: 0.2s; }
         .bar4 { background-color: #8B1A2C; transition-delay: 0.1s; }
         .bar5 { background-color: #AC1E1C; transition-delay: 0s; }
         .loader-logo {
            position: absolute; z-index: 10000; width: 600px; max-width: 80%;
            opacity: 1; transition: opacity 0.5s ease-out 1s;
         }
         body.loaded .bar1, body.loaded .bar2, body.loaded .bar3 { transform: translateY(-110%) skewX(-20deg); }
         body.loaded .bar4, body.loaded .bar5 { transform: translateY(110%) skewX(-20deg); }
         body.loaded .loader-logo { opacity: 0; }
         body.loaded .loader-wrapper { visibility: hidden; transition: visibility 0s 1.5s; }

         /* --- CONTACT POPUP STYLES --- */
         .popup-overlay {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background-color: rgba(0, 0, 0, 0.8); z-index: 10001;
            display: flex; justify-content: center; align-items: center;
            opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease;
         }
         .popup-overlay.active { opacity: 1; visibility: visible; }
         .popup-content {
            background-color: #dcb343; color: #000; position: relative;
            width: 90%; max-width: 600px !important;
            clip-path: polygon(15% 0, 100% 0, 100% 70%, 80% 100%, 0 100%, 0 30%);
         }
         .popup-form input {
            background: transparent; border: 1px solid #000; color: #000;
            padding: 0.75rem; width: 100%;
         }
         .popup-form input::placeholder { color: #000; opacity: 0.8; }
         .popup-form button {
            background-color: #000; color: #dcb343; padding: 0.75rem;
            border: 1px solid #000; width: 100%; cursor: pointer;
         }

         /* --- NEW: CUSTOM ALERT STYLES --- */
         .custom-alert-popup {
            display: none; /* Hidden by default */
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: #FDE047;
            color: #000000;
            padding: 30px 40px;
            z-index: 10002; /* Ensures it's on top */
            text-align: center;
            font-weight: bold;
            clip-path: polygon(10% 0, 100% 0, 100% 70%, 90% 100%, 0 100%, 0 30%);
         }