/* @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700&display=swap'); */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
   --font-display: "Bricolage Grotesque", "Bricolage Grotesque Fallback", sans-serif;
   --font-body: "Space Grotesk", "Space Grotesk Fallback", sans-serif;
}

* {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}

body {
   font-family: var(--font-body);

   margin: 0;
   padding: 0;
}

:root {
   --navy: #06172f;
   --blue: #12395e;
   --blue2: #0d2b4b;
   --gold: #e8b95f;
   --gold2: #ffd98a;
   --ink: #172c41;
   --muted: #65778a;
   --paper: #fff;
   --cream: #fffaf0;
   --line: #dce5ed;
   --gradient: linear-gradient(180deg, #12395e 0%, #06172f 100%);
   --shadow: 0 10px 30px rgba(18, 57, 94, .09)
}

*,
*::before,
*::after {
   box-sizing: border-box
}

html {
   scroll-behavior: smooth
}

body {
   margin: 0;
   background: #fff;
   color: var(--ink);
   font-size: 15px;
   line-height: 1.6
}

.container-fluid {
   width: 95%;
   margin: auto;
}

a {
   text-decoration: none;
   color: var(--blue)
}

a:hover {
   color: #a67629
}

h1,
h2,
h3,
h4,
h5,
h6 {
   color: var(--navy);
   font-weight: 800;
   line-height: 1.5;
   font-family: var(--font-display);
}

h3.h2.resulttimedata {
   color: #bf882c !important;
}

button {
   cursor: pointer
}

img {
   max-width: 100%
}

::selection {
   background: var(--gold);
   color: var(--navy)
}

/* ================= HEADER ================= */
.site-header {
   position: relative;
   background: #f6f7f9;
   border-bottom: 1px solid #e7e9ee;
   z-index: 1030;
}

.site-header__brand img {
   height: 42px;
   width: auto;
}

/* Hamburger (mobile only) */
.site-header__toggle {
   display: none;
   flex-direction: column;
   gap: 5px;
   padding: 10px;
   border: 1px solid #d0d5dd;
   border-radius: 8px;
   background: #fff;
   cursor: pointer;
}

.site-header__toggle span {
   width: 22px;
   height: 2px;
   background: #111827;
   border-radius: 2px;
}

/* Desktop nav */
.site-nav .nav-link {
   padding: 10px 14px;
   font-size: 14px;
   font-weight: 500;
   color: #344054;
   border-radius: 8px;
   transition: background .15s, color .15s;
}

.site-nav .nav-link:hover,
.site-nav .nav-item.dropdown:hover>.nav-link {
   background: #eef1f6;
   color: #2563eb;
}

/* Desktop dropdown */
.site-nav .dropdown-menu {
   margin-top: 6px;
   min-width: 220px;
   max-height: 70vh;
   overflow-y: auto;
   padding: 8px;
   border: 1px solid #eaecf0;
   border-radius: 12px;
   box-shadow: 0 12px 32px rgba(16, 24, 40, .12);
}

.site-nav .dropdown-item {
   padding: 8px 12px;
   font-size: 13px;
   border-radius: 6px;
   white-space: nowrap;
}

.site-nav .dropdown-item:hover {
   background: #eef4ff;
   color: var(--blue2);
}

.site-nav .dropdown-item.newactive {
   font-weight: 600;
   color: var(--blue2);
   background: #f0f6ff;
}

/* CTA */
.site-header__cta {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 10px 18px;
   border-radius: 999px;
   background: var(--gradient);
   color: #fff !important;
   font-size: 14px;
   font-weight: 600;
   text-decoration: none;
   transition: background .2s, transform .2s;
}

.site-header__cta:hover {
   background: #1d4ed8;
   transform: translateY(-1px);
}

.site-header__cta--block {
   width: 100%;
   justify-content: center;
}

@media (max-width: 1199px) {
   .site-header__toggle {
      display: flex;
   }
}

/* ================= MOBILE DRAWER ================= */
.mobile-drawer {
   position: fixed;
   inset: 0;
   z-index: 9999;
   pointer-events: none;
}

.mobile-drawer__backdrop {
   position: absolute;
   inset: 0;
   background: rgba(16, 24, 40, .45);
   opacity: 0;
   transition: opacity .25s ease;
}

.mobile-drawer__panel {
   position: absolute;
   top: 0;
   left: 0;
   height: 100%;
   width: min(86%, 340px);
   background: #fff;
   display: flex;
   flex-direction: column;
   transform: translateX(-100%);
   transition: transform .28s cubic-bezier(.22, .61, .36, 1);
   box-shadow: 0 0 40px rgba(16, 24, 40, .18);
}

.mobile-drawer.is-open {
   pointer-events: auto;
}

.mobile-drawer.is-open .mobile-drawer__backdrop {
   opacity: 1;
}

.mobile-drawer.is-open .mobile-drawer__panel {
   transform: translateX(0);
}

.mobile-drawer__header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 16px;
   border-bottom: 1px solid #eaecf0;
}

.mobile-drawer__logo {
   height: 36px;
   width: auto;
}

.mobile-drawer__close {
   background: transparent;
   border: 0;
   padding: 6px;
   color: #344054;
   cursor: pointer;
}

.mobile-drawer__body {
   flex: 1;
   overflow-y: auto;
   padding: 8px;
}

.mobile-nav {
   list-style: none;
   margin: 0;
   padding: 0;
}

.mobile-nav__item {
   border-bottom: 1px solid #f1f3f6;
}

.mobile-nav__link {
   display: flex;
   align-items: center;
   justify-content: space-between;
   width: 100%;
   padding: 14px 12px;
   font-size: 15px;
   font-weight: 500;
   color: #344054;
   text-decoration: none;
   background: none;
   border: 0;
   text-align: left;
   cursor: pointer;
}

.mobile-nav__link:hover {
   color: var(--blue2);
}

.mobile-nav__chevron {
   width: 8px;
   height: 8px;
   border-right: 2px solid currentColor;
   border-bottom: 2px solid currentColor;
   transform: rotate(45deg);
   transition: transform .2s;
}

.mobile-nav__toggle[aria-expanded="true"] .mobile-nav__chevron {
   transform: rotate(-135deg);
}

/* Accordion submenu */
.mobile-nav__submenu {
   display: none;
   flex-direction: column;
   padding: 4px 0 10px 14px;
   border-left: 2px solid #eaecf0;
   margin: 0 12px 10px;
}

.mobile-nav__item--accordion.is-open .mobile-nav__submenu {
   display: flex;
}

.mobile-nav__submenu a {
   padding: 8px 10px;
   font-size: 13px;
   color: #475467;
   text-decoration: none;
   border-radius: 6px;
}

.mobile-nav__submenu a:hover {
   background: #eef4ff;
   color: #2563eb;
}

.mobile-nav__submenu a.is-active {
   color: #2563eb;
   font-weight: 600;
}

.mobile-drawer__footer {
   padding: 16px;
   border-top: 1px solid #eaecf0;
   background: #fafbfc;
}

/* Prevent body scroll when drawer is open */
body.drawer-open {
   overflow: hidden;
}

/* Hide drawer on desktop */
@media (min-width: 1200px) {
   .mobile-drawer {
      display: none;
   }
}

.profileimage {
   display: flex;
   justify-content: center;
   isolation: isolate;
   overflow: hidden;
   border-radius: 12px;


}

.profileimage img {
   max-width: 50%;
   width: 100%;
   margin: auto;
}

.contact-actions {
   padding: 24px 16px;
   background: #f5f5f5;
}

.contact-actions__card {
   display: flex;
   align-items: center;
   gap: 16px;
   max-width: 520px;
   margin: 14px auto 0px;
   border-radius: 16px;
   transition: box-shadow 0.2s ease, transform 0.2s ease;
   flex-direction: column;
}



