Southside-Baptist-Church-Website/assets/scss/layouts/_navmenu.scss

// main: ../main.scss
/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/* Desktop Navigation */
@media (min-width: 1200px) {
  .navmenu {
    padding: 0;

    ul {
      margin: 0;
      padding: 0;
      display: flex;
      list-style: none;
      align-items: center;
    }

    li {
      position: relative;
    }

    >ul>li {
      white-space: nowrap;
      padding: 0;
      margin: 0 2px;
    }

    a,
    a:focus {
      color: var(--nav-color);
      font-size: 14px;
      padding: 8px 16px;
      font-family: var(--nav-font);
      font-weight: 600;
      display: flex;
      align-items: center;
      justify-content: space-between;
      white-space: nowrap;
      transition: all 0.25s ease;
      position: relative;
      background: transparent;

      i {
        font-size: 10px;
        line-height: 0;
        margin-left: 6px;
        transition: transform 0.25s ease;
      }
    }

    >ul>li>a {
      border-bottom: 3px solid transparent;
      padding-bottom: 5px;
    }

    >ul>li>a:hover,
    >ul>li>.active,
    >ul>li>.active:focus {
      color: var(--nav-hover-color);
      border-bottom-color: var(--accent-color);
    }

    >ul>li:hover>a i {
      transform: rotate(180deg);
    }

    .dropdown {
      ul {
        margin: 0;
        padding: 0;
        background: var(--nav-dropdown-background-color);
        display: block;
        position: absolute;
        visibility: hidden;
        left: 0;
        top: calc(100% + 20px);
        opacity: 0;
        transition: all 0.3s ease;
        border-radius: 8px;
        z-index: 99;
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
        min-width: 200px;
        overflow: visible;

        &::before {
          content: "";
          position: absolute;
          top: -8px;
          left: 24px;
          width: 16px;
          height: 16px;
          background: var(--nav-dropdown-background-color);
          transform: rotate(45deg);
          border-radius: 3px 0 0 0;
        }

        li {
          min-width: 100%;

          &:first-child a {
            border-radius: 8px 8px 0 0;
          }

          &:last-child a {
            border-radius: 0 0 8px 8px;
          }

          &:only-child a {
            border-radius: 8px;
          }
        }

        a {
          padding: 12px 20px;
          font-size: 14px;
          font-weight: 500;
          color: var(--nav-dropdown-color);
          border-bottom: none;
          border-left: 3px solid transparent;

          i {
            font-size: 10px;
          }

          &:hover {
            color: var(--nav-dropdown-hover-color);
            background: color-mix(in srgb, var(--accent-color), transparent 92%);
            border-left-color: var(--accent-color);
          }
        }

        .active,
        .active:hover,
        li:hover>a {
          color: var(--nav-dropdown-hover-color);
          background: color-mix(in srgb, var(--accent-color), transparent 92%);
          border-left-color: var(--accent-color);
        }
      }

      &:hover>ul {
        opacity: 1;
        top: calc(100% + 8px);
        visibility: visible;
      }

      .dropdown {
        ul {
          top: -8px;
          left: auto;
          right: calc(100% + 12px);
          visibility: hidden;

          &::before {
            top: 16px;
            left: auto;
            right: -8px;
            transform: rotate(135deg);
          }
        }

        &:hover>ul {
          opacity: 1;
          top: -8px;
          right: calc(100% + 4px);
          visibility: visible;
        }
      }
    }
  }
}

/* Mobile Navigation */
@media (max-width: 1199px) {
  .mobile-nav-toggle {
    color: var(--nav-color);
    font-size: 22px;
    line-height: 0;
    margin-right: 10px;
    cursor: pointer;
    transition: all 0.3s;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: color-mix(in srgb, var(--default-color), transparent 92%);

    &:hover {
      background: color-mix(in srgb, var(--accent-color), transparent 88%);
      color: var(--accent-color);
    }
  }

  .navmenu {
    padding: 0;
    z-index: 9997;

    ul {
      display: none;
      list-style: none;
      position: absolute;
      inset: 60px 12px 12px 12px;
      padding: 16px;
      margin: 0;
      border-radius: 16px;
      background-color: var(--nav-mobile-background-color);
      border: none;
      box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
      overflow-y: auto;
      transition: 0.3s ease;
      z-index: 9998;
    }

    a,
    a:focus {
      color: var(--nav-dropdown-color);
      padding: 14px 16px;
      font-family: var(--nav-font);
      font-size: 15px;
      font-weight: 600;
      display: flex;
      align-items: center;
      justify-content: space-between;
      white-space: nowrap;
      transition: all 0.25s ease;
      border-radius: 10px;
      margin-bottom: 4px;

      i {
        font-size: 10px;
        line-height: 0;
        margin-left: 5px;
        width: 28px;
        height: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        background: color-mix(in srgb, var(--default-color), transparent 92%);
        transition: all 0.25s ease;

        &:hover {
          background: color-mix(in srgb, var(--accent-color), transparent 85%);
          color: var(--accent-color);
        }
      }
    }

    a:hover {
      background: color-mix(in srgb, var(--default-color), transparent 95%);
      color: var(--nav-dropdown-hover-color);
    }

    .active,
    .active:focus {
      background: color-mix(in srgb, var(--accent-color), transparent 90%);
      color: var(--nav-dropdown-hover-color);
    }

    .active i,
    .active:focus i {
      background: var(--accent-color);
      color: var(--contrast-color);
      transform: rotate(180deg);
    }

    .dropdown {
      ul {
        position: static;
        display: none;
        z-index: 99;
        padding: 8px;
        margin: 0 0 8px 12px;
        background-color: color-mix(in srgb, var(--default-color), transparent 96%);
        border-radius: 12px;
        transition: all 0.3s ease-in-out;
        box-shadow: none;
        inset: unset;

        a {
          padding: 12px 14px;
          font-size: 14px;
          font-weight: 500;
          margin-bottom: 2px;
        }

        ul {
          background-color: color-mix(in srgb, var(--default-color), transparent 94%);
          margin-left: 8px;
        }
      }

      >.dropdown-active {
        display: block;
      }
    }
  }

  .mobile-nav-active {
    overflow: hidden;

    .mobile-nav-toggle {
      color: #fff;
      position: absolute;
      font-size: 22px;
      top: 12px;
      right: 12px;
      margin-right: 0;
      z-index: 9999;
      background: rgba(255, 255, 255, 0.15);

      &:hover {
        background: rgba(255, 255, 255, 0.25);
        color: #fff;
      }
    }

    .navmenu {
      position: fixed;
      overflow: hidden;
      inset: 0;
      background: rgba(0, 0, 0, 0.7);
      backdrop-filter: blur(4px);
      transition: 0.3s ease;

      >ul {
        display: block;
      }
    }
  }
}

