/* HERO */

.hero{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:5rem;
    padding:8rem 10%;
    overflow:hidden;
}

.hero-content{
    flex:1;
    max-width:600px;
}

.hero-content h5{
    font-size:1rem;
    font-weight:500;
    color:#777;
    margin-bottom:1rem;
    letter-spacing:1px;
}

.hero-content h1{
    font-size:clamp(2rem, 9vw, 4.5rem);
    line-height:1.1;
    margin-bottom:1rem;
}

.surname{
    color:#222;
    display:inline-block;
}

.firstname{
    color:#efb5c8;
    display:inline-block;
    margin-left:10px;
}
.hero-content h2{
    font-size:1.8rem;
    font-weight:600;
    color:#444;
    margin-bottom:1.5rem;
}

.hero-content p{
    font-size:1.1rem;
    line-height:1.9;
    color:#666;
    margin-bottom:2.5rem;
}

.hero-buttons{
    display:flex;
    gap:1rem;
    margin-bottom:2.5rem;
}

.btn-primary,
.btn-secondary{
    text-decoration:none;
    padding:15px 35px;
    border-radius:50px;
    font-weight:600;
    transition:.4s;
}

.btn-primary{
    background:#efb5c8;
    color:#fff;
}

.btn-primary:hover{
    background:#e79ab5;
    transform:translateY(-4px);
}

.btn-secondary{
    border:2px solid #efb5c8;
    color:#efb5c8;
}

.btn-secondary:hover{
    background:#efb5c8;
    color:#fff;
}

.socials{
    display:flex;
    gap:2rem;
}

.socials a{
    display:flex;
    justify-content:center;
    align-items:center;

    text-decoration:none;
    color:#666;

    font-size:2rem;

    transition:.3s;
}

.socials a:hover{
    color:#efb5c8;
    transform:translateY(-4px);
}




/* HERO IMAGE */

.hero-image{
    flex:1;
    display:flex;
    justify-content:center;
    align-items:center;
    position:relative;
}

.hero-image img{
    width:470px;
    max-width:100%;
    position:relative;
    z-index:5;
}

/* PINK CLOUD */

.cloud{
    position:absolute;
    width:500px;
    height:500px;
    background:linear-gradient(
        135deg,
        #f8d8e4,
        #efb5c8,
        #ffdbe8
    );

    border-radius:48% 52% 63% 37% /
                  42% 39% 61% 58%;

    filter:blur(2px);

    animation:floatCloud 8s ease-in-out infinite;

    z-index:1;
}

.cloud::before{
    content:"";

    position:absolute;

    width:220px;
    height:220px;

    top:-40px;
    left:-50px;

    border-radius:50%;

    background:#ffdfe9;

    opacity:.8;

    filter:blur(10px);
}

.cloud::after{
    content:"";

    position:absolute;

    width:180px;
    height:180px;

    right:-30px;
    bottom:-20px;

    border-radius:50%;

    background:#f5c6d7;

    opacity:.8;

    filter:blur(10px);
}

@keyframes floatCloud{

    0%{

        transform:
        translateY(0)
        rotate(0deg);

    }

    50%{

        transform:
        translateY(-18px)
        rotate(3deg);

    }

    100%{

        transform:
        translateY(0)
        rotate(0deg);

    }

}

.hero-image:hover .cloud{

    transform:scale(1.08);

    transition:.6s;

    border-radius:
    60% 40% 50% 50% /
    40% 60% 45% 55%;

}

.hero-image img{

    width:470px;

    position:relative;

    z-index:5;

    animation:photoFloat 8s ease-in-out infinite;

}

@keyframes photoFloat{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-12px);

    }

    100%{

        transform:translateY(0);

    }

}

.mobile-socials{
    display:none;
}

/*responsive*/

@media (max-width:1220px){

    .hero{
        flex-direction:column-reverse;
        text-align:center;
        gap:4rem;
        padding:8rem 8% 4rem;
    }

    .hero-content{
        max-width:700px;
    }

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

    .socials{
        justify-content:center;
    }

    .hero-image img{
        width:400px;
    }

    .cloud{
        width:420px;
        height:420px;
    }

}

