@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');


    @font-face {
    font-family: 'NewakeDemo';
    src: url('https://kayomerida.mx/fonts/NewakeDemo.woff2') format('woff2'),
        url('https://kayomerida.mx/fonts/NewakeDemo.woff2') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap; /* Mejora el rendimiento y evita el "flash" */
  }
      .onlyIpad{
      display:none;
    }

    #quienes_texto1{
      display: block;
    }
   body {
      scroll-behavior: smooth;
     /* font-family: 'news_gothic_stdbold_oblique', sans-serif;*/
      font-family: 'NewakeDemo','news_gothic_stdbold_oblique', sans-serif;
    }

    .font_poppins {
      font-family: 'Poppins', sans-serif !important;
    }

    .disclaimer_mini{
            font-size: 9px;
            font-weight: 100;
            padding-right: 3px;
            padding-left: 3px;
            text-align: left;
            padding-top: 30px;
            padding-bottom: 10px;
        }
    /* Menú flotante */
    .navbar {
      position: fixed;
      top: 0;
      width: 100%;
      z-index: 1000;
      background-color: transparent;
      transition: background-color 0.5s ease;
    }
    .anchor-link {
      color: #F96B0B;
      text-decoration: none;
      font-weight: bold;
      transition: color 0.3s ease;
    }
    .navbar.scrolled {
      background-color: rgba(33, 37, 41, 0.95); /* Bootstrap dark color with opacity */
    }

    .menu-link {
      color: white;
      position: relative;
      text-transform: uppercase;
      font-weight: 500;
      padding: 0.75rem 1.5rem;
      transition: color 0.3s ease;
      display: inline-block;
    }

    .menu-link::before {
      content: '';
      position: absolute;
      top: 0;
      left: 4%;
      width: 103%;
      height: 2px;
      background-color: white;
      transition: background-color 0.3s ease, width 0.3s ease;
    }

    .menu-link.active,
    .menu-link:hover {
      color: #FF6902;
    }

    .menu-link.active::before,
    .menu-link:hover::before {
      background-color: #FF6902;
      width: 103%;
    }
    .navbar-nav .nav-link.active, .navbar-nav .nav-link.show {
    color: #FF6902;
}
    /* Carrusel */
    .carousel-item {
      height: 100vh;
      background-size: cover;
      background-position: center;
    }



    /* Menú móvil tipo modal */
    .offcanvas-fullscreen {
      width: 100% !important;
      height: 100% !important;
      background-color: rgba(0, 0, 0, 0.9);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .offcanvas-body ul {
      list-style: none;
      padding: 0;
      text-align: center;
    }

    .offcanvas-body ul li {
      margin: 1rem 0;
    }

    .offcanvas-body ul li a {
      font-size: 2rem;
      color: white;
      text-transform: uppercase;
      text-decoration: none;
      transition: color 0.3s ease;
    }

    .offcanvas-body ul li a:hover {
      color: #FF6902;
    }

    /* Redes sociales */
    .social-icons a {
      color: white;
      margin-left: 15px;
      font-size: 1.2rem;
      transition: color 0.3s ease;
    }

    .social-icons a:hover {
      color: #FF6902;
    }

    .logo img {
      height: 55px;
    }

    @media (max-width: 991px) {
      .navbar-collapse {
        display: none !important;
      }
    }

    /* Floating Box */
    #floatingBox {
      position: fixed;
      right: 0;
      bottom: 96px;
      width: 48px;
      height: 133px;
      background-color: #FF6902;
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
      z-index: 8;
      box-shadow: 0 0 10px rgba(0,0,0,0.3);
      border-radius: 10px 0 0 10px;
    }
  .arrowx{
    position: relative;
		bottom: 30px;
		left: 50%;
		transform: translateX(-50%);
		z-index: 10;
		/*animation: bounce 2s infinite;*/
  }

  .arrowy{
    position: relative;
		bottom: 250px;
		left: 75%;
		transform: translateX(-50%);
		z-index: 10;
		/*animation: bounce 2s infinite;*/
  }
	.scroll-down-icon {
		position: absolute;
		bottom: 30px;
		left: 50%;
		transform: translateX(-50%);
		font-size: 2.5rem;
		color: white;
		z-index: 10;
		text-decoration: none;
		animation: bounce 2s infinite;
		}

		.scroll-down-icon:hover {
		color: #FF6902;
		}

		@keyframes bounce {
		0%, 100% { transform: translateX(-50%) translateY(0); }
		50% { transform: translateX(-50%) translateY(10px); }
		}
		.navbar-toggler {
			border: none;
			background: none;
			padding: 0.5rem;
			}

			.navbar-toggler-icon {
			background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='white' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
			}
		.menuItem{
			width: 170px !important;
		}
		.social-icons a {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 35px;
		height: 35px;
		margin-left: 15px;
		border-radius: 50%;
		background-color: transparent;
		border: 2px solid white;
		color: white;
		font-size: 1.2rem;
		transition: all 0.3s ease;
		text-decoration: none;
		}

		.social-icons a:hover {
		border-color: #FF6902;
		color: #FF6902;
		}



