@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
@font-face {
  font-family: "Quantum regular";
  src: url("../fonts/Quantum.otf");
}
@font-face {
  font-family: "khebrat bold";
  src: url("../fonts/khebrat.ttf");
}
@font-face {
  font-family: "bahij regular";
  src: url("../fonts/bahij.ttf");
}
html {
  overflow-y: scroll;
  scrollbar-gutter: stable;
}
body {
  background-color: #f3f3f3;
  font-family: "Poppins", sans-serif;
  overflow-x: hidden;
}
html[dir="rtl"] body {
  font-family: "bahij regular";
}
.quantum_regular {
  font-family: "Quantum regular";
}
html[dir="rtl"] .quantum_regular {
  font-family: "khebrat bold";
  font-weight: bold;
}
.px-73 {
  padding-inline-start: 73px;
  padding-inline-end: 73px;
}
.pt-73 {
  padding-top: 73px;
}
.g-10 {
  gap: 10px;
}
.w-85 {
  width: 85%;
}
.circle_landing {
  position: absolute;
  top: 0;
  inset-inline-end: 0;
  overflow: hidden;
  z-index: -2;
  display: none;
}
.gradient_layer {
  position: absolute;
  top: 0;
  background: transparent
    linear-gradient(180deg, #f3f3f3 0%, #f3f3f3 31%, #f3f3f300 100%) 0% 0%
    no-repeat padding-box;
  height: 305px;
  width: 100%;
  z-index: -1;
}
.section-shape {
  right: 0;
  z-index: -1;
  filter: blur(50px);
}
.lighting_bg {
  inset-inline-start: -140px;
  top: 340px;
}
.section_four .lighting_bg {
  inset-inline-start: unset;
  inset-inline-end: -140px;
  top: -120px;
  z-index: -1;
}

html[dir="rtl"] .section_four .lighting_bg {
  inset-inline-start: -140px;
  inset-inline-end: unset;
}

.section_three .section-shape:nth-child(2) {
  top: 800px;
  left: 0;
  filter: blur(50px);
}
.section_three .section_btn {
  position: absolute;
  justify-content: center;
  left: 50%;
  transform: translateX(-50%);
  bottom: 140px;
}
html[dir="rtl"] .section_three .section-shape:nth-child(2) {
  left: 0;
  right: unset;
}
.banner_description,
nav,
.section_three,
.section_four,
.section_five_description,
.socials,
footer .all-rights,
#about-page,
.whatwedo .tab-content,
.portfolio,
.contact-us,
.webportals {
  padding-inline-start: 73px !important;
  padding-inline-end: 73px !important;
}
.banner_description {
  padding-inline-end: 0 !important;
}
.section_four .circle_landing {
  top: 400px;
}
.section_two {
  padding-block: 0;
  padding-inline-start: 0;
  padding-inline-end: 73px;
}
nav {
  padding-top: 34px !important;
  z-index: 10;
}
.navbar .navbar-collapse {
  background: #f3f3f3;
  border-radius: 12px;
  padding: 12px;
}
@media (min-width: 992px) {
  .navbar .navbar-collapse {
    background: transparent;
    padding: 0;
  }
  ul.navbar-nav {
    align-items: center !important;
    background: rgba(248, 249, 251, 0.7);
    box-shadow: 0px 4px 25px rgba(0, 0, 0, 0.22);
    border-radius: 20px;
    padding: 20px 40px;
  }
}
ul.navbar-nav {
  gap: 25px;
}
a.nav-link,
.navbar-nav .nav-link.active,
button.nav-link {
  color: #111827 !important;
  padding: 0 !important;
  position: relative;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

a.nav-link:hover:not(.active) {
  transform: translateY(-2px);
}

/* Animated underline on hover */
a.nav-link::before {
  content: "";
  position: absolute;
  bottom: -25px;
  width: 0;
  height: 5px;
  background: linear-gradient(90deg, #2f70b7 0%, #2dae92 100%);
  border-radius: 12px;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

a.nav-link:hover::before {
  width: 100%;
}

button.nav-link {
  border: none !important;
  box-shadow: none !important;
}

/* Active link styles */
.navbar-nav .nav-link.active {
  font-weight: 600;
}

.navbar-nav .nav-link.active::after {
  content: "";
  position: absolute;
  bottom: -23px;
  inset-inline-start: 0;
  width: 100%;
  height: 5px;
  background: #facc15;
  border-radius: 12px;
  animation: slideIn 0.5s ease-out;
}

@keyframes slideIn {
  from {
    width: 0;
    inset-inline-start: 50%;
  }
  to {
    width: 100%;
    inset-inline-start: 0;
  }
}

/* Remove hover underline when active */
.navbar-nav .nav-link.active::before {
  display: none;
}

/* Language switcher buttons hover effect */
button.nav-link.lang-btn {
  transition: all 0.3s ease;
}

div:has(.qbs_logo) {
}
.banner_description {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  width: 50%;
}
.banner_description h1 {
  font-size: 50px;
  color: #111827;
  margin-bottom: 48px;
  max-width: 700px;
  text-transform: uppercase;
}
button {
  width: fit-content;
  box-shadow: 0px 3px 10px #0000002b;
  border-radius: 20px !important;
  padding: 16px 48px !important;
  font-size: 20px !important;
}
button.navbar-toggler {
  padding: 0 !important;
  box-shadow: none;
  border: none;
}
.navbar-toggler:focus {
  box-shadow: none;
}
button .navbar-toggler-icon {
  background-color: transparent;
}
button.btn-warning {
  background-color: #facc15;
  color: #333333;
  border: 1px solid transparent;
  transition:
    background-color 0.25s ease,
    color 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.15s ease;
  will-change: transform;
}
button.btn-warning:hover,
button.btn-warning:focus-visible {
  color: #111827;
  box-shadow: 0 8px 20px rgba(250, 204, 21, 0.45);
  transform: translateY(-2px);
}
button.btn-warning:active {
  transform: translateY(0);
  box-shadow: 0 4px 12px rgba(250, 204, 21, 0.35);
}
.banner_section {
  height: calc(100vh - 106px);
}

.container_slider {
  border-radius: 20px;
  padding: 60px;
  position: relative;
  width: 73vw;
  display: flex;
  justify-content: center;
  align-items: center;
}

.progress-ring {
  position: absolute;
  border: none;
  border-radius: 50%;
}

.progress-ring img {
  width: 100%;
  height: 100%;
  -webkit-animation: rotate-in-center 10s linear infinite both;
  animation: rotate-in-center 10s linear infinite both;
}
@-webkit-keyframes rotate-in-center {
  0% {
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg);
  }
  100% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
}
@keyframes rotate-in-center {
  0% {
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg);
  }
  100% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
}

.progress-segment {
  fill: none;
  stroke-width: 12;
  stroke-linecap: round;
  transition: all 0.3s ease;
}

.progress-segment.inactive {
  stroke: #e0e7ef;
}

.progress-segment.active {
  stroke: url(#gradient);
  animation: fillProgress 1s ease-out forwards;
}

@keyframes fillProgress {
  from {
    stroke-dashoffset: 400;
  }
  to {
    stroke-dashoffset: 0;
  }
}

.stats-container {
  position: relative;
  width: 400px;
  height: 400px;
}

.stat-item {
  position: absolute;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
  font-weight: bold;
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transform: scale(0.8);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  cursor: pointer;
}

.stat-item:hover {
  transform: scale(0.95);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.25);
}

.stat-item.active {
  opacity: 1;
  transform: scale(0.9);
}

.stat-item.highlighted {
  background: #facc15 !important;
  z-index: 10;
}

.stat-item.teal {
  background: #2dae92;
}

.stat-number {
  font-size: 40px;
  color: #f8f9fb;
  height: 56px;
  margin-bottom: 0;
  font-weight: 800;
}

.stat-label {
  font-size: 16px;
  color: #f8f9fb;
  font-weight: 400;
}

/* Positions */
.stat-item:nth-child(1) {
  top: -14%;
  inset-inline-start: 33%;
}

.stat-item:nth-child(2) {
  top: 13%;
  inset-inline-end: -8%;
}

.stat-item:nth-child(3) {
  top: 53%;
  inset-inline-end: -8%;
}

.stat-item:nth-child(4) {
  top: 78%;
  bottom: 0;
  inset-inline-start: 33%;
}
.stat-item:nth-child(5) {
  top: 53%;
  inset-inline-start: -6%;
}

.stat-item:nth-child(6) {
  top: 13%;
  inset-inline-start: -7%;
}

.section_two {
  display: flex;
  align-items: center;
  margin-top: 8vw;
  gap: 20px;
}
.details {
  max-width: 100%;
}
.details h2 {
  font-size: 36px;
  color: #111827;
  font-weight: bold;
}
.details h2 span {
  color: #2dae92;
}
img.cotation_top {
  margin-bottom: 25px;
}
html[dir="rtl"] img.cotation_top {
  transform: scaleX(-1);
}
img.cotaion_bottom {
  display: flex;
  place-self: flex-end;
}
html[dir="rtl"] img.cotaion_bottom {
  transform: scaleX(-1);
  margin-top: 15px;
}
.description {
  background: #ffffffce;
  border-radius: 20px;
  padding: 28px 32px;
  margin-top: 48px;
  box-shadow: 0px 4px 25px #00000038;
}
.description span {
  color: #222222;
  font-size: 20px;
}

/* Bullet indicators under description */
.description-bullets {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
}

.description-bullets .bullet {
  width: 5px;
  height: 5px;
  background: #6b7280;
  border-radius: 5px;
  transition: width 0.3s ease;
}

.description-bullets .bullet.active {
  width: 30px;
  height: 5px;
  background: #6b7280;
  border-radius: 5px;
}

/* Description text fade-in animation */
.description-text {
  display: block;
  opacity: 0;
}

.description-text.fade-in {
  animation: descriptionFadeIn 0.5s ease forwards;
}

@keyframes descriptionFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* .section_three div:nth-child(2) button {
  position: relative;
  top: 27px;
} */
@media (min-width: 1381px) {
  /* .section_three div:nth-child(2) button {
    position: relative;
    bottom: -10px;
  } */
  html[dir="rtl"] .section_three div:nth-child(2) button {
    position: unset;
  }
  .banner_description {
    font-size: 60px;
  }
}
html[dir="rtl"] .section_three .lighting_bg {
  left: -140px;
  inset-inline-start: unset;
}
/* html[dir="rtl"] .section_three div:nth-child(2) button {
  position: unset;
} */
.section_three {
  margin-top: 200px;
}
.section_title {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: -1;
}
span.border_title {
  border-top: 4px solid #facc15;
  width: 100%;
}
span.content_title {
  white-space: nowrap;
  padding: 0 30px;
  font-size: 60px;
  color: #111827;
}

.container_whatWeDo {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
  gap: 10px 40px;
  position: relative;
  margin-top: 150px;
}
html[dir="rtl"] .container_whatWeDo {
  gap: 50px 40px;
}
.item {
  background: #f8f9fb 0% 0% no-repeat padding-box;
  box-shadow: 0px 4px 25px #00000038;
  border-radius: 20px;
  align-content: center;
  padding: 13px 23px 17px 23px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 12px;
  width: 100%;
}
.item:nth-child(1) {
  grid-area: 1 / 1 / 2 / 2;
}

.item:nth-child(2) {
  grid-area: 1 / 3 / 2 / 4;
}

.item:nth-child(3) {
  grid-area: 2 / 2 / 1 / 3;
  top: 11rem;
  position: absolute;
}

.item:nth-child(4) {
  grid-area: 3 / 1 / 4 / 2;
  position: absolute;
  top: -7rem;
}

.item:nth-child(5) {
  grid-area: 3 / 3 / 4 / 4;
  position: absolute;
  top: -7rem;
}

.item:nth-child(6) {
  grid-area: 4 / 2 / 5 / 3;
  position: absolute;
  top: -12rem;
}

.item:nth-child(7) {
  grid-area: 5 / 1 / 6 / 2;
  position: absolute;
  top: -14.5rem;
}

.item:nth-child(8) {
  grid-area: 5 / 3 / 6 / 4;
  position: absolute;
  top: -15rem;
}
.item a:nth-child(2) {
  color: #2dae92;
  font-size: 22px;
  text-align: center;
  font-weight: 600;
  margin-top: 50px;
  text-decoration: none;
}
.item span:nth-child(3) {
  color: #222222;
  font-size: 14px;
  max-width: 300px;
  text-align: center;
}
.px-83 {
  padding-inline-start: 83px;
  padding-inline-end: 83px;
}
button.btn-warning-light {
  background: transparent;
  border: 1px solid #facc15;
  height: 35px;
  padding: 0 !important;
  width: 100%;
  font-size: 14px !important;
  margin-top: 10px;
  transition: all 0.3s ease-in-out;
}
button.btn-warning-light:hover {
  background: #facc15;
  color: #333333;
}
/* .item img {
  position: absolute;
  top: -100px;
} */
.item img {
  position: absolute;
  top: -11%;
  max-width: 22.130308vw;
  height: auto;
  padding: 0 45px;
}
.section_three .container_whatWeDo .item:nth-child(2) img {
  top: -15%;
}
.section_three .container_whatWeDo .item:nth-child(3) img {
  top: -5.5vw;
}
.section_three .container_whatWeDo .item:nth-child(4) img {
  top: -15%;
}
.section_three .container_whatWeDo .item:nth-child(6) img {
  top: -28%;
}
.section_three .container_whatWeDo .item:nth-child(5) img {
  top: -7vw;
}
.section_three .container_whatWeDo .item:nth-child(7) img {
  top: -35%;
}
span.happening_content_title {
  white-space: nowrap;
  padding: 15px 40px;
  font-size: 50px;
  color: #111827;
  position: relative;
}
.happening_content_title::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  bottom: 0;
  width: 67px;
  height: 57px;
  border-inline-start: 7px solid #facc15;
  border-bottom: 7px solid #facc15;
  border-radius: 7px;
}

.happening_content_title::after {
  content: "";
  position: absolute;
  inset-inline-end: 0;
  top: 0;
  width: 67px;
  height: 57px;
  border-inline-end: 7px solid #facc15;
  border-top: 7px solid #facc15;
  border-radius: 7px;
}
.happening_grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(1, 1fr);
  margin: 75px 0;
  gap: 16px;
}
.section_btn .btn.btn-warning {
  width: 317px;
}
.happening_card {
  display: flex;
  flex-direction: column;
  gap: 18px;
  box-shadow: 0px 4px 25px #00000038;
  border-radius: 20px;
  background-color: white;
  padding-bottom: 30px;
}
.title_and_date {
  font-size: 12px;
  color: #2f70b7;
  display: flex;
  gap: 15px;
  padding-block: 0;
  padding-inline: 30px;
}
span.custom_title {
  font-size: 22px;
  color: #2dae92;
  padding-block: 0;
  padding-inline: 30px;
  font-weight: 600;
}
span.custom_description {
  color: #222222;
  font-size: 14px;
  padding-block: 0;
  padding-inline: 30px;
}
.happening_card img {
  border-radius: 20px 20px 0 0;
  height: 191px;
  object-fit: cover;
}
.section_five {
  padding-top: 20px;
}
/* .section_five_description {
  max-width: 572px;
} */
.section_five_description h2 {
  font-size: 50px;
  color: #111827;
  margin-bottom: 30px;
}
.section_five_description p {
  font-size: 20px;
  margin-top: 5px;
  max-width: 800px;
  margin: auto;
  text-align: center;
  color: #222222;
}