@media (min-width: 1200px) {
  .navmenu {

    a,
    a:focus {
      color: #fff;
    }

    >ul>li>a:hover,
    >ul>li>.active,
    >ul>li>.active:focus {
      color: #fff;
      border-bottom-color: #cc0000;
    }
  }
}

/* Listing Dropdown - Desktop */
@media (min-width: 1200px) {
  .navmenu .listing-dropdown {
    position: static;

    ul {
      margin: 0;
      padding: 10px;
      background: var(--nav-dropdown-background-color);
      box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
      position: absolute;
      top: 130%;
      left: 0;
      right: 0;
      visibility: hidden;
      opacity: 0;
      display: flex;
      transition: 0.3s;
      border-radius: 4px;
      z-index: 99;

      li {
        flex: 1;

        a,
        &:hover>a {
          padding: 10px 20px;
          font-size: 15px;
          color: var(--nav-dropdown-color);
          background-color: var(--nav-dropdown-background-color);
        }

        a:hover,
        .active,
        .active:hover {
          color: var(--nav-dropdown-hover-color);
          background-color: var(--nav-dropdown-background-color);
        }
      }
    }

    &:hover>ul {
      opacity: 1;
      top: 100%;
      visibility: visible;
    }
  }
}

/* Listing Dropdown - Mobile */
@media (max-width: 1199px) {
  .navmenu .listing-dropdown {
    ul {
      position: static;
      display: none;
      z-index: 99;
      padding: 10px 0;
      margin: 10px 20px;
      background-color: var(--nav-dropdown-background-color);
      border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
      box-shadow: none;
      transition: all .5s ease-in-out;

      ul {
        background-color: rgba(33, 37, 41, 0.1);
      }
    }

    >.dropdown-active {
      display: block;
      background-color: rgba(33, 37, 41, 0.03);
    }
  }
}

