/* GENERAL */

:root {
    --mediumBlue: #3950A2;
    --lightBlue: #6485C3;
    --darkRed: #BE1622;
    --darkBlue: #29235C;
    --white: #fff;
}

@font-face {
  font-family: "RennerBold";
  src:
    url("../fonts/Renner/Renner_ 400 Book 2.ttf");
  font-weight: bold;
}

@font-face {
  font-family: "PoppinsBold";
  src:
    url("../fonts/Poppins/Poppins-Bold.ttf");
}

@font-face {
  font-family: "PoppinsRegular";
  src:
    url("../fonts/Poppins/Poppins-Regular.ttf");
}

@font-face {
  font-family: "PoppinsItalic";
  src:
    url("../fonts/Poppins/Poppins-Italic.ttf");
}

body
{
    font-family: PoppinsRegular, sans-serif;
    font-size: 100%;
}

p 
{
    font-size: 1em;
}

h1,h2,h3,h4,h5,h6
{
    font-weight: bold;
}

img
{
    max-width: 100%;
    height: auto;
}

section
{
    padding:45px 0 80px 0;
}

section .heading
{
    text-align: center;
    padding-bottom: 40px;
}

section .heading h2
{
    text-transform: uppercase;
    
}

.red-divider
{
    width: 100px;
    height: 2px;
    background: var(--mediumBlue);
    margin: 0 auto;
}

.white-divider
{
    width: 100px;
    height: 2px;
    background: var(--white);
    margin: 0 auto;
}

ul, ol
{
    list-style:none;
}

.button1
{
    font-weight: bold;
    text-transform: uppercase;
    color: var(--white);
    border: 1px solid var(--white);
    margin-top: 20px;
    padding: 18px 50px;
    border-radius: 3px;
    display: inline-block;
    transition: all 0.3s ease-in 0s;
    background:transparent;
}

.button1:hover
{
    background: var(--white);
    color: var(--mediumBlue);
    text-decoration: none;
}

.contactFormButton
{
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    color: var(--mediumBlue);
    border: 1px solid var(--mediumBlue);
    margin: 40px auto 0;
    padding: 18px 50px;
    border-radius: 3px;
    display: block;
    width: fit-content;
    transition: all 0.3s ease-in 0s;
    background:transparent;
    cursor: pointer;
}

.contactFormButton:hover
{
    background-color: var(--mediumBlue) !important;
    color: var(--white) !important;
    text-decoration: none;
    border-radius: 3px;
}


/* MENU */
.navbar {
    background-color: var(--mediumBlue);
    /*font-size: 12px;*/
    border-bottom: 1px solid var(--white);
    letter-spacing: 4px;
    text-transform: uppercase;
    font-weight: bold;

}

.navbar-brand, .navbar-brand:hover 
{
    color: var(--white)
}

.navbar-brand img
{
    width: 150px;
    height: 35px;
    
}

.nav-pills{
    padding-left: 1rem;
}

.nav-pills .nav-link{
    color: var(--white) !important;
    text-align: center;
    border-radius: 3px;
}
.nav-pills .nav-link.active, .nav-pills  .nav-link:hover{
    color: var(--mediumBlue) !important;
    background-color: var(--white) !important;
    border-style:none;
    border-radius: 3px;
}
.navbar-toggler, .btn-close{
    border: none;
    color: transparent !important;
}

.navbar-toggler-icon{
    background-image: url(../images/list.svg);
}

.btn-close{
    filter: invert(100%) contrast(1000%);
}

.btn-close:focus{
    box-shadow: none;
}

.offcanvas-header{
    flex-direction: column-reverse;
    padding-left: 2rem;
    padding-right: 2rem;
}

#offcanvasNavbar{
    background-color: var(--mediumBlue);
    color: var(--white) !important;
    text-align: center;
    border-radius: 3px;
}

#offcanvasNavbarLabel img{
    height: 70px;
}

.dropdown-menu{
    border: none;
}

