@import url('https://fonts.googleapis.com/css2?family=Alata&family=Roboto+Condensed:wght@400;700&display=swap');

body {
            font-family: 'Roboto Condensed', Arial, sans-serif;
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        h1, h2, h3, h4, h5, h6 {
            font-family: 'Alata', sans-serif;
        }
        header {
            background:#000;

            position: relative;
        }
header #topitemimage {text-align:center; margin:0; padding:0}
header #topitemimage a {display:block; margin:0; padding:0; width:100%;}
header .topitemtitle2 {display:none;}

        .inner-content {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
        }
        #top-block {
            padding: 0.75rem 0;
            background-color: rgba(45, 45, 45, 0.7);
            color: white;
		  display:block;
		  position:absolute; top:0; left:0; width:100%;
        }
        #logo {
            font-size: 1.5rem;
            font-weight: bold;
            font-family: 'Alata', sans-serif;
        }
        #menu {
            display: flex;
            gap: 3rem;
        }
        #menu a {
            color: white;
            text-decoration: none;
            font-size: 1.25rem;
            display: flex;
            align-items: center;
        }
        #menu a:hover {
            text-decoration: underline;

        }
        footer {
            background-color: #2D2D2D;
            color: #ccc;
            padding: 2rem;
        }
        #footer-left {
            max-width: 40%;
            font-size: 1rem;
            line-height: 1.5rem;
            color:#ccc;
        }
        #footer-left img {
            margin-bottom: 1rem;
        }
        #footer-right {
            display: flex;
		  padding-left:4rem;
            gap: 2rem;
        }
        .footer-column {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }
        .footer-column.merged {
            flex: 2;
        }
        .footer-column.merged .links {
            display: flex;
            gap: 2rem;
        }
        .footer-column.merged .links div {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }
        footer h3 {
            font-size: 1rem;
            margin: 1.5rem 0 2rem;
            color:#76d5d9;
		  font-weight:normal
        }
footer ul {
  list-style:none;
  margin:0;
  padding:0;
}
footer li { width:50%; float:left; margin:0; padding:0 0 0.5rem 0;}

        .footer-column a {
            color: #ccc;
            text-decoration: none;
            text-transform: uppercase;
        }
        .footer-column a:hover {
            text-decoration: underline;
            color:#fff;
        }
        main {
            padding: 0;
        }
        .container {
            max-width: 1200px;
            margin: 2rem auto;
            display: flex;
            gap: 2rem;
            flex-wrap: wrap;
        }
        .container-left {
            flex: 1;
        }
        .container-right {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }
        .container-right h2 {
            font-size: 2rem;
            margin: 0;
        }
        .container-right .price {
            font-size: 2rem;
            color: #76d5d9;
            font-weight: bold;
        }
        .container-right .description {
            font-size: 1rem;
            color: #555;
        }
        .container-right .contact-btn {
            padding: 1rem 2rem;
            background-color: #76D5D9;
            color: #000;
            font-size:0.9rem;
            text-decoration: none;
            text-align: center;
            display: inline-block;
            width: fit-content;
            text-transform: uppercase;
        }
        .container-right .contact-btn:hover {
            background: #000;
            color: #76D5D9;
        }
        #powered {
            background-color: white;
            color: black;
            padding: 0.5rem;
        }
        #powered .inner-content {
            display: flex;
            justify-content: flex-end;
            align-items: center;
        }
        .heading {
            background-color:#2D2D2D;
            color: white;
            text-align: center;
            padding: 2rem;
            font-size: 1.75rem;
            font-family: 'Alata', sans-serif;
        }
        .grid {
            display: flex;
            justify-content: space-between;
            gap: 1rem;
            padding: 0;
		  flex-wrap: wrap;
        }
        .grid-item {
            display: flex;
            align-items: center;
            gap: 0;
            font-family: 'Roboto Condensed', Arial, sans-serif;
            flex: 1;
  box-sizing: border-box;
        }
        .grid-item .text {
            display: flex;
            flex-direction: column;
            text-align: left;
            padding-left:1rem
        }
        .grid-item .text .title {
            font-weight: bold;
            font-size: 1rem;
        }
        .grid-item .text .subtitle {
            font-size: 1rem;
            color: #fff;
        }


#gallerySecond {width:100% !important;display:block; height:auto; margin:0; padding:0; position:relative;}
#gallerySecond .imgFull {width: 100%;display: none;}
#gallerySecond:after {display:table; content:''; clear:both;}
#gallerySecond .current {width:100% !important; height:500px; background:#fff; margin:0; display:block; padding:0; position:relative; overflow:hidden;}
#gallerySecond .current img{width:auto !important;max-width:100% !important;position:absolute;margin:auto; padding:10px; max-height:100%; height:auto; left:0; right:0; top:0; bottom:0;}
#gallerySecond .previewImg:hover {cursor: pointer; border: 1px solid #76D5D9;}
#gallerySecond .current > input:checked + img {display: inline-block;}
#gallerySecond .current > input {visibility: hidden;position: absolute;}

