slider2.scss

#component {
  position: relative;


  #slider-component-2 {
    background: $outer_bg_color;
    padding: 40px 0;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: $background_horizontal_position $background_vertical_position;
    width: 100%;
    height: 100%;
    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(255, 255, 255, 0.5); /* Adjust the color and opacity as needed */
    }
      
  }

  .carousel-inner {
    width: 70%;
    margin: 60px auto;
    overflow: unset !important;

    .carousel-item{
      margin-top: 2rem;
      background: white;
      height: 100%;
      border: 1px solid #ddd;

      .carousel-content {
        border: 1px solid #ddd;
        background: #fff;
        margin: auto;
        height: 100%;
              
        .img-fluid {
          max-width: 100%;
          object-fit: cover;
          width: 100%;
        }
            
        .author_review {
          margin: 40px;
        }
      
        /* Default styles */
        .dynamic-row {
          display: flex;
          flex-direction: row;
          background-color: $testimonial_box_background_colour;
          box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
        }
        .dynamic-column {
          display: flex;
        }

        /* Desktop */
        @media (min-width: 768px) {
            .dynamic-column {
                display: flex;
              
                &:first-child {
                    width: $horizontal_split_ratio;
                }
    
              &:last-child {
                width: 100% - $horizontal_split_ratio;
              }
              &:only-child {
                  width: 100%;
                }
            }
        }

        /* Mobile */
        @media(max-width: 768px) {
          .dynamic-row {
            display: flex;
            flex-direction: column;
          }
          .dynamic-column {
            display: flex;
            width: auto;
            text-align: center;
          }
        }
      }
    }
  }

  ol.indicators {
    width: 60%;
    margin: 0 auto;
    padding: 0;
    list-style-type: none!important;
    position: relative;
    cursor: pointer;
    li {
      width: 20px;
      display: inline-block;
      height: 20px;
      border-radius: 20px;
      margin: 0 3px;
        .svg-inline--fa {
          width: 20px;
          display: inline-block;
          height: 20px;
          border-radius: 20px;
          color: $indicator_color;
        }
    }

    li.active {
      .svg-inline--fa {
        color: $indicator_active_color!important;
      }
    }
    :hover {
      .svg-inline--fa {
      color: $hover_color;
      }
    }
  }

  .carousel-control-next,
  .carousel-control-prev {
    color: $chevron_color;
    width: 25px;
    opacity: 1;
    .carousel-control-icon-slider-2 {
      width: 100px;
      height: 100px;
    }
    &:hover {
      color: $hover_color;
    }
  }

  .carousel-control-prev {
    left: 7%;
    top: 60px;
    width: 80px;
  }

  .carousel-control-next {
    right: 7%;
    top: 60px;
    width: 80px;
  }
}