#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;
}
}











#fw-section-custom-html-996802ee-6b6a-47ce-96de-226024755c8c {

/* Monster Energy - Complete Fallback CSS (Text Overlay Only) */
.partner-element.monster-energy {
    width: 100vw !important;
    max-width: 100% !important;
    height: calc(100vw * 9 / 16) !important;
    position: relative !important;
    overflow: hidden !important;
    margin: 0.5rem 0 !important;
    min-height: 160px !important;
    border-radius: 12px !important;
    background: #000 !important;
}

.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: 12px !important;
    display: block !important;
}

.partner-element.monster-energy .partner__text-overlay {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: calc((100vw * 9 / 16) * 0.4) !important;
    background: linear-gradient(transparent, rgba(0,0,0,0.8)) !important;
    padding: calc((100vw * 9 / 16) * 0.04) clamp(1rem, 3vw, 2rem) !important;
    opacity: 0 !important;
    transform: translateY(calc((100vw * 9 / 16) * 0.08)) !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
    z-index: 3 !important;
}

.partner-element.monster-energy:hover .partner__text-overlay {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

.partner-element.monster-energy .partner__text {
    color: white !important;
    font-size: clamp(1rem, calc((100vw * 9 / 16) * 0.06), 2.2rem) !important;
    font-weight: 600 !important;
    text-align: center !important;
    letter-spacing: clamp(1px, 0.3vw, 3px) !important;
    text-transform: uppercase !important;
    margin: 0 !important;
    line-height: 1.2 !important;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8) !important;
}

.partner-element.monster-energy .text-primary {
    color: #ffffff !important;
}

.partner-element.monster-energy .text-highlight {
    color: #ff00ff !important;
    text-shadow: 0 0 8px rgba(255, 0, 255, 0.6) !important;
    font-weight: 700 !important;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .partner-element.monster-energy {
        min-height: 140px !important;
    }
}

@media (max-width: 480px) {
    .partner-element.monster-energy {
        min-height: 120px !important;
    }
}
}
#fw-section-custom-html-01a01584-17c6-4df8-80d2-6c02cb89bcd0 {

/* Battle Beaver - Complete Fallback CSS (Text Overlay Only) */
.partner-element.battle-beaver {
    width: 100vw !important;
    max-width: 100% !important;
    height: calc(100vw * 9 / 16) !important;
    position: relative !important;
    overflow: hidden !important;
    margin: 0.5rem 0 !important;
    min-height: 160px !important;
    border-radius: 12px !important;
    background: #000 !important;
}

.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: 12px !important;
    display: block !important;
}

.partner-element.battle-beaver .partner__text-overlay {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: calc((100vw * 9 / 16) * 0.4) !important;
    background: linear-gradient(transparent, rgba(0,0,0,0.8)) !important;
    padding: calc((100vw * 9 / 16) * 0.04) clamp(1rem, 3vw, 2rem) !important;
    opacity: 0 !important;
    transform: translateY(calc((100vw * 9 / 16) * 0.08)) !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
    z-index: 3 !important;
}

.partner-element.battle-beaver:hover .partner__text-overlay {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

.partner-element.battle-beaver .partner__text {
    color: white !important;
    font-size: clamp(1rem, calc((100vw * 9 / 16) * 0.06), 2.2rem) !important;
    font-weight: 600 !important;
    text-align: center !important;
    letter-spacing: clamp(1px, 0.3vw, 3px) !important;
    text-transform: uppercase !important;
    margin: 0 !important;
    line-height: 1.2 !important;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8) !important;
}

.partner-element.battle-beaver .text-primary {
    color: #ffffff !important;
}

.partner-element.battle-beaver .text-highlight {
    color: #ff00ff !important;
    text-shadow: 0 0 8px rgba(255, 0, 255, 0.6) !important;
    font-weight: 700 !important;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .partner-element.battle-beaver {
        min-height: 140px !important;
    }
}

@media (max-width: 480px) {
    .partner-element.battle-beaver {
        min-height: 120px !important;
    }
}
}
#fw-section-custom-html-02450cb9-e754-4650-8dfa-0650e7248db7 {

/* SteelSeries - Complete Fallback CSS (Text Overlay Only) */
.partner-element.steelseries {
    width: 100vw !important;
    max-width: 100% !important;
    height: calc(100vw * 9 / 16) !important;
    position: relative !important;
    overflow: hidden !important;
    margin: 0.5rem 0 !important;
    min-height: 160px !important;
    border-radius: 12px !important;
    background: #000 !important;
}

.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: 12px !important;
    display: block !important;
}

.partner-element.steelseries .partner__text-overlay {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: calc((100vw * 9 / 16) * 0.4) !important;
    background: linear-gradient(transparent, rgba(0,0,0,0.8)) !important;
    padding: calc((100vw * 9 / 16) * 0.04) clamp(1rem, 3vw, 2rem) !important;
    opacity: 0 !important;
    transform: translateY(calc((100vw * 9 / 16) * 0.08)) !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
    z-index: 3 !important;
}

.partner-element.steelseries:hover .partner__text-overlay {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

.partner-element.steelseries .partner__text {
    color: white !important;
    font-size: clamp(1rem, calc((100vw * 9 / 16) * 0.06), 2.2rem) !important;
    font-weight: 600 !important;
    text-align: center !important;
    letter-spacing: clamp(1px, 0.3vw, 3px) !important;
    text-transform: uppercase !important;
    margin: 0 !important;
    line-height: 1.2 !important;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8) !important;
}

.partner-element.steelseries .text-primary {
    color: #ffffff !important;
}

.partner-element.steelseries .text-highlight {
    color: #ff00ff !important;
    text-shadow: 0 0 8px rgba(255, 0, 255, 0.6) !important;
    font-weight: 700 !important;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .partner-element.steelseries {
        min-height: 140px !important;
    }
}

@media (max-width: 480px) {
    .partner-element.steelseries {
        min-height: 120px !important;
    }
}
}
#fw-section-custom-html-572129b2-ca35-40d0-abe9-8f16f549d92b {


/* KontrolFreeks - Complete Fallback CSS (Text Overlay Only) */
.partner-element.kontrolfreeks {
    width: 100vw !important;
    max-width: 100% !important;
    height: calc(100vw * 9 / 16) !important;
    position: relative !important;
    overflow: hidden !important;
    margin: 0.5rem 0 !important;
    min-height: 160px !important;
    border-radius: 12px !important;
    background: #000 !important;
}

.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: 12px !important;
    display: block !important;
}

.partner-element.kontrolfreeks .partner__text-overlay {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: calc((100vw * 9 / 16) * 0.4) !important;
    background: linear-gradient(transparent, rgba(0,0,0,0.8)) !important;
    padding: calc((100vw * 9 / 16) * 0.04) clamp(1rem, 3vw, 2rem) !important;
    opacity: 0 !important;
    transform: translateY(calc((100vw * 9 / 16) * 0.08)) !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
    z-index: 3 !important;
}

.partner-element.kontrolfreeks:hover .partner__text-overlay {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

.partner-element.kontrolfreeks .partner__text {
    color: white !important;
    font-size: clamp(1rem, calc((100vw * 9 / 16) * 0.06), 2.2rem) !important;
    font-weight: 600 !important;
    text-align: center !important;
    letter-spacing: clamp(1px, 0.3vw, 3px) !important;
    text-transform: uppercase !important;
    margin: 0 !important;
    line-height: 1.2 !important;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8) !important;
}

.partner-element.kontrolfreeks .text-primary {
    color: #ffffff !important;
}

.partner-element.kontrolfreeks .text-highlight {
    color: #ff00ff !important;
    text-shadow: 0 0 8px rgba(255, 0, 255, 0.6) !important;
    font-weight: 700 !important;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .partner-element.kontrolfreeks {
        min-height: 140px !important;
    }
}

@media (max-width: 480px) {
    .partner-element.kontrolfreeks {
        min-height: 120px !important;
    }
}

}
#fw-section-custom-html-3e496b5a-c1aa-4a09-97e1-f3fbbf368a9d {

.video-tile__title {
      text-align: center !important;
  }
}
#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;
  }
}
#fw-section-custom-html-e6ad6a08-071d-494e-8737-540f9df43a71 {

/* ================================================
   ABOUT PAGE ELEMENT 2 - OUR STORY SECTION
   ================================================ */

/* EASILY CHANGEABLE VALUES */
:root {
    /* Section Spacing */
    --about-row-padding: 2rem;               /* Default: 32px */
    --about-two-column-gap: 4rem;            /* Default: 64px */
    --about-mobile-padding: 1rem;            /* Default: 16px */
    
    /* Typography */
    --story-heading-size: 3rem;              /* Default: 48px - Match other large headings */
    --story-text-size: 0.9rem;               /* Default: 14.4px */
    
    /* Image Settings */
    --row-image-radius: 15%;                 /* Default: 15% - Rounded corners */
}

/* ROW SECTIONS */
.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: 1200px;
    margin: 0 auto;
    padding: 0;
    position: relative;
}

/* ROW 2: OUR STORY SECTION */
.about-page-element.element-2 .row-2 {
    background-color: #000000;
    padding: 4rem 0;
}

.about-page-element.element-2 .two-column {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: stretch;
    margin: 0 auto;
    width: 100%;
    max-width: 1200px;
    height: 100%;
    padding: 2rem;
    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: 4rem;
}

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

.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: 15px !important;
}

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

/* STRONGER SELECTORS TO OVERRIDE GLOBAL STYLES */
.about-page-element.element-2 .story-text-box h2 {
    font-size: 2.5rem !important;
    font-weight: 700 !important;
    margin-bottom: 1rem !important;
    color: #ffffff !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
}

