* {
  -webkit-box-sizing: inherit;
  box-sizing: border-box;
  outline: 0;
}

html {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  scroll-behavior: smooth;
  color-scheme: light;
  overflow-x: hidden;
}
body {
  background-color: #f8f8f8;
  padding: 0;
  overflow-x: hidden;
  margin: 0;
  color: #000;
}
header {
  width: 100%;
  background: transparent;
  position: absolute;
  top: 0;
  left: 0;
}
li,
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
h1,
h2,
h3,
h4,
h5,
p,
blockquote {
  margin: 0;
}
h1,
h1 strong {
  color: #0f1d22;

  font-family: Lora;
  font-size: 55px;
  font-style: normal;
  font-weight: 700;
  line-height: 60px;
  margin-bottom: 18px;
}
h2 strong,
h1 strong {
  color: #80324b;
}

h2 {
  color: #000;
  margin-bottom: 18px;
  font-family: Lora;
  font-size: 50px;
  font-style: normal;
  font-weight: 700;
  line-height: 55px;
}

h4 {
  color: #3e3e3e;

  font-family: Poppins;
  font-size: 13px;
  font-style: normal;
  font-weight: 500;
  line-height: 14px;
  letter-spacing: 1.85px;
  text-transform: uppercase;
}
p {
  color: #6f6f6f;

  font-family: Lora;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px;
}

a {
  text-decoration: none;
  color: inherit;
}
a:hover {
  text-decoration: none;
  color: inherit;
}
a button {
  cursor: pointer;
}
a.btn-link,
a.btn-link:hover {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
}
/* header */

.container__menu {
  width: 100%;
  padding: 22px 134px;
  margin: 0 auto;
}
.header-area {
  position: relative;
  width: 100%;
  z-index: 19;
  background: transparent;
  max-width: 1440px;
  margin: 0 auto;
}
.site-navbar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.site-navbar ul {
  padding: 0;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 25px;
  padding: 12px 24px;
  border-radius: 1000px;
  background-color: rgba(255, 255, 255, 0.2);
  transform: translate(15%, 0);
}
.menu-title {
  color: white;
  font-family: Asap;
  font-size: 24px;
  font-style: normal;
  font-weight: 900;
}

.mobile-on {
  display: none;
}
.decs {
  display: block;
}
.site-navbar ul li a {
  color: #000000;
  display: block;
  text-decoration: none;

  color: #000;

  font-family: Lora;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 0.4px;
}
.site-navbar ul li a:hover {
  color: #80324b;
  transition: 0.9s;
}
.nav-toggler {
  background-color: transparent;
  cursor: pointer;
  display: none;
  border: none;
}
.nav-toggler span,
.nav-toggler span:before,
.nav-toggler span:after {
  width: 28px;
  height: 3px;
  background-color: #fff;
  display: block;
}
.nav-toggler span:before {
  content: "";
  transform: translateY(-9px);
}
.nav-toggler span:after {
  content: "";
  transform: translateY(6px);
}
.nav-toggler.toggler-open span {
  background-color: transparent;
}
.nav-toggler.toggler-open span:before {
  transform: translateY(0px) rotate(45deg);
}
.nav-toggler.toggler-open span:after {
  transform: translateY(-3px) rotate(-45deg);
}
.box-btn-menu.mobile-on {
  display: none;
}
.menu-logo {
  width: 139px;
}
.menu_img {
  display: none;
}
.menu-item-first {
  display: none;
}

.desc-only {
  display: block;
}

.box-btn-menu {
  display: flex;
  gap: 8px;
}
.btn-sub button {
  color: #fff;
  background-color: transparent;
  font-family: Lora;
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: 20px;
  letter-spacing: 0.339px;
  border-radius: 469.017px;
  border: 1px solid #fff;
  padding: 11px 32.792px 11px 33.208px;
}

.btn-sub button:hover {
  color: #000000;
  border: 1px solid #000000;
  transition: 0.9s;
}
.group-menu {
  width: 100%;
  justify-content: space-between;
  display: flex;
  align-items: center;
}

/* main */

section {
  margin: 0 auto;

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0 134px;
  max-width: 1440px;
}
/* footer */

