@charset "UTF-8";
@tailwind base;
@tailwind components;
@tailwind utilities;
/* Start Polices */
@font-face {
  font-family: Proxi;
  src: url("../fonts/ProximaNovaCond-Bold.otf");
}
@font-face {
  font-family: Proxi;
  src: url("../fonts/ProximaNovaAltCondBlack.otf");
}
@font-face {
  font-family: Proxi;
  font-weight: 400;
  src: url("../fonts/ProximaNovaRegular.otf");
}
@font-face {
  font-family: Jakarta;
  font-weight: 500;
  src: url("../fonts/PlusJakartaSans-Medium.ttf");
}
@font-face {
  font-family: Jakarta;
  font-weight: 400;
  src: url("../fonts/PlusJakartaSans-Regular.ttf");
}
@font-face {
  font-family: Jakarta;
  font-weight: 300;
  src: url("../fonts/PlusJakartaSans-Light.ttf");
}
@font-face {
  font-family: Jakarta;
  font-weight: 200;
  src: url("../fonts/PlusJakartaSans-ExtraLight.ttf");
}
@font-face {
  font-family: Cormorant;
  font-weight: 600;
  src: url("../fonts/CormorantGaramond-SemiBold.ttf");
}
@font-face {
  font-family: Cormorant;
  font-weight: 700;
  src: url("../fonts/CormorantGaramond-Bold.ttf");
}
@font-face {
  font-family: Cormorant;
  font-weight: 500;
  src: url("../fonts/CormorantGaramond-Bold.ttf");
}
@font-face {
  font-family: Jakarta;
  font-weight: 600;
  src: url("../fonts/PlusJakartaSans-SemiBold.ttf");
}
@font-face {
  font-family: JakartaBold;
  font-weight: 700;
  src: url("../fonts/PlusJakartaSans-Bold.ttf");
}
@font-face {
  font-family: Basically;
  font-weight: 300;
  src: url("../fonts/BasicallyASansSerif-Light.ttf");
}
@font-face {
  font-family: Basically;
  font-weight: 400;
  src: url("../fonts/BasicallyASansSerif-Regular.ttf");
}
@font-face {
  font-family: Basically;
  font-weight: 500;
  src: url("../fonts/BasicallyASansSerif-Medium.ttf");
}
@font-face {
  font-family: Basically;
  font-weight: 600;
  src: url("../fonts/BasicallyASansSerif-SemiBold.ttf");
}
@font-face {
  font-family: Kapakana;
  font-weight: 300;
  src: url("../fonts/kapakana-light.ttf");
}
@font-face {
  font-family: Kapakana;
  font-weight: 400;
  src: url("../fonts/kapakana-regular.ttf");
}
@font-face {
  font-family: Poppins;
  font-weight: 300;
  src: url("../fonts/Poppins-Light.ttf");
}
@font-face {
  font-family: Poppins;
  font-weight: 400;
  src: url("../fonts/Poppins-Regular.ttf");
}
@font-face {
  font-family: Poppins;
  font-weight: 500;
  src: url("../fonts/Poppins-Medium.ttf");
}
@font-face {
  font-family: Poppins;
  font-weight: 600;
  src: url("../fonts/Poppins-SemiBold.ttf");
}
@font-face {
  font-family: Muli;
  font-weight: 400;
  src: url("../fonts/Muli-Light.ttf");
}
@font-face {
  font-family: Muli;
  font-weight: 700;
  src: url("../fonts/Muli-Light.ttf");
}
.font-proxi {
  font-family: Proxi, sans-serif !important;
  font-weight: 700;
}

.font-muli {
  font-family: Muli, sans-serif !important;
}

.font-jakarta {
  font-family: Jakarta, sans-serif !important;
}

.font-basically {
  font-family: Basically, sans-serif !important;
}

.font-kapakana {
  font-family: Kapakana, sans-serif !important;
}

.font-poppins {
  font-family: Poppins, sans-serif !important;
}

.font-cormorant {
  font-family: Cormorant, sans-serif !important;
}

/* End Polices */
/* Largeur scroll-bar */
::-webkit-scrollbar {
  width: 0.7rem;
}

/* Arrière-plan scroll-bar */
::-webkit-scrollbar-track {
  background-color: lightgray;
  @apply shadow-lg;
}

/* the draggable scrolling handle. */
::-webkit-scrollbar-thumb {
  @apply rounded-md bg-pnud-blue_blur bg-opacity-60;
  -webkit-transition: 0.3s all ease;
  transition: 0.3s all ease;
}

/**/
/** * Eric Meyer's Reset CSS v2.0 (https://meyerweb.com/eric/tools/css/reset/) * http://cssreset.com */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
} /* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* header */
.header {
  transition: all 0.3s ease;
}

#menu ul li :hover {
  border-bottom: 2px solid #006eb5;
}

.fixme {
  position: fixed;
  width: 100%;
  background: #006eb5;
}
.fixme #main-menu ul li :hover {
  border-bottom: 2px solid #fff;
}
.fixme #main-menu ul li a {
  color: #fff !important;
}

.fixme #menu-header li a {
  color: #fff !important;
}

/* Nav tooglle */

#nav-toggle span{
  @apply block w-full h-[2px] bg-black absolute pointer-events-none;
  transition: opacity 0.5s 0.3s ease-out;
  --tw-bg-opacity: 1;
  background-color: rgb(26 26 27 / var(--tw-bg-opacity));
}

