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

html,
body {
height: 100%;
font-family: Georgia, "Times New Roman", serif;
}

.hero {
position: relative;
height: 100vh;
width: 100%;
background-image: url("images/hero.jpg");
background-size: cover;
background-position: center center;
background-repeat: no-repeat;

```
display: flex;
justify-content: center;
align-items: center;
```

}

.overlay {
position: absolute;
inset: 0;

```
background:
    linear-gradient(
        rgba(0,0,0,0.35),
        rgba(0,0,0,0.45)
    );
```

}

.content {
position: relative;
z-index: 2;

```
text-align: center;

max-width: 900px;

padding: 30px;

color: white;
```

}

h1 {
font-size: clamp(2.5rem, 5vw, 5rem);
font-weight: normal;

```
margin-bottom: 20px;

text-shadow: 2px 2px 10px rgba(0,0,0,0.7);
```

}

.divider {
width: 220px;
height: 2px;

```
background: rgba(255,255,255,0.8);

margin: 0 auto 30px auto;
```

}

.years {
font-size: 1.5rem;

```
margin-bottom: 35px;

letter-spacing: 2px;
```

}

.message {
font-size: 1.3rem;

```
line-height: 1.8;

margin-bottom: 20px;

text-shadow: 1px 1px 8px rgba(0,0,0,0.8);
```

}

.contact-button {

```
display: inline-block;

margin-top: 25px;

padding: 15px 30px;

border: 2px solid white;

border-radius: 4px;

text-decoration: none;

color: white;

font-size: 1.2rem;

transition: all 0.3s ease;
```

}

.contact-button:hover {

```
background: rgba(255,255,255,0.15);

backdrop-filter: blur(3px);
```

}

@media (max-width: 768px) {

```
h1 {
    font-size: 2.5rem;
}

.years {
    font-size: 1.1rem;
}

.message {
    font-size: 1rem;
    line-height: 1.6;
}

.divider {
    width: 150px;
}

.contact-button {
    font-size: 1rem;
    padding: 12px 24px;
}
```

}