.contact-actions__icon {
   display: grid;
   place-items: center;
   flex: 0 0 48px;
   height: 48px;
   border-radius: 12px;
   background: linear-gradient(145deg, #ffffff, #0b264321);
   color: var(--blue2);
}

.contact-actions__body {
   text-align: center;
   flex: 1 1 auto;
   min-width: 0;
}

.contact-actions__label {
   margin: 0 0 2px;
   font-size: 19px;
   color: #6b7280;
   text-transform: uppercase;
}

.contact-actions__number {
   font-size: 32px;
   font-weight: 600;
   color: #111827;
   text-decoration: none;
   letter-spacing: 0.2px;
}

.contact-actions__number:hover {
   color: var(--blue2);
}

.contact-actions__cta {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   flex: 0 0 auto;
   padding: 10px 44px;
   border-radius: 25px;
   background: var(--gradient);
   color: #FFF;
   font-size: 20px;
   font-weight: 600;
   text-decoration: none;
   transition: background 0.2s ease;
}


.contact-actions__cta:focus-visible,
.contact-actions__number:focus-visible {
   outline: 2px solid var(--blue2);
   outline-offset: 2px;
}

@media (max-width: 480px) {
   .contact-actions__card {
      flex-wrap: wrap;
      padding: 16px;
   }

   .contact-actions__cta {
      width: 100%;
      justify-content: center;
   }
}

/* rating and withdrawal  */
.game-feature-wrapper {
   width: 100%;
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   align-items: center;
   border-radius: 20px;
   padding: 28px 15px 0px;
   overflow: hidden;
}

/* Feature Card */
.game-feature-card {
   position: relative;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   text-align: center;
   gap: 12px;
   padding: 8px 15px;
}

/* Vertical Separator */
.game-feature-card:not(:last-child)::after {
   content: "";
   position: absolute;
   top: 15%;
   right: 0;
   height: 70%;
   width: 2px;
   background: linear-gradient(to bottom,
         transparent,
         #bce9d5,
         transparent);
}

/* Icon Circle */
.game-feature-icon {
   width: 62px;
   height: 62px;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 50%;
   background: linear-gradient(145deg, #ffffff, #0b264321);
   border: 1px solid #0a234052;
   box-shadow: 0 5px 18px rgba(14, 153, 91, 0.10);
   transition: all 0.35s ease;
}

.game-feature-icon i {
   font-size: 27px;
   line-height: 1;
   color: var(--blue2);
   transition: all 0.35s ease;
}

/* Feature Heading */
.game-feature-card h3 {
   margin: 0;
   color: #0e2f4f;
   font-size: 18px;
   font-weight: 600;
   line-height: 1.5;
   transition: color 0.3s ease;
}

/* Hover Animation */


.game-feature-card:hover h3 {
   color: var(--ink);
}

/* Tablet */
@media (max-width: 768px) {
   .game-feature-wrapper {
      grid-template-columns: repeat(2, 1fr);
      padding: 20px 10px;
      row-gap: 20px;
   }

   .game-feature-card {
      padding: 12px 8px;
   }

   .game-feature-card:nth-child(2)::after {
      display: none;
   }

   .game-feature-card:nth-child(1)::before,
   .game-feature-card:nth-child(2)::before {
      content: "";
      position: absolute;
      bottom: -10px;
      left: 10%;
      width: 80%;
      height: 1px;
      background: #d9f0e3;
   }

   .game-feature-card h3 {
      font-size: 14px;
   }
}

/* Mobile */
@media (max-width: 380px) {
   body {
      padding: 10px;
   }

   .game-feature-wrapper {
      padding: 15px 5px;
      border-radius: 14px;
   }

   .game-feature-icon {
      width: 50px;
      height: 50px;
   }

   .game-feature-icon i {
      font-size: 23px;
   }

   .game-feature-card h3 {
      font-size: 12px;
   }
}

.offer-wrapper {
   width: 100%;
   padding: 12px;
   box-sizing: border-box;
   display: flex;
   justify-content: center;
}

.welcome-bonus {
   position: relative;
   display: flex;
   align-items: center;
   gap: 16px;
   width: 100%;
   max-width: 420px;
   padding: 18px 22px;
   box-sizing: border-box;
   justify-content: center;
   overflow: hidden;
   background: #021938;
   border: 1px solid #d8a458;
   border-radius: 40px;
   box-shadow: 0 5px 18px rgba(38, 169, 102, 0.10);
   font-family: "Space Grotesk", sans-serif;
   transition: all 0.3s ease;
   position: relative;
}

.welcome-bonus:hover {
   transform: translateY(-3px);
   box-shadow: 0 9px 24px rgba(38, 169, 102, 0.17);
   border-color: #8bd5aa;
}


.welcome-bonus img{
   max-width: 80px;
}

.gift-icon {
   width: 72px;
   height: 72px;
   flex-shrink: 0;
   color: #26a966;
   animation: giftBounce 2s ease-in-out infinite;
}

.bonus-content {
   position: relative;
   z-index: 1;
}

.bonus-amount {
   margin: 0;
   color: #0a223f;
   font-family: "Bricolage Grotesque", sans-serif;
   font-size: 50px;
   font-weight: 800;
   line-height: 1.2;
   letter-spacing: -0.5px;
}

.bonus-amount strong {
   color: var(--line);
}

.bonus-amount span {
   color: var(--blue);
   font-size: 40px;
}

.bonus-label {
   margin: 5px 0 0;
   color: var(--cream);
   font-size: 20px;
   text-align: center;
   font-family: sans-serif;
   text-transform: uppercase;
}

.bonus-sparkle {
   position: absolute;
   right: 18px;
   top: 12px;
   color: #e6b543;
   font-size: 22px;
   animation: sparkle 2s ease-in-out infinite;
}

@keyframes giftBounce {

   0%,
   100% {
      transform: translateY(0) rotate(0);
   }

   50% {
      transform: translateY(-4px) rotate(-3deg);
   }
}

@keyframes sparkle {

   0%,
   100% {
      opacity: 0.45;
      transform: scale(0.8) rotate(0);
   }

   50% {
      opacity: 1;
      transform: scale(1.15) rotate(20deg);
   }
}

@media (max-width: 480px) {
   .welcome-bonus {
      gap: 12px;
      padding: 14px 16px;
      border-radius: 12px;
   }

   .gift-icon {
      width: 60px;
      height: 60px;
   }

   .bonus-amount {
      font-size: 24px;
   }

   .bonus-amount span {
      font-size: 19px;
   }

   .bonus-label {
      font-size: 13px;
   }
}

@media (prefers-reduced-motion: reduce) {

   .gift-icon,
   .bonus-sparkle {
      animation: none;
   }

   .welcome-bonus {
      transition: none;
   }
}

/* rating and withdrawal  */
/* =========================================
   BASE NAVBAR STYLES
   ========================================= */
.navbar-nav .nav-link {
   font-weight: 500;
   color: #333;
   transition: color 0.3s ease;
}

/* =========================================
   DESKTOP DROPDOWN DESIGN (Only >= 1200px)
   ========================================= */
@media (min-width: 1200px) {

   /* Dropdown Menu Box Design */
   .navbar-nav .nav-item.dropdown>.dropdown-menu {
      display: block;
      opacity: 0;
      visibility: hidden;
      transform: translateY(15px);
      transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
      pointer-events: none;

      /* Premium Look */
      background-color: #ffffff;
      border: none;
      border-radius: 12px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
      padding: 10px 0;
      min-width: 220px;
   }

   /* Dropdown Show on Hover */
   .navbar-nav .nav-item.dropdown:hover>.dropdown-menu {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
      pointer-events: auto;
   }

   /* Dropdown Items (Links) */
   .dropdown-menu a.dropdown-item {
      display: block;
      padding: 5px 16px;
      color: #444;
      font-size: 14px;
      font-weight: 500;
      text-decoration: none;
      transition: all 0.2s ease;
      position: relative;
   }

   /* Dropdown Item Hover Effect */
   .dropdown-menu a.dropdown-item:hover {
      background-color: #f8f9fa;
      color: #002654;
      /* Bootstrap Primary Color */
      padding-left: 25px;
      /* Slide effect */
   }

   /* Hover par choti si line left side me */
   .dropdown-menu a.dropdown-item::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 4px;
      background-color: #002654;
      transform: scaleY(0);
      transition: transform 0.2s ease;
      border-radius: 0 4px 4px 0;
   }

   .dropdown-menu a.dropdown-item:hover::before {
      transform: scaleY(1);
   }
}

/* =========================================
   MOBILE DROPDOWN DESIGN (Below 1200px)
   ========================================= */
@media (max-width: 1199.98px) {

   /* Mobile Dropdown Container */
   .navbar-nav .nav-item.dropdown {
      display: block;
      width: 100%;
      border-bottom: 1px solid #eee;
      /* Separator */
   }

   /* Mobile Dropdown Menu (Hidden by default) */
   .navbar-nav .dropdown-menu {
      display: none !important;
      position: static !important;
      float: none;
      width: 100%;
      margin-top: 0;
      padding: 10px;
      background-color: #f9f9f9;
      /* Light grey box for mobile dropdown */
      border-radius: 8px;
      border: 1px solid #eaeaea;
      box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.02);
   }

   /* Show class is applied via JS */
   .navbar-nav .dropdown-menu.show {
      display: block !important;
      animation: slideDown 0.3s ease forwards;
   }

   /* Mobile Dropdown Links */
   .navbar-nav .dropdown-menu .dropdown-item {
      padding: 5px;
      font-size: 14px;
      color: #444;
      border-bottom: 1px solid #efefef;
      border-radius: 5px;
      margin-bottom: 4px;
      background-color: #fff;
      /* White box inside grey container */
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
   }

   .navbar-nav .dropdown-menu .dropdown-item:last-child {
      border-bottom: none;
      margin-bottom: 0;
   }

   .navbar-nav .dropdown-menu .dropdown-item:active {
      background-color: #e9ecef;
      color: #000;
   }

   /* Dropdown Toggle Arrow Animation */
   .navbar-nav .dropdown-toggle[aria-expanded="true"]::after {
      transform: rotate(180deg);
   }

   .navbar-nav .dropdown-toggle::after {
      transition: transform 0.3s ease;
   }

   /* Animation for opening */
   @keyframes slideDown {
      from {
         opacity: 0;
         transform: translateY(-10px);
      }

      to {
         opacity: 1;
         transform: translateY(0);
      }
   }

   /* Nav Links padding */
   .navbar-nav .nav-link {
      padding: 12px 10px;
   }
}