.about-page-element.element-2 .story-text-box p {
    font-size: var(--story-text-size);
    line-height: 1.4;
    margin-bottom: 1rem;
    color: #ffffff;
    text-align: left;
    text-transform: uppercase;
    font-weight: 400;
}

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

/* FADE UP ANIMATION */
.about-page-element.element-2 .fade-up {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease;
}

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

/* RESPONSIVE DESIGN */
@media (max-width: 1024px) {
    .about-page-element.element-2 .two-column {
        grid-template-columns: 1fr;
        gap: 2rem;
        text-align: center;
        padding: 1.5rem;
    }
    
    .about-page-element.element-2 .row-2 {
        padding: 3rem 0;
    }
    
    .about-page-element.element-2 .row-2 .two-column {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

@media (max-width: 768px) {
    .about-page-element.element-2 .row-2 {
        padding: 2rem 0;
    }
    
    .about-page-element.element-2 .two-column {
        gap: 1.5rem;
        padding: 1rem;
    }
    
    /* Mobile Our Story Layout - Match Screenshot */
    .about-page-element.element-2 .row-2 .two-column {
        grid-template-columns: 1fr;
        gap: 2rem;
        padding: 1rem;
    }
    
    .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(--row-image-radius);
    }
    
    .about-page-element.element-2 .story-text-box {
        text-align: center;
        margin-top: 1rem;
    }
    
    .about-page-element.element-2 .story-text-box h2 {
        font-size: 2rem;
        margin-bottom: 1rem;
    }
    
    .about-page-element.element-2 .story-text-box p {
        font-size: 1rem;
        line-height: 1.6;
    }
}

@media (max-width: 600px) {
    .about-page-element.element-2 .row-2 {
        padding: 1.5rem 0;
    }
    
    .about-page-element.element-2 .two-column {
        padding: 0.5rem;
    }
    
    .about-page-element.element-2 .story-text-box h2 {
        font-size: 1.8rem;
        margin-bottom: 1rem;
    }
}
}
#fw-section-custom-html-f01a4976-501a-43bc-83fe-4fe63e325d40 {

/* ================================================
   ABOUT PAGE ELEMENT 5 - SIMP PLAYER PROFILE
   ================================================ */

/* EASILY CHANGEABLE VALUES - ELEMENT 5 */
.about-page-element.element-5 {
    /* Section Spacing */
    --e5-row-padding: 2rem;                   /* 32px - Desktop row padding */
    --e5-mobile-row-padding: 0.5rem;          /* 8px - Mobile row padding (75% reduction) */
    --e5-banner-gap: 2rem;                    /* 32px - Gap between player banners */
    --e5-mobile-banner-gap: 0.5rem;           /* 8px - Mobile gap (75% reduction) */
    
    /* Typography */
    --e5-player-name-size: 4em;               /* 64px - Player name size */
    --e5-player-role-size: 1rem;              /* 16px - Player role text */
    --e5-player-description-size: 0.85rem;    /* 13.6px - Description text */
    --e5-player-achievement-size: 0.85rem;    /* 13.6px - Achievement text */
    
    /* Image Settings */
    --e5-row-image-radius: 12px;              /* Banner border radius */
    --e5-player-headshot-size: 280px;         /* Desktop headshot container */
    --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;         /* Max content width */
    --e5-content-padding: 2rem;               /* 32px - Content inner padding */
    --e5-mobile-content-padding: 1rem;        /* 16px - Mobile content padding */
    
    /* Animation */
    --e5-hover-transition: 0.3s ease;         /* Hover transition speed */
    
    /* Legacy Variables for Compatibility */
    --row-image-radius: var(--e5-row-image-radius);
    --player-headshot-size: var(--e5-player-headshot-size);
    --player-headshot-border: var(--e5-player-headshot-border);
}

/* Row Sections */
.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;
}

.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;
}

.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;
}

/* Player Rows - Hover Functionality */
.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;
}

.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;
}

.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-hover-transition);
    background: #000000;
    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 content without hiding banner */
@media (min-width: 769px) {
    .about-page-element.element-5 .player-row:hover .hover-content {
        opacity: 1;
    }
}

.about-page-element.element-5 .two-column {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    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;
}

.about-page-element.element-5 .column-left {
    justify-content: center;
}

.about-page-element.element-5 .column-right {
    justify-content: flex-start;
    align-items: center;
}

/* Player Headshot Container */
.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: #000000 !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;
}

/* PLACEHOLDER IMAGE STYLES */
.about-page-element.element-5 .placeholder-image {
    /* Use CSS custom properties for flexible sizing */
    width: var(--placeholder-width, var(--player-headshot-size));
    height: var(--placeholder-height, var(--player-headshot-size));
    max-width: var(--placeholder-max-width, var(--player-headshot-size));
    background: var(--placeholder-bg, #000000);
    border: var(--placeholder-border, var(--player-headshot-border));
    border-radius: var(--placeholder-radius, var(--row-image-radius));
    display: var(--placeholder-display, grid);
    place-items: center;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-weight: bold;
    font-size: var(--placeholder-font-size, 0.9rem);
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    margin: var(--placeholder-margin, 0);
    padding: var(--placeholder-padding, 0);
    text-align: center;
    line-height: var(--placeholder-line-height, normal);
}

.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;
}

.about-page-element.element-5 .player-headshot-image:hover {
    transform: scale(1.05) !important;
    filter: brightness(1.1) !important;
}

/* Pink Glow Hover Effect */
.about-page-element.element-5 .player-headshot-placeholder:hover {
    box-shadow: 0 0 20px rgba(255, 0, 255, 0.6), 0 0 40px rgba(255, 0, 255, 0.4), 0 0 60px rgba(255, 0, 255, 0.2) !important;
    transform: translateY(-2px) scale(1.02) !important;
    transition: all var(--e5-hover-transition) !important;
}

.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 Styling - High Specificity Override */
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: 700 !important;
    margin-bottom: 0.3rem !important; /* 4.8px */
    color: #ffffff !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;
}

.about-page-element.element-5 .player-role {
    font-size: var(--e5-player-role-size); /* 16px */
    color: #ffffff;
    margin-bottom: 0.8rem; /* 12.8px */
    font-weight: 600;
}

.about-page-element.element-5 .player-description {
    font-size: var(--e5-player-description-size); /* 13.6px */
    line-height: 1.4;
    color: #ffffff;
    margin-bottom: 1rem; /* 16px */
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    max-width: 100%;
}

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

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

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

/* Row Background */
.about-page-element.element-5 .row-5 {
    background-color: #000000;
    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;
}

/* Fade Up Animation */
.about-page-element.element-5 .fade-up {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease;
}

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

/* Mobile Responsive Styles */
@media (max-width: 768px) {
    .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;
    }
    
    /* Prevent any hover effects on expanded content */
    .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 properly 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;
    }
    
    .about-page-element.element-5 .player-row {
        margin: var(--e5-mobile-banner-gap) 0; /* 8px - 75% reduction from 32px */
    }
    
    .about-page-element.element-5 .row-5 {
        padding: var(--e5-mobile-row-padding); /* 8px - Reduced mobile padding */
    }
    
    .about-page-element.element-5 .row-content {
        padding: var(--e5-mobile-content-padding) !important; /* 16px - Mobile content padding */
    }
    
    /* Show banner images on mobile for player rows */
    .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 click/tap functionality */
    .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;
    }
    
    .about-page-element.element-5 .player-row .default-image:active {
        transform: scale(0.98) !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
    }

    /* Mobile-specific click functionality - Banner replacement behavior */
    .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: #000000 !important;
        border-radius: 0 !important;
        padding: var(--e5-mobile-content-padding) !important; /* 16px - Controlled mobile padding */
        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;
    }
    
    .about-page-element.element-5 .hover-content.mobile-active .two-column {
        display: flex !important;
        flex-direction: column !important;
        gap: 1rem !important; /* 16px - Reduced gap for mobile */
        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;
    }
    
    .about-page-element.element-5 .player-row.mobile-active {
        /* Ensure expanded content flows in document */
        position: relative;
        z-index: 1;
    }
    
    /* Ensure banner images remain clickable on mobile */
    .about-page-element.element-5 .player-row .default-image {
        cursor: pointer;
        position: relative;
        z-index: 10;
    }
    
    /* No transitions on banner images for mobile */
    .about-page-element.element-5 .player-row .default-image,
    .about-page-element.element-5 .player-row .row-image {
        transition: none;
    }
    
    /* Mobile Player Profile Improvements - Match Our Story Layout */
    .about-page-element.element-5 .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;
    }
    
    /* Show hover content when clicked/active - replaces banner */
    .about-page-element.element-5 .hover-content.mobile-active {
        display: block !important;
        position: static !important;
        margin-top: 0 !important;
    }
    
    .about-page-element.element-5 .hover-content .two-column {
        grid-template-columns: 1fr;
        gap: 2rem;
        text-align: center;
        padding: 1rem; /* Reduced padding to improve mobile centering */
        overflow: hidden;
        margin: 0 auto; /* Ensure proper centering */
    }
    
    .about-page-element.element-5 .hover-content .column-left {
        order: 1;
        width: 100%;
    }
    
    .about-page-element.element-5 .hover-content .column-right {
        order: 2;
        width: 100%;
    }
    
    .about-page-element.element-5 .player-headshot-placeholder {
        width: var(--e5-mobile-headshot-size) !important; /* 200px - Smaller for better mobile centering */
        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: #000000;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .about-page-element.element-5 .placeholder-image {
        width: 100%;
        height: 100%;
        max-width: var(--e5-mobile-headshot-size); /* 200px - Mobile headshot size */
        aspect-ratio: 1;
        font-size: 1rem; /* 16px */
        margin: 0 auto;
        background: #000000;
        border: var(--e5-player-headshot-border);
        border-radius: var(--e5-row-image-radius);
        display: grid;
        place-items: center;
        overflow: hidden;
    }
    
    .about-page-element.element-5 .player-headshot-image {
        width: 100%;
        height: 100%;
        max-width: var(--e5-mobile-headshot-size); /* 200px - Mobile headshot size */
        aspect-ratio: 1;
        margin: 0 auto;
        border-radius: var(--e5-row-image-radius);
        object-fit: cover;
        border: none;
        display: block;
    }
    
    .about-page-element.element-5 .player-profile {
        padding: var(--e5-mobile-content-padding); /* 16px - Mobile profile padding */
        text-align: center;
        overflow: hidden;
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
        box-sizing: border-box;
        padding-left: 0; /* Remove left padding for mobile centering */
    }
    
    .about-page-element.element-5 .player-profile h3 {
        font-size: var(--e5-player-name-size) !important; /* 64px - Player name size */
        margin-bottom: 1rem; /* 16px */
    }
    
    .about-page-element.element-5 .player-role {
        font-size: var(--e5-player-role-size); /* 16px */
        margin-bottom: 1rem; /* 16px */
    }
    
    .about-page-element.element-5 .player-description {
        font-size: 0.9rem; /* 14.4px */
        margin-bottom: 1rem; /* 16px */
    }
    
    .about-page-element.element-5 .player-achievements p {
        font-size: 0.9rem; /* 14.4px */
    }
}

