/*********************************** HOME PAGE HERO SECTION ************************************/

.td-hero-wrapper{
    position:relative;
    width:100vw;
    margin-left:calc(50% - 50vw);
    overflow:hidden;
    margin-top:-108px;
    padding-top:90px;
}

/* ========================================
GRID BACKGROUND
======================================== */

.td-grid-bg{
    position:absolute;
    inset:0;
    z-index:1;
    height: 620px;

    background-image:
        linear-gradient(to right, rgba(0,0,0,.02) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0,0,0,.02) 1px, transparent 1px);

    background-size:50px 50px;
}

html[data-theme="dark"] .td-grid-bg{
    background-image:
        linear-gradient(to right, rgba(255,255,255,.03) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255,255,255,.03) 1px, transparent 1px);
}

/* ========================================
RED GLOW
======================================== */

.td-gradient-shape{
    position:absolute;
    top:-300px;
    right:-250px;
    width:900px;
    height:900px;
    border-radius:50%;
    z-index:2;

    background:radial-gradient(
        circle,
        rgba(255,0,0,.12) 0%,
        rgba(255,0,0,.05) 40%,
        transparent 70%
    );
}

html[data-theme="dark"] .td-gradient-shape{
    background:radial-gradient(
        circle,
        rgba(255,0,0,.15) 0%,
        rgba(255,0,0,.08) 40%,
        transparent 70%
    );
}

/* ========================================
HERO LAYOUT
======================================== */

.td-hero{
    position:relative;
    z-index:5;
    width:min(1200px, calc(100% - 60px));
    min-height:580px;
    margin:0 auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:60px;
}

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

.td-hero-content{
    width:520px;
    max-width:100%;
    flex:1;
}

.td-label{
    display:inline-flex;
    align-items:center;
    gap:6px;
    margin-bottom:20px;
    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;
    flex:0 0 8px;
}

.td-hero-content h1{
    margin:0 0 20px;
    font-family:"Tomorrow", sans-serif;
    font-size:56px;
    font-weight:700;
    line-height:67px;
    letter-spacing:.2px;
    color:var(--td-text);
}

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

.td-hero-content p{
    max-width:520px;
    margin:0 0 25px;
    font-family:"Nunito", sans-serif;
    font-size:12px;
    font-weight:400;
    line-height:16px;
    letter-spacing:.2px;
    color:var(--td-muted);
}


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

h1.td-hero-title {
    line-height: 1.1;
}


/* Static text + roller */

.td-hero-title .td-word-static,
.td-hero-title .td-word-roller {
    display: inline-flex !important;
    vertical-align: baseline !important;
}


/* =========================
   WORD ROLLER
========================= */

.td-word-roller {
    display: inline-flex;
    width: auto;
    height: 1.2em;
    overflow: hidden;
    vertical-align: baseline;
    flex-shrink: 0;
    transition: width 0.3s ease;
}

/* =========================
   WORD LIST
========================= */

.td-word-list {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    margin: 0;
    padding: 0;
    transform: translateY(0);
    will-change: transform;
}


/* =========================
   WORD
========================= */

.td-word-list span {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 1.2em;
    line-height: 1.2em;
    white-space: nowrap;
    color: var(--td-accent);
    font-weight: 700;
    flex-shrink: 0;
}

/* ========================================
BUTTON
======================================== */

.td-hero-btn{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:152px;
    height:40px;
    border-radius:999px;
    overflow:hidden;
    isolation:isolate;
    text-decoration:none;
    border:0;
    font-family:"Nunito",sans-serif;
    font-size:16px;
    font-weight:700;
    line-height:22px;
    color:var(--td-text);
    background:linear-gradient(
        90deg,
        rgba(255,0,0,.20) 0%,
        rgba(255,255,255,.30) 100%
    );
}

.td-hero-btn{
    position:relative;
    overflow:hidden;
    border-radius:999px;
}

.td-hero-btn::before{
    content:"";
    position:absolute;
    inset:-50%;
    background:
        conic-gradient(
            #ffffff,
            #ff0000,
            #ffffff,
            #ff0000,
            #ffffff
        );

    animation:td-btn-spin 2s linear infinite;
}

.td-hero-btn::after{
    content:"";
    position:absolute;
    inset:2px;
    border-radius:999px;
    background:linear-gradient(
        90deg,
        rgba(255,0,0,.20) 0%,
        rgba(255,255,255,.30) 100%
    );

    z-index:1;
}

.td-hero-btn span{
    position:relative;
    z-index:2;
}

@keyframes td-btn-spin{
    from{
        transform:rotate(0deg);
    }
    to{
        transform:rotate(360deg);
    }
}

.td-hero-btn:hover,
.td-hero-btn:focus,
.td-hero-btn:active{
    transform:none;
    outline:none;
    box-shadow:none;
}

@property --td-btn-angle{
    syntax:"<angle>";
    initial-value:0deg;
    inherits:false;
}

@keyframes td-btn-circle-light{
    to{
        --td-btn-angle:360deg;
    }
}

/* ========================================
GLOBE
======================================== */

.td-globe-container{
    position:relative;
    width:586px;
    height:586px;
    max-width:100%;
    flex-shrink:0;
}

#td-globe{
    width:90%;
    height:90%;
    overflow:hidden;
}

#td-globe canvas{
    display:block;
    width:100% !important;
    height:100% !important;
    max-width:100%;
}

.td-office-label{
    display:flex;
    align-items:center;
    gap:6px;
    padding:4px 10px;
    background:#000;
    border:1px solid rgba(255,0,0,.5);
    border-radius:14px;
    color:#fff;
    font-family:"Tomorrow",sans-serif;
    font-size:10px;
    font-weight:700;
    white-space:nowrap;
    pointer-events:none;
    transform:translate(-50%, -50%);
}

.td-office-label-dot{
    width:8px;
    height:8px;
    border-radius:50%;
    background:#ff0000;
    flex-shrink:0;
}

/* ===================================
   GLOBE COUNTRY FLAGS
====================================== */

.td-office-flag {
    position: relative;
    width: 46px;
    height: 42px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    transform: translate(-50%, -100%);
    pointer-events: none;
    z-index: 10;
}

/* FLAG */

.td-office-flag img {
    position: absolute;
    top: 0;
    left: 7px;
    width: 38px;
    height: 25px;
    object-fit: cover;
    border-radius: 2px;
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow:
        0 3px 8px rgba(0, 0, 0, 0.18);
}

/* FLAG POLE */

.td-flag-pole {
    position: absolute;
    left: 6px;
    top: 0;
    width: 2px;
    height: 35px;
    background: #777;
    border-radius: 2px;
}


/* LOCATION PIN */

.td-flag-pin {
    position: absolute;
    left: 2px;
    bottom: 2px;
    width: 10px;
    height: 10px;
    background: #ff0000;
    border: 2px solid #ffffff;
    border-radius: 50%;
    box-shadow:
        0 0 0 4px rgba(255, 0, 0, 0.16),
        0 2px 5px rgba(0, 0, 0, 0.2);
}


/* SMALL SCREEN */

@media (max-width: 768px) {

    .td-office-flag {
        width: 38px;
        height: 36px;
    }

    .td-office-flag img {
        width: 32px;
        height: 21px;

        left: 6px;
    }

    .td-flag-pole {
        left: 5px;
        height: 30px;
    }

    .td-flag-pin {
        left: 1px;
        width: 8px;
        height: 8px;
    }
}

/* ========================================
LAPTOP
======================================== */

@media (max-width:1200px){

    .td-hero{
        gap:40px;
    }

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

    .td-globe-container{
        width:450px;
        height:450px;
    }
}

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

@media (max-width:1024px){

    .td-gradient-shape{
        width:700px;
        height:700px;
        top:-220px;
        right:-180px;
    }

    .td-hero{

        width:min(536px, calc(100% - 40px));
        flex-direction:column;
        align-items:center;
        justify-content:center;
        text-align:center;
        gap:40px;
        min-height:auto;
        padding:92px 0 60px;
    }

    .td-hero-content{
        width:536px;
        max-width:100%;
        display:flex;
        flex-direction:column;
        align-items:center;
    }

    .td-label{
        justify-content:center;
        margin-bottom:25px;
    }

    .td-hero-content h1{
        width:100%;
        max-width:536px;
        font-size:48px;
        line-height:58px;
        margin-bottom:25px;
    }

    .td-hero-content p{
        width:100%;
        max-width:536px;
        text-align:center;
        margin:0 0 25px;
    }

    .td-globe-container{
        width:463px;
        height:333px;
        margin:0 auto;
    }
}


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