.timeline_wrapper {
  overflow: hidden;
  position: relative;
  padding-bottom: 60px;
}
.timeline {
  position: relative;
  display: flex;
  /* overflow-x: auto; */
  gap: 100px;
  width: 100%;
  margin: auto;
  padding: 50px 80px;
  min-height: 512px;
  padding-top: 350px;
}
.timeline_bg {
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  z-index: 2;
}
.timeline_bg img {
  width: 3595px;
}
html[dir="rtl"] .timeline_bg img {
  transform: scaleX(-1);
}
.step {
  display: flex;
  gap: 20px;
  position: relative;
}
.step img {
  width: 112px;
  height: 148px;
}
.step_content {
  min-width: 350px;
  display: flex;
  flex-direction: column;
}
.step_content h3 {
  font-size: 26px;
  font-weight: 700;
  color: #111827;
}
.step_content p {
  font-size: 17px;
  color: #111827;
  margin-bottom: 0;
}

.circle {
  width: 23px;
  height: 23px;
  background: #ffd500;
  border-radius: 50%;
  z-index: 2;
  position: absolute;
}

/* تحديد مواقع المراحل */
.step1 .circle {
  top: -60px;
  margin-inline-start: 1.5px;
}
.step2 .step_content {
  margin-top: 20px;
}
.step2 .circle {
  top: -110px;
  /* margin-inline-end: 16px; */
  margin-inline-start: 1px;
}
.step3 .circle {
  top: -52px;
}
.details_container {
  width: 60vw;
}
.step4 .circle {
  top: -96px;
  margin-inline-start: -5.5px;
}
.step5 .circle {
  top: -152px;
  margin-inline-start: -2px;
}
.step2 {
  position: relative;
  bottom: 80px;
}
.step3 {
  position: relative;
  bottom: 75px;
}
.step4 {
  position: relative;
  bottom: 250px;
}
.step5 {
  position: relative;
  bottom: 160px;
}
.step6 {
  position: relative;
  /* left: 200px; */
  bottom: 30px;
}
html[dir="rtl"] .step6 {
  /* right: 200px; */
  left: unset;
}
.step6 .circle {
  top: -57px;
}
.socials {
  background-color: white;
  padding-top: 28px;
  padding-bottom: 28px;
}
.socials button {
  min-width: 226px;
  padding: 11px 0 !important;
  font-size: 20px;
  box-shadow: 0px 3px 10px #0000002b;
  border-radius: 20px;
}
.socials span {
  color: #3d3d3d;
  font-size: 20px;
}
.social_icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: #facc15;
  display: flex;
  justify-content: center;
  align-items: center;
}
.footer-content {
  padding: 74px;
  background-color: #0f243b;
}
footer .lists {
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin-top: 28px;
}
footer .lists a {
  color: #f8f9fb;
  font-size: 14px;
  text-decoration: none;
}
footer .col span {
  color: #2f70b7;
  font-size: 20px;
  font-weight: 600;
}
footer .all-rights {
  background-color: #111827;
}
footer .all-rights p {
  color: #f8f9fb;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 0;
}
.py-30 {
  padding-top: 30px;
  padding-bottom: 30px;
}
.gap-120 {
  gap: 120px;
}

.fade-slow {
  --fade-duration: 0.8s;
}
.fade-delay-100 {
  --fade-delay: 0.1s;
}
.fade-delay-300 {
  --fade-delay: 0.3s;
}
#story .section-shape,
#mission .section-shape {
  inset-inline-end: -120px;
}
#mission .section-shape {
  top: -200px !important;
}
#vision .section-shape {
  inset-inline-start: -73px;
  inset-inline-end: unset;
}

