:root {
    --primary: #024481;
    /* azul escuro */
    --accent: #F77F00;
    /* laranja */
    --text: #1f1f1f;
    --muted: #6b7280ad;
    --bg: rgb(247, 247, 247);
    --shadow: 0 8px 32px rgba(0, 0, 0, 0.25)
}

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

[data-animate] {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity .6s ease, transform .6s ease;
  }
  
  [data-animate].active {
    opacity: 1;
    transform: translateY(0);
  }

* {
    margin: 0;
    list-style: none;
    text-decoration: none;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: "inter", sans-serif;
    background-color: var(--bg);

}


#home,
#servicos,
#sobre {
    scroll-margin-top: 120px;
}

.alert {
    color: #fff;
    margin-bottom: 4rem;
    padding: 3rem 1.75rem;
    background-color: var(--primary);
    opacity: 25%;
}

.alert span {
    font-weight: 700;
    font-size: 2.4rem;
}

.alert p {
    font-size: 1.3rem;
}

@media  (max-width: 768px) {
    .alert span {
        font-size: 1.6rem;
        font-weight: 800;
    }

    .alert p {
        font-size:1rem;
    }
}