/* Reset básico */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

   html {
    scroll-behavior: smooth;
}

         /* Contenedor del loader */
        #loading {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background: rgba(0, 0, 0, 0.5); /* Fondo semitransparente */
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 9999;
            transition: opacity 1s ease-in-out; /* Transición para el fade-out */
        }

        /* Imagen con animación combinada */
        #loading img {
            width: 250px; /* Ajusta según el tamaño deseado */
            opacity: 0;
            transform: translateY(100vh); /* Empieza fuera de la pantalla */
            animation: loadingAnimation 4s ease-in-out forwards;
        }

        /* Desaparición del fondo */
        .hide {
            opacity: 0; /* Se desvanece el fondo */
            pointer-events: none; /* Evita que interfiera con el contenido */
        }

        /* Contenido principal */
        #contenido {
           
        }

        /* Animación combinada */
        @keyframes loadingAnimation {
            0% {
                opacity: 0;
                transform: translateY(100vh);
            }
            40% {
                opacity: 1;
                transform: translateY(0); /* Llega al centro */
            }
            70% {
                opacity: 1;
                transform: translateY(0); /* Pausa en el centro */
            }
            100% {
                opacity: 0;
                transform: translateY(-500px); /* Sube y desaparece */
            }
        }

@supports (-webkit-touch-callout: none) and (not (backdrop-filter: none)) {
    .comentarios {
        background-attachment: scroll !important; /* Evita el problema */
        background-color: white !important; /* Fondo blanco en Safari */
        background-image: none !important; /* Elimina la imagen */
    }
}


        @font-face {
  font-family: Work-Sans-Medium;
  src: url('../assets/Fonts/Work_Sans/static/WorkSans-Medium.ttf');
}
         
               @font-face {
  font-family: RobotoCondensedLight;
  src: url('../assets/Fonts/Roboto_Condensed/static/RobotoCondensed-Light.ttf');
}
         
                @font-face {
  font-family: RobotoCondensedBold;
  src: url('../assets/Fonts/Roboto_Condensed/static/RobotoCondensed-Bold.ttf');
}   

            @font-face {
  font-family: RobotoCondensedRegular;
  src: url('../assets/Fonts/Roboto_Condensed/static/RobotoCondensed-Regular.ttf');
}     

       @font-face {
  font-family: CursiveRegular;
  src: url('../assets/Fonts/Cedarville_Cursive/FleurDeLeah-Regular.ttf');
} 
 
html, body {
    height: 100%;
    font-family: "RobotoCondensedRegular";
    background: transparent;
     
}

section{
    background: transparent;
}

h1,h2,h3,h4,h5{
    font-family: "RobotoCondensedBold";
}

p{
    font-family: "RobotoCondensedRegular";
}

header{
    background-color: #6F7868;
    width: 100%;
    padding-top: 1rem;
    padding-bottom: 1rem;
    z-index: 9999;
     transition: all 0.1s ease-in-out;
   
}

header.fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 0.5rem 0;
   background-color: rgba(111,120,104,0.9); /* 80% opaco, 20% transparente */

    backdrop-filter: blur(8px);
      /* Sombra sutil */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.8);
}

.wrapper {
    max-width: 90vw;
    margin: 0 auto;
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    grid-gap: 30px;
    transition: all 0.3s ease-in-out;
    
}

nav ul {
    display: flex;
    flex: 2; /* Permite que los enlaces se ajusten al espacio */
    justify-content: center;
    align-items: center;
    column-gap: 1.5rem;
    list-style: none;
    margin: 0px;
    padding: 0px;
  
}

/* Estilo predeterminado */
.nav-links {
    display: flex;
    list-style: none;
}


nav ul li a {
    text-decoration: none;
    color: white;
    font-family: "RobotoCondensedLight" !important;
    font-weight: ;
    font-size: clamp(1rem, 2vw, 1.5rem); /* Reduce el tamaño del texto según la pantalla */
    transition: 0.3s ease;
}

