@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600&family=Unbounded:wght@400;500;600;700&display=swap");
body {
  box-sizing: border-box;
  font-family: "Plus Jakarta Sans", sans-serif;
  background-color: #1e1d22;
}

.navbar {
  color: #ffffff;
  padding-top: 1rem;
  padding-bottom: 1rem;
  background-color: #25232d;
}
.navbar .navbar-brand {
  color: #ffffff;
}
.navbar a.nav-link {
  color: #ffffff;
}

.is-flex {
  display: flex;
  align-items: center;
}

.custom-container {
  max-width: 1000px;
}

.banner {
  color: #ffffff;
  background-color: #25232d;
  padding-top: 2rem;
}
.banner .banner-content {
  display: flex;
  justify-content: space-between;
  -moz-column-gap: 4rem;
       column-gap: 4rem;
}
.banner .banner-content .banner-left {
  width: 35rem;
  margin-top: 5rem;
}
.banner .banner-content .banner-left .btn {
  color: #a488c1;
}
.banner .banner-content .banner-left .btn.btn-link {
  text-decoration: none;
}
.banner .banner-content .banner-mid {
  width: 30rem;
  background: linear-gradient(180deg, #a488c1 0%, rgba(164, 136, 193, 0) 100%);
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
  border-radius: 10px 10px 0 0;
  padding-top: 1rem;
}
.banner .banner-content .banner-right {
  margin-top: 8rem;
}
.banner .banner-content .banner-right h1 {
  font-size: 5rem;
  font-family: "Unbounded", sans-serif;
}
.banner .banner-content .banner-right ul.socials {
  display: inline-flex;
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
  -moz-column-gap: 1rem;
       column-gap: 1rem;
}
.banner .banner-content .banner-right ul.socials a {
  color: #a488c1;
}

.about-me {
  padding-top: 6rem;
  padding-bottom: 2rem;
}
.about-me .about-content {
  display: flex;
  justify-content: space-between;
  position: relative;
}
.about-me .about-content .about-left {
  width: 26rem;
}
.about-me .about-content .about-left h4 {
  color: #a488c1;
  font-family: "Unbounded", sans-serif;
}
.about-me .about-content .about-left p {
  color: white;
  font-family: "Unbounded", sans-serif;
  font-size: 2rem;
}
.about-me .about-content .slash-line {
  width: 3px;
  height: 21rem;
  background-color: #a488c1;
  transform: rotate(43deg);
  position: absolute;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  top: 1rem;
}
.about-me .about-content .about-right {
  width: 27rem;
  margin-top: 6rem;
}
.about-me .about-content .about-right .image-circle {
  background-image: url("/images/Ellipse.png");
  width: 13rem;
  height: 13rem;
  background-size: contain;
  margin-left: auto;
  margin-right: 3rem;
}
.about-me .about-content .about-right p {
  color: white;
  margin-top: -2rem;
  opacity: 0.8;
  font-size: 1.2rem;
}
.about-me .about-content .about-right .btn {
  color: #a488c1;
  font-size: 1.6rem;
  font-weight: 500;
}
.about-me .about-content .about-right .btn.btn-link {
  text-decoration: none;
}

.my-stats {
  padding-bottom: 8rem;
}
.my-stats .stats-wrapper .stats-container {
  display: flex;
  -moz-column-gap: 8rem;
       column-gap: 8rem;
  justify-content: left;
  transform: rotate(22deg);
}
.my-stats .stats-wrapper .stats-container .stat1 {
  background-color: transparent;
  border: 1px solid #a488c1;
  height: 15rem;
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  width: 15rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  transform: rotate(-22deg);
}
.my-stats .stats-wrapper .stats-container .stat1 h3 {
  color: #a488c1;
  font-size: 2.4rem;
}
.my-stats .stats-wrapper .stats-container .stat1 p {
  color: white;
  opacity: 0.8;
}
.my-stats .stats-wrapper .image-circle {
  background-image: url("/images/Ellipse.png");
  width: 7rem;
  height: 7rem;
  background-size: contain;
  margin-left: auto;
  background-position: top;
  margin-top: -4rem;
  margin-right: 2rem;
  transform: rotate(60deg);
}

.skill-list {
  position: relative;
}
.skill-list .bg-ring {
  background-image: url("/images/Vector.png");
  background-size: cover;
  margin-left: auto;
  height: 45rem;
  width: 20rem;
  position: absolute;
  right: 0px;
  top: 5rem;
}
.skill-list h2,
.skill-list h3,
.skill-list h4,
.skill-list p {
  color: white;
}
.skill-list .image-circle {
  background-image: url("/images/Ellipse.png");
  background-size: contain;
  min-width: 3rem;
  min-height: 3rem;
  background-repeat: no-repeat;
}
.skill-list .skill-title {
  -moz-column-gap: 5rem;
       column-gap: 5rem;
  padding-bottom: 3rem;
  justify-content: center;
}
.skill-list .skill-title .image-circle {
  width: 8rem;
  height: 8rem;
  margin-bottom: 2rem;
}
.skill-list .skill-title p {
  opacity: 0.8;
}
.skill-list .skill-title .skill-title-right h4 {
  color: #a488c1;
}
.skill-list .skill {
  padding-bottom: 4rem;
  -moz-column-gap: 2rem;
       column-gap: 2rem;
  justify-content: center;
}
.skill-list .skill p {
  opacity: 0.8;
}
.skill-list .skill .skill-icon {
  border-radius: 166px;
  border: 2px solid #a488c1;
  padding: 3rem 7rem;
  position: relative;
}
.skill-list .skill .skill-icon h2 {
  position: absolute;
  top: 0;
  right: -1rem;
  font-size: 3rem;
}
.skill-list .skill .skill-icon svg {
  fill: #a488c1;
  width: 7rem;
  height: auto;
}
.skill-list .skill .skill-content {
  margin-left: 1rem;
  position: relative;
}
.skill-list .skill .skill-content .image-circle {
  position: absolute;
  right: 10rem;
}
.skill-list .skill .skill-content p {
  padding-left: 3rem;
  max-width: 80%;
}
.skill-list .skill.opposite-row .skill-icon h2 {
  left: -6rem;
}
.skill-list .skill.opposite-row .skill-content .image-circle {
  left: -6rem;
  width: 4rem;
  height: 4rem;
  transform: rotate(145deg);
}
.skill-list .skill.react-row .skill-content .image-circle {
  right: -1rem;
  transform: rotate(45deg);
}

.recent-project {
  padding-top: 2rem;
  padding-bottom: 2rem;
  margin-bottom: 4rem;
}
.recent-project .about-content {
  display: flex;
  justify-content: space-between;
  position: relative;
  margin-bottom: 4rem;
}
.recent-project .about-content .about-left {
  width: 26rem;
}
.recent-project .about-content .about-left h4 {
  color: #a488c1;
  font-family: "Unbounded", sans-serif;
}
.recent-project .about-content .about-left p {
  color: white;
  font-family: "Unbounded", sans-serif;
  font-size: 2rem;
}
.recent-project .about-content .slash-line {
  width: 3px;
  height: 21rem;
  background-color: #a488c1;
  transform: rotate(43deg);
  position: absolute;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  top: 0;
}
.recent-project .about-content .about-right {
  width: 27rem;
  margin-top: 4rem;
}
.recent-project .about-content .about-right .image-circle {
  background-image: url("/images/Ellipse.png");
  width: 13rem;
  height: 13rem;
  background-size: contain;
  margin-left: auto;
  margin-right: 3rem;
}
.recent-project .about-content .about-right p {
  color: white;
  margin-top: -2rem;
  opacity: 0.8;
  font-size: 1.2rem;
}
.recent-project .about-content .about-right .btn {
  color: #a488c1;
  font-size: 1.6rem;
  font-weight: 500;
}
.recent-project .about-content .about-right .btn.btn-link {
  text-decoration: none;
}
.recent-project .project-list .project-card {
  background-color: #282833;
  padding: 2rem 0 0 2rem;
}
.recent-project .project-list .project-card a {
  text-decoration: none;
}
.recent-project .project-list .project-card h4 {
  color: white;
  padding-bottom: 1.5rem;
}
.recent-project .project-list .project-card img {
  border-radius: 16px 0 0 0;
}

.collaborate {
  text-align: center;
  margin-bottom: 4rem;
  position: relative;
  margin-top: 6rem;
}
.collaborate .bg-ring {
  background-image: url("/images/Vector2.png");
  background-size: cover;
  margin-left: auto;
  height: 21rem;
  width: 12rem;
  position: absolute;
  left: 0px;
  top: -7rem;
}
.collaborate h2 {
  color: white;
  margin-bottom: 2rem;
}
.collaborate h5 {
  color: #a488c1;
}
.collaborate .btn {
  border-radius: 360px;
  border: 1px solid #a488c1;
  text-decoration: none;
  color: #a488c1;
  padding: 1rem 2rem;
  font-size: 1.2rem;
  font-weight: 500;
}

footer {
  background-color: #25232d;
  text-align: center;
  padding: 4rem 0;
}
footer ul {
  list-style: none;
  display: inline-flex;
  -moz-column-gap: 3rem;
       column-gap: 3rem;
  align-items: center;
  margin-bottom: 2rem;
}
footer ul li a {
  color: white;
  opacity: 0.8;
  text-decoration: none;
}
footer ul li:not(:first-child) {
  position: relative;
}
footer ul li:not(:first-child)::before {
  content: "";
  width: 5px;
  height: 5px;
  background-color: white;
  position: absolute;
  border-radius: 50%;
  left: -27px;
  top: 0;
  bottom: 0;
  margin: auto;
}
footer p {
  color: white;
  opacity: 0.8;
}

@media screen and (max-width: 768px) {
  html {
    font-size: 90%;
  }
}/*# sourceMappingURL=style.css.map */