:root {
  --color-black: #161616;
  --color-darkGrey: #555b5f;
  --color-grey: #b5b5b5;
  --color-lightGrey: #ebeef2;
  --color-bgGrey: #f4f9ff;
  --color-borderGrey: rgb(209, 162, 153, 0.5);
  --color-primary: #ab6e5d;
  --color-secondary: #d79782;
  --color-primary-gradient: linear-gradient(
    to right,
    #d79782,
    var(--color-primary)
  );
  --color-emphasis: #ab6e5d;
  --color-lightPink: #ffebeb;
}

/* ==========================================================================
   Global
   ========================================================================== */

.color-primary-gradient {
  padding-right: 0.05em; /* tiny extra space */
  padding-left: 0.05em; /* prevent clipping */
  background: var(--color-primary-gradient);
  -webkit-background-clip: text; /* clip background to text */
  -webkit-text-fill-color: transparent; /* make text itself transparent */
  background-clip: text; /* for some browsers */
  color: transparent; /* fallback */
}
.bg-gradient {
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 1),
    #fff6f6
  ) !important;
}
.bg-star-pattern {
  background:
    linear-gradient(to bottom, rgba(255, 255, 255, 0.4), #fff6f6 40%),
    url("../star-lightpink.svg");
  background-size:
    100% 100%,
    32px 32px;
  background-repeat: no-repeat, repeat;
  background-position:
    0 0,
    0 0;
}
.bg-star-pattern--full {
  background:
    linear-gradient(to bottom, rgba(255, 255, 255, 0.4), #fff6f6),
    url("../star-lightpink.svg");
  background-size:
    100% 100%,
    32px 32px;
  background-repeat: no-repeat, repeat;
  background-position:
    0 0,
    0 0;
}
.bg-star-pattern--white {
  background:
    linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.4),
      rgba(255, 255, 255, 1)
    ),
    url("../star-lightpink.svg");
  background-size:
    100% 100%,
    32px 32px;
  background-repeat: no-repeat, repeat;
  background-position:
    0 0,
    0 0;
}
.bg-star-pattern--full-white {
  background:
    linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.4),
      rgba(255, 255, 255, 1)
    ),
    url("../star-lightpink.svg");
  background-size:
    100% 100%,
    32px 32px;
  background-repeat: no-repeat, repeat;
  background-position:
    0 0,
    0 0;
}
.uk-section-primary {
  background: var(--color-primary-gradient) !important;
}
.uk-section-muted {
}

.uk-h6 {
  background: var(--color-primary-gradient);
  -webkit-background-clip: text; /* clip background to text */
  -webkit-text-fill-color: transparent; /* make text itself transparent */
  background-clip: text; /* for some browsers */
  color: transparent; /* fallback */
  padding-top: 3px;
}

.text-divider {
  display: inline-block;
  width: 1px;
  height: 0.9em;
  background-color: #9a9da1;
  margin: 0 0.6em;
  vertical-align: middle;
  opacity: 0.7;
}

.uk-divider-icon {
  background-image: url("../star.svg") !important;
}
.alert-badge {
  width: fit-content;
  padding: 11px 18px 6px 18px;
}
.alert-badge .el-title {
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 13px;
}
.alert-badge .el-title::before {
  content: "";
  width: 10px;
  height: 10px;
  background-image: url("../asterix.svg") !important;
  background-repeat: no-repeat;
  padding-right: 18px;
}

/* Navbar icon colour */
.uk-navbar-parent-icon,
.uk-nav-parent-icon {
  color: var(--color-emphasis) !important;
  margin-bottom: 4px;
}

.text-with-icon {
  display: inline-flex;
}
.uk-accordion .el-item .accordion-title {
  display: flex;
  align-items: center;
}
.uk-accordion-title::before {
  width: 2.5em;
  height: 2.5em;
}

.uk-offcanvas-bar .uk-nav li a {
  text-transform: uppercase;
}

/* ==========================================================================
   Border Style START
   ========================================================================== */

