/* Damoon VF Font */

    @font-face {
         font-family: myFirstFont;
            src: url(assets/fonts/AbarMid-Regular.woff);
            }
    
* {
     font-family: myFirstFont;
     }

    body {
        font-family: 'DamoonVF', sans-serif;
    }



  .card-container {
    perspective: 1000px; /* Adds perspective to create a 3D effect */
  }

  .card {
    position: relative;
    width: 300px;
    border-radius: 10px;
    overflow: hidden;
    background: #f7f7f7;
    transition: transform 0.5s ease-in-out, box-shadow 0.3s ease;
    cursor: pointer;
    height: 300px; /* Adjust height to make it fit */
  }

  .card:hover {
    transform: scale(1.1); /* Expand the card */
    box-shadow: 0 20px 30px rgba(0, 0, 0, 0.15); /* Add shadow on hover */
    z-index: 2;
  }

  .card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
  }

  .card-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(255, 255, 255, 0.8);
    padding: 20px;
    transition: background-color 0.3s ease;
    transform: translateY(100%); /* Start with info hidden */
  }

  .card:hover .card-info {
    background-color: rgba(255, 255, 255, 1); /* Fully opaque when expanded */
    transform: translateY(0); /* Slide info up when card is expanded */
  }

  .card-info h3 {
    font-size: 1.5rem;
    font-weight: bold;
    color: #1a2c49;
  }

  .card-info p {
    font-size: 1rem;
    color: #5b1900;
  }

  .overflow-x-auto {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .space-x-8 {
    margin-left: 2rem;
    margin-right: 2rem;
  }


  .scrolling-images {
    animation: scroll 10s linear infinite;
  }
  
  @keyframes scroll {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-50%);
    }
  }


  @keyframes scroll-left {
     
    100% {
      transform: translateX(-100%);
    }
  }

  .scrolling-text {
    display: inline-block;
    white-space: nowrap;
    animation: scroll-left 20s linear infinite;
    background: linear-gradient(to left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
    -webkit-background-clip: text;
    color: transparent;
    opacity: 1;  /* Ensure opacity is 100% and no fading */
    animation-delay: 0s;  /* No delay in the animation */
  }


  @layer utilities {
    @keyframes fade-in {
        from {
            opacity: 0;
            transform: translateY(10px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .animate-fade-in {
        animation: fade-in 1.2s ease-out forwards;
    }

    .delay-200 {
        animation-delay: 0.2s;
    }
}


.scrolling-images {
    animation: scroll 10s linear infinite;
  }
  
  @keyframes scroll {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-50%);
    }
  }


  @keyframes scroll-left {
     
    100% {
      transform: translateX(-100%);
    }
  }

  .scrolling-text {
    display: inline-block;
    white-space: nowrap;
    animation: scroll-left 20s linear infinite;
    background: linear-gradient(to left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
    -webkit-background-clip: text;
    color: transparent;
    opacity: 1;  /* Ensure opacity is 100% and no fading */
    animation-delay: 0s;  /* No delay in the animation */
  }


  @layer utilities {
    @keyframes fade-in {
        from {
            opacity: 0;
            transform: translateY(10px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .animate-fade-in {
        animation: fade-in 1.2s ease-out forwards;
    }

    .delay-200 {
        animation-delay: 0.2s;
    }
}


.card-container {
    perspective: 1000px; /* Adds perspective to create a 3D effect */
  }

  .card {
    position: relative;
    width: 300px;
    border-radius: 10px;
    overflow: hidden;
    background: #f7f7f7;
    transition: transform 0.5s ease-in-out, box-shadow 0.3s ease;
    cursor: pointer;
    height: 300px; /* Adjust height to make it fit */
  }

  .card:hover {
    transform: scale(1.1); /* Expand the card */
    box-shadow: 0 20px 30px rgba(0, 0, 0, 0.15); /* Add shadow on hover */
    z-index: 2;
  }

  .card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
  }

  .card-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(255, 255, 255, 0.8);
    padding: 20px;
    transition: background-color 0.3s ease;
    transform: translateY(100%); /* Start with info hidden */
  }

  .card:hover .card-info {
    background-color: rgba(255, 255, 255, 1); /* Fully opaque when expanded */
    transform: translateY(0); /* Slide info up when card is expanded */
  }

  .card-info h3 {
    font-size: 1.5rem;
    font-weight: bold;
    color: #1a2c49;
  }

  .card-info p {
    font-size: 1rem;
    color: #5b1900;
  }

  .overflow-x-auto {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .space-x-8 {
    margin-left: 2rem;
    margin-right: 2rem;
  }



  .fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out;
  }
  
  .fade-in.show {
    opacity: 1;
    transform: translateY(0);
  }




  /* Enable snap scrolling for the entire page */
  html {
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
    overflow-y: scroll;
  }

  /* Define snap points for each section */
  section.snap-section {
    scroll-snap-align: start;
    height: 100vh;
    overflow-y: auto;
  }

  /* Exceptions for sections that shouldn't snap */
  section:not(.snap-section) {
    scroll-snap-align: none;
  }

  /* Adjust the scrolling container */
  body {
    overflow-x: hidden;
  }