/* ===========================================
   FIXED FILM MODAL - ALL ISSUES RESOLVED
   =========================================== */

/* Modal Base */
.film-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #000000;
    z-index: 10000 !important;
    display: none;
    opacity: 0;
    transition: opacity 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    overflow-y: auto;
    overflow-x: hidden;
    pointer-events: auto !important;
    cursor: auto !important;
}

.film-modal.is-active {
    display: block;
    opacity: 1;
    pointer-events: auto !important;
    cursor: auto !important;
}

.modal-container {
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    position: relative;
    cursor: auto !important;
}

/* Close Button - Follows scroll */
.modal-close, #closeModal {
    position: fixed !important; /* Changed back to fixed */
    top: 1.5rem !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: none !important;
    border: none !important;
    color: white !important;
    font-family: 'Selecta' !important;
    font-size: 14px !important;
    font-weight: normal !important;
    letter-spacing: 1px !important;
    cursor: pointer !important;
    transition: opacity 0.3s ease !important;
    z-index: 10001 !important;
    padding: 0 !important;
    text-align: center !important;
    text-decoration: none !important;
}

#closeModal:hover {
    opacity: 0.7 !important;
}

/* Mobile close button */
@media (max-width: 768px) {
    .modal-close, #closeModal {
        top: 1rem !important;
        font-size: 12px !important;
    }
}

/* Video Section - Smaller to show credits start */
.video-section {
    width: 100%;
    height: 70vh; /* Reduced from 100vh to 70vh */
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
    position: relative;
    padding: 3rem;
    box-sizing: border-box;
    cursor: auto !important;
}

.video-wrapper {
    width: 100%;
    max-width: none;
    aspect-ratio: 16/9;
    border-radius: 0;
    overflow: hidden;
    cursor: auto !important;
}

.video-player {
    width: 100%;
    height: 100%;
    background: #000;
    cursor: auto !important;
}

/* Credits Section */
.credits-section {
    width: 100%;
    background: #000000;
    padding: 3rem;
    color: white;
    font-family: 'Selecta';
    min-height: 40vh;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.credits-container {
    max-width: 1000px; /* Increased from 800px for wider names */
    margin: 0 auto;
    background: none;
    padding: 0;
    color: white;
    font-family: 'Selecta';
    font-size: 14px;
    letter-spacing: 1px;
    line-height: 1.3;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    text-align: center;
}

.credits-grid {
    display: block;
    margin-top: 0;
}

.credit-section {
    background: none;
    padding: 0;
    border-radius: 0;
    border-left: none;
    margin-bottom: 0;
    transition: none;
}

.credit-line {
    margin-bottom: 0.3rem;
    font-size: 14px;
    line-height: 1.3;
    display: block;
    font-weight: normal;
    letter-spacing: 1px;
    text-align: center;
}

.credit-role {
    color: #32b550;
    font-weight: normal;
    text-align: right;
    display: inline-block;
    width: 47%; /* CHANGE: from 45% to 47% */
    margin-right: 2%; /* CHANGE: from 5% to 2% */
    vertical-align: top;
}

.credit-name {
    color: white;
    font-weight: normal;
    text-align: left;
    display: inline-block;
    width: 49%; /* CHANGE: from 45% to 49% */
    vertical-align: top;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .modal-close, #closeModal {
        top: 1rem !important;
        font-size: 12px !important;
    }
    
    .video-section {
        height: 50vh;
        padding: 0 !important; /* Remove padding for full width */
    }
    
    .video-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }
    
    .video-player {
        width: 100% !important;
        height: 100% !important;
        border-radius: 0 !important; /* Sharp corners for full width */
    }
    
    .credits-section {
        padding: 2rem 1rem;
    }
    
    .credits-container {
        max-width: 100%;
        text-align: center;
    }
    
    .credit-line {
        text-align: center;
        margin-bottom: 0.3rem;
    }
    
    .credit-role {
        color: #32b550;
        font-weight: normal;
        text-align: right;
        display: inline-block;
        width: 45%;
        margin-right: 3%;
        vertical-align: top;
        font-size: 12px;
        letter-spacing: 1px;
    }
    
    .credit-name {
        color: white;
        font-weight: normal;
        text-align: left;
        display: inline-block;
        width: 50%;
        vertical-align: top;
        font-size: 12px;
        letter-spacing: 1px;
    }
}

/* Force cursor visibility */
.film-modal *, 
.film-modal *:hover {
    cursor: auto !important;
}

/* Smooth Scrolling */
.film-modal {
    scroll-behavior: smooth;
}

/* Fix z-index conflicts with GSAP */
.film-modal {
    z-index: 10000 !important;
    pointer-events: auto !important;
}

.film-modal.is-active {
    pointer-events: auto !important;
}

/* Progress bar styling - add this to your CSS */
.nav-progress-fill {
    background-color: white !important;
    transition: width 0.2s ease, height 0.2s ease;
}

/* Different colors based on nav theme */
.nav-bar.nav-green .nav-progress-fill {
    background-color: white !important;
}

.nav-bar.nav-black .nav-progress-fill {
    background-color: #32b550 !important;
}

.nav-bar.nav-white .nav-progress-fill {
    background-color: #32b550 !important;
}

/* Gentle over-scroll prevention that preserves GSAP scrolling */
html {
    overscroll-behavior: none;
    overscroll-behavior-y: none;
}

body {
    overscroll-behavior: none;
    overscroll-behavior-x: none;
    margin: 0;
    padding: 0;
}

