/*
	Theme Name: Four Software
	Theme URI: https://foursw.com/
	Author: تم تصميم وتطوير بواسطة شركة foursw
	Author URI: https://foursw.com/
*/
/*=============== FONT ================*/
@font-face {
  font-family: "Ko Khalaya VF";
  src: url("assets/fonts/KoKhalayaVF.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "DIN Next LT Arabic";
  src: url("assets/fonts/ArbFONTS-DINNEXTLTARABIC-LIGHT-2-2.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "DIN Next LT Arabic";
  src: url("assets/fonts/ArbFONTS-DINNextLTArabic-Regular-2.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "DIN Next LT Arabic";
  src: url("assets/fonts/ArbFONTS-DINNextLTArabic-Medium-2.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "DIN Next LT Arabic";
  src: url("assets/fonts/ArbFONTS-DINNextLTArabic-Bold-2.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "DIN Next LT Arabic";
  src: url("assets/fonts/ArbFONTS-DINNextLTArabic-Black-2.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/*=============== ANIMATION ================*/
@keyframes blink {
  50% {
    border-left-color: transparent;
  }
}

/*=============== VARIABLES CSS ===============*/
:root {
  --header-height: 3.5rem;

  /*========== Colors ==========*/
  /* --primary-1: #4E9FE2;
    --primary-2: #5D87AC;
    --primary-3: #292D32;
    --Secondary-1: #F2F4F7;
    --Secondary-2: #F5C536; */

  /*========== Font and typography ==========*/
  --body-font: "DIN Next LT Arabic", sans-serif;
  --heading-font: "Ko Khalaya VF", sans-serif;
  --heading-size: 62px;
  --h1-font-size: 48px;
  --h2-font-size: 40px;
  --h3-font-size: 32px;
  --button-size: 24px;
  --text-size: 18px;
  --note-size: 14px;

  /*========== Font weight ==========*/
  --font-light: 300;
  --font-regular: 400;
  --font-medium: 500;
  --font-semi-bold: 600;
  --font-bold: 700;

  /*========== z index ==========*/
  --z-tooltip: 10;
  --z-fixed: 100;
}

/*=============== CYBER CORNERS SYSTEM ===============*/
.cyber-corners {
  position: relative !important;
}

.cyber-corner {
  position: absolute;
  width: var(--corner-size, 22px);
  height: var(--corner-size, 22px);
  border-color: var(--corner-color, #328af1);
  border-style: solid;
  border-width: 0;
  z-index: 12;
  pointer-events: none;
  transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.cyber-corner.top_left {
  top: var(--corner-offset, -5px);
  left: var(--corner-offset, -5px);
  border-top-width: var(--corner-border-width, 3px);
  border-left-width: var(--corner-border-width, 3px);
}

.cyber-corner.top_right {
  top: var(--corner-offset, -5px);
  right: var(--corner-offset, -5px);
  border-top-width: var(--corner-border-width, 3px);
  border-right-width: var(--corner-border-width, 3px);
}

.cyber-corner.bottom_left {
  bottom: var(--corner-offset, -5px);
  left: var(--corner-offset, -5px);
  border-bottom-width: var(--corner-border-width, 3px);
  border-left-width: var(--corner-border-width, 3px);
}

.cyber-corner.bottom_right {
  bottom: var(--corner-offset, -5px);
  right: var(--corner-offset, -5px);
  border-bottom-width: var(--corner-border-width, 3px);
  border-right-width: var(--corner-border-width, 3px);
}

/* Dynamic Hover Effect */
.cyber-corners:hover .cyber-corner {
  transform: scale(1.08);
  border-color: var(--corner-hover-color, #64a6f7);
  filter: drop-shadow(0 0 5px var(--corner-hover-glow, rgba(50, 138, 241, 0.6)));
}

/* Card/Component Customizations for Cyber Corners */
.mini_service_card {
  --corner-size: 6px;
  --corner-offset: -1px;
  --corner-border-width: 2px;
  --corner-color: rgba(50, 138, 241, 0.4);
}

.services_sidebar {
  --corner-size: 14px;
  --corner-offset: -5px;
  --corner-border-width: 3px;
}

.service_workspace {
  --corner-size: 18px;
  --corner-offset: -5px;
  --corner-border-width: 3px;
}

.video_window {
  --corner-size: 14px;
  --corner-offset: -5px;
  --corner-border-width: 3px;
}

.project_card {
  --corner-size: 20px;
  --corner-offset: -5px;
  --corner-border-width: 3px;
  --corner-color: rgba(50, 138, 241, 0.35);
  --corner-hover-color: #328af1;
}

.timeline_step_card {
  --corner-size: 10px;
  --corner-offset: -3px;
  --corner-border-width: 2px;
  --corner-color: rgba(50, 138, 241, 0.3);
}

.bannar_content {
  --corner-size: 24px;
  --corner-offset: -5px;
  --corner-border-width: 4px;
  --corner-color: #328af1;
}

.our_companys_content {
  --corner-size: 20px;
  --corner-offset: -5px;
  --corner-border-width: 3px;
  --corner-color: rgba(168, 85, 247, 0.45);
  --corner-hover-color: #a855f7;
  --corner-hover-glow: rgba(168, 85, 247, 0.6);
}

.statistics_strip {
  --corner-size: 10px;
  --corner-offset: -3px;
  --corner-border-width: 2px;
  --corner-color: rgba(50, 138, 241, 0.3);
}

.tech_tag {
  font-family: var(--body-font), monospace;
  font-size: 13px;
  color: #328af1;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 8px;
  display: block;
}

/* Responsiveness overrides */
@media screen and (max-width: 768px) {
  .testimonials_editor_window {
    --corner-size: 16px;
    --corner-offset: -6px;
  }
}

/*=============== BASE ===============*/
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  font-family: var(--body-font);
}

html {
  scroll-behavior: smooth;
}

input,
button {
  outline: none;
  border: none;
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
}

body {
  position: relative;
}

/*=============== CUSTOM PIXELATED CYBER CURSOR ===============*/
html,
body {
  cursor: url('pointer_cursor.png') 6 6, auto;
}

/* Cyber Pointer state */
a,
button,
[role="button"],
.btn,
select,
input[type="submit"],
input[type="button"],
.mini_service_card,
.nav_toggle,
.watch_video,
.audio-init-btn,
.nav_link,
.serv {
  cursor: url('pointer_cursor.png') 6 6, pointer !important;
}

/* Cyber Not-allowed state */
[disabled],
.disabled,
input[disabled],
button[disabled] {
  cursor: not-allowed !important;
}



.btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-family: Consolas, Monaco, "Andale Mono", var(--body-font);
  font-size: 15px;
  font-weight: 700;
  color: #ffffff !important;
  background: rgba(50, 138, 241, 0.06) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(50, 138, 241, 0.3) !important;
  border-radius: 0px !important;
  /* Sharp borders */
  padding: 8px 20px !important;
  padding-bottom: 10px !important;
  box-shadow:
    0 4px 15px rgba(0, 0, 0, 0.3),
    inset 0 1px 1px rgba(255, 255, 255, 0.1) !important;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
  cursor: pointer;
  text-shadow: 0 0 5px rgba(50, 138, 241, 0.4);

  &:hover {
    background: rgba(50, 138, 241, 0.18) !important;
    border-color: rgba(50, 138, 241, 0.75) !important;
    box-shadow:
      0 8px 25px rgba(50, 138, 241, 0.25),
      inset 0 1px 1.5px rgba(255, 255, 255, 0.2) !important;
    transform: translateY(-2px) !important;
    text-shadow: 0 0 8px rgba(50, 138, 241, 0.8);
  }

  &:active {
    transform: translateY(1px) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
  }
}

/*=============== SCROLL BAR ===============*/
::-webkit-scrollbar {
  width: 10px;
  background-color: #020308;
}

::-webkit-scrollbar-thumb {
  background-color: rgba(50, 138, 241, 0.35);
  border: 1px solid rgba(50, 138, 241, 0.5);
  transition: background-color 0.3s;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #328af1;
  box-shadow: 0 0 8px rgba(50, 138, 241, 0.8);
}

/*=============== REUSABLE CSS CLASSES ===============*/
.container {
  max-width: 1250px;
  margin: 0 auto;
}

.section {
  padding-block: 5rem 3rem;
  padding-inline: 3rem;
}

/*=============== GLOBAL SECTION SUBTITLE ===============*/
.section_subtitle {
  font-size: 14px !important;
  color: #328af1 !important;
  font-family: "Outfit", Consolas, Monaco, monospace !important;
  background: rgba(50, 138, 241, 0.06) !important;
  border-left: 3px solid #328af1 !important;
  border-right: 3px solid #328af1 !important;
  padding: 6px 20px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: fit-content !important;
  margin: 0 auto !important;
  text-shadow: 0 0 8px rgba(50, 138, 241, 0.4) !important;
  letter-spacing: 1px !important;
  position: relative !important;
  box-shadow: inset 0 0 10px rgba(50, 138, 241, 0.1) !important;
  animation: borderGlow 3s infinite alternate !important;

  &::before {
    content: "" !important;
    display: inline-block !important;
    width: 6px !important;
    height: 6px !important;
    background-color: #27c93f !important;
    border-radius: 50% !important;
    box-shadow: 0 0 8px #27c93f !important;
    margin-left: 8px !important;
    animation: subtitleBlink 1.5s infinite !important;
  }
}

@keyframes borderGlow {

  0%,
  100% {
    border-color: #328af1;
    box-shadow:
      inset 0 0 10px rgba(50, 138, 241, 0.1),
      0 0 5px rgba(50, 138, 241, 0.2);
  }

  50% {
    border-color: #328af1;
    box-shadow:
      inset 0 0 10px rgba(50, 138, 241, 0.15),
      0 0 12px rgba(50, 138, 241, 0.4);
  }
}

@keyframes cyberBadgeBlink {

  0%,
  100% {
    opacity: 1;
    filter: brightness(1.2);
  }

  50% {
    opacity: 0.6;
    filter: brightness(0.9);
  }
}

/*=============== HEADER & NAV ===============*/
.header {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 72px;
  z-index: var(--z-fixed);
  transition:
    top 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    height 0.4s ease,
    background-color 0.4s ease,
    transform 0.4s ease;

  .nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 100%;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    border-radius: 0;
    padding: 7px 80px;
    background: rgba(9, 12, 62, 0.15);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(49, 52, 109, 0.2);

    .nav_right,
    .nav_left {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 25px;

      .nav_list {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 15px;

        li {
          padding-bottom: 5px;
        }

        .nav_link {
          position: relative;
          font-size: 18px;
          font-weight: var(--font-regular);
          color: #7b7e9b;
          transition: all 0.3s ease;

          &:hover {
            color: #328af1;
            text-shadow: 0 0 8px rgba(50, 138, 241, 0.5);
          }
        }

        .not_active {
          color: #393B69 !important;
          text-decoration: line-through !important;
          text-decoration-color: #393B69 !important;
          text-decoration-thickness: 1.5px !important;
          cursor: not-allowed !important;
          pointer-events: none !important;
          position: relative;
        }

        .soon {
          position: relative;
        }

        .soon::after {
          content: "?";
          position: absolute;
          bottom: -18px;
          left: 50%;
          transform: translateX(-50%);
          font-family: var(--body-font), sans-serif;
          font-weight: 900;
          font-size: 12px;
          color: #fff;
          background: #ff3366;
          width: 18px;
          height: 18px;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 50%;
          line-height: 1;
          box-shadow: none;
          text-decoration: none !important;
          white-space: nowrap;
          z-index: 5;
        }

        .new {
          position: relative;
        }

        .new::after {
          content: "جديد";
          position: absolute;
          height: 12px;
          line-height: 7px;
          bottom: -15px;
          left: -10px;
          font-size: 12px;
          font-weight: var(--font-regular);
          color: #34B1EA;
          padding: 0.37px 2.68px;
          background-color: #262A5E;
          border-radius: 2px;
          z-index: -1;
        }
      }
    }

    .btn_stor,
    .btn_contact {
      gap: 8px;
      font-size: var(--note-size);
      font-weight: var(--font-regular);
      color: white;
      width: 125px;
      height: 34px;
      border-radius: 2px;
      border: 1px solid rgba(50, 138, 241, 0.25);
      /* background removed */
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.2),
        0 2px 10px rgba(0, 0, 0, 0.3);
      transition: all 0.3s ease;


      &:hover {
        background: rgba(50, 138, 241, 0.15);
        border-color: rgba(50, 138, 241, 0.6);
        box-shadow:
          0 0 15px rgba(50, 138, 241, 0.3),
          inset 0 1px 1px rgba(255, 255, 255, 0.3);
        transform: translateY(-1px);
      }

      &:active {
        transform: translateY(1px);
      }
    }
  }

  .img_logo {
    width: 175px;
    height: 21px;

    img {
      width: 100%;
      height: 100%;
      filter: drop-shadow(0px 0px 10px #328af1) drop-shadow(0px 0px 20px #328af1);
    }
  }
}

.btn_contact i {
  display: none;
}

.nav_toggle {
  display: none;
  width: 38px;
  height: 38px;
  border-radius: 3px;
  border: 1px solid #328af1;
  background: rgba(50, 138, 241, 0.08);
  color: #328af1;
  cursor: pointer;
  z-index: 9999;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  box-shadow: 0 0 8px rgba(50, 138, 241, 0.3);
}

.nav_toggle:hover {
  background: rgba(50, 138, 241, 0.2);
  box-shadow: 0 0 12px rgba(50, 138, 241, 0.5);
}

.nav_toggle i {
  font-size: 16px;
  color: #328af1;
  transition: transform 0.3s ease;
}

.mobile_menu {
  position: absolute;
  top: 100%;
  left: 20px;
  right: 20px;
  width: calc(100% - 40px);
  border-radius: 0px;
  background: #030513;
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border: 1px solid #328af1;
  box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.8),
    0 0 25px rgba(50, 138, 241, 0.35);
  padding: 30px 20px;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 24px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-10px);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 9999;

  .nav_list {
    display: flex !important;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 15px;
    width: 100%;

    li {
      width: 100%;
      text-align: center;
    }
  }
}

.mobile_menu .nav_link {
  font-size: 16px;
  font-weight: 500;
  color: #ebf3fe;
  display: block;
  padding: 14px 20px;
  text-align: center;
  text-decoration: none;
  border: 1px solid rgba(50, 138, 241, 0.15);
  background: rgba(50, 138, 241, 0.03);
  position: relative;
  transition: all 0.3s ease;

  &:hover {
    color: #fff !important;
    border-color: #328af1;
    background: rgba(50, 138, 241, 0.12);
    box-shadow: 0 0 12px rgba(50, 138, 241, 0.4);
    transform: translateY(-2px);
  }
}

/* ===== الوضع بعد scroll ===== */
.header.scrolled {
  top: 20px;
}

.header.scrolled .nav {
  border-radius: 4px;
  padding: 7px 50px;
  background: rgba(18, 22, 80, 0.65);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(50, 138, 241, 0.25);
  box-shadow:
    0 8px 32px 0 rgba(0, 0, 0, 0.4),
    0 0 15px rgba(50, 138, 241, 0.1),
    inset 0 1px 1px rgba(255, 255, 255, 0.1);
}

.header .nav.container {
  max-width: 100%;
}

.header.scrolled .nav.container {
  max-width: 1250px;
}

@keyframes chevronPulse {
  0% {
    opacity: 0.15;
    transform: translateY(-6px) scale(0.9);
  }

  50% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: drop-shadow(0 0 6px rgba(50, 138, 241, 0.7));
  }

  100% {
    opacity: 0.15;
    transform: translateY(6px) scale(0.9);
  }
}

.home {
  position: relative;
  min-height: 110vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: 72px 3rem;
  background-color: #060824;
  background-image:
    linear-gradient(rgba(50, 138, 241, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(50, 138, 241, 0.025) 1px, transparent 1px);
  background-size: 45px 45px;
  background-position: center center;
  overflow: hidden;

  .home_container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 0;

    .home_content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-direction: column;
      text-align: center;
      gap: 47px;
      z-index: 10;
      transform: translateY(-55px);

      .pra {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 8px;
        width: fit-content;
        height: auto;
        padding: 6px 16px;
        border-radius: 0px;
        border: 1px solid rgba(50, 138, 241, 0.25);
        color: #a2a6c9;
        font-size: 16px;
        font-family: Consolas, Monaco, monospace;
        background: rgba(9, 12, 62, 0.45);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        box-shadow:
          0 4px 15px rgba(0, 0, 0, 0.3),
          inset 0 1px 0 rgba(255, 255, 255, 0.05);

        .comment_prefix {
          color: rgba(50, 138, 241, 0.85);
          font-weight: bold;
          text-shadow: 0 0 5px rgba(50, 138, 241, 0.5);
        }

        p {
          font-family: Consolas, Monaco, monospace;
        }
      }

      .home_title {
        font-size: var(--h1-font-size);
        font-weight: var(--font-bold);
        color: white;
        z-index: 1;
        line-height: 1.35;
        text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);

        .idea {
          position: relative;
          color: #328af1;
          text-shadow: 0 0 8px rgba(50, 138, 241, 0.6);

          &::after {
            display: none;
          }
        }

        .search {
          position: relative;
          color: #328af1;
          text-shadow: 0 0 8px rgba(50, 138, 241, 0.6);

          &::after {
            display: none;
          }
        }
      }

      .smile {
        position: relative;
        font-family: Consolas, Monaco, monospace;
        font-size: 14px;
        font-weight: 700;
        color: #328af1;
        background: rgba(50, 138, 241, 0.08);
        border: 1px solid rgba(50, 138, 241, 0.25);
        padding: 4px 12px;
        border-radius: 0;
        text-shadow: 0 0 5px rgba(50, 138, 241, 0.4);

        &::after {
          display: none;
        }
      }

      .our_serv {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        gap: 10px;

        .serv {
          position: relative;
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;
          width: auto;
          min-width: 135px;
          height: 78px;
          padding: 8px 14px;
          gap: 7px;
          border-radius: 2px;
          color: #d1d4e6;
          background: rgba(50, 138, 241, 0.04);
          backdrop-filter: blur(8px);
          -webkit-backdrop-filter: blur(8px);
          border: 1px solid rgba(50, 138, 241, 0.2);
          transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);

          i {
            font-size: 20px;
            transition: all 0.3s ease;
          }

          h2 {
            font-size: var(--text-size);
            font-weight: var(--font-regular);
            line-height: 1;
            transition: all 0.3s ease;
          }

          &:hover {
            background: rgba(50, 138, 241, 0.15);
            border-color: rgba(50, 138, 241, 0.7);
            color: #ffffff;
            transform: translateY(-4px) scale(1.05);
            box-shadow:
              0 8px 24px rgba(50, 138, 241, 0.25),
              inset 0 1px 1px rgba(255, 255, 255, 0.2);

            i {
              color: #328af1;
              transform: scale(1.1);
              text-shadow: 0 0 10px rgba(50, 138, 241, 0.6);
            }

            h2 {
              color: #ffffff;
            }
          }
        }
      }
    }

    .arrows {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      width: 133px;
      gap: 4px;
      cursor: pointer;

      .arrow1,
      .arrow2,
      .arrow3 {
        animation: chevronPulse 1.8s infinite ease-in-out;
      }

      .arrow1 {
        width: 18.44px;
        height: 10.23px;
        animation-delay: 0s;
      }

      .arrow2 {
        width: 22px;
        height: 12.23px;
        animation-delay: 0.25s;
      }

      .arrow3 {
        width: 29.26px;
        height: 16.23px;
        animation-delay: 0.5s;
      }
    }
  }

  &::before {
    content: "";
    position: absolute;
    height: 100%;
    width: 222px;
    /* background: radial-gradient(circle at left center,
                #100B6A 0%,
                #100B6A 40%,
                transparent 70%); */
    background: #241f6c;
    filter: blur(120px);
    opacity: 0.9;
    top: 0;
    left: 0;
    z-index: 1;
  }

  &::after {
    content: "";
    position: absolute;
    height: 100%;
    width: 269px;
    /* background: radial-gradient(circle at right center,
                #100B6A 0%,
                #100B6A 40%,
                transparent 70%); */
    background: #100b6a;
    filter: blur(120px);
    opacity: 0.9;
    top: 0;
    right: 0;
    z-index: 1;
  }

  @keyframes bobbing {

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

    50% {
      transform: translateY(-12px);
    }
  }

  @keyframes bobbing-reverse {

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

    50% {
      transform: translateY(12px);
    }
  }

  .seo_img,
  .code_img,
  .idea_img2,
  .timer_img,
  .idea_img3,
  .target_img {
    position: absolute;
    z-index: 3;
    transition: transform 0.3s ease;
  }

  .seo_img {
    width: 176px;
    height: 176px;
    top: 7%;
    right: 6%;
    animation: bobbing 6s ease-in-out infinite;
  }

  .code_img {
    width: 73px;
    height: 73px;
    top: 50%;
    right: 20%;
    animation: bobbing-reverse 4s ease-in-out infinite;
  }

  .idea_img2 {
    width: 162px;
    height: 162px;
    top: 62%;
    right: 5%;
    animation: bobbing 5.5s ease-in-out infinite;
  }

  .timer_img {
    width: 126px;
    height: 126px;
    top: 14%;
    left: 11%;
    animation: bobbing-reverse 4.8s ease-in-out infinite;
  }

  .idea_img3 {
    width: 73px;
    height: 73px;
    top: 62%;
    left: 20%;
    animation: bobbing 5s ease-in-out infinite;
  }

  .target_img {
    width: 153px;
    height: 153px;
    top: 60%;
    left: 4%;
    animation: bobbing-reverse 6.2s ease-in-out infinite;
  }

  @keyframes cursor-blink {

    0%,
    100% {
      opacity: 1;
    }

    50% {
      opacity: 0;
    }
  }

  .code_snippets {
    position: absolute;
    display: flex;
    justify-content: start;
    align-items: start;
    direction: ltr;
    flex-direction: column;
    gap: 6px;
    max-width: 90vw;
    width: 300px;
    height: fit-content;
    padding: 16px 24px 16px 16px;
    background: #1F1F63;
    background-size: 100% 4px;
    background-color: rgba(9, 12, 62, 0.5);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(50, 138, 241, 0.35);
    box-shadow:
      0 8px 32px 0 rgba(0, 0, 0, 0.5),
      inset 0 0 15px rgba(50, 138, 241, 0.1);
    border-radius: 2px;
    z-index: 5;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    overflow: hidden;
    filter: blur(5px);

    &::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: radial-gradient(circle,
          transparent 60%,
          rgba(0, 0, 0, 0.4) 120%);
      pointer-events: none;
      z-index: 6;
    }

    &:hover {
      transform: translateY(-6px) scale(1.02);
      border-color: #328af1;
      box-shadow:
        0 15px 40px rgba(0, 0, 0, 0.6),
        0 0 25px rgba(50, 138, 241, 0.25);
      filter: blur(0px);
    }

    .browserbuttons {
      display: flex;
      justify-content: end;
      align-items: center;
      gap: 4px;
      width: 100%;
      margin-bottom: 4px;
      border-bottom: 1px solid rgba(50, 138, 241, 0.15);
      padding-bottom: 6px;

      .red,
      .yellow,
      .green {
        width: 6px;
        height: 6px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 0px;
        /* نمط بكسل مربع متناسق */
      }

      .red {
        background-color: #ff5f56;
      }

      .yellow {
        background-color: #ffbd2e;
      }

      .green {
        background-color: #27c93f;
      }
    }

    .span {
      font-size: 9px;
      font-family: Consolas, Monaco, monospace;
      font-weight: var(--font-medium);
      color: #63abfe;
      opacity: 0.85;
      background: rgba(50, 138, 241, 0.1);
      padding: 2px 6px;
      border-radius: 2px;
      border: 1px solid rgba(50, 138, 241, 0.2);
      margin-bottom: 4px;
      text-shadow: 0 0 4px rgba(99, 171, 254, 0.5);
    }

    p {
      font-size: 10px;
      font-family: Consolas, Monaco, "Andale Mono", monospace;
      font-weight: var(--font-regular);
      color: #b0c9f0;
      width: 100%;
      line-height: 1.4;
      word-wrap: break-word;
      white-space: normal;

      .keyword {
        color: #328af1;
        font-weight: bold;
        text-shadow: 0 0 5px rgba(50, 138, 241, 0.5);
      }

      .function {
        color: #50fa7b;
        text-shadow: 0 0 5px rgba(80, 250, 123, 0.5);
      }

      .variable {
        color: #8be9fd;
        text-shadow: 0 0 5px rgba(139, 233, 253, 0.5);
      }

      .string {
        color: #f1fa8c;
        text-shadow: 0 0 5px rgba(241, 250, 140, 0.5);
      }

      &:last-of-type::after {
        content: " █";
        color: #50fa7b;
        animation: cursor-blink 1s steps(2, start) infinite;
        text-shadow: 0 0 5px rgba(80, 250, 123, 0.8);
      }
    }

    .p_code {
      margin-left: 15px;
      font-size: 10px;
      font-family: Consolas, Monaco, "Andale Mono", monospace;
      font-weight: var(--font-regular);
      color: #b0c9f0;
      width: 100%;
      line-height: 1.4;
      word-wrap: break-word;
      white-space: normal;

      .keyword {
        color: #328af1;
        font-weight: bold;
        text-shadow: 0 0 5px rgba(50, 138, 241, 0.5);
      }

      .variable {
        color: #ffb86c;
        text-shadow: 0 0 5px rgba(255, 184, 108, 0.5);
      }

      .string {
        color: #f1fa8c;
        text-shadow: 0 0 5px rgba(241, 250, 140, 0.5);
      }
    }
  }

  /* .code_snippets1,
    .code_snippets2 {


        .span {
        }
    } */

  .code_snippets1 {
    top: 19%;
    right: 5%;
  }

  .code_snippets2 {
    top: 78%;
    left: 7%;
  }

  /* .code_snippets3,
    .code_snippets4 {

        .span {
        }
    } */

  .code_snippets3 {
    top: 72%;
    right: 7%;
  }

  .code_snippets4 {
    top: 20%;
    left: 5%;
  }
}

/*=============== PROJECTS ===============*/
@keyframes subtitleBlink {

  0%,
  100% {
    opacity: 0.2;
  }

  50% {
    opacity: 1;
  }
}

