/**
* Template Name: Impact
* Template URL: https://bootstrapmade.com/impact-bootstrap-business-website-template/
* Updated: Jun 14 2024 with Bootstrap v5.3.3
* Author: BootstrapMade.com
* License: https://bootstrapmade.com/license/
*/

/*--------------------------------------------------------------
# Font & Color Variables
# Help: https://bootstrapmade.com/color-system/
--------------------------------------------------------------*/
/* Fonts */
:root {
  --default-font: "Rubik",  system-ui, -apple-system, "Segoe UI", Rubik, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --heading-font: "Montserrat",  sans-serif;
  --nav-font: "Poppins",  sans-serif;
}

/* Global Colors - The following color variables are used throughout the website. Updating them here will change the color scheme of the entire website */
:root { 
  --background-color: #fafafa; /* Background color for the entire website, including individual sections */
  --default-color: #161A30; /* Default color used for the majority of the text content across the entire website */
  --heading-color: #161A30; /* Color for headings, subheadings and title throughout the website */
  --accent-color: #6C9833; /* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */
  --contrast-color: #ffffff; /* The contrast color is used for elements when the background color is one of the heading, accent, or default colors. Its purpose is to ensure proper contrast and readability when placed over these more dominant colors */
  --hhb-noir: #161A30; /* moir hhb */
  --hhb-vert: #6C9833; /* vert hhb */
  --hhb-orange: #FF4D06; /* orange hhb */
  --hhb-blanc: #fafafa; /* blanc hhb */
  --hhb-bleu: #0C72BA; /* bleu hhb */
}

/* Nav Menu Colors - The following color variables are used specifically for the navigation menu. They are separate from the global colors to allow for more customization options */
:root {
  --nav-color: #ffffff;  /* The default color of the main navmenu links */
  --nav-hover-color: #f85a40; /* Applied to main navmenu links when they are hovered over or active */
  --nav-dropdown-background-color: #ffffff; /* Used as the background color for dropdown items that appear when hovering over primary navigation items */
  --nav-dropdown-color: #01433c; /* Used for navigation links of the dropdown items in the navigation menu. */
  --nav-dropdown-hover-color: #f85a40; /* Similar to --nav-hover-color, this color is applied to dropdown navigation links when they are hovered over. */
}

/* Smooth scroll */
:root {
  scroll-behavior: smooth;
}

/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
body {
  color: var(--default-color);
  background-color: var(--background-color);
  font-family: var(--default-font);
}

a {
  color: var(--accent-color);
  text-decoration: none;
  transition: 0.3s;
}

a:hover {
  color: color-mix(in srgb, var(--accent-color), transparent 25%);
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--heading-color);
  font-family: var(--heading-font);
}

.btn-danger {
  background-color: var(--hhb-orange);
}

/*--------------------------------------------------------------
# Global Header
--------------------------------------------------------------*/
.header {
  --background-color: var(--hhb-vert);
  --heading-color: #ffffff;
  color: var(--default-color);
  transition: all 0.5s;
  z-index: 997;
  background-color: var(--background-color);
}

.header .topbar {
  //background-color: color-mix(in srgb, var(--accent-color) 90%, black 10%);
  background-color: var(--hhb-noir);
  height: 40px;
  padding: 0;
  font-size: 24px;
  transition: all 0.5s;
}

.header .topbar .social-links a {
  // color: color-mix(in srgb, var(--contrast-color), transparent 20%);
  color: var(--contrast-color);
  line-height: 0;
  transition: 0.3s;
  margin-right: 20px;
}

.header .topbar .social-links a:hover {
  color: var(--contrast-color);
}

.header .topbar .special-links a {
  // color: color-mix(in srgb, var(--contrast-color), transparent 20%);
  color: var(--contrast-color);
  line-height: 0;
  transition: 0.3s;
  margin-left: 20px;
}

.header .topbar .special-links a:hover {
  color: var(--contrast-color);
}

