@media screen and (max-width: 1499px) {
  html,
  body {
    font-size: 15px;
  }
}

@media screen and (max-width: 1400px) {
}

@media screen and (max-width: 1200px) {
}

@media screen and (max-width: 1100px) {
  header {
    background: var(--red);
  }

  .banner-section .red-bg {
    display: none;
  }

  .banner-section {
    padding: 0;
  }

  .banner-section .el-img-bg {
    width: 100%;
  }

  .banner-section .py-100 {
    padding-top: 40em;
    padding-bottom: 2em;
  }
}

@media screen and (max-width: 992px) {
  html,
  body {
    font-size: 14px;
  }

  .header-logo {
    width: 13em;
  }

  .about-2-section .el-img-bg {
    position: relative;
    top: 0;
    left: 0;
    transform: none;
    width: 100%;
    margin-top: 2em;
    border-radius: 5em;
  }
}

@media screen and (max-width: 768px) {
  html,
  body {
    font-size: 13px;
  }
}

@media screen and (max-width: 640px) {
  html,
  body {
    font-size: 12px;
  }
}

@media screen and (max-width: 550px) {
  :root {
    --h1: 3.25rem;
    --h2: 3rem;
    --h3: 1.85rem;
    --p: 1.3rem;
  }

  .about-section .border {
    padding: 3em;
  }

  .header-logo {
    width: 10em;
  }
}