@font-face {
  font-family: "DB HelvethaicaMon X";
  src: url("../fonts/DB-HelvethaicaMon-X.ttf") format("truetype");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "DS Digital";
  src: url("../fonts/DSDIGI.woff") format("woff");
  font-display: swap;
}

:root {
  --appro8-navy: #071b5d;
  --appro8-blue: #112d77;
  --appro8-blue-deep: #06164d;
  --appro8-green: #50d333;
  --appro8-card: #171717;
  --appro8-muted: #c7cce2;
}

body.appro8-site {
  color: #fff;
  background: var(--appro8-blue);
  font-family: "DB HelvethaicaMon X", "Prompt", sans-serif;
  font-size: 20px;
}

body.appro8-site #header,
body.appro8-site #footer,
body.appro8-site .header-wrapper,
body.appro8-site .absolute-footer {
  display: none !important;
}

body.appro8-site #wrapper,
body.appro8-site #main {
  background: transparent;
}

body.appro8-site p,
body.appro8-site li,
body.appro8-site a,
body.appro8-site .button {
  font-family: inherit;
}

body.appro8-site h1,
body.appro8-site h2,
body.appro8-site h3,
body.appro8-site h4,
body.appro8-site h5,
body.appro8-site h6 {
  color: #fff;
  font-family: inherit;
  letter-spacing: 0;
  text-transform: none;
}

.appro8-main {
  min-height: 100vh;
  overflow: hidden;
  background: var(--appro8-blue);
}

.appro8-builder-content > .section:first-child,
.appro8-single > .section:first-child {
  padding-top: 0;
}

.appro8-main .section-content > .row,
.appro8-main > .row,
.appro8-footer .row {
  max-width: 1180px;
}

