/* ==============================
   Treknoly.live stylesheet
   Palette:
     headings: #99beff
     text: #21feff
     accents/buttons: #99beff
     button text: #03273c
     button hover: #21feff
     site background: #03273c
   Namespace: .treknoly-live
   ============================== */

/* ---------- Root variables ---------- */
:root{
  --bg: #03273c;
  --heading: #99beff;
  --text: #21feff;
  --accent: #99beff;
  --btn: #99beff;
  --btn-text: #03273c;
  --btn-hover: #21feff;
  --muted: rgba(33,254,255,0.18);
  --card-bg: #022733; /* slightly different for cards */
  --card-dark: #021f2b;
}

/* ---------- Reset & globals ---------- */
* { box-sizing: border-box; }
html,body{ height:100%; margin:0; padding:0; background:var(--bg); overflow-x:hidden; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
body.treknoly-live { font-family: 'Poppins', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; color:var(--text); line-height:1.6; }

/* Prevent bootstrap .row negative margins causing overflow */
.row { margin-left: 0 !important; margin-right: 0 !important; }

/* ---------- Links & active nav ---------- */
a { color: var(--text); text-decoration: none; }
.treknoly-live-link { color: var(--heading); text-decoration: underline; }
.treknoly-live-link:hover { color: var(--text); text-decoration: none; }

/* Navbar */
.treknoly-live-navbar {
  background: var(--bg);
  border-bottom: 1px solid rgba(153,190,255,0.08);
}
.treknoly-live-logo { height:82px; }
.treknoly-live-brand-text { color:var(--heading); font-weight:600; margin-left:0.5rem; }
.treknoly-live-navbar .nav-link {
  color: var(--text);
  margin-left: 1rem;
  padding: .25rem .25rem;
  transition: color .22s ease, border-bottom .22s ease;
  border-bottom: 2px solid transparent;
  font-weight:500;
}
.treknoly-live-navbar .nav-link:hover { color: var(--heading); }
.treknoly-live-navbar .nav-link.active { color: var(--heading); border-bottom-color: var(--heading); }

/* ---------- Buttons ---------- */
.treknoly-live-btn {
  background: var(--btn);
  color: var(--btn-text);
  border: none;
  padding: .6rem 1.25rem;
  border-radius: 999px;
  font-weight: 600;
  display: inline-block;
  transition: background .18s ease, transform .12s ease;
  text-decoration: none;
}
.treknoly-live-btn:hover { background: var(--btn-hover); color: var(--btn-text); transform: translateY(-2px); }
.treknoly-live-btn-secondary {
  background: transparent;
  color:var(--text);
  border:1px solid rgba(153,190,255,0.12);
}
.treknoly-live-btn-secondary:hover { background: var(--card-dark); color: var(--text); }

/* Section titles */
.treknoly-live-section-title { color: var(--heading); font-size:2rem; font-weight:700; margin-bottom:.75rem; }

/* ---------- Hero ---------- */
.treknoly-live-hero {
  min-height: 68vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  text-align: center;
  padding: 3.5rem 1rem;

  background: url("../images/hero.jpg") center/cover no-repeat;
  color: #21feff;
}

.treknoly-live-hero-overlay {
  position:absolute; inset:0; background: linear-gradient(180deg, rgba(3,39,60,0.45), rgba(3,39,60,0.2));
}
.treknoly-live-hero-content { position:relative; z-index:2; max-width:980px; padding:1.5rem; }
.treknoly-live-hero-heading { color:var(--heading); font-size:2.6rem; font-weight:700; margin-bottom:.6rem; }
.treknoly-live-hero-text { color:var(--text); font-size:1.05rem; margin-bottom:1rem; opacity:0.95; }

/* ---------- Brief Disclaimer ---------- */
.treknoly-live-brief-card {
  background-color: rgba(3, 39, 60, 0.95); /* dark card */
  border: 1px solid #99beff;
  color: #21feff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

.treknoly-live-brief-card p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
}

/* Button */
.treknoly-live-btn {
  display: inline-block;
  background-color: #99beff;
  color: #03273c;
  font-weight: 600;
  padding: 0.6rem 1.2rem;
  border-radius: 30px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.treknoly-live-btn:hover {
  background-color: #21feff;
  color: #03273c;
}

/* ---------- Game Section ---------- */
.treknoly-live-game {
  padding: 5rem 1rem;
  text-align: center;
}

.treknoly-live-section-title {
  font-size: 2rem;
  font-weight: 700;
  color: #3f2f7a;
  margin-bottom: 2rem;
}




/* ---------- Features ---------- */
.treknoly-live-features { padding-top:2.5rem; padding-bottom:2.5rem; }
.treknoly-live-lead { color: var(--text); opacity:0.95; max-width:760px; margin:0 auto 1rem; }
.treknoly-live-feature-card {
  background: var(--card-dark);
  color: var(--text);
  border: 1px solid rgba(153,190,255,0.04);
  transition: transform .25s ease, box-shadow .25s ease;
  padding: 1.75rem;
}
.treknoly-live-feature-card:hover { transform: translateY(-8px); box-shadow: 0 16px 36px rgba(0,0,0,0.45); }
.treknoly-live-feature-card i { color:var(--heading); margin-bottom:.45rem; }

/* ---------- About ---------- */
.treknoly-live-about { padding-top:2.5rem; padding-bottom:2.5rem; }
.treknoly-live-about-text { color:var(--text); line-height:1.7; margin-bottom:1rem; }
.treknoly-live-about-image-wrapper { background: linear-gradient(180deg, rgba(153,190,255,0.03), rgba(33,254,255,0.01)); padding:10px; }
.treknoly-live-about-img { display:block; width:100%; height:auto; border-radius:10px; }

/* ---------- Reviews ---------- */
.treknoly-live-reviews { padding-top:2.5rem; padding-bottom:2.5rem; background:var(--bg); }
.treknoly-live-review-card {
  background: var(--card-dark);
  border: 1px solid rgba(153,190,255,0.04);
  color:var(--text);
  transition: transform .22s ease, box-shadow .22s ease;
}
.treknoly-live-review-card:hover { transform: translateY(-6px); box-shadow: 0 12px 28px rgba(0,0,0,0.45); }
.treknoly-live-review-card i { color:var(--heading); }

/* ---------- Footer ---------- */
.treknoly-live-footer {
  background-color: #03273c; /* site background */
  color: #21feff;
  font-family: 'Raleway', sans-serif;
}

.treknoly-live-footer-logo {
  max-width: 160px;
}

.treknoly-live-footer-heading {
  color: #99beff;
  font-weight: 600;
  margin-bottom: 1rem;
}

.treknoly-live-footer-text {
  color: #21feff;
  font-size: 0.95rem;
  line-height: 1.6;
}

.treknoly-live-footer-links {
  padding-left: 0;
  list-style: none;
}

.treknoly-live-footer-link {
  color: #21feff;
  text-decoration: none;
  display: inline-block;
  margin-bottom: 0.5rem;
  transition: color 0.3s ease;
}

.treknoly-live-footer-link:hover {
  color: #99beff;
}

/* Divider */
.treknoly-live-footer hr {
  border-color: rgba(153,190,255,0.25);
}

/* Footer Bottom */
.treknoly-live-footer-bottom {
  color: #21feff;
  font-size: 0.85rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.3rem;
}

.treknoly-live-footer-bottom a {
  color: #99beff;
  text-decoration: none;
  transition: color 0.3s ease;
}

.treknoly-live-footer-bottom a:hover {
  color: #21feff;
}

/* Responsive adjustments */
@media (max-width: 576px) {
  .treknoly-live-footer-bottom {
    flex-direction: column; /* optional if you want to keep single line use nowrap above */
  }
}


/* ---------- Popup ---------- */
.treknoly-live-popup-overlay {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(2,16,22,0.7);
  z-index: 2200;
}
.treknoly-live-popup-card {
  background: var(--card-dark);
  color:var(--text);
  padding: 1.75rem;
  border-radius: 12px;
  max-width: 520px;
  width: 92%;
  border: 1px solid rgba(153,190,255,0.05);
}

/* ---------- Scroll top ---------- */
.treknoly-live-scroll-top {
  position: fixed;
  right: 18px;
  bottom: 18px;
  width:44px;
  height:44px;
  border-radius:50%;
  background:var(--btn);
  color:var(--btn-text);
  border:none;
  display:none;
  align-items:center;
  justify-content:center;
  font-weight:700;
  box-shadow:0 6px 18px rgba(0,0,0,0.45);
  cursor:pointer;
}
.treknoly-live-scroll-top:hover { background: var(--btn-hover); }

/* ---------- Legal / text pages ---------- */
.treknoly-live-legal {
  padding: 3.25rem 1rem;
  background: var(--bg);
  color:var(--text);
}
.treknoly-live-legal h1,h2,h3 { color:var(--heading); font-weight:700; }
.treknoly-live-legal p, .treknoly-live-legal li { color:var(--text); line-height:1.75; margin-bottom:1rem; }
.treknoly-live-legal ul { margin-left:1.2rem; }

/* ---------- Forms (if used) ---------- */
.treknoly-live-input, input[type="text"], input[type="email"], textarea {
  background: rgba(2,39,51,0.25);
  color:var(--text);
  border:1px solid rgba(153,190,255,0.06);
  padding:.6rem .75rem;
  border-radius:8px;
}
.treknoly-live-input:focus { outline:none; box-shadow: 0 0 0 0.2rem rgba(153,190,255,0.12); border-color:var(--heading); }

/* ---------- Utility / responsive ---------- */
.container { max-width:1140px; padding-left:1rem; padding-right:1rem; }
@media (max-width: 992px) {
  .treknoly-live-hero-heading { font-size:2rem; }
  .treknoly-live-section-title { font-size:1.6rem; text-align:center; }
}
@media (max-width: 576px) {
  .treknoly-live-hero-heading { font-size:1.6rem; }
  .treknoly-live-hero-text { font-size:.98rem; }
  .treknoly-live-feature-card { padding:1.25rem; }
  .treknoly-live-section-title { font-size:1.4rem; }
  .treknoly-live-footer { text-align:center; }
}



/* ---------- Contact Form ---------- */
.treknoly-live-contact {
  background-color: #03273c;
}

.treknoly-live-section-title {
  color: #99beff;
  font-weight: 700;
  font-size: 2rem;
}

.treknoly-live-contact-form {
  background-color: #021f32; /* slightly darker than site bg */
}

.treknoly-live-contact-form .form-control {
  background-color: #03273c;
  color: #21feff;
  border: 1px solid #99beff;
  border-radius: 0.5rem;
}

.treknoly-live-contact-form .form-control:focus {
  outline: none;
  border-color: #21feff;
  box-shadow: 0 0 0 0.2rem rgba(33,254,255,0.25);
}

.treknoly-live-btn {
  background-color: #99beff;
  color: #03273c;
  font-weight: 600;
  padding: 0.6rem 2rem;
  border-radius: 0.5rem;
  border: none;
  transition: all 0.3s ease;
}

.treknoly-live-btn:hover {
  background-color: #21feff;
  color: #03273c;
}


/* ---------- Legal Sections ---------- */
.treknoly-live-legal {
    padding: 5rem 1rem;
    background-color: #03273c; /* Site background */
}

.treknoly-live-legal .treknoly-live-section-title {
    color: #99beff; /* Headings color */
    font-family: 'Raleway', sans-serif;
    font-weight: 700;
    font-size: 2.5rem;
    margin-bottom: 2rem;
}

.treknoly-live-legal-content {
    font-family: 'Raleway', sans-serif;
    font-weight: 400;
    font-size: 1.1rem;
    line-height: 1.8;
    text-align: left;
}

.treknoly-live-legal-content h3 {
    color: #99beff;
    font-size: 1.75rem;
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.treknoly-live-legal-content p {
    margin-bottom: 1.5rem;
}

.treknoly-live-legal-content a.treknoly-live-btn {
    display: inline-block;
    padding: 0.7rem 1.5rem;
    background-color: #99beff;
    color: #03273c;
    font-weight: 600;
    text-decoration: none;
    border-radius: 0.5rem;
    transition: all 0.3s ease;
    margin-top: 1rem;
}

.treknoly-live-legal-content a.treknoly-live-btn:hover {
    background-color: #21feff;
    color: #03273c;
}

/* Responsive Adjustments */
@media (max-width: 992px) {
    .treknoly-live-legal .treknoly-live-section-title {
        font-size: 2rem;
    }
    .treknoly-live-legal-content h3 {
        font-size: 1.5rem;
    }
    .treknoly-live-legal-content {
        font-size: 1rem;
    }
}

@media (max-width: 576px) {
    .treknoly-live-legal {
        padding: 3rem 1rem;
    }
    .treknoly-live-legal-content h3 {
        font-size: 1.3rem;
    }
    .treknoly-live-legal-content {
        font-size: 0.95rem;
    }
}