.page-tt88login {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  color: #333333; /* Default text color for light background */
  background-color: #ffffff; /* Default body background */
}

.page-tt88login__container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

.page-tt88login__dark-bg {
  background-color: #1a1a1a;
  color: #ffffff;
}

.page-tt88login__light-bg {
  background-color: #f8f8f8;
  color: #333333;
}

.page-tt88login__hero-section {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 0 40px 0; /* Small top padding, enough for content */
  box-sizing: border-box;
}

.page-tt88login__hero-image-wrapper {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

.page-tt88login__hero-image {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  border-radius: 8px;
}

.page-tt88login__hero-content {
  text-align: center;
  padding: 30px 20px;
  max-width: 900px;
  margin-top: 20px;
  box-sizing: border-box;
}

.page-tt88login__main-title {
  font-size: clamp(2.2rem, 5vw, 3.5rem);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 20px;
  color: #ffcc00; /* Yellow for highlight */
}

.page-tt88login__hero-description {
  font-size: 1.1rem;
  margin-bottom: 30px;
  color: #f0f0f0;
}

.page-tt88login__cta-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
}

.page-tt88login__btn-primary,
.page-tt88login__btn-secondary,
.page-tt88login__btn-game {
  display: inline-block;
  padding: 14px 28px;
  border-radius: 50px;
  text-decoration: none;
  font-weight: bold;
  font-size: 1rem;
  transition: all 0.3s ease;
  cursor: pointer;
  text-align: center;
  box-sizing: border-box;
  white-space: normal;
  word-wrap: break-word;
  max-width: 100%;
}

.page-tt88login__btn-primary {
  background-color: #ffcc00; /* Yellow */
  color: #1a1a1a; /* Dark text for contrast */
  border: 2px solid #ffcc00;
}

.page-tt88login__btn-primary:hover {
  background-color: #e6b800;
  border-color: #e6b800;
}

.page-tt88login__btn-secondary {
  background-color: transparent;
  color: #ffcc00; /* Yellow */
  border: 2px solid #ffcc00;
}

.page-tt88login__btn-secondary:hover {
  background-color: #ffcc00;
  color: #1a1a1a;
}

.page-tt88login__btn-game {
  background-color: #2563eb;
  color: #ffffff;
  border: 2px solid #2563eb;
}

.page-tt88login__btn-game:hover {
  background-color: #1e4eaf;
  border-color: #1e4eaf;
}

.page-tt88login__btn-center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: fit-content; /* Adjust width to content */
  max-width: 90%; /* Ensure it doesn't overflow on small screens */
}

.page-tt88login__section-title {
  font-size: 2.5rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 40px;
  color: #ffcc00; /* Yellow for highlight */
}

.page-tt88login__about-section,
.page-tt88login__guide-section,
.page-tt88login__providers-section,
.page-tt88login__promotions-section,
.page-tt88login__faq-section,
.page-tt88login__contact-section,
.page-tt88login__games-section {
  padding: 60px 0;
  box-sizing: border-box;
}

.page-tt88login__text-block {
  font-size: 1.1rem;
  margin-bottom: 20px;
  text-align: justify;
}

.page-tt88login__inline-link {
  color: #2563eb;
  text-decoration: underline;
  font-weight: bold;
  transition: color 0.3s ease;
}

.page-tt88login__inline-link:hover {
  color: #1e4eaf;
}

.page-tt88login__benefits-grid,
.page-tt88login__guide-grid,
.page-tt88login__games-grid,
.page-tt88login__promotions-grid,
.page-tt88login__providers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
  margin-top: 40px;
}

.page-tt88login__benefit-card,
.page-tt88login__promo-card,
.page-tt88login__game-card {
  background-color: #2a2a2a;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  text-align: center;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.page-tt88login__card-title {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 15px;
  color: #ffcc00;
}

.page-tt88login__card-description {
  font-size: 1rem;
  line-height: 1.5;
  color: #f0f0f0;
  flex-grow: 1;
}

