@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@300;400;600&family=Lora:wght@400;700&family=Cormorant+Garamond:wght@300;400;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&display=swap');
/* -------------------------------- */
/* MEET_ME SECTION START */
/* -------------------------------- */

/* -------------------------------- */
/* MEET_ME SECTION START */
/* -------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Lora:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;700&display=swap');

/* -------------------------------- */
/* MEET_ME SECTION START */
/* -------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Roboto:wght@300;400&family=Dancing+Script:wght@400;700&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Roboto:wght@300;400&family=Dancing+Script:wght@400;700&display=swap');

.meet-me-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%; 
    margin-top: 0;
}

.meet-me-section .section {
    width: 100%; 
    padding: 20px; 
    margin: 0; 
    box-sizing: border-box; 
    position: relative; 
}

.intro {
  height: 882px;
  background-color: #403C2E;
  position: relative;
}

.image-1 {
  position: absolute;
  top: 21px;
  left: 903px;
  width: 42%;
  height: 651px;
  object-fit: cover;
}

.meet-me-text-box {
  position: absolute;
  top: 132px;
  left: 255px;
  transform: translate(-50%, -50%);
  background-color: transparent;
  color: white;
  text-align: center;
  white-space: nowrap;
  z-index: 10;
  resize: both;
  overflow: auto;
  cursor: move;
}

.meet-me-text-box span {
  font-family: 'Playfair Display', serif;
  font-size: 4.8em;
  font-weight: 100;
  color: white;
}

.meet-me-subtext-box {
  position: absolute;
  top: 408px;
  left: 31%;
  transform: translate(-50%, -50%);
  background-color: transparent;
  color: white !important;
  opacity: 1 !important;
  font-family: 'Roboto', sans-serif;
  font-size: 1.85em;
  font-weight: 300;
  text-align: center;
  line-height: 1.5em;
  z-index: 10;
}
.intro .meet-me-subtext-box p {
    color: white !important;
}

/* Segunda sección */
.about-me {
  height: 904px;
  background-color: #E6D6BE;
  position: relative;
}
.meet-me-about-me-title {
  position: absolute;
  top: 553px;
  left: 3%;
  transform: translate(0%, -50%);
  font-family: 'Dancing Script', cursive;
  font-size: 10em;
  letter-spacing: 0.1em;
  color: white;
  text-align: center;
  z-index: 10;
  background-color: transparent;
}