/*=============== PROJECTS ===============*/
.projects {
  padding-block: 6rem 5rem;
  position: relative;
  overflow: hidden;
  background-color: #04051a;
  background-image:
    radial-gradient(circle at 20% 25%,
      rgba(50, 138, 241, 0.12) 0%,
      transparent 50%),
    radial-gradient(circle at 80% 75%,
      rgba(50, 138, 241, 0.15) 0%,
      transparent 50%),
    repeating-linear-gradient(45deg,
      rgba(50, 138, 241, 0.01) 0px,
      rgba(50, 138, 241, 0.01) 1px,
      transparent 1px,
      transparent 12px),
    repeating-linear-gradient(-45deg,
      rgba(50, 138, 241, 0.008) 0px,
      rgba(50, 138, 241, 0.008) 1px,
      transparent 1px,
      transparent 12px);
  background-size:
    100% 100%,
    100% 100%,
    24px 24px,
    24px 24px;
  background-position:
    0 0,
    0 0,
    0 0,
    0 0;

  .projects_container {
    display: flex;
    flex-direction: column;
    gap: 40px;

    .projects_header {
      text-align: center;
      color: white;
      display: flex;
      flex-direction: column;
      gap: 16px;
      margin-bottom: 25px;

      .section_title {
        font-size: var(--h2-font-size);
        font-weight: 700;
        color: white;
        text-shadow: 0 0 15px rgba(50, 138, 241, 0.3);
      }

      .section_subtitle {
        font-size: 15px;
        color: #328af1;
        font-family: "Outfit", Consolas, Monaco, monospace;
        background: rgba(50, 138, 241, 0.07);
        border-left: 2px solid #328af1;
        border-right: 2px solid #328af1;
        padding: 6px 20px;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        width: fit-content;
        margin: 0 auto;
        text-shadow: 0 0 5px rgba(50, 138, 241, 0.4);
        letter-spacing: 0.5px;

        &::before {
          content: "";
          display: inline-block;
          width: 6px;
          height: 6px;
          background-color: #27c93f;
          border-radius: 50%;
          box-shadow: 0 0 8px #27c93f;
          margin-left: 8px;
          animation: subtitleBlink 1.5s infinite;
        }
      }
    }

    .projects_list {
      display: flex;
      flex-direction: column;
      gap: 50px;
      width: 100%;

      .project_card {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 60px;
        padding: 50px 60px;
        min-height: 460px;
        background: rgba(9, 12, 62, 0.65);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border: 1px solid rgba(50, 138, 241, 0.25);
        border-radius: 4px;
        box-shadow:
          0 25px 50px rgba(0, 0, 0, 0.5),
          inset 0 1px 0 rgba(255, 255, 255, 0.05),
          0 0 30px rgba(50, 138, 241, 0.03);
        transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);

        &:nth-child(even) {
          flex-direction: row-reverse;
        }

        &:hover {
          border-color: rgba(50, 138, 241, 0.5);
          background: rgba(9, 12, 62, 0.75);
          box-shadow:
            0 30px 60px rgba(0, 0, 0, 0.6),
            0 0 40px rgba(50, 138, 241, 0.25);
          transform: translateY(-6px);

          .project_mockups .desktop_window {
            border-color: rgba(50, 138, 241, 0.6);
            transform: translate(-8px, -8px);
          }

          .project_mockups .mobile_frame {
            border-color: rgba(50, 138, 241, 0.7);
            transform: translate(6px, 6px);
          }
        }

        &.hidden {
          display: none !important;
        }

        .project_info {
          flex: 1;
          display: flex;
          flex-direction: column;
          gap: 24px;
          border-right: 3px solid rgba(50, 138, 241, 0.15);
          padding-right: 25px;

          .project_title {
            font-size: 28px;
            font-weight: 700;
            color: #ffffff;
            text-shadow: 0 0 10px rgba(50, 138, 241, 0.45);
            letter-spacing: 0.5px;
          }

          .project_desc {
            font-size: 16px;
            color: #c5d9f7;
            font-weight: 400;
            text-align: justify;
          }

          .project_tags {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;

            .tag {
              font-size: 12px;
              font-family: Consolas, Monaco, monospace;
              font-weight: 700;
              color: #328af1;
              background: rgba(50, 138, 241, 0.05);
              border: 1px solid rgba(50, 138, 241, 0.3);
              padding: 5px 12px;
              border-radius: 0;
              text-shadow: 0 0 5px rgba(50, 138, 241, 0.4);
            }
          }

          .project_btns {
            display: flex;
            gap: 15px;
            margin-top: 10px;

            .btn {
              width: fit-content;
              margin: 0;
              padding-bottom: 10px !important;
            }

            .second_btn {
              background: rgba(50, 138, 241, 0.04);
              border: 1px solid rgba(50, 138, 241, 0.4) !important;
              color: white !important;
              text-shadow: 0 0 5px rgba(50, 138, 241, 0.4);

              &:hover {
                background: rgba(50, 138, 241, 0.15) !important;
                border-color: #328af1 !important;
                box-shadow: 0 0 15px rgba(50, 138, 241, 0.35) !important;
                color: #ffffff !important;
              }
            }
          }
        }

        /* Alternate borders for row-reverse card description */
        &:nth-child(even) .project_info {
          border-right: none;
          border-left: 3px solid rgba(50, 138, 241, 0.15);
          padding-right: 0;
          padding-left: 25px;
        }

        .project_mockups {
          position: relative;
          width: 480px;
          height: 290px;
          flex-shrink: 0;

          .desktop_window {
            position: absolute;
            top: 0;
            left: 0;
            width: 390px;
            height: 240px;
            background: rgba(9, 12, 62, 0.75);
            border: 1px solid rgba(50, 138, 241, 0.25);
            border-radius: 3px;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
            overflow: hidden;
            display: flex;
            flex-direction: column;
            transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);

            .window_header {
              display: flex;
              justify-content: space-between;
              align-items: center;
              background: rgba(9, 12, 62, 0.9);
              border-bottom: 1px solid rgba(50, 138, 241, 0.2);
              padding: 8px 14px;
              direction: ltr;

              .window_buttons {
                display: flex;
                gap: 6px;
                align-items: center;

                .dot {
                  width: 8px;
                  height: 8px;
                  border-radius: 0px;
                  /* نمط بكسل مربع */
                  border: 1px solid rgba(255, 255, 255, 0.15);
                }

                .red {
                  background-color: #ff5f56;
                }

                .yellow {
                  background-color: #ffbd2e;
                }

                .green {
                  background-color: #27c93f;
                }
              }

              .window_address {
                font-size: 11px;
                color: #328af1;
                font-family: Consolas, Monaco, monospace;
                opacity: 0.9;
                text-shadow: 0 0 3px rgba(50, 138, 241, 0.4);
              }
            }

            .window_screen {
              flex: 1;
              overflow: hidden;

              img {
                width: 100%;
                height: 100%;
                object-fit: cover;
              }
            }
          }

          .mobile_frame {
            position: absolute;
            bottom: 0;
            right: 10px;
            width: 125px;
            height: 225px;
            background: rgba(9, 12, 62, 0.9);
            border: 2px solid rgba(50, 138, 241, 0.45);
            border-radius: 10px;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.65);
            overflow: hidden;
            z-index: 5;
            transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);

            .phone_camera {
              width: 28px;
              height: 6px;
              background: rgba(50, 138, 241, 0.35);
              border-radius: 3px;
              position: absolute;
              top: 8px;
              left: 50%;
              transform: translateX(-50%);
              z-index: 10;
            }

            .phone_screen {
              width: 100%;
              height: 100%;
              overflow: hidden;
              padding-top: 18px;

              img {
                width: 100%;
                height: 100%;
                object-fit: cover;
              }
            }
          }
        }
      }
    }

    .projects_actions {
      display: flex;
      justify-content: center;
      margin-top: 20px;
      width: 100%;

      .btn {
        background-color: rgb(50, 138, 241) !important;
      }
    }
  }
}

/* Responsive Overrides for Projects Section */
@media (max-width: 1024px) {
  .projects .projects_container .projects_list .project_card {
    flex-direction: column-reverse !important;
    gap: 40px;
    padding: 35px 30px;
    min-height: auto;
    width: 90%;

    .project_info {
      border-right: none !important;
      border-left: none !important;
      padding-right: 0 !important;
      padding-left: 0 !important;
      text-align: center;
      align-items: center;

      .project_desc {
        text-align: center;
      }

      .btn {
        margin: 15px auto 0 auto;
      }
    }

    .project_mockups {
      width: 100%;
      max-width: 440px;
      height: 270px;
      margin: 0 auto;

      .desktop_window {
        width: 80%;
        height: 220px;
      }

      .mobile_frame {
        width: 105px;
        height: 190px;
        right: 5%;
      }
    }
  }
}

@media (max-width: 480px) {
  .projects .projects_container .projects_list .project_card {
    padding: 25px 20px;

    .project_info {
      .project_title {
        font-size: 22px;
      }

      .project_desc {
        font-size: 14px;
      }
    }

    .project_mockups {
      max-width: 300px;
      height: 200px;

      .desktop_window {
        width: 85%;
        height: 160px;
      }

      .mobile_frame {
        width: 80px;
        height: 140px;
        right: 0;
      }
    }
  }
}

.symbols_img {
  position: absolute;
  width: 114px;
  height: 114px;
  top: 59px;
  left: 121px;
}

.tree_img {
  position: absolute;
  width: 117px;
  height: 114px;
  bottom: 54px;
  left: 50px;
}

.rocet_img {
  position: absolute;
  width: 134px;
  height: 134px;
  right: 40%;
  bottom: 36px;
}

.check_hand_img {
  position: absolute;
  width: 97.95077514648438px;
  height: 51.98851013183594px;
  right: 150px;
  top: 38%;
}

@keyframes radarSweep {
  0% {
    background-position: 0 0;
  }

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

@keyframes holographicGlitch {

  0%,
  100% {
    opacity: 0.25;
  }

  50% {
    opacity: 0.45;
  }
}

@keyframes subtitleBlink {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}

.logo_img {
  position: relative;
  width: 130.3967px;
  height: 134.23551749358003px;

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

  &::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    box-shadow: 0px 6.97px 160px 0px #328af1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    filter: blur(30px);
    opacity: 0.9;
  }
}

.contract {
  position: absolute;
  width: 179px;
  height: 179px;
  bottom: 171px;
  left: 108px;
}

.target_image {
  position: absolute;
  width: 142.68179321289062px;
  height: 142.68179321289062px;
  bottom: 45px;
  right: 100px;
}

/*===============ABOUT US===============*/
.about_us {
  padding-block: 6rem;

  .about_us_container {
    gap: 120px;

    .about_us_content {
      gap: 45px;

      .swiper_container {
        .about_swiper {
          width: 340px;
          padding: 16px 16px 68px 16px;
        }
      }

      .target {
        width: 320px;
        height: 320px;

        h2 {
          width: 200px;
        }
      }
    }

    .logo_img {
      width: 122px;
      height: 126px;
    }
  }

  .contract {
    width: 165px;
    height: 165px;
    bottom: 155px;
    left: 80px;
  }

  .target_image {
    width: 132px;
    height: 132px;
    bottom: 40px;
    right: 75px;
  }
}

/*=============== SERVICES ===============*/
.services {
  padding-block: 5.5rem 2rem;
  background-color: #030514;
  background-image:
    radial-gradient(ellipse at top right,
      rgba(50, 138, 241, 0.06) 0%,
      transparent 60%),
    radial-gradient(ellipse at bottom left,
      rgba(50, 138, 241, 0.08) 0%,
      transparent 70%),
    radial-gradient(circle at 50% 30%,
      rgba(33, 35, 104, 0.15) 0%,
      transparent 65%);
  background-size: 100% 100%;
  overflow: hidden;
  position: relative;

  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(90deg,
        transparent,
        rgba(50, 138, 241, 0.15),
        transparent);
    z-index: 1;
  }

  &::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(90deg,
        transparent,
        rgba(50, 138, 241, 0.15),
        transparent);
    z-index: 1;
  }

  .services_container {
    .services_content {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;

      .services_header {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        text-align: center;
        gap: 22px;
        z-index: 1;
        margin-bottom: 60px;

        h2 {
          position: relative;
          font-size: var(--h2-font-size);
          font-weight: var(--font-medium);
          color: #d3d6df;
          z-index: 1;
          width: 70%;

          &::after {
            content: "";
            position: absolute;
            width: 100%;
            height: 100%;
            background-color: rgb(32, 39, 134);
            filter: blur(80px);
            bottom: -6px;
            left: 50%;
            transform: translateX(-50%);
            z-index: -1;
          }
        }

        p {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 200px;
          height: 37px;
          border-radius: 34px;
          background-color: #328af1;
          backdrop-filter: blur(12px);
          font-size: var(--note-size);
          font-weight: var(--font-regular);
          color: #e6e7ec;
          font-family: var(--heading-font);
          box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.286),
            inset 0 -1px 0 rgba(255, 255, 255, 0.286);
          z-index: 2;
        }

        a {
          position: relative;
          width: 230px;
          height: 48px;
          border-radius: 2px;
          border: 2px solid #212368;
          background: #121650;
          backdrop-filter: blur(12px);
          -webkit-backdrop-filter: blur(12px);
          font-family: var(--heading-font);
          font-size: 16px;
          font-weight: var(--font-regular);
          color: #eaebf0;
          z-index: 2;
        }

        &::after {
          content: "";
          position: absolute;
          width: 270px;
          height: 177px;
          background: #31399633;
          filter: blur(100px);
          top: 50%;
          left: -5%;
          transform: translate(-50%, -50%);
          z-index: 0;
        }

        &::before {
          content: "";
          position: absolute;
          width: 270px;
          height: 177px;
          background: #31399633;
          filter: blur(100px);
          top: 50%;
          left: 105%;
          transform: translate(-50%, -50%);
          z-index: 0;
        }
      }

      /* Main Active Service Display Card */
      .main_service_display {
        position: relative;
        display: grid;
        grid-template-columns: 1.15fr 1fr;
        gap: 60px;
        width: 100%;
        max-width: 1100px;
        margin: 0 auto;
        padding: 0px;
        background: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border: none;
        border-radius: 0;
        box-shadow: none;
        transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        z-index: 2;
        margin-bottom: 45px;
      }

      /* Services Data details */
      .services_data {
        display: flex;
        flex-direction: column;
        gap: 20px;
        text-align: right;

        .data_header {
          display: flex;
          flex-direction: column;
          gap: 8px;

          .category_tag {
            font-size: 13px;
            color: #328af1;
            font-weight: var(--font-medium);
            text-shadow: 0 0 5px rgba(50, 138, 241, 0.4);
          }

          h3 {
            font-size: 28px;
            font-weight: 700;
            color: white;
            text-shadow: 0 0 10px rgba(50, 138, 241, 0.2);
          }

          p {
            font-size: 15px;
            line-height: 1.6;
            color: #a4b3d6;
          }
        }

        .data_border {
          width: 100%;
          height: 1px;
          background: linear-gradient(90deg,
              rgba(50, 138, 241, 0.3) 0%,
              rgba(50, 138, 241, 0.05) 100%);
        }

        /* Tags list */
        .service_tags {
          display: flex;
          flex-wrap: wrap;
          gap: 10px;
          margin-block: 5px;

          .tag {
            font-size: 13px;
            color: #328af1;
            background: rgba(50, 138, 241, 0.06);
            border: 1px solid rgba(50, 138, 241, 0.25);
            padding: 4px 12px;
            font-family: Consolas, Monaco, monospace;
            text-shadow: 0 0 5px rgba(50, 138, 241, 0.3);
            border-radius: 0px;
            transition: all 0.3s ease;

            &:hover {
              background: rgba(50, 138, 241, 0.15);
              border-color: rgba(50, 138, 241, 0.6);
              transform: translateY(-1px);
            }
          }
        }

        .data_list {
          display: flex;
          flex-direction: column;
          gap: 15px;

          .list_title {
            font-size: 15px;
            font-weight: bold;
            color: #328af1;
            font-family: var(--heading-font);
            margin-bottom: 5px;
          }

          ul {
            display: flex;
            flex-direction: column;
            gap: 12px;

            li {
              display: flex;
              align-items: center;
              font-size: 14.5px;
              color: #ebf3fe;
              background: transparent;
              border: none;
              padding: 6px 0px;
              border-right: 3px solid rgba(50, 138, 241, 0.12);
              padding-right: 15px;
              border-radius: 0px;
              transition: all 0.3s ease;

              .feature_dot {
                color: #328af1;
                font-size: 8px;
                text-shadow: 0 0 3px rgba(50, 138, 241, 0.3);
                margin-left: 10px;
                display: inline-block;
              }

              &:hover {
                background: linear-gradient(270deg,
                    rgba(50, 138, 241, 0.04) 0%,
                    transparent 100%);
                border-right-color: #328af1;
                padding-right: 20px;
                color: #ffffff;
              }
            }
          }
        }

        .telemetry_row {
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-family: monospace;
          font-size: 12px;
          color: rgba(50, 138, 241, 0.6);
          border-top: 1px dashed rgba(50, 138, 241, 0.15);
          padding-top: 15px;
          margin-top: 10px;

          .value {
            color: #328af1;
            font-weight: bold;
            text-shadow: 0 0 5px rgba(50, 138, 241, 0.4);
          }
        }

        .btn {
          width: fit-content;
          align-self: flex-start;
          margin-top: 10px;
        }
      }

      /* Services Image Container - Minimal & Floating style */
      .services_img {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;

        .service_window_mockup {
          position: relative;
          width: 100%;
          max-width: 520px;
          background: rgba(9, 12, 62, 0.75);
          border: 1px solid rgba(50, 138, 241, 0.15);
          border-radius: 4px;
          box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6);
          overflow: hidden;
          display: flex;
          flex-direction: column;
          animation: floatImage 8s ease-in-out infinite;
          transition: all 0.4s ease;

          .window_header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: rgba(6, 8, 42, 0.95);
            border-bottom: 1px solid rgba(50, 138, 241, 0.12);
            padding: 10px 16px;
            direction: ltr;

            .window_buttons {
              display: flex;
              gap: 6px;
              align-items: center;

              .dot {
                width: 8px;
                height: 8px;
                border-radius: 0px;
                /* نمط بكسل مربع */
                border: 1px solid rgba(255, 255, 255, 0.15);
              }

              .red {
                background-color: #ff5f56;
              }

              .yellow {
                background-color: #ffbd2e;
              }

              .green {
                background-color: #27c93f;
              }
            }

            .window_title {
              font-size: 11px;
              color: #328af1;
              font-family: Consolas, Monaco, monospace;
              opacity: 0.95;
              text-shadow: 0 0 4px rgba(50, 138, 241, 0.3);
            }
          }

          .window_body {
            flex: 1;
            height: 320px;
            background: #ffffff;
            /* Seamless integration for white vector images */
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            padding: 20px;
            position: relative;

            img {
              max-width: 100%;
              max-height: 100%;
              object-fit: contain;
              transition: all 0.4s ease;
            }
          }

          &:hover {
            border-color: rgba(50, 138, 241, 0.4);
            box-shadow:
              0 20px 50px rgba(0, 0, 0, 0.7),
              0 0 10px rgba(50, 138, 241, 0.15);

            .window_body img {
              transform: scale(1.03);
            }
          }
        }

        .plugins {
          position: absolute;
          bottom: 10px;
          right: 16px;
          background: rgba(50, 138, 241);
          border: 1px solid rgba(50, 138, 241, 0.2);
          color: white;
          padding: 4px 12px;
          font-family: var(--body-font);
          font-size: 14px;
          letter-spacing: 0.5px;
          z-index: 6;
          text-shadow: 0 0 4px rgba(50, 138, 241, 0.4);
          border-radius: 2px;
          padding-bottom: 6px;
        }
      }

      /* Services Actions block */
      .services_actions {
        display: flex;
        justify-content: center;
        margin-top: 30px;
        z-index: 5;

        .btn {
          font-size: 16px;
          padding: 10px 28px !important;
          background-color: rgb(50, 138, 241) !important;
        }
      }

      /* Mini cards selector grid */
      .services_selector_grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
        width: 100%;
        max-width: 1100px;
        margin: 0 auto;
        opacity: 0;
        max-height: 0;
        overflow: hidden;
        transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);

        &.show {
          opacity: 1;
          max-height: 500px;
          margin-bottom: 40px;
          padding-top: 15px;
        }

        /* Mini card styling */
        .mini_service_card {
          position: relative;
          background: rgba(9, 12, 62, 0.45);
          backdrop-filter: blur(10px);
          -webkit-backdrop-filter: blur(10px);
          border: 1px solid rgba(50, 138, 241, 0.15);
          border-radius: 4px;
          padding: 24px 20px;
          cursor: pointer;
          transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          text-align: right;
          gap: 8px;

          .mini_num {
            font-family: monospace;
            font-size: 11px;
            color: rgba(50, 138, 241, 0.4);
          }

          h4 {
            font-family: var(--heading-font);
            font-size: 16px;
            color: #ebf3fe;
            margin: 0;
            transition: color 0.3s ease;
          }

          p {
            font-size: 13px;
            line-height: 1.5;
            color: #a4b3d6;
            margin: 0;
          }

          .mini_card_tags {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            margin-top: auto;
            padding-top: 10px;

            .mini_tag {
              font-size: 10.5px;
              font-family: monospace;
              color: rgba(50, 138, 241, 0.6);
              background: rgba(50, 138, 241, 0.04);
              border: 1px solid rgba(50, 138, 241, 0.15);
              padding: 2px 6px;
            }
          }

          &:hover {
            border-color: rgba(50, 138, 241, 0.45);
            background: rgba(50, 138, 241, 0.08);
            transform: translateY(-4px);

            h4 {
              color: #328af1;
            }

            .cyber-corner {
              border-color: #328af1;
              filter: drop-shadow(0 0 2px #328af1);
            }
          }

          &.active {
            border-color: #328af1;
            background: rgba(50, 138, 241, 0.15);
            box-shadow:
              0 10px 25px rgba(50, 138, 241, 0.12),
              0 0 15px rgba(50, 138, 241, 0.08);

            h4 {
              color: white;
              text-shadow: 0 0 8px rgba(50, 138, 241, 0.5);
            }

            .mini_num {
              color: #328af1;
            }

            .cyber-corner {
              border-color: #328af1;
              width: 10px;
              height: 10px;
              filter: drop-shadow(0 0 3px #328af1);
            }
          }
        }
      }
    }
  }

  .decoration1,
  .decoration2,
  .decoration3,
  .decoration4 {
    display: none !important;
  }

  .chart,
  .layer {
    display: none !important;
  }
}

@keyframes digitalScan {
  0% {
    top: -10%;
  }

  100% {
    top: 110%;
  }
}

@keyframes floatImage {

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

  50% {
    transform: translateY(-8px);
  }
}

/*=============== TESTIMONIALS ===============*/
.testimonials {
  background-color: #030514;
  background-image:
    radial-gradient(circle at 50% 50%, rgba(3, 5, 20, 0.45) 0%, #030514 85%),
    linear-gradient(rgba(50, 138, 241, 0.08) 1.5px, transparent 1.5px),
    linear-gradient(90deg, rgba(50, 138, 241, 0.08) 1.5px, transparent 1.5px),
    radial-gradient(circle at 10% 20%,
      rgba(50, 138, 241, 0.22) 0%,
      transparent 45%),
    radial-gradient(circle at 90% 80%,
      rgba(50, 138, 241, 0.25) 0%,
      transparent 45%),
    radial-gradient(circle at 50% 50%,
      rgba(33, 35, 104, 0.2) 0%,
      transparent 60%);
  background-size:
    100% 100%,
    36px 36px,
    36px 36px,
    100% 100%,
    100% 100%,
    100% 100%;
  padding-block: 5.5rem 9rem;
  position: relative;
  overflow: hidden;
  animation: bgGridScroll 25s linear infinite;

  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg,
        transparent,
        #328af1,
        #328af1,
        transparent);
    box-shadow: 0 0 15px rgba(50, 138, 241, 0.5);
    z-index: 3;
    animation: laserGlow 3s ease-in-out infinite alternate;
  }

  &::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg,
        transparent,
        #328af1,
        #328af1,
        transparent);
    box-shadow: 0 0 15px rgba(50, 138, 241, 0.5);
    z-index: 3;
    animation: laserGlow 3s ease-in-out infinite alternate-reverse;
  }

  .testimonials_bg_decorations {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
  }

  .bg_decor_item {
    position: absolute;
    font-family: "Share Tech Mono", monospace;
    font-size: 24px;
    color: rgba(50, 138, 241, 0.15);
    user-select: none;
  }

  .decor_crosshair {
    font-weight: 300;
    animation: pulseCross 3s ease-in-out infinite alternate;
  }

  .left_crosshair {
    top: 25%;
    left: 8%;
    font-size: 28px;
  }

  .right_crosshair {
    bottom: 25%;
    right: 8%;
    font-size: 28px;
  }

  .decor_square {
    font-size: 14px;
    color: rgba(50, 138, 241, 0.12);
    animation: floatSquares 12s linear infinite;
  }

  .square1 {
    top: 15%;
    left: 20%;
    animation-delay: 0s;
  }

  .square2 {
    top: 75%;
    left: 15%;
    animation-delay: 3s;
  }

  .square3 {
    top: 30%;
    right: 18%;
    animation-delay: 6s;
  }

  .square4 {
    top: 80%;
    right: 25%;
    animation-delay: 9s;
  }

  .bg_status_panel {
    position: absolute;
    font-family: "Share Tech Mono", var(--body-font), monospace;
    font-size: 10px;
    color: rgba(50, 138, 241, 0.25);
    line-height: 1.8;
    padding: 10px;
    background: rgba(3, 5, 20, 0.45);
    border: 1px dashed rgba(50, 138, 241, 0.15);
    user-select: none;
    z-index: 2;
    text-shadow: 0 0 4px rgba(50, 138, 241, 0.3);
    direction: ltr;
  }

  .panel_left {
    top: 30%;
    left: 3%;
    text-align: left;
  }

  .panel_right {
    bottom: 30%;
    right: 3%;
    text-align: right;
  }

  .testimonials_container {
    position: relative;
    z-index: 3;

    .testimonials_content {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      gap: 60px;

      .testimonials_header {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        text-align: center;
        width: 100%;
        max-width: 670px;
        gap: 12px;

        h2 {
          position: relative;
          font-size: var(--h2-font-size);
          font-weight: var(--font-medium);
          color: white;
          margin-bottom: 15px;
          z-index: 1;

          &::after {
            content: "";
            position: absolute;
            width: 200px;
            height: 1px;
            bottom: -5px;
            left: 50%;
            transform: translateX(-50%);
            background: linear-gradient(90deg,
                transparent,
                #328af1,
                transparent);
          }
        }

        p {
          font-size: var(--text-size);
          font-weight: var(--font-regular);
          color: #328af1;
        }

        span {
          font-size: 14.5px;
          color: #a4b3d6;
          line-height: 1.6;
        }
      }

      /* Testimonials IDE Mockup Window - Dazzling Cyberpunk Style */
      .testimonials_editor_window {
        position: relative;
        width: 100%;
        max-width: 960px;
        margin: 0 auto;
        background: rgba(3, 4, 15, 0.95);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-radius: 0px !important;
        border: 2px solid #328af1;
        box-shadow: 0 20px 55px rgba(0, 0, 0, 0.85);
        overflow: visible;
        /* Show corners */
        display: flex;
        flex-direction: column;
        z-index: 5;
        transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);

        &:hover {
          border-color: #328af1;
          box-shadow: 0 25px 65px rgba(0, 0, 0, 0.92);
        }

        .editor_header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          background: #030514;
          border-bottom: 2px solid #328af1;
          padding: 12px 20px;
          direction: ltr;
          border-radius: 0;
          position: relative;

          .editor_buttons {
            display: flex;
            gap: 8px;
            align-items: center;

            .dot {
              width: 10px;
              height: 10px;
              border-radius: 0px;
              border: 1px solid rgba(255, 255, 255, 0.15);
            }

            .red {
              background-color: #ff5f56;
            }

            .yellow {
              background-color: #ffbd2e;
            }

            .green {
              background-color: #27c93f;
            }
          }

          .editor_tabs {
            display: flex;
            flex: 1;
            margin-left: 20px;

            .tab {
              display: flex;
              align-items: center;
              gap: 8px;
              background: #080c24;
              border: 2px solid #328af1;
              border-bottom: none;
              padding: 8px 18px;
              border-radius: 0px;
              font-family: "Share Tech Mono", monospace;
              font-size: 12.5px;
              color: #ffffff;

              .tab_icon {
                font-size: 11px;
                color: #328af1;
              }
            }
          }

          .editor_status_badge {
            font-size: 12px;
            color: #328af1;
            background: rgba(50, 138, 241, 0.1);
            border: 1px solid #328af1;
            padding: 4px 14px;
            border-radius: 0;
            font-family: var(--body-font);
            direction: rtl;
            font-weight: 500;
          }
        }

        .editor_body {
          display: grid;
          grid-template-columns: 260px 1fr;
          height: 390px;

          .editor_sidebar {
            background: #03040f;
            border-right: 2px solid #328af1;
            padding: 20px 15px;
            display: flex;
            flex-direction: column;
            gap: 14px;
            text-align: right;
            overflow-y: auto;
            max-height: 100%;

            /* Custom scrollbar for sidebar */
            &::-webkit-scrollbar {
              width: 6px;
              background-color: transparent;
            }

            &::-webkit-scrollbar-thumb {
              background-color: rgba(50, 138, 241, 0.3);
              border-radius: 0px;
            }

            &::-webkit-scrollbar-thumb:hover {
              background-color: #328af1;
            }

            .sidebar_title {
              font-size: 12px;
              font-weight: 700;
              color: #328af1;
              text-transform: uppercase;
              letter-spacing: 0.5px;
              border-bottom: 2px solid rgba(50, 138, 241, 0.25);
              padding-bottom: 8px;
              font-family: var(--body-font);
            }

            .file_list {
              display: flex;
              flex-direction: column;
              gap: 6px;

              .file_item {
                display: flex;
                align-items: center;
                gap: 8px;
                padding: 10px 12px;
                cursor: pointer;
                border-radius: 0px;
                color: #cbd5e1;
                font-family: "Share Tech Mono", monospace;
                font-size: 13.5px;
                transition: all 0.25s ease;
                direction: ltr;
                justify-content: flex-start;
                border: 1px solid transparent;

                .file_icon {
                  font-size: 12px;
                  color: rgba(50, 138, 241, 0.4);
                  transition: color 0.25s ease;
                }

                .file_name {
                  flex: 1;
                  text-align: left;
                }

                &::before {
                  content: "> ";
                  opacity: 0;
                  color: #00ffcc;
                  font-weight: bold;
                  transition: opacity 0.2s;
                }

                &:hover {
                  background: rgba(50, 138, 241, 0.05);
                  color: #328af1;
                  border-color: rgba(50, 138, 241, 0.15);

                  .file_icon {
                    color: #328af1;
                  }
                }

                &.active {
                  background: rgba(50, 138, 241, 0.08);
                  color: #ffffff;
                  border: 1px solid rgba(50, 138, 241, 0.35);
                  font-weight: 500;

                  .file_icon {
                    color: #328af1;
                  }

                  &::before {
                    opacity: 1;
                  }

                  &::after {
                    content: "_";
                    color: #00ffcc;
                    animation: caretBlink 0.8s step-end infinite;
                  }
                }
              }
            }
          }

          .editor_code_area {
            position: relative;
            background: #030514;
            padding: 24px;
            display: flex;
            gap: 20px;
            overflow-y: auto;
            font-family: "Share Tech Mono", "Consolas", "Monaco", monospace;
            font-size: 14.5px;
            line-height: 1.8;
            text-align: right;
            direction: rtl;
            border-radius: 0;
            animation: crtFlicker 0.15s infinite;

            /* CRT scanlines and glass reflection glow overlay */
            &::after {
              content: "";
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              background:
                linear-gradient(rgba(18, 16, 16, 0) 50%,
                  rgba(0, 0, 0, 0.25) 50%),
                radial-gradient(circle at center,
                  transparent 55%,
                  rgba(0, 0, 0, 0.45) 100%);
              background-size:
                100% 4px,
                100% 100%;
              z-index: 10;
              pointer-events: none;
              opacity: 0.45;
            }

            /* Custom scrollbar for code area */
            &::-webkit-scrollbar {
              width: 6px;
              background-color: transparent;
            }

            &::-webkit-scrollbar-thumb {
              background-color: rgba(50, 138, 241, 0.3);
              border-radius: 0px;
            }

            &::-webkit-scrollbar-thumb:hover {
              background-color: #328af1;
            }

            .line_numbers {
              display: flex;
              flex-direction: column;
              color: rgba(50, 138, 241, 0.25);
              font-size: 13.5px;
              user-select: none;
              border-left: 2px solid rgba(50, 138, 241, 0.15);
              padding-left: 15px;
              direction: ltr;
              text-align: right;
              width: 30px;
              z-index: 5;
              font-family: "Share Tech Mono", monospace;
            }

            .code_content {
              flex: 1;
              color: #e2e8f0;
              white-space: pre-wrap;
              z-index: 5;
              animation: codeGlitch 0.25s ease-out;

              .code_line {
                margin-bottom: 3px;
                min-height: 26px;
                font-family: var(--body-font);
              }

              /* High-Contrast Neon Syntax Highlighting */
              .code_comment {
                color: #a2b4c7;
                font-style: italic;
                display: block;
                font-family: "Share Tech Mono", var(--body-font), monospace;
                margin-bottom: -15px;
              }

              .code_bracket {
                color: #ffffff;
                font-weight: bold;
                font-family: "Share Tech Mono", monospace;
              }

              .code_key {
                color: #60a5fa;
                font-family: "Share Tech Mono", var(--body-font), monospace;
              }

              .code_val {
                color: #e2e8f0;
                font-family: "Share Tech Mono", var(--body-font), monospace;
              }

              .typing_cursor {
                display: inline-block;
                width: 8px;
                height: 16px;
                background-color: #328af1;
                margin-left: 4px;
                vertical-align: middle;

                &.persistent {
                  animation: cursorBlink 0.8s step-end infinite;
                }
              }
            }
          }
        }

        /* Editor Footer Status Bar styling */
        .editor_footer {
          display: flex;
          justify-content: space-between;
          align-items: center;
          background: #030514;
          border-top: 2px solid #328af1;
          padding: 8px 20px;
          color: #a4b3d6;
          font-family: "Share Tech Mono", var(--body-font), monospace;
          font-size: 11px;
          direction: rtl;

          .footer_item {
            display: flex;
            align-items: center;
            gap: 6px;
            border-left: 1px solid rgba(50, 138, 241, 0.15);
            padding-left: 15px;
            margin-left: 15px;

            &:last-child {
              border-left: none;
              padding-left: 0;
              margin-left: 0;
            }

            &.flex_grow {
              flex-grow: 1;
              color: #328af1;
            }
          }
        }
      }
    }
  }
}

