/* <!-- ==================START HEADER==================== --> */
header {
  z-index: 100;
  .header-icon {
    width: 7.5rem;
  }
  @media only screen and (max-width: 992px) {
    .menu-icon-toggler {
      width: 3.125rem;
    }
  }
}
/* <!-- ==================END HEADER==================== --> */

/* <!-- ==================START HERO SECTION==================== --> */
#hero-section {
  padding-block: 130px;
  background: linear-gradient(
    135deg,
    var(--primary-color) 0%,
    var(--secondary-color) 100%
  );
  .hero-title-main {
    width: 290px;
  }

  .hero-sub-title {
    color: var(--text-sub-color);
  }

  .hero-description {
    color: var(--text-desc-color);
  }
  .hero-googleplay-img,
  .hero-appstore-img {
    width: 270px;
  }

  .app-screenshot {
    max-width: 18rem;
    border-radius: 1rem;
    filter: drop-shadow(0 8px 32px rgba(153, 153, 153, 0.35))
      drop-shadow(0 3px 12px rgba(0, 0, 0, 0.18));
    -webkit-filter: drop-shadow(0 8px 32px rgba(153, 153, 153, 0.35))
      drop-shadow(0 3px 12px rgba(0, 0, 0, 0.18));
  }

  .floating-card {
    position: absolute;
    bottom: -1.5rem;
    left: -2.5rem;
    width: 7rem;
    transform: rotate(-10deg);
    border-radius: 0.75rem;
    filter: drop-shadow(0 8px 32px rgba(0, 0, 0, 0.35))
      drop-shadow(0 3px 12px rgba(0, 0, 0, 0.18));
  }

  .bg-circle {
    position: absolute;
    background-color: var(--white-color);
    border-radius: 50%;
    opacity: 0.12;
    &.circle-top-right {
      width: 18rem;
      height: 18rem;
      top: -6rem;
      right: -6rem;
      position: absolute;
    }

    &.circle-bottom-left {
      width: 28rem;
      height: 28rem;
      bottom: -12rem;
      left: -12rem;
      opacity: 0.1;
      position: absolute;
    }
  }

  .bg-glow {
    position: absolute;
    width: 12rem;
    height: 12rem;
    top: 40%;
    left: 60%;
    background: radial-gradient(circle, var(--color-glow) 0%, transparent 70%);
    opacity: 0.18;
    border-radius: 50%;
  }

  @media only screen and (max-width: 600px) {
    .hero-title {
      font-size: 1.75rem;
    }
    .hero-title-main {
      width: 8.75rem;
    }
    .hero-description {
      font-size: 1rem;
    }
    .hero-googleplay-img,
    .hero-appstore-img {
      width: 180px;
    }
    .app-screenshot {
      max-width: 12rem;
    }
    .floating-card {
      width: 5rem;
    }
  }
  @media (min-width: 768px) and (max-width: 992px) {
    #hero-section {
      padding-top: 180px;
    }
    .hero-title {
      font-size: 35px;
    }
    .hero-title-main {
      width: 200px;
    }
    .hero-googleplay-img,
    .hero-appstore-img {
      width: 180px;
    }
    .app-screenshot {
      max-width: 13rem;
    }
  }
  @media (min-width: 993px) and (max-width: 1400px) {
    .hero-title {
      font-size: 55px;
    }
    .hero-title-main {
      width: 200px;
    }
  }
}
/* <!-- ==================END HERO SECTION==================== --> */