.header .branding {
  min-height: 50px;
  padding: 1px 0;
}

.header .logo {
  line-height: 1;
}

.header .logo img {
  max-height: 36px;
  margin-right: 8px;
}

.header .logo h1 {
  font-size: 36px;
  margin: 0;
  font-weight: 700;
  color: var(--heading-color);
}

.header .logo span {
  font-size: 32px;
  margin-left: 2px;
  color: var(--nav-hover-color);
}

.header .bp-panier {
  float: right;
}

.header .bp-panier a {
  min-width: 80px;
  background-color: color-mix(in srgb, var(--default-color), transparent 85%);
  color: #fafafa;
} 
.header .bp-panier i {
  padding: 0px 10px 0px 5px;
  font-size: 20px;
}
.scrolled .header {
  box-shadow: 0px 0 18px color-mix(in srgb, var(--default-color), transparent 85%);
}

@media (max-width: 640px) {
  .header .logo h1 {
    font-size: 24px;
  }
  .header .bp-panier a {
    min-width: 60px;
    padding-top: 0px;
    padding-bottom: 0px;
  }
}

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/* Desktop Navigation */
@media (min-width: 1200px) {
  .navmenu {
    padding: 0;
  }

  .navmenu ul {
    margin: 0;
    padding: 0;
    display: flex;
    list-style: none;
    align-items: center;
  }

  .navmenu li {
    position: relative;
  }

  .navmenu>ul>li {
    white-space: nowrap;
    padding: 15px 14px;
  }

  .navmenu>ul>li:last-child {
    padding-right: 0;
  }

  .navmenu a,
  .navmenu a:focus {
    color: var(--nav-color);
    font-size: 15px;
    padding: 0 2px;
    font-family: var(--nav-font);
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    transition: 0.3s;
    position: relative;
  }

  .navmenu a i,
  .navmenu a:focus i {
    font-size: 12px;
    line-height: 0;
    margin-left: 5px;
    transition: 0.3s;
  }
/*
  .navmenu>ul>li>a:before {
    content: "";
    position: absolute;
    height: 2px;
    bottom: -6px;
    left: 0;
    background-color: var(--nav-hover-color);
    visibility: hidden;
    width: 0px;
    transition: all 0.3s ease-in-out 0s;
  }
*/
  .navmenu a:hover:before,
  .navmenu li:hover>a:before,
  .navmenu .active:before {
    visibility: visible;
    width: 100%;
  }

  .navmenu li:hover>a,
  .navmenu .active,
  .navmenu .active:focus {
    color: var(--nav-color);
  }

  .navmenu .dropdown ul {
    margin: 0;
    padding: 10px 0;
    background: var(--nav-dropdown-background-color);
    display: block;
    position: absolute;
    visibility: hidden;
    left: 14px;
    top: 130%;
    opacity: 0;
    transition: 0.3s;
    border-radius: 4px;
    z-index: 99;
    box-shadow: 0px 0px 30px color-mix(in srgb, var(--default-color), transparent 85%);
  }

  .navmenu .dropdown ul li {
    min-width: 200px;
  }

  .navmenu .dropdown ul a {
    padding: 10px 20px;
    font-size: 15px;
    text-transform: none;
    color: var(--nav-dropdown-color);
  }

  .navmenu .dropdown ul a i {
    font-size: 12px;
  }

  .navmenu .dropdown ul a:hover,
  .navmenu .dropdown ul .active:hover,
  .navmenu .dropdown ul li:hover>a {
    color: var(--nav-dropdown-hover-color);
  }

  .navmenu .dropdown:hover>ul {
    opacity: 1;
    top: 100%;
    visibility: visible;
  }

  .navmenu .dropdown .dropdown ul {
    top: 0;
    left: -90%;
    visibility: hidden;
  }

  .navmenu .dropdown .dropdown:hover>ul {
    opacity: 1;
    top: 0;
    left: -100%;
    visibility: visible;
  }
}

