@import "tailwindcss";

@theme {
  --font-poppins: "Poppins", sans-serif;
  --font-caveat: "Caveat", sans-serif;

  --color-primary: #ee3c72;
  --color-secondary: #3F8E8F;
  --color-secondary-lighter: #D5E6E7;
  --color-secondary-darker: #2f6b6c;

  --color-grey-50: #fafafa;
  --color-grey-200: #eeeeee;
  --color-grey-300: #E0E0E0;
  --color-grey-400: #BDBDBD;
  --color-grey-600: #757575;
  --color-grey-700: #616161;
  --color-grey-800: #424242;
  --color-grey-900: #212121;

  --color-teal-50: #E0F2F1;
  --color-teal-500: #44999a;
  --color-teal-600: #3c898a;

  --color-gradient-start: rgba(169, 203, 203, 0);
  --color-gradient-end: rgba(60, 137, 138, 1);
  --color-custom-light: rgba(169, 203, 203, 0);
  --color-custom-mid: #44999A;
  --color-custom-dark: #3C898A;

  --bg-custom-gradient: linear-gradient(270deg, rgba(169, 203, 203, 0) -0.64%, #44999A 34.56%, #3C898A 100%);

  --container-padding: 1rem;
  --container-screens-sm: 100%;
  --container-screens-md: 720px;
  --container-screens-lg: 960px;
  --container-screens-xl: 1140px;
  --container-screens-2xl: 1370px;
}

@keyframes slideIn {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }

  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes bounceGentle {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}

@utility container {
  margin-left: auto;
  margin-right: auto;
}

@utility container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);

  @media (width >=40rem) {
    max-width: 100%;
  }

  @media (width >=48rem) {
    max-width: 720px;
  }

  @media (width >=64rem) {
    max-width: 960px;
  }

  @media (width >=80rem) {
    max-width: 1140px;
  }

  @media (width >=96rem) {
    max-width: 1370px;
  }
}

body {
  font-family: 'Poppins';
}

.bg-custom-gradient {
  background-image: linear-gradient(270deg, rgba(169, 203, 203, 0) -0.64%, #44999A 34.56%, #3C898A 100%);
}

.container-xl {
  max-width: 1170px;
  margin: 0 auto;
  padding-left: 16px;
  padding-right: 16px;
}

.nav-link {
  @apply px-3 py-2 text-sm font-medium text-gray-800 hover:text-primary transition-colors;
}

.nav-link.active {
  color: var(--color-secondary) !important;
  font-weight: 500 !important;
}

.dropdown-item {
  @apply w-full text-left px-4 py-2 text-gray-800 hover:bg-gray-200 flex items-center space-x-2;
}

.list-disc {
  list-style-type: disc;
}

h5 {
  @apply text-2xl font-semibold text-gray-700;
}

.navigation-wrapper {
  position: relative;
}

.dots {
  display: flex;
  padding: 10px 0;
  justify-content: center;
  background-color: red;
}

.dot {
  border: none;
  width: 10px;
  height: 10px;
  background: #c5c5c5;
  border-radius: 50%;
  margin: 0 5px;
  padding: 5px;
  cursor: pointer;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 30px;
  display: none;
}

.dot:focus {
  outline: none;
}

.dot--active {
  background: #000;
}

.arrow {
  width: 30px;
  height: 30px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
}

.arrow--left,
.arrow--right {
  height: 60px;
  width: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 100%;
  background: rgba(255, 255, 255, 0.6);
  background-image: none !important;
}

.arrow--left:not(.outer) {
  left: 32px;
}

.arrow--right:not(.outer) {
  right: 32px;
}

.arrow--left.outer {
  left: -80px;
}

.arrow--right.outer {
  right: -80px;
}

.arrow--left:before,
.arrow--right:before {
  font-family: 'icomoon', serif;
  font-size: 24px;
  color: #757575;
}

.arrow--left:before {
  content: "\e908";
}

.arrow--right:before {
  content: "\e909";
}

.arrow--disabled.arrow--left,
.arrow--disabled.arrow--right {
  opacity: 0.6;
  cursor: default;
}

/* Banner Slider UI */
.slide {
  padding-bottom: 108px;
}


/* Therapy Card Icon Hover Effect */
.group:hover img {
  filter: brightness(0) invert(1);
  transition: filter 300ms ease;
}

.group img {
  transition: filter 300ms ease;
}

/* Reviews slider */
.slick-track {
    display: flex !important;
}
.slick-slide {
    height: auto !important;
}
.slide-item {
    height: 100%;
}
.slick-dots {
    bottom: 0 !important;
    position: relative !important;
}
.slick-dots li button:before {
    font-size: 12px !important;
}

/* Slider responsiveness */
@media (width < 1320px) {
    .arrow--left, .arrow--right {
        display: none !important;
    }
}

@media (width < 768px) {
    .slide {
        height: auto;
        padding-top: 24px;
        padding-bottom: 60px;
    }

    .bg-custom-gradient {
        background-image: linear-gradient(270deg, rgba(169, 203, 203, 0) -0.64%, #44999A 98.56%, #3C898A 100%);
    }
}