/* Nav Menu Styles (Desktop + Mobile) */

/* Desktop styles */
@media (min-width: 901px) {
  ul.main-nav {
    display: flex;
    flex-direction: row;
    align-items: center;
    list-style: none;
    gap: 2rem;
    margin: 0;
    padding: 0.5rem 2rem;
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(8px);
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.08);
    position: static !important;
    transition: box-shadow 0.3s, background 0.3s;
    z-index: 1 !important;
  }
  ul.main-nav li {
    position: relative;
    transition: transform 0.2s;
  }
  ul.main-nav li:hover {
    transform: scale(1.07);
    z-index: 2;
  }
  ul.main-nav a {
    color: var(--dark);
    text-decoration: none;
    font-weight: 500;
    font-size: 1.1rem;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    transition: background 0.2s, color 0.2s;
    display: block;
    position: relative;
    overflow: hidden;
  }
  ul.main-nav a::after {
    content: '';
    display: block;
    position: absolute;
    left: 1.5rem;
    right: 1.5rem;
    bottom: 0.5rem;
    height: 3px;
    background: linear-gradient(90deg, var(--primary), var(--accent));
    border-radius: 2px;
    transform: scaleX(0);
    transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
  }
  ul.main-nav a:hover::after,
  ul.main-nav li.open > a::after {
    transform: scaleX(1);
  }
  ul.main-nav a:hover,
  ul.main-nav li.open > a {
    background: #f5f6fa;
    color: #0052cc;
  }
  ul.main-nav .dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
    border-radius: 0 0 12px 12px;
    padding: 0.5rem 0;
    z-index: 100;
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
    transition: opacity 0.3s, transform 0.3s;
    list-style: none;
    margin: 0;
  }
  ul.main-nav .dropdown-menu li {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  ul.main-nav li.has-dropdown:hover > .dropdown-menu,
  ul.main-nav li.has-dropdown.open > .dropdown-menu {
    display: block;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  ul.main-nav .dropdown-menu a {
    padding: 0.75rem 1.5rem;
    color: #222f3e;
    font-size: 1rem;
    white-space: nowrap;
    border-radius: 6px;
  }
  ul.main-nav .dropdown-menu a:hover {
    background: #e9ecef;
    color: #0052cc;
  }
  .services .fade-in,
  .testimonials .fade-in,
  .about .fade-in,
  .testimonials .scale-in,
  .about .scale-in,
  .about .slide-in-left,
  .about .slide-in-right {
    opacity: 1 !important;
    transform: none !important;
  }
  .about-stats, .about-stats .stat-item {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Add spacing below nav menu for main content if needed */
@media (min-width: 901px) {
  main {
    margin-top: 6rem;
  }
}

/* Mobile styles */
@media (max-width: 900px) {
  ul.main-nav {
    display: none !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    background: #fff !important;
    border-radius: 0 0 16px 16px !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important;
    padding: 1rem 0.5rem !important;
    margin: 0 !important;
    position: static !important;
    width: 100% !important;
    transition: all 0.3s !important;
    z-index: 1000 !important;
  }
  ul.main-nav.open {
    display: flex !important;
  }
  .carousel {
    display: none !important;
  }
}