/* =========================
ABOUT HEADER
========================= */

.about-header{
text-align:center;
padding:160px 20px 80px;
max-width:900px;
margin:auto;
}

.about-header h1{
font-size:52px;
font-weight:700;
margin-bottom:20px;
}

.about-header p{
font-size:18px;
color:#c9d6ff;
line-height:1.6;
}


/* =========================
ABOUT PROFILE
========================= */

.about-section{
padding:80px 20px;
}

.about-container{
    
    width:100%;
    max-width:1200px;

    margin:0 auto;

    display:flex;

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

    gap:60px;

    padding:40px 20px;

}


.about-text{

max-width:900px;

text-align:justify;

line-height:1.9;

font-size:17px;

}
.about-text{

max-width:650px;

text-align:justify;

line-height:1.8;

}

.about-container img{

width:240px;

border-radius:20px;

box-shadow:0 0 25px rgba(0,255,255,0.3);

}

.about-container img:hover{

transform:scale(1.05);

transition:0.3s;

}
.about-text h2{

margin-bottom:15px;

font-size:28px;

}

.about-image img{
width:260px;
border-radius:20px;
box-shadow:0 20px 40px rgba(0,0,0,0.35);
}
.about-photo{

width:240px;

border-radius:20px;

object-fit:cover;

}

.about-text{
max-width:520px;
line-height:1.8;
}

.about-text h2{
font-size:34px;
margin-bottom:15px;
}

.about-text p{
margin-bottom:15px;
color:#d9e3ff;
}


/* =========================
SECTION TITLE
========================= */

.section-title{
text-align:center;
font-size:40px;
font-weight:700;
margin-bottom:50px;
}


/* =========================
EXPERIENCE
========================= */

.experience{
padding:120px 20px;
}

.exp-grid{
max-width:1100px;
margin:auto;
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:30px;
}

.exp-card{

background:rgba(255,255,255,0.08);

padding:30px;

border-radius:18px;

backdrop-filter:blur(10px);

transition:0.3s;
}

.exp-card:hover{

transform:translateY(-8px);

background:rgba(255,255,255,0.15);

}

.exp-card h3{
margin-bottom:10px;
font-size:20px;
}

.exp-card p{
color:#d8e2ff;
line-height:1.6;
}


/* =========================
TECH SKILLS
========================= */

.tech-card:hover{

transform:translateY(-8px);

background:rgba(255,255,255,0.15);

}


/* =========================
RESPONSIVE
========================= */

@media(max-width:900px){

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

.about-image img{
width:220px;
}

.about-text{
max-width:600px;
}

}
.footer{

margin-top:100px;

padding:40px 20px;

text-align:center;

background:rgba(255,255,255,0.05);

backdrop-filter:blur(10px);

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

}


.footer h3{

margin-bottom:20px;

font-size:22px;

}


.social-links{

display:flex;

justify-content:center;

gap:25px;

margin-bottom:20px;

}


.social-links a{

font-size:26px;

color:white;

transition:0.3s;

}


.social-links a:hover{

color:#6bdcff;

transform:translateY(-5px);

}


.copyright{

font-size:14px;

opacity:0.7;

}
.about-hero{

text-align:center;

padding:100px 20px 40px;

max-width:900px;

margin:auto;

}

.about-hero h1{

font-size:52px;

margin-bottom:10px;

}

.typing-text{

font-size:24px;

color:#7ce2ff;

margin-bottom:20px;

font-weight:600;

}

.about-desc{

font-size:16px;

opacity:0.85;

line-height:1.6;

}

/* scroll indicator */

.scroll-indicator{

margin-top:40px;

display:flex;

justify-content:center;

}

.scroll-indicator span{

width:22px;

height:35px;

border:2px solid white;

border-radius:20px;

position:relative;

}

.scroll-indicator span::after{

content:"";

width:4px;

height:8px;

background:white;

position:absolute;

left:50%;

top:6px;

transform:translateX(-50%);

border-radius:2px;

animation:scrollMove 1.5s infinite;

}

@keyframes scrollMove{

0%{
opacity:0;
top:6px;
}

50%{
opacity:1;
}

100%{
opacity:0;
top:18px;
}

}