/* ========================= */
/* :: 1.0 WEB FONTS  */
/* ========================= */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');

/* ================================== */
/* :: 2.0 GLOBAL Variable Define CSS  */
/* ================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
:root {
    /* Google Font */
    --inter: 'Inter', sans-serif;
    --playfair-display: 'Playfair Display', serif;

    /* Color Palette */
    --white: #fff;
    --light: #f4eee7;
    --black: #000;
    --primary: #c9a887;
    --primary-light: rgba(201, 168, 135, 0.2);
}

/* ========================= */
/* :: 3.0 COMMON CSS */
/* ========================= */
html,
body {
    height: 100%;
    scroll-behavior: smooth;
}
body {
    color: var(--black);
    font-size: 16px;
    font-family: var(--inter);
    font-weight: 400;
    line-height: normal;
    background-color: var(--white);
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}
p,
h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    padding: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--playfair-display);
    font-weight: 600;
}
section,
.section {
    position: relative;
}
.container {
    width: 100%;
    margin: 0 auto;
    padding: 0 16px;
}
a,
button {
    outline: none;
    box-shadow: none;
    text-decoration: none;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}
button {
    padding: 0;
    border: none;
    background: unset;
}
ol,
ul {
    margin: 0;
    padding: 0;
}
ol li,
ul li {
    list-style: none;
}
img {
    height: auto;
    max-width: 100%;
    object-fit: cover;
}
input,
input:focus,
input:focus-visible,
input:active,
select,
.form-select,
.form-select:focus,
textarea {
    outline: none;
    box-shadow: none;
}
* + address,
* + dl,
* + fieldset,
* + figure,
* + ol,
* + p,
* + pre,
* + ul {
    margin: 0;
    padding: 0;
}

*::-moz-selection {
    background: var(--black);
    color: var(--white);
    text-shadow: none;
}
::-moz-selection {
    background: var(--black);
    color: var(--white);
    text-shadow: none;
}

::selection {
    background: var(--black);
    color: var(--white);
    text-shadow: none;
}
*::-moz-placeholder {
    color: var(--black);
    font-size: 16px;
    opacity: 1;
}
*::placeholder {
    color: var(--black);
    font-size: 16px;
    opacity: 1;
}

