.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 h2 {
  font-weight: 600;
  font-size: 24px;
  line-height: 1.5;
  letter-spacing: 0.03rem;
  z-index: 2;
  color: #018F83 !important;
}

.ui-ux-banner-top h4 {
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0.05rem;
  color: #0F0F0F;
  text-transform: unset;
  margin-bottom: 0;
  max-width: 1054px;
  margin: 0 auto;
}

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



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

.ui-ux-hero-text span {
  font-weight: 600;
}

/* new repeadted css after tag updated */
.user-experience-content h3 {
  font-weight: 600;
  font-size: 20px;
  line-height: 1.5;
  letter-spacing: 0.03rem;
  margin-bottom: 8px !important;
}



.single-card {
  max-width: 302px;
}

.single-card .subtitle {
  font-size: 18px
}

.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: 18px;
  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;
}

.user-experience-section {
  background: #FCFCFC;
}

.user-experience-section .double-circle-heading {
  z-index: 1;
  margin: 0 20px;
}

.ui-ux-industries {
  background: #FCFCFC;
  /* margin-top: 40px; */
}

.ui-ux-industries .double-circle-heading {
  z-index: 1;
}

/* common copied code */
.vision-text-sections {
  max-width: 694px;
  margin: 0 auto;
  gap: 16px;
}

.vision-text {
  color: #5C5C5C;
}

.logo-subtext {
  letter-spacing: 0.05rem;
  text-align: center;
}

.industry-focused-section {
  background: url('./../images/app-prototyping/bg.png');
  background-size: cover;
  width: 100%;
  overflow: hidden;
}

