/* ==========================================================================
   RESET & LAYOUT UTILITIES SPECIFIC TO THE 2 SECTIONS (REPLACING TAILWIND)
   ========================================================================== */
.hidden {
    display: none !important;
}

.industries.video-industries {
    background-color: #ffffff !important;
    padding-top: 100px;
    height: 3300px;
    position: relative;
    box-sizing: border-box;
    scroll-margin-top: 90px;
}

@media (max-width: 1024px) {
    .industries.video-industries {
        padding-top: 90px !important;
        padding-bottom: 60px !important;
        height: auto !important;
    }
}

@media (max-width: 767px) {
    .industries.video-industries {
        padding-top: 96px !important;
        padding-bottom: 40px !important;
    }
}

@media (max-width: 420px) {
    .industries.video-industries {
        padding-top: 90px !important;
        padding-bottom: 32px !important;
    }
}

.industries-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    height: 100%;
    z-index: 20;
}

.industries-text-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    position: relative;
    z-index: 20;
    flex: none !important;
    margin-bottom: 0px !important;
}

@media (max-width: 1024px) {
    .industries-text-wrapper {
        height: auto;
        justify-content: flex-start;
        margin-bottom: 0px !important;
    }
}

.industries.video-industries h2 {
    font-family: 'DM Sans', sans-serif !important;
    font-size: 96px !important;
    font-weight: 700 !important;
    font-style: normal !important;
    line-height: 96px !important;
    margin-top: 0 !important;
    margin-bottom: 32px !important;
}

.industries.video-industries h2 .h2-line {
    display: inline-block !important;
    white-space: nowrap !important;
}

@media (max-width: 1024px) {
    .industries.video-industries h2 {
        font-size: 38px !important;
        line-height: 46px !important;
        margin-bottom: 20px !important;
    }
}

@media (max-width: 768px) {
    .industries.video-industries h2 {
        font-size: 32px !important;
        line-height: 40px !important;
        margin-bottom: 16px !important;
    }
}

@media (max-width: 480px) {
    .industries.video-industries h2 .h2-line {
        white-space: normal !important;
    }

    .industries.video-industries h2 br {
        display: none !important;
    }

    .industries.video-industries h2 {
        font-size: 26px !important;
        line-height: 34px !important;
    }
}

@media (max-width: 360px) {
    .industries.video-industries h2 {
        font-size: 22px !important;
        line-height: 30px !important;
        margin-bottom: 12px !important;
    }

    .industries.video-industries .desc {
        font-size: 13px !important;
        line-height: 19px !important;
        margin-bottom: 16px !important;
    }
}

.industries.video-industries .desc {
    font-family: 'DM Sans', sans-serif !important;
    font-weight: 600 !important;
    font-style: normal !important;
    font-size: 20px !important;
    line-height: 30px !important;
    color: #1e1e1e !important;
    width: 88% !important;
    margin-top: 0 !important;
    margin-bottom: 20px !important;
}

@media (max-width: 1024px) {
    .industries.video-industries .desc {
        font-size: 18px !important;
        line-height: 28px !important;
        width: 100% !important;
        margin-bottom: 16px !important;
    }
}

@media (max-width: 767px) {
    .industries.video-industries .desc {
        font-size: 15px !important;
        line-height: 22px !important;
        margin-bottom: 12px !important;
    }
}

@media (max-width: 420px) {
    .industries.video-industries .desc {
        font-size: 14px !important;
        line-height: 20px !important;
        margin-bottom: 10px !important;
    }
}

.industries.video-industries .normal-button {
    margin-top: 0px !important;
}

.normal-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 161px !important;
    height: 48px !important;
    gap: 10px !important;
    border-radius: 999px !important;
    padding: 12px 24px !important;
    background-color: #E3001D !important;
    border: 2px solid #E3001D !important;
    color: #FFFFFF !important;
    font-family: 'DM Sans', sans-serif !important;
    font-weight: 500 !important;
    font-size: 15px !important;
    text-decoration: none !important;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
}

.normal-button:hover {
    background-color: transparent !important;
    color: #FFFFFF !important;
    border-color: #E3001D !important;
}

.normal-button .btn-text {
    color: #FFFFFF !important;
    pointer-events: none !important;
}

.normal-button .btn-arrow-img {
    width: 12px !important;
    height: 12px !important;
    filter: brightness(0) invert(1) !important;
    transition: transform 0.3s ease !important;
}

.normal-button:hover .btn-arrow-img {
    transform: translateX(4px) !important;
}