/* Extended Dropdown 1 - Desktop */
@media (min-width: 1200px) {
  .navmenu .extended-dropdown-1 {
    ul {
      min-width: 300px;
      padding: 20px 0;
      border-radius: 12px;
      box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
      border: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);

      li {
        min-width: auto;
        border-bottom: none;
        margin-bottom: 4px;

        &:last-child {
          margin-bottom: 0;
        }
      }

      a {
        padding: 16px 24px;
        display: flex;
        align-items: center;
        gap: 16px;
        font-size: 14px;
        font-weight: 500;
        color: var(--nav-dropdown-color);
        transition: all 0.3s ease;
        border-radius: 8px;
        margin: 0 12px;

        .icon-wrapper {
          width: 36px;
          height: 36px;
          border-radius: 8px;
          display: flex;
          align-items: center;
          justify-content: center;
          transition: all 0.3s ease;
          flex-shrink: 0;

          i {
            font-size: 16px;
            color: #ffffff;
            margin: 0;
          }

          &.bg-blue {
            background-color: #4285f4;
          }

          &.bg-purple {
            background-color: #9c27b0;
          }

          &.bg-orange {
            background-color: #ff9800;
          }

          &.bg-green {
            background-color: #4caf50;
          }

          &.bg-red {
            background-color: #f44336;
          }

          &.bg-teal {
            background-color: #009688;
          }
        }

        i.toggle-dropdown {
          width: auto;
          margin-left: auto;
          color: color-mix(in srgb, var(--default-color), transparent 40%);
          font-size: 12px;
        }

        span {
          flex: 1;
          font-weight: 500;
        }

        &:hover {
          color: var(--nav-dropdown-hover-color);
          background-color: color-mix(in srgb, var(--accent-color), transparent 95%);

          .icon-wrapper {
            transform: scale(1.1);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);

            &.bg-blue {
              background-color: color-mix(in srgb, #4285f4, #000000 15%);
            }

            &.bg-purple {
              background-color: color-mix(in srgb, #9c27b0, #000000 15%);
            }

            &.bg-orange {
              background-color: color-mix(in srgb, #ff9800, #000000 15%);
            }

            &.bg-green {
              background-color: color-mix(in srgb, #4caf50, #000000 15%);
            }

            &.bg-red {
              background-color: color-mix(in srgb, #f44336, #000000 15%);
            }

            &.bg-teal {
              background-color: color-mix(in srgb, #009688, #000000 15%);
            }
          }

          i.toggle-dropdown {
            color: var(--accent-color);
            transform: rotate(90deg);
          }
        }
      }
    }
  }
}

/* Extended Dropdown 1 - Mobile */
@media (max-width: 1199px) {
  .navmenu .extended-dropdown-1 {
    ul {
      background-color: var(--nav-dropdown-background-color);
      border-radius: 6px;
      padding: 12px 0;

      a {
        padding: 12px 20px;
        gap: 16px;

        .icon-wrapper {
          width: 32px;
          height: 32px;
          border-radius: 6px;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-shrink: 0;

          i {
            font-size: 14px;
            color: #ffffff;
            margin: 0;
          }

          &.bg-blue {
            background-color: #4285f4;
          }

          &.bg-purple {
            background-color: #9c27b0;
          }

          &.bg-orange {
            background-color: #ff9800;
          }

          &.bg-green {
            background-color: #4caf50;
          }

          &.bg-red {
            background-color: #f44336;
          }

          &.bg-teal {
            background-color: #009688;
          }
        }

        i.toggle-dropdown {
          width: 30px;
          height: 30px;
          margin-left: auto;
          background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
          border-radius: 50%;
          color: var(--accent-color);
          font-size: 12px;
          display: flex;
          align-items: center;
          justify-content: center;

          &:hover {
            background-color: var(--accent-color);
            color: var(--contrast-color);
          }
        }

        span {
          flex: 1;
          font-weight: 500;
        }

        &:hover {
          color: var(--nav-dropdown-hover-color);

          .icon-wrapper {
            transform: scale(1.05);

            &.bg-blue {
              background-color: color-mix(in srgb, #4285f4, #000000 15%);
            }

            &.bg-purple {
              background-color: color-mix(in srgb, #9c27b0, #000000 15%);
            }

            &.bg-orange {
              background-color: color-mix(in srgb, #ff9800, #000000 15%);
            }

            &.bg-green {
              background-color: color-mix(in srgb, #4caf50, #000000 15%);
            }

            &.bg-red {
              background-color: color-mix(in srgb, #f44336, #000000 15%);
            }

            &.bg-teal {
              background-color: color-mix(in srgb, #009688, #000000 15%);
            }
          }

          i.toggle-dropdown {
            background-color: var(--accent-color);
            color: var(--contrast-color);
          }
        }
      }

      .active i.toggle-dropdown {
        background-color: var(--accent-color);
        color: var(--contrast-color);
        transform: rotate(90deg);
      }
    }
  }
}

/* Extended Dropdown 2 - Desktop */
@media (min-width: 1200px) {
  .navmenu .extended-dropdown-2 {
    ul {
      min-width: 380px;
      padding: 12px;
      border-radius: 14px;
      box-shadow: 0 15px 50px rgba(0, 0, 0, 0.12);
      backdrop-filter: blur(10px);
      background-color: color-mix(in srgb, var(--nav-dropdown-background-color), transparent 5%);
      border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);

      li {
        min-width: auto;
        border-bottom: none;

        &:not(:last-child) {
          margin-bottom: 6px;
        }
      }

      a {
        padding: 14px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        color: var(--nav-dropdown-color);
        transition: all 0.25s ease;
        border-radius: 10px;
        background-color: transparent;
        position: relative;

        .menu-item-content {
          display: flex;
          align-items: center;
          gap: 14px;
          width: 100%;
        }

        .menu-icon {
          width: 42px;
          height: 42px;
          border-radius: 12px;
          display: flex;
          align-items: center;
          justify-content: center;
          transition: all 0.3s ease;
          flex-shrink: 0;
          position: relative;
          z-index: 1;

          &::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            border-radius: inherit;
            background: linear-gradient(135deg, var(--accent-color), color-mix(in srgb, var(--accent-color), #7644ff 80%));
            opacity: 0.15;
            z-index: -1;
            transition: all 0.3s ease;
          }

          i {
            font-size: 18px;
            color: var(--accent-color);
            margin: 0;
            transition: all 0.3s ease;
          }
        }

        .menu-text {
          display: flex;
          flex-direction: column;
          flex: 1;

          .menu-title {
            font-weight: 600;
            font-size: 15px;
            margin-bottom: 3px;
            color: var(--nav-dropdown-color);
            transition: color 0.3s ease;
          }

          .menu-description {
            font-size: 13px;
            color: color-mix(in srgb, var(--nav-dropdown-color), transparent 40%);
            font-weight: 400;
            transition: color 0.3s ease;
          }
        }

        .menu-badge {
          padding: 4px 10px;
          font-size: 11px;
          font-weight: 600;
          border-radius: 20px;
          letter-spacing: 0.5px;
          text-transform: uppercase;
          background-color: color-mix(in srgb, var(--accent-color), transparent 85%);
          color: var(--accent-color);
          margin-left: 12px;
          flex-shrink: 0;
          transition: all 0.3s ease;

          &.hot {
            background-color: color-mix(in srgb, #ff5722, transparent 85%);
            color: #ff5722;
          }

          &.updates {
            background-color: color-mix(in srgb, #4caf50, transparent 85%);
            color: #4caf50;
            min-width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 8px;
          }
        }

        &:hover {
          background-color: color-mix(in srgb, var(--accent-color), transparent 95%);

          .menu-icon {
            transform: translateY(-2px);

            &::before {
              opacity: 0, 3;
              box-shadow: 0 6px 15px color-mix(in srgb, var(--accent-color), transparent 75%);
            }

            i {
              color: color-mix(in srgb, var(--accent-color), #000000 10%);
            }
          }

          .menu-text {
            .menu-title {
              color: var(--nav-dropdown-hover-color);
            }

            .menu-description {
              color: color-mix(in srgb, var(--nav-dropdown-hover-color), transparent 30%);
            }
          }

          .menu-badge {
            transform: scale(1.05);

            &:not(.hot):not(.updates) {
              background-color: color-mix(in srgb, var(--accent-color), transparent 75%);
            }

            &.hot {
              background-color: color-mix(in srgb, #ff5722, transparent 75%);
            }

            &.updates {
              background-color: color-mix(in srgb, #4caf50, transparent 75%);
            }
          }
        }
      }
    }
  }
}

/* Extended Dropdown 2 - Mobile */
@media (max-width: 1199px) {
  .navmenu .extended-dropdown-2 {
    ul {
      background-color: var(--nav-mobile-background-color);
      border-radius: 10px;
      padding: 10px;

      li:not(:last-child) {
        margin-bottom: 5px;
      }

      a {
        padding: 12px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .menu-item-content {
          display: flex;
          align-items: center;
          gap: 12px;
          width: 100%;
        }

        .menu-icon {
          width: 36px;
          height: 36px;
          border-radius: 10px;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-shrink: 0;
          position: relative;
          z-index: 1;

          &::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            border-radius: inherit;
            background: linear-gradient(135deg, var(--accent-color), color-mix(in srgb, var(--accent-color), #7644ff 80%));
            opacity: 0.15;
            z-index: -1;
          }

          i {
            font-size: 16px;
            color: var(--accent-color);
            margin: 0;
          }
        }

        .menu-text {
          display: flex;
          flex-direction: column;
          flex: 1;

          .menu-title {
            font-weight: 600;
            font-size: 14px;
            margin-bottom: 2px;
          }

          .menu-description {
            font-size: 12px;
            color: color-mix(in srgb, var(--nav-dropdown-color), transparent 40%);
          }
        }

        .menu-badge {
          padding: 3px 8px;
          font-size: 10px;
          font-weight: 600;
          border-radius: 20px;
          letter-spacing: 0.5px;
          text-transform: uppercase;
          background-color: color-mix(in srgb, var(--accent-color), transparent 85%);
          color: var(--accent-color);
          margin-left: 10px;
          flex-shrink: 0;

          &.hot {
            background-color: color-mix(in srgb, #ff5722, transparent 85%);
            color: #ff5722;
          }

          &.updates {
            background-color: color-mix(in srgb, #4caf50, transparent 85%);
            color: #4caf50;
            min-width: 22px;
            height: 22px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 6px;
          }
        }

        &:hover,
        &:active {
          background-color: color-mix(in srgb, var(--accent-color), transparent 95%);

          .menu-text {
            .menu-title {
              color: var(--nav-dropdown-hover-color);
            }
          }
        }
      }

      .active {
        background-color: color-mix(in srgb, var(--accent-color), transparent 95%);

        .menu-title {
          color: var(--nav-dropdown-hover-color);
        }
      }
    }
  }
}

/* Megamenu 1 - Desktop */
@media (min-width: 1200px) {
  .navmenu .megamenu-1 {
    position: static;

    /* Hide Mobile Megamenu in Desktop */
    .mobile-megamenu {
      display: none;
    }

    .desktop-megamenu {
      background-color: var(--nav-dropdown-background-color);
      box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.1);
      position: absolute;
      top: 130%;
      left: 0;
      right: 0;
      visibility: hidden;
      opacity: 0;
      transition: 0.3s;
      border-radius: 6px;
      z-index: 99;
      padding: 20px;
      display: flex;
      gap: 40px;
      max-height: 80vh;
      overflow-y: auto;
    }

    &:hover>.desktop-megamenu {
      opacity: 1;
      top: 100%;
      visibility: visible;
    }

    /* Main Sections */
    .megamenu-sections {
      flex: 2;
      display: flex;
      flex-direction: column;
      gap: 35px;

      .services-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 35px;

        .service-category {
          h4 {
            color: var(--heading-color);
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            gap: 8px;
            padding-bottom: 12px;
            border-bottom: 2px solid var(--accent-color);

            i {
              color: var(--accent-color);
              font-size: 18px;
            }
          }

          .category-items {
            display: flex;
            flex-direction: column;
            gap: 10px;

            a {
              color: var(--nav-dropdown-color);
              font-size: 14px;
              transition: all 0.3s;
              padding: 6px 0;
              position: relative;

              &:hover {
                color: var(--nav-dropdown-hover-color);
                padding-left: 12px;
              }

              &.view-all {
                color: var(--accent-color);
                font-weight: 500;
                margin-top: 8px;
                display: flex;
                align-items: center;
                gap: 6px;

                &:hover {
                  color: color-mix(in srgb, var(--accent-color), black 15%);

                  i {
                    transform: translateX(5px);
                  }
                }

                i {
                  transition: 0.3s;
                }
              }
            }
          }
        }
      }

      .industries-section {
        padding-bottom: 20px;

        h4 {
          color: var(--heading-color);
          font-size: 16px;
          font-weight: 600;
          margin-bottom: 20px;
          display: flex;
          align-items: center;
          gap: 8px;
          padding-bottom: 12px;
          border-bottom: 2px solid var(--accent-color);

          i {
            color: var(--accent-color);
            font-size: 18px;
          }
        }

        .industry-grid {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 15px;

          .industry-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 12px 15px;
            background-color: var(--surface-color);
            border-radius: 6px;
            transition: 0.3s;
            cursor: pointer;
            border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);

            &:hover {
              background-color: color-mix(in srgb, var(--accent-color), transparent 95%);
              border-color: var(--accent-color);
            }

            i {
              color: var(--accent-color);
              font-size: 16px;
            }

            span {
              color: var(--nav-dropdown-color);
              font-size: 13px;
              font-weight: 500;
            }
          }
        }
      }
    }

    /* Featured Content */
    .featured-content {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 30px;

      .featured-card {
        background-color: var(--surface-color);
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);

        .featured-image {
          height: 140px;
          overflow: hidden;

          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: 0.3s;
          }
        }

        .featured-info {
          padding: 20px;

          h5 {
            color: var(--heading-color);
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 8px;
          }

          p {
            color: var(--nav-dropdown-color);
            font-size: 13px;
            line-height: 1.5;
            margin-bottom: 15px;
          }

          .btn-featured {
            color: var(--accent-color);
            font-size: 13px;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 6px;
            transition: 0.3s;

            &:hover {
              color: color-mix(in srgb, var(--accent-color), black 15%);

              i {
                transform: translateX(3px);
              }
            }

            i {
              transition: 0.3s;
            }
          }
        }

        &:hover {
          .featured-image img {
            transform: scale(1.05);
          }
        }
      }

      .quick-links {
        h5 {
          color: var(--heading-color);
          font-size: 15px;
          font-weight: 600;
          margin-bottom: 18px;
          padding-bottom: 10px;
          border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
        }

        .quick-link-item {
          display: flex;
          align-items: flex-start;
          gap: 12px;
          padding: 12px 0;
          border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 95%);
          transition: 0.3s;
          cursor: pointer;

          &:last-child {
            border-bottom: none;
          }

          &:hover {
            padding-left: 10px;

            i {
              color: var(--accent-color);
            }
          }

          i {
            color: var(--nav-dropdown-color);
            font-size: 16px;
            margin-top: 2px;
            transition: 0.3s;
          }

          div {
            flex: 1;

            span {
              color: var(--nav-dropdown-color);
              font-size: 14px;
              font-weight: 500;
              display: block;
              margin-bottom: 2px;
            }

            small {
              color: color-mix(in srgb, var(--nav-dropdown-color), transparent 30%);
              font-size: 12px;
            }
          }
        }
      }
    }
  }
}

/* Megamenu 1 - Mobile */
@media (max-width: 1199px) {
  .navmenu .megamenu-1 {

    /* Hide Desktop Megamenu in Mobile */
    .desktop-megamenu {
      display: none;
    }

    .mobile-megamenu {
      position: static;
      display: none;
      z-index: 99;
      padding: 0;
      margin: 10px 20px;
      background-color: var(--nav-dropdown-background-color);
      border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
      box-shadow: none;
      transition: all .5s ease-in-out;
      border-radius: 6px;
      overflow: hidden;

      li {
        position: relative;
        border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);

        &:last-child {
          border-bottom: none;
        }

        a {
          padding: 14px 18px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          color: var(--nav-dropdown-color);
          font-size: 15px;
          transition: 0.3s;
          font-weight: 500;

          &:hover {
            color: var(--nav-dropdown-hover-color);
            background-color: color-mix(in srgb, var(--accent-color), transparent 95%);
          }
        }

        ul {
          padding: 0;
          background-color: color-mix(in srgb, var(--default-color), transparent 97%);

          li a {
            padding-left: 35px;
            font-size: 14px;
            font-weight: 400;
          }
        }
      }

      &.dropdown-active {
        display: block;
      }
    }
  }
}

/* Megamenu 2 - Desktop */
@media (min-width: 1200px) {
  .navmenu .megamenu-2 {
    position: static;

    /* Hide Mobile Megamenu in Desktop */
    .mobile-megamenu {
      display: none;
    }

    .desktop-megamenu {
      background-color: var(--nav-dropdown-background-color);
      box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.1);
      position: absolute;
      top: 130%;
      left: 0;
      right: 0;
      visibility: hidden;
      opacity: 0;
      transition: 0.3s;
      border-radius: 6px;
      z-index: 99;
      padding: 0;
      display: flex;
      max-height: 80vh;
      overflow: hidden;
    }

    &:hover>.desktop-megamenu {
      opacity: 1;
      top: 100%;
      visibility: visible;
    }

    /* Tab Navigation */
    .tab-navigation {
      width: 250px;
      background-color: color-mix(in srgb, var(--accent-color), transparent 97%);
      border-right: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
      padding: 25px 0;
      flex-shrink: 0;

      .nav-tabs {
        border: none;

        .nav-item {
          width: 100%;
          padding-left: 10px;

          .nav-link {
            display: flex;
            align-items: center;
            gap: 15px;
            padding: 18px 25px;
            border: none;
            width: 100%;
            background: transparent;
            transition: all 0.3s;
            border-left: 3px solid transparent;
            border-radius: 0;
            color: var(--nav-dropdown-color);

            &:hover {
              background-color: color-mix(in srgb, var(--accent-color), transparent 94%);
              padding-left: 30px;
            }

            &.active {
              background-color: var(--surface-color);
              border-left-color: var(--accent-color);

              i {
                color: var(--accent-color);
              }

              span {
                color: var(--accent-color);
                font-weight: 600;
              }
            }

            i {
              font-size: 20px;
              transition: 0.3s;
              flex-shrink: 0;
            }

            span {
              font-size: 15px;
              font-weight: 500;
              transition: 0.3s;
            }
          }
        }
      }
    }

    /* Tab Content */
    .tab-content {
      flex: 1;
      padding: 30px;
      overflow-y: auto;

      /* Content Grid Layout */
      .content-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 40px;
        margin-bottom: 30px;
        align-items: start;

        .product-section {
          h4 {
            color: var(--heading-color);
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 2px solid var(--accent-color);
          }

          .product-list {
            display: flex;
            flex-direction: column;
            gap: 5px;

            .product-link {
              display: flex;
              align-items: flex-start;
              gap: 12px;
              padding: 12px 15px;
              border-radius: 8px;
              transition: all 0.3s;
              color: var(--nav-dropdown-color);

              &:hover {
                background-color: color-mix(in srgb, var(--accent-color), transparent 95%);
                transform: translateX(8px);

                i {
                  color: var(--accent-color);
                  transform: scale(1.1);
                }
              }

              i {
                color: color-mix(in srgb, var(--nav-dropdown-color), transparent 20%);
                font-size: 18px;
                transition: all 0.3s;
                min-width: 18px;
                flex-shrink: 0;
                margin-top: 1px;
              }

              div {
                flex: 1;
                min-width: 0;

                span {
                  display: block;
                  font-size: 14px;
                  font-weight: 500;
                  margin-bottom: 2px;
                  line-height: 1.3;
                }

                small {
                  color: color-mix(in srgb, var(--nav-dropdown-color), transparent 40%);
                  font-size: 12px;
                  line-height: 1.3;
                  display: block;
                }
              }
            }
          }
        }
      }

      /* Featured Banner */
      .featured-banner {
        background: linear-gradient(135deg, var(--surface-color) 0%, color-mix(in srgb, var(--accent-color), transparent 98%) 100%);
        border-radius: 10px;
        padding: 25px;
        border: 1px solid color-mix(in srgb, var(--accent-color), transparent 90%);

        .banner-content {
          display: flex;
          align-items: center;
          gap: 20px;

          .banner-image {
            width: 80px;
            height: 80px;
            object-fit: cover;
            border-radius: 8px;
            flex-shrink: 0;
          }

          .banner-info {
            flex: 1;
            min-width: 0;

            h5 {
              color: var(--heading-color);
              font-size: 16px;
              font-weight: 600;
              margin-bottom: 6px;
              line-height: 1.3;
            }

            p {
              color: var(--nav-dropdown-color);
              font-size: 13px;
              line-height: 1.5;
              margin-bottom: 15px;
            }

            .cta-btn {
              color: var(--accent-color);
              font-size: 14px;
              font-weight: 600;
              display: inline-flex;
              align-items: center;
              gap: 6px;
              transition: 0.3s;

              &:hover {
                color: color-mix(in srgb, var(--accent-color), black 15%);

                i {
                  transform: translateX(4px);
                }
              }

              i {
                transition: 0.3s;
              }
            }
          }
        }
      }

      /* Resources Layout */
      .resources-layout {
        .resource-categories {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 25px;
          align-items: start;

          .resource-category {
            background-color: var(--surface-color);
            padding: 25px;
            border-radius: 10px;
            border: 1px solid color-mix(in srgb, var(--default-color), transparent 92%);
            transition: all 0.3s;

            &:hover {
              box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
              transform: translateY(-2px);
              border-color: var(--accent-color);
            }

            i {
              color: var(--accent-color);
              font-size: 24px;
              margin-bottom: 15px;
              display: block;
            }

            h5 {
              color: var(--heading-color);
              font-size: 15px;
              font-weight: 600;
              margin-bottom: 8px;
              line-height: 1.3;
            }

            p {
              color: var(--nav-dropdown-color);
              font-size: 13px;
              line-height: 1.5;
              margin-bottom: 15px;
            }

            .resource-link {
              color: var(--accent-color);
              font-size: 13px;
              font-weight: 500;
              display: inline-flex;
              align-items: center;
              gap: 5px;
              transition: 0.3s;

              &:hover {
                color: color-mix(in srgb, var(--accent-color), black 15%);

                i {
                  transform: translateX(3px);
                }
              }

              i {
                transition: 0.3s;
              }
            }
          }
        }
      }
    }
  }
}

/* Megamenu 2 - Mobile */
@media (max-width: 1199px) {
  .navmenu .megamenu-2 {

    /* Hide Desktop Megamenu in Mobile */
    .desktop-megamenu {
      display: none;
    }

    .mobile-megamenu {
      position: static;
      display: none;
      z-index: 99;
      padding: 0;
      margin: 10px 20px;
      background-color: var(--nav-dropdown-background-color);
      border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
      box-shadow: none;
      transition: all .5s ease-in-out;
      border-radius: 6px;
      overflow: hidden;

      li {
        position: relative;
        border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);

        &:last-child {
          border-bottom: none;
        }

        a {
          padding: 14px 18px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          color: var(--nav-dropdown-color);
          font-size: 15px;
          transition: 0.3s;
          font-weight: 500;

          &:hover {
            color: var(--nav-dropdown-hover-color);
            background-color: color-mix(in srgb, var(--accent-color), transparent 95%);
          }
        }

        ul {
          padding: 0;
          background-color: color-mix(in srgb, var(--default-color), transparent 97%);

          li a {
            padding-left: 35px;
            font-size: 14px;
            font-weight: 400;
          }
        }
      }

      &.dropdown-active {
        display: block;
      }
    }
  }
}

/* Products Mega Menu 1 - Desktop */
@media (min-width: 1200px) {
  .navmenu .products-megamenu-1 {
    position: static;

    /*  Hide Desktop Mega Menu 1 in Desktop */
    .mobile-megamenu {
      display: none;
    }

    .desktop-megamenu,
    .active,
    .active:focus {
      background-color: var(--nav-dropdown-background-color);
    }

    .desktop-megamenu {
      box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.1);
      position: absolute;
      top: 130%;
      left: 0;
      right: 0;
      visibility: hidden;
      opacity: 0;
      transition: 0.3s;
      border-radius: 6px;
      z-index: 99;
      padding: 20px;
      display: flex;
      flex-direction: column;
      max-height: 80vh;
      overflow: hidden;
    }

    &:hover>.desktop-megamenu {
      opacity: 1;
      top: 100%;
      visibility: visible;
    }

    /* Bootstrap Tabs Navigation */
    .megamenu-tabs {
      margin-bottom: 15px;

      .nav-tabs {
        border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);

        .nav-item {
          margin-bottom: 0;
        }

        .nav-link {
          border: none;
          padding: 10px 20px;
          color: var(--nav-dropdown-color);
          font-weight: 500;
          font-size: 15px;
          transition: 0.3s;
          background-color: transparent;
          border-bottom: 2px solid transparent;

          &:hover {
            color: var(--nav-dropdown-hover-color);
            border-color: transparent;
          }

          &.active {
            color: var(--accent-color);
            background-color: transparent;
            border-bottom: 2px solid var(--accent-color);
          }
        }
      }
    }

    /* Tab Content */
    .megamenu-content {
      flex: 1;
      overflow-y: auto;
      padding-right: 5px;

      /* Hide scrollbar for Chrome, Safari and Opera */
      &::-webkit-scrollbar {
        width: 5px;
      }

      &::-webkit-scrollbar-track {
        background: color-mix(in srgb, var(--default-color), transparent 95%);
        border-radius: 10px;
      }

      &::-webkit-scrollbar-thumb {
        background: color-mix(in srgb, var(--default-color), transparent 80%);
        border-radius: 10px;
      }

      .tab-content {
        display: none;

        &.active {
          display: block;
        }
      }

      /* Category Grid */
      .category-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 25px;

        .category-column {
          background-color: color-mix(in srgb, var(--surface-color), var(--accent-color) 3%);
          border-radius: 8px;
          padding: 15px;
          transition: 0.3s;

          h4 {
            color: var(--heading-color);
            font-size: 16px;
            margin-bottom: 15px;
            font-weight: 600;
            padding-bottom: 10px;
            border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
            position: relative;

            &:after {
              content: '';
              position: absolute;
              bottom: -1px;
              left: 0;
              width: 40px;
              height: 2px;
              background-color: var(--accent-color);
            }
          }

          ul {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            flex-direction: column;

            li {
              margin-bottom: 10px;
              background-color: none !important;
              position: relative;
              display: flex;
              align-items: center;
              justify-content: start !important;
              width: 100%;

              &:last-child {
                margin-bottom: 0;
              }

              a {
                color: var(--nav-dropdown-color);
                font-size: 14px;
                transition: 0.3s;
                padding: 0 0 0 20px;
                display: block;
                position: relative;
                background-color: transparent;

                &:before {
                  content: '\F285';
                  font-family: 'bootstrap-icons';
                  position: absolute;
                  left: 0;
                  top: 2px;
                  font-size: 12px;
                  color: var(--accent-color);
                  opacity: 0.7;
                }

                &:hover {
                  color: var(--nav-dropdown-hover-color);
                  transform: translateX(3px);

                  &:before {
                    opacity: 1;
                  }
                }
              }
            }
          }

          .active {
            background-color: none;
            ;
          }
        }
      }

      /* Product Grid */
      .product-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
        padding-top: 10px;

        .product-card {
          background-color: var(--surface-color);
          overflow: hidden;

          &:hover {
            .product-image img {
              transform: scale(1.1);
            }
          }

          .product-image {
            height: 160px;
            position: relative;
            overflow: hidden;

            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
              transition: 0.5s;
            }

            .badge-new,
            .badge-sale {
              position: absolute;
              top: 10px;
              right: 10px;
              padding: 3px 8px;
              font-size: 11px;
              font-weight: 600;
              border-radius: 3px;
              z-index: 1;
            }

            .badge-new {
              background-color: #28a745;
              color: white;
            }

            .badge-sale {
              background-color: #dc3545;
              color: white;
            }
          }

          .product-info {
            padding: 15px;

            h5 {
              margin: 0 0 5px;
              font-size: 15px;
              font-weight: 600;
              color: var(--heading-color);
            }

            .price {
              color: var(--accent-color);
              font-weight: 600;
              margin-bottom: 10px;
              font-size: 14px;

              .original-price {
                text-decoration: line-through;
                color: color-mix(in srgb, var(--default-color), transparent 40%);
                margin-right: 5px;
                font-weight: normal;
              }
            }

            .btn-view {
              display: inline-block;
              padding: 5px 12px;
              background-color: color-mix(in srgb, var(--accent-color), transparent 85%);
              color: var(--accent-color);
              border-radius: 4px;
              font-size: 12px;
              font-weight: 500;
              transition: 0.3s;

              &:hover {
                background-color: var(--accent-color);
                color: var(--contrast-color);
              }
            }
          }
        }
      }
    }
  }
}

/* Products Mega Menu 1 - Mobile */
@media (max-width: 1199px) {
  .navmenu .products-megamenu-1 {

    /* Hide Desktop Mega Menu 1 in Mobile */
    .desktop-megamenu {
      display: none;
    }

    .mobile-megamenu {
      position: static;
      display: none;
      z-index: 99;
      padding: 0;
      margin: 10px 20px;
      background-color: var(--nav-dropdown-background-color);
      border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
      box-shadow: none;
      transition: all .5s ease-in-out;
      border-radius: 4px;
      overflow: hidden;

      li {
        position: relative;
        border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);

        &:last-child {
          border-bottom: none;
        }

        a {
          padding: 12px 15px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          color: var(--nav-dropdown-color);
          font-size: 15px;
          transition: 0.3s;

          &:hover {
            color: var(--nav-dropdown-hover-color);
            background-color: color-mix(in srgb, var(--default-color), transparent 97%);
          }
        }

        ul {
          padding: 0;
        }
      }

      &.dropdown-active {
        display: block;
      }
    }
  }
}

/* Products Mega Menu 2 - Desktop */
@media (min-width: 1200px) {
  .navmenu .products-megamenu-2 {
    position: static;

    /* Hide Mobile Mega Menu in Desktop */
    .mobile-megamenu {
      display: none;
    }

    .desktop-megamenu,
    .active,
    .active:focus {
      background-color: var(--nav-dropdown-background-color);
    }

    .desktop-megamenu {
      box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.1);
      position: absolute;
      top: 130%;
      left: 0;
      right: 0;
      visibility: hidden;
      opacity: 0;
      transition: 0.3s;
      border-radius: 6px;
      z-index: 99;
      padding: 10px 0 0 0;
      display: flex;
      flex-direction: column;
      max-height: 80vh;
      overflow: hidden;
    }

    &:hover>.desktop-megamenu {
      opacity: 1;
      top: 100%;
      visibility: visible;
    }

    /* Tabs Navigation */
    .megamenu-tabs {
      padding: 0;
      border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);

      .nav-tabs {
        border-bottom: none;
        display: flex;
        justify-content: center;

        .nav-item {
          margin: 0;
        }

        .nav-link {
          border: none;
          padding: 15px 30px;
          color: var(--nav-dropdown-color);
          font-weight: 600;
          font-size: 14px;
          transition: 0.3s;
          background-color: transparent;
          border-bottom: 2px solid transparent;
          letter-spacing: 0.5px;

          &:hover {
            color: var(--nav-dropdown-hover-color);
          }

          &.active {
            color: var(--accent-color);
            background-color: transparent;
            border-bottom: 2px solid var(--accent-color);
          }
        }
      }
    }

    /* Tab Content */
    .megamenu-content {
      flex: 1;
      overflow-y: auto;

      /* Hide scrollbar for Chrome, Safari and Opera */
      &::-webkit-scrollbar {
        width: 5px;
      }

      &::-webkit-scrollbar-track {
        background: color-mix(in srgb, var(--default-color), transparent 95%);
        border-radius: 10px;
      }

      &::-webkit-scrollbar-thumb {
        background: color-mix(in srgb, var(--default-color), transparent 80%);
        border-radius: 10px;
      }

      .tab-pane {
        padding: 25px;
      }

      /* Category Layout */
      .category-layout {
        display: flex;
        gap: 30px;
      }

      /* Categories Section */
      .categories-section {
        flex: 1;

        /* Category Headers */
        .category-headers {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 30px;
          margin-bottom: 15px;

          h4 {
            color: var(--heading-color);
            font-size: 16px;
            font-weight: 600;
            position: relative;
            margin: 0;
            padding-bottom: 10px;
            border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
          }
        }

        /* Category Links */
        .category-links {
          display: flex;
          flex-direction: column;
          gap: 12px;

          .link-row {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 30px;

            a {
              color: var(--nav-dropdown-color);
              font-size: 14px;
              transition: 0.3s;
              display: block;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              padding: 0;

              &:hover {
                color: var(--nav-dropdown-hover-color);
                transform: translateX(3px);
              }
            }
          }
        }
      }

      /* Featured Section */
      .featured-section {
        width: 300px;

        .featured-image {
          position: relative;
          height: 100%;
          background-color: #f5f5f5;
          border-radius: 6px;
          overflow: hidden;

          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            opacity: 0.9;
          }

          .featured-content {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 30px;

            h3 {
              color: var(--heading-color);
              font-size: 28px;
              font-weight: 700;
              margin-bottom: 20px;
              line-height: 1.2;
            }

            .btn-shop {
              display: inline-block;
              padding: 8px 20px;
              background-color: var(--accent-color);
              color: var(--contrast-color);
              border-radius: 4px;
              font-size: 14px;
              font-weight: 500;
              transition: 0.3s;
              width: fit-content;

              &:hover {
                background-color: color-mix(in srgb, var(--accent-color), black 15%);
                transform: translateY(-2px);
              }
            }
          }
        }
      }
    }
  }
}

