/*-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------
    Floating labels styling
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/* Tooltip */
.profile .about-tab .floating-label .tooltip,
.edit-doc .about-tab .floating-label .tooltip {
  bottom: 0;
  color: var(--copy);
  display: none;
  margin-left: 28px;
  margin-right: 3rem;
  position: absolute;
  right: 0;
}
.profile .about-tab .floating-label .tooltip:hover,
.edit-doc .about-tab .floating-label .tooltip:hover {
  display: block;
}

/* Floating labels */
/* Show password */
/*-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------

   SSSSSSSSSSSSSSS                                                                 iiii
 SS:::::::::::::::S                                                               i::::i
S:::::SSSSSS::::::S                                                                iiii
S:::::S     SSSSSSS
S:::::S                eeeeeeeeeeee    rrrrr   rrrrrrrrrvvvvvvv           vvvvvvviiiiiii     cccccccccccccccc    eeeeeeeeeeee        ssssssssss
S:::::S              ee::::::::::::ee  r::::rrr:::::::::rv:::::v         v:::::v i:::::i   cc:::::::::::::::c  ee::::::::::::ee    ss::::::::::s
 S::::SSSS          e::::::eeeee:::::eer:::::::::::::::::rv:::::v       v:::::v   i::::i  c:::::::::::::::::c e::::::eeeee:::::eess:::::::::::::s
  SS::::::SSSSS    e::::::e     e:::::err::::::rrrrr::::::rv:::::v     v:::::v    i::::i c:::::::cccccc:::::ce::::::e     e:::::es::::::ssss:::::s
    SSS::::::::SS  e:::::::eeeee::::::e r:::::r     r:::::r v:::::v   v:::::v     i::::i c::::::c     ccccccce:::::::eeeee::::::e s:::::s  ssssss
       SSSSSS::::S e:::::::::::::::::e  r:::::r     rrrrrrr  v:::::v v:::::v      i::::i c:::::c             e:::::::::::::::::e    s::::::s
            S:::::Se::::::eeeeeeeeeee   r:::::r               v:::::v:::::v       i::::i c:::::c             e::::::eeeeeeeeeee        s::::::s
            S:::::Se:::::::e            r:::::r                v:::::::::v        i::::i c::::::c     ccccccce:::::::e           ssssss   s:::::s
SSSSSSS     S:::::Se::::::::e           r:::::r                 v:::::::v        i::::::ic:::::::cccccc:::::ce::::::::e          s:::::ssss::::::s
S::::::SSSSSS:::::S e::::::::eeeeeeee   r:::::r                  v:::::v         i::::::i c:::::::::::::::::c e::::::::eeeeeeee  s::::::::::::::s
S:::::::::::::::SS   ee:::::::::::::e   r:::::r                   v:::v          i::::::i  cc:::::::::::::::c  ee:::::::::::::e   s:::::::::::ss
 SSSSSSSSSSSSSSS       eeeeeeeeeeeeee   rrrrrrr                    vvv           iiiiiiii    cccccccccccccccc    eeeeeeeeeeeeee    sssssssssss

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.service-details .service--container {
  column-gap: 3rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr));
  margin: 5rem auto;
  row-gap: 10rem;
}
.service-details .service--container .card {
  background-color: var(--foreground);
  border: 0;
  padding: 2rem 6rem;
  position: relative;
}
.service-details .service--container .card:hover img {
  transform: scale(1.1);
}
.service-details .service--container .card:hover .card-body {
  border-color: var(--primary-light);
}
.service-details .service--container .card:hover .card-body .card-title a {
  color: var(--primary-light);
}
.service-details .service--container .card .card-img {
  border-radius: 0;
  margin-left: -30px;
  max-height: 25em;
  overflow: hidden;
  width: calc(100% + 60px);
  z-index: 9;
}
.service-details .service--container .card .card-img img {
  height: 100%;
  max-height: 13rem;
  width: 100%;
}
.service-details .service--container .card .card-body {
  background-color: var(--foreground);
  border-top: 4px solid var(--border);
  box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
  left: 1rem;
  margin-top: -60px;
  padding: 30px;
  position: absolute;
  right: 1rem;
  z-index: 10;
}
.service-details .service--container .card .card-body .card-title {
  font-weight: 700;
  margin-bottom: 20px;
  text-align: center;
}
.service-details .service--container .card .card-body .card-title a {
  color: var(--primary);
}
.service-details .service--container .card .card-body .card-text {
  color: var(--copy);
  text-align: justify;
}
.service-details .service--container .card .read-more a {
  color: var(--copy);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
}
.service-details .service--container .card .read-more a:hover {
  color: var(--primary-light);
}

@media only screen and (max-width: 1024px) {
  .service-details .card {
    padding: 2rem 2rem;
  }
}
@media only screen and (max-width: 768px) {
  .service-details .service--container .card {
    padding: 2rem 2rem;
    width: unset;
    margin-left: unset;
  }
  .service-details .service--container .card .card-img {
    max-height: 11rem;
  }
}