/**********************************
HERO SECTION
***********************************/
.hero {
  min-height: 100vh;
  place-content: center;

  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url(../img/backgrounds/orbit-background.png);
}

.hero-content {
  text-align: center;
  color: var(--color-white);
}

.primary-title {
  font-size: 5.2rem;
  font-weight: 400;

  line-height: 1.2;
  letter-spacing: -0.2rem;

  width: 70%;
  margin: 0 auto 4rem auto;
}

.hero-highlight {
  font-weight: bold;
  background: linear-gradient(
    360deg,
    var(--color-subheading) 50%,
    transparent 50%
  );
}

.hero-description {
  font-size: 1.6rem;
  line-height: 1.6;
}

/**********************************
SOLUTIONS SECTION
***********************************/
.solutions {
  padding: 10rem 0 14rem 0;
}

.solutions-content {
  display: grid;
  align-items: center;
  grid-template-columns: repeat(auto-fit, minmax(40rem, 1fr));

  gap: 4rem;
}

.solution-title {
  font-size: 4rem;
  margin-bottom: 1rem;
}

.solution-description {
  font-size: 1.4rem;
  line-height: 1.8;

  color: var(--color-text);
}

.josiel-img {
  width: 100%;
  height: auto;

  border-radius: 1rem;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px,
    rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
}

/**********************************
ADVANTAGES SECTION
***********************************/
.advantages {
  padding: 0 0 12rem 0;
}

.secondary-bg-color {
  padding: 4rem;
  border-radius: 2rem;

  background-color: var(--color-white-secondary);
}

.advantages-content {
  text-align: center;
}

.advantages-title {
  font-size: 3.6rem;
  line-height: 1.2;
}

/**********************************
ADVANTAGES CARDS
***********************************/
.advantages-card-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;

  gap: 4rem;
  margin-bottom: 6rem;
}

.advantages-card {
  padding: 2rem 2rem 4rem 2rem;
  border-radius: 1rem;

  flex: 1 1 calc(33% - 4rem); /* flex-grow | flex-shrink | flex-basis (calc) */
  max-width: 35rem;
  min-width: 25rem;

  transition: box-shadow 0.4s ease;

  background-color: var(--color-white);
  box-shadow: #88a5bf7a 0px 6px 12px -2px, #0000004d 0px 3px 7px -3px;
}

.advantages-card:hover {
  box-shadow: #88a5bf7a 0px 50px 100px -20px, #0000004d 0px 30px 60px -30px;
}

.advantages-card-icon {
  display: inline-flex;

  padding: 0.5rem;
  margin-bottom: 2rem;
  border-radius: 0.5rem;

  background: linear-gradient(
    135deg,
    #a3d9ff,
    #a3d9ff99,
    rgb(163, 217, 255, 0.2)
  );
  box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px,
    rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
}

.advantages-card-icon i {
  font-size: 3.4rem;
  color: var(--color-icon);
}

.advantages-card-title {
  font-size: 1.8rem;
  font-weight: bold;

  line-height: 1.2;

  margin-bottom: 1rem;
  color: var(--color-title);
}

.advantages-card-description {
  font-size: 1.4rem;
  line-height: 1.6;

  color: var(--color-text);
}

/**********************************
ABOUT SECTION
***********************************/
.about {
  min-height: 100vh;
  place-content: center;

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(../img/backgrounds/about-background.png);
}

.about-content {
  display: flex;
  align-items: center;
  flex-wrap: wrap-reverse;
  justify-content: center;

  gap: 8rem;
  padding: 8rem 0;
}

.about-img {
  display: flex;
  flex: 1 1 40rem; /* flex-grow | flex-shrink | flex-basis */
  justify-content: center;
}

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

.about-text .subheading {
  color: var(--color-highlight);
}

.about-title {
  font-size: 3.6rem;
  margin-bottom: 2rem;

  color: var(--color-white);
}

.about-description {
  font-size: 1.4rem;
  line-height: 1.6;

  max-width: 60rem;
  color: var(--color-white);
}

/**********************************
MOMENT SECTION
***********************************/
.moment-content {
  padding: 10rem 0 14rem 0;
}

.moment-content-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;

  gap: 8rem;
}

.moment-title {
  font-size: 3.6rem;
  line-height: 1.2;

  max-width: 70rem;
}

.moment-img {
  display: flex;
  flex: 1 1 40rem; /* flex-grow | flex-shrink | flex-basis */
  justify-content: center;
}

.magazine-img {
  width: 100%;
  height: auto;

  border-radius: 1rem;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px,
    rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
}

/**********************************
MOMENT CARDS
***********************************/
.moment-card-title {
  display: inline-flex;

  padding: 1rem 2rem;
  margin-bottom: 1rem;

  font-size: 1.4rem;
  font-weight: 400;
  border-radius: 2rem 0 2rem 0;

  color: var(--color-white);
  background-color: var(--dark-blue);
}

