.collapsible__content-1, .collapsible__content-2, .collapsible__mobileNav-About, .collapsible__product {
  max-height: 0;
  overflow: hidden;
  transition: max-height 1s ease-out;
}

.productTransition {
  transition: max-height 1s ease-out;
}

/* Experimenting collapsible section */
.collapsible__section {
  max-height: 0;
  overflow: hidden;
  transition: max-height 1s ease-out; 
}

.collapsible:after {
  content: "\002B";
  vertical-align: top;
}

.collapsible.noIcon:after, .collapsible2.noIcon:after, .collapsibleKaotim.noIcon:after {
  content: "";
}

.collapsibles__content-1, .collapsibles__content-2, .collapsibles__mobileNav-About, .collapsible__product {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease-in-out all;
}

.toggleNav-head.clickedd .collapsible__mobileNav-About {
  max-height: 400px !important;
  position: relative;
  margin-bottom: 10px !important;
}

.toggleNav {
  position: relative;
  width: 100%;
}

.toggleNav::after {
  content: "\002B";
  position: absolute;
  top: 0;
  left: auto;
  right: 0;
}

.collapsibles:after {
  content: "\002B";
  vertical-align: top;
}

.collapsible2:after {
  content: "\002B";
  vertical-align: top;
}

.collapsibleKaotim:after {
  content: "\002B";
  vertical-align: top;
}

div.parent_collapsibles > .collapsibles.active {
   background-color:#F7F7F7;
   margin-top:2rem;
   border-top-left-radius: 2em;
   border-top-right-radius: 2rem;
   transition: background-color 1s ease-out;
}

.collapsibles.active + .collapsibles__content-1, .collapsible2.active + .collapsibles__content-1, .collapsibleKaotim.active + .collapsibles__content-1 {
   background-color:#F7F7F7;
   border-bottom-left-radius: 15px;
   border-bottom-right-radius: 15px;
   transition: background-color 1s ease-out;
}
.collapsible2.active {
  background-color: #F7F7F7;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  transition: background-color 1s ease-out;
}

.collapsibleKaotim.active {
  background-color: #F7F7F7;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  transition: background-color 1s ease-out;
}

.active:after {
  content: "\2212";
  vertical-align: top;
}

/* ANIMATION */

/* @keyframes imageZoomIn {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.1);
  }
}

@keyframes imageZoomOut {
  from {
    transform: scale(1.1);
  }
  to {
    transform: scale(1);
  }
} */


/*********
BOD Images
**********/

.collapsible__parent {

}

.collapsible__parent:hover .collapsible__image {
  transform: scale(1.1);
}

.image__positioning {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -10;
}