/* RTL version of custom.css */

/* Arabic Font - Cairo */
body,
html {
  font-family: 'Cairo', 'Open Sans', sans-serif !important;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: 'Cairo', 'Dosis', sans-serif !important;
}

button,
input,
select,
textarea,
.btn,
.form-control,
.dropdown-item {
  font-family: 'Cairo', 'Open Sans', sans-serif !important;
}

/* #region RTL Input Text and Placeholder Alignment */
/* Fix input text alignment in RTL mode */
input,
textarea,
select,
.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"] {
  text-align: right;
  direction: rtl;
}

/* Fix placeholder alignment in RTL mode */
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder,
select::-webkit-input-placeholder {
  text-align: right;
  direction: rtl;
}

input::-moz-placeholder,
textarea::-moz-placeholder,
select::-moz-placeholder {
  text-align: right;
  direction: rtl;
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder,
select:-ms-input-placeholder {
  text-align: right;
  direction: rtl;
}

input:-moz-placeholder,
textarea:-moz-placeholder,
select:-moz-placeholder {
  text-align: right;
  direction: rtl;
}

input::placeholder,
textarea::placeholder,
select::placeholder {
  text-align: right;
  direction: rtl;
}

/* Ensure form controls have proper RTL alignment */
.form-control::-webkit-input-placeholder {
  text-align: right;
  direction: rtl;
}

.form-control::-moz-placeholder {
  text-align: right;
  direction: rtl;
}

.form-control:-ms-input-placeholder {
  text-align: right;
  direction: rtl;
}

.form-control:-moz-placeholder {
  text-align: right;
  direction: rtl;
}

.form-control::placeholder {
  text-align: right;
  direction: rtl;
}
/* #endregion RTL Input Text and Placeholder Alignment */

/* #region RTL Directional Font Awesome Icons */
/* Flip horizontal directional icons in RTL mode */

/* Arrow Icons */
.fa-arrow-left:before,
.fa-arrow-right:before,
.fa-long-arrow-left:before,
.fa-long-arrow-right:before,
.fa-long-arrow-alt-left:before,
.fa-long-arrow-alt-right:before,
.fa-arrow-circle-left:before,
.fa-arrow-circle-right:before,
.fa-arrow-alt-circle-left:before,
.fa-arrow-alt-circle-right:before {
  transform: scaleX(-1);
  display: inline-block;
}

/* Angle Icons */
.fa-angle-left:before,
.fa-angle-right:before,
.fa-angle-double-left:before,
.fa-angle-double-right:before {
  transform: scaleX(-1);
  display: inline-block;
}

/* Chevron Icons */
.fa-chevron-left:before,
.fa-chevron-right:before,
.fa-chevron-circle-left:before,
.fa-chevron-circle-right:before {
  transform: scaleX(-1);
  display: inline-block;
}

/* Caret Icons */
.fa-caret-left:before,
.fa-caret-right:before,
.fa-caret-square-left:before,
.fa-caret-square-right:before {
  transform: scaleX(-1);
  display: inline-block;
}

/* Hand Point Icons */
.fa-hand-point-left:before,
.fa-hand-point-right:before {
  transform: scaleX(-1);
  display: inline-block;
}

/* Other Directional Icons */
.fa-reply:before,
.fa-share:before,
.fa-mail-reply:before,
.fa-mail-forward:before,
.fa-sign-in:before,
.fa-sign-out:before,
.fa-sign-in-alt:before,
.fa-sign-out-alt:before,
.fa-external-link:before,
.fa-external-link-alt:before,
.fa-external-link-square:before,
.fa-external-link-square-alt:before,
.fa-level-up:before,
.fa-level-down:before,
.fa-level-up-alt:before,
.fa-level-down-alt:before,
.fa-undo:before,
.fa-redo:before,
.fa-undo-alt:before,
.fa-redo-alt:before,
.fa-backward:before,
.fa-forward:before,
.fa-step-backward:before,
.fa-step-forward:before,
.fa-fast-backward:before,
.fa-fast-forward:before {
  transform: scaleX(-1);
  display: inline-block;
}

/* Indent/Outdent Icons */
.fa-indent:before,
.fa-outdent:before,
.fa-dedent:before {
  transform: scaleX(-1);
  display: inline-block;
}

/* List Icons */
.fa-list-ul:before,
.fa-list-ol:before {
  transform: scaleX(-1);
  display: inline-block;
}

/* Quote Icons */
.fa-quote-left:before,
.fa-quote-right:before {
  transform: scaleX(-1);
  display: inline-block;
}
/* #endregion RTL Directional Font Awesome Icons */

.card {
  --bs-card-border-radius: 0.75rem;
}

.account-button {
  background-color: #ea7066;
  box-shadow: 0 0.25rem 0 rgba(0, 0, 0, 0.1);
  border: var(--bs-border-width) solid var(--bs-navbar-toggler-border-color);
  padding: var(--bs-navbar-toggler-padding-y) var(--bs-navbar-toggler-padding-x);
  transition: var(--bs-navbar-toggler-transition);
  border-radius: 0.25rem;
  font-size: var(--bs-navbar-toggler-font-size);
  line-height: 1;
}

.iti {
  width: 100%;
  text-align: right;
}

.navbar .navbar-brand {
  padding: 0;
}

@media (min-width: 768px) {
  .navbar .navbar-brand {
    padding: 10px 0;
  }
}

/* #region Counters */
#counter .counter-value {
  width: 145px;
  height: 145px;
  border-radius: 100%;
  border: 4px solid darkgray;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 22px;
  font-size: 1.4rem;
  font-weight: 500;
}