.dropdown-menu, .dropdown-item {
    background-color: var(--mediumBlue);
    color: var(--white) !important;
    text-align: center;
    border-radius: 3px;
}

.dropdown-item:hover {
    color: var(--mediumBlue) !important;
    background-color: var(--white) !important;
    border-style:none;
    border-radius: 3px;
}

#langBtn
{
    border-style:none;
    background-color: transparent;
    cursor: pointer;
}

#langBtn img 
{
    max-width: 30px; 
    max-height: 24px;
}

.offcanvas-backdrop.show {
  opacity: 1;
  background-color: rgba(15,23,42,.5);
  backdrop-filter: blur(8px);
}


/* MAVENTIS*/

#maventis
{
    padding-top: 100px;
    background-image: url(../images/wood_bg_33348_129733.jpg);
    background-size: cover;
    /*background-blend-mode: darken;
    background-color: rgba(0,0,0,0.2);*/
}

#backgroundPicture
{
    background-size: cover;
    size: inherit;
}

#maventis .heading h1
{
    color:var(--white);
    text-transform: uppercase;
    margin-top: 10px;
}

#maventis .heading h3 
{
    color:var(--mediumBlue);
}

/* CAROUSEL */

#myCarousel
{
    background-color: transparent;
}

#myCarousel h3, #myCarousel h4
{
    color: var(--white);
}

#maventis .heading h4
{
    color:var(--white);
}

.carousel-control-prev img
{
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    font-size: 0;
    outline: 0;
}

.carousel-control-next img
{
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    font-size: 0;
    outline: 0;
}

#myCarousel .carousel-item
{
    text-align: center;
}

 #myCarousel .carousel-item
{
    padding:40px 30px;
} 

#myCarousel .carousel-item h3
{
    color:var(--mediumBlue);
    font-style: italic;
}

/*.carousel-control-prev span, .carousel-control-next span
{
    font-size:25px;
} */

/* ABOUT US */

#about
{
    background-color: var(--white);
}

#about .red-divider
{
    margin-bottom: 20px;
}

#about .heading h2
{
    color: var(--mediumBlue);
}

.description
{
    display: flex;
    text-align: justify;
    color: var(--mediumBlue);
}

.description p
{
    margin: auto;
}

.w-100
{
    margin-top: 8px;
    margin-bottom: 8px;
}

.lightVal {
    background: linear-gradient(to right, var(--mediumBlue) 50%, var(--white) 50%);
    background-size: 200% 100%;
    background-position:right bottom;
    border-radius: 5px;
    transition:all 1s ease;
}
.highlighted {
    background-position:left bottom;
    content: attr(data-text);
    color: var(--white);
    overflow: hidden;
    animation: text-fill 1s ease;
}

@keyframes text-fill {
    100% {
        width: 100%;
    }
}

@media (max-width: 992px) {
    .ideaImgContainer {
        display: none;
    }
    .meetingImgContainer {
        margin-bottom: 16px;
    }
}

/* SERVICES */

#services
{
    background-color: var(--mediumBlue);
}

#services .heading h2
{
    color: var(--white);
    margin-top: 20px;
}

.timeline
{
    padding: 30px 10px;
    position: relative;
}

.timeline-heading h4:nth-child(even)
{
    color:var(--mediumBlue);
}

.timeline-heading h4:nth-child(odd)
{
    color:var(--white);
}

.timeline-body p
{
    color:var(--white);
    text-align: justify;
}

.timeline:before
{
    top: 0;
    bottom: 0;
    position: absolute;
    content: " ";
    width: 5px;
    background: var(--white);
    left: 50%;
    margin-left: -2,5px;
}

.timeline > li
{
    margin-bottom: 20px;
    position: relative;
}

.timeline > li:after
{
    clear: both;
}

.timeline > li:before, .timeline > li:after
{
    content: " ";
    display: table;
}

