@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Pushster&display=swap');




*{
  margin:0;
  padding:0;
}
#topBg{
  background: url('images/top-banner.png');
  background-repeat: no-repeat;
}
section{
  margin-top: 50px;
}
body{
  font-family: 'Open Sans', sans-serif;
}

.h2Color{
  color: orange;
  font-family: 'Pushster', cursive;
  font-size: 60px;
}
 .topContent {
  width: 45%;
  float: left;
  margin: 120px 0px 0px 50px;
}

.firstImage {
  width: 50%;
  float: right;
}

.firstImage img {
  width: 650px;
  margin: 20px 0px 0px 0px;
}
.topContent h1 {
  font-size: 60px;
}


.topContent h2 {
  font-size: 35px;
  margin: 15px 0px;
}

.topContent h3 {
  margin: 15px 0px;
  font-size: 27px;
}

.topContent p {
  text-align: justify;
  color: dimgray;
}
.contactBtn {
  border: none;
  outline: none;
  background: linear-gradient(45deg, lightsalmon, tomato);
  color: white;
  text-transform: uppercase;
  padding: 12px 30px;
  font-size: 18px;
  margin: 25px 0px 0px 0px;
  border-radius: 5px;
  cursor: pointer;
  font-weight: 700;
  transition: .5s;

}
.contactBtn:hover{
  background: linear-gradient(45deg, tomato,lightsalmon);
}
.topBarWrapper{
  overflow: hidden;
}

button.contactBtn a {
  text-decoration: none;
  color: white;
}
.secondBarWrapper {
  overflow: hidden;
}

.secondImg {
  width: 50%;
  float: left;
}

.secondImg img {
  width: 650px;
  margin: 0px 0px 0px 50px;
}

.secondContent {
  width: 40%;
  float: right;
  margin: 160px 30px 0px 0px;
  word-spacing: 0.08em;
}

.secondContent h1 {
  font-size: 45px;
}

.secondContent h3 {
  margin: 15px 0px;
  font-size: 22px;
}

.secondContent p {
  text-align: justify;
  color: dimgray;
}
button.SecondContactBtn {
  background: linear-gradient(45deg, lightsalmon, tomato);
  padding: 15px 20px;
  border: none;
  outline: none;
  border-radius: 5px;
  margin: 20px 0px 0px 0px;
  transition: .5s;
  cursor: pointer;
}
.SecondContactBtn:hover{
  background: linear-gradient(45deg, tomato,lightsalmon);
}
button.SecondContactBtn a {
  text-decoration: none;
  color: white;
  text-transform: uppercase;
  font-size: 15px;
  font-weight: 700;
}
#secondBg{
  background:url('images/dream-bg.png');
  background-repeat: no-repeat;
  background-position: right;
}
.firstBox {
  width: 500px;
  float: left;
  box-shadow: 5px 7px 40px grey;
  padding: 20px;
  border-radius: 5px;
  margin: 0px 0px 40px 0px;
  border-left: 10px solid;
  border-image: linear-gradient(#915449,#F9765F);
  border-image-slice:1;
  transition: .7s;
  cursor: pointer;
}
.firstBox:hover{
  border-image: linear-gradient(#F9765F,#915449);
  border-image-slice:1;
}
.secondBox {
  width: 500px;
  float: right;
  box-shadow: 5px 7px 40px grey;
  padding: 20px;
  border-radius: 5px;
  margin: 0px 0px 40px 0px;
  border-left: 10px solid;
  border-image: linear-gradient(blue, cyan);
  border-image-slice:1;
  transition: .7s;
  cursor: pointer;
}
.secondBox:hover{
  border-image: linear-gradient(cyan,blue);
  border-image-slice:1;
}
.Boxes {
  padding: 0px 70px;
}
.secondBox p {
  margin: 0px 0px 21px 0px;
}
.firstBox p, .secondBox p {
  text-align: justify;
  color: dimgray;

}
.firstBox h2, .secondBox h2 {
  margin: 10px 0px 16px 0px;
  font-size: 21px;
  color: orange;
}

.firstBox h1, .secondBox h1 {
  font-size: 35px;
}
.experiencesH1 h1 {
  text-align: center;
  margin: 18px 0px;
  font-size: 45px;
  text-transform: uppercase;
}
#experienceArea{
  background:url('images/exp-bg.png');
  background-repeat: no-repeat;
  background-position: 0px;

}
#lastPart {
  text-align: center;
  margin: 15px 0px 0px 0px;
  color: white;
  padding: 15px 0px;
  background: #6A4ADB;
  cursor: pointer;
}