@charset "UTF-8";

        /* BASE GRID SETUP */
        .jt-container { width: 100%; margin: 20px 0; }
        .jt-grid { 
            display: grid; 
            gap: 20px; 
            align-items: stretch;
        }

        /* FILTER BAR STYLING */
        .jt-filter-bar { margin-bottom: 30px; }
        .jt-filter-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
        
        .jt-filter-form select { 
            padding: 12px 45px 12px 20px; /* Meer ruimte rechts (45px) voor pijltje */
            border-radius: 50px; 
            border: 1px solid #ddd; 
            background-color: #fff;
            font-family: "IBM Plex Sans", sans-serif;
            font-size: 14px;
            appearance: none; /* Verwijder standaard pijltje */
            -webkit-appearance: none;
            background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23E52329%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
            background-repeat: no-repeat;
            background-position: right 20px center; /* Pijltje 20px van de rechterkant */
            background-size: 12px auto;
            cursor: pointer;
        }

        /* RESPONSIVE KOLOMMEN */
        @media (min-width: 1024px) { .jt-grid { grid-template-columns: repeat(3, 1fr); } }
        @media (min-width: 600px) and (max-width: 1023px) { .jt-grid { grid-template-columns: repeat(2, 1fr); } }
        @media (max-width: 599px) { .jt-grid { grid-template-columns: 1fr; } }

        /* CARD STYLING */
        .card.content { 
            text-decoration: none; 
            display: block; 
            height: 100%; 
            padding: 60px 25px 30px; 
            border-radius: 10px; 
            position: relative; 
            top: 0px; 
            transition: all 0.3s ease-in-out; 
            border: none; 
        }
        .card.content:hover { top: -10px; box-shadow: 0 10px 25px rgba(0,0,0,0.15); cursor: pointer;}
        .title-btn-wrap { display: flex; flex-direction: column; height: 100%; justify-content: space-between; align-items: flex-start; }
        
        .card-title { font-size: 28px; font-weight: 700; line-height: 1.1; text-transform: uppercase; margin: 0 0 20px 0; font-family: "obvia-condensed", sans-serif; color: #000; }
        .job-type { font-size: 11px; text-transform: uppercase; font-weight: 600; letter-spacing: 1px; margin-bottom: 20px; display: block; font-family: "IBM Plex Sans", sans-serif; opacity: 0.9; }
        .btn-custom { font-weight: 600; border-radius: 50px; text-transform: uppercase; font-size: 12px; padding: 10px 20px; letter-spacing: 1px; transition: 0.3s; font-family: "IBM Plex Sans", sans-serif; border: none; cursor: pointer; display: inline-block; text-decoration: none; }
        
        .card:hover .btn-custom { background: #E52329!important; color: #fff!important; }

        /* CATEGORIE KLEUREN */
        .card.content.default-job { background-color: #f6f6f6; }
        .default-job .job-type { color: #333; }
        .default-job .btn-custom { background-color: #EEEDEB; color: #E52329; }
        .digimarketing.card.content { background-color: #B2F2E8!important; }
        .digimarketing .job-type { color: #00BFA5!important; }
        .digimarketing .btn-custom { background-color: #00BFA5!important; color: #FFFFFF!important; }
        .marketing.card.content { background-color: #FFD6C6!important; }
        .marketing .job-type { color: #FF7043!important; }
        .marketing .btn-custom { background-color: #FF7043!important; color: #FFFFFF!important; }
        .administratie.card.content { background-color: #C8E6C9!important; }
        .administratie .job-type { color: #4CAF50!important; }
        .administratie .btn-custom { background-color: #4CAF50!important; color: #FFFFFF!important; }
        .commercieel.card.content { background-color: #FFF3CD!important; }
        .commercieel .job-type { color: #520C20!important; }
        .commercieel .btn-custom { background-color: #FFC107!important; color: #3C3C3C!important; }
        .data.card.content { background-color: #C5CAE9!important; }
        .data .job-type { color: #3F51B5!important; }
        .data .btn-custom { background-color: #3F51B5!important; color: #FFFFFF!important; }
        .digitaal.card.content { background-color: #B3E5FC!important; }
        .digitaal .job-type { color: #29B6F6!important; }
        .digitaal .btn-custom { background-color: #29B6F6!important; color: #3C3C3C!important; }
        .financieel.card.content { background-color: #C8E6C9!important; }
        .financieel .job-type { color: #2E7D32!important; }
        .financieel .btn-custom { background-color: #2E7D32!important; color: #FFFFFF!important; }
        .grafisch.card.content { background-color: #E1BEE7!important; }
        .grafisch .job-type { color: #AB47BC!important; }
        .grafisch .btn-custom { background-color: #AB47BC!important; color: #FFFFFF!important; }
        .hr.card.content { background-color: #F8BBD0!important; }
        .hr .job-type { color: #E91E63!important; }
        .hr .btn-custom { background-color: #E91E63!important; color: #FFFFFF!important; }
        .it.card.content { background-color: #CFD8DC!important; }
        .it .job-type { color: #607D8B!important; }
        .it .btn-custom { background-color: #607D8B!important; color: #FFFFFF!important; }
        .logistiek.card.content { background-color: #F1F8E9!important; }
        .logistiek .job-type { color: #8BC34A!important; }
        .logistiek .btn-custom { background-color: #8BC34A!important; color: #3C3C3C!important; }
        .management.card.content { background-color: #D7CCC8!important; }
        .management .job-type { color: #6D4C41!important; }
        .management .btn-custom { background-color: #6D4C41!important; color: #FFFFFF!important; }
        .productie.card.content { background-color: #FFE0B2!important; }
        .productie .job-type { color: #F57C00!important; }
        .productie .btn-custom { background-color: #F57C00!important; color: #FFFFFF!important; }
        .redactie.card.content { background-color: #FFCDD2!important; }
        .redactie .job-type { color: #F44336!important; }
        .redactie .btn-custom { background-color: #F44336!important; color: #FFFFFF!important; }
        .telesales.card.content { background-color: #FFECB3!important; }
        .telesales .job-type { color: #FFB300!important; }
        .telesales .btn-custom { background-color: #FFB300!important; color: #3C3C3C!important; }
        .card.content.cta-card { background-color: #e42229!important; }
        .cta-card .job-type { color: #ffffff!important; opacity: 1; }
        .cta-card .card-title { color: #ffffff!important; }
        .cta-card .btn-custom { background-color: #520c20!important; color: #ffffff!important; }
        .card.content.cta-card:hover .btn-custom { background-color: #ffffff!important; color: #e42229!important; }