body {
  background-color: black
}


/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%
}

body {
  margin: 0
}

h1 {
  font-size: 2em;
  margin: 0.67em 0
}

a {
  background-color: transparent
}

img {
  border-style: none
}

button,
input {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0
}

button,
input {
  overflow: visible
}

button {
  text-transform: none
}

button,
[type="button"] {
  -webkit-appearance: button
}

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner {
  border-style: none;
  padding: 0
}

button:-moz-focusring,
[type="button"]:-moz-focusring {
  outline: 1px dotted ButtonText
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit
}

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box
}

html {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #545454
}

@media (max-width: 1023px) {
  html {
    height: 100%
  }
}

@media (max-width: 1023px) {
  body {
    height: 100%
  }
}

h1,
h2,
h3,
p {
  margin: 0
}

ul {
  list-style: none;
  margin: 0;
  padding: 0
}

[tabindex="-1"]:focus {
  outline: none !important
}


@-moz-document url-prefix() {}

.e-modal__section.-height-scroll::-webkit-scrollbar:vertical,
.-height-scroll.e-modal__footer::-webkit-scrollbar:vertical,
.-height-scroll.e-modal__header::-webkit-scrollbar:vertical {
  width: 11px
}

.e-modal__section.-height-scroll::-webkit-scrollbar:horizontal,
.-height-scroll.e-modal__footer::-webkit-scrollbar:horizontal,
.-height-scroll.e-modal__header::-webkit-scrollbar:horizontal {
  height: 11px
}

.modal__body.-height-scroll::-webkit-scrollbar:vertical {
  width: 11px
}

.modal__body.-height-scroll::-webkit-scrollbar:horizontal {
  height: 11px
}

.footer-bottom {
  clear: both;
  padding-bottom: 16px;
  text-align: center
}

@media (min-width: 1024px) {
  .footer-bottom {
    padding-bottom: 0;
    padding-top: 24px;
    text-align: left
  }
}

@supports (background-blend-mode: overlay) {}

@supports (background-blend-mode: multiply) {}

.page__off-canvas--right::-webkit-scrollbar:vertical,
.page__off-canvas--left::-webkit-scrollbar:vertical {
  width: 11px
}

.page__off-canvas--right::-webkit-scrollbar:horizontal,
.page__off-canvas--left::-webkit-scrollbar:horizontal {
  height: 11px
}

@font-face {
  font-family: "marketplace-glyphs";
  src: url(/assets/marketplace-glyphs/marketplace-glyphs-e72c235d8798e8242163d10f68f4eaa9d6919c4689c705a6c30fe80cf3d4ff9d.eot);
  src: url(/assets/marketplace-glyphs/marketplace-glyphs-e72c235d8798e8242163d10f68f4eaa9d6919c4689c705a6c30fe80cf3d4ff9d.eot?#iefix) format("embedded-opentype"), url(/assets/marketplace-glyphs/marketplace-glyphs-85cc828ca8d675d6613f41b266689cea348332a12f6966cbe08583f16f208a40.woff) format("woff"), url(/assets/marketplace-glyphs/marketplace-glyphs-b94c8b32d03aa7203117cb403f5ad0a09e621925822c3eec0c404e13e0408ea2.ttf) format("truetype"), url(/assets/marketplace-glyphs/marketplace-glyphs-497c4a115add7b2c6b95117c155d0f698e5e26954c4b49217034ad39ee66d743.svg#marketplace-glyphs) format("svg");
  font-weight: normal;
  font-style: normal
}


button {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background-color: gray;
  border: none;
  border-radius: 4px;
  color: white;
  cursor: pointer;
  display: inline-block;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
  padding: 5px 20px;
  text-align: center;
  text-decoration: none
}

button:hover,
button:focus {
  background-color: #0084B4;
  text-decoration: none;
  outline: none
}

button:active {
  background-color: #00719b
}

button::-moz-focus-inner {
  padding: 0;
  border: 0
}



.zmdi {
  display: inline-block;
  font: normal normal normal 14px/1 'Material-Design-Iconic-Font';
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale
}

.zmdi-close:before {
  content: '\f136'
}

.zmdi-favorite:before {
  content: '\f15f'
}

.zmdi-search:before {
  content: '\f1c3'
}

.zmdi-plus:before {
  content: '\f278'
}

.zmdi-chevron-left:before {
  content: '\f2fa'
}

.zmdi-chevron-right:before {
  content: '\f2fb'
}

.zmdi-long-arrow-up:before {
  content: '\f303'
}

.zmdi-facebook:before {
  content: '\f343'
}

.zmdi-instagram:before {
  content: '\f34f'
}

.zmdi-twitter:before {
  content: '\f360'
}

.zmdi-linkedin:before {
  content: '\f3f8'
}

.zmdi-close:before {
  content: '\f136'
}

.zmdi-favorite:before {
  content: '\f15f'
}

.zmdi-search:before {
  content: '\f1c3'
}

.zmdi-plus:before {
  content: '\f278'
}

.zmdi-chevron-left:before {
  content: '\f2fa'
}

.zmdi-chevron-right:before {
  content: '\f2fb'
}

.zmdi-long-arrow-up:before {
  content: '\f303'
}

.zmdi-facebook:before {
  content: '\f343'
}

.zmdi-instagram:before {
  content: '\f34f'
}

.zmdi-twitter:before {
  content: '\f360'
}

.zmdi-linkedin:before {
  content: '\f3f8'
}




/*!
 * 
 *         SimpleBar.js - v2.6.1
 *         Scrollbars, simpler.
 *         https://grsmto.github.io/simplebar/
 *         
 *         Made by Adrien Grsmto from a fork by Jonathan Nicol
 *         Under MIT License
 *       
 */





/*--
    - Slick Slider css
-----------------------------------*/

/* Slick SliderVersion: 1.8.1Author: Ken WheelerWebsite: http://kenwheeler.github.ioDocs: http://kenwheeler.github.io/slickRepo: http://github.com/kenwheeler/slickIssues: http://github.com/kenwheeler/slick/issues*/

.slick-slider {
  position: relative;
  display: block;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -khtml-user-select: none;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent
}

.slick-list {
  position: relative;
  display: block;
  overflow: hidden;
  margin: 0;
  padding: 0
}

.slick-list:focus {
  outline: none
}

.slick-slider .slick-track,
.slick-slider .slick-list {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0)
}

.slick-track {
  position: relative;
  top: 0;
  left: 0;
  display: block;
  margin-left: auto;
  margin-right: auto
}

.slick-track:before,
.slick-track:after {
  display: table;
  content: ''
}

.slick-track:after {
  clear: both
}

.slick-slide {
  display: none;
  float: left;
  height: 100%;
  min-height: 1px
}

.slick-slide img {
  display: block
}

.slick-initialized .slick-slide {
  display: block
}



/*--
/*--
    - Magnific Popup Css
-----------------------------------*/

/*! Magnific Popup - v1.1.0 - 2016-02-20
* http://dimsemenov.com/plugins/magnific-popup/
* Copyright (c) 2016 Dmitry Semenov; */
button::-moz-focus-inner {
  padding: 0;
  border: 0
}




/*--
    - cssanimation css
---------------------------*/




/*!
Animate.css - http://daneden.me/animate
Licensed under the MIT license

Copyright (c) 2013 Daniel Eden

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

/* ═══════════════════════════════════════════════════════════
   🎬 PREMIUM CINEMA ENHANCEMENTS - PURE CSS ANIMATIONS
   ═══════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────── 
   GLOBAL ENHANCEMENTS
   ─────────────────────────────────────────────────────────── */

body {
  position: relative;
  overflow-x: hidden;
}

/* Subtle grain texture overlay */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image:
    linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.3) 100%),
    url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='2.5' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.03'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 1;
  opacity: 0.6;
}

.main-wrapper {
  position: relative;
  z-index: 2;
}

