/* ===== style.css (versi dibersihkan) ===== */

/* Gunakan @charset jika perlu — letakkan paling atas */
/* @charset "UTF-8"; */

/* Tidak ada @import di sini. Semua vendor CSS dipanggil via <link> di HTML */

/* Font lokal tambahan */
@font-face {
  font-family: "Righteous";
  src: url("../fonts/BalooChettan-Regular.ttf") format("truetype");
  font-display: swap;
}

/***** Referensi font yang tersedia *****
1) font-family: 'Rajdhani', sans-serif;
2) font-family: 'Poppins', sans-serif;
3) font-family: 'Sen', sans-serif;
*****************************************/

/* -------------------- Reset/Skeleton -------------------- */
* { box-sizing: border-box !important; transition: ease all 0.5s; }
*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  color: #666666;
  font-size: 14px;
  line-height: 1.80857;
  font-weight: normal;
  overflow-x: hidden;
  font-family: 'Sen', 'Poppins', 'Rajdhani', sans-serif; /* ketiganya sudah diload via <link> */
}

a {
  color: #222222;
  text-decoration: none !important;
  outline: none !important;
  -webkit-transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  -ms-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}

h1, h2, h3, h4, h5, h6 {
  letter-spacing: 0;
  font-weight: normal;
  position: relative;
  padding: 0 0 10px 0;
  line-height: normal;
  color: #111111;
  margin: 0;
}
h1 { font-size: 24px; }
h2 { font-size: 22px; }
h3 { font-size: 18px; }
h4 { font-size: 16px; }
h5 { font-size: 14px; }
h6 { font-size: 13px; }

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
  color: #212121;
  text-decoration: none !important;
  opacity: 1;
}

button:focus { outline: none; }

ul, ol { margin: 0; padding: 0; list-style: none; }

p { margin: 20px; font-weight: 300; font-size: 15px; line-height: 24px; }

img { max-width: 100%; height: auto; }

:focus { outline: 0; }

.paddind_bottom_0 { padding-bottom: 0 !important; }

.btn-custom {
  margin-top: 20px;
  background-color: transparent !important;
  border: 2px solid #ddd;
  padding: 12px 40px;
  font-size: 16px;
}

