*{
    box-sizing: border-box;
    scroll-behavior: smooth;
}
.list ul a{
    cursor: pointer;
    color: white;
    font-weight: bold;
    font-size: 18px;
}


.hide{
    display: none !important;
}

.hideWithTransition{
    opacity: 0;
    transition: 0.5s ease-in-out;
}


.desktop-hero-img{
    position: absolute;
    inset: 0;
    z-index: 1;
}
.mobile-hero-img{
    display: none;
}


.Suspension-Icon{
  animation: up-down 2s ease-in-out 0.5s infinite;
  will-change: transform;
}


    .swiper {
      width: 100%;
      height: 100%;
    }

    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #444;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 4px;
    }
    
    .swiper-slide img {
      display: block;
      width: 100%;
      max-height: 300px;
      object-fit: cover;
      border-radius: 4px;
    }
    
   .Magazine {
  width: 100%;
  height: 100%;

  --color: #e6dfdf48;

  background-color: #f0ebeb16;
  background-image:
    linear-gradient(
      0deg,
      transparent 24%,
      var(--color) 25%,
      var(--color) 26%,
      transparent 27%,
      transparent 74%,
      var(--color) 75%,
      var(--color) 76%,
      transparent 77%
    ),
    linear-gradient(
      90deg,
      transparent 24%,
      var(--color) 25%,
      var(--color) 26%,
      transparent 27%,
      transparent 74%,
      var(--color) 75%,
      var(--color) 76%,
      transparent 77%
    );

  background-size: 55px 55px;

  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    black 40%,
    black 100%
  );
}

@keyframes up-down {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}


/* Media */
@media (max-width : 768px) {
    nav{ 
        position: fixed;
        background-color: rgba(0, 0, 0, 0.514);
        padding: 0 16px;
        height: 50px;
        width: 100%;
        top : 0;
        z-index: 1000;
    }
    .list{
        position: fixed;
        display: none ;
        }
    .list ul{
        position: fixed;
        display: flex;
        flex-direction: column;
        justify-items: center;
        align-items: left;
        background-color: rgba(0, 0, 0, 0.514);
        inset: 0;
        top: 50px;
        padding: 0 0 0 20px;
        height: 250px;
    }
    .list ul li {
        padding: 4px 0 ;
    }
    .desktop-hero-img{
        display: none;
    }

    .mobile-hero-img{
        display: block;
        position: absolute;
        inset: 0;
        }

    .swiper-slide img {
      display: block;
      width: 100%;
      height:600px;
      object-fit: cover;
      border-radius: 4px;
    }

}