body {
    background-color: rgb(83, 82, 82); /* Change the background color as desired */
  }
  
  .rulesSectionDiv {
    margin-bottom: 20px;
    padding: 5px;
    display: flex;
    align-items: flex-start; /* Align items at the top */
    gap: 15px; /* Add space between the image and text */
    margin-bottom: 0px;
  }
  
  .rulesSectionDiv  img{
    margin-top: 35px;
  }

  .logo-image {
    width: 40%; /* Set a fixed width for the image */
    height: auto; /* Maintain aspect ratio */
    border-radius: 6%; /* Optional: add rounded corners to the image */
  }
  
  /* Media query to adjust layout on mobile */
  @media (max-width: 768px) {
    .rulesSectionDiv {
      flex-direction: column; /* Stack image and text vertically */
      align-items: center; /* Center items */
    }
  
    .logo-image {
      width: 100%; /* Make the image take full width */
      margin-bottom: 15px; /* Add space below the image */
    }

    .rulesSectionDiv  img{
      margin-top: 10px;
    }
  }
  
  .cardSectionDivID {
    margin-bottom: 20px;
    border: 1px solid #ddd;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: flex-start; /* Align items at the top */
    gap: 15px; /* Add space between the image and text */
  }
  
  .cardSectionDivID .card-content{
    padding-left: 5px;
  }

  .card-image {
    width: 40%; /* Set a fixed width for the image */
    height: auto; /* Maintain aspect ratio */
    border-radius: 6%; /* Optional: add rounded corners to the image */
    cursor: pointer; /* Make the whole div clickable */
  }

  .card-image-allign-bottom {
    width: 40%; /* Set a fixed width for the image */
    height: auto; /* Maintain aspect ratio */
    border-radius: 6%; /* Optional: add rounded corners to the image */
    cursor: pointer; /* Make the whole div clickable */
    align-self: end;
  }

  .card-image-allign-bottom-ben-franklin {
    width: 35%; /* Set a fixed width for the image */
    height: auto; /* Maintain aspect ratio */
    border-radius: 6%; /* Optional: add rounded corners to the image */
    cursor: pointer; /* Make the whole div clickable */
    align-self: end;
  }
  
  .card-content {
    flex: 1; /* Allow the text section to take up the remaining space */
    text-align: left; /* Align text to the left */
  }
  
  .card-content h3 {
    margin: 0 0 10px; /* Add space below the title */
    font-size: 1.8em; /* Adjust font size of the title */
    color: #202020; /* Set a text color */
    display: inline-block; /* Limit the width to the text content */
    border-bottom: 2px solid black; /* Accent line below heading */
    margin-bottom: 5px;
  }
  
  .card-content p {
    margin: 0;
    line-height: 1.6; /* Improve readability */
    color: #202020; /* Slightly lighter text for paragraphs */
    padding-bottom: 10px;
  }
  
  .bottomButtons {
    width: 47%
  }
  .comparingBankAndCreditCardBonusesImage {
    min-width: 800px; 
    width: 35%;
  }
  .mapOfSportsBettingLegalStatesImage {
    min-width: 800px; 
    width: 35%;
  }
  .onlineBettingImages {
    min-width:350px;
    width: 35%;
  }

  .imageNotInrulesSectionDiv {
    width: -webkit-fill-available;
  }

  /* Add this media query to adjust for smaller screens but bigger than mobile */
  @media (max-width: 1100px) 
  {

    .comparingBankAndCreditCardBonusesImage {
      min-width: 400px;
    }

    .mapOfSportsBettingLegalStatesImage {
      min-width: 400px;
      
    }
  }

  /* Add this media query to adjust for mobile devices */
  @media (max-width: 768px) 
  {
    .cardSectionDivID {
      flex-direction: column; /* Stack image and text vertically */
      align-items: center; /* Center items */
    }
  
    .card-image {
      width: 100%; /* Make the image take full width */
      margin-bottom: 15px; /* Add space below the image */
    }
  
    .card-content {
      text-align: center; /* Optional: center-align the text */
    }

    iframe
    {
      height: 200px;
      width: 100%;
    }

    .responsive-image  
    {
      width: 100%; /* Make the image take 100% width on mobile */
    }

    li
    {
      text-align:left;
    }

    .button-row button {
      width: 95%;
    }

    .qatarReferalLinks {
      display: block;
    }

    img {
      width: 70%;
      min-width: 300px;
    }
    .comparingBankAndCreditCardBonusesImage {
      min-width: 0px;
      width: 110%;
    }

    .mapOfSportsBettingLegalStatesImage {
      min-width: 0px;
      width: 110%;
    }

    .imageNotInrulesSectionDiv {
      position: relative;
      left: -15px;
    }

    .card-image-allign-bottom {
      width: 70%;
    }
    .card-image-allign-bottom-ben-franklin {
      position: relative;
    }
  }

  @media (min-width: 768px) 
  {
    .button-row button {
      width: 46%;
    }

    .qatarReferalLinks {
      display: none;
    }
  }
  /* Add this media query to adjust for wide screens */
  @media (min-width: 1500px) 
  {
    iframe
    {
      height: 600px
    }
  }

  .image-container {
    display: flex;
    flex-direction: column; /* Stack images vertically */
    align-items: center; /* Center images horizontally */
    gap: 10px; /* Add space between the images */
    /* width: 40%; */
  }   
  
  section {
    margin-bottom: 30px; /* Add space between sections */
    margin-left: 3%; /* Add space between sections */
    margin-right: 3%; /* Add space between sections */
    padding: 20px;
    background-color: white; /* Light background to distinguish sections */
    border: 1px solid #ddd; /* Subtle border for definition */
    border-radius: 8px; /* Rounded corners for a softer look */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Add subtle shadow */
  }
  
  section h2 {
    margin-top: 0; /* Remove top margin to align with section */
    font-size: 2.2em; /* Increase font size for headings */
    color: #202020;/* Darker color for better contrast */
    display: inline-block; /* Limit the width to the text content */
    border-bottom: 2px solid black; /* Accent line below heading */
    padding-bottom: 5px; /* Add spacing between text and underline */
    margin-bottom: 20px;
  }
  
  section p {
    margin: 10px 0; /* Add spacing between paragraphs */
    line-height: 1.6; /* Improve readability */
    color: #202020; /* Slightly muted text for a clean look */
    font-size: 1.2em;
    padding-bottom: 5px;
  }
  
  section p strong {
    color: black; /* Highlight strong text in a vibrant color */
    font-weight: bold;
  }
  
  section a {
    color: #007bff; /* Blue for links */
    text-decoration: none; /* Remove underline */
    font-size: 1.2em;
  }
  
  section a:hover {
    text-decoration: underline; /* Add underline on hover */
  }
  
  section li {
    line-height: 1.6; /* Improve readability */
    font-size: 1em;
    color: #202020; /* Slightly muted text for a clean look */
  }
  
  section li strong {
    line-height: 1.6; /* Improve readability */
    font-size: 1.2em;
  }
  
  .card-title {
    border-bottom: 2px solid black; /* Accent line below heading */
  }
  
  .backButton {
    margin: 0 10px 10px; /* Add some spacing between buttons */
    padding: 10px; /* Add padding to the buttons */
    background-color: white; /* Blue background */
    color: black; /* Black text color */
    border: 5px solid black;/* Remove button border */
    border-radius: 20px; /* Rounded corners */
    cursor: pointer; /* Change cursor to pointer on hover */
    display: inline-block; /* Display buttons inline */
    font-weight: bold;
    justify-content: center; /* Align horizontally in the center */
    align-items: center; 
    text-decoration: none;
    position: relative;
    top: 15px;
  }

  ul {
    list-style: none;
  }
  
  .american-express-rules-paragraph
  {
    padding-bottom: 25px;
  }
  .backButton:hover {
    background-color: #00ff1e; /* lime green background on hover */
  }
  
  .bold-underline {
    font-weight: bold; /* Ensures the text is bold */
    text-decoration: underline; /* Adds the underline */
  }
  
  .responsive-image {
    display: inline-block;
    width: 100%; /* Default width for larger screens */
    max-height: 600px;
    max-width: 600px;
  }

  .button-row {
    text-align: center; /* Center the buttons horizontally */
  }
  
  .button-row button {
    margin: 0 10px 10px; /* Add some spacing between buttons */
    padding: 10px; /* Add padding to the buttons */
    background-color: white; /* Blue background */
    color: black; /* Black text color */
    border-radius: 20px; /* Rounded corners */
    cursor: pointer; /* Change cursor to pointer on hover */
    display: inline-block; /* Display buttons inline */
    font-weight: bold;
  }
  
  .button-row button:hover {
    background-color: #00ff1e; /* lime green background on hover */
  }

  .card-title {
    border-bottom: 2px solid black; /* Accent line below heading */
  }

  .backButton {
    margin: 0 10px 10px; /* Add some spacing between buttons */
    padding: 10px; /* Add padding to the buttons */
    background-color: white; /* Blue background */
    color: black; /* Black text color */
    border: 5px solid black;/* Remove button border */
    border-radius: 20px; /* Rounded corners */
    cursor: pointer; /* Change cursor to pointer on hover */
    display: inline-block; /* Display buttons inline */
    font-weight: bold;
    justify-content: center; /* Align horizontally in the center */
    align-items: center; 
    text-decoration: none;
    position: relative;
    top: 15px;
  }

  .backButton:hover {
    background-color: #00ff1e; /* lime green background on hover */
  }