@media(max-width:768px){
  .header-flex{
    flex-direction:column;
    text-align:center;
  }
  .main-nav ul{
    flex-direction:column;
  }
}
@media(max-width:768px){
  .hero,
  .slide-bg{
    height:45vh;
  }

  .slide-content{
    left:5%;
    bottom:15%;
  }

  .slide-content h1,
  .slide-content h2{
    font-size:1.5rem;
  }
}

@media(max-width:768px){
  .contact-grid{
    grid-template-columns:1fr;
  }
}

@media (max-width: 768px) {
  .hero .slide-content {
    left: 5%;
    right: 5%;
    padding: 15px;
  }

  .services-grid,
  .portfolio-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {

  .main-nav ul {
    flex-direction: column;
    text-align: center;
  }

  .main-nav ul li {
    width: 100%;
  }

  .main-nav ul li .submenu {
    position: static;
    display: none;
  }

  .main-nav ul li:hover .submenu {
    display: block;
  }
}