.fixed-back-navigation {
  background-color: #fff;
  top: 80px;
  position: sticky;
  width: 100%;
  z-index: 100;
  transition: border-bottom 0.3s ease;
}

.fixed-back-navigation.scrolled {
  border-bottom: 1px solid #D2D6DB;
}



.ui-ux-blue-wrapper .head {
  gap: 0 !important;
}


.ui-ux-banner-top h3 {
  font-weight: 600;
  font-size: 32px;
  line-height: 1.5;
  letter-spacing: 0.03rem;
  z-index: 2;
}

.ui-ux-banner-top h4 {
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0.05rem;
  color: #5C5C5C;
}

.ui-ux-banner-top span {
  font-weight: 600;
}

.ui-ux-hero-text .main-container,
.apart-section .main-container {
  padding: 40px 0 !important;

}

.ui-ux-hero-text h2 {
  text-align: center;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.5;
  letter-spacing: 0.03rem;
}

.ui-ux-hero-text span {
  font-weight: 600;
}
.user-experience-subcontent h4{
 margin-bottom: 16px;
}
.single-card{
  max-width: 302px;
}
.single-card .subtitle{
  font-size: 20px
}

.apart-svg {
  width: 100%;
  height: auto;
}

.apart-image-section {
  position: relative;
}

.apart-card {
  border: 1px solid #3083C5;
  padding: 16px;
  border-radius: 12px;
}

.apart-card h4 {
  font-weight: 600;
  font-size: 20px;
  line-height: 1.5;
  letter-spacing: 0.03rem;
}

.apart-card p {
  color: #5C5C5C;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0.05rem;
}

.apart-card span {
  font-weight: 600;
}

.apart-card-one {
  width: 100%;
  max-width: 450px;
  /* aspect-ratio: 3 / 1; */
  position: absolute;
  top: 0%;
  left: 55%;
}

.apart-card-two {
  width: 100%;
  max-width: 360px;
  /* aspect-ratio: 2 / 1; */
  position: absolute;
  top: 32%;
  right: 69%;
}

.apart-card-three {
  width: 100%;
  max-width: 390px;
  /* aspect-ratio: 392 / 156; */
  position: absolute;
  top: 33%;
  left: 65%;
}

.apart-card-four {
  width: 100%;
  max-width: 412px;
  /* aspect-ratio: 206 / 75; */
  position: absolute;
  top: 74%;
  right: 55%;
}

.apart-mobile-image-section {
  position: relative;
  height: 1120px;
  padding: 0 20px;
}

.apart-mobile-icon-one {
  position: absolute;
  top: 0;
  left: 75%;
}

.apart-mobile-icon-two {
  position: absolute;
  top: 28%;
  right: 75%;
}

.apart-mobile-icon-three {
  position: absolute;
  top: 54%;
  left: 75%;
}

.apart-mobile-icon-four {
  position: absolute;
  top: 78%;
  right: 75%;
}

.apart-mobile-card {
  padding: 16px;
  border: 1px solid #3083C5;
  border-radius: 12px;
  gap: 16px;
  display: flex;
  flex-direction: column;
}

.apart-mobile-card h4 {
  font-weight: 600;
  font-size: 18px;
  line-height: 1.5;
  letter-spacing: 0.03rem;
  margin-bottom: 0;
}

.apart-mobile-card p {
  color: #5C5C5C;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0.05rem;
}

.apart-mobile-card span {
  font-weight: 600;
}

.apart-mobile-card-one {
  max-width: 262px;
  position: absolute;
  top: 5%;
}

.apart-mobile-card-two {
  max-width: 244px;
  position: absolute;
  right: 20px;
  top: 362px;
}

.apart-mobile-card-three {
  max-width: 244px;
  position: absolute;
  top: 657px;
}

.apart-mobile-card-four {
  max-width: 264px;
  position: absolute;
  top: 930px;
  right: 20px;
}



.apart-mobile-container {
  margin: auto;
  max-width: 576px;
}




.card-glow {
  /* filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.7)); */
  transition: filter 0.3s ease;
}

.icon-glow {
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.9));
  transition: filter 0.3s ease;
}

.apart-mobile-card {
  background-color: white;
  transition: background-color 0.3s ease;
}


@media screen and (max-width: 1200px) {
  .apart-card-one {
    left: 50%;
    max-width: 390px;
  }

  .apart-card-two {
    top: 33%;
    max-width: 319px;
  }

  .apart-card-three {
    top: 35%;
    max-width: 340px;
  }

  .apart-card-four {
    right: 55%;
    max-width: 364px;
  }
}

@media screen and (max-width: 1200px) {

  .apart-card-two {
    top: 28%;
    max-width: 291px;
  }

}

@media screen and (max-width: 991px) {
  .fixed-back-navigation {
    top: 70px;
}
.single-card{
  max-width: 100%;
}
.single-card .subtitle{
  font-size: 18px
}

.user-experience-subcontent h4{
 margin-bottom: 16px !important;
}

  .blue-header {
    padding: 32px 20px;
  }

  .ui-ux-blue-wrapper .blue-header-text {
    font-size: 16px;
    color: #2B2C2D;
  }

  .ui-ux-hero-text h2 {
    font-size: 16px;
    padding: 0 20px;
  }


  .ui-ux-industries p {
    margin-bottom: 30px !important;
    font-size: 14px;
  }

  .apart-section .main-container {
    padding: 48px 20px 30px 20px !important;
  }

  .industry-types-top,
  .industry-types,
  .industry-types-bottom {
    gap: 30px;
    flex-direction: column;
  }

  .ui-ux-banner-top h3 {
    font-size: 24px;
    margin-bottom: 16px !important;
  }

  .ui-ux-banner-top h4 {
    font-size: 14px;
    color: #0F0F0F;
    margin-bottom: 0;
  }

  .apart-image-section {
    display: none;
  }

  .our-work-section .hovering-square-dottes-one {
    width: 50%;
  }
  
}


@media (min-width: 993px) {
  .apart-mobile-image-section {
    display: none !important;
  }
}

@media (min-width: 720px) {
  .apart-mobile-icon-one img {
    height: 150px;
    width: 150px;
  }
}

@media (min-width: 570px) {

  .apart-mobile-icon-one img,
  .apart-mobile-icon-two img,
  .apart-mobile-icon-three img,
  .apart-mobile-icon-four img {
    height: 100px;
    width: 100px;
  }
  .apart-mobile-card-one {
    max-width: 305px;
  }
  .apart-mobile-card-two {
    max-width: 286px;
  }
  .apart-mobile-card-three {
    max-width: 285px;
  }
  .apart-mobile-card-four {
    max-width: 297px;
  }
}


@media (max-width: 570px) {

  .apart-mobile-icon-two {
    top: 27%;
  }

  .apart-mobile-icon-three {
    top: 55%;
  }

  .apart-mobile-icon-four {
    top: 80%;
  }

  .apart-mobile-card-two {
    top: 340px;
  }

  .apart-mobile-card-three {
    top: 630px;
  }

  .apart-mobile-card-four {
    top: 875px;
  }

  .apart-mobile-image-section {
    height: 1050px;
  }
}


@media (max-width: 370px) {
  .apart-mobile-icon-one {
    top: -17px;

  }

  .apart-mobile-icon-two {
    top: 27%;
  }

  .apart-mobile-icon-three {
    top: 55%;
  }

  .apart-mobile-icon-four {
    top: 78%;
    z-index: 2;
  }
}