/*

TemplateMo 559 Zay Shop

https://templatemo.com/tm-559-zay-shop

---------------------------------------------
Table of contents
------------------------------------------------
1. Typography
2. General
3. Nav
4. Hero Carousel
5. Accordion
6. Shop
7. Product
8. Carousel Hero
9. Carousel Brand
10. Services
11. Contact map
12. Footer
13. Small devices (landscape phones, 576px and up)
14. Medium devices (tablets, 768px and up)
15. Large devices (desktops, 992px and up)
16. Extra large devices (large desktops, 1200px and up)
--------------------------------------------- */




/* Typography */
body, ul, li, p, a, label, input, div {
  font-family: 'Roboto', sans-serif;
  font-size: 15px;
  font-weight: 300;
}

@font-face {
  font-family: 'Fuentedeletra';  /* Nombre de la fuente que usarás en el CSS */
  src: url('bebasNeue-Regular.ttf') format('truetype');  /* Ruta correcta y tipo de fuente */
  font-weight: normal;  /* Define el peso de la fuente (opcional) */
  font-style: normal;   /* Define el estilo de la fuente (opcional) */
}

@font-face {
  font-family: 'Fuentedetitulo';  /* Nombre de la fuente que usarás en el CSS */
  src: url('FascinateInline-Regular.ttf') format('truetype');  /* Ruta correcta y tipo de fuente */
}

@font-face {
  font-family: 'letradenavegacion';  /* Nombre de la fuente que usarás en el CSS */
  src: url('ContrailOne-Regular.ttf') format('truetype');  /* Ruta correcta y tipo de fuente */
}

:root {
  --white: #fff;
  --bg: #dbebfa;
  --pink: #06fbff;
  --blue-dark: #4763ef;
  --font: 'Roboto Mono', sans-serif;
}


.underline {
  color: var(--blue-dark);
  font-size: 6rem;
  display: inline-block;
  position: relative;
}

.underline:after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 4px;
  bottom: 0;
  left: 0;
  background-color: var(--pink);
  transform-origin: bottom left;
  transition: transform 0.6s ease-out;
}

.underline:hover:after {
  transform: scaleX(1);
  transform-origin: bottom left;
}


.underline2 {
  color: #887d7d;
  text-align: center;
  position: relative;
  display: block;
  margin: 0 auto;
  padding: 10px 20px;
  z-index: 1;
}



.underline2:before, .underline2:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border: 0px solid #030303; /* El color del cuadro */
  transition: all 0.6s ease-out;
  z-index: -1; /* Asegura que el cuadro esté debajo del texto */
}

.underline2:before {
  top: 0;
  left: 0;
}

.underline2:after {
  bottom: 0;
  right: 0;
}

.underline2:hover:before, .underline2:hover:after {
  transform: scaleX(1) scaleY(1); /* Escala el cuadro a su tamaño completo */
}

.underline2:hover {
  transition: 0.2s;
  color: #000000; /* Cambia el color del texto si lo deseas */
}


.titulonav {
  font-family: 'fuentedetitulo', sans-serif;
  font-size: 30px;
  font-weight: 10px;
  font-weight: bolder;
  position: relative;
  left: 10px;
  top: 0px;
}

.navegacion {
  font-family: "letradenavegacion", sans-serif;
  font-size: 20px;
  font-weight: 1px;
  font-weight: bolder;
}

.letradenav {
  font-family: 'fuentedetitulo', sans-serif;
  font-size: 45px;
  font-weight: 50px;
  font-weight: bolder;
  text-shadow: -20px -2px 10px rgba(0, 0, 0, 1);
}

.h1 {
  font-family: 'fuentedeletra', sans-serif;
  font-size: 3vw;
  font-weight: 10;
  font-weight: bolder;
  text-align: center;
}

.sobrenosotros {
  font-family: 'fuentedeletra', sans-serif;
  font-size: 4vw;
  font-weight: bolder;
  text-align: center;
}