/* Only target the scroll container, not html/body */
.scroll-container {
    overscroll-behavior: contain;
    overscroll-behavior-x: none;
    overscroll-behavior-y: none;
}

/* Text selection - all browsers and devices */
*::selection {
    background-color: #32b550 !important;
    color: white !important;
}

*::-moz-selection {
    background-color: #32b550 !important;
    color: white !important;
}

*::-webkit-selection {
    background-color: #32b550 !important;
    color: white !important;
}

/* White selection on green background slides - all devices */
#home *::selection,
#choice *::selection,
#values *::selection {
    background-color: white !important;
    color: #32b550 !important;
}

#home *::-moz-selection,
#choice *::-moz-selection,
#values *::-moz-selection {
    background-color: white !important;
    color: #32b550 !important;
}

#home *::-webkit-selection,
#choice *::-webkit-selection,
#values *::-webkit-selection {
    background-color: white !important;
    color: #32b550 !important;
}

/* Additional mobile-specific targeting */
@media (max-width: 767px) {
    body *::selection {
        background: #32b550 !important;
        color: white !important;
    }
    
    body *::-webkit-selection {
        background: #32b550 !important;
        color: white !important;
    }
}
/* Disable custom cursor on mobile/touch devices */
@media (max-width: 767px), (hover: none) {
    body {
        cursor: auto !important;
    }
    
    a, button, .clickable, [data-cursor="pointer"] {
        cursor: auto !important;
    }
    
    .custom-cursor {
        display: none !important;
    }
}

/* Re-enable normal cursors for touch devices */
@media (hover: none) and (pointer: coarse) {
    body, a, button, .clickable, [data-cursor="pointer"] {
        cursor: auto !important;
    }
}

* Green lobster - use CSS mask for exact color */
.custom-cursor.lobster-green {
    background-image: none;
}

.custom-cursor.lobster-green::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #32b550;
    mask: url('https://cdn.prod.website-files.com/67f68e2e70bcb6b026fb5829/6848235c72d6106a5f898c68_LTR25_Icons_Final__Lobster2.png') center/55px auto no-repeat;
    -webkit-mask: url('https://cdn.prod.website-files.com/67f68e2e70bcb6b026fb5829/6848235c72d6106a5f898c68_LTR25_Icons_Final__Lobster2.png') center/55px auto no-repeat;
}

/* Black lobster - use CSS mask for exact color */
.custom-cursor.lobster-black {
    background-image: none;
}

.custom-cursor.lobster-black::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #000000;
    mask: url('https://cdn.prod.website-files.com/67f68e2e70bcb6b026fb5829/6848235c72d6106a5f898c68_LTR25_Icons_Final__Lobster2.png') center/55px auto no-repeat;
    -webkit-mask: url('https://cdn.prod.website-files.com/67f68e2e70bcb6b026fb5829/6848235c72d6106a5f898c68_LTR25_Icons_Final__Lobster2.png') center/55px auto no-repeat;
}

/* Hide the default cursor */
body {
    cursor: none !important;
}

a, button, .clickable, [data-cursor="pointer"] {
    cursor: none !important;
}

/* Custom circular cursor element */
.custom-cursor {
    position: fixed;
    width: 40px;
    height: 40px;
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -50%);
    transition: background-color 0s ease, border-color 0s ease;
    will-change: transform, background-color;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid;
    background-image: url('https://cdn.prod.website-files.com/67f68e2e70bcb6b026fb5829/6848235c72d6106a5f898c68_LTR25_Icons_Final__Lobster2.png');
    background-size: 55px auto;
    background-repeat: no-repeat;
    background-position: center;
}

/* Light backgrounds (green/white) - use black circle */
.custom-cursor.light {
    background-color: black;
    border-color: black;
}

/* Dark backgrounds (black) - use green circle */
.custom-cursor.dark {
    background-color: #32b550;
    border-color: #32b550;
}

  html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow-x: hidden;
  }

  body {
    position: relative;
    transform: none !important;
  }

  .scroll-container {
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    position: relative;
  }

  .wrapper {
    display: flex;
    flex-direction: row;
    height: 100vh;
    width: 100vw;
  }

  .slide {
    width: 100vw;
    height: 100vh;
    flex-shrink: 0;
  }

  /* Nav visibility defaults */
  #nav-white,
  #nav-green,
  #nav-black {
    display: none !important;
  }

  .show-nav {
    display: flex !important;
  }
   :root {
  --expand-transition: 0.4s ease;
  --expand-padding: 1rem;
  --expand-max-width: 60ch;
  --expand-focus-color: #007acc;
}

/* Update your existing expand-content class */
.expand-content {
  display: none !important;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height var(--expand-transition), 
              opacity var(--expand-transition),
              padding-top var(--expand-transition);
  max-width: var(--expand-max-width);
  line-height: 1.5;
  padding-top: 0;
}

.expand-content.expanded {
  display: block !important;
  max-height: 500px !important;
  opacity: 1 !important;
  padding-top: var(--expand-padding) !important;
}