#motoDisplay_container {
  max-height: 90vh;
  overflow-y: auto;
}

#motoDisplay img {
  max-width: 100%;
  height: auto;
  max-height: 400px;
  object-fit: contain;
  margin-left: 20%;
}

#motoDisplay p {
  font-size: 1rem;
  line-height: 1.5;
}



.product-list li:hover {
  color: #F96B0B;
}

.product-list li.selected {
  color: #F96B0B;
  
}



/* Contenido dinámico de la moto */
#motoDisplay {
  max-height: 90vh;
  overflow-y: auto;
}

#motoDisplay img {
  max-width: 100%;
  height: auto;
  max-height: 400px;
  object-fit: contain;
}

#motoDisplay p {
  font-size: 1rem;
  line-height: 1.5;
}
/* Título naranja */
.text-orange {
  color: #F96B0B;
}

/* Listado de motos con scroll vertical */
.product-list {
  max-height: 600px;
  overflow-y: auto;
  padding-right: 10px;
  
}

/* Ítems del listado */
.product-list li {
  font-weight: bold;
  font-size: 1.2rem; /* Texto ligeramente más grande */
  padding: 0.4rem 0;
  cursor: pointer;
  position: relative;
  transition: color 0.3s ease;
  padding-right: 14px;
  list-style: none; /* Elimina el punto de la lista */
}

/* Ícono SVG más pegado al texto */
.product-list li.selected::after {
  content: '';
  position: absolute;
  right: -10px; /* Pegado al borde derecho del texto */
  top: 50%;
  transform: translateY(-50%);
  width: 25px;
  height: 17px;
  background-image: url('data:image/svg+xml;utf8,<svg width="42" height="30" viewBox="0 0 42 30" xmlns="http://www.w3.org/2000/svg"><path d="M0.696777 15.0053L42.0093 0.0522461V29.9584L0.696777 15.0053Z" fill="%23F96B0B"/></svg>');
  background-repeat: no-repeat;
  background-size: contain;
}
.orange-text{
  color:#FF6902;
}
#motoDisplay {
  background-size: contain;
  background-position: top;
  background-repeat: no-repeat;
}

.formElement{
  background: none;
    border-top: 0px;
    border-right: 0px;
    border-left: 0px;
    border-radius: 0px;
}

.formElement:focus{
  background: none !important;
}

input::placeholder {
  color: #FFF !important; /* naranja brillante */
}
.footer-menu li a {
  color: white;
  text-transform: uppercase;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.3s ease;
  font-size: 15px;
}

.footer-menu li a:hover {
  color: #F96B0B; /* Naranja elegante al pasar el mouse */
}
.footericon{
    width: 40px !important;
    height: 40px !important;
}



