body {
  background-image: url('/img/future-realestate.webp'); /* Replace with your image path */
  background-size: cover; /* Stretches and scales the image to cover the entire container */
  background-position: center center; /* Centers the image */
  background-repeat: no-repeat; /* Prevents image repetition */
  background-attachment: fixed; /* Keeps the background fixed during scrolling */
  height: 100vh; /* Ensures the body covers the full viewport height */
  margin: 0; /* Removes default body margin */
}
@font-face {
  font-family:Benton;
  src:url(../fonts/BentonSans-Medium.woff2) format("woff2"),
  url(../fonts/BentonSans-Medium.woff) format("woff"),
  url(../fonts/BentonSans-Medium.ttf) format("truetype");
  font-display:swap
}
@font-face {
  font-family:Benton-Book;
  src:url(../fonts/BentonSans-Book.woff2) format("woff2"),
  url(../fonts/BentonSans-Book.woff) format("woff"),
  url(../fonts/BentonSans-Book.ttf) format("truetype");
  font-display:swap
}
* {
  /* Calculation */
  --diff: calc(var(--max-size) - var(--min-size));
  --responsive: calc((var(--min-size) * 1px) + var(--diff) * ((100vw - 420px) / (1200 - 420))); /* Ranges from 421px to 1199px */
}


h1 {
  font-family:Benton-Book,Arial,Sans-Serif;
 
  font-style:normal;
  font-stretch:normal;
  line-height:100%;
  letter-spacing:0;
  margin:0;
  color: #fff;
  display:inline-block;
 font-size: 300%;
  width: -moz-fit-content;
  width: fit-content;
   padding: 0;
  margin: 0;
  transition: all .5s ease-in-out;
  display: flex;
  flex-wrap: wrap;
  
  overflow: auto;
  --max-size: 100;
  --min-size: 25;
  font-size: var(--responsive);
  text-align: center;
}
p {
  font-family:Benton-Book,Arial,Sans-Serif;
  font-size:16px;
  font-weight:400;
  font-style:normal;
  font-stretch:normal;
  line-height:30px;
  letter-spacing:0;
  margin:0;
  color: #002349;
}