@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&display=swap');
@import url('https://fonts.cdnfonts.com/css/quentin');
:root {

  /* Colors: */
  ---primextate-color-0000ff-0000ff: #0000FF;
  ---primextate-color-f5f5f5-f5f5f5: #F5F5F5;
  ---primextate-color-898989-898989: #898989;
  ---primextate-color-ffffff-ffffff: #FFFFFF;
  ---primextate-color-121212-121212: #121212;
 --primextate-color-000000: #000000;
  
  /* Font/text values */
 --primextate-font-family-montserrat: Montserrat;
 --primextate-font-family-quentin: Quentin;
 --primextate-font-style-normal: normal;
 --primextate-font-weight-600: 600px;
 --primextate-font-weight-bold: bold;
 --primextate-font-weight-normal: normal;
 --primextate-font-weight-medium: medium;
 --primextate-font-size-12: 12px;
 --primextate-font-size-14: 14px;
 --primextate-font-size-14: 18px;
 --primextate-font-size-22: 22px;
 --primextate-font-size-24: 24px;
 --primextate-font-size-35: 35px;
 --primextate-font-size-55: 55px;
 --primextate-font-size-75: 75px;
 --primextate-font-size-84: 84px;
 --primextate-character-spacing-0: 0px;
 --primextate-line-spacing-18: 18px;
 --primextate-line-spacing-20: 20px;
 --primextate-line-spacing-30: 30px;
 --primextate-line-spacing-31: 31px;
 --primextate-line-spacing-38: 38px;
 --primextate-line-spacing-70: 70px;
 --primextate-line-spacing-84: 84px;
 --primextate-text-transform-uppercase: uppercase;
 --primextate-text-transform-lowercase: lowercase;
 --primextate-text-transform-titlecase: titlecase;
  }
  
  /* Character Styles */
  .h1-montserrat-—-75pt {
  font-family: var(--primextate-font-family-montserrat);
  font-style: var(--primextate-font-style-normal);
  font-weight: var(--primextate-font-weight-normal);
  font-size: var(--primextate-font-size-75);
  color: var(--primextate-color-000000);
  text-transform: var(--primextate-text-transform-uppercase);
  }
  .h1b-montserrat-—-55pt {
  font-family: var(--primextate-font-family-montserrat);
  font-style: var(--primextate-font-style-normal);
  font-weight: var(--primextate-font-weight-normal);
  font-size: var(--primextate-font-size-55);
  line-height: var(--primextate-line-spacing-70);
  letter-spacing: var(--primextate-character-spacing-0);
  color: var(--primextate-color-000000);
  text-transform: var(--primextate-text-transform-uppercase);
  }
  .h2-quentin-—-84pt-gray {
  font-family: var(--primextate-font-family-quentin);
  font-style: var(--primextate-font-style-normal);
  font-weight: var(--primextate-font-weight-normal);
  font-size: var(--primextate-font-size-84);
  line-height: var(--primextate-line-spacing-70);
  letter-spacing: var(--primextate-character-spacing-0);
  color: var(---primextate-color-898989-898989);
  }
  .h3-montserrat-—-35pt {
  font-family: var(--primextate-font-family-montserrat);
  font-style: var(--primextate-font-style-normal);
  font-weight: var(--primextate-font-weight-600);
  font-size: var(--primextate-font-size-35);
  line-height: var(--primextate-line-spacing-20);
  letter-spacing: var(--primextate-character-spacing-0);
  color: var(--primextate-color-000000);
  text-transform: var(--primextate-text-transform-uppercase);
  }
  .h3b-montserrat-—-22pt {
  font-family: var(--primextate-font-family-montserrat);
  font-style: var(--primextate-font-style-normal);
  font-weight: var(--primextate-font-weight-bold);
  font-size: var(--primextate-font-size-22);
  line-height: var(--primextate-line-spacing-31);
  letter-spacing: var(--primextate-character-spacing-0);
  color: var(--primextate-color-000000);
  }
  .h4b-montserrat-—-18pt {
    font-family: var(--primextate-font-family-montserrat);
    font-style: var(--primextate-font-style-normal);
    font-weight: var(--primextate-font-weight-bold);
    font-size: var(--primextate-font-size-18);
    line-height: var(--primextate-line-spacing-18);
    letter-spacing: var(--primextate-character-spacing-0);
    color: var(--primextate-color-000000);
    /* text-transform: var(--primextate-text-transform-uppercase); */
    }

  .h4-montserrat-—-14pt {
  font-family: var(--primextate-font-family-montserrat);
  font-style: var(--primextate-font-style-normal);
  font-weight: var(--primextate-font-weight-normal);
  font-size: var(--primextate-font-size-14);
  line-height: var(--primextate-line-spacing-18);
  letter-spacing: var(--primextate-character-spacing-0);
  color: var(--primextate-color-000000);
  }
  .h4b-montserrat-—-14pt {
  font-family: var(--primextate-font-family-montserrat);
  font-style: var(--primextate-font-style-normal);
  font-weight: var(--primextate-font-weight-bold);
  font-size: var(--primextate-font-size-14);
  line-height: var(--primextate-line-spacing-18);
  letter-spacing: var(--primextate-character-spacing-0);
  color: var(--primextate-color-000000);
  text-transform: var(--primextate-text-transform-uppercase);
  }
  .h5-montserrat-—-24pt {
  font-family: var(--primextate-font-family-montserrat);
  font-style: var(--primextate-font-style-normal);
  font-weight: var(--primextate-font-weight-medium);
  font-size: var(--primextate-font-size-24);
  line-height: var(--primextate-line-spacing-38);
  letter-spacing: var(--primextate-character-spacing-0);
  color: var(--primextate-color-000000);
  text-transform: var(--primextate-text-transform-lowercase);
  }
  .h5b-montserrat-—-24pt {
  font-family: var(--primextate-font-family-montserrat);
  font-style: var(--primextate-font-style-normal);
  font-weight: var(--primextate-font-weight-medium);
  font-size: var(--primextate-font-size-24);
  line-height: var(--primextate-line-spacing-38);
  letter-spacing: var(--primextate-character-spacing-0);
  color: var(--primextate-color-000000);
  text-transform: var(--primextate-text-transform-titlecase);
  }
  .h6-montserrat-—-12pt {
  font-family: var(--primextate-font-family-montserrat);
  font-style: var(--primextate-font-style-normal);
  font-weight: var(--primextate-font-weight-600);
  font-size: var(--primextate-font-size-12);
  line-height: var(--primextate-line-spacing-30);
  letter-spacing: var(--primextate-character-spacing-0);
  color: var(--primextate-color-000000);
  }

  .h6-montserrat-—-12pt-black {
    font-family: var(--primextate-font-family-montserrat);
    font-style: var(--primextate-font-style-normal);
    font-weight: var(--primextate-font-weight-600);
    font-size: var(--primextate-font-size-12);
    line-height: var(--primextate-line-spacing-30);
    letter-spacing: var(--primextate-character-spacing-0);
    color: var(--primextate-color-000000);
    }
  .h1-montserrat-—-75pt-black {
  font-family: var(--primextate-font-family-montserrat);
  font-style: var(--primextate-font-style-normal);
  font-weight: var(--primextate-font-weight-normal);
  font-size: var(--primextate-font-size-75);
  line-height: var(--primextate-line-spacing-84);
  letter-spacing: var(--primextate-character-spacing-0);
  color: var(---primextate-color-121212-121212);
  text-transform: var(--primextate-text-transform-uppercase);
  }
  .h2-quentin-—-84pt {
  font-family: var(--primextate-font-family-quentin);
  font-style: var(--primextate-font-style-normal);
  font-weight: var(--primextate-font-weight-normal);
  font-size: var(--primextate-font-size-84);
  line-height: var(--primextate-line-spacing-30);
  letter-spacing: var(--primextate-character-spacing-0);
  color: var(---primextate-color-ffffff-ffffff);
  }


  .h4-montserrat-—-14pt {
  font-family: var(--primextate-font-family-montserrat);
  font-style: var(--primextate-font-style-normal);
  font-weight: var(--primextate-font-weight-normal);
  font-size: var(--primextate-font-size-14);
  line-height: var(--primextate-line-spacing-18);
  letter-spacing: var(--primextate-character-spacing-0);
  color: var(---primextate-color-ffffff-ffffff);
  }
  .h4b-montserrat-—-14pt {
  font-family: var(--primextate-font-family-montserrat);
  font-style: var(--primextate-font-style-normal);
  font-weight: var(--primextate-font-weight-bold);
  font-size: var(--primextate-font-size-14);
  line-height: var(--primextate-line-spacing-18);
  letter-spacing: var(--primextate-character-spacing-0);
  color: var(---primextate-color-ffffff-ffffff);
  text-transform: var(--primextate-text-transform-uppercase);
  }
  .h5-montserrat-—-24pt {
  font-family: var(--primextate-font-family-montserrat);
  font-style: var(--primextate-font-style-normal);
  font-weight: var(--primextate-font-weight-medium);
  font-size: var(--primextate-font-size-24);
  line-height: var(--primextate-line-spacing-38);
  letter-spacing: var(--primextate-character-spacing-0);
  color: var(---primextate-color-ffffff-ffffff);
  text-transform: var(--primextate-text-transform-lowercase);
  }
  .h5b-montserrat-—-24pt {
  font-family: var(--primextate-font-family-montserrat);
  font-style: var(--primextate-font-style-normal);
  font-weight: var(--primextate-font-weight-medium);
  font-size: var(--primextate-font-size-24);
  line-height: var(--primextate-line-spacing-38);
  letter-spacing: var(--primextate-character-spacing-0);
  color: var(---primextate-color-ffffff-ffffff);
  text-transform: var(--primextate-text-transform-titlecase);
  }
  .h6-montserrat-—-12pt {
  font-family: var(--primextate-font-family-montserrat);
  font-style: var(--primextate-font-style-normal);
  font-weight: var(--primextate-font-weight-600);
  font-size: var(--primextate-font-size-12);
  line-height: var(--primextate-line-spacing-30);
  letter-spacing: var(--primextate-character-spacing-0);
  color: var(---primextate-color-ffffff-ffffff);
  }
  
  .h1-montserrat-—-66pt{
    font: var(--primextate-font-style-normal) normal var(--primextate-font-weight-normal) 66px/99px var(--primextate-font-family-montserrat);
    letter-spacing: var(--primextate-character-spacing-0);
    color: var(---primextate-color-ffffff-ffffff);
    text-align: left;
  }

  .h1-montserrat-—-92pt{
    font: var(--primextate-font-style-normal) normal var(--primextate-font-weight-normal) 92px/99px var(--primextate-font-family-montserrat);
    letter-spacing: var(--primextate-character-spacing-0);
    color: var(---primextate-color-ffffff-ffffff);
    text-align: left;
  }

  .h3-montserrat-—-35pt{
    font: var(--primextate-font-style-normal) normal var(--primextate-font-weight-normal) 35px/40px var(--primextate-font-family-montserrat);
    letter-spacing: var(--primextate-character-spacing-0);
    color: var(---primextate-color-121212-121212);
    text-transform: uppercase;
  }

  .h3-montserrat-—-35pt-white{
    font: var(--primextate-font-style-normal) normal var(--primextate-font-weight-normal) 35px/40px var(--primextate-font-family-montserrat);
    letter-spacing: var(--primextate-character-spacing-0);
    color: var(---primextate-color-ffffff-ffffff);
    text-transform: uppercase;
  }

  .h3-montserrat-—-25pt{
    font: var(--primextate-font-style-normal) normal var(--primextate-font-weight-normal) 25px/61px var(--primextate-font-family-montserrat);
    letter-spacing: var(--primextate-character-spacing-0);
    color: var(---primextate-color-121212-121212);
    text-transform: uppercase;
  }

  .h3-montserrat-—-24pt{
    font: var(--primextate-font-style-normal) normal var(--primextate-font-weight-normal) 24px/38px var(--primextate-font-family-montserrat);
    letter-spacing: var(--primextate-character-spacing-0);
    color: var(---primextate-color-898989-898989);  
  }

  a {
    color: var(---primextate-color-898989-898989);
  }

  a:hover {
    color: var(---primextate-color-121212-121212);
  }

  .text-justify {
    text-align: justify;
  }
