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

.projects-section{

    height:100%;

    display:flex;

    align-items:flex-start;

    padding-top:96px;

    padding-bottom:0;

    background:
    radial-gradient(
        circle at top right,
        rgba(45,140,255,0.10),
        transparent 30%
    ),

    radial-gradient(
        circle at bottom left,
        rgba(0,255,180,0.08),
        transparent 30%
    ),

    #050816;
}

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

.projects-header{

    text-align:center;

    margin-bottom:18px;
}

/* ======================================== */
/* TAG */
/* ======================================== */

.projects-tag{

    display:inline-block;

    margin-bottom:14px;

    color:#2d8cff;

    font-size:13px;

    letter-spacing:3px;

    text-transform:uppercase;

    font-weight:600;
}

/* ======================================== */
/* TITLE */
/* ======================================== */

.projects-title{

    font-size:44px;

    font-weight:800;

    line-height:0.96;

    letter-spacing:-2px;

    margin-bottom:18px;

    color:#ffffff;
}

/* ======================================== */
/* SUBTITLE */
/* ======================================== */

.projects-subtitle{

    max-width:660px;

    margin:auto;

    color:#aeb9d6;

    font-size:15px;

    line-height:1.55;
}

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

.project-card{

    background:
    linear-gradient(
        135deg,
        rgba(9,17,31,0.95),
        rgba(13,24,48,0.96)
    );

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

    border-radius:22px;

    overflow:hidden;

    transition:0.35s;

    backdrop-filter:blur(14px);

    height:100%;
}

.project-card:hover{

    transform:translateY(-4px);

    border-color:
    rgba(45,140,255,0.22);

    box-shadow:
    0 18px 40px rgba(0,0,0,0.35);
}

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

.project-image{

    width:100%;

    height:160px;

    overflow:hidden;
}

.project-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;
}

/* ======================================== */
/* CONTENT */
/* ======================================== */

.project-content{

    padding:18px;
}

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

.project-category{

    display:inline-block;

    color:#2d8cff;

    font-size:12px;

    letter-spacing:2px;

    margin-bottom:12px;

    text-transform:uppercase;

    font-weight:600;
}

/* ======================================== */
/* TITLE */
/* ======================================== */

.project-content h3{

    font-size:19px;

    font-weight:700;

    line-height:1.15;

    margin-bottom:12px;

    color:white;
}

/* ======================================== */
/* TEXT */
/* ======================================== */

.project-content p{

    color:#aeb9d6;

    font-size:14px;

    line-height:1.5;

    margin-bottom:0;
}

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

@media(max-width:991px){

    .projects-section{

        padding-top:95px;

        padding-bottom:40px;

        height:auto;
    }

    .projects-title{

        font-size:36px;
    }

}

@media(max-width:768px){

    .projects-title{

        font-size:30px;

        line-height:1;
    }

    .projects-subtitle{

        font-size:14px;
    }

    .project-image{

        height:200px;
    }

}