/* Header Main wrapper */
.header {
    background: rgba(255, 255, 255, 0.98) !important;
    position: fixed;
    top: 0;
    width: 100%;
    height: 80px;
    z-index: 1000;
    display: flex;
    align-items: center;
    border-bottom: 2px solid rgba(0, 86, 179, 0.05);
}

.header-container {
    display: flex;
    width: 100%;
    padding: 0 50px;
    align-items: center;
    position: relative;
}

/* Navigation Layout */
.navigation {
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center;
}

/* Split Menu: Left & Right */
.nav-left, .nav-right {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1; /* Rendu pakkamum equal space edukkum */
}

.nav-right {
    justify-content: flex-end; /* Right side menu-vai kodi-ku thallum */
}

.navigation ul li a {
    color: #0056b3 !important;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 13px;
    padding: 0 20px;
    transition: 0.3s;
}

/* --- LOGO DEAD CENTER --- */
.logo {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1010;
}

.logo img {
    max-height: 55px;
    width: auto;
}

/* --- MOBILE VIEW --- */
@media (max-width: 991px) {
    .nav-left, .nav-right {
        display: none !important; /* Mobile-la desktop links hidden */
    }
    .logo {
        position: relative;
        left: 0; transform: none; top: 0;
        width: 100%; display: flex; justify-content: center;
    }
    .header-container {
        justify-content: space-between;
    }
}

/* 1. Header height-ai fix pannuvom (Video mela overlap aagama irukka) */
.header {
    height: 80px; /* Intha height fix-ah irukanum */
    background: rgba(255, 255, 255, 0.98) !important;
}

/* 2. Video Container Fix */
.homepage {
    margin-top: 80px;
    height: 70vh; /* Height-ai 80-lenthu 70-ku koraichathaala zoom auto-ah kuraiyum */
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #000;
    z-index: 1;
}

#myVideo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    /* 100% width/height kudutha black bars varaathu */
    width: 100%; 
    height: 100%;
    
    /* 'cover' use panna thaan black bars pogum. 
       Zoom-ai kuraikka namma mela 'homepage' height-ai koraichutom */
    object-fit: cover; 
    
    object-position: center; /* Video-voda nadu pakuthi theriyum */
    z-index: 1;
}
/* 4. Overlay - Text visibility-kaaga */
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.35); /* Subtle darkness */
    z-index: 2;
}

/* 5. Mobile View Video Size */
@media (max-width: 767px) {
    .homepage {
        height: 50vh; /* Mobile-la banner size koraichurukkom */
        margin-top: 70px;
    }
} 
@media (max-width: 991px) {
    .menu { 
        display: block !important; 
        z-index: 10002; /* Logo-vukku mela theriya */
    }
}