body{
  padding-top: 20px;
}


.hire-section {
    max-width: 517px;
    position: absolute;
    top: 90px;
  }
a{
  text-decoration: none !important;
  color: unset !important;
}
 

  .floating-stats {
    left: -75px;
    position: absolute;
    z-index: 10;
    top: 75px;
  }

  /* .floating-stats .stats-box {
    margin-bottom: 15px;
  } */
  .image-container {
    position: relative;
    overflow: hidden;
    width: 100%;
    /* Ensure proper width */
    height: auto;
  }

  .main-img {
    position: absolute;
    left: 0;
    transition: transform 0.6s ease-in-out, opacity 0.6s ease-in-out;
    width: 100%;
    height: auto;
  }


  .floating-stats {
    display: flex;
    flex-direction: column;
    gap: 15px;
  }

  .stats-box {
    background: white;
    padding: 10px;
    height: 106px;
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 200px;
    display: flex;
    text-align: center;
  flex-direction: column;
  justify-content: space-between;
  }

  .name {
    color: #004FAF;

font-size: 20px;
font-style: medium;
font-weight: 500;
line-height: 26px; /* 108.333% */
letter-spacing: -0.24px;
  }

  .title {
    font-size: 14px;
    color: #656565;
    font-style: medium;

  }

  .category,
  .behaviour {
    font-size: 0.8rem;
    color: #646464;
  }

  p {
    margin-bottom: .3rem;
  }
.expertise-icons {
  display: flex;
  flex-wrap: wrap;
  gap: 20px; /* jitna gap chahiye, utna px ya rem mein badha sakte ho */
  align-items: center; /* vertically center karne ke liye */
}

  .expertise-icons img {
    width: 25px;
    height: 25px;
    object-fit: contain;
    /*margin-right: 8px;*/
  }

  .rating {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 20px;
  }

  .rating-stars {
     color: #F38100;
    font-size: 12px;
    margin-left: 5px;
  }




  .image-container {
    position: static;
    /* display: inline-block; */
    height: 400px;
    /* width: 500px;
  justify-self: end; */
  }

  .bg-box {
    /* position: absolute; */
    width: 100%;
    height: 100%;
    background: #EAEFF4;
    border-radius: 10px;
    z-index: 1;
  }

  .main-img {
    position: absolute;
    width: 465px;
    height: 465px;
    z-index: 9;
    top: -16px;
    border-radius: 10px;
    /* height: 219px; */
    position-area: y-end;
    object-fit: contain;
    /* object-fit: scale-down; */
    left: 50px;
  }


  .logo-marquee {
    overflow: hidden;
    white-space: nowrap;
    width: 100%;
  }

  .company-logos {
    display: inline-flex;
    animation: scroll 20s linear infinite;
  }

  .company-logos {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 50px;
  }

  .company-logo {
    width: 100%;
  margin: 0 0px;
  height: 40px;
  }

  @keyframes scroll {
    from {
      transform: translateX(0);
    }

    to {
      transform: translateX(-50%);
    }
  }

  .video-container {
    width: 100%;
    height: 330px;
       background: transparent;
    /* Placeholder background */
  }
  .video-text h2{
    color: #2F2F2F;
      text-align: justify;
font-size: 32px;
font-style: normal;
font-weight: 400;
line-height: 46.476px; /* 129.1% */
  }

  .video-text p{
    color: #2F2F2F;
text-align: justify;
opacity: 0.8;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 25.642px; /* 160.262% */
letter-spacing: -0.401px;
  }