.meet-me-about-me-text {
  position: absolute;
  top: 736px;
  left: 10%;
  transform: translate(-6%, -60%);
  font-family: 'Roboto', sans-serif;
  font-size: 2em;
  color: white !important;
  text-align: center;
  max-width: 100%;
  line-height: 1.4em;
  background-color: transparent;
  z-index: 10;
  opacity: 1;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.meet-me-about-me-text p {
    color: white !important; /* Forzamos el color blanco para los párrafos */
}

.image-2 {
  position: absolute;
  top: -167px;
  left: 50%;
  transform: translateX(-50%);
  width: 86%;
  height: 727px;
  object-fit: cover;
}



/* Tercera sección */
.manifestation {
height: 1100px; /* Ajusta esta altura según lo necesario */
background-color: #403C2E; /* Color de fondo visible */
position: relative;
}

.vertical-rectangle {
  position: absolute;
  top: 18%;
  left: 0%;
  width: 387px;
  height: 695px;
  background-color: #776F4F;
}

.image-3 {
  position: absolute;
  top: 617px;
  left: 55%;
  transform: translateX(-50%);
  width: 46%;
  height: 307px;
  margin: 20px auto;
  object-fit: cover;
}

.meet-me-text-box-manifestation {
  position: absolute;
  top: 25%;
  left: 55%;
  transform: translate(-50%, -50%);
  background-color: transparent;
  color: white;
  text-align: center;
}

.meet-me-text-box-manifestation h1 {
  font-family: 'Playfair Display', serif;
  font-size: 6.1em;
  font-weight: 400;
  margin: 0;
}

.meet-me-text-box-manifestation p {
  font-family: 'Helvetica', sans-serif;
  font-size: 2em;
  margin: 0;
  line-height: 1.2em;
  color: white !important;
}

.meet-me-text-box-manifestation.resizable {
resize: both; /* Permite cambiar el tamaño en ambas direcciones */
overflow: auto; /* Asegura que el contenido no se salga del cuadro */
}

.meet-me-additional-text {
  position: absolute;
  top: 44%;
  left: 54%;
  transform: translate(-50%, -50%);
  background-color: transparent;
  color: white;
  text-align: center;
  max-width: 82%;
  font-family: 'Helvetica', sans-serif;
  font-size: 1.7em;
  line-height: 1.5em;
  z-index: 10;
  width: 715px;
}

.meet-me-additional-text p {
margin: 0;
color: white !important; /* Asegura que el texto sea blanco */
}

/* Cuarta sección */
.my-approach {
  height: 1100px;
  background-color: #FEF9F0;
  position: relative;
}

.image-4 {
  position: absolute;
  top: 50px;
  right: 0px;
  width: 63%;
  height: 973px;
  object-fit: cover;
}

.meet-me-vertical-text {
  position: absolute;
  top: 25%;
  left: -30px;
  transform: translateY(-50%) rotate(-90deg);
  font-family: 'Playfair Display', serif;
  font-size: 3.3em;
  color: black;
  white-space: nowrap;
}

.meet-me-text-box-background {
  position: absolute;
  top: 69%;
  left: 23%;
  transform: translate(-70%, -50%);
  background-color: #C2B19D;
  color: white;
  text-align: center;
  padding: 22px;
  font-family: 'Helvetica', sans-serif;
  font-size: 2em;
  line-height: 1.2em;
  width: 30%;
  height: 520px;
  max-width: 80%;
  z-index: 10;
}


.meet-me-text-box-background p {
margin: 0;
color: white; /* Asegura que el texto sea blanco */
}

/* Quinta sección */
.my-mission {
height: 1300px; /* Ajusta esta altura según lo necesites */
background-image: url('/static/imagenes meat me/MEATME 5.JPG'); /* Imagen de fondo */
background-size: cover; /* La imagen cubrirá toda la sección */
background-position: center; /* La imagen se centra en la sección */
position: relative;
z-index: 1;
}

.my-mission::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(138, 134, 123, 0.623); /* Capa semitransparente */
z-index: 2;
}

.meet-me-text-box-mission {
  position: absolute;
  top: 52%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  text-align: center;
  z-index: 3;
}

.meet-me-text-box-mission h1 {
  font-family: 'Montserrat', sans-serif;
  font-size: 4.42em;
  font-weight: 100;
  color: rgba(255, 255, 255, 0.95);
  text-align: center;
  letter-spacing: 0.02em;
  margin: 0;
  line-height: 1.1;
}

.meet-me-text-box-mission-details {
  position: absolute;
  top: 71%;
  left: 10%;
  transform: translate(-0%, -50%);
  color: white !important;
  text-align: center;
  z-index: 3;
  max-width: 80%;
}
.meet-me-text-box-mission-details p {
  font-family: 'Playfair Display', serif;
  font-size: 1.6em;
  font-weight: 300;
  margin: 0;
  line-height: 1.5em;
  color: white !important;
}

/* Sexta sección */
.my-key-strengths {
  height: 1030px; /* Ajusta esta altura según lo necesario */
  background-color: #403C2E; /* Color de fondo visible */
  position: relative; 
  z-index: 0; /* Asegura que esta capa esté en una posición más baja */
}

.meet-me-text-box-key-strengths {
  position: absolute;
  top: 10%;
  left: 32%;
  transform: translate(0%, -50%);
  color: white;
  background-color: transparent;
  z-index: 2;
  text-align: center;
  resize: both;
  overflow: auto;
}

