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

.news{

    padding:100px 0;

    background:#07070d;

}

.news .container{

    max-width:1400px;

    margin:auto;

    padding:0 25px;

}

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

.news-grid{

    display:grid;

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

    gap:30px;

}

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

.news-card{

    background:#101018;

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

    border-radius:18px;

    overflow:hidden;

    transition:.35s;

}

.news-card:hover{

    transform:translateY(-10px);

    border-color:#A855F7;

    box-shadow:0 20px 50px rgba(168,85,247,.15);

}

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

.news-image{

    height:220px;

    overflow:hidden;

}

.news-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.5s;

}

.news-card:hover img{

    transform:scale(1.08);

}

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

.news-content{

    padding:28px;

}

.news-date{

    display:inline-block;

    margin-bottom:16px;

    color:#A855F7;

    font-size:14px;

    text-transform:uppercase;

    letter-spacing:1px;

}

.news-content h3{

    color:#fff;

    font-size:24px;

    line-height:1.4;

    margin-bottom:18px;

}

.news-content p{

    color:#9f9f9f;

    font-size:16px;

    line-height:1.8;

    margin-bottom:25px;

}

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

.news-link{

    display:inline-flex;

    align-items:center;

    gap:8px;

    color:#A855F7;

    text-decoration:none;

    font-weight:700;

    transition:.3s;

}

.news-link:hover{

    color:#ffffff;

    transform:translateX(6px);

}

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

@media(max-width:1200px){

.news-grid{

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

}

}

@media(max-width:768px){

.news{

padding:70px 0;

}

.news-grid{

grid-template-columns:1fr;

}

.news-image{

height:220px;

}

.news-content{

padding:22px;

}

.news-content h3{

font-size:22px;

}

}

/*=========================================
    NEWS PAGE
=========================================*/

.news-page{

    padding:100px 0;

    background:#07070d;

}

.news-page .container{

    max-width:1400px;

    margin:0 auto;

    padding:0 25px;

}


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

.news-grid{

    display:grid;

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

    gap:30px;

}


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

.news-card{

    background:#101018;

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

    border-radius:16px;

    overflow:hidden;

    transition:.35s;

}

.news-card:hover{

    transform:translateY(-10px);

    border-color:#A855F7;

    box-shadow:0 15px 40px rgba(168,85,247,.18);

}


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

.news-image{

    position:relative;

    display:block;

    height:240px;

    overflow:hidden;

    background:#15151f;

}

.news-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.5s;

}

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

    transform:scale(1.08);

}


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

.news-no-image{

    width:100%;

    height:100%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#101018;

    color:#A855F7;

    font-size:50px;

}


/*=========================================
    INFO
=========================================*/

.news-info{

    padding:22px;

}


/*=========================================
    DATE
=========================================*/

.news-date{

    display:flex;

    align-items:center;

    gap:8px;

    margin-bottom:12px;

    color:#999;

    font-size:14px;

}

.news-date i{

    color:#A855F7;

}


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

.news-info h3{

    margin:0 0 12px;

    font-size:21px;

    line-height:1.35;

    font-weight:700;

}

.news-info h3 a{

    color:#fff;

    text-decoration:none;

    transition:.3s;

}

.news-info h3 a:hover{

    color:#A855F7;

}


/*=========================================
    DESCRIPTION
=========================================*/

.news-info p{

    margin:0 0 20px;

    color:#999;

    font-size:15px;

    line-height:1.7;

}


/*=========================================
    READ MORE
=========================================*/

.news-more{

    display:inline-flex;

    align-items:center;

    gap:10px;

    color:#b9b9b9;

    text-decoration:none;

    font-size:14px;

    font-weight:600;

    transition:.3s;

}

.news-more i{

    transition:.3s;

}

.news-more:hover{

    color:#A855F7;

}

.news-more:hover i{

    transform:translateX(5px);

}


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

.news-empty{

    grid-column:1 / -1;

    text-align:center;

    padding:80px 20px;

    color:#999;

}

.news-empty i{

    display:block;

    margin-bottom:25px;

    color:#A855F7;

    font-size:60px;

}

.news-empty h2{

    margin:0 0 10px;

    color:#fff;

    font-size:26px;

}

.news-empty p{

    margin:0;

    color:#999;

    font-size:15px;

}


/*=========================================
    SINGLE NEWS
=========================================*/

.news-single{

    padding:100px 0;

    background:#07070d;

}

.news-single .container{

    max-width:1000px;

    margin:0 auto;

    padding:0 25px;

}

.news-single-content{

    background:#101018;

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

    border-radius:16px;

    padding:45px;

}


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

.news-single-content h1{

    margin:0 0 15px;

    color:#fff;

    font-size:42px;

    line-height:1.25;

    font-weight:800;

}


/*=========================================
    SINGLE DATE
=========================================*/

.news-single-date{

    display:flex;

    align-items:center;

    gap:8px;

    margin-bottom:30px;

    color:#999;

    font-size:14px;

}

.news-single-date i{

    color:#A855F7;

}


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

.news-single-image{

    width:100%;

    max-height:550px;

    margin-bottom:35px;

    overflow:hidden;

    border-radius:12px;

}

.news-single-image img{

    display:block;

    width:100%;

    height:100%;

    max-height:550px;

    object-fit:cover;

}


/*=========================================
    SINGLE DESCRIPTION
=========================================*/

.news-single-description{

    margin-bottom:25px;

    color:#d0d0d0;

    font-size:19px;

    line-height:1.7;

    font-weight:500;

}


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

.news-single-text{

    color:#aaa;

    font-size:16px;

    line-height:1.9;

}

.news-single-text p{

    margin-bottom:20px;

}


/*=========================================
    BACK
=========================================*/

.news-back{

    display:inline-flex;

    align-items:center;

    gap:10px;

    margin-top:40px;

    color:#b9b9b9;

    text-decoration:none;

    font-size:15px;

    font-weight:600;

    transition:.3s;

}

.news-back i{

    transition:.3s;

}

.news-back:hover{

    color:#A855F7;

}

.news-back:hover i{

    transform:translateX(-5px);

}


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

@media(max-width:1200px){

    .news-grid{

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

    }

}


/*=========================================
    TABLET
=========================================*/

@media(max-width:900px){

    .news-single-content{

        padding:35px;

    }

    .news-single-content h1{

        font-size:36px;

    }

}


/*=========================================
    MOBILE
=========================================*/

@media(max-width:700px){

    .news-page{

        padding:70px 0;

    }

    .news-grid{

        grid-template-columns:1fr;

    }

    .news-image{

        height:220px;

    }

    .news-info{

        padding:20px;

    }

    .news-info h3{

        font-size:20px;

    }

    .news-single{

        padding:70px 0;

    }

    .news-single-content{

        padding:25px 20px;

        border-radius:12px;

    }

    .news-single-content h1{

        font-size:28px;

    }

    .news-single-description{

        font-size:17px;

    }

    .news-single-text{

        font-size:15px;

        line-height:1.8;

    }

}


/*=========================================
    SMALL MOBILE
=========================================*/

@media(max-width:450px){

    .news-page .container,
    .news-single .container{

        padding:0 15px;

    }

    .news-image{

        height:200px;

    }

    .news-single-content{

        padding:20px 17px;

    }

    .news-single-content h1{

        font-size:25px;

    }

}