.subheading2-p{
color: var(--Grey, #747474);


text-align: center;
/*font-size: 20px;*/
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 30px; /* 150% */
}

.sub-heading2{
    font-size : 32px;
        padding: 0px 12px;
}
  .sub-heading4 {
    color: #2F2F2F;
    text-align: center;
    
    /*font-size: 38px;*/
      font-size: 32px;
    font-style: normal;
    margin-bottom: 25px;
    padding-top: 65px;
    font-weight: 400;
    line-height: 48px;
    letter-spacing: -0.76px;
}

  .top-section {
    height: 550px;
    max-width: 1280px;
    width: 100%;
  }

  /* slider */
  .swiper-container {
    width: 100%;
    padding: 40px 0;
    position: relative;
  }

  .swiper-slide {
    display: flex;
    justify-content: center;
  }

  .card {
    width: 100%;
    max-width: 340px;
    border: none;
    border-radius: 10px;
   
    overflow: hidden;
    background: #f2f6f8;
    height: 430px;
    margin-bottom: 10px;
  }
  .card:hover{
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.30);
  }
  .card-inside{
       height: 225px;
          background: #fff;
  }

  .card img {
    width: 100%;
   height: 100%;
    object-fit: cover;
  }

  .arw-img {
    width: 40px;
    height: 40px;
    align-self: flex-end;
    margin-right: 25px;
  }

  .arw-img img {
    width: 100%;
    object-fit: contain;
    height: 100%;
  }

  .card:hover .arw-img {
    transform: rotate(-55deg);
    color: #0050E4;;
   

    /* 180 degree ghumayega */
  }

  .card-title-bg {
    text-align: center;
    font-size: 20px;
    padding: 10px;
    font-weight: bold;
  }

  .card-body {
    padding: 15px;
    text-align: start;
  }
  .card-body h5{
    color: #000;


font-size: 24px;
font-style: normal;
font-weight: 400;
line-height: normal;
  }
  .card-body p{
    color: #5F5F5F;
text-align: justify;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: normal;
  }

  .swiper-button-prev,
  .swiper-button-next {
    color: teal;
  }

  .swiper-button-next {
    right: -2% !important;
  }

  .swiper-button-prev {
    left: -2% !important;
  }

  .swiper-pagination-bullet {
    background: #A00000;
  }

  /* end */
  .left1-section {
width: 40%;
padding: 30px;
}
.left1-section h1{
color: #2F2F2F;
font-size: 42px;
/*font-size: 60px;*/
font-style: normal;
font-weight: 400;
line-height: 50px; /* 133.333% */
letter-spacing: -0.6px;
}
.left1-section p{
color: #2F2F2F;
text-align: justify;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 28.444px; /* 142.222% */
letter-spacing: 0.2px;
}

.right1-section {
width: 60%;
}

  .growth-container {
    display: flex;
    align-items: center;
    padding: 50px;
    background-color: #f7fafc;
  }

 

  .grid-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
  }

  .grid-item {
    padding: 20px;

    position: relative;
  }

  .grid-item img {
    width: 62px;
    height: 59px;
    display: block;
    margin-bottom: 10px;
  }

  .grid-item:nth-child(1) {
    border-right: 1px solid #000;
  }

  .grid-item:nth-child(3) {
    border-top: 1px solid #000;
  }

  .grid-item:nth-child(2) {
    border-bottom: 1px solid #000;
  }

  .grid-item:nth-child(4) {
    border-left: 1px solid #000;
  }




  /*  */
  .growth-section {
    background-color: #F2DF63;
    /* Adjust color as per your design */
    padding: 50px 0;
    height: 334px;
    text-align: center;
  }
.growth-section h2{
color: #0B0B0B;
text-align: start;
font-size: 32px;
/*font-size: 36.344px;*/
font-style: normal;
font-weight: 500;
line-height: 41.535px; /* 114.286% */
}
  .growth-item {
    padding: 20px;
  }

  .grid-item p {
    font-weight: 300;
    text-align: justify;
  }
  .grid-item h5{
    /*font-size: 26px;*/
     font-size: 24px;
    }
    
  .growth-item h2 {
  font-weight: 500;
  }

  .growth-item p {
    color: #12141D;
text-align: justify;
    font-size: 16px !important;
font-style: normal;
font-weight: 400;

line-height: 24.229px; /* 155.556% */
    margin: 0;
    font-size: 14px;
  }

  .divider {
    display: none;
    width: 1px;
    height: 50px;
    background-color: rgba(0, 0, 0, 0.2);
  }

  @media (min-width: 768px) {
    .divider {
      display: inline-block;
    }

  }










  /* new slider */
  .choose-slider {
    position: relative;
    overflow: hidden;

    margin: 40px;
  }

  .choose-slider {
    display: flex;
     animation: slideIn 0.10s ease-in-out both;
}

