.hero {
            position: relative;
            height: 70vh;
            width: 100%;
            background-image: url("/asset/luxus/46129.jpg");
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;

            display: flex;
            justify-content: flex-start;
            align-items: flex-end;
            padding: 60px;
        }

        .overlay {
            position: absolute;
            inset: 0;
            background: rgba(0,0,0,0.35);
        }

        .hero-content {
            position: relative;
            z-index: 2;
            text-align: left;
        }

        .hero-content h1 {
            font-family: 'Cinzel', serif;
            color: #fff;
            font-size: 40px;
            letter-spacing: 3px;
            font-weight: 400;
        }

        /* ===== RESPONSIVE FOR PHONE ===== */
        @media (max-width: 768px) {
            .hero {
                height: 50vh;
                padding: 25px;
                align-items: flex-end;
                justify-content: flex-start;
            }

            .hero-content h1 {
                font-size: 24px;
                letter-spacing: 2px;
            }
        }

        /* Extra small phones (below 480px) */
        @media (max-width: 480px) {
            .hero {
                height: 40vh;
                padding: 20px;
            }

            .hero-content h1 {
                font-size: 20px;
                letter-spacing: 1.5px;
            }
        }