html {

    scroll-behavior: smooth;

}

body {

    background: #121212;

    color: white;

    font-family: Arial, Helvetica, sans-serif;

}

/* ==============================
   Navigation
============================== */

.navbar {

    box-shadow: 0 2px 10px rgba(0,0,0,.35);

}

/* ======================================
   Anchor Offset
====================================== */

#profile,
#skills,
#focus,
#creative,
#tools,
#experience,
#projects,
#cv,
#contact {

    scroll-margin-top: 100px;

}

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

.hero {

    min-height: 100vh;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    background: linear-gradient(

        135deg,

        #1c1c1c,

        #0f0f0f

    );

    padding: 100px 20px;

}

.hero h1 {

    font-size: 4rem;

    font-weight: bold;

}

.hero h3 {

    color: #0d6efd;

    margin: 20px 0;

}

.hero p {

    max-width: 700px;

    margin: auto;

    color: #cccccc;

}

/* ======================================
   Section Headings
====================================== */

section h2 {

    color: #0d6efd;

    font-weight: 700;

}

/* ==============================
   Placeholder Sections
============================== */

section {

    min-height: 100vh;

    padding: 100px 20px;

}

/* ==============================
   About Section
============================== */

#about {

    background: #181818;

}

#about h2 {

    color: #0d6efd;

    font-weight: bold;

    margin-bottom: 25px;

}

#about p {

    color: #cccccc;

    font-size: 1.05rem;

    line-height: 1.8;

}

#about img {

    border: 5px solid #0d6efd;

    margin-bottom: 30px;

}/* ==============================
   About Section
============================== */

#about {

    background: #181818;

}

#about h2 {

    color: #0d6efd;

    font-weight: bold;

    margin-bottom: 25px;

}

#about p {

    color: #cccccc;

    font-size: 1.05rem;

    line-height: 1.8;

}

#about img {

    border: 5px solid #0d6efd;

    margin-bottom: 30px;

}

/* ======================================
   Technology Badges
====================================== */

.skill-container{

    margin-top:20px;

}

.skill-badge{

    background:#1f1f1f;

    color:white;

    border:1px solid #333;

    padding:10px 18px;

    margin:6px;

    font-size:.95rem;

    font-weight:500;

    border-radius:30px;

    transition:.25s;

}

.skill-badge:hover{

    background:#0d6efd;

    border-color:#0d6efd;

    transform:translateY(-3px);

    cursor:default;

}

/* ==============================
   What I Focus On
============================== */

#focus {

    background: #121212;
    color: white;

}

#focus h2 {

    font-weight: 700;
    margin-bottom: 50px;

}

#focus .card {

    background: #1f1f1f;
    color: white;

    border: 1px solid #2f2f2f;
    border-radius: 12px;

    transition: .3s;

}

#focus .card:hover {

    transform: translateY(-8px);

    border-color: #0d6efd;

    box-shadow: 0 12px 30px rgba(0,0,0,.35);

}

#focus .card-body {

    padding: 30px;

}

#focus h4 {

    margin-bottom: 20px;
    text-align: center;
    font-weight: 600;

}

#focus p {

    color: #bbbbbb;
    line-height: 1.7;

}

/* ==============================
   Experience Timeline
============================== */

#experience {

    background: #181818;

}

#experience h2 {

    color: #0d6efd;

    font-weight: bold;

}

.timeline {

    position: relative;

    margin: auto;

    max-width: 900px;

}

.timeline::before {

    content: "";

    position: absolute;

    left: 25px;

    top: 0;

    width: 4px;

    height: 100%;

    background: #0d6efd;

}

.timeline-item {

    position: relative;

    margin-left: 70px;

    margin-bottom: 50px;

    background: #232323;

    padding: 25px;

    border-radius: 10px;

    box-shadow: 0 5px 15px rgba(0,0,0,.35);

}

.timeline-item::before {

    content: "";

    position: absolute;

    left: -58px;

    top: 28px;

    width: 18px;

    height: 18px;

    background: #0d6efd;

    border-radius: 50%;

}

/* ==============================
   Projects
============================== */

