#fw-section-custom-html-cd702f00-dd9e-4dd9-aef2-a41a082c0307 {

/* ========================================
   EASILY CHANGEABLE VIDEO BANNER VALUES
   ======================================== */

.page-element.video-signup-banner {
    /* === LAYOUT === */
    --banner-height-desktop: 55vh;
    --banner-height-mobile: 35vh;
    --banner-max-width: 1400px;
    --content-max-width: 800px;
    
    /* === COLORS === */
    --overlay-background: rgba(0, 0, 0, 0.5);
    --overlay-hover-background: rgba(0, 0, 0, 0.3);
    --heading-color: #ffffff;
    --text-color: #ffffff;
    --input-background: rgba(0, 0, 0, 0.25);
    --input-text-color: #ffffff;
    --input-placeholder-color: #666666;
    --button-bg: #ff00ff;
    --button-bg-hover: #ff33ff;
    --button-text-color: #ffffff;
    
    /* === TYPOGRAPHY === */
    --heading-size-desktop: 3.5rem;
    --heading-size-mobile: 2rem;
    --text-size-desktop: 1.25rem;
    --text-size-mobile: 1rem;
    --heading-weight: 700;
    --text-weight: 400;
    
    /* === SPACING === */
    --content-padding-desktop: 4rem;
    --content-padding-mobile: 2rem;
    --element-gap-desktop: 2rem;
    --element-gap-mobile: 1.5rem;
    --form-gap: 1rem;
    
    /* === BORDER RADIUS === */
    --video-radius: 18px;
    --input-radius: 16px;
    --button-radius: 100px;
    
    /* === ANIMATION === */
    --fade-duration: 0.8s;
    --hover-transition: 0.3s;
}

/* ========================================
   VIDEO BANNER STRUCTURE
   ======================================== */

.video-signup-banner {
    width: 100vw;
    max-width: none;
    margin: 0;
    position: relative;
    overflow: hidden;
    border-radius: 0;
    height: var(--banner-height-desktop);
}

.signup-banner__container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.signup-banner__video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
    z-index: 1;
}

/* ========================================
   OVERLAY AND CONTENT
   ======================================== */

.signup-banner__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    border-radius: 0;
    transition: background var(--hover-transition) ease;
}

/* Show overlay only on hover */
.video-signup-banner:hover .signup-banner__overlay {
    background: var(--overlay-background);
}

/* Hide content by default, show on hover */
.signup-banner__content {
    opacity: 0;
    transform: translateY(20px);
    transition: all var(--hover-transition) ease;
}

.video-signup-banner:hover .signup-banner__content {
    opacity: 1;
    transform: translateY(0);
}

.signup-banner__content {
    max-width: var(--content-max-width);
    width: 100%;
    padding: var(--content-padding-desktop);
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: var(--element-gap-desktop);
    z-index: 3;
    align-items: center;
    justify-content: center;
}

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

.signup-banner__heading {
    font-size: var(--heading-size-desktop);
    font-weight: var(--heading-weight);
    color: var(--heading-color);
    line-height: 1.2;
    margin: 0;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
}

.signup-banner__description {
    font-size: var(--text-size-desktop);
    font-weight: var(--text-weight);
    color: var(--text-color);
    line-height: 1.5;
    margin: 0;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
}

/* ========================================
   CALL-TO-ACTION BUTTON
   ======================================== */

.signup-banner__button-container {
    width: 50%;
    display: flex;
    justify-content: center;
}

.signup-banner__button-container .cta-button {
    background: var(--button-bg) !important;
    color: var(--button-text-color) !important;
    border: none !important;
    border-radius: var(--button-radius) !important;
    padding: 1rem 2.5rem !important;
    font-size: var(--text-size-desktop) !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all var(--hover-transition) ease !important;
    text-decoration: none !important;
    display: inline-block !important;
    text-align: center !important;
    min-width: 200px !important;
}

.signup-banner__button-container .cta-button:hover {
    background: var(--button-bg-hover) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 0, 255, 0.4);
}

.signup-banner__button-container .cta-button:active {
    transform: translateY(0);
}

.signup-banner__button-container .cta-button:focus {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

/* ========================================
   CDL CHAMPS FORM INTEGRATION
   ======================================== */

.cod-champs-form-container {
    width: 100%;
    margin-top: 1rem;
}

.cod-champs-announcement .newsletter-form {
    width: 100%;
    max-width: 100%;
}

.cod-champs-announcement .newsletter-form__input-button-container {
    display: flex;
    gap: var(--form-gap);
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
}

.cod-champs-announcement .newsletter-form__input {
    flex: 1;
    min-width: 250px;
}

.cod-champs-announcement .input-field__input {
    background: rgba(255, 255, 255, 0.95) !important;
    color: #000000 !important;
    border: 1px solid #cccccc !important;
    border-radius: var(--input-radius) !important;
    padding: 1rem 1.5rem !important;
    font-size: var(--text-size-desktop) !important;
    width: 100% !important;
    transition: box-shadow var(--hover-transition) ease, border-color var(--hover-transition) ease !important;
    line-height: 1.4 !important;
    vertical-align: top !important;
    text-align: left !important;
    box-sizing: border-box !important;
}

.cod-champs-announcement .input-field__input:focus {
    box-shadow: 0 4px 15px rgba(255, 0, 255, 0.3) !important;
    outline: none !important;
    border-color: var(--button-bg) !important;
    line-height: 1.4 !important;
    vertical-align: top !important;
    text-align: left !important;
    padding: 1rem 1.5rem !important;
}


.cod-champs-announcement .input-field__input::placeholder {
    color: #666666 !important;
}

.cod-champs-announcement .newsletter-form__button {
    flex-shrink: 0;
}

.cod-champs-announcement .button--primary {
    background: var(--button-bg) !important;
    color: var(--button-text-color) !important;
    border: none !important;
    border-radius: var(--button-radius) !important;
    padding: 1rem 2.5rem !important;
    font-size: var(--text-size-desktop) !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all var(--hover-transition) ease !important;
    text-decoration: none !important;
    display: inline-block !important;
    text-align: center !important;
    min-width: 180px !important;
}

.cod-champs-announcement .button--primary:hover {
    background: var(--button-bg-hover) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 0, 255, 0.4);
}

.cod-champs-announcement .button--primary:active {
    transform: translateY(0);
}

.cod-champs-announcement .button--primary:focus {
    outline: 2px solid var(--button-bg);
    outline-offset: 2px;
}

/* Loading state overrides for CDL Champs form */
.cod-champs-announcement .button--loading {
    cursor: not-allowed !important;
    opacity: 0.7 !important;
    pointer-events: none !important;
    transform: none !important;
    box-shadow: none !important;
}

.cod-champs-announcement .button--loading:hover {
    transform: none !important;
    box-shadow: none !important;
    background: var(--button-bg) !important;
}

/* Form responses */
.cod-champs-announcement .form__response-container {
    margin-top: 1rem;
}

.cod-champs-announcement .alert {
    background: rgba(255, 255, 255, 0.95) !important;
    border-radius: var(--input-radius) !important;
    padding: 1rem !important;
    margin: 0.5rem 0 !important;
}

.cod-champs-announcement .alert--success {
    color: #155724 !important;
    border: 1px solid #c3e6cb !important;
}

.cod-champs-announcement .alert--error {
    color: #721c24 !important;
    border: 1px solid #f5c6cb !important;
}

.cod-champs-announcement .form__error {
    color: #ff6b6b !important;
    background: rgba(255, 255, 255, 0.9) !important;
    padding: 0.5rem !important;
    border-radius: var(--input-radius) !important;
    margin-top: 0.5rem !important;
    font-size: 0.875rem !important;
}

.video-signup-banner .newsletter-form {
    width: 100%;
    max-width: 100%;
}

.video-signup-banner .newsletter-form__input-button-container {
    display: flex;
    gap: var(--form-gap);
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
}

.video-signup-banner .newsletter-form__input {
    flex: 1;
    min-width: 250px;
}

.video-signup-banner .input-field__input {
    background: var(--input-background) !important;
    color: var(--input-text-color) !important;
    border: none !important;
    border-radius: var(--input-radius) !important;
    padding: 1rem 1.5rem !important;
    font-size: var(--text-size-desktop) !important;
    width: 100% !important;
    transition: all var(--hover-transition) ease !important;
}

.video-signup-banner .input-field__input:focus {
    box-shadow: 0 4px 15px rgba(255, 0, 255, 0.3) !important;
    outline: none !important;
}

.video-signup-banner .input-field__input::placeholder {
    color: var(--input-placeholder-color) !important;
}

.video-signup-banner .newsletter-form__button {
    flex-shrink: 0;
}

.video-signup-banner .button--primary {
    background: var(--button-bg) !important;
    color: var(--button-text-color) !important;
    border: none !important;
    border-radius: var(--button-radius) !important;
    padding: 1rem 2.5rem !important;
    font-size: var(--text-size-desktop) !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all var(--hover-transition) ease !important;
    min-width: 120px !important;
}

.video-signup-banner .button--primary:hover {
    background: var(--button-bg-hover) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 0, 255, 0.4);
}

.video-signup-banner .button--primary:active {
    transform: translateY(0);
}

/* ========================================
   BUTTON LOADING STATES
   ======================================== */

.button--loading {
    cursor: not-allowed !important;
    opacity: 0.7 !important;
    pointer-events: none !important;
}

.button--loading:hover {
    transform: none !important;
    box-shadow: none !important;
}

.button__spinner {
    display: none;
    margin-left: 0.5rem;
    vertical-align: middle;
}

.spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid transparent;
    border-top: 2px solid currentColor;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.spinner--small {
    width: 14px;
    height: 14px;
    border-width: 1.5px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ========================================
   FORM RESPONSES AND ALERTS
   ======================================== */

.video-signup-banner .form__response-container {
    margin-top: 1rem;
}

.video-signup-banner .alert {
    background: rgba(255, 255, 255, 0.95) !important;
    border-radius: var(--input-radius) !important;
    padding: 1rem !important;
    margin: 0.5rem 0 !important;
}

.video-signup-banner .alert--success {
    color: #155724 !important;
    border: 1px solid #c3e6cb !important;
}

.video-signup-banner .alert--error {
    color: #721c24 !important;
    border: 1px solid #f5c6cb !important;
}

.video-signup-banner .form__error {
    color: #ff6b6b !important;
    background: rgba(255, 255, 255, 0.9) !important;
    padding: 0.5rem !important;
    border-radius: var(--input-radius) !important;
    margin-top: 0.5rem !important;
    font-size: 0.875rem !important;
}

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

/* Only desktop (above 768px) and mobile (768px and below) breakpoints */

@media (max-width: 768px) {
    .video-signup-banner {
        /* Mobile: Use fixed height instead of aspect ratio */
        width: 100%;
        margin: 0;
        height: var(--banner-height-mobile);
    }
    
    .signup-banner__container {
        width: 100%;
        height: 100%;
    }
    
    .signup-banner__video {
        object-fit: cover;
        object-position: center center;
    }
    
    .signup-banner__content {
        padding: var(--content-padding-mobile);
        gap: var(--element-gap-mobile);
        max-width: 100%;
        text-align: center;
        align-items: center;
    }
    
    .signup-banner__heading {
        font-size: var(--heading-size-mobile) !important;
        text-align: center;
        line-height: 1.2;
        /* Change from h1 to h2 styling on mobile */
        font-weight: 600 !important;
        letter-spacing: 0.025em !important;
    }
    
    .signup-banner__description {
        font-size: var(--text-size-mobile) !important;
        text-align: center;
        line-height: 1.4;
    }
    
    .video-signup-banner .newsletter-form__input-button-container {
        flex-direction: column;
        width: 100%;
        align-items: center;
    }
    
    .video-signup-banner .newsletter-form__input {
        min-width: 100%;
        width: 100%;
    }
    
    .video-signup-banner .input-field__input {
        font-size: var(--text-size-mobile) !important;
        padding: 1rem 1.25rem !important;
    }
    
    .signup-banner__button-container .cta-button {
        width: 100% !important;
        padding: 1.25rem 2rem !important;
        font-size: var(--text-size-mobile) !important;
    }
    
    /* Mobile: Always show overlay on mobile (touch devices) */
    .signup-banner__overlay {
        background: var(--overlay-background);
    }
    
    .signup-banner__content {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========================================
   ACCESSIBILITY
   ======================================== */

@media (prefers-reduced-motion: reduce) {
    .video-signup-banner .button--primary,
    .video-signup-banner .input-field__input,
    .signup-banner__overlay {
        transition: none !important;
    }
    
    .video-signup-banner .button--primary:hover {
        transform: none !important;
    }
    
    .video-signup-banner .input-field__input:focus {
        transform: none !important;
    }
}

/* Focus styles for accessibility */
.video-signup-banner .input-field__input:focus-visible {
    outline: 2px solid var(--button-bg) !important;
    outline-offset: 2px !important;
}

.video-signup-banner .button--primary:focus-visible {
    outline: 2px solid #ffffff !important;
    outline-offset: 2px !important;
}
}
#fw-section-custom-html-24e69ca9-248b-4377-a7b8-2f1e4b0383ad {

/* ========================================
   EASILY CHANGEABLE CDL CHAMPS VALUES
   ======================================== */

.page-element.cod-champs-announcement {
    /* === LAYOUT === */
    --container-max-width: 1200px;
    --column-gap-desktop: 4rem;
    --column-gap-mobile: 2rem;
    --section-padding-desktop: 0;
    --section-padding-mobile: 0;
    
    /* === TYPOGRAPHY === */
    --heading-size-desktop: 2.5rem;
    --heading-size-tablet: 2rem;
    --heading-size-mobile: 1.75rem;
    --text-size-desktop: 1rem;
    --text-size-mobile: 0.9rem;
    --heading-weight: 700;
    --text-weight: 400;
    --line-height: 1.6;
    
    /* === COLORS === */
    --heading-color: #ffffff;
    --text-color: #cccccc;
    --button-bg: #ff00ff;
    --button-bg-hover: #ff33ff;
    --button-text-color: #ffffff;
    
    /* === SPACING === */
    --text-content-gap: 1.5rem;
    --paragraph-spacing: 1rem;
    
    /* === BORDER RADIUS === */
    --image-radius: 18px;
    --button-radius: 100px;
    
    /* === ANIMATION === */
    --fade-duration: 0.8s;
    --hover-transition: 0.3s;
}

/* ========================================
   MAIN STRUCTURE
   ======================================== */

.cod-champs-announcement {
    width: 100%;
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: var(--section-padding-desktop) 2rem;
    background: #000000;
    position: relative;
}

.cod-champs-announcement .grid {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    gap: 0;
}

.cod-champs-announcement .grid--middle {
    align-items: center;
}

.cod-champs-announcement .grid__column {
    width: 100%;
    padding: 0 1rem;
    box-sizing: border-box;
}

@media screen and (min-width: 640px) {
    .cod-champs-announcement .grid__column--6\@md {
        width: 50%;
    }
    
    .cod-champs-announcement .grid__column {
        padding: 0 calc(var(--column-gap-desktop) / 2);
    }
    
    .cod-champs-announcement .grid__column:first-child {
        padding: 0 0.5rem;
    }
}

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

.cod-champs-announcement .image-with-text__image-container {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.cod-champs-announcement .image-with-text__image {
    width: 100%;
    height: auto;
    max-width: 700px;
    border-radius: var(--image-radius);
    transition: transform var(--hover-transition) ease;
}

.cod-champs-announcement .image-with-text__image:hover {
    transform: scale(1.02);
}

/* ========================================
   TEXT CONTENT COLUMN
   ======================================== */

.cod-champs-announcement .image-with-text__content {
    width: 100%;
    display: flex;
    align-items: center;
}

.cod-champs-announcement .text-content-box {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--text-content-gap);
}

.cod-champs-announcement .text-content-box h2 {
    font-size: var(--heading-size-desktop);
    font-weight: var(--heading-weight);
    color: var(--heading-color);
    line-height: 1.2;
    margin: 0;
}

.cod-champs-announcement .text-content-box p {
    font-size: var(--text-size-desktop);
    font-weight: var(--text-weight);
    color: var(--text-color);
    line-height: var(--line-height);
    margin: 0 0 var(--paragraph-spacing) 0;
}

.cod-champs-announcement .text-content-box p:last-of-type {
    margin-bottom: 0;
}

/* ========================================
   CALL-TO-ACTION BUTTON
   ======================================== */

.cod-champs-announcement .cta-button {
    background: var(--button-bg) !important;
    color: var(--button-text-color) !important;
    border: none !important;
    border-radius: var(--button-radius) !important;
    padding: 1rem 2.5rem !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all var(--hover-transition) ease !important;
    text-decoration: none !important;
    display: inline-block !important;
    text-align: center !important;
    min-width: 200px !important;
    align-self: flex-start !important;
}

.cod-champs-announcement .cta-button:hover {
    background: var(--button-bg-hover) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 0, 255, 0.4);
}

.cod-champs-announcement .cta-button:active {
    transform: translateY(0);
}

.cod-champs-announcement .cta-button:focus {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

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

@media (max-width: 639px) {
    .cod-champs-announcement {
        padding: var(--section-padding-mobile) 1rem;
    }
    
    .cod-champs-announcement .grid__column {
        padding: 0 0.5rem;
        margin-bottom: var(--column-gap-mobile);
        text-align: center;
    }
    
    .cod-champs-announcement .grid__column:last-child {
        margin-bottom: 0;
    }
    
    .cod-champs-announcement .text-content-box h2 {
        font-size: var(--heading-size-mobile);
    }
    
    .cod-champs-announcement .text-content-box p {
        font-size: var(--text-size-mobile);
    }
    
    .cod-champs-announcement .newsletter-form__input-button-container {
        flex-direction: column;
        width: 100%;
        align-items: center;
    }
    
    .cod-champs-announcement .newsletter-form__input {
        min-width: 100%;
        width: 100%;
    }
    
    .cod-champs-announcement .input-field__input {
        font-size: var(--text-size-mobile) !important;
        padding: 1rem 1.25rem !important;
        line-height: 1.4 !important;
        vertical-align: top !important;
        text-align: left !important;
    }
    
    .cod-champs-announcement .button--primary {
        width: 100% !important;
        padding: 1.25rem 2rem !important;
        font-size: var(--text-size-mobile) !important;
    }
}

/* ========================================
   FADE-IN ANIMATIONS
   ======================================== */

/* Base state for fade-in elements */
.cod-champs-announcement .fade-up-stagger {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Prevent fade animations from affecting form inputs */
.cod-champs-announcement .fade-up-stagger .input-field__input,
.cod-champs-announcement .fade-up-stagger .input-field,
.cod-champs-announcement .fade-up-stagger .input-field__floating-label {
    transition: none !important;
}

/* Stagger delays */
.cod-champs-announcement .delay-1 {
    transition-delay: 150ms;
}

.cod-champs-announcement .delay-2 {
    transition-delay: 300ms;
}

.cod-champs-announcement .delay-3 {
    transition-delay: 450ms;
}

.cod-champs-announcement .delay-4 {
    transition-delay: 600ms;
}

/* Active state when section is visible */
.cod-champs-announcement.fade-blur-section.active .fade-up-stagger,
.cod-champs-announcement .fade-up-stagger.active {
    opacity: 1;
    transform: translateY(0);
}

/* Section container remains visible */
.cod-champs-announcement.fade-blur-section {
    opacity: 1;
}

/* JavaScript will add 'active' class when elements enter viewport */

/* ========================================
   ACCESSIBILITY
   ======================================== */

@media (prefers-reduced-motion: reduce) {
    .cod-champs-announcement .image-with-text__image,
    .cod-champs-announcement .cta-button,
    .cod-champs-announcement .fade-up-stagger {
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
    
    .cod-champs-announcement .image-with-text__image:hover,
    .cod-champs-announcement .cta-button:hover {
        transform: none !important;
    }
}

/* ========================================
   FORM INPUT FIX
   ======================================== */

.cod-champs-announcement .input-field__floating-label {
    display: none !important;
    position: absolute !important;
    pointer-events: none !important;
}


/* Desktop-specific fix for input positioning */
@media (min-width: 769px) {
    .cod-champs-announcement .input-field__input {
        transition: none !important;
        transform: none !important;
        line-height: 1.4 !important;
        vertical-align: top !important;
        text-align: left !important;
        box-sizing: border-box !important;
    }
    
    .cod-champs-announcement .input-field__input:focus {
        transition: none !important;
        transform: none !important;
        line-height: 1.4 !important;
        vertical-align: top !important;
        text-align: left !important;
        padding: 1rem 1.5rem !important;
    }
    
    /* Prevent autofill gray background */
    .cod-champs-announcement .input-field__input:-webkit-autofill,
    .cod-champs-announcement .input-field__input:-webkit-autofill:hover,
    .cod-champs-announcement .input-field__input:-webkit-autofill:focus,
    .cod-champs-announcement .input-field__input:-webkit-autofill:active {
        -webkit-box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.25) inset !important;
        -webkit-text-fill-color: #ffffff !important;
        background-color: rgba(0, 0, 0, 0.25) !important;
        background-image: none !important;
        background: rgba(0, 0, 0, 0.25) !important;
        color: #ffffff !important;
        transition: background-color 5000s ease-in-out 0s !important;
    }
    
    .cod-champs-announcement .input-field__floating-label {
        display: none !important;
    }
}
}

#fw-section-custom-html-01a01584-17c6-4df8-80d2-6c02cb89bcd0 {

/* ========================================
   BATTLE BEAVER PARTNER CARD - EASILY CHANGEABLE VALUES
   Change these numbers to customize the Battle Beaver partner card!
   ======================================== */

.partner-element.battle-beaver {
    /* === COLORS === */
    --bb-card-bg: #000000;                          /* Partner card background color (black) */
    --bb-video-border-radius: 12px;                 /* Rounded corners on video (12px) */
    --bb-overlay-gradient-start: transparent;       /* Overlay gradient starting color (fully transparent) */
    --bb-overlay-gradient-end: rgba(0,0,0,0.8);     /* Overlay gradient ending color (dark semi-transparent) */
    --bb-text-color: #ffffff;                       /* Main text color (white) */
    --bb-highlight-color: #ff00ff;                  /* Highlighted text color (magenta/pink) */
    --bb-highlight-glow: rgba(255, 0, 255, 0.6);    /* Glow effect around highlighted text (magenta with transparency) */

    /* === SIZES === */
    --bb-card-width: 100vw;                         /* Card width (full viewport width) */
    --bb-card-height: calc(100vw * 9 / 16);         /* Card height (maintains 16:9 aspect ratio) */
    --bb-min-height-desktop: 160px;                 /* Minimum card height on desktop */
    --bb-min-height-tablet: 140px;                  /* Minimum card height on tablets (140px) */
    --bb-min-height-mobile: 120px;                  /* Minimum card height on phones (120px) */

    /* === SPACING === */
    --bb-card-margin: 0.5rem 0;                     /* Space above and below card (8px top/bottom, 0 sides) */
    --bb-overlay-height: calc((100vw * 9 / 16) * 0.4);  /* Height of text overlay (40% of card height) */
    --bb-overlay-padding-vertical: calc((100vw * 9 / 16) * 0.04);  /* Space above and below overlay text (4% of card height) */
    --bb-overlay-padding-horizontal: clamp(1rem, 3vw, 2rem);  /* Space on sides of overlay text (16-32px, responsive) */

    /* === TEXT STYLING === */
    --bb-text-size: clamp(1rem, calc((100vw * 9 / 16) * 0.06), 2.2rem);  /* Text size (16px to 35.2px, responsive) */
    --bb-text-weight: 600;                          /* Regular text thickness (semi-bold) */
    --bb-text-weight-highlight: 700;                /* Highlighted text thickness (bold) */
    --bb-text-letter-spacing: clamp(1px, 0.3vw, 3px);  /* Space between letters (1-3px, responsive) */
    --bb-text-line-height: 1.2;                     /* Space between lines of text */
    --bb-text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);  /* Shadow behind text for readability */
    --bb-highlight-glow-effect: 0 0 8px rgba(255, 0, 255, 0.6);  /* Glow effect for highlighted text */

    /* === ANIMATION & EFFECTS === */
    --bb-overlay-transition-duration: 0.3s;         /* How long hover animation takes (0.3 seconds) */
    --bb-overlay-transition-timing: ease;           /* Animation smoothness style */
    --bb-overlay-initial-opacity: 0;                /* Overlay visibility before hover (invisible) */
    --bb-overlay-hover-opacity: 1;                  /* Overlay visibility on hover (fully visible) */
    --bb-overlay-initial-transform: translateY(calc((100vw * 9 / 16) * 0.08));  /* Overlay starting position (moved down 8%) */
    --bb-overlay-hover-transform: translateY(0);    /* Overlay position on hover (normal position) */

    /* ========================================
       BATTLE BEAVER PARTNER CARD STYLES
       (Uses the values defined above)
       ======================================== */

    /* Main partner card container */
    width: var(--bb-card-width) !important;
    max-width: 100% !important;
    height: var(--bb-card-height) !important;
    position: relative !important;
    overflow: hidden !important;
    margin: var(--bb-card-margin) !important;
    min-height: var(--bb-min-height-desktop) !important;
    border-radius: var(--bb-video-border-radius) !important;
    background: var(--bb-card-bg) !important;
}

/* Video background element */
.partner-element.battle-beaver .partner__video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    transform: translateZ(0) !important;
    will-change: transform !important;
    border-radius: var(--bb-video-border-radius) !important;
    display: block !important;
}

