.wifi-process-section {
        background-color: #f7f9fd; /* Very light blue background */
        color: #333;
        
    }

 

    /* --- Process Flow Structure --- */
    .process-flow-container {
        position: relative;
        
    }

    /* Horizontal Timeline Line */
    .process-line {
        position: absolute;
        top: 50%; /* Position line roughly in the center of the steps */
        left: 0;
        right: 0;
        height: 1px;
        background-color: rgb(0 0 0 / 9%); /* Light blue line */
        z-index: 1;
    }

    /* Step Containers */
    .process-step {
        transition: all 0.3s;
        position: relative;
        z-index: 2; /* Ensures steps are above the line */
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0 10px;
    }

    /* Content Styling */
    .step-content {
       height:206px;
        padding: 20px;
        text-align: left;
        background-color: transparent;
        transition: background-color 0.3s ease;
        border-left: 1px solid rgb(0 0 0 / 9%);
        z-index: 1;
  transition: all 0.3s;
    }

    .step-content.above-line {
       margin-left: 3%;
    }

    .step-content.below-line {
       margin-left: -5%;
      padding-top: 12%;
    }

    .process-step h3 {
        font-size: 22px;
    
        color: #242E37;
    }
    .process-step p{
color:#7e888e;
    }
.process-step:hover .step-content {
    background: linear-gradient(
        101deg,
        rgba(203, 23, 126, 1) -170%,
        rgb(203 23 126 / 0%) 38%,
        rgb(203 23 126 / 0%) 100%
    );
   
    border-left: 1px solid #CB177E;
    /* box-shadow: 0 8px 18px rgba(0, 0, 0, 0.1); */
    /* transform: translateY(-5px); */
    transition: all 0.4s ease;
}

/* Apply same gradient with animation on hover */
.process-step:hover .step-number-circle {
    background-color: #CB177E;
        color: #ffffff;
         width: 50px;
        height: 50px;
        z-index: 3;
    /* box-shadow: 0 0 10px rgba(203, 23, 126, 0.4); */
}

/* Gradient movement animation */
@keyframes gradientSweep {
    from {
        background-position: left center;
    }
    to {
        background-position: right center;
    }
}
.process-description{
   color:#7e888e;
}


    /* Numbered Circles */
    .step-number-circle {
        width: 55px;
        height: 55px;
        border-radius: 50%;
        background-color: #ffffff;
        color: #00A8E1;
        
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 30px;
       
        position: absolute; /* Positioned relative to the line */
         transition: all 0.3s;
        z-index: 3;
    }
    /* .process-row-top .step-number-circle:hover,.process-row-bottom .step-number-circle:hover {
        background-color: #CB177E;
        color: #ffffff;
         width: 50px;
        height: 50px;
        z-index: 3;
    } */

    /* Position circles for the top row */
    .process-row-top .step-number-circle {
        bottom: -9%; /* Half of circle height to sit on the line */
        left: 0;
        transform: translateX(-8%);
    }

    /* Position circles for the bottom row */
    .process-row-bottom {
        padding-left: 14.285%; /* Adjust to shift 3 items under 4, mimicking offset */
        padding-right: 14.285%;
        margin-top: 0; /* Align with the line */
    }

    .process-row-bottom .step-number-circle {
        top: -25px; /* Half of circle height to sit on the line */
        left: 0;
        transform: translateX(-65%);
    }
    
.border-lgt-gry{
    border: 1px solid #7e7e7e30;
}
.smb-solution-row{
    .sctitle {
        .des-sec{
            font-size:15px !important;
            color:#7E7E7E !important;
        }
    }
     .sctitle{
        transition: all 0.3s;
     }
  .sctitle:hover{
        box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px !important;
        background-color: #ffffff !important;
    }
}
.brd-rd-pink{
    border: 1px solid #CB177E;
    padding: 12px;
    border-radius: 10px;
    img{
        width: 30px;
    height: 30px;
    }
}
   .why-smb-wrpr{
    .left-icon-txt{
        .gry-txt{
            color:#2E373A;
            font-size:20px;
        }
    } 
   }

.ln-height-150{
            line-height:150% !important;
        }

   .p-20{
    padding:20px;
   }
   .inoutdoor{
    .roundedb-10{
        border-radius:20px !important;
    }
    .border-lgt-gry{
          transition: all 0.3s;
        img{
border-radius:20px 20px 0 0 !important;
        }
        
    }
    :hover{
        .border-lgt-gry{
            box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px !important;
            background-color: #ffffff !important;
        }
    }
   }
   @media  (max-width:1299px) {
    .process-step {
        h3{
            font-size:20px;
        }
        p{
            font-size:14px;
        }
    }
    

.step-content {
    height: 100% !important;
    
   }
}
@media(max-width:991.98px){
    .process-row-top .step-number-circle{
       top: 0;
   

    }
    .step-number-circle {
        width: 40px;
    height: 40px;
    font-size: 22px;
    }
    .step-content{
        padding-left: 2rem !important;
    }
    .step-content.above-line {
    margin-left: 1% !important;
}
}
.dfrer{
    .swiper-pagination {
    position: relative !important;
    margin-top: 20px;
    text-align: center;
}

}