/* =====================================================
   PROJECTS PAGE
===================================================== */

.projects-hero{

    display:flex;

    justify-content:center;

    align-items:flex-start;

    padding:20px 0 60px;

}

.projects-card{

    width:100%;

    max-width:1500px;

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

    backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.5);

    border-radius:34px;

    padding:55px;

    box-shadow:0 25px 60px rgba(0,0,0,.08);

    animation:fadePage .8s ease;

}

.projects-card h1{

    text-align:center;

    font-family:var(--font-title);

    font-size:62px;

    margin-bottom:25px;

}

.projects-description{

    max-width:950px;

    margin:0 auto 70px;

    text-align:center;

    font-size:22px;

    line-height:1.9;

    color:var(--text-light);

}

.projects-timeline{

    display:flex;

    flex-direction:column;

    gap:35px;

}
/* =====================================================
   NEWS CARDS
===================================================== */

.project-news{

    position:relative;

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

    backdrop-filter:blur(14px);

    border:1px solid rgba(255,255,255,.55);

    border-left:6px solid var(--gold);

    border-radius:26px;

    padding:35px 40px;

    transition:.35s;

    overflow:hidden;

}

.project-news::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        135deg,
        rgba(199,161,90,.08),
        transparent 60%
    );

    opacity:0;

    transition:.35s;

}

.project-news:hover{

    transform:translateY(-8px);

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

    border-left-color:var(--gold-dark);

}

.project-news:hover::before{

    opacity:1;

}

.news-date{

    display:inline-block;

    padding:10px 18px;

    border-radius:40px;

    background:rgba(199,161,90,.15);

    color:var(--gold-dark);

    font-size:16px;

    font-weight:700;

    margin-bottom:22px;

}

.project-news h2{

    font-family:var(--font-title);

    font-size:36px;

    margin-bottom:18px;

}

.project-news p{

    font-size:20px;

    line-height:1.9;

    color:var(--text-light);

}
/* =====================================================
   DECORATION
===================================================== */

.project-news::after{

    content:"";

    position:absolute;

    width:220px;

    height:220px;

    right:-90px;

    top:-90px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(199,161,90,.18),
        transparent 70%
    );

    pointer-events:none;

}

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

@media(max-width:1200px){

    .projects-card{

        padding:40px;

    }

    .projects-card h1{

        font-size:48px;

    }

    .project-news h2{

        font-size:30px;

    }

}

@media(max-width:768px){

    .projects-card{

        padding:25px;

    }

    .projects-card h1{

        font-size:38px;

    }

    .projects-description{

        font-size:18px;

        margin-bottom:45px;

    }

    .project-news{

        padding:25px;

    }

    .project-news h2{

        font-size:24px;

    }

    .project-news p{

        font-size:17px;

    }

}