/* General Styles */
body {
  margin: -13px;
  font-family: Arial, sans-serif;
  background-color: #000; /* Black background */
  background-image: url('cover.png'); /* Add the cover image */
  background-size: cover; /* Ensure the image covers the entire area */
  background-position: center center; /* Center the image */
  background-attachment: fixed; /* Keep the image fixed while scrolling */
  background-repeat: no-repeat; /* Prevent the image from repeating */
  color: #fff;
  overflow-x: hidden;
}
/* Preloader styles */
/* Preloader styles */
/* Preloader styles */
/* Preloader styles */
/* Preloader styles */
#preloader {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: #000;
  background-image: url('cover.png'); /* Add cover image */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  opacity: 1; /* Initially fully visible */
  transition: opacity 1s ease; /* Smooth fade-out transition */
}

/* Center content inside the preloader */
.loader {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center; /* Ensure everything inside is centered */
}

/* Logo responsive size */
.loader-logo {
  width: 20vw; /* Responsive width (20% of the viewport width) */
  max-width: 280px; /* Ensure the logo doesn’t get too big */
  margin-bottom: 20px;
  animation: fadeInOut 1.5s ease-in-out infinite alternate;
}

/* Loading image with gold border animation */
.loading-image {
  width: 80vw; /* Responsive width (80% of the viewport width) */
  max-width: 1080px; /* Cap the maximum size */
  height: auto;
  border: 5px solid #FFD700; /* Initial static gold border */
  animation: borderGlow 2s infinite ease-in-out; /* Border glow animation */
}

/* Animation for gold border glow */
@keyframes borderGlow {
  0% {
    box-shadow: 0 0 10px #FFD700, 0 0 20px #FFD700, 0 0 30px #FFD700;
  }
  50% {
    box-shadow: 0 0 20px #FFD700, 0 0 30px #FFD700, 0 0 40px #FFD700;
  }
  100% {
    box-shadow: 0 0 10px #FFD700, 0 0 20px #FFD700, 0 0 30px #FFD700;
  }
}

/* Loading text styling */
.loading-text {
  font-size: 4vw; /* Responsive font size (4% of viewport width) */
  max-font-size: 24px; /* Cap the maximum size */
  color: #FFD700; /* Gold-yellow color */
  margin-top: 20px;
  font-weight: bold;
}

/* Dots animation */
.dots::after {
  content: '';
  display: inline-block;
  animation: dots 1.5s steps(3, end) infinite; /* Show dots step by step */
}

/* Keyframes for dots animation */
@keyframes dots {
  0% { content: ''; }
  33% { content: '.'; }
  66% { content: '..'; }
  100% { content: '...'; }
}

/* Keyframes for fade-in and fade-out effect */
@keyframes fadeInOut {
  0% { opacity: 0.3; }
  100% { opacity: 1; }
}

/* Main content transition */
#main-content {
  opacity: 0; /* Initially hidden */
  transition: opacity 1s ease; /* Smooth fade-in transition */
}

/* Ensure the preloader is responsive on smaller screens */
@media only screen and (max-width: 768px) {
  .loader-logo {
    width: 30vw; /* Adjust logo size for tablets */
  }

  .loading-image {
    width: 90vw; /* Adjust image size for smaller screens */
  }

  .loading-text {
    font-size: 6vw; /* Larger font size for better readability on small screens */
  }
}

@media only screen and (max-width: 480px) {
  .loader-logo {
    width: 45vw; /* Further adjust logo size for mobile */
  }

  .loading-image {
    width: 200vw; /* Adjust image size for smaller mobile screens */
  }

  .loading-text {
    font-size: 7vw; /* Larger font size for small mobile devices */
  }
}




header.team-header {
    background-color: #000;
    padding: 20px;
    text-align: center;
    border-bottom: 5px solid #FFD700;
    background-image: url(cover.png);
    overflow-x: hidden;
    background-position: center center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    display: flow;
    flex-direction: column;
    align-items: center;
}

/* Container for Logo and Jerseys */
.logo-jersey-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px; /* Space between jerseys and logo */
}

