html {
    font-size  : 10px;
    font-family: sans-serif;
}

* {
    margin     : 0;
    padding    : 0;
    box-sizing : border-box;
    font-family: 'Montserrat';
}

body {
    background-color: #2e2d38;
    overflow-x      : hidden;
}

* {
    padding        : 0;
    margin         : 0;
    text-decoration: none;
    list-style     : none;
}

nav {
    display        : flex;
    justify-content: space-between;
    height         : 8em;
    align-items    : center;
}

nav ul {
    position: relative;
    display : flex;
    right   : 6em;
    gap     : 4em;
}

nav ul li a {
    font-family   : 'Montserrat';
    color         : white;
    font-size     : 16px;
    font-weight   : 600;
    line-height   : 24.38px;
    text-transform: uppercase;
}

nav .open-burger-menu {
    font-size: 2.5rem;
    margin   : 20px;
    display  : none;
    cursor   : pointer;
}

nav .close-burger-menu {
    font-size: 1.5rem;
    margin   : 20px;
    display  : none;
    cursor   : pointer;
}

.logo img {
    position   : relative;
    left       : 6em;
    display    : flex;
    align-items: center;
    width      : 60%;
}

a.active,
a:hover {
    color: #2779f5;
}

.featured-section {
    position       : relative;
    width          : 100%;
    display        : flex;
    flex-direction : row;
    align-items    : center;
    justify-content: space-around;
    gap            : 10em;
    box-sizing     : border-box;

    background-image : url('/images/resources/feature-bg.png');
    background-repeat: no-repeat;
    background-size  : cover;

    height: 600px;
}

.featured-btn {
    background-color: #2779F5;
    border          : none;
    color           : #2E2D38;

    font-weight   : 600;
    font-size     : 14px;
    line-height   : 18px;
    text-transform: uppercase;

    height: 30px;
    width : 120px;
}

.featured-text {
    position      : absolute;
    display       : flex;
    flex-direction: column;
    margin-bottom : 10em;
    gap           : 10px;
    left          : 4em;
}

img.featured-thumbnail {
    position: absolute;
    width   : 600px;
    height  : 450px;
    right   : 4em;
}

img.featured-thumbnail-mobile {
    display: none;
}

.featured-placeholder {
    color      : #FFFFFF;
    font-weight: 600;
    font-size  : 30px;
    line-height: 40px;
}

.featured-btn-list {
    display       : flex;
    flex-direction: row;
    align-items   : center;
    gap           : 8px;
}

.download-btn {
    color        : #FFFFFF;
    background   : #2E2D38;
    border-radius: 30px;
    border       : none;

    font-weight   : 600;
    font-size     : 12px;
    line-height   : 24px;
    text-transform: uppercase;

    margin-right: 10px;

    width : 150px;
    height: 35px;
}

.read-more {
    font-size  : 20px;
    color      : #fff;
    font-weight: 600;
}

.right-arrow {
    width: 20px;
}

.search-section {
    display         : flex;
    flex-direction  : row;
    justify-content : center;
    align-items     : center;
    background-color: #2e2d38;
    padding         : 3rem 2rem 0 2rem;
    box-sizing      : border-box;
}

.search-section #all_ctgr {
    border-bottom: 2px solid #fff;
}

.search-section a {
    font-family    : 'MontserratSemiBold', sans-serif;
    color          : white;
    font-size      : 15px;
    font-weight    : 600;
    margin         : 0.5rem;
    text-transform : uppercase;
    text-decoration: none;
}

.featured .search-section input {
    height          : 3.5rem;
    margin-left     : 1rem;
    padding         : 1rem 2rem;
    border          : 1px solid #494848;
    border-radius   : 19px;
    background-color: transparent;
    font-size       : 15px;
    font-weight     : 400;
    color           : #fff;
    outline         : none;
}

.featured .search-section button {
    position        : relative;
    top             : 0.5em;
    background-color: transparent;
    border          : none;
    border-radius   : 50%;
    cursor          : pointer;
    margin-left     : -4rem;
    border-color    : #EFEFEF80;
}

.featured .search-section button img {
    width : 1.5em;
    height: 1.5em;
}

.content-container {
    position      : relative;
    display       : flex;
    flex-direction: column;
    gap           : 2.5em;
}

.featured-content:nth-child(-n+3) {
    display        : flex;
    flex-direction : row;
    justify-content: center;
    align-items    : center;
    gap            : 4em;
}

.featured-content {
    display        : none;
    flex-direction : row;
    justify-content: center;
    align-items    : center;
    gap            : 4em;
}

.featured-content .content-img {
    position: relative;
    width   : 470px;
    top     : 2em;
}

.featured-content .content-text {
    display       : flex;
    flex-direction: column;
    gap           : 10px;
    width         : 40%;
}

.featured-content .category {
    font-size     : 16px;
    font-weight   : 600;
    line-height   : 24px;
    text-transform: uppercase;
    color         : #2779F5;
    text-transform: uppercase;
}

.featured-content .placeholder {
    font-weight   : 600;
    font-size     : 28px;
    line-height   : 32px;
    text-transform: capitalize;

    color: #FFFFFF;
}

.featured-content button {
    color        : #FFFFFF;
    background   : #2779F5;
    border-radius: 30px;
    border       : none;

    font-weight: 600;
    font-size  : 12px;
    line-height: 24px;

    margin-right: 10px;

    width : 150px;
    height: 35px;
}