@media (max-width:767px){

    .td-gradient-shape{
        width:500px;
        height:500px;
        top:-180px;
        right:-120px;
    }

    .td-hero-wrapper{
        margin-top:-90px;
        padding-top:90px;
    }

    .td-hero{

        width:350px;
        max-width:calc(100% - 40px);
        flex-direction:column;
        align-items:center;
        justify-content:center;
        text-align:center;
        gap:20px;
        min-height:auto;
        padding:15px 0 0;
    }

    .td-hero-content{

        width:290px;
        max-width:100%;
        display:flex;
        flex-direction:column;
        align-items:center;
    }

    .td-label{
        justify-content:center;
        gap:5px;
        margin-bottom:10px;
        font-size:8px;
        line-height:11px;
    }

    .td-dot{
        width:4px;
        height:4px;
        flex:0 0 4px;
    }

    .td-hero-content h1{

        width:290px;
        font-size:18px;
        line-height:22px;
        margin-bottom:10px;
    }

    .td-hero-content p{

        width:241px;
        max-width:241px;
        font-size:8px;
        line-height:11px;
        margin:0 0 20px;
    }

    .td-hero-btn{

        width:75px;
        height:23px;
        font-size:8px;
        line-height:11px;
    }

    .td-globe-container{

        width:281px;
        height:262px;
        margin:0 auto;
    }

    .td-office-label{

        font-size:5px;
        padding:3px 6px;
    }

    .td-office-label-dot{

        width:4px;
        height:4px;
    }
}

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

@media (max-width:390px){

    .td-hero{
        width:calc(100% - 20px);
    }

    .td-hero-content{
        width:100%;
    }

    .td-hero-content h1{
        width:100%;
        max-width:290px;
    }

    .td-globe-container{
        width:260px;
        height:240px;
    }
}

/*********************************** HOME PAGE HERO SECTION END ************************************/

/*********************************** Home Page Our Badge Section Start Here  **************************************/

.td-badges-section{
    position:relative;
    width:100%;
    overflow:hidden;
    padding-top:20px;
    
}

/* ====================================
TITLE
==================================== */

.td-badges-title{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:8px;
    margin-bottom:20px;
}

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

.td-line{
    width:300px;
    max-width:300px;
    height:1px;
    display:block;
}


.td-line:first-child {
    background: linear-gradient(
        90deg,
        rgba(5, 5, 5, 0) 0%,
        rgba(5, 5, 5, 0.7) 100%
    );
}

.td-line:last-child {
    background: linear-gradient(
        270deg,
        rgba(5, 5, 5, 0) 0%,
        rgba(5, 5, 5, 0.7) 100%
    );
}

html[data-theme="dark"] .td-line:first-child{
    background:linear-gradient(
        90deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,.5) 100%
    );
}

html[data-theme="dark"] .td-line:last-child{
    background:linear-gradient(
        270deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,.5) 100%
    );
}

/* ====================================
MARQUEE
==================================== */

.td-badges-marquee{
    width:min(1200px, calc(100% - 40px));
    margin:0 auto;
    overflow:hidden;
}

.td-badges-track{
    display:flex;
    align-items:center;
    gap:80px;
    width:max-content;
    animation:tdBadgesMarquee 30s linear infinite;
}

.td-badges-marquee:hover .td-badges-track{
    animation-play-state:paused;
}

@keyframes tdBadgesMarquee{
    from{
        transform:translateX(0);
    }

    to{
        transform:translateX(-50%);
    }
}

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

.td-badge-item{
    display:flex;
    align-items:center;
    gap:10px;
    flex-shrink:0;
}

.td-badge-item img{
    width:35px;
    height:35px;
    display:block;
}

.td-badge-item span{
    font-family:"Tomorrow", sans-serif;
    font-size:16px;
    font-weight:400;
    line-height:19px;
    white-space:nowrap;
}

/* ====================================
COLORS
==================================== */

.td-core span{
    color:#CA0404;
}

.td-meetup span{
    color:#FC911F;
}

.td-support-team span{
    color:#008CAA;
}

.td-support-contributor span{
    color:#048CAC;
}

.td-plugin span{
    color:#F06925;
}

.td-translation-editor span {
    color: #cc4295;
}

.td-translation-contributor span {
    color: #cc4295;
}

.td-wordcamp-organizer span {
    color: #ec8404;
}

.td-wordcamp-speaker span {
    color: #ec8404;
}

.td-themes-team span {
    color: #4b3393;
}

/* ====================================
DARK THEME BADGES
==================================== */

html[data-theme="dark"] .td-badge-item span{
    color:#FFFFFF !important;
}

html[data-theme="dark"] .td-badge-item img{
    filter:brightness(0) invert(1);
}

/* Translation Editor - Dark Theme */
html[data-theme="dark"] .td-badge-item.td-translation-editor img {
    filter: grayscale(1) invert(1) brightness(1.4) contrast(1.2) !important;
}

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

@media(max-width:1024px){

    .td-badges-marquee{
        width:calc(100% - 40px);
    }

    .td-line{
        width:180px;
        max-width:180px;
    }

    .td-badges-track{
        gap:60px;
    }

    .td-badge-item span{
        font-size:14px;
    }
}

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

@media(max-width:767px){

    .td-badges-section{
        padding-top:40px;
    }

    .td-badges-marquee{
        width:calc(100% - 30px);
    }

    .td-line{
        width:80px;
        max-width:80px;
    }

    .td-badges-track{
        gap:40px;
    }

    .td-badge-item img{
        width:28px;
        height:28px;
    }

    .td-badge-item span{
        font-size:12px;
        line-height:16px;
    }
}

/*********************************** Home Page Our Badge Section End Here  **************************************/

/*********************************** Home Page About Section Satrt Here  **************************************/

.td-home-about{
    position:relative;
    padding-top: 90px;
    padding-left: 20px;
    padding-right: 20px
}

.td-home-about-inner{
    width:min(900px,100%);
    margin:0 auto;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:20px;
}

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

.td-home-about-label{
    display:flex;
    align-items: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;
}

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

.td-home-about-text{
    width:100%;
    font-family:"Tomorrow", sans-serif;
    font-size:40px;
    font-weight:700;
    line-height:48px;
    letter-spacing:.2px;
    color:var(--td-muted);
}

.td-home-about-text .word{
    color:var(--td-text);
     opacity: 0.2;
    transition: opacity 0.3s ease;
    transition:color .25s ease;
}

.td-home-about-text .word.active{
    color:var(--td-text);
     opacity: 1;
    
}


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

@media(max-width:1024px){

    .td-home-about{
        padding-top:60px;  
    }

    .td-home-about-inner{
        width:min(725px,100%);
        gap:15px;
    }

    .td-home-about-text{
        font-size:32px;
        line-height:38px;
    }
}

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

@media(max-width:767px){

    .td-home-about{
        padding-top:40px;
    }

    .td-home-about-inner{
        width:min(290px,100%);
        gap:10px;
    }

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

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

    .td-home-about-text{
        font-size:16px;
        line-height:19px;
    }
}
/*********************************** Home Page About Section End Here  **************************************/

/************************************* HOME PAGE SERVICE SECTION START ***********************************/

.td-home-service-section{
    width:min(1200px, calc(100% - 60px));
    margin:0 auto;
    padding-top:90px;
}

/* ================= HEADER ================= */

.td-home-service-heading{
    max-width:594px;
    margin:0 auto 40px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:20px;
    text-align:center;
}

.td-home-service-label{
    display:flex;
    align-items:center;
    gap:5px;
    font-family:"JetBrains Mono", monospace;
    font-size:12px;
    line-height:16px;
    color:var(--td-text);
}