/* Mobile Navigation */
@media (max-width: 1199px) {
  .mobile-nav-toggle {
    color: var(--nav-color);
    font-size: 28px;
    line-height: 0;
    margin-right: 10px;
    cursor: pointer;
    transition: color 0.3s;
  }

  .navmenu {
    padding: 0;
    z-index: 9997;
  }

  .navmenu ul {
    display: none;
    position: absolute;
    inset: 60px 20px 20px 20px;
    padding: 10px 0;
    margin: 0;
    border-radius: 6px;
    background-color: var(--nav-dropdown-background-color);
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
    box-shadow: none;
    overflow-y: auto;
    transition: 0.3s;
    z-index: 9998;
  }

  .navmenu a,
  .navmenu a:focus {
    color: var(--nav-dropdown-color);
    padding: 10px 20px;
    font-family: var(--nav-font);
    font-size: 17px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    white-space: nowrap;
    transition: 0.3s;
  }

  .navmenu a i,
  .navmenu a:focus i {
    font-size: 12px;
    line-height: 0;
    margin-left: 5px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: 0.3s;
    background-color: color-mix(in srgb, var(--accent-color), transparent 70%);
  }

  .navmenu a i:hover,
  .navmenu a:focus i:hover {
    background-color: var(--accent-color);
    color: var(--contrast-color);
  }

  .navmenu a:hover,
  .navmenu .active,
  .navmenu .active:focus {
    color: var(--hhb-orange);
  }

  .navmenu .active i,
  .navmenu .active:focus i {
    background-color: var(--accent-color);
    color: var(--contrast-color);
    transform: rotate(180deg);
  }

  .navmenu .dropdown ul {
    position: static;
    display: none;
    z-index: 99;
    padding: 10px 0;
    margin: 10px 20px;
    background-color: var(--nav-dropdown-background-color);
    transition: all 0.5s ease-in-out;
  }

  .navmenu .dropdown ul ul {
    background-color: rgba(33, 37, 41, 0.1);
  }

  .navmenu .dropdown>.dropdown-active {
    display: block;
    background-color: rgba(33, 37, 41, 0.03);
  }

  .mobile-nav-active {
    overflow: hidden;
  }

  .mobile-nav-active .mobile-nav-toggle {
    color: #fff;
    position: absolute;
    font-size: 32px;
    top: 15px;
    right: 15px;
    margin-right: 0;
    z-index: 9999;
  }

  .mobile-nav-active .navmenu {
    position: fixed;
    overflow: hidden;
    inset: 0;
    background: rgba(33, 37, 41, 0.8);
    transition: 0.3s;
  }

  .mobile-nav-active .navmenu>ul {
    display: block;
  }
}

/*--------------------------------------------------------------
# Global Footer
--------------------------------------------------------------*/
.footer {
  --background-color: var(--accent-color);
  --default-color: #fff;
  --heading-color: #fff;
  color: var(--default-color);
  background-color: var(--background-color);
  font-size: 14px;
  position: relative;
}

.footer .footer-top {
  padding-top: 50px;
}

.footer .footer-about {
  margin-bottom: 30px;
}
.footer .footer-about .logo {
  line-height: 1;
  margin-bottom: 25px;
}

.footer .footer-about .logo img {
  max-height: 40px;
  margin-right: 6px;
}

.footer .footer-about .logo span {
  color: var(--heading-color);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 1px;
  font-family: var(--heading-font);
}

.footer .footer-about p {
  font-size: 14px;
  font-family: var(--heading-font);
}
.footer .social-links {
  display: flex;
  justify-content: left;
}

.footer .social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 20%);
  font-size: 16px;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  margin-right: 10px;
  transition: 0.3s;
}

.footer .social-links a:hover {
  color: var(--default-color);
  border-color: var(--default-color);
}

.footer h4 {
  font-size: 16px;
  font-weight: bold;
  position: relative;
  padding-bottom: 12px;
}

