/* Floating animation for banners */
@keyframes float {
  0%,
  100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}
.bgimage{
  animation: fadeIn 1s easin forwards;
}
@keyframes fadeIn {
  from { opacity: 0; transform: scale(1.05); }
  to   { opacity: 1; transform: scale(1); }
}

.float-animation {
  animation: float 6s ease-in-out infinite;
}

input{
  background: transparent;
  border: 1px gray solid;
}
textarea{
  background: transparent;
    border: 1px gray solid;

}
select{
  background-color: #141414;
    border: 1px gray solid;

}

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

.animate-scroll-right {
  animation: scroll-right 20s linear infinite;
}
.animate-scroll-left {
  animation: scroll-left 20s linear infinite;
}

.cards {
  background: #141414;
  border-radius: 20px;
  cursor: pointer;
  transition: transform 0.3s ease; /* optional smooth scaling */

}
.cards2 {
  background: rgb(20, 20, 20);
  border-radius: 20px;
  cursor: pointer;
  transition: transform 0.3s ease; /* optional smooth scaling */
}

.cards:hover {
  animation: bounce 0.5s ease-in-out forwards; /* match the keyframes name */
}

@keyframes bounce {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
/* Smooth scroll */
html {
  scroll-behavior: smooth;
}
.glass{
/* From https://css.glass */
background: rgba(255, 255, 255, 0.23);
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(9.8px);
-webkit-backdrop-filter: blur(9.8px);
border: 1px solid rgba(255, 255, 255, 0.3);
}
/*
utilcolor{
  #037eb5 dark blue
  #d3de69 primary green
  ##8fcfe8 pri blue
}
  */

p{
  font-size: 30px;
}
@keyframes scroll-right {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

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

.animate-scroll-right {
  animation: scroll-right 25s linear infinite;
}

.animate-scroll-left {
  animation: scroll-left 25s linear infinite;
}
 @keyframes scroll {
            0% { transform: translateX(0); }
            100% { transform: translateX(calc(-250px * 9)); }
        }
        
        .slider {
            height: 100px;
            margin: auto;
            overflow: hidden;
            position: relative;
            width: 100%;
        }
        
        .slider::before,
        .slider::after {
            content: "";
            height: 100px;
            position: absolute;
            width: 100px;
            z-index: 2;
        }
        
        .slider::after {
            right: 0;
            top: 0;
            transform: rotateZ(180deg);
        }
        
        .slider::before {
            left: 0;
            top: 0;
        }
        
        .slider-track {
            animation: scroll 40s linear infinite;
            display: flex;
            width: calc(250px * 18);
        }
        
        .slide {
            height: 100px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 10px;
        }
        
        .slide img {
            max-height: 60px;
            width: auto;
        }