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

.hero{
    width: 100%;
    height: 100vh;
    background-image: url("assets/bg-hero-sol.webp");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    overflow: hidden;
    position: relative;
    flex-direction: row;
    display: flex;
    padding: 0vw 4vw;

    #personSolange{
        display: flex;
        height: 100%;
        width: 50%;
        img{
            height: auto;
            width: 200px;
        }
    }

    .text{
        display: flex;
        width: 50%;
        flex-direction: column;
        justify-content: center;
        color: #F2BC1F;
        font-family: "Ubuntu";
        font-size: 2vw;
        gap: 10px;
        font-weight: 700;

        p{
            color: white;
            font-family: "inter";
            font-size: 30px;
            font-weight: 300;
            margin-bottom: 30px;
        }

      

        ul{
            margin-top: 30px;
            li{
                text-decoration: none;
                list-style: none;
                a{
                    color: #fbfbfb;
                    border-radius: 60px;
                    width: 1px;
                    height: auto;
                }
            }
        }
    }
}

@media (max-width: 768px) {
    .hero {
        flex-direction: column;
        justify-content: space-between;
        position: relative;

        #personSolange {
            position: absolute;
            bottom: 0;
            right: 0;
            width: 100%;
            height: auto;
            justify-content: center;
            align-items: flex-end;
            z-index: 1;
            pointer-events: none;
            

            img {
                width: 80%;
                max-width: 350px;
                height: auto;
                transform: translateY(40px);
            }
        }

        .text {
            width: 100%;
            z-index: 2;
            margin-top: 30px;
            font-size: 5vw;

            

            ul{
                display: none;
                margin-top: 30px;
            li{
                text-decoration: none;
                list-style: none;
                a{
                    color: #fbfbfb;
                    border-radius: 60px;
                    width: 1px;
                    height: auto;
                }
            }
        }
        }


    }
}