.portfoli-section {
  position: relative;
  background-color: #01021E;
  padding-top: 100px;
}
.portfoli-section .portfoli-section__decorations {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}
.portfoli-section .portfoli-section__decorations .portfolio_bg_decor {
  position: absolute;
  right: 0;
  top: -440px;
  -webkit-transform: none;
      -ms-transform: none;
          transform: none;
}
@media (max-width: 992px) {
  .portfoli-section .portfoli-section__decorations .portfolio_bg_decor {
    top: 1100px;
  }
}
@media (max-width: 768px) {
  .portfoli-section .portfoli-section__decorations {
    display: none;
  }
}
.portfoli-section .portfolio-section__filter-content {
  position: sticky;
  top: 156px;
  z-index: 999;
  max-width: 1288px;
  width: 100%;
  padding: 0 24px;
  margin: 0 auto;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
@media (max-width: 1200px) {
  .portfoli-section .portfolio-section__filter-content {
    max-width: 100%;
    padding: 0;
    overflow-x: auto;
    white-space: nowrap;
  }
}
@media (max-width: 992px) {
  .portfoli-section .portfolio-section__filter-content {
    top: 83px;
  }
}
.portfoli-section .portfolio-section__filter-content .portfolio-filters {
  position: relative;
  z-index: 3;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 10px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 30px;
  padding-top: 7px;
  padding-bottom: 7px;
  padding-left: 8px;
  padding-right: 8px;
  border-radius: 12px;
  background-color: #110824;
  border: 1px solid #524858;
}
@media (max-width: 1200px) {
  .portfoli-section .portfolio-section__filter-content .portfolio-filters {
    overflow-x: auto;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
  }
}
.portfoli-section .portfolio-section__filter-content .portfolio-filters:has(.filter-btn:nth-child(3):last-child),
.portfoli-section .portfolio-section__filter-content .portfolio-filters:has(.filter-btn:nth-child(2):last-child),
.portfoli-section .portfolio-section__filter-content .portfolio-filters:has(.filter-btn:nth-child(1):last-child) {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.portfoli-section .portfolio-section__filter-content .filter-btn {
  border: none;
  padding: 10px 20px;
  background-color: transparent;
  color: rgba(255, 255, 255, 0.3);
  border-radius: 11px;
  cursor: pointer;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  letter-spacing: 0.5px;
}
@media (max-width: 1200px) {
  .portfoli-section .portfolio-section__filter-content .filter-btn {
    white-space: nowrap;
    padding: 10px 15px;
  }
}
.portfoli-section .portfolio-section__filter-content .filter-btn:hover {
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.12)), to(rgba(153, 153, 153, 0.12)));
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(153, 153, 153, 0.12) 100%);
  color: #fff;
}
.portfoli-section .portfolio-section__filter-content .filter-btn.active {
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.12)), to(rgba(153, 153, 153, 0.12)));
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(153, 153, 153, 0.12) 100%);
  color: #fff;
}
.portfoli-section .portfolio-section__content {
  position: relative;
  z-index: 3;
}
.portfoli-section .portfolio-section__content .portfolio-section__title {
  position: relative;
  display: block;
  max-width: 400px;
  width: 100%;
  font-family: "ClashDisplay";
  font-size: 64px;
  font-weight: 700;
  line-height: 60px;
  letter-spacing: 0.02em;
  text-align: center;
  color: #ffffff;
  text-transform: uppercase;
  margin: 0 auto 24px;
  z-index: 2;
}
@media (max-width: 996px) {
  .portfoli-section .portfolio-section__content .portfolio-section__title {
    font-size: 44px;
    line-height: 44px;
    width: 320px;
  }
}
@media (max-width: 400px) {
  .portfoli-section .portfolio-section__content .portfolio-section__title {
    font-size: 35px;
    line-height: 35px;
  }
}
.portfoli-section .portfolio-section__content .portfolio-section__subtitle {
  display: block;
  max-width: 650px;
  width: 100%;
  font-family: "Inter";
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
  letter-spacing: -0.02em;
  text-align: center;
  color: rgba(255, 255, 255, 0.8);
  margin: 0 auto 68px;
}
@media (max-width: 996px) {
  .portfoli-section .portfolio-section__content .portfolio-section__subtitle {
    width: 450px;
  }
}
@media (max-width: 768px) {
  .portfoli-section .portfolio-section__content .portfolio-section__subtitle {
    width: 400px;
    margin: 0 auto 32px;
  }
}
@media (max-width: 576px) {
  .portfoli-section .portfolio-section__content .portfolio-section__subtitle {
    width: 300px;
  }
}
.portfoli-section .portfolio-section__content #portfolioGridJS {
  max-width: 1300px;
  margin: 0 auto;
  position: relative;
  z-index: 3;
}
.portfoli-section .portfolio-section__content .portfolio-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  margin-bottom: 20px;
}
@media (max-width: 1320px) {
  .portfoli-section .portfolio-section__content .portfolio-row {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: (1fr)[3];
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 20px;
  }
}
@media (max-width: 768px) {
  .portfoli-section .portfolio-section__content .portfolio-row {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
  }
}
.portfoli-section .portfolio-section__content .portfolio-item {
  height: 300px;
  background: #110824;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  margin-right: 20px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-box-flex: 0;
      -ms-flex: none;
          flex: none;
  border-radius: 20px;
}
@media (max-width: 1320px) {
  .portfoli-section .portfolio-section__content .portfolio-item {
    width: auto !important;
    height: auto !important;
    min-height: 300px;
    margin-right: 0;
  }
}
@media (max-width: 768px) {
  .portfoli-section .portfolio-section__content .portfolio-item {
    min-height: 400px;
  }
}
@media (max-width: 475px) {
  .portfoli-section .portfolio-section__content .portfolio-item {
    min-height: 238px;
  }
}
.portfoli-section .portfolio-section__content .portfolio-row .portfolio-item:last-child {
  margin-right: 0;
  height: 300px;
}
.portfoli-section .portfolio-section__content .portfolio-item.wide {
  width: 542px;
  height: 300px;
}
@media (max-width: 1320px) {
  .portfoli-section .portfolio-section__content .portfolio-item.wide {
    width: auto;
    height: auto;
  }
}
.portfoli-section .portfolio-section__content .portfolio-item.narrow {
  width: 328px;
  height: 300px;
}
@media (max-width: 1320px) {
  .portfoli-section .portfolio-section__content .portfolio-item.narrow {
    width: auto;
    height: auto;
  }
}
.portfoli-section .portfolio-section__content .portfolio-item img {
  max-width: 100%;
  display: block;
}
.portfoli-section .portfolio-section__content .portfolio-item h3 {
  padding: 10px;
  font-size: 18px;
  margin: 0;
}
.portfoli-section .load_more-btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-family: "Inter", sans-serif;
  text-transform: uppercase;
  font-size: 18px;
  font-weight: 700;
  line-height: 21.78px;
  text-align: center;
  text-decoration-line: underline;
  color: #ffffff;
  background-color: transparent;
  border: none;
  -webkit-box-shadow: none;
          box-shadow: none;
  margin: 0 auto;
  margin-top: 68px;
  cursor: pointer;
}
.portfoli-section .load_more-btn:hover {
  text-decoration: none;
}

