/* ========= BASE ========= */

:root{

  --navy: #040940;

  --accent: #3b82f6;

  --blue-deep: #0545FF;

  --light: #ffffff;

  --muted: #6b7280;

  --container: 1200px;

  --inter: "Inter", sans-serif;

}

*{box-sizing:border-box}

html,body{height:100%;margin:0;font-family:var(--inter);color:#0b1730;background:#fff}

.container{max-width:var(--container);margin:0 auto;padding:0 24px}





/* for the active header */

.nav-link.active {

  color: #2563eb;

 

  font-weight: 600;

}



.nav-link.active::after {

  width: 100%;

}





/* ========= HEADER ========= */

.site-header {

  background: var(--navy);

  color: #fff;

  position: sticky;

  top: 0;

  z-index: 60;

  box-shadow: 0 3px 10px rgba(2, 6, 23, 0.6);

}



/* Flex alignment */

.header-inner {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 10px 0; /* Reduced padding to control height */

  height: 70px;    /* Fixed header height */

}



/* Only the logo image */

.logo {

  display: flex;

  align-items: center;

  justify-content: center;

  height: 100%;

}



/* Keeps logo large internally but visually fits */

.logo-img {

   height: 50px;          /* fits inside header */

  width: auto;

  object-fit: contain;

  margin-left: 30px;

  margin-top: -10px;

  transform: scale(1.0); /* visually enlarge the logo */

  transform-origin: center; /* ensures scaling happens symmetrically */

  transition: transform 0.3s ease, filter 0.3s ease;

}



/* Hover animation */

.logo-img:hover {

  transform: scale(1.2);

  filter: brightness(1.2);

}



/* Navigation */

.nav {

  display: flex;

  gap: 24px;

}



.nav-link {

  color: #cbd5e1;

  text-decoration: none;

  position: relative;

  padding: 6px 2px;

  font-weight: 600;

  transition: color 0.25s ease;

}



.nav-link:hover {

  color: var(--accent);

}



.nav-link::after {

  content: "";

  position: absolute;

  left: 0;

  bottom: -6px;

  width: 0;

  height: 3px;

  background: var(--accent);

  transition: width 0.28s ease;

}



.nav-link:hover::after {

  width: 100%;

}



.nav-link.active {

  color: var(--accent);

}





/* ========= HERO VIDEO BACKGROUND ========= */

.hero-banner {

  position: relative;

  min-height: 550px; /* Adjust height as needed */

  height: 80vh;      /* Makes it look more premium */

  overflow: hidden;

  background: #000;

}



.video-background {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  pointer-events: none;

  overflow: hidden;

  z-index: -1; /* Keeps it behind your text */

}



/* DESKTOP: Standard Full Screen Background */

.video-background iframe {

  width: 100vw;

  height: 56.25vw; 

  min-height: 100vh;

  min-width: 177.77vh; 

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%) scale(1.3); /* Desktop Zoom */

}



/* TABLET & MOBILE: The "Vertical Window" Player */

@media (max-width: 768px) {

  .video-background {

    position: relative; 

    width: 260px !important;   

    height: 350px !important;  

    margin: 20px auto;  

    border-radius: 20px;

     border: none !important; 

   box-shadow: 0 15px 35px rgba(0,0,0,0.6);

    z-index: 5;         

}



  .video-background iframe {

    width: 100%;

    height: 100%;

    min-width: auto;

    min-height: auto;

    position: relative;

    top: 0;

    left: 0;

    transform: scale(0.9); /* Aggressive zoom to hide logo in the small window */

    transform-origin: center;

  }

}







/* Dark overlay so text stays readable */

.hero-banner::after {

  content: "";

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: rgba(0, 0, 0, 0.4); /* Darkens the video */

  z-index: 1;

}



.hero-content {

  position: relative;

  z-index: 2;

  color: white;

  text-align: center;

  top: 40%;

}



/* Overlay container (text area) */

/* Container Positioning */

.hero-overlay-content {

  position: absolute;

  bottom: 80px; /* Slightly higher for better visual balance */

  left: 0;

  width: 100%;

  z-index: 10;

  padding: 0 5%;

}



/* Button row spacing */

.hero-cta-row {

  display: flex;

  gap: 20px;

  align-items: center;

  margin-bottom: -80px;



}



/* Base Button Styling */

.btn {

  display: inline-block;

  padding: 16px 32px;

  border-radius: 50px; /* Rounded pill shape looks more modern/sporty */

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 1px;

  font-size: 14px;

  cursor: pointer;

  text-decoration: none;

  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);

  position: relative;

  overflow: hidden;

}



/* Primary Button: "Plan Your Event" */

.btn-primary {

  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);

  color: #fff;

  border: none;

  box-shadow: 0 10px 30px rgba(37, 99, 235, 0.3);

}



.btn-primary:hover {

  transform: translateY(-5px);

  box-shadow: 0 20px 40px rgba(37, 99, 235, 0.5);

  filter: brightness(1.1);

}



/* Outline Button: "Explore Our Store" */

.btn-outline {

  background: rgba(255, 255, 255, 0.05); /* Very transparent white */

  border: 2px solid rgba(255, 255, 255, 0.3);

  color: #fff;

  backdrop-filter: blur(12px); /* Deep glass blur effect */

  -webkit-backdrop-filter: blur(12px);

}



.btn-outline:hover {

  background: #fff;

  color: #060b50; /* Switches to your navy blue on hover */

  border-color: #fff;

  transform: translateY(-5px);

  box-shadow: 0 15px 30px rgba(255, 255, 255, 0.2);

}



/* Stats Row: Modern Glass Style */

.stats-row {

  display: flex;

  gap: 24px;

}



.stat {

  background: rgba(11, 13, 41, 0.4); /* Subtle navy tint */

  backdrop-filter: blur(10px);

  padding: 15px 25px;

  border-radius: 15px;

  border: 1px solid rgba(255, 255, 255, 0.1);

  transition: border 0.3s ease;

}



.stat:hover {

  border: 1px solid rgba(59, 130, 246, 0.5);

}



.stat strong {

  display: block;

  font-size: 22px;

  color: #fff;

  font-weight: 800;

}



.stat span {

  font-size: 11px;

  color: #cbd5e1;

  text-transform: uppercase;

  letter-spacing: 2px;

  font-weight: 600;

}

/* dark overlay to match design */

/* .hero-overlay::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(2,6,23,0.45),rgba(2,6,23,0.6));z-index:0}

.hero-inner{position:relative;z-index:1} */



/* -----------------------

   ABOUT SECTION — Sandwich Layout

   ----------------------- */

.about-section {

  background: #fff;

  padding: 100px 0;

  font-family: 'Inter', sans-serif;

}



/* Header & Underline Fix */

.Aboutsection-title-center {

  text-align: center;

  margin-bottom: 60px;

}

.Aboutsection-title-center h2 {

  font-size: 36px;

  color: #060b50;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 2px;

  margin-bottom: 15px;

}

.underline-wrap {

  position: relative;

  display: flex;

  justify-content: center;

  align-items: center;

  height: 4px;

  margin-right: 154px;

}

.underline-grey {

  width: 140px;

  height: 4px;

  background: #e2e8f0;

  border-radius: 10px;

  position: absolute;

}

