/*
Theme Name: Mamoda Webdesign
Theme URI: https://mamoda.nl
Author: Mamoda Nederland
Author URI: https://mamoda.nl
Description: Thema van Mamoda
*/



:root {
    --color-primary: #1B2A4A;
    --color-secondary: #b8965a;
    --color-secondary-tint: #C9AF7C;
    --color-white: #fcfbf8;
    --color-creme: #f5f2ec;

    --color-border: #ede8de;
    --color-border-dark: #33415f;


    --color-title-primary: #1B2A4A;
    --color-text-primary: #5c6376;
    --color-title-white: #fcfbf8;
    --color-text-white: #b9c0cf;
    --color-text-accent: #b8965a;

    --color-text-brown: #8a8577;
}

::selection {
    background-color: var(--color-secondary);
    color: var(--color-title-primary);
}



/*
===========================================
 Texts
===========================================
 */
body {
    font-family: 'Manrope', sans-serif;
    background-color: var(--color-white);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Cormorant Garamond', serif;
}

h1.titel {
    font-weight: 300;
    font-size: 56px;
    line-height: 1.1;
}


h2.titel {
    font-weight: 300;
    font-size: 42px;
    line-height: 1.15;
}



h3.titel {
    font-weight: 400;
    font-size: 26px;
    font-family: 'Manrope', sans-serif;
}

h3.lead-titel {
    font-weight: 600;
    font-size: 16px;
    font-family: 'Manrope', system-ui, sans-serif;
}

span.subtitel {
    font-size: 11px;
    display: block;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--color-text-accent);
}

p,
.content p,
.content {
    font-size: 17.5px;
    line-height: 1.75;
    color: var(--color-text-primary);
}

p,
.sub-content p,
.sub-content {
    font-size: 15px;
    line-height: 1.75;
    color: var(--color-text-primary);
}


@media(max-width:768px) {
    h1.titel {
        font-weight: 300;
        font-size: 40px;
        line-height: 1.1;
    }

    h2.titel {
        font-weight: 300;
        font-size: 35px;
        line-height: 1.15;
    }

    p,
    .content p,
    .content {
        font-size: 15px;
        line-height: 1.75;
        color: var(--color-text-primary);
    }

    p,
    .sub-content p,
    .sub-content {
        font-size: 13px;
        line-height: 1.75;
        color: var(--color-text-primary);
    }

}


.subtitel,
.titel,
.content {
    margin-bottom: 28px;
}

/*
===========================================
 Colors
===========================================
 */
.bg-primary {
    background-color: var(--color-primary) !important;
}

.bg-secondary {
    background-color: var(--color-secondary) !important;
}

.bg-creme {
    background-color: var(--color-creme) !important;
}

.bg-white {
    background-color: var(--color-white) !important;
}

.bg-primary h1,
.bg-primary h2,
.bg-primary h3,
.bg-primary h4,
.bg-primary h5,
.bg-primary h6 {
    color: var(--color-title-white);
}

.bg-primary p,
.bg-primary .content,
.bg-primary .sub-content,
.bg-primary .content p,
.bg-primary .sub-content p {
    color: var(--color-text-white);
}

.bg-primary .border-top {
    border-top: 1px solid var(--color-border-dark) !important;
}

.bg-primary .border-top {
    border-top: 1px solid var(--color-border-dark) !important;
}

.bg-white .border-top,
.bg-creme .border-top {
    border-top: 1px solid var(--color-border) !important;
}

/*
===========================================
 Buttons
===========================================
 */

.btn {
    padding: 17px 34px !important;
    font-size: 12.5px !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    border-radius: 0 !important;
    border: none !important;
}

.btn-primary {
    background: var(--color-primary) !important;
    color: var(--color-white) !important;

}

.btn-primary:hover {
    background: var(--color-secondary) !important;
}

.btn-tertiary {
    background: var(--color-secondary) !important;
    color: var(--color-white) !important;

}

.btn-tertiary:hover {
    background: var(--color-secondary-tint) !important;
}

.btn-white {
    background: var(--color-white) !important;
    color: var(--color-title-primary) !important;
    border: 1px solid var(--color-primary) !important;

}

.btn-white:hover {
    background: var(--color-primary) !important;
    color: var(--color-text-white) !important;
}

/*
===========================================
 Menu
===========================================
 */
#menu-primary-menu li,
#menu-secondary-menu li {
    margin-left: 2rem;
}

#menu-primary-menu li a,
#menu-secondary-menu li a {
    text-decoration: none;
    cursor: pointer;
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-title-primary);

}

#menu-secondary-menu li {
    padding: 16px 0px;
}

.secondary-menu {

    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}


