/* style.css */

/* Aangepaste Variabelen voor Merkkleuren */
:root {
    --lartiste-beige: #e4e2d5;
    --lartiste-dark: #1b1c1d;
    /* Bijgewerkte donkere kleur */
    --lartiste-light-text: #f0f0f0;
    /* Iets lichter dan beige voor donkere achtergronden */
    --lartiste-dark-text: #333333;
    /* Iets donkerder dan donker voor lichte achtergronden */
    --lartiste-secondary-text: #666666;
    /* Voor minder belangrijke tekst */
}

/* Custom font Versailles */
@font-face {
    font-family: "Versailles";
    src: url("../font/797492c63efe2d37b7f00dcd1bc32c0d.eot");
    src: url("../font/797492c63efe2d37b7f00dcd1bc32c0d.eot?#iefix")format("embedded-opentype"),
        url("../font/797492c63efe2d37b7f00dcd1bc32c0d.woff")format("woff"),
        url("../font/797492c63efe2d37b7f00dcd1bc32c0d.woff2")format("woff2"),
        url("../font/797492c63efe2d37b7f00dcd1bc32c0d.ttf")format("truetype"),
        url("../font/797492c63efe2d37b7f00dcd1bc32c0d.svg#Versailles")format("svg");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Brittany";
    src: url("../font/BrittanySignatureScript.ttf")format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


html{
    max-width: 100vw;
        overflow-x: hidden;
}

/* Basis Body Stijlen */
body {
    font-family: 'Inter', sans-serif;
    color: var(--lartiste-dark-text);
    /* Standaard tekstkleur */
    background-color: var(--lartiste-beige);
    /* Algemene lichte achtergrond */
    scroll-behavior: smooth;
    /* Vloeiend scrollen voor ankerlinks */
    display: flex;
    /* Added for sticky footer */
    flex-direction: column;
    /* Added for sticky footer */
    min-height: 100vh;
    /* Added for sticky footer */
    max-width: 100vw;
    overflow-x: hidden;
}

/* Aangepaste Lettertype Klassen */
.custom-font-inter {
    font-family: 'Inter', sans-serif;
}

.custom-font-playfair {
    font-family: 'Playfair Display', serif;
}

.custom-font-versailles {
    font-family: "Versailles", serif;
}


.custom-font-britanny {
    font-family: "Brittany";
    font-size: 2.5rem;
}

.hero-section h1 {
    font-size: 3.5rem;
    font-family: "Versailles", serif;
    margin-top: 1rem;
    margin-bottom: 5rem;
    font-weight: 700;
}

h5{
    font-family: "Brittany";
        font-size: 2.5rem;
}

h2 {
    font-size: 3.5rem;
    font-family: "Versailles", serif;
}
/* New class for Versailles font */
p strong {
    font-size: 1.25rem;
        font-weight: 300;
}

/* Aangepaste Tekstkleuren */
.text-e4e2d5 {
    color: var(--lartiste-beige) !important;
}

.text-1b1c1d {
    color: var(--lartiste-dark) !important;
}

/* Nieuwe klasse voor de specifieke donkere kleur */
.custom-text-light {
    color: var(--lartiste-light-text) !important;
}

.custom-text-dark, a.custom-text-dark {
    color: var(--lartiste-dark-text) !important;
}



/* Aangepaste Achtergrondkleuren */
.custom-bg-light {
    background-color: var(--lartiste-beige) !important;
}

.custom-bg-dark {
    background-color: var(--lartiste-dark) !important;
}

.custom-copyright-bar {
    background-color: transparent !important;
    /* Removed background color */
    font-size: 0.8rem;
    /* Smaller text */
}


/* ======================= */
/* 1. Navigatiebalk Stijlen*/
/* ======================= */
.custom-navbar {
    background-color: transparent;
    /* Begin transparant */
    transition: background-color 0.4s ease-in-out;
    /* Vloeiende overgang voor achtergrond */
    padding-top: 1rem;
    padding-bottom: 1rem;
    box-shadow: none;
    /* Geen schaduw aanvankelijk */
    z-index: 1030;
    /* Zorg ervoor dat de navigatiebalk boven andere inhoud ligt */
}

.custom-navbar.scrolled {
    background-color: var(--lartiste-dark);
    /* Donkere achtergrond bij scrollen */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    /* Subtiele schaduw bij scrollen */
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

.navbar-brand {
    font-family: "Versailles", serif;
    /* Applied Versailles font */
    font-size: 2.2rem;
    font-weight: normal;
    /* Versailles font is not usually bold */
    letter-spacing: 1px;
    padding-left: 0.5rem;
}

.custom-nav-link {
    color: var(--lartiste-beige) !important;
    font-weight: 500;
    padding: 0.25rem 0.75rem;
    /* Made navbar links smaller */
    font-size: 0.9rem;
    /* Slightly smaller font size */
    position: relative;
    transition: all 0.3s ease-in-out;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-right: 0.5rem;
    /* Added some horizontal spacing between links */
}

.custom-nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background-color: var(--lartiste-beige);
    transition: all 0.3s ease-in-out;
    transform: translateX(-50%);
}

.custom-nav-link:hover::after,
.custom-nav-link.active::after {
    width: calc(100% - 15px);
    /* Adjust based on padding to make it look good */
}

.custom-nav-link:hover,
.custom-nav-link.active {
    color: var(--lartiste-beige) !important;
    /* Houd actieve kleur consistent */
    transform: translateY(-2px);
}

.navbar-toggler {
    border: none;
    outline: none;
    padding: 0.5rem 0.75rem;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgb(228, 226, 213)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.logo-white{
            filter: brightness(0) invert(1);
}

/* Boekingsknop in Navigatiebalk (Verbeterd) */
.custom-btn-book-now {
    background-color: var(--lartiste-beige) !important;
    color: var(--lartiste-dark) !important;
    border: 2px solid var(--lartiste-beige) !important;
    font-weight: 700;
    padding: 0.5rem 2rem;
    /* Increased horizontal padding */
    font-size: 1rem;
    /* Bigger font than nav links */
    border-radius: 0.75rem;
    /* Aangepast voor minder afgeronde hoeken */
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.custom-btn-book-now:hover {
    background-color: var(--lartiste-dark) !important;
    color: var(--lartiste-beige) !important;
    border-color: var(--lartiste-beige) !important;
    transform: translateY(-2px) scale(1.02);
    /* Licht lift- en schaaleffect */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
}

/* ======================= */
/* 2. Hero Sectie Stijlen  */
/* ======================= */
.hero-section {
    position: relative;
    height: 100vh;
    /* Volledige viewport hoogte */
    overflow: hidden;
    background-color: var(--lartiste-dark);
    /* Fallback achtergrond */
    color: var(--lartiste-beige);
    padding-top: 56px;
    /* Houd rekening met de hoogte van de vaste navigatiebalk */
}

.hero-video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: 0;
    transform: translateX(-50%) translateY(-50%);
    object-fit: cover;
    /* Zorg ervoor dat de video het gebied bedekt */
    filter: grayscale(60%) brightness(0.6);
    /* Desatureer en verdonker video */
    transition: transform 0.1s ease-out;
    /* Voor JS parallax */
}

.hero-fallback-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    filter: grayscale(60%) brightness(0.6);
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(27, 28, 29, 0.1);
    /* Semi-transparante donkere overlay - ALPHA AANGEPAST */
    z-index: 1;
}

.z-index-1 {
    z-index: 2;
    /* Zorg ervoor dat de inhoud boven de overlay ligt */
    position: relative;
    /* Nodig voor z-index om te werken */
}

/* Removed custom-playfair-heading, now using custom-font-versailles directly on the H1 in HTML */
.custom-inter-text {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
}

/* Aangepaste Donkere Knop */
.custom-btn-dark {
    background-color: var(--lartiste-dark);
    color: var(--lartiste-beige);
    border: 1px solid var(--lartiste-beige);
    padding: 0.8rem 2.5rem;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: 0.75rem;
    /* Aangepast voor minder afgeronde hoeken */
    transition: all 0.3s ease;
}

.custom-btn-dark:hover {
    background-color: var(--lartiste-beige);
    color: var(--lartiste-dark);
    border-color: var(--lartiste-dark);
    transform: translateY(-3px);
    /* Licht lift-effect */
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3);
}

