@media  screen and (max-width: 1024px) {
    .no-mb{
        display: none !important;
    }
    
    .no-desk{
        display: flex !important;
    }

    .resources {
        padding: 15% 0 10% 0;
        height: auto;
    }

    .tabs-container {
        display: none;
    }

    .tabs-container-mobile {
        width: 87%;
        height: 6%;
        position: relative;
    }

    .tabs-container-mobile > div {
        display: flex;
        flex-direction: row;
        align-items: center;
        width: 100%;
        justify-content: space-between;
        background: #F2FADF;
        backdrop-filter: blur(30px);
        padding: 6%;
        border-radius: 100px;
        height: 50px;
    }

    .tabs-container-mobile > div > h3 {
        color: #2C5134;
        font-family: "Articulat CF";
        font-size: clamp(7px, 4.267vw, 30px);
        font-style: normal;
        font-weight: 500;
        line-height: 100%;
        letter-spacing: -0.48px;
    }

    .tabs-container-mobile > div > svg {
        transition: 0.2s ease;
    }

    .tabs-container-mobile > ul {
        position: absolute;
        width: 100%;
        height: auto;
        padding: 3% 0;
        border-radius: 30px;
        background: #F2FADF;
        backdrop-filter: blur(30px);
        left: 0;
        top: 110%;
        display: none;
        z-index: 5;
    }

    .tabs-container-mobile ul > li {
        padding: 5%;
    }

    .tabs-container-mobile ul > li > a {
        color: #5E5E5E;
        font-family: "Articulat CF";
        font-size: clamp(10px, 4.27vw, 26px);
        font-style: normal;
        font-weight: 500;
        line-height: 100%;
        letter-spacing: -0.48px;
        cursor: pointer;
    }

    .res-hero-container > h1 {
        font-size: clamp(1rem, 8.53vw, 115px);
        width: 100%;
        margin: 8% 0 12% 0;
    }

    .res-content {
        height: auto;
    }

    .res-card-container {
        width: 89.07%;
        flex-direction: column;
        gap: 20px;
    }

    .res-card {
        width: 100%;
        justify-content: space-evenly;
        gap: 20px;
        padding-top: 30px;
        padding-bottom: 30px;
    }

    .res-card > div {
        width: 90.42%;
    }

    .res-card > div > div > h2 {
        font-size: clamp(12px, 4.27vw, 30px);
    }

    .res-card > div > div > h3 {
        margin: 5% 0 0 0;
        font-size: clamp(10px, 3.73vw, 27px);
    }

    .res-card > div > svg {
        width: 14.9%;
        height: auto;
    }

    .res-card > p {
        width: 90.42%;
        font-size: clamp(10px, 3.73vw, 27px);
    }

}


@media  screen and (max-width: 767px) {
    .resources {
        padding: 25% 0 10% 0;
    }
}


@media  screen and (max-width: 479px) {
    .resources {
        padding: 25% 0 10% 0;
    }
}