@media screen and (max-width: 769px) {
  .container {
    width: 95%;
  }
  .hero-banner {
    background-image: none;
  }
  .hero-banner img {
    display: block;
    width: 100%;
    position: absolute;
    top: 0;
    z-index: -1;
  }
  header {
    padding: 10px 14px;
  }
  .overlay{
    width: 100%;
    height: 100vh;
    position: absolute;
    background-color: rgba(0, 0, 0, 0.6);
    top: 0;
    left: 0;
    display: none;
  }
  .active-overlay{
    display: block !important;
  }
  nav {
    position: fixed;
    bottom: 0;
    width: 100%;
    margin-bottom: -500px;
    left: 0;
    text-align: center;
    background-color: white;
    padding: 40px 0;
    transition: all 0.3s;
    display: none;
  }
  nav a {
    display: block;
    width: 100%;
    height: 40px;
    position: relative;
    top: 10px;
    color: #000 !important;
  }

  .close-btn {
    display: block;
    box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
    /*border: 1px solid #cccc;*/
    border-radius: 50%;
    width: 40px;
    height: 40px;
    border: none;
    color: #ccc;
    margin: 10px auto;
    border: 1px solid #ccc;
  }
  .open-nav {
    display: block;
  }
  .open-nav:hover nav {
    bottom: 0 !important;
  }

  .active{
    display: block !important;
    margin-bottom: 0;
    transition: all 0.3s;
  }

  .hero-banner .content{
    margin-top: 70px;
  }
  .hero-banner .content h1{
    font-size: 35px;
    width: 100%;
  }

  .content br{
    display: none !important;
  }


  .about-section{
    padding: 50px 0;
}

.image-container{
    margin-right: auto;
}

.image-container,.image-content{
    width: 100%;
}


.image-content{
    padding: 30px 20px;
    margin: auto;
    margin-top: 0px;
    background-color: #fff;
    z-index: 1;
    position: relative;
}
.content-container{
    text-align: center;
}
.content-container h2{
    font-size: 25px;
    font-family: 'Josefin Sans', sans-serif;
    color: #111;
    margin-bottom: 20px;
}
.content-container p{
    color:rgb(112, 112, 112);
    font-size: 15px;
    font-family: 'Josefin Sans', sans-serif;

}
.grid-item{
  width: 100%;
}
.desk-img{
  display: none;
}
.grid-item span{
  bottom: 14%;
  left: 10%;
  transform: translateX(-10%);
}
.creation-Hd{
  display: block;
  padding-top: 0;
}
.creation-Hd h1{
  text-align: center;
}
.creation-Hd a{
  display: none;
}
.btn-div{
  text-align: center;
  display: block;
}
.mob-img{
  display: block;
}
.mob-see-btn button{
  border: none;
  padding: 10px 30px;
  background-color: transparent;
  border: 2px solid #111;
  font-size: 15px;
  cursor: pointer;
  margin: 20px 0;
}
.our-creation{
  padding-bottom: 30px;
}

.content-wrapper{
  display: block;
  text-align: center;
}
.footer-section .right-box{
  text-align: center;
}
.footer-section .useful-links a{
  display: block;
  padding: 10px 16px;
}
.left-box{
  margin-bottom: 20px;
}
}