/* BundleMkr: C:\dev\projects\LetsWrappIt\LetsWrappItWeb2025\LetsWrappIt.Web\scripts\site.index.css */
/*/* bm:include css/normalize.css */

/* BundleMkr: C:\dev\projects\LetsWrappIt\LetsWrappItWeb2025\LetsWrappIt.Web\wwwroot\_devsrc\css\cascadelayers.css */
/* This line defines the layer order precedence before any rules are defined � like setting up your cascade blueprint. */
@layer base, components, utilities, themes, overrides;


/* BundleMkr: C:\dev\projects\LetsWrappIt\LetsWrappItWeb2025\LetsWrappIt.Web\wwwroot\_devsrc\css\sizes.css */
/* For desktop */
html {
    font-size: 18px !important;
}


/* For mobile */
@media (max-width: 768px) {
    html {
        font-size: 18px !important;
    }
}
/* BundleMkr: C:\dev\projects\LetsWrappIt\LetsWrappItWeb2025\LetsWrappIt.Web\wwwroot\_devsrc\css\responsivevars.css */
:root {
    --lwi-container-maxwidth: 100%; /* fallback for mobile */
}
@media (min-width: 200px) {
    :root {
        --lwi-container-maxwidth: 180px;
    }
}
@media (min-width: 300px) {
    :root {
        --lwi-container-maxwidth: 280px;
    }
}
@media (min-width: 400px) {
    :root {
        --lwi-container-maxwidth: 380px;
    }
}
@media (min-width: 500px) {
    :root {
        --lwi-container-maxwidth: 480px;
    }
}

@media (min-width: 600px) {
    :root {
        --lwi-container-maxwidth: 580px;
    }
}

@media (min-width: 769px) {
    :root {
        --lwi-container-maxwidth: 760px;
    }
}

@media (min-width: 1024px) {
    :root {
        --lwi-container-maxwidth: 960px;
    }
}

@media (min-width: 1216px) {
    :root {
        --lwi-container-maxwidth: 1152px;
    }
}

@media (min-width: 1408px) {
    :root {
        --lwi-container-maxwidth: 1344px;
    }
}



/* BundleMkr: C:\dev\projects\LetsWrappIt\LetsWrappItWeb2025\LetsWrappIt.Web\wwwroot\_devsrc\css\colors_01_palette.css */
/* colorpallette.css */
:root {
    /* 
        This is the color palet for the website. It is part of the house style.
        All other color settings, for example per element type, css class etc, 
        are derived from this color palet.
    */
    --palette-color-white: #FFFFFF; /* Pure White */
    --palette-color-black: #000000; /* Pure Black */

    --palette-color-lightgrey: #fafafa; /* ligt grijs*/
    --palette-color-grey: #535353; /* Grijs */

    --palette-color-bg: #E7DBC7; /* Background beige / geel */

    --palette-color-1: #2c2e5b; /* Midnight Blue */
    --palette-color-2: #245c81; /* Deep Sky Blue */
    --palette-color-3: #5E92AE; /* Steel Teal */
    --palette-color-4: #92BBD2; /* Light Blue Gray */
    --palette-color-5: #DB9A1B; /* Goldenrod */
    --palette-color-6: #B3328A; /* Raspberry Purple */
    --palette-color-7: #552672; /* Royal Purple */
}



/* Named colors (Semantic Roles), derived from house style */
:root {
    /*  Text + Content */
    --color-body: var(--palette-color-1);
    --color-body-dark: var(--palette-color-4);
    --color-navbar-bg: var(--palette-color-lightgrey);
    --color-navbar-bg-dark: var(--palette-color-grey);
    --color-title: var(--palette-color-3);
    --color-title-dark: var(--palette-color-4);
    --color-heading: var(--palette-color-3);
    --color-heading-dark: var(--palette-color-4);
    --color-content-text: var(--palette-color-1);
    --color-content-text-dark: var(--palette-color-4);
    --color-strong: var(--palette-color-6);
    --color-strong-dark: var(--palette-color-5);
    /* Backgrounds */
    --color-body-bg: var(--palette-color-bg);
    --color-body-bg-dark: var(--palette-color-black);
    --color-content-bg: var(--palette-color-bg);
    --color-content-bg-dark: var(--palette-color-black);
    /* Borders and Dividers */
    --color-border: var(--palette-color-4);
    --color-border-dark: var(--palette-color-2);
    /* Interaction */
    --color-link: var(--palette-color-5); /* Standard link */
    --color-link-dark: var(--palette-color-6);
    /* Highlights */
    --color-accent1: var(--palette-color-6); /* Primary CTA, badges */
    --color-accent1-dark: var(--palette-color-7);
    --color-accent2: var(--palette-color-7); /* Secondary buttons, subtle highlights */
    --color-accent2-dark: var(--palette-color-3);
}