.meet-me-text-box-key-strengths h1 {
  font-family: 'Montserrat', sans-serif;
  font-size: 3.6em;
  font-weight: 100;
  margin: 0;
}

.meet-me-strengths-list {
  position: absolute;
  top: 50%; /* Ajusta según lo necesites para mover verticalmente */
  left: 20%; /* Ajusta para mover horizontalmente */
  transform: translate(0%, -50%);
  background-color: #76784E; /* Color de fondo del cuadro */
  color: white; /* Color del texto en la lista */
  padding: 20px;
  width: 60%; /* Ancho del cuadro de la lista */
  z-index: 2; /* Asegura que esté sobre el fondo */
}

.meet-me-strengths-list ul {
  list-style: none; /* Elimina los puntos de la lista predeterminados */
  padding-left: 0; /* Ajuste de margen para los elementos de la lista */
  position: relative;
}

.meet-me-strengths-list ul li {
  display: flex;
  align-items: flex-start;
  margin-bottom: 15px;
  font-family: 'Playfair Display', serif;
  font-size: 1.5em;
  line-height: 1.5em;
  position: relative;
}

.meet-me-strengths-list ul li:before {
  content: "";
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  background-color: white;
  border-radius: 50%;
  margin-right: 15px;
  margin-top: 5px;
}

.meet-me-strengths-list ul li:after {
  content: "";
  position: absolute;
  top: 13px;
  left: 4px;
  width: 2px;
  height: calc(180% - 26px);
  background-color: white;
}

/* Elimina la línea del último elemento */
.meet-me-strengths-list ul li:last-child:after {
  content: none;
}


/* Séptima sección */
/* Estilo de la sección .more-about-me */
.more-about-me {
  height: 110vh; /* Altura basada en el 80% de la altura de la ventana */
  background-color: #C6BBC5;
  position: relative;
  z-index: 1;
}

/* Estilo de las imágenes */
.image-6, .image-7, .image-8, .image-9 {
  z-index: 3;
  position: absolute;
  object-fit: cover;
}

.image-6 {
  top: 5vh;
  left: 24vw;
  width: 52vw;
  height: 15vh;
}
.image-7 {
  top: 26vh;
  left: 0;
  width: 45vw;
  height: 26vh;
}
.image-8 {
  top: 54vh;
  right: 58vw;
  width: 33vw;
  height: 17vh;
}
.image-9 {
  top: 86vh;
  left: 0;
  width: 100vw;
  height: 30vh;
  background-image: url('/static/imagenes meat me/MEATME 9.JPG');
  background-size: cover;
  background-position: center;
  resize: both;
  overflow: auto;
}

/* Recuadro 1 - Color #A16D47 */
.rectangle-1 {
  position: absolute;
  top: 10vh;
  left: 0;
  width: 100vw;
  height: 29vh;
  background-color: #A16D47;
  z-index: 2;
  resize: both;
  overflow: auto;
}

/* Recuadro 2 - Color #C6BBC5 */
.rectangle-2 {
  position: absolute;
  top: 3vh;
  left: 20vw;
  width: 60vw;
  height: 7vh;
  background-color: #ffffff;
  z-index: 1;
  resize: both;
  overflow: auto;
}

/* Texto en la sección 7 */
.meet-me-text-box-more-about-me {
  position: absolute;
  top: 22vh;
  left: 51vw;
  color: black;
  font-family: 'Playfair Display', serif;
  font-size: 4vw;
  font-weight: 400;
  z-index: 4;
  background-color: transparent;
}

/* Cuadro de texto blanco en la sección 7 */
.meet-me-text-box-white {
  position: absolute;
  top: 26vh;
  left: 51vw;
  width: 49vw;
  padding: 1vw;
  background-color: white;
  color: black;
  font-family: 'Playfair Display', serif;
  font-size: 2.5vw;
  line-height: 1em;
  z-index: 5;
  text-align: center;
}