/* ===================================================== */
/* GLOBAL */
/* ===================================================== */

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  color: #0b111e;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ===================================================== */
/* CONTAINER */
/* ===================================================== */

.container {

  max-width: 1200px;

  margin: 0 auto;

  padding-left: 0px;

  padding-right: 0px;

}

/* ===================================================== */
/* HERO */
/* ===================================================== */

.hero {

  position: relative;

  height: 100vh;

  color: white;

  overflow: hidden;

}

/* Background image */

.hero-bg {

  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

  z-index: 1;

}

/* Gradient overlay */

.hero-overlay {

  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      to right,
      rgba(11,17,30,.75),
      rgba(11,17,30,.2)
    );

  z-index: 2;

}

/* Top header (logo + FIFA badge) */

.hero-top {

  position: absolute;

  top: 20px;

  left: 0;

  right: 0;

  z-index: 30;

  display: flex;

  justify-content: space-between;

  align-items: center;

}

/* Logo */

.logo {
  height: 78px;
  margin-top: 10px;
}

/* FIFA badge */

.fifa {
  height: 48px;
  margin-bottom: 10px;
}

/* Secure parking link */

.link {

  color: white;

  text-decoration: none;

  font-weight: 600;

  font-size: 14px;

}

/* Center headline */

.hero-center {

  position: relative;

  z-index: 20;

  height: 100vh;

  display: flex;

  flex-direction: column;

  justify-content: center;

  max-width: 640px;

}

/* Headline */

.hero h1 {

  font-size: 64px;

  line-height: 1.1;

  margin: 0;

}

/* Subtext */

.hero p {

  margin-top: 16px;



}

/* Scroll anchor */

.scroll-indicator {

  position: absolute;

  bottom: 20px;

  left: 50%;

  transform: translateX(-50%);

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 8px;

  text-align: center;

  color: white;

  font-size: 12px;

  letter-spacing: 0.2em;

  text-transform: uppercase;

  opacity: 0.7;
  text-decoration: none;

  z-index: 40;

}

/* ===================================================== */
/* COUNTDOWN */
/* ===================================================== */

.countdown {

  text-align: center;

  padding: 40px 0;

  background: white;

}

.countdown-title {

  font-size: 12px;

  letter-spacing: 2px;

  margin-bottom: 20px;

  text-transform: uppercase;

}

.countdown-grid {

  display: flex;

  justify-content: center;

  gap: 40px;

}

.countdown span {

  font-size: 48px;

  font-weight: bold;

}

.countdown label {

  font-size: 11px;

  text-transform: uppercase;

  opacity: .6;

}

/* ===================================================== */
/* TWO COLUMN — PLANNING */
/* ===================================================== */

.two-col {

  padding: 80px 0;

  background: #ffffff;

}

.two-col-inner {

  display: grid;

  grid-template-columns: 0.85fr 1.15fr;

  gap: 48px;

  align-items: center;

}

.two-col h2 {

  font-size: 28px;

  line-height: 1.3;

  font-weight: 600;

  margin-bottom: 20px;

}

.two-col p {

  font-size: 15px;

  line-height: 1.75;

  margin-bottom: 16px;

}

.two-col ul {

  margin-top: 12px;

  padding-left: 18px;

}

.two-col li {

  margin-bottom: 10px;

  font-size: 15px;

  line-height: 1.6;

}

/* Button */

.btn {

  display: inline-block;

  margin-top: 28px;

  padding: 14px 26px;

  background: #0b111e;

  color: #ffffff;

  text-decoration: none;

  font-size: 12px;

  font-weight: 600;

  letter-spacing: 0.1em;

  text-transform: uppercase;

  transition: background 0.2s ease;

}

.btn:hover {

  background: #1c2a44;

}

/* Image constraint */

.image img {

  width: 100%;

  height: auto;

  border-radius: 8px;

}

/* ===================================================== */
/* ADVANTAGE SECTION */
/* ===================================================== */

.advantage {

  background: #f5efe6;

  padding: 80px 0;

}

.advantage-grid {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 48px;

  align-items: center;

}

.feature-grid {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 32px;

}

.feature-grid h3 {

  margin-bottom: 8px;

}

/* ===================================================== */
/* STADIUM SECTION */
/* ===================================================== */

.stadium {

  position: relative;

  color: white;

  min-height: 600px;

  overflow: hidden;

}

.stadium-bg {

  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

  z-index: 1;

}

.stadium-overlay {

  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      to right,
      rgba(0,0,0,.85),
      rgba(0,0,0,.4)
    );

  z-index: 2;

}

.stadium-content {

  position: relative;

  z-index: 10;

  padding: 80px 0;



}

.columns {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 40px;

}

/* ===================================================== */
/* RESPONSIVE */
/* ===================================================== */

@media (max-width: 900px) {

  .two-col-inner,
  .advantage-grid,
  .feature-grid,
  .columns {

    grid-template-columns: 1fr;

  }

  .hero h1 {

    font-size: 40px;

  }

  .hero-center {

    height: auto;

    padding-top: 140px;

    padding-bottom: 80px;

  }

}

