/* Place Your Custom Styles Here */
@media (min-width: 1200px) {
    .footer-img{
        right: 145px;
        margin-top: 83px;
        position: absolute;
    }
  }

.arabic{
    display: block;
    margin-left: auto;
    margin-right: 0;
}  

#background-video
{  object-fit: cover;
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;}

#background-video1
{ 
     object-fit: cover;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    z-index: -2;
}
#logo{
    max-height: 3rem;
}
/* a:hover{
    color: #18B4E9 !important;
} */
.right{
    margin: auto;
}
/* p{
    text-align: justify;
    letter-spacing: 0px;
    line-height: 1.8;
  
} */
.font-size-25{
    font-size: 25px;
}
.font-size-1rem{
    font-size: 1rem;
}

.nav-item{
    text-align: center;
}

.right-section{
    flex-direction: column;
    align-content: flex-end;
    align-items: flex-end;
}





.accordion-section .panel-default .panel-title a.collapsed:after{
    float: left;
  }
  .accordion-section .panel-default .panel-title a:after{
    float: left;
  }
  /* Add RTL styles */
  .rtl-container {
    direction: rtl;
  }

  .panel-title {
    text-align: left;
  }

  .panel-title a::before {
    float: right; /* Change float to right */
    margin-left: 10px; /* Adjust margin left instead of margin right */
  }

/* 
  input[type="text"]::placeholder {
    text-align: left; 
}


input[type="text"][dir="rtl"]::placeholder {
    text-align: right;
} */



.bidi-input {
    text-align: left; /* Align input text to left */
}

.bidi-input::placeholder {
    text-align: center; /* Center align placeholder text */
}

.label-container {
    color:white;
    display: flex;
    justify-content: space-between;
}

.label-container span {
    flex-grow: 1;
    white-space: nowrap;
}

.label-container span.arabic {
    text-align: right;
}
sup {

    font-size: 50%;
    color: #192449;


}


#carouselExampleIndicators { position: relative; }

/* 1) Indicators: bottom-left row */
#carouselExampleIndicators .carousel-indicators {
  position: absolute;
  left: auto;              /* distance from left edge */
  right: auto;
  bottom: 1rem;            /* baseline */
  margin: 0;
  display: flex;
  align-items: center;
  gap: .1rem;
  justify-content: flex-start;
}

/* dot styling (small, subtle) */
#carouselExampleIndicators .carousel-indicators [data-bs-target] {
  width: 8px;
  height: 9px;
  /* border-radius: 50%; */
  background-color: rgba(255,255,255,.45);  /* inactive */
  opacity: 1;                                /* ignore BS default fading */
}
#carouselExampleIndicators .carousel-indicators .active {
  background-color: #C4984F; /* your “Brown” brand gold */
  width: 29px;
}

/* 2) Arrows: bottom-right row (next at far right, prev before it) */
#carouselExampleIndicators .carousel-control-prev,
#carouselExampleIndicators .carousel-control-next {
  position: absolute;
  top: auto;
  bottom: 2rem;           /* align with indicators baseline */
  transform: none;         /* cancel BS centering */
  width: 80px;

  opacity: 1;              /* always visible; remove if you prefer hover-only */
  z-index: 5;
}
#carouselExampleIndicators .carousel-control-next { right: 4rem; }
#carouselExampleIndicators .carousel-control-prev { right: 14.25rem; }

/* optional: make the chevrons slightly smaller & crisp */
#carouselExampleIndicators .carousel-control-prev-icon,
#carouselExampleIndicators .carousel-control-next-icon {
  width: 1.5rem;
  height: 1.5rem;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.35)); /* subtle contrast on bright images */
}









/* 3) Responsive tweaks */
@media (max-width: 767.98px) {

  
  #carouselExampleIndicators .carousel-indicators {
    left: .75rem;
    bottom: .6rem;
    gap: .2rem;
  }
  #carouselExampleIndicators .carousel-indicators [data-bs-target] {
    width: 9px;
    height: 9px;
  }

  #carouselExampleIndicators .carousel-indicators .active {
    width: 29px;
  }


  #carouselExampleIndicators .carousel-control-next { right: 1rem; bottom: 1.5rem; }
  #carouselExampleIndicators .carousel-control-prev { right: 6.25rem; bottom: 1.5rem; }
  #carouselExampleIndicators .carousel-control-prev-icon,
  #carouselExampleIndicators .carousel-control-next-icon {
    width: 1.25rem; height: 1.25rem;
  }




  #carouselExampleIndicators .carousel-control-prev.ar {
    left: 0.25rem!important;
    right: auto;
}


#carouselExampleIndicators .carousel-control-next.ar {
    left: 4.25rem!important;
    right: auto;
}

  

}


.carousel-control-prev {
    left: auto;
}


.carousel-caption{
    left: 20px;
    right: 20px;
}










/* 3) Responsive tweaks */
@media (max-width: 767.98px) {


  /* 1) Indicators: bottom-left row */
#carouselExampleIndicators .carousel-indicators.ar {

  right: 4%!important;              /* distance from left edge */

  bottom: 0rem!important;            /* baseline */
  
}



}


/* 1) Indicators: bottom-left row */
#carouselExampleIndicators .carousel-indicators.ar {
    position: absolute;
    right: 0px;              /* distance from left edge */
    left: auto;
    bottom: 0.5rem;            /* baseline */
    margin: 0;
    display: flex;
    align-items: center;
    gap: .1rem;
    justify-content: flex-start;
  }


  #carouselExampleIndicators .carousel-control-next.ar { left: 4rem; }
#carouselExampleIndicators .carousel-control-prev.ar { left: 10.25rem; }



.carousel-control-prev.ar {
    left: 14px;
    right: auto;
}

#carouselExampleIndicators .carousel-control-prev.ar {
    left: 5.25rem;
    right: auto;
}


#carouselExampleIndicators .carousel-control-next.ar {
    left: 14.25rem;
    right: auto;
}





.carousel-indicators [data-bs-target] {
  position: relative;
  margin: 4px;
}

.carousel-indicators [data-bs-target]::before {
  content: "";
  position: absolute;
  top: -8px;
  left: -8px;
  right: -8px;
  bottom: -8px;
}