html {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

progress {
  vertical-align: baseline;
  display: inline-block;
}

a:active,
a:hover {
  outline: 0;
}

strong {
  font-weight: bold;
}

h1 {
  margin: 0.67em 0;
  font-size: 2em;
}

h2 {
  margin-top: 10px;
}

input {
  color: inherit;
  font: inherit;
  margin: 0;
}

input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

input {
  line-height: normal;
}

* {
  box-sizing: border-box;
}

html {
  height: 100%;
}

p {
  margin-top: 0;
  margin-bottom: 20px;
  font-weight: 500;
}

ul,
ol,
li {
  padding: 0px;
  margin: 0px;
  list-style: none;
}

a {
  color: #004d40;
  background-color: rgba(0, 0, 0, 0);
  text-decoration: none;
  outline: none;
  transition: color 0.3s ease;
}

img {
  max-width: 100%;
  vertical-align: middle;
  display: inline-block;
  border: 0;
  height: auto;
}

.text-uppercase {
  text-transform: uppercase;
}

* {
  box-sizing: border-box;
}

html {
  margin: 0;
  padding: 0;
  height: 100%;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

.wrapper {
  min-height: 100vh;
  margin: 0 auto;
  box-sizing: border-box;
}

.main {
  flex: 1 0 auto;
}

a {
  text-transform: none;
  margin: 0;
  padding: 0;
}

ul,
li {
  padding: 0;
  margin: 0;
  list-style: none;
}

.container {
  max-width: 1680px;
  padding: 0px 5px;
  width: 100%;
  margin: 0 auto;
}

footer,
header,
menu,
nav,
section {
  display: block;
}

a:active,
a:hover {
  outline: 0;
}

h1 {
  margin: 0.67em 0;
  font-size: 2em;
  text-align: center;
}

h3 {
  margin: 10px 0px;
  padding: 0px;
}

svg:not(:root) {
  overflow: hidden;
}

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

/* Global styles for the site - professional, clean, and themed around gaming with Indian cultural accents (saffron orange, green, navy blue, white for Indian flag inspiration, plus neon gaming vibes) */
:root {
  --index-primary-saffron: #ff9933; /* Indian saffron for energy and festivals */
  --index-secondary-green: #138808; /* Indian green for growth and gaming landscapes */
  --index-accent-navy: #00008b; /* Navy for depth and night gaming modes */
  --index-neon-purple: #9b59b6; /* Gaming neon for excitement */
  --index-bg-white: #ffffff;
  --index-text-dark: #333333;
  --index-container-max-width: 1200px; /* Limiting container for all sections */
  --index-font-family: "Arial", sans-serif; /* Clean font for readability */
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--index-font-family);
  color: var(--index-text-dark);
  background-color: var(--index-bg-white);
  line-height: 1.6;
}

/* Enhanced Header styles: more premium look with subtle gradients, shadows, and smoother animations. Colors hardcoded without :root. Adaptive burger menu improved with easing and better positioning. */
.index-header {
  background: linear-gradient(
    to right,
    #ff9933,
    #138808
  ); /* Saffron to green gradient for Indian theme */
  padding: 15px 0;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* Deeper shadow for quality feel */
  transition: background 0.5s ease-in-out;
}

.index-header:hover {
  background: linear-gradient(
    to right,
    #ff9933,
    #138808,
    #00008b
  ); /* Add navy on hover for dynamic effect */
}

.index-header-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 5px; /* Slightly more padding for comfort */
}

.index-logo {
  font-size: 2.2rem; /* Larger for prominence */
  font-weight: 700;
  color: #ffffff;
  text-decoration: none;
  letter-spacing: 1px;
  transition: color 0.3s ease, transform 0.3s ease;
}

.index-logo:hover {
  color: #9b59b6; /* Neon purple hover */
  transform: scale(1.05) rotate(2deg); /* Subtle rotate for fun gaming vibe */
}

.index-nav-list {
  list-style: none;
  display: flex;
  gap: 25px; /* More space for quality */
  margin: 0;
  padding: 0;
}

.index-nav-link {
  color: #ffffff;
  text-decoration: none;
  font-weight: 600;
  position: relative;
  transition: color 0.3s ease;
}

.index-nav-link::after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 0;
  height: 2px;
  background: #9b59b6; /* Neon underline */
  transition: width 0.3s ease;
}

.index-nav-link:hover::after {
  width: 100%;
}

.index-nav-link:hover {
  color: #9b59b6;
}

.index-menu-toggle {
  display: none;
}

.index-menu-icon {
  display: none;
  cursor: pointer;
  flex-direction: column;
  justify-content: space-between;
  width: 32px;
  height: 24px;
  transition: all 0.4s ease-in-out;
}

.index-menu-line {
  display: block;
  height: 3px;
  width: 100%;
  background: #ffffff;
  border-radius: 3px;
  transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); /* Smoother easing for quality animation */
}

@media (max-width: 768px) {
  .index-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: linear-gradient(to bottom, #ff9933, #138808);
    padding: 25px 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 999;
    animation: slideDown 0.4s ease-in-out;
  }

  @keyframes slideDown {
    from {
      opacity: 0;
      transform: translateY(-20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .index-nav-list {
    flex-direction: column;
    gap: 20px;
    text-align: left;
    margin-left: 15px;
  }

  .index-menu-icon {
    display: flex;
  }

  .index-menu-toggle:checked ~ .index-nav {
    display: block;
  }

  .index-menu-toggle:checked + .index-menu-icon .index-menu-line:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
  }

  .index-menu-toggle:checked + .index-menu-icon .index-menu-line:nth-child(2) {
    opacity: 0;
    transform: translateX(20px);
  }

  .index-menu-toggle:checked + .index-menu-icon .index-menu-line:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -6px);
  }
}

/* Updated Footer styles: divided into columns for uniqueness, with static map image */
.index-footer {
  background: var(--index-accent-navy);
  color: var(--index-bg-white);
  padding: 40px 0 20px;
  text-align: left;
}

.index-footer-container {
  max-width: var(--index-container-max-width);
  margin: 0 auto;
  padding: 0 5px;
}

.index-footer-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 30px;
  margin-bottom: 30px;
}