/* ===================================================== */
/* COUNTDOWN — FINAL SIZE FIX */
/* ===================================================== */

.countdown {

  background: white;

  padding: 48px 0 0 0;

  text-align: center;

}

.countdown-title {

  font-size: 11px;

  font-weight: 600;

  letter-spacing: 0.25em;

  text-transform: uppercase;

  color: rgba(11,17,30,0.5);

  margin-bottom: 28px;

}

/* ROW */

.countdown-row {

  display: flex;

  justify-content: center;

  align-items: center;

  gap: 50px;

}

/* BLOCK */

.countdown .time-block {

  display: flex;

  flex-direction: column;

  align-items: center;

}

/* NUMBERS */

.countdown .time-number {

  font-size: 48px;

  font-weight: 600;

  line-height: 1;

  color: #0b111e;

  font-variant-numeric: tabular-nums;

}

/* LABELS — HARD OVERRIDE */

.countdown .time-label {

  display: block;

  margin-top: 6px;

  font-size: 10px;

  line-height: 1;

  font-weight: 600;

  letter-spacing: 0.22em;

  text-transform: uppercase;

  color: rgba(11,17,30,0.4);

}

/* COLON */

.countdown .time-separator {

  font-size: 26px;

  font-weight: 300;

  line-height: 1;

  color: rgba(11,17,30,0.2);

  margin-top: -8px;

}

/* MOBILE */

@media (max-width: 600px) {

  .countdown .time-number {
    font-size: 38px;
  }

  .countdown .time-separator {
    font-size: 22px;
  }

}


/* ===================================================== */
/* TYPOGRAPHY — MATCH PLANNING PARTNER SECTION */
/* ===================================================== */

/* Base paragraph rhythm */

.two-col p,
.advantage p,
.stadium p {

  font-size: 15px;

  line-height: 1.75;

  margin-bottom: 16px;

}

/* Lists */

.two-col li,
.advantage li,
.stadium li {

  font-size: 15px;

  line-height: 1.75;

  margin-bottom: 10px;

}

/* Headings — keep size but normalize spacing */

.advantage h2,
.stadium h2 {

  font-size: 28px;

  line-height: 1.3;

  margin-bottom: 20px;

}

.feature-grid h3,
.columns h3 {

  font-size: 14px;

  line-height: 1.4;

  margin-bottom: 8px;

}


.hero-badge {

  display: block;

  height: 48px;
margin-bottom: 10px;
  width: auto;

  max-width: none;

  object-fit: contain;

  align-self: flex-start;

  margin-top: 28px;

}
@media (max-width: 900px) {

  .hero-badge {

    height: 40px;

  }

}

/* ===================================================== */
/* FOOTER STRIPE */
/* ===================================================== */

.footer-stripe {

  background: #363F64;   /* PAS blue */

  color: white;

  padding-top: 64px;

  padding-bottom: 64px;

}

/* GRID */

.footer-grid {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 64px;

}

/* HEADINGS */

.footer-stripe h3 {

  font-size: 16px;

  font-weight: 600;

  margin-bottom: 18px;

}

/* TEXT */

.footer-stripe p {

  font-size: 14px;

  line-height: 1.7;

  margin-bottom: 16px;

  color: rgba(255,255,255,0.9);

}

/* LINKS */

.footer-stripe a {

  color: white;

  text-decoration: none;

}

.footer-stripe a:hover {

  text-decoration: underline;

}

.footer-contact p {

  margin-bottom: 18px;

  line-height: 1.6;

}

.footer-contact strong {

  display: block;

  font-size: 13px;

  font-weight: 600;

  margin-bottom: 4px;

  color: rgba(255,255,255,0.85);

}

/* ===================================================== */
/* FOOTER STRIPE — EXACT LAYOUT MATCH */
/* ===================================================== */

.footer-stripe {

  background: #363F64;

  color: white;

  padding: 72px 0;

}

/* GRID */

.footer-grid {

  display: grid;

  grid-template-columns: 1.1fr 0.9fr;

  gap: 72px;

}

/* HEADINGS */

.footer-stripe h3 {

  font-size: 16px;

  font-weight: 600;

  margin-bottom: 18px;

}

/* LEFT COLUMN */

.footer-about p {

  font-size: 14px;

  line-height: 1.7;

  margin-bottom: 16px;

  color: rgba(255,255,255,0.9);

}

.footer-about .hours {

  margin-top: 20px;

}

/* RIGHT COLUMN STRUCTURE */

.footer-contact {

  font-size: 14px;

}

/* INDIVIDUAL BLOCKS */

.contact-block {

  margin-bottom: 18px;

}

/* LABEL */

.label {

  font-size: 12px;

  font-weight: 600;

  margin-bottom: 4px;

  color: rgba(255,255,255,0.8);

}

/* VALUE */

.value {

  font-size: 14px;

  line-height: 1.6;

  color: rgba(255,255,255,0.95);

}

/* INLINE ROW (ICAO / UNICOM) */

