.btn-light-body-bg,
.bg-light-body-bg {
  background-color: #333357 !important;
}

.btn-outline-body-bg {
  color: #00002D;
  border-color: #00002D;
}
.btn-outline-body-bg:hover {
  background-color: transparent;
  border-color: black;
  color: #00002D;
}
.btn-outline-body-bg:disabled, .btn-outline-body-bg.disabled {
  color: black;
  border-color: black;
}
.btn-outline-body-bg:not(:disabled):not(.disabled):active {
  background-color: transparent;
  border-color: black;
  color: #00002D;
}

.btn-body-bg,
.bg-body-bg {
  background-color: #00002D !important;
  border-color: #00002D !important;
}

.btn-gradient-body-bg,
.bg-gradient-body-bg {
  background-image: linear-gradient(to right, #000023, #0d0d38) !important;
}

.border-light-body-bg {
  border-color: #333357 !important;
}

.border-body-bg {
  border-color: #00002D !important;
}

.text-light-body-bg {
  color: #333357 !important;
}

.text-body-bg {
  color: #00002D !important;
}

.btn-light-body-bg:hover, .btn-light-body-bg:active, .btn-light-body-bg:focus {
  background-color: #00002D !important;
  color: #333357 !important;
}

.btn-body-bg:hover, .btn-body-bg:active, .btn-body-bg:focus {
  background-color: #000004 !important;
  border-color: black !important;
}

.btn-light-primary,
.bg-light-primary {
  background-color: #5a5aff !important;
}

.btn-outline-primary {
  color: #3131FF;
  border-color: #3131FF;
}
.btn-outline-primary:hover {
  background-color: transparent;
  border-color: #0000fd;
  color: #3131FF;
}
.btn-outline-primary:disabled, .btn-outline-primary.disabled {
  color: #0000e4;
  border-color: #0000e4;
}
.btn-outline-primary:not(:disabled):not(.disabled):active {
  background-color: transparent;
  border-color: #0000fd;
  color: #3131FF;
}

.btn-primary,
.bg-primary {
  background-color: #3131FF !important;
  border-color: #3131FF !important;
}

.btn-gradient-primary,
.bg-gradient-primary {
  background-image: linear-gradient(to right, #2626c7, #3b3bff) !important;
}

.border-light-primary {
  border-color: #5a5aff !important;
}

.border-primary {
  border-color: #3131FF !important;
}

.text-light-primary {
  color: #5a5aff !important;
}

.text-primary {
  color: #3131FF !important;
}

.btn-light-primary:hover, .btn-light-primary:active, .btn-light-primary:focus {
  background-color: #3131FF !important;
  color: #5a5aff !important;
}

.btn-primary:hover, .btn-primary:active, .btn-primary:focus {
  background-color: #0808ff !important;
  border-color: #0000e9 !important;
}

.btn-light-primary-color,
.bg-light-primary-color {
  background-color: #6565dd !important;
}

.btn-outline-primary-color {
  color: #3F3FD5;
  border-color: #3F3FD5;
}
.btn-outline-primary-color:hover {
  background-color: transparent;
  border-color: #2828b9;
  color: #3F3FD5;
}
.btn-outline-primary-color:disabled, .btn-outline-primary-color.disabled {
  color: #2424a4;
  border-color: #2424a4;
}
.btn-outline-primary-color:not(:disabled):not(.disabled):active {
  background-color: transparent;
  border-color: #2828b9;
  color: #3F3FD5;
}

.btn-primary-color,
.bg-primary-color {
  background-color: #3F3FD5 !important;
  border-color: #3F3FD5 !important;
}

.btn-gradient-primary-color,
.bg-gradient-primary-color {
  background-image: linear-gradient(to right, #3131a6, #4949d7) !important;
}

.border-light-primary-color {
  border-color: #6565dd !important;
}

.border-primary-color {
  border-color: #3F3FD5 !important;
}

.text-light-primary-color {
  color: #6565dd !important;
}

.text-primary-color {
  color: #3F3FD5 !important;
}

.btn-light-primary-color:hover, .btn-light-primary-color:active, .btn-light-primary-color:focus {
  background-color: #3F3FD5 !important;
  color: #6565dd !important;
}

.btn-primary-color:hover, .btn-primary-color:active, .btn-primary-color:focus {
  background-color: #2a2ac1 !important;
  border-color: #2525a8 !important;
}

.btn-light-primary-bg-section,
.bg-light-primary-bg-section {
  background-color: #343463 !important;
}

.btn-outline-primary-bg-section {
  color: #01013C;
  border-color: #01013C;
}
.btn-outline-primary-bg-section:hover {
  background-color: transparent;
  border-color: #00000a;
  color: #01013C;
}
.btn-outline-primary-bg-section:disabled, .btn-outline-primary-bg-section.disabled {
  color: black;
  border-color: black;
}
.btn-outline-primary-bg-section:not(:disabled):not(.disabled):active {
  background-color: transparent;
  border-color: #00000a;
  color: #01013C;
}

.btn-primary-bg-section,
.bg-primary-bg-section {
  background-color: #01013C !important;
  border-color: #01013C !important;
}

.btn-gradient-primary-bg-section,
.bg-gradient-primary-bg-section {
  background-image: linear-gradient(to right, #01012f, #0e0e46) !important;
}

.border-light-primary-bg-section {
  border-color: #343463 !important;
}

.border-primary-bg-section {
  border-color: #01013C !important;
}

.text-light-primary-bg-section {
  color: #343463 !important;
}

.text-primary-bg-section {
  color: #01013C !important;
}

.btn-light-primary-bg-section:hover, .btn-light-primary-bg-section:active, .btn-light-primary-bg-section:focus {
  background-color: #01013C !important;
  color: #343463 !important;
}

.btn-primary-bg-section:hover, .btn-primary-bg-section:active, .btn-primary-bg-section:focus {
  background-color: #000014 !important;
  border-color: black !important;
}

.btn-light-secondary,
.bg-light-secondary {
  background-color: #34f7f8 !important;
}

.btn-outline-secondary {
  color: #01F5F6;
  border-color: #01F5F6;
}
.btn-outline-secondary:hover {
  background-color: transparent;
  border-color: #01c2c3;
  color: #01F5F6;
}
.btn-outline-secondary:disabled, .btn-outline-secondary.disabled {
  color: #01a9aa;
  border-color: #01a9aa;
}
.btn-outline-secondary:not(:disabled):not(.disabled):active {
  background-color: transparent;
  border-color: #01c2c3;
  color: #01F5F6;
}

.btn-secondary,
.bg-secondary {
  background-color: #01F5F6 !important;
  border-color: #01F5F6 !important;
}

.btn-gradient-secondary,
.bg-gradient-secondary {
  background-image: linear-gradient(to right, #01bfc0, #0ef6f6) !important;
}

.border-light-secondary {
  border-color: #34f7f8 !important;
}

.border-secondary {
  border-color: #01F5F6 !important;
}

.text-light-secondary {
  color: #34f7f8 !important;
}

.text-secondary {
  color: #01F5F6 !important;
}

.btn-light-secondary:hover, .btn-light-secondary:active, .btn-light-secondary:focus {
  background-color: #01F5F6 !important;
  color: #34f7f8 !important;
}

.btn-secondary:hover, .btn-secondary:active, .btn-secondary:focus {
  background-color: #01cdcd !important;
  border-color: #01aeaf !important;
}

.btn-light-dark,
.bg-light-dark {
  background-color: #333333 !important;
}

.btn-outline-dark {
  color: #000000;
  border-color: #000000;
}
.btn-outline-dark:hover {
  background-color: transparent;
  border-color: black;
  color: #000000;
}
.btn-outline-dark:disabled, .btn-outline-dark.disabled {
  color: black;
  border-color: black;
}
.btn-outline-dark:not(:disabled):not(.disabled):active {
  background-color: transparent;
  border-color: black;
  color: #000000;
}

.btn-dark,
.bg-dark {
  background-color: #000000 !important;
  border-color: #000000 !important;
}

.btn-gradient-dark,
.bg-gradient-dark {
  background-image: linear-gradient(to right, black, #0d0d0d) !important;
}

.border-light-dark {
  border-color: #333333 !important;
}

.border-dark {
  border-color: #000000 !important;
}

.text-light-dark {
  color: #333333 !important;
}

.text-dark {
  color: #000000 !important;
}

.btn-light-dark:hover, .btn-light-dark:active, .btn-light-dark:focus {
  background-color: #000000 !important;
  color: #333333 !important;
}

.btn-dark:hover, .btn-dark:active, .btn-dark:focus {
  background-color: black !important;
  border-color: black !important;
}

.btn-light-text-color,
.bg-light-text-color {
  background-color: #c3c3c3 !important;
}

.btn-outline-text-color {
  color: #B4B4B4;
  border-color: #B4B4B4;
}
.btn-outline-text-color:hover {
  background-color: transparent;
  border-color: #9b9b9b;
  color: #B4B4B4;
}
.btn-outline-text-color:disabled, .btn-outline-text-color.disabled {
  color: #8e8e8e;
  border-color: #8e8e8e;
}
.btn-outline-text-color:not(:disabled):not(.disabled):active {
  background-color: transparent;
  border-color: #9b9b9b;
  color: #B4B4B4;
}

.btn-text-color,
.bg-text-color {
  background-color: #B4B4B4 !important;
  border-color: #B4B4B4 !important;
}

.btn-gradient-text-color,
.bg-gradient-text-color {
  background-image: linear-gradient(to right, #8c8c8c, #b8b8b8) !important;
}

.border-light-text-color {
  border-color: #c3c3c3 !important;
}

.border-text-color {
  border-color: #B4B4B4 !important;
}

.text-light-text-color {
  color: #c3c3c3 !important;
}

.text-text-color {
  color: #B4B4B4 !important;
}

.btn-light-text-color:hover, .btn-light-text-color:active, .btn-light-text-color:focus {
  background-color: #B4B4B4 !important;
  color: #c3c3c3 !important;
}

.btn-text-color:hover, .btn-text-color:active, .btn-text-color:focus {
  background-color: #a0a0a0 !important;
  border-color: #909090 !important;
}

/*---------*/
@font-face {
  font-family: "Tajawal-Regular";
  font-style: normal;
  font-weight: normal;
  src: url("../fonts/Tajawal-Regular.woff2") format("woff2"), url("../fonts/Tajawal-Regular.woff") format("woff"), url("../fonts/Tajawal-Regular.ttf") format("truetype"), url("../fonts/Tajawal-Regular.eot") format("eot"), url("../fonts/Tajawal-Regular.otf") format("otf");
  font-display: swap;
}
/*---------*/
@font-face {
  font-family: "Tajawal-Medium";
  font-style: normal;
  font-weight: normal;
  src: url("../fonts/Tajawal-Medium.woff2") format("woff2"), url("../fonts/Tajawal-Medium.woff") format("woff"), url("../fonts/Tajawal-Medium.ttf") format("truetype"), url("../fonts/Tajawal-Medium.eot") format("eot"), url("../fonts/Tajawal-Medium.otf") format("otf");
  font-display: swap;
}
/*---------*/
@font-face {
  font-family: "Tajawal-Bold";
  font-style: normal;
  font-weight: normal;
  src: url("../fonts/Tajawal-Bold.woff2") format("woff2"), url("../fonts/Tajawal-Bold.woff") format("woff"), url("../fonts/Tajawal-Bold.ttf") format("truetype"), url("../fonts/Tajawal-Bold.eot") format("eot"), url("../fonts/Tajawal-Bold.otf") format("otf");
  font-display: swap;
}
/*---------*/
@font-face {
  font-family: "Tajawal-ExtraBold";
  font-style: normal;
  font-weight: normal;
  src: url("../fonts/Tajawal-ExtraBold.woff2") format("woff2"), url("../fonts/Tajawal-ExtraBold.woff") format("woff"), url("../fonts/Tajawal-ExtraBold.ttf") format("truetype"), url("../fonts/Tajawal-ExtraBold.eot") format("eot"), url("../fonts/Tajawal-ExtraBold.otf") format("otf");
  font-display: swap;
}
/*-----------------------
   fontFamily
-------------------------*/
/*-----------------------
    Global Styles
-------------------------*/
::-moz-selection {
  background: #000000;
  color: #fff;
}
::selection {
  background: #000000;
  color: #fff;
}

::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: #F1F1F1;
}

::-webkit-scrollbar-thumb {
  background: #BBBDC1;
  border-radius: 120px;
}

html {
  -webkit-text-size-adjust: 100%;
  line-height: 1.15;
  scroll-behavior: initial;
  overflow-x: hidden !important;
}

body {
  font-size: 16px;
  vertical-align: baseline;
  font-family: "Tajawal-Regular", sans-serif;
  font-weight: 400;
  color: #fff;
  background: #00002D;
  font-style: normal;
  overflow-x: hidden !important;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

a {
  text-decoration: none !important;
  transition: all 1s ease-out;
  cursor: pointer !important;
  box-shadow: none !important;
  outline: 0 !important;
  border: 0;
}

.btn {
  box-shadow: none !important;
  outline: 0 !important;
}

.cursor-pointer {
  cursor: pointer !important;
}

ol,
ul {
  list-style: none;
}

figure,
ol,
p,
ul {
  margin: 0;
  padding: 0;
}

p {
  margin-top: 0;
  margin-bottom: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  text-rendering: optimizelegibility;
  margin-top: 0;
  margin-bottom: 0;
}

[type=email],
[type=number],
[type=tel],
[type=url] {
  direction: inherit;
}

.btn-check:checked + .btn,
.btn.active,
.btn.show,
.btn:first-child:active,
:not(.btn-check) + .btn:active {
  color: inherit;
  border-color: transparent;
}

input {
  box-shadow: unset !important;
  outline: 0 !important;
}

.titel-section {
  line-height: normal;
  background: linear-gradient(90deg, #7C44DD 0%, #01F7F8 100%);
  background: -webkit-linear-gradient(90deg, #7C44DD 0%, #01F7F8 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: "Tajawal-Bold", sans-serif;
}
@media (min-width: 1200px) {
  .titel-section {
    font-size: 2.5rem;
  }
}

.title-section-part {
  margin-bottom: 2.5rem;
}
.title-section-part span {
  font-size: 1.5rem;
  color: #01F5F6;
  font-family: "Tajawal-Bold", sans-serif;
}
.title-section-part p {
  font-family: "Tajawal-Medium", sans-serif;
}

.btn-contact-btn {
  border-radius: 4rem;
  background: #fff;
  transition: all 1s ease-out;
  min-height: 47px;
  min-width: 165px;
  padding: 0 1rem;
  font-family: "Tajawal-Bold", sans-serif;
}
@media (min-width: 399.98px) {
  .btn-contact-btn {
    font-size: 1.1rem;
  }
}
@media (max-width: 400px) {
  .btn-contact-btn {
    font-size: 0.894rem;
  }
}
.btn-contact-btn:not(:hover) img {
  transition: all 1s ease-out;
  display: none;
}
.btn-contact-btn img {
  transition: all 1s ease-out;
}
html[dir=ltr] .btn-contact-btn img {
  transform: scaleX(-1);
}
html[dir=rtl] .btn-contact-btn img {
  transform: scaleX(1);
}
@media (max-width: 767.98px) {
  .btn-contact-btn img {
    display: none;
  }
}
.btn-contact-btn:hover {
  background: #3F3FD5;
}

/*-----------------------
    Header
-------------------------*/
header {
  padding: 1.5rem 0;
  position: absolute;
  top: 0;
  bottom: unset;
  z-index: 11;
  /* Responsive Styles */
}
html[dir=rtl] header {
  right: 0;
  left: 0;
}
html[dir=ltr] header {
  right: 0;
  left: 0;
}
header .btn {
  position: relative;
}
@media (min-width: 992px) {
  header .header-logo-part {
    justify-content: center;
  }
}
@media (max-width: 991.98px) {
  header .header-logo-part {
    justify-content: end;
  }
}
header .content {
  position: absolute;
  overflow: hidden;
  left: 10px;
  transition: top 0.4s ease-out;
}
header .top {
  top: 6px;
}
header .bottom {
  top: 40px;
}
header .btn:hover .top {
  top: -40px;
}
header .btn:hover .bottom {
  top: 6px;
}
header .hover-button {
  color: #fff;
  width: 100px;
  height: 40px;
  overflow: hidden;
  border: 1px solid transparent;
  font-size: 1.3rem;
  font-family: "Tajawal-Medium", sans-serif;
}
header .hover-button:hover {
  color: #01F5F6;
}
header .menu-toggle {
  display: none;
  font-size: 24px;
  cursor: pointer;
}
@media (max-width: 992px) {
  header .nav-links {
    display: flex;
    flex-direction: column;
    background: #0a0a32;
    position: fixed;
    top: 0;
    bottom: 0;
    z-index: 11;
    width: 70%;
    height: 100vh;
    padding: 20px;
    border-radius: 5px;
    /* Initially hidden */
    transition: transform 0.5s ease-in-out;
  }
  html[dir=rtl] header .nav-links {
    right: unset;
    left: 0;
  }
  html[dir=ltr] header .nav-links {
    right: 0;
    left: unset;
  }
  html[dir=ltr] header .nav-links:not(.active) {
    transform: translateX(100%);
  }
  html[dir=rtl] header .nav-links:not(.active) {
    transform: translateX(-100%);
  }
  header .menu-toggle {
    display: block;
    z-index: 12;
    cursor: pointer;
  }
  header .nav-links.active {
    transform: translateX(0);
    /* Slide in */
  }
}
header .contact-link {
  font-size: 1.3rem;
}

.btn-language {
  font-size: 1.3rem;
  text-transform: capitalize;
  font-family: "Tajawal-Bold", sans-serif;
}

.dropdown-toggle::after {
  margin-top: 7px;
  border-top: 0.2em solid;
  border-left: 0.2em solid transparent;
  border-bottom: 0;
  border-right: 0.2em solid transparent;
}

.dropdown-menu.show {
  display: block;
  border: 1px solid #fff;
  border-radius: 16px;
  font-family: "Tajawal-Medium", sans-serif;
}

/*-----------------------
    Banner Section
-------------------------*/
.banner-section {
  background: url(../image/img/banner-bg.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  min-height: 100vh;
}
@media (min-width: 768px) {
  .banner-section {
    padding-top: 200px;
    padding-bottom: 350px;
  }
}
@media (max-width: 767.98px) {
  .banner-section {
    padding-top: 150px;
    padding-bottom: 150px;
  }
}
@media (min-width: 1199.98px) {
  .banner-section .right-image {
    position: relative;
    top: 30px;
  }
}
@media (max-width: 1200px) {
  .banner-section .right-image {
    position: absolute;
    top: 100px;
    bottom: 0;
  }
  html[dir=rtl] .banner-section .right-image {
    right: 0;
    left: unset;
  }
  html[dir=ltr] .banner-section .right-image {
    right: unset;
    left: 0;
  }
}
@media (min-width: 1199.98px) {
  .banner-section .left-image {
    position: relative;
    top: -70px;
  }
}
@media (min-width: 768px) and (max-width: 1200px) {
  .banner-section .left-image {
    position: absolute;
    top: 100px;
    bottom: 0;
  }
  html[dir=rtl] .banner-section .left-image {
    right: unset;
    left: 0;
  }
  html[dir=ltr] .banner-section .left-image {
    right: 0;
    left: unset;
  }
}
@media (max-width: 767.98px) {
  .banner-section .left-image {
    display: none;
  }
}
.banner-section .contant {
  max-width: 700px;
  z-index: 1;
}
.banner-section .contant .sub-title {
  padding: 0 0.5rem;
  min-height: 40px;
  border-radius: 1.5rem;
  border: 1px solid #01F5F6;
  font-family: "Tajawal-Medium", sans-serif;
}
.banner-section .contant .main-title {
  font-family: "Tajawal-Bold", sans-serif;
}
@media (min-width: 992px) {
  .banner-section .contant .main-title {
    font-size: 2.8rem;
  }
}
@media (max-width: 991.98px) {
  .banner-section .contant .main-title {
    font-size: 1.5rem;
  }
}
.banner-section .contant p {
  font-family: "Tajawal-Medium", sans-serif;
}
@media (min-width: 992px) {
  .banner-section .contant p {
    font-size: 1.125rem;
  }
}
.banner-section .contant .btn-primary {
  min-width: 200px;
  min-height: 49px;
  border-radius: 1rem;
  font-size: 1.25rem;
  font-family: "Tajawal-Bold", sans-serif;
}
.banner-section .v-slider-frame {
  height: 50px;
  overflow: hidden;
  text-align: center;
}
@media (min-width: 992px) {
  .banner-section .v-slider-frame::before {
    position: absolute;
    top: 0;
    bottom: 0;
    content: " ";
    background: #fff;
    color: #fff;
    height: 100%;
    width: 1px;
  }
  html[dir=rtl] .banner-section .v-slider-frame::before {
    right: 0;
    left: unset;
  }
  html[dir=ltr] .banner-section .v-slider-frame::before {
    right: unset;
    left: 0;
  }
}
.banner-section ul.v-slides {
  list-style-type: none;
  transform: translateY(50px);
  padding: 0;
}
.banner-section .v-slide {
  line-height: 50px;
}
@media (min-width: 992px) {
  .banner-section .absolute-image img {
    height: 870px;
    position: absolute;
    top: unset;
    bottom: -70px;
  }
  html[dir=rtl] .banner-section .absolute-image img {
    right: 0;
    left: 0;
  }
  html[dir=ltr] .banner-section .absolute-image img {
    right: 0;
    left: 0;
  }
}
@media (max-width: 991.98px) {
  .banner-section .absolute-image img {
    position: absolute;
    top: unset;
    bottom: 0;
  }
  html[dir=rtl] .banner-section .absolute-image img {
    right: 0;
    left: 0;
  }
  html[dir=ltr] .banner-section .absolute-image img {
    right: 0;
    left: 0;
  }
}
@media (min-width: 768px) {
  .banner-section .top-left {
    position: absolute;
    top: -100px;
    bottom: unset;
    animation: fadeinout 2s infinite;
  }
  html[dir=rtl] .banner-section .top-left {
    right: 0px;
    left: unset;
  }
  html[dir=ltr] .banner-section .top-left {
    right: unset;
    left: 0px;
  }
}
@media (max-width: 767.98px) {
  .banner-section .top-left {
    display: none;
  }
}
@media (min-width: 768px) {
  .banner-section .absolute-left {
    position: absolute;
    top: unset;
    bottom: -100px;
    animation: fadeinout 3s infinite;
  }
  html[dir=rtl] .banner-section .absolute-left {
    right: unset;
    left: 80px;
  }
  html[dir=ltr] .banner-section .absolute-left {
    right: 80px;
    left: unset;
  }
}
@media (max-width: 767.98px) {
  .banner-section .absolute-left {
    display: none;
  }
}
@media (min-width: 768px) {
  .banner-section .absolute-right {
    position: absolute;
    top: unset;
    bottom: -100px;
    animation: fadeinout 4s infinite;
  }
  html[dir=rtl] .banner-section .absolute-right {
    right: 50px;
    left: unset;
  }
  html[dir=ltr] .banner-section .absolute-right {
    right: unset;
    left: 50px;
  }
}
@media (max-width: 767.98px) {
  .banner-section .absolute-right {
    display: none;
  }
}

.animation-image {
  animation: fadeinout 5s infinite;
}

@keyframes fadeinout {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
/*-----------------------
    Support Message
-------------------------*/
.support-message .content {
  row-gap: 2.5rem;
}
.support-message .titel-section {
  background: linear-gradient(45deg, #7C44DD 10%, #01F7F8 100%) !important;
  background: -webkit-linear-gradient(45deg, #7C44DD 10%, #01F7F8 100%) !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
.support-message-card {
  padding: 1.5rem 1rem;
  border-radius: 1rem;
  border: 0.6px solid #3F3FD5;
  transition: all 1s ease-out;
}
.support-message-card .icon {
  width: 3rem;
  height: 3rem;
  border-radius: 0.5rem;
  background: #3131FF;
}
.support-message-card .text h4 {
  font-family: "Tajawal-Bold", sans-serif;
}
.support-message-card:not(:hover) {
  background: rgba(63, 63, 213, 0.3);
}
.support-message-card:hover {
  background: #3F3FD5;
}

/*-----------------------
    User Guidance
-------------------------*/
.user-guidance {
  background: #01013C;
}
.user-guidance .text-title-margin {
  margin-bottom: 3rem;
}
.user-guidance .titel {
  line-height: normal;
  background: linear-gradient(87.18deg, #7C44DD -16.83%, #01F7F8 115.53%);
  background: -webkit-linear-gradient(87.18deg, #7C44DD -16.83%, #01F7F8 115.53%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: "Tajawal-Bold", sans-serif;
}
@media (min-width: 1200px) {
  .user-guidance .titel {
    font-size: 2.5rem;
  }
}
.user-guidance .user-guidance-card {
  padding: 1.5rem 1rem;
  border-radius: 1rem;
  background: rgba(63, 63, 213, 0.3);
}
.user-guidance .user-guidance-card h4 {
  font-size: 1.5rem;
  font-family: "Tajawal-Bold", sans-serif;
}
.user-guidance .user-guidance-card p {
  font-family: "Tajawal-Medium", sans-serif;
}
.user-guidance .user-guidance-card .icon {
  width: 50px;
  min-width: 50px;
  max-width: 50px;
  height: 50px;
  border-radius: 0.5rem;
  background: #3131FF;
}

/*-----------------------
    Brands Section
-------------------------*/
.brands-section .brand-box {
  width: 150px;
}

/*-----------------------
    Service Section
-------------------------*/
.service-section-card {
  padding: 1.5rem 1rem;
  border-radius: 1rem;
  border: 0.6px solid #3F3FD5;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.2509803922);
  transition: all 1s ease-out;
}
.service-section-card .icon {
  width: 3rem;
  height: 3rem;
  border-radius: 0.5rem;
  background: #00002D;
}
.service-section-card .text h4 {
  font-family: "Tajawal-Bold", sans-serif;
}
.service-section-card .text p {
  color: #B4B4B4;
}
.service-section-card:not(:hover) {
  background: rgba(63, 63, 213, 0.3);
}
.service-section-card:hover {
  background: #3F3FD5;
}

/*-----------------------
    Nova Innovation
-------------------------*/
.nova-innovation-image {
  padding: 1.2rem 1.2rem 0 1.2rem;
  border-radius: 1.5rem;
  height: 100%;
  max-height: 480px;
  background: linear-gradient(180deg, #3F3FD5 0%, #21216F 65.26%);
}
.nova-innovation-image img {
  border-radius: 1.5rem 1.5rem 0 0;
}
.nova-innovation-text {
  height: 100%;
  padding: 1.5rem;
  border-radius: 1.5rem;
  border: 1px solid #3F3FD5;
  background: rgba(63, 63, 213, 0.1);
}
.nova-innovation-text .title-part {
  line-height: normal;
  background: linear-gradient(90deg, #7C44DD 0%, #01F7F8 100%);
  background: -webkit-linear-gradient(90deg, #7C44DD 0%, #01F7F8 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: "Tajawal-Bold", sans-serif;
}
@media (min-width: 1200px) {
  .nova-innovation-text .title-part {
    font-size: 2rem;
  }
}
.nova-innovation-text .title-part span {
  line-height: 2.5rem;
}
.nova-innovation-text p {
  color: #B4B4B4;
  font-family: "Tajawal-Medium", sans-serif;
  font-size: 1rem;
}
.nova-innovation .nova-innovation-card {
  padding: 0.5rem;
  border: 0.6px solid #3F3FD5;
  background: rgba(63, 63, 213, 0.3);
  border-radius: 1rem;
}
.nova-innovation .nova-innovation-card .icon {
  width: 50px;
  min-width: 50px;
  max-width: 50px;
  height: 50px;
  border-radius: 0.5rem;
  background: #3131FF;
}
.nova-innovation .nova-innovation-card .text h4 {
  font-size: 1.125rem;
  font-family: "Tajawal-Bold", sans-serif;
}
.nova-innovation .nova-innovation-card .text p {
  color: #B4B4B4;
  font-family: "Tajawal-Medium", sans-serif;
}

/*-----------------------
    Advantages Section
-------------------------*/
.advantages-section-description h3 {
  font-size: 2rem;
}
.advantages-section-description p {
  font-size: 0.894rem;
  font-family: "Tajawal-Medium", sans-serif;
  color: #B4B4B4;
}
@media (min-width: 992px) {
  html[dir=rtl] .advantages-section-description p {
    padding-left: 10%;
  }
  html[dir=ltr] .advantages-section-description p {
    padding-right: 10%;
  }
}
.advantages-section .advantages-box .title .titel-section {
  font-size: 1.5rem;
  font-family: "Tajawal-Bold", sans-serif;
}
.advantages-section .advantages-box p {
  color: #B4B4B4;
  font-family: "Tajawal-Medium", sans-serif;
}

/*-----------------------
   why-choose-our-tech
-------------------------*/
.why-choose-our-tech .why-choose-title-part {
  row-gap: 2rem;
}
.why-choose-our-tech .why-choose-title-part h2 {
  font-size: 2.5rem;
  font-family: "Tajawal-Bold", sans-serif;
}
.why-choose-our-tech .why-choose-title-part p {
  color: #B4B4B4;
  font-family: "Tajawal-Medium", sans-serif;
}
@media (min-width: 992px) {
  .why-choose-our-tech .why-choose-title-part p {
    font-size: 1.4rem;
  }
  html[dir=rtl] .why-choose-our-tech .why-choose-title-part p {
    padding-left: 5%;
  }
  html[dir=ltr] .why-choose-our-tech .why-choose-title-part p {
    padding-right: 5%;
  }
}
@media (max-width: 991.98px) {
  .why-choose-our-tech .why-choose-title-part p {
    font-size: 1rem;
  }
}
.why-choose-our-tech .why-choose-title-part p:not(:last-child) {
  margin-bottom: 1rem;
}
.why-choose-our-tech .why-choose-title-part .btn-outline-primary {
  text-align: start;
  min-height: 60px;
  border-radius: 2rem;
  padding-inline: 1.5rem;
  color: #fff;
  font-size: 1.3rem;
  border-color: #3F3FD5;
  box-shadow: 4px 3px 24px -11px #FFFFFF !important;
  font-family: "Tajawal-Bold", sans-serif;
  transition: all 1s ease-out;
}
.why-choose-our-tech .why-choose-title-part .btn-outline-primary .icon {
  block-size: 32px;
  min-inline-size: 32px;
  max-inline-size: 32px;
  inline-size: 32px;
  font-size: 13px;
  border-radius: 100%;
  transition: all 1s ease-out;
}
.why-choose-our-tech .why-choose-title-part .btn-outline-primary:not(:hover) .icon {
  background: #3F3FD5;
}
.why-choose-our-tech .why-choose-title-part .btn-outline-primary:hover {
  background: #3F3FD5;
}
.why-choose-our-tech .why-box {
  background: linear-gradient(320deg, #3F3FD5 0%, #000062 36.32%);
  background: -webkit-linear-gradient(320deg, #3F3FD5 0%, #000062 36.32%);
}
.why-choose-our-tech .why-box .icon {
  inline-size: 35px;
  min-inline-size: 35px;
  max-inline-size: 35px;
  block-size: 35px;
  border-radius: 8px;
  background: linear-gradient(270deg, #0202C8 73.74%, #0270DE 83.93%, #01F7F8 100%);
  background: -webkit-linear-gradient(270deg, #0202C8 73.74%, #0270DE 83.93%, #01F7F8 100%);
}
.why-choose-our-tech .why-box h4 {
  font-family: "Tajawal-Medium", sans-serif;
}
.why-choose-our-tech .why-box p {
  color: #B4B4B4;
  font-size: 0.875rem;
  font-family: "Tajawal-Medium", sans-serif;
}

.hover-border-1::before,
.hover-border-1::after {
  position: absolute;
  content: "";
  width: 16.5px;
  height: 18.5px;
  transition: 0.35s;
}

.hover-border-1::before {
  top: 0;
  left: 0;
  border-left: 1px solid #01F7F8;
  border-top: 1px solid #01F7F8;
}

.hover-border-1::after {
  bottom: 0;
  right: 0;
  border-right: 1px solid #01F7F8;
  border-bottom: 1px solid #01F7F8;
}

.hover-border-1:hover::before,
.hover-border-1:hover::after {
  width: 100%;
  height: 100%;
}

/*-----------------------
    Nava Section
-------------------------*/
.nava-section-title {
  margin-bottom: 2.5rem;
  line-height: normal;
  background: linear-gradient(200deg, #01F7F8 0%, #7C44DD 100%);
  background: -webkit-linear-gradient(200deg, #01F7F8 0%, #7C44DD 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: "Tajawal-Bold", sans-serif;
}
@media (min-width: 992px) {
  .nava-section-title {
    font-size: 2.5rem;
    line-height: 2.75rem;
  }
}
.nava-section-details {
  padding: 1.75rem 1.25rem;
  border-radius: 2rem;
  background: rgba(63, 63, 213, 0.1);
  border: 1px solid #3F3FD5;
}
.nava-section-details h4 {
  line-height: normal;
}
@media (min-width: 992px) {
  .nava-section-details h4 {
    font-size: 2rem;
  }
}
.nava-section-details p {
  font-family: "Tajawal-Medium", sans-serif;
}
@media (min-width: 992px) {
  .nava-section-details p {
    font-size: 1.25rem;
  }
}
@media (max-width: 991.98px) {
  .nava-section-details p {
    font-size: 1.25rem;
  }
}
.nava-section-details ul li:not(:last-child) {
  margin-bottom: 1.25rem;
}
.nava-section-details ul li::before {
  content: url(../image/icon/verify-list.svg);
}
.nava-section-details ul li span {
  color: #B4B4B4;
  font-family: "Tajawal-Medium", sans-serif;
}
.nava-section-image {
  padding: 2rem 3rem 0 3rem;
  border-radius: 1.5rem;
  background: linear-gradient(250deg, #01F7F8 0%, #17669B 41.58%, #21216F 73.64%);
  background: -webkit-linear-gradient(250deg, #01F7F8 0%, #17669B 41.58%, #21216F 73.64%);
}
.nava-section-image::after {
  content: "";
  background: url(../image/img/noise-image.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
}
html[dir=rtl] .nava-section-image::after {
  right: 0;
  left: 0;
}
html[dir=ltr] .nava-section-image::after {
  right: 0;
  left: 0;
}
.nava-section-image .content {
  z-index: 11;
  padding: 1.5rem 1.25rem;
  background: #020014;
  border-radius: 32px 32px 0 0;
}
.nava-section-image .content h5 {
  font-size: 1.5rem;
  font-family: "Tajawal-Bold", sans-serif;
}
.nava-section-image .content p {
  color: #B4B4B4;
}

/*-----------------------
    similar-project
-------------------------*/
.similar-project-bg-gradient {
  border-radius: 1.25rem;
  background: linear-gradient(90deg, #00002D 0%, #11117A 72.5%, #3F3FD5 100%);
}
.similar-project-bg-gradient h2 {
  font-family: "Tajawal-Bold", sans-serif;
}
@media (min-width: 992px) {
  .similar-project-bg-gradient h2 {
    font-size: 3.125rem;
  }
}
.similar-project-bg-gradient p {
  font-family: "Tajawal-Medium", sans-serif;
}
.similar-project-bg-gradient .btn-contact-btn {
  border-radius: 0.5rem;
}
@media (min-width: 568px) {
  .similar-project-bg-gradient .btn-contact-btn {
    font-size: 1.5rem;
    min-height: 60px;
  }
}
@media (max-width: 568.98px) {
  .similar-project-bg-gradient .btn-contact-btn {
    font-size: 1.25rem;
    width: 100%;
    text-align: center;
    min-height: 50px;
  }
}

/*-----------------------
    Customer Reviews
-------------------------*/
html[dir=ltr] .customer-reviews .gap-5 {
  gap: 0rem !important;
}

.customer-reviews .titel {
  font-size: 2.5rem;
  font-family: "Tajawal-Bold", sans-serif;
}
.customer-reviews .titel.primary-text {
  color: #3F3FD5;
}
.customer-reviews-card {
  border-radius: 1rem;
  padding: 2rem 1.5rem 4rem 1.5rem;
  border: 0.6px solid #3F3FD5;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.2509803922);
  transition: all 1s ease-out;
}
.customer-reviews-card .card-header-image {
  inline-size: 48px;
  min-inline-size: 48px;
  max-inline-size: 48px;
  block-size: 48px;
  border-radius: 100%;
}
.customer-reviews-card .card-header-text h5 {
  font-size: 1.5rem;
  font-family: "Tajawal-Bold", sans-serif;
}
.customer-reviews-card .card-header-text P {
  color: #B4B4B4;
  font-family: "Tajawal-Medium", sans-serif;
}
.customer-reviews-card .card-body p {
  color: #E1E1E1;
  font-family: "Tajawal-Medium", sans-serif;
}
.customer-reviews-card:not(:hover) {
  background: rgba(63, 63, 213, 0.3);
}
.customer-reviews-card:hover {
  background: rgba(1, 245, 246, 0.5);
}
.customer-reviews .swiper-slide {
  transition: all 0.5s ease-out;
}
.customer-reviews .swiper-slide:not(.customer-reviews .swiper-slide-active) {
  margin-top: 11rem;
}
.customer-reviews .swiper-slide-active .customer-reviews-card {
  background: rgba(1, 245, 246, 0.5);
}
.customer-reviews .arrow-slider .swiper-btn {
  inline-size: 48px;
  min-inline-size: 48px;
  max-inline-size: 48px;
  block-size: 48px;
  border-radius: 100%;
  color: #fff;
  background: #3F3FD5;
}
html[dir=ltr] .customer-reviews .arrow-slider .swiper-btn {
  transform: scaleX(-1);
}
html[dir=rtl] .customer-reviews .arrow-slider .swiper-btn {
  transform: scaleX(1);
}
.customer-reviews .arrow-slider .swiper-btn::after, .customer-reviews .arrow-slider .swiper-btn::before {
  font-size: 1.125rem;
}

/*-----------------------
   Common-Question
-------------------------*/
.common-question .title-common-question {
  margin-bottom: 2.5rem;
  font-family: "Tajawal-Bold", sans-serif;
}
@media (min-width: 1200px) {
  .common-question .title-common-question {
    font-size: 2.25rem;
  }
}

.accordion .accordion-item:has(.accordion-button:not(.collapsed)) {
  background: #000024;
  border: 0.6px solid #01F5F6 !important;
  border-radius: 1rem;
}
.accordion .accordion-button:not(.collapsed) {
  background: #000024;
}
.accordion .accordion-button:not(.collapsed)::after {
  background-image: url(../image/icon/Minus.svg);
  width: 24px;
  height: 25px;
  background-size: 24px;
  transition: all 0.5s ease-out;
}
.accordion .accordion-button.collapsed {
  border: 0.3px solid #01F5F6 !important;
  background: #3F3FD5;
  width: calc(100% - 5px);
}
.accordion .accordion-button {
  font-size: 1rem;
  min-height: 70px;
  box-shadow: none;
  border-radius: 1rem !important;
  transition: all 0.5s ease-out;
  font-family: "Tajawal-Bold", sans-serif;
}
.accordion .accordion-button::after {
  background-image: url(../image/icon/plus.svg);
  background-repeat: no-repeat;
  width: 24px;
  height: 25px;
  background-size: 24px;
  transition: all 0.5s ease-out;
}
.accordion.accordion-flush .accordion-item {
  background: transparent;
}
.accordion .accordion-collapse p {
  padding: 0 1rem;
  color: #B4B4B4;
  font-family: "Tajawal-Medium", sans-serif;
}

/*-----------------------
    Blog Section
-------------------------*/
.blog-section-title {
  margin-bottom: 2.5rem;
}
.blog-section-title h2 {
  font-family: "Tajawal-Bold", sans-serif;
}
.blog-section-title p {
  font-family: "Tajawal-Bold", sans-serif;
}
@media (min-width: 768px) {
  .blog-section-title p {
    font-size: 1.75rem;
  }
}
@media (max-width: 767.98px) {
  .blog-section-title p {
    font-size: 1rem;
  }
}
.blog-section-title h3 {
  font-family: "Tajawal-Bold", sans-serif;
  color: #01F5F6;
}
@media (min-width: 768px) {
  .blog-section-title h3 {
    font-size: 2rem;
  }
}
.blog-section-card p {
  font-family: "Tajawal-Bold", sans-serif;
}
@media (min-width: 768px) {
  .blog-section-card p {
    font-size: 1.25rem;
  }
}
@media (max-width: 767.98px) {
  .blog-section-card p {
    font-size: 1rem;
  }
}
.blog-section-card .card-header {
  padding: 4.5rem 1rem 2rem 1rem;
  border-radius: 1.5rem;
  background: url(../image/img/card-image.svg);
  background-repeat: no-repeat;
  background-size: cover;
}
.blog-section-card .card-header p {
  min-height: 60px;
  display: -webkit-box;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.blog-section-card .card-body {
  padding: 0rem 1rem 1rem 1rem;
}
.blog-section-card .card-body span {
  font-family: "Tajawal-Medium", sans-serif;
}

/*-----------------------
    Footer
-------------------------*/
footer .footer-description p {
  font-family: "Tajawal-Medium", sans-serif;
}
footer .footer-title {
  font-weight: 600;
}
footer ul.social-links li a {
  font-size: 1.25rem;
  inline-size: 2.5rem;
  min-inline-size: 2.5rem;
  max-inline-size: 2.5rem;
  block-size: 2.5rem;
  border-radius: 100%;
  border: 0.3px solid #DBDBDB;
  background: linear-gradient(180deg, #3F3FD5 0%, #01F5F6 100%);
}
footer ul.social-links li:not(:hover) a {
  transition: all 1s ease-out;
}
footer ul.social-links li:hover a {
  transform: scale(1.1);
  -webkit-transform: scale(1.1);
}
footer ul.list-link a {
  font-size: 0.894rem;
  color: #fff;
  font-family: "Tajawal-Medium", sans-serif;
}
footer ul.list-link a i {
  font-size: 1rem;
  color: #01F5F6;
}

/*-----------------------
    back-to-top
-------------------------*/
button.back-to-top {
  margin: 0 !important;
  padding: 0 !important;
  background: linear-gradient(119.06deg, #3F3FD5 0%, #000062 36.32%);
  height: 0px;
  width: 0px;
  overflow: hidden;
  border-radius: 50px;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  color: transparent;
  clear: both;
  visibility: hidden;
  position: fixed;
  top: unset;
  bottom: 75px;
  cursor: pointer;
  display: block;
  border: none;
  font-size: 0px;
  outline: 0 !important;
  z-index: 99;
  transition: all 0.3s ease-in-out;
}
html[dir=rtl] button.back-to-top {
  right: 20px;
  left: unset;
}
html[dir=ltr] button.back-to-top {
  right: unset;
  left: 20px;
}

button.back-to-top:hover,
button.back-to-top:active,
button.back-to-top:focus {
  outline: 0 !important;
}

button.back-to-top::before,
button.back-to-top::after {
  content: "";
  display: block;
  border-bottom: solid 10px #3131FF;
  border-left: solid 10px transparent;
  line-height: 0;
  border-right: solid 10px transparent;
  height: 0;
  margin: 18px auto 0;
  width: 0;
  border-radius: 20px;
  visibility: hidden;
}

button.back-to-top.show::after,
button.back-to-top.show::before {
  visibility: visible;
}

button.back-to-top::after {
  border-bottom-color: #fff;
  position: relative;
  top: -24px;
}

button.back-to-top.show {
  display: block;
  background: linear-gradient(119.06deg, #3F3FD5 0%, #000062 36.32%);
  color: #3131FF;
  font-size: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  bottom: 50px;
  height: 35px;
  width: 35px;
  visibility: visible;
  box-shadow: 0px 2px 4px 1px rgba(0, 0, 0, 0.25);
  -webkit-box-shadow: 0px 2px 4px 1px rgba(0, 0, 0, 0.25);
  -moz-box-shadow: 0px 2px 4px 1px rgba(0, 0, 0, 0.25);
}

button.back-to-top.show:active {
  box-shadow: 0px 4px 8px 2px rgba(0, 0, 0, 0.25);
  -webkit-box-shadow: 0px 4px 8px 2px rgba(0, 0, 0, 0.25);
  -moz-box-shadow: 0px 4px 8px 2px rgba(0, 0, 0, 0.25);
}

/*-----------------------
    Breadcrumb
-------------------------*/
.breadcrumb-section {
  padding: 150px 0 0px 0;
}
.breadcrumb-section .breadcrumb-item + .breadcrumb-item::before {
  content: url(../image/icon/breadcrumb.svg);
}
.breadcrumb-section .breadcrumb-item {
  font-size: 0.849rem;
}
.breadcrumb-section span.around-span {
  font-size: 1rem;
  border: 0.5px solid #808080;
  block-size: 30px;
  min-inline-size: 70px;
  border-radius: 2.5rem;
  padding-inline: 10px;
  padding-block: 4px;
}

/*-----------------------
    Technical Skills
-------------------------*/
.technical-skills-title span {
  color: #01F5F6;
  font-family: "Tajawal-Bold", sans-serif;
}
@media (min-width: 768px) {
  .technical-skills-title span {
    font-size: 1.2rem;
  }
}
@media (max-width: 767.98px) {
  .technical-skills-title span {
    font-size: 1rem;
  }
}
.technical-skills-title p {
  font-family: "Tajawal-Medium", sans-serif;
}
.technical-skills-box {
  padding: 1rem;
  border-radius: 1rem;
  box-shadow: 0px 4px 4px 0px rgba(63, 63, 213, 0.2784313725);
  border: 1px solid #3F3FD5;
}

/*-----------------------
    Contact
-------------------------*/
.contact-section {
  padding-block-end: 40px;
}
.contact-section .contact-section-part .title-section {
  font-family: "Tajawal-Bold", sans-serif;
  background: linear-gradient(270deg, #01F7F8 0%, #7C44DD 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
@media (min-width: 1200px) {
  .contact-section .contact-section-part .title-section {
    font-size: 3.5rem;
  }
}
.contact-section .contact-section-part .title-section-img {
  width: 265px;
  margin-inline: auto;
}
.contact-section .contact-section-part .title-section-para {
  margin-inline: auto;
  font-family: "Tajawal-Bold", sans-serif;
}
@media (min-width: 992px) {
  .contact-section .contact-section-part .title-section-para {
    padding-inline: 15%;
    font-size: 1.35rem;
  }
}
.contact-section .contact-section-part .contact-us-btn {
  margin-inline: auto;
  font-weight: bold;
  padding: 5px 25px;
  border-radius: 20px;
  background-color: white;
}
.contact-section .contact-section-part .contact-us-btn:not(:hover) {
  color: #000;
}
.contact-section .contact-section-part .contact-us-btn:hover {
  color: #fff;
}

.contact-form-section {
  background-color: #f4f4f4;
  position: relative;
  color: #000;
}
.contact-form-section .container {
  position: relative;
  z-index: 50;
}
.contact-form-section .container .form .form-head {
  display: flex;
  align-items: end;
  gap: 4px;
  color: #3131FF;
  font-family: "Tajawal-Bold", sans-serif;
}
.contact-form-section .container .form .form-head .form-line {
  margin-block-end: 8px;
  width: 30px;
  height: 2px;
  background-color: #3131FF;
}
.contact-form-section .container .form .form-subtitle {
  margin-block-start: 8px;
  font-size: 16px;
}
.contact-form-section .container .form .form-body {
  padding-block: 10px;
}
.contact-form-section .container .form .form-body form .form-field {
  position: relative;
}
.contact-form-section .container .form-info {
  margin: auto;
  max-width: 450px;
  background-color: #3131FF;
  color: #fff;
}
.contact-form-section .container .form-info-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.contact-form-section .container .form-info-list .form-info-list-div h4 {
  font-size: 20px;
  font-weight: bold;
}
.contact-form-section .container .form-info-list .form-info-list-div .social {
  padding-block: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
@media (min-width: 768px) {
  .contact-form-section {
    padding-top: 40px;
    padding-bottom: 40px;
  }
}
@media (max-width: 767.98px) {
  .contact-form-section {
    padding-top: 20px;
    padding-bottom: 20px;
  }
}
.contact-form-section:after {
  content: "";
  height: 100%;
  width: 25%;
  position: absolute;
  top: 0;
  bottom: 0;
  background-color: #01f5f6;
}
html[dir=rtl] .contact-form-section:after {
  right: unset;
  left: 0;
}
html[dir=ltr] .contact-form-section:after {
  right: 0;
  left: unset;
}

/*-----------------------
    About Banner
-------------------------*/
.about-banner-text {
  row-gap: 2rem;
}
.about-banner-text h1 {
  font-family: "Tajawal-Bold", sans-serif;
}
@media (min-width: 1200px) {
  .about-banner-text h1 {
    font-size: 3.5rem;
  }
}
@media (max-width: 1199.98px) {
  .about-banner-text h1 {
    line-height: 3rem;
  }
}
.about-banner-text h1 .challenges::after,
.about-banner-text h1 .solutions::after {
  content: "";
  position: absolute;
  top: unset;
  bottom: 0;
  display: block;
  width: calc(100% - 5px);
  min-height: 43px;
}
html[dir=rtl] .about-banner-text h1 .challenges::after,
html[dir=rtl] .about-banner-text h1 .solutions::after {
  right: 0;
  left: 0;
}
html[dir=ltr] .about-banner-text h1 .challenges::after,
html[dir=ltr] .about-banner-text h1 .solutions::after {
  right: 0;
  left: 0;
}
.about-banner-text h1 .challenges::after {
  background: url(../image/icon/vector-digital.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.about-banner-text h1 .solutions::after {
  background: url(../image/icon/analog-line.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.about-banner-text p {
  font-family: "Tajawal-Bold", sans-serif;
}
@media (min-width: 992px) {
  .about-banner-text p {
    padding-inline: 10%;
    font-size: 1.35rem;
  }
}
@media (max-width: 991.98px) {
  .about-banner-text p {
    font-size: 1rem;
  }
}

/*-----------------------
    Tech Partner
-------------------------*/
.tech-partner-title {
  font-family: "Tajawal-Bold", sans-serif;
  line-height: normal;
  margin-bottom: 3rem;
}
@media (min-width: 992px) {
  .tech-partner-title {
    font-size: 1.8rem;
  }
}
@media (max-width: 991.98px) {
  .tech-partner-title {
    font-size: 1.25rem;
    line-height: 1.7rem;
  }
}
.tech-partner-title .title-line::after {
  content: "";
  position: absolute;
  top: unset;
  bottom: 0;
  display: block;
  width: calc(100% - 5px);
  min-height: 43px;
  background: url(../image/icon/line.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
html[dir=rtl] .tech-partner-title .title-line::after {
  right: 0;
  left: 0;
}
html[dir=ltr] .tech-partner-title .title-line::after {
  right: 0;
  left: 0;
}
.tech-partner-card {
  padding: 2rem 1rem;
  border-radius: 1rem;
  min-height: 420px;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center !important;
}
.tech-partner-card h4 {
  line-height: normal;
  font-family: "Tajawal-Bold", sans-serif;
  display: -webkit-box;
  line-clamp: 1;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (min-width: 992px) {
  .tech-partner-card h4 {
    font-size: 1.25rem;
  }
}
.tech-partner-card h3 {
  font-family: "Tajawal-Bold", sans-serif;
}
@media (min-width: 992px) {
  .tech-partner-card h3 {
    font-size: 4rem;
    line-height: 3.5rem;
  }
}
@media (max-width: 991.98px) {
  .tech-partner-card h3 {
    font-size: 2rem;
  }
}
.tech-partner-card span {
  font-size: 1.25rem;
  font-family: "Tajawal-Medium", sans-serif;
}
.tech-partner-card p {
  line-height: normal;
  font-family: "Tajawal-Medium", sans-serif;
  display: -webkit-box;
  line-clamp: 5;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/*-----------------------
    Cards
-------------------------*/
.card-section .card {
  padding: 2rem 1.5rem;
  border-radius: 0.5rem;
  transition: all 1s ease-out;
}
.card-section .card h2 {
  background: linear-gradient(220deg, #01F7F8 0%, #7C44DD 100%);
  background: -webkit-linear-gradient(220deg, #01F7F8 0%, #7C44DD 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: "Tajawal-Bold", sans-serif;
}
@media (min-width: 768px) {
  .card-section .card h2 {
    font-size: 3.75rem;
  }
}
@media (max-width: 767.98px) {
  .card-section .card h2 {
    font-size: 2rem;
  }
}
.card-section .card p {
  font-family: "Tajawal-Medium", sans-serif;
}
@media (min-width: 992px) {
  .card-section .card p {
    padding-inline-end: 3%;
  }
}
.card-section .card ul li::before {
  content: "";
  min-inline-size: 1.125rem;
  max-inline-size: 1.125rem;
  block-size: 1.125rem;
  border-radius: 100%;
}
.card-section .card:not(:hover) {
  background: linear-gradient(123.89deg, #FFFFFF 1.73%, #F7F7F7 95.19%, #F7F7F7 99.09%);
}
.card-section .card:not(:hover) ul li {
  color: #000;
}
.card-section .card:not(:hover) ul li::before {
  border: 2px solid #000000;
}
.card-section .card:hover {
  background: linear-gradient(123.89deg, #0E0E5F 1.73%, #0E0E5F 95.19%, #0E0E5F 99.09%);
}
.card-section .card:hover p {
  color: #fff;
  transition: color 0.8s ease-in-out;
}
.card-section .card:hover ul li {
  color: #fff;
  transition: color 0.8s ease-in-out;
}
.card-section .card:hover ul li::before {
  transition: border 0.8s ease-in-out;
  border: 2px solid #01F5F6;
}

/*-----------------------
    Our Projects
-------------------------*/
.our-projects-title p {
  font-family: "Tajawal-Bold", sans-serif;
}
.our-projects-title h3 {
  font-size: 2rem;
  font-family: "Tajawal-Bold", sans-serif;
}
.our-projects-card .card-header {
  height: 275px;
  border-radius: 1rem;
}
.our-projects-card .card-header img {
  position: absolute;
  top: 0;
  bottom: 0;
  -o-object-fit: cover;
     object-fit: cover;
  transition: opacity 0.4s ease-in-out;
}
html[dir=rtl] .our-projects-card .card-header img {
  right: 0;
  left: 0;
}
html[dir=ltr] .our-projects-card .card-header img {
  right: 0;
  left: 0;
}
.our-projects-card:not(:hover) .card-header .img-default {
  opacity: 1;
}
.our-projects-card:not(:hover) .card-header .img-hover {
  opacity: 0;
}
.our-projects-card:hover .card-header .img-default {
  opacity: 0;
}
.our-projects-card:hover .card-header .img-hover {
  opacity: 1;
}
.our-projects-card .card-body span {
  color: #fff;
  min-inline-size: 85px;
  min-block-size: 30px;
  border: 1px solid #FFFFFF;
  font-family: "Tajawal-Medium", sans-serif;
}
@media (max-width: 567.98px) {
  .our-projects-card .card-body span {
    min-inline-size: 100%;
  }
}
.our-projects-card .card-body h5 {
  color: #fff;
  font-family: "Tajawal-Bold", sans-serif;
}
@media (min-width: 768px) {
  .our-projects-card .card-body h5 {
    font-size: 1.5rem;
    display: -webkit-box;
    line-clamp: 1;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
.our-projects-card .card-body p {
  color: #E1E1E1;
  font-family: "Tajawal-Medium", sans-serif;
}
@media (min-width: 992px) {
  .our-projects-card .card-body p {
    padding-inline-end: 10%;
  }
}
@media (min-width: 768px) {
  .our-projects-card .card-body p {
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
.our-projects .single-cards {
  border-radius: 1.25rem;
  background: linear-gradient(90deg, #00002D 0%, #11117A 72.5%, #3F3FD5 100%);
}
.our-projects .single-cards .card-body h5 {
  background: linear-gradient(240deg, #01F7F8 0%, #7C44DD 100%);
  background: -webkit-linear-gradient(240deg, #01F7F8 0%, #7C44DD 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/*-----------------------
    services
-------------------------*/
.services-info-section {
  padding-block: 80px;
}
.services-info-section .service-info h3 {
  max-width: 80%;
  font-size: 64px;
  font-weight: 800;
  font-family: "Tajawal-Bold", sans-serif;
  background: linear-gradient(to right, #7c44dd, #01f7f8);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
@media (max-width: 1200px) {
  .services-info-section .service-info h3 {
    font-size: 56px;
    max-width: 100%;
    text-align: center;
  }
}
@media (max-width: 767.98px) {
  .services-info-section .service-info h3 {
    font-size: 36px;
    text-align: center;
    padding-block: 20px;
  }
}
.services-info-section .service-info p {
  margin-block-start: 20px;
  font-weight: 500;
  font-size: 16px;
  max-width: 70%;
}
@media (max-width: 1200px) {
  .services-info-section .service-info p {
    max-width: 100%;
    text-align: center;
  }
}
.services-info-section .service-card-info {
  border-radius: 16px;
  color: #000;
  padding: 20px;
  margin-block-start: 20px;
}
.services-info-section .service-card-info h3 {
  font-size: 24px;
  font-family: "Tajawal-Bold", sans-serif;
  color: rgba(0, 0, 0, 0.8);
}
.services-info-section .service-card-info p {
  margin-block-start: 10px;
  font-size: 16px;
}
.services-info-section .service-card-info.odd {
  background: linear-gradient(to right, #7e8cff, #ffffff);
}
.services-info-section .service-card-info.even {
  background: linear-gradient(to right, #8dffff, #c9ffff, #ffffff);
}
@media (max-width: 767.98px) {
  .services-info-section {
    font-size: 32px;
    padding-block: 20px;
  }
}

.services-steps-section {
  padding-block: 60px;
  padding-inline: 60px;
  /* Stage Column Styles */
  /* Stage Header Styles */
  /* Stage Card Styles */
  /* Card Colors and Hover States */
  /* Responsive Adjustments */
}
.services-steps-section .stages-container {
  background-color: #060335;
  max-width: 1400px;
  padding: 30px 0;
}
.services-steps-section .stages-row {
  padding-block: 20px;
  padding-inline: 80px;
}
.services-steps-section .stage-column {
  position: relative;
  padding: 0 0.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 600px;
}
.services-steps-section .stage-column::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 1px;
  background-color: #00b8d4;
}
.services-steps-section .stage-column:first-child::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 1px;
  background-color: #00b8d4;
}
.services-steps-section .stage-header {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 1.5rem;
  text-align: center;
  width: 100%;
}
.services-steps-section .stage-card {
  width: 100%;
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1rem;
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
  overflow: hidden; /* Ensure content doesn't overflow during transition */
  height: 80px; /* Set a fixed initial height */
  display: flex;
  align-items: center;
  /* Default Content Styles */
  /* Hover Content Styles */
  /* Hover Effect */
}
.services-steps-section .stage-card .default-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: all 0.3s ease;
  position: absolute;
  width: calc(100% - 2rem); /* Account for padding */
  height: 100%;
}
.services-steps-section .stage-card .default-content i {
  font-size: 1.5rem;
}
.services-steps-section .stage-card .default-content span {
  font-weight: bold;
  font-size: 1rem;
}
.services-steps-section .stage-card .hover-content {
  position: relative;
  width: 100%;
  opacity: 0;
  transition: opacity 0.3s ease 0.1s; /* Slight delay for better effect */
  transform: translateY(20px);
  transition: all 0.3s ease;
  padding-top: 20px; /* Space for default content */
}
.services-steps-section .stage-card .hover-content h5 {
  font-weight: bold;
  margin-bottom: 0.5rem;
}
.services-steps-section .stage-card .hover-content p {
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
}
.services-steps-section .stage-card .hover-content ul {
  padding-right: 1.5rem;
  margin-bottom: 0;
  font-size: 0.85rem;
}
.services-steps-section .stage-card:hover {
  height: auto; /* Let the height adjust to content */
  min-height: 250px; /* Set a minimum height to prevent too small cards */
}
.services-steps-section .stage-card:hover .default-content {
  opacity: 0;
  transform: translateY(-20px);
}
.services-steps-section .stage-card:hover .hover-content {
  opacity: 1;
  transform: translateY(0);
}
.services-steps-section .stage-card-empty {
  height: 60px; /* Set a fixed initial height */
  width: 100%;
}
.services-steps-section .exploration {
  background-color: #28a745;
}
.services-steps-section .exploration:hover {
  background-color: #218838;
}
.services-steps-section .planning {
  background-color: #dc3545;
}
.services-steps-section .planning:hover {
  background-color: #c82333;
}
.services-steps-section .design {
  background-color: #7b1fa2;
}
.services-steps-section .design:hover {
  background-color: #6a1b9a;
}
.services-steps-section .development {
  background-color: #e65100;
}
.services-steps-section .development:hover {
  background-color: #d84315;
}
.services-steps-section .testing {
  background-color: #0288d1;
}
.services-steps-section .testing:hover {
  background-color: #0277bd;
}
.services-steps-section .launch {
  background-color: #1a237e;
}
.services-steps-section .launch:hover {
  background-color: #0d1257;
}
@media (max-width: 992px) {
  .services-steps-section .services-steps-section {
    padding-inline: 10px !important;
  }
  .services-steps-section .stages-row {
    flex-direction: column;
    padding-inline: 20px !important;
  }
  .services-steps-section .stage-column {
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
    margin-bottom: 2rem;
  }
  .services-steps-section .stage-column::after {
    display: none;
  }
  .services-steps-section .stage-card {
    max-width: 400px;
    margin: 0 auto;
  }
  .services-steps-section .stage-card-empty {
    height: 0px; /* Set a fixed initial height */
    width: 100%;
  }
}

/*-----------------------
    Innovate Code Launch
-------------------------*/
.innovate-code-launch .custome-row-gap {
  row-gap: 2rem;
}
.innovate-code-launch-title {
  row-gap: 2rem;
}
.innovate-code-launch-title h3 {
  font-family: "Tajawal-Bold", sans-serif;
}
@media (min-width: 1250px) {
  .innovate-code-launch-title h3 {
    font-size: 3.75rem;
  }
}
.innovate-code-launch-title h2 {
  font-family: "Tajawal-Bold", sans-serif;
}
@media (min-width: 1250px) {
  .innovate-code-launch-title h2 {
    font-size: 3.75rem;
  }
}
.innovate-code-launch-title h2 span {
  line-height: normal;
  background: linear-gradient(270deg, #01F7F8 0%, #7C44DD 100%);
  background: -webkit-linear-gradient(270deg, #01F7F8 0%, #7C44DD 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.innovate-code-launch-title h2 span::after {
  content: "";
  position: absolute;
  top: unset;
  bottom: 0;
  display: block;
  width: 50%;
  margin: 0 auto;
  min-height: 43px;
  background: url(../image/icon/analog-line.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
html[dir=rtl] .innovate-code-launch-title h2 span::after {
  right: 0;
  left: 0;
}
html[dir=ltr] .innovate-code-launch-title h2 span::after {
  right: 0;
  left: 0;
}
.innovate-code-launch-title p {
  font-family: "Tajawal-Bold", sans-serif;
}
@media (min-width: 768px) {
  .innovate-code-launch-title p {
    font-size: 1.25rem;
  }
}
.innovate-code-launch-title span {
  font-family: "Tajawal-Medium", sans-serif;
}
@media (min-width: 768px) {
  .innovate-code-launch-title span {
    font-size: 1.25rem;
  }
}
.innovate-code-launch .counters h6 {
  line-height: normal;
  background: linear-gradient(270deg, #7C44DD 0%, #01F7F8 100%);
  background: -webkit-linear-gradient(270deg, #7C44DD 0%, #01F7F8 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: "Tajawal-Bold", sans-serif;
}
@media (min-width: 768px) {
  .innovate-code-launch .counters h6 {
    font-size: 2rem;
  }
}
@media (max-width: 767.98px) {
  .innovate-code-launch .counters h6 {
    font-size: 1.125rem;
  }
}
.innovate-code-launch .counters .counter-name {
  font-family: "Tajawal-Medium", sans-serif;
}
.innovate-code-launch .line-gradient {
  height: 2px;
  background: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, #01F5F6 52.21%, rgba(153, 153, 153, 0) 100%);
}

/*-----------------------
   Delivered Solutions
-------------------------*/
.delivered-solutions .title {
  font-family: "Tajawal-Bold", sans-serif;
  line-height: normal;
  background: linear-gradient(245deg, #0000DF 0%, #000000 49.97%);
  background: -webkit-linear-gradient(245deg, #0000DF 0%, #000000 49.97%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
@media (min-width: 767.98px) {
  .delivered-solutions .title {
    font-size: 2rem;
  }
}
.delivered-solutions .delivered-solutions-box {
  border-radius: 0.75rem;
  padding: 1rem;
  border-width: 1px;
  border-style: solid;
}
.delivered-solutions .delivered-solutions-box .icon {
  min-inline-size: 45px;
  max-inline-size: 45px;
  inline-size: 45px;
  block-size: 45px;
  border-radius: 100%;
  background: #fff;
}
.delivered-solutions .delivered-solutions-box .icon img {
  width: 18px;
}
.delivered-solutions .delivered-solutions-box p {
  font-family: "Tajawal-Bold", sans-serif;
}
@media (min-width: 992px) {
  .delivered-solutions .delivered-solutions-box p {
    font-size: 1.125rem;
  }
}
.delivered-solutions .col-solutions:nth-child(1) {
  align-self: flex-start;
}
.delivered-solutions .col-solutions:nth-child(1) .delivered-solutions-box {
  border-color: #F48400;
  background: #FEF2E9;
}
.delivered-solutions .col-solutions:nth-child(1) .delivered-solutions-box .icon {
  border: 0.7px solid #F48400;
}
.delivered-solutions .col-solutions:nth-child(1) .delivered-solutions-box .icon img {
  filter: brightness(0) saturate(100%) invert(62%) sepia(48%) saturate(5933%) hue-rotate(8deg) brightness(104%) contrast(101%);
}
.delivered-solutions .col-solutions:nth-child(1) .delivered-solutions-box p {
  color: #F48400;
}
.delivered-solutions .col-solutions:nth-child(2) {
  align-self: center;
}
.delivered-solutions .col-solutions:nth-child(2) .delivered-solutions-box {
  border-color: #1CBD6D;
  background: #EBF8F0;
}
.delivered-solutions .col-solutions:nth-child(2) .delivered-solutions-box .icon {
  border: 0.7px solid #1CBD6D;
}
.delivered-solutions .col-solutions:nth-child(2) .delivered-solutions-box .icon img {
  filter: brightness(0) saturate(100%) invert(55%) sepia(39%) saturate(831%) hue-rotate(98deg) brightness(99%) contrast(92%);
}
.delivered-solutions .col-solutions:nth-child(2) .delivered-solutions-box p {
  color: #1CBD6D;
}
.delivered-solutions .col-solutions:nth-child(3) {
  align-self: flex-end;
}
.delivered-solutions .col-solutions:nth-child(3) .delivered-solutions-box {
  border-color: #3F71FF;
  background: #ECF0FF;
}
.delivered-solutions .col-solutions:nth-child(3) .delivered-solutions-box .icon {
  border: 0.7px solid #3F71FF;
}
.delivered-solutions .col-solutions:nth-child(3) .delivered-solutions-box .icon img {
  filter: brightness(0) saturate(100%) invert(36%) sepia(57%) saturate(2682%) hue-rotate(214deg) brightness(100%) contrast(101%);
}
.delivered-solutions .col-solutions:nth-child(3) .delivered-solutions-box p {
  color: #3F71FF;
}

.custome-padding-top {
  padding-top: 350px;
}

/*-----------------------
   About-project-details
-------------------------*/
.about-project-details {
  margin-bottom: -300px;
}
.about-project-details-card {
  z-index: 11;
  background: #00002D;
  border: 1px solid #9747FF;
  border-radius: 1.25rem;
}
@media (min-width: 992px) {
  .about-project-details-card {
    padding: 3rem;
  }
}
@media (max-width: 991.98px) {
  .about-project-details-card {
    padding: 1rem;
  }
}
.about-project-details-card .card-image {
  height: 300px;
  border-radius: 1.5rem;
}
.about-project-details-card .card-image img {
  -o-object-fit: cover;
     object-fit: cover;
}
.about-project-details-card .card-text h4 {
  line-height: normal;
  background: linear-gradient(270deg, #01F7F8 0%, #7C44DD 100%);
  background: -webkit-linear-gradient(270deg, #01F7F8 0%, #7C44DD 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: "Tajawal-Bold", sans-serif;
}
@media (min-width: 992px) {
  .about-project-details-card .card-text h4 {
    font-size: 2rem;
  }
}
.about-project-details-card .card-text span {
  font-size: 1rem;
  padding-inline: 0.75rem;
  min-block-size: 35px;
  border: 0.7px solid #FFFFFF;
  border-radius: 2px;
  font-family: "Tajawal-Medium", sans-serif;
}
@media (min-width: 368px) {
  .about-project-details-card .card-text span {
    min-inline-size: 85px;
    max-inline-size: -moz-fit-content;
    max-inline-size: fit-content;
  }
}
@media (max-width: 367.98px) {
  .about-project-details-card .card-text span {
    min-inline-size: 100%;
    max-inline-size: 100%;
  }
}
.about-project-details-card .card-text .icon {
  min-inline-size: 36px;
  max-inline-size: 36px;
  block-size: 36px;
  border-radius: 100%;
  background: #fff;
}
.about-project-details-card .card-text .text .label {
  font-size: 0.875rem;
  font-family: "Tajawal-Regular", sans-serif;
}
.about-project-details-card .card-text .text h6 {
  font-family: "Tajawal-Medium", sans-serif;
}

/*-----------------------
   Blog Article
-------------------------*/
.blog-article .title {
  color: #000000;
  font-family: "Tajawal-Bold", sans-serif;
}
@media (min-width: 767.98px) {
  .blog-article .title {
    font-size: 2.125rem;
  }
}
.blog-article-image {
  height: 265px;
}
.blog-article-image img {
  -o-object-fit: cover;
     object-fit: cover;
}
.blog-article-text {
  row-gap: 1.5rem;
}
.blog-article-text h5 {
  color: #3F3FD5;
  font-family: "Tajawal-Bold", sans-serif;
}
@media (min-width: 768px) {
  .blog-article-text h5 {
    font-size: 2rem;
  }
}
@media (max-width: 767.98px) {
  .blog-article-text h5 {
    font-size: 1.5rem;
  }
}
.blog-article-text p {
  color: #000000;
  font-size: 1.5rem;
  font-family: "Tajawal-Bold", sans-serif;
}
@media (min-width: 768px) {
  .blog-article-text p {
    padding-inline-end: 10%;
  }
}
.blog-article-text .span-block span {
  font-family: "Tajawal-Medium", sans-serif;
}
.blog-article-text .btn-discovery {
  min-height: 55px;
  min-inline-size: 234px;
  font-size: 1.25rem;
  border-radius: 0.5rem;
  font-family: "Tajawal-Bold", sans-serif;
}
.blog-article-text .btn-discovery span, .blog-article-text .btn-discovery img {
  transition: all 1s ease-out;
}
.blog-article-text .btn-discovery:not(:hover) {
  background: rgba(125, 125, 255, 0.2901960784);
  color: #000000;
}
.blog-article-text .btn-discovery:not(:hover) img {
  display: none;
}
.blog-article-text .btn-discovery:hover {
  background: #3131FF;
  color: #fff;
}
.blog-article-text .btn-discovery:hover img {
  display: block;
}
.blog-article-card p {
  font-family: "Tajawal-Bold", sans-serif;
}
@media (min-width: 768px) {
  .blog-article-card p {
    font-size: 1.25rem;
  }
}
@media (max-width: 767.98px) {
  .blog-article-card p {
    font-size: 1rem;
  }
}
.blog-article-card .card-header {
  padding: 4.5rem 1rem 2rem 1rem;
  border-radius: 1.5rem;
  background: url(../image/img/card-image.svg);
  background-repeat: no-repeat;
  background-size: cover;
}
.blog-article-card .card-header p {
  min-height: 60px;
  display: -webkit-box;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.blog-article-card .card-body {
  padding: 0rem 1rem 1rem 1rem;
}
.blog-article-card .card-body span {
  font-family: "Tajawal-Medium", sans-serif;
}

.pagination-number {
  border: 0.7px solid rgba(0, 0, 0, 0.3882352941);
  max-width: 200px;
  min-height: 60px;
  border-radius: 130px;
  margin: 0 auto -30px auto;
}
.pagination-number .swiper-button-next:after, .pagination-number .swiper-rtl .swiper-button-prev:after,
.pagination-number .swiper-button-prev:after, .pagination-number .swiper-rtl .swiper-button-next:after {
  font-size: 20px;
  height: auto;
  color: #000;
}
.pagination-number .swiper-button-next, .pagination-number .swiper-button-prev,
.pagination-number .swiper-button-next, .pagination-number .swiper-button-prev {
  height: auto;
  bottom: 0;
  top: 0;
  margin: 0;
}
html[dir=ltr] .pagination-number .swiper-button-next, html[dir=ltr] .pagination-number .swiper-button-prev,
html[dir=ltr] .pagination-number .swiper-button-next, html[dir=ltr] .pagination-number .swiper-button-prev {
  transform: scaleX(-1);
}
html[dir=rtl] .pagination-number .swiper-button-next, html[dir=rtl] .pagination-number .swiper-button-prev,
html[dir=rtl] .pagination-number .swiper-button-next, html[dir=rtl] .pagination-number .swiper-button-prev {
  transform: scaleX(1);
}
.pagination-number .swiper-pagination-fraction {
  color: #000;
  bottom: 0;
  font-size: 24px;
  width: 60%;
}

/*-----------------------
blog-details-description
-------------------------*/
.blog-details-description-item:not(:last-child) {
  margin-bottom: 3rem;
}
.blog-details-description-item h3 {
  font-family: "Tajawal-Bold", sans-serif;
}
@media (min-width: 992px) {
  .blog-details-description-item h3 {
    font-size: 2.125rem;
    padding-inline-end: 25%;
  }
}
.blog-details-description-item p {
  font-family: "Tajawal-Bold", sans-serif;
}
.blog-details-description-item p:not(:last-child) {
  margin-bottom: 1rem;
}

.gradient-bg-similar-project {
  border-radius: 1.5rem;
  background: linear-gradient(90deg, #008989 0%, #11117A 72.5%, #3F3FD5 100%);
}

/*-----------------------
    Our Services
-------------------------*/
.our-services-title {
  margin-bottom: 2.25rem;
}
.our-services-title span {
  font-size: 1.5rem;
  color: #01F5F6;
  font-family: "Tajawal-Bold", sans-serif;
}
.our-services-title h2 {
  line-height: normal;
  background: linear-gradient(90deg, #7C44DD 0%, #01F7F8 100%);
  background: -webkit-linear-gradient(90deg, #7C44DD 0%, #01F7F8 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: "Tajawal-Bold", sans-serif;
}
@media (min-width: 1100px) {
  .our-services-title h2 {
    font-size: 2.5rem;
  }
}
.our-services-title p {
  font-family: "Tajawal-Medium", sans-serif;
}
.our-services-card {
  padding: 2rem 1.5rem;
  border: 0.6px solid #3F3FD5;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.2509803922);
  -webkit-backdrop-filter: blur(134px);
          backdrop-filter: blur(134px);
  border-radius: 1rem;
  background: url(../image/img/shadow-bg.png);
  background-repeat: no-repeat;
  background-position: bottom;
}
.our-services-card .text h4 {
  font-size: 1.5rem;
  font-family: "Tajawal-Bold", sans-serif;
}
@media (min-width: 768px) {
  .our-services-card .text h4 {
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
.our-services-card .text p {
  font-family: "Tajawal-Medium", sans-serif;
}

/*-----------------------
    Service Benefits
-------------------------*/
.service-benefits-card {
  padding: 3rem;
  border-radius: 2rem;
  background: url(../image/img/service-benefits.png);
  background-repeat: no-repeat;
  background-size: cover;
}
@media (min-width: 768px) {
  .service-benefits-card .card-text {
    row-gap: 3rem;
  }
}
.service-benefits-card .card-text h3 {
  font-family: "Tajawal-Bold", sans-serif;
}
@media (min-width: 768px) {
  .service-benefits-card .card-text h3 {
    font-size: 3rem;
  }
}
.service-benefits-card .card-text .btn-contact-btn {
  min-height: 47px;
  background: #01F5F6;
}
.service-benefits-card .card-text .btn-contact-btn:not(:hover) {
  color: #000000;
}
.service-benefits-card ul {
  row-gap: 2rem;
}
@media (min-width: 992px) {
  .service-benefits-card ul {
    padding-inline-start: 10%;
  }
}
.service-benefits-card ul li {
  padding-inline-start: 2.5rem;
}
.service-benefits-card ul li::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  background: url(../image/icon/check.svg);
  background-repeat: no-repeat;
  background-size: 1.8rem;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 100%;
}
html[dir=rtl] .service-benefits-card ul li::after {
  right: 0;
  left: unset;
}
html[dir=ltr] .service-benefits-card ul li::after {
  right: unset;
  left: 0;
}
.service-benefits-card ul li p {
  font-family: "Tajawal-Medium", sans-serif;
}

/*-----------------------
    card-section-part
-------------------------*/
.card-section-part .text-part {
  row-gap: 2rem;
}
.card-section-part .text-part h3 {
  line-height: normal;
  background: linear-gradient(90deg, #7C44DD 0%, #01F7F8 100%);
  background: -webkit-linear-gradient(90deg, #7C44DD 0%, #01F7F8 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: "Tajawal-Bold", sans-serif;
}
@media (min-width: 768px) {
  .card-section-part .text-part h3 {
    font-size: 2.5rem;
  }
}
.card-section-part .text-part p {
  font-size: 1.25rem;
}
.card-section-part .text-part .btn-contact-btn {
  background: #01F5F6;
  min-height: 47px;
}
.card-section-part .text-part .btn-contact-btn:not(:hover) {
  color: #000;
}
.card-section-part .card {
  background: linear-gradient(103.24deg, #7E8CFF 4.5%, #FFFFFF 100%);
  border-radius: 1rem;
  padding: 1.5rem 1rem;
}
.card-section-part .card h4 {
  font-size: 1.125rem;
  font-family: "Tajawal-Bold", sans-serif;
}
.card-section-part .card p {
  font-size: 0.849rem;
}
@media (min-width: 768px) {
  .card-section-part .flex-responsive {
    display: flex;
  }
}
@media (max-width: 767.98px) {
  .card-section-part .flex-responsive {
    display: block;
  }
}
@media (max-width: 767.98px) {
  .card-section-part .flex-responsive .col {
    margin-bottom: 1rem;
  }
}

/*-----------------------
    Service Focus
-------------------------*/
.service-focus h3 {
  line-height: normal;
  background: linear-gradient(90deg, #7C44DD 0%, #01F7F8 100%);
  background: -webkit-linear-gradient(90deg, #7C44DD 0%, #01F7F8 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: "Tajawal-Bold", sans-serif;
}
@media (min-width: 768px) {
  .service-focus h3 {
    font-size: 2.25rem;
  }
}
.service-focus-card .header-part h4 {
  font-size: 1.5rem;
  font-family: "Tajawal-Bold", sans-serif;
}
.service-focus-card .body-part p {
  padding: 0.5rem 1rem;
  font-size: 0.768rem;
  min-height: 45px;
  border-radius: 50px;
  font-family: "Tajawal-Medium", sans-serif;
}
.service-focus-card .body-part p:not(.active) {
  border: 1px solid #D7D7D7;
}
.service-focus-card .body-part p.active {
  background: linear-gradient(90deg, #172E60 0%, #407BFF 100%);
}
@media (min-width: 992px) {
  .service-focus .col {
    border-inline-start: 1px solid rgba(63, 63, 213, 0.18);
    border-inline-end: 1px solid rgba(63, 63, 213, 0.18);
    border-radius: 8px 8px 0 0;
  }
}
.service-focus .col:last-child, .service-focus .col:first-child {
  border-radius: 0 !important;
  border-color: transparent !important;
}
.service-focus .col:last-child p.active {
  background: linear-gradient(90deg, #001442 0%, #007878 100%);
}/*# sourceMappingURL=general.css.map */