/* ========== BASE ========== */
body,
html {
  color: #1a1a1a;
  background: #ffffff;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  font-family: Switzer;
  font-style: normal;
}

/* section:not(#home),
section * {
  scroll-margin-top: 50px;
} */

a {
  color: inherit;
  transition: 0.3s ease-in-out;
}
a:hover {
  opacity: 0.8;
}

/* ========== CONTAINER ========== */
.container {
  width: 100%;
  max-width: 1452px;
  padding: 0 14px;
  margin: 0 auto;
}

/* custom code starts here header and banner section */
header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 100;

  display: flex;
  align-self: center;
  justify-content: center;
  padding: clamp(0.625rem, 0.3216rem + 1.2945vw, 1.875rem) 15px;

  .header-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(1.875rem, 1.5716rem + 1.2945vw, 3.125rem);
    background: #fff;
    padding: clamp(0.3125rem, 0.2367rem + 0.3236vw, 0.625rem);
    border-radius: clamp(0.5rem, 0.4697rem + 0.1294vw, 0.625rem);

    .logo {
      svg {
        width: clamp(3rem, 2.7421rem + 1.1003vw, 4.0625rem);
      }
    }

    nav {
      ul {
        display: flex;
        align-items: center;
        gap: clamp(0.625rem, 0.4733rem + 0.6472vw, 1.25rem);

        li {
          a {
            font-size: clamp(0.875rem, 0.8447rem + 0.1294vw, 1rem);
            font-weight: 500;
            line-height: 113.282%; /* 16.992px */
            letter-spacing: -0.45px;
          }
        }
      }
    }

    .header-cta {
      border-radius: clamp(0.1875rem, 0.1572rem + 0.1294vw, 0.3125rem);
      background: #1a1a1a;
      padding: clamp(0.75rem, 0.7045rem + 0.1942vw, 0.9375rem);

      color: #fff;
      font-family: Switzer;
      font-size: clamp(0.875rem, 0.8447rem + 0.1294vw, 1rem);
      font-weight: 600;
      line-height: 113.282%; /* 16.992px */
      letter-spacing: -0.15px;
    }
  }
}
.hero-bg {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;

  img {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    min-height: 100%;
    min-width: 100%;
    transform: translate(-50%, -50%);
    object-fit: cover;
  }
}
main {
  .section-hero {
    position: relative;
    background: linear-gradient(90deg, #fff 0%, #fff6de 100%);
    padding-top: clamp(4.375rem, 3.389rem + 4.2071vw, 8.4375rem);

    position: sticky;
    top: clamp(-14.375rem, 0.7706rem + -12.6214vw, -2.1875rem);
    z-index: 1;

    .hero-content {
      position: relative;
      z-index: 1;

      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      padding-inline: 14px;

      padding-top: clamp(1.875rem, 1.4199rem + 1.9417vw, 3.75rem);

      .heading {
        max-width: 1049px;
        width: 100%;
        text-align: center;

        h1 {
          font-size: clamp(2.8125rem, 2.3574rem + 1.9417vw, 4.6875rem);
          font-weight: 700;
          line-height: 112%; /* 84px */
          letter-spacing: -3.75px;
        }
        h2 {
          font-family: Switzer;
          font-size: clamp(1rem, 0.8635rem + 0.5825vw, 1.5625rem);
          font-weight: 400;
          line-height: 113.282%; /* 28.321px */
          letter-spacing: -0.25px;
          margin-top: clamp(0.625rem, 0.4733rem + 0.6472vw, 1.25rem);
          max-width: 773px;
          width: 100%;
          margin-inline: auto;
        }

        .btn-hero {
          margin-top: clamp(1.25rem, 1.0983rem + 0.6472vw, 1.875rem);
          display: flex;
          align-items: center;
          justify-content: center;
          position: relative;
          overflow: hidden;
          max-width: max-content;
          margin-inline: auto;
          border-radius: 8px;
          position: relative;

          &::before {
            content: "";
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 98%;
            height: 90%;
            z-index: 0;
            border-radius: 3px;
          }

          .btn-bg {
            position: absolute;
            z-index: -1;
            background-color: #ffffff;
            width: clamp(26.875rem, 24.0989rem + 11.8447vw, 38.3125rem);
            filter: blur(45px);
            animation: rotate360 10s linear infinite;

            display: flex;
            align-items: center;
            justify-content: center;

            img {
              width: 100%;
            }
          }
          a {
            display: inline-flex;
            color: #fff;
            font-size: clamp(1.375rem, 1.2536rem + 0.5178vw, 1.875rem);
            font-weight: 600;
            line-height: 113.282%; /* 33.985px */
            letter-spacing: -0.3px;
            padding: clamp(1.125rem, 1.0188rem + 0.4531vw, 1.5625rem);
            border-radius: 8.404px;
            position: relative;
            z-index: 2;
          }

          &:hover {
            &::before {
              background: #fff;
            }
            a {
              background: linear-gradient(90deg, #0052e0 0%, #d427c6 100%);
              background-clip: text;
              -webkit-background-clip: text;
              -webkit-text-fill-color: transparent;

              position: relative;
            }
          }
        }

        p.valued-at {
          margin-top: 10px;
          color: #1a1a1a;
          font-size: clamp(0.875rem, 0.784rem + 0.3883vw, 1.25rem);
          font-style: italic;
          font-weight: 400;
          line-height: 113.282%; /* 22.656px */
          letter-spacing: -0.2px;

          span {
            color: #0052e0;
            font-weight: 800;
            line-height: 113.282%;
            letter-spacing: -0.2px;
            font-style: normal;
          }
        }
      }
    }

    .hero-aldeeb {
      // min-height: clamp(17.9375rem, 13.7354rem + 17.9288vw, 35.25rem);
      margin-top: 20px;

      display: flex;
      align-items: flex-end;
      justify-content: center;

      .gif-wrapper {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;

        img {
          max-width: 1920px;
          width: 100%;
          margin-inline: auto;
        }
      }
      .pessant-aldeeb-wrapper {
        position: relative;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;

        .box-1 {
          border-radius: 12px;
          border: 4px solid #dbdbdb;
          background: #fff6de;
          padding: clamp(0.5rem, 0.318rem + 0.7767vw, 1.25rem)
            clamp(0.4375rem, 0.301rem + 0.5825vw, 1rem);
          position: absolute;
          left: clamp(-10rem, 3.2039rem + -11.0032vw, 0.625rem);

          .number {
            color: #0052e0;
            font-size: clamp(3.5rem, 2.4078rem + 4.6602vw, 8rem);
            font-weight: 700;
            line-height: 100%;
            opacity: 0;
            transition: opacity 0.5s ease-in-out;

            display: flex;
            align-items: flex-start;
            justify-content: center;

            svg {
              width: clamp(0.875rem, 0.5716rem + 1.2945vw, 2.125rem);
            }
          }
          .text {
            color: #1a1a1a;
            text-align: center;
            font-size: clamp(0.3125rem, 0.2063rem + 0.4531vw, 0.75rem);
            font-weight: 500;
            line-height: 110%; /* 13.018px */
            letter-spacing: -0.355px;
          }
        }

        .pessant-aldeeb-img {
          width: clamp(25.875rem, 18.199rem + 32.7508vw, 57.5rem);
        }

        .box-2 {
          position: absolute;
          top: clamp(3.125rem, 0.625rem + 5.2083vw, 6.875rem);
          right: clamp(1.25rem, -0.4167rem + 3.4722vw, 3.75rem);
          border-radius: 7.624px;
          background: #d6f42f;

          display: flex;
          align-items: center;
          justify-content: center;

          gap: 4px;
          padding: clamp(0.25rem, 0.2045rem + 0.1942vw, 0.4375rem)
            clamp(0.25rem, 0.2197rem + 0.1294vw, 0.375rem);

          z-index: -1;

          img {
            width: clamp(2.8125rem, 2.2816rem + 2.2654vw, 5rem);
            height: clamp(2.8125rem, 2.2816rem + 2.2654vw, 5rem);
            object-fit: contain;
          }

          .text {
            color: #1a1a1a;
            font-size: clamp(0.75rem, 0.6286rem + 0.5178vw, 1.25rem);
            font-weight: 500;
            line-height: 100%; /* 20.454px */
            letter-spacing: -0.614px;
          }
        }
      }
    }
  }
  .section-strategy {
    padding: clamp(3.125rem, 2.3665rem + 3.2362vw, 6.25rem) 14px;
    background: #0052e0;
    position: relative;
    z-index: 1;

    display: flex;
    align-items: center;
    justify-content: center;

    .strategy-content {
      max-width: 904px;
      width: 100%;

      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;

      gap: clamp(1.25rem, 0.7949rem + 1.9417vw, 3.125rem);

      .heading {
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        flex-direction: column;
        gap: 10px;

        span {
          background: #d1f400;
          display: inline-block;
          padding: 5px;

          color: #0052e0;
          font-size: clamp(0.75rem, 0.7197rem + 0.1294vw, 0.875rem);
          font-weight: 500;
          line-height: 113.282%; /* 15.86px */
          letter-spacing: -0.14px;
        }

        h2 {
          color: #fff;
          font-size: clamp(1.875rem, 1.5716rem + 1.2945vw, 3.125rem);
          font-weight: 700;
          line-height: 112%; /* 56px */
          letter-spacing: -2.5px;
        }
      }

      .strategy-list {
        max-width: clamp(19.6875rem, 14.7421rem + 21.1003vw, 40.0625rem);
        width: 100%;
        min-height: clamp(15.75rem, 13.3228rem + 10.356vw, 25.75rem);

        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        position: relative;

        .strategy-list-item {
          border-radius: clamp(12.9375rem, 10.2828rem + 11.3269vw, 23.875rem);
          padding: clamp(1.125rem, 0.8975rem + 0.9709vw, 2.0625rem);
          display: inline-flex;
          justify-content: center;
          align-items: center;
          text-align: center;
          font-size: clamp(1.5rem, 1.1814rem + 1.3592vw, 2.8125rem);
          line-height: 88.275%; /* 39.724px */
          letter-spacing: clamp(
            -0.084375rem,
            -0.0364rem + -0.04vw,
            -0.04575rem
          );
          font-weight: 700;
          position: absolute;

          // Custom drop animation with bounce
          opacity: 0;
          transition: opacity 0.35s ease,
            transform 0.65s cubic-bezier(0.68, -0.75, 0.265, 1.75);

          // Override default transforms for animation
          &:not(.drop-animate) {
            &.sti-1 {
              transform: rotate(4.514deg) translate3d(0, -200px, 0) !important;
            }
            &.sti-2 {
              transform: rotate(-5.384deg) translate3d(0, -200px, 0) !important;
            }
            &.sti-3 {
              transform: rotate(-8.251deg) translate3d(0, -200px, 0) !important;
            }
            &.sti-4 {
              transform: rotate(-5.904deg) translate3d(0, -200px, 0) !important;
            }
            &.sti-5 {
              transform: rotate(11.776deg) translate3d(0, -200px, 0) !important;
            }
          }

          // Animated state - items drop to their final position
          &.drop-animate {
            opacity: 1;
            transition: opacity 0.35s ease,
              transform 0.5s cubic-bezier(0.68, -0.75, 0.265, 1.75);
          }

          // Mobile adjustments - shorter falldown height and faster speed
          @media (max-width: 768px) {
            transition: opacity 0.25s ease,
              transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.35);

            &:not(.drop-animate) {
              &.sti-1 {
                transform: rotate(4.514deg) translate3d(0, -120px, 0) !important;
              }
              &.sti-2 {
                transform: rotate(-5.384deg) translate3d(0, -120px, 0) !important;
              }
              &.sti-3 {
                transform: rotate(-8.251deg) translate3d(0, -120px, 0) !important;
              }
              &.sti-4 {
                transform: rotate(-5.904deg) translate3d(0, -120px, 0) !important;
              }
              &.sti-5 {
                transform: rotate(11.776deg) translate3d(0, -120px, 0) !important;
              }
            }

            &.drop-animate {
              transition: opacity 0.25s ease,
                transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.35);
            }
          }

          &.sti-1 {
            background: #fff;
            transform: rotate(4.514deg);
            color: #0052e0;
            z-index: 0;
            top: clamp(0.4375rem, 0.3465rem + 0.3883vw, 0.8125rem);
            min-width: clamp(9.25rem, 6.3374rem + 12.4272vw, 21.25rem);
          }
          &.sti-2 {
            background: #d427c6;
            transform: rotate(-5.384deg);
            color: #fafafa;
            z-index: 3;
            top: clamp(4.4375rem, 3.7093rem + 3.1068vw, 7.4375rem);
            left: clamp(0.8125rem, 0.7973rem + 0.0647vw, 0.875rem);
            min-width: clamp(7.3125rem, 4.8095rem + 10.6796vw, 17.625rem);
          }
          &.sti-3 {
            background: #c5bcb0;
            transform: rotate(-8.251deg);
            color: #fff6de;
            z-index: 2;
            min-width: clamp(10.5625rem, 7.3768rem + 13.5922vw, 23.6875rem);
            top: clamp(4.9375rem, 4.1335rem + 3.4304vw, 8.25rem);
            right: clamp(0.9375rem, 0.8465rem + 0.3883vw, 1.3125rem);
          }
          &.sti-4 {
            background: #d1f400;
            transform: rotate(-5.904deg);
            color: #0052e0;
            z-index: 5;
            min-width: clamp(7.3125rem, 4.8095rem + 10.6796vw, 17.625rem);
            right: clamp(0rem, 0.3107rem + -0.2589vw, 0.25rem);
            top: clamp(9.0625rem, 7.409rem + 7.055vw, 15.875rem);
          }
          &.sti-5 {
            background: #da3802;
            transform: rotate(11.776deg);
            color: #fafafa;
            z-index: 3;
            min-width: clamp(11.3125rem, 7.9751rem + 14.2395vw, 25.0625rem);
            top: clamp(9.375rem, 7.6456rem + 7.3786vw, 16.5rem);
            left: 0;
          }
        }
      }

      .strategy-desc {
        color: #fff;
        text-align: center;
        font-size: clamp(1.25rem, 1.1742rem + 0.3236vw, 1.5625rem);
        font-weight: 400;
        line-height: 130%; /* 32.5px */
        letter-spacing: -0.25px;
        max-width: 770px;
        width: 100%;

        strong {
          font-weight: 600;
        }
      }

      .strategy-link {
        color: #fff;
        font-size: clamp(1rem, 0.9393rem + 0.2589vw, 1.25rem);
        font-weight: 600;
        line-height: 113.282%; /* 22.656px */
        letter-spacing: -0.2px;

        border-radius: 5px;
        background: #1a1a1a;
        padding: clamp(0.9375rem, 0.8617rem + 0.3236vw, 1.25rem);
        transition: transform 0.3s ease;

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

      // Fade-up animations for heading only
      .heading-span,
      .heading-title {
        opacity: 0;
        transform: translate3d(0, 30px, 0);
        transition: opacity 0.6s ease, transform 0.6s ease;

        &.fade-up-animate {
          opacity: 1;
          transform: translate3d(0, 0, 0);
        }
      }
    }
  }
}

@media (min-height: 1080px) {
  main {
    .section-hero {
      top: 0;
    }
  }
}
@media (max-width: 1023.98px) {
  main {
    .section-hero {
      top: 0;
    }
  }
}
@media (max-width: 991.98px) {
  main {
    .section-hero {
      .hero-content {
        .heading {
          h1 {
            letter-spacing: -2.25px;
          }
        }
      }
    }
  }
}

@media (max-width: 767.98px) {
  main {
    .section-hero {
      .hero-aldeeb {
        .pessant-aldeeb-wrapper {
          .box-2 {
            top: unset;
            bottom: clamp(0.9375rem, -0.5535rem + 6.3616vw, 2.5rem);
            z-index: 1;
          }
        }
      }
    }
  }
}

@media (max-width: 575.98px) {
  header {
    .header-nav {
      width: 100%;
      nav {
        display: none;
      }
    }
  }
}

/* Keyframes for 360 degree rotation animation */
@keyframes rotate360 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* custom code ends here header and banner section */