.margin-page-content {
    margin-top: 144px;
}

.member_form {
  font: var(--primextate-font-style-normal) normal var(--primextate-font-style-normal) 12px/30px var(--primextate-font-family-montserrat);
  color: var(---primextate-color-121212-121212);
  opacity: 0.5;
  line-height: var(--primextate-line-spacing-20);
}

.bg-img {
  height: 100vh;
  width: 100vw;
  object-fit: cover;
  filter: brightness(0.6);
}

#bg-responsive-dark {
  position: absolute;
  height: 100vh;
  width: 100vw;
  background-color: #000000;
  display: none;
}

#bg-responsive-light {
  position: absolute;
  height: 100vh;
  width: 100vw;
  background-color: #ffffff;
  display: none;
}

.div_home_section_bg_1 {
  /* content: ""; Removed this line */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  position: absolute;
  z-index: 1; /* Set a higher z-index value */
}

.padding-bottom {
  padding-bottom: 64px;
}
.padding-top {
  padding-top: 64px;
}
.navbar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 2; /* Set a higher z-index value than .div_home_section_bg_1 */
}

.navbar-dark .navbar-nav .nav-link {
  color: white !important;
  transition: transform 0.3s ease, color 0.3s ease;
}

.navbar-dark .navbar-nav .nav-link:hover {
  color: #e2dadaa3 !important; 
  transform: scale(1.1);  /* Scale by 10% */
}

