body {
    font-family: Arial, sans-serif;
    margin:auto;
    padding: 0px;
    background-color: #ffffff;
    box-sizing: border-box;
    
}
body {
  overflow-x: hidden;
}
/* Estilos generales (para todos los dispositivos) */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}





/* Estilos para tabletas (pantallas medianas) */
@media (max-width: 1024px) {
  .container {
    max-width: 90%;
  }
}

/* Estilos para celulares (pantallas pequeñas) */
@media (max-width: 768px) {
  .container {
    max-width: 100%;
    padding: 10px;
  }
}
/* Ancho flexible */
.container {
  width: 80%; /* Cambia a 100% en pantallas más pequeñas */
}

img {
  max-width: 100%; /* La imagen se ajustará al tamaño de su contenedor */
  height: auto; /* Mantiene la proporción */
}

.flex-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.flex-item {
  flex: 1 1 200px; /* Flex-grow, Flex-shrink, Flex-basis */
  margin: 10px;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
}

.logo {
  position: absolute;
  top: -100px;
  left: 20px;
  width: 300px; /* Ajusta el tamaño según sea necesario */
}

    .icon {
            position: absolute;
            bottom: -0.375rem;
            right: -0.375rem;
            width: 6rem;
            height: 6rem;
            background: var(--clr);
            border-top-left-radius: 50%;
  
            &:hover .iconBox {
              transform: scale(1.1);
            }
  
            &::before {
              position: absolute;
              content: "";
              bottom: 0.375rem;
              left: -1.25rem;
              background: transparent;
              width: 1.25rem;
              height: 1.25rem;
              border-bottom-right-radius: 1.25rem;
              box-shadow: 0.313rem 0.313rem 0 0.313rem #fff;
            }
  
            &::after {
              position: absolute;
              content: "";
              top: -1.25rem;
              right: 0.375rem;
              background: transparent;
              width: 1.25rem;
              height: 1.25rem;
              border-bottom-right-radius: 1.25rem;
              box-shadow: 0.313rem 0.313rem 0 0.313rem var(--clr);
            }
  
            .iconBox {
              position: absolute;
              inset: 0.625rem;
              background: #282828;
              border-radius: 50%;
              display: flex;
              justify-content: center;
              align-items: center;
              transition: 0.3s;
  
              span {
                color: #fff;
                font-size: 1.5rem;
              }
            }
          }
          @keyframes drop {
            from { top: 0px; }
            70% { top: 80px; animation-timing-function: ease-in; }
            to { top: 60px; animation-timing-function: ease-out; }
        }
          /*Banner*/
          .banner {
            background-image: url('https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/dd28eb02-d6b1-401e-bc10-aead024e9ebf'); /* Cambia esto a la ruta de tu imagen */
            background-size: cover; /* Asegura que la imagen cubra todo el área */
            background-position: center; /* Centra la imagen */
            background-repeat: no-repeat; /* Evita que la imagen se repita */
            color: white; /* Color del texto */
            text-align: center; /* Alineación del texto */
            padding: 100px 0; /* Espaciado superior e inferior */
        }
        
        .banner h1 {
            margin: 0; /* Sin margen */
            font-size: 2.5em; /* Tamaño de fuente */
        }
        .banner p {
            font-size: 1.2em; /* Tamaño de fuente para el párrafo */
        }
        .btn-reservas {
            background-color: #ffffff; /* Color de fondo del botón */
            color: #000000; /* Color del texto del botón */
            border: none; /* Sin borde */
            padding: 15px 30px; /* Espaciado interno */
            font-size: 1em; /* Tamaño de fuente del botón */
            cursor: pointer; /* Cambiar cursor al pasar por encima */
            margin-top: 20px; /* Margen superior */
            border-radius: 5px; /* Bordes redondeados */
            transition: background-color 0.3s; /* Transición suave */
        }
        .btn-reservas:hover {
            background-color: #000000; /* Color al pasar el ratón */
            color: white; /* Color de texto al pasar el ratón */
        }
        /*Barra horizontal*/
.menu-container {
  position: relative;
  padding: 10px;
  
}

/* Estilo para el logo */
.logo {
  margin-top: 100px;
  width: 250px;  /* Ajusta el tamaño según sea necesario */
  height: auto;
  transition: transform 0.3s ease;  /* Efecto de animación al pasar el mouse */
  margin-right: 10px;
}




.logo-link {
  text-decoration: none;  /* Quita el subrayado */
}/* styles.css */


.menu-icon {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 30px;
  height: 25px;
  cursor: pointer;
  z-index: 10;
}

.bar {
  width: 100%;
  height: 4px;
  background-color: #000000;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.nav-menu {
  position: fixed;
  top: 0;
  left: -250px; /* Menú oculto fuera de pantalla */
  width: 250px;
  height: 100%;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: left 0.3s ease;
  z-index: 5;
}

.nav-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav-menu ul li {
  margin: 20px 0;
}