.tab-pane .content-box {
  width: 41.43vw;
  background: #2f70b7 0% 0% no-repeat padding-box;
  border-radius: 43px;
  padding: 43px 35px 30px 48px;
}
.tab-pane .content-image {
  max-width: 41.63vw;
  position: relative;
  border-radius: 40px;
}
.tab-pane#vision .content-box {
  position: relative;
  width: 41.43vw;
  background: #2dae92;
  z-index: 2;
  inset-inline-end: -38vw;
}
.tab-pane#vision .content-image {
  inset-inline-start: 0;
  bottom: 10.5vw;
  z-index: 1;
}
.tab-pane#mission .content-box {
  position: relative;
}
html[dir="rtl"] .tab-pane#mission .content-box p,
html[dir="rtl"] .tab-pane#vision .content-box p {
  direction: rtl;
}
.tab-pane#mission .content-image {
  position: relative;
  inset-inline-end: -37.5vw;
  z-index: 1;
  bottom: 11vw;
}
.tab-pane .content-image img {
  border-radius: 40px;
}
html[dir="rtl"] .tab-pane .content-image img {
  transform: scaleX(-1);
}

/* Override RTL image flip for vision/mission sections with dir="ltr" */
html[dir="rtl"] .tab-pane[dir="ltr"] .content-image img {
  transform: none;
}

.tab-pane .content-box p {
  color: white;
  font-size: 18px;
}
.tabs-container {
  display: flex;
  justify-content: flex-start;
  margin-top: 120px;
}

.tabs-wrapper {
  display: flex;
  gap: 29px;
  padding: 10px 7px;
  background: rgba(248, 249, 251, 0.7);
  box-shadow: inset 0px 3px 6px rgba(0, 0, 0, 0.16);
  border-radius: 31px;
}

.tabs-wrapper .tab-btn {
  padding: 10px 26px !important;
  font-size: 16px !important;
  font-weight: 600;
  border: none;
  background: transparent;
  color: #000000;
  border-radius: 29px !important;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
  box-shadow: none;
}

.tab-btn:hover {
  background: #facc1520;
  transform: translateY(0);
  box-shadow: none;
}

.tab-btn.active {
  background: #facc15;
  color: #000000;
  box-shadow: 0px 3px 10px rgba(250, 204, 21, 0.3);
}

.tab-content .content {
  margin-top: 50px;
}

.tab-pane {
  margin-top: 73px;
}
.contact-us .tab-pane {
  margin-top: 56px;
}
.tab-content .content p {
  font-size: 18px;
  color: #000000;
  margin-bottom: 20px;
}
.tab-content .content p span {
  font-weight: 300;
  font-style: italic;
  font-size: 22px;
}
html[dir="rtl"] .tab-content .content p span {
  font-size: 24px;
  line-height: 2;
}
.tab-pane {
  display: none;
  animation: fadeIn 0.4s ease-in;
}

.tab-pane.active {
  display: block;
}

.tab-content #story .lighting_bg,
.contact-us .lighting_bg {
  top: 700px;
  inset-inline-end: -180px;
  inset-inline-start: unset;
  z-index: -1;
}
.contact-us .lighting_bg {
  inset-inline-end: -107px;
  top: 900px;
  z-index: -1;
}
.tab-content #story .lighting_bg:nth-child(2) {
  left: -180px;
}
.contact-us .lighting_bg:nth-child(1) {
  left: -107px;
}
.contact-us .lighting_bg:nth-child(3) {
  right: -107px;
}
.whatwedo,
.webportals {
  margin-top: 74px;
}
.webportals {
  margin-top: 50px;
}
html[dir="rtl"] .tab-content #story .lighting_bg {
  top: 550px;
}
html[dir="rtl"] .tab-content #story .lighting_bg:nth-child(3) {
  left: 0;
  right: -180px;
}
html[dir="rtl"] .tab-content #story .lighting_bg:nth-child(2) {
  left: -230px;
}
.whatwedo .section_title {
  margin-inline-start: 58px;
}
.whatwedo-container {
  padding-inline-start: 73px;
}
.whatwedo-content {
  max-width: 388px;
}
html[dir="rtl"] .whatwedo-content .section_title {
  justify-content: unset;
  align-items: unset;
  margin-inline-start: unset;
}
.whatwedo-content p {
  margin: 36px 0 75px 0;
  font-size: 20px;
  font-weight: 500;
  color: #737373;
}
.whatwedo {
  padding-bottom: 150px;
}
.whatwedo .container_whatWeDo {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr;
  gap: 10px 28px;
  position: relative;
  margin-top: 100px;
}
.whatwedo .container_whatWeDo .item:nth-child(1),
.whatwedo .container_whatWeDo .item:nth-child(2),
.whatwedo .container_whatWeDo .item:nth-child(3),
.whatwedo .container_whatWeDo .item:nth-child(4) {
  grid-area: unset;
  position: unset;
}
.whatwedo .container_whatWeDo .item a:nth-child(2) {
  text-align: center;
  text-decoration: none;
  margin-bottom: 12px;
}
.whatwedo .container_whatWeDo .item {
  position: relative;
}
.whatwedo .container_whatWeDo .item span:nth-child(3) {
  margin: auto;
}
.whatwedo .container_whatWeDo .item img {
  inset-inline-start: 50%;
  transform: translateX(-50%);
}
[dir="rtl"] .whatwedo .container_whatWeDo .item img {
  transform: translateX(50%);
}
.whatwedo .tabs-container {
  margin-top: 0;
}
.contact-us {
  padding-top: 87px;
  padding-bottom: 110px;
}
.contact-us-container {
  margin-top: 33px;
}
.contact-content {
  background: #ffffff 0% 0% no-repeat padding-box;
  box-shadow: 0px 3px 25px #00000029;
  border-radius: 50px;
  display: flex;
}

.contact-content form h2,
.about-page-container h2 {
  font-size: 30px;
  font-weight: bold;
  font-family: "bahij regular";
  color: #333333;
}
html[dir="rtl"] .about-page-container .section-shape {
  top: -400px !important;
}
.contact-content form p {
  margin: 18px 0 26px 0;
  color: #333333;
  font-size: 18px;
  font-weight: 300;
}
.contact-content-wrapper {
  padding-block: 50px;
  padding-inline-end: 0;
  padding-inline-start: 50px;
  flex-grow: 1;
}
html[dir="rtl"] .contact-content-wrapper {
  direction: rtl;
}
.contact-content .contact-image {
  background-image: url(../img/demo.png);
  background-size: cover;
  border-start-end-radius: 50px;
  border-end-end-radius: 50px;
  border-start-start-radius: 0;
  border-end-start-radius: 0;
  width: 28.4vw;
  max-height: 100%;
}
.contact-content.message-active .contact-image {
  background-image: url(../img/message.png);
}

/* Custom fade-in animation for contact-image - re-triggerable on tab switch */
@keyframes contactImageFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.contact-image.contact-image-animate {
  animation: contactImageFadeIn 0.8s ease-out forwards;
}
html[dir="rtl"] .contact-content .contact-image {
  background-image: url(../img/demo.png);
}
html[dir="rtl"] .contact-content.message-active .contact-image {
  background-image: url(../img/message.png);
}
.form-group {
  display: flex;
  width: 85%;
}
.form-group label {
  width: 30%;
  padding: 15px 21px;
  color: #0f243b;
  font-size: 14px;
  font-weight: 600;
  background: rgba(15, 36, 59, 0.05);
  border-start-start-radius: 10px;
  border-end-start-radius: 10px;
  border-start-end-radius: 0;
  border-end-end-radius: 0;
}
.form-group input,
.form-group textarea {
  width: 70%;
  color: #0f243b;
  font-size: 14px;
  font-weight: 400;
  background: rgba(15, 36, 59, 0.02);
  border-start-start-radius: 0;
  border-end-start-radius: 0;
  border-start-end-radius: 10px;
  border-end-end-radius: 10px;
  border: none;
}
.form-group textarea {
  height: 112px;
}
.form-control:focus {
  box-shadow: none;
  background: rgba(15, 36, 59, 0.02);
}
.contact-content button.btn-warning {
  background: #facc15 0% 0% no-repeat padding-box;
  border-radius: 10px !important;
  color: #333333;
  font-size: 1.2vw !important;
  margin-top: 7px;
  box-shadow: unset;
  font-weight: 400;
  width: 30%;
  padding: 11px 0 !important;
}
.contact-us .section-shape {
  top: -100px !important;
}