nav ul li a.active {
    color: #b8978f;
}

header.fixed nav ul li a{
    font-size: 1.3rem;
}


ul:hover li a:not(:hover) {
    opacity: 0.5;
}

.btn-montalexa {
    background-color: #b8978f;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    color: white;
    font-family: "RobotoCondensedLight" !important;
    font-weight: bolder !important;
    font-size: clamp(1rem, 2vw, 1.3rem); /* Reduce el tamaño del texto según la pantalla */
    border-radius: 50px;
    padding: 10px 25px;
    border: none;
    transition: all 0.3s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
     cursor: url("cursor-negro.png"), auto;
}

.btn-montalexa:hover {
    background-color: #a07f76;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}



.hamburger {
    display: none;
   
    cursor: pointer;
}
         
/* Estilo del icono del menú hamburguesa */
.hamburger {
    font-size: 30px;
    cursor: pointer;
    color: #fff;
    transition: color 0.3s ease-in-out;
}

.hamburger:hover {
    color: #b8978f;
}


/* Fondo del sidebar con gradiente */
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 70vw;
    height: 100vh;
    background-color: #a6aa7a;
background-image: url('https://www.transparenttextures.com/patterns/white-wall.png');
background-blend-mode: multiply;
    display: flex;
    flex-direction: column; /* Coloca los elementos de forma vertical */
    justify-content: space-between; /* Espacio entre los elementos: lista y logo */
    align-items: center; /* Centra los elementos horizontalmente */
    padding: 20px;
    transform: translateX(-100%); /* Inicialmente fuera de pantalla */
    opacity: 0; /* Invisible inicialmente */
    visibility: hidden; /* Invisible inicialmente */
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
    z-index: 1001;
}

/* Lista de enlaces */
.sidebar ul {
    list-style: none;
    padding: 0;
    margin-top: 20px; /* Espacio superior */
    flex-grow: 1; /* Hace que la lista ocupe el espacio restante para centrar el logo en la parte inferior */
}

.sidebar ul li {
    margin: 15px 0;
}



/* Efecto hover en los enlaces */
.sidebar ul li a:hover {
    background-color: #b8978f; /* Color del fondo en hover */
    transform: scale(1.05); /* Efecto de botón expandido */
}

/* Logo */
.sidebar .logo {
    margin-bottom: 20px; /* Espacio inferior */
}

    
         /* Logo en la parte inferior */
.sidebar .logo {
    position: absolute;
    bottom: 50px;
    left: ;
    width: 80%;
    display: flex;
    justify-content: center;
}

.sidebar .logo img {
    width: 100%;
    max-width: 150px; /* Tamaño del logo */
    object-fit: contain;
     height: auto;
}

/* Enlaces como botones */
.sidebar ul li a {
    display: block;
    color: #fff;
    font-size: 18px;
    text-decoration: none;
    margin: 15px 0;
    padding: 14px 22px;
    border-radius: 50px; /* Botones redondeados */
    text-align: center;
    background-color: rgba(96, 100, 77, 0.7);
    transition: background-color 0.3s, transform 0.3s ease-in-out; /* Transiciones para el hover */
      box-shadow: 0 6px 4px rgba(184, 151, 143, 0.4); /* Sombra suave en color #b8978f */
}

.sidebar a:hover {
    background-color: #b8978f; /* Fondo al pasar el ratón */
    color: white; /* Texto blanco */
    transform: translateX(10px); /* Desplazamiento suave al hacer hover */
}



.sidebar ul {
    list-style: none;
    padding: 0;
}




/* ✅ Cambio de tamaño del logo al hacer scroll */
.logo img {
    width: 20rem;
    transition: all 0.3s ease-in-out;
}

header.fixed .logo img {
    width: 12rem;
}



      section{
             margin: 0px;
             padding: 0px;
         }
        /* Estilos personalizados */
       .hero {
    width: 100%;
}

