header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: url("images/grass.jpg") #f3b9b9;
  background-size: contain;
  width: 100%;
  height: 100px;
  padding: 0;
  position: relative;
  /*border-radius: 0.9rem;*/
}
header .logo img {
  width: 275px; /* Adjust the logo width */
  height: 100px;
}
/* ===========================
   MENUS STYLES
   =========================== */

/* Container for the top-level menu */
header .top-menu {
    list-style-type: none;       /* Remove default bullet points */
    margin: 0;
    padding: 0;
    display: flex;               /* Arrange menu items horizontally */
    position: absolute;          /* Position relative to header */
    bottom: 0;                  /* Align menu to bottom of header */
    border-top-left-radius: 0.5rem; /* Optional rounded corner for smooth integration */
}

/* Top-level menu links */
header .top-menu li a {
    display: block;               /* Make links fill the list item */
    padding: 1rem;                /* Space inside tabs */
    color: #eb1010;               /* Text color */
    background: #e6e2e2;          /* Background color for tabs */
    text-decoration: none;        /* Remove underline */
    font-weight: bold;
    border: 1px solid transparent; /* Transparent border for consistent sizing */
    border-radius: 0.5rem;        /* Rounded corners for main tabs */
    transition: background 0.3s, color 0.3s; /* Smooth hover transitions */
}

/* Each top-level menu item */
header .top-menu li {
    position: relative;           /* Needed for absolute positioning of submenus */
}

/* Submenu container */
header .top-menu li .sub-menu {
    display: none;                /* Hide submenus by default */
    position: absolute;           /* Position relative to parent li */
    z-index: 999;                 /* Ensure submenus appear on top */
    top: 100%;                   /* Position below the parent menu item */
    left: 50%;                   /* Start at horizontal center of parent */
    box-shadow: 2px 2px 10px rgba(0,0,0,0.1); /* Subtle shadow */
    margin: 0;
    padding: 0;
    list-style-type: none;        /* Remove default bullet points */
    width: 200px;                 /* Fixed width for submenu */
    border-radius: 0.3rem;        /* Smaller rounded corners for submenus */
    background-color: white;      /* White background for submenu */
}

/* Links inside submenus */
header .top-menu li .sub-menu a {
    color: green;
    padding: 0.25rem;
    text-align: center;
    display: block;               /* Fill the submenu width */
    text-decoration: none;
}

/* Hover effect on submenu links */
header .top-menu li .sub-menu a:hover {
    background-color: aqua;
    color: beige;
    /* padding left commented out intentionally */
}

/* Nested submenu positioning */
header .top-menu .sub-menu li .sub-menu {
    top: 0;                      /* Align top edges */
    left: 100%;                  /* Position to the right of parent submenu */
}

/* Show first-level submenu on hover of parent */
header .top-menu > .menu-item-has-children:hover > .sub-menu {
    display: block;
}

/* Show nested submenu on hover of submenu parent */
header .top-menu .sub-menu .menu-item-has-children:hover > .sub-menu {
    display: block;
}

/* Optional reset for nested lists */
header .top-menu > ul, 
header .top-menu > ul > li {
    list-style: none;
    padding: 0;
    margin: 0;
}


.woocommerce .custom-product-box {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  text-decoration: none;
  color: inherit;
  background-color: white;
  border: none;
  height: 160px;
  padding: 10px;
  box-sizing: border-box;
}
.woocommerce .custom-product-box .custom-product-image {
  flex-shrink: 0;
  width: auto;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.woocommerce .custom-product-box .custom-product-image img {
  max-width: 200px;
  max-height: 160px;
  height: auto;
  border-radius: 8px;
  -o-object-fit: cover;
     object-fit: cover;
}
.woocommerce .custom-product-box .custom-product-content {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  flex-grow: 1;
}
.woocommerce .custom-product-box .custom-product-content h2 {
  margin: 0 0 8px 0;
  font-size: 18px;
  line-height: 1.2;
  color: #222;
}
.woocommerce .custom-product-box .custom-product-content .woocommerce-product-details__short-description {
  font-size: 14px;
  line-height: 1.4;
  color: #ddd;
  background-color: #000;
  padding: 8px;
  border-radius: 4px;
  margin: 0;
}
.woocommerce .breadcrumb {
  background: transparent;
  font-size: 30px;
  font-weight: 600;
  font-family: cursive;
  margin-bottom: 10px;
  color: yellow;
}
.woocommerce .breadcrumb a {
  color: yellow;
  text-decoration: none;
}
.woocommerce .breadcrumb a:hover {
  text-decoration: underline;
}
.woocommerce .breadcrumb span:not(.delimiter):last-child,
.woocommerce .breadcrumb .breadcrumb > :not(a):last-child {
  color: green;
  font-weight: bold;
}

body {
  background: #780f80;
}

#hero {
  height: 400px;
  width: 100%;
  background: url("images/download.jpg") #a2cf75;
  background-size: contain;
}

.content {
  background: url("images/dirt.JPG") black;
  border-style: ridge;
  border-width: 10px;
  border-color: gold;
  border-radius: 0 50px 0 50px;
  color: white;
  text-align: center;
  font-size: 20px;
  margin: 30px 0 35px 10px;
  padding: 25px 30px 30px 30px;
}

.widget {
  background: white;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

footer {
  position: absolute;
  height: 150px;
  width: 100%;
  background: #808080;
}