@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');
/* Ajustes para tablet - Primera Sección (intro) */
.meet-me-section {
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin-top: 0;
}

.intro {
    height: 900px; /* Mantiene la altura de la sección */
    background-color: #403C2E;
    position: relative;
}

/* Imagen de la primera sección */
.image-1 {
    position: absolute;
    top: 40px;
    left: 65%; /* Mueve la imagen un poco más a la derecha */
    width: 30%; /* Mantiene el ancho para mostrar la imagen completa */
    height: auto;
    object-fit: contain;
}

/* Caja de texto principal */
.meet-me-text-box {
    position: absolute;
    top: 170px;
    left: 30%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: white;
    font-size: 2.8em;
    z-index: 10;
}

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

/* Caja de subtexto */
.meet-me-subtext-box {
    position: absolute;
    top: 350px;
    left: 30%;
    transform: translate(-50%, -50%);
    font-family: 'Roboto', sans-serif;
    font-size: 1.4em;
    font-weight: 300;
    text-align: center;
    color: white;
    line-height: 1.5em;
    z-index: 10;
}

.intro .meet-me-subtext-box p {
    color: white !important;
}




/* Ajustes para tablet - Segunda Sección */
.about-me {
    height: 600px; /* Aumenta la altura de la sección */
    background-color: #E6D6BE;
    position: relative;
}

/* Título de la segunda sección */
.meet-me-about-me-title {
    position: absolute;
    top: 220px; /* Baja el título más dentro de la sección */
    left: 9%;
    transform: translate(0%, -50%);
    font-family: 'Dancing Script', cursive;
    font-size: 6em; /* Aumenta considerablemente el tamaño de fuente */
    letter-spacing: 0.1em;
    color: white;
    text-align: center;
    z-index: 10;
    background-color: transparent;
}

/* Texto de descripción de la segunda sección */
.meet-me-about-me-text {
    position: absolute;
    top: 390px; /* Baja el texto de descripción más */
    left: 10%;
    transform: translate(-6%, -50%);
    font-family: 'Roboto', sans-serif;
    font-size: 1.6em; /* Aumenta el tamaño de fuente */
    color: white !important;
    text-align: center;
    max-width: 85%; /* Ajuste proporcional del ancho */
    line-height: 1.5em;
    background-color: transparent;
    z-index: 10;
    padding: 0;
    margin: 0;
}

/* Imagen de la segunda sección */
.image-2 {
    position: absolute;
    top: -350px;
    left: 50%;
    transform: translateX(-50%);
    width: 75%; /* Mantiene el ajuste de tamaño de imagen */
    height: auto;
    object-fit: cover;
}



/* Tercera sección */
.manifestation {
    height: 1200px; /* Mantiene la altura ampliada */
    background-color: #403C2E;
    position: relative;
}

/* Rectángulo vertical */
.vertical-rectangle {
    position: absolute;
    top: 8%;
    left: 5%; /* Mueve ligeramente hacia la derecha para alineación */
    width: 260px;
    height: 500px;
    background-color: #776F4F;
}

/* Imagen de la tercera sección */
.image-3 {
    position: absolute;
    top: 700px; /* Mantiene la posición para estar alineada */
    left: 55%; /* Ajuste ligero para centrar mejor */
    transform: translateX(-50%);
    width: 55%;
    height: auto;
    margin: 20px auto;
    object-fit: cover;
}

/* Caja de texto principal */
.meet-me-text-box-manifestation {
    position: absolute;
    top: 25%; /* Posición ajustada para alineación con el título */
    left: 55%; /* Centrado con la imagen */
    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: 3.2em;
    font-weight: 400;
    margin: 0;
}

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

/* Texto adicional */
.meet-me-additional-text {
    position: absolute;
    top: 40%; /* Regresamos el texto a su posición original */
    left: 55%;
    transform: translate(-50%, -50%);
    background-color: transparent;
    color: white;
    text-align: center;
    max-width: 95%;
    font-family: 'Helvetica', sans-serif;
    font-size: 1.1em;
    line-height: 1.6em;
    z-index: 10;
    width: 280px;
}

.meet-me-additional-text p {
    margin: 0;
    color: white !important;
}


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

.image-4 {
position: absolute;
top: 50px;
right: 0px;
width: 63%;
height: 374px;
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: 1.8em;
color: black;
white-space: nowrap;
}

.meet-me-text-box-background {
  position: absolute;
  top: 69%;
  left: 40%;
  transform: translate(-70%, -50%);
  background-color: #C2B19D;
  color: white;
  text-align: center;
  padding: 22px;
  font-family: 'Helvetica', sans-serif;
  font-size: -1.1em;
  line-height: 1.2em;
  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: 500px; /* 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: 1.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: 0.6em; /* Tamaño de la fuente */
font-weight: 300; /* Grosor del texto */
margin: 0;
line-height: 1.5em; /* Espaciado entre líneas */
color: white !important; /* Forzar el color blanco para los párrafos */
}

/* Sexta sección */
.my-key-strengths {
  height: 700px; /* 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: 17%;
  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; /* Cambia la fuente a Montserrat */
  font-size: 1.6em; /* Tamaño de la letra para "MY KEY STRENGTHS" */
  font-weight: 100; /* Grosor del texto */
  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: 0.6em;
  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;
}