.industry-focused-card {
  backdrop-filter: blur(7px);
  border: 1px solid #EEEEEE;
  background: #ffffff;
  gap: 16px;
  border-radius: 16px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.industry-focused-img {
  max-width: 48px;
  max-height: 48px;
  overflow: hidden;
}

.industry-focused-card h3 {
  font-weight: 700;
  font-size: 18px;
  line-height: 1.5;
  letter-spacing: 0.03rem;
  color: #3C3C3B;
  margin-bottom: 0;
}

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

.industry-focused-section .gx-3 {
  --bs-gutter-x: 48px;
}

.why-cards {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.why-single-card {
  border-radius: 12px;
  border: 1px solid #018F83;
  display: flex;
  gap: 24px;
  height: 100%;
}

.why-card-img {
  min-width: 210px;
  min-height: 154px;
  overflow: hidden;
  border-radius: 12px 0 0 12px;
}

.why-single-card .texts {
  font-weight: 600;
  font-size: 20px;
}

.why-cards .gx-3 {
  --bs-gutter-x: 32px;
}

.why-cards .gy-3 {
  --bs-gutter-y: 32px;
}

.why-ux-oodles {
  overflow: hidden;
}

.why-ux-oodles h4 {
  text-transform: math-auto;
}

.why-ux-oodles .swiper-wrapper {
  margin-top: 30px !important;
}

.green-text {
  font-weight: 600;
  color: #018F83;
  text-decoration: none;
}

.gray-text {
  color: #2B2C2D !important;
}

.how-we-work {
  overflow: hidden;
  position: relative;
}


.how-text {
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0.03rem;
  text-align: center;
  color: #2B2C2D;
}

.mobile-dots {
  left: 0;
  top: 60%;
  width: 30%;
}

/* animation */
.how-animation {
  position: relative;
  height: 1200px;
  margin: 280px auto 210px auto;
  max-width: 1000px;
}

.break-card {
  position: absolute;
  /* transform: translate(-50%, -50%) scale(0); */
  /* opacity: 0; */
  border-radius: 12px;
  /* pointer-events: none; */
  box-shadow: 0px 4px 54px 0px #00000017;
  transition: background 0.3s;
}

/* Different background colors for each card */
.card1 {
  background: linear-gradient(0deg, rgba(255, 183, 168, 0.1) 0%, rgba(252, 123, 79, 0.1) 100%);
}

.rotate-one {
  transform: rotate(14deg);
  left: 56px;
  top: -220px;
}



.card2 {
  background: linear-gradient(0deg, rgba(186, 216, 255, 0.1) 0%, rgba(82, 160, 255, 0.1) 100%);
}

.rotate-two {
  transform: rotate(-10deg);
  left: 572px;
  top: -90px;
}

.card3 {
  background: linear-gradient(0deg, rgba(192, 255, 188, 0.1) 0%, rgba(78, 212, 0, 0.1) 100%);
}

.rotate-three {
  top: 220px;
  transform: rotate(10deg);
  left: 50px;
}

.rotate-four {
  transform: rotate(-10deg);
  right: 0;
  top: 338px;
}

.rotate-six {
  transform: rotate(-8deg);
  right: 40px;
  bottom: 44px;
}

.rotate-seven {
  bottom: -202px;
  transform: rotate(6deg);
  left: 100px;
}

.card4 {
  background: linear-gradient(0deg, rgba(210, 186, 255, 0.1) 0%, rgba(142, 82, 255, 0.1) 100%);
}

.card5 {
  background: linear-gradient(0deg, rgba(255, 183, 168, 0.1) 0%, rgba(252, 123, 79, 0.1) 100%);
}

.card6 {
  background: linear-gradient(0deg, rgba(255, 252, 188, 0.3) 0%, rgba(212, 209, 0, 0.3) 100%);
}

.rotate-five {
  transform: rotate(8deg);
  bottom: 206px;
  left: 0;
}


.step-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  border-radius: 20px;
  padding: 0 16px 16px 16px;
  max-width: 310px;
  position: relative;
  background: #fff;
  align-items: center;
}

.break-text {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  padding: 16px;
  border-radius: 16px;
  gap: 8px;
  width: 100%;
}

.break-text .texts {
  font-size: 18px;
}

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

.pin-img img {
  max-width: 60px;
  max-height: 60px;
}

.card-number {
  position: absolute;
  left: 24px;
  top: 36px;
  z-index: 1;
  max-width: 52px !important;
}

.card-number-two {
  top: 38px;
  left: 23px;
  max-width: 70px !important;
}

.card-number-four {
  top: 38px;
  left: 24px;
  max-width: 79px !important;
}

.card-number-six {
  top: 35px;
  left: 24px;
  max-width: 79px !important;
}

.card-number-five {
  max-width: 70px !important;
  top: 37px;
}

.card-number-three {
  top: 35px;
  max-width: 70px !important;
}

.card-number-seven {
  top: 35px;
  max-width: 76px !important;
}

.how-mobile-section {
  display: flex;
  flex-direction: column;
  padding-top: 14px;
}

.break-mobile-card {
  margin-top: 16px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  pointer-events: none;
  box-shadow: 0px 4px 54px 0px #00000017;
}

.how-dots {
  top: 20%;
  width: 30%;
}

.new-banner .form-banner-section {
  background: #F1F1FF;
}

.new-banner .new-banner-heading {
  color: #7176F8 !important;
}

@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;
  }
}

.hovering-square-dottes-one {
  width: 20%;
  top: 60%;
}



.logo-subtext {
  letter-spacing: 0.05rem;
  text-align: center;
}


/* common 1*/

.why-oodles-graphic {
  position: relative;
  overflow: hidden;
}


