@import url("https://fonts.googleapis.com/css2?family=Noto+Kufi+Arabic:wght@100..900&display=swap");

:root {
  --vidWidth: 70vw;
  --moVidWidth: 80vw;
  --popupVidWidth: 70vw;
  --MGold: #d8b04a;
  --lightGold: #ecd7a1;
  --MCyan: #00717f;
  --pageBackground: #0e0e10;
  --borderMain: #1c1c21;
}

html,
body {
  max-width: 100%;
  overflow-x: hidden;
  scroll-behavior: smooth;
  margin: 0;
}

body {
  background: var(--pageBackground);
  color: #fff;
  font-family: "Noto Kufi Arabic", sans-serif;
  direction: rtl;
}

video {
  border-radius: 5%;
}

.courseDescription {
  width: 83%;
  margin: 0 auto;
  border-bottom: 0.25px solid var(--borderMain);
}

.title-description {
  display: flex;
  justify-content: center;
  align-items: center;
}

.courseTitle {
  font-size: xx-large;
  width: fit-content;
  padding-left: 3%;
  margin-left: 3%;
  border-left: 1px solid var(--borderMain);
  color: var(--MGold);
}

.Description {
  width: 55%;
  color: var(--lightGold);
}

.vidTeaser video {
  margin: auto;
}

.vidTeaser {
  margin: auto;
  width: var(--vidWidth);
  height: calc(var(--vidWidth) / 1000);
  overflow-y: hidden;
}

.course-info {
  width: 100%;
  display: flex;
  justify-content: space-around;
}

.info-row,
.needs-title,
.needs-content,
.learning-output-title,
.learning-output-content {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-right: 5px;
}

/* subscribeBtn */
.payment-links,
.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.payment-btn {
  cursor: pointer;
  height: 80px;
  width: 80px;
  font-family: "Titillium Web", sans-serif;
  color: #333;
  border-radius: 10px;
  box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.1);
  background: var(--MGold);
  margin: 5px;
  transition: 0.3s;
  justify-content: center;
}

.payment-btn svg {
  height: 50px;
  width: 50px;
}

.payment-btn span {
  width: 0px;
  overflow: hidden;
  transition: 0.3s;
  text-align: center;
  margin-left: 5px;
  font-weight: 600;
}

.payment-btn:hover {
  width: 150px;
  border-radius: 5px;
}

.payment-btn:hover span {
  padding: 2px;
  width: 80px;
}

#wallate-button svg {
  fill: #1da1f2;
}

#fawry-button svg {
  fill: #0e76a8;
}

#credit-button {
  fill: #333;
}

.card {
  width: 80%;
  height: max-content;
  margin: 1.5rem auto;
  background-color: #555;
  border-radius: 8px;
  z-index: 1;
  transition: ease 1s;
}

.tools {
  display: flex;
  align-items: center;
  padding: 9px;
}

.circle {
  padding: 0 4px;
}

.box {
  display: inline-block;
  align-items: center;
  width: 10px;
  height: 10px;
  padding: 1px;
  border-radius: 50%;
}

.card__content {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
}

.red {
  background-color: #ff605c;
}

.yellow {
  background-color: #ffbd44;
}

.green {
  background-color: #00ca4e;
}

.fawryCodeBox {
  background: #0e0e1062;
  border-radius: 25px;
}

.card h3 {
  font-size: large;
  text-align: center;
}

.fawryCodeBox h4 {
  font-size: large;
  text-align: center;
}
.fawryCodeBox h6 {
  font-size: medium;
  text-align: center;
}

/* end */

/* payment alert card */

.invoice-num-cont {
  margin-top: 1cap;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: green;
}