/* Tablet Responsive Styles */
@media (max-width: 1024px) {
    .about-page-element.element-5 .two-column {
        grid-template-columns: 1fr;
        gap: 2rem; /* 32px */
        text-align: center;
        padding: var(--e5-content-padding); /* 32px */
    }
    
    .about-page-element.element-5 .row-5 {
        padding: var(--e5-mobile-row-padding); /* 8px - Reduced tablet padding */
    }
    
    .about-page-element.element-5 .player-profile {
        padding-left: 0;
        text-align: center;
    }
    
    .about-page-element.element-5 .placeholder-image {
        width: var(--e5-player-headshot-size); /* 280px - Desktop headshot size for tablets */
        height: var(--e5-player-headshot-size);
        margin: 0 auto;
        background: #000000;
        border: var(--e5-player-headshot-border);
        display: grid;
        place-items: center;
    }
    
    .about-page-element.element-5 .player-headshot-image {
        width: var(--e5-player-headshot-size); /* 280px */
        height: var(--e5-player-headshot-size);
        margin: 0 auto;
        border-radius: var(--e5-row-image-radius);
        object-fit: cover;
        border: var(--e5-player-headshot-border);
    }
    
    .about-page-element.element-5 .hover-content {
        padding: var(--e5-content-padding); /* 32px */
        left: 50%;
        transform: translateX(-50%);
        max-width: var(--e5-container-max-width); /* 1200px */
        overflow: hidden;
    }
    
    .about-page-element.element-5 .player-profile h3 {
        font-size: var(--e5-player-name-size) !important; /* 64px */
    }
}

/* Small Mobile Responsive Styles */
@media (max-width: 600px) {
    .about-page-element.element-5 .row-5 {
        padding: var(--e5-mobile-row-padding); /* 8px - Consistent mobile padding */
    }
    
    .about-page-element.element-5 .placeholder-image {
        width: var(--e5-mobile-headshot-size); /* 200px - Smaller mobile headshot */
        height: var(--e5-mobile-headshot-size);
        font-size: 0.7rem; /* 11.2px */
        background: #000000;
        border: var(--e5-player-headshot-border);
        display: grid;
        place-items: center;
    }
    
    .about-page-element.element-5 .player-headshot-image {
        width: var(--e5-mobile-headshot-size); /* 200px */
        height: var(--e5-mobile-headshot-size);
        margin: 0 auto;
        border-radius: var(--e5-row-image-radius);
        object-fit: cover;
        border: var(--e5-player-headshot-border);
    }
    
    .about-page-element.element-5 .hover-content {
        padding: var(--e5-mobile-content-padding); /* 16px */
        left: 50%;
        transform: translateX(-50%);
        max-width: var(--e5-container-max-width); /* 1200px */
        overflow: hidden;
    }
    
    .about-page-element.element-5 .player-profile {
        padding: var(--e5-mobile-content-padding); /* 16px */
        overflow: hidden;
    }
    
    .about-page-element.element-5 .player-profile h3 {
        font-size: var(--e5-player-name-size) !important; /* 64px */
    }
    
    .about-page-element.element-5 .player-role {
        font-size: 0.9rem; /* 14.4px */
    }
    
    .about-page-element.element-5 .player-description {
        font-size: 0.8rem; /* 12.8px */
        line-height: 1.5;
    }
    
    .about-page-element.element-5 .player-achievements p {
        font-size: 0.8rem; /* 12.8px */
        margin-bottom: 0.2rem; /* 3.2px */
    }
}
}
#fw-section-custom-html-90776d34-48aa-4c35-9edf-c55a9b5628f0 {

/* ================================================
   ABOUT PAGE ELEMENT 6 - DRAZAH PLAYER PROFILE
   ================================================ */

/* EASILY CHANGEABLE VALUES - ELEMENT 6 */
.about-page-element.element-6 {
    /* Section Spacing */
    --e6-row-padding: 2rem;                   /* 32px - Desktop row padding */
    --e6-mobile-row-padding: 0.5rem;          /* 8px - Mobile row padding (75% reduction) */
    --e6-banner-gap: 2rem;                    /* 32px - Gap between player banners */
    --e6-mobile-banner-gap: 0.5rem;           /* 8px - Mobile gap (75% reduction) */
    
    /* Typography */
    --e6-player-name-size: 4em;               /* 64px - Player name size */
    --e6-player-role-size: 1rem;              /* 16px - Player role text */
    --e6-player-description-size: 0.85rem;    /* 13.6px - Description text */
    --e6-player-achievement-size: 0.85rem;    /* 13.6px - Achievement text */
    
    /* Image Settings */
    --e6-row-image-radius: 12px;              /* Banner border radius */
    --e6-player-headshot-size: 280px;         /* Desktop headshot container */
    --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;         /* Max content width */
    --e6-content-padding: 2rem;               /* 32px - Content inner padding */
    --e6-mobile-content-padding: 1rem;        /* 16px - Mobile content padding */
    
    /* Animation */
    --e6-hover-transition: 0.3s ease;         /* Hover transition speed */
    
    /* Legacy Variables for Compatibility */
    --row-image-radius: var(--e6-row-image-radius);
    --player-headshot-size: var(--e6-player-headshot-size);
    --player-headshot-border: var(--e6-player-headshot-border);
}

/* Row Sections */
.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;
}

.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;
}

.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;
}

/* Player Rows - Hover Functionality */
.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;
}

.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;
}

.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-hover-transition);
    background: #000000;
    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 content without hiding banner */
@media (min-width: 769px) {
    .about-page-element.element-6 .player-row:hover .hover-content {
        opacity: 1;
    }
}

.about-page-element.element-6 .two-column {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    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;
}

.about-page-element.element-6 .column-left {
    justify-content: center;
}

.about-page-element.element-6 .column-right {
    justify-content: flex-start;
    align-items: center;
}

/* Player Headshot Container */
.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: #000000 !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;
}

/* PLACEHOLDER IMAGE STYLES */
.about-page-element.element-6 .placeholder-image {
    /* Use CSS custom properties for flexible sizing */
    width: var(--placeholder-width, var(--player-headshot-size));
    height: var(--placeholder-height, var(--player-headshot-size));
    max-width: var(--placeholder-max-width, var(--player-headshot-size));
    background: var(--placeholder-bg, #000000);
    border: var(--placeholder-border, var(--player-headshot-border));
    border-radius: var(--placeholder-radius, var(--row-image-radius));
    display: var(--placeholder-display, grid);
    place-items: center;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-weight: bold;
    font-size: var(--placeholder-font-size, 0.9rem);
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    margin: var(--placeholder-margin, 0);
    padding: var(--placeholder-padding, 0);
    text-align: center;
    line-height: var(--placeholder-line-height, normal);
}

.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;
}

.about-page-element.element-6 .player-headshot-image:hover {
    /* Subtle hover effect without overflow */
    transform: scale(1.05);
    filter: brightness(1.1);
}

/* Pink glow hover effect for the container */
.about-page-element.element-6 .player-headshot-placeholder:hover {
    box-shadow: 0 0 20px rgba(255, 0, 255, 0.6), 0 0 40px rgba(255, 0, 255, 0.4), 0 0 60px rgba(255, 0, 255, 0.2) !important;
    transform: translateY(-2px) scale(1.02) !important;
    transition: all 0.3s ease !important;
}

.about-page-element.element-6 .player-profile {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    padding-left: 2rem;
    /* Prevent scroll wheels from appearing */
    overflow: hidden !important;
    max-height: 100% !important;
}

/* STRONGER SELECTORS FOR PLAYER NAMES TO OVERRIDE GLOBAL STYLES */
.about-page-element.element-6 .player-profile h3 {
    font-size: var(--e6-player-name-size) !important;
    font-weight: 700 !important;
    margin-bottom: 0.3rem !important;
    color: #ffffff !important;
    text-transform: uppercase !important;
    /* Prevent text overflow that causes scroll wheels */
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    max-width: 100% !important;
}