.index-footer-columns a {
  color: #ff9933;
}

.index-footer-nav-column,
.index-footer-contacts-column,
.index-footer-policies-column,
.index-footer-map-column {
  padding: 10px;
}

.index-footer-nav-list,
.index-footer-contacts-list,
.index-footer-policies-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.index-footer-nav-list li,
.index-footer-policies-list li {
  margin-bottom: 10px;
}

.index-footer-contacts-list li {
  margin-bottom: 10px;
  font-size: 0.9rem;
}

.index-footer-map {
  width: 100%;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
}

.index-footer-copyright {
  text-align: center;
  font-size: 0.8rem;
  border-top: 1px solid var(--index-primary-saffron);
  padding-top: 20px;
}

@media (max-width: 768px) {
  .index-footer-columns {
    grid-template-columns: 1fr;
  }
}

.index-nav-active {
  display: flex;
}

/* Main content - centered and limited width */
main {
  margin: 0 auto;
  padding: 10px 5px;
}

/* Section base - each unique with visual effects */
section {
  margin-bottom: 30px;
  padding: 30px 5px;
  border-radius: 5px;
}

/* Hero Section: Fullscreen with parallax background, h1, subtext, 3 CTAs in chaotic positions. */
.index-hero-banner {
  height: calc(100vh - 10px);
  background: url("img/bg-app1.jpg") no-repeat center/cover fixed; /* Parallax effect */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #ffffff;
  position: relative;
}

.index-hero-banner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 139, 0.4);
  z-index: 1;
}

.index-hero-banner > * {
  position: relative;
  z-index: 2;
}

.index-hero-banner h1 {
  font-size: 4rem;
  margin-bottom: 15px;
  text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.6);
}

.index-hero-subtext {
  font-size: 1rem;
  max-width: 1200px;
  margin-bottom: 30px;
}

.index-hero-cta-wrap {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
}

.index-hero-cta {
  padding: 15px 35px;
  border-radius: 30px;
  text-decoration: none;
  font-weight: bold;
  transition: transform 0.3s ease;
}

.index-hero-cta:nth-child(1) {
  background: #ff9933;
  color: #ffffff;
  transform: rotate(-5deg);
}
.index-hero-cta:nth-child(2) {
  background: #138808;
  color: #ffffff;
  transform: rotate(3deg);
}
.index-hero-cta:nth-child(3) {
  background: #9b59b6;
  color: #ffffff;
  transform: rotate(-2deg);
}

.index-hero-cta:hover {
  transform: scale(1.1) rotate(0deg);
}

/* Welcome/Intro: Vertical layout with h2, 2 paras, icon infographic. Gradient background. */
.index-welcome-intro {
  background: linear-gradient(to bottom, #ffffff, #ff9933 80%);
  text-align: center;
  animation: fadeInIntro 1.5s ease;
}

@keyframes fadeInIntro {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.index-welcome-intro h2 {
  font-size: 2rem;
  margin-bottom: 20px;
}

.index-welcome-para {
  max-width: 700px;
  margin: 0 auto 15px;
}

.index-intro-icons {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin-top: 30px;
}

.index-intro-icon {
  font-size: 2rem;
  color: #00008b;
  transition: color 0.3s ease;
}

.index-intro-icon:hover {
  color: #9b59b6;
}

/* Featured Items: Grid of 5 cards with varying sizes, hover effects. Asymmetrical. */
.index-featured-items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 25px;
  background: #138808;
  color: #ffffff;
  padding: 50px 30px;
}

.index-featured-card {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.index-featured-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.index-featured-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 15px;
}

.index-featured-card h3 {
  font-size: 1rem;
  margin-bottom: 10px;
}

.index-featured-detail {
  font-size: 0.9rem;
  margin-bottom: 10px;
}

.index-featured-link {
  color: #9b59b6;
  text-decoration: none;
  font-weight: bold;
}

.index-featured-card:nth-child(1),
.index-featured-card:nth-child(4) {
  grid-row: span 2; /* Varying sizes for chaos */
}

/* Story Section: Horizontal layout with text left, image right, timeline via details accordion. */
.index-story-section {
  display: flex;
  gap: 40px;
  background: #ffffff;
  align-items: center;
}

.index-story-text {
  flex: 1;
}

.index-story-text h2 {
  font-size: 2rem;
  margin-bottom: 15px;
}

.index-story-para {
  margin-bottom: 15px;
}

.index-story-timeline {
  margin-top: 20px;
}

.index-story-timeline details {
  margin-bottom: 10px;
  cursor: pointer;
}

.index-story-timeline summary {
  font-weight: bold;
  color: #00008b;
}

.index-story-image {
  flex: 1;
  max-height: 400px;
  object-fit: cover;
  border-radius: 10px;
}

@media (max-width: 768px) {
  .index-story-section {
    flex-direction: column;
  }
}

/* Why Choose Us: List of 4 points with icons, animated counters via CSS (static for simplicity). */
.index-why-choose-us {
  background: linear-gradient(to right, #00008b, #9b59b6);
  color: #ffffff;
  text-align: center;
  padding: 40px 5px;
}

.index-why-choose-us h2 {
  font-size: 2rem;
  margin-bottom: 30px;
}

.index-choose-list {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: center;
}

.index-choose-item {
  flex: 1 1 200px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 15px;
}

.index-choose-icon {
  font-size: 2rem;
  margin-bottom: 10px;
  animation: bounceIcon 2s infinite;
}

@keyframes bounceIcon {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

.index-choose-item h3 {
  font-size: 1.4rem;
  margin-bottom: 10px;
}

/* Seasonal Picks: Carousel of 7 cards with auto-scroll simulation via animation. Interactive hover. */
.index-seasonal-picks {
  overflow: hidden;
  background: #ff9933;
  color: #333333;
}

.index-picks-carousel {
  display: flex;
  animation: scrollPicks 20s linear infinite;
  gap: 20px;
}

@keyframes scrollPicks {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  } /* Duplicate cards for seamless loop if needed */
}

.index-picks-card {
  flex: 0 0 280px;
  background: #ffffff;
  border-radius: 10px;
  padding: 15px;
  text-align: center;
  transition: background 0.3s ease;
}

.index-picks-card:hover {
  background: #138808;
  color: #ffffff;
}

.index-picks-card img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  border-radius: 5px;
  margin-bottom: 10px;
}

.index-picks-card h3 {
  font-size: 1.3rem;
  margin-bottom: 5px;
}

.index-picks-detail {
  font-size: 0.8rem;
}

/* Spotlight Section: Focus with h2, para, gallery of 3 images, emotional quote. Parallax bg. */
.index-spotlight-focus {
  background: url("img/bg-app2.jpg") no-repeat center/cover fixed;
  color: #ffffff;
  text-align: left;
  padding: 60px 40px;
  position: relative;
}

.index-spotlight-focus::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(155, 89, 182, 0.6);
  z-index: 1;
}

