:root{
    --primary:#E0E8CD40;
    --secondary:#7D7D7D;
    --three:#CDEA80;
    --four:#97AE58;
    --dark:#2C5134;
    --gray: #666;
    --light:#F6F6F6;
    --text-sm:clamp(14px,1.2vw,1.3rem);
    --text-md:clamp(20px,1.6vw,1.75rem);
    --text-lg:clamp(24px,2vw,2.1rem);
    --text-xl:clamp(36px,6.5vw,7rem);
}

.no-mb{
    display: flex !important;
}

.no-desk{
    display: none !important;
}

@font-face {
    font-family: 'Articulat CF xBold';
    src: url('/fonts/Articulat/ArticulatCF-ExtraBold.otf');
}

@font-face {
    font-family: 'Articulat CF semiBold';
    src: url('/fonts/Articulat/ArticulatCF-DemiBold.otf');
}

@font-face {
    font-family: 'Articulat CF';
    src: url('/fonts/Articulat/ArticulatCF-Regular.otf');
}

@font-face {
    font-family: 'Articulat';
    src: url('/fonts/Articulat/ArticulatCF-Thin.otf');
}

@font-face {
    font-family: 'Neue Haas Unica Pro';
    src: url('/fonts/Neue-Haas-Unica-Pro/Neue-Haas-Unica-Pro/NeueHaasUnicaPro-Light.ttf');
}

a{
    text-decoration: none;
    transition: all .5s ease;
}

li{
    list-style: none;
}

input{
    outline: none;
}

.resources {
    width: 100%;
    height: auto;
    background-color: #FFF;
    padding: 10% 0;
}

.res-hero-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4%;
}

.tabs-container {
    display: inline-flex;
    align-items: flex-start;
    border-radius: 100px;
    background: #cdea8040;
    backdrop-filter: blur(30px);
    width: 36.28%;
    height: auto;
    align-items: center;
    justify-content: space-between;
    gap: 0.52%;
}

.tabs-container a {
    padding: 1.79% 4.7%;
    color: #5E5E5E;
    font-family: "Articulat CF";
    font-size: clamp(10px, 1.14vw, 27px);
    font-style: normal;
    font-weight: 500;
    line-height: 100%;
    letter-spacing: -0.66px;
    cursor: pointer;
}

.tabs-container > .selected {
    border-radius: 100px;
    background: var(--dark);
    color: #FFF;
}

.res-hero-container > h1 {
    color: var(--dark);
    text-align: center;
    font-family: "Articulat CF Bold";
    font-size: clamp(60px, 6.25vw, 150px);
    font-style: normal;
    font-weight: 800;
    line-height: 100%;
    letter-spacing: -2.4px;
    margin: 4% 0 7% 0;
}

.res-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 20px;
}

.res-card-container {
    width: 48.18%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.res-card {
    width: 100%;
    border-radius: 30px;
    background: #F8FBEF;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 6% 0 6% 0;
    gap: 15%;
    margin-bottom: 3%;
}

.res-card > div {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    width: 89.82%;
    height: auto;
}

.res-card > div > div {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.res-card > div > div > h2 {
    color: var(--dark);
    font-family: "Articulat CF";
    font-size: clamp(23px, 1.67vw, 35px);
    font-style: normal;
    font-weight: 500;
    line-height: 100%;
    letter-spacing: -0.96px;
}

.res-card > div > div > h3 {
    color: var(--gray);
    font-family: "Neue Haas Unica Pro";
    font-size: clamp(12px, 0.94vw, 26px);
    font-style: normal;
    font-weight: 350;
    line-height: 122%;
    margin-bottom: 10%;
}

.res-card > div > svg {
    width: 7.82%;
    height: auto;
    cursor: pointer;
}

.res-card > p {
    color: var(--gray);
    font-family: "Neue Haas Unica Pro";
    font-size: clamp(15px, 1.04vw, 30px);
    font-style: normal;
    font-weight: 350;
    line-height: 122%;
    width: 89.82%;
}