.navbar-light .navbar-nav .nav-link:hover {
  transform: scale(1.1);  /* Scale by 10% */
}


.custom-link {
  /* Removed duplicate 'font' property */
  letter-spacing: var(--primextate-character-spacing-0);
  color: var(--primextate-color-ffffff);
  text-align: left;
  font: normal 14px/30px Montserrat; /* Combined font properties */
  opacity: 1;
  font-weight: bold;
}

.custom-link.sign-in {
  border: 1px solid var(--primextate-color-ffffff);
  border-radius: 19px;
  opacity: 1;
  width: 93px;
  text-align: center;
}

.content-home-header-text-area {
  position: absolute;
  top: 197px;
  left: 60px;
  height: 521px;
  /* UI Properties */
  z-index: 3; /* Set a higher z-index value than .div_home_section_bg_1 */
}

.content-home-header-text-area .text {
  font: var(--primextate-font-style-normal) normal var(--primextate-font-weight-normal) 53px/80px var(--primextate-font-family-montserrat);
  letter-spacing: var(--primextate-character-spacing-0);
  color: var(---primextate-color-ffffff);
  text-align: left;
}

.content-home-header-numbers-area {
  position: absolute;
  top: 500px;
  left: 60px;
  height: 521px;
  z-index: 3; /* Set a higher z-index value than .div_home_section_bg_1 */
}

