*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  max-width: 100vw;
  overflow-x: hidden;
  font: #F4F7F5;
}

html {
    scroll-behavior: smooth;
  }

  .fade-out {
    animation: fadeOut 0.4s forwards;
  }
  
  @keyframes fadeOut {
    to {
      opacity: 0;
      transform: scale(0.98);
    }
  }
  
  body {
    opacity: 0;
    transition: opacity 0.8s ease 0.9s;
  }
  
  body.loaded {
    opacity: 1;
  }
  
  .fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.5s ease-out;
  }

  .fade-in.show {
    opacity: 1;
    transform: translateY(0);
  }

  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }
  
  .scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  
  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }

  #load-more {
    transition: opacity 0.3s ease;
  }
  
  img {
    object-fit: cover;
  }

  .will-change {
    will-change: opacity;
  }

.main-logo {
  cursor: pointer;
}