* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;

      /* color  */
      --primary-color: #F3C77C;
      --secondary-color: #E7CFB1;
      --background-color: #151414;
      --text-color: #fff;
      --hover-color: #C87238;
      --scroll-section-color: #9AC1CC;

      /* transition  */
      --basic-transition: all 0.2s cubic-bezier(0.075, 0.82, 0.165, 1);
}

@font-face {
      font-family: MyCustomFont;
      src: url('./assets/helveticaneue.woff2') format('woff2'),
}

li{
      list-style: none;
}

html,
body {
      width: 100%;
      height: 100%;
      /* font-family: myCustomFont;   */
      background-color: var(--background-color);
}

#loader {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: var(--primary-color);
      z-index: 100;
      display: flex;
      align-items: center;
      justify-content: center;
}

#loader img {
      width: 30vw;
      height: 30vw;
      position: absolute;
      display: none;
}

nav {
      height: 15vh;
      width: 100%;
      /* background-color: rebeccapurple; */
      padding: 1.2vw;
      display: flex;
      align-items: center;
      justify-content: space-between;
}

.nav-item {
      text-decoration: none;
      font-size: 1.5vw;
      margin-right: 4.5vw;
      color: var(--primary-color);
      transition: var(--basic-transition);
      position: relative;
}

.nav-item:nth-last-child(1) {
      margin-right: 1vw;
}

.nav-item::before {
      content: '*';
      position: absolute;
      color: var(--primary-color);
      font-size: 2.5vw;
      left: -20%;
      display: none;

}

.nav-item:hover {
      color: var(--hover-color);
}

.hero-section {
      /* background-color: red; */
      height: 85vh;
      width: 100%;
      padding: 0 3vw;

}

.hero-section-title {
      letter-spacing: -3vw;
      overflow-y: hidden;
      /* background-color: #C87238; */
      height: 85vh;
      display: flex;
      align-items: center;
      position: relative;
      top: -5%;
}

.hero-section-title>span {
      font-family: myCustomFont Arial, Helvetica, sans-serif;
      font-weight: bolder;
      font-size: 40vw;
      margin: 0;
      display: inline-block;
      color: var(--primary-color);
}

.video-section {
      width: 100%;
      height: 100vh;
      /* background-color: #C87238; */
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
}

.video-section-desc {
      font-family: myCustomFont Arial, Helvetica, sans-serif;
      font-weight: bolder;
      font-size: 1vw;
      color: var(--primary-color);
}

.video-section-content video {
      width: 100%;
      height: 100%;
      object-fit: cover;
}

.video-section-content-inner {
      width: 100%;
      height: 100%;
      transform-origin: center center;
      transform: scale(0.3);
}

.video-section-content {
      height: 85vh;
      width: 100%;

}

.projects-section {
      width: 100%;
      min-height: 100vh;
      /* background-color: rgb(114, 73, 24); */
}

.projects-section-top {
      width: 100%;
      height: 25vh;
      margin-top: 2vw;
      /* background-color: red; */
      position: relative;
}

.projects-section-top svg {
      position: absolute;
      top: 0;
      right: 4%;
}

.projects-section-top svg:nth-child(1) {
      animation-name: rotate;
      animation-iteration-count: infinite;
      animation-duration: 5s;
      animation-timing-function: linear;
}

.project-section-bottom {
      width: 100%;
      height: 30vh;
      /* background-color: blueviolet; */
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 10vw;
}

.project-bottom-title {
      font-family: myCustomFont Arial, Helvetica, sans-serif;
      font-size: 2.5vw;
      line-height: 2.5vw;
      color: var(--primary-color);
      text-decoration: none;
      text-transform: uppercase;
      padding: 2.5vw 4vw;
      position: relative;

}

.project-bottom-title::after {
      border: 0.15rem solid;
      border-radius: 100%;
      content: "";
      display: block;
      height: 100%;
      left: 0;
      position: absolute;
      top: 0;
      transition: transform .3s;
      width: 100%;
}