footer {
  display: flex;
  flex-direction: column;
  padding: 86px 112px 75px 112px;
  background-color: #490a1e;
}
.footer-menu li {
  margin-bottom: 6px;
}
.footer-menu li:last-child {
  margin-bottom: 0;
}
.footer-contant {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.logo-footer {
  width: 139px;
}
.footer-menu {
  gap: 80px;
  display: flex;
  align-items: flex-end;
}

.rights-reserved {
  opacity: 0.4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 84px;
  color: #d8d9e3;
  text-align: center;
  font-family: Onest;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0.14px;
}

/* tab card */
.tab-container {
  width: 100%;
  margin: 0 auto 20px auto;
}

.tabs {
  display: flex;
  cursor: pointer;
  justify-content: flex-start;
  gap: 12px;
  margin: 16px 0 46px 0;
}

.tabs div {
  display: flex;
  padding: 13px 19px 13px 19px;
  justify-content: center;
  align-items: center;
  border-radius: 10000px;
  border: 1px solid rgba(0, 0, 0, 0.3);
  background: #fff;
  font-family: Poppins;
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: 14.9px;
  gap: 4px;
}

.tabs div:hover {
  color: #8a1d40;
  border: 1px solid #8a1d40;
  transition: 1.2s;
}

.tabs div.active {
  color: #ffffff;
  border: 1px solid #8a1d40;
  background-color: #8a1d40;
  transition: 0.9s;
}
.tabs div.active svg path {
  fill: white;
  transition: 0.9s;
}

.tabs div svg path {
  fill: rgb(0, 0, 0);
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

footer p {
  max-width: 300px;
  font-family: Onest;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px;
  color: #fff;
  opacity: 0.7;
}
.footer-menu a {
  color: #fff;

  font-family: Onest;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px;
}
.footer-menu a:hover {
  color: #9c9c9c;
  transition: 0.9s;
}
.footer-menu a.title-footer {
  color: white;
  font-family: Onest;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
}
.footer-menu li:first-child {
  color: white;
  font-family: Onest;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
  margin-bottom: 14px;
}
.box-term {
  display: flex;
  gap: 30px;
}

/* btn */

.main-btn {
  margin: 0 auto;
}

.main-btn button {
  color: #000;
  padding: 10px 99px 10px 98px;
  font-family: Lora;
  font-size: 15px;
  font-style: normal;
  font-weight: 500;
  line-height: 24.137px;
  text-transform: uppercase;
  width: 100%;
  margin-top: 30px;
  text-align: center;
  border: none;
  border-radius: 491.758px;
  border: 1px solid #000;
  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.15);
}

.main-btn:hover button {
  border: 1px solid #80324b;
  color: #80324b;
  transition: 0.9s;
}
/* ===== FAQ (fixed) ===== */

.faq {
  padding: 60px 141px 26px 141px;
  display: flex;
  flex-direction: column;        /* чтобы h2, h4 и список шли столбцом */
  align-items: center;           /* заголовки по центру */
}

.container__row_fag {
  width: 100%;
  max-width: 900px;              /* чтобы контент не растягивался слишком широко */
  margin-top: 20px;
}

.faq h2 { margin-bottom: 0; }

.faq h4 {
  color: #6f6f6f;
  text-align: center;
  font-family: Lora;
  font-size: 14px;
  font-weight: 500;
  line-height: 37px;
  letter-spacing: 1.85px;
  text-transform: uppercase;
}

.faq__list li { margin-bottom: 15px; }

/* Вопрос */
.faq__list .question {
  position: relative;
  cursor: pointer;
  padding: 15px 48px 15px 30px;  /* справа даём место под иконку */
  border-radius: 8px;
  border: 1px solid #f1f2f9;
  background: #fff;
  color: #000;
  font-family: Lora;
  font-size: 16px;
  font-weight: 600;
  line-height: 135%;
  box-shadow: 0 1px 4px 0 rgba(25,33,61,.06);
  transition: color .3s ease;
}

/* кружок-переключатель справа */

.faq__list .plus-minus-toggle{
    cursor: pointer;
    position: absolute;
    width: 20px;
    height: 20px;
    right: 32px;
    top: 30%;
    z-index: 2;
    border-radius: 100px;
    background: #f4f4f4;
    padding: 7px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    transition: 0.3s  ease-in;
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  border-radius: 100px;
  background: #f4f4f4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
}

/* собственно иконка (она приходит из <img>) */
.faq__list .plus-minus-toggle img{
  width: 14px;
  height: 14px;
  display: block;
  object-fit: contain;
  transition: transform .2s ease;
}

/* поворот при открытии (JS добавляет .collapsed на span) */
.faq__list .plus-minus-toggle.collapsed img{
  transform: rotate(90deg);
}

/* Ответ (скрыт) */
.faq__list .answer{
  color: #667085;
  font-family: Inter;
  font-size: 15.4px;
  line-height: 23.1px;
  overflow: hidden;
  max-height: 0;
  padding: 0 32px;
  transition: max-height .35s ease, padding .35s ease;
}

/* Открытое состояние */
.faq__list li.active .answer{
  max-height: 1200px;    /* достаточно большое значение вместо жёстких 200px */
  padding: 20px 32px 25px;
}

/* активный вопрос становится чуть светлее */
.faq__list li.active .question{
  color: #939393;
}
/* ответ всегда display:block, скрываем высотой */
.faq__list .answer {
  display: block;                 /* ВАЖНО */
  overflow: hidden;
  max-height: 0;
  padding: 0 32px;                /* боковые паддинги остаются */
  transition: max-height .35s ease, padding .35s ease;
}

/* при открытии высоту мы задаём инлайном из JS; 
   но на всякий случай оставим "на большое значение": */
.faq__list li.active .answer {
  /* JS выставит точную высоту, это просто безопасный бэкап */
  max-height: 1200px;
}

/* Иконка-кнопка: без фона, размер и позиция */
.faq__list .plus-minus-toggle{
  position: absolute;
  right: 32px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  padding: 0;
  background: none;
  border-radius: 100px;
  cursor: pointer;
}

/* Картинка внутри */
.faq__list .plus-minus-toggle img{
  display: block;
  width: 100%;
  height: auto;
  transition: transform .25s ease;
}

/* Поворот при раскрытии */
.faq__list li.active .plus-minus-toggle img{
  transform: rotate(90deg);
}

/* Состояние вопроса (опционально сереем) */
.faq__list li.active .question{
  color: #939393; /* Исправлено: .faq__list, а не .faq__List */
}

/* Ответ — по умолчанию скрыт, показываем JS-ом */
.faq__list .answer{
  display: none;           /* <-- ключевая строка */
  color: #667085;
  padding: 0 32px;
  font-family: Inter, sans-serif;
  font-size: 15.4px;
  line-height: 23.1px;
}

.close-popup.svg-icon {
    background: inherit;
    border:none;
}
/* hero section */

.hero {
  padding-top: 145px;
  padding-bottom: 84px;
  position: relative;
}
.hero h1,
.hero p {
  max-width: 500px;
}
.hero p {
  margin-bottom: 55px;
}
.btn {
  color: #000;

  font-family: Lora;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 28px;
  text-transform: uppercase;
  background: transparent;
}
.btn:hover {
  color: #80324b;
  transition: 0.9s;
}
.hero-contact {
  display: flex;
  gap: 18px;
  align-items: center;
}
.hero-img {
  position: absolute;
  top: 0;
  right: 0;
  width: 678px;
  height: 521px;
}
.hero-contant {
  display: flex;
  flex-direction: column;

  align-items: flex-start;
}
.hero-btn button {
  color: #fff;

  font-family: Lora;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 24.137px;
  text-transform: uppercase;
  display: flex;
  padding: 15px 26px 13.999px 26px;
  justify-content: center;
  align-items: center;
  border-radius: 491.758px;
  background-color: #8a1d40;
  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.15);
  border: none;
  gap: 9px;
}
.hero-btn button:hover {
  filter: brightness(1.3);
  transition: 0.9s;
}

