/* Custom Menu Styles - Active Text Color Effect */

/* Override dot border effects with text color changes */
header.style-1 .main-menu > ul > li.active > a::after,
header.style-2 .main-menu > ul > li.active > a::after,
header.style-3 .main-menu > ul > li.active > a::after,
header.style-4 .main-menu > ul > li.active > a::after,
header.style-5 .main-menu > ul > li.active > a::after,
header.style-6 .main-menu > ul > li.active > a::after,
header.style-1 .main-menu > ul > li > a::after,
header.style-2 .main-menu > ul > li > a::after,
header.style-3 .main-menu > ul > li > a::after,
header.style-4 .main-menu > ul > li > a::after,
header.style-5 .main-menu > ul > li > a::after,
header.style-6 .main-menu > ul > li > a::after {
  display: none !important;
}

/* Hide all pseudo-element borders and dots */
header .main-menu > ul > li > a::before,
header .main-menu > ul > li.active > a::before,
header .main-menu > ul > li.menu-item-has-children > a::before,
header .main-menu > ul > li.active.menu-item-has-children > a::before {
  display: none !important;
}

/* Active text color styling */
header.style-1 .main-menu > ul > li.active > a,
header.style-2 .main-menu > ul > li.active > a,
header.style-3 .main-menu > ul > li.active > a,
header.style-4 .main-menu > ul > li.active > a,
header.style-5 .main-menu > ul > li.active > a,
header.style-6 .main-menu > ul > li.active > a {
  color: var(--primary-color1) !important;
  font-weight: 600 !important;
}

/* Hover effects with color change */
header.style-1 .main-menu > ul > li > a:hover,
header.style-2 .main-menu > ul > li > a:hover,
header.style-3 .main-menu > ul > li > a:hover,
header.style-4 .main-menu > ul > li > a:hover,
header.style-5 .main-menu > ul > li > a:hover,
header.style-6 .main-menu > ul > li > a:hover {
  color: var(--primary-color1) !important;
  transition: color 0.3s ease !important;
}

/* Dark mode active text color */
body.dark header .main-menu > ul > li.active > a {
  color: var(--primary-color1) !important;
  border: none !important;
}

body.dark header .main-menu > ul > li > a{
  border: none !important;
}

/* Mobile menu active styling */
.right-sidebar-menu .sidebar-content-wrap .main-menu > ul > li.active > a {
  color: var(--primary-color1) !important;
  font-weight: 600 !important;
}

.right-sidebar-menu .sidebar-content-wrap .main-menu > ul > li.active.menu-item-has-children > a::before {
  display: none !important;
}

