.elementor-67 .elementor-element.elementor-element-4902341{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-67 .elementor-element.elementor-element-cf49afc{width:100%;max-width:100%;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-67 .elementor-element.elementor-element-cf49afc img{width:100%;}.elementor-67 .elementor-element.elementor-element-1f131a8{--display:flex;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--padding-top:40px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-67 .elementor-element.elementor-element-1f131a8:not(.elementor-motion-effects-element-type-background), .elementor-67 .elementor-element.elementor-element-1f131a8 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#100B0B;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-67 .elementor-element.elementor-element-e3647b3{font-family:"Roboto", Sans-serif;font-size:35px;font-weight:400;color:#FFFFFF;}.elementor-67 .elementor-element.elementor-element-fb6c2bb{width:100%;max-width:100%;}:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-fb6c2bb *//* =========================================================
   PREMIUM SKIN & AESTHETIC TREATMENTS
========================================================= */

.skin-treatment-section {
  width: 100%;
  padding: 70px 0;
  margin: 0;
  background: #080808;
  box-sizing: border-box;
  overflow: hidden;
}


/* =========================================================
   MAIN GRID
   DESKTOP = 4 CARDS
========================================================= */

.skin-treatment-grid {
  width: min(1450px, 94%);
  margin: 0 auto;

  display: grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap: 24px;

  box-sizing: border-box;
}


/* =========================================================
   CARD
========================================================= */

.skin-treatment-card {
  position: relative;

  min-width: 0;

  background: #191919;

  border: 1px solid rgba(198, 164, 74, 0.16);

  overflow: hidden;

  box-sizing: border-box;

  transition:
    transform 0.45s ease,
    border-color 0.45s ease,
    box-shadow 0.45s ease;
}


/* =========================================================
   IMAGE AREA
========================================================= */

.skin-treatment-image {
  position: relative;

  width: 100%;

  aspect-ratio: 1.35 / 1;

  overflow: hidden;

  background: #111;
}


/* Image */

.skin-treatment-image img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;
  object-position: center;

  transform: scale(1.01);

  filter:
    brightness(0.86)
    contrast(1.04)
    saturate(0.90);

  transition:
    transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1),
    filter 0.6s ease;
}


/* Image overlay */

.skin-treatment-image::after {
  content: "";

  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.03),
      rgba(0, 0, 0, 0.20)
    );

  pointer-events: none;

  transition:
    opacity 0.5s ease;
}


/* =========================================================
   CONTENT AREA
========================================================= */

.skin-treatment-content {
  position: relative;

  min-height: 300px;

  padding: 27px 28px 30px;

  box-sizing: border-box;

  background:
    linear-gradient(
      145deg,
      #1d1d1d,
      #151515
    );
}


/* =========================================================
   COLORFUL ICON
========================================================= */

.skin-treatment-icon {
  width: 48px;
  height: 48px;

  margin-bottom: 20px;

  display: flex;

  align-items: center;
  justify-content: center;

  font-family:
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Noto Color Emoji",
    sans-serif;

  font-size: 31px;

  line-height: 1;

  background:
    rgba(255, 255, 255, 0.035);

  border:
    1px solid
    rgba(255, 255, 255, 0.08);

  border-radius: 12px;

  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.18);

  transition:
    transform 0.45s ease,
    background 0.45s ease,
    box-shadow 0.45s ease;
}


/* =========================================================
   HEADING
========================================================= */

