@charset "utf-8";
/* CSS Document */

body{
    font-family: "obviously", sans-serif;
    font-weight: 300;
    font-style: normal;
    color: #2f310d;
    background-color: #b9bc86;
    
    
}

a {
    color: #2f310d;
}

a:hover {
    color: #b9bc86;
    text-decoration: none;
}

h1 {
    margin-bottom:3rem;
    font-weight:500;
}

/* Algemene stijl voor alle invoervelden en textarea */
form input, form textarea, form select {
    background-color: transparent; /* Geen achtergrondkleur */
    border: 1px solid #2f310d; /* Rand met gewenste kleur */
    border-radius: 20px; /* Ronde hoeken */
    padding: 10px 15px; /* Ruimte binnenin */
    
    width: 100%; /* Volledige breedte van de container */
    outline: none; /* Geen blauwe rand bij focus */
    transition: border-color 0.3s ease; /* Gladde overgang bij focus */
}

/* Focus-stijl voor invoervelden en textarea */
form input:focus, form textarea:focus, form select:focus {
    border-color: #88a037; /* Kleur bij focus */
}

/* Specifieke stijl voor radiobuttons en checkboxes */
form input[type="radio"], form input[type="checkbox"] {
    width: auto; /* Standaard breedte behouden */
    margin-right: 10px; /* Ruimte tussen input en label */
}

.form-select {
    background-color: transparent; /* Geen achtergrondkleur */
    border: 1px solid #2f310d; /* Rand met gewenste kleur */
    border-radius: 20px; /* Ronde hoeken */
    width: 100%; /* Volledige breedte van de container */
    outline: none; /* Geen blauwe rand bij focus */
    transition: border-color 0.3s ease; /* Gladde overgang bij focus */
    
    display: block;
    
    padding: .375rem 2.25rem .375rem .75rem;
    -moz-padding-start: calc(0.75rem - 3px);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;    
    background-image: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e);
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 16px 12px;   
    
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

form input[type="radio"], form input[type="checkbox"] {
    width: 36px;
    height:36px;
    background-color: #b9bc86; /* Geen achtergrondkleur */
    border: 1px solid #2f310d; /* Rand met gewenste kleur */
    margin-right: 10px;
}

/* buttons */
.btn-1 {
    color: #2f310d;
    background-color: #feffeb;
    border-color: #feffeb;
}

.btn-2 {
    color: #2f310d;
    background-color: #fffdc7;
    border-color: #fffdc7;
}

.btn-3 {
    color: #2f310d;
    background-color: #e0e686;
    border-color: #e0e686;
}

.btn-4 {
    color: #2f310d;
    background-color: #b9bc86;
    border-color: #b9bc86;
}

.btn-5 {
    color: #fffdc7;
    background-color: #2f310d;
    border-color: #2f310d;
}
.btn-5:hover {
    color: #2f310d;
    background-color: #fffdc7;
}

/* kleur / tekst */
.jvi-color-1 {
    color: #feffeb;
}
.jvi-color-2 {
    color: #fffdc7;
}
.jvi-color-3 {
    color: #e0e686;
}
.jvi-color-4 {
    color: #b9bc86;
}
.jvi-color-5 {
    color: #2f310d;
}

/* kleur / achtergrond */
.jvi-bgcolor-1 {
    background-color: #feffeb;
}
.jvi-bgcolor-2 {
    background-color: #fffdc7;
}
.jvi-bgcolor-3 {
    background-color: #e0e686;
}
.jvi-bgcolor-4 {
    background-color: #b9bc86;
}
.jvi-bgcolor-5 {
    background-color: #2f310d;
}

.jvi-naam {
    font-size: 2.5rem;
}

#jvi-home-intro-titel {
    padding: 0rem 3rem 3rem 3rem;
}
    #jvi-home-intro-titel h1 {
        font-size:4.5rem;
        margin-bottom:1rem;
    }
    #jvi-home-intro-titel-klein {

    }

#jvi-contact-intro-titel h1 {
        font-size:4.5rem;
        margin-bottom:1rem;
    }

footer a.footer-nav-link {
    text-decoration: underline;
    color: #e0e686;
}
footer a:hover.footer-nav-link {
    text-decoration: none;
    color: #b9bc86;
}

#jvi-contact-intro-titel h1 {
        font-size:4.5rem;
        margin-bottom:1rem;
    }

.jvi-overmij-intro-tekst {
    font-size:1.5rem;
}

.hand-drawn {
    display: inline-block;
    position: relative;
    z-index: 1; /* Zorg dat de tekst zichtbaar blijft */
    
}

.hand-drawn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 110%;
    height: 140%;
    transform: translate(-50%, -50%);
    border: 8px solid #e0e686; /* kleur voor de omcirkeling */
    border-radius: 60% 40% 60% 40%; /* Een ovale, handgetekende look */
    z-index: -1;
    background-color: transparent;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    
}

.hand-drawn::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    right: 0;
    height: 4px;
    background-color: #e0e686;
    z-index: -1;
    transform: rotate(-2deg);
}

.hand-drawn-underline {
    display: inline-block;
    position: relative;
    
    
    
    z-index: 1; /* Zorg dat de tekst zichtbaar blijft */
    
}
.hand-drawn-underline::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 110%;
    height: 140%;
    transform: translate(-50%, -50%);
    border: 0px solid #e0e686; /* kleur voor de omcirkeling */
    border-radius: 60% 40% 60% 40%; /* Een ovale, handgetekende look */
    z-index: -1;
    background-color: transparent;
    /* box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); */
    
}

.hand-drawn-underline::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    right: 0;
    height: 12px;
    background-color: #e0e686;
    z-index: -1;
    transform: rotate(-2deg);
}

.card {
    
    background-color: #fffdc7;
    background-clip: border-box;
    border: 0px solid rgba(0, 0, 0, .125);
    border-radius: .25rem;
}

.jvi-talent-management-training-row {
    padding:3rem;
    }

.jvi-talent-management-training-kolom2 {
    padding:3rem;
}

.jvi-media-links {
    font-size:1.5rem;
}

.footer-row-padding {
    padding:3rem;
}

@keyframes wobble {
    0%, 100% {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    50% {
        transform: translate(-50%, -50%) rotate(3deg);
    }
}

/* Media Queries voor Mobiel */
@media (max-width: 768px) {
    
    .jvi-naam {
    font-size: 1.5rem;
}
    
    #jvi-home-intro-titel {
    padding: 0rem 1rem 0rem 1rem;
    }
    
    #jvi-home-intro-titel h1 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    padding-top:0;
}
    
    #jvi-contact-intro-titel h1 {
        font-size: 2.5rem;
    margin-bottom: 1rem;
    padding-top:0;
    }
    
    .jvi-overmij-intro-tekst {
    font-size:1.3rem;
}
    
    .jvi-overmij-tekst-groot {
    font-size:1.3rem;
}
    
    .jvi-talent-management-training-kolom2 {
    padding: 3rem 0rem 3rem 0rem;
    
}
    .jvi-media-links {
    font-size:1.0rem;
}
    
    .footer-row-padding {
    padding:1rem;
}
    
}