/* ===========================================================
   FEATURED PROJECT
=========================================================== */

.featured-project-section{

    padding:160px 0;

    position:relative;

    background:#0E1117;

}

.featured-project-container{

    width:min(1280px,90%);

    margin:0 auto;

}

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

.featured-project-header{

    max-width:760px;

    margin:0 auto 60px;

    text-align:center;

}

.featured-project-title{

    margin:22px 0 18px;

    font-size:clamp(3rem,5vw,4.5rem);

    line-height:1;

    font-weight:800;

    color:#F5F7FA;

    letter-spacing:-.04em;

}

.featured-project-subtitle{

    font-size:1.2rem;

    color:#97A5B8;

    line-height:1.7;

}

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

.featured-project-content{

    display:grid;

    grid-template-columns:520px minmax(0,1fr);

    gap:56px;

    align-items:start;

}

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

.featured-project-media{

    position:sticky;

    top:110px;

    overflow:hidden;

    border-radius:30px;

    padding:18px;


}

.featured-project-video{

    display:block;

    width:100%;

    height:auto;

    border-radius:18px;

    transition:transform .45s ease;

}

/* ===========================================================
   RIGHT COLUMN
=========================================================== */

.featured-project-right{

    display:flex;

    flex-direction:column;

    gap:28px;

}

/* ===========================================================
   PANELS
=========================================================== */

.project-panel{

    padding:28px;

}

.project-panel h3{

    margin:0 0 22px;

    color:#FFFFFF;

    font-size:1.35rem;

    font-weight:700;

}

.project-panel p{

    color:#A8B3C2;

    line-height:1.8;

}

/* ===========================================================
   RESPONSIBILITIES
=========================================================== */

.project-list{

    display:grid;

    grid-template-columns:repeat(2,minmax(0,1fr));

    gap:16px 28px;

    margin:0;

    padding:0;

    list-style:none;

}

.project-list li{

    position:relative;

    padding-left:22px;

    color:#D3DCE8;

}

.project-list li::before{

    content:"✓";

    position:absolute;

    left:0;

    color:#5EA8FF;

}

/* ===========================================================
   DETAILS
=========================================================== */

.project-details-grid{

    display:grid;

    grid-template-columns:repeat(2,minmax(0,1fr));

    gap:26px 20px;

}

.project-details-grid div{

    display:flex;

    flex-direction:column;

    gap:8px;

}

.detail-label{

    display:block;

    margin-bottom:6px;

    font-size:.75rem;

    text-transform:uppercase;

    letter-spacing:.18em;

    color:#5EA8FF;

}

.detail-value{

    color:#FFFFFF;

    font-size:1.05rem;

    font-weight:700;

    line-height:1.35;

}

/* ===========================================================
   TECH
=========================================================== */

.project-tech{

    display:flex;

    flex-wrap:wrap;

    gap:14px;

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

@media (max-width:1100px){

    .featured-project-content{

        grid-template-columns:1fr;

    }

    .featured-project-media{

        max-width:900px;

    }

}

@media (max-width:768px){

    .featured-project-section{

        padding:110px 0;

    }

    .featured-project-title{

        font-size:2.7rem;

    }

    .project-list{

        grid-template-columns:1fr;

    }

    .project-details-grid{

        grid-template-columns:1fr;

    }

}

.project-technologies{

    margin-top:36px;

    padding-top:30px;

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

}

.project-technologies h4{

    margin:0 0 18px;

    color:#FFFFFF;

    font-size:1.05rem;

    font-weight:600;

}