.projects-container {
  padding-top: 40px;
  padding-bottom: 40px;
  background-color: #01021E;
  position: relative;
  z-index: 1;
}
.projects-container .project-cross {
  position: absolute;
  right: 10%;
  top: -200px;
  width: 198px;
  height: 188px;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg width='198' height='188' viewBox='0 0 198 188' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_1232_2524)'%3E%3Cpath style='mix-blend-mode:screen' opacity='0.6' d='M98.9999 188C153.676 188 198 145.915 198 94C198 42.0852 153.676 0 98.9999 0C44.3238 0 0 42.0852 0 94C0 145.915 44.3238 188 98.9999 188Z' fill='url(%23paint0_radial_1232_2524)'/%3E%3Cg filter='url(%23filter0_d_1232_2524)'%3E%3Cpath d='M114.519 83.1317C113.22 82.7423 111.772 82.8459 110.485 83.5403L93.9408 92.4387C91.3647 93.8255 90.398 97.0385 91.7848 99.6146L101.671 117.996C103.058 120.573 102.091 123.786 99.515 125.172L81.1331 135.059C78.557 136.445 77.5903 139.658 78.9772 142.235L87.8756 158.779C88.568 160.068 89.7189 160.952 91.0175 161.343C92.3161 161.735 93.7643 161.629 95.0514 160.935L113.433 151.049C114.722 150.356 116.169 150.251 117.467 150.64C118.766 151.029 119.915 151.916 120.609 153.205L130.495 171.586C131.188 172.875 132.339 173.762 133.637 174.151C134.936 174.54 136.384 174.437 137.671 173.742L154.216 164.844C156.792 163.457 157.758 160.244 156.372 157.668L146.485 139.286C145.099 136.71 146.065 133.497 148.641 132.11L167.023 122.224C169.601 120.837 170.566 117.624 169.179 115.048L160.281 98.504C159.588 97.215 158.438 96.3307 157.139 95.9394C155.84 95.55 154.392 95.6536 153.105 96.3479L134.723 106.234C133.434 106.927 131.988 107.032 130.689 106.643C129.391 106.253 128.242 105.367 127.547 104.078L117.661 85.6963C116.968 84.4073 115.818 83.523 114.519 83.1317Z' fill='url(%23paint1_linear_1232_2524)'/%3E%3Cpath style='mix-blend-mode:multiply' opacity='0.6' d='M114.519 83.1317C113.22 82.7423 111.772 82.8459 110.485 83.5403L93.9408 92.4387C91.3647 93.8255 90.398 97.0385 91.7848 99.6146L101.671 117.996C103.058 120.573 102.091 123.786 99.515 125.172L81.1331 135.059C78.557 136.445 77.5903 139.658 78.9772 142.235L87.8756 158.779C88.568 160.068 89.7189 160.952 91.0175 161.343C92.3161 161.735 93.7643 161.629 95.0514 160.935L113.433 151.049C114.722 150.356 116.169 150.251 117.467 150.64C118.766 151.029 119.915 151.916 120.609 153.205L130.495 171.586C131.188 172.875 132.339 173.762 133.637 174.151C134.936 174.54 136.384 174.437 137.671 173.742L154.216 164.844C156.792 163.457 157.758 160.244 156.372 157.668L146.485 139.286C145.099 136.71 146.065 133.497 148.641 132.11L167.023 122.224C169.601 120.837 170.566 117.624 169.179 115.048L160.281 98.504C159.588 97.215 158.438 96.3307 157.139 95.9394C155.84 95.55 154.392 95.6536 153.105 96.3479L134.723 106.234C133.434 106.927 131.988 107.032 130.689 106.643C129.391 106.253 128.242 105.367 127.547 104.078L117.661 85.6963C116.968 84.4073 115.818 83.523 114.519 83.1317Z' fill='url(%23paint2_radial_1232_2524)'/%3E%3Cpath d='M110.199 75.0966C108.9 74.7072 107.452 74.8108 106.165 75.5051L89.6205 84.4035C87.0444 85.7904 86.0776 89.0033 87.4645 91.5794L97.3507 109.961C98.7376 112.537 97.7709 115.75 95.1948 117.137L76.8129 127.023C74.2368 128.41 73.27 131.623 74.6568 134.199L83.5553 150.744C84.2477 152.033 85.3986 152.917 86.6972 153.308C87.9958 153.7 89.4441 153.594 90.7312 152.9L109.113 143.013C110.402 142.321 111.848 142.215 113.147 142.605C114.446 142.994 115.595 143.88 116.289 145.169L126.175 163.551C126.868 164.84 128.019 165.726 129.317 166.116C130.616 166.505 132.064 166.402 133.351 165.707L149.895 156.809C152.471 155.422 153.438 152.209 152.051 149.633L142.165 131.251C140.778 128.675 141.745 125.462 144.321 124.075L162.703 114.189C165.281 112.802 166.246 109.589 164.859 107.013L155.961 90.4688C155.268 89.1798 154.117 88.2955 152.819 87.9042C151.52 87.5148 150.072 87.6184 148.785 88.3128L130.403 98.1991C129.114 98.8915 127.668 98.997 126.369 98.6076C125.07 98.2182 123.921 97.332 123.227 96.043L113.341 77.6612C112.648 76.3721 111.497 75.4879 110.199 75.0966Z' fill='url(%23paint3_linear_1232_2524)'/%3E%3Cpath opacity='0.3' d='M143.888 109.758C151.823 105.492 156.739 99.2135 154.869 95.7362C152.999 92.2588 145.051 92.8988 137.117 97.1657C129.182 101.433 124.266 107.711 126.136 111.188C128.006 114.665 135.954 114.025 143.888 109.758Z' fill='url(%23paint4_radial_1232_2524)'/%3E%3C/g%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_d_1232_2524' x='25.2434' y='62.6716' width='242.109' height='245.824' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset dx='24.38' dy='60.96'/%3E%3CfeGaussianBlur stdDeviation='36.58'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.4 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow_1232_2524'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow_1232_2524' result='shape'/%3E%3C/filter%3E%3CradialGradient id='paint0_radial_1232_2524' cx='0' cy='0' r='1' gradientUnits='userSpaceOnUse' gradientTransform='translate(88.5592 93.6423) scale(95.6909 91.8537)'%3E%3Cstop stop-color='%23B05CFF'/%3E%3Cstop offset='0.17' stop-color='%23B05CFF' stop-opacity='0.64'/%3E%3Cstop offset='0.47' stop-color='%235F2AA8' stop-opacity='0.2116'/%3E%3Cstop offset='0.72' stop-color='%232C1381' stop-opacity='0.0441'/%3E%3Cstop offset='0.91' stop-color='%230C0568' stop-opacity='0.01'/%3E%3Cstop offset='1' stop-color='%2300005F' stop-opacity='0'/%3E%3C/radialGradient%3E%3ClinearGradient id='paint1_linear_1232_2524' x1='224.66' y1='142.653' x2='136.904' y2='130.428' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23B05CFF'/%3E%3Cstop offset='1' stop-color='%237119FF'/%3E%3C/linearGradient%3E%3CradialGradient id='paint2_radial_1232_2524' cx='0' cy='0' r='1' gradientUnits='userSpaceOnUse' gradientTransform='translate(124.066 128.698) rotate(-163.27) scale(40.8341 38.7924)'%3E%3Cstop/%3E%3Cstop offset='0.1' stop-color='%23050505'/%3E%3Cstop offset='0.22' stop-color='%23151515'/%3E%3Cstop offset='0.36' stop-color='%232F2F2F'/%3E%3Cstop offset='0.51' stop-color='%23545454'/%3E%3Cstop offset='0.67' stop-color='%23838383'/%3E%3Cstop offset='0.83' stop-color='%23BDBDBD'/%3E%3Cstop offset='1' stop-color='white'/%3E%3C/radialGradient%3E%3ClinearGradient id='paint3_linear_1232_2524' x1='145.357' y1='90.5014' x2='90.783' y2='154.68' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23B05CFF'/%3E%3Cstop offset='1' stop-color='%237119FF'/%3E%3C/linearGradient%3E%3CradialGradient id='paint4_radial_1232_2524' cx='0' cy='0' r='1' gradientUnits='userSpaceOnUse' gradientTransform='translate(139.824 102.615) rotate(-28.27) scale(16.3112 7.17693)'%3E%3Cstop stop-color='white' stop-opacity='0.6'/%3E%3Cstop offset='1' stop-color='%239636F9' stop-opacity='0'/%3E%3C/radialGradient%3E%3CclipPath id='clip0_1232_2524'%3E%3Crect width='198' height='188' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
}
@media (max-width: 1100px) {
  .projects-container .project-cross {
    top: -50px;
    width: 97px;
    height: 92px;
  }
}
@media (max-width: 768px) {
  .projects-container .project-cross {
    top: -30px;
    right: 5%;
  }
}
.projects-container::before {
  content: "";
  position: absolute;
  width: 648px;
  height: 1210px;
  background-image: url("../../../src/img/circle_left_service.webp");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  top: 50%;
  -webkit-transform: translate(0, -40%);
      -ms-transform: translate(0, -40%);
          transform: translate(0, -40%);
  left: 0;
  z-index: 0;
}
@media (max-width: 992px) {
  .projects-container::before {
    width: 0;
    height: 0;
    display: none;
  }
}
.projects-container::after {
  content: "";
  position: absolute;
  width: 748px;
  height: 1200px;
  background-image: url("../../../src/img/circle_right_service.webp");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  top: -100px;
  right: 0;
  z-index: 0;
}
@media (max-width: 992px) {
  .projects-container::after {
    width: 0;
    height: 0;
    display: none;
  }
}
.projects-container .project-section__content-bottom-decoration {
  position: absolute;
  right: 27%;
  bottom: 10px;
  z-index: -1;
}
@media (max-width: 768px) {
  .projects-container .project-section__content-bottom-decoration {
    right: 17%;
    width: 260px;
    height: 260px;
    bottom: unset;
  }
}

