/* About Me 
---------------------*/

@import url(styles.css);

#textbois h3 {
  color: var(--periwinkle-blue) !important;
}

.about-text h3 {
  font-size: 45px;
  font-weight: 700;
  margin: 0 0 6px;
}

@media (max-width: 767px) {
  .about-text h3 {
    font-size: 35px;
  }
}

.about-text h6 {
  font-weight: 600;
  margin-bottom: 15px;
}

@media (max-width: 767px) {
  .about-text h6 {
    font-size: 18px;
  }
}

.about-text p {
  font-size: 18px;
  max-width: 450px;
}

.about-text p mark {
  font-weight: 600;
  color: var(--midnight-blue-color);
}

.about-list {
  padding-top: 10px;
}

.about-list .media {
  width: 80% !important;
  padding: 5px 0;
}

.about-list label {
  color: var(--periwinkle-blue) !important;
  font-weight: 600;
  width: 88px;
  margin: 0;
  position: relative;
}

.about-list p {
  margin: 0;
  font-size: 15px;
}

@media (max-width: 991px) {
  .about-avatar {
    margin-top: 30px;
  }
}

.about-section .counter {
  padding: 22px 20px;
  background: var(--white-color);
  border-radius: 10px;
  box-shadow: 0 0 30px var(--dark-teal-shade-color-rgba);
}

.about-section .counter .count-data {
  margin-top: 10px;
  margin-bottom: 10px;
}

.about-section .counter .count {
  font-weight: 700;
  color: var(--midnight-blue-color);
  margin: 0 0 5px;
}

.about-section .counter p {
  font-weight: 600;
  margin: 0;
}

mark {
  background-image: linear-gradient(var(--semi-transparent-tomato-red), var(--semi-transparent-tomato-red));
  background-size: 100% 3px;
  background-repeat: no-repeat;
  background-position: 0 bottom;
  background-color: transparent;
  padding: 0;
  color: currentColor;
}

.theme-color {
  color: var(--cherry-red-color);
}

.dark-color {
  color: var(--midnight-blue-color);
}