/* ─────────────────────────────────────────────────────────── 
   HERO SLIDER PREMIUM ANIMATIONS
   ─────────────────────────────────────────────────────────── */

.single-hero-slider-wrap {
  animation: heroFadeIn 1.2s ease-out;
}

@keyframes heroFadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* Background zoom animation */
.single-hero-slider-wrap {
  background-size: cover;
  animation: heroZoom 20s ease-in-out infinite alternate, heroFadeIn 1.2s ease-out;
}

@keyframes heroZoom {
  0% {
    background-size: 100%;
  }

  100% {
    background-size: 108%;
  }
}

/* Hero content slide in from left */
.slider-content-hm4 {
  animation: slideInLeft 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: 0.3s;
  opacity: 0;
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-80px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Title animation */
.slider-content-hm4 .title {
  animation: fadeInUp 0.8s ease forwards;
  animation-delay: 0.5s;
  opacity: 0;
  text-shadow: 0 4px 12px rgba(0, 0, 0, 0.8);
}

/* Subtitle animation */
.sub-title-time-wrap {
  animation: fadeInUp 0.8s ease forwards;
  animation-delay: 0.7s;
  opacity: 0;
}

/* Button animation */
.slider-button {
  animation: fadeInUp 0.8s ease forwards;
  animation-delay: 0.9s;
  opacity: 0;
}

/* Combo price animation */
.slider-content-hm4 .combo-pack-price {
  animation: fadeInUp 0.8s ease forwards;
  animation-delay: 0.8s;
  opacity: 0;
}

/* ─────────────────────────────────────────────────────────── 
   SECTION HEADINGS SLIDE ANIMATION
   ─────────────────────────────────────────────────────────── */

.section-title-4 h2 {
  position: relative;
  display: inline-block;
  animation: slideInRight 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  opacity: 0;
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Animated underline */
.section-title-4 h2::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 0;
  height: 3px;
  background: linear-gradient(90deg, #f4181c, #9c27b0);
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 2px;
  animation: underlineGrow 1.2s ease forwards;
  animation-delay: 0.5s;
}

@keyframes underlineGrow {
  to {
    width: 100%;
  }
}

.section-title-4 h2:hover::after {
  box-shadow: 0 0 20px #f4181c;
}

/* ─────────────────────────────────────────────────────────── 
   MOVIE CARDS PREMIUM HOVER & ANIMATIONS
   ─────────────────────────────────────────────────────────── */

.movie-wrap {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  animation: fadeInUp 0.6s ease forwards;
  opacity: 0;
}

/* Stagger animation for cards */
.movie-wrap-plr:nth-child(1) .movie-wrap {
  animation-delay: 0.1s;
}

.movie-wrap-plr:nth-child(2) .movie-wrap {
  animation-delay: 0.2s;
}

.movie-wrap-plr:nth-child(3) .movie-wrap {
  animation-delay: 0.3s;
}

.movie-wrap-plr:nth-child(4) .movie-wrap {
  animation-delay: 0.4s;
}

.movie-wrap-plr:nth-child(5) .movie-wrap {
  animation-delay: 0.5s;
}

.movie-wrap-plr:nth-child(6) .movie-wrap {
  animation-delay: 0.6s;
}

.movie-wrap-plr:nth-child(7) .movie-wrap {
  animation-delay: 0.7s;
}

/* Enhanced card hover */
.movie-wrap:hover {
  transform: translateY(-12px) scale(1.05);
  box-shadow:
    0 16px 48px rgba(0, 0, 0, 0.8),
    0 0 32px rgba(244, 24, 28, 0.4);
  z-index: 10;
}

/* Image zoom on hover */
.movie-wrap:hover>.movie-img>a>img {
  transform: scale(1.15);
  transition: transform 0.5s ease;
}



/* ─────────────────────────────────────────────────────────── 
   BUTTON ENHANCEMENTS
   ─────────────────────────────────────────────────────────── */

.btn-style-hm4,
.btn-style-hm4-2 {
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 15px rgba(244, 24, 28, 0.4);
  background: linear-gradient(135deg, #f4181c, #b20710);
}

.btn-style-hm4:hover,
.btn-style-hm4-2:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 8px 32px rgba(244, 24, 28, 0.6);
}

.btn-style-hm4:active,
.btn-style-hm4-2:active {
  transform: translateY(-1px) scale(1.02);
}

/* ─────────────────────────────────────────────────────────── 
   SLIDER ARROWS PREMIUM STYLE
   ─────────────────────────────────────────────────────────── */

.nav-style-1 button,
.nav-style-2 button {
  transition: all 0.3s ease;
}




/* ─────────────────────────────────────────────────────────── 
   SCROLL TO TOP BUTTON
   ─────────────────────────────────────────────────────────── */

#scrollUp {
  width: 50px !important;
  height: 50px !important;
  background: linear-gradient(135deg, #f4181c, #b20710) !important;
  border-radius: 50% !important;
  box-shadow: 0 4px 20px rgba(244, 24, 28, 0.5) !important;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
  animation: fadeInUp 0.5s ease;
}

#scrollUp:hover {
  transform: translateY(-5px) scale(1.1) !important;
  box-shadow: 0 8px 32px rgba(244, 24, 28, 0.7) !important;
}

/* ─────────────────────────────────────────────────────────── 
   BANNER HOVER EFFECTS
   ─────────────────────────────────────────────────────────── */

.series-banner-img {
  overflow: hidden;
  border-radius: 20px;
  transition: all 0.4s ease;
}

.series-banner-img:hover {
  transform: scale(1.02);
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.8);
}

.series-banner-img a img {
  transition: transform 0.7s ease;
}

.series-banner-img:hover a img {
  transform: scale(1.05);
}

/* ─────────────────────────────────────────────────────────── 
   MODAL ENHANCEMENTS
   ─────────────────────────────────────────────────────────── */

