@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;500;600&display=swap');

*{
   /* font-family: 'Nunito', sans-serif; */
   font-family: 'poppins', sans-serif;
   margin:0; padding:0;
   box-sizing: border-box;
   outline: none; border:none;
   text-decoration: none;
   transition: all .2s linear;
   
  
}
p{
   font-weight: 500;
   /* color: #111; */
   color: #0307f0;
}

html{
   font-size: 100%;
   overflow-x: hidden;
}

body{
   background: hsl(0, 4%, 80%);
}


/* jusque là */
html{
    font-size: 100%;
    overflow-x: hidden;
 }
 


body {
  font-family: "Roboto", sans-serif;
  background-color: rgb(255, 225, 2);
 
}
.image-box img :hover{
    z-index: 1;
    cursor: pointer;
    filter: brightness(20%);
    transform: scale(1.1);




    transition: 1s;
}
.image-gallery img:hover{
    /* filter: grayscale(0); */
    cursor: pointer;
   
    filter: brightness(50%);
    transform: scale(1.05);
    overflow: hidden;
    transition: 1s;

  



}



.container {
  display: flex;
  align-items: center;
  justify-content: center;
  
}
.image-gallery {
  width: 100%;
  max-width: 950px;
  padding: 70px 30px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-auto-rows: 250px;
  grid-gap: 20px;


}
.image-gallery .image-box:nth-child(7n + 1) {
  grid-column: span 2;
  grid-row: span 2;
}
.image-gallery .image-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  
  

}

.image-gallery .image-box {
  position: relative;

/* border: 1px solid; */
/* border-color: blue; */
padding: 5px;
/* box-shadow: 3px 5px #312a2a; */
/* border: 5px solid #fff; */
border: 5px solid #0307f0;
box-shadow: 20px 15px 35px rgba(0,0,0, 0.8);

background-color: rgb(255, 225, 2);

  

 
}



 


/* Let's make it responsive */
@media (max-width: 768px) {
  .image-gallery {
    padding: 20px;
    cursor: pointer; 
   
 
  }
  .image-gallery .image-box:nth-child(7n + 1) {
    grid-column: unset;
    grid-row: unset;
    
  }
}
/* la navbar */
header{
   position: fixed;
   top: 0%;
   left: 0%;
   padding: 20px 10px;
   width: 100%;
   z-index: 1;
   display: flex;
   justify-content: space-evenly;
   align-items: center;
   transition: 0.5s;
}

.logo{

    color: blue;
    font-weight: bold;
    font-size: 2em;
    text-decoration: none;
    align-self: left;

    /* display: flex;
    z-index: 1;
    position: fixed; */


 }
 .logo span{
    color: #fb911f;
 }
 .logo li{
   list-style: none;
 }
 
 .navbar{
   
    z-index: 1;
    display: flex;
    position: fixed;

 }
 .navbar li{
    list-style: none;

 }
 .navbar a{
   /* font-family:  Verdana, Geneva, Tahoma, sans-serif;
   font-weight: bold;
   font-size: 1.2em;
    color: blue;
    text-decoration: none;
   margin-left: 160px;
    margin-right: 20px;
  
    border-radius: 0px; */

    color: #102ef1;
    text-decoration: none;
    margin-left: 30px;
    font-weight: 700;
    border-radius: 0px;
}
   
 
 
 .btn-reserve{
    padding: 10px 20px;
    background: #fb911f;
   margin-top: -10px;
   text-transform:uppercase ;
 }
 
 .btn-reserve:hover{
    background: #d87710;
    transition: ease-out;
 }
 
 header .navbar li a:hover{
    color: #fb911f;
    border-bottom: 2px solid #fb911f;
 }
 
 .banniere{
    /* border: 5px solid #0307f0;
    position: relative; */
    width: 100%;
    min-height: 50vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url(/images/banniere.jpg);
    background-size: cover;
 }
 
 .banniere .contenu{
    max-width: 70%;
    text-align: center;
 }
 .banniere .contenu h2{
    color: #fff;
    font-size: 3em;
    text-transform: capitalize;
 }
 .contenu p:nth-child(2){
    color: #ffff;
    font-size: 1.2em;
 }
 header .navbar li{
    margin-left: 0px;
}

header .navbar li a {
    text-decoration: none;
    color: #2103e5;
  /* font-size: 1.6em;  */
    font-weight: 300;
}

.apropos .contenu{
    max-width: 70%;
    text-align: center;
    
 }
 
 .apropos .contenu h2{
    color: #1504c8;
    font-size: 3em;
    text-transform: capitalize;


 }
 .apropos{
    border: 5px solid #0307f0;
    position: relative;
    width: 100%;
    min-height: 50vh;
    display: flex;
    justify-content: center;
    align-items: center;
  
    background-size: cover;
}

.row{
   position: relative;
   width: 100%;
   display: flex;
   justify-content: space-between;
}

.row .col50{
   position: relative;
   width: 48%;
   justify-content: center;
   align-items: center;

}

.row .col50 h2{
   margin-bottom: 2p0px;
}
.titre-texte{
   color: #000;
   font-size: 2em;
   font-weight: 300px;
   text-transform: capitalize;
}

.titre-texte span{
   color: #fb911f;
   font-size: 1.5em;
   font-weight: 700px;
}

.row .col50 img{
   height: 250px;
   width:250px;
   position: relative;

padding: 5px;
/* box-shadow: 3px 5px #312a2a; */
/* border: 5px solid #fff; */
border: 5px solid #0307f0;
box-shadow: 20px 15px 35px rgba(0,0,0, 0.8);

background-color: rgb(255, 225, 2);
  
}