/* Roboto fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Public+Sans:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

/* Merriweather fonts */
@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,opsz,wght@0,18..144,300..900;1,18..144,300..900&display=swap');

/* Sora fonts */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@100..800&display=swap');

/* ============== Utalities Class Start ============== */

.montserrat-font {
  font-family: "Montserrat", sans-serif !important;
}

.inter-font {
  font-family: "Inter", sans-serif !important;
}

.roboto-font {
  font-family: "Roboto", sans-serif !important;
}

/* %%%%%%%%%%%%%%%%%%%% UTILITIES STARTS %%%%%%%%%%%%%%%%%%%% */

/* font-weight utilities starts */

.font-100 {
  font-weight: 100 !important;
}

.font-200 {
  font-weight: 200 !important;
}

.font-300 {
  font-weight: 300 !important;
}

.font-400 {
  font-weight: 400 !important;
}

.font-500 {
  font-weight: 500 !important;
}

.font-600 {
  font-weight: 600 !important;
}

.font-700 {
  font-weight: 700 !important;
}

.font-800 {
  font-weight: 800 !important;
}

/* font-weight utilities ends */

/* font-size utilities starts */
.font-12 {
  font-size: 12px !important;

}

.font-14 {
  font-size: 14px !important;

}

.font-16 {
  font-size: 16px !important;

}

.font-18 {
  font-size: 18px !important;

}

.font-20 {
  font-size: 20px !important;

}

.font-22 {
  font-size: 22px !important;

}

.font-24 {
  font-size: 24px !important;

}

.font-26 {
  font-size: 26px !important;

}

.font-28 {
  font-size: 28px !important;

}

.font-30 {
  font-size: 30px !important;

}

.font-46 {
  font-size: 46px !important;

}

.font-48 {
  font-size: 48px !important;

}

/* font-size utilities ends */

.bluecolor {
  color: #3F9FFF !important;
}

.bluebg {
  background: #3F9FFF !important;
}

.lightbluebg {
  background: #54D6EF !important;
}

.graybg {
  background: #404040 !important;
}

.darkgraybg {
  background: #141414 !important;

}

.lightgraybg {
  background: #292929 !important;

}

.lightskycolor {
  color: #0CB9F2 !important;

}

/* %%%%%%%%%%%%%%%%%%%% UTILITIES ENDS %%%%%%%%%%%%%%%%%%%% */

/*%%%%%%%%%%%%%%%%%%%% HEADER-CSS-starts %%%%%%%%%%%%%%%%%%%%*/
body {
  background: #0A070B;

}

.header-sec {
  background: url(../images/headerbg-img.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  height: 544px;
  transition: 0.5s;
  position: relative;
}

.header-sec::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 50%;
  height: 100px;
  box-shadow: 11px 8px 81px 40px #203B56;
  border-bottom-left-radius: 100px;
  border-bottom-right-radius: 99px;
  z-index: -1;
  margin-bottom: 40px;
}

.signin-btn a {
  border-radius: 5px;
  padding: 8px 30px;
  transition: 0.5s;

}

.signin-btn a:hover {
  border-radius: 5px;
  padding: 8px 30px;
  background-color: #3eb5cd !important;
  transition: 0.5s;
}

.site-logo {
  width: 210px;
  height: auto;
  margin: 0 auto;
}

.site-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.header-detail h1 {
  font-size: 58px;
}

.get-outer {
  position: relative;
  margin-top: 20px;
}

.get-outer .form-control {
  padding: 11px 96px 11px 8px;
  border-radius: 2px;
}

