@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200;300;400;600;700;900&display=swap');
* {margin:0; padding:0; outline:0; -webkit-box-sizing:border-box; box-sizing:border-box; list-style:none;}
html {
  font-size: 16px;
}

:root {
  --theme-color: #FF009D;
  --theme-black: #1F1F1F;
}

body {
  background: #1F1F1F;
  width: 100%;
  min-height: 100vh;
  font-family: 'Source Sans Pro', sans-serif;
}

.transition {
  -webkit-transition: ease-in-out .3s;
  -moz-transition: ease-in-out .3s;
  -ms-transition: ease-in-out .3s;
  -o-transition: ease-in-out .3s;
  transition: ease-in-out .3s
}


a {
  text-decoration: none;
}

html {
  --scrollbarBG: #EEEEEE;
  --thumbBG: var(--theme-color);
}

/*body {
  scrollbar-width: 5px;
  scrollbar-color: var(--thumbBG) var(--scrollbarBG);
}
::-webkit-scrollbar {
  width: 10px;
}*/
ul {
  list-style-type: none;
  margin: 0;
  padding: 0
}

a {
  text-decoration: none;
}



h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0
}

.form-control,
.form-select {
  font-size: 1.5rem;
}

label {
  font-size: 1.5rem;
  color: #000;
  font-weight: 600;
}

p {
  margin: 0;
}

/* Hide the number input arrows */
input[type=number],
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -moz-appearance: textfield; 
  -webkit-appearance: none; 
  appearance: none;  
  margin: 0;
}

input[type=number] {
  /* Optional: This will hide the arrows in Firefox as well */
  -moz-appearance: textfield;
}

