@charset "UTF-8";
/* global */
/* inter-regular - latin */
@font-face {
  font-display: swap;
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  src: url("./fonts/inter-v20-latin-regular.woff2") format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "Cooper";
  font-style: normal;
  font-weight: 400;
  src: url("./fonts/cooper-black-webfont.woff2") format("woff2");
}
h1, h2, h3 {
  font-family: "Cooper", sans-serif;
  font-optical-sizing: auto;
}

p {
  font-weight: 400;
  padding: 4px;
}

body {
  margin: 0;
  padding: 0;
  background-image: url("images/background-cropped.png");
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
}

img {
  max-width: 100%;
  height: auto;
}

/*nav*/
/* Add a black background color to the top navigation */
.nav {
  overflow: hidden;
  display: flex;
  background: black;
  align-items: end;
}

/* Style the links inside the navigation bar */
.nav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-family: "Cooper", sans-serif;
  font-optical-sizing: auto;
  font-size: 1.25rem;
}

/* Change the color of links on hover */
.nav a:hover {
  background-color: #ddd;
  color: black;
}

/* Add an active class to highlight the current page */
.nav a.active {
  background-color: white;
  color: black;
}

/* Hide the link that should open and close the topnav on small screens */
.nav .icon {
  display: none;
}

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
  .nav {
    display: block;
  }
  .nav a:not(:first-child) {
    display: none;
  }
  .nav a.icon {
    float: right;
    display: block;
  }
}
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
  .nav.responsive {
    position: relative;
  }
  .nav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .nav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}
/*home page*/
.grid-home {
  display: grid;
  grid: ". text text text text text text image image image image image image . " auto ". card1 card1 card1 card1 card2 card2 card2 card2 card3 card3 card3 card3 . " auto/0.25fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 0.25fr;
  grid-row-gap: 8px;
}

.top-text-left {
  grid-area: text;
  justify-self: center;
  align-self: center;
  margin-right: 1rem;
  border: 1px solid white;
  border-radius: 1rem;
  background: #D1B8CB;
  background: linear-gradient(90deg, rgb(209, 184, 203) 0%, rgb(235, 225, 209) 100%);
  color: #2A3F4C;
}

.top-img-right-container {
  grid-area: image;
  width: 80%;
  height: auto;
  margin-left: auto;
}

.card1 {
  grid-area: card1;
}

.card2 {
  grid-area: card2;
}

.card3 {
  grid-area: card3;
}

.home-card {
  background: rgba(249, 253, 253, 0.7333333333);
  border: solid;
  border-color: rgba(38, 36, 38, 0.5019607843);
  overflow: hidden;
  border-radius: 1em;
  width: 95%;
  height: 100%;
  margin: auto;
  text-align: center;
  display: grid;
  grid: "card-image" 1fr "card-text" 0.4fr "card-button" 0.2fr "empty-card-bottom" 0.1fr/1fr;
  padding-bottom: 25px;
}

.card-image {
  grid-area: card-image;
}

.card-text {
  grid-area: card-text;
  margin-left: 1rem;
}

.card-button {
  grid-area: card-button;
  align-self: end;
}

.empty-card-bottom {
  height: 20px;
}

.button {
  border-radius: 20px;
  background-color: #404A63;
  border: none;
  color: #FFFFFF;
  font-size: 1.25rem;
  padding: 20px;
  margin-bottom: 20px;
  width: 100px;
  cursor: pointer;
}