/* <!-- ==================START FEATURES SECTION==================== --> */
#features {
  padding-block: 90px;
  background: linear-gradient(135deg, #f5f9ff 0%, #f0f3f8 100%);
  .features-wallpaper svg {
    filter: blur(0.5px);
    transition: opacity 0.3s;
  }
  .features-header-title-logo {
    width: 180px;
  }
  .features-wallpaper .features-shape-1 {
    position: absolute;
    bottom: 40px;
    right: -60px;
  }
  .features-wallpaper .features-shape-2 {
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-15deg);
  }
  .features-wallpaper .features-shape-3 {
    position: absolute;
    top: 70%;
    left: 5%;
  }
  .features-wallpaper .features-shape-4 {
    position: absolute;
    top: 20%;
    right: 12%;
  }

  .feature-card {
    background: rgba(255, 255, 255, 0.65);
    border: 1.5px solid rgba(200, 210, 255, 0.18);
    box-shadow: 0 8px 32px 0 rgba(78, 103, 192, 0.1);
    backdrop-filter: blur(8px);
    transition: transform 0.2s, box-shadow 0.2s;
    position: relative;
    overflow: hidden;
    &:hover {
      transform: translateY(-7px) scale(1.03);
      box-shadow: 0 16px 40px 0 rgba(78, 103, 192, 0.18);
    }
    .features-card-icon {
      width: 64px;
      height: 64px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      box-shadow: 0 2px 12px 0 rgba(78, 103, 192, 0.1);
      font-size: 2rem;
      margin-bottom: 1rem;
      background: linear-gradient(
        135deg,
        rgba(29, 135, 252, 0.95) 0%,
        rgba(28, 125, 230, 0.7) 100%
      );
      transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s,
        all 0.4s, filter 0.4s;
      box-shadow: 0 2px 12px 0 rgba(78, 103, 192, 0.18);
      filter: brightness(1) saturate(1);

      .feature-card:hover & {
        transform: translateY(-5px) scale(1.13) rotate(-6deg) skew(-2deg, 1deg);
        box-shadow: 0 8px 28px 0 rgba(78, 103, 192, 0.28),
          0 0 0 6px rgba(255, 255, 255, 0.16);
        background: linear-gradient(
          120deg,
          #1D87FC 0%,
          #1878df 60%,
          #1D87FC 100%
        );
        filter: brightness(1.12) saturate(1.15)
          drop-shadow(0 3px 18px #7b9cfb88);
        border: 2px solid #fff;
        outline: 2px solid rgb(134, 193, 255);
        outline-offset: 1.5px;
        -webkit-filter: brightness(1.12) saturate(1.15)
          drop-shadow(0 3px 18px rgba(134, 193, 255,.05));
      }
    }
  }
  @media only screen and (max-width: 600px) {
    .features-header-title-logo {
      width: 130px;
    }
  }
}
/* <!-- ==================END FEATURES SECTION==================== --> */

/* <!-- ==================START DISCOVER SECTION==================== --> */
#discover {
  background: linear-gradient(135deg, #e5ebfb 0%, #f8fbff 100%);
  padding-block: 90px;
  .discover-feature {
    transition: transform 0.3s cubic-bezier(0.4, 2, 0.3, 1), box-shadow 0.3s,
      all 0.3s;
  }
  .discover-feature:hover {
    transform: translateY(-8px) scale(1.04);
    background: linear-gradient(90deg, #f5f7fa 0%, #e3ecff 100%);
    box-shadow: 0 8px 32px 0 #4e67c022;
  }
  .wrapper {
    width: 100%;
    height: 400px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }

  .inner {
    --w: 150px;
    --h: 250px;
    --translateZ: 300px;
    --rotateX: 0deg;
    --perspective: 1000px;
    position: relative;
    width: var(--w);
    height: var(--h);
    transform-style: preserve-3d;
    transform: perspective(var(--perspective));
    animation: rotating 25s linear infinite;
  }
  .card {
    position: absolute;
    border: none;
    border-radius: 12px;
    overflow: hidden;
    transform: rotateY(calc((360deg / var(--quantity)) * var(--index)))
      translateZ(var(--translateZ));
    background-color: transparent;
  }

  .img {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .img img {
    width: 90%;
    height: auto;
    object-fit: contain;
    display: block;
  }
  .discover-shape-1 {
    position: absolute;
    top: -80px;
    left: -100px;
    width: 320px;
    height: 320px;
    background: radial-gradient(circle, #4e67c022 0%, #4e67c000 100%);
    border-radius: 50%;
  }
  .discover-shape-2 {
    position: absolute;
    bottom: -60px;
    right: -80px;
    width: 200px;
    height: 200px;
    background: linear-gradient(135deg, #4e67c0 0%, #4baaff 100%);
    opacity: 0.08;
    border-radius: 50%;
  }
  @media (max-width: 991.98px) {
  #discover .wrapper {
    height: 300px;
    padding: 1rem 0;
  }

  #discover .inner {
    --w: 120px;
    --h: 200px;
    --translateZ: 180px;
    --perspective: 600px;
    animation-duration: 30s;
  }

  #discover .img img {
    width: 85%;
  }
}

@media (max-width: 575.98px) {
  #discover .wrapper {
    height: 250px;
  }

  #discover .inner {
    --w: 100px;
    --h: 160px;
    --translateZ: 120px;
    --perspective: 500px;
  }

  #discover .img img {
    width: 80%;
  }
}

}
@keyframes rotating {
  from {
    transform: perspective(var(--perspective)) rotateX(var(--rotateX))
      rotateY(0deg);
  }
  to {
    transform: perspective(var(--perspective)) rotateX(var(--rotateX))
      rotateY(360deg);
  }
}
/* ============== END DISCOVER SECTION ============== */

