:root {
  --max-w: 1800px;
  /* Font families */
  --NFrutiger: "neue-frutiger-world", sans-serif;
  /* Font weights */
  --fw-book: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 600;
  --fw-heavy: 700;
  --fw-black: 800;
  --lime: #d8da00;
  --blue: #001c40;
  --white: #ffffff;
  --grey: #6F6F6F;

}

.page-wrapper {
  max-width: var(--max-w);
  margin: 0 auto;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.25);
  overflow-x: hidden;
}
.lime{
  color: var(--lime);
}

.fw-300 {
  font-weight: 300;
}

.fw-400 {
  font-weight: 400;
}

.fw-500 {
  font-weight: 500;
}

.fw-600 {
  font-weight: 600;
}

.fw-700 {
  font-weight: 700;
}

.fw-800 {
  font-weight: 800;
}

.text-blue {
  color: var(--blue) !important;
}

body {
  font-family: var(--NFrutiger);
  font-weight: 300;
  font-size: 20px;
  color: var(--white);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  background-color: var(--blue);
  overflow-x: hidden;
}


a,
a:hover,
a:focus {
  color: inherit;
}

.notes{
  text-transform: none;
}

.body-title, .body-title-sm {
  font-size: 30px;
  color: var(--lime);
  font-style: italic;
  font-weight: var(--fw-black);
  text-transform: uppercase;
}

.body-title-sm {
  font-size: 28px;
}

.body-text{
  font-size: 18px;
}

.md-title {
  font-size: 25px;
}

.sub-title {
  font-size: 29px;
}

.bg-title {
  font-size: 41px;
}

.short-terms {
  font-size: 14px;
  font-weight: var(--fw-book);
}

.site-header__logo-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
}

.site-header__logo {
  width: 245px;
  height: auto;
  display: block;
  margin-bottom: 25px;
}


.top-section {
  position: relative;
  overflow-x: clip;
  /* κόβει οριζόντια χωρίς να επηρεάζει το κατακόρυφο */
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 40px;
}

.top-section::before {
  content: '';
  position: absolute;
  top: clamp(-200px, calc(253.33px - 75.56vw), -30px);
  left: 50%;
  transform: translateX(-50%);
  width: 130%;
  max-width: 920px;
  aspect-ratio: 1 / 1;
  background: url(https://umb-4553t5.s3.eu-west-1.amazonaws.com/8848/media/waterMark.avif) center / contain no-repeat;
  opacity: 0.03;
  pointer-events: none;
  z-index: 0;
}

.glow {
  position: absolute;
  top: -240px;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  height: 900px;
  pointer-events: none;
  z-index: -1;
  background: url(https://umb-4553t5.s3.eu-west-1.amazonaws.com/8848/media/glow.avif) center top / 100% auto no-repeat;
}

.top-section>*:not(.glow) {
  position: relative;
  z-index: 1;
}

.heroImage-main {
  display: block;
  width: 100%;
  max-width: 1800px;
  min-height: 206px;
  object-fit: cover;
  object-position: center center;
  margin: 0 auto;
}


.mainHeadline {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 377px;
  display: block;
  height: auto;
  padding-inline: 20px;
}

.steps {
  padding: 40px 0;
}

.steps__grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

.steps__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 280px;
}

.steps__img {
  display: block;
  width: 200px;
  height: auto;
  margin-bottom: 20px;
}

.steps__title {
  color: #d8da00;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.5px;
  margin: 0 0 10px;
}

.steps__text {
  color: #ffffff;
  font-size: 18px;
  font-weight: 300;
  line-height: 1.5;
  margin: 0;
}

.cst-btn,
.cst-btn-dark {
  position: relative;
  display: inline-block;
  padding: 15px 50px;
  color: #0a1f3a;
  font-size: 22px;
  font-weight: 800;
  text-decoration: none;
  text-transform: uppercase;
  background: #fff;
  border: 0;
  cursor: pointer;
  transform: skewX(-12deg);
}

.cst-btn:hover,
.cst-btn:focus,
.cst-btn:active,
.cst-btn:focus-visible,
.cst-btn-dark:hover,
.cst-btn-dark:focus,
.cst-btn-dark:active,
.cst-btn-dark:focus-visible {
  color: #0a1f3a;
  filter: brightness(1.15);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  background: var(--lime);
}

.cst-btn span,
.cst-btn-dark span {
  display: inline-block;
  color: inherit;
  transform: skewX(12deg);
}

.cst-btn-dark {
  position: relative;
  display: inline-block;
  padding: 15px 50px;
  color: var(--white);
  font-size: 22px;
  font-weight: 800;
  text-decoration: none;
  text-transform: uppercase;
  background: var(--blue);
  border: 0;
  cursor: pointer;
  transform: skewX(-12deg);
}

/* FORM */

.form-section{
  max-width: 700px;
  margin: 0 auto;
}

.form-wrapper{
  max-width: 430px;
  margin: 0 auto;
}

.form-text {
  color: var(--white);
  font-size: 18px;
  font-style: normal;
  font-weight: var(--fw-bold);
  line-height: normal;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ================================================
   FORM — Underline floating label style
   ================================================ */

/* .col-12+.col-12 {
  margin-top: 20px;
} */

.form-floating {
  position: relative;
  display: block;
}

/* Input & Select — underline only */
.form-floating .form-control,
.form-floating .form-select {
  background: transparent !important;
  border: none;
  border-bottom: 2px solid rgba(255, 255, 255, 0.5);
  border-radius: 0;
  color: #ffffff;
  font-size: 20px;
  font-weight: 400;
  height: 52px !important;
  padding: 20px 0 4px 0;
  box-shadow: none !important;
}

.form-floating .form-control:focus,
.form-floating .form-select:focus {
  border-bottom-color: #ffffff;
  background: transparent !important;
  box-shadow: none !important;
}

.form-floating label {
  position: absolute;
  top: 14px;
  left: 0;
  font-size: 20px;
  font-weight: 700;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 0;
  margin: 0;
  opacity: 1;
  pointer-events: none;
  transition: top 0.15s ease, font-size 0.15s ease, opacity 0.15s ease;
}


.form-floating>.form-control:focus~label,
.form-floating>.form-control:not(:placeholder-shown)~label {
  top: 0;
  font-size: 13px;
  font-weight: 600;
  opacity: 0.65;
  letter-spacing: 0.8px;
}

/* Select — custom arrow */
.form-floating .form-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: right 0 center !important;
  background-size: 16px 12px !important;
  appearance: none;
}


.floating-select .form-select {
  height: 36px !important;
  padding: 0;
}

/* Options dropdown */
.form-select option {
  background-color: #001c40;
  color: #ffffff;
}

/* Autocomplete */
.form-control:-webkit-autofill,
.form-control:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #001c40 inset !important;
  -webkit-text-fill-color: #ffffff !important;
}