.pricing-modal,
.checkout-modal,
.video-modal {
  backdrop-filter: blur(12px);
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.pricing-box,
.checkout-box,
.video-box {
  animation: scaleIn 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

@keyframes scaleIn {
  from {
    transform: scale(0.9);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

.pricing-box .title {
  background: linear-gradient(135deg, #f4181c, #9c27b0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.plan {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.plan:hover {
  transform: translateY(-8px);
  border-color: #f4181c;
  box-shadow: 0 12px 40px rgba(244, 24, 28, 0.3);
}

.plan.active {
  border-color: #f4181c;
  box-shadow: 0 12px 40px rgba(244, 24, 28, 0.3);
}

.close-modal,
.close-checkout,
.video-close {
  transition: all 0.3s ease;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
}

.close-modal:hover,
.close-checkout:hover,
.video-close:hover {
  background: #f4181c;
}

/* ─────────────────────────────────────────────────────────── 
   FOOTER ENHANCEMENTS
   ─────────────────────────────────────────────────────────── */

.footer-quicklink ul li a {
  transition: all 0.3s ease;
  position: relative;
}

.footer-quicklink ul li a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: #f4181c;
  transition: width 0.3s ease;
}

.footer-quicklink ul li a:hover::after {
  width: 100%;
}

.social-style-1 a {
  transition: all 0.3s ease;
}

.social-style-1 a:hover {
  transform: translateY(-3px) scale(1.1);
}

/* ─────────────────────────────────────────────────────────── 
   BRAND LOGO ANIMATION
   ─────────────────────────────────────────────────────────── */

.brand-logo {
  transition: all 0.4s ease;
}

.brand-logo:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

/* ─────────────────────────────────────────────────────────── 
   FORM ENHANCEMENTS
   ─────────────────────────────────────────────────────────── */

.checkout-form input {
  transition: all 0.3s ease;
}

.checkout-form input:focus {
  border-color: #2b7fff;
  box-shadow: 0 0 0 3px rgba(43, 127, 255, 0.1);
  transform: translateY(-2px);
}

.pay-btn {
  transition: all 0.3s ease;
}

.pay-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 32px rgba(43, 127, 255, 0.4);
}

.pay-btn:active {
  transform: translateY(-1px) scale(0.98);
}

/* ─────────────────────────────────────────────────────────── 
   HEADER ENHANCEMENTS
   ─────────────────────────────────────────────────────────── */

.main-menu ul>li>a {
  position: relative;
}

.main-menu ul>li>a::after {
  content: '';
  position: absolute;
  bottom: 15px;
  left: 0;
  width: 0;
  height: 2px;
  background: #f4181c;
  transition: width 0.3s ease;
}

.main-menu ul>li:hover>a::after {
  width: 100%;
}

.subscribe-btn {
  transition: all 0.3s ease;
}

.subscribe-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(244, 24, 28, 0.4);
}

/* ─────────────────────────────────────────────────────────── 
   LOADING ANIMATION FOR IMAGES
   ─────────────────────────────────────────────────────────── */

.movie-img img {
  animation: fadeInImage 0.5s ease forwards;
}

@keyframes fadeInImage {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* ═══════════════════════════════════════════════════════════
   END OF PREMIUM CINEMA ENHANCEMENTS
   ═══════════════════════════════════════════════════════════ */

/*-----------------------------------------------------------------------------------

    Version: 2.3

-----------------------------------------------------------------------------------

    CSS INDEX
    =========================================

    01. Theme default CSS
        - Common Classes
        - Section Padding
    02. Element
        - Button Style 
        - Section Title Css
        - Breadcrumb Style
        - Widget Css
        - Paginatoin Css
    03. Mobile Menu Css
    04. Header Css
    05. Hero Slider Css
    06. Feature Css
    07. Choose Area Css
    08. Footer Css
    09. About us Css
    10. Contact css
    11. Faq Style
    12. Pricing Panel Css
    13. Testimonial Css
    14. product Css
    15. Login And Register Page Css
    16. My Account Page Css



-----------------------------------------------------------------------------------*/
/* transition */
/* flex */
/* transform */
/* opacity */
/*----------------------------------------*/
/*  01. Theme default CSS
/*----------------------------------------*/
/*-- Google Font --*/
@import url("https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800,900");

/*-- Common Style --*/
*,
*::after,
*::before {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  background-color: #fff;
  font-family: "Poppins", sans-serif;
  line-height: 28px;
  font-size: 14px;
  font-style: normal;
  font-weight: normal;
  visibility: visible;
  color: #333;
}

h1,
h2,
h3 {
  color: #333333;
  font-weight: 400;
  margin-top: 0;
  font-family: "Poppins", sans-serif;
}

h1 {
  font-size: 72px;
  line-height: 1;
}

h2 {
  font-size: 36px;
  line-height: 1;
}

h3 {
  font-size: 24px;
}

.container-fluid {
  padding-right: var(--bs-gutter-x, 0.9rem);
  padding-left: var(--bs-gutter-x, 0.9rem);
}

.row {
  margin-right: calc(var(--bs-gutter-x) * -.6);
  margin-left: calc(var(--bs-gutter-x) * -.6);
}

.row>* {
  padding-right: calc(var(--bs-gutter-x) * .6);
  padding-left: calc(var(--bs-gutter-x) * .6);
}

@media only screen and (min-width: 1200px) and (max-width: 1600px) {
  h1 {
    font-size: 65px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1200px) {
  h1 {
    font-size: 62px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  h1 {
    font-size: 52px;
  }

  h2 {
    font-size: 26px;
  }

  h3 {
    font-size: 24px;
  }
}

@media only screen and (max-width: 767px) {
  h1 {
    font-size: 37px;
  }

  h2 {
    font-size: 22px;
  }

  h3 {
    font-size: 20px;
  }
}

p:last-child {
  margin-bottom: 0;
}

p {
  font-family: "Poppins", sans-serif;
}

a,
button {
  color: inherit;
  display: inline-block;
  line-height: inherit;
  text-decoration: none;
  cursor: pointer;
}

a,
button,
img,
input,
span {
  -webkit-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

*:focus {
  outline: none !important;
}

a:focus {
  outline: none;
  text-decoration: none;
}

a:hover {
  text-decoration: none;
  color: #0259ae;
}

button {
  cursor: pointer;
}

img {
  max-width: 100%;
  height: auto;
}

ul {
  list-style: outside none none;
  margin: 0;
  padding: 0;
}

/*-- 
    - Common Classes
-----------------------------------------*/

/*-- 
    - Background color
-----------------------------------------*/

.bg-black {
  background-color: #000000;
}

.bg-black-2 {
  background-color: #12222d;
}

/*-- 
    - Input Placeholder
-----------------------------------------*/
input:-moz-placeholder {
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

input::-webkit-input-placeholder {
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

input::-moz-placeholder {
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

input:-ms-input-placeholder {
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

/*-- 
    Scroll Up 
-----------------------------------------*/
#scrollUp {
  width: 40px;
  height: 40px;
  background-color: #0259ae;
  color: #ffffff;
  right: 20px;
  bottom: 60px;
  line-height: 40px;
  text-align: center;
  overflow: hidden;
}

#scrollUp i {
  display: block;
  line-height: 40px;
  font-size: 16px;
}

#scrollUp:hover i {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

/*-- 
    - Main Wrapper
-----------------------------------------*/

/*-- 
    - Section Padding
-------------------------------------*/

.section-pt-50 {
  padding-top: 50px;
}

.section-ptb-50 {
  padding: 50px 0;
}

/*-- Margin top --*/

/*-- Margin Bottom --*/

/*-- Margin Bottom --*/

/*-- Margin Bottom --*/

/*-- padding top --*/

/*-- padding Bottom --*/

/*-- Overlay styles --*/


.section-padding-lr .container-fluid {
  padding: 0 100px;
}

@media only screen and (min-width: 1200px) and (max-width: 1600px) {
  .section-padding-lr .container-fluid {
    padding: 0 50px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .section-padding-lr .container-fluid {
    padding: 0 30px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .section-padding-lr .container-fluid {
    padding: 0 40px;
  }
}

@media only screen and (max-width: 767px) {
  .section-padding-lr .container-fluid {
    padding: 0 15px;
  }
}

.bg-image-hm4 {
  background-position: center center;
  background-size: cover;
}

/*--
    02. Element
-------------------------*/
/*--
    - Button Style
------------------------------------------*/

.btn-style-hm4 {
  color: #ffffff;
  font-weight: 600;
  font-size: 16px;
  border-radius: 5px;
  padding: 11px 25px;
  display: inline-block;
  background-color: #f4181c;
}

@media only screen and (max-width: 767px) {
  .btn-style-hm4 {
    padding: 6px 20px;
  }
}

.btn-style-hm4:hover {
  background-color: #ffffff;
  color: #ffffff;
}

.btn-style-hm4:focus {
  color: #ffffff;
}

.btn-style-hm4-2 {
  padding: 6px 12px;
  border-radius: 4px;
  color: #ffffff;
  background-color: #f4181c;
  display: inline-block;
  line-height: 1;
}

.btn-style-hm4-2:hover {
  background-color: #ffffff;
  color: #ffffff;
}

.member-btn-style {
  display: inline-block;
  color: #ffffff;
  padding: 12px 25px;
  line-height: 1;
  font-size: 16px;
  border-radius: 4px;
  background-color: #f4181c;
}

.member-btn-style:hover {
  color: #f4181c;
  background-color: #ffffff;
}

@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .member-btn-style {
    padding: 12px 20px;
  }
}

/*--
    - Section Title Css
-------------------------------*/

.section-title-4 {
  margin: 0 0 30px;
}

.section-title-4 h2 {
  font-size: 24px;
  color: #ffffff;
  margin: 0;
  font-weight: bold;
  padding: 0 0 15px;
}

@media only screen and (max-width: 767px) {
  .section-title-4 h2 {
    font-size: 22px;
  }
}

.st-border-bottom {
  border-bottom: 1px solid #444;
}

/*--
    - Breadcrumb Style
------------------------------------------*/
/*---- Breadcrumb One ----*/

/*--
    - Widget Css
-------------------------*/

/*--
    - Paginatoin Css
---------------------------------*/

/*-- 
    03. Mobile Menu Css
-------------------------*/
.mobile-menu {
  width: 26px !important;
  height: 18px;
  margin-left: 15px;
}

/*--
    04. Header Css
--------------------------*/

.header-area {
  padding: 22px 0px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .header-area {
    padding: 20px 0px;
  }
}

@media only screen and (max-width: 767px) {
  .header-area {
    padding: 20px 0px;
  }
}

.right-side {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.main-menu {
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.main-menu ul>li {
  display: inline-block;
  color: #ffffff;
  position: relative;
  margin-right: 35px;
}

.main-menu ul>li>a {
  display: block;
  padding: 20px 0;
  color: #ffffff;
}

.main-menu ul>li .sub-menu {
  width: 180px;
  -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
  position: absolute;
  background: #fff;
  padding: 15px;
  z-index: 9;
  top: 120%;
  visibility: hidden;
  opacity: 0;
  -ms-filter: 0;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  border-bottom: 2px solid #0259ae;
}

.main-menu ul>li .sub-menu li {
  display: block;
  margin-right: 0;
  margin-bottom: 8px;
}

.main-menu ul>li .sub-menu li:last-child {
  margin-bottom: 0;
}

.main-menu ul>li .sub-menu li>a {
  display: block;
  padding: 0;
  font-weight: 500;
  text-align: left;
  text-transform: capitalize;
  color: #333;
  font-size: 14px;
}

.main-menu ul>li .sub-menu li>a:hover {
  color: #0259ae;
}

.main-menu ul>li:hover {
  color: #0259ae;
}

.main-menu ul>li:hover .sub-menu {
  visibility: visible;
  opacity: 1;
  -ms-filter: 1;
  top: 100%;
}

.main-menu.main-theme-color-four ul>li .sub-menu {
  border-bottom: 2px solid #f4181c;
}

.main-menu.main-theme-color-four ul>li .sub-menu li>a:hover {
  color: #f4181c;
}

.main-menu.main-theme-color-four ul>li:hover>a {
  color: #f4181c;
}

/*-- Header style home 3 --*/

.our-profile-area {
  margin-left: 15px;
  padding-left: 15px;
  position: relative;
}

.our-profile-area .our-profile-pc {
  min-width: 32px;
  min-height: 32px;
  line-height: 32px;
}

.our-profile-area::before {
  background: #ccc;
  position: absolute;
  content: "";
  left: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  height: 20px;
  width: 1px;
}

.our-profile-area .dropdown-menu {
  -webkit-transform: translate3d(0px, 44px, 0px) !important;
  transform: translate3d(0px, 44px, 0px) !important;
  right: 0;
  background: #ffffff none repeat scroll 0 0;
  border: 1px solid #eaecee;
  border-radius: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
  left: auto !important;
  margin: 0;
  padding: 15px 20px;
  position: absolute;
  text-align: left;
  right: 0 !important;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

.our-profile-area .dropdown-menu li {
  margin-bottom: 3px;
}

.our-profile-area .dropdown-menu li:last-child {
  margin-bottom: 0;
}

.our-profile-area .dropdown-menu li a {
  font-size: 14px;
  display: block;
}

.our-profile-area .dropdown-menu li a:hover {
  color: #ffab00;
}

.our-profile-area .dropdown-menu.red li a:hover {
  color: #f4181c;
}

@media only screen and (max-width: 767px) {
  .our-profile-area .dropdown-menu.netflix-profile-style {
    left: 0 !important;
    right: auto !important;
  }
}

.subscribe-btn {
  border: none;
  color: #fff;
  border-radius: 4px;
  display: inline-block;
  line-height: 1;
  padding: 10px 15px;
  font-weight: 500;
  background-color: #f4181c;
  -webkit-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
  margin-left: 15px;
}

@media only screen and (max-width: 767px) {
  .subscribe-btn {
    padding: 8px 10px 9px;
    font-size: 14px;
  }
}

@media only screen and (max-width: 479px) {
  .subscribe-btn {
    font-size: 12px;
  }
}

.subscribe-btn:hover {
  color: #000000;
  background-color: #ffffff;
}

.header-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: relative;
}

@media only screen and (max-width: 767px) {
  .header-wrap.header-netflix-style {
    display: block;
  }
}

@media only screen and (max-width: 767px) {
  .header-netflix-style .logo-menu-wrap {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }

  .header-netflix-style .right-side {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin: 15px 0 0;
  }
}

.logo-menu-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.logo-menu-wrap .main-menu {
  -webkit-box-pack: inherit;
  -ms-flex-pack: inherit;
  justify-content: inherit;
  display: inherit;
  margin-left: 100px;
}

@media only screen and (min-width: 1200px) and (max-width: 1600px) {
  .logo-menu-wrap .main-menu {
    margin-left: 50px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .logo-menu-wrap .main-menu {
    margin-left: 50px;
  }

  .logo-menu-wrap .main-menu ul li {
    margin-right: 15px;
  }

  .logo-menu-wrap .main-menu ul li:last-child {
    margin-right: 0;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .logo-menu-wrap .main-menu {
    margin-left: 0px;
  }
}

@media only screen and (max-width: 767px) {
  .logo-menu-wrap .main-menu {
    margin-left: 0px;
  }
}

.header-search-2 {
  position: relative;
}

.header-search-2 a {
  font-size: 19px;
  line-height: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  color: #FFFFFF;
  width: 32px;
  height: 32px;
  border: 1px solid #fff;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  border-radius: 100%;
}

.header-search-2 a i {
  display: block;
}

.header-search-2 a i.s-open {
  position: relative;
}

.header-search-2 a i.s-close {
  left: 50%;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%) translateX(-50%);
  transform: translateY(-50%) translateX(-50%);
}

.header-search-2 a .s-close {
  opacity: 0;
}

.search-wrap-2 {
  background-color: transparent;
  opacity: 0;
  position: absolute;
  right: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  -webkit-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  visibility: hidden;
  width: 340px;
  z-index: -99;
  padding-bottom: 1px;
  margin-right: 10px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .search-wrap-2 {
    width: 300px;
  }
}

@media only screen and (max-width: 767px) {
  .search-wrap-2 {
    width: 250px;
    left: 0;
    right: auto;
    -webkit-transform: inherit;
    transform: inherit;
    top: 150%;
  }
}

.search-wrap-2 form {
  position: relative;
  overflow: hidden;
}

.search-wrap-2 form input {
  background-color: #fff;
  border: 1px solid #E2DCDC;
  color: #000000;
  line-height: 30px;
  padding: 5px 60px 5px 20px;
  width: 100%;
  font-size: 14px;
  border-radius: 50px;
}

.search-wrap-2 form input::-moz-input-placeholder {
  color: #000000;
  opacity: 1;
}

.search-wrap-2 form input::-webkit-input-placeholder {
  color: #000000;
  opacity: 1;
}

.search-wrap-2 form button.button-search {
  position: absolute;
  right: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  padding: 0;
  border: none;
  background-color: transparent;
  height: 100%;
  font-size: 18px;
  border-left: 1px solid #E2DCDC;
  padding: 0 15px;
  color: #000000;
  line-height: 45px;
}

.search-wrap-2 form button.button-search:hover {
  color: #f4181c;
}

/*--
    05. Hero Slider Css
-----------------------------*/

.slider-height-hm4 {
  height: 540px;
}

@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .slider-height-hm4 {
    height: 500px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .slider-height-hm4 {
    height: 450px;
  }
}

@media only screen and (max-width: 767px) {
  .slider-height-hm4 {
    height: 380px;
  }
}

.slider-content-hm4 {
  padding-left: 100px;
}

@media only screen and (min-width: 1200px) and (max-width: 1600px) {
  .slider-content-hm4 {
    padding-left: 50px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .slider-content-hm4 {
    padding-left: 30px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .slider-content-hm4 {
    padding-left: 40px;
  }
}

@media only screen and (max-width: 767px) {
  .slider-content-hm4 {
    padding-left: 15px;
  }
}

.slider-content-hm4 .title {
  color: #ffffff;
  font-size: 80px;
  font-weight: 700;
  margin: 0;
}

@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .slider-content-hm4 .title {
    font-size: 70px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .slider-content-hm4 .title {
    font-size: 60px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .slider-content-hm4 .title {
    font-size: 52px;
  }
}

@media only screen and (max-width: 767px) {
  .slider-content-hm4 .title {
    font-size: 33px;
  }
}

.slider-content-hm4 .sub-title-time-wrap {
  margin: 25px 0 50px;
}

@media only screen and (max-width: 767px) {
  .slider-content-hm4 .sub-title-time-wrap {
    margin: 20px 0 35px;
  }
}

.slider-content-hm4 .sub-title-time-wrap span {
  position: relative;
  margin-right: 30px;
  line-height: 25px;
  display: inline-block;
}

.slider-content-hm4 .sub-title-time-wrap span:before {
  position: absolute;
  content: "";
  width: 2px;
  height: 100%;
  right: -17px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  background-color: #ffffff;
}

@media only screen and (max-width: 767px) {
  .slider-content-hm4 .sub-title-time-wrap span:before {
    right: -19px;
  }
}

.slider-content-hm4 .sub-title-time-wrap span:last-child {
  margin-right: 0;
}

.slider-content-hm4 .sub-title-time-wrap span:last-child:before {
  display: none;
}

.slider-content-hm4 .sub-title-time-wrap .sub-title,
.slider-content-hm4 .sub-title-time-wrap .time {
  color: #ffffff;
  font-size: 25px;
  font-weight: bold;
}

@media only screen and (max-width: 767px) {

  .slider-content-hm4 .sub-title-time-wrap .sub-title,
  .slider-content-hm4 .sub-title-time-wrap .time {
    font-size: 18px;
  }
}

.slider-content-hm4 .combo-pack-price {
  position: relative;
  z-index: 2;
  margin: 15px 0 36px;
}

.slider-content-hm4 .combo-pack-price span {
  font-size: 35px;
  display: inline-block;
  margin-right: 15px;
  font-weight: bold;
}

@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .slider-content-hm4 .combo-pack-price span {
    font-size: 30px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .slider-content-hm4 .combo-pack-price span {
    font-size: 28px;
  }
}

@media only screen and (max-width: 767px) {
  .slider-content-hm4 .combo-pack-price span {
    font-size: 26px;
  }
}

.slider-content-hm4 .combo-pack-price span:last-child {
  margin-right: 0;
}

.slider-content-hm4 .combo-pack-price span.new-price {
  color: #f4181c;
}

.slider-content-hm4 .combo-pack-price span.old-price {
  color: #ffffff;
  position: relative;
  text-decoration: line-through;
}

.nav-style-1 button {
  position: absolute;
  left: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index: 9;
  background-color: transparent;
  border: none;
  font-size: 70px;
  color: #f4181c;
  opacity: 0;
  visibility: hidden;
}

.nav-style-1 button.slick-next {
  left: auto;
  right: 0;
}

@media only screen and (max-width: 767px) {
  .nav-style-1 button {
    font-size: 50px;
  }
}

.nav-style-1 button:hover {
  color: #ffffff;
}

.nav-style-1:hover button {
  opacity: 1;
  visibility: visible;
  left: 15px;
}

.nav-style-1:hover button.slick-next {
  left: auto;
  right: 15px;
}

.single-animation-wrap.slick-active .slider-animated h1 {
  -webkit-animation-delay: 1.1s;
  animation-delay: 1.1s;
  -webkit-animation-name: bounceInLeft;
  animation-name: bounceInLeft;
}

.single-animation-wrap.slick-active .slider-animated .sub-title,
.single-animation-wrap.slick-active .slider-animated .new-price {
  -webkit-animation-delay: 1.6s;
  animation-delay: 1.6s;
  -webkit-animation-name: bounceInLeft;
  animation-name: bounceInLeft;
}

.single-animation-wrap.slick-active .slider-animated .time,
.single-animation-wrap.slick-active .slider-animated .old-price {
  -webkit-animation-delay: 1.4s;
  animation-delay: 1.4s;
  -webkit-animation-name: bounceInLeft;
  animation-name: bounceInLeft;
}

.single-animation-wrap.slick-active .slider-animated .btn-style-hm4 {
  -webkit-animation-delay: 1.8s;
  animation-delay: 1.8s;
  -webkit-animation-name: bounceInLeft;
  animation-name: bounceInLeft;
}

.hero-overly {
  position: relative;
}

.hero-overly:before {
  position: absolute;
  content: "";
  left: 0;
  top: 0;

  height: 100%;
  width: 100%;
}

@media only screen and (max-width: 767px) {
  .hero-overly:before {}
}

@media only screen and (min-width: 1200px) and (max-width: 1600px) {
  .slider-bg-position-1 {
    background-position: 65%;
  }

  .slider-bg-position-3 {
    background-position: 65%;
  }

  .slider-bg-position-2 {
    background-position: 96%;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .slider-bg-position-1 {
    background-position: 72%;
  }

  .slider-bg-position-3 {
    background-position: 72%;
  }

  .slider-bg-position-2 {
    background-position: 96%;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .slider-bg-position-1 {
    background-position: 72%;
  }

  .slider-bg-position-3 {
    background-position: 72%;
  }

  .slider-bg-position-2 {
    background-position: 96%;
  }
}

@media only screen and (max-width: 767px) {
  .slider-bg-position-1 {
    background-position: 80%;
  }

  .slider-bg-position-3 {
    background-position: 50%;
  }

  .slider-bg-position-2 {
    background-position: 96%;
  }
}

@media only screen and (max-width: 479px) {
  .slider-bg-position-3 {
    background-position: 42%;
  }
}

/*--
    06. Feature Css
----------------------------*/

/*-- get-started-area Css*/

/*--
    07. Choose Area Css
------------------------------*/

/*--
    08. Footer Css
-------------------------------*/

.footer-bottom {
  background-image: -webkit-gradient(linear, left bottom, left top, from(#0259ae), to(#12b4f2));
  background-image: linear-gradient(to top, #0259ae, #12b4f2);
  padding: 10px 0;
  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  color: #ffffff;
}

.footer-bottom.footer-black-hm4 {
  background-image: inherit;
  border-top: 1px solid #203544;
}

@media only screen and (max-width: 767px) {
  .footer-bottom {
    text-align: center;
  }
}

.footer-hm4-ptb {
  padding-top: 45px;
  padding-bottom: 45px;
}

.footer-about p {
  color: #ffffff;
  width: 84%;
  font-size: 15px;
  line-height: 24px;
  margin: 20px 0 20px;
}

@media only screen and (min-width: 1200px) and (max-width: 1600px) {
  .footer-about p {
    width: 100%;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .footer-about p {
    width: 100%;
  }
}

.social-style-1 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.social-style-1 a {
  display: inline-block;
  font-size: 14px;
  width: 35px;
  height: 35px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  border-radius: 100%;
  color: #ffffff;
  margin-right: 10px;
  border: 1px solid transparent;
}

.social-style-1 a.facebook {
  background-color: #3b5998;
}

.social-style-1 a.facebook:hover {
  background-color: transparent;
  border: 1px solid #3b5998;
}

.social-style-1 a.twitter {
  background-color: #00B3EC;
}

.social-style-1 a.twitter:hover {
  background-color: transparent;
  border: 1px solid #00B3EC;
}

.social-style-1 a.linkedin {
  background-color: #0A66C2;
}

.social-style-1 a.linkedin:hover {
  background-color: transparent;
  border: 1px solid #0A66C2;
}

.social-style-1 a.instagram {
  background-color: #E4405F;
}

.social-style-1 a.instagram:hover {
  background-color: transparent;
  border: 1px solid #E4405F;
}

.footer-top-right {
  margin-left: 50px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .footer-top-right {
    margin-left: 0;
    margin-top: 24px;
  }
}

@media only screen and (max-width: 767px) {
  .footer-top-right {
    margin-left: 0;
    margin-top: 24px;
  }
}

.footer-quicklink ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.footer-quicklink ul li {
  margin-right: 40px;
}

@media only screen and (min-width: 1200px) and (max-width: 1600px) {
  .footer-quicklink ul li {
    margin-right: 25px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .footer-quicklink ul li {
    margin-right: 25px;
  }
}

@media only screen and (max-width: 767px) {
  .footer-quicklink ul li {
    margin-right: 14px;
  }
}

.footer-quicklink ul li:last-child {
  margin-right: 0;
}

.footer-quicklink ul li a {
  color: #ffffff;
  font-size: 18px;
}

@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .footer-quicklink ul li a {
    font-size: 16px;
  }
}

@media only screen and (max-width: 767px) {
  .footer-quicklink ul li a {
    font-size: 16px;
  }
}

.footer-quicklink ul li a:hover {
  color: #f4181c;
}

.footer-quicklink-2 ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.footer-quicklink-2 ul li {
  margin-right: 40px;
  position: relative;
}

.footer-quicklink-2 ul li::before {
  position: absolute;
  right: -20px;
  top: 50%;
  width: 1px;
  height: 15px;
  content: "";
  background-color: #444;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.footer-quicklink-2 ul li:last-child {
  margin-right: 0;
}

.footer-quicklink-2 ul li:last-child::before {
  display: none;
}

.footer-quicklink-2 ul li a {
  color: #ffffff;
  font-size: 14px;
}

.footer-quicklink-2 ul li a:hover {
  color: #f4181c;
}

.brand-logo-wrap {
  margin: 25px 0;
}

.brand-logo {
  border: 1px solid #444;
  overflow: hidden;
}

.brand-logo a {
  display: block;
}

.brand-logo a img {
  max-width: 100%;
  -webkit-transition: all 0.5s ease 0s;
  transition: all 0.5s ease 0s;
}

.brand-logo:hover a img {
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
}

.login-alert {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .login-alert {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin: 10px 0 0;
  }
}

@media only screen and (max-width: 767px) {
  .login-alert {
    display: block;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin: 10px 0 0;
  }
}

.login-alert p {
  margin: 0 15px 0 0px;
  line-height: 1;
}

@media only screen and (max-width: 767px) {
  .login-alert p {
    margin: 0 0px 15px 0px;
  }
}

.login-alert p a {
  color: #ffffff;
  font-weight: 600;
  color: #ffffff;
  font-weight: 600;
  display: inline-block;
  line-height: 1;
  border-bottom: 1px solid #ffffff;
}

.login-alert p a:hover {
  color: #f4181c;
  border-bottom: 1px solid #f4181c;
}

.footer-bottom-ptb {
  padding: 20px 0;
}

.copyright .copyright-text {
  color: #ffffff;
  display: inline-block;
  line-height: 24px;
}

.copyright .copyright-text i {
  color: #f4181c;
}

.copyright .copyright-text a {
  color: #ffffff;
}

.copyright .copyright-text a:hover {
  color: #f4181c;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .copyright {
    text-align: center;
  }
}

@media only screen and (max-width: 767px) {
  .copyright {
    text-align: center;
  }
}

/*--
    09. About us Css
----------------------------*/

/*--
    10. Contact css
-----------------------*/

/*--
    11. Faq Style
-------------------------------*/

/*--
     solutions Css
------------------------------------*/

/*--
    12. Pricing Panel Css
--------------------------*/

/*--
    13. Testimonial Css
 ---------------------------------*/

/*--
    14. product Css
---------------------------*/

.movie-slider-active .slick-list,
.brand-logo-active .slick-list {
  margin: 0 -15px;
}

.movie-slider-active .slick-list .movie-wrap-plr,
.brand-logo-active .slick-list .brand-logo-plr {
  padding: 0 15px;
}

.nav-style-2 button {
  position: absolute;
  top: -74px;
  right: 0;
  width: 30px;
  height: 30px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: #333;
  color: #ccc;
  border: none;
  font-size: 20px;
  border-radius: 4px;
  -webkit-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

.nav-style-2 button.slick-prev {
  margin-right: 40px;
}

.nav-style-2 button:hover {
  color: #ffffff;
  background-color: #f4181c;
}

.movie-wrap {
  overflow: hidden;
  position: relative;
  border-radius: 10px;
}

.movie-wrap>.movie-img {
  position: relative;
  overflow: hidden;
}

.movie-wrap>.movie-img::before {
  background: rgba(0, 0, 0, 0) -webkit-gradient(linear, left bottom, left top, color-stop(25%, #072e4a), color-stop(60%, transparent)) repeat scroll 0% 0%;
  background: rgba(0, 0, 0, 0) linear-gradient(to top, #072e4a 25%, transparent 60%) repeat scroll 0% 0%;
  bottom: 0;
  content: "";
  left: 0;
  opacity: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 2;
  pointer-events: none;
  border-radius: 10px;
  -webkit-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  -webkit-transform: translate3d(0px, 50%, 0px);
  transform: translate3d(0px, 50%, 0px);
}

.movie-wrap>.movie-img>a {
  display: block;
}

.movie-wrap>.movie-img>a>img {
  width: 100%;
  border-radius: 10px;
  -webkit-transition: all 0.5s ease 0s;
  transition: all 0.5s ease 0s;
}

.movie-wrap>.movie-img .Watch-list-btn {
  position: absolute;
  top: 0px;
  right: 15px;
  z-index: 5;
  width: 40px;
  height: 40px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  font-size: 22px;
  color: #ffffff;
  border-radius: 100%;
  -webkit-transition: all 0.7s ease 0s;
  transition: all 0.7s ease 0s;
  background-color: #f4181c;
  border: none;
  opacity: 0;
  visibility: hidden;
}

.movie-wrap>.movie-img .Watch-list-btn:hover {
  background-color: #000000;
}

.movie-wrap .movie-content {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  z-index: 5;
  bottom: 10px;
  opacity: 0;
  visibility: hidden;
  padding: 10px;
  -webkit-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

.movie-wrap .movie-content .title {
  color: #ffffff;
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 3px;
  -webkit-transition: all 0.5s ease 0s;
  transition: all 0.5s ease 0s;
  -webkit-transform: translateY(30px);
  transform: translateY(30px);
}

@media only screen and (min-width: 1200px) and (max-width: 1600px) {
  .movie-wrap .movie-content .title {
    font-size: 18px;
  }
}

.movie-wrap .movie-content .title a {
  color: #ffffff;
}

.movie-wrap .movie-content .title a:hover {
  color: #f4181c;
}

.movie-wrap .movie-content>span {
  color: #ffffff;
  font-size: 15px;
  display: block;
  margin: 0 0 10px;
  -webkit-transition: all 0.7s ease 0s;
  transition: all 0.7s ease 0s;
  -webkit-transform: translateY(30px);
  transform: translateY(30px);
}

.movie-wrap .movie-content .movie-btn {
  display: block;
  -webkit-transition: all 0.8s ease 0s;
  transition: all 0.8s ease 0s;
  -webkit-transform: translateY(30px);
  transform: translateY(30px);
}

.movie-wrap:hover>.movie-img::before {
  opacity: 1;
  border-radius: 10px;
  -webkit-transform: translate3d(0px, 0px, 0px);
  transform: translate3d(0px, 0px, 0px);
}

.movie-wrap:hover>.movie-img>a>img {
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
}

.movie-wrap:hover>.movie-img .Watch-list-btn {
  top: 15px;
  opacity: 1;
  visibility: visible;
}

.movie-wrap:hover .movie-content {
  opacity: 1;
  visibility: visible;
}

.movie-wrap:hover .movie-content .title {
  -webkit-transform: translateY(0px);
  transform: translateY(0px);
}

.movie-wrap:hover .movie-content span {
  -webkit-transform: translateY(0px);
  transform: translateY(0px);
}

.movie-wrap:hover .movie-content .movie-btn {
  -webkit-transform: translateY(0px);
  transform: translateY(0px);
}

.series-banner-img {
  overflow: hidden;
}

.series-banner-img a img {
  width: 100%;
  -webkit-transition: all 0.7s ease 0s;
  transition: all 0.7s ease 0s;
}

.series-banner-img:hover a img {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

/*-------- Pagination style ---------*/

/*--
    15. Login And Register Page Css
----------------------------------*/

/*--
    16. My Account Page Css
--------------------------*/
@font-face {
  font-family: VideoJS;
  src: url(font/VideoJS.eot?#iefix) format("eot");
}

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300);

@font-face {
  font-family: afterglow-icon;
  src: url(data:font/truetype;charset=utf-8;base64,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) format("truetype");
  font-weight: 400;
  font-style: normal;
}

/* =============================
   BACKDROP
============================= */
.pricing-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .85);
  backdrop-filter: blur(12px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 99999;

  /* NEW */
  padding: 20px;
  overflow-y: auto;
}

.checkout-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .9);
  backdrop-filter: blur(10px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 999999;

  /* NEW */
  padding: 20px;
  overflow-y: auto;
}

/* =============================
   BOX
============================= */
.pricing-box {
  width: 1100px;
  max-width: 96%;
  background: linear-gradient(180deg, #0b0f1f, #070b14);
  border-radius: 16px;
  padding: 45px;
  position: relative;
  border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 0 80px rgba(255, 0, 0, .12);
  color: #fff;
  font-family: Poppins, sans-serif;

  /* NEW */
  max-height: 90vh;
  overflow-y: auto;
}

.checkout-box {
  width: 520px;
  max-width: 95%;
  background: linear-gradient(180deg, #0b0f1f, #070b14);
  padding: 40px;
  border-radius: 14px;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 0 60px rgba(0, 0, 0, .6);
  position: relative;
  font-family: Poppins, sans-serif;

  /* NEW */
  max-height: 90vh;
  overflow-y: auto;
}

/* =============================
   CLOSE BUTTON (unchanged look)
============================= */
.close-modal {
  position: absolute;
  right: 18px;
  top: 14px;
  background: none;
  border: none;
  font-size: 26px;
  color: #aaa;
  cursor: pointer;
}

.close-checkout {
  position: absolute;
  right: 18px;
  top: 10px;
  background: none;
  border: none;
  font-size: 26px;
  color: #aaa;
  cursor: pointer;
}

/* =============================
   YOUR ORIGINAL STYLES
   (unchanged)
============================= */

.title {
  color: #FFF;
  text-align: center;
  font-size: 34px;
  font-weight: 700;
}

.subtitle {
  text-align: center;
  color: #9aa4b2;
  margin-bottom: 40px;
}

.plans {
  display: flex;
  gap: 28px;
}

.plan {
  flex: 1;
  background: rgba(255, 255, 255, .02);
  border-radius: 14px;
  padding: 30px;
  border: 1px solid rgba(255, 255, 255, .08);
  text-align: center;
  transition: .35s;
  position: relative;
}

.plan:hover {
  transform: translateY(-8px);
  border-color: #ff2a2a;
  box-shadow: 0 0 25px rgba(255, 0, 0, .25);
}

.plan.active {
  border: 1px solid #ff2a2a;
  box-shadow: 0 0 40px rgba(255, 0, 0, .35);
  transform: scale(1.05);
}

.tag {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: #1e293b;
  padding: 6px 18px;
  border-radius: 20px;
  font-size: 13px;
}

.tag.red {
  background: #ff1e1e;
}

.price {
  font-size: 38px;
  font-weight: 700;
  margin: 20px 0;
}

.price span {
  font-size: 14px;
  color: #aaa;
}

.red-text {
  color: #ff2a2a;
}

.plan ul {
  list-style: none;
  padding: 0;
  margin: 25px 0;
}

.plan li {
  padding: 10px 0;
  color: #cbd5e1;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
}

.btn {
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: 10px;
  font-weight: 600;
  cursor: pointer;
  font-size: 15px;
  transition: .3s;
}

.btn.blue {
  background: linear-gradient(90deg, #2b7fff, #1e40af);
  color: #fff;
}

.btn.red {
  background: linear-gradient(90deg, #ff1e1e, #b30000);
  color: #fff;
  box-shadow: 0 0 20px rgba(255, 0, 0, .4);
}

.btn:hover {
  transform: scale(1.04);
}

.row {
  display: flex;
  gap: 15px;
}

/* =============================
   MOBILE ONLY
   (NO DESIGN CHANGE)
============================= */

@media(max-width:900px) {
  .plans {
    flex-direction: column;
  }
}

/* EXTRA SMALL FIX */
@media(max-width:500px) {

  .pricing-box,
  .checkout-box {
    max-height: 88vh;
  }
}

/* =========================
   FORM WRAPPER
========================= */
.checkout-form {
  margin-top: 10px;
}

/* LABEL */
.checkout-form label {
  font-size: 13px;
  color: #9aa4b2;
  display: block;
  margin-top: 18px;
  margin-bottom: 6px;
  font-weight: 500;
  letter-spacing: .3px;
}

/* INPUT BASE */
.checkout-form input {
  width: 100%;
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: #070b13;
  color: #fff;
  font-size: 14px;
  outline: none;
  transition: .25s;
}

/* PLACEHOLDER */
.checkout-form input::placeholder {
  color: #6b7280;
}

/* INPUT FOCUS */
.checkout-form input:focus {
  border-color: #2b7fff;
  box-shadow: 0 0 0 1px #2b7fff, 0 0 15px rgba(43, 127, 255, .25);
  background: #05070d;
}

/* ROW (expiry + cvv) */
.row {
  display: flex;
  gap: 15px;
}

.row>div {
  flex: 1;
}

/* SECURE TEXT */
.secure {
  margin-top: 15px;
  font-size: 13px;
  color: #4fc3f7;
  background: rgba(79, 195, 247, .08);
  border: 1px solid rgba(79, 195, 247, .15);
  padding: 10px 12px;
  border-radius: 8px;
}

/* BUTTON */
.pay-btn {
  margin-top: 25px;
  width: 100%;
  padding: 16px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(90deg, #2b7fff, #1e40af);
  color: #fff;
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
  transition: .25s;
  letter-spacing: .4px;
}

.pay-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 25px rgba(43, 127, 255, .35);
}

.pay-btn:active {
  transform: scale(.98);
}

/* =========================
   MOBILE (NO DESIGN CHANGE)
========================= */
@media(max-width:600px) {

  .checkout-form input {
    padding: 13px 14px;
    font-size: 14px;
  }

  .pay-btn {
    padding: 15px;
    font-size: 15px;
  }

  .row {
    flex-direction: column;
    gap: 10px;
  }
}

@media (max-width: 768px) {
  .mobHide {
    display: none !important;
  }
}




/* ================= SUCCESS OVERLAY ================= */

.success-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #0b0b0b 0%, #050505 100%);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 30px;
  opacity: 0;
  pointer-events: none;
  transform: scale(.96);
  transition: all .45s cubic-bezier(.2, .8, .2, 1);
}

/* visible state */
.success-overlay.visible {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}


/* ================= ICON ================= */

.success-icon {
  width: 82px;
  height: 82px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 38px;
  color: #fff;
  margin-bottom: 22px;

  background: linear-gradient(135deg, #e50914, #ff2a2a);
  box-shadow:
    0 0 0 6px rgba(229, 9, 20, .15),
    0 10px 40px rgba(229, 9, 20, .5);

  animation: popIn .6s ease;
}

@keyframes popIn {
  0% {
    transform: scale(.4);
    opacity: 0
  }

  60% {
    transform: scale(1.15)
  }

  100% {
    transform: scale(1);
    opacity: 1
  }
}


/* ================= TEXT ================= */

.success-overlay h3 {
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: .3px;
  margin-bottom: 12px;
}

.success-overlay p {
  font-size: .95rem;
  color: #bdbdbd;
  max-width: 380px;
  line-height: 1.6;
  margin-bottom: 26px;
}


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

#closeAfterSuccess {
  background: linear-gradient(90deg, #e50914, #ff1e1e);
  border: none;
  color: #fff;
  font-weight: 600;
  border-radius: 8px;
  padding: 14px 26px;
  font-size: .95rem;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: all .25s ease;
  box-shadow: 0 8px 28px rgba(229, 9, 20, .45);
}

#closeAfterSuccess:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 40px rgba(229, 9, 20, .6);
}

#closeAfterSuccess:active {
  transform: scale(.97);
}


/* ================= BACKDROP GLOW ================= */

.success-overlay::before {
  content: "";
  position: absolute;
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, rgba(229, 9, 20, .25), transparent 70%);
  top: -120px;
  left: 50%;
  transform: translateX(-50%);
  filter: blur(40px);
  pointer-events: none;
}


/* ================= SMALL SCREEN ================= */

@media(max-width:520px) {
  .success-overlay {
    padding: 30px 20px;
  }

  .success-icon {
    width: 70px;
    height: 70px;
    font-size: 30px;
  }

  .success-overlay h3 {
    font-size: 1.3rem;
  }
}



/* ===== OVERLAY ===== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at center, rgba(0, 0, 0, .6), rgba(0, 0, 0, .95));
  backdrop-filter: blur(10px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999999;
  animation: fadeIn .35s ease;
}

.modal-overlay.active {
  display: flex;
}

/* ===== MODAL BOX ===== */
.modal-box {
  width: 520px;
  max-width: 94%;
  background: linear-gradient(180deg, #111, #050505);
  border-radius: 22px;
  padding: 40px 36px;
  color: #fff;
  position: relative;
  box-shadow:
    0 40px 120px rgba(0, 0, 0, .9),
    inset 0 0 0 1px rgba(255, 255, 255, .05);
  transform: scale(.92);
  animation: popIn .35s ease forwards;
}

/* subtle border glow */
.modal-box::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 22px;
  padding: 1px;
  background: linear-gradient(120deg, rgba(255, 255, 255, .2), transparent 40%);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* ===== CLOSE BUTTON ===== */
.modal-close {
  position: absolute;
  top: 16px;
  right: 18px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .2);
  background: rgba(255, 255, 255, .05);
  color: #fff;
  font-size: 22px;
  cursor: pointer;
  transition: .3s;
}

.modal-close:hover {
  background: #e50914;
  border-color: #e50914;
  transform: rotate(90deg) scale(1.05);
}

/* ===== TITLE ===== */
.modal-box h2 {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 8px;
  letter-spacing: .3px;
}

.modal-subtitle {
  font-size: 14px;
  color: #aaa;
  margin-bottom: 28px;
}

/* ===== FORM GROUP ===== */
.form-group {
  margin-bottom: 18px;
  display: flex;
  flex-direction: column;
}

.form-group label {
  font-size: 13px;
  color: #bbb;
  margin-bottom: 6px;
}

.form-group input {
  height: 46px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .04);
  color: #fff;
  font-size: 14px;
  transition: .25s;
}

.form-group input:focus {
  outline: none;
  border-color: #e50914;
  box-shadow: 0 0 0 2px rgba(229, 9, 20, .25);
  background: rgba(0, 0, 0, .6);
}

/* ===== CARD GRID ===== */
.form-box {
  display: flex;
  gap: 12px;
}

.form-box .form-group {
  flex: 1;
}

/* ===== DIVIDER ===== */
.card-divider {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, .08);
  margin: 22px 0;
}

/* ===== ERROR ===== */
.error-msg {
  font-size: 12px;
  color: #ff4d4d;
  margin-top: 4px;
  display: none;
}

.error-msg.visible {
  display: block;
}

input.error {
  border-color: #ff4d4d;
}

/* ===== SUBMIT BUTTON ===== */
.btn-subscribe {
  width: 100%;
  height: 52px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(90deg, #e50914, #ff2a2a);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  margin-top: 18px;
  cursor: pointer;
  transition: .25s;
  box-shadow: 0 10px 30px rgba(229, 9, 20, .4);
}

.btn-subscribe:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 40px rgba(229, 9, 20, .6);
}

/* ===== SUCCESS SCREEN ===== */
.success-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #0b0b0b, #000);
  border-radius: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  padding: 40px;
  opacity: 0;
  pointer-events: none;
  transition: .4s;
}

.success-overlay.visible {
  opacity: 1;
  pointer-events: auto;
}

.success-icon {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: #e50914;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
  margin-bottom: 18px;
  box-shadow: 0 0 30px rgba(229, 9, 20, .6);
}

.success-overlay h3 {
  font-size: 22px;
  margin-bottom: 10px;
}

.success-overlay p {
  font-size: 14px;
  color: #bbb;
  max-width: 320px;
}

/* ===== ANIMATION ===== */
@keyframes fadeIn {
  from {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

@keyframes popIn {
  to {
    transform: scale(1)
  }
}

/* ===== MOBILE ===== */
@media(max-width:600px) {
  .modal-box {
    padding: 28px 22px;
  }

  .form-box {
    flex-direction: column;
  }
}



.pricing-modal,
.modal-overlay {
  display: none;
}

.pricing-modal.active,
.modal-overlay.active {
  display: flex;
}



.single-hero-slider-wrap {
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* BLACK OVERLAY */
.single-hero-slider-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  /* change opacity here */
  z-index: 1;
}

/* keep text above overlay */
.single-hero-slider-wrap>* {
  position: relative;
  z-index: 2;
}


/* ===== MODAL BACKDROP ===== */
.video-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .75);
  backdrop-filter: blur(12px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  animation: fadeIn .35s ease;
}

/* ===== POPUP BOX ===== */
.video-box {
  width: 980px;
  max-width: 94%;
  background: linear-gradient(180deg, #0c0c0c, #060606);
  border-radius: 18px;
  position: relative;
  box-shadow:
    0 40px 120px rgba(0, 0, 0, .9),
    inset 0 0 0 1px rgba(255, 255, 255, .06);
  overflow: hidden;
  transform: scale(.92);
  animation: popIn .35s ease forwards;
}

/* subtle border glow */
.video-box::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 18px;
  padding: 1px;
  background: linear-gradient(120deg, rgba(255, 255, 255, .15), transparent 40%);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* ===== HEADER ===== */
.video-header {
  padding: 18px 22px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, .04), transparent);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.video-header h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  color: #f5f5f5;
  letter-spacing: .4px;
}

/* ===== CLOSE BUTTON ===== */
.video-close {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .15);
  color: #fff;
  font-size: 22px;
  cursor: pointer;
  transition: .25s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-close:hover {
  background: #e50914;
  border-color: #e50914;
  transform: rotate(90deg) scale(1.05);
  box-shadow: 0 0 18px rgba(229, 9, 20, .6);
}

/* ===== VIDEO AREA ===== */
.video-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  background: #000;
}

/* subtle bottom gradient overlay */
.video-container::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 120px;
  background: linear-gradient(to top, rgba(0, 0, 0, .7), transparent);
  pointer-events: none;
}

.video-container iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  border: 0;
}

/* ===== ANIMATIONS ===== */
@keyframes fadeIn {
  from {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

@keyframes popIn {
  to {
    transform: scale(1);
  }
}

/* ===== MOBILE ===== */
@media(max-width:600px) {
  .video-box {
    border-radius: 12px;
  }

  .video-header {
    padding: 14px 16px;
  }

  .video-header h3 {
    font-size: 15px;
  }
}