/* Estilos para la columna de la imagen */
#imghero {
    margin: 0px;
    padding: 0px;
    background: ; /* Solo para verificar el tamaño de la columna */
   
}

#imghero img {
    width: 100%;
    height: auto;
    object-fit: cover;
}
         
         #texthero{
             padding-left: 5vw;
             padding-right: 2rem;
         }

  #bivendiosMovil{
                 display: none;
             }

#texthero p{
  
}


        .hero h1 {
            font-size: 2.5rem;
            font-weight: bold;
            color: #4d4d3d;
        }

        .hero h1 span {
            color: #9db46b;
        }

        .hero p {
            font-size: 1.2rem;
            color: #666;
            font-family: "RobotoCondensedRegular";
        }

   .hero-img{
            height: 86vh!important;
       
         }
         
 

.btn-custom {
     font-family: "RobotoCondensedLight" !important;
    background-color: #b8978f;
    color: white;
    padding: 12px 25px;
    text-decoration: none;
    border-radius: 8px;
    display: inline-block;
    font-weight: 600;
    font-size: 16px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease-in-out;
    border: 1px solid transparent;
       cursor: url("cursor-negro.png"), auto;
}

.btn-custom:hover {
    background-color: #a07f76;
    color: white;
    box-shadow: 
          rgba(240, 46, 170, 0.4) 5px 5px,  /* Alfa corregido */
    rgba(240, 46, 170, 0.4) 10px 10px, 
    rgba(240, 46, 170, 0.4) 15px 15px;
    transform: translateY(-2px);
   
}


.image-section {
    position: relative;
    padding-top: 50px;
    padding-bottom: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh; /* Asegura que los elementos puedan expandirse más */
    
   
   
}

.image-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 90vh; /* Cubre solo el 80% */
    background-color: #daddca; 
background-image: url('https://www.transparenttextures.com/patterns/white-wall.png');
    z-index: 1; /* Envía el fondo detrás del contenido */
    
    
}


.image-left {
    height: 65vh;
    width: auto;
    position: absolute;
    top: 7vh;
    left: 5vw;
    z-index: 2; /* Coloca la imagen izquierda encima */
    box-shadow: 15px 15px 10px rgba(0, 0, 0, .4);
    filter: brightness(80%);
}

.image-right {
     height: 70vh;
    width: auto;
    position: absolute;
    z-index: 1;
    top: 25vh; /* Mueve la imagen derecha hacia abajo */
    right: 5vw;
    box-shadow: 15px 15px 10px rgba(0, 0, 0, .4);
     filter: brightness(80%);
}


.text-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    font-weight: bold;
    color: white;
    width: 100%;
    z-index: 100;
    
}

.text-overlay span {
   font-size: 4.5rem;
   padding-right: 2rem;
}

.text-overlay .italic {
    font-family: CursiveRegular; 
    font-size: 7rem;
}

.bnderecho{
  
}

   .about-section {
    text-align: center;
     padding-top: 3rem;
    padding-bottom: 10rem;
    position: relative;
        
     
}

.section-title {
    font-size: 2.5rem;
    color: #60644d; /* Color similar al diseño */
    padding-bottom: 3rem;
}

.section-title {
    font-size: 2.5rem;
    color: #60644d;
    padding-bottom: 3rem;
    font-weight: bold;
    position: relative;
    text-transform: uppercase;
}

.section-title::before,
.section-title::after {
    content: "";
    display: block;
    width: 50px;
    height: 3px;
    background-color: #60644d;
    margin: 10px auto;
}


.about-container {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    max-width: 90vw;
    margin: 0 auto;
    position: relative;

}

.about-text {
    background-color: #6F7868; /* Color del cuadro de texto */
    color: white;
    padding: 30px;
    max-width: 40vw;
    text-align: left;
    position: relative;
    z-index: 2;
    box-shadow: 15px 15px 10px rgba(0, 0, 0, .4);
    
}

