/* =====================================================
   RESET
===================================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    background: #070515;
    color: #ffffff;
}


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

.news-section {

    position: relative;

    width: 100%;

    min-height: 100vh;

    padding:
        45px
        5%
        80px;

    overflow: hidden;

    background:

        radial-gradient(
            circle at 50% 25%,
            rgba(137, 43, 255, 0.16),
            transparent 35%
        ),

        radial-gradient(
            circle at 10% 60%,
            rgba(64, 41, 255, 0.08),
            transparent 30%
        ),

        linear-gradient(
            135deg,
            #09051b,
            #0b0822 50%,
            #070515
        );
}


/* =====================================================
   BIG BACKGROUND NEWS TEXT
===================================================== */

.news-bg-text {

    position: absolute;

    top: -15px;

    left: 15px;

    font-size: clamp(
        90px,
        12vw,
        180px
    );

    font-weight: 900;

    letter-spacing: -8px;

    color: transparent;

    -webkit-text-stroke:
        1px rgba(
            91,
            71,
            190,
            0.16
        );

    pointer-events: none;

    user-select: none;
}


/* =====================================================
   SLOGANS
===================================================== */

.top-slogan {

    position: absolute;

    top: 35px;

    right: 5%;

    width: 180px;

    color: rgba(
        192,
        152,
        255,
        0.75
    );

    font-size: 18px;

    line-height: 1.1;

    font-style: italic;

    transform: rotate(-5deg);

    pointer-events: none;
}

.bottom-slogan {

    position: absolute;

    right: 7%;

    bottom: 80px;

    color: rgba(
        184,
        113,
        255,
        0.65
    );

    font-size: 18px;

    line-height: 1.1;

    font-style: italic;

    transform: rotate(-4deg);

    pointer-events: none;
}


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

.news-header {

    position: relative;

    z-index: 2;

    max-width: 850px;

    margin:
        0 auto
        40px;

    text-align: center;
}


/* LABEL */

.section-label {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    padding:
        7px
        28px;

    border-radius: 30px;

    border:
        1px solid
        rgba(
            178,
            91,
            255,
            0.9
        );

    background:
        rgba(
            102,
            33,
            180,
            0.18
        );

    color: #c894ff;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 4px;

    box-shadow:
        0 0 20px
        rgba(
            153,
            61,
            255,
            0.3
        );
}


/* HEADING */

.news-header h1 {

    margin-top: 14px;

    font-size:
        clamp(
            38px,
            4.5vw,
            64px
        );

    line-height: 1.05;

    font-weight: 900;

    letter-spacing: -2px;
}

.news-header h1 strong {

    color: #b052ff;

    text-shadow:
        0 0 25px
        rgba(
            171,
            68,
            255,
            0.45
        );
}


/* DESCRIPTION */

.news-header p {

    margin-top: 12px;

    color: #b5acc5;

    font-size: 17px;
}


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

.featured-news {

    position: relative;

    z-index: 2;

    width: 100%;

    max-width: 1380px;

    min-height: 370px;

    margin: auto;

    display: grid;

    grid-template-columns:
        42%
        58%;

    border-radius: 22px;

    overflow: hidden;

    border:
        1px solid
        rgba(
            135,
            82,
            255,
            0.8
        );

    background: #100a29;

    box-shadow:
        0 0 40px
        rgba(
            112,
            40,
            255,
            0.12
        );
}


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

.featured-content {

    position: relative;

    z-index: 2;

    padding:
        30px
        42px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    background:
        linear-gradient(
            120deg,
            #120b2c,
            #17102f
        );
}


/* BADGE */

.featured-badge {

    width: fit-content;

    padding:
        9px
        16px;

    margin-bottom: 13px;

    border-radius: 9px;

    background:
        linear-gradient(
            135deg,
            #6231c7,
            #9b43ff
        );

    box-shadow:
        0 0 20px
        rgba(
            145,
            57,
            255,
            0.35
        );

    font-size: 14px;

    font-weight: 700;
}


/* DATE */

.featured-date {

    display: flex;

    gap: 8px;

    align-items: center;

    margin-bottom: 12px;

    color: #d6cee2;

    font-size: 13px;

    font-weight: 600;
}

.featured-date span:first-child {
    color: #b357ff;
}


/* TITLE */

