/* ====== */
     
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --primary: #028b45;         
    --primary-hover: #026e36;  
    --primary-light: #10b981;   
    --slate-dark: #0f172a;
    --slate-text: #334155;
    --slate-light: #475569;
    --bg-gray: #f8fafc;
    --white: #ffffff;
    --shadow-premium: 0 10px 30px rgba(15, 23, 42, 0.04);
}

body {
    font-family: "Plus Jakarta Sans", "Inter", "Pyidaungsu", "Noto Sans Myanmar", -apple-system, sans-serif;
    line-height: 1.6;
    color: var(--slate-text);
    background-color: var(--bg-gray);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
/* ==========================================================================
    Navigation Bar (Fixed Version)
   ========================================================================== */
.navbar {
    background-color: var(--white, #ffffff);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    padding: 12px 5%;
    display: flex;                  /* ပုံသေ Flexbox သုံးရပါမည် */
    justify-content: space-between; /* Logo နှင့် Links များကို ဘယ်/ညာ ခွဲထုတ်ရန် */
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 1000;
}

/* Nav Links များကို ဘေးတိုက် တန်းစီစေရန် */
.nav-links {
    list-style: none;
    display: flex;                  /* ၎င်းတို့ကို အောက်မဆင်းဘဲ ဘေးတိုက်ဖြစ်စေရန် */
    gap: 25px;
    margin: 0;
    padding: 0;
}

.nav-links li {
    display: inline-block;          /* List Item တစ်ခုချင်းစီ ဘေးတိုက်ဖြစ်စေရန် */
}

.nav-links a {
    text-decoration: none;
    color: var(--slate-light, #475569);
    font-weight: 500;
    font-size: 15px;
    padding: 5px 0;
    display: block;
}


/* Navbar Logo & Text */
        .logo-container {
            display: flex;
            align-items: center;
            text-decoration: none;
            gap: 12px;
        }

        .logo-img {
            height: 45px;
            width: auto;
            object-fit: contain;
        }

        .logo-text {
            font-family: 'Plus Jakarta Sans', sans-serif;
            font-size: 16px;
            font-weight: 700;
            color: #002060; /* Logo Main Navy Blue */
            line-height: 1.2;
            display: inline-block;
        }

        /* Nav Links Hover Effect */
        .nav-links li a:hover {
            color: #0070C0; /* Logo Ocean Blue */
        }

        /* Hero Text Specific Custom Highlight */
        .hero-text-side h1 span {
            color: #0070C0; /* Japan စာသားကို Ocean Blue ပြောင်းလဲခြင်း */
        }

        /* Buttons Custom Styling */
        .btn-primary, .btn-enroll, .btn-cta-action {
            background-color: #002060 !important; /* Navy Blue */
            color: #ffffff !important;
            border: none;
            transition: background 0.3s ease;
        }

        .btn-primary:hover, .btn-enroll:hover, .btn-cta-action:hover {
            background-color: #0070C0 !important; /* Hover လုပ်လျှင် Ocean Blue ပြောင်းမည် */
        }

        .btn-inline, .btn-details-link, .btn-tab-action, .btn-highlight-action {
            color: #002060 !important;
            font-weight: 600;
        }

        .btn-inline:hover, .btn-details-link:hover, .btn-tab-action:hover, .btn-highlight-action:hover {
            color: #0070C0 !important;
        }

        /* Icons & Badges Theme Color */
        .quote-icon, .class-features li i, .timeline-icon i, .footer-link-icon {
            color: #0070C0 !important; /* Ocean Blue အဖြစ် ပြောင်းလဲခြင်း */
        }

        .class-status-badge {
            background-color: #002060 !important; /* Navy Blue Badge */
            color: #ffffff;
        }

        .img-overlay-tag {
            background-color: rgba(0, 32, 96, 0.85) !important; /* Transparent Navy Blue */
            color: #ffffff;
        }

        /* Tabs Navigation Styling */
        .tab-item.active {
            border-bottom: 3px solid #002060 !important;
            color: #002060 !important;
            font-weight: 700;
        }

        .tab-item:hover {
            color: #0070C0 !important;
        }

        /* Section Title Lines */
        .title-line {
            background-color: #0070C0 !important;
            height: 3px;
            width: 60px;
            margin-top: 10px;
        }

 .blogpage-banner { 
            background: linear-gradient(rgba(15, 23, 42, 0.75), rgba(2, 139, 69, 0.45)), url('https://images.unsplash.com/photo-1503899036084-c55cdd92da26?q=80&w=1200&auto=format&fit=crop'); 
            background-size: cover; 
            background-position: center; 
            padding: 70px 5%; 
            text-align: center; 
            color: #ffffff; 
        }
        .blogpage-banner h1 { font-size: 32px; font-weight: 700; margin-bottom: 8px; letter-spacing: 0.5px; }
        .blogpage-banner p { color: #cbd5e1; font-size: 15px; }
        
        .section-padding { padding: 55px 5%; }
        .container { max-width: 1150px; margin: 0 auto; }

        /* ==========================================================================
           Blog Grid Layout
           ========================================================================== */
        .blog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 30px; }
        .blog-card { background: #ffffff; border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-premium); border: 1px solid #e2e8f0; display: flex; flex-direction: column; }
        .blog-img { height: 210px; overflow: hidden; }
        .blog-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
        .blog-card:hover .blog-img img { transform: scale(1.06); }
        .blog-content { padding: 24px; flex-grow: 1; display: flex; flex-direction: column; justify-content: space-between; }
        .blog-date { font-size: 12.5px; color: #94a3b8; font-weight: 600; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.5px; }
        .blog-content h3 { font-size: 19px; color: #0f172a; margin-bottom: 12px; line-height: 1.4; font-weight: 700; transition: color 0.3s; }
        .blog-card:hover .blog-content h3 { color: var(--primary); }
        .blog-content p { font-size: 14px; color: #475569; text-align: justify; margin-bottom: 20px; line-height: 1.6; }
        .blog-more { color: var(--primary); text-decoration: none; font-size: 14px; font-weight: 700; display: inline-flex; align-items: center; gap: 8px; transition: color 0.3s; }
        .blog-more i { transition: transform 0.3s; }
        .blog-more:hover { color: var(--primary-hover); }
        .blog-more:hover i { transform: translateX(5px); }
        /* Mobile Menu Toggle Button */
        .menu-toggle {
            display: none;
            flex-direction: column;
            justify-content: space-between;
            width: 25px;
            height: 19px;
            cursor: pointer;
            background: none;
            border: none;
            padding: 0;
            z-index: 1001;
        }
        .menu-toggle span {
            display: block;
            width: 100%;
            height: 3px;
            background-color: #333;
            border-radius: 2px;
            transition: all 0.3s ease-in-out;
        }
        .menu-toggle.active span:nth-child(1) { transform: translateY(8px) rotate(45deg); background-color: var(--primary-light); }
        .menu-toggle.active span:nth-child(2) { opacity: 0; transform: translateX(-20px); }
        .menu-toggle.active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); background-color: var(--primary-light); }

        /* ==========================================================================
           Sticky Social Platform Buttons
           ========================================================================== */
        .social-sticky-bar {
            position: fixed;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            z-index: 999;
            display: flex;
            flex-direction: column;
        }
        .social-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 50px;
            height: 50px;
            color: #fff;
            text-decoration: none;
            font-size: 20px;
            transition: all 0.3s ease;
            border-radius: 0 8px 8px 0; /*  */
            margin-bottom: 5px;
            box-shadow: 2px 2px 10px rgba(0,0,0,0.15);
        }
        .social-btn:hover { width: 65px; padding-left: 15px; }
        .fb-color { background-color: #1877f2; }
        .viber-color { background-color: #7360f2; }
        .messenger-color { background-color: #0084ff; }
        .tg-color { background-color: #229ED9; }
        .yt-color { background-color: #FF0000; }

        /* ==========================================================================
           Hero Section
           ========================================================================== */
        .hero-section {
            position: relative;
            height: 520px;
            display: flex;
            align-items: center;
            padding: 0 5%;
            overflow: hidden;
            background-color: #111;
        }
        .hero-bg-container {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
        }
        .hero-bg-slide {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            opacity: 0;
            transition: opacity 1.5s ease-in-out;
        }
        .hero-bg-slide.fade-active { opacity: 1; }
        .hero-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, rgba(15, 23, 42, 0.85) 40%, rgba(0, 0, 0, 0.4) 100%);
            z-index: 2;
        }
        .hero-text-side {
            position: relative;
            z-index: 3;
            max-width: 650px;
            color: var(--white);
        }
        .hero-text-side h1 {
            font-size: 40px;
            font-weight: 700;
            line-height: 1.4;
            margin-bottom: 18px;
            text-shadow: 0 2px 10px rgba(0,0,0,0.3);
        }
        .hero-text-side h1 span { color: var(--primary-light); }
        .hero-text-side p { 
            font-size: 16.5px; 
            color: #f1f5f9; 
            margin-bottom: 30px;
            text-shadow: 0 1px 5px rgba(0,0,0,0.3);
        }

        /* Call To Action Button Global */
        .btn-primary {
            display: inline-block;
            background-color: var(--primary);
            color: #fff;
            padding: 12px 32px;
            border-radius: 30px;
            text-decoration: none;
            font-weight: 600;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(230,0,51,0.3);
        }
        .btn-primary:hover {
            background-color: var(--primary-hover);
            transform: translateY(-2px);
        }

        /* ==========================================================================
           Section Global Settings
           ========================================================================== */
        .section-padding { 
            padding: 80px 5%;
            position: relative; 
        }
        .section-content { position: relative; z-index: 2; max-width: 1200px; margin: 0 auto; }
        
        .section-title { 
            font-size: 30px; 
            text-align: center; 
            margin-bottom: 45px;
            font-weight: 700; 
            position: relative;
        }
        .section-title::after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            width: 50px;
            height: 3px;
            background-color: var(--primary);
            border-radius: 2px;
        }
        .light-text { color: var(--white); }
        .dark-text { color: var(--slate-dark); }

        /* Background Design Settings */
        #about { background: linear-gradient(135deg, #f0fdf4 0%, #e0f2fe 100%); }
        #services { background-color: var(--white); }
        #cta { 
            background: linear-gradient(rgba(15, 23, 42, 0.9), rgba(15, 23, 42, 0.95)), url('');
            background-size: cover;
            background-position: center;
            text-align: center; 
            padding: 80px 5%; 
        }

        /* ==========================================================================
           About Section
           ========================================================================== */
        .about-grid { 
            display: flex; 
            flex-wrap: wrap; 
            gap: 40px; 
            align-items: center; 
        }
        .about-text { 
            flex: 1; 
            min-width: 320px; 
        }
        .about-text p { 
            font-size: 16px; 
            margin-bottom: 16px; 
            color: var(--slate-text); 
            text-align: justify; 
            line-height: 1.8;
        }
        .about-image {
            flex: 1;
            min-width: 320px;
            display: flex;
            justify-content: center;
        }
        .about-image img {
            width: 100%;
            max-width: 550px;
            height: 360px;
            object-fit: cover;
            border-radius: 16px;
            box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
            border: 4px solid var(--white);
        }

        /* Solid Button Style */
.btn-inline {
    display: inline-block;
    padding: 8px 20px;
    background-color: #028b45; /* Logo ရဲ့ အစိမ်းရောင် */
    color: var(--white, #ffffff) !important; /* စာသားအရောင် အဖြူ */
    text-decoration: none;
    border-radius: 4px; /* ထောင့်လေးတွေ အနည်းငယ် ဝိုင်းရန် */
    font-weight: 500;
    font-size: 14px;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

/* Hover Effect - မောက်စ်တင်လိုက်ရင် ဖြစ်မယ့်ပုံစံ */
.btn-inline:hover {
    background-color: #026d36; /* ပိုရင့်တဲ့ အစိမ်းရောင် ပြောင်းလဲရန် */
    transform: translateY(-1px); /* အပေါ်ကို အနည်းငယ် ကြွတက်လာစေရန် */
}
        /* ==========================================================================
           Welcome Section (Split Layout) Styles
           ========================================================================== */
       .welcome-section {
    background-color: var(--white, #ffffff);
    padding: 55px 5%; /* အပေါ်အောက် Padding ကို ကျစ်လစ်အောင် လျှော့ချထားသည် */
}
.welcome-split {
    display: flex;
    gap: 45px; /* ဘယ်ညာ နှစ်ဖက်ကြား အကွာအဝေးကို ပိုကျစ်လစ်စေရန် 60px မှ 45px သို့ ညှိထားသည် */
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}
.welcome-left {
    flex: 1.2;
}

/* ၁။ Agency Title ကို ကုမ္ပဏီအစိမ်းရောင် ပြောင်းလဲခြင်း */
.agency-title {
    color: #028b45; /* var(--primary) မှ ကုမ္ပဏီအစိမ်းရောင်သို့ ပြောင်းလဲမှု */
    font-size: 13.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    display: block;
    margin-bottom: 6px;
}
.welcome-left h2 {
    font-family: "Mozilla Headline", sans-serif;
    font-size: 30px; /* စာလုံးအရွယ်အစားကို ကျစ်လစ်အောင် အနည်းငယ် ညှိထားသည် */
    color: var(--slate-dark);
    font-weight: 700;
    margin-bottom: 15px;
    line-height: 1.3;
}
.main-para {
    font-size: 15px; /* ဖတ်ရပိုသက်သာအောင် 15px သို့ ညှိထားသည် */
    color: var(--slate-light, #475569);
    line-height: 1.7;
    text-align: justify;
}
.welcome-right {
    flex: 0.8;
}

/* ၂။ Quote Box ကို ပိုမိုလှပပြီး ကျစ်လစ်အောင် ပြင်ဆင်ခြင်း */
.quote-box {
    background-color: rgba(2, 139, 69, 0.03); /* အစိမ်းရောင်ခပ်ဖျော့ဖျော့ နောက်ခံပြောင်းလဲမှု */
    border-left: 4px solid #028b45; /* ကုမ္ပဏီအစိမ်းရောင်လိုင်း */
    padding: 25px 25px 25px 45px; /* နေရာလွတ်များကို ကျစ်လစ်အောင် ချုံ့ထားသည် */
    border-radius: 0 16px 16px 0;
    position: relative;
    box-shadow: 0 4px 20px rgba(2, 139, 69, 0.02);
    transition: transform 0.3s ease;
}
.quote-box:hover {
    transform: translateY(-2px);
}

/* Quote Icon ကို စာသားနောက်ကွယ်မှာ ပေါ့ပေါ့ပါးပါးလေး ပေါ်နေစေရန် */
.quote-icon {
    font-size: 24px;
    color: rgba(2, 139, 69, 0.12); /* စာသားဖတ်ရမရှုပ်အောင် ခပ်မှိန်မှိန်လေး ပြောင်းလဲထားသည် */
    position: absolute;
    top: 20px; 
    left: 15px;
    z-index: 1;
}
.quote-box p {
    font-family: "Mozilla Headline", sans-serif;
    font-size: 15.5px; /* ကျစ်လစ်သော စာလုံးအရွယ်အစား */
    font-weight: 600;
    line-height: 1.6;
    color: #1e293b;
    position: relative;
    z-index: 2;
    text-align: justify;
    margin: 0;
}

/* --- Mobile Responsive (ဖုန်းများပေါ်တွင် ပုံမပျက်စေရန်) --- */
@media (max-width: 768px) {
    .welcome-section {
        padding: 40px 20px;
    }
    .welcome-split {
        flex-direction: column; /* ဖုန်းပေါ်တွင် ဘယ်ညာမှ အပေါ်အောက်သို့ ပြောင်းလဲခြင်း */
        gap: 30px;
    }
    .welcome-left h2 {
        font-size: 25px;
    }
    .quote-box {
        padding: 20px 20px 20px 35px;
    }
}

        /* ==========================================================================
           Training Class Highlight Styles
           ========================================================================== */
        #class-highlight {
            background-color: var(--bg-gray);
            padding: 30px 0;
        }
        .class-split-container {
            display: flex;
            gap: 30px;
            align-items: center;
        }
        .class-image-side {
            flex: 1;
        }
        .image-wrapper {
            position: relative;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 20px 40px rgba(15, 23, 42, 0.08);
        }
        .image-wrapper img {
            width: 100%;
            height: 400px;
            object-fit: cover;
            display: block;
            transition: transform 0.5s ease;
        }
        .image-wrapper:hover img {
            transform: scale(1.03);
        }
        .class-status-badge {
            position: absolute;
            top: 20px;
            left: 20px;
            background-color: #10b981;
            color: var(--white);
            padding: 6px 14px;
            border-radius: 30px;
            font-size: 13px;
            font-weight: 600;
            letter-spacing: 0.5px;
            box-shadow: 0 4px 10px rgba(16, 185, 129, 0.3);
        }
        .class-details-side {
            flex: 1.2;
        }
        .class-tag {
            color: var(--primary);
            font-size: 13px;
            font-weight: 700;
            letter-spacing: 1.5px;
            display: block;
            margin-bottom: 8px;
        }
        .class-details-side h2 {
            font-family: "Mozilla Headline", sans-serif;
            font-size: 32px;
            color: var(--slate-dark);
            font-weight: 700;
            line-height: 1.3;
            margin-bottom: 12px;
        }
        .class-meta {
            display: flex;
            gap: 20px;
            margin-bottom: 20px;
        }
        .class-meta span {
            font-size: 14px;
            color: var(--slate-light);
            font-weight: 500;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        .class-details-side p {
            font-size: 15.5px;
            color: var(--slate-light);
            line-height: 1.8;
            margin-bottom: 20px;
            text-align: justify;
        }
        .class-features {
            list-style: none;
            margin-bottom: 30px;
        }
        .class-features li {
            font-size: 15px;
            color: #1e293b;
            font-weight: 500;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .class-features li i {
            color: var(--primary);
            font-size: 16px;
        }
        .class-action-box {
            display: flex;
            align-items: center;
            gap: 25px;
        }
        .btn-enroll {
            background-color: var(--slate-dark);
            color: var(--white);
            padding: 14px 30px;
            border-radius: 12px;
            text-decoration: none;
            font-weight: 600;
            font-size: 15px;
            transition: all 0.3s ease;
            box-shadow: 0 10px 20px rgba(15, 23, 42, 0.1);
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .btn-enroll:hover {
            background-color: var(--primary);
            transform: translateY(-2px);
            box-shadow: 0 10px 20px rgba(230, 0, 51, 0.15);
        }
        .btn-details-link {
            color: var(--slate-light);
            text-decoration: none;
            font-weight: 600;
            font-size: 15px;
            transition: color 0.3s ease;
        }
        .btn-details-link:hover {
            color: var(--primary);
        }

        /* ==========================================================================
           Why Choose Us & License Section
           ========================================================================== */
     .why-choose-us { 
    /* ၁။ နောက်ခံပုံ ထည့်သွင်းခြင်း ( assets/images/bg.jpg နေရာတွင် မိမိပုံလမ်းကြောင်း အစားထိုးပါ ) */
    background: linear-gradient(rgba(15, 23, 42, 0.75), rgba(2, 139, 69, 0.45)), url('../images/slide89.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* Screen ဆွဲချရင် ပုံလေး ငြိမ်နေမည့် Effect */
    padding: 30px 5%; 
}

.why-header {
    text-align: center;
    margin-bottom: 35px; 
}

.why-header h2 {
    font-size: 28px; 
    margin-bottom: 6px;
    color: #ffffff; /* နောက်ခံအမှောင်မို့ စာသားကို အဖြူရောင်ပြောင်းပါသည် */
}

.license-text {
    color: #10b981; /* အမှောင်ထဲတွင် ပိုလင်းစေရန် အစိမ်းတောက်တောက်လေး သုံးထားပါသည် */
    font-weight: 600; 
    font-size: 14.5px;
    letter-spacing: 0.5px;
}

/* Timeline Layout Main Container */
.why-timeline {
    position: relative;
    max-width: 800px; 
    margin: 0 auto;
}

/* အချက်အလက်တစ်ခုချင်းစီ၏ ပုံစံ */
.timeline-item {
    display: flex;
    align-items: center; 
    gap: 20px; 
    margin-bottom: 20px; 
    position: relative;
    /* ၂။ Box ကို အလင်းပေါက် ပုံစံပြောင်းလဲခြင်း (ခေတ်မီ Glassmorphism Design) */
    background: rgba(255, 255, 255, 0.06); 
    backdrop-filter: blur(10px); /* အနောက်ကပုံကို ဝါးသွားစေသော Effect */
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 18px 25px; 
    border-radius: 12px;
    border-left: 4px solid #028b45; /* Company Logo အစိမ်းရောင်လိုင်း */
    transition: all 0.3s ease;
}

/* Hover Effect */
.timeline-item:hover {
    transform: translateX(4px); 
    background: rgba(255, 255, 255, 0.1); /*  */
    box-shadow: 0 8px 25px rgba(2, 139, 69, 0.2);
}

/* */
.timeline-icon {
    background-color: rgba(2, 139, 69, 0.2); 
    color: #10b981; 
    width: 48px; 
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px; 
    flex-shrink: 0; 
}

/*  */
.timeline-content {
    flex: 1;
}

.timeline-content h3 {
    font-size: 17px; 
    color: #ffffff; 
    margin-bottom: 4px; 
    font-weight: 700;
}

.timeline-content p {
    font-size: 14px; 
    color: #cbd5e1; 
    line-height: 1.5;
}

/* --- Mobile Responsive --- */
@media (max-width: 600px) {
    .why-choose-us { 
        padding: 40px 20px; 
        background-attachment: scroll; 
    }
    .timeline-item {
        gap: 15px;
        padding: 15px 20px;
    }
}
        /* ==========================================================================
           Our Vertical Tabs Service Layout
           ========================================================================== */
        /* --- Services Section --- */
.section-padding {
    padding: 30px 5%;
}

.section-title {
    text-align: center;
    margin-bottom: 35px;
}

.section-title h3 {
    font-size: 28px;
    color: var(--slate-dark);
    font-weight: 700;
}

/* Main Container  */
.services-tabs-container {
    display: flex;
    background: var(--white, #666278);
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
    min-height: 400px; 
    max-width: 1000px;
    margin: 0 auto;
}

/* Left Side: Tabs List */
.tabs-list {
    width: 28%;  
    background-color: #f8fafc;
    display: flex;
    flex-direction: column;
    border-right: 1px solid #e2e8f0;
}

.tab-item {
    padding: 16px 20px;
    cursor: pointer;
    font-weight: 600;
    font-size: 14.5px;
    color: #475569;
    transition: all 0.25s ease;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    gap: 12px; /*  */
    text-align: left;
}

.tab-item i {
    font-size: 16px;
    color: #64748b;
    transition: color 0.25s ease;
}

.tab-item:hover { 
    background-color: #f1f5f9; 
    color: #028b45;
}

.tab-item:hover i {
    color: #028b45;
}

/* Active ဖြစ်နေသော Tab - ကုမ္ပဏီအစိမ်းရောင်ပြောင်းလဲခြင်း */
.tab-item.active { 
    background-color: #ffffff; 
    color: #028b45; 
    border-left: 4px solid #028b45; /* ဘယ်ဘက်က လိုင်းဆန်းလေး */
}

.tab-item.active i {
    color: #028b45;
}

/* Right Side: Content Area */
.tabs-content-area {
    width: 72%;
    padding: 40px; /* Padding ကို 50px မှ 40px သို့ ကျစ်လစ်အောင် ချုံ့ထားသည် */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.tab-panel { 
    display: none; 
    animation: tabFadeIn 0.4s ease-out; 
}

.tab-panel.active { 
    display: block; 
}

@keyframes tabFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.tab-panel h3 { 
    font-size: 23px; 
    color: var(--slate-dark); 
    margin-bottom: 15px; 
    font-weight: 700;
}

.tab-panel p { 
    font-size: 14.5px; 
    color: #4b5563; 
    margin-bottom: 15px; 
    line-height: 1.7; 
}

/* Button အသစ် - ညာဘက်အောက်တွင် ကပ်မနေတော့ဘဲ ကျစ်လစ်စွာ နေရာချထားသည် */
.btn-tab-action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 15px;
    padding: 10px 24px;
    background-color: #028b45; /* ကုမ္ပဏီအစိမ်းရောင် */
    color: #ffffff !important;
    text-decoration: none;
    font-weight: 600;
    border-radius: 8px;
    font-size: 14px;
    align-self: flex-start; /* စာသားအရှည်အတိုင်းပဲ ခလုတ်ဖြစ်စေရန် */
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(2, 139, 69, 0.15);
}

.btn-tab-action:hover {
    background-color: #026d36;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(2, 139, 69, 0.25);
}

.btn-tab-action i {
    font-size: 12px;
    transition: transform 0.3s ease;
}

.btn-tab-action:hover i {
    transform: translateX(3px);
}

/* --- Mobile Responsive (ဖုန်းများနှင့် တက်ဘလက်များအတွက်) --- */
@media (max-width: 768px) {
    .services-tabs-container {
        flex-direction: column; /* ဘယ်ညာမှ အပေါ်အောက်သို့ ပြောင်းလဲခြင်း */
        min-height: auto;
    }

    .tabs-list {
        width: 100%;
        flex-direction: row; /* Tabs များကို ဘေးတိုက်တန်းစီခြင်း */
        overflow-x: auto; /* ဖုန်းပေါ်တွင် ဘေးတိုက် Slide ဆွဲလို့ရစေရန် */
        white-space: nowrap;
        border-right: none;
        border-bottom: 1px solid #e2e8f0;
        -webkit-overflow-scrolling: touch;
    }

    /* Scrollbar ကို ဖျောက်ထားရန် */
    .tabs-list::-webkit-scrollbar {
        display: none;
    }

    .tab-item {
        flex: 1;
        padding: 14px 20px;
        justify-content: center;
        border-bottom: none;
        border-right: 1px solid #e2e8f0;
        font-size: 13.5px;
    }

    .tab-item.active {
        border-left: none;
        border-bottom: 3px solid #028b45; /* ဖုန်းပေါ်တွင် အောက်လိုင်းအစိမ်းလေး ဖြစ်သွားမည် */
        background-color: #ffffff;
    }

    .tabs-content-area {
        width: 100%;
        padding: 25px 20px;
    }

    .tab-panel h3 {
        font-size: 19px;
    }
}
    
       

        /* ==========================================================================
           Gallery Section (Modern Overlay Style)
           ========================================================================== */
        /* --- Gallery Section --- */
#gallery-section {
    background-color: var(--white, #ffffff);
    padding: 55px 0; /
    overflow: hidden; /*  */
}

#gallery-section .section-title {
    text-align: center;
    margin-bottom: 35px;
}

#gallery-section .section-title h3 {
    font-size: 28px;
    color: var(--slate-dark);
    font-weight: 700;
}

/* Slider အပြင်ဘက်အိမ် */
.gallery-slider-container {
    width: 100%;
    overflow: hidden;
    position: relative;
    padding: 10px 0;
}

/* ၃။ ဓာတ်ပုံများကို ဘေးတိုက် အလိုအလျောက် ရွေ့လျားစေမည့် လမ်းကြောင်း */
.gallery-track {
    display: flex;
    gap: 20px;
    width: max-content;
    /* ပုံများ ဘေးတိုက်ရွေ့ရန် Animation (စက္ကန့် ၃၀ စာ ငြိမ့်ငြိမ့်လေး သွားပါမည်) */
    animation: galleryScroll 30s linear infinite; 
}

/* မောက်စ်တင်လိုက်လျှင် ပုံရွေ့နေတာ ခေတ္တရပ်တန့်သွားမည့် အမိုက်စား Effect */
.gallery-track:hover {
    animation-play-state: paused;
}

/* ဓာတ်ပုံကတ်တစ်ခုချင်းစီ၏ အရွယ်အစား */
.gallery-item {
    position: relative;
    border-radius: 12px; /* ပိုမိုကျစ်လစ်သော ထောင့်ဝိုင်းပုံစံ */
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
    width: 300px; /* ပုံတစ်ပုံချင်းစီ၏ အကျယ်ကို သတ်မှတ်ခြင်း */
    height: 220px; /* အမြင့်ကို ၂၈၀ မှ ၂၂၀ သို့ ကျစ်လစ်အောင် လျှော့ချထားပါသည် */
    flex-shrink: 0;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.gallery-item:hover img {
    transform: scale(1.06);
}

/* ၄။ Overlay ကာလာကို ကုမ္ပဏီအစိမ်းရောင် Theme သို့ ပြောင်းလဲခြင်း */
.gallery-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* ပန်းရောင်မှ ကုမ္ပဏီအစိမ်းရောင် အလင်းပေါက် Gradient သို့ ပြောင်းလဲထားပါသည် */
    background: linear-gradient(to top, rgba(2, 139, 69, 0.9) 0%, rgba(15, 23, 42, 0.3) 100%);
    opacity: 0;
    transition: opacity 0.35s ease;
    display: flex;
    align-items: flex-end;
    padding: 20px;
}

.gallery-item:hover .gallery-overlay {
    opacity: 1;
}

.gallery-overlay-text {
    transform: translateY(15px);
    transition: transform 0.35s ease;
    width: 100%;
}

.gallery-item:hover .gallery-overlay-text {
    transform: translateY(0);
}

.gallery-overlay-text h3 {
    color: #ffffff;
    font-size: 17px; /* ကျစ်လစ်သော စာလုံးအရွယ်အစား */
    font-weight: 700;
    margin-bottom: 5px;
}

.gallery-overlay-text p {
    color: #f1f5f9;
    font-size: 13px;
    line-height: 1.4;
    margin: 0;
}

/* ၅။ Infinite Scroll ဖြစ်စေရန် CSS Animation သတ်မှတ်ချက် */
@keyframes galleryScroll {
    0% {
        transform: translateX(0);
    }
    100% {
        /* ပုံတစ်ဝက် (မူရင်းအသုတ်) ပြီးဆုံးချိန်တွင် အစကနေ ချောမွေ့စွာ ပြန်စမည့် တွက်ချက်မှု */
        transform: translateX(calc(-50% - 10px)); 
    }
}

/* --- Mobile Responsive --- */
@media (max-width: 768px) {
    #gallery-section {
        padding: 40px 0;
    }
    .gallery-item {
        width: 260px; /* ဖုန်းပေါ်တွင် ကတ်အကျယ်ကို အနည်းငယ် ချုံ့ပါသည် */
        height: 190px; /* ဖုန်းပေါ်တွင် အမြင့်ကို ချုံ့ပါသည် */
    }
    .gallery-track {
        animation: galleryScroll 20s linear infinite; /* ဖုန်းပေါ်တွင် ပိုကျစ်လစ်၍ အနည်းငယ် မြန်မြန်သွားစေရန် */
    }
}

        /* ==========================================================================
           Highlights Section Layout
           ========================================================================== */
        #highlights {
    background-color: var(--slate-dark);
    color: #f1f5f9;
    padding: 55px 5%; /* အပေါ်အောက် Padding ကို 80px မှ 55px သို့ ကျစ်လစ်အောင် လျှော့ချထားပါသည် */
}
.highlights-container {
    display: flex;
    gap: 40px;
    align-items: center;
    flex-wrap: wrap; /* ဖုန်းပေါ်တွင် ပုံမပျက်ဘဲ အပေါ်အောက် အလိုအလျောက်ဆင်းရန် */
}
.highlights-text-side {
    flex: 1;
    min-width: 320px;
}

/* ၁။ Sub-title ကို ကုမ္ပဏီအစိမ်းရောင်ပြောင်းလဲခြင်း */
.highlights-text-side .sub-title {
    color: #10b981; /* Dark Background ပေါ်တွင် ပိုမိုထင်ရှားစေရန် လင်းသော အစိမ်းရောင် သုံးထားပါသည် */
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 1.5px;
    display: block;
    margin-bottom: 6px;
}
.highlights-text-side h2 {
    font-family: "Mozilla Headline", sans-serif;
    font-size: 30px; /* စာလုံးအရွယ်အစားကို ကျစ်လစ်အောင် ညှိထားပါသည် */
    font-weight: 700;
    color: var(--white, #ffffff);
    margin-bottom: 12px;
}

/* ၂။ Title Line ကို ကုမ္ပဏီအစိမ်းရောင်ပြောင်းလဲခြင်း */
.highlights-text-side .title-line {
    width: 50px;
    height: 3px;
    background-color: #028b45; /* မူရင်းမှ ကုမ္ပဏီအစိမ်းရောင်သို့ ပြောင်းလဲမှု */
    margin-bottom: 20px; /* အောက်ကစာသားနှင့် အကွာအဝေး ချုံ့ရန် */
    border-radius: 2px;
}
.highlights-text-side p {
    font-size: 14.5px; /* စာသားအရွယ်အစား ကျစ်လစ်အောင် ညှိထားပါသည် */
    color: #94a3b8;
    line-height: 1.7;
    margin-bottom: 14px; /* စာပိုဒ်တစ်ခုချင်းစီကြား အကွာအဝေး လျှော့ချထားပါသည် */
    text-align: justify;
}

/* ၃။ Action Button ကို ကျစ်လစ်ပြီး အမိုက်စား ဒီဇိုင်းပြောင်းလဲခြင်း */
.btn-highlight-action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding: 11px 26px;
    background-color: #028b45; /* ကုမ္ပဏီအစိမ်းရောင် ခလုတ် */
    color: #ffffff !important;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    border-radius: 8px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(2, 139, 69, 0.2);
}
.btn-highlight-action:hover {
    background-color: #026d36;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(2, 139, 69, 0.35);
}
.btn-highlight-action i {
    font-size: 12px;
    transition: transform 0.3s ease;
}
.btn-highlight-action:hover i {
    transform: translateX(4px); /* Hover လုပ်လျှင် မျှားလေး ညာဘက်ရွေ့မည့် Effect */
}

/* --- Gallery Grid Side --- */
.highlights-grid-side {
    flex: 1.3;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px; /* ပုံများကြား အကွာအဝေးကို ၁၅ မှ ၁၂ သို့ ချုံ့ပြီး ကျစ်လစ်စေပါသည် */
    min-width: 350px;
}
.highlight-img-box {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    height: 175px; /* ပုံအမြင့်ကို ၂၀၀ မှ ၁၇၅ သို့ လျှော့ချပြီး နေရာချုံ့ထားပါသည် */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}
.grid-span-large {
    grid-row: span 2;
    height: 362px; /* ပုံကြီးအမြင့်ကို ၄၁၅ မှ ၃၆၂ သို့ အချိုးကျ လျှော့ချထားပါသည် */
}
.grid-col-wide {
    grid-column: span 1;
}
.highlight-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ပုံပေါ်က Tag လေးအား ပိုမိုလှပအောင် ပြင်ဆင်ခြင်း */
.img-overlay-tag {
    position: absolute;
    bottom: 12px;
    left: 12px;
    background: rgba(2, 139, 69, 0.85); /* ကုမ္ပဏီအစိမ်းရောင် အလင်းပေါက်ပြောင်းလဲမှု */
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    color: var(--white, #ffffff);
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.5px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.highlight-img-box:hover img {
    transform: scale(1.05);
}

/* --- Mobile Responsive --- */
@media (max-width: 768px) {
    #highlights {
        padding: 40px 20px;
    }
    .highlights-grid-side {
        width: 100%;
        min-width: 100%;
    }
    .highlight-img-box {
        height: 150px;
    }
    .grid-span-large {
        height: 312px;
    }
}



/* --- YouTube Video Section --- */
#video-presentation {
    background-color: #f8fafc; /* သန့်ရှင်းသပ်ရပ်သော နောက်ခံအရောင်ဖျော့ */
    padding: 55px 5%; /* အပေါ်အောက် နေရာလွတ်ကို ကျစ်လစ်အောင် ညှိထားပါသည် */
}

.video-split-container {
    display: flex;
    gap: 50px; /* ဘယ်ညာ နှစ်ဖက်ကြား အကွာအဝေး */
    align-items: center;
    max-width: 1150px;
    margin: 0 auto;
}

/* Left Side: စာသားခြမ်း */
.video-text-side {
    flex: 1;
    min-width: 320px;
}

.video-text-side .sub-title {
    color: #028b45; /* ကုမ္ပဏီအစိမ်းရောင် */
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: 1.2px;
    display: block;
    margin-bottom: 6px;
    text-transform: uppercase;
}

.video-text-side h2 {
    font-family: "Mozilla Headline", sans-serif;
    font-size: 30px;
    font-weight: 700;
    color: var(--slate-dark, #1e293b);
    margin-bottom: 12px;
    line-height: 1.3;
}

.video-text-side .title-line {
    width: 50px;
    height: 3px;
    background-color: #028b45; /* အစိမ်းရောင်လိုင်းလေး */
    margin-bottom: 20px;
    border-radius: 2px;
}

.video-text-side p {
    font-size: 14.5px;
    color: var(--slate-light, #475569);
    line-height: 1.7;
    margin-bottom: 14px;
    text-align: justify;
}

/* YouTube သွားရန် ခလုတ်အနီဆန်းဆန်းလေး (Hover လျှင် အစိမ်းပြောင်းမည်) */
.btn-video-action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding: 11px 26px;
    background-color: #e60033; /* YouTube Red အရောင် */
    color: #ffffff !important;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    border-radius: 8px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(230, 0, 51, 0.15);
}

.btn-video-action:hover {
    background-color: #028b45; /* Hover လုပ်လျှင် ကုမ္ပဏီအစိမ်းရောင်သို့ ပြောင်းလဲမည့် Effect */
    box-shadow: 0 6px 20px rgba(2, 139, 69, 0.25);
    transform: translateY(-1px);
}

/* Right Side: ဗီဒီယိုခြမ်း */
.video-embed-side {
    flex: 1.1;
    min-width: 350px;
}

/* YouTube ဗီဒီယိုအား ဖုန်းပေါ်တွင်ပါ (16:9 Ratio) အချိုးကျ ပုံမပျက်စေရန် အရေးကြီးသောအပိုင်း */
.youtube-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
    height: 0;
    overflow: hidden;
    border-radius: 16px; /* ဗီဒီယိုထောင့်လေးများကို ဝိုင်းပေးခြင်း */
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
}

.youtube-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* --- Mobile Responsive (ဖုန်းများနှင့် တက်ဘလက်များအတွက်) --- */
@media (max-width: 768px) {
    #video-presentation {
        padding: 40px 20px;
    }
    .video-split-container {
        flex-direction: column; /* ဖုန်းပေါ်တွင် ဘယ်ညာမှ အပေါ်အောက်သို့ ပြောင်းလဲခြင်း */
        gap: 30px;
    }
    .video-text-side, .video-embed-side {
        width: 100%;
        min-width: 100%;
    }
    .video-text-side h2 {
        font-size: 24px;
    }
}
        /* ==========================================================================
           Student Testimonials Section
           ========================================================================== */
        .testimonials-section {
            background-color: #f1f5f9; 
            padding: 80px 5%;
        }
        .testimonials-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 25px;
            justify-content: center;
        }
        .testimonial-card {
            background: var(--white);
            padding: 30px;
            border-radius: 16px;
            width: calc(33.333% - 17px); 
            min-width: 300px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.02);
            border: 1px solid #e2e8f0;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            transition: all 0.3s ease;
        }
        .testimonial-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0,0,0,0.06);
            border-color: #ffe4e6;
        }
        .student-profile {
            display: flex;
            align-items: center;
            gap: 15px;
            margin-bottom: 20px;
        }
        .student-profile img {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid var(--primary);
        }
        .student-info h3 {
            font-size: 17px;
            color: var(--slate-dark);
            font-weight: 700;
            margin-bottom: 2px;
        }
        .student-info span {
            font-size: 13px;
            color: #64748b;
            display: block;
        }
        .testimonial-text {
            font-size: 14.5px;
            color: var(--slate-light);
            line-height: 1.6;
            font-style: italic;
            text-align: justify;
            margin-bottom: 20px;
        }
        .rating-stars {
            color: #ffb703; 
            font-size: 14px;
        }

        /* Call to Action Section Title */
       #cta {
    /* ၁။ နောက်ခံပုံ ထည့်သွင်းခြင်း (assets/images/cta-bg.jpg နေရာတွင် မိမိပုံလမ်းကြောင်း ပြောင်းပါ) */
    background: linear-gradient(rgba(15, 23, 42, 0.75), rgba(2, 139, 69, 0.45)), url('../images/slide34.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* Scroll ဆွဲလျှင် ပုံလေးငြိမ်နေမည့် Parallax Effect */
    text-align: center;
    padding: 65px 5%; /* အပေါ်အောက် နေရာလွတ်ကို ကျစ်ကျစ်လျစ်လျစ် ညှိထားပါသည် */
    color: #ffffff;
}

#cta h2 { 
    font-size: 28px; /* စာလုံးအရွယ်အစားကို ကျစ်လစ်အောင် အနည်းငယ် ညှိထားပါသည် */
    font-weight: 700;
    margin-bottom: 12px; 
    color: #ffffff;
    letter-spacing: 0.3px;
}

#cta p { 
    font-size: 15px; /* ဖတ်ရပိုပြီး ကျစ်လစ်သက်သာသော အရွယ်အစား */
    margin-bottom: 25px; /* ခလုတ်နှင့် အကွာအဝေးကို ချုံ့ထားပါသည် */
    color: #cbd5e1; /* ဖတ်ရသက်သာသော မီးခိုးနုရောင် */
    max-width: 650px; 
    margin-left: auto; 
    margin-right: auto; 
    line-height: 1.6;
}

/* ၂။ ကုမ္ပဏီအစိမ်းရောင် Premium CTA Button ဒီဇိုင်း */
.btn-cta-action {
    display: inline-flex;
    align-items: center;
    gap: 10px; /* အိုင်ကွန်နှင့် စာသားကြားအကွာအဝေး */
    padding: 12px 32px;
    background-color: #028b45; /* ကုမ္ပဏီအစိမ်းရောင် စစ်စစ် */
    color: #ffffff !important;
    text-decoration: none;
    font-weight: 700;
    font-size: 14.5px;
    border-radius: 30px; /* ပိုမိုခေတ်မီဆန်းသစ်သော Oval ပုံစံ ခလုတ် */
    box-shadow: 0 4px 15px rgba(2, 139, 69, 0.3);
    transition: all 0.3s ease;
}

/* Hover Effect - မောက်စ်တင်လိုက်လျှင် ပိုလင်းပြီး ကြွလာမည့်ပုံစံ */
.btn-cta-action:hover {
    background-color: #026d36;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(2, 139, 69, 0.5);
}

.btn-cta-action i {
    font-size: 13px;
    animation: ctaInquirePhone 1.5s infinite ease-in-out; /* ဖုန်းအိုင်ကွန်လေး တုန်ခါနေမည့် ဆွဲဆောင်မှု Effect */
}

/* ဖုန်းအိုင်ကွန်လေး လှုပ်ခါနေစေရန် Animation Code */
@keyframes ctaInquirePhone {
    0%, 100% { transform: rotate(0deg); }
    10%, 30% { transform: rotate(-10deg); }
    20%, 40% { transform: rotate(10deg); }
    50% { transform: rotate(0deg); }
}

/* --- Mobile Responsive --- */
@media (max-width: 600px) {
    #cta {
        padding: 50px 20px;
        background-attachment: scroll; /* ဖုန်းများတွင် Error မတက်စေရန် */
    }
    #cta h2 { 
        font-size: 22px; 
    }
    .btn-cta-action {
        padding: 11px 26px;
        font-size: 13.5px;
    }
}
        /* ==========================================================================
           Footer Section
           ========================================================================== */
        .footer { 
    /* ) */
    background-image: linear-gradient(rgba(15, 23, 42, 0.92), rgba(15, 23, 42, 0.95)), url('.../images/004.jpg');
    background-size: cover;
    background-position: center bottom; /*  */
    color: #94a3b8; 
    padding: 50px 5% 20px 5%; /*  */
    font-size: 14px; 
}

