/* ************   GRID IMAGE GALLERY *************   */
	.row-mbl {
            display: grid!important;
			justify-content:center;
            width: 100%;
            grid-template-rows: repeat(3,auto);
            grid-template-columns: repeat(2, 1fr);            
        }

        /* Create two equal column-mbls that sit next to each other */
        .column-mbl {
/*            flex: 0 0 48%;  48% to leave some space between column-mbls 
            position: relative;
            margin-bottom: 10px;*/
            position: relative;
            overflow: hidden;            
			  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  text-align: center;
        }

        .image-container {
/*            position: relative;
            overflow: hidden;*/
            width: 100%;
            height: 100%;
            transition: .5s;
        }

        .image-container img {
/*            width: 100%;
            display: block;*/
            width: 100%!important;
            height: 100%!important;
            object-fit: cover;            
        }

        .column-mbl:nth-child(1)  {
            grid-row: 1;
        }
        .column-mbl:nth-child(2)  {
            grid-row: 1/3;
        }
/*        .column-mbl:nth-child(4)  {
            grid-column-mbl: 1/2;
        }*/
/*        .column-mbl:nth-child(5)  {
            grid-column-mbl: 1/3;
        }                */

		.overlay h1 {			
			text-align: center;
			line-height: 38px!important;
			color:#FFF;
		}
        .overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: transparent;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            opacity: 0;
            transition: background-color 0.3s ease, opacity 0.3s ease;
        }

        .column-mbl:hover .overlay {
            background-color: #AA3A95;
            opacity: 0.8;
        }

        .text {
            position: absolute;
/*            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);*/
            bottom:0%;
            text-align: center;
            width: 100%;
            color: #FFF;
            opacity: 1;
            transition: opacity 0.3s ease;
            background-color: rgba(2,195,194,0.9);
            bottom: 0px;
        }
		
        .column-mbl:hover .text {
            opacity: 0;
        }
.titre-image{
    font-family: "Montserrat", Sans-serif;
    font-size: 18px!important;
    font-weight: bold!important;
    text-transform: uppercase!important;
/*     line-height: 59px!important; */
    color: #fff!important;
}
.titre-image-grid{
    font-family: "Montserrat", Sans-serif;
    font-size: 18px!important;
    font-weight: bold!important;
    text-transform: uppercase!important;
    line-height: 25px!important;
    color: #fff!important;
}

/**********************SIDEBAR******************* */
.container-sidebar{
    position: absolute;
    right: 0px;
    top: 80px;
    z-index: 15;
    background: #C3C3C3;
    width: 300px!important;
    height: 100vh!important;
}
   .sidebar {
      background-color: #333;
      color: white;
      padding: 20px;
      width: 300px;
      box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
      position: relative;
    }

    .close-btn {
      font-size: 30px;
      cursor: pointer;
      position: absolute;
      top: 10px;
      right: 20px;
    }

    .sidebar-service {
      margin-top: 20px;
      background-color: #fff;
      border: 1px solid #ddd;
      border-radius: 8px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      padding: 20px;
      display: flex;
      
    }
	.image-service{
		width: 100px!important;
	}
    .image-service img {
      width: 100%;
      height: auto;
      border-radius: 8px;
    }

    .content-service {
      margin-top: 20px;
	  display:flex;
	  flex-direction:column;
	  align-content:center;
		
    }

    .content-service h2 {
      font-size: 20px;
      margin-bottom: 10px;
    }

    .content-service .titre-content-service {
      font-size: 16px!important;
      color: #555;
      flex: 1;
	  font-weight:bold!important;
    }
    .content-service p {
      font-size: 12px;
      color: #555;
      	  
    }

    .content-service a {
      align-self: flex-end;
      margin-top: 10px;
      padding: 8px 15px;
      background-color: #32b6b9!important;
      color: white!important;
      text-decoration: none;
      border-radius: 5px;
      transition: background-color 0.3s;
    }

    .content-service a:hover {
      background-color: #aa3a95;
		color:#FFF!important;
    }

    @media (max-width: 768px) {
      .container {
        flex-direction: column;
      }

      .sidebar {
        width: 100%;
      }
    }