.card--inverted-corners .uk-card-default {
  --r: 26px; /* dent radius */
  --gap: 12px; /* space between card edge and border */
  --b: 1px; /* border width */
  --bc: #d1a299; /* border color */

  /* outer shape mask */
  -webkit-mask:
    radial-gradient(var(--r) at top left, transparent 98%, black 100%),
    radial-gradient(var(--r) at top right, transparent 98%, black 100%),
    radial-gradient(var(--r) at bottom left, transparent 98%, black 100%),
    radial-gradient(var(--r) at bottom right, transparent 98%, black 100%);
  -webkit-mask-position:
    top left,
    top right,
    bottom left,
    bottom right;
  -webkit-mask-size: 51% 51%;
  -webkit-mask-repeat: no-repeat;

  mask:
    radial-gradient(var(--r) at top left, transparent 98%, black 100%),
    radial-gradient(var(--r) at top right, transparent 98%, black 100%),
    radial-gradient(var(--r) at bottom left, transparent 98%, black 100%),
    radial-gradient(var(--r) at bottom right, transparent 98%, black 100%);
  mask-position:
    top left,
    top right,
    bottom left,
    bottom right;
  mask-size: 51% 51%;
  mask-repeat: no-repeat;
}

/* 4 straight lines */
.card--inverted-corners .uk-card-default::after {
  content: "";
  position: absolute;
  inset: var(--gap);
  border: var(--b) solid var(--bc);
  background: transparent;

  --inner-r: calc(var(--r) - var(--gap) + 16px);

  -webkit-mask:
    radial-gradient(var(--inner-r) at top left, transparent 96%, black 100%),
    radial-gradient(var(--inner-r) at top right, transparent 96%, black 100%),
    radial-gradient(var(--inner-r) at bottom left, transparent 96%, black 100%),
    radial-gradient(var(--inner-r) at bottom right, transparent 96%, black 100%);
  -webkit-mask-position:
    top left,
    top right,
    bottom left,
    bottom right;
  -webkit-mask-size: 51% 51%;
  -webkit-mask-repeat: no-repeat;

  mask:
    radial-gradient(var(--inner-r) at top left, transparent 96%, black 100%),
    radial-gradient(var(--inner-r) at top right, transparent 96%, black 100%),
    radial-gradient(var(--inner-r) at bottom left, transparent 96%, black 100%),
    radial-gradient(var(--inner-r) at bottom right, transparent 96%, black 100%);
  mask-position:
    top left,
    top right,
    bottom left,
    bottom right;
  mask-size: 51% 51%;
  mask-repeat: no-repeat;

  pointer-events: none;
}

/* 4 curved lines */

.inverted-corners .uk-card-default::after {
  content: "";
  position: absolute;
  inset: 12px; /* gap */
  border: 1px solid #d1a299; /* line */
  pointer-events: none;
}

.inverted-corners .uk-card-default .corner-tl,
.inverted-corners .uk-card-default .corner-tr,
.inverted-corners .uk-card-default .corner-bl,
.inverted-corners .uk-card-default .corner-br {
  position: absolute;
  width: 30px; /* corner size */
  height: 30px;
  pointer-events: none;
}

.inverted-corners .uk-card-default .corner-tl {
  top: 12px;
  left: 12px;
}
.inverted-corners .uk-card-default .corner-tr {
  top: 12px;
  right: 12px;
}
.inverted-corners .uk-card-default .corner-bl {
  bottom: 12px;
  left: 12px;
}
.inverted-corners .uk-card-default .corner-br {
  bottom: 12px;
  right: 12px;
}

.inverted-corners .uk-card-default .corner-tl svg,
.inverted-corners .uk-card-default .corner-tr svg,
.inverted-corners .uk-card-default .corner-bl svg,
.inverted-corners .uk-card-default .corner-br svg {
  width: 100%;
  height: 100%;
  display: block;
}
.inverted-corners .uk-card-default .stroke-accent {
  fill: none;
  stroke: #d1a299;
  stroke-width: 1px;
  vector-effect: non-scaling-stroke;
}

.inverted-corners .uk-card-default .corner-tl {
  transform: rotate(0deg);
  transform-origin: center;
}
.inverted-corners .uk-card-default .corner-tr {
  transform: rotate(90deg);
  transform-origin: center;
}
.inverted-corners .uk-card-default .corner-bl {
  transform: rotate(270deg);
  transform-origin: center;
}
.inverted-corners .uk-card-default .corner-br {
  transform: rotate(180deg);
  transform-origin: center;
}

/* ==========================================================================
   Border Style END
   ========================================================================== */

.inset-border::after {
  content: "";
  position: absolute;
  inset: 15px;
  border: 1px solid rgb(255, 235, 235, 0.7);
  pointer-events: none;
}

.card-shadow::before {
  content: "";
  position: absolute;
  inset: 0;
  background: black;
  opacity: 0.1;
  filter: blur(20px);
  transform: translate(8px, 8px);
}

