* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

:root {
  --cinema-red: rgb(225, 25, 44);
  --hollywood-gold: #f8e231;
  --midnight-blue: #1a1d23;
}

body {
  position: relative;
  padding: 100.5px 0;
  padding-bottom: 120px;
  background-color: var(--midnight-blue);
}

body::-webkit-scrollbar {
  display: none;
}

header {
  background-color: var(--cinema-red);
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
}

header .logoDiv {
  width: 80%;
  max-width: 300px;
  height: 100%;
  margin-left: -6px;
}

header .logoDiv img {
  width: 100%;
  height: 100%;
}

header .iconDiv {
  height: 100%;
  margin-right: 16px;
}

header .iconDiv i {
  font-size: 25px;
  margin-top: 23px;
  color: #fff;
}

.menuItemDiv {
  background-color: var(--cinema-red);
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  height: 0;
  overflow: hidden;
  transition: all 0.5s;
}

.menuItemDiv a {
  font-size: 0.8rem;
  font-weight: bold;
  color: #fff;
}

.openMenu {
  height: 50px;
}

.searchDiv {
  width: 100%;
  margin-bottom: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.searchDiv input {
  width: 85%;
  max-width: 500px;
  padding: 12px 20px;
  border: none;
  outline: none;
  border-radius: 20px;
  transition: border 0.5s ease;
  font-size: 16px;
  font-weight: bold;
  color: var(--cinema-red);
  z-index: 3;
}

.searchDiv input:focus {
  border: 3px solid var(--cinema-red);
}

.searchDiv input::placeholder {
  font-size: 14px;
  font-weight: bold;
  color: var(--midnight-blue);
}

.searchDiv .resultsDiv {
  position: absolute;
  top: 50%;
  width: 85%;
  max-width: 500px;
  /* max-height: 300px; */
  background-color: var(--cinema-red);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  gap: 8px;
  overflow-y: scroll;
  padding-top: 50px;
  padding-bottom: 16px;
  display: none;
  z-index: 2;
}

.searchDiv .resultsDiv::-webkit-scrollbar {
  display: none;
}

.result {
  width: 95%;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0.5px solid var(--midnight-blue);
  border-radius: 8px;
  box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.35);
  transition: all 0.2s;
  color: var(--midnight-blue);
  cursor: pointer;
}

.result:active {
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.5);
}

.result:hover {
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.5);
  text-decoration: underline;
}

.searchDiv .resultsDiv .result:active .resultImgDiv {
  height: 58.5px;
  width: 48.5px;
}

.searchDiv .resultsDiv .result:active .resultName {
  font-size: 0.845rem;
}

.resultsDiv .result .resultImgDiv {
  width: 50px;
  height: 60px;
  overflow: hidden;
  border-radius: 4px;
  margin: 6px 5px 6px 12px;
  transition: all 0.2s;
}

.resultsDiv .result .resultImgDiv img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.resultsDiv .result .resultName {
  flex: 80%;
  font-size: 0.9rem;
  text-align: center;
  padding: 0 4px;
  transition: all 0.2s;
}

.modalBgDiv {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.35);
  display: none;
  align-items: center;
  justify-content: center;
  transition: all 0.6s;
  z-index: 100;
}

.modalIn {
  animation: openModal 0.6s ease-in;
}

.modalOut {
  animation: closeModal 0.6s ease-out;
}

@keyframes openModal {
  0% {
    opacity: 0.3;
  }
  100% {
    opacity: 1;
  }
}

@keyframes closeModal {
  0% {
    opacity: 0.8;
  }
  100% {
    opacity: 0;
  }
}

.modalDiv {
  background-color: #ededed;
  width: 90%;
  max-width: 400px;
  max-height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 10px;
  border-radius: 12px;
  position: relative;
  font-family: "poppins", Sans-Serif;
}

.modalDiv h1 {
  font-size: 1.2rem;
  text-align: center;
  font-weight: bold;
  color: var(--midnight-blue);
  margin-bottom: 0.7rem;
}