.underline-blue {

  width: 60px;

  height: 4px;

  margin-left: 50px;

  background: linear-gradient(90deg, #3b82f6, #0545FF);

  border-radius: 10px;

  position: absolute;

  z-index: 2;

}



/* Layout Flow */

.about-content-flow {

  max-width: 1000px;

  margin: 0 auto;

  padding: 0 20px;

}



/* Paragraph with Blue Side Line */

.about-main-paragraph {

  font-size: 21px;

  line-height: 1.8;

  color: #07398a;

  font-weight: 500;

  margin-bottom: 40px;

  border-left: 6px solid #3b82f6;

  padding-left: 25px;

  text-align: justify;

}



/* Image section - Constrained height & Hover */

.about-image-mid {

  display: flex;

  justify-content: center;

  margin-bottom: 40px;

}

.image-stack {

  position: relative;

  width: 100%;

  max-width: 850px;

  transition: transform 0.5s ease;

}

.main-about-img {

  width: 100%;

  height: 400px; /* Forced Height to make it smaller */

  object-fit: cover; /* Prevents stretching */

  border-radius: 25px;

  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);

  position: relative;

  z-index: 2;

  transition: transform 0.5s ease;

}

.image-decoration-frame {

  position: absolute;

  top: 15px;

  left: 15px;

  right: -15px;

  bottom: -15px;

  border: 3px solid rgba(59, 130, 246, 0.2);

  border-radius: 25px;

  z-index: 1;

}



/* Hover Effect */

.image-stack:hover .main-about-img {

  transform: scale(1.02);

}



/* Lower Paragraphs */

.about-secondary-paragraph {

  font-size: 18px;

  line-height: 1.8;

  color: #64748b;

  margin-bottom: 25px;

  text-align: justify;

}



/* Responsive Fix */

@media (max-width: 768px) {

  .about-main-paragraph {

    font-size: 19px;

    padding-left: 15px;

    text-align: left;

  }

  .main-about-img {

    height: 300px; /* Even smaller for mobile */

  }

  .about-secondary-paragraph {

    font-size: 16px;

    text-align: left;

  }

  .image-decoration-frame {

    display: none;

  }

}



/* ========= WHY CHOOSE US: GLASSMORPHISM VERSION ========= */

.whychoose-section {

  position: relative;

  padding: 100px 0;

  /* Replace with a high-quality sports/stadium image */

  background: linear-gradient(rgba(6, 11, 80, 0.85), rgba(6, 11, 80, 0.85)), 

              url('../images/cricket-match-with-player.jpg') no-repeat center center;

  background-size: cover;

  background-attachment: fixed; /* Parallax effect */

  overflow: hidden;

}



.underline-orange {

  position: absolute;

  left: 50%;

  margin-left:80px;

  transform: translateX(-50%);

  bottom: 0;

  width: 60px;

  height: 4px;

  background: linear-gradient(90deg, #f97316, #ea580c);

  border-radius: 10px;

}



.text-white {

  color: #ffffff !important;

}



/* Glass Grid Layout */

.glass-stats-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 30px;

  margin-top: 50px;

}



/* The Glass Card */

.glass-card {

  background: rgba(255, 255, 255, 0.05);

  backdrop-filter: blur(15px);

  -webkit-backdrop-filter: blur(15px);

  border: 1px solid rgba(255, 255, 255, 0.1);

  padding: 40px 30px;

  border-radius: 24px;

  text-align: center;

  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);

}



.glass-card:hover {

  transform: translateY(-15px);

  background: rgba(255, 255, 255, 0.1);

  border-color: rgba(59, 130, 246, 0.5);

  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);

}



/* Icon Style */

.glass-icon {

  width: 60px;

  height: 60px;

  background: linear-gradient(135deg, #3b82f6, #2563eb);

  color: white;

  border-radius: 15px;

  display: flex;

  align-items: center;

  justify-content: center;

  margin: 0 auto 20px;

  box-shadow: 0 10px 20px rgba(37, 99, 235, 0.3);

}



.glass-icon span {

  font-size: 32px;

}



/* Number Text */

.glass-content h3 {

  font-size: 48px;

  font-weight: 800;

  color: #ffffff;

  margin-bottom: 5px;

  letter-spacing: -1px;

}



.glass-content p {

  font-size: 16px;

  color: #cbd5e1;

  font-weight: 500;

  text-transform: uppercase;

  letter-spacing: 1px;

}



/* Underline Fix for Dark Background */

.whychoose-section .underline-grey {

  background: rgba(255, 255, 255, 0.2);

}



/* Responsive */

@media (max-width: 992px) {

  .glass-stats-grid {

    grid-template-columns: 1fr; /* Stack on mobile */

    gap: 20px;

  }

}



/* ===== CORE SERVICES (Flip Cards) ===== */

.core-section {

  background: #fff;

  padding: 80px 0;

}



.core-inner {

  max-width: 1100px;

  margin: 0 auto;

}



.center {

  text-align: center;

}



.section-title {

  font-size: 32px;

  font-weight: 600;

  text-transform: uppercase;

  color: #111827;

  margin-bottom: 6px;

}



.underline-grey {

  display: block;

  width: 205px;

  height: 3px;

  background:#a3a2a2;

  margin: 0 auto;

  border-radius: 2px;

}



.title-underline.small-blue {

  position: relative;

  top: -2.5px;

  width: 60px;

  height: 3px;

  background: #2563eb;

  margin: 0 auto 30px;

  border-radius: 6px;

  

}



.core-grid {

  display: flex;

  gap: 24px;

  justify-content: space-between;

  flex-wrap: wrap;

}



/* Flip Card Structure */

.flip-card {

  width: calc(33.333% - 16px);

  perspective: 1000px;

}



.flip-card-inner {

  position: relative;

  width: 100%;

  height: 300px;

  transform-style: preserve-3d;

  transition: transform 0.8s cubic-bezier(.2,.8,.2,1);

}



.flip-card:hover .flip-card-inner {

  transform: rotateY(180deg);

}



.card-front,

.card-back {

  position: absolute;

  inset: 0;

  border-radius: 12px;

  backface-visibility: hidden;

  overflow: hidden;

  box-shadow: 0 6px 20px rgba(0,0,0,0.05);

}



/* FRONT SIDE */

.card-front {

  background: #fff;

  text-align: center;

  padding: 30px 18px;

  display: flex;

  flex-direction: column;

  justify-content: center;

}



.card-front .icon {

  font-size: 42px;

  color: #2563eb;

  margin-bottom: 10px;

}



.card-front h4 {

  color: #01305c;

  font-weight: 700;

  margin-bottom: 10px;

}



.card-front p {

  color: #606060;

  font-size: 14px;

  line-height: 1.5;

}



.card-front small {

  display: block;

  margin-top: 10px;

  font-size: 12px;

  color: #d4d3d3;

}



/* BACK SIDE */

.card-back {

  background: linear-gradient(180deg, #071a3f 0%, #0a2c6d 100%);

  transform: rotateY(180deg);

  display: flex;

  width: 100%;

    height: 100%;

  align-items: center;

  justify-content: center;

  position: relative;

}



.card-back img {

  position: absolute;

  top: 50%;

  left: 40px;

  width: 80%;

  height: auto;

  transform: translateY(-50%);

  object-fit: cover;

  border-radius: 10px;

  z-index: 2;

  box-shadow: 0 8px 20px rgba(0,0,0,0.25);

}





/* Decorative lines on back */

.card-back::before,

.card-back::after {

  content: "";

  position: absolute;

  background: rgba(255,255,255,0.05);

}



.card-back::before {

  top: 20%;

  left: -10%;

  width: 140%;

  height: 2px;

  transform: skewX(-20deg);

}



.card-back::after {

  right: -40px;

  bottom: 25%;

  width: 100px;

  height: 100px;

  border: 2px solid rgba(255,255,255,0.08);

  border-radius: 10px;

}



/* Responsive */

@media (max-width: 900px) {

  .core-grid {

    flex-direction: column;

    align-items: center;

  }



  .flip-card {

    width: 80%;

  }

}





/* ================================================= PARTNERS LOGO SLIDER=================================================== */

.partners-section {

  padding: 100px 0;

  background: #020024;

background: radial-gradient(circle, rgba(2, 0, 36, 1) 0%, rgba(9, 9, 121, 1) 65%, rgba(74, 146, 240, 1) 100%);

  overflow: hidden;

}





.section-title-center {

  text-align: center;

  margin-bottom: 50px; /* Reduced to pull content up */

  margin-top: -20px;    /* Pulls the entire section title upwards */

}



.section-title-center h2 {

  font-size: 34px;      /* Slightly larger for impact */

  text-transform: uppercase;

  color: #fff;

  font-weight: 800;     /* Extra bold for professional look */

  letter-spacing: 2px;  /* Premium spaced-out look */

  margin-bottom: 8px;

}



/* Ensure the underline stays centered and stylish */

.underline-wrap {

  position: relative;

  display: inline-block;

  vertical-align: top;

}



.underline-grey {

  display: block;

  width: 160px;

  height: 4px;

  background: #f1f5f9;

  border-radius: 10px;

}



.underline-orange {

  position: absolute;

  left: 50%;

  transform: translateX(-50%);

  bottom: 0;

  width: 70px;

  height: 4px;

  background: linear-gradient(90deg, #f97316, #ea580c);

  border-radius: 10px;

  box-shadow: 0 2px 10px rgba(249, 115, 22, 0.2);

}



.logo-slider {

  margin-top: 60px;

  position: relative;

  width: 100%;

  /* Edge shadows to make it look like the logos are appearing from light */

  mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);

  -webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);

}



.logo-track {

  display: flex;

  /* Width must be: (Item Width * Total Logos in Set 1 + Set 2) */

  width: calc(220px * 28); 

  animation: scrollContinuous 35s linear infinite;

  align-items: center;

}



.logo-item {

  width: 220px;

  padding: 0 40px;

  flex-shrink: 0;

  display: flex;

  align-items: center;

  justify-content: center;

}



.logo-item img {

  width: 100%;

  max-width: 250px;

  height: auto;

  max-height: 125px;

  object-fit: contain;

  /* Soft entry state */

  opacity: 0.85;

  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);

}



