/* =========================
   PREORDER SECTION
========================= */

.preorder-section{

  padding:110px 7%;

  background:#0b0b0b;

}

/* =========================
   BOX
========================= */

.preorder-box{

  position:relative;

  max-width:1050px;

  margin:auto;

  padding:70px 60px;

  border-radius:38px;

  overflow:hidden;

  background:
  linear-gradient(
    180deg,
    rgba(255,255,255,.05),
    rgba(255,255,255,.02)
  );

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

  backdrop-filter:
  blur(24px);

  box-shadow:

  0 25px 70px rgba(0,0,0,.35),

  inset 0 1px 1px rgba(255,255,255,.05);

  text-align:center;

}

/* glow */

.preorder-box::before{

  content:"";

  position:absolute;

  width:420px;
  height:420px;

  background:
  radial-gradient(
    circle,
    rgba(37,211,102,.14),
    transparent 70%
  );

  top:-180px;
  right:-120px;

  pointer-events:none;

}

/* =========================
   ICON
========================= */

.preorder-icon{

  width:92px;
  height:92px;

  margin:auto auto 28px;

  border-radius:50%;

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

  background:
  linear-gradient(
    135deg,
    #25d366,
    #1ebe5d
  );

  box-shadow:

  0 12px 40px rgba(37,211,102,.35),

  inset 0 1px 1px rgba(255,255,255,.2);

}

/* icon */

.preorder-icon i{

  color:#fff;

  font-size:2.5rem;

}

/* =========================
   LABEL
========================= */

.preorder-label{

  font-size:.8rem;

  letter-spacing:6px;

  color:
  rgba(255,255,255,.58);

  margin-bottom:18px;

}

/* =========================
   TITLE
========================= */

.preorder-title{

  font-size:
  clamp(2.2rem,4vw,4rem);

  line-height:1;

  font-weight:300;

  color:#fff;

  margin-bottom:22px;

}

/* =========================
   TEXT
========================= */

.preorder-text{

  font-size:
  clamp(1rem,1.5vw,1.12rem);

  color:
  rgba(255,255,255,.72);

  line-height:1.8;

  max-width:650px;

  margin:auto auto 38px;

}

/* =========================
   BUTTON
========================= */

.preorder-btn{

  position:relative;

  overflow:hidden;

  display:inline-flex;

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

  min-width:260px;

  height:68px;

  padding:0 34px;

  border-radius:999px;

  text-decoration:none;

  color:#fff;

  font-size:1rem;
  font-weight:500;

  background:
  linear-gradient(
    135deg,
    #25d366,
    #1ebe5d
  );

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

  box-shadow:

  0 14px 40px rgba(37,211,102,.28),

  inset 0 1px 1px rgba(255,255,255,.18);

  transition:.4s ease;

}

/* shine */

.preorder-btn::before{

  content:"";

  position:absolute;

  top:0;
  left:-120%;

  width:60%;
  height:100%;

  background:
  linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.28),
    transparent
  );

  transform:
  skewX(-25deg);

  transition:1s ease;

}

/* hover */

.preorder-btn:hover{

  transform:
  translateY(-3px)
  scale(1.02);

  box-shadow:

  0 18px 55px rgba(37,211,102,.4),

  inset 0 1px 1px rgba(255,255,255,.18);

}

.preorder-btn:hover::before{

  left:140%;

}

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

@media(max-width:768px){

  .preorder-section{

    padding:85px 20px;

  }

  .preorder-box{

    padding:50px 28px;

    border-radius:30px;

  }

  .preorder-title{

    font-size:2.3rem;

  }

  .preorder-text{

    font-size:1rem;

    line-height:1.7;

  }

  .preorder-btn{

    width:100%;

    min-width:unset;

  }

}