:root{
    --background: linear-gradient(135deg, #667eea7e 0% #764ba298 100%); 
    --color-primary: #2c4472;
    --theme-color: #ffff;
    --color-secondary:#764ba2;
    --text-color: #0000;
    --text-color-inverse: #ffff;
    --boton-padding: 20px 40px;
}

html{
    scroll-behavior: smooth;
}

section[id]{
    scroll-margin-top: 70px;
}

body{
    background-color: var(--theme-color);
    color: (var(--text-color));
}

a{
    text-decoration: none;
}


@media (min-width: 768px) {
    .hero__container h2{

        font-size: 30px;
    }

  
}