body {
    overflow-x: hidden; /* Disables both horizontal and vertical scrolling */
}

.background {
    background-position: center 100%;  /* Center the image */
    will-change: transform;
    background-image: url('../assests/NavBar/Background.png'); 
    background-size: 2300px 800px; 
    height: 100%;  /* Ensure the body takes up the full viewport height */
    margin: 20;  /* Remove any default margin */
    position: fixed;  /* Keeps the background fixed to the screen */
    top: 0;            /* Aligns it to the top */
    left: 0;           /* Aligns it to the left */
    width: 200%;       /* Full width */
    height: 100vh;     /* Full viewport height */
    z-index: -1;       /* Puts the background behind all content */
    animation: scrollBackground 20s linear infinite;
    opacity: 0.95;
} @keyframes scrollBackground {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

.container {
    position: relative;  /* Ensures container stays above background */
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: visible;
    height: 100vh;  /* Full height */
}

.card {
    width: 200px;
    height: 300px;
    perspective: 1000px; /* Enables 3D effect */
    display: flex;
    position: absolute;
    z-index: 11;
  }
    
    .card[data-number = "one"] { 
    transform: translate(-600px, -200px);
    }
    .card[data-number = "two"] {
        transform: translate(-300px, -200px);
    }
    .card[data-number = "three"] {
        transform: translate(0px, -200px);
    }
    .card[data-number = "four"] {
        transform: translate(300px, -200px);
    }
    .card[data-number = "five"] {
        transform: translate(600px, -200px);
    }
    .card[data-number = "six"] {
        transform: translate(-500px, 200px);
    }
    .card[data-number = "seven"] {
        transform: translate(-166px, 200px);
    }
    .card[data-number = "eight"] {
        transform: translate(166px, 200px);
    }
    .card[data-number = "nine"] {
        transform: translate(500px, 200px);
    }
  
  /* Card inner content (this will be flipped) */
  .card-inner {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d; /* Ensures the front and back are positioned in 3D space */
    transition: transform 0.6s; /* Smooth flip transition */
  }
  
  /* Front of the card */
  .card-front,
  .card-back {
    position: absolute;
    backface-visibility: hidden; /* Hides the back when it is facing away */
    width: 100%;
    height: 100%;
  }
  
  /* Back of the card (this will be flipped) */
  .card-back {
    transform: rotateY(-180deg); /* Initially rotates the back 180° so it’s hidden */
  }
  
  /* Front image style */
  .card-front img,
  .card-back img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the image covers the full card */
    }
  
  .card.flipped .card-inner {
    transform: rotateY(-180deg);
    }

.scroll-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 2rem;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 10;
  }
  
  #scroll-left {
    left: 10px;
  }
  
  #scroll-right {
    right: 10px;
  }

/* .card[data-number = "one"] { 
    transform: translate(-600px, -200px);
}
.card[data-number = "two"] {
    transform: translate(-300px, -200px);
}
.card[data-number = "three"] {
    transform: translate(0px, -200px);
}
.card[data-number = "four"] {
    transform: translate(300px, -200px);
}
.card[data-number = "five"] {
    transform: translate(600px, -200px);
}
.card[data-number = "six"] {
    transform: translate(-500px, 200px);
}
.card[data-number = "seven"] {
    transform: translate(-166px, 200px);
}
.card[data-number = "eight"] {
    transform: translate(166px, 200px);
}
.card[data-number = "nine"] {
    transform: translate(500px, 200px);
} */