/* colors 

#074646
#2e8485
#6f9d9e
#adaba5
#a8957c
#D7C1A1

*/

html {
  /* font-size: 10px; */

  /* 10px / 16px = 0.625 = 62.5% */
  /* Percentage of user's browser font-size setting */
  font-size: 62.5%;
  overflow-x: hidden;
}

body {
  font-family: "Hussar", sans-serif;
  line-height: 1;

  /* Only works if there is nothing absolutely positioned in relation to body */
  overflow-x: hidden;
}

html,
body {
  margin: 0rem;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  margin: 0;
  padding: 0;
}

.main-hero img,
.program-img img,
.slider img,
.team-pic img {
  max-width: 100%;
  height: auto;
  display: block;
}

* {
  box-sizing: border-box;
}

/* body {
  outline: 5px solid red;
}

.section,
.main-content {
  outline: 2px dashed orange;
} */

/**************************/
/* GENRAL REUSABLE COMPONENTS */
/**************************/

.section {
  /* padding: 15rem 3rem; */
  /* border-top: 1px solid #ddd; */

  transition: transform 1s, opacity 1s;
  margin-bottom: 6rem;
  margin-top: 6rem;

  scroll-margin-top: 3.2rem;
  /* margin-left: 12rem;
  margin-right: 12rem; */
}

.section--hidden {
  opacity: 0;
  transform: translateY(8rem);
}

.header-container {
  display: grid;
  grid-template-columns: 3fr 2fr 3fr;
  align-items: center;
  align-self: center;
  margin-bottom: 1rem;
}

.header-container2 {
  display: grid;
  grid-template-columns: 3fr 3fr 3fr;
  align-items: center;
  align-self: center;
  margin-bottom: 1rem;
}

.headerline {
  text-align: center;
  hr {
    border: none;
    height: 0.25rem;

    background-color: #2e8485; /* Modern Browsers */
  }
}

.line-white {
  text-align: center;
  hr {
    border: none;
    height: 0.25rem;

    background-color: #fff; /* Modern Browsers */
  }
}

.header-text {
  text-align: center;
  color: #2e8485;
  font-size: 3.2rem;
  font-weight: 700;
  text-transform: uppercase;
}

.head-white {
  color: #fff;
}

/**************************/
/* NAVIGATION */
/**************************/

.section-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;

  z-index: 99999;
  background-color: #d7c1a1;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.nav__links {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 4.8rem;
  color: #074646;
}

.main-nav-link:link,
.main-nav-link:active {
  display: inline-block;
  text-decoration: none;
  cursor: pointer;

  color: #074646;
  font-weight: 400;
  font-size: 1.8rem;

  transition: all 0.3s;
}

.main-nav-link:hover,
.main-nav-link:visited {
  color: #074646;
  font-weight: 500;
  font-size: 2rem;
}

.main-nav-link.active {
  color: #074646;
  font-weight: 500;
  font-size: 2rem;
}

.space {
  padding-left: 3rem;
}