.about-text p{
    font-size: 1rem;
    line-height: 1.4rem;
    text-align: justify;
   
}

    .about-text-dos {
    background-color: #6F7868; /* Color del cuadro de texto */
    color: white;
    padding: 30px;
    max-width: 40vw;
    text-align: left;
    position: relative;
    z-index: 2;
    box-shadow: -15px 15px 10px rgba(0, 0, 0, .4);
    
}

.about-text-dos p{
   font-size: 1rem;
    line-height: 1.4rem;
    text-align: justify;
}

.about-image {
    position: relative;
    z-index: 1;
    margin-left: -80px; /* Superposición */
}

.about-image img {
    width: 40vw; /* Ajusta el tamaño */
    height: auto;
    display: block;
}

.about-image-dos {
    position: relative;
    z-index: 1;
    margin-right: -80px; /* Superposición */
}

.about-image-dos img {
    width: 40vw; /* Ajusta el tamaño */
    height: auto;
    display: block;
}

.about-section .vertical{
    width: 7rem;
    position: absolute;
    bottom: 1rem;
    right: 2rem;
   
}

.cta-button {
    background-color: white;
    color: #60644d;
    padding: 12px 28px;
    border: none;
    border-radius: 50px; /* Bordes más redondeados */
    font-weight: 600;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px; /* Espacio entre el texto y la flecha */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease-in-out;
     cursor: url("cursor-negro.png"), auto !important;
}

.cta-button:hover {
    background-color: #f4f4eb;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

.cta-button .arrow {
    transition: transform 0.3s ease-in-out;
}

.cta-button:hover .arrow {
    transform: translateX(5px); /* Movimiento sutil de la flecha */
}


   .servicios{
          
            background-color: #a6aa7a;
background-image: url('https://www.transparenttextures.com/patterns/white-wall.png');
background-blend-mode: multiply;
            margin: 0;
            padding: 0;
             padding-top: 6rem;
             padding-bottom: 14rem;
           position: relative;
         }
         
         .servicios h2{
             text-align: center;
             padding-bottom: 3rem;
         }
         .services {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            gap: 30px;
             max-width: 90vw;
             padding-top: 2rem;
             align-content: center;

             
        }
        .service {
            width: 300px;
            margin: 0 auto;
          
        }

        .service img {
            width: 280px;
            height: auto;
            border-radius: 50%;
            object-fit: cover;
            margin-bottom: 2rem;
            transition: transform 0.4s ease-in-out, box-shadow 0.3s ease-in-out;
          box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
            margin: 0 auto;
        }

.service:hover img {
    transform: scale(1.1);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}
         .service h3 {
            font-size: 1.5rem;
            font-weight: bold;
            margin-top: 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 10px;
             color: #424c3a;
        }
           .service p{
            text-align: justify;
             }
        .toggle-icon {
            cursor: pointer;
            margin-left: auto;
        }
        .toggle-icon::after {
            content: "\25BC";
            font-size: 12px;
        }

        .servicios .giro{
          position: absolute;
            bottom: -7rem;
            right: 5rem;
            width: 20rem;
           transform: rotate(-45deg);
           }
       

  .new-section {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-top: 4rem;
            margin-bottom: 6rem;
           padding-left: 5vw;
           padding-right: 5vw;
  
        }
        .top-images {
            display: flex;
            justify-content: space-around;
            gap: 20px;
            padding-bottom: 3rem;
        }
        .top-images img {
            width: 45%;
            height: auto;
            object-fit: cover;
        }
        .top-images img:nth-child(2) {
            margin-top: 100px;
            margin-bottom: -20px;
        }
        .text-content {
            width: 70vw;
            text-align: center;
            padding-top: 3rem;
            padding-bottom: 3rem;
           
        }
        .text-content h3 {
            font-size: 22px;
            color: #555;
        }
        .text-content p {
            font-size: 16px;
            color: #333;
        }
        .text-content button {
            background-color: #8c7853;
            color: white;
            padding: 10px 20px;
            border: none;
            cursor: pointer;
            margin-top: 10px;
        }
        .bottom-images {
            display: flex;
            justify-content: space-between;
        }
        .bottom-images .vertical {
            width: 45%;
            height: auto;
            margin-top: 3rem;
            
        }
        .bottom-images .horizontal-container {
            display: flex;
            flex-direction: column;
            gap: 15px;
            width: 45%;
        }
        .bottom-images .horizontal-container img {
            width: 100%;
            height: auto;
        }
         .bottom-images .horizontal-container img:nth-child(2) {
            margin-top: 3rem;
             padding-bottom: 3rem;
            
        }

     .expertos{
             font-family: Arial, sans-serif;
              background-color: #a6aa7a;
background-image: url('https://www.transparenttextures.com/patterns/white-wall.png');
background-blend-mode: multiply;
            margin: 0;
            padding: 0;
             padding-top: 3rem;
             padding-bottom: 7rem;
            position: relative;
         }

   .expertos .giro{
          position: absolute;
            bottom: -8rem;
            right: 5rem;
            width: 20rem;
           transform: rotate(-45deg);
          z-index: 3;
           }
.expertos #productosMobil{
    display: none;
}

