@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,560;9..144,700&family=Outfit:wght@400;500;600;700&display=swap");

:root {
  --primary-color: #145c45;
  --secondary-color: #c4622d;
  --white: #1e1a16;
  --h2: 2.15rem;
}

html { scroll-behavior: smooth; }
body {
  background: #f6f3ec !important;
  color: #1e1a16 !important;
  font-family: Outfit, "Segoe UI", sans-serif !important;
  font-size: 17px;
  line-height: 1.75;
  overflow-x: hidden;
  padding-left: 252px !important;
}
h1, h2, h3, .title, .banner-title, .page-title, .w2 {
  font-family: Fraunces, Georgia, serif !important;
  color: #143d32 !important;
  letter-spacing: -0.03em;
  font-weight: 560;
}
p, li, .accordion-box { color: #3c342c; }
a { color: #145c45; }
img, .img_fit { max-width: 100%; height: auto; }
.container {
  width: min(860px, calc(100% - 48px)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

header {
  position: fixed !important;
  left: 0;
  top: 0;
  bottom: 0;
  width: 252px;
  height: 100vh;
  overflow: auto;
  background: #10281f !important;
  padding: 22px 16px 88px !important;
  border: 0 !important;
  box-shadow: none !important;
  z-index: 30;
}
header .container,
header .container.flex {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 18px;
}
header .col-4:first-child { order: 1; }
header nav.col-6 { order: 2; }
header .col-4.center { order: 3; margin-top: auto; }
header .col-4,
header .col-4.col-md-12,
header nav.col-6,
header nav.col-6.col-lg-0 {
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  background: transparent !important;
}
.logo { display: inline-block; background: #fffdf8; border-radius: 10px; padding: 8px 10px; }
.logo img { width: 120px !important; max-height: 44px; object-fit: contain; filter: none; }
.topnav {
  display: flex;
  flex-direction: column !important;
  align-items: stretch !important;
  height: auto !important;
  gap: 2px;
}
.topnav > li > a {
  display: block;
  padding: 9px 12px !important;
  color: #e7f2ec !important;
  font-size: 15px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  border-radius: 8px;
  background: transparent !important;
}
.topnav li > a:hover { color: #fff !important; background: rgba(255, 255, 255, 0.08) !important; }
.topnav li.active > a,
.topnav li.active > a:hover {
  color: #10281f !important;
  background: #f3c7a2 !important;
}
header .col-4.center {
  display: flex !important;
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
}
header .col-4.center .btn { width: 100% !important; }

.btn, .bg-main, .more {
  position: relative;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: auto !important;
  background: #f6f3ec !important;
  background-image: none !important;
  color: #10281f !important;
  border: 0 !important;
  border-radius: 8px !important;
  padding: 11px 16px !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase;
  font-size: 13px !important;
  box-shadow: none !important;
  transform: none !important;
  margin: 0 !important;
}
.btn::before, .bg-main::before, .more::before { content: none !important; }
.btn:hover, .bg-main:hover { background: #fff !important; transform: none !important; }
header .btn + .btn,
.btn + .btn,
.btn.bg-w {
  background: #c4622d !important;
  color: #fff !important;
}

.main { padding-top: 36px !important; padding-bottom: 48px !important; }
.box, .accordion-area > li {
  background: #fffdf8 !important;
  border: 1px solid #e4dccb !important;
  border-radius: 16px !important;
  box-shadow: none !important;
}
.bg-green {
  background: #fffdf8 !important;
  background-image: none !important;
  border-top: 0 !important;
}
.bg, .bg-b, .bg-cover, .home-bg, .home-bg2, .home-bg3,
.pagetop, .down-bg, .slot-bg, .sport-bg, .esport-bg, .promo-bg, .casino-bg, .sign-bg, .game-bg {
  background-image: none !important;
  background-color: transparent !important;
  color: #1e1a16 !important;
}
.bg-b { background-color: transparent !important; }
.row > li { padding: 10px !important; }
.title, .banner-title { text-wrap: balance; }
.center, .container.center, .main.center { text-align: left !important; }
.w1 { color: #c4622d !important; }
.w-main { color: #145c45 !important; }
.accordion-area > li .open { background: #145c45 !important; color: #fff !important; }
.accordion-area > li .open p { color: #fff !important; }
.accordion-box { background: #f7f3ea !important; border-radius: 0 0 16px 16px; }
.table-main th { background: #145c45 !important; color: #fff !important; }
.tt { border-left-color: #c4622d !important; }
footer {
  background: #10281f !important;
  color: #f6f3ec !important;
  border-top: 0 !important;
  padding: 32px 0 !important;
  margin-top: 24px;
}
footer p, footer a { color: #f6f3ec !important; }

body > .container.center { display: block; overflow: hidden; }
body > .container.center > img {
  float: left;
  width: auto !important;
  max-width: 220px !important;
  object-fit: contain;
  margin: 6px 28px 12px 0 !important;
  border: 0 !important;
  border-radius: 16px !important;
  background: transparent;
}
body > .container.center > .btn { margin: 10px 8px 0 0 !important; }

.pagetop .flex { flex-direction: row !important; align-items: center; gap: 24px; text-align: left; }
.pagetop .page-title { text-align: left !important; }
.pagetop img {
  width: min(240px, 40%) !important;
  max-width: 240px !important;
  margin: 0 0 0 auto !important;
  border: 0 !important;
  border-radius: 16px;
}
section .main.center > img.center-img {
  float: none !important;
  display: block;
  width: min(100%, 520px) !important;
  margin: 8px 0 18px !important;
  border: 0 !important;
  border-radius: 16px;
}

.bg-green .row { align-items: stretch; }
.bg-green .row > li { flex: 1 1 240px !important; width: auto !important; min-width: 0; }
.bg-green .row > li > div {
  display: grid !important;
  grid-template-columns: 56px minmax(0, 1fr);
  column-gap: 12px;
  row-gap: 4px;
  text-align: left;
  padding: 4px !important;
  position: static !important;
}
.bg-green .row > li > div > .home-img { grid-row: 1 / span 2; }
.bg-green .row > li > div > p { grid-column: 2; margin: 0; }
.home-img, .box .home-img, .bg-green .home-img {
  position: static !important;
  width: 52px !important;
  height: 52px !important;
  margin: 0 !important;
  object-fit: contain !important;
  clip-path: none !important;
  filter: none !important;
  border-radius: 12px !important;
  background: #e7f3ee;
  padding: 6px;
}
.box .flex { flex-direction: column !important; align-items: flex-start !important; gap: 8px; }
.box .flex .col-3,
.box .flex .col-9 { width: 100% !important; flex: none !important; order: 0; }

.bg .row > li.col-4 { flex: 1 1 260px !important; min-width: 240px; width: auto !important; }
.box.bg-green:has(> img),
.col-6 .box.bg-green:has(> img),
.col-12 .box.bg-green:has(> img) {
  display: flex !important;
  flex-direction: row;
  align-items: flex-start;
  gap: 14px;
  position: static !important;
  text-align: left;
  padding: 16px !important;
}
.box.bg-green > img,
.col-6 .box.bg-green > img,
.col-12 .box.bg-green > img {
  position: static !important;
  width: 72px !important;
  height: 72px !important;
  object-fit: contain;
  flex: 0 0 72px;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 12px;
  background: #e7f3ee;
}
.col-6 .box.bg-green > img,
.col-12 .box.bg-green > img {
  width: min(220px, 42%) !important;
  height: auto !important;
  flex-basis: auto;
  background: transparent;
}
.box .content { text-align: left; overflow: visible; }
.box .content .btn { margin-top: 8px !important; }

.side_nav {
  left: auto !important;
  right: 18px !important;
  bottom: 18px !important;
  top: auto !important;
  width: auto;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 8px;
  background: #0c2019 !important;
  border: 0 !important;
  border-radius: 12px;
  box-shadow: none !important;
  z-index: 40;
}
.side_nav .a2a_kit { display: flex !important; flex-direction: row !important; gap: 6px; }
.side_nav .a2a_kit a {
  display: block !important;
  width: 32px !important;
  height: 32px !important;
  margin: 0 !important;
  float: none !important;
}
#BackTop { display: block; width: 32px; height: 32px; }
#BackTop img { display: block !important; width: 32px; height: 32px; object-fit: contain; }

@media screen and (max-width: 899px) {
  body { padding-left: 0 !important; }
  header {
    position: sticky !important;
    width: 100%;
    height: auto;
    bottom: auto;
    padding: 12px 16px !important;
    overflow: visible;
  }
  header .container.flex { flex-direction: row !important; flex-wrap: wrap; align-items: center !important; }
  header .col-4.center { flex-direction: row; width: auto !important; }
  header nav.col-6 { width: auto !important; }
  .topnav {
    display: none;
    position: fixed;
    inset: 0;
    background: #10281f !important;
    padding: 72px 20px 20px !important;
    z-index: 35;
    flex-direction: column !important;
  }
  .topnav > li > a { font-size: 18px !important; }
  #nav-icon {
    display: block !important;
    position: absolute;
    right: 12px !important;
    left: auto !important;
    top: 12px;
    width: 44px !important;
    height: 44px !important;
    border-radius: 8px !important;
    background: #c4622d !important;
    border: 0 !important;
    z-index: 45;
  }
  #nav-icon span {
    width: 18px !important;
    height: 2px !important;
    left: 13px !important;
    border-radius: 2px !important;
    background: #fff !important;
  }
  body > .container.center > img { float: none; width: min(100%, 240px) !important; margin: 0 0 12px !important; }
  .side_nav { left: auto !important; right: 12px !important; width: auto; }
  .banner-title, .title { font-size: 1.7rem !important; }
}