/* View mode toggle button inside testimonials header */
.editor_view_btn {
  position: absolute;
  top: 15px;
  left: 15px;
  z-index: 20;
  background: rgba(5, 7, 26, 0.85) !important;
  border: 1px solid rgba(50, 138, 241, 0.5) !important;
  color: #328af1 !important;
  padding: 5px 15px !important;
  font-family: var(--body-font), monospace !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  border-radius: 0px !important;
  transition: all 0.25s ease !important;
  text-shadow: 0 0 5px rgba(50, 138, 241, 0.3) !important;
  backdrop-filter: blur(5px);
}

.editor_view_btn:hover {
  background: rgba(50, 138, 241, 0.2) !important;
  border-color: #328af1 !important;
  box-shadow: 0 0 10px rgba(50, 138, 241, 0.4) !important;
}

/* Beautiful custom simple view for feedback */
.simple_feedback_view {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 30px;
  gap: 22px;
  width: 100%;
  height: 100%;
  animation: codeGlitch 0.25s ease-out;
  color: #ffffff;
  direction: rtl;
  margin: auto;
}

.simple_feedback_view .feedback_stars {
  font-size: 26px;
  color: #ffd700;
  /* gold yellow stars */
  text-shadow: 0 0 12px rgba(255, 215, 0, 0.45);
}

.simple_feedback_view .feedback_text {
  font-size: 16px;
  line-height: 1.8;
  color: #ebf3fe;
  /* highly readable bright ice-white */
  font-family: var(--body-font);
  max-width: 600px;
  font-style: italic;
}

.simple_feedback_view .feedback_author {
  font-size: 18px;
  font-weight: 700;
  color: #328af1;
  /* brand blue */
  margin-top: 10px;
  font-family: var(--body-font);
}

.simple_feedback_view .feedback_org {
  font-size: 13px;
  color: #a2b4c7;
  font-family: var(--body-font);
}

@keyframes codeGlitch {
  0% {
    opacity: 0.4;
    filter: hue-rotate(60deg) contrast(1.2);
  }

  50% {
    opacity: 0.8;
    filter: contrast(1.5);
  }

  100% {
    opacity: 1;
    filter: none;
  }
}

@keyframes cursorBlink {

  from,
  to {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }
}

@keyframes caretBlink {

  from,
  to {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }
}

@keyframes crtFlicker {
  0% {
    opacity: 0.995;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0.99;
  }
}

@keyframes laserGlow {

  0%,
  100% {
    opacity: 0.5;
    filter: drop-shadow(0 0 2px rgba(50, 138, 241, 0.3));
  }

  50% {
    opacity: 1;
    filter: drop-shadow(0 0 10px rgba(50, 138, 241, 0.7));
  }
}

@keyframes bgGridScroll {
  from {
    background-position:
      0 0,
      0 0,
      0 0,
      0 0,
      0 0,
      0 0;
  }

  to {
    background-position:
      0 0,
      36px 36px,
      36px 36px,
      0 0,
      0 0,
      0 0;
  }
}

/*=============== WHY SERVICES ===============*/
.why_services {
  position: relative;
  padding-block: 5.5rem 13.8rem;
  background-color: #030514;
  background-image:
    radial-gradient(circle at 15% 25%,
      rgba(50, 138, 241, 0.08) 0%,
      transparent 45%),
    radial-gradient(circle at 85% 75%,
      rgba(74, 222, 128, 0.05) 0%,
      transparent 45%),
    linear-gradient(rgba(50, 138, 241, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(50, 138, 241, 0.02) 1px, transparent 1px);
  background-size:
    100% 100%,
    100% 100%,
    36px 36px,
    36px 36px;
  overflow: hidden;

  .why_services_container {
    display: flex;
    flex-direction: column;
    gap: 4rem;

    .why_services_header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      gap: 30px;
      flex-wrap: wrap;

      .header_text {
        display: flex;
        flex-direction: column;
        gap: 12px;

        h2 {
          font-size: var(--h2-font-size);
          font-weight: var(--font-medium);
          color: #ebf3fe;
        }

        p {
          font-size: var(--text-size);
          font-weight: var(--font-regular);
          color: #a2b4c7;
          max-width: 600px;
        }
      }

      .header_btns {
        display: flex;
        gap: 24px;
        flex-shrink: 0;

        .btn {
          font-family: var(--body-font), monospace;
          font-size: 15px;
          padding: 10px 24px !important;
          border-radius: 0px !important;
        }

        .prime_btn {
          background: #328af1 !important;
          border: 1px solid #328af1 !important;
          color: white !important;
        }

        .second_btn {
          background: transparent !important;
          border: 1px solid rgba(255, 255, 255, 0.15) !important;
          color: #ffffff !important;
        }

        .second_btn:hover {
          border-color: #328af1 !important;
          color: #328af1 !important;
        }
      }
    }

    /* Layout structure */
    .why_services_layout {
      display: grid;
      grid-template-columns: 320px 1fr;
      gap: 40px;
      position: relative;
      z-index: 2;
    }

    /* Sidebar Navigation with Pixel Styling */
    .services_sidebar {
      position: relative;
      background: rgba(3, 4, 15, 0.95);
      border: 2px solid #328af1;
      padding: 24px 20px;
      display: flex;
      flex-direction: column;
      gap: 20px;

      .sidebar_title_text {
        font-family: var(--body-font), monospace;
        font-size: 13px;
        font-weight: 700;
        color: #328af1;
        letter-spacing: 0.5px;
        border-bottom: 2px solid rgba(50, 138, 241, 0.25);
        padding-bottom: 8px;
        text-transform: uppercase;
      }

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

        .service_tab {
          display: flex;
          align-items: center;
          gap: 12px;
          padding: 14px 16px;
          cursor: pointer;
          color: #a2b4c7;
          border: 1px solid transparent;
          transition: all 0.25s ease;
          direction: rtl;
          text-align: right;

          .tab_num {
            font-family: "Share Tech Mono", monospace;
            font-size: 13px;
            color: rgba(50, 138, 241, 0.5);
          }

          .tab_name {
            font-size: 15px;
            font-weight: 500;
          }

          &:hover {
            background: rgba(50, 138, 241, 0.05);
            color: #328af1;
            border-color: rgba(50, 138, 241, 0.2);
          }

          &.active {
            background: rgba(50, 138, 241, 0.12);
            color: #ffffff;
            border: 1px solid rgba(50, 138, 241, 0.45);
            box-shadow: 0 0 15px rgba(50, 138, 241, 0.15);

            .tab_num {
              color: #328af1;
            }

            &::before {
              content: "> ";
              color: #328af1;
              /* bright blue chevron */
              font-weight: bold;
              margin-left: 2px;
            }
          }
        }
      }
    }

    /* Workspace Content Area */
    .service_workspace {
      position: relative;
      background: rgba(3, 4, 15, 0.95);
      border: 2px solid #328af1;
      box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8);
      display: flex;
      flex-direction: column;
      z-index: 5;
      min-height: 480px;

      .workspace_header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: #020208;
        border-bottom: 2px solid #328af1;
        padding: 12px 20px;
        direction: ltr;

        .workspace_dots {
          display: flex;
          gap: 8px;

          .dot {
            width: 10px;
            height: 10px;
            border: 1px solid rgba(255, 255, 255, 0.15);
          }

          .red {
            background: #ff5f56;
          }

          .yellow {
            background: #ffbd2e;
          }

          .green {
            background: #27c93f;
          }
        }

        .workspace_title {
          font-family: var(--body-font);
          font-size: 14px;
          font-weight: 500;
          color: #ffffff;
          direction: rtl;
        }

        .workspace_badge {
          font-size: 11px;
          color: #328af1;
          background: rgba(50, 138, 241, 0.1);
          border: 1px solid #328af1;
          padding: 3px 12px;
          font-family: "Share Tech Mono", monospace;
          direction: rtl;
        }
      }

      /* Workspace body displaying active slide */
      .workspace_body {
        flex: 1;
        padding: 40px;
        overflow-y: auto;
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;

        /* Storytelling Slide Layouts */
        .story_container {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 40px;
          align-items: center;
          text-align: right;
          direction: rtl;
        }

        .story_text_col {
          display: flex;
          flex-direction: column;
          gap: 20px;

          h3 {
            font-size: 24px;
            color: #ffffff;
            line-height: 1.5;
            font-weight: var(--font-medium);
          }

          p {
            font-size: 15px;
            color: #cbd5e1;
          }

          .highlight_bullet {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            margin-top: 5px;

            .bullet_icon {
              color: #4ade80;
              font-weight: bold;
              font-size: 16px;
            }

            p {
              font-size: 14.5px;
              color: #a2b4c7;
              margin: 0;
              line-height: 1.5;
            }
          }
        }

        .story_image_col {
          display: flex;
          justify-content: center;
          align-items: center;
          border: none;
          padding: 0;
          background: transparent;

          .mac_window_frame {
            background: #101222;
            border: 1.5px solid rgba(50, 138, 241, 0.35);
            border-radius: 0px;
            overflow: hidden;
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6);
            width: 100%;
            display: flex;
            flex-direction: column;

            .mac_window_header {
              background: rgba(16, 18, 34, 0.85);
              padding: 12px 16px;
              display: flex;
              gap: 8px;
              border-bottom: 1px solid rgba(50, 138, 241, 0.15);
              align-items: center;
              direction: ltr;

              .mac_dot {
                width: 11px;
                height: 11px;
                border-radius: 0px;
                display: inline-block;

                &.red {
                  background: #ff5f56;
                }

                &.yellow {
                  background: #ffbd2e;
                }

                &.green {
                  background: #27c93f;
                }
              }
            }

            .mac_window_body {
              padding: 0;
              display: flex;
              justify-content: center;
              align-items: center;
              background: #020208;

              img {
                width: 100%;
                height: auto;
                max-height: 280px;
                object-fit: cover;
                display: block;
              }
            }
          }
        }

        /* Timeline Steps for Slide 2 */
        .timeline_steps {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 24px;
          text-align: right;
          direction: rtl;
          margin-bottom: 20px;
        }

        .timeline_step_card {
          background: rgba(2, 3, 10, 0.4);
          border: 1px solid rgba(50, 138, 241, 0.2);
          padding: 24px;
          position: relative;
          display: flex;
          flex-direction: column;
          gap: 15px;
          transition: all 0.3s ease;

          .step_number {
            font-family: "Share Tech Mono", monospace;
            font-size: 28px;
            color: rgba(50, 138, 241, 0.35);
            font-weight: bold;
          }

          h4 {
            font-size: 16px;
            color: #ffffff;
            font-weight: 600;
            line-height: 1.4;
          }

          p {
            font-size: 13.5px;
            color: #cbd5e1;
            line-height: 1.7;
          }

          &:hover {
            border-color: #328af1;
            box-shadow: 0 10px 25px rgba(50, 138, 241, 0.15);
            transform: translateY(-5px);

            .step_number {
              color: #4ade80;
            }
          }
        }

        /* Swiper / Gallery styling for Slide 3 */
        .gallery_container {
          display: flex;
          flex-direction: column;
          gap: 15px;
          direction: rtl;
          text-align: right;

          .gallery_hint {
            font-size: 13.5px;
            color: #a2b4c7;
          }
        }

        .custom_swiper_wrapper {
          position: relative;
          width: 100%;
          overflow: hidden;
          background: transparent;
          border: none;
          padding: 0;

          .swiper_images_track {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 24px;
          }

          .gallery_img_holder {
            position: relative;
            overflow: hidden;
            border-radius: 0px;
            cursor: pointer;
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
            border: 1px solid rgba(50, 138, 241, 0.15);
            transition: all 0.4s ease;

            &:hover {
              border-color: #328af1;
              box-shadow: 0 12px 30px rgba(50, 138, 241, 0.25);

              .gallery_thumbnail_img {
                transform: scale(1.08);
              }

              .zoom_overlay {
                opacity: 1;

                i {
                  transform: scale(1);
                }
              }
            }

            .gallery_thumbnail_img {
              width: 100%;
              height: 240px;
              object-fit: cover;
              display: block;
              transition: transform 0.45s ease;
            }

            .zoom_overlay {
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              background: rgba(3, 5, 20, 0.7);
              backdrop-filter: blur(2px);
              display: flex;
              justify-content: center;
              align-items: center;
              opacity: 0;
              transition: opacity 0.35s ease;
              pointer-events: none;
              z-index: 2;

              i {
                color: #ffffff;
                font-size: 32px;
                transform: scale(0.7);
                transition: transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
              }
            }
          }
        }

        /* CTA button spacing */
        .cta_wrapper {
          display: none !important;
        }
      }

      /* Workspace footer controls */
      .workspace_footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: #020208;
        border-top: 2px solid #328af1;
        padding: 12px 20px;
        direction: rtl;

        .active_service_cta {
          font-family:
            Consolas, Monaco, "Andale Mono", var(--body-font) !important;
          font-size: 13.5px !important;
          font-weight: 700 !important;
          padding: 8px 20px !important;
          background: rgba(50, 138, 241, 0.08) !important;
          border: 1.5px solid rgba(50, 138, 241, 0.4) !important;
          color: #328af1 !important;
          border-radius: 0px !important;
          text-shadow: 0 0 5px rgba(50, 138, 241, 0.3);
          box-shadow: 3px 3px 0px rgba(50, 138, 241, 0.15);
          transition: all 0.25s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
          text-decoration: none;
          display: inline-flex;
          align-items: center;
          justify-content: center;

          &:hover {
            background: rgba(50, 138, 241, 0.18) !important;
            border-color: #328af1 !important;
            color: #ffffff !important;
            box-shadow: 3px 3px 0px rgba(50, 138, 241, 0.45);
            transform: translate(-2px, -2px);
          }

          &:active {
            transform: translate(1px, 1px);
            box-shadow: 1px 1px 0px rgba(50, 138, 241, 0.45);
          }
        }

        .slide_navigation {
          display: flex;
          align-items: center;
          gap: 14px;

          .nav_slide_btn {
            width: 44px;
            height: 44px;
            border-radius: 0px;
            background: rgba(3, 4, 15, 0.85);
            border: 1.5px solid rgba(50, 138, 241, 0.4);
            color: #328af1;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            transition: all 0.25s cubic-bezier(0.165, 0.84, 0.44, 1);
            box-shadow: 3px 3px 0px rgba(50, 138, 241, 0.2);

            i {
              font-size: 15px;
              transition: transform 0.2s ease;
            }

            &:hover {
              background: rgba(50, 138, 241, 0.12);
              border-color: #328af1;
              color: #ffffff;
              box-shadow: 3px 3px 0px rgba(50, 138, 241, 0.35);

              &.prev i {
                transform: translateX(3px);
              }

              &.next i {
                transform: translateX(-3px);
              }
            }

            &:active {
              transform: translate(2px, 2px);
              box-shadow: 1px 1px 0px rgba(50, 138, 241, 0.35);
            }
          }
        }
      }
    }
  }

  &::after {
    content: "";
    position: absolute;
    width: 765px;
    height: 100%;
    background: rgba(50, 138, 241, 0.08);
    filter: blur(200px);
    top: -90%;
    left: 50%;
    transform: translate(-50%, 0);
    z-index: 0;
  }
}

/* Responsive styling for why_services section */
@media (max-width: 991px) {
  .why_services_layout {
    grid-template-columns: 1fr !important;
    gap: 30px !important;
  }
}

@media (max-width: 768px) {
  .why_services_header {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 24px !important;
  }

  .why_services_header .header_text {
    align-items: center !important;
  }

  .why_services_header .header_btns {
    width: 80% !important;
    gap: 12px !important;
    align-items: stretch !important;
  }

  .why_services_header .header_btns .btn {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
    display: flex !important;
    align-items: center !important;
  }

  .section {
    scroll-margin-top: 75px !important;
  }

  .why_services_layout {
    width: 100% !important;
    overflow: visible !important;
    padding-inline: 10px !important;
    box-sizing: border-box !important;
  }

  .services_sidebar,
  .service_workspace {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  .services_sidebar {
    padding: 15px !important;
    gap: 12px !important;
  }

  .services_sidebar .sidebar_title_text {
    display: none !important;
  }

  .services_sidebar .service_tabs_list {
    flex-direction: row !important;
    overflow-x: auto !important;
    gap: 8px !important;
    padding-bottom: 5px !important;
    -webkit-overflow-scrolling: touch;
    width: 100% !important;
    /* Hide scrollbar */
    -ms-overflow-style: none !important;
    scrollbar-width: none !important;
  }

  .services_sidebar .service_tabs_list::-webkit-scrollbar {
    display: none !important;
  }

  .services_sidebar .service_tabs_list .service_tab {
    padding: 10px 16px !important;
    white-space: nowrap !important;
    justify-content: center !important;
  }

  .service_workspace {
    min-height: auto !important;

    .workspace_header {
      gap: 8px !important;
      padding: 12px 10px !important;
      width: 100% !important;
      box-sizing: border-box !important;

      .workspace_dots {
        display: none !important;
        margin-bottom: 4px;
        justify-content: center;
      }

      .workspace_title {
        font-size: 13px !important;
        text-align: center !important;
        margin-block: 2px;
      }

      .workspace_badge {
        font-size: 10px !important;
        padding: 2px 8px !important;
      }
    }
  }

  .service_workspace .workspace_body {
    padding: 20px 15px !important;
  }

  .service_workspace .workspace_body .story_container {
    grid-template-columns: 1fr !important;
    gap: 20px !important;

    .story_text_col {
      order: 2 !important;

      h3 {
        font-size: 18px !important;
        line-height: 1.4 !important;
      }

      p {
        font-size: 13.5px !important;
        line-height: 1.6 !important;
      }
    }
  }

  .service_workspace .workspace_body .timeline_steps {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .service_workspace .workspace_body .custom_swiper_wrapper {
    padding: 0 !important;
  }

  .service_workspace .workspace_body .custom_swiper_wrapper .swiper_images_track {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px !important;
  }

  .service_workspace .workspace_body .custom_swiper_wrapper .gallery_thumbnail_img {
    height: 100px !important;
  }
}

@media (max-width: 576px) {
  .service_workspace .workspace_body .custom_swiper_wrapper .swiper_images_track {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .service_workspace .workspace_body .custom_swiper_wrapper .gallery_thumbnail_img {
    height: 180px !important;
  }
}

@media (max-width: 480px) {
  .why_services .workspace_footer {
    flex-direction: column-reverse !important;
    gap: 16px !important;
    align-items: stretch !important;
    padding: 16px !important;
  }

  .why_services .workspace_footer .active_service_cta {
    width: 100% !important;
    text-align: center;
    font-size: 12.5px !important;
    height: 38px;
  }

  .why_services .workspace_footer .slide_navigation {
    justify-content: center !important;
    width: 100% !important;
  }
}

/* Lightbox Modal CSS for Gallery Images */
.lightbox_modal {
  display: none;
  position: fixed;
  z-index: 9999;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(2, 3, 10, 0.95);
  backdrop-filter: blur(8px);
}

.lightbox_modal .lightbox_img {
  margin: auto;
  display: block;
  max-width: 85%;
  max-height: 75vh;
  object-fit: contain;
  border: 3px solid #328af1;
  box-shadow: 0 0 35px rgba(50, 138, 241, 0.4);
  animation: codeGlitch 0.25s ease-out;
  border-radius: 20px;
}

.lightbox_modal .lightbox_close {
  position: absolute;
  top: 30px;
  right: 40px;
  color: #ffffff;
  font-size: 45px;
  cursor: pointer;
  transition: 0.3s;

  &:hover {
    color: #ff5f56;
  }
}

/*=============== OUR COMPANYS ===============*/
.our_companys {
  position: relative;
  background-color: #030514;
  background-image:
    radial-gradient(circle at 50% 50%, rgba(3, 5, 20, 0.15) 0%, #030514 80%),
    linear-gradient(rgba(50, 138, 241, 0.04) 1.5px, transparent 1.5px),
    linear-gradient(90deg, rgba(50, 138, 241, 0.04) 1.5px, transparent 1.5px);
  background-size:
    100% 100%,
    40px 40px,
    40px 40px;
  padding-block: 6rem;
  overflow: hidden;

  &::before {
    content: "";
    position: absolute;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle,
        rgba(50, 138, 241, 0.12),
        transparent 70%);
    top: -200px;
    left: -200px;
    pointer-events: none;
    z-index: 1;
  }

  &::after {
    content: "";
    position: absolute;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle,
        rgba(168, 85, 247, 0.08),
        transparent 70%);
    bottom: -200px;
    right: -200px;
    pointer-events: none;
    z-index: 1;
  }

  .our_companys_container {
    z-index: 2;
    position: relative;
  }

  .companys_grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 60px;
    align-items: center;
    direction: rtl;
  }

  .companys_info_panel {
    display: flex;
    flex-direction: column;
    gap: 24px;
    text-align: right;
    color: white;

    h2 {
      font-size: var(--h2-font-size);
      font-weight: var(--font-bold);
      line-height: 1.3;
      text-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
    }

    p {
      font-size: var(--text-size);
      color: #9ab4d4;
      line-height: 1.6;
    }

    .telemetry_container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
      margin-top: 15px;
    }

    .telemetry_card {
      background: rgba(9, 12, 62, 0.25);
      border: 1px solid rgba(50, 138, 241, 0.25);
      padding: 20px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35);

      .telemetry_header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-family: monospace;
        font-size: 14px;
        letter-spacing: 0.5px;

        .telemetry_label {
          color: rgba(50, 138, 241, 0.7);
          font-weight: var(--font-medium);
        }

        .telemetry_status {
          color: #328af1;
          font-weight: bold;
          text-shadow: 0 0 8px rgba(50, 138, 241, 0.4);
          font-size: 16px;
        }
      }

      .progress_bar_container {
        width: 100%;
        height: 6px;
        background: rgba(50, 138, 241, 0.1);
        border-radius: 3px;
        overflow: hidden;
        border: 1px solid rgba(50, 138, 241, 0.15);
      }

      .progress_bar {
        height: 100%;
        background: linear-gradient(90deg, #328af1, #a855f7);
        box-shadow: 0 0 10px rgba(50, 138, 241, 0.5);
      }
    }
  }

  .companys_logos_panel {
    background: rgba(9, 12, 62, 0.2);
    border: 1px solid rgba(50, 138, 241, 0.25);
    padding: 30px 25px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.5);

    .logos_panel_header {
      display: flex;
      align-items: center;
      gap: 12px;
      border-bottom: 1px solid rgba(50, 138, 241, 0.15);
      padding-bottom: 15px;
      font-family: monospace;
      font-size: 11px;
      color: rgba(50, 138, 241, 0.75);
      letter-spacing: 0.8px;

      .panel_dot_indicator {
        width: 8px;
        height: 8px;
        background: #2ecc71;
        border-radius: 50%;
        box-shadow: 0 0 8px #2ecc71;
        animation: ledPulseGreen 2s infinite alternate;
      }
    }

    .partner_nodes_grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
      width: 100%;
    }

    .partner_node_card {
      background: rgb(47 52 149 / 25%);
      border: 1px solid rgba(50, 138, 241, 0.15);
      padding: 24px 10px;
      border-radius: 4px;
      position: relative;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 15px;
      transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
      --corner-size: 8px;
      --corner-offset: -2px;
      --corner-border-width: 1.5px;
      --corner-color: rgba(50, 138, 241, 0.3);

      .scanner_line {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: #328af1;
        opacity: 0;
        filter: drop-shadow(0 0 4px #328af1);
        pointer-events: none;
      }

      .node_glow {
        position: absolute;
        width: 60px;
        height: 60px;
        background: radial-gradient(circle,
            rgba(50, 138, 241, 0.15),
            transparent 70%);
        opacity: 0;
        transition: opacity 0.4s;
        pointer-events: none;
      }

      .node_logo {
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 2;

        img {
          height: 36px;
          width: auto;
          opacity: 1 !important;
          filter: none !important;
          transition: all 0.4s ease;
        }
      }

      .node_meta {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        padding-inline: 4px;
        font-family: monospace;
        font-size: 8.5px;
        color: rgba(255, 255, 255, 0.35);
        z-index: 2;

        .node_status {
          color: #2ecc71;
          font-weight: bold;
          text-shadow: 0 0 6px rgba(46, 204, 113, 0.4);
        }
      }

      &:hover {
        background: rgba(50, 138, 241, 0.08);
        border-color: rgba(50, 138, 241, 0.5);
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);

        .scanner_line {
          animation: scanEffect 2s linear infinite;
          opacity: 1;
        }

        .node_glow {
          opacity: 1;
        }

        .node_logo img {
          filter: none !important;
          opacity: 1 !important;
          transform: scale(1.08);
        }
      }
    }
  }
}