.page-tt88login__guide-step {
  background-color: #ffffff;
  padding: 25px;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  text-align: center;
  display: flex;
  flex-direction: column;
  color: #333333;
}

.page-tt88login__step-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 20px;
  display: block;
}

.page-tt88login__step-title {
  font-size: 1.4rem;
  font-weight: 600;
  margin-bottom: 10px;
  color: #2563eb;
}

.page-tt88login__step-description {
  font-size: 1rem;
  line-height: 1.5;
}

.page-tt88login__game-image {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 15px;
  display: block;
}

.page-tt88login__btn-game {
  margin-top: 20px;
}

.page-tt88login__providers-grid {
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 20px;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.page-tt88login__provider-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  height: 120px;
}

.page-tt88login__provider-logo {
  width: 80px;
  height: 80px;
  object-fit: contain;
  margin-bottom: 5px;
  display: block;
}

.page-tt88login__provider-item p {
  font-size: 0.9rem;
  font-weight: 600;
  color: #333333;
}

.page-tt88login__faq-list {
  margin-top: 30px;
}

.page-tt88login__faq-item {
  background-color: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  margin-bottom: 15px;
  overflow: hidden;
  color: #333333;
}

.page-tt88login__faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 25px;
  cursor: pointer;
  font-size: 1.1rem;
  font-weight: 600;
  color: #2563eb;
  background-color: #f0f0f0;
  transition: background-color 0.3s ease;
  user-select: none;
}

.page-tt88login__faq-question:hover {
  background-color: #e0e0e0;
}

.page-tt88login__faq-qtext {
  pointer-events: none; /* Prevent text from blocking click */
  flex-grow: 1;
}

.page-tt88login__faq-toggle {
  font-size: 1.5rem;
  font-weight: bold;
  margin-left: 15px;
  pointer-events: none; /* Prevent icon from blocking click */
  transition: transform 0.3s ease;
}

.page-tt88login__faq-item.active .page-tt88login__faq-toggle {
  transform: rotate(45deg); /* Rotate '+' to 'x' or '-' */
}

.page-tt88login__faq-answer {
  max-height: 0;
  overflow: hidden;
  padding: 0 25px;
  opacity: 0;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), padding 0.4s ease, opacity 0.4s ease;
}

.page-tt88login__faq-item.active .page-tt88login__faq-answer {
  max-height: 2000px !important; /* Sufficiently large value */
  padding: 20px 25px !important;
  opacity: 1;
}

.page-tt88login__faq-answer p {
  margin-bottom: 10px;
  font-size: 1rem;
  line-height: 1.6;
  color: #555555;
}

.page-tt88login__social-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin-top: 40px;
}

.page-tt88login__social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #ffcc00; /* Yellow */
  color: #1a1a1a;
  font-size: 1.5rem;
  text-decoration: none;
  transition: background-color 0.3s ease, transform 0.3s ease;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  /* Text for accessibility, hidden visually */
  text-indent: -9999px;
  overflow: hidden;
  position: relative;
}

.page-tt88login__social-icon:hover {
  background-color: #e6b800;
  transform: translateY(-5px);
}

/* Add specific icons via pseudo-elements or background images */
/* For example, using Font Awesome or custom SVG background for each social icon */
.page-tt88login__social-icon::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background-size: 60%;
  background-repeat: no-repeat;
  background-position: center;
  filter: brightness(0.2); /* Darken icon to contrast with yellow background */
}