.index-spotlight-content {
  position: relative;
  z-index: 2;
  max-width: 600px;
}

.index-spotlight-focus h2 {
  font-size: 2rem;
  margin-bottom: 20px;
}

.index-spotlight-para {
  margin-bottom: 20px;
}

.index-spotlight-gallery {
  display: flex;
  gap: 15px;
  margin-bottom: 20px;
}

.index-spotlight-img {
  width: 200px;
  height: 150px;
  object-fit: cover;
  border-radius: 8px;
}

.index-spotlight-quote {
  font-style: italic;
  font-size: 1.2rem;
  border-left: 4px solid #ff9933;
  padding-left: 15px;
}

/* Testimonials: Slider of 4 cards with stars, author photos. Fade animation. */
.index-testimonials {
  background: #ffffff;
  text-align: center;
}

.index-testimonials h2 {
  font-size: 2rem;
  margin-bottom: 30px;
}

.index-testimonial-slider {
  display: flex;
  justify-content: center;
  overflow-x: auto;
  gap: 25px;
  padding: 0 5px;
}

.index-testimonial-card {
  flex: 0 0 300px;
  background: #f0f0f0;
  border-radius: 10px;
  padding: 20px;
  animation: fadeTestimonial 1s ease;
}

@keyframes fadeTestimonial {
  from {
    opacity: 0.5;
  }
  to {
    opacity: 1;
  }
}

.index-testimonial-text {
  margin-bottom: 15px;
}