/* Update your existing expand-trigger class */
.expand-trigger {
 cursor: none !important;
  user-select: none;
  font-size: 1rem;
  margin-left: var(--expand-padding);
  transition: color var(--expand-transition);
  background: none;
  border: none;
  color: inherit;
  padding: 0.75rem; /* Increased from 0.5rem for mobile */
  border-radius: 4px;
  min-height: 44px; /* iOS minimum touch target */
  min-width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Mobile-specific adjustments */
@media screen and (max-width: 767px) {
  .expand-trigger {
    padding: 1rem;
    font-size: 1.2rem;
  }
  
  .expand-content {
    max-width: 90vw;
    font-size: 0.9rem;
  }
  
  .expand-content.expanded {
    padding-top: 1.5rem !important;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
}
.expand-trigger:hover {
  color: #ccc;
  background: rgba(255, 255, 255, 0.1);
}

.expand-trigger:focus {
  outline: 2px solid var(--expand-focus-color);
  outline-offset: 2px;
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  .expand-trigger,
  .expand-content {
    transition: none;
  }
}

/* Screen reader only class */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

  /* --- Fix for mobile scroll lock --- */
  html {
    overflow-x: visible !important;
    overflow-y: visible !important;
  }

  /* --- Nav bar theme background + text color --- */
  .nav-bar {
    transition: background-color 0.6s ease-in-out, color 0.6s ease-in-out;
    will-change: background-color, color;
  }

  .nav-bar.nav-white {
    background-color: white;
    color: black;
  }

  .nav-bar.nav-green {
    background-color: #32b550;
    color: white;
  }

  .nav-bar.nav-black {
    background-color: black;
    color: white;
  }

  @media (prefers-reduced-motion: reduce) {
    .nav-bar {
      transition: none !important;
    }
  }

  /* --- Text links inheriting nav-bar color --- */
  .nav-text-rotated-1,
  .nav-text-rotated-2,
  .nav-text-rotated-3,
  .nav-instagram-link {
    color: currentColor !important;
  }

  /* --- Menu icon image style (PNG-based) --- */
  .nav-burger-icon-black img {
    width: 40px;
    height: auto;
    display: block;
  }

  .nav-burger-icon-black {
    display: flex;
    align-items: center;
  }

  /* --- Logo image switching logic (PNG-based) --- */
  .nav-lbstr-logo {
    width: 120px;
    height: auto;
    display: block;
    object-fit: contain;
  }

  .nav-bar.nav-white .nav-lbstr-logo {
    content: url('https://cdn.prod.website-files.com/67f68e2e70bcb6b026fb5829/67f8dcf067144fc2254b710e_black_lbstr_logo.png');
  }

  .nav-bar.nav-green .nav-lbstr-logo,
  .nav-bar.nav-black .nav-lbstr-logo {
    content: url('https://cdn.prod.website-files.com/67f68e2e70bcb6b026fb5829/67f8dcf063d3844144a2565e_white_lbstr_logo.png');
  }

  /* --- Mobile-only: fix scroll lock & layout --- */
  @media screen and (max-width: 767px) {
    .wrapper {
      width: 100% !important;
      display: block !important;
      overflow: visible !important;
    }

    .slide {
      width: 100vw !important;
      height: auto !important;
      display: block !important;
      overflow: visible !important;
    }

    .scroll-container {
      min-height: 100vh !important;
      height: auto !important;
      overflow-y: auto !important;
    }
    .nav-bar {
    height: 60px !important;
  }
}

/* DESKTOP STYLES - COMPLETELY UNTOUCHED */
.brand.service-active,
.creative.service-active,
.imc.service-active,
.solve4.service-active,
.scriptwriting.service-active,
.film-conceptualisation.service-active,
.directing.service-active {
    color: #32b550 !important;
    border-bottom: 1px solid #32b550 !important;
}

.brand, .creative, .imc, .solve4, .scriptwriting, .film-conceptualisation, .directing {
    transition: color 0.3s ease, border-bottom 0.3s ease;
}

[data-service-active="true"] {
    color: #32b550 !important;
    border-bottom: 1px solid #32b550 !important;
}

.brand:hover, .creative:hover, .imc:hover, .solve4:hover,
.scriptwriting:hover, .film-conceptualisation:hover, .directing:hover {
    opacity: 0.8;
}

.showing-service-description {
    color: white !important;
    transition: opacity 0.4s ease-in-out !important;
}

.capabilities, .services {
    transition: opacity 0.4s ease-in-out;
}

.showing-service-description * {
    color: white !important;
}

.showing-service-description span[style*="color: #32b550"] {
    color: #32b550 !important;
}

/* =========================================
   CONSISTENT MOBILE MODAL STYLES
   ========================================= */

/* SLIDE 21 SERVICES MODAL */
@media (max-width: 767px) {
    .services-modal-overlay {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        background: rgba(0, 0, 0, 0.8) !important;
        z-index: 10000 !important;
        display: none !important;
        flex-direction: column !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        overflow-y: auto !important;
        opacity: 0;
        transition: opacity 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .services-modal-overlay.modal-active {
        display: flex !important;
        opacity: 1 !important;
    }

    .services-modal-content {
        background: #000000 !important;
        border-radius: 0 !important;
        max-width: 100vw !important;
        max-height: 100vh !important;
        width: 100vw !important;
        height: 100vh !important;
        border: none !important;
        box-shadow: none !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        transform: none !important;
        transition: none !important;
    }

    .services-modal-header {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        background: #32b550 !important;
        padding: 1.5rem !important;
        height: 60px !important;
        box-sizing: border-box !important;
        flex-shrink: 0 !important;
        margin-bottom: 0 !important;
        border-bottom: none !important;
    }

    .services-modal-title {
        color: white !important;
        font-size: 25px !important;
        font-weight: normal !important;
        margin: 0 !important;
        font-family: 'Instrument Serif', serif !important;
        text-transform: none !important;
        letter-spacing: -1px !important;
    }

    /* CONSISTENT CLOSE BUTTON - LARGER SIZE */
    .services-modal-close {
        background: transparent !important;
        border: none !important;
        color: white !important;
        font-size: 2.5rem !important;
        font-weight: normal !important;
        cursor: pointer !important;
        padding: 0 !important;
        width: 50px !important;
        height: 50px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 0 !important;
        line-height: 1 !important;
        transition: all 0.3s ease !important;
        transform: rotate(0deg) !important;
    }

    .services-modal-close:hover {
        background: rgba(255, 255, 255, 0.1) !important;
        border-radius: 4px !important;
        transform: scale(1.05) !important;
    }

    .services-modal-close:active {
        transform: scale(1.05) rotate(90deg) !important;
    }

    /* CONSISTENT BODY STYLING */
    .services-modal-body {
        padding: 1.5rem !important;
        background: #000000 !important;
        flex: 1 !important;
        overflow-y: auto !important;
        max-height: calc(100vh - 60px) !important;
        color: #FFFFFF !important;
        font-family: 'Selecta', sans-serif !important;
        font-size: 18px !important;
        line-height: 22px !important;
        font-weight: normal !important;
        letter-spacing: 0 !important;
    }

    .services-modal-body * {
        color: #FFFFFF !important;
        font-family: 'Selecta', sans-serif !important;
        font-size: 18px !important;
        line-height: 22px !important;
        font-weight: normal !important;
        letter-spacing: 0 !important;
        margin-bottom: 0.75rem !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }

    .services-modal-body span[style*="color: #32b550"] {
        color: #32b550 !important; /* Keep green numbers */
    }

    /* Service text fixes */
    .services-modal-body .brand, 
    .services-modal-body .creative, 
    .services-modal-body .imc, 
    .services-modal-body .scriptwriting, 
    .services-modal-body .film-conceptualisation, 
    .services-modal-body .directing {
        font-size: 18px !important;
        line-height: 22px !important;
        font-weight: normal !important;
        transform: none !important;
        transition: none !important;
    }
}

/* SLIDE 11 VALUES MODAL (Disciplined, etc.) */
@media (max-width: 767px) {
    .mobile-modal-overlay {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        background: rgba(0, 0, 0, 0.8) !important;
        z-index: 10000 !important;
        display: flex !important;
        flex-direction: column !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        overflow-y: auto !important;
        opacity: 0;
        transition: opacity 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .mobile-modal-overlay.modal-active {
        opacity: 1 !important;
    }

    /* Header section */
    .mobile-modal-overlay > div:first-child {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        background: #32b550 !important;
        padding: 1.5rem !important;
        height: 60px !important;
        box-sizing: border-box !important;
        flex-shrink: 0 !important;
        margin-bottom: 0 !important;
    }

    .mobile-modal-overlay h2 {
        color: white !important;
        font-size: 25px !important;
        font-weight: normal !important;
        margin: 0 !important;
        font-family: 'Instrument Serif', serif !important;
        text-transform: none !important;
        letter-spacing: -1px !important;
    }

    /* CONSISTENT CLOSE BUTTON - LARGER SIZE */
    .mobile-modal-close {
        background: transparent !important;
        border: none !important;
        color: white !important;
        font-size: 2.5rem !important;
        font-weight: normal !important;
        cursor: pointer !important;
        padding: 0 !important;
        width: 50px !important;
        height: 50px !important;
        min-width: 50px !important;
        min-height: 50px !important;
        max-width: 50px !important;
        max-height: 50px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 0 !important;
        line-height: 1 !important;
        transition: all 0.3s ease !important;
        transform: rotate(0deg) !important;
        flex-shrink: 0 !important;
    }

    .mobile-modal-close:hover {
        background: rgba(255, 255, 255, 0.1) !important;
        border-radius: 4px !important;
        transform: scale(1.05) !important;
    }

    .mobile-modal-close:active {
        transform: scale(1.05) rotate(90deg) !important;
    }

    /* CONSISTENT BODY STYLING */
    .mobile-modal-overlay > div:last-child {
        padding: 1.5rem !important;
        color: #FFFFFF !important;
        font-family: 'Selecta', sans-serif !important;
        font-size: 18px !important;
        line-height: 22px !important;
        font-weight: normal !important;
        letter-spacing: 0 !important;
        max-height: calc(100vh - 60px) !important;
        overflow-y: auto !important;
        background: #000000 !important;
        flex: 1 !important;
    }

    .mobile-modal-overlay > div:last-child * {
        color: #FFFFFF !important;
        font-family: 'Selecta', sans-serif !important;
        font-size: 18px !important;
        line-height: 22px !important;
        font-weight: normal !important;
        letter-spacing: 0 !important;
        margin-bottom: 0.75rem !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }
}

/* SLIDE 14 MODAL (Biography, Brands, Recognition) */
@media (max-width: 767px) {
    .slide14-modal-overlay {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        background: rgba(0, 0, 0, 0.8) !important;
        z-index: 10000 !important;
        display: none !important;
        flex-direction: column !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        overflow-y: auto !important;
        opacity: 0;
        transition: opacity 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .slide14-modal-overlay.modal-active {
       display: flex !important;
       opacity: 1 !important;
    }

    .slide14-modal-content {
        background: #000000 !important;
        border-radius: 0 !important;
        max-width: 100vw !important;
        max-height: 100vh !important;
        width: 100vw !important;
        height: 100vh !important;
        border: none !important;
        box-shadow: none !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        opacity: 0 !important;
        transform: scale(0.95) !important;
        transition: opacity 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                    transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    }

    .modal-active .slide14-modal-content {
        opacity: 1 !important;
        transform: scale(1) !important;
    }

    .slide14-modal-header {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        background: #32b550 !important;
        padding: 1.5rem !important;
        height: 60px !important;
        box-sizing: border-box !important;
        flex-shrink: 0 !important;
        margin-bottom: 0 !important;
    }

    .slide14-modal-title {
        color: white !important;
        font-size: 25px !important;
        font-weight: normal !important;
        margin: 0 !important;
        font-family: 'Instrument Serif', serif !important;
        text-transform: none !important;
        letter-spacing: -1px !important;
    }

    /* CONSISTENT CLOSE BUTTON - LARGER SIZE */
    .slide14-modal-close {
        background: transparent !important;
        border: none !important;
        color: white !important;
        font-size: 2.5rem !important;
        font-weight: normal !important;
        cursor: pointer !important;
        padding: 0 !important;
        width: 50px !important;
        height: 50px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 0 !important;
        line-height: 1 !important;
        transition: all 0.3s ease !important;
        transform: rotate(0deg) !important;
    }

    .slide14-modal-close:hover {
        background: rgba(255, 255, 255, 0.1) !important;
        border-radius: 4px !important;
        transform: scale(1.05) !important;
    }

    .slide14-modal-close:active {
        transform: scale(1.05) rotate(90deg) !important;
    }

    /* CONSISTENT BODY STYLING */
    .slide14-modal-body {
        padding: 1.5rem !important;
        background: #000000 !important;
        flex: 1 !important;
        overflow-y: auto !important;
        max-height: calc(100vh - 60px) !important;
        color: #FFFFFF !important;
        font-family: 'Selecta', sans-serif !important;
        font-size: 18px !important;
        line-height: 22px !important;
        font-weight: normal !important;
        letter-spacing: 0 !important;
    }

    .slide14-modal-body * {
        color: #FFFFFF !important;
        font-family: 'Selecta', sans-serif !important;
        font-size: 18px !important;
        line-height: 22px !important;
        font-weight: normal !important;
        letter-spacing: 0 !important;
        margin-bottom: 0.75rem !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }
}

/* SLIDE 18 MODAL (Ekta Bio) */
@media (max-width: 767px) {
    .slide18-modal-overlay {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        background: rgba(0, 0, 0, 0.8) !important;
        z-index: 10000 !important;
        display: none !important;
        flex-direction: column !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        overflow-y: auto !important;
        opacity: 0;
        transition: opacity 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .slide18-modal-overlay.modal-active {
       display: flex !important;
       opacity: 1 !important;
    }

    .slide18-modal-content {
        background: #000000 !important;
        border-radius: 0 !important;
        max-width: 100vw !important;
        max-height: 100vh !important;
        width: 100vw !important;
        height: 100vh !important;
        border: none !important;
        box-shadow: none !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .slide18-modal-header {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        background: #32b550 !important;
        padding: 1.5rem !important;
        height: 60px !important;
        box-sizing: border-box !important;
        flex-shrink: 0 !important;
        margin-bottom: 0 !important;
    }

    .slide18-modal-title {
        color: white !important;
        font-size: 25px !important;
        font-weight: normal !important;
        margin: 0 !important;
        font-family: 'Instrument Serif', serif !important;
        text-transform: none !important;
        letter-spacing: -1px !important;
    }

    /* CONSISTENT CLOSE BUTTON - LARGER SIZE */
    .slide18-modal-close {
        background: transparent !important;
        border: none !important;
        color: white !important;
        font-size: 2.5rem !important;
        font-weight: normal !important;
        cursor: pointer !important;
        padding: 0 !important;
        width: 50px !important;
        height: 50px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 0 !important;
        line-height: 1 !important;
        transition: all 0.3s ease !important;
        transform: rotate(0deg) !important;
    }

    .slide18-modal-close:hover {
        background: rgba(255, 255, 255, 0.1) !important;
        border-radius: 4px !important;
        transform: scale(1.05) !important;
    }

    .slide18-modal-close:active {
        transform: scale(1.05) rotate(90deg) !important;
    }

    /* CONSISTENT BODY STYLING */
    .slide18-modal-body {
        padding: 1.5rem !important;
        background: #000000 !important;
        flex: 1 !important;
        overflow-y: auto !important;
        max-height: calc(100vh - 60px) !important;
        color: #FFFFFF !important;
        font-family: 'Selecta', sans-serif !important;
        font-size: 18px !important;
        line-height: 22px !important;
        font-weight: normal !important;
        letter-spacing: 0 !important;
    }

    .slide18-modal-body * {
        color: #FFFFFF !important;
        font-family: 'Selecta', sans-serif !important;
        font-size: 18px !important;
        line-height: 22px !important;
        font-weight: normal !important;
        letter-spacing: 0 !important;
        margin-bottom: 0.75rem !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }

    /* Keep links green in slide 18 */
    .slide18-modal-body a,
    .slide18-modal-body .link-2,
    .slide18-modal-body .link-3 {
        color: #32b550 !important;
    }

    .slide18-modal-body * a {
        color: #32b550 !important;
    }
}

/* DESKTOP BRACKET FIX - Keep this unchanged */
@media (min-width: 768px) {
    .expand-trigger {
        white-space: nowrap !important;
        display: inline-block !important;
        min-width: auto !important;
        width: auto !important;
    }
    
    #expand-trigger-1,
    #expand-trigger-2, 
    #expand-trigger-3 {
        white-space: nowrap !important;
        overflow: visible !important;
        text-overflow: clip !important;
        display: inline-block !important;
        width: auto !important;
        min-width: 50px !important;
    }
}

/* =====================================
     From second migration into Github
     ===================================== */

@media screen and (max-width: 767px) {
  
  /* =====================================
     CRITICAL: Stop desktop horizontal scrolling on mobile
     ===================================== */
  .wrapper {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    display: block !important;
    transform: none !important;
    overflow: visible !important;
  }
  
  .slide {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    min-height: 100vh !important;
    display: block !important;
    flex-shrink: initial !important;
    transform: none !important;
  }
  
  /* =====================================
     CRITICAL: Hide desktop menu on mobile
     ===================================== */
  .nav-menu-desktop {
    display: none !important;
    pointer-events: none !important;
    visibility: hidden !important;
  }
  
  /* =====================================
     DISABLE GSAP/ScrollTrigger on mobile
     ===================================== */
  [data-aos], [data-scroll] {
    transform: none !important;
  }
  
  .smooth-wrapper,
  .smooth-content,
  .scroll-container {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    transform: none !important;
    overflow: visible !important;
  }
  
  /* =====================================
     HAMBURGER TO X (if needed)
     ===================================== */
  .nav-burger-icon-black.menu-open img {
    opacity: 0;
  }
  
  .nav-burger-icon-black::after {
    content: '✕';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2rem;
    color: currentColor;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }
  
  .nav-burger-icon-black.menu-open::after {
    opacity: 1;
    pointer-events: auto;
  }
}

/* Desktop - hide mobile menu */
@media screen and (min-width: 768px) {
  .nav-menu-mobile {
    display: none !important;
  }
}
/* Add this to your existing mobile CSS to fix width overflow */

@media screen and (max-width: 767px) {
  
  /* CRITICAL: Fix body and html width overflow */
  html, body {
    width: 100vw !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    position: relative !important;
  }
  
  /* CRITICAL: Ensure all slides stay within viewport */
  .slide {
    position: static !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: auto !important;
    min-height: 100vh !important;
    display: block !important;
    flex-shrink: initial !important;
    transform: none !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }
  
  /* CRITICAL: Force wrapper to behave like normal mobile layout */
  .wrapper {
    position: static !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: auto !important;
    display: block !important;
    transform: none !important;
    overflow: visible !important;
    left: 0 !important;
    top: 0 !important;
  }
  
  /* CRITICAL: Disable any GSAP transforms that cause horizontal movement */
  .wrapper[style*="transform"] {
    transform: none !important;
  }
  
  /* CRITICAL: Container constraints */
  .scroll-container,
  .smooth-wrapper,
  .smooth-content {
    position: static !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: auto !important;
    transform: none !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
  }
}

/* Add this to your mobile CSS to fix menu styling */

@media screen and (max-width: 767px) {
  
  /* Force your Webflow design to show through */
  .nav-menu-mobile {
    /* Remove any conflicting positioning */
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: #32b550 !important;
    
    /* Ensure proper layout */
    display: none !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    padding: 4rem 2rem 2rem 2rem !important;
    z-index: 10000 !important;
  }
  
  .nav-menu-mobile.active {
    display: flex !important;
  }
  
  /* Fix menu item alignment - LEFT aligned like your design */
  .nav-menu-mobile [class*="menu-mob"] {
    text-align: left !important;
    width: 100% !important;
    font-size: 48px !important;
    line-height: 1.1 !important;
    margin-bottom: 1rem !important;
    color: black !important;
  }
  
  /* Social handles at bottom */
  .nav-menu-mobile .social-handles-mob {
    position: absolute !important;
    bottom: 2rem !important;
    left: 2rem !important;
    right: 2rem !important;
  }
}
<!-- Mobile Menu Styling -->
@media screen and (max-width: 767px) {
    /* Mobile menu full-screen design */
    .nav-menu-mobile {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        background: #32b550 !important;
        z-index: 9999 !important;
        display: none !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
        padding: 0 !important;
        overflow: hidden !important;
    }
    
    .nav-menu-mobile.active {
        display: flex !important;
    }
    
    /* Large menu typography */
    .nav-menu-mobile .the-lbstr-menu-mob,
    .nav-menu-mobile .strategy-menu-mob,
    .nav-menu-mobile .story-menu-mob,
    .nav-menu-mobile .services-menu-mob,
    .nav-menu-mobile .contact-menu-mob {
        display: block !important;
        margin: 0.5rem 0 !important;
    }
    
    .nav-menu-mobile .the-lbstr-menu-mob a,
    .nav-menu-mobile .strategy-menu-mob a,
    .nav-menu-mobile .story-menu-mob a,
    .nav-menu-mobile .services-menu-mob a,
    .nav-menu-mobile .contact-menu-mob a,
    .nav-menu-mobile .the-lbstr-menu-mob [class*="link"],
    .nav-menu-mobile .strategy-menu-mob [class*="link"],
    .nav-menu-mobile .story-menu-mob [class*="link"],
    .nav-menu-mobile .services-menu-mob [class*="link"],
    .nav-menu-mobile .contact-menu-mob [class*="link"],
    .nav-menu-mobile .the-lbstr-menu-mob,
    .nav-menu-mobile .strategy-menu-mob,
    .nav-menu-mobile .story-menu-mob,
    .nav-menu-mobile .services-menu-mob,
    .nav-menu-mobile .contact-menu-mob {
        display: block !important;
        color: black !important;
        text-decoration: none !important;
        font-size: 3rem !important;
        font-weight: normal !important;
        line-height: 1.1 !important;
        padding: 0.2rem 0 !important;
        text-align: center !important;
        transition: opacity 0.2s ease !important;
        cursor: pointer !important;
    }
    
    .nav-menu-mobile a:active,
    .nav-menu-mobile [class*="link"]:active,
    .nav-menu-mobile .the-lbstr-menu-mob:active,
    .nav-menu-mobile .strategy-menu-mob:active,
    .nav-menu-mobile .story-menu-mob:active,
    .nav-menu-mobile .services-menu-mob:active,
    .nav-menu-mobile .contact-menu-mob:active {
        opacity: 0.6 !important;
    }
    
    /* Social handles at bottom */
    .nav-menu-mobile .social-handles-mob {
        position: absolute !important;
        bottom: 2rem !important;
        left: 0 !important;
        right: 0 !important;
        display: flex !important;
        justify-content: space-around !important;
        align-items: center !important;
        padding: 0 2rem !important;
    }
    
    .nav-menu-mobile .social-handles-mob * {
        color: black !important;
        font-size: 1rem !important;
    }
    
    /* Hamburger to X transformation */
    .nav-burger-icon-black.menu-open img {
        opacity: 0 !important;
    }
    
    .nav-burger-icon-black::after {
        content: '' !important;
        opacity: 0 !important;
    }
    
    .nav-burger-icon-black.menu-open::after {
        content: '✕' !important;
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        font-size: 2rem !important;
        color: white !important;
        opacity: 1 !important;
        z-index: 10001 !important;
    }
    
    /* Lock body scroll when menu open */
    body.menu-open {
        overflow: hidden !important;
        position: fixed !important;
        width: 100vw !important;
        height: 100vh !important;
    }
}

/* Desktop - ensure mobile menu is hidden */
@media screen and (min-width: 768px) {
    .nav-menu-mobile {
        display: none !important;
    }
}

/* Fix for slide 18 mobile modal - keep links green */
@media (max-width: 767px) {
    .slide18-modal-body a,
    .slide18-modal-body .link-2,
    .slide18-modal-body .link-3 {
        color: #32b550 !important;
    }
    
    /* Ensure links stay green even when inheriting white color */
    .slide18-modal-body * a {
        color: #32b550 !important;
    }
}

/* Force consistent mobile nav spacing */
@media (max-width: 767px) {
    .nav-bar .nav-lbstr-logo {
        margin-left: 1.5rem !important;
        margin-right: 0 !important;
    }
    
    .nav-bar .nav-burger-icon-black {
        margin-right: 1.5rem !important;
        margin-left: 0 !important;
    }
    
    /* Ensure it applies to all nav themes */
    .nav-bar.nav-green .nav-lbstr-logo,
    .nav-bar.nav-black .nav-lbstr-logo,
    .nav-bar.nav-white .nav-lbstr-logo {
        margin-left: 1.5rem !important;
        margin-right: 0 !important;
    }
    
    .nav-bar.nav-green .nav-burger-icon-black,
    .nav-bar.nav-black .nav-burger-icon-black,
    .nav-bar.nav-white .nav-burger-icon-black {
        margin-right: 1.5rem !important;
        margin-left: 0 !important;
    }
    
    /* Also ensure proper flex positioning */
    .nav-bar {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 0 !important; /* Remove any conflicting padding */
    }
}

/* Floating Lobsters CSS - Add this to your styles.css */

.floating-lobster {
    position: absolute;
    pointer-events: auto;
    cursor: pointer;
    z-index: 100;
    opacity: 0.8;
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform, opacity;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    /* Make lobsters white using CSS filter */
    filter: brightness(0) invert(1);
}

.floating-lobster img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
}

/* Home page logo hover effect - white logo on hover */
#home .hero-logo-lockup-desktop:hover {
    filter: brightness(0) invert(1) !important;
    transition: filter 0.3s ease !important;
}

.floating-lobster:hover {
    opacity: 1;
    transform: scale(1.05);
}

.floating-lobster:active {
    transform: scale(0.95);
}

/* Hide on mobile */
@media (max-width: 767px) {
    .floating-lobster {
        display: none !important;
    }
}

/* Global FOUC Prevention for Animated Slides - Add to styles.css */

/* Hide elements initially to prevent flash before animations */
@media (min-width: 768px) {
    /* Slide 2 - The Beginning */
    #the-beginning .date-column,
    #the-beginning .headline-block,
    #the-beginning .body-text-block-may2015 {
        opacity: 0;
    }
    
    /* Slide 4 - Screenplay */
    #screenplay .dialogue-right * {
        opacity: 0;

    }
    
    /* Slide 6 – Ekta FOUC prevention */
  #ekta #heading-3,
  #ekta .slide-6-content *,
  #ekta [class*="content"] * {
    opacity: 0;
  }
  
  /* Slide 7 – Stranger: hide all dialogue lines + the note */
  #stranger .slide-7-dialogue > * ,
  #stranger .slide-7-note {
    opacity: 0;
    transform: translateY(20px);
  }
  
  /* Slide 9 – FOUC prevention */
  #partners .slide-9-hero-image {
    opacity: 0;
    transform: translateX(-100px);
  }
  #partners .slide-9-date-column,
  #partners .slide-9-text {
    opacity: 0;
  }
  
  /* Slide 10 – FOUC prevention */
  #the-lbstr .slide-10-credits-ekta,
  #the-lbstr .slide-10-credits-robert,
  #the-lbstr .slide-10-copy {
    opacity: 0;
}
  
   /* Slide 13 – FOUC prevention */
  #strategy .slide-13-headline,
  #strategy .slide-13-note,
  #strategy .slide-13-bodycopy {
    opacity: 0;
    
}

 /* Slide 15 – FOUC prevention */
  #problem-solving .slide-15-headline, 
  #problem-solving #challenge-1,
  #problem-solving #challenge-2,
  #problem-solving #challenge-3,
  #problem-solving #challenge-4,
  #problem-solving #challenge-5,
  #problem-solving #challenge-6,
  #problem-solving #challenge-7,
  #problem-solving #challenge-8,
  #problem-solving #challenge-9,
  #problem-solving #challenge-10,
  #problem-solving #challenge-11,
  #problem-solving #challenge-12,
  #problem-solving #challenge-13,
  #problem-solving #challenge-14,
  #problem-solving #challenge-note {
    opacity: 0;
    
}

