/* ==========================================================================
   HOME PAGE & HERO SECTION STYLES - WORTAL THEME
   ========================================================================== */




/* Hero Section Base */
.hero-section {
    position: relative;
    padding: 0px 0px 80px 0px;
    background: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0.85) 20%, rgba(255, 122, 51, 0.12) 60%, rgba(255, 122, 51, 0.12) 100%);
    overflow: hidden;
    text-align: center;
}

.hero-section::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 180px;
    background: linear-gradient(to bottom,
            rgba(255, 255, 255, 0),
            rgba(255, 255, 255, 1));
    z-index: 1;
    pointer-events: none;
}



.hero-container {
    position: relative;
    z-index: 1;
    padding-top: 150px;
}

/* ==========================================================================
   USER's ORIGINAL ANIMATED HERO HEADLINE & SUBHEADING STYLES
   ========================================================================== */

/* --- Scoped Container Wrapper --- */
.elm-crm-hero-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px 16px;
    box-sizing: border-box;
    text-align: center;

    /* Forces crisp, anti-aliased font rendering across browsers */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* --- Subheading --- */
.elm-crm-subheading {
    font-size: 16px;
    font-weight: 500;
    color: #FF4000;
    letter-spacing: 0.5px;
    margin: 0 0 12px 0;
    padding: 0;
}

/* --- Main Headline Wrapper --- */
.elm-crm-headline-wrap {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    font-size: clamp(30px, 4.5vw, 54px);
    color: #2d2d2d;
    font-weight: 500;
    line-height: 1.25;
    margin-bottom: 20px;
}

/* --- Static Text Segment --- */
.elm-crm-static-text {
    display: inline-block;
    margin-right: 0.25em;
    white-space: nowrap;
}

/* --- Dynamic Mask Box to match image Top-Fade Layout --- */
.elm-crm-animated-box-mask {
    display: inline-flex;
    position: relative;
    height: 2.5em;
    margin-top: -1.2em;
    align-items: flex-end;
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 25%, rgba(0, 0, 0, 1) 65%);
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 25%, rgba(0, 0, 0, 1) 65%);
    overflow: hidden;
}

/* --- Word Window Frame --- */
.elm-crm-animated-box {
    position: relative;
    min-width: 5.5em;
    height: 1.3em;
}

/* --- Individual Word Items --- */
.elm-crm-word {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    color: #FF5522;
    font-weight: 700;
    text-align: left;
    opacity: 0;
    transform: translateY(-120%);

    /* Pre-allocates GPU resources to eliminate text jitter during movement */
    will-change: transform, opacity;
    backface-visibility: hidden;
    transform-style: preserve-3d;

    /* A refined custom bezier curve for liquid-smooth text transitions */
    animation: elmUpcomingTopToBottom 8s infinite cubic-bezier(0.33, 1, 0.68, 1);
}

/* --- 4-Word Staggered Sequence Delays (Preserves Initial Page-Load Layout) --- */
.elm-crm-word:nth-child(1) {
    animation-delay: -2s;
}

.elm-crm-word:nth-child(2) {
    animation-delay: 0s;
}

.elm-crm-word:nth-child(3) {
    animation-delay: 2s;
}

.elm-crm-word:nth-child(4) {
    animation-delay: 4s;
}

/* --- Liquid-Smooth Dynamic Keyframes --- */
@keyframes elmUpcomingTopToBottom {

    /* STAGE 1: Glides elegantly into the top faded preview window */
    0% {
        transform: translateY(-120%) translateZ(0);
        opacity: 0;
    }

    6% {
        transform: translateY(-82%) translateZ(0);
        opacity: 0.25;
    }

    20% {
        transform: translateY(-82%) translateZ(0);
        opacity: 0.25;
    }

    /* STAGE 2: Seamlessly rolls down to become fully highlighted */
    26% {
        transform: translateY(0) translateZ(0);
        opacity: 1;
    }

    44% {
        transform: translateY(0) translateZ(0);
        opacity: 1;
    }

    /* STAGE 3: Glides out out through the bottom window smoothly */
    50% {
        transform: translateY(120%) translateZ(0);
        opacity: 0;
    }

    100% {
        transform: translateY(120%) translateZ(0);
        opacity: 0;
    }
}

/* --- Mobile Responsiveness for Animated Headline --- */
@media (max-width: 767px) {
    .elm-crm-headline-wrap {
        flex-direction: column;
        font-size: clamp(22px, 6vw, 32px);
    }

    .elm-crm-static-text {
        margin-right: 0;
        margin-bottom: 8px;
        white-space: normal;
    }

    .elm-crm-animated-box-mask {
        width: 100%;
        justify-content: center;
        margin-top: 0;
        height: 1.2em;
        /* Tightened to perfectly fit exactly one line */
        overflow: hidden;
        -webkit-mask-image: none;
        mask-image: none;
    }

    .elm-crm-word {
        text-align: center;
        /* Switches to the clean mobile animation layout */
        animation-name: elmMobileTopToBottom;
    }
}

/* --- Clean Mobile-Only Keyframes (No overlapping previews) --- */
@keyframes elmMobileTopToBottom {
    0% {
        transform: translateY(-120%);
        opacity: 0;
    }

    /* Stays completely invisible instead of showing a faded preview */
    20% {
        transform: translateY(-120%);
        opacity: 0;
    }

    /* Smoothly rolls down into place */
    26% {
        transform: translateY(0);
        opacity: 1;
    }

    44% {
        transform: translateY(0);
        opacity: 1;
    }

    /* Rolls out smoothly downward */
    50% {
        transform: translateY(120%);
        opacity: 0;
    }

    100% {
        transform: translateY(120%);
        opacity: 0;
    }
}