.btn, .btn-primary {
    vertical-align: bottom;
    border: 2px solid transparent;
    font-weight: 500;
    color: #fff;
    border-radius: 15px;
    font-size: 30px;
    line-height: normal;
    padding: 1rem 2rem;
    background: transparent linear-gradient(103deg, #FF0000 0%, #E200FF 100%) 0% 0% no-repeat padding-box;
}

.btn.active,
.btn.active:focus,
.btn.focus,
.btn:active,
.btn:active:focus,
.btn:focus,
.btn:hover,
.btn-primary:hover {
  background: #4A4A4A;
  color: #ffffff;
  border-color: #ffffff;
  /*background: #fff;
  color: var(--theme-color);
  border-color: var(--theme-color);*/
}

.container-fluid {max-width: 2500px; margin-left: auto; margin-right: auto; padding-left: 56px; padding-right: 56px;}
.white-text {color: #fff;}
.coverImage {width: 100%; height: 100%; object-fit: cover;}
.section-HD {font-size: 35px; line-height: 43px; color: #FFFFFF; font-weight: 600;}
.section-subHD {font-size: 30px; line-height: 35px; color: #FFFFFF; font-weight: 600;}
.mt-40 {margin-top: 40px;}
.mb-40 {margin-bottom: 40px;}
.text-right {text-align: right !important;}
.form-control {background: #1f1f1f; font-size: 24px; line-height: 24px; color: #ffffff; border-radius: 14px; padding: 12px 15px;}
.form-control:focus {box-shadow: none !important; outline: none !important; border-color: #FF009D; background: transparent; color: #fff;}
.form-control::placeholder {color: #909090;}
.form-label {font-size: 25px; line-height: 25px; font-weight: 500; color: #fff; margin-bottom: 20px;}

ol.listType-decimal, ol.listType-decimal li {list-style-type: decimal !important;}
.c-wrapper p {margin: 0 0 16px;}
.c-wrapper p strong {font-size: 18px;}
.backToHome svg path {fill: #fff;}
.full-width {width: 100%}
.pr-15 {padding-right: 15px;}
.pl-15 {padding-left: 15px;}

.loader-overlay {position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); display: flex; justify-content: center; align-items: center; z-index: 9999;}
.loader-overlay .loader {width: 100%; max-width: 90px; margin: auto;}  


/* Header Section */

header {position: fixed; top: 0; left: 0; right: 0; width: 100%; z-index: 11; background-color: #000000;}
.header-innerBoxes {display: flex; justify-content: space-between; align-items: center; padding: 23px 0px;}
.header-leftBox {display: flex; flex: 0 0 620px; max-width: 620px; align-items: center; gap: 45px;}
.header-logoBox {width: 100%; max-width: 147px;}
.zp_premium-logo {width: 50px; height: 50px;}
.mobileView-search {display: none !important;}
.header-searchFiled {background: url(../images/header-search-icon.png) #FFFFFF2F !important; background-repeat: no-repeat !important; background-size: 26px !important; background-position: center left 20px !important; padding: 8px 15px 8px 65px; box-shadow: none !important; outline: none !important; color: #fff !important; font-size: 22px; border-radius: 33px; border: 2px solid #FFFFFF;}
.header-searchFiled:focus {box-shadow: none !important; outline: none !important; border-color: #FF009D;}
.header-searchFiled::placeholder {color: #777777;}
.mobileSearch-closeBtn {display: none;}
.header-rightBox {padding-left: 15px;}
.h-link {position: relative; display: block; font-size: 1.5rem; padding: 5px 35px; color: #fff;}
.h-link:hover, .h-link:focus, .h-link.active {color: #FF009D;}
.btn.loginButton {font-size: 18px; border-radius: 10px; padding: 11px 39px;}
.hamburger-menu {display: none;}
.hamburger-line {width: 35px; height: 3px; background: #fff; border-radius: 3px; margin-right: 0px; margin-left: auto; cursor: pointer;}
.hamburger-line:first-child {width: 30px;}
.hamburger-line:nth-child(2) {margin: 6px 0px;}
.hamburger-line:last-child {width: 25px;}

/* Header Profiel Right Side Nav Box */
.header-profileImgBox {width: 50px; height: 50px; border-radius: 50%; cursor: pointer;}
.hp-sideBoxWrapper {position: fixed; top: 0px; right: -100%; width: 100%; min-height: 100vh; background: transparent linear-gradient(270deg, #000000 0%, #54545400 100%) 0% 0% no-repeat padding-box; transition: right 0.4s ease-in-out;}
.hp-sideBoxWrapper.showProfile-sideBox {right: 0px;}
.hp-sideBoxInner {position: fixed; top: 0px; right: -100%; background: #000000; width: 100%; max-width: 275px; min-height: 100vh; padding: 40px 15px; transition: right 0.4s ease-in-out;}
.showProfile-sideBox .hp-sideBoxInner {right: 0px;}
.profile-imageBox {width: 118px; height: 118px; border-radius: 50%; margin: 0px auto;}
.userRegister-phNo {position: relative; font-size: 24px; line-height: 24px; font-weight: 700; color: #fff; margin: 15px 0px;}
.subscribe-btn {width: 100%; max-width: 200px; font-size: 21px; color: #F1DD80; background: #18202E; border-color: #F1DD80; border-radius: 30px; padding: 5px 25px 5px 10px; font-weight: 600;}
.subscribe-btn:hover {background: transparent linear-gradient(103deg, #FF0000 0%, #E200FF 100%) 0% 0% no-repeat padding-box; color: #fff;}
.premium-logoImg {display: inline-block; width: 40px; height: 40px; margin-right: 20px;}
.rightSide-navBox {border-top: 1px solid #909090; border-bottom: 1px solid #909090; padding: 30px 0px; margin: 25px 0px;}
.rightSide-navList li {margin-bottom: 20px; padding: 0px 20px;}
.rightSide-navList li:last-child {margin-bottom: 0px !important;}
.rightSide-navList li a {font-size: 22px; line-height: 22px; color: #ffffff;}
.rightSide-navList li a:hover {color: #FF009D;}
.signOut-btn {font-size: 18px; line-height: 18px; color: #ffffff; background: #4A4A4A; border-color: #ffffff; border-radius: 30px; padding: 11px 25px; font-weight: 600; cursor: pointer;}
.hp-sideBoxInner .mobView-closeBtn {display: none; width: 100%; max-width: 20px; position: absolute; top: 15px; left: 15px; cursor: pointer;}


/* Footer Section */

.footer-bg {background: #111114; padding: 120px 0px 76px;} 
.footer-HD {font-size: 28px; line-height: 28px; color: #ffffff; font-weight: 500; margin: 0px 0px 25px;}
.footer-nav li {margin-bottom: 15px;}
.footer-nav li:last-child {margin-bottom: 0px !important;}
.footer-nav li a {font-size: 22px; line-height: 22px; color: #909090;}
.footer-nav li a:hover {color: #FF009D;}
.footer-nav.footer-socialNav li {margin-bottom: 30px;}
.social-iconBox {max-width: 40px; display: inline-block;}
.copyright-box, .copyright-box a {color: #909090;}
.copyright-box a:hover {color: #FF009D; text-decoration: underline;}

/* Middle Section */

.middle-section {padding-top: 100px;}
.hero-section {padding: 15px;}
.heroBanner-contentBox {position: absolute; bottom: 20px; left: 0px; width: 100%; font-size: 22px; line-height: 27px;}
.heroBanner-contentBox .container-fluid {padding-left: 40px; padding-right: 40px;}
.heroBanner-contentInner {padding-right: 65px;}
.heroBanner-contentInner p {background: rgba(0, 0, 0, 0.3); padding: 10px; border-radius: 10px;}
.fiftyShades-imgBox {max-width: 400px; margin-bottom: 25px;}
.movie-type li {position: relative; font-size: 30px; line-height: 37px; font-weight: 700; margin-right: 40px;}
.movie-type li:before {content: ''; position: absolute; top: 16px; left: -20px; width: 10px; height: 10px; background: #fff; border-radius: 10px;}
.movie-type li:first-child:before {content: none !important;}
.banner-button .btn {width: 100%; max-width: 375px; padding: 0.8rem 2rem; font-weight: 600;}

/* Movie Type Section */
.movie-typeCarousel-boxes {position: relative;}
.owl-carousel .video-box {margin: 0 7.5px; overflow: hidden; transition: transform 0.3s ease;}
.owl-carousel .video-box img {border-radius: 10px; transition: transform 0.3s ease;}
.owl-carousel .owl-item:not(.center) .video-box {opacity: 0.7;}
.carousel button.carousel-control-prev, .carousel button.carousel-control-next,
.owl-nav button {position: absolute; top: 50%; transform: translateY(-50%); width: 50px; height: 50px; background: #000000 !important; border-radius: 50%;}
.owl-nav button.owl-prev {left: 0px;} 
.owl-nav button.owl-next {left: auto; right: 0px;}
.owl-nav button span {font-size: 55px; line-height: 55px !important; color: #fff; position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%);}

/* SignUp Login Page */

.signUp_logIn-wrappers {width: 100%; padding: 80px 15px; display: flex; justify-content: center;}
.signUp_logIn-inner {width: 100%; max-width: 750px; margin: auto; padding: 40px 80px 80px; background: #000000; border-radius: 37px;}
.signUp_logIn-HD {position: relative; font-size: 30px; line-height: 30px; color: #FFFFFF; font-weight: 600; padding: 0px 30px 10px;}
.signUp_logIn-HD:after {content: ''; position: absolute; left: 0px; right: 0px; bottom: 0px; width: 162px; height: 1px; background: #909090; margin: auto;}
.country-phCode {position: absolute; top: 50%; left: 30px; transform: translateY(-50%); color: #fff; font-size: 24px;}
.ph-loginField.form-control {padding-left: 90px;}
.getOTP-boxWrapper {margin-top: 90px;}
.get-otpBtn {margin-top: 100px;}
.signUp_logIn-inner .btn {width: 100%; max-width: 385px; font-size: 24px; line-height: 24px; margin: auto; padding: 1rem 2rem;}
.afterOTP-boxWrapper {margin-top: 60px;} 
.afterOTP-topTitleBox {font-size: 25px; color: #ffffff; font-weight: 500;}
.sendOtp-phNo {font-size: 30px; line-height: 30px; color: #FFFFFF; font-weight: 600; margin-bottom: 45px;}
.otpInput-filedBox {display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: 1fr; gap: 30px;}

/* Premium Page */

.hero-inner .heroBanner.coverImage {max-height: 880px; min-height: 850px;}
.premiumHero-section .heroBanner-contentBox {bottom: auto; top: 50%; transform: translateY(-50%); padding: 45px 0px 80px;}
.heroBanner-contentInner.premiumHeroBanner-content p {background: transparent; padding: 0px;}
.brandLogo-image {max-width: 300px;}
.premiumLogo-image {max-width: 90px;}
.planType-boxes {border: 2px solid #FEB614; border-radius: 37px; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr; gap: 20px; padding: 40px 28px; background: transparent linear-gradient(293deg, #210101 0%, #A50072 100%) 0% 0% no-repeat padding-box; margin: 50px 0px;}
.plan-box {position: relative;}
.plan-box:before {content: ''; position: absolute; top: 0px; left: -20px; width: 2px; height: 100%; background: #FEB614;}
.plan-box:first-child:before {content: none !important;}
.planbenefits-points li {font-size: 18px; margin-bottom: 20px; position: relative; padding-left: 20px;}
.planbenefits-points li:before {content: ''; position: absolute; top: 9px; left: 0px; width: 0; height: 0; border-left: 8px solid white; /* Triangle color */ border-top: 5px solid transparent; border-bottom: 5px solid transparent;}
.plan-btn {font-size: 24px; width: 100%; max-width: 165px; margin: auto; padding: 6px 10px; border-radius: 10px;}
.plan-btn sub {font-size: 18px; bottom: 0px;}
.planInfo-bottomCont {width: 100%; max-width: 525px; font-size: 16px;}

/* Details Page After Login  */

.detail-backToHome {position: absolute; top: 20px; left: 20px; max-width: 35px; z-index: 9;}
.videoWrapper {background: #000000;}
.video-container {position: relative; max-width: 100%; margin: auto;}
.video-controls {display: flex; justify-content: space-around; align-items: center; background-color: rgba(0, 0, 0, 0.7); color: white; padding: 10px; position: absolute; bottom: 0; width: 100%; visibility: hidden;}
.video-container:hover .video-controls {visibility: visible;}
.video-innerBox a {width: 100%; height: 100% !important; padding-top: 137%; position: relative; overflow: hidden; display: block; border-radius: 35px;}
.video-innerBox a img {position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; object-fit: cover; border-radius: 35px !important; overflow: hidden;}

.entityTitle-HD {font-size: 50px; line-height: 61px; font-weight: 600;}
.shareButton-box .btn {font-size: 38px; line-height: 38px; color: #ffffff; background: #4A4A4A; border-color: #ffffff; border-radius: 40px; padding: 10px 25px; font-weight: 600; width: 100%; max-width: 230px;}
.shareButton-box .btn:hover {background: transparent linear-gradient(103deg, #FF0000 0%, #E200FF 100%) 0% 0% no-repeat padding-box; border-color: var(--theme-color);}
.shareIcon-box {max-width: 38px; margin-left: 10px;}
.zp-meta {font-size: 28px; line-height: 28px; font-weight: 600;}
.zp-rating {border: 2px solid #ffffff; border-radius: 8px; background: #626262; padding: 5px 10px;}
.zp-otherInformation {font-size: 24px; line-height: 34px; font-weight: 500;}
.zp-subHD {font-size: 28px; line-height: 38px;}

/* Payment Page */

.payment-boxes {display: grid; grid-template-columns: repeat(2, 1fr); justify-content: space-between; gap: 140px; margin-bottom: 25px;}
.paymentPaln-infoBox {border: 3px solid #FFFFFF; border-radius: 50px; background: transparent linear-gradient(359deg, #210101 0%, #A50072 100%) 0% 0% no-repeat padding-box; padding: 50px 55px;}
.paymentPaln-title .afterOTP-topTitleBox {padding: 0px 25px; position: relative; border-top: 1px solid #fff; padding-top: 10px; margin-top: 10px;}
.paymentPaln-cont {font-size: 22px; line-height: 27px; font-weight: 500;}
.paymentPaln-buttonBox .btn {width: 100%; max-width: 280px; background: transparent; border: 2px; border-style: solid; border-color: var(--theme-color); font-size: 39px; line-height: 39px; font-weight: 600;}
.paymentPaln-buttonBox .btn sub {font-size: 29px; line-height: 29px; font-weight: 500; bottom: 0px;}
.paymentPaln-buttonBox .btn:hover {background: #1f1f1f; border-color: #ffffff; color: #fff;}
.paymentPaln-bottomTitle .mailTo {font-size: 20px; font-weight: 500;}

.paymentOption-wrapper {background: #000000; border-radius: 37px; padding: 20px;}
.paymentOption-wrapper .accordion-item {background: transparent; border: 0px; border-bottom: 1px solid #F8003E;}
.paymentOption-wrapper .accordion-item:last-child {border-bottom: 0px !important;}
.paymentOption-wrapper .accordion-button {font-size: 25px; line-height: 25px; color: #ffffff; font-weight: 600; padding-left: 20px; padding-right: 20px;}
.paymentOption-wrapper .accordion-button,
.paymentOption-wrapper .accordion-button:focus {background: transparent !important; outline: none; box-shadow: none; border: 0px;}
.accordion-button::after {background-image: url('../images/accordian-circle.svg'); background-repeat: no-repeat; background-size: 30px; width: 30px; height: 30px;}
.accordion-button:not(.collapsed)::after {background-image: url('../images/accordian-activeCircle.svg');}
.accordion-body {padding-left: 20px; padding-right: 20px;}
.upi-logo {width: 100%; max-width: 110px;}
.upiPaymentStep-imageBox {background: #FFFFFF29; padding: 12px 32px; border-radius: 16px;}
.qr-titleBox {position: absolute; left: 0; bottom: -50px; width: 100%;}
.or-text {font-size: 24px; line-height: 24px; font-weight: 500;}
.proceedPayment-buttonBox {margin-top: 100px; margin-bottom: 20px;}
.proceedPayment-buttonBox .btn {width: 100%; max-width: 375px; color: #fff; font-size: 24px;}
.proceedPayment-buttonBox .btn.disabled {cursor: not-allowed; border-color: transparent;}
.creditDebitCard-fromBox .form-label {font-size: 20px;} 

/* Privacy Page */

.privacy-boxesWrappers {display: flex; flex-wrap: wrap; justify-content: space-between;}
.privacy-leftSideBox {flex: 0 0 275px; max-width: 275px; position: sticky; top: 100px; max-height: calc(100vh - 175px); border-top: 4px solid #e50914; overflow-y: auto; -ms-overflow-style: none; scrollbar-width: none;}
.headers-outline ul li {padding-bottom: 20px;}
.headers-outline ul li:first-of-type {padding-top: 20px;}
.headers-outline ul li a {font-size: 14px; font-weight: 500; color: #ffffff; text-decoration: none; line-height: 18px;}
.headers-outline ul li.navigation-item.open>a, 
.headers-outline ul li.navigation-item .child-headers.open>a {border-radius: 4px; background: transparent linear-gradient(103deg, #FF0000 0%, #E200FF 100%) 0% 0% no-repeat padding-box;}
.headers-outline ul li.navigation-item a {display: flex; justify-content: space-between; padding: 8px;}
.headers-outline .header-text, .headers-outline .child-header-text {padding-right: 6px;}
.headers-outline .header-text:only-child {padding-right: 14px;}
.headers-outline ul li .header-arrow::before {content: ""; display: inline-block; border-top: 2px solid #ffffff; border-right: 2px solid #ffffff; width: 8px; height: 8px; margin-top: 2px; transform: rotate(45deg); transition: transform 300ms; vertical-align: middle; margin-left: auto; margin-right: auto; flex-grow: 10;}
.headers-outline li ul li,
.headers-outline li.open ul li {margin: 0 20px; display: inherit;}
.headers-outline ul li:first-of-type {padding-top: 20px;}
.privacy-h-btn.btn {display: none; padding: 2px 7px; border-radius: 5px; line-height: normal; background: #000000; position: fixed; inset-inline-end: 10px; z-index: 9999;}
.privacy-h-btn .hamburger-line {width: 30px;}
.privacy-rightContentBox {flex: 0 0 calc(100% - 275px); max-width: calc(100% - 275px); padding-left: 100px;}
.privacy-rightContentBox a {color: #fff; text-decoration: underline;}
.privacy-rightContentBox a:hover {color: #FF009D;}

/* Help Center */

.helpCenter-boxInner {width: 100%; max-width: 750px; margin: auto; border-radius: 37px;}