.expertos #productos{
    display: block;
}

              .comentarios{
             font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
             padding-top: 5rem;
             padding-bottom: 5rem;
                  position: relative;
                   background-image: url(../assets/images/paisaje-dos.png);
       background-size: cover;
       background-repeat: no-repeat;
       background-position: bottom center;
         background-attachment: fixed;
               
         }

          

       .about-text-tres {
    background-color: #6F7868; /* Color del cuadro de texto */
    color: white;
    padding: 30px;
    max-width: 40vw;
    text-align: right;
    position: relative;
    z-index: 2;
    box-shadow: -10px 10px 10px rgba(0, 0, 0, 0.4);
}
         .section-title-tres{
              font-size: 2rem;
    font-weight: bold;
    color: #60644d; /* Color similar al diseño */
    padding-top: 3rem;
             font-family: CursiveRegular;
         }
         
         .footer {
  background: #6F7868;
  color: white;
  font-family: Arial, sans-serif;
  padding: 20px;
    padding-top: 3rem;
    padding-bottom: 3rem;
}

.footer-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px;
}

.footer-column {
  flex: 1;
  min-width: 220px;
    color: white !important;
}.footer-column p{color: white !important;}

.footer-logo {
  width: 150px;
}

.footer-column h4 {
  font-size: 16px;
  margin-bottom: 10px;
}

.footer-column p {
  font-size: 14px;
  line-height: 1.5;
  margin: 5px 0;
}

.social-icons {
  display: flex;
  gap: 10px;
}

.social-icons img {
  width: 24px;
  height: 24px;
}

.footer-bottom {
  text-align: center;
  margin-top: 20px;
}
.footer-bottom p{
  font-size: 14px;
  color: white !important;
}

  #formulario{
             max-width: 50%;
             margin: 0 auto;
             padding-top: 2rem;
         }
         
         /* Grupo de inputs */
.input-group {
    text-align: left;
    margin-bottom: 15px;
}

/* Etiquetas */
.input-group label {
    font-size: 0.9rem;
    color: #333;
    display: block;
    margin-bottom: 5px;
}

/* Inputs y Select */
.input-group input,
.input-group select,
.input-group textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 1rem;
    outline: none;
    transition: border-color 0.3s ease-in-out;
}

/* Efecto hover/focus en inputs */
.input-group input:focus,
.input-group select:focus,
.input-group textarea:focus {
   
}

/* Botón Enviar */
.btn-submit {
    background: #007BFF;
    color: white;
    border: none;
    padding: 12px;
    width: 40%;
    font-size: 1rem;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.3s ease-in-out;
}

