@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap');



@keyframes float {

0% {
transform: translatey(0px);
}
50% {
transform: translatey(10px);
}
100% {
transform: translatey(0px);
}

}


/* width */
::-webkit-scrollbar {
  width: 0.8rem;
   background:#000; 
}

/* Track */
::-webkit-scrollbar-track {
  border-radius: 1.0rem;
  background:#000; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background:#333; 
  border-radius: 1.0rem;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #FF008B; 
}



* {
padding: 0;
margin: 0;
font-family: "Poppins", sans-serif;
border: none;
list-style: none;
box-sizing: border-box;
}

html {
scroll-behavior: smooth;
}

body {
/*background-color:#161616;*/
background: radial-gradient(#161616, #000);
color:#fff;
}

.container {
width: 100%;
max-width:1236px;
margin: 0 auto;
padding:0 20px;
}

img {
display: block;
max-width: 100%;}

a {
text-decoration: none;
color: #fff;
transition-duration: 0.4s;
cursor: pointer; 
}

a:hover {
text-decoration: none;
color: #FF008B;
transition-duration: 0.4s;
cursor: pointer; 
}

h1 {
font-size: 40px;
line-height:50px;
margin-bottom: 10px;
}

h2 {
font-size: 28px;
line-height:32px;
}

h3 {
font-size: 28px;
line-height:32px;
}

h4 {
font-size: 20px;
margin-top: 16px;
margin-bottom: 16px;
}

.menu {
margin-top: 32px;
display: flex;
justify-content: space-between;
}

.nav-link {
display: flex;
gap: 42px;
}

.nav-link a {
padding: 8px 0px;
text-transform: uppercase;
} 


button {
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;}

.btn {
background-color: #FF008B;
color: #161616;
padding: 17px 40px;
margin-top: 20px;
transition-duration: 0.4s;
border-radius: 32px;
font-size: 16px;
font-weight: bold;
}

.btn:hover {
background-color: #000;
color: #fff;
padding: 17px 40px;
margin-top: 20px;
transition-duration: 0.4s;
border-radius: 32px;
}

.hero {
margin-top: 94px;
display: flex;
justify-content: space-between;
}

.hero-text {
max-width: 525px;
}

.container .hero .hero-text p {
margin-bottom: 42px;
margin-top: 24px;
opacity: 0.7;
}

.hero-imags {
max-width: 515px;
position: relative;
}

.profile01 {
position: absolute;
z-index: 5;
}

.profile02 {
position: absolute;
right: 0px;
z-index: 5;
}

.profile03 {
position: absolute;
right: 180px;
top:240px;
z-index: 5;
}


.chamaleon {
position: relative;
}


#camaleao:hover {
filter: saturate(0);
transition-duration: 0.4s;
cursor: pointer; 
}


.logo-cliente {
margin-top: 38px;
display: flex;
justify-content: space-between;
align-items: center;
opacity: 0.7;
}

.clientes {
margin-top: 80px;
opacity: 0.7;
}


.clientes p {
opacity: 0.7;
}


.card-text {
margin-top:100px;
}

.cards {
margin-top:42px;
display: flex;
justify-content: space-between;
gap: 32px;
}

.card {
max-width: 360px;
}

.card h3 {
margin-top: 22px;
margin-bottom:16px;
}

.card p {
margin-bottom:22px;
font-size: 14px;
line-height: 20px;
opacity: 0.7;
}

.card a {
padding: 8px 0px;
}

.card img {
border-radius: 12px;
}

.works {
margin-top:120px;
margin-bottom:120px;
}

.works img {
border-radius: 12px;
}

.sobre {
margin-top:120px;
display: flex;
align-items: center;
justify-content:space-between;
/*background-color:#f5f5f5;*/
margin-bottom:42px;
padding:70px 70px;
border-radius: 12px;
}

.sobre-text {
max-width: 400px;
}

.sobre-text h2 {
margin-bottom:18px;
color: #fff;
}

.sobre-text p {
color: #fff;
opacity: 0.7;
}

.logo-footer {
display: flex;
align-items: center;
justify-content: space-between;
}

.footer-text {
display: flex;
align-items: center;
justify-content: space-between;
margin-top:32px;
}

.footer-text h3 {
margin-bottom: 16px;
}

.footer-text p {
margin-bottom: 8px;
}

.container-footer {
background-color: #161616;
padding:70px 70px;
border-radius: 12px;
margin-bottom: 32px;
margin-top: 100px;
}

.redes {
display: flex;
align-items: center;
gap:20px;
margin-top: 32px;
}


iframe {
border-radius: 6px;
}

.assinatura img {
margin-top: 32px; 
margin-bottom: 32px;
}



@media screen and (max-width: 430px) {

h1 {
font-size: 40px;
line-height: 44px;
margin-bottom: 10px;
}

.btn {
width: 100%;
}

.menu {
margin-top: 20px;
display: flex;
justify-content: space-between;
flex-direction: column;
gap: 24px;
align-items: cemter;
align-content: center;
}

.nav-link {
display: flex;
align-items: center;
gap: 58px;
justify-content: center;
}

.hero {
margin-top:44px;
display: flex;
justify-content: space-between;
flex-direction: column;
gap:52px;
text-align: center;
}

.profile01 {
display:none;
}

.profile02 {
display:none;
}

.profile03 {
display:none;
}

.container .hero .hero-text p {
margin-bottom: 35px;
margin-top: 32px;
opacity: 0.7;
}

.logo-cliente {
margin-top: 23px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
flex-direction: row;
gap: 18px;
}

.clientes {
margin-top: 62px;
}


.clientes p {
opacity: 0.7;
}

.card-text {
margin-top: 41px;
}

.cards {
margin-top: 33px;
display: flex;
justify-content: space-between;
gap: 32px;
flex-direction: column;
}

.works {
margin-top:60px;
}

.sobre {
margin-top: 50px;
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 42px;
padding: 40px 40px;
border-radius: 12px;
flex-direction: column;
gap: 32px;
text-align: center;
}

.container-footer {
background-color: #000;
padding: 34px 48px;
border-radius: 12px;
margin-bottom: 32px;
margin-top: 62px;
}

.footer-text {
 display: flex;
 align-items: center;
 justify-content: space-between;
 margin-top: 32px;
 flex-direction: column;
 gap: 40px;
}

iframe {
border-radius: 6px;
width: 120%;
}

}