.td-dot{
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--td-accent);
}

.td-home-service-heading h2{
    margin:0;
    font-family:"Tomorrow",sans-serif;
    font-size:32px;
    line-height:38px;
    font-weight:700;
    letter-spacing:.2px;
    color:var(--td-text);
}

.td-home-service-heading h2 span{
    color:var(--td-accent);
}

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

.td-home-service-content{
    display:grid;
    grid-template-columns:220px 1fr;
    gap:64px;
    align-items:center;
}

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

.td-home-service-tabs{
    display:flex;
    flex-direction:column;
    gap:20px;
    width: 245px;
}

.td-home-service-tab{
    appearance:none;
    -webkit-appearance:none;
    display:flex;
    align-items:center;
    gap:8px;
    padding:0;
    border:0;
    box-shadow: none;
    background:transparent;
    cursor:pointer;
    font-family:"Nunito",sans-serif;
    font-size:16px;
    font-weight:600;
    line-height:22px;
    letter-spacing:.2px;
    color:var(--td-text);
    transition:
    transform .3s ease,
    color .3s ease;
}

/* REMOVE BLUE HOVER */
.td-home-service-tab:hover,
.td-home-service-tab:focus,
.td-home-service-tab:active{
    color:var(--td-text);
    background:transparent;
    outline:none;
    box-shadow:none;
}



.td-home-service-tab:hover{
    transform:translateX(4px);
}

.td-home-service-tab .bullet{
    width:5px;
    height:5px;
    border-radius:50%;
    background:var(--td-text);
    opacity:.35;
    transition:.3s ease;
}

.td-home-service-tab.active .bullet{
    background:var(--td-accent);
    opacity:1;

}

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

.td-home-service-card{
    display:grid;
    grid-template-columns:370px 1fr;
    gap:30px;
    padding:20px;
    background:var(--td-card);
    border:1px solid var(--td-border);
    border-radius:15px;
    box-shadow:
    0 0 35px rgba(153,153,153,.15);
    transition:
    opacity .3s ease,
    transform .3s ease;

}

html[data-theme="dark"] .td-home-service-card{
    box-shadow:
    0 0 35px rgba(255,255,255,.18);

}

.td-home-service-card.switching{
    opacity:.4;
    transform:translateY(10px);
}

/* ================= INFO ================= */

.td-home-service-info{
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:20px;
}

.td-home-service-mini-label{
    display:flex;
    align-items:center;
    gap:5px;
    font-family:"JetBrains Mono",monospace;
    font-size:10px;
    line-height:13px;
    color:var(--td-text);
}

.mini-dot{
    width:5px;
    height:5px;
    border-radius:50%;
    background:var(--td-accent);
}

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

.td-home-service-info p{
    margin:0;
    font-family:"Nunito",sans-serif;
    font-size:12px;
    line-height:16px;
    letter-spacing:.2px;
    color:var(--td-muted);
}

.td-home-service-read-more{
    display:inline-flex;
    width:max-content;
    font-family:"JetBrains Mono",monospace;
    font-size:12px;
    line-height:16px;
    color:var(--td-text);
    text-decoration:none;
    transition:.3s ease;
}

.td-home-service-read-more:hover,
.td-home-service-read-more:focus{
    color:var(--td-accent);
}

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

.td-home-service-image{
    display:flex;
    justify-content:center;
    align-items:center;
}

.td-home-service-image img{
    width:100%;
    max-width:467px;
    height:auto;
    display:block;
}

/* ================= THEME IMAGE SWITCH ================= */

.td-home-service-light{
    display:block !important;
}

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

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

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

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

@media(max-width:1024px){

.td-home-service-section{
    width:min(875px,calc(100% - 60px));
    padding-top:60px;
}

.td-home-service-heading h2{
    font-size:28px;
    line-height:34px;
}

.td-home-service-content{

    grid-template-columns:180px 1fr;
    gap:50px;
}

.td-home-service-tab{
    font-size:14px;
    line-height:20px;
}

.td-home-service-card{
    grid-template-columns:
    minmax(180px,226px)
    minmax(220px,1fr);
}
.td-home-service-info h3{
    font-size:18px;
    line-height:100%;
}

.td-home-service-image img{
    max-width:296px;
}

}

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

@media(max-width:767px){

.td-home-service-section{
    width:100%;
    padding:40px 20px 0;
}

.td-home-service-heading{
    gap:10px;
    margin-bottom:20px;
}

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

.td-home-service-label{
    font-size:8px;
    line-height:11px;
}

.td-home-service-heading h2{
    max-width:191px;
    font-size:16px;
    line-height:19px;
}

.td-home-service-content{
    display:flex;
    flex-direction:column;
    gap:15px;
}

.td-home-service-tabs{
    width:100%;
    flex-direction:row;
    gap: 8px;
    
}

.td-home-service-tab{
    font-size:6px;
    line-height:8px;
}

.td-home-service-tab:hover{
    transform:none;
}

.td-home-service-card{
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px;
    overflow:hidden;
}

.td-home-service-info{
    flex:0 0 43%;
    gap:10px;
}

.td-home-service-mini-label{
    font-size:7px;
    line-height:100%;
}

.td-home-service-info h3{
    font-size:14px;
    line-height:17px;
}

.td-home-service-info p{
    font-size:4px;
    line-height:5px;
}

.td-home-service-image{
    flex:0 0 54%;
}

}

/*************************************** HOME PAGE SERVICE SECTION END ****************************************/

/*********************************** Home Page community Section Start Here **********************************/

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

/* =========================
HEADER
========================= */

.td-gallery-header{
    text-align: center;
    margin-bottom: 40px;
}

.td-gallery-tag{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: "JetBrains Mono", monospace;
    font-size: 12px;
    color: var(--td-text);
}

.td-gallery-tag .td-dot{
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--td-accent);
}

.td-gallery-header h2{
    font-family: "Tomorrow", sans-serif;
    font-size: 32px;
    font-weight: 700;
    margin-top: 10px;
    color: var(--td-text);
}

.td-gallery-header h2 span{
    color: var(--td-accent);
}

/* =========================
GRID LAYOUT (DESKTOP BASE)
========================= */

.td-gallery-grid{
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 320px;
    gap: 20px;
}

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

.td-gallery-card{
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    cursor: pointer;
    min-height: 100%;
}

.td-gallery-card img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s ease;
}

/* =========================
OVERLAY BASE
========================= */

.td-gallery-card::after{
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0);
    transition: .4s ease;
}

.td-gallery-overlay{
    position: absolute;
    left: 15px;
    bottom: 15px;
    z-index: 2;
    color: #fff;
    opacity: 0;
    transform: translateY(10px);
    transition: .4s ease;
}

.td-gallery-overlay h3{
    font-family: "Tomorrow", sans-serif;
    font-size: 18px;
    margin: 0;
    color: #fff;
}

.td-gallery-overlay p{
    font-family: "JetBrains Mono", monospace;
    font-size: 12px;
    margin: 4px 0 0;
    color: #fff;
}

/* =========================
HOVER EFFECT
========================= */

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

.td-gallery-card:hover::after{
    background: rgba(0,0,0,0.5);
}

.td-gallery-card:hover .td-gallery-overlay{
    opacity: 1;
    transform: translateY(0);
}

/* =========================
DESKTOP GRID POSITIONING
========================= */

.card-1{ grid-column: 1 / span 7; grid-row: 1; }
.card-2{ grid-column: 8 / span 5; grid-row: 1; }

.card-3{ grid-column: 1 / span 4; grid-row: 2; }
.card-4{ grid-column: 5 / span 4; grid-row: 2; }
.card-5{ grid-column: 9 / span 4; grid-row: 2; }

/* =========================================================
TABLET (KEEP SAME DESIGN, ONLY SCALE RESPONSIVE)
========================================================= */