/* Loading state - Shows logo on poster before video loads */
.partner-element.battle-beaver::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40%;
    height: 40%;
    background-image: url('https://f004.backblazeb2.com/file/fw-website-assets/Assets/Partners/Logos/battle-beaver-logo.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.8;
    z-index: 1;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

/* Hide logo once video starts playing */
.partner-element.battle-beaver .partner__video[data-loaded="true"] ~ ::before {
    opacity: 0;
}

/* Text overlay container (appears on hover) */
.partner-element.battle-beaver .partner__text-overlay {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: var(--bb-overlay-height) !important;
    background: linear-gradient(var(--bb-overlay-gradient-start), var(--bb-overlay-gradient-end)) !important;
    padding: var(--bb-overlay-padding-vertical) var(--bb-overlay-padding-horizontal) !important;
    opacity: var(--bb-overlay-initial-opacity) !important;
    transform: var(--bb-overlay-initial-transform) !important;
    transition: all var(--bb-overlay-transition-duration) var(--bb-overlay-transition-timing) !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
    z-index: 3 !important;
}

/* Text overlay on hover - slides up and becomes visible */
.partner-element.battle-beaver:hover .partner__text-overlay {
    opacity: var(--bb-overlay-hover-opacity) !important;
    transform: var(--bb-overlay-hover-transform) !important;
}

/* Text content styling */
.partner-element.battle-beaver .partner__text {
    color: var(--bb-text-color) !important;
    font-size: var(--bb-text-size) !important;
    font-weight: var(--bb-text-weight) !important;
    text-align: center !important;
    letter-spacing: var(--bb-text-letter-spacing) !important;
    text-transform: uppercase !important;
    margin: 0 !important;
    line-height: var(--bb-text-line-height) !important;
    text-shadow: var(--bb-text-shadow) !important;
}

/* Primary text color (white) */
.partner-element.battle-beaver .text-primary {
    color: var(--bb-text-color) !important;
}

/* Highlighted text (magenta with glow effect) */
.partner-element.battle-beaver .text-highlight {
    color: var(--bb-highlight-color) !important;
    text-shadow: var(--bb-highlight-glow-effect) !important;
    font-weight: var(--bb-text-weight-highlight) !important;
}

/* Mobile Responsive - Tablets (768px and below) */
@media (max-width: 768px) {
    .partner-element.battle-beaver {
        min-height: var(--bb-min-height-tablet) !important;
    }
}

/* Mobile Responsive - Phones (480px and below) */
@media (max-width: 480px) {
    .partner-element.battle-beaver {
        min-height: var(--bb-min-height-mobile) !important;
    }
}
}
#fw-section-custom-html-996802ee-6b6a-47ce-96de-226024755c8c {

/* ========================================
   MONSTER ENERGY PARTNER CARD - EASILY CHANGEABLE VALUES
   Change these numbers to customize the Monster Energy partner card!
   ======================================== */

/* Main partner card container */
.partner-element.monster-energy {
    /* === COLORS === */
    --me-card-bg: #000000;                          /* Partner card background color (black) */
    --me-video-border-radius: 12px;                 /* Rounded corners on video (12px) */
    --me-overlay-gradient-start: transparent;       /* Overlay gradient starting color (fully transparent) */
    --me-overlay-gradient-end: rgba(0,0,0,0.8);     /* Overlay gradient ending color (dark semi-transparent) */
    --me-text-color: #ffffff;                       /* Main text color (white) */
    --me-highlight-color: #ff00ff;                  /* Highlighted text color (magenta/pink) */
    --me-highlight-glow: rgba(255, 0, 255, 0.6);    /* Glow effect around highlighted text (magenta with transparency) */

    /* === SIZES === */
    --me-card-width: 100vw;                         /* Card width (full viewport width) */
    --me-card-height: calc(100vw * 9 / 16);         /* Card height (maintains 16:9 aspect ratio) */
    --me-min-height-desktop: 160px;                 /* Minimum card height on desktop */
    --me-min-height-tablet: 140px;                  /* Minimum card height on tablets (140px) */
    --me-min-height-mobile: 120px;                  /* Minimum card height on phones (120px) */

    /* === SPACING === */
    --me-card-margin: 0.5rem 0;                     /* Space above and below card (8px top/bottom, 0 sides) */
    --me-overlay-height: calc((100vw * 9 / 16) * 0.4);  /* Height of text overlay (40% of card height) */
    --me-overlay-padding-vertical: calc((100vw * 9 / 16) * 0.04);  /* Space above and below overlay text (4% of card height) */
    --me-overlay-padding-horizontal: clamp(1rem, 3vw, 2rem);  /* Space on sides of overlay text (16-32px, responsive) */

    /* === TEXT STYLING === */
    --me-text-size: clamp(1rem, calc((100vw * 9 / 16) * 0.06), 2.2rem);  /* Text size (16px to 35.2px, responsive) */
    --me-text-weight: 600;                          /* Regular text thickness (semi-bold) */
    --me-text-weight-highlight: 700;                /* Highlighted text thickness (bold) */
    --me-text-letter-spacing: clamp(1px, 0.3vw, 3px);  /* Space between letters (1-3px, responsive) */
    --me-text-line-height: 1.2;                     /* Space between lines of text */
    --me-text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);  /* Shadow behind text for readability */
    --me-highlight-glow-effect: 0 0 8px rgba(255, 0, 255, 0.6);  /* Glow effect for highlighted text */

    /* === ANIMATION & EFFECTS === */
    --me-overlay-transition-duration: 0.3s;         /* How long hover animation takes (0.3 seconds) */
    --me-overlay-transition-timing: ease;           /* Animation smoothness style */
    --me-overlay-initial-opacity: 0;                /* Overlay visibility before hover (invisible) */
    --me-overlay-hover-opacity: 1;                  /* Overlay visibility on hover (fully visible) */
    --me-overlay-initial-transform: translateY(calc((100vw * 9 / 16) * 0.08));  /* Overlay starting position (moved down 8%) */
    --me-overlay-hover-transform: translateY(0);    /* Overlay position on hover (normal position) */

    /* Main partner card container styles */
    width: var(--me-card-width) !important;
    max-width: 100% !important;
    height: var(--me-card-height) !important;
    position: relative !important;
    overflow: hidden !important;
    margin: var(--me-card-margin) !important;
    min-height: var(--me-min-height-desktop) !important;
    border-radius: var(--me-video-border-radius) !important;
    background: var(--me-card-bg) !important;
}

/* Video background element */
.partner-element.monster-energy .partner__video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    transform: translateZ(0) !important;
    will-change: transform !important;
    border-radius: var(--me-video-border-radius) !important;
    display: block !important;
}

/* Logo loading state (shows before video plays) */
.partner-element.monster-energy::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40%;
    height: 40%;
    background-image: url('https://f004.backblazeb2.com/file/fw-website-assets/Assets/Partners/Logos/monster-logo.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.8;
    z-index: 1;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

/* Hide logo once video starts playing */
.partner-element.monster-energy .partner__video[data-loaded="true"] ~ ::before {
    opacity: 0;
}

/* Text overlay container (appears on hover) */
.partner-element.monster-energy .partner__text-overlay {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: var(--me-overlay-height) !important;
    background: linear-gradient(var(--me-overlay-gradient-start), var(--me-overlay-gradient-end)) !important;
    padding: var(--me-overlay-padding-vertical) var(--me-overlay-padding-horizontal) !important;
    opacity: var(--me-overlay-initial-opacity) !important;
    transform: var(--me-overlay-initial-transform) !important;
    transition: all var(--me-overlay-transition-duration) var(--me-overlay-transition-timing) !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
    z-index: 3 !important;
}

/* Text overlay on hover - slides up and becomes visible */
.partner-element.monster-energy:hover .partner__text-overlay {
    opacity: var(--me-overlay-hover-opacity) !important;
    transform: var(--me-overlay-hover-transform) !important;
}

/* Text content styling */
.partner-element.monster-energy .partner__text {
    color: var(--me-text-color) !important;
    font-size: var(--me-text-size) !important;
    font-weight: var(--me-text-weight) !important;
    text-align: center !important;
    letter-spacing: var(--me-text-letter-spacing) !important;
    text-transform: uppercase !important;
    margin: 0 !important;
    line-height: var(--me-text-line-height) !important;
    text-shadow: var(--me-text-shadow) !important;
}

/* Primary text color (white) */
.partner-element.monster-energy .text-primary {
    color: var(--me-text-color) !important;
}

/* Highlighted text (magenta with glow effect) */
.partner-element.monster-energy .text-highlight {
    color: var(--me-highlight-color) !important;
    text-shadow: var(--me-highlight-glow-effect) !important;
    font-weight: var(--me-text-weight-highlight) !important;
}

/* Mobile Responsive - Tablets (768px and below) */
@media (max-width: 768px) {
    .partner-element.monster-energy {
        min-height: var(--me-min-height-tablet) !important;
    }
}

/* Mobile Responsive - Phones (480px and below) */
@media (max-width: 480px) {
    .partner-element.monster-energy {
        min-height: var(--me-min-height-mobile) !important;
    }
}
}
#fw-section-custom-html-02450cb9-e754-4650-8dfa-0650e7248db7 {

/* ========================================
   STEELSERIES PARTNER CARD - EASILY CHANGEABLE VALUES
   Change these numbers to customize the SteelSeries partner card!
   ======================================== */

/* Main partner card container */
.partner-element.steelseries {
    /* === COLORS === */
    --ss-card-bg: #000000;                          /* Partner card background color (black) */
    --ss-video-border-radius: 12px;                 /* Rounded corners on video (12px) */
    --ss-overlay-gradient-start: transparent;       /* Overlay gradient starting color (fully transparent) */
    --ss-overlay-gradient-end: rgba(0,0,0,0.8);     /* Overlay gradient ending color (dark semi-transparent) */
    --ss-text-color: #ffffff;                       /* Main text color (white) */
    --ss-highlight-color: #ff00ff;                  /* Highlighted text color (magenta/pink) */
    --ss-highlight-glow: rgba(255, 0, 255, 0.6);    /* Glow effect around highlighted text (magenta with transparency) */

    /* === SIZES === */
    --ss-card-width: 100vw;                         /* Card width (full viewport width) */
    --ss-card-height: calc(100vw * 9 / 16);         /* Card height (maintains 16:9 aspect ratio) */
    --ss-min-height-desktop: 160px;                 /* Minimum card height on desktop */
    --ss-min-height-tablet: 140px;                  /* Minimum card height on tablets (140px) */
    --ss-min-height-mobile: 120px;                  /* Minimum card height on phones (120px) */

    /* === SPACING === */
    --ss-card-margin: 0.5rem 0;                     /* Space above and below card (8px top/bottom, 0 sides) */
    --ss-overlay-height: calc((100vw * 9 / 16) * 0.4);  /* Height of text overlay (40% of card height) */
    --ss-overlay-padding-vertical: calc((100vw * 9 / 16) * 0.04);  /* Space above and below overlay text (4% of card height) */
    --ss-overlay-padding-horizontal: clamp(1rem, 3vw, 2rem);  /* Space on sides of overlay text (16-32px, responsive) */

    /* === TEXT STYLING === */
    --ss-text-size: clamp(1rem, calc((100vw * 9 / 16) * 0.06), 2.2rem);  /* Text size (16px to 35.2px, responsive) */
    --ss-text-weight: 600;                          /* Regular text thickness (semi-bold) */
    --ss-text-weight-highlight: 700;                /* Highlighted text thickness (bold) */
    --ss-text-letter-spacing: clamp(1px, 0.3vw, 3px);  /* Space between letters (1-3px, responsive) */
    --ss-text-line-height: 1.2;                     /* Space between lines of text */
    --ss-text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);  /* Shadow behind text for readability */
    --ss-highlight-glow-effect: 0 0 8px rgba(255, 0, 255, 0.6);  /* Glow effect for highlighted text */

    /* === ANIMATION & EFFECTS === */
    --ss-overlay-transition-duration: 0.3s;         /* How long hover animation takes (0.3 seconds) */
    --ss-overlay-transition-timing: ease;           /* Animation smoothness style */
    --ss-overlay-initial-opacity: 0;                /* Overlay visibility before hover (invisible) */
    --ss-overlay-hover-opacity: 1;                  /* Overlay visibility on hover (fully visible) */
    --ss-overlay-initial-transform: translateY(calc((100vw * 9 / 16) * 0.08));  /* Overlay starting position (moved down 8%) */
    --ss-overlay-hover-transform: translateY(0);    /* Overlay position on hover (normal position) */

    /* Main partner card container styles */
    width: var(--ss-card-width) !important;
    max-width: 100% !important;
    height: var(--ss-card-height) !important;
    position: relative !important;
    overflow: hidden !important;
    margin: var(--ss-card-margin) !important;
    min-height: var(--ss-min-height-desktop) !important;
    border-radius: var(--ss-video-border-radius) !important;
    background: var(--ss-card-bg) !important;
}

/* Video background element */
.partner-element.steelseries .partner__video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    transform: translateZ(0) !important;
    will-change: transform !important;
    border-radius: var(--ss-video-border-radius) !important;
    display: block !important;
}

/* Loading state - Shows logo on poster before video loads */
.partner-element.steelseries::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40%;
    height: 40%;
    background-image: url('https://f004.backblazeb2.com/file/fw-website-assets/Assets/Partners/Logos/steelseries-logo.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.8;
    z-index: 1;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

/* Hide logo once video starts playing */
.partner-element.steelseries .partner__video[data-loaded="true"] ~ ::before {
    opacity: 0;
}

/* Text overlay container (appears on hover) */
.partner-element.steelseries .partner__text-overlay {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: var(--ss-overlay-height) !important;
    background: linear-gradient(var(--ss-overlay-gradient-start), var(--ss-overlay-gradient-end)) !important;
    padding: var(--ss-overlay-padding-vertical) var(--ss-overlay-padding-horizontal) !important;
    opacity: var(--ss-overlay-initial-opacity) !important;
    transform: var(--ss-overlay-initial-transform) !important;
    transition: all var(--ss-overlay-transition-duration) var(--ss-overlay-transition-timing) !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
    z-index: 3 !important;
}

/* Text overlay on hover - slides up and becomes visible */
.partner-element.steelseries:hover .partner__text-overlay {
    opacity: var(--ss-overlay-hover-opacity) !important;
    transform: var(--ss-overlay-hover-transform) !important;
}

/* Text content styling */
.partner-element.steelseries .partner__text {
    color: var(--ss-text-color) !important;
    font-size: var(--ss-text-size) !important;
    font-weight: var(--ss-text-weight) !important;
    text-align: center !important;
    letter-spacing: var(--ss-text-letter-spacing) !important;
    text-transform: uppercase !important;
    margin: 0 !important;
    line-height: var(--ss-text-line-height) !important;
    text-shadow: var(--ss-text-shadow) !important;
}

/* Primary text color (white) */
.partner-element.steelseries .text-primary {
    color: var(--ss-text-color) !important;
}

/* Highlighted text (magenta with glow effect) */
.partner-element.steelseries .text-highlight {
    color: var(--ss-highlight-color) !important;
    text-shadow: var(--ss-highlight-glow-effect) !important;
    font-weight: var(--ss-text-weight-highlight) !important;
}

/* Mobile Responsive - Tablets (768px and below) */
@media (max-width: 768px) {
    .partner-element.steelseries {
        min-height: var(--ss-min-height-tablet) !important;
    }
}

/* Mobile Responsive - Phones (480px and below) */
@media (max-width: 480px) {
    .partner-element.steelseries {
        min-height: var(--ss-min-height-mobile) !important;
    }
}
}
#fw-section-custom-html-572129b2-ca35-40d0-abe9-8f16f549d92b {

