/*navbar*/
@import url('https://fonts.googleapis.com/css2?family=Alegreya&family=Bungee+Spice&family=Lato:wght@300&family=Poppins:wght@200&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}


/* Back to top button styles */

#myBtn{
  display: none;
  position: fixed; 
  bottom: 90px;
  right: 20px;    /*place the button 30px from the right*/
  z-index: 99;    /*Make sure it does not overlap with other content*/
  border: none;
  border-radius: 90px;
  outline: none;
  background: transparent;
  font-size: 40px;
  color: #1e3b54;
  cursor: pointer;
  transition: all 0.5s ease-in-out;
}
#myBtn:hover{
  color: #122331;

}
/* End of Back to top button styles */

/* HEADER SECTION STYLES*/
.header{
    background: #122331;
    position: sticky;
    max-width: 100vw;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 2rem;
    z-index: 30;
    top: 0;
    width: 100%;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    border-bottom: 3px solid white;
    transition: top 0.3s;
}
.links_container{
    display:flex;
}
.team_logo{
    position: absolute;
    top: 3px;
    margin-left: 30px;
    z-index: 99;
}


/* -------------------- */
/* only makes the unordered list visible to the user horizontal and not all unordered lists */
.header .menu-items{
    display: flex;                    
    align-items: center;
}
/* -------------------- */


/* --------------------- */
/* makes all unordered list items have no styles */
.header ul{
    list-style: none;
    font-weight: normal;
    margin-right: 80px;
}
/* -------------------- */



.header a{
    text-decoration: none;
    color:  white;
    padding: 0.5rem 1rem;
    transition: all 0.2s ease-in-out;
    font-weight: bold;
}
.entrepreneurship_link{
    text-decoration: none;
    color:  white;
    padding: 8px 0.1px;
    transition: all 0.2s ease-in-out;
    font-weight: bold;
}


span{
    padding-right: 5px;
}

.header a:hover{
    background: white;
    color: #122331;
    font-weight: bold;
}
.entrepreneurship_link: hover{
    background: white;
    color: #122331;
    font-weight: bold;
}
/* end of HEADER SECTION STYLES*/




/* DROPDOWN MENU STYLES */
.dropdown{
    display: relative;
}
.dropdown-menu{
    position: absolute;
    background: #122331;
    width: 230px;
    top: 50px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.1s linear;
    box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px, rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px, rgba(0, 0, 0, 0.07) 0px 16px 16px;
}

.menu-item{
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.dropdown:hover .dropdown-menu{
    top: 50px;
    opacity: 1;
    visibility: visible;
}
/* end of DROPDOWN MENU STYLES */




/* MEGA MENU STYLES */
.mega-menu{
    position: absolute;
    left: 650px;
    width: 50vw;
    top: 50px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.1s linear;
    box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px, rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px, rgba(0, 0, 0, 0.07) 0px 16px 16px;
}

.mega-menu .content{
    background: #122331;
    padding: 1rem;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    width: 100%;
    justify-content: space-between;
}

.mega-menu .content_1{
    background: #122331;
    padding: 1rem;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    width: 100%;
    justify-content: space-between;
}

.content .col{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    line-height: 3rem;
}

.content_1 .col{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    line-height: 3rem;
}

.content .col #mega-links{
    border-left: 1px solid white;
}


.content_1 .col #mega-links{
    border-left: 1px solid white;
}

.col .mega-links li{
    padding-left: 0.4rem;
}

/* hover */
.menu-items li:hover .mega-menu{
    top: 50px;
    opacity: 1;
    visibility: visible;
}

/* end of MEGA MENU STYLES */




/* -----------------RESPONSIVENESS --------------------*/

/* HAMBURGER STYLES */
.menu-btn{
    position: relative;
    display: none;
    justify-content: center;
    align-items: center;
    width: 1.5rem;
    height: 1.5rem;
    cursor: pointer;
    z-index: 2;
}

.menu-btn_lines::before, .menu-btn_lines::after{
    content: " ";
    position: absolute;
}

.menu-btn_lines, .menu-btn_lines::before,.menu-btn_lines::after{
    width: 1.5rem;
    height: 0.2rem;
    background: white;
    transition: all 0.4s ease-in-out;
}

.menu-btn_lines::before{
    transform: translateY(-0.5rem);
}
.menu-btn_lines::after{
    transform: translateY(0.5rem);
}

/* animation */
.menu-btn.open .menu-btn_lines{
    /* targetting middle line */
    transform: translateX(2rem);
    background: transparent;
}