.video-wrapper {
    border-radius: 1px !important;
    top: 20px;
    bottom: 20px;
    display: flex;
    height: calc(100vh - 40px);
    justify-content: center;
    align-items: center !important;
    overflow: hidden;
    position: sticky;
    transform: translateY(25%);
    width: 100%;
    margin-bottom: 20px !important;
}

.video-wrapper {
    --tw-translate-y: 25%;
    border-radius: 1px !important;
    bottom: 0;
    display: flex;
    height: calc(100vh - 40px);
    justify-content: center;
    align-items: center !important;
    /* Center the video vertically to prevent vertical stretching */
    overflow: hidden;
    position: sticky;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    width: 100%;
    margin-bottom: 20px !important;
    will-change: transform, top, bottom, height;
}

.plyr__video-wrapper {
    background: #000;
    background: var(--plyr-video-background, var(--plyr-video-background, #000));
    border-radius: inherit;
    height: 100%;
    margin: auto;
    overflow: hidden;
    position: relative;
    width: 100%
}

.plyr__video-embed,
.plyr__video-wrapper--fixed-ratio {
    aspect-ratio: 16/9
}

@supports not (aspect-ratio: 16/9) {

    .plyr__video-embed,
    .plyr__video-wrapper--fixed-ratio {
        height: 0;
        padding-bottom: 56.25%;
        position: relative
    }
}

.plyr__video-embed iframe,
.plyr__video-wrapper--fixed-ratio video {
    border: 0;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}

.plyr--full-ui .plyr__video-embed>.plyr__video-embed__container {
    padding-bottom: 240%;
    position: relative;
    transform: translateY(-38.28125%)
}

.plyr--video .plyr__controls {
    background: linear-gradient(#0000, #000000bf);
    background: var(--plyr-video-controls-background, linear-gradient(#0000, #000000bf));
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
    bottom: 0;
    color: #fff;
    color: var(--plyr-video-control-color, #fff);
    left: 0;
    padding: 5px;
    padding: calc(var(--plyr-control-spacing, 10px)/2);
    padding-top: 20px;
    padding-top: calc(var(--plyr-control-spacing, 10px)*2);
    position: absolute;
    right: 0;
    transition: opacity .4s ease-in-out, transform .4s ease-in-out;
    z-index: 3
}

@media (max-width: 1024px) {
    .video-wrapper {
        --tw-translate-y: 0px;
        --tw-scale-x: 1;
        --tw-scale-y: 1;
        height: auto !important;
        aspect-ratio: 16 / 9 !important;
        margin-top: 16px !important;
        margin-bottom: 0 !important;
        position: relative !important;
        transform: none !important;
        width: 100% !important;
        border-radius: 8px !important;
        overflow: hidden !important;
    }

    .scroll-video {
        transform: scale(1) !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        border-radius: 8px !important;
        aspect-ratio: 16 / 9 !important;
    }
}

.scroll-video {
    overflow: hidden !important;
    border-radius: 1px !important;
    transform: scale(0.3);
    width: 100% !important;
    position: relative !important;
    will-change: transform;
}

@media (max-width: 767px) {
    .video-wrapper {
        margin-top: 8px !important;
        border-radius: 6px !important;
    }

    .scroll-video {
        transform: scale(1) !important;
        border-radius: 6px !important;
    }
}

.lazy-video {
    height: 100%;
    width: 100%;
    object-fit: cover;
    pointer-events: none !important;
}

.video-overlay {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.2);
    z-index: 20;
}

.pause-overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10;
}

.dropdown-sheet-header {
    display: none;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 16px;
}

@media (max-width: 767px) {
    .dropdown-sheet-header {
        display: flex;
    }
}

.dropdown-sheet-title {
    color: #FFFFFF;
    font-family: 'DM Sans', sans-serif;
    font-size: 18px;
    font-weight: 700;
}

.dropdown-close-btn {
    background: none;
    border: none;
    color: #FFFFFF;
    font-size: 28px;
    cursor: pointer;
    line-height: 1;
    padding: 0;
}

/* ================================================
   ABOUT SECTION LAYOUT STYLES
   ================================================ */
.about-sect {
    background-color: #0F172A !important;
    padding-top: 100px !important;
    padding-bottom: 100px !important;
    position: relative;
    box-sizing: border-box;
    height: auto !important;
    overflow: visible !important;
    overflow-x: clip !important;
}

.about-sect .container-ptr {
    max-width: 1600px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 24px;
    padding-right: 24px;
    box-sizing: border-box;
    position: relative;
}

/* Sticky Center Content - IN FRONT of the scrolling videos */
.about-sticky-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    top: calc(50vh - 120px);
    position: sticky;
    left: 0;
    width: 100%;
    z-index: 30 !important;
    pointer-events: none;
}

.about-sticky-content .about-btn {
    pointer-events: auto !important;
    z-index: 30 !important;
}

.about-intro-text,
.about-sticky-content h2 {
    font-family: 'DM Sans', sans-serif !important;
    font-weight: 700 !important;
    font-style: normal !important;
    font-size: 36px !important;
    line-height: 48px !important;
    max-width: 1037px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    color: #FFFFFF !important;
    text-align: center !important;
    margin-top: 10px !important;
    margin-bottom: 0 !important;
    pointer-events: auto !important;
}

.about-intro-text br,
.about-sticky-content h2 br {
    display: block;
}

/* Card images container list: cards scroll UNDER the sticky content */
.about-images-list {
    margin-top: 260px;
    display: flex;
    flex-direction: column;
    gap: 200px;
    padding-bottom: 400px;
    position: relative;
    z-index: 5;
}

.scroll-block {
    display: flex;
    flex-wrap: wrap;
    position: relative;
    width: 100%;
}

.scroll-block .scroll-image {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.scroll-block .image-container {
    height: auto;
    position: relative;
    width: 380px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    transform-origin: center center;
    box-sizing: border-box;
    z-index: 5 !important;
    cursor: default !important;
    pointer-events: auto;
}

.scroll-block .video-holder {
    background-color: #0F172A;
    border-radius: 1px;
    box-shadow: 0px 3.82px 6.43px 0px rgba(0, 0, 0, .02), 0px 16.63px 12.54px 0px rgba(0, 0, 0, .04), 0px 40.4px 22.57px 0px rgba(0, 0, 0, .05), 0px 77.15px 40.78px 0px rgba(0, 0, 0, .06), 0px 128.86px 71.42px 0px rgba(0, 0, 0, .07), 0px 197.54px 118.74px 0px rgba(0, 0, 0, .09), 0px 285.16px 186.99px 0px rgba(0, 0, 0, .11);
    height: 214px;
    overflow: hidden;
    position: relative;
    width: 100%;
    cursor: default !important;
    pointer-events: none !important;
}

.scroll-block .about-card-title {
    color: #fff !important;
    font-size: 14px;
    font-weight: 600;
    font-family: 'IBM Plex Mono', monospace;
    text-align: left;
    line-height: 14px;
    letter-spacing: 0em;
    text-decoration: underline !important;
    transition: color 0.3s ease, text-decoration 0.3s ease;
    cursor: pointer !important;
    pointer-events: auto !important;
    display: inline-block;
    width: fit-content;
}

.scroll-block a.about-card-title:hover,
.scroll-block .about-card-title:hover {
    color: #E3001D !important;
    text-decoration: none !important;
}

.scroll-block .video-holder:after {
    background-color: rgba(13, 19, 33, 0.42);
    content: '';
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

.scroll-block img,
.scroll-block .scroll-image {
    border-radius: 1px;
    object-fit: cover;
}

/* ==========================================================================
   DESKTOP (>= 1025px): Floating Criss-Cross Constellation Passing Over Center Sticky
   ========================================================================== */
@media (min-width: 1025px) {
    .scroll-block {
        display: flex !important;
        flex-wrap: wrap !important;
        position: relative;
        width: 100%;
    }

    /* Card 1: Center-Left (passes over left half of sticky content) */
    .scroll-block .image-container:first-child {
        margin-left: 26.65% !important;
        margin-right: auto !important;
        margin-top: 0 !important;
        order: unset !important;
        flex: unset !important;
    }

    /* Card 2: Right side (staggered down, passes over right side) */
    .scroll-block .image-container:nth-child(2) {
        margin-left: auto !important;
        margin-right: 3% !important;
        margin-top: 140px !important;
        order: unset !important;
        flex: unset !important;
    }

    /* Card 3: Left side (positive margin-top ensures ZERO collision with Card 1) */
    .scroll-block .image-container:nth-child(3) {
        margin-left: 3% !important;
        margin-right: auto !important;
        margin-top: 80px !important;
        order: unset !important;
        flex: unset !important;
    }

    /* Card 4: Center-Right (passes over right-center of sticky content) */
    .scroll-block .image-container:nth-child(4) {
        margin-left: auto !important;
        margin-right: 26.6% !important;
        margin-top: 120px !important;
        order: unset !important;
        flex: unset !important;
    }
}

/* Medium Laptops (1200px - 1366px): Scaled card width */
@media (min-width: 1200px) and (max-width: 1366px) {
    .about-intro-text,
    .about-sticky-content h2 {
        font-size: 32px !important;
        line-height: 44px !important;
        max-width: 960px !important;
    }

    .scroll-block .image-container {
        width: 320px !important;
    }

    .scroll-block .video-holder {
        height: 180px !important;
    }

    .scroll-block .image-container:first-child {
        margin-left: 24% !important;
    }

    .scroll-block .image-container:nth-child(4) {
        margin-right: 24% !important;
    }
}

/* Small Laptops (1025px - 1199px): Compact card width */
@media (min-width: 1025px) and (max-width: 1199px) {
    .about-intro-text,
    .about-sticky-content h2 {
        font-size: 28px !important;
        line-height: 38px !important;
        max-width: 860px !important;
    }

    .scroll-block .image-container {
        width: 280px !important;
    }

    .scroll-block .video-holder {
        height: 158px !important;
    }

    .scroll-block .image-container:first-child {
        margin-left: 20% !important;
    }

    .scroll-block .image-container:nth-child(4) {
        margin-right: 20% !important;
    }
}

/* Large Screens (>= 1367px): Standard 380px width */
@media (min-width: 1367px) {
    .scroll-block .image-container {
        width: 380px !important;
    }

    .scroll-block .video-holder {
        height: 214px !important;
    }
}

/* ==========================================================================
   TABLET (768px - 1024px): Center Sticky + Videos Passing Over
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1024px) {
    .about-sect {
        padding-top: 80px !important;
        padding-bottom: 80px !important;
        overflow: visible !important;
        overflow-x: clip !important;
    }

    .about-sect .container-ptr {
        padding-left: 20px;
        padding-right: 20px;
    }

    .about-sticky-content {
        top: calc(50vh - 100px) !important;
        z-index: 30 !important;
    }

    .about-intro-text,
    .about-sticky-content h2 {
        font-size: 24px !important;
        line-height: 34px !important;
        max-width: 720px !important;
        margin-bottom: 0 !important;
    }

    .about-images-list {
        margin-top: 220px !important;
        gap: 160px !important;
        padding-bottom: 300px !important;
        z-index: 5 !important;
    }

    .scroll-block {
        display: flex !important;
        flex-wrap: wrap !important;
        position: relative !important;
        width: 100% !important;
    }

    .scroll-block .image-container {
        width: 280px !important;
        z-index: 5 !important;
    }

    .scroll-block .video-holder {
        height: 158px !important;
    }

    .scroll-block .image-container:first-child {
        margin-left: 12% !important;
        margin-right: auto !important;
        margin-top: 0 !important;
        order: unset !important;
        flex: unset !important;
    }

    .scroll-block .image-container:nth-child(2) {
        margin-left: auto !important;
        margin-right: 4% !important;
        margin-top: 80px !important;
        order: unset !important;
        flex: unset !important;
    }

    .scroll-block .image-container:nth-child(3) {
        margin-left: 4% !important;
        margin-right: auto !important;
        margin-top: 80px !important;
        order: unset !important;
        flex: unset !important;
    }

    .scroll-block .image-container:nth-child(4) {
        margin-left: auto !important;
        margin-right: 12% !important;
        margin-top: 100px !important;
        order: unset !important;
        flex: unset !important;
    }
}

/* ==========================================================================
   MOBILE (<= 767px): Center Sticky + Videos Passing Over Sequentially
   ========================================================================== */
@media (max-width: 767px) {
    .about-sect {
        padding-top: 60px !important;
        padding-bottom: 60px !important;
        overflow: visible !important;
        overflow-x: clip !important;
    }

    .about-sect .container-ptr {
        padding-left: 16px;
        padding-right: 16px;
    }

    .about-sticky-content {
        top: calc(50vh - 90px) !important;
        z-index: 30 !important;
    }

    .about-intro-text,
    .about-sticky-content h2 {
        font-size: 22px !important;
        line-height: 30px !important;
        font-weight: 700 !important;
        letter-spacing: -0.03em !important;
        max-width: 100% !important;
        margin-bottom: 0 !important;
    }

    .about-intro-text br,
    .about-sticky-content h2 br {
        display: none !important;
    }

    .about-btn {
        margin-top: 16px !important;
    }

    .about-images-list {
        margin-top: 180px !important;
        gap: 160px !important;
        padding-bottom: 260px !important;
        z-index: 5 !important;
    }

    .scroll-block {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 160px !important;
        width: 100% !important;
        padding: 0 !important;
    }

    .scroll-block .image-container,
    .scroll-block .image-container:first-child,
    .scroll-block .image-container:nth-child(2),
    .scroll-block .image-container:nth-child(3),
    .scroll-block .image-container:nth-child(4) {
        width: 100% !important;
        max-width: 380px !important;
        height: auto !important;
        margin: 0 auto !important;
        order: unset !important;
        flex: unset !important;
        z-index: 5 !important;
    }

    .scroll-block .video-holder {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 16 / 9 !important;
    }
}


/* ==========================================================================
   INDUSTRIES SLIDER & NAVIGATION INTERACTIVES (PRESERVED FROM ORIGINAL)
   ========================================================================== */
.spx-industries-title,
.industries.video-industries h2 *,
.industries.video-industries .animated-text * {
    color: #E3001D !important;
}

/* INDUSTRIES VIDEO CAROUSEL SLIDER STYLES */
.industries-main-slider,
.industries-main-slider .slick-list,
.industries-main-slider .slick-track,
.industries-video-slide {
    width: 100%;
    height: 100%;
}

.industries-video-slide video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Custom Slick Arrows Styling outside scroll-video */
.custom-industries-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: #B5B7BD;
    color: #0F172A;
    display: none !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 50;
    pointer-events: none;
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.5s ease-in-out;
}

.custom-industries-arrow.visible {
    display: flex !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

.custom-industries-arrow:hover {
    background-color: #CD2235;
    border-color: #CD2235;
    color: #fff;
    transform: translateY(-50%) scale(1.1);
}

.custom-industries-arrow svg {
    width: 28px;
    height: 28px;
    stroke: currentColor;
    stroke-width: 2.5;
    fill: none;
}

.scroll-video {
    width: 85% !important;
    max-width: 1200px !important;
    max-height: 100% !important;
    margin: 0 auto !important;
    position: relative !important;
    z-index: 10 !important;
}

@media (min-width: 1024px) {
    .scroll-video {
        aspect-ratio: 16 / 9 !important;
    }
}

.industries-prev-btn {
    left: 2%;
}

.industries-next-btn {
    right: 2%;
}

@media (max-width: 1024px) {
    .scroll-video {
        width: 100% !important;
        max-width: none !important;
    }

    .custom-industries-arrow {
        opacity: 1 !important;
        pointer-events: auto !important;
    }
}

@media (max-width: 767px) {
    .custom-industries-arrow {
        width: 44px;
        height: 44px;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    .custom-industries-arrow svg {
        width: 20px;
        height: 20px;
        stroke-width: 2;
    }

    .industries-prev-btn {
        left: 15px;
    }

    .industries-next-btn {
        right: 15px;
    }
}

/* Base resets for industry tabs buttons */
.industry-tab {
    background: none;
    border: none;
    outline: none;
    box-shadow: none;
    padding: 0;
    margin: 0;
}

/* CENTERED INDUSTRY NAME BADGE */
.industry-title-wrapper {
    position: absolute !important;
    bottom: 10px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    border-radius: 1px !important;
    padding: 14px 14px !important;
    background-color: rgba(0, 0, 0, 0.7) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 16px !important;
    z-index: 20 !important;
    white-space: nowrap !important;
}

.industry-name {
    font-size: 28px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    line-height: 1;
}

@media (max-width: 1024px) {
    .industry-title-wrapper {
        position: absolute !important;
        top: 16px !important;
        left: 16px !important;
        bottom: auto !important;
        transform: none !important;
        padding: 8px 16px !important;
        background-color: rgba(15, 23, 42, 0.85) !important;
        border-radius: 4px !important;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
        z-index: 20 !important;
    }

    .industry-name {
        font-size: 18px !important;
    }
}

@media (max-width: 767px) {
    .industry-title-wrapper {
        top: 12px !important;
        left: 12px !important;
        padding: 6px 12px !important;
        gap: 8px !important;
    }

    .industry-name {
        font-size: 14px !important;
    }
}

@media (max-width: 420px) {
    .industry-title-wrapper {
        top: 8px !important;
        left: 8px !important;
        padding: 4px 10px !important;
    }

    .industry-name {
        font-size: 12px !important;
    }
}

/* Disabled state for custom arrows when reaching start/end of slider */
.custom-industries-arrow.slick-disabled,
.custom-industries-arrow[disabled] {
    opacity: 0.25 !important;
    pointer-events: none !important;
    cursor: default !important;
}

/* RED BACKGROUND BOX BEHIND INDUSTRIES VIDEO */
.industries-red-bg-box {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) scale(1) !important;
    width: 322px !important;
    height: 322px !important;
    background-color: #E3001D !important;
    z-index: 1 !important;
    pointer-events: none !important;
    opacity: 1;
    border-radius: 1px !important;
    transition: opacity 0.1s ease-out, transform 0.1s ease-out !important;
}

@media (max-width: 1023px) {
    .industries-red-bg-box {
        display: none !important;
    }
}

/* ABOUT SECTION PILL BUTTON STYLE */
.about-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 181px !important;
    height: 48px !important;
    opacity: 1 !important;
    gap: 10px !important;
    border-radius: 999px !important;
    padding-top: 12px !important;
    padding-right: 32px !important;
    padding-bottom: 12px !important;
    padding-left: 32px !important;
    background-color: #E3001D !important;
    border: 2px solid #E3001D !important;
    color: #fff !important;
    font-family: 'DM Sans', sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease !important;
    cursor: pointer !important;
    margin-top: 32px !important;
    text-transform: none !important;
    box-sizing: border-box !important;
}

.about-btn:hover {
    background-color: transparent !important;
    color: #FFFFFF !important;
    border-color: #E3001D !important;
}

.about-btn:active {
    transform: translateY(0) !important;
}

/* INDUSTRIES VIDEO OVERLAY SLIDE-DOWN WIPE TRANSITION */
.industries-transition-overlay {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: #E3001D !important;
    z-index: 99 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transform: translateY(-100%);
    pointer-events: none !important;
}

.industries-transition-overlay.active {
    transform: translateY(0%);
    transition: transform 0.8s cubic-bezier(0.76, 0, 0.24, 1) !important;
}

.industries-transition-overlay.slide-out {
    transform: translateY(100%);
    transition: transform 0.8s cubic-bezier(0.76, 0, 0.24, 1) !important;
}

.industries-transition-text {
    color: #FFFFFF !important;
    font-family: 'DM Sans', sans-serif !important;
    font-size: 96px !important;
    font-weight: 700 !important;
    opacity: 0;
    transform: scale(0);
    transition: opacity 0.6s cubic-bezier(0.76, 0, 0.24, 1), transform 0.6s cubic-bezier(0.76, 0, 0.24, 1) !important;
}

.industries-transition-overlay.active .industries-transition-text,
.industries-transition-overlay.slide-out .industries-transition-text {
    opacity: 1;
    transform: scale(1);
}

.industries-transition-overlay.active .industries-transition-text {
    transition: opacity 0.8s cubic-bezier(0.34, 1.3, 0.64, 1) 0.2s, transform 0.8s cubic-bezier(0.34, 1.3, 0.64, 1) 0.2s !important;
}

.industries-transition-overlay.slide-out .industries-transition-text {
    transition: none !important;
}

@media (max-width: 767px) {
    .industries-transition-text {
        font-size: 32px !important;
    }
}

/* "+ More Industries" Morphing Container (Slow expansion) */
.more-industries-btn-container {
    position: absolute !important;
    bottom: 0 !important;
    right: 32px !important;
    width: 168px !important;
    height: 42px !important;
    border: 1px solid #FFFFFF !important;
    border-radius: 1px !important;
    background-color: transparent !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    overflow: hidden;
    z-index: 30 !important;
    transition: width 0.65s cubic-bezier(0.25, 1, 0.5, 1),
        height 0.65s cubic-bezier(0.25, 1, 0.5, 1),
        border-radius 0.65s cubic-bezier(0.25, 1, 0.5, 1),
        background-color 0.65s ease,
        border-color 0.65s ease !important;
}

.more-industries-btn-container:hover,
.more-industries-btn-container.auto-open {
    width: 520px !important;
    height: 380px !important;
    border-radius: 1px !important;
    background-color: #0F172A !important;
    border-color: transparent !important;
    cursor: default !important;
    overflow: visible !important;
    z-index: 120 !important;
}

/* Button text centered normally, fades out slowly on hover */
.more-industries-btn-container .btn-text {
    font-family: 'DM Sans', sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #FFFFFF !important;
    white-space: nowrap !important;
    transition: opacity 0.25s ease !important;
    pointer-events: none !important;
}

.more-industries-btn-container:hover .btn-text,
.more-industries-btn-container.auto-open .btn-text {
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.15s ease !important;
}

/* Dropdown sits absolutely inside the container, matching final size */
.more-industries-dropdown {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 520px !important;
    height: 380px !important;
    padding: 24px !important;
    box-sizing: border-box !important;
    border-radius: 1px !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: none !important;
    transition: opacity 0.2s ease !important;
    pointer-events: none !important;
}

.dropdown-sheet-header {
    display: none !important;
}

.more-industries-btn-container:hover .more-industries-dropdown,
.more-industries-btn-container.auto-open .more-industries-dropdown {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
    transition: opacity 0.4s ease 0.25s !important;
}

.dropdown-grid {
    display: flex !important;
    gap: 24px !important;
    width: 100% !important;
    opacity: 0 !important;
    transition: opacity 0.2s ease !important;
}

.more-industries-btn-container:hover .dropdown-grid,
.more-industries-btn-container.auto-open .dropdown-grid {
    opacity: 1 !important;
    transition: opacity 0.3s ease 0.3s !important;
}

.dropdown-column {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
}

.menu-link {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    color: #FFFFFF !important;
    font-family: 'DM Sans', sans-serif !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    padding: 10px 16px !important;
    margin-bottom: 4px !important;
    border-radius: 4px !important;
    text-decoration: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
    text-align: left !important;
    transition: background-color 0.25s ease, color 0.25s ease !important;
}

.menu-link .arrow {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    border: none !important;
    box-shadow: none !important;
    opacity: 0 !important;
    transform: translateX(-8px) !important;
    transition: opacity 0.3s cubic-bezier(0.25, 1, 0.5, 1), transform 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
}

.menu-link:hover,
.menu-link:focus,
.menu-link:active {
    background-color: #E3001D !important;
    color: #FFFFFF !important;
    text-decoration: none !important;
    border-bottom: none !important;
}

.menu-link:hover .arrow,
.menu-link:focus .arrow,
.menu-link:active .arrow {
    opacity: 1 !important;
    transform: translateX(4px) !important;
    text-decoration: none !important;
    border-bottom: none !important;
}

/* Video Overlay Backdrop Dark Focus Overlay on Menu Hover */
.video-overlay::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: rgba(9, 14, 26, 0.65) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.4s ease !important;
    z-index: 5 !important;
}

.video-overlay.menu-active::before {
    opacity: 1 !important;
}

.scroll-video.overflow-visible-active {
    overflow: visible !important;
}

/* Bottom layout container */
.video-controls-bottom {
    position: absolute !important;
    bottom: 40px !important;
    left: 0 !important;
    width: 100% !important;
    padding: 0 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    box-sizing: border-box !important;
    z-index: 110 !important;
}

@media (min-width: 1024px) {
    .video-controls-bottom {
        opacity: 0 !important;
        pointer-events: none !important;
        transition: opacity 0.6s cubic-bezier(0.25, 1, 0.5, 1) !important;
    }

    .video-controls-bottom.visible {
        opacity: 1 !important;
        pointer-events: auto !important;
    }
}

/* Progress Bar Indicators */
.industries-progress-container {
    position: absolute !important;
    bottom: 14px !important;
    left: 32px !important;
    right: 32px !important;
    width: calc(100% - 64px) !important;
    display: flex !important;
    gap: 8px !important;
    height: 24px !important;
    z-index: 101 !important;
}

.progress-bar-segment {
    flex: 1 !important;
    height: 100% !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    box-sizing: border-box !important;
    background-clip: content-box !important;
    background-color: rgba(255, 255, 255, 0.25) !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    display: block !important;
    position: relative !important;
}

.progress-fill {
    width: 0%;
    height: 100% !important;
    background-color: #FFFFFF !important;
    border-radius: 10px !important;
    transition: none !important;
    display: block !important;
    pointer-events: none !important;
}

@media (max-width: 1024px) {
    .industries-progress-container {
        left: 16px !important;
        right: 156px !important;
        width: auto !important;
        bottom: 15px !important;
        height: 24px !important;
    }

    .progress-bar-segment {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }
}

@media (max-width: 767px) {
    .industries-progress-container {
        left: 12px !important;
        right: 148px !important;
        width: auto !important;
        bottom: 15px !important;
        height: 24px !important;
    }

    .progress-bar-segment {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }
}

@media (max-width: 420px) {
    .industries-progress-container {
        left: 8px !important;
        right: 126px !important;
        bottom: 12px !important;
        height: 22px !important;
        gap: 5px !important;
    }

    .progress-bar-segment {
        padding-top: 9px !important;
        padding-bottom: 9px !important;
    }
}

/* Alignment & Bottom Sheet adjustments on mobile (<=1024px) */
@media (max-width: 1024px) {
    .video-controls-bottom {
        bottom: 12px !important;
        padding: 0 16px !important;
        z-index: 100 !important;
    }

    .more-industries-btn-container {
        position: absolute !important;
        bottom: 0 !important;
        right: 16px !important;
        width: 124px !important;
        height: 30px !important;
        border: 1px solid rgba(255, 255, 255, 0.5) !important;
        border-radius: 4px !important;
        background-color: rgba(15, 23, 42, 0.85) !important;
        z-index: 30 !important;
        opacity: 1 !important;
        transition: opacity 0.3s ease !important;
    }

    .more-industries-btn-container.btn-hidden {
        opacity: 0 !important;
        pointer-events: none !important;
    }

    .more-industries-btn-container .btn-text {
        font-size: 11px !important;
        font-weight: 600 !important;
        opacity: 1 !important;
        white-space: nowrap !important;
    }

    /* Mobile Full-Page Backdrop Overlay */
    .more-industries-backdrop {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        background-color: rgba(0, 0, 0, 0.75) !important;
        backdrop-filter: blur(4px) !important;
        -webkit-backdrop-filter: blur(4px) !important;
        z-index: 999998 !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transition: opacity 0.35s ease, visibility 0.35s ease !important;
        pointer-events: auto !important;
    }

    html.more-industries-open,
    body.more-industries-open {
        overflow: hidden !important;
        height: 100vh !important;
        touch-action: none !important;
    }

    body.more-industries-open .more-industries-backdrop {
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* Mobile Bottom Sheet Dropdown */
    .more-industries-dropdown {
        position: fixed !important;
        left: 0 !important;
        bottom: 0 !important;
        top: auto !important;
        width: 100vw !important;
        max-width: 100vw !important;
        height: auto !important;
        max-height: 80vh !important;
        background-color: #0F172A !important;
        border-top-left-radius: 20px !important;
        border-top-right-radius: 20px !important;
        padding: 16px 16px 28px 16px !important;
        box-sizing: border-box !important;
        z-index: 999999 !important;
        box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.85) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        touch-action: pan-y !important;
        overscroll-behavior: contain !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transform: translateY(100%) !important;
        transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease, visibility 0.35s ease !important;
    }

    .more-industries-dropdown.mobile-open {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: translateY(0%) !important;
    }

    .more-industries-dropdown.mobile-open .dropdown-grid {
        opacity: 1 !important;
    }

    .dropdown-sheet-header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding-bottom: 12px !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
        margin-bottom: 12px !important;
    }

    .dropdown-sheet-title {
        color: #FFFFFF !important;
        font-family: 'DM Sans', sans-serif !important;
        font-size: 16px !important;
        font-weight: 700 !important;
    }

    .dropdown-close-btn {
        background: none !important;
        border: none !important;
        color: #FFFFFF !important;
        font-size: 26px !important;
        line-height: 1 !important;
        cursor: pointer !important;
        padding: 2px 8px !important;
    }

    .dropdown-grid {
        display: flex !important;
        flex-direction: row !important;
        gap: 8px !important;
        width: 100% !important;
    }

    .dropdown-column {
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 4px !important;
    }

    .menu-link {
        font-size: 12px !important;
        padding: 8px 10px !important;
        border-radius: 6px !important;
        background-color: rgba(255, 255, 255, 0.06) !important;
        text-decoration: none !important;
        margin-bottom: 2px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        color: #FFFFFF !important;
    }

    .menu-link .arrow {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-decoration: none !important;
        border: none !important;
        opacity: 1 !important;
        transform: none !important;
        transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
        font-size: 18px !important;
        font-weight: 700 !important;
        line-height: 1 !important;
    }

    .menu-link:hover,
    .menu-link:active {
        background-color: #E3001D !important;
        text-decoration: none !important;
    }

    .menu-link:hover .arrow,
    .menu-link:active .arrow {
        transform: translateX(4px) !important;
        text-decoration: none !important;
    }
}

@media (max-width: 420px) {
    .video-controls-bottom {
        bottom: 9px !important;
        padding: 0 8px !important;
    }

    .more-industries-btn-container {
        right: 8px !important;
        width: 110px !important;
        height: 28px !important;
    }

    .more-industries-btn-container .btn-text {
        font-size: 10.5px !important;
    }
}

@media (max-width: 360px) {
    .menu-link {
        font-size: 11px !important;
        padding: 7px 6px !important;
    }

    .menu-link .arrow {
        font-size: 15px !important;
    }
}

/* Responsive heading font overrides */
@media (max-width: 1024px) {
    .industries.video-industries h2 .covered-grace-font,
    .industries.video-industries .animated-text .covered-grace-font {
        font-size: 56px !important;
        line-height: 64px !important;
    }
}

@media (max-width: 767px) {
    .industries.video-industries h2 .covered-grace-font,
    .industries.video-industries .animated-text .covered-grace-font {
        font-size: 44px !important;
        line-height: 50px !important;
    }
}

@media (max-width: 420px) {
    .industries.video-industries h2 .covered-grace-font,
    .industries.video-industries .animated-text .covered-grace-font {
        font-size: 36px !important;
        line-height: 42px !important;
    }
}