/*! ==================== Hero ==================== */
#header {
  background-color: var(--black-color);
  background-image: url("../assets/images/BG.svg");
  background-position: center;
  background-size: cover;
  min-height: 100vh;
  position: relative;
  overflow: hidden;

  transform: translateY(0%);
  opacity: 1;
  transition:
    all 1.3s ease-out,
    opacity 1.3s ease-out;
  /* will-change: transform, opacity; */
}
#header.show {
  transform: translateY(0);
  opacity: 1;
}
#header::before {
  content: "";
  position: absolute;
  background-image: url("../assets/images/Light.svg");
  background-repeat: no-repeat;
  background-size: cover;
  width: 50%;
  height: 100%;
  top: -15%;
  right: 0;
}
.section {
  min-height: 102vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  position: sticky;
}

.header-section {
  padding: 0 !important;
  /* top: -350px; */
}


.hero {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
}

.hero .caption {
  color: var(--white-color);
  width: 55%;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 30px;
  padding-block: 70px;
  position: relative;
  z-index: 9;
}

.hero .caption .my-badge {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  background-color: rgba(0, 179, 248, 0.25);
  color: var(--main-color);
  width: fit-content;
  border: 1px solid var(--main-color);
  border-radius: 15px;
  padding: 3px 15px;
  font-size: 10px;
}

.hero .caption .my-badge p {
  font-size: clamp(11px, 2vw, 15px);
}

.hero .caption .my-badge img {
  width: 18px;
  animation: scaleImage 1s infinite alternate ease-in-out;
}

@keyframes scaleImage {
  0% {
    transform: scale(0.85);
  }
  100% {
    transform: scale(1);
  }
}

.hero .caption h2 {
  font-size: clamp(25px, 5vw, 60px);
  font-weight: bold;
}
.hero .caption p {
  color: rgba(229, 229, 229, 1);
}

.hero .caption .group-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
}

.hero .bg-hero {
  width: 90%;
  position: relative;
  bottom: -15px;
  margin-top: 50px;
}

.hero .bg-hero .logo {
  position: absolute;
  width: 50px;
  height: auto;
  top: 85px;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  animation:
    bg-hero-logo 3s forwards ,
    logoFloat 4s ease-in-out infinite;
}

@keyframes bg-hero-logo {
  0% {
    opacity: 0;
    top: 85px;
  }
  100% {
    opacity: 1;
    top: -50px;
  }
}

@keyframes logoFloat {
  0% {
    transform: translateX(-50%) translateY(0);
  }
  50% {
    transform: translateX(-50%) translateY(-25px);
  }
  100% {
    transform: translateX(-50%) translateY(0);
  }
}

@keyframes logoRotate {
  from {
    transform: translateX(-50%) translateY(0) rotate(0deg);
  }
  to {
    transform: translateX(-50%) translateY(0) rotate(360deg);
  }
}

.hero .bg-hero .pin {
  position: absolute;
  width: 2px;
  height: 120px;
  left: 50%;
  bottom: 100px;
  background-image: linear-gradient(
    45deg,
    transparent,
    var(--main-color),
    var(--main-color)
  );
  opacity: 0;
  animation: floatPin 6s linear infinite;
}

.hero .bg-hero .pin::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
  height: 8px;
  background-color: var(--main-color);
  border-radius: 50%;
}

.hero .bg-hero .p1 {
  left: 0%;
  animation-delay: 0s;
}
.hero .bg-hero .p2 {
  left: 10%;
  animation-delay: 1s;
}
.hero .bg-hero .p3 {
  left: 20%;
  animation-delay: 2s;
}
.hero .bg-hero .p4 {
  left: 30%;
  animation-delay: 3s;
}
.hero .bg-hero .p5 {
  left: 40%;
  animation-delay: 4s;
}

.hero .bg-hero .p6 {
  right: 0;
  animation-delay: 1.5s;
}
.hero .bg-hero .p7 {
  right: 10%;
  animation-delay: 2.5s;
}
.hero .bg-hero .p8 {
  right: 20%;
  animation-delay: 3.5s;
}
.hero .bg-hero .p9 {
  right: 30%;
  animation-delay: 0.5s;
}
.hero .bg-hero .p10 {
  right: 40%;
  animation-delay: 4.5s;
}

@keyframes floatPin {
  0% {
    transform: translateY(0) translateX(0);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  50% {
    transform: translateY(-150px) translateX(5px);
  }
  75% {
    transform: translateY(-220px) translateX(-5px);
  }
  100% {
    transform: translateY(-320px) translateX(0);
    opacity: 0;
  }
}

/*! ==================== About ==================== */
.about {
  background-color: var(--white-color);
  overflow: hidden;
  padding-bottom: 70px;
}
.about .desc {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.about .desc h3 {
  font-size: clamp(20px, 3vw, 40px);
  font-weight: bold;
}
.about p {
  color: var(--text-color);
}
.about .image {
  height: 350px;
  position: relative;
  left: -80px;
}
.about .image img {
  object-fit: cover;
  border-radius: 0 15px 15px 0;
}
.about .image .light-about {
  position: absolute;
  width: 50%;
  height: auto;
  bottom: 20%;
  left: 50%;
  transform: translate(-50%);

  animation: fadeInOut 4s ease-in-out infinite;
  transform-style: preserve-3d;
}

.about .image .head-about {
  position: absolute;
  width: 25%;
  height: auto;
  top: 10%;
  left: 55%;
  transform: translateX(-50%) translateY(50px);
  opacity: 0;
  transition: 2s;
}

.about .image .head-about.show {
  opacity: 1;
  animation: float-head 6s ease-in-out infinite;
  transform: translateX(-50%) translateY(0px);
}

@keyframes float-head {
  0% {
    transform: translateX(-50%) translateY(30px);
  }
  50% {
    transform: translateX(-50%) translateY(0);
  }
  100% {
    transform: translateX(-50%) translateY(30px);
  }
}

.about .stats-card {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding-left: 10px;
  height: 100%;
  justify-content: space-between;
}
.about .row-stats {
  padding-top: 40px;
}
.about .row-stats .col-stat:not(:last-child) .stats-card {
  border-left: 1px solid;
  border-image: linear-gradient(to bottom, #00b2f821, var(--main-color)) 1;
}
.about .stats-card p {
  font-weight: 600;
  font-size: clamp(13px, 3vw, 17px);
}
.about .stats-card .stats-value {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: clamp(30px, 4vw, 48px);
}
.about .stats-card .stats-value .number {
  color: var(--main-color);
  font-weight: bold;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}
.about .stats-card .unit {
  color: rgba(163, 163, 163, 1);
  font-weight: 200;
}
.about .stats-card .value-item {
  display: flex;
}
.about .stats-card .stats-value .space {
  color: var(--main-color);
  font-weight: 600;
}

/*! ==================== Ai-Solutions ==================== */
.ai-solutions {
  background-color: #f8f9fa;
}
.ai-solutions .row-ai-solutions,
.our-solutions .row-our-solutions {
  padding-block: 70px;
}
.our-solutions .row-our-solutions {
  padding-block: 80px;
  margin-top: 80px;
}
.ai-solutions .ai-cards,
.our-solutions .our-solutions-cards {
  display: flex;
  flex-direction: column;
  gap: 30px;
  height: 100%;
  justify-content: space-between;
}
.ai-solutions .ai-solutions-card {
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  border-radius: 15px;
  background: var(--white-color);
  height: 100%;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  transition:
    transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.4s ease;
}

.ai-solutions .ai-solutions-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(0, 179, 248, 1) 0%,
    rgba(6, 63, 117, 1) 100%
  );
  opacity: 0;
  transition: opacity 0.4s ease 0.4s;
  border-radius: 15px;
  z-index: 0;
}

.ai-solutions .ai-solutions-card::after {
  content: "";
  position: absolute;
  top: -60%;
  left: 10%;
  width: 60px;
  height: 200%;
  background: linear-gradient(
    105deg,
    transparent 20%,
    rgba(255, 255, 255, 0.35) 50%,
    transparent 80%
  );
  transform: skewX(-15deg) translateX(-100px);
  transition: transform 0.4s ease;
  z-index: 2;
  pointer-events: none;
}
.ai-solutions .ai-solutions-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 20px 50px rgba(0, 100, 200, 0.25);
}

