@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&family=MuseoModerno:wght@500;700;800&family=Outfit:wght@200;400;700&display=swap');

:root {
	--background: #001e03;
	--foreground: #f1ffef;
}

body {
	font-family: 'Montserrat', sans-serif;
	background-color: var(--background);
	color: var(--foreground);
  position: relative;
}

nav {
	font-family: 'MuseoModerno', sans-serif;
}

.hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 60% 40%, #6dfd852b 0%, transparent 60%),
    radial-gradient(ellipse 50% 50% at 10% 80%, #0be20443 0%, transparent 50%),
    linear-gradient(180deg, #47b055 0%, #357b3e 50%, #123516 100%);
}

/* MESH GRID */
.mesh {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(#59eb4f1e 1px, transparent 1px),
    linear-gradient(90deg, #59eb4f1e 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 0%, transparent 100%);
}

.hero-top-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: clamp(600px, 62vh, 560px);
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

nav,
main {
  position: relative;
  z-index: 1;
}

.hero-paysagix {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.hero-paysagix__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(250px, 0.6fr);
  gap: 2rem;
  align-items: center;
  text-align: left;
}

.hero-paysagix__title {
  max-width: 18ch;
}

.hero-paysagix__visual {
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-paysagix__visual img {
  width: min(100%, 250px);
  height: auto;
}

@media (max-width: 767px) {
  .hero-paysagix {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }

  .hero-top-bg {
    height: clamp(620px, 72vh, 820px);
  }

  .hero-paysagix__layout {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .hero-paysagix__title {
    max-width: 22ch;
    margin: 0 auto;
  }

  .hero-paysagix__visual img {
    width: min(100%, 180px);
  }

  footer .grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 24px;
		align-items: start;
	}

	.footer-social-links {
		display: flex;
		flex-direction: column;
		gap: 12px;
		align-items: flex-start;
		justify-content: start;
	}

	.footer-social-item {
		padding: 0;
		margin: 0;
	}

	.footer-facebook {
		grid-area: facebook;
	}

	.footer-instagram {
		grid-area: instagram;
	}

	.footer-phone {
		grid-area: phone;
		padding-top: 0;
		align-self: start;
	}

	.footer-linkedin {
		grid-area: linkedin;
	}

	.footer-brand-column {
		grid-column: 1;
	}

	.footer-legal-column {
		grid-column: 2;
		justify-self: end;
		align-items: flex-end;
		text-align: right;
	}

	.footer-links-column {
		display: none !important;
	}

	.footer-social-label {
		display: inline-block !important;
	}
}