.featured-content h2 {

    max-width: 600px;

    font-size:
        clamp(
            25px,
            2.5vw,
            39px
        );

    line-height: 1.12;

    font-weight: 800;

    margin-bottom: 13px;

    transition:
        opacity .25s ease;
}


/* DESCRIPTION */

.featured-content p {

    max-width: 620px;

    color: #b9b1ca;

    font-size: 15px;

    line-height: 1.55;

    margin-bottom: 18px;
}


/* READ BUTTON */

.featured-read-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    width: fit-content;

    padding:
        10px
        22px;

    border-radius: 30px;

    background:
        linear-gradient(
            135deg,
            #8e39ff,
            #bd55ff
        );

    color: #ffffff;

    text-decoration: none;

    font-size: 14px;

    font-weight: 700;

    box-shadow:
        0 0 20px
        rgba(
            163,
            63,
            255,
            0.35
        );

    transition: .3s ease;
}

.featured-read-btn:hover {

    transform: translateY(-2px);

    box-shadow:
        0 0 30px
        rgba(
            172,
            71,
            255,
            0.65
        );
}


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

.featured-image {

    position: relative;

    min-height: 370px;

    overflow: hidden;
}

.featured-image::after {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(
                10,
                5,
                25,
                0.5
            ),
            transparent 35%
        );

    pointer-events: none;

    z-index: 1;
}

.featured-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

    transition:
        opacity .3s ease,
        transform .5s ease;
}

.featured-image img.news-change {

    animation:
        newsImageChange
        .4s ease;
}

@keyframes newsImageChange {

    0% {

        opacity: 0;

        transform:
            scale(1.06);
    }

    100% {

        opacity: 1;

        transform:
            scale(1);
    }
}


/* =====================================================
   ARROWS
===================================================== */

.news-arrow {

    position: absolute;

    z-index: 5;

    top: 50%;

    transform:
        translateY(-50%);

    width: 50px;

    height: 50px;

    border-radius: 50%;

    border:
        1px solid
        rgba(
            163,
            87,
            255,
            0.9
        );

    background:
        rgba(
            8,
            4,
            25,
            0.75
        );

    color: #ffffff;

    font-size: 38px;

    line-height: 1;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    backdrop-filter: blur(10px);

    transition: .3s ease;
}

.news-arrow:hover {

    background: #8e3dff;

    box-shadow:
        0 0 25px
        rgba(
            157,
            62,
            255,
            0.65
        );

    transform:
        translateY(-50%)
        scale(1.08);
}

.arrow-left {
    left: 18px;
}

.arrow-right {
    right: 18px;
}


/* =====================================================
   DOTS
===================================================== */

.news-dots {

    position: relative;

    z-index: 3;

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 9px;

    margin:
        18px
        auto
        25px;
}

.news-dot {

    width: 8px;

    height: 8px;

    padding: 0;

    border: none;

    border-radius: 20px;

    background: #4d4560;

    cursor: pointer;

    transition: .3s ease;
}

.news-dot.active {

    width: 27px;

    background: #a94cff;

    box-shadow:
        0 0 15px
        rgba(
            171,
            70,
            255,
            0.65
        );
}


/* =====================================================
   3 NEWS CARDS
===================================================== */

.news-grid {

    position: relative;

    z-index: 2;

    max-width: 1380px;

    margin: auto;

    display: grid;

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

    gap: 22px;
}


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

.news-card {

    overflow: hidden;

    border-radius: 19px;

    border:
        1px solid
        rgba(
            135,
            82,
            255,
            0.75
        );

    background:
        linear-gradient(
            145deg,
            #181132,
            #111027
        );

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

.news-card:hover {

    transform:
        translateY(-7px);

    border-color:
        rgba(
            187,
            95,
            255,
            0.95
        );

    box-shadow:
        0 15px 40px
        rgba(
            0,
            0,
            0,
            0.35
        ),

        0 0 25px
        rgba(
            135,
            52,
            255,
            0.15
        );
}


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

.card-image {

    position: relative;

    height: 155px;

    overflow: hidden;

    background: #160d29;
}

.card-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

    transition:
        transform .5s ease;
}

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

    transform:
        scale(1.07);
}


/* CARD DATE */

.card-date {

    position: absolute;

    top: 12px;

    left: 13px;

    padding:
        7px
        12px;

    border-radius: 7px;

    background:
        rgba(
            10,
            5,
            25,
            0.85
        );

    color: #ffffff;

    font-size: 11px;

    font-weight: 700;

    backdrop-filter:
        blur(8px);

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.12
        );
}


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

