.container {
  padding: 0 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 25px;
  color: #222a57;
}

.col-12 {
  margin-top: 30px;
  font-size: 1.8rem;
}

.cards_landing {
  display: flex;
  flex-direction: row-reverse;
  gap: 25px;
  flex-wrap: wrap;
  padding: 0 15%;
  justify-content: center;
}

.cards_landing .card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 180px;
  height: 220px;
  padding: 50px 40px;
  border-radius: 10px;
  background-color: #fff;
  color: #222a57;
  font-size: 1.2rem;
  font-weight: 500;
  text-align: center;
  transition: 0.3s ease;
  perspective: 1000px;
  border: 2px solid transparent;

  &:hover {
    box-shadow: 0 0 10px #ef8c6510;
    border: 2px solid #ef8d65;
    cursor: pointer;
  }
}

/* العنصر الداخلي اللي هيتقلب */
.cards_landing .card__inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.5s;
  transform-style: preserve-3d;
}

/* عند الهوفر */
.cards_landing .card:hover .card__inner {
  transform: rotateY(180deg);
}

/* الوجه الأمامي */
.cards_landing .card__front,
.cards_landing .card__back {
  position: absolute;
  top: 0;
  left: 0;
  width: 180px;
  height: 220px;
  backface-visibility: hidden;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px;
  box-sizing: border-box;
}

/* شكل الوجه الأمامي */
.cards_landing .card__front {
  background-color: transparent;
  color: #222a57;
}

/* شكل الوجه الخلفي */
.cards_landing .card__back {
  color: #222a57;
  transform: rotateY(180deg);
  text-align: center;
  font-size: 1.2rem;
}

.dark-mode .cards_landing .card__back {
  color: #fff;
}

/* تصغير الصورة لو محتاج */
.cards_landing .card__front img {
  width: 100px;
  height: 100px;
  margin-bottom: 15px;
}

.cards_landing .card img {
  width: 100px;
  height: 100px;
  margin-bottom: 20px;
}

.cards_landing .card p {
  font-size: 1.2rem;
  width: 85%;
}

.cards_landing .card.last_card {
  margin-bottom: 50px;
}

.container-middle {
  position: relative;
  height: 50%;
  margin-bottom: 30px;
}

.container-middle .imgBG {
  display: flex;
  justify-content: center;
}
.container-middle .imgBG img {
  width: 100%;
  height: 476px;
  object-fit: fill;
}

.components {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white !important;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row-reverse;
  gap: 55px;
}

.components a {
  color: #fff;
}

.components .iconDown {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  height: 100%;
  cursor: pointer;
  transition: 0.3s ease;
  &:hover {
    scale: 1.05;
  }
}

.components .iconDown img {
  filter: brightness(0) invert(1);
  transition: filter 0.3s;
}

.components .iconDown:hover img {
  filter: invert(72%) sepia(36%) saturate(2381%) hue-rotate(328deg)
    brightness(97%) contrast(91%);
}

.components .iconDown:hover p,
.components .iconDown:hover .num {
  color: #ef8d65 !important;
}

.components .iconDown p {
  text-align: center;
  width: 75%;
  margin: 0;
  padding: 0;
}

.components .iconDown img,
.components .iconDown .num {
  margin: 0;
  padding: 0;
}

.num {
  font-size: 2rem;
  font-weight: 700;
}

.forms {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 25px;
  margin-bottom: 50px;
}

.forms .titleForm {
  text-align: center;
}
.forms .titleForm h2 {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 20px;
}
.forms .titleForm p {
  font-size: 1rem;
  margin-bottom: 30px;
}

.formLanding form {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 25px;
  width: 1200px;
}

