.wortal-hero-viewport {
    --text-gradient: linear-gradient(90deg, #FFFFFF -87.57%, #FF4000 100%);
    --wtl-scroll-distance: 0px;
    position: relative;
    width: 100%;
    background-color: #ffffff;
    /* NOTE: no overflow:hidden here — it would break position:sticky on .hero-pin-stage */
    height: calc(100vh + var(--wtl-scroll-distance));
    height: calc(100dvh + var(--wtl-scroll-distance));
    /* dvh tracks real mobile viewport (address bar show/hide) */
}

/* Sticky "pin" stage — stays fixed in the viewport while the parent's
   extra scroll-distance height is consumed, then releases naturally. */
.wortal-hero-viewport .hero-pin-stage {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100dvh;
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.wortal-hero-viewport .hero-section-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.wortal-hero-viewport .subtitle-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    z-index: 2;
    pointer-events: none;
    margin-bottom: 20px;
}

.wortal-hero-viewport .ai-i-wrap {
    position: relative;
    display: inline-block;
}

.wortal-hero-viewport .sparkle-icon {
    position: absolute;
    top: -0.62em;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.42em;
    line-height: 1;
    color: #1a1a1a;
    pointer-events: none;
}

.wortal-hero-viewport .subtitle-text {
    font-size: clamp(1.8rem, 7vw, 2.75rem);
    font-weight: 500;
    color: #333333;
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin: 0;
}

.wortal-hero-viewport .bold-text {
    font-weight: 800;
}

.wortal-hero-viewport .ticker-window {
    width: 100%;
    overflow: hidden;
    display: flex;
    white-space: nowrap;
    padding: 40px 0;
}

.wortal-hero-viewport .ticker-track {
    display: flex;
    gap: 4vw;
    padding-left: 50vw;
    will-change: transform;
    transform: translateX(0);
}

.wortal-hero-viewport .ticker-text-wrapper {
    position: relative;
    display: inline-block;
}

.wortal-hero-viewport .ticker-text {
    font-size: clamp(5rem, 12vw, 15rem);
    font-weight: 800;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    line-height: 1;
    display: block;
    background: var(--text-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.wortal-hero-viewport .text-noise {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    filter: url(#figma-monotone-noise);
    mix-blend-mode: multiply;
    opacity: 0.75;
}

@media (max-width: 768px) {
    .wortal-hero-viewport .ticker-track {
        gap: 6vw;
    }

    .wortal-hero-viewport .subtitle-wrapper {
        margin-bottom: 12px;
    }

    .wortal-hero-viewport .ticker-window {
        padding: 24px 0;
    }
}

@media (max-width: 480px) {
    .wortal-hero-viewport .sparkle-icon {
        top: -0.55em;
        font-size: 0.38em;
    }
}

/* Short / landscape mobile viewports: 100dvh can get too cramped for the content */
@media (max-height: 480px) and (orientation: landscape) {
    .wortal-hero-viewport .hero-pin-stage {
        height: auto;
        min-height: 100vh;
        min-height: 100dvh;
        padding: 24px 0;
    }
}

/* Respect reduced-motion: skip the scroll-driven translate, just show text centered-ish */
@media (prefers-reduced-motion: reduce) {
    .wortal-hero-viewport {
        height: auto;
    }

    .wortal-hero-viewport .hero-pin-stage {
        position: relative;
        height: auto;
        min-height: 100vh;
    }
}


.about-question {
    margin-top: 100px;
    background-image: url(https://wortal.co/wp-content/uploads/2026/06/Frame-2055247144.svg);
    background-size: contain;
}

.about-question-inner {
    padding: 50px;
    text-align: center;
    gap: 10px;
    height: 100%;
    margin: 0 auto;
    max-width: min(100%, 1140px);
    padding-inline-end: 0;
    padding-inline-start: 0;
    width: 100%;
}

.about-question-inner h2 {
    font-family: "Plus Jakarta Sans", Sans-serif;
    font-size: 42px;
    font-weight: 700;
    line-height: 100%;
    letter-spacing: 0%;
    color: #FF4000;
}

.about-question-inner p {
    text-align: start;
    font-family: "Plus Jakarta Sans", Sans-serif;
    font-size: 32px;
    font-weight: 500;
    line-height: 120%;
    letter-spacing: 0%;
    color: #535353;
}

@media (max-width: 768px) {
    .about-question {
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    .about-question {
        margin-top: 30px;

    }

    .about-question-inner {
        padding: 20px 20px 16px 16px;
    }

    .about-question-inner h2 {
        font-size: 26px;
        text-align: start;
    }

    .about-question-inner p {
        font-size: 16px;
    }

}

/* ==========================================================================
   WORTAL FOUNDER SECTION STYLES
   ========================================================================== */
.wortal-founder {
    padding: 80px 24px;
    background-color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
}

.wortal-founder-inner {
    max-width: 1140px;
    width: 100%;
    background-color: #1F1F1F;
    background-image: url(https://wortal.co/wp-content/uploads/2026/06/Frame-2055247146.svg);
    background-position: bottom center;
    background-repeat: no-repeat;
    padding: 60px;
    display: flex;
    gap: 50px;
    align-items: center;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
}

/* Left Column: Founder Photo */
.founder-photo-col {
    flex: 0 0 380px;
    max-width: 380px;
    width: 100%;
}

.founder-photo-frame {
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background-color: #2b2b2b;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    display: flex;
}

.founder-photo {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}

/* Right Column: Story Content */
.founder-content-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.founder-heading {
    font-family: "Plus Jakarta Sans", Sans-serif;
    font-size: clamp(28px, 4vw, 36px);
    font-weight: 700;
    line-height: 1.2;
    color: #ffffff;
    margin: 0 0 10px 0;
}

.founder-subheading {
    font-family: "Plus Jakarta Sans", Sans-serif;
    font-size: clamp(20px, 3vw, 24px);
    font-weight: 700;
    line-height: 1.3;
    color: #ffffff;
    margin: 20px 0 10px 0;
}

.founder-text {
    font-family: "Plus Jakarta Sans", Sans-serif;
    font-size: clamp(14px, 1.6vw, 16px);
    font-weight: 400;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
}

.founder-text strong {
    font-weight: 700;
    color: #ffffff;
}

.founder-designation {
    font-family: "Plus Jakarta Sans", Sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
    margin: 20px 0 0 0;
}

/* Responsive Adjustments */
@media (max-width: 991px) {
    .wortal-founder-inner {
        flex-direction: column;
        gap: 40px;
        padding: 40px 24px;
    }

    .founder-photo-col {
        flex: 0 0 auto;
        max-width: 320px;
    }

    .founder-content-col {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .wortal-founder {
        padding: 50px 16px;
    }

    .wortal-founder-inner {
        padding: 30px 20px;
        border-radius: 16px;
    }

    .founder-heading {
        margin-bottom: 5px;
    }

    .founder-subheading {
        margin-top: 10px;
        margin-bottom: 5px;
    }

    .founder-designation {
        margin-top: 10px;
    }
}




/* Wrapper Container */
.el-feat-section {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0px 20px;
    box-sizing: border-box;
}

/* Individual Row */
.el-feat-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 30px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    /* Subtle separator for structure, remove if not desired */
    opacity: 0;
    transform: translateY(20px);
    animation: elFeatFadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Clear last row border */
.el-feat-row:last-child {
    border-bottom: none;
}

/* Staggered Animation delays for smooth entrance */
.el-feat-row:nth-child(1) {
    animation-delay: 0.1s;
}

.el-feat-row:nth-child(2) {
    animation-delay: 0.25s;
}

.el-feat-row:nth-child(3) {
    animation-delay: 0.4s;
}

/* Left Column - Title Typography */
.el-feat-title {
    width: 38%;
    margin: 0;
    font-family: 'Plus Jakarta Sans';
    font-weight: 700;
    font-style: normal;
    font-size: 32px;
    line-height: 110%;
    letter-spacing: -0.02em;
    /* Gives clean, professional display tracking */
    color: #333333;
    transition: color 0.3s ease;
}

/* Right Column - Description Typography */
.el-feat-desc {
    width: 54%;
    margin: 0;
    font-family: 'Plus Jakarta Sans';
    font-weight: 500;
    font-style: normal;
    font-size: 22px;
    line-height: 140%;
    /* 100% in design overlays characters natively in HTML; 140% matches web-ready paragraph presentation perfectly */
    letter-spacing: -0.01em;
    color: #535353;
}

/* Hover Interaction: Subtle elevation effect */
.el-feat-row:hover .el-feat-title {
    color: #000000;
}

/* Smooth Entrance Keyframe Animation */
@keyframes elFeatFadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* RESPONSIVE DESIGN (MOBILE & TABLET BREAKPOINTS) */

/* Tablet Optimization */
@media (max-width: 991px) {
    .el-feat-title {
        font-size: 30px;
        width: 42%;
    }

    .el-feat-desc {
        font-size: 20px;
        width: 52%;
    }
}

/* Mobile Breakpoint (Smooth Switch to Column Grid) */
@media (max-width: 767px) {
    .el-feat-section {
        padding: 40px 15px;
    }

    .el-feat-row {
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 14px;
        padding: 32px 0;
    }

    .el-feat-title,
    .el-feat-desc {
        width: 100%;
    }

    .el-feat-title {
        font-size: 26px;
    }

    .el-feat-desc {
        font-size: 18px;
        line-height: 145%;
    }
}








/* ============================================================
   BASE WRAPPER
   ============================================================ */
.figma-stat-section {
    --primary-orange: #FF4000;
    --bg-dark: #202020;
    --font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;

    /* --wtl-scale drives uniform shrink of the whole card (desktop -> tablet).
     Below the mobile breakpoint we stop using it and switch to a
     stacked layout with its own hand-tuned sizes instead — pure
     scaling stops being readable once text drops under ~10px. */
    --wtl-scale: 1;

    width: 100%;
    padding: 60px 20px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    box-sizing: border-box;
}

.figma-stat-section *,
.figma-stat-section *::before,
.figma-stat-section *::after {
    box-sizing: border-box;
}

.figma-card-container {
    width: 1120px;
    /* fixed design width — --wtl-scale is now the ONLY thing that resizes it */
    flex: none;
    height: 404px;
    background: var(--bg-dark);
    border-radius: 27px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    padding: 0 80px 45px 80px;
    box-shadow: -6px 6px 19px 0px #00000063,
        -23px 26px 35px 0px #00000057,
        -52px 58px 47px 0px #00000033,
        -145px 161px 61px 0px #00000003;

    transform: scale(var(--wtl-scale));
    transform-origin: top center;
    /* transform doesn't reflow layout, so without this the section would
     keep reserving the full 404px of vertical space even when the card
     visually shrinks. This pulls the empty space back in. */
    margin-bottom: calc(404px * (var(--wtl-scale) - 1));
}

.figma-card-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100px;
    opacity: 0.18;
    background: repeating-linear-gradient(90deg, #ffffff, #ffffff 1px, transparent 1px, transparent 7px);
    mask-image: linear-gradient(180deg, black, transparent);
    -webkit-mask-image: linear-gradient(180deg, black, transparent);
    pointer-events: none;
    z-index: 10;
}

/* --- LEFT COLUMN NUMBERS LAYOUT --- */
.figma-left-col {
    flex: 0 0 50%;
    width: 357px;
    height: 314px;
    position: relative;
}

/* --- RIGHT SIDE CONTENT --- */
.figma-right-col {
    flex: 0 0 50%;
    height: 179px;
    position: relative;
    overflow: hidden;
    padding-left: 40px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-bottom: 22px;
}

.scroll-window {
    position: absolute;
    width: 100%;
    overflow: hidden;
    left: 0;
}

.top-window {
    height: 107px;
    top: 0px;
    z-index: 1;
    -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 85%);
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 85%);
}

.mid-window {
    height: 143px;
    top: 64px;
    z-index: 3;
    -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 1) 15%, rgba(0, 0, 0, 0.15) 90%);
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 1) 15%, rgba(0, 0, 0, 0.15) 90%);
}

.main-window {
    height: 179px;
    top: 135px;
    z-index: 5;
}

.layer-track {
    display: flex;
    flex-direction: column;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

.track-fade-2 {
    animation: cascadeFade2Down 22s cubic-bezier(0.50, 0.05, 0.15, 1) infinite;
}

.track-fade-1 {
    animation: cascadeFade1Down 22s cubic-bezier(0.62, 0.03, 0.18, 1) infinite;
}

.track-main {
    animation: cascadeMainDown 22s cubic-bezier(0.76, 0, 0.24, 1) infinite;
}

.content-carousel-track {
    display: flex;
    flex-direction: column;
    position: absolute;
    left: 40px;
    top: 0;
    width: 100%;
    animation: cascadeContentDown 22s cubic-bezier(0.76, 0, 0.24, 1) infinite;
}

.layer-item {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-family);
    font-style: normal;
    font-weight: 400;
    text-align: center;
}

.font-f2 {
    height: 107px;
    font-size: 89.79px;
    line-height: 107px;
    opacity: 0.82;
    background: linear-gradient(180deg, #FFFFFF 26.67%, rgba(121, 121, 121, 0.519231) 56.61%, rgba(32, 32, 32, 0.2) 195%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.font-f1 {
    height: 143px;
    font-size: 120px;
    line-height: 143px;
    background: linear-gradient(180deg, #FFFFFF 26.67%, rgba(121, 121, 121, 0.519231) 56.61%, rgba(32, 32, 32, 0.2) 195%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.font-main {
    height: 179px;
    font-size: 150px;
    line-height: 179px;
    color: #FF4000;
}

.content-slide {
    height: 160px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    font-family: var(--font-family);
}

.slide-title {
    margin: 0 0 6px 0;
    font-size: 39.93px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--primary-orange) !important;
}

.slide-desc {
    margin: 0;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.35;
    color: #C0C0C0;
    padding-right: 50px;
}

/* --- DESKTOP KEYFRAMES (unchanged) --- */
@keyframes cascadeFade2Down {

    0%,
    14% {
        transform: translateY(-535px);
    }

    18%,
    32% {
        transform: translateY(-428px);
    }

    36%,
    50% {
        transform: translateY(-321px);
    }

    54%,
    68% {
        transform: translateY(-214px);
    }

    72%,
    86% {
        transform: translateY(-107px);
    }

    90%,
    98% {
        transform: translateY(0px);
    }

    100% {
        transform: translateY(-535px);
    }
}

@keyframes cascadeFade1Down {

    0%,
    14% {
        transform: translateY(-715px);
    }

    18%,
    32% {
        transform: translateY(-572px);
    }

    36%,
    50% {
        transform: translateY(-429px);
    }

    54%,
    68% {
        transform: translateY(-286px);
    }

    72%,
    86% {
        transform: translateY(-143px);
    }

    90%,
    98% {
        transform: translateY(0px);
    }

    100% {
        transform: translateY(-715px);
    }
}

@keyframes cascadeMainDown {

    0%,
    14% {
        transform: translateY(-895px);
    }

    18%,
    32% {
        transform: translateY(-716px);
    }

    36%,
    50% {
        transform: translateY(-537px);
    }

    54%,
    68% {
        transform: translateY(-358px);
    }

    72%,
    86% {
        transform: translateY(-179px);
    }

    90%,
    98% {
        transform: translateY(0px);
    }

    100% {
        transform: translateY(-895px);
    }
}

@keyframes cascadeContentDown {

    0%,
    14% {
        transform: translateY(-800px);
    }

    18%,
    32% {
        transform: translateY(-640px);
    }

    36%,
    50% {
        transform: translateY(-480px);
    }

    54%,
    68% {
        transform: translateY(-320px);
    }

    72%,
    86% {
        transform: translateY(-160px);
    }

    90%,
    98% {
        transform: translateY(0px);
    }

    100% {
        transform: translateY(-800px);
    }
}

/* ============================================================
   TABLET / LAPTOP — uniform scale-down, layout untouched
   ============================================================ */
@media (max-width: 1199px) {
    .figma-stat-section {
        --wtl-scale: 0.86;
        padding: 50px 20px;
    }
}

@media (max-width: 991px) {
    .figma-stat-section {
        --wtl-scale: 0.64;
        padding: 40px 20px;
    }
}

@media (max-width: 767px) {
    .figma-stat-section {
        --wtl-scale: 0.50;
        padding: 32px 16px;
    }
}

@media (max-width: 576px) {

    /* Below this, uniform scaling would push slide-desc under ~10px —
     no longer readable, so we stop scaling and switch to a stacked
     layout below instead. */
    .figma-stat-section {
        --wtl-scale: 1;
    }

    /* transform is disabled for this tier, see below */
}

/* ============================================================
   MOBILE (<=576px) — stacked layout, custom sizes
   Left-column numbers keep the same proportions as desktop
   (scale factor ~0.548, i.e. main-window 179px -> 98px) so the
   overlap/fade masking still looks correct — just smaller.
   Content column gets its own readable sizes since it holds
   paragraph text, not just a number.
   ============================================================ */
@media (max-width: 576px) {
    .figma-stat-section {
        overflow: visible;
        align-items: center;
    }

    .figma-card-container {
        width: 100%;
        max-width: 400px;
        height: 400px;
        flex-direction: column;
        align-items: center;
        transform: none;
        margin-bottom: 0;
        padding: 36px 24px 30px;
        box-shadow: -30px 40px 40px rgba(0, 0, 0, 0.25);
    }

    .figma-card-container::before {
        height: 60px;
    }

    .figma-left-col {
        width: 100%;
        height: 172px;
        /* 74px (main-window top) + 98px (main-window height) */
    }

    .slide-desc {
        padding-right: 10px;
    }

    .top-window {
        height: 59px;
        top: 0;
    }

    .mid-window {
        height: 78px;
        top: 35px;
    }

    .main-window {
        height: 98px;
        top: 74px;
    }

    .font-f2 {
        height: 59px;
        font-size: 49px;
        line-height: 59px;
    }

    .font-f1 {
        height: 78px;
        font-size: 66px;
        line-height: 78px;
    }

    .font-main {
        height: 98px;
        font-size: 82px;
        line-height: 98px;
    }

    .figma-right-col {
        width: 100%;
        flex: none;
        height: 132px;
        padding: 0;
        margin-top: 22px;
        justify-content: flex-start;
    }

    .content-carousel-track {
        left: 0;
    }

    .content-slide {
        height: 132px;
        justify-content: flex-start;
    }

    .slide-title {
        font-size: 22px;
    }

    .slide-desc {
        font-size: 14px;
        line-height: 1.4;
    }

    @keyframes cascadeFade2Down {

        0%,
        14% {
            transform: translateY(-295px);
        }

        18%,
        32% {
            transform: translateY(-236px);
        }

        36%,
        50% {
            transform: translateY(-177px);
        }

        54%,
        68% {
            transform: translateY(-118px);
        }

        72%,
        86% {
            transform: translateY(-59px);
        }

        90%,
        98% {
            transform: translateY(0px);
        }

        100% {
            transform: translateY(-295px);
        }
    }

    @keyframes cascadeFade1Down {

        0%,
        14% {
            transform: translateY(-390px);
        }

        18%,
        32% {
            transform: translateY(-312px);
        }

        36%,
        50% {
            transform: translateY(-234px);
        }

        54%,
        68% {
            transform: translateY(-156px);
        }

        72%,
        86% {
            transform: translateY(-78px);
        }

        90%,
        98% {
            transform: translateY(0px);
        }

        100% {
            transform: translateY(-390px);
        }
    }

    @keyframes cascadeMainDown {

        0%,
        14% {
            transform: translateY(-490px);
        }

        18%,
        32% {
            transform: translateY(-392px);
        }

        36%,
        50% {
            transform: translateY(-294px);
        }

        54%,
        68% {
            transform: translateY(-196px);
        }

        72%,
        86% {
            transform: translateY(-98px);
        }

        90%,
        98% {
            transform: translateY(0px);
        }

        100% {
            transform: translateY(-490px);
        }
    }

    @keyframes cascadeContentDown {

        0%,
        14% {
            transform: translateY(-660px);
        }

        18%,
        32% {
            transform: translateY(-528px);
        }

        36%,
        50% {
            transform: translateY(-396px);
        }

        54%,
        68% {
            transform: translateY(-264px);
        }

        72%,
        86% {
            transform: translateY(-132px);
        }

        90%,
        98% {
            transform: translateY(0px);
        }

        100% {
            transform: translateY(-660px);
        }
    }
}


.wortal-journey-section {
    margin-top: 50px;
}

.wtl-journey {
    --wtl-bg: #141414;
    --wtl-orange: #FF4000;
    --wtl-text-dim: #9A9A9A;
    --wtl-white: #FFFFFF;
    --wtl-scale: 1;

    position: relative;
    width: 100%;
    background: var(--wtl-bg);
    overflow: visible;
    font-family: 'Plus Jakarta Sans', sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* Desktop layout rules */
.wtl-jy-desktop-track {
    position: relative;
    width: 100%;
    height: 350vh;
    display: block;
}

.wtl-jy-sticky {
    position: sticky;
    top: 0;
    width: 100%;
    height: 110vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.wtl-jy-stage {
    position: relative;
    width: 1920px;
    height: 1183px;
    max-width: 100%;
    flex: none;
    transform: scale(var(--wtl-scale));
    transform-origin: center center;
    will-change: transform;
}

.wtl-jy-bglines {
    position: absolute;
    left: 50%;
    width: 100%;
    height: 180px;
    transform: translateX(-50%);
    background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0px, rgba(255, 255, 255, 0.05) 1px, transparent 1px, transparent 14px);
    pointer-events: none;
}

.wtl-jy-bglines--top {
    top: 0;
    opacity: 0.45;
}

.wtl-jy-bglines--bottom {
    bottom: 0;
    opacity: 0.15;
}

.wtl-jy-title {
    position: absolute;
    left: 0;
    top: 40px;
    width: 100%;
    margin: 0;
    text-align: center;
    font-weight: 600;
    font-size: 44px;
    letter-spacing: -0.02em;
    color: var(--wtl-white);
}

.wtl-jy-curve-wrap {
    position: absolute;
    left: 412px;
    top: 152px;
    width: 1092px;
    height: 1032px;
    pointer-events: none;
}

.wtl-jy-curve {
    display: block;
    overflow: visible;
}

#wtlJyGlow,
#wtlJyCore {
    will-change: stroke-dashoffset;
}

.wtl-jy-points {
    position: absolute;
    left: 412px;
    top: 152px;
    width: 1092px;
    height: 1032px;
}

.wtl-jy-dot {
    position: absolute;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #555555;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
    transform: translate(-50%, -50%);
    transition: background 0.3s ease, box-shadow 0.3s ease;
    z-index: 3;
    box-shadow: 0px 4px 14.7px 0px #FF4000;

}

.wtl-jy-dot.is-active {
    background: #FF5511;
    box-shadow: 0 0 12px var(--wtl-orange), 0 0 24px var(--wtl-orange);
}

/* Desktop Guide Lines */
.wtl-jy-guide-top,
.wtl-jy-guide-bottom {
    position: absolute;
    width: 1px;
    background: rgba(255, 255, 255, 0.05);
    opacity: 0;
    pointer-events: none;
    z-index: 1;
    transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.wtl-jy-guide-top {
    transform: translateX(-50%) scaleY(0);
    transform-origin: bottom;
}

.wtl-jy-guide-top.is-visible {
    opacity: 1;
    transform: translateX(-50%) scaleY(1);
}

.wtl-jy-guide-bottom {
    transform: translateX(-50%) scaleY(0);
    transform-origin: top;
}

.wtl-jy-guide-bottom.is-visible {
    opacity: 1;
    transform: translateX(-50%) scaleY(1);
}

.wtl-jy-guide__fill {
    position: absolute;
    left: 0;
    width: 1px;
    height: 100%;
    transform: scaleY(0);
    will-change: transform;
}

.wtl-jy-guide-top .wtl-jy-guide__fill {
    bottom: 0;
    transform-origin: bottom center;
    background: linear-gradient(0deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 100%);
}

.wtl-jy-guide-bottom .wtl-jy-guide__fill {
    top: 0;
    transform-origin: top center;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 100%);
}

.wtl-jy-item {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    width: 330px;
    opacity: 0.15;
    transform: translateY(5px) translateZ(0);
    will-change: opacity, transform;
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.wtl-jy-item.is-active {
    opacity: 1;
    transform: translateY(0) translateZ(0);
}

.wtl-jy-year {
    font-weight: 500;
    font-size: 21px;
    line-height: 120%;
    color: var(--wtl-white);
    letter-spacing: -0.01em;
}

.wtl-jy-desc {
    font-weight: 400;
    font-size: 14px;
    line-height: 150%;
    color: var(--wtl-text-dim);
}

/* Responsive Rules */
.wtl-jy-mobile {
    display: none;
}

@media (max-width: 900px) {
    .wtl-jy-desktop-track {
        display: none;
    }

    .wtl-jy-mobile {
        display: block;
        padding: 80px 24px;
        position: relative;
    }

    .wtl-jy-mobile-title {
        font-size: 32px;
        font-weight: 600;
        color: var(--wtl-white);
        text-align: center;
        margin: 0 0 48px;
        letter-spacing: -0.02em;
    }

    .wtl-jy-mobile-container {
        max-width: 580px;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        gap: 48px;
        /* Slightly padded for visibility */
        position: relative;
    }

    /* Fixed Track Background Base */
    .wtl-jy-mobile-container::before {
        content: '';
        position: absolute;
        left: 7px;
        top: 12px;
        bottom: 24px;
        width: 1px;
        background: rgba(255, 255, 255, 0.08);
        pointer-events: none;
    }

    /* Dynamic scrolling fill line overlay */
    .wtl-jy-mobile-container::after {
        content: '';
        position: absolute;
        left: 7px;
        top: 12px;
        height: var(--mobile-fill-height, 0%);
        width: 1px;
        background: linear-gradient(180deg, var(--wtl-orange) 0%, #FF5511 100%);
        pointer-events: none;
        transition: height 0.4s ease-out;
        z-index: 1;
    }

    .wtl-jy-mb-card {
        position: relative;
        padding-left: 36px;
        opacity: 0.25;
        /* Dim unviewed items slightly */
        transform: translateY(10px);
        transition: opacity 0.5s ease, transform 0.5s ease;
    }

    /* Reveal card typography when in viewport */
    .wtl-jy-mb-card.is-active {
        opacity: 1;
        transform: translateY(0);
    }

    .wtl-jy-mb-header {
        display: flex;
        align-items: center;
        margin-bottom: 8px;
    }

    .wtl-jy-mb-indicator {
        position: absolute;
        left: 2px;
        width: 11px;
        height: 11px;
        border-radius: 50%;
        background: #555555;
        border: 2px solid var(--wtl-bg);
        z-index: 2;
        transition: background 0.3s ease, box-shadow 0.3s ease;
    }

    /* Activated mobile dot state */
    .wtl-jy-mb-card.is-active .wtl-jy-mb-indicator {
        background: #FF5511;
        box-shadow: 0 0 10px var(--wtl-orange), 0 0 20px var(--wtl-orange);
    }

    .wtl-jy-mb-year {
        font-size: 20px;
        font-weight: 500;
        color: var(--wtl-white);
    }

    .wtl-jy-mb-desc {
        margin: 0;
        font-size: 14px;
        line-height: 1.6;
        color: var(--wtl-text-dim);
    }
}



/* Scoped Wrapper Styles */

.value-section {
    margin: 80px 0;
}

.value-section-inner {
    width: 1140px;
    margin: 0 auto;
    max-width: fit-content;
}

.custom-value-section {
    --bg-color: #f7f8f9;
    --text-main: #222222;
    --text-muted: #555555;
    --accent-orange: #ff4500;
    --border-color: #e5e7eb;


    background-color: var(--bg-color);
    background-image: radial-gradient(#e0e3e7 1.5px, transparent 1.5px);
    background-size: 24px 24px;
    padding: 80px 40px;
    font-family: var(--font-stack);
    display: flex;
    justify-content: center;
    align-items: center;
}

.custom-value-section .value-container {
    max-width: 1200px;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 60px;
    align-items: start;
}

/* Left Column Styling */
.custom-value-section .value-heading-col {
    position: sticky;
    top: 40px;
}

.custom-value-section .value-main-title {
    font-size: clamp(3rem, 5vw, 4.5rem);
    font-weight: 700;
    color: var(--text-main);
    margin: 0;
    line-height: 1.1;
    letter-spacing: -0.03em;
}

/* Right Column Styling */
.custom-value-section .value-content-col {
    display: flex;
    flex-direction: column;
}

.custom-value-section .value-item {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 32px 0;
    border-bottom: 1px solid var(--border-color);
    opacity: 0;
    transform: translateY(20px);
    animation: valueFadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.custom-value-section .value-item:first-child {
    padding-top: 0;
}

.custom-value-section .value-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

/* Staggered Animations */
.custom-value-section .value-item:nth-child(1) {
    animation-delay: 0.1s;
}

.custom-value-section .value-item:nth-child(2) {
    animation-delay: 0.2s;
}

.custom-value-section .value-item:nth-child(3) {
    animation-delay: 0.3s;
}

.custom-value-section .value-item:nth-child(4) {
    animation-delay: 0.4s;
}

/* Icon Construction */
.custom-value-section .value-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    margin-top: 4px;
    transition: transform 0.3s ease;
}

.custom-value-section .value-item:hover .value-icon {
    transform: rotate(45deg);
}

.custom-value-section .value-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Typography elements */
.custom-value-section .value-text {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.custom-value-section .value-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-main);
    margin: 0;
    line-height: 1.3;
}

.custom-value-section .value-description {
    font-size: 1.05rem;
    line-height: 1.55;
    color: var(--text-muted);
    margin: 0;
}

/* Responsive Breakpoints */
@media (max-width: 991px) {
    .custom-value-section .value-container {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .custom-value-section .value-heading-col {
        position: static;
    }

    .custom-value-section {
        padding: 60px 24px;
    }
}

@media (max-width: 480px) {
    .custom-value-section .value-item {
        flex-direction: column;
        gap: 12px;
    }

    .custom-value-section .value-icon {
        margin-top: 0;
    }

    .custom-value-section {
        padding: 48px 16px;
    }
}

/* Animation Keyframes */
@keyframes valueFadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 767px) {
    .value-section-inner {
        padding: 20px;
    }

    .value-section {
        margin: 30px 0;
    }
}



/* Grid Container Settings */
.custom-gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* 4 Columns */
    gap: 20px;
    /* Space between boxes */
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    padding-bottom: 50px;
}

/* Individual Gallery Box */
.gallery-box {
    position: relative;
    background-color: #f7f7f7;
    border: 2px solid transparent;
    /* Hidden border to prevent shift */
    aspect-ratio: 1 / 1;
    /* Square boxes */
    overflow: hidden;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

/* Hover Effect: Blue Accent Border Box */
.gallery-box:hover {
    border-color: #ff4000;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
}

/* Image Wrapper */
.image-wrapper {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* Image behavior inside the box */
.image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

/* Hover Effect: Image Zoom */
.gallery-box:hover .image-wrapper img {
    transform: scale(1.06);
}

/* Profile Information Overlay */
.member-info {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 30px 20px 20px 20px;
    box-sizing: border-box;
    /* Smooth dark gradient matching image_f6fc89.jpg for text legibility */
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.4) 55%, rgba(0, 0, 0, 0) 100%);
    color: #ffffff;
    z-index: 2;
    pointer-events: none;
}

/* Name Styling */
.member-name {
    margin: 0 0 4px 0;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: -0.2px;
    line-height: 1.2;
}

/* Role Styling */
.member-role {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 400;
    color: #cccccc;
    line-height: 1.2;
}

/* Responsive Design for Mobile/Tablets */
@media (max-width: 992px) {
    .custom-gallery-grid {
        grid-template-columns: repeat(3, 1fr);
        /* 3 columns on small desktops/large tablets */
        gap: 15px;
    }
}

@media (max-width: 768px) {
    .custom-gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        padding: 10px;
    }

    .member-name {
        font-size: 1.1rem;
    }

    .member-role {
        font-size: 0.88rem;
    }
}

@media (max-width: 480px) {
    .custom-gallery-grid {
        /*grid-template-columns: 1fr; */
        gap: 12px;
    }
}


.trust-section {
    position: relative;
    width: 100%;
    min-height: 90vh;
    background-image: url(https://wortal.co/wp-content/uploads/2026/06/ChatGPT-Image-May-20-2026-12_25_45-PM-1-1-scaled-1.png);
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
    font-family: 'Plus Jakarta Sans', sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* Subtle dark gradient overlay on the right so left content is readable */
.trust-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg,
            rgba(0, 0, 0, 0.45) 0%,
            rgba(0, 0, 0, 0.30) 45%,
            rgba(0, 0, 0, 0.05) 75%,
            transparent 100%);
    z-index: 1;
    pointer-events: none;
}

/* ── INNER WRAPPER ── */
.trust-inner {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: flex-start;
    max-width: 1200px;
    margin: 0 auto;
    padding: 70px 40px 80px;
}

/* ── LEFT CONTENT COLUMN ── */
/* .trust-left {
    flex: 0 0 70%;
    max-width: 70%;
} */

/* ── HEADING ── */
.trust-heading {
    font-size: clamp(28px, 4vw, 48px);
    font-weight: 700;
    color: #ffffff;
    line-height: 1.15;
    margin: 0 0 14px 0;
    letter-spacing: -0.5px;
}

.trust-heading-highlight {
    color: #FF4000;
    font-weight: 800;
}

/* ── SUBTITLE ── */
.trust-subheading {
    font-family: "Plus Jakarta Sans", Sans-serif;
    font-size: 22px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0%;
    color: #363332;
}

/* ── 2×2 CARDS GRID ── */
.trust-cards-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    max-width: max-content;
}

/* ── INDIVIDUAL DARK CARD ── */
.trust-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: rgba(30, 30, 30, 0.82);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 25px 25px;
    transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
    cursor: default;
    flex-direction: column;
}

.trust-card:hover {
    background: rgba(40, 40, 40, 0.92);
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
}

/* ── ICON WRAPPER ── */
.trust-card-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Icon itself brings its own colour — no bg needed */
}

