/*
*
* Import Fonts
*/

@import url("https://fonts.googleapis.com/css2?family=Koulen&family=Lexend+Deca:wght@100..900&display=swap");

:root {
  /*
  *
  * Colors
  *
  */
  --light-30: rgb(259, 259, 259);

  --dark-10: #1a1919;
  --dark-20: #404040;
  --dark-30: #262626;
  --yellow-30: #fbc105;
  --light-yellow: #f9f8f2;

  /*
  *
  * Fonts
  *
  */
  --font-family-title: system-ui, -apple-system, "Open Sans", "Helvetica Neue",
    sans-serif;
  --font-family-Lexend: "Lexend Deca", sans-serif;
  --font-size-24: 24px;
}

body {
  position: relative;
  display: flex;
  flex-direction: column;
}

/*
*
* Main
*
*/

.featured-container {
  position: relative;
  display: block;
}

.home-content {
  background: rgba(64, 64, 64, 0.5);
  background-blend-mode: multiply;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  height: 100%;
  background-image: url(/images/AdobeStock_236770871.jpeg);
  padding: 50px 45px;
}

.highlighted-title-container {
  font-family: var(--font-family-title);
}

.title-emphasis {
  font-family: var(--font-family-Lexend);
  color: var(--light-30);
  font-weight: 600;
  letter-spacing: 1px;
  margin-bottom: 10px;
}

.descript-emphasis {
  color: var(--light-30);
  font-family: var(--font-family-title);
  font-size: 24px;
  font-weight: 300;
  letter-spacing: normal;
  line-height: 30px;
  margin-bottom: 30px;
}

.yellow-font {
  color: var(--yellow-30);
  font-weight: 400;
}

.budgets-button {
  background-color: var(--yellow-30);
  color: var(--dark-10);
}

.budgets-button:hover {
  background-color: var(--light-30);
}

#request-a-quote {
  font-family: var(--font-family-Lexend);
  font-weight: 400;
  color: var(--dark-10);
}

.call-container,
.home-content,
.featured-container {
  position: relative;
}

/*
*
* Container Services
*
*/

.container-services {
  display: flex;
}

.title-services,
.title-card-service {
  color: var(--dark-10);
  font-family: var(--font-family-Lexend);
  font-weight: 600;
  letter-spacing: normal;
}

.descript-services,
.descript-service-card {
  color: var(--dark-20);
  font-family: var(--font-family-Lexend);
  font-weight: 300;
  letter-spacing: normal;
  line-height: 28px;
}

.grid-steps-cards {
  display: grid;
}