body {
  background: linear-gradient(90deg, #f9f9f9 21px, transparent 1%) center, linear-gradient(#f9f9f9 21px, transparent 1%) center, #b9bdc0;
  background-size: 22px 22px;
  font-family: "Poppins", sans-serif;
  font-size: 16px;
}

[data-gradient1] {
  position: relative;
}

[data-gradient1]::after {
  content: "";
  position: absolute;
  width: 200px;
  height: 200px;
  left: -80px;
  top: -80px;
  z-index: -1;
  border: 50%;
  background: linear-gradient(40.82deg, #20bf6b -16.4%, rgba(32, 191, 107, 0) 141.01%);
  -webkit-filter: blur(100px);
          filter: blur(100px);
}

.navbar-brand {
  font-weight: 500;
}

.btn-contact-me {
  background-color: #686de0;
  color: #fff;
  border-radius: 30px;
}

.btn-contact-me:hover {
  background-color: #bfc2ff;
  color: #fff;
}

.hero {
  margin-top: -90px;
  padding: 190px 0 60px 0;
}

.hero .left-side h3 {
  color: #20bf6b;
  font-size: 24px;
  font-weight: 500;
  margin-bottom: 16px;
}

.hero .left-side h1 {
  font-size: 48px;
  font-weight: 700;
  margin-bottom: 20px;
}

.hero .left-side h1 span {
  color: #686de0;
}

.hero .left-side p {
  font-size: 16px;
  font-weight: 400;
  margin-bottom: 24px;
}

.hero .left-side .btn-email-me {
  background-color: #686de0;
  color: #fff;
}

.hero .left-side .btn-email-me:hover {
  --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
          0 4px 6px -2px rgba(0, 0, 0, 0.05);
  -webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
          box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.hero .right-side {
  min-width: 100px;
}

.hero .right-side img {
  width: 100%;
}

[data-gradient2] {
  position: relative;
}

[data-gradient2]::after {
  content: "";
  position: absolute;
  top: 190px;
  left: 370px;
  width: 271px;
  height: 261px;
  border-radius: 50%;
  z-index: -1;
  background: linear-gradient(40.82deg, rgba(80, 86, 233, 0.5) -16.4%, rgba(83, 90, 243, 0) 141.01%);
  -webkit-filter: blur(70px);
          filter: blur(70px);
}

.about-me {
  padding: 60px 0 60px 0;
}

.about-me .my-image {
  min-width: 400px;
}

.about-me .my-image img {
  width: 100%;
}

.about-me .my-description h3 {
  color: #20bf6b;
  font-size: 24px;
  font-weight: 500;
  margin-bottom: 16px;
}

.about-me .my-description h1 {
  font-size: 36px;
  font-weight: 700;
  margin-bottom: 12px;
}

.about-me .my-description h1 span {
  color: #686de0;
}

.about-me .my-description p {
  font-size: 16px;
  font-weight: 400;
}

.about-me .my-description .btn-about-me {
  margin-top: 44px;
}

.about-me .my-description .btn-about-me .btn-cv {
  background-color: #686de0;
  color: #fff;
}

.about-me .my-description .btn-about-me .btn-cv:hover {
  --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
            0 4px 6px -2px rgba(0, 0, 0, 0.05);
  -webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
          box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.about-me .my-description .btn-about-me .btn-hire {
  background-color: #f9f9f9;
  color: #686de0;
  border: 1px solid #686de0;
}

.about-me .my-description .btn-about-me .btn-hire:hover {
  background-color: #686de0;
  color: #fff;
}

.project-title {
  padding: 60px 0 0 0;
}

.project-title h3 {
  color: #20bf6b;
  font-size: 24px;
  font-weight: 500;
  margin-bottom: 16px;
}

.project-title h1 {
  font-size: 36px;
  font-weight: 700;
  margin-bottom: 12px;
}

[data-gradient3] {
  position: relative;
}

[data-gradient3]::after {
  content: "";
  position: absolute;
  top: -10px;
  left: -60px;
  width: 271px;
  height: 261px;
  border-radius: 50%;
  z-index: -1;
  background: linear-gradient(40.82deg, rgba(80, 86, 233, 0.5) -16.4%, rgba(83, 90, 243, 0) 141.01%);
  -webkit-filter: blur(70px);
          filter: blur(70px);
}

.project-content {
  padding: 48px 0 60px 0;
}

.project-content .project-1 .image-project {
  min-width: 500px;
}

.project-content .project-1 .image-project img {
  width: 100%;
}

.project-content .project-1 .description-project h4 {
  font-size: 24px;
  font-weight: 500;
  margin-bottom: 25px;
}

.project-content .project-1 .description-project p {
  font-size: 16px;
  font-weight: 400;
  margin-bottom: 16px;
}

.project-content .project-1 .description-project a {
  text-decoration: none;
  color: #ff9900;
}

.project-content .project-2 {
  margin-top: 85px;
}

.project-content .project-2 .image-project {
  min-width: 500px;
}

.project-content .project-2 .image-project img {
  width: 100%;
}

.project-content .project-2 .description-project h4 {
  font-size: 24px;
  font-weight: 500;
  margin-bottom: 25px;
}

.project-content .project-2 .description-project p {
  font-size: 16px;
  font-weight: 400;
  margin-bottom: 16px;
}

.project-content .project-2 .description-project a {
  text-decoration: none;
  color: #ff9900;
}

.project-content .project-3 {
  margin-top: 85px;
}

.project-content .project-3 .image-project {
  min-width: 500px;
}

.project-content .project-3 .image-project img {
  width: 100%;
}

.project-content .project-3 .description-project h4 {
  font-size: 24px;
  font-weight: 500;
  margin-bottom: 25px;
}

.project-content .project-3 .description-project p {
  font-size: 16px;
  font-weight: 400;
  margin-bottom: 16px;
}

.project-content .project-3 .description-project a {
  text-decoration: none;
  color: #ff9900;
}

[data-gradient4] {
  position: relative;
}

[data-gradient4]::after {
  content: "";
  position: absolute;
  top: -120px;
  right: -80px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  z-index: -1;
  background: linear-gradient(40.82deg, #ff59aa -16.4%, rgba(245, 173, 235, 0) 141.01%);
  -webkit-filter: blur(120px);
          filter: blur(120px);
}

.tools-title {
  padding: 60px 0 0 0;
}

.tools-title h3 {
  color: #20bf6b;
  font-size: 24px;
  font-weight: 500;
  margin-bottom: 16px;
}

.tools-title h1 {
  font-size: 36px;
  font-weight: 700;
  margin-bottom: 12px;
}

.tools-content {
  padding: 48px 0 60px 0;
}

.tools-content .load-more {
  background-color: #686de0;
  color: #fff;
  border: none;
}

.tools-content .load-more:hover {
  --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
        0 4px 6px -2px rgba(0, 0, 0, 0.05);
  -webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
          box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.got-project {
  padding: 60px 0 60px 0;
}

.got-project h3 {
  color: #20bf6b;
  font-size: 24px;
  font-weight: 500;
  margin-bottom: 16px;
}

.got-project h1 {
  font-size: 48px;
  font-weight: 700;
  margin-bottom: 48px;
}

.got-project .btn-hire {
  background-color: #f9f9f9;
  color: #686de0;
  border: 1px solid #686de0;
  margin-bottom: 120px;
}

.got-project .btn-hire:hover {
  background-color: #686de0;
  color: #fff;
}

.information {
  padding: 60px 0 120px 0;
}

.information h3 {
  color: #20bf6b;
  font-size: 24px;
  font-weight: 500;
  margin-bottom: 16px;
}

.information p {
  font-weight: 700;
  font-size: 24px;
  margin-bottom: 8px;
}

.information span {
  font-weight: 400;
  font-size: 16px;
}

@media (max-width: 575px) {
  [data-gradient1] {
    position: relative;
  }
  [data-gradient1]::after {
    content: "";
    position: absolute;
    width: 120px;
    height: 120px;
    left: -10px;
    top: -20px;
    z-index: -1;
    border: 50%;
    background: linear-gradient(40.82deg, #20bf6b -16.4%, rgba(32, 191, 107, 0) 141.01%);
    -webkit-filter: blur(70px);
            filter: blur(70px);
  }
  [data-gradient2] {
    position: relative;
  }
  [data-gradient2]::after {
    content: "";
    position: absolute;
    top: 40px;
    left: 300px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    z-index: -1;
    background: linear-gradient(40.82deg, rgba(80, 86, 233, 0.5) -16.4%, rgba(83, 90, 243, 0) 141.01%);
    -webkit-filter: blur(70px);
            filter: blur(70px);
  }
  [data-gradient3] {
    position: relative;
  }
  [data-gradient3]::after {
    content: "";
    position: absolute;
    top: -50px;
    left: -50px;
    width: 270px;
    height: 270px;
    border-radius: 50%;
    z-index: -1;
    background: linear-gradient(40.82deg, rgba(80, 86, 233, 0.5) -16.4%, rgba(83, 90, 243, 0) 141.01%);
    -webkit-filter: blur(70px);
            filter: blur(70px);
  }
  [data-gradient4] {
    position: relative;
  }
  [data-gradient4]::after {
    content: "";
    position: absolute;
    top: -80px;
    left: 300px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    z-index: -1;
    background: linear-gradient(40.82deg, #ff59aa -16.4%, rgba(245, 173, 235, 0) 141.01%);
    -webkit-filter: blur(70px);
            filter: blur(70px);
  }
  .hero {
    padding: 150px 0 50px 0;
    overflow-x: hidden;
  }
  .hero .left-side h1 {
    font-size: 36px;
  }
  .hero .right-side {
    margin-top: 40px;
  }
  .hero .right-side img {
    width: 100%;
  }
  .about-me {
    padding: 50px 0 50px 0;
  }
  .about-me .my-image img {
    display: none;
  }
  .project-title {
    padding: 50px 0 0 0;
  }
  .project-content {
    padding: 48px 0 50px 0;
  }
  .project-content .project-1 .image-project {
    min-width: 300px;
  }
  .project-content .project-1 .image-project img {
    width: 100%;
  }
  .project-content .project-1 .description-project strong::after {
    content: "";
    display: inline-block;
    position: relative;
    top: -5px;
    margin-left: 0.5rem;
    margin-right: 0.3rem;
    width: 20px;
    height: 1px;
    background-color: #5f6470;
  }
  .project-content .project-2 {
    margin-top: 50px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  .project-content .project-2 .description-project {
    -webkit-box-ordinal-group: 1000;
        -ms-flex-order: 999;
            order: 999;
  }
  .project-content .project-2 .description-project strong::after {
    content: "";
    display: inline-block;
    position: relative;
    top: -5px;
    margin-left: 0.5rem;
    margin-right: 0.3rem;
    width: 20px;
    height: 1px;
    background-color: #5f6470;
  }
  .project-content .project-2 .image-project {
    min-width: 300px;
  }
  .project-content .project-2 .image-project img {
    width: 100%;
  }
  .project-content .project-3 {
    margin-top: 50px;
  }
  .project-content .project-3 .image-project {
    min-width: 300px;
  }
  .project-content .project-3 .image-project img {
    width: 100%;
  }
  .project-content .project-3 .description-project strong::after {
    content: "";
    display: inline-block;
    position: relative;
    top: -5px;
    margin-left: 0.5rem;
    margin-right: 0.3rem;
    width: 20px;
    height: 1px;
    background-color: #5f6470;
  }
  .tools-title {
    padding: 50px 0 0 0;
  }
  .tools-content {
    padding: 48px 0 50px 0;
  }
  .got-project {
    padding: 50px 0 50px 0;
  }
  .information {
    padding: 50px 0 100px 0;
  }
  .information h3 {
    color: #20bf6b;
    font-size: 24px;
    font-weight: 500;
    margin-bottom: 16px;
  }
  .information p {
    font-weight: 700;
    font-size: 24px;
    margin-bottom: 8px;
  }
  .information span {
    font-weight: 400;
    font-size: 14px;
  }
}

@media (min-width: 575px) and (max-width: 767px) {
  .hero .right-side {
    margin-top: 40px;
  }
  .hero .right-side img {
    width: 100%;
  }
}
/*# sourceMappingURL=main.css.map */