/* Universal Styles & Base Resets */
:root {
  --bs-body-bg: #060322;
  --bs-body-color: #ffffff;
  --bs-warning: #a90117; /* Custom orange for main accents */
  --bs-orange: #a90117; /* Original orange for text highlights */
  --bs-yellow: #ffff00; /* Original yellow for text highlights */
  --bs-breakpoint-xs: 0;
  --bs-breakpoint-sm: 576px;
  --bs-breakpoint-md: 768px;
  --bs-breakpoint-lg: 992px;
  --bs-breakpoint-xl: 1200px;
  --bs-breakpoint-xxl: 1400px;
}

body {
  background: var(--bs-body-bg);
  font-family: "Gilroy", sans-serif; /* Assuming Gilroy is available or linked */
  color: var(--bs-body-color);
  overflow-x: hidden;
}

a {
  transition: all 0.4s ease 0s;
  -webkit-transition: all 0.4s ease 0s;
  text-decoration: none;
  outline: none;
  color: var(--bs-body-color); /* Default link color */
}

a:hover,
a:focus {
  outline: none;
  text-decoration: none;
}

img {
  border: none !important; /* Override Bootstrap img border */
  outline: none;
  max-width: 100%;
  height: auto; /* Ensure images scale properly */
}

.payments-images{
    aspect-ratio: 2/3;
}

.payments-images img{
    object-fit: cover;
    
}

.bg-warning{
    background: #a90117 !important;
}

.btn-warning {
  background: #a90117 !important;
  color: #fff !important;
  border-color: #a90117 !important;
}

.btn-warning:hover {
  background-color: #a90117 !important;
}

/* Custom Text Colors */
.text-orange {
  color: var(--bs-orange) !important;
}

.text-yellow {
  color: var(--bs-yellow) !important;
}

/* Header/Navigation Section */
.md_header {
  padding: 15px 0;
  box-sizing: border-box; /* Include padding in element's total width and height */
  /* This ensures the navbar sits on top of the banner */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1020; /* Higher than other sections for overlap */
}

/* Specific styling for the main logo on large screens */
.md_header .tplogo {
  max-height: 80px; /* Adjust logo size if needed */
  width: auto;
}

/* Styling for the mobile logo when the menu is collapsed/expanded */
.md_header .tplogo-mobile {
  max-height: 60px; /* Smaller for mobile */
  width: auto;
  margin-top: 10px; /* Space from toggler */
  margin-bottom: 10px;
}

/* Hide default navbar-brand on small screens and custom logo on large */
@media (min-width: 992px) {
  .md_header .navbar-brand.d-lg-none {
    display: none !important;
  }
}
@media (max-width: 991.98px) {
  .md_header .navbar-brand.d-none.d-lg-block {
    display: none !important;
  }
}


@media (max-width: 576px){
  .align-buttons{
    align-items: center;
    justify-content: center;
  }
}

/* Custom Toggler for the Navbar */
.md_header .custom-toggler {
  border: 1px solid var(--bs-warning); /* Border color for toggler */
  padding: 0.5rem 0.75rem;
  font-size: 1.25rem;
  line-height: 1;
  border-radius: 0.25rem;
}

.md_header .custom-toggler:focus {
  box-shadow: 0 0 0 0.25rem rgba(255, 136, 0, 0.5); /* Focus outline */
}

.md_header .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgb(255, 136, 0)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Styling for the collapsed menu background */
.md_header .navbar-collapse {
  border-radius: 5px;
}

/* Specific styling for the buttons and text inside the navbar */
.md_header .custom-button {
  border: 2px solid #a90117;
  color: #a90117;
  font-weight: 700;
  font-size: 14px;
}

.md_header .custom-button:hover {
  background: #a90117;
  color: #000000;
  box-shadow: none; /* Remove default Bootstrap button shadow on hover */
}

.md_header .custom-whatsapp-button {
  background: var(--bs-warning);
  color: #ffffff !important;
  font-weight: 900;
  font-size: 15px;
  border-radius: 40px;
}

.md_header .custom-whatsapp-button:hover {
  box-shadow: 0 0 200px 60px #a90117 inset;
}

/* Ensure navbar items are centered on mobile but aligned left/right on desktop */
@media (max-width: 991.98px) {
  .md_header .navbar-nav {
    width: 100%; /* Take full width */
  }
  .md_header .navbar-nav .nav-item {
    width: 100%; /* Each item takes full width */
    text-align: center !important; /* Center text within items */
    margin-bottom: 15px; /* Spacing between stacked items */
  }
  .md_header .navbar-nav .nav-item:last-child {
    margin-bottom: 0;
  }
  .md_header .md_hdr_lft,
  .md_header .md_hdr_rgt {
    display: flex;
    flex-direction: column;
    align-items: center; /* Center content within these groups */
  }
}