.footer-grid { 
    max-width: 1100px; 
    margin: 0 auto; 
    display: grid; 
    grid-template-columns: 2fr 1fr 1fr; 
    gap: 40px; 
    padding-bottom: 25px; 
    border-bottom: 1px solid rgba(255, 255, 255, 0.08); /* လိုင်းတားကို အလင်းပေါက်ပုံစံ ခပ်ပါးပါးလေး ပြောင်းလဲပါသည် */
}

.footer-col h4 { 
    color: var(--white, #ffffff); 
    font-size: 17px; /* ခေါင်းစဉ်ကို ကျစ်လစ်အောင် အနည်းငယ် ချုံ့ပါသည် */
    margin-bottom: 15px; 
    font-weight: 600; 
    letter-spacing: 0.5px;
}

.footer-col p { 
    color: #94a3b8; 
    line-height: 1.6; 
}

.footer-col ul { 
    list-style: none; 
    padding: 0;
    margin: 0;
}

.footer-col ul li { 
    margin-bottom: 8px; /* လင့်ခ်တစ်ခုချင်းစီကြား အကွာအဝေးကို ပိုမိုကျစ်လစ်စေရန် */
}

.footer-col ul li a { 
    color: #94a3b8; 
    text-decoration: none; 
    display: inline-flex;
    align-items: center;
    transition: all 0.25s ease; 
}

/* Quick Links မြှားအိုင်ကွန်လေးများ၏ ပုံစံ */
.footer-link-icon {
    font-size: 10px;
    margin-right: 6px;
    opacity: 0; /* ပုံမှန်အချိန်တွင် ဖျောက်ထားမည် */
    transform: translateX(-5px);
    transition: all 0.25s ease;
}

/* ၂။ Hover လုပ်လျှင် ကုမ္ပဏီအစိမ်းရောင်သို့ ပြောင်းလဲပြီး မြှားလေး ထွက်လာမည့် Effect */
.footer-col ul li a:hover { 
    color: #10b981; /* ကုမ္ပဏီအစိမ်းရောင်စပ်တူ (Dark Background ပေါ်တွင် လင်းမည့်အစိမ်း) */
}

.footer-col ul li a:hover .footer-link-icon {
    opacity: 1;
    transform: translateX(0); /* Hover လုပ်လိုက်မှ မြှားလေး ညာဘက်သို့ တိုးထွက်လာမည် */
}

/* Contact Info နေရာလွတ် ထိန်းချုပ်မှု */
.contact-info-item {
    margin-bottom: 6px; /* 5px အစား CSS မှတစ်ဆင့် ကျစ်လစ်စွာ ထိန်းချုပ်ထားပါသည် */
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Contact နားက Icon လေးများကို ကုမ္ပဏီအစိမ်းရောင် ပြောင်းလဲခြင်း */
.contact-info-item i {
    color: #028b45;
    width: 14px;
    font-size: 13px;
}

/* Footer အောက်ခြေ မူပိုင်ခွင့်စာတန်းအပိုင်း */
.footer-bottom { 
    text-align: center; 
    padding-top: 15px; 
    font-size: 12.5px; 
    color: #64748b; 
}

/* --- Mobile Responsive (ဖုန်းများပေါ်တွင် Column အလိုက် စနစ်တကျ ဆင်းသွားရန်) --- */
@media (max-width: 768px) {
    .footer {
        padding: 40px 20px 15px 20px;
    }
    .footer-grid { 
        grid-template-columns: 1fr; /* ဖုန်းပေါ်တွင် ဘေးတိုက်မဟုတ်ဘဲ တစ်လိုင်းစီ ပေါ်ရန် */
        gap: 25px; 
        padding-bottom: 20px;
    }
    .footer-col h4 {
        margin-bottom: 10px;
    }
}

/* ==========================================================================
           Inner Page Banner (ဂျပန်ဆန်ဆန် Gradient ဖြင့် မွမ်းမံထားသည်)
           ========================================================================== */
      .aboutpage-banner {
    /*  */
    background: linear-gradient(rgba(15, 23, 42, 0.75), rgba(2, 139, 69, 0.45)), url('../images/004.jpg');
    background-size: cover;
    background-position: center 35%;
    padding: 70px 5%;
    text-align: center;
    color: #ffffff;
}
        
        .aboutpage-banner h1 { font-size: 32px; font-weight: 700; margin-bottom: 8px; letter-spacing: 0.5px; }
        .aboutpage-banner p { color: #cbd5e1; font-size: 15px; }

        /* Section Settings */
        .section-padding { padding: 55px 5%; }
        .container { max-width: 1150px; margin: 0 auto; }
        
        .section-header {
            text-align: center;
            margin-bottom: 35px;
        }
        .section-header .sub-title {
            color: var(--primary);
            font-size: 13px;
            font-weight: 700;
            letter-spacing: 1px;
            text-transform: uppercase;
            display: block;
            margin-bottom: 4px;
        }
        .section-header h2 { 
            font-size: 26px; 
            color: var(--slate-dark); 
            font-weight: 700; 
            position: relative;
            display: inline-block;
            padding-bottom: 12px;
        }
        .section-header h2::after { 
            content: ''; 
            position: absolute; 
            bottom: 0; 
            left: 50%; 
            transform: translateX(-50%); 
            width: 45px; 
            height: 3px; 
            background-color: var(--primary); 
            border-radius: 2px;
        }

        /* ==========================================================================
           Story Section (စာတစ်ဖက် ပုံတစ်ဖက် ကျစ်လစ်လှပသော စတိုင်ပြောင်းလဲမှု)
           ========================================================================== */
        .story-grid { display: flex; align-items: center; gap: 50px; }
        .story-text { flex: 1.2; }
        .story-text p { margin-bottom: 15px; text-align: justify; font-size: 14.5px; color: var(--slate-light); line-height: 1.7; }
        .story-image-side { flex: 0.8; position: relative; }
        .story-img-wrapper {
            position: relative;
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
            height: 280px;
        }
        .story-img-wrapper img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; }
        .story-img-wrapper:hover img { transform: scale(1.05); }
        
        .story-badge {
            position: absolute;
            bottom: -15px;
            left: -15px;
            background: var(--primary);
            color: #ffffff;
            padding: 12px 18px;
            border-radius: 12px;
            box-shadow: 0 8px 20px rgba(2, 139, 69, 0.2);
            text-align: center;
        }
        .story-badge .num { font-size: 20px; font-weight: 700; display: block; line-height: 1; }
        .story-badge .txt { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
      
        
 
/* CEO Message Section Styling */
.message-section {
    background-color: #f9f9f9; /* လိုအပ်ရင် အရောင်ပြောင်းနိုင်ပါတယ် */
}

.message-section p {
    font-size: 16px;
    line-height: 1.7;
    color: #444;
    text-align: justify; /* စာကြောင်းများကို ဘယ်ညာညီစေရန် */
}

.message-section h3 {
    color: var(--primary); /* ဆရာ့ Theme ရဲ့ main color */
    font-weight: 700;
}

/* ပုံကို အဝိုင်းဖြစ်စေပြီး ဘောင်လေးခတ်ပေးခြင်း */
.rounded-circle {
    border-radius: 50% !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}


/* ==========================================================================
   Mobile Responsive (ဖုန်းဗျူးအတွက် သီးသန့် ချိန်ညှိချက်)
   ========================================================================== */
@media (max-width: 768px) {
    /* 1. CEO Section တစ်ခုလုံး မိုဘိုင်းမှာ အပေါ်အောက် အစီအစဉ်လိုက် ဖြစ်သွားစေရန် */
    .message-section .row {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    /* 2. ပုံကို အဝိုင်းအတိုင်း ထိန်းထားပြီး မိုဘိုင်းမှာ နည်းနည်း သေးပေးခြင်း */
    .ceo-round-img {
        width: 180px !important;
        height: 180px !important;
        max-width: 100%;
        object-fit: cover;
        border-radius: 50% !important; /* အဝိုင်းပုံစံ ပျောက်မသွားစေရန် */
        margin: 0 auto;
    }

    /* 3. ပုံရဲ့ Wrapper ကို မိုဘိုင်းမှာ Height အသေမရှိစေဘဲ အလိုအလျောက် ချိန်ခိုင်းခြင်း */
    .ceo-image-wrapper {
        height: auto !important;
        display: block;
        margin-bottom: 15px;
    }

    /* 4. စာသားများကို ဖုန်းမှာ ဖတ်ရလွယ်အောင် ဘယ်ညာ Margin အနည်းငယ် ချန်ခြင်း */
    .message-content {
        padding: 0 10px;
    }
    
    .message-content p {
        font-size: 14.5px;
        line-height: 1.7;
        text-align: justify; /* စာသားတွေကို ဖုန်းပေါ်မှာလည်း ဘယ်ညာ ညီစေရန် */
        margin-bottom: 15px;
    }

    .ceo-name-tag {
        margin-bottom: 30px; /* နာမည်နဲ့ အောက်ကစာသား ကြားထဲ ခြားရန် */
    }
}




        /* ==========================================================================
           Vision & Mission (ကတ်ပုံစံဆန်းကျစ်ကျစ်လစ်လစ်)
           ========================================================================== */
        .vm-section { background-color: var(--white); }
        .vm-grid { display: flex; gap: 30px; }
        .vm-card { 
            flex: 1; 
            background: var(--bg-gray); 
            padding: 35px 30px; 
            border-radius: 16px; 
            border-top: 4px solid var(--primary); 
            box-shadow: var(--shadow-premium);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .vm-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 12px 25px rgba(15, 23, 42, 0.06);
        }
        .vm-card i { font-size: 32px; color: var(--primary); margin-bottom: 16px; }
        .vm-card h3 { font-size: 19px; color: var(--slate-dark); margin-bottom: 10px; font-weight: 700; }
        .vm-card p { font-size: 14px; color: var(--slate-light); text-align: justify; line-height: 1.6; }

        /* ==========================================================================
           Team Section (အဖွဲ့ဝင်များကတ်ကို ခေတ်မီအောင် ပြုပြင်ထားသည်)
           ========================================================================== */
        .team-grid { display: flex; gap: 25px; justify-content: center; flex-wrap: wrap; }
        .team-card { 
            background: var(--white); 
            width: calc(33.333% - 17px); 
            min-width: 260px; 
            border-radius: 14px; 
            overflow: hidden; 
            box-shadow: var(--shadow-premium); 
            text-align: center; 
            padding-bottom: 20px; 
            border: 1px solid #f1f5f9;
            transition: transform 0.3s ease;
        }
        .team-card:hover { transform: translateY(-3px); }
        .team-img { height: 250px; overflow: hidden; margin-bottom: 15px; position: relative; }
        .team-img img { width: 100%; height: 100%; object-fit: cover; }
        .team-card h3 { font-size: 16.5px; color: var(--slate-dark); margin-bottom: 4px; font-weight: 700; }
        .team-card p { font-size: 13px; color: var(--primary); font-weight: 600; letter-spacing: 0.3px; text-transform: uppercase; }

        /* ==========================================================================
           Footer Section
           ========================================================================== */
        .footer { 
            background: var(--slate-dark); 
            color: #94a3b8; 
            padding: 30px 5% 20px 5%; 
            font-size: 13.5px; 
        }
        .footer-grid { max-width: 1150px; margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; padding-bottom: 25px; border-bottom: 1px solid #1e293b; }
        .footer-col h4 { color: var(--white); font-size: 17px; margin-bottom: 15px; font-weight: 600; }
        .footer-col p { color: #94a3b8; line-height: 1.6; }
        .footer-col ul { list-style: none; }
        .footer-col ul li { margin-bottom: 8px; }
        .footer-col ul li a { color: #94a3b8; text-decoration: none; transition: all 0.3s; }
        .footer-col ul li a:hover { color: var(--primary-light); padding-left: 5px; }
        .footer-bottom { text-align: center; padding-top: 20px; font-size: 12.5px; color: #64748b; }

        /* ==========================================================================
           Mobile Responsive (ဖုန်းနှင့် Tablet များအတွက် 100% စနစ်တကျပြင်ဆင်မှု)
           ========================================================================== */
        @media (max-width: 768px) {
            .navbar { padding: 12px 20px; }
            .menu-toggle { display: flex; } 
            
            .nav-links { 
                position: absolute; 
                top: 100%; 
                left: 0; 
                width: 100%; 
                background: rgba(255, 255, 255, 0.98); 
                backdrop-filter: blur(15px); 
                -webkit-backdrop-filter: blur(15px); 
                flex-direction: column; 
                gap: 0; 
                box-shadow: 0 15px 25px rgba(0,0,0,0.05); 
                max-height: 0; 
                overflow: hidden; 
                transition: max-height 0.35s ease-in-out; 
            }
            .nav-links.show { max-height: 350px; }
            .nav-links li { width: 100%; text-align: center; border-top: 1px solid rgba(0,0,0,0.04); }
            .nav-links a { display: block; padding: 12px 0; color: #222; font-weight: 600; }
            .nav-links a::after { display: none; }
            .nav-links a:hover { background-color: rgba(2, 139, 69, 0.05); color: var(--primary); }

            /* Bottom Sticky Mobile Social Bar */
            .social-sticky-bar { 
                top: auto; bottom: 0; left: 0; right: 0; 
                transform: translateY(0); flex-direction: row; 
                width: 100%; box-shadow: 0 -4px 15px rgba(0,0,0,0.1); 
            }
            .social-btn { flex: 1; height: 48px; border-radius: 0; margin-bottom: 0; }
            .social-btn:hover { width: 100%; padding: 0; }
            body { padding-bottom: 48px; } 
            
            /* Grid Refactoring for Mobile */
            .story-grid, .vm-grid {
                flex-direction: column;
                gap: 30px;
            }
            .story-text, .story-image-side, .vm-card {
                width: 100%;
            }
            .story-img-wrapper { height: 220px; }
            .story-badge { bottom: -10px; left: 10px; padding: 8px 14px; }
            .story-badge .num { font-size: 16px; }

            .team-card { width: 100%; }
            .footer-grid { grid-template-columns: 1fr; gap: 25px; }
        }

        /* ==========================================================================
           Inner Page Banner (English Content & Premium Gradient)
           ========================================================================== */
        .servicepage-banner {
           
             background: linear-gradient(rgba(15, 23, 42, 0.75), rgba(2, 139, 69, 0.45)), url('../images/002.jpg');
    background-size: cover;
    background-position: center 35%;
    padding: 70px 5%;
    text-align: center;
    color: #ffffff;
        }
        .servicepage-banner h1 { font-size: 32px; font-weight: 700; margin-bottom: 8px; letter-spacing: 0.5px; }
        .servicepage-banner p { color: #cbd5e1; font-size: 15px; }

        /* Section Settings */
        .section-padding { padding: 55px 5%; }
        .container { max-width: 1150px; margin: 0 auto; }
        
        .section-header {
            text-align: center;
            margin-bottom: 35px;
        }
        .section-header .sub-title {
            color: var(--primary);
            font-size: 13px;
            font-weight: 700;
            letter-spacing: 1px;
            text-transform: uppercase;
            display: block;
            margin-bottom: 4px;
        }
        .section-header h2 { 
            font-size: 26px; 
            color: var(--slate-dark); 
            font-weight: 700; 
            position: relative;
            display: inline-block;
            padding-bottom: 12px;
        }
        .section-header h2::after { 
            content: ''; 
            position: absolute; 
            bottom: 0; 
            left: 50%; 
            transform: translateX(-50%); 
            width: 45px; 
            height: 3px; 
            background-color: var(--primary); 
            border-radius: 2px;
        }

        /* ==========================================================================
           Detail Service Layout (English Content & Custom Refined Styles)
           ========================================================================== */
        .service-list { display: flex; flex-direction: column; gap: 30px; }
        .service-item { 
            background: var(--white); 
            padding: 35px; 
            border-radius: 16px; 
            box-shadow: var(--shadow-premium); 
            display: flex; 
            gap: 25px; 
            align-items: flex-start; 
            border: 1px solid #e2e8f0; 
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .service-item:hover {
            transform: translateY(-2px);
            box-shadow: 0 12px 25px rgba(15, 23, 42, 0.06);
        }
        
        /* Icon box customized with primary light tint */
        .service-icon { 
            background: rgba(2, 139, 69, 0.08); 
            color: var(--primary); 
            width: 55px; 
            height: 55px; 
            border-radius: 12px; 
            display: flex; 
            align-items: center; 
            justify-content: center; 
            font-size: 22px; 
            flex-shrink: 0; 
        }
        .service-info h3 { font-size: 19px; color: var(--slate-dark); margin-bottom: 10px; font-weight: 700; }
        .service-info p { font-size: 14.5px; color: var(--slate-light); text-align: justify; margin-bottom: 15px; }
        
        .service-steps { 
            list-style: none; 
            display: grid; 
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); 
            gap: 12px; 
            background: var(--bg-gray); 
            padding: 15px; 
            border-radius: 10px; 
            border-left: 3px solid var(--primary);
        }
        .service-steps li { font-size: 13.5px; color: var(--slate-text); display: flex; align-items: center; gap: 10px; font-weight: 500; }
        .service-steps li i { color: var(--primary-light); font-size: 14px; }

         /* ==========================================================================
           Inner Page Banner (English Content & Premium Gradient)
           ========================================================================== */
 .gallerypage-banner { 
     background: linear-gradient(rgba(15, 23, 42, 0.75), rgba(2, 139, 69, 0.45)), url('../images/slide80.jpg');
            background-size: cover; 
            background-position: center; 
            padding: 70px 5%; 
            text-align: center; 
            color: #ffffff; 
        }
        .gallerypage-banner h1 { font-size: 32px; font-weight: 700; margin-bottom: 8px; letter-spacing: 0.5px; }
        .gallerypage-banner p { color: #cbd5e1; font-size: 15px; }

        /* Section Settings */
        .section-padding { padding: 55px 5%; }
        .container { max-width: 1150px; margin: 0 auto; }

        /* ==========================================================================
           Modern Gallery Layout (Premium Hover Overlay Effect)
           ========================================================================== */
        .gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 25px; }
        .gallery-item { position: relative; border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-premium); border: 1px solid #e2e8f0; height: 280px; }
        .gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; }
        .gallery-item:hover img { transform: scale(1.08); }
        
        /* Gradient Overlay Theme Matching */
        .gallery-overlay { 
            position: absolute; 
            top: 0; 
            left: 0; 
            width: 100%; 
            height: 100%; 
            background: linear-gradient(to top, rgba(2, 139, 69, 0.92) 0%, rgba(15, 23, 42, 0.3) 100%); 
            opacity: 0; 
            transition: opacity 0.4s ease; 
            display: flex; 
            align-items: flex-end; 
            padding: 25px; 
        }
        .gallery-item:hover .gallery-overlay { opacity: 1; }
        .gallery-overlay-text { transform: translateY(15px); transition: transform 0.4s ease; width: 100%; }
        .gallery-item:hover .gallery-overlay-text { transform: translateY(0); }
        .gallery-overlay-text h3 { color: #ffffff; font-size: 18px; font-weight: 700; margin-bottom: 6px; }
        .gallery-overlay-text p { color: #f1f5f9; font-size: 13px; line-height: 1.5; text-align: justify; }



        

        /* ==========================================================================
           MOBILE RESPONSIVE STYLES & ANIMATION OPTIMIZATION
           ========================================================================== */
        /* ဖုန်းဗားရှင်းများတွင် Animation Delay ကို ပိတ်ပြီး ပေါ့ပေါ့ပါးပါး ပေါ်စေရန် (စွမ်းဆောင်ရည် ပိုကောင်းစေရန်) */
        @media (max-width: 768px) {
            .reveal-fade, .reveal-zoom {
                transition-duration: 0.7s;
            }
            .delay-1, .delay-2, .delay-3, .delay-4, .delay-5 {
                transition-delay: 0s !important;
            }

            /* Navbar Mobile */
            .navbar { padding: 12px 20px; }
            .menu-toggle { display: flex; } 
            
            .nav-links { 
                position: absolute; 
                top: 100%; 
                left: 0; 
                width: 100%; 
                background: rgba(255, 255, 255, 0.98); 
                backdrop-filter: blur(20px); 
                -webkit-backdrop-filter: blur(20px); 
                flex-direction: column; 
                gap: 0; 
                box-shadow: 0 15px 25px rgba(0,0,0,0.1); 
                max-height: 0; 
                overflow: hidden; 
                transition: max-height 0.4s ease-in-out; 
                z-index: 1000; 
            }
            .nav-links.show { max-height: 350px; }
            .nav-links li { width: 100%; text-align: center; border-top: 1px solid rgba(0,0,0,0.05); }
            .nav-links a { display: block; padding: 14px 0; width: 100%; color: #222; font-weight: 600; }
            .nav-links a::after { display: none; }
            .nav-links a:hover { background-color: rgba(230, 0, 51, 0.1); color: var(--primary); }

            /* Bottom Sticky Mobile Social Bar */
            .social-sticky-bar { 
                top: auto; 
                bottom: 0; 
                left: 0; 
                right: 0; 
                transform: translateY(0); 
                flex-direction: row; 
                width: 100%; 
                box-shadow: 0 -4px 15px rgba(0,0,0,0.15); 
            }
            .social-btn { 
                flex: 1; 
                height: 50px; 
                border-radius: 0; 
                margin-bottom: 0; 
            }
            .social-btn:hover { 
                width: 100%; 
                padding: 0; 
            }
            body { padding-bottom: 50px; } /* ဖုန်းတွင် အောက်ဆုံး Social Bar ဖုံးမသွားစေရန် Padding ပေးခြင်း */
            
            /* Responsive Grid System Layouts */
            .about-grid, .welcome-split, .class-split-container, .highlights-container {
                flex-direction: column !important;
                gap: 35px;
            }
            .about-text, .about-image, .welcome-left, .welcome-right, .class-image-side, .class-details-side, .highlights-text-side, .highlights-grid-side {
                width: 100% !important;
                text-align: center !important;
            }
            .main-para, .about-text p, .class-details-side p, .highlights-text-side p {
                text-align: center !important;
            }
            .highlights-text-side .title-line {
                margin: 0 auto 25px auto;
            }
            .highlights-grid-side {
                display: flex;
                flex-direction: column;
                gap: 15px;
                min-width: 100%;
            }
            .highlight-img-box {
                height: 220px !important;
            }
            .testimonial-card, .job-card {
                width: 100% !important;
            }
            .footer-grid {
                grid-template-columns: 1fr;
                gap: 30px;
            }
        }

        @media (max-width: 992px) {
            .services-tabs-container { flex-direction: column; }
            .tabs-list { width: 100%; flex-direction: row; overflow-x: auto; }
            .tab-item { min-width: 150px; padding: 15px; font-size: 13px; }
            .tabs-content-area { width: 100%; padding: 30px; }
            .btn-tab-action { position: static; margin-top: 20px; }
        }

        @media (max-width: 576px) {
            .hero-text-side h1 { font-size: 28px; }
            .welcome-left h2, .class-details-side h2, .highlights-text-side h2 { font-size: 26px; }
            .class-meta { flex-direction: column; gap: 8px; }
            .class-action-box { flex-direction: column; align-items: flex-start; gap: 15px; }
            .btn-enroll { width: 100%; justify-content: center; }
        }