*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family: Arial, Helvetica, sans-serif;
}

body{
    background:black;
    color:white;
    height:100vh;
}

header{
    padding:30px 60px;
}

.brand{
    font-size:18px;
    opacity:0.8;
    color: white;
}

.hero{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:80px 60px;
}

.left h1{
    font-size:90px;
    font-weight:500;
    color:#cfcfcf;
}

.buttons{
    margin-top:60px;
    display:flex;
    gap:20px;
}

.btn{
    border:1px solid white;
    padding:20px 40px;
    text-decoration:none;
    color:white;
    transition:0.3s;
}

.btn:hover{
    background:white;
    color:black;
    box-shadow: 15px 15px 1px rgba(255, 255, 255, 0.646);
}

.right img{
    width:300px;
    margin-right: 200px;
}
.sobre{
    display: flex;
    align-items: center; /* alinha verticalmente */
    justify-content: center;
    gap: 150px;
    margin-top: 200px;
}

.textao{
    width: 600px;
    font-family: Arial, Helvetica, sans-serif;
    text-indent: 70px;
    background-color: rgb(0, 0, 0);
    color: rgb(255, 255, 255);
    padding: 40px;
    border-radius: 30px;
}
.textao:hover{
    background-color: rgb(255, 255, 255);
    color: rgb(0, 0, 0);
    box-shadow: 20px 20px 1px rgba(255, 255, 255, 0.646);
    transition: 0.5s;
}

.left img{
    width:400px;
    border-radius:25px;
}
.left img:hover{
    box-shadow: 0px 0px 40px rgb(255, 255, 255);
    transition: 0.5s;
}
.psy{
    margin-top:120px;
    text-align:center;
}

.psy h2{
    font-size:32px;
    margin-bottom:10px;
    margin-top: 200px;
}

.linha{
    width:80%;
    height:1px;
    background:rgb(255, 89, 0);
    margin:auto;
    margin-bottom:50px;
}
.linhaG{
    width:15%;
    height:15px;
    background:rgb(255, 89, 0);
    margin:auto;
}

.cards{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap:80px;
    width:80%;
    margin:auto;
}

.card img{
    width:100%;
    border-radius:20px;
}

.card p{
    margin-top:15px;
    font-size:18px;
}
.card img:hover{
    transition: 0.3s;
    box-shadow: 0px 0px 50px rgba(255, 115, 0, 0.646);
}
.paragri{
    padding: 5px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: large;
}
.criadores{
    width:70%;
    margin:auto;
    margin-top:150px;
}

.criadores h1{
    font-size:100px;
    margin-bottom:60px;
}

.pessoa{
    display:flex;
    align-items:center;
    border:1px solid white;
    padding:20px;
    margin-bottom:30px;
    border-radius: 15px;
    color: white;
    text-decoration: none;
}
.pessoa:hover{
    background-color: white;
    color: black;
    transition: 0.3s;
    box-shadow: 20px 20px 1px rgba(255, 255, 255, 0.646);
   
}

.pessoa img{
    width:70px;
    height:70px;
    border-radius:15px;
    margin-right:30px;
}

.pessoa p{
    font-size:22px;
}
.lefto img{
    width:400px;
    border-radius:25px;
    margin-left: 500px;
}
.lefto img:hover{
    box-shadow: 0px 0px 50px rgb(221, 0, 255);
    transition: 0.5s;
}
.brand2{
    font-size:18px;
    opacity:0.8;
    color: white;
}
.textao2{
    width: 600px;
    font-family: Arial, Helvetica, sans-serif;
    text-indent: 70px;
    background-color: rgb(255, 255, 255);
    color: rgb(0, 0, 0);
    padding: 40px;
    border-radius: 30px;
    box-shadow: 20px 20px 1px rgba(255, 255, 255, 0.646);
}
.textao2:hover{
    background-color: rgba(255, 255, 255, 0.241);
    color: rgb(255, 255, 255);
    box-shadow: 20px 20px 1px rgba(40, 40, 40, 0.646);
    transition: 0.5s;
}