.star-icon {
  display: inline-block;
  width: 14px;
  height: 14px;
  background-image: url("../star.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transform: translateY(1px);
}
.star-icon-lg {
  width: 20px;
  height: 20px;
}
.star-icon--middle {
  margin: 0 8px;
}
.star-icon--left {
  margin-right: 10px;
}
.star-icon--right {
  margin-left: 10px;
}
.star-icon--white {
  background-image: url("../star-white.svg");
}

a.uk-button {
  /* transition: all 0.3s ease; */
}
.uk-button {
  padding-top: 4px;
}
.uk-button-text {
  font-size: 16px;
  background: var(--color-primary-gradient);
  -webkit-background-clip: text; /* clip background to text */
  -webkit-text-fill-color: transparent; /* make text itself transparent */
  background-clip: text; /* for some browsers */
}
.uk-button-primary {
  display: inline-flex;
  align-items: center;
}
.uk-button-default {
  background: var(--color-primary-gradient);
  -webkit-background-clip: text; /* clip background to text */
  -webkit-text-fill-color: transparent; /* make text itself transparent */
  background-clip: text; /* for some browsers */
}
.uk-button .uk-icon {
  margin-bottom: 3px;
}
.uk-button-default svg polyline {
  stroke: var(--color-secondary);
}
.uk-light .uk-button-primary {
  background: var(--color-primary-gradient);
  border: none !important;
}
.uk-light .uk-button-secondary {
  background: linear-gradient(to right, #ffebeb, #ffffff) !important;
  border: none !important;
}
.uk-light .uk-button:hover {
  background-position-x: 0 !important;
}
.calendar-icon {
  display: inline-block;
  width: 16px;
  height: 19px;
  background-image: url("../calendar.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin-right: 12px;
  transform: translateY(-2px);
}

/* ==========================================================================
   Navbar
   ========================================================================== */
.uk-navbar-container {
  padding-bottom: 0 !important;
}

.tm-toolbar-default {
  background: var(--color-darkGrey);
}
.uk-navbar-container {
  background: var(--color-darkGrey) !important;
}
/* Navbar with toolbar on top right */
.uk-navbar-left .uk-logo {
  position: absolute;
  left: 0;
  bottom: 4px;
  padding-bottom: 8px;
}

.footer {
  background: var(--color-darkGrey) !important;
}
.footer .footer__opening-hours-list .el-content {
  color: var(--color-grey);
}
.footerlist .uk-icon svg polyline {
  stroke: var(--color-secondary) !important;
}

/* ==========================================================================
   Home Page
   ========================================================================== */

/* HERO SECTION START */
.hero-textbox .uk-card {
  padding-top: 144px;
  padding-bottom: 144px;
}

.hero-textbox .card--inverted-corners .uk-card-default > .uk-panel {
  padding: 140px 66px;
}
.textbox-panel__large .card--inverted-corners .uk-card-default > .uk-panel {
  padding: 100px 60px 60px 60px;
}
/* Swicher */
.service-switcher .uk-tab-left > * {
  border-bottom: 1px solid var(--color-borderGrey) !important;
}
.service-switcher .uk-tab-left > *:last-child {
  border-bottom: none !important;
}

.uk-tab > .uk-active > a {
  font-weight: 600;
  background: var(--color-primary-gradient);
  -webkit-background-clip: text; /* clip background to text */
  -webkit-text-fill-color: transparent; /* make text itself transparent */
  background-clip: text; /* for some browsers */
  color: transparent; /* fallback */
}

.tab-icon {
  background-repeat: no-repeat;
  background-size: 100% auto;
  width: 60px;
  height: 60px;
  background-position: 50% 50%;
  display: inline-block;
  margin-right: 20px;
}
.tab-icon__lash {
  background-image: url("../lash.svg");
}
.tab-icon__nail {
  background-image: url("../nail.svg");
}
.tab-icon__waxing {
  background-image: url("../waxing.svg");
}
.tab-icon__facial {
  background-image: url("../facial.svg");
}
.tab-icon__tanning {
  background-image: url("../tanning.svg");
}
.tab-icon__package {
  background-image: url("../package.svg");
}
.tab-icon__aesthetics {
  background-image: url("../aesthetics.svg");
}

.why-choose-us__list .uk-grid {
  /* gap: 16px; */
}
.uk-section-primary:not(.uk-preserve-color)
  .uk-grid-divider.uk-grid-stack
  > .uk-grid-margin::before {
  border-top-color: rgba(255, 255, 255, 0.2) !important;
}
.uk-tile-primary:not(.uk-preserve-color) hr {
  border-top-color: rgba(255, 255, 255, 0.2) !important;
}
.uk-tile-primary:not(.uk-preserve-color)
  .uk-grid-divider
  > :not(.uk-first-column)::before {
  border-left-color: rgba(255, 255, 255, 0.2) !important;
}
/* ==========================================================================
   Modal
   ========================================================================== */
.uk-modal-dialog {
  background: linear-gradient(to right, #ffffff, #ffebeb);
}

/* subpages */
.subpage-hero-textbox .uk-card {
  padding-top: 70px;
  padding-bottom: 70px;
}

.subpage-hero-textbox .card--inverted-corners .uk-card-default > .uk-panel {
  padding: 70px 66px;
}

/*Adjust Responsive*/
/*large desktop*/
@media all and (min-width: 1200px) and (max-width: 1399px) {
}

/*small desktop*/
@media all and (min-width: 960px) and (max-width: 1199px) {
  /* .image-ratio-change img {
    aspect-ratio: 16 / 9 !important;
  } */
  .uk-navbar-container {
    padding-bottom: 18px !important;
  }
}

/*ipad*/
@media all and (min-width: 640px) and (max-width: 959px) {
  .image-ratio-change img {
    aspect-ratio: 16 / 9 !important;
  }
  .uk-navbar-container {
    padding-bottom: 18px !important;
    background: var(--color-darkGrey) !important;
  }
  .button--longtext a.uk-button {
    line-height: 20px;
    padding-top: 14px;
    padding-bottom: 10px;
  }
  .uk-navbar-container {
    padding-bottom: 18px !important;
  }
  .hero-textbox .card--inverted-corners .uk-card-default > .uk-panel {
    padding: 60px 40px 30px 40px;
  }
  .section__hero-mobile .uk-section {
    padding-top: 220px;
    padding-bottom: 30px;
  }
  .mobile-image-fullwidth .tm-box-decoration-default {
    width: 100%;
    height: 100%;
    max-height: 350px;
  }
  .mobile-image-fullwidth img {
    width: 100%;
  }
}

/*mobile*/
@media (max-width: 639px) {
  .image-ratio-change img {
    aspect-ratio: 16 / 9 !important;
  }
  .button--longtext a.uk-button {
    line-height: 20px;
    padding-top: 14px;
    padding-bottom: 10px;
  }

  .uk-navbar-container {
    padding-bottom: 18px !important;
    background: var(--color-darkGrey) !important;
  }
  .hero-textbox .card--inverted-corners .uk-card-default > .uk-panel {
    padding: 60px 40px 30px 40px;
  }
  .textbox-panel__large .card--inverted-corners .uk-card-default > .uk-panel {
    padding: 60px 40px 30px 40px;
  }

  .section__hero-mobile .uk-section {
    padding-top: 220px;
    padding-bottom: 30px;
  }
  .section__hero-mobile .uk-section .hero-textbox .uk-text-lead {
    margin-bottom: 0 !important;
  }
  .uk-button {
    font-size: 15px !important;
  }
  .inset-border::after {
    inset: 13px;
  }
  .footer {
    background: linear-gradient(#4b4c4e 49%, #37383b);
  }
  .text-with-icon {
    flex-direction: column;
    align-items: center;
  }
  .inset-border .uk-tile {
    padding-left: 34px;
    padding-right: 34px;
  }
  .inset-border .uk-container {
    padding-left: 34px;
    padding-right: 34px;
  }
  .mobile-image-fullwidth .tm-box-decoration-default {
    width: 100%;
    height: 100%;
    max-height: 300px;
  }
  .mobile-image-fullwidth img {
    width: 100%;
  }
}

/* ==========================================================================
	Sitemap
   ========================================================================== */

.treeview a {
  color: var(--color-black);
}

.treeview a.selected {
  background-color: transparent;
  text-decoration: none;
  font-size: 16px;
}

.treeview .hover {
  color: var(--color-primary);
}

/* ==========================================================================
	Cookie Banner
   ========================================================================== */

body .cky-revisit-bottom-right {
  background-color: var(--color-primary) !important;
}
body .cky-btn-accept, body .cky-btn-preferences, body .cky-btn-reject {
    background: var(--color-primary) !important;
    color: #fff;
    border: 2px solid var(--color-primary) !important;
}
body .cky-btn-customize {
  border: 2px solid var(--color-primary) !important;
  color: var(--color-primary) !important;
}