/* =========================

   SportsFit Landing Styles

========================= */



:root{

  --sage-green:#5fa777;

  --dark:#111;

  --light:#f5f6f7;

}



body{

  margin:0;

  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;

  color:#222;

  background:#fff;

}


/* =========================
   Dock nav pills into hero
========================= */

/* =========================
   SIMPLE HERO NAV (BUTTONS)
========================= */

.dp-navi{
  position:absolute;
  top:18px;
  right:18px;
  display:flex;
  align-items:center;
  gap:6px;
  z-index:50;
}

.dp-btn{
  padding:4px 10px;
  font-size:10px;
  font-weight:600;
  letter-spacing:.08em;
  text-decoration:none;
  border-radius:999px;

  /* GLASS CORE */
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.22),
      rgba(6,249,179,0.10)
    );
  color:#06F9B3;

  border:1px solid rgba(6,249,179,0.45);

  /* GLASS EFFECT */
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.35),
    0 6px 18px rgba(0,0,0,0.35);

  transition: all .18s ease;
}

.dp-navi a.dp-btn,
.dp-navi a.dp-btn:link,
.dp-navi a.dp-btn:visited,
.dp-navi a.dp-btn:active{
  color:#06F9B3 !important;
}
.dp-btn:hover{
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.35),
      rgba(6,249,179,0.22)
    );

  border-color:#06F9B3;
  color:#0b1f18;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.55),
    0 10px 26px rgba(6,249,179,0.35);

  transform: translateY(-1px);
}


.dp-btn:hover{
  background:rgba(6,249,179,0.28);
  border-color:#06F9B3;
  color:#0b1f18;
}

.dp-user{
  margin-left:6px;
  padding:4px 10px;
  font-size:10px;
  font-weight:600;
  border-radius:999px;

  background:rgba(255,255,255,0.12);
  color:#fff;
}




/* -------------------------

   HERO

------------------------- */

.hero{

  position:relative;

  min-height:100vh;

  display:flex;

  align-items:center;

  justify-content:center;

  text-align:center;

  color:#fff;

  overflow:hidden;



  /*background:url('/sportsfit/img/banner_landing.jpg') center / cover no-repeat;*/

background:url('/img/dallback.jpg') center / cover no-repeat;

  /* ONE value controls darkness */

  box-shadow: inset 0 0 0 100vmax rgba(0,0,0,0.75);

}



.hero-content{

  position:relative;

  z-index:2;

  max-width:900px;

  padding:2rem;

}



.hero-eyebrow{

  font-size:0.75rem;

  letter-spacing:2px;

  text-transform:uppercase;

  opacity:0.9;

  margin-bottom:1rem;

}



.hero h1{

  font-size:clamp(2.5rem, 5vw, 4rem);

  font-weight:700;

  line-height:1.1;

  margin-bottom:1.25rem;

}



.hero p{

  font-size:1.1rem;

  max-width:720px;

  margin:0 auto 2rem;

  opacity:0.95;

}



/* -------------------------

   BUTTONS

------------------------- */

.btn-primary{

  background:#06F9B3;        /* awesome branded color */

  border:none;

  padding:0.85rem 1.75rem;

  font-weight:700;

  color:#0a0a0a;              /* readable dark text */

}



.btn-primary:hover,

.btn-primary:focus{

  background:#05e0a4;

  color:#0a0a0a;

}



/* Secondary (tel button) */

.btn-secondary{

  background:#1b1b1b;        /* dark charcoal */

  border:none;

  padding:0.85rem 1.75rem;

  font-weight:600;

  color:#ffffff;

}



.btn-secondary:hover,

.btn-secondary:focus{

  background:#262626;

  color:#ffffff;

}





/* -------------------------

   SECTIONS

------------------------- */

.section{

  padding:5rem 1rem;

  position:relative;

  z-index:5;

  background:#ffffff;

  color:#222222;

}



.section.alt{

  background:#1f1f1f;   /* dark grey */

  color:#e5e5e5;

}



