/*========================

RESET

=========================*/

.container{

width:min(1280px,90%);

margin:auto;

}

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

body{

font-family:'Poppins',sans-serif;
background:#0d0d0d;
color:white;
overflow-x:hidden;

}

a{

text-decoration:none;
color:white;

}

ul{

list-style:none;

}

img{

width:100%;
display:block;

}

section{

padding:110px 8%;

}

/*========================

NAVBAR

=========================*/

header{

position:fixed;
top:0;
left:0;
width:100%;
z-index:999;
backdrop-filter:blur(12px);
background:rgba(10,10,10,.75);
border-bottom:1px solid rgba(255,255,255,.05);

}

.navbar{

height:90px;

display:flex;

align-items:center;

justify-content:space-between;

}

.logo img{

width:78px;

transition:.35s;

filter:drop-shadow(0 0 20px rgba(255,45,45,.18));
justify-content: left;

}

.logo img:hover{

transform:scale(1.08);

}

.navbar ul{

display:flex;

gap:45px;
justify-content: right;

}

.navbar a{

font-size:15px;

font-weight:500;

transition:.3s;
justify-content: right;

}

.navbar a:hover{

color:#ff2d2d;

}

.theme{

width:45px;

height:45px;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

background:#171717;

cursor:pointer;

transition:.3s;

}

.theme:hover{

background:#ff2d2d;

}

/*========================

BOTONES

=========================*/

.btn{

display:inline-flex;

align-items:center;

gap:12px;

padding:18px 34px;

background:#ff2d2d;

border-radius:14px;

font-weight:600;

margin-top:40px;

transition:.35s;

color:white;

}

.btn:hover{

transform:translateY(-5px);

box-shadow:0 15px 40px rgba(255,45,45,.35);

}

.btn:hover{

background:#ff2d2d;

transform:translateY(-3px);

}

/*========================

HERO

=========================*/

.hero{

min-height:100vh;

display:grid;

grid-template-columns:1fr 1fr;

align-items:center;

gap:120px;

padding:180px 8% 100px;

position:relative;

}

.subtitle{

color:#ff2d2d;

font-size:15px;

letter-spacing:2px;

font-weight:600;

}

.hero h1{

font-size:82px;

line-height:1.05;

font-weight:800;

letter-spacing:-2px;

margin:25px 0;

max-width:650px;

}

.hero h1 span{

color:#ff2d2d;

}

.hero p{

font-size:18px;

color:#b8b8b8;

line-height:1.9;

max-width:500px;

margin-top:10px;

}

.hero-right{

display:flex;

justify-content:center;

align-items:center;

}

.hero-right img{

width:100%;

max-width:700px;

transition:.5s;

filter:drop-shadow(0 0 40px rgba(255,45,45,.20));

}

.hero-right img:hover{

transform:scale(1.03);

}

.social{

display:flex;

align-items:center;

gap:22px;

margin-top:45px;

color:#aaa;

}

.social i{

font-size:23px;

transition:.3s;

cursor:pointer;

}

.social i:hover{

color:#ff2d2d;

transform:translateY(-4px);

}

/*========================

SERVICIOS

=========================*/

.services{

border-top:1px solid rgba(255,255,255,.08);

}

.services h2{

font-size:42px;

margin-bottom:55px;

}

.cards{

display:grid;

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

gap:30px;

}

.card{

background:#121212;

padding:45px;

border-radius:22px;

border:1px solid rgba(255,255,255,.05);

transition:.35s;

cursor:pointer;

box-shadow:

0 10px 35px rgba(0,0,0,.35);

}

.card:hover{

transform:translateY(-15px);

border-color:#ff2d2d;

box-shadow:

0 20px 45px rgba(255,45,45,.18);

}

.card i{

font-size:42px;

color:#ff2d2d;

margin-bottom:25px;

}

.card h3{

margin-bottom:15px;

}

.card p{

line-height:1.8;

color:#bbbbbb;

}

/*========================

PROYECTOS

=========================*/

.projects{

border-top:1px solid rgba(255,255,255,.08);

}

.projects h2{

font-size:42px;

margin-bottom:50px;

}

.project-grid{

display:grid;

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

gap:28px;

}

.project{

background:#141414;

border-radius:22px;

overflow:hidden;

position:relative;

cursor:pointer;

transition:.35s;

box-shadow:

0 10px 30px rgba(0,0,0,.4);

}
.project img{

height:300px;

object-fit:cover;

transition:.5s;

}

