/* Mobiles */
@media (max-width: 480px) {
  .name-text {
    font-size: 1.5rem;
  }

  .hello-text {
    font-size: 1rem;
  }

  .text-profession {
    font-size: 0.85rem;
  }

  .button {
    width: 100%;
    padding: 12px;
    font-size: 1rem;
  }

  .stats {
    flex-direction: column;
    align-items: center;
  }

  .box {
    width: 80%;
    margin-bottom: 15px;
  }

  .text2 {
    padding: 10px;
  }

  /* intro section 2 */
  .subcontainer1-text {
    font-size: 1.5rem;
  }
  .subcontainer1 {
    left: 0px;
  }

  .buttons {
    flex-direction: column;
    gap: 15px;
    align-items: center;
  }

  .project,
  .cv {
    width: 80%;
    font-size: 1rem;
  }

  .subcontainer2 h3 {
    font-size: 1.3rem;
  }
  .subcontainer1-text {
    font-size: 1.5rem;
    padding-top: 20px;
  }

  .subcontainer2 p {
    font-size: 0.7rem;
  }
  .high-lights-subcontainer2 {
    display: none;
  }

  /* section3 */
  .work-process-maincontainer {
    gap: 40px;
  }

  .work-process-subcontaine1,
  .work-process-subcontaine2 {
    flex-direction: column;
    align-items: center;
  }

  .step-box {
    width: 90%;
    max-width: none;
  }
  #step-box1,
  #step-box2,
  #step-box3,
  #step-box4 {
    width: 90%;
  }

  .step-icon {
    font-size: 30px;
  }

  .step-box h3 {
    font-size: 16px;
  }

  .step-box p {
    font-size: 13px;
  }
  #step-box1 {
    left: 0px;
  }
  #step-box2 {
    left: 0px;
    top: 20px;
  }
  #step-box3 {
    top: 137px;
    left: 0px;
  }
  #step-box4 {
    left: 0px;
    top: 165px;
  }
  /* section4 high-lights */
  .high-lights {
    top: 400px;
  }
  .high-lights-maincontainer {
    flex-direction: column;
    align-items: center;
  }
  .high-lights-maincontainer {
    flex-direction: column;
    align-items: center;
  }
  .container1,
  .container2 {
    width: 100%;
  }

  .step-box {
    width: 100%;
    padding: 20px 15px;
  }

  .step-box h3 {
    font-size: 16px;
  }

  .step-box p {
    font-size: 13px;
  }

  .high-lights-subcontainer2 h1 {
    font-size: 1.5rem;
  }
  .container2 {
    margin-top: 80px;
  }
  .high-lights-subcontainer2 {
    text-align: center;
    top: 1433px;
    right: 45px;
    width: 75%;
  }
  .high-lights-subcontainer2 p {
    text-align: justify;
    padding-top: 18px;
  }

  /* section6 moments */
  .moments-container {
    flex-direction: column;
    align-items: center;
    height: 550px;
  }
  .moments {
    top: 493px;
  }
  .image-container img {
    width: 100%;
    height: 133%;
    border-radius: 14px 10px 10px 14px;
  }
  .moments-textcontainer {
    top: 294px;
    width: 100%;
    left: 12px;
  }
  .read-more {
    width: 45%;
  }

  /* section 7 */
  .memories {
    top: 446px;
  }
  .memories-container {
    flex-direction: column;
    align-items: center;
  }
  .text-container {
    width: 100%;
    left: 0px;
  }
  .cta-button {
    width: 52%;
  }
  .image-wrapper {
    width: 100%;
  }
  .moments-text,
  .memories-subheading {
    font-size: 1.2rem;
  }

  /* section 8 */
  .projects-container {
    flex-direction: column;
    height: 555px;
    width: 100%;
  }
  .projects {
    top: 417px;
  }
  .project-containertext h1 {
    font-size: 1.5rem;
  }
  .project-containertext p {
    font-size: 0.8rem;
    width: 76%;
  }

  .project-containertext {
    left: 62px;
    top: 384px;
    width: 81%;
  }
  .get-btn {
    width: 46%;
    height: 39px;
  }
  .project-btn {
    width: 40%;
  }
  .bottom {
    margin-top: 30px;
  }
  .hero {
    padding-top: 74px;
  }
}