.ai-solutions .ai-solutions-card:hover::before {
  opacity: 1;
  transition: opacity 0.4s ease;
}

.ai-solutions .ai-solutions-card:hover::after {
  transform: skewX(-15deg) translateX(900px);
  transition: transform 0.6s ease;
}

.ai-solutions .ai-solutions-card .text,
.ai-solutions .ai-solutions-card .icon-img {
  position: relative;
  z-index: 1;
}

.ai-solutions .ai-solutions-card .text {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.ai-solutions .ai-solutions-card .text h3 {
  font-size: clamp(15px, 3vw, 20px);
  font-weight: bold;
  color: var(--black-color);
  transition:
    color 0.35s ease,
    letter-spacing 0.35s ease;
}

.ai-solutions .ai-solutions-card .text p {
  font-size: clamp(13px, 3vw, 16px);
  font-weight: 400;
  color: rgba(115, 115, 115, 1);
  transition: color 0.35s ease;
}

.ai-solutions .ai-solutions-card:hover .text h3 {
  color: var(--white-color);
  letter-spacing: 0.3px;
}

.ai-solutions .ai-solutions-card:hover .text p {
  color: rgba(200, 235, 255, 0.9);
}

.ai-solutions .ai-solutions-card .icon-img {
  width: 45px;
  height: 45px;
  padding: 8px;
  background-color: var(--white-color);
  border: 1.5px solid var(--main-color);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  transition:
    background 0.35s ease,
    border-color 0.35s ease,
    transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.ai-solutions .ai-solutions-card:hover .icon-img {
  transform: rotate(-8deg) scale(1.1);
  border-color: transparent;
}
.ai-solutions .ai-solutions-card .particle {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  z-index: 1;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.ai-solutions .ai-solutions-card:hover .particle {
  opacity: 1;
}
.ai-solutions .ai-solutions-card .p1 {
  bottom: 20px;
  right: 30px;
  animation: float1 2.5s ease-in-out infinite;
}
.ai-solutions .ai-solutions-card .p2 {
  bottom: 40px;
  right: 60px;
  width: 4px;
  height: 4px;
  animation: float2 3s ease-in-out infinite 0.4s;
}
.ai-solutions .ai-solutions-card .p3 {
  bottom: 15px;
  right: 55px;
  width: 5px;
  height: 5px;
  animation: float1 2s ease-in-out infinite 0.8s;
}
@keyframes float1 {
  0%,
  100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}
@keyframes float2 {
  0%,
  100% {
    transform: translateY(0px) translateX(0px);
  }
  50% {
    transform: translateY(-14px) translateX(4px);
  }
}
.ai-solutions .image-ai {
  height: 100%;
}
.ai-solutions .image-ai img {
  border-radius: 15px;
}
/*! ==================== Our-Solutions ==================== */
.our-solutions .our-solutions-cards .icon-img {
  width: 45px;
  height: 45px;
}
.our-solutions .our-solutions-cards .our-solutions-card {
  color: var(--white-color);
  display: flex;
  flex-direction: column;
  gap: 20px;
  height: 100%;
}
.our-solutions .our-solutions-cards .our-solutions-card .text {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.our-solutions .our-solutions-cards .our-solutions-card .text h3 {
  font-size: clamp(15px, 3vw, 20px);
  font-weight: bold;
}
.our-solutions .our-solutions-cards .our-solutions-card .text p {
  color: rgba(229, 229, 229, 1);
  font-size: clamp(13px, 3vw, 16px);
  font-weight: 300;
}

/******************** Start Animation ********************/
.our-solutions .image-ai {
  height: 100%;
  position: relative;
  bottom: -45px;
  position: relative;

  perspective: 1000px;
  transform-style: preserve-3d;
}
.our-solutions .image-ai .images-box {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}
.our-solutions .image-ai .images-box .head {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 75%;
  height: auto;
  top: -100px;

  opacity: 0;
}
.our-solutions .image-ai .images-box .head.animate {
  animation: headRise 2.5s ease forwards;
}
@keyframes headRise {
  0% {
    opacity: 0;
    transform: translate(-50%, 50%);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -90px);
  }
}

.our-solutions .image-ai .poles-orbit {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}
.our-solutions .image-ai .poles-orbit.orbit-1 {
  animation: orbit 12s linear infinite;
}
@keyframes orbit {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(360deg);
  }
}
.our-solutions .image-ai .poles-orbit.orbit-2 {
  animation: orbit 12s linear infinite;
  animation-delay:2s;
}

.our-solutions .image-ai .poles-orbit.orbit-3 {
  animation: orbit 12s linear infinite;
  animation-delay:4s;
}
.our-solutions .image-ai .images-box .light-box {
  position: absolute;
  width: 100%;
  height: auto;
  left: 50%;
  opacity: 1;
  bottom: 62%;
  transform: translate(-50%);
}
.our-solutions .image-ai .images-box .light-box,
.our-solutions .image-ai .images-box .dots-light {
  animation: fadeInOut 4s ease-in-out infinite;
  transform-style: preserve-3d;
}
.our-solutions .image-ai .images-box .dots-light {
  position: absolute;
  width: 60%;
  height: auto;
  top: -40%;
  left: 50%;
  transform: translateX(-50%);
  z-index: -1;
  opacity: 0;
}
@keyframes fadeInOut {
  0%,
  100% {
    opacity: 0;
  }
  25%,
  75% {
    opacity: 0.7;
  }
  50% {
    opacity: 1;
  }
}
.our-solutions .image-ai .images-box .light-pole {
  position: absolute;
  width: 50px;
  height: auto;

  transform-style: preserve-3d;
  animation: unrotate 12s linear infinite;
}

.our-solutions .image-ai .images-box .poles-orbit.orbit-2 .light-pole {
  animation: unrotate 12s linear infinite;
  animation-delay:2s;
  opacity: 0;
}
.our-solutions .image-ai .images-box .poles-orbit.orbit-3 .light-pole {
  animation: unrotate 12s linear infinite;
  animation-delay:4s;
  opacity: 0;
}

@keyframes unrotate {
  from {
    opacity: 1;
    transform: rotateY(0deg);
  }
  to {
    opacity: 1;
    transform: rotateY(-360deg);
  }
}

.our-solutions .image-ai .images-box .light-pole.pole-left {
  bottom: 15%;
  left: -20px;
}
.our-solutions .image-ai .images-box .light-pole.pole-right {
  bottom: 15%;
  right: -20px;
}
/******************** End Animation ********************/

.our-solutions .our-solutions-cards .our-solutions-card {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  padding: 24px;
  background: rgba(255, 255, 255, 0.02);

  transform: perspective(1000px) translateY(0) scale(1);
  transition:
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.5s ease,
    background 0.5s ease;
}
.our-solutions .our-solutions-cards .our-solutions-card:hover {
  transform: perspective(1000px) translateY(-12px) scale(1.025);
  box-shadow:
    0 20px 60px rgba(0, 200, 255, 0.15),
    inset 0 0 0 1px rgba(0, 200, 255, 0.15);
  background: rgba(255, 255, 255, 0.04);
}

.our-solutions .our-solutions-cards .our-solutions-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 18px;
  padding: 1px;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(0, 200, 255, 0.5),
    transparent
  );

  opacity: 0;
  transition: opacity 0.4s ease;

  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.our-solutions .our-solutions-cards .our-solutions-card:hover::before {
  opacity: 1;
}
.our-solutions .our-solutions-cards .our-solutions-card .icon-img {
  transform: translateY(0);
  transition:
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.4s ease;
}
.our-solutions .our-solutions-cards .our-solutions-card:hover .icon-img {
  transform: translateY(-6px) scale(1.08);
  filter: drop-shadow(0 10px 20px rgba(0, 200, 255, 0.25));
}
.our-solutions .our-solutions-cards .our-solutions-card .text {
  transform: translateY(6px);
  transition: transform 0.4s ease;
}

.our-solutions .our-solutions-cards .our-solutions-card:hover .text {
  transform: translateY(0);
}

.our-solutions .our-solutions-cards .our-solutions-card:hover h3 {
  color: rgba(0, 200, 255, 1);
}

.our-solutions .our-solutions-cards .our-solutions-card:hover p {
  color: #fff;
}

/*! ==================== Our-Solutions Section ==================== */
.our-solutions-sec .row {
  padding-top: 50px;
  /* height: calc(100vh - 170px); */
  margin-bottom: 80px;
}
/* .our-solutions-sec .main-title {
  padding-top: 60px;
} */
.our-solutions-sec .solution-card {
  border-radius: 15px;
  padding: 30px 15px;
  height: 100%;
  color: var(--white-color);
  display: flex;
  flex-direction: column;
  gap: 25px;
  position: relative;
  overflow: hidden;
}
.our-solutions-sec .solution-card * {
  z-index: 9;
}
.our-solutions-sec .solution-card.move {
  background: linear-gradient( 83deg, rgba(116, 72, 209, 0), rgb(128 92 205 / 63%));
  border: 2px solid rgba(128, 92, 205, 1);
  overflow: auto;

  scrollbar-width: none;
  -ms-overflow-style: none;
}
.our-solutions-sec .solution-card.move .card-content ul {
  padding-right: 20px;
}
.our-solutions-sec .solution-card.move::before {
  content: "";
  position: absolute;
  width: 150px;
  height: 150px;
  background: radial-gradient( circle, rgba(128, 92, 205, 1) 0%, rgba(255, 0, 0, 0) 70%);
  border-radius: 50%;
  bottom: -10%;
  left: -7%;
  filter: blur(20px);
  z-index: -1;
}
.our-solutions-sec .solution-card.system {
  background-image: linear-gradient( 135deg, rgba(0, 179, 248, 0.1), rgb(47 194 250 / 76%));
  box-shadow: -1px -1px 0 rgb(47 194 250 / 76%), 1px 1px 0 rgb(47 194 250 / 76%);
}
.our-solutions-sec .solution-card.system::after {
  content: "";
  position: absolute;
  background-image: url("../assets/images/system-icon.svg");
  background-repeat: no-repeat;
  width: 50%;
  height: 35%;
  bottom: 0;
  left: 30px;
}
.our-solutions-sec .solution-card.marketing {
  background-image: linear-gradient( 110deg, rgba(255, 55, 16, 0), rgb(255 55 16 / 38%));
  box-shadow: -1px -1px 0 rgb(255 55 16 / 60%), 1px 1px 0 rgb(255 55 16 / 60%);
}
.our-solutions-sec .solution-card.marketing::after {
  content: "";
  position: absolute;
  background-image: url("../assets/images/marketing-icon.svg");
  background-repeat: no-repeat;
  width: 50%;
  height: 35%;
  bottom: 0;
  left: 30px;
}
.our-solutions-sec .solution-card h3 {
  font-size: clamp(20px, 3.5vw, 30px);
  font-weight: 700;
}
.our-solutions-sec .solution-card.system h3 {
  color: rgba(200, 240, 255, 1);
}
.our-solutions-sec .solution-card.marketing h3 {
  color: rgba(255, 238, 234, 1);
}
.our-solutions-sec .solution-card p {
  font-size: clamp(12px, 3vw, 18px);
  color: rgba(250, 250, 250, 1);

  max-height: 80%;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.our-solutions-sec .solution-card .card-content {
  background-color: rgba(116, 72, 209, 0.1);
  color: var(--white-color);
  padding: 20px;
  border-radius: 10px;

  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: -1px -1px 0 rgba(128, 92, 205, 90%), 1px 1px 0 rgba(128, 92, 205, 90%);
}
.our-solutions-sec .solution-card .card-content h4 {
  font-size: 16px;
  font-weight: 700;
}
.our-solutions-sec .solution-card .card-content ul {
  list-style: disc;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.our-solutions-sec .solution-card .card-content ul li {
  font-size: 14px;
  color: rgba(250, 250, 250, 1);
  position: relative;
}
/* .our-solutions-sec .solution-card .card-content ul li::before {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: var(--white-color);
  border-radius: 50%;
} */

/*! ==================== Smart Apps Section ==================== */
.smart-apps-sec .row {
  padding-top: 60px;
}
.smart-apps-sec .details {
  color: var(--white-color);
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-left: 70px;
}
.smart-apps-sec .details .badge {
  width: fit-content;
  background-color: rgba(0, 179, 248, 0.25);
  margin: 0;
}
.smart-apps-sec .details h3 {
  color: var(--white-color);
  font-size: clamp(20px, 6vw, 45px);
  font-weight: 700;
}
.smart-apps-sec .details .group-btn {
  display: flex;
  align-items: center;
  gap: 20px;
}
.smart-apps-sec .details .group-btn .main-btn-inner {
  font-size: clamp(5px, 2vw, 16px);
}

.smart-apps-sec .info-card {
  color: var(--white-color);
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
  border-right: 2px solid var(--main-color);

  position: relative;
  overflow: hidden;
  transition:
    transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
    0.35s ease;
  border-radius: 10px 0 0 10px;
  height: 100%;
}
.smart-apps-sec .info-card h5 {
  font-size: clamp(16px, 3vw, 20px);
  font-weight: 600;
}
.smart-apps-sec .info-card p {
  font-size: 14px;
  font-size: 400;
  color: rgba(250, 250, 250, 1);
}

/* Hover Card */
.smart-apps-sec .info-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    160deg,
    rgba(11, 154, 222, 0.18) 0%,
    transparent 60%
  );
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.smart-apps-sec .info-card::after {
  content: "";
  position: absolute;
  right: -2px;
  top: -40%;
  width: 2px;
  height: 40%;
  background: linear-gradient(to bottom, transparent, #fff, transparent);
  opacity: 0;
  pointer-events: none;
}
.smart-apps-sec .info-card:hover {
  transform: translateY(-6px) translateX(-3px);
  background: rgba(11, 154, 222, 0.07);
  border-color: rgba(11, 154, 222, 1);
  box-shadow:
    4px 0 0 0 rgba(11, 154, 222, 0.25),
    0 16px 32px rgba(0, 0, 0, 0.3);
}
.smart-apps-sec .info-card:hover::before {
  opacity: 1;
}
.smart-apps-sec .info-card:hover::after {
  opacity: 1;
  animation: borderSweep 0.6s ease forwards;
}
.smart-apps-sec .info-card:hover h5 {
  color: var(--main-color);
}
@keyframes borderSweep {
  0% {
    top: -40%;
    opacity: 0.8;
  }
  100% {
    top: 130%;
    opacity: 0;
  }
}

/*! ==================== How-to-Build-Apps Section ==================== */
.how-to-build-apps .row {
  padding-top: 50px;
  margin-bottom: 50px;
}
.how-to-build-apps .row.row2 .col-md-4:nth-child(1):nth-child(1) .item{
  position: relative;
}
.how-to-build-apps .row.row2 .col-md-4:nth-child(1) .item:before{
  content: "";
  position: absolute;
  top: 0;
  right: -20%;
  width: 40%;
  height: 140%;
  z-index: -1;
  border-right: none;
  background-color: var(--black-color);
  background-image:none;
  box-shadow: none;

}
.how-to-build-apps .tech-card {
  height: 100%;
  border-radius: 10px;
  color: var(--white-color);
  padding: 30px;
  box-shadow:
    -1px -1px 0 #00b2f88f,
    1px 1px 0 #00b2f88f;
  background-image: linear-gradient(
    135deg,
    rgba(0, 179, 248, 0.1),
    rgba(6, 63, 117, 1)
  );
  background-size: 400% 400%;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}
.how-to-build-apps .tech-card::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    circle,
    rgb(47 194 250 / 53%) 0%,
    rgba(255, 0, 0, 0) 70%
  );
  border-radius: 50%;
  bottom: -5%;
  left: 0;
  transform: translateX(-50%);
  filter: blur(20px);
  z-index: -1;
}
.how-to-build-apps .tech-card::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    circle,
    rgb(47 194 250 / 53%) 0%,
    rgba(255, 0, 0, 0) 70%
  );
  border-radius: 50%;
  top: -5%;
  right: 0;
  transform: translateX(50%);
  filter: blur(20px);
  z-index: -1;
}
.how-to-build-apps .tech-card .title {
  display: flex;
  align-items: center;
  gap: 10px;
}
.how-to-build-apps .tech-card .title img {
  width: 20px;
  height: 20px;
}
.how-to-build-apps .tech-card .title h4 {
  font-size: clamp(14px, 3vw, 24px);
}
.how-to-build-apps .tech-card ul.desc {
  list-style: disc;
  position: relative;
  margin: 0 20px 0 40px;
  padding-right: 45px;
}
.how-to-build-apps .tech-card ul.not-dots {
  list-style: none;
  padding-right: 20px;
}
.how-to-build-apps .tech-card ul.desc li {
  font-size: clamp(12px, 3vw, 18px);
  font-weight: 400;
}
.how-to-build-apps .tech-card .technologies {
  display: flex;
  align-items: center;
  gap: 25px;
  flex-wrap: wrap;
}
.how-to-build-apps .tech-card .technologies img {
  width: 90px;
  height: 90px;
}
.how-to-build-apps .tech-card ul.desc::before {
  content: "";
  position: absolute;
  width: 1px;
  height: 100%;
  background-color: var(--main-color);
  right: 0;
  top: 0;
  /* animation: drawErase 2.4s cubic-bezier(0.4, 0, 0.2, 1) infinite; */
  animation: drawLineProfessional 3.2s cubic-bezier(0.23, 1, 0.32, 1) infinite;
}
.how-to-build-apps .tech-card ul.desc::after {
  content: "";
  position: absolute;
  width: 5px;
  height: 5px;
  background-color: var(--main-color);
  border-radius: 50%;
  right: -2px;
  bottom: 0;

  /* animation: dotLife 2.4s ease-in-out infinite; */
  animation: dotGlowTravel 3.2s cubic-bezier(0.23, 1, 0.32, 1) infinite;
  z-index: 2;
}