/* ======================= */
/* Algemene Sectie Koppen */
/* ======================= */
.custom-section-heading {
    font-size: 3rem;
    /* Slightly smaller H2 font size */
    font-weight: 700;
    text-transform: none;
    /* Removed text-transform: uppercase */
}

@media (max-width: 991.98px) {
    .custom-section-heading {
        font-size: 2rem;
        /* Adjusted for smaller screens */
    }
}

@media (max-width: 575.98px) {
    .custom-section-heading {
        font-size: 1.8rem;
        /* Further adjustment for very small screens */
    }
}


/* ======================= */
/* 3. Over Ons Sectie Stijlen */
/* ======================= */
#about {
    padding-top: 6rem;
    padding-bottom: 6rem;
}

#about .img-fluid {
    max-height: 500px;
    object-fit: cover;
    width: 100%;
}

/* ======================= */
/* Nieuwe CTA Sectie 1 Stijlen */
/* ======================= */
.cta-section {
    position: relative;
    padding: 10rem 0;
    /* Ruimere padding voor de CTA secties */
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
    /* Parallax-achtig effect */
    color: var(--lartiste-beige);
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5);
    /* Kleine tekstschaduw voor leesbaarheid */
}

.cta-section .overlay {
    background-color: rgba(27, 28, 29, 0.6);
    /* Donkerdere overlay voor CTA's */
}