/* Download button hover */
.navbar-button .btn:hover {
   transform: translateY(-2px);
   box-shadow: 0 4px 10px rgba(13, 110, 253, 0.25);
   transition: all 0.25s ease;
}

.jodi-card {
   position: relative;
   overflow: hidden;
   border-radius: 16px;
   border: 0;
   box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
   background: linear-gradient(135deg, #1e293b, #0f172a);
   max-width: 420px;
   width: 100%;
   isolation: isolate;
   /* keeps ::before behind content */
}

/* Decorative diagonal repeated background (before) */
/* .jodi-card::before {
   content: "1 RS KA 100 RS  •  1 RS KA 100 RS  •  1 RS KA 100 RS  •";
   position: absolute;
   inset: -40% -20%;
   z-index: -1;
   display: flex;
   align-items: center;
   justify-content: center;
   text-align: center;
   font-size: 22px;
   font-weight: 800;
   letter-spacing: 2px;
   color: rgba(255, 255, 255, 0.06);
   line-height: 2.2;
   transform: rotate(-18deg);
   white-space: pre-wrap;
   pointer-events: none;
   user-select: none;
} */

/* Gradient glow layer (after) */
/* .jodi-card::after {
   content: "";
   position: absolute;
   top: -61%;
   left: -40%;
   width: 320px;
   height: 320px;
   background: #03254e;
   z-index: -1;
   pointer-events: none;
   transform: rotate(42deg);
} */

/* ---------- Body ---------- */
.jodi-card .card-body {
   padding: 24px 26px;
   position: relative;
   z-index: 1;
}

.jodi-head {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 16px;
}

.jodi-title {
   font-size: 1.3rem;
   font-weight: 600;
   color: #f8fafc;
   margin: 0;
}

.jodi-badge {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   padding: 8px 16px;
   border-radius: 50px;
   background: linear-gradient(135deg, #f59e0b, #ef4444);
   color: #fff;
   font-size: 0.95rem;
   font-weight: 700;
   box-shadow: 0 6px 16px rgba(239, 68, 68, 0.4);
   white-space: nowrap;
}

.jodi-badge small {
   font-size: 0.75rem;
   font-weight: 600;
   opacity: 0.9;
}

@media (max-width: 420px) {
   .jodi-head {
      flex-direction: column;
      align-items: flex-start;
   }

   .jodi-card::before {
      font-size: 16px;
   }
}

.features-wrapper {
   display: flex;
   width: 100%;
   gap: 10px;
   margin: 25px auto 0px;
}

.imagedata {
   max-width: 214px;
   width: 100%;
   position: relative;
   margin-top: -30px;
   z-index: 1;
}

.feature-card {
   background: #ffffff;
   border-radius: 20px;
   position: relative;
   transition: transform 0.3s ease, box-shadow 0.3s ease;
   width: 100%;
   border: 2px solid #ccc;
   display: flex;
}

.feature-card .card-body {
   padding: 10px;
}

.card-header {
   display: flex;
   align-items: center;
   gap: 16px;
   margin-bottom: 22px;
}

.card-header img {
   width: 64px;
   height: 64px;
   padding: 12px;
   background: #fff;
   border-radius: 16px;
   object-fit: contain;
   border: 1px solid #ccc;
}

.card-title {
   font-size: 19px;
   font-weight: 700;
   color: #1e293b;
   line-height: 1.3;
}

.card-desc {
   display: flex;
   align-items: flex-start;
   gap: 10px;
   font-size: 13px;
   color: #595959;
   padding: 6px 0;
   border-bottom: 1px dashed #e2e8f0;
   font-weight: 600;
   margin-bottom: 0px;
}

.card-desc:last-child {
   border-bottom: none;
}

.card-desc img {
   width: 18px;
   height: 18px;
   flex-shrink: 0;
   margin-top: 2px;
}

@media (max-width: 480px) {


   .card-header img {
      width: 54px;
      height: 54px;
      padding: 10px;
   }

   .card-title {
      font-size: 1.1rem;
   }

   .card-desc {
      font-size: 0.88rem;
   }
}

/* Main Footer */
.hero-footer {
   width: 100%;
   background: #111827;
   color: #e5e7eb;
   font-family: Arial, sans-serif;
   box-sizing: border-box;
}

.hero-footer *,
.hero-footer *::before,
.hero-footer *::after {
   box-sizing: border-box;
}

/* Footer Information */
.hero-footer__information {
   max-width: 1200px;
   width: 100%;
   margin: 0 auto;
   padding: 40px 24px;
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 48px;
}

/* Company Section */
.hero-footer__company {
   min-width: 0;
}

.hero-footer__logo-link {
   display: inline-block;
   text-decoration: none;
   margin-bottom: 18px;
}

.hero-footer__logo-box {
   position: relative;
   width: 180px;
   max-width: 100%;
   height: 55px;
   background: #ffffff;
   padding: 10px;
   border-radius: 5px;
}

.hero-footer__logo {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: contain;
   object-position: left center;
}

.hero-footer__company p {
   margin: 0;
   max-width: 500px;
   color: #9ca3af;
   font-size: 14px;
   line-height: 1.8;
}

/* Responsible Play */
.hero-footer__responsible {
   min-width: 0;
}

.hero-footer__notice {
   display: flex;
   align-items: center;
   gap: 16px;
   padding: 10px;
   background: #1f2937;
   border: 1px solid #374151;
   border-radius: 12px;
}

.hero-footer__age-badge {
   display: flex;
   flex-shrink: 0;
   align-items: center;
   justify-content: center;
}

.hero-footer__age-badge img {
   display: block;
   width: 40px;
   height: 40px;
   object-fit: contain;
}

.hero-footer__notice-content h2 {
   margin: 0 0 6px;
   color: #ffffff;
   font-size: 18px;
   font-weight: 700;
}

.hero-footer__notice-content p {
   margin: 0;
   color: #d1d5db;
   font-size: 13px;
   line-height: 1.6;
}

/* Resource Heading */
.hero-footer__resource-label {
   margin: 24px 0 12px;
   color: #9ca3af;
   font-size: 12px;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 1px;
}

/* Resource Links */
.hero-footer__resource-links {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 12px;
}

.hero-footer__resource-link {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 12px;
   min-width: 0;
   padding: 10px;
   color: #ffffff;
   text-decoration: none;
   background: #1f2937;
   border: 1px solid #374151;
   border-radius: 10px;
   transition: background 0.25s ease,
      border-color 0.25s ease,
      transform 0.25s ease;
}

.hero-footer__resource-link:hover {
   background: #273449;
   border-color: #6b7280;
   transform: translateY(-2px);
}

.hero-footer__resource-link span {
   display: flex;
   flex-direction: column;
   gap: 0px;
   min-width: 0;
}

.hero-footer__resource-link strong {
   color: #ffffff;
   font-size: 14px;
   font-weight: 600;
}

.hero-footer__resource-link small {
   color: #9ca3af;
   font-size: 12px;
   line-height: 1.5;
}

.hero-footer__resource-link svg {
   flex-shrink: 0;
   color: #9ca3af;
}

/* Copyright */
.hero-footer__copyright {
   padding: 18px 24px;
   text-align: center;
   border-top: 1px solid #374151;
   background: #0b1120;
}

.hero-footer__copyright p {
   margin: 0;
   color: #9ca3af;
   font-size: 13px;
   line-height: 1.7;
}

/* Tablet */
@media (max-width: 768px) {
   .hero-footer__information {
      grid-template-columns: 1fr;
      gap: 30px;
      padding: 32px 20px;
   }

   .hero-footer__logo-box {
      width: 160px;
      height: 48px;
   }
}

/* Mobile */
@media (max-width: 480px) {
   .hero-footer__information {
      padding: 26px 16px;
      gap: 24px;
   }

   .hero-footer__notice {
      align-items: flex-start;
      gap: 12px;
      padding: 14px;
   }

   .hero-footer__notice-content h2 {
      font-size: 16px;
   }

   .hero-footer__resource-links {
      grid-template-columns: 1fr;
   }

   .hero-footer__resource-link {
      padding: 14px;
   }

   .hero-footer__copyright {
      padding: 16px;
   }

   .hero-footer__copyright p {
      font-size: 12px;
   }
}



.section-padding {
   padding: 50px 0px;
}

.tools-use-section .bg_color_game {
   padding: 15px;
   background: #fff;
   border: 1px solid #ccc;
   border-radius: 14px;
}

.heading_overlay.headingnewdesign {
   margin-top: -36px;
}

.card_body_new {
   padding: 0px !important;

   .all_game_design_heading {
      padding: 15px;
   }

   .openclosetime {
      padding: 8px 15px;
   }
}

.all_designflex {
   display: flex;
   justify-content: space-between;
   flex-direction: column;

   .headinggame_all {
      h3 {
         span {
            text-transform: uppercase;
            font-size: 20px;
            color: var(--blue);
            text-align: left;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            overflow: hidden;
         }
      }
   }
}

.all_game_design_heading {
   display: flex;
   justify-content: space-between;
   align-items: center;

   .headinggame_all {
      display: flex;
      flex-direction: column;
      align-items: start;

      .font-weight-600.mb-10 {
         display: flex;
      }
   }
}

.data_flex_new {
   display: flex;
   gap: 10px;

   .chart {
      width: 50px !important;
      height: 50px !important;
   }
}

.openclosetime {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-top: 5px;
   padding-top: 5px;
   border-top: 1px solid #ccc;
}

.card-body {

   .opencloselabel {
      text-align: left;

      span {
         display: block;
         font-size: 11px;
         font-weight: 600;
         color: var(--muted);
      }

      h3.dateandtime_new {
         font-size: 14px !important;
         font-weight: 600 !important;
         color: #011e41 !important;
         letter-spacing: 1px !important;
         white-space: nowrap !important;
         margin: 0 !important;
      }
   }
}

/* Header */
.header-nav {
   position: fixed !important;
   top: 0;
   left: 0;
   width: 100%;
   z-index: 1050;
}

/* Navbar Default State */
.header-nav .navbar {
   position: relative;
   top: 0;
   border: 1px solid transparent;
   border-radius: 0;
   background-color: transparent;
   box-shadow: 0 0 0 transparent;

   transition:
      background-color 0.4s ease,
      box-shadow 0.4s ease,
      border-radius 0.4s ease,
      border-color 0.4s ease,
      padding 0.4s ease,
      top 0.4s ease;
}

/* Sticky State */
.header-nav.sticky .navbar {
   top: 9px;
   padding: 10px !important;
   background-color: #fff;
   border-color: #ddd;
   border-radius: 55px;
   box-shadow: 0 4px 18px rgba(0, 0, 0, 0.10);
}

/* Mobile */
@media (max-width: 991px) {
   .header-nav.sticky .navbar {
      border-radius: 20px;
      padding: 8px !important;
   }
}

.headerbanner {
   z-index: 1;
   padding: 70px 0px 0px;
   position: relative;
   background: #fff;
}

/* Dotted Pattern */
.headerbanner::before {
   content: "";
   position: absolute;
   inset: 0;
   background-image: radial-gradient(circle, rgba(38, 169, 102, 0.65) 1.5px, transparent 1.8px);
   background-size: 13px 13px;
   background-position: right center;
   -webkit-mask-image: radial-gradient(circle at 100% 50%, #000 0%, rgba(0, 0, 0, 0.8) 25%, transparent 70%);
   mask-image: radial-gradient(circle at 100% 50%, #000 0%, rgba(0, 0, 0, 0.8) 25%, transparent 70%);
   opacity: 0.65;
   pointer-events: none;
   z-index: -1;
   width: 500px;
   height: 500px;
   border-radius: 50%;
}

/* Right-to-Left Lines */
.headerbanner::after {
   content: "";
   position: absolute;
   right: 0;
   bottom: 0;
   background-image: radial-gradient(circle, rgba(38, 169, 102, 0.65) 1.5px, transparent 1.8px);
   background-size: 13px 13px;
   background-position: right center;
   -webkit-mask-image: radial-gradient(circle at 100% 50%, #000 0%, rgba(0, 0, 0, 0.8) 25%, transparent 70%);
   mask-image: radial-gradient(circle at 100% 50%, #000 0%, rgba(0, 0, 0, 0.8) 25%, transparent 70%);
   opacity: 0.65;
   pointer-events: none;
   z-index: -1;
   width: 500px;
   height: 500px;
   border-radius: 50%;
}

.footer_service_new {
   text-align: start;
   border: 1px solid #ccc;
   background: #fff;
   border-radius: 10px;
   overflow: hidden;

   h3 {
      padding: 10px;
      font-weight: 600;
      background: var(--blue);
      color: #fff;
   }

   .allservice_design a {
      color: #676767 !important;
      padding: 6px 10px;
      width: 100%;
      display: block;
      border-bottom: 1px solid #ccc;
   }


}

.header-nav .navbar {
   min-height: 78px;
   gap: 18px
}

.header-nav .navbar-brand img {
   max-height: 60px;
   width: auto;
   max-width: 170px;
   object-fit: contain
}

.header-nav .navbar-nav {
   gap: 2px;
   align-items: center
}

.header-nav .nav-link {
   display: flex;
   align-items: center;
   justify-content: flex-start;
   gap: 0px;
   min-height: 44px;
   padding: 8px 0px;
   border-radius: 10px;
   background: none;
   border-width: medium;
   border-style: none;
   border-color: #131820;
   border-image: none;
   color: #131820;
   font-size: 15.2px;
   font-weight: 500;
   white-space: nowrap;
   cursor: pointer;
   text-decoration: none;
   transition: background-color 0.15s, color 0.15s;
   width: 100%;
}

/* .header-nav .nav-link:hover,
.header-nav .nav-link:focus,
.header-nav .nav-link.show {
   background: var(--cream);
   color: #a67629 !important
} */

.header-nav .dropdown-menu {
   border: 1px solid var(--line);
   border-top: 3px solid var(--gold);
   border-radius: 12px;
   padding: 13px;
   min-width: 225px;
   max-height: 420px;
   overflow-y: auto;
   background: #fff;
   box-shadow: 0 15px 40px rgba(6, 23, 47, .14)
}

.header-nav .dropdown-menu>div>a {
   display: block;
   padding: 6px 10px;
   font-size: 12px;
   font-weight: 650;
   color: var(--ink);
   border-radius: 6px
}

.header-nav .dropdown-menu>div>a:hover {
   background: #fdf3dc;
   color: var(--blue)
}

.header-nav .dropdown-menu br {
   display: none
}

.header-nav .navbar-button .btn,
.header-nav .btn-outline-primary {
   background: var(--gradient);
   color: var(--gold) !important;
   border: 1px solid var(--blue);
   border-radius: 9px;
   padding: 10px 16px;
   font-weight: 800;
   white-space: nowrap
}

.header-nav .navbar-button .btn:hover {
   background: var(--gold);
   color: var(--cream) !important;
   border-color: var(--gold)
}

.header-nav .navbar-toggler {
   border: 1px solid var(--line) !important;
   border-radius: 9px !important;
   padding: 8px 11px !important;
   box-shadow: none !important
}

/* Banner. Inline background-image is intentionally hidden; slide pictures remain visible */
.banner {
   background: #f4f8fc !important;
   background-image: none !important;
   overflow: hidden;
   position: relative;
   /* border-bottom: 1px solid var(--line) */
}

.banner #dynamicCarousel {
   margin: auto;
   overflow: hidden;
   box-shadow: var(--shadow);
   border: 1px solid #e6ebef;
   background: #fff
}

.banner .carousel-inner {
   background: #fff
}

.banner .carousel-item img {
   width: 100%;
   height: auto;
   max-height: 500px;
   object-fit: fill
}

.banner .carousel-control-prev,
.banner .carousel-control-next {
   width: 7%
}

.banner .carousel-control-prev-icon,
.banner .carousel-control-next-icon {
   filter: drop-shadow(0 1px 3px #06172f)
}

.banner .carousel-indicators {
   margin-bottom: 12px
}

.banner .carousel-indicators button {
   background-color: var(--gold);
   height: 5px;
   border-radius: 20px;
   width: 27px;
   border: 0
}

.banner>a.play {
   display: flex;
   justify-content: center;
   position: relative;
   z-index: 2;
}

/* .banner .app_download {
   background: var(--gradient) !important;
   color: var(--gold) !important;
   border: 1px solid var(--blue) !important;
   box-shadow: 0 8px 24px rgba(18, 57, 94, .22);
   border-radius: 25px;
   padding: 13px 35px;
   font-weight: 800;
   width: 90%;
   margin: auto;
} */

.banner .app_download {
   position: relative;
   display: block;
   overflow: hidden;
   isolation: isolate;
   background: var(--gradient) !important;
   color: var(--gold) !important;
   border: 1px solid var(--blue) !important;
   border-radius: 54px;
   padding: 18px 35px;
   font-weight: 800;
   width: 90%;
   margin: auto;
   cursor: pointer;
   text-align: center;
   box-shadow: none !important;
   /* box-shadow: 0 5px 15px rgba(18, 57, 94, 0.22); */
   animation: appDownloadPulse 2.5s ease-in-out infinite;
   transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

/* Golden Shine Animation */
.banner .app_download::before {
   content: "";
   position: absolute;
   top: 0;
   left: -120%;
   width: 65%;
   height: 100%;

   background: linear-gradient(110deg,
         transparent,
         rgba(255, 255, 255, 0.35),
         transparent);

   transform: skewX(-25deg);
   pointer-events: none;

   animation: appDownloadShine 3.5s ease-in-out infinite;
}

/* Click Effect */
.banner .app_download:active {
   transform: scale(0.97);
   box-shadow: 0 3px 10px rgba(18, 57, 94, 0.2);
}

/* Soft Pulse */
@keyframes appDownloadPulse {

   0%,
   100% {
      box-shadow: 0 5px 15px rgba(18, 57, 94, 0.22);
   }

   50% {
      box-shadow: 0 7px 22px rgba(18, 57, 94, 0.38);
   }
}

/* Shine Movement */
@keyframes appDownloadShine {

   0%,
   15% {
      left: -120%;
   }

   65%,
   100% {
      left: 160%;
   }
}

/* Accessibility: Reduce Motion */
@media (prefers-reduced-motion: reduce) {

   .banner .app_download,
   .banner .app_download::before {
      animation: none;
      transition: none;
   }
}

.banner .app_download strong {
   font-size: 22px !important
}

.banner .app_download:hover {
   background: var(--gold) !important;
   color: var(--navy) !important;
   border-color: var(--gold) !important
}



.tools-use-section {
   position: relative;
   background-color: var(--paper) !important;
   background-image: none !important
}

/* #rate {
   background: #f7f9fc !important
}

#timetable {
   background: #fffdf8 !important
}

#contents {
   background: #f7f9fc !important
} */

.tools-use-section>.container {
   position: relative;
   z-index: 1
}

.tools-use-section>.container>h2.h2 {
   font-size: clamp(26px, 3vw, 36px);
   font-weight: 900;
   text-align: center;
   margin-bottom: 29px !important;
   color: var(--blue)
}

.tools-use-section>.container>h2.h2::after {
   content: '';
   display: block;
   width: 66px;
   height: 4px;
   background: var(--gold);
   margin: 12px auto 0;
   border-radius: 20px
}

/* Actual rate cards from HTML: #rate > .row > .col-xl-4 > .card */
#rate .row>[class*='col-'],
#timetable .row>[class*='col-'] {
   margin-bottom: 17px
}

#rate .card,
#timetable .card {
   background: #fff;
   box-shadow: none !important;
   overflow: hidden;
   border-radius: 10px;
   transition: transform .18s ease, box-shadow .18s ease
}



.headingh3 {
   font-size: 25px;
   font-weight: 600;
   margin: 5px 0px;
}



#rate .card-body {
   padding: 16px !important;
   text-align: center;
   border: 1px solid #ababab;
   border-radius: 10px;
   overflow: hidden;
}

#rate .card-body>div {
   border-radius: 10px;
   display: flex;
   justify-content: space-between;
   align-items: center;
   flex-direction: column;
}

#rate .card h3 {
   font-size: 19px;
   font-weight: 500;
   margin: 0 0 8px;
   color: #000000;
   margin-bottom: 0px;
   text-transform: uppercase;
}

#rate .card .h4,
#rate .card .h4 h4 {
   font-size: 23px;
   font-weight: 600;
   color: #ba832d;
   margin: 0;
}

/* Actual game cards and result values */
#timetable .card {
   position: relative
}

