/* Secondary Navbar */
/* .secondary-navbar {
  background-color: #fff;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  padding: 0;
  position: relative;
} */

.secondary-navbar {
    /* position:sticky;           */
    top: 84px;                    /* distance from top */
    left: 0;
    width: 100%;
    z-index: 1030;             /* above other content */
    background-color: #757575;    /* white background */
    border-top: 1px solid #ddd;
    border-bottom: none;
    padding: 0;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1); /* optional shadow */
}


/* Secondary Navbar Sections */
.secondary-nav-sections {
  list-style: none;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center; /* center main headings */
  margin: 0 auto;
  padding: 0;
  gap:2px;
  white-space: nowrap;
  text-align: center;
  width: 100%;
}

/* Main nav items */
.secondary-nav-sections > li {
  position: relative;       /* for dropdowns */
  flex: none;               /* do NOT stretch */
  text-align: center;       /* center main headings */
}

/* Separator line between items */
.secondary-nav-sections li:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 10%;
  height: 80%;
  width: 1px;
  background-color:  #757575;
}

/* Top-level links (main headings) */
.secondary-nav-sections > li > a {
  display: block;
  padding: 12px 20px;
  color: #000;
  text-decoration: none;
  text-align: center;       /* center text */
  font-weight: 500;
  transition: color 0.3s;
}

.secondary-nav-sections > li > a:hover {
  color:white;               /* highlight main heading on hover */
}

/* Dropdown menu */
.secondary-nav-sections .dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: black;
  min-width: 100%;
  max-width: none;
  padding: 0;
  margin: 0;
  list-style: none;
  z-index: 1000;
  flex-direction: column;
  white-space: nowrap;
}

/* Show dropdown on hover */
.secondary-nav-sections li:hover > .dropdown {
  display: block;
}

/* Dropdown items left-aligned */
.secondary-nav-sections .dropdown li a {
  display: block;
  padding: 5px 15px;
  color: #fff;
  text-decoration: none;
  text-align: left;           /* LEFT align dropdown links */
  transition: background-color 0.3s, color 0.3s;
}

.secondary-nav-sections .dropdown li a:hover {
  background-color: #FDD000 !important;
  color: #000;
}

/* Add small arrow for dropdown parents */
.secondary-nav-sections li.has-dropdown > a::after {
  content: " ▼";
  margin-left: 5px;
  font-size: 10px;
}

/* Toggle button */
.secondary-toggler {
  display: none;
  border: none;
  background: none;
  outline: none;
  width: 50px;
  height: 50px;
}

.secondary-toggler .navbar-toggler-icon-custom {
  display: block;
  width: 35px;
  height: 4px;
  background-color: #333;
  position: relative;
}

.secondary-toggler .navbar-toggler-icon-custom::before,
.secondary-toggler .navbar-toggler-icon-custom::after {
  content: "";
  position: absolute;
  width: 25px;
  height: 4px;
  background-color: #333;
  left: 0;
}

.secondary-toggler .navbar-toggler-icon-custom::before {
  top: -10px;
}

.secondary-toggler .navbar-toggler-icon-custom::after {
  top: 10px;
}

/* Responsive */
@media (max-width: 992px) {
  .secondary-toggler {
    display: block;
    margin-bottom: 10px;
    margin-top: 40px;
  }

  .secondary-nav-sections {
    flex-direction: column;
    display: none; /* hidden by default on mobile */
  }

  .secondary-nav-sections.show {
    display: flex;
  }

  .secondary-nav-sections li {
    text-align: left;
    border-bottom: 1px solid #eee;
  }

  .secondary-nav-sections li:not(:last-child)::after {
    display: none;
  }

  .secondary-nav-sections .dropdown {
    position: relative; /* inline inside column */
    box-shadow: none;
    min-width: 100%;
    max-width: 100%;
  }

  .secondary-nav-sections li.has-dropdown > a::after {
    float: right;
  }
   .secondary-toggler {
    margin-top: 0 !important;
  }
}

/* ======================================== */
/* Tablet / iPad Screens: 760px to 1180px  */
/* ======================================== */
/* @media (min-width: 760px) and (max-width: 1180px) {
   
    header {
        padding-top: 20px;
        padding-bottom: 10px;
        position: relative;
        z-index: 10;
    }

   
    .secondary-toggler {
        display: block;
         margin-bottom: 10px;
        z-index: 20;
        margin-top: 20px !important;
       
    }

   
    .secondary-nav-sections {
        display: flex !important;   
        flex-direction: column;       
        justify-content: center;    
        position: relative;
        z-index: 20;
    }
    

    .secondary-nav-sections li {
        text-align: left;
        border-bottom: none;      
        margin-right: 15px;        
    }

    .secondary-nav-sections li.has-dropdown > a::after {
        float: none;               
        margin-left: 5px;
    }

    .secondary-nav-sections .dropdown {
        position: relative;
        box-shadow: none;
        min-width: 100%;
        max-width: 100%;          
    }

    
   
    .secondary-nav-sections li.has-dropdown:hover > .dropdown {
        display: block;       
        position: absolute;      
        top: 100%;               
        left: 0;
        background-color: #fff;  
        min-width: 100%; 
        max-width: 100%;       
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        z-index: 999;            
    }

   
    .secondary-nav-sections li.has-dropdown .dropdown li {
        display: block;
        border-bottom: 1px solid #eee;
        padding: 8px 15px;
    }

    .secondary-nav-sections li.has-dropdown .dropdown li a {
        color: #333;
        text-decoration: none;
        display: block;
        width: 100%;
    }

    .secondary-nav-sections li.has-dropdown .dropdown li a:hover {
        background-color: #ff0000;
    }

    
    .secondary-nav-sections {
        overflow: visible;
        position: relative;
    }
      
.product-card-container {
    position: fixed !important;
    top: 80px !important;
    left: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    padding: 20px 30px;
    z-index: 9999;
    
}

.product-card-container .card {
    width: 100% !important; 
    max-width: 1200px;
    margin: 0 auto;
}



   
    .product-card-container.active {
        display: block;
    }

   
} */