.project-bottom-title:hover::after{
      transform: rotate(-15deg) scale3d(1.1,1.4,1);
}
.project-section-middle{
      width: 100%;
      padding: 2vw 3vw;
      /* background-color: red; */
}

.project-items{
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      grid-template-rows: repeat(3, 60vh);
      grid-row-gap: 20vw;
      /* background-color: green; */
      
}
.figure{
      height: fit-content;
      /* width: 40vw; */
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      /* background-color: green; */
}
.figure-img{
      width: 100%;
      height: 60vh;
      overflow: hidden;
      /* background-color: #C87238; */
      transition: all 0.2s ease-in-out;
}
.figure-text{
      width: 100%;
      /* background-color: red; */
      padding: 1.5vw .0;
      font-size: 1.2vw;
      color: var(--text-color);
      font-family: myCustomFont Arial, Helvetica, sans-serif;
}

.figure-img-container{
      width: 100%;
      height: 100%;
      transition: transform 0.3s ease; 
}

.figure-img-container video{
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.3s ease; 
}
.figure-img-container img{
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.3s ease; 
}

#project-item1{
      grid-column: 1/4;
      grid-row: 1/2;
      margin-top: -10vw;
}

#project-item2{
      grid-column: 5/7;
      grid-row: 1/2;
      margin-top: 10vw;
}
#project-item3{
      grid-column: 1/3;
      grid-row: 2/3;
      margin-top: -15vw;
}
#project-item4{
      grid-column: 4/7;
      grid-row: 2/3;
      /* margin-top: 10vw; */
}
#project-item5{
      grid-column: 2/6;
      grid-row: 3/4;
      margin-top: -10vw;
      /* background-color: yellow; */
}

.horizontal-section{
      background-color: #9AC1CC;
      width: 100%;
      height: 100vh;
      position: relative;
}
.horizontal-section-title{
      font-size: 45vw;
      font-weight: 500;
      font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
      text-transform: uppercase;
      /* position: absolute; */
}
.horizontal-section-img{
      width: 40vh;
      height: 40vh;
      position: absolute;
      z-index: 10;
}
.horizontal-section-img:nth-child(1){
      top: 60%;
      left: 20%;
}
.horizontal-section-img:nth-child(2){
      top: 50%;
      left: 80%;
}
.horizontal-section-img:nth-child(3){
      top: 55%;
      left: 150%;
}

.works-section{
      width: 100%;
      height: 100vh;
      background-color: #9AC1CC;
      margin-top: -1%;
      padding: 10vw 3vw;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
}

.work-section{
      margin: 2vw;
      /* background-color: red; */
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 0 2vw;
      
}
.work-section-title{
      font-size: 1.8vw;
      font-weight: 900;
      margin-bottom: 0.8vw;

}
.work-section-subtitle{
      font-size: 1.2vw;
      text-transform: uppercase;
      margin: 0.2vw 0;
      font-weight: 600;
      color: #4A5A5F;
      cursor: pointer;
}

.work-section-subtitle:hover{
      color: var(--secondary-color);
}

.brand-section{
      width: 100%;
      min-height: 60vh;
      padding: 4vw 8vw;
      /* background-color: red; */
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: repeat(3, 10vw);
      gap: 1vw;
}
.brand-name{
      /* background-color: #C87238; */
      
      /* border: 2px solid green; */
      padding: 2.5vw;
}
.brand-logo{
      width: 100%;
      height: 100%;
      object-fit: contain;
}

.contect-section{
      width: 100%;
      height: 110vh;
      background-color: var(--primary-color);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding-left: 5vw 3vw;
      /* background-color: red; */
      
}

.contact-heading{
      overflow-y: hidden;
      width: fit-content;
      /* background-color: red; */
}

.contact-heading > h1{
      font-size: 5vw;
      /* transform: translateY(50%); */
}
.contect-section> img{
      width: 20vw;
      height: 20vw;
      object-fit: cover;
}

.footer-section{
      width: 100%;
      height: 40vh;
}

@keyframes rotate {
      from {
            transform: rotate(0deg);
      }

      to {
            transform: rotate(360deg);
      }
}