.menu_bg {
  height: 100vh;
  width: 100vw;
}

.content-home-header-numbers-area .counter-number {
  /* UI Properties */
  letter-spacing: var(--primextate-character-spacing-0);
  color: var(---primextate-color-ffffff-ffffff);
  text-align: left;
  font: var(--primextate-font-style-normal) normal var(--primextate-font-weight-normal) 53px/80px var(--primextate-font-family-montserrat);
}

.content-home-header-numbers-area .counter-description {
  letter-spacing: var(--primextate-character-spacing-0);
  text-align: left;
  font: normal normal normal 22px/21px Montserrat;
  color: var(---primextate-color-ffffff-ffffff);
}

.menu-header-container {
  display: grid;
  grid-template-rows: 1fr auto;
  min-height: 100vh; /* Changed from 100vh to 100% */
}

.beige_section {
  background: #F5F4F3 0% 0% no-repeat padding-box;
  opacity: 1;
}

.gray_section {
  background: var(---primextate-color-f5f5f5-f5f5f5) 0% 0% no-repeat padding-box;
  opacity: 1;
}

.black_section {
  background: #000000 0% 0% no-repeat padding-box;
  opacity: 1;
}

.custom-line {
  height: 5px;
  background-color: #121212;
  width: 100%;
}

.custom-line-white {
  height: 3px;
  background-color: #ffffff;
  width: 100%;
}

p {
  text-align: justify;
  font: normal normal normal 14px/18px Montserrat;
  letter-spacing: 0px;
  color: #121212;
  opacity: 1;
}

.pw {
  text-align: justify;
  font: normal normal normal 14px/18px Montserrat;
  letter-spacing: 0px;
  color: #ffffff;
  opacity: 1;
}

.button-black {
  width: 226px;
  height: 45px;
  background: #121212 0% 0% no-repeat padding-box;
  border: 1px solid #272727;
  border-radius: 32px;
  opacity: 1;
  color: #FFFFFF;
  font: normal normal normal 14px/30px Montserrat;
  padding: 5px;
  text-align: center;
  text-decoration: none;
}

.button-black:hover {
  color: white !important;
}

.button-black a:hover {
  color: var(---primextate-color-f5f5f5-f5f5f5);
}

.button-search {
  background: #121212 0% 0% no-repeat padding-box;
  color: #FFFFFF;
  /* font: normal normal normal 14px/30px Montserrat;
  #text-align: center;
  #text-decoration: none;
  */
}

.button-search:hover {
  color: white !important;
}

.button-search a:hover {
  color: var(---primextate-color-f5f5f5-f5f5f5);
}


.button-beige {
  width: 226px;
  height: 45px;
  background: #F5F4F3 0% 0% no-repeat padding-box;
  border: 1px solid #272727;
  border-radius: 32px;
  opacity: 1;
  color: #000000;
  font: normal normal normal 14px/30px Montserrat;
  padding: 5px;
  text-align: center;
  text-decoration: none;
}


