/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
#hero .container {
   --bs-gutter-x: 0;
}

#hero .prince img {
   position: relative;
   width: 100%;
}

#hero {
   width: 100%;
   height: 60%;
   overflow: hidden;
   position: relative;
   top: 220px;
   /* background: url("../img/topbar/hero_bg2.jpg") top center; */
   /* background: url("../img/about-bg.png") top center no-repeat; */
   background-size: cover;
   position: relative;
   /* padding-top: 9.4%; */
   margin-bottom: -90px;
   z-index: 99;
   transition: 0.3s;

   /* padding-top: 90px !important; */
}



#hero .carousel {
   position: relative;
   /* Add any desired styles for the carousel */
   /* box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.1); */
   box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}


#hero:before {
   content: "";
   /* background: rgba(97, 166, 119, 0.997); */
   background: #fefefe;

   position: absolute;
   bottom: 0;
   top: 0;
   left: 0;
   right: 0;
}

#hero .carousel-control-prev,
#hero .carousel-control-next {
   width: 10%;
   padding-top: 100px;
   /* background-color: #1bce0070; */
}

#hero .carousel-control-next-icon,
#hero .carousel-control-prev-icon {
   background: none;
   font-size: 48px;
   line-height: 1;
   width: auto;
   height: auto;
   color: #fff;
}

#hero .carousel-item img {
   object-fit: fill;
   width: 100%;
   height: 100%;
}

#hero .card-body {
   padding: 0;
}

#hero .card-body p {
   margin-bottom: 0.5rem;
}

#hero .card-body p a {
   color: #1b6426;


}

#hero .card-body p a:hover {
   color: #1b6426c0;
   text-decoration: underline;

}

/*--------------------------------------------------------------*/

/* #biographie p.tiret {
   margin-left: 20px;
} */

[dir='ltr'] #biographie p.tiret {
   margin-left: 20px;
}

[dir='rtl'] #biographie p.tiret {
   margin-right: 20px;
}

#biographie {
   position: relative;
   top: 220px;
   /* background-color: #0880e8; */
}

#biographie .row {
   background-color: #eafce9;
   padding-top: 2%;
   margin-top: 2%;
   border-radius: 2em;
}

#biographie img {
   border-radius: 1em;
}

#biographie p b {
   color: #1c6527;
}

#biographie p b:hover {
   text-decoration: underline;
}

/*--------------------------------------------------------------*/

#hero .card-back {
   padding: 3%;
   text-align: center;
}

#hero .title a {
   color: #198754;
}

#hero .card-flip-container {
   background-color: #eafce9;
}

#hero .description {
   text-align: justify;
   font-size: 15px;
   line-height: 28px;
   margin-bottom: 0;
   color: #777777;
   /* margin-top: 3%; */
}

#hero .Motdedirect {
   /* height: 200px; */
   /* Set a fixed height for the container */
   overflow-y: scroll;
   /* Add a vertical scrollbar */
   /* border: 1px solid #ccc; */
   /* Optional: Add a border for better visibility */
   padding: 10px;
   /* Optional: Add padding for content */
   scrollbar-width: thin;
}

/* Styles for devices without hover support */
/*! media */

@media screen and (min-width: 1400px) {

   /* #client .paragraph-with-ellipsis {
		-webkit-line-clamp: 6;
	} */

   #hero .card-flipper {
      height: 275px;
   }

   #hero .card-flipper {
      position: relative;
      width: 100%;
      transform-style: preserve-3d;
      transition: transform 0.5s;
   }

   #hero .card-front,
   #hero .card-back {
      position: absolute;
      width: 100%;
      height: 100%;
      backface-visibility: hidden;
   }

   #hero .card-front {
      /* background-color: #f1f1f1; */
      transform: rotateY(0);
   }

   #hero .card-back {
      /* background-color: #eaeaea; */
      transform: rotateY(180deg);
   }

   #hero .Motdedirect {
      height: 88%;
   }

   #hero .card-flip-container:hover .card-flipper {
      transform: rotateY(180deg);
   }
}

@media screen and (min-width: 1200px) and (max-width: 1400px) {
   #hero .card-flipper {
      height: 224px;
   }

   #hero .card-flipper {
      position: relative;
      width: 100%;
      transform-style: preserve-3d;
      transition: transform 0.5s;
   }

   #hero .card-front,
   #hero .card-back {
      position: absolute;
      width: 100%;
      height: 95%;
      backface-visibility: hidden;
   }

   #hero .card-front {
      /* background-color: #f1f1f1; */
      transform: rotateY(0);
   }

   #hero .card-back {
      /* background-color: #eaeaea; */
      transform: rotateY(180deg);
   }

   #hero .Motdedirect {
      height: 88%;
   }

   #hero .card-flip-container:hover .card-flipper {
      transform: rotateY(180deg);
   }
}

@media screen and (min-width: 992px) and (max-width: 1200px) {
   #hero .card-flipper {
      position: relative;
      width: 100%;
      transform-style: preserve-3d;
      transition: transform 0.5s;
   }

   #hero .card-flipper {
      height: 183px;
   }

   #hero .prince h5 {
      font-size: 17px;
   }

   #hero .prince h6 {
      font-size: 14px;
   }

   #hero .card-front,
   #hero .card-back {
      position: absolute;
      width: 100%;
      height: 90%;
      backface-visibility: hidden;
   }

   #hero .card-front {
      /* background-color: #f1f1f1; */
      transform: rotateY(0);
   }

   #hero .card-back {
      /* background-color: #eaeaea; */
      transform: rotateY(180deg);
   }

   #hero .Motdedirect {
      height: 88%;
   }

   #hero .card-flip-container:hover .card-flipper {
      transform: rotateY(180deg);
   }
}

