* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ========== FONT SIZE SYSTEM ========== */

/* Base settings */
body {
  font-size: 16px;
  line-height: 1.6;
  color: #333;
}

.container {
  max-width: 1140px;
  /* margin: 0 auto; */
}

section,
footer,
header {
  padding-left: 15px;
  padding-right: 15px;
}

/* Navigation */
nav a {
  font-size: 16px;
  font-weight: 600;
}

/* Section Titles */
.section-title,
h2.section-title,
.about-section h2,
.news-section h2,
.upcoming-games-section h2,
.partner-section h2 {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.3;
}

/* Hero Area (if you add any hero headings later) */
.hero-carousel h1,
.hero-carousel h2 {
  font-size: 36px;
  font-weight: 600;
}

/* Subheadings and Page Headers */
h3 {
  font-size: 28px;
  font-weight: 600;
}

h4 {
  font-size: 22px;
  font-weight: 600;
}

h5 {
  font-size: 20px;
  font-weight: 600;
}

/* Paragraphs */
p,
li {
  font-size: 16px;
}

/* Smaller text (dates, captions, etc.) */
.small,
.text-muted,
.card-text.text-muted,
.footer-bottom,
.event-date {
  font-size: 14px;
}

/* Buttons */
.btn,
.btn-primary,
.about-section .btn-primary,
.event-button {
  font-size: 16px;
  font-weight: 600;
}

/* Countdown timer */
.time-value {
  font-size: 24px;
  font-weight: bold;
}

.time-label {
  font-size: 14px;
  color: #666;
}

/* Footer headings and links */
.footer-links h4 {
  font-size: 18px;
  font-weight: 600;
}

.footer-links a {
  font-size: 14px;
}

header {
  background: white;
  padding: 20px 20px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
  z-index: 1000;
  font-family: "Segoe UI", sans-serif;
  transition: padding 0.3s ease-in-out, background-color 0.3s ease-in-out,
    clip-path 0.3s ease-in-out;
  clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
}

header.header-scrolled {
  padding: 10px 20px;
  background-color: #f8f9fa;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  /* A light grey to contrast with the white header */
}

.nav-container {
  /* max-width: 1200px; */
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  display: flex;
  align-items: center;
}

.logo img {
  height: 50px;
  margin-right: 10px;
  transition: height 0.3s ease-in-out;
}

header.header-scrolled .logo img {
  height: 40px;
}

nav {
  display: flex;
  gap: 20px;
}

nav a {
  text-decoration: none;
  color: #333;
  font-weight: 600;
  position: relative;
}

/* Dropdown container */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown content hidden by default */
.dropdown-content {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: white;
  min-width: 200px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  z-index: 1000;
}

/* Show dropdown on hover */
.dropdown:hover .dropdown-content {
  display: block;
}

/* Style for submenu links */
.dropdown-content a {
  display: block;
  padding: 10px 15px;
  color: #333;
  text-decoration: none;
  font-weight: 500;
}

.dropdown-content a:hover {
  background-color: #f0f0f0;
}

nav, .nav-container, header {
  position: relative;
  z-index: 2;
  overflow: visible;
}

.dropdown-content {
  position: absolute;
  z-index: 9999;
}


.mobile-toggle {
  display: none;
  flex-direction: column;
  cursor: pointer;
}

.mobile-toggle span {
  height: 3px;
  background: #333;
  margin: 4px 0;
  width: 25px;
}

@media (max-width: 768px) {
  header .nav-container .log {
    text-align: center;
  }

  nav {
    display: none;
    position: absolute;
    top: 70px;
    left: 0;
    right: 0;
    background: white;
    flex-direction: column;
    padding: 10px 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  }

  nav.active {
    display: flex;
  }

  .dropdown-content {
    position: static;
    box-shadow: none;
    padding-left: 10px;
  }

  .mobile-toggle {
    display: flex;
  }
}

.about-section {
  padding: 60px 0px;
  background-color: #f8f9fa;
  text-align: center;
}

.event-section {
  padding: 60px 0;
  background-color: #f8f9fa;
  text-align: center;
}

.event-header {
  font-size: 28px;
  font-weight: 600;
  color: #007c91;
  margin-bottom: 20px;
}

.event-image {
  max-width: 120px;
  margin-bottom: 20px;
}

.event-title {
  font-size: 36px;
  font-weight: bold;
  margin-bottom: 10px;
}

.event-date {
  font-size: 20px;
  color: #555;
  margin-bottom: 20px;
}

.event-description {
  max-width: 700px;
  margin: 0 auto 30px;
  font-size: 16px;
  color: #333;
}

.event-button {
  font-size: 16px;
  padding: 10px 24px;
}

.section-title {
  display: inline-block;
  border-bottom: 4px solid #0d6efd;
  /* Bootstrap's primary blue */
  padding-bottom: 0.5rem;
}

.event-section {
  background-color: #f8f9fa;
  padding: 60px 0;
}

.event-header {
  font-size: 2rem;
  font-weight: bold;
  text-align: center;
  color: #007c91;
  margin-bottom: 40px;
}

.event-card {
  text-align: center;
  padding: 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  margin-bottom: 30px;
}

.event-card img {
  width: 100px;
  margin-bottom: 15px;
}

.event-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #343a40;
}

.event-date {
  font-size: 1rem;
  color: #555;
}

.countdown-box {
  margin-top: 40px;
  text-align: center;
  font-weight: bold;
  font-size: 1.3rem;
  color: #007c91;
}

