/* ================================
   EDMOSS BRAND COLORS
================================ */

:root{

    --purple:#0b0416;

    --purple-light:#16082d;

    --gold:#facc15;

    --gold-dark:#eab308;

    --white:#ffffff;

    --gray:#94a3b8;

}



/* ================================
   GLOBAL
================================ */

body{

    margin:0;

    background:var(--purple);

    color:white;

    font-family:
    'Inter',
    sans-serif;

}




/* ================================
   NAVBAR
================================ */


nav{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    z-index:9999;


    background:
    rgba(11,4,22,.92);


    backdrop-filter:
    blur(20px);


    border-bottom:
    1px solid rgba(250,204,21,.18);

}




.nav-inner{


    max-width:1200px;

    height:80px;

    margin:auto;


    padding:0 25px;


    display:flex;

    align-items:center;

    justify-content:space-between;


}




.logo{


    width:58px;

    height:58px;


    border-radius:50%;


    object-fit:cover;


    border:
    2px solid rgba(250,204,21,.4);


}







/* DESKTOP MENU */


.nav-links{


    display:flex;

    align-items:center;


    gap:8px;


    background:
    rgba(255,255,255,.04);


    padding:6px;


    border-radius:999px;


    border:
    1px solid rgba(255,255,255,.08);


}



.nav-links a{


    color:white;


    text-decoration:none;


    font-size:14px;


    padding:
    10px 18px;


    border-radius:999px;


    transition:.3s;


}





.nav-links a:hover{


    color:var(--gold);


    background:
    rgba(250,204,21,.08);


}










/* CONTACT BUTTON */


.btn-gold{


    display:inline-flex;


    align-items:center;


    justify-content:center;



    padding:
    12px 25px;



    background:
    linear-gradient(
    180deg,
    #fde68a,
    #eab308
    );



    color:#0b0416;



    font-weight:800;



    border-radius:999px;



    text-decoration:none;



    transition:.3s;



    box-shadow:
    0 8px 25px rgba(234,179,8,.25);


}




.btn-gold:hover{


    transform:
    translateY(-3px);


    box-shadow:
    0 12px 35px rgba(234,179,8,.45);


}








/* MOBILE TOGGLE */


.menu-toggle{


    display:none;


    background:none;


    border:none;


    cursor:pointer;


    flex-direction:column;


    gap:6px;


}




.menu-toggle span{


    width:30px;


    height:3px;


    background:var(--gold);


    border-radius:20px;


    transition:.3s;


}







/* MOBILE MENU */


#mobileMenu{


    position:absolute;


    top:80px;


    left:0;


    width:100%;



    background:
    #0b0416;



    padding:
    35px 25px;



    display:flex;


    flex-direction:column;


    gap:22px;


    text-align:center;



    border-top:
    1px solid rgba(250,204,21,.2);



    opacity:0;


    visibility:hidden;



    transform:
    translateY(-20px);



    transition:.35s ease;


}




#mobileMenu.show{


    opacity:1;


    visibility:visible;


    transform:
    translateY(0);


}




#mobileMenu a{


    color:white;


    text-decoration:none;


    font-size:17px;


}




#mobileMenu a:hover{


    color:var(--gold);


}









/* HAMBURGER ACTIVE */


.menu-toggle.active span:nth-child(1){


    transform:
    rotate(45deg)
    translate(6px,6px);


}



.menu-toggle.active span:nth-child(2){


    opacity:0;


}



.menu-toggle.active span:nth-child(3){


    transform:
    rotate(-45deg)
    translate(7px,-7px);


}







/* ================================
   CAREER PAGE COLORS
================================ */



.star-field{


    background-image:


    radial-gradient(
    white 1px,
    transparent 1px
    );


    background-size:
    40px 40px;


}





h1,
h2{


    color:white;


}



.text-cyan-400{


    color:var(--gold)!important;


}



.bg-cyan-400\/10{


    background:
    rgba(250,204,21,.1)!important;


}





.border-white\/10{


    border-color:
    rgba(250,204,21,.15)!important;


}








/* MOBILE */


@media(max-width:768px){



    .nav-links,
    .desktop-btn{


        display:none;


    }




    .menu-toggle{


        display:flex;


    }



}