.index-testimonial-author {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.index-author-photo {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

.index-testimonial-stars {
  color: gold;
  margin-bottom: 10px;
}

/* Process Section: Timeline with 6 steps, arrow animations. Horizontal on large screens. */
.index-process-section {
  background: linear-gradient(to bottom, #9b59b6, #00008b);
  color: #ffffff;
  padding: 40px 5px;
}

.index-process-section h2 {
  font-size: 2rem;
  text-align: center;
  margin-bottom: 40px;
}

.index-process-timeline {
  display: flex;
  flex-direction: column;
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
}

.index-process-step {
  position: relative;
  padding-left: 40px;
}

.index-process-step::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 0;
  width: 2px;
  height: 100%;
  background: #ff9933;
}

.index-process-step h3 {
  font-size: 1rem;
  margin-bottom: 10px;
}

.index-process-step::after {
  content: "→";
  position: absolute;
  left: 5px;
  top: 50%;
  font-size: 1.2rem;
  animation: arrowMove 1s infinite alternate;
}

@keyframes arrowMove {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(5px);
  }
}

@media (min-width: 769px) {
  .index-process-timeline {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .index-process-step {
    flex: 1 1 30%;
    padding-left: 0;
    padding-top: 40px;
  }

  .index-process-step::before {
    left: 0;
    top: 15px;
    width: 100%;
    height: 2px;
  }

  .index-process-step::after {
    top: 5px;
    left: 50%;
    transform: rotate(90deg);
    animation: arrowMoveHor 1s infinite alternate;
  }

  @keyframes arrowMoveHor {
    from {
      transform: rotate(90deg) translateY(0);
    }
    to {
      transform: rotate(90deg) translateY(5px);
    }
  }
}

/* Impact Section: h2, para, infographic with 3 stats in charts (CSS bars). */
.index-impact-influence {
  text-align: center;
  background: #ffffff;
}

.index-impact-influence h2 {
  font-size: 2rem;
  margin-bottom: 20px;
}

.index-impact-para {
  max-width: 1200px;
  margin: 0 auto 30px;
}

.index-impact-infographic {
  display: flex;
  justify-content: center;
  gap: 40px;
}

.index-impact-stat {
  width: 150px;
}

.index-impact-bar {
  height: 100px;
  background: #138808;
  margin-bottom: 10px;
  animation: growBar 2s ease;
  border-radius: 5px;
}

@keyframes growBar {
  from {
    height: 0;
  }
  to {
    height: 100px;
  }
}

.index-impact-stat:nth-child(2) .index-impact-bar {
  height: 150px;
  background: #ff9933;
}

.index-impact-stat:nth-child(3) .index-impact-bar {
  height: 120px;
  background: #9b59b6;
}

/* Subscription Section: h2, para, 2 offer blocks with details, links. No form. Gradient bg. */
.index-subscription-offer {
  background: linear-gradient(to top, #00008b, #ffffff);
  color: #333333;
  padding: 40px 5px;
  text-align: center;
}

.index-subscription-offer h2 {
  font-size: 2rem;
  margin-bottom: 25px;
  color: #ffffff;
}

.index-subscription-para {
  max-width: 700px;
  margin: 0 auto 30px;
  color: #ffffff;
}

.index-offer-blocks {
  display: flex;
  gap: 30px;
  justify-content: center;
}

.index-offer-block {
  background: rgba(255, 255, 255, 0.8);
  border-radius: 15px;
  padding: 25px;
  width: 300px;
  @media (max-width: 550px) {
    width: 100%;
  }
}

.index-offer-block h3 {
  font-size: 1rem;
  margin-bottom: 10px;
}

.index-offer-detail {
  margin-bottom: 15px;
}

.index-offer-link {
  color: #138808;
  text-decoration: none;
  font-weight: bold;
}

@media (max-width: 768px) {
  .index-offer-blocks {
    flex-direction: column;
  }
}

/* Recipes/Ideas: Grid of 6 cards with images, steps in details modal. */
.index-recipes-ideas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  background: #9b59b6;
  color: #ffffff;
  padding: 40px 5px;
}

.index-idea-card {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  padding: 15px;
  text-align: center;
}

.index-idea-card img {
  width: 100%;
  height: 140px;
  object-fit: cover;
  border-radius: 5px;
  margin-bottom: 10px;
}

.index-idea-card h3 {
  font-size: 1.4rem;
  margin-bottom: 10px;
}

.index-idea-steps details {
  margin-top: 10px;
  cursor: pointer;
}

.index-idea-steps summary {
  font-weight: bold;
}

/* Commitment Section: h2, paras, image, bullet list with icons. Asymmetrical layout. */
.index-commitment-values {
  display: flex;
  gap: 30px;
  background: #ffffff;
  align-items: flex-start;
}

.index-commitment-text {
  flex: 2;
  padding: 20px;
}

.index-commitment-text h2 {
  font-size: 2rem;
  margin-bottom: 15px;
}

.index-commitment-para {
  margin-bottom: 15px;
}

.index-values-list {
  list-style: none;
  padding: 0;
}

.index-values-item {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.index-values-icon {
  font-size: 1rem;
  color: #ff9933;
}

.index-commitment-image {
  flex: 1;
  max-height: 350px;
  object-fit: cover;
  border-radius: 10px;
}

@media (max-width: 768px) {
  .index-commitment-values {
    flex-direction: column;
  }
}

/* Partners Section: Grid of 8 logos, clickable with popups via details. */
.index-partners-section {
  background: #138808;
  color: #ffffff;
  text-align: center;
  padding: 40px 5px;
}

.index-partners-section h2 {
  font-size: 2rem;
  margin-bottom: 30px;
}

.index-partners-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 20px;
}

.index-partner-logo {
  background: #ffffff;
  border-radius: 10px;
  padding: 15px;
  cursor: pointer;
}

.index-partner-logo img {
  width: 100%;
  height: 100px;
  object-fit: contain;
}

.index-partner-logo h3 {
  font-size: 1.2rem;
  color: #333333;
  margin-top: 10px;
}

.index-partner-popup details {
  margin-top: 10px;
}

.index-partner-popup summary {
  font-weight: bold;
  color: #9b59b6;
}

/* CTA Section: h2, para, 2 buttons, urgency timer via CSS animation. Gradient bg. */
.index-cta-call {
  background: linear-gradient(to left, #9b59b6, #ff9933);
  color: #ffffff;
  text-align: center;
  padding: 40px 5px;
}

.index-cta-call h2 {
  font-size: 3.5rem;
  margin-bottom: 20px;
}

.index-cta-para {
  max-width: 600px;
  margin: 0 auto 30px;
}

.index-cta-buttons {
  display: flex;
  gap: 20px;
  justify-content: center;
}

.index-cta-button {
  padding: 18px 40px;
  background: #00008b;
  border-radius: 40px;
  text-decoration: none;
  font-weight: bold;
  transition: background 0.3s ease;
}

.index-cta-button:hover {
  background: #138808;
}

.index-urgency-timer {
  font-size: 1.2rem;
  margin-top: 20px;
  animation: blinkTimer 1s infinite;
}

@keyframes blinkTimer {
  50% {
    opacity: 0.5;
  }
}

/* Media queries for full responsiveness */
@media (max-width: 768px) {
  .index-header-container {
    padding: 0 15px;
  }

  .index-hero-banner h1 {
    font-size: 2rem;
  }

  .index-hero-subtext {
    font-size: 1.2rem;
  }

  .index-featured-items {
    grid-template-columns: 1fr;
  }

  .index-intro-icons {
    flex-direction: column;
  }

  .index-choose-list {
    flex-direction: column;
  }

  .index-spotlight-gallery {
    flex-direction: column;
  }

  .index-impact-infographic {
    flex-direction: column;
  }

  .index-offer-blocks {
    flex-direction: column;
  }

  .index-partners-grid {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  }

  .index-cta-buttons {
    flex-direction: column;
    gap: 15px;
  }
}

/* Hero Banner: Fullscreen video background, h1, single CTA */
.service-hero-banner {
  height: calc(100vh - 60px);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #ffffff;
}

.service-hero-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  opacity: 0.7;
}

.service-hero-content {
  position: relative;
  z-index: 2;
}

.service-hero-banner h1 {
  font-size: 3.5rem;
  margin-bottom: 20px;
  text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.5);
}

.service-hero-cta {
  padding: 15px 40px;
  background: #ff9933;
  color: #ffffff;
  border-radius: 30px;
  text-decoration: none;
  font-weight: bold;
  transition: background 0.3s ease, transform 0.3s ease;
}

.service-hero-cta:hover {
  background: #138808;
  transform: scale(1.1);
}

/* Featured Grid: 6 service cards, varying sizes, hover scale */
.service-featured-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 25px;
  background: #138808;
  color: #ffffff;
  padding: 40px 5px;
}

.service-grid-card {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.service-grid-card:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.service-grid-card img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 15px;
}

.service-grid-card h3 {
  font-size: 1rem;
  margin-bottom: 10px;
}

.service-grid-result {
  font-size: 0.9rem;
  margin-bottom: 10px;
}

.service-grid-link {
  color: #9b59b6;
  text-decoration: none;
  font-weight: bold;
}

.service-grid-card:nth-child(1),
.service-grid-card:nth-child(4) {
  grid-row: span 2;
}

