body {
  /* font-family: "Roboto Slab", "Times New Roman", serif; */
  font-family: "Roboto";
}

h1,
h2,
h3,
h4 {
  padding: 0px;
  margin: 0px;
}

.main-container {
  padding: 3rem;
  background-color: #d1e7d2;
}
.heading-container {
  background-color: #fcfcee;
  padding: 8rem 13rem;
}
.content-container {
  background-color: #fcfcee;
  padding: 4rem 13rem;
}
.input-container {
  background-color: #fcfcee;
  padding: 4rem 13rem;
}
.title {
  font-size: 4.2rem;
  color: #274b50;
  font-weight: 600;
  text-overflow: ellipsis;
  overflow: hidden;
  font-family: "Roboto Slab";
  font-weight: 600;
}
.button {
  color: #fff;
  background-color: #ff8627;
  border: none;
  font-size: 2rem;
}
.content-title {
  font-size: 1.8rem;
  color: #274b50;
  font-weight: bold;
  font-family: "Roboto Slab";
}
.content-text {
  font-size: 1.8rem;
  color: #274b50;
  font-weight: 500;
  /* line-height: 2.5rem; */
  font-family: "Roboto Slab";
}
.content-specialText {
  font-size: 1.9rem;
  color: #274b50;
  font-weight: bold;
  font-family: "Roboto Slab";
  /* line-height: 2.5rem; */
}
div > h1.content-head-subtitle:first-of-type {
  margin-top: 2rem;
}
.content-head-title {
  font-size: 3.5rem;
  color: #274b50;
  font-weight: bold;
  margin: 3rem auto 2rem auto;
  font-family: "Roboto Slab";
}
.content-head-subtitle {
  font-size: 3rem;
  color: #274b50;
  font-weight: bold;
  margin: 4rem auto 2rem auto;
  font-family: "Roboto Slab";
}
.btn-container {
  margin-top: 4rem;
}
.img-container {
  margin-right: 2rem;
  width: 450px;
}
.img-button {
  width: 350px;
}

/* Media quaries */

@media (max-width: 1200px) {
  .heading-container,
  .input-container,
  .content-container {
    padding-left: 8rem;
    padding-right: 8rem;
  }
}
@media (max-width: 1280px) {
  .img-container {
    margin-right: 1rem;
  }
  .img-button {
    width: 250px;
  }
}
@media (max-width: 991px) {
  .main-container {
    padding: 2rem;
  }
  .heading-container {
    padding: 5rem;
  }
  .content-container {
    padding: 3rem 5rem;
  }
  .input-container {
    padding: 3rem 5rem;
  }
  .title {
    font-size: 3rem;
  }
  .content-title {
    font-size: 1.7rem;
    font-family: "Roboto slab";
  }
  .content-head-title {
    font-size: 3rem;
    margin: 2.5rem auto 1.5rem auto;
  }
  .content-head-subtitle {
    font-size: 2.7rem;
    margin: 2.5rem auto 1.5rem auto;
  }
  .content-specialText,
  .content-text {
    font-size: 1.8rem;
  }
  .button {
    font-size: 1.75rem;
  }
  .btn-container {
    margin-top: 2.5rem;
  }
}
@media (max-width: 886px) {
  .img-button {
    width: 200px;
  }
}

@media (max-width: 768px) {
  .main-container {
    padding: 1.5rem;
  }
  .heading-container {
    padding: 3rem;
  }
  .content-container {
    padding: 1.5rem 3rem;
  }
  .input-container {
    padding: 1.5rem 3rem;
  }
  .title,
  .content-title {
    font-size: 2.5rem;
  }
  .content-head-title {
    font-size: 2.5rem;
    margin: 2.2rem auto 1.35rem auto;
  }
  .content-head-subtitle {
    font-size: 2.1rem;
    margin: 2.2rem auto 1.35rem auto;
  }
  .content-title {
    font-size: 1.4rem;
  }
  .content-specialText,
  .content-text {
    font-size: 1.3rem;
    /* line-height: 2rem; */
  }
  .button {
    font-size: 1.2rem;
  }
  .btn-container {
    margin-top: 2rem;
  }
}
@media (max-width: 575px) {
  .main-container {
    padding: 1rem;
  }
  .heading-container,
  .input-container,
  .content-container {
    padding: 1.5rem;
  }
  .title,
  .content-head-title,
  .content-head-subtitle {
    font-size: 2rem;
  }
  .content-head-subtitle {
    font-size: 1.7rem;
  }
  .content-title {
    font-size: 1.3rem;
  }
  .title-width {
    max-width: 150px;
  }
  .button {
    font-size: 1rem;
  }
  .content h1 {
    font-size: 41px;
  }

  .content p {
    font-size: 16px;
  }
  .connect,
  .social,
  .network {
    text-align: center;
  }
  .btn-container {
    margin-top: 1rem;
  }
}
@media (max-width: 628px) {
  .img-button {
    width: 110px;
  }
}