/* ==========================================================================
   1. Basic Setup & General Styles
   ========================================================================== */
body {
    background-color: #0c101d;
    color: #ffffff;
    font-family: 'Inter', sans-serif;
    margin: 0;
    font-size: 16px;
}

.page-container {
    padding: 120px 4rem 4rem 4rem;
    max-width: 1100px;
    margin: 0 auto;
}

.cta-button {
    display: inline-block;
    background-color: #ff8a00;
    color: #ffffff;
    padding: 1rem 2rem;
    text-decoration: none;
    font-weight: 700;
    margin-top: 2rem;
    border: 2px solid #ff8a00;
    transition: all 0.3s ease;
}

.cta-button:hover {
    background-color: transparent;
    color: #ff8a00;
}

/* ==========================================================================
   2. Header & Navigation
   ========================================================================== */
.main-header {
    position: absolute;
    z-index: 100;
    width: 100%;
    padding: 2rem 4rem;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo-image {
    height: 140px; /* Adjusted for a cleaner look */
    width: auto;
}

.main-nav {
    display: flex;
    align-items: center;
    gap: 1rem; /* Space between nav links and controls */
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 2rem; /* Space between nav items */
}

.nav-links a {
    color: #fff;
    text-decoration: none;
    font-weight: 600;
}

.nav-controls {
    display: flex;
    align-items: center;
    gap: 2rem; /* Space between buttons */
}

.lang-button {
    background: none;
    border: 1px solid #ffffff;
    color: #ffffff;
    padding: 0.5rem 0.8rem;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.lang-button:hover {
    background-color: #ffffff;
    color: #0c101d;
}

.menu-icon {
    display: none; /* Hidden on desktop */
    background: none;
    border: none;
    color: white;
    font-size: 2rem;
    cursor: pointer;
}


/* ==========================================================================
   3. Hero Section & Animations
   ========================================================================== */
.hero-section {
    position: relative;
    height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.hero-content {
    position: relative;
    z-index: 20;
    text-align: center;
    max-width: 800px;
    padding: 2rem;
}

.hero-content h1 {
    font-size: 3.5rem;
    font-weight: 600;
    line-height: 1.2;
    text-shadow: 0 0 20px rgba(0,0,0,0.7);
}

.intro-section {
    background-color: #0c101d;
    padding: 5rem 2rem;
    text-align: center;
}

.intro-section p {
    font-size: 1.5rem;
    font-weight: 400;
    color: #e0e0e0;
    line-height: 1.6;
    max-width: 900px;
    margin: 0 auto;
}

/* Background Layers */
.aurora-background {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-image: url('visuals/aurora-background.jpg');
    background-size: cover; background-position: bottom center; z-index: 5;
}

.aurora-lights {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-image: url('visuals/aurora-lights-final.png');
    background-size: contain; background-repeat: no-repeat; background-position: bottom center;
    z-index: 10;
    animation: shimmer-intense 10s infinite alternate ease-in-out;
}

@keyframes shimmer-intense {
    from { opacity: 0.8; transform: scale(0.98) translateY(8px); }
    to { opacity: 1; transform: scale(1.02) translateY(-8px); }
}

/* Starfield Layers */
#stars1, #stars2, #stars3 {
    width: 2px; height: 2px; background: transparent;
    position: absolute; top: 0; left: 0; z-index: 1;
}

@keyframes animStar {
    from { transform: translateY(0px); }
    to   { transform: translateY(-2000px); }
}

/* Layer 1: Small, fast stars */
#stars1 {
    animation: animStar 70s linear infinite;
    box-shadow: 1833px 1241px #FFF, 939px 1279px #FFF, 1294px 958px #FFF, 1079px 1359px #FFF, 163px 147px #FFF, 1374px 1849px #FFF, 649px 183px #FFF, 1373px 1230px #FFF, 1838px 158px #FFF, 33px 1238px #FFF, 1432px 143px #FFF, 829px 1469px #FFF, 510px 1078px #FFF, 1433px 402px #FFF, 532px 1313px #FFF, 1334px 1900px #FFF, 1146px 1646px #FFF, 1488px 338px #FFF, 1957px 1138px #FFF, 1625px 843px #FFF, 938px 1243px #FFF, 484px 137px #FFF, 1063px 1339px #FFF, 1152px 242px #FFF, 1018px 1014px #FFF, 245px 1239px #FFF, 1293px 83px #FFF, 1139px 1045px #FFF, 179px 1904px #FFF, 1105px 105px #FFF, 151px 184px #FFF, 1269px 703px #FFF, 1251px 1530px #FFF, 1177px 1876px #FFF, 629px 1749px #FFF, 1242px 142px #FFF, 73px 180px #FFF, 1690px 1021px #FFF, 1162px 1311px #FFF, 953px 1354px #FFF, 456px 1898px #FFF, 888px 45px #FFF, 1900px 734px #FFF, 23px 899px #FFF, 945px 1500px #FFF, 7px 852px #FFF, 460px 1136px #FFF, 1509px 1118px #FFF, 1658px 118px #FFF, 1137px 144px #FFF, 146px 1416px #FFF, 1481px 1126px #FFF, 382px 1935px #FFF, 1581px 1237px #FFF, 1389px 1073px #FFF, 1943px 1289px #FFF, 25px 1030px #FFF, 1208px 100px #FFF, 1095px 1386px #FFF, 1387px 1483px #FFF, 196px 1098px #FFF, 195px 1175px #FFF, 187px 133px #FFF, 1494px 1475px #FFF, 125px 1228px #FFF, 1104px 1155px #FFF, 1678px 1205px #FFF, 1210px 1113px #FFF, 1032px 1313px #FFF, 584px 1235px #FFF, 170px 1184px #FFF, 1376px 1303px #FFF, 1131px 1390px #FFF, 1333px 1341px #FFF;
}

/* Layer 2: Medium stars, medium speed */
#stars2 {
    animation: animStar 120s linear infinite;
    box-shadow: 181px 112px 0px 0.5px #FFF, 1888px 1431px #FFF, 1083px 1289px 0px 0.5px #FFF, 1111px 1325px #FFF, 1908px 531px 0px 0.5px #FFF, 1729px 929px #FFF, 1928px 1058px 0px 0.5px #FFF, 661px 1494px #FFF, 1445px 569px 0px 0.5px #FFF, 103px 933px #FFF, 345px 899px 0px 0.5px #FFF, 411px 1476px #FFF, 1532px 28px 0px 0.5px #FFF, 1346px 1255px #FFF, 1115px 1355px 0px 0.5px #FFF, 558px 1199px #FFF, 1697px 461px #FFF, 112px 1133px 0px 0.5px #FFF, 1391px 633px #FFF, 799px 1431px #FFF, 1775px 1222px 0px 0.5px #FFF, 1250px 1726px #FFF, 620px 1279px 0px 0.5px #FFF, 35px 109px #FFF, 1059px 1029px #FFF, 370px 1184px 0px 0.5px #FFF, 1395px 1434px #FFF, 1476px 134px 0px 0.5px #FFF, 1198px 1195px #FFF, 1709px 1143px 0px 0.5px #FFF, 497px 1136px #FFF, 1500px 348px 0px 0.5px #FFF, 1196px 707px #FFF, 104px 102px 0px 0.5px #FFF, 888px 1974px #FFF, 122px 1493px #FFF, 1102px 135px 0px 0.5px #FFF, 1968px 1210px #FFF, 175px 827px 0px 0.5px #FFF, 1782px 1149px #FFF, 1331px 1152px 0px 0.5px #FFF, 185px 1996px #FFF, 11px 1221px 0px 0.5px #FFF, 1003px 187px #FFF, 142px 1292px 0px 0.5px #FFF, 100px 1934px #FFF, 1599px 1052px 0px 0.5px #FFF, 184px 106px #FFF, 1801px 1197px 0px 0.5px #FFF, 1355px 1163px #FFF, 1141px 1238px 0px 0.5px #FFF, 1185px 110px #FFF, 101px 1186px 0px 0.5px #FFF, 1109px 1345px #FFF;
}

