/* Variables */
:root{
  /* ---- Primary ---- */
    --RedColor: hsl(0, 78%, 62%);
    --CyanColor: hsl(180, 62%, 55%);
    --OrangeColor: hsl(34, 97%, 64%);
    --BlueColor: hsl(212, 86%, 64%);
  /* ---- Neutral ---- */
    --VeryDarkBlue: hsl(234, 12%, 34%);
    --GrayishBlue: hsl(229, 6%, 66%);
    --VeryLightGray: hsl(0, 0%, 98%);
}
/* Global Rules */
  * {
    padding: 0;
    margin: 0;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
  body {
    min-height: 94vh;
    width: 100%;
    font-size: 0.937rem;
    font-family: 'Poppins', sans-serif;
    background-color: var(--VeryLightGray);
  }
/* Styling The Container */
  .container {
    margin: 75px auto 0;
    display: flex;
    flex-direction: column;
  }
  /* Styling The Heading */
  .heading {
    margin: auto;
    text-align: center;
  }
  .title {
    font-size: 2.29rem;
    color: var(--VeryDarkBlue);
    margin: 0;
    line-height: 54px;
  }
  @media (max-width: 650px) {
    .title {
      font-size: 1.65rem;
    }
  }
  .main.title{
    font-weight: 200;
  }
  .sub.title {
    font-weight: 600;
  }
  .description {
    color: var(--GrayishBlue);
    width: 500px;
    max-width: 100%;
    margin: 15px auto 0;
    font-weight: 400;
    line-height: 24px;
  }
  @media (max-width: 767px) {
    .description {
      width: 85%;
    }
  }
/* Styling The Cards */
  .cards {
    margin: 70px auto 50px;
    width: 90%;
    max-width: 1100px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
  }
  @media (max-width: 1141px){
    .cards,
    .holder {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 30px;
      margin-bottom: 30px;
    }
  }
  .holder, 
  .super,
  .calc{
    margin: auto;
  }
  .holder {
    display: flex;
    flex-direction: column;
    gap: 32px;
  }
  .card {
    background-color: white;
    padding: 25px 30px 35px;
    border-radius: 5px;
    border-top: 4px solid transparent;
    height: 245px;
    display: flex;
    flex-direction: column;
    gap: 35px;
    -webkit-box-shadow: 2px 8px 14px 0 rgb(198 207 255 / 60%);
    -moz-box-shadow: 2px 8px 14px 0 rgb(198 207 255 / 60%);
    box-shadow: 2px 8px 14px 0 rgb(198 207 255 / 60%);
    transition: 0.3s;
  }
  .card:hover {
    transform: scale(1.05);
  }
  .info {
    margin-top: 1px;
  }
  .super{
    border-color: var(--CyanColor);
  }
  .team {
    border-color: var(--RedColor);
  }
  .karma {
    border-color: var(--OrangeColor);
  }
  .calc{
    border-color: var(--BlueColor);
  }
  @media (max-width: 1141px) {
    .team,
    .karma {
      width: 100%;
    }
    .super,
    .holder,
    .calc {
      width: 50%;
    }
  }
  @media (max-width: 767px) {
    .super,
    .holder,
    .calc {
      width: 95%;
    }
  }
  .info > h3 {
    color: var(--VeryDarkBlue);
    font-size: 1.25rem;
  }
  .info > p {
    color: var(--GrayishBlue);
    line-height: 24px;
    padding-top: 8px;
    font-size: 0.8rem;
  }
  .card > img {
    display: flex;
    margin-left: auto;
  }
  .card:hover:not(.card.karma) > img {
    animation: rotate-vertical 0.6s;
  }
  @keyframes rotate-vertical {
    from {
      transform: rotateY(0deg);
    }
    to {
      transform: rotateY(360deg);
    }
  }
  .card.karma:hover > img {
    animation: pop 0.6s;
  }
  @keyframes pop {
    0% {
      transform: scale(1.1,1.1);
    }
    50% {
      transform: scale(1.2,1.2);
    }
    100% {
      transform: scale(1,1);
    }
  }