/* INTRO ANIMATION */

.solutions-into-box {
  display: flex;
  width: 100%;
  flex-direction: column;
  justify-content: flex-end;
}
.solutions-intro {
  position: relative;
  height: 65vh;
  overflow: hidden; 
  display: flex;
  flex-direction: column;
}
.intro-text {
  text-align: center;
  font-size: 36px;
  font-weight: 400;
  margin: 0 auto;
}
.intro-text span {
  font-size: 42px;
  font-weight: 700;
}
.intro-image {
  position: relative;
  top: 28%;
  border-radius: 24px;
  height: 500px;
  width: 90%;
  overflow: hidden;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  z-index: 2;
  align-items: center;
}
.intro-image .img-bg {
    position: absolute;
    object-fit: cover;
    object-position: center;
    height: 100%;
    width: 100%;
    top: 0;
    z-index: 1;
    margin: auto;
    border-radius: 24px;
    background-color: #000000;
}
.intro-image img {
  position: relative;
  width: 40%;
  height: 30%;
  z-index: 1;
  margin-top: 12%;
}

.imagine-text {
  position: absolute;
  top: 0px;
  height: 100vh;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  display: flex;
  gap: 12px;
  background: #f7f7ff;
  transform: translateY(100vh);
  right: 0;
  width: 100vw;
  left: calc(-50vw + 50%);
  text-align: center;
}
.imagine-text .pre-text {
  margin: 18px;
  font-size: 36px;
  font-weight: 700;
}
.imagine-text .main-text {
  font-size: 32px;
  font-weight: 500;
  text-align: center;
}
.imagine-text .sub-text {
  font-size: 24px;
  font-weight: 500;
  color: #aaaaaa;
}

/* FABRIC ANIMATION */
.solutions-intro-container {
  z-index: 99;
  position: relative;
}
.pin-spacer {
  background-color: #f7f7ff;
}
.solutions-intro-container, .fabric-animation {
  overflow: hidden;
}
.solutions-intro-container > .container,
.fabric-animation > .container {
  height: calc(100vh - 130px);
  position: relative;
}
.fabric-animation {
  background-color: #000;
}
.fabric-container {
  position: relative;
  top: 50px;
  color: #ffffff;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 64px;
  height: inherit;
  flex-direction: column;
  justify-content: space-around;
}
.fabric-content {
  z-index: 2;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: fit-content;
  height: 335px;
  align-self: center;
  justify-content: space-between;
}
#aide-fabric-logo {
  position: absolute;
  height: calc(100vh - 130px);
}
.fabric-container .text {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  opacity: 0;
}
.fabric-container .introducing-box {
  align-self: center;
  width: 100%;
}
.fabric-container .introducing-box-dup {
  top: -10%;
  width: 62%;
  align-self: flex-end;
}
.fabric-container .text2 {
  top: -20%;
  text-align: center;
  width: 62%;
  padding: 0 3%;
  align-self: flex-end;
  gap: 18px;
}
.fabric-container .pre-text {
  font-size: 18px;
  opacity: 0.8;
}
.fabric-container .fabric-heading {
  font-size: 40px;
}
.fabric-container .fabric-heading img {
  height: 46px;
}
.fabric-container .introducing-sub-box .content {
  font-size: 20px;
}
.fabric-container .introducing-sub-box .sub-text {
  font-size: 20px;
  padding: 0 10.8%;
}

/* THREAD ANIMATION */

.thread-animation-container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.thread-animation-container .thread-animation-wrapper {
  height: calc(100vh - 130px);
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 800px;
}
.line-container {
  position: absolute;
  top: 0;
  z-index: -1;
  overflow: hidden;
  width: 100vw;
  left: calc(-50vw + 60%);
}
.line-container img {
  width: 100%;
  top: -170px;
  position: relative;
}
.thread-animation-content {
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: center;
  justify-content: center;
  position: relative;
  top: 0;
  height: inherit;
  width: 100%;
}