/* Efecto hover en botón */
.btn-submit:hover {
    background: #0056b3;
}
         
         /* Etiquetas */
.input-group label {
    font-family: 'Roboto', sans-serif; /* Cambia la fuente aquí */
    font-size: 0.9rem;
    color: #333;
    display: block;
    margin-bottom: 5px;
}

.whatsapp-icon {
    position: fixed;
    bottom: 20px;
    left: 20px;
    background-color: #25D366;
    color: white;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    text-decoration: none;
    font-size: 30px;
    z-index: 1000;
}

.whatsapp-icon i {
    color: white;
}

        
.breadcrumb-bar {
  background-color: #e9ece6;
  margin-bottom: 1rem;
}

.breadcrumb-title {
  font-size: 1.25rem;
  font-weight: bold;
  color: #4b4e3d;
  line-height: 1.5;
}

.breadcrumb {
  background: none;
  padding: 0px;
  margin: 0px;
  font-size: 0.95rem;
  line-height: 1.5;
}
    

.breadcrumb-item + .breadcrumb-item::before {
  content: "›";
  color: #999;
  padding: 0 0.5rem;
    margin: 0px;
}


        
.categorias-sidebar {
  background-color: #ffffff;
  border: 1px solid #dcdcdc;
  border-radius: 4px;
  font-family: 'Poppins', sans-serif;
  overflow: hidden; /* para que los bordes se vean bien si hay padding interno */
}

/* Encabezado del bloque */
.categorias-sidebar h4 {
  background-color: #7b826f; /* verde-olivo del diseño */
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
  margin: 0;
  padding: 12px 16px;
}

/* Lista de categorías */
.lista-categorias {
  list-style: none;
  padding: 0;
  margin: 0;
}

.lista-categorias li {
  border-bottom: 1px solid #e0e0e0;
}

.lista-categorias li:last-child {
  border-bottom: none; /* quitamos borde al último */
}

.lista-categorias a {
  display: block;
  padding: 12px 16px;
  text-decoration: none;
  color: #555;
  font-size: 15px;
  transition: background-color 0.3s;
}

.lista-categorias a:hover {
  background-color: #f5f5f5;
  color: #7b826f;
}
        
        .lista-categorias-mobile {
  list-style: none;
  padding: 0;
  margin: 0;
  border: 1px solid #dcdcdc;
  border-radius: 4px;
  overflow: hidden;
}

.lista-categorias-mobile li {
  border-bottom: 1px solid #e0e0e0;
}

.lista-categorias-mobile li:last-child {
  border-bottom: none;
}

.lista-categorias-mobile a {
  display: block;
  padding: 12px 16px;
  text-decoration: none;
  color: #555;
  font-size: 15px;
  background-color: #fff;
  transition: background-color 0.3s;
}

.lista-categorias-mobile a:hover {
  background-color: #f5f5f5;
  color: #7b826f;
}



        
        #imghero{
            position: relative;
        }

        .flag{
            max-width: 100px;
            height: auto;
            position: absolute;
            top: 0;
            right: 0;
            z-index: 3;
        }
        
        .car-image{
            max-width: 200px;
        }
        
        .hidden{
            display: none;
        }
        
        .card{
            background: transparent;
            border: none;
        }
        
        .car-name{
                font-size: 2rem;
    font-weight: bold;
    color: #4d4d3d;
        }
        
        .car-brand{
                font-size: 1rem;
    font-weight: bold;
            color: #9db46b;
        }


