@media only screen and (max-width: 480px) {
  /* For mobile phones: */
  img {
    width: 100%;
  }
}


body {
  font-family: 'Roboto', sans-serif;
}


/* .introTxt {
  overflow: hidden;
  position: absolute;
  z-index: 2;
  top: 1%;
  left: 2em;
} */

.GoTop{
  text-align: center;
  padding: 1rem;
  margin: 1rem;
  filter: drop-shadow(2px 2px 2px grey);
}

#main-header {
  background-color: rgb(255, 255, 255);
  margin: auto;
  width: 80%;
  height: 4em;
/*   border: 5px solid black; */
  position: relative;
}

.main-nav {
  overflow: hidden;
}


.main-menu {
  display: grid;
  grid-template-columns: 6em 6em 6em 6em 6em 6em;
  padding: 0.5em;
  float: right;
  margin: 2em;
}


ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  /* background-color:  rgb(63, 102, 133); */
}

li {
  float: left;
}

li a {
  display: block;
  color: rgb(96, 142, 174);
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  background-color: rgb(60, 88, 108);
  color: rgb(195, 212, 224)
}


.headerLogo {
  position: absolute;
  top: 40%;
  /* bottom: 10%; */
  width:20%;
}


.headerLogo img {
  width: 100%;
  max-width: 150%;
  max-height: 100%;
}


.p {
  word-wrap: break-word;
  text-wrap: wrap;
  max-width: 100%;
}


p::first-letter {
  color: #5a9ccc;
  font-size: xx-large;
}


#mainContent {
  background-color: rgb(255, 255, 255);
/*   border: 2px solid black; */
  padding: 2em;
  width: 100%;
  margin: auto;
  margin-top:1em;
  text-indent: 10px;
}

#mainContent p, .IntroText p { 
 text-indent: 50px;
}

.carouselContent {
  background-color: white;
  padding: 20px;
  margin: 15px;
}


.carouselContent h5 {
  text-align: center;
  color: white;
  background: rgba(109, 146, 181, 0.6);
  padding: 15px;
  width: 20em;
  margin: auto;
}


.carouselPic {
  width: 100%;
}


#aboutMe {
  background-color: rgb(255, 255, 255);
  padding: 20px;
  margin: 25px;
}


.IntroText{
  background-color: rgb(255, 255, 255);
  padding: 4em;
  margin: 1em;
}

#aboutMe > h2, .IntroText > h2 {
  color: #5a9ccc;
  text-align: center;
}

.actionBut {
  width: 100%;
  background-color: rgb(82, 136, 178);
  height: 8em;
  padding-top: 10px;
  text-align: center;
}

.actBut {
  color: white;
}

.knowMore { 
  border: none;
  padding: 15px 32px;
  margin: 4px 2px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
  color: white;
  background-color: rgb(37, 61, 79);
  /* box-shadow: 2px 2px 2px 2px rgb(95, 171, 229); */
}


 .knowMore:hover {
  background-color: rgb(63, 102, 133);
}

 .knowMore:active {
  background-color: #5a9ccc;
  /* box-shadow: 2px 2px 2px 2px #666; */
  transform: translateY(4px);
}

#mySkills {
  background-color: white;
  padding: 20px;
  margin: 15px;
}

#mySkills > h2 {
  color: #5a9ccc;
  text-align: center;
}


.HardeepSkillsPic{
  text-align: center;
  width: 100%;
  height: auto;
}


#myPortfolio {
  background-color: rgb(240, 245, 246);
  padding: 2em;
  margin: 2em;
}

#myPortfolio > h2 {
  color:  #5a9ccc;
  text-align: center;
}


.FlexboxPortfolio {
  /* border: 1px solid grey; */
  display: flex;
  flex-wrap: wrap;
  /* width: 100%; */
  /* height: auto; */
  padding: 1em;
  gap: 20px;
  /* margin: 1em; */
  justify-content: space-evenly;
  /* flex-direction: row; */
  align-items: center;
  box-sizing: border-box;
  }


.flex-Item img {
  width: 300px;
  height: auto;
  display: block;
  padding: 0.5em;
  margin: 0.5em;
  align-items: center; 
  /* flex: 1 1 30%; */
}


.threeDgallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-items: center;
  gap: 20px;
  padding: 1em;
}


.gallery img {
  width: 300px;
  height: auto;
  display: block;
  padding: 0.5em;
  margin: 0.5em;
  align-items: center; 
}


#contactMe {
  background-color: white;
  padding: 20px;
  margin: 15px;
  text-align: center;
}


#contactMe > h2 {
  color:  #5a9ccc;
  text-align: center;
}

.ContactForm {
  text-align: center;
}

form {
  display: inline-block;
  width: 70%;
  /* text-align: right; */
  padding: 1em;
  /* border: 1px solid black; */
  background-color: rgb(240, 240, 240);
}

form input, textarea {
  display: inline-block;
  width: 90%;
  text-align: center;
  border: none;
}

.formSubmit{
  border: none;
  padding: 15px 32px;
  margin: 4px 2px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
  color: white;
  background-color: rgb(37, 61, 79);
  /* box-shadow: 0 9px #aba89f;  */
}


.formSubmit:hover {
  background-color: rgb(63, 102, 133);
}


 .formSubmit:active {
  background-color: #5a9ccc;
  /* box-shadow: 0 5px #666; */
  transform: translateY(4px);
}


#myBlog {
  display: grid;
  grid-template-columns: 60% 40%;
  gap: 5px;
}


.content4 {
  background-color: white;
  padding: 20px;
}

.content4 > h2 {
  color: #5a9ccc;
  text-align: center;
}


.content5 {
  background-color: white;
  padding: 20px;
  height: 250px;
  position: relative;
}


.mainfooter {
  background-color: lightgrey;
  border: 2px solid black;
  padding: 20px;
  width: 80%;
  margin: auto;
  text-align: center;
  margin-top:0.2em;
}


.homepic {
  object-fit: cover;
  position: absolute;
  top: 6%;
  bottom: 6%;
  right: 2%;
  left: 2%;
  width: 96%;
  max-width: 100%;
  max-height: 90%;
}


/* img {
  width: 96%;
  max-width: 100%;
  max-height: 90%;
} */



.footer {
  background-color:  rgb(63, 102, 133);
  width: 100%;
  text-align: center;
  margin: auto;
  margin-top: 1em;
  padding: 3em;
  color: white;
}

   .footer img {
    margin-left: 30px;
    width: 2%;  
}