.main-header {
        position: sticky;
        top: 0;
        z-index: 9999;
        background: #ffffff;
    }


    /* =========================================================
   VENDOR DROPDOWN
========================================================= */

    .vendor-mega-dropdown {
        position: static !important;
    }


    /* Vendor link */

    .vendor-main-link {
        display: flex !important;
        align-items: center;
        gap: 6px;
        position: relative;
        cursor: pointer;
    }


    /* Chevron */

    .vendor-chevron {
        font-size: 9px;
        transition: transform 0.25s ease;
    }


    /* =========================================================
   MEGA MENU
========================================================= */

    .vendor-mega-menu {

        position: absolute;

        top: 80%;
        left: 50%;

        transform: translateX(-50%) translateY(10px);

        width: min(770px, calc(100vw - 40px));

        background: #ffffff;

        border-radius: 0 0 12px 12px;

        padding: 28px 36px 22px;

        box-shadow:
            0 15px 45px rgba(0, 0, 0, 0.12);

        border-top: 2px solid #ed4264;

        opacity: 0;
        visibility: hidden;

        pointer-events: none;

        transition:
            opacity 0.2s ease,
            transform 0.2s ease,
            visibility 0.2s ease;

        z-index: 99999;
    }


    /* =========================================================
   INVISIBLE BRIDGE

   Ye bahut important hai.

   Cursor Vendors se menu ke andar jaate waqt
   menu close nahi hone dega.
========================================================= */

    .vendor-mega-menu::before {

        content: "";

        position: absolute;

        top: -15px;
        left: 0;

        width: 100%;
        height: 15px;

        background: transparent;

    }


    /* =========================================================
   SHOW MENU ON HOVER
========================================================= */

    .vendor-mega-dropdown:hover .vendor-mega-menu {

        opacity: 1;

        visibility: visible;

        pointer-events: auto;

        transform:
            translateX(-50%) translateY(0);

    }


    /* Chevron rotation */

    .vendor-mega-dropdown:hover .vendor-chevron {

        transform: rotate(180deg);

    }


    /* =========================================================
   MENU INNER GRID
========================================================= */

    .vendor-menu-inner {

        display: grid;

        grid-template-columns:
            1fr 1fr;

        column-gap: 70px;

    }


    /* =========================================================
   MENU ITEM
========================================================= */

    .vendor-menu-item {

        display: flex;

        align-items: center;

        gap: 16px;

        min-height: 47px;

        padding: 7px 0;

        color: #222222;

        text-decoration: none;

        font-size: 16px;

        font-weight: 500;

        transition:
            color 0.2s ease,
            transform 0.2s ease;

    }


    /* Icon */

    .vendor-menu-item i {

        width: 22px;

        min-width: 22px;

        text-align: center;

        color: #111111;

        font-size: 15px;

        transition:
            color 0.2s ease;

    }


    /* Item hover */

    .vendor-menu-item:hover {

        color: #ed4264;

        transform:
            translateX(4px);

    }


    /* Icon hover */

    .vendor-menu-item:hover i {

        color: #ed4264;

    }


    /* =========================================================
   FOOTER / CTA
========================================================= */

    .vendor-menu-footer {

        margin-top: 18px;

        padding-top: 18px;

        border-top:
            1px solid #e5e5e5;

        display: flex;

        align-items: center;

        justify-content: flex-end;

        gap: 18px;

        font-size: 14px;

        color: #555555;

    }


    /* Register button */

    .vendor-register-btn {

        display: inline-flex;

        align-items: center;

        padding: 10px 20px;

        border:
            1px solid #ed4264;

        border-radius: 30px;

        color: #ed4264;

        font-weight: 600;

        text-decoration: none;

        transition:
            all 0.2s ease;

    }


    /* Button hover */

    .vendor-register-btn:hover {

        background: #ed4264;

        color: #ffffff;

    }


    /* =========================================================
   DESKTOP ONLY
========================================================= */

    @media (min-width: 992px) {

        /*
       Keep mega menu relative to header.
    */

        .vendor-mega-dropdown {
            position: static !important;
        }

    }


    /* =========================================================
   MOBILE
========================================================= */

    @media (max-width: 991.98px) {

        .vendor-mega-dropdown {

            position: relative !important;

        }


        /* Mobile menu */

        .vendor-mega-menu {

            position: static;

            width: 100%;

            transform: none !important;

            box-shadow: none;

            border: 0;

            border-radius: 0;

            padding: 0 10px;

            opacity: 1;

            visibility: visible;

            pointer-events: auto;

            display: none;

        }


        /*
       Mobile par hover disable
    */

        .vendor-mega-dropdown:hover .vendor-mega-menu {

            display: none;

        }


        /* Mobile grid */

        .vendor-menu-inner {

            grid-template-columns: 1fr;

            gap: 0;

        }


        /* Mobile item */

        .vendor-menu-item {

            min-height: 42px;

            font-size: 14px;

            padding: 6px 5px;

        }


        /* Mobile footer */

        .vendor-menu-footer {

            justify-content: space-between;

            flex-wrap: wrap;

            padding-bottom: 15px;

        }

    }