*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Inter', Roboto, 'Open Sans', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
html{
    scroll-behavior:smooth;
}
ul, ol {
  margin: 10px 0;
  padding-left: 35px;           /* perfect spacing */
  list-style-position: outside; /* bullet stays outside box */
}
    
body{

   color: #333333;
   background-color: #ffffff; 
}
/* GLOBAL IMAGE CONTROL */
img{
max-width:100%;
height:auto;
display:block;
}
section{
max-width:1100px;
margin:auto;
padding:28px 20px;
scroll-margin-top:80px;
}
#home .container{
    background-color:#333;
    padding:35px 30px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:30px;
    flex-wrap:wrap;
    max-width:1100px;
    margin:auto;
}


.description h1{
    font-size:60px;
    font-weight:600;
    letter-spacing:1px;
    color:white;
    margin-bottom:5px;
}

.description h2{
    font-size:30px;
    color:#e0e0e0;
    margin-bottom:5px;
}

.description p{
    font-size:20px;
    max-width: 550px;
    line-height:1.6;
    margin-top:10px;
    color:#d0d0d0;
}

.hero-content{
    display:flex;
    flex-direction:column;
    gap:20px;
    flex:1;
    max-width:600px;
}
.tech-stack{
    margin-top:8px;
    color:#bbbbbb;
    font-size:18px;
    letter-spacing:1px;
    margin-bottom:5px;
}

.hero-buttons{
    display:flex;
    gap:20px;
    flex-wrap: wrap;
}
.btn{
    background:white;
    color:#333;
    padding:12px 24px;
    border-radius:30px;
    font-weight:500;
    text-decoration:none;
    transition:0.3s;
}

.btn:hover{
    transform:translateY(-2px);
}

.btn-outline{
    border:2px solid white;
    color:white;
    padding:12px 24px;
    border-radius:30px;
    text-decoration:none;
    transition:0.3s;
}

.btn-outline:hover{
    background:white;
    color:#333;
}

.profile{
    flex:0 0 220px;
}
.profile img{
    border:6px solid white;
    border-radius:50%;
    width:220px;
    height:220px;
    object-fit:cover;
    box-shadow:0 10px 25px rgba(0,0,0,0.3);
    transition:transform 0.4s;
}

.profile img:hover{
    transform:scale(1.07);
}


.contact table{
   border-collapse: separate;
   border-spacing: 10px;
}
.contact img{
    width:40px;
    height:40px;
    border-radius: 5px;
    transition:transform 0.3s;
}

.contact img:hover{
    transform:scale(1.2);
}

/* 2. NAV */
nav{
    background-color: #333333db;
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 1px solid rgba(255,255,255,0.25);
}

.nav-container{
    max-width:1100px;
    margin:auto;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:15px 20px;
}
header{
padding:12px 30px;
display:flex;
justify-content:space-between;
align-items:center;
}
.logo{
    font-size:22px;
    font-weight:600;
    color:white;
    text-decoration:none;
}

.nav-links{
    display:flex;
    gap:25px;
}

.nav-links a.active{
color:#0077ff;
font-weight:600;
border-bottom:2px solid #0077ff;
}
.nav-links a{
    color:#f0f0f0;
    text-decoration:none;
    font-size:16px;
    transition:0.3s;
    cursor:pointer;
    position: relative;
}

.nav-links a:hover{
    color:white;
    border-bottom:2px solid white;
}
.nav-links a::after{
    content:"";
    position:absolute;
    width:0%;
    height:2px;
    left:0;
    bottom:-4px;
    background:white;
    transition:width 0.3s ease;
}

.nav-links a:hover::after{
    width:100%;
}

.nav-links a.active::after{
width: 100%;
}
/* Hamburger menu lines */
.hamburger {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 30px;
  height: 22px;
  cursor: pointer;
}

.hamburger span {
  display: block;
  height: 3px;
  background-color: white;
  border-radius: 2px;
  transition: all 0.3s ease;
}

/* Hide nav links initially on mobile */
.nav-links {
  display: none;
  flex-direction: column;
  gap: 15px;
  background-color: #333;
  position: absolute;
  top: 60px; /* below navbar */
  right: 20px;
  padding: 20px;
  border-radius: 8px;
}

/* Show nav-links when active */
.nav-links.active {
  display: flex;
}
.hamburger.toggle span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.hamburger.toggle span:nth-child(2) {
  opacity: 0;
}