/* Slide 16 – FOUC prevention */
#storytelling #story-heading-1,
#storytelling #story-heading-2,
#storytelling .slide-16-note {
  opacity: 0;

}

/* Slide 17 – FOUC prevention */
#ideas .slide-17-copy,
#ideas .slide-17-note {
  opacity: 0;
}

/* Slide 18 – FOUC prevention */
#the-storyteller .slide-18-copy {
  opacity: 0;
}

/* Mobile - show everything normally (no animations) */
@media (max-width: 767px) {
    #the-beginning .date-column,
    #the-beginning .headline-block,
    #the-beginning .body-text-block-may2015,
    #screenplay .dialogue-right *,
    #ekta #heading-3,
    #ekta .slide-6-content,
    #ekta .slide-6-content *,
    #ekta [class*="content"] * {
        opacity: 1 !important;
    }
}

/* Safari Logo Fix - Add this to your styles.css */

.nav-lbstr-logo {
    width: 120px !important;
    height: auto !important;
    display: block !important;
    object-fit: contain !important;
    /* Safari-specific fixes */
    min-width: 120px !important;
    max-width: 120px !important;
    /* Add padding to the right */
    padding-right: 2vw !important;
    /* Force proper dimensions */
    box-sizing: border-box !important;
}

/* Safari-specific targeting */
@supports (-webkit-appearance: none) {
    .nav-lbstr-logo {
        /* Force exact dimensions in Safari */
        width: 120px !important;
        height: 40px !important; /* Set explicit height for Safari */
        object-fit: contain !important;
        object-position: left center !important;
        padding-right: 2vw !important;
    }
}