/* Banner Section */
.md_banner {
  background: url("../images/bnr.webp") no-repeat center center;
  background-size: cover;
  padding: 170px 0 0; /* Adjust padding as needed for content placement */
  min-height: 700px; /* Ensure banner has sufficient height */
  display: flex;
  align-items: center;
}

.md_banner .custom-banner-padding {
  padding-left: 180px; /* Matches original padding-left */
}

.md_banner .md_banner_con h2 {
  max-width: 480px;
  line-height: 40px;
}

.md_banner .md_banner_con h1 {
  font-size: 50px;
  line-height: 60px;
  font-weight: 900;
}

.md_banner .md_banner_con h5 {
  font-size: 30px;
}

.md_banner .custom-whatsapp-button {
  font-size: 22px;
  padding: 9px 21px;
}

.md_banner .md_banner_img {
  right: -110px; /* Adjust based on original design */
  bottom: -90px; /* Adjust based on original design */
  width: 950px; /* Original width */
}

/* Available Sites Section */
.md_sites h2 {
  font-size: 35px;
  font-weight: 900;
  color: #a90117; /* Specific color for this heading */
}

.md_sites h3 {
  font-size: 25px;
  font-weight: 900;
  color: #ffff00; /* Specific color for these headings */
}

.md_sites .custom-site-link img {
  max-width: 200px;
  max-height: 80px;
}

.md_sites .custom-site-link {
  margin-right: 100px; /* Adjust spacing as per original */
}

/* Flyer/Casino Images Section */
.flyer-grid-container .flyer-item {
  background-color: #1a1a2e; /* A subtle background for the image container */
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); /* Shadow for depth */
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 350px; /* Limit individual image container width */
  margin: 0 auto; /* Center individual items in their grid cell */
}

.flyer-grid-container .flyer-item img {
  border-radius: 15px; /* Apply border-radius to the image itself */
  object-fit: cover; /* Ensures image covers the area, might crop slightly if aspect ratios differ */
}

/* Wheels Section */
.md_wheels {
  /* background: linear-gradient(to right, #ffcc91, #000000 70%); */
  /* padding: 160px 0 195px; */
   /* min-height: 700px; */
}

