#banner-slider{
    background-image: url(https://silkskindoctor.com/wp-content/uploads/2022/08/Group-6702.svg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    padding-top:60px;
    width:100%;
    align-items: center;
   
    
}
.elementor-element-83332c6{
    padding:0px !important;
}
.container-90{
    width:80% !important;
    margin:0 auto;
    left:20;
}

.carousel-inner {
    align-items: center;
    min-height: 90vh;
}
  /* Optionally, make sure that each slide also takes up full height */
  .carousel-item {
    height: 90vh;      /* Each slide will take the full height of the viewport */
    min-height: 90vh;
    overflow:hidden;
  }

.carousel-control{
    background:none !important;
    color:#333333;
    box-shadow:none;
}
.carousel-control > span{
    background:none !important;
    color:#333333;
}

.banner-content {
    padding: 0px;
    color: #fff;
}

.banner-image img {
    border-radius: 10px;
}


.carousel-control-prev-icon svg,
.carousel-control-next-icon svg {
  color: #333333; /* Example: red color */
  width: 40px;
  height: 40px;
}

.left-content > h3 {
    font-size:66px !important;
    line-height:76px;
}

.bottom-image {
    position: absolute;
    bottom: 0; /* Align to the bottom */
    right: 20;  /* Align to the right */
    width: auto; /* Adjust width */
    height: 450px; /* Set a fixed height or adjust as needed */
    object-fit: cover; /* Ensure the image covers the set height */
  }

  .left-content{
    margin-top:25% !important;
  }
  .fa-dots{
    min-height:10px;
  }
  .image-container {
    position: relative;
    width: 100%;  /* You can adjust the width */
    height: 100vh;  /* Set height to suit your needs */
    overflow: hidden;  /* Ensures no overflow from the container */
}

.background-image {
    position: absolute;
    width: 100% !important;
    height: 50% !important;
    object-fit: cover;  /* Ensures the image fills the container */
    object-position: left center;
    z-index: 1;  /* Keeps this image in the background */
    bottom: 350px;
}

.foreground-image {
    position: absolute;
    bottom: 150px;  /* Adjust the position of the foreground image */
    right: 20px;   /* Adjust the position of the foreground image */
    width: 100% !important;    /* Adjust the size of the foreground image */
    height: 70% !important;
    object-fit: cover;  /* Ensures the image fills the container */
    object-position: right center;
    z-index: 2;    /* Ensures this image appears on top of the background */
}


@media (max-width: 600px) {
  .container-90{
    width:90% !important;
    margin:0 auto;
    left:20;
}
.left-content{
  padding-right:20%;
}

.left-content > h3 {
  font-size:38px !important;
  line-height:48px !important;
}

.elementor-9407 .elementor-element.elementor-element-7461211 > .elementor-widget-container {
  float: left;
}


  .background-image {
    position: absolute;
    width: 100% !important;
    height: 70% !important;
    object-fit: cover;  /* Ensures the image fills the container */
    object-position: left center;
    z-index: 1;  /* Keeps this image in the background */
    bottom: 150px;
}


  .foreground-image {
    bottom: 50px;        /* Adjust the bottom for smaller screens */
    right: 10px;         /* Adjust the right position for smaller screens */
    object-position: center center; /* On mobile, center the image both vertically and horizontally */
    height: 70% !important; /* Adjust height for mobile */
  }

  .image-container {
    height: 70vh;  /* Set height to suit your needs */
    overflow: hidden;  /* Ensures no overflow from the container */
}

.carousel-inner {
  align-items: center;
  min-height: 70vh;
}
.carousel-item {
  height: 70vh;      /* Each slide will take the full height of the viewport */
  min-height: 70vh;
  overflow:hidden;
}

}