.about-page-element.element-6 .player-role {
    font-size: var(--player-role-size);
    color: #ffffff;
    margin-bottom: 0.8rem;
    font-weight: 600;
}

.about-page-element.element-6 .player-description {
    font-size: var(--player-description-size);
    line-height: 1.4;
    color: #ffffff;
    margin-bottom: 1rem;
    /* Prevent text overflow that causes scroll wheels */
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    max-width: 100%;
}

.about-page-element.element-6 .player-achievements {
    margin-top: auto;
    /* Prevent text overflow that causes scroll wheels */
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
}

.about-page-element.element-6 .player-achievements p {
    font-size: var(--player-achievement-size);
    color: #ffffff;
    margin-bottom: 0.2rem;
    font-weight: 600;
    /* Prevent text overflow that causes scroll wheels */
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
}

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

/* ROW SPECIFIC BACKGROUNDS */
.about-page-element.element-6 .row-6 {
    background-color: #000000;
    padding: 0;
}

/* Desktop: Remove top/bottom padding for cleaner alignment */
@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: 1200px;
    margin: 0 auto;
    display: block;
}

/* FADE UP ANIMATION */
.about-page-element.element-6 .fade-up {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease;
}

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

/* Mobile - Completely disable hover effects and prevent conflicts */
@media (max-width: 768px) {
    .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;
    }
    
    /* Prevent any hover effects on expanded content */
    .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 properly 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;
    }
    
    .about-page-element.element-6 .player-row {
        margin: var(--e6-mobile-banner-gap) 0; /* 8px - 75% reduction from 32px */
    }
    
    .about-page-element.element-6 .row-6 {
        padding: var(--e6-mobile-row-padding); /* 8px - Reduced mobile padding */
    }
    
    .about-page-element.element-6 .row-content {
        padding: var(--e6-mobile-content-padding) !important; /* 16px - Mobile content padding */
    }
    
    /* Show banner images on mobile for player rows */
    .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 click/tap functionality */
    .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;
    }
    
    .about-page-element.element-6 .player-row .default-image:active {
        transform: scale(0.98) !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
    }

    /* Mobile-specific click functionality - Banner replacement behavior */
    .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: #000000 !important;
        border-radius: 0 !important;
        padding: 0 !important; /* REMOVED ALL PADDING - Banner images should not be cut off */
        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;
    }
    
    .about-page-element.element-6 .hover-content.mobile-active .two-column {
        display: flex !important;
        flex-direction: column !important;
        gap: 2rem !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; /* REMOVED ALL PADDING - Banner images should not be cut off */
    }
    
    .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;
    }
    
    .about-page-element.element-6 .player-row.mobile-active {
        /* Ensure expanded content flows in document */
        position: relative;
        z-index: 1;
    }
    
    /* Ensure banner images remain clickable on mobile */
    .about-page-element.element-6 .player-row .default-image {
        cursor: pointer;
        position: relative;
        z-index: 10;
    }
    
    /* No transitions on banner images for mobile */
    .about-page-element.element-6 .player-row .default-image,
    .about-page-element.element-6 .player-row .row-image {
        transition: none;
    }
    
    /* Mobile Player Profile Improvements - Match Our Story Layout */
    .about-page-element.element-6 .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;
    }
    
    /* Show hover content when clicked/active - replaces banner */
    .about-page-element.element-6 .hover-content.mobile-active {
        display: block !important;
        position: static !important;
        margin-top: 0 !important;
    }
    
    .about-page-element.element-6 .hover-content .two-column {
        grid-template-columns: 1fr;
        gap: 2rem;
        text-align: center;
        padding: 1rem; /* Reduced padding to improve mobile centering */
        overflow: hidden;
        margin: 0 auto; /* Ensure proper centering */
    }
    
    .about-page-element.element-6 .hover-content .column-left {
        order: 1;
        width: 100%;
    }
    
    .about-page-element.element-6 .hover-content .column-right {
        order: 2;
        width: 100%;
    }
    
    .about-page-element.element-6 .player-headshot-placeholder {
        width: var(--e6-mobile-headshot-size) !important; /* 200px - Smaller for better mobile centering */
        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: #000000;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .about-page-element.element-6 .placeholder-image {
        width: 100%;
        height: 100%;
        max-width: var(--player-headshot-size); /* USE CSS VARIABLE INSTEAD OF HARDCODED VALUE */
        aspect-ratio: 1;
        font-size: 1rem;
        margin: 0 auto;
        background: #000000;
        border: var(--player-headshot-border);
        border-radius: var(--row-image-radius);
        display: grid;
        place-items: center;
        overflow: hidden;
    }
    
    .about-page-element.element-6 .player-headshot-image {
        width: 100%;
        height: 100%;
        max-width: var(--player-headshot-size); /* USE CSS VARIABLE INSTEAD OF HARDCODED VALUE */
        aspect-ratio: 1;
        margin: 0 auto;
        border-radius: var(--row-image-radius);
        object-fit: cover;
        border: none;  /* Border handled by container */
        display: block;
    }
    
    .about-page-element.element-6 .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-6 .player-profile h3 {
        font-size: var(--e6-player-name-size) !important; /* USE CSS VARIABLE INSTEAD OF HARDCODED VALUE */
        margin-bottom: 1rem;
    }
    
    .about-page-element.element-6 .player-role {
        font-size: 1rem;
        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;
    }
}

/* Responsive - Tablet */
@media (max-width: 1024px) {
    .about-page-element.element-6 .two-column {
        grid-template-columns: 1fr;
        gap: 2rem;
        text-align: center;
        padding: 2rem;
    }
    
    .about-page-element.element-6 .row-6 {
        padding: 1rem; /* Mobile banner padding similar to Element 1 */
    }
    
    .about-page-element.element-6 .player-profile {
        padding-left: 0;
        text-align: center;
    }
    
    .about-page-element.element-6 .placeholder-image {
        width: var(--player-headshot-size); /* USE CSS VARIABLE INSTEAD OF HARDCODED VALUE */
        height: var(--player-headshot-size); /* USE CSS VARIABLE INSTEAD OF HARDCODED VALUE */
        margin: 0 auto;
        background: #000000;
        border: var(--player-headshot-border);
        display: grid;
        place-items: center;
    }
    
    .about-page-element.element-6 .player-headshot-image {
        width: var(--player-headshot-size); /* USE CSS VARIABLE INSTEAD OF HARDCODED VALUE */
        height: var(--player-headshot-size); /* USE CSS VARIABLE INSTEAD OF HARDCODED VALUE */
        margin: 0 auto;
        border-radius: var(--row-image-radius);
        object-fit: cover;
        border: var(--player-headshot-border);
    }
    
    .about-page-element.element-6 .hover-content {
        padding: 2rem;
        left: 50%;
        transform: translateX(-50%);
        max-width: 1200px;
        overflow: hidden;
    }
    
    .about-page-element.element-6 .player-profile h3 {
        font-size: var(--e6-player-name-size) !important; /* USE CSS VARIABLE INSTEAD OF HARDCODED VALUE */
    }
}

@media (max-width: 600px) {
    .about-page-element.element-6 .row-6 {
        padding: 1rem; /* Mobile banner padding similar to Element 1 */
    }
    
    /* Remove padding from row content on mobile */
    .about-page-element.element-6 .row-content {
        padding: 0 !important; /* Full screen width on mobile */
    }
    
    .about-page-element.element-6 .placeholder-image {
        width: var(--player-headshot-size); /* USE CSS VARIABLE INSTEAD OF HARDCODED VALUE */
        height: var(--player-headshot-size); /* USE CSS VARIABLE INSTEAD OF HARDCODED VALUE */
        font-size: 0.7rem;
        background: #000000;
        border: var(--player-headshot-border);
        display: grid;
        place-items: center;
    }
    
    .about-page-element.element-6 .player-headshot-image {
        width: var(--player-headshot-size); /* USE CSS VARIABLE INSTEAD OF HARDCODED VALUE */
        height: var(--player-headshot-size); /* USE CSS VARIABLE INSTEAD OF HARDCODED VALUE */
        margin: 0 auto;
        border-radius: var(--row-image-radius);
        object-fit: cover;
        border: var(--player-headshot-border);
    }
    
    .about-page-element.element-6 .hover-content {
        padding: 2rem;
        left: 50%;
        transform: translateX(-50%);
        max-width: 1200px;
        overflow: hidden;
    }
    
    .about-page-element.element-6 .player-profile {
        padding: 2rem;
        overflow: hidden;
    }
    
    .about-page-element.element-6 .player-profile h3 {
        font-size: var(--e6-player-name-size) !important; /* USE CSS VARIABLE INSTEAD OF HARDCODED VALUE */
    }
    
    .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-5339a083-255e-4a6b-90e4-2ca8d79554c8 {


/* ================================================
   ABOUT PAGE ELEMENT 1 - E1 BANNER ROW
   ================================================ */

/* EASILY CHANGEABLE VALUES - ELEMENT 1 */
.about-page-element.element-1 {
    /* Section Spacing */
    --e1-row-padding: 4rem;                    /* Default: 4rem */
    --e1-mobile-padding: 1rem;                 /* Default: 1rem */
    
    /* Image Settings */
    --e1-row-image-radius: 12px;               /* Default: 12px */
}

/* GLOBAL CONTAINER STYLES */
.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 SECTIONS */
.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: 1200px;
    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;
}

/* ROW 1: E1 IMAGE - FULL SCREEN ELEMENT */
.about-page-element.element-1 .row-1 {
    background-color: #000000;
    padding: var(--e1-row-padding) 2rem 0 2rem !important; /* Remove bottom padding on desktop */
    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: 80%;
    max-width: var(--container-max-width, 1200px);
    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;
}

/* RESPONSIVE DESIGN - ELEMENT 1 */
/* Mobile */
@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: 100% !important; /* Full screen width on mobile */
    }
}

