/* CSS to hero */

#hero{
    height:84vh; /* 100-8vh porque altura da primeira secção é a altura de vh menos a altura da navbar*/
    /* mas depois menos que isso para mostrar o SVG em baixo que é uma nova secção*/
    background-color: #f5f5f5;
    padding-top: 6%;
    padding-bottom: 2%;
}

.hero{
    width:100%;
    height:100%;
    display:flex;
    padding-left: 9vw;
    padding-right: 9vw;
    padding-bottom: 0%;
}

.hero-esq {
    background-color: #f5f5f5;
    /*background-color: pink;*/
    width:50%;
    height:100%;
    display: flex;
    align-items: center;
}
.hero-dta {
    background-color: #f5f5f5;
    width:50%;
    height:100%;
    display: flex;
    align-items: center;
}

.content-hero-esq{
    background-color: #f5f5f5;
   /* background-color: blue;*/
}

.hero-esq p {
    margin-top: 1.5%;
    font-size: 22px;
    font-family: "Roboto";
    font-weight: 360;
    line-height: 30px;
    display: inline;
}

.content-hero-esq .button{
    margin-right: 14px;
}

.hero-esq h4 {
    margin-top: 1.5%;
}


/* Hover effect for h1 in .content-hero-esq */
.content-hero-esq h1:hover {
    transform: translateY(-10px); /* Moves the card up by 10px */
    transition: transform 0.3s ease; /* Smooth animation */
}

/* Hover effect for h4 in .content-hero-esq */
.content-hero-esq h4:first-of-type:hover {
    transform: translateY(-10px); /* Moves the card up by 10px */
    transition: transform 0.3s ease; /* Smooth animation */
}

/* Hover effect for hero-dta */
.hero-dta:hover {
    transform: translateY(-10px); /* Moves the card up by 10px */
    transition: transform 0.3s ease; /* Smooth animation */
}

/* Hover effect for hero-dta */
.hero-dta:first-of-type:hover {
    transform: translateY(-10px); /* Moves the card up by 10px */
    transition: transform 0.3s ease; /* Smooth animation */
}