.featured-content .content-download {
    font-size     : 15px;
    line-height   : 24px;
    text-transform: capitalize;
    color         : #FFFFFF;
}

.featured-content .read-more {
    display        : flex;
    justify-content: center;
    align-items    : center;
    background     : transparent;
    border-radius  : 30px;
    border         : solid 1px #2779F5;

    width : 180px;
    height: 35px;

    cursor: pointer;
}

.featured-content .read-more a {
    color       : #2779F5;
    margin-right: 10px;
}

.featured-content .read-more .content-right-arrow {
    width: 20px;
}

.load-more-section {
    display        : flex;
    justify-content: center;
    align-items    : center;
    margin-top     : 6em;
}

.load-more {
    display        : flex;
    justify-content: center;
    align-items    : center;
    margin         : 0px 30px 30px 30px;
    height         : 60px;
    width          : 230px;
    border-radius  : 30px;
    background     : transparent;
    border         : 2px solid #EFEFEF;
    cursor         : pointer;
    font-family    : 'MontserratBold';
    font-size      : 20px;
    color          : #fff;
    transition     : .3s;
}

.not-found {
    display        : none;
    justify-content: center;
    align-items    : center;
    font-family    : "MontserratBold";
    font-size      : 36px;
    margin-top     : 2em;
    color          : #fff;
}

/* Responsive breakpoint */

/* Mobile */

@media only screen and (min-width: 370px) and (max-width: 767px) {
    /* nav .main-menu {
        display: none;
    } */

    .logo img {
        left: 2em;
    }

    .main-menu-active {
        display: flex !important;
        width  : 100vw !important;
    }

    nav .main-menu {
        height         : 100vh;
        position       : fixed;
        top            : 0;
        left           : 0;
        bottom         : 0;
        z-index        : 10;
        flex-direction : column;
        justify-content: center;
        align-items    : center;
        background     : #2E2D38;
        transition     : 0.4s;
        width          : 0;
        overflow       : hidden;
    }

    nav ul li a:hover {
        color    : #2779F5;
        font-size: 1.1rem;
    }

    nav .close-burger-menu {
        display : block;
        position: absolute;
        top     : 20px;
        right   : 20px;
    }

    nav .open-burger-menu {
        position: fixed;
        right   : 1em;
        display : block;
        z-index : 10;
    }

    .fa {
        color: #FFFFFF;
    }

    .featured-section {
        background-size  : cover;
        background-repeat: no-repeat;
        height           : 324px;
        width            : 100%;
    }

    br {
        display: none;
    }

    img.featured-thumbnail-mobile {
        display: flex;
        height : 324px;
        width  : 100%;
    }

    .featured-text {
        margin-bottom: 0;
        left         : 1.5em;
    }

    .featured-placeholder {
        font-size  : 24px;
        line-height: 32px;
    }

    img.featured-thumbnail {
        display: none;
    }

    .search-section {
        flex-direction : column;
        justify-content: center;
        align-items    : center;
        padding        : 1rem 2rem 0 2rem;
        box-sizing     : border-box;
        gap            : 5px;
    }

    .featured-content:nth-child(-n+3) {
        display        : flex;
        flex-direction : column;
        justify-content: center;
        align-items    : center;
        gap            : 1em;
    }

    .featured-content .content-text {
        width : 100%;
        margin: 2em 0em 0em 2em;
    }

    .featured-content {
        display        : none;
        flex-direction : column !important;
        justify-content: center;
        align-items    : center;
        gap            : 2em !important;
    }

    .featured-content .placeholder {
        font-size: 24px;
        width    : 90%;
    }

    .featured .content-img {
        width: 100%;
    }
}

@media screen and (min-width: 768px) and (max-width: 1199px) {
    nav ul {
        right: 4em;
        gap  : 2em;
    }

    img.featured-thumbnail-mobile,
    img.featured-thumbnail {
        display: none;
    }

    .main-menu {
        left: initial !important;
    }

    .featured-placeholder {
        width: 80%;
    }

    .featured-section {
        height: 400px;
    }

    .featured-text {
        margin-bottom: unset;
    }

    .featured-content:nth-child(-n+3) {
        display        : flex;
        flex-direction : column;
        justify-content: flex-start;
        align-items    : flex-start;
        gap            : 1em;
    }

    .featured-content {
        display        : none;
        flex-direction : column !important;
        justify-content: flex-start !important;
        align-items    : flex-start !important;
        gap            : 2em !important;
    }

    .featured-content .content-text {
        width      : 60%;
        margin     : 1em 2em 2em 4em;
        align-items: flex-start;
    }

    .featured-content .placeholder {
        font-size: 20px;
    }

    .featured .content-img {
        width      : 60vw;
        margin-left: 4em !important;
    }
}

@media screen and (min-width: 1200px) and (max-width: 1400px) {
    .main-menu {
        left: initial !important;
    }

    .featured-placeholder {
        font-size  : 36px;
        line-height: 40px;
        width      : 50%;
    }

    img.featured-thumbnail {
        width : 400px;
        height: 350px;
        right : 2em;
    }

    .featured-section {
        height: 400px;
    }

    .featured-text {
        margin-bottom: unset;
    }
}

@media screen and (min-width: 1401px) {
    .featured-placeholder {
        font-size  : 42px;
        line-height: 46px;
        width      : 50%;
    }
}