@keyframes drawErase {
  0% {
    height: 0%;
    top: 0%;
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  45% {
    height: 100%;
    top: 0%;
    opacity: 1;
  }
  50% {
    height: 100%;
    top: 0%;
    opacity: 1;
  }
  95% {
    height: 0%;
    top: 100%;
    opacity: 1;
  }
  100% {
    height: 0%;
    top: 100%;
    opacity: 0;
  }
}

@keyframes dotLife {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  44% {
    opacity: 0;
    transform: scale(0);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
  70% {
    opacity: 1;
    transform: scale(2.2);
  }
  90% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0);
  }
}

/* @keyframes drawFromBottom {
  0% {
    height: 0%;
    top: 100%;
  }
  50% {
    height: 100%;
    top: 0;
  }
  100% {
    height: 0%;
    top: 0;
  }
}
@keyframes dotMoveUp {
  0% {
    bottom: 0;
    opacity: 0.4;
    box-shadow: 0 0 4px var(--main-color);
  }
  50% {
    bottom: 100%;
    opacity: 1;
    box-shadow: 0 0 12px var(--main-color), 0 0 20px var(--main-color);
  }
  100% {
    bottom: 0;
    opacity: 0.4;
    box-shadow: 0 0 4px var(--main-color);
  }
} */