/** Light Gallery **/
.custom-lightgallery .lg-backdrop {
  background: rgba(0, 0, 0, 0.7);
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  z-index: 999;
}

.lg-close::before {
  content: "";
  display: block;
  width: 30px;
  height: 30px;
  background-image: url("data:image/svg+xml,%3Csvg width='512' height='512' viewBox='0 0 512 512' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M286.17 256L420.42 121.75C422.401 119.769 423.972 117.417 425.044 114.829C426.117 112.241 426.668 109.466 426.668 106.665C426.668 103.863 426.117 101.089 425.044 98.501C423.972 95.9127 422.401 93.5609 420.42 91.58C418.439 89.599 416.087 88.0276 413.499 86.9555C410.911 85.8833 408.137 85.3315 405.335 85.3315C402.533 85.3315 399.759 85.8833 397.171 86.9555C394.583 88.0276 392.231 89.599 390.25 91.58L256 225.83L121.75 91.58C119.769 89.599 117.417 88.0276 114.829 86.9555C112.241 85.8833 109.466 85.3315 106.665 85.3315C103.863 85.3315 101.089 85.8833 98.501 86.9555C95.9127 88.0276 93.5609 89.599 91.58 91.58C89.599 93.5609 88.0276 95.9127 86.9555 98.501C85.8833 101.089 85.3315 103.863 85.3315 106.665C85.3315 109.466 85.8833 112.241 86.9555 114.829C88.0276 117.417 89.599 119.769 91.58 121.75L225.83 256L91.58 390.25C89.599 392.231 88.0276 394.583 86.9555 397.171C85.8833 399.759 85.3315 402.533 85.3315 405.335C85.3315 408.137 85.8833 410.911 86.9555 413.499C88.0276 416.087 89.599 418.439 91.58 420.42C93.5609 422.401 95.9127 423.972 98.501 425.044C101.089 426.117 103.863 426.668 106.665 426.668C109.466 426.668 112.241 426.117 114.829 425.044C117.417 423.972 119.769 422.401 121.75 420.42L256 286.17L390.25 420.42C392.231 422.401 394.583 423.972 397.171 425.044C399.759 426.117 402.533 426.668 405.335 426.668C408.137 426.668 410.911 426.117 413.499 425.044C416.087 423.972 418.439 422.401 420.42 420.42C422.401 418.439 423.972 416.087 425.044 413.499C426.117 410.911 426.668 408.137 426.668 405.335C426.668 402.533 426.117 399.759 425.044 397.171C423.972 394.583 422.401 392.231 420.42 390.25L286.17 256Z' fill='white'/%3E%3C/svg%3E%0A");
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  top: 50%;
  right: 10px;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  opacity: 0.5;
}

