/**----------------------------------------**/
/**                                        **/
/** General                                **/
/**                                        **/
/**----------------------------------------**/

:root {
    --primary-dark: #9bbb1c;
    --primary: #bbe224;
    --primary-light: #e5eec2;
    --secondary-dark: #b863d7;
    --secondary: #cdafef;
    --secondary-light: #f0e5fd;
    --dark: #1a1a1a;
    --dark-gray: #525252;
    --gray: #848484;
    --soft-gray: #eeeeee;
    --light-gray: #f2f2f2;
    --light: #f9f9f9;
    --background: #f0f0f0;
    --white: #ffffff;

    --special-one: #2f6cf6;
    --special-two: #21b81b;
    --special-three: #fd8d25;
    --special-four: #f00015;
    --special-five: #065b2b;
    --special-six: #b60dfc;

    --danger: #ff6060;
    --warning: #ffbf60;
    --whatsapp: #25d366;
    --vendus: #068af9;
}

*, *::before, *::after {box-sizing: border-box;}

html, body {
    margin: 0;
    padding: 0;
    z-index: -1;
    min-height: 100vh;
    overflow-x: hidden;
    color: var(--gray);
    font-family: 'Outfit', sans-serif;
    background-color: var(--white);
}

/**----------------------------------------**/
/**                                        **/
/** Utilities and Helpers                  **/
/**                                        **/
/**----------------------------------------**/

.fs-xl {font-size: 4rem;}
.fs-7 {font-size: .9rem;}
.fs-8 {font-size: .7rem;}

.text-primary {color: var(--primary) !important;}
.text-primary-dark {color: var(--primary-dark) !important;}
.text-secondary {color: var(--secondary) !important;}
.text-secondary-dark {color: var(--secondary-dark) !important;}
.text-dark {color: var(--dark) !important;}
.text-gray {color: var(--gray) !important;}
.text-dark-gray {color: var(--dark-gray) !important;}
.text-warning {color: var(--warning) !important;}

.hover\:text-primary:hover {color: var(--primary) !important;}
.hover\:text-secondary:hover {color: var(--secondary) !important;}
.hover\:text-secondary-dark:hover {color: var(--secondary-dark) !important;}
.hover\:text-dark:hover {color: var(--dark) !important;}
.hover\:text-warning:hover {color: var(--warning) !important;}
.hover\:text-danger:hover {color: var(--danger) !important;}
.hover\:text-whatsapp:hover {color: var(--whatsapp) !important;}
.hover\:text-vendus:hover {color: var(--vendus) !important;}

.bg-primary {background-color: var(--primary) !important;}
.bg-secondary {background-color: var(--secondary) !important;}
.bg-secondary-dark {background-color: var(--secondary-dark) !important;}
.bg-secondary-light {background-color: var(--secondary-light) !important;}
.bg-dark {background-color: var(--dark) !important;}
.bg-light-gray {background-color: var(--light-gray) !important;}
.bg-danger {background-color: var(--danger) !important;}
.bg-warning {background-color: var(--warning) !important;}
.bg-whatsapp {background-color: var(--whatsapp) !important;}
.bg-vendus {background-color: var(--vendus) !important;}

.bg-special-one {background-color: var(--special-one) !important;}
.bg-special-two {background-color: var(--special-two) !important;}
.bg-special-three {background-color: var(--special-three) !important;}
.bg-special-four {background-color: var(--special-four) !important;}
.bg-special-five {background-color: var(--special-five) !important;}
.bg-special-six {background-color: var(--special-six) !important;}

.hover\:bg-primary:hover {background-color: var(--primary) !important;}
.hover\:bg-secondary:hover {background-color: var(--secondary) !important;}
.hover\:bg-dark:hover {background-color: var(--dark) !important;}
.hover\:bg-gray:hover {background-color: var(--gray) !important;}
.hover\:bg-soft-gray:hover {background-color: var(--soft-gray) !important;}
.hover\:bg-light:hover {background-color: var(--light) !important;}
.hover\:bg-transparent:hover {background-color: transparent !important;}
.hover\:bg-warning:hover {background-color: var(--warning) !important;}

.border-primary {border-color: var(--primary) !important;}
.border-secondary {border-color: var(--secondary) !important;}
.border-danger {border-color: var(--danger) !important;}
.border-light-gray { border-color: var(--light-gray) !important;}
.border-dark-gray { border-color: var(--dark-gray) !important;}

.hover\:border-primary:hover {border-color: var(--primary) !important;}

.fill-white {fill: var(--white);}

.hover\:fill-primary:hover,
.hover\:fill-primary:hover svg {fill: var(--primary) !important;}
.hover\:fill-secondary:hover,
.hover\:fill-secondary:hover svg {fill: var(--secondary) !important;}
.hover\:fill-warning:hover,
.hover\:fill-warning:hover svg {fill: var(--warning) !important;}
.hover\:fill-whatsapp:hover,
.hover\:fill-whatsapp:hover svg {fill: var(--whatsapp) !important;}
.hover\:fill-vendus:hover,
.hover\:fill-vendus:hover svg {fill: var(--vendus) !important;}

.transition-03 {transition: all .3s ease-in-out;}
.rotate-180 {transform: rotate(180deg);}

.cursor-default {cursor: default;}
.cursor-pointer {cursor: pointer;}

.h-screen {height: 100vh;}
.h-fit {height: fit-content !important;}
.w-fit {width: fit-content;}

.img-cover {
    object-fit: cover;
    object-position: center center;
}

.btn {padding: .75rem 1.5rem !important;}

/**----------------------------------------**/
/**                                        **/
/** Forms                                  **/
/**                                        **/
/**----------------------------------------**/

.flatpickr-wrapper {width: 100%;}

::placeholder {
    color: #969696d2 !important;
    opacity: 1;
}
:-ms-input-placeholder {color: #969696d2 !important;}
::-ms-input-placeholder {color: #969696d2 !important;}

.form-select:active,
.form-select:focus,
.form-control:active,
.form-control:focus {
    box-shadow: none;
    border-color: var(--primary);
    background-color: transparent;
}

.form-check-input {
    min-width: 1em !important;
    min-height: 1em !important;
    border-color: var(--gray) !important;
}

.form-check-input:checked {
    border-color: var(--primary) !important;
    background-color: var(--primary) !important;
}

.form-check-input:focus {
    box-shadow: none;
    border-color: var(--primary) !important;
}

.loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
}

/**----------------------------------------**/
/**                                        **/
/** Guest pages                            **/
/**                                        **/
/**----------------------------------------**/

.container-fluid {max-width: 1750px;}

@media only screen and (max-width: 767px) {
    .container-fluid {height: auto;}
}