/* @keyframes drawErase {
  0% {
    height: 0%;
    top: 0;
  }
  50% {
    height: 100%;
    top: 0;
  }
  100% {
    height: 0%;
    top: 100%;
  }
}

@keyframes dotLife {
  0% {
    bottom: 100%;
    opacity: 1;
  }
  50% {
    bottom: 0;
    opacity: 1;
  }
  100% {
    bottom: 100%;
    opacity: 0.3;
  }
} */

@keyframes drawLineProfessional {
  0% {
    height: 0%;
    top: 100%;
    opacity: 0.6;
  }
  40% {
    height: 100%;
    top: 0;
    opacity: 1;
  }
  70% {
    height: 100%;
    top: 0;
    opacity: 1;
  }
  100% {
    height: 0%;
    top: 0;
    opacity: 0.6;
  }
}

@keyframes dotGlowTravel {
  0% {
    bottom: 0%;
    opacity: 0.7;
    box-shadow:
      0 0 6px var(--main-color),
      0 0 12px var(--main-color);
    transform: scale(1);
  }
  50% {
    bottom: 100%;
    opacity: 1;
    box-shadow:
      0 0 10px var(--main-color),
      0 0 25px var(--main-color),
      0 0 40px rgba(var(--main-color-rgb, 0, 255, 100), 0.6);
    transform: scale(1.15);
  }
  100% {
    bottom: 0%;
    opacity: 0.7;
    box-shadow:
      0 0 6px var(--main-color),
      0 0 12px var(--main-color);
    transform: scale(1);
  }
}

.how-to-build-apps .tech-card .icon {
  width: 80px;
  height: 80px;
  padding: 10px;
  margin: auto;
  margin-bottom: 20px;
  background-color: rgba(0, 179, 248, 0.05);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
}