.trust-card-icon svg,
.trust-card-icon img {
    width: 60px;
    height: 60px;
    object-fit: contain;
    display: block;
}

/* ── CARD TEXT ── */
.trust-card-body {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.trust-card-title {
    font-family: "Plus Jakarta Sans", Sans-serif;
    font-size: 22px;
    font-weight: 600;
    color: #ffffff;
    margin: 0;
    line-height: 1.3;
}

.trust-card-desc {
    color: #7a7a7a;
    font-family: "Plus Jakarta Sans", Sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 130%;
    letter-spacing: 0%;
    margin: auto;
}

.trust-left {
    width: 80%;
}

/* ── RESPONSIVE: Tablet ── */
@media (max-width: 1024px) {
    .trust-inner {
        padding: 60px 28px 70px;
    }

    /* .trust-left {
        flex: 0 0 70%;
        max-width: 70%;
    } */

    .trust-heading {
        font-size: clamp(26px, 3.5vw, 40px);
    }

    .trust-cards-grid {
        max-width: 100%;
    }
}

/* ── RESPONSIVE: Mobile ── */
@media (max-width: 768px) {
    .trust-section {
        min-height: auto;
        background-position: right center;
    }

    .trust-left {
        width: 100%;
    }

    .trust-inner {
        flex-direction: column;
        padding: 48px 20px 56px;
    }

    .trust-left {
        flex: none;
        max-width: 100%;
        width: 100%;
    }

    .trust-heading {
        font-size: clamp(24px, 6vw, 36px);
        margin-bottom: 10px;
        text-align: center;
    }

    .trust-subheading {
        font-size: 16px;
        margin-bottom: 28px;
        max-width: 100%;
        text-align: center;
    }

    .trust-cards-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        max-width: 100%;
    }

    .trust-card {
        padding: 20px;
        border-radius: 12px;
    }

    .trust-card-icon {
        width: 36px;
        height: 36px;
    }

    .trust-card-title {
        font-size: 16px;
    }

    .trust-card-desc {
        font-size: 14px;
    }
}

/* ── RESPONSIVE: Small Mobile ── */
@media (max-width: 480px) {
    .trust-inner {
        padding: 40px 16px 48px;
    }

    .trust-cards-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .trust-card {
        flex-direction: column;
        align-items: start;
    }
}