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

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

html {
    scroll-behavior: smooth;
}

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


/* ================= NAVBAR ================= */

.navbar {
    background: rgba(11, 17, 32, 0.85);
    backdrop-filter: blur(10px);
    padding: 15px 0;
}

.navbar-brand {
    font-size: 1.8rem;
    letter-spacing: 2px;
}

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

.nav-link:hover {
    color: #0d6efd !important;
}


/* ================= HERO ================= */

.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 100px 0 60px;

    background:
    radial-gradient(circle at top right, #1d4ed8 0%, transparent 30%),
    radial-gradient(circle at bottom left, #7c3aed 0%, transparent 25%),
    #0b1120;
}


.hero h1 {
    line-height: 1.1;
}

.hero p {
    color: #cbd5e1;
    max-width: 600px;
}


/* ================= BUTTONS ================= */

.btn-primary {
    background: #2563eb;
    border: none;
    padding: 12px 30px;
}

.btn-primary:hover {
    background: #1d4ed8;
}


/* ================= PROFILE IMAGE ================= */

.profile-img {

    width: 330px;
    height: 330px;

    object-fit: cover;

    border-radius: 50%;

    border: 6px solid #2563eb;

    box-shadow:
    0 0 30px rgba(37,99,235,.6);

    animation: floating 4s infinite ease-in-out;
}


@keyframes floating {

    50% {
        transform: translateY(-15px);
    }

}


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

section {
    padding: 100px 0;
}


section h2 {

    font-size: 2.5rem;
    font-weight: 700;

}


#about {

    background:#111827;

}


#about p {

    color:#cbd5e1;
    line-height:1.8;
}


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


.skill-card {

    background:#111827;

    padding:35px 20px;

    border-radius:15px;

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

    transition:.3s;

}


.skill-card i {

    color:#2563eb;

}


.skill-card:hover {

    transform:translateY(-10px);

}


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


footer {

    background:#020617;

    color:#94a3b8;

    padding:25px;

    text-align:center;

}



/* ================= MOBILE ================= */


@media(max-width:768px){


    .hero {

        min-height:auto;

        text-align:center;

        padding-top:120px;

    }


    .hero h1 {

        font-size:2.5rem;

    }


    .hero p {

        font-size:1rem;

    }


    .profile-img {

        width:230px;

        height:230px;

        margin-top:30px;

    }


    .nav-link {

        margin-left:0;

        padding:10px 0;

    }


    section {

        padding:60px 0;

    }


    section h2 {

        font-size:2rem;

    }


    .btn {

        width:100%;

        margin-bottom:10px;

    }


}