/* .services-section-container{
  margin: auto;
  width: 1440px;
  border: 1px solid red;
} */


/* Services Section */
.services-section {
  font-family: 'Poppins', sans-serif;
  background: linear-gradient(145deg, #191a32, #24253f);
  padding: 3vw 1vw;
  color: white;
  border-radius: 2vw;
  box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.3);
  text-align: center;
  margin: 3.472vw auto; /* Centers section horizontally */
  /* max-width: 85vw;  */
  /* max-width:1440px; */
  /* max-width: 1380px; */

  width: 87%;
  max-width: 1440px;
  /* border: 1px solid red; */
}

/* .services-header h2 {
  font-family: 'Poppins';
  font-size: 3vw;
  color: #5c5bd6;
  font-weight: 600;
  margin-bottom: 5vh;
} */

/* .services-header p {
  font-size: 2.5vw;
  font-weight: 500;
  color: #FFFFFF;
  margin-bottom: 5vh;
  line-height: 4vw;
} */
/* Services Tags */
/* .services-tags {
 
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1vw;
  margin-bottom: 3vw;
  font-size: 1vw; 
  font-weight: 500;
} */


.service-tag {
  border: 1px solid #ffffff; 
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 30px;
  padding: 0.694vw 0.389vw;
  font-size: 0.9vw; 
  font-weight: 500;
  color: #ffffff;
  cursor: pointer;
  transition: all 0.3s ease;
  width: 15vw;
  height: 3.5vw;
  text-align: center;
  letter-spacing: -2%; 
  transform-origin: top;
}



.service-tag:hover {
  font-weight: 500;
  border: none;
  background-color: #3330a4; 
  color: #ffffff; 
  transform: scaleY(1.10); 
}

/* 
.services-content {
  font-family: 'Poppins';
  width: 100%;

  display: flex;

  justify-content: space-around; 
  transition: opacity 0.5s ease;
  padding: 20px;

} */


/* .services-image {
  flex: 1;
  max-width: 34.722vw;
} */

/* .services-image img {
  width: 30vw;
  height: 20vw;
  border-radius: 35px;
  border: 10px solid #5c5b5b; 
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3); 
} */

/* .services-description {
  position: relative;
  width: 48.889vw;
  text-align: left;

} */

.services-description h3 {
  font-family: 'Poppins';
  font-size: 1.5vw;
  color: #ffffff;
  margin-bottom: 10px;
}

.services-description p {
  margin: 1vw 0; 
  margin-top: 1vw;

  font-size: 1.1vw;
  line-height: 2vw;
  padding-right: 1vw;
  color: #ffffff;

}

.services-description strong {
  font-family: 'Poppins';
  font-size: 3vw;
  color: #ffffff;
  font-weight: 800;
}

/* Learn More Button */
.learn-more-btn {
  position: absolute;
  bottom: 10px;
  height: 4vw;
  width: 10vw;
  background-color: #4440DB;
  color: white;
  border: none;
  border-radius: 1px;
  /* font-size: 0.9rem; */
  cursor: pointer;
  transition: all 0.4s ease;
  
} 

.learn-more-btn:hover {
  font-family: 'Poppins';
  background-color: white;
  color: #5c5bd6;
  border: 1px solid #5c5bd6;
  transform: scale(1.1);
}


