@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap');

body {
    font-family: "Quicksand", serif;
    margin: 0;
    padding: 0;
    background-color: #FFFFFF; /*EEEBD0*/
}

.container {
    width: 80%;
    max-width: 1200px;
    margin: auto;
    padding: 10px;
}

.product {
    border: 5px solid #000; /*3px 1f1f1f*/
    background-color: #1f1f1f; /*a17c6b*/
    border-radius: 10px;
    padding: 10px;
    margin: 10px 0;
    display: flex;
    align-items: center;
    gap: 15px;
    color: white;
}

.product img {
    border-radius: 10px;
    width: 350px;
    /* Bigger default size for PC */
    height: 100%;
    object-fit: cover;
    flex-shrink: 0;
    margin-left: 20px;
    margin-right: 20px;
}

.cell.small-6.text-center {
    width: 500px;
    max-width: 100%;
    /* Ensures it doesn't overflow */
}

.accord-bar {
    padding: 5px;
    margin: 5px 0;
    border-radius: 5px;
    text-align: center;
    color: white;
}

.accord-box {
    width: 100%;
    margin: 5px 0;
}

.original-price {
    text-decoration: line-through;
    color: #999; 
}

.sale-price {
    color: rgb(202, 7, 7); /*rgb(202, 7, 7)*/
    font-weight: bold;
}

.price {
    color: white;
}

.banner {
    background: black; /*red*/
    color: white;
    text-align: center;
    font-size: 2em;
    font-weight: bold;
    padding: 20px;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .product img {
        width: 175px;
        height: 225px;
        margin-left: 0;
        margin-right: 0;
    }
}

@media (max-width: 768px) {
    .container {
        width: 90%;
        padding: 5px;
    }

    .product {
        flex-direction: column;
        text-align: center;
        padding: 15px;
    }

    .product img {
        width: 150px;
        height: 200px;
        margin-bottom: 10px;
        margin-left: 0;
        margin-right: 0;
    }

    .cell.small-6.text-center {
        width: 90%;
        /* Adjusts width for tablets */
    }
}

@media (max-width: 480px) {
    .product img {
        width: 100%;
        height: auto;
        margin-left: 0;
        margin-right: 0;
    }

    .cell.small-6.text-center {
        width: 100%;
        /* Full width on mobile */
    }
}

/* NAVBAR CSS FIX LATER */
nav {
    background-color: #f0f0f0;
    padding: 10px 0;
    position: sticky;
    top: 0;
    z-index: 100;
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 960px;
    margin: 0 auto;
    padding: 0 20px;
}

.logo {
    font-size: 1.5em;
    font-weight: bold;
    text-decoration: none;
    color: #333;
}

.navbar a {
    text-decoration: none;
}

.nav-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    transition: transform 0.3s ease-in-out; /* Add transition for smooth animation */
}

.nav-links li {
    margin-left: 20px;
}

.nav-links a {
    text-decoration: none;
    color: #333;
    transition: color 0.3s;
}

.nav-links a:hover {
    color: #007bff;
}

/* Mobile styles */
.menu-toggle { /* Style the hamburger icon */
    display: none; /* Hide by default on larger screens */
    font-size: 1.5em;
    cursor: pointer;
    color: #333;
}

@media (max-width: 768px) {
    .nav-links {
        flex-direction: column;
        text-align: center;
        position: fixed; /* Use fixed positioning for the menu */
        top: 60px; /* Adjust top based on your navbar height */
        left: 0;
        width: 100%;
        background-color: #f0f0f0;
        transform: translateY(-200%); /* Hide off-screen initially */
        z-index: 99; /* Ensure it's below the toggle but above other content */
    }

    .nav-links.active { /* Show the menu when active */
        transform: translateY(-8px);
    }

    .nav-links li {
        margin: 10px 0;
        margin-left: 0;
    }

    .menu-toggle {
        display: block; /* Show on smaller screens */
    }
}

.button {
    background-color: rgba(255, 255, 255, 0); /* Green */
    border: 2px solid #ce0000;
    color: black;
    padding: 16px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    transition-duration: 0.4s;
    cursor: pointer;
    border-radius: 10px;
}

.button:hover {
    background-color: #ce0000;
    color: white;
}

/* DROPDOWN STYLES */
/* Dropdown container style */
.nav-links li.dropdown {
  position: relative;
}

/* Dropdown menu styling */
.nav-links li .dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #f0f0f0;
  border: 2px solid #333;
  border-radius: 5px;
  list-style: none;
  padding: 0;
  margin: 0;
  min-width: 150px;
  z-index: 10;
}

/* Dropdown menu items */
.nav-links li .dropdown-menu li a {
  display: block;
  padding: 10px;
  color: #333;
  text-decoration: none;
}

.nav-links li .dropdown-menu li a:hover {
  background-color: #ddd;
}

/* Display dropdown on hover for desktop */
@media (min-width: 769px) {
  .nav-links li.dropdown:hover .dropdown-menu {
    display: block;
  }
}

/* Mobile: when .dropdown-menu.active is added via click */
.nav-links li .dropdown-menu.active {
  display: block;
}