@import "bootstrap.min.css";


:root{
  --bg-color: #fffdf7;
  --bg-green: #ddf1ec;
  --bg-dark: #2d3983;
/*  --main-green: #0EA9AF;*/
  --main-green: #6ac0ad;
  --main-purple: #712e9e;
  --main-yellow: #f0bf4c; /* #FFC93C; */
}

a {
  color: var(--bg-dark);
}

a.social {
    height: 50px;
    border-radius: 25px;
    padding: 8px 15px !important;
}

h4 {
    font-size:1.25rem;
}

.btn-primary {
  padding: 10px 35px;
  border-radius: 20px;    
  background-color: var(--main-yellow);
  border: 1px solid var(--main-yellow);
  color: var(--bg-dark);
  background-size: 200% auto;
  font-size: 16px; 
  font-weight: bold;
}


.btn-primary:hover, .btn-primary:active {
  color: var(--bg-dark) !important;
  border-color: var(--main-yellow) !important;
/*  border: 1px solid var(--main-yellow);*/
  background-color: transparent !important;
  font-weight: bold;
}

.main_menu {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 999;
  color: inherit;
}

.main_menu .navbar-brand {
  padding: 0rem !important;
}

.main_menu .navbar {
  padding: 20px 0px;
}

.main_menu .navbar-toggler {
  position: relative;
  z-index: 1;
  padding: 0.45rem .75rem;
}

.main_menu .navbar-toggler {
  -webkit-appearance: initial;
  border: 1px solid #F7941E;
  padding: 13.5px;
  margin-right:5px;
}

.main_menu .navbar-toggler:after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
  background-size: 200% auto;
}

.main_menu .main-menu-item {
  text-align: right;
  justify-content: right;
}

@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .main_menu .main-menu-item {
    padding-left: 25px;
  }
}

.main_menu .main-menu-item ul li .nav-link {
  font-size: 22px;
  padding: 0px 16px;
}

.main_menu .main-menu-item ul li .nav-link {
  color: var(--bg-dark);
}

@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .main_menu .main-menu-item ul li .nav-link {
    padding: 0px 16px;
  }
}

.main_menu .main-menu-item ul li .nav-link:hover {
  color: var(--main-green) !important;
  cursor: pointer;
}

@media (max-width: 992px) {
    .navbar-collapse {
        overflow: scroll;
        max-height: 90vh;
        overscroll-behavior: contain;
    }

   .main_menu .main-menu-item .nav-item > a, .main_menu .main-menu-item .nav-item > label {
        padding: 15px 15px !important;
   }

    label.nav-link.dropdown-item {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }

    .submenu, .main_menu .main-menu-item .nav-item .nav-list a {
        padding-left: 3rem !important;
    }
}

@media (max-width: 576px) {
  .navbar-collapse {
    z-index: 9999 !important;
    position: absolute;
    left: 0;
    top: 71px;
    width: 100%;
    background-color: #fff;
    text-align: center !important;
  }
  .main_menu .main-menu-item {
    text-align: left !important;
  }
  .navbar-nav {
    align-items: start !important;
  }
}

