/* Start varibles */

:root {
  --main-color-gradient: linear-gradient(
    to right,
    rgba(37, 64, 143, 1),
    rgba(48, 209, 201, 1) 80%
  );
  --secondry-color-gradient: linear-gradient(
    to right,
    rgba(210, 35, 42, 1),
    rgba(22, 4, 68, 1) 80%
  );
  --yellow-color: #FFEB00;
  --bluedark-color: #00334c;
  --bluelight-color: rgb(78, 194, 192);
}

/* End varibles */

/* Start Global rules */

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

body {
  user-select: none;
  cursor: default;
  font-family: "Expo Arabic Book", sans-serif;
}

/* End Global rules */

#preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(5px); /* ✅ التأثير هنا */
  background-color: rgba(255, 255, 255, 0.6); /* شفافية خفيفة */
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}

.loader {
  position: relative;
  width: 120px;
  height: 90px;
  margin: 0 auto;
}

.loader:before {
  content: "";
  position: absolute;
  bottom: 30px;
  left: 50px;
  height: 30px;
  width: 30px;
  border-radius: 50%;
  background: var(--bluedark-color);
  animation: loading-bounce 0.5s ease-in-out infinite alternate;
}

.loader:after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  height: 7px;
  width: 45px;
  border-radius: 4px;
  box-shadow: 0 5px 0 var(--bluelight-color),
    -35px 50px 0 var(--bluelight-color), -70px 95px 0 var(--bluelight-color);
  animation: loading-step 1s ease-in-out infinite;
}

#preloader.hidden {
  opacity: 0;
  visibility: hidden;
}

@keyframes loading-bounce {
  0% {
    transform: scale(1, 0.7);
  }

  40% {
    transform: scale(0.8, 1.2);
  }

  60% {
    transform: scale(1, 1);
  }

  100% {
    bottom: 140px;
  }
}

@keyframes loading-step {
  0% {
    box-shadow: 0 10px 0 rgba(0, 0, 0, 0), 0 10px 0 var(--bluelight-color),
      -35px 50px 0 var(--bluelight-color), -70px 90px 0 var(--bluelight-color);
  }

  100% {
    box-shadow: 0 10px 0 var(--bluelight-color),
      -35px 50px 0 var(--bluelight-color), -70px 90px 0 var(--bluelight-color),
      -70px 90px 0 rgba(0, 0, 0, 0);
  }
}

/* Start fonts */

@font-face {
  font-family: "El Messiri";
  src: url("../fonts/ElMessiri-Regular.woff2") format("woff2"),
    url("../fonts/ElMessiri-Regular.woff2") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "El Messiri";
  src: url("../fonts/ElMessiri-Bold.woff2") format("woff2"),
    url("../fonts/ElMessiri-Bold.woff2") format("woff");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Expo Arabic Book";
  src: url("../fonts/ExpoArabic-Book.woff2") format("woff2"),
    url("../fonts/ExpoArabic-Book.woff2") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Hacen Algeria Bd";
  src: url("../fonts/HacenAlgeriaBd.woff2") format("woff2"),
    url("../fonts/HacenAlgeriaBd.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "DG Forsha Scribble";
  src: url("../fonts/DGForshaScribble.woff2") format("woff2"),
    url("../fonts/DGForshaScribble.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* End fonts */

/* Start dark mode */

#toggle {
  width: 73px;
  height: 36px;
  background: var(--secondry-color-gradient);
  box-shadow: inset 0 1px 6px 4px rgba(12, 12, 12, 0.2);
  display: flex;
  align-items: center;
  border-radius: 30px;
  padding: 0.2rem 0.2rem;
  cursor: pointer;
  position: relative;
  z-index: 99;
}

.changer span {
  width: 30px;
  height: 30px;
  background: #f1f1f1;
  border-radius: inherit;
  box-shadow: inset 0 1px 6px 4px rgba(13, 13, 13, 0.3),
    0 1px 6px 1px rgba(11, 11, 76, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
}

span svg {
  font-size: 1.5rem;
  color: rgba(210, 35, 42, 1);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.2s cubic-bezier(0.76, 0, 0.24, 1);
}

@media only screen and (max-width: 991px) {
  #toggle {
    width: 60px;
    height: 27px;
  }

  .changer span {
    width: 23px;
    height: 23px;
  }
}

#shape {
  clip-path: circle(0% at 50% 50%);
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1;
  opacity: 0;
  pointer-events: none;
}

/* dark */

#toggle.change {
  background: var(--main-color-gradient);
}