/* BundleMkr: C:\dev\projects\LetsWrappIt\LetsWrappItWeb2025\LetsWrappIt.Web\wwwroot\_devsrc\css\colors_02_darkmode.css */
/* colors_darkmode.css */
@media (prefers-color-scheme: dark) {
    :root {
        /*  Text + Content */
        --color-body: var(--color-body-dark);
        --color-navbar-bg: var(--color-navbar-bg-dark);
        --color-title: var(--color-title-dark);
        --color-heading: var(--color-heading-dark);
        --color-content-text: var(--color-content-text-dark);
        --color-strong: var(--color-strong-dark);
        /* Backgrounds */
        --color-body-bg: var(--color-body-bg-dark);
        --color-content-bg: var(--color-content-bg-dark);
        /* Interaction */
        --color-link: var(--color-link-dark); /* Standard link */
        /* Highlights */
        --color-accent1: var(--color-accent1-dark); /* Primary CTA, badges */
        --color-accent2: var(--color-accent2-dark); /* Secondary buttons, subtle highlights */
    }
}


/* BundleMkr: C:\dev\projects\LetsWrappIt\LetsWrappItWeb2025\LetsWrappIt.Web\wwwroot\_devsrc\css\colors_03_bulmavars.css */
/* colors_03_bulma.css */
/* Bulma variables overrides (LightMode and Darkmode) */
:root {
    --bulma-text-strong: var(--color-strong);
    --bulma-title-color: var(--color-title);
    --bulma-content-heading-color: var(--color-heading);
}


/* Specificity does matter */
.title, .subtitle {
    --bulma-text-strong: var(--color-strong);
    --bulma-title-color: var(--color-title);
    --bulma-content-heading-color: var(--color-heading);
}

/* BundleMkr: C:\dev\projects\LetsWrappIt\LetsWrappItWeb2025\LetsWrappIt.Web\wwwroot\_devsrc\css\colors_04_customclasses.css */
/* colors_lightmode.css */

/* plain html colors */
html {
    color: var(--color-content-text);
    background-color: var(--color-body-bg);
}

body {
    color: var(--color-body);
    
}

h1, h2, h3, h4, h5, h6 {
    color: var(--color-heading);
}
a {
    color: var(--color-link);
}

p, span, div {
    color: var(--color-content-text);
    
}



/* Custom color classes */
.accent, .accent1 {
    color: var(--color-accent1);
}
.accent2 {
    color: var(--color-accent2);
}




/* BundleMkr: C:\dev\projects\LetsWrappIt\LetsWrappItWeb2025\LetsWrappIt.Web\wwwroot\_devsrc\css\typology.css */

html, body, p, span, div, a {
    font-family: 'Source Sans Pro', sans-serif;
}

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

/* BundleMkr: C:\dev\projects\LetsWrappIt\LetsWrappItWeb2025\LetsWrappIt.Web\wwwroot\_devsrc\css\layout.css */
:root {
    /* This are the layout settings defined the theme design.
        
    */
    --site-content-width: 1200px;
    --lwi-navbar-height: 100px;
}


/* Should go to MainLayout.css */
.page {
    padding-top:var(--lwi-navbar-height);
}

.container {
    width: var(--lwi-container-maxwidth);
}

/* BundleMkr: C:\dev\projects\LetsWrappIt\LetsWrappItWeb2025\LetsWrappIt.Web\wwwroot\_devsrc\css\zindex.css */
:root {
    --lwi-zindex-navbarbg: 50;
    --lwi-zindex-gradientbg: 100;
    --lwi-zindex-wavebg: 120;
    --lwi-zindex-page: 500;
    --lwi-zindex-footer: 600;
    --lwi-zindex-seemore: 1000;

    --lwi-zindex-navbar-items: 2000;
    --lwi-zindex-fullpagemenu: 2500;
    --lwi-zindex-dynadot: 9999;
}

/* BundleMkr: C:\dev\projects\LetsWrappIt\LetsWrappItWeb2025\LetsWrappIt.Web\wwwroot\_devsrc\css\bulma_custom.css */
.is-flex-column {
    display: flex !important;
    flex-direction: column !important;
}
.is-flex-column-reverse {
    display: flex !important;
    flex-direction: column-reverse !important;
}




.is-maxwidth-512 {
    max-width: 512px;
}
.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