/* Captivating Hover Effect */

.logo-item img:hover {

  opacity: 1;

  transform: scale(1.15) translateY(-5px);

  /* Subtile glow effect using the logo's presence */

  filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.1));

}



@keyframes scrollContinuous {

  0% { transform: translateX(0); }

  100% { transform: translateX(calc(-220px * 14)); } /* Halfway point (end of Set 1) */

}



/* Stop slider on hover so users can click or view clearly */

.logo-track:hover {

  animation-play-state: paused;

}



/* Responsive Fixes */

@media (max-width: 768px) {

  .logo-item { width: 160px; padding: 0 20px; }

  .logo-track { width: calc(160px * 28); }

  @keyframes scrollContinuous {

    100% { transform: translateX(calc(-160px * 14)); }

  }

}



/* =========================================== FOOTER ============================================================================================ */

.site-footer{background:var(--navy);color:#fff;padding:36px 0 18px}

.footer-inner{display:flex;justify-content:space-between;gap:20px;align-items:flex-start}

.footer-left{max-width:620px}

.footer-logo{font-weight:700;color:#fff;margin-bottom:6px}

.footer-cta{font-size:30px;margin:1 0 8px}

.footer-desc{color:#cbd5e1;margin:0 0 12px}

.contact-row{display:flex;align-items:center;gap:10px;margin-top:10px}

.contact-icon{width:40px;height:40px;border-radius:10px;background:rgba(255,255,255,0.04);display:flex;align-items:center;justify-content:center}

.contact-link{color:#9ac4ff;text-decoration:none}

.footer-right{display:flex;align-items:center}





/* for the footer logo image */

.logofooterimg {

  height: 60px;

  width: auto;

  object-fit: contain;

  margin-bottom: 12px;

}



/* Contact Us Button — Enhanced Style */

.contact-us-btn {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  background: #2c75ff;

  color: #fff;

  text-decoration: none; /* remove underline */

  border: none;

  padding: 12px 28px;

  border-radius: 30px;

  font-size: 16px;

  font-weight: 600;

  gap: 8px;

  cursor: pointer;

  transition: all 0.3s ease;

}





/* Subtle glowing border animation */

.contact-us-btn::before {

  content: "";

  position: absolute;

  inset: 0;

  border-radius: 12px;

  background: linear-gradient(120deg, #4f9eff, #1d4ed8, #60a5fa);

  z-index: 0;

  opacity: 0;

  transition: opacity 0.4s ease;

}



.contact-us-btn span {

  position: relative;

  z-index: 1;

}



/* Arrow styling */

.contact-us-arrow {

  display: inline-block;

  opacity: 0;

  transform: translateX(-8px);

  transition: all 0.3s ease;

}



/* Hover effects */

.contact-us-btn:hover::before {

  opacity: 1;

  animation: glowMove 2.8s linear infinite;

}



.contact-us-btn:hover {

  color: #fff;

  transform: translateY(-3px) scale(1.03);

  box-shadow: 0 0 12px rgba(66, 153, 255, 0.4);

}



.contact-us-btn:hover .contact-us-text {

  transform: scale(0.96);

}



.contact-us-btn:hover .contact-us-arrow {

  opacity: 1;

  transform: translateX(3px);

}



/* Button glow movement */

@keyframes glowMove {

  0% { background-position: 0% 50%; }

  50% { background-position: 100% 50%; }

  100% { background-position: 0% 50%; }

}



/* Gentle pulse when idle to draw attention */

@keyframes pulseEffect {

  0%, 100% { box-shadow: 0 0 0 rgba(66,153,255,0.0); }

  50% { box-shadow: 0 0 12px rgba(66,153,255,0.35); }

}



.contact-us-btn {

  animation: pulseEffect 3.5s infinite ease-in-out;

}



/* footer bottom */

.footer-bottom{text-align:center;color:rgba(255,255,255,0.4);padding-top:18px;font-size:13px}



/* responsive */

@media (max-width:980px){

  .hero-inner{flex-direction:column;gap:18px;padding:36px}

  .hero-right{order:2}

  .about-inner{flex-direction:column}

  .services-inner{flex-direction:column}

  .core-grid{flex-direction:column}

  .flip-card{width:100%}

  .about-right{width:100%}

}



/* small utilities */

.muted{opacity:.7}





/* Default state  for scrollin animation */

[data-animate] {

  opacity: 0;

  transform: translateY(40px);

  transition: opacity 0.8s ease, transform 0.8s ease;

}



/* When active */

[data-animate].active {

  opacity: 1;

  transform: translateY(0);

}



/* Optional directional variants */

[data-animate="fade-left"] { transform: translateX(-60px); }

[data-animate="fade-right"] { transform: translateX(60px); }

[data-animate="fade-left"].active,

[data-animate="fade-right"].active {

  transform: translateX(0);

}



/* =========================================== 

   NEW RESPONSIVE FOOTER FIX

   =========================================== */

@media (max-width: 768px) {

    .footer-inner {

        flex-direction: column !important;

        text-align: center !important;

        gap: 40px !important;

        padding: 0 20px;

    }



    .footer-left {

        max-width: 100% !important;

    }



    .logofooterimg {

        margin: 0 auto 20px !important;

    }



    /* Keep contact items left-aligned to each other, but centered as a group */

    .footer-contact-block {

        display: inline-flex !important;

        text-align: left !important;

        margin: 0 auto !important;

    }



    .contact-row {

        justify-content: flex-start !important;

    }



    .footer-right {

        width: 100% !important;

        justify-content: center !important;

    }



    .contact-us-btn {

        width: 100% !important;

        max-width: 300px;

    }

}



/* Original scroll animation utilities */

[data-animate] {

    opacity: 0;

    transform: translateY(40px);

    transition: opacity 0.8s ease, transform 0.8s ease;

}



[data-animate].active {

    opacity: 1;

    transform: translateY(0);

}





/* ================== SPORTS EVENTS PAGE ================== */



/* 1. Video Banner Container */

.banner.sports-hero {

  position: relative;

  min-height: 550px; 

  height: 80vh; 

  width: 100%;

  overflow: hidden;

  background: #000;

  display: flex;

  align-items: center;

  justify-content: center;

}



/* 2. Video Background Logic */

.video-background {

  position: absolute;

  top: 50%;

  left: 50%;

  width: 100vw;

  height: 56.25vw; /* 16:9 Aspect Ratio */

  min-height: 100vh;

  min-width: 177.77vh; 

  box-shadow: 0 15px 35px rgba(0,0,0,0.6);

  transform: translate(-50%, -50%) scale(1.1); /* Slight zoom to hide edges */

  pointer-events: none;

  z-index: 0;

}



.video-background iframe {

  width: 100%;

  height: 100%;

  border: none;

}



.video-overlay {

  position: absolute;

  inset: 0;

  background: linear-gradient(180deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.6) 100%);

  z-index: 1;

}



/* =========================================== 

   RESPONSIVE MOBILE FIX (Vertical Window Style)

   =========================================== */

@media (max-width: 768px) {

  .banner.sports-hero {

    height: 80vh !important;

    min-height: 80vh !important;

    padding: 40px 0;

    background: #040940; /* Match your brand navy */

  }



  /* Creates the "Window" effect from your screenshots */

  .sports-hero .video-background {

    position: relative !important;

    top: 0 !important;

    left: 0 !important;

    transform: none !important;

    width: 260px !important;   /* Narrow vertical window */

    height: 350px !important;  /* Shorter height as requested */

    margin: 0 auto !important;

    border-radius: 20px;

    border: none !important; 

    box-shadow: 0 15px 35px rgba(0,0,0,0.6);

    z-index: 5 !important;

    overflow: hidden !important;

  }



  /* Zooms the video to fill the vertical box and remove black bars */

  .sports-hero .video-background iframe {

     width: 550% !important; 

    height: 100% !important;

    position: absolute !important;

    left: 50% !important;

    top: 50% !important;

    transform: translate(-50%, -50%) scale(1) !important;

  }



  .video-overlay {

    display: none !important; /* Keeps the portrait window bright */

  }

}

/* =========================================

   SPECIALTIES SECTION - BLUE ELITE DESIGN

========================================= */

.specialties-section {

  padding: 100px 0;

  background: #f4f7ff; 

  position: relative;

}



/* Title Styling */

.specialties-section-title-center {

  text-align: center;

  margin-bottom: 50px;

}



.specialties-section-title-center h2 {

  font-size: 32px;

  /* Bold Black as requested */

  color: #000000; 

  font-weight: 600;

  text-transform: uppercase;

  letter-spacing: 2px;

  margin-bottom: 10px;

}



/* Grid Configuration */

.sports-specialties-grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

  gap: 30px;

  max-width: 1200px;

  margin: 0 auto;

}



/* Specialty Card Design */

.specialty-box {

  background: #ffffff;

  padding: 50px 35px;

  border-radius: 20px;

  position: relative;

  overflow: hidden;

  border: 1px solid rgba(5, 66, 179, 0.1);

  box-shadow: 0 10px 30px rgba(5, 66, 179, 0.08);

  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);

  display: flex;

  flex-direction: column;

  justify-content: flex-start;

  z-index: 1;

}



/* Hover State: Blue Type Effect & Blue Glow */

.specialty-box:hover {

  transform: translateY(-12px);

  box-shadow: 0 20px 40px rgba(5, 66, 179, 0.3);

  border-color: #0542b3;

}



/* Decorative Background "Electric Blue" Glow */

.specialty-box::after {

  content: "";

  position: absolute;

  bottom: -40px;

  right: -40px;

  width: 120px;

  height: 120px;

  /* Using a more vibrant blue (Royal Blue) with higher opacity */

  background: radial-gradient(circle, rgba(0, 102, 255, 0.4) 0%, rgba(0, 102, 255, 0) 70%);

  border-radius: 50%;

  z-index: 0; /* Changed to 0 so it stays behind text but stays visible */

  transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);

  pointer-events: none;

}



.specialty-box:hover::after {

  transform: scale(4);

  /* Intense Glow on hover */

  background: radial-gradient(circle, rgba(0, 102, 255, 0.6) 0%, rgba(0, 102, 255, 0) 60%);

  /* Adding a blend mode makes the blue look "neon" against the white card */

  mix-blend-mode: multiply; 

}



/* Icon / Numbering (01, 02...) */

.spec-icon {

  width: 55px;

  height: 55px;

  background: #0542b3;

  color: #ffffff;

  border-radius: 12px;

  display: flex;

  align-items: center;

  justify-content: center;

  font-weight: 800;

  font-size: 20px;

  margin-bottom: 25px;

  /* Blue Shadow for the icon */

  box-shadow: 0 8px 15px rgba(5, 66, 179, 0.3);

  transition: all 0.3s ease;

}



.specialty-box:hover .spec-icon {

  background: #000000;

  transform: scale(1.1) rotate(-5deg);

  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);

}