.cta-btn {
  margin-right: 4rem;
  text-decoration: none;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(to right, #074646, #6f9d9e);
  box-shadow: 0 0.2rem 0.4rem rgba(7, 70, 70, 0.66);

  padding: 1rem 4rem 1rem 4rem;

  font-size: 2rem;

  border-radius: 0.8rem;
  border: none;
}

/**************************/
/* Hero */
/**************************/
.main-hero {
  margin-top: 1rem;
  display: grid;
  align-items: center;
  justify-content: center;
}

.main-hero img {
  width: 100%;
  z-index: -1;
  position: relative;
}

.title-total {
  margin-top: 10rem;
  width: 100%;
  padding-top: 10rem;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 10;
  pointer-events: none; /* Optional: makes text unclickable */
  text-align: center;
}

.logo img {
  width: 100%;
  max-width: 400px;
  margin: auto;
  display: block;
}

.title {
  font-size: 9rem;
  text-align: center;
  color: rgb(46, 132, 133);
  text-shadow: 0 0.2rem 0.4rem rgba(7, 70, 70, 0.66);
}

.title span {
  color: rgb(7, 70, 70);
  text-shadow: 0 0.2rem 0.4rem rgba(7, 70, 70, 0.66);
}

.intro-text {
  margin-left: 6rem;
  margin-right: 6rem;
  margin-top: 6rem;
  font-size: 2.4rem;
  color: #074646;
  text-align: center;
  line-height: 1.5;
  margin-bottom: 6rem;
}
.cor {
  color: #6f9d9e;
}
/**************************/
/* Programa */
/**************************/

.program-container {
  margin-top: 6rem;
  display: grid;
  grid-template-columns: 1.5fr 2fr;
  align-items: center;
  justify-content: center;
  gap: 5rem;
  margin-left: 6rem;
  margin-right: 6rem;
}

.program-text p {
  font-size: 2.4rem;
  line-height: 1.5;
  color: #fff;
}

.program-list {
  padding: 1.5rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  border-radius: 1rem;
  background-color: #074646a0;
}

.program-item {
  padding-left: 1rem;
  display: grid;
  grid-template-columns: 1fr 6fr;
  align-items: center;
}

.program-item img {
  width: 50%;
}

.program-items {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.program-item p {
  font-size: 2.4rem;
  font-weight: 700;
  color: #fff;
  border-radius: 1.5rem;
}

.program-img img {
  width: 100%;
  max-height: 800px;
  z-index: -1;
  position: relative;
}

/**************************/
/* Lugar */
/**************************/

.lugar-text {
  font-size: 2.4rem;
  color: #074646;
  text-align: center;
  line-height: 1.5;
  margin-left: 6rem;
  margin-right: 6rem;
}

.slider {
  height: 32rem;
  margin: 0 auto;
  padding: 0 0vw;
  display: flex;

  overflow-x: auto;
  scroll-behavior: smooth;
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.slider::-webkit-scrollbar {
  display: none;
}

.slide {
  flex: 0 0 auto;
  height: 32rem; /* Match the .slider height */
  margin: 0; /* remove default spacing */
  padding: 0; /* remove padding unless needed */

  /* THIS creates the animation! */
  transition: transform 1s;
  margin-right: 1rem;
}

.slide:last-child {
  margin-right: 0;
}

.slide img {
  margin: 0;
  padding: 0;
  width: auto; /* Let it scale naturally */
  height: 100%; /* Fill the container height */
  object-fit: cover;
  display: block;
}

.pre-btn,
.nxt-btn {
  border: none;
  width: 5vw;
  height: 60%;
  position: absolute;

  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 20%, #fff 160%);
  cursor: pointer;
  z-index: 8;
}

.pre-btn {
  left: 0;
  transform: rotate(180deg);
}

.nxt-btn {
  right: 0;
}

.arrow {
  color: #e1e5e6;
}

.pre-btn img,
.nxt-btn img {
  opacity: 1;
  height: 100rem;
}

.pre-btn:hover img,
.nxt-btn:hover img {
  opacity: 1;
}

/**************************/
/* Datas */
/**************************/

.head-in-pic {
  margin-top: 2rem;
  position: absolute;
  z-index: 100;
}
.data-container {
  margin-top: 6rem;
  display: grid;
  grid-template-columns: 1fr 2fr;
  align-items: center;
  align-self: center;
  margin-left: 6rem;
  margin-right: 6rem;
  gap: 4rem;
}

.data-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4rem;
  align-items: center;
  align-self: center;
  align-content: center;
}
.data-items {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
.data-item {
  font-size: 2rem;
  text-align: center;
  color: #fff;
  border-radius: 1.5rem;
  border: none;
  background: linear-gradient(to right, #074646, #6f9d9e);
  box-shadow: 0 0.2rem 0.4rem rgba(7, 70, 70, 0.66);
}

.data-item p {
  font-size: 2.4rem;
  font-weight: 700;
  color: #fff;
  border-radius: 1.5rem;
}

.lighter {
  background: linear-gradient(
    to right,
    rgba(8, 69, 69, 0.404),
    rgba(111, 157, 158, 0.404)
  );
}

.faq-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
}
.faq-item {
  display: grid;
  grid-template-columns: 0.5fr 3fr 5fr;
  align-items: center;
}
.faq-arrow img {
  width: 40%;
}
.faq-header p {
  font-size: 2.4rem;

  color: #096666;
  text-shadow: 0 0.4rem 0.6rem #07464672;
}

.faq-text p {
  color: #074646;
  font-size: 2.4rem;

  text-shadow: 0 0.4rem 0.6rem #00000056;
}

.data-img img {
  opacity: 0.3;
  width: 100%;
  z-index: -1;
  position: relative;
  max-height: 650px;
}

/**************************/
/* Contato */
/**************************/

.contato-container {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  margin-left: 6rem;
  margin-right: 6rem;
  gap: 4rem;
}

.form {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: 2.4rem;
  row-gap: 2.4rem;
  margin-top: 2rem;
  margin-right: 4.2rem;
  margin-bottom: 4.2rem;
}
.form label {
  display: block;
  color: #fff;
  font-size: 1.6rem;
  font-weight: 500;
  margin-bottom: 1.2rem;
}

.form input,
.form select,
.form textarea {
  width: 97%;
  padding: 1.2rem;

  font-size: 1.8rem;
  font-family: inherit;
  color: inherit;

  color: #fff;

  border: none;
  background-color: #074646;
  border-radius: 0.5rem;
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.1);
}

.form textarea {
  height: 300px;
}

.form input::placeholder {
  color: #fff;
  font-size: 1.4rem;
}

.form textarea::placeholder {
  color: #fff;
  font-size: 1.4rem;
}

.btn-form,
.btn-form:link,
.btn-form:visited {
  width: 97%;
  display: inline-block;
  margin-top: 1.2rem;
  font-size: 1.8rem;
  background: linear-gradient(to right, #074646, #6f9d9e);
  box-shadow: 0 0.2rem 0.4rem rgba(7, 70, 70, 0.66);
  color: #fff;
  font-weight: 600;
  border: 1px solid #fff;

  padding: 1.2rem;

  border-radius: 0.5rem;

  cursor: pointer;
  font-family: inherit;

  transition: all 0.3s;
}

.btn-form:hover,
.btn-form:active {
  width: 100%;
  text-decoration: underline;
  color: #fff;
  font-weight: 600;
}

.contato-right {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  align-self: center;
}
.contato-right-head {
  font-size: 3rem;
  color: #074646;
  text-align: center;
  margin-bottom: 1rem;
  justify-content: center;
}

.contato-right-head p {
  margin-top: 0;
}

.team-pic {
  display: flex;
  justify-content: center; /* horizontally center */
  align-items: center; /* vertically center if needed */
  padding: 0; /* remove the left padding */
}

.team-pic img {
  max-width: 100%;
  width: 80%; /* or whatever size you want */
  height: auto;
  display: block;
}

.social-media {
  display: flex;
  justify-content: center; /* centers icons horizontally */
  align-items: center;
  gap: 2rem; /* space between icons */
  padding: 0; /* remove side offsets */
  width: 100%; /* allow full centering room */
  margin: 4rem auto; /* top/bottom spacing and center block */
}

.social img {
  width: 100px;
  height: auto;
  display: block;
}

/**************************/
/* Footer */
/**************************/

.company {
  position: absolute;
  max-width: 100%;

  z-index: 100;
  display: grid;
  grid-template-columns: 1fr 1.5fr 1fr;
  align-items: center;

  margin-top: 5rem;
}
.company-name {
  font-size: 1.8rem;
  color: #ffff;
  line-height: 1.5;
  margin-top: 7rem;
  margin-left: 6rem;
}

.footer-logo {
  display: flex;
  justify-content: center; /* centers icons horizontally */
  align-items: center;
}

.footer-logo img {
  width: 50%;
  display: block;
}

.copyright {
  color: #fff;
  margin-top: 3rem;

  font-size: 1rem;
}
/* .footer-img img {
  position: relative;
  z-index: -1;
  width: 100%;
} */

.footer-img img {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

@supports (-webkit-touch-callout: none) {
  body {
    min-height: -webkit-fill-available;
  }
}

.galeria-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 2rem;
  margin-top: 4rem;
  margin-left: 2rem;
  margin-right: 2rem;
  margin-bottom: 12rem;
}

.galeria-img {
  display: block;
}

.galeria-img img {
  width: 100%;
}

.tc-text {
  line-height: 1.5;
  font-size: 1.8rem;
  margin-left: 4rem;
  margin-right: 4rem;
}

.t-c:link,
.t-c:active,
.t-c:hover,
.t-c:visited {
  color: #fff;
  font-weight: 500;
  font-size: 1.5rem;
}