/* General Body and HTML Styling */
        html {
            overflow-y: scroll; /* Always show scrollbar to prevent layout jump */
        }

        body {
            margin: 0;
            background: linear-gradient(135deg, #7f00ff, #e100ff);
            font-family: 'Segoe UI', sans-serif;
            color: #fff;
        }

        /* Header and Navbar Styling */
        header {
            background-color: rgba(0, 0, 0, 0.9); /* Darker background for header */
            padding: 10px 0;
        }

        .navbar {
            justify-content: space-between;
        }

        .navbar-brand {
            color: #fff !important;
            font-weight: bold;
            font-size: 22px; /* Adjusted font size */
        }

        /* Underline effect for nav links */
        .nav-link.underline {
            position: relative;
            display: inline-block;
        }

        .nav-link.underline::after {
            content: "";
            position: absolute;
            left: 0;
            bottom: -5px;
            width: 100%;
            height: 3px;
            background: linear-gradient(90deg, #00ffff, #ff00ff, #00ffff);
            background-size: 200%;
            background-position: 0%;
            transform: scaleX(0);
            transform-origin: left;
            transition: transform 0.4s ease;
            filter: blur(0.5px);
            box-shadow: 0 0 6px #ff00ff;
            z-index: 1;
        }

        .nav-link.underline:hover::after {
            transform: scaleX(1);
            animation: animateUnderline 3s linear infinite;
        }

        @keyframes animateUnderline {
            0% {
                background-position: 0%;
            }
            100% {
                background-position: 200%;
            }
        }

        .nav-link {
            color: #fff !important;
            font-weight: 600;
            font-size: 18px;
            letter-spacing: 0.5px;
            transition: 0.3s;
            white-space: nowrap;
        }

        .navbar-collapse {
            justify-content: center !important;
        }

        /* Responsive Navbar adjustments */
        @media (max-width: 767px) {
            .navbar {
                flex-wrap: wrap;
                justify-content: space-between !important;
                align-items: center;
                text-align: center;
            }

            .navbar-brand {
                flex: 1 0 100%;
                text-align: center;
                margin-bottom: 10px;
            }

            .navbar-toggler {
                position: absolute;
                right: 20px;
                top: 15px;
            }

            .navbar-nav {
                flex-direction: column;
                align-items: center;
                gap: 10px;
                background: #000;
                width: 100%;
                padding: 10px 0;
            }

            .nav-link {
                display: block;
                text-align: center;
                font-size: 18px;
            }

            .header-buttons {
                flex-direction: column;
                align-items: center;
                margin-top: 15px;
                gap: 10px;
            }

            .action-btn {
                display: block;
                width: 80%;
                margin: 0 auto;
            }
        }

        .cta-buttons {
            display: flex;
            flex-direction: column;
            gap: 12px;
            align-items: center;
        }

        @media (max-width: 767px) {
            .cta-buttons {
                flex-direction: column !important;
                align-items: center;
            }

            .cta-buttons .super-button {
                width: 90%;
                max-width: 280px;
                text-align: center;
            }
        }

        .header-buttons {
            display: flex;
            gap: 10px;
        }

        .header-buttons .btn {
            font-weight: 500;
            border-radius: 5px;
            padding: 5px 15px;
        }

        /* Hero Video */
        .hero-video {
            width: 100%;
            max-height: 700px;
            object-fit: cover;
        }

        /* Section Styling */
        section {
            padding: 60px 20px;
            text-align: center;
            min-height: 300px; /* Fix sudden layout jump on animation */
        }

        /* Testimonial Card */
        .testimonial-card {
            background: rgba(255, 255, 255, 0.1);
            padding: 20px;
            border-radius: 10px;
            margin: 10px;
        }

        /* Footer Styling */
        footer {
            background-color: rgba(0, 0, 0, 0.95);
            padding: 20px 0;
            position: relative;
            z-index: 1;
            margin-top: 40px;
        }

        footer .footer-links a {
            margin: 5px 10px;
            color: #fff;
            text-decoration: none;
            font-size: 14px;
        }

        footer .footer-links a:hover {
            text-decoration: underline;
        }

        /* Form Styling */
        form input,
        form textarea {
            background-color: #fff !important;
            color: #000 !important;
        }

        .form-label {
            text-align: left;
            width: 100%;
        }

        /* Flag Carousel */
        .flag-carousel-container {
            overflow: hidden;
            white-space: nowrap;
            padding: 20px 0;
        }

        .flag-carousel-track {
            display: flex;
            width: max-content;
            animation: scrollFlags 25s linear infinite;
        }

        .flag-item {
            display: inline-block;
            text-align: center;
            margin: 0 10px;
            width: 90px;
        }

        .flag-item img {
            width: 80px;
            height: auto;
            border-radius: 4px;
            box-shadow: 0 0 5px #00000033;
        }

        .flag-name {
            font-size: 14px;
            margin-top: 5px;
            color: #fff;
        }

        @keyframes scrollFlags {
            0% { transform: translateX(0); }
            100% { transform: translateX(-50%); }
        }

    

        /* Stylish Glass Navbar */
        .glass-navbar {
            background: rgba(0, 0, 0, 0.3);
            backdrop-filter: blur(10px);
            border-radius: 12px;
            box-shadow: 0 8px 16px rgba(0,0,0,0.2);
        }

        .navbar-brand {
            font-size: 22px;
            font-weight: bold;
            color: #fff;
            letter-spacing: 1px;
            transition: 0.3s ease;
        }

        .navbar-brand:hover {
            color: #ffccff;
        }

        .nav-link:hover {
            color: #ffd6ff !important;
            transform: scale(1.05);
        }

        .action-btn {
            border-radius: 6px;
            font-weight: 600;
            transition: all 0.3s ease-in-out;
        }

        .action-btn:hover {
            transform: scale(1.05);
            box-shadow: 0 4px 12px rgba(255, 255, 255, 0.2);
        }

        .navbar-toggler {
            border: none;
            outline: none;
        }

        .navbar-toggler-icon {
            background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba%28255, 255, 255, 1%29' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
        }

        /* Split-style modal for Check Lottery */
        .split-modal .modal-dialog {
            max-width: 800px;
        }

        .split-modal .modal-content {
            display: flex;
            flex-direction: row;
            overflow: hidden;
            border-radius: 12px;
            padding: 0;
            background-color: #111;
        }

        .split-modal .modal-image {
            width: 50%;
            background-color: #111;
            background-image: url('images/modal-left.jpg'); /* Ensure this path is correct */
            background-size: contain;
            background-position: center;
            background-repeat: no-repeat;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .split-modal .modal-form {
            width: 50%;
            padding: 40px 30px;
            color: #fff;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .split-modal .modal-form h5 {
            font-size: 24px;
            margin-bottom: 20px;
            font-weight: bold;
            color: #fff;
        }

        .split-modal .form-control {
            background: transparent;
            border: 1px solid #888;
            color: #fff;
            margin-bottom: 15px;
            border-radius: 4px;
        }

        .split-modal .form-control::placeholder {
            color: #aaa;
        }

        .split-modal .form-control:focus {
            background-color: #000;
            border-color: #00ff99;
            box-shadow: none;
        }

        .split-modal .btn-submit {
            background-color: #00cc66;
            border: none;
            color: white;
            font-weight: bold;
            padding: 10px;
            border-radius: 6px;
            transition: 0.3s ease;
        }

        .split-modal .btn-submit:hover {
            background-color: #00b359;
        }

        .modal-form input.form-control {
            background-color: #fff;
            color: #000;
            border: none;
            padding: 10px;
            border-radius: 6px;
        }

        .modal-form .btn-success {
            background-color: #00c853;
            border: none;
            font-weight: bold;
        }

        .modal-form .btn-success:hover {
            background-color: #00b44b;
        }

        .modal-content {
            max-width: 700px;
            margin: auto;
            box-shadow: 0 10px 30px rgba(0,0,0,0.5);
        }

        .split-modal .modal-heading {
            margin-top: 10px;
            text-align: center;
            font-size: 26px;
        }

        /* Super Button Styling */
        .super-button {
            position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            padding: 14px 28px;
            background: linear-gradient(145deg, #0f0f0f, #1c1c1c);
            border: 2px solid rgba(255, 255, 255, 0.2);
            border-radius: 100px;
            color: #fff;
            font-size: 16px;
            font-weight: 600;
            letter-spacing: 0.5px;
            cursor: pointer;
            overflow: hidden;
            transition: all 0.4s ease-in-out;
            box-shadow: 0 0 20px rgba(0, 255, 255, 0.1);
            backdrop-filter: blur(8px);
            z-index: 1;
        }

        .super-button::before {
            content: "";
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: conic-gradient(from 0deg, #00ffff, #ff00ff, #00ffff);
            animation: rotate 4s linear infinite;
            z-index: -2;
        }

        .super-button::after {
            content: "";
            position: absolute;
            inset: 2px;
            background: #0a0a0a;
            border-radius: inherit;
            z-index: -1;
        }

        .super-button:hover {
            transform: scale(1.05);
            box-shadow: 0 0 40px rgba(0, 255, 255, 0.2);
        }

        .super-button:hover .arrow {
            transform: translateX(6px);
        }

        .arrow {
            width: 22px;
            height: 22px;
            transition: transform 0.3s ease-in-out;
            color: #00ffff;
        }

        @keyframes rotate {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }

        @media (max-width: 767px) {
            .navbar-nav {
                background: #000;
                padding: 10px;
                text-align: center;
            }

            .navbar-nav .nav-link {
                display: block;
                padding: 10px 0;
            }

            .action-btn {
                display: block;
                margin: 10px auto;
            }
        }

        .super-button span {
            white-space: nowrap;
        }

        /* Header Buttons Specific Styling */
        .header-buttons {
            display: flex;
            flex-direction: row;
            gap: 10px; /* Reduced gap */
            align-items: center;
            justify-content: flex-end; /* Keep them to the right */
            margin-top: -10px; /* Added to move buttons slightly up */
        }

        .header-buttons .super-button {
            padding: 8px 16px; /* Significantly reduced padding for header buttons */
            font-size: 14px; /* Slightly smaller font size */
            min-width: unset; /* Remove minimum width constraint */
            max-width: 150px; /* Set a maximum width if needed, adjust as per visual */
            gap: 8px; /* Smaller gap for icon and text */
        }

        @media (max-width: 767px) {
            .header-buttons {
                flex-direction: column; /* Stack them on very small screens */
                align-items: center;
                justify-content: center;
                margin-top: 10px;
                width: 100%; /* Take full width on small screens */
            }

            .header-buttons .super-button {
                width: 80%; /* Make buttons take more width in column layout */
                max-width: 200px; /* Constrain max width for stacked buttons */
                padding: 10px 20px; /* Slightly more padding when stacked */
                font-size: 16px; /* Restore original font size when stacked */
            }
        }

        /* WhatsApp Widget */
        .whatsapp-widget {
            position: fixed;
            bottom: 20px;
            right: 20px;
            width: 280px;
            background: #fff;
            border-radius: 12px;
            box-shadow: 0 0 16px rgba(0, 0, 0, 0.3);
            overflow: hidden;
            font-family: 'Segoe UI', sans-serif;
            z-index: 9999;
        }

        .chat-header {
            display: flex;
            align-items: center;
            gap: 12px;
            background: #25D366;
            color: white;
            padding: 12px;
            cursor: pointer;
        }

        .chat-header img {
            width: 36px;
            height: 36px;
        }

        .chat-body {
            padding: 16px;
            background: #f9f9f9;
            display: none;
        }

        .start-chat {
            display: inline-block;
            margin-top: 10px;
            background: #25D366;
            color: #fff;
            text-decoration: none;
            padding: 10px 16px;
            border-radius: 25px;
            font-weight: bold;
            box-shadow: 0 0 10px rgba(37, 211, 102, 0.5);
        }

        /* Choose Card (Why Choose Us) Styling */
        .choose-card {
            position: relative;
            background: rgba(255, 255, 255, 0.05);
            border-radius: 16px;
            padding: 25px 20px;
            overflow: hidden;
            z-index: 1;
            backdrop-filter: blur(10px);
            box-shadow: 0 0 15px rgba(0, 255, 255, 0.1);
            transition: all 0.4s ease;
        }

        .choose-card::before {
            content: "";
            position: absolute;
            top: -3px;
            left: -3px;
            right: -3px;
            bottom: -3px;
            z-index: -1;
            background: linear-gradient(135deg, #00ffff, #ff00ff, #00ffff);
            background-size: 400% 400%;
            border-radius: 20px;
            animation: gradientMove 6s linear infinite;
            filter: blur(6px); /* glow effect */
        }
        @keyframes gradientMove {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        .icon-wrap {
            margin-bottom: 15px;
            display: flex;
            justify-content: center;
        }

        .choose-icon {
            width: 60px;
            height: 60px;
            transition: transform 0.4s ease;
            animation: iconPop 1s ease-in-out infinite alternate;
        }

        @keyframes iconPop {
            0% { transform: scale(1); }
            100% { transform: scale(1.1); }
        }

        .choose-card h5 {
            font-size: 20px;
            font-weight: bold;
            color: #fff;
            margin-bottom: 10px;
        }

        .choose-card p {
            color: #ddd;
            font-size: 15px;
            line-height: 1.5;
        }

        /* Hover Glow */
        .choose-card:hover .choose-icon {
            transform: scale(1.2);
        }

        .choose-card:hover .card-content {
            box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
        }

        /* Responsive Choose Card */
        @media (max-width: 768px) {
            .choose-card {
                width: 100%;
                margin-left: 5px;
                margin-right: 5px;
            }

            .choose-icon {
                width: 50px;
                height: 50px;
            }
        }

        @media (min-width: 992px) {
            .choose-card {
                padding-left: 12px;
                padding-right: 12px;
            }
        }

        /* Stats Box Styling */
        .stats-box {
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255,255,255,0.1);
            border-radius: 12px;
            box-shadow: 0 0 12px rgba(0,255,255,0.1);
            transition: transform 0.3s ease;
            color: #fff;
        }
        .stats-box:hover {
            transform: translateY(-5px);
        }

        /* Desktop Navbar Fixes */
        @media (min-width: 768px) {
            .navbar-nav {
                display: flex;
                flex-direction: row;
                align-items: center;
                gap: 16px;
            }

            .nav-item {
                display: inline-block;
            }

            .nav-link {
                white-space: nowrap;
                display: inline-block;
                font-size: 18px;
            }
        }

        /* Slot Counter Styling - Crucial for Animation */
.slot-counter {
    display: flex;
    gap: 4px; /* Space between digits */
    font-size: 2.2rem; /* Size of the digits */
    font-weight: bold;
    line-height: 1; /* Essential for correct height calculation */
    font-family: 'Courier New', monospace; /* Monospaced font for alignment */
    justify-content: center; /* Center the digits horizontally */
}

/* Individual digit column */
.slot-digit-wrapper {
    width: 1.2ch; /* Width of each digit column */
    height: 2.2rem; /* Fixed height for the wrapper, matches font-size */
    overflow: hidden; /* Hide overflowing parts of the scrolling strip */
    position: relative; /* For absolute positioning of the inner strip */
    background: transparent;
}

/* Scrolling inner strip containing 0-9 digits */
.slot-digit-inner {
    position: absolute;
    top: 0;
    left: 0;
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); /* Smooth scroll */
    will-change: transform; /* Hint to browser for better performance */
}

/* Individual digit styling with animated gradient */
.slot-digit-inner div {
    height: 2.2rem; /* Each digit's height, matches wrapper */
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1; /* Crucial for vertical alignment */

    /* ✨ Gradient text animation */
    background: linear-gradient(90deg, #00ffff, #ff00ff, #00ffff);
    background-size: 200% 200%;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    animation: gradientMove 3s linear infinite;
}

/* 🔁 Gradient animation keyframes */
@keyframes gradientMove {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.gradient-icon {
  background: linear-gradient(45deg, #00ffe7, #ff00c3);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: glowPulse 2s infinite alternate;
}

@keyframes glowPulse {
  from { transform: scale(1); filter: drop-shadow(0 0 5px #fff); }
  to { transform: scale(1.05); filter: drop-shadow(0 0 10px #ff00f7); }
}

.text-gradient {
  background: linear-gradient(45deg, #00fff0, #ff00c8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.testimonial-img img {
  box-shadow: 0 0 10px #00e0ff, 0 0 20px #ff00d4;
  transition: transform 0.4s ease;
}

.testimonial-img img:hover {
  transform: scale(1.1);
}


.footer-glass {
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: white;
}

.footer-link {
  font-weight: 500;
  position: relative;
  text-decoration: none;
  color: white;
  transition: color 0.3s;
}

.footer-link:hover {
  color: #00fff7;
}

/* Gradient underline animation (like your nav menu) */
.footer-link.underline::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, #ff00d4, #00fff7);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.footer-link.underline:hover::after {
  transform: scaleX(1);
}

.text-gradient {
  background: linear-gradient(45deg, #00fff0, #ff00c8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.black-heading {
  color: #000 !important;
}

/* Moving black-and-white gradient animation */
.card-gradient-animated {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #000, #fff, #000);
  background-size: 400% 400%;
  animation: gradientMove 6s ease infinite;
  transition: transform 0.3s ease;
}

.card-gradient-animated:hover {
  transform: scale(1.03);
}

@keyframes gradientMove {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Make inner content readable */
.card-gradient-animated .card-body,
.card-gradient-animated img {
  position: relative;
  z-index: 2;
}
.card-gradient-animated::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.65); /* Dark overlay */
  z-index: 1;
}

.star-rating {
  margin-top: 8px;
  color: #FFD700;
  animation: glowStars 1.5s ease-in-out infinite alternate;
}

.star-rating {
  font-size: 1.1rem;
  color: gold;
  text-shadow: 0 0 6px #ff0;
}

@keyframes glowStars {
  0% {
    text-shadow: 0 0 3px #FFD700, 0 0 6px #FFC107;
  }
  100% {
    text-shadow: 0 0 6px #FFD700, 0 0 12px #FFC107;
  }
}

/* Winner Map Tooltip */
..jvectormap-tip {
  max-width: 240px;
  font-size: 14px;
  background-color: #333;
  color: #fff;
  padding: 8px 12px;
  border-radius: 6px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

#loaderOverlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(10, 10, 10, 0.85);
  z-index: 9999;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Bouncing Queue */
.dot-loader {
  display: flex;
  gap: 16px;
  position: relative;
}

.dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  animation: jumpToFront 2s infinite ease-in-out;
  animation-delay: calc(var(--i) * 0.2s);
  position: relative;
}

.dot:nth-child(1) { background-color: #f44336; } /* Red */
.dot:nth-child(2) { background-color: #ff9800; } /* Orange */
.dot:nth-child(3) { background-color: #ffeb3b; } /* Yellow */
.dot:nth-child(4) { background-color: #4caf50; } /* Green */
.dot:nth-child(5) { background-color: #2196f3; } /* Blue */

@keyframes jumpToFront {
  0%   { transform: translateY(0) translateX(0) scale(1); z-index: 0; }
  25%  { transform: translateY(-20px) translateX(0) scale(1.1); z-index: 1; }
  50%  { transform: translateY(0) translateX(-60px) scale(0.95); z-index: 1; }
  75%  { transform: translateY(-12px) translateX(-30px); }
  100% { transform: translateY(0) translateX(0); }
}

.loader-text {
  color: white;
  margin-top: 20px;
  font-size: 18px;
  font-weight: 500;
}
.winning-amount {
  font-family: 'Noto Sans', 'Segoe UI Symbol', 'Arial Unicode MS', 'Roboto', sans-serif;
  font-size: 16px;
  font-weight: bold;
  color: #2e7d32;
}

#verifyModal .golden-text {
  font-size: 1.5rem;
  line-height: 1.2;
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  text-align: center;
  text-transform: none;  /* ✅ remove uppercase */
  margin-top: 10px;
  margin-bottom: 15px;
}
.golden-text {
  font-family: 'Poppins', sans-serif;
  font-size: 32px;
  font-weight: 700;
  color: #ffc107;
  margin-bottom: 20px;
}



@media (max-width: 768px) {
  #verifyModal .golden-text {
    font-size: 1.5rem;
  }
}

body.modal-open {
  padding-right: 0 !important;
  overflow: hidden !important;
}

/* ===== Phone + ISD layout ===== */
.phone-wrap .isd-select{ max-width:120px; min-width:110px; }
.phone-wrap .phone-input{ flex:1; }

/* ===== OTP boxes ===== */
.cl-otp-box{
  width:44px; height:50px; text-align:center; font-size:22px;
  border-radius:10px; border:1px solid rgba(255,255,255,.25);
  background:#0e0e0e; color:#fff; outline:none;
  transition:border-color .2s, transform .2s;
}
.cl-otp-box:focus{ border-color:#00ffff; transform:translateY(-1px); }
@media (max-width:480px){ .cl-otp-box{ width:40px; height:46px; } }