/********** Template CSS **********/

:root {

    --primary: #52B9E4;

    --secondary: #F6F6F6;

    --light: #FFFFFF;

    --dark: #152440;

}



h1,

h2,

.font-weight-bold {

    font-weight: 700 !important;

}



h3,

h4,

.font-weight-semi-bold {

    font-weight: 600 !important;

}



h5,

h6,

.font-weight-medium {

    font-weight: 500 !important;

}



.pt-6 {

    padding-top: 90px;

}



.pb-6 {

    padding-bottom: 90px;

}



.py-6 {

    padding-top: 90px;

    padding-bottom: 90px;

}



.btn {

    font-family: 'Barlow', sans-serif;

    font-weight: 600;

    transition: .5s;

}



.btn-primary {

    color: #FFFFFF;

}



.btn-square {

    width: 36px;

    height: 36px;

}



.btn-sm-square {

    width: 28px;

    height: 28px;

}



.btn-lg-square {

    width: 46px;

    height: 46px;

}



.btn-square,

.btn-sm-square,

.btn-lg-square {

    padding-left: 0;

    padding-right: 0;

    text-align: center;

}



.back-to-top {

    position: fixed;

    display: none;

    right: 45px;

    bottom: 45px;

    z-index: 99;

}



.top-shape::before {

    position: absolute;

    content: "";

    width: 35px;

    height: 100%;

    top: 0;

    left: -17px;

    background: var(--primary);

    transform: skew(40deg);

}



.navbar-light .navbar-nav .nav-link {

    font-family: 'Barlow', sans-serif;

    padding: 35px 15px;

    font-size: 18px;

    text-transform: uppercase;

    color: var(--dark);

    outline: none;

    transition: .5s;

}







.sticky-top.navbar-light .navbar-nav .nav-link {

    padding: 20px 15px;

}



.navbar-light .navbar-nav .nav-link:hover,

.navbar-light .navbar-nav .nav-link.active {

    color: var(--primary);

}



@media (max-width: 991.98px) {

    .navbar-light .navbar-nav .nav-link  {

        padding: 10px 0;

    }

    .px-5{

        padding-right:3rem !important;

        padding-left:3rem !important;

    }

}



.carousel-caption {

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background: rgba(21, 36, 64, .7);

    z-index: 1;

}



@media (max-width: 576px) {

    .carousel-caption h5 {

        font-size: 14px;

        font-weight: 500 !important;

    }



    .carousel-caption h1 {

        font-size: 30px;

        font-weight: 600 !important;

    }

}



/* HERO IACCUEIL */

.hero {

    height: 100vh;

    display: flex;

    justify-content: center;

    align-items: center;

    text-align: center;

    color: white;

    background-image: url('../img/accueil4.png');

    background-size: cover;

    background-position: center center;

    background-repeat: no-repeat;

    background-attachment: fixed;

}



.hero-inner{

    z-index: 50000;

}





.hero h1 {

    color: white;

    font-size: 5em;

    margin-top: 0;

    margin-bottom: 0.5em;

    text-shadow: 5px 4px 5px rgba(99,62,58,0.22);

}



.hero .btn {

    font-family: 'Work Sans', sans-serif;

    display: inline-block; 

    width: 320px;

    height: auto;

    padding: 12px;

    margin-top: 50px;

    margin-left: 5em;

    margin-right: 5em;

    color: white; 

    text-decoration: none;

    font-size: 1.2em;

    border-radius: 50px;

}



#bouton1{

    

    background-color: #52B9E4;

}

#bouton2{

    background-color: white;

    color: black;

}

