.slot-card {
  perspective: 1500px; /* Increase the default perspective */
  max-width: 600px;
  margin: 20px auto;
  text-align: center;
  border: 1px solid #ddd;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: hidden;
}

.slot-card-inner {
  position: relative;
  width: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.slot-card.flipped .slot-card-inner {
  transform: rotateY(180deg);
}

.slot-card-front,
.slot-card-back {
  width: 100%;
  backface-visibility: hidden;
  padding: 20px;
  box-sizing: border-box;
}

.slot-card-back {
  transform: rotateY(180deg);
  position: absolute;
  top: 0;
  left: 0;
}

.slot-card-image {
  max-width: 100%;
  height: auto;
  margin-bottom: 20px;
  border-radius: 10px 10px 0 0;
}

.slot-card h2 {
  font-size: 24px;
  margin-bottom: 15px;
}

.slot-card p {
  margin: 5px 0;
  text-align: left;
}

.slot-card a {
  font-weight: 700;
  color: #0073aa;
  text-decoration: none;
}

.slot-card a:hover {
  text-decoration: underline;
}

.slot-card-link {
  display: inline-block;
  padding: 10px 20px;
  background: #4caf50;
  color: #fff;
  text-decoration: none;
  border-radius: 5px;
  font-size: 18px;
  transition: background 0.3s;
}

.slot-card-link:hover {
  background: #45a049;
}

.slot-card-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Add this to your existing CSS file */
.slot-card-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}

.slot-card-table td {
  padding: 10px;
  border: 1px solid #ddd;
}

.slot-card-table tr:nth-child(odd) {
  background-color: #f0f0f0;
}

.slot-card-table tr:nth-child(even) {
  background-color: #d0d0d0;
}

.software-operator {
  display: flex;
  align-items: flex-start;
  border: 1px solid #ddd;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  margin: 20px auto;
  max-width: 600px;
  overflow: hidden;
  padding: 20px;
}

.operator-image {
  max-width: 150px;
  height: auto;
  border-radius: 5px;
}

.operator-image-wrapper {
  border-radius: 10px; /* Add rounded borders */
  padding: 10px; /* Add padding for better layout */
  margin-right: 20px; /* Add margin to separate from other content */
  display: flex;
  flex-direction: column;
  align-items: center;
}

.operator-details {
  flex: 1;
  text-align: left;
  margin-top: 10px;
}

.operator-details h2 {
  font-size: 18px;
  margin: 10px 0;
}

.rating-score {
  display: flex;
  flex-direction: column;
  align-items: center; /* Center align items */
  margin-top: 10px; /* Add margin-top to create space between image and rating */
}

.rating-score h3 {
  margin: 0;
  font-size: 16px;
}

.rating-score .stars {
  color: #ffd700;
  font-size: 12px;
}

.operator-score {
  font-size: 14px;
}

.operator-bonus {
  text-align: right;
  flex: 1;
}

.operator-bonus .bonus-info {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
  text-align: center;
}

.operator-bonus .bonus-link {
  display: inline-block;
  padding: 10px 20px;
  background-color: #4caf50;
  color: white;
  text-decoration: none;
  border-radius: 5px;
  font-weight: bold;
  margin-bottom: 10px;
}

.operator-bonus .review-link {
  display: block;
  text-decoration: none;
  margin-bottom: 10px;
  font-size: 14px;
  text-align: center;
}

.terms-conditions {
  font-size: 9px;
  color: grey;
  margin-top: 10px;
  text-align: left;
}

/*Multiple slotcards*/

/* General slot card container styles */
.multiple-slot-cards-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
}

.slot-card-item {
  flex: 0 0 calc(33.333% - 20px); /* Ensure 3 cards fit in a row with space */
  margin-bottom: 20px;
  box-sizing: border-box;
}

.slot-card {
  width: 100%;
  margin: 0 auto;
  text-align: center;
  border: 1px solid #ddd;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: hidden;
  height: auto; /* Adjusted height for responsive design */
  max-width: 350px; /* Limit the card's max width */
}

.slot-card-image {
  max-width: 100%;
  height: auto;
  border-radius: 10px 10px 0 0;
}

.slot-card h2 {
  font-size: 16px; /* Adjusted font size */
  margin-bottom: 10px;
}

.slot-card h3 {
  font-size: 11px; /* Adjusted font size */
  margin: 5px 0;
  font-weight: bold;
}

.slot-card p {
  margin: 5px 0;
  text-align: left;
}

.slot-card a {
  font-weight: 700;
  color: #0073aa;
  text-decoration: none;
}

.slot-card a:hover {
  text-decoration: underline;
}

.slot-card-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.slot-card-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
  font-size: 12px; /* Set font size for all table items */
}

.slot-card-table td {
  padding: 5px;
  border: 1px solid #ddd;
}

.slot-card-table tr:nth-child(odd) {
  background-color: #f0f0f0;
}

.slot-card-table tr:nth-child(even) {
  background-color: #d0d0d0;
}

.slot-card-table-header {
  font-weight: bold;
}

.slot-card-flip-link {
  color: #1fb4df;
  font-size: 14px;
  display: inline-block;
  margin-top: 10px;
  text-decoration: none;
}

.slot-card-flip-link span {
  display: inline-block;
  margin-left: 5px;
  border: 2px solid #1fb4df;
  border-radius: 50%;
  padding: 2px 6px;
  line-height: 1;
  font-weight: bold;
}

