@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");
html, body { background: #0A636F; color: #fff; margin: 0; padding: 0; font-size: 16px; font-family: 'Roboto', sans-serif; }

html ul li, body ul li { list-style: none; }

html a, body a { color: #28A9AF; }

.page { margin-top: 35px !important; }

h1, h2, h3, h4, h5, h6, p, span, div, label { box-sizing: border-box; color: inherit; }

.container { width: 1200px; padding: 0 35px; margin: 0 auto; }

#section-1, #section-2, #section-99 { padding-top: 1.5rem; }

h3 { font-size: 1.5rem; color: #f8ee94; margin: 1.5rem 0; }

#jet-footer { background: #042d2f; padding: 30px 0; color: inherit; }

#jet-footer .container { color: inherit; height: 116px; display: flex; justify-content: center; align-items: center; }

.subfooter { padding: 10px 30px; color: inherit; }

.subfooter ul { display: flex; padding: 0; margin: 0; justify-content: center; gap: 30px; }

.subfooter ul li { display: flex; align-items: center; }

.subfooter ul li img { width: 150px; }

.copyright { color: inherit; display: flex; justify-content: center; font-size: 12px; text-align: center; }

button { transition: all ease 0.3s; text-transform: uppercase; font-weight: 700; font-size: 1.1rem; letter-spacing: 0.5px; }

button:hover { background: #2ec554 !important; color: #07500a !important; }

.g-1 { display: flex; gap: 1rem; }

.g-1 .w-3-5 { width: 60%; }

.g-1 .w-2-5 { width: 40%; }

#jet-header { background: #054145; position: fixed; top: 0; left: 0; right: 0; height: 60px; z-index: 99999; }

#jet-header .container { display: flex; justify-content: space-between; padding: 0 35px; justify-content: space-between; align-items: center; }

#jet-header .site-logo img { height: 60px; }

#jet-header .right-hand { display: flex; align-items: center; gap: 1rem; }

#jet-header button { line-height: 32px; border-width: 0; -webkit-border-radius: 16px; -moz-border-radius: 16px; border-radius: 16px; }

.slider-box { position: relative; width: 100%; height: 300px; overflow: hidden; margin: 0 auto; }

.slider-box .img { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url("http://dev-25-02.magicjet.org/wp-content/uploads/2025/06/slider.png"); background-size: cover; background-position: center; transition: transform 0.5s ease, opacity 0.5s ease; z-index: 1; }

.slider-box .de-content { position: absolute; top: 0; left: 0; bottom: 0; right: 0; z-index: 2; display: flex; justify-content: start; align-items: center; }

.slider-box .de-content .de-box { color: white; text-align: center; padding: 2rem; width: 30%; box-sizing: border-box; display: flex; flex-direction: column; gap: 0.5rem; }

.slider-box .de-content .de-box .title { font-size: 34px !important; font-weight: 700; display: block; }

.slider-box .de-content .de-box .btn { padding: 0 1.25rem; line-height: 34px; width: 100%; background: red; color: white; border: none; border-radius: 17px; cursor: pointer; }

.slider-box:hover .img { transform: scale(1.05); opacity: 0.6; }

@media (max-width: 400px) { .slider-box { height: auto; }
  .slider-box .de-content { padding: 1rem; }
  .slider-box .img { position: relative; height: 200px; } }

ul.image-grid { display: flex; gap: 1rem; list-style: none; padding: 0; margin: 0; }

ul.image-grid li { width: 16.6%; position: relative; border-radius: 0.5rem; overflow: hidden; aspect-ratio: 3 / 4; background: #000; }

ul.image-grid li img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0.25rem; transition: all 0.5s ease; z-index: 1; }

ul.image-grid li div { position: absolute; opacity: 0; top: 0; left: 0; right: 0; bottom: 0; display: flex; visibility: hidden; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 1rem; padding: 10px !important; z-index: 2; color: white; padding: 1rem; transition: all 0.5s ease; }

ul.image-grid li div span { font-weight: 700; text-transform: uppercase; font-size: 12px; letter-spacing: 0.3px; }

ul.image-grid li div .j-play { background: #e20774; }

ul.image-grid li div .j-demo { background: #f0d01c; color: #000; }

ul.image-grid li div button { padding: 0; width: 90%; line-height: 30px; text-align: center; color: white; border: none; border-radius: 15px; letter-spacing: 0.8px; cursor: pointer; }

ul.image-grid li:hover img { transform: scale(1.1); opacity: 0.3; }

ul.image-grid li:hover div { visibility: visible; opacity: 1; }

@media (max-width: 768px) { ul.image-grid li { flex: 1 1 100%; } }

.bb-card { width: 100%; max-width: 1200px; margin: 0 auto 2rem; border-radius: 1rem; background: #054145; padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem; }

.bb-header { display: flex; justify-content: space-between; align-items: center; }

.bb-header .bb-title { font-size: 2rem; color: #e20774; font-weight: bold; }

.bb-header .bb-btn { padding: 0.5rem 1rem; border-radius: 2rem; border: none; font-weight: 700; text-transform: uppercase; font-size: 0.875rem; cursor: pointer; }

.bb-header .bb-btn.bb-btn-secondary { background: #e20774; color: #fff; }

.bb-jackpots { display: flex; gap: 1rem; list-style: none; padding: 0; margin: 0; }

.bb-jackpots li { flex: 1; background: #0A636F; border-radius: 0.75rem; padding: 1rem; display: flex; align-items: center; gap: 1rem; }

.bb-jackpots li img { width: 64px; height: 64px; }

.bb-jackpots li .bb-tier { display: flex; flex-direction: column; }

.bb-jackpots li .bb-tier .bb-label { font-size: 0.85rem; color: #bbb; text-transform: uppercase; }

.bb-jackpots li .bb-tier .bb-amount { font-size: 1.5rem; font-weight: bold; color: #ffd700; }

.bb-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }

.bb-col { background: #0A636F; border-radius: 0.75rem; padding: 1rem; }

.bb-col .bb-subtitle { font-size: 1.25rem; color: #e20774; font-weight: bold; margin-bottom: 0.75rem; display: block; }

.bb-col ul { list-style: none; padding: 0; margin: 0; }

.bb-col ul li { display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 0; border-bottom: 1px solid #333; }

.bb-col ul li img { width: 40px; height: 40px; }

.bb-col ul li .bb-info { flex: 1; margin: 0 1rem; }

.bb-col ul li .bb-info .bb-user { display: block; font-weight: bold; }

.bb-col ul li .bb-info .bb-time { font-size: 0.75rem; color: #fff; }

.bb-col ul li .bb-amount { font-weight: bold; color: #ffd700; }

@media (max-width: 768px) { .bb-jackpots { flex-direction: column; }
  .bb-columns { grid-template-columns: 1fr; }
  .bb-header { flex-direction: column; align-items: flex-start; gap: 0.5rem; } }

.table-wrapper { overflow-x: auto; margin-bottom: 2rem; }

.table-wrapper table { width: 100%; border-collapse: separate; border-spacing: 0; border-radius: 4px !important; overflow: hidden; background-color: #fff; color: #444; font-size: 0.875rem; }

.table-wrapper table thead { background-color: #F04D47; }

.table-wrapper table thead th { padding: 0.75rem; text-align: left; border: 1px solid #d3d3d3; font-weight: 700; color: #fff; }

.table-wrapper table thead th:first-child { border-top-left-radius: 4px; }

.table-wrapper table thead th:last-child { border-top-right-radius: 4px; }

.table-wrapper table tbody tr { border-bottom: 1px solid #d3d3d3; }

.table-wrapper table tbody tr:hover { background-color: #eee; }

.table-wrapper table tbody tr:last-child td:first-child { border-bottom-left-radius: 4px; }

.table-wrapper table tbody tr:last-child td:last-child { border-bottom-right-radius: 4px; }

.table-wrapper table tbody td { padding: 0.75rem; border: 1px solid #d3d3d3; vertical-align: top; }

.f-faq { margin: auto; }

.f-faq .f-title { font-size: 2rem; font-weight: bold; margin-bottom: 1.5rem; color: #fff; }

.f-faq .f-list { display: grid; grid-template-columns: 1fr; gap: 1rem; list-style: none; padding: 0; }

@media (min-width: 768px) { .f-faq .f-list { grid-template-columns: 1fr 1fr; } }

.f-faq .f-item { background: #054145; border-radius: 0.5rem; overflow: hidden; transition: background 0.3s ease; }

.f-faq .f-item:hover { background: #1e2f22; color: #fff; }

.f-faq .f-item .f-question { background-color: inherit; border-image-width: 0; border-width: 0; text-align-last: left; display: block; width: 100%; padding: 1rem; font-size: 1rem; font-weight: 700; color: #eca21a; text-transform: none; cursor: pointer; position: relative; padding-right: 30px; }

.f-faq .f-item .f-question:hover { background: transparent !important; }

.f-faq .f-item .f-question::after { position: absolute; right: 10px; top: 10px; content: '+'; font-weight: 700; font-size: 1.5rem; }

.f-faq .f-item .f-question.open::after { content: '×'; transform: rotate(180deg); }

.f-faq .f-item .f-answer { max-height: 0; opacity: 0; overflow: hidden; transition: all 0.3s ease; padding: 0 1rem; }

.f-faq .f-item .f-answer.open { max-height: 300px; opacity: 1; padding-bottom: 1rem; }

.f-faq .f-item .f-answer p { margin: 1rem 0 0; color: #aaa; }

.g-1 { display: flex; gap: 1rem; }

.g-1 .w-3-5 { width: 60%; }

.g-1 .w-2-5 { width: 40%; }

.j-ul { display: flex; flex-wrap: wrap; justify-content: space-between; }

.j-ul .de-boxes { width: 49%; -webkit-border-radius: 1rem; -moz-border-radius: 1rem; border-radius: 1rem; padding: 1rem; background: #054145; }

.j-ul .de-boxes p { margin-top: 0; font-size: 1.2rem; font-weight: 700; }

.j-ul .de-boxes ul { padding-left: 0; margin-bottom: 0; display: flex; flex-direction: column; gap: 0.5rem; }

.j-ul .de-boxes ul li span { color: #f5f4b4; margin-right: 1rem; }

.drop-menu { position: relative; }

.drop-menu ul { visibility: hidden; opacity: 0; position: absolute; top: 100%; right: 0; width: 240px; padding: 1rem; display: flex; flex-direction: column; background: #054145; transition: all ease 0.5s; }

.drop-menu ul li { display: flex; align-items: center; border-bottom: 1px solid #185B62; }

.drop-menu ul li:last-child { border-bottom-width: 0; }

.drop-menu ul li a { width: 100%; display: flex; align-items: center; line-height: 26px; text-decoration: none; color: #fff; padding: 0 5px; transition: all ease 0.5s; }

.drop-menu ul li a:hover { background: #185B62; }

.drop-menu:hover ul { visibility: visible; opacity: 1; }

.scroll-menu { position: fixed; top: 50%; right: 1rem; transform: translateY(-50%); display: flex; flex-direction: column; gap: 1rem; z-index: 1000; }

.scroll-menu li a { display: block; width: 1rem; height: 1rem; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; background: #b3e9c0; position: relative; }

.scroll-menu li a:hover::after { content: attr(data-tooltip); position: absolute; right: 120%; background: #2ec554; color: #000; padding: 4px 8px; font-size: 0.75rem; white-space: nowrap; border-radius: 4px; }

button { font-size: 0.9rem; display: flex; justify-content: center; align-items: center; color: #fff; padding: 0 1.2rem; }

button.prim { background: #2EB155; }

button.second { background: #185B62; }

.ac-1 { background: #054145; }

.ac-1 li { background: #0A636F !important; }

.ac-2 { background: #185B62; }

.pt-1 { padding-top: 1rem; }

.pb-1 { padding-bottom: 1rem; }

.pv-1 { padding-top: 1rem; padding-bottom: 1rem; }

.isMobile { display: none; }

@media (max-width: 481px) { .isMobile { display: block; }
  body div { box-sizing: border-box; }
  .right-hand button { display: none; }
  body #jet-header { position: fixed; top: 0; left: 0; right: 0; z-index: 9999; }
  #page #jet-header, #page #jet-footer .container { display: flex; width: 100% !important; padding: 0; justify-content: center; padding-left: 0 !important; padding-right: 0 !important; margin: 0; box-sizing: border-box !important; }
  body #jet-footer .container, body .container { width: 100% !important; padding: 0 1rem; margin: 0; box-sizing: border-box !important; }
  body .slider-box .de-content .de-box { width: 100%; }
  body .image-grid { flex-direction: column; }
  body .image-grid li { width: 40%; width: 100%; }
  #section-11 .g-1 { flex-direction: column; }
  #section-11 .g-1 .w-3-5, #section-11 .g-1 .w-2-5 { width: 100%; }
  .j-ul { flex-direction: column; }
  .j-ul .de-boxes { width: 100%; }
  .subfooter ul { flex-direction: column; }
  .table-wrapper table { font-size: 0.75rem; }
  .right-hand { transition: all ease 0.5s; }
  .right-hand.isActive { position: fixed; top: 80px; left: 1rem; right: 1rem; background: #185B62; background: #999; padding: 1rem; flex-direction: column; gap: 1rem; }
  .right-hand.isActive button { display: block; }
  .right-hand.isActive .dashicons-menu { display: none; } }