/* Responsive */
@media (max-width: 768px) {
    .about-container {
        flex-direction: column;
        align-items: center;
    }

    .about-text {
        max-width: 90%;
        text-align: center;
    }

    .about-image {
        margin-left: 0;
        margin-top: -50px;
    }

    .about-image img {
        width: 90%;
    }
    
       .nav-links {
        display: none;
    }

    .hamburger {
        display: block;
    }

    .sidebar.active {
        transform: translateX(0); /* Cuando está activo, se desliza a la vista */
        opacity: 1; /* Se vuelve visible */
        visibility: visible; /* Se vuelve visible */
    }

    .sidebar.inactive {
        transform: translateX(-100%); /* Deslizar hacia la derecha cuando está inactivo */
        opacity: 0; /* Invisible cuando está inactivo */
        visibility: hidden; /* Invisible cuando está inactivo */
    }

    .btn-montalexa {
        display: none;
    }

/* Agregar fondo semi-transparente para detectar clics fuera del sidebar */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Fondo semitransparente */
    z-index: 1000; /* Está debajo del sidebar pero encima del contenido */
    visibility: hidden; /* Invisible cuando no está activo */
    opacity: 0;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}


.overlay.active {
    visibility: visible;
    opacity: 1;
}
    
     .sidebar .logo img {
        max-width: 120px;
       
    }
    
          section {
    scroll-margin-top: 90px; /* Ajusta según la altura de tu header */
}
             .hero{
                 text-align: center;
             }
             
           #texthero{
           padding-top: 4rem;
               padding-bottom: 4rem;
         }  
             
             #bivendiosMovil{
                 display: block;
                 font-size: 3rem;
             }
               #bivendiosMovil span{
               
                 font-size: 3rem;
             }
             
             .hero-container {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    
    .hero-container {
    position: relative;
    overflow: hidden;
}

.hero-img {
    height: 86vh !important;
    width: 100%;
    object-fit: cover;
    transform: translateY(0);
    transition: transform 0.5s ease-out;
}

.hero-container:hover .hero-img {
    transform: translateY(-10px);
}
    .hero-text {
        position: absolute;
        color: white;
        font-size: 2rem;
        font-weight: bold;
        text-transform: uppercase;
        text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
    }
         .italic {
    font-family: CursiveRegular; 
}    
             
             .image-section{
                 display: none;
             } 
             
          #nosotros .about-image img {
    width: 90vw; /* Ajusta el tamaño */
}
             
             .about-section .vertical{
      left: 50%; /* Centrado horizontal */
        transform: translateX(-50%); /* Ajusta la imagen para centrarla */
        right: auto; /* Remueve la propiedad right para evitar conflictos */
}
             
               .about-section {
    
    padding-bottom: 9rem;
        
     
}
             
        
    .services {
        flex-direction: column; /* Cambiar la dirección a columna */
        align-items: center; /* Centrar los elementos horizontalmente */
        justify-content: center; /* Centrar los elementos verticalmente */
        gap: 20px; /* Ajustar el espacio entre los elementos */
    }
    
    .servicios{
        padding-bottom: 10rem;
    }
    
            .servicios .giro{
           left: 50%; /* Centrado horizontal */
        transform: translateX(-50%); /* Ajusta la imagen para centrarla */
        right: auto; /* Remueve la propiedad right para evitar conflictos */
           }
             
             .expertos .giro{
           left: 50%; /* Centrado horizontal */
        transform: translateX(-50%); /* Ajusta la imagen para centrarla */
        right: auto; /* Remueve la propiedad right para evitar conflictos */
           }
             
              .new-section {
            margin-top: 7rem;
        }
             
             .new-section .top-images{
                 display: none;
             }
             
             .expertos{
                 padding-bottom: 10rem;
             }
             
           .expertos #productosMobil{
    display: block;
               padding-top: 5rem;
}

.expertos #productos{
    display: none;
}
             
             .comentarios{
                 padding-top: 10rem;
             }
             
              .about-text-tres {
    max-width: 60vw;
}
             
             .footer-container {
  justify-content: center;
    text-align: center;
}
             
             .social-icons {
                 justify-content: center;
    text-align: center;
}
             #formulario{
             max-width: 70%;
         }
    
        .whatsapp-icon {
        left: auto;
        right: 20px;
    }
    
  

         
}