/*

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)
--------------------------------------------- */


.logo-img {
  max-height: 70px;  /* Ajusta el tamaño según necesites */
  margin-left: 40px;
  width: 200px;
  margin-right: -100px;
}

/* Typography */
body, ul, li, a, label, input, div {
  font-family: 'Roboto', sans-serif;
  font-size: 15px;
  font-weight: 300;
}

p {
  font-family: 'Roboto', sans-serif;
  font-size: 15px;
  font-weight: 300;
  margin-top: 5px !important;
}

.nav-link{
  font-family: 'Ginebra', sans-serif;
  font-size: 20px !important;
  color: #ffffff !important;
  position: relative; 
  font-weight: 500 !important;
  text-decoration: none;
  margin-top: 8px;
  margin-bottom: 8px;
  justify-content: center !important;
  transition: text-shadow 0.3s ease-in-out, color 0.3s ease-in-out;
}

.offcanvas-title{
  color: #ffffff !important;
}

.nav-link:hover {
  text-shadow: 0 0 5px #00dbcc, 0 0 3px #007fee; /* Resalta los bordes de las letras */
}

.nav-link::after {
  content: ""; 
  position: absolute;
  bottom: 3px; 
  left: 0;
  width: 0; 
  height: 0.8px; 
  background-color: #ffffff; 
  transition: width 0.7s ease-out; 
}

.nav-link:hover::after {
  width: 100%; /* Línea se extiende al 100% del ancho del enlace */
}

.offcanvas {
  background-color: #17143e !important; /* Fondo oscuro */
  width: 250px !important; /* Define el ancho deseado */
  max-width: 80%; /* Opcional: ajusta el ancho en pantallas pequeñas */
}

.offcanvas-body {
  display: flex;
  flex-direction: column; /* Los enlaces se apilan en columna */
  align-items: center; /* Centra los enlaces horizontalmente */
}

.offcanvas-header {
  border-bottom: 1px solid #ffffff; /* Línea divisoria */
}

@media (max-width: 990px) {
  .offcanvas .nav-link{
    margin-bottom: -25px;
    margin-right: 50px;
  }
}


.h1 {
  font-family: 'Roboto', sans-serif;
  font-size: 48px;
  font-weight: 200;
  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; 
}

