body {
  margin:0;
  font-family: Arial, sans-serif;
  background:linear-gradient(#dff5f2,#ffffff);
  color:#333;
  font-size:18px;
}

/* HEADER */

header {
  text-align:center;
  padding:40px 10px 10px;
}

.logo {
  display:block;
  margin:0 auto 30px auto;
  max-width:260px;
}

nav {
  text-align:center;
  margin-bottom:10px;
}

nav a {
  color:#009688;
  font-weight:bold;
  text-decoration:none;
  margin:0 15px;
  font-size:18px;
}

p {
  text-align:justify;
}

/* STRAPLINE */

.strapline {
  margin:15px 0 25px 0;
  padding:0;
  font-size:26px;
  font-weight:600;
  color:#6a2c91;
  text-align:center;
}

/* HERO */

.hero-section {
  padding:0 20px 40px;
}

.hero-text {
  background:white;
  max-width:900px;
  margin:-15px auto 40px;
  padding:20px 30px 30px 30px;
  border-radius:25px;
  box-shadow:0 0 20px rgba(0,0,0,0.1);
}

.hero-text ul {
  font-size:19px;
  margin-top:20px;
}

.hero-text li {
  margin-bottom:8px;
}

/* DIAGRAM + TEXT */

.side-section {
  display:flex;
  gap:30px;
  align-items:flex-start;
  margin:60px 0;
  flex-wrap:nowrap;
}

.side-image {
  width:45%;
  border-radius:20px;
  box-shadow:0 0 15px rgba(0,0,0,0.15);
}

.side-text {
  width:55%;
}

/* BALLOON */

.balloon-inline {
  width:100%;
  max-width:520px;
  display:block;
  margin:50px auto;
  border-radius:20px;
}

/* TESTIMONIAL */

.testimonial {
  margin:50px auto;
  padding:30px;
  background:#f7f7f7;
  border-left:5px solid #009688;
  max-width:900px;
}

.content-box {
  background:#f7f7f7;
  border-left:5px solid #009688;
  padding:30px;
  max-width:900px;
  margin:40px auto;
  border-radius:10px;
}

/* DISCLAIMER */

.disclaimer {
  font-size:13px;
  background:#f0f0f0;
  padding:20px;
  margin:40px auto;
  max-width:900px;
  color:#555;
}

/* FOOTER */

footer {
  text-align:center;
  padding:25px;
  font-size:14px;
  color:#666;
}

/* ABOUT ME PHOTOS */

.photo-strip {
  display:flex;
  justify-content:center;
  gap:15px;
  margin:40px 0;
  flex-wrap:wrap;
}

.photo-strip img {
  width:140px;
  height:180px;
  object-fit:cover;
  border-radius:15px;
  box-shadow:0 0 10px rgba(0,0,0,0.15);
}

/* MOBILE */


@media (max-width:600px) {

  .side-section {
    flex-direction:column;
  }

  .side-image,
  .side-text {
    width:100%;
  }

  .photo-strip img {
    width:45%;
    height:160px;
  }
}

.cta {
  text-align:center;
  margin:35px 0;
}

.cta a {
  background:#6a2c91;
  color:white;
  padding:12px 22px;
  border-radius:25px;
  text-decoration:none;
  font-weight:bold;
}

.cta a:hover {
  opacity:0.85;
}