/* Text Styling */

.specialty-box p {

  font-size: 18px;

  line-height: 1.6;

  color: #1e293b;

  font-weight: 600;

  margin: 0;

  transition: color 0.3s ease;

}



.specialty-box:hover p {

  color: #0542b3; 

}



/* Responsive Scaling */

@media (max-width: 768px) {

  .specialties-section { padding: 60px 0; }

  .sports-specialties-grid { grid-template-columns: 1fr; padding: 0 20px; }

}





/* ========= SPORTS WE MANAGE ========= */

.sports-manage-section {

  background: #fff;

  padding: 80px 0;

  text-align: center;

}



.sports-manage-title {

  font-size: 32px;

  font-weight: 600;

  position: relative;

  text-transform: uppercase;

  display: inline-block;

  margin-bottom: 50px;

  top: -50px;

  left: 160px;

  color: #000;

  align-items: center;

}



/* blue line under title */

/* ===== Underline under section title ===== */

.sports-manage-underline-wrap {

  position: relative;

  display: inline-block;

  top: 40px;

  right: 180px;

  margin: -40px auto 60px;

  height: 5px;

}



.sports-manage-underline-grey {

  display: block;

  width: 300px;

  height: 3px;

  background: rgba(128, 128, 128, 0.4);

  border-radius: 10px;

  margin: 0 auto;

}



.sports-manage-underline-blue {

  display: block;

  width: 150px;

  height: 3px;

  background: #2c75ff;

  border-radius: 10px;

  margin: -3px auto 0;

  position: relative;

  top: 0px;

  z-index: 2;

}





.sports-manage-grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));

  gap: 28px;

  justify-items: center;

  align-items: start;

}