#shape.change {
  position: absolute;
  width: 100%;
  height: 100%;
  clip-path: circle(100% at 50% 50%);
  z-index: 1;
}

span.change {
  background: #f1f1f1;
  transform: translateX(37px);
}

@media only screen and (max-width: 991px) {
  span.change {
    transform: translateX(32px);
  }
}

.moon {
  font-size: 1.7rem;
  color: rgba(210, 35, 42, 1);
  opacity: 1;
}

@media only screen and (max-width: 991px) {
  .moon {
    font-size: 1.2rem;
  }
}

.moon.change {
  font-size: 0;
  opacity: 0;
}

.sun {
  font-size: 0;
  opacity: 0;
}

.sun.change {
  font-size: 1.7rem;
  color: var(--bluelight-color);
  opacity: 1;
}

@media only screen and (max-width: 991px) {
  .sun.change {
    font-size: 1.2rem;
  }
}

/* End dark mode */

/* Start spsial heading */

.speacial-heading p {
  font-family: "DG Forsha Scribble";
  text-align: center;
  font-size: 35px;
  margin: 50px 0;
}

@media only screen and (max-width: 575px) {
  .speacial-heading p {
    font-size: 27px;
  }
}

.speacial-heading p .yellow {
  color: var(--yellow-color);
  position: relative;
}

.speacial-heading p .yellow::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: var(--yellow-color);
}

.speacial-heading p .blue {
  background: var(--main-color-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  position: relative;
}

.speacial-heading p .blue::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: var(--main-color-gradient);
}

/* End spsial heading */

/* Start call us */

.call-us {
  position: fixed;
  bottom: 30px;
  right: 15px;
  z-index: 1000;
}

.Btn {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background-color: transparent;
  position: relative;
  border-radius: 7px;
  cursor: pointer;
  transition: all 0.3s;
  padding: 0;
}

.svgContainer {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  backdrop-filter: blur(0px);
  letter-spacing: 0.8px;
  border-radius: 50px;
  transition: all 0.3s;
  border: 2px solid rgba(156, 156, 156, 0.466);
}

.BG {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background: var(--main-color-gradient);
  z-index: -1;
  border-radius: 50px;
  pointer-events: none;
  transition: all 0.3s;
}

.Btn:hover .BG {
  transform: rotate(35deg);
  transform-origin: bottom;
}

.Btn:hover .svgContainer {
  background-color: rgba(156, 156, 156, 0.466);
  backdrop-filter: blur(4px);
}

/* End call us */

/* Start navbar home section */

.nav-content {
  padding: 4px;
  background: #ffffff62;
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(12px);
  display: inline-block;
  position: fixed;
  top: 10px;
  left: 10px;
  width: calc(100% - 20px);
  border-radius: 20px;
  z-index: 999;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(115, 146, 1, 0.363);
}

.scrolled {
  transition: all 0.3s ease;
}

.scroll-line {
  position: absolute;
  bottom: -2; /* تحت الناف بار لو عايز تخليه تحته مباشرة، غيّرها إلى top: 70px مثلاً */
  left: 10px;
  height: 4px;
  width: 0%;
  border-radius: 30px;
  background: var(--main-color-gradient);
  z-index: 1000;
  transition: width 0.1s linear;
}

.nav-content .content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px 20px;
}

@media only screen and (max-width: 767px) {
  .nav-content .content {
    padding: 0px 10px;
  }
}

.nav-content .content-2 {
  display: flex;
  justify-content: flex-end;

  align-items: center;
  flex: 1;
  gap: 40px;
}

@media only screen and (max-width: 767px) {
  .nav-content .content-2 {
    flex-direction: row-reverse;
    justify-content: flex-start;
    gap: 0;
  }
}

@media only screen and (max-width: 767px) {
  .logo {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex: 1;
  }
}

.logo {
  text-decoration: none !important;
}

.logo img {
  width: 140px;
}

@media only screen and (max-width: 767px) {
  .logo img {
    width: 120px;
  }
}