.get-outer button {
  position: absolute;
  top: 0;
  right: 0;
  padding: 10.5px;
  border-left: 1px solid #357C8B !important;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}

.get-outer ::placeholder {
  font-size: 12px;
  color: #807E81;
  font-weight: 500;
  font-family: "Roboto", sans-serif !important;
}

@media (min-width:768px) and (max-width: 1200px) {
  .header-detail h1 {
    font-size: 38px;
  }

  .header-detail p {
    font-size: 18px !important;
  }
}

@media (max-width:768px) {
  .header-sec {
    height: 480px !important;
  }

  .header-detail h1 {
    font-size: 28px;
  }

  .header-detail p {
    font-size: 18px !important;
    margin-top: 15px;
  }

  .site-logo {
    margin: 0 auto;
    width: 239px;

  }
}

@media (max-width:576px) {
  .header-sec {
    height: 435px !important;
  }

  .site-logo {
    margin: 0 auto;
    width: 150px;
  }

  .header-sec::before {
    margin-bottom: 57px;
  }
}

@media (max-width:425px) {
  .header-detail h1 {
    font-size: 24px;
  }
}

/*%%%%%%%%%%%%%%%%%%%% HEADER-CSS-endss %%%%%%%%%%%%%%%%%%%%*/

/*%%%%%%%%%%%%%%%%%%%%  MAIN section css starts %%%%%%%%%%%%%%%%%%%%*/

/* latest-releases-sec-css Starts */
.latest-releases-sec .release-card {
  width: 100%;
  height: 335px;
  position: relative;
}

.latest-releases-sec .release-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 2px solid #8B8B8B;
  border-radius: 28px;
}

.numver-overlay {
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 0 10px;
  z-index: 999;
}

.numver-overlay h1 {
  position: absolute;
  font-size: 168px;
  bottom: -33px;
  right: 36px;
  font-weight: 800;
  color: white;
  text-shadow:
    2px 0 0 black,
    -2px 0 0 black,
    0 2px 0 black,
    0 -2px 0 black,
    1px 1px 0 black,
    -1px -1px 0 black,
    -1px 1px 0 black,
    1px -1px 0 black;
}

.number-bg {
  width: 100px;
  height: 58px;
  border-radius: 50px 0 25px 0;
  margin-bottom: 5px;
  background: #0CB9F2;
}

.latest-releases-sec .owl-carousel {
  position: relative;
}

.latest-releases-sec .owl-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.latest-releases-sec .owl-prev,
.latest-releases-sec .owl-next {
  border-radius: 22px !important;
  background: #a8a6a994 !important;
  color: #ffff !important;
  width: 36px;
  height: 36px;
}

.latest-releases-sec .owl-prev {
  position: absolute;
  top: 41%;
  left: -17px;
}

.latest-releases-sec .owl-next {
  position: absolute;
  top: 41%;
  right: -17px;
}

.latest-releases-sec .owl-dots {
  display: none !important;
}

.seeall-outer button {
  border: 2px solid #3F9FFF !important;
  background: transparent;
  border-radius: 9px;
  padding: 6px 50px;
  transition: 0.3s;

}

.seeall-outer button:hover {
  border: 2px solid #3F9FFF !important;
  background: #3F9FFF;
  border-radius: 9px;
  padding: 6px 50px;
  color: #ffff !important;
  transition: 0.3s;
}

@media (max-width:576px) {
  .latest-releases-sec .owl-prev {
    position: absolute;
    top: 100%;
    left: 35%;
  }

  .latest-releases-sec .owl-next {
    position: absolute;
    top: 100%;
    right: 35%;
  }

  .specialsmovies-sec .owl-prev {
    position: absolute;
    top: 100% !important;
    left: 30% !important;
  }

  .specialsmovies-sec .owl-next {
    position: absolute;
    top: 100% !important;
    right: 30% !important;
  }

  .seeall-outer button {
    margin: 45px 0 0;
  }

  .latest-releases-sec .release-card {
    height: 300px;
  }

  .numver-overlay h1 {
    font-size: 100px;
    bottom: -11px;
  }

  .plan-card ul li {
    height: 33px !important;
  }

  .plandetail-card ul li {
    height: 40px !important;
  }

  .watch-live-sec h1,
  .your-plan-sec h1 {
    margin-top: 20px !important;
    font-size: 28px !important;
  }

  .watch-live-sec {
    height: 400px !important;
  }

  .specialsmovies-sec {
    height: 600px !important;
  }

}

