/* RubenK9Guard Website - Responsive Styles */

/* Breakpoints */
/* Mobile: 320px - 768px */
/* Tablet: 769px - 1024px */
/* Desktop: 1025px+ */

/* Desktop First Approach */
@media screen and (max-width: 1024px) {
  :root {
    --font-size-h1: 2.5rem;
    --font-size-h2: 2rem;
    --font-size-h3: 1.25rem;
    --spacing-xl: 2.5rem;
    --spacing-xxl: 3rem;
  }

  .container {
    padding: 0 var(--spacing-md);
  }

  section {
    padding: var(--spacing-xl) 0;
  }
}

@media screen and (max-width: 768px) {
  :root {
    --font-size-h1: 2rem;
    --font-size-h2: 1.75rem;
    --font-size-h3: 1.125rem;
    --font-size-body: 0.9rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-xxl: 2.5rem;
  }

  .container {
    padding: 0 16px;
    /* Consistent mobile padding */
  }

  section {
    padding: 40px 0;
    /* Consistent mobile section spacing */
  }

  /* Grid adjustments for mobile */
  .grid-3 {
    grid-template-columns: 1fr;
    gap: 20px;
    /* Consistent gap */
  }

  .grid-2 {
    grid-template-columns: 1fr;
    gap: 20px;
    /* Consistent gap */
  }

  /* Button adjustments */
  .btn {
    padding: var(--spacing-xs) var(--spacing-md);
    font-size: 0.9rem;
  }

  /* All grids become single column on mobile */
  .services-grid,
  .contact-form-grid,
  .application-grid,
  .about-stats {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    padding: 0 10px !important;
  }

  /* Contact form specific mobile fixes */
  .contact-intro-column::after {
    display: none !important;
  }

  .contact-intro-column {
    padding-right: 0 !important;
  }

  /* Fix double scroll issue in contact form section */
  .contact-form-section {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
  }

  .contact-form-grid {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
  }

  .contact-intro-column,
  .contact-form-column {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
  }

  /* Service card alignment handled by theme.css */

  /* Hero mobile optimization */
  .hero-title {
    font-size: 1.8rem !important;
    line-height: 1.2;
    margin-bottom: 16px;
  }

  .hero-sub {
    font-size: 1rem !important;
    margin-bottom: 24px;
    padding: 0 10px;
  }

  .hero-cta {
    font-size: 1rem;
    padding: 12px 24px;
  }
}

@media screen and (max-width: 480px) {
  :root {
    --font-size-h1: 1.75rem;
    --font-size-h2: 1.5rem;
    --font-size-h3: 1rem;
    --spacing-sm: 0.75rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.25rem;
  }

  .container {
    padding: 0 12px;
    /* Extra tight pe mobile mic */
  }

  /* Services grid foarte mic */
  .services-grid {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 0 8px;
  }

  /* Service card mobile styles handled by theme.css */

  .service-image {
    height: 120px;
    margin-bottom: 12px;
  }

  /* Hero foarte mic */
  .hero-title {
    font-size: 1.6rem !important;
    margin-bottom: 12px;
  }

  .hero-sub {
    font-size: 0.9rem !important;
    margin-bottom: 20px;
    padding: 0 8px;
  }

  /* Join Us responsive */
  .join-us-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
  .btn {
    min-height: 44px;
    min-width: 44px;
  }

  a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {

  /* Optimize for retina displays */
  body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  html {
    scroll-behavior: auto;
  }
}

/* Services Grid Responsive Styles - Now handled in components.css */

/* Navigation Responsive Styles */
@media screen and (max-width: 768px) {
  .navbar {
    padding: var(--spacing-sm);
  }

  .nav-toggle {
    display: flex;
  }

  .nav-menu {
    display: none;
    width: 100%;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    background: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(10px);
    padding: var(--spacing-md);
    border-top: 1px solid var(--color-border);
  }

  .nav-menu.active {
    display: flex;
  }

  .nav-menu li {
    margin: var(--spacing-xs) 0;
  }

  .nav-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
  }

  .nav-toggle.active span:nth-child(2) {
    opacity: 0;
  }

  .nav-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -6px);
  }
}

@media screen and (max-width: 480px) {
  .hero-title {
    font-size: 1.5rem;
    line-height: 1.2;
  }

  .hero-subtitle {
    font-size: 1rem;
  }

  .cta-button {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: 0.9rem;
  }

  .logo {
    height: 45px;
  }


}

/* Top Info Bar Responsive Styles */
@media screen and (max-width: 768px) {
  .top-info-content {
    flex-direction: column;
    gap: var(--spacing-xs);
    text-align: center;
  }

  .top-info-left {
    flex-direction: column;
    gap: var(--spacing-xs);
  }

  .top-info-bar {
    padding: 12px 0;
  }

  .top-info-content {
    font-size: 0.8rem;
  }
}

@media screen and (max-width: 480px) {
  .top-info-left {
    gap: 4px;
  }

  .top-info-content {
    font-size: 0.75rem;
  }

  .top-info-item svg {
    width: 12px;
    height: 12px;
  }

  .social-icon {
    margin-top: var(--spacing-xs);
  }

  .social-icon svg {
    width: 14px;
    height: 14px;
  }
}

/* Fix images on mobile */
@media (max-width: 768px) {
  .service-image img {
    object-fit: cover !important;
    object-position: center !important;
    width: 100% !important;
    height: 100% !important;
  }

  /* Ensure hamburger menu works */
  .nav-toggle {
    display: flex !important;
    z-index: 9999 !important;
    position: relative !important;
  }

  .nav-menu {
    position: fixed !important;
    top: 0 !important;
    right: -100% !important;
    width: 100% !important;
    height: 100vh !important;
    background: rgba(11, 11, 11, 0.98) !important;
    backdrop-filter: blur(15px) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    transition: right 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    z-index: 9998 !important;
    padding: 0 !important;
  }

  .nav-menu.active {
    right: 0 !important;
  }

  .nav-menu li {
    margin: 16px 0 !important;
    opacity: 0 !important;
    transform: translateX(50px) !important;
    transition: all 0.3s ease !important;
  }

  .nav-menu.active li {
    opacity: 1 !important;
    transform: translateX(0) !important;
  }

  .nav-menu.active li:nth-child(1) {
    transition-delay: 0.1s !important;
  }

  .nav-menu.active li:nth-child(2) {
    transition-delay: 0.2s !important;
  }

  .nav-menu.active li:nth-child(3) {
    transition-delay: 0.3s !important;
  }

  .nav-menu.active li:nth-child(4) {
    transition-delay: 0.4s !important;
  }

  .nav-menu.active li:nth-child(5) {
    transition-delay: 0.5s !important;
  }

  .nav-menu.active li:nth-child(6) {
    transition-delay: 0.6s !important;
  }
}

