/* ================= GLOBAL STYLES ================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Roboto', sans-serif;
    line-height: 1.6;
    background: linear-gradient(135deg, #0f172a 0%, #1a1f3a 100%);
    color: #e5e7eb;
    min-height: 100vh;
    scroll-behavior: smooth;
}


/* ================= LINKS ================= */

a {
    color: #38bdf8;
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
}

a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: #38bdf8;
    transition: width 0.3s ease;
}

a:hover::after {
    width: 100%;
}

a:hover {
    color: #7dd3fc;
}

/* Phone Link */
a[href^="tel:"] {
    color: #10b981;
}

a[href^="tel:"]::after {
    background-color: #10b981;
}

/* Email Link */
a[href^="mailto:"] {
    color: #f59e0b;
}

a[href^="mailto:"]::after {
    background-color: #f59e0b;
}


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

header {
    background: linear-gradient(135deg,#020617 0%,#0f172a 50%,#1a1f3a 100%);
    text-align: center;
    padding: 80px 20px 50px;
    border-bottom: 3px solid #38bdf8;
    box-shadow: 0 8px 32px rgba(56,189,248,0.15);
    position: relative;
    overflow: hidden;
}

/* Animated background effect */

header::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(56,189,248,0.05) 0%, transparent 70%);
    animation: float 20s ease-in-out infinite;
}

@keyframes float {

    0%,100% {
        transform: translate(0,0);
    }

    50% {
        transform: translate(30px,30px);
    }

}

/* Profile Image */

header img {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    object-fit: cover;
    border: 5px solid #38bdf8;
    margin-bottom: 25px;

    box-shadow:
        0 0 30px rgba(56,189,248,0.4),
        inset 0 0 30px rgba(56,189,248,0.1);

    transition: all 0.4s ease;
    position: relative;
    z-index: 1;
}

header img:hover {

    transform: scale(1.08) rotateZ(2deg);

    box-shadow:
        0 0 40px rgba(56,189,248,0.6),
        inset 0 0 30px rgba(56,189,248,0.2);
}


/* Header Title */

header h1 {

    background: linear-gradient(90deg,#38bdf8,#7dd3fc,#10b981);
    background-size: 300% 300%;

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    animation: gradientMove 5s ease infinite;

    margin-bottom: 12px;
    font-size: 3em;
    font-weight: 800;
    letter-spacing: 1px;

    text-shadow: 0 2px 10px rgba(56,189,248,0.3);

    position: relative;
    z-index: 1;
}

@keyframes gradientMove {

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

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

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

}

header p {
    color: #94a3b8;
    font-size: 1.3em;
    font-weight: 600;
    letter-spacing: 0.5px;
    position: relative;
    z-index: 1;
}


/* ================= MAIN ================= */

main {
    max-width: 950px;
    margin: 0 auto;
    padding: 50px 20px;
}


/* ================= SECTIONS ================= */

section {

    background: linear-gradient(135deg,#0f172a 0%,#1a1f3a 100%);
    margin: 30px 0;
    padding: 35px;

    border-radius: 15px;
    border-left: 5px solid #38bdf8;
    border-top: 1px solid rgba(56,189,248,0.2);

    box-shadow: 0 8px 32px rgba(56,189,248,0.1);

    transition: all 0.4s ease;

    position: relative;
    overflow: hidden;

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

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


/* ================= PROJECT CARDS ================= */

.project-card {

    margin-bottom: 25px;
    padding: 20px;

    background: #1a1f3a;

    border-radius: 12px;
    border-left: 4px solid #38bdf8;

    transition: all 0.3s ease-in-out;
    cursor: pointer;
}

.project-card:hover {

    border-left-color: #7dd3fc;

    transform: translateY(-5px) scale(1.02);

    box-shadow: 0 15px 35px rgba(56,189,248,0.25);
}

.project-card h3 {
    color: #7dd3fc;
    margin-bottom: 8px;
}

.project-card p {
    margin-bottom: 10px;
}

.project-card a {
    font-size: 0.95em;
    display: inline-block;
    margin-top: 5px;
}


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

.skills-list {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(120px,1fr));

    gap: 15px;
}

.skills-list li {

    list-style: none;

    background: #0f172a;

    padding: 8px 14px;

    border-radius: 8px;

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

    color: #38bdf8;

    font-weight: 600;
    font-size: 0.95em;

    text-align: center;

    transition: all 0.3s ease;

    cursor: default;
}

.skills-list li:hover {

    transform: scale(1.1);

    border-color: #7dd3fc;

    color: #7dd3fc;
}


/* ================= CERTIFICATES ================= */

.certificate-item {

    margin-bottom: 20px;

    padding: 15px 20px;

    background: #1a1f3a;

    border-left: 4px solid #38bdf8;

    border-radius: 10px;

    transition: all 0.3s ease;

    cursor: pointer;
}

.certificate-item:hover {
    border-left-color: #7dd3fc;
}

.certificate-item p {
    display: none;
}

.certificate-item.active p {
    display: block;
}


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

footer {

    text-align: center;

    margin-top: 80px;

    padding: 40px 20px;

    background: linear-gradient(135deg,#020617 0%,#0f172a 100%);

    color: #94a3b8;

    font-size: 1em;

    border-top: 3px solid #38bdf8;

    box-shadow: 0 -8px 32px rgba(56,189,248,0.1);
}


/* ================= BACK TO TOP BUTTON ================= */

#backToTop {

    position: fixed;

    bottom: 30px;
    right: 30px;

    padding: 10px 15px;

    font-size: 18px;

    border: none;

    border-radius: 50%;

    background: #38bdf8;

    color: #0f172a;

    cursor: pointer;

    display: none;

    z-index: 1000;

    transition: all 0.3s ease;
}

#backToTop:hover {
    background: #7dd3fc;
}


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

@media (max-width:600px) {

    header h1 {
        font-size: 2em;
    }

    section {
        padding: 20px;
    }

    .skills-list {
        grid-template-columns: repeat(auto-fill, minmax(100px,1fr));
    }

}