#timetable .card-body {
   text-align: center;
   background: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
   border: 1px solid #03244c2e;
   border-radius: 12px;
}

#timetable .card-body>div:first-child>h3 {
   display: flex;
   gap: 7px;
   flex-wrap: wrap;
   justify-content: center;
   align-items: center;
   min-height: 42px;
   margin: 0 0 12px;
   color: var(--blue);
   font-size: 16px;
   letter-spacing: .1px;
   font-weight: 850
}

#timetable .card-body .time {
   display: inline-grid;
   place-items: center;
   width: 23px;
   height: 23px;
   border-radius: 50%;
   background: #edf3f9;
   color: var(--blue);
   font-size: 13px;
   cursor: pointer
}

#timetable .card-body .h2 {
   display: flex !important;
   justify-content: start;
   width: 100%;
   margin: 0 0 0px !important;

   span {
      color: #093468;
   }
}

#timetable .card-body .h2 h3 {
   font-size: clamp(16px, 2.4vw, 13px);

   font-weight: 600;
   color: #bf882c;
   letter-spacing: 1px;
   white-space: nowrap;
   margin: 0;
}

#timetable .card-body h3 {
   font-size: clamp(16px, 2.4vw, 13px);
   font-weight: 600;
   color: #bf882c;
   letter-spacing: 1px;
   white-space: nowrap;
   margin: 0;
}

