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

    /* ----------------------------------- */
    /* ----------------------------------- */
    /* ----------------------------------- */
    /* ----------------------------------- */
    /* ----------------------------------- */
    /* ---------Pentru pagina principala --------- */
    @keyframes fadeUp {
      0% {
        opacity: 0;
        transform: translateY(40px);
      }

      100% {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes fadeIn {
      0% {
        opacity: 0;
      }

      100% {
        opacity: 1;
      }
    }

    .animate-title {
      animation: fadeUp 1s ease forwards;
    }

    .animate-text {
      animation: fadeUp 1.2s ease forwards;
    }

    .animate-btn {
      animation: fadeUp 1.4s ease forwards;
    }

    .animate-bg {
      animation: fadeIn 2s ease forwards;
    }

    .letter {
      display: inline-block;
      transition: transform 0.15s ease, color 0.15s ease;
      cursor: default;
    }

    .letter:hover {
      animation: letterWobble 0.4s ease forwards;
      color: #1156ea;
    }

    @keyframes letterWobble {
      0% {
        transform: translateY(0) rotate(0deg);
      }

      25% {
        transform: translateY(-8px) rotate(-5deg);
      }

      50% {
        transform: translateY(2px) rotate(3deg);
      }

      75% {
        transform: translateY(-4px) rotate(-2deg);
      }

      100% {
        transform: translateY(0) rotate(0deg);
      }
    }


    @keyframes slide {
      from {
        transform: translateX(0);
      }

      to {
        transform: translateX(-50%);
      }
    }


    @keyframes slide {
      from {
        transform: translateX(0);
      }

      to {
        transform: translateX(-50%);
      }
    }

    @keyframes rotate3d {
      from {
        transform: perspective(1000px) rotateY(0deg);
      }

      to {
        transform: perspective(1000px) rotateY(360deg);
      }
    }

    /* .carousel-3d {
      transform-style: preserve-3d;
      animation: rotate3d 20s linear infinite;
    }

    .carousel-item {
      position: absolute;
      top: 0;
      left: 0;
      transform-style: preserve-3d;
    }

    .carousel-item span {
      display: block;
    } */

    .carousel-3d {
      transform-style: preserve-3d;
      animation: rotate 20s linear infinite;
    }

    .carousel-item {
      position: absolute;
      top: 0;
      left: 0;
    }

    @keyframes rotate {
      from {
        transform: perspective(1000px) rotateY(0deg);
      }

      to {
        transform: perspective(1000px) rotateY(360deg);
      }
    }

     /* ----------------------------------- */
    /* ----------------------------------- */
    /* ----------------------------------- */
    /* ----------------------------------- */
    /* ----------------------------------- */
    /* ---------Pentru pagina shuffle games --------- */



        .card {
            width: 100px;
            height: 100px;
            position: relative;
            transform-style: preserve-3d;
            transition: transform 0.5s;
            cursor: pointer;
        }

        .front,
        .back {
            width: 100%;
            height: 100%;
            position: absolute;
            backface-visibility: hidden;

        }

        .front {
            background-color: #1156EA;
            border-radius: 20px;
            box-shadow: 0 0 15px rgba(17, 86, 234, 0.6);
        }

        .back {
            transform: rotateY(180deg);
            background-size: cover;
            background-position: center;
            background-color: #ffffff;
            border-radius: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .card.flipped {
            transform: rotateY(180deg);
            background: white;
            border-radius: 20px;

        }

        .card.matched .back {

            color: transparent;
            border-radius: 20px;
            transform: rotateY(180deg);
            transition: background 0.5s ease, box-shadow 0.5s ease;
            border-radius: 20px;
            background-color: #89d957 !important;
            background-image: linear-gradient(#89d957, #c9e265) !important;
            box-shadow: 0 0 15px #4ade80;
        }

        .card.matched {
            transform: rotateY(180deg);
            cursor: default;
        }

        .card.matched .back {
            animation: matchGlow 0.8s ease;
        }

        .card.matched {
            animation: matchScale 0.5s ease;
        }

        @keyframes matchGlow {
            0% {
                box-shadow: 0 0 0px #4ade80;
                transform: rotateY(180deg) scale(1);
            }

            50% {
                box-shadow: 0 0 25px #4ade80, 0 0 40px #22c55e;
                transform: rotateY(180deg) scale(1.05);
            }

            100% {
                box-shadow: 0 0 15px #4ade80;
                transform: rotateY(180deg) scale(1);
            }
        }

        @keyframes matchScale {
            0% {
                transform: rotateY(180deg) scale(1);
            }

            50% {
                transform: rotateY(180deg) scale(1.08);
            }

            100% {
                transform: rotateY(180deg) scale(1);
            }
        }


        @media (max-width: 768px) {
            .joc {
                grid-template-columns: repeat(4, 80px) !important;
                gap: 10px !important;
            }

            .card {
                width: 80px;
                height: 80px;
            }

            section {
                height: auto;
                padding: 20px 0;
            }
        }

        @media (max-width: 480px) {
            .joc {
                grid-template-columns: repeat(4, 70px) !important;
                gap: 8px !important;
            }

            .card {
                width: 70px;
                height: 70px;
            }

            .flex.justify-center.items-center.gap-6 {
                gap: 8px !important;
                flex-wrap: wrap;
                padding: 0 10px;
            }

            .nivelul,
            .time,
            .scor {
                font-size: 0.875rem;

                padding: 8px 12px !important;
            }
        }

        @media (max-width: 350px) {
            .joc {
                grid-template-columns: repeat(4, 60px) !important;
            }

            .card {
                width: 60px;
                height: 60px;
            }
        }


 .container1 {
            display: flex;
            
            width: 100%;
        }

  /* ----------------------------------- */
    /* ----------------------------------- */
    /* ----------------------------------- */
    /* ----------------------------------- */
    /* ----------------------------------- */
    /* ---------Pentru pagina games --------- */




      .container {
            display: flex;
            gap: 5px;
            width: 70%;
        }

        .card {
            transition: 0.4s ease-in-out;
            flex: 1;
        }

        .card:hover {
            flex: 2;
            cursor: pointer;
        }







  /* ----------------------------------- */
    /* ----------------------------------- */
    /* ----------------------------------- */
    /* ----------------------------------- */
    /* ----------------------------------- */
    /* ---------Pentru pagina true false game --------- */



.corect {
    transform: scale(1.25);
    background-color: #22c55e;
    transition: transform 0.3s ease;
}



  /* ----------------------------------- */
    /* ----------------------------------- */
    /* ----------------------------------- */
    /* ----------------------------------- */
    /* ----------------------------------- */
    /* ---------Pentru pagina documentati shufle  --------- */


   @media (max-width: 48rem) {
            .cartonase {
                grid-template-columns: repeat(3, minmax(0, 1fr));
            }
        }


        
  /* ----------------------------------- */
    /* ----------------------------------- */
    /* ----------------------------------- */
    /* ----------------------------------- */
    /* ----------------------------------- */
    /* ---------Pentru pagina true false game --------- */