.lead { font-size: 18px; line-height: 30px; color: #767676; margin: 0; padding: 0; }

.form-control:focus {
  border-color: #ffffff !important;
  box-shadow: 0 0 0 .2rem rgba(255, 255, 255, .25);
}

.navbar-form input { border: none !important; }

.badge { font-weight: 500; }

blockquote { margin: 20px 0; padding: 30px; }

button { border: 0; margin: 0; padding: 0; cursor: pointer; }

.full { float: left; width: 100%; }

.layout_padding { padding-top: 90px; padding-bottom: 0; }

.padding_0 { padding: 0; }

/* -------------------- Header -------------------- */
.header_section { width: 100%; float: left; background-color: #154070; height: auto; }
.bg-light { background-color: transparent !important; }
.navbar { padding: .5rem 0; }
.navbar-light .navbar-brand { color: rgba(0,0,0,.9); padding-left: 90px; z-index: 2; }

/* Sidenav */
.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 99999999999999;
  top: 0; left: 0;
  background-color: rgba(0,0,0,0.9);
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
  text-align: center;
}
.sidenav a {
  padding: 8px 32px;
  font-size: 20px;
  color: #ffffff;
  display: block;
  transition: 0.3s;
  text-decoration: none;
}
.sidenav a:hover { color: #ea1616; }
.sidenav .closebtn {
  position: absolute; top: 0; right: 25px;
  font-size: 36px; margin-left: 50px;
}
@media screen and (max-width: 450px) {
  .sidenav { padding-top: 15px; }
  .sidenav a { font-size: 18px; }
}

.login_text { width: 100%; float: left; }
.login_text ul { margin: 0; padding: 0; }
.login_text li {
  font-size: 18px; color: #ffffff; float: left;
  padding-left: 15px; padding-top: 10px;
}
.login_text a { color: #ffffff; }
.login_text a:hover { color: #ea1616; }

/* -------------------- Banner -------------------- */
.banner_section {
  width: 100%; float: left;
  background-image: url(../images/banner-bg.png);
  background-repeat: no-repeat; background-size: 100% 100%;
  padding: 100px 0 130px;
}
.banner_taital { width: 100%; text-align: center; }

.playnow_bt { width: 170px; margin: 0 auto; text-align: center; padding-top: 0; }
.playnow_bt a {
  display: block; font-size: 16px; color: #023d6e; background: #fff;
  text-align: center; padding: 10px 0; border-radius: 5px; font-weight: bold; text-transform: uppercase;
}
.playnow_bt a:hover { color: #fff; background-color: #023d6e; }

/* Slider controls */
#main_slider a.carousel-control-prev { position: absolute; left: -90px; top: 270px; }
#main_slider a.carousel-control-next { position: absolute; right: -90px; top: 270px; }
#main_slider .carousel-control-next, 
#main_slider .carousel-control-prev {
  width: 45px; height: 45px; background: transparent; opacity: 1;
  font-size: 20px; color: #ffffff;
}
#main_slider .carousel-control-next:focus,
#main_slider .carousel-control-next:hover,
#main_slider .carousel-control-prev:focus,
#main_slider .carousel-control-prev:hover {
  color: #ea1616; background-color: transparent;
}

/* -------------------- Register -------------------- */
.register_section { width: 100%; float: left; padding: 40px 0; }
.register_box {
  width: 100%; display: flex; background: #fff; box-shadow: 0 0 10px 0 #f0f0ef;
  padding: 20px; border-radius: 7px;
}
.image_1 img { float: right; top: -25px; position: relative; }
.register_taital { width: 100%; font-size: 40px; color: #000; font-weight: 800; line-height: 40px; }
.register_box:hover { background-color: #023d6e; }
.register_box:hover .register_taital { color: #fefefd; }
.register_text { width: 90%; font-size: 18px; color: #252525; margin: 0; padding-top: 20px; line-height: 30px; }
.signup_bt { width: 170px; float: left; margin-top: 30px; }
.signup_bt a { display: block; font-size: 16px; color: #fefefd; background-color: #023d6e; text-align: center; padding: 13px 10px; }
.signup_bt a:hover { background-color: #ea1616; color: #fefefd; }

/* -------------------- About -------------------- */
.about_section {
  width: 100%; float: left; background-image: url(../images/about-bg.png);
  padding: 160px 0; background-size: 100%;
}
.about_section_main { width: 100%; float: left; }
.about_taital_main { width: 100%; float: left; padding-top: 70px; padding-left: 30px; }
.about_taital { font-size: 40px; color: #fefefd; font-weight: bold; }
.about_text { width: 80%; font-size: 16px; color: #fefefd; margin: 0; }
.about_img { width: 100%; float: left; }
.readmore_bt { width: 170px; float: left; padding-top: 30px; }
.readmore_bt a {
  display: block; font-size: 16px; color: #1d1d1c; background: #fff; text-align: center; padding: 10px 0; border-radius: 5px; font-weight: bold;
}
.readmore_bt a:hover { color: #fff; background-color: #023d6e; }

/* -------------------- Tournament -------------------- */
.tournament_section { width: 100%; float: left; }
.tournament_taital { font-size: 40px; color: #121112; text-align: center; font-weight: bold; }
.times_section { width: 70%; display: flex; margin: 0 auto; padding-top: 40px; }
.times_taital { width: 100%; font-size: 40px; color: #222221; padding-top: 10px; }
.timeline_bt { width: 64%; float: right; }
.timeline_bt ul { margin: 0; padding: 0; }
.timeline_bt li a {
  float: left; font-size: 20px; color: #fff; text-align: center; font-weight: bold;
  padding: 8px 22px; background-color: #ea1616; border-radius: 8px; line-height: 30px; margin: 0 5px;
}
.timeline_bt li a:hover { background-color: #023d6e; color: #fff; }
.timeline_bt li.active a { background-color: #023d6e; }

.scrol_main { width: 100%; float: left; margin-top: 60px; }
.scrollbar-deep-purple::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1); background-color: #F5F5F5; border-radius: 10px; }
.scrollbar-deep-purple::-webkit-scrollbar { width: 12px; background-color: #F5F5F5; }
.scrollbar-deep-purple::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1); background-color: #512da8; }
.scrollbar-deep-purple { scrollbar-color: #512da8 #F5F5F5; }
.example-1 { position: relative; overflow-y: scroll; height: 200px; box-shadow: 0 0 10px 0; }

.flage_main { width: 100%; display: flex; padding-top: 20px; }
.joino_text, .joino_text_1 {
  width: 100%; font-size: 20px; color: #154070; font-weight: bold;
}
.joino_text:hover, .joino_text_1:hover { color: #154070; }
.flage_1 { width: 100%; text-align: right; }

/* -------------------- Games -------------------- */
.games_section {
  width: 100%; float: left; background-image: url(../images/games-bg.png);
  background-size: 100%; background-repeat: no-repeat; padding: 160px 0 0;
}
.games_taital { font-size: 40px; color: #fefefd; text-align: center; font-weight: bold; }
.games_text { font-size: 16px; color: #fefefd; text-align: center; margin: 0; font-weight: bold; }
.games_section_2 { width: 100%; float: left; }
.image_2 { width: 100%; text-align: center; }
.game_text { text-align: center; font-size: 22px; color: #154070; font-weight: bold; padding-top: 20px; }
.gacor_text { text-align: center; font-size: 16px; color: #272726; margin: 0; padding-top: 10px; }
.read_bt { width: 170px; margin: 30px auto 0; }
.read_bt a { display: block; font-size: 16px; color: #fefefd; background-color: #023d6e; text-align: center; padding: 13px 10px; }
.read_bt a:hover { background-color: #ea1616; color: #fefefd; }

/* -------------------- Newsletter -------------------- */
.newsletter_section {
  width: 100%; float: left; background-image: url(../images/customer-bg.png);
  background-size: 100%; background-repeat: no-repeat; padding: 156px 0;
}
.newsletter_section_2 { width: 100%; float: left; }
.newsletter_taital { font-size: 40px; color: #fefefd; font-weight: bold; }
.newsletter_text { font-size: 16px; color: #fff; margin: 0; }
.update_mail {
  color: #252525; width: 100%; height: 55px; font-size: 18px; padding: 10px 20px 0;
  background-color: #fff; margin: 50px auto 0; justify-content: center; align-items: center;
  border-radius: 5px; display: inline-block;
}
textarea#comment.update_mail::placeholder { color: #252525; }
.subscribe_bt { width: 200px; float: left; padding-top: 30px; }
.subscribe_bt a {
  display: block; color: #fff; font-size: 16px; padding: 10px 0; background-color: #023d6e;
  text-transform: uppercase; font-weight: bold; text-align: center; border-radius: 5px;
}
.subscribe_bt a:hover { color: #252525; background-color: #fff; }

.customer_main { width: 100%; display: flex; padding-top: 70px; }
.customer_left { width: 30%; }
.customer_right { width: 70%; }
.customer_name { font-size: 20px; color: #fefefd; }
.customer_text { font-size: 16px; color: #fefefd; margin: 0; }

/* -------------------- Contact -------------------- */
.contact_section { width: 100%; float: left; }
.contact_taital { font-size: 40px; color: #2b2b2b; font-weight: bold; text-align: center; }

.contact_main { width: 60%; margin: 20px auto 0; }
.form-group { margin-bottom: 30px; }
.email-bt {
  color: #969695; width: 100%; height: 50px; font-size: 18px; padding: 0 20px;
  background-color: transparent !important; border: 1px solid #333333 !important;
}
.massage-bt {
  color: #969695; width: 100%; height: 100px; font-size: 18px; padding: 30px 20px 0;
  background-color: transparent !important; border: 1px solid #333333 !important;
}
.send_bt { width: 170px; margin: 30px auto 0; }
.send_bt a {
  display: block; font-size: 16px; color: #fff; background-color: #023d6e;
  padding: 13px 0; text-align: center; text-transform: uppercase; letter-spacing: 1px; border-radius: 7px;
}
.send_bt a:hover { color: #fff; background-color: #ea1616; }

/* -------------------- Footer -------------------- */
.footer_section {
  width: 100%; float: left; background-color: #fefefd; height: auto;
  background-size: 100%; background-repeat: no-repeat; padding-bottom: 30px;
}
.footer_menu { width: 100%; margin: 0 auto; text-align: center; display: inline-block; }
.footer_menu ul { margin: 0; padding: 0; display: inline-block; text-align: center; }
.footer_menu li { float: left; }
.footer_menu li a {
  float: left; font-size: 16px; color: #023d6e; padding: 10px 20px; text-align: center;
  margin: 0 10px; border-radius: 5px; background-color: #ffffff;
}
.footer_menu li a:hover { color: #fefefd; background-color: #252525; }
.footer_menu li.active a { color: #fefefd; background-color: #252525; }

.social_icon { width: 100%; margin: 0 auto; display: inline-block; text-align: center; padding-top: 40px; }
.social_icon ul { margin: 0; padding: 0; display: inline-block; }
.social_icon li { float: left; }
.social_icon li a {
  float: left; padding: 5px 15px; background-color: #020101; color: #fefefd;
  border-radius: 100%; font-size: 22px; margin: 0 5px; width: 50px; text-align: center;
}
.social_icon li a:hover { background-color: #2b0548; color: #ffffff; }

.copyright_section { width: 100%; float: left; background-color: #fefefd; height: auto; }
.copyright_text { width: 100%; color: #252525; text-align: center; font-size: 16px; margin: 20px 0; }
.copyright_text a { color: #252525; }
copyright_text a:hover { color: #ea1616; }

.margin_top90 { margin-top: 90px; }