.project:hover img{

transform:scale(1.08);

filter:brightness(.75);

}

/*========================

SOBRE MI

=========================*/

.about{

display:flex;

justify-content:space-between;

align-items:center;

border-top:1px solid rgba(255,255,255,.08);

gap:70px;

}

.about h2{

font-size:48px;

margin-bottom:18px;

}

.about p{

color:#bdbdbd;

max-width:550px;

line-height:1.8;

}

.numbers{

display:flex;

gap:60px;

}

.numbers h3{

font-size:45px;

color:#ff2d2d;

}

.numbers p{

text-align:center;

}

/*========================

FOOTER

=========================*/

footer{

padding:90px 8%;

display:flex;

justify-content:space-between;

align-items:center;

background:#090909;

border-top:1px solid rgba(255,255,255,.08);

}

footer h2{

font-size:42px;

margin-bottom:25px;

}

footer p{

color:#bdbdbd;

margin-bottom:10px;

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

BACKGROUND

=========================*/

body::before{

content:"";

position:fixed;

top:-250px;

right:-250px;

width:700px;

height:700px;

background:radial-gradient(circle,#8b0000 0%,transparent 70%);

opacity:.18;

filter:blur(90px);

pointer-events:none;

z-index:-1;

}

body::after{

content:"";

position:fixed;

bottom:-350px;

left:-350px;

width:700px;

height:700px;

background:radial-gradient(circle,#ff2d2d 0%,transparent 70%);

opacity:.08;

filter:blur(120px);

pointer-events:none;

z-index:-1;

}

/*========================

SCROLLBAR

=========================*/

::-webkit-scrollbar{

width:8px;

}

::-webkit-scrollbar-track{

background:#0d0d0d;

}

::-webkit-scrollbar-thumb{

background:#ff2d2d;

border-radius:50px;

}

/*========================

TITULOS

=========================*/

h2{

font-weight:700;

position:relative;

display:inline-block;

}

h2::after{

content:"";

position:absolute;

bottom:-12px;

left:0;

width:70px;

height:3px;

background:#ff2d2d;

border-radius:50px;

}
.card,
.project{

position:relative;

overflow:hidden;

}

.card::before,
.project::before{

content:"";

position:absolute;

top:0;

left:-120%;

width:80%;

height:100%;

background:linear-gradient(
90deg,
transparent,
rgba(255,255,255,.12),
transparent
);

transition:.8s;

}

.card:hover::before,
.project:hover::before{

left:130%;

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

ANIMACIONES

=========================*/

@keyframes fadeUp{

0%{

opacity:0;
transform:translateY(50px);

}

100%{

opacity:1;
transform:translateY(0);

}

}

.hero-left{

animation:fadeUp 1s ease forwards;

}

.hero-right{

animation:fadeUp 1.2s ease forwards;

}

.services{

animation:fadeUp 1s ease;

}

.projects{

animation:fadeUp 1s ease;

}

.about{

animation:fadeUp 1s ease;

}
.navbar a{

position:relative;

}

.navbar a::after{

content:"";

position:absolute;

left:0;

bottom:-10px;

width:0;

height:2px;

background:#ff2d2d;

transition:.35s;

}

.navbar a:hover::after{

width:100%;

}

@media (max-width: 992px) {

.hero{
    grid-template-columns: 1fr;
    text-align: center;
    gap: 60px;
}

.hero-left{
    order:1;
}

.hero-right{
    order:2;
}

.hero-right img{
    width:65%;
    max-width:450px;
}

.hero-buttons{
    justify-content:center;
}

.social{
    justify-content:center;
}

.services-grid{
    grid-template-columns:repeat(2,1fr);
    gap:25px;
}

.projects-grid{
    grid-template-columns:repeat(2,1fr);
}

.about{
    grid-template-columns:1fr;
    text-align:center;
}

.stats{
    justify-content:center;
}

.nav-links{
    gap:30px;
}

}

@media (max-width:576px){

.hero{
    padding-top:120px;
}

.hero-title{
    font-size:56px;
    line-height:1;
}

.hero-right img{
    width:85%;
}

.services-grid{
    grid-template-columns:1fr;
}

.projects-grid{
    grid-template-columns:1fr;
}

.stats{
    flex-direction:column;
    gap:25px;
}

.contact{
    flex-direction:column;
    text-align:center;
}

.footer{
    flex-direction:column;
    gap:20px;
}

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