/* ===============================
   Import styles
   - manage and organize CSS imports in the project.
   =============================== */
@import url(imports.css);

/* ===============================
   Fonts
   - Defines custom fonts used in the project.
   =============================== */
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@100;200;300;400;500;600;700&display=swap");

/* Black Weight */
@font-face {
  font-family: 'TheYearOfHandicrafts';
  src: url('../fonts/TheYearOfHandicraftsTTF-Black.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
}

/* Bold Weight */
@font-face {
  font-family: 'TheYearOfHandicrafts';
  src: url('../fonts/TheYearOfHandicraftsTTF-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}

/* Medium Weight */
@font-face {
  font-family: 'TheYearOfHandicrafts';
  src: url('../fonts/TheYearOfHandicraftsTTF-Med.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
}

/* Regular Weight */
@font-face {
  font-family: 'TheYearOfHandicrafts';
  src: url('../fonts/TheYearOfHandicraftsTTF-Reg.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

/* SemiBold Weight */
@font-face {
  font-family: 'TheYearOfHandicrafts';
  src: url('../fonts/TheYearOfHandicraftsTTF-SemBd.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
}


/* End Fonts */

/* ===============================
   Global Resets and Variables
   - Sets root variables for colors, gradients, and spacing.
   - Resets default styles for elements like body, links, and lists.
   - Includes base styles for typography and layout.
   =============================== */
:root {
  --main-color: #5ED503;
  --sec-color: #fff;
  --kayan-color: #2d299f;
  --dark-color: #19181b;
  --bg-color: #fef9f7;
  --bg-grad: linear-gradient(
    180deg,
    #231300 72.63%,
    rgba(55, 34, 9, 0.86) 100%
  );
  --56: 56px;
  --32: 32px;
}

body {
  padding: 0;
  margin: 0;
  font-family: "IBM Plex Sans Arabic", sans-serif;
  direction: rtl;
  text-align: start;
  /* overflow-x: hidden; */
}

/* Style the scrollbar width */
body::-webkit-scrollbar {
  width: 8px; /* Consistent width across devices */
}

/* Style the scrollbar track */

body::-webkit-scrollbar-track {
  background: rgba(57, 43, 108, 1);
  /* border-radius: 10px;  */
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
}

/* Style the scrollbar thumb */
body::-webkit-scrollbar-thumb {
  background-color: var(--main-color);
  border-radius: 10px;
  border: 2px solid rgba(57, 43, 108, 1);
}

* {
  box-sizing: border-box;
}

a {
  text-decoration: none;
  color: #000;
  transition: all 0.3s linear;
}

a:hover {
  text-decoration: none;
  color: var(--main-color) !important;
}

a:focus {
  text-decoration: none;
}

button,
button:hover {
  transition: all 0.3s linear;
}

p {
  margin: 0;
  font-size: 15px;
  line-height: 25px;
  overflow-wrap: anywhere;
}

ul {
  padding: 0;
  margin: 0;
  display: block;
  transition: all 0.3s linear;
}

li {
  display: block;
  list-style: none;
  transition: all 0.3s linear;
}

iframe {
  width: 100%;
  height: 100%;
}

.padding {
  padding: 0 !important;
}

img {
  max-width: 100%;
}

input,
button,
input:focus,
button:focus,
input:active,
button:active,
button:hover,
textarea:active,
textarea:focus,
select,
select:active,
select:focus {
  outline: none !important;
}

textarea {
  resize: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  text-transform: capitalize;
}
/* End Resets */
/***************/
/* Start style */
.navbar-container {
  position: relative;
  width: 100%;
  position: fixed;
  top: 20px;
  left: 0;
  right: 0;
  z-index: 999;
}
.navbar {
  backdrop-filter: blur(5px);
  background: radial-gradient(
    50% 50% at 50% 50%,
    rgba(255, 255, 255, 0.4) 0%,
    var(--token-d49ce14e-f5dc-463a-9b8d-4f0e772df7f1, rgb(255, 255, 255)) 100%
  );
  max-width: 100%;
  width: 100%;
  border-radius: 15px;
  opacity: 1;
  border: 1px solid #eaf0dd;
  padding: 14px;
}
.navbar-container .navbar-brand img {
  max-height: 30px;
}
.navbar-container .navbar-nav .nav-item .nav-link {
  padding: 8px 16px;
  border-radius: 50px;
  transition: all ease-in-out 0.3s;
  color: #1d1f13;
  font-weight: 600;
  font-size: 16px;
}
.navbar-container .navbar-nav .nav-item .nav-link:hover {
  background-color: #fafafb;
  color: #000 !important;
}
.btn {
  border-radius: 50px;
}
.btn-primary {
  background-color: #000;
  border-color: #000;
}
.btn-primary:focus {
  background-color: #000;
  border-color: #000;
  opacity: 0.8;
  box-shadow: 0 0 0 .25rem rgb(48 50 46 / 29%);
}

}
.btn-primary:hover {
  background-color: #000;
  border-color: #000;
  opacity: 0.8;
  transition : all 0.3s linear;
}
button:focus {
  box-shadow: none !important;
}
/*********hero-section*********/
.hero-section {
  padding-top: 60px;
  position: relative;
  /* background: radial-gradient(45% 45% at 50% 50%, #aaf58eb5, transparent); */
  background:radial-gradient(45% 45% at 50% 50%, rgba(94, 213, 3, 0.5)0%, rgba(94, 213, 3, 0.2) 60%, transparent 100%);

}
.hero-section .container {
  position: relative;
}
.hero-section .notsh-base {
  max-width: 160px;
  position: absolute;
  /* -webkit-filter: hue-rotate(31deg);
  filter: hue-rotate(31deg); */
      user-drag: none;
    -webkit-user-drag: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;

}
.hero-section .notsh-base.right-notsh {
  top: 40%;
  right: 0;
  animation: floatUpDown 4s ease-in-out infinite;
}
.hero-section .notsh-base.left-notsh {
  top: 55%;
  left: 0;
  animation: floatDownUp 4s ease-in-out infinite;
}

@keyframes floatUpDown {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes floatDownUp {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(20px);
  }
  100% {
    transform: translateY(0);
  }
}
.hero-content {
  max-width: 750px;
  margin: auto;
  position: relative;
  padding: 100px 60px;
}
.cash-notsh {
  padding: 6px 16px;
  border-radius: 50px;
  background-color: var(--main-color);
  display: inline-block;
  margin: auto;
  font-size: 14px;
  font-weight: 600;
}
.hero-content h1 {
  font-size: 60px;
  font-weight: 700;
  margin: auto;
  line-height: 90px;
}
.hero-content p {
  font-size: 18px;
}
.hero-content .btn {
  font-size: 18px;
}
.scroll-down {
  width: 40px;
  height: 40px;
  border-radius: 50px;
  background-color: var(--main-color);
  color: #000;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  cursor: pointer;
}

.steps {
  padding: 0px 0;
}
.steps .step {
  position: relative;
  margin-bottom: 140px;
}
@media (max-width: 1200px) {
  .steps {
    padding: 0px 0;
  }
  .steps .step {
    margin-bottom: 80px;
  }
}
.steps .step:last-child {
  margin-bottom: 30px;
}
.navbar-default .navbar-nav > li.nav-btn .steps .step a.btn,
.steps .step .btn,
.steps .step .navbar-default .navbar-nav > li.nav-btn a.btn {
  padding-right: 45px;
  padding-left: 45px;
  margin-top: 30px;
}
@media (max-width: 550px) {
  .steps .step .xs-hidden {
    display: none !important;
  }
  .steps .step .full-xs {
    width: 100% !important;
  }
}
.steps .step__img {
  -moz-user-select: none;
  user-select: none;
}
.steps .step__img img {
  max-width: 400px;
}
.steps .step__img img {
  -moz-user-select: none;
  user-select: none;
  pointer-events: none;
}
.steps .step__img.double {
  position: relative;
  margin-top: -90px;
  text-align: center;
}
.steps .step .f1 {
  display: none;
}
@media (max-width: 1200px) {
  .steps .step__img {
    margin: 0 0 70px !important;
  }
  .steps .step__img img {
    max-width: 270px;
    margin: auto;
    width: 100%;
  }
  .steps .step__img.double {
    margin-top: 0;
  }
  .steps .step__img.double img {
    position: static;
  }
  .steps .step .s2 {
    display: none;
  }
  .steps .step .f1 {
    display: block !important;
  }
}
.steps .step__num {
  font-size: 215px;
  font-weight: 700;
  position: absolute;
  top: -90px;
  z-index: -1;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  color: rgba(94, 213, 3, 0.09);
  background: -webkit-linear-gradient(
    280deg,
    rgba(94, 213, 3, 0.6) 0,
    #fff 71%
  );
  background: -o-linear-gradient(transparent, transparent);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
}
.steps .step__title {
  font-size: 42px;
  margin: 0 0 5px;
  font-weight: 700;
}
.steps .step__desc {
  font-size: 18px;
  line-height: 32px;
  width: 90%;
}
.heading h1 {
  font-size: 40px;
  font-weight: 700;
  line-height: 140%;
}
.heading p {
  font-size: 16px;
  font-weight: 500;
}

.footer-logo {
  height: 32px; /* حجم اللوجو */
}

.footer .social-icons a {
  font-size: 1.25rem;
}

.footer .social-icons a:hover {
  color: #000;
}
.top-footer {
  position: relative;
  padding: 100px 0;
  /* background: linear-gradient(
    rgb(255, 255, 255) 0%,
    rgba(169, 245, 142, 0.38) 48.6486%,
    rgba(255, 255, 255, 0.8) 100%
  ); */
  background: linear-gradient(
  #ffffff 0%, 
  rgba(94, 213, 3, 0.2) 50%, 
  rgba(255, 255, 255, 0.85) 100%
);
}
.top-left-t-notsh {
  position: absolute;
  left: 0;
  top: -50px;
  transform: rotate(184deg);
  height: 70px;
  opacity: 0.5;
}
.top-left-t-notsh .notsh-body {
  width: 200px;
  height: 70px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 138 71'%3E%3Cpath d='M 15.093 2.504 C 10.111 2.504 4.866 9.409 3.622 13.936 C 1.583 21.353 1.865 29.763 2.396 37.387 C 2.942 45.217 6.058 54.867 13.23 59.128 C 18.864 62.475 28.643 63.551 35.045 62.108 C 41.261 60.707 47.98 55.498 50.291 49.601 C 51.883 45.539 51.976 39.376 49.164 35.872 C 47.14 33.351 41.362 32.762 39.016 34.945 C 35.541 38.176 32.578 42.487 31.957 47.305 C 30.98 54.879 32.343 59.722 38.967 64.013 C 47.526 69.558 61.108 69.867 70.243 66.114 C 80.467 61.914 91.319 53.518 96.323 43.543 C 98.614 38.978 99.752 34.057 100.147 28.984 C 100.374 26.069 100.846 22.283 99.167 19.701 C 96.42 15.477 90.348 14.566 86.568 18.333 C 83.062 21.827 82.577 27.862 83.92 32.452 C 84.987 36.097 89.378 38.98 92.5 40.758 C 96.527 43.051 101.977 43.426 106.52 43.396 C 119.669 43.309 129.028 30.234 135.982 20.532' fill='transparent' stroke-width='3.11' stroke='rgb(170, 245, 142)' stroke-linecap='round' stroke-miterlimit='10'/%3E%3C/svg%3E")
    no-repeat center/contain;
}
.top-right-t-notsh {
  position: absolute;
  right: 10%;
  bottom: 0px;
  height: 70px;
  opacity: 0.5;
}
.top-right-t-notsh .notsh-body {
  width: 200px;
  height: 150px;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 223 170"><path d="M 206.482 57.889 C 181.106 48.022 149.973 42.798 124.842 56.368 C 108.782 65.04 98.253 85.368 101.552 103.375 C 104.667 120.381 114.971 136.285 133.205 138.161 C 142.71 139.138 151.435 135.818 154.429 126.059 C 159.004 111.149 145.803 93.438 134.555 85.268 C 99.452 59.77 45.921 54.129 6.916 73.577" fill="transparent" stroke-width="4.03871" stroke="rgb(170, 245, 142)" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray=""></path><path d="M 26.344 47.438 C 21.165 53.022 9.739 66.135 5.466 73.905" fill="transparent" stroke-width="4.03871" stroke="rgb(170, 245, 142)" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray=""></path><path d="M 5.465 73.9 C 12.83 75.842 29.503 80.793 37.273 85.065" fill="transparent" stroke-width="4.03871" stroke="rgb(170, 245, 142)" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray=""></path></svg>')
    no-repeat center/contain;
}
.top-footer-content {
  max-width: 800px;
  margin: auto;
}
.top-footer img {
  max-height: 50px;
}
.top-footer h2 {
  font-size: 45px;
  font-weight: 600;
}
.subpages .hero-content h1 {
  font-size: 40px;
  line-height: normal;
}
.faqs .accordion-item {
  margin-bottom: 24px;
  border: 0px !important  ;
  box-shadow: 0 8.293px 37.319px 4.147px rgba(0, 0, 0, 0.08);
  border-radius: 10px !important;
}
.faqs .accordion-item button {
  padding: 24px;
  border-top-right-radius: 10px !important;
  border-top-left-radius: 10px !important;
  background-color: unset !important;
}
.faqs .accordion-item button.collapsed {
  color: #000 !important;
}
.accordion-button:not(.collapsed) {
  color: var(--main-color) !important;
}
.faqs .accordion-item .accordion-header {
  border: 0px !important  ;
  border-radius: 10px !important;
}
.faqs .accordion-button::after {
  margin-inline-start: auto;
  margin-inline-end: unset;
}
.faqs .accordion-button:not(.collapsed)::after {
  filter: brightness(0) saturate(100%) invert(96%) sepia(6%) saturate(3097%)
    hue-rotate(44deg) brightness(99%) contrast(94%);
}

.sign-modal .modal-content {
  border-radius: 20px !important;
}
.form-control {
  box-shadow: none !important;
  padding: 8px 16px;
  border-radius: 8px !important;
  color: #000;
  border-color: #e0e0e0;
}
.form-control:focus {
  border-color: var(--main-color);
}
.sign-modal .btn-success{
  background-color: var(--main-color) !important; 
  border-color: var(--main-color) !important; 
  color: #000 !important;
  transition: ease-in-out 0.3s;
}
.sign-modal .btn-success:hover{
  opacity: 0.8;
}
body.modal-open {
  overflow-y: scroll !important;
  position: fixed;
  width: 100%;
  padding-inline-start: 0px !important;
}
/* End style */