@media (max-width: 1024px){

    .td-gallery-section{
        
        padding-top: 60px;
    }

    .td-gallery-grid{
        grid-template-columns: repeat(12, 1fr);
        grid-auto-rows: 240px; /* reduced height */
        gap: 16px;
    }

    /* keep SAME layout, just natural scaling */

    .card-1{ grid-column: 1 / span 7; }
    .card-2{ grid-column: 8 / span 5; }

    .card-3{ grid-column: 1 / span 4; }
    .card-4{ grid-column: 5 / span 4; }
    .card-5{ grid-column: 9 / span 4; }

    .td-gallery-overlay h3{
        font-size: 16px;
    }

    .td-gallery-overlay p{
        font-size: 11px;
    }
}

/* =========================
MOBILE (STACKED)
========================= */

@media (max-width: 767px){

    .td-gallery-section{
        width: calc(100% - 40px);
        padding-top: 40px;
    }

    .td-gallery-grid{
        grid-template-columns: 1fr;
        grid-auto-rows: 200px;
        gap: 15px;
    }

    .td-gallery-card{
        grid-column: auto !important;
        grid-row: auto !important;
    }
    
    .td-gallery-tag .td-dot{
    width: 4px;
    height: 4px;
}

    .td-gallery-overlay h3{
        font-size: 14px;
    }

    .td-gallery-overlay p{
        font-size: 10px;
    }
}

/* =========================
THEME FIX (IMPORTANT)
========================= */

html[data-theme="dark"] .td-gallery-tag{
    color: var(--td-text);
}

html[data-theme="dark"] .td-gallery-header h2{
    color: var(--td-text);
}

/*********************************** Home Page community Section End Here ********************************/

/* ***************************************** WHY CHOOSE US SECTION START ************************************** */

.td-why-section{
    padding-top:90px;
    background:var(--td-bg);
}

/* ======================================
HEADER
====================================== */

.td-why-header{
    text-align:center;
    margin-bottom:80px;
}

.td-why-label {
    display:block;
    margin-bottom:18px;
    font-family:"JetBrains Mono",sans-serif;
    font-size:12px;
    font-weight:500;
    letter-spacing:.08em;
    color:var(--td-text);
}

.td-why-header .td-dot{
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--td-accent);
}

.td-why-header h2{
    margin:0;
    font-family:"Tomorrow",sans-serif;
    font-size:48px;
    font-weight:600;
    line-height:58px;
    color:var(--td-text);
}

.td-why-header h2 span{
    color:var(--td-accent)
}

/* ======================================
GRID (DESKTOP)
====================================== */

.td-why-grid{
    display:grid;
    grid-template-columns:330px 1px 427px 1px 313px;
    justify-content:space-between;
    align-items:stretch;
    gap:30px;
}

.td-why-divider{
    background:rgba(0,0,0,.15);
}

html[data-theme="dark"] .td-why-divider{
    background:rgba(255,255,255,.12);
}

/* ======================================
LEFT
====================================== */

.td-why-left{
    height:430px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
}

.td-why-left h3{
    margin:0 0 18px;
    font-family:"Tomorrow",sans-serif;
    font-size:18px;
    font-weight:600;
    line-height:22px;
    color:var(--td-text);
}

.td-why-left p{
    margin:0;
    font-family:"Nunito",sans-serif;
    font-size:14px;
    line-height:19px;
    opacity:.85;
    color:var(--td-text);
}

.td-why-bottom{
    display:flex;
    flex-direction:column;
    gap:20px;
}

.td-why-btn-wrap{
    width:160px;
}

/* ======================================
MIDDLE
====================================== */

.td-why-middle{
    height:430px;
    padding:0 30px;
    display:flex;
    flex-direction:column;
}

.td-why-stat{
    width:313px;
}

.td-why-stat h3{
    margin:0 0 20px;
    font-family:"Tomorrow",sans-serif;
    font-size:32px;
    font-weight:600;
    line-height:38px;
    color:var(--td-text);
}

.td-why-stat p{
    margin:0;
    font-family:"Nunito",sans-serif;
    font-size:14px;
    line-height:19px;
    opacity:.85;
    color:var(--td-text);
}


/* ======================================
FLAGS WRAPPER (MASTER FIX)
====================================== */

.td-flags-desktop{
    position:relative;
    width:100%;
    height:110px; /* FIXED HEIGHT prevents extra row bleeding */
    margin-top:auto;
    overflow:hidden;
}

/* REMOVE ANY POSSIBLE DUPLICATES */
.td-flags-marquee{
    display:none !important;
}

/* ======================================
ROWS (STRICT CLIPPING SYSTEM)
====================================== */

.td-flags-row{
    position:absolute;
    left:0;
    width:100%;
    overflow:hidden;
    height:50px; /* IMPORTANT: forces single line only */
}

/* ROW POSITIONS */
.td-flags-row-1{ top:10px; }
.td-flags-row-2{ top:55px; }

/* ======================================
TRACK (FORCED SINGLE LINE)
====================================== */

.td-flags-track{
    display:flex;
    flex-direction:row;
    align-items:center;
    flex-wrap:nowrap; /* 🔥 CRITICAL FIX */
    gap:18px;
    width:max-content;
    white-space:nowrap;
    will-change:transform;
}

/* animations */
.td-flags-row-1 .td-flags-track{
    animation:tdFlagsLeft 25s linear infinite;
}

.td-flags-row-2 .td-flags-track{
    animation:tdFlagsRight 25s linear infinite;
}

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

.td-flag-pill{
    flex:0 0 auto;
    display:flex;
    align-items:center;
    gap:12px;

    height:42px;
    padding:6px 12px;
    border-radius:30px;
    background:#999;
}

html[data-theme="dark"] .td-flag-pill{
    background:#3d3d3d;
}

.td-flag-pill img{
    width:28px;
    height:28px;
    border-radius:50%;
    object-fit:cover;
}

.td-flag-pill span{
    font-size:15px;
    font-weight:500;
    color:#fff;
}

/* ======================================
ANIMATION (SAFE LOOP)
====================================== */

@keyframes tdFlagsLeft{
    from{ transform:translateX(0); }
    to{ transform:translateX(-50%); }
}

@keyframes tdFlagsRight{
    from{ transform:translateX(-50%); }
    to{ transform:translateX(0); }
}

/* ======================================
RIGHT COLUMN
====================================== */

.td-why-right{
    height:430px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
}

.td-why-right h3{
    margin:0 0 20px;
    font-family:"Tomorrow",sans-serif;
    font-size:32px;
    font-weight:600;
    line-height:38px;
    color:var(--td-text);
}

.td-why-right p{
    margin:0;
    font-family:"Nunito",sans-serif;
    font-size:14px;
    line-height:19px;
    opacity:.85;
    color:var(--td-text);
}

/* ======================================
PROGRESS BARS 
====================================== */

.td-progress-wrap{
    display:flex;
    flex-direction:column;
    gap:12px;
}

/* label */
.td-progress-item span{
    display:block;
    margin-bottom:6px;
    font-family:"Nunito",sans-serif;
    font-size:10px;
    letter-spacing:.4px;
    color:var(--td-text);
}

/* bar container */
.td-progress-bar{
    position:relative;
    height:22px;
    border-radius:30px;
    overflow:hidden;
    border:1px solid rgba(0,0,0,.35);
}

/* dark mode */
html[data-theme="dark"] .td-progress-bar{
    border-color:rgba(255,255,255,.18);
}

/* red accent variant */
.td-progress-bar.red{
    border-color:rgba(255,0,0,.65);
}

/* fill base */
.td-progress-fill{
    position:absolute;
    left:0;
    height:20px;
    width:0;
    border-radius:0 20px 20px 0;
    will-change:width;
}

/* animation trigger class (JS adds this) */
.td-progress-fill.td-animate{
    animation:tdProgressFill 1.8s cubic-bezier(.22,1,.36,1) forwards;
}

/* delay control (ONLY when animated) */
.td-progress-fill.fill-2.td-animate{
    animation-delay:.2s;
}

.td-progress-fill.fill-3.td-animate{
    animation-delay:.4s;
}

/* gradients */
.fill-1{
    --target-width:216px;
    background:linear-gradient(
        90deg,
        rgba(255,255,255,0) 0%,
        rgba(89,0,0,.08) 41%,
        rgba(255,116,116,.27) 70%,
        #FF3E3E 100%
    );
}