@keyframes slideIn {
  0% {
    opacity: 0;
    transform: translateX(30px) scale(0.98);
  }
  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

  .choose-slider {
    min-width: 75%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-size: cover;
    background-image: url(/image/bg-blue.png);
    background-repeat: no-repeat;
    text-align: center;
    /* background: teal; */
    color: white;
    padding: 40px;
    border-radius: 10px;
  }

  .choose-slider img {
    width: 100px;
    height: auto;
    margin-bottom: 20px;
  }

  .choose-slide {
    position: relative;
  }

  .content {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .content h1 {
    color: #FFF;
text-align: center;
text-align: start;
/*font-size: 50px;*/
font-size: 30px;
font-style: normal;
font-weight: 700;
line-height: 60px; /* 120% */
  }

  .content p {
    color: #FFF;
 text-align: justify;
/*font-size: 24px;*/
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 40px; /* 166.667% */
letter-spacing: 0.48px;
  }

  .prev,
  .next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    color: #3CBCAF;
    border: none;
    font-size: 32px;
    padding: 15px;
    cursor: pointer;
    border-radius: 50%;
    /* box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); */
  }

  .prev {
    left: -40px;
  }

  .next {
    right: -40px;
  }
.btn-case-hire {
    background: #3B8DBC !important;
    color: #fff !important;
    padding: 12px 40px !important;
}
  @media (min-width: 768px) {
    .choose-slider {
      flex-direction: row;
      text-align: left;
      justify-content: center;
      padding: 20px;
     
      /* height: 500px; */
      height: 284px;
    }
.whySwiper{
    margin: 0px 20px;
}
    .choose-slider img {
      width: 160px;
      /* margin-right: 20px; */
      /* margin-bottom: 0; */
      height: 160px;
      /* align-content: center; */
              object-fit: contain;
      margin: auto;
    }

    .content-img {
      width: 30%;
      height: 100%;
      display: flex;
    }

    .content {
      align-items: flex-start;
      width: 70%;
      height: 180px;
    }

    .prev {
      left: -19px;
    }

    .next {
      right: -19px;
    }
  }



  /* animation */
  .containert {
    position: relative;
    width: 300px;
    height: 300px;
  }

  .box-animation {
    width: 90px;
    height: 90px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 10px;
    transition: transform 0.4s ease-in-out, box-shadow 0.4s ease-in-out;
  }

  .profile,
  .dev-profile {
    width: 65px;
    height: 65px;
    border-radius: 50%;
    position: absolute;
    transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1);
    opacity: 1;
  }

.dev-profile img{
    height: 100%;
    width: 100%;
}
  .dev-profile {
    display: none;
  }

  /* Initial positions */
  .profile:nth-child(2) {
    top: 20px;
    left: 20px;
  }

  .profile:nth-child(3) {
    top: 20px;
    right: 20px;
  }

  .profile:nth-child(4) {
    bottom: 20px;
    left: 20px;
  }

  .profile:nth-child(5) {
    bottom: 20px;
    right: 20px;
  }

  @keyframes shake {
    0% {
      transform: translate(-50%, -50%) rotate(0deg);
    }

    25% {
      transform: translate(-48%, -50%) rotate(3deg);
    }

    50% {
      transform: translate(-52%, -50%) rotate(-3deg);
    }

    75% {
      transform: translate(-49%, -50%) rotate(2deg);
    }

    100% {
      transform: translate(-50%, -50%) rotate(0deg);
    }
  }

  /* animation end */

  .content-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .icon-img {
    width: 30px;
    /* Adjust icon size */
    height: 30px;
  }

 
  .right-section {
    display: flex;
    align-items: center;
    /* justify-content: center; */
    justify-content: end;
    font-weight: bold;
    font-size: 22px;
  }
  .left-section {
width: 60%;
}

