@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap");

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



a{
    text-decoration:none;
}

ul{
    list-style:none;
}

.container{
    width:90%;
    max-width:1920px;
    margin:auto;
}

/*======================
Header
=======================*/

.header{
	position:sticky;
	top:0;
	left:0;
	width:100%;
	z-index:9999;
	box-shadow:0 4px 15px rgba(0,0,0,.1);
	background-color: #FFFFFF;
}

.header .container{
    display:flex;
    align-items:center;
    justify-content:space-between;
    height:85px;
}

/*======================
Logo
=======================*/

.logo a{
    display:flex;
    align-items:center;
    color:#fff;
    gap:12px;
}

.logo img{
	width:350px;
}
.logo-text{
    display:flex;
    align-items:center;
    gap:5px;
}

.logo-text p{
    margin:0;
    font-size:24px;
    font-weight:700;
    font-family:"Outfit", sans-serif;
}

.white{
    color:#fff;
}

.gold{
    color:#efc869;
}

/*==============================
Navigation
==============================*/

.nav > ul{
    display:flex;
    align-items:center;
    gap:0;
}

.nav > ul > li{
    position:relative;
}

.nav > ul > li > a{
	font-family: "Outfit", sans-serif;
	display:block;
	padding:30px 18px;
	color:#01215c;
	font-size:18px;
	font-weight: 500;


    transition:.3s;
}

.nav > ul > li:hover > a{
    color:#f7b733;
}

/* Active Menu */
.nav > ul > li.active > a,
.nav > ul > li > a.active {
	color: #dba152;
}

/* Optional: active submenu links */
.submenu li.active > a,
.submenu li > a.active {
    background: #efc869;
    color: #fff;
}

/*==============================
Desktop Dropdown
==============================*/

.submenu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 270px;
    background: #fff;
    box-shadow: 0 10px 25px rgba(0,0,0,.12);
    display: none;
    z-index: 999;
    list-style: none;
    padding: 0;
    margin: 0;
}

.dropdown:hover > .submenu {
    display: block;
}

.submenu li {
    position: relative;
    width: 100%;
    list-style: none;
}

.submenu li a {
    font-family: "Outfit", sans-serif;
    display: block;
    padding: 14px 20px;
    color: #333;
    text-decoration: none;
    border-bottom: 1px solid #eee;
    transition: 0.3s;
    background: #fff;
}

.submenu li:last-child > a {
    border-bottom: none;
}

.submenu li:hover > a {
    background: #0a2342;
    color: #fff;
}

/* Third Level Menu */
.submenu li > ul {
    position: absolute;
    top: 0;
    left: 100%;
    min-width: 240px;
    background: #fff;
    box-shadow: 0 10px 25px rgba(0,0,0,.12);
    display: none;
    padding: 0;
    margin: 0;
    list-style: none;
}

/* Show third level on hover */
.submenu li:hover > ul {
    display: block;
}

/* Third level links */
.submenu li > ul li {
    font-family: "Outfit", sans-serif;
    
    padding: 14px 20px;
    background: #fff;
    color: #333;
    border-bottom: 1px solid #eee;
}

.submenu li > ul li:last-child a {
    border-bottom: none;
}

.submenu li > ul li:hover {
    background: #0a2342;
    color: #fff;
}


/* Mobile */
@media (max-width: 991px) {

    .submenu{
        position: static;
        width: 100%;
        display: none;
        box-shadow: none;
        background: #0a2342;
    }

    .dropdown.active > .submenu{
        display: block;
    }

    .submenu li{
        width: 100%;
    }

    .submenu li a{
        padding: 12px 20px;
        color: #fff;
        border-bottom: 1px solid rgba(255,255,255,.1);
        background: transparent;
    }

    /* Third-level submenu */
    .submenu li > ul{
        position: static;
        display: none;
        width: 100%;
        min-width: 100%;
        box-shadow: none;
        background: #13345f;
        padding-left: 15px;
    }

    /* Show when active */
    .submenu li.active > ul{
        display: block;
    }

    .submenu li > ul li a {
        padding: 12px 30px;
        color: #ddd;
        background: #0a2342;
        border-bottom: 1px solid rgba(255, 255, 255, .1);
    }

    .submenu li a:hover,
    .submenu li > ul li a:hover{
        background: #1c4b84;
    }
}

/*==============================
Mobile
==============================*/

.menu-toggle{
    display:none;
    font-size:32px;
    color:#fff;
    cursor:pointer;
}

@media (max-width:1300px){

.nav > ul > li > a {
    padding: 30px 11px;
}
}


@media (max-width:1200px){

.nav > ul > li > a {
    font-size: 16px;
}
}


@media (max-width:1100px){

    .menu-toggle{
        display:block;
    }

    .nav{
        position:fixed;
        top:85px;
        left:-100%;
        width:280px;
        height:calc(100vh - 85px);
        background:#0a2342;
        transition:.4s;
        overflow-y:auto;
    }

    .nav.active{
        left:0;
    }

    /* Only top-level menu */
    .nav > ul{
        display:block;
    }

    .nav > ul > li{
        width:100%;
    }

    .nav > ul > li > a{
        padding:15px 20px;
        border-bottom:1px solid rgba(255,255,255,.08);
    }

    /* Submenu */
    .submenu{
        position:static;
        display:none;
        min-width:100%;
        background:#17395f;
        box-shadow:none;
    }

    .dropdown.active .submenu{
        display:block;
    }

    .submenu li{
        display:block;
        width:100%;
    }

    .submenu li a{
        display:block;
        padding:12px 40px;
        color:#fff;
        background:#17395f;
        border-bottom:1px solid rgba(255,255,255,.08);
    }

    .submenu li a:hover{
        background:#204c78;
    }

}


@media(max-width:768px){

    .logo-text span {
        font-size: 18px;
        font-weight:500;
    }

    .logo-text  {
        font-size: 18px;
        font-weight:500;
    }

    .logo-text p {
        font-size: 18px;
    }

}