/* Additional Safari WebKit fix */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    .nav-lbstr-logo {
        width: 120px !important;
        height: 40px !important;
        vertical-align: middle !important;
        padding-right: 2vw !important;
    }
}

/* Ensure nav bar container properly aligns logo */
.nav-bar {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 0 !important;
}

/* Mobile fixes to maintain your existing mobile styling */
@media (max-width: 767px) {
    .nav-bar .nav-lbstr-logo {
        margin-left: 1.5rem !important;
        margin-right: 0 !important;
        width: 120px !important;
        height: auto !important;
        padding-right: 0 !important; /* Remove padding on mobile */
    }
    
    .nav-bar.nav-green .nav-lbstr-logo,
    .nav-bar.nav-black .nav-lbstr-logo,
    .nav-bar.nav-white .nav-lbstr-logo {
        margin-left: 1.5rem !important;
        margin-right: 0 !important;
        padding-right: 0 !important; /* Remove padding on mobile */
    }
}   

/* Fix Social Links Spacing Difference Between Safari and Chrome */

/* Target the social handles container in desktop menu */
.nav-menu-desktop .social-handles,
.social-handles {
    /* Force consistent layout */
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-end !important;
    align-items: flex-end !important; /* Changed to bottom align with Contact */
    gap: 0.5rem !important; /* Reduced from 2rem to 1.5rem */
    white-space: nowrap !important; /* Prevent wrapping */
    
    /* Ensure container doesn't shrink */
    flex-shrink: 0 !important;
    min-width: 200px !important; /* Give enough space for both links */
    
    /* Move down MORE to align with Contact bottom - increased from -1vh */
    margin-top: 2vh !important;
    position: relative !important;
    top: 2vh !important;
}