/* Software Operator Section Styles */
.software-operator {
  padding: 10px; /* Padding around the operator section */
  text-align: center; /* Center the content */
}

.software-operator .operator-logo {
  max-width: 150px; /* Adjusted max width for the logo */
  height: auto;
  margin-bottom: 10px; /* Space below the logo */
}

.software-operator .operator-info {
  margin-bottom: 10px; /* Space below the operator info */
}

.software-operator .operator-score {
  font-size: 12px; /* Adjusted font size for score */
}

.software-operator .operator-bonus .bonus-info,
.software-operator .operator-bonus .terms-info {
  font-size: 12px; /* Adjusted font size for bonus and terms */
  margin-bottom: 5px; /* Space between bonus and terms */
}

/* Style for "Claim Bonus" button */
.software-operator .operator-bonus .claim-bonus-button {
  display: block;
  margin: 5px auto;
  padding: 5px 10px;
  background-color: #4caf50; /* Button background color */
  color: white; /* Button text color */
  border-radius: 5px;
  text-decoration: none;
  font-size: 12px; /* Adjusted button font size */
  width: fit-content; /* Make the button fit the text */
  text-align: center;
  margin-top: 30px;
}

.software-operator .operator-bonus .claim-bonus-button:hover {
  background-color: #0a97c2; /* Button hover color */
}

/* Ensure regular links are styled correctly */
.software-operator .operator-bonus a:not(.claim-bonus-button) {
  color: #0073aa;
  text-decoration: none;
  font-weight: 700;
  margin-top: 5px;
  display: inline-block;
}

.software-operator .operator-bonus a:not(.claim-bonus-button):hover {
  text-decoration: underline;
}

.hidden-slot-card {
  display: none;
}

.display-more-slot-cards {
  display: block;
  width: 200px;
  margin: 20px auto;
  padding: 10px 20px;
  background-color: #0073aa;
  color: white;
  text-align: center;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.display-more-slot-cards:hover {
  background-color: #005177;
}

.operator-details {
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* Ensure the elements are spaced out */
  height: 100%; /* Ensure the operator details take up the full height */
}

.operator-bonus-info {
  font-size: 14px;
  font-weight: bold;
  margin-top: 10px;
  text-align: center; /* Align the bonus info to the left */
  order: 1; /* Ensure this is at the top */
}

.operator-bonus {
  display: flex;
  flex-direction: column;
  align-items: flex-end; /* Align buttons to the right */
  order: 2; /* Ensure this is at the bottom */
  min-width: 80px;
}

.operator-bonus .review-link {
  margin-bottom: 10px; /* Add some space between the two buttons */
  text-align: center; /* Align the "Go To" link to the right */
}

.operator-bonus .claim-bonus-button {
  text-align: right; /* Align the "Claim Bonus" button to the right */
  margin-top: auto; /* Push the button to the bottom */
}

@media screen and (max-width: 767px) {
  .operator-details {
    align-items: center; /* Center-align on smaller screens */
    text-align: center; /* Center text on smaller screens */
  }

  .operator-bonus {
    align-items: center; /* Center-align buttons on smaller screens */
  }

  .operator-bonus-info {
    text-align: center; /* Center-align bonus info on smaller screens */
  }
}

@media screen and (max-width: 767px) {
  .multiple-slot-cards-container {
    display: flex;
    flex-direction: column;
  }

  .slot-card-item {
    width: 100%;
    margin-bottom: 20px;
  }

  .slot-card {
    max-width: 100%;
  }

  .slot-card-row-break {
    display: none;
  }

  .slot-card-front,
  .slot-card-back {
    padding: 15px;
  }

  .slot-card-image {
    max-width: 100%;
    height: auto;
  }

  .software-operator {
    flex-direction: column;
    align-items: center;
  }

  .operator-image-wrapper {
    margin-right: 0;
    margin-bottom: 15px;
  }

  .operator-details {
    text-align: center;
  }

  .operator-bonus {
    margin-top: 15px;
    text-align: center;
  }

  .slot-card-table {
    font-size: 11px;
  }

  .slot-card-table td {
    padding: 3px;
  }
}

.swiper-nav-top-holder {
  position: relative;
  padding-right: 2rem;
}

.swiper-nav-top-holder .swiper-button-next {
  width: 34px;
  height: 34px;
  margin-top: -17px;
  color: #fff;
  background-color: #1cbce3;
  border: 2px solid #fff;
  border-radius: 50%;
  -webkit-box-shadow: 0 0 5px #fff;
  box-shadow: 0 0 5px #fff;
  right: 0;
}

.swiper-nav-top-holder .swiper-button-next:after {
  font-size: 1em;
}

@media (min-width: 768px) {
  .swiper-nav-top-holder .swiper-button-next {
    width: 38px;
    height: 38px;
    margin-top: -19px;
  }
}

.swiper-nav-top .swiper-slide {
  width: auto;
  margin-right: 0.5rem;
}

@media (min-width: 768px) {
  .swiper-nav-top .swiper-slide {
    margin-right: 1rem;
  }
}

.block-header .collapse-link .show-less {
  display: none;
}

.block-header .collapse-link[aria-expanded="true"] .show-less {
  display: inline;
}

.block-header .collapse-link[aria-expanded="true"] .show-more {
  display: none;
}

@media screen and (max-width: 700px) {
  .list-page-template .block-header>.container {
      font-size: 1rem;
      margin-bottom: 4rem!important;
  }
}