/*

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: 'Poppins', sans-serif;
  font-size: 15px !important;

}
body .testimonial {
  padding: 100px 0;
  background: #e8e8e8;
}
body .testimonial .row .tabs {
  all: unset;
  margin-right: 50px;
  display: flex;
  flex-direction: column;
}
body .testimonial .row .tabs li {
  all: unset;
  display: block;
  position: relative;
}
body .testimonial .row .tabs li.active::before {
  position: absolute;
  content: "";
  width: 50px;
  height: 50px;
  background-color: #71b85f;
  border-radius: 50%;
}
body .testimonial .row .tabs li.active::after {
  position: absolute;
  content: "";
  width: 30px;
  height: 30px;
  background-color: #71b85f;
  border-radius: 50%;
}
body .testimonial .row .tabs li:nth-child(1) {
  align-self: flex-end;
}
body .testimonial .row .tabs li:nth-child(1)::before {
  left: 64%;
  bottom: -50px;
}
body .testimonial .row .tabs li:nth-child(1)::after {
  left: 97%;
  bottom: -81px;
}
body .testimonial .row .tabs li:nth-child(1) figure img {
  margin-left: auto;
}
body .testimonial .row .tabs li:nth-child(2) {
  align-self: flex-start;
}
body .testimonial .row .tabs li:nth-child(2)::before {
  right: -65px;
  top: 50%;
}
body .testimonial .row .tabs li:nth-child(2)::after {
  bottom: 101px;
  border-radius: 50%;
  right: -120px;
}
body .testimonial .row .tabs li:nth-child(2) figure img {
  margin-right: auto;
  max-width: 300px;
  width: 100%;
  margin-top: -50px;
}
body .testimonial .row .tabs li:nth-child(3) {
  align-self: flex-end;
}
body .testimonial .row .tabs li:nth-child(3)::before {
  right: -10px;
  top: -66%;
}
body .testimonial .row .tabs li:nth-child(3)::after {
  top: -130px;
  border-radius: 50%;
  right: -46px;
}
body .testimonial .row .tabs li:nth-child(3) figure img {
  margin-left: auto;
  margin-top: -50px;
}
body .testimonial .row .tabs li:nth-child(3):focus {
  border: 10px solid red;
}
body .testimonial .row .tabs li figure {
  position: relative;
}
body .testimonial .row .tabs li figure img {
  display: block;
}
body .testimonial .row .tabs li figure::after {
  content: "";
  position: absolute;
  top: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  border: 4px solid #dff9d9;
  border-radius: 50%;
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}
body .testimonial .row .tabs li figure:hover::after {
  -webkit-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
}
body .testimonial .row .tabs.carousel-indicators li.active figure::after {
  -webkit-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
}
body .testimonial .row .carousel > h3 {
  font-size: 20px;
  line-height: 1.45;
  color: rgba(0, 0, 0, 0.5);
  font-weight: 600;
  margin-bottom: 0;
}
body .testimonial .row .carousel h1 {
  font-size: 40px;
  line-height: 1.225;
  margin-top: 23px;
  font-weight: 700;
  margin-bottom: 0;
}
body .testimonial .row .carousel .carousel-indicators {
  all: unset;
  padding-top: 43px;
  display: flex;
  list-style: none;
}
body .testimonial .row .carousel .carousel-indicators li {
  background: #000;
  background-clip: padding-box;
  height: 2px;
}
body .testimonial .row .carousel .carousel-inner .carousel-item .quote-wrapper {
  margin-top: 42px;
}
body .testimonial .row .carousel .carousel-inner .carousel-item .quote-wrapper p {
  font-size: 18px;
  line-height: 1.72222;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.7);
}
body .testimonial .row .carousel .carousel-inner .carousel-item .quote-wrapper h3 {
  color: #000;
  font-weight: 700;
  margin-top: 37px;
  font-size: 20px;
  line-height: 1.45;
  text-transform: uppercase;
}
.h1 {
  font-family: 'Poppins', sans-serif;
  font-size: 32px !important;
  font-weight: 800 !important;
  margin-bottom: 30px;
  color: #0072a1 !important
}
.h2 {
 font-family: 'Poppins', sans-serif;
  font-size: 30px !important;
  font-weight: 800 !important;
   color: #0072a1 !important;
}
.h3 {
  font-family: 'Poppins', sans-serif;
  font-size: 22px !important;
   color: #0072a1 !important;
}
.h4 {
  font-family: 'Poppins', sans-serif;
  font-size: 18px !important;
   color: #0072a1 !important;
}
.h5 {
  font-family: 'Poppins', sans-serif;
  font-size: 16px !important;
   color: #0072a1 !important;
}
.h6 {
  font-family: 'Poppins', sans-serif;
  font-size: 14px !important;
   color: #0072a1 !important;
}
ul.dropdown-menu li {
    margin-bottom: 15px !important;
}
.dropdown-menu:li {
    text-align: left;
}
.dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0; 
 }
 ul.dropdown-menu {
    width: 250px;
}
ul.dropdown-menu li a {
    text-decoration: none;
    padding: 20px 14px 20px 15px;
    font-size: 14px !important;
    
}
nav.navbar.navbar-expand-lg.navbar-light.shadow.mycustom-navbar {
    height: 70px;
}
img.mylogo {
    width: 300px;
    margin-top: 2%;
}
.btn.btn-sm {
    padding: 6px 14px;
}
.btn-primary {
    background: #0072a1;
    border-color: #0072a1;
    color: #fff !important;
}
.btn-primar:hover {
    background: #ca171d;
    border-color: #ca171d;
    color: #fff !important;
}
.btn {
  font-size: 16px;
  font-weight: 700;
     padding: 10px 26px;
  border-radius: 7px;
  height: 40px;
}
.btn:hover{
    font-size: 16px;
  font-weight: 700;
     padding: 10px 26px;
  border-radius: 7px;
  height: 40px;
  color:#fff !important;
}
/* General */
.logo { font-weight: 500 !important;}
.text-warning {  color: #ede861 !important;}
.text-muted { color: #bcbcbc !important;}
.text-success { color: #59ab6e !important;}
.text-light { color: #fff !important;}
.text-blue { color: #0072a1 !important;}
.bg-dark { background-color: #0072a1 !important;}
.bg-red { background: #0073A1;
  background: -webkit-linear-gradient(right, #0073A1, #DC3645);
  background: -moz-linear-gradient(right, #0073A1, #DC3645);
  background: linear-gradient(to left, #0073A1, #DC3645);}
.bg-light { background-color: #dc35450f !important;}
.bg-black { background-color: #1d242d !important;}
.bg-success { background-color: #59ab6e !important;}
.btn-success {
  background-color: #0072a1!important;
  border-color: #59ab6e !important;
}
.pagination .page-link:hover {color: #000;}
.pagination .page-link:hover, .pagination .page-link.active {
  background-color: #69bb7e;
  color: #fff;
}
.carousel-caption.myslider-text h3 {
    margin-top: -20%;
    font-size: 66px;
    font-weight: 800;

}
.hero-btn {
    margin: 22px 10px 0 10px;
    display: inline-block;
}
a.whtOutlineBtn {
    padding: 8px 28px;
    color: #fff;
    border: 2px solid #fff;
    border-radius: 5px;
    text-decoration: none;
    font-weight: 400;
}
a.whtOutlineBtn-1 {
	 padding: 8px 28px;
    color: #fff;
    border: 2px solid #e6e5e0;
    border-radius: 5px;
    text-decoration: none;
    font-weight: 400;
	  background: #e6e5e0;
	  color: #000;
}

    

/* Nav */
#templatemo_nav_top { min-height: 40px;}
#templatemo_nav_top * {font-size: 14px !important; display: flex; justify-content: center; align-items: center;}
#templatemo_main_nav a { }
.navbar-light .navbar-nav .nav-link {
    color: #0072a1;
}
#templatemo_main_nav a:hover { color: #0dcaf0;}
#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: #0dcaf0 !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 {
  opacity: 0.6;
  transition: .5s;
  width: auto;
  height: 180px;
}
.brand-img:hover {
  filter: grayscale(0%);
  opacity: 1;
  transform: scale(1.07);
}
/* 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: #0dcaf0;}
#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: #dee2e6 !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: 700px;}
  #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;
  }
}

/* Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {}
.blink_me {
  animation: blinker .5s linear infinite;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}
.card:hover {
  transform:scale(1.07);
  transition: .5s;
  background-color: #f9fafbe3;
}
.carousel-caption.myslider-text h2 {
  margin-bottom: 30%;
  font-size: 50px;
  font-weight: 800;
}
.navbar-nav{
  font-size: 18px !important;
  font-weight: 500;
  color: #0072a1;
}
.imgservice{
  max-width: 85% !important;
  height: auto;
}
.img-service{
  max-width: 85% !important;
  height: auto;
  float: right;
}
/* ===== Buttons Css ===== */
.call-action-one .call-action-content .call-action-btn .primary-btn {
  background: var(--primary);
  color: var(--white);
  box-shadow: var(--shadow-2);
}
.call-action-one .call-action-content .call-action-btn .active.primary-btn, .call-action-one .call-action-content .call-action-btn .primary-btn:hover, .call-action-one .call-action-content .call-action-btn .primary-btn:focus {
  background: var(--primary-dark);
  color: var(--white);
  box-shadow: var(--shadow-4);
}
.call-action-one .call-action-content .call-action-btn .deactive.primary-btn {
  background: var(--gray-4);
  color: var(--dark-3);
  pointer-events: none;
}

/*===== call action one =====*/
.call-action-one {
  background-color: var(--light-2);
  padding: 30px;
}
.call-action-one .call-action-content .call-action-text {
  margin-top: 10px;
}
.call-action-one .call-action-content .call-action-text .action-title {
  font-weight: 600;
  color: var(--black);
}
.call-action-one .call-action-content .call-action-text .text-lg {
  color: var(--dark-3);
  margin-top: 16px;
}
.bg-grey {
  background-color: #f8f9fa!important;
}
     .modal {
z-index:1;
display:none;
padding-top:10px;
position:fixed;
left:0;
top:0;
width:100%;
height:100%;
overflow:auto;
background-color:rgb(0,0,0);
background-color:rgba(0,0,0,0.8)
}

.modal-content{
margin: auto;
display: block;
    position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: transparent !important;
}


.modal-hover-opacity {
opacity:1;
filter:alpha(opacity=100);
-webkit-backface-visibility:hidden
}

.modal-hover-opacity:hover {
opacity:0.60;
filter:alpha(opacity=60);
-webkit-backface-visibility:hidden
}


.close {
text-decoration:none;float:right;font-size:24px;font-weight:bold;color:white;
cursor:pointer
}
.container1 {
width:200px;
display:inline-block;
}
.modal-content, #caption {   
  
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.6s;
    animation-name: zoom;
    animation-duration: 0.6s;
}


@-webkit-keyframes zoom {
    from {-webkit-transform:scale(0)} 
    to {-webkit-transform:scale(1)}
}

@keyframes zoom {
    from {transform:scale(0)} 
    to {transform:scale(1)}
}
.breadcrumbs-overlay {
    position: relative;
    z-index: 1;
}
.rs-breadcrumbs {
    padding: 100px 0 130px;
}
.bg7 {
    background-image: url(../img/aboutus.jpeg);
    background-size: cover;
    background-position: center;
}
.bg8 {
    background-image: url(../img/contact-us-new.jpeg);
    background-size: cover;
    background-position: center;
}
.bg9 {
    background-image: url(../img/service.jpeg);
    background-size: cover;
    background-position: center;
}
.bg10 {
    background-image: url(../img/packaging.jpg);
    background-size: cover;
    background-position: center;
}
.bg11 {
    background-image: url(../img/aboutus.jpeg);
    background-size: cover;
    background-position: center;
}
.bg12 {
    background-image: url(../img/aboutus.jpeg);
    background-size: cover;
    background-position: center;
}
.bg13 {
    background-image: url(../img/aboutus.jpeg);
    background-size: cover;
    background-position: center;
}
.bg14 {
    background-image: url(../img/service2.jpg);
    background-size: cover;
    background-position: center;
}
.rs-breadcrumbs .page-title {
   margin: 0px 0 28px;
    color: #ffffff !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 50px;
    font-weight: 800;
}
.section-header {
  text-align: center;
  margin: 60px auto 20px auto;

  font-family: 'Montserrat', sans-serif;
  font-size: 36px;
  font-weight: 400;
  text-transform: uppercase;
  color: #222;
}

.section-header-underline {
  border: 1px solid #222;
  width: 3rem;
  margin: 0 auto;
  margin-bottom: 30px;
}

.video-gallery {
  position: relative;
  margin: 0 auto;
  max-width: 1000px;
  text-align: center;
}

.video-gallery .gallery-item {
  position: relative;
  float: left;
  overflow: hidden;
  margin: 10px 1%;
  min-width: 320px;
  background: #000;
  cursor: pointer;
}

.video-gallery .gallery-item img {
  position: relative;
  display: block;
  opacity: .45;
  width: 105%;
  transition: opacity 0.35s, transform 0.35s;
  transform: translate3d(-23px, 0, 0);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}

.video-gallery .gallery-item .gallery-item-caption {
  padding: 2em;
  color: #fff;
  text-transform: uppercase;
  font-size: 1.25em;
}

.video-gallery .gallery-item .gallery-item-caption,
.video-gallery .gallery-item .gallery-item-caption > a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.video-gallery .gallery-item h2 {
  font-weight: 300;
  overflow: hidden;
  padding: 0.5em 0;
}


.video-gallery .gallery-item h2,
.video-gallery .gallery-item p {
  position: relative;
  margin: 0;
  z-index: 10;
}

.video-gallery .gallery-item p {
  letter-spacing: 1px;
  font-size: 68%;

  padding: 1em 0;
  opacity: 0;
  transition: opacity 0.35s, transform 0.35s;
  transform: translate3d(10%, 0, 0);
}

.video-gallery .gallery-item:hover img {
  opacity: .3;
  transform: translate3d(0, 0, 0);

}

.video-gallery .gallery-item .gallery-item-caption {
  text-align: left;
}

.video-gallery .gallery-item h2::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 15%;
  height: 1px;
  background: #fff;
  
  transition: transform 0.3s;
  transform: translate3d(-100%, 0, 0);
}

.video-gallery .gallery-item:hover h2::after {
  transform: translate3d(0, 0, 0);
}

.video-gallery .gallery-item:hover p {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

@media screen and (max-width: 50em) {
  .video-gallery .gallery-item {
    display: inline-block;
    float: none;
    margin: 10px auto;
    width: 100%;
  }
}
/*----------------------------Css for Mobile View----------------------------------------*/

@media only screen and (min-width: 360px) and (max-width: 768px) {
	.navbar-collapse {
    position: relative;
    z-index: 9999;
    background: #fff;
    padding: 12px;
    margin-top: -5px;
    margin-left: -5%;
}
.carousel-caption.myslider-text h3 {
    margin-top: -30%;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 1px;
}

	img.mylogo {
        width: 220px;
    margin-top: 0px;
}
 .navbar-light .navbar-toggler {
    color: rgba(0,0,0,.55);
    border-color: rgba(0,0,0,.1);
    margin-top: 0% !important;
}
 .carousel-item img {
    height: 36vh !important;
}
 .myslider-text p {
    font-size: 12px !important;
    line-height: 20px;
    letter-spacing: 1px;
}
 .carousel-caption {
    position: absolute;
    right: 6%;
    bottom: 1.25rem;
    left: 6%;
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
    color: #fff;
    text-align: center;
}
.h1 {
    font-family: 'Poppins', sans-serif;
    font-size: 26px !important;
    font-weight: 500 !important;
    margin-bottom: 30px;
    color: #0072a1 !important;
    margin-top: 40px;
}
.h2 {
    font-family: 'Poppins', sans-serif;
    font-size: 22px !important;
    font-weight: 600 !important;
    color: #0072a1 !important;
}
.rs-breadcrumbs .page-title {
    margin: 0px 0 28px;
    color: #ffffff !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 50px;
    font-weight: 500;
}
.rs-breadcrumbs {
    padding: 100px 0 80px;
}
.rs-breadcrumbs .page-title {
    color: #ffffff !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 36px;
    font-weight: 500;
}
.imgservice {
    max-width: 100% !important;
    height: auto;
}
.img-service {
    max-width: 100% !important;
    height: auto;
    float: right;
}