@media (max-width: 1199.98px) {
  .imagine-text .pre-text {
    font-size: 28px;
  }
  .imagine-text .main-text {
    font-size: 28px;
  }
  .fabric-container .content {
    font-size: 20px;
  }
  .fabric-container .sub-text {
    font-size: 20px;
  }
}
@media (max-width: 991.98px) {
  .intro-text {
    font-size: 26px;
  }
}
@media (max-width: 767.98px) { 
  .intro-text {
    font-size: 22px;
  }
  .intro-text span {
    font-size: 24px;
    font-weight: 700;
  }
}

/* Solution box sections start */
.thread-animation-content .solution-box-wrapper {
  opacity: 0;
  position: relative;
  transform: translateY(325px);
}
.solutions-section {
  height: inherit;
}
.thread-animation-content .solutions-section > .container  {
  display: flex;
  flex-direction: column;
  justify-items: center;
  align-items: center;
  justify-content: center;
}
.solutions-section .h2 {
  font-size: 38px;
  font-weight: 600;
}
.solution-box {
  background: #fff;
  border-radius: 10px;
  padding: 48px 24px 32px 32px;
  display: flex;
  flex-wrap: wrap;
  height: 100%;
  min-height: 370px;
}
.solution-box p {
  font-size: 14px !important;
  line-height: 21px !important;
  color: var(--black-60, rgba(0, 0, 0, 0.60));
  margin-bottom: 40px;
}
.box-logo {
  margin: 0 0 34px 0;
}
.solution-cta {
  font-size: 16px;
  color: #000;
  border: 1px solid #000;
  padding: 10px 20px;
  border-radius: 4px;
  text-decoration: none;
  transition: 0.5s;
}
.solution-cta:hover {
  background: #000;
  color: #fff;
}


/* New Fabric section css */
.aide-fabric-wrap
{
  min-height: 768px;
  height: calc(100vh - 130px);
}
.aide-fabric-text .title
{
font-size: 16px;
margin: 80px 0 0 0;
}
.aide-fabric-text .fabric-text-bold
{
  font-size: 18px;
  font-weight: 500;
  margin: 40px 0 32px 0;
}
.aide-fabric-content .fabric-text
{
  font-size: 18px;
}
/* New Fabric section css end */

/* Solutions Page Animations */
/* Solutions Page Animations */

.animate-solutions-intro .intro-image {
  animation: animateIntroImg 2s ease-out 0.6s forwards;
  -webkit-animation: animateIntroImg 2s ease-out 0.6s forwards;

  animation-name: animateIntroImg;
  animation-duration: 2s;
  animation-delay: 0.6s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;

  -webkit-animation-name: animateIntroImg;
  -webkit-animation-duration: 2s;
  -webkit-animation-delay: 0.6s;
  -webkit-animation-timing-function: ease-out;
  -webkit-animation-fill-mode: forwards;
}

@keyframes animateIntroImg {
    0% {
      width: 90%;
      top: 28%;
    }
    100% {
      width: 100%;
      top: 12%;
    }
}
@-webkit-keyframes animateIntroImg {
  0% {
    width: 90%;
    top: 28%;
  }
  100% {
    width: 100%;
    top: 12%;
  }
}


.animate-solutions-intro2 .intro-text {
  animation: animateIntroText1 3s ease-out forwards;
  -webkit-animation: animateIntroText1 3s ease-out forwards;

  animation-name: animateIntroText1;
  animation-duration: 3s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;

  -webkit-animation-name: animateIntroText1;
  -webkit-animation-duration: 3s;
  -webkit-animation-timing-function: ease-out;
  -webkit-animation-fill-mode: forwards;
}

@keyframes animateIntroText1 {
    0% {
      transform: translateY(0);
      height: 150px;
    }
    100% {
      transform: translateY(-325px);
      height: 0;
    }
}

@-webkit-keyframes animateIntroText1 {
  0% {
    -webkit-transform: translateY(0);
    height: 150px;
  }
  100% {
    -webkit-transform: translateY(-325px);
    height: 0;
  }
}

.animate-solutions-intro2 .img-bg {
  animation: animateImgBg 3s ease-out forwards;
  -webkit-animation: animateImgBg 3s ease-out forwards;

  animation-name: animateImgBg;
  animation-duration: 3s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;

  -webkit-animation-name: animateImgBg;
  -webkit-animation-duration: 3s;
  -webkit-animation-timing-function: ease-out;
  -webkit-animation-fill-mode: forwards;
}