.projects-grid {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr)[3];
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  position: relative;
  z-index: 9;
}
@media (max-width: 1100px) {
  .projects-grid {
    -ms-grid-columns: (1fr)[2];
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 576px) {
  .projects-grid {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
  }
}

.project-item {
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  position: relative;
  min-height: 600px;
  border-radius: 20px;
  border: 1px solid #221F3C;
  padding: 24px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 10;
}
@media (max-width: 768px) {
  .project-item {
    min-height: 500px;
  }
}
.project-item::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: contain;
  background: linear-gradient(187.65deg, rgba(3, 3, 30, 0) 54.83%, #03031E 93.45%);
  z-index: 1;
}
.project-item .overlay {
  position: relative;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  z-index: 2;
}
.project-item .overlay .overlay-title h3 {
  font-family: "ClashDisplay";
  font-weight: 700;
  font-size: 24px;
  line-height: 28px;
  letter-spacing: 2%;
  text-transform: uppercase;
  color: #ffffff;
}
@media (max-width: 992px) {
  .project-item .overlay .overlay-title h3 {
    font-size: 20px;
    line-height: 24px;
  }
}
.project-item .overlay .overlay-title span {
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 22px;
  letter-spacing: -2%;
  color: rgba(255, 255, 255, 0.8);
}
@media (max-width: 992px) {
  .project-item .overlay .overlay-title span {
    font-size: 15px;
  }
}
.project-item .overlay .overlay-link {
  display: block;
  width: 48px;
  height: 48px;
  background: -webkit-gradient(linear, left top, right top, from(#FFCC17), to(#FFD84D));
  background: linear-gradient(90deg, #FFCC17 0%, #FFD84D 100%);
  border-radius: 12px;
  position: relative;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
.project-item .overlay .overlay-link::before {
  content: "";
  position: absolute;
  width: 32px;
  height: 32px;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  background-image: url("data:image/svg+xml,%3Csvg width='34' height='34' viewBox='0 0 34 34' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.67969 26.6001L26.6797 7.4001M26.6797 7.4001L6.67969 7.4001M26.6797 7.4001L26.6797 26.6001' stroke='%2301021E' stroke-width='2'/%3E%3C/svg%3E%0A");
}
.project-item .overlay .overlay-link:hover {
  -webkit-transform: scale(1.05);
      -ms-transform: scale(1.05);
          transform: scale(1.05);
}

.load-more {
  display: block;
  border-radius: 12px;
  width: 200px;
  height: 50px;
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 50px;
  text-align: center;
  text-transform: uppercase;
  color: #01021E;
  margin: 60px auto;
  background: -webkit-gradient(linear, left top, right top, from(#FFCC17), to(#FFD84D));
  background: linear-gradient(90deg, #FFCC17 0%, #FFD84D 100%);
  border: none;
  cursor: pointer;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.load-more:hover {
  background: -webkit-gradient(linear, left top, right top, from(#FFD84D), to(#FFCC17));
  background: linear-gradient(90deg, #FFD84D 0%, #FFCC17 100%);
  -webkit-box-shadow: 0px 6px 40px 0px rgba(255, 214, 66, 0.8);
          box-shadow: 0px 6px 40px 0px rgba(255, 214, 66, 0.8);
  -webkit-transform: translateY(-3px);
      -ms-transform: translateY(-3px);
          transform: translateY(-3px);
}