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

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

.sgl-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;
}

.sgl-hero-container > h1 {
    color: var(--dark);
    text-align: center;
    font-family: "Articulat CF xBold";
    font-size: clamp(20px, 2.5vw, 60px);
    font-style: normal;
    font-weight: 800;
    line-height: 100%;
    letter-spacing: -0.4px;
    width: 45%;
    margin: 4% 0 2% 0;
}

.sgl-date-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 1%;
    height: auto;
    width: 100%;
}

.sgl-date-container > span {
    color: #706F6F;
    font-family: "Articulat CF";
    font-size: clamp(15px, 1.04vw, 25px);
    font-style: normal;
    font-weight: 500;
    line-height: 120%;
}

.sgl-hero-container > img {
    height: auto;
    width: 60%;
    margin: 4% 0;
}



.single-content {
    width: 50%;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin-top: 2rem;
}
.single-content li{
    color: var(--dark);
    font-family: "Articulat CF semiBold";
    font-style: normal;
    font-weight: 700;
    line-height: 120%;
    list-style: disc;
}
.single-content > h2 {
    color: var(--dark);
    font-family: "Articulat CF semiBold";
    font-size: clamp(30px, 2.19vw, 50px);
    font-style: normal;
    font-weight: 700;
    line-height: 120%;
}

.single-content > h3 {
    color: var(--dark);
    font-family: "Articulat CF semiBold";
    font-size: clamp(14px, 1.25vw, 25px);
    font-style: normal;
    font-weight: 700;
    line-height: 120%;
}
.single-content > h4 {
    color: var(--dark);
    font-family: "Articulat CF semiBold";
    font-size: clamp(14px, 1.25vw, 25px);
    font-style: normal;
    font-weight: 700;
    line-height: 120%;
}   
.single-content  a {
    color: var(--dark);
    font-family: "Articulat CF semiBold";
    font-size: clamp(14px, 1.25vw, 25px);
    font-style: normal;
    font-weight: 700;
    line-height: 120%;
    text-decoration: underline !important;
}
.single-content img{
    max-width: 100%;
}
.single iframe{
    width: 100%;
}

.single-content > p {
    color: var(--gray);
    font-family: "Neue Haas Unica Pro";
    font-size: clamp(14px, 1.15vw, 25px);
    font-style: normal;
    font-weight: 350;
    line-height: 130%;
}

.single-content > p > a, 
.single-content > p > span
{
    color: var(--gray);
    font-family: "Neue Haas Unica Pro";
    font-size: clamp(14px, 1.15vw, 25px);
    font-style: normal;
    font-weight: 350;
    line-height: 130%;
    text-decoration: underline !important;
}

.explore-learning {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 50px;
}

.explore-learning > .title {
    width: 95%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.explore-learning > .title > h2 {
    color: var(--dark);
    font-family: "Articulat CF xBold";
    font-size: clamp(40px, 3.13vw, 80px);
    font-style: normal;
    font-weight: 800;
    line-height: 100%;
    letter-spacing: -1.2px;
}

.explore-learning > .title > a {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5%;
    width: 21%;
    justify-content: flex-end;
    cursor: pointer;
}

.explore-learning > .title > a > p {
    color: var(--dark);
    font-family: "Articulat CF xBold";
    font-size: clamp(20px, 1.25vw, 35px);
    font-style: normal;
    font-weight: 800;
    line-height: 100%;
    letter-spacing: -0.48px;
}

.explore-learning > .title > a > svg {
    width: 12%;
    height: auto;
}

.bl-card-container{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 95%;
    height: auto;
}

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

.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 semiBold";
    font-size: clamp(14px, 1.20vw, 28px);
    font-style: normal;
    font-weight: 700;
    line-height: 100%;
    letter-spacing: -0.46px;
    margin-top: 2.68%;
    margin-left: 1.19vw;
}

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

.bl-blog-minutes > div {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.67vw;
}

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

.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%;
}