.contact-inline {

  display: flex;

  gap: 36px;

  margin-top: 10px;

}

.contact-inline .label {

  display: block;

  margin-bottom: 2px;

}

/* LINKS */

.footer-stripe a {

  color: white;

  text-decoration: none;

}

.footer-stripe a:hover {

  text-decoration: underline;

}

/* RESPONSIVE */

@media (max-width: 900px) {

  .footer-grid {

    grid-template-columns: 1fr;

    gap: 48px;

  }

}


/* RIGHT COLUMN — MATCH MAIN SITE */

/* RIGHT COLUMN */

.footer-location h3 {

  font-size: 16px;

  font-weight: 600;

  margin-bottom: 14px;

}

/* BASE TEXT */

.footer-location p {

  font-size: 14px;

  line-height: 1.6;

  margin: 0;

}

/* GROUP 1 — TIGHT STACK */

.location-group p + p {

  margin-top: 4px;

}

/* GROUP 2 — SPACE BEFORE ICAO */

.icao-group {

  margin-top: 16px;

}

.icao-group p + p {

  margin-top: 4px;

}

/* GROUP 3 — SPACE BEFORE SOCIAL */

.footer-social {

  display: flex;

  gap: 4px;

  margin-top: 22px;

}

.footer-social img {

  width: 35px;



}

/* LINKS */

.footer-location a {

  color: white;

  text-decoration: none;

}

.footer-location a:hover {

  text-decoration: underline;

}




/* ===================================================== */
/* HERO COUNTDOWN */
/* ===================================================== */

.hero-countdown {

  position: absolute;

  left: 50%;

  transform: translateX(-50%);

  bottom: 70px;

  text-align: center;

  z-index: 30;

}

/* HEADER — CENTERED + WHITE */

.hero-countdown .countdown-title {

  font-size: 11px;

  font-weight: 600;

  letter-spacing: 0.25em;

  text-transform: uppercase;

  color: white;

  margin-bottom: 18px;

  text-align: center;
 

}

/* ROW */

.hero-countdown .countdown-row {

  display: flex;

  justify-content: center;

  align-items: center;

  gap: 34px;
   padding-bottom:20px;

}

/* NUMBERS — KEEP LARGE */

.hero-countdown .time-number {

  font-size: 36px;

  font-weight: 600;

  line-height: 1;

  color: white;

  font-variant-numeric: tabular-nums;

}

/* LABELS — UNDER NUMBERS */

.hero-countdown .time-label {

  display: block;

  margin-top: 6px;

  font-size: 10px;

  font-weight: 600;

  letter-spacing: 0.22em;

  text-transform: uppercase;

  color: rgba(255,255,255,0.75);

}

/* COLON */

.hero-countdown .time-separator {

  font-size: 30px;

  font-weight: 300;

  color: rgba(255,255,255,0.65);

  margin-top: -8px;

}


.propflags {position:absolute;opacity: .7;width: 600px;right: -100px;top: -103px;z-index:9999999;}


@media (max-width: 1220px) {

  .container {

    margin-left: 30px;

    margin-right: 30px;

    padding-left: 0;

    padding-right: 0;

  }

}

@media (max-width: 900px) {

  .feature-grid {
    gap: 2px
  }
 
  .propflags {  
    width: 400px;
    right: -40px;
    top: -50px;

}

.footer-grid {
        grid-template-columns: 1fr;
        gap: 0px;

}

}

@media (max-width: 700px) {
 
  .propflags {  
    width: 300px;
    right: -40px;
    top: -50px;

}

}

/* ========================================= */
/* MOBILE HERO ADJUSTMENTS */
/* ========================================= */

@media (max-width: 900px) {

  /* Center hero content vertically */

  .hero {

    min-height: 100vh;

    height: auto;

  }

  .hero-center {

    height: 100vh;

    justify-content: center;

    padding-top: 0;

    padding-bottom: 140px;

  }

  /* Slightly reduce headline size for balance */

  .hero h1 {

    font-size: 36px;

    line-height: 1.15;

  }

  /* Move countdown slightly up */

  .hero-countdown {

    bottom: 80px;

  }

  /* Reduce countdown number size */

  .hero-countdown .time-number {

    font-size: 20px;

  }

  /* Reduce colon size */

  .hero-countdown .time-separator {

    font-size: 22px;

  }

  /* Keep labels readable but smaller */

  .hero-countdown .time-label {

    font-size: 9px;

    letter-spacing: 0.18em;

  }

  /* Keep scroll link below countdown */

  .scroll-indicator {

    bottom: 28px;

  }

}



@media (max-width: 500px) {
 
  .propflags {  
    width: 200px;
    right: -40px;
    top: -50px;
  }

    .hero-countdown .countdown-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding-bottom: 20px;
  }


  .hero-countdown .countdown-title {
    font-size: 8px;
    margin-bottom: 12px;
   
}

.hero-countdown {
        bottom: 60px;
    }

    .scroll-indicator {
      font-size: 9px;

    }



}