/*



eproj 559 Zay Shop



https://eproj.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: 40px !important;

  font-weight: 100 !important;

}

.h2 {

  font-family: 'Roboto', sans-serif;

  font-size: 30px !important;

  font-weight: 300;

}

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

.text-success { color: #59ab6e !important;}

.text-light { color: #cfd6e1 !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 */

#eproj_nav_top { min-height: 40px;}

#eproj_nav_top * { font-size: .9em !important;}

#eproj_main_nav a { color: #212934;}

#eproj_main_nav a:hover { color: #69bb7e;}

#eproj_main_nav .navbar .nav-icon { margin-right: 20px;}



/* Hero Carousel */

#template-mo-zay-hero-carousel { background: #efefef !important;}

/* Accordion */

.eproj-accordion a { color: #000;}

.eproj-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 */

.eproj-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 */

#eproj_footer a { color: #dcdde1;}

#eproj_footer a:hover { color: #68bb7d;}

#eproj_footer ul.footer-link-list li { padding-top: 10px;}

#eproj_footer ul.footer-icons li {

  width: 2.6em;

  height: 2.6em;

  line-height: 2.6em;

}

#eproj_footer ul.footer-icons li:hover {

  background-color: #cfd6e1;

  transition: .5s;

}

#eproj_footer ul.footer-icons li:hover i {

  color: #212934;

  transition: .5s;

}

#eproj_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) {

  .eproj-carousel .h1 { font-size: 1em !important;}

}



/*// Medium devices (tablets, 768px and up)*/

@media (min-width: 768px) {

  #eproj_main_nav .navbar-nav {max-width: 450px;}

 }



/* Large devices (desktops, 992px and up)*/

@media (min-width: 992px) {

  #eproj_main_nav .navbar-nav {max-width: 400px;

  margin-left: 60% !important;}

  #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) {}





/*---------------------------------------

  CUSTOM PROPERTIES ( VARIABLES )             

-----------------------------------------*/

:root {

  --white-color:                  #ffffff;

  --primary-color:                #68bb7d;

  --secondary-color:              #EE5007;

  --section-bg-color:             #f0f8ff;

  --custom-btn-bg-color:          #EE5007;

  --custom-btn-bg-hover-color:    #c01f27;

  --dark-color:                   #000000;

  --p-color:                      #717275;

  --border-color:                 #7fffd4;

  --link-hover-color:             #B22727;



  --body-font-family:             'Outfit', sans-serif;



  --h1-font-size:                 74px;

  --h2-font-size:                 46px;

  --h3-font-size:                 32px;

  --h4-font-size:                 28px;

  --h5-font-size:                 24px;

  --h6-font-size:                 22px;

  --p-font-size:                  18px;

  --btn-font-size:                14px;

  --copyright-font-size:          16px;



  --border-radius-large:          100px;

  --border-radius-medium:         20px;

  --border-radius-small:          10px;



  --font-weight-light:            300;

  --font-weight-normal:           400;

  --font-weight-bold:             700;

}



body {

  background-color: var(--white-color);

  font-family: var(--body-font-family); 

}





/* ---------------------------------------

  ABOUT              

-----------------------------------------*/



@media screen and (max-width: 991px) {

   .section-padding {

    padding-top: 50px;

    padding-bottom: 50px;

  }

  

}



.about-section {

  /* background-image: url('../images/edward-unsplash-blur.jpg'); */

  background-color: #e7eee9;

  background-repeat: no-repeat;

  background-size: cover;

  position: relative;

}



.about-image {

  border-radius: var(--border-radius-medium);

  display: block;

}



.about-text-wrap {

  position: relative;

}



.about-text-icon {

  background: var(--primary-color);

  border-radius: 100%;

  font-size: var(--h3-font-size);

  width: 70px;

  height: 70px;

  line-height: 70px;

  text-align: center;

}



.about-text-info {

  backdrop-filter: blur(5px) saturate(180%);

  -webkit-backdrop-filter: blur(5px) saturate(180%);

  background-color: rgba(255, 255, 255, 0.75);

  border-radius: var(--border-radius-medium);

  border: 1px solid rgba(209, 213, 219, 0.3);

  position: absolute;

  bottom: 0;

  right: 0;

  left: 0;

  margin: 20px;

  padding: 35px;

}







