/*======================================================
RESET
======================================================*/

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

:root{

    --bg:#0f0f0f;
    --text:#f5f5f5;
    --accent:#c62828;
    --accent-hover:#e53935;
    --paragraph:#cfcfcf;

}

/*======================================================
BODY
======================================================*/

body{

    background:
        linear-gradient(
            rgba(10,10,10,.94),
            rgba(10,10,10,.96)
        ),
        url("../images/backgrounds/bg-texture.webp");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    background-color: var(--bg);
    color: var(--text);

    font-family: "Inter", sans-serif;

    min-height: 100vh;

}

/*======================================================
HERO
======================================================*/

.hero{
    width:min(900px,90%);
    min-height:100vh;
    margin:auto;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    position:relative;
}

/*======================================================
LOGO
======================================================*/

.logo{
    width:300px;
    max-width:82%;
    margin-bottom:42px;
    filter:none;
    animation:breathing 6s ease-in-out infinite;
}

/*======================================================
TEXTOS
======================================================*/

h1{

    font-family:"Oswald",sans-serif;
    font-size:3.2rem;
    font-weight:700;
    line-height:1.1;
    margin-bottom:10px;
    color:var(--text);
}

h2{

    font-family:"Inter",sans-serif;
    font-weight:400;
    font-size:1.5rem;
    line-height:1.4;
    color:#f7d8b0;
    margin-bottom:35px;

}

p{

    max-width:620px;
    font-family:"Inter",sans-serif;
    font-weight:400;
    line-height:1.8;
    color:var(--paragraph);
    font-size:1.05rem;
    margin-bottom:45px;

}

/*======================================================
BOTÃO
======================================================*/

.btn{

    display:inline-block;
    padding:18px 45px;
    border-radius:999px;
    text-decoration:none;
    color:white;
    background:linear-gradient(135deg,#9e1b1b,#d32f2f);
    font-family:"Inter",sans-serif;
    font-weight:600;
    transition:.35s;
    box-shadow:0 10px 35px rgba(198,40,40,.35);

}

.btn:hover{

    transform:translateY(-4px);

    box-shadow:

    0 15px 45px rgba(198,40,40,.55);

}

/*======================================================
WHATSAPP
======================================================*/

.whatsapp{

    position:fixed;

    right:28px;

    bottom:28px;

    width:68px;

    height:68px;

    border-radius:50%;

    background:#25D366;

    color:white;

    display:flex;

    justify-content:center;

    align-items:center;

    text-decoration:none;

    font-size:34px;

    box-shadow:

    0 10px 35px rgba(0,0,0,.35);

    transition:.35s;

}

.whatsapp:hover{

    transform:scale(1.08);

}

/*======================================================
ANIMAÇÕES
======================================================*/

@keyframes breathing{

0%{

transform:scale(1);

}

50%{

transform:scale(1.03);

}

100%{

transform:scale(1);

}

}

/*======================================================
RESPONSIVO
======================================================*/

@media(max-width:768px){

.logo{

width:220px;
margin-bottom:32px;
}

h1{

font-size:2.2rem;

}

h2{

font-size:1.2rem;

}

p{

font-size:1rem;

}

.btn{

width:100%;

max-width:320px;

}

.whatsapp{

width:60px;

height:60px;

font-size:30px;

right:20px;

bottom:20px;

}

}