/* Description Paragraph */
.hero-description {
    max-width: 100%;
	width: 80%;
    margin: 0 auto 20px auto;
    font-size: 22px;
    line-height: 35px;
	color: #6B6B6B;
    font-weight: 400;
}

/* Call To Action Buttons Container */
.hero-buttons-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 48px;
}

/* 4 Trust Badges Container (Uploads Folder) */
.hero-trust-badges {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 50px;
    width: 100%;
}

.hero-trust-badge-img {
    width: auto;
    max-width: 100%;
    object-fit: contain;
    transition: transform 0.25s ease;
}

.hero-trust-badge-img:hover {
    transform: translateY(-3px);
}

.trust-badge-card {
    background: #FFFFFF;
    border: 1px solid #E6E8EC;
    border-radius: 12px;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.trust-badge-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.07);
}

/* Individual Badge Styling */
.badge-milestone {
    border-color: #E2E4EB;
    min-width: 140px;
}

.badge-milestone-box {
    text-align: center;
    border: 1.5px solid #2B3342;
    border-radius: 8px;
    padding: 6px 12px;
    position: relative;
    background: #FAFAFB;
}

.badge-milestone-header {
    background: #E84D2B;
    color: #FFF;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: 3px;
    margin-bottom: 4px;
    display: inline-block;
}

.badge-milestone-title {
    font-size: 13px;
    font-weight: 800;
    color: #1A1A1A;
    line-height: 1.1;
}

.badge-stars {
    color: #FF5018;
    font-size: 10px;
    margin-top: 2px;
}

/* SoftwareSuggest Shield Badges */
.badge-shield {
    min-width: 145px;
    background: linear-gradient(180deg, #1E4CB0 0%, #0F3282 100%);
    color: #FFFFFF;
    border-radius: 10px;
    padding: 8px 14px;
    text-align: center;
    border: none;
    box-shadow: 0 4px 12px rgba(15, 50, 130, 0.2);
}

.badge-shield-vendor {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.9;
    font-weight: 600;
    margin-bottom: 2px;
}

.badge-shield-award {
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
}

.badge-shield-year {
    font-size: 11px;
    font-weight: 700;
    margin-top: 4px;
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    padding-top: 3px;
}

/* Google Reviews Card */
.badge-google {
    background: #FFFFFF;
    border: 1px solid #E0E0E0;
    padding: 10px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-radius: 10px;
}

.badge-google-logo {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 700;
    color: #4285F4;
}

.badge-google-info {
    text-align: left;
}

.badge-google-title {
    font-size: 12px;
    color: #666;
    font-weight: 500;
}

.badge-google-rating {
    display: flex;
    align-items: center;
    gap: 6px;
}

.badge-google-score {
    font-size: 15px;
    font-weight: 800;
    color: #1A1A1A;
}

.badge-google-stars {
    color: #FFB400;
    font-size: 12px;
}

.badge-google-count {
    font-size: 11px;
    color: #777;
}

/* Hero YouTube Video Section */
.hero-video-section {

    padding: 50px 40px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    border-radius: 36px;
    position: relative;
    z-index: 2;
}

/* Mockup Frame with Orange Glow Border matching Screenshot */
.hero-video-mockup-frame {
    /*max-width: 980px;*/
    margin: 0 auto;
    background: #FFFFFF;
    border: 3px solid #FF5018;
    border-radius: 36.80px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.15), 0 0 35px rgba(255, 80, 24, 0.25);
    overflow: hidden;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.hero-video-mockup-frame:hover {
    transform: translateY(-3px);
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.18), 0 0 45px rgba(255, 80, 24, 0.35);
}

.hero-video-mockup-frame-wrapper {

    backdrop-filter: blur(2px);
    background-color: rgba(204, 204, 204, 0.2);
    border-radius: 70.5px;
    opacity: 1;
    z-index: 1;
    gap: 10px;
    /*width: 100%;*/
    height: auto;
    padding: 50px;
    position: relative;
    overflow: hidden;
    /*max-width: 980px;*/
    width: min(100%,var(--container-max-width,1140px));
    margin: 0 auto;

}

.hero-video-wrapper {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    /* 16:9 Aspect Ratio */
    height: 0;
    background: #000000;
    overflow: hidden;
}

.hero-video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}



.hero-video-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    overflow: hidden;
}

.youtube-thumbnail {
    position: absolute;
    inset: 0;
    cursor: pointer;
}

.youtube-thumbnail img {
   /* width: 100%;
    height: 100%; */
    display: block;
    object-fit: cover;
}

.youtube-play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    width: 90px;
    height: 90px;
    border-radius: 60%;

    background: #333333;
    display: flex;
    align-items: center;
    justify-content: center;

    transition: transform 0.3s ease, background 0.3s ease;
}

.youtube-play-button span {
    color: #fff;
    font-size: 28px;
    margin-left: 4px;
}

.youtube-thumbnail:hover .youtube-play-button {
    transform: translate(-50%, -50%) scale(1.1);
    /*background: #e60000;*/
    background: #333333;
}


.hero-video-wrapper iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}


@media (max-width: 768px) {
    /* .hero-section {
        padding: 40px 16px 60px 16px;
    } */

    .hero-video-section {
        padding: 40px 25px 40px 25px;
        border-radius: 20px;
        margin-top: 10px;
        background-size: cover;
    }

    .hero-video-mockup-frame {
        border-radius: 18px;
        border-width: 2px;
    }

    .hero-description {
        font-size: 15px;
        padding: 10px 16px;
        margin-bottom: 10px;
    }

    .trust-badge-card {
        padding: 8px 12px;
    }

    .hero-buttons-container {
        width: 100%;
        padding: 10px 16px;
        margin-bottom: 25px;
    }

    .hero-buttons-container .btn {
        max-width: 320px;
    }

    .hero-trust-badge-img {
        /*width: inherit;*/
        width: 80px;
    }

    .hero-video-mockup-frame-wrapper {
        border-radius: 29.5px;
        padding: 15px
    }

    .hero-trust-badges {
        padding: 10px 16px;
        margin-bottom: 10px;
        gap: 10px;
    }

    .hero-section {
        padding: 0px 0px 30px 0px;
    }
    
    .youtube-play-button{
        width: 50px;
        height: 50px;
    }
}