/* Contato e Localização */

section {

  margin-top: 00px;

  padding-top: 60px;

}



@media (min-width: 576px) {

  section {

    margin-top: 0px;

    padding-top: 60px;

  }

}



.section-heading {

  margin-bottom: 30px;

}



.section-heading h2 {

  font-size: 22px;

  font-weight: 700;

  text-transform: capitalize;

  color: #2a2a2a;

  line-height: 32px;

  letter-spacing: -0.5px;

}



@media (min-width: 576px) {

  .section-heading h2 {

    font-size: 30px;

    line-height: 34px;

    text-transform: uppercase;

    letter-spacing: auto;

  }

}



.section-heading h2 em {

  color: #68bb7d;

  font-style: normal;

  padding-left: 100px;

  position: relative;

}



.section-heading h2 em::before {

  width: 80px;

  height: 2px;

  background-color: #68bb7d;

  content: '';

  position: absolute;

  left: 0;

  top: 22px;

}



button:focus:not(:focus-visible) {

  -webkit-box-shadow: none;

          box-shadow: none;

}



section.contact-us {

  padding: 60px 0px;

  /* background-image: url(../img/contact-us-bg.jpg); */

  background-color: #e7eee9;

  background-repeat: no-repeat;

  background-size: cover;

  background-position: center center;

}



@media (min-width: 992px) {

  section.contact-us {

    margin-top: 0px;

    padding: 120px 0px;

  }

}



section.contact-us .left-form {

  padding-right: 15px;

}



@media (min-width: 992px) {

  section.contact-us .left-form {

    padding-right: 0px;

  }

}



section.contact-us .right-map {

  padding-left: 15px;

}



@media (min-width: 992px) {

  section.contact-us .right-map {

    padding-left: 0px;

  }

}



section.contact-us form {

  padding: 30px;

  border-top-right-radius: 7.5px;

  border-bottom-right-radius: 7.5px;

  background-color: #ffffff;

  border-top-left-radius: 7.5px;

  border-bottom-left-radius: 7.5px;

  margin-bottom: 0px;

}



@media (min-width: 992px) {

  section.contact-us form {

    padding: 30px;

    border-top-right-radius: 7.5px;

    border-bottom-right-radius: 7.5px;

    margin-right: 20px;

  }

}



section.contact-us form input {

  width: 100%;

  height: 44px;

  border-radius: 7.5px;

  border: 1px solid #eeeeee;

  font-size: 14px;

  padding: 0px 15px;

  margin-bottom: 15px;

}



section.contact-us form textarea {

  width: 100%;

  max-width: 100%;

  min-width: 100%;

  min-height: 120px;

  height: 120px;

  max-height: 120px;

  border-radius: 7.5px;

  border: 1px solid #eeeeee;

  font-size: 14px;

  padding: 10px 15px;

  margin-bottom: 15px;

}



section.contact-us form button.main-button {

  width: 100%;

}



section.contact-us #map iframe {

  border-top-right-radius: 7.5px;

  border-bottom-right-radius: 7.5px;

  border-top-left-radius: 7.5px;

  border-bottom-left-radius: 7.5px;

  margin-top: 30px;

  width: 100%;

}



@media (min-width: 992px) {

  section.contact-us #map iframe {

    margin-top: 0px;

    border-top-left-radius: 0px;

    border-bottom-left-radius: 0px;

  }

}



button.main-button1 {

  font-size: 14px;

  text-transform: capitalize;

  font-weight: 400;

  color: #ffffff;

  background-color: #68bb7d;

  padding: 11px 25px;

  border-radius: 7.5px;

  display: inline-block;

  outline: none;

  border: none;

  -webkit-transition: all .5s;

  transition: all .5s;

  width: 100%;

}



button.main-button1:hover {

  background-color: #2a2a2a;

}



.oquefazemos-background-color{

  background-color: #e7eee9;

  padding: 10px;

}



.oquefazemos{

  text-align: center;

  margin-top: 20px;

  margin-bottom: 20px;

}



.servicos{

  list-style-type: none;

  margin-left: -2rem !important;

}





/* gallery Style */

.gallery {

    display: grid;

    grid-template-columns: repeat(9, 1fr);

    grid-template-rows: repeat(6, 4vw);

    grid-gap: 15px;

}