@media(max-width:992px) {
  .plandetail-card {
    padding-top: 0px !important;
  }

  .watch-live-sec h1,
  .your-plan-sec h1 {
    margin-top: 40px !important;
  }
}

/* latest-releases-sec-css Ends */

/* Watch-live-Channels-sec-css-starts */
.watch-live-sec {
  height: 420px;
  background: url(../images/watchlivetv-bgimg.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Watch-live-Channels-sec-css-ends */

/* your-plan-sec-sec-css-starts */
.your-plan-sec {
  position: relative;
}

.your-plan-sec::before {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 50%;
  height: 100px;
  box-shadow: 11px 8px 81px 40px #203B56;
  border-bottom-left-radius: 100px;
  border-bottom-right-radius: 99px;
  z-index: -1;
  top: -180px;
}

.watch-live-sec h1,
.your-plan-sec h1 {
  margin-top: 80px;
  font-size: 44px;
}

.plandetail-card {
  padding-top: 130px;
}

.plandetail-card ul li {
  height: 51px;
}

.plan-card {
  border: 2px solid #54D6EF;
  background: #D9D9D91A;
  border-radius: 20px;

}

.plan-card ul li {
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #787878;
}

.plan-card button {
  padding: 8px 40px;
}

/* your-plan-sec-sec-css-ends */

/*%%%%%%%%%%%%%%%%%%%%  MAIN section css ednss %%%%%%%%%%%%%%%%%%%%*/

/*%%%%%%%%%%%%%%%%%%%%  Subscription section css Start %%%%%%%%%%%%%%%%%%%%*/
.subscription-sec {
  background: #292929;

}

.subscription-sec .news-letter-img {
  margin-top: -110px;

}

.subscription-sec .footer-get-btn {
  background: #54D6EF;
  font-size: 14px;
  border: none;
  border-radius: 10px;
  position: absolute;
  top: 4px;
  right: 5px;
  color: black;

}

.subscription-sec .form-control {
  background: #D9D9D9;
  box-shadow: 0px 4px 4px 0px #00000040;
  font-size: 14px;
  color: black;
  padding: 9px 105px 9px 10px;
  border-radius: 10px;
}

/*%%%%%%%%%%%%%%%%%%%%  Subscription section css End %%%%%%%%%%%%%%%%%%%%%%*/

/*%%%%%%%%%%%%%%%%%%%%  FOOTER-CSS starts %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
.footer-sec {
  background: url(../images/footerbg-img.png) no-repeat center center;
  background-size: cover;
}

.footer-sec .footer-logo {
  width: 222px;
  height: auto;
}

.footer-sec .footer-social-links img {
  width: 42px;
  height: auto;
}

.footer-sec .footer-links :not(:last-child) {
  margin-right: 30px;
}

.footer-sec .devider-line {
  border-top: var(--bs-border-width) solid white;
  opacity: 1;
}

.activee {
  color: #007bff !important;
  border-bottom: 1px solid #007bff;
}

.footer-links a:hover {
  color: #007bff !important;
  border-bottom: 1px solid #007bff;
}

@media (max-width: 768px) {
  .footer-sec .footer-logo {
    width: 180px;
    height: auto;
  }
}

@media (max-width: 576px) {
  .footer-sec .footer-logo {
    width: 140px;
    height: auto;
  }

  .subscription-sec .footer-get-btn {
    position: relative;
  }

  .subscription-sec .form-control {
    padding: 9px 10px 9px 10px;
  }

  .subscription-sec .news-letter-img {
    margin-top: -76px;
  }
}

/*%%%%%%%%%%%%%%%%%%%%  FOOTER-CSS ednss %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/

/*%%%%%%%%%%%%%%%%%%%%  innerpages-CSS starts %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
.breadcrumb-item+.breadcrumb-item::before {
  color: #ffff !important;
}

.innerheader {
  height: 387px;
}

.populor-card {
  border: 1px solid #0CB9F2;
  border-radius: 15px;
  height: 100%;
}

.latest-releases-sec .populr-imgouter {
  width: 100%;
  height: 294px;
  position: relative;
}

.latest-releases-sec .populr-imgouter img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 15px 15px 0 0;
}

.popular-detail {
  border-radius: 0 0 15px 15px;
}

.heartshare-outer {
  width: 35px;
  height: 35px;
  background-color: #0A070B;
  border-radius: 20px;
  padding: 4px;
}

.heartshare-outer img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.heartshare-parent {
  position: absolute;
  top: 0;
  right: 0;
  padding: 18px 8px 0 0;
}

.specialsmovies-sec {
  height: 693px;
  background: url(../images/watchlivetv-bgimg.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.specialsmovies-sec .owl-carousel {
  position: relative;
}

.specialsmovies-sec .owl-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.specialsmovies-sec .owl-prev,
.specialsmovies-sec .owl-next {
  border-radius: 22px !important;
  background: #a8a6a994 !important;
  color: #ffff !important;
  width: 36px;
  height: 36px;
}

.specialsmovies-sec .owl-prev {
  position: absolute;
  top: 41%;
  left: -17px;
}

.specialsmovies-sec .owl-next {
  position: absolute;
  top: 41%;
  right: -17px;
}

.specialsmovies-sec .owl-dots {
  display: none !important;
}

/* moview-player-css starts */
.moviewouter {
  width: 100%;
  height: 500px;
  position: relative;
}

.moviewouter video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 15px 15px 0 0;
}

.video-overlay {
  opacity: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 99;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.5s;

}

.moviewouter:hover .video-overlay {
  opacity: 1;
  transition: 0.5s;
}

.moviewplayer-card {
  height: 100%;
  border: 1px solid #0CB9F2;
  border-radius: 15px;
}

.movieplayer-sec .tab-content {
  overflow-y: scroll;
  overflow-x: hidden;
  max-height: 106vh;
}

.moview-playerdetail {
  border-radius: 0 0 15px 15px;
}

.movieplayer-sec .footer-social-links img {
  width: 42px;
  height: 42px;
}

.movie-playlist-card .playlist-imgouter {
  width: 180px;
  height: 128px;
  flex-shrink: 0;
}

.playlist-imgouter video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}