@keyframes ledPulseGreen {
  0% {
    opacity: 0.5;
    box-shadow: 0 0 2px #2ecc71;
  }

  100% {
    opacity: 1;
    box-shadow: 0 0 10px #2ecc71;
  }
}

@keyframes scanEffect {
  0% {
    top: 0;
  }

  50% {
    top: 100%;
  }

  100% {
    top: 0;
  }
}

@keyframes ledBlink {
  0% {
    opacity: 0.3;
  }

  100% {
    opacity: 1;
  }
}

@media screen and (max-width: 992px) {
  .our_companys {
    .companys_grid {
      grid-template-columns: 1fr;
      gap: 40px;
    }

    .companys_info_panel {
      text-align: center;

      .telemetry_container {
        max-width: 750px;
        width: 100%;
        gap: 40px;
        margin: 15px auto 0;
      }
    }

    .partner_nodes_grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }
}

/*=============== FOOTER ===============*/
.footer {
  position: relative;
  background-color: #020308;
  padding-block: 4rem 2rem;
  border-top: 1px solid rgba(50, 138, 241, 0.15);
  overflow: hidden;

  #footerCanvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    opacity: 0.5;
  }

  .footer_container {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    position: relative;
    z-index: 5;
  }

  /* Cyber System Grid (2 Columns) */
  .footer_system_grid {
    display: grid;
    grid-template-columns: 1.2fr 0.3fr;
    gap: 3rem;
    background: rgba(9, 12, 62, 0.2);
    border: 1px solid rgba(50, 138, 241, 0.12);
    padding: 2.5rem 2rem;
    border-radius: 0px;
    position: relative;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
  }

  .footer_col {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
  }

  /* Brand Column */
  .brand_col {
    .footer_logo img {
      max-height: 48px;
      width: auto;
      object-fit: contain;
    }

    .brand_slogan {
      font-size: 32px;
      color: #ebf3fe;
      font-weight: 500;
      opacity: 0.9;
    }

    .digital_indicator {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 13px;
      color: rgba(255, 255, 255, 0.5);
      font-family: monospace;

      .indicator_pulse {
        width: 8px;
        height: 8px;
        background-color: #2ecc71;
        border-radius: 50%;
        box-shadow: 0 0 8px #2ecc71;
        animation: ledBlink 1.5s infinite alternate;
      }
    }
  }

  /* Newsletter Box Styling */
  .newsletter_box {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
    width: 100%;

    .newsletter_title {
      font-size: 13px;
      color: #768ed7;
      font-family: monospace;
      letter-spacing: 0.5px;
    }

    .newsletter_input_group {
      display: flex;
      width: 100%;
      border: 1px solid rgba(50, 138, 241, 0.2);
      background: rgba(3, 4, 15, 0.6);
      transition: border-color 0.3s;

      &:focus-within {
        border-color: #328af1;
        box-shadow: 0 0 8px rgba(50, 138, 241, 0.2);
      }

      .newsletter_input {
        flex: 1;
        background: transparent;
        border: none;
        outline: none;
        padding: 10px 14px;
        font-size: 14px;
        color: #fff;
        font-family: var(--body-font);

        &::placeholder {
          color: rgba(255, 255, 255, 0.65);
        }
      }

      .newsletter_btn {
        background: rgba(50, 138, 241, 0.08);
        border: none;
        border-right: 1px solid rgba(50, 138, 241, 0.2);
        color: #328af1;
        padding: 0 16px;
        font-size: 16px;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-weight: 500;
        transition: all 0.3s;

        i {
          font-size: 12px;
          transition: transform 0.3s;
        }

        &:hover {
          background: #328af1;
          color: white;

          i {
            transform: translate(3px, -3px);
          }
        }
      }
    }
  }

  /* Action Column */
  .action_col {
    align-items: flex-start;
    text-align: right;

    .col_title {
      font-size: 14px;
      color: #328af1;
      font-family: monospace;
    }

    .footer_action_btn {
      font-size: 16px;
      font-weight: bold;
      color: #fff;
      text-decoration: none;
      transition: all 0.3s ease;
      display: inline-block;

      &:hover {
        color: #328af1;
        text-shadow: 0 0 10px rgba(50, 138, 241, 0.6);
        transform: translateY(-1px);
      }
    }

    .footer_links {
      display: flex;
      gap: 1.5rem;
      margin-top: auto;

      .page_link {
        font-size: 13px;
        color: rgba(255, 255, 255, 0.5);
        text-decoration: none;
        transition: color 0.3s;

        &:hover {
          color: #328af1;
        }
      }
    }
  }

  /* Footer Bottom Bar */
  .footer_bottom_bar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    border-top: 1px solid rgba(50, 138, 241, 0.1);
    padding-top: 1.5rem;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.3);

    .copyright_text {
      display: flex;
      align-items: center;
      gap: 10px;
      font-family: monospace;
      letter-spacing: 0.5px;

      .copyright_sep {
        color: rgba(50, 138, 241, 0.25);
      }
    }

    .footer_socials {
      display: flex;
      gap: 0.75rem;
      align-items: center;

      .social_pill {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 6px 14px;
        background: rgba(50, 138, 241, 0.05);
        border: 1px solid rgba(50, 138, 241, 0.15);
        color: rgba(255, 255, 255, 0.55);
        text-decoration: none;
        font-size: 13px;
        transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
        border-radius: 2px;

        i {
          font-size: 14px;
        }

        &:hover {
          background: rgba(50, 138, 241, 0.12);
          border-color: #328af1;
          color: #ffffff;
          box-shadow: 0 0 12px rgba(50, 138, 241, 0.3);
          transform: translateY(-2px);
        }
      }
    }
  }
}

/* Responsive Overrides */
@media screen and (max-width: 992px) {
  .footer {
    padding-inline: 2rem;

    .footer_system_grid {
      gap: 2.5rem;
      padding: 2rem 1.5rem;
    }

    .action_col {
      .footer_links {
        margin-top: 0.5rem;
      }
    }

    .footer_bottom_bar {
      flex-direction: column;
      gap: 1.25rem;
      text-align: center;
    }

    .footer_socials {
      flex-wrap: wrap;
      justify-content: center;
      gap: 10px;
    }
  }
}

@media screen and (max-width: 480px) {
  .footer {
    .newsletter_input_group {
      flex-direction: column !important;
      border: none !important;
      background: transparent !important;
      gap: 10px;
    }

    .newsletter_input {
      background: rgba(3, 4, 15, 0.6) !important;
      border: 1px solid rgba(50, 138, 241, 0.2) !important;
      width: 100% !important;
      padding: 12px 16px !important;
      text-align: center;
    }

    .newsletter_btn {
      width: 100% !important;
      justify-content: center;
      padding: 12px !important;
      border: 1px solid #328af1 !important;
    }
  }
}

/* Floating Watch Video Button */
.watch_video {
  position: fixed;
  left: 20px;
  bottom: 25px;
  z-index: 100;
  display: flex;
  align-items: center;
  background: rgba(3, 4, 15, 0.9);
  border: 2px solid #328af1;
  padding: 8px 12px;
  border-radius: 0px;
  cursor: pointer;
  box-shadow: 4px 4px 0px rgba(50, 138, 241, 0.3);
  transition: all 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
  direction: ltr;

  .key_combination {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .video_icon_only {
    display: none;
  }

  .keycap {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #101222;
    border: 1px solid rgba(50, 138, 241, 0.4);
    border-bottom: 3px solid #328af1;
    border-radius: 0px;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    padding: 4px 8px;
    min-width: 36px;
    height: 28px;
    transition: all 0.15s ease;
  }

  .plus_sign {
    color: #328af1;
    font-weight: bold;
    font-size: 14px;
  }

  .video_tooltip {
    position: absolute;
    bottom: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%) translateY(5px);
    background: #020208;
    border: 1.5px solid #328af1;
    color: #328af1;
    padding: 6px 14px;
    font-size: 12px;
    font-family: var(--body-font), monospace;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    box-shadow: 3px 3px 0px rgba(50, 138, 241, 0.25);
    transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);

    &::after {
      content: "";
      position: absolute;
      top: 100%;
      left: 50%;
      transform: translateX(-50%);
      border: 6px solid transparent;
      border-top-color: #328af1;
    }
  }

  &:hover {
    border-color: #328af1;
    box-shadow: 4px 4px 0px rgba(50, 138, 241, 0.35);

    .plus_sign {
      color: #328af1;
    }

    .keycap {
      border-color: rgba(50, 138, 241, 0.5);
      border-bottom-color: #328af1;
      color: #328af1;
    }

    .video_tooltip {
      opacity: 1;
      visibility: visible;
      transform: translateX(-50%) translateY(0);
    }
  }

  &.active-press {
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0px rgba(50, 138, 241, 0.35);

    .keycap {
      border-bottom-width: 1px;
      transform: translateY(2px);
      background: rgba(50, 138, 241, 0.15);
    }
  }

  @media (max-width: 768px) {
    padding: 0;
    width: 44px;
    height: 44px;
    justify-content: center;

    .key_combination {
      display: none !important;
    }

    .video_icon_only {
      display: flex !important;
      align-items: center;
      justify-content: center;
      color: #328af1;
      font-size: 16px;
    }

    .video_tooltip {
      display: none !important;
    }

    &:hover {
      .video_icon_only {
        color: #ffffff;
      }
    }
  }
}

/* Floating WhatsApp Button */
.whatsapp_float {
  position: fixed;
  right: 20px;
  bottom: 25px;
  z-index: 100;
  display: flex;
  align-items: center;
  background: rgba(3, 4, 15, 0.9);
  border: 2px solid #25d366;
  padding: 8px 12px;
  border-radius: 0px;
  cursor: pointer;
  box-shadow: -4px 4px 0px rgba(37, 211, 102, 0.3);
  transition: all 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
  direction: ltr;
  text-decoration: none;

  .key_combination {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .video_icon_only {
    display: none;
  }

  .keycap {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0px;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    padding: 4px 8px;
    min-width: 36px;
    height: 28px;
    transition: all 0.15s ease;
  }

  .keycap i {
    font-size: 22px;
    color: #25d366;
  }

  .plus_sign {
    color: #25d366;
    font-weight: bold;
    font-size: 14px;
  }

  .video_tooltip {
    position: absolute;
    bottom: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%) translateY(5px);
    background: #020208;
    border: 1.5px solid #25d366;
    color: #25d366;
    padding: 6px 14px;
    font-size: 12px;
    font-family: var(--body-font), monospace;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    box-shadow: -3px 3px 0px rgba(37, 211, 102, 0.25);
    transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);

    &::after {
      content: "";
      position: absolute;
      top: 100%;
      left: 50%;
      transform: translateX(-50%);
      border: 6px solid transparent;
      border-top-color: #25d366;
    }
  }

  &:hover {
    border-color: #25d366;
    box-shadow: -4px 4px 0px rgba(37, 211, 102, 0.35);

    .plus_sign {
      color: #25d366;
    }

    .keycap {
      border-color: rgba(37, 211, 102, 0.5);
      border-bottom-color: #25d366;
      color: #25d366;
    }

    .video_tooltip {
      opacity: 1;
      visibility: visible;
      transform: translateX(-50%) translateY(0);
    }
  }

  &:active,
  &.active-press {
    transform: translate(-2px, 2px);
    box-shadow: -1px 1px 0px rgba(37, 211, 102, 0.35);

    .keycap {
      border-bottom-width: 1px;
      transform: translateY(2px);
      background: rgba(37, 211, 102, 0.15);
    }
  }

  @media (max-width: 768px) {
    padding: 0;
    width: 44px;
    height: 44px;
    justify-content: center;

    .key_combination {
      display: none !important;
    }

    .video_icon_only {
      display: flex !important;
      align-items: center;
      justify-content: center;
      color: #25d366;
      font-size: 20px;
    }

    .video_tooltip {
      display: none !important;
    }

    &:hover {
      .video_icon_only {
        color: #ffffff;
      }
    }
  }
}

/*=============== PAGE CONTACT ===============*/
.contact {
  position: relative;
  background-color: #090c3e;
  padding-inline: 3rem;
  padding-block: 5.5rem 1.6875rem;
  min-height: 100vh;

  .contact_container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;

    .contact_content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 41px;
      flex-direction: column;
      text-align: center;
      padding-block: 81px 47px;
      padding-inline: 34px;
      width: 645px;
      border: 1px solid #2d3182;
      background: #2f33834f;
      backdrop-filter: blur(40px);
      -webkit-backdrop-filter: blur(40px);
      border-radius: 12px;
      z-index: 1;

      .conatact_header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 17px;
        flex-direction: column;

        h2 {
          font-size: var(--h3-font-size);
          font-weight: var(--font-medium);
          color: #ebf3fe;

          span {
            font-size: 38px;
            font-family: var(--heading-font);
          }
        }

        p {
          display: flex;
          justify-content: center;
          align-items: center;
          gap: 5px;
          font-size: var(--text-size);
          font-weight: var(--font-regular);
          color: #ebf3fe;

          i {
            padding-top: 7px;
          }

          a {
            color: #31afd6;
            text-decoration: underline;
          }
        }
      }

      .contact_form {
        display: flex;
        justify-content: center;
        align-items: start;
        flex-direction: column;
        gap: 41px;
        width: 100%;

        .contact_form_group {
          position: relative;
          display: flex;
          justify-content: center;
          align-items: start;
          flex-direction: column;
          gap: 2px;
          width: 100%;
          box-shadow: 0px 4px 10px 0px #0000001e;

          input {
            padding: 25px 23px;
            height: 62px;
            width: 100%;
            background: #22256f;
            backdrop-filter: blur(40px);
            -webkit-backdrop-filter: blur(40px);
            font-size: var(--text-size);
            font-weight: var(--font-regular);
            color: white;

            &::placeholder {
              color: white;
            }

            &:first-child {
              border-radius: 6px 6px 0 0;
            }

            &:last-child {
              border-radius: 0 0 6px 6px;
            }

            &:focus {
              background-color: #2d3182;
            }
          }

          .email_error {
            position: absolute;
            color: #e04f5f;
            font-size: 12px;
            display: block;
            left: 13px;
            top: 30px;
            z-index: 5;
          }
        }

        .cta_group {
          display: flex;
          justify-content: center;
          align-items: start;
          flex-direction: column;
          gap: 16px;
          width: 100%;

          .checkbox {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 8px;

            input {
              width: 21px;
              height: 21px;
              cursor: pointer;
            }

            label {
              font-size: var(--text-size);
              font-weight: var(--font-regular);
              color: #717c99;
              padding-bottom: 7px;
              cursor: pointer;
            }

            input:checked+label {
              color: #f1f2f5;
            }
          }

          .cta_selecation {
            display: none;
            justify-content: start;
            align-items: center;
            gap: 17px;
            height: 32px;

            .meeting_select,
            input {
              display: flex;
              justify-content: center;
              align-items: center;
              width: 116px;
              height: 32px;
              background: #48abca;
              border-radius: 2px;
              outline: none;
              border: 1px solid #88f6ff;
              font-size: 14px;
              font-weight: var(--font-regular);
              color: white;
              cursor: pointer;

              option {
                background: #48abca;
                color: white;

                &:hover {
                  background: #48abca;
                  color: white;
                }
              }
            }

            input[type="time"] {
              padding: 10px;
              font-size: 14px;
            }

            input[type="time"]::-webkit-calendar-picker-indicator {
              filter: invert(1);
              cursor: pointer;
            }
          }
        }

        .contact_btn {
          gap: 12px;
          color: white;
          width: 100%;
          height: 57px;
          border-radius: 2px;
          /* background-color removed */
          border: 0.8px solid #58a1f6;
          font-size: 24px;
          font-weight: var(--font-regular);
          padding-bottom: 10px;
          cursor: pointer;

          i {
            margin-bottom: -7px;
          }
        }
      }

      .tagline {
        position: relative;
        width: 100%;

        p {
          font-size: 14px;
          font-weight: var(--font-regular);
          color: #9394b7;
          font-family: var(--heading-font);
        }

        &::after {
          content: "";
          position: absolute;
          width: 200px;
          height: 1px;
          background: #4a4d8e;
          top: 50%;
          left: 20px;
          transform: translateY(-50%);
        }

        &::before {
          content: "";
          position: absolute;
          width: 200px;
          height: 1px;
          background: #4a4d8e;
          top: 50%;
          right: 20px;
          transform: translateY(-50%);
        }
      }
    }

    .popup_contact {
      display: none;
      justify-content: space-between;
      align-items: center;
      gap: 15px;
      flex-direction: column;
      text-align: center;
      padding: 27px 52px;
      width: 416px;
      background: #2f33834f;
      backdrop-filter: blur(40px);
      -webkit-backdrop-filter: blur(40px);
      border-radius: 12px;

      img {
        width: 76px;
        height: 76px;
      }

      .popup_text {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 5px;
        flex-direction: column;

        h2 {
          font-size: var(--h3-font-size);
          font-weight: var(--font-regular);
          color: #ebf3fe;
          font-family: var(--heading-font);
        }

        p {
          font-size: var(--text-size);
          font-weight: var(--font-regular);
          color: #bfdbfb;
        }
      }

      .popup_btns {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 21px;
        margin-top: 3rem;

        .btn {
          width: 145px;
          height: 38px;
          border-radius: 2px;
          font-size: var(--text-size);
          font-weight: var(--font-regular);
          color: white;
        }

        .btn_prime {
          padding-bottom: 7px;
          background: rgba(255, 255, 255, 0.05);
          backdrop-filter: blur(10px);
          -webkit-backdrop-filter: blur(10px);
          box-shadow:
            rgba(255, 255, 255, 0.3) 0px 1px 1px inset,
            rgba(0, 0, 0, 0.3) 0px -2px 1px inset;
        }

        .btn_secondry {
          background: rgba(50, 138, 241, 0.06) !important;
          border: 1px solid #328af140;
          padding-bottom: 7px;
        }
      }
    }

    .contact_img1,
    .contact_img2 {
      position: absolute;
      z-index: 0;
    }

    .contact_img1 {
      width: 162px;
      height: 162px;
      top: -20px;
      left: -20px;
    }

    .contact_img2 {
      width: 156.5932159423828px;
      height: 160.5394287109375px;
      bottom: 40%;
      right: 0;
    }
  }

  &::before {
    content: "";
    position: absolute;
    width: 293px;
    height: 181px;
    background: #4a3aff;
    bottom: 0;
    left: 0;
    z-index: 0;
    filter: blur(150px);
  }

  &::after {
    content: "";
    position: absolute;
    width: 293px;
    height: 181px;
    background: #4a3aff;
    bottom: 0;
    right: 0;
    z-index: 0;
    filter: blur(150px);
  }
}

/*=============== PAGE SOCIAL ===============*/
.page_social {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url(assets/image/bg\ social.png);
  background-position: center;
  background-repeat: no-repeat;
  min-height: 100vh;
  padding-top: 0;

  .page_social_container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;

    .social_content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-direction: column;
      gap: 54px;
      z-index: 5;

      .img_text {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        gap: 21px;

        img {
          width: 368.999755859375px;
          height: 44.406517028808594px;
          filter: drop-shadow(0px 1.26px 30px #328af1);
        }

        h2 {
          font-size: 23px;
          font-weight: var(--font-bold);
          color: white;
        }
      }

      h3 {
        position: relative;
        font-size: 20px;
        color: #ebf3fe;
        margin-bottom: 27px;
        font-family: var(--heading-font);
        z-index: 1;

        &::after {
          content: "";
          position: absolute;
          background-image: url(https://foursw.com/wp-content/uploads/2026/03/smile.png);
          background-position: center;
          background-size: cover;
          background-repeat: no-repeat;
          width: 180px;
          height: 29px;
          bottom: -26px;
          left: 50%;
          z-index: -1;
          transform: translateX(-50%);
        }
      }

      .social_links {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        max-width: 804px;
        gap: 39px;

        a {
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;
          gap: 6px;
          font-size: 28px;
          font-weight: var(--font-bold);
          color: white;
          background-color: #121650;
          border: 2px solid #212368;
          backdrop-filter: blur(16px);
          border-radius: 6px;
          width: 242px;
          height: 134px;
          transition: all 0.3s ease-in-out;

          img {
            width: 38px;
            height: 38px;
          }

          &:hover {
            background-color: #3189f0;
            box-shadow: 0px 1.26px 60px 0px #328af199;
            border: 2px solid #53a1fd;
          }
        }
      }
    }
  }

  &::before {
    content: "";
    position: absolute;
    height: 100%;
    width: 180px;
    background: #241f6c;
    filter: blur(120px);
    opacity: 0.9;
    top: 0;
    left: 0;
    z-index: 1;
  }

  &::after {
    content: "";
    position: absolute;
    height: 100%;
    width: 200px;
    background: #100b6a;
    filter: blur(120px);
    opacity: 0.9;
    top: 0;
    right: 0;
    z-index: 1;
  }
}

/*=============== WATCH VIDEO ===============*/
.myvideo {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  display: none;
  background-color: rgba(2, 3, 10, 0.85);
  backdrop-filter: blur(8px);
  justify-content: center;
  align-items: center;
}

.video_window {
  position: relative;
  background: #030514;
  border: 2px solid #328af1;
  width: 90%;
  max-width: 800px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8);
  display: flex;
  flex-direction: column;
  z-index: 5;
  border-radius: 0px;
  animation: codeGlitch 0.25s ease-out;

  .video_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #020208;
    border-bottom: 2px solid #328af1;
    padding: 12px 20px;
    direction: ltr;

    .video_dots {
      display: flex;
      gap: 8px;

      .dot {
        width: 11px;
        height: 11px;
        border: 1px solid rgba(255, 255, 255, 0.15);
        cursor: pointer;
        transition: transform 0.1s ease;
        border-radius: 0px;

        &.red {
          background: #ff5f56;

          &:hover {
            transform: scale(1.15);
          }
        }

        &.yellow {
          background: #ffbd2e;
        }

        &.green {
          background: #27c93f;
        }
      }
    }

    .video_title {
      font-family: var(--body-font), monospace;
      font-size: 13.5px;
      font-weight: 500;
      color: #328af1;
      direction: rtl;
    }
  }

  .video_body {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    background: #020208;

    iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border: 0;
    }
  }
}