/*! ==================== manage-projects Section ==================== */
.manage-projects {
  color: var(--white-color);
  overflow-x: hidden;
}
.manage-projects .main-title {
  padding-top: 0;
  width: 100%;
  height: 100%;
}
.manage-projects .main-title p {
  width: 85%;
}
.manage-projects .row {
  position: relative;
  margin-bottom: 90px;
}
.manage-projects .tech-features {
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: relative;
  padding-inline: 20px;
}
.manage-projects .tech-features .tech-feature {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* Start Vertical Line */
.manage-projects .vertical-line {
  position: absolute;
  top: 0;
  height: 100%;
  width: 2px;
  border-radius:  50px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  background-image: linear-gradient( to bottom, transparent,rgba(11, 154, 222, 0.8),
    transparent
  );

  background-size: 100% 50%;
  background-repeat: no-repeat;
  animation: lineFlow 1.5s ease-in-out infinite;
}
.manage-projects .vertical-line.left-line {
  left: 33%;
}
.manage-projects .vertical-line.right-line {
  right: 33%;
}
.manage-projects .vertical-line .icon {
  width: 20px;
  height: 20px;
  background-color: var(--main-color);
  color: var(--white-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3px;
  box-shadow: 0 0 10px rgba(11, 154, 222, 0.5);
  animation: iconGlow 2s ease-in-out infinite;
}

/*? ************ Animation ************/
@keyframes iconGlow {
  0%,
  100% {
    box-shadow: 0 0 10px rgba(11, 154, 222, 0.5);
    transform: scale(1);
  }
  50% {
    box-shadow:
      0 0 8px rgba(11, 154, 222, 0.9),
      0 0 20px rgba(11, 154, 222, 0.5),
      0 0 36px rgba(11, 154, 222, 0.2);
    transform: scale(1.18);
  }
}
/* ****************** Start *******************/
@keyframes lineFlow {
  0% {
    background-position: 0 -100%;
  }
  100% {
    background-position: 0 200%;
  }
}
/******************* End *******************/

/* ****************** Start *******************/
/* @keyframes linePulse {
  0% { background-image: linear-gradient(to bottom, transparent, rgba(11, 154, 222, 0), transparent); }
  50% { background-image: linear-gradient(to bottom, transparent, rgba(11, 154, 222, 1), transparent); }
  100% { background-image: linear-gradient(to bottom, transparent, rgba(11, 154, 222, 0), transparent); }
}
.manage-projects .vertical-line {
  animation: linePulse 2s ease-in-out infinite;
}
.manage-projects .vertical-line.right-line {
  animation-delay: 1s;
} */
/******************* End *******************/

/* ****************** Start *******************/
/* @keyframes linePulse {
  0%, 100% { opacity: 0.2; }
  50%       { opacity: 1;   }
}
.manage-projects .vertical-line {
  background-image: linear-gradient(
    to bottom,
    transparent,
    rgba(11, 154, 222, 0.8),
    transparent
  );
  animation: linePulse 2s ease-in-out infinite;
}
.manage-projects .vertical-line.right-line {
  animation-delay: 1s;
} */
/******************* End *******************/
/* End Vertical Line */

.manage-projects .desc {
  font-size: clamp(20px, 5vw, 32px);
  font-weight: 700;
}
.manage-projects .tech-feature h5 {
  font-size: clamp(16px, 4vw, 24px);
  font-weight: 600;
}
.manage-projects .tech-feature p {
  font-weight: 400;
}

/*! ==================== Projects ==================== */
/* .projects .main-title {
  padding-top: 60px;
} */
.projects .nav-pills {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 70%;
  margin: 50px auto;
  background-color: rgba(0, 0, 0, 1);
  border-radius: 50px;
  padding: 5px;
  box-shadow: 0 0 7px var(--main-color);
}
.projects .nav-pills .nav-link {
  color: var(--white-color);
  font-size: clamp(9px, 2vw, 16px);
  border-radius: 20px;
  transition: 0.3s;
  background-color: transparent;
  padding-inline: 30px;
}
.projects .nav-pills .nav-link.active {
  background: var(--main-color);
  box-shadow: 0 4px 16px var(--main-color);
}
.projects .project-card {
  border-radius: 10px;
  transition: .1s;
}
.projects .project-card figure {
  position: relative;
}
.projects .project-card figure img {
  border-radius: 10px;
}
.projects .project-card figure figcaption {
  background-color: rgba(6, 63, 117, 0.5);
  backdrop-filter: blur(10px);

  /* background-image: url("../assets/images/bg-card.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain; */

  color: var(--white-color);
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  flex-direction: column;
  gap: 10px;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 30px;
  border-radius: 20px 20px 0 0;
  height: 30%;
  transition: .5s;
}
/* .projects .project-card figure figcaption::before {
  content: "";
  position: absolute;
  background-color: transparent;
  top: -60px;
  left: 0;
  height: 60px;
  width: 95%;
  transition: bottom 0.3s ease;
  border-bottom-left-radius: 20px;
  box-shadow: 0 30px 0 0 rgba(6, 63, 117, 0.5);
} */

.projects .project-card:hover {
  box-shadow: 0px 2px 2px var(--main-color);
  border: solid 1px var(--main-color);
}
.projects .project-card:hover figure figcaption {
  height: 50%;
}
.projects .project-card figure figcaption h4 {
  font-size: clamp(16px, 4vw, 24px);
}
.projects .project-card figure figcaption p {
  font-size: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
.projects .project-card figure figcaption .main-btn {
  opacity: 0;
  transform: translateY(20px);
  transition: .4s;
}
.projects .project-card:hover figure figcaption .main-btn {
  opacity: 1;
  transform: translateY(0);
}

/*! ==================== Projects Details ==================== */
.project-details {
  background-image: url("../assets/images/bg-blue.svg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  overflow: hidden;
}
/* .project-details .main-title {
  padding-top: 80px;
} */


.project-details .container-data {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.project-details .image-project-details {
  margin: 0px auto;
  margin-bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 70%;
  transform: translateY(5%);
  height: 500px;
}
.project-details .image-project-details img {
  width: calc(100% / 3);
  object-fit: contain;
}
.project-details .image-project-details img.right {
  transform: rotate(28deg) translate(20px, 30px);
  animation: floatRight 4s ease-in-out infinite;
}
.project-details .image-project-details img.center {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 20px);
  z-index: 3;
  animation: floatCenter 3s ease-in-out infinite;
}
.project-details .image-project-details img.left {
  transform: rotate(-28deg) translate(-20px, 30px);
  animation: floatLeft 4s ease-in-out infinite;
}

@keyframes floatRight {
  0% {
    transform: rotate(28deg) translate(20px, 30px);
  }
  50% {
    transform: rotate(32deg) translate(30px, 10px);
  }
  100% {
    transform: rotate(28deg) translate(20px, 30px);
  }
}

@keyframes floatLeft {
  0% {
    transform: rotate(-28deg) translate(-20px, 30px);
  }
  50% {
    transform: rotate(-32deg) translate(-30px, 10px);
  }
  100% {
    transform: rotate(-28deg) translate(-20px, 30px);
  }
}

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

/*! ==================== Projects Details-images ==================== */
.project-details-images,
.mobile-App-sec {
  background-image: url("../assets/images/bg-blue.svg");
  background-position: center;
  background-size: cover;
}
.project-details-images .image-project-details .image {
  height: 500px;
  transition: transform 4s ease-in-out;
  animation: floatAlternate 5s ease-in-out infinite;
}
.project-details-images .image-project-details .image img {
  border-radius: 20px;
  object-fit: contain;
}
.project-details-images .image-project-details .col-md-3:nth-child(1) {
  transform: translateY(20px);
}
.project-details-images .image-project-details .col-md-3:nth-child(2) {
  transform: translateY(-20px);
}
.project-details-images .image-project-details .col-md-3:nth-child(3) {
  transform: translateY(20px);
}
.project-details-images .image-project-details .col-md-3:nth-child(4) {
  transform: translateY(-20px);
}
.project-details-images .group-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  margin-block: 70px;
}
.project-details-images .group-btn .main-btn {
  width: 180px;
}
.project-details-images .group-btn .main-btn .main-btn-text {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
.project-details-images .group-btn .main-btn img,
.project-details-images .group-btn .main-btn svg {
  width: 20px;
  height: 20px;
  transition: .5s;
}

/*  Animation */
.project-details-images .image-project-details .col-md-3:nth-child(2) .image,
.project-details-images .image-project-details .col-md-3:nth-child(4) .image {
    animation-direction: alternate-reverse;
    animation-delay: -3s;
}
@keyframes floatAlternate {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-35px);
    }
}
/*! ==================== Mobile-App Section ==================== */
.mobile-App-sec .mobile-App-image {
  width: 40%;
  margin: auto;
  margin-top: 80px;
  transform: translateY(10%);
  height: 700px;
}
.desctop-App-sec .desctop-image,
.desctop-App-sec .desctop-and-mobile-image {
  width: 70%;
  margin: auto;
  margin-top: 70px;
}

/*! ==================== Working Section-2 ==================== */
.working-sec2 .workflow-step {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
}
.working-sec2 .workflow-step:not(.not-arrow)::before {
  content: "";
  position: absolute;
  height: 3px;
  width: 70%;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  background-image: linear-gradient(90deg, transparent 0%, var(--main-color) 30%, #00b2f8 50%, var(--main-color) 70%, transparent 100%);
  background-size: 200% 100%;
  animation: flowLine 4s linear infinite  reverse;
  box-shadow: 0 0 12px rgba(0, 178, 248, 0.7);
}
@keyframes flowLine {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}
.working-sec2 .workflow-step:not(.not-arrow)::after {
  content: "";
  position: absolute;
  top: 15px;
  left: 13%;
  border-width: 7px;
  border-style: solid;
  border-color: transparent var(--main-color) transparent transparent;
  animation: arrowPulse 2.8s ease-in-out infinite;
  filter: drop-shadow(0 0 8px var(--main-color));
}
.working-sec2 .row2 .workflow-step::before {
  background-image: linear-gradient(90deg, transparent 0%, var(--main-color) 30%, #00b2f8 50%, var(--main-color) 70%, transparent 100%);
  background-size: 200% 100%;
  animation: flowLine 4s linear infinite;
  box-shadow: 0 0 12px rgba(0, 178, 248, 0.7);
}
@keyframes arrowPulse {
  0%, 100% {
    transform: translateX(0) scale(1);
    opacity: 0.85;
  }
  50% {
    transform: translateX(6px) scale(1.12);
    opacity: 1;
  }
}
.working-sec2 .row2 .workflow-step::after {
  left: unset;
  border-color: transparent transparent transparent var(--main-color);
  right: 13%;
}
.working-sec2 .workflow-step:nth-child(1),
.working-sec2 .workflow-step:nth-child(2) {
  padding-left: 70px;
}
.working-sec2 .workflow-step.two {
  border-radius: 200px;
  position: relative;
}

.working-sec2 .workflow-step.two::before {
  content: "";
  position: absolute;
  top: 15px;
  left: 0;
  width: calc(100% - 63px);
  height: calc(100% + 30px);
  border-radius: 200px 0 0 200px;
  z-index: -1;
  background: linear-gradient(90deg, transparent 0%, var(--main-color) 30%, #00b2f8 50%, var(--main-color) 70%, transparent 100%);
  background-size: 200% 100%;
  padding: 3px;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  clip-path: inset(0% 2% 0 0);
  animation: flowLine 3s linear infinite  reverse;
}
.working-sec2 .workflow-step.three {
  position: relative;
}
.working-sec2 .workflow-step.three::after {
  content: "";
  position: absolute;
  width: 70%;
  height: 50px;
  background-color: var(--black-color);
  box-shadow: none;
  z-index: -1;
  right: -40%;
  top: 0;
}

.working-sec2 .workflow-step .num {
  background-image: linear-gradient(to left, rgba(0, 179, 248, 1), rgba(11, 154, 222, 1), rgba(15, 130, 195, 1), rgba(6, 63, 117, 1));
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: transparent;
  border-radius: 50%;
  font-weight: bold;
  font-size: 22px;
  -webkit-text-stroke: 0.3px var(--white-color);
}
.working-sec2 .workflow-step h3 {
  color: var(--main-color);
  font-size: clamp(16px, 4vw, 24px);
  font-weight: 600;
}
.working-sec2 .workflow-step p {
  color: var(--white-color);
}
  /*! ==================== Request form ==================== */
.request-form {
  background-image: url("../assets/images/bg-blue.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.request-form .form-container {
  box-shadow: -1px -1px 0 #00b2f88f, 1px 1px 0 #00b2f88f;
  background-image: linear-gradient(to top, rgb(0 183 255 / 25%), rgba(0, 0, 0, 0.25), rgba(0, 5, 7, 0.25));
  border-radius: 10px;
  margin-top: 80px;
}
.request-form .form-container .main-title {
  padding-block: 30px 20px;
}
.request-form .form-container .main-btn {
  width: fit-content;
  margin: 20px auto;
}
.request-form .form-container form {
  padding: 20px;
}
.request-form .form-container .input-group input,
.request-form .form-container .input-group textarea,
.request-form .form-container .input-group select,
.request-form .form-container .upload-btn,
.request-form .form-container .selected{
  width: 100%;
  background-color: transparent;
  border: 1px solid #00b3f85c;
  border-radius: 10px !important;
  padding: 10px;
  color: var(--main-color);
}
.request-form .form-container .input-group textarea {
  height: 120px;
  resize: none;
}
.request-form .form-container .input-group input::placeholder,
.request-form .form-container .input-group select::placeholder,
.request-form .form-container .input-group textarea::placeholder,
.request-form .form-container .input-group select,
.request-form .form-container .selected,
.request-form .form-container .option {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.563);
  font-weight: bold;
}
.request-form .form-container .input-group input[type="tel"] {
  text-align: end;
}

/* Upload Input */
.request-form .form-container .file-upload {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.request-form .form-container .upload-btn {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border-radius: 30px;
  cursor: pointer;
  width: 100%;
  color: rgba(255, 255, 255, 1);
  font-size: 14px;
  background-image: linear-gradient(45deg, rgb(0 179 248 / 0%), rgb(11 154 222 / 3%), rgb(15 130 195 / 44%), rgb(6 63 117 / 26%));
}
.request-form .form-container .upload-btn img {
  width: 150px;
}
.request-form .form-container .file-name {
  font-size: 14px;
  color: var(--white-color);
}
/* custom-dropdown Input */
.request-form .form-container .custom-dropdown {
  position: relative;
  width: 100%;
  cursor: pointer;
}
.request-form .form-container .selected {
  display: flex;
  align-items: center;
  gap: 10px;
}
.request-form .form-container .selected img,
.request-form .form-container .option img {
  width: 30px;
  border-radius: 5px;
}
.request-form .form-container .dropdown {
  position: absolute;
  top: 110%;
  width: 100%;
  background: #111;
  border-radius: 10px;
  display: none;
  overflow: hidden;
  z-index: 10;
}

/* Select Input */
.custom-select-box,
.request-form .form-container .custom-dropdown .selected {
  position: relative;
}
.custom-select-box .arrow-bottom,
.request-form .form-container .custom-dropdown .selected .arrow-bottom {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255, 255, 255, 0.563);
  font-size: 12px;
}
.request-form .form-container .input-group select {
  appearance: none;
}
.request-form .form-container .option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px;
  cursor: pointer;
}
.request-form .form-container .option:hover {
  background: rgba(0, 183, 255, 0.2);
}










/********************************* Start Nour-css *********************************/
/*! ==================== Loading Page ==================== */
.loading-Page {
  background: #000;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  inset: 0;
  z-index: 9999;
  transition: 0.8s ease;
}
.bg-pages .bg-loading-page {
  background-image: url("../assets/images/preload/div.webp");
  background-size: contain;
  background-repeat: no-repeat;
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  /* animation: dotsMove 8s linear; */
}
@keyframes dotsMove {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: 200px 200px;
  }
}

.loading-Page.hide {
  opacity: 1;
  transform: translateY(-100%);
  pointer-events: none;
}

.images {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 30px;
  position: relative;
}

.loading-Page .images {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 120px;
  position: relative;
}
.mask-Logo-2,
.mask-Logo-1 {
  position: absolute;
  width: 80px;
}
.mask-Logo-2 {
  right: -10px;
  bottom: -35px;
}
.mask-Logo-1 {
  /* left: -5px;
    top: -30px;
    transform: rotate(15deg); */

  left: -5px;
  top: -45px;
}
.mark-Logo {
  /* height: 120px; */
  height: 150px;
}

.mask-Logo-1,
.mask-Logo-2,
.mark-Logo,
.text-Logo {
  opacity: 0;
}
.start .mark-Logo {
  animation: logoReveal 3s ease forwards;
  animation-delay: 2.5s;
}
@keyframes logoReveal {
  0% {
    opacity: 0;
    transform: scale(0);
    filter: blur(10px);
  }

  75% {
    transform: scale(1.1);
  }
  100% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
}
.start .mask-Logo-1 {
  animation: maskEnterLeft 0.9s ease forwards;
  animation-delay: 2.5s;
}
.start .mask-Logo-2 {
  animation: maskEnterRight 0.9s ease forwards;
  animation-delay: 2.5s;
}
@keyframes maskEnterLeft {
  0% {
    opacity: 0;
    transform: translateX(-80px) rotate(-90deg);
  }
  60% {
    transform: translateX(10px) rotate(10deg);
  }
  100% {
    opacity: 1;
    transform: translateX(0) rotate(0);
  }
}
@keyframes maskEnterRight {
  0% {
    opacity: 0;
    transform: translateX(80px) rotate(90deg);
  }
  60% {
    transform: translateX(-10px) rotate(-10deg);
  }
  100% {
    opacity: 1;
    transform: translateX(0) rotate(0);
  }
}

.start .text-Logo {
  position: relative;
  overflow: hidden;
  opacity: 0;
  animation: textTypewriter 2s steps(28) forwards 3s;
}

.loading-Page.start .text-Logo::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.7),
    transparent
  );
  transform: translateX(-150%);
  animation: shine 2.5s ease-in-out infinite 3.2s;
  pointer-events: none;
}