@keyframes animateImgBg {
    0% {
        border-radius: 24px;
        height: 100%;
        width: 100%;
    }
    100% {
        border-radius: 45px;
        height: 0;
        width: 0;
    }
}
@-webkit-keyframes animateImgBg {
  0% {
      border-radius: 24px;
      height: 100%;
      width: 100%;
  }
  100% {
      border-radius: 45px;
      height: 0;
      width: 0;
  }
}

.animate-solutions-intro2 .intro-image img {
  animation: animateImagineImg 2.5s ease-out forwards;
  -webkit-animation: animateImagineImg 2.5s ease-out forwards;

  animation-name: animateImagineImg;
  animation-duration: 2.5s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;

  -webkit-animation-name: animateImagineImg;
  -webkit-animation-duration: 2.5s;
  -webkit-animation-timing-function: ease-out;
  -webkit-animation-fill-mode: forwards;
}

@keyframes animateImagineImg {
    0% {
        width: 40%;
        height: 30%;
        margin-top: 12%;
    }
    100% {
       width: 25%;
       height: 13%;
       margin-top: 0;
    }
}
@-webkit-keyframes animateImagineImg {
  0% {
      width: 40%;
      height: 30%;
      margin-top: 12%;
  }
  100% {
     width: 25%;
     height: 13%;
     margin-top: 0;
  }
}

.animate-imagine-text {
  transform-origin: center;
  -webkit-transform-origin: center;

  animation: animateImagineText 3s ease-out forwards;
  -webkit-animation: animateImagineText 3s ease-out forwards;

  animation-name: animateImagineText;
  animation-duration: 3s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;

  -webkit-animation-name: animateImagineText;
  -webkit-animation-duration: 3s;
  -webkit-animation-timing-function: ease-out;
  -webkit-animation-fill-mode: forwards;
}

@keyframes animateImagineText {
    0% {
      transform: translateY(100vh);
    }

    100% {
      transform: translateY(0px);
    }
}
@-webkit-keyframes animateImagineText {
  0% {
    -webkit-transform: translateY(100vh);
  }

  100% {
    -webkit-transform: translateY(0px);
  }
}

.animate-solution-boxes {
  animation: animateSolutionBoxes 1.8s ease-out forwards;
  -webkit-animation: animateSolutionBoxes 1.8s ease-out forwards;

  animation-name: animateSolutionBoxes;
  animation-duration: 1.8s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;

  -webkit-animation-name: animateSolutionBoxes;
  -webkit-animation-duration: 1.8s;
  -webkit-animation-timing-function: ease-out;
  -webkit-animation-fill-mode: forwards;

}

@keyframes animateSolutionBoxes {
    0% {
     opacity: 0;
     transform: translateY(325px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
}
@-webkit-keyframes animateSolutionBoxes {
  0% {
   opacity: 0;
   -webkit-transform: translateY(325px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
  }
}

.blur-container-bg {
  animation: blurContainerBg 1.5s ease-out forwards;
  -webkit-animation: blurContainerBg 1.5s ease-out forwards;

  animation-name: blurContainerBg;
  animation-duration: 1.5s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;

  -webkit-animation-name: blurContainerBg;
  -webkit-animation-duration: 1.5s;
  -webkit-animation-timing-function: ease-out;
  -webkit-animation-fill-mode: forwards;
}

@keyframes blurContainerBg {
    100% {
      background: rgba(196,195,255, 0.8);
    }
}
@-webkit-keyframes blurContainerBg {
  100% {
    background: rgba(196,195,255, 0.8);
  }
}

@media (max-width: 991.98px) {
  .solutions-section {
    height: 100%;
  }
  .solutions-section .h2 {
    font-size: 28px;
  }
  .thread-animation-container .thread-animation-wrapper {
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 70px 0;
  }
  .line-container{display: none;}
  .aide-fabric-wrap {
    height: 100%;
    padding: 70px 0;
  }
  .solutions-intro-container > .container, .fabric-animation > .container {
    height: 100%;
    padding: 70px 0;
  }
  }