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

:root {

    --primary:
        #111827;

    --secondary:
        #374151;

    --background:
        #f5f7fa;

    --text:
        #1f2937;

    --muted:
        #6b7280;

    --border:
        #e5e7eb;

}


* {
    box-sizing: border-box;
}


body {

    margin: 0;

    background:
        var(--background);

    color:
        var(--text);

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

}


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

.navbar {

    background:
        var(--primary);

    min-height:
        70px;

}


.navbar-brand {

    font-weight:
        700;

    font-size:
        1.05rem;

}


.brand-icon {

    width:
        38px;

    height:
        38px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        rgba(255,255,255,.12);

    border-radius:
        10px;

}


.nav-link {

    font-weight:
        500;

}


.nav-link:hover {

    color:
        #fff !important;

}


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

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

.hero {

    position: relative;

    min-height: 520px;

    display: flex;

    align-items: center;

    color: white;

    background-image:
        url("../images/hero.jpeg");

    background-size:
        cover;

    background-position:
        center;

    background-repeat:
        no-repeat;

}


/* Dark overlay */

.hero::before {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(17, 24, 39, 0.90) 0%,
            rgba(17, 24, 39, 0.70) 45%,
            rgba(17, 24, 39, 0.35) 100%
        );

}


/* Make content appear above overlay */

.hero .container {

    position: relative;

    z-index: 2;

}


.hero-label {

    font-size:
        .8rem;

    letter-spacing:
        2px;

    font-weight:
        700;

    color:
        #e5e7eb;

    margin-bottom:
        15px;

}


.hero h1 {

    font-size:
        clamp(
            2.5rem,
            7vw,
            5rem
        );

    line-height:
        1.05;

    font-weight:
        800;

    margin:
        0 0 20px;

}


.hero p {

    max-width:
        700px;

    font-size:
        1.1rem;

    line-height:
        1.8;

    color:
        #e5e7eb;

}


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

.section-heading h2 {

    font-size:
        2rem;

    font-weight:
        750;

}


.section-heading p {

    color:
        var(--muted);

}


/* =========================================
   CATEGORY
========================================= */

.category-link {

    text-decoration:
        none;

    color:
        inherit;

}


.category-card {

    height:
        100%;

    background:
        white;

    border:
        1px solid var(--border);

    border-radius:
        20px;

    padding:
        28px;

    transition:
        all .3s ease;

}


.category-card:hover {

    transform:
        translateY(-8px);

    box-shadow:
        0 20px 40px
        rgba(0,0,0,.10);

    border-color:
        transparent;

}


.category-icon {

    width:
        70px;

    height:
        70px;

    border-radius:
        18px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    font-size:
        32px;

    margin-bottom:
        25px;

}


.category-icon.web {

    background:
        #dbeafe;

    color:
        #2563eb;

}


.category-icon.three-d {

    background:
        #ede9fe;

    color:
        #7c3aed;

}


.category-icon.arduino {

    background:
        #dcfce7;

    color:
        #16a34a;

}


.category-icon.graphic {

    background:
        #fef3c7;

    color:
        #d97706;

}


.category-card h3 {

    font-size:
        1.25rem;

    font-weight:
        700;

    margin-bottom:
        12px;

}


.category-card p {

    color:
        var(--muted);

    line-height:
        1.6;

    min-height:
        76px;

}


.category-footer {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    margin-top:
        20px;

    font-weight:
        600;

    font-size:
        .9rem;

}


.category-footer i {

    transition:
        transform .3s;

}


.category-card:hover
.category-footer i {

    transform:
        translateX(5px);

}


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

.page-header {

    background:
        white;

    border-bottom:
        1px solid var(--border);

    padding:
        35px 0;

}


.page-header h1 {

    font-size:
        2rem;

    font-weight:
        750;

    margin:
        0;

}


.page-header p {

    margin:
        5px 0 0;

    color:
        var(--muted);

}


.breadcrumb {

    margin-bottom:
        25px;

}


.breadcrumb a {

    text-decoration:
        none;

    color:
        #2563eb;

}


/* Smaller icon */

.category-icon.small {

    width:
        65px;

    height:
        65px;

    margin:
        0;

}


/* =========================================
   PROJECT CARD
========================================= */

.project-link {

    text-decoration:
        none;

    color:
        inherit;

}


.project-card {

    background:
        white;

    border:
        1px solid var(--border);

    border-radius:
        18px;

    overflow:
        hidden;

    height:
        100%;

    transition:
        all .3s ease;

}


.project-card:hover {

    transform:
        translateY(-7px);

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

}


.project-icon {

    height:
        150px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        linear-gradient(
            135deg,
            #fef3c7,
            #fde68a
        );

    color:
        #f59e0b;

    font-size:
        65px;

}


.project-content {

    padding:
        25px;

}


.project-content h3 {

    font-size:
        1.2rem;

    font-weight:
        700;

    margin-bottom:
        10px;

}


.project-content p {

    color:
        var(--muted);

    line-height:
        1.6;

    margin-bottom:
        20px;

}


.project-meta {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

}


.platform {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        6px;

    padding:
        6px 10px;

    border-radius:
        8px;

    font-size:
        .78rem;

    font-weight:
        600;

}


.platform.youtube {

    background:
        #fee2e2;

    color:
        #dc2626;

}


.platform.google {

    background:
        #dbeafe;

    color:
        #2563eb;

}


.platform.drive {

    background:
        #dcfce7;

    color:
        #16a34a;

}


.project-meta >
.bi-box-arrow-up-right {

    color:
        #9ca3af;

}


/* =========================================
   EMPTY STATE
========================================= */

.empty-state {

    text-align:
        center;

    padding:
        80px 20px;

}


.empty-state i {

    font-size:
        60px;

    color:
        #9ca3af;

}


.empty-state h3 {

    margin-top:
        20px;

}


.empty-state p {

    color:
        var(--muted);

}


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

footer {

    background:
        #111827;

    color:
        #9ca3af;

    padding:
        40px 0;

    margin-top:
        50px;

}


footer h5 {

    color:
        white;

    font-weight:
        700;

}


footer p {

    margin:
        5px 0;

}


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

@media (max-width: 767px) {

    .hero {

        min-height:
            480px;

        background-position:
            center center;

    }

    .hero::before {

        background:
            linear-gradient(
                180deg,
                rgba(17, 24, 39, 0.70),
                rgba(17, 24, 39, 0.92)
            );

    }

    .hero h1 {

        font-size:
            2.5rem;

    }


    .category-card {

        padding:
            24px;

    }


    .category-card p {

        min-height:
            auto;

    }


    .page-header {

        padding:
            25px 0;

    }


    .page-header h1 {

        font-size:
            1.6rem;

    }


    .page-header .category-icon.small {

        width:
            55px;

        height:
            55px;

        font-size:
            25px;

    }


    footer {

        text-align:
            center;

    }


    footer .text-md-end {

        text-align:
            center !important;

        margin-top:
            20px;

    }

}


@media (max-width: 400px) {

    .navbar-brand {

        font-size:
            .9rem;

    }


    .hero h1 {

        font-size:
            2.15rem;

    }


    .category-card {

        padding:
            20px;

    }

}