@font-face {
  font-family: 'DM Sans';
  src: url(../font/DMSans-SemiBold.ttf);
}

@font-face {
  font-family: 'DM Med';
  src: url(../font/DMSans-Medium.ttf);
}

:root{
  --background-color: #F2F3F2;
  --light-green: #4C6141;
  --dark-green:#274027;
  --black:#242424
}

.main-container{
  min-width: 450px;
  max-width: 1189px;
  margin: auto;
}



body{
  background-color: var(--background-color);
  font-family: "DM Sans";
}


h1{
  font-size: 32px;
  color: var(--light-green);
}

h2{
  font-size: 32px;
  color: #4C6141;
  margin-bottom: 40px;
}

.page-title{
  text-align: center;
  margin-bottom: 80px;
  margin-top: 145px;
}

.page-title-home{
  text-align: center;
  margin-top: 135px;
}

h3{
  font-size: 21px;
}

p{
  font-size: 16px;
  color: var(--black);
  line-height: 19px;
}

.background-img{
  position: fixed;
  z-index: -1000;
  top: 60px;
}

button:active{
  background-color: var(--dark-green) !important;
}

.secondary-button:active{
  background-color: lightgrey !important;
}

/* ====== Button ====== */

.primary-button{
  background-color:var(--dark-green);
  height: 33px;
  font-family: "DM Sans";
  font-size: 16px;
  padding-left: 18px;
  padding-right: 18px;
  color: white;
  border-radius: 20px;
  border: none;
}

.secondary-button{
  background-color: transparent;
  height: 33px;
  font-family: "DM Sans";
  font-size: 16px;
  padding-left: 18px;
  padding-right: 18px;
  color: var(--dark-green);
  border-radius: 20px;
  border: none;
}

.primary-button:hover{
  background-color: var(--light-green);
  cursor: pointer;
}

/* ====== FOOTER ====== */

footer{
  height: 100px;
  background-color: white;
  color: var(--light-green);
}

footer p{
  color: var(--light-green);
}

.footer-col{
  margin-right: 40px;
  margin-left: 40px;
  width: 100%;
  height: 100px;
}

.footer-logo{
  position: relative;
  top: -35px;
}

.infos-footer{
  display: flex;
  justify-content: space-between;
  width: 100%;
}


/* ====== NAV ====== */

nav{
  display: flex;
  width: 100%;
  justify-content: space-between;
  height: 67px;
  align-items: center;
  background-color: white;
  box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.03);
  position: fixed;
  top: 0px;
}

.logo{
  width: 218px;
  margin-left: 40px;
}

.logo img{
  width: 54px;
}

nav ul{
  display: flex;
}

.nav-item{
  padding: 20px;
}

.nav-link{
  font-size: 18px;
  text-decoration: none;
  color: var(--black);
  padding-right: 25px;
  padding-left: 25px;
}

.active{
  border-bottom: 4px solid var(--light-green) ;
  padding-bottom: 10px;
  color: var(--light-green) !important ;
}

nav button{
  margin-right: 40px;
}

.nav-mobile{
 position: relative;
 top: -7px;
}

.navbar-collapse{
  background-color: white;
}

/* ====== HOME ====== */

.headline{
  text-align: center;
  margin-top: 100px;
}

.scroll{
  position: absolute;
  bottom: 10px;
  width: 100%;
}

.hero{
  height: 78vh;
  max-width: 1400px;
  margin: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.home{
  background-image: url("/oasis-massages/src/img/background.png");
  height: 1000px;
  background-repeat: no-repeat;
  margin-top: 110px;
}

.galerie{
  height: 90vh;
  display: flex;
  justify-content: center;

}

.selector{
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: white;
  width: 155px;
  height: 30px;
  padding-left: 5px;
  padding-right: 5px;
  border-radius: 20px;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.05);
  position: relative;
  top: -25px;
  margin: auto;
}

.selector button{
  margin: 0px;
  font-size: 16px;
  border-radius: 20px;
  width: 35px;
  border: none;
  font-family: "DM Sans";
}


.selector button:hover{
  cursor: pointer;
}

.selector button:focus{
  background-color: var(--dark-green);
  color: white;
}

.selector p{
  font-size: 12px;
  text-align: center;
}

.one-option{
  width: 70px;
  display: flex;
  justify-content: center;
}

.one-option button{
  background-color: white;
  margin: 0px;
  padding: 0px;
  display: flex;
  justify-content: center;
  width: 100px;
}

.one-option span{
  font-size: 16px;
}

.one-option button:focus{
  background-color: white !important;
  color: var(--black);
  margin: 0px;
  padding: 0px;
}

