.section-dev{
    padding:60px
}
.whychoose{
    padding:60px;
}

.newHead{
    font-size: 16px;
    font-weight: 500;
    /* font-family: "Public Sans", Helvetica; */
    font-family: "Josefin Sans", sans-serif;
    color: #EF4444;
}
.para-text p{
    /* font-size: 17px; */
    font-weight: 500;
    /* font-family: "Public Sans", Helvetica; */
    font-family: "Josefin Sans", sans-serif;
    /* color: #A3A3A3; */
    font-size: 20px;
    background: linear-gradient(90.75deg, #ffffff 6.43%, rgb(211 230 243 / 83%) 86.66%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1.8;
    text-align: justify;
}
.shbtn{
    background: linear-gradient(145deg, rgba(231, 64, 235, 0.6), rgba(59, 25, 156, 0.7));
    color: #FFFFFF;
    border:none
}

.btn-custom-outline {
    position: relative;
    color: #000;
    background: transparent;
    border: none;
    overflow: hidden;
    z-index: 1;
}

.btn-custom-outline::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, #ff00ff, #00ff00, #0000ff, #ff0000);
    z-index: -1;
    background-size: 400%;
    animation: glowing 20s linear infinite;
}

.btn-custom-outline::after {
    content: '';
    position: absolute;
    inset: 0;
    background: transparent;
    z-index: -1;
    opacity: 0.9;
}

@keyframes glowing {
    0% { background-position: 0 0; }
    50% { background-position: 400% 0; }
    100% { background-position: 0 0; }
}