/* card section */

.casino {
  max-width: 1440px;
  padding: 55px 135px;
  margin: 0 auto;
}
.casino-main {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  width: 100%;
  margin-bottom: 65px;
}
.casino-main-filter {
  display: flex;
  align-items: center;
  gap: 6px;
}
.card {
  width: 366px;
  padding: 18px 21px 23px 21px;

  border-radius: 6.152px;
  background: #fff;

  box-shadow: 0 13.33px 51.271px 0 rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
}
.casino-main-filter button {
  border-radius: 10000px;
  border: 1px solid rgba(0, 0, 0, 0.3);

  display: flex;
  padding: 13px 27.5px;
  justify-content: center;
  align-items: center;
  gap: 4px;
  color: #000;
  cursor: pointer;
  font-family: Poppins;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 14.9px;
  letter-spacing: 1px;
}
.btn-contact button:hover,
.card-btn-first button:hover,
.card-btn-second button:hover,
.casino-main-filter button:hover {
  filter: brightness(1.1);
  transition: 0.9s;
}
.casino-main-filter button span {
  color: #9ba1af;

  font-family: Poppins;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 14.9px;
  letter-spacing: 1px;
}

.img-card img {
  max-width: 324px;
  margin-bottom: 11px;
  width: 100%;
}
.card-title {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 7px;
}
.card-title h5 {
  color: #132031;

  font-family: Lora;
  font-size: 22.559px;
  font-style: normal;
  font-weight: 700;
  line-height: 34.477px;
  max-width: 80px;
}
.card-title div {
  border-radius: 4px;
  border: 1px solid #8a1d40;
  padding: 4px 7px;
  background: rgba(138, 29, 64, 0.05);
  color: #8a1d40;

  font-family: Inter;
  font-size: 15px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}