.button span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.button span:after {
  content: "»";
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.button:hover span {
  padding-right: 25px;
}

.button:hover span:after {
  opacity: 1;
  right: 0;
}

/*mobile home page */
@media only screen and (max-width: 620px) {
  /* For mobile phones: */
  .grid-home {
    display: grid;
    row-gap: 1rem;
    margin-top: 2rem;
    width: 100%;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: auto;
    grid-template-areas: "text text text text text text" "image image image image image image" "card1 card1 card1 card1 card1 card1" "card2 card2 card2 card2 card2 card2" "card3 card3 card3 card3 card3 card3";
  }
  .top-img-right-container {
    width: 100%;
  }
  .card-text {
    margin-bottom: 1.5rem;
  }
  .empty-card-bottom {
    height: 2rem;
  }
  .home-card {
    justify-self: center;
    height: auto;
  }
  .top-text-left {
    width: 95%;
    margin: auto;
  }
}
/* about page */
.grid-about {
  display: grid;
  width: 100%;
  min-height: 100vh;
  row-gap: 1rem;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: auto;
  grid-template-areas: "about-top-text about-top-text about-top-text about-top-image about-top-image about-top-image" "card1 card1 card2 card2 card3 card3" "card4 card4 card5 card5 card6 card6" "about-bottom about-bottom about-bottom about-bottom about-bottom about-bottom";
}

.about-top-text {
  grid-area: about-top-text;
  align-content: center;
  margin-left: 2rem;
  padding: 1rem;
  color: white;
}

.img-logo {
  width: 50%;
  height: auto;
}

.about-top-image {
  grid-area: about-top-image;
  display: flex;
  justify-content: center;
  align-items: start;
}

.card1-about {
  grid-area: card1;
  width: 95%;
  justify-self: center;
}

.card2-about {
  grid-area: card2;
  width: 95%;
  justify-self: center;
}

.card3-about {
  grid-area: card3;
  width: 95%;
  justify-self: center;
}

.card4-about {
  grid-area: card4;
  width: 95%;
  justify-self: center;
}

.card5-about {
  grid-area: card5;
  width: 95%;
  justify-self: center;
}

.card6-about {
  grid-area: card6;
  width: 95%;
  justify-self: center;
}

.about-bottom {
  grid-area: about-bottom;
}

.container-about {
  background: rgba(249, 253, 253, 0.7333333333);
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(4.8px);
  -webkit-backdrop-filter: blur(4.8px);
  border: 1px solid black;
  height: 100%;
}

/*mobile about page */
@media only screen and (max-width: 620px) {
  /* For mobile phones: */
  .grid-about {
    display: grid;
    width: 100%;
    min-height: 100vh;
    row-gap: 1rem;
    grid-template-columns: auto;
    grid-template-rows: auto;
    grid-template-areas: "about-top-text" "about-top-image" "card1" "card2" "card3" "card4" "card5" "card6" "about-bottom";
  }
  .about-top-text {
    grid-area: about-top-text;
    align-content: center;
    width: 95%;
    margin: auto;
    padding: 0;
  }
}
@media only screen and (max-width: 930px) and (min-width: 621px) {
  .grid-about {
    color: white;
    display: grid;
    width: 100%;
    min-height: 100vh;
    row-gap: 1rem;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: auto;
    grid-template-areas: "about-top-text about-top-text about-top-text about-top-text about-top-image about-top-image" "card1 card1 card2 card2 card3 card3" "card4 card4 card5 card5 card6 card6" "about-bottom about-bottom about-bottom about-bottom about-bottom about-bottom";
  }
  .about-top-image {
    align-items: center;
  }
  .grid-home {
    display: grid;
    grid: ". text text text text text text text image image image image image . " auto ". card1 card1 card1 card1 card2 card2 card2 card2 card3 card3 card3 card3 . " auto/0.25fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 0.25fr;
    grid-row-gap: 8px;
  }
}
/*footer */
.footer {
  text-align: center;
  color: white;
  margin-top: 4rem;
}

/* buttons */
.buttons {
  text-align: center;
}

.btn-hover {
  width: 200px;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  margin: 20px;
  height: 55px;
  text-align: center;
  border: none;
  background-size: 300% 100%;
  border-radius: 1rem;
  -o-transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

.btn-hover:hover {
  background-position: 100% 0;
  -o-transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

.btn-hover:focus {
  outline: none;
}

.btn-hover.color-1 {
  background-image: linear-gradient(to right, #320A6B, #065084, #85C79A, #EDF7BD);
  box-shadow: 0 4px 15px 0 rgba(49, 196, 190, 0.75);
}

.serv-card1, .serv-card2, .serv-card3 {
  background: rgba(249, 253, 253, 0.7333333333);
  border: solid;
  border-color: black;
  overflow: hidden;
  border-radius: 1em;
  margin: auto;
  padding-bottom: 20px;
  text-align: center;
  width: 80%;
  height: 100%;
  width: 100%;
  display: grid;
  grid: "serv-heading" 0.25fr "serv-text" 1fr "serv-button" 0.25fr/1fr;
  gap: 8px;
  align-content: space-between;
}

.serv-heading {
  grid-area: serv-heading;
  border-bottom: solid black 3px;
}

.serv-text {
  grid-area: serv-text;
}

.serv-button {
  grid-area: serv-button;
}

.cards {
  width: 100%;
  display: grid;
  grid: "serv-card1 serv-card2 serv-card3" 1fr/1fr 1fr 1fr;
  gap: 8px;
  align-content: space-between;
}

.serv-card1 {
  grid-area: serv-card1;
}

.serv-card2 {
  grid-area: serv-card2;
}

.serv-card3 {
  grid-area: serv-card3;
}

.price-card p {
  padding: 0;
}

@media only screen and (max-width: 620px) {
  .cards {
    display: block;
  }
}
/*-- -------------------------- -->
<---          Contact           -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  .cs-container {
    width: 100%;
    /* changes to 1280px at desktop */
    max-width: 34.375rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 3rem;
  }
  .cs-content {
    max-width: 32.625rem;
    text-align: left;
  }
  .cs-header {
    /* 13px - 16px */
    font-size: clamp(0.8125rem, 1.5vw, 1rem);
    line-height: 1.2em;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.1em;
    margin: 0 0 1rem 0;
    color: white;
    display: block;
  }
  .cs-link {
    /* 16px - 20px */
    font-size: clamp(1rem, 2vw, 1.25rem);
    text-decoration: none;
    line-height: 1.5em;
    font-weight: 700;
    /* 16px - 32px */
    margin: 0 0 clamp(1rem, 2.5vw, 2rem);
    color: white;
    display: block;
  }
  .cs-link:hover {
    text-decoration: underline;
  }
  .cs-link:last-of-type {
    margin-bottom: 0;
  }
  .cs-social {
    /* 32px - 80px */
    margin-top: clamp(1rem, 6vw, 3rem);
    display: inline-flex;
    justify-content: flex-start;
    gap: 0.75rem;
  }
  .cs-social-link {
    /* 32px - 52px */
    width: clamp(2rem, 4vw, 3.25rem);
    height: clamp(2rem, 4vw, 3.25rem);
    background-color: white;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 1;
    transition: transform 0.3s, background-color 0.3s;
  }
  .cs-social-link:hover {
    background-color: teal;
    transform: translateY(-0.1875rem);
  }
  .cs-social-img {
    /* 14px - 24px */
    height: clamp(0.875rem, 2vw, 1.5rem);
    width: auto;
    display: block;
  }
  #cs-form-490 {
    width: 100%;
    max-width: 40.625rem;
    /* 32px - 40px */
    margin-bottom: clamp(2rem, 5.3vw, 2.5rem);
    /* 20px - 40px */
    padding: clamp(1.25rem, 4.5vw, 2.5rem);
    /* prevents padding from affecting width and height */
    box-sizing: border-box;
    border: 1px solid #dad9e3;
    border-radius: 1rem;
  }
  .cs-label {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.3vw, 1rem);
    line-height: 1.5em;
    font-weight: 700;
    /* 16px - 20px */
    margin-bottom: clamp(1rem, 1em, 1.25rem);
    color: white;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
  }
  .cs-label-message {
    /* 32px - 40px */
    margin-bottom: clamp(2rem, 4.5vw, 2.5rem);
    color: white;
  }
  .cs-input,
  textarea {
    font-size: 1rem;
    width: 100%;
    height: 4rem;
    margin-top: 0.25rem;
    padding-left: 1.25rem;
    /* set transparent border so on hover border doesn't make it glitch */
    border: 1px solid transparent;
    border-bottom: 1px solid #b4b2c7;
    /* prevents border & padding from affecting height */
    box-sizing: border-box;
    transition: border 0.3s;
  }
  .cs-input:hover,
  textarea:hover {
    border: 1px solid var(--primary);
  }
  .cs-input::placeholder,
  textarea::placeholder {
    color: #7d799c;
  }
  textarea {
    font-family: inherit;
    margin: 0;
    padding-top: 1.25rem;
    min-height: 7.5rem;
  }
  .cs-button-solid {
    font-size: 1rem;
    /* 46px - 56px */
    line-height: clamp(2.875em, 5.5vw, 3.5em);
    text-decoration: none;
    font-weight: 700;
    text-align: center;
    margin: auto;
    width: 100%;
    color: white;
    padding: 0 1.5rem;
    background-color: var(--primary);
    border: none;
    border-radius: 0.5rem;
    display: inline-block;
    position: relative;
    z-index: 1;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
  }
  .cs-button-solid:before {
    content: "";
    position: absolute;
    height: 100%;
    width: 0%;
    background: #000;
    opacity: 1;
    top: 0;
    left: 0;
    z-index: -1;
    border-radius: 0.5rem;
    transition: width 0.3s;
  }
  .cs-button-solid:hover {
    cursor: pointer;
  }
  .cs-button-solid:hover:before {
    width: 100%;
  }
}
/* Tablet - 700px */
@media only screen and (min-width: 43rem) {
  #cs-contact-490 .cs-container {
    max-width: 80rem;
    flex-direction: row;
    justify-content: space-between;
  }
  #cs-contact-490 .cs-content {
    width: 40%;
    /* pushes it to the right */
    order: 2;
    flex: none;
  }
  #cs-contact-490 #cs-form-490 {
    margin: 0;
  }
}
.card-button-contact {
  width: 10rem;
  height: 4rem;
  color: white;
  border-radius: 1rem;
  padding: 10px 25px;
  font-family: "Cooper", sans-serif;
  font-size: 1.25rem;
  background: transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
  box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, 0.5), 7px 7px 20px 0px rgba(0, 0, 0, 0.1), 4px 4px 5px 0px rgba(0, 0, 0, 0.1);
  outline: none;
  margin: 1rem;
}

/*# sourceMappingURL=output.css.map */