.footer .footer-links {
  margin-bottom: 30px;
}

.footer .footer-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer .footer-links ul i {
  padding-right: 2px;
  font-size: 12px;
  line-height: 0;
}

.footer .footer-links ul li {
  padding: 10px 0;
  display: flex;
  align-items: center;
}

.footer .footer-links ul li:first-child {
  padding-top: 0;
}

.footer .footer-links ul a {
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  display: inline-block;
  line-height: 1;
}

.footer .footer-links p a:hover {
  color: var(--default-color);
}

.footer .footer-links p a {
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  display: inline-block;
  line-height: 1;
}2

.footer .footer-links ul a:hover {
  color: var(--default-color);
}

.footer .footer-contact p {
  margin-bottom: 5px;
}

.footer .footer-contact p a {
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.footer .footer-contact p a:hover {
  color: var(--default-color);
}

.footer .footer-styo {
  padding: 30px;
}

.footer .copyright {
  padding-top: 20px;
  padding-bottom: 20px;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.footer .copyright p {
  margin-bottom: 0;
}

.footer .credits {
  margin-top: 4px;
  font-size: 13px;
}

@media screen and (max-width: 768px) {
  .footer .footer-styo {
    padding: 10px 90px;
  }
  .footer .social-links {
    justify-content: center;
  }

}

/*--------------------------------------------------------------
# loader
--------------------------------------------------------------*/
#loader {
  position: fixed;
  inset: 0;
  z-index: 999999;
  overflow: hidden;
  background: var(--background-color);
  transition: all 0.6s ease-out;
}

#loader:before {
  content: "";
  position: fixed;
  top: calc(50% - 30px);
  left: calc(50% - 30px);
  border: 6px solid #ffffff;
  border-color: var(--accent-color) transparent var(--accent-color) transparent;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: animate-loader 1.5s linear infinite;
}

@keyframes animate-loader {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}
/*--------------------------------------------------------------
# Global Page Titles & Breadcrumbs
--------------------------------------------------------------*/
.page-title {
  color: var(--default-color);
  position: relative;
  margin-top: 10px;
}

