_______________________________________
/* styles.css */
/* =============================== */
/* GLOBAL RESET + BASE STYLES     */
/* =============================== */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  padding-top: 140px;
  font-family: Arial, sans-serif;
  background: #ffffff;
  color: #222;
  line-height: 1.4;
  max-width: 1400px;
  margin: 0 auto;
}


/* =============================== */
/* 1. TOP BANNER                   */
/* =============================== */

.top-banner-section img {
  width: 100%;
  height: auto;
  display: block;
}

.banner {
  margin-bottom: 20px;
}
.banner{
  width: 100%;
  max-width: 1400px;
  margin: 0 auto 20px auto;
}
/* : Force image-map banners to use their natural aspect ratio*/
.banner img {
  width: 100%;
  height: auto;
  display: block;
  max-width: 100%;
}


/* =============================== */
/* 2. CATEGORY GRID (STATIC)       */
/* =============================== */

.category-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  margin: 20px 0;
}

.category-item {
  background: #f4f4f4;
  padding: 15px;
  text-align: center;
  text-decoration: none;
  color: #222;
  font-weight: bold;
  border-radius: 4px;
  border: 1px solid #ddd;
  transition: background 0.2s ease;
}

.category-item:hover {
  background: #e8e8e8;
}


/* =============================== */
/* 3. AFTER CATEGORY GRID          */
/* =============================== */

.after-category-section {
  margin-top: 20px;
}


/* =============================== */
/* GRID ROWS                       */
/* =============================== */

.grid-row {
  display: grid;
  gap: 12px;
  margin-bottom: 25px;
}

/* Grid types */
.grid2 { grid-template-columns: repeat(2, 1fr); }
.grid3 { grid-template-columns: repeat(3, 1fr); }
.grid4 { grid-template-columns: repeat(4, 1fr); }
.grid5 { grid-template-columns: repeat(5, 1fr); }
.grid6 { grid-template-columns: repeat(6, 1fr); }

.grid-item img {
  width: 100%;
  height: auto;
  border-radius: 4px;
  display: block;
}

.grid-title {
  margin-top: 6px;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
}


/* =============================== */
/* RESPONSIVE BEHAVIOR             */
/* =============================== */

@media (max-width: 1024px) {
  .grid6 { grid-template-columns: repeat(3, 1fr); }
  .grid5 { grid-template-columns: repeat(3, 1fr); }
  .grid4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .category-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .grid6,
  .grid5,
  .grid4,
  .grid3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .category-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid-row {
    grid-template-columns: repeat(1, 1fr);
  }
}
/* SCROLL TOP BUTTON */
/*#scrollTopBtn{
  position: fixed;
  bottom: 25px;
  right: 25px;
  padding: 10px 16px;
  background: #222;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  display: none;
  z-index: 999999;
}
*/

#topBtn {
  position: fixed;
  bottom: 30px;
  right: 30px;
  padding: 12px 16px;
  font-size: 20px;
  border: none;
  border-radius: 50%;
  background: #333;
  color: white;
  cursor: pointer;
  display: none;
  transition: opacity 0.3s ease;
}

#topBtn.show {
  display: block;
  opacity: 0.9;
}

#topBtn:hover {
  opacity: 1;
}

*/ Top Banner Text */
#top_banner {
  position: relative; /* allows absolute children */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 400px; /* adjust to your banner height */
  display: flex;
  align-items: center;
  justify-content: center;
}

.banner-content {
  position: absolute;
  z-index: 2;
  text-align: center;
  color: white;
  padding: 20px;
}

.banner-content h1 {
  font-size: 48px;
  font-weight: 600;
  margin-bottom: 10px;
}

.banner-content p {
  font-size: 20px;
  opacity: 0.9;
}