.fill-2{
    --target-width:98px;
    background:linear-gradient(
        90deg,
        rgba(255,255,255,0) 0%,
        rgba(247,247,247,.08) 41%,
        rgba(227,227,227,.27) 70%,
        #999 100%
    );
}

.fill-3{
    --target-width:135px;
    background:linear-gradient(
        90deg,
        rgba(255,255,255,0) 0%,
        rgba(247,247,247,.08) 41%,
        rgba(227,227,227,.27) 70%,
        #999 100%
    );
}

/* animation */
@keyframes tdProgressFill{
    from{ width:0; }
    to{ width:var(--target-width); }
}

/* ======================================
TABLET FIX (3 COLUMNS LIKE DESKTOP)
====================================== */

@media (max-width:1200px){

    .td-why-section{
        padding-top:60px;
    }

    /* KEEP 3 COLUMNS BUT SCALE DOWN */
    .td-why-grid{
        display:grid;
        grid-template-columns: 0.8fr 1fr 1fr;
        gap:20px;
        align-items:start;
    }

    /* REMOVE DIVIDERS */
    .td-why-divider{
        display:none;
    }

    /* RESET HEIGHT ISSUES */
    .td-why-left,
    .td-why-middle,
    .td-why-right{
        height:auto;
        padding:0;
    }

    /* LEFT */
    .td-why-left{
        justify-content:flex-start;
        gap:20px;
    }

    /* MIDDLE */
    .td-why-middle{
        padding:0;
        justify-content:flex-start;
    }

    .td-why-stat{
        width:100%;
    }

    /* RIGHT */
    .td-why-right{
        justify-content:flex-start;
        gap:20px;
    }

    /* ======================================
    FLAGS FIX (IMPORTANT)
    ====================================== */

    .td-flags-desktop{
        position:relative;
        width:100%;
        height:120px;
        margin-top:20px;
        overflow:hidden;
    }

    .td-flags-row{
        position:absolute;
        left:0;
        width:100%;
        overflow:hidden;
    }

    .td-flags-row-1{
        top:10px;
    }

    .td-flags-row-2{
        top:55px;
    }

    /* FORCE HORIZONTAL LAYOUT */
    .td-flags-track{
        display:flex;
        flex-direction:row;
        align-items:center;
        gap:14px;
        width:max-content;
        white-space:nowrap;
    }

    /* FIX ANIMATION (IMPORTANT - PREVENT BREAK) */
    .td-flags-row-1 .td-flags-track{
        animation: tdFlagsLeft 22s linear infinite;
    }

    .td-flags-row-2 .td-flags-track{
        animation: tdFlagsRight 22s linear infinite;
    }

    /* FLAG SIZE */
    .td-flag-pill{
        flex:0 0 auto;
        height:40px;
        padding:6px 10px;
        border-radius:30px;
    }

    .td-flag-pill img{
        width:26px;
        height:26px;
    }

    .td-flag-pill span{
        font-size:14px;
    }

    /* ANIMATION FIX */
    @keyframes tdFlagsLeft{
        from{ transform:translateX(0); }
        to{ transform:translateX(-50%); }
    }

    @keyframes tdFlagsRight{
        from{ transform:translateX(-50%); }
        to{ transform:translateX(0); }
    }
}

/* ======================================
MOBILE (compact but full flags)
====================================== */

@media (max-width:767px){

    .td-why-grid{
        grid-template-columns:1fr;
        gap:50px;
    }

    .td-why-divider{
        display:none;
    }

    .td-flags-desktop{
        height:150px;
    }
}
    .td-why-section{
        padding-top:40px ;
    }

    .td-why-header{
        margin-bottom:50px;
    }

    .td-why-header h2{
        font-size:32px;
        line-height:42px;
    }

    .td-why-left h3,
    .td-why-stat h3,
    .td-why-right h3{
        font-size:26px;
        line-height:32px;
    }

    /* flags stacked tighter */
    .td-flags-desktop{
        height:160px;
    }

    .td-flags-row-1{ top:10px; }
    .td-flags-row-2{ top:70px; }

    .td-flag-pill{
        height:38px;
        padding:5px 10px;
    }

    .td-flag-pill span{
        font-size:14px;
    }

/* ***************************************** WHY CHOOSE US SECTION END ************************************** */

/* *****************************************  HOME PAGE OUR WORK SECTION Start Here ***************************************** */

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

.td-container{
    width:1200px;
    margin:0 auto;
}

/* **************** SECTION TITLE ************************ */

.td-work-title{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;
    margin-bottom:40px;
}

/* .td-work-title .td-line{
    flex:1;
    height:1px;
    background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(5, 5, 5, 0.7) 100%
    );
    
}

html[data-theme="dark"] .td-work-title .td-line{

    background: linear-gradient(
    270deg,
    rgba(255, 255, 255, 0.7) 100%
    rgba(255, 255, 255, 0) 0%,
);

} */

.td-work-label{
    font-family:"JetBrains Mono",sans-serif;
    font-size:12px;
    font-weight:500;
    letter-spacing:.08em;
    color:var(--td-text);
    white-space:nowrap;
}

/* **************** GRID **************** */

.td-work-grid{
    display:grid;
    grid-template-columns:repeat(3,386.66px);
    gap:20px;
    justify-content:space-between;
}

/* *************** CARD ************ */

.td-work-card{
    position:relative;
    width:386.66px;
    height:189.81px;
    overflow:hidden;
    border-radius:8px;
    background:
    radial-gradient(
        100.09% 100.09% at 0% 100.1%,
        rgba(255,0,0,.2) 0%,
        rgba(255,0,0,0) 90%
    );

    transition:all .35s ease;
}

html[data-theme="dark"] .td-work-card{

    background:
    radial-gradient(
        100.09% 100.09% at 0% 100.1%,
        rgba(255,255,255,.15) 0%,
        rgba(0,0,0,0) 90%
    );

}

.td-work-card::after{
    content:"";
    position:absolute;
    inset:0;
    border:1px solid rgba(34,34,34,.40);
    border-radius:8px;
    pointer-events:none;
    transition:all .35s ease;
}

html[data-theme="dark"] .td-work-card::after{

    border:1px solid rgba(34,34,34,1);

}

.td-work-card:hover{
    transform:translateY(-4px);
}

.td-work-card:hover::after{
    border-color:var(--td-accent);
}

/* ************************** CARD INNER ************************* */

.td-work-card-inner{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:21px;
    width:326px;
    margin-left:30px;
    margin-top:35px;
    position:relative;
    z-index:2;
}

/* ************ ICON ************* */

