#career-sec-3{
    padding-top:0
}

.career-banner-title{
    font-family: "Josefin Sans", sans-serif;
    font-size: 50px;
    background: linear-gradient(90.75deg, #f1e8e8 6.43%, rgb(124 104 104 / 64%) 86.66%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 800;
}
@media (max-width: 768px) {
    .career-banner-title {
        font-size: 38px;
    }
}

.career-banner-para{
    font-family: "Josefin Sans", sans-serif;
    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;
    text-align: justify;
}
.heading-career{
    font-family: "Josefin Sans", sans-serif;
    font-size: 2rem;
    background: linear-gradient(90.75deg, #800080, #e891a0);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 800;
    text-align: left
}

.img-com{
    width:10rem;
}
.off-head{
    font-size:27px;
    font-weight:800;
    color:#472C4C
}
.off-head-2{
    font-size:45px;
    font-weight:800;
    background: linear-gradient(90.75deg, #800080, #e891a0);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    /* color:#472C4C; */
    text-align: center;
}
.off-text{
    text-align: center;
    color:rgb(132,27,45)
}
.offer-img{
    width:5rem
}
.offer-img-2{
    width:4rem
}
.floating-image {
    animation: float 3s ease-in-out infinite;
}

@keyframes float {
    0% { transform: translatey(0); }
    50% { transform: translatey(-10px); }
    100% { transform: translatey(0); }
}

#off-2{
margin-top:3rem
}
#off-5{
    margin-top:-4rem 
}
#off-4{
    margin-top:3rem 
}
#off-6{
    margin-top:-5rem 
}
#off-7{
    margin-top:-4rem 
}
#off-8{
    margin-top:-5rem 
}
#off-9{
    margin-top:-7rem 
}
#off-10{
    margin-top:-4rem 
}
#off-11{
    margin-top:-7rem 
}
#off-12{
    margin-top:-4rem 
}
/* Media queries for extra small, small, and medium devices */
@media (max-width: 768px) { /* Adjust the max-width as needed for your breakpoints */
    #off-2,
    #off-5,
    #off-4,
    #off-6,
    #off-7,
    #off-8,#off-9,#off-10,#off-11,#off-12 {
        margin-top: 0; /* Set margin-top to 0 for specified devices */
    }
    .necro-img{
        display:none
        /* position:absolute;
        margin-top: -5rem;
        z-index:1;
        margin-left:30rem */
    }
}
.offer-card,.offer-card-2,.offer-card-3,.offer-card-4,.offer-card-5,.offer-card-6,.offer-card-7,.offer-card-8,.offer-card-9,.offer-card-10,.offer-card-11,.offer-card-12{
    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-radius: 45px;
    box-shadow: 0 4px 15px rgba(179, 116, 197, 0.366); /* Added shadow effect */
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Added transition for smooth effect */
}

.offer-card,.offer-card-3{
    border:0
    /* border: 1px solid #FFFFFF; */
    /* border-bottom: 3px solid purple;
    border-right: 3px solid purple;
    border-top:0;
    border-left:0 */
    /* padding:1.5rem; */
}
.offer-card-2, .offer-card-4{
    /* border: 1px solid #FFFFFF; */
    border-bottom: 3px solid purple;
    border-left: 3px solid purple;
    border-top:0;
    border-right:0
    /* padding:1.5rem; */
}



.offer-card-5, .offer-card-7{
    border-bottom:0 ;
    border-left:0;
    border-top:3px solid purple;
    border-right:3px solid purple
}
.offer-card-6, .offer-card-8{
    border-bottom:0 ;
    border-left:3px solid purple;
    border-top:3px solid purple;
    border-right:0;
}
.offer-card-9,.offer-card-11{
    border-bottom:0 ;
    border-left:0;
    border-top:3px solid purple;
    border-right:3px solid purple
}
.offer-card-10,.offer-card-12{
    border-bottom:0 ;
    border-left:3px solid purple;
    border-top:3px solid purple;
    border-right:0;
}
.offer-title{
    color:#450696;
    font-size:15px;
}
.floating-icon-new{
    width:10rem;
    z-index:10000
}
#openings{
    border-radius: 30px;
}
.logo-img-offer{
    width:4rem;
}
.sticky-sec {
    position: sticky;
    top: 0; 
    height: 100vh; 
    overflow-y: auto; 
}
.sticky-sec-2 {
    position: sticky;
    top: 0; 
    height: 100vh; 
    overflow-y: auto; 
}
.ic-img{
    width:2.0rem
}