/* Impact Counters: 3 animated counters with game icons */
.service-impact-counters {
  background: linear-gradient(to bottom, #ffffff, #ff9933);
  text-align: center;
  padding: 40px 5px;
}

.service-counters-list {
  display: flex;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
}

.service-counter-item {
  animation: service-counter-pulse 2s infinite ease-in-out;
}

@keyframes service-counter-pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

.service-counter-icon {
  font-size: 2rem;
  color: #00008b;
  margin-bottom: 10px;
}

.service-counter-number {
  font-size: 2.2rem;
  font-weight: bold;
}

.service-counter-label {
  font-size: 1.1rem;
}

/* Spotlight Case: Large block with image + success story */
.service-spotlight-case {
  display: flex;
  gap: 30px;
  background: #ffffff;
  align-items: center;
}

.service-case-image {
  flex: 1;
  max-height: 400px;
  object-fit: cover;
  border-radius: 10px;
}

.service-case-text {
  flex: 1;
  padding: 20px;
}

.service-case-text h2 {
  font-size: 2rem;
  margin-bottom: 15px;
}

.service-case-para {
  margin-bottom: 15px;
}

.service-case-link {
  color: #138808;
  text-decoration: none;
  font-weight: bold;
}

@media (max-width: 768px) {
  .service-spotlight-case {
    flex-direction: column;
  }
}

/* Process Timeline: 5 steps with line and arrow animations */
.service-process-timeline {
  background: linear-gradient(to right, #00008b, #9b59b6);
  color: #ffffff;
  padding: 40px 5px;
}

.service-timeline-steps {
  display: flex;
  flex-direction: column;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
}

.service-timeline-step {
  padding-left: 50px;
  margin-bottom: 30px;
  position: relative;
}

.service-timeline-step::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 0;
  width: 2px;
  height: 100%;
  background: #ff9933;
}

.service-timeline-step::after {
  content: "→";
  position: absolute;
  left: 10px;
  top: 50%;
  font-size: 1rem;
  color: #ff9933;
  animation: service-arrow-move 1s infinite alternate;
}

@keyframes service-arrow-move {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(5px);
  }
}

.service-timeline-step h3 {
  font-size: 1rem;
  margin-bottom: 10px;
}

