/*----hero-banner-start----*/

.hompage-hero {
   padding-block: 70px;
   background: url(https://static.wixstatic.com/media/59d7d5_9df9ff04d55043179cfc4dad1f82dce1~mv2.png/v1/fill/w_1000,h_563,al_c,q_90,usm_0.66_1.00_0.01/59d7d5_9df9ff04d55043179cfc4dad1f82dce1~mv2.png) no-repeat center / cover fixed;
   height: 100%;
   width: 100%;
   z-index: 0;
   position: relative;
   overflow: hidden;
}

.hompage-hero:after {
   height: 100%;
   width: 100%;
   inset: 0;
   background: #000000c2;
   content: '';
   position: absolute;
   z-index: -1;
}

.line-animated {
   width: 68%;
   height: 100%;
   position: absolute;
   left: 50%;
   top: 0;
   transform: translateX(-50%);
   z-index: 99;
   pointer-events: none;
}

.line-animated>span {
   position: absolute;
   top: 0;
   left: 0;
   width: 1px;
   height: 100%;
   background: rgba(255, 255, 255, 0.1);
}

.line-animated>span::before {
   content: "";
   position: absolute;
   left: 0;
   width: 1px;
   height: 100px;
   background-image: linear-gradient(0deg, #fff, transparent);
   animation-duration: 3s;
   animation-timing-function: linear;
   animation-iteration-count: infinite;
   animation-name: bottom-top;
}

.line-animated>span:nth-child(2) {
   left: 25%;
}

.line-animated>span:nth-child(3) {
   left: 50%;
}

.line-animated>span:nth-child(4) {
   left: 75%;
}

.line-animated>span:nth-child(5) {
   left: 100%;
}

.line-animated>span:nth-child(2)::before,
.line-animated>span:nth-child(4)::before {
   animation-name: top-bottom;
}

@keyframes top-bottom {
   from {
      top: 0;
   }

   to {
      top: 100%;
   }
}

@keyframes bottom-top {
   from {
      top: 100%;
   }

   to {
      top: 0;
   }
}

.hompage-hero .hero-content :is(div, h1, p) {
   color: var(--white);
}

.flex-hero-rev {
   gap: 10px 20px;
}


.flex-col-rev-Cta {
   background: rgb(255 241 219) url(https://dev253.kodesolution.com/webtec/wp-content/uploads/2025/04/bg-shape.png) no-repeat center center / contain;
   height: 100%;
   width: 100%;
   border-radius: var(--radius);
   padding: 30px;
   align-items: center;
   text-align: center;
   gap: 20px;
   justify-content: center;
}



/*//responsive-query=================start*/

@media screen and (min-width: 1024px) {
   .flex-col-prcs-card:hover:after {
      transition: all 0.3s ease-in-out;
      transform: unset;
   }
}

@media (width <=1024px) {
   .hompage-hero {
      padding-block: 30px;
   }
}