.about-page-container,
.whatwedo-tabs-container .tab-content > div:first-child {
  padding-block-start: 59px;
  padding-block-end: 44px;
  padding-inline-end: 100px;
  padding-inline-start: 52px;
  background: #ffffff 0% 0% no-repeat padding-box;
  box-shadow: 0px 3px 25px #00000029;
  border-radius: 50px;
  margin-top: 33px;
  margin-bottom: 100px;
}
.whatwedo-tabs-container .tab-content > div:first-child {
  padding-inline-end: 59px;
}
.tab-content .content p:last-child {
  margin-bottom: 0;
}
.about-page-container .tabs-container {
  margin-top: 0px;
}
.about-page-container .tab-pane {
  margin-top: 47px;
}
.about-page-container .tab-content .content {
  margin-top: 24px;
}
.about-page-container .tab-content {
  padding-bottom: 0;
}
.back-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1000;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(30px);
  transition:
    opacity 0.6s ease-in-out,
    transform 0.6s ease-in-out,
    visibility 0.6s;

  img {
    transition: transform 0.3s ease-in-out;
  }

  &:hover img {
    transform: translateY(-5px) scale(1.05);
  }

  &.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    animation: fadeUpIn 0.6s ease-out;
  }
}
html[dir="rtl"] .back-to-top {
  right: unset;
  left: 20px;
}
@keyframes fadeUpIn {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.webportals-container,
.webportals-services {
  padding-bottom: 12vw;
  gap: 40px;
}
.webportals-container {
  padding-bottom: 0;
}
html[dir="rtl"] .webportals-container {
  padding-bottom: 0;
}
.webportals-content .section_title {
  color: #3c3c3c;
}
.webportals-content {
  width: 38.5vw;
}
.webportals-content p {
  font-size: 1.15vw;
  line-height: 2.13vw;
  color: #222222;
}
.webportals-image {
  width: 46.63vw;
  position: relative;
}
.webportals-image img:first-child {
  width: 75%;
  position: relative;
  inset-inline-start: 3vw;
}
html[dir="rtl"] .webportals-image img:first-child {
  inset-inline-end: unset;
  inset-inline-start: 5vw;
  rotate: 25deg;
}
.webportals-image img:nth-child(2) {
  width: 100%;
  /* height: 32vw; */
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  z-index: -1;
}
html[dir="rtl"] input[type="tel"] {
  direction: rtl;
}
.form-control.is-invalid,
.was-validated .form-control:invalid {
  padding: 0.375rem 0.75rem;
}
.leading-30 {
  line-height: 30px;
}
.webportals-services {
  display: flex;
  justify-content: space-between;
}
.webportals-services .service-item {
  position: relative;
  width: 39.3vw;
}
.webportals-services .service-item img:nth-child(2) {
  height: 44vw;
  max-width: 100%;
  position: absolute;
  top: 0;
  inset-inline-start: 10px;
  top: 10px;
}

.webportals-services .service-content {
  position: relative;
  top: 100px;
  padding-block-start: 50px;
  padding-block-end: 90px;
  padding-inline-end: 77px;
  padding-inline-start: 50px;
  background: #fffffff0 0% 0% no-repeat padding-box;
  box-shadow: 0px 3px 6px #00000066;
  border-radius: 29px;
  width: 43.4vw;
}
.webportals-services .service-content ul li,
.webportals-services .service-content p {
  font-size: 1.15vw;
  line-height: 2.13vw;
  color: #222222;
}
.webportals-services .service-content::before {
  content: "";
  position: absolute;
  width: 91%;
  inset-inline-start: 50%;
  height: 96%;
  top: -25px;
  transform: translateX(-50%);
  background: #2f70b7 0% 0% no-repeat padding-box;
  box-shadow: 0px 3px 6px #00000066;
  border-radius: 29px;
  z-index: -1;
}
[dir="rtl"] .webportals-services .service-content::before {
  transform: translateX(50%);
}
.webportals .webportals-services:nth-child(3) {
  margin-top: 5vw;
  padding-bottom: 80px;
}
.webportals .webportals-services:nth-child(3) .service-content {
  height: fit-content;
  margin-top: 3vw;
  width: 46.4vw;
}
.webportals .webportals-services:nth-child(3) .service-content::before {
  background-color: #2dae92;
}
.webportals button {
  margin: 0 0 100px 0;
  width: 317px;
  border-radius: 10px !important;
}
main.homepage {
  overflow-x: hidden;
}
.services span.happening_content_title {
  font-size: 3vw;
  white-space: unset;
}
.nav-link.lang-btn {
  font-size: 16px !important;
}
.webportals .webportals-services:nth-child(3) .service-item img:nth-child(2) {
  height: 31vw;
}
.webportals .webportals-services {
  margin-top: 70px;
}
.whatwedo #services .container_whatWeDo .item img {
  top: -3.5vw;
}
.whatwedo #products .container_whatWeDo .item:nth-child(2) img {
  top: -5vw;
}
.whatwedo #services .container_whatWeDo .item:nth-child(2) img,
.whatwedo #services .container_whatWeDo .item:nth-child(4) img {
  top: -6vw;
}
.whatwedo #services .container_whatWeDo .item:nth-child(1) img {
  top: -7vw;
}
.whatwedo #services .container_whatWeDo .item:nth-child(3) img {
  top: -7.5vw;
}
/* Country Pin Animations */
@keyframes pinPulse {
  0%,
  100% {
    filter: drop-shadow(0 0 0px rgba(47, 112, 183, 0));
  }
  50% {
    filter: drop-shadow(0 0 12px rgba(47, 112, 183, 0.6));
  }
}

@keyframes pinFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

