/* INDEX PAGE */
.hero{position:relative;height:100vh;overflow:hidden}
.hero video{position:absolute;width:110%;height:110%;object-fit:cover;top:-5%;left:-5%;transition:transform .2s linear}
.overlay{position:absolute;width:100%;height:100%;background:rgba(0,0,0,.5)}
.hero-content{position:relative;z-index:2;height:100%;display:flex;align-items:center;justify-content:center;text-align:center;flex-direction:column}
.hero h1{font-size:120px;letter-spacing:5px}
.hero p{margin-top:20px;font-size:18px;opacity:.8}

.section{padding:50px 10%;text-align:center}
.section h2{font-size:40px;margin-bottom:20px}
.section p{max-width:600px;margin:auto;opacity:.7}

.image-block{height:80vh;background-size:cover;background-position:center;position:relative;background-attachment:fixed}
.image-block::after{content:"";position:absolute;width:100%;height:100%;background:rgba(0,0,0,.4)}

.carousel{position:relative;padding:20px 0;overflow:hidden}
.carousel-viewport{overflow:hidden;width:100%}
.carousel-track{display:flex;gap:10px;will-change:transform}
.carousel-item{min-width:320px;height:380px;background:#fff;border-radius:20px;overflow:hidden;flex-shrink:0;transition:transform .4s ease, opacity .4s ease}
.carousel-item img{width:100%;height:100%;object-fit:cover}

.carousel-item.center{opacity:1}
.carousel-item.side{transform:scale(.9);opacity:.6}

.carousel-btn{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,0.08);border:none;cursor:pointer;padding:12px;border-radius:50%;backdrop-filter:blur(5px)}
.carousel-btn svg{width:22px;height:22px;fill:#fff}
.carousel-btn.left{left:20px}
.carousel-btn.right{right:20px}

.popular-grid{display:flex;justify-content:center;gap:40px;flex-wrap:wrap}

.popular-item{position:relative;width:380px;overflow:hidden;border-radius:40px; aspect-ratio: 5/6;}

.popular-item img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}

.popular-item span{position:absolute;bottom:20px;left:0;padding:5px 10px;font-size:32px;font-weight:bold;color:#fff;background:#000;opacity:50%;letter-spacing:2px}

.popular-item:hover img{transform:scale(1.1)}

.carousel-item{position:relative}
.carousel-item .view-btn{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:rgba(0,0,0,0.8);color:#fff;padding:10px 20px;border-radius:5px;text-decoration:none;opacity:0;transition:opacity .3s}
.carousel-item:hover .view-btn{opacity:1}

.popular-item .view-btn{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:rgba(0,0,0,0.8);color:#fff;padding:10px 20px;border-radius:5px;text-decoration:none;opacity:0;transition:opacity .3s}
.popular-item:hover .view-btn{opacity:1}

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

/* Tablet (768px - 1024px) */
@media (max-width: 1024px) {
    .hero h1 {
        font-size: 80px;
    }

    .section {
        padding: 40px 5%;
    }

    .section h2 {
        font-size: 32px;
    }

    .image-block {
        height: 40vh;
        background-position: center center;
        background-attachment: scroll;
    }

    .carousel-item {
        min-width: 280px;
        height: 340px;
    }

    .popular-grid {
        gap: 20px;
    }

    .popular-item {
        width: 300px;
    }

    .popular-item span {
        font-size: 24px;
    }
}

/* Mobile (max-width 767px) */
@media (max-width: 767px) {
    .hero {
        height: 40vh;
    }

    .hero h1 {
        font-size: 40px;
        letter-spacing: 2px;
    }

    .hero p {
        font-size: 14px;
    }

    .section {
        padding: 30px 5%;
    }

    .section h2 {
        font-size: 24px;
        margin-bottom: 15px;
    }

    .section p {
        font-size: 14px;
    }

    .image-block {
        height: 40vh;
        background-position: center center;
        background-attachment: scroll;
    }

    /* Carousel */
    .carousel {
        padding: 15px 0;
    }

    .carousel-item {
        min-width: 220px;
        height: 264px;
        aspect-ratio: 5 / 6;
    }

    .carousel-btn {
        padding: 8px;
    }

    .carousel-btn svg {
        width: 16px;
        height: 16px;
    }

    .carousel-btn.left {
        left: 10px;
    }

    .carousel-btn.right {
        right: 10px;
    }

    /* Popular Grid */
    .popular-grid {
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }

    .popular-item {
        width: 100%;
        max-width: 300px;
    }

    .popular-item span {
        font-size: 20px;
        bottom: 15px;
        left: 10px;
    }

    .view-btn {
        padding: 8px 16px !important;
        font-size: 12px;
    }
}