/* Desktop left rail */
.appro8-sidebar-block {
  position: fixed !important;
  z-index: 90;
  top: 0;
  bottom: 0;
  left: 0;
  width: 350px;
  min-height: 100vh !important;
  padding: 70px 40px 35px !important;
  overflow-y: auto;
  background: linear-gradient(180deg, #06194f 0%, #092467 58%, #06184f 100%) !important;
  box-shadow: 9px 0 30px rgba(3, 13, 55, .18);
}

.appro8-sidebar-block > .section-content,
.appro8-sidebar-block .row,
.appro8-sidebar-block .col,
.appro8-sidebar-block .col-inner {
  width: 100%;
  max-width: none;
  padding: 0;
}

.appro8-sidebar-logo {
  width: 250px;
  margin: 0 auto 40px;
}

.appro8-side-link.button {
  display: flex;
  width: 100%;
  min-height: 55px;
  margin: 0 0 14px;
  padding: 8px 18px;
  justify-content: flex-start;
  gap: 13px;
  color: #fff !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 21px;
  font-weight: 600;
  text-align: left;
}

.appro8-side-link.button .icon-angle-right {
  display: none;
}

.appro8-side-link.button::before {
  display: inline-grid;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  place-items: center;
  color: #fff;
  border: 1px solid rgba(86, 232, 84, .4);
  border-radius: 50%;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 0 20px rgba(77, 226, 90, .56);
  font-family: Arial, sans-serif;
  font-size: 20px;
  line-height: 1;
}

.appro8-side-home::before { content: "⌂"; color: #29a276 !important; }
.appro8-side-promo::before { content: "$"; color: #29a276 !important; font-weight: 800; }
.appro8-side-article::before { content: "✤"; color: #273f77 !important; }
.appro8-side-provider::before { content: "▰"; color: #29a276 !important; }
.appro8-side-contact::before { content: "✈"; color: #273f77 !important; }

.appro8-side-divider {
  height: 2px;
  margin: 18px 8px 30px;
  background: var(--appro8-green);
}

.appro8-side-promo-box {
  min-height: 210px;
  padding: 18px 20px;
  border-radius: 24px;
  background: linear-gradient(150deg, #061644, #0c2c7c);
  box-shadow: 0 10px 24px rgba(1, 10, 40, .25);
}

.appro8-side-promo-box h3 {
  margin-bottom: 18px;
  color: var(--appro8-green) !important;
  font-size: 25px;
}

.appro8-side-promo-box p {
  margin: 0 0 12px;
  font-size: 18px;
}

.appro8-side-promo-box a {
  display: block;
  margin-top: 24px;
  color: #fff;
  text-align: right;
}

/* Mobile top bar */
.appro8-mobile-header {
  display: none;
}

/* Shared page header */
.appro8-top-actions {
  padding: 12px 0 10px !important;
  background: linear-gradient(90deg, #06164f, #071d5f) !important;
}

.appro8-action-row {
  justify-content: flex-end;
}

.appro8-action.button {
  width: 205px;
  min-height: 48px;
  margin: 0 5px;
  border-radius: 999px;
  font-size: 23px;
  line-height: 46px;
}

.appro8-action-login {
  color: #fff !important;
  border: 0 !important;
  background: linear-gradient(90deg, #45cc32, #5adc32) !important;
}

.appro8-action-register {
  color: #fff !important;
  border: 1px solid #55cc3a !important;
  background: transparent !important;
}

.appro8-hero-section {
  padding: 0 12px 20px !important;
  background: var(--appro8-blue) !important;
}

.appro8-hero-slider,
.appro8-hero-slider .flickity-viewport,
.appro8-hero-slider .banner,
.appro8-hero-slider .banner-bg {
  border-radius: 18px;
}

.appro8-hero-slider .flickity-page-dots {
  bottom: -33px;
}

.appro8-hero-slider .flickity-page-dots .dot {
  width: 11px;
  height: 11px;
  border: 0;
  background: #fff;
  opacity: 1;
}

.appro8-hero-slider .flickity-page-dots .dot.is-selected {
  background: var(--appro8-green);
}

.appro8-hero-slider .banner-bg .bg-fill {
  background-position: 50% 50% !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

/* Section titles */
.appro8-heading-row {
  align-items: center;
}

.appro8-heading h2 {
  margin: 0;
  font-size: 34px;
  font-weight: 500;
}

.appro8-heading h2::before {
  content: "●";
  display: inline-grid;
  width: 40px;
  height: 40px;
  margin-right: 13px;
  place-items: center;
  color: #fff;
  border-radius: 50%;
  background: var(--appro8-green);
  font-size: 16px;
  vertical-align: 3px;
}

.appro8-heading p {
  margin: 0 0 0 55px;
  color: #fff;
  font-size: 20px;
}

.appro8-more.button {
  min-width: 145px;
  border: 0 !important;
  border-radius: 4px;
  background: var(--appro8-green) !important;
  font-size: 19px;
}

/* FIFA strip */
.appro8-fifa-section {
  padding: 32px 12px 18px !important;
  background: var(--appro8-blue) !important;
}

.appro8-fifa-panel {
  align-items: center;
  padding: 16px 24px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 18px;
  background: linear-gradient(90deg, #071a58, #0d286f);
}

.appro8-countdown {
  width: 100%;
}

.appro8-countdown > div {
  display: flex;
  gap: 18px;
  justify-content: center;
  text-align: center;
}

.appro8-countdown > div > div {
  min-width: 70px;
}

.appro8-fifa-logo {
  max-width: 150px;
  margin: 0 auto;
}

.appro8-fifa-title {
  max-width: 450px;
  margin: 0 auto;
}

.appro8-countdown strong {
  display: block;
  color: #fff;
  font-family: "DS Digital", monospace;
  font-size: 48px;
  font-weight: 400;
  line-height: .9;
}

.appro8-countdown span {
  color: #fff;
  font-size: 14px;
}

/* Sliders and cards */
.appro8-hot-section,
.appro8-promo-section,
.appro8-article-section,
.appro8-provider-section,
.appro8-badge-section {
  background: var(--appro8-blue) !important;
}

.appro8-hot-slider .ux-image,
.appro8-hot-slider .img-inner {
  border-radius: 13px;
}

.appro8-hot-slider .ux-image {
  padding: 0 6px;
}

.appro8-promo-card .col-inner,
.appro8-post-grid .box {
  overflow: hidden;
  border-radius: 20px;
  background: var(--appro8-card);
  box-shadow: none;
}

.appro8-promo-card .col-inner {
  display: flex;
  height: 100%;
  flex-direction: column;
}

.appro8-promo-card .ux-text {
  padding: 0 14px;
}

.appro8-promo-card .button {
  align-self: flex-start;
  margin: auto 14px 18px;
}

.appro8-promo-card .img-inner,
.appro8-promo-card img,
.appro8-post-grid .box-image,
.appro8-post-grid .box-image img {
  border-radius: 18px;
}

.appro8-promo-card h3,
.appro8-post-grid .post-title {
  color: var(--appro8-green) !important;
  font-size: 23px;
  font-weight: 500;
  line-height: 1.25;
}

.appro8-promo-card .button,
.appro8-post-grid .button {
  color: #fff;
  border: 0;
  background: var(--appro8-green);
}

.appro8-post-grid .box-text {
  padding: 18px 22px 22px;
}

.appro8-post-grid .from_the_blog_excerpt,
.appro8-post-grid .post-meta {
  color: #fff;
  font-size: 17px;
}

.appro8-intro-section {
  margin-top: 28px;
  padding: 58px 20px !important;
  background: linear-gradient(135deg, #0a1c59 0%, #0d2f81 50%, #0a1c59 100%) !important;
}

.appro8-intro-section h2 {
  color: var(--appro8-green) !important;
  font-size: 38px;
}

.appro8-intro-section p {
  color: #fff;
  font-size: 21px;
  line-height: 1.55;
}

.appro8-intro-gallery .img-inner,
.appro8-intro-gallery img {
  border-radius: 15px;
}

.appro8-intro-gallery.row,
.appro8-social-row.row,
.appro8-bank-row.row {
  width: 100%;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.appro8-badge-card .img-inner {
  transition: transform .25s ease;
}

.appro8-badge-card:hover .img-inner {
  transform: translateY(-6px);
}

.appro8-provider-grid.row {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px;
  max-width: 1110px !important;
  padding-top: 10px;
}

.appro8-provider-grid.row > .col {
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
}

.appro8-provider-grid .img-inner {
  overflow: hidden;
  border-radius: 50%;
  background: rgba(255,255,255,.04);
}

/* Single post */
.appro8-single-wrap {
  max-width: 900px;
  margin: 60px auto 0;
  padding: 0 20px 55px;
}

.appro8-single-cover {
  max-width: 620px;
  margin: 0 auto 48px;
}

.appro8-single-cover img {
  width: 100%;
  border-radius: 20px;
}

.appro8-single-card {
  padding: 42px 48px 46px;
  border-radius: 26px;
  background: var(--appro8-card);
}

.appro8-single-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 30px;
  color: #fff;
  font-size: 18px;
}

.appro8-date {
  color: #fff;
}

.appro8-date::first-letter {
  color: var(--appro8-green);
}

.appro8-social-label a {
  display: inline-grid;
  min-width: 28px;
  height: 28px;
  margin-left: 7px;
  padding: 0 5px;
  place-items: center;
  color: #fff;
  border-radius: 50%;
  background: #1389d4;
  font: 700 12px/1 Arial, sans-serif;
}

.appro8-social-label a:last-child {
  background: #36c73a;
}

.appro8-single-title {
  position: relative;
  margin: 0 0 30px 36px;
  color: var(--appro8-green) !important;
  font-size: 28px;
  font-weight: 500;
  line-height: 1.25;
}

.appro8-single-title::before {
  content: "";
  position: absolute;
  top: 8px;
  left: -36px;
  width: 23px;
  height: 23px;
  border: 4px solid #0068ff;
  border-radius: 50%;
}

.appro8-single-content,
.appro8-single-content p {
  color: #fff;
  font-size: 18px;
  line-height: 1.6;
}

.appro8-related {
  margin-top: 60px;
}

.appro8-related > h2 {
  margin-bottom: 0;
  font-size: 34px;
}

.appro8-related > p {
  color: #fff;
}

/* Footer and floating actions */
.appro8-footer {
  position: relative;
  z-index: 10;
  padding: 45px 15px 15px !important;
  background: linear-gradient(145deg, #061347 0%, #0c2c82 55%, #061347 100%) !important;
}

.appro8-footer-logo {
  max-width: 260px;
}

.appro8-footer p,
.appro8-footer li,
.appro8-footer a {
  color: #fff;
  font-size: 17px;
}

.appro8-footer h3 {
  color: var(--appro8-green) !important;
  font-size: 25px;
}

.appro8-social-row .col,
.appro8-bank-row .col {
  padding: 3px;
}

.appro8-copyright {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.2);
  text-align: center;
}

.appro8-float-actions {
  position: fixed;
  z-index: 95;
  right: 18px;
  bottom: 20px;
  width: 52px;
  min-height: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

.appro8-float-actions > .section-content,
.appro8-float-actions .row,
.appro8-float-actions .col,
.appro8-float-actions .col-inner {
  width: 100%;
  max-width: none !important;
  margin: 0;
  padding: 0;
}

.appro8-float-actions .ux-image {
  margin-bottom: 8px;
}

.appro8-float-actions .img-inner {
  border-radius: 50%;
  box-shadow: 0 4px 14px rgba(0,0,0,.28);
}

.appro8-mobile-nav {
  display: none;
}

@media (min-width: 1025px) {
  body.admin-bar .appro8-sidebar-block { top: 32px; }
  .appro8-main { margin-left: 350px; }
  .appro8-footer { margin-left: 350px; }
}

@media (max-width: 1200px) and (min-width: 1025px) {
  .appro8-sidebar-block { width: 290px; padding-left: 30px !important; padding-right: 30px !important; }
  .appro8-main, .appro8-footer { margin-left: 290px; }
  .appro8-sidebar-logo { width: 220px; }
}

@media (max-width: 1024px) {
  body.appro8-site { font-size: 18px; }

  .appro8-sidebar-block { display: none !important; }

  .appro8-mobile-header {
    position: relative !important;
    z-index: 80;
    display: block;
    padding: 10px 15px 12px !important;
    background: linear-gradient(135deg, #061347, #0e2e83) !important;
  }

  .appro8-mobile-header .row {
    align-items: center;
  }

  .appro8-mobile-logo {
    max-width: 190px;
    margin: 0 auto 8px;
  }

  .appro8-mobile-buttons {
    width: 100%;
    max-width: 340px !important;
    margin: 0 auto !important;
  }

  .appro8-mobile-buttons .col { padding: 0 4px; }

  .appro8-mobile-buttons .button {
    min-width: 145px;
    margin: 0;
    border-radius: 999px;
    font-size: 18px;
  }

  .appro8-top-actions { display: none; }

  .appro8-main .section-content > .row,
  .appro8-footer .row { max-width: 900px; }

  .appro8-provider-grid.row { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .appro8-footer { padding-bottom: 92px !important; }

  .appro8-float-actions { bottom: 83px; right: 10px; width: 46px; }

  .appro8-mobile-nav {
    position: fixed !important;
    z-index: 100;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    height: 72px;
    padding: 5px 2px 3px !important;
    border-top: 1px solid rgba(255,255,255,.16);
    background: linear-gradient(180deg, #0c2b78, #06164d) !important;
    box-shadow: 0 -5px 18px rgba(1,8,40,.35);
  }

  .appro8-mobile-nav > .section-content,
  .appro8-mobile-nav .appro8-mobile-nav-row {
    width: 100%;
    max-width: none !important;
  }

  .appro8-mobile-nav-row.row {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin: 0;
  }

  .appro8-mobile-nav-row.row > .col {
    width: 100% !important;
    max-width: none !important;
    padding: 0 2px;
  }

  .appro8-mobile-nav .ux-image {
    width: 35px !important;
    margin: 0 auto 1px;
  }

  .appro8-mobile-nav .appro8-register-icon {
    width: 42px !important;
    margin-top: -13px;
  }

  .appro8-mobile-nav p {
    margin: 0;
    color: #fff;
    font-size: 13px;
    line-height: 1;
    text-align: center;
  }
}

@media (max-width: 767px) {
  .appro8-mobile-header { padding-left: 10px !important; padding-right: 10px !important; }
  .appro8-mobile-logo { max-width: 155px; }
  .appro8-mobile-buttons .button { min-width: 132px; min-height: 38px; line-height: 36px; }

  .appro8-hero-section { padding: 0 7px 12px !important; }
  .appro8-hero-slider,
  .appro8-hero-slider .flickity-viewport,
  .appro8-hero-slider .banner,
  .appro8-hero-slider .banner-bg { border-radius: 10px; }
  .appro8-hero-slider .flickity-page-dots { bottom: -26px; }
  .appro8-hero-slider .flickity-page-dots .dot { width: 8px; height: 8px; margin: 0 4px; }

  .appro8-heading h2 { font-size: 29px; }
  .appro8-heading h2::before { width: 34px; height: 34px; margin-right: 8px; }
  .appro8-heading p { margin-left: 42px; font-size: 17px; line-height: 1.2; }
  .appro8-more.button { min-width: 100px; font-size: 16px; }

  .appro8-fifa-panel { padding: 13px; }
  .appro8-countdown > div { gap: 8px; }
  .appro8-countdown > div > div { min-width: 58px; }
  .appro8-countdown strong { font-size: 37px; }
  .appro8-fifa-logo { max-width: 95px; }

  .appro8-promo-card h3,
  .appro8-post-grid .post-title { font-size: 21px; }

  .appro8-intro-section { padding: 35px 14px !important; }
  .appro8-intro-section h2 { font-size: 31px; }
  .appro8-intro-section p { font-size: 18px; }

  .appro8-provider-grid.row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding-left: 8px;
    padding-right: 8px;
  }

  .appro8-single-wrap { margin-top: 38px; padding: 0 12px 35px; }
  .appro8-single-cover { margin-bottom: 25px; }
  .appro8-single-cover img { border-radius: 14px; }
  .appro8-single-card { padding: 25px 20px 30px; border-radius: 18px; }
  .appro8-single-meta { align-items: flex-start; flex-direction: column; gap: 8px; margin-bottom: 22px; }
  .appro8-single-title { font-size: 24px; }
  .appro8-single-content, .appro8-single-content p { font-size: 17px; }

  .appro8-footer { padding: 35px 18px 92px !important; text-align: center; }
  .appro8-footer-logo { margin-left: auto; margin-right: auto; }
  .appro8-social-row.row, .appro8-bank-row.row { justify-content: center; }
}

@media (max-width: 370px) {
  .appro8-mobile-buttons .button { min-width: 115px; padding-left: 8px; padding-right: 8px; }
  .appro8-mobile-nav p { font-size: 11px; }
}