.skin-treatment-content h3 {
  margin: 0 0 20px;

  padding: 0;

  font-family:
    "Playfair Display",
    Georgia,
    serif;

  font-size: 22px;

  font-weight: 700;

  line-height: 1.25;

  letter-spacing: 0.5px;

  color: #d8ad43;

  text-transform: uppercase;

  transition:
    color 0.35s ease;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.skin-treatment-content p {
  margin: 0;

  padding: 0;

  max-width: 320px;

  font-family:
    "Montserrat",
    Arial,
    sans-serif;

  font-size: 14px;

  font-weight: 400;

  line-height: 1.75;

  color: #a9a9a9;

  transition:
    color 0.35s ease;
}


/* =========================================================
   EXPLORE LINK
========================================================= */

.skin-treatment-link {
  display: inline-flex;

  align-items: center;

  gap: 8px;

  position: relative;

  margin-top: 25px;

  font-family:
    "Montserrat",
    Arial,
    sans-serif;

  font-size: 9px;

  font-weight: 700;

  line-height: 1;

  letter-spacing: 1.8px;

  color: #d8ad43;

  text-decoration: none;

  text-transform: uppercase;

  transition:
    color 0.3s ease,
    gap 0.3s ease;
}


/* Link arrow */

.skin-treatment-link span {
  display: inline-block;

  font-size: 16px;

  line-height: 1;

  color: #d8ad43;

  transition:
    transform 0.3s ease;
}


/* Link underline */

.skin-treatment-link::after {
  content: "";

  position: absolute;

  left: 0;

  bottom: -7px;

  width: 0;

  height: 1px;

  background: #d8ad43;

  transition:
    width 0.35s ease;
}


/* =========================================================
   GOLD TOP LINE
========================================================= */

.skin-treatment-card::before {
  content: "";

  position: absolute;

  left: 0;
  top: 0;

  width: 0;
  height: 2px;

  background:
    linear-gradient(
      90deg,
      #c6a44a,
      #f0ce70,
      #c6a44a
    );

  z-index: 5;

  transition:
    width 0.5s ease;
}


/* =========================================================
   CARD HOVER
========================================================= */

.skin-treatment-card:hover {
  transform: translateY(-7px);

  border-color:
    rgba(216, 173, 67, 0.60);

  box-shadow:
    0 18px 45px rgba(0, 0, 0, 0.50),
    0 0 25px rgba(216, 173, 67, 0.08);
}


/* =========================================================
   TOP LINE HOVER
========================================================= */

.skin-treatment-card:hover::before {
  width: 100%;
}


/* =========================================================
   IMAGE HOVER
========================================================= */

.skin-treatment-card:hover
.skin-treatment-image img {
  transform: scale(1.08);

  filter:
    brightness(1.06)
    contrast(1.06)
    saturate(1.04);
}


/* =========================================================
   IMAGE OVERLAY HOVER
========================================================= */

.skin-treatment-card:hover
.skin-treatment-image::after {
  opacity: 0.25;
}


/* =========================================================
   COLORFUL ICON HOVER
========================================================= */

.skin-treatment-card:hover
.skin-treatment-icon {
  transform:
    translateY(-4px)
    scale(1.12);

  background:
    rgba(198, 164, 74, 0.08);

  box-shadow:
    0 10px 25px rgba(0, 0, 0, 0.30),
    0 0 18px rgba(198, 164, 74, 0.15);
}


/* =========================================================
   HEADING HOVER
========================================================= */

.skin-treatment-card:hover
.skin-treatment-content h3 {
  color: #f0ca5e;
}


/* =========================================================
   DESCRIPTION HOVER
========================================================= */

.skin-treatment-card:hover
.skin-treatment-content p {
  color: #d0d0d0;
}


/* =========================================================
   LINK HOVER
========================================================= */

.skin-treatment-card:hover
.skin-treatment-link {
  gap: 13px;

  color: #f0ca5e;
}


.skin-treatment-card:hover
.skin-treatment-link span {
  transform: translateX(4px);

  color: #f0ca5e;
}


.skin-treatment-card:hover
.skin-treatment-link::after {
  width: 100%;
}


/* =========================================================
   TABLET / SMALL DESKTOP
========================================================= */

@media (max-width: 1150px) {

  .skin-treatment-section {
    padding: 60px 0;
  }


  .skin-treatment-grid {
    width: 94%;

    gap: 18px;
  }


  .skin-treatment-content {
    min-height: 285px;

    padding:
      23px
      23px
      25px;
  }


  .skin-treatment-icon {
    width: 43px;
    height: 43px;

    margin-bottom: 18px;

    font-size: 28px;
  }


  .skin-treatment-content h3 {
    font-size: 19px;

    margin-bottom: 15px;
  }


  .skin-treatment-content p {
    font-size: 12px;

    line-height: 1.65;
  }


  .skin-treatment-link {
    margin-top: 20px;

    font-size: 8px;
  }
}


/* =========================================================
   TABLET
   2 COLUMNS
========================================================= */

@media (max-width: 850px) {

  .skin-treatment-section {
    padding: 55px 0;
  }


  .skin-treatment-grid {
    width: 92%;

    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap: 18px;
  }


  .skin-treatment-image {
    aspect-ratio: 1.3 / 1;
  }


  .skin-treatment-content {
    min-height: 275px;

    padding:
      23px
      23px
      25px;
  }


  .skin-treatment-icon {
    width: 43px;
    height: 43px;

    font-size: 28px;
  }


  .skin-treatment-content h3 {
    font-size: 19px;
  }


  .skin-treatment-content p {
    font-size: 12px;

    line-height: 1.65;
  }
}


/* =========================================================
   MOBILE
   1 COLUMN
========================================================= */

@media (max-width: 600px) {

  .skin-treatment-section {
    padding: 45px 0;
  }


  .skin-treatment-grid {
    width: 92%;

    grid-template-columns: 1fr;

    gap: 18px;
  }


  .skin-treatment-image {
    aspect-ratio: 1.4 / 1;
  }


  .skin-treatment-content {
    min-height: auto;

    padding:
      25px
      24px
      28px;
  }


  .skin-treatment-icon {
    width: 42px;
    height: 42px;

    margin-bottom: 17px;

    font-size: 27px;

    border-radius: 10px;
  }


  .skin-treatment-content h3 {
    font-size: 21px;

    line-height: 1.28;

    margin-bottom: 13px;
  }


  .skin-treatment-content p {
    max-width: 100%;

    font-size: 13px;

    line-height: 1.7;
  }


  .skin-treatment-link {
    margin-top: 20px;

    font-size: 8px;

    letter-spacing: 1.6px;
  }


  /* Smaller movement on mobile */

  .skin-treatment-card:hover {
    transform: translateY(-3px);
  }
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

  .skin-treatment-grid {
    width: 93%;

    gap: 16px;
  }


  .skin-treatment-content {
    padding:
      22px
      20px
      25px;
  }


  .skin-treatment-icon {
    width: 40px;
    height: 40px;

    margin-bottom: 15px;

    font-size: 25px;
  }


  .skin-treatment-content h3 {
    font-size: 19px;

    margin-bottom: 11px;
  }


  .skin-treatment-content p {
    font-size: 12px;

    line-height: 1.65;
  }


  .skin-treatment-link {
    margin-top: 17px;

    font-size: 7px;

    letter-spacing: 1.4px;
  }


  .skin-treatment-link span {
    font-size: 13px;
  }
}


/* =========================================================
   EXTRA SMALL MOBILE
========================================================= */

@media (max-width: 350px) {

  .skin-treatment-content {
    padding:
      20px
      18px
      22px;
  }


  .skin-treatment-icon {
    width: 37px;
    height: 37px;

    font-size: 23px;
  }


  .skin-treatment-content h3 {
    font-size: 17px;
  }


  .skin-treatment-content p {
    font-size: 11px;

    line-height: 1.55;
  }


  .skin-treatment-link {
    margin-top: 15px;

    font-size: 6.5px;
  }
}


/* =========================================================
   ACCESSIBILITY
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .skin-treatment-card,
  .skin-treatment-image img,
  .skin-treatment-image::after,
  .skin-treatment-icon,
  .skin-treatment-link,
  .skin-treatment-link span,
  .skin-treatment-link::after,
  .skin-treatment-card::before {
    transition: none !important;
  }
}/* End custom CSS */