.timeline li .timeline-badge
{
    color: var(--mediumBlue);
    width: 50px;
    line-height: 50px;
    /*font-size: 20px;*/
    text-align: center;
    position: absolute;
    top: 16px;
    left: 50%;
    margin-left: -22.5px;
    background-color: var(--white);
    border-radius: 50%;
}

.timeline-panel-container
{
    width: 50%;
    float: left;
}

.timeline-panel-container-inverted
{
    width: 50%;
    float: right;
}

/*TEST*/

.timeline-panel, .timeline-panelHidden
{
    visibility:hidden;
    width: 100%;
    float: right;
    margin-right: 43px;
    border: 1px solid #d4d4d4;
    border-radius: 7px;
    padding: 20px 25px;
    position: relative;
    box-shadow: 0 1px 6px rgba(0,0,0, 0.175);
    background: var(--white);
}

/*.timeline-panel.slider
{
    width: 100%;
    float: right;
    margin-right: 43px;
    border: 1px solid #d4d4d4;
    border-radius: 7px;
    padding: 20px 25px;
    position: relative;
    box-shadow: 0 1px 6px rgba(0,0,0, 0.175);
    background: var(--white);
    visibility:visible;
}*/

.timeline-panel-container-inverted .timeline-panel, .timeline-panel-container-inverted .timeline-panelHidden
{
    float: left;
    margin-left: 48px;
}


.timeline-panel:after, .timeline-panelHidden:after
{
    position: absolute;
    top: 27px;
    right: -14.5156245px;
    display: inline-block;
    border-top: 14px solid transparent;
    border-left: 14px solid var(--white);
    border-right: 0 solid var(--white);
    border-bottom: 14px solid transparent;
    content: " ";
}

.timeline-panel-container-inverted .timeline-panel:after, .timeline-panel-container-inverted .timeline-panelHidden:after
{
    border-left-width: 0;
    border-right-width: 15px;
    left: -14.5156245px;
    right: auto;
}

.timeline-heading h3
{
    margin-top: 5px;
    /*font-size: 20px;*/
}

.timeline-heading h4
{
    color: var(--mediumBlue);
}

/* Timeline experience - media queries for smartphones */

@media (max-width:768px)
{

.timeline:before
{
   left: 0%;
   margin-left:11px;
}


.timeline li .timeline-badge
{
    left: 0%;
}

.timeline-panel-container
{
    width: 100%;
}
    
    .timeline-panel-container .timeline-panel, .timeline-panel-container .timeline-panelHidden
{
      float: left;
      margin-right: 0;
      margin-left: 0;
}

.timeline-panel-container-inverted
{
    width: 100%;
}


.timeline-panel-container-inverted .timeline-panel, timeline-panel-container-inverted .timeline-panelHidden
{
    float: left;
    margin-right: 0;
    margin-left: 0;
}

.timeline-panel-container .timeline-panel:after, .timeline-panel-container .timeline-panelHidden:after
{
    border-left-width: 0;
    border-right-width: 14px;
    left: -14px;
    right: auto;
}

}

#service1, #service2, #service3, #service4, #service5, #service6, #service7, #service8{
    background-size: cover;
    background-blend-mode: darken;
    background-color: rgba(0,0,0,0.5);
}

#service1{
    background-image: url(../images/house-keys-4521073_1920.jpg);
}

#service2{
    background-image: url(../images/house-keys-4521073_1920.jpg);
}

#service3{
    background-image: url(../images/house-keys-4521073_1920.jpg);
}

#service4{
    background-image: url(../images/house-keys-4521073_1920.jpg);
}

#service5{
    background-image: url(../images/house-keys-4521073_1920.jpg);
}

#service6{
    background-image: url(../images/house-keys-4521073_1920.jpg);
}

#service7{
    background-image: url(../images/house-keys-4521073_1920.jpg);
}

#service8{
    background-image: url(../images/house-keys-4521073_1920.jpg);
}