.previewAll {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 equal columns */
  gap: 10px;
  padding: 10px;
}

.previewImg {
  border:1px solid transparent;
  width: 100%;
  height: 100px; /* You can adjust the height as needed */
  overflow: hidden;
  position: relative;
}

.previewImg img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ensures the image covers the area without distorting */
}

/* Container for the product grid */
.product {
  display: grid;
  grid-template-columns: repeat(5, 1fr); /* 5 products per row */
  gap: 20px; /* space between the items */
}

/* Style for the image container */
.prod .image {
  width: 100%;
  height: 200px; /* fixed height for image container */
  overflow: hidden; /* hide overflow */
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Style for the image itself */
.prod .image img {
  max-width: 100%; /* make sure image scales within the container */
  max-height: 100%; /* ensure image does not exceed the container height */
  object-fit: contain; /* preserve aspect ratio of the image */
}

/* Style for the title */
.prod .title {
  margin: 10px 0;
  font-weight: bold;
}

/* Style for the price */
.prod .price p {
  color: #333;
}

.prod a {color:#333; text-decoration:none;}
.prod a:hover {text-decoration:underline;}
.prod .price {font-weight:bold;}
.prod .btn {display:none;}


.categories .topitemholder {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
  padding:10px;
}
.categories .topitembox {position:relative;}
.categories .topitemtitle2 a {
    width: 100%;
    height: 100%;
    display: flex;              /* Use flexbox */
    align-items: center;        /* Vertical alignment */
    justify-content: center;    /* Horizontal alignment */
    position: absolute;
    left: 0;
  font-size:1.1rem; 
  text-decoration:none;
    top: 0;
    margin: 0;
  font-family: 'Alata', sans-serif;
  color:#fff;
  background:rgba(0,0,0,0.5);
    padding: 0;
    text-align: center;         /* Optional: centers multiline text */
}
.categories .topitemtitle2 a:hover {
  background: rgba(118,213,217,0.5);

}
.categories p {margin:0; padding:0;} 

.categories img {
  width: 100%;
  overflow: hidden; /* hide overflow */
  display: flex;
  justify-content: center;
  align-items: center;
}

header .topitemholder img {max-width:100%; height:auto;}



.show-menu {text-decoration:none; color:#fff; text-transform: uppercase; text-align:left; padding:0 10px 0 40px; cursor: pointer; display:none; position:relative; height:50px; line-height:50px;}
.show-menu:before {display: block;content: ""; border-top: 4px solid #fff; position: absolute; height: 5px; width: 30px;left: 10px; top: 16px;border-bottom: 4px solid #fff;border-top: 4px solid #fff;}
.show-menu:after {display: block; content: ""; background: #fff; position: absolute; height: 4px; width: 30px; left: 10px; top: 35px;}
#respCats,
#show-menu[type=checkbox] {display:none}
#show-menu[type=checkbox]:checked ~ #menu {display:block !important}


/* Responsiveness */
@media (max-width: 1024px) {
  .product {grid-template-columns: repeat(4, 1fr); /* 4 products per row on medium screens */}
}

@media (max-width: 900px) {
  .container {margin:2rem;}
  .container-left {order:2; flex: 1 1 100%;}
  .container-right {order:1; flex: 1 1 100%;}
  .categories .topitemholder { grid-template-columns: repeat(2, 1fr);}
  .product {grid-template-columns: repeat(2, 1fr); padding:0}
  .previewAll {padding:2rem 0 0;}
  .heading {padding:1rem;}
  .grid-item {flex: 1 1 calc(50% - 0.5rem); /* 2 per row with gap compensation */}
  #top-block {position:relative;}
  
  header .inner-content {flex-direction:column;}
  #logo {margin-left:2rem}
  .show-menu {display:block; margin:0px; position:absolute; right:1rem; top:0.5rem;}
#menu { display: none; min-height:inherit; border:none!important; margin: 0px auto!important; width: 100% !important; max-width: 100% !important;}
#show-menu[type=checkbox]:checked ~ #menu { display: block !important;}
  #menu {padding-top:2rem}
  #menu a {padding:0.5rem 2rem;}
}

@media (max-width: 768px) {
  .product {grid-template-columns: repeat(3, 1fr); /* 3 products per row on smaller screens */}
  #gallerySecond .current img {padding:0;}
  footer .inner-content {flex-direction: column;}
  #footer-left {max-width:100%;}
  #footer-right {padding:0;}
}

@media (max-width: 480px) {
  .container {margin:1rem;}
  #footer-right {flex-direction:column;}
  .grid-item {    flex: 1 1 100%; /* Stack vertically on very small screens */}
  .product {grid-template-columns: repeat(2, 1fr); /* 2 products per row on mobile */}
}