/*=============== RESPONSIVE ===============*/
@media (max-width: 1200px) {

  .header.scrolled .nav.container {
    max-width: 980px;
  }

  .header.scrolled .nav {
    padding-inline: 1.5rem;
  }

  /*===============HOME===============*/
  .home {
    .home_container {
      gap: 130px;

      .home_content {
        gap: 40px;

        .pra {
          width: fit-content;
          height: 38px;
          font-size: 14px;
        }

        .home_title {
          font-size: 38px;
        }

        .our_serv {
          gap: 10px;

          .serv {
            width: 108px;
            height: 66px;

            i {
              font-size: 19px;
            }
          }
        }
      }

      .arrows {
        width: 125px;
      }
    }

    .seo_img {
      width: 160px;
      height: 160px;
      top: 14%;
      right: 4%;
    }

    .timer_img {
      width: 115px;
      height: 115px;
      top: 18%;
      left: 4%;
    }

    .idea_img2 {
      width: 150px;
      height: 150px;
      top: 72%;
      right: 3%;
    }

    .target_img {
      width: 140px;
      height: 140px;
      top: 78%;
      left: 6%;
    }

    .code_img,
    .idea_img3 {
      width: 68px;
      height: 68px;
    }

    .code_img {
      top: 50%;
      right: 18%;
    }

    .idea_img3 {
      top: 48%;
      left: 18%;
    }

    .code_snippets {
      padding: 11px;
      width: 260px;

      p,
      .p_code {
        width: 155px;
      }
    }

    .code_snippets1 {
      top: 11%;
      right: 4%;
    }

    .code_snippets4 {
      top: 14%;
      left: 4%;
    }

    .code_snippets2 {
      top: 75%;
      left: 6%;
    }

    .code_snippets3 {
      top: 73%;
      right: 8%;
    }
  }

  /*===============PROJECTS===============*/
  .projects {
    padding-block: 6rem 3.8rem;

    .projects_container {
      .projects_header {
        gap: 20px;

        .section_title {
          font-size: 38px;
        }

        p {
          font-size: 19px;
        }
      }

      .projects_content {
        gap: 40px;
        margin-top: 20px;


        .projects_data {
          .header_data {
            .section_title {
              font-size: 30px;
            }

            .section_subtitle {
              font-size: 20px;
            }
          }

          .projects_content_data {
            .border {
              width: 60px;
              height: 225px;

              img {
                width: 60px;
                height: 41px;
              }
            }

            .group_text {
              gap: 45px;

              a {
                width: 175px;
                height: 40px;
              }
            }
          }
        }

        .swiper_container {
          width: 520px;
          padding: 22px;

          .project_swiper {
            .swiper-slide {
              .project_link {
                width: 175px;
                height: 41px;
              }
            }

            .buttons {
              .swiper-button-prev {
                right: 6%;
              }

              .swiper-pagination {
                gap: 5px;

                .swiper-pagination-bullet {
                  width: 12px;
                  height: 12px;
                }
              }
            }
          }

          &::after {
            height: 480px;
            filter: blur(110px);
          }
        }
      }
    }

    .symbols_img {
      width: 105px;
      height: 105px;
      top: 55px;
      left: 90px;
    }

    .tree_img {
      width: 110px;
      height: 107px;
      bottom: 50px;
      left: 35px;
    }

    .rocet_img {
      width: 120px;
      height: 120px;
      right: 28%;
      bottom: 34px;
    }

    .check_hand_img {
      width: 92px;
      height: 49px;
      right: 120px;
    }
  }

  /*===============ABOUT US===============*/
  .about_us {
    padding-block: 6rem;

    .about_us_container {
      gap: 120px;

      .about_us_content {
        gap: 45px;

        .swiper_container {
          .about_swiper {
            width: 340px;
            padding: 16px 16px 68px 16px;
          }
        }

        .target {
          width: 320px;
          height: 320px;

          h2 {
            width: 200px;
          }
        }
      }

      .logo_img {
        width: 122px;
        height: 126px;
      }
    }

    .contract {
      width: 165px;
      height: 165px;
      bottom: 155px;
      left: 80px;
    }

    .target_image {
      width: 132px;
      height: 132px;
      bottom: 40px;
      right: 75px;
    }
  }

  /*===============SERVICES===============*/
  .services {
    padding-block: 7rem 1rem;

    .services_container {
      .services_content {

        .services_header {
          gap: 20px;
          margin-bottom: 40px;

          h2 {
            font-size: 38px;
          }

          p {
            font-size: 19px;
          }

          a {
            width: 220px;
            height: 40px;
          }

          &::after,
          &::before {
            width: 250px;
            height: 170px;
            filter: blur(95px);
          }
        }

        .main_service_display {
          max-width: 880px;
        }

        .services_selector_grid {
          max-width: 880px;
        }

        .services_actions {
          margin-top: 0;
        }
      }
    }

    .decoration1,
    .decoration2 {
      width: 235px;
      height: 215px;
    }

    .decoration3,
    .decoration4 {
      width: 285px;
      height: 260px;
    }

    .decoration3 {
      left: 26%;
    }

    .decoration4 {
      right: 26%;
    }

    .chart,
    .layer {
      font-size: 90px;
    }

    .chart {
      right: 40px;
    }

    .layer {
      left: 40px;
    }
  }

  /*===============TESTIMONIALS===============*/
  .testimonials {
    padding-block: 3rem;

    .testimonials_container {
      .testimonials_content {
        gap: 60px;

        .testimonials_header {
          width: 620px;

          h2 {
            font-size: 38px;

            &::after {
              width: 330px;
            }
          }
        }
      }
    }
  }

  /*===============WHY SERVICES===============*/
  .why_services {
    padding-block: 3rem;

    .why_services_container {
      .why_services_header {
        gap: 55px;

        .header_text {
          h2 {
            font-size: 38px;
          }

          p {
            max-width: 500px;
            width: 100%;
          }
        }

        .header_btns {
          gap: 40px;
          flex-wrap: wrap;

          .btn {
            height: 43px;
          }
        }

        &::after {
          top: 42px;
          left: -40px;
        }
      }

      .why_services_content {
        gap: 9rem;


        .why_services_data {
          gap: 9rem;

          .item {
            .item_text {
              width: 460px;
              gap: 40px;

              .item_body {
                gap: 30px;

                .body_text {
                  p {
                    font-size: 15.5px;
                  }
                }
              }
            }

            .item_solve {
              width: 470px;
              padding: 34px 10px;

              .solve_body {
                .body_text {
                  padding: 11px 22px 16px 22px;
                }
              }
            }

            &::after {
              height: 240px;
              top: -32%;
            }
          }
        }
      }
    }

    &::after {
      width: 720px;
      filter: blur(190px);
      top: -95%;
    }
  }

  /*===============BANNAR===============*/
  .bannar {
    padding-block: 6.5rem 4.5rem;

    .bannar_container {
      .bannar_content {
        gap: 4.5rem;
        padding: 60px 16px;

        .bannar_text {
          gap: 3.2rem;

          .bannar_header {
            h2 {
              font-size: calc(var(--h1-font-size) * 0.92);
            }

            p {
              width: 540px;
            }
          }
        }

        &::before,
        &::after {
          width: 560px;
          height: 130px;
          filter: blur(150px);
        }

        &::before {
          bottom: 55px;
          left: -110px;
        }

        &::after {
          top: 55px;
          right: -110px;
        }
      }
    }
  }

  /*===============OUR COMPANYS===============*/
  .our_companys {
    .our_companys_container {
      .our_companys_content {
        gap: 48px;

        .our_companys_header {
          h2 {
            font-size: calc(var(--h3-font-size) * 0.98);
          }
        }

        .marquee_swiper img {
          height: 92px;
        }

        .statistics_strip {
          gap: 30px;
        }
      }
    }
  }

  .our_companys {
    .companys_info_panel {
      h2 {
        font-size: 30px;
      }

      .telemetry_card {
        .telemetry_header {
          h3 {
            font-size: 18px;
          }

          .telemetry_status {
            font-size: 14px;
          }
        }
      }
    }
  }

  /*===============FOOTER===============*/
  .legacy_footer_override_1 {
    padding-block: 16rem 0;

    .footer_container {
      gap: 7.5rem;

      .footer_content {
        .footer_logo {
          width: 560px;
          height: auto;
        }

        .footer_text {
          h2 {
            font-size: calc(var(--h2-font-size) * 0.95);
          }
        }

        .footer_btn {
          a {
            margin-top: 50px;
          }
        }
      }

      .footer_copyright {
        padding-inline: 5rem;

        .slogan {
          font-size: calc(var(--h3-font-size) * 0.75);
        }

        .pages {
          gap: 26px;
        }
      }
    }

    &::after {
      height: 380px;
      top: -180px;
      width: 120%;
    }

    &::before {
      box-shadow: rgba(29, 91, 246, 0.34) 0 0px 210px 440px;
    }

    .scrollTopBtn {
      bottom: 120px;
    }
  }

  /*===============PAGE CONTACT===============*/
  .contact {
    padding-inline: 2rem;
    padding-block: 7rem 5rem;

    .contact_container {
      .contact_content {
        width: 600px;
        padding-block: 70px 45px;

        .contact_form {
          gap: 36px;
        }
      }
    }

    &::before,
    &::after {
      width: 260px;
      height: 170px;
      filter: blur(140px);
    }
  }

  .footer {
    .brand_col {
      .footer_logo img {
        max-height: 45px;
      }

      .brand_slogan {
        font-size: 30px;
      }
    }
  }
}