.brand-track .brand img {
    height: 40px;
}

/* ===============================
   WRAPPER
================================ */
.brand-marquee-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.9);
    padding: 30px 0;
}

/* ===============================
   GLASS BLUR EDGES (LEFT / RIGHT)
================================ */
.brand-marquee-wrapper::before,
.brand-marquee-wrapper::after {
    content: "";
    position: absolute;
    top: 0;
    width: 200px;
    /* blur width */
    height: 100%;
    z-index: 5;
    pointer-events: none;
    backdrop-filter: blur(110px);
    -webkit-backdrop-filter: blur(110px);
    background: rgb(255 255 255);
}

/* LEFT */
.brand-marquee-wrapper::before {
    left: 0;
    mask-image: linear-gradient(to right, black 0%, black 45%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, black 0%, black 45%, transparent 100%);
}

/* RIGHT */
.brand-marquee-wrapper::after {
    right: 0;
    mask-image: linear-gradient(to left, black 0%, black 45%, transparent 100%);
    -webkit-mask-image: linear-gradient(to left, black 0%, black 45%, transparent 100%);
}

/* ===============================
   MARQUEE STRUCTURE
================================ */
.brand-marquee {
    width: 100%;
    overflow: hidden;
}

.brand-track {
    display: flex;
    align-items: stretch;
    /* Modified from center to ensure equal height containers */
    width: max-content;
    animation: marquee 28s linear infinite;
    will-change: transform;
    cursor: pointer;
}

/* hover pe pause */
.brand-marquee-wrapper:hover .brand-track {
    animation-play-state: paused;
}

/* ===============================
   BRAND ITEM CONTAINERS
================================ */
.brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 40px;
    white-space: nowrap;
    opacity: 0.85;
    transition: opacity 0.3s ease;
    height: 50px;
    /* Explicitly locks equal height across all button elements */
}

.brand:hover {
    opacity: 1;
}

/* Desktop Styles for images */
.brand img {
    height: 100%;
    /* Tells the image to adapt completely to the .brand height */
    width: auto;
    /* Automatically keeps the correct aspect ratio */
    max-width: 150px;
    /* Prevents extremely wide horizontal logos from blowing up */
    object-fit: contain;
    /* Ensures safe boundaries without cutting pixels */
}

/* ===============================
   ANIMATION
================================ */
@keyframes marquee {
    from {
        transform: translateX(0);
    }

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

/* ===============================
   MOBILE TUNING
================================ */
@media (max-width: 767.4px) {
    .brand-track {
        animation-duration: 22s;
        /* Sped up mobile slightly since distances are shorter */
    }

    .brand {
        margin: 0 20px;
        /* Healthy space on mobile viewports */
        height: 32px;
        /* Scales the container height down uniformly on mobile */
    }

    .brand-marquee-wrapper::before,
    .brand-marquee-wrapper::after {
        width: 50px;
        /* Increased slightly so edge blur works nicely on small displays */
        backdrop-filter: blur(90px);
        -webkit-backdrop-filter: blur(90px);
    }

    /* Proper scaling for mobile images */
    .brand img {
        height: 100%;
        /* Forces image to scale perfectly inside the mobile container height */
        width: auto;
        /* Strict rule to lock correct aspect ratio */
        max-width: 100px;
    }

    .brand-marquee-wrapper {
        padding: 20px 0;
    }
}


.wsr *,
.wsr *::before,
.wsr *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.wsr {
    --pr: #FF4000;
    --tdark: #222;
    --thead: #333;
    --tmut: #6B6B6B;
    --ttag: #A4A4A4;
    --bg: #ffffff;
    --bgf: #f5f5f5;
    --bdr: #C2C2C2;
    --font: 'Plus Jakarta Sans';
    --site-header-h: 120px;
    /* ← change this to match your site header height */
    width: 100%;
    background: var(--bg);
    font-family: var(--font);
    -webkit-font-smoothing: antialiased;
    max-width: 1200px;
    margin: 0 auto;
}

/* ── STICKY: only the nav row ── */
.wsr-tabs-sticky {
    position: sticky;
    top: var(--site-header-h);
    z-index: 99;
    background: var(--bg);
    isolation: isolate;
}

.wsr-tabs-sticky::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: var(--site-header-h);
    background: var(--bg);
    pointer-events: none;
    z-index: -1;
}

.wsr-tabs {
    display: flex;
    border: 1px solid #CFCFCF;
    margin: 0 auto;
    padding: 5px;
    background: var(--bg);
    border-radius: 16px;
}

.wsr-tab {
    flex: 1;
    background: var(--bg);
    border: none;
    padding: 14px 10px;
    font-family: var(--font);
    font-size: 20px;
    font-weight: 700;
    color: var(--tdark);
    cursor: pointer;
    outline: none;
    transition: background 0.25s, color 0.25s;
    text-align: center;
    letter-spacing: -0.01em;
    line-height: 1.2;
    white-space: nowrap;
}

.wsr-tab:focus {
    color: var(--tdark);
    background: var(--bgf);
    border-radius: 14px;
}

.wsr-tab.active {
    color: var(--pr);
    background: var(--bgf);
    border-radius: 14px;
}

.wsr-tab:not(.active):hover {
    color: var(--pr);
    background: none;
}

