:root {
            --primary-bg: #4834d4;
            --secondary-bg: #3d2ab7;
            --text-light: #ffffff;
            --text-dark: #333;
        }




        .promo-section {
            width: 100%;
            /* max-width: 1200px; */
            /* background-color: #fd761c; */
            border-radius: 40px;
            padding: 20px 0px;
             background: 
    linear-gradient(rgba(253, 118, 28, 0.9), rgba(253, 118, 28, 0.5)),
    url('../img/bg/5.jpg') no-repeat center center;
  background-size: cover; 
  background-position: center;
  background-attachment: fixed;
        }

        .promo-content {
            display: grid;
            grid-template-columns: 1fr 1fr;
            align-items: center;
            gap: 3rem;
        }

        /* --- Text Content --- */
        .text-content {
            padding-right: 0rem;
        }

        .text-content h1 {
            font-size: 44px;
            line-height: 1.2;
            font-weight: 500;
            margin-bottom: 1rem; 
            color: #1a1a1a;
        }

        .text-content p {
            font-size: 20px;
            line-height: 1.6;
            margin-bottom: 1.5rem; 
            color: #1a1a1a;
        }

        .download-buttons {
            display: flex;
            gap: 1rem;
        }

        .btn-d {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            padding: 0.8rem 1.5rem;
            background-color: #0a0a0a;
            border-radius: 10px;
            color: #fff;
            text-decoration: none;
            font-size: 16px; 
            font-weight: 500;
            line-height: 1.2;
            transition: transform 0.2s ease;
        }

        .btn-d:hover {
            transform: translateY(-3px);
            color: #fff;
            background-color: #FF5722;
        }

        .btn-d i {
            font-size: 2rem;
            color: #fff;
        }

        .btn-d b {
            font-size: 1rem;
            color: #fff;
        }

        /* --- Phone Image Mockups --- */
        .phones-container {
            /* position: relative;
            height: 650px; 
            display: flex;
            align-items: center;
            justify-content: center; */
        }

        .phone-mockup {
            /* position: absolute; */
            transition: transform 0.3s ease;
        }
        
        .phone-mockup img {
            width: 100%;
            height: auto;
        }

        .phone-front {
            width: 300px; /* Adjust width based on your image */
            z-index: 10;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
        }

        .phone-back {
            width: 100%; 
            z-index: 5;
            /* right: 120px;
            top: 50%;
            transform: translateY(-50%) scale(0.95); */
        }

        /* --- Responsive Design --- */
        @media (max-width: 1024px) {
            .promo-content {
                grid-template-columns: 1fr;
                text-align: center;
            }
            .text-content {
                padding-right: 0;
                margin-bottom: 3rem;
            }
            .download-buttons {
                justify-content: center;
            }
            .phones-container {
                height: 550px;
                transform: scale(0.9);
                margin-top: -50px;
            }
        }

        @media (max-width: 768px) {

            .promo-section {
                padding: 2rem;
            }
            .text-content h1 {
                font-size: 2.2rem;
            }
            .download-buttons {
                flex-direction: column;
                align-items: center;
            }
            .phones-container {
                transform: scale(0.8);
                height: 480px;
                margin-top: -80px;
            }
        }

        @media (max-width: 480px) {
            .phones-container {
                transform: scale(0.7);
                height: 350px;
                margin-top: -80px;
            }
        }
        @media (max-width: 360px) {
            .phones-container {
                transform: scale(0.6);
                height: 300px;
                margin-top: -60px;
            }
        }