/*

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: 18px !important;
  font-weight: 300 !important;
}
.h1 {
  font-family: 'Roboto', sans-serif;
  font-size: 48px !important;
  font-weight: 200 !important;
}
.h2 {
  font-family: 'Roboto', sans-serif;
  font-size: 30px !important;
  font-weight: 300;
}
.h3 {
  font-family: 'Roboto', sans-serif;
  font-size: 22px !important;
}
.b{
    font-family: 'Roboto', sans-serif;
  font-size: 48px !important;
  font-weight: 900 !important;
}
/* General */
.logo { font-weight: 500 !important;}
.text-warning {  color: #ede861 !important;}
.text-muted { color: #bcbcbc !important;}
.text-success { color: #fcc110 !important;}
.text-light { color: #cfd6e1 !important;}
.text-dark { color: #000000 !important;}
.bg-dark { background-color: #212934 !important;}
.bg-light { background-color: #e9eef5 !important;}
.bg-black { background-color: #1d242d !important;}
.bg-success { background-color: #59ab6e !important;}
.btn-success {
  background-color: #59ab6e !important;
  border-color: #56ae6c !important;
}
.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: .9em !important;}
#templatemo_main_nav a { color: #212934;}
#templatemo_main_nav a:hover { color: #69bb7e;}
#templatemo_main_nav .navbar .nav-icon { margin-right: 20px;}

/* Hero Carousel */
#template-mo-zay-hero-carousel { background: #efefef !important;}
/* 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;
}
/* 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 .carousel-indicators li {
  margin-top: -50px;
  background-color: #59ab6e;
}
#template-mo-zay-hero-carousel .carousel-control-next i,
#template-mo-zay-hero-carousel .carousel-control-prev i {
  color: #59ab6e !important;
  font-size: 2.8em !important;
}
/* Carousel Brand */
.tempaltemo-carousel .h1 {
  font-size: .5em !important;
  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: #69bb7e;}
/* 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: #68bb7d;}
#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: #2d343f !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: 30rem !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;
  }
}

/* Default (untuk semua ukuran layar) */
.gallery {
  display: block;
  margin: 16px auto;
  border: 2px solid #e0e0e0;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  transition: transform 0.3s, box-shadow 0.3s;
  max-width: 100%;
}

.gallery img {
  width: 100%;
  height: auto;         /* biar sesuai proporsi asli */
  object-fit: contain;  /* gambar tidak terpotong */
  display: block;
}

.gallery:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

.gallery img:hover {
  transform: scale(1.05);
}

.gallery .desc {
  padding: 12px;
  text-align: center;
  font-size: 1rem;
  font-weight: 500;
  color: #333;
  background: #fafafa;
  border-top: 1px solid #eee;
}

/* Extra small devices (portrait phones, <576px) */
@media (max-width: 575.98px) {
  .gallery {
    width: 100%;
    margin: 8px 0;
  }
  .gallery img {
    max-height: 220px;  /* kasih batas tinggi tapi tetap proporsional */
  }
}

/* Small devices (landscape phones, ≥576px) */
@media (min-width: 576px) and (max-width: 767.98px) {
  .gallery img {
    max-height: 280px;
  }
}

/* Medium devices (tablets, ≥768px) */
@media (min-width: 768px) and (max-width: 991.98px) {
  .gallery img {
    max-height: 360px;
  }
}

/* Large devices (desktops, ≥992px) */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .gallery img {
    max-height: 420px;
  }
}

/* Extra large devices (large desktops, ≥1200px) */
@media (min-width: 1200px) {
  .gallery img {
    max-height: 500px;
  }
}

/* Kecilkan tombol carousel */
#wisataCarousel .carousel-control-prev,
#wisataCarousel .carousel-control-next {
  width: 40px;
  height: 40px;
  top: 50%;
  transform: translateY(-50%);
  background-color: white;/* warna hitam transparan */
  border-radius: 50%; /* bulat */
  border: 2px solid #fff; /* garis putih */
}

/* Icon panah */
#wisataCarousel .carousel-control-prev-icon,
#wisataCarousel .carousel-control-next-icon {
  width: 15px;
  height: 15px;
  background-size: 100% 100%;
  filter: invert(1); /* bikin icon putih */
}

/* Kecilkan tombol carousel */
#layananCarousel .carousel-control-prev,
#layananCarousel .carousel-control-next {
  width: 40px;
  height: 40px;
  top: 50%;
  transform: translateY(-50%);
  background-color: dark; /* warna hitam transparan */
  border-radius: 50%; /* bulat */
  border: 2px solid #fff; /* garis putih */
}

/* Icon panah */
#layananCarousel .carousel-control-prev-icon,
#layananCarousel .carousel-control-next-icon {
  width: 15px;
  height: 15px;
  background-size: 100% 100%;
  filter: invert(1); /* bikin icon putih */
}

/* Kecilkan tombol carousel */
#paketCarousel .carousel-control-prev,
#paketCarousel .carousel-control-next {
  width: 40px;
  height: 40px;
  top: 50%;
  transform: translateY(-50%);
  background-color: dark; /* warna hitam transparan */
  border-radius: 50%; /* bulat */
  border: 2px solid #fff; /* garis putih */
}

/* Icon panah */
#paketCarousel .carousel-control-prev-icon,
#paketCarousel .carousel-control-next-icon {
  width: 15px;
  height: 15px;
  background-size: 100% 100%;
  filter: invert(1); /* bikin icon putih */
}

/* Kecilkan tombol carousel */
#galleryCarousel .carousel-control-prev,
#galleryCarousel .carousel-control-next {
  width: 40px;
  height: 40px;
  top: 50%;
  transform: translateY(-50%);
  background-color: dark; /* warna hitam transparan */
  border-radius: 50%; /* bulat */
  border: 2px solid #fff; /* garis putih */
}

/* Icon panah */
#galleryCarousel .carousel-control-prev-icon,
#galleryCarousel .carousel-control-next-icon {
  width: 15px;
  height: 15px;
  background-size: 100% 100%;
  filter: invert(1); /* bikin icon putih */
}