/* Google Font */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    scroll-behavior:smooth;
    font-family: 'Space Grotesk', sans-serif;
}

html,
body{
    margin:0;
    padding:0;
    overflow-x:hidden;
}

body{
    min-height:100vh;
}


body{
    background:linear-gradient(
        135deg,
        #F8F3ED 0%,
        #EFE6DD 35%,
        #EAD4D0 70%,
        #F6E7DF 100%
    );

    background-size:400% 400%;
    animation:gradient 15s ease infinite;

    color:#3E2C28;
    overflow-x:hidden;
}

.crt{

    position:relative;

    overflow:visible;

}

.crt::before{

content:"";

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

pointer-events:none;

opacity:.08;

z-index:999;

background-image:

radial-gradient(circle,#000 1px,transparent 1px);

background-size:4px 4px;

animation:noise .25s infinite;

}

@keyframes noise{

0%{

transform:translate(0,0);

}

20%{

transform:translate(-3%,2%);

}

40%{

transform:translate(3%,-2%);

}

60%{

transform:translate(-2%,3%);

}

80%{

transform:translate(2%,-3%);

}

100%{

transform:translate(0,0);

}

}

.crt::after{

content:"";

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

pointer-events:none;

z-index:998;

background:

repeating-linear-gradient(

0deg,

rgba(255,255,255,.02),

rgba(255,255,255,.02) 2px,

transparent 2px,

transparent 4px

);

mix-blend-mode:overlay;

}

.main{

position:relative;

border-radius:40px;

overflow:hidden;

}

.main::before{

content:"";

position:absolute;

inset:0;

border-radius:40px;

box-shadow:

inset 0 0 120px rgba(0,0,0,.35),

inset 0 0 250px rgba(0,0,0,.25);

pointer-events:none;

}

.main::after{

content:"";

position:absolute;

width:170%;

height:170%;

left:-35%;

top:-55%;

border-radius:50%;

border:2px solid rgba(255,255,255,.06);

transform:rotate(-12deg);

pointer-events:none;

}

body{

animation:flicker 6s infinite;

}

@keyframes flicker{

0%,100%{

opacity:1;

}

96%{

opacity:.98;

}

97%{

opacity:.94;

}

98%{

opacity:.99;

}

99%{

opacity:.96;

}

}

body{

box-shadow:

inset 0 0 120px rgba(255,255,255,.03),

inset 0 0 250px rgba(0,0,0,.35);

}

body::before{

content:"";

position:fixed;

inset:0;

pointer-events:none;

background:

radial-gradient(

circle,

transparent 55%,

rgba(0,0,0,.35)

);

z-index:997;

}

.hero{

text-shadow:

1px 0 rgba(255,0,0,.08),

-1px 0 rgba(0,255,255,.08);

}

/* filter removed from body — it was breaking position:fixed for
   descendant elements (like .crt::before and body::before), which
   caused the extra scroll space at the bottom of the page. */

/* Animated Background */

@keyframes gradient{

    0%{background-position:0% 50%;}
    50%{background-position:100% 100%;}
    100%{background-position:0% 50%;}

}

.bg1,.bg2{

    position:fixed;
    border-radius:50%;
    z-index:0;
    pointer-events: none;

}

.bg1{
    width:350px;
    height:350px;
    background:#e0c3c3;
    filter:blur(40px);
    top:-100px;
    left:-80px;
    animation:float 18s ease-in-out infinite;
}

.bg2{
    width:400px;
    height:400px;
    bottom:-100px;
    background:#cda4a4;
     filter:blur(80px);
    right:-80px;
    animation:float 25s ease-in-out infinite reverse;

}

/* Navigation */

nav{

    width:100%;
    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:20px 10%;

    position:fixed;

    top:0;

    backdrop-filter:blur(20px);

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

    border-bottom:1px solid rgba(140,94,88,.15);

    z-index:999;

}

.logo{

    font-size:28px;
    font-weight:700;
    color:#8C5E58;

}

nav ul{

    display:flex;
    list-style:none;
    gap:25px;

}

nav ul li a{

    color:#5B403B;
    text-decoration:none;
    transition:.3s;

}

nav ul li a:hover{

    color:#C97C8B;

}

/* Hero */

.hero{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:90px 10%;

    gap:50px;

}

.hero-text{

    flex:1;

}

.hero h3{

    font-size:28px;
    color:#C97C8B;

}

.hero h1{

    font-size:65px;
    margin:15px 0;

}

.hero h2{

    font-size:35px;
    color:#8C5E58;

}

.hero p{

    margin-top:20px;

    line-height:1.8;

    color:#5E4B47;

}

/* Buttons */

.buttons{

    margin-top:35px;

}

.btn{

    text-decoration:none;

    background:#d1a09a;

    color:rgb(168, 127, 127);

    padding:14px 30px;

    border-radius:50px;

    margin-right:15px;

    transition:.4s;

}

.btn:hover{

    background:#8d1931;

}

.btn-outline{

    text-decoration:none;

    border:2px solid #8C5E58;

    color:#8C5E58;

    padding:14px 30px;

    border-radius:50px;

    transition:.4s;

}

.btn-outline:hover{

    background:#b0536d;

}

/* Profile */

.hero-image{

    flex:1;

    display:flex;

    justify-content:center;

}

.hero-image::before{

content:"";

position:absolute;

width:420px;

height:420px;

background:linear-gradient(
135deg,
#D9A5A5,
#D6B38A);

border-radius:40% 60% 70% 30%;

filter:blur(px);

animation:blob 10s infinite;

z-index:-1;

}

@keyframes blob{

50%{

border-radius:70% 30% 40% 60%;

transform:rotate(180deg);

}

}

.hero-image img{

    width:370px;
    height:370px;
    border-radius:50%;
    object-fit:cover;

    opacity:.80;

    transition:.5s;

    border:5px solid rgba(201,124,139,.4);

    box-shadow:0 25px 60px rgba(140,94,88,.2);

}

.hero-image img:hover{

    opacity:1;

    transform:scale(1.08);

}


@keyframes float{

0%{

transform:translate(0,0);

}

25%{

transform:translate(25px,-20px);

}

50%{

transform:translate(0,-40px);

}

75%{

transform:translate(-30px,-15px);

}

100%{

transform:translate(0,0);

}

}

/* Sections */

section{

    padding:100px 10%;

}

.title{

    font-size:42px;

    text-align:center;

    margin-bottom:50px;

    color:#8C5E58;

}

/* Glass Card */

.card{

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

    backdrop-filter:blur(70px);

    border-radius:20px;

    padding:35px;

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

    box-shadow:0 8px 30px rgba(0,0,0,.3);

}

/* Grid */

.grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(200px,1fr));

    gap:25px;

}

