.container-elements{
    display:flex;
    flex-direction: row;
    justify-content: center;
      align-items: center;
    flex-wrap: wrap;
    /*border:1px solid black; */
    width:100%;
    align-items: flex-start;


    
}
.box img{
    width:100%;
    height:auto;
    /* border-radius: 15px;
    box-shadow: 0px 0px 2px 2px grey; */
    margin-top: 30px;  

}
  
.box{
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width:24%;
    min-width:23%;
    margin-top: 15px;  
    margin-left: 5px;    
    margin-right: 5px;    
    margin-bottom: 45px;
    text-align: center;
  /* border:1px solid grey;
   border-radius: 15px; */
   /* background-color: #f0f1f6; */

  }
  


.box:hover {
   /* background-color: #FFE097; */
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);

}

.item2 {
  display: inline-block;
  border:1.75px solid grey;
  background-color: #F4F4F4;
  border-radius: 15px;
  box-shadow: 0px 0px 2px 2px white;*/
  width: 100%;
  margin-bottom:20px;
  padding-right:20px;
  padding-top:30px;

  /*padding-bottom:70px;*/


}


  .featured-image {
    float: left;
    width: 30%;
    /*padding-top:60px; */
    display: grid;
    align-items: center;
    height: 500px;
    /*border: 2px solid #006100;*/

    place-items:center;
    padding-left: 30px;
    padding-right: 15px;


  }
  .featured-image img {
    width: 100%;
    border-radius: 10px;
    border:1.75px solid grey;

    
  }

  
  .featured-image img:hover {
  opacity: .8;
  transition: all 0.3s linear;
  -webkit-transform: scale(1.02);
  transform: scale(1.02);


}


.image-container img {
  max-width: 100%;
  border-radius: 15px;
  border: 2px solid #57585A;
  margin-bottom: 40px;


}
  .image-container img:hover {
  opacity: 0.5;
  cursor: pointer;
    opacity: .85;
  transition: all 0.3s linear;
  -webkit-transform: scale(1.02);
  transform: scale(1.02);
}

.img-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-gap: 20px;
 
}

 
  .header-description {
    text-align: center;
    color: #06466E;
    font-size:30px;
    font-weight:bold;
    padding-top:30px;
    line-height:1.25;
    padding-bottom:40px;

  }

  .description {
    text-align: center;
    width: 100%;
    padding-top: 30px;
    padding-left: 10px;
    padding-bottom: 30px;
    padding-right: 15px;
    line-height:1.25;
    font-size:19px;
    font-weight:normal;
    color: #000000;


  }
  


.intro p, .body-block p {
  padding-bottom: 20px;
}




.category-section h1 {
    /* Make the caption a block so it occupies its own line. */
  line-height: 1.5;
  margin-top: 30px;
  margin-bottom: 30px;
  /* color: #7B7674; */
  text-align: center;
  display:row;

}



.image-container img:hover {
  opacity: 0.5;
  cursor: pointer;
    opacity: .85;
  transition: all 0.3s linear;
  -webkit-transform: scale(1.02);
  transform: scale(1.02);
}

.img-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-gap: 20px;
 
}








.intro h2 {
 color: #151C62;
 font-weight:bold

}

.body-block h2 {
    color: #06466E;
    font-weight: bold;
    text-align: left;
    font-size: 28px;
    padding-bottom: 10px;


}



.body-block ul {
    text-align: left;
    padding-left: 40px;
    padding-top: 20px;
}

.body-block li {
    text-align: left;
    padding-bottom: 30px;
}


 hr.new1 {
  border-top: 1px solid #a8a8a8;
  width:50%;
  margin-bottom: 10px;
   
   }


 hr.new2 {
  border-top: 1px solid #a8a8a8;
  width:50%;
  margin-top: 40px;
  margin-bottom: 10px;

   
   }

   
.header-container {
  position: relative;
  display: inline-block;
  width:100%;

}

/* Style the image */
.header-container img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 15px;

}

/* Style the overlay-text */
.overlay-text-1 {
  position: absolute;
  top: 40%; 
  left: 50%; 
  transform: translate(-50%, -50%); 
  /*background-color: #000000; */
  color: #fff; 
  padding: 10px 20px; 
  font-size: 38px;
  width: 95%;
  text-align: center;
  text-shadow: 3px 2px 2px rgba(0,0,0,0.4);
  line-height: 1.25;


 
}


.overlay-text-2 {
  position: absolute;
  top: 55%; 
  left: 50%; 
  transform: translate(-50%, -50%); 
  /*background-color: #000000; */
  color: #fff; 
  padding: 10px 20px; 
  font-size: 34px;
  width: 95%;
  text-align: center; 
  text-shadow: 3px 2px 2px rgba(0,0,0,0.4);
  line-height: 1.25;

 
}