#menu-primary-menu li a:hover,
#menu-secondary-menu li a:hover {
    color: var(--color-text-accent);
}

#menu-primary-menu .current-menu-item a,
#menu-secondary-menu .current-menu-item a {
    color: var(--color-secondary);
}

#menu-secondary-menu .current-menu-item {
    border-top: 1px solid var(--color-secondary);
}

#menu-secondary-menu {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin: 0;
    padding: 0;
}





/*
===========================================
 Menu
===========================================
 */
.offcanvas-body {
    padding: 1.5rem 1.75rem;
}

.offcanvas-body .navbar-nav {
    gap: 0.25rem;
}

.offcanvas-body .menu-item a {
    display: block;
    padding: 0.6rem 0.75rem;
    text-decoration: none;
    cursor: pointer;
    font-size: 17px;
    letter-spacing: 0.08em;
    line-height: 1.5;
    text-transform: uppercase;
    color: var(--color-title-primary);
    border-radius: 0.5rem;
    transition: background-color 0.2s ease, color 0.2s ease, padding-left 0.2s ease;
}

.offcanvas-body .menu-item a:hover,
.offcanvas-body .menu-item a:focus {
    background-color: rgba(0, 0, 0, 0.04);
    padding-left: 1rem;
}

/* Actieve pagina markeren */
.offcanvas-body .current-menu-item > a {
    background-color: rgba(0, 0, 0, 0.05);
    font-weight: 600;
}

/* Scheidingslijn subtieler maken */
.offcanvas-body hr {
    margin: 1.25rem 0;
    opacity: 0.1;
}

/* Submenu's (depth 2) laten inspringen en verkleinen */
.offcanvas-body .sub-menu {
    list-style: none;
    padding-left: 1rem;
    margin: 0.25rem 0 0.5rem;
}

.offcanvas-body .sub-menu a {
    font-size: 14px;
    text-transform: none;
    letter-spacing: 0.02em;
    opacity: 0.75;
}


/*
===========================================
 Footer
===========================================
 */
.footer-menu .menu-item a,
.footer-menu .menu-item p {
    font-size: 14.5px;
    color: rgb(185, 192, 207);
    text-decoration: none;
}

.footer-menu .menu-item a:hover,
.footer-menu .menu-item p:hover {
    font-size: 14.5px;
    text-decoration: none;
    color: white;
}

.footer-menu .menu-item.current-menu-item a {
    color: white;
}

.footer-menu ul {
    list-style: none;
    padding-left: 0 !important;
}

.subtitel.footer-subtitel{
    margin-top:25px;
    margin-bottom:5px;
}


/*
===========================================
 Diensten
===========================================
 */

/*
===========================================
 Side by side
===========================================
 */
.voordelen {
    border-top: 1px solid var(--color-border);
}

.voordeel {
    border-bottom: 1px solid var(--color-border);
}



/*
===========================================
 Side by side
===========================================
 */
.cijfers-cijfer {
    font-family: "Cormorant Garamond", serif;
    font-size: 46px;
    line-height: 1;
    color: var(--color-text-accent);
}

/*
===========================================
 Quote
===========================================
 */
.quote-content {
    font-family: "Cormorant Garamond", serif;
    font-weight: 300;
    font-style: italic;
    font-size: 36px;
    line-height: 1.4;
}


/*
===========================================
 USPS
===========================================
 */
.usps.bg-primary .usp {
    border-top: 1px solid var(--color-border-dark);
}

.usps.bg-creme .usp {
    border-top: 1px solid var(--color-border);
}

.usps-blokken.bg-primary .usp {
    border-top: 1px solid var(--color-border-dark);
}

.usps-blokken.bg-creme .usp {
    background-color: var(--color-white);
}

.usps-blokken .usp-titel {
    font-family: "Cormorant Garamond", serif;
    font-weight: 400;
    font-size: 25px;
    margin: 0px 0px 12px;
}


/*
===========================================
 Side by side usps
===========================================
 */
.side-by-side-usps .usps-grid .usp-col {
    position: relative;
}

@media (min-width: 768px) {

    /* verticale lijn tussen linker- en rechterkolom */
    .side-by-side-usps .usps-grid .usp-col:nth-child(odd) {
        border-right: 1px solid var(--color-border);
    }

    /* horizontale lijn onder de eerste rij */
    .side-by-side-usps .usps-grid .usp-col:nth-child(-n+2) {
        border-bottom: 1px solid var(--color-border);
    }
}

/* mobiel: alleen horizontale lijnen tussen de usps */
@media (max-width: 767.98px) {
    .side-by-side-usps .usps-grid .usp-col:not(:last-child) {
        border-bottom: 1px solid var(--color-border);
    }
}