/* ── SECTIONS & CARDS ── */
.wsr-sections {
    padding-top: 30px;
    // padding-bottom:calc(100vh - 220px);
}

.wsr-section {
    margin: 0 auto 0px auto;
    display: flex;
    min-height: 560px;
    position: relative;
    overflow: hidden;
    box-shadow: 0px 4px 20.8px 0px #00000026;
    border: 1px solid #CFCFCF;
    border-radius: 40px;
}

.wsr-section:last-child {
    margin-bottom: 0;
}

/* ── LEFT CONTAINER ── */
.wsr-left {
    width: 55%;
    padding: 64px 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: var(--bg);
}

.wsr-label {
    color: var(--pr);
    font-size: 38px;
    font-weight: 700;
    line-height: 1.2;
}

.wsr-title {
    color: var(--thead);
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 16px;
}

.wsr-desc {
    color: var(--tmut);
    font-size: 14px;
    line-height: 1.7;
    max-width: 480px;
    margin-bottom: 32px;
}

.wsr-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--pr);
    text-decoration: none;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 36px;
    width: fit-content;
    transition: gap .2s;
    line-height: 1.4;
}

.wsr-link:hover {
    gap: 14px;
}

.wsr-link svg {
    flex-shrink: 0;
    transition: transform .2s;
}

.wsr-link:hover svg {
    transform: translateX(3px);
}

.wsr-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 0;
}

.wsr-tag {
    font-size: 14px;
    font-weight: 600;
    color: var(--ttag);
    padding: 2px 0;
    line-height: 1.6;
    cursor: pointer;
    transition: color 0.2s ease, font-weight 0.2s ease;
}

.wsr-tag.active {
    color: var(--pr) !important;
    font-weight: 700;
}

.wsr-tag:not(:last-child)::after {
    content: " ";
    margin: 0 10px;
    color: var(--bdr);
    font-weight: 400;
}

.wsr-tag:hover {
    color: #363332;
}