/* News Section Styles */
.news-card-link {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border-radius: var(--bs-card-border-radius);
  /* Match card's border radius */
}

.news-card-link:hover,
.news-card-link:focus-within {
  transform: translateY(-8px);
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important;
  outline: none;
}

.news-card-link .card-img {
  object-fit: cover;
  height: 100%;
}

.news-card-link .card-img-overlay {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: white;
  padding: 1.25rem;
  /* Dark blue gradient from bottom to top for text visibility */
  background: linear-gradient(
    to top,
    rgba(0, 21, 41, 0.9) 25%,
    rgba(0, 21, 41, 0) 80%
  );
}

/* "More News" Card Style */
.more-news-card {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #0d6efd;
  /* Bootstrap primary blue */
  color: white;
  font-size: 1.5rem;
  font-weight: bold;
}

/* Partner Carousel Styles */
.partner-section .logo-wrapper {
  align-items: center;
  /* Vertically center logos */
  min-height: 120px;
  /* Ensure consistent height for the slide */
}

.partner-logo {
  max-height: 80px;
  object-fit: contain;
  filter: none !important;
  /* ensure no grayscale */
}

.partner-section .partner-logo {
  max-height: 70px;
  /* Control logo size */
  width: auto;
  filter: grayscale(100%);
  opacity: 0.7;
  transition: all 0.3s ease-in-out;
}

.partner-section .partner-logo:hover,
.partner-section .partner-logo:focus {
  filter: grayscale(0%);
  opacity: 1;
  transform: scale(1.1);
}

/* Darker controls for better visibility */
.partner-section .carousel-control-prev,
.partner-section .carousel-control-next {
  width: 5%;
}

.partner-section .carousel-control-prev-icon,
.partner-section .carousel-control-next-icon {
  /* Use a CSS filter to make the default white icons dark */
  filter: invert(1) grayscale(100%) brightness(0.5);
  transform: scale(1.2);
}

/* Footer Styles */

footer {
  background-color: #f4f4f4;
  padding: 40px 20px 20px;
  font-family: "Inter", sans-serif;
  color: #333;
  bottom: 0;
  position: relative;
}

.footer-container {
  max-width: 1200px;
  margin: auto;
}

.footer-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 40px;
  border-bottom: 1px solid #ccc;
  padding-bottom: 30px;
}

.footer-logo-contact {
  flex: 1 1 300px;
}

.footer-logo {
  display: flex;
  /* flex-direction: column; */
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 20px;
}

.footer-logo img.flag {
  height: 30px;
}

.footer-logo img.rings {
  height: 25px;
  margin-top: 5px;
}

.contact-info .info-block {
  display: flex;

  align-items: flex-start;
  gap: 8px;
  margin-bottom: 10px;
}

.footer-links {
  display: flex;
  gap: 40px;
  /* flex: 1 1 400px; */
  flex-wrap: wrap;
}

.footer-links_vertical {
  display: flex;
  flex-direction: column;
}

/* 

  .footer-links div {
    min-width: 150px;
  } */

.footer-links h4 {
  font-weight: bold;
  margin-bottom: 10px;
}

.footer-links a {
  display: block;
  text-decoration: none;
  color: #333;
  font-size: 14px;
  margin-bottom: 6px;
}

.footer-links a:hover {
  color: #007acc;
}

.social-section {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  flex: 1 1 150px;
}

.social-icons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.social-icons p {
  margin-top: 1rem;
}

.social-icons a {
  margin-right: 10px;
  text-decoration: none;
  font-size: 20px;
}

#backToTop {
  margin-top: 10px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  color: #666;
}

.footer-bottom {
  text-align: center;
  font-size: 13px;
  margin-top: 20px;
}

.footer-bottom a {
  text-decoration: none;
  color: #007acc;
  margin: 0 5px;
}

@media (max-width: 768px) {
  .footer-top {
    flex-direction: column;
    gap: 30px;
  }

  .social-section {
    align-items: flex-start;
  }

  .footer-logo {
    align-items: flex-start;
  }
}

/* About Us Section
--------------------------------*/
.about-section {
  background-color: #f8f9fa;
  /* A light grey to separate from the white header/carousel */
  overflow: hidden;
  /* Prevents animations from causing scroll issues */
}

.about-section .about-logo {
  max-width: 300px;
  border-radius: 15px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    box-shadow 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.about-section .about-logo:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
}

.about-section h2 {
  color: #2c3e50;
  /* A deep, professional blue */
  margin-bottom: 1.5rem;
  /* Replaces Bootstrap's mb-4 for consistency */
  padding-bottom: 0.5rem;
  /* Space between text and underline */
  border-bottom: 4px solid #007acc;
  /* Thick blue underline */
  display: inline-block;
  /* Ensures the border only spans the text width */
}

.about-section .lead {
  color: #555;
}

.about-section .btn-primary {
  background-color: #007acc;
  border-color: #007acc;
  font-weight: 600;
  transition: all 0.3s ease-in-out;
}

.about-section .btn-primary:hover,
.about-section .btn-primary:focus-visible {
  background-color: #005c99;
  border-color: #005c99;
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0, 122, 204, 0.3);
}

@media (max-width: 768px) {
  .section-title,
  h2.section-title {
    font-size: 24px;
  }

  h3 {
    font-size: 22px;
  }

  h4 {
    font-size: 18px;
  }

  h5 {
    font-size: 16px;
  }

  .time-value {
    font-size: 20px;
  }
}