.close {
  font-size: 1.2rem;
  position: absolute;
  top: 8px;
  right: 16px;
  transition: all 0.35s;
  cursor: pointer;
}

.close:active {
  color: var(--cinema-red);
  font-size: 1.5rem;
}

.modalDetailsDiv {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.modalDetailsDiv p {
  font-size: 0.8rem;
  font-weight: bold;
  line-height: 1.3;
}

.how {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.how h2 {
  font-size: 1rem;
  text-align: center;
  font-weight: bold;
  color: var(--midnight-blue);
  margin: 0.7rem 0;
}

.how ul {
  color: var(--midnight-blue);
  list-style-type: square;
}

.how ul li {
  font-size: 0.8rem;
  font-weight: bold;
  line-height: 1.5;
}

strong {
  margin: 1rem 0;
  font-size: 1.05rem;
}

.okBtn {
  margin: 0.6rem 0;
  padding: 6px 1.8rem;
  border: none;
  border-radius: 6px;
  font-weight: bold;
  outline: none;
  background-color: green;
  transition: all 0.5s;
  cursor: pointer;
}

.okBtn:active {
  background-color: #1ec300;
  font-size: 0.8rem;
}

main {
  margin: 40px 0;
}

main .hype {
  text-align: center;
  font-family: "poppins", sans-serif;
  margin: 0.3rem 0 2rem;
  color: var(--cinema-red);
  text-decoration: underline var(--cinema-red);
  font-size: 1.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: -999;
}

main .hype::after,
main .hype::before {
  content: "⭐";
  font-size: 1rem;
  text-decoration: underline var(--midnight-blue);
  z-index: -2;
}

main .hype::after {
  margin-left: 6px;
}

main .hype::before {
  margin-right: 6px;
}

/* Categories Buttons Styles */
.categoryDiv {
  display: grid;
  place-content: center;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 20px 10px;
  padding: 0 16px;
  margin-bottom: 1.8rem;
}

.categoryDiv button {
  padding: 10px 0;
  border-radius: 6px;
  outline: none;
  border: 2px solid #fff;
  font-weight: bold;
  background-color: transparent;
  color: #fff;
  cursor: pointer;
  transition: all 0.1s;
  font-size: 0.84rem;
  position: relative;
  z-index: 1;
}

.categoryDiv button:active {
  border-color: var(--hollywood-gold);
  color: var(--hollywood-gold);
  border-width: 1.8px;
  font-size: 0.85rem;
  background-color: #262930;
}

/* Categories Divs */

.hollywoodMoviesDiv {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  row-gap: 4rem;
  font-family: "poppins", sans-serif;
  display: none;
}

.hollywoodMoviesDiv .movieDiv {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 90%;
  max-width: 500px;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 0 10px rgba(255, 22, 14, 0.2);
  /* z-index: -2; */
}

.hollywoodMoviesDiv .movieDiv .imgDiv {
  width: 100%;
  flex: 90%;
}

.hollywoodMoviesDiv .movieDiv .imgDiv img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hollywoodMoviesDiv .movieDiv .detailsDiv {
  width: 100%;
  flex: 10%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.hollywoodMoviesDiv .movieDiv .detailsDiv .name {
  margin: 1rem 12px;
  font-size: 16px;
  color: #fff;
  text-align: center;
  font-weight: 600;
}

.hollywoodMoviesDiv .movieDiv .detailsDiv .rateDiv {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: end;
  margin-bottom: 1rem;
}

.hollywoodMoviesDiv .movieDiv .detailsDiv .rate {
  margin-right: 20px;
  background-color: var(--hollywood-gold);
  display: inline;
  padding: 4px 8px;
  border-radius: 6px;
  font-weight: bold;
  color: var(--cinema-red);
  font-size: 0.7rem;
  box-shadow: 0 0 4px rgba(231, 235, 0, 0.35);
}

.nigeriaMoviesGeneralDiv {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  row-gap: 4rem;
  font-family: "poppins", sans-serif;
  display: none;
}

.nigeriaMoviesGeneralDiv .movieDiv {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 90%;
  max-width: 500px;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 0 10px rgba(255, 22, 14, 0.2);
  /* z-index: -2; */
}

.nigeriaMoviesGeneralDiv .movieDiv .imgDiv {
  width: 100%;
  flex: 90%;
}

.nigeriaMoviesGeneralDiv .movieDiv .imgDiv img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.nigeriaMoviesGeneralDiv .movieDiv .detailsDiv {
  width: 100%;
  flex: 10%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.nigeriaMoviesGeneralDiv .movieDiv .detailsDiv .name {
  margin: 1rem 12px;
  font-size: 16px;
  color: #fff;
  text-align: center;
  font-weight: 600;
}

.nigeriaMoviesGeneralDiv .movieDiv .detailsDiv .rateDiv {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: end;
  margin-bottom: 1rem;
}

.nigeriaMoviesGeneralDiv .movieDiv .detailsDiv .rate {
  margin-right: 20px;
  background-color: var(--hollywood-gold);
  display: inline;
  padding: 4px 8px;
  border-radius: 6px;
  font-weight: bold;
  color: var(--cinema-red);
  font-size: 0.7rem;
  box-shadow: 0 0 4px rgba(231, 235, 0, 0.35);
}

.kDramaMoviesGeneralDiv {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  row-gap: 4rem;
  font-family: "poppins", sans-serif;
  display: none;
}

.kDramaMoviesGeneralDiv .movieDiv {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 90%;
  max-width: 500px;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 0 10px rgba(255, 22, 14, 0.2);
  /* z-index: -2; */
}

.kDramaMoviesGeneralDiv .movieDiv .imgDiv {
  width: 100%;
  flex: 90%;
}

.kDramaMoviesGeneralDiv .movieDiv .imgDiv img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.kDramaMoviesGeneralDiv .movieDiv .detailsDiv {
  width: 100%;
  flex: 10%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.kDramaMoviesGeneralDiv .movieDiv .detailsDiv .name {
  margin: 1rem 12px;
  font-size: 16px;
  color: #fff;
  text-align: center;
  font-weight: 600;
}

.kDramaMoviesGeneralDiv .movieDiv .detailsDiv .rateDiv {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: end;
  margin-bottom: 1rem;
}

.kDramaMoviesGeneralDiv .movieDiv .detailsDiv .rate {
  margin-right: 20px;
  background-color: var(--hollywood-gold);
  display: inline;
  padding: 4px 8px;
  border-radius: 6px;
  font-weight: bold;
  color: var(--cinema-red);
  font-size: 0.7rem;
  box-shadow: 0 0 4px rgba(231, 235, 0, 0.35);
}

/* Categories Animation */
.divInAnimation {
  animation: inCategory 0.6s;
  display: flex;
}

.divOutAnimation {
  animation: outCategory 0.6s;
  display: none;
}

@keyframes inCategory {
  from {
    opacity: 0.4;
  }
  to {
    opacity: 1;
  }
}

@keyframes outCategory {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.dot {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 6px;
  background-color: rgb(0, 255, 0);
  top: 100%;
  left: 48%;
  display: none;
}

.showDot {
  display: block;
}
/* Ends */

/* Movie Cards Designs */

.generalDiv {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  row-gap: 4rem;
  font-family: "poppins", sans-serif;
}

.generalDiv .movieDiv {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 90%;
  max-width: 500px;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 0 10px rgba(255, 22, 14, 0.2);
  /* z-index: -2; */
}

.generalDiv .movieDiv .imgDiv {
  width: 100%;
  flex: 90%;
}

.generalDiv .movieDiv .imgDiv img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.generalDiv .movieDiv .detailsDiv {
  width: 100%;
  flex: 10%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.generalDiv .movieDiv .detailsDiv .name {
  margin: 1rem 12px;
  font-size: 16px;
  color: #fff;
  text-align: center;
  font-weight: 600;
}

.generalDiv .movieDiv .detailsDiv .rateDiv {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: end;
  margin-bottom: 1rem;
}

.generalDiv .movieDiv .detailsDiv .rate {
  margin-right: 20px;
  background-color: var(--hollywood-gold);
  display: inline;
  padding: 4px 8px;
  border-radius: 6px;
  font-weight: bold;
  color: var(--cinema-red);
  font-size: 0.7rem;
  box-shadow: 0 0 4px rgba(231, 235, 0, 0.35);
}

.downloadLink .downloadBtn {
  font-weight: bold;
  padding: 0.8rem 3rem;
  border: none;
  border-radius: 6px;
  background-color: #1ec300;
  font-size: 0.9rem;
  cursor: pointer;
  outline: none;
  transition: 0.3s;
  color: #fff;
}

.detailsDiv a {
  margin-bottom: 1rem;
  border-radius: 6px;
}

.downloadLink:active .downloadBtn {
  background-color: #21da00;
  box-shadow: 3px 3px 10px rgba(0, 225, 0, 0.4);
}

/* Ends */

/* ABOUT US  */
.aboutUs {
  position: relative;
  background-color: var(--midnight-blue);
  color: #fff;
  padding-bottom: 2rem;
}

.aboutUs h2 {
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  padding: 8px;
  width: 100%;
  position: sticky;
  top: 0;
  right: 0;
  left: 0;
  color: var(--hollywood-gold);
  padding: 16px 0;
  margin: 1rem 0;
  background-color: var(--cinema-red);
}

.aboutUs p {
  font-size: 0.84rem;
  font-weight: bold;
  line-height: 1.5;
  padding: 0 8px;
}

.aboutUs p a {
  color: #fff;
  font-size: 0.94rem;
}

.aboutUs p .vision {
  font-weight: bolder;
  font-size: 1rem;
  background-color: goldenrod;
  padding: 3px 6px;
  border-radius: 3px;
}

/* ENDS */

/* Terms  */
.termsDiv {
  position: relative;
  background-color: var(--midnight-blue);
  color: #fff;
  padding-bottom: 2rem;
}

.termsDiv h2 {
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  padding: 8px;
  width: 100%;
  position: sticky;
  top: 0;
  right: 0;
  left: 0;
  color: var(--hollywood-gold);
  padding: 16px 0;
  margin-bottom: 1rem;
  background-color: var(--cinema-red);
}

.termsDiv p {
  font-size: 0.84rem;
  font-weight: bold;
  line-height: 1.5;
  padding: 0 8px;
}

.termsDiv ul {
  list-style-type: square;
  margin-left: 20px;
}

.termsDiv ul li {
  font-size: 0.84rem;
  font-weight: bold;
  line-height: 1.5;
  padding: 0 8px;
  margin-bottom: 12px;
}
/* ENDS */

/* bTTBtn styles */
.bTTBtn {
  position: fixed;
  bottom: 36px;
  right: 15px;
  width: 30px;
  height: 30px;
  background-color: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px solid var(--hollywood-gold);
  border-radius: 15px;
  font-weight: bold;
  cursor: pointer;
  display: none;
  transition: all 1s ease-out;
  z-index: 1000;
  box-shadow: 0 0 10px rgba(0, 222, 0, 0.7);
}

.bTTBtn:active {
  width: 38px;
  height: 38px;
  border: 2px solid white;
}

.bTTBtn i {
  font-size: 20px;
  color: var(--hollywood-gold);
}

.bTTBtn i:active {
  font-size: 18px;
  color: white;
}

/* Ends */

footer {
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  height: 120px;
  background-color: var(--cinema-red);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  row-gap: 0.5rem;
}

footer a {
  color: #fff;
  font-size: 0.83rem;
  font-weight: bold;
  font-family: "poppins", Sans-Serif;
}

footer .last {
  color: #fff;
  font-size: 0.9rem;
  font-weight: bold;
  font-family: "poppins", Sans-Serif;
}

.hide {
  background-color: white;
  display: none;
}

/* For  Single Download Stuffs */
.singleDownloadModalBg {
  position: fixed;
  height: 100vh;
  left: 0;
  right: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 4;
  display: none;
}

.singleDownloadImgCover {
  filter: blur(10px);
  z-index: -1;
  width: 100vh;
  height: 100vh;
  position: absolute;
}

.singleDownloadModalBg .singleDownloadContainer {
  background-color: var(--midnight-blue);
  width: 80%;
  max-width: 500px;
  height: 80%;
  max-height: 500px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  position: relative;
  box-shadow: 0 0 8px rgba(225, 50, 50, 0.5);
}

.singleDownloadCloseDiv {
  position: absolute;
  top: 12px;
  right: 18px;
  background-color: white;
  width: 26px;
  height: 26px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: all 0.2s;
}

.singleDownloadCloseDiv .singleDownloadClose {
  color: var(--cinema-red);
  font-size: 18px;
}

.singleDownloadClose:active {
  color: var(--midnight-blue);
  font-size: 19px;
}

.singleDownloadModalBg .singleDownloadContainer .singleDownloadImgDiv {
  width: 70%;
  height: 60%;
  max-width: 300px;
  max-height: 300px;
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 10px;
  box-shadow: 0 0 4px rgba(225, 225, 225, 0.5);
}

.singleDownloadModalBg .singleDownloadContainer .singleDownloadImgDiv img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.singleDownloadDetailsDiv {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  row-gap: 0.4rem;
  width: 100%;
}

.singleDownloadDetailsDiv h3 {
  font-weight: bold;
  font-size: 1rem;
  font-family: "poppins", sans-serif;
  color: var(--cinema-red);
  text-align: center;
  padding: 0 6px;
}

.singleDownloadRateDiv {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: end;
  margin-bottom: 1rem;
}

.singleDownloadRateDiv .singleDownloadRate {
  margin-right: 30px;
  background-color: var(--hollywood-gold);
  display: inline;
  padding: 4px 8px;
  border-radius: 6px;
  font-weight: bold;
  color: var(--cinema-red);
  font-size: 0.7rem;
  box-shadow: 0 0 4px rgba(231, 235, 0, 0.35);
  font-family: "poppins", sans-serif;
}

.singleDownloadDetailsDiv .singleDownloadLink button {
  font-weight: bold;
  padding: 0.6rem 2.4rem;
  border: none;
  border-radius: 6px;
  background-color: #1ec300;
  font-size: 0.9rem;
  cursor: pointer;
  outline: none;
  transition: 0.3s;
  color: #fff;
}

.singleDownloadDetailsDiv .singleDownloadLink .singleDownloadBtn:active {
  background-color: #21da00;
  box-shadow: 3px 3px 10px rgba(0, 225, 0, 0.4);
}

.movieUnavailable {
  color: rgb(245, 40, 40);
  text-align: center;
  margin: 4rem 0;
}

/* Animation for Single Download */
.comeOutSingleDownload {
  animation: comeOut 0.6s;
  display: flex;
}

.goInSingleDownload {
  animation: goIn 0.6s;
  display: none;
}

@keyframes comeOut {
  from {
    opacity: 0.2;
  }
  to {
    opacity: 1;
  }
}

@keyframes goIn {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* Ends */

@media (min-width: 665px) {
  /* Categories Buttons Styles */
  .categoryDiv {
    display: flex;
    place-content: center;
    gap: 20px 20px;
    padding: 0 16px;
    margin-bottom: 1.8rem;
  }

  .categoryDiv button {
    padding: 0.8rem 1rem;
  }

  .searchDiv input {
    width: 85%;
    max-width: 600px;
  }

  main .hype {
    font-size: 1.5rem;
  }

  main .hype::after,
  main .hype::before {
    font-size: 1.2rem;
  }
}

@media (min-width: 730px) {
  .generalDiv {
    display: grid;
    place-content: center;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    margin: 0 2rem;
  }
}

@media (min-width: 800px) {
  .generalDiv {
    display: grid;
    place-content: center;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    margin: 0 2rem;
  }
}