*{
   padding: 0;
   margin: 0;
   box-sizing: border-box;
   font-family: 'poppins',sans-serif;
}
 body{
     background-color: #f9f9f9;
     color: #555;
 }
 h1 {
  font-size: clamp(2.5rem, 5vw, 3rem);
}

h2 {
  font-size: clamp(2rem, 4vw, 2.5rem);
}

h3 {
  font-size: clamp(18, 3.5vw, 1rem);
}

h4 {
  font-size: clamp(1rem, 2vw, 1.5rem);
}

p, a {
  font-size: clamp(12.5px, 1.2vw, 14px);
}

.service{
   margin-top: 50px;
}
.container-custom {
   width: 75%;
   margin: 0 auto;
   padding: 0;
}
.row-custom {
   display: grid;
   gap: 10px;
}
.service-item{
   box-shadow: 0 0 30px rgba(0, 0, 0, .1);
   padding: 0 15px;
   height:250px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 10px;
}
.service-item img{
   width:50px ;
}
.service-item h3{
 color:#003366;
}
.service-item a{
 color:#fff;
 background: #003366;
 padding: 5px 10px;
}


.container-indic {
 position: relative;
 width: 100%;
 height:70vh;
 overflow: hidden;
}

.indication{
   position: absolute;
   width:100%;
   height: 100%;
   z-index: 1;
   background-repeat: no-repeat;
   background-position: center;
   background-size: cover;
   align-items: center;
   justify-content: center;
}
/*.indication::before{
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   width: 100%;
   background: rgba(131, 128, 128, 0.5);
   
   background-size: cover;
   background-position: center;
   

}*/
.indication-title{
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   text-align: center;
   z-index:2;
   -webkit-transform: translate(-50%, -50%);
   -moz-transform: translate(-50%, -50%);
   -ms-transform: translate(-50%, -50%);
   -o-transform: translate(-50%, -50%);
}
.indication-title h1{
 text-shadow: 2px 2px 8px rgba(0,0,0,0.7);
 color: #ffffff;
 margin-bottom: 20px;
}

.wrapper-title{
 border: 3px dotted #fff;
 padding: 20px;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 color: #ffffff;
}
.wrapper-title img{
 width: 50px;
 margin-bottom: 10px;
}
.wrapper-title p{
    text-shadow: 2px 2px 8px rgba(0,0,0,0.7);
}

/* STEP INDICATION START */
.steps-wrapper {
 width: 75%;
 margin: 0 auto;
 padding: 0 20px;
}
.steps-title {
 text-align: center;
 margin-bottom: 40px;
 color: #003366;
 padding: 2rem 0;
}
.steps-container {
 display: flex;
 justify-content: space-between;
 gap: 40px;
 margin-bottom: 20px;
}
.steps-left,.steps-right{
 gap: 40px;
 position: relative;
 padding-left: 40px;
 border-left: 4px solid #003366;
 flex-direction: column;
 display: flex;
 width: 50%;
}
.step-item {
 display: flex;
 align-items: flex-start;
 position: relative;
 width: 100%;
}
.step-number {
 width: 40px;
 height: 40px;
 min-width: 40px;
 min-height: 40px;
 border-radius: 50%;
 background-color: #003366;
 color: white;
 font-weight: bold;
 display: flex;
 justify-content: center;
 align-items: center;
 font-family: 'Oswald', sans-serif;
 position: absolute;
 left: -60px;
 top: 0;
 -webkit-border-radius: 50%;
 -moz-border-radius: 50%;
 -ms-border-radius: 50%;
 -o-border-radius: 50%;
}
.step-content {
 background-color:white;
 padding: 15px 20px;
 width: 100%;
 box-shadow: 0 0 30px rgba(0, 0, 0, .1);
}
.step-content h3 {
 margin: 0 0 5px;
 color: #003366;
 font-weight: 600;
}
.step-content p {
 margin: 0;
 
}
.steps-wrapper h2{
   color: #003366;
   text-align: center;
}

/* Responsive */
@media (max-width: 999px) {
  .container-custom, .steps-wrapper{
      width: 90% !important;
   }
 
 .steps-left,.steps-right{
   width: 100%;
 }
 .steps-left{
   margin-top: 20px;
 }
 .steps-container{
   flex-direction: column;
 }
 .step-number {
   width: 32px;
   height: 32px;
 } 
 .button-service{
   display: flex;
   flex-direction: column;
   gap: 20px;
 }
 /* .step-content h3 {
   font-size: 16px;
 } */
 
 .step-item{
   margin-bottom: 20px;
 }
  .steps-left{
   margin-bottom:40px;
  }
  
.steps-wrapper h2 ,.bloc-service .service-text{
   text-align: center;
}
 }

