*{
  box-sizing:border-box;
}

body{
  margin:0;
  font-family:Arial, Helvetica, sans-serif;
  background:#f4f8ff;
  color:#222;
}

/* HEADER */
.topbar{
  background:#0d47a1;
  padding:15px;
}

.brand{
  display:flex;
  align-items:center;
  gap:14px;
  max-width:1100px;
  margin:auto;
}

/* LOGO CONTAINER – FIXED */
.mark{
  width:140px;
  padding:6px;
  background:#fff;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.mark img{
  max-width:100%;
  height:auto;
  display:block;
}

/* BRAND TEXT */
.brand-text h1{
  margin:0;
  color:#fff;
  font-size:22px;
}

.brand-text p{
  margin:4px 0 0;
  color:#cfd8ff;
  font-size:14px;
}

/* NAV */
.nav{
  background:#08306b;
  text-align:center;
  padding:10px;
}

.nav a{
  color:#fff;
  margin:0 14px;
  text-decoration:none;
  font-weight:bold;
}

/* HERO */
.hero{
  text-align:center;
  padding:50px 20px;
}

.hero h2{
  color:#0d47a1;
}

/* SECTIONS */
.section{
  max-width:900px;
  margin:40px auto;
  padding:20px;
}

.section h2{
  text-align:center;
  color:#0d47a1;
}

/* PRODUCTS */
.products{
  list-style:none;
  padding:0;
  text-align:center;
}

.products li{
  padding:8px;
  font-size:16px;
}

/* FORM */
.form{
  max-width:400px;
  margin:auto;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.form input,
.form textarea{
  padding:10px;
  font-size:15px;
}

.form button{
  padding:12px;
  background:#0d47a1;
  color:#fff;
  border:none;
  cursor:pointer;
  font-size:16px;
}


/* PAYMENT */
.qr{
  display:block;
  margin:20px auto;
  max-width:220px;
}

/* FOOTER */
.footer{
  background:#08306b;
  color:#fff;
  text-align:center;
  padding:15px;
  margin-top:40px;
}