/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */
@import url('https://fonts.googleapis.com/css2?family=Mulish:wght@400;600;700;800&display=swap');
body {
 /* padding-top: 3rem;
  padding-bottom: 3rem; */
  color: #5a5a5a;
    font-family: 'Mulish', sans-serif;
    background-color: #f7f7f7;
}


/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

/* Carousel base class */
.carousel {
  margin-bottom: 4rem;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
  bottom: 3rem;
  z-index: 10;
}

/* Declare heights because of positioning of img element */
.carousel-item {
/*  height: 32rem;*/
    height: 30rem;
}
.carousel-item > img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
    height: 30rem;
/*  height: 32rem;*/
}


/* MARKETING CONTENT
-------------------------------------------------- */

/* Center align the text within the three columns below the carousel */
.marketing .col-lg-4 {
  margin-bottom: 1.5rem;
  text-align: center;
}
.marketing h2 {
  font-weight: 400;
}
.marketing .col-lg-4 p {
  margin-right: .75rem;
  margin-left: .75rem;
}


/* Featurettes
------------------------- */

.featurette-divider {
  margin: 5rem 0; /* Space out the Bootstrap <hr> more */
}

/* Thin out the marketing headings */
.featurette-heading {
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.05rem;
}


/* RESPONSIVE CSS
-------------------------------------------------- */

@media (min-width: 40em) {
  /* Bump up size of carousel content */
  .carousel-caption p {
    margin-bottom: 1.25rem;
    font-size: 1.25rem;
    line-height: 1.4;
  }

  .featurette-heading {
    font-size: 50px;
  }
}

@media (min-width: 62em) {
  .featurette-heading {
    margin-top: 7rem;
  }
}