.card-body {

    padding:
        18px
        20px
        20px;
}

.card-body h3 {

    min-height: 68px;

    font-size: 20px;

    line-height: 1.2;

    margin-bottom: 11px;

    font-weight: 800;
}

.card-body p {

    min-height: 70px;

    color: #aaa3bb;

    font-size: 13.5px;

    line-height: 1.55;

    margin-bottom: 17px;
}


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

.card-footer {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;
}

.card-footer a {

    color: #b450ff;

    text-decoration: none;

    font-size: 14px;

    font-weight: 700;

    transition: .25s ease;
}

.card-footer a:hover {

    color: #d08aff;

    transform:
        translateX(3px);
}

.card-footer > span {

    padding:
        6px
        12px;

    border-radius: 6px;

    background:
        linear-gradient(
            135deg,
            #7130bd,
            #922ee8
        );

    color: #ffffff;

    font-size: 11px;

    font-weight: 700;

    white-space: nowrap;
}


/* =====================================================
   VIEW ALL BUTTON
===================================================== */

.view-all-wrapper {

    position: relative;

    z-index: 2;

    display: flex;

    justify-content: center;

    margin:
        25px
        auto
        45px;
}

.view-all-btn {

    min-width: 245px;

    padding:
        14px
        28px;

    border-radius: 40px;

    border:
        1px solid
        #a84fff;

    background:
        rgba(
            97,
            31,
            177,
            0.12
        );

    color: #c16cff;

    font-size: 15px;

    font-weight: 700;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    box-shadow:
        0 0 18px
        rgba(
            144,
            50,
            255,
            0.2
        );

    transition: .3s ease;
}

.view-all-btn:hover {

    background:
        #8737e8;

    color: #ffffff;

    box-shadow:
        0 0 30px
        rgba(
            151,
            55,
            255,
            0.5
        );
}

.view-all-btn span:last-child {

    font-size: 20px;

    transition: .3s ease;
}


/* =====================================================
   MORE NEWS - HIDDEN INITIALLY
===================================================== */

.more-news-grid {

    position: relative;

    z-index: 2;

    max-width: 1380px;

    margin:
        0 auto;

    display: grid;

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

    gap: 22px;

    max-height: 0;

    opacity: 0;

    overflow: hidden;

    transform:
        translateY(-15px);

    transition:
        max-height .8s ease,
        opacity .5s ease,
        transform .6s ease;
}


/* OPEN STATE */

.more-news-grid.show {

    max-height: 2500px;

    opacity: 1;

    transform:
        translateY(0);

    margin-bottom: 50px;
}


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

@media (max-width: 1000px) {

    .featured-news {

        grid-template-columns:
            1fr;
    }

    .featured-image {

        min-height: 350px;

        order: -1;
    }

    .featured-content {

        padding:
            35px;
    }

    .news-grid,
    .more-news-grid {

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

    .top-slogan,
    .bottom-slogan {

        display: none;
    }
}


@media (max-width: 650px) {

    .news-section {

        padding:
            35px
            18px
            60px;
    }

    .news-bg-text {

        font-size: 80px;

        top: 0;

        left: 0;
    }

    .news-header {

        margin-bottom: 28px;
    }

    .section-label {

        font-size: 10px;

        letter-spacing: 2px;

        padding:
            7px
            17px;
    }

    .news-header h1 {

        font-size: 37px;
    }

    .news-header p {

        font-size: 14px;
    }

    .featured-news {

        border-radius: 17px;
    }

    .featured-image {

        min-height: 245px;
    }

    .featured-content {

        padding:
            25px
            22px;
    }

    .featured-badge {

        font-size: 11px;
    }

    .featured-content h2 {

        font-size: 26px;
    }

    .featured-content p {

        font-size: 13px;
    }

    .news-arrow {

        width: 43px;

        height: 43px;

        font-size: 31px;
    }

    .arrow-left {

        left: 10px;
    }

    .arrow-right {

        right: 10px;
    }

    .news-grid,
    .more-news-grid {

        grid-template-columns:
            1fr;
    }

    .card-image {

        height: 190px;
    }

    .card-body h3 {

        min-height: auto;
    }

    .card-body p {

        min-height: auto;
    }

    .view-all-btn {

        width: 100%;

        max-width: 280px;
    }
}