.formLanding form .form-group {
  display: flex;
  flex-direction: row-reverse;
  text-align: right;
  justify-content: space-evenly;
  gap: 25px;
}
.formLanding form .form-group .form_deg {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.formLanding form .form-group .form_deg label {
  font-size: 1rem;
  font-weight: 500;
}

.formLanding form .form-group .form_deg label span {
  color: red;
}
.formLanding form .form-group .form_deg input {
  width: 460px;
  padding: 12px 15px;
  border-radius: 5px;
  font-size: 1rem;
  font-weight: 500;
  text-align: right;
  border: none;
  outline: none;
  border-radius: 10px;
  transition: border 0.12s ease;
  border: 1px solid transparent !important;
}
.formLanding form .form-group .form_deg input:hover {
  border: 1px solid #ef8d65 !important;
}
.formLanding form .form-group .form_deg input:focus {
  border: 1px solid #ef8d65 !important;
}
.formLanding form .form-group .form_deg input::placeholder {
  color: #c7c8cd;
  font-size: 0.8rem;
}

.dark-mode .formLanding input,
.dark-mode .formLanding textarea {
  background: #231e41 !important;
  color: #fff;
}

.dark-mode .container {
  color: #fff !important;
}

.dark-mode .cards_landing .card {
  background-color: #1e1a35 !important;
  color: #fff !important;
}

.dark-mode .cards_landing .card p {
  color: #fff !important;
}

.dark-mode .cards_landing .card img {
  filter: brightness(0) invert(1) !important;
}

.form_deg_1 {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.form_deg_1 .select-wrapper {
  position: relative;
  display: inline-block;
  width: 1000px;
}

.form_deg_1 .select-wrapper .select-arrow {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: #c7c8cd;
  font-size: 14px;
  pointer-events: none;
  transition: all 0.3s ease;
}

.form_deg_1 .select-wrapper:hover .select-arrow {
  color: #ef8d65;
  transform: translateY(-50%) rotate(180deg);
}

.dark-mode .form_deg_1 .select-wrapper .select-arrow {
  color: #ffffff;
}

.dark-mode .form_deg_1 .select-wrapper:hover .select-arrow {
  color: #ef8d65;
}
.form_deg_1 label {
  font-size: 1rem;
  font-weight: 500;
}
.form_deg_1 label span {
  color: red;
}
.form_deg_1 select {
  width: 1000px;
  padding: 15px 38px 15px 15px;
  border-radius: 10px;
  font-size: 0.8rem;
  font-weight: 500;
  text-align: right;
  border: 1px solid transparent !important;
  cursor: pointer;
  direction: rtl;
  font-family: var(--arabicFont);
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: #ffffff;
}

.form_deg_1 select option[disabled][selected] {
  color: #c7c8cd;
}

.form_deg_1 select {
  color: #c7c8cd; /* اللون الرمادي الافتراضي */
}
.form_deg_1 select:valid {
  color: #000; /* لما تختار أي حاجة اللون يبقى اسود */
}
.form_deg_1 select option {
  color: #000; /* ده اللون بتاع الخيارات */
}

.dark-mode .form_deg_1 select option {
  color: #fff; /* ده اللون بتاع الخيارات */
}

.dark-mode .form_deg_1 select {
  background: #231e41;
  color: white;
}

.form_deg_1 option {
  padding-right: 12px;
}

.form_deg_1 select:hover {
  border: 1px solid #ef8d65 !important;
}
.form_deg_1 select:focus {
  border: 2px solid #ef8d65 !important;
}
.form_deg_1 select::placeholder {
  color: #c7c8cd;
  font-size: 0.8rem;
}

.form_deg_1 option.mute {
  color: #c7c8cd !important;
}

.form_deg_2 {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.form_deg_2 label {
  font-size: 1rem;
  font-weight: 500;
}
.form_deg_2 label span {
  color: red;
}
.form_deg_2 textarea {
  width: 980px;
  font-family: var(--arabicFont);
  padding: 15px 15px;
  border-radius: 5px;
  font-size: 1rem;
  font-weight: 500;
  text-align: right;
  border: none;
  outline: none;
  border-radius: 10px;
  transition: border 0.12s linear;
  border: 1px solid transparent !important;
}
.form_deg_2 textarea:hover {
  border: 1px solid #ef8d65 !important;
}
.form_deg_2 textarea:focus {
  border: 1px solid #ef8d65 !important;
}

.form_deg_2 textarea::placeholder {
  color: #c7c8cd;
  font-size: 0.8rem;
}

.submitBtn {
  padding: 17px 45px;
  background: #ef8d65;
  color: white;
  border-radius: 30px;
  transition: all 0.2s ease;
  margin-bottom: 50px;
  &:hover {
    background: #e67b4f;
  }
  &:active {
    background: #d96b3f;
  }
}

/* forms */
@media (max-width: 1024px) {
  .forms {
    gap: 0;
  }

  .forms .titleForm h2 {
    font-size: 2.5rem;
  }

  .forms .titleForm p {
    font-size: 0.9rem;
  }

  .formLanding form .form-group {
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }

  .form_deg_1 select {
    width: 450px;
    padding: 12px 45px 12px 20px;
    transform: none !important;
    background: #ffffff;
  }

  .form_deg_1 .select-wrapper {
    width: 450px;
  }

  .form_deg_2 textarea {
    width: 450px;
    padding: 12px 15px;
    transform: none !important;
  }

  .dark-mode .form_deg_1 select {
    background: #231e41 !important;
  }
}

@media (max-width: 440px) {
  .card_deatils {
    padding: 0 21%;
    flex-direction: column;
  }

  .forms {
    gap: 0;
  }

  .forms .titleForm h2 {
    font-size: 2rem;
  }

  .forms .titleForm p {
    font-size: 0.9rem;
  }
  .formLanding form {
    width: 0;
  }

  .formLanding form .form-group {
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }

  .vc_row {
    margin: 0 !important;
  }

  .formLanding form .form-group .form_deg label {
    margin-right: 30px;
  }

  .formLanding form .form-group .form_deg input {
    width: 345px;
    padding: 12px 12px;
    transform: none !important;
    margin-right: 25px;
  }

  .form_deg_1 select {
    width: 385px;
    padding: 12px 45px 12px 20px;
    transform: none !important;
    background: #ffffff;
  }

  .form_deg_1 option {
    width: 385px;
  }

  .form_deg_1 .select-wrapper {
    width: 385px;
    margin-right: 20px;
  }

  .form_deg_1 label {
    margin-right: 30px;
  }

  .form_deg_2 textarea {
    width: 335px;
    padding: 12px 15px;
    transform: none !important;
    margin-right: 40px;
  }

  .form_deg_2 label {
    margin-right: 40px;
  }

  .dark-mode .form_deg_1 select {
    background: #231e41 !important;
  }
}