.country-pin {
  position: absolute;
  cursor: pointer;
  transition:
    transform 0.3s ease,
    filter 0.3s ease;
}
.country-pin:hover div {
  opacity: 1;
  visibility: visible;
  transition: all 0.3s ease-in-out;
}
.country-pin div {
  position: absolute;
  padding: 6px 11px;
  box-shadow: 0px 0px 6px #00000047;
  border-radius: 14px;
  width: 100px;
  inset-inline-start: 35px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease-in-out;
  z-index: 22;
}
.country-pin div p {
  color: #111827;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 0;
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 0.3s ease-out 0.1s,
    transform 0.3s ease-out 0.1s;
}
.country-pin:hover div p {
  opacity: 1;
  transform: translateY(0);
}
.banner_image .country-pin:nth-child(2) div {
  background: linear-gradient(
    90deg,
    rgba(140, 198, 240, 0.85) 0%,
    rgba(140, 145, 240, 0.85) 100%
  );

  bottom: -30px;
}
.banner_image .country-pin:nth-child(3) div {
  background: linear-gradient(
    90deg,
    rgba(44, 156, 236, 0.85) 0%,
    rgba(140, 145, 240, 0.85) 100%
  );
  inset-inline-start: -23px;
  bottom: -51px;
  width: fit-content;
}
.banner_image .country-pin:nth-child(4) div {
  background: linear-gradient(
    90deg,
    rgba(140, 233, 240, 0.85) 0%,
    rgba(140, 206, 240, 0.85) 100%
  );
  bottom: 40px;
  inset-inline-start: 43px;
  width: fit-content;
}
.banner_image .country-pin:nth-child(5) div {
  background: linear-gradient(
    90deg,
    rgba(240, 229, 70, 0.85) 0%,
    rgba(229, 240, 70, 0.85) 100%
  );
  bottom: -42px;
  inset-inline-start: 20px;
  width: fit-content;
}
.banner_image .country-pin:nth-child(6) div {
  background: linear-gradient(
    90deg,
    rgba(116, 243, 167, 0.85) 0%,
    rgba(110, 244, 177, 0.85) 100%
  );
  bottom: 40px;
  inset-inline-start: 50px;
  width: fit-content;
}
.banner_image .country-pin:nth-child(7) div {
  background: linear-gradient(
    90deg,
    rgba(255, 200, 83, 0.85) 0%,
    rgba(255, 161, 87, 0.85) 100%
  );
  bottom: -40px;
  /* right: 20px;
  bottom: -60px; */
}
.banner_image .country-pin:nth-child(8) div {
  background: linear-gradient(
    90deg,
    rgba(237, 140, 240, 0.85) 0%,
    rgba(240, 140, 210, 0.85) 100%
  );
  bottom: 3px;
  inset-inline-start: 48px;
  width: fit-content;
}
.banner_image .country-pin:nth-child(9) div {
  background: linear-gradient(
    90deg,
    rgba(187, 140, 240, 0.85) 0%,
    rgba(193, 140, 240, 0.85) 100%
  );
  bottom: -30px;
}
.banner_image .country-pin:nth-child(2) {
  top: 4.1%;
  inset-inline-end: 49.5%;
}
.banner_image .country-pin:nth-child(3) {
  top: -3%;
  inset-inline-end: 44.9%;
}
.banner_image .country-pin:nth-child(4) {
  top: 1%;
  inset-inline-end: 40.8%;
}
.banner_image .country-pin:nth-child(5) {
  top: 40%;
  inset-inline-end: 40.8%;
}
.banner_image .country-pin:nth-child(5) {
  top: 27%;
  inset-inline-end: 39%;
  z-index: 2;
}
.banner_image .country-pin:nth-child(6) {
  top: 17%;
  inset-inline-end: 37.7%;
}
.banner_image .country-pin:nth-child(7) {
  top: 29%;
  inset-inline-end: 35.5%;
  z-index: 2;
}
.banner_image .country-pin:nth-child(8) {
  top: 23%;
  inset-inline-end: 33.5%;
}
.banner_image .country-pin:nth-child(9) {
  top: 27%;
  inset-inline-end: 32.2%;
}
/* 
.country-pin.aos-animate {
  animation: pinPulse 3s ease-in-out infinite, pinFloat 4s ease-in-out infinite;
}

.country-pin:hover {
  transform: scale(1.15) translateY(-3px) !important;
  filter: drop-shadow(0 8px 15px rgba(47, 112, 183, 0.4)) !important;
  animation-play-state: paused;
}

.country-pin img {
  transition: transform 0.3s ease;
} */
html[dir="rtl"] .banner_image img {
  transform: scaleX(-1);
}
html[dir="rtl"] .footer-content {
  direction: ltr;
  text-align: left;
}
html[dir="rtl"] footer {
  direction: ltr;
}
html[dir="rtl"] .socials {
  direction: rtl;
}
html[dir="rtl"] .dir-rtl {
  text-align: end;
}
.description-header {
  color: #facc15 !important;
  font-size: 28px !important;
  font-weight: bold !important;
}
html[dir="rtl"] .all-rights p {
  direction: rtl;
}
@media (min-width: 1300px) {
  .section_three .container_whatWeDo .item:last-child img {
    top: -20%;
  }
  .section_three .container_whatWeDo .item:nth-child(4) img {
    top: -9%;
  }
  .section_three .container_whatWeDo .item:nth-child(6) img {
    top: -29%;
  }
  .section_three .container_whatWeDo .item:nth-child(6) img {
    top: -22%;
  }
  .section_three .container_whatWeDo .item:nth-child(7) img {
    top: -35%;
  }
  .section_three .container_whatWeDo .item:last-child img {
    top: -22%;
  }
  .section_three .container_whatWeDo .item:nth-child(5) img {
    top: -30%;
  }

  html[dir="rtl"] .section_three .container_whatWeDo .item:last-child img {
    top: -20%;
  }
  html[dir="rtl"] .section_three .container_whatWeDo .item:nth-child(4) img {
    top: -13%;
  }
  html[dir="rtl"] .section_three .container_whatWeDo .item:nth-child(6) img {
    top: -29%;
  }
  html[dir="rtl"] .section_three .container_whatWeDo .item:nth-child(6) img {
    top: -29%;
  }
  html[dir="rtl"] .section_three .container_whatWeDo .item:nth-child(7) img {
    top: -32%;
  }
  html[dir="rtl"] .section_three .container_whatWeDo .item:last-child img {
    top: -25%;
  }
  html[dir="rtl"] .section_three .container_whatWeDo .item:nth-child(5) img {
    top: -32%;
  }
  .whatwedo #services .container_whatWeDo .item:nth-child(1) img {
    top: -26%;
  }
  .whatwedo #services .container_whatWeDo .item:nth-child(2) img {
    top: -21%;
  }
  .whatwedo #services .container_whatWeDo .item:nth-child(3) img {
    top: -24%;
  }
  .whatwedo #services .container_whatWeDo .item:nth-child(4) img {
    top: -19.5%;
  }
  .whatwedo #products .container_whatWeDo .item:nth-child(1) img {
    top: -10%;
  }
  .whatwedo #products .container_whatWeDo .item:nth-child(2) img {
    top: -12.5%;
  }
  .whatwedo #products .container_whatWeDo .item:nth-child(3) img {
    top: -9%;
  }
  .whatwedo #products .container_whatWeDo .item:nth-child(4) img {
    top: -13%;
  }
  html[dir="ltr"] .section_three .container_whatWeDo .item:nth-child(1) img {
    top: -14.5%;
  }
}
@media (min-width: 1300px) and (max-width: 1430px) {
  html[dir="ltr"] .section_three .container_whatWeDo .item:nth-child(1) img {
    top: -9.5%;
  }

  html[dir="rtl"] .section_three .container_whatWeDo .item:nth-child(1) img {
    top: -11.5%;
  }
  .section_three .container_whatWeDo .item:nth-child(2) img {
    top: -12%;
  }
  html[dir="rtl"].section_three .container_whatWeDo .item:nth-child(2) img {
    top: -17%;
  }
  html[dir="rtl"]
    .whatwedo
    #services
    .container_whatWeDo
    .item:nth-child(1)
    img {
    top: -35%;
  }
  html[dir="rtl"]
    .whatwedo
    #services
    .container_whatWeDo
    .item:nth-child(2)
    img {
    top: -28%;
  }
  html[dir="rtl"]
    .whatwedo
    #services
    .container_whatWeDo
    .item:nth-child(3)
    img {
    top: -30%;
  }
  html[dir="rtl"]
    .whatwedo
    #services
    .container_whatWeDo
    .item:nth-child(4)
    img {
    top: -25.5%;
  }
  html[dir="rtl"]
    .whatwedo
    #products
    .container_whatWeDo
    .item:nth-child(1)
    img {
    top: -12%;
  }
  .whatwedo #products .container_whatWeDo .item:nth-child(2) img {
    top: -16.5%;
  }
  html[dir="rtl"]
    .whatwedo
    #products
    .container_whatWeDo
    .item:nth-child(3)
    img {
    top: -12%;
  }
  html[dir="rtl"]
    .whatwedo
    #products
    .container_whatWeDo
    .item:nth-child(4)
    img {
    top: -17%;
  }
  .whatwedo #products .container_whatWeDo .item:nth-child(2) img {
    top: -11.5%;
  }
  html[dir="rtl"]
    .whatwedo
    #products
    .container_whatWeDo
    .item:nth-child(2)
    img {
    top: -15.5%;
  }
  .tab-pane#mission .content-image {
    inset-inline-end: -38vw;
  }
  .tab-pane#vision .content-box {
    inset-inline-end: -38.3vw;
  }
  html[dir="rtl"] .tab-pane#vision .content-box {
    inset-inline-end: -39vw;
  }
  html[dir="rtl"] .step.step1 .step_content {
    padding-top: 25px;
  }
  .section_three .container_whatWeDo .item:nth-child(3) img {
    top: -2.6vw;
  }
  html[dir="rtl"] .section_three .container_whatWeDo .item:nth-child(3) img {
    top: -2.6vw;
  }
  html[dir="rtl"]
    .whatwedo
    #products
    .container_whatWeDo
    .item:nth-child(2)
    img {
    top: -14.5%;
  }
  .whatwedo-container .banner_image {
    zoom: 0.9;
  }
  html[dir="rtl"].section_three .container_whatWeDo .item:nth-child(7) img {
    top: -29%;
  }
  html[dir="ltr"] .section_three .container_whatWeDo .item:nth-child(7) img {
    top: -29%;
  }
  html[dir="rtl"] .section_three .container_whatWeDo .item:nth-child(2) img {
    top: -17%;
  }
}
@media (min-width: 1430px) {
  .section_three .container_whatWeDo .item:nth-child(6) img {
    top: -29%;
  }
  .section_three .container_whatWeDo .item:nth-child(4) img {
    top: -19%;
  }
  .section_three .container_whatWeDo .item:nth-child(5) img {
    top: -36%;
  }
  .section_three .container_whatWeDo .item:last-child img {
    top: -27%;
  }
  .section_three .container_whatWeDo .item:nth-child(4) img {
    top: -13%;
  }
  html[dir="rtl"] .section_three .container_whatWeDo .item:nth-child(2) img {
    top: -20%;
  }
  html[dir="rtl"] .section_three .container_whatWeDo .item:nth-child(1) img {
    top: -15%;
  }
  html[dir="rtl"] .section_three .container_whatWeDo .item:nth-child(4) img {
    top: -18%;
  }
  html[dir="rtl"] .section_three .container_whatWeDo .item:nth-child(6) img {
    top: -34%;
  }
  html[dir="rtl"] .section_three .container_whatWeDo .item:nth-child(5) img {
    top: -41%;
  }
  html[dir="rtl"] .section_three .container_whatWeDo .item:last-child img {
    top: -30%;
  }
  html[dir="rtl"] .section_three .container_whatWeDo .item:nth-child(7) img {
    top: -38%;
  }
  .whatwedo #services .container_whatWeDo .item:nth-child(1) img {
    top: -32%;
  }
  .whatwedo #services .container_whatWeDo .item:nth-child(2) img {
    top: -28%;
  }
  .whatwedo #services .container_whatWeDo .item:nth-child(3) img {
    top: -35%;
  }
  .whatwedo #services .container_whatWeDo .item:nth-child(4) img {
    top: -23.5%;
  }
  .whatwedo #products .container_whatWeDo .item:nth-child(1) img {
    top: -12%;
  }
  .whatwedo #products .container_whatWeDo .item:nth-child(2) img {
    top: -16.5%;
  }
  .whatwedo #products .container_whatWeDo .item:nth-child(3) img {
    top: -12%;
  }
  .whatwedo #products .container_whatWeDo .item:nth-child(4) img {
    top: -16%;
  }
  html[dir="rtl"]
    .whatwedo
    #products
    .container_whatWeDo
    .item:nth-child(1)
    img {
    top: -14%;
  }
  html[dir="rtl"]
    .whatwedo
    #products
    .container_whatWeDo
    .item:nth-child(2)
    img {
    top: -20.5%;
  }
  html[dir="rtl"]
    .whatwedo
    #products
    .container_whatWeDo
    .item:nth-child(3)
    img {
    top: -16%;
  }
  html[dir="rtl"]
    .whatwedo
    #services
    .container_whatWeDo
    .item:nth-child(1)
    img {
    top: -32.5%;
  }
  html[dir="rtl"]
    .whatwedo
    #services
    .container_whatWeDo
    .item:nth-child(2)
    img {
    top: -27%;
  }
  html[dir="rtl"]
    .whatwedo
    #services
    .container_whatWeDo
    .item:nth-child(3)
    img {
    top: -30%;
  }
  html[dir="rtl"]
    .whatwedo
    #services
    .container_whatWeDo
    .item:nth-child(4)
    img {
    top: -23.5%;
  }
  html[dir="rtl"]
    .whatwedo
    #products
    .container_whatWeDo
    .item:nth-child(4)
    img {
    top: -20%;
  }
  .tab-pane#mission .content-image {
    inset-inline-end: -38.7vw;
    max-width: 42.63vw;
  }
  .tab-pane#vision .content-box {
    inset-inline-end: -40vw;
    max-width: 43vw;
  }
  .tab-pane .content-image {
    max-width: 42.63vw;
  }
  .tab-pane .content-box {
    width: 42.43vw;
  }
  .section_three .container_whatWeDo .item:nth-child(3) img {
    top: -2.7vw;
  }
  html[dir="rtl"] .section_three .container_whatWeDo .item:nth-child(3) img {
    top: -2.8vw;
  }
  .banner_image .country-pin:nth-child(2) {
    top: 4.1%;
    inset-inline-end: 49.5%;
  }
  .banner_image .country-pin:nth-child(3) {
    top: -3%;
    inset-inline-end: 44.9%;
  }
  .banner_image .country-pin:nth-child(4) {
    top: 1%;
    inset-inline-end: 40.8%;
  }
  .banner_image .country-pin:nth-child(5) {
    top: 40%;
    inset-inline-end: 40.8%;
  }
  .banner_image .country-pin:nth-child(5) {
    top: 27%;
    inset-inline-end: 39%;
    z-index: 2;
  }
  .banner_image .country-pin:nth-child(6) {
    top: 17%;
    inset-inline-end: 37.7%;
  }
  .banner_image .country-pin:nth-child(7) {
    top: 29%;
    inset-inline-end: 35.5%;
    z-index: 2;
  }
  .banner_image .country-pin:nth-child(8) {
    top: 23%;
    inset-inline-end: 33.5%;
  }
  .banner_image .country-pin:nth-child(9) {
    top: 27%;
    inset-inline-end: 32.2%;
  }
  html[dir="rtl"].section_three .container_whatWeDo .item:nth-child(1) img {
    top: -14%;
  }
  html[dir="rtl"].section_three .container_whatWeDo .item:nth-child(2) img {
    top: -17%;
  }
  html[dir="ltr"] .section_three .container_whatWeDo .item:nth-child(2) img {
    top: -18%;
  }
  html[dir="rtl"]
    .whatwedo
    #services
    .container_whatWeDo
    .item:nth-child(1)
    img {
    top: -39.5%;
  }
  html[dir="rtl"]
    .whatwedo
    #services
    .container_whatWeDo
    .item:nth-child(2)
    img {
    top: -32%;
  }
  html[dir="rtl"]
    .whatwedo
    #services
    .container_whatWeDo
    .item:nth-child(3)
    img {
    top: -39%;
  }
  html[dir="rtl"]
    .whatwedo
    #services
    .container_whatWeDo
    .item:nth-child(4)
    img {
    top: -32.5%;
  }
}
@media (min-width: 1550px) {
  .section_three .container_whatWeDo .item:nth-child(7) img {
    top: -45%;
  }
  .section_three .container_whatWeDo .item:last-child img {
    top: -36%;
  }
  .section_three .container_whatWeDo .item:nth-child(4) img {
    top: -16%;
  }
  .section_three .container_whatWeDo .item:nth-child(6) img {
    top: -33%;
  }
  html[dir="rtl"] .section_three .container_whatWeDo .item:nth-child(5) img {
    top: -43%;
  }
  html[dir="rtl"] .section_three .container_whatWeDo .item:nth-child(6) img {
    top: -36%;
  }
  html[dir="rtl"] .section_three .container_whatWeDo .item:nth-child(4) img {
    top: -21%;
  }
  html[dir="rtl"] .section_three .container_whatWeDo .item:last-child img {
    top: -40%;
  }
  html[dir="rtl"] .section_three .container_whatWeDo .item:nth-child(7) img {
    top: -50%;
  }
  .whatwedo #services .container_whatWeDo .item:nth-child(1) img {
    top: -31%;
  }
  .whatwedo #services .container_whatWeDo .item:nth-child(2) img {
    top: -26%;
  }
  .whatwedo #services .container_whatWeDo .item:nth-child(3) img {
    top: -37%;
  }
  .whatwedo #services .container_whatWeDo .item:nth-child(4) img {
    top: -29.5%;
  }
  .whatwedo #products .container_whatWeDo .item:nth-child(1) img {
    top: -11.5%;
  }
  .whatwedo #products .container_whatWeDo .item:nth-child(2) img {
    top: -19.5%;
  }
  .whatwedo #products .container_whatWeDo .item:nth-child(3) img {
    top: -11.5%;
  }
  .whatwedo #products .container_whatWeDo .item:nth-child(4) img {
    top: -16%;
  }
  html[dir="rtl"]
    .whatwedo
    #services
    .container_whatWeDo
    .item:nth-child(1)
    img {
    top: -39.5%;
  }
  html[dir="rtl"]
    .whatwedo
    #services
    .container_whatWeDo
    .item:nth-child(2)
    img {
    top: -33.5%;
  }
  html[dir="rtl"]
    .whatwedo
    #services
    .container_whatWeDo
    .item:nth-child(3)
    img {
    top: -43%;
  }
  html[dir="rtl"]
    .whatwedo
    #services
    .container_whatWeDo
    .item:nth-child(4)
    img {
    top: -35.5%;
  }
  html[dir="rtl"]
    .whatwedo
    #products
    .container_whatWeDo
    .item:nth-child(1)
    img {
    top: -12.5%;
  }
  html[dir="rtl"]
    .whatwedo
    #products
    .container_whatWeDo
    .item:nth-child(2)
    img {
    top: -24.5%;
  }
  html[dir="rtl"]
    .whatwedo
    #products
    .container_whatWeDo
    .item:nth-child(3)
    img {
    top: -18.5%;
  }
  html[dir="rtl"]
    .whatwedo
    #products
    .container_whatWeDo
    .item:nth-child(4)
    img {
    top: -20%;
  }
  .tab-pane#mission .content-image {
    inset-inline-end: -39.5vw;
    max-width: 43.5vw;
  }
  .tab-pane .content-box {
    width: 43.5vw;
  }
  .tab-pane#vision .content-box {
    inset-inline-end: -39.5vw;
    width: 43.5vw;
  }
  .tab-pane#vision .content-box {
    inset-inline-end: -40.3vw;
    width: 44vw;
  }
  .tab-pane .content-image {
    max-width: 44vw;
  }
  .section_three .container_whatWeDo .item:nth-child(3) img {
    top: -3.9vw;
  }
  html[dir="rtl"] .section_three .container_whatWeDo .item:nth-child(3) img {
    top: -3.7vw;
  }
  .whatwedo-container .banner_image {
    zoom: 1.1;
  }
  html[dir="rtl"] .section_three .container_whatWeDo .item:nth-child(2) img {
    top: -23%;
  }
  html[dir="rtl"] .section_three .container_whatWeDo .item:nth-child(1) img {
    top: -17%;
  }
}
@media (min-width: 1700px) {
  .section_three .container_whatWeDo .item:nth-child(7) img {
    top: -64%;
  }
  .section_three .container_whatWeDo .item:last-child img {
    top: -45%;
  }
  .section_three .container_whatWeDo .item:nth-child(4) img {
    top: -21%;
  }
  html[dir="rtl"] .section_three .container_whatWeDo .item:last-child img {
    top: -52%;
  }
  html[dir="rtl"] .section_three .container_whatWeDo .item:nth-child(7) img {
    top: -62%;
  }
  .whatwedo #services .container_whatWeDo .item:nth-child(1) img {
    top: -34.5%;
  }
  .whatwedo #services .container_whatWeDo .item:nth-child(2) img {
    top: -30%;
  }
  .whatwedo #services .container_whatWeDo .item:nth-child(3) img {
    top: -46%;
  }
  .whatwedo #services .container_whatWeDo .item:nth-child(4) img {
    top: -41.5%;
  }
  .whatwedo #products .container_whatWeDo .item:nth-child(1) img {
    top: -12.5%;
  }
  .whatwedo #products .container_whatWeDo .item:nth-child(2) img {
    top: -23.5%;
  }
  .whatwedo #products .container_whatWeDo .item:nth-child(3) img {
    top: -13%;
  }
  .whatwedo #products .container_whatWeDo .item:nth-child(4) img {
    top: -17%;
  }
  html[dir="rtl"]
    .whatwedo
    #services
    .container_whatWeDo
    .item:nth-child(1)
    img {
    top: -42.5%;
  }
  html[dir="rtl"]
    .whatwedo
    #services
    .container_whatWeDo
    .item:nth-child(2)
    img {
    top: -36%;
  }
  html[dir="rtl"]
    .whatwedo
    #services
    .container_whatWeDo
    .item:nth-child(3)
    img {
    top: -62%;
  }
  html[dir="rtl"]
    .whatwedo
    #services
    .container_whatWeDo
    .item:nth-child(4)
    img {
    top: -50.5%;
  }
  html[dir="rtl"]
    .whatwedo
    #products
    .container_whatWeDo
    .item:nth-child(1)
    img {
    top: -14.5%;
  }
  html[dir="rtl"]
    .whatwedo
    #products
    .container_whatWeDo
    .item:nth-child(2)
    img {
    top: -28.5%;
  }
  html[dir="rtl"]
    .whatwedo
    #products
    .container_whatWeDo
    .item:nth-child(3)
    img {
    top: -19%;
  }
  html[dir="rtl"]
    .whatwedo
    #products
    .container_whatWeDo
    .item:nth-child(4)
    img {
    top: -21.5%;
  }
  .tab-pane#mission .content-image {
    inset-inline-end: -40.3vw;
    max-width: 44.5vw;
  }
  .tab-pane .content-box {
    width: 44.5vw;
  }
  .tab-pane#vision .content-box {
    inset-inline-end: -40.3vw;
    width: 45vw;
    max-width: unset;
  }
  .tab-pane .content-image {
    max-width: 45vw;
  }
  .section_three .container_whatWeDo .item:nth-child(3) img {
    top: -4.6vw;
  }
  html[dir="rtl"] .section_three .container_whatWeDo .item:nth-child(3) img {
    top: -4.7vw;
  }
  .whatwedo-container .banner_image {
    zoom: 1.4;
  }
}