#service1Hidden, #service2Hidden, #service3Hidden, #service4Hidden, #service5Hidden, #service6Hidden, #service7Hidden, #service8Hidden
{
    visibility:hidden;
    display:none;
}

.transit
{
    width: 0;
    padding-left: 0; 
    padding-right: 0; 
    border: 0;
    display: block;
    visibility: visible;
}

/* FOOTER */

footer
{
    background: var(--mediumBlue);
    padding: 40px 0 80px;
}

#scrollTopBtn
{
    font-size: 25px;
    margin: 20px;
    color: var(--white);
    height:30px;
    font-weight: bolder;
}

#copyright
{
    color: var(--white);
}

.footerElmtCont{
    margin-top: 8px;
}

.footerElmt a{
    text-decoration: none;
    color: var(--white);
    border-radius: 3px;
    padding-left: 8px;
    padding-right: 8px;
}

.footerElmt a:hover{
    color: var(--mediumBlue);
    background-color: var(--white);
    border-style:none;
    border-radius: 3px;
}

.footerElmt a:visited{
    color: var(--white);
    background-color: var(--mediumBlue);
}

/* CONTACT FORM */

#contact
{
    background-color:var(--white);
}

#contact .heading h2
{
    color:var(--mediumBlue);
    margin-top:20px;
}

#contact iframe
{
    padding-bottom: 40px;
    border-radius: 10px;
    border: 2px solid var(--mediumBlue);
}

#contact-form
{
    /*font-size: 20px;*/
    color: var(--mediumBlue);
}

.form-control
{
    height: 50px;
    /*font-size: 18px;*/
}

.comments
{
    font-style: italic;
    /*font-size: 12px;*/
    color:var(--mediumBlue);
    height:100%;
}

#contact-form input[type=submit]
{
    margin:40px auto 0;
    display:block;
}

.thank-you
{
    color: var(--mediumBlue);
    text-align: center;
    margin-top: 15px;
    font-weight:bold;
    /*font-size:22px;*/
}

/* TOAST */

.toast-header
{
    text-align: center;
}

.toast-header strong
{
    color: var(--mediumBlue);
}

.toast-header img
{
    max-height: 20px;
    max-width: 20px;
}

#toastText
{
    color: var(--mediumBlue);
    text-align: justify;
}

.btnContainer
{
    display: flex;
}

.btn
{
    background-color: var(--mediumBlue);
    color: var(--white);
    border: 1px solid var(--mediumBlue);
    width:113.4px;
    padding-left: 8px;
    padding-right: 8px;
    border-radius: 3px;
    text-align: center;
}

.btn:hover, .btn:active
{
    color: var(--mediumBlue);
    background-color: var(--white);
    border: 1px solid var(--mediumBlue);
    border-radius: 3px;
}

/* MEDIA QUERIES */

/* MEDIA QUERIES RECOS => correction carroussel qui fait agrandir la section */

@media screen and (max-width:489px)
{
    #myCarousel
    {
        height: 174px;
    }
    
    #maventis
    {
        padding-bottom: 50px;
    }
}

@media screen and (min-width:1200px)
{
    .col-xl-10
    {
        margin-left: auto;
        margin-right: auto;
    }
}

@media screen and (max-width: 400px)
{
    .timeline-body p
    {
        font-size: 100%;
    }
}

@media screen and (max-width: 768px)
{
    body {
        font-size: 75%;
    }
    
    .timeline-badge span {
        font-size: 20px;
    }
    
    input[type=text], input[type=tel], #contact-form textarea {
        font-size: 90%;
    }
    
    #toastText{
        font-size: 75%;   
    }
}

@media screen and (768px < width <= 792px)
{
    .nav-link {
        font-size: 75%;
    }
}

@media screen and (width < 576px)
{
    .timeline-heading h4 {
        font-size: 140%;
    }
    
    #services .container
    {
        margin-left: 12px;
        margin-right: 0;
        max-width: 90vw;
    }   
}