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

    .single {
        padding: 15% 0 10% 0;
    }

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

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

    .sgl-hero-container > h1 {
        font-size: clamp(1rem, 5.87vw, 60px);
        width: 76%;
        margin: 8% 0 4% 0;
    }

    .sgl-date-container {
        gap: 2%;
    }

    .sgl-date-container > span {
        font-size: clamp(7px, 3.73vw, 20px);
    }

    .sgl-hero-container > img {
        width: 89%;
        height: auto;
    }

    .single-content {
        width: 89%;
        height: auto;
    }

    .single-content > h2 {
        font-size: clamp(15px, 5.33vw, 30px);
    }
    
    .single-content > h3 {
        font-size: clamp(8px, 3.73vw, 22px);
    }

    .single-content > p,
    .single-content > p > a, 
    .single-content > p > span 
    {
        font-size: clamp(10px, 4.27vw, 20px);
    }
}

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