<?php
include("dbrow.php");
?>
/* Reset and base */
* { box-sizing: border-box; }
.page-body { background: black; margin: 0; font-family: sans-serif; color: white; }
.site-container { max-width: 1200px; margin: 0 auto; padding: 16px; }

/* Hero / top section */
.flex-container {
  display: flex;
  flex-wrap: wrap;

  background-blend-mode: darken;
  margin-bottom: 20px;
  padding: 12px;
}

.flex-item1, .flex-item2 {
  text-align: center;
  font-size: 30px;
  flex: 1 1 40%;
  margin: 10px;
  padding: 10px;
    animation: floatCard 3s ease-in-out infinite, glow 3s ease-in-out infinite;
}

.logo-img { vertical-align: middle; display: inline-block; width: 49%; max-width: 220px; }
.main-img { width: 100%; max-width: 420px; display: block; margin: 0 auto; }

/* Headings */
.headline-small { font-size: 20px; color: white; margin: 8px 0; }
.headline-large { font-size: 53px; color: white; text-shadow: -3px 0px 14px yellow; margin: 8px 0; }
.headline-sub { font-size: 18px; line-height: 1.6; color: lightcyan; margin: 8px 0 16px; }

/* Buttons */
.btn { cursor: pointer; border-radius: 12px; padding: 12px 24px; font-size: 16px; border: none; }
.btn-primary {
  background-color: #04AA6D;
  color: #fff;
  transition: box-shadow .25s, transform .15s;
}
.btn-primary:hover { box-shadow: 0 8px 16px rgba(0,0,0,0.6); transform: translateY(-2px); }

/* Social icons */
.social-icons .fa {
  padding: 12px;
  font-size: 20px;
  width: 36px;
  text-align: center;
  margin: 6px 4px;
  border-radius: 50%;
  color: #fff;
}
.social-icons .fa:hover { opacity: 0.8; }

/* About section */
.about {
  display: flex;
  flex-wrap: wrap;
 
  background-blend-mode: darken;
  padding: 18px;
  gap: 12px;
}
.about-image, .about-text { flex: 1 1 45%; text-align: center; padding: 8px; }
.about-main-img { width: 100%; max-width: 420px; display: block; margin: 0 auto;  animation: floatCard 3s ease-in-out infinite, glow 3s ease-in-out infinite; }
.about-heading { text-align: center; color: lightyellow; margin: 8px 0; }
.about-sub { color: cyan; margin: 8px 0; }
.lead { color: wheat; font-weight: 600; }

/* Reusable paragraph */
.para { font-size: 18px; color: #fff; margin: 8px 0; }
.highlight { color: yellow; }

/* Features */
.section-title { text-align: center; color: #fff; margin: 18px 0; }
.why {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  flex-wrap: wrap;
background-blend-mode: darken;
  padding: 12px;
  gap: 12px;
}
.choose {
    border:<?php echo $whys['cardborder'];?>;
    width:250px;
  text-align: center;
  padding: 12px;
  justify-content: center;
  margin: 10px;
  border-radius: 12px;
  background: rgba(255,255,255,0.02);
  transition: transform .15s, box-shadow .15s, background .15s;
    animation: floatCard 3s ease-in-out infinite, glow 3s ease-in-out infinite;
}
.choose img { width: 100%; height: 100%; object-fit: cover; display: block; }
.choose:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
  background: <?php echo $whys['cardhover']?>;
}

/* Games grid */
.bet {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;

  background-blend-mode: darken;
  padding: 12px;
  gap: 12px;
}
.game {
  position: relative;
  text-align: center;
  color: white;
  padding: 10px;
  width: 250px;
  height: 400px;
  margin: 10px;
  border-radius: 12px;
  overflow: hidden;
    animation: floatCard 3s ease-in-out infinite, glow 3s ease-in-out infinite;
}
.game img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Centered overlay */
.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}
.support
/* Support gallery */
.whats {
    display: flex;
  justify-content:center;
  align-items: center;
  flex-wrap: wrap;
 
  background-blend-mode: darken;
  padding: 12px;
  gap: 12px;
}
.screen { width: 250px; padding: 10px;    animation: floatCard 3s ease-in-out infinite, glow 3s ease-in-out infinite; border-radius:<?php echo $supports['supportcardradius'];?>;}
.screen img { width: 100%; display: block;border-radius:<?php echo $supports['supportcardradius']; ?>;}

/* Footer card */
.footer-card {
  color: white;
  text-align: center;
  margin: 16px;
  border: 1px solid white;
  border-radius: 20px;
  padding: 18px;
}
.support-number { font-size: 28px; font-weight: 700; }
.testimonial{
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
text-align: center; font-family: sans-serif;}

 .testimonial-card{ width: 250px; height:auto; margin: 10px; border: <?php echo $reviews['reviewscardboreder'];?>; border-radius: 12px;
     animation: floatCard 3s ease-in-out infinite, glow 3s ease-in-out infinite;
 }
 .testimonial-card img {width: 100%; border-radius: <?php echo $reviews['reviewimageradius'];?>; padding: 10px;}

.secure-div{ align-items:center; justify-content:center; }

     /* Floating animation */
    @keyframes floatCard {
      0%, 100% {
        transform: translateY(0);
      }
      50% {
        transform: translateY(-15px);
      }
    }

    /* Glow animation */
    @keyframes glow {
      0%, 100% {
        box-shadow: 0 8px 20px rgba(0,0,0,0.2);
      }
      50% {
        box-shadow: 0 12px 25px rgba(255,255,255,0.6);
      }
    }
    
        .secure-div{align-items: center; justify-content: border: 1px solid red;}
/* Responsive */
@media (max-width: 768px) {
  .flex-container { flex-direction: column; }
  .about { flex-direction: column-reverse; }
  .why { flex-direction: column; }
  .bet { flex-direction: column; }
  .whats { flex-direction: column; }
  .game { width: 100%; height: auto; }
  .screen { width: 100%; }
  .testimonial{ flex-direction: column; }
}