/* ============================================================
   RESPONSIVE STYLES — media.css
   Breakpoints: 1200px, 991px, 768px, 480px
   ============================================================ */

/* ----------------------------------------------------------
   1200px — Large desktops / smaller monitors
   ---------------------------------------------------------- */
@media (max-width: 1200px) {
  .banner-wrapper h1 {
    font-size: 3rem;
  }

  .banner-wrapper h2 {
    font-size: 1.3rem;
  }

  .title-wrapper h2 {
    font-size: 2.2rem;
  }

  .why-choose-us .content-wrapper .row {
    gap: 1.5rem;
  }

  .analyze {
    padding: 2rem;
  }

  .leading-swc-wrapper {
    padding: 3rem 2rem;
  }

  .leading-swc-wrapper h2 {
    font-size: 2rem;
  }
}

/* ----------------------------------------------------------
   991px — Tablets (landscape) / small laptops
   ---------------------------------------------------------- */
@media (max-width: 991px) {
  /* --- General spacing --- */
  section {
    padding: 60px 0;
  }

  .container {
    padding-left: 20px;
    padding-right: 20px;
  }

  /* --- Navbar --- */
  .navbar-collapse {
    background: var(--dark-card, #16162a);
    border-radius: var(--radius, 12px);
    padding: 1rem 1.5rem;
    margin-top: 0.75rem;
    border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
    box-shadow: var(--shadow, 0 4px 24px rgba(0, 0, 0, 0.3));
  }

  .navbar-nav {
    gap: 0.25rem;
  }

  .navbar-nav .nav-link {
    padding: 0.6rem 0.75rem;
    border-radius: 8px;
  }

  .navbar-nav .nav-link:hover,
  .navbar-nav .nav-link.active {
    background: rgba(255, 255, 255, 0.05);
  }

  /* --- Banner / Hero --- */
  .banner {
    padding: 80px 0 60px;
    min-height: auto;
  }

  .banner-wrapper {
    text-align: center;
  }

  .banner-wrapper h1 {
    font-size: 2.5rem;
    line-height: 1.2;
  }

  .banner-wrapper h2 {
    font-size: 1.15rem;
  }

  .banner-wrapper p {
    font-size: 1rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
  }

  .banner-stats {
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
  }

  /* --- Activity Feed --- */
  .activity-feed {
    font-size: 0.85rem;
  }

  /* --- Title Wrapper (section headings) --- */
  .title-wrapper h2 {
    font-size: 2rem;
  }

  .title-wrapper p {
    font-size: 0.95rem;
    max-width: 500px;
  }

  /* --- Games Grid --- */
  .games .single-game {
    margin-bottom: 1rem;
  }

  /* --- Bonus / Benefits --- */
  .single-bonus {
    padding: 1.5rem;
    margin-bottom: 1rem;
  }

  .bonus-icon {
    width: 56px;
    height: 56px;
    font-size: 1.4rem;
  }

  .single-bonus h2 {
    font-size: 1.2rem;
  }

  /* --- How It Works --- */
  .steps-row {
    flex-direction: column;
    align-items: center;
  }

  .how-it-works .connecting-line,
  .how-it-works .step-connector {
    display: none;
  }

  .step-item {
    max-width: 480px;
    width: 100%;
    margin-bottom: 1.5rem;
  }

  /* --- Why Choose Us --- */
  .why-choose-us .content-wrapper .row {
    flex-direction: column;
  }

  .why-choose-us .content-wrapper .row > [class*="col-"] {
    width: 100%;
    max-width: 100%;
  }

  .why-choose-us .content-wrapper img {
    max-width: 100%;
    height: auto;
    margin-bottom: 1.5rem;
    border-radius: var(--radius, 12px);
  }

  .analyze {
    padding: 1.5rem;
    margin-top: 1.5rem;
  }

  .analyze-icons {
    gap: 1rem;
    flex-wrap: wrap;
  }

  .analyze-icons img,
  .analyze-icons svg {
    width: 40px;
    height: 40px;
  }

  /* --- Testimonials --- */
  .testimonials .single-testimonial {
    margin-bottom: 1rem;
  }

  /* --- FAQ --- */
  .faq-wrapper {
    max-width: 100%;
  }

  .accordion-button {
    font-size: 0.95rem;
    padding: 1rem 1.25rem;
  }

  .accordion-body {
    font-size: 0.9rem;
  }

  /* --- CTA Section --- */
  .leading-swc {
    padding: 60px 0;
  }

  .leading-swc-wrapper {
    padding: 2.5rem 2rem;
    border-radius: var(--radius, 12px);
  }

  .leading-swc-wrapper h2 {
    font-size: 1.8rem;
  }

  .leading-swc-wrapper p {
    font-size: 0.95rem;
  }

  /* --- Category Buttons (inside games) --- */
  .games .category-buttons {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    justify-content: flex-start;
    padding-bottom: 8px;
  }

  /* --- Features Combined --- */
  .features-combined {
    padding: 60px 0;
  }

  .features-combined .section-divider {
    margin: 40px auto;
  }

  .step-connector {
    display: none;
  }

  /* --- Trust Section --- */
  .trust-section .row {
    flex-direction: column;
  }

  .trust-section .row > [class*="col-"] {
    width: 100%;
    max-width: 100%;
  }

  .trust-content {
    margin-bottom: 2rem;
  }

  .testimonials-stack {
    flex-direction: row;
    overflow-x: auto;
    gap: 16px;
  }

  .testimonials-stack .testimonial-card {
    min-width: 280px;
    flex-shrink: 0;
  }

  /* --- FAQ CTA --- */
  .faq-cta {
    padding: 36px 24px;
    margin-top: 40px;
  }

  .faq-cta h3 {
    font-size: 1.5rem;
  }

  /* --- Notice Banner --- */
  .notice-banner {
    padding: 12px 0;
  }

  .notice-banner p {
    font-size: 0.82rem;
  }

  /* --- Footer --- */
  footer .row {
    gap: 1.5rem;
  }

  footer .row > [class*="col-"] {
    text-align: center;
  }

  .footer-page-link {
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.75rem;
  }

  /* --- Breadcrumb --- */
  .breadcrumb-cc h1 {
    font-size: 2rem;
  }

  /* --- Content pages (Privacy / Terms) --- */
  .content .content-wrapper {
    padding: 2rem 1.5rem;
  }

  .content .content-wrapper h2 {
    font-size: 1.5rem;
  }

  .content .content-wrapper h3 {
    font-size: 1.2rem;
  }
}

/* ----------------------------------------------------------
   768px — Tablets (portrait) / large phones
   ---------------------------------------------------------- */
@media (max-width: 768px) {
  /* --- General spacing --- */
  section {
    padding: 50px 0;
  }

  /* --- Blobs / Decorative elements --- */
  .blob,
  .decoration-blob,
  .bg-blob {
    display: none !important;
  }

  /* --- Banner / Hero --- */
  .banner {
    padding: 70px 0 50px;
  }

  .banner-wrapper h1 {
    font-size: 2rem;
    line-height: 1.2;
  }

  .banner-wrapper h2 {
    font-size: 1.05rem;
  }

  .banner-wrapper p {
    font-size: 0.9rem;
  }

  .banner-stats {
    display: none;
  }

  .banner-particles,
  .particle {
    opacity: 0.3;
  }

  /* --- Activity Feed --- */
  .activity-feed {
    font-size: 0.8rem;
    padding: 0.4rem 0.75rem;
  }

  /* --- Alert Banner --- */
  .alert-sec {
    font-size: 0.85rem;
    padding: 0.5rem 0;
  }

  /* --- Title Wrapper --- */
  .title-wrapper {
    margin-bottom: 2rem;
  }

  .title-wrapper h2 {
    font-size: 1.6rem;
    line-height: 1.3;
  }

  .title-wrapper p {
    font-size: 0.9rem;
  }

  /* --- Primary Button --- */
  .primary-btn {
    width: 100%;
    text-align: center;
    padding: 0.85rem 1.5rem;
    font-size: 0.95rem;
  }

  /* --- Notice Card --- */
  .bet-card {
    padding: 0 15px;
  }

  .single-card {
    padding: 1.25rem 1rem;
  }

  .card-desc {
    font-size: 0.85rem;
    flex-direction: column;
    text-align: center;
    gap: 0.75rem;
  }

  .card-desc .age-badge,
  .card-desc .badge-18 {
    margin: 0 auto;
  }

  /* --- Games Grid --- */
  .games .row {
    gap: 1rem 0;
  }

  .single-game {
    margin-bottom: 0.75rem;
  }

  .single-game img {
    border-radius: 10px;
  }

  .single-game h3,
  .single-game .game-title {
    font-size: 0.9rem;
  }

  /* --- Bonus / Benefits --- */
  .bonus .row {
    gap: 1rem 0;
  }

  .single-bonus {
    padding: 1.25rem;
    text-align: center;
  }

  .bonus-icon {
    width: 50px;
    height: 50px;
    font-size: 1.2rem;
    margin: 0 auto 0.75rem;
  }

  .single-bonus h2 {
    font-size: 1.1rem;
  }

  .single-bonus p {
    font-size: 0.85rem;
  }

  /* --- How It Works --- */
  .how-it-works .step-number,
  .how-it-works .step-num {
    width: 40px;
    height: 40px;
    font-size: 1rem;
  }

  /* --- Why Choose Us --- */
  .why-choose-us {
    padding: 50px 0;
  }

  .why-choose-us .title-wrapper {
    text-align: center;
  }

  .content-wrapper {
    padding: 1.5rem;
  }

  .analyze {
    padding: 1.25rem;
  }

  .analyze-logo {
    flex-direction: column;
    text-align: center;
    gap: 0.5rem;
  }

  .analyze-logo img,
  .analyze-logo svg {
    width: 36px;
    height: 36px;
  }

  .analyze-icons {
    justify-content: center;
  }

  .analyze-icons img,
  .analyze-icons svg {
    width: 36px;
    height: 36px;
  }

  /* --- Testimonials --- */
  .testimonials .row > [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .single-testimonial {
    margin-bottom: 1rem;
  }

  /* --- FAQ --- */
  .faq {
    padding: 50px 0;
  }

  .faq-wrapper {
    padding: 0;
  }

  .accordion-button {
    font-size: 0.9rem;
    padding: 0.85rem 1rem;
    gap: 0.5rem;
  }

  .accordion-body {
    font-size: 0.85rem;
    padding: 0.75rem 1rem 1rem;
  }

  /* --- CTA Section --- */
  .leading-swc {
    padding: 50px 0;
  }

  .leading-swc-wrapper {
    padding: 2rem 1.5rem;
    text-align: center;
  }

  .leading-swc-wrapper h2 {
    font-size: 1.5rem;
    line-height: 1.3;
  }

  .leading-swc-wrapper p {
    font-size: 0.9rem;
    margin-bottom: 1.25rem;
  }

  /* --- Hero Badge --- */
  .hero-badge {
    font-size: 0.75rem;
    padding: 6px 14px;
  }

  /* --- Trust Section --- */
  .testimonials-stack {
    flex-direction: column;
  }

  .testimonials-stack .testimonial-card {
    min-width: auto;
  }

  .trust-content {
    padding: 20px;
  }

  /* --- FAQ CTA --- */
  .faq-cta {
    padding: 30px 20px;
  }

  .faq-cta h3 {
    font-size: 1.3rem;
  }

  /* --- Notice Banner --- */
  .notice-banner p {
    font-size: 0.8rem;
  }

  /* --- Footer --- */
  footer {
    padding: 40px 0 20px;
    text-align: center;
  }

  footer .row > [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
    margin-bottom: 1.25rem;
  }

  .footer-page-link {
    justify-content: center;
    gap: 0.5rem 1rem;
  }

  .footer-page-link a {
    font-size: 0.85rem;
  }

  .copyright {
    font-size: 0.8rem;
    text-align: center;
    margin-top: 1rem;
  }

  /* --- Breadcrumb (subpages) --- */
  .breadcrumb-cc {
    padding: 30px 0;
  }

  .breadcrumb-cc h1 {
    font-size: 1.6rem;
  }

  /* --- Content Pages (Privacy / Terms) --- */
  .content {
    padding: 40px 0;
  }

  .content .content-wrapper {
    padding: 1.5rem 1.25rem;
  }

  .content .content-wrapper h2 {
    font-size: 1.3rem;
  }

  .content .content-wrapper h3 {
    font-size: 1.1rem;
  }

  .content .content-wrapper p,
  .content .content-wrapper li {
    font-size: 0.88rem;
    line-height: 1.7;
  }

  .content .content-wrapper ul {
    padding-left: 1.25rem;
  }
}

/* ----------------------------------------------------------
   480px — Small phones
   ---------------------------------------------------------- */
@media (max-width: 480px) {
  /* --- General spacing --- */
  section {
    padding: 40px 0;
  }

  .container {
    padding-left: 15px;
    padding-right: 15px;
  }

  /* --- Navbar --- */
  .navbar {
    padding: 0.5rem 0;
  }

  .navbar-brand {
    font-size: 0.9rem;
  }

  .navbar-brand img,
  .navbar-brand svg {
    width: 28px;
    height: 28px;
  }

  .logo-text {
    font-size: 1rem;
  }

  .navbar-collapse {
    padding: 0.75rem 1rem;
  }

  /* --- Banner / Hero --- */
  .banner {
    padding: 60px 0 40px;
  }

  .banner-wrapper h1 {
    font-size: 1.6rem;
    line-height: 1.25;
    word-break: break-word;
  }

  .banner-wrapper h2 {
    font-size: 0.95rem;
  }

  .banner-wrapper p {
    font-size: 0.85rem;
    line-height: 1.6;
  }

  /* --- Activity Feed --- */
  .activity-feed {
    font-size: 0.75rem;
    padding: 0.35rem 0.5rem;
  }

  /* --- Alert Banner --- */
  .alert-sec {
    font-size: 0.78rem;
    padding: 0.4rem 0;
  }

  .alert-sec .container {
    padding-left: 10px;
    padding-right: 10px;
  }

  /* --- Title Wrapper --- */
  .title-wrapper {
    margin-bottom: 1.5rem;
  }

  .title-wrapper h2 {
    font-size: 1.4rem;
    line-height: 1.3;
  }

  .title-wrapper p {
    font-size: 0.85rem;
  }

  /* --- Primary Button --- */
  .primary-btn {
    padding: 0.75rem 1.25rem;
    font-size: 0.9rem;
    border-radius: 10px;
  }

  /* --- Notice Card --- */
  .single-card {
    padding: 1rem 0.75rem;
    border-radius: 10px;
  }

  .card-desc {
    font-size: 0.8rem;
    gap: 0.5rem;
  }

  /* --- Games Grid --- */
  .games {
    padding: 40px 0;
  }

  .games .row > [class*="col-"] {
    flex: 0 0 50%;
    max-width: 50%;
    padding-left: 6px;
    padding-right: 6px;
  }

  .single-game {
    margin-bottom: 0.5rem;
  }

  .single-game img {
    border-radius: 8px;
  }

  .single-game h3,
  .single-game .game-title {
    font-size: 0.8rem;
    margin-top: 0.35rem;
  }

  .single-game .game-overlay,
  .single-game .game-info {
    padding: 0.5rem;
  }

  /* --- Bonus / Benefits --- */
  .bonus {
    padding: 40px 0;
  }

  .bonus .row > [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .single-bonus {
    padding: 1rem;
    margin-bottom: 0.75rem;
  }

  .single-bonus h2 {
    font-size: 1rem;
  }

  .single-bonus p {
    font-size: 0.82rem;
  }

  .bonus-icon {
    width: 44px;
    height: 44px;
    font-size: 1.1rem;
  }

  /* --- How It Works --- */
  .how-it-works .step,
  .how-it-works .single-step {
    padding: 1rem;
  }

  .how-it-works .step h3,
  .how-it-works .single-step h3 {
    font-size: 1rem;
  }

  .how-it-works .step p,
  .how-it-works .single-step p {
    font-size: 0.82rem;
  }

  /* --- Why Choose Us --- */
  .why-choose-us {
    padding: 40px 0;
  }

  .content-wrapper {
    padding: 1.25rem 1rem;
    border-radius: 10px;
  }

  .content-wrapper p {
    font-size: 0.85rem;
  }

  .analyze {
    padding: 1rem;
    border-radius: 10px;
  }

  .analyze p {
    font-size: 0.82rem;
  }

  .analyze-logo .logo-text,
  .analyze-logo span {
    font-size: 0.9rem;
  }

  .analyze-icons {
    gap: 0.75rem;
  }

  .analyze-icons img,
  .analyze-icons svg {
    width: 32px;
    height: 32px;
  }

  /* --- Testimonials --- */
  .single-testimonial {
    padding: 1rem;
  }

  .single-testimonial p {
    font-size: 0.82rem;
  }

  /* --- FAQ --- */
  .faq {
    padding: 40px 0;
  }

  .accordion-button {
    font-size: 0.85rem;
    padding: 0.75rem 0.85rem;
  }

  .accordion-body {
    font-size: 0.82rem;
    padding: 0.6rem 0.85rem 0.85rem;
    line-height: 1.7;
  }

  .accordion-button::after {
    width: 14px;
    height: 14px;
    background-size: 14px;
  }

  /* --- CTA Section --- */
  .leading-swc {
    padding: 40px 0;
  }

  .leading-swc-wrapper {
    padding: 1.5rem 1.25rem;
    border-radius: 10px;
  }

  .leading-swc-wrapper h2 {
    font-size: 1.3rem;
  }

  .leading-swc-wrapper p {
    font-size: 0.85rem;
  }

  /* --- Category Section --- */
  .category-section {
    padding: 0.5rem 0;
  }

  .category-section .category-item,
  .category-section .category-btn {
    padding: 0.4rem 0.75rem;
    font-size: 0.75rem;
    white-space: nowrap;
  }

  /* --- Footer --- */
  footer {
    padding: 30px 0 15px;
  }

  .footer-page-link {
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
  }

  .footer-page-link a {
    font-size: 0.82rem;
  }

  .copyright {
    font-size: 0.75rem;
  }

  footer .logo-text {
    font-size: 0.9rem;
  }

  /* --- Breadcrumb (subpages) --- */
  .breadcrumb-cc {
    padding: 20px 0;
  }

  .breadcrumb-cc h1 {
    font-size: 1.35rem;
  }

  /* --- Content Pages (Privacy / Terms) --- */
  .content {
    padding: 30px 0;
  }

  .content .content-wrapper {
    padding: 1.25rem 1rem;
    border-radius: 10px;
  }

  .content .content-wrapper h2 {
    font-size: 1.15rem;
    margin-bottom: 0.6rem;
  }

  .content .content-wrapper h3 {
    font-size: 1rem;
  }

  .content .content-wrapper p,
  .content .content-wrapper li {
    font-size: 0.82rem;
    line-height: 1.65;
  }

  /* --- Overflow prevention --- */
  img,
  video,
  iframe,
  table {
    max-width: 100%;
  }

  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  pre,
  code {
    word-break: break-all;
    white-space: pre-wrap;
  }
}