.nav-menu ul li a {
  text-decoration: none;
  color: #000000;
  font-size: 18px;
  display: flex;
  align-items: center;
  transition: color 0.3s ease;
}

.nav-menu ul li a:hover {
  color: rgb(18, 40, 243);
}

.menu-icon-img {
  width: 20px;
  height: 20px;
  margin-right: 10px; 
}

/* Animaciones */
.menu-icon.active .bar:nth-child(1) {
  transform: translateY(9px) rotate(45deg);
}

.menu-icon.active .bar:nth-child(2) {
  opacity: 0;
}

.menu-icon.active .bar:nth-child(3) {
  transform: translateY(-9px) rotate(-45deg);
}

.nav-menu.active {
  left: 0; /* Mostrar el menú */
}
      
        /*diseño card*/
    .property-gallery {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
      padding: 250px;
      width: 90%;
      max-width: 1300px;
      margin-top: -200px;
  }
  .property-card {
      background-color: #fff;
      border-radius: 10px;
      box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
      overflow: hidden;
      position: relative;
      transition: transform 0.3s ease;
      left: -140px;
      right: 10px;
  }
  .property-card:hover {
      transform: translateY(-5px);
  }
  .property-image {
      width: 100%;
      height: 180px;
      background-size: cover;
      background-position: center;
      position: relative;
  }
  .favorite-badge {
      position: absolute;
      top: 10px;
      left: 10px;
      background-color: rgba(255, 255, 255, 0.9);
      padding: 5px 10px;
      font-size: 12px;
      border-radius: 20px;
      font-weight: bold;
      color: #333;
  }
  .heart-icon {
      position: absolute;
      top: 10px;
      right: 10px;
      font-size: 18px;
      color: #333;
      cursor: pointer;
  }
  .heart-icon:hover {
      color: #e74c3c;
  }
  .property-info {
      padding: 15px;
  }
  .location {
      font-size: 16px;
      font-weight: bold;
      color: #333;
      margin: 0;
  }
  .distance, .dates {
      font-size: 12px;
      color: #777;
      margin: 5px 0;
  }
  .rating-price {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 10px;
  }
  .rating {
      font-size: 14px;
      color: #333;
  }
  .price {
      font-size: 16px;
      font-weight: bold;
      color: #333;
  }

  .reservation-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 90%;
    max-width: 900px;
    margin: 20px auto;
    padding: 10px 20px;
    background-color: #fff;
    border-radius: 50px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.input-group {
    display: flex;
    flex-direction: column;
    margin-right: 15px;
    flex: 1;
}

.input-group label {
    font-size: 12px;
    font-weight: bold;
    color: #333;
    margin-bottom: 5px;
}

.input-group input {
    border: none;
    outline: none;
    font-size: 14px;
    color: #555;
    background: none;
    padding: 5px;
    border-bottom: 1px solid #ccc;
}

.input-group input::placeholder {
    color: #aaa;
}

.search-button {
    background-color: #385dff;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.search-button img {
    width: 20px;
    height: 20px;
}

.search-button:hover {
    background-color: #e03550;
}

 /*pie de pagina*/

 #footer-logo {
    width: 300px; 
    position: relative;
    
    right: -400px; 
    padding: 5px;
    margin-left: -250px;
    margin-top: -250px;
    
  }  

  
  
  .pie-pagina{
    width: 100%;
    background-color: #e6e9ffbb;
    
    
  }
  .pie-pagina .grupo-1{
    width: 100%;
    max-width: 1200px;
    margin: auto;
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap:50px;
    padding: 45px 0px;
  }
  .pie-pagina .grupo-1 .box figure{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .pie-pagina .grupo-1 .box figure img{
    width: 250px;
  }
  .pie-pagina .grupo-1 .box h2{
    color: #000000;
    margin-bottom: 25px;
    font-size: 20px;
  }
  .pie-pagina .grupo-1 .box p{
    color: #000000;
    margin-bottom: 10px;
  }
  
  
  .pie-pagina .grupo-2{
    background-color: #0a1a2a;
    padding: 15px 10px;
    text-align: center;
    color: #000000;
  }
  .pie-pagina .grupo-2 small{
    font-size: 15px;
  }
  @media screen and (max-width:800px){
    .pie-pagina .grupo-1{
        width: 90%;
        grid-template-columns: repeat(1, 1fr);
        grid-gap:30px;
        padding: 35px 0px;
    }
  }
  
  .social-icons {
    display: flex;
    gap: 15px; /* Espacio entre los íconos */
    justify-content: center; /* Centra los íconos horizontalmente */
    margin-top: 10px;
  }
  
  .social-icons a {
    color: #000000; /* Color del icono */
    font-size: 30px;
    text-decoration: none;
    transition: color 0.3s;
  }
  
  .social-icons a:hover {
    color: #3489a5; /* Color al pasar el cursor */
  }