/* General Settings */
html {
    min-width: 1200px;
    scroll-behavior: smooth;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Pyidaungsu', sans-serif;
}

header {
    background: #1a1a1a;
    color: white;
    padding: 1rem 5%;
    position: sticky;
    top: 0;
    z-index: 1000;
}

/* Navigation Links Container */
.nav-links {
    display: flex;
    list-style: none;
    gap: 15px;
}

/* ခလုတ်တစ်ခုချင်းစီ၏ ဒီဇိုင်း */
.nav-links li a {
    text-decoration: none;
    color: white;
    font-weight: 600;
    font-size: 15px;
    padding: 10px 20px;
    border-radius: 50px; /* ခလုတ်ကို အဝိုင်းပုံစံဖြစ်စေရန် */
    background: rgba(255, 255, 255, 0.1); /* မှန်ကြည်ရောင် အလင်း */
    backdrop-filter: blur(5px); /* နောက်ခံကို ဝေဝါးစေပြီး အလှဆင်ရန် */
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.4s ease; /* ပြောင်းလဲမှု နူးညံ့စေရန် */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    display: inline-block;
}

/* Mouse တင်လိုက်လျှင် ဖြစ်ပေါ်မည့် ဒီဇိုင်း (Hover Effect) */
.nav-links li a:hover {
    background: linear-gradient(45deg, #01875f, #00c8ff); /* အစိမ်းမှ အပြာရောင်ပြေး */
    color: white;
    transform: translateY(-3px); /* အပေါ်သို့ အနည်းငယ် ကြွတက်လာစေရန် */
    box-shadow: 0 8px 25px rgba(1, 135, 95, 0.4); /* အရောင်လင်းလက်စေရန် */
    border-color: rgba(255, 255, 255, 0.5);
}

/* လက်ရှိရောက်နေသော Page ခလုတ်ကို အရောင်လင်းထားရန် (Active State) */
.nav-links li a.active {
    background: #01875f;
    box-shadow: 0 0 15px rgba(1, 135, 95, 0.6);
}

/* Hero Section */
.hero {
    position: relative;
    height: 80vh;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: white;
    overflow: hidden;
}

.background-slider, .slide {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
}

.slide {
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
    z-index: -2;
}

.slide.active { opacity: 1; }

.hero::after {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: -1;
}

.hero-content { padding: 0 10%; }

.btn {
    display: inline-block;
    padding: 12px 30px;
    background: #f1c40f;
    color: #000;
    text-decoration: none;
    border-radius: 50px;
    margin-top: 20px;
    font-weight: bold;
}

/* Services Section */
.services { padding: 60px 5%; text-align: center; background: #f9f9f9; }

.service-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin-top: 40px;
}

.card {
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
    transition: 0.3s;
    background: white;
    border-top: 5px solid transparent; /* default border */
}

.card:hover { transform: translateY(-10px); }

/* Logo Box Base Style */
.card-logo {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    margin: 0 auto 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    transition: 0.3s;
}

.card-logo img { 
    width: 85%; 
    height: auto; 
    object-fit: contain; 
}

/* --- တစ်ခုချင်းစီအတွက် Background နှင့် Logo Color များ --- */

/* ibet - အနီရင့် */
.ibet { background: #fff5f5; border-top-color: #e5dad9; }
.ibet .card-logo { background: #e7e1e0; box-shadow: 0 4px 10px rgba(231, 76, 60, 0.3); }

/* Moung - အပြာရင့် */
.moung { background: #f0f7ff; border-top-color: #3498db; }
.moung .card-logo { background: #3498db; box-shadow: 0 4px 10px rgba(52, 152, 219, 0.3); }

/* 555Mix - ရွှေဝါရောင် */
.mix { background: #fdfaf0; border-top-color: #f1c40f; }
.mix .card-logo { background: #f1c40f; box-shadow: 0 4px 10px rgba(241, 196, 15, 0.3); }

/* SportsXzone - အစိမ်းရင့် */
.sports { background: #f4fff4; border-top-color: #464e4a; }
.sports .card-logo { background: #2d3531; box-shadow: 0 4px 10px rgba(46, 204, 113, 0.3); }

footer { background: #1a1a1a; color: white; padding: 30px; text-align: center; }
.download-btn {
    display: inline-block;
    margin-top: 15px;
    padding: 8px 20px;
    background: #01875f; /* Play Store Green */
    color: white;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    font-size: 0.9rem;
    transition: 0.3s;
}

.download-btn:hover {
    background: #016b4c;
    transform: scale(1.05);
}
/* Navigation Bar တစ်ခုလုံးကို ဘေးတိုက်စီရန် */
nav {
    display: flex;
    justify-content: space-between; /* Logo ကို ဘယ်ဘက်၊ Menu ကို ညာဘက်သို့ ပို့ရန် */
    align-items: center; /* စာသားနှင့် ခလုတ်များကို အလယ်ဗဟိုတွင် တန်းညှိရန် */
    padding: 10px 5%; 
    background-color: #1a1a1a;
    flex-wrap: wrap; /* ဖုန်းနဲ့ကြည့်ရင် ဆံ့အောင် အလိုအလျောက် ဆင်းပေးရန် */
}

.logo {
    font-size: 22px;
    font-weight: bold;
    color: #333;
    /* စာသားကို အောက်ကြောင်းမဆင်းစေရန် */
    white-space: nowrap; 
    /* နေရာအရမ်းကျဉ်းရင် စာလုံးမထပ်စေရန် အနည်းငယ်သေးပေးခြင်း (Optional) */
    flex-shrink: 0; 
}

/* ဖုန်းအတွက် သီးသန့် အနည်းငယ် ထပ်ပြင်ရန် */
@media (max-width: 480px) {
    .logo {
        font-size: 18px; /* ဖုန်းမှာ စာလုံးအရွယ်အစား နည်းနည်းလျှော့လိုက်ရင် ပိုဆန့်ပါတယ် */
    }
}

/* ခလုတ်များ စုစည်းမှု */
.nav-links {
    display: flex;
    list-style: none;
    gap: 10px;
    margin: 0;
    padding: 0;
}

/* ခလုတ်ဒီဇိုင်း */
.nav-links li a {
    text-decoration: none;
    color: white;
    font-weight: 600;
    font-size: 13px;
    padding: 8px 15px;
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
    white-space: nowrap; /* စာသားကို နှစ်ကြောင်းမခွဲစေရန် */
}

.nav-links li a:hover {
    background: #01875f;
    transform: translateY(-2px);
}
/* ဖုန်းနဲ့ကြည့်တဲ့အခါ (Screen width 768px အောက်) အတွက် ပြင်ဆင်ချက် */
@media (max-width: 768px) {
    nav {
        flex-direction: column; /* စာသားနဲ့ ခလုတ်တွေကို အပေါ်အောက် ပြန်စီရန် */
        gap: 15px;
        padding: 15px;
        text-align: center;
    }

    .logo {
        max-width: 100%;
        font-size: 15px; /* ဖုန်းမှာ စာသားကို နည်းနည်းသေးလိုက်ပါ */
        margin-bottom: 5px;
    }

    .nav-links {
        justify-content: center;
        flex-wrap: wrap; /* ခလုတ်တွေ များနေရင် အောက်ကြောင်းကို ဆင်းပေးရန် */
        gap: 8px;
    }

    .nav-links li a {
        padding: 8px 12px; /* ဖုန်းမှာ ခလုတ်အရွယ်အစားကို နည်းနည်းလျှော့ရန် */
        font-size: 12px;
    }
}
/* --- Content Typography Update --- */

/* Heading (h1, h2) ဒီဇိုင်း */
h1, h2 {
    font-size: 2.2rem;
    font-weight: 800;
    margin-bottom: 20px;
    
    text-align: center;
    background: linear-gradient(45deg, #01875f, #00c8ff); /* အစိမ်းမှ အပြာရောင်ပြေး */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; /* စာသားကို အရောင်ပြေးဖြစ်စေရန် */
    letter-spacing: 1px;
}

/* Paragraph (p) စာသားဒီဇိုင်း */
p {
    font-size: 1.1rem;
    line-height: 1.8; /* စာကြောင်းအကွာအဝေးကို ကျယ်ကျယ်ဝန်းဝန်းထားရန် */
    color: #0ad23c;
    max-width: 800px;
    margin: 0 auto 20px;
    text-align: center;
    font-weight: 400;
    letter-spacing: 0.5px;
}

/* About, Services, Contact ထဲက Container တွေအတွက် */
section {
    padding: 60px 20px;
    border-radius: 20px;
    background: rgba(176, 15, 15, 0.03); /* ခပ်မှိန်မှိန် မှန်ကြည်ဒီဇိုင်း */
    margin: 20px;
    backdrop-filter: blur(10px);
}
/* --- Contact Buttons Modern Design --- */
.contact-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
    max-width: 400px;
    margin: 30px auto;
    padding: 10px;
}

.contact-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 15px;
    border-radius: 12px;
    text-decoration: none;
    color: white;
    font-weight: bold;
    font-size: 16px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

/* တစ်ခုချင်းစီအတွက် အရောင်များ */
.contact-phone { background: linear-gradient(45deg, #28a745, #20c997); }
.contact-email { background: linear-gradient(45deg, #ea4335, #ff5722); }
.contact-telegram { background: linear-gradient(45deg, #0088cc, #24A1DE); }
.contact-messenger { background: linear-gradient(45deg, #0084ff, #00c6ff); }

/* Mouse တင်လျှင် ဖြစ်ပေါ်မည့်ပုံစံ */
.contact-link:hover {
    transform: scale(1.03);
    box-shadow: 0 6px 20px rgba(0,0,0,0.2);
    filter: brightness(1.1);
}

.contact-link i, .contact-link img {
    width: 24px;
    height: 24px;
}
/* --- Home Contact Section Styling --- */
.home-contact {
    padding: 60px 20px;
    text-align: center;
    background: rgba(255, 255, 255, 0.05); /* မှန်ကြည်ဒီဇိုင်း ခပ်ဖျော့ဖျော့ */
    margin-top: 50px;
}

/* ခလုတ်များကို ဘေးတိုက်စီရန် (Row direction) */
.home-contact-btns {
    display: flex;
    flex-direction: row; /* ဘေးတိုက်စီခြင်း */
    justify-content: center;
    align-items: center;
    gap: 15px; /* ခလုတ်တစ်ခုနှင့်တစ်ခု ကြားအကွာအဝေး */
    flex-wrap: wrap; /* ဖုန်းမှာ နေရာမဆံ့ပါက အောက်ကြောင်းဆင်းရန် */
    margin-top: 30px;
}

/* ခလုတ်ဆိုဒ်ကို Home Page အတွက် အနည်းငယ် ချိန်ညှိခြင်း */
.home-contact-btns .contact-link {
    min-width: 160px; /* ခလုတ်တွေ အရွယ်အစား တူနေစေရန် */
    padding: 12px 20px;
    font-size: 14px;
}

/* ဖုန်းနဲ့ကြည့်တဲ့အခါ ခလုတ် ၂ ခုစီ ဘေးချင်းယှဉ်ပေါ်ရန် */
@media (max-width: 480px) {
    .home-contact-btns .contact-link {
        flex: 1 1 40%; /* ဖုန်းမှာ ဘေးတိုက် ၂ ခုစီ စီရန် */
    }
}
/* Viber ခလုတ်အတွက် ခရမ်းရောင်ပြေးဒီဇိုင်း */
.contact-viber { 
    background: linear-gradient(45deg, #7360f2, #5039d7); 
}

/* ခလုတ်တွေ အများကြီးဖြစ်သွားလို့ Home Page မှာ ဆိုဒ်နည်းနည်းပြန်ညှိမယ် */
.home-contact-btns .contact-link {
    min-width: 140px; /* ခလုတ် ၅ ခု ဘေးတိုက်ဆံ့အောင် နည်းနည်းသေးလိုက်တာပါ */
    padding: 10px 15px;
    font-size: 13px;
}
/* Home Page ကို About Page နဲ့ တူညီအောင် Mobile အတွက် ညှိခြင်း */
@media (max-width: 768px) {
    /* About Page မှာ သုံးထားတဲ့ Container နဲ့ တူအောင် လုပ်ခြင်း */
    .home-container, .main-content {
        width: 95% !important;
        padding: 10px !important;
        margin: 0 auto !important;
    }

    /* Logo နဲ့ Image တွေရဲ့ အရွယ်အစားကို About Page အတိုင်း ညှိခြင်း */
    .logo, .service-icon {
        max-width: 80px !important;
        height: auto !important;
    }

    /* စာလုံးအရွယ်အစားကို ညှိခြင်း */
    h1, h2 {
        font-size: 1.5rem !important;
        text-align: center !important;
    }
}
/* Navigation Links Container */
.nav-links {
    display: flex;
    list-style: none;
    gap: 15px;
}

/* ခလုတ်တစ်ခုချင်းစီ၏ ဒီဇိုင်း */
.nav-links li a {
    text-decoration: none;
    color: white;
    font-weight: 600;
    font-size: 15px;
    padding: 10px 20px;
    border-radius: 50px; /* ခလုတ်ကို အဝိုင်းပုံစံဖြစ်စေရန် */
    background: rgba(255, 255, 255, 0.1); /* မှန်ကြည်ရောင် အလင်း */
    backdrop-filter: blur(5px); /* နောက်ခံကို ဝေဝါးစေပြီး အလှဆင်ရန် */
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.4s ease; /* ပြောင်းလဲမှု နူးညံ့စေရန် */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    display: inline-block;
}

/* Mouse တင်လိုက်လျှင် ဖြစ်ပေါ်မည့် ဒီဇိုင်း (Hover Effect) */
.nav-links li a:hover {
    background: linear-gradient(45deg, #01875f, #00c8ff); /* အစိမ်းမှ အပြာရောင်ပြေး */
    color: white;
    transform: translateY(-3px); /* အပေါ်သို့ အနည်းငယ် ကြွတက်လာစေရန် */
    box-shadow: 0 8px 25px rgba(1, 135, 95, 0.4); /* အရောင်လင်းလက်စေရန် */
    border-color: rgba(255, 255, 255, 0.5);
}

/* လက်ရှိရောက်နေသော Page ခလုတ်ကို အရောင်လင်းထားရန် (Active State) */
.nav-links li a.active {
    background: #01875f;
    box-shadow: 0 0 15px rgba(1, 135, 95, 0.6);
}
/* Navigation Bar */
nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 5%;
    background: #000; /* Header နောက်ခံ အမည်းရောင် */
    position: sticky;
    top: 0;
    z-index: 1000;
}

/* Logo ကို အဖြူရောင်ပြောင်းခြင်း */
.logo {
    color: #ffffff !important; 
    font-size: 22px;
    font-weight: bold;
    white-space: nowrap;
}

/* Menu များကို ဘေးတိုက်စီခြင်း */
nav ul {
    list-style: none;
    display: flex; /* ဘေးတိုက်စီရန် */
    gap: 20px;
    margin: 0;
    padding: 0;
    
}

nav ul li a {
    text-decoration: none;
    color: #ffffff;
    font-weight: 500;
    transition: 0.3s;
    padding: 8px 12px;
}

nav ul li a:hover {
    color: #ff4757; /* Mouse တင်ရင် အရောင်ပြောင်းမယ် */
}



/* Slider ပုံများအတွက် CSS */
.hero {
    width: 100%;
    height: 550px;
    position: relative;
    overflow: hidden;
}

.slide {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0; /* ပုံတွေကို ဖျောက်ထားမယ် */
    transition: opacity 1s ease-in-out;
}

.slide.active {
    opacity: 1; /* လက်ရှိပြနေတဲ့ပုံကိုပဲ ဖော်မယ် */
}

/* Button အားလုံးအတွက် အခြေခံပုံစံ (လေးထောင့် ဘေးအဝိုင်း) */
nav ul li a {
    text-decoration: none;
    padding: 10px 25px;    /* ခလုတ် အကျယ်/အမြင့် */
    border-radius: 12px;   /* လေးထောင့်ကိုမှ ဘေးအဝိုင်းလေးဖြစ်အောင် */
    color: #ffffff !important; /* စာသားအားလုံး အဖြူရောင် */
    font-weight: 600;
    font-size: 15px;
    display: inline-block;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* ခလုတ်လေးတွေ ကြွတက်နေအောင် */
}

/* ၁ ခုမြောက် (Home) - Deep Red */
nav ul li:nth-child(1) a {
    background-color: #e84118;
}

/* ၂ ခုမြောက် (Services) - Royal Blue */
nav ul li:nth-child(2) a {
    background-color: #0097e6;
}

/* ၃ ခုမြောက် (About) - Emerald Green */
nav ul li:nth-child(3) a {
    background-color: #44bd32;
}

/* ၄ ခုမြောက် (Contact) - Midnight Purple/Blue */
nav ul li:nth-child(4) a {
    background-color: #D4AF37
}

/* Mouse တင်လိုက်ရင် ပိုလှသွားစေဖို့ (Hover Effect) */
nav ul li a:hover {
    transform: translateY(-3px); /* အပေါ်ကို ကြွတက်သွားမယ် */
    box-shadow: 0 6px 12px rgba(0,0,0,0.2);
    filter: brightness(1.1); /* အရောင်လေး နည်းနည်း ပိုလင်းလာမယ် */
}

/* Paragraph (p) စာသားဒီဇိုင်း - အစိမ်းရောင်ဖယ်ပြီး Premium ဖြစ်အောင် ပြင်ဆင်ထားသည် */
p {
    font-size: 1.1rem;
    line-height: 1.8; 
    color: #000000 !important; /* အစိမ်းရောင်နေရာတွင် Silver/White ပြောင်းလိုက်သည် */
    max-width: 800px;
    margin: 0 auto 20px;
    text-align: center;
    font-weight: 400;
    letter-spacing: 0.5px;
}

/* ခေါင်းစဉ်ကြီးများအတွက် ထပ်တိုးရန် */
h1 {
    color: #0097e6 !important; /* Premium Gold */
}

h2, h3 {
    color: #D4AF37 !important; /* Pure White */
}