.menu-btn.open .menu-btn_lines::before{
    transform: rotate(45deg) translate(-1.5rem, 1.5rem);
    background: white;
}

.menu-btn.open .menu-btn_lines::after{
    transform: rotate(-45deg) translate(-1.5rem, -1.5rem);
    background: white;
}

/* END OF HAMBURGER STYLES */



/* MEDIA QUERIES */
@media screen and (max-width: 1490px){
      .mega-menu{
        position: absolute;
        left: 320px;
        width: 60vw;
        top: 100px;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
        box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    }   
    
}
@media screen and (max-width: 1280px){
    .header a:hover{
        background: transparent;
        color: #122331;
        font-weight: bold;
    }
    .header .menu-items{
        display: inline-flex;                    
        align-items: center;
        font-size: 13px;
    }
    .logo{
        padding-left: 80px;
        color:  #122331;
        font-size: 1.3rem;
        font-weight: bold ;
    }
    .mega-menu{
        position: absolute;
        left: 320px;
        width: 60vw;
        top: 100px;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
        box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    }

  .menu-items li:hover .mega-menu{
        top: 65px;
        opacity: 1;
        visibility: visible;
}

}

@media screen and (max-width: 970px){
    .links_container{
        margin-top: 100px;
        display: block;

    }
    .menu-btn{
        display: flex;
    }
    .mega-menu{
        box-shadow: none;
    }
    .dropdown-menu{
        box-shadow: none;
        top:0px;
    }
    .header{
        justify-content: unset;
        display: flex;
    }
    .header .menu-items{
        position: absolute; /* items should begin at the bottom of the header */
        height: calc(140vh - 100%);
        width: 100%;
        max-width: 450px;
        top: 100%;
        left: 123px;
        background: #122331;
        display: none;
        padding: 1rem;
        text-transform: uppercase;
        line-height: 3rem;
        /* display: 0; */
        transform: translateX(10vh);
        transition: all 0.3s ease-out;
        z-index: -1;
        overflow-y: hidden;
        box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px, rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px, rgba(0, 0, 0, 0.07) 0px 16px 16px;

        
    }

    /* opens dropdown menu */
    .menu-items.open{
        display: block;
        transform: translateX(-11vh);
    }
    /* ---opens dropdown menu---- */


    .menu-items li{
        margin: 15px 10px;
    }
     .menu-items li a{
        padding: 0.5rem 1rem;
        display: block;
        margin-bottom: 25px;
        color: whtie;
        font-size: 18px;
        width:370px;
        border-right: 4px white solid;
        border-radius: 5px;
        box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px, rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px, rgba(0, 0, 0, 0.07) 0px 16px 16px;
    }
    .entrepreneurship_link{
        text-decoration: none;
        color: white;
        padding: 0px;
        transition: all 0.2s ease-in-out;
        font-weight: bold;
    }
    .header a:hover{
        background-color: transparent;
        color:  white;
        font-weight: bold;
    }

    .hamburger{
        margin-left: 700px;
         margin-top: 10px;
         margin-bottom: 10px;
    }
    .team_logo{
        margin-left: 40px;
        width: 130px;
    }
    .mega-menu{
        box-shadow: none;
    }
    .dropdown-menu{
        box-shadow: none;
    }
    
    

    /* dropdown */
    .menu-items .dropdown-menu{
        position: static;
        opacity: 1;
        visibility: visible;
        top: 4rem;
        padding-left: 1rem;
        width: 100%;
        max-height: 0;
        transform: scaleY(0);
        transform-origin: top;
        overflow: hidden;
        transition: all 0.3s ease;
    }
    .expand-drop-btn.open + .expandable-drop{
        opacity: 1;
        max-height: 100%;
        transform: scaleY(1);
    }
    /* End of dropdown menu */


    /* Mega menu dropdown */
    .menu-items .mega-menu{
        position: fixed; /* items should begin at the bottom of the header */
        height: 140vh;
        width: 100%;
        max-width: 450px;
        top: -55%;
        left: 0px;
        background:#122331;
        padding-top: 0;
        line-height: 3rem;
        opacity: 0;
        transition: all 0.3s ease-in-out;
        z-index: 30;
        overflow-y: hidden;
        overflow-x: hidden;
        transform: translate(-0.5%, -4%)
       
    }

    .expand-btn.open + .expandable{
        opacity: 1;
    }
    /* End of mega menu dropdown */

    .back_button{
        border: none;
        display: block;
        background-color:#122331;
        color: white;
        margin-top: 90px;
        margin-left: 10px;
        margin-bottom: 50px;
        font-family: "Nunito";
        font-size: 25px;
        font-weight: bolder;
        text-transform: uppercase;
        padding: 5px 5px;
        border-right: 3px white solid;
        box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    }

    .expandable li{
        margin-left: 20px;
        margin-bottom: 20px;
    }
    .mega-menu li a{
        font-size: 18px;
        padding-bottom: 1rem;
        border-right: 5px solid white ;
        box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px, rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px, rgba(0, 0, 0, 0.07) 0px 16px 16px;
        width:370px;
       
    }

    /* styling mega menu elements */
    .mega-menu .content{
        grid-template-columns: auto;
        padding: 1rem 1rem 0 1rem;
        overflow-y: auto;
    }

    .mega-menu .content_1{
        grid-template-columns: auto;
        padding: 1rem 1rem 0 1rem;
        overflow-y: auto
    }

    .mega-menu .content .col{
        width: 100%;
        padding-top: 1rem;
        /* margin-bottom: 0.5rem; */
        /* border-top: 1px solid #1a3246; */
    }

    .mega-menu .content_1 .col{
        width: 100%;
        /* padding-top: 1rem;
        margin-bottom: 0.5rem; */
        /* border-top: 1px solid #1a3246; */
    }


    .mega-menu .content .col:nth-child(1){
        border-top: 0px;
    }

    .mega-menu .content_1 .col:nth-child(1){
        border-top: 0px;
    }

    .content .col #mega-links{
        border-left: 0px;
    }

    .content_1 .col #mega-links{
        border-left: 0px;
    }

    .col .mega-links{
        margin: 0;
    }
    
   
}
@media screen and (max-width: 768px){
    .menu-items.open{
        opacity: 1;
        transform: translateX(-12vh);

    }
}