/* Estilos generales (todos los dispositivos) */
    /* Secciones */
    section {
      min-height: 36vh;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 3rem;
      color: white;
      text-transform: uppercase;
    }

    #section_quienes_image_image{
      width: 60%;
    }

    #section_quienes_image{
      position :relative;
      width: 100%;
    }

    #quienessomos_white{
      width: 300px;
      display:block;
    }

    #quienessomos_black{
      display:none;
      width: 300px;
    }

    .section_contacto{
      background-image:url('https://kayomerida.mx/page_files/images/100.png');
    }



    .map-container{
      position: relative; 
      width: 488px;
      height: 557px;
    }

    #nosotros{
    background-color: #3498db;
    background-image: url('https://kayomerida.mx/page_files/images/fondo_quienes_somos.jpg');
    background-size: cover;
    background-position: top;
    }

    #quienese_section2{
      margin-bottom:20px;
      color:#fff;
    }

    #quienese_section1{
      font-size: 1rem; 
      line-height: 1.5; 
      color:black; 
      font-weight: 700;
    }

    #quienese_section2{
            font-size: 1rem; 
      line-height: 1.5; 
      font-weight: 700;

    }

    #nosotros{
        background-color: #3498db; background-image:url('https://kayomerida.mx/page_files/images/fondo_quienes_somos.jpg');background-size: cover; 
        
    }

    #titulo_quienes{
      margin-bottom:150px;
    }
    

    .icon_footer{
      font-size: 20px;
    }


  /* Panel lateral oculto */
  .spec-panel {
    position: absolute;
    top: 0;
    right: -50%;
    width: 50%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    color: white;
    padding: 20px;
    transition: right 0.4s ease;
    z-index: 10;
  }

  .spec-panel.active {
    right: 0;
  }

  /* Pestaña vertical */
  .spec-tab {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(50%) rotate(-90deg);
    transform-origin: right center;
    background-color: black;
    color: #F96B0B;
    padding: 10px 20px;
    cursor: pointer;
    font-weight: bold;
    letter-spacing: 1px;
    z-index: 11;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
  }

  /* Estilo del contenido */
  .spec-panel h4 {
    color: #F96B0B;
    margin-bottom: 10px;
  }

  .spec-panel p {
    font-size: 14px;
    line-height: 1.6;
  }

  /* Contenedor general de cada bloque de producto */
  .product-block {
    position: relative;
    margin-bottom: 40px;
    border: 1px solid #ddd;
    padding: 20px;
    background-color: #fff;
    overflow: hidden;
  }

  /* Panel lateral de especificaciones */
  .spec-panel {
    position: absolute;
    top: 0;
    right: -50%;
    width: 50%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    color: white;
    padding: 20px 20px 20px 40px;
    transition: right 0.4s ease;
    z-index: 10;
    display: flex;
    flex-direction: column;
    justify-content: start;
  }

  .spec-panel.active {
    right: 0;
  }

  /* Pestaña vertical integrada al panel */
.spec-tab {
    position: absolute;
    top: 66%;
    left: -31px;
    transform: translateY(-50%) rotate(-90deg);
    transform-origin: left center;
    background-color: black;
    color: #F96B0B;
    padding: 10px 20px;
    cursor: pointer;
    font-weight: bold;
    letter-spacing: 1px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    z-index: 11;
    width: 330px;
    font-size: 29px;
}

  /* Títulos y texto */
  .spec-panel h4 {
    color: #F96B0B;
    margin-bottom: 10px;
  }

  .spec-panel p {
    font-size: 14px;
    line-height: 1.6;
  }


    .map-wrapper iframe {
    width: 100%;
    height: 700px;
    border-radius: 22px;
    border: 0;
  }

    .map-marker{
    position: absolute;
                    top: 23%;
                    left: 55%;
                    transform: translate(-50%, -100%);
                    width: 100px;
                    height: 100px;
                    background-image: url('https://kayomerida.mx/page_files/images/mapmarker.png');
                    background-size: contain;
                    background-repeat: no-repeat;
                    z-index: 5;
                    pointer-events: none;
  }

  #productos{
    background-image:url('https://kayomerida.mx/page_files/images/fondo_producto_categoria.jpg');
    background-position: center;
    background-attachment: fixed;

    z-index: 99;
    position: relative;
  }

    #google_iframe{
     
      height:550px;
      width: 550px;
     
    }

    #footer_menu_movil{
      display: none !important;
    }

    #movil_img_360{
      width:230px;    
      margin-left: 20%;    
      margin-top: 15%;
    }

    #text_contact
    {
      color:#000;
      font-size: 3rem;
      font-weight: bold; 
    }