.bars {
  display: none;
}
/* نسخة مصغرة للموبايل فقط */
@media only screen and (max-width: 767px) {
  .bars {
    display: block;
    font-size: 36px;
    color: var(--bluelight-color);
    cursor: pointer;
  }

  .links {
    flex-direction: column;
    gap: 10px;
    background-color: white;
    position: absolute;
    top: calc(100% + 10px);
    left: calc(-100% - 50px);
    width: 100%;
    z-index: 999;
    transition: 0.7s;
    background: transparent;
  }

  .active {
    display: flex;
    flex-direction: column;
    gap: 10px;
    background-color: white;
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    width: 100%;
    z-index: 999;
    background: transparent;
  }
}

/* Start snipper */

.parent-spinner {
  display: none;
  width: 36px;
  height: 36px;
  cursor: pointer;
}

.spinner {
  width: 27px;
  height: 27px;
  --clr: var(--yellow-color);
  --clr-alpha: var(--bluedark-color);
  animation: spinner 3s infinite linear;
  transform-style: preserve-3d;
}

.spinner > div {
  background-color: var(--clr-alpha);
  height: 100%;
  position: absolute;
  width: 100%;
  border: 5px solid var(--clr);
}

.spinner div:nth-of-type(1) {
  transform: translateZ(-13px) rotateY(180deg);
}

.spinner div:nth-of-type(2) {
  transform: rotateY(-270deg) translateX(50%);
  transform-origin: top right;
}

.spinner div:nth-of-type(3) {
  transform: rotateY(270deg) translateX(-50%);
  transform-origin: center left;
}

.spinner div:nth-of-type(4) {
  transform: rotateX(90deg) translateY(-50%);
  transform-origin: top center;
}

.spinner div:nth-of-type(5) {
  transform: rotateX(-90deg) translateY(50%);
  transform-origin: bottom center;
}

.spinner div:nth-of-type(6) {
  transform: translateZ(13px);
}

@keyframes spinner {
  0% {
    transform: rotate(0deg) rotateX(0deg) rotateY(0deg);
  }

  50% {
    transform: rotate(180deg) rotateX(180deg) rotateY(180deg);
  }

  100% {
    transform: rotate(360deg) rotateX(360deg) rotateY(360deg);
  }
}

/* End snipper */

.links{
  display: flex;
  gap: 20px;
  list-style: none;
  justify-content: center;
  align-items: center;
  margin: 0;
}

@media only screen and (max-width: 767px) {
  .links li {
  width: 100%;
  text-align: center;
  /* display: flex;
  flex: 1;
  justify-content: center;
  align-items: center; */
  }

}

.create-account {
  font-family: "El Messiri";
  text-align: center;
  font-weight: bold;
  text-decoration: none !important;
  background: var(--bluelight-color);
  padding: 5px 10px;
  box-shadow: 0px 0px 6px 0px var(--bluedark-color);
  border-radius: 15px;
  color: var(--bluedark-color);
  color: #fff;
  font-size: 18px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* border: 2px var(--bluelight-color) solid; */
  transition: all linear 0.2s;
  width: 100%;
  flex: 1;
}

@media only screen and (max-width: 991px) and (min-width: 767px) {
  .create-account {
    font-size: 17px;
  }
}

.create-account:hover svg {
  color: var(--bluedark-color);
}

.create-account:hover {
  background: #fff;
  color: var(--bluedark-color);
  box-shadow: 0px 0px 6px 0px var(--bluedark-color);
  /* border: 4px var(--bluelight-color) solid; */
}

.bg-login {
  padding: 3px; /* سمك البوردر */
  display: inline-block;
  border-radius: 10px;
}

.login-button {
  font-family: "El Messiri";
  font-weight: bold;
  text-decoration: none !important;
  background: var(--yellow-color);
  padding: 5px 10px;
  box-shadow: 0px 0px 6px 0px var(--bluedark-color);
  border-radius: 15px;
  color: var(--bluedark-color);
  font-size: 18px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* border: 2px var(--bluelight-color) solid; */
  transition: all linear 0.2s;
  width: 100%;
}

@media only screen and (max-width: 991px) and (min-width: 767px) {
  .login-button {
    font-size: 17px;
  }
}

.login-button svg {
  /* color: var(--yellow-color); */

}

.login-button:hover {
  color: var(--bluedark-color);
  background: var(--main-color-gradient);
  background: #fff;
}

/* End navbar home section */

/* Start navbar side */