.lg-close:hover {
  opacity: 0.8;
}

.lg-prev, .lg-next {
  font-size: 32px;
  color: #fff;
  opacity: 1;
}

.lg-next::before {
  content: "";
  display: block;
  width: 40px;
  height: 40px;
  background-image: url("data:image/svg+xml,%3Csvg width='408' height='408' viewBox='0 0 408 408' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_314_244)'%3E%3Cpath d='M112.814 0L91.5659 21.178L273.512 203.718L91.5659 386.258L112.814 407.436L315.869 203.718L112.814 0Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_314_244'%3E%3Crect width='407.436' height='407.436' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  top: 50%;
  right: 10px;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  opacity: 0.5;
}

.lg-prev::before {
  content: "";
  display: block;
  width: 40px;
  height: 40px;
  background-image: url("data:image/svg+xml,%3Csvg width='408' height='408' viewBox='0 0 408 408' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_314_227)'%3E%3Cpath d='M315.869 21.178L294.621 0L91.5659 203.718L294.621 407.436L315.869 386.258L133.924 203.718L315.869 21.178Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_314_227'%3E%3Crect width='407.436' height='407.436' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  top: 50%;
  right: 10px;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  opacity: 0.5;
}

.lg-prev:after {
  opacity: 0;
}

.lg-toolbar .lg-close:after {
  opacity: 0;
}

.admin_portfolio_preview {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr)[3];
  grid-template-columns: repeat(3, 1fr);
  width: 1244px;
  margin: 0 auto;
  gap: 30px;
}
.admin_portfolio_preview img {
  width: 100% !important;
  height: 300px !important;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}