/*==============================================================================
    HERO SECTION
==============================================================================*/

.fe-hero {
  position: relative;
  overflow: hidden;
  padding: 110px 0 90px;
  background:
    radial-gradient(
      circle at top left,
      rgba(37, 99, 235, 0.08),
      transparent 40%
    ),
    radial-gradient(
      circle at bottom right,
      rgba(249, 115, 22, 0.08),
      transparent 35%
    ),
    linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.fe-hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.fe-hero-grid {
  position: absolute;
  inset: 0;
  opacity: 0.04;
  background-image:
    linear-gradient(#2563eb 1px, transparent 1px),
    linear-gradient(90deg, #2563eb 1px, transparent 1px);
  background-size: 40px 40px;
}

.fe-hero-shape {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
}

.shape-1 {
  width: 340px;
  height: 340px;
  background: #2563eb;
  opacity: 0.1;
  top: -120px;
  left: -120px;
}

.shape-2 {
  width: 280px;
  height: 280px;
  background: #f97316;
  opacity: 0.1;
  right: -80px;
  bottom: -80px;
}

.fe-hero-wrapper {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 70px;
  align-items: center;
}
/*==============================================================================
    BUTTONS
==============================================================================*/

.fe-hero-buttons {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 36px;
}

.fe-btn {
  transition: 0.35s;
}

.fe-btn-primary {
  box-shadow: 0 18px 35px rgba(37, 99, 235, 0.22);
}

.fe-btn-primary:hover {
  transform: translateY(-3px);
}

.fe-btn-outline:hover {
  transform: translateY(-3px);
}

/*==============================================================================
    BUTTONS
==============================================================================*/

.fe-hero-buttons {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 36px;
}

.fe-btn {
  transition: 0.35s;
}

.fe-btn-primary {
  box-shadow: 0 18px 35px rgba(37, 99, 235, 0.22);
}

.fe-btn-primary:hover {
  transform: translateY(-3px);
}

.fe-btn-outline:hover {
  transform: translateY(-3px);
}
/*==============================================================================
    TRUST
==============================================================================*/

.fe-hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.fe-trust-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #e2e8f0;
  font-weight: 600;
  color: #475569;
}

.fe-trust-item i {
  color: #22c55e;
}
/*==============================================================================
    HERO CARD
==============================================================================*/

.fe-hero-visual {
  position: relative;
}

.fe-hero-card {
  position: relative;

  z-index: 5;

  background: rgba(255, 255, 255, 0.82);

  backdrop-filter: blur(18px);

  border: 1px solid rgba(255, 255, 255, 0.6);

  border-radius: 32px;

  padding: 38px;

  box-shadow: 0 30px 80px rgba(15, 23, 42, 0.1);
}

.fe-card-tag {
  display: inline-flex;

  align-items: center;

  gap: 10px;

  padding: 10px 16px;

  border-radius: 999px;

  background: #eff6ff;

  color: #2563eb;

  font-weight: 600;

  margin-bottom: 22px;
}

.fe-card-top h2 {
  font-size: 2rem;

  line-height: 1.3;

  color: #0f172a;

  margin-bottom: 16px;
}

.fe-card-top p {
  color: #64748b;

  line-height: 1.8;

  margin-bottom: 32px;
}
.fe-hero-image {
  text-align: center;

  margin-bottom: 35px;
}

.fe-hero-image img {
  width: 100%;

  max-width: 340px;

  transition: 0.5s;
}

.fe-hero-card:hover img {
  transform: translateY(-8px);
}
.fe-card-features {
  display: grid;

  gap: 18px;

  margin-bottom: 34px;
}

.fe-feature-item {
  display: flex;

  align-items: center;

  gap: 16px;
}

.fe-feature-item i {
  width: 56px;

  height: 56px;

  border-radius: 18px;

  display: grid;

  place-items: center;

  background: #eff6ff;

  color: #2563eb;

  font-size: 20px;
}

.fe-feature-item h4 {
  margin-bottom: 4px;

  color: #0f172a;

  font-size: 1rem;
}

.fe-feature-item span {
  color: #64748b;

  font-size: 0.9rem;
}
.fe-card-stats {
  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 18px;

  margin: 34px 0;
}

.fe-stat {
  text-align: center;

  background: #f8fafc;

  padding: 18px;

  border-radius: 18px;
}

.fe-stat h3 {
  color: #2563eb;

  font-size: 1.7rem;

  margin-bottom: 6px;
}

.fe-stat span {
  color: #64748b;

  font-size: 0.9rem;
}
/*==============================================================================
    HERO CTA
==============================================================================*/

.fe-card-action{
    margin-top:32px;
}

.fe-btn-block{
    width:100%;
    justify-content:center;
}
/*==============================================================================
    FLOATING CARDS
==============================================================================*/

.fe-floating-card{

    position:absolute;

    display:flex;

    align-items:center;

    gap:16px;

    min-width:220px;

    padding:18px 22px;

    border-radius:22px;

    background:rgba(255,255,255,.88);

    backdrop-filter:blur(20px);

    border:1px solid rgba(255,255,255,.6);

    box-shadow:
        0 25px 45px rgba(15,23,42,.08);

    animation:feFloat 6s ease-in-out infinite;

    z-index:10;
}

.fe-floating-icon{

    width:52px;

    height:52px;

    display:grid;

    place-items:center;

    border-radius:16px;

    background:linear-gradient(135deg,#2563eb,#3b82f6);

    color:#fff;

    font-size:20px;

    flex-shrink:0;
}

.fe-floating-card strong{

    display:block;

    font-size:16px;

    color:#0f172a;

    margin-bottom:4px;
}

.fe-floating-card span{

    font-size:14px;

    color:#64748b;
}
/*==============================================================================
    FLOATING POSITIONS
==============================================================================*/

.fe-floating-card-one{

    top:60px;

    left:-70px;
}

.fe-floating-card-two{

    bottom:130px;

    right:-60px;

    animation-delay:1.5s;
}

.fe-floating-card-three{

    bottom:-40px;

    left:40px;

    animation-delay:3s;
}

/*==============================================================================
    HOVER EFFECTS
==============================================================================*/

.fe-hero-card{

    transition:
        transform .45s ease,
        box-shadow .45s ease;
}

.fe-hero-card:hover{

    transform:translateY(-8px);

    box-shadow:
        0 40px 90px rgba(37,99,235,.15);
}

.fe-feature-item{

    transition:.35s;
}

.fe-feature-item:hover{

    transform:translateX(8px);
}

.fe-stat{

    transition:.35s;
}

.fe-stat:hover{

    transform:translateY(-6px);

    background:#eff6ff;
}

.fe-trust-item{

    transition:.35s;
}

.fe-trust-item:hover{

    background:#2563eb;

    color:#fff;
}

.fe-trust-item:hover i{

    color:#fff;
}
/*==============================================================================
    ANIMATION
==============================================================================*/

@keyframes feFloat{

    0%{
        transform:translateY(0);
    }

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

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


/*==============================================================================
    LARGE DESKTOP
==============================================================================*/

@media (max-width:1300px){

    .fe-hero-wrapper{

        gap:50px;
    }

    .fe-floating-card{

        transform:scale(.9);
    }

}

/*==============================================================================
    TABLET
==============================================================================*/

@media (max-width:992px){

    .fe-hero{

        padding:90px 0 70px;
    }

    .fe-hero-wrapper{

        grid-template-columns:1fr;

        gap:60px;
    }

    .fe-hero-content{

        text-align:center;
    }

    .fe-hero-description{

        margin-inline:auto;
    }

    .fe-hero-buttons{

        justify-content:center;
    }

    .fe-hero-trust{

        justify-content:center;
    }

    .fe-floating-card{

        display:none;
    }

    .fe-card-stats{

        grid-template-columns:repeat(3,1fr);
    }

}

/*==============================================================================
    MOBILE
==============================================================================*/

@media (max-width:768px){

    .fe-hero{

        padding:70px 0 50px;
    }

    .fe-hero-title{

        font-size:2.3rem;
    }

    .fe-hero-description{

        font-size:1rem;
    }

    .fe-hero-buttons{

        flex-direction:column;
    }

    .fe-hero-buttons .fe-btn{

        width:100%;
    }

    .fe-card-stats{

        grid-template-columns:1fr;

        gap:14px;
    }

    .fe-feature-item{

        align-items:flex-start;
    }

    .fe-feature-item i{

        width:48px;

        height:48px;
    }

    .fe-hero-card{

        padding:28px;
    }

}

/*==============================================================================
    SMALL MOBILE
==============================================================================*/

@media (max-width:480px){

    .fe-hero{

        padding:60px 0 40px;
    }

    .fe-hero-title{

        font-size:2rem;
    }

    .fe-card-top h2{

        font-size:1.6rem;
    }

    .fe-card-tag{

        font-size:.82rem;
    }

    .fe-trust-item{

        width:100%;

        justify-content:center;
    }

    .fe-feature-item{

        gap:12px;
    }

}

/*==============================================================================
    REDUCED MOTION
==============================================================================*/

@media (prefers-reduced-motion: reduce){

    *,
    *::before,
    *::after{

        animation:none !important;

        transition:none !important;

        scroll-behavior:auto !important;
    }

}