.nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: relative;
        }

        .logo {
            font-size: 24px;
            font-weight: bold;
            color: #2c3e50;
            padding: 20px 0;
        }

        .nav-links {
            display: flex;
            list-style: none;
            gap: 18px;
        }

        /* .nav-links li {
            position: relative;
        } */

        .nav-links > li > a {
            color: #fff;
            text-decoration: none;
            display: inline-block;
            font-weight: 500;
            transition: color 0.3s;
            font-size: 16px;
        }

        .nav-links > li > a:hover {
            font-weight: 600;
        }

        .mega-menu {
            position: absolute;
            /* left: 0; */
            
            width: 900px;
            background: #fff;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
            border-radius: 0 0 4px 4px;
            padding: 20px 20px 30px;
            display: none;
            grid-template-columns: 1.5fr 3fr;
            gap: 50px;
            z-index: 1000;
            border-radius: 16px;
            margin-top: 30px;

        }

        .mega-menu.active {
            display: grid;
            /* animation: fadeIn 0.3s ease; */
        }

        .mega-categories {
            list-style: none;
            border-right: 1px solid #eee;
            padding-right: 10px;
        }

        .mega-category {
            padding: 12px 0px;
            cursor: pointer;
            margin-bottom: 5px;
            transition: background 0.3s;
            font-weight: 300;
            font-size: 14px;
            border-bottom: 1px solid #E2E2E24D;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .mega-category .activesvg{opacity: 0.4; line-height: 0;}

        .mega-category.active,
        .mega-category:hover {
            font-weight: 600;
            border-bottom: 2px solid #242424;
            color: #3B3B3B;
            
        }

        .mega-category.active .activesvg,
        .mega-category:hover .activesvg{
            opacity: 1;
        }

        .mega-subitems {
            list-style: none;
        }

        .mega-subitem {
            padding: 10px 0;
            cursor: pointer;
            transition: color 0.3s;
            border-bottom: 1px solid #E2E2E24D;
            font-size: 14px;
            font-weight: 300;
        }

        .mega-subitem a{
             border-bottom: 1px solid #E2E2E24D;
             padding-bottom: 10px;
             color: #3b3b3b;
        }

        .mega-subitem:hover,
        .mega-subitem.active {
            border-bottom: 2px solid #242424;
            font-weight: 600;
        }

        .mega-content .bnr-btn{margin-top: 10px;}
        

        /* .mega-subitem:last-child {
            border-bottom: none;
        } */

        .mega-content {
            padding-left: 20px;
            border-left: 1px solid #eee;
        }

        .mega-image {
            width: 100%;
            height: 180px;
            border-radius: 4px;
            overflow: hidden;
            margin-bottom: 15px;
        }

        .mega-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: opacity 0.3s;
            border-radius: 16px;
        }

        .mega-desc {
            font-size: 12px;
            color: #666;
            line-height: 1.6;
        }

        .hamburger {
            display: none;
            cursor: pointer;
            font-size: 24px;
        }

          .nav-main .close-nav {
            display: block;
            margin-left: auto;
            font-size: 24px;
            margin-bottom: 0px;
            cursor: pointer;
            position: absolute;
            right: 15px;
            z-index: 1234;
            top: 10px;
        }

        .main-nav-arrow{display: none;}
        /* .mega-menu-wrapper{padding-top: 20px;} */

        .mega-menu::before{content: ''; position: absolute; top: -20px; left: 22%; transform: translateX(-50%);  width: 0;
            height: 0;
            border-left: 30px solid transparent;
            border-right: 30px solid transparent;
            border-bottom: 50px solid white; /* Triangle color */
            border-radius: 16px;
            background: transparent;
        }

        .mega-menu::after{content: '';     position: absolute;
            top: -30px;
            left: 49%;
            transform: translateX(-50%);
            width: 100%;
            height: 50px;
            background: transparent;
        }


        .mega-category.active, .mega-category a{color: #3b3b3b;}
        
       /*After binding changes*/
        .nav-links .mega-parent{position: relative;}
        .mega-menu.active{left: 50%; transform: translateX(-50%);}
        .mega-menu.grandchild-empty{left: 50%; transform: translate(-50%, 0);}
 
        .mega-menu::before{left: 50%;}
        .grandchild-empty.active .mega-categories{border: 0;}

        @media (min-width: 1900px) {
            .nav-links > li > a{font-size: 18px; font-weight: 400;}
            .nav-links{gap: 30px;}
            .mega-menu{width: 1100px; padding: 20px;}
            .mega-menu{grid-template-columns: 1fr 2fr 1.5fr;}
            .mega-category, .mega-subitem{font-size: 16px;}
            .mega-desc{font-size: 16px;}

        }

        @media (max-width: 1600px) {
            .nav-links > li > a {
                font-size: 13px;
            }
        }

        @media (max-width: 1440px) {
            .nav-links > li > a {
                font-size: 12px;
            }
            .mega-menu{width: 750px;}
            .mega-category, .mega-subitem{font-size: 13px;}
        }

        @media (max-width: 1399px) {
           .mega-menu-wrapper{padding-top: 40px;}

        }
        @media (max-width: 1199px) {
            /* nav.nav{position: fixed;} */
            .nav-main{justify-content: space-between;}

        }

       /* Mobile Styles */
        @media (max-width: 1024px) {

             .mega-menu::before{display: none;}
             .mega-menu{margin-top: 0;}
            .hamburger {
                display: block;
                margin-right: 10px;
                order: -1;
            }

            .nav-main{width: 92%;         justify-content: flex-start;
        flex-wrap: nowrap;}

            .main-nav-arrow{display: block;}

                        .close-nav {
                display: block;
                position: absolute;
                top: 20px;
                right: 20px;
                cursor: pointer;
                font-size: 24px;
                color: #333;
                z-index: 1002;
            }

            .nav {
                position: fixed;
                top: 0;
                left: -100%;
                width: 80%;
                height: 100vh;
                background: #fff;
                transition: left 0.3s ease;
                z-index: 1000;
                overflow-y: auto;
                padding: 60px 20px 20px;
                padding: 20px;
                display: block;
                
            }

            .nav.active {
                left: 0;
            }

            .nav-links {
                flex-direction: column;
                gap: 0;
            }

            .nav-links > li > a {
                width: 100%;
                padding: 15px 0px;
                border-bottom: 1px solid #eee;
                color: #4d4d4d;
                display: flex;
                justify-content: space-between;
                align-items: center;
            }

            .mega-menu {
                position: static;
                display: none;
                width: 100%;
                box-shadow: none;
                grid-template-columns: 1fr;
                padding: 0;
                transform: none;
                left: auto;
            }

            .mega-menu.active {
                display: block;
            }

            .mega-categories {
                border-right: none;
                border-bottom: 1px solid #eee;
                padding: 0;
            }

            .mega-category {
                border-radius: 0;
                margin: 0;
                padding: 15px 20px;
                border-bottom: 1px solid #f5f5f5;
            }

            .mega-subitems {
                padding-right:15px;
                display: none;
            }

            .mega-subitems.active {
                display: block;
            }

            .mega-content {
                border-left: none;
                padding: 15px;
                border-top: 1px solid #eee;
                display: none;
            }

            .mega-content.active {
                display: block;
            }

            .close-nav {
                display: block;
                position: absolute;
                top: 20px;
                right: 20px;
                cursor: pointer;
                font-size: 24px;
            }

            .body-overlay {
                display: none;
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: rgba(0, 0, 0, 0.5);
                z-index: 999;
            }

            .body-overlay.active {
                display: block;
            }

            .mega-category.active span{transform: rotate(90deg);}

            header .last-item{right: 15px; position: absolute;}

            .mega-menu.active, .mega-menu.grandchild-empty{transform: none;}

            .main-nav-arrow{position: absolute;right: 0; top: 16px;}
           
        }

        /* Animations */
        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
               /* No Scroll Class */
        .no-scroll {
            overflow: hidden;
            height: 100%;
        }