@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');

.buy-now-button {
    display: inline-block;
    background-color: #ff9900;
    color: #fff;
    font-size: 18px;
    padding: 10px 20px;
    border-radius: 12px;
    text-decoration: none;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s ease-in-out;
    
}


        .buy-now-button:hover {
            background-color: #cc7a00;
            text-decoration: none;
}
.close_btn{
  left: 85%;
  top: 25%;

  color: white;
  background-color: grey;
  position: fixed;
  display: inline-block;
  border-radius: 2px;
  cursor: pointer;
  z-index: 2000;
}

body {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
        margin: 0;
    }

    .content {
        flex: 1;
    }

    .footer {
        background-color: #f8f9fa;
        padding: 20px;
    }

.close_btn p{
  line-height: 35px;
  font-size: 5rem;
  font-weight: 600;
}

.section.pull-up {
    margin-top: -50px;
    background-color: white;
    position: relative;
    z-index: 1;
    padding: 45px 0 60px
}
.custom-red-bg {
  background-color: #DD2531;
}
.ecocatch-green-bg{
  background-color: #27753B;
}

.ecocatch-green-font {
     color: #27753B!important; /* Change this to your desired text color */
   }
   .ecocatch-green-font-active{
        color: #174421!important; /* Change this to your desired text color */
      }

.navbar-nav .nav-item .nav-link {
     color: white; /* Change this to your desired text color */
   }

          .preview img{
            width: 70px;
            height: 70px;
            padding: 1px;
            float:left;
            border-radius: 4px;
            cursor:pointer;
          }

    .view{
      padding: 0px;
    }
    .view img{
      width: 100%;
      border-radius: 2px;
    }


    .product-visual{
      overflow: auto;
      margin: auto;
      display: inline-block;

    }

    .product-text{
      background-color:#f6f8f0;
      overflow: auto;
      margin: auto;

      border-radius: 4px;
    }
          .product-text h3{
            color: #92d28a;

          }
          .product-text p{
            padding:5px;
            text-align: justify;
            opacity: 75%;
          }

            .section_icon img{
              opacity: 70%;
              display: inline-block;
              cursor:pointer;
            }
            .section_icon img:hover{
              cursor: pointer;
              background: #92d28a;
              border-radius: 60px;
            }


                  .product-card img{
                   width: 100%;
                  }







/*---Media Queries --*/
@media (max-width: 767px) {
    .section.pull-up {
        padding-top:0;
        margin-top: 0
    }

    .section.pull-up .info {
        margin-bottom: 20px
    }

    .section.pull-up .info img {
        max-width: 110px;
        margin-bottom: 5px
    }

@media (max-width: 992px) {

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

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

}


/*---Firefox Bug Fix --*/
.carousel-item {
  transition: -webkit-transform 0.5s ease;
  transition: transform 0.5s ease;
  transition: transform 0.5s ease, -webkit-transform 0.5s ease;
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
}
/*--- Fixed Background Image --*/
figure {
  position: relative;
  width: 100%;
  height: 60%;
  margin: 0!important;
}
.fixed-wrap {
  clip: rect(0, auto, auto, 0);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#fixed {
  background-image: url('img/mac.png');
  position: fixed;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center center;
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
  will-change: transform;
}
/*--- Bootstrap Padding Fix --*/
[class*="col-"] {
    padding: 1rem;
}





/*
Extra small (xs) devices (portrait phones, less than 576px)
No media query since this is the default in Bootstrap

Small (sm) devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

Medium (md) devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

Large (lg) devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

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