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

.news{

    position:relative;

    padding:100px 0 56px;

    background:#fff;

    overflow:hidden;

}

.news .container{

    position:relative;

    z-index:2;

}

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

.news-title{

    width:min(760px,100%);

    margin:0 auto 60px;

    text-align:center;

}

.news-title h2{

    margin:22px 0;

    color:#131B29;

    font-size:clamp(2.6rem,4vw,3.5rem);

    font-weight:800;

    line-height:1.15;

    letter-spacing:-1px;

}

.news-title p{

    max-width:680px;

    margin:auto;

    color:#6B7280;

    line-height:1.9;

    font-size:1.05rem;

}

/*=========================
    GRID
=========================*/

.news-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;

}

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

.news-card{

    position:relative;

    isolation:isolate;

    display:flex;

    flex-direction:column;

    background:#fff;

    border:1px solid transparent;

    border-radius:30px;

    overflow:hidden;

    box-shadow:0 18px 45px rgba(19,27,41,.08);

    transition:
        transform .45s ease,
        box-shadow .45s ease,
        border-color .45s ease;

}

.news-card:hover{

    transform:translateY(-12px);

    border-color:rgba(150,106,48,.25);

    box-shadow:0 35px 80px rgba(19,27,41,.18);

}

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

.news-image{

    position:relative;

    overflow:hidden;

    height:260px;

}

.news-image::before{

    content:"";

    position:absolute;

    top:0;

    left:-170%;

    width:60%;

    height:100%;

    background:linear-gradient(

        120deg,

        transparent,

        rgba(255,255,255,.45),

        transparent

    );

    transform:skewX(-25deg);

    transition:left 1.2s ease;

    z-index:3;

}

.news-image::after{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(

        to top,

        rgba(19,27,41,.45),

        transparent 55%

    );

    opacity:.9;

    transition:opacity .45s ease;

    z-index:2;

}

.news-card:hover .news-image::before{

    left:170%;

}

.news-card:hover .news-image::after{

    opacity:1;

}

.news-image img{

    width:100%;

    height:100%;

    display:block;

    object-fit:cover;

    border-radius:0;

    transition:
        transform .9s cubic-bezier(.22,.61,.36,1),
        filter .7s ease;

}

.news-card:hover .news-image img{

    transform:scale(1.08);

    filter:brightness(1.08);

}

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

.news-category{

    position:absolute;

    top:18px;

    left:18px;

    z-index:5;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:10px 18px;

    border-radius:40px;

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

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

    backdrop-filter:blur(12px);

    -webkit-backdrop-filter:blur(12px);

    color:#fff;

    font-size:13px;

    font-weight:700;

    letter-spacing:.3px;

    transition:
        background .35s ease,
        transform .35s ease;

}

.news-card:hover .news-category{

    background:rgba(150,106,48,.88);

    transform:translateY(-2px);

}

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

.news-content{

    display:flex;

    flex-direction:column;

    flex:1;

    padding:30px;

}

.news-date{

    display:inline-flex;

    align-items:center;

    gap:8px;

    width:max-content;

    padding:8px 16px;

    margin-bottom:20px;

    border-radius:40px;

    background:#FFF8E7;

    color:#8A6A00;

    font-size:13px;

    font-weight:700;

    box-shadow:
        inset 0 0 0 1px rgba(150,106,48,.12);

}

.news-date i{

    color:#966A30;

    font-size:14px;

}

.news-content h3{

    color:#131B29;

    font-size:1.5rem;

    font-weight:800;

    line-height:1.35;

    margin-bottom:18px;

    transition:color .35s ease;

}

.news-card:hover .news-content h3{

    color:#966A30;

}

.news-content p{

    flex:1;

    margin-bottom:30px;

    color:#6B7280;

    line-height:1.8;

}

/*=========================
    LINK
=========================*/

.news-link{

    display:inline-flex;

    align-items:center;

    gap:10px;

    width:max-content;

    color:#131B29;

    font-weight:700;

    text-decoration:none;

    transition:color .35s ease;

}

.news-link i{

    transition:
        transform .35s ease,
        color .35s ease;

}

.news-link:hover{

    color:#966A30;

}

.news-link:hover i{

    color:#966A30;

    transform:translateX(8px);

}

/*=========================
    BUTTON
=========================*/

.news-btn{

    margin-top:70px;

    text-align:center;

}