/* Custom style to make the indicators circular */
.carousel-indicators button {
    width: 12px !important;
    height: 12px !important;
    border-radius: 50%;
    background-color: #000;
    /* You can change the color here */
}


.carousel-indicators .active {
    background-color: #fff;
    /* Color for the active indicator */
}

.rectangle {
    height: 60vh;
    overflow: hidden;
    position: relative;
}

.rectangle img {
    width: 100%;
    object-fit: cover;
    clip-path: inset(0);
}


.line-div {
    background-color: var(--bs-secondary);
    height: 10px;

    width: 30%;
}


.img-right-div1 {
    display: none !important;
}

.img-right-div2 {
    display: block !important;
}


@media (max-width: 992px) {

    #carouselExampleIndicators{
  max-height: 400px !important;

    }
    .rectangle img {
        max-height: 400px !important;

    }


    .img-right-div1 {
        display: block !important;
    }

    .img-right-div2 {
        display: none !important;
    }


}


@media (max-width: 576px) {

    #carouselExampleIndicators{
        max-height: 200px !important;

          }
          .rectangle img {
              max-height: 200px !important;

          }

}