.sports-card {

  background: #fff;

  border-radius: 12px;

  overflow: hidden;

  width: 230px;

  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.12);

  transition: transform 0.35s ease, box-shadow 0.35s ease;

}



.sports-card img {

  width: 100%;

  height: 200px;

  object-fit: cover;

  filter: grayscale(100%);

  transition: filter 0.4s ease, transform 0.4s ease;

}



.sports-card p {

  margin: 10px 0 14px;

  font-weight: 600;

  color: #111827;

  font-family: "Inter", sans-serif;

}



/* Hover effects */

.sports-card:hover {

  transform: translateY(-10px);

  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);

}

.sports-card:hover img {

  filter: grayscale(0%);

  transform: scale(1.08);

}



/* + More Sports Card */

.more-sports {

  display: flex;

  text-decoration: none;

  justify-content: center;

  align-items: center;

  flex-direction: column;

  font-weight: 700;

  color: #2c75ff;

  font-size: 20px;

  background: rgba(232, 237, 255, 0.7);

  border: 2px dashed #2c75ff;

  border-radius: 16px;

  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);

  transition: all 0.4s ease;

  text-align: center;

  width: 100%;

  height: 100%;

}



.more-sports span {

  line-height: 1.5;

  letter-spacing: 0.5px;

}



.more-sports:hover {

  transform: scale(1.07);

  background: #2c75ff;

  color: #fff;

  box-shadow: 0 8px 22px rgba(44, 117, 255, 0.4);

  border-style: solid;

}



/* ===========================

   WHY PARTNER WITH US SECTION

=========================== */

.why-partner-section {

  padding: 90px 0;

  background: radial-gradient(circle at top, #f7f9ff 0%, #e2ebff 100%);

  text-align: center;

  font-family: 'Inter', sans-serif;

}



/* Container to pull the whole header up if needed, without breaking layout */

.why-header-container {

  text-align: center;

  margin-top: -40px;

  margin-bottom: 60px;

}



.why-title {

  font-size: 32px;

  font-weight: 600;

  color: #000000; 

  text-transform: uppercase;

  letter-spacing: 1px;

  margin-bottom: 15px;

  

}



/* The Underline Wrapper */

.underline-wrap.orange {

  position: relative;

  display: flex;

  justify-content: center;

  align-items: center;

  width: 100%;

  height: 4px; /* Height of the line area */

}



/* The long grey base line */

.underline-wrap.orange .underline-grey {

  width: 200px; 

  height: 4px;

  background: #e2e8f0; 

  border-radius: 10px;

  position: absolute;

}



/* The short orange accent line */

.underline-wrap.orange .underline-orange {

  width: 60px;

  height: 4px;

  margin-left: 0px;

  background: linear-gradient(90deg, #f97316, #ea580c); /* Brand Orange Gradient */

  border-radius: 10px;

  position: absolute;

  z-index: 2;

  /* This centers it exactly over the grey line */

}





/* Grid layout for cards */

.partner-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr); 

  gap: 40px;

  max-width: 1000px; 

  margin: 40px auto 0 auto; 

  padding: 0px 1px; 

}



/* Card container */

.partner-card {

  perspective: 1200px;

  width: 100%; /* Takes up grid space */

  max-width: 300px;

  height: 230px;

  cursor: pointer;

}



/* Updated Flip Logic: Works on Hover OR via the 'flipped' class */

.partner-card:hover .card-inner,

.card-inner.flipped {

  transform: rotateY(180deg);

}



.partner-card:hover {

  transform: translateY(-5px);

}



/* Inner flip layer */

.card-inner {

  position: relative;

  width: 100%;

  height: 100%;

  transition: transform 0.7s ease;

  transform-style: preserve-3d;

}



/* Card faces */

.card-front,

.card-back {

  position: absolute;

  width: 100%;

  height: 100%;

  border-radius: 18px;

  backface-visibility: hidden;

  display: flex;

  justify-content: center;

  align-items: center;

  padding: 20px;

  text-align: center;

}



/* Front (frosted glass effect) */

.card-front {

  background: rgba(255, 255, 255, 0.25);

  border: 2px solid #2c75ff;

  color: #0f172a;

  font-weight: 700;

  font-size: 20px;

  letter-spacing: 0.5px;

  backdrop-filter: blur(12px);

  box-shadow: 0 6px 14px rgba(44, 117, 255, 0.1);

}



/* Back (solid info side) */

.card-back {

  background: #bccdf7;

  color: #0f172a;

  font-size: 18px;

  font-weight: 500;

  transform: rotateY(180deg);

  box-shadow: 0 8px 24px rgba(44, 117, 255, 0.25);

}



/* Flipped state (on click) */

.card-inner.flipped {

  transform: rotateY(180deg);

}



/* ================== RESPONSIVE OVERRIDES (ONLY ADDED FOR MOBILE) ================== */

@media (max-width: 992px) {

  .sports-hero-overlay { padding: 40px 20px; }

  .sports-hero-title { font-size: 32px; }

  

  /* Reset positioning to keep titles centered and within bounds */

  .sports-manage-title, 

  .why-title, 

  .underline-wrap.orange { 

    top: 0 !important; 

    left: 0 !important; 

    right: 0 !important; 

    text-align: center; /* Ensures text stays centered */

  }

  

  .sports-manage-underline-wrap { 

    top: 0 !important; 

    right: 0 !important; 

    margin: 10px auto 40px !important; 

    display: block !important;

  }



  /* FIXED: Underline Wrap now uses max-width to prevent overflow */

  .underline-wrap.orange {

    position: relative !important;

    top: 0 !important;

    margin: 0 auto 50px !important;

    width: 90% !important;      /* Takes up 90% of screen width */

    max-width: 350px !important;  /* But never gets bigger than 350px */

    height: 3px !important;

    display: flex !important;

    justify-content: center !important;

  }



  .underline-wrap.orange .underline-grey {

    position: absolute !important; 

    width: 100% !important; /* Spans the full 90% or 350px max */

    height: 3px !important;

    left: 0 !important;

    margin: 0 !important;

    background: #e2e8f0; /* Ensure grey color is visible */

  }



  .underline-wrap.orange .underline-orange {

    position: absolute !important; 

    width: 80px !important; /* Slightly smaller for mobile elegance */

    height: 3px !important;

    left: 50% !important;

    transform: translateX(-50%) !important; 

    z-index: 2 !important;

    margin: 0 !important;

    background: #f97316; /* Your orange brand color */

  }

}



/* ---------------------------------------CONTACT US PAGE DESIGN ----------------------------------------------- */

/* =============================================

   SPORTSNEXT INDIA - PRIME CONTACT STYLES

   ============================================= */



:root {

    --prime-blue: #2c75ff;

    --deep-navy: #060b50;

    --stadium-dark: #020617;

    --soft-white: #f8faff;

    --error-red: #ef4444;

    --success-green: #10b981;

    --glass-shadow: 0 25px 50px -12px rgba(6, 11, 80, 0.12);

}



/* 1. HERO / BANNER SECTION */

.contact-hero {

    position: relative;

    width: 100%;

    height: 450px; /* Optimal height for desktop */

    overflow: hidden;

    display: flex;

    align-items: center;

    justify-content: center;

    background: var(--stadium-dark);

}



.contact-hero-bg {

    position: absolute;

    width: 100%;

    height: 100%;

    object-fit: cover;

    opacity: 0.6;

    animation: slowZoom 20s infinite alternate ease-in-out;

}



@keyframes slowZoom {

    from { transform: scale(1); }

    to { transform: scale(1.1); }

}