/* Layer 3: Large, slow stars */
#stars3 {
    animation: animStar 170s linear infinite;
    box-shadow: 172px 1608px 0px 1px #FFF, 893px 129px #FFF, 1309px 406px 0px 1px #FFF, 113px 464px #FFF, 1285px 1335px 0px 1px #FFF, 292px 1318px #FFF, 508px 113px 0px 1px #FFF, 477px 1172px #FFF, 64px 389px 0px 1px #FFF, 1216px 1421px #FFF, 1686px 1930px 0px 1px #FFF, 1852px 1869px #FFF, 334px 1531px 0px 1px #FFF, 638px 1118px #FFF, 143px 499px 0px 1px #FFF, 135px 632px #FFF, 219px 1813px 0px 1px #FFF, 122px 653px #FFF, 1304px 93px 0px 1px #FFF, 166px 113px #FFF, 1634px 1836px 0px 1px #FFF, 1526px 1750px #FFF, 1195px 1371px 0px 1px #FFF, 1024px 1833px #FFF, 131px 1121px 0px 1px #FFF, 1971px 1999px #FFF, 1701px 1735px 0px 1px #FFF, 1238px 844px #FFF, 201px 1640px 0px 1px #FFF, 1573px 1057px #FFF, 513px 1844px 0px 1px #FFF, 1732px 1373px #FFF, 100px 100px 0px 1px #FFF, 754px 564px 0px 1px #FFF, 1945px 34px #FFF, 126px 1111px 0px 1px #FFF, 1910px 1066px #FFF, 1799px 1215px 0px 1px #FFF, 145px 114px #FFF, 1140px 1131px 0px 1px #FFF, 1220px 1183px #FFF, 185px 118px 0px 1px #FFF, 1166px 1092px #FFF, 105px 105px 0px 1px #FFF, 1211px 128px #FFF;
}