.section h2{

  font-size:2.2rem;

  font-weight:700;

  margin-bottom:1rem;

}



.section p{

  font-size:1.05rem;

  line-height:1.6;

  max-width:820px;

  margin:0 auto 1.25rem;

}



/* Text overrides for dark section */

.section.alt h2{

  color:#ffffff;

}



.section.alt p{

  color:#cfcfcf;

}



/* Fix text contrast inside white cards on dark sections */

.section.alt .feature{

  color:#222222;

}



.section.alt .feature h4{

  color:#06F9B3;

}



.section.alt .feature p{

  color:#999;

}



/* -------------------------

   Floating Background Image

------------------------- */

.section.bg-float{

  background:

    linear-gradient(

      rgba(0,0,0,0.55),

      rgba(0,0,0,0.55)

    ),

    url('/img/blackhawkback.jpg') center / cover no-repeat;



  background-attachment: fixed;

  background-color:#ffffff; /* ensures white section behavior */

}



/* White text only for floating background sections */

.section.bg-float{

  color:#ffffff;

}



.section.bg-float h2{

  color:#06F9B3; /* awesome text color */

}



.section.bg-float p{

  color:#e6e6e6;

}



/* -------------------------

   FEATURES

------------------------- */

.feature{

  background:#fff;

  border-radius:14px;

  padding:2.25rem;

  height:100%;



  /* Sage green drop shadow ONLY */

  box-shadow:

    0 10px 30px rgba(95, 167, 119, 0.5);



  transition:

    transform 0.25s ease,

    box-shadow 0.25s ease;

}



.feature:hover{

  transform:translateY(-3px);

  box-shadow:

    0 16px 42px rgba(95, 167, 119, 0.28);

}





.feature h4{

  font-weight:600;

  margin-bottom:0.5rem;

}



/* -------------------------

   CTA

------------------------- */

.cta{

  background:linear-gradient(135deg, var(--sage-green), #7bbf9a);

  color:#fff;

  text-align:center;

  padding:4.5rem 1.5rem;

}



.cta h2{

  font-size:2.4rem;

  font-weight:700;

  margin-bottom:1rem;

}



.cta p{

  font-size:1.1rem;

  max-width:720px;

  margin:0 auto;

}





/* -------------------------

   Footer (MATCHES CURRENT SITE)

------------------------- */

.sf-footer{

  padding: 28px 0;

  background: #111; /* dark charcoal */

  border-top: 1px solid rgba(255,255,255,.10);

  color: #fff;

}



.sf-footer .container{

  max-width: 1140px; /* match bootstrap container feel */

}



.sf-footer-inner{

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap: 14px;



  padding: 16px 18px;

  border-radius: 14px;



  background: rgba(255,255,255,.04); /* subtle panel */

  border: 1px solid rgba(255,255,255,.10);

  box-shadow: 0 10px 30px rgba(0,0,0,.35);

}



.sf-footer-brand{

  font-weight: 800;

  letter-spacing: .2px;

  color: #fff;

}



.sf-footer-sub{

  color: rgba(255,255,255,.70);

  font-size: 13px;

  margin-top: 2px;

}



.sf-footer-right{

  display:flex;

  align-items:center;

  gap: 10px;

  flex-wrap: wrap;

  justify-content: flex-end;

}



.sf-footer-link{

  color: rgba(255,255,255,.88);

  text-decoration: none;

  border-bottom: 2px solid rgba(6,249,179,.35); /* awesome color */

  padding-bottom: 2px;

}

.sf-footer-link:hover{

  color: #fff;

  border-bottom-color: rgba(6,249,179,.85);

}



.sf-footer-dot{

  color: rgba(255,255,255,.35);

}



.sf-footer-copy{

  color: rgba(255,255,255,.65);

  font-size: 13px;

}



@media (max-width: 575.98px){

  .sf-footer-inner{

    flex-direction: column;

    align-items: flex-start;

  }

  .sf-footer-right{

    justify-content: flex-start;

  }

}