: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;
}

section {
    min-height: 650px;
}

@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;
}

.blog {
    padding-top: 150px;
    width: 100%;
    height: auto;
    background-color: #FFF;
}

.bl-hero-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3%;
}

.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%;
    margin-bottom: 4%;
}

.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;
    padding: 10px auto;
    
}

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

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

.bl-hero-container > p {
    color: #000;
    text-align: center;
    font-family: "Neue Haas Unica Pro";
    font-size: clamp(16px, 1.34vw, 30px);
    font-style: normal;
    font-weight: 350;
    line-height: 130%;
    margin: 2% 0 2% 0;
}

.bl-search-bar-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 3%;
    height: auto;
    width: 36%;
}

.search-bar {
    width: auto;
    height: auto;
    position: relative;
}

.search-bar svg {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    left: 1.14vw;
    height: auto;
    width: 1.24vw;
}

.search-bar input {
    width: 85%;
    height: 55px;
    border-radius: 20px;
    background: #F4F8EB;
    border: 1px solid #9F9F9F;
    padding-left: 3.35vw;
    padding-right: 2vw;
    cursor: pointer;
    color: #666;
    font-family: "Neue Haas Unica Pro";
    font-size: clamp(15px, 1.03vw, 25px);
    font-style: normal;
    font-weight: 350;
    line-height: 120%;
    letter-spacing: -0.6px;
}

.search-bar input::placeholder {
    color: #666;
    font-family: "Neue Haas Unica Pro";
    font-size: clamp(15px, 1.03vw, 25px);
    font-style: normal;
    font-weight: 350;
    line-height: 120%;
    letter-spacing: -0.6px;
}

.select-component-container {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 55px;
    width: 48%;
}

.search-component {

    appearance: none;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    border-radius: 20px;
    border: 1px solid #9F9F9F;
    backdrop-filter: blur(12.5px);
    height: 100%;
    width: 100%;
    padding: 0 4%;
    cursor: pointer;
}

.search-component::placeholder {
    color: #666;
    font-family: "Neue Haas Unica Pro";
    font-size: clamp(15px, 1.03vw, 25px);
    font-style: normal;
    font-weight: 350;
    line-height: 120%;
    letter-spacing: -0.6px;
}

.search-component {
    color: #666;
    font-family: "Neue Haas Unica Pro";
    font-size: clamp(15px, 1.03vw, 25px);
    font-style: normal;
    font-weight: 350;
    line-height: 120%;
    letter-spacing: -0.6px;
}


.search-component option {
    color: #666;
    font-family: "Neue Haas Unica Pro";
    font-size: clamp(15px, 1.03vw, 25px);
    font-style: normal;
    font-weight: 350;
    line-height: 120%;
    letter-spacing: -0.6px;
    height: 55px;
    width: 48%;
}

#arrow-down {
    width: 1vw;
    height: auto;
}

.select-arrow {
    position: absolute;
    right: 9%;
    cursor: pointer;
}

.bl-sec2 {
    height: auto;
    width: 100%;
    margin-top: 5%;
}

.bl-sec2-container {
    width: 100%;
    height: 100%;
    background: #FFF;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.bl-card-container{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(30vw, 1fr));
    width: 95%;
    gap: 2%;
    height: auto;
}

.bl-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 20.927px;
    border: 1.046px solid #8A8A8A;
    height: 100%;
    width: 100%;
    padding-bottom: 1%;
    min-height: 350px;
    height: 45vh;
}

.bl-card > img {
    width: 100%;
    height: 65%;
    object-fit: fill;
    border-radius: 20.927px;
}

.bl-card h3 {
    width: 73%;
    color: #000;
    font-family: "Articulat CF Bold";
    font-size: clamp(14px, 1.20vw, 28px);
    font-style: normal;
    font-weight: 500;
    line-height: 100%;
    letter-spacing: -0.46px;
    margin-top: 4.68%;
    margin-left: 1.19vw;
}

.bl-blog-minutes {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin: 2.79% 1vw 0 1.19%;
}

.bl-blog-minutes > div {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.67vw;
    width: 90%;
    margin-left: 2%;
}

.bl-blog-minutes > div > div {
    padding: 10.464px;
    border-radius: 20.927px;
    background: #F3F3F3;
    color: #969B93;
    font-family: "Articulat CF";
    font-size: clamp(10px, 0.97vw, 23px);
    font-style: normal;
    font-weight: 400;
    line-height: 100%;
    letter-spacing: -0.377px;
    text-wrap-mode: nowrap;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 25%;
}
.bl-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.bl-pagination button {
    padding: 5px 10px;
    cursor: pointer;
}

.bl-pagination .pagination-pages {
    display: flex;
    gap: 5px;
}

.bl-pagination .pagination-pages span {
    padding: 5px 10px;
    cursor: pointer;
}

.bl-pagination .pagination-pages span.active {

    color: #666666;
    border-radius: 3px;
}
.bl-blog-minutes > a {
    height: 40px;
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--dark);
    border-radius: 24.59px;
}

.bl-blog-minutes > a > svg {
    height: 100%;
    width: 100%;
}

.bl-pagination {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10%;
    height: 200px;
}

.bl-pagination > div {
    width: 80%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.bl-pagination > div > span { 
    color: var(--dark);
    font-family: "Articulat CF";
    font-size: clamp(15px, 1.15vw, 30px);
    font-style: normal;
    font-weight: 500;
    line-height: 100%;
    letter-spacing: -0.44px;
    cursor: pointer;
}

.bl-pagination > button {
    border: none;
    background: transparent;
    outline: none;
    color: var(--dark);
    font-family: "Articulat CF";
    font-size: clamp(15px, 1.15vw, 30px);
    font-style: normal;
    font-weight: 500;
    line-height: 100%;
    letter-spacing: -0.44px;
    cursor: pointer;
}