@media(max-width:900px){

  .hero-nav{
    display:flex;
  }

}

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

.hero{

  position:relative;

  min-height:100vh;

  overflow:hidden;

  background:
  url("../img/hero.jpg")
  center/cover no-repeat;

}

/* =========================
   OVERLAY
========================= */

.hero-overlay{

  position:absolute;
  inset:0;

  background:
  linear-gradient(
  180deg,
  rgba(0,0,0,0.45),
  rgba(0,0,0,0.72)
  );

}

/* =========================
   HEADER
========================= */

.hero-header{

  position:fixed;

  top:20px;
  left:50%;

  transform:translateX(-50%);

  width:calc(100% - 40px);

  max-width:1320px;

  z-index:1000;

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

  padding:14px 18px;

  border-radius:26px;

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

  backdrop-filter:blur(18px);

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

}

/* =========================
   LOGO
========================= */

.hero-logo{

  width:72px;

}

.hero-logo img{

  width:100%;

  border-radius:50%;

  display:block;

}

/* =========================
   NAVIGATION
========================= */

.hero-nav{

  display:flex;

  gap:34px;

  align-items:center;

}

.hero-nav a{

  text-decoration:none;

  color:#fff;

  font-size:0.95rem;

  opacity:.82;

  transition:.3s ease;

  white-space:nowrap;

}

.hero-nav a:hover{

  opacity:1;

}

/* =========================
   BURGER
========================= */

.burger-btn{

  display:none !important;

  width:52px;
  height:52px;

  border-radius:16px;

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

  backdrop-filter:
  blur(12px);

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

  gap:6px;

}

.burger-btn span{

  width:22px;
  height:2px;

  background:#fff;

  border-radius:20px;

}

/* =========================
   HERO CONTENT
========================= */

.hero-content{

  position:relative;

  z-index:5;

  min-height:100vh;

  display:flex;
  flex-direction:column;

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

  text-align:center;

  padding:
  160px 20px 80px;

}

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

.hero-label{

  font-size:0.82rem;

  letter-spacing:6px;

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

  margin-bottom:22px;

}

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

.hero-title{

  font-size:
  clamp(3.2rem, 6vw, 5.8rem);

  line-height:0.95;

  font-weight:300;

  color:#fff;

  max-width:900px;

  margin-bottom:22px;

}

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

.hero-text{

  font-size:
  clamp(1rem, 2vw, 1.35rem);

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

  margin-bottom:42px;

}

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

.hero-buttons{

  display:flex;

  gap:18px;

  flex-wrap:wrap;

  justify-content:center;

}

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

.hero-btn{

  position:relative;

  overflow:hidden;

  min-width:240px;

  height:68px;

  padding:0 34px;

  border-radius:999px;

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

  text-decoration:none;

  font-size:1rem;

  transition:.35s ease;

}

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

.hero-btn.primary{

  background:
  linear-gradient(
  135deg,
  #ff6b1a,
  #ff8533
  );

  color:#fff;

  font-weight:500;

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

  box-shadow:

  0 12px 40px rgba(255,107,26,0.32),

  inset 0 1px 1px rgba(255,255,255,0.24),

  inset 0 -10px 22px rgba(0,0,0,0.22);

}

/* SHINE */

.hero-btn.primary::before{

  content:"";

  position:absolute;

  top:0;
  left:-130%;

  width:60%;
  height:100%;

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

  transform:
  skewX(-25deg);

  transition:
  1s ease;

}

.hero-btn.primary:hover::before{

  left:140%;

}

/* HOVER */

.hero-btn.primary:hover{

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

  box-shadow:

  0 18px 55px rgba(255,107,26,0.4),

  inset 0 1px 1px rgba(255,255,255,0.24),

  inset 0 -10px 24px rgba(0,0,0,0.22);

}

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

.hero-btn.secondary{

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

  backdrop-filter:
  blur(18px);

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

  color:#fff;

  box-shadow:

  0 10px 30px rgba(0,0,0,0.16),

  inset 0 1px 1px rgba(255,255,255,0.08);

}

/* SHINE */

.hero-btn.secondary::before{

  content:"";

  position:absolute;

  top:0;
  left:-20%;

  width:55%;
  height:100%;

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

  transform:
  skewX(-25deg);

  opacity:.9;

}

/* HOVER */

.hero-btn.secondary:hover{

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

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

  box-shadow:

  0 16px 40px rgba(0,0,0,0.22),

  inset 0 1px 1px rgba(255,255,255,0.12);

}

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

@media(max-width:768px){

  .hero-header{

    padding:12px 16px;

    border-radius:22px;

  }

  .hero-logo{

    width:58px;

  }

  .hero-nav{

    display:flex;

    gap:18px;

  }

  .hero-nav a{

    font-size:.82rem;

  }

  .burger-btn{

    display:none !important;

  }

  /* CONTENT */

  .hero-content{

    padding:
    120px 22px 60px;

  }

  /* TITLE */

  .hero-title{

    font-size:2.7rem;

    line-height:0.95;

    margin-bottom:16px;

  }

  /* TEXT */

  .hero-text{

    font-size:1rem;

    margin-bottom:28px;

  }

  /* BUTTONS */

  .hero-buttons{

    width:100%;

    display:flex;

    flex-direction:column;

    gap:14px;

  }

  /* BUTTON */

  .hero-btn{

    width:100%;

    min-width:unset;

    height:64px;

    font-size:1rem;

    border-radius:999px;

  }

}

/* ======================================
   PREMIUM BURGER BUTTON
====================================== */

.burger-btn{

  display:none !important;

  width:58px;
  height:58px;

  border:none;

  border-radius:20px;

  position:relative;

  cursor:pointer;

  overflow:hidden;

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

  backdrop-filter:
  blur(18px);

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

  box-shadow:

  0 12px 35px rgba(0,0,0,0.22),

  inset 0 1px 1px rgba(255,255,255,0.08);

  transition:
  .45s ease;

  z-index:9999999;

}

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

@media(max-width:900px){

  .burger-btn{

    display:none !important;

  }

  .hero-nav{

    display:flex;

  }

}

/* =========================
   MOBILE MENU OVERLAY
========================= */

.mobile-menu-overlay{

  display:none !important;

}

/* =========================
   REMOVE BURGER MENU
========================= */

.burger-btn,
.mobile-menu-overlay{
  display:none !important;
}

/* =========================
   MOBILE NAV FIX
========================= */

@media(max-width:900px){

  .hero-header{

    padding:12px 16px;

    border-radius:22px;

  }

  .hero-logo{

    width:58px;

  }

  .hero-nav{

    display:flex !important;

    gap:16px;

    align-items:center;

  }

  .hero-nav a{

    font-size:.82rem;

    white-space:nowrap;

  }

}

@media(max-width:560px){

  .hero-nav{

    gap:12px;

  }

  .hero-nav a{

    font-size:.74rem;

  }

}