.section-sc {
    background: linear-gradient(to bottom, #0C0A09, #080808, #0C0A09);
    border-top: 1px solid #f2f0ef;
    color: #fff;
}
.sptext{
    font-size: 24px;
    font-weight: 400;
    /* font-family: "Public Sans", Helvetica; */
    font-family: "Josefin Sans", sans-serif;
    color: #D6D3D1;
}

.section-sc .row {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
}

.section-sc .row::-webkit-scrollbar { 
    display: none;  /* WebKit */
}

.section-sc .col-9 {
    flex: 0 0 auto;
}

@media (min-width: 576px) {
    .section-sc .row {
        justify-content: center;
    }
}

.dev-text p{
    font-size: 30px;
    font-weight: 500;
    /* font-family: "Public Sans", Helvetica; */
    font-family: "Josefin Sans", sans-serif;
    /* color: #472C4C; */
    color:#6e08b6;
}
.dev-head h2{
    font-size: 40px;
    font-weight: 600;
    /* font-family: "Public Sans", Helvetica; */
    font-family: "Josefin Sans", sans-serif;
}
.gradient-text {
    /* background: linear-gradient(45deg, rgba(231, 64, 235, 0.6), rgba(59, 25, 156, 0.7)); */
    /* background: linear-gradient(135deg, rgb(191 83 193 / 60%), rgb(66 0 255 / 70%));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent; */
    background: linear-gradient(90.75deg, #800080, #e891a0);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

}
.nav-tabs .nav-link {
    color: #472C4C;
    border: none;
    border-bottom: 3px solid transparent;
    font-size: 20px;
    font-weight: 500;
}
.nav-tabs .nav-link.active {
    background-color: transparent;
    border-bottom: 3px solid;
    border-image: linear-gradient(to right, #EF4444, #F97316) 1;
    background-image: linear-gradient(45deg, rgba(231, 64, 235, 0.6), rgba(59, 25, 156, 0.7));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.nav-tabs .nav-link.active::after {
    content: '';
    display: block;
    width: 100%;
    height: 3px;
    /* background-image: linear-gradient(to right, #EF4444, #F97316); */
    position: absolute;
    bottom: 0;
    left: 0;
}
.level-indicator {
    font-weight: bold;
}
.nav-link.active .level-indicator {
    color: #3B199C;
}
.nav-tabs-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.nav-tabs {
    flex-wrap: nowrap;
    white-space: nowrap;
}
.nav-tabs .nav-item {
    display: inline-block;
    float: none;
}
.headingclass{
    font-size: 26px;
    font-weight: 400;
    /* font-family: "Public Sans", Helvetica; */
    font-family: "Josefin Sans", sans-serif;
    margin-top:1.2rem;
    color:#472C4C;
   
}
.text-p{
    font-size: 16px;
    /* font-family: "Public Sans", Helvetica; */
    font-family: "Josefin Sans", sans-serif;
    font-weight:300;
    color:#472C4C;
    line-height: 1.8rem;
    text-align:justify
}
.subhead{
    font-size: 20px;
    /* font-family: "Public Sans", Helvetica; */
    font-family: "Josefin Sans", sans-serif;
    font-weight:500;
    color:#472C4C;
}
.level-icon{
    display: inline-flex; 
    justify-content: center; 
    align-items: center;
    width: 30px;
    height: 30px;
    border-radius:50%; 
    background: linear-gradient(45deg,rgba(231, 64, 235, 0.5) 20%, rgba(59, 25, 156, 0.6) 100%); /* Updated gradient with 50% and 90% opacity */
    color:#ffffff;
    font-size:15px;
    font-weight:800 !important
}
.litems{
    color:#472C4C;
    font-size:16px;
    font-weight: 500;
}
/* Add this CSS to your styles */
.circle-icon {
    display: inline-block;
    width: 20px; /* Adjust size as needed */
    height: 20px; /* Adjust size as needed */
    border-radius: 50%;
    background-color: #FFFFFF; /* Change color as needed */
    color: #472C4C; /* Change text color as needed */
    text-align: center;
    line-height: 20px; /* Center the > symbol vertically */
    margin-left: 5px; /* Space between text and circle */
    position: relative; /* Position relative for sliding effect */
    transition: transform 0.5s; /* Smooth transition for the transform property */
}

.btn:hover .circle-icon {
    transform: translateX(10px); /* Slide to the right on hover */
}

@keyframes slide {
    0% { transform: translateX(0); }
    100% { transform: translateX(10px); } /* Adjust distance as needed */
}
.dev-text-new{
    font-size:40px;
    /* font-family: "Public Sans", Helvetica; */
    font-weight:600;
    color:#763CAC;
}

.cu-card {
    border: none;
    border-radius: 0; /* Changed to 0 to remove border-radius */
}

.card .myimg{
    width:2rem;
}

.card {
    position: relative;
    overflow: hidden;
    margin: 5px; /* Added margin to create space between cards */
   
    transition: border-color 0.3s ease; /* Smooth transition for border color */
}

.border-bottom-right {
    position: relative; /* Required for positioning pseudo-elements */
}

.border-bottom-right::before,
.border-bottom-right::after {
    content: '';
    position: absolute;
    background-color: #763CAC; /* Border color */
    transition: all 0.3s ease; /* Smooth transition for hover effect */
}

.border-bottom-right::before {
    height: 3px; /* Height of the bottom border */
    width: 100%; /* Full width for bottom border */
    bottom: 0; /* Position at the bottom */
    left: 0; /* Align to the left */
}

.border-bottom-right::after {
    width: 3px; /* Width of the right border */
    height: 80%; /* Full height for right border */
    top: 0; /* Align to the top */
    right: 0; /* Position at the right */
}

.border-bottom-only {
    position: relative; /* Required for positioning pseudo-elements */
}

.border-bottom-only::before {
    content: '';
    position: absolute;
    background-color: #763CAC; /* Border color */
    height: 3px; /* Height of the bottom border */
    width: 100%; /* Full width for bottom border */
    bottom: 0; /* Position at the bottom */
    left: 0; /* Align to the left */
    transition: all 0.3s ease; /* Smooth transition for hover effect */
}

.card:hover .border-bottom-right {
    border-bottom: 2px solid #000; /* Change to your desired color */
    border-right: 2px solid #000; /* Change to your desired color */
    border-top: 3px solid #763CAC; /* Add top border on hover */
    border-left: 3px solid #763CAC; /* Add left border on hover */
    transition: border-color 0.3s ease; /* Added transition for smooth effect */
}

.card:hover .border-bottom-only {
    border-bottom: 2px solid #000; /* Change to your desired color */
    border-top: 3px solid #763CAC; /* Add top border on hover */
    border-left: 3px solid #763CAC; /* Add left border on hover */
    transition: border-color 0.3s ease; /* Added transition for smooth effect */
}
.card .card-body .newtitle{
    color: #763CAC;
    font-weight: 500;
    /* font-family: "Public Sans", Helvetica; */
    font-family: "Josefin Sans", sans-serif;
    font-size: 20px;
}
.card .card-body .newtext{
    color: #763CAC;
    font-weight: 400;
    /* font-family: "Public Sans", Helvetica; */
    font-family: "Josefin Sans", sans-serif;
    font-size: 16px;
}
.headingp{
    font-size:42px;
    /* color:#472C4C; */
    color:#77078c;
    font-weight: 600;
    /* font-family: "Public Sans", Helvetica; */
    font-family: "Josefin Sans", sans-serif;
}
.textp{
    font-size:16px;
    color:#472C4C;
    font-weight: 500;
    /* font-family: "Public Sans", Helvetica; */
    font-family: "Josefin Sans", sans-serif;
    text-align: justify;
    line-height: 2.2;
}
.prj-img{
    width:25rem
}
.pr-ban-img{
    width:24rem
}
.icon-img{
    width:4rem
}
.conclu-img{
    width:28rem
}
.discusshead{
    font-size:42px;
    font-weight:600;
    color:#f5cefc;
    font-family: "Josefin Sans", sans-serif;
}
.paara{
    font-size:20px;
    font-weight:500;
    color:#763CAC;
    /* font-family: "Public Sans", Helvetica; */
}

.ptextclient{
    font-size:22px;
    font-weight:500;
    /* font-family: "Public Sans", Helvetica; */
    text-align:justify
}
.cls-card{
    border: 1px solid #FFFFFF;
    backdrop-filter: blur(19px);
    box-shadow: 0px 34px 40px 0px #4A55BC23;
    background: linear-gradient(5deg, rgb(82 92 196 / 13%) 4.13%, rgba(255, 255, 255, 0.6) 80.29%);
}
.founder{
    font-size:16px;
    font-weight:500;
    /* font-family: "Public Sans", Helvetica; */
}
.name{
    font-size:16px;
    font-weight:600;
    /* font-family: "Public Sans", Helvetica; */
}

.img-contain{
    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: 1px solid #FFFFFF;
    box-shadow: 4px 4px 10px rgba(118, 60, 172, 0.12); /* Added box shadow to the left and bottom */
    /* width:24rem */
}
.slhead{
    background: linear-gradient(135deg, rgba(231, 64, 235, 0.8), rgba(59, 25, 156, 0.9));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    font-size:28px;
    font-weight:600;
    /* font-family: "Public Sans", Helvetica; */
}
.slsub{
    font-size: 17px;
    font-style: italic;
    font-weight: 400;
    /* font-family: "Public Sans", Helvetica; */
    color:#763CAC
}
.sltext{
    font-size: 18px;
    font-weight: 300;
    /* font-family: "Public Sans", Helvetica; */
    color:#616161;
}
.myPrev1{
    /* border:1px solid black; */
    height:50px;
    width:50px;
    border-radius:100%;
    background: linear-gradient(135deg, rgb(231.39, 63.6, 234.81,0.3) 60%, rgb(58.91, 24.73, 156.19,0.2) 100%);
    border: 1px solid transparent; /* Set border width */
    border-image: linear-gradient(#E740EB, #3B199C, #DA6B3B99, #B947EE99); /* Apply gradient to border */
}
.myPrev2{
    /* border:1px solid black; */
    height:50px;
    width:50px;
    border-radius:100%;
    background: linear-gradient(135deg, rgb(87 64 88 / 49%) 60%, rgb(58.91, 24.73, 156.19, 0.2) 100%);
    border: 1px solid transparent; /* Set border width */
    border-image: linear-gradient(#E740EB, #3B199C, #DA6B3B99, #B947EE99); /* Apply gradient to border */
    margin-top:10rem
}
 .carousel-control-prev-icon,.carousel-control-next-icon{
    width:18px
 }

.loloimg{
    width:20rem
}
.loloimg2{
    width:2rem
}

@media (max-width: 768px) { /* For smaller devices */
    .section-dev{
        padding:0px
    }
 
    .newHead {
        font-size: 14px; /* Adjusted for smaller screens */
    }
    .para-text p {
        font-size: 16px; /* Adjusted for smaller screens */
    }
    .sptext {
        font-size: 20px; /* Adjusted for smaller screens */
    }
    .dev-text p {
        margin-top:3rem;
        font-size: 26px; /* Adjusted for smaller screens */
    }
    .dev-head h2 {
        font-size: 36px; /* Adjusted for smaller screens */
    }
    .headingclass {
        font-size: 24px; /* Adjusted for smaller screens */
    }
    .text-p {
        font-size: 14px; /* Adjusted for smaller screens */
    }
    .subhead {
        font-size: 18px; /* Adjusted for smaller screens */
    }
    .level-icon {
        font-size: 12px; /* Adjusted for smaller screens */
    }
    .dev-text-new {
        font-size: 32px; /* Adjusted for smaller screens */
    }
    .headingp {
        font-size: 24px; /* Adjusted for smaller screens */
    }
    .textp {
        font-size: 20px; /* Adjusted for smaller screens */
    }
    .discusshead {
        font-size: 30px; /* Adjusted for smaller screens */
    }

    .paara {
        font-size: 18px; /* Adjusted for smaller screens */
    }
    .goalheading{
        font-size: 30px;
    }
    .goalpara{
        font-size: 15px;
    }
    .ptextclient {
        font-size: 21px; /* Adjusted for smaller screens */
    }
    .founder {
        font-size: 14px; /* Adjusted for smaller screens */
    }
    .name {
        font-size: 14px; /* Adjusted for smaller screens */
    }
    .slhead{
        font-size:25px;
    }
    .slsub{
        font-size: 15px;
    }
    .sltext{
        font-size: 14px;
    }

}

@media (min-width: 769px) and (max-width: 1024px) { /* For medium devices */
    .newHead {
        font-size: 15px; /* Adjusted for medium screens */
    }
    .para-text p {
        font-size: 17px; /* Adjusted for medium screens */
    }
    .sptext {
        font-size: 22px; /* Adjusted for medium screens */
    }
    .dev-text p {
        font-size: 34px; /* Adjusted for medium screens */
    }
    .dev-head h2 {
        font-size: 44px; /* Adjusted for medium screens */
    }
    .headingclass {
        font-size: 28px; /* Adjusted for medium screens */
    }
    .text-p {
        font-size: 15px; /* Adjusted for medium screens */
    }
    .subhead {
        font-size: 19px; /* Adjusted for medium screens */
    }
    .level-icon {
        font-size: 14px; /* Adjusted for medium screens */
    }
    .dev-text-new {
        font-size: 36px; /* Adjusted for medium screens */
    }
    .headingp {
        font-size: 40px; /* Adjusted for medium screens */
    }
    .textp {
        font-size: 22px; /* Adjusted for medium screens */
    }
    .discusshead {
        font-size: 40px; /* Adjusted for medium screens */
    }
    .paara {
        font-size: 19px; /* Adjusted for medium screens */
    }

    .ptextclient {
        font-size: 32px; /* Adjusted for medium screens */
    }
    .founder {
        font-size: 15px; /* Adjusted for medium screens */
    }
    .name {
        font-size: 15px; /* Adjusted for medium screens */
    }
}