.hamburger.toggle span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

/*  MAIN  */
main{
    padding:20px 40px;
}

main h2{
    font-size:32px;
    font-weight:600;
    letter-spacing:1px;
    color:#1a1a1a;
    margin:40px 0 20px;
    padding-bottom:6px;
    border-bottom:2px solid #333;
}

#about p{
    line-height:1.5;
    color:#444;
    letter-spacing:0.5px;
    text-align:justify;
    margin:15px 0 15px 20px;
}

.about-highlights{
    margin-top:5px;
    margin-left:20px;   /* match paragraph indent */
    padding-left:15px;  /* small space for bullets */
}

.about-highlights li{
    margin-bottom:6px;
    font-size:16px;
}

/* SKILLS SECTION */

/* SKILLS SECTION */

#skills{
background:#fafafa;
padding:35px 0;        /* same vertical spacing as other sections */
}

/* Title */

.section-title{
text-align:left;
font-size:32px;
margin-bottom:40px;
}

/* Category spacing */

.skill-category{
background:#fff;
padding:20px;
border-radius:10px;
box-shadow:0 3px 8px rgba(0,0,0,0.05);
transition:transform 0.3s ease;
}
.skill-category:hover{
transform:translateY(-4px);
}
/* Category heading */

.skill-category h3{
margin-bottom:15px;
font-size:20px;
color:#333;
}

/* Grid layout */

.skills-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
gap:25px;
}

/* Card */

.skill-card{
background:white;
border:1px solid #ddd;
border-radius:12px;
padding:20px;
text-align:center;
transition:all 0.3s ease;

opacity:0;
transform:translateY(25px);
}

/* Animation */

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

/* Hover */

.skill-card:hover{
transform:translateY(-6px);
box-shadow:0 8px 20px rgba(0,0,0,0.1);
}

/* Icon */

.skill-card img{
width:60px;
height:60px;
object-fit:contain;
}

/* Skill name */

.skill-card figcaption{
margin-top:10px;
font-size:15px;
font-weight:500;
}

/* EDUCATION */

.education-timeline{
max-width:850px;
margin:auto;
position:relative;
}

.education-timeline::before{
content:"";
position:absolute;
left:20px;
top:0;
height:100%;
width:3px;
background:#ddd;
}

.edu-card{
display:flex;
gap:20px;
margin-bottom:40px;
position:relative;
opacity: 0;
transform:translateY(25px);
transition:0.5s;
}

.edu-icon{
width:40px;
height:40px;
background:white;
border:3px solid #333;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
z-index:2;
}

.edu-icon img{
width:20px;
height:20px;
}

.edu-content{
background:white;
padding:18px 22px;
border-radius:10px;
box-shadow:0 8px 20px rgba(0,0,0,0.08);
flex:1;
}

.edu-content h3{
margin-bottom:5px;
font-size:18px;
}

.edu-content span{
font-size:14px;
color:#777;
display:block;
margin-bottom:6px;
}

.edu-content p{
font-size:14px;
color:#555;
}

/*experience */
/* Professional Experience */
#professional-exp{
padding:60px 0;
background:#fafafa;
}

.section-title{
font-size:32px;
margin-bottom:40px;
}

.exp-container{
display:flex;
flex-direction:column;
gap:18px;
}

/* Experience Card */

.exp-item{
display:flex;
gap:20px;
background:white;
padding:25px;
border-radius:12px;
border:1px solid #eee;
transition:0.3s;
}

.exp-item:hover{
transform:translateY(-5px);
box-shadow:0 8px 20px rgba(0,0,0,0.1);
}

/* Icon */

.exp-icon img{
width:50px;
}

/* Content */

.exp-content h3{
font-size:20px;
margin-bottom:5px;
}

.exp-content span{
font-size:14px;
color:#777;
}

.exp-content ul{
margin-top:10px;
padding-left:18px;
}

.exp-content li{
font-size:15px;
color:#555;
margin-bottom:5px;
line-height:1.5;
}

#learning{
padding:40px 0;
}

.learning-container{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:20px;
margin-top:20px;
}

.learning-card{
background:white;
padding:20px;
border-radius:10px;
border:1px solid #eee;
transition:0.3s;
}