.md_wheels .md_wheels_inn {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.md_wheels .md_wheels_inn .md_wheels_img {
    position: absolute;
    left: -160px;
    bottom: -230px;
    width: 100%;
    max-width: 1000px;
}
.md_wheels .md_wheels_inn .md_wheels_img img{
    display: block;
}
.md_wheels .md_wheels_inn .md_wheels_img .bgspin {
    position: absolute;
    left: 106px;
    bottom: 174px;animation: mymove 4s infinite;
    width: 650px;
}
@keyframes mymove {
  from {transform: rotate(0);}
  to {transform: rotate(360deg);}
}
.md_wheels .md_wheels_inn .md_wheels_img .bgtop {
    position: absolute;
    left: -280px;
    bottom: 210px;
    max-width: 1400px;
    display: inline-block;
    width: auto;
}

.md_wheels .md_girl {
  width: auto;
  max-width: 500px; /* Example max-width, adjust as needed */
}

.md_wheels .custom-wheels-content h2 {
  font-size: 40px;
  line-height: 45px;
}

.md_wheels .custom-wheels-content p {
  font-size: 30px;
  line-height: 40px;
}

.md_wheels .custom-hr {
  width: 200px;
  height: 4px;
  background: #ffb159;
  border: 0;
  opacity: 1; /* Ensure hr is fully visible */
}

.md_wheels .custom-wheels-content h5 {
  font-size: 30px;
  line-height: 40px;
}

.md_wheels .custom-whatsapp-button {
  font-size: 22px;
  padding: 9px 27px;
}

/* Specific positioning for wheel images */
.md_wheels .custom-wheels-img {
  position: relative; /* Container for absolute positioned images */
  height: 600px; /* Give it a height to position children */
}

.md_wheels .custom-bgwheel {
  left: -160px;
  bottom: -230px;
  width: 1000px; /* Original width */
  max-width: 1000px;
  z-index: 0;
}

.md_wheels .custom-bgwheel2 {
  /* Adjust if this image was also absolutely positioned */
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1; /* Example z-index */
}

.md_wheels .custom-bgspin {
  left: 106px; /* Adjust based on original placement relative to its container */
  bottom: 174px; /* Adjust based on original placement */
  width: 650px;
  animation: mymove 4s infinite linear; /* Original animation */
  z-index: 2;
}

.md_wheels .custom-bgtop {
  left: -280px; /* Adjust based on original placement */
  bottom: 210px; /* Adjust based on original placement */
  max-width: 1400px;
  z-index: 3;
}

@keyframes mymove {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Customer Support Section */
.md_cs {
  background: url("../images/bg.webp") no-repeat center center;
  background-size: cover;
  padding: 100px 0 130px;
}

.md_cs .custom-cs-content h2 {
  font-size: 43px;
  line-height: 40px;
  text-shadow: 0 0 5px #fff;
  max-width: 400px;
}

.md_cs .custom-cs-content p {
  font-size: 28px;
  line-height: 40px;
}

.md_cs .custom-hr {
  width: 200px;
  height: 4px;
  background: #ffb159;
  border: 0;
  opacity: 1;
}

.md_cs .custom-cs-content h5 {
  font-size: 30px;
  line-height: 40px;
}

.md_cs .custom-whatsapp-button {
  font-size: 22px;
  padding: 9px 27px;
}

.md_cs .custom-service-text {
  text-shadow: 0 0 4px #f3dfa4;
  color: #a90117 !important;
}

/* Instagram/Payment Proof Section */
.md_insta {
  background-color: #0d0d0d; /* Assuming a dark background */
  padding: 50px 0;
}

.md_insta h2 {
  text-shadow: 0 0 0 !important; /* Override original inline style */
}

.md_insta .custom-join-telegram {
  font-size: 1rem;
  padding: 0.5rem 1rem;
  vertical-align: middle;
}

.md_insta_pic span {
  font-size: 1.25rem;
  font-weight: 600;
}

.md_insta_pic img {
  border: 5px solid #000; /* Example border, adjust as needed */
}

/* How to Play Section */
.md_htp {
  background: url("../images/bg3.webp") no-repeat center center;
  background-size: cover;
  padding: 165px 0 55px;
}

.md_htp .custom-htp-content h2,
.md_htp .custom-htp-content h4 {
  font-size: 45px;
  line-height: 45px;
  text-shadow: 0 0 5px #fff;
}

.md_htp .custom-htp-content p {
  font-size: 30px;
  line-height: 40px;
}

.md_htp .custom-hr-light {
  width: 200px;
  height: 4px;
  background: #e4cb8e;
  border: 0;
  opacity: 1;
}

.md_htp .custom-htp-content h5 {
  font-size: 30px;
  line-height: 40px;
}

.md_htp .custom-whatsapp-button {
  font-size: 22px;
  padding: 9px 27px;
}

/* Celebrity Section */
.lb_celeb {
  background: url("../images/bg4.webp") no-repeat center center;
  background-size: cover;
  padding: 127px 0 106px; /* Adjust padding as per original */
}

.lb_celeb .custom-celeb-heading {
  font-size: 107px;
  line-height: 107px;
  text-shadow: 0 0 5px #fff;
  font-weight: 900;
  color: var(--bs-warning);
}

.lb_celeb .clb_img_wrap {
  box-shadow: 0 25px 20px -5px rgba(0, 0, 0, 0.3);
  border-radius: 20px;
}

.lb_celeb .clb_play {
  max-width: 90px;
}

.lb_celeb .owl-nav button {
  background-color: var(--bs-warning) !important;
  color: #000 !important;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  position: absolute; /* Needed for positioning relative to slider */
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
}

.lb_celeb .owl-nav button.owl-prev {
  left: -70px; /* Adjust based on original placement */
}

.lb_celeb .owl-nav button.owl-next {
  right: -70px; /* Adjust based on original placement */
}

/* Footer Section */
.ftr_md {
  background-color: #060322; /* Ensure dark background */
}

.ftr_md .ftr_logo {
  max-width: 200px; /* Example size */
}

.ftr_md .ftr_blk h4 {
  color: var(--bs-warning);
  font-weight: bold;
}

.ftr_md .ftr_blk ul li a {
  color: rgba(255, 255, 255, 0.75); /* Lighter white for links */
}

.ftr_md .ftr_blk ul li a:hover {
  color: var(--bs-warning);
}

.ftr_md .custom-whatsapp-button {
  font-size: 22px; /* Smaller font size for footer */
  padding: 7px 10px;
}

.ftr_md .clb_img_wrap {
  display: inline-block; /* To make it respect margin/padding better for flex */
  margin: 0 10px; /* Spacing between items */
}

.ftr_md .clb_img_wrap img {
  vertical-align: middle;
  margin-right: 5px;
}

.ftr_md .clb_img_wrap span {
  font-size: 0.9rem; /* Adjust font size */
  color: rgba(255, 255, 255, 0.75);
}

/* Live Users specific style */
.ftr_md #live-users {
  color: #ff8800; /* Orange color for live users count */
  font-size: xx-large; /* Large font size */
}

/* Responsive Adjustments */
@media (max-width: 1400px) {
  .md_banner .custom-banner-padding {
    padding-left: 50px;
  }
}

@media (max-width: 1200px) {
  /* Header Adjustments for medium screens */
  .md_header .tplogo {
    max-height: 60px; /* Slightly smaller logo */
  }

  .md_banner .md_banner_img {
    position: relative;
    right: 0;
    bottom: 0;
    width: 100%;
    text-align: center;
    margin-top: 30px;
  }
  .md_banner .custom-banner-padding {
    padding-left: 15px; /* Default Bootstrap container padding */
  }
  .md_banner {
    padding: 150px 0 50px; /* Adjust padding for smaller screens */
    min-height: auto;
  }

  .md_wheels .md_girl {
    position: relative;
    margin-top: 30px;
    right: auto;
    bottom: auto;
    display: block;
    width: 100%;
    text-align: center;
  }
  .md_wheels .custom-wheels-img {
    height: auto; /* Allow height to adjust naturally */
    text-align: center;
    margin-bottom: 30px;
  }
  .md_wheels .custom-bgwheel,
  .md_wheels .custom-bgwheel2,
  .md_wheels .custom-bgspin,
  .md_wheels .custom-bgtop {
    position: static; /* Remove absolute positioning */
    transform: none; /* Remove transforms */
    width: 80%; /* Adjust size for responsiveness */
    max-width: 500px;
    margin: 0 auto;
    display: block;
  }
  .md_wheels .custom-bgspin {
    animation: none; /* Disable animation for smaller screens if it causes issues */
  }

  .lb_celeb .custom-celeb-heading {
    font-size: 4rem; /* Adjust font size */
    text-align: center;
    margin-bottom: 30px;
  }
  .lb_celeb .owl-nav button {
    position: static;
    transform: none;
    margin: 10px;
  }
  .lb_celeb .owl-nav {
    justify-content: center;
    width: 100%;
  }

  .ftr_md .item {
    display: block;
    margin-bottom: 10px;
  }
}

@media (max-width: 991.98px) {
  /* Adjust from 992px for Bootstrap's lg breakpoint */
  .md_header .navbar-brand.d-lg-none {
    order: 1; /* Make logo appear first on mobile */
  }
  .md_header .custom-toggler {
    order: 2; /* Place toggler next to logo */
  }
  .md_header .navbar-collapse {
    order: 3; /* Collapsed menu appears last */
  }
  .md_header .navbar-nav {
    flex-direction: column; /* Stack nav items vertically */
    align-items: center; /* Center items in the collapsed menu */
  }
  .md_header .navbar-brand.d-lg-none {
    display: block !important; /* Show mobile logo */
  }
  .md_header .navbar-brand.mx-auto {
    margin-left: 0 !important; /* Align mobile brand to left */
  }
  .md_header .navbar-collapse.show {
    /* Styles for when the navbar is expanded */
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: #ffffff; /* Dark background for the mobile menu */
    padding: 20px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
    z-index: 1000; /* Ensure it's above other content */
    border-radius: 0 0 10px 10px;
  }

  .md_sites .custom-site-link {
    margin-right: 20px; /* Less margin on smaller screens */
  }
  .md_sites h2,
  .md_sites h3 {
    text-align: center;
  }
  .md_sites_logo {
    justify-content: center !important; /* Center logos */
  }

  .md_wheels .col-lg-6 {
    width: 100%;
  }

  .md_cs .col-lg-7,
  .md_cs .col-lg-4 {
    width: 100%;
  }

  .md_htp .col-lg-6 {
    width: 100%;
  }
  .md_htp .order-lg-2 {
    order: 2; /* Ensure content comes after image on smaller screens */
  }
  .md_htp .order-lg-1 {
    order: 1;
  }
}

@media (max-width: 767.98px) {
  /* Adjust from 768px for Bootstrap's md breakpoint */
  .md_banner .md_banner_con h1 {
    font-size: 2rem;
    line-height: 1.2;
  }
  .md_banner .md_banner_con h2,
  .md_banner .md_banner_con h5 {
    font-size: 1.5rem;
  }
  .md_banner .custom-whatsapp-button {
    font-size: 1.5rem;
    padding: 7px 15px;
  }

  .md_wheels .custom-wheels-content h2 {
    font-size: 2.5rem;
    line-height: 1.2;
  }
  .md_wheels .custom-wheels-content p {
    font-size: 1.25rem;
    line-height: 1.5;
  }
  .md_wheels .custom-whatsapp-button {
    font-size: 1.5rem;
    padding: 7px 15px;
  }

  .md_cs .custom-cs-content h2 {
    font-size: 2.5rem;
    line-height: 1.2;
  }
  .md_cs .custom-cs-content p {
    font-size: 1.25rem;
    line-height: 1.5;
  }
  .md_cs .custom-whatsapp-button {
    font-size: 1.5rem;
    padding: 7px 15px;
  }

  .md_htp .custom-htp-content h2,
  .md_htp .custom-htp-content h4 {
    font-size: 2.5rem;
    line-height: 1.2;
  }
  .md_htp .custom-htp-content p {
    font-size: 1.25rem;
    line-height: 1.5;
  }
  .md_htp .custom-whatsapp-button {
    font-size: 1.5rem;
    padding: 7px 15px;
  }

  .lb_celeb .custom-celeb-heading {
    font-size: 3rem;
    line-height: 1;
  }
}

@media (max-width: 575.98px) {
  /* Adjust from 576px for Bootstrap's sm breakpoint */
  .md_header .custom-whatsapp-button {
    font-size: 1.2rem;
    padding: 5px 10px;
  }

  .md_banner {
    padding: 100px 0 30px;
  }

  .md_sites .custom-site-link {
    margin-right: 0;
    width: 100%;
    text-align: center;
    margin-bottom: 10px;
  }

  .md_wheels .custom-wheels-content {
    text-align: center;
  }
  .md_cs .custom-cs-content {
    text-align: center;
  }
  .md_htp .custom-htp-content {
    text-align: center;
  }

  .ftr_md .ftr_blk {
    text-align: center !important; /* Center footer blocks on extra small screens */
  }
}

.section-bg {
  background-color: #060322; /* Dark background color similar to the image */
  /* You can add a subtle background image here if desired, similar to the original */
  /* background-image: url('https://placehold.co/1920x1080/1a1a1a/1a1a1a?text='); */
  background-size: cover;
  background-position: center;
}
/* Styling for the feature cards */
.feature-card {
  background-color: #ffffff;
  border-radius: 0.75rem; /* Equivalent to rounded-xl */
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); /* Equivalent to shadow-lg */
  transition: transform 0.3s ease-in-out;
}
.feature-card:hover {
  transform: translateY(-5px);
}
/* Styling for the icons within cards */
.feature-icon {
  color: #a90117; /* Primary color for icons */
  font-size: 3.5rem; /* Equivalent to text-5xl */
}
/* Custom button styles to match the original design */
.btn-outline-primary-custom {
  border: 2px solid #a90117;
  color: #a90117;
  background-color: transparent;
  transition: all 0.3s ease;
}
.btn-outline-primary-custom:hover {
  background-color: #a90117;
  color: white;
}
.btn-primary-custom {
  background-color: #a90117;
  color: white;
  transition: background-color 0.3s ease;
}
.btn-primary-custom:hover {
  background-color: #8b0112; /* Darker shade on hover */
}