/* --------------------------------------------DD-----------------------------------*/
img{max-width: 100%;}
a:hover{text-decoration: none;}
.btn{border-radius: 0;}
@media (max-width: 47.999em) {
    .bg-responsive-color {background-color: rgba(245, 245, 245, 0.9);}
    .nav-item{border-bottom: 1px solid #3e3e3e;}
    #mainSlider{margin-top: 2px;}
    #owl-products .owl-item img{padding: 0 50px;}
}
@media (min-width: 48em) {
.navbar-dark .navbar-nav .nav-link{color: #fff;}
.navbar-nav .active, .nav-item:hover{border:  1px solid #c1c1c1; transition: background-color .5s; -moz-transition: background-color .5s; }
.bg-responsive-color {background-color: rgba(0, 0, 0, 0.2);}
.small .bg-responsive-color {background-color: rgba(0, 0, 0, 0.85);}
.small .navbar-brand img {width: 50%;}
#navbarCollapse{padding-top: 25px; padding-bottom: 25px;} 
.navbar-brand{padding-top: 0.9rem;padding-bottom: 0.8rem;position: absolute;left: 25px;top: 0px;background-color: #f7f7f7;border-radius: 15px; z-index: 9}
}
@media (min-width:  480px){
 .quote{ font-size: 4.5rem; line-height: 1.2em; padding: 1.4em 1em;} 
 .bg-responsive-color #navbarCollapse .navbar-nav .active > .nav-link{color: #fff;}
 .bg-responsive-color .navbar-nav .nav-link {color: rgba(255, 255, 255, 0.75);}
 .bg-responsive-color.navbar-nav .nav-link:hover{color: rgba(255, 255, 255, 0.95);}
 .bg-responsive-color .navbar-nav .nav-link:hover{color: #fff;}
 .right-responsive-light-border{border-right: 1px solid #484848;}
    .navbar{box-shadow:0px 1px 4px 0px rgba(0, 0, 0, .25); z-index: 8;}
}
@media (max-width:  479px){
     .quote{ font-size: 3.2rem; line-height: 1.2em; padding: 1.4em .8em;}
    .responsive-list li{display: inline; margin: 10px;}
}
.quote{color: #fff;    text-align: center;  font-weight: 600;}
.quote span {font-weight: 800;} 
.carousel-indicators li{background-color: #797979;}
.navbar-brand img{height: 128px; width: auto;}
.navbar {padding-bottom: 0; padding-top: 0;}
.navbar-nav .active:hover{background-color: rgba(0, 0, 0, 0.25);}
.navbar-nav .nav-link{font-weight: 600;}
.bg-light{ box-shadow:0px 1px 4px 0px rgba(0, 0, 0, .25);}
p{margin-top: 0;
    margin-bottom: 1rem;
    font-size: 1.05rem;
    line-height: 1.7em;}
.btn-custom{background-color: #f7b600;  font-size: 1.2rem; transition: background-color .5s}
.btn-custom:hover{background-color: #fff; border: 2px solid #fcc704;}
.parallax-slide{
  height: 500px;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.p-slide-1{ background-image: url("../../images/parallax/wheat.jpg");}
.footer-copyright{background: #17181d;}
footer{background: #26282f;}
footer p {font-size: .9rem; margin-bottom: .25rem;color: #808080;}
.social-icon{font-size: 1.7rem; line-height: 2.2rem; transition: color .25s}
.facebook {color: #1778F2;}
.facebook:hover {color: #005acb;}
.youtube {color: #c4302b;}
.youtube:hover{color: #de1811;}
.whatsapp-icon{color: #06d755;}
.whatsapp-icon:hover{color: #00b423;}
.text-white{color: #fff;}
.footer-title{color: #bdbdbd;}
.header-image img{max-width: 100%;}
.header-image-about{background-image: url(../../images/header-about.jpg); background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%; padding: 3rem;}
.header-image-about h1{color: #fff;}
.small .navbar-brand{padding-top: 0.3rem;   padding-bottom: 0.3rem;}
.has-overlay{position: relative;}
.bg-image-overlay{position: absolute; right: 0;  top: 0; opacity: .15;}
.dim-overlay{opacity: .05;}
.header-image-about a{color: #fff;}
.header-image-about a:hover{color: #1778F2;}
.contact-item p{margin-bottom: .5rem;}
.contact-item p .fa{margin-right: 10px;}
.product-card{text-align: center;    background-color: #ffffff;
    margin: 10px 20px;
    padding: 30px 30px;
    box-shadow: 2px 3px 10px #dadada; transition: all 300ms;}
.product-card:hover{transform: scale(1.05); box-shadow: 2px 3px 10px #7d7d7d;}
.r35-divider{margin: 3.5rem 0;}
.product-card img{max-width: 100%;}
.nav-item{margin: 0 5px; border-right: 1px solid #d8d8d8;}
.animate__animated.animate__bounceInDown {
  --animate-duration: 2s;
}
.footer-logo img{width: auto; height: 128px;}
/*==============REUSE=================*/
.h-line{min-width: 50px; border: 1px solid black; margin: 19px 0; display: inline-block; opacity: 0.1}
.h-line-l-end::before{content: url(../../images/lel.png);}
.h-line-r-end::after{content: url(../../images/ler.png);}
.h-line-l-end,.h-line-r-end{display: inline;opacity: 0.1}
a {transition: color .5s;}
.margin-top-0{margin-top: 0;}
.margin-top-10{margin-top: 10px;}
.margin-top-40{margin-top: 40px;}
.margin-top-80{margin-top: 80px;}
.margin-top-100{margin-top: 100px;}
.margin-btm-0{margin-bottom: 0;}
.margin-left-0{margin-left: 0;}
.margin-right-0{margin-right:0;}
.noborderright{border-right: none!important;}
.nomargin{margin:0;}
.nopadding{padding: 0!important;}
.h-padding-5-5{padding-left: 5px!important; padding-right: 5px!important;}
.h-padding-20-20{padding-left: 20px!important; padding-right: 20px!important;}
.padding-top10{padding-top: 10px;}
.p-top-3_5{padding-top: 3.5rem;}
.padding-btm20{padding-bottom: 20px;}
.-txt-{text-align: center;}
.-txt{text-align: right;}
.txt-{text-align: left;}
._txt{text-align: justify;}
.div-{float: left!important;}
.-div{float: right!important;}
.-div-{float: none!important; margin-left: auto; margin-right: auto;}
 ul{list-style: none;}
.form-container{overflow: hidden; border: 1px solid #bdbdbd;
    padding: 25px 15px 35px 15px;
    background-color: #d8d8d8;}
form{overflow: hidden;}
.tool-tip{position: absolute; font-size: 12px; left: 40px; top: -10px; text-align: center; border-radius: 2px; z-index: 100; display: none;}
.pop-up-overlay{position: fixed; z-index: 101; left: 0; top: 0; overflow: hidden; width: 100%; height: 0; transition: 500ms;}
.pop-up-head, .pop-up-body{position: relative; top: 10%; margin-left: auto; margin-right: auto;}
.pop-up-head{height:50px;}
.no-screen{display: none!important;}
#preloader{position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: 200; animation: bgChange 30s infinite; animation-direction: alternate; animation-timing-function: ease-in-out;}
.hide, .no-screen{display: none;}
.to-animate{opacity: 0;}
.to-animate.animated{opacity: 1;}
.goto-top{
    display: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    position: fixed;
    right: 5px;
    bottom: 5px;
    font-size: 40px;
    line-height: 46px;
    z-index: 110;
}
.goto-top a { color: #6d6d6d;}
.goto-top a:hover{color: #1778F2;}
.whatsapp { background-color: #06d755;  border: 2px solid #04bf35; color: #fff; min-width: 9rem;}
.whatsapp:hover{background-color: #03ca4e;}
.phone{background-color: #dc2525; border: 2px solid #cc1d1d;  color: #fff; min-width: 9rem;}
.phone:hover{background-color:#cc1d1d;}
.phone .fa{border: 1px solid #fff;   border-radius: 50%;  padding: 3px 5px;}
.contact-floater{ position: fixed;  bottom: 5px;  left: 15px; z-index: 9;}
/*.contact-floater .whatsapp, .contact-floater .phone{font-size: 2rem; padding: 0px 5px; min-width:0; width: 3.2rem; height: 3.2rem;  border-radius: 50%;}*/
/*.contact-floater .whatsapp, .contact-floater .phone{ padding: 0px 5px; min-width:0;}*/
.contact-floater .phone .fa{border: none;}
.contact-floater .phone{margin-right: 10px;}
/*
.goto-top:hover{
    cursor: pointer;
}
*/
/*==============REUSE=================*/