@media (min-width: 1025px)
{
	  .recreative-band
	  {
		  width: 100%;
		  height: 200px;
		  background-image: linear-gradient(to right, orange, FireBrick);
		  display: flex;
		  align-items: center;
		  justify-content: center;
	  }
	  .fa-recreate p
	  {
		  font-size: 36px;
		  color: white;
	  }
	  .outer-border
	  {
	      background-color: #f2f2f2;
		  width: 100%;
	  }
	  .recreative-format
	  {
	      width: 1200px;
	      max-width: 95%;
		  display: flex;
		  align-items: center;
		  justify-content: center;
		  margin: 0 auto;
		  gap: 50px;
		  box-sizing: border-box;
		  padding: 40px 40px;
	  }
	  .recr-photo
	  {
		  width: 550px;
	  }
	  .recr-photo img
	  {
		  width: 500px;
		  height: 400px;
		  border-radius: 12px;
	  }
	  .recr-writeup
	  {
		  width: 550px;
	  }
	  .gallery-outer-border
	  {
	      padding: 35px 35px;
	  }
	  .gallery-setup
	  {
		  display: flex;
		  align-items: center;
		  justify-content: space-around;
	  }
	  .gallery-images
	  {
		  display: flex;
		  align-items: center;
		  gap: 50px;
	  }
	  .gallery-images img
	  {
	      width: 200px;
	      height: 200px;
	  }
	  .gallery-photo-section
	  {
	      width: 25%;
	      height: 300px;
	      background-color: orange;
	      display: flex;
	      align-items: center;
	      justify-content: center;
	  }
	  .academic-stages
	  {
		  width: 100%;
		  height: 400px;
		  background-color: FireBrick;
	  }
	  .academic-stages-header
	  {
	      text-align: center;
	      color: white;
	      font-size: 26px;
	      padding: 20px 0 20px 0;
	  }
	  .stages-gallery
	  {
		  width: 70%;
	      height: inherit;
	      display: flex;
	      margin-left: 15%;
	      margin-right: 15%;
	      align-items: center;
	      justify-content: space-between; /* center */
	      /* to avoid the below problem of putting images in one row, we use flex-wrap property to put images in multiple rows. */
	      flex-wrap: wrap;
	  }
	  .individual-stages
	  {
		  background-color: white;
		  display: flex;
		  align-items: center;
		  justify-content: center;
		  border-radius: 15px;
		  margin-bottom: 30px;
	  }
	  .individual-stages p
	  {
	      padding: 25px 35px 25px 35px;
	  }
}

@media (min-width: 768px) and (max-width: 1024px)
{
	  .recreative-band
	  {
		  width: 100%;
		  height: 200px;
		  background-image: linear-gradient(to right, orange, FireBrick);
		  display: flex;
		  align-items: center;
		  justify-content: center;
	  }
	  .fa-recreate p
	  {
		  font-size: 36px;
		  color: white;
	  }
	  .outer-border
	  {
	      background-color: #f2f2f2;
		  width: 100%;
	  }
	  .recreative-format
	  {
	      width: 800px;
	      max-width: 95%;
		  display: flex;
		  align-items: center;
		  justify-content: center;
		  margin: 0 auto;
		  gap: 50px;
		  box-sizing: border-box;
		  padding: 40px 40px;
	  }
	  .recr-photo
	  {
		  width: 350px;
	  }
	  .recr-image
	  {
		  width: 300px;
		  height: 200px;
		  border-radius: 12px;
	  }
	  .recr-writeup
	  {
		  width: 350px;
	  }
	  .gallery-outer-border
	  {
	      padding: 35px 35px;
	  }
	  .gallery-setup
	  {
		  display: block;
	  }
	  .gallery-images
	  {
		  display: flex;
		  align-items: center;
		  gap: 50px;
	  }
	  .recr-gallery-image
	  {
	      width: 200px;
	      height: 200px;
	  }
	  .gallery-photo-section
	  {
	      width: 50%;
	      height: 300px;
	      margin: 0 auto;
	      background-color: orange;
	      display: flex;
	      align-items: center;
	      justify-content: center;
	  }
	  .academic-stages
	  {
		  width: 100%;
		  height: 500px;
		  background-color: FireBrick;
	  }
	  .academic-stages-header
	  {
	      text-align: center;
	      color: white;
	      font-size: 28px;
	      padding: 30px 0 15px 0;
	  }
	  .stages-gallery
	  {
		  width: 85%;
	      height: inherit;
	      display: flex;
	      margin-left: 5%;
	      margin-right: 5%;
	      justify-content: space-between; /* center */
	      /* to avoid the below problem of putting images in one row, we use flex-wrap property to put images in multiple rows. */
	      flex-wrap: wrap;
	  }
	  .individual-stages
	  {
		  background-color: white;
		  display: flex;
		  align-items: center;
		  justify-content: center;
		  border-radius: 15px;
		  margin-bottom: 30px;
	  }
	  .individual-stages p
	  {
	      padding: 25px 35px 25px 35px;
	  }
}

@media (max-width: 767px)
{
	  .recreative-band
	  {
		  width: 100%;
		  height: 150px;
		  background-image: linear-gradient(to right, orange, FireBrick);
		  display: flex;
		  align-items: center;
		  justify-content: center;
	  }
	  .fa-recreate p
	  {
	      color: white;
	      font-size: 17px;
	      font-weight: bold;
	  }
	  .outer-border
	  {
	      padding: 10px 0 10px 0;
	      background-color: #f2f2f2;
	  }
	  .recreative-format
	  {
	      display: inline-block;
	      padding-top: 15px;
	  }
	  .recr-photo img
	  {
	      display: block;
	      margin: auto;
	  }
	  .recr-image
	  {
	      width: 200px;
	      height: 200px;
	      border-radius: 12px;
	  }
	  .recr-writeup
	  {
	      padding: 25px 10px 25px 10px;
	      text-align: justify;
	      text-justify: inter-word;
	  }
	  .writeup-header
	  {
	      font-size: 18px;
	      padding-bottom: 10px;
	  }
	  .gallery-outer-border
	  {
	      padding: 10px 10px 10px 20%;
	  }
	  .gallery-setup
	  {
	      display: inline-block;
	      padding-top: 15px;
	  }
	  .gallery-header-section
	  {
	      display: block;
	  }
	  .gallery-photo-section
	  {
	      display: inline-block;
	  }
	  .recr-gallery-image
	  {
	      width: 200px;
	      height: 200px;
	      padding-bottom: 20px;
	  }
	  .academic-stages
	  {
		  width: 100%;
		  height: 800px;
		  background-color: FireBrick;
	  }
	  .academic-stages-header
	  {
	      text-align: center;
	      color: white;
	      font-size: 26px;
	      padding: 20px 0 20px 0;
	  }
	  .stages-gallery
	  {
	      margin-left: 25px;
	      margin-right: 25px;
	  }
	  .individual-stages
	  {
		  background-color: white;
		  display: flex;
		  align-items: center;
		  justify-content: center;
		  border-radius: 15px;
		  margin-bottom: 30px;
	  }
	  .individual-stages p
	  {
	      padding: 25px 35px 25px 35px;
	  }
}