/* --- MOBILE RESPONSIVE (Updated) --- */
@media (max-width: 768px) {
    
    /* Hero Section */
    .hero { 
        flex-direction: column-reverse; /* ဖုန်းပုံကို အပေါ်ပို့သည် */
        text-align: center; 
        padding-top: 40px; 
        gap: 30px;
    }
    
    .hero-text h1 { 
        font-size: 2rem; /* ဖုန်းမှာ စာလုံးမထပ်အောင် သေးသည် */
    }
    
    .hero-text { 
        padding-right: 0; 
        width: 100%;
    }
    
    .hero-img { 
        width: 80%; /* ပုံကို ဖုန်း Screen အပြည့်နီးပါး */
        max-width: 350px;
        margin: 0 auto;
    }

    /* Security Section */
    .security { 
        flex-direction: column; 
        text-align: center; 
        gap: 30px;
    }
    
    .sec-img { 
        font-size: 80px; /* ဖုန်းမှာ Icon သေးသည် */
    }
    
    .sec-list li { 
        justify-content: flex-start; /* စာသား ဘယ်ကပ် */
        text-align: left; 
    }
}

/* --- MOBILE HEADER FIX --- */
@media (max-width: 768px) {
    
    /* ၁။ Navbar အကွာအဝေးကို ကျဉ်းမယ် */
    #navbar {
        padding: 10px 15px; /* ဘေးဘောင် အကွာအဝေး လျှော့မယ် */
        height: auto;
        justify-content: space-between; /* ဘယ် ညာ ကပ်မယ် */
    }

    /* ၂။ အလယ်က Links တွေကို ဖုန်းမှာ ဖျောက်မယ် (နေရာမလောက်လို့ပါ) */
    .nav-links {
        display: none; 
    }

    /* ၃။ Logo ပုံနဲ့ စာသားကို ဆိုဒ်ညှိမယ် */
    .nav-logo {
        gap: 8px; /* ပုံနဲ့စာ ကြားအကွာအဝေး */
    }
    .nav-logo img {
        width: 35px; /* Logo ပုံကို သေးမယ် */
        height: 35px;
    }
    .nav-logo span {
        font-size: 14px; /* စာလုံးဆိုဒ် လျှော့မယ် */
        line-height: 1.2;
        max-width: 120px; /* စာရှည်ရင် အောက်ဆင်းအောင် */
    }

    /* ၄။ Download ခလုတ်ကို သေသပ်အောင် ပြင်မယ် */
    .nav-btn {
        padding: 8px 12px; /* ခလုတ်အကြီးကြီး မဖြစ်အောင် */
        font-size: 11px;   /* စာလုံးဆိုဒ် */
        height: auto;
        white-space: nowrap; /* စာတစ်ကြောင်းတည်း ဖြစ်စေရန် */
    }
}