.page-index {\n  font-family: 'Arial', sans-serif;\n  color: #333333; /* Default text color for light background */\n  background-color: #FFFFFF; /* Default body background */\n}\n\n.page-index__container {\n  max-width: 1200px;\n  margin: 0 auto;\n  padding: 40px 20px;\n}\n\n.page-index__section-title {\n  font-size: 36px;\n  font-weight: 700;\n  color: #017439;\n  text-align: center;\n  margin-bottom: 40px;\n  position: relative;\n}\n\n.page-index__section-title::after {\n  content: '';\n  display: block;\n  width: 80px;\n  height: 4px;\n  background-color: #C30808;\n  margin: 15px auto 0;\n  border-radius: 2px;\n}\n\n.page-index__btn-primary,\n.page-index__btn-secondary,\n.page-index__btn-register,\n.page-index__btn-login,\n.page-index__btn-download,\n.page-index__btn-promotions,\n.page-index__btn-support,\n.page-index__btn-live-cockfighting {\n  display: inline-block;\n  padding: 12px 25px;\n  border-radius: 8px;\n  font-size: 16px;\n  font-weight: 600;\n  text-align: center;\n  text-decoration: none;\n  transition: all 0.3s ease;\n  cursor: pointer;\n  white-space: normal; /* Allow text wrapping */\n  word-wrap: break-word; /* Allow text wrapping */\n  box-sizing: border-box;\n  max-width: 100%;\n}\n\n.page-index__btn-primary {\n  background-color: #017439;\n  color: #FFFFFF;\n  border: 2px solid #017439;\n}\n\n.page-index__btn-primary:hover {\n  background-color: #005c2e;\n  border-color: #005c2e;\n}\n\n.page-index__btn-secondary {\n  background-color: #FFFFFF;\n  color: #017439;\n  border: 2px solid #017439;\n}\n\n.page-index__btn-secondary:hover {\n  background-color: #f0f0f0;\n  color: #005c2e;\n  border-color: #005c2e;\n}\n\n.page-index__btn-register {\n  background-color: #C30808; /* Custom color for Register */\n  color: #FFFF00; /* Custom font color for Register */\n  border: 2px solid #C30808;\n}\n\n.page-index__btn-register:hover {\n  background-color: #9e0606;\n  border-color: #9e0606;\n}\n\n.page-index__btn-login {\n  background-color: #C30808; /* Custom color for Login */\n  color: #FFFF00; /* Custom font color for Login */\n  border: 2px solid #C30808;\n}\n\n.page-index__btn-login:hover {\n  background-color: #9e0606;\n  border-color: #9e0606;\n}\n\n.page-index__btn-download,\n.page-index__btn-promotions,\n.page-index__btn-support,\n.page-index__btn-live-cockfighting {\n  background-color: #017439;\n  color: #FFFFFF;\n  border: 2px solid #017439;\n}\n\n.page-index__btn-download:hover,\n.page-index__btn-promotions:hover,\n.page-index__btn-support:hover,\n.page-index__btn-live-cockfighting:hover {\n  background-color: #005c2e;\n  border-color: #005c2e;\n}\n\n/* Hero Section */\n.page-index__hero-section {\n  position: relative;\n  padding-bottom: 0;\n  padding-left: 0;\n  padding-right: 0;\n  padding-top: 0; /* Assuming shared.css sets body padding-top */\n  margin-top: 0;\n  overflow: hidden;\n}\n\n.page-index__hero-container {\n  position: relative;\n  margin: 0 auto;\n  width: 100%;\n}\n\n.page-index__hero-image {\n  width: 100%;\n  margin: 0;\n}\n\n.page-index__hero-image img {\n  width: 100%;\n  height: auto;\n  max-width: 100%;\n  display: block;\n  object-fit: cover;\n}\n\n/* Products Section */\n.page-index__products-section {\n  width: 100%;\n  padding: 60px 20px;\n  background-color: #f5f5f5; /* Light background for contrast */\n  box-sizing: border-box;\n}\n\n.page-index__products-container {\n  max-width: 1400px;\n  margin: 0 auto;\n  display: grid;\n  grid-template-columns: 4fr 2fr; /* Desktop: 4 small + 2 large */\n  gap: 20px;\n  box-sizing: border-box;\n}\n\n.page-index__products-grid {\n  display: grid;\n  gap: 20px;\n}\n\n.page-index__products-grid--small {\n  grid-template-columns: repeat(4, 1fr);\n}\n\n.page-index__products-grid--large {\n  grid-template-columns: repeat(2, 1fr);\n}\n\n.page-index__product-card {\n  width: 100%;\n  max-width: 300px; /* Max width for product card */\n  border-radius: 0; /* No rounded corners */\n  overflow: hidden;\n  background: transparent;\n  box-shadow: none; /* No shadow */\n  transition: transform 0.3s ease;\n}\n\n.page-index__product-card:hover {\n  transform: translateY(-3px); /* Slight lift on hover */\n}\n\n.page-index__product-card-link {\n  display: block;\n  text-decoration: none;\n  color: inherit;\n}\n\n.page-index__product-card-image {\n  width: 100%;\n  max-width: 300px; /* Max width for image container */\n  overflow: hidden;\n}\n\n.page-index__product-card-image img {\n  max-width: 100%;\n  width: 100%;\n  height: auto; /* Maintain aspect ratio */\n  display: block;\n}\n\n/* Intro Section */\n.page-index__intro-section {\n  padding: 80px 0;\n  background-color: #FFFFFF; /* Light background */\n  color: #333333;\n}\n\n.page-index__main-title {\n  font-size: 42px;\n  font-weight: 700;\n  color: #017439;\n  text-align: center;\n  margin-bottom: 20px;\n  line-height: 1.2;\n}\n\n.page-index__intro-description {\n  font-size: 18px;\n  line-height: 1.8;\n  text-align: center;\n  max-width: 900px;\n  margin: 0 auto 50px;\n  color: #555555;\n}\n\n.page-index__intro-features {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\n  gap: 30px;\n  margin-top: 40px;\n}\n\n.page-index__feature-item {\n  background-color: #f9f9f9;\n  padding: 30px;\n  border-radius: 10px;\n  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);\n  text-align: center;\n}\n\n.page-index__feature-title {\n  font-size: 24px;\n  color: #017439;\n  margin-bottom: 15px;\n}\n\n.page-index__feature-item p {\n  font-size: 15px;\n  line-height: 1.7;\n  color: #666666;\n}\n\n/* Quick Access Section */\n.page-index__quick-access-section {\n  padding: 60px 0;\n  background-color: #017439; /* Dark background */\n  color: #FFFFFF;\n  text-align: center;\n}\n\n.page-index__quick-access-section .page-index__section-title {\n  color: #FFFFFF;\n}\n\n.page-index__quick-access-section .page-index__section-title::after {\n  background-color: #FFFF00;\n}\n\n.page-index__button-group {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: center;\n  gap: 15px;\n  margin-top: 30px;\n  width: 100%;\n  max-width: 900px;\n  margin-left: auto;\n  margin-right: auto;\n  box-sizing: border-box;\n  overflow: hidden;\n}\n\n.page-index__button-group a {\n  flex-grow: 1;\n  min-width: 180px;\n  max-width: 220px;\n}\n\n.page-index__backup-link-text {\n  margin-top: 30px;\n  font-size: 16px;\n  color: rgba(255, 255, 255, 0.8);\n}\n\n/* Core Games Section */\n.page-index__core-games-section {\n  padding: 80px 0;\n  background-color: #FFFFFF; /* Light background */\n  color: #333333;\n}\n\n.page-index__game-categories {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\n  gap: 30px;\n  margin-top: 40px;\n}\n\n.page-index__game-category {\n  background-color: #f9f9f9;\n  padding: 25px;\n  border-radius: 10px;\n  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);\n  text-align: center;\n}\n\n.page-index__game-category img {\n  max-width: 100%;\n  height: auto;\n  border-radius: 8px;\n  margin-bottom: 20px;\n}\n\n.page-index__game-title {\n  font-size: 26px;\n  color: #017439;\n  margin-bottom: 15px;\n}\n\n.page-index__game-category p {\n  font-size: 15px;\n  line-height: 1.7;\n  color: #666666;\n  margin-bottom: 20px;\n}