html,
body {
  font-family: Helvetica, sans-serif;
  font-size: 16px;
  margin: 0;
  background-color: white;
}
.nav-item1 img {
  height: 3rem;
  width: 3rem;
  border-radius: 50%;
}

/** {
  border: red 0.25px dotted; 
} */

/*The Menu bar is place in menu.css file in css folder*/

/* Home Cover Image Section */
.ImageCoverHome {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  /* background-image: url("https: //main--ts-particles-background.netlify.app/"); */
  background-color: #cccccc; /*Used if the image is unavailable */
  height: 15rem; /* set a specified height
  /*background-position: center; /* Center the image */
  /*background-repeat: no-repeat; /* Do not repeat the image */
 /*background-size: cover; /*Resize the background image to cover the entire container */
  width: 100%;
  color: aliceblue;
}

.Iframe {
  width: 100%;
  height: 100%;
  border: none;
  position: relative;
}

.ImageCoverHome h1 {
  font-size: 3rem;
  text-align: center;
  position: absolute;
}

/*Puts everything in order*/
.YourProjectsHere {
  display: flex;
  justify-content: space-around;
  text-align: center;
  background: linear-gradient(115deg, rgb(0, 0, 0) 5.8%, rgb(178, 14, 14) 112.6%);/*rgb(241, 247, 235);*/
  box-shadow: 0px 0px 10px;
  flex-wrap: wrap;
  text-decoration: none;
  color: white;
}

/* Portfolio Borders % size*/
.Projects4 {
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 0.2rem solid #898989;
  margin: 0.5rem;
  border-radius: 0.5rem;
  text-decoration: none;
  position: relative;
}

.Projects4:hover {
  box-shadow: 0.5rem 0.5rem 1rem rgb(231, 157, 46);
  animation: heartbeat 1s; /*infinite*/
}


/* displaying the heart beat effect on images */
@keyframes heartbeat {
  0% { transform: scale(1);}
  10%{ transform: scale(1.2);}
  25% { transform: scale(1.1);}
  35% {transform: scale(1.2);}
  100% {transform: scale(1);}
}

h2 {
  text-align: center;
}

.Iframe2 {
  width: 100%;
  height: 100%;
  border: none;
  position: absolute;
}

.YourProjectsHere p {
  text-decoration: none;
  width: 15rem;
}

/*Limits the images*/
.YourProjectsHere img {
  height: 20rem;
  width: auto;
}

/* having GIF fire effect on the Team section of the HOME page. */
.BusinessTeam :hover {
  background-image: url("../images/fire-gif-transparent.gif");
  background-size: contain;
  transform: scaleY(1);
  transition: transform 0.9s ease, opacity 0.9s ease-out;
}

/*Puts Business Team Members section in order*/
.BusinessTeam {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  background-color: rgb(241, 247, 235);
  box-shadow: 0px 0px 10px;
}

.BusinessTeam a {
  text-decoration: none;
}

/*Limits the Team member images*/
.BusinessTeam img {
  height: 20rem;
  margin: 0.5rem;
  border-radius: 1rem;
  box-shadow: 0.5rem 0.5rem 1rem rgb(231, 157, 46); /* Box Shadow customizations (box-shadow: h-offset v-offset | blur, spread, )+INSET (for adversing) | box-shadow: 25px 15px 10px 10px red inset; */
}


/*Footer area with London's Image*/
.footerClass {
  display: flex;
  align-items: flex-start;
  background-image: url("../images/footer-copy.png");
  height: 20rem; /* set a specified height */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Resize the background image to cover the entire container */
}

footer, p {
  font-size: 0.9rem;
  margin: 0.5rem;
}

/*For Mobile Display*/
@media only screen and (max-width: 600px) {
  body, html {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
  }

  div {
    display: flex;
    flex-direction: column;
  }

  .ImageCoverHome {
    height: 100%;
  }


}

@media only screen and (min-width: 12rem) {
  body, html {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
  }
  .ImageCoverHome h1 {
    font-size: 200%;
  }

  .YourProjectsHere {
    position: relative;
  }

  .Iframe2 {
    position: absolute;
  }

}