@import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap');

*{
    padding: 0;
    margin: 0;
}
body{
    padding:0;
    margin:0;
    box-sizing: border-box;
}

#activity{
    width:90%;
    /* height:800px; */
    display: grid;
    grid-template-columns: repeat(3,1fr);
    margin: auto;
    gap:30px;
    padding-bottom: 20px;
    /* border: 1px solid red; */
}
#activity>div{
    /* border: 1px solid red; */
    padding:5% ;
    /* box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px; */
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}
#activity>div:hover{
    box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}
#activity div>div:nth-child(2)>h1{
    margin-top:10px;
}
#trecking{
    width:100%;
    border-radius: 3px;;
    /* box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px; */
}
#imagesTreck{
    width:100%;
    height:250px;
    /* border:1px solid black; */
}
img:hover{
    cursor: pointer;
}
#imagesTreck>img{
  width:100%;
  height:100%;
  object-fit:cover;
  /* border-radius: 50%; */
    /* border:1px solid black; */
}
#trecking>div:nth-child(2){
    width:100%;  
    text-align: center;
   /* background-color: aqua; */
}
#trecking>div:nth-child(2)>div{
    width:140px;
    height:30px;
    margin: auto;
    margin-top:10px;
    /* border:1px solid red; */
   /* background-color:green; */
   display: flex;
   justify-content: space-between;
   align-items:flex-end;
}
.left:hover{
    background-color:green;
    opacity: 100%;
    color: white;
    font-weight: 600;
}
.right:hover{
    background-color:green;
    opacity: 100%;
    color: white;
    font-weight: 600;
}
.left{
    width:60px;
    font-size:15px;
    height:20px;
    color:#3d3a4e;
    opacity: 80%;
    text-align: center;
    align-items: center;
    background-color:#E0E0E0;
    border-style: none;
    border-radius: 5px;
    font-weight: 550;
}

.right{
    width:60px;
    font-size:15px;
    height:20px;
    font-weight: 900;
    align-items: center;
    color:#3d3a4e;
    opacity: 80%;
    font-weight: 600;
    background-color:#E0E0E0;
    border-style: none;
    border-radius: 5px;;
}

#scuba{
    width:100%;
    /* border:1px solid red; */
}
#imagesScuba{
    width:100%;
    height:250px;
    
    /* border:1px solid black; */
}
#imagesScuba>img{
  width:100%;
  height:100%;
  object-fit:cover;
    /* border:1px solid black; */
}
#scuba>div:nth-child(2){
    height:100px;
    text-align: center;
   /* background-color: aqua; */
}
#scuba>div:nth-child(2)>div{
    width:140px;
    height:30px;
    margin: auto;
    margin-top:10px;
   /* background-color:green; */
   display: flex;
   justify-content: space-between;
   align-items:flex-end;
}



#para{
    width:100%;
    /* border:1px solid red; */
}
#imagesPara{
    width:100%;
    height:250px;
    /* border:1px solid black; */
}
#imagesPara>img{
  width:100%;
  height:100%;
  object-fit:cover;
    /* border:1px solid black; */
}
#para>div:nth-child(2){
    height:100px;
    text-align: center;
   /* background-color: aqua; */
}
#para>div:nth-child(2)>div{
    width:140px;
    height:30px;
    margin: auto;
    margin-top:10px;
    /* border: 1px solid red; */
   /* background-color:green; */
   display: flex;
   justify-content: space-between;
   align-items:flex-end;
}



#historical{
    width:100%;
    /* border:1px solid red; */
}
#imagesHistorical{
    width:100%;
    height:250px;
    /* border:1px solid black; */
}
#imagesHistorical>img{
  width:100%;
  height:100%;
  object-fit:cover;
    /* border:1px solid black; */
}
#historical>div:nth-child(2){
    height:100px;
    text-align: center;
   /* background-color: aqua; */
}
#historical>div:nth-child(2)>div{
    width:140px;
    height:30px;
    margin: auto;
    margin-top:10px;
    /* border: 1px solid red; */
   /* background-color:green; */
   display: flex;
   justify-content: space-between;
   align-items:flex-end;
}
#historical>div:nth-child(2)>h1{
    margin-top:10px;
}



#heritage{
    width:100%;
    /* border:1px solid red; */
}
#imagesHeritage{
    width:100%;
    height:250px;
    /* border:1px solid black; */
}
#imagesHeritage>img{
  width:100%;
  height:100%;
  object-fit:cover;
    /* border:1px solid black; */
}
#heritage>div:nth-child(2){
    height:100px;
    text-align: center;
   /* background-color: aqua; */
}
#heritage>div:nth-child(2)>div{
    width:140px;
    height:30px;
    margin: auto;
    margin-top:10px;
    /* border: 1px solid red; */
   /* background-color:green; */
   display: flex;
   justify-content: space-between;
   align-items:flex-end;
}



#camping{
    width:100%;
    /* border:1px solid red; */
}
#imagesCamping{
    width:100%;
    height:250px;
   
    /* border:1px solid black; */
}
#imagesCamping>img{
  width:100%;
  height:100%;
  object-fit:cover;
  /* border-radius: 50%; */
    /* border:1px solid black; */
}
#camping>div:nth-child(2){
    height:100px;
    text-align: center;
   /* background-color: aqua; */
}
#camping>div:nth-child(2)>div{
    width:140px;
    height:30px;
    margin: auto;
    margin-top:10px;
    /* border: 1px solid red; */
   /* background-color:green; */
   display: flex;
   justify-content: space-between;
   align-items:flex-end;
}

  #header {
    position: static;
    background-color: whitesmoke;
    margin-bottom:30px;
}


   @media (min-width: 768px) and (max-width: 920px){

    #activity{
        width:90%;
        /* border:1px solid red; */
        display: grid;
        grid-template-columns: repeat(2,1fr);
        margin: auto;
        gap:20px;
        /* overflow-x: scroll; */
    }
   } 
      
   @media (min-width: 100px) and (max-width: 767px){

    #activity{
        width:90%;
        display: grid;
        grid-template-columns: repeat(1,1fr);
        align-items: center;
        margin: auto;
        gap:20px;
       
        /* overflow-x: scroll; */
    }
    #activity div{
        /* background-color: #00BFA6; */
        padding-bottom: 20px;;
    }
   }