:root {
  --uc-index-project-bg: #191919;
  --uc-index-project-color: #ffffff;
  --uc-index-project-bg-btn: #f9612b;
  --uc-index-project-color-btn: #ffffff; }

@media (min-width: 992px) {
  .urbanconstruct-index-about-2 .container {
    max-width: 100%;
    padding-left: 20px;
    padding-right: 20px; } }

@media (min-width: 1200px) {
  .urbanconstruct-index-about-2 .container {
    max-width: 1170px; } }

@media (min-width: 1366px) {
  .urbanconstruct-index-about-2 .container {
    max-width: 1290px; } }

@media (min-width: 1600px) {
  .urbanconstruct-index-about-2 .container {
    max-width: 1410px; }
  .urbanconstruct-index-about-2 .container-fluid {
    max-width: 1800px; } }

.urbanconstruct-index-about-2 .button {
  color: var(--uc-index-project-color-btn);
  background-color: var(--uc-index-project-bg-btn); }

.urbanconstruct-index-about-2 {
  padding: 80px 0;
  background: var(--uc-index-project-bg);
  color: var(--uc-index-project-color); }
  .urbanconstruct-index-about-2 .heading-title .title2 span,
  .urbanconstruct-index-about-2 .heading-title .desc {
    opacity: 0.6; }
  .urbanconstruct-index-about-2 .heading-title .btn-more {
    margin-top: 30px; }
  .urbanconstruct-index-about-2 .list-project {
    margin-top: 40px; }
    .urbanconstruct-index-about-2 .list-project .project-item .detail {
      margin-top: 20px;
      color: var(--uc-index-project-color); }
      .urbanconstruct-index-about-2 .list-project .project-item .detail .title {
        font-size: 20px;
        margin-bottom: 6px; }
      .urbanconstruct-index-about-2 .list-project .project-item .detail .desc {
        opacity: 0.6; }
  @media (min-width: 1200px) {
    .urbanconstruct-index-about-2 .heading-title.heading--1 {
      max-width: 65%; }
    .urbanconstruct-index-about-2 .list-project {
      display: flex;
      gap: 10px;
      padding: 0 50px; }
      .urbanconstruct-index-about-2 .list-project .project-item {
        transition: all 0.5s ease-in-out; }
        .urbanconstruct-index-about-2 .list-project .project-item .img {
          height: 730px;
          background-image: var(--bg-img);
          background-size: cover;
          background-position: center;
          border-radius: 16px;
          overflow: hidden; }
          .urbanconstruct-index-about-2 .list-project .project-item .img img {
            display: none; }
      .urbanconstruct-index-about-2 .list-project.item--1 .project-item {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%; }
      .urbanconstruct-index-about-2 .list-project.item--2 .project-item {
        -ms-flex: 0 0 calc(50% - 5px);
        flex: 0 0 calc(50% - 5px);
        max-width: calc(50% - 5px); }
        .urbanconstruct-index-about-2 .list-project.item--2 .project-item.no-active {
          -ms-flex: 0 0 20%;
          flex: 0 0 20%;
          max-width: 20%; }
        .urbanconstruct-index-about-2 .list-project.item--2 .project-item.active {
          -ms-flex: 0 0 calc(80% - 10px);
          flex: 0 0 calc(80% - 10px);
          max-width: calc(80% - 10px); }
      .urbanconstruct-index-about-2 .list-project.item--3 .project-item {
        -ms-flex: 0 0 calc(100% / 3 - 7px);
        flex: 0 0 calc(100% / 3 - 7px);
        max-width: calc(100% / 3 - 7px); }
        .urbanconstruct-index-about-2 .list-project.item--3 .project-item.no-active {
          -ms-flex: 0 0 15%;
          flex: 0 0 15%;
          max-width: 15%; }
        .urbanconstruct-index-about-2 .list-project.item--3 .project-item.active {
          -ms-flex: 0 0 calc(70% - 20px);
          flex: 0 0 calc(70% - 20px);
          max-width: calc(70% - 20px); } }
  @media (max-width: 1199px) {
    .urbanconstruct-index-about-2 .list-project .project-item .img {
      border-radius: 16px;
      overflow: hidden; }
    .urbanconstruct-index-about-2 .list-project .project-item:not(:last-child) {
      margin-bottom: 15px; } }
  @media (max-width: 767px) {
    .urbanconstruct-index-about-2 {
      padding: 40px 0; }
      .urbanconstruct-index-about-2 .list-project {
        margin-top: 20px; }
        .urbanconstruct-index-about-2 .list-project .project-item .detail {
          margin-top: 10px; }
          .urbanconstruct-index-about-2 .list-project .project-item .detail .title {
            font-size: 16px; } }