*{
  margin: 0;
  padding: 0;
}
body {
  font-family: 'Bebas Neue', sans-serif;
  overflow-x: hidden !important;
}

nav{
  background-color: transparent !important;
  box-shadow: none !important;
}

  
header {
  background: var(--transparent-background);
  width: 100%;
  position: fixed;
  top: 0;
  right: 0;
  height: 6vw;
  z-index: 100;
  transition: 0.75s;
  background-color: var(--background-cards);
}


header ul{
  position: fixed;
  top: 0;
  right: 0;
}

#container-top-navbar{
  width: 100%;
  margin: 0 auto;
  position: relative;
  transition: all 0.75s;
}

nav {
  float: right;
}

nav ul {
  display: inline-block;
  padding-top: 3.5vh;
  padding-right: 2.5vw;
}

.show-background{
  background-color: var(--background-cards);
}

nav li {
  display: inline-block;
  margin-left: 1.5vw;
}

.nav-btn {
  font-size: clamp(0px,4vh,1000px);
  color: var(--nav-btn-color);
  text-decoration: none;
  transition: transform 0.3s ease;
}

.nav-btn:hover {
  color: var(--hover-nav-btn-color);
  transition: 125ms;
}

#container-top-navbar-responsive{
  width: 90%;
  margin: 0 auto;
  position: relative;
  display: none;
  transition: all 0.75s;
}


#menu-button-responsive{
  background-color: transparent;
  border: none;
  font-size: 300%;
  color: var(--hover-nav-btn-color);
  position: fixed;
  z-index: 20;
  top: 10px;
  right: 20px;
}

@media only screen and (max-width: 1000px) {
  header {
      z-index: 100;
      background-color: transparent;
  }
  #container-top-navbar{
      width: 0vw;
      height: 100vh;
      position: absolute;
      top: 0;
      right: 0;
      padding-top: 10vh;
      background-color: var(--menu-responsive-background-color);
      display: block;
      transition: 0.25s;
  }

  nav ul {
      padding-right: 2vw;
  }
  nav li {
      display: block !important;
      margin-left: 0;
      margin-bottom: 10%;
  }
  .nav-btn {
      display: block;
      font-size: 0;
      transition: all 0.75s;
      color: transparent;
      transition: 0.25s
  }
  #container-top-navbar-responsive{
      width: 90%;
      margin: 0 auto;
      position: relative;
      display: block;
  }
}
section {
  width: 20vw;
  padding: 1vw;
  margin-bottom: 6vh;
  background-color: #f5f5f5;
  border-radius: 5px;
  box-shadow: 0 0px 5px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
  z-index: 0;
}

section:hover {
  transform: scale(1.05);
  z-index: 0;
}

img {
  max-width: 100%;
  height: auto;
}

.show{
  width: 70vw !important;
  padding-left: 5vw !important;
}

.show2{
  font-size: 5vh !important;
  margin-left: 30vw;
  color: var(--nav-btn-color);
}

#content-container{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 40px;
  justify-items: center;
  padding: 20px;
  margin-top: 20vh;
}

.empresa {
  margin-bottom: 6vh;
}

.empresa h2 {
  font-size: 4vw;
  color: #333;
  margin-bottom: 1vh;
}

.empresa ul {
  list-style-type: disc;
  margin-left: 4vw;
}

.empresa ul li {
  margin-bottom: 5vh;
}

/* Media Query para ajustar el diseño en dispositivos móviles si es necesario */
@media screen and (max-width: 768px) {
  #content-container {
    max-width: 90vw;
    padding: 3vw;
  }
  section {
    width: 70vw;
    padding: 6vw;
    margin-bottom: 8vh;
  }

  #content-container {
    display: grid;
    grid-template-columns: 1fr; /* Cambiamos el número de columnas a 1 */
    justify-items: center;
    padding: 20px;
    margin-top: 20vh;
  }
  

  .empresa h2 {
    font-size: 6vw;
    margin-bottom: 2vh;
  }

  .empresa ul {
    margin-left: 6vw;
  }
}

#footer-container{
  position: relative;
  margin-top: 20vh;
  width: 100vw;
}

footer {
  background-color: var(--blue);
  color: white;
  padding: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  font-size: 20px;
  padding: 6vw;
}

.footer-section {
  flex-basis: 25%;
  text-align: left;
  margin-bottom: 20px;
}


.footer-section h4 {
  font-size: 24px;
  margin-bottom: 10px;
}

.footer-section ul,
.footer-section p {
  list-style-type: none;
  padding: 0;
  margin: 0;
  text-align: left;
  width: 90%;
}

.footer-section ul li {
  margin-bottom: 5px;
}

@media screen and (max-width: 768px) {
  .footer-section {
    flex-basis: 100%;
  }
}


:root{
  --transparent-background: rgba(255, 255, 255, 0.0);
  --nav-btn-color: white;
  --hover-nav-btn-color: rgb(230, 230, 230);
  --menu-responsive-background-color: rgba(50, 50, 50, 1);
  --paragraph-title-color: #1E365E;
  --paragraph-text-color: #898989;
  --background-cards: #1E365E;
}

:root{
--transparent: rgba(255, 255, 255, 0.0);
--white: white;
--gris-claro: rgb(230, 230, 230);
--gris-oscuro: rgba(50, 50, 50, 1);
--blue: #1E365E;
--blue-claro: #1e54b1;
--gris: #898989;
}