@import url('https://fonts.googleapis.com/css2?family=Lobster&family=Pompiere&display=swap');
:root {
--color-primary: #b9030f;
--color-secondary: #9e0004;
--color-accent: #70160e;
--color-dark: #161917;
--color-light: #e1e3db;
--color-blue: rgb(34, 136, 213);
}

.hero {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
text-align: center;
 margin-bottom: 50px;
background-color: var(--color-light);
color: var(--color-light);
padding: 20px;
position: relative;
}

.hero-content {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
flex-wrap: wrap;
}

.hero-text {
max-width: 50%;
text-align: left;
}

.hero-image {
max-width: 40%;
display: flex;
justify-content: center;
align-items: center;
}
.hero-image img {
  width: 100%;
  height: auto;
  border-radius: 10px;
}

.footer-rights {
    font-family: 'Pompiere', cursive;
    font-size: 0.9rem;
    margin-top: -100px;
    color: var(--color-dark);
    margin-bottom: 0;
}
.hero-title {
font-family: 'Lobster', cursive;
font-size: 15rem;
line-height: 1;
margin: 0;
color: var(--color-primary);
transform: rotate(-5deg);
}

.hero-subtitle {
font-family: 'Pompiere', cursive;
font-size: 2rem;
font-weight: bold;
margin: -20px 0 0;
color: var(--color-primary);
text-align: right;
}

.hero-text p {
font-size: 1.2rem;
margin: 20px 0;
    font-family: 'Pompiere', cursive;

}

.hero-button {
background-color: var(--color-accent);
color: var(--color-light);
border: none;
padding: 5px 10px;
font-size: 1rem;
cursor: pointer;
border-radius: 5px;
}

.hero-button:hover {
background-color: var(--color-blue);
border: none;
padding: 10px 40px;
font-size: 1rem;
cursor: pointer;
border-radius: 5px;
}

@media (max-width: 768px) {
.hero-content {
flex-direction: column;
text-align: center;
margin-top: 40px;
}

.hero-text {
max-width: 100%;
text-align: center;
}

.hero-image {
max-width: 100%;
margin-top: 20px;
}

.hero-title {
font-size: 10rem;
}

.hero-subtitle {
font-size: 1.5rem;
}
.footer {
   margin-top:120px;
}
}


.lottie-container {
width: 40px;
height: 40px;
display: inline-block;
vertical-align: middle;
margin-left: 10px;
}

.slogan {
    color: var(--color-dark)
}