.user-menu {
  padding: 5px 0px;
  padding-left: 40px;
  padding-right: 5px;
  border-radius: 50px;
  cursor: pointer;
  position: relative;
  font-weight: bold;
  display: flex !important;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
  background: #f3f4f6;
  box-shadow: 0 0 0px 2px rgba(0, 0, 0, 0.1);
}

.user-icon {
  color: var(--bluedark-color);
  font-size: 18px;
  padding: 3px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin: 2px;
  cursor: pointer;
  
}

.icon-hiddenss{
  display: block;
  width: 30px;
  height: 30px;
  background-color: #102030;
  visibility: hidden;
}

.user-menu::before {
  content: "\f13a";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--bluelight-color);
  font-size: 23px;
  transition: 0.5s;
}

.user-menu.open::before {
  transform: translateY(-50%) rotate(180deg);
}

.dropdown-content {
  position: absolute;
  top: 64px;
  right: 0;
  background-color: #f3f4f6;
  min-width: 200px;
  border-radius: 10px;
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.4s ease;
  text-align: right;
  z-index: 999;
}

.dropdown-content svg {
  color: var(--bluelight-color);
}

.box-shadow {
  box-shadow: 0 0 0px 2px rgba(0, 0, 0, 0.1);
}

.dropdown-content.open {
  max-height: 500px; /* يفضل يكون أكبر من المحتوى المحتمل */
}

.dropdown-content a {
  padding: 10px 15px;
  text-decoration: none !important;
  color: #000;
  display: block;
  transition: background-color 0.3s;
  font-family: "Expo Arabic Book";
  font-weight: normal;
  font-size: 17px;
}

.dropdown-content a:hover {
  background-color: var(--yellow-color);
  background: var(--bluelight-color);
  color: #fff;
}

.dropdown-content a:hover svg {
  color: var(--bluedark-color);
}

/* End navbar side */

/* Start header home section */

.main-home {
  position: relative;
}

.background {
  position: absolute;
  inset: 0;
  background: url("https://i.ibb.co/spqzGcmF/Pattern.webp") center/contain;

}

.content {
  position: relative;
  z-index: 1;
}

.header-home {
  margin-top: 150px;
}

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

