/* ============================================
   BoxingBots Custom Styles
   ============================================ */

/* Fixed background logo - centered and blurred */
.fixed-bg-logo {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
  pointer-events: none;
  width: 1000px;
  height: 750px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fixed-bg-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: blur(0px);
  opacity: 0.15;
}

/* Textured glass overlay */
.glass-texture-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    /* Fine noise texture pattern */
    repeating-linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.02) 0px,
      transparent 0.5px,
      transparent 1px,
      rgba(255, 255, 255, 0.02) 1.5px,
      transparent 2px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.02) 0px,
      transparent 0.5px,
      transparent 1px,
      rgba(255, 255, 255, 0.02) 1.5px,
      transparent 2px
    ),
    repeating-linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.015) 0px,
      transparent 1px,
      transparent 2px
    ),
    /* Subtle radial gradient for depth */
    radial-gradient(
      circle at 30% 30%,
      rgba(255, 255, 255, 0.08) 0%,
      transparent 40%
    ),
    radial-gradient(
      circle at 70% 70%,
      rgba(255, 255, 255, 0.05) 0%,
      transparent 40%
    );
  backdrop-filter: blur(0.5px) saturate(1.3) brightness(1.1);
  -webkit-backdrop-filter: blur(0.5px) saturate(1.3) brightness(1.1);
  mix-blend-mode: soft-light;
  opacity: 0.5;
  pointer-events: none;
  filter: contrast(1.1);
}

/* Responsive styles for fixed background logo */
@media screen and (max-width: 991px) {
  .fixed-bg-logo {
    width: 600px;
    height: 450px;
  }
}

@media screen and (max-width: 767px) {
  .fixed-bg-logo {
    width: 400px;
    height: 300px;
  }
}

@media screen and (max-width: 479px) {
  .fixed-bg-logo {
    width: 300px;
    height: 225px;
  }
}

/* Hero Section - Make heading elements visible */
html.w-mod-js:not(.w-mod-ix) [data-w-id="ee76c64d-3da4-bfd1-1497-1360bfdda97b"],
html.w-mod-js:not(.w-mod-ix) [data-w-id="34ed42ae-0873-c795-a8de-e22592a1565a"],
html.w-mod-js:not(.w-mod-ix) [data-w-id="ff2e53fc-4260-0e6e-ce76-8ebba8a4e8b4"],
html.w-mod-js:not(.w-mod-ix) [data-w-id="38f7b72c-ca0f-7128-cd72-1541be562b82"] {
  opacity: 1 !important;
  visibility: visible !important;
  -webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0) !important;
  -moz-transform: translate3d(0, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0) !important;
  -ms-transform: translate3d(0, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0) !important;
  transform: translate3d(0, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0) !important;
}

/* Reduce image-17 size by 20% */
.image-17 {
  transform: scale(0.8) !important;
  transform-origin: center;
}

/* Reduce spacing between sections */
section.section,
section.section-2,
section.section-3,
section.section-4,
section.section-5,
section.section-6,
section.section-7,
section.section-8,
section.section-9 {
  padding-top: 50px !important;
  padding-bottom: 50px !important;
}

@media screen and (max-width: 991px) {
  section.section,
  section.section-2,
  section.section-3,
  section.section-4,
  section.section-5,
  section.section-6,
  section.section-7,
  section.section-8,
  section.section-9 {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
}

/* Hide background lines */
.linesholder,
.lines-container,
.div-block-3 {
  display: none !important;
}

/* Section background colors - alternating shades of grey and black with slight transparency to show logo */
section#home.hero {
  background-color: transparent !important;
}

section#about.section {
  background-color: rgba(178, 0, 0, 0.049) !important;
  backdrop-filter: blur(2px);
}

section#features.section-2 {
  background-color: rgba(0, 63, 135, 0.049) !important;
  backdrop-filter: blur(2px);
}

section#agents.section-4 {
  background-color: rgba(6, 6, 6, 0.049) !important;
  backdrop-filter: blur(2px);
}

section.section-5 {
  background-color: rgba(0, 63, 135, 0.049) !important;
  backdrop-filter: blur(2px);
}

section#roadmap.section-6 {
  background-color: rgba(6,6,6, 0.049) !important;
  backdrop-filter: blur(2px);
}

section#join-us.section-7 {
  background-color: rgba(0, 63, 135, 0.049) !important;
  backdrop-filter: blur(2px);
}

section.section-8 {
  background-color: rgba(6, 6, 6, 0.049) !important;
  backdrop-filter: blur(2px);
}

section.section-9 {
  background-color: rgba(0, 63, 135, 0.049) !important;
  backdrop-filter: blur(2px);
}

/* Thin silver line between sections */
section#about,
section#features,
section#agents,
section.section-5,
section#roadmap,
section#join-us,
section.section-8,
section.section-9 {
  border-top: 1px solid rgba(192, 192, 192, 0.3) !important;
}