/* ==========================================================================
   4. Page-Specific Styles (Contact, Services, About)
   ========================================================================== */

/* General Page Header */
.page-header { text-align: center; max-width: 800px; margin: 0 auto 4rem auto; }
.page-header h1 { margin-bottom: 1rem; }
.page-header .sub-headline { font-size: 1.2rem; color: #cccccc; margin-top: -0.5rem; }

/* Services Page */
.service-pillar { margin-bottom: 4rem; }
.service-pillar h2 { font-size: 2rem; color: #ff8a00; border-bottom: 2px solid #333; padding-bottom: 1rem; margin-bottom: 2rem; }
.service-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; }
.service-item { background-color: #111627; padding: 2rem; border-radius: 8px; border-left: 4px solid #ff8a00; }
.service-item h3 { margin-top: 0; margin-bottom: 1rem; }
.service-item p { color: #cccccc; line-height: 1.6; }

/* About Us Page */
.about-content { max-width: 800px; margin: 0 auto; }
.about-content h2 { font-size: 2rem; color: #ff8a00; margin-top: 3rem; margin-bottom: 1.5rem; border-bottom: 2px solid #333; padding-bottom: 1rem; }
.about-content p { font-size: 1.1rem; line-height: 1.7; margin-bottom: 1.5rem; color: #cccccc; }
.leadership-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; margin-top: 2rem; }
.leader-profile { background-color: #111627; padding: 2rem; border-radius: 8px; display: flex; align-items: center; gap: 2rem; }
.leader-image { width: 180px; height: 280px; border-radius: 8px; object-fit: cover; border: 3px solid #0c101d; }
.leader-text { flex: 1; }
.leader-name { margin-top: 0; color: #ff8a00; }
.leader-title { font-weight: 700; color: #cccccc; margin-top: -1rem; margin-bottom: 1rem; }

/* Contact Page */
.contact-grid { display: grid; grid-template-columns: 1fr 2fr; gap: 3rem; background-color: #111627; padding: 3rem; border-radius: 8px; }
.contact-info h3, .contact-form h3 { margin-top: 0; color: #ff8a00; }
.contact-form label { display: block; margin-bottom: 0.5rem; }
.contact-form input, .contact-form textarea { width: 100%; padding: 0.8rem; margin-bottom: 1.5rem; background-color: #0c101d; border: 1px solid #333; color: #FFF; border-radius: 4px; font-family: 'Inter', sans-serif; box-sizing: border-box; }
.contact-form button.cta-button { width: 100%; border: none; }


/* ==========================================================================
   5. Responsive Design (Mobile)
   ========================================================================== */
@media (max-width: 768px) {
    
    /* ---- Header & Navigation on Mobile ---- */
    .main-header {
        padding: 1rem 1.5rem;
    }

    .logo-image {
        height: 40px;
    }

    /* Hide the desktop links container */
    .main-nav .nav-links {
        display: none !important;
        
        /* Style it as a dropdown menu */
        position: absolute;
        top: 70px; /* Position below header */
        left: 0;
        right: 0;
        width: 100%;
        background-color: #111627;
        box-shadow: 0 4px 6px rgba(0,0,0,0.2);
        
        /* Stack links vertically */
        flex-direction: column;
	align-items: center;
        padding: 1rem 0;
        gap: 1.5rem;
	align-items: center;
    }

    /* This is the class our JS will toggle */
    .main-nav .nav-links.active {
	display: flex !important;
        display: flex; /* Show the menu */
    }

    /* Show the hamburger menu icon */
    .menu-icon {
        display: block;
    }

    /* ---- General Mobile Layout ---- */
    .page-container {
        padding: 80px 1.5rem 2rem 1.5rem;
    }

    .hero-content h1 {
        font-size: 2.2rem;
    }

    .cta-button {
        padding: 0.8rem 1.5rem;
        margin-top: 1.5rem;
    }

    /* ---- Page Specific Mobile Layout ---- */
    .leader-profile {
        flex-direction: column;
        text-align: center;
    }

    .contact-grid {
        grid-template-columns: 1fr;
    }
}