* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  margin: 0;
  
}

body {
  background-color: #042B24;
  margin: 0;
  font-family:'Outfit', sans-serif;
  letter-spacing: 0.3px;
  color: white;
  font-size: 24px;  
  
}

/**
*
HEADER/NAV BLOCK
*
**/
header, footer {
  background-color: white;
  padding: 25px 25px;
}

header {
  position: sticky; 
  top: 0;
  z-index: 2;
}

nav {
  background-color: rgb(255, 255, 255);
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;     
  font-size: 18px; 
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

#lienPages li {
  margin: 0 2rem;
}

#lienLangues li{
  margin: 0 0.4rem;
}

nav a {
  color: black;
  text-decoration: none;
  display: inline-block;
  position: relative;
  padding: 0.2em 0;
}

nav a::after{
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #000000;
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
}

nav a:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%
}

.sticky + .content {
  padding-top: 102px;
}

/**
**
* BUTTONS
**
**/
#intro-forms {
  display: flex;
  flex-direction: row;
  gap: 10px;
}

#intro-forms form{
  width: fit-content;
  text-align: left;
}

button svg{
  z-index: 100;
}
button {
  padding: 25px 35px;
  margin: 20px 10px 20px 0;
  border: unset;
  border-radius: 15px;
  color: rgb(0, 0, 0);
  z-index: 1;
  background: #f5f5f5;
  font-family: 'Kumbh Sans', sans-serif;
  position: relative;
  font-size: 30px;
  font-weight: 700;
  box-shadow: 4px 8px 19px -3px rgba(0,0,0,0.27);
  transition: all 250ms;
  overflow: hidden;
  cursor:pointer;
 }
 
 button::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0;
  border-radius: 15px;
  background-color: #F5BD4E;
  z-index: -1;
  box-shadow: 4px 8px 19px -3px rgba(0,0,0,0.27);
  transition: all 250ms
 }
 
 button:hover {
  color: #212121;
 }
 
 button:hover::before {
  width: 100%;
 }

 /**
 *
 GLOBAL
 *
 **/

.jaune {
  color: #F5BD4E;
}

h1 {
  display: inline;
  font-size: 100px;
  border: none;
  letter-spacing: -1px;
}

h2 {
  color: #F5BD4E;
  text-align: center;
  font-size: 100px;;
  display: block;
  margin-bottom: 40px;
}

section {
  display: flex;
  flex-direction: column;
  padding: 5em;
} 


/**
PRESENTATION
**/

.intro {
  display: flex;
  flex-direction: column;
  margin: auto;
  padding: 5em;
  gap: 20px;
  justify-content: center;
  height: auto;
  width: auto;
}



/**
SECTION PROJETS
**/

#section-projets {
  display: flex;
  flex-direction: column;
}

 .projets {
  background-color: #F5BD4E;
  padding-bottom: 5em;
  border: #F5BD4E;
  border-radius: 150px;
  padding: 2em;
  height: 60vh;
  width: auto;
  margin-top: 3.5em ;
 }


 .swiper-wrapper {
  transition-timing-function: linear;
}
    .swiper {
      width: 100%;
      height: 100%;
      margin: 0;
      border-radius: 100px;
    }

      .swiper-slide {
        margin: 0;
        overflow: hidden;
        display: flex;
        justify-content: center;
        width: auto;
        height: 100%;
      
      }
  
        .swiper-slide img {
          width: auto;
          height: 100%;
          object-fit: cover;
          border-radius: 50px;
        }
    
  /*   .swiper-custom-nav {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      left: 0;
      z-index: 99;
      display: flex;
      justify-content: space-between;
      box-sizing: border-box;
      width: 100%;
      padding: 0 2rem;
    }
 */

/**
SECTION SUB
**/


h3 {
  color: #F5BD4E;
}

.block-container,
.block-container-inverse {
  display:flex;
  align-items: center;
  overflow: hidden;
  gap : 80px;
  width: 100%;
  height: auto;
  justify-content: space-between;
  margin-top: 3.5em ;
}

.block-container-inverse {
  align-content: flex-end;
  
}

.text-left, 
.text-right {
  width: 100%;
  display: flex;
  flex-direction: column;
  flex: 1;
  opacity: 1;
  transform: translateX(0);
  transition: all 0.7s ease-in-out;
}

