/* === 4v4 Fonts === */
@font-face{
  font-family: "Dilland Sans";
  src: url("../../webfonts/DillandSans.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "Centrale Sans";
  src: url("../../webfonts/Centrale-Sans-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "Urban Sketart";
  src: url("../../webfonts/UrbanSketart.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* If your CSS file sits directly in /css/ instead of deeper, change "../../webfonts/" to "../webfonts/". */


:root{
    --font-global: "Centrale Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --font-alt:    "Dilland Sans", "Centrale Sans", Arial, sans-serif; 
    --font-special:"Urban Sketart","Dilland Sans", cursive;
    --section-padding-y: 130px;
    --color-dark-1: #0F1727;
    --color-dark-2: #1E2535;
    --color-dark-3: #202737;
    --color-dark-3a: #202730;;
    --color-gray-1: #777;
    --border-radius-default: 0;
    --border-radius-large: 0;
    --4v4-lime: #C6EE57;
}

body{
    letter-spacing: 0;
}
.inner-nav ul{
    font-size: 17px;
    line-height: 1.6; 
    font-weight: 400;
    letter-spacing: 0;
}
.inner-nav > ul > li > a{
    opacity: .78;     
}
.inner-nav ul li a{
    position: relative;
}
.inner-nav > ul > li > a:not(.no-hover):before{
    content: "";
    position: absolute;
    top: calc(50% + 0.7em);
    left: 0;
    display: block;
    width: 100%;
    height: 2px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform .27s var(--ease-default);
}
.inner-nav > ul > li > a.active:before{
    transform: scaleX(1);
}
.main-nav.mobile-on .inner-nav > ul > li > a:not(.no-hover):before{
    display: none;
}
.form input[type="text"],
.form input[type="email"],
.form input[type="number"],
.form input[type="url"],
.form input[type="search"],
.form input[type="tel"],
.form input[type="password"],
.form input[type="date"],
.form input[type="color"],
.form select{
    padding-bottom: 1px;
}
.form input[type="text"].input-sm,
.form input[type="email"].input-sm,
.form input[type="number"].input-sm,
.form input[type="url"].input-sm,
.form input[type="search"].input-sm,
.form input[type="tel"].input-sm,
.form input[type="password"].input-sm,
.form input[type="date"].input-sm,
.form input[type="color"].input-sm,
.form select.input-sm,
.form textarea.input-sm{
    font-size: 16px;
}
.form input[type="text"].input-md,
.form input[type="email"].input-md,
.form input[type="number"].input-md,
.form input[type="url"].input-md,
.form input[type="search"].input-md,
.form input[type="tel"].input-md,
.form input[type="password"].input-md,
.form input[type="date"].input-md,
.form input[type="color"].input-md,
.form select.input-md,
.form textarea.input-md{
    font-size: 17px;
}
.form input[type="text"]::placeholder,
.form input[type="email"]::placeholder,
.form input[type="number"]::placeholder,
.form input[type="url"]::placeholder,
.form input[type="search"]::placeholder,
.form input[type="tel"]::placeholder,
.form input[type="password"]::placeholder,
.form input[type="date"]::placeholder,
.form input[type="color"]::placeholder,
.form select::placeholder,
.form textarea::placeholder{
    color: #999;
}
.form label{
    margin-bottom: 14px;
    font-family: var(--font-alt);
    font-size: 22px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.form .form-group{
    margin-bottom: 45px;
}
.form-tip,
.form-tip a{
    font-size: 13px;
}
.btn-mod,
a.btn-mod{
    font-size: 17px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}
.btn-mod .icon{
    margin-left: 2px;
}
.btn-mod.btn-small{
    padding: 4px 14px;
    font-size: 17px;
    font-weight: 400;
    letter-spacing: 0;
}
.btn-mod.btn-medium{
    padding: 12px 26px;
    font-size: 18px;
    font-weight: 400;
    letter-spacing: -0.007em;
} 
.btn-mod.btn-large{
    padding: 15px 32px;
    font-size: 20px;
    font-weight: 400;
    letter-spacing: -0.007em;
} 
.btn-mod.btn-ellipse{
    font-family: var(--font-alt);
    letter-spacing: 0.14em;
}
.btn-border,
.btn-border-w,
.btn-border-c{
    border-width: 2px !important;
}
hr{
    opacity: .2;
}
.hs-title-1{
    letter-spacing: -0.0125em;
}
.hs-title-12{
    letter-spacing: -0.0125em;
}
.hs-title-13{
    letter-spacing: -0.0125em;
}
.section-title-small{
    font-size: 32px;
}
.section-title-tiny{
    font-size: 18px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.15em;
}
.section-title-inline{
    padding-top: 3px;
    font-family: var(--font-alt);
    letter-spacing: 0.15em;
}
.link-strong{
    font-family: var(--font-alt);
    font-size: 18px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
.marquee-style-2{
    font-family: var(--font-alt);
    letter-spacing: 0.15em;
}
.accordion-1,
.accordion-1 > dt > a{
    border-width: 2px;
}
.accordion-1 > dt{
    font-family: var(--font-alt);
    letter-spacing: 0.08em;
}
.steps-1-title{
    font-family: var(--font-alt);
    letter-spacing: 0;
}
.number-2-title{
    margin-bottom: 5px;
    font-family: var(--font-alt);
    letter-spacing: -0.025em;
}
.portfolio-2-title{
    letter-spacing: -0.008em;
}
.testimonials-slider-2 blockquote p{
    font-family: var(--font-alt);
    letter-spacing: 0.01em;
}
.ts2-author{
    font-family: var(--font-alt);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.ts2-author .small{
    font-family: var(--font-global);
    text-transform: none;
    letter-spacing: 0;
}
.post-prev-2-title{
    margin-bottom: 10px;
    font-size: 26px;
    line-height: 1.5;
}
.post-prev-2-info{
    font-size: 16px;
    text-transform: unset;
    letter-spacing: 0;
}
.pagination a,
.pagination span{
    font-weight: 400;
}
.form-tip{
    font-size: 14px;
    line-height: 1.714;
}
.footer-1{
    font-family: var(--font-alt);
    font-size: 18px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.075em;
}
.fw-social-inline .link-strong:before{
    display: none;
}
.light-content .fw-top-link .icon{
    width: 38px;
    height: 38px;
    border-width: 2px;
}
.footer-text{
    font-family: var(--font-global);
    font-size: 16px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: -0.01em;
}
.footer-text a{
    color: inherit;
    text-decoration: underline;
}
.footer-text .small{
    font-size: 14px;
}
.light-content .footer-text{
    color: var(--color-gray-3);
}
.fw-top-link-underline:before{
    height: 2px;
    opacity: 1;
}
.features-2-item:before{
    border: 1px solid var(--color-dark-1);
	background:	none;
    opacity: 0.15;
    transition: opacity .27s var(--ease-default);
    z-index: -1;
}
.features-2-item:hover:before{
    opacity: 1;
}
.features-2-label{
    font-weight: 500;
    color: var(--color-dark-1);
    background: none;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
}
.features-2-icon:before{
    background: var(--color-gray-light-1);
    opacity: 1;
    z-index: -1;
}
.features-2-icon svg{
    fill: var(--color-dark-1);
}
.light-content .features-2-item:before{    
	background: var(--color-dark-mode-gray-2);
    border: 1px solid var(--color-dark-mode-gray-2);
    transition: border-color .27s var(--ease-default);
    opacity: 1;
    z-index: -1;
}
.light-content .features-2-item:hover:before{
    background: var(--color-dark-mode-gray-2);
    opacity: 1;
}
.light-content .features-2-label{
    color: #fff;
    background: none;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
}
.light-content. features-2-icon{
    color: #fff;
}
.light-content .features-2-icon svg{
    fill: #fff;
}
.light-content .features-2-icon:before{
    background: var(--color-dark-mode-gray-2);
    opacity: 1;
    z-index: -1;
}
.light-content .features-2-descr{
    color: var(--color-dark-mode-gray-1);
}
.bg-border-gradient:before{
    background: none;
    border: 1px solid var(--color-dark-1);
    opacity: 0.15;
}
.light-content .bg-border-gradient:before{
    background: none;
    border: 1px solid #fff;
    opacity: 0.25;
}
.bg-gradient-dark-alpha-1:before{
    opacity: .9;
}
.bg-gradient-dark-alpha-2:before{
    opacity: .9;
}
.work-navigation a, .work-navigation a:visited{
    color: var(--color-dark-1);
}
@media only screen and (max-width: 1366px) {
    .section-title-small{
        font-size: calc(1.159rem + 0.98vw);
    }
    .post-prev-2-title{
        font-size: calc(1.135rem + 0.57vw);
    }
}


.text-lime {
    color: #C6EE57 !important;
}


.btn-lime,
a.btn-lime {
    font-size: 17px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    background-color: #C6EE57; 
    color: black;  
    border: 2px solid #C6EE57; 
    padding: 12px 26px; 
    border-radius: 5px; 
    transition: all 0.3s ease-in-out; 
    text-decoration: none; 
}

a.btn-lime {
    color: black !important;  
}

.btn-lime:hover,
a.btn-lime:hover {
    background-color: #b8e84d; 
    color: black;  
    border-color: #b8e84d; 
    transform: translateY(-3px); 
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); 
}

.btn-lime:disabled,
a.btn-lime:disabled {
    background-color: #A5C441; 
    color: black; 
    border-color: #A5C441;
    cursor: not-allowed; 
    opacity: 0.7;
}

.btn-lime.btn-small {
    padding: 4px 14px;
    font-size: 15px;
}

.btn-lime.btn-medium {
    padding: 12px 26px;
    font-size: 18px;
}

.btn-lime.btn-large {
    padding: 15px 32px;
    font-size: 20px;
}


.text-global{
  font-family: var(--font-global);      /* Dilland Sans */
}

/* Titles = Dilland Sans */
.text-title{
  font-family: var(--font-alt);      /* Dilland Sans */
  font-weight: 400;
  line-height: .95;
  letter-spacing: -0.01em;
}

/* Optional stronger weight (synthesized unless you add a real bold file) */
.text-title--bold{ font-weight: 700; }

/* Graffiti callouts = Urban Sketart */
.text-graffiti{
  font-family: var(--font-special) !important;  /* Urban Sketart */
  font-weight: 400;
  line-height: .9;
  letter-spacing: 0.01em;
}

/* Optional effects (use if you want the sketched/outlined look) */
.text-graffiti--outline{
  -webkit-text-stroke: 2px currentColor;
  color: transparent;
}
.text-graffiti--glow{
  text-shadow:
    0 0 0 #C6EE57,
    0 0 8px #C6EE57,
    0 0 18px rgba(198,238,87,.7);
}


.custom-line {
    width: 50%;
    margin: 0.5rem auto; /* Centers the line */
    border: 1px solid #fff;
}

.mt-5 {
    margin-top: 5px !important;
}
.mt-10 {
    margin-top: 10px !important;
}
.mt-15 {
    margin-top: 15px !important;
}
.mt-20 {
    margin-top: 20px !important;
}
.mt-25 {
    margin-top: 25px !important;
}
.mt-30 {
    margin-top: 30px !important;
}
.mt-35 {
    margin-top: 35px !important;
}
.mt-40 {
    margin-top: 40px !important;
}
.mt-45 {
    margin-top: 45px !important;
}
.mt-50 {
    margin-top: 50px !important;
}




/* General Modal Styling */
.swal-popup {
    background: linear-gradient(to right, #323540, #181C27); /* Gradient Background */
    padding: 20px;
    border-radius: 15px;
    color: #ffffff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

/* Input Fields */
.swal-form-control {
    font-size: 14px;
    line-height: 1.5;
    padding: 10px 12px;
    border-radius: 5px;
    background: transparent;
    border: 1px solid #0099e6;
    color: #ffffff;
    width: 100%; /* Ensure full width on all screens */
}

/* Add top margins on mobile screens */
@media (max-width: 768px) {
    .swal-form-control {
        margin-top: 10px;
    }
    .swal-label {
        margin-top: 10px; /* Add some spacing above labels */
    }
    .modal-footer {
        margin-top: 20px;
    }
}

/* Gender Dropdown */
.swal-gender-select:focus {
    color: #000 !important; /* Black text while dropdown is open */
    background: #ffffff !important; /* White background for dropdown */
}

.swal-gender-select option {
    color: #000; /* Black text for dropdown options */
}

.swal-gender-select {
    color: #ffffff; /* White text when not focused */
}

/* Lime Button */
.swal-btn-lime {
    background-color: #D2FE55;
    color: #0D1A2F;
    border-radius: 5px;
    padding: 12px 0;
    font-size: 16px;
    border: none;
    text-align: center;
}

.swal-btn-lime:hover {
    background-color: #b8e84d;
}

/* Cancel Registration Text */
.swal-cancel {
    font-size: 12px;
    color: #ffffff;
    text-decoration: underline;
    cursor: pointer;
}


/* Label Styling */
.swal-label {
    font-size: 14px;
    color: snow;
    margin-bottom: 5px;
    display: block;
}




.squiggly-animated {
  -webkit-animation: squiggly-anim 0.6s linear infinite;
          animation: squiggly-anim 0.6s linear infinite;
}


@-webkit-keyframes squiggly-anim {
  0% {
    filter: url("#squiggly-0");
  }
  25% {
    filter: url("#squiggly-1");
  }
  50% {
    filter: url("#squiggly-2");
  }
  75% {
    filter: url("#squiggly-3");
  }
  100% {
    filter: url("#squiggly-4");
  }
}
@keyframes squiggly-anim {
  0% {
    filter: url("#squiggly-0");
  }
  25% {
    filter: url("#squiggly-1");
  }
  50% {
    filter: url("#squiggly-2");
  }
  75% {
    filter: url("#squiggly-3");
  }
  100% {
    filter: url("#squiggly-4");
  }
}



/* Background utility */
.bg-lime{
  background-color: var(--4v4-lime) !important;
  color: #000; /* good contrast on lime */
}

/* Make links readable on lime backgrounds */
.bg-lime a{
  color: #000;
  text-decoration: underline;
}

/* Optional: subtle hover darken */
.bg-lime-hover:hover{
  background-color: #b8e84d !important; /* ~5–8% darker */
}



.pro-tip-logo img{
  max-width: 240px;   
  height: auto;
  display: block;
  margin: 0 auto;     
}




/* Card shell — portrait: height > width */
.tournament-card.portrait{
  position: relative;
  aspect-ratio: 3 / 4;                 /* portrait shape */
  border-radius: 22px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  /* subtle base shadow */
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
  transition: transform .22s ease, box-shadow .22s ease, filter .22s ease;
}

/* Soft top fade for caption legibility */
.tournament-card.portrait::before{
  content:"";
  position:absolute; inset:0 0 55% 0;
  background: linear-gradient(to bottom, rgba(255,255,255,.88), rgba(255,255,255,0));
  pointer-events:none;
}

/* Caption at top */
.card-caption{
  position: absolute;
  top: 18px; left: 18px; right: 18px;
  text-align: center;
}
.caption-title{
  font-family: var(--font-alt);     /* Dilland Sans */
  font-weight: 700;                 /* synthesized bold */
  text-transform: uppercase;
  letter-spacing: .02em;
}
.caption-sub{
  margin-top: 6px;
  font-family: var(--font-global);  /* Centrale Sans */
  font-weight: 400;
}

/* Hover: lime rim + tiny enlarge + stronger shadow */
.tournament-card.portrait:hover{
  transform: translateY(-4px) scale(1.01);
  box-shadow:
    0 0 0 3px var(--4v4-lime),
    0 18px 42px rgba(0,0,0,.28),
    0 16px 34px rgba(198,238,87,.25);
}

/* Mobile height tuning if you prefer a bit shorter on phones */
@media (max-width: 575.98px){
  .tournament-card.portrait{ aspect-ratio: 4 / 5; }
}



/* ----------------------------
A) Keep navbar transparent on scroll (desktop)
-----------------------------*/
@media (min-width: 992px){
  .main-nav.dark.transparent,
  .main-nav.dark.transparent.is-sticky,
  .main-nav.dark.transparent.is-stuck,
  .main-nav.dark.light-after-scroll,
  .main-nav.dark.light-after-scroll.is-sticky,
  .main-nav-sub{
    background: transparent !important;
    box-shadow: none !important;
    border-color: transparent !important;
  }
  .main-nav:before{ background: transparent !important; }

  /* Make the top bar a positioning context so we can center the tray */
  .main-nav-sub{
    position: relative;              /* needed for absolute centering below */
    display: flex;
    align-items: center;
  }
}

/* ----------------------------
B) Desktop-only pill nav (full lime fill, perfectly centered)
   Uses: .nav-4v4-desktop / .nav-4v4-segments / .nav-4v4-link / .nav-4v4-register
-----------------------------*/
@media (min-width: 992px){
  /* Hide theme desktop menu; mobile keeps burger */
  .inner-nav.desktop-nav{ display: none !important; }

  /* Right side container (keeps Register on the far right) */
  .nav-4v4-desktop{
    flex: 1 1 auto;
    display: flex;
    justify-content: flex-end;       /* Register to the right edge */
    align-items: center;
    gap: 12px;
    min-width: 0;
  }

  /* The segmented tray — ABSOLUTE CENTER in the bar */
  .nav-4v4-segments{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%); /* true center, independent of logo/Register widths */
    z-index: 3;

    display: inline-flex;
    gap: 0;
    padding: 0;                       /* no inner rim */
    margin: 0;                        /* no UL default margin */
    list-style: none;                 /* kill bullets */

    background: rgba(0,0,0,.58);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 9999px;
    overflow: hidden;                 /* clip hover fill to shape */
    align-items: center;
  }
  .nav-4v4-segments > li{ list-style: none; }
  .nav-4v4-segments > li::marker{ content: ''; }
  .nav-4v4-segments > li + li::before{ display: none; } /* no separators */

  .nav-4v4-link{
    display: block;
    padding: 8px 16px;                /* compact */
    font-size: 14px;
    line-height: 1;
    color: rgba(255,255,255,.92);
    background: transparent;
    border-radius: 0;                 /* middle segments are square */
    transition: background-color .18s ease, color .18s ease, transform .18s ease;
  }
  /* Rounded ends on first/last only */
  .nav-4v4-segments > li:first-child .nav-4v4-link{
    border-top-left-radius: 9999px; border-bottom-left-radius: 9999px;
  }
  .nav-4v4-segments > li:last-child .nav-4v4-link{
    border-top-right-radius: 9999px; border-bottom-right-radius: 9999px;
  }

  /* Full lime fill on hover/active (no dark border showing) */
  .nav-4v4-link:hover,
  .nav-4v4-link.active{
    background: var(--4v4-lime);
    color: #000;
    transform: translateY(-1px);
    box-shadow: none;
  }

  /* Register button styled as a matching pill */
  .nav-4v4-register{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;                /* matches .nav-4v4-link height */
    font-size: 14px;
    line-height: 1;
    background: var(--4v4-lime);
    color: #000 !important;
    border-radius: 9999px;
    text-decoration: none;
    border: 1px solid transparent;
    transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
  }
  .nav-4v4-register:hover{
    background: #b8e84d;
    transform: translateY(-1px);
    box-shadow: 0 8px 16px rgba(198,238,87,.25);
  }
}



/* Force left alignment and comfortable width */
.hero-copy{
  text-align: left !important;
  max-width: 52rem;     /* adjust if you want tighter/wider block */
  color:#fff;
  text-shadow: 0 2px 14px rgba(0,0,0,.45);
}

/* BIGGER headline */
.hero-copy .text-graffiti{
  font-size: clamp(45px, 10vw, 130px);   
  line-height: .84;
  letter-spacing: 0.01em;
}

/* Supporting lines + tag as before */
.hero-lines{
  margin-top: 22px;
  font-family: var(--font-alt);
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
  font-size: clamp(14px, 2vw, 22px);
  line-height: 1.5;
}
.hero-tag{
  margin-top: 18px;
  font-family: var(--font-alt);
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  font-size: clamp(14px, 1.7vw, 20px);
}

/* Small screens: still left-aligned, but scale headline down a bit */
@media (max-width: 767.98px){
  .hero-copy{ max-width: none; }
  .hero-copy .text-graffiti{ font-size: clamp(44px, 16vw, 96px); }
  .hero-lines{ font-size: 15px; }
  .hero-tag{ font-size: 14px; }
}




/* Make the container a positioning context for the overlay */
.hero-slide-alt .container{ position: relative; }

/* Overlay block — placed further right & centered vertically */
.hero-alt{
  position: absolute;
  left: 8vw;                 /* move text off the far left edge */
  transform: translateY(-50%);
  max-width: 60vw;            /* comfortable measure */
  color: #fff;
  text-align: left;
  text-shadow: 0 2px 14px rgba(0,0,0,.45);
}

/* Big title (Urban Sketart look, but with separate class) */
.hero-alt-title{
  font-family: var(--font-special);      /* Urban Sketart */
  font-weight: 400;
  line-height: .86;
  letter-spacing: .005em;
  font-size: clamp(64px, 14vw, 200px);   /* larger than slide 1 */
  margin: 0 0 .1em 0;
}

/* Sub line (Dilland Sans uppercase) */
.hero-alt-sub{
  font-family: var(--font-alt);          /* Dilland Sans */
  font-weight: 800;                      /* synthesized bold */
  text-transform: uppercase;
  letter-spacing: .03em;
  font-size: clamp(18px, 2.4vw, 38px);   /* bigger like the mock */
  margin: 0;
}

/* Responsive tweaks for phones */
@media (max-width: 767.98px){
  .hero-alt{
    left: 20px;
    right: 20px;
    top: auto;
    bottom: 14vh;                        /* sit above dots/controls */
    transform: none;
    max-width: none;
  }
  .hero-alt-title{ font-size: clamp(44px, 16vw, 96px); }
  .hero-alt-sub  { font-size: clamp(14px, 4.5vw, 22px); }
}




/* Center & enlarge hero-alt on phones only */
@media (max-width: 767.98px){
  .hero-alt--mobile-center{
    position: absolute;
    left: 50% !important;
    top: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
    text-align: center !important;
    max-width: 90vw;
    z-index: 5;
  }
  .hero-alt--mobile-center .hero-alt-title{
    font-size: 110px;
    line-height: .84;
  }
  .hero-alt--mobile-center .hero-alt-sub{
    font-size: 35px;  /* bigger */
    letter-spacing: .04em;
  }
}




@media (max-width: 767.98px){
  .home-section.bg-scroll{
    background-position:
      var(--bgx-m, var(--bgx,50%))
      var(--bgy-m, var(--bgy,50%)) !important;
  }
}




/* =========================
   ABOUT HERO (kid in background)
   ========================= */
.about-hero{
  background-position: left center;
  background-size: cover;
  background-repeat: no-repeat;
}

.about-hero .container{ position: relative; }

/* Right-side text panel */
.about-hero-box{
  margin-left: auto;              /* pushes to the right half */
  max-width: 700px;
  color: #111;
  text-shadow: none;
}

/* Kicker: WHAT IS */
.about-kicker{
  font-family: var(--font-alt);   /* Dilland Sans */
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: clamp(28px, 3.2vw, 54px);
  line-height: 1;
  margin-bottom: .35em;
}

/* Brand lockup image */
.about-lockup{
  display: block;
  width: clamp(320px, 40vw, 520px);
  height: auto;
  margin: 0 0 .75rem 0;
}

/* Text fallback if no image lockup is available */
.about-lockup-txt{
  font-family: var(--font-special); /* Urban Sketart */
  font-size: clamp(60px, 8vw, 140px);
  line-height: .9;
  margin: 0 0 .5rem 0;
}
.about-lockup-txt span{
  display: inline-block;
  letter-spacing: .02em;
}

/* Description paragraph */
.about-lede{
  font-family: var(--font-global);  /* Centrale Sans */
  font-size: clamp(16px, 1.25vw, 18px);
  line-height: 1.75;
  margin: .5rem 0 1.2rem 0;
  color: #222;
}

/* IT’S: */
.about-its{
  font-family: var(--font-alt);     /* Dilland Sans */
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: clamp(22px, 1.8vw, 28px);
  margin: 1rem 0 .6rem 0;
}

/* Bulleted list */
.about-list{
  margin: 0; padding: 0;
  list-style: none;
  font-family: var(--font-global);
  font-size: clamp(16px, 1.15vw, 18px);
  line-height: 1.7;
  color: #222;
}
.about-list li{
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: .35rem;
}
.about-list li::before{
  content: "›";
  position: absolute; left: 0; top: 0;
  font-family: var(--font-alt);
  font-weight: 900;
  transform: translateY(0.05em);
  color: #000;
}

/* --------- Mobile tweaks --------- */
@media (max-width: 991.98px){
  .about-hero{
    background-position: 15% top;      /* keep the kid visible */
  }
  .about-hero-box{
    margin: 0 auto;
    max-width: 88vw;
    background: rgba(255,255,255,.0);   /* adjust if you need more contrast */
  }
}
@media (max-width: 575.98px){
  .about-kicker{ letter-spacing: .08em; }
  .about-list li{ padding-left: 1.25rem; }
}

/* Optional: if any text ever overlaps the kid on tablet sizes,
   add a gentle text backdrop just at those breakpoints:
@media (max-width: 991.98px){
  .about-hero-box{ background: rgba(255,255,255,.75); border-radius: 8px; padding: 16px; }
}
*/





/* Responsive, centered YouTube embed */
.yt-embed{
  position: relative;
  width: 100%;
  max-width: 1200px;      /* caps it on huge screens */
  margin-inline: auto;    /* centered */
  aspect-ratio: 16 / 9;   /* keeps the frame proportional */
  background: #000;
  border-radius: 8px;
  box-shadow: 0 12px 30px rgba(0,0,0,.25);
  overflow: hidden;
}
.yt-embed iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}



/* =========================================================
   4v4 Rules & Format – FULL CSS
   Paste at the end of your stylesheet used by rules.html
   (assumes var(--font-alt) = Dilland, var(--font-global) = Centrale)
   ========================================================= */

/* ---------- Anchor offset for sticky navbar ---------- */
:root{
  --nav-offset: 110px;            /* desktop/tablet navbar height */
}
@media (max-width: 991.98px){
  :root{ --nav-offset: 86px; }    /* phones */
}
html{
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-offset);
}

/* =========================================================
   SECTION WRAPPER (static background, no parallax)
   ========================================================= */
.rules-section{
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: scroll !important;   /* static */
  color: #111;
  padding-top: 28px;                           /* content starts below the blue band */
  padding-bottom: 80px;
}

/* container is already provided by theme; keep relative for safety */
.rules-section .container{ position: relative; }

/* =========================================================
   TOP INDEX (links displayed over the blue band area)
   ========================================================= */
.rules-index{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px 28px;
  padding: 22px 0 34px;
}
.rules-index a{
  display: block;
  font-family: var(--font-alt);
  text-transform: uppercase;
  letter-spacing: .07em;
  font-size: clamp(13px, 1vw, 14.5px);
  line-height: 1.35;
  color: #fff;
  text-decoration: none;
  opacity: .95;
}
.rules-index a .num{ margin-right: 8px; }
.rules-index a:hover{ opacity: 1; text-decoration: underline; }

/* =========================================================
   RULE ITEMS – inline title column + two bullet columns
   ========================================================= */

/* Base layout: 3 columns = [aside | col-1 | col-2] */
.rule-item{
  display: grid;
  grid-template-columns: minmax(210px, 280px) 1fr 1fr;
  column-gap: 48px;
  row-gap: 0;
  align-items: start;
  padding: 28px 0;
  border-top: 1px solid rgba(0,0,0,.18);
  scroll-margin-top: var(--nav-offset); /* anchor offset per item */
}
.rule-item:last-of-type{
  border-bottom: 1px solid rgba(0,0,0,.18);
}

/* First block sits lower so it doesn't overlap the blue band */
.rule-item:first-of-type{
  margin-top: clamp(18px, 3.2vw, 32px);
}

/* Left inline head (badge + title) */
.rule-head{
  grid-column: 1;
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;                                      /* keep inline with bullets */
}

/* Football badge behind number */
.badge-round{
  --ball-badge: url("../../images/ball-bullet-point.png"); /* update path if needed */
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--ball-badge) center / cover no-repeat;
  display: grid;
  place-items: center;
  color: #fff;
  font-family: var(--font-alt);
  font-weight: 900;
  font-size: 16px;
  line-height: 1;
  text-shadow: 0 1px 0 rgba(0,0,0,.35);
}

/* Title (inline with badge) */
.rule-title{
  margin: 0;
  font-family: var(--font-alt);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .06em;
  line-height: 1.05;
  font-size: clamp(20px, 1.4vw, 27px);
}

/* Bullets area spans the two right columns */
.rule-body{
  grid-column: 2 / 4;                              /* spans col-2 and col-3 */
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px 48px;
}
.rule-body ul{
  margin: 0;
  padding-left: 1.1rem;
  font-family: var(--font-global);
  font-size: clamp(14px, 1.05vw, 16.5px);
  line-height: 1.6;
}
.rule-body li{ margin: .25rem 0; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1199.98px){
  .rule-item{
    column-gap: 36px;
  }
  .rule-body{
    gap: 18px 36px;
  }
}
@media (max-width: 991.98px){
  .rules-index{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 18px;
  }
  .rule-item{
    grid-template-columns: 1fr;     /* stack */
    row-gap: 12px;
  }
  .rule-head{ grid-column: 1; }
  .rule-body{
    grid-column: 1;
    grid-template-columns: 1fr;     /* single column bullets */
    gap: 16px;
  }
}
@media (max-width: 575.98px){
  .rules-index{ grid-template-columns: 1fr; }
  .badge-round{ width: 38px; height: 38px; font-size: 15px; }
}




/* Scoped to our FAQ only */
.accordion-4v4 .accordion-item{
  background: rgba(0,0,0,.58);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 12px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.accordion-4v4 .accordion-item:hover{
  border-color: rgba(198,238,87,.4);
  box-shadow: 0 8px 18px rgba(0,0,0,.25);
}

/* Header button */
.accordion-4v4 .accordion-button{
  padding: 16px 20px;
  font-family: var(--font-alt);     /* Dilland Sans */
  font-size: 18px;
  line-height: 1.2;
  color: #fff;
  background: transparent;
  box-shadow: none !important;
  border: 0;
}
.accordion-4v4 .accordion-button:focus{
  outline: none;
  box-shadow: 0 0 0 3px rgba(198,238,87,.3) !important;
}

/* Custom chevron */
.accordion-4v4 .accordion-button::after{
  background-image: none !important;
  content: "";
  width: 12px; height: 12px;
  margin-left: auto;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform .2s ease, color .2s ease;
}
.accordion-4v4 .accordion-button:not(.collapsed)::after{
  transform: rotate(45deg);
  color: #000;
}

/* Open state = lime fill */
.accordion-4v4 .accordion-button:not(.collapsed){
  color: #000;
  background: var(--4v4-lime);
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.05) !important;
}
.accordion-4v4 .accordion-button:not(.collapsed) + .accordion-collapse .accordion-body{
  border-top: 1px solid rgba(0,0,0,.08);
}

/* Body */
.accordion-4v4 .accordion-body{
  padding: 16px 20px 18px;
  font-family: var(--font-global);  /* Centrale Sans */
  font-size: 16px;
  color: #e9e9e9;
  background: rgba(0,0,0,.45);
}
.accordion-4v4 .link-lime{
  color: var(--4v4-lime);
  text-decoration: underline;
}

/* Make it tighter on small screens */
@media (max-width: 575.98px){
  .accordion-4v4 .accordion-button{ font-size: 16px; padding: 14px 16px; }
  .accordion-4v4 .accordion-body{ font-size: 15px; padding: 14px 16px; }
}




:root{ --4v4-lime:#C6EE57; }

/* Card shell */
.reg-card{
  background: rgba(0,0,0,.58);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  padding: 22px;
  color: #fff;
}

/* Step tabs styled like your segmented nav */
.nav-4v4-steps{
  display: inline-flex;
  gap: 0;
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 9999px;
  overflow: hidden;
}
.nav-4v4-steps .nav-link{
  border: 0;
  border-radius: 0;
  color: rgba(255,255,255,.92);
  padding: 10px 16px;
  font-size: 14px;
  font-family: var(--font-alt);
}
.nav-4v4-steps .nav-link:first-child{ border-top-left-radius: 9999px; border-bottom-left-radius: 9999px; }
.nav-4v4-steps .nav-link:last-child{ border-top-right-radius: 9999px; border-bottom-right-radius: 9999px; }
.nav-4v4-steps .nav-link.active{
  background: var(--4v4-lime);
  color: #000;
}

/* Forms */
.reg-card .form-label{
  font-family: var(--font-alt);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 14px;
  margin-bottom: 6px;
}
.reg-card .form-control,
.reg-card .form-select{
  background: rgba(0,0,0,.35);
  color: #fff;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 10px;
}
.reg-card .form-control::placeholder{ color: #aaa; }
.reg-card .form-control:focus,
.reg-card .form-select:focus{
  border-color: var(--4v4-lime);
  box-shadow: 0 0 0 3px rgba(198,238,87,.25);
  outline: 0;
}

/* Invalid feedback (simple) */
.reg-card .form-control.is-invalid,
.reg-card .form-select.is-invalid{
  border-color: #ff6b6b;
}

/* Player row headings */
.player-label{
  font-family: var(--font-alt);
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 14px;
  color: rgba(255,255,255,.75);
  margin-top: 6px;
}

/* Tighten on small screens */
@media (max-width: 575.98px){
  .reg-card{ padding: 16px; }
  .nav-4v4-steps .nav-link{ padding: 8px 12px; font-size: 13px; }
}




/* ---------- Registration: tabs ---------- */
.reg-tabs .nav-link{
  background:#000;                 /* inactive = black */
  color:#fff;
  border:1px solid rgba(255,255,255,.25);
  border-radius:9999px;
  opacity:1;
}
.reg-tabs .nav-link:hover{ background:#111; color:#fff; }
.reg-tabs .nav-link.active{
  background:var(--4v4-lime);      /* active = lime */
  color:#000;
  border-color:var(--4v4-lime);
  box-shadow:0 0 0 3px rgba(198,238,87,.35) inset;
}

/* ---------- Registration: helper / hint text ---------- */
.reg-hint{
  color:#fff;                      /* force white for readability */
  opacity:.95;
}

/* ---------- Registration: selects (fix unreadable text) ---------- */
.form-select,
.form-select:focus{
  background-color:#fff;           /* white menu with dark text */
  color:#111;
  border-color:#C6EE57;            /* subtle lime outline to match theme */
}

/* Some browsers need this for the open dropdown list items */
.form-select option{
  color:#111;
  background:#fff;
}

/* Placeholder/disabled option tone */
.form-select option[disabled],
.form-select option[disabled][selected]{
  color:#888;
}



/* 4v4 step tabs */
.nav-4v4-steps .nav-link{
  background:#000 !important;          /* inactive = black */
  color:#fff !important;
  border:1px solid rgba(255,255,255,.25);
  border-radius:9999px;
  opacity:1 !important;
}
.nav-4v4-steps .nav-link:hover{
  background:#111 !important;
  color:#fff !important;
}
.nav-4v4-steps .nav-link.active{
  background:var(--4v4-lime) !important; /* active = lime */
  color:#000 !important;
  border-color:var(--4v4-lime) !important;
  box-shadow:0 0 0 3px rgba(198,238,87,.35) inset;
}



.form-check-input{
  background: transparent;
  border-color: rgba(255,255,255,.65);
}
.form-check-input:focus{ box-shadow: 0 0 0 .2rem rgba(198,238,87,.25); }
.form-check-input:checked{
  background-color: var(--4v4-lime);
  border-color: var(--4v4-lime);
}



/* Compact the registration step pills on small screens */
@media (max-width: 575.98px) {
  /* keep them on one line and full width */
  .nav-4v4-steps{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;                /* tighter gap */
    flex-wrap: nowrap;       /* one line */
    width: 100%;
  }
  .nav-4v4-steps .nav-item{
    flex: 1 1 0;             /* equal widths */
    min-width: 0;            /* allow shrink */
  }
  .nav-4v4-steps .nav-link{
    padding: 6px 8px;        /* smaller padding */
    font-size: 12px;         /* smaller text */
    line-height: 1.1;
    border-radius: 18px;     /* smaller pill */
    white-space: nowrap;     /* no wrapping inside */
    overflow: hidden;        /* clip overflow */
    text-overflow: ellipsis; /* add … if needed */
  }
}

/* Extra-tight on very narrow phones */
@media (max-width: 360px) {
  .nav-4v4-steps .nav-link{
    padding: 5px 6px;
    font-size: 11px;
    border-radius: 16px;
  }
}




.player-choice{
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  padding: 16px;
}



/* Solid white button (matches your pill buttons) */
.btn-white{
  background:#fff;
  color:#000 !important;
  border:2px solid #fff;
  border-radius: 5px;         /* keep the pill shape */
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.btn-white:hover{
  background:#f2f2f2;
  border-color:#f2f2f2;
  transform: translateY(-1px);
  box-shadow: 0 8px 16px rgba(0,0,0,.18);
}
.btn-white:focus-visible{
  outline:2px solid #fff;
  outline-offset:2px;
}






/* Positioning context for the button */
.home-section { position: relative; }

/* Scroll-down pill */
.scroll-down-link{
  --lime: var(--4v4-lime, #C6EE57);

  position: absolute;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);                    /* base transform (animation adds scale) */
  width: 56px;
  height: 56px;
  border-radius: 9999px;
  border: 2px solid rgba(255,255,255,.55);
  color: #fff;
  background: rgba(0,0,0,.35);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  backdrop-filter: blur(4px);
  transition: color .18s ease, border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
  /* Soft breathing pulse (scale + glow) */
  animation: sd-breathe 2.2s ease-in-out infinite;
}

/* Lime pulse ring that expands outward */
.scroll-down-link::after{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius: inherit;
  border: 2px solid color-mix(in oklab, var(--lime) 65%, transparent);
  animation: sd-pulse 1.8s ease-out infinite;
}

/* Arrow bounce */
.scroll-down-link i,
.scroll-down-link .arrow-fallback{
  animation: sd-bounce 1.8s ease-in-out infinite;
}

/* Hover/focus = stronger lime glow and lift */
.scroll-down-link:hover,
.scroll-down-link:focus-visible{
  color: #000;
  background: var(--lime);
  border-color: var(--lime);
  box-shadow: 0 10px 28px color-mix(in oklab, var(--lime) 40%, transparent);
}

/* Hide fallback SVG if your theme icon is present */
.scroll-down-link .arrow-fallback{ display:none; }

/* Keyframes */
@keyframes sd-breathe{
  0%   { transform: translateX(-50%) scale(1);   box-shadow: 0 0 0 0 rgba(198,238,87,0); }
  50%  { transform: translateX(-50%) scale(1.06);box-shadow: 0 0 24px 6px rgba(198,238,87,.34); }
  100% { transform: translateX(-50%) scale(1);   box-shadow: 0 0 0 0 rgba(198,238,87,0); }
}
@keyframes sd-pulse{
  0%   { opacity:.6; transform: scale(1);   }
  100% { opacity:0;  transform: scale(1.6); }
}
@keyframes sd-bounce{
  0%,100% { transform: translateY(-1px); }
  50%     { transform: translateY(2px); }
}

/* Smaller on phones */
@media (max-width: 767.98px){
  .scroll-down-link{ bottom: 18px; width: 52px; height: 52px; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .scroll-down-link,
  .scroll-down-link::after,
  .scroll-down-link i,
  .scroll-down-link .arrow-fallback{
    animation: none !important;
  }
}



/* Full width on mobile; slimmer on md+ while staying centered */
.footer-logo{ width: 100%; max-width: 420px; }
@media (min-width: 768px){
  .footer-logo{ width: 70%;} /* tweak to 50–80% to taste */
}




/* Big, bold location line */
.location-highlight{
  display: inline-flex;
  align-items: center;
  gap: .6rem;

  font-family: var(--font-global, sans-serif);
  font-weight: 900;
  letter-spacing: .02em;
  font-size: 32px;         
  line-height: 1.1;

  color: #000;              /* black text */
  /* lime-ish shadow for subtle pop (matches your theme) */
  text-shadow: 0 4px 6px rgba(198, 238, 87, .70);
}

/* Inline SVG icon: sized to the text, pure black, lime glow */
.location-highlight .loc-icon{
  width: 1.1em;             /* scales with text size */
  height: 1.1em;
  object-fit: contain;
  flex: 0 0 auto;
  vertical-align: -0.12em;  /* slight optical alignment */

  /* Make the SVG black without recoloring the file */
  filter: grayscale(1) brightness(0)
          drop-shadow(0 4px 6px rgba(198, 238, 87, .70)); /* lime glow */
}




/* Give the scroll area comfortable padding */
#termsSimpleModal .rules-section .container{
  padding-top: 1.25rem;
  padding-bottom: 2rem;
}