@tailwind base;
@tailwind components;
@tailwind utilities;
// @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Playfair+Display:wght@700;900&family=Tajawal:wght@400;500;700;900&display=swap');
@import url("https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600;700;800&display=swap");

@font-face {
  font-family: "bold";
  src: url("../fonts/RH-Zak Bold.otf");
}

@font-face {
  font-family: "semibold";
  src: url("../fonts/RH-Zak\ Reg.otf");
}

@font-face {
  font-family: "regular";
  src: url("../fonts/RH-Zak\ Thin.otf");
}

@font-face {
  font-family: "mainTitle";
  src: url("../fonts/DG Tebian Regular.ttf");
}

*,
::after,
::before {
  box-sizing: border-box;
  outline: none;
  box-shadow: none;
}

::-webkit-scrollbar {
  width: 5px;
}

::-webkit-scrollbar-thumb {
  background: #777;
}

::-webkit-scrollbar-thumb:hover {
  background: #555;
}

.scroll-none::-webkit-scrollbar {
  width: 0px;
}

.white-space {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  position: relative;
}

.montserrat {
  font-family: "Montserrat", sans-serif;
}

body,
html {
  font-size: 62.5%;
  overflow-y: auto;
  scroll-behavior: smooth;
}

body {
  font-size: 1.6rem;
  overflow: hidden;
  max-width: 2700px;
  margin: 0 auto;
  background: url(../images/pattern.png) no-repeat center center fixed;
}

html[dir="rtl"] {
  font-family: "regular";

  .playfair {
    font-family: "mainTitle", serif;
  }

  .react-calendar,
  .react-calendar * {
    font-family: "regular";
  }
}

html[dir="ltr"] {
  font-family: "Montserrat", sans-serif;

  .react-calendar,
  .react-calendar * {
    font-family: "Montserrat", sans-serif;
  }

  .playfair {
    // font-family: 'Playfair Display', serif;
    font-family: "Kanit", sans-serif;
  }

  .slick-slider.center.slick-initialized {
    direction: rtl;
  }
}

.event {
  * {
    transition: all 0.5s ease-in-out;
  }

  &:hover {
    .description {
      height: 7.5rem;
      opacity: 1;
    }
  }
}

.lines {
  box-orient: vertical;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 1;

  &.two {
    -webkit-line-clamp: 2;
  }

  &.three {
    -webkit-line-clamp: 3;
  }

  &.four {
    -webkit-line-clamp: 4;
  }

  &.five {
    -webkit-line-clamp: 5;
  }

  &.seven {
    -webkit-line-clamp: 7;
  }
}

.offerCard {
  * {
    transition: all 0.5s ease-in-out;
  }

  &:hover {
    .bg-blue {
      height: 100%;
    }
  }
}

.react-calendar {
  width: 100% !important;
  max-width: 100% !important;
  background: white !important;
  border: 0 !important;
  font-family: Arial, Helvetica, sans-serif !important;
  line-height: 2.8 !important;
  margin: 0 auto !important;
  box-shadow: 0px 4px 40px 0px rgba(0, 0, 0, 0.1) !important;
}

.react-calendar__navigation button:enabled:hover,
.react-calendar__navigation button:enabled:focus {
  background-color: #fff;
}

span.react-calendar__navigation__label__labelText.react-calendar__navigation__label__labelText--from {
  font-weight: bold !important;
}

.react-calendar__tile--now {
  background: transparent !important;
  color: #000 !important;
}

button.react-calendar__tile.react-calendar__month-view__days__day.purple {
  background: #c173ff !important;
  color: #fff !important;
  font-weight: bold;
}

button.react-calendar__tile.react-calendar__month-view__days__day.green {
  background: #018115 !important;
  color: #fff !important;
  font-weight: bold;
}

button.react-calendar__tile.react-calendar__month-view__days__day.blue {
  background: #014a81 !important;
  color: #fff !important;
  font-weight: bold;
}

button.react-calendar__tile.react-calendar__month-view__days__day.pink {
  background: #e7038b !important;
  color: #fff !important;
  font-weight: bold;
}

button.react-calendar__tile.react-calendar__month-view__days__day.orange {
  background: #ff7373 !important;
  color: #fff !important;
  font-weight: bold;
}