@media (max-width: 1200px) {
  .banner_section {
    gap: 25px;
  }
  .banner_description h1 {
    font-size: 45px;
  }
  #lottie-hero {
    bottom: 0 !important;
  }
}
@media (min-width: 1200px) and (max-width: 1400px) {
  .stats-container {
    zoom: 0.78;
  }
  .progress-ring {
    display: flex;
    justify-content: center;
  }
  .progress-ring img {
    width: 90%;
  }
  .progress-ring svg {
    height: 600px;
  }
  .step_content p {
    font-size: 15px;
    line-height: 1.45;
  }
  .step.step1 {
    top: 10px;
  }
}
@media (min-width: 991px) and (max-width: 1199px) {
  .tab-pane .content-box {
    max-width: 500px;
  }
  .progress-ring {
    display: flex;
    justify-content: center;
  }
  .progress-ring img {
    width: 90%;
  }
  .stats-container {
    zoom: 0.7;
  }
  .px-83 {
    padding-left: 0px !important;
    padding-right: 0px !important;
  }
}
@media (min-width: 992px) {
  #vision,
  #mission {
    height: 380px;
  }
}
@media (max-width: 991px) {
  .contact-image {
    display: none;
  }
  .stats-container {
    zoom: 0.75;
  }
  .ph-0 {
    padding-inline-start: 0 !important;
    padding-inline-end: 0 !important;
  }
  .details_container {
    width: 100%;
  }
  .px-83 {
    padding-left: 0px !important;
    padding-right: 0px !important;
  }
  .navbar .navbar-collapse {
    background: #f3f3f3;
    position: relative;
    border-radius: 12px;
    padding: 15px 20px;
    position: absolute;
    width: calc(100% - 40px);
    inset-inline-start: 0;
    margin-inline: 20px;
    top: 80px;
    box-shadow: rgb(17 12 46 / 17%) 0px 48px 100px 0px !important;
    margin-top: 20px;
    z-index: 10;
  }
  .navbar-nav .nav-link {
    width: fit-content;
  }
  .section_two {
    flex-direction: column;
    padding-block: 0;
    padding-inline: 73px;
  }
  .happening_grid {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    gap: 20px;
  }
  .happening_grid {
    margin: 35px 0;
  }
  .section_four .section_title {
    margin-top: 50px;
  }
  .banner_section {
    position: relative;
    z-index: -1;
  }
  .tab-pane#vision .content-box,
  .tab-pane#vision .content-image,
  .tab-pane .content-image,
  .tab-pane#mission .content-image,
  .tab-pane#mission .content-box {
    position: unset;
  }
  .whatwedo .container_whatWeDo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 2fr;
    gap: 130px 40px;
  }
  .webportals-services .service-content ul li,
  .webportals-services .service-content p,
  .webportals-content p {
    font-size: 14px;
    line-height: normal !important;
  }
  .webportals-services .service-content {
    padding-block-end: 50px;
  }
  .webportals-services .service-content {
    top: 50px;
  }
  .webportals button {
    zoom: 0.8;
  }
}
@media (max-width: 767px) {
  .description-header {
    font-size: 24px !important;
  }
  .section_five_description span {
    font-size: 30px;
    padding: 0 10px;
  }
  .section_three .container_whatWeDo {
    margin-bottom: 130px;
  }
  .contact-us .lighting_bg:nth-child(3),
  .contact-us .lighting_bg:nth-child(1),
  .contact-us .lighting_bg:nth-child(2),
  .contact-us .section-shape {
    display: none;
  }
  .contact-content-wrapper {
    padding: 25px;
  }
  .form-group {
    width: 100%;
  }
  .contact-content {
    display: block;
  }
  .contact-us .tab-pane {
    margin-top: 35px;
  }
  /* .section_three div:nth-child(2) button {
    position: unset;
  } */
  .banner_description,
  nav,
  .section_two,
  .section_three,
  .section_four,
  .section_five_description,
  .socials,
  footer .all-rights,
  #about-page,
  #what-we-do-page,
  .whatwedo .tab-content,
  .portfolio,
  .contact-us,
  .webportals {
    padding-inline-start: 20px !important;
    padding-inline-end: 20px !important;
  }

  .banner_description h1 {
    font-size: 38px;
  }
  button {
    font-size: 16px !important;
  }
  .section_two {
    margin-top: 100px;
  }

  .details h2 {
    font-size: 24px;
  }
  .description {
    margin-top: 30px;
  }
  .description span {
    font-size: 16px;
  }
  .qbs_logo {
    width: 165px;
  }

  .container_whatWeDo {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: none;
    gap: 20px;
    position: relative;
    margin-top: 40px;
  }
  .item {
    position: relative !important;
  }
  .item:nth-child(1),
  .item:nth-child(2),
  .item:nth-child(3),
  .item:nth-child(4),
  .item:nth-child(5),
  .item:nth-child(6),
  .item:nth-child(7),
  .item:nth-child(8) {
    margin-top: 120px;
    position: static;
    top: auto;
    grid-area: auto / auto / auto / auto;
    width: 100%;
  }
  span.happening_content_title,
  .section_five_description h2,
  .services span.happening_content_title {
    font-size: 27px;
  }

  .section_five_description p {
    font-size: 16px;
  }
  .socials {
    flex-direction: column;
    gap: 30px;
  }
  .socials > div:first-child {
    justify-content: space-between;
    flex: 1;
    width: 100%;
    gap: 0 !important;
  }
  .social_icon {
    width: 40px;
    height: 40px;
  }
  .section_btn .btn.btn-warning {
    width: 100%;
  }
  .section_three span.content_title {
    padding: 0 10px;
    font-size: 38px;
  }
  footer .all-rights p {
    font-size: 12px;
  }
  footer .col span {
    font-size: 16px;
  }
  .footer-content {
    padding: 40px 20px;
  }

  .tabs-wrapper {
    overflow: auto;
  }
  #about-page .happening_content_title::after {
    inset-inline-end: 20px;
  }
  #about-page .lighting_bg,
  #about-page .section-shape {
    display: none;
  }
  .happening_content_title::before {
    inset-inline-start: 20px;
  }
  .tab-content .content p {
    font-size: 14px;
  }
  .tab-content .content p span {
    font-size: 18px;
  }
  .tab-content #story {
    padding-bottom: 0;
  }
  .tabs-wrapper {
    gap: 12px;
  }
  .tabs-wrapper .tab-btn {
    padding: 10px 16px !important;
    font-size: 14px !important;
  }
  .tab-content {
    padding: 0 0 70px 0;
  }
  .tab-pane .content-box p {
    font-size: 14px;
    margin-bottom: 0;
  }
  .tab-pane .content-box {
    border-radius: 18px;
    padding: 20px 20px;
  }
  .row {
    --bs-gutter-x: 0 !important;
  }
  .whatwedo-container {
    flex-direction: column;
    padding-inline-end: 20px;
    padding-inline-start: 20px;
  }
  .whatwedo-content p {
    font-size: 16px;
    text-align: center;
  }

  .whatwedo .section_title {
    margin-inline-start: 0;
  }

  .whatwedo-content {
    max-width: unset;
  }
  .whatwedo-content p {
    margin-bottom: 40px;
  }
  .whatwedo .container_whatWeDo {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: none;
    gap: 20px 40px;
  }
  .whatwedo .container_whatWeDo {
    margin-top: 20px;
  }
  .stats-container {
    zoom: 0.6;
  }
  .about-page-container,
  .whatwedo-tabs-container .tab-content > div:first-child {
    padding: 25px;
    border-radius: 16px;
  }

  .about-page-container h2 {
    font-size: 18px;
  }
  .contact-content form h2 {
    font-size: 22px;
  }
  .contact-content form p {
    font-size: 16px;
  }
  .contact-content button.btn-warning {
    padding: 14px 30px !important;
    font-size: 14px !important;
    width: 100%;
  }
  .tab-pane .content-image,
  .tab-pane .content-box,
  .tab-pane#vision .content-box {
    max-width: 100%;
    width: 100%;
  }
  .webportals-container {
    flex-direction: column;
  }
  .webportals-content {
    width: unset;
  }
  .webportals-image {
    width: unset;
  }
  .webportals-image img:nth-child(2) {
    height: unset;
  }
  html[dir="rtl"] .webportals-image img:first-child {
    inset-inline-end: unset;
    inset-inline-start: 12vw;
  }
  .webportals-services {
    flex-direction: column-reverse;
  }
  /* .webportals .webportals-services:nth-child(2) {
    margin-top: 250px;
  } */
  .webportals-services .service-item {
    width: 100%;
  }
  .webportals-services .service-item img:nth-child(2) {
    height: unset;
    max-width: 88%;
    position: absolute;
    top: 0;
    inset-inline-start: 10px;
    top: 10px;
  }
  .webportals .webportals-services:nth-child(3) {
    margin-top: 70px;
  }
  .webportals-services .service-content {
    width: 100% !important;
  }
  .webportals .webportals-services:nth-child(3) {
    gap: 0;
  }
  .webportals button {
    margin: 50px 0;
  }
  .service-content {
    padding: 30px !important;
  }
  .webportals .webportals-services:nth-child(3) .service-item img:nth-child(2) {
    max-width: 100%;
    height: unset;
  }
  .webportals .happening_content_title::before {
    inset-inline-start: 0;
  }
  .error-container {
    width: 100% !important;
  }
  .section_three .section_btn {
    bottom: -100px;
    width: max-content;
  }
  .item img {
    max-width: 350px;
    top: -60px;
  }
  .section_three .container_whatWeDo .item:nth-child(3) img {
    top: -55px;
  }
  .section_three .container_whatWeDo .item:nth-child(5) img,
  .whatwedo #services .container_whatWeDo .item:nth-child(1) img {
    top: -110px;
  }
  .section_three .container_whatWeDo .item:nth-child(6) img,
  .whatwedo #services .container_whatWeDo .item:nth-child(2) img {
    top: -95px;
  }
  .section_three .container_whatWeDo .item:nth-child(7) img,
  .whatwedo #services .container_whatWeDo .item:nth-child(3) img {
    top: -120px;
  }
  .section_three .container_whatWeDo .item:nth-child(8) img,
  .whatwedo #services .container_whatWeDo .item:nth-child(4) img {
    top: -100px;
  }
  .whatwedo #products .container_whatWeDo .item:nth-child(2) img {
    top: -90px;
  }
  .section_three .container_whatWeDo .item:nth-child(1) img {
    top: -11%;
  }
  .section_three .container_whatWeDo .item:nth-child(2) img {
    top: -16%;
  }
  .section_three .container_whatWeDo .item:nth-child(3) img {
    top: -53px;
  }
  html[dir="rtl"] .section_three .container_whatWeDo .item:nth-child(3) img {
    top: -55px;
  }
  .section_three .container_whatWeDo .item:nth-child(4) img {
    top: -14%;
  }
  .section_three .container_whatWeDo .item:nth-child(5) img {
    top: -95px;
  }
  .section_three .container_whatWeDo .item:nth-child(6) img {
    top: -82px;
  }
  .section_three .container_whatWeDo .item:nth-child(7) img {
    top: -105px;
  }
  .section_three .container_whatWeDo .item:nth-child(8) img {
    top: -83px;
  }
  html[dir="rtl"] .section_three .container_whatWeDo .item:nth-child(1) img {
    top: -16%;
  }
  html[dir="rtl"] .section_three .container_whatWeDo .item:nth-child(2) img {
    top: -20%;
  }
  html[dir="rtl"] .section_three .container_whatWeDo .item:nth-child(4) img {
    top: -19%;
  }
  html[dir="rtl"] .section_three .container_whatWeDo .item:nth-child(7) img {
    top: -102px;
  }
  .whatwedo #services .container_whatWeDo .item:nth-child(1) img {
    top: -95px;
  }
  .whatwedo #services .container_whatWeDo .item:nth-child(2) img {
    top: -80px;
  }
  .whatwedo #services .container_whatWeDo .item:nth-child(3) img {
    top: -105px;
  }
  .whatwedo #services .container_whatWeDo .item:nth-child(4) img {
    top: -83px;
  }
  .whatwedo #products .container_whatWeDo .item:nth-child(1) img {
    top: -13%;
  }
  .whatwedo #products .container_whatWeDo .item:nth-child(2) img {
    top: -53px;
  }
  html[dir="rtl"]
    .whatwedo
    #products
    .container_whatWeDo
    .item:nth-child(2)
    img {
    top: -59px;
  }
  .whatwedo #products .container_whatWeDo .item:nth-child(3) img {
    top: -35px;
  }
  .whatwedo #products .container_whatWeDo .item:nth-child(4) img {
    top: -48px;
  }
  .about-page-container .tab-pane {
    margin-top: 20px;
  }
  .country-pin img {
    width: 13px;
  }
  .banner_image .country-pin:nth-child(2) div {
    bottom: -22px;
    inset-inline-start: -85px;
    width: fit-content;
  }
  .banner_image .country-pin:nth-child(3) div {
    bottom: 13px;
    width: fit-content;
    left: -81px;
  }
  .banner_image .country-pin:nth-child(4) div {
    bottom: 18px;
    inset-inline-start: 16px;
    width: fit-content;
  }
  .banner_image .country-pin:nth-child(6) div {
    bottom: 15px;
    inset-inline-start: 17px;
    width: fit-content;
  }
  .banner_image .country-pin:nth-child(8) div {
    bottom: 14px;
    inset-inline-start: 22px;
  }
  .country-pin div p {
    font-size: 8px;
  }
  .banner_image .country-pin:nth-child(9) div {
    bottom: -25px;
    inset-inline-start: 15px;
  }
  .banner_image .country-pin:nth-child(7) div {
    bottom: -23px;
    inset-inline-start: 5px;
    width: max-content;
  }
  .banner_image .country-pin:nth-child(5) div {
    bottom: -18px;
    inset-inline-start: -50px;
    width: fit-content;
  }
  html[dir="rtl"] .banner_image .country-pin:nth-child(2) div {
    bottom: -17px;
    inset-inline-start: -72px;
  }
  html[dir="rtl"] .banner_image .country-pin:nth-child(3) div {
    inset-inline-start: -48px;
  }
}

