:root{
    /* Colors */
    --primary-color: #2D3908;
}

@font-face {
    font-family: PaytoneOne Regular;
    src: url(/assets/fonts/PaytoneOne-Regular.ttf);
}

@font-face {
    font-family: VarelaRound Regular;
    src: url(/assets/fonts/VarelaRound-Regular.ttf);
}

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

html{
    font-size: 62.5%;
    background: linear-gradient(180deg, #FFFFFF 0%, #FFF6EB 100%);
    background-repeat: no-repeat;
}

header{
    width: 100%;
    background: #111701;
    padding: 2.4rem 0;
}

.content__header{
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo img{
    width: 100px;
}

.hero{
    background-image: url(/assets/img/Fondoverde.jpg);
    background-size: 35% 101%;
    background-position: right center;
    background-repeat: no-repeat;
    min-height: 650px;
    height: 100vh;
}

.hero__container{
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 5.5rem 0;
}

.hero__caption{
    width: 450px;
}

.logo__hero img{
    width: 350px;
}

.hero__img img{
    width: 550px;
}

.hero__caption__text{
    margin-top: 50px;
}

h1{
    font-size: 3rem;
    font-family: PaytoneOne Regular;
    font-weight: normal;
    letter-spacing: 15px;
}

.hero__caption__text p{
    font-size: 1.8rem;
    font-family: VarelaRound Regular;
    margin: 35px 0;
}

.hero__caption__social{
    display: flex;
    align-items: center;
    gap: 32px;
}

.hero__caption__social a img{
    width: 30px;
}

.footer{
    background: #111701;
    padding: 2rem 0;
}

.footer p{
    font-size: 1.6rem;
    font-family: VarelaRound Regular;
    text-align: center;
    color: #FFF6EB;
}