@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:wght@500;600;700&display=swap');


*{

margin:0;

padding:0;

box-sizing:border-box;

}



body{

background:#050505;

color:#fff;

font-family:'Inter', Arial, sans-serif;

}





header{

width:88%;

height:70px;

margin:25px auto;

border:1px solid #282033;

border-radius:40px;

display:flex;

align-items:center;

justify-content:space-between;

padding:0 35px;

}





.logo{

font-family:'Playfair Display',serif;

font-size:24px;

font-weight:700;

letter-spacing:5px;

}



.logo span{

color:#a84cff;

}





nav{

display:flex;

gap:35px;

}



nav a{

color:#aaa;

text-decoration:none;

font-size:13px;

letter-spacing:1px;

transition:.3s;

}



nav a:hover{

color:#a84cff;

}





.contact-top{

border:1px solid #a84cff;

padding:11px 25px;

border-radius:30px;

color:white;

text-decoration:none;

font-size:13px;

transition:.3s;

}



.contact-top:hover{

background:#a84cff;

}








/* HERO */



.hero{

width:75%;

margin:60px auto 100px;

display:flex;

align-items:center;

justify-content:space-between;

}



.hero-text{

width:48%;

}



.subtitle{

color:#a84cff;

letter-spacing:5px;

font-size:12px;

margin-bottom:30px;

}





.hero h1{

font-family:'Playfair Display',serif;

font-size:75px;

line-height:1;

margin-bottom:30px;

}



.hero h1 span{

color:#a84cff;

}



.hero h2{

font-size:30px;

line-height:1.3;

margin-bottom:25px;

}



.hero p{

color:#aaa;

font-size:16px;

line-height:1.8;

margin-bottom:35px;

}







.buttons{

display:flex;

gap:20px;

}



.buttons a{

padding:15px 35px;

border-radius:30px;

text-decoration:none;

font-size:14px;

transition:.3s;

}





.primary{

background:#a84cff;

color:white;

}



.primary:hover{

box-shadow:0 0 30px #a84cff70;

transform:translateY(-3px);

}





.secondary{

border:1px solid #a84cff;

color:white;

}



.secondary:hover{

background:#a84cff;

}







.socials{

display:flex;

gap:12px;

margin-top:35px;

}



.socials a{

background:#101010;

border:1px solid #292333;

padding:10px 18px;

border-radius:25px;

color:#aaa;

text-decoration:none;

font-size:13px;

transition:.3s;

}



.socials a:hover{

color:white;

border-color:#a84cff;

transform:translateY(-3px);

}







.hero-image{

width:45%;

}



.hero-image img{

width:100%;

height:450px;

object-fit:cover;

border-radius:25px;

box-shadow:0 0 60px #a84cff30;

transition:.5s;

}



.hero-image img:hover{

transform:scale(1.03);

}
/* ==========================
   SEÇÕES GERAIS
========================== */


.services,
.project,
.experience,
.process,
.bottom{

width:75%;

margin:0 auto 120px;

}




.section-title{

color:#a84cff;

font-size:12px;

letter-spacing:6px;

margin-bottom:20px;

text-transform:uppercase;

}




.services h2,
.project h2,
.experience h2,
.process h2{

font-family:'Playfair Display',serif;

font-size:46px;

font-weight:600;

line-height:1.15;

margin-bottom:50px;

}





/* ==========================
   SERVIÇOS
========================== */


.service-grid{

display:grid;

grid-template-columns:repeat(5,1fr);

gap:18px;

}





.service-card{

background:#080808;

border:1px solid #292333;

border-radius:22px;

padding:25px 20px;

min-height:250px;

transition:.3s;

}




.service-card:hover{

transform:translateY(-8px);

border-color:#a84cff;

box-shadow:0 0 35px #a84cff30;

}





.service-card h3{

font-family:'Playfair Display',serif;

font-size:18px;

margin-bottom:18px;

line-height:1.3;

}





.service-card p{

color:#aaa;

font-size:14px;

line-height:1.7;

}





.service-card a{

display:block;

margin-top:25px;

color:#a84cff;

font-size:13px;

letter-spacing:1px;

}





/* ==========================
   PROJETOS
========================== */


.project-box{

background:#060606;

border:1px solid #292333;

border-radius:30px;

padding:40px;

display:flex;

align-items:center;

gap:45px;

margin-bottom:40px;

transition:.4s;

}