@media (max-width: 991px) {
  .nav {
    padding: 7px 40px !important;
    display: flex !important;
    justify-content: center !important;
    position: relative !important;
  }

  .header.scrolled {
    .nav {
      padding: 7px 40px !important;
    }
  }

  .header.scrolled .nav.container {
    max-width: 90%;
  }

  .nav_list,
  .btn_stor,
  .nav_left {
    display: none !important;
  }

  .nav_right {
    display: flex !important;
    position: absolute !important;
    left: 35px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
  }

  .btn_contact {
    display: inline-flex !important;
    font-size: 12px !important;
    padding: 6px 14px !important;
    height: 38px !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    border-radius: 3px !important;
  }

  .btn_contact i {
    display: inline-flex !important;
  }

  .img_logo {
    margin: 0 auto !important;
  }

  .nav_toggle {
    display: flex !important;
    align-items: center;
    justify-content: center;
    position: absolute !important;
    right: 35px !important;
    left: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    border-radius: 3px !important;
  }

  .mobile_menu.show {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  /*=============== HOME ===============*/
  .home {
    min-height: 100vh;

    .home_container {
      padding-top: 5rem;
      gap: 171.5px;

      .home_content {
        gap: 47px;

        .pra {
          height: 38px;
        }

        .home_title {
          font-size: 40px;

          .idea {
            &::after {
              width: 27.441558837890625px;
              height: 27.441558837890625px;
              top: 14px;
            }
          }

          .search {
            &::after {
              width: 24.799999237060547px;
              height: 24.799999237060547px;
              top: 13px;
            }
          }
        }

        .smile {
          font-size: 18px;

          &::after {
            width: 111px;
            height: 18px;
            bottom: -9px;
          }
        }

        .our_serv {
          gap: 16px;

          .serv {
            width: 112px;
            height: 68px;

            i {
              font-size: 18px;
            }

            h2 {
              font-size: 18px;
            }
          }
        }
      }

      .arrows {
        width: 120px;

        .arrow1 {
          width: 17px;
          height: auto;
        }

        .arrow2 {
          width: 20px;
          height: auto;
        }

        .arrow3 {
          width: 27px;
          height: auto;
        }
      }
    }

    &::before {
      width: 190px;
      filter: blur(110px);
      opacity: 0.85;
    }

    &::after {
      width: 220px;
      filter: blur(110px);
      opacity: 0.85;
    }

    .seo_img {
      width: 121px;
      height: 121px;
      top: 13%;
      right: 36px;
    }

    .timer_img {
      width: 101px;
      height: 101px;
      top: 17%;
      left: 68px;
    }

    .idea_img2 {
      width: 142px;
      height: 142px;
      top: 74%;
      right: 23px;
    }

    .target_img {
      width: 133px;
      height: 133px;
      top: 79%;
      left: 21px;
    }

    .code_img,
    .idea_img3 {
      width: 62px;
      height: 62px;
    }

    .code_img {
      top: 52%;
      right: 14%;
    }

    .idea_img3 {
      top: 50%;
      left: 14%;
    }

    /* نخلي السنايبس جوه المشهد ومتبقاش مزاحمه */
    .code_snippets {
      width: 191px;
      padding: 10px;
      z-index: 4;
      filter: blur(0px);

      .span {
        font-size: 9px;
      }

      p,
      .p_code {
        font-size: 10px;
        width: 100%;
      }

      .p_code {
        margin-left: 5px;
      }
    }

    .code_snippets1 {
      top: 15%;
      right: 3%;
    }

    .code_snippets4 {
      top: 10%;
      left: 3%;
    }

    .code_snippets2 {
      top: 70%;
      left: 4%;
    }

    .code_snippets3 {
      top: 73%;
      right: 5%;
    }
  }

  /*===============PROJECTS===============*/
  .projects {
    padding-block: 5rem 6.2rem;

    .projects_container {
      .projects_list {
        align-items: center;


      }

      .projects_content {
        align-items: center;
        gap: 55px;

        .projects_data {
          width: 100%;
          gap: 45px;
          z-index: 1;

          .header_data {
            .section_title {
              font-size: 32px;
            }

            .section_subtitle {
              font-size: 22px;
            }
          }

          .projects_content_data {
            gap: 5px;

            .border {
              margin-top: -7rem;
              height: 201px;
              width: 56px;

              img {
                width: 58px;
                height: 40px;
              }

              .img1 {
                top: 8%;
                left: 2%;
              }

              .img2 {
                top: 43%;
                left: 2%;
              }

              .img3 {
                bottom: 5px;
              }
            }

            .group_text {
              max-width: 620px;
              gap: 44px;

              .text {
                padding: 0 10px;

                p {
                  font-size: 14px;
                  padding-bottom: 5px;
                }
              }

              a {
                font-size: 14px;
                width: 185px;
                height: 45px;
                margin-top: -10px;
              }
            }
          }
        }

        .swiper_container {
          width: 100%;
          max-width: 414px;
          padding: 17.95px;

          .project_swiper {
            padding-bottom: 44px;

            .swiper-slide {
              .project_link {
                width: 175px;
                height: 41px;
              }
            }

            .buttons {
              .swiper-button-prev {
                top: 95%;
                right: 4%;
              }

              .swiper-pagination {
                bottom: 8px;

                .swiper-pagination-bullet {
                  width: 12px;
                  height: 12px;
                }
              }
            }
          }

          &::after {
            height: 460px;
            filter: blur(110px);
          }
        }
      }
    }

    &::before {
      width: 240px;
      height: 120px;
      filter: blur(110px);
      opacity: 0.85;
    }

    .symbols_img {
      width: 95px;
      height: 95px;
      top: 40px;
      left: 60px;
      opacity: 0.95;
    }

    .tree_img {
      width: 100px;
      height: 98px;
      bottom: 40px;
      left: 25px;
      opacity: 0.95;
    }

    .rocet_img {
      width: 112px;
      height: 112px;
      right: 20%;
      bottom: 28px;
      opacity: 0.95;
    }

    .check_hand_img {
      width: 88px;
      height: 46px;
      right: 70px;
      top: 36%;
      opacity: 0.95;
    }
  }

  /*===============ABOUT US===============*/
  .about_us {
    padding-block: 8.4375rem;

    .about_us_container {
      gap: 9rem;

      .about_us_content {
        justify-content: center;
        gap: 25px;

        .swiper_container {
          .about_swiper {
            padding: 12px 12px 54px 12px;
            width: 300px;

            .swiper-slide {
              gap: 19px;

              .swiper_header {
                text-align: center;
                gap: 4px;

                img {
                  width: 35px;
                  height: 35px;
                }

                h2 {
                  font-size: 24px;
                }
              }

              .swiper_body {
                gap: 10px;

                p {
                  font-size: 12px;
                }
              }
            }
          }

          &::after {
            bottom: -50%;
            left: 38%;
            width: 45%;
            height: 45%;
            opacity: 0.95;
            z-index: 1;
          }
        }

        .swiper_container2 {
          &::after {
            left: 25%;
          }
        }

        .target {
          width: 225px;
          height: 225px;

          h2 {
            font-size: 40px;
            width: 190px;
          }
        }
      }

      .logo_img {
        position: relative;
        width: 118px;
        height: 122px;

        &::after {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 50%;
          height: 3px;
          box-shadow: 0 0 150px 44px rgba(50, 138, 241);
        }
      }
    }

    .contract {
      width: 150px;
      height: 150px;
      bottom: 140px;
      left: 55px;
      opacity: 0.95;
    }

    .target_image {
      width: 122px;
      height: 122px;
      bottom: 35px;
      right: 55px;
      opacity: 0.95;
    }
  }

  /*===============SERVICES===============*/
  .services {
    padding-block: 4.5rem 1rem;

    .services_container {
      .services_content {

        .services_header {
          h2 {
            font-size: 32px;
          }

          p {
            font-size: 20px;
          }

          a {
            width: 215px;
          }

          &::after,
          &::before {
            width: 240px;
            height: 160px;
            filter: blur(90px);
          }
        }

        .services_img {
          .service_window_mockup {
            max-width: 100%;
          }
        }

        .services_data {
          order: 2;

          .data_list {
            ul {
              li {
                font-size: 16px;
              }
            }
          }
        }

        .main_service_display {
          width: 100%;
          max-width: 100%;
          grid-template-columns: 1fr;
          gap: 30px;
          padding: 30px;
        }

        .services_img .service_window_mockup .window_body {
          height: 260px;
        }

        .services_selector_grid {
          width: 100%;
          max-width: 660px;
          grid-template-columns: repeat(2, 1fr);
          gap: 15px;

          &.show {
            max-height: 800px;
          }
        }
      }
    }

    /* نقلل الزحمة */
    .decoration3,
    .decoration4 {
      width: 311px;
      height: 285px;
    }

    .decoration3 {
      left: 15%;
    }

    .decoration4 {
      right: 15%;
    }

    .decoration1,
    .decoration2 {
      width: 253.181884765625px;
      height: 232.08367919921875px;
      opacity: 0.95;
    }

    .chart,
    .layer {
      font-size: 80px;
    }

    .chart {
      right: 28px;
    }

    .layer {
      left: 28px;
    }
  }

  /*===============TESTIMONIALS===============*/
  .testimonials {
    padding-block: 6.5rem 6.6rem;

    .testimonials_container {
      .testimonials_content {
        gap: 55px;

        .testimonials_header {
          width: 100%;
          max-width: 535px;

          .span_header {
            width: 160px;
            height: 37px;
            font-size: 14px;
          }

          h2 {
            font-size: 32px;
            margin-bottom: 20px;

            &::after {
              width: 250px;
            }
          }

          p {
            font-size: 14px;
            max-width: 100%;
          }
        }
      }
    }
  }

  /*===============WHY SERVICES===============*/
  .why_services {
    padding-block: 3.5rem;

    .why_services_container {
      .why_services_content {
        gap: 10.75rem;

        .why_services_header {
          gap: 63px;

          .header_text {
            h2 {
              font-size: 40px;
            }

            p {
              width: 100%;
              font-size: 18px;
              max-width: 520px;
            }
          }

          .header_btns {
            gap: 48px;

            .btn {
              font-size: 16px;
              width: 195px;
              height: 44px;
            }
          }

          &::after {
            width: 52px;
            left: -55px;
            top: 55px;
            top: 38px;
            opacity: 0.95;
          }
        }

        .why_services_data {
          gap: 10.1875rem;

          .item {
            gap: 93px;

            .item_text {
              width: 100%;
              max-width: 430px;
              gap: 39px;

              .item_header {
                gap: 12px;

                img {
                  width: 39px;
                  height: 39px;
                }

                h2 {
                  font-size: 24px;
                }
              }

              .item_body {
                gap: 31px;

                .body_text {
                  gap: 12px;

                  span {
                    gap: 6px;
                    font-size: 14px;
                  }

                  p {
                    font-size: 14px;
                  }
                }
              }
            }

            .item_solve {
              width: 100%;
              max-width: 370px;
              gap: 15px;
              padding: 28px 16px;

              .solve_header {
                gap: 3px;

                h3 {
                  font-size: 14px;

                  img {
                    width: 23.1287px;
                    height: 23.1287px;
                  }
                }

                p {
                  font-size: 12px;
                }
              }

              .solve_body {
                gap: 20px;

                .body_text {
                  padding: 8.67px 17.35px;

                  span {
                    font-size: 14px;

                    .shape_group {
                      width: 16px;

                      .shape {
                        height: 3px;
                      }
                    }
                  }

                  p {
                    font-size: 12px;
                  }
                }
              }
            }

            /* نخلي الفاصل عمودي يظهر انسيابي */
            &::after {
              height: 220px;
              top: -28%;
            }
          }
        }
      }
    }

    &::after {
      width: 680px;
      filter: blur(185px);
      top: -100%;
    }
  }

  /*===============BANNAR===============*/
  .bannar {
    padding-block: 6rem 4.2rem;

    .bannar_container {
      .bannar_content {
        gap: 44px;
        padding: 64px 16px;

        .bannar_text {
          gap: 56px;

          .bannar_header {
            gap: 24px;

            h2 {
              font-size: 40px;
            }

            p {
              font-size: 16px;
              width: 100%;
              max-width: 560px;
            }
          }

          a {
            width: 191px;
            height: 42px;
          }
        }

        &::before,
        &::after {
          width: 200px;
          height: 125px;
          filter: blur(145px);
          opacity: 0.95;
        }

        &::before {
          bottom: 50px;
          left: -120px;
        }

        &::after {
          top: 50px;
          right: -120px;
        }
      }
    }
  }

  /*===============OUR COMPANYS===============*/
  .our_companys {
    .our_companys_container {
      .our_companys_content {
        gap: 52px;

        .our_companys_header {
          gap: 9px;

          h2 {
            font-size: 32px;
          }

          p {
            font-size: 18px;
          }
        }

        .marquee_swiper img {
          height: 86px;
        }

        .statistics_strip {
          gap: 31px;

          .stat_item {
            gap: 4px;

            p {
              font-size: 14px;
            }
          }
        }
      }
    }
  }

  /*===============FOOTER===============*/
  .legacy_footer_override_2 {
    padding-block: 14.5rem 0;

    .footer_container {
      gap: 6.5rem;

      .footer_content {
        .footer_logo {
          width: 520px;
        }

        .footer_text {
          h2 {
            font-size: 28px;
            text-align: center;
          }
        }

        .footer_btn {
          a {
            width: 150px;
            height: 31px;
            margin-top: 44px;
            font-size: 17px;
          }
        }
      }

      .footer_copyright {
        padding-inline: 3rem;
        padding-block: 20px;
        gap: 18px;

        .social {
          gap: 15px;

          a {
            width: 21.7074px;
            height: 21.7074px;
          }
        }

        .pages {
          gap: 23px;

          a {
            font-size: 11.27px;
          }
        }

        .slogan {
          font-size: 22.53px;
        }
      }
    }

    &::after {
      height: 360px;
      top: -175px;
    }

    .scrollTopBtn {
      right: 3%;
      bottom: 110px;
      width: 34px;
      height: 46px;
    }

    .watch_video {
      left: 12px;
      bottom: 12px;
    }
  }

  /*===============PAGE CONTACT===============*/
  .contact {
    padding-inline: 1.5rem;
    padding-block: 72px 4.5rem;

    .contact_container {
      .contact_content {
        width: 100%;
        max-width: 592px;
        padding-block: 65px 42px;

        .tagline {

          &::after,
          &::before {
            width: 175px;
          }
        }
      }

      .popup_contact {
        width: 416px;

        .popup_btns {
          margin-top: 2rem;
        }
      }

      .contact_img1 {
        width: 144px;
        height: 144px;
        top: -15px;
        left: -10px;
      }

      .contact_img2 {
        width: 129.28147888183594px;
        height: 132.5394287109375px;
        bottom: 35%;
      }
    }

    &::before,
    &::after {
      width: 193px;
      height: 96px;
      filter: blur(140px);
      opacity: 0.95;
    }
  }
}

@media (max-width: 768px) {
  .header {
    .nav {
      padding: 11px 24px !important;

      .img_logo {
        width: 143.9651px;
        height: 17.3252px;
      }
    }
  }

  .header.scrolled {
    top: 20px;
  }

  .header.scrolled .nav {
    padding: 7px 42px;
  }

  .header.scrolled .nav.container {
    max-width: 87%;
  }

  /*=============== HOME ===============*/
  .home {

    .home_container {
      gap: 152px;

      .home_content {
        gap: 47px;

        .pra {
          height: 38px;
          font-size: 14px;
          padding-inline: 11px;
          gap: 11px;
        }

        .home_title {
          /* العناوين عادة بتحتاج تهدي ع الموبايل */
          font-size: 38px;

          .idea {
            &::after {
              width: 28px;
              height: 28px;
              top: 4px;
            }
          }

          .search {
            &::after {
              width: 24.799999237060547px;
              height: 24.799999237060547px;
              top: 7px;
            }
          }
        }

        .smile {
          font-size: 18px;

          &::after {
            width: 110px;
            height: 18px;
            bottom: -8px;
          }
        }

        .our_serv {
          justify-content: center;
          max-width: 500px;
          width: 100%;

          .serv {
            width: 112px;
            height: 68px;
            backdrop-filter: blur(1px);

            i {
              font-size: 20px;
            }

            h2 {
              font-size: 18px;
            }
          }
        }
      }

      .arrows {
        width: 110px;
        gap: 5px;
      }
    }

    /* Hide cluttered elements on tablet */
    .seo_img,
    .target_img,
    .timer_img,
    .code_img,
    .idea_img2,
    .idea_img3 {
      display: none !important;
    }

    .code_snippets {
      filter: blur(6px);

      &:hover {
        filter: blur(6px);
        border: none;
        transform: scale(1);
      }
    }
  }

  /*===============PROJECTS===============*/
  .projects {
    padding-block: 4.8rem 3.5rem;

    .projects_container {
      .projects_content {
        flex-direction: column-reverse;
        align-items: center;
        justify-content: center;
        gap: 65px;

        .projects_data {
          width: 415px;
          gap: 38px;

          .header_data {
            .section_title {
              font-size: 24px;
            }

            .section_subtitle {
              font-size: 18px;
            }
          }

          .projects_content_data {
            .border {
              margin-right: -15px;

              &::after {
                position: absolute;
                content: "";
                top: 0;
                left: 0;
                transform: translate(-25%, -99%);
                width: 65px;
                height: 500.25px;
                z-index: -1;
                border-right: 3px solid #362984;
              }
            }

            .group_text {
              gap: 44px;

              a {
                width: 241px;
                height: 42px;
              }
            }
          }
        }

        .swiper_container {
          width: 414px;
          padding: 20px;

          .project_swiper {
            .swiper-slide {
              .project_link {
                width: 170px;
                height: 40px;
                font-size: 0.95rem;
              }
            }

            .buttons {
              .swiper-button-prev {
                right: 5%;
              }
            }
          }

          &::after {
            height: 420px;
            filter: blur(105px);
          }
        }
      }
    }

    /* نقلل الزحمة */
    .check_hand_img,
    .rocet_img {
      display: none;
    }

    .symbols_img {
      width: 88px;
      height: 88px;
      top: 32px;
      left: 28px;
    }

    .tree_img {
      width: 92px;
      height: 90px;
      bottom: 30px;
      left: 18px;
    }
  }

  /*===============ABOUT US===============*/
  .about_us {
    padding-block: 5rem;

    .about_us_container {
      position: relative;
      gap: 95px;

      .about_us_content {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 110px;
        row-gap: 15rem;

        .swiper_container {
          width: 100%;
          max-width: 280px;

          .about_swiper {
            width: 100%;
            padding: 12px 12px 54px 12px;

            .swiper-slide {
              .swiper_header {
                h2 {
                  font-size: 24px;

                  &::after {
                    width: 145px;
                    height: 17px;
                    bottom: -5px;
                    left: 52px;
                  }
                }
              }

              .swiper_text {
                gap: 9px;

                p {
                  font-size: 12px;
                }
              }
            }

            .swiper-pagination {
              gap: 9px;

              .swiper-pagination-bullet {
                width: 12px;
                height: 12px;
              }
            }
          }

          /* السهم بيزحم على الموبايل ف نخليه اخف */
          &::after {
            bottom: -65%;
            left: 50%;
            transform: translateX(-50%) rotate(60deg);
            width: 60%;
            height: 60%;
            z-index: 0;
          }
        }

        .swiper_container2 {
          order: 1;

          &::after {
            bottom: -10%;
            left: -15%;
          }
        }

        .target {
          width: 264px;
          height: 264px;

          h2 {
            font-size: 40px;
            width: 210px;
          }
        }
      }

      .logo_img {
        position: absolute;
        top: 82%;
        left: 20%;
        transform: translate(-50%, -50%);
        width: 115.73717616335345px;
        height: 119.02444090680022px;
      }
    }

    .contract {
      width: 124px;
      height: 124px;
      bottom: 50%;
      left: 80%;
      opacity: 0.5;
    }

    .target_image {
      width: 100px;
      height: 100px;
      bottom: 28px;
      right: 85%;
      opacity: 0.5;
    }
  }

  /*===============SERVICES===============*/
  .services {
    padding-block: 3rem;

    .services_container {
      .services_content {

        .services_header {
          gap: 18px;

          h2 {
            font-size: 38px;
            width: 475px;
          }

          p {
            font-size: 18px;
          }

          a {
            font-size: 16px;
            margin-top: 34px;
            width: 215px;
          }

          &::after,
          &::before {
            display: none;
          }
        }

        .main_service_display {
          width: 100%;
          max-width: 630px;
          grid-template-columns: 1fr;
          gap: 24px;
          padding: 25px;
        }

        .services_img .service_window_mockup .window_body {
          height: 240px;
        }

        .services_selector_grid {
          width: 100%;
          max-width: 630px;
          grid-template-columns: repeat(2, 1fr);
          gap: 12px;
        }

        .services_data {
          .data_list {
            .list_title {
              font-size: 16px;
            }
          }
        }
      }
    }

    .decoration1,
    .decoration2 {
      width: 183px;
      height: 168px;
      opacity: 0.5;
    }

    .decoration3,
    .decoration4 {
      top: 20%;
      width: 237.90916442871094px;
      height: 218.08364868164062px;
      opacity: 0.5;
    }

    .decoration3 {
      left: 17%;
    }

    .decoration4 {
      right: 17%;
    }

    .chart {
      display: none;
    }

    .layer {
      bottom: 75%;
      width: 87px;
      height: 87px;
    }
  }

  /*===============TESTIMONIALS===============*/
  .testimonials {
    padding-block: 6rem 6.2rem;

    .testimonials_bg_decorations {
      display: none;
      /* إخفاء العناصر الزخرفية الجانبية في الشاشات الصغيرة لتجنب الازدحام */
    }

    .testimonials_container {
      .testimonials_content {
        gap: 66px;

        .testimonials_header {
          max-width: 100%;

          .span_header {
            width: 160px;
            height: 37px;
            font-size: 14px;
          }

          h2 {
            font-size: 38px;
            margin-bottom: 18px;

            &::after {
              width: 210px;
            }
          }

          p {
            font-size: 16px;
          }
        }

        .testimonials_editor_window {
          border: 2px solid #328af1;
          box-shadow: 0 15px 40px rgba(0, 0, 0, 0.9);

          .editor_header {
            padding: 8px 12px;

            .editor_tabs .tab {
              padding: 6px 12px;
              font-size: 11px;
            }

            .editor_status_badge {
              font-size: 10px;
              padding: 2px 8px;
            }
          }

          .editor_body {
            display: flex;
            flex-direction: column;
            height: auto;
          }

          .editor_sidebar {
            border-right: none;
            border-bottom: 2px solid #328af1;
            padding: 10px 14px;

            .sidebar_title {
              display: flex;
              align-items: center;
              justify-content: space-between;
              font-size: 13px;
              font-weight: 700;
              color: #328af1;
              cursor: pointer;
              user-select: none;
              padding-bottom: 6px;
              border-bottom: 1px dashed rgba(50, 138, 241, 0.25);
              margin-bottom: 8px;
              direction: rtl;

              &::after {
                content: "المزيد ▼";
                font-size: 14px;
                transition: transform 0.25s ease;
                margin-right: 8px;
              }
            }

            &.collapsed {

              .file_list {
                display: none !important;
              }
            }

            .file_list {
              flex-direction: row;
              overflow-x: auto;
              gap: 8px;
              padding-bottom: 4px;
              -webkit-overflow-scrolling: touch;

              .file_item {
                padding: 6px 12px;
                white-space: nowrap;
                border-left: none !important;
                border-bottom: 2px solid transparent;
                font-size: 12.5px;

                &::before {
                  content: "" !important;
                  /* إخفاء مؤشرات chevrons في الشريط الأفقي */
                }

                &.active {
                  border-bottom-color: #328af1;
                  background: rgba(50, 138, 241, 0.08);
                  border: 1px solid rgba(50, 138, 241, 0.25) !important;
                  border-bottom: 2px solid #328af1 !important;

                  &::after {
                    content: "" !important;
                  }
                }
              }
            }
          }

          .editor_code_area {
            height: 300px;
            padding: 16px;
            font-size: 12.5px;

            &::after {
              background-size:
                100% 3px,
                100% 100%;
            }
          }

          .editor_footer {
            padding: 6px 12px;
            font-size: 10px;
            flex-wrap: wrap;
            gap: 6px;

            .footer_item {
              margin-left: 10px;
              padding-left: 10px;
            }
          }
        }
      }
    }
  }

  /*===============WHY SERVICES===============*/
  .why_services {
    padding-block: 3rem;

    .why_services_container {
      .why_services_content {
        gap: 8rem;

        .why_services_header {
          gap: 30px;

          .header_text {
            gap: 15px;

            h2 {
              font-size: 32px;
            }

            p {
              font-size: 14px;
              width: 100%;
              max-width: 520px;
            }
          }

          .header_btns {
            gap: 48px;

            .btn {
              font-size: 16px;
              width: 195px;
              height: 44px;
            }
          }
        }

        .why_services_data {
          gap: 7.25rem;

          .item {
            gap: 30px;

            .item_text {
              width: 100%;
              max-width: 300px;
              gap: 30px;

              .item_header {
                justify-content: center;
                gap: 10px;

                h3 {
                  font-size: 18px;
                  padding-bottom: 5px;
                }

                img {
                  width: 29px;
                  height: 29px;
                }
              }

              .item_body {
                gap: 23px;

                .body_text {
                  gap: 9px;

                  span {
                    font-size: 10.5px;
                    justify-content: center;
                  }

                  p {
                    font-size: 10.5px;
                  }
                }
              }
            }

            .item_solve {
              width: 100%;
              max-width: 278px;
              padding: 21.5px 12px;

              .solve_header {
                gap: 3px;

                h3 {
                  font-size: 10.5px;

                  img {
                    width: 17.1287px;
                    height: 17.1287px;
                  }
                }

                p {
                  font-size: 9px;
                }
              }

              .solve_body {
                .body_text {
                  padding: 6.52px 13.04px 16px 9.23px;

                  span {
                    font-size: 10.5px;
                  }

                  p {
                    font-size: 9px;
                  }
                }
              }
            }
          }
        }
      }
    }

    &::after {
      width: 620px;
      filter: blur(175px);
      top: -105%;
    }
  }

  /*===============BANNAR===============*/
  .bannar {
    padding-block: 5.5rem 4rem;

    .bannar_container {
      .bannar_content {
        gap: 3.5rem;
        padding: 64px 16px;

        .img_bannar {
          width: 65px;
          height: 65px;
        }

        .bannar_text {
          gap: 56px;

          .bannar_header {
            gap: 24px;

            h2 {
              font-size: 32px;
            }

            p {
              font-size: 14px;
              width: 100%;
              max-width: 430px;
            }
          }

          a {
            font-size: 16px;
            width: 100%;
            max-width: 191px;
            height: 42px;
          }
        }

        &::before,
        &::after {
          width: 170px;
          height: 120px;
          filter: blur(135px);
          opacity: 0.5;
        }

        &::before {
          bottom: 35px;
          left: -160px;
        }

        &::after {
          top: 35px;
          right: -160px;
        }
      }
    }
  }

  /*===============OUR COMPANYS===============*/
  .our_companys {
    .our_companys_container {
      .our_companys_content {
        gap: 52px;

        .our_companys_header {
          gap: 12px;

          h2 {
            font-size: 14px;
          }

          p {
            font-size: 14px;
          }
        }

        .marquee_swiper img {
          height: 60px;
        }

        .statistics_strip {
          gap: 21px;
          width: 100%;
          max-width: 390px;

          p {
            font-size: 12px;
            gap: 4px;
          }

          &::after {
            width: 100%;
          }
        }
      }
    }

    .companys_info_panel {
      align-items: center;
    }
  }

  /*===============FOOTER===============*/
  .legacy_footer_override_3 {
    padding-block: 12.5rem 0;

    .footer_container {
      gap: 5.5rem;

      .footer_content {
        gap: 24px;

        .footer_logo {
          width: 100%;
          max-width: 335px;
          height: auto;
        }

        .footer_text {
          h2 {
            font-size: 24px;
          }
        }

        .footer_btn {
          width: 220.3815px;
          gap: 7px;

          a {
            font-size: 17px;
            width: 100%;
            max-width: 150px;
            height: 30px;
            margin-top: 24px;
          }

          span {
            font-size: 10px;
          }
        }
      }

      .footer_copyright {
        gap: 16px;
        padding-inline: 1.5rem;
        padding-block: 16px 2.25rem;
        text-align: center;

        .social {
          justify-content: center;
        }

        .slogan {
          h3 {
            font-size: 16px;
          }
        }

        .pages {
          justify-content: center;
          gap: 16px;
          padding-top: 0;

          a {
            font-size: 11px;
          }
        }
      }
    }

    &::after {
      height: 330px;
      top: -165px;
    }

    &::before {
      box-shadow: rgba(29, 91, 246, 0.32) 0 0px 190px 410px;
    }

    .scrollTopBtn {
      bottom: 100px;
      right: 3%;
      width: 32px;
      height: 44px;
    }

    .watch_video {
      left: 10px;
      bottom: 10px;
    }
  }

  /*===============PAGE CONTACT===============*/
  .contact {
    padding-inline: 3rem;
    padding-block: 6rem 4rem;

    .contact_container {
      .contact_content {
        max-width: 520px;
        padding: 55px 20px;

        .conatact_header {
          gap: 14px;

          h2 {
            font-size: calc(var(--h3-font-size) * 0.9);
          }

          p {
            font-size: 0.95rem;
          }
        }

        .contact_form {
          gap: 28px;

          .contact_form_group {
            input {
              padding: 20px 18px;
              height: 54px;
            }

            .email_error {
              font-size: 11px;
              top: 26px;
            }
          }

          .cta_group {
            gap: 14px;

            .cta_selecation {
              flex-wrap: wrap;
              height: auto;
            }
          }

          .contact_btn {
            height: 54px;
            font-size: 20px;
          }
        }

        .tagline {

          &::before,
          &::after {
            width: 150px;
          }
        }
      }

      .popup_contact {
        width: 340px;
        padding: 24px 30px;
      }
    }
  }
}

@media (max-width: 576px) {
  .section {
    padding-inline: 1rem;
  }

  .header {
    height: 54px;

    .nav {
      padding: 6px 15px !important;

      .img_logo {
        width: 125.4448910931472px;
        height: 15.3252px;
      }

      .btn {
        width: 30px !important;
        height: 30px !important;

        span {
          display: none;
        }
      }
    }

    .nav_toggle {
      width: 30px;
      height: 30px;
      border-radius: 3px;
    }
  }

  .nav_right {
    left: 20px !important;
  }

  .nav_toggle {
    right: 20px !important;
  }

  .header.scrolled {
    top: 20px;
    height: 54px;
  }

  .header.scrolled .nav {
    padding: 7px 42px;
  }

  .header.scrolled .nav.container {
    max-width: 90%;
  }

  /*=============== HOME ===============*/
  .home {
    padding-block: 50px 36px;

    .home_container {
      gap: 30px;

      .home_content {
        gap: 24px;

        .pra {
          max-width: fit-content;
          height: auto;
          padding: 6px 12px;
          border-radius: 0px;
          border: 1px solid rgba(50, 138, 241, 0.4);
          background: rgba(9, 12, 62, 0.6);
          box-shadow: 0 0 10px rgba(50, 138, 241, 0.15);

          p {
            font-size: 11px;
            font-family: monospace;
            letter-spacing: 0.5px;
          }
        }

        .home_title {
          font-size: 27px;
          line-height: 1.4;

          .idea {
            color: #328af1;
            text-shadow: 0 0 8px rgba(50, 138, 241, 0.6);

            &::after {
              display: none;
            }
          }

          .search {
            color: #328af1;
            text-shadow: 0 0 8px rgba(50, 138, 241, 0.6);

            &::after {
              display: none;
            }
          }
        }

        .smile {
          font-size: 12px;
          padding: 4px 12px;
          border: 1px solid rgba(50, 138, 241, 0.4);
          background: rgba(50, 138, 241, 0.1);
          text-shadow: 0 0 5px rgba(50, 138, 241, 0.4);

          &::after {
            display: none;
          }
        }

        .our_serv {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          width: 100%;
          max-width: 320px;
          margin-top: 10px;
          gap: 12px;

          .serv {
            width: 100%;
            height: 64px;
            gap: 6px;
            border-radius: 0px;


            h2 {
              font-size: 13.5px;
              font-family: monospace;
              font-weight: var(--font-bold);
              letter-spacing: 0.5px;
            }
          }
        }
      }

      .arrows {
        width: 100px;
      }
    }

    &::before,
    &::after {
      width: 80px;
      filter: blur(95px);
      opacity: 0.7;
    }

    .timer_img {
      width: 37px;
      height: 37px;
      filter: blur(1px);
    }

    .code_img {
      top: 40%;
      width: 36px;
      height: 36px;
    }

    .seo_img {
      width: 50px;
      height: 50px;
      opacity: 0.9;
      filter: blur(1px);
    }

    .idea_img3 {
      top: 40%;
      width: 38px;
      height: 38px;
    }

    .idea_img2 {
      width: 38px;
      height: 38px;
      top: 50%;
      right: 10px;
      filter: blur(1px);
    }

    .target_img {
      width: 50px;
      height: 50px;
      top: 50%;
      left: 10px;
      filter: blur(1px);
    }

    .code_snippets {
      display: none;
      width: 100%;
      max-width: 65.54px;
      filter: blur(1px);

      padding: 4px;

      .browserbuttons {
        span {
          width: 3px !important;
          height: 3px !important;
        }
      }

      p,
      .p_code,
      .span,
      span {
        width: 100%;
        font-size: 4px;
      }
    }
  }

  /*===============PROJECTS===============*/
  .projects {
    padding-block: 30px;

    .projects_container {
      .projects_header {
        .section_title {
          font-size: 24px;
        }
      }

      .projects_content {
        gap: 56px;

        .projects_data {
          gap: 30px;
          width: 100%;

          .header_data {
            margin-right: 10px;

            .section_title {
              font-size: 22px;
            }

            .section_subtitle {
              font-size: 14px;
            }
          }

          .projects_content_data {
            gap: 3px;

            .group_text {
              gap: 20px;

              .text {
                justify-content: start;
                width: 100%;
                padding: 0 8px;

                p {
                  font-size: 12px;
                  padding-bottom: 5px;
                }
              }

              a {
                width: 100%;
                max-width: 100%;
                height: 38px;
                font-size: 14px;
                margin-top: 10px;

                img {
                  width: 22px;
                  height: 22px;
                }
              }
            }

            .border {
              margin-right: 0;
              margin-top: -4rem;

              .img {
                width: 39px;
                height: 26.5px;
              }

              .img1 {
                top: 0;
              }

              .img2 {
                top: 27%;
              }

              .img3 {
                bottom: 20%;
              }

              &::after {
                transform: translate(-29.6%, -99%);
                height: 160.25px;
              }
            }
          }
        }

        .swiper_container {
          padding: 13.75px;
          width: 100%;

          .project_swiper {
            padding-bottom: 35px;

            .swiper-slide {
              .project_link {
                width: 100%;
                max-width: 115px;
                height: 32px;
                font-size: 14px;
                padding-bottom: 5px;
              }
            }

            .buttons {
              .swiper-button-prev {
                right: 5%;

                img {
                  width: 16px;
                  height: 16px;
                }
              }

              .swiper-pagination {
                gap: 4px;

                .swiper-pagination-bullet {
                  width: 7px;
                  height: 7px;
                }
              }
            }
          }

          &::after {
            height: 50px;
            filter: blur(95px);
          }
        }
      }
    }

    &::before {
      width: 210px;
      height: 110px;
      filter: blur(105px);
      opacity: 0.8;
    }

    .symbols_img {
      width: 82px;
      height: 82px;
      top: 10px;
      left: 10px;
    }

    .tree_img {
      width: 76px;
      height: 76px;
      bottom: 10px;
      left: 10px;
    }

    .rocet_img {
      display: flex;
      width: 76px;
      height: 76px;
      bottom: 10px;
      right: 10px;
    }

    .check_hand_img {
      display: flex;
      width: 48px;
      height: 25px;
      top: 40%;
    }
  }

  .projects .projects_container .projects_list .project_card {
    width: 100%;
  }

  /*===============ABOUT US===============*/
  .about_us {
    padding-block: 33px 67px;

    .about_us_container {
      gap: 80px;

      .about_us_content {
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 30px;

        .swiper_container {
          max-width: 300px;

          .about_swiper {
            padding: 11.18px 11.18px 50.52px 11.18px;

            .swiper-slide {
              gap: 18px;

              .swiper_header {
                img {
                  width: 34px;
                  height: 34px;
                }

                h2 {
                  font-size: 22px;

                  &::after {
                    width: 135px;
                    height: 16px;
                    left: 48px;
                    bottom: -4px;
                  }
                }
              }

              .swiper_text {
                gap: 12px;

                p {
                  font-size: 12px;
                }
              }
            }

            .swiper-pagination {
              gap: 7px;

              .swiper-pagination-bullet {
                width: 9px;
                height: 9px;
              }
            }
          }

          &::after {
            width: 115px;
            height: 115px;
            bottom: -135%;
            left: 35%;
            transform: translateX(-50%) rotate(260deg);
          }
        }

        .swiper_container2 {
          margin-top: 340px;

          &::after {
            bottom: 195%;
            left: 75%;
            transform: translateX(-50%) rotate(-40deg);
          }
        }

        .target {
          width: 187.56201171875px;
          height: 187.56201171875px;

          h2 {
            width: 170px;
            font-size: 32px;
          }
        }
      }

      .logo_img {
        width: 100px;
        height: 100px;
        top: 60%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    }

    .contract {
      width: 93px;
      height: 93px;
      bottom: 52%;
      left: 0px;
      opacity: 0.9;
    }

    .target_image {
      bottom: 25%;
      right: 0;
      opacity: 0.9;
    }
  }

  /*===============SERVICES===============*/
  .services {
    padding-block: 49px;

    .services_container {
      .services_content {

        .services_header {
          gap: 9px;
          margin-bottom: 30px;

          h2 {
            font-size: 24px;
            width: 100%;
          }

          p {
            font-size: 14px;
          }

          a {
            width: 100%;
            max-width: 175px;
            height: 38px;
            font-size: 14px;
            margin-top: 30px;
          }
        }

        .main_service_display {
          width: 100%;
          grid-template-columns: 1fr;
          gap: 20px;
          padding: 20px;

          .services_data {
            gap: 16px;

            .data_header h3 {
              font-size: 22px;
            }

            .data_list {
              .list_title {
                font-size: 14px;
              }
            }
          }
        }

        .services_img .service_window_mockup .window_body {
          height: 200px;
        }

        .services_actions {
          width: 100%;

          .btn {
            width: 100%;
            max-width: 100%;
          }
        }

        .services_selector_grid {
          width: 100%;
          grid-template-columns: 1fr;
          gap: 10px;

          &.show {
            max-height: 1200px;
          }
        }
      }
    }

    /* نخلي الركنة نظيفة */
    .decoration3,
    .decoration4 {
      width: 202.36px;
      height: 185.49px;
      opacity: 0.9;
    }

    .decoration3 {
      left: -4%;
    }

    .decoration4 {
      right: -4%;
    }

    .decoration1,
    .decoration2 {
      width: 124.18px;
      height: 113.83px;
      bottom: 75px;
      opacity: 0.9;
    }

    .layer {
      font-size: 40px;
      bottom: 85%;
      left: 15px;
    }
  }

  /*===============TESTIMONIALS===============*/
  .testimonials {
    padding-block: 43px 85px;

    .testimonials_container {
      .testimonials_content {
        gap: 56px;

        .testimonials_header {
          max-width: 100%;
          gap: 8px;

          .span_header {
            width: 165px;
            height: 33px;
            font-size: 12px;
          }

          h2 {
            font-size: 24px;
            margin-bottom: 16px;

            &::after {
              width: 220px;
              bottom: -20px;
            }
          }

          p {
            font-size: 12px;
          }
        }

        .testimonials_editor_window {
          .editor_body {
            .editor_code_area {
              .line_numbers {
                padding-left: 10px;
                width: 10px;
              }

            }
          }

          .editor_footer {
            flex-wrap: nowrap;

            .footer_item {
              text-align: center;
            }
          }
        }
      }
    }
  }

  /*===============WHY SERVICES===============*/
  .why_services {
    padding-block: 43px 9.2rem;

    .why_services_container {
      .why_services_header {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 20px;

        .header_text {
          align-items: center !important;
          display: flex !important;
          flex-direction: column !important;

          h2 {
            font-size: 24px;
          }

          p {
            max-width: 100%;
            font-size: 12px;
          }
        }

        .header_btns {
          width: 100% !important;
          flex-direction: column !important;
          gap: 12px !important;
          align-items: stretch !important;

          .btn {
            width: 100% !important;
            max-width: none !important;
            height: 44px !important;
            font-size: 14px !important;
            display: flex !important;
            justify-content: center !important;
            align-items: center !important;
          }
        }

        &::after {
          width: 30.647397994995117px;
          height: 36.14381408691406px;
          left: -10px;
          top: 75px;
          opacity: 0.9;
        }
      }



      .why_services_content {
        gap: 63px;


        .why_services_data {
          gap: 125px;

          .item {
            flex-direction: column;
            gap: 28px;

            .item_text {
              max-width: 100%;
              gap: 29px;

              .item_header {
                h3 {
                  font-size: 18px;
                }

                img {
                  width: 30px;
                  height: 30px;
                }
              }

              .item_body {
                gap: 23px;

                .body_text {
                  gap: 8px;

                  span {
                    font-size: 12px;
                  }

                  p {
                    font-size: 11px;
                  }
                }
              }
            }

            .item_solve {
              max-width: 100%;
              padding: 21px 12px;
              border-radius: 5px;

              .solve_header {
                gap: 3px;

                h3 {
                  gap: 3px;
                  font-size: 10.5px;

                  img {
                    width: 17.38157844543457px;
                    height: 17.38157844543457px;
                  }
                }

                p {
                  font-size: 9px;
                }
              }

              .solve_body {
                border-radius: 5px;

                .body_text {
                  gap: 3px;
                  padding: 6.52px 13.04px 9.23px 13.04px;

                  span {
                    font-size: 10.5px;

                    .shape_group {
                      width: 11px;
                    }
                  }

                  p {
                    font-size: 9px;
                  }
                }
              }
            }

            &:nth-child(1) {
              &::after {
                display: none;
              }
            }

            &:nth-child(2) {
              flex-direction: column;
            }

            &::after {
              height: 315px;
              top: -43%;
              transform: rotate(90deg);
            }
          }
        }
      }

      .service_workspace {
        .workspace_body {
          .story_image_col {
            .mac_window_frame {
              .mac_window_header {
                .mac_dot {
                  width: 8px;
                  height: 8px;
                }
              }
            }
          }
        }

        .workspace_footer {
          .active_service_cta {
            font-size: 12.5px !important;
          }
        }
      }
    }



    &::after {
      width: 520px;
      filter: blur(165px);
      top: -95%;
    }
  }



  /*===============BANNAR===============*/
  .bannar {
    padding-block: 5rem 3.5rem;

    .bannar_container {
      .bannar_content {
        background-size: cover;
        gap: 3rem;
        padding: 54px 16px 26px 16px;

        .img_bannar {
          width: 55px;
          height: 55px;
        }

        .bannar_text {
          gap: 59px;

          .bannar_header {
            gap: 11px;

            h2 {
              font-size: 24px;
            }

            p {
              max-width: 100%;
              font-size: 11px;
            }
          }

          a {
            width: 100%;
            max-width: 190px;
            height: 38px;
            font-size: 14px;
          }
        }

        /* نخلي الجلو ألطف ع الموبايل */
        &::before,
        &::after {
          width: 220px;
          height: 110px;
          filter: blur(125px);
          opacity: 0.75;
        }

        &::before {
          bottom: 15px;
          left: -220px;
        }

        &::after {
          top: 15px;
          right: -220px;
        }
      }
    }
  }

  /*===============OUR COMPANYS===============*/
  .our_companys {
    .our_companys_container {
      .our_companys_content {
        gap: 37px;

        .our_companys_header {
          gap: 12px;

          h2 {
            font-size: 18px;
          }

          p {
            font-size: 12px;
          }
        }

        .marquee_swiper img {
          height: 45px;
        }

        .statistics_strip {
          gap: 14px;
          max-width: 100%;

          .stat_item {
            p {
              font-size: 10px;
            }
          }

          &::after {
            width: 88%;
          }
        }
      }
    }

    .companys_info_panel {
      .telemetry_container {
        display: grid;
        grid-template-columns: 1fr;
      }
    }

    .companys_logos_panel {
      .partner_nodes_grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }
  }

  /*===============FOOTER===============*/
  .legacy_footer_override_4 {
    padding-block: 11rem 0;

    .footer_container {
      gap: 4.8rem;

      .footer_content {
        .footer_logo {
          max-width: 248.15031938903303px;
        }

        .footer_text {
          h2 {
            font-size: 22px;
          }
        }
      }

      .footer_copyright {
        flex-direction: column;
        gap: 37px;
        padding-inline: 1rem;
        padding-block: 16px 2rem;

        .social {
          order: 2;
          gap: 17px;

          a {
            width: 24px;
            height: 24px;
          }
        }

        .slogan {
          order: 1;
          font-size: 24px;
        }

        .pages {
          position: relative;
          order: 3;
          gap: 74px;
          margin-top: 30px;
          width: 100%;

          a {
            font-size: 11.5px;
          }

          &::after {
            position: absolute;
            content: "";
            width: 100%;
            height: 1px;
            background-color: #fff;
            opacity: 0.2;
            top: -11px;
            left: 0;
            background: linear-gradient(90deg,
                rgba(13, 16, 73, 0.2) -0.14%,
                rgba(255, 255, 255, 0.2) 50.42%,
                rgba(12, 20, 76, 0.2) 98.98%);
          }
        }
      }
    }

    &::after {
      height: 275px;
      top: -155px;
    }

    .scrollTopBtn {
      bottom: 88px;
      width: 30px;
      height: 42px;
    }

    .watch_video {
      left: 8px;
      bottom: 8px;
    }
  }

  /*===============PAGE CONTACT===============*/
  .contact {
    overflow: hidden;
    padding-inline: 16px;
    padding-block: 6rem 10.5rem;

    .contact_container {
      .contact_content {
        max-width: 100%;
        padding: 45px 16px;
        border-radius: 6px;

        .conatact_header {
          h2 {
            font-size: 32px;

            span {
              font-size: 30px;
            }
          }

          p {
            font-size: 14px;
          }
        }

        .contact_form {
          gap: 17px;

          .contact_form_group {
            input {
              padding: 18px 16px;
              height: 44px;
              font-size: 12px;
            }

            .email_error {
              font-size: 10px;
              top: 24px;
            }
          }

          .cta_group {
            .checkbox {
              label {
                font-size: 13px;
              }

              input {
                width: 17px;
                height: 17px;
              }
            }

            .cta_selecation {
              gap: 10px;

              .meeting_select,
              input {
                width: 100px;
                font-size: 12px;
              }
            }
          }

          .contact_btn {
            height: 38px;
            font-size: 16px;
          }
        }

        .tagline {
          p {
            font-size: 12px;
          }

          &::before,
          &::after {
            width: 68px;
          }
        }
      }

      .popup_contact {
        width: 100%;
        padding: 20px;

        img {
          width: 61px;
          height: 61px;
        }

        .popup_text {
          gap: 4px;

          h2 {
            font-size: 20px;
          }

          p {
            font-size: 14px;
          }
        }

        .popup_btns {
          gap: 16px;

          .btn {
            font-size: 18px;
            width: 125px;
          }
        }
      }

      .contact_img1 {
        width: 115px;
        height: 115px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -305%);
      }

      .contact_img2 {
        width: 92px;
        height: 94.31843566894531px;
        top: 50%;
        left: 50%;
        transform: translate(-110%, 275%);
      }
    }

    &::before {
      display: none;
    }

    &::after {
      width: 100%;
      height: 52px;
      filter: blur(170px);
    }
  }

  /*=============== PAGE SOCIAL ===============*/
  .page_social {
    padding-top: 8rem;
    background-image: url(assets/image/bg\ social\ 2.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    .page_social_container {
      .social_content {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: column;
        gap: 43px;
        z-index: 5;

        .img_text {
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;
          gap: 15px;

          img {
            width: 207.90208435058594px;
            height: 25.019515991210938px;
          }

          h2 {
            font-size: 13px;
          }
        }

        h3 {
          font-size: 14px;
          margin-bottom: 27px;

          &::after {
            width: 133px;
            height: 22px;
            bottom: -15px;
            left: 50%;
          }
        }

        .social_links {
          max-width: 100%;
          gap: 24px;

          a {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: row-reverse;
            gap: 11px;
            font-size: 23px;
            border: 1px solid #212368;
            border-radius: 2px;
            width: 230px;
            height: 62px;

            img {
              width: 24px;
              height: 24px;
              margin-bottom: -5px;
            }
          }
        }
      }
    }

    &::before {
      display: none;
    }

    &::after {
      width: 68px;
    }
  }

  /*=============== FOOTER ===============*/
  .footer {
    padding-inline: 1rem;

    .brand_col {
      .footer_logo img {
        max-height: 32px;
      }

      .brand_slogan {
        font-size: 24px;
      }
    }
  }

  .newsletter_box {
    form {
      width: 100%;
    }
  }

  .watch_video,
  .whatsapp_float {
    bottom: 55px;
  }
}

/* ==========================================
   ROBUST RESPONSIVE FOOTER FIXES (MOBILE)
   ========================================== */
@media screen and (max-width: 768px) {
  .footer_system_grid {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
    padding: 1.5rem 1rem !important;
    margin-inline: 10px !important;
  }

  .footer_col {
    gap: 1.25rem !important;
    align-items: center !important;
    text-align: center !important;
  }

  .newsletter_box {
    align-items: center !important;
    width: 100% !important;
  }


  .action_top {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
    text-align: center !important;
    width: 100% !important;
  }

  .footer_action_btn {
    width: 100% !important;
    text-align: center !important;
    padding: 8px !important;
  }

  .footer_links {
    display: flex !important;
    justify-content: center !important;
    gap: 20px !important;
    flex-wrap: wrap !important;
    margin-top: 1rem !important;
    width: 100% !important;
  }

  .copyright_text {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 8px !important;
  }

  .footer_bottom_bar {
    padding-inline: 15px !important;
  }
}



/* ==================== STYLES FROM blog-single.html ==================== */
.blog_single_page {
  padding-block: 8rem 4rem;
  background-color: #020206;
  min-height: 100vh;
  /* Brighter, High-Contrast Cyber Violet & Cyan Grid Background */
  background-image:
    radial-gradient(circle at 15% 20%, rgba(138, 43, 226, 0.2) 0%, transparent 60%),
    radial-gradient(circle at 85% 75%, rgba(50, 138, 241, 0.16) 0%, transparent 55%),
    linear-gradient(rgba(50, 138, 241, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(50, 138, 241, 0.04) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 32px 32px, 32px 32px;
  position: relative;
}

.article_container {
  max-width: 900px;
  margin: 0 auto;
  background: rgba(9, 12, 62, 0.12);
  border: 1px solid rgba(50, 138, 241, 0.1);
  padding: 3rem;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.article_header {
  margin-bottom: 2.5rem;
  border-bottom: 1px solid rgba(50, 138, 241, 0.1);
  padding-bottom: 2rem;
}

.article_badge {
  display: inline-block;
  background: rgba(50, 138, 241, 0.08);
  border: 1px solid rgba(50, 138, 241, 0.25);
  color: #328af1;
  font-family: monospace;
  font-size: 12px;
  padding: 4px 12px;
  margin-bottom: 1rem;
}

.article_title {
  font-size: 2.4rem;
  color: #fff;
  line-height: 1.35;
  margin-bottom: 1rem;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
}

.article_meta {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.4);
  font-family: monospace;
  display: flex;
  gap: 20px;
}

.article_main_img_holder {
  width: 100%;
  max-height: 420px;
  overflow: hidden;
  position: relative;
  border: 1px solid rgba(50, 138, 241, 0.15);
  margin-bottom: 2.5rem;
  cursor: zoom-in;
}

.article_main_img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
  display: block;
}

.article_main_img_holder:hover .article_main_img {
  transform: scale(1.05);
}

.blog_zoom_overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(3, 4, 15, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 5;
}

.article_main_img_holder:hover .blog_zoom_overlay {
  opacity: 1;
}

.blog_zoom_overlay i {
  color: #328af1;
  font-size: 28px;
  text-shadow: 0 0 8px rgba(50, 138, 241, 0.8);
  transition: transform 0.3s ease;
}

.blog_zoom_overlay:hover i {
  transform: scale(1.15);
  color: #fff;
}

.article_body {
  font-size: 17px;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.9;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.article_body h2 {
  font-size: 1.6rem;
  color: #ebf3fe;
  margin-top: 2rem;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 8px;
}

.article_body h2::before {
  content: '#';
  color: #328af1;
  font-family: monospace;
}

.article_body p strong {
  color: #fff;
}

/* Bullet List style */
.article_body ul {
  list-style: none;
  padding-right: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.article_body ul li {
  position: relative;
}

.article_body ul li::before {
  content: '↳';
  position: absolute;
  right: -1.2rem;
  color: #328af1;
  font-family: monospace;
}

/* High-tech Callout block */
.cyber_callout {
  background: rgba(50, 138, 241, 0.04);
  border-right: 3px solid #328af1;
  padding: 1.5rem;
  color: #328af1;
  font-family: var(--body-font);
  margin-block: 2rem;
  position: relative;
}

/* Mock code window inside article */
.article_code_window {
  background: #020308;
  border: 1px solid rgba(50, 138, 241, 0.15);
  padding: 1.25rem;
  font-family: Consolas, Monaco, monospace;
  font-size: 13px;
  direction: ltr;
  text-align: left;
  line-height: 1.5;
  color: #b0c9f0;
  margin-block: 2rem;
}

.article_code_window .keyword {
  color: #328af1;
  font-weight: bold;
}

.article_code_window .string {
  color: #f1fa8c;
}

.article_code_window .comment {
  color: rgba(255, 255, 255, 0.35);
}

.back_to_blog {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #328af1;
  text-decoration: none;
  margin-top: 3rem;
  font-family: monospace;
  transition: color 0.3s;
}

.back_to_blog:hover {
  color: #fff;
  text-shadow: 0 0 8px rgba(50, 138, 241, 0.6);
}

@media screen and (max-width: 768px) {


  .blog_single_page {
    padding-block: 6rem 3rem;
  }

  .article_container {
    padding: 1.5rem;
  }

  .article_title {
    font-size: 1.6rem;
  }

  .article_meta {
    flex-wrap: wrap;
    gap: 10px 15px;
  }

  .article_body {
    font-size: 15px;
    line-height: 1.75;
  }

  .related_card {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }

  .related_img {
    width: 100%;
    height: 140px;
  }
}

/* Related Articles styling */
.related_articles_section {
  margin-top: 3.5rem;
  border-top: 1px solid rgba(50, 138, 241, 0.1);
  padding-top: 2.5rem;
}

.related_title {
  font-size: 1.4rem;
  color: #fff;
  margin-bottom: 1.5rem;
  font-family: var(--heading-font);
}

.related_grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.related_card {
  background: rgba(9, 12, 62, 0.2);
  border: 1px solid rgba(50, 138, 241, 0.12);
  display: flex;
  gap: 1.25rem;
  padding: 1rem;
  text-decoration: none;
  color: inherit;
  transition: all 0.3s ease;
}

.related_card:hover {
  border-color: #328af1;
  background: rgba(50, 138, 241, 0.08);
  transform: translateY(-4px);
  box-shadow: 0 5px 15px rgba(50, 138, 241, 0.2);
}

.related_img {
  width: 120px;
  height: 90px;
  overflow: hidden;
  border: 1px solid rgba(50, 138, 241, 0.15);
  flex-shrink: 0;
}

.related_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.related_card:hover .related_img img {
  transform: scale(1.08);
}

.related_info {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
  gap: 0.5rem;
}

.related_badge {
  font-family: monospace;
  color: #328af1;
  font-size: 11px;
  align-self: flex-start;
}

.related_info h4 {
  font-size: 15px;
  color: #ebf3fe;
  font-weight: 500;
  margin: 0;
  line-height: 1.4;
  transition: color 0.3s ease;
}

.related_card:hover h4 {
  color: #328af1;
}

.blog_card_btn {
  margin-right: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  background: #020309;
  border: 1px solid #328af1;
  color: #328af1;
  font-size: 13px;
  transition: all 0.2s ease;
  box-shadow: 4px 4px 0px rgba(50, 138, 241, 0.3);
  position: relative;
}

.blog_card_btn i {
  transition: transform 0.2s ease;
}

.related_card:hover .blog_card_btn {
  border-color: #328af1;
  background: rgba(50, 138, 241, 0.15);
  color: #fff;
  box-shadow: 2px 2px 0px rgba(50, 138, 241, 0.4);
  transform: translate(2px, 2px);
}

.related_card:hover .blog_card_btn i {
  transform: translateX(-3px);
}

@media screen and (max-width: 600px) {
  .related_grid {
    grid-template-columns: 1fr;
  }
}


/* ==================== STYLES FROM blog.html ==================== */
.blog_page {
  padding-block: 8rem 4rem;
  background-color: #010206;
  min-height: 100vh;
  /* Brighter, High-Contrast Cyber Grid Background */
  background-image:
    radial-gradient(circle at 50% 20%, rgba(50, 138, 241, 0.22) 0%, transparent 60%),
    radial-gradient(circle at 10% 80%, rgba(50, 138, 241, 0.12) 0%, transparent 40%),
    linear-gradient(rgba(50, 138, 241, 0.05) 1.5px, transparent 1.5px),
    linear-gradient(90deg, rgba(50, 138, 241, 0.05) 1.5px, transparent 1.5px);
  background-size: 100% 100%, 100% 100%, 40px 40px, 40px 40px;
  position: relative;
}

.blog_header_section {
  text-align: center;
  margin-bottom: 4rem;
}

.blog_title_badge {
  font-family: monospace;
  color: #328af1;
  font-size: 14px;
  background: rgba(50, 138, 241, 0.05);
  border: 1px solid rgba(50, 138, 241, 0.2);
  padding: 6px 16px;
  display: inline-block;
  margin-bottom: 1rem;
  text-shadow: 0 0 5px rgba(50, 138, 241, 0.3);
}

.blog_main_title {
  font-size: 2.5rem;
  color: #fff;
  text-shadow: 0 0 15px rgba(50, 138, 241, 0.35);
}

.blog_grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

/* Cyber Blog Card */
.blog_card {
  background: rgba(9, 12, 62, 0.25);
  border: 1px solid rgba(50, 138, 241, 0.16);
  border-radius: 0px;
  overflow: hidden;
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.blog_card:hover {
  transform: translateY(-6px);
  border-color: #328af1;
  box-shadow: 0 10px 30px rgba(50, 138, 241, 0.15);
}

.blog_card_img_holder {
  height: 200px;
  width: 100%;
  overflow: hidden;
  position: relative;
  background: #03040b;
  border-bottom: 1px solid rgba(50, 138, 241, 0.08);
}

.blog_card_img_holder img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.blog_zoom_overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(3, 4, 15, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 5;
  cursor: zoom-in;
}

.blog_card_img_holder:hover .blog_zoom_overlay {
  opacity: 1;
}

.blog_zoom_overlay i {
  color: #328af1;
  font-size: 24px;
  text-shadow: 0 0 8px rgba(50, 138, 241, 0.8);
  transition: transform 0.3s ease;
}

.blog_zoom_overlay:hover i {
  transform: scale(1.15);
  color: #fff;
}

.blog_card:hover .blog_card_img_holder img {
  transform: scale(1.05);
}

.blog_card_badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: #080B38;
  border: 1px solid #328af1;
  color: #328af1;
  font-size: 11px;
  font-family: monospace;
  padding: 4px 10px;
  border-radius: 2px;
  z-index: 2;
}

.blog_card_content {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 1rem;
}

.blog_card_meta {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
  font-family: monospace;
  display: flex;
  gap: 15px;
}

.blog_card_title {
  font-size: 1.35rem;
  font-weight: 500;
  color: #ebf3fe;
  line-height: 1.4;
  transition: color 0.3s;
}

.blog_card:hover .blog_card_title {
  color: #328af1;
}

.blog_card_desc {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.6;
  flex: 1;
}

.blog_card_btn {
  margin-right: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  background: #020309;
  border: 1px solid #328af1;
  color: #328af1;
  font-size: 15px;
  transition: all 0.2s ease;
  box-shadow: 4px 4px 0px rgba(50, 138, 241, 0.3);
  position: relative;
  margin-top: auto;
}

.blog_card_btn i {
  transition: transform 0.2s ease;
}

.blog_card:hover .blog_card_btn {
  border-color: #328af1;
  background: rgba(50, 138, 241, 0.15);
  color: #fff;
  box-shadow: 2px 2px 0px rgba(50, 138, 241, 0.4);
  transform: translate(2px, 2px);
}

.blog_card:hover .blog_card_btn i {
  transform: translateX(-3px);
}

@media screen and (max-width: 992px) {
  .blog_grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 768px) {


  .blog_grid {
    grid-template-columns: 1fr;
  }

  .blog_main_title {
    font-size: 2rem;
  }

  .blog_card_meta {
    flex-wrap: wrap;
    gap: 10px;
  }

  .cyber_pagination {
    gap: 10px;
    flex-wrap: wrap;
  }
}

@media screen and (max-width: 480px) {
  .blog_page {
    padding-block: 6rem 3rem;
  }

  .blog_main_title {
    font-size: 1.75rem;
  }

  .blog_card_content {
    padding: 1.25rem;
  }

  .blog_grid {
    gap: 1.5rem;
  }
}

/* Cyber Pagination */
.cyber_pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-top: 4rem;
  font-family: monospace;
}

.cyber_pagination .page_btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 45px;
  height: 45px;
  background: #020309;
  border: 1px solid #328af1;
  color: #328af1;
  text-decoration: none;
  font-size: 16px;
  font-weight: bold;
  transition: all 0.2s ease;
  box-shadow: 4px 4px 0px rgba(50, 138, 241, 0.3);
  position: relative;
}

.cyber_pagination .page_btn:hover:not(.disabled) {
  border-color: #328af1;
  background: rgba(50, 138, 241, 0.15);
  color: #fff;
  box-shadow: 2px 2px 0px rgba(50, 138, 241, 0.4);
  transform: translate(2px, 2px);
}

.cyber_pagination .page_btn.active {
  background: #328af1;
  border-color: #328af1;
  color: #03040b;
  font-weight: bold;
  box-shadow: 4px 4px 0px rgba(255, 255, 255, 0.2);
}

.cyber_pagination .page_btn.disabled {
  opacity: 0.3;
  border-color: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.25);
  box-shadow: none;
  cursor: not-allowed;
  pointer-events: none;
}

/* Blog Card Tags */
.blog_card_tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.blog_tag {
  font-size: 11px;
  font-family: monospace;
  color: #328af1;
  background: rgba(50, 138, 241, 0.05);
  border: 1px solid rgba(50, 138, 241, 0.18);
  padding: 2px 8px;
  border-radius: 0px;
  transition: all 0.2s ease;
}

.blog_card:hover .blog_tag {
  border-color: #328af1;
  background: rgba(50, 138, 241, 0.12);
  color: #fff;
  box-shadow: 0 0 5px rgba(50, 138, 241, 0.3);
}


/* ==================== STYLES FROM contact.html ==================== */
.contact_page {
  padding-block: 8rem 4rem;
  background-color: #020208;
  min-height: 100vh;
  /* Refined Background: Deep Futuristic space space grid with floating nebula/radial glows */
  background-image:
    radial-gradient(circle at 10% 20%, rgba(50, 138, 241, 0.16) 0%, transparent 45%),
    radial-gradient(circle at 90% 80%, rgba(138, 43, 226, 0.12) 0%, transparent 50%),
    linear-gradient(rgba(50, 138, 241, 0.03) 1.5px, transparent 1.5px),
    linear-gradient(90deg, rgba(50, 138, 241, 0.03) 1.5px, transparent 1.5px);
  background-size: 100% 100%, 100% 100%, 35px 35px, 35px 35px;
  position: relative;
}

/* Enlarged main contact card frame */
.contact_card_frame {
  max-width: 820px;
  margin: 0 auto;
  background: rgba(9, 12, 62, 0.18);
  border: 1px solid rgba(50, 138, 241, 0.2);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  padding: 3rem;
  position: relative;
}

.contact_header {
  text-align: center;
  margin-bottom: 3rem;
}

.contact_title_badge {
  font-family: monospace;
  color: #328af1;
  font-size: 14px;
  background: rgba(50, 138, 241, 0.05);
  border: 1px solid rgba(50, 138, 241, 0.2);
  padding: 6px 16px;
  display: inline-block;
  margin-bottom: 1rem;
  text-shadow: 0 0 5px rgba(50, 138, 241, 0.3);
}

.contact_main_title {
  font-family: var(--heading-font);
  font-size: 2.4rem;
  color: #fff;
  text-shadow: 0 0 15px rgba(50, 138, 241, 0.35);
}

.form_group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.75rem;
  margin-bottom: 1.75rem;
}

.form_field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form_label {
  font-size: 13px;
  font-family: "DIN Next LT Arabic", var(--body-font), monospace;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 0.5px;
}

/* Fields styled exactly like footer email input group */
.form_input_wrapper {
  display: flex;
  width: 100%;
  border: 1px solid rgba(50, 138, 241, 0.2);
  background: rgba(3, 4, 15, 0.6);
  transition: border-color 0.3s, box-shadow 0.3s;
}

.form_input_wrapper:focus-within {
  border-color: #328af1;
  box-shadow: 0 0 8px rgba(50, 138, 241, 0.2);
}

.form_input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  padding: 12px 14px;
  font-size: 14px;
  color: #fff;
  font-family: "DIN Next LT Arabic", var(--body-font), sans-serif;
}