/* Slide-up Animation */
@keyframes slideUp {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.services-content .services-im

.services-content .services-description {
  animation: slideUp 0.5s ease-in-out;
}
@media screen and (min-width: 1800px){
  
  .service-tag{
    width: 13vw;
  height: 3.5vw;
  padding: 0.694vw 0.389vw;
  }

}

@media screen and (min-width: 1441px){
  .services-description{
    width: 704px;
    /* border: 1px solid red; */

  }
}
@media screen and (min-width: 2560px) {
  .services-section {
    padding: 80px 40px;
  }
  .services-header{
    /* border: 1px solid red; */
  }
  .services-header h2 {
    /* font-weight: 400; */
    font-size: 40px;
    margin-bottom: 1vw;
  }
  .services-tags{
    margin-bottom: 1vw;
  }
  .services-header p {
    font-size: 24px;
    line-height: 36px;
    margin-bottom: 1vw;
    /* font-weight: 300; */
  }




  .service-tag {
    font-size: 18px;
   width: 220px;
    height: 60px;
  }

  .services-content {
    padding: 40px;

  }

  .services-image img {
    width: 500px;
    height: 350px;
  }
  .services-description{
    width: 704px;
    /* border: 1px solid red; */

  }
  .services-description p {
    font-size: 20px;
    line-height: 40px;
  }

  .learn-more-btn {
    height: 60px;
    width: 180px;
    font-size: 18px;
  }
}

/* For 4K Screens (3840px) */
@media screen and (min-width: 3840px) {
  .services-section {
    padding: 100px 50px;
  }

  .services-header h2 {
    font-size: 48px;
  }

  .services-header p {
    font-size: 28px;
    line-height: 40px;
  }

  .service-tag {
    font-size: 20px;
    width: 220px;
    height: 70px;
  }

  .services-content {
    padding: 50px;
  }

  .services-image img {
    width: 600px;
    height: 420px;
  }

  .services-description p {
    font-size: 22px;
    line-height: 32px;
  }

  .learn-more-btn {
    height: 70px;
    width: 200px;
    font-size: 20px;
  }
}
@media screen and (max-width: 768px) {
  .services-section {
    /* width: 95%; */
    /* padding: 5vw 3vw; */
   
    border-radius: 5vw;
    /* border: 1px solid red; */
  }

  .services-header h2 {
    /* font-size: 5vw; */
    margin-bottom: 3vw;
  }

  .services-header p {
    /* font-size: 4vw; */
    line-height: 5vw;
    margin-bottom: 4vw;
  }

  .services-tags {
    gap: 2vw;
    font-size: 3vw;
    /* border: 1px solid red; */
  }

  .service-tag {
    width: 25vw;
    height: 5vw;
    font-size: 1.4vw;
    /* font-size: 3vw; */
    /* padding: 1.5vw 3vw; */
  }

  .services-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* padding: 3vw; */
    padding: 10px;
  }

  .services-image {
 
    max-width: 100%;
  }

  .services-image img {
    width: 35vw;
    height: 25vw;
    border-radius: 3vw;
   
  }

  .services-description {
   
    width: 45vw;
    height: 25vw;
  }
  
  .services-description p {
    font-size: 1.4vw;
    line-height: 18px;
  }

  .learn-more-btn {
    bottom: 2vw;
    width: 15vw;
    height: 5vw;
    font-size: 1.5vw;
  
  }
}
/* Mobile Navigation Arrows */
.mobile-nav-arrows {
  display: none; /* Hidden by default */
  justify-content: space-between;
  align-items: center;
  margin: 0 auto 3vw;
  width: 80%;
  position: relative;
}

.active-service-title {
 
  font-size: 4vw;
  font-weight: 500;
  color: white;
  text-align: center;
  flex-grow: 1;
  padding: 0 3vw;
}

.nav-arrow {
 
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: white;
  font-size: 6vw;
  width: 10vw;
  height: 10vw;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.nav-arrow:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.1);
}

/* Show arrows only on mobile */
@media screen and (max-width: 660px) {
  .services-section{}
  .active-service-title{
    max-width: 50%;
    border-radius: 12px;
    padding: 4px;
    border: 1px solid white;
    font-size: 9px;
  }
  .services-section h2{
    font-size: 5vw;
  }
  .mobile-nav-arrows {
    display: flex;
  }
  .services-header p{
    font-size: 14px;
    font-weight: 500;
  }
  
  .services-tags {
    display: none !important;
  }
  
  .services-content {
    flex-direction: column;
  }
  
  .services-image {
    margin-bottom: 5vw;
  }
  
  .services-image img {
    border: 5px solid #5c5b5b;
  }
  
  .services-description {
    width: 80vw !important;
    height: auto !important;
    text-align: center;
  }
  
  .services-description p {
    font-size: 9px;
    line-height: 26px;
  }
  
  .learn-more-btn {
    position: relative !important;
    bottom: auto !important;
    margin: 4vw auto 0 !important;
    width: 22vw !important;
    height: 8vw !important;
    font-size: 9px !important;
  }
}