* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font-family: 'Gill Sans', 'Gill Sans MT', 'Trebuchet MS', sans-serif;
}

html,
body {
   width: 100%;
   height: 100%;
   background-color: #f8f8f8;
}

@font-face {
   font-family: 'Monument-Regular';
   src: url(fonts/MonumentExtended-Regular.otf) format('opentype');
}

@font-face {
   font-family: 'Monument-Bold';
   src: url(fonts/MonumentExtended-Ultrabold.otf) format('opentype');
}

#main {
   width: 100%;
   height: 100%;
   padding-top: 24px;
   position: relative;
}

nav {
   width: 100%;
   height: 12vh;
   /* background-color: red; */
   border-top: 2px solid black;
   border-bottom: 2px solid black;
   display: flex;
   align-items: center;
   justify-content: space-between;

   h1 {
      /* background-color: blue; */
      height: 100%;
      width: 24%;
      display: flex;
      justify-content: center;
      align-items: center;
      letter-spacing: -2px;
      font-size: 38px;
      font-family: 'Monument-Bold';
      cursor: pointer;
      position: relative;
      font-weight: 600;

      /* &::after {
         content: '©';
         position: absolute;
         top: 16px;
         right: 65px;
         font-family: Calibri;
         font-size: 20px;
         font-weight: lighter;
      }

      &::before {
         content: 'model management';
         letter-spacing: 0.2px;
         position: absolute;
         bottom: 8px;
         color: gray;
         right: 84px;
         font-family: Calibri;
         font-size: 20px;
         font-weight: lighter;
      } */
   }

   h2 {
      font-weight: 500;
      /* background-color: blue; */
      height: 100%;
      width: 18%;
      font-size: 22px;
      display: flex;
      justify-content: center;
      align-items: center;
      border-right: 2px solid black;
      cursor: pointer;
   }

   #menubar {
      display: none;
   }

   h2:nth-last-child(3) {
      width: 30%;
   }

   h2:nth-last-child(2) {
      width: 10%;
   }
}

#center {
   width: 100%;
   height: 90%;
   /* background-color: red; */
   padding: 3vw 5vw;
   position: relative;

   #content {
      width: 100%;
      height: 100%;
      /* background-color: blue; */
      position: relative;
      color: white;

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

      #overlay {
         width: 100%;
         height: 50%;
         /* background-color: red; */
         position: absolute;
         left: 0;
         bottom: 0;
         padding: 0 2vw;

         #over-top {
            width: 100%;
            height: 60%;
            /* background-color: yellow; */
            display: flex;
            align-items: center;
            justify-content: space-between;

            h1 {
               font-family: 'Monument-Bold';
               font-size: 42px;
            }

            h2 {
               /* background-color: blue; */
               width: 80px;
               height: 80px;
               border-radius: 50px;
               border: 1px solid white;
               border-top: 4px solid white;
               display: flex;
               justify-content: center;
               align-items: center;
               cursor: pointer;
            }

         }

         hr {
            border: none;
            height: 1px;
            background-color: white;
         }

         #over-bottom {
            width: 100%;
            height: 30%;
            /* background-color: blue; */
            display: flex;
            align-items: center;
            justify-content: space-between;

            h2 {
               font-size: 18px;
            }

            i {
               font-size: 32px;
               cursor: pointer;
            }
         }
      }
   }
}

#scroll {
   width: 100%;
   height: 40vh;
   white-space: nowrap;
   overflow-x: hidden;
   overflow-y: hidden;

   .container {
      display: inline-block;
      width: 100%;
      height: 100%;
      padding: 2vw;
      animation-name: scroll-anime;
      animation-duration: 10s;
      animation-timing-function: linear;
      animation-iteration-count: infinite;

   }

   img {
      width: 14%;
      height: 95%;
      border-radius: 50%;
      object-fit: cover;
      object-position: top;
      margin-inline: 1.5vw;
   }

}

@keyframes scroll-anime {
   from {
      transform: translateX(0%);
   }

   to {
      transform: translateX(calc(-100% - 8px));
   }
}

#alphabet {
   width: 100%;
   height: 10vh;
   /* background-color: red; */
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 1.4vw;
   border-top: 2px solid black;
   border-bottom: 2px solid black;

   h5 {
      font-size: 1.7vw;
      font-style: italic;
      font-weight: 400;
      text-transform: uppercase;
      border-bottom: 2px solid black;
      margin-right: 12px;
   }

   h6 {
      font-size: 1.1vw;
      font-style: italic;
      font-weight: 400;
      text-transform: uppercase;
      /* background-color: yellow; */
      padding: 0.4vh 0.6vw;
      border-radius: 50%;
      cursor: pointer;
      transition: all ease 2s;

      &:hover {
         border: 2px solid black;
      }
   }
}

