/* =========================
   Google Font
========================= */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

/* =========================
   Global Styles
========================= */
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
   /* scroll-padding-top:320px;*/
     scroll-behavior: smooth;
    scroll-padding-top: 70px;
}

body{
    font-family:'Poppins',sans-serif;
    background:#0f172a;
    color:#ffffff;
    overflow-x:hidden;
}

/* =========================
   Navbar
========================= */

.navbar{
    background:rgba(15,23,42,.9);
    backdrop-filter:blur(10px);
}

.navbar-brand{
    font-size:1.4rem;
    font-weight:700;
}

.nav-link{
    color:#fff!important;
    margin-left:20px;
    transition:.3s;
}

.nav-link:hover{
    color:#38bdf8!important;
}

/* =========================
Hero Section
========================= */

#hero{

    min-height:60vh;

    display:flex;

    align-items:center;

    padding:70px 0 8px;

    background:#111827;

}

.hero-greeting{
    color:#38bdf8;
    font-size:0.95rem;
    font-weight:700;
    letter-spacing:0.25em;
    text-transform:uppercase;
    margin-bottom:0.5rem;
}

.hero-role{
    color:#93c5fd;
    font-size:1.05rem;
    font-weight:600;
    margin-bottom:1rem;
}

.hero-actions{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    align-items:center;
}

.hero-actions .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:46px;
    padding:10px 18px;
    border-radius:999px;
}

#hero h1{

    font-size:4rem;

    font-weight:800;

}

#hero h2{

    color:#38bdf8;

    font-weight:600;

}

.lead{

    color:#cbd5e1;

    line-height:1.7;

    font-size:1rem;

    max-width:700px;

}

.profile-image{

    width:300px;

    height:300px;

    object-fit:cover;

    border:6px solid #38bdf8;

    transition:.5s;

}

.profile-image:hover{

    transform:scale(1.05);

}

/* Buttons */

.btn-primary{

    background:#38bdf8;

    border:none;

    color:#000;

    font-weight:600;

    padding:12px 24px;

    border-radius:999px;

    display:inline-flex;

    align-items:center;

    gap:8px;

    box-shadow:0 8px 20px rgba(56,189,248,.25);

}

.btn-primary:hover{

    background:#0ea5e9;

    transform:translateY(-2px);

    box-shadow:0 10px 24px rgba(56,189,248,.35);

}

/* Section */

section{

    padding:45px 0;

}

section[id] {
    scroll-margin-top: 70px;
}

/* Responsive */

@media(max-width:992px){

#hero{

text-align:center;

padding-top:100px;

padding-bottom:30px;

min-height:auto;

}

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

.profile-image{

margin-top:40px;

width:250px;

height:250px;

}

#hero h1{

font-size:3rem;

}

section{
    padding:70px 0;
}

}   

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

#about{

background:#111827;

}

#about p{

color:#d1d5db;

line-height:1.8;

}

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

#skills{

background:#0f172a;

}

.skill-card{

background:#1e293b;

color:white;

border:none;

transition:.3s;

height:150px;

display:flex;

justify-content:center;

align-items:center;

}

.skill-card:hover{

transform:translateY(-10px);

box-shadow:0 15px 30px rgba(56,189,248,.3);

}

.skill-icon{

font-size:50px;

color:#38bdf8;

margin-bottom:15px;

}

#skills ul{

list-style:none;

padding:0;

}

#skills li{

padding:8px 0;

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

color:#d1d5db;

}

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

#experience{
    background:#111827;
}

.experience-card{
    background:#1e293b;
    padding:24px;
    border-radius:15px;
    transition:.3s;
    border-left:5px solid #38bdf8;
}

.experience-card:hover{
    transform:translateY(-8px);
    box-shadow:0 15px 30px rgba(56,189,248,.25);
}

.experience-card ul{
    padding-left:20px;
}

.experience-card li{
    margin-bottom:12px;
    color:#d1d5db;
}

.experience-card h3{
    color:white;
}

.experience-card h5{
    color:#38bdf8;
}       

/* ==========================
PROJECTS
========================== */

#projects{
    background:#0f172a;
}

.project-card{

    background:#1e293b;

    border-radius:15px;

    padding:24px;

    transition:.3s;

    border-top:4px solid #38bdf8;

}

.project-card:hover{

    transform:translateY(-10px);

    box-shadow:0 15px 30px rgba(56,189,248,.25);

}

.project-inline-image{
    width:100px;
    height:100px;
    object-fit:cover;
    border-radius:50%;
    border:3px solid #38bdf8;
    flex-shrink:0;
}

.project-card h4{

    color:white;

    margin-bottom:20px;

}

.project-card p{

    color:#d1d5db;

    line-height:1.7;

}

/* ==========================
CERTIFICATIONS
========================== */

#certifications{

background:#111827;

}

.info-card{

background:#1e293b;

padding:24px;

border-radius:15px;

transition:.3s;

height:100%;

}

.info-card:hover{

transform:translateY(-10px);

box-shadow:0 15px 30px rgba(56,189,248,.25);

}

.info-icon{

font-size:55px;

color:#38bdf8;

margin-bottom:20px;

}

/* ==========================
CONTACT
========================== */

#contact{

background:#0f172a;

}

.contact-card{

background:#1e293b;

padding:30px;

border-radius:20px;

}

.contact-card a{

color:#38bdf8;

text-decoration:none;

}

.contact-card a:hover{

text-decoration:underline;

}

/* Contact Info Inline */
.contact-info-inline{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:30px;
}

.contact-info-item{
    text-align:center;
}

.contact-info-item h5{
    color:#38bdf8;
    font-weight:600;
    margin-bottom:6px;
    font-size:0.95rem;
}

.contact-info-item p{
    color:#cbd5e1;
    margin:0;
    font-size:0.9rem;
}

.contact-info-divider{
    width:1px;
    height:40px;
    background:rgba(56,189,248,.2);
}

/* ==========================
FOOTER
========================== */

footer{

background:#020617;

padding:25px;

text-align:center;

color:#94a3b8;

}

/* Scroll Button */

#scrollTopBtn{

position:fixed;

bottom:30px;

right:30px;

display:none;

width:50px;

height:50px;

border:none;

border-radius:50%;

background:#38bdf8;

color:#000;

font-size:22px;

cursor:pointer;

z-index:999;

transition:.3s;

}

#scrollTopBtn:hover{

transform:scale(1.1);

}

/* ==========================
STATS
========================== */

#stats{

background:#111827;

padding:4px 0 18px;

margin-top:15px;

}

.stats-card{

background:#1e293b;

padding:18px 14px;

border-radius:15px;

transition:.3s;

border:1px solid rgba(56,189,248,.12);

box-shadow:0 10px 25px rgba(2,6,23,.15);

min-height:110px;

}

.stats-card:hover{

transform:translateY(-10px);

box-shadow:0 10px 25px rgba(56,189,248,.3);

}

.stats-card h2{

color:#38bdf8;

font-size:40px;

font-weight:700;

}

.stats-card p{

margin:0;

color:#d1d5db;

}

/* Responsive Contact Info */
@media (max-width:992px) {
    #hero {
        padding-top:70px;
        padding-bottom:20px;
    }
}