/* Import font from Google - Go to fonts.google.com, select a font and look for the import command */

@import url('https://fonts.googleapis.com/css2?family=Georama:wght@100&display=swap');
@font-face {
    font-family: 'Junegull';
    src:
            url('../fonts/Junegull-Regular.woff2') format('woff2'),
            url('../fonts/Junegull-Regular.woff') format('woff'),
            url('../fonts/Junegull-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

:root {

    --cassiopeia-color-primary: #00ff00;
    --cassiopeia-color-link: #0000ff;
    --cassiopeia-color-hover: #ff0000;

    --cassiopeia-font-family-body: "Roboto", sans-serif;
    --cassiopeia-font-family-headings: "Roboto", sans-serif;
    --cassiopeia-font-weight-headings: 700;
    --cassiopeia-font-weight-normal: 400;

    --blue: #0d6efd;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #d63384;
    --red: #dc3545;
    --orange: #fd7e14;
    --yellow: #ffc107;
    --green: #198754;
    --teal: #20c997;
    --cyan: #0dcaf0;
    --white: #fff;
    --gray: #6c757d;
    --gray-dark: #343a40;
    --gray-100: #f8f9fa;
    --gray-200: #e9ecef;
    --gray-300: #dee2e6;
    --gray-400: #ced4da;
    --gray-500: #adb5bd;
    --gray-600: #6c757d;
    --gray-700: #495057;
    --gray-800: #343a40;
    --gray-900: #212529;
    --primary: #0d6efd;
    --secondary: #6c757d;
    --success: #198754;
    --info: #0dcaf0;
    --warning: #ffc107;
    --danger: #dc3545;
    --light: #f8f9fa;
    --dark: #212529;
    --primary-rgb: 13, 110, 253;
    --secondary-rgb: 108, 117, 125;
    --success-rgb: 25, 135, 84;
    --info-rgb: 13, 202, 240;
    --warning-rgb: 255, 193, 7;
    --danger-rgb: 220, 53, 69;
    --light-rgb: 248, 249, 250;
    --dark-rgb: 33, 37, 41;
    --white-rgb: 255, 255, 255;
    --black-rgb: 0, 0, 0;
    --body-color-rgb: 33, 37, 41;
    --body-bg-rgb: 255, 255, 255;
    --font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
    --body-font-family: var(--cassiopeia-font-family-body);
    --body-font-size: 2rem;
    --body-font-weight: 400;
    --body-line-height: 1.5;
    --body-color: #383838;
    --body-bg: #efefef;
}

/* Use font on the page: On Google you can also find the CSS instruction for using the font. If you put this in the body element then the font will be used on the whole website. */

body {
    font-family: 'Georama', sans-serif;
    background-color: #FDF8ED;
}

/* The page header of Cassiopeia has the class "header" so you control it with .header */

.header {
    /*background: rgb(2, 0, 36);*/
    /*background: linear-gradient(90deg, rgba(2, 0, 36, 1) 0%, rgba(119, 9, 121, 1) 35%, rgba(0, 212, 255, 1) 100%);*/
}

/*
Smaller banner
*/
.container-banner .banner-overlay {
    height: 30vh;
}

.container-header .container-nav {
    justify-content: flex-start;
    background-color: #FDF8ED;
}

/* Container header aangepast. */
.container-header {
    background-color: #FDF8ED !important;
    background-image: none !important;
}

.container-header .grid-child {
    height: 50px;
    padding: 0em 0em 0.5em 0em;
    margin: 0 27%;
}

/* toegevoegd voor de achtergrondkleur van het menu */
.container-nav {
    /*background-color: #DBD9D2;*/
    /*padding-bottom: 0.5em;*/
}
.container-header nav {
    margin-top: 0em;
}
    /* Color the dropdown menu in the menu with the class .metismenu.mod-menu .mm-collapse */

.metismenu.mod-menu .mm-collapse {
    /*background: #475BAF;*/
    /*color: #ff0000;*/
}

/* The links in the dropdown menu you have to adress them individually */

.metismenu.mod-menu .mm-collapse .metismenu-item a {
    /*color: #ff0000;*/
    /*background-color: #FFF;*/
}

/* Dit zorgt voor dat het onderliggende streepje menu-tekst verkleurt (#rood #ff0000) */
.container-header .metismenu>li>a:hover:after,
.container-header .metismenu>li>button:hover:before,
.container-header .metismenu>li.active>a:after,
.container-header .metismenu>li.active>button:before{
    background: #FAAC04;
    font-size: 18px;
    font-weight: 600;
    height: 3px;
}

/* Default (inactive) state */
/*.menu-home i {*/
/*    color: black; !* Inactive color *!*/
/*}*/

/*!* Active state *!*/
/*.menu-home.active i {*/
/*    color: yellow; !* Active color *!*/
/*}*/


/* menu font in passieve toestant */
.container-header .mod-menu>li>a {
    color: #000;
    font-size: 18px;
    font-weight: 600;
    font-family: Calibri, sans-serif;
}

.container-header .metismenu>li.level-1.active>a {
    color: #FAAC04;
}

.container-banner {
    margin: unset;
}

.container-top-b>* {
    width: 684px;
    margin: unset;
}

.container-top-b {
    width:684px !important;
}

.top-b .card-body {
    padding: unset;
    background-color: #FDF8ED;
}

.top-b {
    border:unset;
}

.container-top-b .card {
    box-shadow: unset;
    -webkit-box-shadow: unset;
}

.menu-logo {
    float: right;
    margin-bottom: -50px;
}

.menu-logo a img {
    height: 100px;
}

.site-grid {
    /*+background-color: #f0f0f0; !* change this to your desired color *!*/
    /*background-image: url('../images/Test achtergrondfoto_deGrootKlussen.webp'); !* provide the path to your image *!*/
    /*background-image: url('../images/achtergrond_tafel_20250104_115705.webp');*/
    /*+ background-image: url('../images/achtergrond_tafel_1920x1080 met gereedschap.webp');*/
    /*+ background-position: center center;*/
    /*+ background-size: cover; !* ensures the background image covers the entire area *!*/
    /*+ background-attachment: fixed; !* keeps the background fixed during scrolling *!*/
    /*background-repeat: no-repeat;*/
    /*background-size: 1920px 1280px;*/
}

.background-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -1;
}

/*.responsive-bg {*/
/*    width: 100%;*/
/*    height: 100%;*/
/*    object-fit: cover; !* Ensures the image fills the container without repeating *!*/
/*}*/


.content_wrapper {
    background-color: #FDF8ED; /* rgba(255,255,255 ,0.9); */
    width: 800px;
    min-height: auto;
    margin: 0 auto 3em;
    padding: 20px;
}

.content_title {
    border-bottom: 1px solid #1D1F20;
}

.content_title h1,
.com-contact h2{
    color: rgba(0,0,0 ,1);
    font-family: junegull;
}

.main_content_home {
    display: flex;
    align-items: center; /* Align items vertically in the center */
    /*width: 760px;*/
    margin: 0 auto;
    /*display:inline-block; Dit is wanneer er nog naast de hoofdtekst de naw gegevens moet staan.*/
    vertical-align: top;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: small;
    font-weight: normal;
    font-style: normal;
    line-height: 1.7;
}

.main_content_left {
    display: flex;
    align-items: center; /* Ensures the image itself is centered inside */
}

.main_content_left img {
    max-width: 100%; /* Ensures image is responsive */
    height: auto; /* Keeps aspect ratio */
}

.main_content_right {
    flex: 1; /* Allows text div to take up remaining space */
    padding-left: 20px; /* Adds spacing between image and text */
}

.main_content_right ul {
    padding-left: 1.2rem;
}

.main_content_right ul li {
    margin-bottom: 0.3rem;
}

/* Foto page */
.main_content_fotos {
    /*display: flex;*/
    align-items: center; /* Align items vertically in the center */
    /*width: 760px;*/
    margin: 0 auto;
    /*display:inline-block; Dit is wanneer er nog naast de hoofdtekst de naw gegevens moet staan.*/
    vertical-align: top;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: small;
    font-weight: normal;
    font-style: normal;
    line-height: 1.7;
}
.main_content_fotos h2 {
    border-bottom: 3px solid #FAAC04;
    margin-bottom: 30px;
}

/* Wie ben ik? */
.main_content_wie_ben_ik {
    /*display: flex;*/
    /*align-items: flex-start; !* center; Align items vertically in the center *!*/
    /*width: 760px;*/
    /*margin: 0 auto;*/
    /*display:inline-block; Dit is wanneer er nog naast de hoofdtekst de naw gegevens moet staan.*/
    /*vertical-align: top;*/
    font-family: Tahoma, Geneva, sans-serif;
    font-size: small;
    font-weight: normal;
    font-style: normal;
    line-height: 1.7;
}


.jacobvandekamp_foto {
    /*width: 150px;*/
    /*height: auto;*/
    /*float: right; Moves image to the right */
    /*margin: auto; Space between text and image */
    border-radius: 50%;
}

/* Modules have the class card, so you control them with .card - if you want to control only a specific module, you can give the module its own CSS class in the settings and then control it with that */

.card {
    box-shadow: 12px 4px 18px 0px rgba(0, 0, 0, 0.35);
    -webkit-box-shadow: 12px 4px 18px 0px rgba(0, 0, 0, 0.35);
    -moz-box-shadow: 12px 4px 18px 0px rgba(0, 0, 0, 0.35);
}

/* Modules are on different module positions in the Cassiopeia template then the modules get in addition to card also the position as class name, for example main-top - so if you want to change all modules to main top you take .main-top.card */

.main-top.card {
    background: #e1e9f5;
}


/* Headings are html elements, the main heading is an h1, then comes h2, h3, h4 and so on. You control an html element by simply writing the name in front of it */

h1 {
    text-shadow: 2px 2px 8px rgba(150, 150, 150, 1);
    color: rgba(250, 172, 4, 1) /* rgba(119, 9, 121, 1);*/
}

/* In Joomla most buttons have the class btn-primary - in the element inspector you can check if the button you want to color really has this color.
*/

.btn-primary {
    background: rgba(219, 217, 210, 1);
    color: rgba(29, 31, 32, 1);
    border-color: rgba(29, 31, 32, 1);
}

/* If you want to color something, only if you move the mouse over it then write :hover after it
*/

.btn-primary:hover {
    background: rgba(250, 172, 4, 1);
    border-color: rgba(29, 31, 32, 1);
}

/* In Joomla all article images have the class item-image, if you want to control only a specific image, then you have to give the image inside the article its own CSS class.
*/

.item-image {
    border: 2px solid #ff0000;
}


/*If you run into icons on the website, you can color them individually*/

.icon-user {
    color: #403678;

}

/* or you color all icons with this special statement*/

/*.fa, .fas, [class*=" icon-"], [class^="icon-"] {*/
/*    color: #403678;*/
/*}*/
/* Inactive state */
.fa, .fas, [class*=" icon-"], [class^="icon-"] {
    color: #1D1F20; /* Inactive color (nearly black) */
}

/* Active state */
.current .fa, .current .fas, .active .fa, .active .fas {
    color: #FAAC04; /* Active color (yellow) */
}

/* Hover effect for menu icons */
/*.fa:hover, .fas:hover {*/
/*    color: #FFA500; !* Orange on hover *!*/
/*}*/


/* The page footer of Cassiopeia has the class "footer" so you control it with .footer */

.footer {
    /*background: rgb(2, 0, 36);*/
    /*background: linear-gradient(90deg, rgba(2, 0, 36, 1) 0%, rgba(119, 9, 121, 1) 35%, rgba(0, 212, 255, 1) 100%);*/
    background-color: rgba(250, 172, 4, 1);
    margin-top: unset;
    background-image: none;
    font-family: "Roboto Flex";
    font-size: 18px;
}

.footer li{
    list-style: none;
    color: #1D1F20;
}

/*.footer h1 {*/
/*    color: #fff;*/
/*    padding-left: 27px;*/
/*}*/

.com_contact .contact {
    /*background-color: rgba(255,255,255 ,0.9);*/
    width: 800px;
    margin: 0 auto;
    min-height: auto;
    margin-bottom: 1em;
    padding: 20px;

    font-family: "Roboto Flex";
    font-size: small;
    font-weight: normal;
    font-style: normal;
    line-height: 1.7;
}

/*Scoping with .com_contact:*/

/*The rules now apply only to .control-group, .control-label, and .controls that are descendants of .com_contact.*/
/*If .contact is also used exclusively on this page, you can combine it with .com_contact in your selector for extra specificity.*/
.com_contact .control-group {
    display: flex;          /* Using display: flex ensures that the .control-label and .controls divs are placed inline. */
    align-items: center;    /* Align the label and input vertically on the same line */
    gap: 10px;              /* Optional: Adjust spacing between label and input field */
}

/* Combining Selectors for Better Specificity: If needed, you can target both classes like this: */
.com_contact .control-label,
.contact .control-label {
    width: 33%; /* Set the desired width for the label */
    margin: 0; /* Remove any default margin */
    text-align: left; /* Align label text to the right (optional) */
}

.com_contact .controls {
    width: 62%; /* Set the desired width for the input field */
    margin: 0; /* Remove any default margin */
}

.form-control {
    background-color: unset;
}

.com_contact .controls p {
    display:none;
}
/*.form-check-input[type=checkbox] {*/
/*    background-color: #fff;*/
/*    margin-top: 0.8em;*/
/*    border: var(--border-width)solid #ced4da;*/
/*}*/
/* Custom Breakpoints for Fine-tuning */
@media (max-width: 320px) {
    /* Styles for very small devices */
    .content_wrapper {
        width: 300px;
    }
    .main_content_home {
        width: 300px;
    }
}
/*Portrait-Specific Breakpoints*/
@media (max-width: 575.98px) {
    /* Styles for extra small devices (e.g., phones) */
}

@media (max-width: 420px) {
    /* Styles specifically for phones like Galaxy A52 and S21 */
    .menu-logo a img {
        height: 80px !important;
    }
    .container-header .navbar-toggler {
        border: 2px solid #000;
        margin-top: -1em;
    }

    .container-top-b {
        width:320px !important;
    }

    .container-top-b .card {
        width: 320px;
    }
    .container-header .navbar-collapse.show {
        background: #FDF8ED;
    }
    .container-header nav {
        margin-top: 0em;
    }
    .container-banner .banner-overlay {
        height: 20vh;
    }
    .content_wrapper {
        width: 320px;
    }
    .main_content_home {
        /*flex: unset;*/
        display:inline-block;
        /*width: 380px;*/
    }

    .com_contact .contact {
        width: 330px
    }
    .com-contact__form.contact-form {
        with: 320px;
    }
    .com_contact .control-label, .contact .control-label {
        width: 30%;
    }

    .com_contact .controls {
        width: 68%;
    }

    .footer .grid-child {
        /*align-items: unset;*/
    }
}


/* Existing Bootstrap/Cassiopeia Breakpoints */
@media (width >= 576px) {
    /* Phones in landscape mode */
    .container-header .navbar-collapse.show {
        background-color: #FDF8ED;
    }
}

@media (width >= 768px) {
    /* Tablets */
    .container-banner .banner-overlay {
        height: 30vh;
    }
    .site-grid {
        background-size: contain; /* Ensures the entire image is visible */
        background-position: center center;
        background-attachment: scroll; /* Fixes "fixed" issues on iPad */
        background-repeat: no-repeat; /* Prevents repeating */
    }

    .site-grid::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5); /* Semi-transparent overlay */
        z-index: -1;
    }

    .container-header .navbar-toggler {
        border: 2px solid #000;
    }

    .container-header .navbar-collapse.show {
        background: #FDF8ED;
    }

    .content_wrapper {
        width: 720px;
    }

    .main_content {
        width: 684px;
    }

    .footer .grid-child {
        align-items: unset;
        /*margin: 0 25%;*/
    }

    .footer_content {
        display: flex;
        align-items: center; /* Vertically center items */
        justify-content: space-between; /* Adjust spacing */
        height: 100px; /* Adjust as needed */
        font-family: calibri;
    }

    #mod-custom113 {
        position: relative;
        width: 100%;
        margin: 0 20%;
    }

    .footer_contact {
        /*width: 25%; !* Takes 25% width from left *!*/
    }

    .footer_slogan {
        display: flex;
        justify-content: center; /* Horizontally center */
        align-items: center; /* Vertically center */
        flex: 1; /* Takes remaining space */
    }
    /*.footer_contact {*/
    /*    margin: 0 25%;*/
    /*}*/
}





@media (width >= 992px) {
    /* Small laptops and larger tablets */
}

@media (width >= 1100px) and (width < 1200px) {
    /* Styles for custom mid-range */
}

@media (width >= 1200px) {
    /* Desktop screens */
}

@media (width >= 1400px) {
    /* Wide desktop monitors */
}