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

/* Body Styling */
body {
   font-family: "Helvetica", sans-serif;
  line-height: 1.6;
  background: #f4f4f4;
  color: #333;
}

/* Container for central content (limits width on desktop) */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

/* Header Styling */
/* Basic Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Header Styles */
.site-header {
  background: linear-gradient(135deg, #243642, #387478);
  color: #fff;
}

/* Container to center header content and control width */
.header-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Logo */
.logo img {
  max-height: 50px;
}

/* Navigation Menu (default desktop display) */
.nav-menu ul {
  list-style: none;
  display: flex;
  gap: 20px;
}

.nav-menu ul li a {
  color: #fed402;
  text-decoration: none;
  font-weight: bold;
  transition: color 0.3s ease;
}

.nav-menu ul li a:hover {
  color: #fff;
}

/* Hide the checkbox by default */
.nav-toggle {
  display: none;
}

/* Hamburger label (hidden on desktop by default) */
.nav-toggle-label {
  display: none;
  cursor: pointer;
  width: 25px;
  height: 18px;
  position: relative;
}

/* The three lines of the hamburger icon */
.nav-toggle-label span,
.nav-toggle-label span::before,
.nav-toggle-label span::after {
  display: block;
  background-color: #fed402;
  height: 2px;
  width: 25px;
  border-radius: 2px;
  position: absolute;
  transition: transform 0.3s ease;
}

/* Middle bar position */
.nav-toggle-label span {
  top: 8px;
}

/* Top bar */
.nav-toggle-label span::before {
  content: "";
  top: -8px;
}

/* Bottom bar */
.nav-toggle-label span::after {
  content: "";
  top: 8px; /* Will shift with transform for the "X" effect */
}

/* --- Responsive: Mobile View --- */
@media (max-width: 768px) {
  /* Show the hamburger icon and hide the inline nav */
  .nav-toggle-label {
    display: block;
  }
  
  /* The nav menu is hidden by default on mobile */
  .nav-menu {
    position: absolute;
    top: 60px;       /* below header */
    right: 20px;
    background: #243642;
    border: 1px solid #387478;
    border-radius: 8px;
    width: 200px;
    padding: 20px;
    display: none;   /* hide by default */
    flex-direction: column;
    gap: 10px;
  }
  
  .nav-menu ul {
    flex-direction: column;
    gap: 15px;
  }
  
  /* When the checkbox is checked, show the nav menu */
  .nav-toggle:checked ~ .nav-menu {
    display: flex;
  }
  
  /* Animate the hamburger into an "X" */
  .nav-toggle:checked + .nav-toggle-label span {
    transform: rotate(45deg);
  }
  .nav-toggle:checked + .nav-toggle-label span::before {
    transform: translateY(8px) rotate(0deg);
  }
  .nav-toggle:checked + .nav-toggle-label span::after {
    transform: translateY(-8px) rotate(90deg);
  }
}


/* Casino Info Section (Under Header) */
/* Casino Info Block - Full width with centered content */
.casino-info-block {
  width: 100%;
  background: linear-gradient(135deg, #3D3D3D, #578E7E);
  color: #fff;
  padding: 30px 0; /* Top and bottom spacing */
}

/* Container centers content and limits max width */
.casino-info-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px; 
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px; /* Spacing between items */
}

/* Logo */
.casino-info-logo img {
  max-width: 150px;
  height: auto;
}

/* Main content (title, rating, bonus, stats) */
.casino-info-content {
  flex: 1;
}
.casino-info-content h2 {
  font-size: 1.8rem;
  margin-bottom: 10px;
}

/* Rating and bonus row */
.rating-bonus {
  display: flex;
  gap: 20px;
  margin-bottom: 10px;
}
.rating, .bonus {
  background: rgba(255, 255, 255, 0.15);
  padding: 8px 12px;
  border-radius: 5px;
}

/* Casino stats list */
.casino-stats {
  list-style: none;
  padding: 0;
  margin: 0;
}
.casino-stats li {
  margin-bottom: 5px;
}

/* Visit Casino button */
.casino-info-button {
  display: flex;
  align-items: center;
}
.visit-casino-btn {
  background: #f4d03f;
  color: #333;
  text-decoration: none;
  padding: 12px 20px;
  border-radius: 5px;
  font-weight: bold;
  transition: background 0.3s ease;
}
.visit-casino-btn:hover {
  background: #f1c40f;
}

/* Responsive for mobile */
@media (max-width: 768px) {
  .casino-info-container {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .rating-bonus {
    flex-direction: column;
    gap: 10px;
  }
  .casino-info-content h2 {
    margin-bottom: 15px;
  }
}


/* Main Article & Content Styling */
.review-article h2 {
  font-size: 2rem;
  margin-bottom: 20px;
}
.review-content p {
  margin-bottom: 20px;
  font-size: 1rem;
  line-height: 1.8;
  text-align: justify;
}
.review-image {
  width: 100%;
  height: auto;
  margin-bottom: 20px;
  border-radius: 8px;
}

/* Bullet List Styles */
ul.modern-list {
  list-style: none; /* Remove default bullets */
  margin: 0;
  padding: 0;
}

ul.modern-list li {
  position: relative;
  padding-left: 1.5em; /* Space for custom bullet */
  margin-bottom: 0.5em;
  font-family: Arial, sans-serif; /* Modern, clean typography */
}

ul.modern-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 0.6em;
  height: 0.6em;
  background-color: #fed500; /* Custom bullet color */
  border-radius: 50%; /* Makes the bullet circular */
  transform: translateY(-50%);
}

/* Table Styling */
.table-section {
  padding: 2rem;
  background-color: #f4f4f4; /* Light background for contrast */
}

.table-container {
  max-width: 100%;
  overflow-x: auto; /* Allows horizontal scroll on smaller screens */
}

/* Modern table styling */
table.modern-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Table header */
table.modern-table thead {
  background-color: #4e8d01; /* Accent color */
  color: #fff;
}

table.modern-table thead th {
  padding: 1rem;
  text-align: left;
  font-weight: 600;
  border-bottom: 2px solid #fed500;
}

/* Table body */
table.modern-table tbody td {
  padding: 1rem;
  border-bottom: 1px solid #ddd;
}

/* Row hover effect */
table.modern-table tbody tr:hover {
  background-color: #f9f9f9;
  transition: background-color 0.3s ease;
}

/* Footer Styling */
/* Footer Container */
.casino-footer {
  background: linear-gradient(135deg, #243642, #387478);
  color: #fff;
  padding: 40px 20px;
}

.footer-container {
  max-width: 1200px;       /* Centers the footer content */
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* Payment Methods Section */
.payment-methods,
.responsible-gambling,
.footer-links {
  text-align: center;
}

.payment-methods h3,
.responsible-gambling h3 {
  text-transform: uppercase;
  margin-bottom: 15px;
  color: #fff;         /* Accent color for headings */
  font-size: 1.2rem;
}

.payment-logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}
.payment-logos img {
  width: 100px;
  height: auto;

  border-radius: 4px;
  object-fit: contain;
  padding: 5px;
}

/* Responsible Gambling Section */
.rg-logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin-top: 10px;
}
.rg-logos img {
  width: 100px;
  height: auto;

  border-radius: 4px;
  object-fit: contain;
  padding: 5px;
}

/* Footer Links */
.footer-links ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  margin: 0;
  padding: 0;
}
.footer-links ul li a {
  color: #fed402;         /* Accent color for links */
  text-decoration: none;
  font-weight: bold;
  transition: color 0.3s ease;
}
.footer-links ul li a:hover {
  color: #fff;
}