/* Reusable + Bootstrap Customized CSS Start */
.btn {
    padding: 14px 33px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    border-radius: 100px;
    border: 1px solid transparent;
    font-size: 16px;
    font-weight: 600;
    background-color: var(--white);
    color: var(--black);
    transition: all 0.3s ease-in-out;
}
.btn--bordered {
    border-color: rgba(0, 0, 0, 0.1);
}
.btn:hover {
    background-color: var(--primary);
    color: var(--white);
}
.btn--primary {
    color: var(--white);
    background-color: var(--primary);
}
.btn--primary:hover {
    color: var(--white);
    background-color: var(--black);
}
.btn__icon {
    width: 18px;
    line-height: 1;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    transition: transform 0.3s ease-in-out;
}
.btn__icon svg {
    width: 100%;
}
.btn:hover svg {
    animation: slide-through 0.5s ease-in-out forwards;
}
@keyframes slide-through {
    0% {
        transform: translateX(0);
        opacity: 1;
    }
    40% {
        transform: translateX(100%);
        opacity: 0;
    }
    60% {
        transform: translateX(-100%);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

.fs-1 {
    font-size: 27px !important;
    line-height: 1.12;
    letter-spacing: 5%;
}
.fs-2 {
    font-size: 24px !important;
    line-height: 1.11;
    letter-spacing: 3%;
}
.fs-3 {
    font-size: 24px !important;
    line-height: 1.25;
    letter-spacing: 3%;
}
.fs-4 {
    font-size: 22px !important;
    line-height: 1.11;
    letter-spacing: 3%;
}

.text-primary {
    color: var(--primary) !important;
}

.bg-primary-light {
    background-color: var(--primary-light);
}

.transition {
    transition: all 0.3s ease-in-out;
}
.transition-2 {
    transition: all 0.4s ease-in-out;
}
.transition-3 {
    transition: all 0.5s ease-in-out;
}

.title-obj {
    display: inline-flex;
    position: relative;
}
/* Reusable + Bootstrap Customized CSS End */

/* =============================== */
/* :: 4.0 Header Area CSS Start */
/* =============================== */
.header--area {
    padding: 10px 0;
}
.logo,
.menu__logo {
    max-width: 96px;
}
.menu-btn,
.menu-close {
    width: 36px;
    height: 36px;
    border-radius: 4px;
    background-color: var(--primary);
    color: var(--white);
}
.menu-btn:hover,
.menu-close:hover {
    background-color: var(--white);
    color: var(--black);
}
.menu .offcanvas {
    background-color: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(8px);
}
.menu .offcanvas-header {
    padding: 24px 20px;
}
.menu .offcanvas-body {
    padding: 32px 20px;
}
.menu__item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.menu__item:first-child {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.menu__link {
    color: var(--white);
    padding: 20px 0;
    transition: all 0.3s ease-in-out;
}
.menu__item:hover .menu__link,
.menu__link[aria-expanded='true'] {
    color: var(--primary);
}
.menu__link[aria-expanded='true'] .menu__link__icon {
    transform: rotate(-180deg);
}
.collapse__link {
    font-size: 15px;
    color: var(--white);
    padding: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.collapse__link:hover {
    color: var(--primary);
    background-color: rgba(255, 255, 255, 0.05);
}

/* Desktop Menu */
.header__right {
    gap: 40px;
}
.header__ul {
    gap: 48px;
}
.header__nav__link {
    color: var(--white);
    letter-spacing: 3%;
    padding: 16px 0;
    font-size: 16px;
}
.header__nav__item:hover .header__nav__link {
    color: var(--primary);
}
.submenu-icon {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    margin-right: -20px;
    transition: all 0.4s ease-in-out;
}
.header__nav__item:hover .submenu-icon {
    transform: translateY(-50%) rotate(-180deg);
}
.submenu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 192px;
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(8px);
    padding: 12px 0;
    opacity: 0;
    visibility: hidden;
    margin-top: 16px;
    transition: all 0.4s ease-in-out;
}
.header__nav__item:hover .submenu {
    opacity: 1;
    visibility: visible;
    margin-top: 0;
}
.submenu__link {
    font-size: 15px;
    padding: 10px 20px;
    display: flex;
    color: var(--black);
    transition: all 0.3s ease-in-out;
}
.submenu__link:hover {
    color: var(--primary);
}
.header__btn {
    min-width: 132px;
    height: 42px;
    padding: 12px 24px;
    background-color: transparent;
    color: var(--white);
    border: 1px solid var(--white);
    border-radius: 100px;
    font-weight: 500;
    font-size: 14px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}
.header__btn:hover {
    background-color: var(--white);
    color: var(--black);
}
/* =============================== */
/* :: 4.0 Header Area CSS End */
/* =============================== */

/* =============================== */
/* :: 5.0 Hero Section CSS Start */
/* =============================== */
.hero--section {
    padding: 64px 0;
    min-height: 416px;
}
.hero--section::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: 0.6;
    z-index: -1;
}
.hero__wrapper {
    padding-top: 48px;
}
.hero__content {
    max-width: 888px;
}
.hero__para {
    max-width: 688px;
    font-size: 15px;
    letter-spacing: 3%;
    line-height: 1.5;
}
/* =============================== */
/* :: 5.0 Hero Section CSS End */
/* =============================== */

/* =================================== */
/* :: 6.0 Treatments Section CSS Start */
/* =================================== */
.treatments--section {
    padding: 48px 0;
}
.treatments__wrapper {
    max-width: 1456px;
    padding: 0 16px;
}
.title-obj__image {
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    max-height: 64px;
}
.treatments__item {
    padding: 5px;
    height: auto;
}
.treatments__thumb {
    width: 100%;
    height: 200px;
}
.treatments__thumb__image {
    transition: all 0.4s ease-in-out;
}
.treatments__item:hover .treatments__thumb__image {
    transform: scale(1.05);
}
.treatments__content {
    padding: 20px 16px 16px;
}
.treatments__title {
    font-size: 21px;
    font-family: var(--inter);
}
.treatments__para {
    color: #676767;
    font-size: 16px;
}
.btn.btn--treatments {
    font-size: 13px;
    padding: 12px 19px;
    gap: 5px;
}
/* ================================= */
/* :: 6.0 Treatments Section CSS End */
/* ================================= */

/* ===================================== */
/* :: 7.0 Introduction Section CSS Start */
/* ===================================== */
.introduction__wrapper {
    max-width: 1600px;
    padding: 48px 0;
}
.introduction .section__para {
    color: #525252;
    line-height: 1.5;
}
.introduction__obj {
    max-height: 200px;
    opacity: 0.2;
}
.introduction__thumb__wrap {
    width: 224px;
    height: 224px;
}
.introduction__thumb {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}
.introduction__mini__thumb {
    width: 50%;
    height: 50%;
    border-radius: 50%;
    padding: 4px;
    background-color: var(--light);
    margin-left: -10%;
    margin-bottom: -5%;
}
/* =================================== */
/* :: 7.0 Introduction Section CSS End */
/* =================================== */

/* ==================================== */
/* :: 8.0 Testimonial Section CSS Start */
/* ==================================== */
.testimonial--section {
    padding: 48px 0;
}
.testimonial--section::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #c9a887;
    opacity: 0.6;
    z-index: -1;
}
.testimonial__content {
    max-width: 740px;
}
.testimonial__heading {
    font-size: 20px;
    line-height: 1.7;
    margin-bottom: 24px;
}
.client-name {
    font-size: 14px;
}
.testimonial--section .swiper-pagination {
    bottom: -24px;
}
.testimonial--section .swiper-pagination-bullet {
    width: 7px;
    height: 7px;
    border: 50%;
    background-color: transparent;
    border: 1px solid var(--white);
    opacity: 1;
    margin: 0 3px;
    transition: all 0.3s ease-in-out;
}
.testimonial--section .swiper-pagination-bullet-active {
    background-color: var(--white);
}
/* ================================== */
/* :: 8.0 Testimonial Section CSS End */
/* ================================== */

/* =============================== */
/* :: 9.0 Trainging Section CSS Start */
/* =============================== */
.training--section {
    padding: 48px 0;
}
.training__wrapper {
    background-color: var(--light);
    padding: 40px 16px;
}
.training__wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 81%;
    height: 100%;
    background: linear-gradient(to right, #f4eee7 50%, #fff0 100%);
}
.training__bg__thumb {
    height: 100%;
    max-width: 872px;
}
.training__content {
    max-width: 572px;
}
.training--section .section__para {
    color: #525252;
}
/* =============================== */
/* :: 9.0 Trainging Section CSS End */
/* =============================== */

/* ==================================== */
/* :: 10.0 Impression Section CSS Start */
/* ==================================== */
.impression__wrapper {
    max-width: 1624px;
    padding: 12px;
}
.impression__inner__row.g-3 {
    --bs-gutter-x: 12px;
    --bs-gutter-y: 12px;
}
.impression__thumb {
    width: 100%;
    height: 272px;
}
/* ================================== */
/* :: 10.0 Impression Section CSS End */
/* ================================== */

/* ================================= */
/* :: 11.0 Contact Section CSS Start */
/* ================================= */
.contact--section {
    padding: 48px 0;
    background-color: #e9ddcf;
}
.contact__thumb {
    width: 100%;
    height: 400px;
}
.form__field {
    position: relative;
}

.form__field input {
    padding: 20px 0 16px;
    border: none;
    border-bottom: 1px solid #00000040;
    background-color: transparent;
    width: 100%;
}
.form__field textarea {
    height: 80px;
    border: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    background-color: transparent;
    width: 100%;
    padding-top: 20px;
    resize: none;
}

.form__field label {
    position: absolute;
    left: 0;
    top: 20px;
    color: var(--black);
    pointer-events: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

.form__field {
    margin-bottom: 20px;
}

.form__field input:focus ~ label,
.form__field input:valid ~ label {
    top: 0px;
    font-size: 12px;
}

.form__field textarea:focus ~ label,
.form__field textarea:valid ~ label {
    top: 0px;
    font-size: 12px;
}
.form__field--textarea {
    margin-bottom: 20px;
}
/* =============================== */
/* :: 11.0 Contact Section CSS End */
/* =============================== */

/* ============================= */
/* :: 12.0 Footer Area CSS Start */
/* ============================= */
.footer__wrapper {
    max-width: 1600px;
}
.footer__inner {
    max-width: 1184px;
}
.footer--area p,
.footer--area a {
    line-height: 1.6;
    font-size: 16px;
}
.footer__top {
    padding: 40px 0;
    gap: 32px;
}
.footer__logo {
    max-width: 144px;
}
.footer__content {
    gap: 40px;
}
.footer__ul {
    gap: 16px;
}
.footer__nav__link {
    color: var(--white);
    transition: all 0.3s ease-in-out;
}
.footer__nav__link:hover {
    color: var(--primary);
}
.footer__contact {
    gap: 32px;
}
.footer__contact__top {
    gap: 16px;
    padding-bottom: 32px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.footer__contact__item,
.footer__contact__item a,
.footer__link {
    color: var(--white);
}
.footer__contact__item a:hover,
.footer__link:hover {
    color: var(--primary);
}
.footer__contact__bottom {
    gap: 8px;
}
.footer__copyright {
    padding: 24px 0;
}
.footer__obj {
    opacity: .05;
}
/* =========================== */
/* :: 12.0 Footer Area CSS End */
/* =========================== */

/* ===== GSAP Animation CSS ===== */
.fade-up-animate > * {
  will-change: transform, opacity;
}

.header__ul li:last-child, .menu__ul li:last-child {
  display: none;
}

.swiper-button-prev,
.swiper-button-next {
  color: #c4a98b; /* of je gewenste kleur */
}