// .react-calendar__tile:disabled {
//      background-color: transparent !important
// }
.react-calendar__month-view__weekdays__weekday,
.react-calendar button {
  background: #f9f9f9 !important;
  border: 2px solid #fff !important;
  padding: 14px 0 !important;
}

.react-calendar__month-view__days__day--weekend {
  color: #000 !important;
}

button.react-calendar__navigation__arrow.react-calendar__navigation__prev2-button,
button.react-calendar__navigation__arrow.react-calendar__navigation__next2-button {
  display: none;
}

.react-calendar__navigation button {
  background: none !important;
  flex-grow: unset !important;
}

.react-calendar__navigation {
  align-items: center;
  justify-content: center;
}

button.react-calendar__navigation__arrow.react-calendar__navigation__prev-button,
button.react-calendar__navigation__arrow.react-calendar__navigation__next-button {
  font-size: 3rem;
  color: #014a81;
}

.react-calendar__viewContainer {
  padding-inline: 2rem;
  padding-bottom: 2rem;
}

.slick-active.slick-center {
  transform: scale(1.1);
}

.slick-arrow.slick-next,
.slick-arrow.slick-prev {
  svg {
    margin-top: -2rem;
    z-index: 9;
    position: relative;
  }
}

.slick-prev,
.slick-next {
  transform: translateY(-50%) !important;
}

.img {
  max-width: 80%;
  /* Set a maximum width for the image to 80% of its container's width. */
  height: auto;
  /* Allow the image's height to adjust automatically to maintain the original aspect ratio. */
  margin: 0 auto;
  /* Center the image horizontally within its container. */
}

@media screen and (min-width: "768px") {
  .aboutBanner {
    background: url("../images//horse.png") no-repeat top right;
  }
}

html[dir="ltr"] {
  .slick-prev {
    left: 0 !important;
  }

  .slick-next {
    right: 10px !important;
  }
}

.slick-slider .slick-list {
  width: 96% !important;
  margin: 0 auto !important;
  direction: ltr;
}

.video-react {
  height: 25rem !important;
}

// .video-react-controls-enabled,
// .video-react-controls-enabled.video-react-paused.video-react-fluid.video-react-user-active.video-react-workinghover.video-react,
// .video-react-controls-enabled.video-react-has-started.video-react-playing.video-react-fluid.video-react-user-inactive.video-react-workinghover.video-react,
// .video-react-controls-enabled.video-react-paused.video-react-fluid.video-react-user-inactive.video-react-workinghover.video-react {
//      padding: 0!important;
//  }

.bookingLesson {
  .react-calendar__viewContainer {
    padding: 0 !important;
  }

  .react-calendar {
    position: relative;
    overflow: hidden;
  }

  .react-calendar__month-view__weekdays__weekday,
  .react-calendar button {
    background: #fff !important;
    border: 0px solid #fff !important;
    padding: 10px 0 !important;
    color: #555 !important;
  }

  .react-calendar {
    width: 100% !important;
    max-width: 100% !important;
    background: white !important;
    border: 0 !important;
    font-family: Arial, Helvetica, sans-serif !important;
    line-height: 2.8 !important;
    margin: 0 auto !important;
    box-shadow: none !important;
  }

  button.react-calendar__tile.react-calendar__month-view__days__day.disabled-day {
    background: #f5f5f5 !important;
    cursor: pointer !important;
    border-bottom: 1px solid #fff !important;
  }

  .bookingLesson .react-calendar__month-view__weekdays__weekday {
    padding: 0 !important;
  }

  .react-calendar__navigation {
    display: none !important;
  }

  button.selected-day,
  button.react-calendar__tile.react-calendar__tile--active.react-calendar__tile--range.react-calendar__tile--rangeStart.react-calendar__tile--rangeEnd {
    background: #014a81 !important;
    color: #fff !important;
  }
}

.react-calendar,
.react-calendar * {
  text-decoration: none;
}

[dir="rtl"] .eventSlider .slick-next {
  right: auto;
  left: 0 !important;
}
[dir="rtl"] .eventSlider .slick-prev {
  right: 10px !important;
  left: auto;
}

.map-image {
  width: 75px;
  height: 75px;
}

/* Styles for mobile screens (up to 767px wide) */
@media (max-width: 767px) {
  .map-image {
    width: 50px;
    height: 50px;
  }
}