.cta-section p{
    font-size: 1.5rem;
    /* color: var(--lartiste-beige); */
}

/* Aangepaste Lichte Gevulde Knop voor donkere achtergrond */
.custom-btn-light-filled {
    background-color: var(--lartiste-beige);
    color: var(--lartiste-dark);
    border: 1px solid var(--lartiste-beige);
    padding: 0.8rem 2.5rem;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: 0.75rem;
    /* Aangepast voor minder afgeronde hoeken */
    transition: all 0.3s ease;
}

.custom-btn-light-filled:hover {
    background-color: var(--lartiste-dark);
    color: var(--lartiste-beige);
    border-color: var(--lartiste-beige);
    transform: translateY(-3px);
    /* Licht lift-effect */
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3);
}


/* ======================= */
/* 4. Diensten Sectie Stijlen */
/* ======================= */
#services {
    padding-top: 6rem;
    padding-bottom: 6rem;
}

.custom-heading-dark {
    color: var(--lartiste-dark);
}

.custom-heading-light {
    color: var(--lartiste-beige);
}

.service-card {
    border: none;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    overflow: hidden;
    /* Voor afbeelding schalen binnen */
    background-color: var(--lartiste-beige);
    /* Achtergrond van kaart komt overeen met hoofdkleur */
    border-radius: 0.75rem;
    /* Consistent met andere afgeronde elementen */
}

.service-card:hover {
    transform: translateY(-8px);
    /* Meer uitgesproken lift-effect */
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.2);
}

.service-card img {
    height: 250px;
    /* Vaste hoogte voor consistentie */
    object-fit: cover;
    /* Zorgt ervoor dat afbeeldingen het gebied bedekken zonder vervorming */
    transition: transform 0.4s ease;
}

.service-card:hover img {
    transform: scale(1.08);
    /* Meer uitgesproken zoom op afbeelding */
}

.custom-card-title {
    color: var(--lartiste-dark);
    font-weight: 600;
    font-size: 1.5rem;
    margin-top: 0.75rem;
}

/* ======================= */
/* Prijs Sectie Stijlen    */
/* ======================= */
#prices {
    padding-top: 6rem;
    padding-bottom: 6rem;
}

.price-card {
    border: none;
    background-color: var(--lartiste-beige);
    /* Lichte achtergrond zoals andere kaarten */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    border-radius: 0.75rem;
    /* Consistent met andere afgeronde elementen */
}

.price-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.2);
}

.custom-price-list {
    font-family: 'Inter', sans-serif;
    color: var(--lartiste-dark-text);
}

.custom-price-list li {
    display: flex;
    justify-content: space-between;
    /* Plaats naam links, prijs rechts */
    padding: 0.75rem 0;
    border-bottom: 1px dashed rgba(0, 0, 0, 0.1);
    /* Subtiele stippellijn */
    font-size: 1.05rem;
}

.custom-price-list li:last-child {
    border-bottom: none;
    /* Geen lijn onder het laatste item */
}

.service-name {
    font-weight: 500;
}

.service-price {
    font-weight: 700;
    color: var(--lartiste-dark);
    /* Maak de prijs iets donkerder/prominenter */
}

/* ======================= */
/* 6. Team Sectie Stijlen  */
/* ======================= */
#team {
    padding-top: 6rem;
    padding-bottom: 6rem;
}

