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

html, body {
  height: 100%;
  width: 100%;
  overflow-x: hidden;
}

body {
  background-color: #000000;
  font-family: system-ui, -apple-system, BlinkMacOSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  color: white;
}

    /* Default fonts */
@font-face {
    font-family: 'Roboto-Thin';
    src: url('../fonts/Roboto-Thin.ttf')  format('truetype');
}
@font-face {
    font-family: 'Roboto-Medium';
    src: url('../fonts/Roboto-Medium.ttf')  format('truetype');
}
@font-face {
    font-family: 'Roboto-Regular';
    src: url('../fonts/Roboto-Regular.ttf')  format('truetype');
}
@font-face {
    font-family: 'Roboto-Light';
    src: url('../fonts/Roboto-Light.ttf')  format('truetype');
}
@font-face {
    font-family: 'Roboto-Bold';
    src: url('../fonts/Roboto-Bold.ttf')  format('truetype');
}

H3 {
  font-family: Roboto-Regular;
  font-size: 2.00vw;
  color: #f1f1f1;
  text-align: center;
}

H4 {
  font-family: Roboto-Regular;
  font-size: 1.50vw;
  color: #dcdcdc;
  text-align: left;
  padding-bottom: 1.0vw;
}

H5 {
  font-family: Roboto-Medium;
  font-size: 1.35vw;
  color: #e2e2e2;
  text-align: center;
  padding-bottom: 4.0vw;
}

.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 600px;          /* ← protection against very small screens */
  background-color: #000000;
  background-position: center;
  background-size: cover;     /* very important */
  background-repeat: no-repeat;
  background-attachment: scroll;   /* optional — remove if you don't want parallax */
}

.texts {
  padding-top: 35.0vw;
  width: 100.0vw;
}

.content {
  width: 64.0vw;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: top;
  text-align: left;
  padding: 1.5vw;
  margin-left: auto;
  margin-right: auto;
}

.boxes {
  padding: 1.0vw;
  width: 30.0vw;
  font-family: Roboto-Medium;
  font-size: 1.25vw;
  color: #e2e2e2;
}

/* Desktop / big screens */
@media (min-width: 1200px) {
.hero {
  background-image: url('../images/brushwood-hd-bg.jpg');
}
    
}

/* Tablet / medium screens */
@media (min-width: 768px) and (max-width: 1199px) {
  .hero {
    background-image: url('../images/brushwood-pad-bg.jpg');
  }

H3 {
  font-size: 3.00vw;
}

H4 {
  font-size: 2.25vw;
  padding-bottom: 1.5vw;
}

H5 {
  font-size: 2.05vw;
  padding-bottom: 6.0vw;
}
    
.texts {
  padding-top: 60.0vw;
}

.content {
  width: 96.0vw;
  padding: 1.5vw;
}

.boxes {
  padding: 1.5vw;
  width: 45.0vw;
  font-size: 1.85vw;
}
    
}

/* Mobile / small screens */
@media (max-width: 767px) {
  .hero {
    background-image: url('../images/brushwood-phone-bg.jpg');
  }

H3 {
  font-size: 8.00vw;
}

H4 {
  font-size: 6.0vw;
  padding-bottom: 5.0vw;
}

H5 {
  font-size: 5.40vw;
  padding-bottom: 20.0vw;
}
    
.texts {
  padding-top: 70.0vw;
}

.content {
  width: 100.0vw;
  padding: 5.0vw;
  display: block;
}

.boxes {
  padding: 1.0vw;
  width: 90.0vw;
  font-size: 5.0vw;
}
    
  /* Optional: on very small screens parallax usually looks bad */
  background-attachment: scroll;
}

/* Just for better feeling on mobile → you can remove */
@media (max-width: 480px) {
  .hero {
    min-height: 100svh;   /* small viewport height - better mobile feeling */
  }
}