.movieplayer-sec .tab-content::-webkit-scrollbar-thumb {
  background-color: #007bff;
}

.movieplayer-sec .nav-pills .nav-link.active,
.movieplayer-sec .nav-pills .show>.nav-link {
  background-color: #30C1E3;
  color: #0A070B;
  font-weight: 700;
}

.movieplayer-sec .nav-item button {
  width: 85px;
  height: 27px;
  line-height: 0;
}

.movieplayer-sec .nav-pills .nav-link {
  background: #525252;
  color: #ffff;
  border-radius: 4px;
  font-weight: 700;

}

.movieplayer-sec .tab-content::-webkit-scrollbar-thumb {
  background-color: #30C1E3;
  border-radius: 10px;
}

.movieplayer-sec .tab-content::-webkit-scrollbar-thumb:hover {
  background-color: #0056b3;
}

.movieplayer-sec .tab-content {
  scrollbar-color: #30C1E3 #0A070B;
  scrollbar-width: thin;
}

.video-overlay img {
  box-shadow: 0px 0px 24px 0px #00000073;
  border-radius: 50%;
  width: 60px;
  height: auto;
  cursor: pointer;
}

@media (max-width: 576px) {
  .video-overlay img {
    width: 40px;
    height: auto;
  }

  .movie-playlist-card .playlist-imgouter {
    width: 160px !important;
    height: 110px !important;
  }

  .down-fvt-icons img {
    width: 25px;
    height: auto;
  }

  .innerheader {
    height: 318px !important;
  }

  .moviewouter {
    height: 200px !important;
  }
}