@media (min-width: 576px) and (max-width: 767px) {
  .navbar-collapse {
    z-index: 9999 !important;
    position: absolute;
    left: 0;
    top: 71px;
    width: 100%;
    background-color: #fff;
    text-align: center !important;
  }
  .main_menu .main-menu-item {
    text-align: left !important;
  }
  .navbar-nav {
    align-items: start !important;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .navbar-collapse {
    z-index: 9999 !important;
    position: absolute;
    left: 0;
    top: 71px;
    width: 100%;
    background-color: #fff;
    text-align: center !important;
  }
  .main_menu .main-menu-item {
    text-align: left !important;
  }
  .navbar-nav {
    align-items: start !important;
  }
}

@media (max-width: 991px) {
  .navbar-collapse {
    box-shadow: rgba(0, 0, 0, 0.2) 0px 10px 20px 0px;
    padding: 10px 0;
  }
  .navbar-collapse .nav-item, .navbar-collapse .nav-link {
    width: 100%;
  }
  .navbar-collapse .nav-item:hover {
    background-color: var(--bg-color);
  }
  .nav-link {
    color: var(--bg-dark) !important;
  }
  body.dark-hero .main_menu:not(.menu_fixed) .main-menu-item ul a.nav-link:hover {
    color: var(--main-green) !important;
  }
}

.main_menu .dropdown-item:hover {
  background-color: var(--bg-color);
}

.main_menu .dropdown-menu {
  left: 15px;
  margin-top: 15px;
}

@media only screen and (min-width: 1080px) {
  .navbar button {
    margin-left: 1.5rem;
  }
}

.menu_fixed {
  position: fixed;
  z-index: 9999 !important;
  width: 100%;
  background-color: var(--bg-color);
  box-shadow: 0 0 3rem rgba(0, 0, 0, 0.1);
  top: 0;
}

section#partenaires {
    padding: 7rem; 
}

section#partenaires img {
    margin-right: 0.5rem; 
}

section.section-color {
  padding: 7rem;
  margin-top : 10rem;
  background-color: var(--bg-green);
  color: var(--bg-dark);
}

section.section-color {
    background-image: url('../img/petals.svg'); 
    background-size: auto 600px;
    background-position: -7rem -9rem;
    background-repeat: no-repeat;   
    margin-top: 6rem;
    padding: 10rem 11rem 6rem;
}
/*
section#presentation:before {
    display:    inline-flex;
    content: '';

     Using the background-image and
       its related properties to add
       the SVG content 
    background-image: url('../img/petals.svg');
    background-size: 400px 400px;
    height: 400px;
    width: 400px;
}*/

section.section-color p, section#erasmus p {
    font-weight: 300;
    font-size: 1.4rem;
    margin-top:2rem;
}

section#presentation h2 {
  font-weight: 600;
}

section#erasmus {
  padding: 7rem;    
}




/* Case studies */

section#outils-guides {
/*  padding-top : 10rem;*/
}

#outils-guides .case-study {
  padding: 20px;
  text-align: left;
}

#outils-guides .case-study > div {
  background: white;
  height: 100%;
  padding: 15px 20px 15px;
  border-radius: 10px;
  border: 2px solid transparent;
  box-shadow:0px 0px 10px #bbb;
}

#outils-guides .case-study > div:hover{
  border: 2px solid var(--main-green);
}

#outils-guides .case-study > div div:last-child p:first-child {
  margin-bottom: 10px;
}

#outils-guides .case-study h3 {
  font-size: 24px;
  line-height: 40px;
}

#outils-guides .case-study h3 + p {
  margin-bottom: 25px;
}

#outils-guides .case-footer {
    align-items: flex-end;
}

#outils-guides .case-footer .col-6 {
  padding:0 !important;
}


/* Timeline */

#timeline {
  margin-top: 8rem;
}

.events::before {
  content: "";
  position: absolute;
  top: 0;
  height: 100%;
  width: 1px;
  background: var(--main-green);
}

.events {
  position: relative;
  display: flex;
  margin-block: 0.5em;
  flex-direction: column;
  row-gap: 1em;
}

.event {
  display: flex;
  align-items: baseline;
}
.event .marker {
  position: relative;
  left: -6px;
}

.event.life .marker {
  fill: var(--main-yellow);
}
.event.programming .marker {
  fill: var(--main-green);
}
.event.family .marker {
  fill: var(--main-purple);
}
.content time {
  font-weight: bold;
}

.event:nth-child(even) {
  flex-direction: row-reverse;

  .content { text-align: left; };
  .marker { left: 6px; };
}


@media (min-width: 700px) {
  .events::before {
    left: 50%;
  }
  .event .marker {
    order: 1;
  }
  .event .content {
    width: 50%;
    text-align: right;
    padding-inline: 1em;
  }
  .event:is(.programming, .work, .projects) {
    flex-direction: row-reverse;

    .content {
      text-align: left;
    }
    .marker {
      left: 6px;
    }
  }
}