/**
 * ContactUs Page Menu Fix
 * 
 * This CSS focuses specifically on making the Contact page mobile menu
 * match the HomePage mobile menu exactly as shown in the screenshots.
 */

/* ===== DESKTOP MENU FIXES ===== */
@media (min-width: 992px) {
  /* Only shift the menu 30% to the left as requested */
  #header #header-wrap #primary-menu {
    margin-right: 30% !important;
  }
}

/* ===== MOBILE MENU FIXES ===== */
@media (max-width: 991px) {
  /* 1. Mobile menu structure */
  body.primary-menu-open #header #header-wrap #primary-menu {
    display: block !important;
    position: relative !important; /* Match HomePage's positioning */
    width: 100% !important;
    background-color: #333 !important;
    margin-top: 0 !important;
    top: 0 !important;
    left: 0 !important;
    border-top: 1px solid rgba(255,255,255,0.1) !important;
  }
  
  /* 2. Mobile menu items */
  body.primary-menu-open #primary-menu > ul > li {
    float: none !important;
    width: 100% !important;
    border-bottom: 1px solid rgba(255,255,255,0.1) !important; /* Bottom border instead of top */
    height: auto !important;
    margin: 0 !important;
  }
  
  /* 3. Menu item text styling */
  body.primary-menu-open #primary-menu > ul > li > a,
  body.primary-menu-open #primary-menu > ul > li > a > div {
    height: auto !important;
    line-height: 28px !important;
    padding: 14px 5px 14px 15px !important;
    font-size: 16px !important;
    color: #00c6ab !important; /* Teal color from screenshot */
    text-transform: uppercase !important;
    text-align: left !important;
  }
  
  /* 4. Right arrows */
  body.primary-menu-open #primary-menu ul li > a > i.icon-angle-down {
    position: absolute !important;
    right: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 50px !important;
    text-align: center !important;
    color: #00c6ab !important;
  }
  
  /* 5. Submenu styling */
  body.primary-menu-open #primary-menu ul ul {
    position: relative !important;
    width: 100% !important;
    background-color: rgba(0,0,0,0.15) !important;
    box-shadow: none !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  
  /* 6. Submenu items */
  body.primary-menu-open #primary-menu ul ul li {
    border-top: 1px solid rgba(255,255,255,0.1) !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  /* 7. Submenu links */
  body.primary-menu-open #primary-menu ul ul li a {
    padding: 10px 5px 10px 25px !important;
    font-size: 15px !important;
    color: #00c6ab !important;
    font-weight: 400 !important;
  }
}