.right-section {
width: 40%;
justify-items: end
}

  .step-text {
    color: #052A44;

font-size: 16px;
font-style: normal;
font-weight: 700;
line-height: 23.2px; /* 145% */
letter-spacing: 2.5px;
text-transform: uppercase;
  }

  .heading {
    color: #2F2F2F;

font-size: 28px;
font-style: normal;
font-weight: 500;
line-height: 33.6px; /* 120% */
letter-spacing: -0.5px;

  }

  .sub-heading {
    color: #2F2F2F;
text-align: justify;
/*font-size: 20px;*/
font-style: normal;
font-size: 16px;
font-weight: 400;
line-height: 147.9%; /* 29.58px */
letter-spacing: 0.6px;

  }

  @media (max-width: 768px) {

    .left-section,
    .right-section {
      text-align: center;
      justify-content: center;
    }

    .content-wrapper {
      justify-content: center;
    }
     .company-logos {
    animation: scroll 10s linear infinite; /* Speed doubled for mobile */
  }
  }


  /* animation 2  */
  .image {
    position: absolute;
    width: 100%;
    border-radius: 12px;
    border: 1.5px solid transparent;
    box-sizing: border-box;
    transition: border-color 0.5s ease-in-out;
  }

  .top-image {
    top: 40px;
    width: 250px;
    filter: drop-shadow(0px 8px 30px rgba(236, 34, 34, 0.10));
  }

  .bottom-image {
    top: 47%;
    filter: drop-shadow(0px 8px 30px rgba(236, 34, 34, 0.10));
    left: 47px;
    width: 250px;
    z-index: 1;
    animation: bounceSlide 1100ms ease-in-out infinite alternate, pauseSlide 4s infinite;
  }

  @keyframes bounceSlide {
    0% {
      top: 57%;
      left: 25px;
      filter: drop-shadow(0px 8px 30px rgba(80, 200, 112, 0.10));
      border-color: red;
    }

    50% {
      border-color: transparent;
    }

    100% {
      top: 50%;
      left: 10px;
      border-color: transparent;
    }
  }

  .container:hover .image {
    border-color: transparent;
  }

  /* end */


 
  /* animation 3  */
  
.card-animation {
  position: relative;
  width: fit-content;
 
}

.bg-img {
  width: 100%;
  display: block;
  opacity: 1;
}

.popup-img {
  position: absolute;
  top: 20px;
  left: 25px;
  width: 100%;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.popup-img.show {
  opacity: 1;
  transform: scale(1);
}
  
  
  
  .card-animation {
    position: absolute;
    width: 155px;
    height: 150px;
    background: white;
  
    border-radius: 8px;
    top: 58%;
    /* left: 70%; */
    left: 24%;
    z-index: 1;
    transform: translate(-50%, -50%);
  }
.card-animation img{
height: 100%;
}
  .line {
    position: absolute;
    width: 0;
    height: 2px;
    background: #B6BECE;
    opacity: 0;
  }

  .profile-animation {
    position: absolute;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow: hidden;
    transform: scale(1);
    transition: transform 0.1s ease-in-out;
    z-index: 3;
    opacity: 1 !important;
    display: block !important;
    /* Ensure images are always displayed */
  }

  .top-profile {
    top: 46px !important;
    left: 230px !important;
  }

  .bottom-profile {
    bottom: 9px !important;
    left: 230px !important;
  }

  .line1 {
    top: 101px;
    left: 135px !important;
    rotate: -35deg;
    
  }

  .line2 {
    bottom: 75px;
    left: 100px;
    rotate: 33deg;
  }

  @keyframes expandLine1 {
    0% {
      width: 0px;
      opacity: 1;
      left: 100px;
    }

    100% {
      width: 150px;
      opacity: 1;
      left: 100px;
    }
  }

  @keyframes expandLine2 {
    0% {
      width: 0;
      opacity: 1;
      left: 100px;
    }

    100% {
      width: 150px;
      opacity: 1;
      left: 100px;
    }
  }

  /* end */

  /* animation 4 */
  .timeline {
    position: relative;
    width: 400px;
  }

  .timeline-item {
    display: flex;
    align-items: center;
    margin-bottom: 70px;
    justify-content: space-between;

    position: relative;
  }

  .timeline-item:last-child {
    margin-bottom: 0;
  }

  /* Left Side Image */
  .timeline-item img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #fff;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    position: relative;
    z-index: 2;
    margin-right: 20px;
  }

  /* Right Side Content Box */
  .timeline-content {
    background: white;
    padding: 10px 20px;
        font-weight: 400;
    border-radius: 8px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    position: relative;
    min-width: 200px;
  }

  /* Animated Dotted Line */
  .dots {
    position: absolute;
    left: 26px;
    top: 17px;
    width: 9px;
    height: 127px;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
  }

  .dots span {
    width: 8px;
    height: 10px;
    background: #666;
    border-radius: 50%;
    margin: 6px 0;
    animation: moveDots 3s linear infinite;
  }

  /* 7 Dots Animation */
  .dots span:nth-child(1) {
    animation-delay: 0s;
  }

  .dots span:nth-child(2) {
    animation-delay: 0.2s;
  }

  .dots span:nth-child(3) {
    animation-delay: 0.4s;
  }

  .dots span:nth-child(4) {
    animation-delay: 0.6s;
  }

  .dots span:nth-child(5) {
    animation-delay: 0.8s;
  }

  .dots span:nth-child(6) {
    animation-delay: 1s;
  }

  .dots span:nth-child(7) {
    animation-delay: 1.2s;
  }

  @keyframes moveDots {
    0% {
      opacity: 0.7;
      transform: translateY(-10px);
    }

    50% {
      opacity: 1;
    }

    100% {
      opacity: 0.6;
      transform: translateY(30px);
    }
  }

  /* end */




  /* animation 5*/
  .onboard {
    align-items: center;
  }