.alert-card-cont {
  width: 100vw;
  height: 130vh;
  margin-top: -20%;
  position: fixed;
  z-index: 100000;
  background-color: #4747537a;
  display: flex;
  align-items: center;
  justify-content: center;
}
.payment-alert-card {
  position: fixed;
  /* z-index: 100000; */
  /* width: 17em; */
  min-height: 22.5em;
  min-width: 75%;
  margin: auto 2rem;
  padding-top: 5vh;
  padding-bottom: 5vh;
  background: #171717;
  transition: 1s ease-in-out;
  clip-path: polygon(
    30px 0%,
    100% 0,
    100% calc(100% - 30px),
    calc(100% - 30px) 100%,
    0 100%,
    0% 30px
  );
  border-top-right-radius: 20px;
  border-bottom-left-radius: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.payment-alert-card span {
  font-weight: bold;
  color: white;
  text-align: center;
  display: block;
  font-size: 1.7em;
}

.payment-alert-card .payment-alert-info {
  font-weight: 500;
  color: white;
  display: block;
  width: 70%;
  text-align: center;
  font-size: 1em;
  margin: 1em;
}

.payment-alert-card .payment-alert-photo {
  width: max-content;
  height: max-content;
  /* background: white; */
  border-radius: 15px;
  margin: auto;
}

.card-buttons-cont {
  width: 70%;
  display: flex;
  flex-wrap: wrap;
  margin-top: 1rem;
}

.card-next-button,
.card-cancel-button,
.card-change-num-button {
  padding: 1.3em 2.7em;
  display: block;
  margin: auto;
  margin-top: 1rem;
  border-radius: 25px;
  border: none;
  font-weight: bold;
  background: #ffffff;
  color: rgb(0, 0, 0);
  transition: 0.2s ease-in-out;
}

.card-next-button {
  background: green;
  color: white;
  cursor: pointer;
}

.card-next-button:hover {
  filter: brightness(120%);
  scale: 1.05;
  color: white;
  /* cursor: pointer; */
}

.card-cancel-button:hover {
  background: red;
  scale: 0.95;
  color: white;
  cursor: pointer;
}

.card-change-num-button:hover {
  background: yellow;
  scale: 0.95;
  color: black;
  cursor: pointer;
}

.disable-next {
  background-color: #575757;
  cursor: default;
}
.disable-next:hover {
  filter: brightness(100%);
  scale: 100%;
}

.phone-input {
  margin: 30px;
  background: none;
  border: none;
  outline: none;
  max-width: 190px;
  padding: 10px 20px;
  font-size: 16px;
  border-radius: 9999px;
  box-shadow: inset 2px 5px 10px rgb(5, 5, 5);
  color: #fff;
}

@media screen and (max-width: 1024px) {
  .alert-card-cont {
    margin-top: -30%;
  }
}

@media screen and (max-width: 450px) {
  .alert-card-cont {
    margin-top: -60%;
  }
  .payment-alert-card span {
    font-size: 1.4em;
  }
}
@media screen and (min-width: 2000px) {
  .alert-card-cont {
    margin-top: -20%;
  }
  .payment-alert-card {
    font-size: xx-large;
  }
  .payment-alert-photo img {
    width: 250px;
  }
  .card-next-button,
  .card-cancel-button,
  .card-change-num-button {
    width: 200px;
    height: 70px;
    font-size: xx-large;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .card h3 {
    font-size: xx-large;
    text-align: center;
  }
  .fawryCodeBox h4 {
    font-size: 3rem;
    text-align: center;
  }
  .fawryCodeBox h6 {
    font-size: x-large;
    text-align: center;
  }
}
/* end */

.promo-input-cont {
  margin: 2rem;
  width: 100%;
  min-height: 40px;
}
.promo-input,
.right-code,
.wrong-code {
  direction: ltr;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
    sans-serif;
  font-weight: 500;
  font-size: medium;
  color: #fff;
  background-color: rgb(28, 28, 30);
  box-shadow: 0 0 0.4vw rgba(0, 0, 0, 0.5), 0 0 0 0.15vw transparent;
  border-radius: 25px;
  border: none;
  outline: none;
  padding: 0.4vw;
  max-width: 190px;
  transition: 0.4s;
  width: 40%;
  min-height: 30px;
  text-align: center;
}

.promo-input:hover {
  box-shadow: 0 0 0 0.15vw rgba(135, 207, 235, 0.186);
}

.right-code:hover {
  box-shadow: 0 0 0 0.15vw rgba(180, 235, 135, 0.186);
}

.wrong-code:hover {
  box-shadow: 0 0 0 0.15vw rgba(235, 135, 135, 0.186);
}

.promo-input:focus {
  box-shadow: 0 0 0 0.15vw skyblue;
  color: skyblue;
}

.right-code:focus {
  box-shadow: 0 0 0 0.15vw green;
  color: green;
}
.wrong-code:focus {
  box-shadow: 0 0 0 0.15vw red;
  color: red;
}

.enterButton {
  --C2: #005e6a;
  --C3: #004b5580;
  cursor: pointer;
  width: 100%;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  font-size: 1.3em;
  font-weight: 800;
  color: #fff;
  background: var(--MCyan);
  border: 2px solid var(--C2);
  border-radius: 0.75rem;
  margin-bottom: 1.8rem;
  box-shadow: 0 8px 0 var(--C2);
  transform: skew(-10deg);
  transition: all 0.1s ease;
  filter: drop-shadow(0 15px 20px var(--C3));
}

.enterButton:active {
  transform: skew(-10deg) translateY(8px);
  box-shadow: 0 0 0 var(--C3);
}

.price-before {
  font-size: small;
  color: #595959;
}

.price-title {
  font-size: x-large;
}

.price {
  font-size: large;
  font-weight: 500;
}

.course-price {
  display: flex;
  flex-direction: column;
  margin-bottom: 0.5rem;
  color: rgb(254, 254, 228);
}

.not-subscriber {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  width: 100%;
  text-align: center;
}

.info {
  margin-right: 10px;
  text-align: center;
  font-size: large;
}

.info h5 span {
  font-weight: 500;
}

.course-details {
  display: flex;
  justify-content: space-around;
}

.course-details,
.course-content {
  width: 85%;
  margin: 0 auto;
}

.learnig-output,
.learning-needs {
  padding: 1.5rem;
  border: 0.25px solid var(--borderMain);
  border-radius: 25px;
  margin: 2rem 0;
  box-shadow: 8px 16px 16px hsl(0deg 0% 0% / 0.25);
}

.learning-needs,
.learnig-output {
  width: 45%;
}

.needs-title h3,
.needs-content h5,
.learning-output-title h3,
.learning-output-content h5 {
  margin: 0;
}

.needs-title,
.learning-output-title {
  margin: 2rem 5px;
}

.needs-content,
.learning-output-content {
  margin-bottom: 1.5rem;
}

.needs-title i,
.needs-content i,
.learning-output-title i,
.learning-output-content i {
  margin: 10px;
}

.needs-title h3 {
  font-weight: 700;
}

.needs-content,
.learning-output-content {
  margin-right: 2rem;
}

.course-content {
  margin-top: 2rem;
}

.lessons-title {
  border-bottom: 0.25px solid var(--borderMain);
  box-shadow: 8px 16px 16px hsl(0deg 0% 0% / 0.25);
}

.lessons-title h3 {
  margin-right: 1rem;
  margin-bottom: 0.5rem;
  color: var(--MGold);
}

.lessons-section {
  margin-top: 1.5rem;
}

.lessons-drop {
  margin-bottom: 1rem;
}

.lessons-drop-title {
  cursor: pointer;
  display: flex;
  align-items: center;
  border: 0.25px solid var(--borderMain);
  border-radius: 25px;
  box-shadow: 8px 16px 16px hsl(0deg 0% 0% / 0.25);
  transition: ease-in-out 1s;
}

.lessons-drop-title h3 {
  margin: 0.5rem 1rem;
  display: flex;
  align-items: center;
}

.lessons-drop-title h3 svg {
  width: 25px;
  margin: 5px;
}

.lessons-drop-title i {
  margin: 1rem;
  transition: ease-in-out 0.25s;
}

.dropIcoTrans {
  rotate: 180deg;
  transition: ease-in-out 0.25s;
}

.lessons-drop-title:hover {
  box-shadow: inset 8px 16px 16px hsl(0deg 0% 0% / 0.25);
}

.lessons-drop ul {
  transition: ease-in-out 1s;
}

.lessons-drop ul li {
  list-style: none;
  padding: 1rem;
  padding-right: 2rem;
  margin-bottom: 0.5rem;
  border: 0.5px solid var(--borderMain);
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: ease-in-out 1s;
}

.unlocked {
  cursor: pointer;
}

.unlocked:hover {
  filter: brightness(150%);
}

.free-lesson-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #0e0e1087;
}

.lesson-pop-card {
  width: 90%;
  max-height: 90%;
  padding-top: 2%;
  padding-bottom: 2%;
  background: #212126f7;
  border: 0.25px solid var(--borderMain);
  border-radius: 25px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.popup-card-title {
  color: var(--MGold);
}

.popup-card-vid {
  margin: auto;
  overflow-y: hidden;
  width: calc(var(--popupVidWidth));
  height: calc(var(--popupVidWidth) / 1.78);
}

.custom-button {
  cursor: pointer;
  position: relative;
  border: none;
  overflow: hidden;
  background: #212126f7;
  width: 3rem;
  height: 3rem;
  transition-duration: 500ms;
  text-align: center;
}

.custom-button p {
  margin: 0;
}

.custom-button:hover {
  border-color: var(--MGold);
}

.custom-button__text {
  font-family: "Manrope", sans-serif;
  font-size: 1.875rem;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  transition-duration: 500ms;
  position: relative;
  z-index: 10;
}

.custom-button:hover .custom-button__text {
  transform: scale(0);
}

.custom-button__span {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: var(--MGold);
  transform: rotate(45deg);
  transition-duration: 500ms;
}

.custom-button__span--hover-1 {
  top: 3rem;
  left: 0;
}

.custom-button:hover .custom-button__span--hover-1 {
  top: 2.25rem;
}

.custom-button__span--hover-2 {
  top: 0;
  left: 3rem;
}

.custom-button:hover .custom-button__span--hover-2 {
  left: 2.25rem;
}

.custom-button__span--hover-3 {
  top: 0;
  right: 3rem;
}

.custom-button:hover .custom-button__span--hover-3 {
  right: 2.25rem;
}

.custom-button__span--hover-4 {
  bottom: 3rem;
  right: 0;
}

.custom-button:hover .custom-button__span--hover-4 {
  bottom: 2.25rem;
}

@media screen and (max-width: 660px) {
  .vidTeaser {
    overflow: auto;
    width: var(--moVidWidth);
    overflow-y: hidden;
  }
  .Description {
    font-size: 2.5vw;
  }
  .info {
    font-size: x-small;
  }
  .needs-title h3,
  .learning-output-title h3 {
    font-size: medium;
    font-weight: 500;
  }
  .needs-content h5,
  .learning-output-content h5 {
    font-size: small;
    font-weight: 400;
  }
}

@media screen and (max-width: 950px) {
  .course-details {
    flex-direction: column;
    align-items: center;
  }
  .learning-needs,
  .learnig-output {
    width: 90%;
  }
}

/* Loader */

.loader-wrapper {
  width: 200px;
  height: 60px;
  position: relative;
  z-index: 1;
}

.loader-circle {
  width: 20px;
  height: 20px;
  position: absolute;
  border-radius: 50%;
  background-color: #fff;
  left: 15%;
  transform-origin: 50%;
  animation: loader-circle7124 0.5s alternate infinite ease;
}

@keyframes loader-circle7124 {
  0% {
    top: 60px;
    height: 5px;
    border-radius: 50px 50px 25px 25px;
    transform: scaleX(1.7);
  }

  40% {
    height: 20px;
    border-radius: 50%;
    transform: scaleX(1);
  }

  100% {
    top: 0%;
  }
}

.loader-circle:nth-child(2) {
  left: 45%;
  animation-delay: 0.2s;
}

.loader-circle:nth-child(3) {
  left: auto;
  right: 15%;
  animation-delay: 0.3s;
}

.loader-shadow {
  width: 20px;
  height: 4px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.9);
  position: absolute;
  top: 62px;
  transform-origin: 50%;
  z-index: -1;
  left: 15%;
  filter: blur(1px);
  animation: loader-shadow046 0.5s alternate infinite ease;
}

@keyframes loader-shadow046 {
  0% {
    transform: scaleX(1.5);
  }

  40% {
    transform: scaleX(1);
    opacity: 0.7;
  }

  100% {
    transform: scaleX(0.2);
    opacity: 0.4;
  }
}

.loader-shadow:nth-child(4) {
  left: 45%;
  animation-delay: 0.2s;
}

.loader-shadow:nth-child(5) {
  left: auto;
  right: 15%;
  animation-delay: 0.3s;
}