.bg--pattern {
  background-image: url("/assets/images/shapes/shape-7.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom;
}



.t--paragraph {
  --minFontSize: 12px;
  --maxFontSize: 16px;
  --scaler: 7vw;
  font-size: clamp(var(--minFontSize), var(--scaler), var(--maxFontSize));
  font-weight: 400;
  line-height: 30px;
  color: #333;
  padding-bottom: 8px;
}

.gray--title {
  --minFontSize: 16px;
  --maxFontSize: 32px;
  --scaler: 7vw;
  font-size: clamp(var(--minFontSize), var(--scaler), var(--maxFontSize));
  font-weight: 900;
  color: rgb(213, 213, 213);
  padding-bottom: 8px;
}

.green--title {
  --minFontSize: 16px;
  --maxFontSize: 32px;
  --scaler: 7vw;
  font-size: clamp(var(--minFontSize), var(--scaler), var(--maxFontSize));
  font-weight: 900;
  color: $c-second;
  padding-bottom: 8px;
}

.section--100 {
  padding: 100px 0;
}
.section--80 {
  padding: 80px 0;
}
.section--60 {
  padding: 60px 0;
}
.section--40 {
  padding: 40px 0;
}

.section--20 {
  padding: 20px 0;
}



.nineasec--welcome--area {
  &--img {
    width: 100%;
    text-align: center;
    img {
      width: 100%;
      border-radius: 8px;
      border: 4px solid $c-grey-b9;
    }
  }
  &--p {
    line-height: 30px;
    --minFontSize: 14px;
    --maxFontSize: 16px;
    --scaler: 7vw;
    font-size: clamp(var(--minFontSize), var(--scaler), var(--maxFontSize));
  }
}

.nineasec--section {
  text-align: center;

  &--subtitle {
    font-weight: 400;
    font-size: 0.875rem;
    line-height: 1.42;
    letter-spacing: 4.2px;
    color: $c-second;
    text-transform: uppercase;
    padding-top: 10px;
  }

  &--title {
    color: $c-main;
    font-family: "Palanquin Dark", serif;
    padding-top: 10px;
    --minFontSize: 2rem;
    --maxFontSize: 3.25rem;
    --scaler: 7vw;
    font-size: clamp(var(--minFontSize), var(--scaler), var(--maxFontSize));
    position: relative;

    &:after {
      background: $c-second;
      // background: linear-gradient(
      //   135deg,
      //   adjust-hue($c-second, -20deg),
      //   $c-second
      // );
      background: $c-second;
      display: block;
      content: "";
      position: absolute;
      width: 20%;
      margin: 0 auto;
      left: 0;
      border-radius: 10px;
      right: 0;
      height: 4px;
      bottom: -15px;
      // content: "";
      // display: block;
      // width: 224px;
      // height: 22px;
      // background: url(/assets/images/lines.png) no-repeat center;
      // position: absolute;
      // left: 50%;
      // margin-left: -180px;
      // bottom: -24px;
    }
  }
  &--title-w {
    color: white;
    font-family: "Palanquin Dark", serif;
    padding-top: 10px;
    --minFontSize: 2rem;
    --maxFontSize: 3.25rem;
    --scaler: 7vw;
    font-size: clamp(var(--minFontSize), var(--scaler), var(--maxFontSize));
    position: relative;

    &:after {
      background: $c-second;
      // background: linear-gradient(
      //   135deg,
      //   adjust-hue($c-second, -20deg),
      //   $c-second
      // );
      background: white;
      display: block;
      content: "";
      position: absolute;
      width: 20%;
      margin: 0 auto;
      left: 0;
      border-radius: 10px;
      right: 0;
      height: 4px;
      bottom: -15px;
      // content: "";
      // display: block;
      // width: 224px;
      // height: 22px;
      // background: url(/assets/images/lines.png) no-repeat center;
      // position: absolute;
      // left: 50%;
      // margin-left: -180px;
      // bottom: -24px;
    }
  }

  &--icon {
    img {
      width: 100px;
    }
  }

  p {
    font-style: italic;
    color: $c-main;
    padding-top: 10px;
  }
}



// 

.why--section--area {
  // background-color: #fbfbff;
  border-bottom: 2px dashed rgba(gray, .08);

  @media (max-width: 800px)  {
   padding-top: 80px;
  }

  &--description {
  }
}
.app--section--area {
  margin-bottom: 60px
}

.features--section--area {
  background-color: rgba($c-second, .04);
  // border-top: 2px dashed #fe5d7f2e;
  // border-bottom: 2px dashed #fe5d7f2e;

  @media (max-width: 800px)  {
   padding-top: 80px;
  }

  &--item {
    padding: 24px 32px;
    text-align: center;
    transition: all .8s;
    background-color: white;
    border-radius: 6px;
    @media (max-width: 800px)  {
      padding: 16px 16px;
    }

    &:hover   {
      transform: scale(1.1);
      background-color: rgba($c-white, .02);
      border-radius: 8px;
      

      @media (max-width: 800px) {
        transform: scale(1.02);
      }
    }
    &:hover  &--img  {
      opacity: 1;
    }
 
    &--img {
      // width: 100%;
      // overflow: hidden;
      position: relative;
      // opacity: .8;

      @media (max-width: 800px) {
        opacity: 1;
      }

      img {
        height: 80px;
        object-fit: cover;
        transition: all .8s;
        @media (max-width: 800px)  {
          height: 60px;
        }
      }

      svg {
        height: 80px;
        object-fit: cover;
        transition: all .8s;
        @media (max-width: 800px)  {
          height: 60px;
        }
      }

      
    }

    h4 {
      padding-top: 20px;
      --minFontSize: 14px;
      --maxFontSize: 18px;
      --scaler: 6vw;
      font-size: clamp(var(--minFontSize), var(--scaler), var(--maxFontSize));
      color: $c-main;
      line-height: 28px;
      margin-bottom: 8px;
      font-weight: 700;
    }

    p {
      --minFontSize: 12px;
      --maxFontSize: 16px;
      --scaler: 6vw;
      font-size: clamp(var(--minFontSize), var(--scaler), var(--maxFontSize));
      color: $c-gray;
    }

  }

  &--store {
    display: flex;
    align-items: center;
    justify-content: center;

    a {
      img {
        height: 50px;
      }

      padding-right: 12px;

      &:last-child {
        padding-right: 0;
      }
    }
  }
}