body{
	margin: 0;
}

html {
  scroll-behavior: smooth;
}


/* ===== BANNIERE ===== */

.homeBanner {
	height: 100vh;
}
.bannerInfosAbs{
	height: 100%;
	position: absolute;
	background-color: #fff;
	display: flex;
	align-items: center;
	width: 50%;
}
.bannerInfos,
.fullW{
	height: 100%;
}
.bannerCheck{
	height: 100%;
}
.homeBanner .checkMark{
	position: absolute;
	bottom: 0px;
	width: 100%;
	left: -8.6%;
}
.leftSide {
	padding-right:16.666%;
	padding-left: 16.666%;
}
/* ===== 4 col services ===== */

.gridServices{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 140px;
	padding-top:3.3333333333333335rem;
}
.cercleContainer{
	display: flex;
	justify-content: center;
}
.cercleIcone{
	display: inline-flex;
	width: 200px;
	height: 200px;
	justify-content: center;
	z-index: 10;
	align-items: center;
}
.cercleIcone::before{
	content: "";
	width: 200px;
	height: 200px;
	background-color: var(--vert);
	border-radius: 100px;
	position: absolute;
}
.cercleIcone .material-symbols-outlined{
	font-size: 80px!important;
	color: #fff;
	z-index: 999;
	cursor: default;
}
.ctnServices{
	text-align: center;
	text-wrap: balance;
	padding-top: 1.3888888888888888rem;
}

/* ===== CTA ===== */

.ctaTitre{
	padding: 0 8.88888888888889rem;
	border-left: 10px solid var(--grisF);
}
.bigCta{
	font-size: 2.5rem;
	line-height: 3.111111111111111rem;
}
/* ===== SLIDER SECTION ===== */

.sliderSection .le_slider{
	overflow: hidden;
	min-height: 250px;
	border-left: 2px solid var(--vert);
} 

.le_slider .slide{
    width: 410px!important; 
}
.le_slider .boxSlider {
	padding: 20px 30px;
}
.slider-nav{
	position: absolute;
	bottom: -40px;
	bottom: 0;
	left: 20px;
}
.slider-nav .prev,
.slider-nav .next{
	background-color: transparent;
	border: transparent;
	cursor: pointer;
}
.boxSlider h3{
	margin-bottom: 10px;
}
.slider-nav .prev .arrowIcon,
.slider-nav .next .arrowIcon{
	font-size: 45px;
}

/* ===== 5050 bullets ===== */
.h5050 .colonne_2{
	padding-left: 20%;
}
ul.custom-bullets {
  list-style: none;
  padding-left: 0;
  padding-top: 15px;
}

ul.custom-bullets li {
  position: relative;
  padding-left: 55px;
  padding-bottom: 9px;
  padding-top: 9px;
  font-size: 25px;
  line-height: 1.2;
}

ul.custom-bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  width: 30px;
  height: 30px;
  background: url("images/kosmobullets.png") no-repeat center;
  background-size: contain;
  top: 0;
  bottom:0;
  margin:auto;
}

/* ===== VERTICAL TIMELINE ===== */

.timeline{
  position: relative;
  /*width: min(90%, 900px);*/
  width: 100%;
  margin: 0 auto;
}
.vertLine{
	display: inline-block;
	position: relative;
	width: 100%;
}
.line{
  position: absolute;
  left: 16.6%;
  top: 0;
  width: 4px;
  height: 100%;
  background: #D6D6D6;
  border-radius: 999px;
  overflow: hidden;
}

.line span{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0%;
  background: var(--grisF);
  border-radius: 999px;
  transition: height 0.15s linear;
}

.items{
  margin-left: 70px;
}

.item{
  /*margin: 30px 0;*/
  background: transparent;
  /*box-shadow: 0 8px 20px rgba(0,0,0,0.06);*/

  opacity: 0;
  transform: translateX(26px);
  transition: 0.45s ease;

  position: relative;
  border-bottom: 2px solid var(--grisF);
  padding: 60px 0;
  display: flex;
}

.item.active{
  opacity: 1;
  transform: translateX(0);
}

.titleItem{
	width: 35%;
}
.ctnItem{
	width: 65%;
}
.vertTitle{
	padding-bottom: 60px;
}


.item.active::before{
  opacity: 1;
}
/* Circle markers with numbers */
.item::before{
  content: attr(data-step);
  position: absolute;
  width: 65px;
  height: 65px;
  border-radius: 50%;
  background: var(--vert);
  /*border: 3px solid #111;*/
  left: calc(70px * -1 - (65px / 2) + (4px / 2));
  /*top: 0;*/
  transform: translateX(-2px);
  /*opacity: 0.15;*/
  transition: opacity 0.3s ease;
  
  /* Center the number inside the circle */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 25px;
  font-weight: 500;
  color: #fff;
}

/* ===== box Client ===== */

