/* Card QuickBar Contact header */

.card-quickcontact-top {
  padding: 1rem;
  animation: translateXneg 800ms;
  background-color: var(--color-primary);
}

@media screen and (min-width: 1200px) {
  .card-quickcontact-top {
    padding: 3rem 2rem;
  }
}

/* Card WhyUs */

.card-whyus {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: white;
  padding: 1rem;
  height: 100%;
  transition: 200ms ease-out;
}

/* Card Advantages */

.card-advantages {
  box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.082);
  padding: 2rem;
  height: 100%;
  background-color: white;
  border-radius: 5px;
  transition: 200ms ease;
}

.card-advantages * {
  transition: 200ms ease;
}

/* Card About */

.card-about {
  width: 100%;
}

/* Card Services */

.card-services {
  padding: 2rem;
  background-color: white;
  border-radius: 5px;
  transition: 200ms ease-in;
}

.card-services * {
  transition: 200ms ease-in;
}

.card-services-temp {
  transition: 200ms ease-in;
  background-color: white;
  height: 100%;
  border-radius: 3px;
  transition: 200ms ease-in;
}

.card-services-content {
  padding: 2rem;
  height: 100%;
}

/* Card Certificate */

.card-certificate {
  border: 1px solid rgba(0, 0, 0, 0.123);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  width: 90%;
  border-radius: 5px;
  transition: 200ms ease-out;
}

.card-certificate * {
  transition: 200ms ease-out;
}

/* Card Prices */

.card-prices {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  background-color: white;
  width: 100%;
  height: 100%;
  padding: 2rem;
  position: relative;
  overflow: hidden;
  border-radius: 5px;
}

/* Card Gallery */

.card-gallery {
  overflow: hidden;
  border-radius: 5px;
}

.card-gallery * {
  transition: 200ms ease;
}

/* Card FAQ */

.card-faq {
  width: 100%;
  box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.048);
  background-color: white;
  padding: 1rem;
  position: relative;
  transition: 200ms ease;
  border-radius: 5px;
}

.card-faq * {
  transition: 200ms ease;
}

/* Card Team */

.card-team {
  display: block;
  width: 100%;
  box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.048);
  overflow: hidden;
  border-radius: 5px;
}

.card-team * {
  transition: 200ms ease;
}

.card-team-content {
  padding: 2rem;
  display: flex;
  flex-direction: column;
}

@media screen and (min-width: 1200px) {
  /* Card Advantages HOVER */

  .card-advantages:hover {
    background-color: var(--color-primary);
  }

  .card-advantages:hover svg {
    padding: 5px;
    background-color: white;
    fill: var(--color-primary);
    border-radius: 3px;
  }

  .card-advantages:hover h3 {
    color: var(--color-secondary);
  }

  .card-advantages:hover p {
    color: white;
  }

  /* Card About */

  .card-about {
    width: 90%;
  }

  /* Card Services HOVER */

  .card-services:hover {
    background-color: var(--color-primary);
  }

  .card-services:hover svg {
    padding: 5px;
    background-color: white;
    border-radius: 3px;
  }

  .card-services:hover h3 {
    color: white !important;
  }

  .card-services:hover p {
    color: white;
  }

  /* Card Certificate HOVER */

  .card-certificate:hover {
    background-color: var(--color-primary);
  }

  .card-certificate:hover * {
    color: white;
    fill: white;
  }

  .card-certificate:hover .before-dot::before {
    background-color: white;
  }

  /* Card Gallery HOVER */

  .card-gallery:hover img {
    transform: scale(1.05);
  }

  /* Card FAQ HOVER */

  .card-faq:hover {
    transform: translateX(-5px);
    background-color: var(--color-primary) !important;
  }

  .card-faq:hover P {
    color: white;
  }

  /* Card Team */

  .card-team {
    width: 85%;
  }

  /* Card Team HOVER */

  .card-team:hover .card-team-content {
    background-color: var(--color-primary);
  }

  .card-team:hover img {
    transform: scale(1.1);
  }

  .card-team:hover p {
    color: white;
  }

  .card-team:hover .icon-team-contact {
    fill: white;
  }

  .card-team:hover h3 {
    padding: 0.2rem 0rem;
    color: white;
  }

  .card-team:hover .h3-team span {
    color: white;
  }
}