/* if the viewport is equal to 340px or less than that */
@media only screen and (max-width: 340px) {
  .header_area .main-menu .navbar,
  .header_area .main-menu .navbar .navbar-brand,
  h4 {
    padding: 2%;
    margin: 0%;
  }

  .site-main .site-banner .site-title h1 {
    font-size: 41px;
  }

  .para {
    font-size: 41px;
  }
}

/* if the viewport is equal to 340px or less than that */
@media only screen and (max-width: 792px) {
  .site-main .about-area .para .about-title h2 > span {
    font-size: 31px;
    letter-spacing: 10px;
  }

  .site-main .para .brand-area .experience-area .years-area {
    padding-left: 1%;
    width: 49%;
  }

  .site-main .para .brand-area .experience-area .bg-panel {
    margin-left: 30%;
    width: 80%;
  }

  .site-main .para .brand-area .experience-area .call-area {
    padding-left: 3%;
  }

  .site-main .para .project-area .button-group button {
    font: normal 500 18px/40px var(--roboto);
  }

  .site-main .para .about-area .about-title p {
    padding: 0%;
  }
}

/* if the viewport is equal to 1910px or less than that */
@media only screen and (max-width: 1910px) {
  .header_area .main-menu .navbar {
    padding: 1rem;
  }

  .container {
    max-width: 90%;
  }

  .site-main .about-area {
    padding: 3% 4%;
  }
}