@media (max-width: 576px) {
  .container_slider {
    width: unset;
  }
  .stats-container {
    zoom: unset;
  }
  .stat-label {
    font-size: 12px;
  }
  .stat-number {
    font-size: 25px;
    height: unset;
  }
  .stat-item {
    width: 90px;
    height: 90px;
  }
  .stats-container {
    width: 280px;
    height: 280px;
  }
  .stat-item:nth-child(1) {
    top: 0%;
    inset-inline-start: 35%;
  }
  .stat-item:nth-child(2) {
    top: 19%;
    inset-inline-end: 6%;
  }
  .stat-item:nth-child(3) {
    top: 51%;
    inset-inline-end: 5%;
  }
  .stat-item:nth-child(4) {
    top: 67%;
    bottom: 0;
    inset-inline-start: 36%;
  }
  .stat-item:nth-child(5) {
    top: 50%;
    inset-inline-start: 8%;
  }
  .stat-item:nth-child(6) {
    top: 19%;
    inset-inline-start: 9%;
  }
  .banner_description {
    width: 100%;
    padding-top: 50px !important;
    top: 350px;
    justify-content: start;
    height: fit-content;
  }
  html[dir="ltr"] .banner_description h1 {
    font-size: 33px;
  }
}

/* ============================================================
   CONTACT FORM - Validation & Popup Styles
   ============================================================ */

