:root {
  --theme-color: #0a0a0a;
  --main-color: #dc143c;
  --secondary-color: #ddd;
  --lime-green: #32cd32;
}

.about {
  padding-top: 20vh;
  max-width: 90%;
  margin: 0 auto;
}

.about-img {
  display: block;
  position: relative;
  z-index: 0;
}

.about-img img {
  position: relative;
  max-height: 50vh;
  max-width: 50vw;
  border-radius: 50%;
  object-fit: cover;
  border: 1rem double var(--main-color);
  z-index: 1;
}

.about-title {
  background: var(--main-color);
  position: absolute;
  top: 50%;
  transform: translateY(-30%);
  left: 20%;
  border-radius: 0 50px 50px 0;
  padding: 10px 20px;
  z-index: -1;
}

.about-img p {
  color: var(--main-color);
  padding-left: 23vw;
  font-weight: 700;
  span {
    color: var(--secondary-color);
    padding-left: 23vw;
  }
}

h1 {
  font-size: 4rem;
  padding-left: 10vw;
  padding-right: 3vw;
  color: var(--secondary-color);
  font-weight: 700;
}

.about-title {
  background: var(--main-color);
  position: absolute;
  top: 55%;
  left: 23%;
  border-radius: 0 50px 50px 0;
  padding: 10px 20px;
  z-index: -1;
}

.about-img p {
  color: var(--main-color);
  padding-left: 23vw;
  font-weight: 700;
  span {
    color: var(--secondary-color);
    padding-left: 19vw;
  }
}

h1 {
  font-size: 4rem;
  padding-left: 10vw;
  padding-right: 3vw;
  color: var(--secondary-color);
  font-weight: 700;
}

h2 {
  color: var(--main-color);
}

p {
  font-size: 1.5rem;
}

section h2,
p {
  padding: 0px 4rem;
}

@media screen and (max-width: 992px) {
  .about-title {
    left: 30%;
    top: 50%;
  }
  .about-img p span {
    padding-left: 22vw;
  }
}

@media screen and (max-width: 768px) {
  .about-img img {
    width: 30vw;
    height: 30vh;
  }

  .about-title {
    top: 50%;
    left: 25%;
    padding: 10px 20px;
  }

  .about-img p {
    color: var(--main-color);
    padding-left: 23vw;
    font-weight: 700;
    font-size: 1rem;
    span {
      color: var(--secondary-color);
      padding-left: 11vw;
    }
  }

  h1 {
    font-size: 2rem;
    padding-left: 10vw;
    padding-right: 3vw;
    color: var(--secondary-color);
    font-weight: 700;
  }

  h2 {
    color: var(--main-color);
    font-size: 1.3rem;
  }

  p {
    font-size: 1rem;
  }

  section h2,
  p {
    padding: 0px 2rem;
  }

  section {
    padding-bottom: 2rem;
  }
}

@media screen and (max-width: 576px) {
  .about-img img {
    width: 40vw;
    height: 40vh;
  }

  .about-title {
    left: 35%;
    top: 45%;
  }

  .about-title h1 {
    font-size: 2.5rem;
  }

  .about-img p {
    padding-top: 2vh;
  }

  .about-img p span {
    padding-left: 10vw;
  }
}

/* @media screen and (max-width: 767.98px) {
  .about-title {
    top: 42%;
    left: 40%;
    border-radius: 0 50px 50px 0;
    padding: 10px 20px;
    z-index: -1;
  }

  .about-img p {
    color: var(--main-color);
    padding-left: 23vw;
    font-weight: 700;
    font-size: 1rem;
    span {
      color: var(--secondary-color);
      padding-left: 11vw;
    }
  }

  h1 {
    font-size: 2rem;
    padding-left: 10vw;
    padding-right: 3vw;
    color: var(--secondary-color);
    font-weight: 700;
  }

  h2 {
    color: var(--main-color);
    font-size: 1.3rem;
  }

  p {
    font-size: 1rem;
  }

  section h2,
  p {
    padding: 0px 2rem;
  }

  section {
    padding-bottom: 2rem;
  }
} */

@media screen and (max-width: 441px) {
  .about-img img {
    width: 150px;
    height: 150px;
    border: 0.5rem double var(--main-color);
  }

  .about-title {
    top: 35%;
    left: 25%;
    padding: 5px 10px;
  }

  .about-img h1 {
    font-size: 1.5rem;
  }
}

@media screen and (max-width: 441px) {
  .about-title {
    top: 35%;
    left: 35%;
    padding: 5px 10px;
  }
}

@media screen and (max-width: 341px) {
  .about-title {
    top: 35%;
    left: 40%;
    padding: 5px 10px;
  }
}

.fa-bars {
  color: var(--theme-color);
}