#page2 {
   width: 100%;
   height: 120vh;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 1.5vw;
   padding: 2.5vw 1vw;

   #left {
      width: 50%;
      height: 100%;
      background-image: url(https://images.unsplash.com/photo-1668873886689-44e10db476bc?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
      background-position: 40%;
      background-size: cover;
      background-repeat: no-repeat;
   }

   #right {
      width: 36%;
      height: 100%;


      img {
         height: 78%;
         width: 100%;
         object-fit: cover;
         object-position: 10%;
      }

      #page-text {
         /* background-color: blue; */
         margin-top: 1.4vw;
         display: flex;
         justify-content: space-between;

         h2 {
            width: 50%;
            height: 100%;
            line-height: 1.2;
         }
      }
   }
}

#page3 {
   width: 100%;
   height: 100%;
   /* background-color: red; */
   padding: 1vw 7vw 5vw;

   h2 {
      width: 100%;
      height: 7vh;
      /* background-color: blue; */
      font-size: 2.5vw;
      font-family: 'Monument-Bold';
   }

   #page3-content {
      /* background-color: blue; */
      width: 100%;
      height: 100%;
      padding-inline: 4vw;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 1vw;

      #text-content {
         width: 45%;
         height: 100%;
         /* background-color: yellow; */
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
         position: relative;

         svg {
            width: 230px;
            height: 230px;
            cursor: pointer;
            user-select: none;

            text {
               font-size: 1.67vw;
               letter-spacing: 1px;
               /* fill: #000; */
            }
         }

         p {
            font-size: 1.8vw;
            width: 100%;
            height: 20%;
            /* background-color: blue; */
            position: absolute;
            bottom: 0;
            left: 0;
         }

      }

      #img-content {
         width: 60%;
         height: 100%;
         background-image: url(https://images.unsplash.com/photo-1642697946347-3efca6ed7442?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
         background-size: cover;
         background-position: 20% 28%;
      }
   }
}

#center-image {
   width: 90%;
   height: 80vh;
   /* background-color: red; */
   margin-block: 3vw;
   margin-inline: 4.8vw;
   padding-inline: 6vw;
   object-fit: cover;
   object-position: 0 20%;
}

#page4 {
   width: 100%;
   height: 100vh;
   padding: 5vw 4vw;
   /* background-color: blue; */

   &>h2 {
      text-transform: uppercase;
      font-family: 'Monument-Bold';
      font-size: 2.4rem;
      text-align: center;
      margin-bottom: 2.8rem;
   }

   .elem {
      width: 100%;
      height: 16vh;
      padding-inline: 1.8vw;
      border-top: 2px solid black;
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: relative;

      &:nth-last-child(1) {
         border-bottom: 2px solid black;
      }

      img {
         position: absolute;
         left: 15%;
         opacity: 0;
         width: 100px;
         height: 100px;
         object-fit: cover;
         object-position: top;
         border-radius: 50%;
         transition: all ease 0.3s;
      }

      &:nth-child(odd) img {
         left: 45%;
      }

      &:hover img {
         opacity: 1;
         left: 24%;
      }

      &>h5 {
         width: 6%;
         text-transform: uppercase;
         font-size: 1rem;
         font-weight: lighter;
      }

      .elem-part2 {
         width: 50%;

         h2 {
            text-transform: capitalize;
            font-size: 2.6rem;
            font-weight: 400;
         }

         h5 {
            text-transform: uppercase;
            font-size: 0.8rem;
         }
      }
   }
}

#marque {
   width: 100%;
   /* background-color: red; */
   border-top: 2px solid black;
   border-bottom: 2px solid black;
   padding: 0.5vw;
   overflow-x: hidden;
   overflow-y: hidden;
   white-space: nowrap;

   h2 {
      font-family: 'Monument-Regular';
      font-size: 2.8rem;
      display: inline-block;
      letter-spacing: 0.2rem;
      -webkit-text-stroke: 1px black;
      color: transparent;
      margin-right: 16px;
      animation-name: move;
      animation-duration: 4s;
      animation-iteration-count: infinite;
      animation-timing-function: linear;
   }
}

@keyframes move {
   from {
      transform: translateX(0%);
   }

   to {
      transform: translateX(calc(-100% - 18px));
   }
}

/* footer {
   width: 100px;
   height: 100vh;
} */