.text-left {
  text-align: right;
  box-sizing: border-box;
}

.text-right {
  text-align: left;
}

.img-right,
.img-left {
  flex: 1;
  width: 100%;
  height: auto;
  opacity: 1;
  transform: translateX(0);
  transition: all 0.7s ease-in-out;
}

.img-left {
  object-position: left;
}

.img-right img,
.img-left img{
  width: 100%;
  height: auto;
  object-fit: cover;
}

.push-right{
  opacity: 0;
  transform: translateX(50px);
}

.push-left{
  opacity: 0;
  transform: translateX(-50px);
}

img-comparison-slider:focus {
  outline: none;
}


 /**
SECTION SERVICES
**/

#servicesSection,
#contactSection {
  height: 100%;
  justify-content: space-evenly;
}

.services {
  display: flex;
  flex-direction: row;
  gap: 80px ;
  justify-content: center;
  margin-top: 3.5em ;
  
}
.services-row{
  display: flex;
  flex-direction: row;
  gap: 80px;
  width: 100%;
  justify-content: space-around;
}

.servicesTitle,
.projetsTitre,
.subTitle,
.contactTitle {
  opacity: 1;
  transform: translateY(0);
  transition: all 0.7s ease-in-out;
}

.cc, .interview, .location, .adhd {
  display: flex;
  flex-direction: column;
  text-align: center;
  max-width: 100%;
  opacity: 1;
  transform: translateY(0);
  transition: all 0.7s ease-in-out;
}

  .cc {
    transition-delay: 100ms;
  }

  .interview {
    transition-delay: 200ms;
  }

  .location{
    transition-delay: 300ms;
  }

  .adhd {
    transition-delay: 400ms;
  }

.icon-one{
  opacity: 1;
  transform: translateY(0);
  transition: all 0.7s ease-in-out;
  transition-delay: 100ms;
}

.icon-two{
  opacity: 1;
  transform: translateY(0);
  transition: all 0.7s ease-in-out;
  transition-delay: 200ms;
}

.icon-three{
  opacity: 1;
  transform: translateY(0);
  transition: all 0.7s ease-in-out;
  transition-delay: 300ms;
}

.icon-four{
  opacity: 1;
  transform: translateY(0);
  transition: all 0.7s ease-in-out;
  transition-delay: 400ms;
}

.push-top{
  opacity: 0;
  transform: translateY(50px);
}
.push-bottom{
  opacity: 0;
  transform: translateY(-50px);
}

i{
  font-size: 100px;
  margin-bottom: 20px;
}


/**
CONTACT FORM
**/

#contactSection {
  height: 100%;
  width: auto;
}

.contact {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 15%;
  margin: 3.5em 0;
}

#contactezMoi {
  margin-bottom: 40px;
}

form, #form-container {
  width: 100%;
  height: 100%;
  text-align: center;
}

form textarea,
form input {
  padding: 12px 20px;
  border-radius: 10px;
  border: 2px solid #ffffff;
  margin-top: 20px;
  font-family: 'Kumbh Sans', sans-serif;
  font-size: 20px;
  width: 60%;
  height: auto;
}

form textarea {
 height: 300px;
}

#container-contact {
  width: 100%;
  height: 100%;
  padding-top: 3em;
  transition: opacity 500ms ease-in-out;
}

.bi {
  fill: #ffffff;
  transition: fill 300ms ease-out;
}

.bi:hover {
  fill: #0e76a8;
  transition: fill 300ms ease-in;
}

.Em{
  fill: #ffffff;
  transition: fill 300ms ease-out;
}

.Em:hover {
  fill: #F5BD4E;
  transition: fill 300ms ease-in;
}


/** 
FOOTER
**/

.fa-brands.fa-linkedin{
  font-size: 50px;
}



@media screen and (max-width: 1300px) {
  .services {
    flex-direction: column;
  }

  .block-container {
  flex-direction: column;
}

  .block-container-inverse {
  flex-direction: column-reverse;
  }
	
	.cc, 
	.interview, 
	.location, 
	.adhd,
	.icon-one,
	.icon-two,
	.icon-three,
	.icon-four {
		transition-delay: 100ms;
	}
}