/* Remove nowrap from row within carousel item to allow wrapping */
#teamCarousel .carousel-item .row {
    flex-wrap: wrap;
    /* Allow items to wrap to the next line */
}

/* Column definitions for team carousel */
/* On large desktops (>= 992px), show 4 items per row */
.col-lg-3 {
    flex: 0 0 25%;
    max-width: 25%;
}

/* On medium desktops/tablets (>= 768px and < 992px), show 3 items per row */
.col-md-4 {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
}

/* On small tablets/phones (>= 576px and < 768px), show 2 items per row */
.col-sm-6 {
    flex: 0 0 50%;
    max-width: 50%;
}


/* Team Carousel Customizations - REMOVED FLEX-WRAP:NOWRAP FROM .CAROUSEL-ITEM .ROW */
#teamCarousel .carousel-inner {
    overflow: hidden;
}

/* No specific flex-wrap for .carousel-item .row here anymore, relying on default flex-wrap for columns */

#teamCarousel .carousel-control-prev,
#teamCarousel .carousel-control-next {
    display: none;
}

#teamCarousel .carousel-indicators {
    position: static;
    margin-top: 2rem;
    margin-bottom: 0;
}

#teamCarousel .carousel-indicators button {
    background-color: var(--lartiste-dark);
    opacity: 0.5;
    transition: opacity 0.3s ease;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin: 0 5px;
}

#teamCarousel .carousel-indicators button.active {
    background-color: var(--lartiste-dark);
    opacity: 1;
}


.team-card {
    border: none;
    background-color: var(--lartiste-beige);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    overflow: hidden;
    border-radius: 0.75rem;
    height: 100%;
}

.team-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.2);
}

.team-img-wrapper {
    position: relative;
    width: 100%;
    height: 320px;
    overflow: hidden;
    border-radius: 0.75rem 0.75rem 0 0;
}

.team-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
    border-radius: 0;
}

.team-card:hover .team-img {
    transform: scale(1.08);
}

.team-name-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    /* background-color: rgba(27, 28, 29, 0.7); */
    color: var(--lartiste-light-text);
    padding: 0.75rem 0;
    font-size: 1.1rem;
    font-weight: 600;
    text-align: center;
    transition: background-color 0.3s ease;
    font-family: 'Versailles', serif;
}

.team-card:hover .team-name-overlay {
    /* background-color: rgba(27, 28, 29, 0.85); */
}


/* ======================= */
/* 8. Contact Sectie Stijlen */
/* ======================= */
#contact {
    padding-top: 6rem;
    padding-bottom: 6rem;
    background-color: var(--lartiste-dark) !important;
    color: var(--lartiste-light-text);
}

.contact-form-card-light {
    background-color: var(--lartiste-beige) !important;
    color: var(--lartiste-dark-text);
    padding: 2.5rem;
    border-radius: 0.75rem;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
    border: none;
}

.custom-form-control-light {
    background-color: var(--lartiste-light-text);
    border: 1px solid var(--lartiste-dark);
    color: var(--lartiste-dark);
    padding: 0.75rem 1.25rem;
    transition: all 0.3s ease;
    border-radius: 0.75rem;
}

.custom-form-control-light:focus {
    background-color: var(--lartiste-beige);
    border-color: var(--lartiste-dark);
    box-shadow: 0 0 0 0.25rem rgba(27, 28, 29, 0.25);
    outline: 0;
}

.custom-form-control-light::placeholder {
    color: var(--lartiste-secondary-text);
    opacity: 0.7;
}


/* ======================= */
/* 9. Footer Sectie Stijlen*/
/* ======================= */
footer {
    padding-top: 3rem;
    padding-bottom: 1rem;
    margin-top: auto;
}

.custom-hr {
    background-color: var(--lartiste-beige);
    height: 2px;
    border: none;
    width: 60px;
}

.custom-hr-left {
    margin-left: 0;
    margin-right: auto;
}

.custom-footer-link {
    color: var(--lartiste-light-text);
    transition: color 0.3s ease;
    display: block;
    padding: 0.2rem 0;
}

.custom-footer-link:hover {
    color: var(--lartiste-beige);
}

.social-icons-footer .fab {
    font-size: 1.8rem;
    color: var(--lartiste-light-text);
    transition: color 0.3s ease, transform 0.3s ease;
}