/* FADE UP ANIMATION - ELEMENT 1 */
.about-page-element.element-1 .fade-up {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease;
}

.about-page-element.element-1 .fade-up.active {
    opacity: 1;
    transform: translateY(0);
}
}
#fw-section-custom-html-1b36091f-541f-4e09-a924-17cedd91f54a {

/* ================================================
   ABOUT PAGE ELEMENT 3 - ACCOLADES BANNER
   ================================================ */

/* ROW SECTIONS */
.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: 1200px;
    margin: 0 auto;
    padding: 0;
    position: relative;
}

.about-page-element.element-3 .row-3 {
    background-color: #000000;
    padding: 2rem 0;
}

/* ACCOLADES IMAGE STYLES */
.about-page-element.element-3 .row-image {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
    max-width: 1200px !important;
    border-radius: 15% !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;
}

/* Nuclear CSS: Enhanced image centering for 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: 1200px !important;
    margin: 0 auto !important;
    text-align: center !important;
    position: relative !important;
    padding: 0 2rem !important;
}

/* Enhanced image positioning with nuclear specificity */
.about-page-element.element-3 .row-3 .row-content .row-image {
    position: relative !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    border-radius: 15% !important;
    width: 100% !important;
    max-width: 1200px !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 */
.about-page-element.element-3 .fade-up {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease;
}

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

/* RESPONSIVE DESIGN */
@media (max-width: 1024px) {
    .about-page-element.element-3 .row-3 {
        padding: 1.5rem 0;
    }
}

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

@media (max-width: 600px) {
    .about-page-element.element-3 .row-3 {
        padding: 1rem 0;
    }
}
}
#fw-section-custom-html-9d95e1bc-4560-41d9-b58a-aa0ee340f706 {

/* ================================================
   ABOUT PAGE ELEMENT 4 - O4 PLAYER PROFILE
   ================================================ */

/* EASILY CHANGEABLE VALUES - ELEMENT 4 */
.about-page-element.element-4 {
    /* Section Spacing */
    --e4-row-padding: 2rem;                   /* 32px - Desktop row padding */
    --e4-mobile-row-padding: 0.5rem;          /* 8px - Mobile row padding (75% reduction) */
    --e4-banner-gap: 2rem;                    /* 32px - Gap between player banners */
    --e4-mobile-banner-gap: 0.5rem;           /* 8px - Mobile gap (75% reduction) */
    
    /* Typography */
    --e4-player-name-size: 4em;               /* 64px - Player name size */
    --e4-player-role-size: 1rem;              /* 16px - Player role text */
    --e4-player-description-size: 0.85rem;    /* 13.6px - Description text */
    --e4-player-achievement-size: 0.85rem;    /* 13.6px - Achievement text */
    
    /* Image Settings */
    --e4-row-image-radius: 12px;              /* Banner border radius */
    --e4-player-headshot-size: 280px;         /* Desktop headshot container */
    --e4-mobile-headshot-size: 200px;         /* Mobile headshot container (smaller for centering) */
    --e4-player-headshot-border: none;        /* Remove border outline */
    
    /* Layout Settings */
    --e4-container-max-width: 1200px;         /* Max content width */
    --e4-content-padding: 2rem;               /* 32px - Content inner padding */
    --e4-mobile-content-padding: 1rem;        /* 16px - Mobile content padding */
    
    /* Animation */
    --e4-hover-transition: 0.3s ease;         /* Hover transition speed */
    
    /* Legacy Variables for Compatibility */
    --row-image-radius: var(--e4-row-image-radius);
    --player-headshot-size: var(--e4-player-headshot-size);
    --player-headshot-border: var(--e4-player-headshot-border);
}

/* Row Sections */
.about-page-element.element-4 .row-section {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    position: relative;
    overflow-x: hidden;
    box-sizing: border-box;
}

.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;
}

.about-page-element.element-4 .row-image {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
    max-width: 1200px !important;
    border-radius: var(--e4-row-image-radius) !important;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
    -ms-interpolation-mode: bicubic;
    box-sizing: border-box !important;
}

/* Player Rows - Hover Functionality */
.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;
}

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

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

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

.about-page-element.element-4 .two-column {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    justify-items: center;
    margin: 0 auto;
    width: 100%;
    max-width: var(--e4-container-max-width);
    height: 100%;
    padding: var(--e4-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-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: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;
}

.about-page-element.element-4 .column-left {
    justify-content: center;
}

.about-page-element.element-4 .column-right {
    justify-content: flex-start;
    align-items: center;
}

/* Player Headshot Container */
.about-page-element.element-4 .player-headshot-placeholder {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: var(--e4-player-headshot-size) !important;
    height: var(--e4-player-headshot-size) !important;
    max-width: var(--e4-player-headshot-size) !important;
    max-height: var(--e4-player-headshot-size) !important;
    min-width: var(--e4-player-headshot-size) !important;
    min-height: var(--e4-player-headshot-size) !important;
    aspect-ratio: 1 / 1 !important;
    overflow: hidden !important;
    border-radius: var(--e4-row-image-radius) !important;
    border: var(--e4-player-headshot-border) !important;
    background: #000000 !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(--e4-hover-transition) !important;
}

.about-page-element.element-4 .player-headshot-image {
    width: 100% !important;
    height: 100% !important;
    border-radius: var(--e4-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(--e4-hover-transition), filter var(--e4-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;
}

.about-page-element.element-4 .player-headshot-image:hover {
    transform: scale(1.05) !important;
    filter: brightness(1.1) !important;
}

/* Pink Glow Hover Effect */
.about-page-element.element-4 .player-headshot-placeholder:hover {
    box-shadow: 0 0 20px rgba(255, 0, 255, 0.6), 0 0 40px rgba(255, 0, 255, 0.4), 0 0 60px rgba(255, 0, 255, 0.2) !important;
    transform: translateY(-2px) scale(1.02) !important;
    transition: all var(--e4-hover-transition) !important;
}

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

/* Player Name Styling - High Specificity Override */
body .about-page-element.element-4 .player-profile h3,
html body .about-page-element.element-4 .player-profile h3,
.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: #ffffff !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;
}

.about-page-element.element-4 .player-role {
    font-size: var(--e4-player-role-size); /* 16px */
    color: #ffffff;
    margin-bottom: 0.8rem; /* 12.8px */
    font-weight: 600;
}

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

.about-page-element.element-4 .player-achievements {
    margin-top: auto;
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
}

.about-page-element.element-4 .player-achievements p {
    font-size: var(--e4-player-achievement-size); /* 13.6px */
    color: #ffffff;
    margin-bottom: 0.2rem; /* 3.2px */
    font-weight: 600;
    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 Background */
.about-page-element.element-4 .row-4 {
    background-color: #000000;
    padding: 0;
}

@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: var(--e4-container-max-width);
    margin: 0 auto;
    display: block;
}

/* Fade Up Animation */
.about-page-element.element-4 .fade-up {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease;
}

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

/* Mobile Responsive Styles */
@media (max-width: 768px) {
    .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;
    }
    
    .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;
    }
    
    /* Prevent any hover effects on expanded content */
    .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;
    }
    
    .about-page-element.element-4 .player-row {
        margin: var(--e4-mobile-banner-gap) 0; /* 8px - 75% reduction from 32px */
    }
    
    .about-page-element.element-4 .row-4 {
        padding: var(--e4-mobile-row-padding); /* 8px - Reduced mobile padding */
    }
    
    .about-page-element.element-4 .row-content {
        padding: var(--e4-mobile-content-padding) !important; /* 16px - Mobile content padding */
    }
    
    /* Show banner images on mobile for player rows */
    .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 click/tap functionality */
    .about-page-element.element-4 .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;
    }
    
    .about-page-element.element-4 .player-row .default-image:active {
        transform: scale(0.98) !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
    }

    /* Mobile-specific click functionality - Banner replacement behavior */
    .about-page-element.element-4 .player-row.mobile-active .default-image {
        display: none !important;
        opacity: 0 !important;
    }
    
    .about-page-element.element-4 .hover-content.mobile-active {
        opacity: 1 !important;
        visibility: visible !important;
        display: block !important;
        position: static !important;
        background: #000000 !important;
        border-radius: 0 !important;
        padding: var(--e4-mobile-content-padding) !important; /* 16px - Controlled mobile padding */
        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;
    }
    
    .about-page-element.element-4 .hover-content.mobile-active .two-column {
        display: flex !important;
        flex-direction: column !important;
        gap: 1rem !important; /* 16px - Reduced gap for mobile */
        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-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;
    }
    
    .about-page-element.element-4 .player-row.mobile-active {
        /* Ensure expanded content flows in document */
        position: relative;
        z-index: 1;
    }
    
    /* Ensure banner images remain clickable on mobile */
    .about-page-element.element-4 .player-row .default-image {
        cursor: pointer;
        position: relative;
        z-index: 10;
    }
    
    /* No transitions on banner images for mobile */
    .about-page-element.element-4 .player-row .default-image,
    .about-page-element.element-4 .player-row .row-image {
        transition: none;
    }
    
    /* Mobile Player Profile Improvements - Match Our Story Layout */
    .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;
    }
    
    /* Show hover content when clicked/active - replaces banner */
    .about-page-element.element-4 .hover-content.mobile-active {
        display: block !important;
        position: static !important;
        margin-top: 0 !important;
    }
    
    .about-page-element.element-4 .hover-content .two-column {
        grid-template-columns: 1fr;
        gap: 2rem;
        text-align: center;
        padding: 1rem; /* Reduced padding to improve mobile centering */
        overflow: hidden;
        margin: 0 auto; /* Ensure proper centering */
    }
    
    .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%;
    }
    
    .about-page-element.element-4 .player-headshot-placeholder {
        width: var(--e4-mobile-headshot-size) !important; /* 200px - Smaller for better mobile centering */
        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: #000000;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .about-page-element.element-4 .placeholder-image {
        width: 100%;
        height: 100%;
        max-width: var(--e4-mobile-headshot-size); /* 200px - Mobile headshot size */
        aspect-ratio: 1;
        font-size: 1rem; /* 16px */
        margin: 0 auto;
        background: #000000;
        border: var(--e4-player-headshot-border);
        border-radius: var(--e4-row-image-radius);
        display: grid;
        place-items: center;
        overflow: hidden;
    }
    
    .about-page-element.element-4 .player-headshot-image {
        width: 100%;
        height: 100%;
        max-width: var(--e4-mobile-headshot-size); /* 200px - Mobile headshot size */
        aspect-ratio: 1;
        margin: 0 auto;
        border-radius: var(--e4-row-image-radius);
        object-fit: cover;
        border: none;
        display: block;
    }
    
    .about-page-element.element-4 .player-profile {
        padding: var(--e4-mobile-content-padding); /* 16px - Mobile profile padding */
        text-align: center;
        overflow: hidden;
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
        box-sizing: border-box;
        padding-left: 0; /* Remove left padding for mobile centering */
    }
    
    .about-page-element.element-4 .player-profile h3 {
        font-size: var(--e4-player-name-size) !important; /* 64px - Player name size */
        margin-bottom: 1rem; /* 16px */
    }
    
    .about-page-element.element-4 .player-role {
        font-size: var(--e4-player-role-size); /* 16px */
        margin-bottom: 1rem; /* 16px */
    }
    
    .about-page-element.element-4 .player-description {
        font-size: 0.9rem; /* 14.4px */
        margin-bottom: 1rem; /* 16px */
    }
    
    .about-page-element.element-4 .player-achievements p {
        font-size: 0.9rem; /* 14.4px */
    }
}