.header-home h3 {
  font-family: "DG Forsha Scribble";
  background: var(--secondry-color-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  margin: 0;
  padding: 20px;
  font-size: 60px;
}

@media only screen and (max-width: 991px) {
  .header-home h3 {
    font-size: 50px;
  }
}

.header-home p {
  font-family: "DG Forsha Scribble";
  color: var(--yellow-color);
  font-size: 43px;
  text-align: center;
}

@media only screen and (max-width: 991px) {
  .header-home p {
    font-size: 35px;
  }
}

.header-home p span {
  background: var(--main-color-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

@media only screen and (max-width: 991px) {
  .header-home p {
    font-size: 35px;
  }
}

.header-home .main-img-home {
  display: flex;
  justify-content: flex-end;
}

@media only screen and (max-width: 991px) {
  .header-home .main-img-home {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .header-home .main-img-home img {
    width: 320px;
  }
}

/* Start header home section */

/* Start select teacher home section */

.custom-dropdowns {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 10px;
  background: var(--bluelight-color);
  border-radius: 15px;
  font-family: "El Messiri";
  width: fit-content;
  margin: auto;
  text-align: right;
}

.custom-dropdown {
  position: relative;
  cursor: pointer;
  width: fit-content;
}

.custom-dropdown:nth-of-type(2) {
  width: fit-content;
}

@media only screen and (max-width: 575px) {
  .custom-dropdown {
    width: fit-content;
  }
  .custom-dropdown:nth-of-type(2) {
    width: fit-content;
  }
}

.custom-dropdown .selected {
  padding: 6px;
  padding-left: 35px;
  padding-right: 10px;
  background: #fff;
  border-radius: 30px;
  position: relative;
  font-size: 18px;
  color: #000;
  border: 2px solid transparent;
  transition: 0.3s;
  text-align: center;
  width: fit-content;
}

@media only screen and (max-width: 575px) {
  .custom-dropdown .selected {
    font-size: 14px;
  }
}

.custom-dropdown .selected::before {
  content: "\f13a";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  left: 7px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--yellow-color);
  font-size: 20px;
  transition: 0.3s;
}

.custom-dropdown.active-select .selected {
  border-color: var(--bluedark-color);
}

.custom-dropdown.active-select .selected::before {
  transform: translateY(-50%) rotate(180deg);
}

.dropdown-options {
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  right: 0;
  background: #fff;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  max-height: 0;
  transition: max-height 0.3s ease;
  z-index: 10;
}

.custom-dropdown.active-select .dropdown-options {
  max-height: 300px;
  overflow: auto;
  width: 100%;
}

.dropdown-options li {
  padding: 10px 15px;
  transition: 0.2s;
  font-size: 16px;
}

.dropdown-options li:hover {
  background: var(--yellow-color);
  color: #000;
}

.seclect-teacher-home .card-teacher {
  display: flex;
  justify-content: center;
}

.seclect-teacher-home .teacher {
  background: var(--bluelight-color);
  text-align: center;
  padding: 20px;
  border-radius: 15px;
  margin-top: 50px;
}
@media only screen and (max-width: 575px) {
  .seclect-teacher-home .teacher {
    width: 80%;
  }

  .dropdown-options li {
    font-size: 14px;
  }
}

.seclect-teacher-home .teacher img {
  width: 88%;
  border-radius: 15px;
}

.seclect-teacher-home .teacher h3 {
  font-family: "DG Forsha Scribble";
  color: var(--yellow-color);
  margin-top: 5px;
  font-size: 25px;
}

@media only screen and (max-width: 991px) and (min-width: 767px) {
  .seclect-teacher-home .teacher h3 {
    font-size: 23px;
  }

  .seclect-teacher-home .teacher p {
    font-size: 20px;
  }
}

.seclect-teacher-home .teacher h3 span {
  color: #fff;
}

.seclect-teacher-home .teacher p {
  font-family: "Expo Arabic Book";
  font-size: 22px;
  margin: 0;
}

/* End select teacher home section */

/* Start courses section home */

.courses-home .speacial-heading {
  margin-top: 50px;
}

.courses-home .speacial-heading p {
  width: fit-content;
  margin: auto;
  position: relative;
  padding-right: 85px;
}
.courses-home .speacial-heading img {
  width: 100px;
  position: absolute;
  top: -10px;
  right: 0;
  z-index: -1;
}

@media only screen and (max-width: 575px) {
  .courses-home .speacial-heading p {
    font-size: 22px;
    padding-right: 60px;
  }

  .courses-home .speacial-heading img {
    width: 70px;
    top: -10px;
    right: 0;
  }

  .courses-home .speacial-heading p {
    margin-bottom: 20px;
  }
}

.courses-home .coat p {
  font-family: "El Messiri";
  font-weight: bold;
  text-align: center;
  font-size: 21px;
  line-height: 1.1;
  margin-top: 30px;
  margin-bottom: 30px;
}

@media only screen and (max-width: 575px) {
  .courses-home .coat p {
    font-size: 16px;
    line-height: 1.1;
    margin-top: 10px;
  }
}

.courses-home .coat p span {
  font-family: "DG Forsha Scribble";
  background: var(--main-color-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.course {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 0px;
}

.course img {
  width: 100%;
  border-radius: 30px;
}

.content-course {
  width: 90%;
  position: relative;
  top: -50px;
  background: var(--bluelight-color);
  border-radius: 25px;
  padding: 10px;
}

.content-course h4 {
  font-family: "DG Forsha Scribble";
  color: #fff;
  text-align: center;
  font-size: 22px;
  padding-bottom: 5px;
}

.content-course hr {
  border: none;
  width: 70%;
  height: 4px;
  margin: auto;
  background: var(--yellow-color);
}

.content-course .number-lect {
  font-family: "Expo Arabic Book";
  font-weight: bold;
  text-align: center;
  padding: 5px 0px;
  margin: 0;
  font-size: 18px;
}

.data-course {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.data-course .price {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: fit-content;
  gap: 4px;
  font-family: "Hacen Algeria Bd";
  padding: 4px 6px;
  background: #fff;
  border-radius: 25px;
  font-size: 17px;
  margin: 5px 0px;
}

.data-course .price span {
  background: var(--yellow-color);
  border-radius: 20px;
  padding: 0px 8px;
}

.data-course .price-free {
  font-family: "El Messiri";
  font-weight: bold;
  display: flex;
  justify-content: center;
  gap: 4px;
  align-items: center;
  background: var(--secondry-color-gradient);
  color: #fff;
  padding: 5px 7px;
  border-radius: 20px;
}

.data-course .price-del {
  display: flex;
  justify-content: space-between;
  gap: 4px;
  font-family: "Hacen Algeria Bd";
  padding: 4px 6px;
  background: #fff;
  border-radius: 25px;
  font-size: 17px;
  margin: 5px 0px;
}

.data-course .price-del span {
  background: var(--secondry-color-gradient);
  color: #fff;
  text-decoration: line-through;
  border-radius: 20px;
  padding: 0px 8px;
}

.info-course {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
}

.info-course p {
  font-family: "Expo Arabic Book";
  font-size: 15px;
  align-items: center;
  gap: 9px;
  margin: 0;
  margin-top: 7px;
}

@media only screen and (max-width: 400px) {
  .info-course p {
    font-size: 13px;
  }
}

.info-course p svg {
  color: #fff;
}

.course-subscription {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-top: 10px;
}

.course-subscription .check {
  font-family: "El Messiri";
  font-weight: bold;
  text-decoration: none;

  background: #fff;
  padding: 3px 6px;
  margin: 0;
  border-radius: 15px;
  font-size: 15px;
  color: var(--bluedark-color);
  border: 3px var(--yellow-color) solid;
}

.course-subscription .check:hover {
  background: var(--bluedark-color);
  color: #fff;
}

.course-subscription .subscription {
  font-family: "El Messiri";
  font-weight: bold;
  text-decoration: none;
  background: var(--bluedark-color);
  padding: 3px 7px;
  margin: 0;
  border-radius: 15px;
  font-size: 15px;
  color: #fff;
  border: 3px var(--yellow-color) solid;
}

.course-subscription .subscription:hover {
  background: #fff;
  color: var(--bluedark-color);
}

/* End courses section home */

/* Start join-as-teacher-btn */
.join-us-teacher {
  background-color: #f9f9f9;
  position: relative;
  text-align: right;
  overflow: hidden;
}

.you-subscription {
  background-color: rgb(210 255 211);
  font-size: 16px;
  padding: 5px 7px;
  border: 2px solid var(--green);
  font-family: "Expo Arabic Book";
  color: var(--bluedark-color);
  border-radius: 10px;
  border-style: dashed;
  text-align: center;
}

@media only screen and (max-width: 400px) {
  .you-subscription {
    font-size: 13px;
  }
}

/* البوردر العلوي والسفلي */

.join-us-teacher::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background-image: repeating-linear-gradient(
    to right,
    var(--green) 0 10px,
    transparent 10px 20px
  );
  animation: moveBorderTop 3s linear infinite;
}

.join-us-teacher::before {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background-image: repeating-linear-gradient(
    to right,
    var(--green) 0 10px,
    transparent 10px 20px
  );
  animation: moveBorderBottom 3s linear infinite;
}

/* الأعلى */
.join-us-teacher::before {
  top: 0;
}

/* الأسفل */
.join-us-teacher::after {
  bottom: 0;
}

/* حركة الخط */
@keyframes moveBorderTop {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 100px 0;
  }
}
/* حركة الخط */
@keyframes moveBorderBottom {
  from {
    background-position: 100px 0;
  }
  to {
    background-position: 0 0;
  }
}

.join-us-teacher h3 {
  font-family: "dg forsha scribble";
  color: var(--blue);
  font-size: 30px;
}

.lead {
  font-family: "Expo Arabic Book";
  font-size: 17px;
  color: #333;
}

.lead span {
  font-family: "dg forsha scribble";
  color: var(--bluelight-color);
  font-size: 20px;
}

.join-as-teacher-btn {
  background: var(--bluedark-color);
  color: #fff;
  padding: 5px 15px;
  font-family: "Expo Arabic Book";
  font-size: 18px;
  border-radius: 12px;
  cursor: pointer;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border: 2px solid var(--bluedark-color);
  transition: all 0.5s ease;
}

.join-as-teacher-btn:hover {
  background: var(--bluelight-color);
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

/* End join-as-teacher-btn */

/* Start footer section home */

.footer-home {
  display: block;
  width: 100%;
  /* height: 100%; */
  margin-top: 60px;
  background-color: #102030;
  background-image: radial-gradient(
      circle at 15% 15%,
      rgba(255, 255, 255, 0.08) 2px,
      transparent 2px
    ),
    radial-gradient(
      circle at 85% 85%,
      rgba(255, 255, 255, 0.08) 2px,
      transparent 2px
    ),
    linear-gradient(135deg, #2a5298 25%, transparent 25%),
    linear-gradient(225deg, #2a5298 25%, transparent 25%),
    linear-gradient(315deg, #2a5298 25%, transparent 25%),
    linear-gradient(45deg, #2a5298 25%, transparent 25%);
  background-size: 50px 50px, 50px 50px, 100px 100px, 100px 100px, 100px 100px,
    100px 100px;
  background-position: 0 0, 0 0, 0 0, 0 0, 50px 50px, 50px 50px;
  animation: patternShift 60s infinite linear;
  position: relative;
  overflow: hidden;
}

.footer-home::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-conic-gradient(
    from 0deg at 50% 50%,
    rgba(62, 155, 255, 0.1) 0deg 30deg,
    rgba(76, 175, 255, 0.05) 30deg 60deg,
    rgba(32, 125, 225, 0.1) 60deg 120deg,
    rgba(20, 96, 169, 0.05) 120deg 180deg,
    rgba(41, 134, 234, 0.1) 180deg 270deg,
    rgba(58, 151, 251, 0.05) 270deg 360deg
  );
  mask: radial-gradient(circle at center, transparent 30%, black 70%);
  opacity: 0.6;
  mix-blend-mode: overlay;
  pointer-events: none;
}

.footer-home::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.03) 25%,
      transparent 25%,
      transparent 75%,
      rgba(255, 255, 255, 0.03) 75%
    ),
    linear-gradient(
      -45deg,
      rgba(255, 255, 255, 0.03) 25%,
      transparent 25%,
      transparent 75%,
      rgba(255, 255, 255, 0.03) 75%
    );
  background-size: 60px 60px;
  pointer-events: none;
}

@keyframes patternShift {
  0% {
    background-position: 0 0, 0 0, 0 0, 0 0, 50px 50px, 50px 50px;
  }
  100% {
    background-position: 100px 100px, -100px -100px, 100px 0px, 0px 100px,
      150px 150px, -50px 0px;
  }
}

/* Subtle shimmer effect */
@keyframes shimmer {
  0%,
  100% {
    opacity: 0.5;
  }
  50% {
    opacity: 0.8;
  }
}

.footer-home .icon {
  margin: 30px 0px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.footer-home .icon a img {
  width: 100px;
}
.footer-home .icon a img:hover {
  transform: scale(1.1);
}

.footer-home .icon a:nth-of-type(1) svg:hover {
  color: blue;
}
.footer-home .icon a:nth-of-type(2) svg:hover {
  color: rgba(210, 35, 42, 1);
}

.footer-home .coat {
  font-family: "El Messiri";
  font-weight: bold;
  text-align: center;
  color: #fff;
  font-size: 21px;
}

.footer-home .copy-right {
  font-family: "cairo";
  letter-spacing: 1px;
  font-weight: 700;
  text-align: left;
  color: #fff;
  font-size: 19px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}

.footer-home .copy-right svg {
  padding-left: 10px;
}

.footer-home .copy-right .ros {
  font-family: "Cairo";
  color: var(--bluedark-color);
  background-color: var(--bluelight-color);
  font-size: 18px;
  text-decoration: none;
  box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.773);
  border-radius: 10px;
  padding: 0px 7px;
}
.footer-home .copy-right .ros:hover {
  color: #f1f1f1;
  /* transform: scale(1.1); */
}

.footer-home .copy-right svg {
  color: var(--bluedark-color);
  background-color: var(--bluelight-color);
  border-radius: 50%;
  padding: 5px;
}

.footer-home .copy-right svg:hover {
  color: #25408f;
  transform: scale(1.1);
}

/* End footer section home */

/* Start btn-show-more */
.btn-show-more {
  background: var(--bluedark-color); /* الخلفية تبقى زرقاء */
  color: #fff;
  padding: 5px 15px;
  font-family: "Expo Arabic Book";
  font-size: 18px;
  border-radius: 12px;
  cursor: pointer;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border: 2px solid var(--bluedark-color);
  transition: all 0.5s ease;
}

.btn-show-more:hover {
  background: var(--bluelight-color);
  color: #fff;
  transform: translateY(-3px); /* يطلع لفوق شوية */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* ظل أكبر */
}
/* end btn-show-more */