/* 📱 Teléfonos (hasta 767px) */
@media (max-width: 820px) and (orientation: portrait) {
   #text_contact
    {
      color:#000;
      font-size: 2rem;
      font-weight: bold; 
    }

      #movil_img_360{
      width:230px;    
      margin-left: 20%;    
      margin-top: 15%;
    }
  #productos{
    background-image:url('https://kayomerida.mx/page_files/images/fondoproductos_movil.png');
    background-position: center;
    background-attachment: fixed;
    z-index: 99;
    position: relative;
  }
  #footer_menu_movil{
      display: flex !important;
    }
  #footer_menu_web{
    display: none !important;
  }

  #div_map{
    height: 498px;
  }

  .carousel-item {
        height: 100vh;
    }

   .noneOrange{
    color: #000 !important;
    text-decoration: none;
  }

  #productosDetalleCuatrimotos{
    display: none !important;
  }

  #productosMovil{
    display: block !important;
  
}

  .noneOrange:hover{
    color: #F96B0B !important;
  }
  #productosPcTablet{
    display: none;
  }
  .detalle_productos_movil{
    background-color: #000;
  }
  #productosMovil{
    display: block;
  } 
  .map-marker{
    position: absolute;
                    top: 11%;
                    left: 50%;
                    transform: translate(-50%, -100%);
                    width: 100px;
                    height: 100px;
                    background-image: url('https://kayomerida.mx//page_files/images/mapmarker.png');
                    background-size: contain;
                    background-repeat: no-repeat;
                    z-index: 5;
                    pointer-events: none;
  }
.spec-panel {
    position: absolute;
    top: 0;
    right: -70% ;
    width: 50%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    color: white;
    padding: 20px 20px 20px 40px;
    transition: right 0.4s ease;
    z-index: 10;
    display: flex;
    flex-direction: column;
    justify-content: start;
}

#carouselMobile{
  height: 250px;
}
    .spec-panel {

    width: 70%;

    
  }
  #producto_4{
    display:none;
  }
  #producto_3{
    display:none;
  }

  #section_quienes_image_image{
      width: 60%;
    }

 #nosotros{
        background-color: #3498db; 
        background-image:url('https://kayomerida.mx/page_files/images/fondo_quienes_somos_movil_006.jpg');
        background-size: cover;
        background-position: center;
}


    #titulo_quienes{
      margin-bottom:40px;
    }

    #quienese_section1{

      text-align: left;
      margin-bottom:15px
      
    } 
  #quienese_section2{
      margin-top: 15px; 
      text-align: right;
      color:#000;
      
    }    

  .footer-menu li a {


    font-size: 13px;
}
   #nosotros{
    background-color: #3498db;
    background-size: cover;
    background-position: top;
    }

     #google_iframe{
     
      height:400px;
      width: 348px;
     
    }
      

    .map-wrapper {
      max-width: 600px;
      height: 700px;
      margin: 0 auto; /* centrar */
    }

    .map-container{
      width: 371px;
      height: 529px;
    }


      #quienessomos_black{
      display:none;
    }

    #quienessomos_white{
      width: 300px;
      display:block;
    }

    .floating-whatsapp {
      display:none;
    }
    #floatingBox{
      display:none;
    }

    .arrowy{
    display:none;
  }

   #section_quienes_image_image{
      width: 86%;
    }

    section {
      min-height: 18vh;
    }

    .section_contacto{
      background-image:url('https://kayomerida.mx/page_files/images/100.png');
      background-position: right;
    }

    #motoDisplay img {
      margin-left: 0%;
    }


  .scroll-down-icon {
		bottom:20px;

		}
    #tag_direccion{
             width: 90%;
        left: 159px;
        position: relative;
        top: -192px;
    }
    #section_quienes_image {
    position: relative;
    width: 100%;
    margin-bottom:22px

}


/*movil experimental*/

.product-title {
  font-size: 18px;
  margin-top: 5px;
  color: white;
}

.listado-productos a {
  font-size: 18px;
  display: block;
  padding: 5px;
  border-bottom: 1px solid #555;
}

.producto-descripcion {
  font-size: 16px;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
  background-color: rgba(0,0,0,0.5);
  border-radius: 50%;
}

.carousel-indicators [data-bs-target] {
  background-color: white;
}


}

