/* ======================================
   CONTACT
====================================== */

.contact-section{

  padding:
  120px 7%;

  background:#050505;

  position:relative;

}

/* wrapper */

.contact-wrapper{

  max-width:1400px;

  margin:auto;

  display:grid;

  grid-template-columns:
  520px 1fr;

  gap:40px;

  align-items:stretch;

}

/* ======================================
   LEFT
====================================== */

.contact-left{

  padding:
  55px 48px;

  border-radius:34px;

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

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

  backdrop-filter:
  blur(18px);

}

/* subtitle */

.contact-subtitle{

  display:inline-block;

  margin-bottom:20px;

  font-size:0.8rem;

  letter-spacing:6px;

  color:#ff934d;

}

/* title */

.contact-title{

  font-size:
  clamp(3rem,5vw,5rem);

  line-height:0.95;

  font-weight:300;

  color:#fff;

  margin-bottom:28px;

}

/* text */

.contact-description{

  font-size:1.02rem;

  line-height:1.9;

  color:
  rgba(255,255,255,0.68);

  margin-bottom:42px;

}

/* ======================================
   CONTACT ITEMS
====================================== */

.contact-list{

  display:flex;

  flex-direction:column;

  gap:16px;

  margin-bottom:34px;

}

.contact-item{

  display:flex;

  align-items:center;

  gap:18px;

  padding:
  18px 22px;

  border-radius:20px;

  text-decoration:none;

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

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

  transition:
  .3s ease;

}

.contact-item:hover{

  transform:
  translateY(-3px);

  border:
  1px solid rgba(255,120,40,0.22);

}

/* icon */

.contact-item-icon{

  width:52px;
  height:52px;

  border-radius:16px;

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

  background:
  linear-gradient(
  135deg,
  #ff7a1a,
  #ff5a00
  );

  color:#fff;

  font-size:1rem;

  flex-shrink:0;

}

/* text */

.contact-item span{

  display:block;

  margin-bottom:4px;

  font-size:0.76rem;

  letter-spacing:3px;

  text-transform:uppercase;

  color:
  rgba(255,255,255,0.4);

}

.contact-item p{

  color:#fff;

  font-size:1rem;

  line-height:1.5;

}

/* ======================================
   SOCIALS
====================================== */

.social-row{

  display:flex;

  gap:14px;

}

.social-link{

  width:54px;
  height:54px;

  border-radius:16px;

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

  text-decoration:none;

  color:#fff;

  font-size:1.15rem;

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

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

  transition:
  .3s ease;

}

.social-link:hover{

  transform:
  translateY(-4px);

  background:
  linear-gradient(
  135deg,
  #ff7a1a,
  #ff5a00
  );

  box-shadow:
  0 12px 30px rgba(255,100,0,0.28);

}

/* ======================================
   MAP
====================================== */

.contact-map{

  border-radius:34px;

  overflow:hidden;

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

  min-height:100%;

  position:relative;

}

.contact-map iframe{

  width:100%;
  height:100%;

  min-height:720px;

  border:none;

  filter:
  grayscale(1)
  contrast(1.1)
  brightness(.82);

}

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

@media(max-width:980px){

  .contact-wrapper{

    grid-template-columns:1fr;

  }

  .contact-map iframe{

    min-height:420px;

  }

}

@media(max-width:768px){

  .contact-section{

    padding:
    90px 5%;

  }

  .contact-left{

    padding:
    36px 26px;

  }

  .contact-title{

    font-size:3.1rem;

  }

}

/* =========================
   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;

  }

}