@media (min-width: 769px) {
  .service-timeline-steps {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .service-timeline-step {
    flex: 1 1 18%;
    padding-left: 0;
    padding-top: 50px;
    margin-bottom: 0;
  }

  .service-timeline-step::before {
    left: 0;
    top: 20px;
    width: 100%;
    height: 2px;
  }

  .service-timeline-step::after {
    top: 10px;
    left: 50%;
    transform: rotate(90deg);
    animation: service-arrow-move-hor 1s infinite alternate;
  }

  @keyframes service-arrow-move-hor {
    from {
      transform: rotate(90deg) translateY(0);
    }
    to {
      transform: rotate(90deg) translateY(5px);
    }
  }
}

/* Seasonal Offer: Gradient banner with single offer */
.service-seasonal-offer {
  background: linear-gradient(to left, #ff9933, #138808);
  color: #ffffff;
  text-align: center;
  padding: 40px 5px;
}

.service-seasonal-offer h2 {
  font-size: 2rem;
  margin-bottom: 20px;
}

.service-offer-para {
  max-width: 600px;
  margin: 0 auto 20px;
}

.service-offer-link {
  padding: 15px 30px;
  background: #00008b;
  border-radius: 25px;
  text-decoration: none;
  font-weight: bold;
  color: #ffffff;
  transition: background 0.3s ease;
}

.service-offer-link:hover {
  background: #9b59b6;
}

/* Testimonials Carousel: Slider with 6 reviews */
.service-testimonials-carousel {
  background: #ffffff;
  text-align: center;
}

.service-testimonials-carousel h2 {
  font-size: 2rem;
  margin-bottom: 30px;
}

.service-carousel-slider {
  display: flex;
  overflow-x: auto;
  gap: 20px;
  padding: 0 5px;
}

.service-carousel-review {
  background: #f0f0f0;
  border-radius: 10px;
  padding: 20px;
}

.service-review-text {
  margin-bottom: 15px;
}

.service-review-stars {
  color: gold;
  margin-bottom: 10px;
}

.service-review-author {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
}

.service-author-photo {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

/* Visual Story: Asymmetric section with 3 photos and text */
.service-visual-story {
  display: grid;
  grid-template-areas:
    "photo1 text1"
    "text2 photo2"
    "photo3 text3";
  gap: 20px;
  background: #9b59b6;
  color: #ffffff;
  padding: 40px 5px;
}

.service-story-photo {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 10px;
}

.service-story-text {
  padding: 15px;
  text-align: center;
}

.service-story-photo1 {
  grid-area: photo1;
}
.service-story-text1 {
  grid-area: text1;
}
.service-story-text2 {
  grid-area: text2;
}
.service-story-photo2 {
  grid-area: photo2;
}
.service-story-photo3 {
  grid-area: photo3;
}
.service-story-text3 {
  grid-area: text3;
}

@media (max-width: 768px) {
  .service-visual-story {
    grid-template-areas:
      "photo1"
      "text1"
      "photo2"
      "text2"
      "photo3"
      "text3";
    grid-template-columns: 1fr;
  }
}

/* Why Choose Us: 4 advantages with icons */
.service-why-choose-us {
  background: linear-gradient(to bottom, #00008b, #ffffff);
  padding: 40px 5px;
  text-align: center;
}

.service-choose-list {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: center;
}

.service-choose-item {
  flex: 1 1 200px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
}

.service-choose-icon {
  font-size: 2rem;
  color: #ff9933;
  margin-bottom: 10px;
  animation: service-icon-bounce 2s infinite;
}

@keyframes service-icon-bounce {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

.service-choose-item h3 {
  font-size: 1.4rem;
  margin-bottom: 10px;
}

/* CTA Section: Bright call to action */
.service-cta-section {
  background: linear-gradient(to right, #9b59b6, #ff9933);
  color: #ffffff;
  text-align: center;
  padding: 40px 5px;
}

.service-cta-section h2 {
  font-size: 2rem;
  margin-bottom: 20px;
}

.service-cta-para {
  max-width: 600px;
  margin: 0 auto 30px;
}

.service-cta-button {
  padding: 15px 40px;
  background: #138808;
  border-radius: 30px;
  text-decoration: none;
  font-weight: bold;
  color: #ffffff;
  transition: background 0.3s ease;
}

.service-cta-button:hover {
  background: #00008b;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .service-hero-banner h1 {
    font-size: 2rem;
  }

  .service-featured-grid {
    grid-template-columns: 1fr;
  }

  .service-counters-list {
    flex-direction: column;
  }

  .service-carousel-slider {
    flex-direction: column;
  }

  .service-choose-list {
    flex-direction: column;
  }
}

/* Origin Dive: Vertical intro, h2, 3 paras, game level infographic as stepped progress. */
.about-origin-dive {
  background: linear-gradient(to bottom, #ffffff, #ff9933);
  text-align: center;
  padding: 80px 5px;
}

.about-origin-dive h2 {
  font-size: 2rem;
  margin-bottom: 20px;
}

.about-origin-para {
  max-width: 1200px;
  margin: 0 auto 15px;
}

.about-game-level-infographic {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  margin-top: 30px;
}

.about-level-step {
  width: 80%;
  background: #138808;
  color: #ffffff;
  padding: 10px;
  border-radius: 8px;
  position: relative;
}

.about-level-step::after {
  content: "↓";
  position: absolute;
  bottom: -25px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1rem;
}

.about-level-step:last-child::after {
  display: none;
}

/* Evolution Spiral: Linear timeline, vertical on mobile, horizontal on desktop */
.about-evolution-spiral {
  background: #00008b;
  color: #ffffff;
  padding: 40px 5px;
}

.about-spiral-timeline {
  display: flex;
  flex-direction: column;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
}

.about-stage-point {
  display: flex;
  align-items: center;
  padding: 20px;
  margin-bottom: 20px;
  position: relative;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  @media (max-width: 550px) {
    flex-direction: column;
  }
}

.about-stage-point:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.about-stage-point img {
  width: 150px;
  height: 100px;
  object-fit: cover;
  border-radius: 8px;
  margin-right: 20px;
}

.about-stage-content {
  flex: 1;
}

.about-stage-content h3 {
  font-size: 1rem;
  margin-bottom: 10px;
  color: #ff9933;
}

.about-stage-content p {
  margin: 0;
}

.about-stage-point::after {
  content: "●";
  position: absolute;
  left: 0;
  top: 0;
  transform: translateY(-50%);
  font-size: 1.2rem;
  color: #ff9933;
}

@media (min-width: 769px) {
  .about-spiral-timeline {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .about-stage-point {
    flex: 0 0 48%;
    margin-bottom: 30px;
    padding: 20px;
  }

  .about-stage-point:nth-child(odd)::before {
    top: 0;
    right: 0;
  }

  .about-stage-point:nth-child(odd)::after {
    top: 0;
    right: 0;
  }

  .about-stage-point:nth-child(even) {
    flex-direction: row-reverse;
  }

  .about-stage-point:nth-child(even) img {
    margin-right: 0;
    margin-left: 20px;
  }

  .about-stage-point::before {
    left: 50%;
    top: 20px;
    width: 100%;
    height: 2px;
  }
}

/* Visionary Echo: Asymmetric, animated quote, portrait, video bg. */
.about-visionary-echo {
  position: relative;
  background: url("img/bg-app3.jpg") no-repeat center/cover;
  color: #ffffff;
  padding: 60px 40px;
  display: flex;
  gap: 30px;
  align-items: center;
}

.about-visionary-echo::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(155, 89, 182, 0.6);
  z-index: 1;
}

.about-echo-content {
  position: relative;
  z-index: 2;
  flex: 2;
}

.about-echo-quote {
  font-size: 2rem;
  font-style: italic;
  margin-bottom: 20px;
  animation: about-quote-glow 2s infinite alternate;
}

@keyframes about-quote-glow {
  from {
    text-shadow: 0 0 5px #ff9933;
  }
  to {
    text-shadow: 0 0 15px #ff9933;
  }
}

.about-echo-portrait {
  flex: 1;
  width: 200px;
  height: 250px;
  object-fit: cover;
  border-radius: 50% 50% 0 0;
  transform: rotate(5deg);
}

@media (max-width: 768px) {
  .about-visionary-echo {
    flex-direction: column;
  }
}

/* Core Flames: Bullet list 6 values, flame icons, hover expand. */
.about-core-flames {
  background: linear-gradient(to bottom, #ff9933, #ffffff);
  padding: 40px 5px;
  text-align: center;
}

.about-flames-list {
  list-style: none;
  padding: 0;
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 15px;
  @media (max-width: 768px) {
    grid-template-columns: 1fr 1fr;
  }
  @media (max-width: 550px) {
    grid-template-columns: 1fr;
  }
}

.about-flame-item {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 20px;
  transition: transform 0.3s ease;
}

.about-flame-item:hover {
  transform: scale(1.1);
}

.about-flame-icon {
  font-size: 2rem;
  color: #ff9933;
}

.about-flame-detail {
  flex: 1;
  text-align: left;
}

/* Realm Reach: Static map image with 9 mark popups via <details>. */
.about-realm-reach {
  background: #138808;
  color: #ffffff;
  padding: 40px 5px;
  text-align: center;
}

.about-realm-map {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
}

.about-map-image {
  width: 100%;
  border-radius: 10px;
}

.about-map-mark {
  position: absolute;
  cursor: pointer;
  font-size: 1rem;
  color: #ff9933;
}

.about-map-mark details {
  position: absolute;
  background: #00008b;
  padding: 10px;
  border-radius: 5px;
  width: 150px;
  z-index: 2;
}

.about-map-mark summary {
  font-weight: bold;
}

/* Example positions - adjust as needed */
.about-map-mark1 {
  top: 20%;
  left: 30%;
}
.about-map-mark2 {
  top: 40%;
  left: 50%;
}
.about-map-mark3 {
  top: 60%;
  left: 70%;
}
.about-map-mark4 {
  top: 10%;
  left: 10%;
}
.about-map-mark5 {
  top: 30%;
  left: 80%;
}
.about-map-mark6 {
  top: 50%;
  left: 20%;
}
.about-map-mark7 {
  top: 70%;
  left: 40%;
}
.about-map-mark8 {
  top: 80%;
  left: 60%;
}
.about-map-mark9 {
  top: 90%;
  left: 80%;
}

/* Squad Array: Grid 5 employees, chaotic photo sizes, modal bios via <details>. */
.about-squad-array {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 20px;
  background: #ffffff;
  padding: 40px 5px;
}

.about-squad-member {
  text-align: center;
}

.about-member-photo {
  border-radius: 50%;
  margin-bottom: 10px;
}

.about-member-photo1 {
  width: 180px;
  height: 180px;
}
.about-member-photo2 {
  width: 150px;
  height: 150px;
}
.about-member-photo3 {
  width: 200px;
  height: 200px;
}
.about-member-photo4 {
  width: 170px;
  height: 170px;
}
.about-member-photo5 {
  width: 190px;
  height: 190px;
}

.about-member-caption {
  font-size: 1.2rem;
  margin-bottom: 5px;
}

details.about-member-modal {
  cursor: pointer;
}

summary.about-member-summary {
  font-weight: bold;
  color: #138808;
}

/* Power Surge: 4 advantages with surging animations (CSS graphs with numbers). */
.about-power-surge {
  background: linear-gradient(to top, #6a6ad3, #cfcfcf);
  padding: 40px 5px;
  text-align: center;
}

.about-surge-list {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: center;
}

.about-surge-item {
  flex: 1 1 200px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 15px;
}

.about-surge-graph {
  width: 100px;
  height: 100px;
  background: conic-gradient(#9b59b6 0% 70%, #f0f0f0 70%);
  border-radius: 50%;
  margin: 0 auto 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  animation: about-surge-wave 2s infinite alternate;
}

@keyframes about-surge-wave {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.05);
  }
}

.about-surge-item h3 {
  font-size: 1.4rem;
  margin-bottom: 10px;
}

/* Alliance Forge: Wall of 7 logos, clickable with forge animation (scale/glow on hover). */
.about-alliance-forge {
  background: #138808;
  color: #ffffff;
  padding: 40px 5px;
}

.about-forge-wall {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}

.about-forge-logo {
  width: 150px;
  height: 100px;
  background: #ffffff;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.about-forge-logo:hover {
  transform: scale(1.1);
  box-shadow: 0 0 15px #ff9933;
}

.about-forge-logo img {
  max-width: 100%;
  max-height: 100%;
}

/* Realm Gallery: Masonry layout with 8 photos, parallax bg. */
.about-realm-gallery {
  column-count: 3;
  column-gap: 20px;

  padding: 40px 5px;
}

.about-gallery-photo {
  break-inside: avoid;
  margin-bottom: 20px;
  width: 100%;
  border-radius: 10px;
}

@media (max-width: 768px) {
  .about-realm-gallery {
    column-count: 1;
  }
}

/* Spirit Call: Emotional banner with team photo, h2, CTA link. */
.about-spirit-call {
  background: linear-gradient(to left, #9b59b6, #138808);
  color: #ffffff;
  text-align: center;
  padding: 40px 5px;
  position: relative;
}

.about-call-image {
  width: 100%;
  height: 300px;
  object-fit: cover;
  opacity: 0.8;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.about-call-content {
  position: relative;
  z-index: 2;
}

.about-call-content h2 {
  font-size: 2rem;
  margin-bottom: 20px;
}

.about-call-cta {
  padding: 15px 30px;
  background: #ff9933;
  color: #333333;
  border-radius: 30px;
  text-decoration: none;
  font-weight: bold;
  transition: background 0.3s ease;
}

.about-call-cta:hover {
  background: #00008b;
  color: #ffffff;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .about-header-container {
    padding: 0 15px;
  }

  .about-visionary-echo {
    flex-direction: column;
  }

  .about-flames-list {
    text-align: left;
  }

  .about-surge-list {
    flex-direction: column;
  }

  .about-forge-wall {
    justify-content: center;
  }
}

/* Hero Image: Large office photo, h1 centered. */
.contact-hero-image {
  position: relative;
  height: 500px;
  background: url("img/bg-app5.jpg") no-repeat center/cover;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #ffffff;
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);
}

.contact-hero-image h1 {
  font-size: 2rem;
  margin: 0;
}

/* Map Section: Google Maps iframe for interactivity. */
.contact-map-section {
  background: #f0f0f0;
  text-align: center;
}

.contact-map-section iframe {
  width: 100%;
  height: 400px;
  border: 0;
  border-radius: 8px;
}

/* Quick Facts: Block with 3 stats, grid layout. */
.contact-quick-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  text-align: center;
}

.contact-fact-item {
  background: #138808;
  color: #ffffff;
  padding: 20px;
  border-radius: 8px;
}

.contact-fact-number {
  font-size: 2rem;
  font-weight: bold;
}

.contact-fact-label {
  font-size: 1.1rem;
}

/* Contact Data Block: Clickable links for geo, phone, email. */
.contact-data-block {
  background: #ff9933;
  color: #333333;
  padding: 30px;
  text-align: center;
}

.contact-data-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.contact-data-item {
  font-size: 1.2rem;
}

.contact-data-link {
  color: #00008b;
  text-decoration: none;
  transition: color 0.3s ease;
}

.contact-data-link:hover {
  color: #9b59b6;
}

/* Spotlight Quote: Large centered quote. */
.contact-spotlight-quote {
  background: linear-gradient(to bottom, #00008b, #138808);
  color: #ffffff;
  text-align: center;
  font-size: 2rem;
  font-style: italic;
  padding: 40px;
  border-left: 5px solid #ff9933;
  margin: 0 auto;
  max-width: 1200px;
}

/* FAQ Accordion: 7 questions with <details>. */
.contact-faq-accordion {
  background: #ffffff;
}

.contact-faq-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.contact-faq-item details {
  margin-bottom: 10px;
  border-bottom: 1px solid #f0f0f0;
}

.contact-faq-item summary {
  cursor: pointer;
  font-weight: bold;
  padding: 10px 0;
  color: #138808;
}

.contact-faq-item p {
  padding: 0 0 10px 20px;
}

/* Closing Banner: Visual block with motivation text. */
.contact-closing-banner {
  background: url("img/bg-app6.jpg") no-repeat center/cover;
  color: #ffffff;
  text-align: center;
  padding: 40px 5px;
  font-size: 2rem;
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);
}

/* Contact Form: Simple form with name, email, message, checkbox. */
.contact-form-section {
  background: #9b59b6;
  color: #ffffff;
  padding: 20px;
  text-align: center;
}

.contact-form {
  max-width: 600px;
  margin: 0 auto;
}

.contact-form input,
.contact-form textarea {
  color: #000;
  width: 100%;
  padding: 10px;
  margin-bottom: 15px;
  border: none;
  border-radius: 5px;
}

.contact-form label {
  display: block;
  text-align: left;
  margin-bottom: 5px;
}

.contact-checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
}

.contact-checkbox a {
  color: #ff9933;
  text-decoration: none;
}

.contact-checkbox a:hover {
  text-decoration: underline;
}

.contact-submit {
  padding: 15px 30px;
  background: #ff9933;
  color: #333333;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.3s ease;
}

.contact-submit:hover {
  background: #138808;
  color: #ffffff;
}

/* Responsive design */
@media (max-width: 768px) {
  .contact-hero-image h1 {
    font-size: 2rem;
  }

  .contact-quick-facts {
    grid-template-columns: 1fr;
  }

  .contact-map-iframe {
    height: 300px;
  }

  .contact-closing-banner {
    font-size: 1rem;
  }
}

#privacy {
  width: 15px;
}

/* Unique styles for thanks.html with Indian gaming theme */
.thanks-page {
  margin: 0;
  padding: 0;
  font-family: "Arial", sans-serif;
  color: #ffffff;
  background: linear-gradient(45deg, #138808, #ff9933, #00008b);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  overflow: hidden;
  position: relative;
}

.thanks-title {
  font-size: 2rem;
  margin-bottom: 30px;
  text-shadow: 0 0 10px rgba(155, 89, 182, 0.7);
  animation: thanks-glow 1.5s ease-in-out infinite alternate;
}

@keyframes thanks-glow {
  from {
    text-shadow: 0 0 10px rgba(155, 89, 182, 0.7);
  }
  to {
    text-shadow: 0 0 20px rgba(155, 89, 182, 1);
  }
}

.thanks-message {
  font-size: 1.4rem;
  max-width: 700px;
  margin-bottom: 40px;
  line-height: 1.7;
  animation: thanks-slide-up 1.2s ease-out;
}

@keyframes thanks-slide-up {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.thanks-home-link {
  padding: 12px 35px;
  background: #9b59b6;
  color: #ffffff;
  border-radius: 40px;
  text-decoration: none;
  font-weight: bold;
  font-size: 1.2rem;
  transition: background 0.3s ease, box-shadow 0.3s ease;
  animation: thanks-bounce 1.5s ease-out;
}

.thanks-home-link:hover {
  background: #ff9933;
  box-shadow: 0 0 15px rgba(255, 153, 51, 0.8);
}

@keyframes thanks-bounce {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Unique background effect for thanks page */
.thanks-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("img/bg-app7.jpg") repeat;
  opacity: 0.15;
  z-index: -1;
  animation: thanks-pattern-move 20s linear infinite;
}

@keyframes thanks-pattern-move {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 50px 50px;
  }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .thanks-title {
    font-size: 2rem;
  }

  .thanks-message {
    font-size: 1.2rem;
    padding: 0 5px;
  }

  .thanks-home-link {
    padding: 10px 25px;
    font-size: 1rem;
  }
}

/* Unique styles for privacy-policy.html with Indian gaming theme */
.privacy-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 5px;
  font-family: "Arial", sans-serif;
  color: #333333;
  background: #ffffff;
  line-height: 1.6;
}

.privacy-title {
  font-size: 2rem;
  color: #138808;
  text-align: center;
  margin-bottom: 40px;
  margin-top: 100px;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}

.privacy-section {
  margin-bottom: 10px;
}

.privacy-section h2 {
  font-size: 1rem;
  color: #ff9933;
  margin-bottom: 15px;
  border-left: 4px solid #00008b;
  padding-left: 15px;
}

.privacy-section p {
  font-size: 1.1rem;
  margin-bottom: 15px;
}

.privacy-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.privacy-list-item {
  background: #f0f0f0;
  padding: 20px;
  margin-bottom: 15px;
  border-radius: 8px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.privacy-list-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.privacy-list-item h3 {
  font-size: 1.4rem;
  color: #00008b;
  margin-bottom: 10px;
}

.privacy-list-item p {
  margin: 0;
}

.privacy-link {
  color: #9b59b6;
  text-decoration: none;
  font-weight: bold;
}

.privacy-link:hover {
  text-decoration: underline;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .privacy-container {
    padding: 20px;
  }

  .privacy-title {
    font-size: 2rem;
  }

  .privacy-section h2 {
    font-size: 1rem;
  }

  .privacy-list-item h3 {
    font-size: 1.2rem;
  }

  .privacy-list-item p {
    font-size: 1rem;
  }
}

/* Unique styles for terms-conditions.html with Indian gaming theme, matching privacy-policy.html */
.terms-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 5px;
  font-family: "Arial", sans-serif;
  color: #333333;
  background: #ffffff;
  line-height: 1.6;
}

.terms-title {
  font-size: 2rem;
  color: #138808;
  text-align: center;
  margin-bottom: 40px;
  margin-top: 100px;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}

.terms-section {
  margin-bottom: 10px;
}

.terms-section h2 {
  font-size: 1rem;
  color: #ff9933;
  margin-bottom: 15px;
  border-left: 4px solid #00008b;
  padding-left: 15px;
}

.terms-section p {
  font-size: 1.1rem;
  margin-bottom: 15px;
}

.terms-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.terms-list-item {
  background: #f0f0f0;
  padding: 20px;
  margin-bottom: 15px;
  border-radius: 8px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.terms-list-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.terms-list-item h3 {
  font-size: 1.4rem;
  color: #00008b;
  margin-bottom: 10px;
}

.terms-list-item p {
  margin: 0;
}

.terms-link {
  color: #9b59b6;
  text-decoration: none;
  font-weight: bold;
}

.terms-link:hover {
  text-decoration: underline;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .terms-container {
    padding: 20px;
  }

  .terms-title {
    font-size: 2rem;
  }

  .terms-section h2 {
    font-size: 1rem;
  }

  .terms-list-item h3 {
    font-size: 1.2rem;
  }

  .terms-list-item p {
    font-size: 1rem;
  }
}