.contact-hero::after {

    content: "";

    position: absolute;

    inset: 0;

    background: linear-gradient(to bottom, rgba(6, 11, 80, 0.5), var(--soft-white));

    z-index: 1;

}



.contact-hero-overlay {

    position: relative;

    z-index: 2;

    text-align: center;

    padding: 0 20px;

}



.contact-title {

    font-size: clamp(40px, 8vw, 80px);

    font-weight: 900;

    text-transform: uppercase;

    letter-spacing: -2px;

    margin: 0;

    background: linear-gradient(to bottom, #ffffff 30%, #cbd5e1 100%);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    line-height: 1;

}



.contact-hero-overlay::after {

    content: "WE RESPOND WITHIN 24 HOURS";

    display: block;

    margin-top: 15px;

    color: var(--prime-blue);

    font-size: 13px;

    font-weight: 800;

    letter-spacing: 5px;

}



/* 2. MAIN CONTENT AREA */

.contact-section {

    padding: 0 20px 80px;

    background: var(--soft-white);

    position: relative;

    z-index: 5;

}



.contact-container {

    display: flex;

    gap: 30px;

    max-width: 1200px;

    margin: -100px auto 0; /* Creates the overlap window effect */

    flex-wrap: wrap;

}



/* 3. CARDS (Glassmorphism Light) */

.contact-left, .contact-right {

    background: #ffffff;

    padding: 40px;

    border-radius: 35px;

    box-shadow: var(--glass-shadow);

    border: 1px solid rgba(255, 255, 255, 1);

    transition: transform 0.3s ease;

}



.contact-left { flex: 1; min-width: 340px; }

.contact-right { flex: 1.6; min-width: 350px; }



/* 4. INFO ITEMS */

.info-item {

    margin-bottom: 30px;

    border-bottom: 1px solid #f1f5f9;

    padding-bottom: 20px;

}



.info-item:last-of-type { border: none; }



.info-item h3 {

    color: var(--prime-blue);

    font-size: 13px;

    text-transform: uppercase;

    letter-spacing: 1.5px;

    margin-bottom: 10px;

    display: flex;

    align-items: center;

    gap: 12px;

}



.info-item p, .info-item a {

    color: #1e293b;

    font-size: 16px;

    font-weight: 600;

    text-decoration: none;

    line-height: 1.6;

}



/* 5. FORM ELEMENTS */

.contact-form { display: flex; flex-direction: column; gap: 20px; }



.form-row { display: flex; gap: 15px; }



.form-group { display: flex; flex-direction: column; flex: 1; }



.form-group label {

    font-size: 12px;

    font-weight: 800;

    color: #94a3b8;

    margin-bottom: 6px;

    text-transform: uppercase;

    margin-left: 5px;

}



.contact-form input, .contact-form textarea {

    padding: 16px 20px;

    border: 2px solid #f1f5f9;

    border-radius: 16px;

    background: #f8faff;

    font-size: 15px;

    font-family: inherit;

    transition: all 0.3s ease;

}



.contact-form input:focus, .contact-form textarea:focus {

    border-color: var(--prime-blue);

    background: #fff;

    box-shadow: 0 10px 20px rgba(44, 117, 255, 0.08);

    outline: none;

    transform: translateY(-2px);

}



/* 6. CAPTCHA DESIGN */

.captcha-container {

    background: #f8faff;

    padding: 20px;

    border-radius: 20px;

    border: 2px solid #f1f5f9;

}



.captcha-group { display: flex; gap: 12px; align-items: center; }



.captcha-box {

    background: var(--deep-navy);

    color: #00d4ff;

    padding: 10px 20px;

    border-radius: 12px;

    font-family: 'Courier New', monospace;

    font-weight: 900;

    font-size: 24px;

    letter-spacing: 5px;

    text-shadow: 0 0 10px rgba(0, 212, 255, 0.5);

}



#captcha-refresh {

    background: var(--prime-blue);

    border: none;

    width: 44px;

    height: 44px;

    border-radius: 12px;

    color: #fff;

    cursor: pointer;

    transition: 0.3s;

}



#captcha-input { flex: 1; text-transform: uppercase; letter-spacing: 2px; }



/* 7. SUBMIT BUTTON */

.submit-btn {

    background: var(--prime-blue);

    color: #fff;

    padding: 20px;

    border-radius: 18px;

    border: none;

    font-weight: 800;

    font-size: 15px;

    text-transform: uppercase;

    letter-spacing: 1.5px;

    cursor: pointer;

    transition: all 0.4s;

    box-shadow: 0 15px 30px rgba(44, 117, 255, 0.2);

}



.submit-btn:hover {

    background: var(--deep-navy);

    transform: translateY(-4px);

    box-shadow: 0 20px 40px rgba(6, 11, 80, 0.2);

}



/* 8. MODAL ALERT */

.modal-overlay {

    position: fixed;

    inset: 0;

    background: rgba(2, 6, 23, 0.9);

    backdrop-filter: blur(10px);

    display: none;

    align-items: center;

    justify-content: center;

    z-index: 10000;

}



.modal-overlay.active { display: flex; }



.modal-content {

    background: #fff;

    padding: 40px;

    border-radius: 35px;

    text-align: center;

    max-width: 400px;

    width: 90%;

    transform: scale(0.8);

    transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);

}



.modal-overlay.active .modal-content { transform: scale(1); }



.modal-icon {

    width: 80px;

    height: 80px;

    margin: 0 auto 20px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 32px;

}



.success-icon { background: #ecfdf5; color: var(--success-green); }

.error-icon { background: #fef2f2; color: var(--error-red); }



.modal-btn {

    margin-top: 25px;

    background: var(--prime-blue);

    color: #fff;

    border: none;

    padding: 15px;

    border-radius: 14px;

    font-weight: 800;

    width: 100%;

    cursor: pointer;

}



/* 9. MAP MARKER PULSE (Leaflet Custom) */

.custom-marker {

    background: var(--prime-blue);

    width: 20px;

    height: 20px;

    border-radius: 50%;

    border: 3px solid white;

    box-shadow: 0 0 0 rgba(44, 117, 255, 0.4);

    animation: pulse 2s infinite;

}



/* Make the map feel like a button */

#contact-map {

    position: relative;

    cursor: pointer;

    transition: filter 0.3s ease;

}



#contact-map:hover {

    filter: brightness(0.95);

}



/* Custom styling for the Leaflet popup */

.leaflet-popup-content-wrapper {

    border-radius: 12px;

    padding: 5px;

    box-shadow: 0 10px 25px rgba(0,0,0,0.1);

}



.leaflet-popup-tip {

    background: white;

}



/* Directions Icon Animation */

.fa-directions {

    margin-left: 5px;

    animation: bounce 2s infinite;

}



@keyframes bounce {

    0%, 20%, 50%, 80%, 100% {transform: translateX(0);}

    40% {transform: translateX(3px);}

    60% {transform: translateX(2px);}

}



@keyframes pulse {

    0% { box-shadow: 0 0 0 0 rgba(44, 117, 255, 0.7); }

    70% { box-shadow: 0 0 0 15px rgba(44, 117, 255, 0); }

    100% { box-shadow: 0 0 0 0 rgba(44, 117, 255, 0); }

}



/* 10. RESPONSIVE DESIGN - PERFECTED */



@media (max-width: 1024px) {

    .contact-container { 

        margin-top: -60px; 

        padding: 0 20px;

        gap: 20px;

    }

}