.h3 {
  font-family: 'Roboto', sans-serif;
  font-size: 22px !important;
}
/* General */
.logo { font-weight: 500 !important;}
.text-warning {  color: #ede861 !important;}
.text-muted { color: #bcbcbc !important;font-size: 14px !important}
.text-success { color: #ffffff !important;}


.text-success1 { 
  color:rgb(255, 255, 255) !important;

}
.text-light { 
  color: #ffffff;
}


.bg-dark { background-color: #17143e !important;}
.bg-dark1 { background-color: #1d242d !important;}

.bg-light3 {
  margin-top: -30px;
  margin-bottom: -30px; 
  background-color: #eaeaea;
}

.bg-light { background-color: #e9eef5}
.bg-light1 { 
  background-color: #eaeaea;
  margin-top: 30px;
  margin-bottom: -30px;
}
.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: 40px;}
#templatemo_nav_top * { font-size: 14px !important;}
#templatemo_main_nav a { 
  color: #212934;
  font-size: 18px;
  font-weight: bolder;
  
}
#templatemo_main_nav a:hover { color: #ffffff;}
#templatemo_main_nav .navbar .nav-icon { margin-right: 20px;}

.navbar{
  background-color: #17143e;
}

.navbar-nav {
  gap: 35px; 
}

.navbar-toggler {
  border-color: #ffffff !important;
  filter: invert(1) brightness(2);
  font-size: 15px !important;
}

/* 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 {
  background: rgba(0,0,0,.2);
  visibility: hidden;
  opacity: 0;
  transition: .3s;
  
}
.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;
}


/* Brand */
.brand-img {
  filter: grayscale(0%);
  transition: .5s;
}

/* 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 {
  font-size: .5em !important;
  color: #000 !important;
}
/* Services */
.services-icon-wap {
  transition: .3s;
  background-color: #ffff;

}
.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;
}

@media (min-width: 576px) {
  .tempaltemo-carousel .h1 { font-size: 1em !important;}
}

/*// 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;
  }
}

/* Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {}

.fcc-btn {
  background-color: #003b6d;
  color: rgb(255, 255, 255) !important;
  padding: 4px 15px;
  text-decoration: none;
  border: 1px solid black;
  margin-top: 7px;
  border-radius: 3px;
  font-weight: 400;
}



.fcc-btn3 {
  background-color: #003b6d;
  color: rgb(255, 255, 255);
  padding: 8px 15px;
  text-decoration: none;
  border: 1px solid black;
  border-radius: 3px;
}


.fcc-btn i {
  margin-right: 4px;
  font-size: 16px !important;
}

.button-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.fcc-btn:hover {
  background-color: #167d2b;
  color: white !important;
}

.fcc-btn3:hover {
  background-color: #167d2b;
  color: rgb(255, 255, 255);
}


.fcc-btn2 {
  background-color: #dadada;
  color: rgb(0, 0, 0);
  padding: 8px 15px;
  text-decoration: none;
  border: 1px solid black;
  margin-top: -50px;
  margin-bottom: 25px;
  border-radius: 3px;
  font-weight: 400;
}

.fcc-btn2:hover {
  background-color: #193767;
  color: rgb(255, 255, 255);
  font-weight: border;
}

.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: #f3f6ff; /* 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;
  background: #ffffff;
}



.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: 5px 0 5px 0;
  background: #003b6d;
}

.blog .blog-meta p {
  display: inline-block;
  margin: 0;
  padding: 0 3px;
  font-size: 18px;
  font-weight: 500;
  color: #ffffff;
  margin-top: 5px !important;
}

.blog .blog-meta p a {
  margin-left: 5px;
  font-style: normal;
}

.blog .blog-text {
  padding: 1px 25px 10px 25px;
  background: #f3f6ff;
  margin-bottom: 10px;
  color: #000000;
}

.blog .blog-text p {
  margin: 0;
  font-size: 16px;
}

.carousel-item img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.text-custom-blue {
  color: #003b6d !important; /* Azul Dodger */
}

@media (min-width: 1200px) {
  .row > .col-product {
      width: 33.33%; /* 3 productos por fila */
  }
}

/* Estilos para pantallas medianas (tablets) */
@media (max-width: 900px) and (min-width: 768px) {
  .row > .col-product {
      width: 50%; /* 2 productos por fila */
  }
}

/* Estilos para pantallas pequeñas (celulares) */
@media (max-width: 767px) {
  .row > .col-product {
      width: 100%; /* 1 producto por fila */
  }
}

.bg-custom {
  background-color: #f8f8f8; /* Cambia este color por el que prefieras */
}

.float{
	position:fixed;
	width:60px;
	height:60px;
	bottom:40px;
	right:40px;
	background-color:#25d366;
	color:#FFF;
	border-radius:50px;
	text-align:center;
  font-size:30px;
	box-shadow: 2px 2px 3px #999;
  z-index:100;
}

.float:hover {
	text-decoration: none;
	color: #FFF;
  background-color:#1ab152;
  animation: shake 1s;
  animation-iteration-count: infinite;
}

.my-float{
	margin-top:16px;
}

.pulse {
	animation: pulse-animation 2s infinite;
}

@keyframes pulse-animation {
	0% {
    box-shadow: 0 0 0 0px #25d36657, rgba(0, 0, 0, 0.2);
	}
	100% {
    box-shadow: 0 0 0 20px rgba(0, 0, 0, 0);
	}
  }
  
  @keyframes shake {
    0% { transform: translateX(0) }
    25% { transform: translateX(5px) }
    50% { transform: translateX(-5px) }
    75% { transform: translateX(5px) }
    100% { transform: translateX(0) }
  }

  @media (max-width: 768px) {
    
  }