/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Jul 26 2025 | 19:35:35 */
/* General styles */
.carousel-item {
  position: relative;
  width: 100%;
}

.carousel-item img {
  width: 100%;
  height: auto;
  display: block;
}

.carousel-caption {
  position: absolute;
  top: 30%;
  left: 10%;
  transform: translateY(-30%);
  color: white;
  text-align: left;
  width: auto;
}

.carousel-caption h3 {
  font-size: 6vh;
  max-width: 40vw !important;
  font-weight: bold;
  margin-bottom: 2vh;
  color: white !important;
}

.carousel-caption p {
  font-size: 3.6vh;
  line-height: 1.4;
  max-width: 40vw;
  color: white !important;
}

.carousel-indicators {
  bottom: 1rem;
}

.carousel-indicators [data-bs-target] {
  background-color: #ffffff;
  width: 2vh;
  height: 2vh;
  border-radius: 50%;
  opacity: 0.7;
}

.carousel-indicators .active {
  opacity: 1;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  padding: 1rem;
}

.carousel-control-prev,
.carousel-control-next {
  width: 5%;
}

.visually-hidden-focusable:not(:focus):not(:focus-within):not(caption),
.visually-hidden:not(caption) {
  position: absolute !important;
}

.visually-hidden,
.visually-hidden-focusable:not(:focus):not(:focus-within) {
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Mobile-specific styles */
@media (max-width: 768px) {
  .carousel-item {
    height: 60vh;
    overflow: hidden;
  }

  /* Default mobile styles (portrait or unspecified orientation) */
  .carousel-item img {
    width: 200%;
    height: 100%;
    object-fit: cover;
    object-position: left center;
  }

  /* Mobile landscape-specific styles */
  @media (orientation: landscape) {
    .carousel-item img {
      width: 300%;
      height: 100%;
      object-fit: cover;
      object-position: left center;
    }
	.carousel-caption {
        padding-left: 5% !important;
        width: 40% !important;
    }
  }

  .carousel-caption {
    top: 30%;
    left: 10%;
    text-align: center;
    width: 90%;
  }

  .carousel-caption h3 {
    font-size: 3.5vh;
  }

  .carousel-caption p {
    font-size: 2vh;
    max-width: 100%;
  }
}

/* RTL styles for non-mobile devices */
@media (min-width: 769px) {
  [dir="rtl"] #customCarousel {
    direction: rtl !important;
    text-align: right !important;
  }
  [dir="rtl"] #customCarousel img {
    transform: scaleX(-1) !important;
  }
  [dir="rtl"] .carousel-item,
  [dir="rtl"] .carousel-item h3,
  [dir="rtl"] .carousel-item p {
    direction: rtl !important;
    text-align: right !important;
  }
  [dir="rtl"] .carousel-item p {
    font-size: 2.3vh !important; /* custom slider */
  }
}

@media (max-width: 768px)
{
	[dir="rtl"] .carousel-item p {
    font-size: 1.8vh !important;
  }
	[dir="rtl"] .carousel-item h3{
		font-size: 2.7vh !important;
	}	
}