@media (max-width: 768px) {

    .contact-hero { 

        height: 300px; 

    }

    

    .contact-title { 

        font-size: 42px; 

        letter-spacing: -1px; 

    }



    .contact-container { 

        flex-direction: column; 

        margin-top: -40px; /* Reduced overlap for better spacing */

        padding: 0 15px; /* Ensures cards don't touch screen edges */

        width: 100%;

        gap: 25px;

    }



    /* Prevent cards from overflowing */

    .contact-left, .contact-right { 

        flex: none;

        width: 100%; 

        min-width: 0; /* Resets the min-width from desktop */

        padding: 30px 20px; 

        border-radius: 25px; /* Slightly rounder for mobile */

    }



    /* Stack form inputs vertically */

    .form-row { 

        flex-direction: column; 

        gap: 20px; 

    }



    /* Fix Captcha for small screens */

    .captcha-container {

        padding: 15px;

    }



    .captcha-group { 

        flex-direction: column; 

        align-items: stretch; /* Makes input and box same width */

        gap: 15px;

    }

    

    .captcha-box { 

        width: 100%; 

        text-align: center; 

        font-size: 22px;

        padding: 15px;

    }



    #captcha-input { 

        width: 100%; 

        margin: 0;

    }



    /* Full width submit for easy thumb-tapping */

    .submit-btn { 

        width: 100%; 

        padding: 18px;

        font-size: 14px;

    }

}



/* Extra fix for very small screens (iPhone SE / Fold) */

@media (max-width: 380px) {

    .contact-title { 

        font-size: 34px; 

    }

    

    .contact-left, .contact-right {

        padding: 20px 15px;

    }

    

    .info-item h3 {

        font-size: 12px;

    }

}



/* ============================================================================================================================================================

---------------------------------------------------------service page --------------------------------------------------------------------------------------------------- 

=================================================================================================================================================================*/

/* ===========================

   BANNER SECTION

=========================== */

.banner.services {

  position: relative;

  min-height: 550px; /* Adjust height as needed */

  height: 80vh;

  display: flex;

  align-items: center;

  justify-content: center;

  text-align: center;

  overflow: hidden;

}



/* Make the image behave like a background */

.banner.services .banner-img {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;       /* Ensures full coverage */

  object-position: center; /* Keeps important area centered */

  z-index: 0;

  filter: brightness(0.7); /* Slightly darken image for text readability */

}



/* Overlay darkness for better contrast */

.banner.services::before {

  content: "";

  position: absolute;

  inset: 0;

  background: rgba(0, 0, 0, 0.6);

  z-index: 1;

}



/* Text overlay container */

.service_overlay {

  position: relative;

  z-index: 2;

  color: #fff;

  padding: 0 20px;

}



.service_overlay h1 {

  font-size: 3.5rem;

  font-weight: 900;

  text-transform: uppercase;

  

  /* Gradient colors */

  background: linear-gradient(90deg, #ffffff, #60a5fa, #3b82f6);

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

  

  /* High-contrast drop shadow */

  filter: drop-shadow(0px 4px 8px rgba(0, 0, 0, 0.8));

  

  letter-spacing: 2px;

  margin-bottom: 15px;

}



/* Add a highlight line below */

.service_overlay h1::after {

  content: "";

  display: block;

  width: 80px;

  height: 4px;

  background: #f97316; /* Orange */

  margin: 15px auto 0;

  border-radius: 10px;

}



/* ===========================

   MAIN CONTENT SECTION

=========================== */

.service_container {

  max-width: 1200px;

  margin: 80px auto;

  padding: 0 20px;

  text-align: center;

}



.service_container h2 {

  font-size: 2rem;

  color: #1e3a8a;

  margin-bottom: 10px;

}



.service_container p {

  max-width: 850px;

  margin: 0 auto 50px auto;

  color: #475569;

}



/* ===========================

   SERVICE GRID

=========================== */

.service_grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

  gap: 30px;

  justify-content: center;

  align-items: stretch;

}



/* ===========================

   SERVICE CARD STYLING

=========================== */

.card {

  background: #fff;

  border-radius: 16px;

  box-shadow: 0 4px 18px rgba(0,0,0,0.08);

  padding: 20px;

  text-align: center;

  transition: all 0.4s ease;

  overflow: hidden;

}



.card img {

  width: 100%;

  height: 180px;

  object-fit: cover;

  border-radius: 12px;

  margin-bottom: 15px;

  transition: transform 0.5s ease;

}



.card:hover img {

  transform: scale(1.08);

}



.card:hover {

  transform: translateY(-8px);

  box-shadow: 0 8px 24px rgba(44,117,255,0.25);

}



.video-card {

  position: relative;

  overflow: hidden;

}

.video-card h3{

  margin-top: 35px;

  

  

}



.video-thumbnail {

  position: relative;

  width: 100%;

  height: 180px;

  border-radius: 12px;

  overflow: hidden;

  cursor: pointer;

  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);

  transition: transform 0.4s ease, box-shadow 0.4s ease;

}



.video-thumbnail img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: transform 0.4s ease;

}



.video-thumbnail:hover img {

  transform: scale(1.06);

}



.play-btn {

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  background: rgba(255, 255, 255, 0.9);

  color: #0a58ca;

  font-size: 36px;

  width: 70px;

  height: 70px;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);

  transition: background 0.3s ease, transform 0.3s ease;

}



.video-thumbnail:hover .play-btn {

  background: #0a58ca;

  color: #fff;

  transform: translate(-50%, -50%) scale(1.1);

}







