#canvas {
  background-color: #111111;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -5;
  opacity: 0.5;
  width: 100%;
  height: 100%;
}

.container {
  flex-direction: column;
  margin: 0;
  padding: 5px;
  display: flex;
  align-items: center;
}

.card-container {
  flex-direction: row;
  margin: 0;
  padding: 20px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.card {
    position: relative;
    width: 150px;
    height: 150px;
    perspective: 1000px;
}

.card img {
    width: 100%;
    border-radius: 10px;
    transition: transform 0.3s;
}

.card:hover img {
    transform: scale(1.1) rotateY(10deg);
}

.hover-info {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 10px;
    text-align: center;
    opacity: 0;
    transition: opacity 0.3s;
}

.card:hover .hover-info {
    opacity: 1;
}

/*columnar for mobile*/
@media (max-width: 700px) {
  .card {
    width: 180px !important; /* Or specify a fixed height */
    height: auto !important; /* Or specify a fixed height */
  }
}
/* */

footer {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
}


.logo {
    color: yellow;
    font-size: 5rem;
    /*
    position: relative;
     */
    width: 100%; /* Expand to full width */
    text-align: center; /* Align text to the right */
    margin: 0; /* Reset margin */
    padding: 2px; /* Add padding if needed */
    box-sizing: border-box; /* Ensure padding does not affect width */
}

/*logo for mobile*/
@media (max-width: 768px) {
  .logo {
    font-size: 3rem;
  }
}

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

.particle {
    position: absolute;
    width: 5px;
    height: 5px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    transition: opacity 0.5s, transform 0.5s;
    pointer-events: none;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px);
    }
    60% {
        transform: translateY(-5px);
    }
}

.bouncy-text {
    display: inline-block; /* Ensure the element can animate */
    animation: bounce 2s infinite; /* Set animation duration and repeat */
    color: yellow; /* Text color */
}

.card {
    background-color: white; /* Card background color */
    width: 250px; /* Width of the card */
    height: 350px; /* Height of the card */
    border-radius: 15px; /* Rounded corners */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); /* Box shadow for depth */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: transform 0.3s, box-shadow 0.3s; /* Smooth transition */
    margin: 20px; /* Spacing between cards */
    perspective: 1000px; /* Maintain perspective for 3D effect */
}

.card:hover {
    transform: rotateY(10deg); /* Rotate card on hover */
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2); /* Enhanced shadow on hover */
}

.card img {
    width: 100%; /* Image takes full width of card */
    border-radius: 15px 15px 0 0; /* Rounded corners at the top */
}

.card h3 {
    margin: 10px 0; /* Margin for the title */
    font-size: 1.5rem; /* Title font size */
}

.card p {
    padding: 0 15px; /* Padding for description */
    text-align: center; /* Centered text */
}

.custom-cursor {
    cursor: url('../img/cursor-3d.png'), auto; /* Replace with your image path */
}

.custom-cursor-shorts-maker {
    cursor: url('../img/cursor-3d-shorts-maker.png'), auto; /* Replace with your image path */
}

.custom-cursor-santa {
    cursor: url('../img/cursor-3d-santa.png'), auto; /* Replace with your image path */
}

.custom-cursor-math {
    cursor: url('../img/cursor-3d-math.png'), auto; /* Replace with your image path */
}

.card-vanish {
    scale: 0.9;
    animation: card-vanish-frames 0.15s infinite;
}
@keyframe card-vanish-frames {
    0% {
      transform: translateX(-25px);
    }
    70% {
      transform: translateX(-50px);
    }
    100% {
      transform: translateX(-100px);
    }
}

.progress-bar-container {
  z-index: -5;
  width: 100%; /* Full width */
  max-width: 350px; /* Maximum width */
  background-color: #a9a9a9; /* Background color of the progress bar */
  border-radius: 10px; /* Rounded corners */
  overflow: hidden; /* Hide overflow */
  opacity: 0.25;
}

.progress-bar {
  height: 15px; /* Height of the progress bar */
  background-color: lime; /* Progress color */
  width: 0; /* Initial width */
  border-radius: 10px;
  animation: fill 10s forwards; /* Animation to fill the bar */
}

@keyframes fill {
  to {
    width: 100%; /* Fill to full width */
  }
}