@media screen and (min-width: 550px) and (max-width: 991px) {
   #hero .prince .card {
      height: 19em;
      display: block;
   }

   #hero .prince .card-flip-container {
      height: 100%;
      position: relative;
   }

   #hero .card-flipper {
      position: relative;
      width: 100%;
      transform-style: preserve-3d;
      transition: transform 0.5s;
      height: 100%
   }

   #hero .prince,
   #why-us .prince1 {
      padding-top: .5rem !important;
   }

   #hero .card-front {
      position: absolute;
      width: 40%;
      height: 100%;
      backface-visibility: hidden;
      top: 2.5%;
   }

   [dir='ltr'] #hero .card-front {
      right: 0.5%;
   }

   [dir='rtl'] #hero .card-front {
      left: 0.5%;
   }


   #hero .card-back {
      position: absolute;
      width: 60%;
      height: 100%;
      backface-visibility: hidden;
   }

   #hero .card-body {
      /* left: 60%;
      position: relative;
      width: 40%; */
      position: relative;
      width: 40%;
      bottom: 40%;

   }

   [dir='ltr'] #hero .card-body {
      right: -59.5%;
   }

   [dir='rtl'] #hero .card-body {
      left: -59.5%;
   }

   #hero .Motdedirect {
      height: 88%;
   }
}

@media screen and (max-width: 550px) {

   #hero .prince .card {
      height: 32em;
      display: block;
   }

   #hero .prince .card-flip-container {
      height: 100%;
      position: relative;
   }

   #hero .card-flipper {
      position: relative;
      width: 100%;
      transform-style: preserve-3d;
      transition: transform 0.5s;
      height: 100%
   }

   #hero .prince,
   #why-us .prince1 {
      padding-top: .5rem !important;
   }

   #hero .card-front {
      position: absolute;
      width: 100%;
      height: 100%;
      backface-visibility: hidden;
      padding: 3px;
   }



   #hero .card-back {
      position: absolute;
      width: 100%;
      height: 45%;
      background-color: #eafce9;
      top: 55%;
   }

   #hero .card-body {
      position: relative;
      width: 100%;
      bottom: 60%;
   }

   #hero .Motdedirect {
      height: 88%;
   }
}

/* @media screen and (max-width: 768px) {
   #hero .card-flipper {
      position: relative;
      width: 100%;
      transform-style: preserve-3d;
      transition: transform 0.5s;
   }

   #hero .card-flipper {
      height: 135px;
   }

   #hero .prince {
      padding-top: .5rem !important;
   }

   #hero .prince h5 {
      position: relative;
      width: 40%;
      font-size: 12px;
   }

   [dir='ltr'] #hero .prince h5 {
      left: 60%;
   }

   [dir='rtl'] #hero .prince h5 {
      right: 60%;
   }

   #hero .prince h4 {
      font-size: 15px;
   }

   #hero .prince h6 {
      position: relative;
      width: 40%;
      font-size: 10px;
   }

   [dir='ltr'] #hero .prince h6 {
      left: 60%;
   }

   [dir='rtl'] #hero .prince h6 {
      right: 60%;
   }

   #hero .card-front {
      position: absolute;
      width: 40%;
      height: 100%;
      backface-visibility: hidden;
      top: 2.5%;
   }

   [dir='ltr'] #hero .card-front {
      right: 0.5%;
   }

   [dir='rtl'] #hero .card-front {
      left: 0.5%;
   }

   #hero .card-back {
      position: absolute;
      width: 60%;
      height: 100%;
      backface-visibility: hidden;
   }

   #hero .Motdedirect {
      height: 145%;
   }
} */
/* @media screen and (max-width: 500px) {
   #hero .prince .card {
      height: 19em;
      display: block;
   }

   #hero .prince .card-flip-container {
      height: 100%;
      position: relative;
   }

   #hero .card-flipper {
      position: relative;
      width: 100%;
      transform-style: preserve-3d;
      transition: transform 0.5s;
      height: 100%
   }

   #hero .prince,
   #why-us .prince1 {
      padding-top: .5rem !important;
   }

   #hero .card-front {
      position: absolute;
      width: 40%;
      height: 100%;
      backface-visibility: hidden;
      top: 2.5%;
   }

   [dir='ltr'] #hero .card-front {
      right: 0.5%;
   }

   [dir='rtl'] #hero .card-front {
      left: 0.5%;
   }

   #hero .card-back {
      position: absolute;
      width: 60%;
      height: 100%;
      backface-visibility: hidden;
   }

   #hero .card-body {
      position: relative;
      width: 40%;
      bottom: 40%;
      right: -59.5%;
   }

   #hero .Motdedirect {
      height: 88%;
   }
} */

#hero .elepsed {
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
   border: thick double #32a1ce;
}

/* 
#hero .text-container {
   position: relative;
   max-height: 3em;
   overflow: hidden;
}

#hero .some-text {
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
   border: thick double #fcfdfd;
}

#hero .read-more {
   position: absolute;
   bottom: -4px;
   right: 0;
   background: #fff0;
   padding: 0 9px;
   text-decoration: underline;
} */








/*--------------------------------------------------------------*/
/*--------------------------------------------------------------*/
/*--------------------------------------------------------------*/
/*--------------------------------------------------------------*/
/*--------------------------------------------------------------*/
/*--------------------------------------------------------------*/
/*--------------------------------------------------------------*/
/*--------------------------------------------------------------*/