.gallery__img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}



.gallery__item--1 {

    grid-column-start: 1;

    grid-column-end: 4;

    grid-row-start: 1;

    grid-row-end: 7;

}



.gallery__item--2 {

    grid-column-start: 4;

    grid-column-end: 7;

    grid-row-start: 1;

    grid-row-end: 7;

}



.gallery__item--3 {

    grid-column-start: 7;

    grid-column-end: 10;

    grid-row-start: 1;

    grid-row-end: 7;

}



.gallery__item--4 {

    grid-column-start: 1;

    grid-column-end: 6;

    grid-row-start: 7;

    grid-row-end: 9;

}



.gallery__item--5 {

    grid-column-start: 6;

    grid-column-end: 10;

    grid-row-start: 7;

    grid-row-end: 9;

}



/* GALLERY 3 */

.gallery3 {

    display: grid;

    grid-template-columns: repeat(9, 1fr);

    grid-template-rows: repeat(12, 4vw);

    grid-gap: 15px;

}



.gallery__img3 {

    width: 100%;

    height: 100%;

    object-fit: cover;

}



.gallery__item3--1 {

    grid-column-start: 1;

    grid-column-end: 4;

    grid-row-start: 1;

    grid-row-end: 7;

}



.gallery__item3--2 {

    grid-column-start: 4;

    grid-column-end: 10;

    grid-row-start: 1;

    grid-row-end: 7;

}



.gallery__item3--3 {

    grid-column-start: 1;

    grid-column-end: 5;

    grid-row-start: 7;

    grid-row-end: 13;

}



.gallery__item3--4 {

    grid-column-start: 5;

    grid-column-end: 10;

    grid-row-start: 7;

    grid-row-end: 13;

}



/* GALLERY 4 */

.gallery4 {

    display: grid;

    grid-template-columns: repeat(9, 1fr);

    grid-template-rows: repeat(14, 4vw);

    grid-gap: 15px;

}



.gallery__img4 {

    width: 100%;

    height: 100%;

    object-fit: cover;

}



.gallery__item4--1 {

    grid-column-start: 1;

    grid-column-end: 4;

    grid-row-start: 1;

    grid-row-end: 7;

}



.gallery__item4--2 {

    grid-column-start: 4;

    grid-column-end: 7;

    grid-row-start: 1;

    grid-row-end: 7;

}



.gallery__item4--3 {

    grid-column-start: 7;

    grid-column-end: 10;

    grid-row-start: 1;

    grid-row-end: 7;

}



.gallery__item4--4 {

    grid-column-start: 1;

    grid-column-end: 6;

    grid-row-start: 7;

    grid-row-end: 15;

}



.gallery__item4--5 {

    grid-column-start: 6;

    grid-column-end: 10;

    grid-row-start: 7;

    grid-row-end: 15;

}





/* GALLERY 5 */

.gallery5 {

  display: grid;

  grid-template-columns: repeat(12, 1fr);

  grid-template-rows: repeat(7, 4vw);

  grid-gap: 10px;

}



.gallery__img5 {

  width: 100%;

  height: 100%;

  object-fit: cover;

}



.gallery__item5--1 {

  grid-column-start: 1;

  grid-column-end: 6;

  grid-row-start: 1;

  grid-row-end: 8;



}



.gallery__item5--2 {

  grid-column-start: 6;

  grid-column-end: 13;

  grid-row-start: 1;

  grid-row-end: 8;

}





/* ERROR 404 */
.gallery2 {

  display: grid;

  grid-template-columns: repeat(3, 0fr);

  grid-template-rows: repeat(6, 6vw);

  grid-gap: 22px;

}



.error-404 {

  width: 100%;

  height: 100%;

  object-fit: cover;

}



.gallery__item--error404 {

  grid-column-start: 1;

  grid-column-end: 10;

  grid-row-start: 1;

  grid-row-end: 7;

}







@media (min-width: 992px) {

  .img-carrosel{

    width: 100%;

    object-fit: cover;

  } 

}



@media (max-width: 992px) {

  .img-carrosel{

    width: 100%;

    object-fit: cover;

  } 

}



@media (max-width: 576px) {

  .img-carrosel{

  width: 100%;

  object-fit: cover;

  }   

}