@media (min-width: 576px) and (max-width: 768px) {
  .moviewouter {
    height: 330px !important;
  }

  .movieplayer-sec .tab-content {
    max-height: 80vh !important;
  }
}

@media (min-width: 992px) and (max-width: 1490px) {
  .movieplayer-sec .tab-content {
    max-height: 130vh !important;
  }
}

@media (max-width:318px) {
  .movie-playlist-card {
    display: block !important;
    text-align: -webkit-center;
  }

  .movie-playlist-card .playlist-imgouter {
    width: 100% !important;
    height: 130px !important;
  }

  .playlist-detail {
    margin-top: 16px;
  }
}

@media (max-width:992px) {
  .moviewouter {
    height: 350px !important;
  }
}

/*==========================  Contact Us page start ========================== */
.contact-us-sec .form-control {
  border: 1px solid hsl(0, 0%, 73%);
  background: #292929 !important;
  border-radius: 8px;
  box-shadow: 0px 4px 4px 0px #0000001A;
  font-size: 14px;
  font-family: "Roboto", sans-serif !important;
  font-weight: 400;
  padding: 9px 15px;
}

.contact-us-sec ::placeholder {
  color: white;
  font-weight: 400;
  font-size: 14px;
  font-family: "Roboto", sans-serif !important;
}
/*==========================  Contact Us page End ============================ */

/*==========================  FAQs page start ========================== */
.bleuer-faqs-sec .accordion-button {
  border-radius: 10px !important;
  font-weight: bold;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  margin-bottom: 15px;
  font-size: 18px;
  box-shadow: 0px 0px 24px 0px #00000026;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px;
  background: #292929;
  margin-bottom: 0;
  gap: 20px;
  color: white;
}

.bleuer-faqs-sec .accordion-button::after {
  display: none;
}

.bleuer-faqs-sec .accordion-item {
  background: white;
  border-radius: 10px;
  margin-bottom: 14px;
  border: none;
  background: #292929;
  color: white;
}

@media (max-width:576px) {
  .bleuer-faqs-sec .accordion-button {
    align-items: start;
    font-size: 16px;
  }

  .bleuer-faqs-sec p {
    font-size: 14px !important;
  }

  .map-sec iframe {
    height: 200px !important;
  }
}

/* ========================== FAQs page End ========================== */
/*%%%%%%%%%%%%%%%%%%%%  innerpages-CSS ednss %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/

/* Loader overlay */
#global-loader {
  display: none;
  position: fixed;
  z-index: 2000;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.5);
  align-items: center;
  justify-content: center;
}
#global-loader .spinner-border {
  width: 4rem;
  height: 4rem;
  color: #3F9FFF;
}

/* Toasts */
#toast-container {
  position: fixed;
  top: 1.5rem;
  right: 1.5rem;
  z-index: 3000;
}
.toast {
  min-width: 250px;
  opacity: 1;
}
.toast-success {
  background-color: #28a745;
  color: #fff;
}
.toast-error {
  background-color: #dc3545;
  color: #fff;
}