.social-icons-footer .fab:hover {
    color: var(--lartiste-beige);
    transform: translateY(-3px);
}

.custom-text-light-hover:hover {
    color: var(--lartiste-beige) !important;
}

/* Footer headings (h6) specific styling */
.custom-footer-heading {
    font-family: "Versailles", serif;
    font-size: 1.3rem;
    font-weight: normal;
    text-align: left;
}

.floater {
    display:none;

}


/* ======================= */
/* Responsieve Aanpassingen */
/* ======================= */
@media (max-width: 991.98px) {

    .floater {
            position: fixed;
            margin: 0 auto;
            bottom: 20px;
            z-index: 1000;
            display: block;
            width: 100vw;
            text-align: center;
            padding: 0 20px;

        }

    /* Applies for screens smaller than 992px (lg breakpoint) */
    .navbar-collapse {
        background-color: var(--lartiste-dark);
        padding: 1rem;
        border-radius: 0.5rem;
        margin-top: 0.5rem;
    }

    .custom-nav-link::after {
        display: none;
    }

    .custom-nav-link:hover,
    .custom-nav-link.active {
        background-color: rgba(228, 226, 213, 0.1);
        border-radius: 0.25rem;
    }

    .custom-btn-outline,
    .custom-btn-book-now {
        width: 100%;
        margin-top: 1rem;
        margin-left: 0 !important;
    }

    .hero-section h1 {
        font-size: 2.5rem;

    }

    .hero-section p {
        font-size: 1.5rem;
    }

    .display-4 {
        font-size: 2.5rem;
    }

    p.strong {
        font-size: 1rem;
    }

    #about .col-lg-5,
    .contact-form-card,
    .contact-form-card-light {
        text-align: center;
        padding: 1.5rem;
    }

    #about img {
        margin-bottom: 2rem;
    }

    .custom-hr {
        margin-left: auto;
        margin-right: auto;
    }

    .cta-section {
        padding: 5rem 0;
    }

    .cta-section h2 {
        font-size: 2rem;
    }

    .cta-section p {
        font-size: 0.9rem;
    }

    /* Team carousel responsiveness for tablets/smaller desktops (lg breakpoint and below) */
    /* On screens < 992px, col-lg-3 no longer applies. col-md-4 takes over if >= 768px. */
    .col-lg-3 {
        /* Explicitly setting for col-lg-3 to act as 3 items below lg */
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }


    /* Footer headings responsiveness */
    .custom-footer-heading {
        text-align: center;
    }

    .custom-hr-left {
        margin-left: auto;
        margin-right: auto;
    }
}

@media (min-width: 992px) {

    /* Explicitly for large desktops (lg breakpoint and up) */
    /* Ensure 4 items per row on larger screens */
    .col-lg-3 {
        flex: 0 0 25%;
        max-width: 25%;
    }
}

@media (max-width: 767.98px) {

    /* Applies for screens smaller than 768px (md breakpoint) */
    .contact-form-card .row .col-lg-6,
    .contact-form-card-light .row .col-lg-6 {
        text-align: center !important;
    }

    /* Team carousel responsiveness for small tablets/large phones (md breakpoint and below) */
    /* This ensures 2 items per row on screens below 768px, overriding col-md-4 if it was active */
    .col-md-4,
    .col-sm-6 {
        /* Both these classes will now act as 2 items per row below 768px */
        flex: 0 0 50%;
        max-width: 50%;
    }

    /* Price cards responsiveness for medium screens */
    #prices .row.row-cols-md-2 .col {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

@media (max-width: 575.98px) {

    /* Applies for screens smaller than 576px (sm breakpoint) */
    .hero-section h1 {
        font-size: 2rem;
    }

    .custom-btn-dark {
        padding: 0.6rem 1.5rem;
        font-size: 1rem;
    }

    .display-4 {
        font-size: 2rem;
    }

    .custom-card-title {
        font-size: 1.3rem;
    }

    /* Team carousel responsiveness for very small mobile (sm breakpoint and below) */
    /* This ensures 2 items per row on screens below 576px */
    .col-sm-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .team-img-wrapper {
        height: 280px;
    }

    /* Price cards responsiveness for small screens */
    #prices .row.row-cols-md-2 .col {
        flex: 0 0 100%;
        max-width: 100%;
    }
}