@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400&family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap');

html[data-theme-color="skin-3"] {
    --bs-primary: #C9A34A !important;
    --bs-secondary: #2F2F2F !important;
    --bs-light: #F6F0EA !important;
    --bs-body-bg: #F6F0EA !important;

    --bs-primary-rgb: 201, 163, 74 !important;
    --bs-secondary-rgb: 47, 47, 47 !important;
    --bs-light-rgb: 246, 240, 234 !important;
    
    --bs-heading-color: #2F2F2F !important;
    --bs-primary-text-emphasis: #8c714d !important;
    --bs-primary-bg-subtle: #F6F0EA !important;
    --bs-primary-border-subtle: #e6dac8 !important;
    --bs-primary-btn-hover-bg: #b59242 !important;
    --bs-primary-btn-hover-border-color: #b59242 !important;
}

/* Custom Typography */
body, p, span, li, a, input, select, textarea, button, .text, .rating, label, td, th {
    font-family: Helvetica, Arial, sans-serif !important;
}

h1, h2, h3, h4, h5, h6, .title, .dz-title, .dz-name, .logo-header, .site-title {
    font-family: Helvetica, Arial, sans-serif !important;
    font-weight: 500 !important;
    letter-spacing: 0.02em;
}

/* Luxury visual tweaks */
.btn-primary {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    color: #ffffff !important;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.85rem;
    font-weight: 600;
}

.btn-primary:hover {
    background-color: #b0936c !important;
    border-color: #b0936c !important;
}

.btn-secondary {
    background-color: var(--bs-secondary) !important;
    border-color: var(--bs-secondary) !important;
    color: #ffffff !important;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.85rem;
    font-weight: 600;
}

.btn-secondary:hover {
    background-color: #12100e !important;
    border-color: #12100e !important;
}

/* Floating WhatsApp Button */
.whatsapp-float {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 30px;
    right: 30px;
    background-color: #25D366;
    color: #FFF !important;
    border-radius: 50px;
    text-align: center;
    font-size: 30px;
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.15);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease, background-color 0.3s ease;
    text-decoration: none !important;
}

.whatsapp-float:hover {
    transform: scale(1.1);
    background-color: #128C7E;
    color: #FFF !important;
}

.whatsapp-float i {
    margin: 0;
}

/* Smooth logo styling */
.text-logo {
    font-family: Helvetica, Arial, sans-serif !important;
    font-weight: 700 !important;
    font-size: 1.8rem;
    letter-spacing: 0.05em;
    color: var(--bs-secondary);
    text-transform: uppercase;
}

.text-logo span {
    color: var(--bs-primary);
    font-family: Helvetica, Arial, sans-serif !important;
}

.logo-white .text-logo, .logo-light .text-logo {
    color: #ffffff !important;
}

/* Fix header overlapping hero text on desktop */
@media (min-width: 991px) {
    .hero-banner.style-1 {
        padding-top: 180px !important;
        padding-bottom: 80px !important;
    }
    .hero-banner.style-1 .inner-wrapper {
        min-height: auto !important;
    }
}

/* Prevent floating images from covering buttons and text */
.hero-content {
    position: relative;
    z-index: 10 !important;
}

.hero-banner.style-1 .item1,
.hero-banner.style-1 .item2,
.hero-banner.style-1 .item3,
.hero-banner.style-1 .item4 {
    z-index: 1 !important;
}

/* Reposition floating images to prevent text and button overlap on desktop */
@media (min-width: 991px) {
    .hero-banner.style-1 .item2 {
        left: auto !important;
        right: 48% !important;
        top: 22% !important;
    }
    .hero-banner.style-1 .item3 {
        left: auto !important;
        right: 35% !important;
        bottom: 15% !important;
    }
    .hero-banner.style-1 .item4 {
        left: auto !important;
        right: 42% !important;
        bottom: 8% !important;
    }
}

/* Responsive adjustments for mobile logo */
@media (max-width: 991px) {
    .text-logo {
        font-size: 1.3rem !important;
        letter-spacing: 0.02em;
    }
    .logo-header {
        width: auto !important;
        max-width: 180px !important;
        height: auto !important;
        display: flex;
        align-items: center;
    }
}

/* Testimonial Section Clean-up (Removing grey placeholder images) */
.dzThumbSlider {
    display: none !important;
}

.testimonial-1 .testimonial-media {
    display: none !important;
}

.testimonial-1 .testimonial-detail {
    width: 100% !important;
    max-width: 800px !important;
    margin: 0 auto !important;
    padding: 40px 30px !important;
    text-align: center !important;
    align-items: center !important;
    background: #ffffff !important;
    border-radius: 20px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03) !important;
}

