/*---hero-start*/

.hompage-hero {
   padding-block: 70px;
   background: url(https://t4.ftcdn.net/jpg/04/88/97/77/360_F_488977723_TxnJAl6jcX3tWdgHphJTdNhrFytlNMyJ.jpg) 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-prcs-card{
               padding: 30px; 
               position: relative;
               gap:10px;
               margin-top: 20px;
            }

            .flex-col-prcs-card .number {
    position: absolute;
    right: 20px;
    bottom: 20px;
 }


/*layout-css*/

/*for-tabs*/

.tabsCon .tab {
   position: relative;
   gap: 20px;
   flex-wrap: wrap;
   justify-content: center;
   margin-bottom: 30px;
}

.tabsCon .tab button {
   padding: 10px 25px;
   white-space: nowrap;
}

.flex-breadcrumbs{
   gap: 10px 30px;
   flex-wrap: wrap;
}

/*---------custom-form-------*/

.form-container .flex-col-info-col{
            background: var(--white);
            gap: 10px;
            height: 100%;
         }

         .form-container .flex-col-info-col a{
            overflow-wrap: anywhere;
            text-align: center;
         }

         .flex-social{
            gap: 10px;
            flex-wrap: wrap;
         }

         .flex-social li a{
            display: flex;
            align-items: center;
            justify-content: center;
            height: 35px;
            width: 35px;
         }

         .form-container .flex-col-info-col .info-icn {
    width: fit-content;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
}

.flex-col-curve-card{
               position: relative;
               padding: 40px;
               border-radius: 30px;
               z-index: 0;
            }

            .flex-col-curve-card p{
               margin-bottom: 0;
            }

            .grid-content-card {
               padding: 30px;
               gap: 20px;
               grid-template-columns: 13% auto;
               border-radius: var(--radius);
            }

            .flex-icon{
               height: 70px;
               width: 70px;
               flex-shrink: 0;
               justify-content: center;
            }

            .grid-content-card :is(.h4, .h3, h4, h3){
               margin-bottom: 10px;
            }

            .product-table {
   width: 100%;
   overflow-x: auto
}

table td,
th {
   text-align: left;
   padding: 10px 15px
}

table tr [class*="-btn"] {
   justify-content: center;
   width: 100%
}

table [class*="flex-"]{
   gap: 15px;
}

.sticky-col{
   position: sticky;
   top: 100px;
}


/*style-css*/

/*for-tabs*/

.tabsCon .tab button {
   cursor: pointer;
   background: var(--white);
   border: 1px solid var(--muted);
   border-radius: 90px;
   font-size: 16px;
}

.tabsCon .tabcontent {
   display: none;
   animation: fadeEffect 1s;
}

.tabsCon .tab button:hover {
   background: #dddddd54;
   color: var(--sc);
}

.tabsCon .tab button.active {
   background: var(--sc);
   border: 1px solid var(--sc);
   color: var(--white);
}

@keyframes fadeEffect {
   from {
      opacity: 0;
   }

   to {
      opacity: 1;
   }
}


.flex-col-curve-card:after{
               content: '';
               position: absolute;
               right: 0;
               top: 0;
               height: 110px;
               width: 110px;
               background: url('data:image/svg+xml,<svg width="111" height="111" viewBox="0 0 111 111" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill="%23fff" clip-rule="evenodd" d="M0 0c19.33 0 35 15.67 35 35v6c0 19.33 15.67 35 35 35h6c19.33 0 35 15.67 35 35V0z"/></svg>') no-repeat;
               transition: all .3s ease;
            }

            .flex-col-curve-card:hover:after{
               transition: all .3s ease;
               height: 0%;
               width: 0%;
            }

            .dark-curve-card,
            .light .flex-icon,
            .dark-grid-content-card{
               background: var(--sc);
            }

            .light-curve-card,
            .lyt-grid-content-card{
               background: #f7f7f7;
            }

            .dark-curve-card :is(h3, .h3, p, .h4, h4){
               color: var(--white);
            }

            .dark .flex-icon{
               background: var(--white);
            }

            table {
   border-collapse: collapse;
   width: 100%;
   border: 1px solid var(--muted);
}

table tr:nth-child(odd) {
   background-color: #f3f3f38c
}

table td,
table th {
   border-top: 1px solid var(--muted);
   line-height: 1.5
}

table tr th {
   background-color: var(--pc);
   color: var(--white);
}


/*---------custom-form-------*/

.form-container{
            background: #fafafa;
         }
         
         .form-container,
         .form-container .flex-col-info-col{
            padding: 30px;
            border: 1px solid var(--muted);
            border-radius: var(--radius);
         }

         .form-container .flex-col-info-col a:hover{
            text-decoration: underline;
         }

         .flex-social li a{
            border-radius: 50%;
            border: 1px solid var(--muted);
            transition: all .4s;
         }

         .flex-social li a:hover{
            background: var(--pc);
            transition: all .4s;
            border: 1px solid var(--pc);
         }

         .flex-social li a:hover svg{
            fill: var(--white);
            transition: all .4s;
         }

         .form-container .flex-col-info-col .info-icn {
            background: #ff31151a;
            border-radius: 50%;
         }

/*--------responsive-css*/

@media (width <=1024px) {

   .hompage-hero {
      padding-block: 30px;
   }

   .form-container, .form-container .flex-col-info-col{
      padding: 15px !important;
   }

   .form-container, .form-container [class*="row-gap"]{
      row-gap: 20px !important;
   }

   .tabsCon .tab {
      overflow-x: scroll;
      padding-bottom: 20px;
      flex-wrap: nowrap !important;
      justify-content: start !important;
   }
}