/* Grid responsives */
@media (min-width: 1600px) {
   .row-custom {
       grid-template-columns: repeat(5, 1fr);
   }
}
@media (max-width: 1599px) and (min-width: 1200px) {
   .row-custom{
       grid-template-columns: repeat(4, 1fr);
   }
    .container-custom, .steps-wrapper{
      width: 90% !important;


}
}
@media (max-width: 1199px) {
   .row-custom{
       grid-template-columns: repeat(3, 1fr);
   }
     
   
}
@media (max-width: 768px) {
   .row-custom{
     grid-template-columns: repeat(2, 1fr) !important;
     gap:8px;
   }
   .container-custom .steps-container{
      width: 90%;
   }
  .open-modal-btn{
   margin-bottom: 20px;
 }
    .steps-wrapper{
      width: 90% !important;
   }
    .bloc-service{
      width: 90% !important;
   }
  
}
@media (max-width:500px){
   .row-custom{
       grid-template-columns: repeat(1, 1fr) !important;
   }
   .container-custom{
      width: 90% !important;
   }
   .steps-wrapper{
      width: 90% !important;
   }
   .bloc-service{
      width: 90% !important;
   }
   .steps-wrapper h2,.bloc-service .service-text{
   text-align: center;

}
   
}

/* STEP INDICATION END */

/* BLOC FORM AND MODAL */
.bloc-form{
 padding: 4rem 0;
}
.bloc-service{
   width: 75%;
   margin: 0 auto;
   padding: 10px;
}
.button-service{
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 20px;
}
.bloc-service .service-text{
   text-align: center;
   margin-bottom: 2rem;
   /* padding: 2rem; */
}
.bloc-service .service-text h2{
 color:#003366;
 text-transform: uppercase;
}
.bloc-service .service-text p{
 margin-top: 15px;
}
.open-modal-btn {
   padding: 10px 100px;
   background-color:#003366;
   color: white;
   border: none;
   cursor: pointer;
   border-radius: 5px;
   font-size: 20px;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   -ms-border-radius: 5px;
   -o-border-radius: 5px;
}

/* Overlay et fenêtre du modal */
.modal {
 display: none;
 position: fixed;
 z-index: 1000;
 left: 0;
 top: 0;
 width: 100vw;
 height: 100vh;
 background-color: rgba(0, 0, 0, 0.6);
 justify-content: center;
 align-items: center;
 padding: 15px; /* Ajout pour éviter débordement mobile */
 box-sizing: border-box;
}

.modal.active {
 display: flex;
}

.modal-content {
 background-color: white;
 padding: 40px 20px;
 border-radius: 10px;
 width: 100%;
 max-width: 350px;
 box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
 position: relative;
 box-sizing: border-box;
 margin: 0 auto;
 -webkit-border-radius: 10px;
 -moz-border-radius: 10px;
 -ms-border-radius: 10px;
 -o-border-radius: 10px;
}

/* Responsive modal */
@media (max-width: 600px) {
 .modal-content {
   padding: 30px 15px;
   max-width: 90%;
   margin: 0 auto;
 }
}

.modal-header {
 display: flex;
 justify-content: space-between;
 align-items: center;
 margin-bottom: 15px;
}

.modal-header h2 {
 margin: 0;
 font-size: 14px;
  color:#003366;
}

.close-btn {
 background: none;
 border: none;
 font-size: 22px;
 cursor: pointer;
}
#contactForm {
 display: flex;
 flex-direction: column;
 gap: 15px;
}

.form-group {
 display: flex;
 flex-direction: column;
}

.form-group input {
 width: 100%;
 padding: 10px;
 box-sizing: border-box;
 border: 1px solid #ccc;
 border-radius: 5px;
 font-size: 14px;
 margin-top: 10px;
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
 -ms-border-radius: 5px;
 -o-border-radius: 5px;
}

.form-group label {
 display: block;
 margin: 6px 0px;
 font-size: 14px;
}

.form-group textarea {
 min-height: 100px;
}
.submit-btn {
 background-color:#003366;
 color: white;
 border: none;
 width: 100%;
 padding: 10px 16px;
 font-size: 14px;
 cursor: pointer;
 border-radius: 5px;
 margin-top: 20px;
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
 -ms-border-radius: 5px;
 -o-border-radius: 5px;
}
.submit-btn:hover {
 background-color:#2e86de;
}