/* ========================================
   KONTROLFREEKS PARTNER CARD - EASILY CHANGEABLE VALUES
   Change these numbers to customize the KontrolFreeks partner card!
   ======================================== */

/* Main partner card container */
.partner-element.kontrolfreeks {
    /* === COLORS === */
    --kf-card-bg: #000000;                          /* Partner card background color (black) */
    --kf-video-border-radius: 12px;                 /* Rounded corners on video (12px) */
    --kf-overlay-gradient-start: transparent;       /* Overlay gradient starting color (fully transparent) */
    --kf-overlay-gradient-end: rgba(0,0,0,0.8);     /* Overlay gradient ending color (dark semi-transparent) */
    --kf-text-color: #ffffff;                       /* Main text color (white) */
    --kf-highlight-color: #ff00ff;                  /* Highlighted text color (magenta/pink) */
    --kf-highlight-glow: rgba(255, 0, 255, 0.6);    /* Glow effect around highlighted text (magenta with transparency) */

    /* === SIZES === */
    --kf-card-width: 100vw;                         /* Card width (full viewport width) */
    --kf-card-height: calc(100vw * 9 / 16);         /* Card height (maintains 16:9 aspect ratio) */
    --kf-min-height-desktop: 160px;                 /* Minimum card height on desktop */
    --kf-min-height-tablet: 140px;                  /* Minimum card height on tablets (140px) */
    --kf-min-height-mobile: 120px;                  /* Minimum card height on phones (120px) */

    /* === SPACING === */
    --kf-card-margin: 0.5rem 0;                     /* Space above and below card (8px top/bottom, 0 sides) */
    --kf-overlay-height: calc((100vw * 9 / 16) * 0.4);  /* Height of text overlay (40% of card height) */
    --kf-overlay-padding-vertical: calc((100vw * 9 / 16) * 0.04);  /* Space above and below overlay text (4% of card height) */
    --kf-overlay-padding-horizontal: clamp(1rem, 3vw, 2rem);  /* Space on sides of overlay text (16-32px, responsive) */

    /* === TEXT STYLING === */
    --kf-text-size: clamp(1rem, calc((100vw * 9 / 16) * 0.06), 2.2rem);  /* Text size (16px to 35.2px, responsive) */
    --kf-text-weight: 600;                          /* Regular text thickness (semi-bold) */
    --kf-text-weight-highlight: 700;                /* Highlighted text thickness (bold) */
    --kf-text-letter-spacing: clamp(1px, 0.3vw, 3px);  /* Space between letters (1-3px, responsive) */
    --kf-text-line-height: 1.2;                     /* Space between lines of text */
    --kf-text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);  /* Shadow behind text for readability */
    --kf-highlight-glow-effect: 0 0 8px rgba(255, 0, 255, 0.6);  /* Glow effect for highlighted text */

    /* === ANIMATION & EFFECTS === */
    --kf-overlay-transition-duration: 0.3s;         /* How long hover animation takes (0.3 seconds) */
    --kf-overlay-transition-timing: ease;           /* Animation smoothness style */
    --kf-overlay-initial-opacity: 0;                /* Overlay visibility before hover (invisible) */
    --kf-overlay-hover-opacity: 1;                  /* Overlay visibility on hover (fully visible) */
    --kf-overlay-initial-transform: translateY(calc((100vw * 9 / 16) * 0.08));  /* Overlay starting position (moved down 8%) */
    --kf-overlay-hover-transform: translateY(0);    /* Overlay position on hover (normal position) */

    /* Main partner card container styles */
    width: var(--kf-card-width) !important;
    max-width: 100% !important;
    height: var(--kf-card-height) !important;
    position: relative !important;
    overflow: hidden !important;
    margin: var(--kf-card-margin) !important;
    min-height: var(--kf-min-height-desktop) !important;
    border-radius: var(--kf-video-border-radius) !important;
    background: var(--kf-card-bg) !important;
}

/* Video background element */
.partner-element.kontrolfreeks .partner__video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    transform: translateZ(0) !important;
    will-change: transform !important;
    border-radius: var(--kf-video-border-radius) !important;
    display: block !important;
}

/* Loading state - centered logo before video plays */
.partner-element.kontrolfreeks::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40%;
    height: 40%;
    background-image: url('https://f004.backblazeb2.com/file/fw-website-assets/Assets/Partners/Logos/kontrolfreeks-logo.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.8;
    z-index: 1;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

/* Hide logo once video starts playing */
.partner-element.kontrolfreeks .partner__video[data-loaded="true"] ~ ::before {
    opacity: 0;
}

/* Text overlay container (appears on hover) */
.partner-element.kontrolfreeks .partner__text-overlay {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: var(--kf-overlay-height) !important;
    background: linear-gradient(var(--kf-overlay-gradient-start), var(--kf-overlay-gradient-end)) !important;
    padding: var(--kf-overlay-padding-vertical) var(--kf-overlay-padding-horizontal) !important;
    opacity: var(--kf-overlay-initial-opacity) !important;
    transform: var(--kf-overlay-initial-transform) !important;
    transition: all var(--kf-overlay-transition-duration) var(--kf-overlay-transition-timing) !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
    z-index: 3 !important;
}

/* Text overlay on hover - slides up and becomes visible */
.partner-element.kontrolfreeks:hover .partner__text-overlay {
    opacity: var(--kf-overlay-hover-opacity) !important;
    transform: var(--kf-overlay-hover-transform) !important;
}

/* Text content styling */
.partner-element.kontrolfreeks .partner__text {
    color: var(--kf-text-color) !important;
    font-size: var(--kf-text-size) !important;
    font-weight: var(--kf-text-weight) !important;
    text-align: center !important;
    letter-spacing: var(--kf-text-letter-spacing) !important;
    text-transform: uppercase !important;
    margin: 0 !important;
    line-height: var(--kf-text-line-height) !important;
    text-shadow: var(--kf-text-shadow) !important;
}

/* Primary text color (white) */
.partner-element.kontrolfreeks .text-primary {
    color: var(--kf-text-color) !important;
}

/* Highlighted text (magenta with glow effect) */
.partner-element.kontrolfreeks .text-highlight {
    color: var(--kf-highlight-color) !important;
    text-shadow: var(--kf-highlight-glow-effect) !important;
    font-weight: var(--kf-text-weight-highlight) !important;
}

/* Mobile Responsive - Tablets (768px and below) */
@media (max-width: 768px) {
    .partner-element.kontrolfreeks {
        min-height: var(--kf-min-height-tablet) !important;
    }
}

/* Mobile Responsive - Phones (480px and below) */
@media (max-width: 480px) {
    .partner-element.kontrolfreeks {
        min-height: var(--kf-min-height-mobile) !important;
    }
}
}

#fw-section-custom-html-5339a083-255e-4a6b-90e4-2ca8d79554c8 {

/* ========================================
   EASILY CHANGEABLE VALUES - E1 BANNER
   Change these to customize the banner appearance!
   ======================================== */

.about-page-element.element-1 {
    /* === SPACING === */
    --e1-row-padding-desktop: 4rem;           /* Top padding on desktop (64px) */
    --e1-row-padding-sides: 2rem;             /* Left and right padding (32px) */
    --e1-mobile-padding: 1rem;                /* Padding on mobile devices (16px) */
    
    /* === IMAGE STYLING === */
    --e1-row-image-radius: 12px;              /* How rounded the image corners are (12px) */
    --e1-content-width-desktop: 100%;         /* Image container width on desktop (100% up to max-width) */
    --e1-content-width-mobile: 100%;          /* Image container width on mobile (full width) */
    --e1-container-max-width: 1200px;         /* Maximum width of content container (1200px) */
    
    /* === COLORS === */
    --e1-background-color: #000000;           /* Section background color (black) */
    
    /* === ANIMATION === */
    --e1-animation-distance: 30px;            /* How far elements move during fade-in animation (30px) */
    --e1-animation-duration: 0.6s;            /* How long the fade-in animation takes (0.6 seconds) */
}

/* ================================================
   GLOBAL CONTAINER STYLES
   Ensures proper spacing and margins
   ================================================ */

.about-page-element.element-1 main,
.about-page-element.element-1 {
    margin: 0 !important;
}

/* Remove any default top spacing from first element */
.about-page-element.element-1 .row-section:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* ================================================
   ROW SECTION LAYOUT
   Controls the overall section container
   ================================================ */

.about-page-element.element-1 .row-section {
    width: 100%;
    max-width: 100vw;
    margin: 0 auto;
    padding: 0;
    position: relative;
    overflow-x: hidden;
    box-sizing: border-box;
}

.about-page-element.element-1 .row-content {
    width: 100%;
    max-width: var(--e1-container-max-width);
    margin: 0 auto;
    padding: 0;
    position: relative;
}

.about-page-element.element-1 .row-image {
    width: 100%;
    height: auto;
    display: block;
    margin: 0;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
    -ms-interpolation-mode: bicubic;
}

/* ================================================
   E1 BANNER IMAGE SECTION
   Main banner display with centered image
   ================================================ */

.about-page-element.element-1 .row-1 {
    background-color: var(--e1-background-color);
    padding: var(--e1-row-padding-desktop) var(--e1-row-padding-sides) 0 var(--e1-row-padding-sides) !important;
    margin: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 100%;
}

.about-page-element.element-1 .row-1 .row-content {
    width: var(--e1-content-width-desktop);
    max-width: var(--e1-container-max-width);
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0 auto;
}

.about-page-element.element-1 .row-1 .row-image {
    border-radius: var(--e1-row-image-radius);
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    display: block;
    object-fit: cover;
}

/* ================================================
   FADE-UP ANIMATION
   Controls the fade-in effect for the banner
   ================================================ */

.about-page-element.element-1 .fade-up {
    opacity: 0;
    transform: translateY(var(--e1-animation-distance));
    transition: all var(--e1-animation-duration) ease;
}

.about-page-element.element-1 .fade-up.active {
    opacity: 1;
    transform: translateY(0);
}

/* ================================================
   RESPONSIVE DESIGN - MOBILE
   Optimizes layout for smaller screens
   ================================================ */

@media (max-width: 768px) {
    .about-page-element.element-1 .row-1 {
        padding: var(--e1-mobile-padding) !important;
        margin-top: 0 !important;
    }
    
    .about-page-element.element-1 .row-1 .row-content {
        width: var(--e1-content-width-mobile) !important;
    }
}
}
#fw-section-custom-html-e6ad6a08-071d-494e-8737-540f9df43a71 {

/* ========================================
   EASILY CHANGEABLE VALUES - OUR STORY
   Change these to customize the story section!
   ======================================== */

.about-page-element.element-2 {
    /* === SPACING === */
    --e2-section-padding-desktop: 0rem 0;     /* Top and bottom padding on desktop (8px 0) */
    --e2-section-padding-tablet: 0rem 0;      /* Top and bottom padding on tablet (48px 0) */
    --e2-section-padding-mobile: 2rem 0;      /* Top and bottom padding on mobile (32px 0) */
    --e2-section-padding-small: 1.5rem 0;     /* Top and bottom padding on small screens (24px 0) */

    --e2-content-padding-desktop: 2rem;       /* Inner content padding on desktop (32px) */
    --e2-content-padding-tablet: 1.5rem;      /* Inner content padding on tablet (24px) */
    --e2-content-padding-mobile: 1rem;        /* Inner content padding on mobile (16px) */
    --e2-content-padding-small: 0.5rem;       /* Inner content padding on small screens (8px) */

    --e2-column-gap-desktop: 4rem;            /* Space between image and text columns on desktop (64px) */
    --e2-column-gap-tablet: 2rem;             /* Space between image and text on tablet (32px) */
    --e2-column-gap-mobile: 1.5rem;           /* Space between stacked elements on mobile (24px) */

    /* === TYPOGRAPHY === */
    --e2-heading-size-desktop: 2.5rem;        /* "OUR STORY" heading size on desktop (40px) */
    --e2-heading-size-mobile: 2rem;           /* "OUR STORY" heading size on mobile (32px) */
    --e2-heading-size-small: 1.8rem;          /* "OUR STORY" heading size on small screens (28.8px) */
    --e2-heading-weight: 700;                 /* Heading font weight (bold) */
    --e2-heading-letter-spacing: 2px;         /* Space between letters in heading (2px) */
    --e2-heading-margin-bottom: 1rem;         /* Space below heading (16px) */

    --e2-text-size-desktop: 0.9rem;           /* Story paragraph text size on desktop (14.4px) */
    --e2-text-size-mobile: 1rem;              /* Story paragraph text size on mobile (16px) */
    --e2-text-line-height-desktop: 1.4;       /* Line spacing for paragraphs on desktop */
    --e2-text-line-height-mobile: 1.6;        /* Line spacing for paragraphs on mobile */
    --e2-text-weight: 400;                    /* Paragraph font weight (normal) */
    --e2-paragraph-spacing: 1rem;             /* Space between paragraphs (16px) */

    /* === IMAGE STYLING === */
    --e2-image-radius: 15px;                  /* How rounded the story image corners are (15px) */

    /* === COLORS === */
    --e2-background-color: #000000;           /* Section background color (black) */
    --e2-text-color: #ffffff;                 /* Text color (white) */

    /* === LAYOUT === */
    --e2-container-max-width: 1200px;         /* Maximum width of content container (1200px) */

    /* === ANIMATION === */
    --e2-animation-distance: 30px;            /* How far elements move during fade-in (30px) */
    --e2-animation-duration: 0.6s;            /* How long the fade-in animation takes (0.6 seconds) */
}

/* ================================================
   ROW SECTION LAYOUT
   Controls the overall section container
   ================================================ */

.about-page-element.element-2 .row-section {
    width: 100%;
    max-width: 100vw;
    margin: 0 auto;
    padding: 0;
    position: relative;
    overflow-x: hidden;
    box-sizing: border-box;
}

.about-page-element.element-2 .row-content {
    width: 100%;
    max-width: var(--e2-container-max-width);
    margin: 0 auto;
    padding: 0;
    position: relative;
}

/* ================================================
   OUR STORY SECTION
   Main story section with background
   ================================================ */

.about-page-element.element-2 .row-2 {
    background-color: var(--e2-background-color);
    padding: var(--e2-section-padding-desktop);
}

/* ================================================
   TWO-COLUMN LAYOUT
   Side-by-side layout for image and text
   ================================================ */

.about-page-element.element-2 .two-column {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--e2-column-gap-desktop);
    align-items: stretch;
    margin: 0 auto;
    width: 100%;
    max-width: var(--e2-container-max-width);
    height: 100%;
    padding: var(--e2-content-padding-desktop);
    box-sizing: border-box;
    overflow: hidden !important;
}

/* Special styling for Row 2 Our Story section */
.about-page-element.element-2 .row-2 .two-column {
    grid-template-columns: 1fr 1fr;
    gap: var(--e2-column-gap-desktop);
}

.about-page-element.element-2 .column-left,
.about-page-element.element-2 .column-right {
    width: 100%;
    overflow: hidden !important;
}

/* ================================================
   STORY IMAGE STYLING
   Controls the team photo appearance
   ================================================ */

.about-page-element.element-2 .story-image {
    width: 100%;
    height: auto;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: high-quality;
    -ms-interpolation-mode: bicubic;
    border-radius: var(--e2-image-radius) !important;
}

/* ================================================
   STORY TEXT CONTENT
   Heading and paragraph styling
   ================================================ */

.about-page-element.element-2 .story-text-box {
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
}

/* "OUR STORY" Heading */
.about-page-element.element-2 .story-text-box h2 {
    font-size: var(--e2-heading-size-desktop) !important;
    font-weight: var(--e2-heading-weight) !important;
    margin-bottom: var(--e2-heading-margin-bottom) !important;
    color: var(--e2-text-color) !important;
    text-transform: uppercase !important;
    letter-spacing: var(--e2-heading-letter-spacing) !important;
}

/* Story Paragraphs */
.about-page-element.element-2 .story-text-box p {
    font-size: var(--e2-text-size-desktop);
    line-height: var(--e2-text-line-height-desktop);
    margin-bottom: var(--e2-paragraph-spacing);
    color: var(--e2-text-color);
    text-align: left;
    text-transform: uppercase;
    font-weight: var(--e2-text-weight);
}

.about-page-element.element-2 .story-text-box p:last-child {
    margin-bottom: 0;
}

/* ================================================
   FADE-UP ANIMATION
   Controls the fade-in effect
   ================================================ */

.about-page-element.element-2 .fade-up {
    opacity: 0;
    transform: translateY(var(--e2-animation-distance));
    transition: all var(--e2-animation-duration) ease;
}

.about-page-element.element-2 .fade-up.active {
    opacity: 1;
    transform: translateY(0);
}

/* ================================================
   RESPONSIVE DESIGN - TABLET
   Optimizes layout for tablet screens
   ================================================ */

@media (max-width: 1024px) {
    .about-page-element.element-2 .two-column {
        grid-template-columns: 1fr;
        gap: var(--e2-column-gap-tablet);
        text-align: center;
        padding: var(--e2-content-padding-tablet);
    }
    
    .about-page-element.element-2 .row-2 {
        padding: var(--e2-section-padding-tablet);
    }
    
    .about-page-element.element-2 .row-2 .two-column {
        grid-template-columns: 1fr;
        gap: var(--e2-column-gap-tablet);
    }
}

/* ================================================
   RESPONSIVE DESIGN - MOBILE
   Optimizes layout for mobile phones
   ================================================ */

@media (max-width: 768px) {
    .about-page-element.element-2 .row-2 {
        padding: var(--e2-section-padding-mobile);
    }
    
    .about-page-element.element-2 .two-column {
        gap: var(--e2-column-gap-mobile);
        padding: var(--e2-content-padding-mobile);
    }
    
    /* Mobile Our Story Layout - Stacked vertical */
    .about-page-element.element-2 .row-2 .two-column {
        grid-template-columns: 1fr;
        gap: var(--e2-column-gap-tablet);
        padding: var(--e2-content-padding-mobile);
    }
    
    .about-page-element.element-2 .row-2 .column-left {
        order: 1;
        width: 100%;
    }
    
    .about-page-element.element-2 .row-2 .column-right {
        order: 2;
        width: 100%;
    }
    
    .about-page-element.element-2 .story-image {
        width: 100%;
        height: auto;
        border-radius: var(--e2-image-radius);
    }
    
    .about-page-element.element-2 .story-text-box {
        text-align: center;
        margin-top: var(--e2-paragraph-spacing);
    }
    
    .about-page-element.element-2 .story-text-box h2 {
        font-size: var(--e2-heading-size-mobile);
        margin-bottom: var(--e2-heading-margin-bottom);
    }
    
    .about-page-element.element-2 .story-text-box p {
        font-size: var(--e2-text-size-mobile);
        line-height: var(--e2-text-line-height-mobile);
    }
}

