@import url('http://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap');
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", serif;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: linear-gradient(to right, #e2e2e2, #c9d6ff);
    color: #f7f7f7;
}

.container {
   
        margin: 0;
       
        background-image: url('images/tops_vista.jpg');
        background-size: cover;          /* Full screen */
        background-position:top  center;     /* Change to top/bottom if needed */
        background-repeat: no-repeat;
        background-attachment: fixed;    
        height: 100vh;
        font-family: Arial;
        position: relative;
}

.form-box {
    width: 300px;
    max-height: 600px;
    padding: 30px;
     backdrop-filter: blur(10px) saturate(120%);
    -webkit-backdrop-filter: blur(10px) saturate(120%);
     flex-direction:column;
    /* Positioning styles ကို ပြင်ဆင်ခြင်း */
    position: absolute; 
    top: 250px; /* အပေါ်ကနေ ၅၀ pixel ကွာ */
    
    /* 1. ဘယ်ဘက်နဲ့ ညာဘက်ကို 50% ဆွဲခြင်း */
    left: 60%;
    
    /* 2. သူ့ကိုယ်သူရဲ့ အကျယ် 50% ပြန်ဆုတ်ခြင်း (အလယ်တည့်တည့်ကျအောင်) */
    transform: translateX(50%); /* X-axis ပေါ်မှာ -50% ရွှေ့ခြင်း */
    
    /* ညာဘက်က left: 0px; လိုမျိုး ထိန်းချုပ်မှု မရှိတော့ဘူး */
    /* right: 20px; ကို ဖျက်လိုက်ပါ */ 

    
    background: none ;
    border-radius: 15px;
    box-shadow: 0 0 5px rgba(red, green, blue, alpha);
    display: none;
}
.form-box.active {
    display: block;
}




h2 {
    font-size: 34px;
    text-align: center;
    margin-bottom: 20px;
}

input,
select{
    width: 100%;
    padding: 12px;
    background: #eee;
    border-radius: 6px;
    border: none;
    outline: none;
    font-size: 16px;
    color: #0c0000;
    margin-bottom: 20px;
}

button{
    width: 250px;
    padding: 12px;
    background: #e01818;
    border-radius: 60px;
    border: none;
    cursor: pointer;
    font-size: 16px;
    color: #fff;
    font-weight: 500;
    margin-bottom: 20px;
    transition: 0.5s;

}

button:hover{
    background: #1c1355;
}

p {
    font-size: 14.5px;
    text-align: center;
    margin-bottom: 5px;
}

p a {
    color: #ee0a0a;
    text-decoration: none;
}
p a:hover {
    text-decoration:  underline;
    
}

.error-message {
    width: 100%;
    padding: 12px;
    background: none ;
    border-radius: 6px;
    font-size: 14px;
    color: #f10909;
    text-align: center;
    margin-bottom: 20px;
}
.company-logo {
    /* အရေးကြီးဆုံး: ပုံရဲ့ အများဆုံး အကျယ်ကို ကန့်သတ်ခြင်း */
    max-width: 10px; /* ဥပမာ: 150 pixels ထက် မကြီးစေရ */
    
    /* အချိုးအစား (Aspect Ratio) မပျက်စေရန် */
    height: auto;     
    
    /* ဖောင်ရဲ့ အလယ်တည့်တည့်မှာ ပေါ်စေရန် */
    display: block;   
    margin: 10px auto 0 auto; 
    
    /* လိုအပ်ပါက ပုံ၏ ရှင်းလင်းပြတ်သားမှုကို ချိန်ညှိနိုင်သည် */
    /* opacity: 1.0; */
}

  /* Left Text Section */

.left-content {
    position:absolute;
    left: 10%;
    top: 360px;
    font-size: 20px;
}
.subtitle{
    position:absolute;
    left: 0%;
    font-size: 18px;
    font-weight: 200;
}
.p{
    position:absolute;
    left: 0%;
    font-size: 16px;
    text-align: left;
    font-weight: 200;
}

.row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  font-size:13px;
  margin-top:6px;
}

.remember{
  display:flex;
  align-items:center;
  gap:8px;
  color: rgba(255,255,255,0.85);
}
.remember input{width:16px; height:16px; accent-color:#fff}

.forgot a{
  color: rgba(255,255,255,0.9);
  text-decoration:none;
  font-weight:500;
}
.forgot a:hover{ text-decoration:underline; }

.footer-note{
  margin-top:14px;
  text-align:center;
  font-size:13px;
  color: rgba(255,255,255,0.85);
}
.footer-note a{
  color:#fff;
  font-weight:600;
  text-decoration:none;
  margin-left:6px;
}

/* nav-item ကို 3D Globe အတွက် perspective ထည့်ခြင်း */
.nav-item {
    /* ... Existing styles ... */
    perspective: 1000px; /* 3D အနက်ရှိုင်းကို သတ်မှတ်ခြင်း */
    transform-style: preserve-3d; 
}

/* 1. လေယာဉ် (Plane Floating) Animation */
@keyframes float-plane {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-6px); } 
    100% { transform: translateY(0px); }
}

.plane-flying {
    display: inline-block;
    animation: float-plane 2s ease-in-out infinite; 
    color: #60a5fa; /* လှပသော အပြာရောင် */
}

/* 2. ကမ္ဘာလုံး (Globe Y-axis Spin - ဘေးတိုက်လည်ခြင်း) Animation */
@keyframes globe-rotate-y {
    0% { transform: rotateY(0deg); }
    100% { transform: rotateY(360deg); }
}

.globe-3d-spin {
    display: inline-block;
    animation: globe-rotate-y 8s linear infinite; 
}

/* 3. Data Processing Animation အတွက် color ကိုလဲ ပြင်ပေးလိုက်ပါ */
.fa-pulse {
    color: #38bdf8;
}

/* --- Submenu အတွက် Logo စတိုင်လ် --- */
.logo-icon-small {
    width: 20px; /* Logo အကျယ် */
    height: 20px; /* Logo အမြင့် */
    margin-right: 15px; /* စာသားနဲ့ ခပ်ခွာခွာ ခြားရန် */
    object-fit: contain; /* ပုံမပျက်အောင် ထိန်းသိမ်းခြင်း */
    vertical-align: middle; /* စာသားနဲ့ တန်းတူထားခြင်း */
}

/* Menu Button အတွင်းရှိ စာသားနေရာနှင့် icon နေရာ ခြားခြင်းကို menu-btn-content တွင် ထိန်းထားပြီးသား ဖြစ်သည်။ */