:root {
     --brand-primary: #76ff03;
     --brand-secondary: #64dd17;
     --text-primary: #ffffff;
     --text-secondary: #e0e0e0;
     --text-muted: #bdbdbd;
     --bg-dark: #1a1a1a;
     --bg-darker: #0f0f0f;
     --bg-overlay: rgba(0, 0, 0, 0.7);
     --accent-gold: #ffd700;
}
 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
}
 body {
     font-family: 'Open Sans', sans-serif;
     background-color: var(--bg-dark);
     color: var(--text-primary);
     overflow-x: hidden;
}
 .hero-section {
     min-height: 95vh;
     position: relative;
     /* display: flex;
     align-items: center; */
     /* background: linear-gradient(135deg, var(--bg-darker) 0%, var(--bg-dark) 100%); */
      
    background-size: cover;       /* scales the image to cover the element */
    background-position: center;  /* centers the image */
    background-repeat: no-repeat; /* avoids tiling */
     overflow: hidden;
}
 .hero-bg {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 800"><defs><pattern id="fencing-pattern" x="0" y="0" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="50" cy="50" r="2" fill="%23333" opacity="0.3"/></pattern></defs><rect width="100%" height="100%" fill="url(%23fencing-pattern)"/></svg>');
     opacity: 0.1;
}
 .fencing-equipment {
     position: absolute;
     width: 100%;
     height: 100%;
     overflow: hidden;
}
 .mask-silhouette {
     position: absolute;
     left: 5%;
     top: 15%;
     width: 350px;
     height: 400px;
     background: linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
     border-radius: 50% 50% 45% 45%;
     border: 1px solid rgba(255, 255, 255, 0.1);
     transform: rotate(-10deg);
     animation: float 6s ease-in-out infinite;
}
 .mask-mesh {
     position: absolute;
     top: 20%;
     left: 15%;
     width: 200px;
     height: 200px;
     background-image: repeating-linear-gradient(45deg, transparent, transparent 3px, rgba(255, 255, 255, 0.1) 3px, rgba(255, 255, 255, 0.1) 6px);
     border-radius: 50%;
     opacity: 0.6;
}
 .sword-silhouette {
     position: absolute;
     right: 10%;
     top: 20%;
     width: 4px;
     height: 400px;
     background: linear-gradient(to bottom, var(--accent-gold) 0%, #silver 20%, #silver 100%);
     transform: rotate(25deg);
     transform-origin: bottom;
     animation: swordGlint 4s ease-in-out infinite alternate;
}
 .sword-handle {
     position: absolute;
     bottom: -20px;
     left: -15px;
     width: 35px;
     height: 80px;
     background: linear-gradient(145deg, #8d6e63, #5d4037);
     border-radius: 5px;
}
 .sword-guard {
     position: absolute;
     bottom: 60px;
     left: -25px;
     width: 55px;
     height: 8px;
     background: var(--accent-gold);
     border-radius: 4px;
}
 @keyframes float {
     0%, 100% {
         transform: rotate(-10deg) translateY(0px);
    }
     50% {
         transform: rotate(-10deg) translateY(-20px);
    }
}
 @keyframes swordGlint {
     0% {
         opacity: 0.7;
         transform: rotate(25deg);
    }
     100% {
         opacity: 1;
         transform: rotate(25deg) scale(1.05);
    }
}
 .navbar-brand {
     font-family: 'Bebas Neue', sans-serif;
     font-size: 1.8rem;
     font-weight: 400;
     letter-spacing: 2px;
     color: var(--text-primary) !important;
}
 .navbar-nav .nav-link {
     color: var(--text-secondary) !important;
     font-weight: 400;
     letter-spacing: 0.5px;
     padding: 0.75rem 1.25rem !important;
     transition: all 0.3s ease;
     position: relative;
}
 .navbar-nav .nav-link:hover, .navbar-nav .nav-link:focus {
     color: var(--brand-primary) !important;
}
/* .navbar-nav .nav-link::after {
     content: '';
     position: absolute;
     bottom: 0;
     left: 50%;
     width: 0;
     height: 2px;
     background: var(--brand-primary);
     transition: all 0.3s ease;
     transform: translateX(-50%);
}
 */
/* .navbar-nav .nav-link:hover::after {
     width: 80%;
}
 */
 .navbar-toggler {
     border: none;
     padding: 4px 8px;
}
 .navbar-toggler:focus {
     box-shadow: none;
}
 .navbar-toggler-icon {
     background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.8%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='m4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
 .academy-label {
     font-family: 'Open Sans', sans-serif;
     font-size: 1.1rem;
     font-weight: 600;
     color: var(--brand-primary);
     letter-spacing: 4px;
     text-transform: uppercase;
     margin-bottom: 1rem;
     animation: fadeInUp 1s ease-out 0.5s both;
}
 .hero-title {
     font-family: 'Bebas Neue', sans-serif;
     font-size: clamp(4rem, 12vw, 8rem);
     font-weight: 400;
     line-height: 0.85;
     letter-spacing: 8px;
     text-transform: uppercase;
     margin-bottom: 2rem;
     background: linear-gradient(135deg, var(--text-primary) 0%, var(--text-secondary) 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
     animation: fadeInUp 1s ease-out 0.8s both;
}
 .hero-subtitle {
     font-size: clamp(1.1rem, 2.5vw, 1.4rem);
     font-weight: 300;
     line-height: 1.6;
     color: var(--text-secondary);
     margin-bottom: 3rem;
     max-width: 600px;
     animation: fadeInUp 1s ease-out 1.1s both;
}
 .cta-buttons {
     display: flex;
     gap: 1.5rem;
     flex-wrap: wrap;
     animation: fadeInUp 1s ease-out 1.4s both;
}
 .btn-primary-custom {
     background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-secondary) 100%);
     border: none;
     color: var(--bg-dark);
     font-weight: 600;
     font-size: 1rem;
     padding: 12px 32px;
     text-transform: uppercase;
     letter-spacing: 1px;
     border-radius: 50px;
     transition: all 0.3s ease;
     position: relative;
     overflow: hidden;
}
 .btn-primary-custom::before {
     content: '';
     position: absolute;
     top: 0;
     left: -100%;
     width: 100%;
     height: 100%;
     background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
     transition: left 0.6s ease;
}
 .btn-primary-custom:hover::before {
     left: 100%;
}
 .btn-primary-custom:hover {
     transform: translateY(-2px);
     box-shadow: 0 8px 25px rgba(118, 255, 3, 0.3);
     color: var(--bg-dark);
}
 .btn-outline-custom {
     border: 2px solid var(--text-primary);
     color: var(--text-primary);
     background: transparent;
     font-weight: 600;
     font-size: 1rem;
     padding: 10px 32px;
     text-transform: uppercase;
     letter-spacing: 1px;
     border-radius: 50px;
     transition: all 0.3s ease;
}
 .btn-outline-custom:hover {
     background: var(--text-primary);
     color: var(--bg-dark);
     transform: translateY(-2px);
     box-shadow: 0 8px 25px rgba(255, 255, 255, 0.2);
}
 @keyframes fadeInUp {
     0% {
         opacity: 0;
         transform: translateY(30px);
    }
     100% {
         opacity: 1;
         transform: translateY(0);
    }
}
/* Responsive Design */
 @media (max-width: 991.98px) {
     .navbar-nav {
         background: rgba(0, 0, 0, 0.95);
         border-radius: 10px;
         margin-top: 1rem;
         padding: 1rem;
    }
     .mask-silhouette {
         width: 250px;
         height: 300px;
    }
     .sword-silhouette {
         height: 300px;
         right: 5%;
    }
}
 @media (max-width: 767.98px) {
     .hero-section {
         min-height: 100vh;
         padding-top: 100px;
    }
     .academy-label {
         font-size: 0.9rem;
         letter-spacing: 2px;
    }
     .hero-title {
         font-size: clamp(3rem, 15vw, 5rem);
         letter-spacing: 4px;
    }
     .hero-subtitle {
         font-size: 1rem;
         margin-bottom: 2rem;
    }
     .cta-buttons {
         flex-direction: column;
         align-items: stretch;
         gap: 1rem;
    }
     .btn-primary-custom, .btn-outline-custom {
         width: 100%;
         max-width: 300px;
         margin: 0 auto;
    }
     .mask-silhouette {
         display: none;
    }
     .sword-silhouette {
         display: none;
    }
}
 @media (max-width: 575.98px) {
     .navbar-brand {
         font-size: 1.5rem;
         letter-spacing: 1px;
    }
     /* .hero-section {
         padding: 120px 0 80px;
    } */
}
/* Focus states for accessibility */
 .btn-primary-custom:focus, .btn-outline-custom:focus {
     outline: 3px solid var(--brand-primary);
     outline-offset: 2px;
}
 .navbar-nav .nav-link:focus {
     outline: 2px solid var(--brand-primary);
     outline-offset: 4px;
     border-radius: 4px;
}
 .navbar-toggler:focus {
     outline: 2px solid var(--brand-primary);
     outline-offset: 2px;
}
/* Accordion theme */
 .theme-accordion .accordion-item {
     border: none;
     margin-bottom: 10px;
     box-shadow: 0 3px 8px rgba(0, 0, 0, 0.05);
     border-radius: 8px;
     overflow: hidden;
}
 .theme-accordion .accordion-button {
     font-weight: 600;
     font-size: 1rem;
     background: #fff;
     color: var(--heading-color);
     box-shadow: none;
     padding: 1rem 1.25rem;
}
 .theme-accordion .accordion-button:focus {
     box-shadow: none;
}
 .theme-accordion .accordion-button:not(.collapsed) {
     background: var(--primary-color);
     color: rgba(var(--bs-primary-rgb), var(--bs-text-opacity)) !important;
     ;
}
 .theme-accordion .accordion-body {
     padding: 1rem 1.25rem;
     font-size: 0.95rem;
     color: var(--text-color);
}
 .news-section {
     background: linear-gradient(145deg, #0d0d0f, #16161a);
     color: #fff;
}
 .section-title .divider {
     display: inline-block;
     position: relative;
     font-size: 0.9rem;
     font-weight: 600;
     color: var(--brand-primary);
     text-transform: uppercase;
}
 /* .section-title .divider::before, .section-title .divider::after {
     content: "";
     position: absolute;
     top: 50%;
     width: 40px;
     height: 2px;
     background: var(--brand-secondary);
} */
 .section-title .divider::before {
     right: 100%;
     margin-right: 10px;
}
 .section-title .divider::after {
     left: 100%;
     margin-left: 10px;
}
 .text-gradient {
     background: linear-gradient(90deg, var(--brand-primary), var(--brand-secondary));
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
}
 .news-card {
     background: #1a1a1e;
     border-radius: 12px;
     overflow: hidden;
     transition: transform 0.3s ease, box-shadow 0.3s ease;
}
 .news-card:hover {
     transform: translateY(-6px);
     box-shadow: 0 0 20px rgba(0, 255, 180, 0.3), 0 0 10px rgba(120, 0, 255, 0.2);
}
 .news-thumb img {
     width: 100%;
     height: auto;
     display: block;
}
 .news-body {
     padding: 18px;
}
 .news-title a {
     color: #fff;
     text-decoration: none;
     font-size: 1.2rem;
     font-weight: 600;
}
 .news-meta {
     font-size: 0.85rem;
     margin: 8px 0 12px;
     color: #bbb;
}
 .news-meta i {
     color: var(--brand-secondary);
     margin-right: 4px;
}
 .news-meta span {
     margin-right: 15px;
}
 .btn-link {
     color: var(--brand-primary);
     font-weight: 600;
     text-decoration: none;
     transition: color 0.3s ease;
}
 .btn-link:hover {
     color: var(--brand-secondary);
}
 .btn-glow {
     display: inline-block;
     background: linear-gradient(90deg, var(--brand-primary), var(--brand-secondary));
     color: #fff;
     padding: 8px 18px;
     border-radius: 25px;
     font-size: 0.9rem;
     font-weight: 600;
     text-decoration: none;
     transition: all 0.3s ease;
     box-shadow: 0 0 15px rgba(0, 255, 180, 0.3);
}
 .btn-glow:hover {
     box-shadow: 0 0 25px rgba(120, 0, 255, 0.4), 0 0 40px rgba(0, 255, 180, 0.3);
}
/* Dark inputs */
 .theme-input {
     background: rgba(255, 255, 255, 0.05);
     border: 1px solid rgba(255, 255, 255, 0.1);
     color: #fff;
     border-radius: 8px;
     transition: 0.3s;
}
 .theme-input:focus {
     border-color: var(--brand-primary);
     box-shadow: 0 0 8px var(--brand-primary);
     outline: none;
}
/* Gradient button */
 .btn-gradient {
     background: linear-gradient(45deg, var(--brand-primary), var(--brand-secondary));
     color: #fff;
     font-weight: 600;
     transition: 0.3s;
}
 .btn-gradient:hover {
     box-shadow: 0 0 15px var(--brand-secondary);
     transform: translateY(-2px);
}
/* Progress bar */
 .progress-bar.bg-gradient {
     background: linear-gradient(90deg, var(--brand-primary), var(--brand-secondary));
}
/* Show dropdown on hover */
 .nav-item.dropdown:hover .dropdown-menu {
     display: block;
     margin-top: 0;
    /* align properly */
}
/* Optional: smooth fade */
 .dropdown-menu {
     display: none;
     opacity: 0;
     transition: opacity 0.3s ease-in-out;
}
 .nav-item.dropdown:hover .dropdown-menu {
     display: block;
     opacity: 1;
}
 .bg-dark-gradient {
     background: linear-gradient(135deg, #0d0d0f, #1a1a1d);
}
 .section-title {
     font-weight: 700;
     font-size: 2rem;
     position: relative;
     color: #fff;
     text-transform: uppercase;
     letter-spacing: 1px;
}
 .section-title::after {
     content: "";
     display: block;
     width: 80px;
     height: 3px;
     background: var(--brand-primary);
     margin: 12px auto 0;
     border-radius: 3px;
     box-shadow: 0 0 10px var(--brand-primary);
}
 .official-img {
     width: 240px;
     height: 240px;
     object-fit: cover;
     border-radius: 50%;
     border: 3px solid white;
     box-shadow: 0 0 20px rgba(255, 77, 196, 0.5);
     transition: transform 0.3s ease;
}
 .official-card:hover .official-img {
     transform: scale(1.08);
     box-shadow: 0 0 30px var(--brand-primary);
}
 .role-text {
     font-size: 0.95rem;
     font-weight: 600;
     color: var(--brand-secondary);
     letter-spacing: 1px;
     text-transform: uppercase;
}
 
/* Header Title */
.header-title {
  font-family: 'Ethnocentric Rg';
  font-size: 4rem;      
  line-height: 1.1;
  text-align: center;
}

/* Header Description */
.header-description {
  font-family: 'Ethnocentric Rg',;
  font-size: 1.5rem;      
  line-height: 1.4;
  text-align: center;
}

/* Tablet (≥768px) */
@media (min-width: 768px) {
  .header-title {
    font-size: 5rem;
  }
  .header-description {
    font-size: 2.5rem;
  }
}

/* Desktop (≥1200px) */
@media (min-width: 1200px) {
  .header-title {
    font-size: 8rem;
  }
  .header-description {
    font-size: 4rem;
  }
}

/* Very large screens (≥1600px) */
@media (min-width: 1600px) {
  .header-title {
    font-size: 12rem;
  }
  .header-description {
    font-size: 4rem;
  }
}





.fencing-img {
  max-width: 100%;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* Mobile (up to 767px) */
@media (max-width: 767px) {
  .fencing-img {
    height: auto;
    width:100%;
    padding:25px;
    padding-bottom:0;
  }
}

/* Tablet (768px – 1199px) */
@media (min-width: 768px) and (max-width: 1199px) {
  .fencing-img {
    height: 450px;
    margin-left: 20px;
  }
}

/* Desktop (1200px and above) */
@media (min-width: 1200px) {
  .fencing-img {
    height: 750px;
    margin-left: 82px;
  }
}



.fencing-logo {
  height: 71px;  /* default for desktops */
}

/* Tablets */
@media (max-width: 992px) {
  .fencing-logo {
    height: 50px;
  }
}

/* Mobiles */
@media (max-width: 576px) {
  .fencing-logo {
    height: 38px;
  }
}


.banner-wrapper {
  margin-top: 70px;   /* Default for desktop */
  background: #000;
}

/* Tablet */
@media (max-width: 992px) {
  .banner-wrapper {
    margin-top: 60px;
  }
}

/* Mobile */
@media (max-width: 576px) {
  .banner-wrapper {
    margin-top: 60px;
  }
}




.theme-input {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
  border-radius: 8px;
  transition: 0.3s;
}

/* Dropdown list text */
.theme-input option {
  background: #fff;     /* white dropdown background */
  color: #000;          /* black text inside dropdown */
}

/* Selected option (after choosing) */

.theme-input option:checked {
  background: rgba(255, 255, 255, 0.1);
  color: #111; /* white text matches theme */
}











.table-dark th,
.table-dark td {
  border-bottom: 1px solid #575a5e; /* neon green border */
  padding: 10px;
  vertical-align: middle;
}







/* News card */
.news-card {
  background: var(--bg-dark);
  color: var(--text-secondary);
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.3s ease;
}
.news-card:hover {
  transform: translateY(-5px);
}

/* Swiper controls */
.swiper-button-prev,
.swiper-button-next {
  color: var(--text-primary) !important; 
  background: none !important; 
  font-size: 28px;
}

.swiper-button-prev {
  left: -50px; 
}

.swiper-button-next {
  right: -55px;
}

/* Remove dots */
.swiper-pagination { display: none !important; }


.text-justify {
    text-align: justify;
}





.gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    padding: 20px;
    padding-top: 0;
}


.gallery .images {
    gap: 15px;
    /* margin: 40px 0; */
    columns: 5 310px;
    list-style: none;
}


.gallery .images .img {
    display: flex
;
    cursor: pointer;
    overflow: hidden;
    position: relative;
    margin-bottom: 14px;
    border-radius: 4px;
}


.gallery .images img {
    width: 100%;
    transition: transform 0.2s 
ease;
}

.gallery-img {
    width: 200px;
    height: auto;
    cursor: pointer;
    transition: transform 0.3s 
ease;
}


img {
    max-width: 100%;
    border-radius: 1px;
}


.lightbox img {
    max-width: 100%;
}
.lightbox-image {
    max-width: 80%;
    /* max-height: 80%; */
    margin-top: 50px;
}




.lightbox {
  display: none;
  position: fixed;
  z-index: 1000000000000000000000000000000000000000000;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  text-align: center;
  align-items: center;
  justify-content: center;
}

.lightbox-image {
  max-width: 80%;
  /* max-height: 80%; */
  /* margin-top: 50px; */
}

.close, .prev, .next {
  position: absolute;
  color: white;
  font-size: 2rem;
  cursor: pointer;
  user-select: none;
}

.close {
  top: 20px;
  right: 30px;
}

.prev {
  top: 50%;
  left: 30px;
  transform: translateY(-50%);
}

.next {
  top: 50%;
  right: 30px;
  transform: translateY(-50%);
}













.winner-card {
  background: var(--bg-darker);
  border: 2px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 20px rgba(118, 255, 3, 0.2);
  transition: transform 0.3s ease;
}



.winner-item h4 {
  color: var(--text-primary);
}

.registration-section .nav-link{
  color:white !important;
}
.registration-section .nav-link.active {
  color: #111 !important;
}

.font-small {
  font-size: 13px;
}

@media (min-width: 768px) {
  .carousel-margin{
    margin-top: 20px;
  }
}


@media (min-width: 1024px) {
  .carousel-margin{
    margin-top: 27px;
  }
}