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

html,body {height:100%}
body {
  font-family:'Poppins',sans-serif;
  background:#fff;
  color:#222;
  display:flex;
  flex-direction:column;
}

/* Container */
.container {max-width:1200px;margin:0 auto;padding:0 20px;flex:1}

/* Default desktop navbar */
.navbar {
  background:#fff;
  border-bottom:1px solid #eee;
  padding:12px 0;
}

.nav-container {
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.logo img {width:180px;}

nav ul {
  display:flex;
  list-style:none;
  gap:20px;
}

nav ul li a {
  text-decoration:none;
  color:#333;
  font-weight:500;
  font-size:15px;
  transition:color .3s ease;
}

nav ul li a.active,
nav ul li a:hover {color:#0077ff}

/* Hero Section */
.hero {padding:60px 20px;flex:1}
.hero-content {
  display:flex;
  flex-wrap:wrap;
  gap:40px;
  align-items:flex-start;
  justify-content:space-between;
}

.hero-text {flex:1;min-width:280px}
.hero-text h1 {font-size:36px;margin-bottom:12px;font-weight:600;color:#111}
.hero-text p {font-size:16px;margin-bottom:20px;color:#555}

.btn {
  display:inline-block;
  background:#0077ff;
  color:#fff;
  padding:12px 26px;
  border-radius:6px;
  font-size:15px;
  font-weight:500;
  text-decoration:none;
  transition:background .3s ease;
}
.btn:hover {background:#005fd4}

/* Promo image */
.promo-image {margin-top:25px}
.promo-image img {max-width:280px;border-radius:8px;display:block}

/* Side image */
.hero-image {flex:1;min-width:280px;display:flex;justify-content:center}
.hero-image img {max-width:100%;border-radius:8px}

/* Footer */
.footer {
  text-align:center;
  padding:20px;
  font-size:14px;
  color:#777;
  border-top:1px solid #eee;
  margin-top:auto;
}

/* 📱 Mobile version: Logo centered + nav under it */
@media(max-width:768px){
  .nav-container {
    flex-direction:column;
    align-items:center;
    text-align:center;
  }

  .logo {
    margin-bottom:10px;
  }

  nav ul {
    flex-wrap:wrap;
    justify-content:center;
    gap:15px;
  }

  .hero-content {
    flex-direction:column;
    text-align:center;
  }

  .hero-text {text-align:center}
  .promo-image img {margin:0 auto}
}