/* Global Styles */
body {
    background: linear-gradient(250deg, #f6a97b, #8ab6f9, #1e3a8a);
    color: #ffffff;
    font-family: "Delius", serif;
    line-height: 1.6;
    font-weight: 400;
    font-style: normal;
    margin: 0;
    padding: 0;
}
/* Header */
header {
    /* background-color: #212121;*/
     color: #fff5e1;
     font-weight: 100;
     font-style: normal;
 }
 
 nav {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding:10px 25px 10px 10px;
 }
 
 nav .logo img { 
     width: 250px;
     height: 100px;
 }
 
 nav .nav-links ul {
     list-style: none;
     display: flex;
     gap: 9px;
 }
 
 nav .nav-links ul li {
     display: inline-block;
 }
 
 nav .nav-links ul li a {
     color: #000; /* Default color */
     text-decoration: none;
     font-size: 1.5rem;
     font-weight: 400;
     font-style: normal;
     transition: color 0.3s ease; /* Smooth transition effect */
 }
 
 nav .nav-links ul li a:hover {
     color: #fff; /* Red color on hover */
 }
 nav .login-signup a {
     color: #fff;
     text-decoration: none;
     font-size: 1rem;
     margin-right: 30px;
 }
 

/* Title Section */
.title-section {
    text-align: center;  
    padding-bottom: 25px;
}

.title-section h1 {
    font-size: 2.5rem;
    color: #fff;
}

.title-section p {
    font-size: 1.2rem;
}

.link-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 50px;
}

.link-card {
    background-color: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
    text-align: center;
    padding: 20px;
    width: 300px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.link-card:hover {
    transform: scale(1.05);
    box-shadow: 0 0 25px rgba(255, 255, 255, 0.5);
}

.link-card img {
    width: 100px;
    height: auto;
    margin-bottom: 10px;
    border-radius: 10px;
}

.link-card h3 {
    color: #000000;
    font-size: 1.5rem;
}

.link-card p {
    color: #000;
    font-size: 1rem;
    margin-bottom: 15px;
}

.link-card a {
    display: inline-block;
    flex-direction: column;
    background-color: #78B7D0;
    color: #000;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    font-size: 1rem;
}

.link-card a:hover {
    color: #ffffff;
    background-color: #16325B;
}

/* Common styles for all category pages */
.category-links {
    padding-bottom: 50px; /* Adds space below the last card */
}


.electronics-links {
    padding-bottom: 50px;
}

.clothing-links {
    padding-bottom: 50px;
}

.cosmetics-links {
    padding-bottom: 50px;
}

.accessories-links {
    padding-bottom: 50px;
}

.home-appliances-links {
    padding-bottom: 50px;
}

.beauty-links {
    padding-bottom: 50px;
}

.home-garden-links {
    padding-bottom: 50px;
}

.automotive-links {
    padding-bottom: 50px;
}

.property-links {
    padding-bottom: 50px;
}
.groceries-links{
    padding-bottom: 50px;
}

.education-links{
    padding-bottom: 50px;
}
.agriculture-links{
    padding-bottom: 50px;
}
.transport-links{
    padding-bottom: 50px;
}
.restaurant-links{
    padding-bottom: 50px;
}
.food-links{
    padding-bottom: 50px;
}
.entertainment-links{
    padding-bottom: 50px;
}
.health-links{
    padding-bottom: 50px;
}
.grocery-links{
    padding-bottom: 50px;
}

/* Container for the title and button */
.category-header {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 20px;
    position: relative;
}

/* Style for the category title */
.category-title {
    font-size: 28px;
    font-weight: bold;
    
}

.hamburger-menu {
    max-height: 450px; /* Limit height */
    overflow-y: auto;  /* Enable vertical scrolling */
    position: absolute;
    right: 20px; /* Adjust distance from the right */
    top: 50%;
    transform: translateY(-50%);
    font-size: 28px; /* Adjust size as needed */
    cursor: pointer;
}
.hamburger-menu:hover{
    color: #16325B;

}
.hamburger-active {
    transform: translateY(50px); /* Moves button down */
}

.hamburger-menu {
    max-height: 450px; /* Limit height */
    overflow-y: auto;  /* Enable vertical scrolling */
    scrollbar-width: thin; /* For Firefox */
  }
    
.hamburger-menu::-webkit-scrollbar-thumb {
    background-color: #f6a97b;
    border-radius: 3px;
  }
  
.hamburger-menu::-webkit-scrollbar-thumb:hover {
    background-color: #f6a97b;
  }
  
/* Dropdown menu */
/* Style for dropdown menu */
.dropdown-menu {
    display: none; /* Hide by default */
    position: absolute;
    top: 190px; /* Adjust based on your header height */
    right: 33px; /* Adjust based on your layout */
    background-color: white;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    width: 200px; /* Adjust width as needed */
    max-height: 480px; /* Set max height */
    overflow-y: auto; /* Enable scrolling */
    scrollbar-width: thin; /* For Firefox */
    z-index: 1000;
}

/* Optional scrollbar styling for Chrome/Safari */
.dropdown-menu::-webkit-scrollbar {
    width: 6px;
}

.dropdown-menu::-webkit-scrollbar-thumb {
    background-color: #f6a97b;
    border-radius: 3px;
}

.dropdown-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.dropdown-menu li {
    padding: 10px;
    border-bottom: 1px solid #ddd;
}

.dropdown-menu a {
    text-decoration: none;
    text-align: right;
    padding-right: 10px;
    color: black;
    display: block;
}

.dropdown-menu a:hover {
    background-color: #fbe4d8;
}

/* Show dropdown when active */
.show {
    display: block;
}

/* Position the dropdown below the button */
#dropdown-menu {
    position: absolute;
    top: 100%; /* Places it directly below the button */
    right: 0;
    background-color: white;
    width: 200px; /* Adjust width as needed */
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    overflow: hidden;
    display: none; /* Hidden by default */
    opacity: 0;
    transition: opacity 0.3s ease-in-out; /* Smooth fade-in effect */
}

/* Style for dropdown items */
#dropdown-menu a {
    display: block;
    padding: 12px 16px;
    color: black;
    text-decoration: none;
    border-bottom: 1px solid #ddd;
}

#dropdown-menu a:last-child {
    border-bottom: none;
}

#dropdown-menu a:hover {
    background-color: #f5f5f5;
}
#hamburger-btn {
    cursor: pointer;
    padding: 10px;
    color: white;
    border-radius: 5px;
    display: inline-block;
    transition: transform 0.3s ease-in-out;
}
/* Dropdown menu container */
.dropdown {
    position: absolute;
    background: white;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    overflow: hidden;
    width: 200px;
    
    /* Initially hidden */
    max-height: 0;
    opacity: 0;
    visibility: hidden;
    transition: max-height 0.4s ease-out, opacity 0.3s ease-out, visibility 0.3s ease-out;
}

/* When dropdown is open */
.dropdown.show {
    max-height: 500px;  /* Adjust height as needed */
    opacity: 1;
    visibility: visible;
}

/* Dropdown items */
.dropdown a {
    display: block;
    padding: 10px;
    color: black;
    text-decoration: none;
    transition: background 0.3s ease-in-out;
}

.dropdown a:hover {
    background: #ff6969;
    color: white;
}