/* Target individual social links */
.nav-menu-desktop .social-handles a,
.social-handles a,
.nav-menu-desktop [class*="link"],
.social-handles [class*="link"] {
    /* Normalize text rendering */
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    
    /* Updated typography specifications */
    font-size: 18px !important;
    font-family: 'Selecta', sans-serif !important;
    font-weight: 500 !important; /* Selecta Medium */
    letter-spacing: 0.05em !important;
    word-spacing: normal !important;
    
    /* Remove any margins that might differ between browsers */
    margin: 0 !important;
    padding: 0 !important;
}

/* Safari-specific targeting to match Chrome behavior */
@supports (-webkit-appearance: none) {
    .nav-menu-desktop .social-handles,
    .social-handles {
        gap: 0.5rem !important;
        justify-content: flex-end !important;
        flex-wrap: nowrap !important;
        align-items: flex-end !important;
        margin-top: 2vh !important;
        position: relative !important;
        top: 2vh !important;
    }
}

/* Chrome-specific targeting (if needed) */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    .nav-menu-desktop .social-handles,
    .social-handles {
        gap: 0.5rem !important;
        justify-content: flex-end !important;
        align-items: flex-end !important;
        margin-top: 2vh !important;
        position: relative !important;
        top: 2vh !important;
    }
}

/* Ensure parent container gives enough space */
.nav-menu-desktop {
    /* Make sure the desktop menu has enough width for social links */
    min-width: 300px !important;
}

/* If the social handles are text-based (not actual links) */
.nav-menu-desktop .social-handles,
.social-handles {
    font-size: inherit !important;
    line-height: 1 !important;
    
    /* Prevent text from breaking differently in browsers */
    word-break: keep-all !important;
    overflow-wrap: normal !important;
}