/* ── RIGHT CONTAINER ── */
.wsr-right {
    width: 45%;
    position: relative;
    padding: 40px;
    background-color: var(--bg);
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.wsr-right img {
    position: relative;
    width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: 40px;
    border: 1px solid #CFCFCF;
}

/* ── RESPONSIVE BREAKPOINTS ── */
@media (max-width: 1300px) {
    .wsr-tab {
        font-size: 18px;
    }

    .wsr-label,
    .wsr-title {
        font-size: 34px;
    }

    .wsr-left {
        padding: 48px 36px;
    }
}

@media (max-width: 1024px) {
    .wsr-tab {
        font-size: 16px;
        padding: 12px 8px;
    }

    .wsr-section {
        min-height: 480px;
    }

    .wsr-left {
        padding: 32px;
    }

    .wsr-label,
    .wsr-title {
        font-size: 28px;
    }

    .wsr-desc {
        font-size: 15px;
        margin-bottom: 24px;
    }

    .wsr-link {
        margin-bottom: 24px;
        font-size: 16px;
    }

    .wsr-tag {
        font-size: 14px;
    }
}

@media (max-width: 767px) {
    .wsr_main_section {
        padding: 10px;
        padding-top: 80px;
    }

    .wsr-tabs-sticky {
        display: none;
    }

    .wsr {
        --site-header-h: 56px;
    }

    .wsr-tabs-sticky {
        padding: 0 16px;
        top: var(--site-header-h);
    }

    .wsr-tabs {
        overflow-x: auto;
        scrollbar-width: none;
        display: flex;
    }

    .wsr-tabs::-webkit-scrollbar {
        display: none;
    }

    .wsr-tab {
        flex: 0 0 auto;
        min-width: 140px;
        font-size: 14px;
        padding: 12px 16px;
        border-right: 1px solid var(--bdr);
    }

    .wsr-tab:last-child {
        border-right: none;
    }

    .wsr-section {
        flex-direction: column;
        min-height: auto;
        margin-bottom: 24px;
    }

    .wsr-left {
        width: 100%;
        padding: 24px 20px;
        justify-content: flex-start;
    }

    .wsr-label,
    .wsr-title {
        font-size: 24px;
    }

    .wsr-desc {
        font-size: 14px;
        max-width: 100%;
    }

    .wsr-right {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 10;
        min-height: 280px;
    }

    .wsr-frame {
        top: 100px !important;
    }
}

@media (max-width: 480px) {
    .wsr-tabs-sticky {
        padding: 0 8px;
    }

    .wsr-left {
        padding: 20px 14px;
    }

    .wsr-label,
    .wsr-title {
        font-size: 22px;
    }

    .wsr-right {
        min-height: 220px;
    }

    .wsr-tag {
        font-size: 13px;
    }

    .wsr-tag:not(:last-child)::after {
        margin: 0 6px;
    }

    .wsr-frame {
        top: 100px !important;
    }
}

.wsr-frame {
    background-color: rgb(236, 235, 232);
    padding: 16px;
    border-radius: 48px;
    margin-bottom: 32px;
}

.wsr-frame {
    position: sticky;
    top: 200px;
    margin-bottom: 120px;
    border-radius: 48px;
    z-index: 1;
    overflow: visible;
}

.wsr-section {
    transform-origin: center top;
    transition:
        transform .45s ease,
        opacity .45s ease,
        filter .45s ease;
}

/* Invisible, non-sticky markers used purely for accurate scroll
   position measurement — position:sticky elements can have
   unreliable getBoundingClientRect()/offsetTop values, so we never
   measure the sticky frames directly for navigation logic. */
.wsr-anchor {
    position: static;
    height: 0;
    margin: 0;
    padding: 0;
}

.wsr_main_section {
    padding-top: 100px;
}


/* ==========================================================================
   INDUSTRY SECTION - Built for your INDUSTRY
   ========================================================================== */

.industry-section {
    width: 100%;
    padding: 80px 0 0 0;
    background: #fff;
    font-family: 'Plus Jakarta Sans', sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* ── HEADER ── */
.industry-header {
    text-align: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px 40px;
}

.industry-heading {
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 12px 0;
    line-height: 1.2;
}

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

.industry-subheading {
    font-size: 16px;
    color: #555;
    margin: 0 0 32px 0;
    line-height: 1.6;
}

.industry-subheading-not {
    text-decoration: underline;
    font-style: italic;
    color: #333;
}

/* ── TAB BUTTONS ── */
.industry-tabs {
    display: inline-flex;
    gap: 10px;
    background: #f5f5f5;
    border: 1.5px solid #e0e0e0;
    border-radius: 50px;
    padding: 5px 6px;
}

.industry-tab {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: #444;
    background: transparent;
    border: 1.5px solid transparent;
    border-radius: 50px;
    padding: 10px 28px;
    cursor: pointer;
    transition: all 0.25s ease;
    white-space: nowrap;
    outline: none;
}

.industry-tab:hover {
    color: #FF4000;
    background: bisque;
}

.industry-panels::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 50px;
    /* adjust */

    background: linear-gradient(to bottom,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.4) 40%,
            rgba(255, 255, 255, 0.8) 75%,
            #ffffff 100%);

    pointer-events: none;
}

.industry-tab.active {
    background: #FF4000;
    color: #ffffff;
    border-color: #FF4000;
    box-shadow: 0 4px 16px rgba(255, 64, 0, 0.25);
}

/* ── PANELS CONTAINER ── */
.industry-panels {
    position: relative;
    width: 100%;
}

.industry-panel {
    display: none;
    width: 100%;
    opacity: 0;
    transition: opacity 0.35s ease;
}

.industry-panel.active {
    display: block;
    opacity: 1;
}

/* ── BACKGROUND WRAPPERS (each industry has its own bg) ── */
.industry-bg {
    width: 100%;
    min-height: 480px;
    position: relative;
    overflow: hidden;
}

/* TEXTILE - warm misty factory bg */
.industry-bg--textile {
    background-image: url(https://wortal.co/wp-content/uploads/2026/06/Frame-2055247229-scaled.png);
    background-repeat: no-repeat;
    background-size: cover;
}


/* REAL ESTATE - cool sky-blue modern bg */
.industry-bg--realestate {
    background-image: url(https://wortal.co/wp-content/uploads/2026/06/Frame-2055247049-scaled.png);
    background-repeat: no-repeat;
    background-size: cover;
}


/* IT & SaaS - deep purple-indigo tech bg */
.industry-bg--it-saas {
    background-image: url(https://wortal.co/wp-content/uploads/2026/06/Frame-2055247051-scaled.png);
    background-repeat: no-repeat;
    background-size: cover;
}

/* ── INNER 2-COLUMN LAYOUT ── */
.industry-inner {
    display: flex;
    align-items: flex-start;
    position: relative;
    z-index: 1;
}

/* ── LEFT: TEXT CONTENT ── */
.industry-content {
    flex: 0 0 50%;
    max-width: 50%;
    padding-left: 11%;

}

.industry-title {
    font-size: 36px;
    font-weight: 800;
    color: #FF4000;
    margin: 0 0 8px 0;
    line-height: 1.15;
    padding-top: 10%;
}



.industry-desc {
    font-size: 14px;
    color: #666;
    margin: 0 0 24px 0;
    line-height: 1.6;
}

/* ── FEATURE LIST ── */
.industry-features {
    list-style: none;
    margin: 0 0 28px 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.industry-feature-item {
    font-size: 24px;
    font-weight: 600;
    font-family: "Plus Jakarta Sans", Sans-serif;
    color: #333333;
    padding: 13px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
    display: flex;
    line-height: 35px;
    align-items: center;
    gap: 10px;
    transition: color 0.2s ease;
}




/* ── CTA BUTTON ── */
.industry-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #FF4000;
    background: #fff;
    border: 1.5px solid rgba(255, 64, 0, 0.35);
    border-radius: 50px;
    padding: 10px 20px;
    text-decoration: none;
    transition: all 0.25s ease;
    width: fit-content;
    margin-bottom: 10%;
}

.industry-cta-btn:hover {
    background: #FF4000;
    color: #fff;
    border-color: #FF4000;
    gap: 12px;
}

.industry-cta-btn:hover svg circle {
    stroke: #fff;
}

.industry-cta-btn:hover svg path {
    stroke: #fff;
}



/* ── RIGHT: CRM IMAGE ── */
.industry-image-wrap {
    flex: 0 0 50%;
    max-width: 50%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.industry-crm-img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
}



/* ── PANEL FADE ANIMATION ── */
@keyframes industryFadeIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

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

.industry-panel.active .industry-inner {
    animation: industryFadeIn 0.4s ease forwards;
}

/* ── RESPONSIVE: Tablet ── */
@media (max-width: 1024px) {
    .industry-inner {
        gap: 28px;

    }

    .industry-title {
        font-size: 30px;
    }

    .industry-feature-item {
        font-size: 14px;
    }

    .industry-crm-img {
        max-width: 460px;
    }
}

/* ── RESPONSIVE: Mobile ── */
@media (max-width: 768px) {
    .industry-section {
        padding: 60px 0 0 0;
    }

    .industry-header {
        padding: 0 16px 28px;
    }

    .industry-heading {
        font-size: clamp(24px, 6vw, 34px);
    }

    .industry-subheading {
        font-size: 14px;
    }

    .industry-tabs {
        gap: 6px;
        padding: 4px 5px;
        flex-wrap: wrap;
        justify-content: center;
    }

    .industry-tab {
        font-size: 13px;
        padding: 8px 18px;
    }

    .industry-inner {
        flex-direction: column;

        gap: 28px;
    }

    .industry-content,
    .industry-image-wrap {
        flex: none;
        max-width: 100%;
        width: 100%;
    }

    .industry-content {
        padding-right: 5%;
        padding-left: 5%;
    }

    .industry-image-wrap {
        justify-content: center;
    }

    .industry-crm-img {
        max-width: 100%;

    }

    .industry-title {
        font-size: 26px;
    }

    .industry-feature-item {
        font-size: 14px;
        padding: 11px 0;
    }
}

@media (max-width: 480px) {
    .industry-tab {
        font-size: 12px;
        padding: 7px 14px;
    }

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

    .industry-inner {}
}






/* =================================
   SMOOTH LIQUID FADE ANIMATION
================================= */
/* 1. Slowly dim and blur standard background elements */
.wortal-grid.has-active-child .wortal-box:not(.wortal-center) {
    // opacity: 0.35;
    // filter: blur(2px);
}

/* 2. Lock the centerpiece text strictly out of the blur cycle */
.wortal-grid.has-active-child .wortal-center {
    opacity: 1 !important;
    filter: blur(0px) !important;
}

/* 3. Bring the active selected container forward seamlessly */
.wortal-grid.has-active-child .wortal-box.active {
    opacity: 1;
    filter: blur(0px);
}

/* 4. Snap back instantly on physical cursor hover */
.wortal-grid.has-active-child .wortal-box:hover {
    opacity: 1;
    filter: blur(0px);
    transition: opacity 0.2s cubic-bezier(0.25, 1, 0.5, 1),
        filter 0.2s cubic-bezier(0.25, 1, 0.5, 1);
}


.integrate-heading {
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 12px 0;
    line-height: 1.2;
}

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

.integrate-subheading {
    font-size: 16px;
    color: #555;
    margin: 0 0 32px 0;
    line-height: 1.6;
}

.industry-header {
    text-align: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px 40px;
}

.integrate-section {
    margin-top: 50px;
}

.wortal-integration-wrapper {
    text-align: center;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px 40px;
}

@media (max-width: 768px) {
    .integrate-heading {
        font-size: clamp(24px, 6vw, 34px);
    }

    .integrate-subheading {
        font-size: 14px;
    }

    .integrate-header {
        padding: 0 16px 28px;
    }

    .integrate-section {
        margin-top: 30px;
    }
}



/* Scoped CSS - No global styles */

.ai-section {
    min-height: 500px;
    background-color: #000000;
    background-image: url(https://wortal.co/wp-content/uploads/2026/06/Rectangle-12-1-scaled-1.png);
    background-position: bottom right;
    background-repeat: no-repeat;
}

.ai-section-inner {
    background-image: url(https://wortal.co/wp-content/uploads/2026/06/Group-1261156934.png);
    background-position: bottom right;
    background-repeat: no-repeat;
    background-size: 20% auto;
}

.ai-features-section {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 80px 20px 80px;
}

/* Header Section */
.ai-features-header {
    text-align: center;
    margin-bottom: 80px;
    animation: fadeInDown 0.8s ease-out;
}

.ai-features-header h3 {
    font-size: 46px;
    font-weight: 600;
    color: #ffffff;
    margin: 0 0 10px 0;
    line-height: 1.1;
    letter-spacing: -0.5px;
}

.ai-features-header h3 .ai-accent {
    position: relative;
    color: #000000;
}

.ai-features-header h3 .ai-accent::after {
    content: '';
    position: absolute;
    top: -20px;
    right: -10px;
    width: 30px;
    height: 30px;
    background: url("https://wortal.co/wp-content/uploads/2026/05/Frame.svg") no-repeat center;
    background-size: contain;
    animation: twinkle 2.5s ease-in-out infinite;
}

.ai-features-header p {
    font-size: 22px;
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
    line-height: 1.5;
    letter-spacing: 0.3px;
}

/* Cards Grid */
.ai-features-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
    width: 100%;
    max-width: 1000px;
    margin-bottom: 100px;
    animation: fadeInUp 0.8s ease-out 0.2s both;
}

.ai-feature-card {
    background: #202020;
    backdrop-filter: blur(10px);
    border-radius: 14px;
    padding: 20px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Gradient Border */
.ai-feature-card::after {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1.5px;
    border-radius: 14px;
    background: linear-gradient(180.05deg,
            #868687 0.04%,
            rgba(240, 240, 242, 0.275962) 82.75%,
            rgba(78, 78, 82, 0) 114.27%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 1;
}

.ai-feature-card::before {
    content: '';
    position: absolute;
    inset: 0;
    left: -120%;
    width: 60%;
    background: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, .08),
            transparent);
    transform: skewX(-25deg);
    pointer-events: none;
}

/* Hover & Autoplay Effect Trigger */
.ai-feature-card:hover::before,
.ai-feature-card.scroll-hover::before {
    animation: shine .8s linear forwards;
}

@keyframes shine {
    from {
        left: -120%;
    }

    to {
        left: 170%;
    }
}

/* Card Icon */
.ai-card-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    margin-bottom: 24px;
    font-size: 28px;
    transform: scale(1) rotate(0deg);
    transition: transform .4s ease, border-color .4s ease, background .4s ease;
}

.ai-feature-card:hover .ai-card-icon,
.ai-feature-card.scroll-hover .ai-card-icon {
    border-color: rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.05);
    transform: scale(1.1) rotate(5deg);
}

/* Card Content */
.ai-card-title {
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 15px 0;
    line-height: 130%;
    letter-spacing: -3%;
    background: linear-gradient(180deg, #FFFFFF 26.67%, rgba(255, 255, 255, 0) 195%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.ai-card-description {
    font-size: 14px;
    font-weight: 400;
    color: #C7C7C7;
    margin: 0 0 28px 0;
    line-height: 130%;
}

/* Animations */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }

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

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

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

@keyframes twinkle {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.5;
        transform: scale(0.8);
    }
}

/* Responsive Design */
@media (max-width: 1024px) {
    .ai-features-section {
        padding: 50px 20px 60px;
    }

    .ai-features-header {
        margin-bottom: 60px;
    }

    .ai-features-header h3 {
        font-size: 44px;
    }

    .ai-features-header p {
        font-size: 16px;
    }

    .ai-features-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
        margin-bottom: 80px;
    }

    .ai-feature-card {
        padding: 32px;
    }
}

@media (max-width: 768px) {
    .ai-features-section {
        padding: 40px 16px 50px;
    }

    .ai-features-header {
        margin-bottom: 48px;
    }

    .ai-features-header h3 {
        font-size: 36px;
    }

    .ai-features-header h3 .ai-accent::after {
        width: 15px;
        height: 15px;
        right: -5px;
        top: -10px;
    }

    .ai-features-header p {
        font-size: 15px;
    }

    .ai-features-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-bottom: 60px;
        padding: 0 15px;
    }

    .ai-feature-card {
        padding: 28px;
    }

    .ai-card-icon {
        width: 48px;
        height: 48px;
        font-size: 24px;
    }

    .ai-card-title {
        font-size: 20px;
        margin-bottom: 12px;
    }

    .ai-card-description {
        font-size: 13px;
        margin-bottom: 20px;
    }
}