/* Form Field Validation Error Styles */
.form-control.is-invalid {
  border: 1px solid #dc3545 !important;

  animation: shake 0.4s ease-in-out;
}

/* Error container with spacer */
.error-container {
  display: flex;
  align-items: flex-start;
  width: 85%;
  height: 12px;
  position: relative;
  bottom: 10px;
}

.error-spacer {
  width: 30%;
  flex-shrink: 0;
}

/* Error message */
.field-error {
  color: #dc3545;
  font-size: 12px;
  margin-top: 5px;
  animation: fadeIn 0.3s ease-in-out;
}

html[dir="rtl"] .field-error {
  text-align: right;
}

@keyframes shake {
  0%,
  100% {
    transform: translateX(0);
  }
  20%,
  60% {
    transform: translateX(-5px);
  }
  40%,
  80% {
    transform: translateX(5px);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Popup Overlay */
.form-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.form-popup.active {
  opacity: 1;
  visibility: visible;
}

/* Popup Content Box */
.popup-content {
  background: rgba(255, 255, 255, 0.95);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border-radius: 24px;
  padding: 40px 50px;
  text-align: center;
  max-width: 400px;
  width: 90%;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
  transform: scale(0.7) translateY(30px);
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.form-popup.active .popup-content {
  transform: scale(1) translateY(0);
}

/* Success State */
.popup-content.success .popup-icon {
  background: linear-gradient(135deg, #2dae92 0%, #1a8a6e 100%);
}

.popup-content.success .popup-title {
  color: #2dae92;
}

/* Error State */
.popup-content.error .popup-icon {
  background: linear-gradient(135deg, #dc3545 0%, #b02a37 100%);
}

.popup-content.error .popup-title {
  color: #dc3545;
}

/* Popup Icon */
.popup-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.popup-icon svg {
  width: 40px;
  height: 40px;
}

/* Checkmark Animation */
.checkmark-circle {
  stroke: rgba(255, 255, 255, 0.3);
  stroke-width: 2;
}

.checkmark-check {
  stroke: white;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 50;
  stroke-dashoffset: 50;
  animation: checkmarkDraw 0.5s ease-out 0.3s forwards;
}

@keyframes checkmarkDraw {
  to {
    stroke-dashoffset: 0;
  }
}

/* Error X Animation */
.error-circle {
  stroke: rgba(255, 255, 255, 0.3);
  stroke-width: 2;
}

.error-x {
  stroke: white;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
  animation: errorDraw 0.4s ease-out 0.3s forwards;
}

@keyframes errorDraw {
  to {
    stroke-dashoffset: 0;
  }
}

/* Popup Text */
.popup-title {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 10px;
}

.popup-message {
  color: #666;
  font-size: 16px;
  margin-bottom: 25px;
  line-height: 1.5;
}

/* Popup Close Button */
.popup-close {
  min-width: 150px;
  padding: 12px 30px !important;
  font-size: 16px !important;
}

/* RTL Support */
html[dir="rtl"] .field-error {
  text-align: right;
}
html[dir="rtl"] textarea.form-control.is-invalid {
  background-position: top calc(0.375em + 0.1875rem) left
    calc(0.375em + 0.1875rem);
}
html[dir="rtl"] .form-control.is-invalid,
html[dir="rtl"] .was-validated .form-control:invalid {
  background-position: left calc(0.375em + 0.1875rem) center;
}

/* end form validation */