.card::after {

  content: "";

  position: absolute;

  top: 0;

  left: -100%;

  width: 100%;

  height: 4px;

  background: linear-gradient(90deg, #3b82f6, #1e3a8a);

  transition: 0.4s ease;

}



.card:hover::after {

  left: 0;

}



.card:hover {

  transform: translateY(-5px);

  box-shadow: 0 12px 25px rgba(59, 131, 246, 0.402);

}



.card h3 {

  font-size: 1.3rem;

  color: #1e40af;

  margin-bottom: 10px;

}



.card p {

  color: #334155;

  margin-bottom: 20px;

  font-size: 0.95rem;

  line-height: 1.6;

}



/* CTA Button */

.card .cta {

  display: inline-block;

  background: linear-gradient(90deg, #2563eb, #1e3a8a);

  color: #fff;

  padding: 10px 20px;

  border-radius: 25px;

  text-decoration: none;

  font-weight: 600;

  font-size: 0.9rem;

  transition: all 0.3s ease;

}



.card .cta:hover {

  background: linear-gradient(90deg, #1e3a8a, #2563eb);

  transform: translateY(-2px);

  box-shadow: 0 5px 12px rgba(37, 99, 235, 0.3);

}



/* ===========================

   SCROLL ANIMATIONS

=========================== */

[data-animate] {

  opacity: 0;

  transform: translateY(20px);

  transition: all 0.8s ease-out;

}



[data-animate].visible {

  opacity: 1;

  transform: translateY(0);

}



/* ===========================

   RESPONSIVE DESIGN

=========================== */

@media (max-width: 900px) {

  .service_overlay h1 {

    font-size: 2.3rem;

  }



  .service_container {

    margin: 60px auto;

  }



  .service_container p {

    font-size: 0.95rem;

  }

}



@media (max-width: 600px) {

  .banner.services {

    height: 45vh;

  }



  .card {

    padding: 25px 20px;

  }



  .service_overlay p {

    font-size: 1rem;

  }

}





/* ===========================================================================================================================

================================================Themed-event page==============================================================

==================================================================================================================================== */

/* Banner Section */

.banner.theme-banner {

  position: relative;

  height: 70vh;

  display: flex;

  align-items: center;

  justify-content: center;

  overflow: hidden;

  text-align: center;

}



.banner.theme-banner .banner-img {

  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

  filter: brightness(0.6);

  z-index: 0;

}



.banner.theme-banner::before {

  content: "";

  position: absolute;

  inset: 0;

  background: rgba(0, 0, 0, 0.4);

  z-index: 1;

}



.theme_overlay {

  position: relative;

  z-index: 2;

  color: #fff;

}



.theme_overlay h1 {

  font-size: 3rem;

  text-transform: uppercase;

  font-weight: 800;

  background: linear-gradient(90deg, #5f8bf9, #326bfa, #0c50fc);

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);

}



.theme_overlay p {

  color: #f1f5f9;

  max-width: 800px;

  margin: 15px auto 0;

  font-size: 1.2rem;

}



/* ===========================

   Content Section

=========================== */

.theme_container {

  max-width: 1200px;

  margin: 80px auto;

  padding: 0 20px;

  text-align: center;

}



.theme_container h2 {

  font-size: 2rem;

  color: #1e3a8a;

  margin-bottom: 20px;

}



.theme_container p {

  color: #475569;

  max-width: 850px;

  margin: 0 auto 50px;

  line-height: 1.6;

}



/* Grid */

.theme_grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

  gap: 30px;

  margin-bottom: 60px;

}



/* Card */

.theme_card {

  background: #ffffff;

  border-radius: 18px;

  box-shadow: 0 6px 20px rgba(0,0,0,0.08);

  padding: 25px 20px;

  text-align: left;

  transition: all 0.4s ease;

  border-top: 4px solid #3b82f6;

}



.theme_card:hover {

  transform: translateY(-6px);

  box-shadow: 0 10px 25px rgba(37, 100, 235, 0.404);

}



.theme_card h4 {

  font-size: 1.2rem;

  color: #1e40af;

  margin-bottom: 15px;

}



.theme_card ul {

  list-style: none;

  padding: 0;

  line-height: 1.8;

  color: #334155;

}



/* Video Section */

.theme-video-card {

  margin-top: 60px;

}



.theme-video-card .video-thumbnail {

  position: relative;

  width: 100%;

  max-width: 700px;

  margin: 0 auto 20px;

  border-radius: 16px;

  overflow: hidden;

  cursor: pointer;

}



.theme-video-card .video-thumbnail img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: transform 0.4s ease;

}



.theme-video-card .video-thumbnail:hover img {

  transform: scale(1.05);

}





/* ===========================

   WHY CHOOSE SECTION (Professional Look)

=========================== */

.why_list {

  max-width: 850px;

  margin: 50px auto;

  padding-left: 25px;

  border-left: 3px solid rgba(37, 99, 235, 0.3); /* Elegant blue accent line */

  list-style: none;

  color: #1e293b;

}

.theme_h2{

  color: #1e3a8a;

  font-size: 30px;

}



.why_list li {

  position: relative;

  margin-bottom: 20px;

  font-size: 1.05rem;

  line-height: 1.7;

  padding-left: 25px;

  transition: all 0.3s ease;

}



/* Dot before each point */

.why_list li::before {

  content: "";

  position: absolute;

  left: -10px;

  top: 10px;

  width: 10px;

  height: 10px;

  background: #2563eb;

  border: 2px solid #fff;

  border-radius: 50%;

  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);

  transition: background 0.3s ease, transform 0.3s ease;

}



/* Hover effect - highlight text and dot */

.why_list li:hover {

  color: #1e3a8a;

  transform: translateX(6px);

}



.why_list li:hover::before {

  background: #1e3a8a;

  transform: scale(1.2);

}



/* Optional subtle fade-in animation */

[data-animate].visible .why_list li {

  opacity: 1;

  transform: translateX(0);

  transition-delay: calc(var(--i, 0) * 0.1s);

}



/* Responsive styling */

@media (max-width: 768px) {

  .why_list {

    padding-left: 18px;

    border-left: 2px solid rgba(37, 99, 235, 0.25);

  }



  .why_list li {

    font-size: 0.98rem;

    padding-left: 20px;

  }



  .why_list li::before {

    left: -8px;

    width: 8px;

    height: 8px;

  }

}





/* CTA Section */

.cta_section {

  margin: 60px auto;

  background: linear-gradient(90deg, #3b82f6, #2563eb);

  padding: 30px 20px;

  border-radius: 18px;

  color: #fff;

}



.cta_section h3 {

  font-size: 1.6rem;

  margin-bottom: 10px;

}



.cta_section .cta {

  display: inline-block;

  margin-top: 10px;

  background: #fff;

  color: #1e3a8a;

  padding: 10px 20px;

  border-radius: 25px;

  text-decoration: none;

  font-weight: 600;

  transition: all 0.3s ease;

}



.cta_section .cta:hover {

  background: #facc15;

  color: #000;

  transform: translateY(-2px);

}



/* Animations */

[data-animate] {

  opacity: 0;

  transform: translateY(30px);

  transition: all 0.8s ease-out;

}



[data-animate].visible {

  opacity: 1;

  transform: translateY(0);

}



@media (max-width: 768px) {

  .theme_overlay h1 {

    font-size: 2.2rem;

  }

  .theme_card {

    text-align: center;

  }

}





/* ==========================================================================

   FULLY RESPONSIVE OVERRIDES (Add at the bottom of style.css)

   ========================================================================== */



@media (max-width: 1024px) {

    .container { padding: 0 20px; }

    .hero-inner, .about-inner, .whychoose-inner { gap: 20px; }

}



@media (max-width: 768px) {

    /* Header & Navigation */

    .header-inner { height: auto; padding: 10px 20px; flex-direction: column; gap: 10px; }

    .nav { gap: 12px; flex-wrap: wrap; justify-content: center; }

    

    /* Fix for the Large Logo issue */

    .logo-img { 

        height: 50px !important; 

        transform: scale(1) !important; 

        margin: 0 !important; 

    }



    /* Hero Section */

    .hero-banner { min-height: auto; }

    .hero-inner { flex-direction: column; text-align: center; padding: 40px 20px; }

    .hero-left { max-width: 100%; }

    .hero-right { flex: 0 0 auto; width: 100%; display: none; } /* Hide right image on small mobile to save space */

    .hero-title { font-size: 28px; }

    .hero-cta-row { justify-content: center; }



    /* About Section */

    .about-heading { font-size: 40px; }

    .about-left, .about-right { min-width: 100%; max-width: 100%; }

    .photo-grid { grid-template-columns: 1fr 1fr; gap: 15px; }



    /* Why Choose Us & Sports Manage */

    .whychoose-left, .whychoose-right { flex: 1 1 100%; max-width: 100%; }

    .curved-image-wrap { height: 250px; border-radius: 80px 0 80px 0; }

    .sports-manage-grid { grid-template-columns: 1fr 1fr; gap: 15px; }

    .sports-card { width: 100%; }

    .sports-manage-title { left: 0; top: 0; font-size: 24px; margin-bottom: 20px; }

    .sports-manage-underline-wrap { right: 0; top: 0; margin-bottom: 40px; }



    /* Footer */

    .footer-inner { flex-direction: column; text-align: center; align-items: center; }

    .footer-left { max-width: 100%; }

}



@media (max-width: 480px) {

    .hero-title { font-size: 24px; }

    .hero-cta-row { flex-direction: column; width: 100%; }

    .btn { width: 100%; text-align: center; }

    .sports-manage-grid { grid-template-columns: 1fr; }

    .photo-grid { grid-template-columns: 1fr; }

    .photo-grid img:nth-child(1) { min-height: 200px; }

}