/* Minimal custom styles used alongside Tailwind */
:root{
  --brand-red: #e11d48;
}

.badge{display:inline-block;background:#10b981;color:#fff;padding:4px 8px;border-radius:4px;font-size:12px}
.badge.purple{background:#7c3aed}

/* small visual separators to mimic the template */
main section{margin-bottom:1.5rem}

/* Section heading with down arrow */
.section-heading::after {
  content: '';
  position: absolute;
  bottom: -12px;
  left: 40px;
  width: 0;
  height: 0;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-top: 12px solid #dc2626;
}
.section-blue-heading::after {
  content: '';
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-top: 12px solid #1e40af;
}

/* responsive tweaks for hero text overlay */
@media (min-width:1024px){
  .hero-right{height:100%}
}

/* Utility to slightly darken images when hovered in cards */
.card-img-hover img{transition:transform .3s ease, filter .3s ease}
.card-img-hover:hover img{transform:scale(1.03); filter:brightness(.9)}

/* Card hover effects */
.game-card {
  transition: all 0.3s ease;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.game-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 20px rgba(0, 0, 0, 0.2);
}

/* Hero card animations */
.hero-card {
  position: relative;
  overflow: hidden;
}

.hero-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
  transition: left 0.5s ease;
}

.hero-card:hover::before {
  left: 100%;
}

/* Section divider with gradient */
.section-divider {
  height: 2px;
  background: linear-gradient(90deg, transparent, #dc2626, transparent);
  margin: 2rem 0;
}

/* Button styling */
.btn-primary {
  background: linear-gradient(135deg, #dc2626, #991b1b);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.btn-primary:hover {
  transform: translateX(2px);
  box-shadow: 0 8px 16px rgba(220, 38, 38, 0.3);
}

/* Text gradient effect */
.text-gradient {
  background: linear-gradient(135deg, #dc2626, #fbbf24);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

#bannerCarousel .owl-dots {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}
#newsCarousel .p-4{
min-height:88px;
}
.sliderPanel{
    min-height: 450px; 
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
}
.latestNewSubPanel{
    background:'red';
}
.detailContent{
    line-height:2;
}
.detailContent p {
    font-size: 22px;
    margin-bottom: 12px;
}
.detailContent h1{
    font-size: 32px;
    font-weight: bold;
    margin-bottom: 12px;
}
.detailContent h2{
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 12px;
}
.detailContent h3{
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 12px;
}
.detailContent h4{
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 12px;
}
.detailContent h5{
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 12px;
}

.commingSoon{
  background: url('../images/bg.jfif') no-repeat center center;
  background-size: cover;
  height: calc(100vh - 80px);
  display: flex;
  justify-content: center;
  align-items: center;
}

@media (max-width:768px){
 .signleCol {
     display:flex !important;
}
.signleColImg{
    flex:0 0 140px;
    max-width:140px;
}
.signleColContent{
     flex:0 0 calc(100% - 140px);
    max-width:calc(100% - 140px);
}
.commingSoon{
    background-size:contain;
}
}