.boxClientsImage{
	display: inline-block;
	background-repeat: no-repeat;
	position: absolute;
	bottom: -150px;
  left: 110px;
  width: 560px;
}
.boxClientsImage *{
	color: #fff;
}
.iconBox{
	display: flex;
  justify-content: center;
  align-items: center;
  width: 60px;
  height: 60px;
  background: #fff;
  border-radius: 50%;
  position: relative;
}
/*.iconBox:before{
content: "";
  width: 60px;
  height: 60px;
  background: #fff;
  display: block;
  border-radius: 50%;
  position: absolute;
  z-index: -1;
}*/
.iconBox span{
	color: var(--vert);
	position: relative;
	font-size: 28px;
	/*z-index: 2;*/
}
/*.titreBox h2,
.titreBox h5{
	color: #fff;
}*/
.titreBox{
	padding-right: 80px;
}
.listeCtn{
/*	display: flex;
	flex-direction: column;*/
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 50px;
}
.boxListe{
	display: flex;
	gap: 20px;
	align-items: center;

}
.topFooter{
	padding: 4.444444444444445rem 0;
}
.bottomFooter{
	background-color: var(--grisF);
	padding: 10px 0;
}
.copyRight p{
	color: #fff;
	margin-bottom: 0!important;
}
.boxPartner{
	display: inline-block;
	width: 100%;
	position: relative;
	overflow: hidden;
}
#colophon{
	background-color: var(--gris);
	padding: ;
}
.logoFooter{
	max-width: 200px;
}
.footerContact{
	display: flex;
	flex-direction: column;
}
.footerContact a{
	font-size: ;
}
/*.contact-form {
  max-width: 700px;
}*/

/* contact form */
.contact-form{
	padding: 0 50px;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.form-field {
  display: flex;
  flex-direction: column;
  padding-bottom: 20px;
}
label {
  font-size: 14px;
  margin-bottom: 6px;
}
input,
textarea {
  padding: 12px;
  border: 1px solid #ccc;
  font-size: 16px;
  font-family: inherit;
}

textarea {
  resize: vertical;
  width: 100%;
}

/*Marcius*/
.gridServices p {
    line-height: 1.5rem;
}
.col h4 {
    line-height: 1.855556rem;
}

/* Mobile */
@media (max-width: 640px) {
  .form-row {
    grid-template-columns: 1fr;
  }
  
/*Marcius*/  
  .col h1 {
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 2.8rem;
  }
  .col h2 {
    font-size: 2.2em;
  }
}

/* Mobile */
/*Marcius*/
@media (max-width: 1024px) {
  #about-us {
      padding-top: 0;
  }
}

/* <<<<<<<<<<<<<<<<<<<<<<< HEADER >>>>>>>>>>>>>>>>>>>>>>> */
#masthead{
	position: absolute;
	z-index: 999;
	width: 100%;
}
#masthead .logo{
	width: 215px;
}
.menu.headerContact li{
	margin: 0 20px;
}
.menu.headerContact li:last-child{
	margin-right: 0;
}
.menu.headerContact li a{
	font-size: 1rem;
	color: #fff;
	text-transform: uppercase;
}
.menu.headerContact li a:hover{
	color: var(--grisF);
}

/* BURGER MENU */

/* Hide burger + mobile menu on desktop */
.burger,
.mobileMenu {
  display: none;
}

/* Under 1440px */
@media (max-width: 1440px){

  /* Hide desktop links */
  .main-menu {
    display: none !important;
  }

  /* Burger button */
  .burger{
    display: inline-flex;
    width: 48px;
    height: 48px;
    position: relative;
    border: 0;
    background: transparent;
    cursor: pointer;
    margin-left: auto;
    z-index: 101;
  }

  .burger span{
    position: absolute;
    width: 30px;
    height: 3px;
    background: #fff;
    left: 50%;
    transform: translateX(-50%);
    transition: all .25s ease;
  }

  .burger span:nth-child(1){ top: 10px; }
  .burger span:nth-child(2){ top: 20px; }
  .burger span:nth-child(3){ top: 30px; }

 	body.menu-open .burger span{
 		background: #fff;
 	}
  /* Burger animation */
  body.menu-open .burger span:nth-child(1){
    top: 23px;
    transform: translateX(-50%) rotate(45deg);
  }
  body.menu-open .burger span:nth-child(2){
    opacity: 0;
  }
  body.menu-open .burger span:nth-child(3){
    top: 23px;
    transform: translateX(-50%) rotate(-45deg);
  }

  /* Slide menu */
  .mobileMenu{
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    width: min(250px, 85vw);
    height: 100vh;
    background: var(--vert); /* your blue */
    padding: 140px 5%;
    transform: translateX(100%);
    transition: transform .3s ease;
    z-index: 100;

  }
  body.menu-open .mobileMenu{
    transform: translateX(0);
    -webkit-box-shadow: -10px 0px 31px -5px rgba(0,0,0,0.62); 
		box-shadow: -10px 0px 31px -5px rgba(0,0,0,0.62);
  }
  body.menu-open{
  	overflow: hidden;
  }
  body.menu-open .burger{
  	position: fixed;
  	right: 5%;
  	top: 5%;
  }
  .mobileMenu ul{
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 35px;
  }

  .mobileMenu a{
    color: #fff;
    text-decoration: none;
    font-size: 22px;
  }
  .mobileMenu a:hover{
  	color: var(--grisF);
  }
}