@media (min-width: 768px) {
  #counter .counter-value {
    font-size: 2rem;
  }
}

.rounded-sm {
  border-radius: 0.4rem !important;
}
/* #endregion Counters */

/* #region Parallax */
.bg-parallax {
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-image: linear-gradient(rgba(255,255,255,0.8), rgba(255,255,255,0.8)), url("/assets/img/parallax-bg-1.jpg");
}
/* #endregion Parallax */


/* #region Testimonials */
.bg-testimonial {
  background-image: url(/assets/img/background/avator-bg.png);
}
/* #endregion Testimonials */

/* RTL: Flip left to right */
.slider-overlay-white-20 {
  position: absolute;
  top: 0;
  right: 0; /* Changed from left */
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.2);
  z-index: 1;
}

.slider-overlay-white-40 {
  position: absolute;
  top: 0;
  right: 0; /* Changed from left */
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.4);
  z-index: 1;
}

.slider-overlay-black-20 {
  position: absolute;
  top: 0;
  right: 0; /* Changed from left */
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.slider-overlay-black-40 {
  position: absolute;
  top: 0;
  right: 0; /* Changed from left */
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  z-index: 1;
}



/* #region Bootstrap Extensions - RTL: Flip left/right margins */
.mr-0 {
  margin-left: 0 !important; /* Changed from margin-right */
}

.mr-1 {
  margin-left: 0.31rem !important; /* Changed from margin-right */
}

.mr-2 {
  margin-left: 0.63rem !important; /* Changed from margin-right */
}

.mr-3 {
  margin-left: 1rem !important; /* Changed from margin-right */
}

.mr-4 {
  margin-left: 1.25rem !important; /* Changed from margin-right */
}

.mr-5 {
  margin-left: 1.56rem !important; /* Changed from margin-right */
}

.mr-6 {
  margin-left: 1.88rem !important; /* Changed from margin-right */
}

.mr-7 {
  margin-left: 3.13rem !important; /* Changed from margin-right */
}

.mr-8 {
  margin-left: 3.75rem !important; /* Changed from margin-right */
}

.mr-9 {
  margin-left: 4.96rem !important; /* Changed from margin-right */
}

.mr-10 {
  margin-left: 6.25rem !important; /* Changed from margin-right */
}

.ml-0 {
  margin-right: 0 !important; /* Changed from margin-left */
}

.ml-1 {
  margin-right: 0.31rem !important; /* Changed from margin-left */
}

.ml-2 {
  margin-right: 0.63rem !important; /* Changed from margin-left */
}

.ml-3 {
  margin-right: 1rem !important; /* Changed from margin-left */
}

.ml-4 {
  margin-right: 1.25rem !important; /* Changed from margin-left */
}

.ml-5 {
  margin-right: 1.56rem !important; /* Changed from margin-left */
}

.ml-6 {
  margin-right: 1.88rem !important; /* Changed from margin-left */
}

.ml-7 {
  margin-right: 3.13rem !important; /* Changed from margin-left */
}

.ml-8 {
  margin-right: 3.75rem !important; /* Changed from margin-left */
}

.ml-9 {
  margin-right: 4.96rem !important; /* Changed from margin-left */
}

.ml-10 {
  margin-right: 6.25rem !important; /* Changed from margin-left */
}

.w-100px {
  width: 100px !important;
}

.h-100px {
  height: 100px !important;
}

.w-150px {
  width: 150px !important;
}

.h-150px {
  height: 150px !important;
}

.w-200px {
  width: 200px !important;
}

.h-200px {
  height: 200px !important;
}

.h-400px {
  height: 400px !important;
}
/* #endregion Bootstrap Extensions */

/* #region Carousel */
.quotes-icon {
  font-size: 4.96rem !important;
}

.carousel-inner {
  /*min-height: 10rem !important;*/
}

.carousel-item {
  /*min-height: 10rem !important;*/
}

.carousel-control-prev,
.carousel-control-next {
  width: 50px;
  height: 50px;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 10px;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease-in-out, background-color 0.3s;
  top: 50%;
  transform: translateY(-50%);
}

.carousel:hover .carousel-control-prev,
.carousel:hover .carousel-control-next {
  opacity: 1;
}

.carousel:not(:hover) .carousel-control-prev,
.carousel:not(:hover) .carousel-control-next {
  opacity: 0;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
  background-image: none !important;
  width: auto;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* RTL: Flip carousel arrows */
.carousel-control-prev-icon::before,
.carousel-control-next-icon::before {
  font-family: "Font Awesome 6 Pro";
  font-weight: 900;
  font-size: 24px;
  color: rgba(0, 0, 0, 0.4);
}

.carousel-control-prev-icon::before {
  content: "\f105"; /* Changed: right arrow for prev in RTL */
}

.carousel-control-next-icon::before {
  content: "\f104"; /* Changed: left arrow for next in RTL */
}

.carousel-control-prev:hover,
.carousel-control-next:hover {
  background-color: rgba(255, 255, 255, 1);
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.3);
}

.carousel-control-prev:hover .carousel-control-prev-icon::before,
.carousel-control-next:hover .carousel-control-next-icon::before {
  color: rgba(0, 0, 0, 0.7);
}


.carousel-item .blockquote p {
  display: -webkit-box;
  -webkit-line-clamp: 3; /* Limit text to 3 lines */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis; /* Add ellipsis for overflow text */
  height: 4.5em; /* Adjust height based on your line-height */
  line-height: 1.5em; /* Adjust line-height to match your design */
}

/* #endregion Carousel */