#timetable .card-body .chart {
   width: 120px;
   max-width: 100%;
   min-height: 38px;
   border-radius: 46px;
   background: var(--gradient) !important;
   color: #fff !important;
   font-size: 12px;
   font-weight: 750;
   padding: 5px 6px !important;
   margin-top: 3px;
   line-height: 1.1;
}

#timetable .card-body .chart:hover {
   background: var(--gold);
   border-color: var(--gold);
   color: var(--navy)
}

/* Paragraph/content section */
#contents .container {
   background: #fff;
   border: 1px solid var(--line);
   border-radius: 18px;
   box-shadow: var(--shadow);
   padding: clamp(22px, 4vw, 48px)
}

#contents h1 {
   font-size: clamp(27px, 3vw, 38px);
   color: var(--blue);
   font-weight: 900
}

#contents h3,
#contents .h3 {
   font-size: 20px;
   color: var(--blue);
   margin-top: 27px !important;
   margin-bottom: 12px !important
}

#contents p,
#contents li {
   color: #506479;
   line-height: 1.8;
   font-size: 16px;
}

#contents li {
   margin: 4px 0
}

#contents ul,
#contents ol {
   padding-left: 23px
}

/* FAQ Bootstrap accordion: .accordionFAQ .card ... */
.section-padding.pt-0 {
   background: #fff;
   padding-top: 30px !important;
   padding-bottom: 65px
}