.team-jersey {
    height: 250px;
    width: auto;
    transform-style: preserve-3d;
    perspective: 1000px;
    animation: jersey3DSpin 6s infinite linear, glowEffect 2s infinite alternate; /* Combine both animations */
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5); /* Original shadow effect */
    border: 3px solid #FFD700; /* Gold border */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transitions */
}

/* 3D spin animation */
@keyframes jersey3DSpin {
    0% {
        transform: rotateY(0deg); /* Start from front */
    }
    25% {
        transform: rotateY(90deg); /* Rotate 90 degrees */
    }
    50% {
        transform: rotateY(180deg); /* Show back */
    }
    75% {
        transform: rotateY(270deg); /* Rotate 270 degrees */
    }
    100% {
        transform: rotateY(360deg); /* Complete the loop and return to the front */
    }
}

/* Keyframes for glowing effect */
@keyframes glowEffect {
    0% {
        box-shadow: 0 0 10px #FFD700, 0 0 20px #FFD700, 0 0 30px #FFD700, 0 5px 10px rgba(0, 0, 0, 0.5); /* Combine original shadow */
    }
    100% {
        box-shadow: 0 0 20px #FFD700, 0 0 30px #FFD700, 0 0 40px #FFD700, 0 5px 10px rgba(0, 0, 0, 0.5); /* Larger glow with original shadow */
    }
}

/* Pause the 3D spin on hover */
.team-jersey:hover {
    animation-play-state: paused; /* Pause 3D rotation */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5), 0 0 40px #FFD700; /* Enhanced shadow effect on hover */
}


.team-logo {
  height: 250px;
  width: auto;
  margin: 0 20px;
  transform: scale(1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.team-logo:hover {
  transform: scale(1.05);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.7);
}

/* Container for the menu and the animated soccer ball */
header.team-header nav {
  position: relative;
  border: 5px solid #FFD700; /* Yellow gold border */
  border-radius: 20px;
  padding: 10px;
  overflow: hidden;
  margin-top: 20px;
}

/* Ball emoji */
.soccer-ball {
  position: absolute;
  font-size: 40px;
  z-index: 1;
  animation: moveBall 5s linear infinite;
}

/* Keyframes for ball movement around the menu border */
@keyframes moveBall {
  0% {
    top: 0;
    left: 0;
  }
  25% {
    top: 0;
    left: 100%;
    transform: translateX(-100%);
  }
  50% {
    top: 100%;
    left: 100%;
    transform: translate(-100%, -100%);
  }
  75% {
    top: 100%;
    left: 0;
    transform: translateY(-100%);
  }
  100% {
    top: 0;
    left: 0;
  }
}

/* Navigation Menu Styling */
header.team-header nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
  gap: 30px; /* Space between navigation items */
  position: relative; /* Ensure ball flows inside */
  z-index: 2; /* Keep menu above the ball */
}

header.team-header nav ul li a {
  color: #fff;
  text-decoration: none;
  font-size: 18px;
  padding: 10px;
}

header.team-header nav ul li a:hover {
  color: #FFD700;
}


@media (max-width: 768px) {
  /* Reduce sizes for smaller screens */
  .team-jersey, .team-logo {
    height: 140px;
  }

  /* Adjust jerseys' position */
  .logo-jersey-container {
    flex-direction: row; /* Stack vertically on smaller screens */
  }

  /* Navigation links */
  header.team-header nav ul {
    flex-wrap: wrap;
    gap: 15px;
  }

  header.team-header nav ul li a {
    font-size: 16px;
  }
}
.map-container {
  margin-top: 20px;
  border: 2px solid #FFD700;
  border-radius: 10px;
  overflow: hidden;
}

.vision-title {
  font-size: 32px;
  font-weight: bold;
  color: #FFD700;
  margin-bottom: 20px;
  text-align: center;
}

.vision-text {
  font-size: 18px;
  line-height: 1.8;
  color: #ffffff;
  margin-bottom: 20px;
  text-align: justify;
}

@media (max-width: 768px) {
  .map-container iframe {
    height: 300px; /* Adjust height for mobile devices */
  }
}

@media (max-width: 480px) {
  /* Further reduce size for small phones */
  .team-jersey, .team-logo {
    height: 117px;
  }

  header.team-header nav ul {
    flex-wrap: wrap;
    gap: 10px;
  }

  header.team-header nav ul li a {
    font-size: 11px;
  }
}

