/* Reset and Base Styles */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html, body {
            height: 100%;
            margin: 0;
            width: 100%;
            overflow: hidden;
            background-color: #1a0c03;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
            text-align: center;
        }

        /* Background image with fade-in effect */
        .bg-img {
            background-image: url(images/largeImg.jpeg);
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center;
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0;
            left: 0;
            z-index: 1;
            transition: opacity 0.8s ease-in-out;
        }

        .content-wrapper {
            position: relative;
            z-index: 10;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .main-content {
            flex: 0.6;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 2rem;
        }

        .inner-container {
            display: flex;
            align-items: center;
            max-width: 1000px;
            width: 100%;
        }

        .logo-section {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .logo {
            width: 220px;
            height: 230px;
            object-fit: contain;
        }

        .text-section {
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
        }

        .des {
            color: #d6d6d6;
            line-height: 34px;
            text-align: justify;
            font-weight: 200;
            text-align: center;
        }

        .des-text {
            font-size: 18px;
        }

        .des-secondary {
            font-size: 18px;
        }

        .fw-bolder {
            font-weight: 700;
            color: #fff;
        }

        .fw-bold {
            font-weight: 600;
            color: #fff;
            text-decoration: none;
        }

        .fw-bold:hover {
            color: #fff;
            text-decoration: none;
        }

        .footer {
            padding: 2rem;
            display: flex;
            justify-content: center;
        }

        .footer-des {
            border-radius: 22px;
            background: linear-gradient(90deg, #852 0%, #6C2C13 25%, #AD7A25 75%, #8B5720 100%);
            text-align: center;
            color: #fff;
            font-size: 18px;
            font-weight: 300;
            padding: 8px 2rem;
            width: 100%;
            max-width:1000px;
        }

        /* Desktop: 1200px and above */
        @media (min-width: 1200px) {
            .inner-container {
                gap: 3rem;
            }
            
          
            
            .text-section {
                flex: 1;
                padding-left: 2rem;
            }
            
            .des {
                text-align: start;

            }
        }

        /* Laptop: 992px to 1199px */
        @media (min-width: 1025px) and (max-width: 1199px) {
            .bg-img {
                background-image: url(images/largeImg.jpeg);
            }
            
            .inner-container {
                text-align: center;
                gap: 2rem;
            }
            
            .logo {
                width: 180px;
                height: 190px;
            }
            
            .des-text, .des-secondary {
                font-size: 18px;
                line-height: 30px;
            text-align: start;
            }
            
            .footer-des {
                font-size: 18px;
            }
        }

        /* Tablet Portrait: 768px to 991px */
        @media (min-width: 768px) and (max-width: 1024px) {
            .bg-img {
                background-image: url(images/tabImg.jpeg);
            }
            
            .inner-container {
                gap: 1.5rem;
                max-width: 850px;
                flex-direction: column;
            }
            
            .logo {
                width: 160px;
                height: 170px;
            }
            
            .des-text, .des-secondary {
                font-size: 18px;
                line-height: 30px;
                text-align: center;
            }
            
            .footer-des {
                font-size: 18px;
                padding: 1rem;
            }
            
            .main-content {
                padding: 2.5rem;
                flex: 0.6;
            }
            
            .footer {
                padding: 2.5rem;
            }
        }

        /* Tablet Landscape: 768px to 1024px in landscape */
        /* @media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
            .bg-img {
                background-image: url(images/largeImg.jpeg);
                height: 130%;
            }
            
            .main-content {
                padding: 1rem;
                flex: 0.7;
            }
            
            .inner-container {
                flex-direction: row;
                gap: 2rem;
                align-items: center;
            }
            
            .logo-section {
                flex: 0 0 200px;
            }
            
            .logo {
                width: 140px;
                height: 150px;
            }
            
            .text-section {
                flex: 1;
                gap: 1rem;
            }
            
            .des-text, .des-secondary {
                font-size: 18px;
                line-height: 30px;
                text-align: left;
            }
            
            .footer {
                padding: 1rem;
            }
            
            .footer-des {
                font-size: 14px;
                padding: 0.8rem 1.5rem;
            }
        } */

        /* Mobile Portrait: up to 767px */
        @media (max-width: 767px) {
            .bg-img {
                background-image: url(images/mobileImg.jpeg);
            }
            
            .inner-container {
                flex-direction: column;
                text-align: center;
                gap: 1rem;
            }
            .text-section {
    gap: 1rem;
}
            .logo {
                width: 120px;
                height: 130px;
            }
            
            .des-text, .des-secondary {
                font-size: 14px;
                line-height: 22px;
            }
            
            .footer-des {
                font-size: 14px;
                padding: 0.8rem 1rem;
            }
            
            .main-content {
                padding: 2rem;
                flex: 0.5;
            }
            
            .footer {
                padding: 2rem;
            }
        }

        /* Mobile Landscape: up to 767px in landscape */
        @media (max-width: 1024px) and (orientation: landscape) {
            .bg-img {
                background-image: url(images/largeImg.jpeg);
                 height: 130%;
            }
            
            .main-content {
                padding: 0.5rem 2rem;
                flex: 0.7;
            }
            
            .inner-container {
                flex-direction: row;
                gap: 1rem;
                align-items: center;
            }
            
            .logo-section {
                flex: 0 0 120px;
            }
            
            .logo {
                width: 100px;
                height: 110px;
            }
            
            .text-section {
                flex: 1;
                gap: 0.8rem;
            }
            
            .des-text, .des-secondary {
                font-size: 14px;
                line-height: 24px;
                text-align: left;
            }
            
            .footer {
                padding: 0.5rem 2rem;
            }
            
            .footer-des {
                font-size: 12px;
                padding: 0.6rem 1rem;
                border-radius: 15px;
            }
        }
     @media (max-width: 767px) and (max-height:320px) and (orientation: landscape) {
        .bg-img{
            height: 130%;
        }
     } 
     @media (max-width: 767px) and (max-height:240px) and (orientation: landscape) {
        html, body{
            overflow: scroll;
        }
     }
        /* Very small mobile screens */
        @media (max-width: 520px) {
                 .bg-img {
                background-image: url(images/mini-screen.jpeg);
            }
            .logo {
                width: 100px;
                height: 110px;
            }
        .inner-container{
            margin: 0;
        }
         .main-content {
                padding: 1rem 2rem;
            }
            .footer {
                padding: 2rem;
            }
            .footer-des {
                font-size: 12px;
            }
        }

        /* Extra small mobile screens */
        @media (max-width: 350px) {
               .bg-img {
                background-image: url(images/mini-screen.jpeg);
            }
            .main-content {
               padding: 1rem 2rem;
            }
            
            .logo {
                width: 90px;
                height: 100px;
            }
            
            .des-text, .des-secondary {
                font-size: 14px;
                line-height: 20px;
            }
            .footer {
                padding: 1rem 2rem;
            }
            .footer-des {
                font-size: 12px;
                padding: 0.6rem 0.8rem;
            }
        }

      
 /* Prevent any scrolling on very short screens */
        @media (max-height: 500px) {
            .main-content {
                padding-top: 0.5rem;
                padding-bottom: 0.5rem;
                flex: 0.7;
            }
            
            .text-section {
                gap: 0.5rem;
            }
            
            .footer {
                padding-top: 0.5rem;
                padding-bottom: 0.5rem;
            }
        }
        @media (max-height: 300px) {
            html, body{
                overflow: scroll;
            }
        }