.accordionFAQ {
   max-width: 1040px;
   margin: auto
}

.accordionFAQ>h2 {
   font-size: clamp(25px, 3vw, 35px);
   color: var(--blue) !important;
   font-weight: 850
}

.accordionFAQ>h2 strong {
   color: #b7832c
}

.accordionFAQ>.card {
   background: #fff;
   border: 1px solid var(--line) !important;
   border-radius: 11px !important;
   margin-bottom: 10px;
   box-shadow: 0 5px 15px rgba(18, 57, 94, .05);
   overflow: hidden
}

.accordionFAQ .card-header {
   background: transparent !important;
   padding: 0 18px !important;
   border: none !important
}

.accordionFAQ .card-header h4 {
   cursor: pointer;
   font-size: 16px;
   font-weight: 750;
   color: var(--blue);
   padding: 17px 0 !important;
   margin: 0;
   display: flex;
   align-items: center;
   gap: 10px
}

.accordionFAQ .accordion-arrow {
   margin-right: 6px;
   color: #bc8a3b;
   font-size: 12px
}

.accordionFAQ .card-body {
   padding: 0 22px 17px !important;
   color: var(--muted);
   font-size: 14px
}

.accordionFAQ .card-body p {
   margin-bottom: 0;
   line-height: 1.7
}

/* Footer chart lists, scoped to actual classes */
footer.bg-light-gray {
   /* background: var(--gradient) !important; */
   color: #000;
   /* border-top: 4px solid var(--gold) */
}

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

footer .footer-bottom {
   padding-top: 60px !important
}

footer .chart-links {
   padding-bottom: 20px !important;
   row-gap: 32px
}

footer .chart-links h3 {
   font-size: 18px;
   font-weight: 600;
   color: var(--cream);
   margin: 0 0 5px;
}

footer .chart-links>div>div {
   margin-bottom: 6px
}

footer .chart-links a {
   color: #d9e5f2;
   font-size: 12px;
   line-height: 1.7;
   font-weight: 700;
}

footer .chart-links a:hover {
   color: var(--gold)
}

footer .footer-bottom p,
footer .footer-bottom .copyright {
   color: #c1d0de
}

footer .footer-bottom>.container>.row:last-child {
   border-top: 1px solid rgba(232, 185, 95, .2)
}

/* Modal / result time info */
.modal-content {
   border: 1px solid var(--line);
   border-radius: 16px !important;
   box-shadow: 0 25px 70px #06172f40;
   overflow: hidden;
   background: #fff
}

.modal-header {
   background: var(--gradient);
   color: #fff;
   border-bottom: 2px solid var(--gold)
}

.modal-title {
   color: #fff
}

.modal-header .btn-close {
   filter: invert(1)
}

.modal-body {
   color: var(--ink);
   padding: 22px
}

.modal-body .table {
   color: var(--ink);
   border-color: var(--line)
}

.modal-body .table th {
   background: #edf3f9;
   color: var(--blue)
}

/* Existing decoration shapes can obstruct content; keep them subtle */
.has-shapes>.shape-1,
.has-shapes>.shape-2,
.has-shapes>.shape-3,
.has-shapes>.shape-4,
.has-shapes>.shape-5,
.has-shapes>.shape-6,
.has-shapes>.shape-7,
.has-shapes>.shape-8 {
   opacity: .12;
   pointer-events: none
}

/* Buttons */
.btn-outline-primary {
   border: 1.5px solid var(--blue) !important;
   color: var(--blue) !important;
   font-weight: 600;
   border-radius: 8px;
   transition: all .2s ease;
}

.btn-outline-primary:hover {
   background: var(--blue) !important;
   color: #fff !important;
   border-color: var(--blue) !important;
}

/* Title */
.h1.mb-20 {
   color: var(--navy) !important;
   font-weight: 700;
   font-size: 1.7rem;
   letter-spacing: -0.3px;
   margin-bottom: 12px !important;
   line-height: 1.35;
}

/* Subtitle span */
.tools-use-section .container>span {
   color: var(--muted) !important;
   font-size: 0.9rem;
   line-height: 1.55;
   max-width: 640px;
   margin-left: auto !important;
   margin-right: auto !important;
}

/* Go To Bottom button */
.btn.btn-sm.btn-outline-primary {
   border: 1.5px solid var(--blue) !important;
   background: var(--gradient) !important;
   color: var(--cream) !important;
   font-weight: 600;
   font-size: 0.88rem;
   padding: 8px 18px;
   border-radius: 25px;
   transition: all 0.2s ease;
}