/* Skills */

.skill{

    padding:20px;

    text-align:center;

    border-radius:15px;

    background:#d8b7a4;

    color:#3E2C28;

    transition:.4s;

    cursor:pointer;

}

.skill:hover{

    transform:translateY(-10px);

    background:#C97C8B;

}

/* Projects */

.projects{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));

    gap:30px;

}

.project-card{

    padding:30px;

    background:rgb(193, 138, 124);
    

    border-radius:20px;

    transition:.4s;

    border:1px ;color:#8C5E58;

}

.project-card:hover{

    transform:translateY(-12px);

    box-shadow:0 15px 35px rgba(140,94,88,.25);

}

.project-card h3{

    margin-bottom:15px;

    color:#6B4E4A;

}

.project-card p{

    color:#361720;

}

/* Achievement */

.achievement,.certificate{

    padding:25px;

    background:rgba(162, 112, 112, 0.516);

    border-radius:15px;

    text-align:center;

    transition:.4s;

}

.achievement:hover,
.certificate:hover{

    transform:scale(1.05);

    background:#b9798d;
    color:#fff;

}

a{
    color:inherit;
    text-decoration:none;
}

#contact a,
.achievement a{
    color:#904c61;
    text-decoration:none;
    transition:.3s;
}

#contact a:hover,
.achievement a:hover{
    color:#df8694;
}

.achievement:hover a,
.certificate:hover a{
    color:#fff;
    text-decoration:underline;
}
/* Contact */

#contact p{

    margin:20px 0;

    font-size:18px;

}

#contact i{

    color:#ce5a7d;

    margin-right:10px;

}

/* Footer */

footer{

    text-align:center;

    padding:30px;

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

    color:#472933;

}

/* Responsive */

@media(max-width:900px){

.hero{

flex-direction:column-reverse;

text-align:center;

}

.hero h1{

font-size:45px;

}

.hero h2{

font-size:28px;

}

.hero-image img{

width:280px;
height:280px;

}

nav{

padding:15px;

}

nav ul{

display:none;

}
}

/* Scroll Animation */

.hidden{
    opacity:0;
    transform:translateY(60px);
    transition:1s;
}

.show{
    opacity:1;
    transform:translateY(0);
}

/* Active Navbar */

nav ul li a.active{
    color:#b6667d;
    font-weight:600;
}

footer{
    position:relative;
    z-index:1;
}

.buttons{
    display:flex;
    flex-wrap:wrap;
    gap:15px;
}

@media(max-width:900px){
    .buttons{
        justify-content:center;
    }
}

.btn:hover{
    background:#875a63;
    color:#fff;
}

.btn-outline:hover{
    background:#a4697a;
    color:#fff;
}

.certificate a{
    color:#8b4459;
    text-decoration:none;
    transition:.3s;
}

.cert-grid{
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
}