@media (max-width: 480px) {
    .ai-features-section {
        padding: 50px 0px 40px;
    }

    .ai-features-header {
        margin-bottom: 40px;
    }

    .ai-features-header h3 {
        font-size: 28px;
        margin-bottom: 10px;
    }

    .ai-features-header p {
        font-size: 14px;
    }

    .ai-features-grid {
        margin-bottom: 50px;
    }

    .ai-feature-card {
        padding: 24px;
        border-radius: 16px;
    }
}

.ai-feature-card:hover,
.ai-feature-card.scroll-hover {
    transform: translateY(-12px);
    background: #252525;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .4);
}





/* ============================================================
   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) --- */
/* --- UPDATED DESKTOP KEYFRAMES (5 steps) --- */
@keyframes cascadeFade2Down {

    0%,
    16% {
        transform: translateY(-428px);
    }

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

    40%,
    56% {
        transform: translateY(-214px);
    }

    60%,
    76% {
        transform: translateY(-107px);
    }

    80%,
    96% {
        transform: translateY(0px);
    }

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

@keyframes cascadeFade1Down {

    0%,
    16% {
        transform: translateY(-572px);
    }

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

    40%,
    56% {
        transform: translateY(-286px);
    }

    60%,
    76% {
        transform: translateY(-143px);
    }

    80%,
    96% {
        transform: translateY(0px);
    }

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

@keyframes cascadeMainDown {

    0%,
    16% {
        transform: translateY(-716px);
    }

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

    40%,
    56% {
        transform: translateY(-358px);
    }

    60%,
    76% {
        transform: translateY(-179px);
    }

    80%,
    96% {
        transform: translateY(0px);
    }

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

@keyframes cascadeContentDown {

    0%,
    16% {
        transform: translateY(-640px);
    }

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

    40%,
    56% {
        transform: translateY(-320px);
    }

    60%,
    76% {
        transform: translateY(-160px);
    }

    80%,
    96% {
        transform: translateY(0px);
    }

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

/* --- UPDATED MOBILE KEYFRAMES (5 steps) --- */
@media (max-width: 576px) {
    @keyframes cascadeFade2Down {

        0%,
        16% {
            transform: translateY(-236px);
        }

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

        40%,
        56% {
            transform: translateY(-118px);
        }

        60%,
        76% {
            transform: translateY(-59px);
        }

        80%,
        96% {
            transform: translateY(0px);
        }

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

    @keyframes cascadeFade1Down {

        0%,
        16% {
            transform: translateY(-312px);
        }

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

        40%,
        56% {
            transform: translateY(-156px);
        }

        60%,
        76% {
            transform: translateY(-78px);
        }

        80%,
        96% {
            transform: translateY(0px);
        }

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

    @keyframes cascadeMainDown {

        0%,
        16% {
            transform: translateY(-392px);
        }

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

        40%,
        56% {
            transform: translateY(-196px);
        }

        60%,
        76% {
            transform: translateY(-98px);
        }

        80%,
        96% {
            transform: translateY(0px);
        }

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

    @keyframes cascadeContentDown {

        0%,
        16% {
            transform: translateY(-528px);
        }

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

        40%,
        56% {
            transform: translateY(-264px);
        }

        60%,
        76% {
            transform: translateY(-132px);
        }

        80%,
        96% {
            transform: translateY(0px);
        }

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

/* ============================================================
   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);
        }
    }
}





.ws-steps-section {
    position: relative;
    height: 320vh;
    background: #fff;
    font-family: 'Plus Jakarta Sans'
}

.ws-sticky-wrapper {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: #fff
}

.ws-container {
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    padding: 80px 40px
}

.ws-heading {
    text-align: center;
    margin-bottom: 120px
}

.ws-heading h2 {
    margin: 0;
    font-size: 46px;
    font-weight: 700;
    color: #202124;
    line-height: 110%
}

.ws-heading h2 span {
    color: #FF4000
}

.ws-heading p {
    margin: 10px auto 0;
    max-width: 760px;
    font-size: 22px;
    font-weight: 400;
    color: #333;
    line-height: 35px;
    text-align: center
}

.ws-steps-wrapper {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px
}

.ws-progress-line {
    position: absolute;
    top: 53px;
    left: 12%;
    width: 76%;
    height: 2px;
    background: #C8C8C8;
    z-index: 1
}

.ws-progress-fill {
    position: absolute;
    top: 0;
    left: 0;
    width: 0%;
    height: 100%;
    background: #FF4000
}

.ws-step {
    position: relative;
    z-index: 2;
    text-align: center;
    opacity: 0;
    transform: translateY(60px);
    transition: opacity .8s ease, transform .8s ease
}

.ws-step.show {
    opacity: 1;
    transform: translateY(0)
}

/* Step 1 is always visible from the start */
.ws-steps-wrapper .ws-step:first-of-type {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

.ws-circle-wrap {
    position: relative;
    width: 106px;
    height: 106px;
    margin: 0 auto;
    border-radius: 50%;
    border: 2px solid #C8C8C8;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    transition: all .45s ease
}

.ws-circle {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #d9d9d9;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .45s ease, box-shadow .45s ease, transform .45s ease
}

.ws-circle span {
    color: #fff;
    font-size: 40px;
    font-weight: 700;
    line-height: 1
}

.ws-step.active .ws-circle-wrap {
    border-color: #FF4000
}

.ws-step.active .ws-circle {
    background: #FF4000;
    transform: scale(1.03);
    box-shadow: 0 18px 40px rgba(255, 77, 0, .20)
}

.ws-icon {
    width: 50px;
    height: 50px;
    margin: 42px auto 26px;
    color: #C8C8C8;
    transition: color .4s ease
}

.ws-icon svg {
    width: 100%;
    height: 100%
}

.ws-step.active .ws-icon {
    color: #FF4000
}

.ws-step h3 {
    margin: 0;
    color: #202124;
    font-size: 22px;
    font-weight: 700;
    line-height: 35px
}

.ws-step p {
    margin: 18px auto 0;
    max-width: 320px;
    color: #5a5a5a;
    font-size: 18px;
    line-height: 1.35;
    font-weight: 400
}

/* ── MOBILE ── */
@media(max-width:767px) {
    .ws-steps-section {
        height: auto;
        padding: 0px 0
    }

    .ws-sticky-wrapper {
        position: relative;
        height: auto;
        overflow: visible
    }

    .ws-container {
        padding: 0 28px
    }

    .ws-heading {
        margin-bottom: 48px
    }

    .ws-heading h2 {
        font-size: 32px;
        line-height: 1.15
    }

    .ws-heading p {
        margin-top: 12px;
        font-size: 16px;
        line-height: 1.5
    }

    .ws-steps-wrapper {
        display: block;
        position: relative;
        padding-left: 36px;
    }

    .ws-progress-line {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 17px;
        width: 2px;
        height: 100%;
        transform: none;
        background: #C8C8C8;
        z-index: 0;
    }

    .ws-progress-fill {
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 0%;
        background: #FF4000;
        transition: height 0.6s ease;
    }

    .ws-step {
        display: flex;
        align-items: flex-start;
        gap: 20px;
        padding: 0 0 52px 0;
        opacity: 1 !important;
        transform: none !important;
        text-align: left !important;
    }

    .ws-step:last-child {
        padding-bottom: 0
    }

    .ws-circle-wrap {
        flex: 0 0 auto;
        width: 56px;
        height: 56px;
        margin: 0;
        margin-left: -45px;
        border-width: 2px;
        background: #fff;
        z-index: 2;
        position: relative;
    }

    .ws-circle {
        width: 42px;
        height: 42px;
    }

    .ws-circle span {
        font-size: 22px
    }

    .ws-step-content {
        flex: 1;
        min-width: 0;
        padding-top: 6px;
    }

    .ws-icon {
        width: 34px;
        height: 34px;
        margin: 0 0 12px 0;
    }

    .ws-step h3 {
        font-size: 18px;
        line-height: 1.3;
        margin-bottom: 6px;
    }

    .ws-step p {
        font-size: 14px;
        line-height: 1.5;
        margin: 0;
        max-width: 100%;
        color: #666;
    }
}

/* All steps are now fully visible from the very beginning */
.ws-step {
    position: relative;
    z-index: 2;
    text-align: center;
    opacity: 1;
    /* Changed from 0 to 1 */
    transform: translateY(0);
    /* Changed from 60px to 0 */
    transition: opacity .8s ease, transform .8s ease;
}

/* You can completely remove or leave the .ws-step.show rule since opacity is already 1 */
.ws-step.show {
    opacity: 1;
    transform: translateY(0)
}

/* You can also safely remove the "Step 1 is always visible" exception since they all are now */
.ws-steps-wrapper .ws-step:first-of-type {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

.wortal-signup-process-section {
    margin-top: 80px;
}

@media(max-width:767px) {
    .wortal-signup-process-section {
        margin-bottom: 60px;
    }
}

/* ==========================================================================
   TRUST SECTION — Made in INDIA. Made for the World.
   ========================================================================== */

.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;
    margin-top: 80px;
}

/* 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;
    margin-left: 150px;
}

/* ── 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: 15px;
    background: #363332;
    /*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;
        margin: 0 auto;
    }

    .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: 20px;
        max-width: 100%;
        padding: 0px 10px;
    }

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

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

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

    .trust-card-desc {
        font-size: 14px;
    }
    
    .trust-card-body{
		gap: 15px;
	}
	
	.hero-container{
	    padding-top: 100px;
	}
	
	.hero-description {
		font-size: 14px;
        line-height: 130%;
		width: 100%;
	}
	
	.elm-crm-headline-wrap{
		margin-bottom: 0px;
	}
}

/* ── 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;
    }
}