@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Permanent+Marker&display=swap');
@font-face {
    font-family: 'Didot';
    src: url("../fonts/Didot-3YAAc-s.ttc") format('truetype');
    font-weight: normal;
    font-style: normal;
}

:root {
    --primary:#2E2E2E ;
    --secondary: #7FA71A;
    --font1: "Poppins", sans-serif;
    --font2: "Permanent Marker", cursive;
    --font3: "Didot", serif;
    --font4: "Lato", sans-serif;
    --bg-primary-light: #F3F3F3;
}


.glass-effect {
    background-color: #E3E3E366;
    border-radius: 4px;
    border: 1px solid #ffffff47;
    backdrop-filter: blur(var(--glass, 4px));
}

body {font-family: "Poppins", sans-serif !important; color:#1D1D1D !important}
.font1 {font-family: var(--font1), sans-serif !important}
.font2 {font-family: var(--font2), cursive !important}
.font3 {font-family: var(--font3), serif !important}
.font4 {font-family: var(--font4), sans-serif !important}

h1, .h1{font-size: calc(1.375rem + 1.1vw);}

.btn-primary, .bg-primary{background-color: var(--primary) !important; border-color: var(--primary); text-align: center; color:white !important;}
.btn-primary:hover{color:var(--primary) !important;border-color: var(--primary); background-color: white !important; }
.btn-primary .nav-link {color:white !important;}
.btn-primary:hover .nav-link {color:var(--primary) !important;}
.btn-outline-primary.active, .btn-outline-primary:hover{background-color:var(--primary) !important; color: white !important; border-color:var(--primary) !important; }
.btn-outline-primary{border-color: var(--primary);color: var(--primary);background-color: white !important;}

.btn-secondary, .bg-secondary{background-color: var(--secondary) !important; border-color: var(--secondary); text-align: center; color:white !important;}
.btn-secondary:hover{color:var(--secondary) !important;border-color: var(--secondary); background-color: white !important; }
.btn-secondary .nav-link {color:white !important;}
.btn-secondary:hover .nav-link {color:var(--secondary) !important;}
.btn-outline-secondary{background-color: white !important}
.btn-outline-secondary.active, .btn-outline-secondary:hover{background-color: var(--secondary) !important; color:white !important;  }

.btn {font-family: var(--font1), sans-serif !important; border-radius: 8px;}
.btn-filter{color: var(--primary) !important}
.btn-filter.active{background-color: var(--secondary) !important}
.btn-lg{font-size:16px !important; padding: 12px 24px !important;}
.btn-close{ position: fixed !important;top: 10px !important;right: 10px !important;}
.btn-edition{font-family: var(--font4); color:white;text-decoration: none; border-radius: 14px;font-size:12px; background-color: var(--primary) !important; padding: 5px 15px;font-family: var(--mainFont) }
.btn-edition:hover{color:white;text-decoration: none;background-color: #7a0505;}

.toastDiv {position: fixed; bottom:40px; right: 20px;}
.floatCartBtn {position: fixed; bottom:50vh; right: 20px;}

.text-primary {color: var(--primary) !important}
.text-secondary {color: var(--secondary) !important}
.text-black a {color: #1d1d1d !important;}

#header-container-fluid, #header-container {height:100px; transition: height 0.3s ease;}
#header-container-fluid.min, #header-container.min {height:50px}

.card{background-color: #F3F3F3}
.offcanvas.offcanvas-end{width: 650px;}
.border{border-color: black !important;}
.cartCount{background-color: #EB0000; height:25px; width:25px; padding-top:2px; right:0; top:-7px;}
.picto{max-height: 25px;}

.rounded-lg{border-radius:16px;}
.bg-light{background-color: #F3F3F3 !important;}
.bg-primary-light{background-color: var(--bg-primary-light) !important;}
.bg-primary-dark{background-color: #2E2E2E !important;}

.carousel-indicators {bottom: -25px !important;}
.carousel-indicators [data-bs-target] {width:10px !important; height: 10px !important;border-radius: 50% !important}

.why-rent-div{min-height:40vh}
.navbar-nav{align-items: center;}
.nav-link:hover, .nav-link.active{text-decoration: underline;}

#hero-car-models{height:60vh}
.overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0px;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0.2;
    transition: .5s ease;
    background-color: #000000;
    z-index: 1;
}

@media (min-width: 1400px) {
    .half-container {
        max-width: 600px;
    }
}

@media screen and (max-width:768px){
    .half-container {max-width: 768px !important;}
    .why-rent-div{min-height:160vh !important}
    .parking-div{height:100vh !important}
    .navbar-nav{width:100% !important; background-color: white;height:100vh !important;align-items: start;padding:2rem !important}
    #container-fluid-nav{position:fixed; top:0; left:0; align-items: start;padding:0 !important;}
    .navbar-toggler{margin-top:1.5rem; margin-right:2rem; background-color: white !important;}
    .nav-item {padding-top:2rem !important}
    #hero-car-models{height:calc(100vh - 100px);}
    .picto{max-height: 18px;}
}