@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@300;400;500;600;700;800;900&family=Roboto:wght@300;400;500;700;900&display=swap");
.project-listing {
  margin: 100px 0px 135px; }
  @media screen and (max-width: 1700px) {
    .project-listing {
      margin: 80px 0px 115px; } }
  @media screen and (max-width: 1199px) {
    .project-listing {
      margin: 70px 0px 95px; } }
  @media screen and (max-width: 991px) {
    .project-listing {
      margin: 60px 0px 75px; } }
  @media screen and (max-width: 767px) {
    .project-listing {
      margin: 30px 0px; } }
  .project-listing .listing-title {
    font-family: "Barlow Condensed", sans-serif;
    font-size: 30px;
    line-height: 120%;
    padding-bottom: 54px;
    letter-spacing: 2.7px;
    color: #ff0000;
    text-transform: uppercase;
    opacity: 1; }
    @media screen and (max-width: 767px) {
      .project-listing .listing-title {
        padding-bottom: 15px;
        font-size: 15px; } }
  .project-listing .project-listing-section {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    justify-content: space-between; }
    .project-listing .project-listing-section .project-section-lists {
      cursor: pointer;
      position: relative;
      width: calc(100%/2 - 20px); }
      @media screen and (max-width: 991px) {
        .project-listing .project-listing-section .project-section-lists {
          width: 100%; } }
      .project-listing .project-listing-section .project-section-lists::after {
        content: '';
        position: absolute;
        top: 0px;
        left: 0px;
        opacity: 0;
        width: 100%;
        height: 100%;
        z-index: 0;
        background: linear-gradient(#000000, #000000);
        transition: all 0.5s ease-in-out; }
      .project-listing .project-listing-section .project-section-lists:hover .project-listing-content {
        opacity: 1; }
      .project-listing .project-listing-section .project-section-lists:hover::after {
        opacity: 0.6; }
      .project-listing .project-listing-section .project-section-lists.active {
        width: 100%; }
        .project-listing .project-listing-section .project-section-lists.active .project-listing-content,
        .project-listing .project-listing-section .project-section-lists.active .project-listing-image {
          display: none; }
        .project-listing .project-listing-section .project-section-lists.active::after {
          content: unset; }
        .project-listing .project-listing-section .project-section-lists.active .project-popup {
          display: block;
          cursor: auto; }
          .project-listing .project-listing-section .project-section-lists.active .project-popup .images {
            margin: 7px;
            position: relative; }
            @media screen and (max-width: 767px) {
              .project-listing .project-listing-section .project-section-lists.active .project-popup .images {
                margin: 4px; } }
          .project-listing .project-listing-section .project-section-lists.active .project-popup .close {
            display: block; }
            @media screen and (max-width: 767px) {
              .project-listing .project-listing-section .project-section-lists.active .project-popup .close {
                width: 30px;
                height: 30px;
                top: 35px; } }
            .project-listing .project-listing-section .project-section-lists.active .project-popup .close span {
              height: 2px;
              border-radius: 100px; }
      .project-listing .project-listing-section .project-section-lists.show_element::after {
        display: none; }
      .project-listing .project-listing-section .project-section-lists.show_element.active {
        display: block !important; }
        .project-listing .project-listing-section .project-section-lists.show_element.active .project-listing-image {
          display: none; }
      .project-listing .project-listing-section .project-section-lists .project-popup {
        display: none;
        position: relative;
        background-color: #000000;
        padding: 30px 0px; }
        .project-listing .project-listing-section .project-section-lists .project-popup .slider {
          padding-bottom: 10px;
          max-width: 1300px;
          margin: 0px auto; }
          .project-listing .project-listing-section .project-section-lists .project-popup .slider .images {
            max-height: 800px; }
            @media screen and (max-width: 1199px) {
              .project-listing .project-listing-section .project-section-lists .project-popup .slider .images {
                max-height: 700px; } }
            @media screen and (max-width: 991px) {
              .project-listing .project-listing-section .project-section-lists .project-popup .slider .images {
                max-height: 600px; } }
            @media screen and (max-width: 767px) {
              .project-listing .project-listing-section .project-section-lists .project-popup .slider .images {
                max-height: 400px; } }
            @media screen and (max-width: 575px) {
              .project-listing .project-listing-section .project-section-lists .project-popup .slider .images {
                max-height: 300px; } }
            .project-listing .project-listing-section .project-section-lists .project-popup .slider .images iframe {
              height: 800px;
              width: 100%; }
              @media screen and (max-width: 1199px) {
                .project-listing .project-listing-section .project-section-lists .project-popup .slider .images iframe {
                  height: 700px; } }
              @media screen and (max-width: 991px) {
                .project-listing .project-listing-section .project-section-lists .project-popup .slider .images iframe {
                  height: 600px; } }
              @media screen and (max-width: 767px) {
                .project-listing .project-listing-section .project-section-lists .project-popup .slider .images iframe {
                  height: 500px; } }
              @media screen and (max-width: 575px) {
                .project-listing .project-listing-section .project-section-lists .project-popup .slider .images iframe {
                  height: 300px; } }
            .project-listing .project-listing-section .project-section-lists .project-popup .slider .images img {
              height: 100%;
              width: 100%;
              object-fit: cover; }
        .project-listing .project-listing-section .project-section-lists .project-popup .tabing {
          position: relative;
          max-width: 1300px;
          margin: 0px auto; }
          .project-listing .project-listing-section .project-section-lists .project-popup .tabing .images {
            height: 200px;
            width: 100%; }
            @media screen and (max-width: 1199px) {
              .project-listing .project-listing-section .project-section-lists .project-popup .tabing .images {
                height: 150px; } }
            @media screen and (max-width: 991px) {
              .project-listing .project-listing-section .project-section-lists .project-popup .tabing .images {
                height: 120px; } }
            @media screen and (max-width: 767px) {
              .project-listing .project-listing-section .project-section-lists .project-popup .tabing .images {
                height: 90px; } }
            @media screen and (max-width: 575px) {
              .project-listing .project-listing-section .project-section-lists .project-popup .tabing .images {
                height: 50px; } }
            .project-listing .project-listing-section .project-section-lists .project-popup .tabing .images img {
              width: 100%;
              height: 100%;
              object-fit: cover; }
          .project-listing .project-listing-section .project-section-lists .project-popup .tabing .slick-arrow {
            background-color: transparent;
            position: absolute;
            top: 50%;
            left: 32px;
            transform: translate(0%, -50%);
            z-index: 2;
            font-size: 0px;
            border-right: solid 30px #8d8d8d;
            border-top: solid 33px transparent;
            border-bottom: solid 33px transparent;
            border-left: 0px; }
            @media screen and (max-width: 991px) {
              .project-listing .project-listing-section .project-section-lists .project-popup .tabing .slick-arrow {
                left: 20px; } }
            .project-listing .project-listing-section .project-section-lists .project-popup .tabing .slick-arrow.slick-next {
              right: 32px;
              left: unset;
              transform: translate(0px, -50%) rotate(180deg); }
              @media screen and (max-width: 991px) {
                .project-listing .project-listing-section .project-section-lists .project-popup .tabing .slick-arrow.slick-next {
                  right: 20px; } }
          .project-listing .project-listing-section .project-section-lists .project-popup .tabing .slick-list .slick-track {
            display: flex; }
        .project-listing .project-listing-section .project-section-lists .project-popup .navigate {
          padding: 30px 0px;
          position: relative;
          display: flex;
          justify-content: flex-end;
          align-items: center; }
          .project-listing .project-listing-section .project-section-lists .project-popup .navigate a {
            position: absolute;
            bottom: 0px;
            right: 0px;
            display: flex;
            align-items: center;
            gap: 20px;
            font-family: "Barlow Condensed", sans-serif;
            color: #fff;
            text-decoration: underline;
            font-size: 30px;
            line-height: 120%;
            font-weight: 300s;
            letter-spacing: 2.7px;
            text-transform: uppercase; }
            @media screen and (max-width: 1700px) {
              .project-listing .project-listing-section .project-section-lists .project-popup .navigate a {
                font-size: 25px; } }
            @media screen and (max-width: 1199px) {
              .project-listing .project-listing-section .project-section-lists .project-popup .navigate a {
                font-size: 20px; } }
            @media screen and (max-width: 767px) {
              .project-listing .project-listing-section .project-section-lists .project-popup .navigate a {
                gap: 5px; } }
            @media screen and (max-width: 767px) {
              .project-listing .project-listing-section .project-section-lists .project-popup .navigate a {
                font-size: 10px;
                line-height: 140%;
                letter-spacing: 0.9px; } }
            .project-listing .project-listing-section .project-section-lists .project-popup .navigate a.prev_btn {
              right: unset;
              left: 0px; }
              .project-listing .project-listing-section .project-section-lists .project-popup .navigate a.prev_btn span {
                transform: rotate(180deg); }
            .project-listing .project-listing-section .project-section-lists .project-popup .navigate a span {
              width: 75px;
              height: 25px;
              display: flex;
              background-color: #ff0000;
              clip-path: polygon(0 10px, calc(100% - 15px) 10px, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, calc(100% - 15px) calc(100% - 10px), 0 calc(100% - 10px)); }
              @media screen and (max-width: 767px) {
                .project-listing .project-listing-section .project-section-lists .project-popup .navigate a span {
                  width: 30px;
                  height: 17px;
                  clip-path: polygon(0 7px, calc(100% - 15px) 7px, calc(100% - 15px) 0, 70% 50%, calc(100% - 15px) 100%, calc(100% - 15px) calc(100% - 7px), 0 calc(100% - 7px)); } }
        .project-listing .project-listing-section .project-section-lists .project-popup .close {
          display: none;
          position: absolute;
          top: 45px;
          right: 0px;
          width: 50px;
          height: 50px;
          cursor: pointer; }
          .project-listing .project-listing-section .project-section-lists .project-popup .close:hover span:first-child {
            transform: rotate(225deg); }
          .project-listing .project-listing-section .project-section-lists .project-popup .close:hover span:last-child {
            transform: rotate(135deg); }
          .project-listing .project-listing-section .project-section-lists .project-popup .close span {
            position: absolute;
            transition: all 0.5s ease-in-out;
            top: 50%;
            left: 0px;
            width: 100%;
            height: 4px;
            border-radius: 10px;
            background: #ff0000; }
            .project-listing .project-listing-section .project-section-lists .project-popup .close span:first-child {
              transform: translate(0%, -50%) rotate(45deg); }
            .project-listing .project-listing-section .project-section-lists .project-popup .close span:last-child {
              transform: translate(0%, -50%) rotate(-45deg); }
        .project-listing .project-listing-section .project-section-lists .project-popup h2 {
          width: 42%;
          font-family: "Barlow Condensed", sans-serif;
          font-weight: 300;
          font-size: 66px;
          line-height: 120%;
          color: #ff0000;
          text-transform: uppercase; }
          @media screen and (max-width: 1700px) {
            .project-listing .project-listing-section .project-section-lists .project-popup h2 {
              font-size: 56px;
              width: 62%; } }
          @media screen and (max-width: 1199px) {
            .project-listing .project-listing-section .project-section-lists .project-popup h2 {
              font-size: 46px;
              width: 72%; } }
          @media screen and (max-width: 767px) {
            .project-listing .project-listing-section .project-section-lists .project-popup h2 {
              font-size: 33px;
              width: 92%; } }
        .project-listing .project-listing-section .project-section-lists .project-popup .project-content {
          padding: 30px 0px;
          display: flex;
          flex-direction: column;
          gap: 30px; }
          @media screen and (max-width: 767px) {
            .project-listing .project-listing-section .project-section-lists .project-popup .project-content {
              gap: 20px; } }
          .project-listing .project-listing-section .project-section-lists .project-popup .project-content p {
            width: 51%;
            font-size: 28px;
            font-weight: 300;
            line-height: 120%;
            text-transform: uppercase;
            color: #fff;
            font-family: "Barlow Condensed", sans-serif; }
            @media screen and (max-width: 1700px) {
              .project-listing .project-listing-section .project-section-lists .project-popup .project-content p {
                width: 55%; } }
            @media screen and (max-width: 1450px) {
              .project-listing .project-listing-section .project-section-lists .project-popup .project-content p {
                width: 65%; } }
            @media screen and (max-width: 1199px) {
              .project-listing .project-listing-section .project-section-lists .project-popup .project-content p {
                width: 61%; } }
            @media screen and (max-width: 1199px) {
              .project-listing .project-listing-section .project-section-lists .project-popup .project-content p {
                font-size: 21px;
                width: 75%; } }
            @media screen and (max-width: 767px) {
              .project-listing .project-listing-section .project-section-lists .project-popup .project-content p {
                width: 85%; } }
      .project-listing .project-listing-section .project-section-lists .project-listing-image {
        font-size: 0px; }
      .project-listing .project-listing-section .project-section-lists .project-listing-content {
        opacity: 0;
        position: absolute;
        z-index: 1;
        left: 65px;
        bottom: 62px;
        transition: all 0.5s ease-in-out; }
        @media screen and (max-width: 767px) {
          .project-listing .project-listing-section .project-section-lists .project-listing-content {
            left: 22px;
            bottom: 24px; } }
        .project-listing .project-listing-section .project-section-lists .project-listing-content .project-title h3 {
          font-family: "Barlow Condensed", sans-serif;
          font-weight: 300;
          font-size: 36px;
          line-height: 100%;
          text-align: left;
          letter-spacing: 4.14px;
          color: #fff;
          text-transform: uppercase;
          padding-bottom: 40px; }
          @media screen and (max-width: 767px) {
            .project-listing .project-listing-section .project-section-lists .project-listing-content .project-title h3 {
              font-size: 20px;
              line-height: 100%;
              letter-spacing: 1.8px;
              padding-bottom: 20px; } }
        .project-listing .project-listing-section .project-section-lists .project-listing-content .label a {
          font-family: "Barlow Condensed", sans-serif;
          font-size: 30px;
          font-weight: 100;
          line-height: 120%;
          letter-spacing: 2.7px;
          text-decoration: underline;
          text-decoration-thickness: 2px;
          color: #fff;
          text-transform: uppercase; }
          @media screen and (max-width: 767px) {
            .project-listing .project-listing-section .project-section-lists .project-listing-content .label a {
              font-size: 15px;
              letter-spacing: 1.35px;
              text-decoration: underline;
              text-decoration-thickness: 1px; } }

/*# sourceMappingURL=project-listing.css.map */