html, body { height: 100%; }

    /* ---------- Keyframes for robust animations ---------- */
    @keyframes enter-left { from { transform: translateX(-100%); opacity: .6; } to { transform: translateX(0); opacity: 1; } }
    @keyframes enter-right { from { transform: translateX(100%);  opacity: .6; } to { transform: translateX(0); opacity: 1; } }
    @keyframes enter-up { from { transform: translateY(100%);  opacity: .6; } to { transform: translateY(0); opacity: 1; } }
    @keyframes enter-tl { from { transform: translate(-100%, -100%); opacity: .6; } to { transform: translate(0,0); opacity: 1; } }
    @keyframes enter-tr { from { transform: translate(100%, -100%);  opacity: .6; } to { transform: translate(0,0); opacity: 1; } }
    @keyframes zoom-in { from { transform: scale(1.05); opacity: 0; } to { transform: scale(1); opacity: 1; } }
    @keyframes side-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

    /* Utility classes for keyframes */
    .anim-left  { animation: enter-left var(--enter-ms,800ms) ease-out forwards; }
    .anim-right { animation: enter-right var(--enter-ms,800ms) ease-out forwards; }
    .anim-up    { animation: enter-up var(--enter-ms,800ms) ease-out forwards; }
    .anim-tl    { animation: enter-tl var(--enter-ms,800ms) ease-out forwards; }
    .anim-tr    { animation: enter-tr var(--enter-ms,800ms) ease-out forwards; }
    .anim-zoom  { animation: zoom-in var(--enter-ms,800ms) ease-out forwards; }




    @media (max-width: 767px) {
  .shrink-wrapper {
    transform: scale(0.8);
    transform-origin: top left;
    overflow-x: hidden;
  }
}

@media (min-width: 768px) {
  .shrink-wrapper {
    transform: scale(1);
  }
}

        
        @media (max-width: 640px) {
            .container {
                max-width: 90%;
            }
            .fade-out-overlay {
                width: 15%;
            }
        }

@keyframes colorShift {
            0% {
                background-position: 0% 50%;
            }
            50% {
                background-position: 100% 50%;
            }
            100% {
                background-position: 0% 50%;
            }

            
        }

@keyframes neon-sweep {
            0% {
                background-position: -100%;
            }
            100% {
                background-position: 100%;
            }
        }




        @keyframes colorShift2 {
    0% {
      border-color: rgb(17, 190, 138);
    }
    16.6% {
      border-color: rgb(17, 167, 115);
    }
    33.3% {
      border-color: rgb(6, 159, 77);
    }
    50% {
      border-color: rgba(5, 190, 125, 0.7);
    }
    66.6% {
      border-color: rgba(0, 255, 255, 0.7);
    }
    83.3% {
      border-color: rgba(7, 255, 156, 0.7);
    }
    100% {
      border-color: rgb(0, 128, 58);
    }
  }

  .animate-border {
    animation: colorShift2 4s ease infinite;
    border-width: 2px; 
    border-style: solid;
    
  }

  @keyframes scrollFadeLeft {
            0% {
                transform: translateX(100%);
                opacity: 1;
            }
            80% {
                transform: translateX(-20%);
                opacity: 1;
            }
            100% {
                transform: translateX(-100%);
                opacity: 0;
            }
        }


        @keyframes bounce-top {
      0% {
        transform: translateY(-100px);
        animation-timing-function: ease-in;
        opacity: 0;
      }
      38% {
        transform: translateY(0);
        animation-timing-function: ease-out;
        opacity: 1;
      }
      55% {
        transform: translateY(-40px);
        animation-timing-function: ease-in;
      }
      72% {
        transform: translateY(0);
        animation-timing-function: ease-out;
      }
      81% {
        transform: translateY(-20px);
        animation-timing-function: ease-in;
      }
      90% {
        transform: translateY(0);
        animation-timing-function: ease-out;
      }
      95% {
        transform: translateY(-10px);
      }
      100% {
        transform: translateY(0);
      }
    }




    @keyframes fade-slide-up {
      0% {
        opacity: 0;
        transform: translateY(100px);
      }
      100% {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes zoom-in-bounce {
      0% {
        transform: scale(0);
        opacity: 0;
      }
      60% {
        transform: scale(1.2);
        opacity: 1;
      }
      100% {
        transform: scale(1);
      }
    }



    @keyframes flip-in-diag-1-br {
      0% {
        transform: rotate3d(1, 1, 0, -180deg);
        opacity: 0;
      }
      100% {
        transform: rotate3d(1, 1, 0, 0deg);
        opacity: 1;
      }
    }

        .animate-bounce-top {
      animation: bounce-top 1.3s ease-out forwards;
    }



    .neon-sweep {
            background: linear-gradient(to right, rgba(11, 120, 20, 0.7), rgba(0,255,255,0.7), rgba(11, 120, 20, 0.7));
            background-size: 200% auto;
            animation: neon-sweep 3s infinite linear;
        }




        .animate-fade-slide-up {
      animation: fade-slide-up 1s ease-out forwards;
    }


    .shine {
            position: relative;
            overflow: hidden;
        }
        
        
        
      .shine::after {
            content: '';
            position: absolute;
            top: -100%;
            left: -100%;
            width: 200%;
            height: 200%;
            background: linear-gradient(120deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1));
            transform: rotate(45deg);
            transition: all 0.8s ease;
        }
        
        
        .shine:hover::after {
            top: 100%;
            left: 100%;
        }


        .multi-bg:hover {
            background: linear-gradient(90deg, rgb(17, 190, 138), rgb(17, 167, 115), rgb(6, 159, 77), rgba(5, 190, 125, 0.7), rgba(0,255,255,0.7), rgba(7, 255, 156, 0.7), rgb(0, 128, 58));
            background-size: 600% 600%;
            animation: colorShift 4s ease infinite;
        }

            
          .fade-out-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 20%; 
            height: 100%;
            pointer-events: none;
            background: linear-gradient(to right, #ffffff, rgba(255, 255, 255, 0));
        }

     
        .animate-scroll-fade-left {
            animation: scrollFadeLeft 15s linear infinite;
        }

 
        .scrolling-text {
            display: inline-block;
            white-space: nowrap;
        }
    
              .container2 {
            position: relative;
            overflow: hidden;
            width:auto;
            max-width: 600px; 
          
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

    .animate-flip-in-diag-1-br {
      animation: flip-in-diag-1-br 1.5s ease-out forwards;
    }