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

/* Primary color - change this to customize website */
:root {
    --main-color: #0d6efd;
}

body {
    font-family: 'Poppins', sans-serif;
    background: #0b1120;
    color: white;
    scroll-behavior: smooth;

    /* Offset for fixed navbar */
    padding-top: 70px;
}

.bg-dark-section{
    background: #0b1120;
}

p{
    color: #9ca3af;
}

section{
    padding: 80px 0;
}

.navbar {
    backdrop-filter: blur(10px);
}

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

#home {
    background: linear-gradient(to right, #0f172a, #1e293b);
    color: white;
}

#home h1 {
    font-size: 2.8rem;
    font-weight: bold;
}

#home h4 {
    font-weight: normal;
}

#home p {
    max-width: 600px;
    margin: 0 auto;
}

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

#about p {
    max-width: 800px;
    margin: 0 auto;
    font-size: 1.1rem;
}

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

.card {
    border: none;
    border-radius: 16px;
    transition: 0.3s ease;
    background: #111827;
    color: white;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.card:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

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

.project-link{
    text-decoration: none;
    color: inherit;
    display: block;
}

.project-card{
    position: relative;

    background: #111827;

    border-radius: 20px;

    overflow: hidden;

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

    transition: all 0.3s ease;

    width: 100%;

    cursor: pointer;
}

.project-card::before{
    content: '';

    position: absolute;

    inset: -2px;

    background: linear-gradient(
        135deg,
        #0d6efd,
        #7c3aed,
        #06b6d4
    );

    z-index: -1;

    border-radius: 22px;

    opacity: 0;

    transition: 0.4s ease;
}

.project-card:hover{
    transform: translateY(-8px);
    box-shadow: 0 0 25px rgba(0,123,255,0.25);
}

.project-card:hover::before{
    opacity: 1;
}

.project-card .card-body{
    padding: 24px;
}

.project-card .card-title{
    color: white;
    font-weight: 600;
}

.project-card .card-text{
    color: #b8b8b8;
}

.project-img{
    width: 100%;
    height: 220px;

    object-fit: contain;

    background: #0f172a;

    padding: 10px;

    transition: transform 0.4s ease;
}

.project-card:hover .project-img{
    transform: scale(1.03);
}

.project-card .btn{
    border-radius: 12px;

    padding: 10px 20px;

    font-weight: 500;
}

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

#contact input,
#contact textarea {
    border-radius: 0;
}

.form-control{
    background: #111827;
    border: 1px solid rgba(255,255,255,0.08);

    color: white;
}

.form-control:focus{
    background: #111827;
    color: white;

    border-color: #0d6efd;

    box-shadow: none;
}

.form-control::placeholder{
    color: #9ca3af;
}

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

.footer-section{
    background:#0f172a;
}

.social-icons{
    display:flex;
    justify-content:center;
    gap:20px;
}

.social-link{
    width:45px;
    height:45px;
    border-radius:50%;
    background:rgba(255,255,255,0.08);
    display:flex;
    align-items:center;
    justify-content:center;
    color:white;
    font-size:20px;
    text-decoration:none;
    transition:0.3s ease;
}

.social-link:hover{
    transform:translateY(-5px);
    background:#0d6efd;
}

.btn {
    border-radius: 10px;
    padding: 10px 20px;
    transition: 0.3s ease;
}

.btn:hover {
    transform: scale(1.05);
}