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

.homepage__navigation{

    width:100%;

    background:#082C6C;

}


/*==================================================
    HOMEPAGE
==================================================*/

.homepage{

    padding:0 0 40px;

}

/*==================================================
    TOP NAVIGATION ROW
==================================================*/

.homepage__top{

    display:grid;

    grid-template-columns:280px 1fr;

    height:56px;

    overflow:hidden;

}

/* LEFT (YELLOW) */

.homepage__category-nav{

    background:#F5B51D;

    color:#082C6C;

    display:flex;

    align-items:center;

    padding:0 22px;

    font-size:18px;

    font-weight:700;

    cursor:pointer;

}

.homepage__category-nav i{

    margin-right:14px;

    font-size:18px;

}

/* RIGHT (MENU) */

.homepage__nav{

    display:flex;

    align-items:center;

}

.homepage__menu{

    list-style:none;

    display:flex;

    align-items:center;

    gap:34px;

    margin:0;

    padding:0 30px;

    width:100%;

    height:100%;

}

.homepage__menu li{

    position:relative;

}

.homepage__menu a{

    display:flex;

    align-items:center;

    height:56px;

    color:#fff;

    text-decoration:none;

    font-size:15px;

    font-weight:700;

    transition:.25s;

}

.homepage__menu a:hover{

    color:#F5B51D;

}

.homepage__menu a.active{

    color:#F5B51D;

}

.homepage__menu a.active::after{

    content:"";

    position:absolute;

    left:0;

    right:0;

    bottom:0;

    width:70%;

    height:3px;

    margin:auto;

    background:#F5B51D;

    border-radius:3px 3px 0 0;

}

/*==================================================
    CONTENT ROW
==================================================*/

.homepage__content{

    display:grid;

    grid-template-columns:280px minmax(0,1fr);

    column-gap:20px;

    align-items:stretch;

}

/*==================================================
    SIDEBAR
==================================================*/

.homepage__sidebar{

    display:flex;

    flex-direction:column;

    height:100%;

}

/*==================================================
    HERO WRAPPER
==================================================*/

.homepage__hero-wrapper{

    padding-top:8px;

}

/*==================================================
    HERO
==================================================*/

.homepage__hero{

    display:flex;

}