/* ========== RESET ========== */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
.mt-50{
  
}

    .gradient-bg1{
     background: #3264f5; 
    background: -moz-linear-gradient(left, #3264f5 2%, #7004bc 82%);
     background: -webkit-linear-gradient(left, #3264f5 2%,#7004bc 82%); 
    background: linear-gradient(to right, #3264f5 2%,#7004bc 82%);
}

.gradient-bg2{
    background: #237afe;
    background: -moz-linear-gradient(left, #237afe 2%, #03a9f5 82%);
    background: -webkit-linear-gradient(left, #237afe 2%, #03a9f5 82%);
    background: linear-gradient(to right, #237afe 2%, #03a9f5 82%);
}
.gradient-text1{
    background: #f033b5;
    background: -moz-linear-gradient(left, #f033b5 2%, #f2a2af 82%);
    background: -webkit-linear-gradient(left, #f033b5 2%,#f2a2af 82%);
    background: linear-gradient(to right, #f033b5 2%,#f2a2af 82%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f033b5', endColorstr='#f2a2af',GradientType=1 );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.gradient-text2{
    background: #3264f5;
    background: -moz-linear-gradient(left, #3264f5 2%, #7004bc 82%);
    background: -webkit-linear-gradient(left, #3264f5 2%,#7004bc 82%);
    background: linear-gradient(to right, #3264f5 2%,#7004bc 82%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.shape-left{
    position: absolute;
    left: -340px;
    top: -260px;
    text-align: right;
    max-width: 800px;
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}

.shape-right {
    position: absolute;
    right: -400px;
    bottom: 20px;
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}

.shape-left{
    left: -250px;
    top: -180px;
    max-width: 900px;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

.shape-right {
    right: -220px;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

@media screen and (max-width:1366px){
    .shape-right {
        right: -250px;
        max-width: 400px;
    }

    .shape-right {
        right: -120px;}
        }

        @media screen and (max-width:767px){
              .shape-right{
        display: none;
    }

        }

        .holder{
    position: fixed;
    left: 0px;
    top: 0px;
    right: 0px;
    width: 100%;
    overflow: hidden;
    bottom: 0px;
    color: rgb(255, 255, 255);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    line-height: 1.5;
    opacity: 1;
    z-index: 98;
    transition: all 0.4s ease-out 0s;
}


    

    /* ========== DEMO SECTION ========== */

    section h1 {
      font-size: 2rem;
      margin-bottom: 15px;
    }

    section p {
      line-height: 1.6;
      color: #333;
      font-weight: 100;
    }

/* Banner */
.matrix-slider {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 500px;
}

.slider-track {
  display: flex;
  width: 300%;
  height: 100%;
  transform: matrix(1, 0, 0, 1, 0, 0);
  transition: transform 1.2s ease-in-out;
}

.slide {
  width: 100%;
  height: 100%;
  position: relative;
  flex-shrink: 0;
  overflow: hidden;
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s ease;
}

.caption {
  position: absolute;
  bottom: 30px;
  left: 50px;
  font-size: 24px;
  color: #fff;
  text-shadow: 0 0 10px rgba(0,0,0,0.6);
}


.matrix-banner {
  width: 100%;
  height: 500px;
  overflow: hidden;
  position: relative;
}

.banner {
  width: 100%;
  height: 100%;
  position: relative;
}

.matrix-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: matrix(1, 0, 0, 1, 0, 0);
  animation: matrixMove 6s ease-in-out infinite alternate;
}


/* Keyframes to move 50px left & right using matrix() */
@keyframes matrixMove {
  0% {
    transform: matrix(1, 0, 0, 1, 0, 0); /* Normal position */
  }
  50% {
    transform: matrix(1, 0, 0, 1, 50, 0); /* Move right 50px */
  }
  100% {
    transform: matrix(1, 0, 0, 1, -50, 0); /* Move left 50px */
  }
}


.motion-banner {
  position: relative;
  width: 100%;
  height: 500px;
  overflow: hidden;
}

.motion-image {
  width: 100%; /* slight zoom */
  height: 100%;
  object-fit: cover;
  transform-origin: center;
  animation: matrixMotion 10s ease-in-out infinite alternate;
  filter: brightness(1.1) contrast(1.05);
}

.caption {
  position: absolute;
  bottom: 40px;
  left: 60px;
  color: #fff;
  font-size: 28px;
  text-shadow: 0 0 10px rgba(0,0,0,0.5);
}


.simple-banner {
  position: relative;
  width: 100%;
  height: 500px;
  overflow: hidden;
}

.move-image {
/*  width: 100%;
  height: 100%;
  object-fit: cover;*/
  transform: matrix(1, 0, 0, 1, 0, 0);
  animation: moveLR 6s ease-in-out infinite alternate;
}



/* 🔹 Keyframes: only left & right movement up to 50px */
@keyframes moveLR {
  0% {
    transform: matrix(1, 0, 0, 1, 0, 0); /* start */
  }
  100% {
    transform: matrix(1, 0, 0, 1, 50, 0); /* move right 50px */
  }
}

/* 🔹 Keyframes for Matrix-style drift */
@keyframes matrixMotion {
  0% {
    transform: matrix(1, 0.05, -0.05, 1, -50, 0) scale(1);
  }
  25% {
    transform: matrix(1, 0.02, -0.02, 1, 0, 20) scale(1.05);
  }
  50% {
    transform: matrix(1, -0.05, 0.05, 1, 50, 0) scale(1.08);
  }
  75% {
    transform: matrix(1, -0.02, 0.02, 1, 0, -20) scale(1.05);
  }
  100% {
    transform: matrix(1, 0.05, -0.05, 1, -50, 0) scale(1);
  }
}