.buttons{
  width: 128px;
  height: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.default{
  background-color: var(--dark-green);
  color: white;
}

.card-container{
  height: 422px;
  width: 286px;
  background-color: white;
  border-radius: 20px;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 20px;
  padding-top: 10px;
  margin-bottom: 30px;
}

.legend{
  text-align: center;
  color: var(--light-green);
  margin-bottom: 5px;
  font-size: 14px;
  font-family: "DM Med";
}

.legend-left{
  color: var(--light-green);
  margin-bottom: 5px;
  font-size: 14px;
  font-family: "DM Med";
}

.card-container h2{
  color: var(--black);
}

.service-card{
  display: flex;
  flex-direction: column;
  align-items: center;
}

.service-card img{
  border-radius: 8px;
  margin-top: 15px;
  margin-bottom: 15px;
}

.detail-zone {
    font-size: 16px; /* Réduit la taille de la police par rapport au prix */
    font-weight: 400; /* Rend le texte moins gras */
    color: #555; 
    padding-right: 30px !important;
}

.services{
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1400px;
  margin: auto;
  height: 80vh;
}


/* ====== A PROPOS ====== */

.massages{
  margin-top: 200px;
  margin-bottom: 300px;
}

.massage-item{
  display: flex;
  justify-content: space-between;
  align-items: center;
}


.massage-item p{
  width: 535px;
  margin-bottom: 40px;
}

.divider{
  display: flex;
  justify-content: center;
  margin-top: 170px;
  margin-bottom: 170px;
}


/* ====== COMMANDE BON ====== */

.form{
  width: 450px;
  max-width: 535px;
  margin: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 16px;
}

.form-row{
  display: flex;
  justify-content: space-between;
}

.form-group{
  width: 100%;
  display: flex;
  flex-direction: column;
  margin-top: 22px;
}

input{
  height: 40px;
  border-radius: 30px;
  border: none;
  margin-top: 10px;
  padding-right: 15px;
  padding-left: 15px;
  font-family: "DM Sans";
}

input::placeholder{
  color: lightgray;
}

.submit{
  display: flex;
  justify-content: center;
  margin-top: 22px;
}

.form .nom{
  margin-left: 11px;
}

.form .prenom{
  margin-right: 11px;
}

.votre-code{
  display: flex;
  justify-content: center;
}

.cta{
  display: flex;
  justify-content: space-between; 
  width: 320px;
  margin: auto;
  margin-top: 22px;
}

.success{
  margin-top: 0px !important;
}

#code {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin: 20px 0;
}

.code-box {
  width: 100px;
  height: 120px;
  border-radius: 24px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 64px;
  font-weight: 700;
  color: #222;
  text-transform: capitalize;
}

input.code-box{
  text-align: center;
}

input.code-box:focus{
  border: none;
  outline: 0.2px solid var(--light-green);
}


.error{
  position: fixed;
  top: 0px; /*68px*/
  height: 50px;
  text-align: center;
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: top 1s ease-in-out;
  width: 100%;
}

.error p{
  color:var(--black);
}

/* ====== PRENDRE RDV ====== */

.step-form{
  margin-top: 100px;
}

.calendrier{
  display: flex;
  justify-content: center;
  align-content: center;
}


.selected{
  outline: solid var(--dark-green) 3px;
}

.step{
  height: 60vh;
  display: flex;
}

.step .service-card{
  cursor: pointer;
}

.step-container{
  position: relative;
  top: -30px;
}

.add-code{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.stepbar{
  max-width: 1700px;
  margin: auto;
  display: flex;
  justify-content: space-around;
  margin-top: 155px;
  border-top: #274027 1px solid;
}

.step-indicator{
  width: 33px;
  height: 33px;
  background-color: #F2F3F2;
  border: var(--light-green) 2px solid;
  border-radius: 50px;
  overflow: hidden;
  color: transparent;
  padding-top: 6px;
}

.step-indicator.active{
  width: 44px;
  font-size: 16px;
  color: var(--light-green);
}

.step-buttons{
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 300px;
  height: 60px;
}

.next{
  margin-left: 20px;
  position: relative;
}

.previous{
  margin-right: 20px;
}

.choose-duration{
  position: relative;
  top: -50px;
  opacity: 0;
}

/* ====== ABOUT ====== */

.about{
  height: 90vh;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: auto;
  margin-top: 1%;
}

.left{
  max-width: 532px;
}

/* ====== CGV ====== */

.cgv{
  margin-top: 100px !important;
  width: 900px;
}

.cgv h2{
  margin-bottom: 10px;
}

.liste{
  margin-left: 35px;
}

.cgv .divider{
  margin-top: 45px;
  margin-bottom: 45px;
}

/* ====== CGV ====== */

a{
  color: var(--light-green);
}

/* ====== MEDIAQUERIES ====== */
@media(max-width: 1100px){
  .logo{
    width: 100px;
}

.hero{
  display: flex;
  flex-direction: column;
  justify-content: unset;
  align-items: start;
}

.hero img{
  width: 100%;
  margin: auto;
}

.hero .right{
  display: flex;
}

.hero .left{
  display: flex;
  flex-direction: column;
  justify-content: start;
}

.services{
  display: flex;
  flex-direction: column;
  height: auto;
}

.service-card{
  margin-bottom: 100px;
}

footer{
  height: 290px;
}

.infos-footer div{
  margin-bottom: 20px;
}

.infos-footer{
  position: relative;
  top: 100px;
  display: flex;
  flex-direction: column;
  width: auto;
}

.footer-col{
  display: flex;
  justify-content: space-between;
}

.footer-logo img{
  width: 100px;
}

.about{
  flex-direction: column;
  margin-top: 120px;
}

.about p{
  margin-bottom: 80px;
}

.massage-item{
  flex-direction: column;
}

.add-code{
  justify-content: initial;
  margin-top: 20px;
}
  

}