/* Tablet Responsive Styles */
@media (max-width: 1024px) {
    .about-page-element.element-4 .two-column {
        grid-template-columns: 1fr;
        gap: 2rem; /* 32px */
        text-align: center;
        padding: var(--e4-content-padding); /* 32px */
    }
    
    .about-page-element.element-4 .row-4 {
        padding: var(--e4-mobile-row-padding); /* 8px - Reduced tablet padding */
    }
    
    .about-page-element.element-4 .player-profile {
        padding-left: 0;
        text-align: center;
    }
    
    .about-page-element.element-4 .placeholder-image {
        width: var(--e4-player-headshot-size); /* 280px - Desktop headshot size for tablets */
        height: var(--e4-player-headshot-size);
        margin: 0 auto;
        background: #000000;
        border: var(--e4-player-headshot-border);
        display: grid;
        place-items: center;
    }
    
    .about-page-element.element-4 .player-headshot-image {
        width: var(--e4-player-headshot-size); /* 280px */
        height: var(--e4-player-headshot-size);
        margin: 0 auto;
        border-radius: var(--e4-row-image-radius);
        object-fit: cover;
        border: var(--e4-player-headshot-border);
    }
    
    .about-page-element.element-4 .hover-content {
        padding: var(--e4-content-padding); /* 32px */
        left: 50%;
        transform: translateX(-50%);
        max-width: var(--e4-container-max-width); /* 1200px */
        overflow: hidden;
    }
    
    .about-page-element.element-4 .player-profile h3 {
        font-size: var(--e4-player-name-size) !important; /* 64px */
    }
}

/* Small Mobile Responsive Styles */
@media (max-width: 600px) {
    .about-page-element.element-4 .row-4 {
        padding: var(--e4-mobile-row-padding); /* 8px - Consistent mobile padding */
    }
    
    .about-page-element.element-4 .placeholder-image {
        width: var(--e4-mobile-headshot-size); /* 200px - Smaller mobile headshot */
        height: var(--e4-mobile-headshot-size);
        font-size: 0.7rem; /* 11.2px */
        background: #000000;
        border: var(--e4-player-headshot-border);
        display: grid;
        place-items: center;
    }
    
    .about-page-element.element-4 .player-headshot-image {
        width: var(--e4-mobile-headshot-size); /* 200px */
        height: var(--e4-mobile-headshot-size);
        margin: 0 auto;
        border-radius: var(--e4-row-image-radius);
        object-fit: cover;
        border: var(--e4-player-headshot-border);
    }
    
    .about-page-element.element-4 .hover-content {
        padding: var(--e4-mobile-content-padding); /* 16px */
        left: 50%;
        transform: translateX(-50%);
        max-width: var(--e4-container-max-width); /* 1200px */
        overflow: hidden;
    }
    
    .about-page-element.element-4 .player-profile {
        padding: var(--e4-mobile-content-padding); /* 16px */
        overflow: hidden;
    }
    
    .about-page-element.element-4 .player-profile h3 {
        font-size: var(--e4-player-name-size) !important; /* 64px */
    }
    
    .about-page-element.element-4 .player-role {
        font-size: 0.9rem; /* 14.4px */
    }
    
    .about-page-element.element-4 .player-description {
        font-size: 0.8rem; /* 12.8px */
        line-height: 1.5;
    }
    
    .about-page-element.element-4 .player-achievements p {
        font-size: 0.8rem; /* 12.8px */
        margin-bottom: 0.2rem; /* 3.2px */
    }
}
}
#fw-section-custom-html-287305fe-4553-4fa2-8824-e949027e3841 {

/* ================================================
   ABOUT PAGE ELEMENT 7 - ABUZAH PLAYER PROFILE
   ================================================ */

/* EASILY CHANGEABLE VALUES - ELEMENT 7 */
.about-page-element.element-7 {
    /* Section Spacing */
    --e7-row-padding: 2rem;                   /* 32px - Desktop row padding */
    --e7-mobile-row-padding: 0.5rem;          /* 8px - Mobile row padding (75% reduction) */
    --e7-banner-gap: 2rem;                    /* 32px - Gap between player banners */
    --e7-mobile-banner-gap: 0.5rem;           /* 8px - Mobile gap (75% reduction) */
    
    /* Typography */
    --e7-player-name-size: 4em;               /* 64px - Player name size */
    --e7-player-role-size: 1rem;              /* 16px - Player role text */
    --e7-player-description-size: 0.85rem;    /* 13.6px - Description text */
    --e7-player-achievement-size: 0.85rem;    /* 13.6px - Achievement text */
    
    /* Image Settings */
    --e7-row-image-radius: 12px;              /* Banner border radius */
    --e7-player-headshot-size: 280px;         /* Desktop headshot container */
    --e7-mobile-headshot-size: 200px;         /* Mobile headshot container (smaller for centering) */
    --e7-player-headshot-border: none;        /* Remove border outline */
    
    /* Layout Settings */
    --e7-container-max-width: 1200px;         /* Max content width */
    --e7-content-padding: 2rem;               /* 32px - Content inner padding */
    --e7-mobile-content-padding: 1rem;        /* 16px - Mobile content padding */
    
    /* Animation */
    --e7-hover-transition: 0.3s ease;         /* Hover transition speed */
    
    /* Legacy Variables for Compatibility */
    --row-image-radius: var(--e7-row-image-radius);
    --player-headshot-size: var(--e7-player-headshot-size);
    --player-headshot-border: var(--e7-player-headshot-border);
}

/* Row Sections */
.about-page-element.element-7 .row-section {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    position: relative;
    overflow-x: hidden;
    box-sizing: border-box;
}

.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;
}

.about-page-element.element-7 .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;
}

/* Player Rows - Hover Functionality */
.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;
}

.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 0.3s ease;
    box-sizing: border-box !important;
}

.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 0.3s ease;
    background: #000000;
    border-radius: var(--row-image-radius);
    padding: 2rem;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Prevent scroll wheels from appearing */
    overflow: hidden !important;
}

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

.about-page-element.element-7 .two-column {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: stretch;
    margin: 0 auto;
    width: 100%;
    max-width: 1200px;
    height: 100%;
    padding: 2rem;
    box-sizing: border-box;
    overflow: hidden !important;
}

.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: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;
}

.about-page-element.element-7 .column-left {
    /* Image column - center the headshot container */
    justify-content: center;
}

.about-page-element.element-7 .column-right {
    /* Text column - align content appropriately */
    justify-content: flex-start;
    align-items: center;
}

/* PLAYER PROFILE STYLING - Clean Containers */
.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;
    /* Ensure container constrains content */
    overflow: hidden !important;
    border-radius: var(--row-image-radius) !important;
    border: none !important; /* Remove gray outline */
    background: #000000 !important; /* Pure black background */
    /* Ensure links within work properly */
    pointer-events: auto !important;
    margin: 0 auto !important;
    position: relative !important;
    box-sizing: border-box !important;
    /* Centering in column */
    align-self: center !important;
    justify-self: center !important;
    /* Transition for hover effect */
    transition: all 0.3s ease !important;
}

