:root {
  --font-text: 'Poppins', sans-serif;
  --font-title: 'Oswald', sans-serif;
  --color-red: #c91d16;
  --color-red-light: #c34742;
  --color-green: #184109;
  --color-green-light: #608d60;
  --color-green-light2: #88ad8a;
  --color-gray: #859487;
  --color-gray-light : #dbdfdb;
  --color-mydark: #121313;
}

/*--------------------------------------------------------------
general
--------------------------------------------------------------*/
body{
  overflow-x: hidden;
}

button.red_button{
  background-color: transparent;
  border-color: var(--color-red);
  color: var(--color-red);
  border-radius: 0;
}

button.red_button:hover{
  background-color: var(--color-red);
  color: white;
}

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

p {
  font-family: var(--font-text);
}

a {
  text-decoration: none;
  font-family: var(--font-title);
}

a.link-red {
  color: var(--color-red);
}

a.link-red:hover {
  color: var(--color-red-light);
}

a.link-white {
  color: white;
}

a.link-white:hover {
  color: var(--color-red);
}

a.link-black {
  color: black;
}

a.link-black:hover {
  color: var(--color-red);
}

a.link-shadow:hover{
  text-shadow: 2px 2px #2c2c2c;
}

.text-shadow{
  text-shadow: 2px 2px #2c2c2c;
}

.section-header {
  border-left: solid var(--color-red) 4px;
  padding-left: 10px;
}

.section-header a.link_white{
  color: #fff;
}

.section-header a.link_black{
  color: var(--color-mydark);
}

.section-header a:hover{
  color: var(--color-red);
}



.bg-Thunderbird {
  background-color: var(--color-red);
}

.color-Thunderbird {
  color: var(--color-red);
}

.color-darkfontColor {
  color: var(--color-gray) !important;
}

.bg-darkfontColor {
  background-color: var(--color-gray);
}

.bg-mydark {
  background-color: var(--color-mydark);
}

.bg-gray-light {
  background-color: var(--color-gray-light);
}


section.main {
  margin-top: 50px;
  margin-bottom: 50px;
  min-height: 75vh;
}

/*--------------------------------------------------------------
# Disable aos animation delay on mobile devices
--------------------------------------------------------------*/
@media screen and (max-width: 768px) {
  [data-aos-delay] {
    transition-delay: 0 !important;
  }
}

/*--------------------------------------------------------------
  # Header
  --------------------------------------------------------------*/

#header {

  background: rgb(0, 0, 0);
  transition: all 0.5s;
  z-index: 997;
}


/** top bar **/

#header .top_bar{
  background-color: var(--color-red);
}

#header .top_bar .social i {
  color: #fff;
  font-size: 18px;
  transition: 0.3s;
}

#header .top_bar .social i:hover {
  color: var(--color-green) !important;
}


#header .top_bar .connect_button {
  color: #fff;
  white-space: nowrap;
  transition: 0.3s;
  font-size: 14px;
  display: inline-block;
}

#header .top_bar .connect_button:hover {
  color: var(--color-green);
}

/** logo **/

#header .logo_container {
  transition: all 0.5s;
  font-size: 32px;
  margin: 0;
  padding: 0;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}
#header .logo_container img.logo {
  max-height:120px ;
  transition: all .2s;
}

#header .logo_container img.logo-text {
  max-height:70px ;
  transition: all .2s;
}


#header.header-scrolled .logo_container img {
  max-height: 80px;
}

#header .titre-logo_container img {
  max-height: 120px;
  transition: all .2s;
}
/** navbar_container ***/

#header .navbar_container {
  border-top: solid 1px rgb(116, 116, 116);
  background-color: #000;
  box-shadow: 1px 3px 5px 0px rgba(0,0,0,0.53);
  -webkit-box-shadow: 1px 3px 5px 0px rgba(0,0,0,0.53);
  -moz-box-shadow: 1px 3px 5px 0px rgba(0,0,0,0.53);
}
/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/**
* Desktop Navigation 
*/
.navbar {
  padding: 0;
}

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

.navbar li {
  position: relative;
}

.navbar a,
.navbar a:focus {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 15px 10px 15px;
  font-size: 19px;
  font-weight: 400;
  color: #fff;
  white-space: nowrap;
  transition: 0.3s;
}

.navbar a i,
.navbar a:focus i {
  font-size: 12px;
  line-height: 0;
  margin-left: 5px;
}

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

.navbar .dropdown ul {
  display: block;
  position: absolute;
  left: 14px;
  top: calc(100% + 30px);
  margin: 0;
  padding: 10px 0;
  z-index: 99;
  opacity: 0;
  visibility: hidden;
  background: black;
  transition: 0.3s;
}

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

.navbar .dropdown ul a {
  padding: 10px 20px;
  font-size: 14px;
  text-transform: none;
  color: white;
  font-weight: 400;
}

