/* ==========================
   GENERAL
========================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family: "Source Sans 3", sans-serif;
    background:#fff;
    color:#222;
    line-height:1.5;
    position:relative;
}

body::before{
    content:"";
    position:fixed;
    inset:0;

    background:url("images/background.png") center center/cover no-repeat;

    opacity:0.2;

    z-index:-1;

    pointer-events:none;
}
button{
    font:inherit;
}

/* ==========================
   HEADER
========================== */

.header{
    background:#434f98;
    height:90px;
}

.container{
    width:100%;
    max-width:1600px;
    margin:0 auto;

    display:flex;
    align-items:center;
    height:100%;
}

/* ==========================
   LOGO
========================== */

.logo{
    margin-left:20px;
    margin-right:35px;
    flex-shrink:0;
}

.logo img{
    height:72px;
    display:block;
}

/* ==========================
   NAVIGATION
========================== */

.nav{
    flex:1;

    display:flex;
    justify-content:center;
    align-items:center;
}

/* Top-level links & dropdown buttons */

.nav > a,
.nav-item > button{

    font-family:inherit;

    color:#fff;
    background:none;
    border:none;

    text-decoration:none;

    display:flex;
    align-items:center;
    justify-content:center;

    height:90px;

    padding:0 16px;

    font-size:17px;
    font-weight:600;

    white-space:nowrap;

    cursor:pointer;

    transition:background .2s ease;
}

.nav-item{
    position:relative;
}

/* Dropdown arrow */

.nav-item span{
    font-size:10px;
    margin-left:4px;
    opacity:.8;
    font-weight:400;
}

/* ==========================
   DROPDOWN
========================== */

.mega-menu{

    position:absolute;

    top:100%;
    left:50%;

    transform:translateX(-50%);

    min-width:290px;

    background:#434f98;

    border:none;

    box-shadow:0 10px 25px rgba(0,0,0,.18);

    opacity:0;
    visibility:hidden;

    transition:.2s ease;

    z-index:1000;
}

.nav-item:hover .mega-menu{

    opacity:1;
    visibility:visible;
}

.mega-menu a{

    display:block;

    text-align:center;

    text-decoration:none;

    color:#fff;

    padding:18px 22px;

    font-size:17px;
    font-weight:600;

    border-bottom:1px solid rgba(255,255,255,.15);

    transition:background .2s ease;
}

.mega-menu a:last-child{
    border-bottom:none;
}

/* Hover effect */

.nav > a:hover,
.nav-item > button:hover,
.mega-menu a:hover{
    background:#0c9fda;
}

/* ==========================
   FOOTER
========================== */

.footer{
    background:#434f98;
    padding:40px 80px;
    margin-top:50px;
}

.footer-container{
    max-width:1400px;
    margin:0 auto;

    display:flex;
    justify-content:space-between;
    align-items:center;
}

.footer-logo img{
    height:70px;
    display:block;
}

.footer-right{
    display:flex;
    align-items:center;
    gap:50px;
}

.socials{
    display:flex;
    align-items:center;
    gap:18px;
}

.socials a{
    color:#fff;
    font-size:32px;
    text-decoration:none;
    transition:opacity .2s ease;
}

.socials a:hover{
    opacity:.7;
}

.footer-links{
    display:flex;
    align-items:center;
    gap:30px;
}

.footer-links a{
    color:#fff;
    text-decoration:none;
    font-size:18px;
    font-weight:600;
    transition:opacity .2s ease;
}

.footer-links a:hover{
    opacity:.8;
}