*,*::before,*::after{
  box-sizing:border-box
}

html,body{
  font-family:'DM Sans',sans-serif;
}

h1,h2,h3,h4,h5,h6{
  font-family:'PT Sans',sans-serif;
  font-weight:3000;
}

h2 span{
  font-weight:800;
}

body{
  transition:background-color .3s,color .3s;
  background:
    radial-gradient(circle at 10% 10%, rgba(229,152,5,.10), transparent 25%),
    radial-gradient(circle at 90% 20%, rgba(255,143,92,.10), transparent 25%),
    radial-gradient(circle at 50% 90%, rgba(229,152,5,.06), transparent 30%);
}

/* =========================================================
   GLASSMORPHISM BACKGROUND
========================================================= */

.glass-bg{
  position:relative;
}

.glass-bg::before{
  content:'';
  position:fixed;
  width:420px;
  height:420px;
  top:8%;
  right:-120px;
  border-radius:50%;
  background:rgba(229,152,5,.16);
  filter:blur(90px);
  pointer-events:none;
  z-index:-2;
}

.glass-bg::after{
  content:'';
  position:fixed;
  width:360px;
  height:360px;
  bottom:5%;
  left:-120px;
  border-radius:50%;
  background:rgba(255,143,92,.10);
  filter:blur(90px);
  pointer-events:none;
  z-index:-2;
}

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

body::before{
  content:'';
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:100;
  opacity:.20;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
}

/* =========================================================
   SCROLLBAR
========================================================= */

::-webkit-scrollbar{
  width:5px
}

::-webkit-scrollbar-track{
  background:transparent
}

::-webkit-scrollbar-thumb{
  background:#E59805;
  border-radius:99px
}

/* =========================================================
   REVEAL
========================================================= */

.reveal{
  opacity:0;
  transform:translateY(26px);
  transition:
    opacity .6s cubic-bezier(.4,0,.2,1),
    transform .6s cubic-bezier(.4,0,.2,1)
}

.reveal.in{
  opacity:1;
  transform:none
}

.d1{transition-delay:.08s}
.d2{transition-delay:.16s}
.d3{transition-delay:.24s}
.d4{transition-delay:.32s}

/* =========================================================
   NAV UNDERLINE
========================================================= */

.nl{
  position:relative
}

.nl::after{
  content:'';
  position:absolute;
  bottom:-2px;
  left:0;
  width:0;
  height:1.5px;
  background:currentColor;
  transition:width .22s cubic-bezier(.4,0,.2,1)
}

.nl:hover::after,
.nl.on::after{
  width:100%
}

.nl.on{
  font-weight:500
}

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

.shimmer{
  position:relative;
  overflow:hidden
}

.shimmer::after{
  content:'';
  position:absolute;
  top:0;
  left:-100%;
  width:60%;
  height:100%;
  background:rgba(255,255,255,.18);
  transform:skewX(-20deg);
  transition:left .4s cubic-bezier(.4,0,.2,1)
}

.shimmer:hover::after{
  left:160%
}

/* =========================================================
   GLASS NAVBAR
========================================================= */

.glass-nav{
  background:rgba(255,255,255,.48);
  border-bottom:1px solid rgba(255,255,255,.55);
  backdrop-filter:blur(22px) saturate(160%);
  -webkit-backdrop-filter:blur(22px) saturate(160%);
}

.dark .glass-nav{
  background:rgba(24,24,27,.45);
  border-bottom:1px solid rgba(255,255,255,.08);
}

/* =========================================================
   GLASS CARDS
========================================================= */

.glass-card{
  background:rgba(255,255,255,.48);
  border:1px solid rgba(255,255,255,.72);
  box-shadow:
    0 8px 32px rgba(31,38,135,.08),
    inset 0 1px 0 rgba(255,255,255,.70);
  backdrop-filter:blur(20px) saturate(150%);
  -webkit-backdrop-filter:blur(20px) saturate(150%);
}

.dark .glass-card{
  background:rgba(39,39,42,.42);
  border:1px solid rgba(255,255,255,.09);
  box-shadow:
    0 8px 32px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.06);
}

/* =========================================================
   GLASS CARD HOVER
========================================================= */

.card-h{
  transition:
    transform .28s cubic-bezier(.4,0,.2,1),
    border-color .18s,
    box-shadow .28s;
}

.card-h:hover{
  transform:translateY(-7px);
  box-shadow:
    0 18px 45px rgba(31,38,135,.12),
    inset 0 1px 0 rgba(255,255,255,.75);
}

.dark .card-h:hover{
  box-shadow:
    0 18px 45px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.08);
}

/* =========================================================
   PACKAGE IMAGE
========================================================= */

.pf{
  overflow:hidden;
  background:#d4d4d8
}

.pf img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block
}

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

.glass-button{
  background:rgba(255,255,255,.45);
  border:1px solid rgba(255,255,255,.70);
  backdrop-filter:blur(15px);
  -webkit-backdrop-filter:blur(15px);
  box-shadow:
    0 8px 25px rgba(0,0,0,.06),
    inset 0 1px 0 rgba(255,255,255,.65);
}

.dark .glass-button{
  background:rgba(39,39,42,.45);
  border:1px solid rgba(255,255,255,.10);
}

/* =========================================================
   GLASS INPUT
========================================================= */

.glass-input{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}

.glass-input:focus{
  background:rgba(255,255,255,.12);
  border-color:#E59805;
}

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

.glass-contact{
  background:
    linear-gradient(
      135deg,
      rgba(39,39,42,.88),
      rgba(24,24,27,.72)
    );
  border:1px solid rgba(255,255,255,.10);
  box-shadow:
    0 20px 60px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(25px);
  -webkit-backdrop-filter:blur(25px);
}

/* =========================================================
   GLASS BADGE
========================================================= */

.glass-badge{
  background:rgba(255,255,255,.42);
  border:1px solid rgba(255,255,255,.65);
  backdrop-filter:blur(15px);
  -webkit-backdrop-filter:blur(15px);
}

/* =========================================================
   SKILL TAG
========================================================= */

.stag{
  transition:border-color .18s
}

[x-cloak]{
  display:none!important
}

/* =========================================================
   MOBILE PHONE / CONTACT
========================================================= */

@media (max-width: 768px){

  /* Phone row */
  .phone-row{
    display:flex;
    align-items:center;
    gap:10px;
    width:100%;
  }

  /* Phone icon */
  .phone-row i,
  .phone-row svg{
    flex-shrink:0;
    width:20px;
    height:20px;
  }

  /* Phone number */
  .phone-row a,
  .phone-row span{
    min-width:0;
    word-break:normal;
    overflow-wrap:normal;
    white-space:nowrap;
  }

}


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

@media (max-width:480px){

  .phone-row{
    gap:8px;
    align-items:center;
  }

  .phone-row i,
  .phone-row svg{
    width:18px;
    height:18px;
  }

  .phone-row a,
  .phone-row span{
    font-size:.9rem;
  }

}