.project-box:hover{

border-color:#a84cff;

box-shadow:0 0 40px #a84cff25;

}





.project-box img{

width:55%;

height:350px;

object-fit:cover;

border-radius:22px;

}





.project-box h3{

font-family:'Playfair Display',serif;

font-size:34px;

margin-bottom:25px;

}





.project-box p{

color:#aaa;

line-height:1.8;

font-size:15px;

}





.project-box ul{

margin-top:25px;

}



.project-box li{

margin-top:12px;

color:#ddd;

}





.second-project{

flex-direction:row-reverse;

}





/* BOTÃO SANTUÁRIO */


.project-button{

display:inline-block;

margin-top:30px;

padding:12px 28px;

border-radius:30px;

border:1px solid #a84cff;

color:white;

text-decoration:none;

font-size:14px;

letter-spacing:1px;

transition:.3s;

}



.project-button:hover{

background:#a84cff;

box-shadow:0 0 25px #a84cff60;

transform:translateY(-3px);

}/* ==========================
   EXPERIÊNCIA
========================== */


.experience{

margin-top:120px;

}



.experience .service-card{

min-height:280px;

}




.experience ul{

margin-top:20px;

}



.experience li{

list-style:none;

color:#ccc;

margin-top:10px;

font-size:14px;

}





/* ==========================
   PROCESSO
========================== */


.process{

margin-top:120px;

}





.process .service-card h3{

font-size:20px;

}




.process .service-card p{

font-size:15px;

}







/* ==========================
   SOBRE / TECNOLOGIAS / CONTATO
========================== */



.bottom{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:30px;

}





.bottom > div{

background:#080808;

border:1px solid #292333;

border-radius:25px;

padding:35px;

min-height:320px;

transition:.3s;

}





.bottom > div:hover{

border-color:#a84cff;

box-shadow:0 0 35px #a84cff20;

}





.bottom h2{

font-family:'Playfair Display',serif;

font-size:30px;

margin-bottom:25px;

}





.bottom p{

color:#aaa;

line-height:1.8;

font-size:15px;

}






/* TECNOLOGIAS */



.icons{

display:flex;

flex-direction:column;

gap:15px;

color:#ddd;

font-size:16px;

}





.icons span{

padding:8px 0;

}







/* CONTATO */


.contact-button{

display:inline-block;

margin-top:30px;

}







/* FOOTER */



footer{

border-top:1px solid #222;

padding:40px;

text-align:center;

color:#777;

line-height:2;

font-size:14px;

}






/* ANIMAÇÕES */


.hidden{

opacity:0;

transform:translateY(40px);

transition:1s ease;

}



.show{

opacity:1;

transform:translateY(0);

}/* ==========================
   RESPONSIVO
========================== */


@media(max-width:1200px){


.service-grid{

grid-template-columns:repeat(3,1fr);

}



.hero{

width:85%;

}



.services,
.project,
.experience,
.process,
.bottom{

width:85%;

}



}





@media(max-width:900px){



header{

width:95%;

padding:0 20px;

}




nav{

display:none;

}




.hero{

width:90%;

flex-direction:column;

gap:50px;

}



.hero-text,
.hero-image{

width:100%;

}




.hero h1{

font-size:55px;

}




.hero h2{

font-size:25px;

}





.socials{

flex-wrap:wrap;

}





.service-grid{

grid-template-columns:1fr;

}





.project-box,
.second-project{

flex-direction:column;

}





.project-box img{

width:100%;

height:300px;

}





.bottom{

grid-template-columns:1fr;

}




.services h2,
.project h2,
.experience h2,
.process h2{

font-size:36px;

}




}




@media(max-width:600px){



header{

height:auto;

padding:20px;

border-radius:25px;

}




.logo{

font-size:20px;

}




.contact-top{

padding:10px 15px;

font-size:11px;

}




.hero{

margin-top:40px;

}





.hero h1{

font-size:45px;

}




.hero h2{

font-size:22px;

}




.buttons{

flex-direction:column;

}



.buttons a{

text-align:center;

}





.socials a{

padding:9px 14px;

font-size:12px;

}





.hero-image img{

height:350px;

}





.service-card{

padding:22px;

}





.project-box{

padding:25px;

}





.project-box h3{

font-size:28px;

}





.bottom > div{

padding:25px;

}





footer{

padding:30px 20px;

}



}