/* ======================================== */
/* Tablet / iPad Screens: 760px to 1180px  */
/* ======================================== */
@media (min-width: 760px) and (max-width: 1180px) {

    /* Show toggler */
    .secondary-toggler {
        display: block;             /* show toggle button */
        margin-top: 80px !important;
        margin-bottom: 10px;
        cursor: pointer;
        position: relative;
        z-index: 1036;              /* above header and nav */
    }

    /* Hide nav by default */
    .secondary-nav-sections {
        display: none;              /* hidden until toggled */
        flex-direction: column;     /* stack links vertically */
        position: absolute;         /* float above content */
        top: 84px;                  /* below header */
        left: 0;
        width: 100%;                /* full width */
        z-index: 1035;              /* above header */
        background-color: #fe0000;  /* same as navbar */
    }

    /* Show nav when toggler clicked */
    .secondary-nav-sections.show {
        display: flex;
    }

    /* Style nav items */
    .secondary-nav-sections li {
        text-align: left;
        border-bottom: 1px solid #eee;
        width: 100%;
    }

    .secondary-nav-sections li:not(:last-child)::after {
        display: none;              /* hide separators on mobile/tablet */
    }

    /* Dropdown inside nav */
    .secondary-nav-sections .dropdown {
        position: relative;         /* inline inside column */
        min-width: 100%;
        max-width: 100%;
        box-shadow: none;
        flex-direction: column;
        white-space: nowrap;
    }

    /* Dropdown links */
    .secondary-nav-sections li.has-dropdown > a::after {
        float: right;               /* arrow on right */
    }

    .secondary-nav-sections li.has-dropdown .dropdown li {
        display: block;
        border-bottom: 1px solid #eee;
        padding: 8px 15px;
    }

    .secondary-nav-sections li.has-dropdown .dropdown li a {
        color: #333;
        text-decoration: none;
        display: block;
        width: 100%;
        text-align: left;
    }

    .secondary-nav-sections li.has-dropdown .dropdown li a:hover {
        background-color: #ff0000;
        color: #fff;
    }

    /* Ensure nav doesn’t get hidden by parent */
    .secondary-nav-sections {
        overflow: visible;
    }

    /* Optional: full-width product card below navbar */
    .product-card-container {
        position: fixed !important;
        top: 84px !important;       /* match header height */
        left: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        padding: 20px 30px;
        z-index: 1037;               /* above nav & header */
        display: none;               /* hidden by default */
    }

    .product-card-container.active {
        display: block;
    }

    .product-card-container .card {
        width: 100% !important;
        max-width: 1200px;
        margin: 0 auto;
    }
    /* Make dropdown hidden by default */
.secondary-nav-sections .dropdown {
    display: none;
}

/* Make dropdown visible when clicked */
.secondary-nav-sections .dropdown.show {
    display: block !important;
}

}


/* upper corner left side */
/* .header-top-left {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 5px 20px;
  background-color: transparent;
  font-size: 14px;
}

.top-links a {
  color: #000;
  text-decoration: none;
  padding: 0 5px;
  transition: color 0.3s;
}

.top-links a:hover {
  color: red;
}

.separator {
  margin: 0 5px;
  color: #ccc;
} */

/* navbar buttons */
.navbar-buttons .btn-login,
.navbar-buttons .btn-register {
  font-size: 16px;
  padding: 10px 40px;
  font-weight: bold;
  border-radius: 5px;
  text-decoration: none;
  transition: all 0.3s;
  border-color: red;
}

.btn-login {
  background-color: #fff;
  color: #333;
  border: 1px solid #333;
}

.navbar-buttons {
  display: flex;
  gap: 50px;
}

.btn-login:hover {
  color: #fff;
}

.btn-register {
  background-color: rgb(192, 140, 72) !important;
  color: #fff;
  border: 1px solid red;
}

.btn-register:hover {
  background-color: #fff;
  color: red;
}

/* .header-top-left {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  padding: 0 20px;
  background-color: #000;
  z-index: 1100;
} */

body {
  padding-top: 80px;
}

/* .custom-navbar {
  margin-top: 40px;
} */

.top-links a {
  color: #fff;
  text-decoration: none;
  margin: 0 5px;
  transition: color 0.3s;
}

.top-links a:hover {
  color: red;
}

.separator {
  color: #ccc;
  margin: 0 5px;
}