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

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

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

    hr {
        height    : 0px;
        border    : none;
        border-top: 1px solid darkgray;
    }

    input {
        width           : 90%;
        font-size       : 1.4rem;
        padding         : 2rem;
        color           : white;
        border          : 1px solid #cccccc;
        background-color: #2e2d38;
        outline         : none;
        box-sizing      : border-box;
        margin-bottom   : 1rem;
    }

    input:focus {
        border: 1px solid #2779f5;
    }

    nav {
        display        : flex;
        justify-content: space-around;
        height         : 88px;
        align-items    : center;
    }

    nav ul {
        display        : flex;
        width          : 40%;
        justify-content: space-between;
        margin-left    : 25em;
        margin-top     : 15px;
    }

    nav ul li a {
        font-family: 'MontserratBold';
        color      : white;
        font-size  : 1.3vw;
    }

    .logo img {
        width: 80%;
    }

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

    .eco-header {
        color : #fff;
        margin: 10px 80px;
    }

    .eco-header h1 {
        width      : 70%;
        font-size  : 55px;
        margin-top : 90px;
        font-family: 'MontserratBold';
    }

    .eco-header p {
        width      : 60%;
        font-size  : 20px;
        margin-top : 25px;
        line-height: 30px;
        font-family: 'Montserrat';
    }

    .ecosystem-page .eco-header .disclaimer {
        font-size  : 13px;
        line-height: 20px;
    }

    .submit-btn {
        margin       : 30px 0 85px 0;
        height       : 60px;
        width        : 230px;
        border-radius: 30px;
        background   : linear-gradient(to right, #2779f5, rgb(171, 33, 230));
        border       : none;
    }

    .submit-txt {
        font-family: 'MontserratBold';
        font-size  : 20px;
        color      : #fff;
    }

    .list-content {
        display      : flex;
        padding-top  : 40px;
        margin-bottom: -45px;
    }

    .list-content input {
        height          : 5rem;
        width           : 40%;
        border          : 1px solid #494848;
        border-radius   : 19px;
        background-color: transparent;
        font-family     : "Montserrat", sans-serif;
        color           : #fff;
        outline         : none;
    }

    .filter {
        display       : flex;
        width         : 100%;
        flex-direction: row;
        padding-left  : 100px;
        box-sizing    : border-box;
    }

    .search {
        display        : flex;
        width          : 100%;
        flex-direction : row;
        justify-content: flex-end;
        box-sizing     : border-box;
        margin-right   : 6rem;
    }

    .search-btn {
        margin-right: 3rem;
    }

    .search input:focus {
        border: 1px solid #2779f5;
    }

    .search-logo {
        width           : 4rem;
        height          : 4rem;
        background-color: #2779f5;
        border          : none;
        border-radius   : 50%;
        cursor          : pointer;
        margin-top      : 5px;
    }

    .list-content .filter .all-project-btn {
        height       : 50px;
        width        : 150px;
        border-radius: 30px;
        background   : #2779F5;
        border       : none;
        margin-right : 4rem;
        cursor       : pointer;
    }

    .list-content .filter .all-project-btn a {
        color      : #fff;
        font-family: 'MontserratLight';
        font-size  : 18px;
    }

    .list-content .filter .filter-menu {
        display: flex;
    }

    .list-content .filter .filter-menu .filter-btn {
        height       : 50px;
        width        : 150px;
        border-radius: 30px;
        background   : #2779F5;
        border       : none;
        margin-bottom: 85px;
        color        : #fff;
        font-family  : 'MontserratLight';
        font-size    : 18px;
        cursor       : pointer;
    }

    .dropdown-content {
        display         : none;
        position        : absolute;
        background-color: #2e2d38;
        min-width       : 160px;
        box-shadow      : 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
        overflow        : scroll;
        overflow-x      : hidden;
        height          : 200px;
    }

    .dropdown-content::-webkit-scrollbar {
        width           : 10px;
        background-color: transparent;
    }

    .dropdown-content::-webkit-scrollbar-thumb {
        border-radius   : 25px;
        background-color: #2779f5;
    }

    .dropdown-content a {
        color      : #fff;
        padding-top: 2px;
        display    : flex;
        font-size  : 13px;
        font-family: 'Montserrat';
    }

    .filter-btn i {
        padding: 8px;
    }

    .show {
        display       : flex;
        flex-direction: row;
        animation     : fadeIn 0.7s;
        transform     : translateY(60px);
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    ul.list-filter {
        display       : flex;
        flex-direction: column;
    }

    input.list-item {
        display: none;
    }

    /* .list-filter li input[type=checkbox] {
        height: 2rem !important;
        border: 0.1em solid #fff !important;
    } */

    input[type=checkbox]+.label-name label {
        display         : flex;
        width           : 2em;
        height          : 2em;
        margin          : 5px;
        border          : 1px solid white;
        background-color: #2e2d38;
        border-radius   : 2px;
        cursor          : pointer;
    }

    input[type=checkbox]:checked+.label-name label::after {
        /* position        : relative; */
        content         : '\2713';
        width           : 100%;
        color           : transparent;
        background-color: #2779F5;
    }

    .label-name {
        display           : flex;
        /* flex-direction : row; */
        /* justify-content: flex-start; */
    }

    .label-name a {
        margin-top : 6px;
        margin-left: 3px;
    }

    .content-card {
        display        : flex;
        flex-direction : row;
        flex-wrap      : wrap;
        justify-content: center;
        padding        : 20px;
    }

    .content-item {
        display        : flex;
        flex-direction : row;
        flex-wrap      : wrap;
        justify-content: flex-start;
        border         : 1px solid #EFEFEF;
        border-radius  : 35px;
        padding        : 4rem;
        margin         : 12px;
        width          : 17%;
        height         : 300px;
        cursor         : pointer;
    }

    .ecosystem-page .content-card .content-item:nth-child(-n+4) {
        display: flex;
    }

    .ecosystem-page .content-card .content-item {
        display: none;
    }

    .content-card .content-item .content-st {
        display       : flex;
        flex-direction: column;
    }

    .content-card .content-item .content-status {
        color      : #c8c8cb;
        font-family: 'Montserrat';
        font-style : italic;
        font-size  : 15px;
    }

    .content-card .content-item .content-title {
        font-family: "MontserratBold";
        color      : #fff;
        font-size  : 20px;
    }

    .content-card .content-item .content-description-box {
        width        : 450px;
        height       : 100px;
        margin-bottom: 50px;
        margin-top   : 20px;
    }

    .content-card .content-item .content-description {
        font-size  : 16px;
        color      : #EFEFEF;
        font-family: 'MontserratLight';
    }


    .content-card .content-item .content-image {
        border-radius: 50%;
        height       : 100px;
        /* width     : 100%; */
        margin-right : 3em;
    }

    .content-card .content-item .image-box {
        display       : flex;
        flex-direction: row;
        align-items   : center;
        width         : 450px;
    }

    .content-card .content-item .content-description:hover {
        color: #EFEFEF;
    }

    .content-card .content-item .content-projectType {
        background-color   : transparent;
        color              : #fff;
        height             : 30px;
        width              : 95px;
        border             : 1px solid #EFEFEF;
        border-radius      : 30px;
        /* margin          : auto 13em 0 0; */
        font-size          : 12.5px;
        font-family        : 'MontserratLight';
    }

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

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

    .load-more {
        display           : flex;
        justify-content   : center;
        align-items       : center;
        margin            : 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; */
    }

    .load-more-mobile {
        display: none;
    }

    .footer {
        display        : flex;
        flex-direction : row;
        align-items    : stretch;
        justify-content: space-between;
        box-sizing     : border-box;
    }

    .footer-logo {
        margin-left: 120px;
    }

    .footer-logo img {
        width: 80%;
    }

    .social {
        display        : flex;
        flex-direction : column;
        justify-content: space-evenly;
        box-sizing     : border-box;
    }

    .social h4 {
        color         : white;
        font-size     : 18px;
        margin-left   : 160px;
        letter-spacing: 1px;
        font-family   : 'Montserrat';
    }

    .subscribe {
        display       : flex;
        flex-direction: column;
        margin-left   : 13em;
    }

    .subscribe p {
        color        : white;
        margin-top   : 60px;
        margin-right : 80px;
        margin-bottom: 4rem;
        font-size    : 22px;
        font-family  : 'MontserratMedium';
    }

    .subscribe-btn {
        margin       : 30px 5px;
        height       : 60px !important;
        width        : 200px !important;
        font-family  : 'MontserratBold';
        font-size    : 20px;
        color        : #fff;
        border-radius: 30px;
        background   : linear-gradient(to right, #2779f5, rgb(171, 33, 230));
        border       : none;
        margin-bottom: 85px;
    }

    .social-media-menu {
        width         : 100%;
        /* margin-left: 9rem; */
    }

    .social-media-item {
        background-color: #2779f5 !important;
    }

    /*  responsive breakpoint  */

    /*  Mobile  */
    @media screen and (max-width: 576px) {

        html,
        body {
            overflow-x: hidden;
        }

        body {
            position: relative
        }

        nav {
            margin-left    : 3em;
            justify-content: normal;
        }

        nav ul {
            display: none;
        }

        .div-1,
        .div-2 {
            display: none;
        }

        .div-3 {
            width: 60em;
        }

        .eco-header {
            margin: 0 6em 0 4em;
        }

        .eco-header h1 {
            width      : 100%;
            font-size  : 18px;
            margin-top : 10px;
            font-family: 'MontserratBold';
        }

        .ecosystem-page .eco-header p {
            width    : 100%;
            font-size: 15px;
        }

        .list-content {
            flex-direction: column-reverse;
            padding-top   : 10px;
        }

        .list-content input {
            width: 65%;
        }

        .list-content .filter .all-project-btn {
            margin-right: 2rem;
            width       : 30%;
        }

        .list-content .filter .all-project-btn a {
            font-size: 14px;
        }

        .list-content .filter .filter-menu .filter-btn {
            font-size: 14px;
        }

        .list-content .filter .filter-menu {
            width: 30%;
        }

        .filter {
            margin-top     : 2em;
            padding-left   : 0;
            justify-content: center;
            box-sizing     : content-box;
        }

        .search {
            justify-content: center;
        }

        .search-btn {
            margin-right: 1rem;
        }

        .search-logo {
            display: none;
        }

        .ecosystem-page .content-card .content-item:nth-child(1),
        .ecosystem-page .content-card .content-item:nth-child(2),
        .ecosystem-page .content-card .content-item:nth-child(3),
        .ecosystem-page .content-card .content-item:nth-child(4) {
            margin: 2em auto;
            width : 70%;
        }

        .content-item {
            /* margin-left: 15em; */
            width: 70%;
        }

        .content-card .content-item .content-image {
            margin-right: 0;
        }

        .content-card .content-item .content-st {
            margin-left: 3em;
        }

        .content-card .content-item .content-title {
            font-size : 24px;
            margin-top: 10px;
        }

        .content-card .content-item .content-projectType {
            width       : 9em;
            margin-right: 9em;
        }

        .content-card .content-item .content-description {
            font-size  : 16px;
            line-height: 21px;
        }

        .load-more-mobile {
            display        : flex;
            justify-content: center;
            align-items    : center;
            margin         : 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;
        }

        .load-more {
            display: none;
        }

        .footer {
            flex-direction: column-reverse;
            margin        : 0 2em;
        }

        .footer .subscribe {
            margin: 0;
        }

        .subscribe p {
            margin-right: 0;
        }

        .subscribe-btn {
            margin-bottom: 2em;
        }

        .footer-logo {
            margin: 0;
        }

        .footer-logo img {
            width: 60%;
        }

        .social {
            margin-left: 1em;
        }

        .social-media-menu {
            margin-left: 0;
        }

        .social h4 {
            margin: 1.5em 0;
        }
    }

    /*  Tablet  */

    @media screen and (min-width: 481px) and (max-width:820px) {
        nav ul {
            display        : flex;
            width          : 35%;
            justify-content: space-between;
            margin-left    : 90px;
            margin-top     : 15px;
        }

        .ecosystem-page .eco-header p {
            width: 100%;
        }

        .logo img {
            width: 60% !important;
        }

        .filter {
            padding-left: 30px;
        }

        .search {
            margin-right: 2rem;
        }

        .list-content input {
            width: 60%;
        }

        .content-card .content-item {
            width: 33% !important;
        }

        .content-card .content-item .content-image {
            height: 65px;
            width : 65px;
        }

        .content-card .content-item .image-box {
            width: 18em;
        }

        .content-card .content-item .content-title {
            font-size        : 22px;
            /* padding-bottom: 30px; */
        }

        .content-card .content-item .content-status {
            font-size: 12px;
        }

        .content-card .content-item .content-description {
            font-size: 15px;
        }

        .content-card .content-item .content-description:hover {
            color: #EFEFEF;
        }

        .content-card .content-item .content-projectType {
            margin: auto 65px 0px 0px;
        }

        .footer-logo {
            margin-left: 50px;
        }

        .footer-logo img {
            width: 70%;
        }

        .social h4 {
            font-size  : 15px;
            margin-left: 60px;
        }

        .subscribe {
            margin-left: 35px;
        }

        .subscribe p {
            color      : white;
            font-size  : 15px;
            font-family: 'MontserratMedium';
        }

        .social .social-media-menu {
            margin-left: 15px
        }
    }

    /* Laptop  */

    @media screen and (min-width: 821px) and (max-width:1024px) {
        nav ul {
            display        : flex;
            width          : 35%;
            justify-content: space-between;
            margin-left    : 90px;
            margin-top     : 15px;
        }

        .ecosystem-page .eco-header p {
            width: 100%;
        }

        .logo img {
            width: 60% !important;
        }

        .filter {
            padding-left: 30px;
        }

        .list-content input {
            width: 60%;
        }

        .content-card .content-item {
            width: 34% !important;
        }

        .content-card .content-item .content-title {
            font-size     : 22px;
            padding-bottom: 30px;
        }

        .content-card .content-item .content-description {
            font-size: 15px;
        }

        .content-card .content-item .content-description:hover {
            color: #EFEFEF;
        }

        .content-card .content-item .content-projectType {
            margin: auto 120px 0px 0px;
        }

        .footer-logo {
            margin-left: 50px;
        }

        .footer-logo img {
            width: 70%;
        }

        .social h4 {
            font-size  : 15px;
            margin-left: 60px;
        }

        .subscribe {
            margin-left: 35px;
        }


        .subscribe p {
            color      : white;
            font-size  : 20px;
            font-family: 'MontserratMedium';
        }

        .social .social-media-menu {
            margin-left: 15px
        }
    }

    /* Bigger laptop */

    @media screen and (min-width: 1025px) and (max-width:1300px) {
        .content-card .content-item {
            width: 22% !important;
        }
    }

    /*  Hamburger Menu  */

    /* .menu-toggle {
        display        : none;
        flex-direction : column;
        height         : 20px;
        justify-content: space-between;
        position       : relative;
    }

    .menu-toggle input {
        position: absolute !important;
        width   : 40px;
        height  : 28px;
        left    : -6px;
        top     : -3px;
        opacity : 0;
        cursor  : pointer;
        z-index : 2;
    }

    .menu-toggle span {
        display         : block;
        width           : 28px;
        height          : 3px;
        background-color: gainsboro;
        border-radius   : 3px;
        transition      : all 0.5s;
    } */

    /*  Hamburger Menu  Animation */

    /* .menu-toggle span:nth-child(2) {
        transform-origin: 0 0;
    }

    .menu-toggle span:nth-child(4) {
        transform-origin: 0 100%;
    }

    .menu-toggle input:checked~span:nth-child(2) {
        background-color: white;
        transform       : rotate(45deg) translate(-1px, -1px);
    }

    .menu-toggle input:checked~span:nth-child(4) {
        background-color: white;
        transform       : rotate(-45deg) translate(-1px, 0);
    }

    .menu-toggle input:checked~span:nth-child(3) {
        transform: scale(0);
    } */

    /* ::-webkit-scrollbar {
        width: 15px;
    }

    ::-webkit-scrollbar-track {
        box-shadow   : inset 0 0 5px #2779F5;
        border-radius: 10px;
    }

    ::-webkit-scrollbar-thumb {
        background   : #2779F5;
        border-radius: 10px;
    } */

    /* .cf:after {
        clear: both;
    }

    .cf {
        *zoom: 1;
    } */