.job-title{
    font-size:1.3rem
}

.experience{
    font-size:0.9rem
}
.ex-span{
    font-size:15px;
    font-weight:600;
    background: linear-gradient(90.75deg, #971997, #2064b5);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.vertical-line {
    width: 1px; /* Adjust the width of the line */
    background-color: #000; /* Change color as needed */
    height: 20px; /* Adjust height as needed */
    margin: 0 10px; /* Adjust padding between elements */
}
.explore-para{
    color:#F5F5F5
}
.exp-cont .ul-career .li-career{
    color:#F5F5F5;
    list-style-type: none;
}
.circle-span{
    background:linear-gradient(145deg, rgba(231, 64, 235, 0.6), rgba(59, 25, 156, 0.7));
    height:1.5rem;
    width:1.5rem;
    /* border:1px solid white; */
    border-radius:50px;
}
.opening-title{
    position: relative;
    font-family: "Josefin Sans", sans-serif;
    font-weight:900;
  text-transform: uppercase;
  font-size: 1.5rem;
  letter-spacing: 4px;
  overflow: hidden;
  background: linear-gradient(90deg, #022476, #e856ed, #120687);
  background-repeat: no-repeat;
  background-size: 80%;
  animation: animate 3s linear infinite;
  -webkit-background-clip: text;
  -webkit-text-fill-color: rgba(255, 255, 255, 0);
}
@keyframes animate {
    0% {
      background-position: -500%;
    }
    100% {
      background-position: 500%;
    }
  }






.meet-our-team{
    background:linear-gradient(145deg, rgba(231, 64, 235, 0.6), rgba(59, 25, 156, 0.7));
    color:#fff;
    transition: color 0.3s ease;  
}
.meet-our-team:hover{
    color:rgb(245,222,179);
    }
.career-para-static{
    font-family: "Josefin Sans", sans-serif;
    font-size: 1rem;
    background:linear-gradient(90.75deg, #030138dc 6.43%, rgba(2, 65, 106, 0.83) 86.66%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: justify;
    line-height: 1.8;
}
.custom-btn-career{
    background:linear-gradient(145deg, rgba(231, 64, 235, 0.6), rgba(59, 25, 156, 0.7));
    color:#fff;
    transition: color 0.3s ease;  
   }
   .custom-btn-career:hover{
    color:rgb(245,222,179);
   }
.custom-card-career{
    align-items: center;
    text-align: center;
    border-radius: 40px;
    height:100%;
}
.tech-card{
    /* background: transparent; */
    background: linear-gradient(rgba(255, 255, 255, 0.14) 14%, rgba(255, 255, 255, 0.6) 60%);
    border:0
}
.tech-stack{
    /* color:#472C4C; */
    color:#7a078f;
    font-size:1.7rem;
    font-weight:700
}
.tech-img{
    width:3rem
}
.tech-title{
    font-size:0.8rem
}
.career-title {
    font-size: 22px;
    font-family: "Public Sans", Helvetica;
    font-weight: 500;
    color: #472C4C;
}
.career-text{
    font-size: 16px;
    font-family: "Public Sans", Helvetica;
    font-weight:400;
    color:#667085;
}
.openingHead{
    font-size:35px;
    font-family:"Pridi", Helvetica;
    color:#fff;
    font-weight:600;
    background: linear-gradient(90.75deg, #F5F5F5 6.43%, rgba(235, 235, 235, 0.64) 86.66%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-top:-65px
  }
/* accordion */




/* Styling for the first accordion item when expanded*/
.accordion-item:first-of-type > .accordion-header .accordion-button {
 
  /* font-family: "Public Sans", Helvetica; */
  font-weight: 500;
  font-size:20px
}

.cust-career-acc{
    background: linear-gradient(5deg, rgb(82 92 196 / 13%) 4.13%, rgba(255, 255, 255, 0.6) 80.29%);
    color: #472c4c;
    font-family: "Josefin Sans", sans-serif;
}

.nav-tabs .nav-link {
    color: #472C4C;
    border: none;
    border-bottom: 3px solid transparent;
    font-size: 18px;
    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, rgb(158 38 208), rgb(61 93 208));
    -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;
}

.hero .desc{
    font-size:15px
}

.car-list{
    font-size:14px;
    color: color-mix(in srgb, var(--default-color), transparent 30%);
}

.offer-card:hover, .offer-card-2:hover, .offer-card-3:hover, .offer-card-4:hover, .offer-card-5:hover, .offer-card-6:hover, 
.offer-card-7:hover, .offer-card-8:hover,
.offer-card-9:hover,.offer-card-10:hover,.offer-card-11:hover,.offer-card-12:hover {
    transform: scale(1.05); /* Scale effect on hover */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3); /* Enhanced shadow on hover */
}
/* .row .life-img{
    border-top-right-radius: 60px;
    border-bottom-left-radius: 60px;
    border-top-left-radius: 12px;
    border-bottom-right-radius: 12px;
} */

.job-back{
   
        /* color: var(--default-color); */
        /* background-color: var(--background-color); */
        font-size: 14px;
        padding-bottom: 0px;
        /* position: relative; */
        /* height: 480px; */
        /* position: relative;
        overflow: hidden; */
        perspective: 1000px;
 
}

.page-link.active{
    background-color: #b452e4;
    border-color: #bb79ce;
}

.page-link{
color:#b452e4
}

 .row .im-1,.row .im-3, .row .im-5{
    border-radius: 60px 12px;
 }
 .row .im-2,.row .im-4, .row .im-6{
    border-radius: 10px 50px;
 }

.tilt-animation-1 {
    transform: rotate(-5deg);
    animation: float1 3s ease-in-out infinite;
}

.tilt-animation-2 {
    transform: rotate(5deg);
    animation: float2 3s ease-in-out infinite;
}

.tilt-animation-3 {
    transform: rotate(-10deg);
    animation: float3 3s ease-in-out infinite;
}

.tilt-animation-4 {
    transform: rotate(5deg);
    animation: float4 3s ease-in-out infinite;
}
.tilt-animation-5 {
    transform: rotate(5deg);
    animation: float5 3s ease-in-out infinite;
}
.tilt-animation-6 {
    transform: rotate(-10deg);
    animation: float6 3s ease-in-out infinite;
}
.life-at-scrum-btn{
    background:linear-gradient(145deg, rgba(231, 64, 235, 0.6), rgba(59, 25, 156, 0.7));
    color:#fff;
    transition: color 0.3s ease;  
    font-size:15px
}
.life-at-scrum-btn:hover{
    color:rgb(245,222,179);
   }


/* Add this new class for the hover effect */
.row .life-img-container {
    position: relative;
    perspective: 1000px; /* Add perspective for 3D effect */
}

.row .life-img {
    transition: transform 0.6s; /* Smooth transition for the flip effect */
    position: relative; /* Ensure it is positioned correctly */
    z-index: 2; /* Ensure it is above the back image */
}

.row .life-img-back {
    position: absolute;
    top: 0;
    left: 0;
    backface-visibility: hidden; /* Hide the back image when not flipped */
    transform: rotateY(180deg); /* Rotate the back image */
    width: 100%; /* Ensure it covers the front image */
    height: 100%; /* Ensure it covers the front image */
    z-index: 1; /* Ensure it is below the front image */
}

/* .row .life-img:hover {
    transform: rotateY(180deg); 
} */
.flip-container {
    perspective: 1000px; /* Add perspective */
}

.flipper {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s; /* Animation duration */
    transform-style: preserve-3d; /* Preserve 3D space */
}

.flip-container.flipped .flipper {
    transform: rotateY(180deg); /* Flip effect */
}

.life-img, .life-img-back {
    position: absolute;
    backface-visibility: hidden; /* Hide back face */
    width: 100%;
    height: auto; /* Maintain aspect ratio */
}

.life-img-back {
    transform: rotateY(180deg); /* Rotate back image */
}
.l-card{
    background: rgb(244,234,244);
    /* background:rgb(214,214,239); */
    border-radius: 10px; /* Optional: Add some border radius for aesthetics */
    /* padding: 1rem;  */
    border:8px solid purple;
}
.in-card-job{
    /* background: linear-gradient(rgba(255, 255, 255, 0.14) 14%, rgba(255, 255, 255, 0.6) 60%); */
    /* border:0; */
    border-top:0;
    border-bottom:3px solid purple;
    border-left:0;
    border-right:3px solid purple;
    border-radius:25px;
    transition: opacity 0.5s ease;
    opacity: 1; 
}
.cust-readmore-card{
    border:0
}
.job-card-sub-title{
    margin-left:3rem
}
/* Media query for extra small and small devices */
@media (max-width: 576px) { /* Adjust the max-width as needed for your breakpoints */
   
    .job-card-sub-title{
        margin-left:0;
    }
    .necro-img{
        display:none
        /* position:absolute;
        margin-top: -5rem;
        z-index:1;
        margin-left:30rem */
    }
}

.hover-effect {
    position: relative;
    overflow: hidden; /* Ensures the overlay doesn't exceed the card boundaries */
}
.t-card{
    background: linear-gradient(135deg, #800080, #0000FF); /* Added purple to blue gradient */
    border-radius:40px;
    color:#ffffff;
}
.card-k{
    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);
    box-shadow: 0px 34px 40px 0px #4A55BC23;
    border-radius:25px;
}
.ci-ci-circle{
    display: flex;
    justify-content: center;
    align-items: center;
    color:#ffff;
    font-size:1.2rem;
    width:50px;
    height:50px;
    position:absolute;
    z-index:1;
    border-radius:50px;
    margin-top:-30px;background: linear-gradient(112.17deg, #E740EB 7.16%, #3B199C 98.02%);
    border-image-source: linear-gradient(87.32deg, #E740EB 3.35%, #3B199C 85.86%)
}
.hover-effect::after {
    content: '';
    position: absolute;
    bottom: 100%; /* Start from below the card */
    left: 0;
    right: 0;
    height: 100%; /* Full height */
    background: linear-gradient(112.17deg, #E740EB 7.16%, #3B199C 98.02%);
    
    /* background-color: rgba(0, 0, 0, 0.5);  */
    transition: bottom 0.3s ease; /* Smooth transition */
}

.hover-effect:hover::after {
    bottom: 0; /* Slide up to cover the card */
    color:#ffffff;
    z-index:-1
}

.hover-effect:hover .k-body{
    color: #fff; /* Change text color to white on hover */
}

.hover-effect:hover .k-head{
    color: #fff; /* Change text color to white on hover */
}
.hover-effect:hover .k-text{
    color: #fff; /* Change text color to white on hover */
}
.necro-img{
    width:9rem;
    position:absolute;
    margin-top: -5rem;
    z-index:1;
    margin-left:30rem
}
.head-h{
font-size:1.5rem
}
.head-t{
    font-size:1rem
}
.k-head{
font-size:1.2rem;
/* color:#472C4C; */
color:#552fb1;
font-weight:600
}
.k-text{
    color:#823491c4;
}
.k-body{
    font-size:0.8rem;
    color:#472C4C
}

/* Media queries for small and extra small screens */
@media (max-width: 576px) { /* Extra small devices */
    .job-title {
        font-size: 20px;
    }
}

@media (min-width: 577px) and (max-width: 768px) { /* Small devices */
    .job-title {
        font-size: 1.1rem;
    }
}






.offer-container{
    border:1px solid black
}
.offer-head{
    /* border:3px solid rgb(120,81,169); */
    /* border:3px solid purple; */
    /* border-left:4px solid purple; */
    border-right:4px solid purple;
    border-top:4px solid purple;
    /* border-bottom:4px solid purple; */
    top:-83px;
    left:21px;
    /* border:0; */
    /* border-radius:45px; */
   /* margin-top:-50px; */
   background: rgb(120,81,169);
   color:#ffffff;
   padding:8px;
   /* margin-left:-25px; */

}
@media (max-width: 767.98px) { /* Covers extra-small and small screens in Bootstrap */
.offer-head {
    margin-left: 0;
}
}
.offer-head-title{
   
   color:#ffffff;
}
.offer-card-show{
    border-radius:45px;
    border:0;
    border-left:2px solid purple;
    border-right:2px solid purple;
    background: linear-gradient( rgba(255, 255, 255, 0.14) 14%, rgba(255, 255, 255, 0.6) 60%);
    box-shadow: 0 4px 15px rgba(179, 116, 197, 0.366); /* Added shadow effect */
    transition: transform 0.3s ease, box-shadow 0.3s ease; 
}
.offer-container{
    background: linear-gradient(5deg, rgb(82 92 196 / 13%) 4.13%, rgba(255, 255, 255, 0.6) 80.29%);
    border-radius:20px;
    border:0;
    border-left:4px solid purple;
    border-right:4px solid purple;
    /* border-top:4px solid purple; */
    border-bottom:4px solid purple;
    /* border-right:3px solid rgb(120,81,169);
    border-top:3px solid rgb(120,81,169);
    border-bottom:3px solid rgb(120,81,169); */
    box-shadow: 0px 34px 40px 0px #4A55BC23;
}
.img-offers{
    width:2.8rem
}
.error {
    color: red;
    font-size: 0.875em;
    margin-top: 4px;
}