/* PLACEHOLDER IMAGE STYLES */
.about-page-element.element-7 .placeholder-image {
    /* Use CSS custom properties for flexible sizing */
    width: var(--placeholder-width, var(--player-headshot-size));
    height: var(--placeholder-height, var(--player-headshot-size));
    max-width: var(--placeholder-max-width, var(--player-headshot-size));
    background: var(--placeholder-bg, #000000);
    border: var(--placeholder-border, var(--player-headshot-border));
    border-radius: var(--placeholder-radius, var(--row-image-radius));
    display: var(--placeholder-display, grid);
    place-items: center;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-weight: bold;
    font-size: var(--placeholder-font-size, 0.9rem);
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    margin: var(--placeholder-margin, 0);
    padding: var(--placeholder-padding, 0);
    text-align: center;
    line-height: var(--placeholder-line-height, normal);
}

.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;
    object-position: center center;  /* Center on face instead of cutting off top of head */
    border: var(--player-headshot-border);
    display: block;
    flex-shrink: 0;
    transition: transform 0.3s ease, border-color 0.3s ease;
    /* Remove problematic scaling that causes overflow */
    transform: scale(1);
    /* Ensure proper containment */
    max-width: 100%;
    max-height: 100%;
    /* Ensure clickability is preserved */
    pointer-events: auto;
    cursor: pointer;
}

.about-page-element.element-7 .player-headshot-image:hover {
    /* Subtle hover effect without overflow */
    transform: scale(1.05);
    filter: brightness(1.1);
}

/* Pink glow hover effect for the container */
.about-page-element.element-7 .player-headshot-placeholder:hover {
    box-shadow: 0 0 20px rgba(255, 0, 255, 0.6), 0 0 40px rgba(255, 0, 255, 0.4), 0 0 60px rgba(255, 0, 255, 0.2) !important;
    transform: translateY(-2px) scale(1.02) !important;
    transition: all 0.3s ease !important;
}

.about-page-element.element-7 .player-profile {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    padding-left: 2rem;
    /* Prevent scroll wheels from appearing */
    overflow: hidden !important;
    max-height: 100% !important;
}

/* STRONGER SELECTORS FOR PLAYER NAMES TO OVERRIDE GLOBAL STYLES */
.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;
    color: #ffffff !important;
    text-transform: uppercase !important;
    /* Prevent text overflow that causes scroll wheels */
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    max-width: 100% !important;
}

.about-page-element.element-7 .player-role {
    font-size: var(--player-role-size);
    color: #ffffff;
    margin-bottom: 0.8rem;
    font-weight: 600;
}

.about-page-element.element-7 .player-description {
    font-size: var(--player-description-size);
    line-height: 1.4;
    color: #ffffff;
    margin-bottom: 1rem;
    /* Prevent text overflow that causes scroll wheels */
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    max-width: 100%;
}

.about-page-element.element-7 .player-achievements {
    margin-top: auto;
    /* Prevent text overflow that causes scroll wheels */
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
}

.about-page-element.element-7 .player-achievements p {
    font-size: var(--player-achievement-size);
    color: #ffffff;
    margin-bottom: 0.2rem;
    font-weight: 600;
    /* Prevent text overflow that causes scroll wheels */
    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 */
.about-page-element.element-7 .row-7 {
    background-color: #000000;
    padding: 0;
}

/* Desktop: Remove top/bottom padding for cleaner alignment */
@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 */
.about-page-element.element-7 .fade-up {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease;
}

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

/* Mobile - Completely disable hover effects and prevent conflicts */
@media (max-width: 768px) {
    .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;
    }
    
    .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;
    }
    
    /* Prevent any hover effects on expanded content */
    .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;
    }
    
    .about-page-element.element-7 .player-row {
        margin: var(--e7-mobile-banner-gap) 0; /* 8px - 75% reduction from 32px */
    }
    
    .about-page-element.element-7 .row-7 {
        padding: var(--e7-mobile-row-padding); /* 8px - Reduced mobile padding */
    }
    
    .about-page-element.element-7 .row-content {
        padding: var(--e7-mobile-content-padding) !important; /* 16px - Mobile content padding */
    }
    
    /* Show banner images on mobile for player rows */
    .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 click/tap functionality */
    .about-page-element.element-7 .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;
    }
    
    .about-page-element.element-7 .player-row .default-image:active {
        transform: scale(0.98) !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
    }

    /* Mobile-specific click functionality - Banner replacement behavior */
    .about-page-element.element-7 .player-row.mobile-active .default-image {
        display: none !important;
        opacity: 0 !important;
    }
    
    .about-page-element.element-7 .hover-content.mobile-active {
        opacity: 1 !important;
        visibility: visible !important;
        display: block !important;
        position: static !important;
        background: #000000 !important;
        border-radius: 0 !important;
        padding: 0 !important; /* REMOVED ALL PADDING - Banner images should not be cut off */
        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;
    }
    
    .about-page-element.element-7 .hover-content.mobile-active .two-column {
        display: flex !important;
        flex-direction: column !important;
        gap: 2rem !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; /* REMOVED ALL PADDING - Banner images should not be cut off */
    }
    
    .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;
    }
    
    .about-page-element.element-7 .player-row.mobile-active {
        /* Ensure expanded content flows in document */
        position: relative;
        z-index: 1;
    }
    
    /* Ensure banner images remain clickable on mobile */
    .about-page-element.element-7 .player-row .default-image {
        cursor: pointer;
        position: relative;
        z-index: 10;
    }
    
    /* No transitions on banner images for mobile */
    .about-page-element.element-7 .player-row .default-image,
    .about-page-element.element-7 .player-row .row-image {
        transition: none;
    }
    
    /* Mobile Player Profile Improvements - Match Our Story Layout */
    .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;
    }
    
    /* Show hover content when clicked/active - replaces banner */
    .about-page-element.element-7 .hover-content.mobile-active {
        display: block !important;
        position: static !important;
        margin-top: 0 !important;
    }
    
    .about-page-element.element-7 .hover-content .two-column {
        grid-template-columns: 1fr;
        gap: 2rem;
        text-align: center;
        padding: 1rem; /* Reduced padding to improve mobile centering */
        overflow: hidden;
        margin: 0 auto; /* Ensure proper centering */
    }
    
    .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%;
    }
    
    .about-page-element.element-7 .player-headshot-placeholder {
        width: var(--e7-mobile-headshot-size) !important; /* 200px - Smaller for better mobile centering */
        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: #000000;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .about-page-element.element-7 .placeholder-image {
        width: 100%;
        height: 100%;
        max-width: var(--player-headshot-size); /* USE CSS VARIABLE INSTEAD OF HARDCODED VALUE */
        aspect-ratio: 1;
        font-size: 1rem;
        margin: 0 auto;
        background: #000000;
        border: var(--player-headshot-border);
        border-radius: var(--row-image-radius);
        display: grid;
        place-items: center;
        overflow: hidden;
    }
    
    .about-page-element.element-7 .player-headshot-image {
        width: 100%;
        height: 100%;
        max-width: var(--player-headshot-size); /* USE CSS VARIABLE INSTEAD OF HARDCODED VALUE */
        aspect-ratio: 1;
        margin: 0 auto;
        border-radius: var(--row-image-radius);
        object-fit: cover;
        border: none;  /* Border handled by container */
        display: block;
    }
    
    .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; /* USE CSS VARIABLE INSTEAD OF HARDCODED VALUE */
        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;
    }
}

/* Responsive - Tablet */
@media (max-width: 1024px) {
    .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; /* Mobile banner padding similar to Element 1 */
    }
    
    .about-page-element.element-7 .player-profile {
        padding-left: 0;
        text-align: center;
    }
    
    .about-page-element.element-7 .placeholder-image {
        width: var(--player-headshot-size); /* USE CSS VARIABLE INSTEAD OF HARDCODED VALUE */
        height: var(--player-headshot-size); /* USE CSS VARIABLE INSTEAD OF HARDCODED VALUE */
        margin: 0 auto;
        background: #000000;
        border: var(--player-headshot-border);
        display: grid;
        place-items: center;
    }
    
    .about-page-element.element-7 .player-headshot-image {
        width: var(--player-headshot-size); /* USE CSS VARIABLE INSTEAD OF HARDCODED VALUE */
        height: var(--player-headshot-size); /* USE CSS VARIABLE INSTEAD OF HARDCODED VALUE */
        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; /* USE CSS VARIABLE INSTEAD OF HARDCODED VALUE */
    }
}