.navbar .dropdown ul a.active,
.navbar .dropdown ul a:hover {
  color: var(--color-red);
}

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

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

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

.navbar .dropdown .dropdown ul {
  top: 0;
  left: calc(100% - 30px);
  visibility: hidden;
}

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

@media (max-width: 1366px) {
  .navbar .dropdown .dropdown ul {
    left: -90%;
  }

  .navbar .dropdown .dropdown:hover>ul {
    left: -100%;
  }
}

/**
  * Mobile Navigation 
  */
.mobile-nav-toggle {
  color: #fff;
  font-size: 28px;
  cursor: pointer;
  display: none;
  line-height: 0;
  transition: 0.5s;
}

@media (max-width: 1050px) {
  .mobile-nav-toggle {
    display: block;
  }

  .navbar ul {
    display: none;
  }
  .menu{
    min-width: 100% !important;
  }
}

.navbar-mobile {
  position: fixed;
  overflow: hidden;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.9);
  transition: 0.3s;
  z-index: 999;
}

.navbar-mobile .mobile-nav-toggle {
  position: absolute;
  top: 15px;
  right: 15px;
}

.navbar-mobile ul {
  display: block;
  position: absolute;
  top: 55px;
  right: 15px;
  bottom: 15px;
  left: 15px;
  padding: 10px 0;
  background-color: black;
  overflow-y: auto;
  transition: 0.3s;
}

.navbar-mobile a,
.navbar-mobile a:focus {
  padding: 10px 20px;
  font-size: 15px;
  color: white;
}

.navbar-mobile a:hover,
.navbar-mobile .active,
.navbar-mobile li:hover>a {
  color: var(--color-red);
}

.navbar-mobile .getstarted,
.navbar-mobile .getstarted:focus {
  margin: 15px;
}

.navbar-mobile .dropdown ul {
  position: static;
  display: none;
  margin: 10px 20px;
  padding: 10px 0;
  z-index: 99;
  opacity: 1;
  visibility: visible;
  background: black;
}

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

.navbar-mobile .dropdown ul a {
  padding: 10px 20px;
  color: white;
}

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

.navbar-mobile .dropdown ul a:hover,
.navbar-mobile .dropdown ul .active:hover,
.navbar-mobile .dropdown ul li:hover>a {
  color: var(--color-red);
}

.navbar-mobile .dropdown>.dropdown-active {
  display: block;
}

/*--------------------------------------------------------------
#  slideshow
--------------------------------------------------------------*/


.slideshow .short_line {
  width: 50px;
  text-align: center;
  height: 4px;
  background-color: var(--color-red);
  opacity: 1;
  border-top: 0;
  text-align: left;
}


.slideshow .carousel-inner{
  height: 610px;
}

.slideshow img{
  height: 610px;
  width: 100%;
  object-fit: cover;
  filter: brightness(50%);
}

.slideshow .carousel-caption{
  width: 40%;
  bottom: 50%;
  top: 30%;
  text-align: left;
}


.slideshow .carousel-caption .time{
  font-size: 0.8em;
  font-weight: 500;
}



/*--------------------------------------------------------------
#  about
--------------------------------------------------------------*/

#about{
  background-image: url('../img/bg_about.jpeg');
  background-repeat: no-repeat;
  background-size: cover;
}



#about img {
  max-width: 280px;
}

#about .about-text-container {
  max-height: 300px;
  overflow: hidden;
  word-break: break-word;
}

#about p {
  text-align: justify;
}

#about a.link-red {
  border-radius: 0 !important;
  border-color: var(--color-red);
}

#about a.link-red:hover {
  border-radius: 0 !important;
  border-color: var(--color-red);
  background-color: var(--color-red);
  color: white;
}

/*--------------------------------------------------------------
#  counter
--------------------------------------------------------------*/

#counter  span {
  font-size: 48px;
  display: block;
  color: var(--color-green);
  font-weight: 700;
}

.counter p {
  padding: 0;
  font-size: 18px;
  font-weight: 500;
  color: #37423b;
}

/*--------------------------------------------------------------
#  actualites
--------------------------------------------------------------*/
#actualite .actualite_item .card-body{
  border-radius: 0px 0px 5px 5px;
}

#actualite .actualite_item .card-time{
  border-bottom: 1px dashed #CCCCCC;
  padding-bottom: 10px;
}



#actualite .actualite_item .card-title a{
  transition: all 0.4s;
}

#actualite .actualite_item img{
  object-fit: cover;
  width: 100%;
  height: 300px;
}

#actualite .pattern {
  position: absolute;
  top: 0;
  right: 0;
}

#actualite .pattern2 {
  position: absolute;
  bottom: 0;
  left: 0;
}

#actualite  {
  position: relative;
}