.overlay {

    background: #FAE2BE;  /* fallback for old browsers */

    background: linear-gradient(to right, #F26272, #F26272);

    opacity: 0.3;

    position: absolute;

    top: 0;

    right: 0;

    bottom: 0;

    left: 0;

    width: 100vw;

    height: 100vh;

  }



/* SERVICES */

  section {

    max-width: 1500px;

    margin: 0 auto;

    text-align: center;

    padding: 30px;

  }

  

  h3 {

    font-family: 'Montserrat', sans-serif;

    font-weight: 600;

    color: #333;

    font-size: 1.825rem;

    margin: 1.3rem 0;

  }

  

  .section-lead {

    max-width: 600px;

    margin: 1rem auto 1.5rem;

  }

  

  .service a {

    color: #5b7abb;

    display: block;

  }

  

  .service h4 {

    font-family: 'Montserrat', sans-serif;

    font-weight: 600;

    color: #56ceba;

    font-size: 1.3rem;

    margin: 1rem 0 0.6rem;

  }

  

  .services-grid {

    display: -webkit-box;

    display: flex;

    -webkit-box-align: center;

    align-items: center;

  }

  

  .service {

    background: #fff;

    margin: 20px;

    padding: 20px;

    border-radius: 4px;

    text-align: center;

    -webkit-box-flex: 1;

    flex: 1;

    display: -webkit-box;

    display: flex;

    flex-wrap: wrap;

    border: 2px solid #e7e7e7;

    -webkit-transition: all 0.3s ease;

    -moz-transition: all 0.3s ease;

    transition: all 0.3s ease;

  }

  

  .service:hover {

    -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.08);

    -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.08);

    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.08);

  }

  

  .service i {

    font-size: 3.45rem;

    margin: 1rem 0;

  }

  

  .service1 i,

  .service1 h4,

  .service1 .cta {

    color: #52B9E4;

  }

  

  .service1:hover {

    border: 2px solid #52B9E4;

  }

  

  .service2 i,

  .service2 h4,

  .service2 .cta {

    color: #52B9E4;

  }

  

  .service2:hover {

    border: 2px solid #52B9E4;

  }

  

  .service3 i,

  .service3 h4,

  .service3 .cta {

    color: #52B9E4;

  }

  

  .service3:hover {

    border: 2px solid #52B9E4;

  }

  

  .service .cta span {

    font-size: 0.6rem;

  }

  

  .service > * {

    flex: 1 1 100%;

  }

  

  .service .cta {

    align-self: flex-end;

  }

  

  @media all and (max-width:900px) {

    .services-grid {

      display: -webkit-box;

      display: flex;

      -webkit-box-orient: vertical;

      -webkit-box-direction: normal;

      flex-direction: column;

    }

  }



  /*SERVICES*/





  /*BANDEAU*/

  .bandeau{

    text-align: center;

    background-color: #52B9E4;

    padding: 50px;

    width: 75%;

    margin: 0 auto;

    border-radius: 20px;

    color: white;

  }



  .bandeau h3,h2{

    color: white;

  }  

  /*BANDEAU*/





  /* FORMATIONS */



  .formations{

    padding-top: 2em;

    margin-bottom: 3%;

  }

.formations h1{

  text-align: center;



}

.cards {

  width: 100%;

  display: flex;

  display: -webkit-flex;

  justify-content: center;

  -webkit-justify-content: center;



}



.card--1 .card__img, .card--1 .card__img--hover {

  background-image: url('../img/gerer_relations_client_locataire.jpg');

}



.card--2 .card__img, .card--2 .card__img--hover {

  background-image: url('../img/efficacite_services_generaux.jpg');

}

.card--3 .card__img, .card--3 .card__img--hover {

  background-image: url('../img/gestion_temps.jpg');

}





.card__img {

visibility: hidden;

  background-size: cover;

  background-position: center;

  background-repeat: no-repeat;

  width: 100%;

  height: 235px;

border-top-left-radius: 12px;

border-top-right-radius: 12px;



}

.card__info{

  padding: 12px;

}

.card__info-hover {

  position: absolute;

  padding: 16px;

width: 100%;

opacity: 0;

top: 0;

}



.card__img--hover {

transition: 0.2s all ease-out;

  background-size: cover;

  background-position: center;

  background-repeat: no-repeat;

  width: 100%;

position: absolute;

  height: 235px;

border-top-left-radius: 12px;

border-top-right-radius: 12px;

top: 0;



}

.card {

margin-right: 3em;

margin-left: 3em;

transition: all .4s cubic-bezier(0.175, 0.885, 0, 1);

background-color: #fff;

  width: 50.3%;

position: relative;

border-radius: 12px;

overflow: hidden;

box-shadow: 0px 13px 10px -7px rgba(0, 0, 0,0.1);

}

