:root {
  --loading-grey: #ededed;
}
@import url(https://fonts.googleapis.com/css2?family=Poppins);
body{
  background-color: #f6f9fc !important;
  font-family: "Poppins", 'Segoe UI', Tahoma;
	
}
/* Navbar */
.dropdown-toggle.dropdown-plus::after {
  vertical-align: 0;
  margin: 0;
  content: "\002B";
  border: none;
}

/* Form Input */
textarea:focus, 
textarea.form-control:focus, 
input.form-control:focus, 
input[type=text]:focus, 
input[type=password]:focus, 
input[type=email]:focus, 
input[type=number]:focus, 
[type=text].form-control:focus, 
[type=password].form-control:focus, 
[type=email].form-control:focus, 
[type=tel].form-control:focus, 
[contenteditable].form-control:focus {
  box-shadow: inset 0 -1px 0 #ddd;
}

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

.img-hero{
  margin-top: -70px;
  margin-bottom: 0;
}

/* 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: 30rem;
  } */
  
  
  /* MARKETING CONTENT
  -------------------------------------------------- */
  
  /* Center align the text within the three columns below the carousel */
  .marketing .col-lg-4 {
    margin-bottom: 1.5rem;
    text-align: center;
  }
  /* rtl:begin:ignore */
  .marketing .col-lg-4 p {
    margin-right: .75rem;
    margin-left: .75rem;
  }
  /* rtl:end:ignore */
  
  
  /* Featurettes
  ------------------------- */
  
  .featurette-divider {
    margin: 5rem 0; /* Space out the Bootstrap <hr> more */
  }
  
  /* Thin out the marketing headings */
  /* rtl:begin:remove */
  .featurette-heading {
    letter-spacing: -.05rem;
  }
  
  /* rtl:end:remove */
  
  /* 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;
    }
  }
  .navbar{
    min-height: 80px;
    font-size: 18px;
    
  }
  
  /* Card Loading */
.content-loading {
  padding: 2rem 1.8rem;
}
.description-loading {
  font-size: 1rem;
  line-height: 1.4rem;
}
.image-loading {
  height: 200px;
}
.loading .image-loading,
.loading h4,
.loading .description {
  background-color: var(--loading-grey);
  background: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0) 40%,
    rgba(255, 255, 255, .5) 50%,
    rgba(255, 255, 255, 0) 60%
  ) var(--loading-grey);
  background-size: 200% 100%;
  background-position-x: 180%;
  animation: 1s loading ease-in-out infinite;
}

@keyframes loading {
  to {
    background-position-x: -20%;
  }
}

.loading h4 {
  min-height: 1.6rem;
  border-radius: 4px;
  animation-delay: .05s;
}

.loading .description {
  min-height: 4rem;
  border-radius: 4px;
  animation-delay: .06s;
}
/* End Card Loading */

  /* Thumb Image */
  .card-img-cover{
    width: 100%;
    height: 200px;
    overflow: hidden;
    /* transition: transform .1s;  */
    /* border: 1px solid red; */
  }
  .card-img-frame img {
    /* width: 100%;
    height: 200px; */
    object-fit: cover;
    transition: transform .5s; 
    overflow: hidden;
    }
  .card-img-frame:hover img {
    transform: scale(1.2);
    }
  /* Post Image */
  .post-img-cover{
    width: 100%;
    height: 250px;
    object-fit: cover;
    overflow: hidden;
    /* transition: transform .1s;  */
    /* border: 1px solid red; */
  }
  .post-img-frame img {
    width: 100%;
    /* height: 200px; */
    object-fit: cover;
    transition: transform .5s; 
    overflow: hidden;
    }
  .post-img-frame:hover img {
    transform: scale(1.2);
    }

  /* Footer */
  .footer-area{
    padding: 60px 0px;
    background-color: #333;
    color: #fff;
}
.footer-area a{
    text-decoration: none;
}
.footer-area .footer-heading{
    font-size: 24px;
    color: #fff;
}
.footer-area .footer-underline{
    height: 1px;
    width: 70px;
    background-color: #ddd;
    margin: 10px 0px;
}
.copyright-area{
    padding: 25px 0px;
    background-color: #262626;
}
.copyright-area p{
    margin-bottom: 0px;
    color: #fff;
}
.copyright-area .social-media{
    text-align: end;
}
.copyright-area .social-media a{
    margin: 0px 10px;
    color: #fff;
    width: 20px;
}

.header{
  height: 150px;
}


/* CUSTOM HEADER ECOMMERCE */

/* .card:hover{
  border:1px solid rgb(0, 126, 89) !important;
  box-shadow: 0 4px 8px 0 rgba(74, 74, 74, 0.2), 0 6px 20px 0 rgba(66, 66, 66, 0.19);
} */




/* DETAIL PRODUCT */
.thumbnail_images ul{list-style: none;justify-content: center;display: flex;align-items: center;margin-top:10px}
.thumbnail_images ul li{margin: 5px;padding: 10px;border: 2px solid #eee;cursor: pointer;transition: all 0.5s}
.thumbnail_images ul li:hover{border: 2px solid #000}
.main_image{display: flex;justify-content: center;align-items: center;border-bottom: 1px solid #eee;height: 400px;width: 100%;overflow: hidden}
.heart{height: 29px;width: 29px;background-color: #eaeaea;border-radius: 50%;display: flex;justify-content: center;align-items: center}
.content p{font-size: 12px}
.ratings span{font-size: 14px;margin-left: 12px}
.colors{margin-top: 5px}
.colors ul{list-style: none;display: flex;padding-left: 0px}
.colors ul li{height: 20px;width: 20px;display: flex;border-radius: 50%;margin-right: 10px;cursor: pointer}
.colors ul li:nth-child(1){background-color: #6c704d}
.colors ul li:nth-child(2){background-color: #96918b}
.colors ul li:nth-child(3){background-color: #68778e}
.colors ul li:nth-child(4){background-color: #263f55}
.colors ul li:nth-child(5){background-color: black}
.right-side{position: relative}
.search-option{position: absolute;background-color: #000;overflow: hidden;align-items: center;color: #fff;width: 200px;height: 200px;border-radius: 49% 51% 50% 50% / 68% 69% 31% 32%;left: 30%;bottom: -250px;transition: all 0.5s;cursor: pointer}
.buttons .btn{height: 50px;width: 150px;border-radius: 0px !important}

/* Floating Button */
.act-btn-map{
  background:rgb(49, 105, 194);
  display: block;
  width: 90px;
  height: 90px;
  padding: 5px;
  line-height: 50px;
  text-align: center;
  color: white;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  transition: ease all 0.3s;
  position: fixed;
  right: 0;
  bottom:210px;
}
.act-btn-tokped{
  background:green;
  display: block;
  width: 90px;
  height: 90px;
  padding: 5px;
  line-height: 50px;
  text-align: center;
  color: white;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  transition: ease all 0.3s;
  position: fixed;
  right: 0;
  bottom:120px;
}
.act-btn-shopee{
  background:orangered;
  display: block;
  width: 90px;
  height: 90px;
  padding: 5px;
  line-height: 50px;
  text-align: center;
  color: white;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  transition: ease all 0.3s;
  position: fixed;
  right: 0;
  bottom:30px;
}
.act-btn-tokped:hover{background: rgb(14, 120, 59)}
.act-btn-shopee:hover{background: orange}
.act-btn-map:hover{background: rgb(21, 85, 146)}