/* Tablets and below */
@media (max-width: 768px) {
  /* hero section 1 */
  .container {
    flex-direction: column-reverse;
    align-items: center;
    gap: 30px;
  }

  .text2 {
    width: 90%;
    padding: 20px;
  }

  .name-text {
    font-size: 2rem;
  }

  .text-profession {
    font-size: 0.95rem;
  }
  /* intro section 2 */
  .introduction-maincontainer {
    flex-direction: column;
    align-items: center;
  }

  /* .subcontainer1,
  .subcontainer2 {
    width: 100%;
    text-align: center;
  } */
  .subcontainer1,
  .subcontainer2 {
    width: 89%;
    text-align: center;
    left: 19px;
  }

  /* .subcontainer1-text {
    font-size: 1.5rem;
    padding-top: 122px;
  } */

  .buttons {
    justify-content: center;
  }

  /* section3 */

  /* section3 */

  .work-process-maincontainer {
    gap: 40px;
  }

  .work-process-subcontaine1,
  .work-process-subcontaine2 {
    flex-direction: column;
    align-items: center;
  }
  .work-process-subcontaine1,
  .work-process-subcontaine2 {
    justify-content: center;
  }
  #step-box2 {
    left: 0px;
    top: 20px;
  }
  #step-box3 {
    top: 137px;
    left: 0px;
  }
  #step-box4 {
    left: 0px;
    top: 165px;
  }
  .high-lights-subcontainer2 {
    display: none;
  }

  /* section 4 */
  .high-lights-maincontainer {
    flex-direction: column;
    align-items: center;
  }

  .high-lights-subcontainer1 {
    justify-content: center;
    flex-direction: column;
  }

  .high-lights-subcontainer2 {
    text-align: center;
    /* width: 56%; */
  }
  /* .container2{
    margin-top: 80px;
  } */
  .projects-container {
    flex-direction: column;
  }
  /* .project-containertext {
    top: 842px;
    left: 16px;
    width: 100%;
  } */

  /* .moments-textcontainer {
    top: 50px;
    
    bottom: 20px;
  }
  .moments-container {
    width: 132%;
  }
  .moments-heading{
    font-size: 1.5rem;
  }
  .moments-text{
    font-size: 1rem;
  }
  .text-container{
    left: 0px;

  } */
  /* .bottom{
    margin-top: 538px;

  } */
  /* .project-containertext{
    display: none;
   } */
}
@media (min-width: 481px) and (max-width: 769px) {
  .high-lights-maincontainer {
    margin-left: 160px;
    margin-top: 80px;
  }
  .container2 {
    margin-top: 90px;
  }
  .moments {
    width: 100%;
    height: 100%;
  }
  .moments-container {
    width: 100%;
    height: 282px;
  }
  .image-container img {
    width: 60%;
  }
  .moments-textcontainer {
    right: 11px;
  }
  .text-container {
    left: 0px;
  }
  .projects-container {
    width: 100%;
    height: 337px;
  }
  .project-containerimg img {
    width: 45%;
    height: 100%;
  }
  .project-containertext {
    top: 79px;
    left: 366px;
  }
  .get-btn {
    width: 39px;
  }
  .get-btn,
  .project-btn {
    width: 40%;
  }
  .projects {
    top: 442px;
  }
  .bottom {
    margin-top: 47px;
  }
  .subcontainer1-text {
    margin-top: 112px;
  }
  .hero {
    padding-top: 74px;
  }
}

@media (min-width: 770px) and (max-width: 1024px) {
  #step-box3 {
    left: 175px;
  }
  #step-box4 {
    left: 250px;
  }
  .portfolio {
    top: 362px;
  }
  .moments-textcontainer {
    top: 18px;
  }
  .project-containertext {
    left: 538px;
  }
  .text-container{
    left: 40px;
  }
}