/* 📟 Tabletas (768px - 1024px) */
@media (min-width: 822px) and (max-width: 1024px) and (orientation: landscape) {
  .floating-whatsapp {
    width:70px;
    display:block;
  }

   #productosPcTablet{
    display: flex;
  }

  #productosMovil{
    display: none;
  } 

  #quienessomos_white{
     
      display:block;
    }

     #quienessomos_black{
      display:none;
    }

    .section_contacto{
      background-image:url('https://kayomerida.mx/page_files/images/100.png');
      background-position: right;
    }
    #motoDisplay img {
      margin-left:9%;
    }
}

/* 🖥️ Escritorio (desde 1025px en adelante) */
@media (min-width: 1025px) and (orientation: landscape) {
        .floating-whatsapp {
        width:70px;
        display:block;
      }

      #quienessomos_black{
      display:none;
    }
}

#productosMovil{
    display: none ;
  
}

#div_msg{
    color: red;
    font-size: 20px;
    text-align: left;
    text-transform: none;
    border-style: dashed;
    display:none;
}

  .product-title {
    text-align: center;
    font-weight: bold;
    margin-top: 10px;
    transition: color 0.3s ease;
    cursor: pointer;
    color:#000;
  }

  .product-container:hover .product-title {
    color: #F96B0B;
  }

 

  .product-content {

    padding: 15px;
    background-color: #f9f9f9;
  }

  .product-content.active {
    display: block;
  }

      /**Animacion moto  */

  .title{
    color:#000;
    text-align:center;
    margin-top:50px;
  }

  .hover-image {
  transition: filter 0.3s ease;
}

.hover-image:hover {
  filter: brightness(1.1) saturate(1.2);
}
.product-container:hover .hover-image {
  transform: scale(1.05);
  opacity: 0.85;
}
.disclaimer{
  font-size: 11px;
    font-weight: 100;
    padding-right: 15px;
    padding-left: 15px;
    text-align: left;
}
#disclaimer_container{
  margin-top: 130px;
}
#producto_titulo_main{
      font-size: 40px;
    font-weight: bold;
    padding-right: 22px;
    margin-bottom: -26px;
}
  /* Contenedor principal de productos */
  .product-content {
    position: relative;
    overflow: hidden;
  } 

.circulo_naranja{
width: 28px;
    height: 28px;
    position: relative;
    bottom: 4px;
}
ol, ul {
    padding-left: 0rem;
}
.active-title{
  color:#F96B0B !important
}

#producto_detalle_nombre_main{
  position: relative;
    bottom: 25px;
}
#motoDisplay{
  overflow: visible;
}

#texto_disclaimer{
font-family: 'Poppins', sans-serif !important;
}


/*experimental*/
.movil_product-title {
  margin-top: 5px;
  color: black;
  text-align: center;
}

.movil_product-title.activo {
  color: #F96B0B;
}

.movil_listado-titulo {
  font-size: 20px;
  color: #F96B0B;
  margin-bottom: 10px;
  text-align: center;
}

.movil_productos-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
  padding: 10px;
}

.movil_producto_item {
  text-align: center;
}

.movil_producto-img {
  width: 100%;
  border-radius: 8px;
  margin-bottom: 5px;
}

.movil_producto-nombre {
  font-size: 16px;
  color: black;
  text-align: center;
  margin: 5px 0;
}

.movil_producto-nombre.activo {
  color: #F96B0B;
}

.movil_product-container {
  cursor: pointer;
  transition: transform 0.3s ease;
}

.movil_product-container:hover {
  transform: scale(1.02);
}

.movil_tipos-producto,
.movil_listado-productos {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}

.movil_producto_descripcion {
  font-size: 16px;
  color: white;
  margin-top: 10px;
  padding: 10px;
  background-color:#EDEDED;
  border-radius: 10px;
}

.movil_detalle-label {
  color: #F96B0B;
  font-weight: bold;
}

.movil_detalle-producto img {
  border-radius: 10px;
  margin-bottom: 10px;
  max-width: 100%;
}


#movil_text_detail{
    text-align: center;
    color: #000;
    font-size: 10px;
    padding-left: 25px;
    padding-right: 25px;
}
.detail{
  font-size: 13px;
    font-weight: 100;
    font-family: 'Poppins', sans-serif !important;
}
.btn-link{
    color: #F96B0B;
    text-decoration: none;
}


/* Todas las imágenes se ven normales por defecto */
.movil_producto-img {
  filter: none;
  opacity: 1;
  transition: filter 0.3s ease, opacity 0.3s ease;
}