.form_input::placeholder {
  color: rgba(255, 255, 255, 0.35);
}

/* Custom Dropdowns */
.custom_select {
  position: relative;
  width: 100%;
  font-family: "DIN Next LT Arabic", var(--body-font), sans-serif;
  user-select: none;
}

.custom_select_trigger {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(3, 4, 15, 0.65);
  border: 1px solid rgba(50, 138, 241, 0.2);
  color: #fff;
  padding: 11px 14px;
  font-size: 13.5px;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
}

.custom_select_trigger::after {
  content: "";
  width: 6px;
  height: 6px;
  border-bottom: 2px solid #328af1;
  border-left: 2px solid #328af1;
  transform: translateY(-2px) rotate(-45deg);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  margin-right: 10px;
  display: inline-block;
}

.custom_select.open .custom_select_trigger {
  border-color: #328af1;
  box-shadow: 0 0 8px rgba(50, 138, 241, 0.2);
}

.custom_select.open .custom_select_trigger::after {
  transform: translateY(2px) rotate(135deg);
}

.custom_select_options {
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  width: 100%;
  background: #03040b;
  border: 1px solid #328af1;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.8), 0 0 10px rgba(50, 138, 241, 0.15);
  z-index: 100;
  display: none;
  max-height: 180px;
  overflow-y: auto;
}

.custom_select.open .custom_select_options {
  display: block;
}

.custom_select_option {
  padding: 10px 14px;
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: right;
}

.custom_select_option:hover {
  background: rgba(50, 138, 241, 0.15);
  color: #fff;
}

.custom_select_option.selected {
  background: rgba(50, 138, 241, 0.2);
  color: #328af1;
  font-weight: bold;
}

/* Checkbox/Toggle Switch styling */
.meeting_toggle_container {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-block: 1.5rem;
  cursor: pointer;
  user-select: none;
}

.toggle_checkbox {
  display: none;
}

.custom_toggle {
  width: 42px;
  height: 22px;
  background: rgba(3, 4, 15, 0.9);
  border: 2px solid white;
  position: relative;
  transition: all 0.3s ease;
}

.custom_toggle::before {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  background: #9394B7;
  top: 3.5px;
  right: 3px;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.toggle_checkbox:checked+.custom_toggle {
  border-color: #328af1;
  background: rgba(50, 138, 241, 0.1);
}

.toggle_checkbox:checked+.custom_toggle::before {
  right: 23px;
  background: #328af1;
  box-shadow: 0 0 8px #328af1;
}

.toggle_label {
  font-size: 14px;
  font-weight: 500;
  color: #717C99;
  font-family: "DIN Next LT Arabic", var(--body-font), sans-serif;
}

/* Sliding Meeting Fields */
.meeting_fields_area {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.meeting_fields_area.show {
  max-height: 500px;
  border-top: 1px dashed rgba(50, 138, 241, 0.25);
  padding-top: 1.5rem;
  margin-bottom: 2rem;
  overflow: visible;
}

.dropdown_grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr 1fr;
  gap: 1.25rem;
}

.time_select_grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

/* Action Buttons */
.btn_container {
  display: flex;
  gap: 1.5rem;
  margin-top: 2.5rem;
}

.action_btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 24px;
  font-size: 15px;
  cursor: pointer;
  border-radius: 0px;
  font-weight: bold;
  transition: all 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
  font-family: "DIN Next LT Arabic", var(--body-font), sans-serif;
}

.btn_submit {
  background: #328af1;
  border: 2px solid #328af1;
  color: white;
  box-shadow: 4px 4px 0px rgba(50, 138, 241, 0.3);
}

.btn_submit:hover {
  background: rgba(50, 138, 241, 0.15);
  border-color: #328af1;
  color: #fff;
  box-shadow: 2px 2px 0px rgba(50, 138, 241, 0.4);
  transform: translate(2px, 2px);
}

.btn_instant_meet {
  background: rgba(3, 4, 15, 0.9);
  border: 2px solid #f5c536;
  color: #f5c536;
  box-shadow: 4px 4px 0px rgba(245, 197, 54, 0.3);
}

.btn_instant_meet:hover {
  background: #F9AB01;
  color: #fff;
  border-color: #f5c536;
  box-shadow: 2px 2px 0px rgba(245, 197, 54, 0.4);
  transform: translate(2px, 2px);
}

/* Confirmation/Error Popup Styling */
.terminal_popup_overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(2, 2, 8, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
}

.terminal_popup_overlay.active {
  display: flex;
}

.terminal_window {
  width: 90%;
  max-width: 460px;
  background: #03040b;
  border: 2px solid #328af1;
  box-shadow: 0 0 25px rgba(50, 138, 241, 0.35);
  border-radius: 0px;
  overflow: hidden;
}

.terminal_window.success_style {
  border-color: #328af1;
  box-shadow: 0 0 25px #328af1;
  ;
}

.terminal_window.error_style {
  border-color: #ff3366;
  box-shadow: 0 0 25px rgba(255, 51, 102, 0.35);
}

.terminal_header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #328af1;
  border-bottom: 1px solid rgba(50, 138, 241, 0.2);
  padding: 10px 16px;
}

.terminal_window.success_style .terminal_header {
  background: #328af1;
  border-bottom: 1px solid #328af1;
}

.terminal_window.error_style .terminal_header {
  background: rgba(255, 51, 102, 0.1);
  border-bottom: 1px solid rgba(255, 51, 102, 0.2);
}

.terminal_title {
  font-family: monospace;
  font-size: 12px;
  color: white;
}

.terminal_window.success_style .terminal_title {
  color: white;
}

.terminal_window.error_style .terminal_title {
  color: #ff3366;
}

.terminal_close_btn {
  background: transparent;
  cursor: pointer;
  border: none;
  outline: none;
  transition: color 0.2s ease;

  .red {
    display: flex;
    width: 10px;
    height: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0px;
    transition: all 0.2s ease;

    &:hover {
      transform: scale(1.2);
    }
  }

  .red {
    background-color: #ff5f56;
  }
}

.terminal_body {
  padding: 2rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}

.terminal_icon {
  font-size: 42px;
}

.terminal_window.success_style .terminal_icon {
  color: #328af1;
}

.terminal_window.error_style .terminal_icon {
  color: #ff3366;
}

.terminal_message_title {
  font-size: 1.3rem;
  font-weight: bold;
  color: #fff;
  font-family: "DIN Next LT Arabic", var(--body-font), sans-serif;
}

.terminal_message_text {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.6;
  font-family: "DIN Next LT Arabic", var(--body-font), sans-serif;
}

.terminal_action_btn {
  margin-top: 1rem;
  background: transparent;
  border: 1px solid #328af1;
  color: #328af1;
  padding: 8px 24px;
  cursor: pointer;
  font-family: "DIN Next LT Arabic", var(--body-font), monospace;
  font-weight: bold;
  transition: all 0.2s;
}

.terminal_action_btn:hover {
  background: #328af1;
  color: #03040b;
}

.terminal_window.success_style .terminal_action_btn {
  border-color: #328af1;
  color: #328af1;
}

.terminal_window.success_style .terminal_action_btn:hover {
  background: #328af1;
  color: white;
}

.terminal_window.error_style .terminal_action_btn {
  border-color: #ff3366;
  color: #ff3366;
}

.terminal_window.error_style .terminal_action_btn:hover {
  background: #ff3366;
  color: #03040b;
}

@media screen and (max-width: 768px) {
  .form_group {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .dropdown_grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .contact_card_frame {
    padding: 1.5rem;
  }

  .btn_container {
    flex-direction: column;
    gap: 1rem;
  }

  .contact_main_title {
    font-size: 1.75rem;
  }
}

/* Badges overrides in mobile menu */
.mobile_menu .nav_link.new::after {
  content: "NEW";
  font-family: var(--body-font), sans-serif;
  font-weight: 900;
  font-size: 9px;
  background: #328af1;
  color: #fff;
  width: 25px;
  height: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  margin-right: auto;
  margin-left: 10px;
}

.mobile_menu .nav_link.soon::after {
  content: "SOON";
  font-family: var(--body-font), sans-serif;
  font-weight: 900;
  font-size: 9px;
  background: #f5c536;
  color: #03040b;
  width: 30px;
  height: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  margin-right: auto;
  margin-left: 10px;
}


/* ==================== STYLES FROM index.html ==================== */
/* Premium Digital Mobile Menu Overrides */
.mobile_menu {
  position: absolute;
  top: 100%;
  left: 15px;
  right: 15px;
  width: calc(100% - 30px);
  background: rgba(3, 5, 19, 0.96) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 2px solid #328af1 !important;
  border-radius: 4px !important;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.9),
    0 0 20px rgba(50, 138, 241, 0.4),
    inset 0 0 15px rgba(50, 138, 241, 0.1) !important;
  padding: 20px !important;
  overflow: hidden;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 20px !important;
}

/* Scanline Overlay Effect */
.mobile_menu::before {
  content: " ";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
  z-index: 3;
  background-size: 100% 4px, 6px 100%;
  pointer-events: none;
}

/* Glow line scanner anim */
.menu_scanner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(to right, transparent, #328af1, transparent);
  opacity: 0.7;
  z-index: 4;
  pointer-events: none;
  animation: scanAnim 4s linear infinite;
}

@keyframes scanAnim {
  0% {
    top: 0%;
  }

  100% {
    top: 100%;
  }
}

.menu_matrix_canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  opacity: 0.18;
}

/* Cyber Menu Header */
.cyber_menu_header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(50, 138, 241, 0.3);
  padding-bottom: 12px;
  font-family: 'Share Tech Mono', monospace;
  font-size: 11px;
  color: #328af1;
  letter-spacing: 1px;
  z-index: 2;
}

.cyber_status {
  display: flex;
  align-items: center;
  gap: 6px;
}

.blink_dot {
  width: 6px;
  height: 6px;
  background: #328af1;
  border-radius: 50%;
  box-shadow: 0 0 8px #328af1;
  animation: blink 1s infinite alternate;
}

@keyframes blink {
  0% {
    opacity: 0.2;
  }

  100% {
    opacity: 1;
  }
}

.mobile_menu .nav_list {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px !important;
  z-index: 2;
}

/* Cyber Button Links */
.mobile_menu .nav_link {
  font-family: 'Share Tech Mono', 'Courier New', monospace;
  font-size: 15px !important;
  font-weight: 600;
  color: #ebf3fe !important;
  background: rgba(50, 138, 241, 0.04) !important;
  border: 1px solid rgba(50, 138, 241, 0.25) !important;
  padding: 12px 18px !important;
  border-radius: 0px !important;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
  position: relative;
  overflow: hidden;
}

.mobile_menu .nav_link::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 3px;
  height: 100%;
  background: #328af1;
  transform: scaleY(0);
  transition: transform 0.25s ease;
}

