:root {

            --brand: #000000;

            --ink: #0f172a;

            --muted: #64748b;

             --bg: #ffffff; /*  Bg of the navbar itself */

            --ring: #e2e8f0; /*  line below navbar */

            --link_hover: #cbe3eb;  /*  Hover navbar link colour */

            --radius: 14px;

        }


        * {

            box-sizing: border-box;

            margin: 0;

            padding: 0;

        }


        body {

            

            color: var(--ink);

            background: var(--bg);

        }


        /* Desktop Navbar */

.navbar {
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

  display: flex;
  align-items: center;
  justify-content: space-between;

  /* keep your nice spacing */
  padding: 1.25rem 2rem;

  background: var(--bg);
  border-bottom: 1px solid var(--ring);
  position: sticky;
  top: 0;
  z-index: 50;

  /* container-like centering */
  max-width: 1280px; /* same as Tailwind’s max-w-screen-xl */
  margin: 0 auto;
  border-bottom: 1px solid #e5e7eb; /* optional, already have one above */
}


/* Full-width navbar background */
.navbar {
  width: 100%;
  background: var(--bg, #ffffff);
  border-bottom: 1px solid var(--ring, #e5e7eb);
  position: sticky;
  top: 0;
  z-index: 100;
}

/* Centered inner container */
.navbar-inner {
  max-width: 1280px;         /* same as Tailwind's max-w-screen-xl */
  margin: 0 auto;            /* center horizontally */
  padding: 1.25rem 2rem;     /* inner spacing */
  display: flex;
  align-items: center;
  justify-content: space-between;
}



        .navbar-brand {

            font-size: 1.3rem;

            font-weight: 700;

            color: var(--ink);

            text-decoration: none;

            letter-spacing: -0.5px;

        }


        .nav-menu {

            display: flex;

            gap: 2.5rem;

            list-style: none;

            align-items: center;

        }


        .nav-item {

            position: relative;

        }


        .nav-link {

            text-decoration: none;

            color: var(--ink);

            font-weight: 600;

            font-size: 1rem;

            padding: 0.5rem 0.75rem;

            border-radius: 8px;

            transition: all 0.2s ease;

        }


        .nav-link:hover {

            background: var(--link_hover);

            color: var(--brand);

        }


        /* Communities Dropdown */

        .communities-trigger {

            display: flex;

            align-items: center;

            gap: 0.4rem;

            cursor: pointer;

        }


        .dropdown-arrow {

            width: 4px;

            height: 4px;

            border-right: 2px solid currentColor;

            border-bottom: 2px solid currentColor;

            transform: rotate(45deg);

            transition: transform 0.3s ease;

        }


        .nav-item.active .dropdown-arrow {

            transform: rotate(-135deg);

        }


        /* Mega Menu */

.mega-menu {
    position: absolute;
    top: 100%;
    
    /* 🛠️ FIX: Align the right edge of the mega menu to the right edge of the parent nav-item */
    right: 0; 
    
    /* ❌ IMPORTANT: Remove all 'left' properties and 'translateX' from 'transform' */
    transform: translateY(-10px); 
    
    /* ... rest of the properties ... */
    background: var(--bg);
    border: 1px solid var(--ring);
    border-radius: var(--radius);
    padding: 2rem;
    margin-top: 0.5rem;
    min-width: 1000px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    pointer-events: none;
    z-index: 200;
}



.nav-item.active .mega-menu {
    opacity: 1;
    visibility: visible;
    
    /* ❌ IMPORTANT: Remove all 'translateX' from 'transform' */
    transform: translateY(0);
    
    pointer-events: auto;
}



        .mega-menu-grid {
    display: grid;
    /* CHANGE THIS TO 3 COLUMNS */
    grid-template-columns: repeat(3, 1fr); 
    gap: 2rem;
}



        .mega-menu-column {

            display: flex;

            flex-direction: column;

            gap: 1rem;

        }


        .community-item {

            text-decoration: none;

            color: var(--ink);

            transition: all 0.2s ease;

            padding: 0.75rem;

            border-radius: 8px;

        }


        .community-item:hover {

            background: rgba(255, 204, 201, 0.15);

            transform: translateX(4px);

        }


        .community-name {

            font-weight: 700;

            font-size: 0.95rem;

            color: var(--ink);

            margin-bottom: 0.25rem;

        }


        .community-desc {

            font-size: 0.8rem;

            color: var(--muted);

            line-height: 1.3;

        }


        /* Mobile Menu */

        .mobile-menu-toggle {

            display: none;

            flex-direction: column;

            gap: 5px;

            cursor: pointer;

            background: none;

            border: none;

            padding: 0.5rem;

        }


        .mobile-menu-toggle span {

            width: 24px;

            height: 2px;

            background: var(--ink);

            border-radius: 2px;

            transition: all 0.3s ease;

        }


        .mobile-menu-toggle.active span:nth-child(1) {

            transform: rotate(45deg) translate(10px, 10px);

        }


        .mobile-menu-toggle.active span:nth-child(2) {

            opacity: 0;

        }


        .mobile-menu-toggle.active span:nth-child(3) {

            transform: rotate(-45deg) translate(7px, -7px);

        }


        .mobile-menu {

            display: none;

            flex-direction: column;

            gap: 1rem;

            position: fixed;

            top: 60px;

            left: 0;

            right: 0;

            background: var(--bg);

            border-bottom: 1px solid var(--ring);

            padding: 1.5rem 1.5rem;

            animation: slideDown 0.3s ease;

            max-height: calc(100vh - 60px);

            overflow-y: auto;

            z-index: 99;

        }


        @keyframes slideDown {

            from {

                opacity: 0;

                transform: translateY(-10px);

            }

            to {

                opacity: 1;

                transform: translateY(0);

            }

        }


        .mobile-menu.active {

            display: flex;

        }


        .mobile-nav-link {

            text-decoration: none;

            color: var(--ink);

            font-weight: 600;

            padding: 0.75rem;

            border-radius: 8px;

            transition: all 0.2s ease;

            display: block;

        }


        .mobile-nav-link:hover {

            background: var(--link_hover);

            color: var(--brand);

        }


        .mobile-communities-toggle {

            display: flex;

            align-items: center;

            justify-content: space-between;

            padding: 0.75rem;

            font-weight: 600;

            cursor: pointer;

            background: none;

            border: none;

            width: 100%;

            color: var(--ink);

            font-size: 0.95rem;

            font-family: Inter, system-ui, Arial, sans-serif;

        }


        .mobile-communities-toggle:hover {

            background: rgba(255, 204, 201, 0.15);

            border-radius: 8px;

        }


        .mobile-dropdown-arrow {

            width: 3px;

            height: 3px;

            border-right: 2px solid currentColor;

            border-bottom: 2px solid currentColor;

            transform: rotate(45deg);

            transition: transform 0.3s ease;

        }


        .mobile-communities-toggle.active .mobile-dropdown-arrow {

            transform: rotate(-135deg);

        }


        .mobile-communities-list {

            display: none;

            flex-direction: column;

            gap: 0.5rem;

            padding-left: 1rem;

            animation: slideDown 0.3s ease;

        }


        .mobile-communities-list.active {

            display: flex;

        }


        .mobile-community-item {

            text-decoration: none;

            color: var(--ink);

            padding: 0.75rem;

            border-radius: 8px;

            transition: all 0.2s ease;

        }


        .mobile-community-item:hover {

            background: rgba(255, 204, 201, 0.15);

            transform: translateX(4px);

        }


        .mobile-community-name {

            font-weight: 700;

            font-size: 0.9rem;

        }


        .mobile-community-desc {

            font-size: 0.75rem;

            color: var(--muted);

            margin-top: 0.2rem;

            line-height: 1.2;

        }


        /* Mobile mega menu */

        .mobile-mega-menu {

            display: none;

            flex-direction: column;

            gap: 1rem;

            padding-left: 1rem;

            animation: slideDown 0.3s ease;

        }


        .mobile-mega-menu.active {

            display: flex;

        }


        /* Responsive */

        @media (max-width: 768px) {

            .navbar {

                padding: 1rem 1.5rem;

                position: relative;

            }


            .navbar-brand {

                font-size: 1.1rem;

            }


            .nav-menu {

                display: none;

            }


            .mobile-menu-toggle {

                display: flex;

            }


         .mega-menu {
    position: absolute;
    top: 100%;
    /* 👇 REMOVE LEFT: 50% AND TRANSFORM: TRANSLATEX(-50%) */
    right: 0; /* Align the right edge of the menu with the right edge of the parent nav-item */
    
    background: var(--bg);
    border: 1px solid var(--ring);
    border-radius: var(--radius);
    padding: 2rem;
    margin-top: 0.5rem;
    min-width: 1000px; /* Kept the corrected width from the previous step */
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    opacity: 0;
    visibility: hidden;
    
    /* 👇 NEW TRANSFORM: Remove the -50% translation */
    transform: translateY(-10px);
    
    transition: all 0.3s ease;
    pointer-events: none;
    z-index: 200;
}


            .communities-item.active .mega-menu {

                transform: none;

            }

        }