.card-rate {
  display: flex;
  align-items: center;
  gap: 10px;
}
.card-rate img {
  width: 108px;
}
.card-rate div {
  color: #8a1d40;

  font-family: Poppins;
  font-size: 15.018px;
  font-style: normal;
  font-weight: 600;
  line-height: 20.024px;
}
.card-rate a {
  color: #6f6f86;
  font-family: Poppins;
  font-size: 14.356px;
  font-style: normal;
  font-weight: 500;
  line-height: 18.457px;
  border-bottom: 1px solid #6f6f86;
}
.card-rate a:hover {
  color: #8a1d40;
  transition: 0.9s;
}
.card-info {
  display: flex;
  align-items: center;
  margin: 14px 0;
}
.card-info-item {
  display: flex;
  flex-direction: column;
  width: 139px;
}
.card-info-item p {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #6f6f86;

  font-family: Poppins;
  font-size: 14.356px;
  font-style: normal;
  font-weight: 500;
  line-height: 22.559px;
  width: 139px;
  margin-bottom: 6px;
}
.card-info-item p span {
  color: #132031;

  font-family: Poppins;
  font-size: 14.356px;
  font-style: normal;
  font-weight: 500;
  line-height: 22.559px;
}
.border-card {
  background-color: #d8d9e3;
  width: 1.025px;
  height: 41.017px;
  margin: 0 20px;
}
.card-info-item-title {
  color: #132031;

  font-family: Poppins;
  font-size: 14.356px;
  font-style: normal;
  font-weight: 700;
  line-height: 20.508px;
  max-width: 120px;
}
.card-box-btn {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8.2px;
}
.card-btn-first,
.card-btn-second {
  width: 100%;
}
.card-btn-first button,
.card-btn-second button {
  color: #6f6f86;
  text-align: center;
  font-family: Lora;
  font-size: 14.356px;
  font-style: normal;
  font-weight: 500;
  line-height: 20.508px;
  padding: 10.254px 16.407px;
  border-radius: 4.102px;
  border: 1.025px solid #979dba;
  width: 100%;
}
.card-btn-second button {
  color: #fff;
  border-radius: 8.203px;
  background: #8a1d40;
  border: none;
  font-weight: 700;
  border: 1.025px solid #8a1d40;
}

.casino-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
  flex-wrap: wrap;
}