.card:hover {

box-shadow: 0px 30px 18px -8px rgba(0, 0, 0,0.1);

  transform: scale(1.10, 1.10);

}





.card__category {

  text-transform: uppercase;

  font-size: 13px;

  letter-spacing: 2px;

  font-weight: 500;

color: #868686;

}



.card__title {

  margin-top: 5px;

  margin-bottom: 10px;

}



.card__by {

  font-size: 12px;

  font-weight: 500;

}



.card:hover .card__img--hover {

  height: 100%;

  opacity: 0.3;

}



@media all and (max-width:900px) {

  .cards{

    display: -webkit-box;

    display: flex;

    flex-direction: column;

  }

  .card{

    width: 90%!important;

    margin: 0 auto;

    margin-bottom: 10%;

  }

}



/*FOOTER*/



.site-footer

{

  background-color:#26272b;

  padding:45px 0 20px;

  font-size:15px;

  line-height:24px;

  color:#b1a7a6;

}

.site-footer hr

{

  border-top-color:#bbb;

  opacity:0.5

}

.site-footer hr.small

{

  margin:20px 0

}

.site-footer h6

{

  color:#fff;

  font-size:16px;

  text-transform:uppercase;

  margin-top:5px;

  letter-spacing:2px

}

.site-footer a

{

  color:#fff;

}

.site-footer a:hover

{

  color:#52B9E4;

  text-decoration:none;

}

.footer-links

{

  padding-left:0;

  list-style:none;

}

.footer-links li

{

  display:block

}

.footer-links a

{

  color:#b1a7a6

}

.footer-links a:active,.footer-links a:focus,.footer-links a:hover

{

  color:#3366cc;

  text-decoration:none;

}

.footer-links.inline li

{

  display:inline-block

}

.site-footer .social-icons

{

  text-align:right

}

.site-footer .social-icons a

{

  width:40px;

  height:40px;

  line-height:40px;

  margin-left:6px;

  margin-right:0;

  border-radius:100%;

  background-color:#33353d

}

.copyright-text

{

  margin:0

}

@media (max-width:991px)

{

  .site-footer [class^=col-]

  {

    margin-bottom:30px

  }

}

@media (max-width:767px)

{

  .site-footer

  {

    padding-bottom:0

  }

  .site-footer .copyright-text,.site-footer .social-icons

  {

    text-align:center

  }

}

/*FOOTER*/



/*PROPOS*/

.container-propos{

  width: 70%;

  margin: 0 auto;

  padding-top: 1%!important;

  padding: 3%;

  margin-top: 2%;

  margin-bottom: 2%;

  text-align: justify;

}



.bouton{

  margin: 0 auto;

  margin-top: 1%;

  text-align: center;

  

  background-color: #52B9E4;

  color: white;

  border-radius: 15px;

  padding: 1.5%;

}



.bouton:hover{

  color: white;

  background-color: #a7d8ec;

  transition: 0.2s;

}





/*PROPOS*/





/* FORMATIONS SUR MESURE */

.formation-mesure{

  text-align: center;

  width: 60%;

  margin: 0 auto;

}



.parent {

  display: grid; 

  grid-template-columns: 1fr 1fr 1fr; 

  grid-template-rows: 1fr; 

  gap: 0px 0px; 

  grid-template-areas: 

    "div1 div2 div3"; 

}

  

.div1 { margin-right: 50px; grid-area: div1; }

.div2 { margin-right: 50px;grid-area: div2; }

.div3 { margin-right: 50px;grid-area: div3; }



@media (max-width: 650px) {

  .parent{

    display: block;

  }

}



/* FORMATIONS SUR MESURE */



/* ACCORDEON */



input {

  position: absolute;

  opacity: 0;

  z-index: -1;

}

.accordion-wrapper {

  border-radius: 8px;

  overflow: hidden;

  box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.5);

  width: 70%;

  margin:0 auto;

}

.accordion {

  width: 100%;

  color: white;

  overflow: hidden;

  margin-bottom: 16px;

}