/*%%%%%%%%%%%%%%%%%%%%  entertainment-sec-CSS starts %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
.entertainment-sec {
  background: url(../images/entertairment-img.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.entertairment-img {
  width: 100%;
}

.entertairment-img img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: inline-block;
}

.familyuse-sec {
  margin-bottom: 45px;
}

.familyuse-img {
  width: 100%;
}

.familyuse-img img {
  width: 100%;
  height: auto;
  margin: 0;
  object-fit: cover;
  display: inline-block;
}

@media (min-width: 1000px) {
  .familyuse-img img {
    margin: 0 0 0 -100px;
  }
}

@media (min-width:1920px) {
  .familyuse-sec {
    margin-bottom: 400px;
  }
}

.suport-contact {
  box-shadow: 0px 0px 24px 0px #54D6EF;
  border-radius: 10px;
}

.suport-contact a {
  word-break: break-all;
}

/*%%%%%%%%%%%%%%%%%%%%  entertainment-sec-CSS ednss %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/

/*%%%%%%%%%%%%%%%%%%%%  dashbaord-CSS starts %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
.dashboard-header {
  height: 430px;
}

.dashboard-header {
  margin: 0px 0 223px 0;
}

.dashboard-header.header-sec::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 50%;
  height: 110px;
  box-shadow: 52px 8px 171px 110px #203B56;
  border-bottom-left-radius: 100px;
  border-bottom-right-radius: 99px;
  z-index: -1;
  margin-bottom: 40px;
}

.userprofile-detail .profileimg-outer {
  width: 190px;
  height: 190px;
}

.profileimg-outer .progileimg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  border: 1px solid #000000;
  box-shadow: 0 6px 6px -2px rgba(48, 193, 227, 0.8);
}

.userprofile-detail #inputGroupFile02 {
  display: none;
}

.userprofile-detail .custom-file-upload {
  cursor: pointer;
  display: inline-block;
}

.userprofile-detail .custom-file-upload img {
  width: 100px;
  height: auto;
}

.dashboard-profiletabs-sec .nav-item button {
  width: 100%;
  font-weight: 800;
  font-family: "Roboto", sans-serif !important;

}

.dashboard-profiletabs-sec .nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
  background-color: transparent !important;
  border-radius: 0;
  border: none;
  color: #0A070B;
  border-bottom: 3px solid #0A070B;
  padding: 0 05px 0 !important;
  font-weight: 800;
  padding: 0 !important;
}

.dashboard-profiletabs-sec .nav-link {
  color: #0A070B;
  font-weight: 700;
}

.myfvt-card .myfvt-imgouter {
  width: 100%;
  height: 295px;
}

.myfvt-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 15px 15px 0 0;
}

.myfvt-detail {
  border-radius: 0 0 15px 15px;
}

.myfvt-card {
  position: relative;
  border: 1px solid #0CB9F2;
  border-radius: 15px;
  height: 100%;
}

.myfvt-card .heartshare-parent {
  position: absolute;
  top: 0;
  right: 0;
}

.dashboard-tabs ::placeholder {
  color: #FFFFFF;
  font-family: "Roboto", sans-serif !important;
  font-size: 14px;
  font-weight: 300;
}

.dashboard-tabs .form-control {
  padding: 13px 20px !important;
}

@media (max-width:768px) {
  .dashboard-profiletabs-sec .nav-link {
    font-size: 18px;
  }

  .dashboard-header {
    margin: 0px 0 153px 0;
  }

  .userprofile-detail .profileimg-outer {
    width: 137px;
    height: auto;
  }

  .dashboard-header {
    height: 398px !important;
  }
}

@media (max-width: 576px) {
  .dashboard-header {
    height: 333px !important;
  }

  .wellcome-sec h1,
  .entertainment-sec h1,
  .familyuse-sec h1 {
    font-size: 24px !important;
  }
  .wellcome-sec p,
  .entertainment-sec P,
  .familyuse-sec p {
    font-size: 14px !important;
  }

  .wellcome-sec h3{
    font-size: 18px;
  }

  .suport-contact a {
    font-size: 14px !important;

  }

  .familyuse-sec {
    margin-bottom: 62px !important;
  }
  .subscription-sec h5{
    font-size: 16px !important;
  }
}

/*%%%%%%%%%%%%%%%%%%%%  dashbaord-CSS ednss %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/

/* Content Info Overlay Styles */
.content-info-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
    padding: 20px 15px 15px;
    opacity: 0;
    transition: opacity 0.3s ease;
    border-radius: 0 0 8px 8px;
}

