.media-hero {


    min-height: 50vh;

    display: flex;
    justify-content: center;
    align-items: center;

    text-align: center;

    padding: 120px 10%;

    background:
        linear-gradient(135deg,
            #081228,
            #173a8d);

    position: relative;

    overflow: hidden;


}

.media-hero::before {


    content: "";

    position: absolute;

    width: 600px;
    height: 600px;

    top: -250px;
    right: -200px;

    border-radius: 50%;

    background:
        radial-gradient(circle,
            rgba(56, 189, 248, .25),
            transparent 70%);


}

.media-content {


    position: relative;
    z-index: 2;

    max-width: 900px;


}

.media-badge {


    display: inline-block;

    padding: 10px 22px;

    border-radius: 999px;

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

    color: white;

    margin-bottom: 20px;


}

.media-content h1 {


    color: white;

    font-size: 4rem;

    margin-bottom: 25px;


}

.media-content p {


    color:
        rgba(255, 255, 255, .8);

    font-size: 1.2rem;


}

.videos-section {


    padding: 100px 8%;

    display: grid;

    gap: 40px;


}

.video-card {


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

    backdrop-filter: blur(15px);

    border-radius: 25px;

    overflow: hidden;

    transition: .4s;

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


}

.video-card:hover {


    transform:
        translateY(-8px);

    box-shadow:
        0 20px 40px rgba(56, 189, 248, .2);


}

.video-wrapper {


    width: 100%;

    aspect-ratio: 16/9;

    background: #000;


}

.video-wrapper video {


    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;


}

.video-content {


    padding: 30px;


}

.video-content h3 {


    margin-bottom: 15px;

    color: #2563eb;


}

.video-content p {


    line-height: 2;


}

@media(max-width:768px) {


    .media-content h1 {

        font-size: 2.5rem;
    }


}