@import './header.css';
@import './footer.css';
@import './partials/products.css';

.banner__container {
          align-items: center;
          display: flex;
          justify-content: space-between;
          padding-bottom: 30px;
}

.banner__container .banner__image {
          flex: 1.8
}

.banner__container img {
          width: 100%;
}

.banner__text {
          flex: 1;
          margin-left: 20px;
          max-width: 527px;
          /* background-color: #fff;
          border-radius: 5px;
          padding: 50px 30px;
          box-shadow: rgb(149 157 165 / 20%) 0px 8px 24px */
}
.actions a {
          padding: 10px;
}

.projects {
          background-color: #f1f1f1a8;
          padding: 30px 0;
}
.projects h4 {
          font-size: 40px;
          margin-bottom: 30px;
}
p.inprogress-poject-description {
          max-width: 790px;
          text-align: center;
          margin: auto;
          color: rgb(55 65 81);
          line-height: 27px;
          margin-bottom: 30px;
}
.current-project__image {
          max-width: 1000px;
          margin: auto;
          background-color: #FFF;
          border-radius: 20px;
          margin-top: 10px;
          padding: 30px;
          box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}
.current-project__image img {
          width: 100%;
          border-radius: 20px;
          height: 100%;
          object-fit: contain;
          max-height: 500px;
}
.more-projects {
          max-width: 1000px;
          margin: auto;
          margin-top: 40px;
}
.project {
          background-color: #fff;
          border-radius: 8px;
          padding: 20px;
          height: 380px;
          max-width: 320px;
          position: relative;
          transition: box-shadow 500ms;
}

.more-projects a {
          text-decoration: none;
}
.more-projects a:hover .project {
          box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

.project-image {
          width: 60px;
          height: 60px;
          margin: auto;
}
.project-image  img {
          width: 100%;
          height: 100%;
}

.project-name {
          color: #333;
          font-weight: bold;
          font-size: 20px;
          margin: 10px 0;
          text-align: center;
}

.project-description {
          color: rgb(107 114 128);
          line-height: 30px;
}
.project-footer {
          position: absolute;
          width: calc(100% - 40px);
          bottom: 20px
}
.statusTitle {
          color: #0d6efd;
          margin-left: 5px;
}

.readMore {
          color: #0d6efd;
}

@media screen and (max-width: 990px)  {
          .banner__container {
                    display: block !important;
          }
          .banner__container .banner__image {
                    height: 30vh;
          }
          .banner__container img {
                    height: 100%;
                    object-fit: cover;
          }
          .banner__text {
                    margin-left: auto;
                    max-width: unset;
                    max-width: 720px;
          }
          .jumbotron-heading {
                    margin-top: 10px;
          }
}