@media screen and (max-width: 700px){
     .hamburger{
        margin-left: 300px;
    }
    .team_logo{
        margin-left: 10px;
        width: 80px;
    }
    .links_container{
        margin-top: 50px;
        display: block;

    }
    .entrepreneurship_link{
        text-decoration: none;
        color:  white;
        padding: 0px;
        transition: all 0.2s ease-in-out;
        font-weight: bold;
    }
    
    .header{
        justify-content: unset;
        display: flex;
        left: 0;
    }
    .header .menu-items{
        position: absolute; /* items should begin at the bottom of the header */
        height: calc(200vh - 100%);
        width: 80%;
        max-width: 350px;
        top: 90%;
        left: -6px;
        background: #122331;
        display: none;
        padding: 1rem;
        text-transform: uppercase;
        line-height: 3rem;
        /* opacity: 0; */
        transform: translateX(10vh);
        transition: all 0.3s ease-out;
        z-index: -1;
        overflow-y: hidden;
        box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px, rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px, rgba(0, 0, 0, 0.07) 0px 16px 16px;
    }
    .menu-items.open{
        display: block;
        transform: translateX(0vh);
    }
    .menu-items li{
        margin: 10px 5px;
    }
    .menu-items li a{
        padding: 0.2rem 0.5rem;
        display: block;
        margin-bottom: 20px;
        color: white;
        font-size: 12px;
        border-right: 4px white solid;
        width:250px;
        border-radius: 5px;
        box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px, rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px, rgba(0, 0, 0, 0.07) 0px 16px 16px;
    }
    .header a:hover{
        background-color: transparent;
        color:  white;
        font-weight: bold;
    }
    .back_button{
        border: none;
        display: block;
        background-color:  #122331;
        color: #fff;
        margin-top: 10px;
        margin-left: 10px;
        margin-bottom: 30px;
        font-family: "Nunito";
        font-size: 15px;
        font-weight: bolder;
        text-transform: uppercase;
        padding: 5px 5px;
        border-right: 3px white solid;
        box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    }
    .header .menu-items{
        max-width: 345px;
    }
    .hamburger{
        margin-top: 2px;
        margin-bottom: 2px;
    }

    .menu-btn_lines, .menu-btn_lines::before,.menu-btn_lines::after{
        width: 1.2rem;
        height: 0.1rem;
        background: white;
        transition: all 0.5s ease-in-out;
        
    }
    .mega-menu{
        box-shadow: none;
    }
    .dropdown-menu{
        box-shadow: none;
    }
}

/* MEDIA QUERIES */

/* -----------------end of RESPONSIVENESS SECTION--------------------*/