/*--------------------------------------------------------------
#  calendrier-mobile
--------------------------------------------------------------*/

#calendrier-carousel .card{
  width: 400px;
  height: 600px;
  border-radius: 0 !important;
}

#calendrier-carousel .card:hover .card-img-overlay-text{
  bottom: 0;
}

#calendrier-carousel .card img{
  object-fit: cover;
  object-position: center;
  height: 100%;
  border-radius: 0!important;
}

#calendrier-carousel .card .card-time{
  border-bottom: 1px dashed #CCCCCC;
  padding-bottom: 10px;
}


#calendrier-carousel .card-img-overlay-text{
  background: rgb(0,0,0);
  background: -moz-linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
  background: -webkit-linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
  background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000",endColorstr="#000000",GradientType=1); 
  border-radius: 0 !important;
  position: absolute;
  bottom: -9%;
  left: 0;
  right: 0;
  padding: 10px;
  transition: all .4s ease-out 0s;
}

#calendrier-carousel button{
  border-color: var(--color-red);
  color: var(--color-red);
}

#calendrier-carousel button:hover{
  border-color: var(--color-red);
  background-color: var(--color-red);
  color: white;
}

#calendrier-carousel .owl-nav{
  display: none;
}

/*--------------------------------------------------------------
  # CTA
  --------------------------------------------------------------*/
  #cta {
    background: linear-gradient(rgba(2, 2, 2, 0.5), rgba(0, 0, 0, 0.5)), url("../img/cta-bg.jpg") fixed center center;
      background-size: auto, auto;
    background-size: cover;
    padding: 60px 0;
  }

  /*===========================
    clients-01 css 
===========================*/
.client-logo-area .section-title-two {
  text-align: center;
  max-width: 550px;
  margin: auto;
  margin-bottom: 50px;
  position: relative;
  z-index: 5;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .client-logo-area .section-title-two {
    margin-bottom: 45px;
  }
}
@media (max-width: 767px) {
  .client-logo-area .section-title-two {
    margin-bottom: 35px;
  }
}
.client-logo-area .section-title-two span {
  text-transform: capitalize;
  color: var(--white);
  background: var(--primary);
  display: inline-block;
  margin-bottom: 10px;
  padding: 5px 15px;
  border-radius: 4px;
}
.client-logo-area .section-title-two h2 {
  margin-bottom: 15px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .client-logo-area .section-title-two h2 {
    font-size: 2rem;
    line-height: 2.8rem;
  }
}
@media (max-width: 767px) {
  .client-logo-area .section-title-two h2 {
    font-size: 1.5rem;
    line-height: 1.9rem;
  }
}
.client-logo-area .section-title-two p {
  color: var(--dark-3);
}

.client-logo-area img {
  width: 100px;
}

/*===== Client Logo One =====*/

/*--------------------------------------------------------------
  # boutique
  --------------------------------------------------------------*/

  #boutique button{
    border-color: var(--color-red);
    color: var(--color-red);
  }

  #boutique .card .image-container{
    width: 100%;
    height: 360px;
  }
  
  #boutique .boutique-item{
    padding-top: calc(var(--bs-gutter-x) * .5);
    padding-bottom: calc(var(--bs-gutter-x) * .5);
  }
  
  
  #boutique .card .image-container img{
    object-fit: cover;
    object-position: center;
    height: 100%;
    width: 100%;
  }
  
  #boutique button:hover{
    border-color: var(--color-red);
    background-color: var(--color-red);
    color: white;
  }
  #boutique .card{
  
    background-color: #fff;
    border:none;
    border-radius: 10px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  
  }
  
  #boutique .image-container{
  
    position: relative;
  }
  
  #boutique .thumbnail-image{
    border-radius: 10px !important;
  }
  
  #boutique .new-price{
    font-size: 16px;
    font-weight: bold;
    color: red;
    
  }
  #boutique .old-price{
    font-size: 10px;
    font-weight: bold;
    color: grey;
  }
  
  

  
/*--------------------------------------------------------------
  # footer
  --------------------------------------------------------------*/

footer .logo{
  max-width: 100px !important;
}

footer .social i {
  color: #fff !important;
  font-size: 25px !important;
  
}


footer .social i.fa-facebook-f:hover {
  color: #3b5998 !important;
}

footer .social i.fa-twitter:hover {
  color: #55acee !important;
}

footer .social i.fa-instagram:hover {
  color: #ac2bac !important;
}

footer .copyright{
  border-top: 0px solid #272727 !important;
}

footer .send:hover{
  background-color: var(--color-red) !important;
  color: white !important;
  border-color: var(--color-red) !important;
}

footer img{
  width: 60px;
}

footer .facebook:hover {
  color: #3b5998 !important;
}

footer .twitter:hover {
  color: #55acee !important;
}

footer .instagram:hover {
  color: #ac2bac !important;
}