@import url("style.css");

html, body {
height: 100%;
margin: 0;
padding: 0;
font-family: var(--fonte-texto);
}

body {
display: flex;
flex-direction: column;
background: var(--cor-plano-de-fundo);
}

main {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
gap: 20px;
padding: 20px;
}

.hero {
padding: 20px 0 0 90px;
text-align: left;
}

.hero__p {
margin: 20px 0;
max-width: 600px;
line-height: 1.6;
font-size: 16px;
color: #2c5c5c;
}

.hero__button {
background: #2bb3b3;
color: white;
border: none;
padding: 12px 25px;
font-size: 16px;
border-radius: 25px;
cursor: pointer;
}

.hero__button:hover {
background: var(--cor-azul-escuro);
transition: 0.2s;
}

.hero__title {
font-size: 50px;
line-height: 60px;
}

.linha1 { color: #2c5c5c; }
.linha2 { color: #2bb3b3; display: block; }

.banner {
position: relative;
width: min(1700px, 95%);
height: max(420px, 30vh);
margin: 20px auto;
border-radius: 15px;
overflow: hidden;
}

.banner__img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}

.conteudo {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-end;
padding: clamp(15px, 4vw, 40px);
color: white;
text-align: right;
background: linear-gradient(to left, rgba(0,0,0,0.6), transparent);
}

.titulo-banner {
font-size: clamp(18px, 2.5vw, 26px);
font-weight: 700;
}

.conteudo__p {
font-size: clamp(14px, 1.5vw, 16px);
margin-bottom: 15px;
max-width: 400px;
}

footer {
margin-top: auto;
}

#footer__p {
text-align: center;
padding: 15px;
color: #4f6f6f;
font-size: 14px;
}

@media (max-width: 1024px) and (min-width: 769px) { 
.hero {
padding: 20px 0 0 40px;
}

.conteudo {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-end;
padding: clamp(15px, 4vw, 40px);
color: white;
text-align: right;
background: linear-gradient(to left, rgba(0,0,0,0.8), transparent);
}
}

@media (max-width: 768px ) and (min-width: 481px) {

main {
justify-content: flex-start;
padding: 10px;
}

.hero {
    text-align: center;
    padding: 20px;
}

.hero__title {
    font-size: 35px;
    line-height: 40px;
}

.hero__p {
    font-size: 14px;
    max-width: 100%;
    margin: 15px auto;
    padding-bottom: 20px;
}

.hero__button {
    width: 100%;
    max-width: 300px;
}

.banner {
    width: 100%;
    height: 350px;
}

.conteudo {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-end;
padding: clamp(15px, 4vw, 40px);
color: white;
text-align: right;
background: linear-gradient(to left, rgba(0,0,0,0.8), transparent);
}
}

@media (max-width: 480px) {

.hero {
    text-align: center;
    padding: 20px;
}
.banner {
    height: 280px;
    margin: auto;
    }

.hero__title {
    font-size: 26px;
    line-height: 32px;
}

.hero__p {
    font-size: 14px;
}

.hero__button {
    font-size: 14px;
    padding: 10px 20px;
}

.conteudo {
    display: absolute;
    justify-content: center;
    text-align: center;
    background: linear-gradient(to left, rgba(0,0,0,0.6));
}

.conteudo__p {
        margin-top: 50px;
        font-size: 13px;
        max-width: 250px;
}

.titulo-banner {
    line-height: 20px;
    font-size: 20px;
}
}