h3.usp-side-titel,
.titel.usp-side-titel {
    font-family: "Cormorant Garamond", serif;
    font-weight: 400;
    font-size: 23px;
    margin: 0px 0px 10px;
}


/*
===========================================
 Pakketten
===========================================
 */
.border-pakket {
    border: solid 1px var(--color-border);
}

.prijs-tekst {
    font-family: "Cormorant Garamond", serif;
    font-size: 26px;
    color: rgb(217, 189, 134) !important;
    margin-bottom: 6px;
}


.prijs-content {
    font-size: 13px;
    color: rgb(143, 151, 168);
    margin-bottom: 34px;
}

/*
===========================================
 Pakketten tabel
===========================================
 */
.pakket-tabel {
    background: transparent;
}

.pakket-tabel th,
.pakket-tabel td {
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    padding: 1.25rem 1rem;
    vertical-align: middle;
}

.pakket-tabel thead th {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

/* koppen van de pakketten in de serif-stijl */
.pakket-tabel .pakket-kop {
    font-family: inherit;
    /* vervang door je serif titel-font, bijv. var(--font-titel) */
    font-size: 1.25rem;
    font-weight: 400;
}

/* middelste pakket uitgelicht in goud */
.pakket-tabel .pakket-kop-uitgelicht {
    color: #b08d4a;
    /* pas aan naar je goudkleur */
}



/*
===========================================
 Side by side over ons
===========================================
 */
.contact-border-top {
    border-top: 1px solid var(--color-border);
}

.contact-name {
    font-family: "Cormorant Garamond", serif;
    font-size: 22px;
    margin-bottom: 6px;
}

.contact-role {
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-text-accent);
}

.over-ons-mail {
    font-size: 15px;
    color: rgb(92, 99, 118);
    line-height: 1.7;
    text-decoration: none;
}

.over-ons-tel {
    font-size: 15px;
    color: rgb(92, 99, 118);
    line-height: 1.7;
    text-decoration: none;
}



/*
===========================================
 Usps over ons
===========================================
 */
.usp-streep {
    width: 24px;
    height: 2px;
    background-color: #c9a45c;
}

.usp-over-ons-titel {
    font-family: "Cormorant Garamond", serif;
    font-weight: 400;
    font-size: 25px;
    margin: 0px 0px 12px;
}

.usp-over-ons-tekst {
    font-size: 15.5px;
    line-height: 1.75;
    margin: 0px;
}

/*
===========================================
 Faq
===========================================
 */
.faq-accordion .accordion-item {
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--color-border);
    border-radius: 0;
}

.faq-accordion .accordion-item:first-child {
    border-top: 1px solid var(--color-border);
}

.faq-accordion .accordion-button {
    background: transparent;
    box-shadow: none;
    padding: 1.5rem 0;
    font-weight: 600;
}

.faq-accordion .accordion-button:focus {
    box-shadow: none;
}

/* +/- icoon in plaats van de standaard pijl */
.faq-accordion .accordion-button::after {
    background-image: none;
    content: "+";
    width: auto;
    height: auto;
    font-size: 1.5rem;
    line-height: 1;
    transform: none;
    color: var(--color-secondary);
}

.faq-accordion .accordion-button:not(.collapsed)::after {
    content: "\2212";
    /* minteken */
}

.faq-accordion .accordion-body {
    padding: 0 0 1.5rem 0;
}

h3.accordion-header {
    font-family: 'Manrope', system-ui, sans-serif;
}

/*
===========================================
 Formulier
===========================================
 */
.gform_title {
    font-family: "Cormorant Garamond", serif;
    font-weight: 400;
    font-size: 28px;
    margin: 0px 0px 32px;
}

.contactform input,
.contactform select,
.contactform textarea {
    background: var(--color-white) !important;
    border: 1px solid var(--color-border) !important;
    font-size: 15px !important;
    outline: none !important;
    line-height: 1.5 !important;
}

.contactform input,
.contactform textarea {
    padding: 14px 20px !important;
}

.gfield_label.gform-field-label {
    font-size: 11.5px !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    color: var(--color-text-brown) !important;
    margin-bottom: 9px !important;
}

.gform_required_legend {
    display: none !important;
}

.gform_button.button {
    width: 100% !important;
    padding: 17px 34px !important;
    font-size: 12.5px !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    border-radius: 0 !important;
    border: none !important;
    background: var(--color-primary) !important;
    color: var(--color-white) !important;
}

.gform_button.button:hover {
    background: var(--color-secondary) !important;
}

.form-disclaimer {
    margin-top: 18px;
    font-size: 13px;
    color: var(--color-text-brown) !important;
    line-height: 1.6;
}