/*!
 * Go Key Card Style

 * Main.css
 * Version - 1.0.1

 * L’autorisation est accordée à toute personne qui en obtient une copie de ce style.
 * Il est strictement interdit de publier(vendre) sans l'autorisation préalable des auteurs.
 * Des spécialistes sont à l'origine des documents fournis.
 
 * Copyright (c) 2024
 */

/** 
=========================================================
======================= INCLUDES =======================
=========================================================
 **/
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&family=Quicksand:wght@300..700&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css');
@import url('../vendor/bootstrap/css/bootstrap.min.css');
@import url('typography.css');
@import url('color.css');
/** 
=========================================================
======================== GENERAL ========================
=========================================================
 **/

* {
    font-family: var(--font-family);
    color: var(--dark);
    transition: all .3s linear;
}

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

a {
    text-decoration: none !important;
}

body {
    background-color: #fefdff !important;
    color: var(--black);
    font-weight: 300;
}

p {
    font-size: 1rem;
}

/*  =====================================================
*   ================ HEADER & NAVIGATION ================
*/

header {
    transform: translateZ(0);
    -webkit-backdrop-filter: saturate(180%) blur(5px);
    backdrop-filter: saturate(180%) blur(5px);
    background: rgba(255, 255, 255, .8);
    box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 1px 0px;
}

.nav .nav-link,
.nav .nav-link.active {
    font-size: 15px !important;
}

.nav .nav-link {
    color: var(--dark);
    font-weight: 400 !important;
    font-size: 15px !important;
}

.nav .nav-link.active {
    border-bottom: 3px solid var(--secondary) !important;
    color: var(--secondary) !important;
    font-weight: 400 !important;
}

#nav .nav-button {
    position: relative;
    height: 100%;
}

#nav .nav-button::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-100%) scaleX(0);
    transform-origin: 50% 50%;
    width: 90%;
    height: 2px;
    background-color: var(--secondary);
    transition: transform 250ms;
}

#nav .nav-button:hover,
#nav .dropdown:hover>a {
    color: var(--secondary) !important;
    font-weight: 400 !important;
}

#nav .nav-button:not(.active):hover::after {
    color: var(--dark) !important;
    transform: translateX(-50%) scaleX(1);
}

#nav .dropdown:hover>.dropdown-menu {
    display: block;
}

#nav .dropdown>.dropdown-toggle:active {
    pointer-events: none;
}

#nav .dropdown-item.active,
#nav .dropdown-item:active,
#nav .dropdown-item:hover {
    background-color: var(--secondary) !important;
    color: var(--light) !important;
}

/*  =========================================================
*   ================ END HEADER & NAVIGATION ================
*/

/*  =========================================================
*   ================ CUSTOM STYLES ================
*/

/*  
*   1. Card
*/
.gkc-card {
    --card-border-color: #eeeeee;
    --card-bgcolor: #f7f7f750;
    border: 1px solid var(--card-border-color);
    border-radius: 15px;
    background-color: var(--card-bgcolor);
}

.gkc-card.card-plain-light-secondary {
    border: 0px;
    --card-bgcolor: #bc1e970c;
}

.gkc-card.card-primary {
    --card-border-color: var(--primary);
}

.gkc-card.card-secondary {
    border-color: var(--secondary);
}

.gkc-card.card-gray {
    --card-border-color: #c5c5c5;
}

/* 2. Shapes */
.gkc-square {
    --shape-bg-color: #9b9b9b;
    --shape-color: var(--black);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: calc(1.275rem + .3vw);
    width: 3.125rem;
    height: 3.125rem;
    border-radius: .25rem !important;
    background-color: var(--shape-bg-color);
    color: var(--shape-color);
}

.gkc-square.primary {
    --shape-bg-color: var(--primary);
    --shape-color: var(--light);
}

.gkc-square.secondary {
    --shape-bg-color: var(--secondary);
    --shape-color: var(--light);
}


/*  
*   Form
*/
.form-devis {
    max-width: 800px;
    padding: 1rem;
}

.form-signup {
    padding: 1rem;
}

.form-floating {
    margin-top: 10px;
    margin-bottom: 10px;
}

.form-control {
    --bs-border-color: #e0e0e0;
    --bs-border-width: 2px;
    box-sizing: border-box !important;
    transition: border-color 0.2s ease !important;
}

.form-control:focus {
    outline: none !important;
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px #4a90e21a !important;
}

.list-group-radio .list-group-item {
    cursor: pointer;
    border-radius: .5rem;
}

.list-group-radio .form-check-input {
    z-index: 2;
    margin-top: -.5em;
}

.list-group-radio .list-group-item:hover,
.list-group-radio .list-group-item:focus {
    background-color: var(--bs-secondary-bg);
}

.list-group-radio .form-check-input:checked+.list-group-item {
    background-color: var(--bs-body);
    border-color: var(--secondary);
    box-shadow: 0 0 0 2px var(--secondary);
}

.list-group-radio .form-check-input[disabled]+.list-group-item,
.list-group-radio .form-check-input:disabled+.list-group-item {
    pointer-events: none;
    filter: none;
    opacity: .5;
}

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


/*  =========================================================
*   ================ END CUSTOM STYLES ================
*/

/*  =====================================================
*   ================ FOOTER ================
*/

footer {
    background-color: #f2f2f2;
}

footer p {
    font-size: 0.988rem !important;
}

footer #copyright p,
footer #copyright .nav-link {
    font-size: 0.788rem !important;
}

/*  =========================================================
*   ================ END FOOTER ================
*/

/** 
=========================================================
======================= VARIABLES =======================
=========================================================
 **/

*::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px var(--light);
    background-color: var(--light);
}

*::-webkit-scrollbar {
    width: 10px;
    background-color: #36323a;
}

*::-webkit-scrollbar-thumb {
    background-color: #36323a !important;
}

::selection {
    background-color: var(--primary);
    color: var(--light) !important;
}

:root {
    --primary: #4e2877;
    --secondary: #bc1e97;
    --tertiary: #985f09;
    --black: #000000;
    --light: #ffffff;
    --gray: #b3b3b3;

    --scrollbar-primary: #f3f3f3;
    --scrollbar-secondary: #f0f0f0;

    --font-family: "Outfit", sans-serif;
}