.td-work-icon{
    width:22px;
    height:22px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.td-work-icon img{
    width:22px;
    height:22px;
    display:block;
    object-fit:contain;
}

.td-work-icon .dark{

    display:none;

}

html[data-theme="dark"] .td-work-icon .light{

    display:none;

}

html[data-theme="dark"] .td-work-icon .dark{

    display:block;

}

/* ********************** CONTENT ******************* */

.td-work-content{

    display:flex;
    flex-direction:column;
    gap:10px;
    width:326px;

}

.td-work-content h3{

    margin:0;
    font-family:"Tomorrow",sans-serif;
    font-weight:500;
    font-size:18px;
    line-height:28px;
    letter-spacing:-0.46px;
    color:var(--td-text);

}

.td-work-content p{

    margin:0;
    font-family:"Nunito",sans-serif;
    font-weight:500;
    font-size:14px;
    line-height:22px;
    letter-spacing:-0.32px;
    color:var(--td-text);
    opacity:.88;

}

/* ************* LAPTOP (1200px - 1024px) **************** */

@media (max-width:1200px){

    .td-container{
        width:95%;
        max-width:1200px;
    }

    .td-work-grid{
        grid-template-columns:repeat(3,1fr);
        gap:20px;
    }

    .td-work-card{
        width:100%;
        height:190px;
    }

    .td-work-card-inner{
        width:calc(100% - 60px);
    }

    .td-work-content{
        width:100%;
    }

}

@media (max-width:1024px){

    .td-work-grid{
        grid-template-columns:repeat(2,1fr);
        gap:20px;
    }

    .td-work-card{
        width:100%;
    }

}

@media (max-width:767px){

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

    .td-container{
        width:100%;
        padding:0 16px;
    }

    .td-work-title{
        margin-bottom:30px;
    }

    .td-work-title .td-line{
        flex:1;
    }

    .td-work-grid{
        grid-template-columns:1fr;
        gap:16px;
    }

    .td-work-card{
        width:100%;
        height:auto;
        min-height:190px;
    }

    .td-work-card-inner{
        width:calc(100% - 60px);
    }

    .td-work-content{
        width:100%;
    }
}

@media (max-width:480px){

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

    .td-container{
        padding:0 16px;
    }

    .td-work-title{
        gap:10px;
        margin-bottom:24px;
    }

    .td-work-card{
        min-height:175px;
    }

    .td-work-card-inner{
        margin-left:22px;
        margin-top:24px;
        width:calc(100% - 44px);
    }

    .td-work-icon{
        width:20px;
        height:20px;
    }

    .td-work-icon img{
        width:20px;
        height:20px;
    }

    .td-work-content h3{
        font-size:17px;
        line-height:26px;
    }

    .td-work-content p{
        font-size:14px;
        line-height:22px;
    }
}

/* *****************************************  HOME PAGE OUR WORK SECTION End Here ***************************************** */

/********************************** CASE STUDIES / HOW IT WORKS SECTION ***********************************/

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

/* =========================
HEADER
========================= */

.td-how-header{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:20px;
    margin-bottom:40px;
}

.td-how-header h2{
    margin:0;
    font-family:"Tomorrow", sans-serif;
    font-size:32px;
    line-height:38px;
    text-align:center;
    color:var(--td-text);
}

.td-how-header h2 span{
    color:var(--td-accent);
}

/* =========================
MAIN LAYOUT
========================= */

.td-how-wrapper{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:54px;
    overflow:visible;
    position:relative;
}

/* =========================
LEFT SIDE
========================= */

.td-how-steps{
    flex:0 0 400px;
    max-width:400px;
    position:relative;
    z-index:2;
}

/* Step */

.td-how-step{
    display:flex;
    align-items:flex-start;
    gap:20px;
}

.td-how-step-content{
    display:flex;
    gap:20px;
}

.td-how-text{
    flex:1;
    padding-top:6px;
}

/* =========================
ICON
========================= */

.td-how-icon{
    width:64px;
    height:64px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    border-radius:6px;
}

.td-how-step:nth-child(1) .td-how-icon{
    background:#fff;
    box-shadow:0 0 32px rgba(255,0,0,.25);
}

.td-how-step:nth-child(3) .td-how-icon,
.td-how-step:nth-child(5) .td-how-icon{
    background:#0F1112;
    box-shadow:0 0 35px rgba(255,255,255,.25);
}

.td-how-icon img{
    width:30px;
    height:30px;
    object-fit:contain;
}

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

.td-how-text h4{
    margin:0 0 10px;
    font-family:"Nunito", sans-serif;
    font-size:14px;
    font-weight:700;
    color:var(--td-text);
}

.td-how-text p{
    margin:0;
    font-family:"Nunito", sans-serif;
    font-size:12px;
    line-height:16px;
    color:var(--td-text);
}

/* =========================
TIMELINE
========================= */

.td-how-line{
    width:4px;
    height:148px;
    margin-left:30px;
    background:#41423C;
    border-radius:100px;
    overflow:hidden;
}

.td-how-line span{
    display:block;
    width:100%;
    height:0;
    background:#FF0000;
    transition:height .8s ease;
}

.td-how-line.active span{
    height:100%;
}

html[data-theme="dark"] .td-how-line{
    background:#41423C;
}

html[data-theme="dark"] .td-how-line span{
    background:#FFFFFF;
}

/* =========================
RIGHT IMAGE
========================= */

.td-how-image{
    flex:0 0 892px;
    width:892px;
    height:556px;
    margin-right:-170px;
    background:#171615;
    border-radius:15px;
    padding:27px 0 27px 30px;
    overflow:hidden;
    position:relative;
    z-index:1;
}

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

/* =========================
STATS
========================= */

.td-how-stats{
    display:flex;
    gap:45px;
    margin-top:40px;
}

.td-how-stats div{
    flex:1;
}

.td-how-stats h3{
    margin:0;
    font-family:"Tomorrow", sans-serif;
    font-size:28px;
    color:#FF0000;
}

html[data-theme="dark"] .td-how-stats h3{
    color:#FFFFFF;
}

.td-how-stats p{
    margin:0;
    font-family:"Nunito", sans-serif;
    font-size:12px;
    line-height:16px;
    color:var(--td-text);
}

/***********************************
TABLET
***********************************/
@media (max-width:1024px){

    .td-how-section{
        width:min(755px, calc(100% - 40px));
        margin:60px auto 0;
    }

    .td-how-header{
        gap:20px;
        margin-bottom:30px;
    }

    .td-how-header h2{
        width:371px;
        font-size:28px;
        line-height:34px;
    }

    .td-how-wrapper{
        display:flex;
        flex-direction:column;
        align-items:center;
        gap:30px;
    }

    .td-how-image,
    .td-how-stats{
        display:none;
    }

    .td-how-steps{
        width:100%;
        max-width:657px;
        flex:none;
    }

    .td-how-step{
        flex-direction:column;
        align-items:center;
        text-align:center;
        gap:16px;
    }

    .td-how-step-content{
        flex-direction:column;
        align-items:center;
        gap:16px;
        width:100%;
    }

    .td-how-icon{
        width:64px;
        height:64px;
    }

    .td-how-icon img{
        width:30px;
        height:30px;
    }

    .td-how-line{
        width:4px;
        height:148px;
        margin:0 auto;
    }

    .td-how-text{
        padding:0;
    }

    .td-how-text h4{
        font-size:28px;
        line-height:38px;
    }

    .td-how-text p{
        max-width:657px;
        font-size:12px;
        line-height:16px;
    }
}

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

    .td-how-section{
        width:min(350px, calc(100% - 20px));
        margin:40px auto 0;
    }

    .td-how-header{
        gap:10px;
        margin-bottom:20px;
    }

    .td-how-header h2{
        width:256px;
        font-size:16px;
        line-height:19px;
    }

    .td-how-wrapper{
        display:flex;
        flex-direction:column;
        align-items:center;
        gap:20px;
    }

    .td-how-image,
    .td-how-stats{
        display:none;
    }

    .td-how-steps{
        width:100%;
        max-width:350px;
    }

    .td-how-step{
        flex-direction:column;
        align-items:center;
        text-align:center;
        gap:15px;
    }

    .td-how-step-content{
        flex-direction:column;
        align-items:center;
        gap:6px;
        width:100%;
    }

    .td-how-icon{
        width:35px;
        height:35px;
        border-radius:4px;
    }

    .td-how-icon img{
        width:16px;
        height:16px;
    }

    .td-how-line{
        width:4px;
        height:100px;
        margin:0 auto;
    }

    .td-how-text{
        padding:0;
    }

    .td-how-text h4{
        font-size:14px;
        line-height:19px;
    }

    .td-how-text p{
        max-width:350px;
        font-size:8px;
        line-height:11px;
    }
}

/********************************** CASE STUDIES / HOW IT WORKS SECTION END **********************************/

/* ************************************ Home Page Client Carousel Section Start Here *********************** */

/* =========================================
   CLIENTS SECTION
========================================= */

.td-clients-section {
    width: 100%;
    padding: 80px 0;
    background: var(--td-bg);
    overflow: hidden;
}

.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 0.3s ease;
}

/* =========================================
   STATIC FIGMA BORDER SYSTEM
   (SAFE FOR INFINITE LOOP)
========================================= */

/* LEFT + BOTTOM */
.td-client-card:nth-child(4n+1),
.td-client-card:nth-child(4n+3) {
    border-left: 1px solid rgba(255,255,255,0.10);
    border-bottom: 1px solid rgba(255,255,255,0.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,0.10);
    border-left: 1px solid rgba(255,255,255,0.10);
}

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

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

html[data-theme="dark"] .td-client-card {
    background: transparent;
}

/* border colors per theme */
html[data-theme="light"] .td-client-card {
    border-color: rgba(34,34,34,0.12);
}

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