/* Mobile */
@media (max-width: 576px) {
   .h1.mb-20 {
      font-size: 1.25rem;
   }

   .tools-use-section .container>span {
      font-size: 0.82rem;
      padding: 0 10px;
   }
}

.bg-color-new {
   background: #f5f5f5 !important;
}

/* ========== SECTION ========== */
.tools-use-section {
   padding-top: 100px;
}

.tools-use-section .h1,
.tools-use-section h1.h1 {
   color: var(--navy) !important;
   font-weight: 700;
   font-size: 1.8rem;
   letter-spacing: -0.3px;
   margin-bottom: 8px !important;
}

.tools-use-section .h2,
.tools-use-section h2.h2 {
   color: var(--muted) !important;
   font-weight: 600;
   font-size: 1.25rem;
   margin-bottom: 24px !important;
   position: relative;
   display: inline-block;
   width: 100%;
   font-size: 15px;
}

.tools-use-section .h2 strong {
   color: var(--navy);
   border-bottom: 2px solid var(--gold);
   padding-bottom: 6px;
}

/* ========== CARDS (Market List) ========== */
.card.timetable {
   background: #fff !important;
   border: 1px solid var(--line) !important;
   border-radius: 12px !important;
   box-shadow: var(--shadow) !important;
   margin-bottom: 12px;
   transition: all 0.22s ease;
   overflow: hidden;
}

.card.timetable:hover {
   transform: translateY(-2px);
   box-shadow: 0 12px 28px rgba(18, 57, 94, .14) !important;
   border-color: rgba(232, 185, 95, .45) !important;
}

.card.timetable .card-body {
   padding: 16px 20px !important;
   text-align: center;
}

.card.timetable .card-body a {
   text-decoration: none;
   display: block;
}

.card.timetable .card-body h3.font-weight-600,
.card.timetable .card-body h3 {
   color: var(--navy) !important;
   font-weight: 600 !important;
   font-size: 1.05rem;
   margin: 0;
   letter-spacing: 0.3px;
   transition: color 0.2s ease;
}

.card.timetable:hover .card-body h3 {
   color: var(--blue) !important;
}

/* Gold left accent on hover */
.card.timetable {
   border-left: 3px solid transparent !important;
}

.card.timetable:hover {
   border-left: 3px solid var(--gold) !important;
}

/* ========== ROW SPACING ========== */

.tools-use-section .col-xl-12 {
   margin-bottom: 0;
}

/* ========== RESPONSIVE ========== */
@media (max-width: 768px) {

   .tools-use-section .h1,
   .tools-use-section h1.h1 {
      font-size: 1.4rem;
   }

   .tools-use-section .h2,
   .tools-use-section h2.h2 {
      font-size: 1.1rem;
   }

   .card.timetable .card-body {
      padding: 14px 16px !important;
   }

   .card.timetable .card-body h3 {
      font-size: 0.98rem !important;
   }
}

/* ========== TABLE (Jodi Chart) ========== */
table.t-cell {
   width: 100%;
   margin: 0 auto;
   border-collapse: collapse;
   background: #d1d1d1;
   border-radius: 14px;
   overflow: hidden;
   box-shadow: var(--shadow);
   border: 1px solid var(--line);
}

/* Header cells */
table.t-cell th.ch {
   background: var(--gradient) !important;
   color: var(--gold2) !important;
   font-weight: 600;
   font-size: 0.85rem;
   padding: 14px 10px !important;
   text-align: center;
   letter-spacing: 0.4px;
   border: none !important;
   border-bottom: 2px solid var(--gold) !important;
}

table.t-cell th.ch:first-child {
   text-align: left;
   padding-left: 18px !important;
   border-radius: 14px 0 0 0;
}

table.t-cell th.ch:last-child {
   border-radius: 0 14px 0 0;
}

/* Body cells */
table.t-cell td.cc {
   padding: 8px !important;
   text-align: center;
   border-bottom: 1px solid var(--line) !important;
   border-left: none !important;
   vertical-align: middle;
   font-size: 18px;
   background: #fff;
   font-weight: 600;
   border-right: 1px solid #ccc !important;
}

table.t-cell tr:last-child td.cc {
   border-bottom: none !important;
}

/* table.t-cell tr:hover td.cc {
   background: rgba(18, 57, 94, .03);
} */

/* Date column */
table.t-cell td.cc:first-child {
   text-align: center !important;
   padding-left: 16px !important;
   font-weight: 600;
   color: var(--blue);
   font-size: 0.82rem;
   white-space: nowrap;
   min-width: 130px;
   max-width: 209px;
   width: 12%;
}

table.t-cell td.cc:first-child .cp {
   display: block;
   line-height: 1.35;
   color: var(--blue);
   font-size: 15px;
}

/* ========== JODI NUMBER STYLING ========== */
/* Default jodi number */
table.t-cell td.cc>span:not(.cp) {
   display: inline-block;
   font-weight: 700;
   font-size: 1.15rem;
   color: var(--navy);
   background: linear-gradient(135deg, #fff8e8, #fff0d0);
   border: 1px solid rgba(232, 185, 95, .5);
   padding: 4px 12px;
   border-radius: 8px;
   min-width: 42px;
   letter-spacing: 0.5px;
}

/* Null / missing result */
table.t-cell td.cc.jnull>span,
table.t-cell td.cc>span:contains("**") {
   background: #f0f2f5 !important;
   border-color: #d0d5db !important;
   color: var(--muted) !important;
   font-weight: 600;
}

/* Optional: different accent for specific jodi classes if needed */
table.t-cell td[class*="j"]>span {
   display: block;
}

/* ========== CONTENT SECTION ========== */
#contents {
   background: #fff !important;
   padding: 50px 0 !important;
   border-top: 1px solid var(--line);
}

#contents .h3,
#contents h3 {
   color: var(--navy) !important;
   font-size: 1.35rem;
   margin: 28px 0 12px;
   padding-bottom: 8px;
   border-bottom: 2px solid var(--gold);
   display: inline-block;
}

#contents .h3:first-child,
#contents h3:first-child {
   margin-top: 0;
}

#contents .h4,
#contents h4 {
   color: var(--blue) !important;
   font-size: 1.05rem;
   margin: 18px 0 10px;
   font-weight: 700;
}

#contents p {
   color: var(--ink);
   margin-bottom: 14px;
}

#contents ul,
#contents ol {
   margin: 0px 0 13px 0px;
   color: var(--ink);
}

#contents li {
   margin-bottom: 8px;
}

#contents a {
   color: var(--blue);
   font-weight: 500;
}

#contents a:hover {
   color: var(--gold);
}

#contents b {
   color: var(--navy);
   font-size: 16px;
   font-weight: 600;
}

.section-padding.pt-auto {
   padding-top: auto;
}

/* ========== FOOTER ========== */
footer {
   /* background: var(--gradient) !important; */
   color: rgba(255, 255, 255, .75);
}

footer a {
   color: var(--gold2) !important;
}

/* ========== SCROLL TO TOP ========== */
.scroll-to-top-btn {
   background: var(--blue) !important;
   color: var(--gold2) !important;
   border: none !important;
   width: 44px;
   height: 44px;
   border-radius: 50% !important;
   box-shadow: 0 6px 20px rgba(6, 23, 47, .3);
   display: flex;
   align-items: center;
   justify-content: center;
}

.scroll-to-top-btn:hover {
   background: var(--navy) !important;
}

/* Chart Header Block */
.chart-header-block {
   padding: 10px 0 30px;
   max-width: 800px;
   margin: 0 auto;
}