.accordion:last-child{

  margin-bottom: 0;

}

.accordion-label {

  display: flex;

  -webkit-box-pack: justify;

  justify-content: space-between;

  padding: 16px;

  background: rgba(4,57,94,.8);

  font-weight: bold;

  cursor: pointer;

  font-size: 20px;

}

.accordion-label:hover {

  background: rgba(4,57,94,1);

}

.accordion-label::after {

  content: "\276F";

  width: 16px;

  height: 16px;

  text-align: center;

  -webkit-transition: all 0.3s;

  transition: all 0.3s;

}

.accordion-content {

  max-height: 0;

  padding: 0 16px;

  color: rgba(4,57,94,1);

  background: white;

  -webkit-transition: all 0.3s;

  transition: all 0.3s;

}

.accordion-content p{

  margin: 0;

  color: rgba(4,57,94,.7);

  font-size: 18px;

}

input:checked + .accordion-label {

  background: rgba(4,57,94,1);

}

input:checked + .accordion-label::after {

  -webkit-transform: rotate(90deg);

  transform: rotate(90deg);

}

input:checked ~ .accordion-content {

  max-height: 100vh;

  padding: 16px;

}



/* ACCORDEON */



/* CARDS FORMATIONS */

.hero-section{

  align-items: flex-start;

  display: flex;

  min-height: 100%;

  justify-content: center;

  padding: var(--spacing-xxl) var(--spacing-l);

}



.card-grid{

  display: grid;

  grid-template-columns: repeat(1, 1fr);

  grid-column-gap: var(--spacing-l);

  grid-row-gap: var(--spacing-l);

  max-width: var(--width-container);

  width: 100%;

}

.card-grid2{

  display: grid;

  grid-template-columns: repeat(1, 1fr);

  grid-column-gap: var(--spacing-l);

  grid-row-gap: var(--spacing-l);

  max-width: var(--width-container);

  width: 100%;

}



@media(min-width: 540px){

  .card-grid{

    grid-template-columns: repeat(2, 1fr); 

  }

  .card-grid2{

    grid-template-columns: repeat(2, 1fr); 

  }

}



@media(min-width: 960px){

  .card-grid{

    grid-template-columns: repeat(3, 1fr); 

  }



    .card-grid2{

      grid-template-columns: repeat(3, 1fr); 

    }

}



.card1{

  list-style: none;

  position: relative;

  height: 25em;

  margin-right: 10px;

  margin-top: 10px;



}

.card-grid a{

  color: white!important;

}

.card-grid2 a{

  color: white!important;

}






.card__background{

  background-size: cover;

  background-position: center;

  border-radius: var(--spacing-l);

  bottom: 0;

  filter: brightness(0.40) saturate(1.2) contrast(0.85);

  left: 0;

  position: absolute;

  right: 0;

  top: 0;

  transform-origin: center;

  trsnsform: scale(1) translateZ(0);

  transition: 

    filter 200ms linear,

    transform 200ms linear;

}



.card1:hover .card__background{

  transform: scale(1.05) translateZ(0);

}



.card-grid:hover > .card:not(:hover) .card__background{

  filter: brightness(0.5) saturate(0) contrast(1.2) blur(20px);

}



.card__content{

  left: 0;

  padding: var(--spacing-l);

  position: absolute;

  top: 0;

}



.card__category{

  color: var(--text-light);

  font-size: 0.9rem;

  margin-bottom: var(--spacing-s);

  text-transform: uppercase;

  margin-top: 3%;

}



.card__heading{

  color: var(--text-lighter);

  font-size: 1.7rem;

  text-shadow: 2px 2px 20px rgba(0,0,0,0.2);

  width: 80%;

  margin: 0 auto;

  margin-top: 15%;



}



/* INTERVENANTS */ 

.box-shadow {

  box-shadow: inset 10px 10px 8px -10px #CCC, inset -10px -10px 8px -10px #CCC;

}

.content-box-wrapper .content-box h4{

font-weight: 500;

}



.content-box-wrapper .content-box p{

color: #777;

font-size: 18px;

text-align: center;

}

