.portheading {
  text-align: center;
  margin-top: 80px;
}
.portfolio {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 30px;
}
.subdiv {
  text-align: center;
  margin: 20px;
  flex: 0 0 100%;
  position: relative;
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.1); /* Box shadow */
  overflow: hidden; /* Hide overflow to prevent content from spilling out during transition */
  transition: transform 0.3s; /* Add transition for hover effect */
  border-radius: 20px;
}

.subdiv:hover {
  transform: scale(1.1); /* Hover effect - zoom in the entire .subdiv */
}

.menu-img {
  border-radius: 0px;
  width: 100%;
  height: auto;
}

.menu-link {
  text-decoration: none;
  color: inherit;
}

.menu-link h4 {
  margin-top: 10px; /* Adjust the top margin for better spacing */
}
.btn-container{
  height: 7rem;
  width: 100vw;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: transparent;
  display: flex;
  
}
.section-btn{
  height: 6rem;
  width: 15vw;
  background-color: #C87E4F;
  outline: none;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  cursor: pointer;
  border-radius: 30px;
}
.section-btn h3{
  padding: 15px; 
  color: white;
}
@media screen and (min-width: 768px) {
  .subdiv {
      flex: 0 0 48%;
  }
  .section-btn{
    height:6rem;
    width: 20vw;
    background-color: #C87E4F;
    outline: none;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    cursor: pointer;
    border-radius: 30px;
  }
}
@media screen and (max-width: 490px) {
  .section-btn{
    height:6rem;
    width: 40vw;
    background-color: #C87E4F;
    outline: none;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    cursor: pointer;
    border-radius: 30px;
  }

}
@media screen and (max-width: 600px) {
  .section-btn{
    height:6rem;
    width: 40vw;
    background-color: #C87E4F;
    outline: none;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    cursor: pointer;
    border-radius: 30px;
  }

}

@media screen and (min-width: 992px) {
  .subdiv {
      flex: 0 0 30%;
  }
}