.img-card {
  position: relative;
}
.top-1-bonus {
  position: absolute;
  top: 13px;
  right: 15px;
  padding: 3px 5px;

  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;

  font-family: Inter;
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  border-radius: 4px;
  background: linear-gradient(180deg, #ff5900 0%, #ff5900 100%);
}
.top-1-bonus img {
  width: 14px;
  margin-bottom: 0;
}
.top-2-bonus,
.top-3-bonus {
  position: absolute;
  top: 13px;
  right: 15px;
  color: #fff;
  border-radius: 4px;
  background: #9600ed;
  font-family: Inter;
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  padding: 3px 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.top-3-bonus {
  background: #de00e9;
}
.card-title .top-1-gold,
.card-title .top-2-pl,
.card-title .top-3-br {
  color: #fff;
  border: none;

  border-radius: 4px;
  background: linear-gradient(0deg, #ffc858 0%, #ffc858 100%),
    linear-gradient(322deg, rgba(255, 255, 255, 0) -39.62%, #fff 264.16%),
    linear-gradient(
      73deg,
      #9ea1a1 -11.39%,
      #848b8a 30.23%,
      #576265 82.4%,
      #576265 110.54%
    );
  background-blend-mode: color, overlay, normal;
}

.card-title .top-2-pl {
  background: linear-gradient(
      321deg,
      rgba(255, 255, 255, 0) -39.48%,
      #fff 474.38%
    ),
    linear-gradient(
      73deg,
      #9ea1a1 -11.39%,
      #848b8a 30.23%,
      #576265 82.4%,
      #576265 110.54%
    );
}
.card-title .top-3-br {
  background: linear-gradient(0deg, #855b1b 0%, #855b1b 100%),
    linear-gradient(
      73deg,
      #9ea1a1 -11.39%,
      #848b8a 30.23%,
      #576265 82.4%,
      #576265 110.54%
    );
}
.rec-crown {
  position: absolute;
  top: -23px;
  left: 165px;
  display: flex;
  width: 44.209px;
  height: 33.638px;
  z-index: 10;
  justify-content: center;
  align-items: center;
  padding: 7.688px 9.434px 7.145px 9.793px;
  border-radius: 5.766px;
  background: linear-gradient(0deg, #ffc858 0%, #ffc858 100%),
    linear-gradient(314deg, rgba(255, 255, 255, 0) -10.72%, #fff 168.4%),
    linear-gradient(
      74deg,
      #576265 -4.27%,
      #9ea1a1 15.92%,
      #848b8a 49.41%,
      #576265 60.7%,
      #576265 92.37%,
      #757a7b 104.31%,
      #576265 113.1%
    );

  background-blend-mode: color, overlay, normal;
}
.rec-crown img {
  width: 24.982px;
  height: 18.804px;
}
.first-rec,
.second-rec,
.therd-rec {
  position: relative;
  width: 366px;
  height: 100%;
  border-radius: 6.152px;
  background: linear-gradient(0deg, #ffc858 0%, #ffc858 100%),
    linear-gradient(314deg, rgba(255, 255, 255, 0) -10.72%, #fff 168.4%),
    linear-gradient(
      74deg,
      #576265 -4.27%,
      #9ea1a1 15.92%,
      #848b8a 49.41%,
      #576265 60.7%,
      #576265 92.37%,
      #757a7b 104.31%,
      #576265 113.1%
    );
  background-blend-mode: color, overlay, normal;
}
.first-rec .card,
.second-rec .card,
.therd-rec .card {
  transform: scale(0.98);
}
.second-rec {
  background: linear-gradient(
      313deg,
      rgba(255, 255, 255, 0) 17.22%,
      #fff 252.78%
    ),
    linear-gradient(
      75deg,
      #576265 1.05%,
      #9ea1a1 17.89%,
      #848b8a 45.81%,
      #576265 55.22%,
      #576265 81.63%,
      #757a7b 91.58%,
      #576265 98.91%
    );

  background-blend-mode: overlay, normal;
}
.therd-rec {
  background: linear-gradient(0deg, #855b1b 0%, #855b1b 100%),
    linear-gradient(
      75deg,
      #576265 1.05%,
      #9ea1a1 17.89%,
      #848b8a 45.81%,
      #576265 55.22%,
      #576265 81.63%,
      #757a7b 91.58%,
      #576265 98.91%
    );

  background-blend-mode: color, normal;
}
.second-rec .rec-crown {
  background: linear-gradient(
      313deg,
      rgba(255, 255, 255, 0) 17.22%,
      #fff 252.78%
    ),
    linear-gradient(
      75deg,
      #576265 1.05%,
      #9ea1a1 17.89%,
      #848b8a 45.81%,
      #576265 55.22%,
      #576265 81.63%,
      #757a7b 91.58%,
      #576265 98.91%
    );

  background-blend-mode: overlay, normal;
}
.therd-rec .rec-crown {
  background: linear-gradient(0deg, #855b1b 0%, #855b1b 100%),
    linear-gradient(
      75deg,
      #576265 1.05%,
      #9ea1a1 17.89%,
      #848b8a 45.81%,
      #576265 55.22%,
      #576265 81.63%,
      #757a7b 91.58%,
      #576265 98.91%
    );

  background-blend-mode: color, normal;
}

.red-lable {
  position: absolute;

  color: #fff;
  z-index: 11;
  top: 30px;
  left: -39px;
  font-family: Inter;
  font-size: 15px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  text-transform: uppercase;
  transform: rotate(-45deg);
  padding: 8.165px 36.967px 4.845px 33.549px;
  background: linear-gradient(
      90deg,
      #d75b60 -4.65%,
      #970100 8.57%,
      #aa0404 13.52%,
      #dd0d11 26.74%,
      #ec232a 31.69%,
      #f93842 38.3%,
      #ff404b 41.6%,
      #e12025 63.08%,
      #cb090a 81.25%,
      #c40101 91.16%,
      #b50101 142.37%,
      #b20101 152.28%
    ),
    linear-gradient(
      91deg,
      #d75b60 -65.22%,
      #970100 -47.19%,
      #aa0404 -40.42%,
      #dd0d11 -22.39%,
      #ec232a -15.62%,
      #f93842 -6.6%,
      #ff404b -2.1%,
      #e12025 27.21%,
      #cb090a 52.01%,
      #c40101 65.54%,
      #b50101 135.44%,
      #b20101 148.96%
    );
}
.red-info {
  overflow: hidden;
  width: 200px;
  height: 200px;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
}
.top-rate {
  padding: 60px 135px;
  max-width: 1440px;

  margin: 0 auto;
}
/* testom... */

.testimonials {
  max-width: 1440px;
  padding: 140px 137px 294px 206px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  position: relative;
}
.testimonials-contant-main p {
  color: #000;

  text-align: center;
  font-family: Lora;
  font-size: 30px;
  font-style: normal;
  font-weight: 400;
  line-height: 48px;
  max-width: 510px;
}
.testimonials-author div {
  color: #000;
  margin-top: 60px;
  text-align: center;
  font-family: Lora;
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 28.8px;
}
.testimonials-contant-main .testimonials-author p {
  color: #000;
  margin: 0 auto;
  text-align: center;
  font-family: Lora;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 21.6px;

  opacity: 0.6;
}
.author-img {
  width: 218px;
  margin: 0 auto;
}
.testimonials-contant-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.testimonials-contant-submain span {
  color: #fd5c4c;

  font-family: Poppins;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 19.2px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}
.testimonials-contant-submain h3 {
  color: #000;
  max-width: 290px;
  font-family: Poppins;
  font-size: 46px;
  font-style: normal;
  font-weight: 400;
  line-height: 55.2px;
  letter-spacing: -1.15px;
}
.testimonials-contant-submain h3 strong {
  color: #000;

  font-family: Lora;
  font-size: 46px;
  font-style: normal;
  font-weight: 700;
  line-height: 55.2px;
  letter-spacing: -1.15px;
}
.testimonials-contant-submain {
  margin-top: 100px;
}
.coin {
  position: absolute;
  top: -2%;
  left: 7%;
  width: 223px;
}
.author-2 {
  position: absolute;
  top: 55%;
  left: 50%;
  width: 251px;
}
.author-3 {
  position: absolute;
  top: 80%;
  left: 20%;
  width: 91px;
}
.cube {
  position: absolute;
  right: 10%;
  top: 75%;
  width: 154px;
}
/* blog main section */

.blog {
  padding: 0 140px 60px 140px;
  max-width: 1440px;
  margin: 0 auto;
  align-items: center;
}
.blog-items {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 25px;
}
.blog-item {
  max-width: 370px;
}
.blog-item img {
  width: 370px;
  margin-bottom: 30px;
}
.blog-item a {
  color: #1a1a1a;
  margin-bottom: 14px;
  font-family: Inter;
  font-size: 21.186px;
  font-style: normal;
  font-weight: 600;
  line-height: 30.816px;
  max-width: 330px;
  position: relative;
}
.blog-item a:after {
  content: "";
  position: absolute;
  top: 0;
  left: 345px;
  width: 23.112px;
  height: 23.112px;
  background-image:url("/wp-content/themes/captain-slot/assets/img/arrow-up-right.svg");
  background-repeat:no-repeat; background-size:contain;
}

.blog-item p {
  color: #667085;
  max-width: 330px;
  font-family: Inter;
  font-size: 15.408px;
  font-style: normal;
  font-weight: 400;
  line-height: 23.112px;
}
/* about */
.about {
  max-width: 1170px;
  padding: 70.294px 97.5px 147.706px 98px;
  flex-direction: row;
  justify-content: space-between;
  border-radius: 4px;
  background: #171717;
  transform: translate(0, 34px);
}
.about-item h3 {
  color: #fff;

  font-family: Poppins;
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 28.8px;
  margin-bottom: 21px;
}
.about-item p {
  max-width: 332px;
  color: #fff;

  font-family: Poppins;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 27.2px;
}
.btn-contact button {
  color: #fff;

  font-family: Lora;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 24.137px;
  text-transform: uppercase;
  padding: 10px 39px 10px 31px;
  border-radius: 491.758px;
  background: #8a1d40;
  border: none;
  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.15);
  margin-top: 18px;
}
.about-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.about-item-second {
  display: flex;
  flex-direction: column;
}
.about-item-second h4 {
  color: #fff;

  font-family: Poppins;
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: 21px;
  letter-spacing: 0.7px;
  text-transform: uppercase;
}
.about-number {
  display: flex;
  align-items: flex-end;
}
.about-number div {
  font-family: Poppins;
  font-size: 300px;
  font-style: normal;
  font-weight: 700;
  line-height: 240px;

  background: linear-gradient(352deg, #87042e 30.42%, #af1848 70.79%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-left: 9px;
}
.about-number span {
  color: #fff;
  max-width: 90px;
  font-family: Poppins;
  font-size: 18px;
  font-style: italic;
  font-weight: 400;
  line-height: 27px;
}

body.no-scroll {
  position: fixed;
  width: 100%;
}

/* popup */

.popup {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #720f2e;
  border-radius: 15px;
  overflow: hidden;
  z-index: 9999;
  max-width: 977px;
  width: 100%;
  padding: 0;
}

.popup-wrapper {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.562);
  z-index: 9998;
}
.popup-contant {
  display: flex;

  position: relative;
}
.close-popup.svg-icon {
  position: absolute;
  top: 17px;
  right: 22px;
}
.popup-box {
  padding: 78px 59px 36px 67px;
}
.close-popup {
  cursor: pointer;
}
.imege-popup-main {
  width: 100%;
  max-width: 360px;
}
.popup-box h3 {
  color: #fff;

  font-family: Lora;
  font-size: 38px;
  font-style: normal;
  font-weight: 700;
  line-height: 44px;

  margin-bottom: 13px;
}
.popup-box p {
  color: #fff;

  font-family: Inter;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
.popup-box a {
  color: #fff;

  font-family: Inter;
  font-size: 13px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: none;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-underline-position: from-font;
}

.subscribe-form {
  display: flex;
  align-items: center;
  margin-top: 52px;
  margin-bottom: 19px;
  width: 100%;
  border: 1.278px solid #983051;
  border-radius: 12px;
  overflow: hidden;
}
.subscribe-form input {
  border-radius: 12.78px 0 0 12.78px;
  border: none;
  padding: 22px 25px;
  background: #fffffe;
  width: 100%;
  color: #000000;

  font-family: Inter;
  font-size: 14.058px;
  font-style: normal;
  font-weight: 400;
  line-height: 10.224px;
  letter-spacing: 0.281px;
}
.subscribe-form input::placeholder {
  color: #2b2c34;

  font-family: Inter;
  font-size: 14.058px;
  font-style: normal;
  font-weight: 400;
  line-height: 10.224px;
  letter-spacing: 0.281px;
}
.subscribe-form button {
  background: #983051;
  color: #fffffe;
  padding: 25px 22px;
  text-align: center;
  font-family: Inter;
  font-size: 14.058px;
  font-style: normal;
  font-weight: 700;
  line-height: 10.224px;
  letter-spacing: 0.281px;
  border: none;
  cursor: pointer;
}

/* page top rate */
.page-bonus h2 {
  margin: 70px auto 18px auto;
  text-align: center;
}
.page-bonus .btn-sub button,
.black-sub .btn-sub button {
  color: #000;
  border: 1px solid #000;
}
.page-bonus .page-bonus-subtitle {
  color: #6f6f6f;
  font-size: 14px;
  text-align: center;
  font-weight: 400;
  line-height: 22px;
  letter-spacing: 1.85px;
  margin: 0px auto 80px auto;
}
.page-bonus .tabs {
  margin: 20px 0 70px 0;
}

/* page blog */

.page-blog {
  margin: 0 auto;
  max-width: 1195px;
  padding: 105px 10px 60px 10px;
}
.nav-bar-top ul {
  display: flex;
  align-items: center;
  color: #6f6f86;
  gap: 4px;
  font-family: Onest;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px;
  margin-bottom: 35px;
}
.page-blog h2 {
  font-size: 46px;
  text-transform: uppercase;
  font-weight: 700;
  line-height: 52px;
}
.page-blog h4 {
  color: rgba(46, 46, 46, 0.5);

  font-family: Inter;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
}
.box-blog-item-time {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.blog-bottom_date {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  margin-bottom: 25px;
}
.blog-bottom_date div {
  color: #090909;

  text-align: center;
  font-family: Poppins;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
}
.news-blog-button {
  color: #8a1d40;

  text-align: center;
  font-family: Lora;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 18px;
  padding: 12px 24px;
  border-radius: 8px;
  border: 1px solid #8a1d40;
}
.main-blog-img {
  width: 100%;
}
.nav-blog {
  display: flex;
  margin-top: 26px;
  width: 100%;
  justify-content: space-between;
}
.secondary-nav ul li a {
  color: #132031;
  font-family: Onest;
  font-size: 12.975px;
  font-style: normal;
  font-weight: 400;
  line-height: 18.536px;
}
.secondary-nav ul li:first-child a {
  font-weight: 700;
}
.secondary-nav ul {
  border-right: 1px solid #d8d9e3;
  width: 180px;
}
.secondary-nav ul li {
  padding: 9.268px 7.414px 9.268px 0;
}
.main-nav {
  padding: 34px;
  max-width: 873px;
  border-radius: 18.536px;
  background: #fff;
}
.main-nav h3 {
  color: #132031;
  font-family: Lora;
  font-size: 37.072px;
  font-style: normal;
  font-weight: 700;
  line-height: 40.78px;
  margin-bottom: 18px;
}
.main-nav p {
  color: #111;

  font-family: Poppins;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 22.243px;
  margin-bottom: 22.243px;
}
.main-nav img {
  width: 100%;
}
.main-nav h5 {
  color: #132031;
  font-family: Lora;
  font-size: 29.658px;
  font-style: normal;
  font-weight: 700;
  line-height: 37.072px;
  margin-top: 34px;
  margin-bottom: 17px;
}
.main-nav article {
  color: #111;
  font-family: Lora;
  font-size: 22.243px;
  font-style: normal;
  font-weight: 500;
  line-height: 31.512px;
  margin-top: 37px;
  margin-bottom: 22px;
}
.main-nav ul li {
  margin: inherit;
  list-style: disc;
  color: #111;
  font-family: Poppins;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 22.243px;
  margin-bottom: 11px;
}
.main-nav ul li::marker {
  color: #7e0134;
}
.main-nav ul {
  padding-left: 20px;
  margin-bottom: 30px;
}
.sub-title-ul {
  color: #111;
  font-family: Lora;
  font-size: 18.536px;
  font-style: normal;
  font-weight: 700;
  line-height: 22.243px;
  margin-bottom: 11px;
}
.blog-list-num li {
  list-style: auto !important;
  position: relative;
  padding-left: 15px;
}

table {
  border: none;
  margin-bottom: 37px;
}
thead {
  background-color: #731331;
  border: none;
}
thead tr {
  background-color: #731331;
  border: 0.927px solid #c7c7c7;
  border-radius: 6px 6px 0 0;
}
thead tr th {
  color: #fff;
  border: 0.927px solid #731331;
  border-right: 1px solid #44444435;
  font-family: Onest;
  font-size: 12.975px;
  font-style: normal;
  font-weight: 500;
  line-height: 20.39px;
  padding: 14.829px;
  width: 127px;
  height: 50px;
  text-align: start;
  text-wrap: nowrap;
}
thead tr th:first-child {
  border-radius: 16px 0 0 0;
}
thead tr th:last-child {
  border-radius: 0 16px 0 0;
  border-right: 0.927px solid #731331;
}
tbody tr td {
  color: #111;
  padding: 14.829px;
  text-align: center;
  font-family: Onest;
  font-size: 12.975px;
  font-style: normal;
  font-weight: 500;
  line-height: 20.39px;
  border: 0.927px solid #c7c7c7;
}
tbody tr td:first-child,
tbody tr td:last-child {
  text-align: start;
}

/* page casino items tab */

.item-casino {
  padding: 90px 134px 79px 134px;
}
.item-casino h2 {
  color: #111;

  font-family: Lora;
  font-size: 30px;
  font-style: normal;
  font-weight: 700;
  line-height: 34px;
  margin-bottom: 16px;
}
.item-casino p {
  color: #111;

  font-family: Poppins;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  margin-bottom: 30px;
}
.item-casino p strong {
  font-weight: 700;
}
.item-casino .tabs {
  gap: 0;
}
.item-casino .tabs button {
  padding: 12px 29px;
  border: none;

  color: rgba(17, 17, 17, 0.4);
  background-color: transparent;
  font-family: Lora;
  font-size: 14px;
  font-style: normal;
  font-weight: 800;
  line-height: 17.975px;
  cursor: pointer;
  border-bottom: 2px solid #ececec;
}
.item-casino .tabs button.active {
  color: #111;
  border-bottom: 2px solid #8a1d40;
  font-family: Lato;
  font-size: 14px;
  font-style: normal;
  font-weight: 800;
  line-height: 17.975px;
  transition: 0.2s ease-in;
}
.items-casino-tab {
  max-width: 845px;
}

/* casino items page main */
.item-info-casino {
  display: flex;
}
.right-nav h4 {
  color: #111;

  font-family: Lora;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 32px;
  margin-bottom: 15px;
  text-transform: none;
  letter-spacing: normal;
}
.right-nav ul li a {
  color: #0a4f93;

  font-family: Poppins;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: auto;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-underline-position: from-font;
}
.right-nav ul li {
  margin-bottom: 12px;
}
.item-banner {
  margin-top: 30px;
  width: 252px;
  padding-top: 190px;
  height: 299px;
  background-image: url(../img/banner-1.png);
  background-repeat: no-repeat;
  background-size: contain;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.item-banner h5 {
  color: white;
  text-align: center;
  font-family: Onest;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 20.508px;
  width: 193px;
}
.item-btn button {
  color: #fff;
  text-align: center;
  font-family: Onest;
  font-size: 14.356px;
  font-style: normal;
  font-weight: 700;
  line-height: 20.508px;
  padding: 10.254px 16.407px;
  width: 212px;
  border-radius: 8.203px;
  background: #8a1d40;
  border: none;
}
.item-btn button:hover {
  filter: brightness(1.2);
  transition: 0.7s;
}

.main-item-casino {
  display: flex;
  padding: 33px 25px 25px 25px;
  flex-direction: column;

  align-items: flex-start;
  gap: 22px;
  border-radius: 8px;
  background: #fff;
  margin-right: 35px;
}
.main-item-casino-head {
  display: flex;
  gap: 18px;
  width: 100%;
}
.bg-main-head-img {
  padding: 20px;
  border-radius: 7.95px;
  background: #1b1f28;
  display: flex;
  align-items: center;
}
.bg-main-head-img img {
  width: 120px;
}
.main-item-casino-head-contant-first h1 {
  font-family: Lora;
  font-size: 30px;
  font-style: normal;
  font-weight: 700;
  line-height: 40px;
  text-wrap: nowrap;
  margin-bottom: 8px;
}

.main-item-casino-head-contant-first {
  display: flex;
  align-items: center;
  gap: 20px;
}
.main-item-casino-head-contant {
  width: 100%;
}
.visit-group {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
}
.visit-group .card-rate div {
  color: #000;

  font-family: Inter;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 16px;
}
.visit-group .item-btn button {
  max-width: 170px;
  font-family: Lora;
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: 24px;
  padding: 10px 16px;
}
.item-casino .main-item-casino-head-contant p {
  font-family: Onest;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px;
  margin-bottom: 15px;
}
.main-item-casino-head-contant-second {
  padding: 11px 374.456px 10px 12px;
  border-radius: 8px;
  background: rgba(118, 203, 170, 0.15);

  color: #38c093;

  font-family: Lato;
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 34px;
}
.main-item-casino-head-contant-second span {
  font-size: 13px;
  font-style: normal;
  font-weight: 700;
  line-height: 20px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.main-item-casino-head-contant-second h4 {
  color: #38c093;

  font-family: Lato;
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 34px;
}
.hits-box {
  display: flex;
  gap: 102px;
}
.hits-items {
  max-width: 309px;
}
.hits-items li {
  display: flex;
  align-items: center;
  color: #132031;
  font-family: Onest;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 22px;
  margin-bottom: 11px;
  gap: 8px;
}
.hits-items li:first-child {
  font-family: Onest;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 24px;
  margin-bottom: 15px;
}
.casino-cells {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 2px solid #ebebebe9;
  border-radius: 8px;
  overflow: hidden;
}

.casino-cells .cell {
  padding: 25px 16px;
  text-align: start;
  border: 1px solid rgba(0, 0, 0, 0.034);
}

.casino-cells .cell h3 {
  color: #111;
  font-family: Lato;
  font-size: 16.241px;
  font-weight: 700;
  line-height: 20.301px;
  margin-bottom: 10px;
}

.casino-cells .cell p {
  color: #111;
  font-family: Poppins;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  text-transform: capitalize;
  margin-bottom: 2px;
}

.casino-cells .cell p strong {
  font-weight: 700;
}
.casino__grid-controls {
    margin: auto;
}