/* ================================================
   RESPONSIVE DESIGN - SMALL SCREENS
   Further optimization for very small devices
   ================================================ */

@media (max-width: 600px) {
    .about-page-element.element-2 .row-2 {
        padding: var(--e2-section-padding-small);
    }
    
    .about-page-element.element-2 .two-column {
        padding: var(--e2-content-padding-small);
    }
    
    .about-page-element.element-2 .story-text-box h2 {
        font-size: var(--e2-heading-size-small);
        margin-bottom: var(--e2-heading-margin-bottom);
    }
}
}
#fw-section-custom-html-1b36091f-541f-4e09-a924-17cedd91f54a {


/* ========================================
   EASILY CHANGEABLE VALUES - E3 ACCOLADES
   Change these to customize the accolades banner!
   ======================================== */

.about-page-element.element-3 {
    /* === SPACING === */
    --e3-section-padding-desktop: 0rem 0;     /* Top and bottom padding on desktop (0px 0) */
    --e3-section-padding-tablet: 1.5rem 0;    /* Top and bottom padding on tablet (24px 0) */
    --e3-section-padding-mobile: 4rem 0;      /* Top and bottom padding on mobile (64px 0) */
    --e3-section-padding-small: 1rem 0;       /* Top and bottom padding on small screens (16px 0) */
    --e3-content-padding-sides: 2rem;         /* Left and right padding (32px) */
    
    /* === IMAGE STYLING === */
    --e3-image-radius: 15%;                   /* How rounded the image corners are (15% for rounded look) */
    --e3-image-max-width: 1200px;             /* Maximum image width (1200px) */
    
    /* === COLORS === */
    --e3-background-color: #000000;           /* Section background color (black) */
    
    /* === ANIMATION === */
    --e3-animation-distance: 30px;            /* How far elements move during fade-in (30px) */
    --e3-animation-duration: 0.6s;            /* How long the fade-in animation takes (0.6 seconds) */
}

/* ================================================
   ROW SECTION LAYOUT
   Controls the overall section container
   ================================================ */

.about-page-element.element-3 .row-section {
    width: 100%;
    max-width: 100vw;
    margin: 0 auto;
    padding: 0;
    position: relative;
    overflow-x: hidden;
    box-sizing: border-box;
}

.about-page-element.element-3 .row-content {
    width: 100%;
    max-width: var(--e3-image-max-width);
    margin: 0 auto;
    padding: 0;
    position: relative;
}

/* ================================================
   ACCOLADES SECTION
   Main accolades banner section
   ================================================ */

.about-page-element.element-3 .row-3 {
    background-color: var(--e3-background-color);
    padding: var(--e3-section-padding-desktop);
}

/* ================================================
   ACCOLADES IMAGE STYLING
   Controls the banner image appearance and positioning
   ================================================ */

.about-page-element.element-3 .row-image {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
    max-width: var(--e3-image-max-width) !important;
    border-radius: var(--e3-image-radius) !important;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
    -ms-interpolation-mode: bicubic;
    box-sizing: border-box !important;
    object-fit: cover !important;
    object-position: center center !important;
}

/* ================================================
   ENHANCED IMAGE CENTERING
   Ensures perfect centering of the accolades banner
   ================================================ */

.about-page-element.element-3 .row-3 .row-content {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: var(--e3-image-max-width) !important;
    margin: 0 auto !important;
    text-align: center !important;
    position: relative !important;
    padding: 0 var(--e3-content-padding-sides) !important;
}

/* Enhanced image positioning with precise centering */
.about-page-element.element-3 .row-3 .row-content .row-image {
    position: relative !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    border-radius: var(--e3-image-radius) !important;
    width: 100% !important;
    max-width: var(--e3-image-max-width) !important;
    height: auto !important;
    margin: 0 auto !important;
    padding: 0 !important;
    display: block !important;
    object-fit: cover !important;
    object-position: center center !important;
    text-align: center !important;
    vertical-align: middle !important;
}

/* ================================================
   FADE-UP ANIMATION
   Controls the fade-in effect for the banner
   ================================================ */

.about-page-element.element-3 .fade-up {
    opacity: 0;
    transform: translateY(var(--e3-animation-distance));
    transition: all var(--e3-animation-duration) ease;
}

.about-page-element.element-3 .fade-up.active {
    opacity: 1;
    transform: translateY(0);
}

/* ================================================
   RESPONSIVE DESIGN - TABLET
   Optimizes layout for tablet screens
   ================================================ */

@media (max-width: 1024px) {
    .about-page-element.element-3 .row-3 {
        padding: var(--e3-section-padding-tablet);
    }
}

/* ================================================
   RESPONSIVE DESIGN - MOBILE
   Optimizes layout for mobile phones
   ================================================ */

@media (max-width: 768px) {
    .about-page-element.element-3 .row-3 {
        padding: var(--e3-section-padding-mobile);
    }
}

/* ================================================
   RESPONSIVE DESIGN - SMALL SCREENS
   Further optimization for very small devices
   ================================================ */

@media (max-width: 600px) {
    .about-page-element.element-3 .row-3 {
        padding: var(--e3-section-padding-small);
    }
}
}
#fw-section-custom-html-f01a4976-501a-43bc-83fe-4fe63e325d40 {

/* ================================================
   ABOUT PAGE ELEMENT 5 - SIMP PLAYER PROFILE
   Easy to customize with CSS variables below!
   ================================================ */

/* ========================================
   EASILY CHANGEABLE SIMP PROFILE VALUES
   Change these to customize Simp's section!
   ======================================== */

.about-page-element.element-5 {
    /* === COLORS === */
    --e5-background-color: #000000;            /* Section background color (black) */
    --e5-overlay-background: #000000;          /* Hover overlay background (black) */
    --e5-text-color: #ffffff;                  /* All text color (white) */
    --e5-glow-color: rgba(255, 0, 255, 0.6);   /* Pink glow color for headshot hover */
    
    /* === SPACING === */
    --e5-row-padding: 2rem;                    /* Desktop row padding (32px) */
    --e5-mobile-row-padding: 0.5rem;           /* Mobile row padding (8px - 75% reduction) */
    --e5-banner-gap: 2rem;                     /* Gap between player banners (32px) */
    --e5-mobile-banner-gap: 0.5rem;            /* Mobile gap (8px - 75% reduction) */
    --e5-content-padding: 2rem;                /* Content inner padding (32px) */
    --e5-mobile-content-padding: 1rem;         /* Mobile content padding (16px) */
    --e5-two-column-gap: 4rem;                 /* Gap between left/right columns (64px) */
    --e5-mobile-column-gap: 1rem;              /* Mobile column gap (16px) */
    
    /* === TYPOGRAPHY === */
    --e5-player-name-size: 4em;                /* Player name size (64px at 1em base) */
    --e5-player-role-size: 1rem;               /* Player role text (16px) */
    --e5-player-description-size: 0.85rem;     /* Description text (13.6px) */
    --e5-player-achievement-size: 0.85rem;     /* Achievement text (13.6px) */
    --e5-player-description-line-height: 1.4;  /* Description line spacing */
    --e5-player-name-weight: 700;              /* Player name font weight (bold) */
    --e5-player-role-weight: 600;              /* Player role font weight */
    --e5-player-achievement-weight: 600;       /* Achievement font weight */
    
    /* === IMAGE SETTINGS === */
    --e5-row-image-radius: 12px;               /* Banner border radius (rounded corners) */
    --e5-player-headshot-size: 280px;          /* Desktop headshot container size */
    --e5-mobile-headshot-size: 200px;          /* Mobile headshot container (smaller for centering) */
    --e5-player-headshot-border: none;         /* Remove border outline */
    
    /* === LAYOUT SETTINGS === */
    --e5-container-max-width: 1200px;          /* Maximum content width */
    
    /* === ANIMATION & EFFECTS === */
    --e5-hover-transition: 0.3s ease;          /* Hover transition speed */
    --e5-overlay-transition: 0.3s ease;        /* Overlay fade speed */
    --e5-fade-up-distance: 30px;               /* How far elements move when fading up */
    --e5-fade-up-duration: 0.6s;               /* Fade up animation duration */
    --e5-headshot-hover-scale: 1.05;           /* How much headshot grows on hover (1.05 = 5% larger) */
    --e5-headshot-hover-brightness: 1.1;       /* Headshot brightness on hover (1.1 = 10% brighter) */
    --e5-headshot-glow-near: 20px;             /* Inner glow radius */
    --e5-headshot-glow-mid: 40px;              /* Middle glow radius */
    --e5-headshot-glow-far: 60px;              /* Outer glow radius */
    
    /* === MOBILE BEHAVIOR === */
    --e5-mobile-tap-scale: 0.98;               /* Banner shrinks slightly when tapped (98% = slight press effect) */
    
    /* === LEGACY COMPATIBILITY === */
    /* These ensure compatibility with older code */
    --row-image-radius: var(--e5-row-image-radius);
    --player-headshot-size: var(--e5-player-headshot-size);
    --player-headshot-border: var(--e5-player-headshot-border);
}

/* ================================================
   SECTION STRUCTURE
   Main containers and layout elements
   ================================================ */

/* Row section container - holds entire player profile */
.about-page-element.element-5 .row-section {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    position: relative;
    overflow-x: hidden;
    box-sizing: border-box;
}

/* Row content wrapper - centers content and adds padding */
.about-page-element.element-5 .row-content {
    width: 100%;
    max-width: var(--e5-container-max-width);
    margin: 0 auto;
    padding: var(--e5-content-padding);
    position: relative;
    box-sizing: border-box;
}

/* Row 5 specific background styling */
.about-page-element.element-5 .row-5 {
    background-color: var(--e5-background-color);
    padding: 0;
}

@media (min-width: 1024px) {
    .about-page-element.element-5 .row-5 {
        padding: 0;
    }
}

.about-page-element.element-5 .row-5 .row-image {
    width: 100%;
    max-width: var(--e5-container-max-width);
    margin: 0 auto;
    display: block;
}

/* ================================================
   BANNER IMAGE
   Default player banner that appears before hover
   ================================================ */

/* Banner image styling - optimized for sharpness */
.about-page-element.element-5 .row-image {
    width: 100%;
    height: auto;
    display: block;
    margin: 0;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
    -ms-interpolation-mode: bicubic;
}

/* Default banner image container */
.about-page-element.element-5 .default-image {
    width: 100% !important;
    max-width: var(--e5-container-max-width) !important;
    margin: 0 auto !important;
    display: block !important;
    border-radius: var(--e5-row-image-radius) !important;
    overflow: hidden !important;
    transition: opacity var(--e5-hover-transition);
    box-sizing: border-box !important;
}

/* ================================================
   PLAYER ROW - HOVER FUNCTIONALITY
   Interactive player profile row with hover/click
   ================================================ */

.about-page-element.element-5 .player-row {
    position: relative;
    cursor: pointer;
    transition: all var(--e5-hover-transition);
    overflow: hidden !important;
    margin: var(--e5-banner-gap) 0;
    box-sizing: border-box;
}

.about-page-element.element-5 .player-row .row-content {
    position: relative;
    width: 100%;
    max-width: var(--e5-container-max-width);
    margin: 0 auto;
    padding: var(--e5-content-padding);
    overflow: hidden !important;
    box-sizing: border-box;
}

/* ================================================
   HOVER OVERLAY
   Bio content that appears on hover (desktop)
   ================================================ */

.about-page-element.element-5 .hover-content {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: var(--e5-container-max-width);
    height: 100%;
    opacity: 0;
    transition: opacity var(--e5-overlay-transition);
    background: var(--e5-overlay-background);
    border-radius: var(--e5-row-image-radius);
    padding: var(--e5-content-padding);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden !important;
}

/* Desktop hover behavior - show overlay when hovering */
@media (min-width: 769px) {
    .about-page-element.element-5 .player-row:hover .hover-content {
        opacity: 1;
    }
}

/* ================================================
   TWO-COLUMN LAYOUT
   Split layout for headshot and bio text
   ================================================ */

.about-page-element.element-5 .two-column {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--e5-two-column-gap);
    align-items: stretch;
    margin: 0 auto;
    width: 100%;
    max-width: var(--e5-container-max-width);
    height: 100%;
    padding: var(--e5-content-padding);
    box-sizing: border-box;
    overflow: hidden !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.about-page-element.element-5 .column-left,
.about-page-element.element-5 .column-right {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden !important;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;
}

/* Left column - headshot image */
.about-page-element.element-5 .column-left {
    justify-content: center;
}

/* Right column - player bio text */
.about-page-element.element-5 .column-right {
    justify-content: flex-start;
    align-items: center;
}

/* ================================================
   PLAYER HEADSHOT
   Player photo with hover glow effect
   ================================================ */

/* Headshot container - maintains square aspect ratio */
.about-page-element.element-5 .player-headshot-placeholder {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: var(--e5-player-headshot-size) !important;
    height: var(--e5-player-headshot-size) !important;
    max-width: var(--e5-player-headshot-size) !important;
    max-height: var(--e5-player-headshot-size) !important;
    min-width: var(--e5-player-headshot-size) !important;
    min-height: var(--e5-player-headshot-size) !important;
    aspect-ratio: 1 / 1 !important;
    overflow: hidden !important;
    border-radius: var(--e5-row-image-radius) !important;
    border: var(--e5-player-headshot-border) !important;
    background: var(--e5-background-color) !important;
    pointer-events: auto !important;
    margin: 0 auto !important;
    position: relative !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    align-self: center !important;
    justify-self: center !important;
    transition: all var(--e5-hover-transition) !important;
}

/* Headshot image styling */
.about-page-element.element-5 .player-headshot-image {
    width: 100% !important;
    height: 100% !important;
    border-radius: var(--e5-row-image-radius) !important;
    object-fit: cover !important;
    object-position: center center !important;
    border: none !important;
    display: block !important;
    flex-shrink: 0 !important;
    transition: transform var(--e5-hover-transition), filter var(--e5-hover-transition) !important;
    transform: scale(1) !important;
    max-width: 100% !important;
    max-height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
}

/* Headshot hover effect - grow and brighten */
.about-page-element.element-5 .player-headshot-image:hover {
    transform: scale(var(--e5-headshot-hover-scale)) !important;
    filter: brightness(var(--e5-headshot-hover-brightness)) !important;
}

/* Pink glow hover effect on headshot container */
.about-page-element.element-5 .player-headshot-placeholder:hover {
    box-shadow: 
        0 0 var(--e5-headshot-glow-near) var(--e5-glow-color),
        0 0 var(--e5-headshot-glow-mid) rgba(255, 0, 255, 0.4),
        0 0 var(--e5-headshot-glow-far) rgba(255, 0, 255, 0.2) !important;
    transform: translateY(-2px) scale(1.02) !important;
    transition: all var(--e5-hover-transition) !important;
}

/* ================================================
   PLAYER BIO TEXT
   Player name, role, description, and achievements
   ================================================ */

.about-page-element.element-5 .player-profile {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    padding-left: var(--e5-content-padding);
    overflow: hidden !important;
    max-height: 100% !important;
}

/* Player name - large uppercase heading */
body .about-page-element.element-5 .player-profile h3,
html body .about-page-element.element-5 .player-profile h3,
.about-page-element.element-5 .player-profile h3 {
    font-size: var(--e5-player-name-size) !important;
    font-weight: var(--e5-player-name-weight) !important;
    margin-bottom: 0.3rem !important;
    color: var(--e5-text-color) !important;
    text-transform: uppercase !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    max-width: 100% !important;
    z-index: 1 !important;
    position: relative !important;
}

/* Player role - subtitle below name */
.about-page-element.element-5 .player-role {
    font-size: var(--e5-player-role-size);
    color: var(--e5-text-color);
    margin-bottom: 0.8rem;
    font-weight: var(--e5-player-role-weight);
}

/* Player description - bio paragraph */
.about-page-element.element-5 .player-description {
    font-size: var(--e5-player-description-size);
    line-height: var(--e5-player-description-line-height);
    color: var(--e5-text-color);
    margin-bottom: 1rem;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    max-width: 100%;
}

/* Achievements container */
.about-page-element.element-5 .player-achievements {
    margin-top: auto;
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
}

/* Individual achievement lines */
.about-page-element.element-5 .player-achievements p {
    font-size: var(--e5-player-achievement-size);
    color: var(--e5-text-color);
    margin-bottom: 0.2rem;
    font-weight: var(--e5-player-achievement-weight);
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
}

.about-page-element.element-5 .player-achievements p:last-child {
    margin-bottom: 0;
}

/* ================================================
   FADE-UP ANIMATION
   Elements fade in and move up when scrolled into view
   ================================================ */

.about-page-element.element-5 .fade-up {
    opacity: 0;
    transform: translateY(var(--e5-fade-up-distance));
    transition: all var(--e5-fade-up-duration) ease;
}

.about-page-element.element-5 .fade-up.active {
    opacity: 1;
    transform: translateY(0);
}

/* ================================================
   MOBILE RESPONSIVE STYLES
   Tablet and phone optimizations
   ================================================ */

