/*********************************** Featured On Hero Section Start Here **************************************/

.td-featured-hero-wrapper{
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    overflow: hidden;
    margin-top: -110px;
    padding-top: 0px;
    min-height: 484px;
}

/* ====================================
   GRID IMAGE
==================================== */

.td-grid-bg{
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);

    width: 100%;
    height: 484px;

    z-index: 1;
    pointer-events: none;
}

.td-grid-bg img{
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.td-grid-dark{
    display: none !important;
}

html[data-theme="dark"] .td-grid-light{
    display: none !important;
}

html[data-theme="dark"] .td-grid-dark{
    display: block !important;
}

/* ====================================
   HERO CONTENT AREA
==================================== */

.td-featured-hero{
    position: relative;
    z-index: 5;

    width: min(1200px, calc(100% - 60px));
    margin: 0 auto;

    height: 484px;

    display: flex;
    justify-content: center;

    padding-top: 174px;
    box-sizing: border-box;
}

/* ====================================
   CONTENT WRAPPER
==================================== */

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

/* ====================================
   LABEL
==================================== */

.td-about-label{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;

    font-family: "JetBrains Mono", monospace;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;

    color: var(--td-text);
}

.td-dot{
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ff0000;
}

/* ====================================
   HEADING
==================================== */

.td-featured-content h1{
    margin: 0;

    font-family: "Tomorrow", sans-serif;
    font-size: 56px;
    font-weight: 700;
    line-height: 67px;
    letter-spacing: .2px;
    text-align: center;

    color: var(--td-text);
}

.td-featured-content h1 span{
    color: var(--td-accent);
}

/* ====================================
   DESCRIPTION
==================================== */

.td-featured-content p{
    max-width: 507px;
    margin: 0;

    font-family: "Nunito", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 19px;
    letter-spacing: .2px;
    text-align: center;

    color: var(--td-muted);
}

/* ====================================
   TABLET
==================================== */

@media (max-width:1024px){

    .td-featured-hero{
        height: 301px;
        padding-top: 140px;
    }

    .td-featured-hero-wrapper{
        min-height: 400px;
    }

    .td-featured-content{
        max-width: 700px;
    }

    .td-featured-content h1{
        font-size: 48px;
        line-height: 58px;
    }

    .td-featured-content p{
        max-width: 500px;
        font-size: 14px;
        line-height: 19px;
    }

    .td-grid-bg{
        width: 100%;
    }
}

/* ====================================
   MOBILE
==================================== */

@media (max-width:767px){

    .td-featured-hero-wrapper{
        min-height: 270px;
        margin-top: -110px;
        overflow: hidden;
    }

    .td-featured-hero{
        width: calc(100% - 40px);
        height: 220px;

        padding-top: 76px;

        display: flex;
        justify-content: center;
        align-items: flex-start;
    }

    .td-featured-content{
        padding-top: 40px;
        width: 100%;
        gap: 15px;
    }

    .td-about-label{
        gap: 5px;
        font-size: 8px;
        line-height: 11px;
    }

    .td-dot{
        width: 6px;
        height: 6px;
    }

    .td-featured-content h1{
        max-width: 294px;

        margin: 0 auto;

        font-size: 18px;
        font-weight: 700;
        line-height: 22px;
        letter-spacing: 0.2px;
        text-align: center;
    }

    .td-featured-content p{
        max-width: 210px;

        margin: 0 auto;

        font-size: 8px;
        font-weight: 400;
        line-height: 11px;
        letter-spacing: 0.2px;
        text-align: center;
    }

    .td-grid-bg{
        width: 100%;
        height: 270px;
    }

    .td-grid-bg img{
        object-fit: cover;
        object-position: center top;
    }
}

/*********************************** Featured On Hero Section End Here **************************************/

/*********************************** Featured On Media Section Start Here **************************************/

.td-featured-media-section{
    width:min(1200px, calc(100% - 60px));
    margin:90px auto 0;
}

/* ====================================
   WRAPPER
==================================== */

.td-featured-media{
    display:flex;
    flex-direction:column;
    gap:40px;
}

/* ====================================
   TABS
==================================== */

.td-featured-tabs{
    position:relative;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding-bottom:25px;
    border-bottom:1px solid var(--td-text);
}

.td-featured-tab{
    position:relative;
    appearance:none;
    background:transparent;
    border:none;
    outline:none;
    box-shadow:none;
    cursor:pointer;
    padding:0;
    margin:0;
    font-family:"Nunito",sans-serif;
    font-size:20px;
    font-weight:700;
    line-height:27px;
    letter-spacing:.2px;
    color:var(--td-text);
    transition:.3s ease;
    -webkit-tap-highlight-color:transparent;
}

.td-featured-tab:hover{
    color:#ff0000;
}

.td-featured-tab.active{
    color:#ff0000;
}

.td-featured-tab:focus,
.td-featured-tab:focus-visible,
.td-featured-tab:active{
    outline:none;
    box-shadow:none;
    background:transparent;
}

button.td-featured-tab::-moz-focus-inner{
    border:0;
}

/* ACTIVE LINE */

.td-featured-tab-line{
    position:absolute;
    left:0;
    bottom:-2px;
    width:190px;
    height:4px;
    background: var(--td-text);
    border-radius:100px;
    transition:.35s ease;
}

/* ====================================
   CONTENT CARD
==================================== */
.td-featured-content-wrapper{
    position:relative;
    background:rgba(255,0,0,0.06);
    border-radius:6px;
    overflow:hidden;
    transition:.3s ease;
}

html[data-theme="dark"] .td-featured-content-wrapper{
    background:#171615;
}

/* ====================================
   ITEM
==================================== */

.td-featured-item{
    display:none;
    align-items:center;
    justify-content:space-between;
    gap:80px;
    padding:20px 50px;
}

.td-featured-item.active{
    display:flex;
}

/* ====================================
   TEXT
==================================== */

.td-featured-text{
    max-width:737px;
    display:flex;
    flex-direction:column;
    gap:30px;
}

.td-featured-text h3{
    margin:0;
    font-family:"Tomorrow",sans-serif;
    font-size:28px;
    font-weight:600;
    line-height:34px;
    letter-spacing:.2px;
    color:var(--td-text);

}

.td-featured-text p{
    margin:0;
    font-family:"Tomorrow",sans-serif;
    font-size:18px;
    font-weight:400;
    line-height:22px;
    letter-spacing:.2px;
    color:var(--td-text);
}

.td-featured-text strong{
    font-weight:600;
    color:var(--td-accent);
}

/* ====================================
   LOGO
==================================== */

.td-featured-logo{
    flex-shrink:0;
    width:275px;
    height:249px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.td-featured-logo img{
    width:100%;
    height:100%;
    object-fit:contain;
}

/* ====================================
   THEME IMAGES
==================================== */

.td-logo-dark{
    display:none;
}

html[data-theme="dark"] .td-logo-light{
    display:none;
}

html[data-theme="dark"] .td-logo-dark{
    display:block;
}

html[data-theme="light"] .td-logo-light{
    display:block;
}

html[data-theme="light"] .td-logo-dark{
    display:none;
}

/* ====================================
   ANIMATION
==================================== */

.td-featured-item{
    animation:tdFeaturedFade .35s ease;
}

@keyframes tdFeaturedFade{

    from{
        opacity:0;
        transform:translateY(12px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}

/* ====================================
 REMOVE GLOBAL BUTTON FOCUS STYLES
  ==================================== */
   button.td-featured-tab, 
   button.td-featured-tab:hover,
    button.td-featured-tab:focus,
     button.td-featured-tab:focus-visible,
      button.td-featured-tab:active { 
        outline: none !important; 
        box-shadow: none !important; 
        border: none !important; 
        background: transparent !important;
    } 
    button.td-featured-tab::-moz-focus-inner{
         border: 0;
    } 
    button.td-featured-tab{
         -webkit-tap-highlight-color: transparent;
    }

/* Keyboard focus must remain clearly visible for tab navigation. */
button.td-featured-tab:focus-visible {
    outline: 2px solid #ff0000 !important;
    outline-offset: 5px !important;
    box-shadow: 0 0 0 2px rgba(255, 0, 0, 0.16) !important;
    border-radius: 2px;
}

/* ====================================
   TABLET
==================================== */

@media(max-width:1024px){

.td-featured-media-section{
    width:calc(100% - 40px);
    margin:80px auto 0;
}

.td-featured-item{
    padding:30px;
    gap:50px;
}

.td-featured-text{
    max-width:564px;
}

.td-featured-text h3{
    font-size:28px;
}

.td-featured-text p{
    font-size:16px;
    line-height:19px;
}

.td-featured-logo{
    width:226px;
    height:204px;
}

}

/* ====================================
   MOBILE
==================================== */

@media(max-width:767px){

.td-featured-media-section{
    width:calc(100% - 40px);
    margin:40px auto 0;
}

.td-featured-media{
    gap:20px;
}

/* MOBILE TABS */

.td-featured-tabs{
    display:contents;
}

.td-featured-tab-line{
    display:none;
}

.td-featured-tab{
    width:100%;
    text-align:left;
    font-size:14px;
    line-height:19px;
}

.td-featured-tab.active{
    order:1;
}

.td-featured-tab:not(.active){
    order:3;
}

/* CONTENT CARD */

.td-featured-content-wrapper{
    order:2;
    background:rgba(255,0,0,0.06);
    border-radius:4px;
}

html[data-theme="dark"] .td-featured-content-wrapper{
    background:#171615;
}

/* ITEM */

.td-featured-item{
    display:none;
    flex-direction:column;
    align-items:flex-start;
    gap:20px;
    padding:20px;
}

.td-featured-item.active{
    display:flex;
}

/* TEXT */

.td-featured-text{
    width:100%;
    gap:15px;
}

.td-featured-text h3{
    font-size:20px;
    line-height:24px;
}

.td-featured-text p{
    font-size:12px;
    line-height:14px;
    color:var(--td-text);
}

/* LOGO */

.td-featured-logo{
    width:108px;
    height:98px;
}

}

/*********************************** Featured On Media Section End Here **************************************/

/* ************************************ Featured On Communities We Support Section Start Here ************************************* */

.td-clients-section {
    width:100%;
    padding:80px 0;
    background:var(--td-bg);
    overflow:hidden;
}
.td-container{
    width: min(1200px, calc(100% - 40px));
    margin: 0 auto;
    box-sizing: border-box;
}

/* =========================================
   DESKTOP HEADING
========================================= */

.td-clients-heading{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:5px;
    margin-bottom:40px;
    font-family:"JetBrains Mono", monospace;
    font-size:12px;
    font-weight:400;
    line-height:16px;
    color:var(--td-text);
}

.td-heading-dot{
    width:8px;
    height:8px;
    border-radius:50%;
    background:#FF0000;
}

/* =========================================
   SLIDER
========================================= */

.td-clients-slider {
    width:100%;
    overflow:hidden;
    position:relative;
}

.td-clients-track {
    display:flex;
    flex-wrap:nowrap;
    align-items:center;
    width:max-content;
    will-change:transform;
}

/* =========================================
   CARD BASE
========================================= */

.td-client-card {
    flex:0 0 300px;
    width:300px;
    height:127px;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:transform .3s ease;
    z-index:1;
}

/* =========================================
   STATIC FIGMA BORDER SYSTEM
========================================= */
/* LEFT + BOTTOM */

.td-client-card:nth-child(4n+1),
.td-client-card:nth-child(4n+3){
    border-left:1px solid rgba(255,255,255,.10);
    border-bottom:1px solid rgba(255,255,255,.10);
}

/* TOP + LEFT */
.td-client-card:nth-child(4n+2),
.td-client-card:nth-child(4n+4){
    border-top:1px solid rgba(255,255,255,.10);
    border-left:1px solid rgba(255,255,255,.10);
}

/* =========================================
   THEME SUPPORT
========================================= */

html[data-theme="light"] .td-client-card {
    background:radial-gradient(
        100% 100% at 0% 100%,
        rgba(255,255,255,.25) 0%,
        rgba(255,255,255,0) 100%
    );
    border-color:rgba(34,34,34,.12);
}

html[data-theme="dark"] .td-client-card {
    background:transparent;
    border-color:rgba(255,255,255,.10);
}

/* =========================================
   ACTIVE STATE
========================================= */
.td-client-card.active {
    z-index:5;
    border-color:var(--td-accent);
}

/* =========================================
   LOGOS
========================================= */

.td-client-card img {
    max-width:170px;
    max-height:76px;
    object-fit:contain;
    transition:transform .3s ease;
}

.td-client-card:hover img {
    transform:scale(1.05);
}

/* =========================================
   TABLET
========================================= */

@media(max-width:1024px){

    /* hide heading */
    .td-clients-heading{
        display:none;
    }

    .td-client-card{
        flex:0 0 250px;
        width:250px;
        height:110px;
    }
}

/* =========================================
   MOBILE
========================================= */
@media(max-width:767px){

    .td-clients-section{
        padding:50px 0;
    }

    .td-client-card{
        flex:0 0 220px;
        width:220px;
        height:95px;
    }

    .td-client-card img{
        max-width:100px;
        max-height:31px;
    }
}

/* ************************************ Featured On Communities We Support Section End Here ************************************* */

/************************************ Featured On Our Events Section Start ***********************************/

.td-events-section{
    width:100%;
    padding:90px 0;
    background:var(--td-bg);
}

.td-events-wrapper{
    width:min(1126px, calc(100% - 60px));
    margin:0 auto;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:40px;
}

/* ====================================
   LABEL
==================================== */

.td-events-label{
    display:flex;
    align-items:center;
    gap:5px;
}

.td-events-label span{
    width:8px;
    height:8px;
    background:#ff0000;
    border-radius:50%;
}

.td-events-label p{
    margin:0;
    font-family:"JetBrains Mono", monospace;
    font-size:12px;
    font-weight:400;
    line-height:16px;
    color:var(--td-text);
}

/* ====================================
   EVENTS LIST
==================================== */

.td-events-list{
    width:100%;
    display:flex;
    flex-direction:column;
    gap:50px;
}

/* ====================================
   EVENT CARD
==================================== */

.td-event-card{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:50px;
}
/* ====================================
   IMAGE
==================================== */

.td-event-image{
    width:533px;
    height:311px;
    flex-shrink:0;
}

.td-event-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

/* ====================================
   CONTENT
==================================== */
.td-event-content{
    width:543px;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:40px;
}

.td-event-info{
    display:flex;
    flex-direction:column;
    gap:30px;
}

.td-event-info h4{
    margin:0;
    font-family:"Tomorrow",sans-serif;
    font-size:24px;
    font-weight:600;
    line-height:29px;
    letter-spacing:.2px;
    color:var(--td-text);
}

.td-event-info p{
    margin:0;
    font-family:"Nunito",sans-serif;
    font-size:14px;
    font-weight:700;
    line-height:19px;
    letter-spacing:.2px;
    color:var(--td-muted);
}

.td-event-info p strong{
    color:#ff0000;
}

/* ====================================
   BUTTON
==================================== */
.td-event-btn .td-animated-btn{
    width:132px;
    height:37px;
}

/* ===============================
   TABLET
   768px - 1024px
================================ */

@media (max-width:1024px){

    .td-events-section{
        padding:80px 0;
    }

    .td-events-wrapper{
        width:calc(100% - 40px);
        gap:31px;
    }

    .td-events-list{
        gap:40px;
    }
    /* EVENT CARD */

    .td-event-card{
        gap:35px;
        align-items:center;
    }

    /* IMAGE */
    .td-event-image{
        width:428px;
        height:250px;
    }

    /* CONTENT */
    .td-event-content{
        width:521px;
        gap:32px;
    }

    .td-event-info{
        gap:25px;
    }

    .td-event-info h4{
        font-size:20px;
        line-height:24px;
    }

    .td-event-info p{
        font-size:12px;
        line-height:16px;
        font-weight:400;
    }

    .td-event-btn .td-animated-btn{
        width:123px;
        height:34px;
    }
}

/* ===============================
   MOBILE
   767px and below
================================ */

@media(max-width:767px){

    .td-events-section{
        padding:60px 0;
    }

    .td-events-wrapper{
        width:calc(100% - 40px);
        gap:20px;
    }

    .td-events-label span{
        width:8px;
        height:8px;
    }

    .td-events-label p{
        font-size:8px;
        line-height:11px;
    }

    .td-events-list{
        gap:32px;
    }

    /* EVENT CARD */
    .td-event-card{
        width:100%;
        flex-direction:column;
        align-items:flex-start;
        justify-content:flex-start;
        gap:20px;
    }

    /* IMAGE */
    .td-event-image{
        width:100%;
        height:188px;
    }

    .td-event-image img{
        object-fit:cover;
    }

    /* CONTENT */
    .td-event-content{
        width:100%;
        gap:32px;
    }

    .td-event-info{
        width:100%;
        gap:15px;
    }

    .td-event-info h4{
        font-size:18px;
        line-height:22px;
    }

    .td-event-info p{
        font-size:10px;
        line-height:14px;
        font-weight:400;
    }

    .td-event-btn .td-animated-btn{
        width:100px;
        height:28px;
    }
}

/************************************ Featured On Our Events Section End ************************************/