/*
Hello everyone, welcome to the style sheet made by me. (Juan F. Martinez).

Style sheet made with sass preprocessor following a web design made in figma with typography, color palette and width and height measurements.

The designs were created with the following widths of 375px on Mobile and 1440px on Desktop.

## Means Queries
The media queries were made in a separate style sheet, it can be identified by its respective name ./styles-mediasQueries.scss

##Icon
The icons found in the social media section were taken from the page https://icons8.com/

## Typography
The typography was taken from google fonts and two were used for this project, one for the Header and another for the body of the content:

# Headings
Family: [Poppins](https://fonts.google.com/specimen/Poppins)
- Weight: 600

#Body, Call-to-actions
- Family: [Open Sans](https://fonts.google.com/specimen/Open+Sans)
- Weights: 400, 700 
*/
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Poppins:ital,wght@0,600;1,600&display=swap");
/************************* Typography *************************/
/************************* Color *************************/
/************************* Resets Layouts  *************************/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

img,
picture,
video,
canvas,
svg {
  max-inline-size: 100%;
  block-size: auto;
}

/************************* General Layout *************************/
body {
  font-size: 1.125rem;
}

/************************* Header *************************/
.header-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  max-width: 100vw;
  margin: 0 auto;
  background-color: hsl(193deg, 100%, 96%);
  background-image: url(/src/assets/bg-hero-desktop.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.header-nav {
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
  width: 91.46vw;
  height: auto;
  margin-top: 6%;
  margin-bottom: 5rem;
}
.header-nav-title {
  width: 30.32%;
}
.header-nav-btn {
  max-width: 96px;
  width: 30.32%;
  height: 1.5rem;
  color: #00252e;
  background: #ffffff;
  box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.0954201);
  border: none;
  border-radius: 12px;
  text-decoration: none;
}

.header-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: calc(100vw - 9.333%);
  height: auto;
  margin-bottom: 2.3125rem;
}
.header-section-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 3.5rem;
  overflow-wrap: break-word;
}
.header-section-container h1 {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  text-align: center;
  margin-bottom: 1.5rem;
}
.header-section-container p {
  font-family: "Open Sans", sans-serif;
  text-align: center;
  margin-bottom: 2rem;
}
.header-section-container button {
  width: 15rem;
  height: 2.5rem;
  color: #ffffff;
  background: hsl(322deg, 100%, 66%);
  box-shadow: 2px 3px 6px 1px rgba(255, 82, 193, 0.166185);
  border-radius: 20px;
  border: none;
}
.header-section-container button:hover {
  background: #ff9adb;
  outline: none;
}
.header-section img {
  max-width: 100%;
}

/************************* Main *************************/
.main-container {
  display: flex;
  flex-direction: column;
  position: relative;
  justify-content: center;
  align-items: center;
  max-width: 100vw;
  margin: 0 auto;
  gap: 3.125rem;
  background-color: white;
  background-size: cover;
}

.main-section-container1,
.main-section-container2,
.main-section-container3 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  max-width: 430px;
  width: calc(100vw - 10.6667%);
  background-color: #ffffff;
  box-shadow: 0px 0px 14px rgba(0, 0, 0, 0.07);
  border-radius: 16px;
}
.main-section-container1-info,
.main-section-container2-info,
.main-section-container3-info {
  display: flex;
  flex-direction: column;
  width: 16rem;
  margin-bottom: 2.06rem;
  gap: 1rem;
}
.main-section-container1-info h2,
.main-section-container2-info h2,
.main-section-container3-info h2 {
  width: 16rem;
  font-family: "Poppins", sans-serif;
  font-style: normal;
  font-size: 20px;
  text-align: center;
  color: #00252e;
}
.main-section-container1-info p,
.main-section-container2-info p,
.main-section-container3-info p {
  font-family: "Open Sans", sans-serif;
  font-weight: 400;
  font-size: 14px;
  text-align: center;
  line-height: 21px;
  color: hsl(208deg, 11%, 55%);
}
.main-section-container1 img,
.main-section-container2 img,
.main-section-container3 img {
  width: 16rem;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

.main-section-container1 {
  margin-top: 3.6875rem;
}

.main-section-container3 {
  margin-bottom: 14.31rem;
}

.main-section-container4 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: absolute;
  bottom: 0;
  max-width: 430px;
  width: 93.87%;
  background-color: #ffffff;
  box-shadow: 0px 0px 14px rgba(0, 0, 0, 0.0710768);
  border-radius: 15px;
  transform: translateY(4rem);
}
.main-section-container4-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 2.56rem;
  margin-bottom: 2.56rem;
  gap: 1.5rem;
}
.main-section-container4 h2 {
  font-size: 1.125rem;
  text-align: center;
  color: hsl(192deg, 100%, 9%);
}
.main-section-container4 button {
  width: 15rem;
  height: 2.5rem;
  font-size: 0.625rem;
  font-family: "Open Sans", sans-serif;
  color: #ffffff;
  background: hsl(322deg, 100%, 66%);
  box-shadow: 2px 3px 6px 1px rgba(255, 82, 193, 0.166185);
  border-radius: 20px;
  border: none;
  cursor: pointer;
}
.main-section-container4 button:hover {
  background: #ff9adb;
  outline: none;
}

/************************* Footer *************************/
.footer-main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  max-width: 100vw;
  margin: 0 auto;
  color: #f2f2f2;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: hsl(192deg, 100%, 9%);
}
.footer-main a {
  color: inherit;
  text-decoration: none;
}
.footer-main a:hover {
  color: #ff9adb;
  outline: none;
}

.hero {
  display: flex;
  flex-direction: column;
  width: 89.3333%;
}

.footer-container-socialmedia {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
}
.footer-container-socialmedia-icon img {
  gap: 5rem;
}
.footer-container-socialmedia-cr {
  margin-bottom: 2.875rem;
  font-size: 0.696rem;
  text-align: center;
}

.footer-container-link {
  display: flex;
  flex-direction: column;
  margin-bottom: 1.5rem;
  font-size: 0.875rem;
  gap: 1rem;
}

.footer-container-info {
  display: flex;
  flex-direction: column;
  margin-top: 8.688rem;
  margin-bottom: 2.5625rem;
  gap: 1.5rem;
}
.footer-container-info img {
  width: 8.79rem;
  height: 1.625rem;
}
.footer-container-info .location-container,
.footer-container-info .phone-container,
.footer-container-info .email-container {
  display: inline-flex;
  gap: 1rem;
}
.footer-container-info .location-container img,
.footer-container-info .phone-container img,
.footer-container-info .email-container img {
  width: 1.5rem;
  height: 1.5rem;
}

/* End of the style sheet. */

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