/* Cuando hay una selección, las no activas se desaturan */
.movil_producto-img--desactivada {
  filter: grayscale(100%);
  opacity: 0.5;
}

/* Imagen activa se mantiene normal */
.movil_producto-img--activa {
  filter: none;
  opacity: 1;
}

.alert-success {
  animation: fadeIn 0.6s ease-in-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

.active-product-item
{
    color: #F96B0B;
}

#footer_menu_movil li{
line-height: 25px;;
}

@media (width: 820px)and (orientation: portrait) {
    #img_min_1{
      position: relative;
      bottom: 200px;
    }
      #movil_img_360{
      width:420px;    
      margin-left: 20%;    
      margin-top: 15%;
    }
      .scroll-down-icon {
        bottom: 60px;
    }
      #google_iframe {
        height: 400px;
        width: 691px;
    }

    #tag_direccion {
        width: 90%;
        left: 329px;
        position: relative;
        top: -192px;
    }

        .map-marker {
        position: absolute;
        top: 11%;
        left: 92%;
        transform: translate(-50%, -100%);
        width: 100px;
        height: 100px;
        background-image: url(https://kayomerida.mx//page_files/images/mapmarker.png);
        background-size: contain;
        background-repeat: no-repeat;
        z-index: 5;
        pointer-events: none;
    }

        #section_quienes_image {
        position: relative;
        width: 100%;
        margin-bottom: 22px;
        margin-top: 112px;
    }

    .onlyIpad{
      display:block !important;
    }

        #quienes_texto1{
      display: none !important;
    }

}

@media (width: 768px)and (orientation: portrait) {

      .scroll-down-icon {
        bottom: 60px;
    }

      #google_iframe {
        height: 400px;
        width: 691px;
    }

    #tag_direccion {
        width: 90%;
        left: 329px;
        position: relative;
        top: -192px;
    }

        .map-marker {
        position: absolute;
        top: 11%;
        left: 92%;
        transform: translate(-50%, -100%);
        width: 100px;
        height: 100px;
        background-image: url(https://kayomerida.mx//page_files/images/mapmarker.png);
        background-size: contain;
        background-repeat: no-repeat;
        z-index: 5;
        pointer-events: none;
    }

        #section_quienes_image {
        position: relative;
        width: 100%;
        margin-bottom: 22px;
        margin-top: 112px;
    }

    .onlyIpad{
      display:block !important;
    }

        #quienes_texto1{
      display: none !important;
    }

}

@media (width: 1180px) and (orientation: landscape) {
  .carousel-item {
    height: 75vh;
    background-size: cover;
    background-position: center;
  }

  .map-container {
    position: relative;
    width: 395px;
    height: 557px;
  }
  #google_iframe {
    height: 550px;
    width: 437px;
}

.scroll-down-icon {
    position: absolute;
    bottom: 172px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 2.5rem;
    color: white;
    z-index: 10;
    text-decoration: none;
    animation: bounce 2s infinite;
}

#motoDisplay_container {
    max-height: 97vh;
    overflow-y: auto;
}


}

@media (width: 1024px) and (orientation: landscape) {
  .carousel-item {
    height: 75vh;
    background-size: cover;
    background-position: center;
  }

  .map-container {
    position: relative;
    width: 395px;
    height: 557px;
  }
  #google_iframe {
    height: 550px;
    width: 437px;
}

.scroll-down-icon {
    position: absolute;
    bottom: 172px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 2.5rem;
    color: white;
    z-index: 10;
    text-decoration: none;
    animation: bounce 2s infinite;
}

#motoDisplay_container {
    max-height: 97vh;
    overflow-y: auto;
}
}

 .map-container {
    transition: all 0.3s ease;
  }

  #google_iframe {
    transition: all 0.3s ease;
  }

@media (max-width: 350px)and (orientation: portrait) {
  .map-container {
    width: 321px;
    
  }
  #google_iframe {
    
    width: 300px;
}
  .map-marker {
    top: 11%;
    left: 40%;
  }
}

@media (max-width: 300px)and (orientation: portrait) {
  .map-container {
    width: 275px;
    
  }
  #google_iframe {
    
    width: 250px;
}
  .map-marker {
    top: 11%;
    left: 40%;
  }
}