/** Shopify CDN: Minification failed

Line 135:37 Unexpected ".90vh"
Line 178:37 Unexpected ".90vh"

**/
/* Carousel Styling */

.hero-section{
  height:83vh;
}
.vh-90 {
  height: 100%;

}

.carousel {
  width: 100%;
  margin: 0 auto;
  height: 72%;
  background: #fff;
  overflow: hidden;
}

.carousel-track {
  height: 100%;
  width: 100%;
  text-align: center;
}

.carousel-slide {
  text-align: center;
  position: relative;
}

.carousel-text {
  
  font-size: 13rem;
  color: #888888;
  font-weight: 300;
  z-index: 0;
  opacity:20%;
}

.carousel-image-container {
  width: 43%;
  position: absolute;
  height: auto;
  z-index: 1;
}

/* #productImage {
  opacity: 1;
  transform: scale(1);
  transition: opacity 1s ease, transform 1s ease;
} */

#productImage {
  opacity: 0;
  transition: opacity 1s ease, transform 1s ease;
  transform: scale(0.85);
}
#productImage.loaded {
  opacity: 1;
  transform: scale(0.85);
}


.heading {
  width: 50%;
}
.heading h2{
  margin-left: 83px;
  font-weight: 400;
}
.products {
  width: 100%;
  /* height: 100px; */
  position: relative;
  padding-inline:40px;
  /* padding-bottom:50px */
}

.products h3 {
  margin-left: 5%;
}

.products p {
  font-size: 25px;
}

.products button {
 /* background-color:#050505;*/
   background-color :#888888;
   /* background-color :#680868; */
  color: #FFFFFF;
  border-radius: 0;
}
.products a{
  color:white;
}
.heading::after {
  content: '';
  position: absolute;
  /* left: -50px; */
  /* bottom: -20px; */
  width: 50%;
  height: 2px;
  background: linear-gradient(to right,#888888, #FFFFFF);
}
.design_title{
  font-size: 40px;
  font-weight: 400;
  color: #888888;
}

                 @media (min-width: 769px) and (max-width:882px) {

                              .heading{
                                 width:70%;
                               }
                              .heading h2 {
                                margin-left:60px;
                                font-weight: 400;
                                 }
                               .carousel-text {
                                  font-size: 10rem;
                                     }
                          }
                @media (max-width:768px) {
                                      .hero-section {
                                      height:100vh;
                                      }

                                     .90vh{
                                       height:auto;
                                     }
                                     .carousel{
                                       height:59%;
                                     }
                                      .carousel-text {
                                        line-height: 125px;
                                        font-size:12rem;
                                        padding-top:0px;
                                        padding-bottom:20px;
                                      }
                                    .carousel-image-container {
                                    width: 50%;
                                     }

                                      .heading{
                                        width:100%;

                                      }
                                       .heading h2 {
                                         margin-left: 8px;
                                        margin-top:20px;
                                     }
                                      .heading p{
                                 margin-left: 8px;
                                 }
                                     .see_products{
                                       width:100%;
                                       margin-top:10px;
                                       margin-bottom:30px;
                                       text-align:center;

                                     }
                                    .products{
                                       padding-inline:0px;
                                     }
                                   }
      @media(max-width:500px) {
                      .hero-section {
                                      height:80vh;
                                      }

                                     .90vh{
                                       height:auto;
                                     }
                                     .carousel{
                                       height:57%;
                                     }
                                      .carousel-text {
                                        line-height: 110px;
                                        font-size:10rem;
                                        padding-top:0px;
                                        padding-bottom:20px;
                                      }
                                    .carousel-image-container {
                                    width: 50%;
                                     }

                                      .heading{
                                        width:100%;

                                      }
                                       .heading h2 {
                                         margin-left: 8px;
                                        margin-top:20px;
                                     }
                               .heading p{
                                 margin-left: 8px;
                                 }
                                     .products{
                                       padding-inline:0px;
                                     }
                                     .see_products{
                                       width:100%;
                                       margin-top:10px;
                                       text-align:center;

                                     }
                                .see_products button{
                                  margin:30px 0;
                                }
                          }

      @media(max-width:400px){
        .carousel-text{
          font-size: 8rem;
        }
      }
@media (hover: hover) and (min-width: 768px) {
  .products button:hover {
     /* background-color:#801D5F  */
    background-color: #050505

  }
}

@media (max-width:768px){
  .products button:active{
     /* background-color:#801D5F  */
    background-color: #050505

  }
}