.mobile_menu .nav_link:hover {
  color: #328af1 !important;
  border-color: #328af1 !important;
  background: rgba(50, 138, 241, 0.12) !important;
  box-shadow: 0 0 15px rgba(50, 138, 241, 0.3) !important;
  transform: translateX(-4px) !important;
  /* Visual shift on hover */
}

.mobile_menu .nav_link:hover::before {
  transform: scaleY(1);
}

.nav_link_num {
  color: rgba(50, 138, 241, 0.5);
  font-size: 12px;
  margin-left: 10px;
}

.nav_link_arrow {
  font-size: 11px;
  color: rgba(50, 138, 241, 0.4);
  transition: transform 0.25s ease, color 0.25s ease;
}

.mobile_menu .nav_link:hover .nav_link_arrow {
  color: #328af1;
  transform: translateX(-5px);
}

/* Cyber Menu Footer */
.cyber_menu_footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px dashed rgba(50, 138, 241, 0.2);
  padding-top: 12px;
  font-family: 'Share Tech Mono', monospace;
  font-size: 10px;
  color: rgba(235, 243, 254, 0.4);
  z-index: 2;
}

/* Badges overrides in mobile menu */
.mobile_menu .nav_link.new::after {
  content: "?";
  font-family: var(--body-font), sans-serif;
  font-weight: 900;
  font-size: 12px;
  background: #2ecc71;
  color: #fff;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin-right: auto;
  margin-left: 10px;
  box-shadow: none;
}

.mobile_menu .nav_link.soon::after {
  content: "?";
  font-family: var(--body-font), sans-serif;
  font-weight: 900;
  font-size: 12px;
  background: #ff3366;
  color: #fff;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin-right: auto;
  margin-left: 10px;
  box-shadow: none;
}


/* ==================== STYLES FROM privacy-policy.html ==================== */
.policy_page {
  padding-block: 8rem 4rem;
  background-color: #010309;
  /* Cyberpunk Cyan Grid Background */
  background-image:
    radial-gradient(circle at 80% 20%, rgba(50, 138, 241, 0.12) 0%, transparent 50%),
    radial-gradient(circle at 15% 85%, rgba(46, 204, 113, 0.06) 0%, transparent 40%),
    linear-gradient(rgba(50, 138, 241, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(50, 138, 241, 0.02) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 24px 24px, 24px 24px;
  min-height: 80vh;
  position: relative;
}

.policy_content {
  background: rgba(9, 12, 62, 0.15);
  border: 1px solid rgba(50, 138, 241, 0.12);
  padding: 3rem 2rem;
  margin-top: 2rem;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.policy_title {
  font-family: var(--heading-font);
  font-size: 2.2rem;
  color: #fff;
  margin-bottom: 0.5rem;
  text-shadow: 0 0 12px rgba(50, 138, 241, 0.3);
}

.policy_subtitle {
  font-family: monospace;
  color: #328af1;
  font-size: 13px;
  display: block;
  margin-bottom: 2.5rem;
}

.policy_block {
  margin-bottom: 2.5rem;
}

.policy_block h3 {
  font-size: 1.4rem;
  color: #ebf3fe;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 10px;
}

.policy_block h3::before {
  content: '//';
  color: #328af1;
  font-family: monospace;
}

.policy_block p {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.8;
}

@media screen and (max-width: 768px) {


  .policy_content {
    padding: 2rem 1.5rem;
  }

  .policy_title {
    font-size: 1.8rem;
  }
}


/* ==================== STYLES FROM project-single.html ==================== */
.project_single_page {
  padding-block: 8rem 4rem;
  background-color: #03030a;
  min-height: 100vh;
  /* Unique Background: Amber & Blue cyber terminal with diagonal tech lines */
  background-image:
    radial-gradient(circle at 50% 0%, rgba(245, 197, 54, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 50% 100%, rgba(50, 138, 241, 0.12) 0%, transparent 50%),
    repeating-linear-gradient(45deg, rgba(50, 138, 241, 0.01) 0px, rgba(50, 138, 241, 0.01) 2px, transparent 2px, transparent 10px);
  background-size: 100% 100%, 100% 100%, 15px 15px;
  position: relative;
}

.project_single_container {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 3rem;
  align-items: start;
}

.project_header_section {
  display: flex;
  justify-content: space-between;
  align-items: end;
  margin-bottom: 3rem;
  border-bottom: 1px solid rgba(50, 138, 241, 0.15);
  padding-bottom: 1.5rem;
  flex-wrap: wrap;
  gap: 1rem;

  .cta_btn {
    background-color: rgb(50, 138, 241) !important;
  }
}

.project_badge {
  display: inline-block;
  background: rgba(50, 138, 241, 0.08);
  border: 1px solid rgba(50, 138, 241, 0.25);
  color: #328af1;
  font-family: monospace;
  font-size: 12px;
  padding: 4px 12px;
  margin-bottom: 1rem;
}

.project_main_title {
  font-size: 2.4rem;
  color: #fff;
  line-height: 1.35;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
}

/* ==========================================
         RIGHT COLUMN: ACCORDION / TABS STYLE
         ========================================== */
.tabs_column {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@media screen and (min-width: 993px) {
  .tabs_column {
    position: sticky;
    top: 100px;
    align-self: start;
  }
}

.cyber_accordion_item {
  background: rgba(9, 12, 62, 0.2);
  border: 1px solid rgba(50, 138, 241, 0.15);
  overflow: hidden;
  transition: all 0.3s ease;
}

.cyber_accordion_header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem 1.5rem;
  cursor: pointer;
  background: rgba(3, 4, 15, 0.4);
  transition: all 0.25s ease;
  user-select: none;
}

.cyber_accordion_header:hover {
  background: rgba(50, 138, 241, 0.06);
  border-color: rgba(50, 138, 241, 0.4);
}

.accordion_title {
  font-size: 1.1rem;
  font-weight: 500;
  color: #ebf3fe;
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: "DIN Next LT Arabic", var(--body-font), sans-serif;
}

.accordion_num {
  color: #328af1;
  font-family: monospace;
  font-weight: bold;
}

.accordion_icon {
  color: #328af1;
  font-size: 14px;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Open Accordion State styling */
.cyber_accordion_item.open {
  border-color: #328af1;
  box-shadow: 0 0 15px rgba(50, 138, 241, 0.2);
  background: rgba(9, 12, 62, 0.35);
}

.cyber_accordion_item.open .cyber_accordion_header {
  background: rgba(50, 138, 241, 0.1);
  border-bottom: 1px solid rgba(50, 138, 241, 0.25);
}

.cyber_accordion_item.open .accordion_icon {
  transform: rotate(180deg);
  color: #fff;
}

.cyber_accordion_content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.accordion_content_inner {
  padding: 1.5rem;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.8;
}

.accordion_content_inner p {
  margin-bottom: 1rem;
}

.accordion_content_inner p:last-child {
  margin-bottom: 0;
}

.tech_list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 1rem;
}

.tech_tag {
  font-size: 12px;
  background: rgba(50, 138, 241, 0.06);
  border: 1px solid rgba(50, 138, 241, 0.2);
  color: #328af1;
  padding: 4px 10px;
  border-radius: 2px;
}

/* ==========================================
         LEFT COLUMN: VERTICAL IMAGE STACK
         ========================================== */
.images_column {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.project_large_img_holder {
  width: 100%;
  overflow: hidden;
  position: relative;
  background: #03040b;
  border: 1px solid rgba(50, 138, 241, 0.15);
  cursor: zoom-in;
}

.project_large_img_holder img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.project_large_img_holder:hover img {
  transform: scale(1.03);
}

.project_zoom_overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(3, 4, 15, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 5;
}

.project_large_img_holder:hover .project_zoom_overlay {
  opacity: 1;
}

.project_zoom_overlay i {
  color: #328af1;
  font-size: 28px;
  text-shadow: 0 0 8px rgba(50, 138, 241, 0.8);
  transition: transform 0.3s ease;
}

.project_zoom_overlay:hover i {
  transform: scale(1.15);
  color: #fff;
}

.back_to_projects_wrapper {
  display: flex;
  justify-content: flex-start;
  margin-top: 3rem;
  border-top: 1px solid rgba(50, 138, 241, 0.1);
  padding-top: 1.5rem;
}

.back_to_projects {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #328af1;
  text-decoration: none;
  font-family: monospace;
  transition: color 0.3s;
}

.back_to_projects:hover {
  color: #fff;
  text-shadow: 0 0 8px rgba(50, 138, 241, 0.6);
}

/* Responsive styling */
@media screen and (max-width: 992px) {
  .project_single_container {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .images_column {
    order: 2;
    /* Put images below content tabs on tablet/mobile */
  }

  .tabs_column {
    order: 1;
  }
}

@media screen and (max-width: 768px) {

  .project_single_page {
    padding-block: 6rem 3rem;
  }

  .project_main_title {
    font-size: 1.8rem;
  }

  .cyber_accordion_header {
    padding: 1rem 1.25rem;
  }

  .accordion_content_inner {
    padding: 1.25rem;
  }
}

/* Badges overrides in mobile menu */
.mobile_menu .nav_link.new::after {
  content: "?";
  font-family: var(--body-font), sans-serif;
  font-weight: 900;
  font-size: 12px;
  background: #2ecc71;
  color: #fff;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin-right: auto;
  margin-left: 10px;
  box-shadow: none;
}

.mobile_menu .nav_link.soon::after {
  content: "?";
  font-family: var(--body-font), sans-serif;
  font-weight: 900;
  font-size: 12px;
  background: #ff3366;
  color: #fff;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin-right: auto;
  margin-left: 10px;
  box-shadow: none;
}


/* ==================== STYLES FROM projects.html ==================== */
.projects_page {
  padding-block: 8rem 4rem;
  background-color: #020208;
  min-height: 100vh;
  /* Unique Background: Deep Space Matrix & Dotted Grid with neon radial glows */
  background-image:
    radial-gradient(circle at 80% 20%, rgba(0, 229, 255, 0.12) 0%, transparent 50%),
    radial-gradient(circle at 20% 80%, rgba(138, 43, 226, 0.09) 0%, transparent 60%),
    radial-gradient(rgba(50, 138, 241, 0.08) 1.5px, transparent 1.5px);
  background-size: 100% 100%, 100% 100%, 30px 30px;
  position: relative;
}

.projects_header_section {
  text-align: center;
  margin-bottom: 3.5rem;
}

.projects_title_badge {
  font-family: monospace;
  color: #328af1;
  font-size: 14px;
  background: rgba(50, 138, 241, 0.05);
  border: 1px solid rgba(50, 138, 241, 0.2);
  padding: 6px 16px;
  display: inline-block;
  margin-bottom: 1rem;
  text-shadow: 0 0 5px rgba(50, 138, 241, 0.3);
}

.projects_main_title {
  font-size: 2.5rem;
  color: #fff;
  text-shadow: 0 0 15px rgba(50, 138, 241, 0.35);
}

/* Filter bar styling styled like watch_video floating button */
.filter_container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-bottom: 3rem;
  direction: rtl;
}

.filter_btn {
  display: inline-flex;
  align-items: center;
  background: rgba(3, 4, 15, 0.9);
  border: 2px solid rgba(50, 138, 241, 0.25);
  color: rgba(255, 255, 255, 0.75);
  padding: 8px 16px;
  font-size: 13px;
  font-family: "DIN Next LT Arabic", var(--body-font), monospace;
  font-weight: 500;
  cursor: pointer;
  box-shadow: 4px 4px 0px rgba(50, 138, 241, 0.2);
  transition: all 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
  border-radius: 0px;
}

.filter_btn:hover {
  border-color: #328af1;
  color: #fff;
  box-shadow: 2px 2px 0px rgba(50, 138, 241, 0.35);
  transform: translate(2px, 2px);
}

.filter_btn.active {
  border-color: #328af1;
  background: rgba(50, 138, 241, 0.12);
  color: #fff;
  box-shadow: 4px 4px 0px rgba(50, 138, 241, 0.4);
}

/* Grid and Cards */
.projects_grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;

  .project_card {
    background: rgba(9, 12, 62, 0.25);
    border: 1px solid rgba(50, 138, 241, 0.16);
    border-radius: 0px;
    overflow: hidden;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    display: flex;
    text-decoration: none;
    color: inherit;
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    flex-direction: column;
  }
}



/* Cyber Glitch Effect on Filter Click */
@keyframes cyberGlitch {
  0% {
    transform: translate(0);
    filter: hue-rotate(0deg) saturate(1) contrast(1);
    opacity: 0.9;
  }

  20% {
    transform: translate(-3px, 2px) skewX(2deg);
    filter: hue-rotate(90deg) saturate(1.5) contrast(1.2);
    opacity: 0.8;
  }

  40% {
    transform: translate(3px, -1px) skewY(-1deg);
    filter: hue-rotate(180deg) saturate(2) contrast(1.5);
    opacity: 0.95;
  }

  60% {
    transform: translate(-1px, -2px) skewX(-2deg);
    filter: hue-rotate(270deg) saturate(1.2) contrast(1.1);
    opacity: 0.85;
  }

  80% {
    transform: translate(2px, 1px) skewY(1deg);
    filter: hue-rotate(360deg) saturate(1) contrast(1);
    opacity: 0.9;
  }

  100% {
    transform: translate(0);
    filter: none;
    opacity: 1;
  }
}

.glitch-active {
  animation: cyberGlitch 0.35s steps(2, end) 1;
}

.project_card:hover {
  transform: translateY(-6px);
  border-color: #328af1;
  box-shadow: 0 10px 30px rgba(50, 138, 241, 0.15);
}

.project_card_img_holder {
  height: 200px;
  width: 100%;
  overflow: hidden;
  position: relative;
  background: #03040b;
  border-bottom: 1px solid rgba(50, 138, 241, 0.08);
}

.project_card_img_holder img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.project_card:hover .project_card_img_holder img {
  transform: scale(1.05);
}

.project_zoom_overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(3, 4, 15, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 5;
  cursor: zoom-in;
}

.project_card_img_holder:hover .project_zoom_overlay {
  opacity: 1;
}

.project_zoom_overlay i {
  color: #328af1;
  font-size: 24px;
  text-shadow: 0 0 8px rgba(50, 138, 241, 0.8);
  transition: transform 0.3s ease;
}

.project_zoom_overlay:hover i {
  transform: scale(1.15);
  color: #fff;
}

.project_card_content {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 1rem;
}

.project_card_tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.project_tag {
  font-size: 11px;
  font-family: "DIN Next LT Arabic", var(--body-font), monospace;
  color: #328af1;
  background: rgba(50, 138, 241, 0.05);
  border: 1px solid rgba(50, 138, 241, 0.2);
  padding: 2px 8px;
  border-radius: 2px;
}

.project_card_title {
  font-size: 1.3rem;
  font-weight: 500;
  color: #ebf3fe;
  line-height: 1.4;
  transition: color 0.3s;
}

.project_card:hover .project_card_title {
  color: #328af1;
}

.project_card_desc {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.6;
  flex: 1;
}

/* Eye Action Button styled like watch_video button */
.project_action_btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(3, 4, 15, 0.9);
  border: 2px solid #328af1;
  color: #328af1;
  width: 42px;
  height: 42px;
  cursor: pointer;
  box-shadow: 4px 4px 0px rgba(50, 138, 241, 0.3);
  transition: all 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
  margin-right: auto;
  margin-top: auto;
  border-radius: 0px;
  text-decoration: none;
}

.project_action_btn:hover {
  border-color: #328af1;
  background: rgba(50, 138, 241, 0.15);
  color: #fff;
  box-shadow: 2px 2px 0px rgba(50, 138, 241, 0.4);
  transform: translate(2px, 2px);
}

/* Cyber Pagination */
.cyber_pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-top: 4rem;
  font-family: monospace;
}

.cyber_pagination .page_btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 45px;
  height: 45px;
  background: #020309;
  border: 1px solid #328af1;
  color: #328af1;
  text-decoration: none;
  font-size: 16px;
  font-weight: bold;
  transition: all 0.2s ease;
  box-shadow: 4px 4px 0px rgba(50, 138, 241, 0.3);
  position: relative;
}

.cyber_pagination .page_btn:hover:not(.disabled) {
  border-color: #328af1;
  background: rgba(50, 138, 241, 0.15);
  color: #fff;
  box-shadow: 2px 2px 0px rgba(50, 138, 241, 0.4);
  transform: translate(2px, 2px);
}

.cyber_pagination .page_btn.active {
  background: #328af1;
  border-color: #328af1;
  color: #03040b;
  font-weight: bold;
  box-shadow: 4px 4px 0px rgba(255, 255, 255, 0.2);
}

.cyber_pagination .page_btn.disabled {
  opacity: 0.3;
  border-color: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.25);
  box-shadow: none;
  cursor: not-allowed;
  pointer-events: none;
}

/* Responsive styling */
@media screen and (max-width: 992px) {
  .projects_grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 768px) {


  .projects_grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .projects_main_title {
    font-size: 2rem;
  }

  .filter_container {
    gap: 8px;
  }

  .filter_btn {
    padding: 6px 12px;
    font-size: 12px;
  }
}

@media screen and (max-width: 480px) {
  .projects_page {
    padding-block: 6rem 3rem;
  }

  .projects_main_title {
    font-size: 1.75rem;
  }

  .project_card_content {
    padding: 1.25rem;
  }
}

/* Badges overrides in mobile menu */
.mobile_menu .nav_link.new::after {
  content: "?";
  font-family: var(--body-font), sans-serif;
  font-weight: 900;
  font-size: 12px;
  background: #2ecc71;
  color: #fff;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin-right: auto;
  margin-left: 10px;
  box-shadow: none;
}

.mobile_menu .nav_link.soon::after {
  content: "?";
  font-family: var(--body-font), sans-serif;
  font-weight: 900;
  font-size: 12px;
  background: #ff3366;
  color: #fff;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin-right: auto;
  margin-left: 10px;
  box-shadow: none;
}


/* ==================== STYLES FROM services.html ==================== */
.services_page {
  padding-block: 8rem 4rem;
  background-color: #020208;
  min-height: 100vh;
  /* Unique background matching our style */
  background-image:
    radial-gradient(circle at 50% 20%,
      rgba(50, 138, 241, 0.2) 0%,
      transparent 60%),
    radial-gradient(circle at 10% 80%,
      rgba(50, 138, 241, 0.1) 0%,
      transparent 40%),
    linear-gradient(rgba(50, 138, 241, 0.04) 1.5px, transparent 1.5px),
    linear-gradient(90deg,
      rgba(50, 138, 241, 0.04) 1.5px,
      transparent 1.5px);
  background-size:
    100% 100%,
    100% 100%,
    40px 40px,
    40px 40px;
  position: relative;
}

.services_header_section {
  text-align: center;
  margin-bottom: 4rem;
}

.services_title_badge {
  font-family: monospace;
  color: #328af1;
  font-size: 14px;
  background: rgba(50, 138, 241, 0.05);
  border: 1px solid rgba(50, 138, 241, 0.2);
  padding: 6px 16px;
  display: inline-block;
  margin-bottom: 1rem;
  text-shadow: 0 0 5px rgba(50, 138, 241, 0.3);
}

.services_main_title {
  font-size: 2.5rem;
  color: #fff;
  text-shadow: 0 0 15px rgba(50, 138, 241, 0.35);
}

/* Grid Console Layout always visible */
.services_selector_grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 1.5rem !important;
  margin-top: 3rem !important;
}

@media screen and (max-width: 992px) {
  .services_selector_grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media screen and (max-width: 576px) {
  .services_selector_grid {
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
  }
}

/* Badges overrides in mobile menu */
.mobile_menu .nav_link.new::after {
  content: "?";
  font-family: var(--body-font), sans-serif;
  font-weight: 900;
  font-size: 9px;
  background: #2ecc71;
  color: #fff;
  width: 15px;
  height: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin-right: auto;
  margin-left: 10px;
  box-shadow: none;
}

.mobile_menu .nav_link.soon::after {
  content: "?";
  font-family: var(--body-font), sans-serif;
  font-weight: 900;
  font-size: 9px;
  background: #ff3366;
  color: #fff;
  width: 15px;
  height: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin-right: auto;
  margin-left: 10px;
  box-shadow: none;
}


/* ==================== STYLES FROM terms-and-conditions.html ==================== */
.policy_page {
  padding-block: 8rem 4rem;
  background-color: #020108;
  /* Cyberpunk Purple Matrix Dotted Background */
  background-image:
    radial-gradient(circle at 20% 25%, rgba(138, 43, 226, 0.12) 0%, transparent 60%),
    radial-gradient(circle at 85% 80%, rgba(245, 197, 54, 0.04) 0%, transparent 35%),
    radial-gradient(rgba(138, 43, 226, 0.03) 1px, transparent 0);
  background-size: 100% 100%, 100% 100%, 18px 18px;
  min-height: 80vh;
  position: relative;
}

.policy_content {
  background: rgba(9, 12, 62, 0.15);
  border: 1px solid rgba(50, 138, 241, 0.12);
  padding: 3rem 2rem;
  margin-top: 2rem;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.policy_title {
  font-family: var(--heading-font);
  font-size: 2.2rem;
  color: #fff;
  margin-bottom: 0.5rem;
  text-shadow: 0 0 12px rgba(50, 138, 241, 0.3);
}

.policy_subtitle {
  font-family: monospace;
  color: #328af1;
  font-size: 13px;
  display: block;
  margin-bottom: 2.5rem;
}

.policy_block {
  margin-bottom: 2.5rem;
}

.policy_block h3 {
  font-size: 1.4rem;
  color: #ebf3fe;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 10px;
}

.policy_block h3::before {
  content: '//';
  color: #328af1;
  font-family: monospace;
}

.policy_block p {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.8;
}

@media screen and (max-width: 768px) {


  .policy_content {
    padding: 2rem 1.5rem;
  }

  .policy_title {
    font-size: 1.8rem;
  }
}

/*=============== CYBER DIGITAL PRELOADER ===============*/
#cyber-preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #020308;
  z-index: 999999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-family: 'Share Tech Mono', 'VT323', monospace;
  direction: ltr;
}

/* CRT Scanlines and Screen Glitch Overlay */
#cyber-preloader::before {
  content: " ";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
  z-index: 9999999;
  background-size: 100% 4px, 6px 100%;
  pointer-events: none;
}

#cyber-preloader::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(50, 138, 241, 0.02);
  opacity: 0.15;
  pointer-events: none;
  z-index: 9999998;
}

.preloader-hud {
  position: relative;
  width: 90%;
  max-width: 580px;
  background: rgba(4, 6, 26, 0.85);
  border: 3px solid #328af1;
  padding: 40px 30px;
  box-shadow: 8px 8px 0px rgba(50, 138, 241, 0.4), inset 0 0 20px rgba(50, 138, 241, 0.1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  border-radius: 0px;
}

.preloader-header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: #328af1;
  font-weight: 700;
  margin-bottom: 25px;
  text-transform: uppercase;
  letter-spacing: 2px;
  border-bottom: 2px solid rgba(50, 138, 241, 0.3);
  padding-bottom: 10px;
}

.preloader-logo-container {
  position: relative;
  margin-bottom: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.preloader-logo-img {
  max-width: 130px;
  filter: drop-shadow(0 0 12px rgba(50, 138, 241, 0.6));
  animation: logo-glow 2s infinite ease-in-out;
}

@keyframes logo-glow {

  0%,
  100% {
    filter: drop-shadow(0 0 8px rgba(50, 138, 241, 0.4));
    transform: scale(1);
  }

  50% {
    filter: drop-shadow(0 0 22px rgba(50, 138, 241, 0.8));
    transform: scale(1.04);
  }
}

.preloader-terminal {
  width: 100%;
  font-family: var(--body-font), 'Share Tech Mono', 'Courier New', monospace;
  font-size: 14px;
  font-weight: 700;
  color: #ebf3fe;
  text-align: right;
  direction: rtl;
  background: rgba(2, 3, 10, 0.9);
  border: 2px solid rgba(50, 138, 241, 0.4);
  padding: 16px;
  height: 140px;
  overflow-y: hidden;
  margin-bottom: 25px;
  border-radius: 0px;
  box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.9);
}

.terminal-line {
  line-height: 1.6;
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
}

.terminal-line.success {
  color: #27c93f;
  text-shadow: 0 0 4px rgba(39, 201, 63, 0.4);
}

.terminal-line.warning {
  color: #ffbd2e;
  text-shadow: 0 0 4px rgba(255, 189, 46, 0.4);
}

.preloader-progress-container {
  width: 100%;
  margin-bottom: 20px;
}

.progress-text {
  display: flex;
  justify-content: space-between;
  font-size: 15px;
  color: #328af1;
  margin-bottom: 8px;
  font-weight: 800;
  text-shadow: 0 0 5px rgba(50, 138, 241, 0.3);
}

.progress-bar-outer {
  width: 100%;
  height: 12px;
  background: rgba(50, 138, 241, 0.1);
  border: 2px solid rgba(50, 138, 241, 0.5);
  position: relative;
  overflow: hidden;
}

.progress-bar-inner {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #328af1, #64a6f7);
  box-shadow: 0 0 12px rgba(50, 138, 241, 0.85);
  transition: width 0.1s linear;
}

.preloader-footer {
  font-size: 13px;
  font-weight: 700;
  color: #328af1;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Sound play request overlay */
.audio-init-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(2, 3, 10, 0.98);
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: opacity 0.5s ease;
}

.audio-init-btn {
  font-family: var(--body-font), inherit;
  font-size: 20px;
  font-weight: 800;
  background: rgba(3, 4, 15, 0.9);
  border: 3px solid #328af1;
  color: #ffffff;
  padding: 16px 36px;
  cursor: pointer;
  box-shadow: 6px 6px 0px rgba(50, 138, 241, 0.4);
  transition: all 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
  position: relative;
  border-radius: 0px;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
}

.audio-init-btn:hover {
  background: rgba(50, 138, 241, 0.1);
  box-shadow: 8px 8px 0px rgba(50, 138, 241, 0.55);
  transform: translate(-3px, -3px);
}


/* Transition classes */
.preloader-hide {
  animation: preloader-exit 0.8s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}

@keyframes preloader-exit {
  0% {
    transform: scale(1);
    opacity: 1;
  }

  30% {
    transform: scale(1.02) scaleY(0.01);
    opacity: 0.8;
  }

  60% {
    transform: scaleX(0.001) scaleY(0.01);
    opacity: 0.5;
  }

  100% {
    transform: scaleX(0.001) scaleY(0);
    opacity: 0;
    visibility: hidden;
  }
}

/* Website glitch effect on enter */
.body-glitch-active {
  animation: site-glitch 0.6s step-end 1;
}

@keyframes site-glitch {
  0% {
    filter: contrast(1.2) hue-rotate(5deg);
    transform: translate(2px, 1px) skewX(1deg);
  }

  10% {
    filter: contrast(1.5) invert(0.05);
    transform: translate(-3px, -2px) skewX(-2deg);
  }

  20% {
    filter: none;
    transform: translate(0, 0) skewX(0);
  }

  30% {
    filter: contrast(1.1) saturate(1.5);
    transform: translate(3px, 2px) skewX(3deg);
  }

  40% {
    filter: hue-rotate(-10deg) grayscale(0.2);
    transform: translate(-2px, 1px) skewY(-1deg);
  }

  50% {
    filter: none;
    transform: translate(0, 0) skewX(0);
  }

  60% {
    filter: brightness(1.3) contrast(1.3);
    transform: translate(4px, -3px) skewX(-4deg);
    clip-path: inset(10% 0 12% 0);
  }

  70% {
    filter: none;
    transform: translate(0, 0) skewX(0);
    clip-path: none;
  }

  80% {
    filter: invert(0.1) saturate(2);
    transform: translate(-3px, 3px) skewX(2deg);
    clip-path: inset(40% 0 30% 0);
  }

  90% {
    filter: none;
    transform: translate(0, 0) skewX(0);
    clip-path: none;
  }

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