@keyframes textTypewriter {
  from {
    clip-path: inset(0 100% 0 0);
  }

  to {
    opacity: 1;
    clip-path: inset(0 0 0 0);
  }
}

@keyframes shine {
  0% {
    transform: translateX(-150%);
  }

  40% {
    transform: translateX(250%);
  }

  100% {
    transform: translateX(250%);
  }
}

.loadin-container {
  display: flex;
  position: relative;

  overflow: hidden;
  padding: 50px 20px;
  height: 100%;
  align-items: center;
}

.loader-wrapper {
  font-size: 70px;
  letter-spacing: 10px;
  font-weight: bold;
  letter-spacing: 5px;
  display: flex;
  flex-direction: row-reverse;
}
.start .loader-letter {
  color: #fff;
  opacity: 0;
  transform: translateY(100px) scale(0.5);
  animation: reveal 1s forwards;
  animation-delay: 3s;
}

/* تأخير لكل حرف */
.loader-letter:nth-child(1) {
  animation-delay: .2s;
}

.loader-letter:nth-child(2) {
  animation-delay: .4s;
}

.loader-letter:nth-child(3) {
  animation-delay: .6s;
}

.loader-letter:nth-child(4) {
  animation-delay: .8s;
}

.loader-letter:nth-child(5) {
  animation-delay: 1s;
}

.loader-letter:nth-child(6) {
  animation-delay: 1.2s;
}