/* Custom styles for social media buttons */
.social-button {
  display: flex;
  align-items: center;
  justify-content: center; /* Center content horizontally */
  padding: 0.75rem 1.5rem;
  border-radius: 9999px; /* Fully rounded */
  font-weight: bold;
  transition: all 0.3s ease-in-out; /* Smooth transition for all properties */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  text-decoration: none; /* Remove underline from links */
  color: white; /* Default text color */
  margin-bottom: 0.5rem; /* Space between buttons */
  width: 100%; /* Make buttons full width in smaller screens */
  max-width: 200px; /* Limit max width for larger screens */
}

.social-button:hover {
  transform: translateY(-3px); /* Slight lift effect */
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2); /* Enhanced shadow */
}

.social-button i {
  margin-right: 0.75rem; /* Space between icon and text */
}

/* Specific button colors */
.social-button.whatsapp {
  background-color: #25d366; /* WhatsApp Green */
}
.social-button.whatsapp:hover {
  background-color: #1da851;
}

.social-button.telegram {
  background-color: #0088cc; /* Telegram Blue */
}
.social-button.telegram:hover {
  background-color: #006aa7;
}

.social-button.instagram {
  background: linear-gradient(
    45deg,
    #f09433 0%,
    #e6683c 25%,
    #dc2743 50%,
    #cc2366 75%,
    #bc1888 100%
  ); /* Instagram Gradient */
}
.social-button.instagram:hover {
  filter: brightness(1.1); /* Slightly brighter on hover */
}