.h1titulo {
  font-family: 'fuentedeletra', sans-serif;
  font-size: 50px;
  font-weight: 10;
  font-weight: bolder;
}


.h2 {
  font-family: 'Roboto', sans-serif;
  font-size: 30px !important;
  font-weight: 300; 
}

a.h2 {
  font-family: 'Roboto', sans-serif;
  font-size: 16px !important;
  font-weight: 600 !important; 
}
nav {
  background-color: #0a185a; /* Color de fondo oscuro */
}

.card.product-coti {
  color: #ffffff;
}

.linea-separadora {
  border: 0;
  height: 1px;
  background-color: #ffff; /* Puedes cambiar el color */
  margin: 20px 0; /* Espaciado encima y debajo de la línea */
}

.h3 {
  font-family: 'Roboto', sans-serif;
  font-size: 22px !important;
}

/* General */
.logo { font-weight: 100 !important;}
.text-warning {  color: #ede861 !important;}
.text-muted { color: #bcbcbc !important;font-size: 14px !important}
.text-logo { color: #ffffff !important;}
.text-success { color: #1c31a5 !important;}
.text-success1 { color:rgb(255, 255, 255) !important;}
.text-light { color: #ffffff;}
.bg-dark { background-color: #000524 !important;}


.bg-light { background-color: #e9eef5}
.bg-light1 { background-color: #ffffff}
.bg-light2 { 
  background-color: #e1e1e1

}
.bg-black { background-color: #1d242d !important;}
.bg-success { background-color: #59ab6e !important;}
.btn-success {
  background-color: #59ab6e;
  border-color: #56ae6c;
}
.pagination .page-link:hover {color: #000;}
.pagination .page-link:hover, .pagination .page-link.active {
  background-color: #69bb7e;
  color: #fff;
}
/* Nav */
#templatemo_nav_top { min-height: 5px;}
#templatemo_nav_top * { 
  font-size: 0.9em !important;
  display: block; /* Hace que el enlace ocupe todo el ancho disponible */
    width: 100%; /* Hace que el texto ocupe el 100% del ancho */
    text-align: center; /* Centra el texto dentro de su contenedor */
    white-space: nowrap; /* Evita que el texto se divida en varias líneas */
    overflow:hidden; /* Recorta cualquier parte que se salga del contenedor */
    text-overflow: ellipsis; /* Muestra "..." si el texto es demasiado largo */
    color: yellow;
    font-weight: bold;
    font-style: italic;
}

/* Estilo para el contenedor que contiene el texto en movimiento */
.marquee-text {
  display:contents;
  white-space: nowrap; /* Evita que el texto se divida en varias líneas */
  animation: moveText 20s linear infinite; /* La animación dura 15 segundos y se repite infinitamente */
}

@keyframes moveText {
  0% {
      transform: translateX(100%); /* Empieza fuera del contenedor a la derecha */
  }
  100% {
      transform: translateX(-100%); /* Termina fuera del contenedor a la izquierda */
  }
}

#templatemo_main_nav a { 
  color: #ffff;
  font-size: 18px;
  font-weight: bolder;
  
}
#templatemo_main_nav a:hover { color: #06fbff;}
#templatemo_main_nav .navbar .nav-icon { margin-right: 20px;}

/* Hero Carousel */

/* Accordion */
.templatemo-accordion a { color: #000;}
.templatemo-accordion a:hover { color: #333d4a;}
/* Shop */
.shop-top-menu a:hover { color: #69bb7e !important;}
/* Product */
.product-wap { box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.10);}
.product-wap .product-color-dot.color-dot-red { background:#f71515;}
.product-wap .product-color-dot.color-dot-blue { background:#6db4fe;}
.product-wap .product-color-dot.color-dot-black { background:#000000;}
.product-wap .product-color-dot.color-dot-light { background:#e0e0e0;}
.product-wap .product-color-dot.color-dot-green { background:#0bff7e;}
.card.product-wap .card .product-overlay {
  visibility: hidden;
  opacity: 0;
  transition: .3s;
  cursor: pointer;
}
.card.product-wap:hover .card .product-overlay {
  visibility: visible;
  opacity: 1;
}
.card.product-wap a { color: #000;}
#carousel-related-product .slick-slide:focus { outline: none !important;}
#carousel-related-product .slick-dots li button:before {
  font-size: 15px;
  margin-top: 20px;
}
#carousel-related-product1 .slick-slide:focus { outline: none !important;}
#carousel-related-product1 .slick-dots li button:before {
  font-size: 15px;
  margin-top: 20px;
}

#carousel-related-product2 .slick-slide:focus { outline: none !important;}
#carousel-related-product2 .slick-dots li button:before {
  font-size: 15px;
  margin-top: 20px;
}

#carousel-related-product3 .slick-slide:focus { outline: none !important;}
#carousel-related-product3 .slick-dots li button:before {
  font-size: 15px;
  margin-top: 20px;
}

#carousel-related-product4 .slick-slide:focus { outline: none !important;}
#carousel-related-product4 .slick-dots li button:before {
  font-size: 15px;
  margin-top: 20px;
}

#carousel-related-product5 .slick-slide:focus { outline: none !important;}
#carousel-related-product5 .slick-dots li button:before {
  font-size: 15px;
  margin-top: 20px;
}

/* Brand */
.brand-img {
  filter: grayscale(100%);
  opacity: 0.5;
  transition: .5s;
}
.brand-img:hover {
  filter: grayscale(0%);
  opacity: 1;
}
/* Carousel Hero */

#template-mo-zay-hero-carousel { 
  background: #efefef !important;
}

#template-mo-zay-hero-carousel .carousel-indicators li {
  background-color: #ffffff;
}
#template-mo-zay-hero-carousel .carousel-control-next i,
#template-mo-zay-hero-carousel .carousel-control-prev i {
  color: #ffffff !important;
  font-size: 2.3em !important;
}
/* Carousel Brand */
.tempaltemo-carousel .h1 {
  color: #000 !important;
}
/* Services */
.services-icon-wap {transition: .3s;}
.services-icon-wap:hover, .services-icon-wap:hover i {color: #fff;}
.services-icon-wap:hover {background: #003b6d;}
/* Contact map */
.leaflet-control a, .leaflet-control { font-size: 10px !important;}
.form-control { border: 1px solid #e8e8e8;}
/* Footer */
#tempaltemo_footer a { color: #dcdde1;}
#tempaltemo_footer a:hover { color: #ffffff;}
#tempaltemo_footer ul.footer-link-list li { padding-top: 10px;}
#tempaltemo_footer ul.footer-icons li {
  width: 2.6em;
  height: 2.6em;
  line-height: 2.6em;
}
#tempaltemo_footer ul.footer-icons li:hover {
  background-color: #cfd6e1;
  transition: .5s;
}
#tempaltemo_footer ul.footer-icons li:hover i {
  color: #212934;
  transition: .5s;
}
#tempaltemo_footer .border-light { border-color: #ffffff !important;}
/*
// Extra small devices (portrait phones, less than 576px)
// No media query since this is the default in Bootstrap
*/
/* Small devices (landscape phones, 576px and up)*/
.product-wap .h3, .product-wap li, .product-wap i, .product-wap p {
  font-size: 12px !important;
}
.product-wap .product-color-dot {
  width: 6px;
  height: 6px;
}

/*// Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {
  #templatemo_main_nav .navbar-nav {max-width: 450px;}
}

/* Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
  #templatemo_main_nav .navbar-nav {max-width: 550px;}
  #template-mo-zay-hero-carousel .carousel-item {min-height: 20rem !important;}
  .product-wap .h3, .product-wap li, .product-wap i, .product-wap p {font-size: 18px !important;}
  .product-wap .product-color-dot {
    width: 12px;
    height: 12px;
  }
}

.fcc-btn {
  background-color: #ffffff;
  color: black;
  padding: 2px 15px;
  text-decoration: none;
  border: 1px solid black;
  margin-top: 7px;
  border-radius: 3px;
}



.fcc-btn3 {
  background-color: #e1e2e6;
  color: rgb(0, 0, 0);
  padding: 8px 15px;
  text-decoration: none;
  border: 1px solid black;
  border-radius: 3px;;
}


.fcc-btn i {
  margin-right: 4px;

}

.button-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.fcc-btn:hover {
  background-color: #56f348;
  color: rgb(0, 0, 0) !important;
}

.fcc-btn3:hover {
  transition: 1s;
  background-color: #102498;
  color: rgb(255, 255, 255);
}


.fcc-btn2 {
  background-color: #e1e1e1;
  color: rgb(0, 0, 0);
  padding: 8px 15px;
  text-decoration: none;
  border: 1px solid black;
  margin-top: -50px;
  margin-bottom: 25px;
  border-radius: 3px;
}

.fcc-btn2:hover {
  background-color: #055bab;
  color: rgb(255, 255, 255);
}

.form-control {
  color: #ffffff !important; 
}

.containerabout1 {
  background-color: #fff; /* Cambia el color de fondo */
  padding-left: 80px; 
  text-align: justify;
}

.containerabout2 {
  background-color: #f5f5f5;
  padding-left: 100px; 
  text-align: justify; /* Cambia el color de fondo */
}


.containerabout3 {
  background-color: #e6e6e6; /* Cambia el color de fondo */
  padding-left: 80px; 
  text-align: justify;
}

.col-md-8 {
  padding-left: 30px; /* Mueve el texto hacia la derecha */
}

.button-container3{
  margin-top: 60px;
  margin-bottom: -35px;
  display: flex;
  justify-content: center;
  align-items: center;
}


.contact-section {
  padding: 40px 20px;
}

.containercontact {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  max-width: 1200px;
  margin: 0 auto;
  gap: 20px;
}

.contact-card {
  background-color: #d0e7ef; /* Fondo más claro */
  padding: 20px;
  border-radius: 10px;
  flex: 1 1 calc(33.333% - 20px);
  text-align: center;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.contact-card h3 {
  font-size: 18px;
  margin-bottom: 15px;
  text-transform: uppercase;
  color: #000000;
}

.contact-card p {
  font-size: 14px;
  line-height: 1.6;
  margin: 10px 0;
  color:#000000;
}

.contact-card .icon img {
  width: 40px;
  margin-bottom: 10px;
}

@media (max-width: 768px) {
  .contact-card {
      flex: 1 1 100%;
  }
}

.icon i {
  font-size: 28px; /* Tamaño del icono */
  color: #000000;  /* Color del icono */
  margin-bottom: 30px; /* Espaciado inferior */
  margin-top: 5px;
  display: block; /* Hace que se alinee correctamente */
}

.h9 {
  font-family: 'Roboto', sans-serif;
  font-size: 30px !important;
  font-weight: 450; 
  
}

.blog {
  position: relative;
  width: 100%;
  padding: 45px 0 15px 0;
}

.blog .blog-item {
  position: relative;
  width: 100%;
  text-align: center;
  margin-bottom: 30px;
}

.blog .blog-img {
  position: relative;
  overflow: hidden;
}

.blog .blog-img img {
  width: 100%;
}

.blog .blog-meta {
  position: relative;
  padding: 25px 0 10px 0;
  background: #f3f6ff;
}

.blog .blog-meta::after {
  position: absolute;
  content: "";
  width: 100px;
  height: 1px;
  left: calc(50% - 50px);
  bottom: 0;
  background: #011f88;
}

.blog .blog-meta p {
  display: inline-block;
  margin: 0;
  padding: 0 3px;
  font-size: 18px;
  font-weight: bolder;
  font-style: italic;
  color: #000000;
}

.blog .blog-meta p a {
  margin-left: 5px;
  font-style: normal;
}

.blog .blog-text {
  padding: 10px 25px 25px 25px;
  background: #f3f6ff;
  margin-bottom: 10px;
}

.blog .blog-text p {
  margin: 0;
  font-size: 16px;
}

.carousel-item img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}