@keyframes reveal {
  0% {
    opacity: 0;
    transform: translateY(100px) scale(0.5);
    filter: blur(10px);
  }

  50% {
    opacity: 1;
    transform: translateY(-10px) scale(1.2);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* حركة Glitch خفيفة */
.loader-letter:hover {
  animation: glitch 0.3s infinite;
}

@keyframes glitch {
  0% {
    transform: translate(2px, -2px);
  }

  25% {
    transform: translate(-2px, 2px);
  }

  50% {
    transform: translate(2px, 2px);
  }

  75% {
    transform: translate(-2px, -2px);
  }

  100% {
    transform: translate(0, 0);
  }
}

/* text logo */

/* From Uiverse.io by anand_4957 */
.loader {
  position: absolute;
  top: 75%;
  left: 45%;

  z-index: 11;
  animation: speeder 5s linear infinite;
}

.loader > span {
  height: 5px;
  width: 35px;
  background: #00b3f8;
  position: absolute;
  top: -19px;
  left: -30px;
  border-radius: 2px 10px 1px 0;
}

.base span {
  position: absolute;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-right: 100px solid #00b3f8;
  border-bottom: 6px solid transparent;
}

.base span:before {
  content: "";
  height: 22px;
  width: 22px;
  border-radius: 50%;
  background: #00b3f8;
  position: absolute;
  right: -110px;
  top: -16px;
}

.base span:after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-top: 0 solid transparent;
  border-right: 55px solid #00b3f8;
  border-bottom: 16px solid transparent;
  top: -16px;
  right: -98px;
}

.face {
  position: absolute;
  height: 12px;
  width: 20px;
  background: #00b3f8;
  border-radius: 20px 20px 0 0;
  transform: rotate(-40deg);
  right: -30px;
  top: -15px;
}

.face:after {
  content: "";
  height: 12px;
  width: 12px;
  background: #00b3f8;
  right: 4px;
  top: 7px;
  position: absolute;
  transform: rotate(40deg);
  transform-origin: 50% 50%;
  border-radius: 0 0 0 2px;
}

.loader > span > span:nth-child(1),
.loader > span > span:nth-child(2),
.loader > span > span:nth-child(3),
.loader > span > span:nth-child(4) {
  width: 30px;
  height: 1px;
  background: #00b3f8;
  position: absolute;
  animation: fazer1 0.2s linear infinite;
}

.loader > span > span:nth-child(2) {
  top: 3px;
  animation: fazer2 0.4s linear infinite;
}

.loader > span > span:nth-child(3) {
  top: 1px;
  animation: fazer3 0.4s linear infinite;
  animation-delay: -1s;
}

.loader > span > span:nth-child(4) {
  top: 4px;
  animation: fazer4 1s linear infinite;
  animation-delay: -1s;
}

@keyframes fazer1 {
  0% {
    left: 0;
  }

  100% {
    left: -80px;
    opacity: 0;
  }
}

@keyframes fazer2 {
  0% {
    left: 0;
  }

  100% {
    left: -100px;
    opacity: 0;
  }
}

@keyframes fazer3 {
  0% {
    left: 0;
  }

  100% {
    left: -50px;
    opacity: 0;
  }
}

@keyframes fazer4 {
  0% {
    left: 0;
  }

  100% {
    left: -150px;
    opacity: 0;
  }
}

@keyframes speeder {
  0% {
    transform: translate(2px, 1px) rotate(0deg);
    left: -90px;
  }

  10% {
    transform: translate(-1px, -10px) rotate(-1deg);
    left: 0%;
  }

  20% {
    transform: translate(-2px, 0px) rotate(1deg);
    left: 10%;
  }

  30% {
    transform: translate(1px, 15px) rotate(0deg);
    left: 20%;
  }

  40% {
    transform: translate(1px, -1px) rotate(1deg);
    left: 30%;
  }

  50% {
    transform: translate(-1px, 20px) rotate(-1deg);
    left: 40%;
  }

  60% {
    transform: translate(-1px, 10px) rotate(0deg);
    left: 50%;
  }

  70% {
    transform: translate(3px, -5px) rotate(-1deg);
    left: 60%;
  }

  80% {
    transform: translate(-2px, -1px) rotate(1deg);
    left: 70%;
  }

  90% {
    transform: translate(2px, 1px) rotate(0deg);
    left: 90%;
  }

  100% {
    transform: translate(1px, -8px) rotate(-1deg);
    left: 100%;
    opacity: 0;
  }
}
/*  */

/* ==================== Section ==================== */
/* services section */
/* ==================== BACKGROUND EFFECTS ==================== */
.particle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  animation: particle-float 4s ease-in-out infinite;
}

@keyframes particle-float {
  0%,
  100% {
    transform: translateY(0) translateX(0);
    opacity: 0;
  }

  10% {
    opacity: 1;
  }

  90% {
    opacity: 1;
  }

  100% {
    transform: translateY(-100px) translateX(20px);
    opacity: 0;
  }
}

.orb {
  position: fixed;
  border-radius: 50%;
  filter: blur(120px);
  pointer-events: none;
  z-index: 1;
}

.orb-1 {
  top: 25%;
  left: 25%;
  width: 400px;
  height: 400px;
  background: rgba(59, 130, 246, 0.1);
  animation: orb-pulse 4s ease-in-out infinite;
}

.orb-2 {
  bottom: 25%;
  right: 25%;
  width: 400px;
  height: 400px;
  background: rgba(139, 92, 246, 0.1);
  animation: orb-pulse 4s ease-in-out infinite 1s;
}

.orb-3 {
  top: 50%;
  left: 50%;
  width: 600px;
  height: 600px;
  background: rgba(6, 182, 212, 0.05);
  transform: translate(-50%, -50%);
  animation: orb-spin 20s linear infinite;
}

@keyframes orb-pulse {
  0%,
  100% {
    opacity: 0.1;
    transform: scale(1);
  }

  50% {
    opacity: 0.2;
    transform: scale(1.1);
  }
}

@keyframes orb-spin {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }

  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

.grid-pattern {
  position: fixed;
  inset: 0;
  opacity: 0.03;
  pointer-events: none;
  z-index: 1;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
  background-size: 50px 50px;
}

/* ==================== MAIN SECTION ==================== */
.services-section {
  /* position: relative; */
  /* z-index: 10;
  min-height: 100vh; */
  padding: 80px 20px;
}

.container {
  max-width: 1280px;
  margin: 0 auto;
}

/* ==================== HEADER ==================== */
.header {
  text-align: center;
  margin-bottom: 64px;
  opacity: 0;
  transform: translateY(40px);
  animation: fade-up 0.8s ease forwards;
}

.badge {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 24px;
  animation: badge-glow 2s ease-in-out infinite;
}

@keyframes badge-glow {
  0%,
  100% {
    box-shadow: 0 0 5px rgba(34, 211, 238, 0.3);
  }

  50% {
    box-shadow:
      0 0 20px rgba(34, 211, 238, 0.6),
      0 0 40px rgba(34, 211, 238, 0.3);
  }
}

.badge-icon {
  width: 16px;
  height: 16px;
  color: #22d3ee;
  animation: sparkle 2s ease-in-out infinite;
}

@keyframes sparkle {
  0%,
  100% {
    transform: scale(1) rotate(0deg);
  }

  50% {
    transform: scale(1.2) rotate(180deg);
  }
}

.badge-text {
  color: #d1d5db;
  font-size: 14px;
}

.title {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
  margin-bottom: 24px;
}

.title span {
  display: inline-block;
  opacity: 0;
  transform: translateY(30px) rotateX(-40deg);
  animation: title-reveal 0.8s ease forwards;
}

.title span:nth-child(1) {
  animation-delay: 0.1s;
}

.title span:nth-child(2) {
  animation-delay: 0.2s;
}

.title span:nth-child(3) {
  animation-delay: 0.3s;
}

.title span:nth-child(4) {
  animation-delay: 0.4s;
}

.title span:nth-child(5) {
  animation-delay: 0.5s;
}

@keyframes title-reveal {
  to {
    opacity: 1;
    transform: translateY(0) rotateX(0);
  }
}