.outro h2 {
    color: #19354b;
    font-weight:bold;
    font-size:28px;
    padding-bottom: 10px;

}


.features-image img{
    width:100%;
    height:auto;
    margin-top: 15px;
    border-radius: 15px;
  
    /*box-shadow: 0px 0px 2px 2px grey;*/


 
}





.buttons {
  display: flex;
  justify-content: center;

}

.button {
  display: inline-block;
  padding: 17px 32px;
  background: rgba(102, 142, 164);
  border: 0;
  letter-spacing: 2px;
  font-size: 17px;
  font-weight: 600;
  color: #ffffff;
  border-radius: 3px;
  /*margin-top:15px;*/
  margin-bottom:18px;
}

  .button:hover {background: rgba(56, 205, 255, 1);
    
      color: #ffffff;
      transition: all 0.2s linear;
  -webkit-transform: scale(1.02);
  transform: scale(1.02);


    
  }



.intro {
  padding-bottom: 20px;
  font-size: 19px;
  line-height: 1.25;
  h2 color: #eb892c;
  text-align: left;

}

.body-block {
  padding-top: 5px;
  padding-bottom: 30px;
  font-size: 19px;
  line-height: 1.25;
  h2 color: #eb892c;
  text-align: left;

}


.outro {

  padding-bottom: 60px;
  font-size: 18px;
  line-height:1.75;
  text-align: left;

}


@media only screen and (max-width: 1285px) {
   .outro {
      padding-left: 5%;
      padding-right: 5%;
   }
  
     .intro {
      padding-left: 5%;
      padding-right: 5%;
   }
  
     .body-block {
      padding-left: 5%;
      padding-right: 5%;
   }
    
  .overlay-text-1 {
  position: absolute;
  top: 30%; 
  left: 50%; 
  transform: translate(-50%, -50%); 
  /*background-color: #000000; */
  color: #fff; 
  padding: 10px 20px; 
  font-size: 30px;
  width: 95%;
  text-align: center;
  text-shadow: 3px 2px 3px rgba(0,0,0,0.3);
  line-height: 1.25;
    
    
    }
  
  
  
.overlay-text-2 {
  position: absolute;
  top: 60%; 
  left: 50%; 
  transform: translate(-50%, -50%); 
  /*background-color: #000000; */
  color: #fff; 
  padding: 10px 20px; 
  font-size: 28px;
  width: 95%;
  text-align: center; 
  text-shadow: 3px 2px 3px rgba(0,0,0,0.3);
  line-height: 1.25;
    
    
    }
  
  
  
    .box{
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width:90%;
  
}
  
}




@media only screen and (max-width: 500px) {
   .intro {
      padding-left: 5%;
      padding-right: 5%;
   }
  
   .body-block {
      padding-left: 5%;
      padding-right: 5%;
   }
  
     .img-grid {
      padding-left: 5%;
      padding-right: 5%;
   }
  
    .featured-image {
    width: 100%;
    max-width: fit-content;

  }
  .featured-image img {
    width: 100%;
    border-radius: 15px;


  }
  
  
     .outro {
      padding-left: 5%;
      padding-right: 5%;
   }
  

      .category-section {
      padding-left: 5%;
      padding-right: 5%;
   }
  
  
  
     .header-container {
      padding-left: 2%;
      padding-right: 2%;
   }
  
  
  .box{
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width:90%;
  
}

  .box-2{
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width:90%;
  
}
  
    .overlay-text-1 {
  position: absolute;
  top: 35%; 
  left: 50%; 
  transform: translate(-50%, -50%); 
  /*background-color: #000000; */
  color: #fff; 
  padding: 10px 20px; 
  font-size: 20px;
  width: 95%;
  text-align: center;
  text-shadow: 3px 2px 3px rgba(0,0,0,0.3);
  line-height: 1.25;
    
   }
  
    
.overlay-text-2 {
  position: absolute;
  top: 70%; 
  left: 50%; 
  transform: translate(-50%, -50%); 
  /*background-color: #000000; */
  color: #fff; 
  padding: 10px 20px; 
  font-size: 18px;
  width: 95%;
  text-align: center; 
  text-shadow: 3px 2px 3px rgba(0,0,0,0.3);
  line-height: 1.25;
    
   }

  
}

@media only screen and (min-width: 750px) {
  .img-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Bigger than Phones(laptop / desktop) */
@media only screen and (min-width: 970px) {
  .img-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}