#projects {

    background: #121212;

}

#projects h2 {

    color: #0d6efd;

    font-weight: bold;

}

.project-card {

    background: #1f1f1f;

    color: white;

    border: none;

    transition: transform .3s;

}

.project-card:hover {

    transform: translateY(-10px);

}

.project-card img {

    height: 260px;

    object-fit: cover;

}

.project-card .card-footer {

    background: transparent;

    border-top: none;

}

/* ==============================
   Project Features
============================== */

.project-card h5 {

    color: #0d6efd;

    font-weight: 600;

    margin-top: 20px;

}

.project-card ul {

    padding-left: 0;

    margin-bottom: 20px;

}

.project-card ul li {

    color: #d8d8d8;

    padding: 6px 0;

    font-size: 0.95rem;

}

/* ======================================
   Download CV
====================================== */

#cv {

    background: #1b1b1b;

}

#cv h2 {

    font-weight: 700;

}

#cv .btn {

    padding: 15px 45px;

    font-size: 1.15rem;

    transition: 0.3s;

}

#cv .btn:hover {

    transform: translateY(-4px);

    box-shadow: 0 10px 25px rgba(0,0,0,0.3);

}

/* ==============================
   Contact
============================== */

#contact {

    background: #181818;

}

#contact h2 {

    color: #0d6efd;

    font-weight: bold;

}

#contact form {

    background: #232323;

    padding: 35px;

    border-radius: 12px;

    box-shadow: 0 8px 25px rgba(0,0,0,.35);

}

.form-control {

    background: #2f2f2f;

    color: white;

    border: none;

}

.form-control:focus {

    background: #3b3b3b;

    color: white;

    box-shadow: none;

    border: 1px solid #0d6efd;

}

textarea {

    resize: vertical;

}

.form-label {

    font-weight: bold;

}

/* ======================================
   Shared Sections
====================================== */

#skills,
#creative,
#tools {

    background: #121212;
    color: white;

}

#skills h2,
#creative h2,
#tools h2 {

    font-weight: 700;
    margin-bottom: 50px;

}

#skills h4,
#creative h4,
#tools h4 {

    color: white;
    margin-bottom: 20px;

}

/* ======================================
   Lists
====================================== */

#skills ul,
#creative ul,
#tools ul {

    list-style: none;
    padding: 0;

}

#skills li,
#creative li,
#tools li {

    padding: 10px 0;

    border-bottom: 1px solid #333;

    color: #bbbbbb;

}

#skills li:last-child,
#creative li:last-child,
#tools li:last-child {

    border-bottom: none;

}

/* ======================================
   Software Cards
====================================== */

#tools .card {

    background: #1f1f1f;

    color: white;

    border: 1px solid #2f2f2f;

    transition: .3s;

}

#tools .card:hover {

    transform: translateY(-8px);

    border-color: #0d6efd;

    box-shadow: 0 12px 30px rgba(0,0,0,.35);

}

#tools .card-body {

    padding: 30px;

}

/* ======================================
   Creative Cards
====================================== */

#creative {

    background: #121212;
    color: white;

}

#creative .card {

    background: #1f1f1f;

    color: white;

    border: 1px solid #2f2f2f;

    transition: .3s;

    border-radius: 12px;

}

#creative .card:hover {

    transform: translateY(-8px);

    border-color: #0d6efd;

    box-shadow: 0 12px 30px rgba(0,0,0,.35);

}

#creative .card-body {

    padding: 30px;

}

#creative h4 {

    margin-bottom: 20px;

    text-align: center;

    font-weight: 600;

}

#creative ul {

    list-style: none;

    padding: 0;

}

#creative li {

    padding: 10px 0;

    color: #bbbbbb;

    border-bottom: 1px solid #333;

}

#creative li:last-child {

    border-bottom: none;

}

/* ======================================
   Download CV
====================================== */

#cv {

    background: linear-gradient(
        135deg,
        #202020,
        #111111
    );

    color: white;

}

#cv p {

    color: #bbbbbb;

}

#cv .btn {

    transition: .3s;

}

#cv .btn:hover {

    transform: translateY(-4px);

}