.testimonial-1 .testimonial-detail p {
    text-align: center !important;
    font-size: 1.15rem !important;
    line-height: 1.7 !important;
    color: #555555 !important;
}

.testimonial-1 .testimonial-info {
    width: 100% !important;
    text-align: center !important;
    margin-top: 15px !important;
}

.testimonial-1 .testimonial-info .clearfix {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.testimonial-1 .testimonial-detail::after {
    left: 50% !important;
    transform: translateX(-50%) !important;
}

.testimonial-position {
    display: none !important;
}


/* Text Logo Design System Contrast Balance */
.text-logo {
    font-weight: 800 !important;
}

/* Default Logo colors (Light Backgrounds, White Sticky headers) */
.text-logo {
    color: #222222 !important; /* Dark charcoal */
}
.text-logo span {
    color: var(--bs-primary) !important;
}

/* When the header logo is transparent over a dark background image */
.site-header.header-transparent:not(.header-light) .logo-header .text-logo {
    color: var(--bs-secondary) !important;
}

/* When header scrolls and gets dark sticky bar */
.site-header.is-fixed .logo-header .text-logo,
.is-fixed .logo-header .text-logo {
    color: #222222 !important;
}

/* Logo colors inside Dark Background Footers - keep light for contrast */
.footer-dark .text-logo,
.site-footer.footer-dark .text-logo,
.site-footer.style-1.footer-dark .text-logo {
    color: #ffffff !important;
}

/* Fix header-light color contrast issues when rendered on a light background */
.site-header.header-light .main-bar-wraper:not(.is-fixed) .toggler1 span {
    background-color: var(--bs-secondary) !important;
}
.site-header.header-light .main-bar-wraper:not(.is-fixed) .extra-nav-left {
    border-right: 1px solid rgba(0, 0, 0, 0.1) !important;
}
.site-header.header-light .main-bar-wraper:not(.is-fixed) .widget-content a {
    color: var(--bs-secondary) !important;
}
.site-header.header-light .main-bar-wraper:not(.is-fixed) .extra-nav .extra-cell ul li i {
    color: var(--bs-secondary) !important;
}
.site-header.header-light .main-bar-wraper:not(.is-fixed) .header-nav .nav > li > a {
    color: var(--bs-secondary) !important;
}
.site-header.header-light .main-bar-wraper:not(.is-fixed) .navbar-toggler span {
    background: var(--bs-secondary) !important;
}
.site-header.header-light .main-bar-wraper:not(.is-fixed) .navicon {
    background: var(--bs-secondary) !important;
}
.site-header.header-light .main-bar-wraper:not(.is-fixed) .navicon span {
    background: var(--bs-secondary) !important;
}
.site-header.header-light .main-bar {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
}
.site-header.header-light .logo-header .text-logo {
    color: var(--bs-secondary) !important;
}
.site-header.header-light .main-bar-wraper:not(.is-fixed) .nav > li.sub-menu-down > a:after {
    background-image: url("data:image/svg+xml,<svg viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M6 0L7.69706 4.30294L12 6L7.69706 7.69706L6 12L4.30294 7.69706L0 6L4.30294 4.30294L6 0Z' fill='%232F2F2F' /></svg>") !important;
}

/* Hero banner responsive image layout */
.hero-banner.style-1 .hero-thumbnail {
    width: 100% !important;
    max-width: 600px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

@media (min-width: 991px) {
    .hero-banner.style-1 .hero-thumbnail {
        margin-top: 0 !important;
        height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: stretch !important;
    }
    .hero-banner.style-1 .hero-thumbnail img.thumbnail {
        height: 100% !important;
        max-height: 100% !important;
        object-fit: cover !important;
    }
}

.hero-banner.style-1 .hero-thumbnail img.thumbnail {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
    border-radius: 24px;
}

@media (max-width: 991px) {
    .hero-banner.style-1 .hero-thumbnail {
        max-width: 100% !important;
        padding: 0 15px;
    }
}

/* Before/After Twentytwenty Image Compare Container style tweaks */
.twentytwenty-container {
    border-radius: 20px !important;
    overflow: hidden !important;
}


/* Fix: allow hero banner to grow with content instead of clipping it (Facial Assessment button cut off) */
.hero-banner.style-1 {
    height: auto !important;
    min-height: 980px !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    padding-bottom: 100px !important;
}

@media (max-width: 1480px) {
    .hero-banner.style-1 { min-height: 920px !important; }
}
@media (max-width: 1380px) {
    .hero-banner.style-1 { min-height: 820px !important; }
}
@media (max-width: 1199px) {
    .hero-banner.style-1 { min-height: 650px !important; }
}
@media (max-width: 991px) {
    .hero-banner.style-1 { min-height: auto !important; padding-bottom: 60px !important; }
}