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

/* ================= BASE ================= */
@font-face {
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 200;
    src: url('https://fonts.gstatic.com/s/oswald/v57/TK3iWkUHHAIjg752FD8Ghe4.woff2') format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
body {
  font-family: 'Oswald', Arial, Helvetica, sans-serif;
  color: #555;
  background: #fff;
  line-height: 1.6;
}

/* ============== SELECTIONS ============== */
:selection {
    background-color: #f97352;
    color: #fff;
}

/* ================= HERO ================= */
.hero {
  height: 360px;
  min-height: 30vw;
  background: url("Banneri.jpg") center center / cover no-repeat;
}

.hero {
  position: relative;
}

/* LOGO ON HERO */
.hero-logo {
  position: absolute;
  top: 27px;
  left: 32%;
  transform: translateX(-50%);
  width: 225px;
}


/* ================= DESKTOP LAYOUT ================= */
.page {
  max-width: 1100px;
  margin: 0 auto;
  padding: 40px 20px;
  text-align: center;
}

h1 {
  font-size: 26px;
  font-weight: bold;
  margin-bottom: 10px;
}

.intro p {
  font-size: 15px;
}

/* ================= PRICES ================= */
.prices {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin: 50px 0;
}

.price-box {
  background: #9fd6e5;
  width: 180px;
  padding: 30px 0;
}

.price-box h2 {
  font-size: 14px;
  margin-bottom: 6px;
}

.price-box span {
  font-size: 14px;
  font-weight: bold;
}

/* ================= DESCRIPTION ================= */
.description {
  max-width: 760px;
  margin: 0 auto 40px;
  font-size: 14px;
}

/* ================= IMAGE ROW ================= */
.image-row {
  display: flex;
  justify-content: center;
  gap: 30px;
  margin-bottom: 40px;
}

.image-row img {
  width: 320px;
}

/* ================= INFO ================= */
.info {
  display: flex;
  justify-content: center;
  gap: 120px;
  margin-bottom: 50px;
  text-align: left;
  font-size: 13px;
}

.info h3 {
  font-size: 14px;
  margin-bottom: 8px;
}

.info ul {
  padding-left: 18px;
}

/* ================= BOTTOM IMAGES ================= */
.image-grid {
  display: flex;
  justify-content: center;
  gap: 30px;
  margin-bottom: 40px;
}

.image-grid img {
  width: 480px;
}

/* ================= FOOTER ================= */
footer {
  background: #4a4a4a;
  color: #eee;
  text-align: center;
  padding: 18px;
  font-size: 12px;
}

/* ================= MOBILE (MATCHES ORIGINAL) ================= */
@media (max-width: 768px) {

  /* CENTERED MOBILE COLUMN */
  .page {
    max-width: 390px;
    padding: 30px 16px;
  }

  /* HERO */
  .hero {
    height: 200px;
    background-position: center top;
  }
   .hero-logo {
     width: 110px;
     top: 14px;
  }

  h1 {
    font-size: 20px;
  }

  .intro p {
    font-size: 15px;
    line-height: 1.8;
  }

  /* PRICES */
  .prices {
    flex-direction: column;
    gap: 22px;
    margin: 30px 0;
  }

  .price-box {
    width: 100%;
    padding: 26px 0;
  }

  /* DESCRIPTION */
  .description {
    font-size: 15px;
    line-height: 1.8;
    margin-bottom: 30px;
  }

  /* IMAGES */
  .image-row,
  .image-grid {
    flex-direction: column;
    gap: 20px;
  }

  .image-row img,
  .image-grid img {
    width: 100%;
  }

  /* INFO */
  .info {
    flex-direction: column;
    gap: 30px;
    text-align: left;
  }

  .info h3 {
    font-size: 15px;
  }
}