.logo{
        /*#1d692f*/
        margin: 0;
        font-size: 24px;
        color: #333;
        height: auto;
        max-height:200px;
    }
    /* Menu Styles */
    .menu {
        display: flex;
        position: absolute;  /* Use absolute to keep it fixed in its place */
        align-items: center;
        justify-content: center;
        margin: 0 auto;
        width: max-content;  /* Fit the menu width to its content */
        left: 50%;  /* Position the menu in the center */
        transform: translateX(-50%);  /* Ensure it's perfectly centered */
        transition: all 0.5s ease;  /* Smooth transition for resizing */
    }
    .menu > * {
        flex-shrink: 1;  /* Allow items to shrink when the screen size reduces */
    }
    /* For Medium Screens (tablet) */
    @media (max-width: 1024px) {
        .menu {
            width: 80%;  /* Compress width to 80% for medium-sized devices */
        }
    }
    /* For Small Screens (mobile) */
    @media (max-width: 768px) {
        .menu {
            width: 70%;  /* Compress width to 70% for smaller screens */
        }
    }
    /* For Very Small Screens */
    @media (max-width: 480px) {
        .menu {
            width: 60%;  /* Compress width to 60% for very small screens */
        }
    }
    .menu a {
        color: #ffffff;
        text-decoration: none; /* Removed underline from menu items */
        font-size: 15px;
        padding: 7px;
        position: relative;
    }
    .menu-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .menu-section h3 {
        font-size: 1.2rem;
        margin-bottom: 10px;
        border-bottom: 1px dashed #ddd;
        padding-bottom: 5px;
        text-align: center;
        color: #800000;
    }
    /* Image Section */
    .image-section {
        text-align: center;
    }
    .image-section img {
        max-width: 100%;
        height: auto;
        border-radius: 4px;
    }
    /* Responsive Styles */
    @media (max-width: 768px) {
        .header {
            flex-wrap: wrap;
            padding: 10px;
        }
        .menu {
            flex-direction: column;
            width: 100%;
        }
        .menu a {
            font-size: 1rem;
            padding: 10px 0;
            text-align: center;
        }
        .menu-section {
            flex: 1 1 100%;
        }
    }
    .site-header {
        text-align: center;
        padding: 10px;  /* Decrease padding to reduce the height of the header */
        background-color: #970303;
    }
    .header-container {
        text-align: center;
    }
    .site-header .logo img {
        width: 260px;
        height: 140px;
        max-width: 500px;
        max-height: 150px;
        margin-top: -29px;
    }
    .header-container {
        display: flex;
        justify-content: center; /* Center everything in the container */
        align-items: center; /* Center vertically */
        width: 100%; /* Ensure it takes up the full width */
    }
    .site-header,
    .header {
        position: relative;
        z-index: 10;
        height: 100px; /* Fixed header height */
    }
    /*..... new changes in header........*/
    /* Initially show the logo in the site-header */
    .site-header .logo img {
        opacity: 1; /* Fully visible */
        transform: scale(1); /* Normal size */
    }
    /* Zoom-in animation for logo when it enters the header */
    /*@keyframes zoomInAnimation {*/
    /*    0% {*/
            /*transform: scale(0.5);  Start small */
            /*opacity: 0; Start hidden*/
    /*    }*/
    /*    100% {*/
            /*transform: scale(1); End at normal size */
            /*opacity: 1;  Fully visible */
    /*    }*/
    /*}*/
    
    /* Category Header (no changes here) */
    .header {
        background-color: #970303;
        color: #4a4e53;
        padding: 2px 22px; /* Maintain original padding */
        position: sticky;
        top: 0;
        z-index: 9999;  
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 16px;
        height: 50px;
        max-width: 1800px;
    }
    /* Menu Icons (no changes here) */
    .menu-icons {
        display: flex;
        gap: 10px;
        margin-left: auto;
        align-items: center;
    }
    .menu-icons i {
        font-size: 20px;
        color: white;
    }
    .header_category_image{
        height: 150px;
        width: 200px;
    }
    .header_category_image1{
        height: 300px;
        width: 200px;
        border-radius: 5px;
    }
     /*----- end of colour of sub-category and price in dropdown----*/
    /* Hamburger Menu */
    .hamburger {
        display: none;
        cursor: pointer;
        position: relative;
    }
    .hamburger div {
        width: 30px;
        height: 4px;
        background-color: #ffffff;
        margin: 6px 0;
        transition: 0.4s;
    }
    .hamburger h2 {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        color: #333;
        opacity: 0;
        transition: opacity 0.3s ease-out;
        text-align: center;
    }
    .hamburger.sticky h2 {
        opacity: 1;
    }
    /* Mobile Menu */
    .mobile-menu {
        display: none;
        flex-direction: column;
        gap: 15px;
        position: fixed;
        top: 0;
        right: 200px;
        left:0;
        background-color: #fff;
        width: 250px;
        height: 100vh;
        box-shadow: -2px 0px 4px rgba(0, 0, 0, 0.1);
        padding: 20px;
        z-index: 1000;
    }
    .mobile-menu a {
        color: black;
        text-decoration: none;
        font-size: 1.5rem;
        padding: 10px 0;
        text-align: left;
    }
    .mobile-menu a {
        color: black;
        text-decoration: none;
        font-size: 1.5rem;
        padding: 10px 0;
        text-align: left;
    }
    .mobile-menu a:hover {
        color: #007bff;
    }
    /* Close Button */
    .close-btn {
        position: absolute;
        top: 10px;
        right: 10px;
        font-size: 24px;
        cursor: pointer;
        color: #333;
    }
    /* Zoom-in Animation */
    @keyframes zoomInAnimation {
        0% {
            transform: scale(0.5);
            opacity: 0;
        }
        100% {
            transform: scale(1);
            opacity: 1;
        }
    }
    /*Responsive Styles */
    @media (max-width: 1024px) {
        .menu {
            display: none;
        }
        .hamburger {
            display: block;
        }
        .mobile-menu {
            display: none;
        }
    }
    @media (max-width: 768px) {
        .header {
            padding: 10px;
        }
        .menu {
            flex-direction: column;
            gap: 10px;
        }
        .menu a {
            padding: 15px 0;
            font-size: 1px;
            text-align: center;
        }
        .header .logo img {
            width: 40px;
            height: auto;
        }
        .image-section img {
            width: 100%;
        }
    }
    /* Show mobile menu when active */
    .mobile-menu.active {
        display: flex;
    }
    .mobile-menu.active {
        left: 0;
    }
    .mobile-menu-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 10px;
        border-bottom: 1px solid #ccc;
    }
    .menu-title {
        font-size: 20px;
        font-weight: bold;
    }
    .close-btn {
        font-size: 24px;
        cursor: pointer;
    }
    .main-link {
        display: block;
        padding: 12px 10px;
        font-weight: bold;
        color: #333;
        text-decoration: none;
        border-bottom: 1px solid #eaeaea;
    }
    .main-link:hover {
        background-color: #f5f5f5;
    }
    
    .mobile-category {
        margin-top: 5px;
    }
    .mobile-subcategory {
        display: none;
        padding-left: 15px;
        background: #f9f9f9;
        margin-bottom: 10px;
        border-left: 3px solid #eee;
    }
    .mobile-subcategory.active {
        display: block;
    }
    .mobile-subcategory ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    .mobile-subcategory li a {
        display: block;
        padding: 8px 0;
        color: #555;
        text-decoration: none;
        font-weight: normal;
    }
    .mobile-subcategory li a:hover {
        color: #c0841e;
    }
    /* CSS for Left Side Ticker with Marquee Animation */
    .ticker.left {
        position: fixed; /* Fixes the ticker in place */
        top: 2px; /* Adjust vertical position */
        left: 3px; /* Align it to the left side */
        width: 100%; /* Full width of the parent container */
        max-width: 320px; /* Restrict max width */
        height: 30px; /* Fixed height */
        overflow: hidden;
        z-index: 10; /* Ensure it appears above other elements */
        padding: 0 10px; /* Some padding inside the box */
        border-radius: 5px; /* Rounded corners */
    }
    .ticker.left ul {
        display: flex;
        position: absolute;
        animation: marquee-left 38s linear infinite; /* Marquee animation for left ticker */
    }
    .ticker.left li {
        padding: 5px 10px;
        white-space: nowrap;
        font-size: 14px;
        color: #333;
    }
    /* Marquee animation for left-side list items */
    @keyframes marquee-left {
        100% {
            transform: translateX(-100%); /* Start off-screen to the right */
        }
        0% {
            transform: translateX(100%); /* End off-screen to the left */
        }
    }
    /* CSS for Right Side Ticker with Marquee Animation */
    .ticker.right {
        position: fixed; /* Fixes the ticker in place */
        top: 2px; /* Adjust vertical position */
        right: 0; /* Align it to the right side */
        width: 100%; /* Full width of the parent container */
        max-width: 312px; /* Restrict max width */
        height: 30px; /* Fixed height */
        overflow: hidden;
        z-index: 10; /* Ensure it appears above other elements */
        padding: 0 10px; /* Some padding inside the box */
        border-radius: 5px; /* Rounded corners */
    }
    .ticker.right ul {
        display: flex;
        position: absolute;
        animation: marquee-right 38s linear infinite; /* Marquee animation for right ticker */
    }
    .ticker.right li {
        padding: 5px 10px;
        white-space: nowrap;
        font-size: 14px;
        color: #333;
    }
    /* Marquee animation for right-side list items */
    @keyframes marquee-right {
        100% {
            transform: translateX(-100%); /* Start off-screen to the left */
        }
        0% {
            transform: translateX(100%); /* End off-screen to the right */
        }
    }
    .container {
        max-width: 1800px;
        margin: auto;
        padding: auto;
    }
    /* Base container for both marquees */
    .marquee-container {
        position: absolute;
        top: 10px;
        width: 98%;
        overflow: hidden;
        white-space: nowrap;
        z-index: 999;
        display: flex;
        justify-content: space-between;
        padding: 0 10px;
    }
    /* Individual marquee wrapper */
    .marquee-box {
        width: 20%;
        overflow: hidden;
        white-space: nowrap;
        position: relative;
    }
    /* Left side marquee */
    .left-marquee {
        margin-left: 10px;
    }
    /* Right side marquee */
    .right-marquee {
        margin-right: 10px;
    }
    /* Marquee content style */
    .marquee-content {
        display: inline-block;
        white-space: nowrap;
        animation: marquee 20s linear infinite;
        font-size: 16px;
        color: #000;
    }
    /* Scrolling animation */
    @keyframes marquee {
        0% {
            transform: translateX(100%);
        }
        100% {
            transform: translateX(-100%);
        }
    }
    /* Media Queries for Responsiveness */
    .exclusive-deals {
        color: #ffffff;     /* Change this to your preferred color for "Exclusive Deals!" */
    }
    .new-arrivals {
        color: #ffffff;     /* Change this to your preferred color for "New Arrivals!" */
    }
    .special-discounts {
        color: #ffffff;     /* Change this to your preferred color for "Special Discounts!" */
    }
    /*css for dropdown of curency*/
    .currency-selector {
        position: absolute;
        top: 45px;                      /* Adjust top spacing */
        right: 20px;                   /* Align to right */
        z-index: 1000;
        background-color: transparent;
        padding: 10px;
        border-radius: 5px;
        box-shadow: none;
        display: flex;
        align-items: center;
        flex-wrap: wrap;              /* Allow wrapping on small screens */
    }
    /* Style for the currency buttons */
    .currency-button {
        background: transparent;
        color: #333;
        cursor: pointer;
        font-size: 16px;
        border: none;
        text-decoration: none;
        transition: all 0.3s ease;
    }
    /* INR button */
    .currency-button.inr {
        color: #008000;
    }
    /* USD button */
    .currency-button.usd {
        color: #3357FF !important;
    }
    /* Active/selected currency button styles */
    .currency-button.active {
        font-weight: bold;
        text-decoration: underline;
    }
    /* Currency separator */
    .currency-separator {
        font-size: 20px;
        color: #333;
        margin: 0 5px;
    }
    /*ending of css for dropdoen curency*/
    
    /*css for advertisement*/
    .logo_containers {
        width: 100%;
        height: 100%;
        display: flex;
        border-radius: 5px;
        position: absolute; /* or 'fixed' if you want it to stay while scrolling */
        top: -13px;           /* adjust vertically as needed */
        left: -240px;             /* stick to the left edge */
    }
    .logo_containers img {
        height: auto;
        width: 170px;
        position: relative; /* Enable 'top' to work */
        margin-left: 20px; 
        margin-top: 3px;
        max-width: 200px;
        max-height: 200px;
    }
    @keyframes zoomIn {
        from {
            transform: scale(0);
            opacity: 0;
        }
        to {
            transform: scale(1);
            opacity: 1;
        }
    }
    .logo_containers img.show {
        animation: zoomIn 1s ease-out forwards; /* changed from 0.3s to 1s and easing to ease-out */
    }
    .category-container {
        display: flex;
        width: 750px;       /* Compress container */
        text-align: center;
        transform: translate(0%, 7%);
    }
    .category-box {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        display: inline-block;  /* Keeps them in line */
        margin: auto;           /* Space between each category */
        position: relative;
    }
    .category-box:nth-child(n+7) {
        border: none;           /* No border for categories 7 and 8 */
    }
    .dropdown {
        display: none;
        position: absolute;     /* Keeps dropdown visible even when scrolling */
        background: white;
        border: 1px solid #ccc;
        padding: 10px;
        text-align: center;
        box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
        width: 580px;
        z-index: 1000;
        transform: translate(-1%, -8%);
    }
    .arrow {
        position: absolute;
        top: -8px;
        width: 0;
        height: 0;
        border-left: 7px solid transparent;
        border-right: 7px solid transparent;
        border-bottom: 8px solid #ccc; /* Arrow's filled part using black color */
    }
    .arrow::after {
        content: "";
        position: absolute;
        top: 2px;           /* Adjust to create border effect */
        left: -10px;
        width: 0;
        height: 0;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-bottom: 12px solid white; /* Background color to create border effect */
    }
    /* ✅ Ensure labels are directly above their respective sections */
    .dropdown-row {
        display: flex;
        justify-content: space-between;
        font-size: 16px;
        font-weight: bold;
        margin-bottom: 5px;
    }
    /* ✅ Align each label above its respective section */
    .dropdown-label {
        flex: 1;
        text-align: center;
        display: block;
    }
    /* ✅ Stack each label directly above its section */
    .dropdown-flex {
        display: flex;
        gap: 30px;      /* Keeps spacing */
        align-items: start;
        justify-content: space-between;
        text-align: center;
    }
    /* ✅ Ensure each section aligns properly */
    .dropdown-image-box,
    .sub-category,
    .price-section {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    /* ✅ Image Box Styling */
    .dropdown-image-box {
        width: 200px;       /* or set a specific width */
        height: 300px;      /* Set the height of the image box (adjust as needed) */
        overflow: hidden;   /* Ensures any part of the image that overflows the box is hidden */
    }
    /* Style for the image inside the dropdown box */
    .dropdown-image-box img {
        width: 100%;        /* Ensures the image fills the entire width of the box */
        height: 100%;       /* Ensures the image fills the entire height of the box */
        border-radius: 5px;
        object-fit: cover;  /* Ensures the image covers the entire box without distortion, cropping if needed */
        object-position: center; /* Keeps the image centered inside the box */
    }
    /* ✅ Sub-category section (vertical list) */
    .sub-category ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    .sub-category ul li {
        padding: 3px;
        margin-bottom: 9px;
        font-size: 14px;
    }
    .sub-category a {
        color: #003366; /* Replace with your desired color */
        text-decoration: none; /* Optional: removes underline */
    }
    /* ✅ Price Section beside Sub-Category */
    .price-section {
        background: lightgrey;
        padding: 10px;
        border-radius: 5px;
        width: 160px;
        height: 280px;      /* Ensures it takes the full height of the dropdown */
        display: flex;
        flex-direction: column;
        justify-content: flex-start; /* Aligns content properly */
    }
        .price-label {
            font-size: 14px;
            font-weight: bold;
            display: block;
            margin-bottom: 5px;
            color: #003366;
        }
        .price-section ul {
            list-style: none;
            padding: 0;
            margin: 0;
        } 
        .price-section ul li {
            padding: 5px;
            margin-bottom: 2px;
            font-size: 14px;
        }
        .price-section ul li a{
            color: #003366;
        }
        .sub-category ul li:hover,
        .price-section ul li:hover {
            background-color: lightblue; /* Change to any color you prefer */
            cursor: pointer;
        }
    .hamburger-logo {
        display: none;
        position: absolute;
        top: 20px;
        left: 60px; /* move right to avoid overlapping hamburger */
        width: 130px;
        height: auto;
    }
    /* Show logo by default on small screens */
    @media (max-width: 768px) {
        .hamburger-logo {
            display: block;
        }
    }
    .mobile-menu-header {
        position: sticky;
        top: 0;
        background: white;
        z-index: 10;
        transition: box-shadow 0.3s ease;
    }
    /* Add shadow on scroll */
    .mobile-menu-header.scrolled {
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
    }
    .search-container12 {
        position: relative;     /* Reference for positioning */
        width: 30px;            /* Fixed size for the container */
        height: 40px;           /* Matches the height of the icon */
        margin-right: 22px;
    }
    .search-icon {
        position: absolute;
        top: 50%;               /* Adjusted to provide more vertical space */
        left: -28%;             /* Adjusted to provide more horizontal space */
        transform: translate(-50%, -50%); /* Keeps the icon centered */
        width: 24px;
        height: 24px;
        fill: #003366;          /* Black color for the icon */
        cursor: pointer;
        z-index: 2;             /* Keep the icon above the input */
        transition: transform 0.3s ease; /* Optional animation for icon */
        margin: 5px;            /* Adds spacing around the icon */
    }
    .active .search-bar {
        position: absolute;
        top: 0;
        right: 51%;             /* Expand to the left of the icon */
        width: 0;               /* Hidden initially */
        height: 100%;
        overflow: hidden;       /* Hide content when collapsed */
        transition: width 0.3s ease; /* Smoothly expand width */
        z-index: 1;                 /* Place input below the icon */
        display: flex;
        align-items: center;
        background-color: white;    /* Input background */
        border: 1px solid #ccc; /* Optional border */
        border-radius: 20px; /* Rounded edges */
        padding-left: 10px; /* Space for text inside input */
        box-sizing: border-box;
    }
    .search-bar input {
        border: none;
        outline: none;
        font-size: 14px;
        width: 100%; /* Take full width when expanded */
        background: transparent; /* Blend with container */
        display:none;
    }
    .search-container12.active .search-bar {
        width: 171px; /* Expanded input width */
    }
    .search-icon {
        fill: #ffffff;
    }   
    .search-container12.active .search-icon {
        fill: #970303; 
        transform: translate(-50%, -50%) rotate(90deg); /* Optional icon animation */
    }
    /* Style for suggestions */
    #suggestions {
        list-style: none;
        padding: 0;
        margin: 0;
        position: absolute;
        background: white;
        border: 1px solid #ccc;
        width: 200px;
        max-height: 150px;
        overflow-y: auto;
        display: none;
    }
    #suggestions li {
        padding: 8px;
        cursor: pointer;
    }
    #suggestions li:hover {
        background: #f0f0f0;
    }
    .profile-menu {
        position: relative;
        display: inline-block;
        cursor: pointer;
        left:-8px;
        top: 4px; /* Moves the element up */
    }
    .profile-icon {
        display: flex;
        align-items: center;
        gap: 5px;
        margin-right: 22px;
    }
    .profile-icon svg {
        width: 29px;
        height: 29px;
        fill: #ffffff;
        transition: fill 0.5s ease;
    }
    .additional-menu-list {
        position: absolute;
        top: 120%;
        left: -74px;
        width: 150px;
        background: white;
        border: 1px solid #ccc;
        border-radius: 5px;
        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
        padding: 5px;
        z-index: 9999;
        display: none; /* Hidden by default */
    }
    .additional-menu.show {
        display: block;
    }
    /* Show menu when hovered */
    .profile-menu:hover .additional-menu-list {
        display: block;
        opacity: 1;
        transform: translateY(0);
    }
    /* Menu Items */
    .additional-menu-list li {
        display: flex;
        max-width: 165px;
        align-items: center;
        gap: 10px;
        padding: 10px;
        cursor: pointer;
        transition: background 0.2s;
        font-size: 14px;
        font-weight: 500;
        color: #dfa136; 
        margin-left: -35px;
    }
    .additional-menu-list ul li:hover {
        background-color: #f0f0f0; /* Light gray background on hover */
        border-radius: 3px;
    }
    .key-indicator {
        position: absolute;
        top: -8px;
        left: 50%;
        transform: translateX(-50%);
        width: 0;
        height: 0;
        border-left: 7px solid transparent;
        border-right: 7px solid transparent;
        border-bottom: 8px solid white;
    }
    /* Modal */
    #modal {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1000;
    }
    #modal-content {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: white;
        border-radius: 8px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        padding: 20px;
        width: 720px;
        text-align: center;
        z-index: 1000;
    }
    #modal-content h2 {
        margin: 0 0 15px;
    }
    #modal-content input {
        width: 100%;
        padding: 10px;
        margin-bottom: 10px;
        border: 1px solid #ccc;
        border-radius: 4px;
    }
    #modal-content button {
        width: 100%;
        padding: 10px;
        background-color: #007bff;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
    }
    #modal-content button:hover {
        background-color: #0056b3;
    }
    #modal-content a {
        color: #007bff;
        text-decoration: none;
    }
    #modal-content a:hover {
        text-decoration: underline;
    }
    .close {
        position: absolute;
        top: 10px;
        right: 10px;
        cursor: pointer;
        font-size: 18px;
        color: #333;
    }
    .cart {
        position: relative; /* Enables positioning for the cart count badge */
        display: inline-block; /* Keeps the cart inline */
        /*padding: -3px;  Add spacing inside the container */
        top: 2px; /* Moves the cart upwards */
    }
    /* Styling the SVG */
    .cart svg {
        width: 25px; /* Increase the size of the SVG */
        height: 25px; /* Maintain aspect ratio and increase height */
        fill: #ffffff; /* Ensure there’s no fill inside the shapes */
    }
    /* Styling the cart count badge */
    .cart-count {
        position: absolute; /* Position relative to the cart container */
        top: -8px; /* Place it at the top */
        right: -5px; /* Align to the right */
        background-color: #d4a949;
        color: #ffffff; /* White text */
        font-size: 13px; /* Smaller font size */
        padding: 0px 4px; /* Add padding for the badge */
        border-radius: 50%; /* Circular badge */
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    }
    .error-message {
        background-color: #ffdddd;
        color: #d8000c;
        padding: 10px;
        text-align: center;
        font-weight: bold;
        border: 1px solid #d8000c;
        margin-bottom: 10px;
        width: 100%;
    }