.fixme #nav-toggle span{
  background-color: #fff
}

#nav-toggle span:nth-child(1), #nav-toggle span:nth-child(3){
  transition: transform 0.5s ease-out;
}

#nav-toggle span:nth-child(1){
  @apply -translate-y-[5px];
}

#nav-toggle span:nth-child(3){
  @apply translate-y-[5px];
}

#nav-toggle span:nth-child(4){
  @apply translate-y-[10px];
  transition: 0.5s all ease;
}

#nav-toggle.open span:nth-child(1){
  @apply rotate-[135deg] translate-x-0 translate-y-0;
}

#nav-toggle.open span:nth-child(2){
  opacity: 0;
  transition: opacity 0s ease-out;
}

#nav-toggle.open span:nth-child(3){
  @apply rotate-[-135deg] translate-x-0 translate-y-0;
}

#nav-toggle.open span:nth-child(4){
  @apply hidden;
  transition: 0.5s all ease;
}


/* end */

#main-menu li a {
  @apply inline-block relative text-black font-medium font-muli transition delay-300 py-2 w-full lg:w-auto;
}

#main-menu li:nth-child(1) {
  @apply lg:hidden block;
}

#main-menu {
  transition: 0.3s all ease;
}

#main-menu li a:after {
  @apply block absolute bottom-[4px] h-[1px] left-[-3px]  origin-right scale-x-0 scale-y-0;
  /*background: rgba(55, 180, 74, 1);*/
  width: auto;
  transition: transform 0.3s ease-out;
  content: "";
}

#main-menu li.current-menu-item a:after {
  @apply block absolute bottom-[4px] h-[1px] left-[-3px]  origin-right scale-x-100 scale-y-100;
  /*background: rgba(55, 180, 74, 1);*/
  width: auto;
  transition: transform 0.3s ease-out;
  content: "";
}

#main-menu li a:hover:after {
  @apply scale-x-100 scale-y-100;
}

/* End Menu navigation */
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  @apply bg-pnud-blue_blur;
  -webkit-transition: 0.3s all ease;
  transition: 0.3s all ease;
}

.allText .text-pnud-about {
  @apply indent-8;
  padding-bottom: 20px;
}

/* Float three columns side by side */
.column {
  float: left;
  width: 33.33%;
  padding: 0 10px;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive columns */
@media screen and (max-width: 700px) {
  .container {
    width: 100%;
  }
  .column {
    width: 100%;
    display: block;
    margin-bottom: 20px;
  }

  #main-menu li.current-menu-item a:after {
    width: 0;
  }
}



@screen lg{
  .vh-screen {
    height: 150vh !important;
  }
}

/* Style the counter cards */
.cards {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  padding: 5px;
  text-align: center;
  background-color: #fff;
  border-radius: 10px;
  cursor: pointer;
}

.cards .profile {
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
  transition: 0.2s;

  height: inherit;
  -o-object-fit: cover;
  object-fit: cover;
  object-position: top;
}

.cards:hover .profile {
  transform: scale(1.4);
  border-top-right-radius: 50px;
  border-top-left-radius: 50px;
}

.cards .content {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.cards .content .back {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(241, 241, 241, 0.9019607843);
  transition: 1s;
  z-index: 1;
  padding: 10px;
}

.from-left {
  top: 0;
  left: -100%;
}

.cards:hover .content .from-left {
  left: 0%;
}

.from-bottom {
  top: 100%;
  left: 0;
}

.cards:hover .content .from-bottom {
  top: 0%;
}

.from-right {
  top: 0%;
  right: -100%;
}

.cards:hover .content .from-right {
  right: 0;
}

.cards .content .back h3 {
  letter-spacing: 2px;
}

.cards .content .back .tem-img {
  border-radius: 100%;
}

.cards .content .back .des {
  font-size: 13px;
  padding: 20px 0px;
}

.cards .content .back .social-icon {
  list-style: none;
  margin: 0px;
  padding: 0px;
}

.cards .content .back .social-icon li {
  display: inline-block;
}

.cards .content .back .social-icon li a {
  display: block;
  background: #333;
  color: #fff;
  width: 40px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  border-radius: 100%;
}

.profile-modal {
  height: 700px;
  -o-object-fit: cover;
  object-fit: cover;
  object-position:top
}

.bg-odd, .bg-odd2 {
  background-position: bottom;
  background-size: 80%;
  background-repeat: no-repeat;
}

.bg-odd {
  background-color: #006eb5;
}

.bg-odd2 {
  background-color: white;
}

/* Media queries *//*# sourceMappingURL=tailwind.css.map */

.download .button-report {
  padding: 1rem;
  background-color: #5c7ef7;
  color: #fff;
}

.footer {
  color: #fff;
  padding-top: 4rem;
  padding-bottom: 8rem;
}

.footer {
  padding-top: 2rem;
  padding-bottom: 6rem
}

.icon-btn {
  border-radius: 0 0.625rem 0.625rem 0 !important;
  background: #2c58f5 !important;
  margin-left: -0.5rem;
}

.menu-social li {
  display: inline-block;
}

.menu-social li a i {
  color: #fff;
  font-size: 3rem;
  padding: 0 1rem;
}

.menu-social li a i {
  font-size: 2rem;
  padding: 0 0.5rem;
}