.gradient-text {
  background: linear-gradient(90deg, #22d3ee, #3b82f6, #a855f7);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

footer .description {
  color: #ffffff ;
  font-size: 18px;
  max-width: 640px;
  margin: 0 auto;
  line-height: 1.6;
  opacity: 0;
  transform: translateY(20px);
  animation: fade-up 0.8s ease 0.5s forwards;
}

@keyframes fade-up {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==================== CARDS GRID ==================== */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 24px;
}

@media (max-width: 768px) {
  .cards-grid {
    grid-template-columns: 1fr;
  }
}

/* ==================== SERVICE CARD ==================== */
.service-card {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  opacity: 0;
  isolation: isolate;
  transform: translateY(40px);
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);

  transform: scale(1);
  filter: blur(0);
  opacity: 1;
  animation: card-appear 0.7s ease forwards;
}

/* لما تعمل hover على الـ container كله */
.cards-grid:has(.service-card:hover) .service-card {
  opacity: 0.4;
  filter: blur(4px);
  transform: scale(0.95);
}

.cards-grid:has(.service-card:hover) .service-card:hover {
  opacity: 1;
  filter: blur(0);
  transform: scale(1.05);
  z-index: 10;
  box-shadow: 0 25px 50px 12px rgba(0, 212, 255, 0.25);
}

.service-card:nth-child(1) {
  animation-delay: 0.3s;
}

.service-card:nth-child(2) {
  animation-delay: 0.4s;
}

.service-card:nth-child(3) {
  animation-delay: 0.5s;
}

.service-card:nth-child(4) {
  animation-delay: 0.6s;
}

.service-card:nth-child(5) {
  animation-delay: 0.7s;
}

.service-card:nth-child(6) {
  animation-delay: 0.8s;
}

@keyframes card-appear {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.service-card.blurred {
  filter: blur(4px) brightness(0.6);
  transform: scale(0.95);
}

.card-inner {
  position: relative;
  height: 100%;
  /* background: linear-gradient(
    145deg,
    rgba(20, 20, 30, 0.9) 0%,
    rgba(10, 10, 15, 0.95) 100%
  ); */
  border: 1px solid transparent;
  border-radius: 10px;
  background:
    linear-gradient(#000, #000) padding-box,
    linear-gradient(290.87deg, #00b3f8, #00415b) border-box;
  border-radius: 16px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  z-index: 2;
}

/*  Animated Border Pro  */

/* colors لكل كارد */
.service-card:nth-child(1) {
  --card-color: #06b6d4;
}

.service-card:nth-child(2) {
  --card-color: #8b5cf6;
}

.service-card:nth-child(3) {
  --card-color: #3b82f6;
}

.service-card:nth-child(4) {
  --card-color: #ec4899;
}

.service-card:nth-child(5) {
  --card-color: #10b981;
}

.service-card:nth-child(6) {
  --card-color: #f97316;
}

/* icon wrapper backgrounds */
.service-card:nth-child(1) .card-icon-wrapper {
  background: linear-gradient(135deg, #06b6d430 0%, #06b6d410 100%);
}

.service-card:nth-child(2) .card-icon-wrapper {
  background: linear-gradient(135deg, #8b5cf630 0%, #8b5cf610 100%);
}

.service-card:nth-child(3) .card-icon-wrapper {
  background: linear-gradient(135deg, #3b82f630 0%, #3b82f610 100%);
}

.service-card:nth-child(4) .card-icon-wrapper {
  background: linear-gradient(135deg, #ec489930 0%, #ec489910 100%);
}

.service-card:nth-child(5) .card-icon-wrapper {
  background: linear-gradient(135deg, #10b98130 0%, #10b98110 100%);
}

.service-card:nth-child(6) .card-icon-wrapper {
  background: linear-gradient(135deg, #f9731630 0%, #f9731610 100%);
}

/* Card Content */
.card-icon-wrapper {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  transition:
    transform 0.4s ease,
    box-shadow 0.4s ease;
}

.service-card:hover .card-icon-wrapper {
  transform: scale(1.1) rotate(6deg);
}

.card-icon {
  width: 32px;
  height: 32px;
  transition: color 0.3s ease;
}

.card-title {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 4px;
  transition: all 0.3s ease;
}

.service-card:hover .card-title {
  background: linear-gradient(90deg, #fff, var(--card-color));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.card-subtitle {
  font-size: 14px;
  color: #9ca3af;
  margin-bottom: 12px;
}

.card-description {
  color: #6b7280;
  font-size: 14px;
  line-height: 1.6;
  flex-grow: 1;
  margin-bottom: 16px;
  transition: color 0.3s ease;
}

.service-card:hover .card-description {
  color: #9ca3af;
}

.card-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--card-color);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: transform 0.3s ease;
}

.card-button:hover {
  transform: translateX(-4px);
}

.card-button-text {
  position: relative;
}

.card-button-text::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--card-color);
  transition: width 0.3s ease;
}

.card-button:hover .card-button-text::after {
  width: 100%;
}

.card-button-icon {
  width: 16px;
  height: 16px;
  transition: transform 0.3s ease;
}

.card-button:hover .card-button-icon {
  transform: translateX(-4px);
}

/* development section start */

/* ==================== CENTER IMAGE AREA ==================== */
.center-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 60px;
}

/* Hologram Rings */
.hologram-container {
  position: relative;
  width: 400px;
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 768px) {
  .hologram-container {
    width: 280px;
    height: 280px;
  }
}

.hologram-ring {
  position: absolute;
  border-radius: 50%;
  border: 2px solid;
  animation: ring-pulse 3s ease-in-out infinite;
}

.ring-1 {
  width: 100%;
  height: 100%;
  border-color: rgba(0, 212, 255, 0.3);
  animation-delay: 0s;
}

.ring-2 {
  width: 80%;
  height: 80%;
  border-color: rgba(0, 212, 255, 0.2);
  animation-delay: 0.5s;
}

.ring-3 {
  width: 60%;
  height: 60%;
  border-color: rgba(0, 212, 255, 0.1);
  animation-delay: 1s;
}

@keyframes ring-pulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.5;
    border-width: 2px;
  }

  50% {
    transform: scale(1.05);
    opacity: 1;
    border-width: 3px;
  }
}

/* Scan Line */
.scan-line {
  position: absolute;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #00d4ff, transparent);
  animation: scan 2s ease-in-out infinite;
  opacity: 0.8;
}

@keyframes scan {
  0% {
    top: 0;
    opacity: 0;
  }

  10% {
    opacity: 1;
  }

  90% {
    opacity: 1;
  }

  100% {
    top: 100%;
    opacity: 0;
  }
}
/* development section end */
/********************************* End Nour-css *********************************/
/* .swiper-slide {
  height: 100vh;
  overflow: hidden;
}

.section {
  height: 100vh;
  overflow-y: auto;
} */

/* ظظظظظظظظظظظظظظظظظظظظظظظظظ */

/* ==================== Scroll Reveal Animations ==================== */

/* Base state for animated sections */
.section-reveal {
  opacity: 0;
  transform: translateY(60px);
  transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
  will-change: transform, opacity;
}

/* Active state when section is visible */
.section-reveal.active {
  opacity: 1;
  transform: translateY(0);
}

/* Different animation variants */
.section-reveal-left {
  opacity: 0;
  transform: translateX(-80px);
  transition: all 0.9s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.section-reveal-left.active {
  opacity: 1;
  transform: translateX(0);
}

.section-reveal-right {
  opacity: 0;
  transform: translateX(80px);
  transition: all 0.9s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.section-reveal-right.active {
  opacity: 1;
  transform: translateX(0);
}

.section-reveal-scale {
  opacity: 0;
  transform: scale(0.85);
  transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.section-reveal-scale.active {
  opacity: 1;
  transform: scale(1);
}

/* Stagger delays for children elements */
.stagger-1 {
  transition-delay: 0.1s;
}
.stagger-2 {
  transition-delay: 0.2s;
}
.stagger-3 {
  transition-delay: 0.3s;
}
.stagger-4 {
  transition-delay: 0.4s;
}
.stagger-5 {
  transition-delay: 0.5s;
}

/* Stats cards special animation */
.stats-reveal {
  opacity: 0;
  transform: translateY(40px) scale(0.9);
  transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.stats-reveal.active {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Service cards stagger */
.service-card-reveal {
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.service-card-reveal.active {
  opacity: 1;
  transform: translateY(0);
}

/* AI Solutions cards */
.ai-card-reveal {
  opacity: 0;
  transform: translateX(-60px);
  transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.ai-card-reveal.active {
  opacity: 1;
  transform: translateX(0);
}

.ai-card-reveal.right {
  transform: translateX(60px);
}

/* Our Solutions cards */
.solution-card-reveal {
  opacity: 0;
  transform: translateY(50px) rotateX(-15deg);
  transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.solution-card-reveal.active {
  opacity: 1;
  transform: translateY(0) rotateX(0);
}

/* Center image special effect */
.center-image-reveal {
  opacity: 0;
  transform: scale(0.8) rotateY(-20deg);
  transition: all 1s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.center-image-reveal.active {
  opacity: 1;
  transform: scale(1) rotateY(0);
}
/* ظظظظظظظظظظظظظظظظظظظظظظظظظ */