.learning-card:hover{
transform:translateY(-4px);
box-shadow:0 6px 15px rgba(0,0,0,0.08);
}

.learning-card h3{
margin-bottom:8px;
font-size:18px;
}

.learning-card p{
font-size:14px;
color:#555;
}

/* Projects */
.projects-container{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
gap:18px;
margin-top:40px;
}

.project-card{
background:#fff;
border-radius:10px;
box-shadow:0 3px 10px rgba(0,0,0,0.08);
padding:20px;
display:flex;
flex-direction:column;
transition:transform 0.3s ease, box-shadow 0.3s ease;
}
.project-card:hover{
transform:translateY(-5px);
box-shadow:0 8px 18px rgba(0,0,0,0.12);
}

.project-card img{
width:100%;
border-radius:8px;
margin-bottom:15px;
transition:0.3s;
}

.project-card ul{
padding-left:18px;
margin-bottom:15px;
}

.project-card li{
margin-bottom:6px;
font-size:14px;
}

.project-links{
margin-top:auto;
display:flex;
gap:10px;
flex-wrap:wrap;
}

.project-links a{
text-decoration:none;
padding:8px 14px;
border-radius:6px;
font-size:14px;
font-weight:500;
background:#0077ff;
color:white;
transition:background 0.3s ease, transform 0.2s ease;
}

.project-links a:hover{
background:#005ed6;
transform:scale(1.05);
}

/* Tech Tags */

.tech-tags{
display:flex;
flex-wrap:wrap;
gap:8px;
margin-bottom:10px;
}

.tech-tags span{
background:#eef2ff;
padding:4px 10px;
border-radius:6px;
font-size:13px;
}

/* List */

.project-card ul{
padding-left:18px;
margin-bottom:15px;
}

.project-card li{
font-size:15px;
color:#555;
margin-bottom:5px;
line-height:1.5;
}

/* Buttons */

.project-links a{
display:inline-block;
padding:8px 16px;
border:1px solid #ddd;
border-radius:6px;
text-decoration:none;
margin-right:10px;
font-size:14px;
transition:0.3s;
font-weight: 500;
}

.project-links a:hover{
background:#333;
color:white;
}

/* Featured project */

.featured{
border:2px solid #333;
}

/* GITHUB SECTION */

#github{
padding:40px 0;
text-align:center;
}

.github-container{
display:flex;
justify-content:center;
flex-wrap:wrap;
gap:25px;
margin-top:20px;
}

.github-container img{
max-width:420px;
width:100%;
border-radius:10px;
box-shadow:0 6px 18px rgba(0,0,0,0.1);
}

/* CERTIFICATIONS */
#certifications{
padding:35px 5%;
background:#fafafa;
text-align:center;
}

.cert-text{
margin-bottom:35px;
color:#666;
font-size:15px;
}

.cert-container{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:25px;
}

.cert-card{
background:white;
border:1px solid #eee;
border-radius:12px;
padding:25px;
text-decoration:none;
color:#333;
transition:0.3s ease;
opacity:0;
transform:translateY(20px);
}

.cert-card:hover{
transform:translateY(-6px) scale(1.02);
box-shadow:0 10px 25px rgba(0,0,0,0.1);
}
.cert-card.show{
opacity:1;
transform:translateY(0);
}

.cert-card img{
width:50px;
height:50px;
object-fit:contain;
margin-bottom:12px;
transition:0.3s;
}

.cert-card:hover img{
transform:scale(1.1);
}

.cert-card h3{
font-size:18px;
margin-bottom:5px;
}

.cert-card span{
font-size:14px;
color:#777;
}


/* CONTACT */
#contact{
padding:35px 5%;
background:#fafafa;
}

.contact-container{
display:flex;
justify-content:center;
}

.contact img{
width:40px;
height:40px;
object-fit:contain;
border-radius:5px;
transition:transform 0.3s;
}

.contact-form{
background:white;
border:1px solid #eee;
border-radius:12px;
padding:30px;
width:100%;
max-width:500px;
box-shadow:0 8px 20px rgba(0,0,0,0.05);
}

/* form fields */

.form-group{
display:flex;
flex-direction:column;
margin-bottom:18px;
}

.form-group label{
font-size:14px;
margin-bottom:6px;
font-weight:500;
}

.form-group input,
.form-group textarea{
padding:10px 12px;
border:1px solid #ddd;
border-radius:6px;
font-size:14px;
outline:none;
transition:0.2s;
}

