/* Why choose us section  */
.why-choose-section {
  padding: 2vw;

  .why-heading {
    text-align: center;
    align-items: center;
    display: flex;
    flex-direction: column;

    h1 {
      font-size: 2.5vw;
      font-weight: 700;
      margin: 1vw 0;
    }

    .para {
      .para-text {
        font-weight: 500;
        line-height: 4vh;
        color: #000000;

      }
    }
  }

  .about-cards {
    justify-content: center;
    display: flex;

    .cards {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1vw;

      .col-top {
        animation: slidetopCol 3s ease forwards;
      }

      .col-up-one {
        animation: slideInColOne 3s ease forwards;
      }

      .col-up-two {
        animation: slideInColTwo 3.5s ease forwards;
      }

      .col-up-three {
        animation: slideInColThree 4s ease forwards;
      }

      .card-details {
        border: 2px solid #B7C6C4;
        border-radius: 15px;
        width: 25vw;
        height: 25vh;
        padding: 1vw;
        display: flex;
        flex-direction: column;
        align-items: center;

        .why-img {
          margin-top: 1vh;
          height: 8vh;
        }

        h2 {
          font-size: 1vw;
          font-weight: 600;
          margin: 0.5vw;
        }

        p {
          text-align: center;
          font-size: 1vw;
          color: #474747;
        }
      }
    }
  }
}

@keyframes slidetopCol {
  0% {
    transform: translateY(-120%);
  }

  100% {
    transform: translateY(0);
  }
}

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

  100% {
    transform: translateY(0);
  }
}

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

  100% {
    transform: translateY(0);
  }
}

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

  100% {
    transform: translateY(0);
  }
}

@media (min-width: 320px) and (max-width: 668px) {
  .why-choose-section {
    .why-heading {
      h1 {
        font-size: 6vw;
      }
    }

    .cards {
      grid-template-columns: repeat(1, 1fr) !important;
      gap: 3vw !important;

      .card-details {
        width: 80vw !important;
        height: auto !important;

        h2 {
          font-size: 4vw !important;
          margin: 2vw !important;
        }

        p {
          font-size: 3vw !important;
        }
      }
    }
  }

  .col-top,
  .col-up-one,
  .col-up-two,
  .col-up-three {
    animation: none !important;
  }
}

@media (min-width: 668px) and (max-width: 1024px) {
  .card-details {
    width: 30vw !important;
    height: auto !important;

    h2 {
      font-size: 1.5vw !important;

    }

    p {
      font-size: 1.5vw !important;
    }
  }
}