/* ============================
   RESPONSIVE.CSS — NYXELMOVIES THEME
   PART 1 — Extra Large Screens
=============================== */

/* 1) >= 1800px */
@media only screen and (min-width: 1800px) {
    .container {
        max-width: 1720px;
    }
}

/* 2) >= 1600px */
@media only screen and (min-width: 1600px) {
    .header-right .nav-btn {
        background: linear-gradient(135deg,#3a0ca3,#7209b7,#4361ee);
        color: #ffffff;
        border-radius: 10px;
        padding: 10px 26px;
        font-family: 'Nunito', sans-serif;
        font-weight: 700;
        transition: 0.35s ease;
        box-shadow: 0 0 14px rgba(123, 92, 255, 0.45);
    }

    .header-right .nav-btn:hover {
        box-shadow: 0 0 20px rgba(123,92,255,0.75);
        transform: translateY(-2px);
    }
}

/* 3) <= 1500px */
@media only screen and (max-width: 1500px) {
    .navbar-wrap ul li a {
        font-family: 'Inter', sans-serif;
        color: #e6e6f0;
        transition: .3s;
    }
    .navbar-wrap ul li a:hover {
        color: #c1b0ff;
        text-shadow: 0 0 8px rgba(120,92,255,0.55);
    }

    .header-sticky.sticky-menu {
        background: rgba(15,17,23,0.95);
        box-shadow: 0 4px 24px rgba(0,0,0,0.55);
        backdrop-filter: blur(8px);
    }
}

/* 4) <= 1400px */
@media only screen and (max-width: 1400px) {
    .banner-content .title {
        font-family: 'Orbitron', sans-serif;
        color: #ffffff;
        text-shadow: 0 0 12px rgba(120,92,255,0.35);
    }

    .banner-btn {
        background: rgba(71,46,148,0.22);
        border: 2px solid #8e71ff;
        color: #fff;
        font-family: 'Nunito', sans-serif;
        box-shadow: 0 0 12px rgba(123,92,255,0.35);
    }

    .banner-btn:hover {
        background: linear-gradient(135deg,#3a0ca3,#7209b7,#4361ee);
        border-color: transparent;
        box-shadow: 0 0 20px rgba(123,92,255,0.75);
    }
}

/* 5) <= 1366px */
@media only screen and (max-width: 1366px) {
    .navbar-wrap ul li {
        margin: 0 10px;
    }

    .banner-content .sub-title {
        color: #9f8bff;
        font-family: 'Inter', sans-serif;
    }

    .banner-meta ul li {
        color: #d1d4df;
        font-family: 'Inter', sans-serif;
    }
}


/* ============================
   RESPONSIVE.CSS — NYXELMOVIES THEME
   PART 2 — Laptop & Tablet Widths
=============================== */

/* 6) <= 1199px */
@media only screen and (max-width: 1199px) {

    .navbar-wrap ul li a {
        font-family: 'Inter', sans-serif;
        color: #e4e4ef;
    }

    .header-action > ul > li.sidebar-toggle-btn {
        border: 1px solid #373a47;
        background: rgba(25,27,35,0.75);
        color: #cfcfed;
        border-radius: 10px;
        transition: .3s;
    }

    .header-action > ul > li.sidebar-toggle-btn:hover {
        background: linear-gradient(135deg,#3a0ca3,#7209b7,#4361ee);
        border-color: transparent;
        color: #fff;
        box-shadow: 0 0 14px rgba(123,92,255,0.55);
    }

    .banner-content .title {
        font-family: 'Orbitron', sans-serif;
        font-size: 48px;
        line-height: 1.2;
        text-shadow: 0 0 12px rgba(123,92,255,0.35);
    }
}

/* 7) <= 1024px */
@media only screen and (max-width: 1024px) {

    .banner-content .title {
        font-size: 42px;
    }

    .banner-btn {
        font-family: 'Nunito', sans-serif;
        padding: 12px 32px;
        border: 2px solid #8e71ff;
        background: rgba(71,46,148,0.22);
    }

    .banner-content .sub-title {
        color: #a38cff;
        font-family: 'Inter', sans-serif;
    }

    .movie-item,
    .top-movie-item,
    .tv-series-item {
        border-radius: 12px;
        background: rgba(18,18,25,0.55);
        border: 1px solid #2f313a;
    }
}

/* 8) <= 991px  (Tablet Portrait) */
@media only screen and (max-width: 991px) {

    /* MOBILE MENU */
    .menu-nav {
        background: rgba(15,17,23,0.95);
        backdrop-filter: blur(10px);
        box-shadow: 0 8px 24px rgba(0,0,0,0.55);
    }

    .menu-nav ul li a {
        font-family: 'Inter', sans-serif;
        font-size: 16px;
        color: #d8d9e5;
        transition: .25s;
    }

    .menu-nav ul li a:hover {
        color: #c7b8ff;
        text-shadow: 0 0 10px rgba(120,92,255,0.55);
    }

    .header-action > ul > li.sidebar-toggle-btn {
        background: rgba(20,22,30,0.75);
        border: 1px solid #343446;
        box-shadow: 0 0 12px rgba(0,0,0,0.35);
    }

    /* BANNER TEXT */
    .banner-content {
        text-align: center;
    }
    .banner-content .title {
        font-size: 38px;
    }
    .banner-meta ul {
        justify-content: center;
    }
    .banner-btn {
        margin: auto;
    }

    /* MOVIE ITEMS GRID */
    .movie-item,
    .top-movie-item,
    .tv-series-item {
        background: rgba(18,18,25,0.65);
        border-radius: 14px;
        border: 1px solid #2d2f38;
    }

    .movie-content .title,
    .top-movie-content .title,
    .tv-series-content .title {
        font-family: 'Orbitron', sans-serif;
        color: #fff;
    }
}

/* 9) <= 900px  */
@media only screen and (max-width: 900px) {

    .banner-content .title {
        font-size: 34px;
    }

    .banner-content .sub-title {
        font-size: 16px;
        color: #9f8bff;
    }

    .section-title .title {
        font-family: 'Orbitron', sans-serif;
        font-size: 30px;
        color: #ffffff;
    }

    /* Buttons consistency */
    .banner-btn,
    .watch-btn,
    .pricing-btn,
    .popup-video.btn {
        font-family: 'Nunito', sans-serif;
        border-radius: 35px;
        background: rgba(71,46,148,0.2);
        border: 2px solid #8e71ff;
    }
}


/* ============================
   RESPONSIVE.CSS — NYXELMOVIES THEME
   PART 3 — Core Mobile Layout
=============================== */

/* 10) <= 768px */
@media only screen and (max-width: 768px) {

    /* MOBILE MENU (Dark + blur) */
    .menu-nav {
        background: rgba(10,12,18,0.95);
        backdrop-filter: blur(12px);
        border-left: 1px solid rgba(135,112,255,0.2);
    }

    .menu-nav ul li a {
        font-family: 'Inter', sans-serif;
        color: #e0e0f1;
        font-size: 18px;
        padding: 14px 0;
        display: block;
    }

    .menu-nav ul li a:hover {
        color: #c8b7ff;
        text-shadow: 0 0 10px rgba(120,92,255,0.55);
    }

    /* LOGO */
    .mobile-logo img {
        max-width: 150px;
        filter: drop-shadow(0 4px 10px rgba(0,0,0,0.4));
    }

    /* BANNER */
    .banner-content .title {
        font-family: 'Orbitron', sans-serif;
        font-size: 30px;
        text-shadow: 0 0 10px rgba(123,92,255,0.35);
    }

    .banner-btn {
        font-family: 'Nunito', sans-serif;
        background: rgba(71,46,148,0.25);
        border: 2px solid #8e71ff;
        padding: 12px 30px;
        margin-top: 15px;
    }

    /* SECTION TITLE */
    .section-title .title {
        font-family: 'Orbitron', sans-serif;
        font-size: 28px;
    }

    /* MOVIE ITEMS */
    .movie-item,
    .top-movie-item,
    .tv-series-item {
        border-radius: 16px;
        border: 1px solid #2d2f38;
        box-shadow: 0 8px 20px rgba(0,0,0,0.45);
    }

    .movie-content .title,
    .top-movie-content .title,
    .tv-series-content .title {
        font-size: 16px;
        font-family: 'Orbitron', sans-serif;
        color: #ffffff;
    }

    /* META */
    .movie-meta,
    .banner-meta ul li {
        font-family: 'Inter', sans-serif;
        color: #d5d6e6;
    }
}

/* 11) <= 767px (bootstrap mobile breakpoint) */
@media only screen and (max-width: 767px) {

    /* CONTACT FORM */
    .contact-form {
        background: rgba(20,22,30,0.75);
        border: 1px solid #343446;
        padding: 30px 22px;
        border-radius: 12px;
        box-shadow: 0 10px 26px rgba(0,0,0,0.45);
    }

    .contact-form input,
    .contact-form textarea {
        font-family: 'Inter', sans-serif;
        background: rgba(25,27,35,0.85);
        color: #ffffff;
    }

    /* NEWSLETTER */
    .newsletter-form input {
        background: rgba(20,22,30,0.75);
        border: 1px solid #343446;
        color: #ffffff;
    }

    .newsletter-form button {
        font-family: 'Nunito', sans-serif;
        background: rgba(71,46,148,0.22);
        border: 2px solid #8e71ff;
    }

    /* FOOTER */
    .footer-widget .fw-title h5 {
        font-family: 'Orbitron', sans-serif;
        font-size: 18px;
    }
}

/* 12) <= 600px */
@media only screen and (max-width: 600px) {

    .banner-content .title {
        font-size: 26px;
    }

    .banner-content .sub-title {
        font-size: 15px;
        color: #a38cff;
    }

    /* BUTTONS */
    .banner-btn,
    .pricing-btn,
    .watch-btn {
        font-family: 'Nunito', sans-serif;
        padding: 10px 26px;
    }

    /* CAST IMAGES */
    .movie-details-cast ul li img {
        width: 60px;
        height: 60px;
    }
}

/* 13) <= 575px */
@media only screen and (max-width: 575px) {

    /* TEXT ADJUSTMENTS */
    p,
    .movie-content p,
    .blog-post-content p {
        font-size: 14px;
        line-height: 24px;
        font-family: 'Inter', sans-serif;
    }

    /* TITLES */
    .section-title .title {
        font-size: 24px;
    }

    /* POSTER ROUNDNESS */
    .movie-item .movie-poster img,
    .top-movie-item .top-movie-poster img,
    .tv-series-item .tv-series-poster img {
        border-radius: 12px;
    }

    /* OVERLAYS */
    .gallery-item .gallery-overlay {
        background: linear-gradient(
            135deg,
            rgba(58,12,163,0.35),
            rgba(114,9,183,0.35),
            rgba(67,97,238,0.35)
        );
    }
}

/* 14) <= 480px */
@media only screen and (max-width: 480px) {

    /* BANNER */
    .banner-content .title {
        font-size: 22px;
    }

    /* BUTTON */
    .banner-btn {
        font-size: 14px;
        padding: 10px 24px;
    }

    /* MOVIE META TEXT SIZE */
    .movie-content .bottom ul li span {
        font-size: 12px;
    }

    /* CONTACT FORM */
    .contact-form button {
        font-size: 14px;
        padding: 12px 20px;
    }

    /* FOOTER LOGO */
    .footer-logo img {
        max-width: 120px;
    }
}


/* ============================
   RESPONSIVE.CSS — NYXELMOVIES THEME
   PART 4 — Mini Mobile Phones
=============================== */

/* 15) <= 420px */
@media only screen and (max-width: 420px) {

    .banner-content .title {
        font-size: 20px;
        line-height: 1.25;
    }

    .banner-content .sub-title {
        font-family: 'Inter', sans-serif;
        font-size: 14px;
        color: #a38cff;
    }

    .banner-btn {
        font-family: 'Nunito', sans-serif;
        padding: 10px 20px;
        font-size: 14px;
        border: 2px solid #8e71ff;
        background: rgba(71,46,148,0.22);
    }

    /* Movie Card Title */
    .movie-content .top .title {
        font-size: 14px;
    }

    .section-title .title {
        font-family: 'Orbitron', sans-serif;
        font-size: 22px;
    }

    /* Footer link sizing */
    .footer-widget .fw-links ul li a {
        font-size: 13px;
    }
}

/* 16) <= 400px */
@media only screen and (max-width: 400px) {

    .movie-details-content .title {
        font-size: 26px;
        line-height: 1.25;
        color: #fff;
        font-family: 'Orbitron';
    }

    .movie-details-btn .watch-btn {
        font-size: 14px;
        padding: 10px 24px;
    }

    .movie-details-btn .favorite-btn {
        font-size: 13px;
        padding: 10px 20px;
    }

    .movie-details-cast ul li img {
        width: 55px;
        height: 55px;
    }

    .contact-form input,
    .contact-form textarea {
        padding: 12px 14px;
        font-size: 14px;
        font-family: 'Inter';
    }
}

/* 17) <= 380px */
@media only screen and (max-width: 380px) {

    .header-action > ul > li.sidebar-toggle-btn {
        padding: 8px;
        border-radius: 8px;
        background: rgba(20,22,30,0.75);
        border: 1px solid #343446;
    }

    .banner-content .title {
        font-size: 19px;
    }

    .banner-meta ul li {
        font-size: 12px;
        font-family: 'Inter';
    }

    .movie-content .bottom ul li span {
        font-size: 11px;
    }

    .blog-post-content .title {
        font-size: 18px;
    }

    .footer-bottom p {
        font-size: 12px;
    }
}

/* 18) <= 360px */
@media only screen and (max-width: 360px) {

    .banner-btn {
        padding: 8px 18px;
        font-size: 13px;
        border-radius: 30px;
        border: 1px solid #7b5cff;
    }

    .movie-item,
    .top-movie-item,
    .tv-series-item {
        border-radius: 12px;
    }

    .movie-content .top .title {
        font-size: 13px;
    }

    .movie-content .bottom ul li span {
        font-size: 10px;
    }

    /* Newsletter button */
    .newsletter-form button {
        padding: 10px 20px;
        font-size: 14px;
        font-family: 'Nunito';
    }

    /* Contact Button */
    .contact-form button {
        padding: 10px 18px;
        font-size: 14px;
    }
}

/* 19) <= 320px  (smallest supported smartphone size) */
@media only screen and (max-width: 320px) {

    .banner-content .title {
        font-size: 18px;
        line-height: 1.25;
    }

    .banner-content .sub-title {
        font-size: 13px;
    }

    .banner-btn {
        font-size: 12px;
        padding: 8px 16px;
    }

    .section-title .title {
        font-size: 20px;
    }

    .movie-content .top .title {
        font-size: 12px;
    }

    .movie-details-content .title {
        font-size: 22px;
    }

    .footer-logo img {
        max-width: 110px;
    }
}








/* =====================================
   MOBILE RESPONSIVE CSS
   Target: phones & small tablets
   ===================================== */

@media (max-width: 991px) {

    /* ---------- GLOBAL ---------- */
    body {
        font-size: 14px;
        line-height: 1.6;
    }

    section {
        padding: 40px 0;
    }

    h1, h2, h3 {
        line-height: 1.3;
    }

    /* ---------- HEADER ---------- */
    .menu-area {
        padding: 10px 0;
    }

    .menu-nav {
        flex-direction: row;
    }

    .logo img {
        max-height: 36px;
    }

    .navbar-wrap {
        display: none !important;
    }

    /* Mobile menu icon */
    .mobile-nav-toggler {
        display: block;
        font-size: 22px;
        color: #fff;
    }

    /* ---------- HERO / BANNER ---------- */
    .banner-content h2 {
        font-size: 28px;
    }

    .banner-content p {
        font-size: 14px;
    }

    .banner-btn .btn {
        padding: 10px 18px;
        font-size: 14px;
    }

    /* ---------- MOVIE GRID ---------- */
    .movie-item,
    .movie-card {
        margin-bottom: 20px;
    }

    .movie-thumb {
        border-radius: 12px;
        overflow: hidden;
    }

    /* 2:3 ratio posters */
    .movie-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* ---------- MOVIE DETAILS CARD ---------- */
    .movie-details-img {
        margin-bottom: 20px;
    }

    .movie-details-content h3 {
        font-size: 20px;
    }

    .movie-details-info li {
        font-size: 14px;
    }

    /* ---------- PLAY BUTTON ---------- */
    .play-btn {
        font-size: 32px;
    }

    /* ---------- TV SHOW GRID ---------- */
    .tv-show-item {
        margin-bottom: 20px;
    }

    /* ---------- SERVICES / LIVE ---------- */
    .services-content-wrap,
    .live-movie-content {
        margin-top: 20px;
    }

    .services-img-wrap img,
    .live-movie-img img {
        width: 100%;
        border-radius: 12px;
    }

    /* ---------- FORMS ---------- */
    input,
    textarea {
        font-size: 14px;
        padding: 10px 12px;
    }

    .btn {
        font-size: 14px;
        padding: 10px 16px;
    }

    /* ---------- FOOTER ---------- */
    .footer-menu-wrap,
    .footer-quick-link-wrap {
        text-align: center;
    }

    .footer-social ul {
        justify-content: center;
    }

    .footer-social ul li {
        margin: 0 8px;
    }

}

/* =====================================
   EXTRA SMALL PHONES (≤576px)
   ===================================== */

@media (max-width: 576px) {

    /* Headings */
    h2 {
        font-size: 22px;
    }

    h3 {
        font-size: 18px;
    }

    /* Movie titles */
    .movie-content .title {
        font-size: 15px;
    }

    /* Grid spacing */
    .row > [class*="col-"] {
        margin-bottom: 15px;
    }

    /* Pagination */
    .pagination-wrap ul {
        flex-wrap: wrap;
        gap: 6px;
    }

    /* Popup video */
    .mfp-content {
        width: 95% !important;
    }
}