@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;700&display=swap');

* { 
  margin: 0; 
  padding: 0; 
  box-sizing: border-box; }

html { scroll-behavior: smooth; }
body { 
  background: #000; 
  color: #f1f1f1; 
  font-family: 'Ubuntu', sans-serif; 
  -webkit-font-smoothing:antialiased; }

.container { 
  max-width: 1200px; 
  margin: 0 auto; 
  padding: 0 20px; }


/* NAV */
header { 
  position: relative; }

.navbar-container { 
  display:flex; 
  align-items:center; 
  justify-content:space-between; 
  gap: 20px; 
  padding: 10px 0; }

.logo { 
  font-weight:700; 
  font-size:1.4rem; 
  color:#FFD700; }

.navbar { 
  display:flex; 
  gap:18px; 
  align-items:center; 
  list-style:none; }

.navbar a { 
  color:#FFD700; 
  text-decoration:none; 
  padding:6px 8px; }

.navbar a:hover { 
  color:#fff; 
  text-decoration:underline; }

.hamburger { 
  display:none; 
  font-size:1.6rem; 
  cursor:pointer; 
  color:#FFD700; }


.section1 { 
  padding: 60px 0; 
  text-align:center; }

.hero-wrap { 
  display:flex; 
  gap:40px; 
  align-items:center; 
  justify-content:center; 
  flex-wrap:wrap; }

.topleft, .topright { flex:1 1 420px; min-width:260px; }

.logoimg { 
  max-width:320px; 
  width: 90%; 
  height:auto; 
  display:block; 
  margin:0 auto 18px; }

h1, h2 { color:#FFD700; margin-bottom:12px; }

h1 { font-size:2rem; }

.lead { 
  color:#ddd; 
  line-height:1.6; 
  max-width:760px; 
  margin:8px auto; }

.deal { 
  margin-top:12px; 
  color:#ddd; 
  font-weight:600; }

.trainingimg { 
  max-width:300px; 
  width:70%; 
  height:auto; 
  display:block; 
  border-radius:8px; }

/* Buttons */
.buttons { 
  display:flex; 
  gap:16px; 
  justify-content:center; 
  margin-top:20px; 
  flex-wrap:wrap; }

.btn { 
  padding:10px 18px; 
  border-radius:8px; 
  border:2px solid #FFD700; 
  background:#FFD700; 
  color:#000; 
  font-weight:700; 
  cursor:pointer; }

.btn:hover { 
  background:#000; 
  color:#FFD700; }

/* ABOUT */
.section-about { 
  padding:50px 0; 
  text-align:center; }

.section-about h2{ 
  font-size:2rem; 
  margin-bottom:14px; }

.about-text { 
  max-width:900px; 
  margin:0 auto; 
  color:#ddd; 
  line-height:1.7; }

/* PLANS */
.section2 { padding:50px 0; text-align:center; }
.section2 h2 { font-size:2rem; }
.sublead { color:#ddd; margin-bottom:18px; }
.boxes { display:flex; gap:20px; justify-content:center; flex-wrap:wrap; }
.box { flex:1 1 280px; background:#111; border:2px solid #FFD700; border-radius:10px; padding:18px; max-width:350px; text-align:center; min-width:240px; }
.box h3 { color:#FFD700; margin-bottom:8px; font-size:1.2rem; }
.price { font-weight:700; margin:8px 0; color:#ffd44d; }
.features { list-style:none; color:#ddd; margin:12px 0; line-height:1.6; }
.box-cta { margin-top:10px; }

/* Compare table */
.compare-title { margin-top:28px; color:#FFD700; font-size:1.8rem; margin-bottom:12px; }
.table-container { width:100%; overflow-x:auto; padding: 8px 0 24px; }
.compare-table { min-width: 700px; max-width: 1000px; margin: 0 auto; border-collapse: collapse; width:100%; }
.compare-table th, .compare-table td { border:1px solid #FFD700; padding:12px 14px; text-align:center; color:#f1f1f1; }
.compare-table thead th { background:#111; color:#FFD700; font-weight:700; }
.compare-table tbody th { background:#111; text-align:left; padding-left:18px; color:#FFD700; }

/* CONTACT & SOCIALS */
.section3 { 
  padding:40px 0; 
  text-align:center; }

.contact-item a { 
  color:#ffd44d; 
  text-decoration:none; }

.social-links { 
  margin-top:14px; 
  display:flex; 
  gap:18px; 
  justify-content:center; 
  align-items:center; }

.social-links a { 
  color:#FFD700; 
  font-size:1.6rem; 
  transition: color .2s; }

.social-links a:hover { 
  color:#fff; }


footer { 
  padding:18px; 
  text-align:center; 
  color:#FFD700; 
  background:#111; 
  border-top:2px solid #FFD700; 
  margin-top:20px; }


@media (max-width: 900px) {
  .logoimg { 
    width:140px; }

  .trainingimg { 
    max-width:320px; }

  .compare-table { 
    min-width:640px; }
}

@media (max-width: 768px) {
  .navbar { display:none; }
  .hamburger { display:block; }
  .navbar.active { display:flex; flex-direction:column; gap:12px; background:#111; padding:12px; border-top:2px solid #FFD700; position: absolute; right: 20px; top:58px; z-index:50; }
  .hero-wrap { flex-direction:column-reverse; }
  .logoimg { margin-bottom:6px; }
}

@media (max-width: 768px) {
  .compare-table { min-width:560px; }
  .logoimg { width: 200px; }
  h1 { font-size:1.5rem; }
}