@import url("https://fonts.googleapis.com/css2?family=Baskervville:ital@0;1&family=Poppins:wght@400;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Italiana&display=swap');
@import url("https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap");

@font-face {
      font-family: Monorama;
      src: url(font/Monorama-Medium.otf);
}

@font-face {
      font-family: Lexa;
      src: url(font/lexa.otf);
}

*,
*::before,
**::after {
      box-sizing: border-box;
      margin: 0px;
      padding: 0px;
}

:root {
      --bg-color: #48cfcb;
      --primary: #161616;
}

body {
      box-sizing: border-box;
      margin: 0px;
      padding: 0px;
      height: 100%;
      background-color: var(--bg-color, #48cfcb);
      overflow: hidden;
      user-select: none;
      cursor: url(img/cursor-2.png), auto;
}

h1,
h2,
h3,
h4,
h5,
p {
      margin: 0;
}

img {
      height: auto;
      width: 100%;
}

.italiana {
      font-family: "italiana", sans-serif;
}

/* Underline effect */
a {
      position: relative;
      line-height: 32px;
}

.link:hover {
      color: #000;
}

.link::before {
      content: "";
      position: absolute;
      display: block;
      width: 100%;
      height: 2px;
      bottom: 0;
      left: 0;
      background-color: #000;
      transform: scaleX(0);
      transition: transform 0.3s ease-in-out;
}

.link:hover::before {
      transform: scaleX(1);
}

/* Underline effect */

.top-nav {
      height: 50px;
      width: 100%;
      font-family: "Poppins", "Roboto", sans-serif;
      margin-top: 20px;
      margin-bottom: 20px;
}

.top-nav a {
      text-decoration: none;
}

.top-nav-items {
      height: 100%;
      display: flex;
      justify-content: space-between;
      padding: 0px;
      align-items: center;
      list-style: none;

      margin-right: 20px;
      margin-left: 20px;
}

.top-nav-item-left {
      height: 100%;
      display: flex;
      gap: 10px;
      justify-content: center;
      align-items: center;
}

.top-nav-item-center {
      height: 100%;
      display: flex;
      gap: 20px;
      justify-content: center;
      align-items: center;
      font-size: 16px;
}

.top-nav-item-center a {
      border: 2.5px solid #021526;
      padding-top: 5px;
      padding-bottom: 5px;
      padding-left: 20px;
      padding-right: 20px;
      border-radius: 99px;
      transition: all 200ms ease-in-out;
      font-weight: 600;
}

.top-nav-item-center a:hover {
      background-color: #021526;
      color: #ffffff;
}

.top-nav-item-center > a {
      color: #021526;
}

.top-nav-item-right {
      height: 100%;
      display: flex;
      gap: 10px;
      justify-content: center;
      align-items: center;
}

.top-shopping-cart-icon,
.top-account-icon {
      color: black;
}


.top-nav-icon-text {
      font-weight: bolder;
      color: #021526;
      margin-left: 25px;
      font-size: 25px;
}

.noise {
      top: -10rem;
      left: -10rem;
      width: calc(100% + 20rem);
      height: calc(100% + 20rem);
      z-index: 9999;
      position: fixed;
      background-image: url(img/noise-1.jpg);
      opacity: 0.15;
      pointer-events: none;
      -webkit-animation: noise 1s steps(2) infinite;
      animation: noise 1s steps(2) infinite;
}

.landing-hero-image {
      z-index: -2;
      position: absolute;
      width: 100%;
      border-top-right-radius: 32px;
      border-top-left-radius: 32px;
      background-image: url("img/bg-2.gif");
      filter: brightness(80%);
      background-position: bottom;
      background-repeat: no-repeat;
      background-size: cover;
      height: calc(90vh - 80px);
}

.landing-text-top-section {
      display: flex;
      color: #021526;
      padding: 30px;
}

.landing-text-top-section span {
      color: #f5f5f5;
      font-weight: 600;
}

.landing-text-top-left {
      font-family: "Roboto Mono";
      font-size: 16px;
      line-height: 25px;
      padding: 70px;
      width: 200px;
      background-color: #229799;
      backdrop-filter: blur(10px);
      text-transform: uppercase;
      border-radius: 5px;
}

.landing-text-top-right {
      font-family: "Baskervville", serif;
      font-size: 100px;
      font-weight: lighter;
      text-align: end;
}

.landing-text-top-right sup {
      font-size: 32px;
      color: #021526;
}

.landing-text-top-right-sub {
      font-size: 32px;
      font-weight: lighter;
}

.landing-text-top-right i {
      color: #021526;
}

.landing-text-top-right span {
      color: #021526;
}

@media screen and (max-width: 1360px) {
      .landing-text-top-right {
            font-size: 50px;
            text-align: center;
      }
}

@media screen and (max-width: 900px) {
      .landing-text-top-section {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-between;
            color: white;
            padding: 100px;
            height: calc(100vh - 300px);
      }

      .top-nav-items .title {
            display: none;
      }

      .landing-text-top-right {
            font-size: 50px;
            text-align: center;
      }

      .landing-text-top-left {
            padding: 50px;
            width: 100%;
            text-align: center;
      }
}

@media screen and (max-width: 700px) {
      .landing-text-top-section {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-between;
            color: white;
            padding: 100px;
            height: calc(100vh - 300px);
      }

      .landing-text-top-right {
            font-size: 20px;
            text-align: center;
      }

      .landing-text-top-left {
            padding: 50px;
      }
}

@keyframes noise {
      0% {
            transform: translate3d(0, 9rem, 0);
      }

      10% {
            transform: translate3d(-1rem, -4rem, 0);
      }

      20% {
            transform: translate3d(-8rem, 2rem, 0);
      }

      30% {
            transform: translate3d(9rem, -9rem, 0);
      }

      40% {
            transform: translate3d(-2rem, 7rem, 0);
      }

      50% {
            transform: translate3d(-9rem, -4rem, 0);
      }

      60% {
            transform: translate3d(2rem, 6rem, 0);
      }

      70% {
            transform: translate3d(7rem, -8rem, 0);
      }

      80% {
            transform: translate3d(-9rem, 1rem, 0);
      }

      90% {
            transform: translate3d(6rem, -5rem, 0);
      }

      to {
            transform: translate3d(-7rem, 0, 0);
      }
}