/* Comprehensive style-3 dot border override */
header.style-3 .main-menu > ul > li > a::before,
header.style-3 .main-menu > ul > li > a::after,
header.style-3 .main-menu > ul > li:hover > a::before,
header.style-3 .main-menu > ul > li:hover > a::after,
header.style-3 .main-menu > ul > li.active > a::before,
header.style-3 .main-menu > ul > li.active > a::after,
header.style-3 .main-menu > ul > li:hover::before,
header.style-3 .main-menu > ul > li:hover::after,
header.style-3 .main-menu > ul > li.active::before,
header.style-3 .main-menu > ul > li.active::after,
header.style-3 .main-menu > ul > li.menu-item-has-children > a::before,
header.style-3 .main-menu > ul > li.menu-item-has-children > a::after,
header.style-3 .main-menu > ul > li:hover.menu-item-has-children > a::before,
header.style-3 .main-menu > ul > li:hover.menu-item-has-children > a::after,
header.style-3 .main-menu > ul > li.active.menu-item-has-children > a::before,
header.style-3 .main-menu > ul > li.active.menu-item-has-children > a::after {
  display: none !important;
  content: none !important;
  border: none !important;
  background: none !important;
  width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Force remove any transform or scale effects */
header.style-3 .main-menu > ul > li > a,
header.style-3 .main-menu > ul > li:hover > a,
header.style-3 .main-menu > ul > li.active > a {
  position: relative;
}

header.style-3 .main-menu > ul > li > a::before,
header.style-3 .main-menu > ul > li > a::after {
  transform: none !important;
  scale: 0 !important;
}

/* Nuclear option - remove ALL pseudo-elements on ALL header styles */
header .main-menu > ul > li::before,
header .main-menu > ul > li::after,
header .main-menu > ul > li > a::before,
header .main-menu > ul > li > a::after,
header .main-menu > ul > li:hover::before,
header .main-menu > ul > li:hover::after,
header .main-menu > ul > li:hover > a::before,
header .main-menu > ul > li:hover > a::after,
header .main-menu > ul > li.active::before,
header .main-menu > ul > li.active::after,
header .main-menu > ul > li.active > a::before,
header .main-menu > ul > li.active > a::after,
header .main-menu > ul > li.menu-item-has-children::before,
header .main-menu > ul > li.menu-item-has-children::after,
header .main-menu > ul > li.menu-item-has-children > a::before,
header .main-menu > ul > li.menu-item-has-children > a::after,
header .main-menu > ul > li:hover.menu-item-has-children::before,
header .main-menu > ul > li:hover.menu-item-has-children::after,
header .main-menu > ul > li:hover.menu-item-has-children > a::before,
header .main-menu > ul > li:hover.menu-item-has-children > a::after,
header .main-menu > ul > li.active.menu-item-has-children::before,
header .main-menu > ul > li.active.menu-item-has-children::after,
header .main-menu > ul > li.active.menu-item-has-children > a::before,
header .main-menu > ul > li.active.menu-item-has-children > a::after {
  display: none !important;
  content: none !important;
  border: none !important;
  background: none !important;
  background-color: transparent !important;
  width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: none !important;
  scale: 0 !important;
  position: absolute !important;
  top: -9999px !important;
  left: -9999px !important;
}

/* ================================================ */
/* Hide/Disable Dropdown Menus - All Versions      */
/* ================================================ */
/* Hide dropdown menus completely on all devices */
.main-menu .mega-menu2,
header .main-menu .mega-menu2,
.mega-menu2 {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* Remove dropdown on hover - Desktop */
@media (min-width: 992px) {
  header .main-menu > ul > li:hover .mega-menu2,
  header .main-menu > ul > li.menu-item-has-children:hover .mega-menu2,
  .main-menu > ul > li:hover .mega-menu2 {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }
}

/* Hide dropdown toggle icons on mobile */
@media (max-width: 991px) {
  .main-menu .dropdown-icon,
  .main-menu .menu-item-has-children > .dropdown-icon {
    display: none !important;
    visibility: hidden !important;
  }
  
  /* Remove the dropdown menu space */
  .main-menu .menu-item-has-children .mega-menu2 {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

/* Make solution menu item act as regular link without dropdown */
.main-menu .menu-item-has-children > a.drop-down {
  pointer-events: auto !important;
}

/* Remove any indication of dropdown functionality */
.main-menu .menu-item-has-children > a::after,
.main-menu .menu-item-has-children > a.drop-down::after {
  content: none !important;
  display: none !important;
}

/* ================================================ */
/* Mobile Menu Improvements - Spacing and Alignment */
/* ================================================ */
@media (max-width: 991px) {
  /* Better spacing between menu items */
  .main-menu .menu-list > li {
    margin-bottom: 16px !important; /* Increase from 8px to 16px */
    position: relative;
    display: flex;
    align-items: center;
  }
  
  .main-menu .menu-list > li:last-child {
    margin-bottom: 0 !important;
  }
  
  /* Proper alignment for menu links */
  .main-menu .menu-list > li > a {
    padding: 12px 45px 12px 0 !important; /* Right padding for dropdown icon */
    display: block;
    flex: 1;
    line-height: 1.6;
    min-height: 44px; /* Better touch target for mobile */
    display: flex;
    align-items: center;
  }
  
  /* Center-aligned dropdown icon */
  .main-menu .dropdown-icon {
    position: absolute !important;
    right: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 35px !important;
    height: 35px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 20px !important;
    cursor: pointer !important;
    color: var(--white-color);
  }
  
  /* Ensure proper structure for dropdown items */
  .main-menu .menu-list > li.menu-item-has-children {
    position: relative;
  }
  
  /* Sub-menu spacing and styling */
  .main-menu .mega-menu2 {
    margin-top: 12px !important;
    padding: 16px !important;
    background-color: rgba(255, 255, 255, 0.05) !important;
    border-radius: 8px !important;
    margin-bottom: 8px !important;
  }
  
  /* Ensure sub-menu items also have good spacing */
  .main-menu .mega-menu2 .menu-row li {
    margin-bottom: 10px !important;
  }
  
  .main-menu .mega-menu2 .menu-row li:last-child {
    margin-bottom: 0 !important;
  }
}

/* ================================================ */
/* Fix for style-3 header padding conflicts        */
/* ================================================ */
@media (max-width: 991px) {
  /* Override the padding: 0 from style.css that removes spacing */
  header.style-3 .main-menu > ul > li {
    padding: 8px 0 !important; /* Restore vertical padding */
    display: block !important;
    position: relative !important;
  }
  
  /* Ensure our spacing rules take precedence for style-3 */
  header.style-3 .main-menu .menu-list > li {
    margin-bottom: 0px !important;
  }
  
  header.style-3 .main-menu .menu-list > li:last-child {
    margin-bottom: 0 !important;
  }
  
  /* Adjust link padding to include horizontal spacing */
  header.style-3 .main-menu .menu-list > li > a {
    padding: 12px 45px 12px 12px !important; /* Include left padding for proper indentation */
  }
}

/* ================================================ */
/* Mobile Video Optimization Styles                */
/* ================================================ */

/* Tablet and small laptop styles */
@media (max-width: 991px) {
  .home3-banner-section .home3-video-wrapper {
    margin-top: 0 !important; /* Reset negative margin for tablets */
    width: 100%;
    max-width: 100%;
  }
}

@media (max-width: 767px) {
  /* Adjust video wrapper for mobile */
  .home3-video-wrapper {
    margin-top: 0 !important; /* Remove top margin to fix positioning */
    margin-bottom: 20px;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }
  
  .home3-video-wrapper .video-area {
    height: 250px !important; /* Reduce height on mobile */
    border-radius: 15px;
    overflow: hidden;
  }
  
  /* Adjust video content overlay for mobile */
  .home3-video-wrapper .video-area .content {
    padding: 15px;
    bottom: 15px;
    left: 15px;
  }
  
  .home3-video-wrapper .video-area .content h6 {
    font-size: 14px;
  }
  
  .home3-video-wrapper .video-area .content span {
    font-size: 12px;
  }
  
  /* Hide decorative shape on mobile to reduce clutter */
  .home3-video-wrapper .banner-vector {
    display: none;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  /* Tablet video adjustments */
  .home3-video-wrapper .video-area {
    height: 350px !important;
  }
}

/* Extra small devices (phones, less than 576px) */
@media (max-width: 576px) {
  .home3-banner-section .home3-video-wrapper {
    padding: 0; /* Add horizontal padding for smaller screens */
  }
  
  .home3-video-wrapper .video-area {
    height: 200px !important; /* Even smaller height for very small screens */
  }
}