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

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


html {
    scroll-behavior: smooth;
}


body {
    width: 100%;
    min-height: 100vh;

    overflow-x: hidden;

    background: #0c0809;

    color: #ffffff;

    font-family:
        Arial,
        Helvetica,
        sans-serif;
}



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

.header {

    width: 100%;
    min-height: 88px;

    padding: 15px 6%;

    display: flex;

    align-items: center;

    justify-content: space-between;

    background: #0d090a;

    border-bottom:
        1px solid #292326;
}


.logo-area {

    display: flex;

    align-items: center;

    gap: 13px;
}


.logo {

    width: 52px;
    height: 52px;

    display: flex;

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

    background: #f34f6b;

    border-radius: 15px;

    font-size: 21px;

    font-weight: 700;
}


.site-name {

    font-size: 28px;

    font-weight: 700;

    letter-spacing: -1px;
}


.header-btn {

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 14px 28px;

    border-radius: 30px;

    background: #f34f6b;

    color: #ffffff;

    text-decoration: none;

    font-size: 16px;

    font-weight: 700;

    transition: 0.3s;
}


.header-btn:hover {

    background: #ff6b82;

    transform: translateY(-2px);
}



/* =========================================
   HERO
========================================= */

.hero {

    width: min(1100px, 92%);

    margin: 50px auto 20px;
}


.announcement {

    width: 100%;

    padding: 17px 25px;

    border:
        1px solid #3a3033;

    border-radius: 50px;

    background: #191416;

    color: #bdb7b9;

    text-align: center;

    font-size: 18px;

    line-height: 1.5;
}


.dot {

    display: inline-block;

    width: 10px;
    height: 10px;

    margin-right: 12px;

    border-radius: 50%;

    background: #f35a74;
}


.hero-title {

    margin-top: 35px;

    text-align: center;

    font-size: 29px;

    line-height: 1.3;
}



/* =========================================
   MAIN CONTAINER
========================================= */

.container {

    width: min(1100px, 92%);

    margin: 65px auto;
}


.small-title {

    margin-bottom: 12px;

    color: #f15b73;

    font-size: 15px;

    font-weight: 700;

    letter-spacing: 6px;
}


.section-title {

    margin-bottom: 35px;

    font-size: 37px;

    line-height: 1.2;
}



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

.video-grid {

    width: 100%;

    display: grid;

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

    gap: 25px;
}



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

.video-card {

    overflow: hidden;

    border:
        1px solid #282124;

    border-radius: 20px;

    background: #151011;

    transition: 0.3s;
}


.video-card:hover {

    transform: translateY(-7px);

    border-color: #f04f68;

    box-shadow:
        0 12px 35px
        rgba(243, 79, 107, 0.13);
}



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

.image-box {

    width: 100%;

    aspect-ratio: 4 / 3;

    position: relative;

    overflow: hidden;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #211b1d;
}


.image-box::before {

    content: "IMAGE";

    color: #625a5d;

    font-size: 15px;

    letter-spacing: 4px;
}


.image-box img {

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;
}



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

.play-button {

    position: absolute;

    z-index: 2;

    width: 65px;
    height: 65px;

    display: flex;

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

    border:
        2px solid #ffffff;

    border-radius: 50%;

    background:
        rgba(0, 0, 0, 0.65);

    font-size: 25px;

    padding-left: 4px;
}



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

.card-content {

    padding: 18px;
}


.card-title {

    margin-bottom: 15px;

    color: #eeeeee;

    font-size: 18px;

    font-weight: 700;

    line-height: 1.4;
}


.watch-btn {

    width: 100%;

    min-height: 45px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 10px 15px;

    border-radius: 10px;

    background: #f04f68;

    color: #ffffff;

    text-decoration: none;

    font-size: 15px;

    font-weight: 700;

    transition: 0.3s;
}


.watch-btn:hover {

    background: #ff6980;
}



/* =========================================
   WATCH MORE
========================================= */

.more-section {

    margin-top: 45px;

    display: flex;

    justify-content: center;
}


.watch-more {

    display: flex;

    align-items: center;

    justify-content: center;

    min-height: 48px;

    padding: 0 38px;

    border-radius: 30px;

    background: #f04f68;

    color: #ffffff;

    text-decoration: none;

    font-size: 16px;

    font-weight: 700;

    transition: 0.3s;
}


.watch-more:hover {

    background: #ff6980;

    transform: translateY(-3px);
}



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

.footer {

    width: 100%;

    margin-top: 80px;

    padding:
        55px 6% 25px;

    background: #120d0f;

    border-top:
        1px solid #2b2426;
}


.footer-container {

    width: min(1100px, 100%);

    margin: auto;

    display: grid;

    grid-template-columns:
        2fr 1fr 1fr;

    gap: 40px;
}


.footer-logo {

    margin-bottom: 15px;

    font-size: 28px;

    font-weight: 700;
}


.footer-logo span {

    color: #f04f68;
}


.footer-text {

    max-width: 430px;

    color: #999999;

    font-size: 15px;

    line-height: 1.7;
}


.footer-title {

    margin-bottom: 18px;

    font-size: 17px;
}


.footer-links {

    list-style: none;
}


.footer-links li {

    margin-bottom: 12px;
}


.footer-links a {

    color: #999999;

    text-decoration: none;

    font-size: 15px;

    transition: 0.2s;
}


.footer-links a:hover {

    color: #f04f68;
}


.copyright {

    width: min(1100px, 100%);

    margin: 40px auto 0;

    padding-top: 20px;

    border-top:
        1px solid #292326;

    color: #666666;

    text-align: center;

    font-size: 13px;

    line-height: 1.6;
}