.content-box{

  text-align: center;

  padding: 15px;

  height: 100%;

  border-radius: 4px;

  -webkit-transition: all 0.3s ease 0s;

  -moz-transition: all 0.3s ease 0s;

  transition: all 0.3s ease 0s;

}

.content-box:hover{

  background:#fff;

  box-shadow: 2px 2px 15px 0 rgba(135,135,135, 0.4);

  transition: all 0.5s ease 0s;

}

.content-box .finbyz-icon img{

  height:85px;

  border-radius: 40px;

}

.content-box .finbyz-icon{

  margin: 0 auto;

}







hr.lines {

  margin: auto;

  width: 100px;

  position: relative;

  border-top: 2px solid #0071bc;

  margin-top: 15px;

}

hr.lines:before {

  position: absolute;

  content: "";

  display: inline-block;

  height: 20px;

  width: 20px;

  top: -11px;

  border: 6px solid #D6D8FF;

  border-radius: 50%;

  background: #0071bc;

  left: 40px;

  animation: pulse 2s infinite;

}

/* pules effect */

@-webkit-keyframes pulse {

0% {

  -webkit-box-shadow: 0 0 0 0 rgba(70,118,250, 0.4);

}

70% {

    -webkit-box-shadow: 0 0 0 20px rgba(70,118,250, 0);

}

100% {

    -webkit-box-shadow: 0 0 0 0 rgba(70,118,250, 0);

}

}

@keyframes pulse {

0% {

  -moz-box-shadow: 0 0 0 0 rgba(70,118,250, 0.4);

  box-shadow: 0 0 0 0 rgba(70,118,250, 0.4);

}

70% {

    -moz-box-shadow: 0 0 0 20px rgba(70,118,250, 0);

    box-shadow: 0 0 0 20px rgba(70,118,250, 0);

}

100% {

    -moz-box-shadow: 0 0 0 0 rgba(70,118,250, 0);

    box-shadow: 0 0 0 0 rgba(70,118,250, 0);

}

}

/* INTERVENANTS */ 





#contact {

  width: 100%;

  height: 100%;

}



.section-header {

  text-align: center;

  margin: 0 auto;

  padding: 40px 0;

  font: 300 60px 'Oswald', sans-serif;



  text-transform: uppercase;

  letter-spacing: 6px;

}



.contact-wrapper {

  

  margin: 0 auto;

  padding: 20px;

  position: relative;

  max-width: 840px;

}



/* Begin Right Contact Page */

.direct-contact-container {

  max-width: 800px;

}



/* Location, Phone, Email Section */

.contact-list {

  list-style-type: none;

  margin-left: -30px;

  padding-right: 20px;

}



.list-item {

  line-height: 4;

  color: #aaa;

}



.contact-text {

  font: 300 18px 'Lato', sans-serif;

  letter-spacing: 1.9px;

  color: #bbb;

}



.place {

  margin-left: 62px;

}



.phone {

  margin-left: 56px;

}



.gmail {

  margin-left: 53px;

}



.contact-text a {



  text-decoration: none;

  transition-duration: 0.2s;

}



.contact-text a:hover {



  text-decoration: none;

}







hr {

  border-color: rgba(255,255,255,.6);

}



/* Begin Media Queries*/

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

  .contact-wrapper {

    display: flex;

    flex-direction: column;

  }

  .direct-contact-container, .form-horizontal {

    margin: 0 auto;

  }  

  

  .direct-contact-container {

    margin-top: 60px;

    max-width: 300px;

  }    



}



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



  .direct-contact-container, .form-wrapper {

    float: none;

    margin: 0 auto;

  }  

  .form-control, textarea {

    

    margin: 0 auto;

  }

 

  

  .name, .email, textarea {

    width: 280px;

  } 

  

  .direct-contact-container {

    margin-top: 60px;

    max-width: 280px;

  }  

  .social-media-list {

    left: 0;

  }

  .social-media-list li {

    height: 55px;

    width: 55px;

    line-height: 55px;

    font-size: 2rem;

  }

  .social-media-list li:after {

    width: 55px;

    height: 55px;

    line-height: 55px;

  }

  

}



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

  .send-button {

    width: 99%;

  }

}