/* Responsive Design */
@media (max-width: 768px) {
  .footer-container {
    gap: 20px;
  }
  .payment-logos, .rg-logos {
    gap: 10px;
  }
  .payment-logos img, .rg-logos img {
    width: 80px;
  }
}





/* Pros & Cons Block Container */
/* --- Pros & Cons Section --- */
.pros-cons-section {
  /* No large background behind the cards */
  /* You can keep this blank or set a subtle background if desired */
}

/* Container to keep content centered and limit width */
.pros-cons-container {
  max-width: 1200px; /* Not full width */
  margin: 0 auto;
  padding: 40px 20px;
}

/* Section Title */
.pros-cons-container h2 {
  text-align: center;
  color: #f6cd03; /* Dark color from the palette */
  margin-bottom: 30px;
  font-size: 2rem;
}

/* Wrapper for Pros & Cons columns */
.pros-cons-wrapper {
  display: flex;
  gap: 20px;
  justify-content: center;
}

/* Pros and Cons Columns */
.pros, .cons {
  background-color: #ffffff; /* Cards with white background */
  border: 1px solid #387478; /* Teal border */
  border-radius: 8px;
  padding: 20px;
  flex: 1;
  min-width: 240px;
}

/* Column Headings */
.pros h3, .cons h3 {
  color: #387478; /* Teal color from the palette */
  margin-bottom: 15px;
  text-transform: uppercase;
  font-size: 1.2rem;
}

/* List styling */
.pros ul, .cons ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.pros li, .cons li {
  color: #243642; /* Dark text color */
  margin-bottom: 10px;
  position: relative;
  padding-left: 30px; /* Space for icon */
}

/* Custom Icons for Pros & Cons (using inline SVG) */
.pros li::before, .cons li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* Checkmark for Pros */
.pros li::before {
  background-image: url('data:image/svg+xml;utf8,<svg fill="%23fed402" width="20" height="20" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M9.00065 16.2007L4.80065 12.0007C4.41065 11.6107 3.78065 11.6107 3.39065 12.0007C3.00065 12.3907 3.00065 13.0207 3.39065 13.4107L8.29065 18.3107C8.68065 18.7007 9.31065 18.7007 9.70065 18.3107L20.3006 7.71065C20.6906 7.32065 20.6906 6.69065 20.3006 6.30065C19.9106 5.91065 19.2806 5.91065 18.8906 6.30065L9.00065 16.2007Z"/></svg>');
}