/* Video optimization for faster loading */
.video-background {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

@media (max-width: 480px) {
  .service-image img {
    object-fit: cover !important;
  }
}

/* 
========================================
   MOBILE LAYOUT FIXES - URGENT
   ======================================== */

/* Prevent horizontal scroll */
html,
body {
  overflow-x: hidden !important;
  max-width: 100% !important;
}

.container {
  max-width: 100% !important;
  overflow-x: hidden !important;
  padding: 0 16px !important;
}

/* Fix images on mobile */
img {
  max-width: 100% !important;
  height: auto !important;
}

.service-image img {
  object-fit: cover !important;
  object-position: center !important;
  width: 100% !important;
  height: 100% !important;
}

/* Ensure text doesn't overflow */
h1,
h2,
h3,
h4,
h5,
h6,
p,
span,
div {
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  max-width: 100% !important;
}

/* Fix hero section on mobile */
.hero-title {
  font-size: 1.8rem !important;
  line-height: 1.2 !important;
  margin-bottom: 16px !important;
  text-align: center !important;
  padding: 0 8px !important;
}

.hero-sub {
  font-size: 1rem !important;
  margin-bottom: 24px !important;
  padding: 0 16px !important;
  text-align: center !important;
}

.hero-ctas {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important; /* 10-15px spacing between buttons */
  width: 100% !important;
  max-width: 320px !important;
  margin: 20px auto 0 auto !important; /* Position below hero text */
  padding: 0 20px !important; /* Prevent edge clipping */
  justify-content: center !important;
  align-items: center !important;
  position: relative !important;
  z-index: 60 !important;
}

.cta-button {
  width: 100% !important;
  max-width: 280px !important;
  min-height: 48px !important; /* Proper touch target */
  margin: 0 !important;
  padding: 14px 20px !important;
  text-align: center !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  white-space: nowrap !important;
}

/* Ensure buttons are visible on very small screens */
@media (max-width: 480px) {
  .hero {
    min-height: 45vh !important; /* Further reduced for small screens */
    padding: 20px 10px 30px 10px !important;
  }
  
  .hero-title {
    font-size: 1.8rem !important;
    margin-bottom: 12px !important;
  }
  
  .hero-sub {
    font-size: 0.95rem !important;
    margin-bottom: 15px !important;
  }
  
  .hero-ctas {
    max-width: 280px !important;
    padding: 0 15px !important;
    gap: 8px !important; /* Reduced gap for small screens */
    margin: 15px auto 0 auto !important;
  }
  
  .hero-ctas .cta-button {
    max-width: 250px !important;
    padding: 10px 14px !important; /* Reduced padding */
    font-size: 0.9rem !important;
    min-height: 42px !important; /* Slightly smaller but still tappable */
  }
}

/* Extra small screens optimization */
@media (max-width: 360px) {
  .hero {
    min-height: 40vh !important;
    padding: 15px 8px 25px 8px !important;
  }
  
  .hero-title {
    font-size: 1.6rem !important;
    margin-bottom: 10px !important;
  }
  
  .hero-sub {
    font-size: 0.85rem !important;
    margin-bottom: 12px !important;
  }
  
  .hero-ctas {
    gap: 6px !important;
    margin: 12px auto 0 auto !important;
    padding: 0 10px !important;
  }
  
  .hero-ctas .cta-button {
    padding: 8px 12px !important;
    font-size: 0.85rem !important;
    min-height: 40px !important;
  }
}

/* Fix main content alignment */
main {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}

/* Fix section alignment */
section {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Fix hero section layout */
.hero,
.hero-section {
  padding: 40px 16px 20px 16px !important;
  text-align: center !important;
  min-height: 60vh !important;
}

.hero-inner {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 auto !important;
}

/* Fix about section alignment */
.about-section {
  text-align: center !important;
}

.about-content {
  text-align: center !important;
  max-width: 100% !important;
  padding: 0 16px !important;
}

.about-content p {
  text-align: center !important;
  max-width: 100% !important;
  margin: 0 auto !important;
}

/* Fix services section alignment */
.services-section {
  text-align: center !important;
}

.section-title {
  text-align: center !important;
  max-width: 100% !important;
  padding: 0 16px !important;
}

.section-subtitle {
  text-align: center !important;
  max-width: 100% !important;
  padding: 0 16px !important;
}

/ * Body scroll lock when mobile menu is open */ body.menu-open {
  overflow: hidden !important;
  position: fixed !important;
  width: 100% !important;
}

/* Ensure mobile menu is above everything */
@media screen and (max-width: 768px) {
  .nav-menu {
    z-index: 9998 !important;
  }

  .nav-toggle {
    z-index: 9999 !important;
  }

  /* Video background should be below menu */
  .video-background {
    z-index: -1 !important;
  }

  /* Header container z-index */
  .header-container {
    position: relative !important;
    z-index: 100 !important;
  }
}

/ *========================================SPECIFIC GRID FIXES FOR MOBILE========================================*/ @media screen and (max-width: 768px) {
  /* Services grid - force single column */
  .services-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    padding: 0 16px !important;
    max-width: 100% !important;
  }

  /* Contact form grid - force single column */
  .contact-form-grid {
    grid-template-columns: 1fr !important;
    gap: 30px !important;
  }

  /* Application grid (Join Us page) - force single column */
  .application-grid {
    grid-template-columns: 1fr !important;
    gap: 30px !important;
  }

  /* About stats - force single column */
  .about-stats {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    max-width: 300px !important;
    margin: 0 auto !important;
  }

  /* Remove column separators on mobile */
  .contact-intro-column::after,
  .requirements-column::after {
    display: none !important;
  }

  /* Remove right padding on mobile */
  .contact-intro-column,
  .requirements-column {
    padding-right: 0 !important;
  }

  /* Ensure form cards are full width on mobile */
  .contact-form-card,
  .form-card {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
}

/* ==
======================================
   MOBILE BREAKPOINT SPECIFIC FIXES
   ======================================== */

/* Small mobile devices (320px - 375px) */
@media screen and (max-width: 375px) {
  .container {
    padding: 0 12px !important;
  }

  .hero-title {
    font-size: 1.6rem !important;
    padding: 0 4px !important;
  }

  .hero-sub {
    font-size: 0.9rem !important;
    padding: 0 8px !important;
  }

  .cta-button {
    padding: 12px 20px !important;
    font-size: 0.9rem !important;
  }

  .section-title {
    font-size: 1.8rem !important;
    padding: 0 8px !important;
  }

  .service-card {
    padding: 20px !important;
  }
}

/* Medium mobile devices (376px - 414px) */
@media screen and (min-width: 376px) and (max-width: 414px) {
  .hero-title {
    font-size: 1.9rem !important;
  }

  .hero-sub {
    font-size: 1.05rem !important;
  }

  .section-title {
    font-size: 2rem !important;
  }
}

/* Large mobile devices (415px - 768px) */
@media screen and (min-width: 415px) and (max-width: 768px) {
  .hero-title {
    font-size: 2.2rem !important;
  }

  .hero-sub {
    font-size: 1.1rem !important;
  }

  .section-title {
    font-size: 2.2rem !important;
  }

  .cta-button {
    max-width: 320px !important;
  }
}

/* Landscape orientation fixes */
@media screen and (max-width: 768px) and (orientation: landscape) {

  .hero,
  .hero-section {
    min-height: 50vh !important;
    padding: 20px 16px 10px 16px !important;
  }

  .hero-title {
    font-size: 1.6rem !important;
    margin-bottom: 12px !important;
  }

  .hero-sub {
    font-size: 0.95rem !important;
    margin-bottom: 16px !important;
  }

  .hero-ctas {
    flex-direction: row !important;
    gap: 12px !important;
    max-width: 500px !important;
  }

  .cta-button {
    width: auto !important;
    min-width: 140px !important;
    max-width: 200px !important;
  }
}

/* Fix viewport issues on iOS Safari */
@supports (-webkit-touch-callout: none) {

  .hero,
  .hero-section {
    min-height: calc(60vh - env(safe-area-inset-top)) !important;
  }
}

/* Ensure proper touch targets */
@media (pointer: coarse) {

  .cta-button,
  .nav-toggle,
  .nav-menu a {
    min-height: 44px !important;
    min-width: 44px !important;
  }
}

/*
 ========================================
   CSS FALLBACKS AND BROWSER COMPATIBILITY
   ======================================== */

/* Fallbacks for older browsers that don't support CSS Grid */
.services-grid {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

/* Modern browsers with CSS Grid support */
@supports (display: grid) {
  .services-grid {
    display: grid;
  }
}

/* Fallbacks for CSS custom properties */
@supports not (--css: variables) {
  .hero-title {
    font-size: 1.8rem;
  }

  .section-title {
    font-size: 2rem;
  }

  .container {
    padding: 0 16px;
  }
}

/* Flexbox fallbacks */
.hero-ctas {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

/* Ensure consistent container behavior */
.container {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/* Fix for older Safari versions */
@supports (-webkit-appearance: none) {

  .hero,
  .hero-section {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}

/* ========================================
   PERFORMANCE OPTIMIZATIONS
   ======================================== */

/* GPU acceleration for smooth animations */
.nav-menu,
.cta-button,
.service-card {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Optimize repaints */
.hero-title,
.section-title {
  contain: layout style paint;
}

/* Reduce layout thrashing */
@media screen and (max-width: 768px) {
  * {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}

/* ===
=====================================
   CONTAINER OVERFLOW AND SCROLL FIXES
   ======================================== */

/* Ensure no horizontal scroll on any element */
@media screen and (max-width: 768px) {
  * {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Fix specific containers that might cause overflow */
  .header-container,
  .main-content,
  .site-footer {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  /* Fix form containers */
  .contact-form-grid,
  .application-grid,
  .form-row {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  /* Fix text containers */
  .contact-intro-content,
  .join-intro-content,
  .about-content {
    width: 100% !important;
    max-width: 100% !important;
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
  }

  /* Fix image containers */
  .service-image,
  .gallery-container {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  /* Fix navigation */
  .navbar,
  .topbar {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  /* Fix footer */
  .footer-line,
  .footer-contact {
    width: 100% !important;
    max-width: 100% !important;
    flex-wrap: wrap !important;
  }

  /* Ensure no element creates horizontal scroll */
  .hero-inner,
  .services-grid,
  .about-stats {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Fix any remaining overflow issues */
  .reveal,
  .fade-in-up,
  .animated {
    max-width: 100% !important;
    overflow: visible !important;
  }
}

/* Specific fixes for text overflow */
@media screen and (max-width: 768px) {

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    hyphens: auto !important;
    -webkit-hyphens: auto !important;
    -ms-hyphens: auto !important;
  }

  p,
  span,
  div,
  a {
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
    -webkit-hyphens: auto !important;
    -ms-hyphens: auto !important;
  }
}

/* Fix viewport units on mobile */
@media screen and (max-width: 768px) {

  .hero,
  .hero-section {
    min-height: 60vh !important;
    height: auto !important;
  }

  /* Avoid 100vw which can cause horizontal scroll */
  .full-width {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Addi
tional mobile scroll fixes */
@media screen and (max-width: 768px) {

  /* Ensure no double scrollbars on mobile */
  html {
    overflow-x: hidden;
    overflow-y: auto;
  }

  body {
    overflow-x: hidden;
    overflow-y: auto;
  }

  /* Prevent any containers from creating their own scrollbars */
  * {
    overflow-x: visible !important;
  }

  /* Specific fixes for form containers */
  .contact-intro-section,
  .contact-form-section,
  .contact-intro-grid,
  .contact-form-grid,
  .contact-form-column,
  .contact-form-card,
  .contact-form,
  .form-field,
  .form-row {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
    display: block !important;
    /* Ensure visibility */
    visibility: visible !important;
    /* Force visibility */
    opacity: 1 !important;
    /* Ensure not transparent */
  }

  /* Ensure contact form grid displays properly */
  .contact-form-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  /* Ensure contact form section is visible */
  .contact-form-section {
    display: block !important;
    min-height: auto !important;
  }

  /* Ensure mobile menu works properly */
  .nav-toggle {
    display: flex !important;
    z-index: 9999 !important;
    position: relative !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
  }

  .nav-menu {
    z-index: 9998 !important;
  }

  /* Prevent body scroll when menu is open */
  body.menu-open {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
  }
}

/*
 ========================================
   TASK 1: MOBILE NAVIGATION FIXES
   ======================================== */

/* Hide hamburger menu and display visible navigation on mobile */
@media screen and (max-width: 768px) {

  /* Hide hamburger menu completely on mobile */
  .nav-toggle {
    display: none !important;
  }

  /* Display navigation menu visibly under logo in stacked layout */
  .nav-menu {
    position: static !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: auto !important;
    min-height: auto !important;
    background: transparent !important;
    backdrop-filter: none !important;
    padding: 16px 0 !important;
    margin: 0 !important;
    right: auto !important;
    top: auto !important;
    z-index: auto !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
  }

  /* Ensure navigation links maintain same order as desktop and are properly styled */
  .nav-menu li {
    margin: 4px 0 !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .nav-menu a {
    font-size: 1rem !important;
    color: var(--color-text-accent) !important;
    text-decoration: none !important;
    padding: 8px 16px !important;
    border-radius: 6px !important;
    transition: all 0.2s ease !important;
    min-width: auto !important;
    text-align: center !important;
    background: rgba(42, 42, 42, 0.8) !important;
    border: 1px solid rgba(191, 196, 202, 0.2) !important;
  }

  .nav-menu a:hover {
    background: rgba(191, 196, 202, 0.1) !important;
    color: #ffffff !important;
    border-color: rgba(191, 196, 202, 0.4) !important;
  }

  /* Ensure Join Us button maintains its special styling on mobile */
  .nav-menu a[href="join-us.html"] {
    background: linear-gradient(135deg, #bfc4ca 0%, #9ea3a8 100%) !important;
    color: #0b0b0b !important;
    border: none !important;
  }

  .nav-menu a[href="join-us.html"]:hover {
    background: linear-gradient(135deg, #ffffff 0%, #bfc4ca 100%) !important;
    transform: translateY(-1px) !important;
  }
}

/ *========================================TASK 2: HIDE INFOBAR ON MOBILE ONLY========================================*/
/* Hide infobar/topbar on mobile devices only */
@media screen and (max-width: 768px) {
  .topbar {
    display: none !important;
  }
}

/* Ensure infobar remains visible on desktop (no changes needed, but explicit for clarity) */
@media screen and (min-width: 769px) {
  .topbar {
    display: flex !important;
  }
}

/* 
========================================
   TASK 3: REMOVE CONTACT FORM SCROLL CONTAINERS
   ======================================== */

/* Remove all overflow scroll/auto properties from contact form section */
@media screen and (max-width: 768px) {
  .contact-form-section {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
  }

  .contact-form-grid {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
  }

  .contact-intro-column,
  .contact-form-column {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
  }

  .contact-form-card {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
  }

  .contact-form {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
  }

  /* Ensure form fields are accessible without internal scrolling */
  .form-field,
  .form-row {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
  }

  .form-textarea {
    overflow: auto !important;
    /* Allow textarea to have its own scroll if needed */
    height: auto !important;
    min-height: 100px !important;
    max-height: 200px !important;
    /* Reasonable limit for textarea */
  }
}

/* ==
======================================
   TASK 4: FIX INDUSTRIES WE SERVE SECTION SCROLL ISSUES
   ======================================== */

/* Remove fixed heights and sticky positioning from Industries section */
@media screen and (max-width: 768px) {
  .industries-section {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
    position: relative !important;
    /* Remove any sticky positioning */
  }

  .industries-pills {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
    position: relative !important;
    /* Remove any sticky positioning */
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 12px !important;
  }

  .industry-pill {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
    position: relative !important;
    /* Remove any sticky positioning */
    flex-shrink: 0 !important;
  }

  /* Ensure section flows naturally with main page scroll */
  .industries-section .container {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
  }
}

/* ========
================================
   TASK 5: VALIDATE SINGLE PAGE SCROLL BEHAVIOR
   ======================================== */

/* Ensure only one scroll area exists on entire page body */
@media screen and (max-width: 768px) {

  /* Force all sections to flow with main page scroll */
  section {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
    position: relative !important;
  }

  /* Remove any remaining CSS properties that create nested scroll containers */
  .reveal,
  .fade-in-up,
  .animated,
  .container,
  .grid,
  .services-grid,
  .about-stats,
  .cta-band-section,
  .site-footer {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
    position: relative !important;
  }

  /* Ensure main content flows naturally */
  main,
  #main-content {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
  }

  /* Ensure header doesn't create scroll issues */
  .header-container,
  .hero,
  .hero-section {
    overflow: visible !important;
    position: relative !important;
  }

  /* Confirm smooth scrolling behavior throughout entire page */
  html {
    scroll-behavior: smooth !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  body {
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }
}

/* ======
==================================
   TASK 8: FINAL VALIDATION AND CLEANUP
   ======================================== */

/* Ensure desktop layout remains completely unchanged */
@media screen and (min-width: 769px) {

  /* Explicitly maintain desktop navigation behavior */
  .nav-toggle {
    display: none !important;
    /* Keep hamburger hidden on desktop */
  }

  .nav-menu {
    position: static !important;
    display: flex !important;
    flex-direction: row !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    height: auto !important;
    width: auto !important;
  }

  .nav-menu li {
    margin: 0 !important;
    opacity: 1 !important;
    transform: none !important;
  }

  /* Ensure infobar/topbar remains visible on desktop */
  .topbar {
    display: flex !important;
  }

  /* Ensure all sections maintain desktop behavior */
  .contact-form-section,
  .industries-section,
  section {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
  }
}

/* Final mobile-specific overrides to ensure no conflicts */
@media screen and (max-width: 768px) {

  /* Prevent any JavaScript conflicts with hidden hamburger menu */
  .nav-toggle {
    pointer-events: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }

  /* Ensure body scroll is never locked on mobile */
  body {
    overflow-y: auto !important;
    position: static !important;
  }

  body.menu-open {
    overflow-y: auto !important;
    /* Override any menu-open scroll lock */
    position: static !important;
  }

  /* Final cleanup - ensure no element creates horizontal scroll */
  * {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

/ *========================================MOBILE HEADER & HERO REDESIGN========================================*/
/* Mobile header reorganization */
@media screen and (max-width: 768px) {

  /* Create a compact header area with black background */
  .header-container {
    position: relative !important;
  }

  /* Create a new mobile header area */
  .navbar {
    background: rgba(11, 11, 11, 0.95) !important;
    backdrop-filter: blur(10px) !important;
    padding: 16px 0 8px 0 !important;
    position: relative !important;
    z-index: 100 !important;
    border-bottom: 1px solid rgba(191, 196, 202, 0.2) !important;
  }

  /* Logo & text - move to top, centered and compact */
  .logo-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    margin-bottom: 12px !important;
    gap: 8px !important;
  }

  .logo {
    height: 45px !important;
    width: auto !important;
  }

  .logo-text {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }

  .company-name {
    font-size: 1.1rem !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    letter-spacing: 1.5px !important;
    line-height: 1.1 !important;
    margin-bottom: 2px !important;
  }

  .company-tagline {
    font-size: 0.7rem !important;
    font-weight: 400 !important;
    color: var(--color-text-accent) !important;
    letter-spacing: 0.5px !important;
    line-height: 1.2 !important;
    text-transform: uppercase !important;
  }

  /* Menu immediately under logo - visible, no hamburger */
  .nav-menu {
    position: static !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    background: transparent !important;
    backdrop-filter: none !important;
    padding: 8px 16px 12px 16px !important;
    margin: 0 !important;
    gap: 8px !important;
    z-index: auto !important;
  }

  .nav-menu li {
    margin: 2px !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .nav-menu a {
    font-size: 0.85rem !important;
    color: var(--color-text-accent) !important;
    text-decoration: none !important;
    padding: 6px 12px !important;
    border-radius: 4px !important;
    transition: all 0.2s ease !important;
    background: rgba(42, 42, 42, 0.6) !important;
    border: 1px solid rgba(191, 196, 202, 0.15) !important;
    white-space: nowrap !important;
  }

  .nav-menu a:hover {
    background: rgba(191, 196, 202, 0.15) !important;
    color: #ffffff !important;
    border-color: rgba(191, 196, 202, 0.3) !important;
  }

  /* Join Us button special styling */
  .nav-menu a[href="join-us.html"] {
    background: linear-gradient(135deg, #bfc4ca 0%, #9ea3a8 100%) !important;
    color: #0b0b0b !important;
    border: none !important;
    font-weight: 600 !important;
  }

  .nav-menu a[href="join-us.html"]:hover {
    background: linear-gradient(135deg, #ffffff 0%, #bfc4ca 100%) !important;
    transform: translateY(-1px) !important;
  }

  /* Hero video overlay - significantly reduced for clear video visibility */
  .hero::before {
    background: rgba(11, 11, 11, 0.15) !important;
    /* Reduced from 0.3 to 0.15 for much clearer video */
    backdrop-filter: blur(1px) !important;
    /* Reduced from 2px to 1px */
  }

  .video-background::after {
    background: rgba(11, 11, 11, 0.1) !important;
    /* Very light overlay for video visibility */
    backdrop-filter: blur(0.5px) !important;
    /* Minimal blur */
  }

  /* Hero content adjustments for better visibility */
  .hero {
    padding-top: 20px !important;
    /* Reduced padding since header is more compact */
    min-height: 50vh !important;
    /* Reduced height to give more space to content */
  }

  .hero-inner {
    position: relative !important;
    z-index: 10 !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7) !important;
    /* Better text readability */
  }

  .hero-title {
    font-size: 1.8rem !important;
    line-height: 1.1 !important;
    margin-bottom: 16px !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8) !important;
  }

  .hero-sub {
    font-size: 1rem !important;
    margin-bottom: 24px !important;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7) !important;
  }

  /* Ensure hamburger is completely hidden */
  .nav-toggle {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}

/* Extra small mobile adjustments */
@media screen and (max-width: 480px) {
  .nav-menu {
    gap: 6px !important;
    padding: 6px 12px 10px 12px !important;
  }

  .nav-menu a {
    font-size: 0.8rem !important;
    padding: 5px 10px !important;
  }

  .company-name {
    font-size: 1rem !important;
    letter-spacing: 1px !important;
  }

  .company-tagline {
    font-size: 0.65rem !important;
  }

  .logo {
    height: 40px !important;
  }
}

/* ======
==================================
   MOBILE VIDEO OVERLAY REDUCTION
   ======================================== */

/* Reduce video overlay and blur for better visibility on mobile */
@media screen and (max-width: 768px) {

  /* Remove or reduce existing overlays */
  .header-container::before,
  .hero::before {
    background: rgba(11, 11, 11, 0.2) !important;
    /* Much lighter overlay */
    backdrop-filter: blur(1px) !important;
    /* Minimal blur */
  }

  /* Reduce video background overlay */
  .video-background::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(11, 11, 11, 0.15) !important;
    /* Very light overlay */
    backdrop-filter: blur(0.5px) !important;
    /* Almost no blur */
    z-index: 1 !important;
  }

  /* Ensure video is more visible */
  .video-background {
    opacity: 0.9 !important;
    /* Slightly more visible */
    filter: brightness(1.1) contrast(1.05) !important;
    /* Enhance video visibility */
  }

  /* Enhance text readability without heavy overlay */
  .hero-inner {
    position: relative !important;
    z-index: 10 !important;
    background: rgba(0, 0, 0, 0.1) !important;
    /* Very subtle background for text */
    backdrop-filter: blur(2px) !important;
    /* Minimal blur just for text area */
    border-radius: 12px !important;
    padding: 20px !important;
    margin: 20px !important;
  }

  /* Stronger text shadows for readability without heavy overlay */
  .hero-title {
    text-shadow:
      0 0 30px rgba(0, 0, 0, 0.9),
      0 0 60px rgba(0, 0, 0, 0.8),
      0 2px 8px rgba(0, 0, 0, 0.9),
      0 4px 16px rgba(0, 0, 0, 0.8) !important;
    filter:
      drop-shadow(0 0 15px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 30px rgba(0, 0, 0, 0.8)) !important;
  }

  .hero-sub {
    text-shadow:
      0 0 20px rgba(0, 0, 0, 0.9),
      0 0 40px rgba(0, 0, 0, 0.8),
      0 2px 6px rgba(0, 0, 0, 0.9),
      0 4px 12px rgba(0, 0, 0, 0.7) !important;
    filter:
      drop-shadow(0 0 10px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 20px rgba(0, 0, 0, 0.8)) !important;
  }

  /* CTA buttons with better visibility */
  .hero-ctas .cta-button {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(10px) !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow:
      0 0 20px rgba(255, 255, 255, 0.4),
      0 4px 20px rgba(0, 0, 0, 0.6) !important;
  }

  .hero-ctas .cta-button:hover {
    background: rgba(255, 255, 255, 1) !important;
    transform: translateY(-2px) !important;
    box-shadow:
      0 0 30px rgba(255, 255, 255, 0.6),
      0 6px 25px rgba(0, 0, 0, 0.7) !important;
  }
}

/* =====
===================================
   NEW MOBILE HEADER STRUCTURE - 3 ZONES
   ======================================== */

/* Mobile header reorganization - 3 distinct zones */
@media screen and (max-width: 768px) {

  /* Override previous mobile header styles */
  .header-container {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* ZONE 1: Pure black bar - Logo + Text only, NO SCROLL */
  .navbar {
    background: #0b0b0b !important;
    /* Pure black background */
    padding: 10px 0 !important;
    position: relative !important;
    z-index: 100 !important;
    border-bottom: none !important;
    order: 1 !important;
    backdrop-filter: none !important;
    /* Remove blur from navbar */
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    /* Prevent horizontal scroll */
    box-sizing: border-box !important;
  }

  /* Logo & text in black bar - ON SAME ROW, horizontally aligned */
  .logo-container {
    display: flex !important;
    flex-direction: row !important;
    /* Same row - horizontal */
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 12px !important;
    /* Space between logo and text */
    margin: 0 !important;
    padding: 0 16px !important;
    /* Prevent horizontal scroll */
    max-width: 100% !important;
    overflow: hidden !important;
    /* Prevent scroll */
  }

  .logo {
    height: 40px !important;
    width: auto !important;
    flex-shrink: 0 !important;
    /* Don't shrink logo */
  }

  .logo-text {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    /* Left align text next to logo */
    text-align: left !important;
    flex-shrink: 1 !important;
    /* Allow text to shrink if needed */
  }

  .company-name {
    font-size: 0.9rem !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    letter-spacing: 1px !important;
    line-height: 1.1 !important;
    margin-bottom: 2px !important;
    white-space: nowrap !important;
    /* Prevent text wrapping */
  }

  .company-tagline {
    font-size: 0.6rem !important;
    font-weight: 400 !important;
    color: var(--color-text-accent) !important;
    letter-spacing: 0.3px !important;
    line-height: 1.1 !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    /* Prevent text wrapping */
  }

  /* ZONE 2: Move menu outside navbar, create blurred band */
  .nav-menu {
    position: relative !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    background: rgba(11, 11, 11, 0.7) !important;
    /* Semi-transparent background */
    backdrop-filter: blur(15px) !important;
    /* Strong blur for menu area only */
    padding: 12px 16px !important;
    /* Compact padding */
    margin: 0 !important;
    gap: 6px !important;
    z-index: 99 !important;
    border-bottom: 1px solid rgba(191, 196, 202, 0.1) !important;
    min-height: 48px !important;
    /* Fixed height for blur band */
    max-height: 48px !important;
    /* Prevent expansion */
    box-sizing: border-box !important;
    order: 2 !important;
    /* Ensure it comes after navbar */
  }

  .nav-menu li {
    margin: 0 !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .nav-menu a {
    font-size: 0.8rem !important;
    color: #ffffff !important;
    text-decoration: none !important;
    padding: 6px 10px !important;
    border-radius: 4px !important;
    transition: all 0.2s ease !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    white-space: nowrap !important;
  }

  .nav-menu a:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
  }

  /* Join Us button special styling in blurred menu */
  .nav-menu a[href="join-us.html"] {
    background: linear-gradient(135deg, #bfc4ca 0%, #9ea3a8 100%) !important;
    color: #0b0b0b !important;
    border: none !important;
    font-weight: 600 !important;
  }

  .nav-menu a[href="join-us.html"]:hover {
    background: linear-gradient(135deg, #ffffff 0%, #bfc4ca 100%) !important;
    transform: translateY(-1px) !important;
  }

  /* ZONE 3: Hero starts immediately after menu - no overlay, full video visibility */
  .hero {
    padding-top: 0 !important;
    /* No padding - starts right after menu */
    min-height: calc(100vh - 110px) !important;
    /* Account for header + menu height */
    order: 3 !important;
    position: relative !important;
    margin-top: 0 !important;
    /* No gap between menu and hero */
  }

  /* Remove all overlays - let video show through completely */
  .hero::before {
    display: none !important;
    /* Remove hero overlay completely */
  }

  .video-background::after {
    display: none !important;
    /* Remove video overlay completely */
  }

  /* Video background positioning - full visibility */
  .video-background {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    z-index: -1 !important;
    opacity: 1 !important;
    /* Full video visibility */
    filter: brightness(1.1) contrast(1.05) !important;
    /* Enhance video */
  }

  /* Hero content with enhanced text shadows for readability */
  .hero-inner {
    position: relative !important;
    z-index: 10 !important;
    padding: 40px 20px !important;
    margin-top: 20px !important;
  }

  .hero-title {
    font-size: 1.8rem !important;
    line-height: 1.1 !important;
    margin-bottom: 16px !important;
    text-shadow:
      0 0 40px rgba(0, 0, 0, 0.9),
      0 0 80px rgba(0, 0, 0, 0.8),
      0 2px 10px rgba(0, 0, 0, 0.9) !important;
    filter:
      drop-shadow(0 0 20px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 40px rgba(0, 0, 0, 0.8)) !important;
  }

  .hero-sub {
    font-size: 1rem !important;
    margin-bottom: 24px !important;
    text-shadow:
      0 0 30px rgba(0, 0, 0, 0.9),
      0 0 60px rgba(0, 0, 0, 0.8),
      0 2px 8px rgba(0, 0, 0, 0.9) !important;
    filter:
      drop-shadow(0 0 15px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 30px rgba(0, 0, 0, 0.8)) !important;
  }

  /* Ensure hamburger is completely hidden */
  .nav-toggle {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}

/* Extra small mobile adjustments for new structure */
@media screen and (max-width: 480px) {
  .logo-container {
    gap: 8px !important;
    /* Smaller gap on tiny screens */
    padding: 0 12px !important;
  }

  .nav-menu {
    gap: 4px !important;
    padding: 10px 12px !important;
    min-height: 44px !important;
    max-height: 44px !important;
  }

  .nav-menu a {
    font-size: 0.75rem !important;
    padding: 5px 8px !important;
  }

  .company-name {
    font-size: 0.8rem !important;
    letter-spacing: 0.8px !important;
  }

  .company-tagline {
    font-size: 0.55rem !important;
  }

  .logo {
    height: 35px !important;
  }

  .hero {
    min-height: calc(100vh - 100px) !important;
    /* Adjust for smaller header */
  }
}/* ====
====================================
   MOBILE MENU & HERO FIXES - FINAL
   ======================================== */

@media screen and (max-width: 768px) {
  
  /* MENU FIXES - Ensure visibility and correct anchors */
  .nav-menu {
    display: flex !important; /* Force visibility */
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 150 !important; /* Higher z-index above video */
    flex-wrap: nowrap !important; /* Single row */
    overflow-x: auto !important; /* Allow horizontal scroll if needed */
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
  }
  
  /* Menu items - correct order and anchors */
  .nav-menu li {
    flex-shrink: 0 !important; /* Prevent shrinking */
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  .nav-menu a {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    font-size: 0.75rem !important;
    padding: 8px 12px !important;
    white-space: nowrap !important;
    background: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 6px !important;
  }
  
  /* Ensure correct anchor links */
  .nav-menu a[href="#home"],
  .nav-menu a[href="#about"],
  .nav-menu a[href="#services"],
  .nav-menu a[href="gallery.html"],
  .nav-menu a[href="#contact-form"],
  .nav-menu a[href="join-us.html"] {
    display: block !important;
    visibility: visible !important;
  }
  
  /* HERO BLUR REDUCTION - Make it subtle */
  .hero-inner {
    background: transparent !important; /* Remove heavy background */
    backdrop-filter: none !important; /* Remove blur from text area */
    border-radius: 0 !important;
    padding: 30px 20px !important;
    margin: 0 !important;
  }
  
  /* Create subtle text backdrop only behind text, not buttons */
  .hero-title,
  .hero-sub {
    background: rgba(0, 0, 0, 0.3) !important; /* Very light backdrop */
    backdrop-filter: blur(3px) !important; /* Minimal blur */
    padding: 8px 16px !important;
    border-radius: 8px !important;
    display: inline-block !important;
    margin-bottom: 16px !important;
  }
  
  /* CTA BUTTONS - Ensure both are visible and functional */
  .hero-ctas {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    align-items: center !important;
    margin-top: 20px !important;
    z-index: 20 !important;
    position: relative !important;
  }
  
  .hero-ctas .cta-button,
  .cta-button {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    background: rgba(255, 255, 255, 0.95) !important;
    color: #0b0b0b !important;
    border: 2px solid rgba(255, 255, 255, 0.8) !important;
    padding: 14px 24px !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    text-align: center !important;
    min-width: 200px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
    backdrop-filter: blur(10px) !important;
    z-index: 25 !important;
    position: relative !important;
  }
  
  /* Second button specific styling */
  .cta-button.join-us-hero,
  .hero-ctas .cta-button:nth-child(2) {
    background: rgba(191, 196, 202, 0.95) !important;
    color: #0b0b0b !important;
    border: 2px solid rgba(191, 196, 202, 0.8) !important;
  }
  
  .hero-ctas .cta-button:hover {
    background: rgba(255, 255, 255, 1) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4) !important;
  }
  
  /* Ensure buttons are above WhatsApp bubble */
  .hero-ctas {
    z-index: 30 !important;
  }
  
  /* Hide WhatsApp floating button on mobile */
  .whatsapp-float,
  .whatsapp-bubble {
    display: none !important;
  }
  
  /* BODY SCROLL ONLY */
  html, body {
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }
  
  /* Prevent other elements from creating scroll */
  .header-container,
  .hero,
  .video-background {
    overflow: visible !important;
  }
}

/* Small mobile adjustments */
@media screen and (max-width: 480px) {
  .nav-menu {
    gap: 4px !important;
    padding: 10px 12px !important;
  }
  
  .nav-menu a {
    font-size: 0.7rem !important;
    padding: 6px 8px !important;
  }
  
  .hero-title,
  .hero-sub {
    padding: 6px 12px !important;
    font-size: 1.6rem !important; /* Adjust title size */
  }
  
  .hero-sub {
    font-size: 0.9rem !important;
  }
  
  .cta-button {
    min-width: 180px !important;
    padding: 12px 20px !important;
    font-size: 0.9rem !important;
  }
}/* =====
===================================
   MOBILE HEADER STRUCTURE - CORRECTED
   ======================================== */

@media screen and (max-width: 768px) {
  
  /* OVERRIDE ALL PREVIOUS MOBILE STYLES */
  
  /* Header container - single unit with logo and menu */
  .header-container {
    position: relative !important;
    display: block !important; /* Change from flex to block */
  }
  
  /* NAVBAR - Contains both logo and menu in same header */
  .navbar {
    background: #0b0b0b !important; /* Pure black background */
    padding: 12px 0 0 0 !important; /* Top padding only */
    position: relative !important;
    z-index: 100 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    border-bottom: none !important;
  }
  
  /* Logo container - horizontal layout in black bar */
  .logo-container {
    display: flex !important;
    flex-direction: row !important; /* Horizontal */
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    padding: 0 16px 12px 16px !important; /* Bottom padding for separation */
    margin: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }
  
  .logo {
    height: 40px !important;
    width: auto !important;
    flex-shrink: 0 !important;
  }
  
  .logo-text {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
    flex-shrink: 1 !important;
  }
  
  .company-name {
    font-size: 0.9rem !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    letter-spacing: 1px !important;
    line-height: 1.1 !important;
    margin-bottom: 2px !important;
    white-space: nowrap !important;
  }
  
  .company-tagline {
    font-size: 0.6rem !important;
    font-weight: 400 !important;
    color: var(--color-text-accent) !important;
    letter-spacing: 0.3px !important;
    line-height: 1.1 !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
  }
  
  /* MENU - Immediately under logo in blurred band */
  .nav-menu {
    position: relative !important;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important; /* Single row */
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    background: rgba(11, 11, 11, 0.6) !important; /* Lighter background */
    backdrop-filter: blur(12px) !important; /* Blur for menu area */
    padding: 10px 16px !important;
    margin: 0 !important;
    gap: 6px !important;
    z-index: 110 !important;
    border-bottom: 1px solid rgba(191, 196, 202, 0.1) !important;
    min-height: 44px !important; /* Fixed height - exact blur band */
    max-height: 44px !important;
    box-sizing: border-box !important;
    overflow-x: auto !important; /* Allow horizontal scroll if needed */
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
  }
  
  .nav-menu li {
    margin: 0 !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    flex-shrink: 0 !important;
    display: block !important;
    visibility: visible !important;
  }
  
  .nav-menu a {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    font-size: 0.75rem !important;
    color: #ffffff !important;
    text-decoration: none !important;
    padding: 8px 12px !important;
    border-radius: 6px !important;
    transition: all 0.2s ease !important;
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    white-space: nowrap !important;
  }
  
  .nav-menu a:hover {
    background: rgba(255, 255, 255, 0.25) !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
  }
  
  /* Join Us button special styling */
  .nav-menu a[href="join-us.html"] {
    background: linear-gradient(135deg, #bfc4ca 0%, #9ea3a8 100%) !important;
    color: #0b0b0b !important;
    border: none !important;
    font-weight: 600 !important;
  }
  
  .nav-menu a[href="join-us.html"]:hover {
    background: linear-gradient(135deg, #ffffff 0%, #bfc4ca 100%) !important;
    transform: translateY(-1px) !important;
  }
  
  /* Hide hamburger completely */
  .nav-toggle {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
  
  /* HERO - Starts immediately after header */
  .hero {
    padding-top: 0 !important;
    min-height: calc(100vh - 120px) !important; /* Account for header height */
    position: relative !important;
    margin-top: 0 !important;
  }
  
  /* Video background - full visibility */
  .video-background {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    z-index: -1 !important;
    opacity: 1 !important;
    filter: brightness(1.1) contrast(1.05) !important;
  }
  
  /* Remove all heavy overlays */
  .hero::before,
  .video-background::after {
    display: none !important;
  }
  
  /* HERO TEXT - Much lighter overlay */
  .hero-inner {
    position: relative !important;
    z-index: 10 !important;
    padding: 40px 20px !important;
    margin: 0 !important;
    background: transparent !important;
    backdrop-filter: none !important;
  }
  
  /* Very subtle backdrop only behind text with enhanced readability */
  .hero-title {
    background: rgba(0, 0, 0, 0.15) !important; /* Even lighter for video visibility */
    backdrop-filter: blur(1px) !important; /* Minimal blur */
    padding: 6px 12px !important;
    border-radius: 6px !important;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7) !important; /* Strong text shadow for readability */
    display: inline-block !important;
    margin-bottom: 16px !important;
    font-size: 1.8rem !important;
    line-height: 1.1 !important;
    text-shadow: 
      0 0 20px rgba(0,0,0,0.8),
      0 2px 6px rgba(0,0,0,0.7) !important;
  }
  
  .hero-sub {
    background: rgba(0, 0, 0, 0.15) !important; /* Even lighter for subtitle */
    backdrop-filter: blur(1px) !important; /* Minimal blur */
    padding: 4px 10px !important;
    border-radius: 4px !important;
    display: inline-block !important;
    margin-bottom: 24px !important;
    font-size: 1rem !important;
    text-shadow: 
      0 0 15px rgba(0,0,0,0.7),
      0 2px 4px rgba(0,0,0,0.6) !important;
  }
  
  /* CTA BUTTONS - Ensure full visibility */
  .hero-ctas {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    align-items: center !important;
    margin-top: 20px !important;
    z-index: 20 !important;
    position: relative !important;
  }
  
  .hero-ctas .cta-button,
  .cta-button {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    background: rgba(255, 255, 255, 0.95) !important;
    color: #0b0b0b !important;
    border: 2px solid rgba(255, 255, 255, 0.8) !important;
    padding: 14px 24px !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    text-align: center !important;
    min-width: 200px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
    backdrop-filter: blur(8px) !important;
    z-index: 25 !important;
    position: relative !important;
  }
  
  /* Second button styling */
  .cta-button.join-us-hero,
  .hero-ctas .cta-button:nth-child(2) {
    background: rgba(191, 196, 202, 0.95) !important;
    color: #0b0b0b !important;
    border: 2px solid rgba(191, 196, 202, 0.8) !important;
  }
  
  .hero-ctas .cta-button:hover {
    background: rgba(255, 255, 255, 1) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4) !important;
  }
  
  /* Ensure buttons are above everything */
  .hero-ctas {
    z-index: 30 !important;
  }
  
  /* Keep WhatsApp floating button hidden on mobile */
  .whatsapp-float,
  .whatsapp-bubble {
    display: none !important;
  }
}

/* Small mobile adjustments */
@media screen and (max-width: 480px) {
  .logo-container {
    gap: 8px !important;
    padding: 0 12px 10px 12px !important;
  }
  
  .nav-menu {
    gap: 4px !important;
    padding: 8px 12px !important;
    min-height: 40px !important;
    max-height: 40px !important;
  }
  
  .nav-menu a {
    font-size: 0.7rem !important;
    padding: 6px 8px !important;
  }
  
  .company-name {
    font-size: 0.8rem !important;
  }
  
  .company-tagline {
    font-size: 0.55rem !important;
  }
  
  .logo {
    height: 35px !important;
  }
  
  .hero-title {
    font-size: 1.6rem !important;
  }
  
  .hero-sub {
    font-size: 0.9rem !important;
  }
  
  .cta-button {
    min-width: 180px !important;
    padding: 12px 20px !important;
    font-size: 0.9rem !important;
  }
}