/* =========================================
   ACTIVE STATE (FIXED + CONSISTENT)
========================================= */

.td-client-card {
    z-index: 1;
}

.td-client-card.active {
    z-index: 5;
}

/* IMPORTANT:
   Instead of breaking nth-child borders,
   we ONLY recolor existing borders */
.td-client-card.active {
    border-color: var(--td-accent);
}

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

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

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

/* =========================================
   RESPONSIVE
========================================= */

@media (max-width:1024px){
    .td-client-card{
        flex:0 0 250px;
        width:250px;
        height:110px;
    }
}



@media (max-width:767px){
    .td-clients-section{
        padding:50px 0;
    }
    .td-client-card img {
    max-width: 100px;
    max-height: 31px;
    object-fit: contain;
    transition: transform 0.3s ease;
}


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

/* *************************************Home Page Client Carousel Section End Here ************************** */

/* *************************************** Home Page Testimonial Section Start Here ************************** */

.td-testimonial-section{
    width:100%;
    max-width:1200px;
    margin:auto;
    padding:40px 50px;
    border-radius:30px;
    position:relative;
    box-sizing:border-box;
    background: rgba(255,0,0,0.06);
  
}

/* DARK MODE SECTION BG */
html[data-theme="dark"] .td-testimonial-section{
  background: rgba(23, 22, 21, 1);
}

/* =========================
   INNER LAYOUT
========================= */

.td-testimonial-inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:130px;
}

/* =========================
   LEFT SIDE
========================= */

.td-testimonial-left{
  width:400px;
}

.td-tag{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  font-family: "JetBrains Mono";
  color: var(--td-text);
}

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

.td-testimonial-left h2{
  font-size:32px;
  font-family:"Tomorrow";
  margin-top:10px;
  color: var(--td-text);
}

.td-testimonial-left h2 span{
  color:#ff0000;
}

.td-testimonial-left p{
  margin-top:15px;
  font-size:14px;
  line-height:22px;
  font-family:"Nunito";
  color: var(--td-muted);
}

/* =========================
   RIGHT SIDE
========================= */

.td-testimonial-right{
  width:510px;
  position:relative;
}

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

.td-testimonial-card{
  display:none;
  position:relative;
  padding:40px 30px;
  border-radius:24px;
  min-height:220px;
  transition:0.4s ease;
}

/* ACTIVE CARD */
.td-testimonial-card.active{
  display:block;
}

/* LIGHT MODE CARD */
.td-testimonial-card{
  background: radial-gradient(
    100% 100% at 100% 100%,
    rgba(255, 0, 0, .2) 0%,
    rgba(255, 0, 0, 0) 100%
  );

  border:2px solid rgba(255,0,0,0.3);
}

/* DARK MODE CARD */
html[data-theme="dark"] .td-testimonial-card{
  background: radial-gradient(
    100% 100% at 100% 100%,
    rgba(255, 255, 255, 0.2) 0%,
    rgba(0, 0, 0, 0) 100%
  );

  border:2px solid rgba(255,255,255,0.21);
}

/* =========================
   QUOTE ICON
========================= */

.td-quote{
  position:absolute;
  top:20px;
  right:20px;
  width:87px;
  height:auto;
}

/* =========================
   HEADER
========================= */

.td-card-header{
  display:flex;
  align-items:center;
  gap:12px;
}

.td-card-header img{
  width:48px;
  height:48px;
  border-radius:50%;
  object-fit:cover;
}

.td-card-header h4{
  font-family:"Tomorrow";
  font-size:18px;
  margin:0;
  color: var(--td-text);
}

.td-card-header span{
  font-family:"Nunito";
  font-size:14px;
  color: var(--td-muted);
}

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

.td-text{
  margin-top:18px;
  font-size:14px;
  line-height:20px;
  font-family:"Nunito";
  color: var(--td-text);
}

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

.td-testimonial-tabs{
  margin-top:30px;
  display:flex;
  justify-content:space-between;
  gap:20px;
}

/* TAB */
.td-tab{
  flex:1;
  display:flex;
  align-items:center;
  gap:12px;
  cursor:pointer;
  opacity:0.5;
  transition:0.3s;
  padding:10px 5px;
  border-bottom:2px solid transparent;
}

/* ACTIVE TAB */
.td-tab.active{
  opacity:1;
  border-bottom:2px solid #ff0000;
}

/* TAB IMAGE */
.td-tab img{
  width:48px;
  height:48px;
  border-radius:50%;
  object-fit:cover;
}

/* TAB TEXT */
.td-tab strong{
  display:block;
  font-family:"Tomorrow";
  font-size:14px;
  color: var(--td-text);
}

.td-tab small{
  font-family:"Nunito";
  font-size:12px;
  color: var(--td-muted);
}


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

@media (max-width:1024px){

    *,
    *::before,
    *::after{
        box-sizing:border-box;
    }

    .td-testimonial-section{
          width:calc(100% - 40px);
        
        margin:0 auto;
        padding:30px 20px;
        border-radius:30px;
        overflow:hidden;
    }

    .td-testimonial-inner{
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:20px;
        width:100%;
    }

    /* LEFT */

    .td-testimonial-left{
        flex:1;
        width:auto;
        min-width:0;
    }

    /* RIGHT */

    .td-testimonial-right{
        flex:1;
        width:auto;
        max-width:none;
        min-width:0;
    }

    /* CARD */

    .td-testimonial-card{
        width:100%;
        min-height:273px;
        padding:30px 24px;
    }

    /* HEADER */

    .td-card-header img{
        width:42px;
        height:42px;
    }

    .td-card-header h4{
        font-size:16px;
    }

    .td-card-header span{
        font-size:13px;
    }

    /* TEXT */

    .td-text{
        font-size:12px;
        line-height:18px;
    }

    /* QUOTE */

    .td-quote{
        width:77px;
        top:18px;
        right:18px;
    }

    /* TABS */

    .td-testimonial-tabs{
        width:100%;
        display:flex;
        justify-content:space-between;
        gap:8px;
        flex-wrap:nowrap;
        overflow:hidden;
        margin-top:30px;
    }

    .td-tab{
        flex:1;
        min-width:0;
        padding:12px 0;
        gap:10px;
    }

    .td-tab img{
        width:42px;
        height:42px;
        flex-shrink:0;
    }

    .td-tab strong{
        font-size:14px;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
    }

    .td-tab small{
        font-size:12px;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
    }

}



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

@media (max-width:767px){

    /* SECTION */

    .td-testimonial-section{
         width: calc(100% - 20px);
        padding:20px 10px;
        border-radius:30px;
        box-sizing:border-box;
        overflow:hidden;
    }

    /* INNER */

    .td-testimonial-inner{
        display:flex;
        flex-direction:column;
        align-items:center;
        gap:15px;
        width:100%;
    }

    /* LEFT */

    .td-testimonial-left{
        width:100%;
        text-align:center;
    }

    .td-tag{
        justify-content:center;
        gap:5px;
        font-size:8px;
    }

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

    .td-testimonial-left h2{
        margin-top:10px;
        font-size:16px;
        line-height:19px;
    }

    .td-testimonial-left p{
        margin-top:10px;
        font-size:10px;
        line-height:14px;
        max-width:300px;
        margin-left:auto;
        margin-right:auto;
    }

    /* RIGHT */

    .td-testimonial-right{
        width:100%;
        max-width:330px;
    }

    /* CARD */

    .td-testimonial-card{
        width:100%;
        min-height:190px;
        padding:20px;
        border-radius:21px;
        box-sizing:border-box;
    }

    /* HEADER */

    .td-card-header{
        align-items:center;
       
    }

    .td-card-header img{
        width:21px;
        height:21px;
    }

    .td-card-header h4{
        font-size:10px;
        line-height:12px;
    }

    .td-card-header span{
        font-size:8px;
        line-height:11px;
    }

    /* QUOTE */

    .td-quote{
        width:41px;
        top:18px;
        right:18px;
    }

    /* TEXT */

    .td-text{
        margin-top:18px;
        font-size:10px;
        line-height:14px;
    }

    /* =====================================
       MOBILE AVATAR NAVIGATION
    ===================================== */

    .td-testimonial-tabs{

        width:90px;
        margin:15px auto 0;

        display:flex;
        justify-content:center;
        align-items:center;
        gap:0;

        position:relative;
    }

    .td-tab{

        flex:none;
        width:30px;
        height:30px;

        padding:0;
        border:none;

        opacity:1;

        margin-left:-10px;

        border-radius:50%;

        overflow:hidden;

        background:none;
    }

    .td-tab:first-child{
        margin-left:0;
    }

    .td-tab.active{

        border:none;

        transform:scale(1.05);

        z-index:5;
    }

    .td-tab img{

        width:30px;
        height:30px;

        border-radius:50%;

        object-fit:cover;

        display:block;
    }

    /* Hide names on mobile */

    .td-tab strong,
    .td-tab small{
        display:none;
    }

}