.slider-section {
  margin: -19px 0;
  position: relative;
  width: 100%;
  height: 300px;
  overflow: hidden;

}

.slider {
  display: flex;
  width: calc(300px * 13); /* Adjust based on the number of images */
  animation: slide 40s linear infinite;
}

.slider span {
  display: inline-block;
  margin-right: 30px;
  width: 300px; /* Adjust the width based on your design */
  height: 300px; /* Adjust the height based on your design */
  background-image: url('back.png');
  background-size: cover;  /* Ensure the image covers the entire span */
  background-position: center; /* Center the background image */
  border: 5px solid #FFD700; /* Gold border */
  box-shadow: 0 0 15px #000;
}

.slider span img {
  height: 300px;
  width: auto;
  border: 5px solid #FFD700; /* Gold border */
  box-shadow: 0 0 15px #000;
}

@keyframes slide {
  0% {
    transform: translateX(0); /* Start from the beginning */
  }
  100% {
    transform: translateX(-100%); /* Move to the end of all images */
  }
}



/* Text and Slideshow Section Styling */
.info-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 23px 0;
    padding: 20px;
    background-color: #024b04; /* Fallback color */
    background-image: url('cover.png'); /* Set the background image */
    background-size: cover; /* Make the image cover the entire section */
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Prevent repeating */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    border: 5px solid #FFD700; /* Gold border effect */
    border-radius: 15px; /* Optional: rounded corners for a smoother look */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); /* Optional: shadow for depth */
}

.slideshow {
  width: 45%;
  position: relative;
}

.slideshow-container {
  position: relative;
  width: 100%;
}