.onboard img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  transition: transform 0.25s ease;
}

.handshake {
  position: absolute;
  left: 50%;
  transform: translateX(-50%) scale(0);
  opacity: 0;
  transition: transform 0.1s ease-in-out, opacity 0.1s ease-in-out;
}

.handshake.pop {
  transform: translateX(-50%) scale(1);
  opacity: 1;
}

.line-on {
  position: absolute;
  height: 1px;
  background-color: #3B8DBC;
  width: 0;
  top: 50%;
  transition: width 0.1s ease-in-out;
}

  .on-board-left {
    position: absolute;
    left: 0;
    z-index: 1;
  }

  .on-board-right {
    position: absolute;
    right: 0;
    z-index: 1;
  }

  .left-line {
    left: 80px;
  }

  .right-line {
    right: 80px;
  }
.left-line,
.right-line {
  transition: width 0.1s ease-in-out;
}
 
.left.zoom,
.right.zoom {
  transform: scale(1.1);
  transition: transform 0.15s ease-in-out;
}

  .pop {
    transform: translateX(-50%) scale(1);
    opacity: 1;
    z-index: 1;
  }

  /* end */

  /* testimonial */
  .testimonial-container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
   
    position: relative;
  }

  .testimonial-card {
    display: flex;
    width: 90%;
    /*height: 650px;*/
    height: 480px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    position: relative;
  }

  .left-panel {
    width: 35%;
    border-radius: 6px 0px 0px 6px;
    background: var(--blue-card-color-for-testimonial, linear-gradient(160deg, #4289BD 1.91%, #002F51 98.34%));
    color: white;

    position: relative;
    overflow: hidden;
  }

  .left-panel-content {
    width: 100%;
    border-radius: 6px 0px 0px 6px;
    background: var(--blue-card-color-for-testimonial, linear-gradient(160deg, #4289BD 1.91%, #002F51 98.34%));
    position: absolute;
    height: 100%;
    left: -100%;
    transition: left 0.5s ease-in-out;
  }

  .main {
    height: 100%;
  }

  #name {
    font-size: 42px;
    font-weight: 500;
  }
  .recruit{
    color: #2F2F2F;
    max-width: 84%;
font-size: 42px;
font-style: normal;
font-weight: 600;
line-height: 56px; /* 116.667% */
text-transform: capitalize;
  }
  .recruit-p{
    color: #000;
text-align: justify;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: normal;
  }
  .heading1{
    color: #2F2F2F;
text-align: center;

/*font-size: 42px;*/
font-size: 32px;
font-style: normal;
font-weight: 400;
line-height: 45px; /* 93.75% */
  }

  .testimonila-heading h4 {
    font-size: 20px;
  }

  .center-panel {
    width: 35%;
  }

  .center-panel img {
    width: 100%;
    height: 100%;
     object-fit: cover;
  }


  .right-panel {
    width: 30%;
    padding: 20px;
    align-content: center;

    margin-left: auto;
    color: #000;
   text-align: justify;
    
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 166.6%;
    /* 36.652px */
  }

  .stars {
    color: #F7871B !important;
    text-align: center;
    margin-top: 15px !important;
    font-size: 34px;
  }

  .show-left-panel .left-panel-content {
    left: 0;
  }

  /* end */


  /* developer */
  .profile-card {
  
  
    /* padding: 20px; */
    font-size: 12px;
    height: 402px;
    text-align: start;
    background: #F2F6F8;
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15);
  }

  .profile-card img {
    width: 100%;
    height: 230px;
object-fit: contain;
    margin-bottom: 10px;
  }

  .verified-badge {
    height: 20px !important;
    width: 20px !important;
  }

  .profile-name {
    font-size: 16px;
    justify-content: space-between;
    display: flex;
  }

  .profile-inside{
    padding: 10px;
  }
  /* end */

  @media (min-width: 600px) and (max-width: 850px) { 
    .top-section {
      height: 100%;
    }

    .hire-section {
      position: relative;
      top: 32px;
      max-width: unset;
    }
    .main-img {
      position: absolute;
      width: 340px;
      height: 299px;
      z-index: 9;
      top: 88px;
      border-radius: 10px;
      /* height: 219px; */
      position-area: y-end;
      /* object-fit: cover; */
      /* object-fit: scale-down; */
      left: 130px;
    }
    .floating-stats {
      left: -2px;
      position: absolute;
      z-index: 10;
      top: 75px;
  }
  .name{
    font-size: 16px;

  }
  .title{
    font-size: 14px;
  }
.category, .behaviour{
  font-size: 0.6rem;
}
.expertise-icons img{
  height: 20px;
  width: 20px;
}
.stats-box{
  height: 95px;
}
.rating{
  font-size: 16px;
}
.floating-stats{
  top: 61px;
}
  .next {
    right: -21px;
}
.prev{
  left: -21px;
}
.swiper-slide {
  justify-items: center;
}
.growth-container{
  flex-direction: column;
}
.left1-section{
  width: 100%;
}
.grid-container{
  display: block;
}
.growth-section{
  height: auto;
}
.grid-item {
  border: none !important;
  justify-items: center;
  text-align: center;
}
.left1-section h1{
  font-size: 32px;
}
.grid-item img{
  width: 125px;
  height: 112px;
}
.right1-section{
  width: 100%;
}
.right-section{
  width: 100%;
  justify-content: center;
}
.left-section{
 width: 100%;
 padding-top: 0px;
}
.growth-item h2{
  text-align: center;
  
}

.growth-item p{
  text-align: center;
}

.recruit {
    color: #2F2F2F;
    max-width: 100%;
    font-size: 42px;
    font-style: normal;
    font-weight: 600;
    line-height: 56px;
    text-transform: capitalize;
}
.testimonial-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  height: auto;
}

.center-panel {
  width: 100%;
  order: 1; /* Image sabse upar */
  height: 750px;
}

.center-panel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.stars{
  font-size: 24px;
}
.subheading2-p {
  color: var(--Grey, #747474);
  text-align: center;
  
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px;
}

.left-panel {
  width: 100%;
  order: 2; /* Left Panel (with heading) image ke neeche aayega */
  text-align: center;
  border-radius: 0; /* Mobile view ke liye shape adjust */
  padding: 20px;
  height: 170px;
}
.testimonila-heading{
  display: none;
}
.bottom-heading {
  text-align: center; /* Ensure proper alignment */
}

.right-panel {
  width: 100%;
  order: 3; /* Right panel sabse neeche */
  padding: 20px;
  font-size: 14px;
}
#name{
  font-size: 38px;
}
.growth-section h2 {
  text-align: center;
}
.image-container{
  height: 340px;
}
.grid-item h5{
font-size: 28px;
}
.content h1 {
  font-size: 30px;
}
.content p{
  font-size: 16px;
  color: #FFF;
   
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 29px;
    letter-spacing: 0.32px;
    text-align: start;
}
.profile-card{
  height: 356px;
}




   }



  @media screen and (max-width: 450px){
    .top-section {
      height: 100%;
    }

    .hire-section {
      position: relative;
      top: 0px;
              padding: 0px 23px;
    }    .btn-case-hire {
        background: #3B8DBC !important;
        color: #fff !important;
        padding: 12px 35px !important;
        width: 50% !important;
        margin: 0 auto;
    }
    .main-img {
      position: absolute;
      width: 270px;
      height: 300px;
      z-index: 9;
      top: 64px;
      border-radius: 10px;
      /* height: 219px; */
      position-area: y-end;
      object-fit: contain;
      /* object-fit: scale-down; */
      left: 154px;
    }
    .stats-box {
      background: white;
      padding: 10px;
      height: 94px;
      border-radius: 12px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      width: 158px;
      display: flex;
      text-align: center;
    flex-direction: column;
    justify-content: space-between;
    }
    .name{
      color: #004FAF;

font-size: 15.625px;
font-style: normal;
font-weight: 500;
line-height: 21.26px; /* 108.333% */
letter-spacing: -0.196px;
    }
    .choose-slider {
    min-width: 100%;
    }
    .title{
    
font-size: 12.354px;

font-weight: 500;
line-height: 14.041px; /* 85.853% */
    }
    .floating-stats{
      left: 30px;
      top: 36px;
    }
    .container-fluid{
      padding: 0;
    }
    .growth-item p {
 
    padding: 0 14px;
  
}
.grid-item p {
   
        padding: 0 14px;
        
    }
    .recruit{
font-size: 32px;
font-weight: 600;
line-height: 42px; /* 131.25% */
justify-self: center;
max-width: 390px;
    }
    .recruit-p{
      /*max-width: 327px;*/
      width:100%;
            
      justify-self: center;
    }
    .btn-hire {
      background: #3B8DBC;
      color: #fff;
      padding: 12px 50px;
      width: 75%;
  }
  .expertise-icons img{
    height: 18px;
    width: 18px;
  }
  .behaviour{
font-size: 8.813px;
line-height: 16.354px; /* 166.667% */
letter-spacing: -0.098px;
  }
  .rating{
    font-size: 15px;
  }
  
  .video-container {
    width: 100%;
    height: 275px;
   background: transparent;
}
  .prev img, .next img{
    height:60px;
}

.slide img {
    object-fit: contain;
    width: 170px;
    height: 170px;
    margin-bottom: 20px;
}
  .rating-stars{
    font-size: 9px;
  }
  .category{
    font-size: 9px;
  }
  .heading1 {
    font-size: 32px;
    line-height: 42px;
    font-weight: 500;
}
.video-text h2 {
  font-size: 32px;
  line-height: 35px; /* 109.375% */
 
}
.sub-heading4{
  padding-top: 35px;
  font-size: 32px;
}
.slider-container{
  margin: 6px;
}

.growth-container{
  flex-direction: column;
}
.left1-section{
  width: 100%;
}
.grid-container{
  display: block;
}
.growth-section{
  height: auto;
}
.grid-item {
  border: none !important;
          text-align: -webkit-center;

  text-align: center;
}
.left1-section h1{
  font-size: 32px;
}
.grid-item img{
  width: 125px;
  height: 112px;
  margin: auto;
  margin-bottom: 24px;
}
.right1-section{
  width: 100%;
}
.right-section{
  width: 100%;
}
.left-section{
 width: 100%;
 padding-top: 0px;
}
.top-image, .bottom-image {
  width: 210px;
}
.top-image {
  left: 1px;
}
@keyframes bounceSlide {
  0% {
    top: 50%;
    left: 52px;
    filter: drop-shadow(0px 8px 30px rgba(80, 200, 112, 0.10));
    border-color: red;
}

  50% {
    border-color: transparent;
  }

  100% {
    top: 39%;
    left: 16px;
    border-color: transparent;
}
}
.row{
  margin: 0 !important;
}
.prev, .next {
  padding: 0;
}
.prev {
  left: -23px;
}
.next {
  right: -23px;
}
body{
  padding-top: 64px;
}
.card-animation{
  width: auto;
}
@keyframes expandLine1 {
  0% {
    width: 0px;
    opacity: 1;
    left: 80px;
  }

  100% {
    width: 120px;
    opacity: 1;
    left: 30px;
  }
}
.timeline-content{
  color: #000;

font-size: 15.397px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
.grid-item p{
  color: #2F2F2F;


font-size: 16px;
font-style: normal;
font-weight: 200;
line-height: 26px; /* 162.5% */
letter-spacing: 0.32px;
}
.growth-item p {
  text-align: center;
}
.sub-heading{
  color: #2F2F2F;

font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 148%; /* 29.6px */
letter-spacing: -0.1px;

}

.content-wrapper{
  flex-direction: column;
}
.icon-img{
  width: 56px;
  height: 56px;
}


/*other*/
@media (max-width: 767px) {
  /* Only target whySwiper */
  .whySwiper .swiper-wrapper {
    display: flex;
    flex-direction: row !important;
    gap: 30px !important;
  
  }

  .whySwiper .swiper-slide {
    width: 100% !important;
    margin-right: 0 !important;
    display: flex;
    justify-content: center;
  }

  .whySwiper .swiper-pagination,
  .whySwiper .swiper-button-prev,
  .whySwiper .swiper-button-next {
    display: none !important;
  }
}

/*end*/

.swiper-container {
  overflow: visible !important; /* Taaki scrolling effect hat jaye */
}

.swiper-wrapper {
  display: flex;
  flex-direction: column;
  gap: 20px; /* Cards ke beech spacing */
 
}

.swiper-slide {
  width: 100% !important; /* Pure width le */
  margin-right: 0 !important; /* Slider effect ko hatane ke liye */
  justify-items: center;
}

.swiper-pagination, .swiper-button-prev, .swiper-button-next {
  display: none !important; /* Navigation controls hatane ke liye */
}



.testimonial-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  height: auto;
}

.center-panel {
  width: 100%;
  order: 1; /* Image sabse upar */
  height: 500px;
}

.center-panel img {
  width: 100%;
  height: 100%;
         object-fit: cover;

}
.stars{
  font-size: 24px;
}
.subheading2-p {
  color: var(--Grey, #747474);
 
  text-align: justify;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px;
}

.left-panel {
  width: 100%;
  order: 2; /* Left Panel (with heading) image ke neeche aayega */
  text-align: center;
  border-radius: 0; /* Mobile view ke liye shape adjust */
  padding: 10px;
  height: 136px;
}
.testimonila-heading{
  display: none;
}
.bottom-heading {
  text-align: center; /* Ensure proper alignment */
}

.right-panel {
  width: 100%;
  order: 3; /* Right panel sabse neeche */
  padding: 20px;
  font-size: 14px;
          /*height: 220px;*/
          height: auto;
}
.swiper-container {
    width: 100%;
    padding: 0px 0;

}
#name{
  font-size: 38px;
  margin-left: 14px;
}
#designation{
      margin-left: 14px;
}
.growth-section h2 {
  text-align: center;
  font-weight: 400 !important;
}
.image-container{
  height: 340px;
}
.grid-item h5{
font-size: 24px;
}
.content h1 {
  font-size: 30px;
  line-height: 40px;
}
.slide{
    padding: 20px;
}
.content p{
  font-size: 16px;
  color: #FFF;
   text-align: justify;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 29px;
    letter-spacing: 0.32px;
 
}

  }
   @media screen and (max-width: 360px){
           .btn-case-hire {
      
        font-size: 13px;
    }
   }