.release-card:hover .content-info-overlay {
    opacity: 1;
}

.content-info-overlay h5 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 5px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.content-info-overlay small {
    font-size: 12px;
    opacity: 0.8;
}

.content-info-overlay .btn {
    font-size: 11px;
    padding: 4px 8px;
    border-radius: 4px;
}

/* Ensure proper positioning for release cards */
.release-card {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
}

.release-card img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.release-card:hover img {
    transform: scale(1.05);
}

/* Content Details Page Styles */
.content-details-sec {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    min-height: 100vh;
}

/* Auto-Pause Video Styles */
.inactivity-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(5px);
}

.inactivity-content {
    background: rgba(255, 255, 255, 0.1);
    padding: 2rem;
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    animation: fadeInScale 0.3s ease-out;
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.auto-pause-settings {
    background: rgba(255, 255, 255, 0.05);
    padding: 1rem;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.auto-pause-settings .form-check-input:checked {
    background-color: #dc3545;
    border-color: #dc3545;
}

.auto-pause-settings .form-check-input:focus {
    box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
}

#autoPauseStatus {
    background: linear-gradient(135deg, #17a2b8, #138496);
    border: none;
    border-radius: 10px;
    animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#resumeButton {
    background: linear-gradient(135deg, #dc3545, #c82333);
    border: none;
    border-radius: 25px;
    padding: 0.75rem 2rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
}

#resumeButton:hover {
    background: linear-gradient(135deg, #c82333, #bd2130);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(220, 53, 69, 0.4);
}

/* Video container positioning for overlay */
.video-container {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

/* Caption Styles */
.caption-overlay {
    position: absolute;
    bottom: 20px;
    left: 20px;
    right: 20px;
    z-index: 10;
    pointer-events: none;
}

/* Fullscreen caption overlay styles */
.fullscreen-caption-overlay {
    position: fixed !important;
    bottom: 60px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 2147483647 !important;
    font-size: 24px !important;
    max-width: 90% !important;
    pointer-events: none !important;
    background: rgba(0, 0, 0, 0.8) !important;
    color: white !important;
    padding: 15px 25px !important;
    border-radius: 8px !important;
    font-weight: bold !important;
    text-align: center !important;
}

.caption-text {
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 18px;
    font-weight: 500;
    text-align: center;
    line-height: 1.4;
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    max-width: 100%;
    word-wrap: break-word;
    animation: fadeInUp 0.3s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.caption-controls {
    background: rgba(255, 255, 255, 0.05);
    padding: 15px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

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

.caption-controls .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.caption-controls .btn.active {
    background: #dc3545;
    border-color: #dc3545;
    color: white;
}

.caption-controls .form-select {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
}

.caption-controls .form-select:focus {
    background: rgba(255, 255, 255, 0.15);
    border-color: #dc3545;
    box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
}

.caption-controls .form-select option {
    background: #1a1a2e;
    color: white;
}

#captionStatus {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}

/* Metadata Scraping Styles */
.metadata-method-selection .card {
    border: 2px solid #e9ecef;
    transition: all 0.3s ease;
}

.metadata-method-selection .card:hover {
    border-color: #dc3545;
    box-shadow: 0 4px 15px rgba(220, 53, 69, 0.1);
}

.metadata-method-selection .form-check {
    padding: 15px;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.metadata-method-selection .form-check:hover {
    background-color: rgba(220, 53, 69, 0.05);
}

.metadata-method-selection .form-check-input:checked + .form-check-label {
    color: #dc3545;
    font-weight: 600;
}

.metadata-method-selection .form-check-label i {
    margin-right: 8px;
    font-size: 16px;
}

#movieSearchSection {
    animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#searchResults .card {
    max-height: 400px;
    overflow-y: auto;
}

#searchResults .list-group-item {
    border: 1px solid #e9ecef;
    margin-bottom: 5px;
    border-radius: 8px;
    transition: all 0.3s ease;
}

#searchResults .list-group-item:hover {
    background-color: #f8f9fa;
    border-color: #dc3545;
    transform: translateX(5px);
}

#searchResults .list-group-item h6 {
    color: #dc3545;
    font-weight: 600;
}

#searchResults .list-group-item small {
    font-size: 0.75rem;
}

#searchLoading .spinner-border {
    width: 3rem;
    height: 3rem;
    border-width: 0.3em;
}

.movie-search-result {
    cursor: pointer;
    transition: all 0.3s ease;
}

.movie-search-result:hover {
    background-color: #f8f9fa;
    transform: scale(1.02);
}

.search-result-poster {
    width: 60px;
    height: 90px;
    object-fit: cover;
    border-radius: 4px;
}

.search-result-info {
    flex: 1;
    padding-left: 15px;
}

.search-result-title {
    font-weight: 600;
    color: #dc3545;
    margin-bottom: 5px;
}

.search-result-overview {
    color: #6c757d;
    font-size: 0.9rem;
    line-height: 1.4;
}

.search-result-meta {
    font-size: 0.8rem;
    color: #adb5bd;
    margin-top: 5px;
}

.content-poster img {
    width: 100%;
    max-width: 400px;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    transition: transform 0.3s ease;
}

.content-poster img:hover {
    transform: scale(1.02);
}

.content-info h1 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.content-description,
.content-genre,
.content-director,
.content-cast {
    margin-bottom: 1.5rem;
}

.content-description h5,
.content-genre h5,
.content-director h5,
.content-cast h5 {
    color: #fff;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.content-description p,
.content-director p,
.content-cast p {
    color: #ccc;
    line-height: 1.6;
}

.streaming-controls .btn {
    padding: 12px 30px;
    font-weight: 600;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.streaming-controls .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.video-player-section {
    background: rgba(0, 0, 0, 0.3);
    padding: 2rem;
    border-radius: 15px;
    backdrop-filter: blur(10px);
}

.video-container {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.video-container video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.related-content-card {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    overflow: hidden;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.related-content-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    background: rgba(255, 255, 255, 0.15);
}

.related-content-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.related-content-info {
    padding: 1rem;
}

.related-content-info h6 {
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.footer-sec {
    background: #0a0a0a;
    border-top: 1px solid #333;
}

/* Responsive Design */
@media (max-width: 768px) {
    .content-info h1 {
        font-size: 2rem;
    }
    
    .streaming-controls .btn {
        padding: 10px 20px;
        font-size: 0.9rem;
    }
    
    .video-player-section {
        padding: 1rem;
    }

   
}

/* Movies page carousel styling */
#popular-movies-carousel,
#special-movies-carousel,
#recommended-movies-carousel {
    max-width: 100%;
}

#popular-movies-carousel .item,
#special-movies-carousel .item,
#recommended-movies-carousel .item {
    width: 100%;
    padding: 0 7.5px;
}

#popular-movies-carousel .release-card,
#special-movies-carousel .release-card,
#recommended-movies-carousel .release-card {
    width: 100%;
    height: auto;
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s ease;
}

#popular-movies-carousel .release-card:hover,
#special-movies-carousel .release-card:hover,
#recommended-movies-carousel .release-card:hover {
    transform: translateY(-5px);
}

#popular-movies-carousel .release-card img,
#special-movies-carousel .release-card img,
#recommended-movies-carousel .release-card img {
    width: 100%;
    height: 300px;
    object-fit: cover;
}

@media (max-width: 767px) {
    #popular-movies-carousel .item,
    #special-movies-carousel .item,
    #recommended-movies-carousel .item {
        padding: 0 5px;
    }
    
    #popular-movies-carousel .release-card img,
    #special-movies-carousel .release-card img,
    #recommended-movies-carousel .release-card img {
        height: 250px;
    }
}