.form-group input:focus,
.form-group textarea:focus{
border-color:#0077ff;
}

/* buttons */

.form-buttons{
display:flex;
justify-content:space-between;
margin-top:20px;
}

.form-buttons button{
padding:10px 18px;
border:none;
border-radius:6px;
cursor:pointer;
font-size:14px;
transition:0.3s;
}

.form-buttons button[type="reset"]{
background:#ddd;
}

.form-buttons button[type="submit"]{
background:#333;
color:white;
}

.form-buttons button:hover{
opacity:0.9;
}

/* Contact Links */

.contact-links{
display:flex;
justify-content:center;
gap:15px;
margin-bottom:20px;
flex-wrap:wrap;
}

.contact-link{
display:flex;
align-items:center;
gap:10px;
text-decoration:none;
background:white;
padding:12px 18px;
border-radius:10px;
border:1px solid #eee;
transition:0.3s;
color:#333;
}

.contact-link:hover{
transform:translateY(-4px);
box-shadow:0 6px 18px rgba(0,0,0,0.1);
}

.contact-link img{
width:24px;
height:24px;
}

/* FOOTER */
/* COMPACT FOOTER */
#footer {
    background-color: #333;
    color: #f0f0f0;
    padding: 15px 10px;   /* reduced padding */
    font-size: 13px;      /* smaller text */
}

.footer-container {
    max-width: 1100px;
    margin: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;   /* smaller gap */
}

.footer-about p {
    margin: 3px 0;   /* tighter spacing */
    font-size: 13px;
}

.footer-social a {
    display: inline-block;
    margin-right: 8px;   /* smaller margin */
    transition: transform 0.2s;
}

.footer-social a img {
    width: 22px;   /* smaller icons */
    height: 22px;
}

.footer-social a:hover {
    transform: scale(1.15);  /* slight hover effect */
}

/* MOBILE FOOTER */
@media(max-width:768px) {
    .footer-container {
        flex-direction: column;
        text-align: center;
    }

    .footer-social {
        margin-top: 10px;
    }

    .footer-social a {
        margin: 0 8px;
    }
}

@media(max-width:768px){


header .container{
  
    padding: 20px 10px;
   
}

.profile img{
    border:4px solid white;
    border-radius: 50%;
    width: 100px;
    height: 100px;
    object-fit: cover;      /* crop the imagge */
    object-position: top;    /* which position need while crop */

}

header .container h1{
    font-size: 35px;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight :100;
    letter-spacing: 1px;
    color:#ffffff;
    
}

header .container p{
    font-size: 14px;
    font-weight: 200px; 
    color:#f0f0f0;
    line-height: 1.4;
    letter-spacing: 0.5;
}
    
    nav{
    display: flex;
    justify-content: space-around;
    gap: 5px;
    padding: 5px 2px;

}

    nav a{
        font-size:smaller;
        padding: 2px 5px;
    }

.contact img{
    max-width: 40px;
    height: 40px;
    border-radius: 5px;
}

 #skills h3 {
    font-size: 17px;
    width: 100%;
    padding: 7px;
    clip-path: polygon(
        0% 0%,
        75% 0%,
        100% 50%,
        75% 100%,
        0% 100%,
        0% 50%
    );

}

    #skills .container-fluid {
        margin:0 auto 20px auto;
        gap: 15px;
        margin: 2% 0 2% 7%;
    }

    #skills .container-fluid img {
        width: 90px;
        height: 90px;
    }



}

/* STATS SECTION */

.stats{
background:#f7f7f7;
padding:30px 0;
margin-top:20px;
}

.stats-container{
display:flex;
justify-content:center;
gap:40px;
flex-wrap:wrap;
text-align:center;
}

.stat{
background:white;
padding:20px 30px;
border-radius:10px;
box-shadow:0 6px 15px rgba(0,0,0,0.05);
transition:0.3s;
}

.stat:hover{
transform:translateY(-5px);
}

.stat h3{
font-size:28px;
color:#333;
}

.stat p{
font-size:14px;
color:#777;
}
section{
animation:fadeUp 0.7s ease;
}

@keyframes fadeUp{
from{
opacity:0;
transform:translateY(20px);
}
to{
opacity:1;
transform:translateY(0);
}
}