@media (max-width:900px){

    .menu-btn{
        display:flex;
        z-index:1001;
    }

   .nav-links{
    position:fixed;
    top:85px;
    right:-100%;

    width:min(300px, 80%);
    height:calc(100vh - 85px);

    background:rgba(255,255,255,.95);
    backdrop-filter:blur(20px);

     padding:3rem 2rem;
    align-items:center;

    display:flex;
    flex-direction:column;
    gap:1.2rem;

    transition:.45s ease;
    box-shadow:-15px 0 40px rgba(0,0,0,.08);
    opacity:0;
    visibility:hidden;
}

.nav-links.active{
    right:0;
    opacity:1;
    visibility:visible;
    
}

.nav-links li{
    width:100%;
}

.nav-links a{

    display:flex;
    align-items:center;
    justify-content:center;

    width:100%;

    padding:18px;

    border-radius:16px;

    font-size:1.05rem;
    font-weight:700;

    transition:.3s;
   border:1px solid #f5dce5;
    color:#333;
}

.nav-links a:hover{

    background:#efb5c8;
    color:white;

    transform:translateX(8px);
    border-color:#efb5c8;
}

.mobile-socials{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:1rem;

    margin-top:auto;
    padding-top:2rem;
     border-top:1px solid #f2d8e2;
     
}

.mobile-socials a{
    width:48px;
    height:48px;
    font-size:1.2rem;
    display:flex;
    justify-content:center;
    align-items:center;

    border-radius:50%;

    background:#f9edf2;
    color:#efb5c8;

    transition:.3s;
}

.mobile-socials a:hover{
    background:#efb5c8;
    color:#fff;
}

    .hero{

    flex-direction:column-reverse;

    text-align:center;

    padding:8rem 8% 4rem;

    gap:3rem;

}

}

@media (max-width:600px){

    .hero-content h1{
        font-size:2.2rem;
    }

    .hero-content h2{
        font-size:1.3rem;
    }

    .hero-buttons{
        flex-direction:column;
        align-items:center;
    }

    .btn-primary,
    .btn-secondary{
        width:100%;
        max-width:260px;
    }

    .hero-image img{
        width:280px;
    }

    .cloud{
        width:300px;
        height:300px;
    }


}

/*  ABOUT */

.about{
    padding:3rem 10%;
    background:#fdf4f7;
}

.about-content{

    max-width:900px;

    margin:0 auto;

    background:#fff;

    border:1px solid #f5dce5;

    border-radius:24px;

    padding:3rem;

    box-shadow:0 15px 40px rgba(0,0,0,.05);

    position:relative;

}



.about-content p{
    font-size:1.08rem;
    line-height:2;
    color:#555;
    margin-bottom:1.8rem;
}

.about-content p:last-child{

    margin-bottom:0;

}

.about-content strong{
    color:#efb5c8;
    font-weight:700;
}

/*responsive*/

@media (max-width:900px){

    .about{

        padding:5rem 8%;

    }

    .about-content{

        padding:2rem;

    }

    .about-content p{

        text-align:left;

        font-size:1rem;

        line-height:1.8;

    }

}

/* SKILLS */

.skills{

     padding:3rem 10%;
     background:#fdf4f7;

}



.skills-grid{

    display:grid;

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

    gap:30px;

}

.skill-card{

    background:#fcfafb;

    border-radius:24px;

    padding:40px 25px;

    text-align:center;

    border:1px solid transparent;

    box-shadow:0 15px 40px rgba(0,0,0,.05);

    transition:.35s;

}


.skill-card:hover{

    transform:translateY(-10px) scale(1.03);

    border-color:#efb5c8;

    box-shadow:0 20px 50px rgba(239,181,200,.25);

}

.skill-card i{

    font-size:3rem;

    color:#efb5c8;

    margin-bottom:22px;

}

.skill-card h3{

    color:#222;

    font-size:1.25rem;

    margin-bottom:10px;

}

.skill-card p{

     color:#efb5c8;

    line-height:1.6;

    font-size:.95rem;

}

/*responsive */

@media (max-width:1000px){

    .skills-grid{

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

    }

}

@media (max-width:600px){

    .skills{

        padding:90px 8%;

    }

    .skills-grid{

        grid-template-columns:1fr;

    }

}

/*  PROJECTS */

.projects{

    padding:3rem 10%;
    background:#fdf4f7;

}

.projects-grid{

    display:grid;
    gap:40px;

}

.project-card{

    background:#fff;

    border:1px solid #f5dce5;

    border-radius:28px;

    overflow:hidden;

    box-shadow:0 18px 45px rgba(0,0,0,.06);

    transition:.35s;

}

.project-card:hover{

    transform:translateY(-8px);

    box-shadow:0 25px 55px rgba(239,181,200,.25);

}


/*==========================
      PROJECT IMAGE
==========================*/

.project-image{

    position:relative;

    display:block;

    overflow:hidden;

}