/* Fix mobile image visibility in section 2 */
.div-block-8-copy-mobile .image-4,
.div-block-8-copy-mobile [data-w-id="42fd2320-eef2-7c7a-bc73-22f3f04baf4a"] {
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
  transform: translate3d(0, 0, 0) !important;
}

/* Fix features section responsive layout between 451px and 991px */
/* Keep desktop layout visible and properly styled in tablet range */
@media screen and (min-width: 451px) and (max-width: 991px) {
  /* Show desktop version */
  #features .div-block-8-copy {
    display: block !important;
    visibility: visible !important;
  }
  
  /* Hide mobile version */
  #features .div-block-8-copy-mobile {
    display: none !important;
  }
  
  /* Ensure quick-stack-copy layout maintains desktop structure (image left, features right) */
  #features .div-block-8-copy .quick-stack-copy {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    grid-template-rows: auto !important;
    grid-column-gap: 20px !important;
    grid-row-gap: 20px !important;
    width: 100% !important;
    max-width: 100% !important;
    align-items: start !important;
    justify-items: stretch !important;
  }
  
  /* Image on left (first column) - same as desktop */
  #features .div-block-8-copy .w-layout-cell:first-child {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 100% !important;
  }
  
  /* Feature cells on right (columns 2 and 3) - same as desktop */
  #features .div-block-8-copy .w-layout-cell.cell-3 {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 100% !important;
  }
  
  #features .div-block-8-copy .w-layout-cell.cell-4 {
    grid-column: 3 !important;
    grid-row: 1 !important;
    width: 100% !important;
  }
  
  /* Adjust image sizing for tablet */
  #features .div-block-8-copy .image-4 {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    max-width: 100% !important;
    display: block !important;
  }
  
  /* Adjust feature blocks for tablet */
  #features .div-block-8-copy .div-block-14 {
    margin-bottom: 15px !important;
    width: 100% !important;
  }
  
  /* Ensure text is readable */
  #features .div-block-8-copy .text-block-7 {
    font-size: clamp(16px, 2.5vw, 20px) !important;
  }
  
  #features .div-block-8-copy .text-block-8 {
    font-size: clamp(13px, 1.8vw, 15px) !important;
    line-height: 1.5 !important;
  }
  
  /* Adjust cell-3 and cell-4 internal grids for smaller space */
  #features .div-block-8-copy .cell-3,
  #features .div-block-8-copy .cell-4 {
    grid-column-gap: 15px !important;
    grid-row-gap: 15px !important;
  }
}

/* Switch to slider when content gets too cramped (451px - 600px) */
@media screen and (min-width: 451px) and (max-width: 600px) {
  /* Hide desktop version */
  #features .div-block-8-copy {
    display: none !important;
  }
  
  /* Show mobile slider version */
  #features .div-block-8-copy-mobile {
    display: block !important;
  }
}

/* Remove hover filter effects on builder type images (keep transform/scale) */
#agents .arch:hover {
  filter: none !important;
}

/* Navbar social media icon links - match nav-link color behavior */
/* Icons inherit color from .nav-link class, so they change with scroll animation */
.nav-link-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 8px !important;
  transition: all 0.3s ease, color 0.4s !important;
  /* Color is inherited from .nav-link class, don't override */
}

.nav-link-icon svg {
  width: 22px !important;
  height: 22px !important;
  stroke: currentColor !important;
  stroke-width: 1.5 !important;
  transition: stroke 0.4s !important;
}

.nav-link-icon:hover {
  color: var(--orange-text) !important;
  transform: translateY(-2px) !important;
  opacity: 0.8 !important;
}

/* Mobile: icons inherit white color from .nav-link on mobile */
/* No need to override, they'll inherit from parent .nav-link class */

/* Adjust nav-menu spacing for icons on desktop only */
@media screen and (min-width: 992px) {
  .nav-menu {
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
  }
}

/* Footer social media icons - match navbar styling */
.div-block-231 {
  color: white !important;
}

.div-block-231 svg {
  width: 22px !important;
  height: 22px !important;
  stroke: white !important;
  stroke-width: 1.5 !important;
  transition: all 0.3s ease !important;
}

.div-block-231:hover svg {
  transform: translateY(-2px) !important;
  opacity: 0.8 !important;
}

/* Center footer icons container vertically */
.div-block-230 {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Hide Webflow badge/label */
.w-webflow-badge {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* Add nice glow effect on hover for div-block-5 */
.div-block-5:hover {
  box-shadow: 0px 0px 0px 3px #018cfe57, 0px 0px   20px 10px rgba(1, 140, 254, 0.4), 0px 0px 40px 15px rgba(1, 140, 254, 0.2) !important;
}