:root {
 --accent: #ccaa62;
 --spacing: 2.5em;
}

body {
 margin: 0;
 font-family: Helvetica, sans-serif;
}

*{ box-sizing: border-box; }

a {
 color: #111;
 text-decoration: none;
 text-transform: uppercase;
 font-size: 0.7em;
 letter-spacing: 1px;
 transition: 0.3s;
}

span {
 text-transform: uppercase;
 font-size: 0.7em;
 font-weight: 700;
 transition: 0.3s;
}

p {
 color: #949494;
 font-size: 0.8pm;
 line-height: 30px;
 letter-spacing: 1px;
}

ul {
 list-style-type: none;
 padding: 0;
 text-align: center;
}

h1 {
 font-size: 3.3em;
 line-height: 1.3em;
}

header {
 padding: var(--spacing);
 background: #fff;
 height: 17vh;
}

.container {
 display: flex;
 justify-content: space-between;
 align-items: center;
 flex-direction: column;
 max-width: 1350px;
 height: 100%;
 margin: 0 auto;
}

/*===== Navbar ====*/
nav {
 display: flex;
 justify-content: space-between;
 align-items: center;
 margin-bottom: var(--spacing);
 width: 100%;
 height: 0;
}

ul a, ul span {
 font-weight: 700;
 background-image: linear-gradient(0deg, #111, #111);
 background-repeat: no-repeat;
 background-size: 0 2px;
 padding-bottom: 10px;
 background-position: 50% bottom;
}

ul a:hover,
ul span:hover,
.controls span:hover,
.controls span:hover,
.search:focus {
  background-size:100% 2px;
  background-image:linear-gradient (
    0deg, var(--accent), var(--accent));
}

nav span { cursor: pointer;}

.brand {
 text-transform: capitalize;
 font-size: 1.2em;
}

nav li {
 display: inline-block;
 margin: 0 0.8em;
}

.search {
 text-align: center;
 border: none;
 outline: none;
 width: 8em;
 transition: 0.3s;
}

.search,
.controls span,
.active {
 background-image: linear-gradient(
    0deg, #111, #111
    );
background-repeat: no-repeat;
background-size: 50% 2px;
padding-bottom: 10px;
background-position: 50% bottom;
}

.search::placeholder {
 color:#111;
 font-size: 0.8em;
 letter-spacing: 1px;
 font-weight: 700;
}

.search:focus {
 background-size: 120% 2px;
}

.form-mobile {
 display: none;
}

.menu-btn {
 display: none;
 background: none;
 border: none;
 cursor: pointer;
}

/*Header Body*/
.header-body {
    display: grid;
    grid-template-columns: 1fr 1fr 3em;
    justify-content: center;
    align-content: center;
}

.header-body > div {
  margin: 0 var(--spacing);
}

.slider img {
 width: 69%;
 height: 97%;
}

.slider {
 position:relative;
}

.decoration-left,
.decoration-right {
 background: var(--accent);
 position: absolute;
 z-index: 1;
}

.decoration-left {
 top: 40%;
 left: -8%;
 width: 7%;
 height: 50%;
 transform: translateY(-50%);
 writing-mode: vertical-lr;
 color: #fff;
 font-size: 0.8em;
 display: flex;
 justify-content: center;
 align-items: center;
 animation: slide1;
}

.decoration-right {
 bottom: 2%;
 right: 25%;
 width: 7%;
 height: 6em;
 animation: slide2;
}

.overlay {
 position: absolute;
 background: #fff;
 bottom: 0;
 left: 0;
 width: 100%;
 animation: slide3;
 z-index: 0;
}

.anim {
 animation-duration: 0.8s;
 animation-timing-function: 
 cubic-bezier(.39,.08,.93,.42);
}

.text {
 display: flex;
 justify-content: center;
 align-items: center;
}

.text > div {
    max-width: 27em;
}

.text p {
 background-image: linear-gradient(
    0deg, var(--accent), var(--accent)
    );
 background-repeat: no-repeat;
 background-size: 3px 100%;
 padding-left: var(--spacing);
 background-position: 0 0;
}

.social {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.social li {
 margin: 1.5em 0;
 writing-mode: vertical-lr;
 font-weight: 500;
}

/*Header Bottom*/
.header-botton {
 margin: var(--spacing) 0 0 0;
}

.active {
 color: var (--accent);
 background-image: linear-gradient(
 0deg, var(--accent), var(--accent)
 );
}

.controls span {
    margin: 0 0.5em;
}

/*Animations*/
@keyframes slide1 {
    0% { height: 0; }
    100% { height: 70%; }
}

@keyframes slide2 {
    0% { height: 0; }
    100% { height: 12em; }
}

@keyframes slide3 {
    0% { height: 100%; }
    100% { height: 0; }
}