.page-title .heading {
  padding: 160px 0 80px 0;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.page-title .heading h1 {
  font-size: 38px;
  font-weight: 700;
}

.page-title nav {
  //background-color: color-mix(in srgb, var(--default-color), transparent 92%);
  padding: 10px 0;
}

.page-title nav ol {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.page-title nav ol a {
  color: color-mix(in srgb, var(--default-color), transparent 50%);
}

.page-title nav ol a:hover {
  color: var(--default-color);
}

.page-title nav ol li+li {
  padding-left: 10px;
}

.page-title nav ol li+li::before {
  content: "/";
  display: inline-block;
  padding-right: 10px;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
}

/*--------------------------------------------------------------
# Global Sections
--------------------------------------------------------------*/
section,
.section {
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 60px 0;
  scroll-margin-top: 112px;
  overflow: clip;
}

@media (max-width: 1199px) {

  section,
  .section {
    scroll-margin-top: 100px;
  }
}

/*--------------------------------------------------------------
# Global Section Titles
--------------------------------------------------------------*/
.section-title {
  text-align: center;
  padding-bottom: 60px;
  position: relative;
}

.section-title h2 {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 20px;
  padding-bottom: 20px;
  position: relative;
}

.section-title h2:after {
  content: "";
  position: absolute;
  display: block;
  width: 100px;
  height: 4px;
  background: var(--accent-color);
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

.section-title p {
  margin-bottom: 0;
}

@media screen and (max-width: 768px) {
  .section-title {
    padding-bottom: 30px;
  }
}

@keyframes animate-loading {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/*--------------------------------------------------------------
# Home Section
--------------------------------------------------------------*/
.home {
  background-color: color-mix(in srgb, var(--hhb-vert), transparent 98%);
  width: 100%;
  position: relative;
  padding: 50px 0px 40px 0px;
}

.home .home-item {
  margin-left: 80px;
  margin-right: 80px;
  box-shadow: 0px 0 20px color-mix(in srgb, var(--default-color), transparent 80%);
}
.home h3 {
  padding:  0px 8px;
  text-align: center;
  color: var(--hhb-vert);
}
.home .home-description {
  padding: 15px; 
  border: 1px solid #E7E7E7; 
  display: flex; 
  flex-direction: column; 
  justify-content: space-between;
}
.home .reserve{
  color: var(--hhb-blanc);
  background-color: var(--hhb-vert);
  display: inline-block;
  margin-top: 15px;
  padding: 10px 15px 10px 15px;
  border-radius: 50px;
  border: 1px solid color-mix(in srgb, var(--hhb-vert), transparent 80%);
  transition: none;
  font-size: 16px;
  font-weight: 600;
  font-family: var(--heading-font);
  transition: 0.3s;
}
.home .nom-famille {
  padding:  0px 8px;
  margin-bottom: 4px;
  background-color: color-mix(in srgb, var(--hhb-vert), transparent 10%);
  color: var(--hhb-blanc);
  font-size: 1.5em;
  font-weight: 500;
  line-height: 1.2;
}
.home .nom-famille {
  color: var(--hhb-blanc);
}
.home .card-famille:hover {
  //background-color: color-mix(in srgb, var(--default-color), transparent 20%);
  opacity: 0.7;
}
@media (max-width: 640px) {
  .home {
    padding: 20px 0 0 0;
  }
  .home .home-item {
    margin-left: 8px;
    margin-right: 8px;
}
  
}

/*--------------------------------------------------------------
# tickets Section
--------------------------------------------------------------*/
.tickets {
  background-color: color-mix(in srgb, var(--hhb-vert), transparent 98%);
  width: 100%;
  position: relative;
  padding: 50px 0px 40px 0px;
}
.tickets h1 {
  color: var(--hhb-vert);
}
.tickets .bpvalider {
  color: var(--hhb-blanc);
  background-color: var(--hhb-vert);
}

/*--------------------------------------------------------------
# identification Section
--------------------------------------------------------------*/
.identification {
  background-color: color-mix(in srgb, var(--hhb-vert), transparent 98%);
  width: 100%;
  position: relative;
  padding: 50px 0px 40px 0px;
}
.identification h1 {
  color: var(--hhb-vert);
}

/*--------------------------------------------------------------
# personnalisation Section
--------------------------------------------------------------*/
.personnalisation {
  background-color: color-mix(in srgb, var(--hhb-vert), transparent 98%);
  width: 100%;
  position: relative;
  padding: 50px 0px 40px 0px;
}
.personnalisation h1 {
  color: var(--hhb-vert);
}
.personnalisation .badge {
  background-color: var(--hhb-vert);
}
.personnalisation .bpvalider {
  color: var(--hhb-blanc);
  background-color: var(--hhb-vert);
}
.personnalisation .borderradio {
  border: 1px solid #dee2e6;
  padding: 2px 8px;
}
.personnalisation .errinput {
  border-color: var(--hhb-orange);
}
       
/*--------------------------------------------------------------
# modal
--------------------------------------------------------------*/
.modal-header {
  background-color: var(--hhb-vert);
  color: var(--hhb-blanc);
}

.modal-header .btn-close {
  opacity: 1;
}

.modal-header h5 {
  color: var(--hhb-blanc);
}

.modal-body .bpretourachat {
  color: var(--hhb-vert);
  background-color: var(--hhb-blanc);
  border: 1px solid var(--hhb-vert);
}

.modal-body .bpvalider {
  color: var(--hhb-blanc);
  background-color: var(--hhb-vert);
}

/*--------------------------------------------------------------
# Starter Section Section
--------------------------------------------------------------*/
.starter-section {
  /* Add your styles here */
}