/* *************************************** Home Page Testimonial Section End Here ************************** */

/***********************************
CEO MESSAGE SECTION START
***********************************/

.td-ceo-section{
    width:min(1200px, calc(100% - 40px));
    margin:0 auto;
    padding-top:90px;

    display:flex;
    align-items:center;
    gap:58px;
}

.td-ceo-image{
    flex-shrink:0;
}

.td-ceo-image img{
    width:505px;
    height:428px;

    object-fit:cover;
    display:block;

    border-radius:30px;

    filter:drop-shadow(
        0 0 35px rgba(255,255,255,.25)
    );
}

.td-ceo-content{
    width:632px;

    display:flex;
    flex-direction:column;
    gap:26px;
}

.td-ceo-text{
    display:flex;
    flex-direction:column;
    gap:26px;
}

.td-ceo-text h2{
    margin:0;

    font-family:"Tomorrow", sans-serif;
    font-size:32px;
    font-weight:700;
    line-height:38px;
    letter-spacing:.2px;

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

.td-ceo-text h2 span{
    color:var(--td-accent);
}

/* ====================================
   CEO SCROLL REVEAL
==================================== */

.td-ceo-reveal {
    margin: 0;

    font-family: "Nunito", sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 22px;
    letter-spacing: .4px;

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

/* Individual words */

.td-ceo-reveal .word {
    color: var(--td-muted);
    transition: color .25s ease;
}

/* Revealed words */

.td-ceo-reveal .word.active {
    color: var(--td-text);
}


/***********************************
TABLET
***********************************/

@media (max-width:1024px){

    .td-ceo-section{
        width:min(984px, calc(100% - 40px));

        gap:37px;
        padding-top:60px;
    }

    .td-ceo-image img{
        width:100%;
        max-width:407px;
        height:auto;

        aspect-ratio:407 / 345;

        border-radius:24px;
    }

    .td-ceo-content{
        width:540px;
        gap:40px;
    }

    .td-ceo-text{
        gap:23px;
    }

    .td-ceo-text h2{
        font-size:28px;
        line-height:34px;
    }

    .td-ceo-reveal{
        font-size:12px;
        line-height:16px;
    }
}

/***********************************
MOBILE
***********************************/

@media (max-width:767px){

    .td-ceo-section{
        width:min(350px, calc(100% - 40px));

        flex-direction:column-reverse;
        align-items:center;

        gap:20px;
        padding-top:40px;
    }

    .td-ceo-content{
        width:292px;

        align-items:center;
        gap:20px;
    }

    .td-ceo-text{
        gap:20px;
        text-align:center;
    }

    .td-ceo-text h2{
        width:100%;
        font-size:16px;
        line-height:19px;
    }

    .td-ceo-reveal{
        font-size:10px;
        line-height:14px;
    }

    .td-ceo-signature img{
        width:128px;
        height:auto;
    }

    .td-ceo-image{
        width:100%;
    }

    .td-ceo-image img{
        width:100%;
        max-width:350px;
        height:auto;

        aspect-ratio:350 / 291;

        border-radius:24px;
    }
}

/*********************************** CEO MESSAGE SECTION END ***********************************/

/*********************************** FAQ SECTION START ***********************************/

.td-faq-section{
    width:min(900px, calc(100% - 40px));
    margin:0 auto;
    padding:100px 0;
}

/***********************************
HEADER
***********************************/

.td-faq-header{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:20px;
    margin-bottom:50px;
}



.td-section-tag{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:9px;
}



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



.td-section-tag p{
    margin:0;
    font-family:"JetBrains Mono";
    font-size:12px;
    color:var(--td-text);
}



.td-faq-header h2{
    margin:0;
    max-width:531px;
    text-align:center;
    font-family:"Tomorrow",sans-serif;
    font-size:32px;
    line-height:38px;
    font-weight:700;
    letter-spacing:.2px;
    color:var(--td-text);
}

.td-faq-header h2 span{
    color:var(--td-accent);
}

/***********************************
FAQ LIST
***********************************/

.td-faq-wrapper{
    display:flex;
    flex-direction:column;
    gap:20px;
}

.td-faq-item{
    background:rgba(255,0,0,.15);
    border-radius:16px;
    overflow:hidden;
}

/***********************************
QUESTION
***********************************/

.td-faq-question{
    width:100%;
    height:74px;
    padding:0 20px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    border:0;
    outline:none;
    background:transparent;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
}

.td-faq-question span{
    font-family:"Tomorrow",sans-serif;
    font-size:18px;
    line-height:25px;
    letter-spacing:-.36px;
    text-align:left;
    color:var(--td-text);
}

.td-faq-question i{
    font-style:normal;
    font-size:22px;
    color:var(--td-text);
    transition:.3s ease;
}

.td-faq-question:hover,
.td-faq-question:focus,
.td-faq-question:active{
    background:transparent;
    outline:none;
    box-shadow:none;
}
/***********************************
ANSWER
***********************************/
.td-faq-answer{
    max-height:0;
    overflow:hidden;
    transition:.4s ease;
}

.td-faq-answer p{
    margin:0;
    padding:0 20px 20px;
    font-family:"Nunito",sans-serif;
    font-size:14px;
    line-height:20px;
    color:var(--td-muted);
}

.td-faq-item.active 
.td-faq-answer{
    max-height:150px;
}

.td-faq-question i{
    font-style:normal;
    font-size:22px;
    color:var(--td-text);
    transition:.3s ease;
    display:flex;
    align-items:center;
    justify-content:center;
    width:22px;
    height:22px;
}

.td-faq-item.active .td-faq-question i{
    transform:none;
}

.td-faq-item.active .td-faq-question i::before{
    content:"−";
}

.td-faq-question i::before{
    content:"+";
}

/***********************************
DARK THEME
***********************************/

[data-theme="dark"] .td-faq-item{
    background:rgba(23,22,21,1);
}

[data-theme="dark"] .td-section-tag p{
    color:#ffffff;
}



[data-theme="dark"] .td-faq-question span,
[data-theme="dark"] .td-faq-question i{
    color:#ffffff;
}

/***********************************
TABLET
***********************************/
@media(max-width:1024px){

    .td-faq-section{
        width:min(900px, calc(100% - 40px));
        padding:80px 0;
    }

    .td-faq-header h2{
        font-size:28px;
        line-height:34px;
    }
}

/***********************************
MOBILE
***********************************/

@media(max-width:767px){
    .td-faq-section{
        width:min(350px, calc(100% - 40px));
        padding:60px 0;
    }

    .td-faq-header{
        gap:10px;
        margin-bottom:20px;
    }

    .td-section-tag span{
        width:4px;
        height:4px;
    }

    .td-section-tag p{
        font-size:8px;
    }

    .td-faq-header h2{
        width:233px;
        font-size:16px;
        line-height:19px;
    }

    .td-faq-wrapper{
        gap:10px;
    }

    .td-faq-question{
        height:74px;
    }

    .td-faq-question span{
        font-family:"Nunito",sans-serif;
        font-size:12px;
        line-height:16px;
        letter-spacing:.2px;
    }

    .td-faq-question i{
        font-size:18px;
    }

    .td-faq-answer p{
        font-size:12px;
        line-height:16px;
    }
}

/*********************************** FAQ SECTION END ***********************************/