.attach-link {
  color: var(--lime);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.footer-link{
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 18px;
}

.attachment-preview {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1rem;
  justify-content: start;
}

.attachment-preview img {
  max-width: 80px;
  max-height: 80px;
  object-fit: cover;
  border-radius: 4px;
  cursor: pointer;
}

.form-check-input {
  border: 4px solid var(--white);
  background-color: var(--white);
  border-radius: 50% !important;
  width: 26px;
  height: 26px;
}

.form-check-input:checked {
  background-color: var(--lime);
  border: 4px solid var(--white);
}

.form-check-input.is-invalid,
.was-validated .form-check-input:invalid {
  border-color: #ffffff;
}

.form-check-input.is-valid~.form-check-label,
.was-validated .form-check-input:valid~.form-check-label {
  color: #ffffff;
}

.form-check-input.is-valid:checked,
.was-validated .form-check-input:valid:checked {
  background-color: var(--lime);
}

.form-check-input.is-valid,
.was-validated .form-check-input:valid {
  border-color: #ffffff;
}

.form-check .form-check-input {
  margin-left: -32px;
  margin-top: 4px;
}

.form-check-input.is-valid~.form-check-label,
.was-validated .form-check-input:valid~.form-check-label {
  color: inherit;
}

  .upload-label {
    cursor: pointer;
    padding: 8px 10px;
    border: 1px solid #ced4da;
    border-radius: 20px;
  }

  .loader-container {
    display: flex;
    align-items: center;
    gap: 1rem;
  }

  .loader-container.hidden {
    display: none;
  }


.attach-link {
  color: var(--lime);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.photo-upload-label:hover .attach-link {
  color: var(--lime);
}

.photo-upload-label {
  display: block;
  color: #ffffff;
  font-size: 18px;
  line-height: 1.4;
  cursor: pointer;
  font-weight: 300;
  text-transform: none;
  text-align: start;
}

.social-icon {
  width: auto;
  height: 30px;
}


.blade-line {
  width: 100%;
  background-image: url(https://umb-4553t5.s3.eu-west-1.amazonaws.com/8848/media/OneBlade_Line.png);
  background-repeat: no-repeat;
  background-size: auto 100px;
  height: 140px;
  background-position: left -171px center;
  /* margin: 0 auto; */
}

.headlineTitles{
  font-weight: var(--fw-black);
  text-transform: uppercase;
  text-align: center;
  color: var(--lime);
}

.win-title {
  font-size: 112px;
  line-height: 90px;
}

.top-title {
  font-size: 34px;
}

.late-title {
  font-size: 112px;
  line-height: 80px;
}
.thnk-title{
  font-size: 100px;
  line-height: 80px;
}
.no-title {
  font-size: 80px;
  line-height: 80px;
  letter-spacing: -4px;
}


@media (min-width: 768px) {

.negative-space{
  margin-top: -50px;
}

.top-title {
  font-size: 40px;
}

.no-title {
  font-size: 150px;
  line-height: 130px;
  letter-spacing: -8px;
}

.thnk-title {
  font-size: 150px;
  line-height: 120px;
}

.win-title {
  font-size: 180px;
  line-height: 130px;
}

.late-title {
  font-size: 150px;
  text-transform: uppercase;
  line-height: 100px;
}
  .body-title, .body-title-sm {
  font-size: 35px;
  }
  .form-text {
  font-size: 20px;
  }

.body-text {
  font-size: 20px;
}

  .photo-upload-label {

  font-size: 20px;
  text-align: center;
  }

  .blade-line {
  height: 160px;
  background-size: auto 110px;
  background-position: left 100px center;
  }

  .attachment-preview {
    justify-content: center;
  }

  .top-section::before {
    content: '';
    position: absolute;
    top: -210px;
  }

  .heroImage-main {
    min-height: 520px;
    width: auto;
    width: 100%;
  }

  .hero-banner {
    margin-top: -80px;
  }

  .steps__grid {
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    gap: 20px;
  }

  .steps__item {
    flex: 1;
    max-width: 240px;
  }

  .steps__img {
    width: 100%;
    max-width: 220px;
  }

  .steps__title {
    font-size: 20px;
  }

  .steps__text {
    font-size: 20px;
  }

}

@media (min-width: 1400px) {
  .blade-line {
    background-position: left 312px center;
  }
}

@media (min-width: 2000px) {
  .blade-line {
    background-position: left 440px center;
  }
}

.modal-content {
background-color: var(--blue);
}

.btn.btn-secondary{
  background-color: var(--lime);
  color: var(--blue);
  font-size: 18px;
  font-weight: var(--fw-black);
  text-transform: uppercase;
}


.btn-close {
  filter: invert(1);
}

button.limit.btn-close {
  filter: none;
}

.modalBg-warning {
  border-radius: 37px;
  box-shadow: none;
  background-color: var(--lime)!important;
}

body.modal-open .modal-backdrop.show {
  background-color: var(--blue) !important;
  opacity: 0.85 !important;
}

.modal-limit .modal-header {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  padding: var(--bs-modal-header-padding);
  border-bottom: none;
  border-top-left-radius: var(--bs-modal-inner-border-radius);
  border-top-right-radius: var(--bs-modal-inner-border-radius);
}


.modal-backdrop {
  transition: opacity 0.2s ease-out, background-color 0.2s ease-out !important;
}

.modal-backdrop.fade {
  transition: opacity 0.2s ease-out, background-color 0.2s ease-out !important;
}

.modal-backdrop.show {
  opacity: 0.85 !important;
  background-color: var(--blue) !important;
}
.hero-banner-holder{
  rotate: -8deg;
   width: 120%;
  margin-left: -10%;
    margin-bottom: 50px;

}
.hero-banner-wrapper {
  height: 195px;
  overflow: hidden;
}

.green-bg{
  background-color: var(--lime);
  height: 179px;
  z-index: 1;
  overflow: hidden;
  position: relative;
}

.blade-line-hero{
  z-index: 2;
  background-color: var(--lime);
  position: relative;
  height: 15px;
  top:1px;
  animation: blade-line-hero-animation 1.5s ease-in-out forwards;
  animation-delay: 1.3s;
}



@keyframes blade-line-hero-animation {
  0%   { transform: translateX(0);
   }
 
  100% { transform: translateX(-50.8%);
  }
}



.blade {
  position: absolute;
  right: -267px;
  animation: blade-animation 1.5s ease-in-out forwards;
  animation-delay: 1.2s;
  width: 180px;
  z-index: 5;
  top: -40px;
  
}
@keyframes blade-animation {
  0% {   right: -267px;}
  100% {   right: 44%;}
}
.anim-group{
  position: relative;
  rotate: 8deg;
  text-align: center;
  height: 214px;
  top:-29px;
}

.lines {
    position: absolute;
    top: -115px;
    z-index: 2;
    animation: line-reveal ease-in-out 1.5s forwards;
    width: 100%;
    margin: 0 auto;
    rotate: 8deg;
    text-align: center;
}

.lines img {
  width:140px;
}

@keyframes line-reveal {
  0% {
    top:-115px;
  }
  100% {
    top: -2px;
  }
}

.player-text {
    position: absolute;
    z-index: 2;
    top: 0;
    width: 100%;
    height: 214px;
}
.players{
    z-index: 2;
    rotate: 8.5deg;
    animation: player-reveal ease-in-out 1.5s forwards;
    left: 50%;
    transform: translateX(-75%);
    position: absolute;
    width: 230px;
  }
  @keyframes player-reveal {
    0% {
      bottom:-120%;
    }
    100% {
      bottom: -50%;
    }
  }


  .headlines {
    transform: translateX(99%);
    position: absolute;
    top: 250px;
    width: 87px;
    animation: headline-reveal ease-in-out 1.5s forwards;
    animation-delay: .8s;
  }
  @keyframes headline-reveal {
    0% {
      top: 250px;
    }
    100% {
      top: 49px;
    }
  }

@media (min-width: 768px) {

  .hero-banner-wrapper {
    height: 310px;
  }
  .anim-group{
    height: 380px;
  }
  .player-text{
    height: 380px;
  }
  .blade-line-hero{
      height: 30px;
      animation: blade-line-hero-animation2 1.5s ease-in-out forwards;
      animation-delay: 1.2s;
  }

  .green-bg{
    height: 279px;
  }

  .blade {
    right: -400px;
    width: 367px;
    top: -87px;
    rotate: 2deg;
    animation: blade-animation2 1.5s ease-in-out forwards;
    animation-delay: 1s;
  }

  .headlines {
    left: 50%;
    transform: translateX(128%);
    position: absolute;
    top: 300px;
    width: 160px;
    animation: headline-reveal2 ease-in-out 1.5s forwards;
    animation-delay: .8s;
  }
  @keyframes headline-reveal2 {
    0% {
      top: 300px;
    }
    100% {
      top: 26px;
    }
  }
  .players{
    transform: translateX(-57%);
    width: auto;
    bottom: -120%;
  }

  .lines {
      top: -145px;
      animation: line-reveal2 ease-in-out 1.5s forwards;
  }

  .lines img {
    width: 240px;
  }

  @keyframes line-reveal2 {
    0% {
      top:-145px;
    }
    100% {
      top: 3px
    }
    /* 75% {
      top: -45px;
    }
    100% {
      top: 9px;
    } */
  }

@keyframes blade-line-hero-animation2 {
  0%   { transform: translateX(0);
   }
 
  100% { transform: translateX(-52.8%); 
  }
}

@keyframes blade-animation2 {
  0%   {   right: -400px;}
  100% {   right: 44%;}
}
}


@media (min-width: 1024px) {
  
  @keyframes blade-animation2 {
    0%   {   right: -400px;}
    100% {   right: 46%;}
  }
}

@media (min-width: 1050px) {
  
  @keyframes blade-line-hero-animation2 {
  0%   { transform: translateX(0);
   }
 
  100% { transform: translateX(-56%); 
  }
}
}

@media (min-width: 1350px) {

  @keyframes blade-animation2 {
      0%   {   right: -400px;}
      100% {   right: 47%;}
    }
}
/* ============================================================
   Client amends — FINAL REVIEW deck (21.08.26)
   ============================================================ */

/* NOTE: the claim pages' reCAPTCHA gap is handled with .pt-3 on its wrapper in
   pages/claim.php, not here — a margin-top on .g-recaptcha is swallowed by
   margin collapsing there. The .checkbox-wrapper rule below works because on
   the entry form that wrapper is a flex item of .row, which blocks collapsing. */

/* ENTRY FORM: the checkbox blocks carry their own .mt-3/.mt-4 *inside* the
   column, on top of the row gutter, so they sit 34px apart. The reCAPTCHA has
   no such inner margin and was landing at 18px — visibly tighter than the rest
   of the form tail. Measured on staging: 34/34/18 -> 34/34/34. */
.checkbox-wrapper .g-recaptcha {
  margin-top: 1rem;
}

/* ENTRY + CLAIM PAGES: these two intro headings sit OUTSIDE the .container
   (index.php "Fill in your details…", claim.php "Fill out the form…"), so they
   spanned the full viewport with no horizontal padding at all — the lime text
   was landing 1px off both edges on mobile. The other .body-title headings are
   h4 inside a container and already get its 12px, so scope this to h3.
   404.php's h3 is inside a container; the extra padding there is harmless. */
h3.body-title {
  padding-inline: 24px;
}

@media (min-width: 768px) {
  /* TOO LATE: equal spacing between the sections on desktop. The 13.8 amend in
     _header.php only covered mobile, so on desktop the middle gap was ~24px
     (h4 margin + py-3) against ~40px above and below it. All three are now 40px:
       DONE -> THE PROMOTION ENDED   40px  (.top-section padding-bottom)
       date -> Unlucky...            40px  (padding-top below)
       Unlucky... -> Discover button 40px  (16px + the button's my-4 = 24px) */
  /* !important is required: Bootstrap 5 generates its spacing utilities with
     !important, so .py-3 on the paragraph beats a plain selector here. */
  .too-late main .body-title-sm {
    margin-bottom: 0 !important;
  }

  .too-late main .body-text {
    padding-top: 40px !important;
    padding-bottom: 16px !important;
  }
}