html {

    scroll-behavior: smooth;
}
body {

    font-family: Arial, sans-serif;

    background-color: #f4f4f4;

    color: #333;

    margin: 0;

    padding: 40px;
}

h1 {

    color: #c62828;

    font-size: 3rem;

    margin-bottom: 20px;
}

h2 {

    color: #111111;

    margin-top: 40px;
}

p {

    font-size: 18px;

    line-height: 1.7;
}
nav {

    background-color: #111111;

    padding: 15px;

    margin-bottom: 30px;
}

nav a {

    color: white;

    text-decoration: none;

    margin-right: 30px;

    font-weight: bold;

    font-size: 18px;
}

nav a:hover {

    color: #f9a825;
}
.hero {
 
text-align: center;
 
padding: 60px 20px;
}
 
.hero h1 {
 
font-size: 4rem;
 
margin-bottom: 20px;
}
 
.hero p {
 
font-size: 1.3rem;
 
max-width: 800px;
 
margin: 0 auto 30px;
}
 
.btn {
 
display: inline-block;
 
background-color: #c62828;
 
color: white;
 
text-decoration: none;
 
padding: 15px 30px;
 
border-radius: 6px;
 
font-weight: bold;
}
 
.btn:hover {
 
background-color: #a71d1d;
}

Guarda:

Plain Text
.btn {

    display: inline-block;

    background-color: #c62828;

    color: white;

    text-decoration: none;

    padding: 15px 30px;

    border-radius: 6px;

    font-weight: bold;

    margin-top: 20px;
}

.btn:hover {

    background-color: #a71d1d;
}
.btn {

    display: inline-block;

    background-color: #c62828;

    color: white;

    text-decoration: none;

    padding: 15px 30px;

    border-radius: 8px;

    font-weight: bold;

    margin-top: 20px;
}

.btn:hover {

    background-color: #a71d1d;
}
.hero {

    text-align: center;

    padding: 80px 20px;
}

.hero h1 {

    font-size: 4rem;
}

.hero p {

    max-width: 800px;

    margin: 20px auto;
}

#nosotros {

    background: white;

    padding: 50px;

    margin-top: 50px;

    border-radius: 10px;
}
#cursos {
 
margin-top: 50px;
 
background: white;
 
padding: 50px;
 
border-radius: 10px;
}
 

#servicios {
 
margin-top: 50px;
 
background: white;
 
padding: 50px;
 
border-radius: 10px;
}
 
#nosotros,
#cursos,
#servicios {
 
background: white;
 
padding: 50px;
 
border-radius: 10px;
 
margin-top: 40px;
}
 
.curso {

    background-color: #f8f8f8;

    border-left: 5px solid #c62828;

    padding: 25px;

    margin-top: 20px;

    border-radius: 8px;
}

.servicio {

    background: #f8f8f8;

    border-left: 5px solid #c62828;

    padding: 25px;

    margin-top: 20px;

    border-radius: 8px;
}
#contacto {

    background: white;

    padding: 50px;

    border-radius: 10px;

    margin-top: 40px;
}

.formulario-contacto {

    display: flex;

    flex-direction: column;

    gap: 15px;

    margin-top: 20px;
}

.formulario-contacto input,
.formulario-contacto textarea {

    padding: 12px;

    border: 1px solid #cccccc;

    border-radius: 6px;

    font-size: 16px;
}

.formulario-contacto button {

    background-color: #c62828;

    color: white;

    border: none;

    padding: 15px;

    border-radius: 6px;

    font-weight: bold;

    cursor: pointer;
}
footer {

    background: #111111;

    color: white;

    margin-top: 40px;

    padding: 40px 20px;
}

.footer-contenido {

    max-width: 1000px;

    margin: 0 auto;

    text-align: center;
}

.footer-contenido h3 {

    color: white;

    margin-bottom: 15px;
}

.logo {

    height: 60px;

    vertical-align: middle;

    margin-right: 20px;
}
@media (max-width: 768px) {
 
nav {
 
flex-direction: column;
 
gap: 15px;
}
 
nav a {
 
display: block;
}
 
.hero h1 {
 
font-size: 2.5rem;
}
 
body {
 
padding: 10px;
}
 
}
@media (max-width: 768px) {

    nav {

        flex-direction: column;

        gap: 10px;
    }

    .hero h1 {

        font-size: 2.5rem;
    }

    .logo {

        height: 50px;
    }

}