.chart-title {
   font-size: 1.7rem;
   font-weight: 700;
   color: var(--navy);
   letter-spacing: -0.3px;
   margin-bottom: 10px;
   line-height: 1.3;
}

.chart-title .title-divider {
   color: var(--gold);
   margin: 0 6px;
   font-weight: 400;
}

.chart-subtitle {
   display: block;
   color: var(--muted);
   font-size: 0.9rem;
   margin: 0 auto 24px;
   max-width: 620px;
   line-height: 1.55;
}

.chart-actions {
   display: flex;
   justify-content: center;
   gap: 12px;
   flex-wrap: wrap;
}

.btn-chart-action {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   background: transparent;
   border: 1.5px solid var(--blue);
   color: var(--blue);
   font-weight: 600;
   font-size: 0.88rem;
   padding: 9px 22px;
   border-radius: 8px;
   cursor: pointer;
   transition: all 0.2s ease;
   min-width: 160px;
   justify-content: center;
}

.btn-chart-action:hover {
   background: var(--blue);
   color: #fff;
   border-color: var(--blue);
   transform: translateY(-1px);
   box-shadow: 0 4px 12px rgba(18, 57, 94, 0.2);
}

.btn-chart-action i {
   font-size: 0.95rem;
}

/* Hover Effect */
.headingnewdesign {
   display: flex;
   justify-content: center;
}

.headingnewdesign h2.h2 {
   color: var(--muted) !important;
   font-weight: 600;
   font-size: 1.25rem;
   margin-bottom: 24px !important;
   position: relative;
   display: inline-block;
   width: 100%;
   font-size: 15px;
   text-align: center;
   background: #0c2947;
   width: max-content !important;
   margin: auto !important;
   padding: 10px 40px;
   border-radius: 25px;

   strong {
      color: #fff !important;
      border-bottom: 0px !important;
      margin-bottom: 0px !important;
      padding-bottom: 0px !important;
      font-weight: 600;
      position: relative;
      display: inline-block;
      width: 100%;
      font-size: 18px;
      text-transform: uppercase;
   }
}

/* Animated Game Rates Heading */
.headingnewdesign {
   margin-bottom: 20px;
}

.tools-use-section .headingnewdesign .game-rates-heading {
   position: relative;
   overflow: hidden;
   isolation: isolate;
   color: #fff !important;
   animation: gameRatesFloat 3s ease-in-out infinite;
   font-size: 22px;
   margin-bottom: 15px;
   transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
   text-transform: uppercase;
   letter-spacing: 2.5px;
}

/* Golden Shine Effect */
.headingnewdesign .game-rates-heading::before {
   content: "";
   position: absolute;
   top: -50%;
   left: -120%;
   width: 45%;
   height: 200%;

   background: linear-gradient(110deg,
         transparent,
         rgba(255, 255, 255, 0.5),
         transparent);

   border: none;
   border-radius: 0;
   box-shadow: none;

   transform: skewX(-25deg);
   animation: gameRatesShine 4s ease-in-out infinite;
   pointer-events: none;
   z-index: -1;
}

/* Glowing Animated Border */
.headingnewdesign .game-rates-heading::after {
   content: "";
   position: absolute;
   inset: 0;

   width: auto;
   height: auto;
   top: 0;
   right: 0;

   border: 1px solid var(--gold, #e6bd55);
   border-radius: 8px;
   background: transparent;

   transform: none;
   box-shadow: inset 0 0 12px rgba(230, 189, 85, 0.15);

   animation: gameRatesGlow 2.5s ease-in-out infinite;
   pointer-events: none;
   z-index: -1;
}

.newactive {
   color: var(--gold);
}

/* Floating Animation */
@keyframes gameRatesFloat {

   0%,
   100% {
      transform: translateY(0);
   }

   50% {
      transform: translateY(-3px);
   }
}

/* Shine Animation */
@keyframes gameRatesShine {

   0%,
   15% {
      left: -120%;
   }

   55%,
   100% {
      left: 160%;
   }
}

/* Border Glow */
@keyframes gameRatesGlow {

   0%,
   100% {
      border-color: rgba(230, 189, 85, 0.5);
      box-shadow: inset 0 0 5px rgba(230, 189, 85, 0.08);
   }

   50% {
      border-color: #fff0a3;
      box-shadow: inset 0 0 15px rgba(230, 189, 85, 0.3);
   }
}

/* Hover */
.headingnewdesign .game-rates-heading:hover {
   transform: translateY(-4px) scale(1.02);
   box-shadow: 0 8px 25px rgba(18, 57, 94, 0.4);
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {

   .headingnewdesign .game-rates-heading,
   .headingnewdesign .game-rates-heading::before,
   .headingnewdesign .game-rates-heading::after {
      animation: none;
   }
}


/* Mobile */
@media (max-width: 576px) {
   .chart-title {
      font-size: 1.25rem;
   }

   .chart-subtitle {
      font-size: 0.82rem;
      padding: 0 10px;
   }

   .btn-chart-action {
      width: 100%;
      max-width: 220px;
   }
}

/* ========== RESPONSIVE ========== */
@media (max-width: 768px) {

   .tools-use-section .h1,
   .tools-use-section h1 {
      font-size: 1.3rem;
   }

   table.t-cell {
      font-size: 0.85rem;
   }

   table.t-cell td.cc>span:not(.cp) {
      font-size: 1rem;
      padding: 3px 9px;
      min-width: 36px;
   }

   table.t-cell td.cc:first-child {
      font-size: 0.75rem;
      min-width: 110px;
   }
}

/* Responsiveness without changing grid classes */
@media(max-width:1199.98px) {
   .header-nav .navbar {
      min-height: 70px
   }

   .header-nav .navbar-collapse {
      padding: 0px
   }

   .header-nav .navbar-nav {
      align-items: stretch;
      gap: 0
   }


   .header-nav .dropdown-menu {
      box-shadow: none;
      max-height: 260px;
      margin: 3px 0 8px
   }

   .header-nav .navbar-button {
      padding: 12px 13px
   }
}

@media(max-width:767.98px) {

   .features-wrapper {
      flex-direction: column;
   }

   .banner {
      padding: 10px 10px 0px
   }

   .banner #dynamicCarousel {
      border-radius: 10px
   }

   .banner .app_download {
      padding: 10px 23px
   }

   .banner .app_download strong {
      font-size: 15px !important
   }

   #rate .card-body {
      padding: 16px !important
   }

   #timetable .card-body {
      padding: 0px !important
   }

   #contents .container {
      padding: 20px
   }

   .footer-bottom {
      padding-top: 45px !important
   }

   footer .chart-links h3 {
      font-size: 16px
   }
}

@media(max-width:480px) {
   .header-nav .navbar-brand img {
      max-height: 48px;
      max-width: 170px
   }

   #timetable .card-body .h2 h3 {
      font-size: 25px
   }


   .accordionFAQ .card-header h4 {
      font-size: 13px
   }

   .tools-use-section>.container>h2.h2 {
      font-size: 26px
   }
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-item.dropdown:hover>.nav-link {
   color: var(--blue2) !important;
   transition: color 0.2s ease;
}

.appdownload_mobile {
   display: none;
}

@media(max-width:991px) {
   .feature-card {
      background: #ffffff;
      border-radius: 20px;
      position: relative;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      width: 100%;
      border: 2px solid #ccc;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
   }

   .imagedata {
      max-width: 123px;
      width: 100%;
      position: relative;
      margin-top: 0px;
      z-index: 1;
   }

   .contact-actions__number {
      font-size: 28px;
   }

   .appdownload_mobile {
      position: fixed;
      bottom: 0%;
      left: 50%;
      width: 70%;
      display: block;
      z-index: 9999;
      margin: auto;
      transform: translate(-50%, -50%);

      button {
         width: 100%;
      }
   }
}