.slideshow-img {
  width: 100%;
  height: auto;
  position: absolute;
  top: -280px;
  left: 0;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.slideshow-img.active {
  opacity: 1;
}




@media only screen and (max-width: 480px) {
    .slideshow-img {
         width: 100%;
        top: auto;
    }
}


@media only screen and (max-width: 768px) {
    .slideshow-img {
         width: 100%;
        top: auto;
    }
}
@media only screen and (max-width: 768px) {
     .slideshow-img {
        width: 100%;
        top: auto;

    }
}





/* Next and Previous Buttons */
.prev, .next {
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 24px;
  cursor: pointer;
  background-color: rgba(0, 0, 0, 0.5);
  border: none;
  transform: translateY(-50%);
}

.prev {
  left: 0;
}

.next {
  right: 0;
}

.prev:hover, .next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

.info-text {
  width: 50%;
  color: #fff;
  font-size: 18px;
  line-height: 1.6;
  animation: fadeIn 2s ease-in-out;
}

.info-text h2 {
  font-size: 36px;
  color: #FFD700; /* Gold title */
  margin-bottom: 20px;
}

.video-box {
  margin-top: 20px;
  background-color: #000;
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
/* General Footer Styles */
footer {
  
  padding: 20px;
  text-align: center;
 
  color: #FFD700; /* Gold color */
}

footer p {
  margin: 0;
  font-size: 16px;
  color: #FFD700;
}

/* Footer Social Section */
.footer-social {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
  gap: 20px; /* Space between icons */
}

.footer-icon i {
  font-size: 40px;
  color: #FFD700;
  transition: transform 0.3s ease;
}

.footer-icon i:hover {
  transform: scale(1.1); /* Slightly enlarge on hover */
}

.footer-logo i {
  font-size: 50px;
  color: #FFD700;
}

.footer-logo i:hover {
  transform: scale(1.1);
  transition: transform 0.3s ease;
}

/* Responsive Design */
@media (max-width: 768px) {
  .footer-icon i {
    font-size: 30px;
  }

  .footer-logo i {
    font-size: 40px;
  }
}

@media (max-width: 480px) {
  .footer-icon i {
    font-size: 25px;
  }

  .footer-logo i {
    font-size: 35px;
  }
}


/* Fade-in Effect for Text */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive Styles */
@media only screen and (max-width: 768px) {
  /* Adjust for tablets and smaller screens */
  
  /* Adjust jersey and logo sizes */
  .team-logo, .team-jersey {
    height: 120px; /* Make the images smaller */
  }

  /* Make the logo and jerseys stack */
  .logo-jersey-container {
    flex-direction: row;
  }
/* Default styles for larger screens */
header.team-header nav {
  position: relative; 
  border: 5px solid #FFD700; 
  border-radius: 0px;
  padding: 10px;
  overflow: hidden;
  margin-top: 20px;
  font-size: 18px; /* Default font size */
}

/* Make the navigation smaller on screens smaller than 768px (tablets and mobile) */
@media (max-width: 768px) {
  header.team-header nav {
    padding: 8px;
    font-size: 16px; /* Reduce font size */
  }

  header.team-header nav ul {
    flex-direction: column; /* Stack navigation items vertically */
    gap: 15px; /* Reduce space between navigation items */
  }

  .attention-effect {
    font-size: 16px; /* Smaller size for the Youth Registration link */
  }
}

/* Further reduce size for smaller screens like phones (max-width: 480px) */
@media (max-width: 480px) {
  header.team-header nav {
    padding: 5px;
    font-size: 14px; /* Further reduce font size */
  }

  header.team-header nav ul {
    gap: 10px; /* Less space between navigation items */
  }

  .attention-effect {
    font-size: 14px; /* Smaller size for Youth Registration on phones */
  }
}

  /* Adjust navigation menu */
  header.team-header nav ul {
    flex-direction: row;
    margin-top: 10px;
  }

  header.team-header nav ul li {
    margin-bottom: 10px;
  }

  /* Slider height adjustment */
  .slider-section {
    height: 200px; /* Smaller slider on phones */
  }

  .slider span img {
    height: 200px; /* Adjust slider image height */
  }

  /* Adjust info section */
  .info-section {
    flex-direction: column; /* Stack content vertically */
    text-align: center;
  }

  .info-text, .slideshow {
    width: 100%;
  }

  .slideshow {
    order: -1; /* Move slideshow above text in mobile */
  }

  /* Adjust text font sizes */
  .info-text h2 {
    font-size: 28px; /* Smaller heading for mobile */
  }

  .info-text {
    font-size: 16px; /* Adjust paragraph text size */
  }
}

@media only screen and (max-width: 480px) {
  /* Adjust for smaller phones */
  
  /* Further reduce image sizes */
  .team-logo, .team-jersey {
    height: 130px;
  }

  /* Reduce text sizes further */
  .info-text h2 {
    font-size: 24px;
  }

  .info-text {
    font-size: 18px;
  }
  
  /* Smaller slider images */
  .slider-section {
    height: 150px;
  }

  .slider span img {
    height: 150px;
  }
}


/* Bright glowing effect for Youth Registration */
.attention-effect {
  color: #FFD700; /* Bright gold color */
  font-weight: bold;
  text-decoration: none;
  font-size: 18px;
  position: relative;
  animation: glow 1.5s ease-in-out infinite alternate;
}

.attention-effect:hover {
  color: #ffffff;
  text-shadow: 0 0 15px #FFD700;
}

/* Keyframe animation for glowing effect */
@keyframes glow {
  0% {
    text-shadow: 0 0 5px #FFD700, 0 0 10px #FFD700, 0 0 20px #FFD700;
  }
  100% {
    text-shadow: 0 0 20px #FFD700, 0 0 30px #FFD700, 0 0 40px #FFD700;
  }
}
/* Styles for responsive image */
.responsive-image {
  max-width: 100%;  /* Ensures the image doesn't exceed the container's width */
  height: auto;     /* Maintains the aspect ratio */
  display: block;   /* Remove extra space below the image */
  margin: 0 auto;   /* Center the image */
}

/* Styles for slideshow behavior */
.slideshow-img {
  width: 100%;       /* Ensure it takes up the full container */
  opacity: 0;        /* Hide the image by default */
  transition: opacity 1s ease-in-out; /* Smooth transition for showing image */
  position: absolute;
  top: 0;
  left: 0;
}

/* Active class for currently displayed image */
.slideshow-img.active {
  opacity: 1;  /* Make the image visible */
  position: relative;
  z-index: 1;
}