@media (max-width: 768px) {
    /* Disable hover effects on mobile - only allow click/tap */
    .about-page-element.element-5 .player-row:hover .hover-content:not(.mobile-active) {
        opacity: 0 !important;
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
    
    .about-page-element.element-5 .player-row:hover .default-image {
        opacity: 1 !important;
        display: block !important;
        visibility: visible !important;
    }
    
    /* Force disable all hover transitions on mobile */
    .about-page-element.element-5 .hover-content:not(.mobile-active) {
        transition: none !important;
        opacity: 0 !important;
        display: none !important;
        pointer-events: none !important;
    }
    
    .about-page-element.element-5 .default-image {
        transition: none !important;
    }
    
    /* Enable click/tap to expand player profile */
    .about-page-element.element-5 .player-row.mobile-active:hover .hover-content {
        opacity: 1 !important;
        display: block !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }
    
    /* Ensure headshot links work on mobile */
    .about-page-element.element-5 .player-headshot-image,
    .about-page-element.element-5 .player-headshot-placeholder a {
        pointer-events: auto !important;
        cursor: pointer !important;
    }
    
    /* Reduce spacing on mobile */
    .about-page-element.element-5 .player-row {
        margin: var(--e5-mobile-banner-gap) 0;
    }
    
    .about-page-element.element-5 .row-5 {
        padding: var(--e5-mobile-row-padding);
    }
    
    .about-page-element.element-5 .row-content {
        padding: var(--e5-mobile-content-padding) !important;
    }
    
    /* Show banner on mobile */
    .about-page-element.element-5 .player-row .default-image {
        display: block;
        margin-bottom: 2rem;
        cursor: pointer;
    }
    
    .about-page-element.element-5 .player-row .row-image {
        display: block;
        transition: none;
    }
    
    /* Enhanced mobile tap feedback */
    .about-page-element.element-5 .player-row .default-image {
        cursor: pointer !important;
        -webkit-tap-highlight-color: rgba(255, 255, 255, 0.2) !important;
        -webkit-touch-callout: none !important;
        -webkit-user-select: none !important;
        -khtml-user-select: none !important;
        -moz-user-select: none !important;
        -ms-user-select: none !important;
        user-select: none !important;
        transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    }
    
    /* Tap press effect */
    .about-page-element.element-5 .player-row .default-image:active {
        transform: scale(var(--e5-mobile-tap-scale)) !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
    }

    /* Mobile expanded state - replaces banner */
    .about-page-element.element-5 .player-row.mobile-active .default-image {
        display: none !important;
        opacity: 0 !important;
    }
    
    .about-page-element.element-5 .hover-content.mobile-active {
        opacity: 1 !important;
        visibility: visible !important;
        display: block !important;
        position: static !important;
        background: var(--e5-background-color) !important;
        border-radius: 0 !important;
        padding: var(--e5-mobile-content-padding) !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        left: 0 !important;
        right: 0 !important;
        transform: none !important;
    }
    
    /* Mobile column layout - stacked vertically */
    .about-page-element.element-5 .hover-content.mobile-active .two-column {
        display: flex !important;
        flex-direction: column !important;
        gap: var(--e5-mobile-column-gap) !important;
        text-align: center !important;
        grid-template-columns: none !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 0 !important;
    }
    
    .about-page-element.element-5 .hover-content.mobile-active .column-left,
    .about-page-element.element-5 .hover-content.mobile-active .column-right {
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
        margin: 0 auto !important;
        padding: 0 !important;
    }
    
    /* Smaller headshot on mobile */
    .about-page-element.element-5 .player-headshot-placeholder {
        width: var(--e5-mobile-headshot-size) !important;
        height: var(--e5-mobile-headshot-size) !important;
        max-width: var(--e5-mobile-headshot-size) !important;
        max-height: var(--e5-mobile-headshot-size) !important;
        min-width: var(--e5-mobile-headshot-size) !important;
        min-height: var(--e5-mobile-headshot-size) !important;
        margin: 0 auto;
        aspect-ratio: 1;
        border-radius: var(--e5-row-image-radius);
        border: var(--e5-player-headshot-border);
        background: var(--e5-background-color);
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Center bio text on mobile */
    .about-page-element.element-5 .player-profile {
        padding: var(--e5-mobile-content-padding);
        text-align: center;
        overflow: hidden;
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
        box-sizing: border-box;
        padding-left: 0;
    }
    
    .about-page-element.element-5 .player-profile h3 {
        font-size: var(--e5-player-name-size) !important;
        margin-bottom: 1rem;
    }
    
    .about-page-element.element-5 .player-role {
        font-size: var(--e5-player-role-size);
        margin-bottom: 1rem;
    }
    
    .about-page-element.element-5 .player-description {
        font-size: 0.9rem;
        margin-bottom: 1rem;
    }
    
    .about-page-element.element-5 .player-achievements p {
        font-size: 0.9rem;
    }
}

/* Tablet responsive (1024px and below) */
@media (max-width: 1024px) {
    .about-page-element.element-5 .two-column {
        grid-template-columns: 1fr;
        gap: 2rem;
        text-align: center;
        padding: var(--e5-content-padding);
    }
    
    .about-page-element.element-5 .row-5 {
        padding: var(--e5-mobile-row-padding);
    }
    
    .about-page-element.element-5 .player-profile {
        padding-left: 0;
        text-align: center;
    }
}

/* Small phones (600px and below) */
@media (max-width: 600px) {
    .about-page-element.element-5 .row-5 {
        padding: var(--e5-mobile-row-padding);
    }
    
    .about-page-element.element-5 .player-profile {
        padding: var(--e5-mobile-content-padding);
        overflow: hidden;
    }
    
    .about-page-element.element-5 .player-role {
        font-size: 0.9rem;
    }
    
    .about-page-element.element-5 .player-description {
        font-size: 0.8rem;
        line-height: 1.5;
    }
    
    .about-page-element.element-5 .player-achievements p {
        font-size: 0.8rem;
        margin-bottom: 0.2rem;
    }
}
}
#fw-section-custom-html-90776d34-48aa-4c35-9edf-c55a9b5628f0 {

/* ================================================
   ABOUT PAGE ELEMENT 6 - DRAZAH PLAYER PROFILE
   Easy to customize with CSS variables below!
   ================================================ */

/* ========================================
   EASILY CHANGEABLE DRAZAH PROFILE VALUES
   Change these to customize Drazah's section!
   ======================================== */

.about-page-element.element-6 {
    /* === COLORS === */
    --e6-background-color: #000000;            /* Section background color (black) */
    --e6-overlay-background: #000000;          /* Hover overlay background (black) */
    --e6-text-color: #ffffff;                  /* All text color (white) */
    --e6-glow-color: rgba(255, 0, 255, 0.6);   /* Pink glow color for headshot hover */
    
    /* === SPACING === */
    --e6-row-padding: 2rem;                    /* Desktop row padding (32px) */
    --e6-mobile-row-padding: 0.5rem;           /* Mobile row padding (8px - 75% reduction) */
    --e6-banner-gap: 2rem;                     /* Gap between player banners (32px) */
    --e6-mobile-banner-gap: 0.5rem;            /* Mobile gap (8px - 75% reduction) */
    --e6-content-padding: 2rem;                /* Content inner padding (32px) */
    --e6-mobile-content-padding: 1rem;         /* Mobile content padding (16px) */
    --e6-two-column-gap: 4rem;                 /* Gap between left/right columns (64px) */
    --e6-mobile-column-gap: 2rem;              /* Mobile column gap (32px) */
    
    /* === TYPOGRAPHY === */
    --e6-player-name-size: 4em;                /* Player name size (64px at 1em base) */
    --e6-player-role-size: 1rem;               /* Player role text (16px) */
    --e6-player-description-size: 0.85rem;     /* Description text (13.6px) */
    --e6-player-achievement-size: 0.85rem;     /* Achievement text (13.6px) */
    --e6-player-description-line-height: 1.4;  /* Description line spacing */
    --e6-player-name-weight: 700;              /* Player name font weight (bold) */
    --e6-player-role-weight: 600;              /* Player role font weight */
    --e6-player-achievement-weight: 600;       /* Achievement font weight */
    
    /* === IMAGE SETTINGS === */
    --e6-row-image-radius: 12px;               /* Banner border radius (rounded corners) */
    --e6-player-headshot-size: 280px;          /* Desktop headshot container size */
    --e6-mobile-headshot-size: 200px;          /* Mobile headshot container (smaller for centering) */
    --e6-player-headshot-border: none;         /* Remove border outline */
    
    /* === LAYOUT SETTINGS === */
    --e6-container-max-width: 1200px;          /* Maximum content width */
    
    /* === ANIMATION & EFFECTS === */
    --e6-hover-transition: 0.3s ease;          /* Hover transition speed */
    --e6-overlay-transition: 0.3s ease;        /* Overlay fade speed */
    --e6-fade-up-distance: 30px;               /* How far elements move when fading up */
    --e6-fade-up-duration: 0.6s;               /* Fade up animation duration */
    --e6-headshot-hover-scale: 1.05;           /* How much headshot grows on hover (1.05 = 5% larger) */
    --e6-headshot-hover-brightness: 1.1;       /* Headshot brightness on hover (1.1 = 10% brighter) */
    --e6-headshot-glow-near: 20px;             /* Inner glow radius */
    --e6-headshot-glow-mid: 40px;              /* Middle glow radius */
    --e6-headshot-glow-far: 60px;              /* Outer glow radius */
    
    /* === MOBILE BEHAVIOR === */
    --e6-mobile-tap-scale: 0.98;               /* Banner shrinks slightly when tapped (98% = slight press effect) */
    
    /* === LEGACY COMPATIBILITY === */
    /* These ensure compatibility with older code */
    --row-image-radius: var(--e6-row-image-radius);
    --player-headshot-size: var(--e6-player-headshot-size);
    --player-headshot-border: var(--e6-player-headshot-border);
}

/* ================================================
   SECTION STRUCTURE
   Main containers and layout elements
   ================================================ */

/* Row section container - holds entire player profile */
.about-page-element.element-6 .row-section {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    position: relative;
    overflow-x: hidden;
    box-sizing: border-box;
}

/* Row content wrapper - centers content and adds padding */
.about-page-element.element-6 .row-content {
    width: 100%;
    max-width: var(--e6-container-max-width);
    margin: 0 auto;
    padding: var(--e6-content-padding);
    position: relative;
    box-sizing: border-box;
}

/* Row 6 specific background styling */
.about-page-element.element-6 .row-6 {
    background-color: var(--e6-background-color);
    padding: 0;
}

@media (min-width: 1024px) {
    .about-page-element.element-6 .row-6 {
        padding: 0;
    }
}

.about-page-element.element-6 .row-6 .row-image {
    width: 100%;
    max-width: var(--e6-container-max-width);
    margin: 0 auto;
    display: block;
}

/* ================================================
   BANNER IMAGE
   Default player banner that appears before hover
   ================================================ */

/* Banner image styling - optimized for sharpness */
.about-page-element.element-6 .row-image {
    width: 100%;
    height: auto;
    display: block;
    margin: 0;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
    -ms-interpolation-mode: bicubic;
}

/* Default banner image container */
.about-page-element.element-6 .default-image {
    width: 100% !important;
    max-width: var(--e6-container-max-width) !important;
    margin: 0 auto !important;
    display: block !important;
    border-radius: var(--e6-row-image-radius) !important;
    overflow: hidden !important;
    transition: opacity var(--e6-hover-transition);
    box-sizing: border-box !important;
}

/* ================================================
   PLAYER ROW - HOVER FUNCTIONALITY
   Interactive player profile row with hover/click
   ================================================ */

.about-page-element.element-6 .player-row {
    position: relative;
    cursor: pointer;
    transition: all var(--e6-hover-transition);
    overflow: hidden !important;
    margin: var(--e6-banner-gap) 0;
    box-sizing: border-box;
}

.about-page-element.element-6 .player-row .row-content {
    position: relative;
    width: 100%;
    max-width: var(--e6-container-max-width);
    margin: 0 auto;
    padding: var(--e6-content-padding);
    overflow: hidden !important;
    box-sizing: border-box;
}

/* ================================================
   HOVER OVERLAY
   Bio content that appears on hover (desktop)
   ================================================ */

.about-page-element.element-6 .hover-content {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: var(--e6-container-max-width);
    height: 100%;
    opacity: 0;
    transition: opacity var(--e6-overlay-transition);
    background: var(--e6-overlay-background);
    border-radius: var(--e6-row-image-radius);
    padding: var(--e6-content-padding);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden !important;
}

/* Desktop hover behavior - show overlay when hovering */
@media (min-width: 769px) {
    .about-page-element.element-6 .player-row:hover .hover-content {
        opacity: 1;
    }
}

/* ================================================
   TWO-COLUMN LAYOUT
   Split layout for headshot and bio text
   ================================================ */

.about-page-element.element-6 .two-column {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--e6-two-column-gap);
    align-items: stretch;
    margin: 0 auto;
    width: 100%;
    max-width: var(--e6-container-max-width);
    height: 100%;
    padding: var(--e6-content-padding);
    box-sizing: border-box;
    overflow: hidden !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.about-page-element.element-6 .column-left,
.about-page-element.element-6 .column-right {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden !important;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;
}

/* Left column - headshot image */
.about-page-element.element-6 .column-left {
    justify-content: center;
}

/* Right column - player bio text */
.about-page-element.element-6 .column-right {
    justify-content: flex-start;
    align-items: center;
}

/* ================================================
   PLAYER HEADSHOT
   Player photo with hover glow effect
   ================================================ */

/* Headshot container - maintains square aspect ratio */
.about-page-element.element-6 .player-headshot-placeholder {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: var(--e6-player-headshot-size) !important;
    height: var(--e6-player-headshot-size) !important;
    max-width: var(--e6-player-headshot-size) !important;
    max-height: var(--e6-player-headshot-size) !important;
    min-width: var(--e6-player-headshot-size) !important;
    min-height: var(--e6-player-headshot-size) !important;
    aspect-ratio: 1 / 1 !important;
    overflow: hidden !important;
    border-radius: var(--e6-row-image-radius) !important;
    border: var(--e6-player-headshot-border) !important;
    background: var(--e6-background-color) !important;
    pointer-events: auto !important;
    margin: 0 auto !important;
    position: relative !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    align-self: center !important;
    justify-self: center !important;
    transition: all var(--e6-hover-transition) !important;
}

/* Headshot image styling */
.about-page-element.element-6 .player-headshot-image {
    width: 100% !important;
    height: 100% !important;
    border-radius: var(--e6-row-image-radius) !important;
    object-fit: cover !important;
    object-position: center center !important;
    border: none !important;
    display: block !important;
    flex-shrink: 0 !important;
    transition: transform var(--e6-hover-transition), filter var(--e6-hover-transition) !important;
    transform: scale(1) !important;
    max-width: 100% !important;
    max-height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
}

/* Headshot hover effect - grow and brighten */
.about-page-element.element-6 .player-headshot-image:hover {
    transform: scale(var(--e6-headshot-hover-scale));
    filter: brightness(var(--e6-headshot-hover-brightness));
}

/* Pink glow hover effect on headshot container */
.about-page-element.element-6 .player-headshot-placeholder:hover {
    box-shadow: 
        0 0 var(--e6-headshot-glow-near) var(--e6-glow-color),
        0 0 var(--e6-headshot-glow-mid) rgba(255, 0, 255, 0.4),
        0 0 var(--e6-headshot-glow-far) rgba(255, 0, 255, 0.2) !important;
    transform: translateY(-2px) scale(1.02) !important;
    transition: all var(--e6-hover-transition) !important;
}

/* ================================================
   PLAYER BIO TEXT
   Player name, role, description, and achievements
   ================================================ */

.about-page-element.element-6 .player-profile {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    padding-left: var(--e6-content-padding);
    overflow: hidden !important;
    max-height: 100% !important;
}

/* Player name - large uppercase heading */
.about-page-element.element-6 .player-profile h3 {
    font-size: var(--e6-player-name-size) !important;
    font-weight: var(--e6-player-name-weight) !important;
    margin-bottom: 0.3rem !important;
    color: var(--e6-text-color) !important;
    text-transform: uppercase !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    max-width: 100% !important;
}

/* Player role - subtitle below name */
.about-page-element.element-6 .player-role {
    font-size: var(--e6-player-role-size);
    color: var(--e6-text-color);
    margin-bottom: 0.8rem;
    font-weight: var(--e6-player-role-weight);
}

/* Player description - bio paragraph */
.about-page-element.element-6 .player-description {
    font-size: var(--e6-player-description-size);
    line-height: var(--e6-player-description-line-height);
    color: var(--e6-text-color);
    margin-bottom: 1rem;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    max-width: 100%;
}

/* Achievements container */
.about-page-element.element-6 .player-achievements {
    margin-top: auto;
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
}

/* Individual achievement lines */
.about-page-element.element-6 .player-achievements p {
    font-size: var(--e6-player-achievement-size);
    color: var(--e6-text-color);
    margin-bottom: 0.2rem;
    font-weight: var(--e6-player-achievement-weight);
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
}

.about-page-element.element-6 .player-achievements p:last-child {
    margin-bottom: 0;
}

/* ================================================
   FADE-UP ANIMATION
   Elements fade in and move up when scrolled into view
   ================================================ */

.about-page-element.element-6 .fade-up {
    opacity: 0;
    transform: translateY(var(--e6-fade-up-distance));
    transition: all var(--e6-fade-up-duration) ease;
}

.about-page-element.element-6 .fade-up.active {
    opacity: 1;
    transform: translateY(0);
}

/* ================================================
   MOBILE RESPONSIVE STYLES
   Tablet and phone optimizations
   ================================================ */

@media (max-width: 768px) {
    /* Disable hover effects on mobile - only allow click/tap */
    .about-page-element.element-6 .player-row:hover .hover-content:not(.mobile-active) {
        opacity: 0 !important;
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
    
    .about-page-element.element-6 .player-row:hover .default-image {
        opacity: 1 !important;
        display: block !important;
        visibility: visible !important;
    }
    
    /* Force disable all hover transitions on mobile */
    .about-page-element.element-6 .hover-content:not(.mobile-active) {
        transition: none !important;
        opacity: 0 !important;
        display: none !important;
        pointer-events: none !important;
    }
    
    .about-page-element.element-6 .default-image {
        transition: none !important;
    }
    
    /* Enable click/tap to expand player profile */
    .about-page-element.element-6 .player-row.mobile-active:hover .hover-content {
        opacity: 1 !important;
        display: block !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }
    
    /* Ensure headshot links work on mobile */
    .about-page-element.element-6 .player-headshot-image,
    .about-page-element.element-6 .player-headshot-placeholder a {
        pointer-events: auto !important;
        cursor: pointer !important;
    }
    
    /* Reduce spacing on mobile */
    .about-page-element.element-6 .player-row {
        margin: var(--e6-mobile-banner-gap) 0;
    }
    
    .about-page-element.element-6 .row-6 {
        padding: var(--e6-mobile-row-padding);
    }
    
    .about-page-element.element-6 .row-content {
        padding: var(--e6-mobile-content-padding) !important;
    }
    
    /* Show banner on mobile */
    .about-page-element.element-6 .player-row .default-image {
        display: block;
        margin-bottom: 2rem;
        cursor: pointer;
    }
    
    .about-page-element.element-6 .player-row .row-image {
        display: block;
        transition: none;
    }
    
    /* Enhanced mobile tap feedback */
    .about-page-element.element-6 .player-row .default-image {
        cursor: pointer !important;
        -webkit-tap-highlight-color: rgba(255, 255, 255, 0.2) !important;
        -webkit-touch-callout: none !important;
        -webkit-user-select: none !important;
        -khtml-user-select: none !important;
        -moz-user-select: none !important;
        -ms-user-select: none !important;
        user-select: none !important;
        transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    }
    
    /* Tap press effect */
    .about-page-element.element-6 .player-row .default-image:active {
        transform: scale(var(--e6-mobile-tap-scale)) !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
    }

    /* Mobile expanded state - replaces banner */
    .about-page-element.element-6 .player-row.mobile-active .default-image {
        display: none !important;
        opacity: 0 !important;
    }
    
    .about-page-element.element-6 .hover-content.mobile-active {
        opacity: 1 !important;
        visibility: visible !important;
        display: block !important;
        position: static !important;
        background: var(--e6-background-color) !important;
        border-radius: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        left: 0 !important;
        right: 0 !important;
        transform: none !important;
        margin-left: calc(-50vw + 50%) !important;
    }
    
    /* Mobile column layout - stacked vertically */
    .about-page-element.element-6 .hover-content.mobile-active .two-column {
        display: flex !important;
        flex-direction: column !important;
        gap: var(--e6-mobile-column-gap) !important;
        text-align: center !important;
        grid-template-columns: none !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 0 !important;
    }
    
    .about-page-element.element-6 .hover-content.mobile-active .column-left,
    .about-page-element.element-6 .hover-content.mobile-active .column-right {
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
        margin: 0 auto !important;
        padding: 0 !important;
    }
    
    /* Smaller headshot on mobile */
    .about-page-element.element-6 .player-headshot-placeholder {
        width: var(--e6-mobile-headshot-size) !important;
        height: var(--e6-mobile-headshot-size) !important;
        max-width: var(--e6-mobile-headshot-size) !important;
        max-height: var(--e6-mobile-headshot-size) !important;
        min-width: var(--e6-mobile-headshot-size) !important;
        min-height: var(--e6-mobile-headshot-size) !important;
        margin: 0 auto;
        aspect-ratio: 1;
        border-radius: var(--e6-row-image-radius);
        border: var(--e6-player-headshot-border);
        background: var(--e6-background-color);
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Center bio text on mobile */
    .about-page-element.element-6 .player-profile {
        padding: var(--e6-mobile-content-padding);
        text-align: center;
        overflow: hidden;
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
        box-sizing: border-box;
    }
    
    .about-page-element.element-6 .player-profile h3 {
        font-size: var(--e6-player-name-size) !important;
        margin-bottom: 1rem;
    }
    
    .about-page-element.element-6 .player-role {
        font-size: var(--e6-player-role-size);
        margin-bottom: 1rem;
    }
    
    .about-page-element.element-6 .player-description {
        font-size: 0.9rem;
        margin-bottom: 1rem;
    }
    
    .about-page-element.element-6 .player-achievements p {
        font-size: 0.9rem;
    }
}

/* Tablet responsive (1024px and below) */
@media (max-width: 1024px) {
    .about-page-element.element-6 .two-column {
        grid-template-columns: 1fr;
        gap: 2rem;
        text-align: center;
        padding: var(--e6-content-padding);
    }
    
    .about-page-element.element-6 .row-6 {
        padding: var(--e6-mobile-row-padding);
    }
    
    .about-page-element.element-6 .player-profile {
        padding-left: 0;
        text-align: center;
    }
}

/* Small phones (600px and below) */
@media (max-width: 600px) {
    .about-page-element.element-6 .row-6 {
        padding: var(--e6-mobile-row-padding);
    }
    
    .about-page-element.element-6 .player-profile {
        padding: var(--e6-mobile-content-padding);
        overflow: hidden;
    }
    
    .about-page-element.element-6 .player-role {
        font-size: 0.9rem;
    }
    
    .about-page-element.element-6 .player-description {
        font-size: 0.8rem;
        line-height: 1.5;
    }
    
    .about-page-element.element-6 .player-achievements p {
        font-size: 0.8rem;
        margin-bottom: 0.2rem;
    }
}
}
#fw-section-custom-html-287305fe-4553-4fa2-8824-e949027e3841 {

/* ================================================
   ABOUT PAGE ELEMENT 7 - ABUZAH PLAYER PROFILE
   Banner with hover overlay showing player bio
   ================================================ */

/* ========================================
   EASILY CHANGEABLE VALUES - ABUZAH PROFILE
   Customize these variables to modify the Abuzah player profile section
   ======================================== */

.about-page-element.element-7 {
    /* === SPACING & LAYOUT === */
    --e7-row-padding: 2rem;                   /* Desktop row padding (32px) - Space around entire row */
    --e7-mobile-row-padding: 0.5rem;          /* Mobile row padding (8px) - 75% reduction for mobile */
    --e7-banner-gap: 2rem;                    /* Gap between player banners (32px) - Space between profile sections */
    --e7-mobile-banner-gap: 0.5rem;           /* Mobile gap (8px) - 75% reduction for mobile */
    --e7-container-max-width: 1200px;         /* Maximum content width (1200px) - Constrains banner width on large screens */
    --e7-content-padding: 2rem;               /* Content inner padding (32px) - Space inside profile content */
    --e7-mobile-content-padding: 1rem, 1rem;        /* Mobile content padding (16px) - Reduced padding for mobile */
    
    /* === TYPOGRAPHY === */
    --e7-player-name-size: 4em;               /* Player name size (64px) - Large heading for player name */
    --e7-player-role-size: 1rem;              /* Player role text (16px) - Size for "Main AR for FaZe Vegas" */
    --e7-player-description-size: 0.85rem;    /* Description text (13.6px) - Bio paragraph font size */
    --e7-player-achievement-size: 0.85rem;    /* Achievement text (13.6px) - Accomplishments list font size */
    
    /* === COLORS === */
    --e7-text-color: #ffffff;                 /* Text color (white) - All text within profile */
    --e7-overlay-bg: #000000;                 /* Overlay background (black) - Background when hovering over banner */
    --e7-headshot-bg: #000000;                /* Headshot background (black) - Behind player photo */
    
    /* === IMAGES & BORDERS === */
    --e7-row-image-radius: 12px;              /* Banner border radius (12px) - Rounded corners on banner */
    --e7-player-headshot-size: 280px;         /* Desktop headshot container (280px) - Player photo size on desktop */
    --e7-mobile-headshot-size: 200px;         /* Mobile headshot container (200px) - Smaller photo for mobile centering */
    --e7-player-headshot-border: none;        /* Border outline (none) - Remove border around player photo */
    
    /* === HOVER EFFECTS === */
    --e7-hover-transition: 0.3s ease;         /* Hover transition speed (0.3 seconds) - Smooth animation timing */
    --e7-hover-opacity-transition: 0.3s ease; /* Opacity transition (0.3 seconds) - Fade in/out timing */
    --e7-headshot-hover-scale: 1.05;          /* Headshot hover scale (1.05) - Photo grows 5% on hover */
    --e7-headshot-hover-brightness: 1.1;      /* Brightness on hover (1.1) - Photo gets 10% brighter */
    --e7-pink-glow-color: rgba(255, 0, 255, 0.6);  /* Pink glow color - Magenta glow on photo hover */
    --e7-pink-glow-medium: rgba(255, 0, 255, 0.4); /* Medium pink glow - Secondary glow layer */
    --e7-pink-glow-light: rgba(255, 0, 255, 0.2);  /* Light pink glow - Outer glow layer */
    --e7-container-hover-scale: 1.02;         /* Container scale on hover (1.02) - Slight growth on hover */
    --e7-container-hover-lift: -2px;          /* Container lift on hover (2px up) - Elevates container slightly */
    
    /* === ANIMATION === */
    --e7-fade-up-distance: 30px;              /* Fade up animation distance (30px) - Elements slide up from this distance */
    --e7-fade-transition: all 0.6s ease;      /* Fade transition timing (0.6 seconds) - Scroll animation speed */
    --e7-column-transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;  /* Column animation - Smooth slide-in effect */
    
    /* === RESPONSIVE BREAKPOINTS === */
    --e7-tablet-breakpoint: 1024px;           /* Tablet breakpoint (1024px) - When to switch to tablet layout */
    --e7-mobile-breakpoint: 768px;            /* Mobile breakpoint (768px) - When to switch to mobile layout */
    --e7-small-mobile-breakpoint: 600px;      /* Small mobile breakpoint (600px) - For very small screens */
    
    /* === MOBILE SPECIFIC === */
    --e7-mobile-column-gap: 2rem;             /* Mobile column gap (32px) - Space between photo and bio on mobile */
    --e7-mobile-tap-highlight: rgba(255, 255, 255, 0.2);  /* Tap highlight color - Visual feedback when tapping on mobile */
    --e7-mobile-active-scale: 0.98;           /* Active press scale (0.98) - Slight shrink when tapping */
    --e7-mobile-active-shadow: 0 2px 8px rgba(0,0,0,0.3); /* Active press shadow - Shadow appears when tapping */
    
    /* === LEGACY COMPATIBILITY === */
    /* These maintain compatibility with existing code */
    --row-image-radius: var(--e7-row-image-radius);
    --player-headshot-size: var(--e7-player-headshot-size);
    --player-headshot-border: var(--e7-player-headshot-border);
    --player-role-size: var(--e7-player-role-size);
    --player-description-size: var(--e7-player-description-size);
    --player-achievement-size: var(--e7-player-achievement-size);
}

/* ================================================
   SECTION STRUCTURE
   Base layout and positioning
   ================================================ */

/* Row Sections - Main container for each player banner */
.about-page-element.element-7 .row-section {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    position: relative;
    overflow-x: hidden;  /* Prevent horizontal scrolling */
    box-sizing: border-box;
}

/* Row Content - Inner content wrapper with max-width constraint */
.about-page-element.element-7 .row-content {
    width: 100%;
    max-width: var(--e7-container-max-width);
    margin: 0 auto;
    padding: var(--e7-content-padding);
    position: relative;
    box-sizing: border-box;
}

/* Banner Images - Full-width player banners */
.about-page-element.element-7 .row-image {
    width: 100%;
    height: auto;
    display: block;
    margin: 0;
    /* Enhanced image rendering for crisp SVGs */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
    -ms-interpolation-mode: bicubic;
}

/* ================================================
   PLAYER ROWS - HOVER FUNCTIONALITY
   Desktop hover behavior showing player bio
   ================================================ */

/* Player Rows - Interactive banner containers */
.about-page-element.element-7 .player-row {
    position: relative;
    cursor: pointer;
    transition: all var(--e7-hover-transition);
    overflow: hidden !important;
    margin: var(--e7-banner-gap) 0;
    box-sizing: border-box;
}

.about-page-element.element-7 .player-row .row-content {
    position: relative;
    width: 100%;
    max-width: var(--e7-container-max-width);
    margin: 0 auto;
    padding: var(--e7-content-padding);
    overflow: hidden !important;
    box-sizing: border-box;
}

/* Default Banner Image - Visible by default */
.about-page-element.element-7 .default-image {
    width: 100% !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    display: block !important;
    border-radius: var(--row-image-radius) !important;
    overflow: hidden !important;
    transition: opacity var(--e7-hover-opacity-transition);
    box-sizing: border-box !important;
}

/* Hover Content - Overlay that appears on hover (desktop only) */
.about-page-element.element-7 .hover-content {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 1200px;
    height: 100%;
    opacity: 0;
    transition: opacity var(--e7-hover-opacity-transition);
    background: var(--e7-overlay-bg);
    border-radius: var(--row-image-radius);
    padding: 2rem;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden !important;  /* Prevent scrollbars in overlay */
}

/* Desktop Hover Behavior - Show overlay on hover (769px and above) */
@media (min-width: 769px) {
    .about-page-element.element-7 .player-row:hover .hover-content {
        opacity: 1;
    }
}

/* ================================================
   TWO COLUMN LAYOUT
   Desktop layout with photo on left, bio on right
   ================================================ */

/* Two Column Grid - Split layout for desktop */
.about-page-element.element-7 .two-column {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;  /* 64px gap between columns */
    align-items: stretch;
    margin: 0 auto;
    width: 100%;
    max-width: 1200px;
    height: 100%;
    padding: 2rem;
    box-sizing: border-box;
    overflow: hidden !important;
}

/* Column Containers - Left (photo) and Right (bio) */
.about-page-element.element-7 .column-left,
.about-page-element.element-7 .column-right {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden !important;
    transition: var(--e7-column-transition);
}

/* Left Column - Centers the player headshot */
.about-page-element.element-7 .column-left {
    justify-content: center;
}

/* Right Column - Aligns bio text */
.about-page-element.element-7 .column-right {
    justify-content: flex-start;
    align-items: center;
}

/* ================================================
   PLAYER HEADSHOT CONTAINER
   Square photo container with hover effects
   ================================================ */

/* Headshot Container - Perfect square with aspect ratio 1:1 */
.about-page-element.element-7 .player-headshot-placeholder {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    /* Perfect 1:1 aspect ratio container */
    width: var(--player-headshot-size) !important;
    height: var(--player-headshot-size) !important;
    max-width: var(--player-headshot-size) !important;
    max-height: var(--player-headshot-size) !important;
    min-width: var(--player-headshot-size) !important;
    min-height: var(--player-headshot-size) !important;
    aspect-ratio: 1 / 1 !important;
    /* Styling */
    overflow: hidden !important;
    border-radius: var(--row-image-radius) !important;
    border: var(--e7-player-headshot-border) !important;
    background: var(--e7-headshot-bg) !important;
    /* Positioning */
    margin: 0 auto !important;
    position: relative !important;
    box-sizing: border-box !important;
    align-self: center !important;
    justify-self: center !important;
    /* Interaction */
    pointer-events: auto !important;  /* Ensure links work */
    transition: all var(--e7-hover-transition) !important;
}

/* Headshot Image - Player photo */
.about-page-element.element-7 .player-headshot-image {
    width: var(--player-headshot-size);
    height: var(--player-headshot-size);
    border-radius: var(--row-image-radius);
    object-fit: cover;  /* Fill container while maintaining aspect ratio */
    object-position: center center;  /* Center on face */
    border: var(--player-headshot-border);
    display: block;
    flex-shrink: 0;
    transition: transform var(--e7-hover-transition), border-color var(--e7-hover-transition);
    transform: scale(1);  /* Default scale */
    max-width: 100%;
    max-height: 100%;
    pointer-events: auto;  /* Ensure clickability */
    cursor: pointer;
}

/* Headshot Image Hover - Subtle zoom and brightness increase */
.about-page-element.element-7 .player-headshot-image:hover {
    transform: scale(var(--e7-headshot-hover-scale));
    filter: brightness(var(--e7-headshot-hover-brightness));
}

/* Pink Glow Hover Effect - Magenta glow around photo container */
.about-page-element.element-7 .player-headshot-placeholder:hover {
    box-shadow: 
        0 0 20px var(--e7-pink-glow-color), 
        0 0 40px var(--e7-pink-glow-medium), 
        0 0 60px var(--e7-pink-glow-light) !important;
    transform: translateY(var(--e7-container-hover-lift)) scale(var(--e7-container-hover-scale)) !important;
    transition: all var(--e7-hover-transition) !important;
}

/* ================================================
   PLAYER PROFILE TEXT
   Bio content and styling
   ================================================ */

/* Player Profile Container - Bio text wrapper */
.about-page-element.element-7 .player-profile {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    padding-left: 2rem;
    overflow: hidden !important;  /* Prevent scrollbars */
    max-height: 100% !important;
}

/* Player Name - Large heading */
.about-page-element.element-7 .player-profile h3 {
    font-size: var(--e7-player-name-size) !important;
    font-weight: 700 !important;
    margin-bottom: 0.3rem !important;  /* 4.8px */
    color: var(--e7-text-color) !important;
    text-transform: uppercase !important;
    /* Prevent text overflow */
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    max-width: 100% !important;
}

/* Player Role - Subtitle (e.g., "Main AR for FaZe Vegas") */
.about-page-element.element-7 .player-role {
    font-size: var(--player-role-size);
    color: var(--e7-text-color);
    margin-bottom: 0.8rem;  /* 12.8px */
    font-weight: 600;
}

/* Player Description - Bio paragraph */
.about-page-element.element-7 .player-description {
    font-size: var(--player-description-size);
    line-height: 1.4;
    color: var(--e7-text-color);
    margin-bottom: 1rem;  /* 16px */
    /* Prevent text overflow */
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    max-width: 100%;
}

/* Player Achievements Container */
.about-page-element.element-7 .player-achievements {
    margin-top: auto;
    /* Prevent text overflow */
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
}

/* Achievement List Items */
.about-page-element.element-7 .player-achievements p {
    font-size: var(--player-achievement-size);
    color: var(--e7-text-color);
    margin-bottom: 0.2rem;  /* 3.2px */
    font-weight: 600;
    /* Prevent text overflow */
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
}

.about-page-element.element-7 .player-achievements p:last-child {
    margin-bottom: 0;
}

/* ================================================
   ROW SPECIFIC BACKGROUNDS
   Row 7 specific styling
   ================================================ */

.about-page-element.element-7 .row-7 {
    background-color: var(--e7-overlay-bg);
    padding: 0;
}

/* Desktop: Clean alignment without extra padding */
@media (min-width: 1024px) {
    .about-page-element.element-7 .row-7 {
        padding: 0;
    }
}

.about-page-element.element-7 .row-7 .row-image {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    display: block;
}

/* ================================================
   FADE UP ANIMATION
   Scroll-triggered fade-in animation
   ================================================ */

/* Fade Up - Initial hidden state */
.about-page-element.element-7 .fade-up {
    opacity: 0;
    transform: translateY(var(--e7-fade-up-distance));
    transition: var(--e7-fade-transition);
}

/* Fade Up Active - Visible state after scrolling into view */
.about-page-element.element-7 .fade-up.active {
    opacity: 1;
    transform: translateY(0);
}

/* ================================================
   MOBILE RESPONSIVE STYLES
   Click-to-expand behavior for mobile (768px and below)
   ================================================ */

@media (max-width: 768px) {
    /* Disable hover effects completely on mobile */
    .about-page-element.element-7 .player-row:hover .hover-content:not(.mobile-active) {
        opacity: 0 !important;
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
    
    /* Keep banner visible when hovering (mobile hover is usually accidental) */
    .about-page-element.element-7 .player-row:hover .default-image {
        opacity: 1 !important;
        display: block !important;
        visibility: visible !important;
    }
    
    /* Force disable all hover transitions on mobile */
    .about-page-element.element-7 .hover-content:not(.mobile-active) {
        transition: none !important;
        opacity: 0 !important;
        display: none !important;
        pointer-events: none !important;
    }
    
    .about-page-element.element-7 .default-image {
        transition: none !important;
    }
    
    /* Show content only when explicitly activated (clicked) */
    .about-page-element.element-7 .player-row.mobile-active:hover .hover-content {
        opacity: 1 !important;
        display: block !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }
    
    /* Ensure headshot links work properly on mobile */
    .about-page-element.element-7 .player-headshot-image,
    .about-page-element.element-7 .player-headshot-placeholder a {
        pointer-events: auto !important;
        cursor: pointer !important;
    }
    
    /* Mobile spacing adjustments */
    .about-page-element.element-7 .player-row {
        margin: var(--e7-mobile-banner-gap) 0;
    }
    
    .about-page-element.element-7 .row-7 {
        padding: var(--e7-mobile-row-padding);
    }
    
    .about-page-element.element-7 .row-content {
        padding: var(--e7-mobile-content-padding) !important;
    }
    
    /* Show banner images for clicking */
    .about-page-element.element-7 .player-row .default-image {
        display: block;
        margin-bottom: 2rem;
        cursor: pointer;
    }
    
    .about-page-element.element-7 .player-row .row-image {
        display: block;
        transition: none;
    }
    
    /* Enhanced mobile tap functionality with visual feedback */
    .about-page-element.element-7 .player-row .default-image {
        cursor: pointer !important;
        -webkit-tap-highlight-color: var(--e7-mobile-tap-highlight) !important;
        -webkit-touch-callout: none !important;
        -webkit-user-select: none !important;
        -khtml-user-select: none !important;
        -moz-user-select: none !important;
        -ms-user-select: none !important;
        user-select: none !important;
        transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    }
    
    /* Active press effect - slight shrink and shadow */
    .about-page-element.element-7 .player-row .default-image:active {
        transform: scale(var(--e7-mobile-active-scale)) !important;
        box-shadow: var(--e7-mobile-active-shadow) !important;
    }

    /* Mobile-active state: Banner is hidden, profile content shown */
    .about-page-element.element-7 .player-row.mobile-active .default-image {
        display: none !important;
        opacity: 0 !important;
    }
    
    /* Mobile-active content: Full-width profile display */
    .about-page-element.element-7 .hover-content.mobile-active {
        opacity: 1 !important;
        visibility: visible !important;
        display: block !important;
        position: static !important;
        background: var(--e7-overlay-bg) !important;
        border-radius: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        left: 0 !important;
        right: 0 !important;
        transform: none !important;
        margin-left: calc(-50vw + 50%) !important;  /* Full viewport width */
    }
    
    /* Mobile-active two-column: Stack vertically */
    .about-page-element.element-7 .hover-content.mobile-active .two-column {
        display: flex !important;
        flex-direction: column !important;
        gap: var(--e7-mobile-column-gap) !important;
        text-align: center !important;
        grid-template-columns: none !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 0 !important;
    }
    
    /* Mobile-active columns: Full width stacked layout */
    .about-page-element.element-7 .hover-content.mobile-active .column-left,
    .about-page-element.element-7 .hover-content.mobile-active .column-right {
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
        margin: 0 auto !important;
        padding: 0 !important;
    }
    
    /* Ensure content flows naturally */
    .about-page-element.element-7 .player-row.mobile-active {
        position: relative;
        z-index: 1;
    }
    
    /* Default hover content (not clicked) - completely hidden */
    .about-page-element.element-7 .hover-content {
        padding: 2rem;
        left: 0;
        transform: none;
        display: none !important;
        position: relative;
        opacity: 0 !important;
        visibility: hidden !important;
        background: transparent;
        border-radius: 0;
        overflow: hidden;
        pointer-events: none;
        width: 100% !important;
        margin: 0 !important;
    }
    
    /* Active content replaces banner */
    .about-page-element.element-7 .hover-content.mobile-active {
        display: block !important;
        position: static !important;
        margin-top: 0 !important;
    }
    
    /* Mobile two-column layout */
    .about-page-element.element-7 .hover-content .two-column {
        grid-template-columns: 1fr;
        gap: 2rem;
        text-align: center;
        padding: 1rem;
        overflow: hidden;
        margin: 0 auto;
    }
    
    /* Column order on mobile */
    .about-page-element.element-7 .hover-content .column-left {
        order: 1;
        width: 100%;
    }
    
    .about-page-element.element-7 .hover-content .column-right {
        order: 2;
        width: 100%;
    }
    
    /* Mobile headshot sizing - smaller for better centering */
    .about-page-element.element-7 .player-headshot-placeholder {
        width: var(--e7-mobile-headshot-size) !important;
        height: var(--e7-mobile-headshot-size) !important;
        max-width: var(--e7-mobile-headshot-size) !important;
        max-height: var(--e7-mobile-headshot-size) !important;
        min-width: var(--e7-mobile-headshot-size) !important;
        min-height: var(--e7-mobile-headshot-size) !important;
        margin: 0 auto;
        aspect-ratio: 1;
        border-radius: var(--e7-row-image-radius);
        border: var(--e7-player-headshot-border);
        background: var(--e7-headshot-bg);
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .about-page-element.element-7 .player-headshot-image {
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        object-fit: cover !important;
        object-position: center center !important;
        border-radius: var(--e7-row-image-radius) !important;
        border: none !important;
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Mobile profile text styling */
    .about-page-element.element-7 .player-profile {
        padding: 2rem;
        text-align: center;
        overflow: hidden;
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
        box-sizing: border-box;
    }
    
    .about-page-element.element-7 .player-profile h3 {
        font-size: var(--e7-player-name-size) !important;
        margin-bottom: 1rem;
    }
    
    .about-page-element.element-7 .player-role {
        font-size: 1rem;
        margin-bottom: 1rem;
    }
    
    .about-page-element.element-7 .player-description {
        font-size: 0.9rem;
        margin-bottom: 1rem;
    }
    
    .about-page-element.element-7 .player-achievements p {
        font-size: 0.9rem;
    }
}

/* ================================================
   TABLET RESPONSIVE STYLES
   (1024px and below)
   ================================================ */

@media (max-width: 1024px) {
    /* Stack columns vertically on tablets */
    .about-page-element.element-7 .two-column {
        grid-template-columns: 1fr;
        gap: 2rem;
        text-align: center;
        padding: 2rem;
    }
    
    .about-page-element.element-7 .row-7 {
        padding: 1rem;
    }
    
    /* Center profile text on tablets */
    .about-page-element.element-7 .player-profile {
        padding-left: 0;
        text-align: center;
    }
    
    /* Maintain desktop headshot size on tablets */
    .about-page-element.element-7 .player-headshot-image {
        width: var(--player-headshot-size);
        height: var(--player-headshot-size);
        margin: 0 auto;
        border-radius: var(--row-image-radius);
        object-fit: cover;
        border: var(--player-headshot-border);
    }
    
    .about-page-element.element-7 .hover-content {
        padding: 2rem;
        left: 50%;
        transform: translateX(-50%);
        max-width: 1200px;
        overflow: hidden;
    }
    
    .about-page-element.element-7 .player-profile h3 {
        font-size: var(--e7-player-name-size) !important;
    }
}

/* ================================================
   SMALL MOBILE RESPONSIVE STYLES
   (600px and below)
   ================================================ */

@media (max-width: 600px) {
    .about-page-element.element-7 .row-7 {
        padding: 1rem;
    }
    
    /* Full screen width on small mobile */
    .about-page-element.element-7 .row-content {
        padding: 0 !important;
    }
    
    .about-page-element.element-7 .player-headshot-image {
        width: var(--player-headshot-size);
        height: var(--player-headshot-size);
        margin: 0 auto;
        border-radius: var(--row-image-radius);
        object-fit: cover;
        border: var(--player-headshot-border);
    }
    
    .about-page-element.element-7 .hover-content {
        padding: 2rem;
        left: 50%;
        transform: translateX(-50%);
        max-width: 1200px;
        overflow: hidden;
    }
    
    .about-page-element.element-7 .player-profile {
        padding: 2rem;
        overflow: hidden;
    }
    
    .about-page-element.element-7 .player-profile h3 {
        font-size: var(--e7-player-name-size) !important;
    }
    
    .about-page-element.element-7 .player-role {
        font-size: 0.9rem;
    }
    
    .about-page-element.element-7 .player-description {
        font-size: 0.8rem;
        line-height: 1.5;
    }
    
    .about-page-element.element-7 .player-achievements p {
        font-size: 0.8rem;
        margin-bottom: 0.2rem;
    }
}
}
#fw-section-custom-html-9d95e1bc-4560-41d9-b58a-aa0ee340f706 {

/* ================================================
   ABOUT PAGE ELEMENT 4 - 04 PLAYER PROFILE
   Banner with hover overlay showing player bio
   ================================================ */

/* ========================================
   EASILY CHANGEABLE VALUES - 04 PROFILE
   Customize these variables to modify the 04 player profile section
   ======================================== */

.about-page-element.element-4 {
    /* === SPACING & LAYOUT === */
    --e4-row-padding: 2rem;                   /* Desktop row padding (32px) - Space around entire row */
    --e4-mobile-row-padding: 0.5rem;          /* Mobile row padding (8px) - 75% reduction for mobile */
    --e4-banner-gap: 2rem;                    /* Gap between player banners (32px) - Space between profile sections */
    --e4-mobile-banner-gap: 0.5rem;           /* Mobile gap (8px) - 75% reduction for mobile */
    --e4-container-max-width: 1200px;         /* Maximum content width (1200px) - Constrains banner width on large screens */
    --e4-content-padding: 2rem;               /* Content inner padding (32px) - Space inside profile content */
    --e4-mobile-content-padding: 1rem;        /* Mobile content padding (16px) - Reduced padding for mobile */
    
    /* === TYPOGRAPHY === */
    --e4-player-name-size: 4em;               /* Player name size (64px) - Large heading for player name */
    --e4-player-role-size: 1rem;              /* Player role text (16px) - Size for "SMG player for FaZe Vegas" */
    --e4-player-description-size: 0.85rem;    /* Description text (13.6px) - Bio paragraph font size */
    --e4-player-achievement-size: 0.85rem;    /* Achievement text (13.6px) - Accomplishments list font size */
    
    /* === COLORS === */
    --e4-text-color: #ffffff;                 /* Text color (white) - All text within profile */
    --e4-overlay-bg: #000000;                 /* Overlay background (black) - Background when hovering over banner */
    --e4-headshot-bg: #000000;                /* Headshot background (black) - Behind player photo */
    
    /* === IMAGES & BORDERS === */
    --e4-row-image-radius: 12px;              /* Banner border radius (12px) - Rounded corners on banner */
    --e4-player-headshot-size: 280px;         /* Desktop headshot container (280px) - Player photo size on desktop */
    --e4-mobile-headshot-size: 200px;         /* Mobile headshot container (200px) - Smaller photo for mobile centering */
    --e4-player-headshot-border: none;        /* Border outline (none) - Remove border around player photo */
    
    /* === HOVER EFFECTS === */
    --e4-hover-transition: 0.3s ease;         /* Hover transition speed (0.3 seconds) - Smooth animation timing */
    --e4-hover-opacity-transition: 0.3s ease; /* Opacity transition (0.3 seconds) - Fade in/out timing */
    --e4-headshot-hover-scale: 1.05;          /* Headshot hover scale (1.05) - Photo grows 5% on hover */
    --e4-headshot-hover-brightness: 1.1;      /* Brightness on hover (1.1) - Photo gets 10% brighter */
    --e4-pink-glow-color: rgba(255, 0, 255, 0.6);  /* Pink glow color - Magenta glow on photo hover */
    --e4-pink-glow-medium: rgba(255, 0, 255, 0.4); /* Medium pink glow - Secondary glow layer */
    --e4-pink-glow-light: rgba(255, 0, 255, 0.2);  /* Light pink glow - Outer glow layer */
    --e4-container-hover-scale: 1.02;         /* Container scale on hover (1.02) - Slight growth on hover */
    --e4-container-hover-lift: -2px;          /* Container lift on hover (2px up) - Elevates container slightly */
    
    /* === ANIMATION === */
    --e4-fade-up-distance: 30px;              /* Fade up animation distance (30px) - Elements slide up from this distance */
    --e4-fade-transition: all 0.6s ease;      /* Fade transition timing (0.6 seconds) - Scroll animation speed */
    --e4-column-transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;  /* Column animation - Smooth slide-in effect */
    
    /* === RESPONSIVE BREAKPOINTS === */
    --e4-tablet-breakpoint: 1024px;           /* Tablet breakpoint (1024px) - When to switch to tablet layout */
    --e4-mobile-breakpoint: 768px;            /* Mobile breakpoint (768px) - When to switch to mobile layout */
    --e4-small-mobile-breakpoint: 600px;      /* Small mobile breakpoint (600px) - For very small screens */
    
    /* === MOBILE SPECIFIC === */
    --e4-mobile-column-gap: 1rem;             /* Mobile column gap (16px) - Space between photo and bio on mobile */
    --e4-mobile-tap-highlight: rgba(255, 255, 255, 0.2);  /* Tap highlight color - Visual feedback when tapping on mobile */
    --e4-mobile-active-scale: 0.98;           /* Active press scale (0.98) - Slight shrink when tapping */
    --e4-mobile-active-shadow: 0 2px 8px rgba(0,0,0,0.3); /* Active press shadow - Shadow appears when tapping */
    
    /* === LEGACY COMPATIBILITY === */
    /* These maintain compatibility with existing code */
    --row-image-radius: var(--e4-row-image-radius);
    --player-headshot-size: var(--e4-player-headshot-size);
    --player-headshot-border: var(--e4-player-headshot-border);
    --player-role-size: var(--e4-player-role-size);
    --player-description-size: var(--e4-player-description-size);
    --player-achievement-size: var(--e4-player-achievement-size);
}

/* ================================================
   SECTION STRUCTURE
   Base layout and positioning
   ================================================ */

/* Row Sections - Main container for each player banner */
.about-page-element.element-4 .row-section {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    position: relative;
    overflow-x: hidden;  /* Prevent horizontal scrolling */
    box-sizing: border-box;
}

/* Row Content - Inner content wrapper with max-width constraint */
.about-page-element.element-4 .row-content {
    width: 100%;
    max-width: var(--e4-container-max-width);
    margin: 0 auto;
    padding: var(--e4-content-padding);
    position: relative;
    box-sizing: border-box;
}

/* Banner Images - Full-width player banners */
.about-page-element.element-4 .row-image {
    width: 100%;
    height: auto;
    display: block;
    margin: 0;
    /* Enhanced image rendering for crisp SVGs */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
    -ms-interpolation-mode: bicubic;
}

/* ================================================
   PLAYER ROWS - HOVER FUNCTIONALITY
   Desktop hover behavior showing player bio
   ================================================ */

/* Player Rows - Interactive banner containers */
.about-page-element.element-4 .player-row {
    position: relative;
    cursor: pointer;
    transition: all var(--e4-hover-transition);
    overflow: hidden !important;
    margin: var(--e4-banner-gap) 0;
    box-sizing: border-box;
}

.about-page-element.element-4 .player-row .row-content {
    position: relative;
    width: 100%;
    max-width: var(--e4-container-max-width);
    margin: 0 auto;
    padding: var(--e4-content-padding);
    overflow: hidden !important;
    box-sizing: border-box;
}

/* Default Banner Image - Visible by default */
.about-page-element.element-4 .default-image {
    width: 100% !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    display: block !important;
    border-radius: var(--row-image-radius) !important;
    overflow: hidden !important;
    transition: opacity var(--e4-hover-opacity-transition);
    box-sizing: border-box !important;
}

/* Hover Content - Overlay that appears on hover (desktop only) */
.about-page-element.element-4 .hover-content {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 1200px;
    height: 100%;
    opacity: 0;
    transition: opacity var(--e4-hover-opacity-transition);
    background: var(--e4-overlay-bg);
    border-radius: var(--row-image-radius);
    padding: 2rem;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden !important;  /* Prevent scrollbars in overlay */
}

/* Desktop Hover Behavior - Show overlay on hover (769px and above) */
@media (min-width: 769px) {
    .about-page-element.element-4 .player-row:hover .hover-content {
        opacity: 1;
    }
}

/* ================================================
   TWO COLUMN LAYOUT
   Desktop layout with photo on left, bio on right
   ================================================ */

/* Two Column Grid - Split layout for desktop */
.about-page-element.element-4 .two-column {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;  /* 64px gap between columns */
    align-items: stretch;
    margin: 0 auto;
    width: 100%;
    max-width: 1200px;
    height: 100%;
    padding: 2rem;
    box-sizing: border-box;
    overflow: hidden !important;
}

/* Column Containers - Left (photo) and Right (bio) */
.about-page-element.element-4 .column-left,
.about-page-element.element-4 .column-right {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden !important;
    transition: var(--e4-column-transition);
}

/* Left Column - Centers the player headshot */
.about-page-element.element-4 .column-left {
    justify-content: center;
}

/* Right Column - Aligns bio text */
.about-page-element.element-4 .column-right {
    justify-content: flex-start;
    align-items: center;
}

/* ================================================
   PLAYER HEADSHOT CONTAINER
   Square photo container with hover effects
   ================================================ */

/* Headshot Container - Perfect square with aspect ratio 1:1 */
.about-page-element.element-4 .player-headshot-placeholder {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    /* Perfect 1:1 aspect ratio container */
    width: var(--player-headshot-size) !important;
    height: var(--player-headshot-size) !important;
    max-width: var(--player-headshot-size) !important;
    max-height: var(--player-headshot-size) !important;
    min-width: var(--player-headshot-size) !important;
    min-height: var(--player-headshot-size) !important;
    aspect-ratio: 1 / 1 !important;
    /* Styling */
    overflow: hidden !important;
    border-radius: var(--row-image-radius) !important;
    border: var(--e4-player-headshot-border) !important;
    background: var(--e4-headshot-bg) !important;
    /* Positioning */
    margin: 0 auto !important;
    position: relative !important;
    box-sizing: border-box !important;
    align-self: center !important;
    justify-self: center !important;
    /* Interaction */
    pointer-events: auto !important;  /* Ensure links work */
    transition: all var(--e4-hover-transition) !important;
}

/* Headshot Image - Player photo */
.about-page-element.element-4 .player-headshot-image {
    width: var(--player-headshot-size);
    height: var(--player-headshot-size);
    border-radius: var(--row-image-radius);
    object-fit: cover;  /* Fill container while maintaining aspect ratio */
    object-position: center center;  /* Center on face */
    border: var(--player-headshot-border);
    display: block;
    flex-shrink: 0;
    transition: transform var(--e4-hover-transition), border-color var(--e4-hover-transition);
    transform: scale(1);  /* Default scale */
    max-width: 100%;
    max-height: 100%;
    pointer-events: auto;  /* Ensure clickability */
    cursor: pointer;
}

/* Headshot Image Hover - Subtle zoom and brightness increase */
.about-page-element.element-4 .player-headshot-image:hover {
    transform: scale(var(--e4-headshot-hover-scale));
    filter: brightness(var(--e4-headshot-hover-brightness));
}

/* Pink Glow Hover Effect - Magenta glow around photo container */
.about-page-element.element-4 .player-headshot-placeholder:hover {
    box-shadow:
        0 0 20px var(--e4-pink-glow-color),
        0 0 40px var(--e4-pink-glow-medium),
        0 0 60px var(--e4-pink-glow-light) !important;
    transform: translateY(var(--e4-container-hover-lift)) scale(var(--e4-container-hover-scale)) !important;
    transition: all var(--e4-hover-transition) !important;
}

/* ================================================
   PLAYER PROFILE TEXT
   Bio content and styling
   ================================================ */

/* Player Profile Container - Bio text wrapper */
.about-page-element.element-4 .player-profile {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    padding-left: 2rem;
    overflow: hidden !important;  /* Prevent scrollbars */
    max-height: 100% !important;
}

/* Player Name - Large heading */
.about-page-element.element-4 .player-profile h3 {
    font-size: var(--e4-player-name-size) !important;
    font-weight: 700 !important;
    margin-bottom: 0.3rem !important;  /* 4.8px */
    color: var(--e4-text-color) !important;
    text-transform: uppercase !important;
    /* Prevent text overflow */
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    max-width: 100% !important;
}

/* Player Role - Subtitle (e.g., "SMG player for FaZe Vegas") */
.about-page-element.element-4 .player-role {
    font-size: var(--player-role-size);
    color: var(--e4-text-color);
    margin-bottom: 0.8rem;  /* 12.8px */
    font-weight: 600;
}

/* Player Description - Bio paragraph */
.about-page-element.element-4 .player-description {
    font-size: var(--player-description-size);
    line-height: 1.4;
    color: var(--e4-text-color);
    margin-bottom: 1rem;  /* 16px */
    /* Prevent text overflow */
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    max-width: 100%;
}

/* Player Achievements Container */
.about-page-element.element-4 .player-achievements {
    margin-top: auto;
    /* Prevent text overflow */
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
}

/* Achievement List Items */
.about-page-element.element-4 .player-achievements p {
    font-size: var(--player-achievement-size);
    color: var(--e4-text-color);
    margin-bottom: 0.2rem;  /* 3.2px */
    font-weight: 600;
    /* Prevent text overflow */
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
}

.about-page-element.element-4 .player-achievements p:last-child {
    margin-bottom: 0;
}

/* ================================================
   ROW SPECIFIC BACKGROUNDS
   Row 4 specific styling
   ================================================ */

.about-page-element.element-4 .row-4 {
    background-color: var(--e4-overlay-bg);
    padding: 0;
}

/* Desktop: Clean alignment without extra padding */
@media (min-width: 1024px) {
    .about-page-element.element-4 .row-4 {
        padding: 0;
    }
}

.about-page-element.element-4 .row-4 .row-image {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    display: block;
}

/* ================================================
   FADE UP ANIMATION
   Scroll-triggered fade-in animation
   ================================================ */

/* Fade Up - Initial hidden state */
.about-page-element.element-4 .fade-up {
    opacity: 0;
    transform: translateY(var(--e4-fade-up-distance));
    transition: var(--e4-fade-transition);
}

/* Fade Up Active - Visible state after scrolling into view */
.about-page-element.element-4 .fade-up.active {
    opacity: 1;
    transform: translateY(0);
}

/* ================================================
   MOBILE RESPONSIVE STYLES
   Click-to-expand behavior for mobile (768px and below)
   ================================================ */

@media (max-width: 768px) {
    /* Disable hover effects completely on mobile */
    .about-page-element.element-4 .player-row:hover .hover-content:not(.mobile-active) {
        opacity: 0 !important;
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    /* Keep banner visible when hovering (mobile hover is usually accidental) */
    .about-page-element.element-4 .player-row:hover .default-image {
        opacity: 1 !important;
        display: block !important;
        visibility: visible !important;
    }

    /* Force disable all hover transitions on mobile */
    .about-page-element.element-4 .hover-content:not(.mobile-active) {
        transition: none !important;
        opacity: 0 !important;
        display: none !important;
        pointer-events: none !important;
    }

    .about-page-element.element-4 .default-image {
        transition: none !important;
    }

    /* Show content only when explicitly activated (clicked) */
    .about-page-element.element-4 .player-row.mobile-active:hover .hover-content {
        opacity: 1 !important;
        display: block !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    /* Ensure headshot links work properly on mobile */
    .about-page-element.element-4 .player-headshot-image,
    .about-page-element.element-4 .player-headshot-placeholder a {
        pointer-events: auto !important;
        cursor: pointer !important;
    }

    /* Mobile spacing adjustments */
    .about-page-element.element-4 .player-row {
        margin: var(--e4-mobile-banner-gap) 0;
    }

    .about-page-element.element-4 .row-4 {
        padding: var(--e4-mobile-row-padding);
    }

    .about-page-element.element-4 .row-content {
        padding: var(--e4-mobile-content-padding) !important;
    }

    /* Show banner images for clicking */
    .about-page-element.element-4 .player-row .default-image {
        display: block;
        margin-bottom: 2rem;
        cursor: pointer;
    }

    .about-page-element.element-4 .player-row .row-image {
        display: block;
        transition: none;
    }

    /* Enhanced mobile tap functionality with visual feedback */
    .about-page-element.element-4 .player-row .default-image {
        cursor: pointer !important;
        -webkit-tap-highlight-color: var(--e4-mobile-tap-highlight) !important;
        -webkit-touch-callout: none !important;
        -webkit-user-select: none !important;
        -khtml-user-select: none !important;
        -moz-user-select: none !important;
        -ms-user-select: none !important;
        user-select: none !important;
        transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    }

    /* Active press effect - slight shrink and shadow */
    .about-page-element.element-4 .player-row .default-image:active {
        transform: scale(var(--e4-mobile-active-scale)) !important;
        box-shadow: var(--e4-mobile-active-shadow) !important;
    }

    /* Mobile-active state: Banner is hidden, profile content shown */
    .about-page-element.element-4 .player-row.mobile-active .default-image {
        display: none !important;
        opacity: 0 !important;
    }

    /* Mobile-active content: Full-width profile display */
    .about-page-element.element-4 .hover-content.mobile-active {
        opacity: 1 !important;
        visibility: visible !important;
        display: block !important;
        position: static !important;
        background: var(--e4-overlay-bg) !important;
        border-radius: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        left: 0 !important;
        right: 0 !important;
        transform: none !important;
        margin-left: calc(-50vw + 50%) !important;  /* Full viewport width */
    }

    /* Mobile-active two-column: Stack vertically */
    .about-page-element.element-4 .hover-content.mobile-active .two-column {
        display: flex !important;
        flex-direction: column !important;
        gap: var(--e4-mobile-column-gap) !important;
        text-align: center !important;
        grid-template-columns: none !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 0 !important;
    }

    /* Mobile-active columns: Full width stacked layout */
    .about-page-element.element-4 .hover-content.mobile-active .column-left,
    .about-page-element.element-4 .hover-content.mobile-active .column-right {
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
        margin: 0 auto !important;
        padding: 0 !important;
    }

    /* Ensure content flows naturally */
    .about-page-element.element-4 .player-row.mobile-active {
        position: relative;
        z-index: 1;
    }

    /* Default hover content (not clicked) - completely hidden */
    .about-page-element.element-4 .hover-content {
        padding: 2rem;
        left: 0;
        transform: none;
        display: none !important;
        position: relative;
        opacity: 0 !important;
        visibility: hidden !important;
        background: transparent;
        border-radius: 0;
        overflow: hidden;
        pointer-events: none;
        width: 100% !important;
        margin: 0 !important;
    }

    /* Active content replaces banner */
    .about-page-element.element-4 .hover-content.mobile-active {
        display: block !important;
        position: static !important;
        margin-top: 0 !important;
    }

    /* Mobile two-column layout */
    .about-page-element.element-4 .hover-content .two-column {
        grid-template-columns: 1fr;
        gap: 2rem;
        text-align: center;
        padding: 1rem;
        overflow: hidden;
        margin: 0 auto;
    }

    /* Column order on mobile */
    .about-page-element.element-4 .hover-content .column-left {
        order: 1;
        width: 100%;
    }

    .about-page-element.element-4 .hover-content .column-right {
        order: 2;
        width: 100%;
    }

    /* Mobile headshot sizing - smaller for better centering */
    .about-page-element.element-4 .player-headshot-placeholder {
        width: var(--e4-mobile-headshot-size) !important;
        height: var(--e4-mobile-headshot-size) !important;
        max-width: var(--e4-mobile-headshot-size) !important;
        max-height: var(--e4-mobile-headshot-size) !important;
        min-width: var(--e4-mobile-headshot-size) !important;
        min-height: var(--e4-mobile-headshot-size) !important;
        margin: 0 auto;
        aspect-ratio: 1;
        border-radius: var(--e4-row-image-radius);
        border: var(--e4-player-headshot-border);
        background: var(--e4-headshot-bg);
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .about-page-element.element-4 .player-headshot-image {
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        object-fit: cover !important;
        object-position: center center !important;
        border-radius: var(--e4-row-image-radius) !important;
        border: none !important;
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Mobile profile text styling */
    .about-page-element.element-4 .player-profile {
        padding: 2rem;
        text-align: center;
        overflow: hidden;
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
        box-sizing: border-box;
    }

    .about-page-element.element-4 .player-profile h3 {
        font-size: var(--e4-player-name-size) !important;
        margin-bottom: 1rem;
    }

    .about-page-element.element-4 .player-role {
        font-size: 1rem;
        margin-bottom: 1rem;
    }

    .about-page-element.element-4 .player-description {
        font-size: 0.9rem;
        margin-bottom: 1rem;
    }

    .about-page-element.element-4 .player-achievements p {
        font-size: 0.9rem;
    }
}

/* ================================================
   TABLET RESPONSIVE STYLES
   (1024px and below)
   ================================================ */

@media (max-width: 1024px) {
    /* Stack columns vertically on tablets */
    .about-page-element.element-4 .two-column {
        grid-template-columns: 1fr;
        gap: 2rem;
        text-align: center;
        padding: 2rem;
    }

    .about-page-element.element-4 .row-4 {
        padding: 1rem;
    }

    /* Center profile text on tablets */
    .about-page-element.element-4 .player-profile {
        padding-left: 0;
        text-align: center;
    }

    /* Maintain desktop headshot size on tablets */
    .about-page-element.element-4 .player-headshot-image {
        width: var(--player-headshot-size);
        height: var(--player-headshot-size);
        margin: 0 auto;
        border-radius: var(--row-image-radius);
        object-fit: cover;
        border: var(--player-headshot-border);
    }

    .about-page-element.element-4 .hover-content {
        padding: 2rem;
        left: 50%;
        transform: translateX(-50%);
        max-width: 1200px;
        overflow: hidden;
    }

    .about-page-element.element-4 .player-profile h3 {
        font-size: var(--e4-player-name-size) !important;
    }
}

/* ================================================
   SMALL MOBILE RESPONSIVE STYLES
   (600px and below)
   ================================================ */

@media (max-width: 600px) {
    .about-page-element.element-4 .row-4 {
        padding: 1rem;
    }

    /* Full screen width on small mobile */
    .about-page-element.element-4 .row-content {
        padding: 0 !important;
    }

    .about-page-element.element-4 .player-headshot-image {
        width: var(--player-headshot-size);
        height: var(--player-headshot-size);
        margin: 0 auto;
        border-radius: var(--row-image-radius);
        object-fit: cover;
        border: var(--player-headshot-border);
    }

    .about-page-element.element-4 .hover-content {
        padding: 2rem;
        left: 50%;
        transform: translateX(-50%);
        max-width: 1200px;
        overflow: hidden;
    }

    .about-page-element.element-4 .player-profile {
        padding: 2rem;
        overflow: hidden;
    }

    .about-page-element.element-4 .player-profile h3 {
        font-size: var(--e4-player-name-size) !important;
    }

    .about-page-element.element-4 .player-role {
        font-size: 0.9rem;
    }

    .about-page-element.element-4 .player-description {
        font-size: 0.8rem;
        line-height: 1.5;
    }

    .about-page-element.element-4 .player-achievements p {
        font-size: 0.8rem;
        margin-bottom: 0.2rem;
    }
}
}


















#fw-section-custom-html-1800bdf7-cb1c-44ea-bd7e-39daca729ec7 {


 /* ================================================
     ELEMENT 3 LEARN MORE BUTTON - MATCHING SHOP ALL STYLE
     ================================================ */

  .image-with-text__content .button.button--primary.cta-button,
  .image-with-text__content .cta-button {
      display: inline-block;
      background: #ff00ff !important; /* Magenta background */
      border: none !important; /* No border */
      color: #ffffff !important; /* White text */
      padding: 0.75rem 2rem !important;
      font-size: 1rem !important;
      font-weight: 600 !important;
      letter-spacing: 0.1em !important;
      text-transform: uppercase !important;
      text-decoration: none !important;
      border-radius: 100px !important; /* Pill shape */
      transition: all 0.3s ease !important;
      cursor: pointer !important;
      text-shadow: none !important; /* Remove any text shadow */
  }

  .image-with-text__content .button.button--primary.cta-button:hover,
  .image-with-text__content .cta-button:hover {
      background: #ff33ff !important; /* Brighter magenta on hover */
      color: #ffffff !important; /* Keep white text */
      transform: scale(1.05) !important; /* Slightly increase size */
      text-decoration: none !important;
  }

  /* Remove any default button styling that might interfere */
  .image-with-text__content .button--primary {
      background: #ff00ff !important;
      border-color: transparent !important;
  }

  .image-with-text__content .button--primary:hover {
      background: #ff33ff !important;
      border-color: transparent !important;
  }

  /* HEADING FONT OVERRIDE: Make Learn More button use heading font */
  .image-with-text__content .button.button--primary.cta-button,
  .image-with-text__content .cta-button {
      font-weight: 700 !important;          /* Override 600 with 700 (bold heading weight) */
      letter-spacing: 0.05em !important;    /* Override 0.1em with heading letter spacing */
  }
}
#fw-section-custom-html-3e496b5a-c1aa-4a09-97e1-f3fbbf368a9d {

/* ================================================
   HOME PAGE ELEMENT 4 - RECENT YOUTUBE VIDEOS
   Simple styling to center video titles
   ================================================ */

/* Center the video titles below thumbnails */
.video-tile__title {
    text-align: center !important;
}
}
#fw-section-custom-html-ec943269-59ab-41f9-8827-e492a2c23711 {

/* ================================================
   HOME PAGE ELEMENT 4 - RECENT YOUTUBE VIDEOS
   Displays recent videos from the channel
   ================================================ */

/* ========================================
   EASILY CHANGEABLE YOUTUBE SECTION VALUES
   Change these to customize the YouTube section!
   ======================================== */

.home-page-element.homepage-youtube-section {
    /* === SPACING === */
    --youtube-section-padding-mobile: 36px;      /* Top and bottom padding on mobile (36px) */
    --youtube-section-padding-desktop: 48px;     /* Top and bottom padding on desktop (48px) */

    /* === TEXT STYLING === */
    --youtube-title-alignment: center;           /* How video titles are aligned (center, left, or right) */
    --youtube-title-font-size: 1rem;             /* Video title text size (16px) */
    --youtube-title-color: #ffffff;              /* Video title text color (white) */
    --youtube-heading-size: 2rem;                /* "Recent videos" heading size (32px) */
    --youtube-heading-color: #ffffff;            /* "Recent videos" heading color (white) */

    /* === THUMBNAIL SIZING === */
    --youtube-thumbnail-aspect: 56.25%;          /* Thumbnail aspect ratio (16:9 = 56.25%) */
    --youtube-thumbnail-border-radius: 8px;      /* Rounded corners on thumbnails (8px) */

    /* === BUTTON STYLING === */
    --youtube-button-bg: transparent;            /* Visit channel button background (transparent) */
    --youtube-button-border-color: #292929;      /* Visit channel button border color (dark gray) */
    --youtube-button-border-width: 2px;          /* Visit channel button border thickness (1px) */
    --youtube-button-text: #ffffff;              /* Visit channel button text color (white) */
    --youtube-button-hover-bg: transparent;      /* Button background on hover (stays transparent) */
    --youtube-button-hover-border-color: #666666; /* Button border on hover (medium gray) */
    --youtube-button-hover-text: #ffffff;        /* Button text color on hover (white) */
    --youtube-button-padding: 1rem 1.5rem;       /* Space inside button (16px top/bottom, 24px left/right) */
    --youtube-button-font-size: 0.875rem;        /* Button text size (14px) */
    --youtube-button-border-radius: 50px;        /* Button corner roundness (50px = pill-shaped) */

    /* === OVERLAY EFFECTS === */
    --youtube-overlay-opacity: 0.3;              /* Darkness of overlay on video thumbnails (0.3 = 30% dark) */
    --youtube-overlay-hover-opacity: 0.6;        /* Overlay darkness on hover (0.6 = 60% dark - darker) */
    --youtube-overlay-bg: rgba(0, 0, 0, 0.5);    /* Overlay background color (black with 50% opacity) */
    --youtube-hover-scale: 1.05;                 /* How much thumbnails grow on hover (1.05 = 5% larger) */
    --youtube-hover-brightness: 0.8;             /* Image brightness on hover (0.8 = 20% darker) */
    --youtube-icon-size: 48px;                   /* YouTube play icon size (48px) */

    /* === HOVER TEXT EFFECTS === */
    --youtube-title-hover-color: rgba(255, 255, 255, 0.7);  /* Title text color on hover (slightly dimmed) */
}

/* ================================================
   SECTION PADDING
   Controls spacing around the entire section
   ================================================ */

.section-fw-section-recent-videos-1692119019-padding {
    padding-top: var(--youtube-section-padding-mobile) !important;
    padding-bottom: var(--youtube-section-padding-mobile) !important;
}

/* Desktop padding (640px and larger screens) */
@media screen and (min-width: 640px) {
    .section-fw-section-recent-videos-1692119019-padding {
        padding-top: var(--youtube-section-padding-desktop) !important;
        padding-bottom: var(--youtube-section-padding-desktop) !important;
    }
}

/* ================================================
   VIDEO THUMBNAIL CONTAINER
   Maintains 16:9 aspect ratio for all thumbnails
   ================================================ */

.video-tile__image-container {
    position: relative !important;
    width: 100% !important;
    padding-bottom: var(--youtube-thumbnail-aspect) !important;  /* 16:9 aspect ratio */
    overflow: hidden !important;
    border-radius: var(--youtube-thumbnail-border-radius) !important;
    transition: transform 0.3s ease !important;
}

.video-tile__image {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

.image--video-thumbnail,
.image__object {
    width: 100% !important;
    height: 100% !important;
}

.image__image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: var(--youtube-thumbnail-border-radius) !important;
}

/* ================================================
   VIDEO THUMBNAIL OVERLAY
   Dark overlay that appears on video thumbnails
   ================================================ */

.video-tile__image-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: var(--youtube-overlay-bg) !important;
    opacity: var(--youtube-overlay-opacity) !important;
    transition: opacity 0.3s ease !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

/* ================================================
   YOUTUBE PLAY ICON
   Centered play button on each thumbnail
   ================================================ */

.video-tile__icon {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: var(--youtube-icon-size) !important;
    height: var(--youtube-icon-size) !important;
    z-index: 2 !important;
    pointer-events: none !important;
}

.video-tile__icon-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}

/* ================================================
   VIDEO THUMBNAIL HOVER EFFECT
   Makes thumbnails scale up and darken on hover
   ================================================ */

.video-tile:hover .video-tile__image-container {
    transform: scale(var(--youtube-hover-scale)) !important;
}

.video-tile:hover .video-tile__image-overlay {
    opacity: var(--youtube-overlay-hover-opacity) !important;  /* Darken overlay on hover */
}

.video-tile:hover .video-tile__image {
    filter: brightness(var(--youtube-hover-brightness)) !important;  /* Darken the thumbnail image itself */
}

/* ================================================
   VIDEO TITLE STYLING
   Text below each video thumbnail
   ================================================ */

.video-tile__caption {
    margin-top: 0.75rem !important;
}

.video-tile__title {
    text-align: var(--youtube-title-alignment) !important;
    font-size: var(--youtube-title-font-size) !important;
    color: var(--youtube-title-color) !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    transition: color 0.3s ease !important;
}

/* Darken title text on hover */
.video-tile:hover .video-tile__title {
    color: var(--youtube-title-hover-color) !important;  /* Slightly dimmed white on hover */
}

/* ================================================
   SECTION HEADER STYLING
   "Recent videos" heading and Visit channel button
   ================================================ */

.recent-videos .section-header__heading {
    font-size: var(--youtube-heading-size) !important;
    color: var(--youtube-heading-color) !important;
}

/* ================================================
   VISIT CHANNEL BUTTON STYLING
   The button that links to the YouTube channel
   Pill-shaped with dark gray outline
   ================================================ */

.recent-videos .button,
.recent-videos .button--outline,
.recent-videos .button--small,
.recent-videos__cta .button,
.section-header__cta .button {
    display: inline-block !important;
    background: var(--youtube-button-bg) !important;
    border: var(--youtube-button-border-width) solid var(--youtube-button-border-color) !important;
    color: var(--youtube-button-text) !important;
    padding: var(--youtube-button-padding) !important;
    font-size: var(--youtube-button-font-size) !important;
    border-radius: var(--youtube-button-border-radius) !important;
    transition: all 0.3s ease !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    text-decoration: none !important;
    line-height: 1 !important;
}

.recent-videos .button:hover,
.recent-videos .button--outline:hover,
.recent-videos .button--small:hover,
.recent-videos__cta .button:hover,
.section-header__cta .button:hover {
    background: var(--youtube-button-hover-bg) !important;
    border-color: var(--youtube-button-hover-border-color) !important;
    color: var(--youtube-button-hover-text) !important;
    text-decoration: none !important;
}

/* HEADING FONT OVERRIDE: Make Visit Channel button use heading font */
.recent-videos .button,
.recent-videos .button--outline,
.recent-videos .button--small,
.recent-videos__cta .button,
.section-header__cta .button {
    font-weight: 700 !important;          /* Override 600 with 700 (bold heading weight) */
}
}














#fw-section-password {
--color-primary: #000000;
--color-primary-rgb: 0, 0, 0;
--color-background: #000000;
--color-background-rgb: 0, 0, 0;
--color-on-primary: #f43232;
--color-on-primary-rgb: 244, 50, 50;
--color-on-background: #ffffff;
--color-on-background-rgb: 255, 255, 255;
--color-product-image-background: #ffffff;
--color-background-brightness: 0;
background-color: var(--color-background);
color: var(--color-on-background);
/* Hide the original logo image */
.password__logo-image {
    display: none;
}

/* Center the entire header section */
.password__header {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

/* Style the logo container */
.password__logo {
    width: 120px;
    height: 80px;
    background-image: url('https://imgproxy.fourthwall.com/1A1DIeaTMpNqLOw7QGGEG6e1_Zpa3odtSLy8NdZ7Wn8/w:120/sm:1/enc/4bwNXNPUlDRXUBF5/uWU4WMiAtzyxwN_T/Pk8hEvzqAl6LdiuD/kDaRb_ELyS69s2kY/bGbvqW1wb1vwOCvN/51hCu3_RiP5Zx_Eq/FP-OgEh6oFgMgSIC/Qb6AlYxluHkD8lCF/k8kqnGxMdz3XBOtX/9874f3UNLxTPOOcY/Ko5jCSeN8muoU7qZ/WLiPV1IURr3ADV1U/3jceq399TMBgBg69/AKuqeFPQaH3AOI2M/THdd9P7k0prjfbif/QO5iw0L8-EQsIUTz');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Disable the logo link functionality */
.password__logo a {
    pointer-events: none;
    cursor: default;
    display: block;
    width: 100%;
    height: 100%;
}

/* Hide ONLY the account button - keeps password entry option visible */
.password__account {
    display: none !important;
}

/* Center the social icons since account button is gone */
.password__footer {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.password__socials {
    text-align: center;
}

/* Style the password modal form with red/black theme */
.password__form {
    background: rgba(211, 47, 47, 0.1);
    border: 2px solid #d32f2f;
    border-radius: 15px;
    padding: 30px;
}

/* Style ONLY password input field with red theme */
.input-field__input[type="password"] {
    padding: 15px 20px;
    border: 2px solid #d32f2f;
    border-radius: 12px;
    width: 100%;
    font-size: 16px;
    background: #1a1a1a;
    color: #ffffff;
    transition: all 0.3s ease;
}

.input-field__input[type="password"]:focus {
    outline: none;
    border-color: #ff5252;
    box-shadow: 0 0 10px rgba(211, 47, 47, 0.5);
}

.input-field__input[type="password"]::placeholder {
    color: #888;
}

/* Style the submit button with matching corners */
.button--primary {
    background: linear-gradient(135deg, #d32f2f 0%, #b71c1c 100%) !important;
    color: white !important;
    border: none !important;
    border-radius: 12px;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 15px 30px;
}

.button--primary:hover {
    background: linear-gradient(135deg, #ff5252 0%, #d32f2f 100%) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

/* Style the modal label to match email field appearance */
.modal__label {
    border-radius: 12px;
    padding: 15px 20px;
    transition: all 0.3s ease;
    cursor: pointer;
    /* Remove custom background and border to match default email styling */
    background: inherit;
    border: inherit;
}

.modal__label:hover {
    /* Subtle hover effect without red theme */
    opacity: 0.8;
}
}