.activites {
   position: relative;
   top: 180px;
}

.header_act {
   /* background-color: #03540fc7; */
   display: flex;
   justify-content: center;
   align-items: center;
   padding: 10px;
   gap: 10px;
   width: 80%;
   margin-bottom: 10px;
}

@media (max-width:768px) {
   .header_act {
      width: 100%;
   }
}

.header_act a {
   display: inline-block;
   border-bottom: 2px solid white;
   position: relative;
   color: #03540fc7;
   padding: 10px;
}

.header_act a::before {
   content: "";
   position: absolute;
   bottom: 0;
   left: 10px;
   border-bottom: 2px solid #03540fc7;
   width: calc(100% - 20px);
}

.header_act a:hover {
   /* border-bottom: 2px solid #f30d0f; */
   transition: 0.3s;
   background-color: #03540fc7;
   color: white;
}

/* ------------ actevite contant ---------------- */
.actcont {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
   flex-direction: row-reverse;
}

@media (max-width:768px) {
   .actcont {
      display: block;
   }
}

.actcont .contant {
   width: 77%;
}

/* to make width 100% in each page of (siminai,reunion,journe de formation) */
.actcont .contant.siminai_page,
.actcont .contant.reun_page,
.actcont .contant.jf_page {
   width: 100%;
}

@media (max-width:768px) {
   .actcont .contant {
      width: 100%;
   }
}

/* -------------------------------------------- */
.actcont .contant .big_title {
   display: flex;
   color: #03540fc7;
   width: fit-content;
   text-align: center;
   font-weight: bold;
   margin: 30px auto;
   padding: 10px;
   background-color: beige;
   border-bottom: 2px solid;
}

.actcont .contant .boxes {
   /* border: 1px solid; */
   padding: 10px;
   margin-bottom: 30px;
   background-color: #eee;
}

.actcont .contant .boxes .plus {
   background-color: white;
   color: #03540fc7;
   display: inline-block;
   width: 100%;
   text-align: center;
   /* margin-bottom: 20px; */
   font-weight: bold;
}

.actcont .contant .box {
   display: flex;
   /* border: 1px solid; */
   width: 90%;
   padding: 10px;
   border-radius: 6px;
   background-color: white;
   margin: 30px 0;
   gap: 10px;
}

@media (max-width:768px) {
   .actcont .contant .box {
      display: block;
      text-align: center;
      width: 100%;
   }
}

/* --------------- start pagination ----------------- */
.listPage {
   padding: 10px;
   text-align: center;
   list-style: none;
}

.listPage li {
   background-color: #ffffff;
   padding: 7px 13px;
   display: inline-block;
   /* margin: 0 10px; */
   cursor: pointer;
   border: 1px solid #dee2e6;
}

.listPage .active {
   background-color: #dee2e6;
   color: #fff;
}

/* --------------- end pagination ----------------- */


.actcont .contant .box img {
   width: 180px;
   height: 182px;
   border-radius: 5px;
}

.actcont .contant .box .right .title {
   font-size: 25px;
   font-weight: 100;
   color: #03540fc7;
}

.actcont .contant .box .right .par {
   margin-top: 20px;
   height: 125px;
   overflow: hidden;
   /* border: 1px solid; */
   position: relative;
   color: #3a7a44a8;
}

/* ------------ side bar ---------------- */
.side {
   background-color: #03540fc7;
   width: 20%;
   color: white;
   margin-left: 0px;
   border-radius: 3px;
   text-align: center;
   height: fit-content;
}

.side .title {
   margin-bottom: 20px;
}

@media (max-width:768px) {
   .side {
      background-color: #03540fc7;
      width: 100%;
   }

   .side .tab {
      display: flex;
      flex-wrap: wrap;
      max-width: 100%;
   }
}

.side a {
   display: inline-block;
   width: 100%;
   border-bottom: 1px solid #ddd;
   padding: 10px;
   color: white;
   position: relative;
}

.side a::after {
   content: "";
   width: 0;
   height: 100%;
   position: absolute;
   top: 0;
   left: 0;
   background-color: #999494;
   z-index: -1;
}

.side a:hover::after {
   width: 100%;
}

/* ------------------- one_activite_page ------------------ */
.activite_page .imgdiv {
   margin-bottom: 30px;
   display: flex;
   align-items: center;
   justify-content: center;
}

.activite_page .imgdiv img {
   width: 500px;
   height: 400px;
   border-radius: 20px;
   /* margin-left: 15%; */
}

.activite_page .contante .title {
   text-align: center;
   color: #03540fc7;
   font-size: 25px;
   font-weight: bold;
   margin-bottom: 30px;
}