/* Products Mega Menu 2 - Mobile */
@media (max-width: 1199px) {
  .navmenu .products-megamenu-2 {

    /* Hide Desktop Mega Menu in Mobile */
    .desktop-megamenu {
      display: none;
    }

    .mobile-megamenu {
      position: static;
      display: none;
      z-index: 99;
      padding: 0;
      margin: 10px 20px;
      background-color: var(--nav-dropdown-background-color);
      border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
      box-shadow: none;
      transition: all .5s ease-in-out;
      border-radius: 4px;
      overflow: hidden;

      li {
        position: relative;
        border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);

        &:last-child {
          border-bottom: none;
        }

        a {
          padding: 12px 15px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          color: var(--nav-dropdown-color);
          font-size: 15px;
          transition: 0.3s;

          &:hover {
            color: var(--nav-dropdown-hover-color);
            background-color: color-mix(in srgb, var(--default-color), transparent 97%);
          }
        }

        ul {
          padding: 0;
        }
      }

      &.dropdown-active {
        display: block;
      }
    }
  }
}

/* Products Mega Menu 3 - Desktop */
@media (min-width: 1200px) {
  .navmenu .products-megamenu-3 {
    position: static;

    /* Hide Mobile Mega Menu in Desktop */
    .mobile-megamenu {
      display: none;
    }

    .desktop-megamenu {
      background-color: var(--nav-dropdown-background-color);
      box-shadow: 0px 8px 30px rgba(0, 0, 0, 0.12);
      position: absolute;
      top: 130%;
      left: 0;
      right: 0;
      visibility: hidden;
      opacity: 0;
      transition: all 0.3s ease;
      border-radius: 8px;
      z-index: 99;
      max-height: 85vh;
      overflow-y: auto;
      border: 1px solid color-mix(in srgb, var(--default-color), transparent 92%);
    }

    &:hover>.desktop-megamenu {
      opacity: 1;
      top: 100%;
      visibility: visible;
    }

    .megamenu-container {
      padding: 30px;
      display: grid;
      grid-template-columns: 1fr 300px;
      grid-template-rows: auto auto;
      gap: 30px;
      min-height: 400px;
    }

    /* Category Grid */
    .category-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 25px;
      grid-row: 1 / -1;
    }

    .category-card {
      background-color: color-mix(in srgb, var(--default-color), transparent 97%);
      padding: 20px;
      border-radius: 6px;
      transition: all 0.3s ease;
      border: 1px solid color-mix(in srgb, var(--default-color), transparent 95%);

      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
        background-color: var(--surface-color);
      }

      .category-icon {
        width: 45px;
        height: 45px;
        background: linear-gradient(135deg, var(--accent-color), color-mix(in srgb, var(--accent-color), black 20%));
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 15px;

        i {
          font-size: 20px;
          color: var(--contrast-color);
        }
      }

      h4 {
        color: var(--heading-color);
        font-size: 16px;
        font-weight: 600;
        margin-bottom: 12px;
        margin: 0 0 12px 0;
      }

      .category-links {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin-bottom: 15px;

        a {
          color: var(--nav-dropdown-color);
          font-size: 13px;
          transition: all 0.3s ease;
          padding: 2px 0;
          border-radius: 3px;

          &:hover {
            color: var(--nav-dropdown-hover-color);
            padding-left: 8px;
            background-color: color-mix(in srgb, var(--accent-color), transparent 95%);
          }
        }
      }

      .view-all {
        color: var(--accent-color);
        font-size: 13px;
        font-weight: 500;
        display: flex;
        align-items: center;
        gap: 5px;
        transition: all 0.3s ease;

        &:hover {
          gap: 8px;
          color: color-mix(in srgb, var(--accent-color), black 15%);
        }

        i {
          font-size: 12px;
          transition: transform 0.3s ease;
        }

        &:hover i {
          transform: translateX(2px);
        }
      }
    }

    /* Featured Banner */
    .featured-banner {
      background: linear-gradient(135deg, color-mix(in srgb, var(--accent-color), transparent 95%), color-mix(in srgb, var(--accent-color), transparent 92%));
      border-radius: 8px;
      overflow: hidden;
      border: 1px solid color-mix(in srgb, var(--accent-color), transparent 90%);

      .banner-content {
        height: 100%;
        display: flex;
        flex-direction: column;
        position: relative;
        padding: 25px;
      }

      .banner-text {
        flex: 1;

        .badge {
          background-color: var(--accent-color);
          color: var(--contrast-color);
          padding: 4px 10px;
          border-radius: 12px;
          font-size: 11px;
          font-weight: 500;
          text-transform: uppercase;
          letter-spacing: 0.5px;
        }

        h3 {
          color: var(--heading-color);
          font-size: 20px;
          font-weight: 700;
          margin: 12px 0 8px 0;
          line-height: 1.3;
        }

        p {
          color: color-mix(in srgb, var(--default-color), transparent 30%);
          font-size: 13px;
          margin-bottom: 15px;
          line-height: 1.4;
        }

        .btn-banner {
          background-color: var(--accent-color);
          color: var(--contrast-color);
          padding: 8px 16px;
          border-radius: 5px;
          font-size: 13px;
          font-weight: 500;
          transition: all 0.3s ease;
          display: inline-block;

          &:hover {
            background-color: color-mix(in srgb, var(--accent-color), black 15%);
            transform: translateY(-1px);
          }
        }
      }

      .banner-image {
        position: absolute;
        bottom: 0;
        right: 15px;
        width: 80px;
        height: 80px;

        img {
          width: 100%;
          height: 100%;
          object-fit: contain;
          opacity: 0.8;
        }
      }
    }

    /* Quick Access */
    .quick-access {
      h5 {
        color: var(--heading-color);
        font-size: 14px;
        font-weight: 600;
        margin-bottom: 15px;
        margin: 0 0 15px 0;
        padding-bottom: 8px;
        border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 92%);
      }

      .quick-links {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;

        a {
          color: var(--nav-dropdown-color);
          font-size: 13px;
          display: flex;
          align-items: center;
          gap: 8px;
          padding: 6px 0;
          transition: all 0.3s ease;
          border-radius: 4px;

          &:hover {
            color: var(--nav-dropdown-hover-color);
            padding-left: 8px;
            background-color: color-mix(in srgb, var(--default-color), transparent 97%);
          }

          i {
            font-size: 14px;
            width: 16px;
          }
        }
      }
    }
  }
}

/* Products Mega Menu 3 - Mobile */
@media (max-width: 1199px) {
  .navmenu .products-megamenu-3 {

    /* Hide Desktop Mega Menu in Mobile */
    .desktop-megamenu {
      display: none;
    }

    .mobile-megamenu {
      position: static;
      display: none;
      z-index: 99;
      padding: 0;
      margin: 10px 20px;
      background-color: var(--nav-dropdown-background-color);
      border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
      box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
      transition: all .5s ease-in-out;
      border-radius: 6px;
      overflow: hidden;

      li {
        position: relative;
        border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 92%);

        &:last-child {
          border-bottom: none;
        }

        a {
          padding: 14px 18px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          color: var(--nav-dropdown-color);
          font-size: 15px;
          transition: all 0.3s ease;
          font-weight: 500;

          &:hover {
            color: var(--nav-dropdown-hover-color);
            background-color: color-mix(in srgb, var(--accent-color), transparent 95%);
          }
        }

        ul {
          padding: 0;
          background-color: color-mix(in srgb, var(--default-color), transparent 98%);

          li a {
            padding: 10px 35px;
            font-size: 14px;
            font-weight: 400;
          }
        }
      }

      &.dropdown-active {
        display: block;
      }
    }
  }
}