.moment-card-negative {
  background-color: var(--color-negative);
}

.moment-card-description {
  font-size: 1.4rem;
  line-height: 1.6;

  max-width: 30rem;
  color: var(--color-text);
}

.moment-highlight {
  font-weight: bold;
}

/**********************************
BUSINESS SECTION
***********************************/
.business {
  padding: 0 0 12rem 0;
}

.business-content {
  text-align: center;
}

.business-title {
  font-size: 3.6rem;
  line-height: 1.2;

  width: 60%;
  margin: 0 auto;
}

/**********************************
BUSINESS CARDS
***********************************/
.business-card-container {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;

  gap: 4rem;
  margin-bottom: 6rem;
}

.business-card {
  padding: 2rem 2rem 4rem 2rem;

  border-radius: 1rem;
  border: 0.1rem solid #b0575746;

  flex: 1 1 calc(33% - 4rem); /* flex-grow | flex-shrink | flex-basis (calc) */
  max-width: 35rem;
  min-width: 25rem;

  transition: box-shadow 0.4s ease;

  background-color: #ffdddd;
  box-shadow: #df55552f 0px 6px 12px -2px, #0000004d 0px 3px 7px -3px;
}

.business-blue-card {
  border: 0.1rem solid #a3d9ff;

  background: linear-gradient(135deg, #a3d9ff94, #a3d9ffbb, #a3d9ffbb);
  box-shadow: #88a5bf7a 0px 50px 100px -20px, #0000004d 0px 30px 60px -30px;
}

.business-card-icon {
  display: flex;
  justify-content: center;
}

.business-icon {
  max-width: 12rem;
}

.business-card-title {
  font-size: 1.6rem;
  font-weight: bold;

  line-height: 1.2;
  text-align: center;

  margin-bottom: 1rem;
  color: var(--color-negative-text);
}

.business-blue-title {
  color: var(--dark-blue);
}

/**********************************
CAREERS SECTION
***********************************/
.careers {
  padding: 2rem 0 8rem 0;
}

.careers-content {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;

  gap: 4rem;
}

.careers-img {
  display: flex;
  flex: 1 1 40rem; /* flex-grow | flex-shrink | flex-basis */
  justify-content: center;
}

.team-img {
  max-width: 100%;
  height: auto;

  border-radius: 1rem;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px,
    rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
}

.careers-title {
  font-size: 4rem;
  margin-bottom: 2rem;
}

.careers-description {
  font-size: 1.4rem;
  line-height: 1.6;

  max-width: 60rem;
  color: var(--color-text);
}

.careers-btn {
  font-weight: bold;
  text-decoration: underline;

  color: var(--dark-blue);
}

.careers-btn:hover {
  text-decoration: none;
}

/**********************************
CONTACT SECTION
***********************************/
.contact {
  min-height: 100vh;
  place-content: center;
  padding: 10rem 0;

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(../img/backgrounds/contact-background.png);
}

.contact-text {
  text-align: center;
  color: var(--color-white);
}

.contact-text .subheading {
  color: var(--color-highlight);
}

.contact-title {
  font-size: 4.4rem;
  line-height: 1.2;

  max-width: 50%;
  margin: 0 auto;
}

.contact-title-highlight {
  font-weight: bold;
  background: linear-gradient(
    360deg,
    var(--color-subheading) 50%,
    transparent 50%
  );
}

/**********************************
CONTACT FORM
***********************************/
.contact-form {
  max-width: 60%;
  margin: 0 auto 4rem auto;
}

.form-group {
  margin-bottom: 2rem;
}

.form-input {
  width: 100%;
  padding: 1.2rem 1.5rem;
  font-size: 1.6rem;
  color: #ffffff;
  background: transparent;
  border: none;
  border-bottom: 1px solid #ffffff46;
  outline: none;
  transition: border-color 0.3s ease;
}

.form-input::placeholder {
  opacity: 0.7;
  color: var(--color-white);
}

.form-input:focus {
  border-bottom: 1px solid var(--color-highlight);
}

.btn-form-container {
  margin-top: 6rem;
}

/**********************************
FOOTER
***********************************/
.footer {
  padding: 8rem 0;
  background-color: var(--dark-blue);
}

.footer-social {
  display: flex;
  justify-content: center;

  gap: 4rem;
  padding-bottom: 4rem;
  margin-bottom: 4rem;

  border-bottom: 1px solid var(--color-subheading);
}

.icon-footer {
  font-size: 5rem;
  color: var(--color-white);
  transition: 0.3s ease;
}

.icon-footer:hover {
  color: var(--color-highlight);
}

.footer-copyright {
  font-size: 1.4rem;
  color: var(--color-white);

  display: flex;
  text-align: center;
  justify-content: center;
}