/* BundleMkr: C:\dev\projects\LetsWrappIt\LetsWrappItWeb2025\LetsWrappIt.Web\wwwroot\_devsrc\fonts\Montserrat\webfonts_fonts_Montserrat.css */
/* Normal style (all weights) */
@font-face {
    font-family: 'Montserrat';
    src: url('/fonts/Montserrat/Montserrat-VariableFont_wght.ttf') format('truetype-variations');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* Italic style (all weights) */
@font-face {
    font-family: 'Montserrat';
    src: url('/fonts/Montserrat/Montserrat-Italic-VariableFont_wght.ttf') format('truetype-variations');
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}

/* BundleMkr: C:\dev\projects\LetsWrappIt\LetsWrappItWeb2025\LetsWrappIt.Web\wwwroot\_devsrc\fonts\Baloo\webfonts_fonts_Baloo.css */
/* #### Generated By: http://www.cufonfonts.com #### */

@font-face {
    font-family: 'Baloo';
    font-style: normal;
    font-weight: normal;
    src: url('/fonts/Baloo/Baloo-Regular.woff') format('woff');
}


/* BundleMkr: C:\dev\projects\LetsWrappIt\LetsWrappItWeb2025\LetsWrappIt.Web\wwwroot\_devsrc\fonts\Source_Sans_Pro\webfonts_fonts_SourceSansPro.css */
@font-face {
    font-family: 'Source Sans Pro';
    src: url('/fonts/Source_Sans_Pro/SourceSansPro-BlackItalic.woff2') format('woff2'),
        url('/fonts/Source_Sans_Pro/SourceSansPro-BlackItalic.woff') format('woff');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Source Sans Pro';
    src: url('/fonts/Source_Sans_Pro/SourceSansPro-ExtraLight.woff2') format('woff2'),
        url('/fonts/Source_Sans_Pro/SourceSansPro-ExtraLight.woff') format('woff');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Source Sans Pro';
    src: url('/fonts/Source_Sans_Pro/SourceSansPro-Black.woff2') format('woff2'),
        url('/fonts/Source_Sans_Pro/SourceSansPro-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Source Sans Pro';
    src: url('/fonts/Source_Sans_Pro/SourceSansPro-BoldItalic.woff2') format('woff2'),
        url('/fonts/Source_Sans_Pro/SourceSansPro-BoldItalic.woff') format('woff');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Source Sans Pro';
    src: url('/fonts/Source_Sans_Pro/SourceSansPro-Bold.woff2') format('woff2'),
        url('/fonts/Source_Sans_Pro/SourceSansPro-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Source Sans Pro';
    src: url('/fonts/Source_Sans_Pro/SourceSansPro-Italic.woff2') format('woff2'),
        url('/fonts/Source_Sans_Pro/SourceSansPro-Italic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Source Sans Pro';
    src: url('/fonts/Source_Sans_Pro/SourceSansPro-ExtraLightItalic.woff2') format('woff2'),
        url('/fonts/Source_Sans_Pro/SourceSansPro-ExtraLightItalic.woff') format('woff');
    font-weight: 200;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Source Sans Pro';
    src: url('/fonts/Source_Sans_Pro/SourceSansPro-LightItalic.woff2') format('woff2'),
        url('/fonts/Source_Sans_Pro/SourceSansPro-LightItalic.woff') format('woff');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Source Sans Pro';
    src: url('/fonts/Source_Sans_Pro/SourceSansPro-Light.woff2') format('woff2'),
        url('/fonts/Source_Sans_Pro/SourceSansPro-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Source Sans Pro';
    src: url('/fonts/Source_Sans_Pro/SourceSansPro-SemiBold.woff2') format('woff2'),
        url('/fonts/Source_Sans_Pro/SourceSansPro-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Source Sans Pro';
    src: url('/fonts/Source_Sans_Pro/SourceSansPro-SemiBoldItalic.woff2') format('woff2'),
        url('/fonts/Source_Sans_Pro/SourceSansPro-SemiBoldItalic.woff') format('woff');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Source Sans Pro';
    src: url('/fonts/Source_Sans_Pro/SourceSansPro-Regular.woff2') format('woff2'),
        url('/fonts/Source_Sans_Pro/SourceSansPro-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


/* BundleMkr: C:\dev\projects\LetsWrappIt\LetsWrappItWeb2025\LetsWrappIt.Web\wwwroot\_devsrc\fonts\Urbanist\webfonts_fonts_Urbanist.css */
@font-face {
    font-family: 'Urbanist';
    font-style: normal;
    font-weight: normal;
    src: url('/fonts/Urbanist/Urbanist-Regular.woff') format('woff');
}

@font-face {
    font-family: 'Urbanist';
    font-style: normal;
    font-weight: bold;
    src: url('/fonts/Urbanist/Urbanist-Bold.woff') format('woff');
}

@font-face {
    font-family: 'Urbanist';
    font-style: normal;
    font-weight: lighter;
    src: url('/fonts/Urbanist/Urbanist-Light.woff') format('woff');
}

@font-face {
    font-family: 'Urbanist';
    font-style: italic;
    font-weight: normal;
    src: url('/fonts/Urbanist/Urbanist-Italic.woff') format('woff');
}

@font-face {
    font-family: 'Urbanist';
    font-style: italic;
    font-weight: lighter;
    src: url('/fonts/Urbanist/Urbanist-LightItalic.woff') format('woff');
}


/* BundleMkr: C:\dev\projects\LetsWrappIt\LetsWrappItWeb2025\LetsWrappIt.Web\wwwroot\_devsrc\css\mainlayout.css */

/* Should go to MainLayout.css */
.page {
    position: relative;
    padding-top: var(--lwi-navbar-height);
    z-index: var(--lwi-zindex-page)
}

/* BundleMkr: C:\dev\projects\LetsWrappIt\LetsWrappItWeb2025\LetsWrappIt.Web\wwwroot\_devsrc\css\pagetrans.css */
@view-transition {
    navigation:auto;
}