@media (max-width: 600px) {
    .about-page-element.element-7 .row-7 {
        padding: 1rem; /* Mobile banner padding similar to Element 1 */
    }
    
    /* Remove padding from row content on mobile */
    .about-page-element.element-7 .row-content {
        padding: 0 !important; /* Full screen width on mobile */
    }
    
    .about-page-element.element-7 .placeholder-image {
        width: var(--player-headshot-size); /* USE CSS VARIABLE INSTEAD OF HARDCODED VALUE */
        height: var(--player-headshot-size); /* USE CSS VARIABLE INSTEAD OF HARDCODED VALUE */
        font-size: 0.7rem;
        background: #000000;
        border: var(--player-headshot-border);
        display: grid;
        place-items: center;
    }
    
    .about-page-element.element-7 .player-headshot-image {
        width: var(--player-headshot-size); /* USE CSS VARIABLE INSTEAD OF HARDCODED VALUE */
        height: var(--player-headshot-size); /* USE CSS VARIABLE INSTEAD OF HARDCODED VALUE */
        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; /* USE CSS VARIABLE INSTEAD OF HARDCODED VALUE */
    }
    
    .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-e484c25e-8d04-4407-aefc-1e9000aa4840 {

/* ================================================
       HOME PAGE ELEMENT 2 - COLLECTIONS SHOWCASE
       BASED ON WORKING FOURTHWALL STRUCTURE
       ================================================ */

    /* SECTION PADDING CLASS - BASED ON WORKING COLLECTIONS CODE */
    .section-fw-section-collections-list-fe5269c7-1b14-4906-a186-d54a0a54f9b0-padding {
        padding-top: 15px;
        padding-bottom: 4px;
    }

    @media screen and (min-width: 640px) {
        .section-fw-section-collections-list-fe5269c7-1b14-4906-a186-d54a0a54f9b0-padding {
            padding-top: 20px;
            padding-bottom: 5px;
        }
    }

    /* Collections Section Container */
    .home-page-element.homepage-collections-showcase {
        width: 100%;
        position: relative;
        background: transparent;
    }

    /* Section Header Styling - MATCHING ELEMENT 3 INTRODUCING STYLING */
    .collections .section-header {
        text-align: left;
        margin-bottom: 2rem;
    }

    .collections .section-header__heading,
    .collections__heading {
        font-size: 2rem;
        color: #ffffff;
        font-weight: 700;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        margin: 0 0 4rem 9.25rem;
        padding: 0;
        text-shadow: none;
        line-height: 1.1;
        position: relative;
        z-index: 10;
    }

    /* Collections Grid - Based on Working FourthWall Structure */
    .collections__grid,
    .grid--waffle.grid--layout-3-cols {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
        list-style: none;
        margin: 0 0 3rem 0;
        padding: 0;
        max-width: 1200px;
        margin-left: auto;
        margin-right: auto;
    }

    /* Collection Items */
    .collections__item,
    .grid__column {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
        position: relative;
    }

    /* Collection Link Styling - IDENTICAL TO ABOUT PAGE FUNCTIONALITY */
    .collections__link,
    .collections-list__item {
        display: block;
        text-decoration: none;
        color: inherit;
        transition: all 0.3s ease;
        width: 100%;
        position: relative;
    }

    .collections__link:hover,
    .collections-list__item:hover {
        transform: scale(1.05);
    }

    /* Image Container - IDENTICAL TO ABOUT PAGE HEADSHOT CONTAINERS */
    .collections__image-container,
    .collections-list__item-image-wrapper {
        width: 100%;
        aspect-ratio: 1;
        overflow: hidden;
        border-radius: 18px; /* Match about page image radius */
        margin-bottom: 1rem;
        position: relative;
        transition: all 0.3s ease;
        cursor: pointer;
    }

    /* IDENTICAL GLOW EFFECT FROM ABOUT PAGE */
    .collections__image-container:hover,
    .collections-list__item-image-wrapper:hover {
        box-shadow: 0 0 10px rgba(255, 0, 255, 0.8), 0 0 20px rgba(255, 0, 255, 0.4), 0 0 30px rgba(255, 0, 255, 0.2);
        transform: scale(1.05);
    }

    /* Collection Images */
    .collections__image,
    .collections-list__item-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        transition: transform 0.3s ease;
        border-radius: 18px; /* Match container radius */
    }

    /* Collection Titles */
    .collections__title,
    .collections-list__item-title {
        font-size: 1.1rem;
        color: #ffffff;
        font-weight: 600;
        letter-spacing: 0.15em;
        text-transform: uppercase;
        margin: 0;
        padding: 0;
        text-align: left;
        text-shadow: none;
        position: relative;
        z-index: 10;
    }

    /* Shop All Button Styling - MAGENTA BACKGROUND WITH WHITE TEXT */
    .collections__cta {
        text-align: center;
        margin-top: 2rem;
    }

    .cta-button {
        display: inline-block;
        background: #ff00ff;
        border: none;
        color: #ffffff;
        padding: 0.75rem 2rem;
        font-size: 1rem;
        font-weight: 600;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        text-decoration: none;
        border-radius: 100px;
        transition: all 0.3s ease;
        cursor: pointer;
        text-shadow: none;
    }

    .cta-button:hover {
        background: #ff33ff;
        color: #ffffff;
        transform: scale(1.05);
    }

    /* Mobile Responsive */
    @media (max-width: 768px) {
        .collections__grid,
        .grid--waffle.grid--layout-3-cols {
            grid-template-columns: 1fr;
            gap: 1.5rem;
            padding: 0 1rem;
        }

        .collections .section-header {
            text-align: center;
        }

        .collections .section-header__heading,
        .collections__heading {
            font-size: 1.75rem;
            margin: 0 0 3rem 0; /* CENTERED: Remove left margin on mobile */
            text-shadow: none;
        }

        .collections__image-container,
        .collections-list__item-image-wrapper {
            max-width: 300px;
            margin-left: auto;
            margin-right: auto;
        }

        .collections__item,
        .grid__column {
            align-items: center;
            text-align: center;
        }

        .collections__title,
        .collections-list__item-title {
            text-align: center;
            text-shadow: none;
        }

        .cta-button {
            text-shadow: none;
        }
    }

    @media (max-width: 640px) {
        .collections .section-header__heading,
        .collections__heading {
            font-size: 1.5rem;
            margin: 0 0 2.5rem 0; 
            text-align: center;
            text-shadow: none;
        }
    }
}
#fw-section-custom-html-1ca0adeb-a80a-4778-85ac-6c8e7cccf285 {

/* ================================================
       HOME PAGE ELEMENT 1 - SIMPLIFIED BANNER SECTION
       ================================================ */

    /* FOURTHWALL SECTION CONTAINER - TOP ALIGNMENT (Based on video section approach) */
    .custom-html--fw-section-custom-html-1ca0adeb-a80a-4778-85ac-6c8e7cccf285 {
        padding-top: 0px !important;
    }

    /* SECTION PADDING CLASS - KEY FIX FROM WORKING VIDEO SECTION */
    .section-fw-section-custom-html-1ca0adeb-a80a-4778-85ac-6c8e7cccf285-padding {
        padding-top: 0px !important; /* CRITICAL: This is the key class that controls mobile padding */
    }

    /* Banner Container */
    .home-page-element.homepage-banner-rotator {
        width: 100%;
        position: relative;
        margin-top: 0px !important;
        padding-top: 0px !important;
        top: 0;
    }

    /* Banner Main Element - FIXED ASPECT RATIO APPROACH */
    .home-page-element.homepage-banner-rotator .banner {
        width: 100%;
        position: relative;
        overflow: hidden;
        padding-bottom: calc(100% / 2.04); /* Maintains 2.04:1 aspect ratio */
        height: 0; /* Required for padding-bottom technique */
    }

    /* Banner Rotator Container */
    .home-page-element.homepage-banner-rotator .banner__rotator {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    /* Banner Slides */
    .home-page-element.homepage-banner-rotator .banner__slide {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        transition: opacity 0.5s ease;
    }

    .home-page-element.homepage-banner-rotator .banner__slide--active {
        opacity: 1;
        z-index: 2;
    }

    /* Banner Images and Videos */
    .home-page-element.homepage-banner-rotator .banner__image,
    .home-page-element.homepage-banner-rotator .banner__video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }

    /* Video-specific styling */
    .home-page-element.homepage-banner-rotator .banner__video {
        position: relative;
        z-index: 2; /* Video gets higher priority than fallback image */
    }

    /* Fallback image styling - hidden when video loads */
    .home-page-element.homepage-banner-rotator .banner__image--fallback {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1; /* Lower priority than video */
        display: block;
    }

    /* Navigation Arrows - HIDDEN BY DEFAULT, APPEAR ON HOVER */
    .home-page-element.homepage-banner-rotator .banner__nav-btn {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background: transparent !important;
        color: #ffffff;
        border: none;
        width: 50px;
        height: 50px;
        font-size: 24px;
        cursor: pointer;
        border-radius: 50%;
        z-index: 10;
        opacity: 0; /* HIDDEN BY DEFAULT */
        transition: opacity 0.3s ease;
    }

    /* SHOW NAVIGATION ON BANNER HOVER */
    .home-page-element.homepage-banner-rotator .banner:hover .banner__nav-btn {
        opacity: 1; /* APPEAR ON HOVER */
    }

    .home-page-element.homepage-banner-rotator .banner__nav-btn--prev {
        left: 1rem;
    }

    .home-page-element.homepage-banner-rotator .banner__nav-btn--next {
        right: 1rem;
    }

    /* Responsive - Top Alignment */
    @media screen and (min-width: 640px) {
        .custom-html--fw-section-custom-html-1ca0adeb-a80a-4778-85ac-6c8e7cccf285 {
            padding-top: 0px !important;
        }
    }

    /* Mobile Responsive - CONTAIN TO SHOW FULL BANNER WIDTH */
    @media (max-width: 768px) {
        .home-page-element.homepage-banner-rotator .banner {
            padding-bottom: calc(100% / 2.04); /* Keep same aspect ratio */
            margin-bottom: 2rem; /* Add bottom spacing instead of changing aspect ratio */
        }

        .home-page-element.homepage-banner-rotator .banner__image,
        .home-page-element.homepage-banner-rotator .banner__video {
            object-fit: contain; /* CONTAIN to show full width without cropping sides */
        }

        /* MOBILE: Always show navigation arrows */
        .home-page-element.homepage-banner-rotator .banner__nav-btn {
            opacity: 1 !important;
        }
    }
}