.counter-number {
  /* UI Properties */
  font: var(--primextate-font-style-normal) normal var(--primextate-font-style-normal) 33px/14px var(--primextate-font-family-montserrat);
}

.counter-description {
  font: var(--primextate-font-style-normal) normal var(--primextate-font-weight-normal) var(--primextate-font-size-14)/13px var(--primextate-font-family-montserrat);
}

.my-video-class {
  width: 100%;
  max-width: 600px;
  height: auto;
  margin: 0 auto;
  display: block;
}

.rounded {
  border-radius: 0.95rem !important;
}


.pagination {
  font: var(--primextate-font-style-normal) normal var(--primextate-font-weight-normal) var(--primextate-font-size-12)/13px var(--primextate-font-family-montserrat);
  text-align: center;  /* Centra la paginación horizontalmente */
  margin: 20px 0;      /* Agrega margen arriba y abajo para separar de otros elementos */
}

.pagination ul {
  list-style: none;    /* Elimina los puntos de la lista */
  padding: 0;          /* Elimina el padding predeterminado */
}

.pagination li {
  display: inline;     /* Muestra los elementos de la lista en línea */
  margin-right: 5px;   /* Espacio entre los botones de paginación */
}

.pagination a {
  padding: 5px 10px;   /* Padding alrededor del texto en los enlaces */
  text-decoration: none;  /* Elimina el subrayado de los enlaces */
  color: #333;         /* Color del texto de los enlaces */
  background-color: #e9e9e9;  /* Color de fondo de los enlaces */
  border: 1px solid #ccc; /* Borde alrededor de los enlaces */
}

.pagination .active a {
  color: #fff;         /* Color del texto para la página activa */
  background-color: #007bff; /* Color de fondo para la página activa */
}

.pagination .disabled a {
  color: #aaa;         /* Color del texto para enlaces deshabilitados */
  background-color: #f9f9f9; /* Color de fondo para enlaces deshabilitados */
}


.current {
  padding: 5px 10px;
  color: #333;
  background-color: #ffffff;
  border: 1px solid #ccc;
}

.next_page {
  padding: 5px 10px;
  text-decoration: none;
  color: #333;
  background-color: #ffffff;
  border: 1px solid #ccc;
}

.previous_page {
  padding: 5px 10px;
  text-decoration: none;
  color: #333;
  background-color: #e9e9e9;
  border: 1px solid #ccc;
}

.button-search.inactive {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Media Queries */
@media (max-width: 575.98px) {
  /* Add styles for screens less than 576px wide here */
}

@media (max-width: 767.98px) {

  .h1b-montserrat-—-55pt {
    font-family: var(--primextate-font-family-montserrat);
    font-style: var(--primextate-font-style-normal);
    font-weight: var(--primextate-font-weight-normal);
    font-size: var(--primextate-font-size-22);
    line-height: var(--primextate-line-spacing-30);
    letter-spacing: var(--primextate-character-spacing-0);
    color: var(--primextate-color-000000);
    text-transform: var(--primextate-text-transform-uppercase);
    }
    
  .div_home_section_1 {
    height: 50%;
  }

  .div_home_section_bg_1 {
    height: 50%;
  }

  .h1-montserrat-—-66pt{
    font: normal normal normal 35px/46px Montserrat;
  }

  .h1-montserrat-—-92pt{
    font: normal normal normal 35px/46px Montserrat;
  }

  .h1-montserrat-—-75pt-black{
    font-size: var(--primextate-font-size-35);
  }
  .h2-quentin-—-84pt-gray {
    font-size: var(--primextate-font-size-35);
    line-height: var(--primextate-line-spacing-30);
    }

  .h1-montserrat-—-75pt {
    font-size: var(--primextate-font-size-35);
    }  


  .content-home-header-text-area .text {
    font: normal normal normal 35px/46px Montserrat;
  }

  .content-home-header-numbers-area {
    left: 20px;
    height: 100px;
  }

  .content-home-header-numbers-area .counter-number {
    /* UI Properties */
    font: normal normal normal 35px/21px Montserrat;
  }

  .content-home-header-numbers-area .counter-description {
    font: normal normal normal 14px/17px Montserrat;
  }

  .menu-header-container {
    display: grid;
    grid-template-rows: 1fr auto;
    min-height: 50vh;
  }

  .reinvents {
    padding-top: 0rem;
    padding-left: 0rem;
    padding-right: 0rem;
    padding-bottom: 0rem;
  }
}

@media (max-width: 1199.98px) {
  .reinvents {
    padding-top: 5rem;
    padding-left: 5rem;
    padding-right: 5rem;
    padding-bottom: 5rem;
  }
}