/* ========================================
RESET
======================================== */

html{

  scroll-behavior:smooth;

}

*{

  margin:0;

  padding:0;

  box-sizing:border-box;

}

/* ========================================
BODY
======================================== */

body{

  background:#050505;

  font-family:
  'Inter',
  sans-serif;

  color:#ffffff;

}

/* ========================================
SITE
======================================== */

.site{

  width:min(1220px, calc(100% - 32px));

  margin:74px auto 30px;

  background:#0b0b0b;

  border-radius:0 0 18px 18px;

  overflow:hidden;

}

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

.header{

  width:min(1220px, calc(100% - 32px));

  height:74px;

  padding:0 38px;

  display:flex;

  align-items:center;

  justify-content:space-between;

  position:fixed;

  top:0;

  left:50%;

  transform:translateX(-50%);

  z-index:9999;

  background:#111111;

  border-bottom:1px solid
  rgba(255,255,255,.05);

}

.logo img{

  height:48px;

  display:block;

}

.menu{

  display:flex;

  gap:28px;

}

.menu a{

  color:#d0d0d0;

  text-decoration:none;

  font-size:15px;

  position:relative;

  transition:
  color .35s ease;

}

.menu a::after{

  content:"";

  width:0;

  height:1px;

  position:absolute;

  left:0;

  bottom:-6px;

  background:

  linear-gradient(
    90deg,
    rgba(214,176,120,1) 0%,
    rgba(214,176,120,0) 100%
  );

  transition:
  width .35s ease;

}

.menu a:hover,
.menu a.active{

  color:#d6b078;

}

.menu a:hover::after,
.menu a.active::after{

  width:100%;

}

.header-icons{

  display:flex;

  gap:12px;

}

.header-icons button{

  width:36px;

  height:36px;

  border:none;

  border-radius:50%;

  background:#1a1a1a;

  color:#ffffff;

  cursor:pointer;

  transition:

  color .35s ease,
  background .35s ease,
  transform .35s ease;

}

.header-icons button:hover{

  color:#d6b078;

  background:
  rgba(214,176,120,.08);

  transform:
  translateY(-1px);

}

/* ========================================
FOOTER
======================================== */

.footer{

  min-height:120px;

  padding:28px 34px;

  margin-top:32px;

  display:flex;

  align-items:center;

  justify-content:space-between;

  border-top:1px solid
  rgba(255,255,255,.04);

  background:

  linear-gradient(
    180deg,
    rgba(10,10,10,.4) 0%,
    rgba(0,0,0,.28) 100%
  );

}

/* LOGO */

.footer-logo img{

  height:42px;

  display:block;

}

/* LINKS */

.footer-links{

  display:flex;

  gap:28px;

}

/* LINK */

.footer-links a{

  color:#bfbfbf;

  text-decoration:none;

  font-size:14px;

  position:relative;

  transition:
  color .35s ease;

}

.footer-links a::after{

  content:"";

  width:0;

  height:1px;

  position:absolute;

  left:0;

  bottom:-5px;

  background:

  linear-gradient(
    90deg,
    rgba(214,176,120,1) 0%,
    rgba(214,176,120,0) 100%
  );

  transition:
  width .35s ease;

}

/* HOVER */

.footer-links a:hover{

  color:#c8a067;

}

.footer-links a:hover::after{

  width:100%;

}

/* SOCIAL */

.footer-social{

  display:flex;

  gap:18px;

}

/* LINK */

.footer-social a{

  width:38px;

  height:38px;

  border-radius:50%;

  display:flex;

  align-items:center;

  justify-content:center;

  color:#f1f1f1;

  font-size:15px;

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

  transition:

  background .35s ease,
  color .35s ease,
  transform .35s ease;

}

/* HOVER */

.footer-social a:hover{

  background:
  rgba(200,160,103,.16);

  color:#d6b078;

  transform:
  translateY(-2px);

  box-shadow:

  0 0 18px
  rgba(200,160,103,.14);

}