/* === RESPONSIVE FIX (Mobile ke liye) === */





/* === RESPONSIVE DESIGN === */
@media (max-width: 768px) {
    .hero-title { font-size: 3rem; }
    .hero-subtitle { font-size: 1.2rem; }
    section { padding: 60px 5%; }
    .section-title { font-size: 2rem; }
    /* Force services to stack on mobile */
    .service-row, .service-row.reverse {
        flex-direction: column;
    }
    .service-img, .service-text {
        width: 100%;
    }
    .service-img {
        min-height: 250px;
    }

/* === RESPONSIVE DESIGN UPDATE === */

    .hero-split {
        flex-direction: column;
        text-align: center;
        gap: 30px;
    }
    
    .hero-content {
        text-align: center;
    }


    .hero-video-wrapper {
        justify-content: center;
        width: 100%;
    }

/* === MOBILE MENU MAGIC === */
    .hamburger {
        display: block; /* Mobile par menu icon dikhaye */
        
    }

    /* Cross (X) animation jab menu open ho */
    .hamburger.active .bar:nth-child(2) { opacity: 0; }
    .hamburger.active .bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
    .hamburger.active .bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

    /* Menu Container Mobile par */
    .nav-links {
        position: fixed;
        right: -100%; /* Screen ke bahar chupaya hai */
        top: 65px; /* Header ki height ke theek niche */
        gap: 0;
        flex-direction: column;
        background-color: #0a0a0aea; /* Dark premium theme */
        width: 70%;
        text-align: center;
        transition: 0.4s ease-in-out;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.9);
        padding: 20px 0 40px 0;
        border-bottom: 1px solid #222;
        border-radius: 0 0 0 20px;
        display: flex; /* Imp: purane 'none' ko override karega */
    }

    .nav-links.active {
        right: 0; /* Click hone par screen par aayega */
    }

    /* Links ki styling (Dots ka koi chakkar nahi) */
    .nav-links a {
        color: #ffffff !important; 
        font-size: 0.7rem; /* Bada aur clear text */
        padding: 20px 0;
        display: block; /* Click area bada karne ke liye */
        width: 100%;
    }
    .nav-links a:hover {
        color: #ffffff !important; 
        background-color: #f39c12; /* Hover par orange background */
        border-radius: 10px;
    }
    
    .logo { font-size: 0.9rem; }
}