#bg1 {
  background-image: url(../assets/backgrounds/h_img.jpg);
  background-size: cover;
}
.logo {
  margin-top: 200px;
  margin-left: 45%;
}
#click {
  padding: 5% 0 0 45%;
}
.section-header {
  color: white;
  text-align: center;
}
h4 {
  text-align: center;
}
p {
  text-align: center;
}
#bg2 {
  background-image: url(../assets/backgrounds/s_image.jpg);
  background-size: cover;
}
.section2-header {
  color: white;
  text-align: center;
}

#header {
  text-align: center;
}
.icons {
  display: flex;
  flex-direction: row;
}
#icon1 {
  margin-left: 15%;
  margin-top: 4%;
  padding-left: 23%;
}
#icon2 {
  padding-left: 39%;
  margin-top: 4%;
}
#icon3 {
  padding-left: 30%;
  margin-top: 4%;
}
.header2 {
  text-align: center;
  margin-top: 5%;
}
#porfolio {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-left: 18%;
  margin-right: 16%;
}

.des {
  padding-left: 1%;
}
#bg3 {
  background-image: url(../assets/backgrounds/c_image.jpg);
  background-size: cover;
}
textarea {
  margin-top: 5%;
  background: transparent;
  border: 1px solid white;
  margin-left: 5%;
}
textarea::placeholder {
  color: white;
}
.section3-header {
  color: white;
}
#name {
  background: transparent;
}
#email {
  background: transparent;
}
.input::placeholder {
  color: white;
}
.input {
  border: 1px solid white;
}
.icon {
  text-align: center;
}
.section4-header {
  text-align: center;
}
h5 {
  margin-top: 3%;
}
#subject {
  margin-left: 20%;
  width: 60%;
}
.col-md-3 img {
  max-width: 100%;
  max-height: 100%;
}
#asgn1,
#asgn2,
#asgn3,
#asgn4,
#asgn5,
#asgn6,
#asgn7,
#asgn8 {
  display: none;
  color: black;
  opacity: 0.6;
  width: 80%;
  height: 80%;
  background-color: rgb(245, 238, 238);
  position: absolute;
  top: 10px;
  left: 25px;
  font-weight: bolder;
  text-align: center;
  padding-top: 20%;
  
}
.button{
    text-align: center;
    margin-left: 45%;
}
@media only screen and (max-width: 755px) {
  .col-md-3 img {
    width: 100%;
    margin: 20px;
  }
  #portfolio {
    margin-left: 8%;
    margin-right: 16%;
  }
  #asgn1,
  #asgn2,
  #asgn3,
  #asgn4,
  #asgn5,
  #asgn6,
  #asgn7,
  #asgn8 {
    width: 100%;
    height: 100%;
    top: 20px;
    left: 16px;
    padding-top: 20%;
  }
}
@media only screen and (max-width: 425px) {
  .col-md-3 img {
    width: 100%;
    margin: 20px;
  }
  #portfolio {
    margin-left: 8%;
    margin-right: 16%;
  }
  #subject {
    margin-left: 4%;
    width: 84%;
  }
  #asgn1,
  #asgn2,
  #asgn3,
  #asgn4,
  #asgn5,
  #asgn6,
  #asgn7,
  #asgn8 {
    width: 100%;
    height: 100%;
    top: 20px;
    left: 16px;
    padding-top: 20%;
    font-size: 20px;
  }
}
@media only screen and (min-width: 825px) {
  .col-md-3 img {
    width: 400px;
    margin: 20px;
  }
  #portfolio {
    margin-left: 10%;
    margin-right: 10%;
  }
}
@media only screen and (min-width: 625px) {
  .col-md-3 img {
    width: 400px;
    margin: 20px;
  }
  #portfolio {
    margin-left: 6%;
    margin-right: 10%;
  }
  #asgn1,
  #asgn2,
  #asgn3,
  #asgn4,
  #asgn5,
  #asgn6,
  #asgn7,
  #asgn8 {
    width: 100%;
    height: 100%;
    top: 20px;
    left: 16px;
    padding-top: 20%;
    font-size: 26px;
  }
}