/* ============== START CONTACT SECTION ============== */
#contact {
  background: linear-gradient(135deg, #e5ebfb 0%, #f8fbff 100%);

  .contact-box {
    box-shadow: 0 8px 32px 0 #4e67c022;
    background: #fff;
    overflow: hidden;
  }

  .contact-main-icon {
    background: linear-gradient(135deg, #4e67c0 0%, #4baaff 100%);
    border-radius: 50%;
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    box-shadow: 0 4px 16px 0 #4e67c033;
  }

  .contact-social-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 1.2rem;
    background: #f5f7fa;
    color: #4e67c0;
    transition: all 0.2s;
    box-shadow: 0 2px 8px 0 #4e67c022;
    text-decoration: none;

    &.twitter:hover {
      background: #1da1f2;
      color: #fff;
    }

    &.linkedin:hover {
      background: #0077b5;
      color: #fff;
    }

    &.instagram:hover {
      background: #e4405f;
      color: #fff;
    }
  }

  input,input[type="email"],
  textarea {
    background: #f8fafd;
    border: 1px solid #e3ecff;
    transition: border 0.2s, box-shadow 0.2s;
    direction: rtl;
    &:focus {
      border-color: #4e67c0;
      box-shadow: 0 0 0 0.15rem #4e67c033;
    }

    &::placeholder {
      color: #b0b8d1;
    }
  }

  .btn-gradient {
    background: linear-gradient(90deg, #4e67c0 0%, #4baaff 100%);
    color: #fff;
    border: none;

    &:hover,
    &:focus {
      background: linear-gradient(90deg, #4baaff 0%, #4e67c0 100%);
    }
  }

  @media (max-width: 991.98px) {
    .contact-box {
      padding: 2rem 1.5rem;
    }

    .contact-main-icon {
      width: 56px;
      height: 56px;
      font-size: 1.25rem;
    }

    .contact-social-btn {
      width: 32px;
      height: 32px;
      font-size: 1rem;
    }

    input,
    textarea {
      font-size: 1rem;
      padding: 0.75rem;
    }

    .btn-gradient {
      width: 100%;
      padding: 0.75rem;
      font-size: 1rem;
    }

    .text-end {
      text-align: center !important;
    }
  }
}


/* ============== END CONTACT SECTION ============== */

/* ============== START FOOTER SECTION ============== */
#footer {
  background: linear-gradient(
    135deg,
    var(--primary-color),
    var(--secondary-color)
  );
  color: #e0e0e0;
}
/* ============== END FOOTER SECTION ============== */

/* ==================ahmed eltatawy 2/5/2026 ============================== */
body:is(.AE_Body) {
  padding-top: 90px;
  header{
    top: 0;
  }
  @media (max-width: 991px) {
    padding-top: 82px;
  }
}
.AE_breadcrumb{
  padding-block: 2rem;
  background-color: var(--primary-color);
  h2{
    font-size: clamp(1.5rem, 2vw + 1rem, 2.3rem);
    color: var(--white-color);
    font-weight: 700;
  }
  ul{
    
    li:is(.breadcrumb-item) , li:has(a){
      font-size: clamp(.8rem, 2vw + .8rem, 1.1rem);
      
      &.active{
        color: var(--white-color);
      }
      a{
        color: #dddddd;
        transition: .3s ease-in-out;
        &:hover{
          color: #005888;
        }
      }
    }
    
    
  }
}

.privacy{
  padding-block: 70px;
  p{
      color: rgba(0, 0, 0, 70%);
      font-size: clamp(.8rem, 1vw + 0.8rem, 1.2rem);
      
    }
}