.page-tt88login__social-icon--youtube::before { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentColor" d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42 24.947-48.284 48.597-11.668 43.976-11.668 139.209 0 183.185 6.281 23.65 24.787 42.276 48.284 48.597C117.22 448 288 448 288 448s170.781 0 213.371-11.486c23.497-6.322 42-24.947 48.284-48.597 11.668-43.976 11.668-139.209 0-183.185zm-199.309 152.082V144.47l126.426 71.393-126.426 71.393z"/></svg>');}
.page-tt88login__social-icon--x::before { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 310.9 119.5 464H48L200.7 275.5 26.5 48H177.9L274.6 184.4 389.2 48zM364.4 421.8h39.4L130.2 91.8H88.8L364.4 421.8z"/></svg>');}
.page-tt88login__social-icon--whatsapp::before { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M380.9 97.1C339.2 55.4 283.7 32 224 32S108.8 55.4 67.1 97.1 32 181.7 32 241.4c0 43.9 10.1 86.8 29.2 125.4L32 480l123.6-35.4c36.7 19.9 77.2 30.6 118.4 30.6 59.7 0 115.2-23.4 156.9-65.1S448 297.4 448 237.7c0-59.7-23.4-115.2-65.1-156.9zM224 416c-35.6 0-70.3-10.3-100.2-29.8L112 384l-29.8 8.6L67.1 384c-10.7-18.4-16.1-39.7-16.1-61.6 0-50.6 19.7-98.3 55.1-133.8S173.4 128 224 128c46.9 0 91 18.2 123.8 51.1s51.1 76.9 51.1 123.8c0 46.9-18.2 91-51.1 123.8s-76.9 51.1-123.8 51.1zM344 264c-2.1-1.1-12.7-6.2-14.7-6.9s-3.5-1.1-5-1.1c-1.5 0-2.4 0-3.7 1.1s-4.6 5.8-5.9 6.9c-1.3 1.1-2.6 1.3-4.8 .2-1.9-1.1-8-2.9-15.2-9.4s-12.2-17.6-13.6-19.9c-1.4-2.3-1.4-1.1-1.1-2.1s.8-2.1 1.6-3.2c.8-1.1 1.1-1.9 1.6-2.9s.8-1.9 .6-3.2c-.2-1.3-.8-3.1-1.6-4.4s-4.8-11.5-6.6-15.7c-1.8-4.2-3.7-3.5-5-3.5c-1.3 0-2.9-.2-4.4-.2s-3.7 .2-5.7 2.3c-2 2.1-7.6 7.4-7.6 18c0 10.6 7.8 20.7 8.9 22.1s15.2 23.3 36.9 31.5c21.7 8.2 21.7 5.5 25.6 3.2s7.6 3.5 10.1 2.3c2.6-1.1 8-3.3 9.1-6.7s1.1-6.2 .8-6.7z"/></svg>');}
.page-tt88login__social-icon--line::before { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M224 32c-59.7 0-108.4 48.7-108.4 108.4 0 42.4 24.3 80.5 62.9 99.7V392c0 10.6 8.6 19.2 19.2 19.2h52.6c10.6 0 19.2-8.6 19.2-19.2V240.1c38.6-19.2 62.9-57.3 62.9-99.7C332.4 80.7 283.7 32 224 32zm0 144c-19.2 0-34.7-15.5-34.7-34.7 0-19.2 15.5-34.7 34.7-34.7s34.7 15.5 34.7 34.7c0 19.2-15.5 34.7-34.7 34.7zm-144 208c-10.6 0-19.2 8.6-19.2 19.2v48c0 10.6 8.6 19.2 19.2 19.2h288c10.6 0 19.2-8.6 19.2-19.2v-48c0-10.6-8.6-19.2-19.2-19.2H80z"/></svg>');}
.page-tt88login__social-icon--tiktok::before { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M448 214.3c0 14.7-11.9 26.6-26.6 26.6H265.4V394c0 14.7-11.9 26.6-26.6 26.6H173c-14.7 0-26.6-11.9-26.6-26.6V240.9H26.6C11.9 240.9 0 229 0 214.3V167.7c0-14.7 11.9-26.6 26.6-26.6h119.8V26.6C146.4 11.9 158.3 0 173 0h42.1c14.7 0 26.6 11.9 26.6 26.6V141.1h156.4c14.7 0 26.6 11.9 26.6 26.6V214.3z"/></svg>');}
.page-tt88login__social-icon--instagram::before { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M224.1 154.2c-33.8 0-61.2 27.4-61.2 61.2s27.4 61.2 61.2 61.2 61.2-27.4 61.2-61.2-27.4-61.2-61.2-61.2zm128.5-74.5c-6.8-6.8-17.7-6.8-24.5 0-6.8 6.8-6.8 17.7 0 24.5 6.8 6.8 17.7 6.8 24.5 0 6.8-6.8 6.8-17.7 0-24.5zm82.8 171.6c-1.1-23.2-12.7-44.5-31.7-59.3-19-14.8-42.5-22.7-67.6-22.7H131.1c-25.1 0-48.6 7.9-67.6 22.7-19 14.8-30.6 36.1-31.7 59.3-1.1 23.2-1.1 47.4 0 70.6 1.1 23.2 12.7 44.5 31.7 59.3 19 14.8 42.5 22.7 67.6 22.7h212.8c25.1 0 48.6-7.9 67.6-22.7 19-14.8 30.6-36.1 31.7-59.3 1.1-23.2 1.1-47.4 0-70.6zM224.1 332.3c-68.4 0-124-55.6-124-124s55.6-124 124-124 124 55.6 124 124-55.6 124-124 124zm141.6-241.9c-2.3-2.3-5.3-3.5-8.5-3.5s-6.2 1.2-8.5 3.5c-2.3 2.3-3.5 5.3-3.5 8.5s1.2 6.2 3.5 8.5c2.3 2.3 5.3 3.5 8.5 3.5s6.2-1.2 8.5-3.5c2.3-2.3 3.5-5.3 3.5-8.5s-1.2-6.2-3.5-8.5zM448 154.2c-1.1-23.2-12.7-44.5-31.7-59.3-19-14.8-42.5-22.7-67.6-22.7H131.1c-25.1 0-48.6 7.9-67.6 22.7-19 14.8-30.6 36.1-31.7 59.3-1.1 23.2-1.1 47.4 0 70.6 1.1 23.2 12.7 44.5 31.7 59.3 19 14.8 42.5 22.7 67.6 22.7h212.8c25.1 0 48.6-7.9 67.6-22.7 19-14.8 30.6-36.1 31.7-59.3 1.1-23.2 1.1-47.4 0-70.6zM224.1 332.3c-68.4 0-124-55.6-124-124s55.6-124 124-124 124 55.6 124 124-55.6 124-124 124z"/></svg>');}
.page-tt88login__social-icon--telegram::before { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path fill="currentColor" d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm121.8 169.9l-40.7 191.8c-1.1 5.1-4.7 9.3-9.9 11.4-5.1 2.1-10.8 1.6-15.4-1.4l-71.5-49.9-31.8 31.8c-3.6 3.6-8.2 5.6-13 5.6-4.9 0-9.5-2-13.1-5.6l-51.7-51.7c-3.9-3.9-5.9-9-5.9-14.1v-82.5c0-4.8 1.9-9.4 5.5-13l138.6-105.5c4.6-3.5 10.7-4.1 15.4-1.4 5.1 2.1 8.7 6.2 9.9 11.4z"/></svg>');}
.page-tt88login__social-icon--facebook::before { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M504 256C504 119 395 8 256 8S8 119 8 256c0 123.78 90.69 226.38 209.25 245V361.5h-44.17V299.7H256v-40.3c0-42.3 25.7-65.3 63.5-65.3 18.06 0 33.74 3.2 38.2 4.6v44.2h-26.7c-20.9 0-24.6 9.9-24.6 24.2v29.3h49.3l-6.4 61.8H304V501.3C413.33 481.5 504 379 504 256z"/></svg>');}


/* Responsive adjustments */
@media (max-width: 1024px) {
  .page-tt88login__main-title {
    font-size: clamp(2rem, 6vw, 3rem);
  }
  .page-tt88login__section-title {
    font-size: clamp(1.8rem, 5vw, 2.2rem);
  }
}

@media (max-width: 768px) {
  .page-tt88login__hero-section {
    padding: 10px 0 30px 0;
  }
  .page-tt88login__hero-content {
    padding: 20px 15px;
    margin-top: 10px;
  }
  .page-tt88login__main-title {
    font-size: clamp(1.8rem, 8vw, 2.5rem);
  }
  .page-tt88login__hero-description {
    font-size: 1rem;
  }
  .page-tt88login__cta-buttons {
    flex-direction: column;
    gap: 10px;
  }
  .page-tt88login__btn-primary,
  .page-tt88login__btn-secondary,
  .page-tt88login__btn-game {
    padding: 12px 20px;
    font-size: 0.95rem;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .page-tt88login__btn-center {
    width: 100% !important;
    max-width: 100% !important;
  }

  .page-tt88login__section-title {
    font-size: clamp(1.6rem, 7vw, 2rem);
    margin-bottom: 30px;
  }
  .page-tt88login__about-section,
  .page-tt88login__guide-section,
  .page-tt88login__providers-section,
  .page-tt88login__promotions-section,
  .page-tt88login__faq-section,
  .page-tt88login__contact-section,
  .page-tt88login__games-section {
    padding: 40px 0;
  }
  .page-tt88login__container {
    padding: 0 15px;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .page-tt88login__text-block {
    font-size: 0.95rem;
  }
  .page-tt88login__benefits-grid,
  .page-tt88login__guide-grid,
  .page-tt88login__games-grid,
  .page-tt88login__promotions-grid,
  .page-tt88login__providers-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .page-tt88login__step-image,
  .page-tt88login__game-image {
    height: 180px;
  }
  .page-tt88login__card-title {
    font-size: 1.3rem;
  }
  .page-tt88login__provider-item {
    height: 100px;
  }
  .page-tt88login__provider-logo {
    width: 60px;
    height: 60px;
  }
  .page-tt88login__faq-question {
    padding: 15px 20px;
    font-size: 1rem;
  }
  .page-tt88login__faq-answer {
    padding: 0 20px;
  }
  .page-tt88login__faq-item.active .page-tt88login__faq-answer {
    padding: 15px 20px !important;
  }
  .page-tt88login__social-links {
    gap: 15px;
  }
  .page-tt88login__social-icon {
    width: 45px;
    height: 45px;
    font-size: 1.3rem;
  }
  /* Ensure all images are responsive on mobile */
  .page-tt88login img {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    display: block !important;
  }
  .page-tt88login__section,
  .page-tt88login__card,
  .page-tt88login__container,
  .page-tt88login__hero-image-wrapper,
  .page-tt88login__cta-buttons,
  .page-tt88login__button-group,
  .page-tt88login__btn-container,
  .page-tt88login__social-links {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
  .page-tt88login ul,
  .page-tt88login ol {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 0 10px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .page-tt88login li {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
  }
}

@media (max-width: 480px) {
  .page-tt88login__main-title {
    font-size: clamp(1.6rem, 9vw, 2.2rem);
  }
  .page-tt88login__section-title {
    font-size: clamp(1.4rem, 8vw, 1.8rem);
  }
  .page-tt88login__hero-description {
    font-size: 0.9rem;
  }
  .page-tt88login__btn-primary,
  .page-tt88login__btn-secondary,
  .page-tt88login__btn-game {
    font-size: 0.9rem;
  }
  .page-tt88login__text-block,
  .page-tt88login__card-description,
  .page-tt88login__step-description,
  .page-tt88login__faq-answer p {
    font-size: 0.9rem;
  }
  .page-tt88login__card-title,
  .page-tt88login__step-title {
    font-size: 1.2rem;
  }
  .page-tt88login__faq-question {
    font-size: 0.95rem;
    padding: 12px 18px;
  }
  .page-tt88login__faq-item.active .page-tt88login__faq-answer {
    padding: 12px 18px !important;
  }
}