@import url("https://fonts.googleapis.com/css2?family=Hind+Madurai:wght@300;400;500;600;700&family=Khula:wght@300;400;600;700;800&family=Kite+One&display=swap");

* {
  font-family: "Hind Madurai", sans-serif;
}

.madurai {
  font-family: "Hind Madurai", sans-serif;
}

.khula {
  font-family: "Khula", sans-serif;
}

.kite {
  font-family: "Kite One", sans-serif;
}

nav.open .nav-tab {
  display: none;
}

nav.open .ham-links-wrapper {
  height: 100vh;
  overflow-y: auto;
}

@media only screen and (min-width: 640px) {
  nav.open .nav-tab {
    display: block;
  }

  nav.open .hamburger-button {
    position: relative;
    z-index: 100;
    right: 0;
    top: 0;
  }

  nav.open .ham-links-main-wrapper {
    position: absolute;
    z-index: 99;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: -19px;
    display: flex;
    flex-direction: column;
    align-items: end;
  }

  nav.open .ham-links-wrapper {
    width: 350px;
    height: 100%;
  }
}

/* Custom Select */
.smart-select-wrapper .smart-body,
.smart-multi-select-wrapper .smart-body {
  position: absolute;
  left: 0;
  top: 104%;
  width: 100%;
  /* transition: max-height 0.35s ease-in-out, opacity 0.35s ease-in-out; */
  user-select: none;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  max-height: 300px;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}

.smart-select-wrapper .smart-body .inner-body,
.smart-multi-select-wrapper .smart-body .inner-body {
  overflow-y: auto;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #000000;
  font-size: 15px;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  background-color: #ffffff;
  border-radius: 4px;
  position: relative;
  z-index: 10;
}

.smart-select-wrapper .smart-body .inner-body {
  max-height: 250px;
}

.smart-multi-select-wrapper .smart-body .inner-body {
  max-height: 165px;
}

.smart-select-wrapper .smart-body .inner-body .item,
.smart-multi-select-wrapper .smart-body .inner-body .item {
  cursor: pointer;
  transition: background-color 0.3s ease;
  padding: 0.375rem 0.75rem;
  width: 100%;
}

.smart-select-wrapper .smart-body .inner-body .item.default {
  cursor: default;
}


.smart-select-wrapper .smart-body .inner-body .item.not-found,
.smart-multi-select-wrapper .smart-body .inner-body .item.not-found {
  cursor: not-allowed;
}

.smart-select-wrapper .smart-body .inner-body .item:not(.not-found):hover,
.smart-multi-select-wrapper .smart-body .inner-body .item:not(.not-found):hover {
  background-color: #f1f1f1;
}

.smart-select-wrapper .smart-body .inner-body .item.default:hover {
  background-color: #ffffff;
}

.smart-select-wrapper .smart-body .inner-body .item .content,
.smart-multi-select-wrapper .smart-body .inner-body .item .content {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.smart-select-wrapper .smart-body .inner-body .item img,
.smart-multi-select-wrapper .smart-body .inner-body .item img {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  user-select: none;
}

/* Custom Select open */
.smart-select-wrapper .smart-body.open,
.smart-multi-select-wrapper .smart-body.open {
  opacity: 1;
}

.clipped-left-wrapper {
  clip-path: path(
    "M16.6733 399.701H508C516.837 399.701 524 392.538 524 383.701V16.4996C524 7.66302 516.837 0.499573 508 0.499573H281.881C273.045 0.499573 265.881 7.66302 265.881 16.4996V55.0579C265.881 63.8945 258.718 71.0579 249.881 71.0579H16.6733C7.83673 71.0579 0.673279 78.2213 0.673279 87.0579V383.701C0.673279 392.538 7.83673 399.701 16.6733 399.701Z"
  );
  overflow: hidden;
}

.clipped-right-wrapper {
  clip-path: path(
    "M507.327 399.201H16C7.16344 399.201 0 392.038 0 383.201V15.9996C0 7.16302 7.16344 -0.000427246 16 -0.000427246H242.119C250.955 -0.000427246 258.119 7.16302 258.119 15.9996V54.5579C258.119 63.3945 265.282 70.5579 274.119 70.5579H507.327C516.163 70.5579 523.327 77.7213 523.327 86.5579V383.201C523.327 392.038 516.163 399.201 507.327 399.201Z"
  );
  overflow: hidden;
}

.clipped-left-wrapper > img,
.clipped-right-wrapper > img {
  user-select: none;
  object-fit: fill;
  width: 100%;
  height: 100%;
}

@media only screen and (min-width: 1024px) {
  .home-banner-shape {
    width: 751px;
    height: 217px;
    background-color: white;
    position: absolute;
    right: -1px;
    bottom: -1px;
    clip-path: path(
      "M46.1557 80.7556C46.1557 58.6642 64.0643 40.7556 86.1557 40.7556H702.764H710.429C730.676 40.7556 747.73 25.6268 750.143 5.52417L750.778 0.242432V216.798H0.146973L8.62209 216.277C29.2345 215.01 45.5019 198.01 46.1557 177.369V177.369V80.7556Z"
    );
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .home-banner-shape .inner-shape {
    display: flex;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 2.25rem;
    gap: 3.5rem;
    transform: translateY(15px) translateX(30px);
  }
}

.smart-multi-select-wrapper .selected-items {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  column-gap: 0.1rem;
  row-gap: 0.2rem;
  flex-wrap: wrap;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.smart-multi-select-wrapper .selected-items .items {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  flex-wrap: wrap;
  font-size: 14px;
  cursor: default;
  border: 1px solid rgb(0 0 0 / 50%);
  padding: 2px 8px;
  border-radius: 4px;
}

.smart-multi-select-wrapper .selected-items .items .delete {
  cursor: pointer;
  color: #ff0000;
  transition: color 0.3s ease;
  font-size: 25px;
}

.smart-multi-select-wrapper .selected-items .items img {
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

.footer-membership {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.4rem;
  margin-top: 2rem;
}

.footer-membership img {
  max-height: 30px;
}