.banner {
  width: 100%;
  overflow: hidden;
  padding-top: 8%;
  height: 81vh;
  position: relative;
}

.imgcover {
  max-width: 100%;
  width: 100%;
  height: auto;
  padding-top: 9%;
  
}

#spa-system-btn:hover{
  background-color: black;
  color: white;
}

.hero-text {
  position: initial;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  width: 100vw;
  padding: 0;
  margin-bottom: 0%;
  flex-direction: column;
  align-content: center;
  align-items: center;
  margin-right: 10px;
}

.details-container {
  padding-top: 38px;
  display: flex;
  width: 100%;
  flex-direction: column;
  position: relative;
}
.heading {
  text-align: center;
  font-size: 32px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.details-container span:nth-child(1) {
  text-align: center;
}
.image-details-grid {
  padding-top: 5%;
  display: flex;
  /* margin-left: -2%; */
  justify-content: space-around;
  align-items: center;
  /* flex-wrap: wrap; */
}

.hair-texture{
  padding-top: 0% !important;
}

.keraimage {
  padding-top: 5%;
  display: flex;
  /* margin-left: -2%; */
  /* margin-right: auto ; */
  justify-content: space-between;
  align-items: center;
  /* flex-wrap: wrap; */
}

.imageBox {
  position: relative;
}

.spashcolour,
.spashcolourleft {
  border-radius: 420.734px;
  opacity: 0.1;
  background: #a7bf48;
  width: 420.734px;
  height: 420.734px;
  filter: blur(60px);
  position: absolute;
  right: 0;
  max-width: 100%;
  max-height: 100%;
}
.spashcolourleft {
  left: 0;
}
.rev {
  margin: auto;
  width: 100%;
  flex-direction: row-reverse;
  justify-content: end;
}
.read-more-btn {
  background-color: #007bff;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  margin-top: 10px;
}

.hidden {
  display: none; /* Hide items with the 'hidden' class */
}
.read-more-btn {
  background-color: black;
  color: white; /* Add contrasting color for text visibility */
  display: flex; /* Ensure it can use flexbox for alignment */
  justify-content: center;
  align-items: center;
  font-size: 1rem;
  font-family: "Questrial", sans-serif;
  padding: 10px 20px; /* Add some padding for a better button appearance */
  border: none; /* Remove default borders */
  border-radius: 5px; /* Optional: Add rounded corners */
  cursor: pointer; /* Indicate it's clickable */
  margin: auto;
  margin-top: 10px; /* Center it horizontally */
}

.width {
 
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 24px;
    margin-left: 5.5%;
}

.botosmooth-width{
  margin-left: 5.6%;
}
.imagewidth {
  width: 50% !important;
}
.text-box {
  width: 60%;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 24px;
  padding-right: 3.3%;
}

.text-box-span {
  margin-top: -15px;
}

.detail-row {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
/* .text-box img {
    transform: rotate(90deg);
    position: relative;
    left: 110px;
} */
.col1 svg {
  width: 26.67px;
  height: 26.33px;
}

.c1,
.c2,
.c3,
.c4 {
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
}
.c1 {
  color: #019dca;
}
.red {
  color: red !important;
}
.color {
  color: black !important;
}
.c2 {
  color: #955299;
}
.c3 {
  color: #018e5b;
}
.c4 {
  color: #d69308;
}

.reverse {
  flex-direction: row-reverse;
  justify-content: end;
}
.sm {
  position: absolute;
  right: 0;
  mix-blend-mode: multiply;
}
.bg {
  position: absolute;
  right: 0;
  mix-blend-mode: multiply;
  bottom: 5%;
}
.bg img {
  height: 200px;
  max-height: 100%;
}

.cnt2 {
  position: relative;
   margin-top: -2%; 
}

.imgDiv img {
  width: 100%;
  z-index: 1;
}
.spa {
  position: relative;
  width: 100%; /* Adjust width as needed */
}

.content {
  mix-blend-mode: multiply;
  position: absolute;
  top: 26%;
  left: 5%;
  background-color: rgba(255, 255, 255, 0.7);
  padding: 10px;
  border-radius: 5px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.content img:nth-child(1) {
  /* width: 100px; */
  width: 200px;
  height: 75px;
}
.content span {
  width: 471.482px;
  font-size: 24px;
  font-weight: normal;
}
.content button {
  display: flex;
  height: 43.987px;
  padding: 14px 32px;
  justify-content: center;
  align-items: center;
  background: transparent;
  width: 154px;
}

.content img {
  mix-blend-mode: multiply;
}

.spa img {
  width: 100%;
}
.faq-div {
  display: flex;
  justify-content: center;
}
.containerr {
  display: flex;
  align-items: flex-start;
  gap: 27px;
  justify-content: start;
  padding: 56px 0;
  width: 90%;
  height: auto;
  margin-left: 10px;
}
.faq-sectionn {
  width: 70%;
}
.faq-sectionn h2 {
  font-size: 32px;
  margin-bottom: 20px;
  width: max-content;
}

.accordion1 {
  border-top: 1px solid #ccc;
}
.accordion-item1 {
  border-bottom: 1px solid #ccc;
}
.accordion-button1 {
  width: 100%;
  background-color: #fff;
  border: none;
  padding: 1em 0;
  text-align: left;
  font-size: 1.1em;
  cursor: pointer;
  outline: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.accordion-button1:after {
  content: "+";
  font-size: 1.2em;
}
.accordion-button1.active:after {
  content: "-";
}
.accordion-content1 {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}
.accordion-content1 ul {
  padding-left: 16px;
}
.accordion-content1 p {
  margin: 1em 1em;
}
.line {
  filter: invert(0) !important;
  background-color: transparent !important;
}
@media (max-width: 1024px) and (min-width: 600px) {
  .imgcover {
      margin-top: 12% !important;
      height: auto;
      width: 100%;
  }
}
@media (max-width: 768px) {
  .imgcover {
      margin-top: 16% !important;
      height: auto;
      width: 100%;
  }
}
@media (max-width: 730px) and (min-width: 932px) {
  .imgcover {
      margin-top: 12% !important;
      height: auto;
      width: 100%;
  }
}
@media (max-width: 820px) {
  .imgcover {
      margin-top: 3% !important;
      height: auto;
      width: 100%;
  }
}

@media screen and (max-width: 600px) {
  .col1 svg:first-child {
    margin-bottom: 20px;
  }
  /* .imgcover {
    height: auto;
    margin-top: 10% !important;
    width:100%;
    object-fit: fill;
  } */
  .banner {
    height: 50%;
    padding-top: 5rem;
  }
  .banner img {
    object-fit: contain;
  }
  .text-box {
    width: 100% !important;
    padding: 0 22px;
    gap: 5px;
  }
  .width{
    margin-left: 0% ;
  }
  .botosmooth-width {
    margin-left: 0% !important;
}
  .text-box .detail-desc {
    margin-bottom: 22px;
  }
  .text-box img {
    margin-bottom: 8px;
  }
  .col1 {
    align-items: start;
    width: 100%;
  }
  .c1,
  .c2,
  .c3,
  .c4 {
    text-align: start !important;
  }
  .text-box span {
    width: 100%;
  }
  .sm-text,
  .sm-text2 {
    width: 100% !important;
  }
  .content {
    position: absolute;
    padding: 10px 14%;
    top: 4%;
    left: -4px;
  }

  .content span {
    font-size: 12px;
    width: 13rem;
  }
  .top-image img {
    width: 100%;
  }
  .content button {
    width: 61%;
    padding: 0;
    height: 2.5rem;
  }
  .bg {
    top: 300px;
    bottom: 0;
    height: fit-content;
  }
  .bg img {
    width: 130px;
  }
  .detail-row {
    flex-direction: column;
  }
  .faq-container {
    width: 100%;
  }
  .faq-container h2 {
    padding: 0 16px;
  }
  .spa img {
    width: 100%;
    height: 35%;
  }
  .image-details-grid {
    flex-wrap: wrap;
    padding-top: 3%;
  }
  .image-details-grid .text-box {
    margin-top: 2rem;
  }
  .containerr {
    width: 93%;
    height: auto;
    margin: 0;
    padding: 0 16px;
  }
  .faq-sectionn {
    padding: 2rem 0;
  }
  .faq-sectionn h2 {
    font-size: 25px;
    margin-bottom: 20px;
    width: auto;
  }
  .accordion-button1 {
    font-size: 16px;
  }
}

.more-products-section {
  display: flex;
  height: auto;
  align-items: center;
  background: var(--background-colour-neutral-colour, #f2f2f2);
  flex-direction: column;
}
.more-products-section h2 {
  text-align: center;
  font-size: 32px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  margin: 48px 0;
}

@media (max-width: 1200px) and (min-width: 600px) {
  .content {
    top: 2rem;
  }
  .text-box {
    width: 100%;
    padding: 0 16px;
  }
  .image-details-grid {
    flex-wrap: wrap;
  }
  .bg {
    bottom: -5%;
  }
  .banner {
    padding-top: 8rem;
    height: 50vh;
  }
  .containerr {
    flex-direction: column;
    width: 93%;
    align-items: center;
    margin: 0;
    padding: 0 16px;
  }
  .faq-sectionn {
    width: 65%;
  }
  .detail-row .col1 {
    width: 50% !important;
    align-items: start !important;
  }
  .faq-div {
    padding-top: 2rem;
  }
}

@media (max-width: 750px) and (min-width: 600px) {
  .banner {
    padding-top: 8rem;
    height: 50vh;
  }
}


/* ---------- MOBILE VIEW ---------- */
@media screen and (max-width: 600px) {
  .image-sectionn {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 1.5rem;
    width: 100%;
  }
  .image-sectionn img {
    max-width: 100%;
    height: 90%;
    /* display: none; */
    margin: 0 auto;
  }

  /* Existing styles for FAQ responsiveness */
  .containerr {
    flex-direction: column;
    gap: 0;
    width: 93%;
    margin: 0;
    padding: 0 7px;
  }
  .faq-sectionn {
    width: 100%;
    padding: 2rem 0;
  }
}

@media (max-width: 412px) {
  .vdo {
      max-width: 100%;
      height: auto;
      margin-top: 3% !important;
      object-fit: cover;
      width: 100%;
  }
}