/* Navigation Hover Area Fix - Minimal Approach */

/* Fix for desktop navigation only */
@media screen and (min-width: 992px) {
  
  /* Fix the navbar menu wrapper - use auto width to fit content */
  .navbar-menu-wrapper {
    width: auto !important; /* Auto width to fit content only */
    display: flex !important;
    justify-content: flex-end !important; /* Align items to the right */
    align-items: center !important;
    margin-left: auto !important; /* Push to the right */
  }
  
  /* Ensure menu links don't stretch unnecessarily */
  .navbar11_menu-links {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    height: 100% !important;
    width: auto !important; /* Natural width based on content */
    padding-right: 0 !important; /* No extra padding on the right */
  }
  
  /* Ensure the nav menu itself doesn't stretch */
  .navbar11_menu {
    width: auto !important;
    flex-grow: 0 !important;
  }
  
  /* Ensure dropdowns maintain proper height */
  .navbar11_menu-dropdown {
    height: 100%;
    position: relative;
  }
  
  /* Fix dropdown toggle hover area without breaking layout */
  .navbar11_dropdown-toggle {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    padding: 0 20px; /* Consistent padding */
  }
  
  /* Create invisible click area overlay */
  .navbar11_dropdown-toggle::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
  }
  
  /* Ensure text stays above overlay */
  .navbar11_dropdown-toggle .drop-down-text {
    position: relative;
    z-index: 1;
  }
  
  /* Fix dropdown list positioning */
  .navbar11_dropdown-list {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    z-index: 999 !important;
  }
  
  /* Hide the Resources dropdown that has class "hide" */
  .dropdown.hide,
  .dropdown.hide.w-dropdown,
  .navbar11_menu-links .dropdown.hide,
  .navbar11_menu-links > .dropdown.hide {
    display: none !important;
    width: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
  }
  
  /* Specifically target the Resources dropdown by its position */
  .navbar11_menu-dropdown + .dropdown {
    display: none !important;
  }
  
  /* Ensure Careers is the last visible item */
  .navbar11_menu-dropdown:nth-child(5) {
    margin-right: 0 !important;
    border-right: 1px solid rgba(255, 255, 255, 0.3) !important; /* Add closing border */
  }
  
  /* Hide everything after the 5th navigation item (Careers) */
  .navbar11_menu-links > *:nth-child(n+6) {
    display: none !important;
    width: 0 !important;
    visibility: hidden !important;
    position: absolute !important;
    left: -9999px !important;
  }
  
  /* Ensure Webflow dropdown compatibility */
  .w-dropdown {
    height: 100%;
    position: relative;
  }
  
  .w-dropdown-toggle {
    height: 100%;
  }
}

/* Ensure dropdown background doesn't interfere */
.dacktop-drpdwon-bg {
  pointer-events: none;
}

/* Keep hover effect only in hero section, hide everywhere else */

/* Hero section hover effect - keep it working */
.hero-section .hover-follow-wrapper,
.nav-hero-section .hover-follow-wrapper {
  pointer-events: none !important;
  z-index: 10 !important;
}

.hero-section .hover-follow,
.hero-section .hover-follow.dev,
.nav-hero-section .hover-follow,
.nav-hero-section .hover-follow.dev {
  pointer-events: none !important;
}

/* Hide hover effects in all other sections */
.tow-section .hover-follow-wrapper,
.footer .hover-follow-wrapper,
.values-section .hover-follow-wrapper,
.cta-section .hover-follow-wrapper {
  display: none !important;
}

/* Hide tutorial overlay elements */
.old-hide-item {
  display: none !important;
}

/* Use normal cursor everywhere except hero */
.tow-section,
.values-section,
.cta-section,
.footer {
  cursor: auto !important;
}

/* Ensure navigation stays on top */
.navbar11_component {
  z-index: 100 !important;
}

/* Increase SHARX logo text size */
.logo-text {
  font-size: 22px !important;
}

/* Zoom in on images on desktop */
@media screen and (min-width: 768px) {
  /* Zoom image 03 */
  .values-imag-_-right---img-3-wrap {
    overflow: visible !important; /* Allow image to be fully visible */
    z-index: 10 !important; /* Ensure it appears above other elements */
  }
  
  .values-imag-_-right---img-3-wrap img[src*="ai_drone_sharx_fully_autonmous"] {
    transform: scale(1.3) !important; /* Zoom in by 30% */
    object-fit: contain !important; /* Show full image without cropping */
  }
  
  /* Zoom image 02 on desktop */
  .values-imag-_-right---img-1 {
    transform: scale(1.3) !important;
    object-fit: cover !important;
  }
  
  /* Ensure container has overflow hidden */
  .values-imag-_-right---img-2-wrap-copy {
    overflow: hidden !important;
  }
}

/* Deactivate specific properties for values-imag-_-right-wrap on mobile only */
@media screen and (max-width: 767px) {
  .values-imag-_-right-wrap {
    grid-column-gap: unset !important;
    grid-row-gap: unset !important;
    flex-flow: unset !important;
    max-width: unset !important;
  }
  
  /* Zoom into image 02 on mobile */
  .values-imag-_-right---img-1 {
    transform: scale(1.5) !important;
    object-fit: cover !important;
  }
  
  /* Ensure image 02 container has overflow hidden */
  .values-imag-_-right---img-2-wrap-copy {
    overflow: hidden !important;
  }
  
  /* Zoom into image 03 on mobile */
  .values-imag-_-right---img-3 {
    transform: scale(1.5) !important;
    object-fit: contain !important; /* Show full image without cropping */
  }
  
  /* Adjust image 03 container width and position */
  .values-imag-_-right---img-3-wrap {
    width: 111% !important;
    position: static !important;
    overflow: visible !important; /* Allow image to be fully visible */
    z-index: 10 !important; /* Ensure it appears above other elements */
  }
  
  /* Adjust margin for Learn More button on mobile */
  .values-button-wrap {
    margin-top: 4px !important;
  }
}

/* Fix SVG logo colors */
.white-logo {
  color: white !important; /* White logo in header */
}

.black-logo {
  color: black !important; /* Black logo when scrolled */
}

.footer-logos {
  color: white !important; /* White logo in footer */
  filter: brightness(0) invert(1); /* Ensure logo is white in footer */
}

/* Social icon hover effects */
.social-icon-wrap {
  transition: all 0.3s ease !important;
  cursor: pointer !important;
}

.social-icon-wrap:hover {
  transform: translateY(-2px) !important;
}

.social-icon-wrap svg,
.social-icon {
  transition: all 0.3s ease !important;
}

.social-icon-wrap:hover svg,
.social-icon-wrap:hover .social-icon {
  fill: #FFFFFF !important;
  opacity: 1 !important;
}

/* Ensure all paths and groups within social icons also change color */
.social-icon-wrap:hover svg path,
.social-icon-wrap:hover svg g {
  fill: #FFFFFF !important;
  opacity: 1 !important;
}