.project-image img{

    width:100%;

    height:auto;

    display:block;

    transition:.6s ease;

}

.project-overlay{

    position:absolute;

    inset:0;

    background:rgba(17,17,17,.45);

    display:flex;

    justify-content:center;

    align-items:center;

    opacity:0;

    transition:.4s;

}

.project-overlay span{

    display:flex;

    align-items:center;

    gap:.8rem;

    padding:16px 30px;

    border-radius:50px;

    background:rgba(255,255,255,.95);

    color:#efb5c8;

    font-weight:700;

    transform:translateY(20px);

    transition:.4s;

}

.project-image:hover img{

    transform:scale(1.03);

}

.project-image:hover .project-overlay{

    opacity:1;

}

.project-image:hover .project-overlay span{

    transform:translateY(0);

}


/* CONTENT */

.project-content{

    padding:2.5rem;

}

.project-content h3{

    font-size:2rem;

    color:#222;

    margin-bottom:1rem;

}

.project-content p{

    color:#666;

    line-height:1.8;

    margin-bottom:2rem;

}


/* TECH STACK */

.tech-stack{

    display:flex;

    gap:12px;

    flex-wrap:wrap;

}

.tech-stack span{

    padding:10px 20px;

    border-radius:50px;

    border:1px solid #efb5c8;

    color:#efb5c8;

    font-weight:700;

    font-size:.9rem;

    transition:.3s;

}

.tech-stack span:hover{

    background:#efb5c8;

    color:#fff;

}


/* RESPONSIVE */

@media (max-width:900px){

    .projects{

        padding:5rem 8%;

    }

    .project-content{

        padding:2rem;

    }

    .project-content h3{

        font-size:1.7rem;

    }

}

@media (max-width:600px){

    .projects{

        padding:5rem 6%;

    }

    .project-content{

        padding:1.6rem;

    }

    .project-content h3{

        font-size:1.5rem;

    }

    .project-overlay span{

        padding:14px 22px;

        font-size:.9rem;

    }

    .tech-stack{

        gap:10px;

    }

    .tech-stack span{

        padding:8px 16px;

        font-size:.8rem;

    }

}

@media (max-width:350px){

    .projects .section-title h2::after{

        width:65%;

        left:50%;
        transform:translateX(-50%);

    }

}

/* CONTACT */

.contact{

    padding:4.5rem 10%;

    background:#fdf4f7;

}

.contact-container{

    max-width:800px;

    margin:0 auto;

}

.contact-form{

    display:flex;

    flex-direction:column;

    gap:1.6rem;

}

.form-group{

    display:flex;

    flex-direction:column;

}

.form-group label{

    margin-bottom:.7rem;

    font-weight:600;

    color:#222;

}

.form-group input,
.form-group textarea{

    width:100%;

    padding:16px 20px;

    border:1px solid #f5dce5;

    border-radius:18px;

    background:#fff;

    font-size:1rem;

    font-family:inherit;

    transition:.3s;

    resize:none;

}

.form-group input:focus,
.form-group textarea:focus{

    outline:none;

    border-color:#efb5c8;

    box-shadow:0 0 0 4px rgba(239,181,200,.15);

}

.contact-form .btn-primary{

    margin:1rem auto 0;

    min-width:220px;

}

@media (max-width:600px){

    .contact{

        padding:4.5rem 6%;

    }

    .contact-form .btn-primary{

        width:100%;

    }

}

/* FOOTER */

.footer{

    padding:3rem 10%;

   background:#fdf4f7;

    border-top:1px solid #f5dce5;

    text-align:center;

}

.footer-logo{

    display:inline-block;

    font-size:1.7rem;

    font-weight:800;

    margin-bottom:1rem;

}

.footer-text{

    max-width:520px;

    margin:0 auto 2rem;

    color:#666;

    line-height:1.8;

}

.footer-socials{

    display:flex;

    justify-content:center;

    gap:1rem;

    margin-bottom:2rem;

}

.footer-socials a{

    width:52px;

    height:52px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    background:#fcfafb;

    border:1px solid #f5dce5;

    color:#efb5c8;

    font-size:1.2rem;

    transition:.3s;

}

.footer-socials a:hover{

    background:#efb5c8;

    color:#fff;

    transform:translateY(-4px);

}

.copyright{

    color:#888;

    font-size:.9rem;

}

@media (max-width:600px){

    .footer{

        padding:3rem 6%;

    }

    .footer-logo{

        font-size:1.45rem;

    }

}