/* Desktop hover underline + glow */
    .menu-item {
      position: relative;
      transition: all 0.3s ease;
    }

    .menu-item::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: -4px;
      width: 0;
      height: 2px;
      background: #0284c7;
      transition: width 0.3s ease;
    }

    .menu-item:hover::after {
      width: 100%;
    }

    .menu-item:hover {
      color: #0369a1;
      text-shadow: 0 0 8px rgba(3, 105, 161, 0.25);
    }

    /* Dropdown animation */
    .submenu {
      position: absolute;
      left: 0;
      margin-top: 0.5rem;
      background: #fff;
      border-radius: 0.5rem;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
      opacity: 0;
      visibility: hidden;
      transform: translateY(10px);
      transition: all 0.3s ease;
      z-index: 50;
    }

    .group:hover>.submenu {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }

    .submenu a {
      display: block;
      padding: 8px 16px;
      transition: all 0.3s ease;
      border-radius: 4px;
    }

    .submenu a:hover {
      background: #f0f9ff;
      color: #0284c7;
      box-shadow: 0 0 10px rgba(2, 132, 199, 0.15);
    }

    /* Mobile menu animation */
    .mobile-sub {
      max-height: 0;
      overflow: hidden;
      transition: all 0.4s ease-in-out;
    }

    .mobile-sub.open {
      max-height: 600px;
    }

    .rotate-180 {
      transform: rotate(180deg);
      transition: transform 0.3s ease;
    }

    /* Social icons + animation */
    .social-icon {
      transition: all 0.3s ease;
    }

    .social-icon:hover {
      transform: scale(1.2);
      color: #0284c7;
      text-shadow: 0 0 8px rgba(2, 132, 199, 0.3);
    }

    /* Soft pulse animation */
    .social-icon i:hover {
      animation: pulse 0.8s ease-in-out;
    }

    @keyframes pulse {
      0%, 100% {
        transform: scale(1);
        opacity: 1;
      }
      50% {
        transform: scale(1.2);
        opacity: 0.8;
      }
    }

    /* Brand hover colors */
    .fa-facebook-f:hover { color: #1877f2; }
    .fa-youtube:hover { color: #ff0000; }
    .fa-instagram:hover { color: #e4405f; }
    .fa-linkedin-in:hover { color: #0a66c2; }

    /* Mobile link hover beautiful effect */
    #mobile-menu a {
      display: block;
      padding: 8px 14px;
      border-radius: 6px;
      transition: all 0.3s ease;
    }

    #mobile-menu a:hover {
      background-color: #f0f9ff;
      color: #0284c7;
      border: 1px solid #bae6fd;
      box-shadow: 0 0 8px rgba(2, 132, 199, 0.15);
    }

    /* Nested submenu (desktop): show to the right of parent */
    .submenu li { position: relative; }
    .submenu .submenu {
      left: 100%;
      top: 0;
      margin-left: 0.1rem;
      transform: translateX(6px);
      opacity: 0;
      visibility: hidden;
      transition: all 0.18s ease;
      min-width: 10rem;
      z-index: 60;
    }

    /* show nested submenu when hovering its parent list item */
    .submenu li:hover > .submenu {
      opacity: 1;
      visibility: visible;
      transform: translateX(0);
    }

    /* Slightly smaller padding for nested items */
    .submenu .submenu a { padding: 6px 12px; }

    /* Arrow indicator for desktop parent links that have submenus */
    .has-submenu {
      position: relative;
      padding-right: 1rem;
    }

    .has-submenu::after {
      content: "\25BE"; /* small down-pointing triangle */
      display: inline-block;
      margin-left: 20px;
      font-size: 1.0em;
      transform-origin: 50% 45%;
      transition: transform 0.18s ease, opacity 0.18s ease;
      opacity: 0.9;
      position: relative;
      top: 0;
      color: #0369a1;
    }

    /* Rotate arrow when parent is hovered (submenu visible) */
    .group:hover > .has-submenu::after,
    .group:focus-within > .has-submenu::after {
      transform: rotate(-180deg);
      opacity: 1;
    }