:root {
      --primary: #4a2f76;
      --secondary: #ffffff;
      --light-gray: #f8f9fa;
      --medium-gray: #e9ecef;
      --dark-gray: #343a40;
      --accent: #00dba0;
      --accent-dark: #00c090;
      --gold: #ffc107;
      --warning-bg: #fff3cd;
      --warning-text: #664d03;
      --warning-border: #ffeeba;
      --info-bg: #e7f3fe;
      --info-border: #d0e3f0;
    }
    
    /* --- Base & Mobile First Styles --- */
    body {
      font-family: 'Montserrat', sans-serif;
      color: var(--dark-gray);
      line-height: 1.55;
      background-color: var(--light-gray);
      margin: 0;
      padding-top: 35px;
      font-size: 15px;
    }
    
    h1, h2, h3 {
      color: var(--primary);
      font-weight: 700;
      margin-bottom: 0.6em;
    }
    
    h1 { font-size: 1.6rem; }
    h2 { font-size: 1.4rem; }
    h3 { font-size: 1.2rem; }
    
    p {
      margin-bottom: 0.8rem;
    }
    
    a {
      color: var(--accent);
      text-decoration: none;
    }
    a:hover {
      color: var(--accent-dark);
      text-decoration: underline;
    }
    
    /* --- Utility Classes --- */
    .section-padding {
      padding: 25px 0;
    }
    .text-small {
      font-size: 0.8rem;
    }
    .text-muted-light {
      color: #6c757d;
    }
    
    /* --- Components --- */
    
    /* Sticky Disclaimer Bar */
    .disclaimer-bar {
      background-color: var(--dark-gray);
      color: var(--secondary);
      padding: 8px 15px;
      text-align: center;
      font-size: 0.75rem;
      font-weight: 500;
      border-bottom: 2px solid var(--accent);
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 1050;
    }
    .disclaimer-bar a {
      color: var(--accent);
      font-weight: 600;
      text-decoration: underline;
    }
    .disclaimer-bar i {
      margin-right: 3px;
    }
    
    /* Header */
    header[role="banner"] {
      background-color: var(--secondary);
      padding: 12px 0;
      text-align: center;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }
    header img {
      max-height: 32px;
    }
    
    /* Hero Section */
    .hero {
      text-align: center;
      padding: 30px 15px;
      background-color: var(--primary);
      color: var(--secondary);
    }
    .hero h1 {
      color: var(--secondary);
      margin-bottom: 10px;
    }
    .hero p {
      font-size: 0.95rem;
      margin-bottom: 20px;
      max-width: 600px;
      margin-left: auto;
      margin-right: auto;
      opacity: 0.9;
    }
     .btn.btn-accent {
      color: var(--primary) !important;
      font-weight: 700;
      padding: 10px 25px;
      border-radius: 50px;
      border: none;
      font-size: 0.95rem;
      transition: all 0.3s ease;
      text-decoration: none;
      display: inline-block;
      box-shadow: 0 3px 8px rgba(0, 219, 160, 0.25);
    }
    .btn.btn-accent:hover {
      background-color: var(--accent-dark) !important;
      color: var(--secondary) !important;
      text-decoration: none;
      transform: translateY(-1px);
      box-shadow: 0 4px 10px rgba(0, 219, 160, 0.35);
    }
    /* Important Info Box (Above Table) */
    .important-info-box {
      background-color: var(--info-bg);
      border: 1px solid var(--info-border);
      border-left: 4px solid var(--primary);
      padding: 15px;
      margin-bottom: 25px;
      border-radius: 6px;
      font-size: 0.85rem;
    }
    .important-info-box h3 {
      font-size: 1.1rem;
      margin-top: 0;
      margin-bottom: 10px;
      color: var(--primary);
      font-weight: 600;
    }
    .important-info-box h3 i {
      margin-right: 5px;
    }
    .important-info-box p {
      margin-bottom: 8px;
    }
    .important-info-box ul {
      padding-left: 18px;
      margin-bottom: 0;
      list-style-position: outside;
    }
    .important-info-box li {
      margin-bottom: 4px;
    }
    .important-info-box strong {
      color: var(--dark-gray);
      font-weight: 600;
    }
    
    /* Casino Table Section Styling */
    #casino-listings-section {
      background-color: var(--secondary);
      border-radius: 8px;
      box-shadow: 0 3px 10px rgba(0,0,0,0.06);
      padding: 15px 0;
      margin-bottom: 25px;
    }
    #casino-listings-section h2 {
      text-align: center;
      margin-bottom: 15px;
    }
    
    /* Casino Table */
    .casino-table-wrapper {
      margin: 0 5px;
    }
    .casino-table {
      border-radius: 6px;
      overflow: hidden;
      margin-bottom: 0;
      width: 100%;
      font-size: 0.8rem;
    }
    .casino-table th,
    .casino-table td {
      padding: 10px 6px;
      text-align: center;
      vertical-align: middle;
      border: none;
      border-bottom: 1px solid var(--medium-gray);
    }
    .casino-table thead th {
      background-color: var(--primary);
      color: var(--secondary);
      font-weight: 600;
      font-size: 0.85rem;
      white-space: nowrap;
      border-bottom: 2px solid var(--accent);
    }
    .casino-table tbody tr:nth-of-type(odd) {
      background-color: var(--light-gray);
    }
    .casino-table tbody tr:hover {
      background-color: var(--medium-gray);
    }
    .casino-table tbody tr td:first-child,
    .casino-table thead tr th:first-child {
      border-left: 1px solid var(--medium-gray);
    }
    .casino-table tbody tr td:last-child,
    .casino-table thead tr th:last-child {
      border-right: 1px solid var(--medium-gray);
    }
    
    .casino-table img {
      max-height: 35px;
      max-width: 90px;
      display: block;
      margin: 0 auto;
    }
    .casino-table .rating .fa-star,
    .casino-table .rating .fa-star-half-alt {
      color: var(--gold);
      margin: 0 1px;
      font-size: 0.9em;
    }
    .casino-table .rating .fa-star.far {
      color: #adb5bd;
    }
    .casino-table .details {
      font-size: 0.7rem;
      color: #6c757d;
      line-height: 1.3;
    }
    .casino-table .btn-play {
      background-color: var(--accent);
      color: var(--primary);
      font-size: 0.75rem;
      padding: 6px 14px;
      border-radius: 15px;
      border: none;
      transition: all 0.2s ease;
      text-decoration: none;
      font-weight: 600;
      white-space: nowrap;
    }
	#casino-listings-heading, #content-heading {
	  border: 3px solid;
	  padding: 5px;
	  border-radius: 3px
	}
    .casino-table .btn-play:hover {
      background-color: var(--accent-dark);
      color: var(--secondary);
      text-decoration: none;
      transform: scale(1.03);
    }
    
    /* Content Section */
    .content-section {
      background-color: var(--secondary);
      padding: 25px 15px;
      margin-top: 25px;
      border-radius: 8px;
      box-shadow: 0 1px 5px rgba(0, 0, 0, 0.05);
    }
    .content-section h2 {
      text-align: center;
      margin-bottom: 20px;
    }
    .content-section h3 {
      margin-top: 20px;
      margin-bottom: 10px;
      font-weight: 600;
    }
    .content-section p, .content-section ul {
      font-size: 0.9rem;
      margin-bottom: 12px;
      max-width: 750px;
      margin-left: auto;
      margin-right: auto;
    }
    .content-section ul {
      list-style: none;
      padding-left: 0;
    }
    .content-section ul li {
      position: relative;
      padding-left: 22px;
      margin-bottom: 8px;
    }
    .content-section ul li::before {
      content: "\f00c";
      font-family: "Font Awesome 6 Free";
      font-weight: 900;
      position: absolute;
      left: 0;
      top: 3px;
      color: var(--accent);
      font-size: 0.85em;
    }
    
    /* Footer */
    footer[role="contentinfo"] {
      background-color: var(--dark-gray);
      color: var(--light-gray);
      padding: 25px 15px;
      text-align: center;
      font-size: 0.8rem;
      margin-top: 30px;
    }
    footer .footer-links a {
      color: var(--accent);
      margin: 0 6px 8px;
      display: inline-block;
    }
    footer .footer-links a:hover {
      color: var(--secondary);
    }
    footer .responsible-gambling {
      margin-top: 15px;
      font-weight: 500;
      font-size: 0.85rem;
      border-top: 1px solid #495057;
      padding-top: 15px;
    }
    footer .responsible-gambling strong {
      display: block;
      margin-bottom: 5px;
      color: var(--secondary);
    }
    footer .responsible-gambling a {
      color: var(--accent);
      text-decoration: underline;
    }
    footer .affiliate-disclosure {
      margin-top: 15px;
      font-size: 0.7rem;
      opacity: 0.65;
      max-width: 650px;
      margin-left: auto;
      margin-right: auto;
      line-height: 1.4;
    }
    footer .copyright {
      margin-top: 20px;
      font-size: 0.75rem;
      opacity: 0.5;
    }
    
    /* --- Tablet Adjustments (min-width: 768px) --- */
    @media (min-width: 768px) {
      body {
        padding-top: 45px;
        font-size: 15.5px;
      }
      .disclaimer-bar {
        font-size: 0.9rem;
        padding: 15px;
      }
      
      h1 { font-size: 2.2rem; }
      h2 { font-size: 1.8rem; }
      h3 { font-size: 1.4rem; }
      
      .section-padding {
        padding: 35px 0;
      }
      
      header img {
        max-height: 40px;
      }
      
      .hero { padding: 40px 15px; }
      .hero p { font-size: 1rem; }
      
      .important-info-box {
        padding: 20px;
        font-size: 0.9rem;
      }
      .important-info-box h3 { font-size: 1.2rem; }
      
      #casino-listings-section { padding: 25px; }
      .casino-table-wrapper { margin: 0; }
      
      .casino-table { font-size: 0.85rem; }
      .casino-table th,
      .casino-table td {
        padding: 12px 10px;
      }
      .casino-table .details { font-size: 0.75rem; }
      .casino-table .btn-play {
        font-size: 0.85rem;
        padding: 8px 18px;
      }
      .casino-table img { max-height: 40px; max-width: 110px; }
      
      .content-section { padding: 30px 15px; }
      .content-section p, .content-section ul { font-size: 0.95rem; }
      
      footer[role="contentinfo"] { padding: 35px 15px; }
      footer .footer-links a { margin: 0 10px; }
      footer .responsible-gambling { font-size: 0.9rem; }
      footer .affiliate-disclosure { font-size: 0.75rem; }
      footer .copyright { font-size: 0.8rem; }
    }
    
    /* --- Desktop Adjustments (min-width: 992px) --- */
    @media (min-width: 992px) {
      h1 { font-size: 2.5rem; }
      .section-padding { padding: 40px 0; }
      .casino-table { font-size: 0.9rem; }
      .casino-table th,
      .casino-table td { font-size: 0.95rem; padding: 14px 12px; }
      .casino-table .details { font-size: 0.8rem; }
      .content-section p, .content-section ul { font-size: 1rem; }
    }
    
    /* Visually Hidden Class */
    .visually-hidden {
      position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
      overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
    }