.why-oodles-content {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.single-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.single-content-img {
  height: 80px;
  width: 83px;
  max-width: 100%;
  max-height: 100%;
}

.single-content h3 {
  font-weight: 600;
  font-size: 18px;
  line-height: 1.5;
  letter-spacing: 0.03rem;
  color: #2B2C2D !important;
}

.single-content p {
  line-height: 1.5;
  letter-spacing: 0.05rem;
  color: #5C5C5C;
}

.why-oodles-row .gx-3 {
  --bs-gutter-x: 100px;
}

.why-oodles-row .gy-3 {
  --bs-gutter-y: 30px;
}

.single-content-head {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.single-content-head span {
  color: #018F83;
}

.proto-subtext {
  background: #F1FFF8D1;
  padding: 8px 16px;
  border-radius: 16px;
  color: #3C3C3B;
}

.proto-subtext b {
  color: #018F83;
}

.our-structured-section {
  background: #FCFCFC;
}

.structured-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
  border-radius: 12px;
  border: 1px solid #018F8333;
  height: 100%;
  background: #FEFEFE;
}

.structured-card-img {
  /* max-width: 242px; */
  max-height: 116px;
  border-radius: 8px;
  overflow: hidden;
}

.structured-card h3 {
  font-weight: 600;
  font-size: 18px;
  line-height: 1.5;
  letter-spacing: 0.03rem;
  color: #3C3C3B;
  text-align: center;
}

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

.our-structured-section .gx-3 {
  --bs-gutter-x: 28px;
}




.logo-subtext {
  letter-spacing: 0.05rem;
  text-align: center;
}

.why-oodles-graphic {
  position: relative;
  overflow: hidden;
}


.why-oodles-content {
  display: flex;
  flex-direction: column;
  gap: 48px;
}



.single-content h3 {
  font-weight: 600;
  font-size: 18px;
  line-height: 1.5;
  letter-spacing: 0.03rem;
  color: #2B2C2D !important;
}

.single-content p {
  line-height: 1.5;
  letter-spacing: 0.05rem;
  color: #5C5C5C;
}

.why-oodles-row .gx-3 {
  --bs-gutter-x: 100px;
}

.why-oodles-row .gy-3 {
  --bs-gutter-y: 30px;
}


.single-content-head {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.web-app-section {
  background: #F5FFFE;
}

.web-app-section h2 {
  font-weight: 600;
  font-size: 28px;
  line-height: 1.5;
  letter-spacing: 0.03rem;
  text-align: center;
  color: #2B2C2D;
}

.web-app-section .texts {
  color: #5C5C5C;
}

.web-app-section .single-content-img {
  max-height: 48px;
  max-width: 48px;
}

.web-app-img {
  max-width: 378px;
  max-height: 272px;
  border-radius: 16px;
  box-shadow: 12px 12px 0px 0px #6BC3B3;
  overflow: hidden;
}

.industry-focused-section {
  background: url('./../images/app-prototyping/bg.png');
  background-size: cover;
  width: 100%;
  overflow: hidden;
}

.industry-focused-card {
  backdrop-filter: blur(7px);
  border: 1px solid #EEEEEE;
  background: #ffffff;
  gap: 16px;
  border-radius: 16px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.industry-focused-img {
  max-width: 48px;
  max-height: 48px;
  overflow: hidden;
}

.industry-focused-card h4 {
  font-weight: 700;
  font-size: 18px;
  line-height: 1.5;
  letter-spacing: 0.03rem;
  color: #3C3C3B;
  margin-bottom: 0;
}

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

.industry-focused-section .gx-3 {
  --bs-gutter-x: 48px;
}


.choose-oodles-section {
  background: url('./../images/app-prototyping/bg2.png');
  background-size: cover;
  width: 100%;
  overflow: hidden;
}

.choose-oodles-section h2 {
  font-size: 28px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: #FFFFFF !important;
  position: relative;
  z-index: 1;
}

.choose-oodles-section .texts {
  color: #FFFFFF !important;
}

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

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

@media (max-width:1199px) {
  .why-cards .sub-texts {
    text-align: start;
  }

  .why-oodles-row .gx-3 {
    --bs-gutter-x: 60px;
  }
}

@media (max-width: 991px) {
  .fixed-back-navigation {
    top: 70px;
  }

  .single-card {
    max-width: 100%;
  }

  .single-card .subtitle {
    font-size: 18px
  }



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

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

  .ui-ux-hero-text h2 {
    font-size: 14px;
    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 h2 {
    font-size: 20px;
    /* margin-bottom: 8px !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%;
  }

  /*  */
  .user-experience-section .user-experience-content {
    margin-top: 24px;
  }

  .apart-mobile-card h4 {
    font-size: 16px;
  }

  .apart-mobile-card {
    gap: 8px;
  }

  .apart-mobile-card h4 {
    font-size: 16px;
  }

  .apart-mobile-card {
    gap: 8px;
  }

  .industry-focused-card h3 {
    font-size: 16px;
  }

  .industry-focused-card p {
    font-size: 14px;
  }

  .double-circle-heading::before {
    top: -36px;
  }

  .industry-focused-section .section-gap {
    gap: 16px;
  }

  .user-experience-content h3 {
    font-size: 16px !important;
    margin-bottom: 8px !important;
  }

  .why-ux-oodles .why-single-card {
    flex-direction: column;
    gap: 0;
    min-height: 398px;
    /* aspect-ratio: 1; */
  }

  .why-single-card img {
    border-radius: 12px 12px 0 0;
    width: 100%;
    height: 60% !important;
    max-height: 200px;
    object-fit: cover;
  }


  .why-ux-oodles .swiper-slide {
    max-width: 280px;
  }

  .single-mobile-card {
    margin: 20px !important;
    gap: 8px;
  }

  .why-single-card .texts {
    text-align: center;
  }

  .why-ux-oodles .texts {
    font-size: 14px;
  }

  .break-text .texts {
    font-size: 16px;
  }



  .why-oodles-graphic .double-circle-heading::before {
    z-index: -1;
    top: -30px;
  }

  .why-oodles-content {
    gap: 32px;
  }



  .single-content-head {
    align-items: center;
    gap: 16px;
  }

  .hide-text {
    display: none;
  }

  .single-content {
    gap: 8px;
  }

  .single-content p {
    text-align: center;
  }

  .single-content h3 {
    text-align: center;
    font-size: 16px;
  }







  /* common */


  .card-number {
    max-width: 60px !important;
    top: 19px;
    left: 26px;

  }

  .pin-img img {
    max-width: 48px;
    max-height: 48px;
  }

  .break-text p {
    font-size: 14px;
  }



  .card-number-two {
    top: 25px;
    max-width: 70px !important;
  }

  .card-number-three {
    top: 24px;
    max-width: 70px !important;
  }

  .card-number-four {
    top: 31px;
    max-width: 70px !important;
  }

  .card-number-five {
    top: 26px;
    max-width: 70px !important;
  }

  .card-number-six {
    top: 28px;
    max-width: 70px !important;
  }

  .card-number-seven {
    top: 32px;
  }

  .step-card {
    max-width: 100%;
  }

  .why-oodles-graphic .double-circle-heading::before {
    z-index: -1;
    top: -30px;
  }

  .why-oodles-content {
    gap: 32px;
  }

  .single-content-img {
    height: 48px;
    width: 50px;
    max-width: 100%;
    max-height: 100%;
    overflow: hidden;
  }

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

  .single-content-head {
    align-items: center;
    gap: 16px;
  }

  .hide-text {
    display: none;
  }


  .single-content p {
    text-align: center;
  }

  .single-content h3 {
    text-align: center;
    font-size: 16px;
  }

  .hide-text {
    display: none;
  }

  .structured-card h3,
  .industry-focused-card h4 {
    font-size: 16px;
  }

  .structured-card p {
    font-size: 14px;
  }

  .web-app-section h2,
  .choose-oodles-section h2 {
    font-size: 22px;
  }

  .industry-focused-card p {
    font-size: 14px;
  }

  .double-circle-heading::before {
    top: -36px;
  }

  .industry-focused-section .section-gap {
    gap: 16px;
  }

  .user-experience-section .main-container {
    padding: unset !important;
  }

  .px-20 {
    padding-left: 20px;
    padding-right: 20px;
  }
}


@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: 56px;
    width: 56px;
  }

  .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: 575px) {

  /* comm */
  .why-oodles-content {
    gap: 30px;
  }

}

@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;
  }

  .vision-text-sections {
    gap: 0;
  }
}


@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;
  }
}