.hero-content {
 background-color: rgb(247, 245, 245);
}

/*-----------------*/
.project-section {
 display: grid;
 grid-template-columns: 1fr;
 place-items: center;
 padding: 2rem;
 gap: 2rem;
}

.projectsection-card {
    width: 98%;
    height: 90%;
    border: 1px solid rgb(219, 211, 211);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.18);   
    padding-bottom: 2rem;
    transition: transform 0.6s ease-in-out;
}

.projectsection-card:hover {
  transform: scale(1.1, 1.1);
}


.projectsection-card img {
    width: 100%;
}

.project-name {
    font-size: 1.2rem;
    margin-left: 0.6rem;
    font-weight: 600;
    font-family: 'Monteserrat', sans-serif;
    margin-bottom: 0;
}

.project-location, .project-time {
    font-size: 0.837rem;
    margin-top: 0.5rem;
    margin-left: 1rem;
}

.project-description {
    font-size: 0.937rem;
    margin-left: 0.5rem;
    color: rgb(139, 127, 127);
}

.client-name {
    font-size: 0.837rem;
    margin-left: 0.5rem;
    color: rgb(139, 127, 127);
    margin-bottom: 2rem;
}

.project-button {
 border: 1px solid black;
 padding: 5px 25px 5px 25px;
 text-decoration: none;
 color: black;
 border-radius: 4rem;
 font-size: 0.937rem;
 margin-left: 1rem;
}




/*Responsive Design*/
@media (min-width: 480px) { 
}

/* Large phones and small tablets */
@media (min-width: 600px) { 
  .project-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

/* Tablets portrait */
@media (min-width: 768px) {
  
}

/* Tablets landscape and small laptops */
@media (min-width: 992px) {
   .about-our-company {
   padding-top: 0rem;
  }

  .about-company-card {
   padding-bottom: 3rem;
  }

  .project-section {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
  }
}

/* Desktops */
@media (min-width: 1200px) {
   .project-section {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}

/* Large desktops */
@media (min-width: 1440px) {
  
}

/* Extra large screens */
@media (min-width: 1920px) {
  
}