/* Cross for Cons */
.cons li::before {
  background-image: url('data:image/svg+xml;utf8,<svg fill="%23fed402" width="20" height="20" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M15.535 8.464a1.001 1.001 0 00-1.415 0L12 10.586 9.879 8.465a1 1 0 00-1.415 1.414l2.121 2.121-2.121 2.122a1.001 1.001 0 000 1.414c.39.39 1.024.39 1.415 0L12 13.414l2.121 2.122a.999.999 0 101.415-1.414l-2.122-2.122 2.122-2.121a.999.999 0 000-1.414z"/></svg>');
}

/* --- Responsive for Mobile --- */
@media (max-width: 768px) {
  .pros-cons-wrapper {
    flex-direction: column;
    align-items: center;
  }
  .pros, .cons {
    width: 100%;
    max-width: 600px;
  }
}



/* Section container for the table */
/* Section to provide spacing (no extra background) */
.table-section {
  padding: 40px 20px;
}

/* Container centers table and allows horizontal scroll on mobile */
.table-container {
  max-width: 1200px;
  margin: 0 auto;
  overflow-x: auto;
}

/* Modern table styling */
.modern-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 600px; /* Prevents columns from squishing on small screens */
  font-family: Arial, sans-serif;
}

/* Table Header */
.modern-table thead {
  background-color: #387478; /* Teal header row */
}
.modern-table thead th {
  color: #fff;
  padding: 12px;
  text-align: left;
  font-weight: bold;
}

/* Table Body */
.modern-table tbody tr {
  border-bottom: 1px solid #ddd;
}
.modern-table tbody td {
  padding: 12px;
  color: #243642; /* Dark text color */
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .table-section {
    padding: 20px;
  }
}





/* Container to center and narrow the FAQ block */
.faq-container {
  max-width: 600px;
  margin: 2rem auto;
  padding: 0 1rem;
}

/* FAQ item container */
.faq-item {
  padding: 1em 0;
  border-bottom: 1px solid #ddd;
}

/* FAQ question styling */
.faq-question {
  font-size: 1.2em;
  margin: 0;
  cursor: pointer;
  color: #4e8d01;
  position: relative;
}

/* Arrow indicator for toggling */
.faq-question::after {
  content: "\25BC";  /* Down arrow */
  position: absolute;
  right: 0;
  transition: transform 0.3s ease;
  color: #fed500;
}

/* Rotate arrow when active */
.faq-item.active .faq-question::after {
  transform: rotate(180deg);
}

/* FAQ answer hidden by default */
.faq-answer {
  height: 0;
  overflow: hidden;
  transition: height 0.35s ease;
  margin-top: 0.5em;
}

/* FAQ answer text styling */
.faq-answer p {
  margin: 0;
}




.casino-cta-section {
  position: relative;
  /* Replace with your actual background image URL */
  background: url('images/SlotsGem-Casino-Featured-Image.png') no-repeat center center;
  background-size: cover;
  padding: 40px 20px; /* Reduced padding for a more compact look */
  text-align: center;
  color: #fff;
  border-radius: 12px; /* Smooth, rounded corners */
  overflow: hidden; /* Ensures the overlay respects the border-radius */
  margin: 20px; /* Optional: add some spacing around the section */
}

.cta-bg-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ensures the image covers the section */
  z-index: 0;
}

/* Overlay to improve text readability over the image */
.casino-cta-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5); /* Semi-transparent dark overlay */
  z-index: 1;
}

.casino-cta-content {
  position: relative;
  z-index: 2;
  max-width: 700px;
  margin: 0 auto;
}

/* Ensure call-to-action text is centered */
.centered-text p {
  text-align: center;
  margin-bottom: 1.5rem;
}

/* Headline styling */
.casino-cta-content h2 {
  font-size: 2rem;
  margin-bottom: 1rem;
  text-transform: uppercase;
}

/* CTA Button styling using your specified colors */
.cta-button {
  display: inline-block;
  background: linear-gradient(45deg, #8edb01, #f5cc02, #c0e349);
  color: #fff;
  padding: 12px 25px;  /* Reduced padding for a more compact button */
  font-size: 1rem;
  text-decoration: none;
  border-radius: 12px; /* Smooth rounded corners */
  transition: background 0.3s ease;
}

.cta-button:hover {
  background: linear-gradient(45deg, #c0e349, #f5cc02, #8edb01);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .casino-cta-content h2 {
    font-size: 1.5rem;
  }
  .casino-cta-content p {
    font-size: 1rem;
  }
  .cta-button {
    font-size: 0.9rem;
    padding: 10px 20px;
  }
}