* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
#content-container {
  display: none;
}
@layer utilities {
  .scrollbar-hidden {
    &::-webkit-scrollbar {
      display: none;
    }
    scrollbar-width: none;
  }
}

@layer components {
  /* Custom component classes */
  .gradient-text {
    background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

nav {
  display: flex;
  justify-content: space-around;
  padding: 20px;
}
.hovered:hover {
  background-color: #000000;
  color: #fdc64f;
}
.hovered {
  transition: background-color 0.5s ease-in-out, color 0.5s ease-in-out;
}
.shopnow:hover {
  background-color: #ffffff;
  color: #000000;
}
.shopnow {
  transition: background-color 0.5s ease-in-out, color 0.5s ease-in-out;
}

.zoom {
  transition: transform 0.2s ease-in-out;
}
.zoom:hover {
  transform: scale(1.03);
}

.hero-section {
  background-image: url("img/Shoe-hero-section.avif");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 100vh;
}

@media (max-width: 768px) {
  .hero-section {
    background-attachment: scroll !important;
    background-size: contain; /* Or keep 'cover' */
  }
}



  /* Loader Styles */
  .banter-loader {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 72px;
    height: 72px;
justify-content: center;

    z-index: 1000;
  }

  .banter-loader__box {
    float: left;
    position: relative;
    width: 20px;
    height: 20px;
    margin-right: 6px;
  }

  .banter-loader__box:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: orange;
  }

  .banter-loader__box:nth-child(3n) {
    margin-right: 0;
    margin-bottom: 6px;
  }

  .banter-loader__box:nth-child(1):before,
  .banter-loader__box:nth-child(4):before {
    margin-left: 26px;
  }

  .banter-loader__box:nth-child(3):before {
    margin-top: 52px;
  }

  .banter-loader__box:last-child {
    margin-bottom: 0;
  }

  @keyframes moveBox-1 {
    9.09%  { transform: translate(-26px, 0); }
    18.18% { transform: translate(0px, 0); }
    27.27% { transform: translate(0px, 0); }
    36.36% { transform: translate(26px, 0); }
    45.45% { transform: translate(26px, 26px); }
    54.55% { transform: translate(26px, 26px); }
    63.64% { transform: translate(26px, 26px); }
    72.73% { transform: translate(26px, 0px); }
    81.82% { transform: translate(0px, 0px); }
    90.91% { transform: translate(-26px, 0px); }
    100%  { transform: translate(0px, 0px); }
  }
  .banter-loader__box:nth-child(1) {
    animation: moveBox-1 4s infinite;
  }

  @keyframes moveBox-2 {
    9.09%  { transform: translate(0, 0); }
    18.18% { transform: translate(26px, 0); }
    27.27% { transform: translate(0px, 0); }
    36.36% { transform: translate(26px, 0); }
    45.45% { transform: translate(26px, 26px); }
    54.55% { transform: translate(26px, 26px); }
    63.64% { transform: translate(26px, 26px); }
    72.73% { transform: translate(26px, 26px); }
    81.82% { transform: translate(0px, 26px); }
    90.91% { transform: translate(0px, 26px); }
    100%  { transform: translate(0px, 0px); }
  }
  .banter-loader__box:nth-child(2) {
    animation: moveBox-2 4s infinite;
  }

  @keyframes moveBox-3 {
    9.09%  { transform: translate(-26px, 0); }
    18.18% { transform: translate(-26px, 0); }
    27.27% { transform: translate(0px, 0); }
    36.36% { transform: translate(-26px, 0); }
    45.45% { transform: translate(-26px, 0); }
    54.55% { transform: translate(-26px, 0); }
    63.64% { transform: translate(-26px, 0); }
    72.73% { transform: translate(-26px, 0); }
    81.82% { transform: translate(-26px, -26px); }
    90.91% { transform: translate(0px, -26px); }
    100%  { transform: translate(0px, 0px); }
  }
  .banter-loader__box:nth-child(3) {
    animation: moveBox-3 4s infinite;
  }

  @keyframes moveBox-4 {
    9.09%  { transform: translate(-26px, 0); }
    18.18% { transform: translate(-26px, 0); }
    27.27% { transform: translate(-26px, -26px); }
    36.36% { transform: translate(0px, -26px); }
    45.45% { transform: translate(0px, 0px); }
    54.55% { transform: translate(0px, -26px); }
    63.64% { transform: translate(0px, -26px); }
    72.73% { transform: translate(0px, -26px); }
    81.82% { transform: translate(-26px, -26px); }
    90.91% { transform: translate(-26px, 0px); }
    100%  { transform: translate(0px, 0px); }
  }
  .banter-loader__box:nth-child(4) {
    animation: moveBox-4 4s infinite;
  }

  @keyframes moveBox-5 {
    9.09%  { transform: translate(0, 0); }
    18.18% { transform: translate(0, 0); }
    27.27% { transform: translate(0, 0); }
    36.36% { transform: translate(26px, 0); }
    45.45% { transform: translate(26px, 0); }
    54.55% { transform: translate(26px, 0); }
    63.64% { transform: translate(26px, 0); }
    72.73% { transform: translate(26px, 0); }
    81.82% { transform: translate(26px, -26px); }
    90.91% { transform: translate(0px, -26px); }
    100%  { transform: translate(0px, 0px); }
  }
  .banter-loader__box:nth-child(5) {
    animation: moveBox-5 4s infinite;
  }

  @keyframes moveBox-6 {
    9.09%  { transform: translate(0, 0); }
    18.18% { transform: translate(-26px, 0); }
    27.27% { transform: translate(-26px, 0); }
    36.36% { transform: translate(0px, 0); }
    45.45% { transform: translate(0px, 0); }
    54.55% { transform: translate(0px, 0); }
    63.64% { transform: translate(0px, 0); }
    72.73% { transform: translate(0px, 26px); }
    81.82% { transform: translate(-26px, 26px); }
    90.91% { transform: translate(-26px, 0px); }
    100%  { transform: translate(0px, 0px); }
  }
  .banter-loader__box:nth-child(6) {
    animation: moveBox-6 4s infinite;
  }

  @keyframes moveBox-7 {
    9.09%  { transform: translate(26px, 0); }
    18.18% { transform: translate(26px, 0); }
    27.27% { transform: translate(26px, 0); }
    36.36% { transform: translate(0px, 0); }
    45.45% { transform: translate(0px, -26px); }
    54.55% { transform: translate(26px, -26px); }
    63.64% { transform: translate(0px, -26px); }
    72.73% { transform: translate(0px, -26px); }
    81.82% { transform: translate(0px, 0px); }
    90.91% { transform: translate(26px, 0px); }
    100%  { transform: translate(0px, 0px); }
  }
  .banter-loader__box:nth-child(7) {
    animation: moveBox-7 4s infinite;
  }

  @keyframes moveBox-8 {
    9.09%  { transform: translate(0, 0); }
    18.18% { transform: translate(-26px, 0); }
    27.27% { transform: translate(-26px, -26px); }
    36.36% { transform: translate(0px, -26px); }
    45.45% { transform: translate(0px, -26px); }
    54.55% { transform: translate(0px, -26px); }
    63.64% { transform: translate(0px, -26px); }
    72.73% { transform: translate(0px, -26px); }
    81.82% { transform: translate(26px, -26px); }
    90.91% { transform: translate(26px, 0px); }
    100%  { transform: translate(0px, 0px); }
  }
  .banter-loader__box:nth-child(8) {
    animation: moveBox-8 4s infinite;
  }

  @keyframes moveBox-9 {
    9.09%  { transform: translate(-26px, 0); }
    18.18% { transform: translate(-26px, 0); }
    27.27% { transform: translate(0px, 0); }
    36.36% { transform: translate(-26px, 0); }
    45.45% { transform: translate(0px, 0); }
    54.55% { transform: translate(0px, 0); }
    63.64% { transform: translate(-26px, 0); }
    72.73% { transform: translate(-26px, 0); }
    81.82% { transform: translate(-52px, 0); }
    90.91% { transform: translate(-26px, 0); }
    100%  { transform: translate(0px, 0); }
  }
  .banter-loader__box:nth-child(9) {
    animation: moveBox-9 4s infinite;
  }

  /* Main content initial state */
  #main-content {
    transition: opacity 0.5s ease;
  }



model-viewer {
  width: 100%;
  height: 100vh;
  background-color: rgb(255, 255, 255);
}
body {
  background-color: rgb(255, 255, 255);
}
h1 {
  color: black;
  text-align: left;
  font-weight: bold;
  margin-top: 50px;
  font-size: 45px;
  padding-left:20px;
  /* font-family: "Roboto", sans-serif; */
}
h4 {
  color: rgb(255, 255, 255);
  text-align: left;
  font-size: 14px;
  font-family: "Roboto", sans-serif;
}