.text-n{
    font-size: 20px;
    /* font-family: "Public Sans", Helvetica; */
    font-family: "Josefin Sans", sans-serif;
    font-weight:400;
    color:#472C4C;
    line-height: 2.5rem;
}
.devcard{
    background: linear-gradient( rgba(255, 255, 255, 0.14) 14%, rgba(255, 255, 255, 0.6) 60%); /* Added gradient for glass effect */
    border-radius: 25px;
    border: 0;
    border-top:3px solid purple;
    border-bottom:3px solid purple;
    box-shadow: 4px 4px 10px rgba(118, 60, 172, 0.12); /* Updated box shadow color */
   /* height:100% */
}
.ctitle{
    font-size: 20px;
    /* font-family: "Public Sans", Helvetica; */
    font-family: "Josefin Sans", sans-serif;
    font-weight:700;
    color:#552fb1;
}
.ctext{
    font-size: 16px;
    /* font-family: "Public Sans", Helvetica; */
    font-family: "Josefin Sans", sans-serif;
    font-weight:600;
    color:#823491c4;
}

.process-card{
    border:none
}
.inner-card-dev{
    background: linear-gradient(0deg, rgb(165 171 234 / 9%) 4.13%, rgba(255, 255, 255, 0.6) 80.29%);
    border: 0;
    border-left: 2px solid purple;
    border-right: 2px solid purple;
}
.card .cu-pr-header{
    background: linear-gradient(0deg, rgb(165 171 234 / 9%) 4.13%, rgba(255, 255, 255, 0.6) 80.29%);
    border-radius: 50px;
    border-top: none;
    border: 1px solid #FFFFFF; /* Unchanged */
    backdrop-filter: blur(19.027973175048828px); /* Updated backdrop filter */
    box-shadow: 0px 34px 40px 0px #4A55BC23; /* Unchanged */
}
.cu-pr-title{
    font-size: 18px;
    /* font-family: "Public Sans", Helvetica; */
    font-family: "Josefin Sans", sans-serif;
    font-weight:500;
    color:#080808;
}
.cu-pr-text{
    font-size: 16px;
    /* font-family: "Public Sans", Helvetica; */
    font-family: "Josefin Sans", sans-serif;
    font-weight:400;
    color:#667085;
}

/* CSS for circular image container */
.circular-container {
    width: 60px; /* Adjust size as needed */
    height: 60px; /* Adjust size as needed */
    border-radius: 50%; /* Makes the container circular */
    overflow: hidden; /* Ensures the image fits within the circle */
    margin: 0 auto; /* Centers the container */
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(118, 60, 172, 0.04);
}

/* CSS for the circular image */
.circular-image {
    /* width: 100%; Ensures the image fills the container */
    height: auto; /* Maintains aspect ratio */
}

/* CSS for the dotted line */
.dotted-line {
    border-top: 1px dotted #ccc; /* Dotted line style */
    margin: 10px 0; /* Space above and below the line */
}

