/* BASE CSS - Global Layout and Responsive Styles Only */
/* All section-specific styles moved to assets/css/sections/ */

.hero-section-v-3,
.hero-section-v-3 * {
  box-sizing: border-box;
}

.hero-section-v-3 {
  background: #ECECEC;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

/* Container for centering content on large screens */
.hero-section-v-3 > .content-wrapper {
  max-width: 1440px;
  width: 100%;
  margin: 0 auto;
  padding: 0;
}


/* Responsive adjustments */
/* @media (max-width: 768px) {
  .hero-section-v-3 > .content-wrapper {
    padding: 0 15px;
  }
} */

/* Global utility classes */
.group-37790 {
  position: absolute;
  inset: 0;
}

/* Common layout utilities */
.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.content-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Section spacing */
.section-spacing {
  margin: 60px 0;
}

/* Base button styles */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  border: none;
  text-decoration: none;
}

.btn-primary {
  background-color: #ff7a00;
  color: rgba(17, 17, 17, 0.95);
  border: none;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2),
              inset 0 2px 4px rgba(255, 255, 255, 0.4);
  background-image: radial-gradient(circle at 50% 0%, rgba(255,255,255,0.8), rgba(255,255,255,0) 70%),
                    linear-gradient(90deg, #ff7a00 0%, #ff9f40 100%);
}

.btn-secondary {
  background: transparent;
  color: #ff7a00;
  border: 2px solid #ff7a00;
}

/* Typography helpers */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.font-bold { font-weight: 700; }
.font-semibold { font-weight: 600; }
.font-medium { font-weight: 500; }

/* Spacing helpers */
.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; }
.mt-4 { margin-top: 32px; }

.mb-1 { margin-bottom: 8px; }
.mb-2 { margin-bottom: 16px; }
.mb-3 { margin-bottom: 24px; }
.mb-4 { margin-bottom: 32px; }

/* Global Styles */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: #ECECEC;
}

/* Prevent background scroll when mobile nav is open */
body.no-scroll {
  overflow: hidden;
}

.container {
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 70px;
  padding-right: 70px;
}

@media (max-width: 768px) {
  .container {
    padding-left: 15px;
    padding-right: 15px;
  }

  .content-container {
    padding: 0 15px;
  }
}

a {
  color: inherit;
}

/* 
NOTE: All section-specific styles have been moved to their respective files:
- Header styles → assets/css/sections/header.css
- Hero styles → assets/css/sections/hero.css  
- Winners styles → assets/css/sections/winners.css
- Game stats → assets/css/sections/game-stats.css
- Game description → assets/css/sections/game-description.css
- Difficulty modes → assets/css/sections/difficulty-modes.css
- Features → assets/css/sections/features.css
- Game tables → assets/css/sections/game-tables.css
- Strategy → assets/css/sections/strategy.css
- Mobile → assets/css/sections/mobile.css
- Pros & Cons → assets/css/sections/pros-cons.css
- Gallery → assets/css/sections/gallery.css (pending)
- How to Play → assets/css/sections/how-to-play.css (pending)
- Testimonials → assets/css/sections/testimonials.css (pending)
- Feedback → assets/css/sections/feedback.css (pending)
- FAQ → assets/css/sections/faq.css (pending)
- Author → assets/css/sections/author.css (pending)
- Footer → assets/css/sections/footer.css (pending)
*/