@media (max-width:1120px) {
  .hero .container{
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
  .hero .container .top ,
   .hero .container .btns,
   ul{
    margin: auto;
  }
.hero .container .text h1 span {
  display: inline;
}
  .hero .container .image{
    /* width: 400px; */
  }
  .common .con{
    grid-template-columns: repeat(2 , 1fr);
  }
.howWork .con .box .arrow{
  display: block;
}
}
@media (max-width:820px) {
  .cv-preview{
  overflow-x: scroll;
  /* width: 80%; */
  margin: auto;
}
nav .container .end .bars{
  display: block;
}
nav .container .links ul{
  flex-direction: column;
}
nav .container .links{
  position: absolute;
  top: 100%;
  background: var(--surface);
  right: 0;
  width: 100%;
  box-shadow: 0 5px 5px 1px var(--shadow);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
  max-height: 0;
  transition: 0.5s linear;
}
nav .container .links.active{
  padding-bottom: 20px;
  overflow: visible;
  max-height: 800px;
}
  .hero .container .text h1{
    font-size: 48px;
  }

}
@media (max-width:665px) {
  .data .container .card-body,
  .templates .container,
  .footer-content,
  .common .con{
    grid-template-columns: 1fr;
  }
  .bulid .container{
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    text-align: center;
  }
  .container {
    width: 90%;
}
  .hero .container .text h1{
    font-size: 36px;
  }
  .bulid .container .text h3{
    font-size: 28px;
  }
.hero .container .text .btns,
.hero .container .text ul{
  flex-direction: column;
  gap: 15px;
}
}