.custom-cloud{
    align-items: center;
    text-align: center;
    background: linear-gradient(5deg, rgb(82 92 196 / 13%) 4.13%, rgba(255, 255, 255, 0.6) 80.29%);
    /* border: 1px solid #FFFFFF;  */
    backdrop-filter: blur(19px); /* Added backdrop filter */
    box-shadow: 0px 34px 40px 0px #4A55BC23; /* Added box shadow */
    border-radius: 40px;
    height:100%;
    border:0;
    border-left:3px solid purple;
    border-right:3px solid purple;
}
.out-circle{
    /* border:1px solid black; */
    border-radius:50px;
    width: 70px;
    height:70px;
    padding:12px;
    background:rgba(118, 60, 172, 0.02); 
}
.in-circle{
    display: flex; /* Added to enable flexbox */
    align-items: center; /* Centers the image vertically */
    justify-content: center; /* Centers the image horizontally */
    /* border:1px solid black; */
    border-radius:50px;
    width:45px;
    height:45px;
    background:rgba(118, 60, 172, 0.09);
}
.out-circle-new{
    /* border:1px solid black; */
    border-radius:50px;
    width: 70px;
    height:70px;
    padding:12px;
    background:rgba(255,255,255,0.7); 
}
.in-circle-new{
    display: flex; /* Added to enable flexbox */
    align-items: center; /* Centers the image vertically */
    justify-content: center; /* Centers the image horizontally */
    /* border:1px solid black; */
    border-radius:50px;
    width:45px;
    height:45px;
    background:rgba(118, 60, 172, 0.09);
}
.cust-img{
    width:1.6rem;
    align-content: center; /* This property is not necessary for centering */
    justify-content: center; /* This property is not necessary for centering */
    text-align: center; /* This property is not necessary for centering */
}
.cl-title{
    font-size: 20px;
    /* font-family: "Public Sans", Helvetica; */
    font-family: "Josefin Sans", sans-serif;
    font-weight:500;
    color:rgba(8, 8, 8, 0.8);
}
.cl-text{
    font-size: 16px;
    /* font-family: "Public Sans", Helvetica; */
    font-family: "Josefin Sans", sans-serif;
    font-weight:400;
    color:#667085;
}
.soft-card{
    display:flex;
    justify-content: center;
    align-items: center;
    border-radius: 15px;
    padding:10px;
    background: linear-gradient(5deg, rgb(82 92 196 / 13%) 4.13%, rgba(255, 255, 255, 0.6) 80.29%);
    border: 1px solid #FFFFFF; /* Added border */
    backdrop-filter: blur(19px); /* Added backdrop filter */
    box-shadow: 0px 34px 40px 0px #4A55BC23; /* Added box shadow */
}
.cust-soft-title{
    font-size: 18px;
    /* font-family: "Public Sans", Helvetica; */
    font-family: "Josefin Sans", sans-serif;
    font-weight:600;
    color:#080808;
}
.cust-tech-img{
    width:5rem;
}
.circle{
    background: linear-gradient(112.17deg, #E740EB 7.16%, #3B199C 98.02%);
    /* border: 1px solid; Unchanged */
    border-image-source: linear-gradient(87.32deg, #E740EB 3.35%, #3B199C 85.86%);
    background:(87.64deg, rgba(218, 107, 59, 0.2) 5.98%, rgba(185, 71, 238, 0.2) 86.28%);
    backdrop-filter: blur(80px); /* Added backdrop filter */
    width:70px; /* Unchanged */
    height:70px; /* Unchanged */
    border-radius:50px; /* Unchanged */
    position:absolute; /* Unchanged */
    z-index:1; /* Unchanged */
    margin-left:10rem;
    margin-top:-2rem;
    display:flex;
    justify-content: center;
    align-items: center;
}
.circle-new{
    background: linear-gradient(112.17deg, #E740EB 7.16%, #3B199C 98.02%);
    /* border: 1px solid; Unchanged */
    border-image-source: linear-gradient(87.32deg, #E740EB 3.35%, #3B199C 85.86%);
    background:(87.64deg, rgba(218, 107, 59, 0.2) 5.98%, rgba(185, 71, 238, 0.2) 86.28%);
    backdrop-filter: blur(80px); /* Added backdrop filter */
    width:70px; /* Unchanged */
    height:70px; /* Unchanged */
    border-radius:50px; /* Unchanged */
    position:absolute; /* Unchanged */
    z-index:1; /* Unchanged */
    margin-left:7rem;
    margin-top:-2rem;
    display:flex;
    justify-content: center;
    align-items: center;
}
.cust-sys-img{
    width:2rem
}

/* Media queries for additional responsiveness */
@media (max-width: 768px) {
    .circle {
        margin-left:10rem;
        margin-top:-2rem;
    }
    .circle-new{
        margin-left:12rem;
    }
}

@media (max-width: 480px) {
    .circle {
        margin-left:6rem;
        margin-top:-2rem;
    }
    .circle-new{
        margin-left:9rem;
    }
    .idea-text{
        font-size:22px !important
    }
    .idea-text-2{
        font-size:12px !important
    }
}
.mob-dev-card {
    position: relative; /* Ensure the card is positioned relative */
    overflow: visible; /* Ensure overflow is visible to show circles */
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.14) 4.13%, rgba(255, 255, 255, 0.6) 80.29%); /* Updated background */
    border: 1px solid #FFFFFF; /* Added border */
    backdrop-filter: blur(19.027973175048828px); /* Added backdrop filter */
    box-shadow: 0px 34px 40px 0px #4A55BC23; /* Added box shadow */
    border-radius: 32px;
}

.mob-out-circle{
    /* border: 1px solid black; */
    width:60px;
    height:60px;
    padding:9px;
    border-radius:50px;
    position: absolute; /* Unchanged */
    display: flex; /* Added to enable flexbox for inner circle */
    justify-content: center; /* Centers the inner circle */
    align-items: center; /* Centers the inner circle */
    top: -35px; /* Adjust this value to move the circle up */
    left: 50%; /* Centers the circle horizontally */
    transform: translateX(-50%); /* Adjusts for the width of the circle */
    background: rgba(255, 255, 255, 0.7);
}
.mob-in-circle{
    /* border: 1px solid black; */
    width:40px;
    height:40px;
    border-radius: 50px;
    position: absolute; /* Unchanged */
    left: 50%; /* Centers the inner circle horizontally */
    transform: translateX(-50%); /* Adjusts for the width of the inner circle */
    background:#F9F5FF;
    display: flex;
    justify-content: center;
    align-items: center;
}
.cust-mob-img{
    width:1.7rem
}
.mob-dev-text{
    font-size: 16px;
    /* font-family: "Public Sans", Helvetica; */
    font-family: "Josefin Sans", sans-serif;
    font-weight:600;
    color:#080808;
    text-align: center;
}

.idea-card{
    border-radius:70px;
    background: linear-gradient(112.17deg, rgba(231, 64, 235, 0.15) 7.16%, rgba(59, 25, 156, 0.15) 98.02%); /* Updated background */
    border: 1px solid; /* Added border */
    border-image-source: linear-gradient(87.32deg, #E740EB 3.35%, #472C4C 85.86%),
                        linear-gradient(87.64deg, rgba(218, 107, 59, 0.2) 5.98%, rgba(185, 71, 238, 0.2) 86.28%); /* Added border image source */
    backdrop-filter: blur(15px); /* Updated backdrop filter */
    box-shadow: 0px 4px 30px 0px #2C125024; /* Updated box shadow */
}
.idea-text{
    font-size: 40px;
    /* font-family: "Public Sans", Helvetica; */
    font-family: "Josefin Sans", sans-serif;
    font-weight:800;
    color:#472C4C;
}
.idea-text-2{
    font-size: 20px;
    /* font-family: "Public Sans", Helvetica; */
    font-family: "Josefin Sans", sans-serif;
    font-weight:600;
    color:#763CAC;
}

.cust-mob-img{
    width: 3rem;
}
.mob-dev-card-2{
    position: relative;
    overflow: visible;
    background: linear-gradient(135deg, #6441A5, #2a0845);
    backdrop-filter: blur(19.027973175048828px);
    box-shadow: 0px 34px 40px 0px #4A55BC23;
    border-radius: 40px;
    border-left: 5px solid purple;
    border-right: 5px solid purple;
    transform: translateY(0);
    transition: all 0.3s ease-in-out; /* Add smooth transition for all properties */
}
.mob-dev-card-2:hover{
    border-left: 5px solid rgb(231.39, 63.6, 234.81);
    border-right: 5px solid rgb(231.39, 63.6, 234.81);
    transform: translateY(-10px); /* Add slight lift effect */
    box-shadow: 0px 44px 50px 0px #4A55BC40; /* Enhanced shadow on hover */
}
.mob-out-circle-2{
    width:60px;
    height:60px;
    padding:9px;
    border-radius:50px;
    position: absolute; /* Unchanged */
    display: flex; /* Added to enable flexbox for inner circle */
    justify-content: center; /* Centers the inner circle */
    align-items: center; /* Centers the inner circle */
    top: -35px; /* Adjust this value to move the circle up */
    left: 50%; /* Centers the circle horizontally */
    transform: translateX(-50%); /* Adjusts for the width of the circle */
    background: rgba(255, 255, 255, 0.7);
}
.mob-dev-text-2{
    font-size: 16px;
    /* font-family: "Public Sans", Helvetica; */
    font-family: "Josefin Sans", sans-serif;
    font-weight:600;
    color:rgb(255,250,250);
    text-align: center;
}
.cust-btn-readmore{
    background:linear-gradient(135deg, rgb(231.39, 63.6, 234.81) 0%, rgb(58.91, 24.73, 156.19) 100%);
    color:white;
}
.cust-btn-readmore:hover{
    background:linear-gradient(135deg, #f953c6 100%, #b91d73);
    color:white;
}
.row .services-head {
    font-size: 42px;
    font-weight: 600;
    color: #472C4C;
    font-family: "Josefin Sans", sans-serif;
}