/*
Theme Name: LAROLO - Lode
*/

@import url('assets/css/header.css');
@import url('assets/css/hero-home.css');
@import url('assets/css/hero.css');
@import url('assets/css/walloffame.css');
@import url('assets/css/landRoverExpert.css');
@import url('assets/css/contact-hook.css');
@import url('assets/css/reviews-home.css');
@import url('assets/css/proces-home.css');
@import url('assets/css/missie-visie.css');
@import url('assets/css/extrainfo.css');
@import url('assets/css/blog.css');
@import url('assets/css/contact.css');
@import url('assets/css/contact-grid.css');
@import url('assets/css/single-artikel.css');
@import url('assets/css/scrollanimation.css');

@import url('assets/css/legal.css');

@import url('assets/css/footer.css');

:root {
    /*Primary color*/
    --color-primary-light: #F1F1EC;
    --color-primary-light-hover: #E9E9E3;
    --color-primary-light-active: #D2D2C5;
    --color-primary: #6E6E44; /*Dark green*/
    --color-primary-hover: #63633D;
    --color-primary-active: #585836;
    --color-primary-dark: #535333;


    /*Secondary color*/
    --color-secondary-light: #F6F5F2;
    --color-secondary-light-hover: #F2F0EB;
    --color-secondary-light-active: #E4DFD6;
    --color-secondary: #A7987A; /*Beige green*/
    --color-secondary-hover: #96896E;
    --color-secondary-active: #867A62;
    --color-secondary-dark: #7D725C;
    --color-secondary-dark-hover: #645B49;
    --color-secondary-dark-active: #4B4437;
    --color-secondary-darker: #3A352B;

    /*Gradient*/
    --gradient-olive: linear-gradient(0deg,rgba(83, 83, 51, 1) 0%, rgba(99, 99, 61, 1) 100%);

    /*Black and white*/
    --color-black: #000000;
    --color-white: #FFFFFF;
    --color-white-hover:#f1f1f1;


    /*==================================*/

    /* Font styles */
    --font-primary: 'Orbitron', sans-serif;
    --font-secondary: 'Inter', sans-serif;
}

*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: inherit;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    box-sizing: border-box;
    scroll-behavior: smooth;
    align-items: top;
    font-size: 62.5%; /* 1rem = 10px */
    padding: 0;
    margin: 0 !important;
}

body {
    display: flex; /* Zorg ervoor dat flexbox wordt gebruikt */
    flex-direction: column; /* Stapel de inhoud verticaal */
    align-items: flex-start; /* Lijn de inhoud uit aan de linkerkant (optioneel) */
    justify-content: flex-start; /* Lijn de inhoud uit aan de bovenkant */
    scroll-behavior: smooth;
    margin: 0;
    padding: 0;
}

html, body {
    overflow-x: hidden;
} 

main {
    width: 100%;
    height: fit-content;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

a {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}
button {
    cursor: pointer;
    border: none;
    outline: none;
    background: none;
}

h1, h2, h3 {
    font-family: var(--font-primary);
}
h1 {
    font-size: 5rem;
    font-weight: 700;
    text-transform: uppercase;
}
h2 {
    font-size: 4rem;
    font-weight: 700;
    text-transform: uppercase;
}
h3 {
    font-size: 3rem;
    font-weight: 600;
}




/*=============================================*/

/*Buttons*/
/*Primary-button*/
/* Primary button */
.primarybutton {
    background-color: var(--color-primary);
    font-family: var(--font-primary);
    color: var(--color-white);
    border-radius: 0.5rem;
    padding: 0.8rem 3.2rem;
    transition: 0.3s ease;
}
.primarybutton:hover {
    background-color: var(--color-primary-hover);
    color: var(--color-white);
    box-shadow:  3px 3px 12px hsla(0, 0%, 0%, 0.5);
    border-radius: 0.5rem;
    padding: 0.8rem 3.2rem;
}
.primarybutton:active {
    background-color: var(--color-primary-active);
    color: var(--color-white);
    box-shadow:  3px 3px 12px hsla(0, 0%, 0%, 0.5);
    border-radius: 0.5rem;
    padding: 0.8rem 3.2rem;
}

/* Secondary button */
.secondarybutton {
    background-color: var(--color-white);
    border: 2px solid var(--color-primary);
    color: var(--color-primary);
    border-radius: 0.5rem;
    padding: 0.8rem 3.2rem;
    transition: 0.3s ease;
    font-family: var(--font-primary);
}
.secondarybutton:hover {
    background-color: var(--color-white-hover);
    color: var(--color-primary-hover);
    border: 2px solid var(--color-primary-hover);
    box-shadow:  3px 3px 12px hsla(0, 0%, 0%, 0.5);
    border-radius: 0.5rem;
    padding: 0.8rem 3.2rem;
}
.secondarybutton:active {
    background-color: var(--color-white);
    color: var(--color-primary-active);
    border: 2px solid var(--color-primary-active);
    box-shadow:  3px 3px 12px hsla(0, 0%, 0%, 0.5);
    border-radius: 0.5rem;
    padding: 0.8rem 3.2rem;
}