@media (min-width: 1920px) {
  .how-it-works {
    margin-top: -193px;
  }
}

@media (max-width: 1440px) {
  .hero > .hero-image-left {
    max-width: clamp(200px, 22vw, 375px);
  }
  .hero > .hero-image-right {
    max-width: clamp(300px, 31vw, 510px);
  }
  .hero > .hero-content {
    width: 100%;
    padding-top: 100px;
  }
  .how-it-works {
        background-size: cover;
    }
}

@media (max-width: 1367px) {
  .how-it-works {
    margin-top: -140px;
  }
      .hero > .hero-image-right {
        max-width: clamp(300px, 29vw, 510px);
    }
        .hero > .hero-image-left {
        max-width: clamp(200px, 22vw, 375px);
    }
    .hero {
    padding-top: 0;
}
  .scroll-down {
    height: 68px;
  }
}


@media (max-width:1280px) {
    .hero > .hero-content {
        width: 65%;
        padding-top: 65px;
    }
        .hero > .hero-image-left {
        max-width: clamp(200px, 18vw, 375px);
    }
        .hero > .hero-image-right {
        max-width: clamp(300px, 22vw, 510px);
    }
        .how-it-works {
        margin-top: -92px;
        background-position-x: 100%;
    }
    .navbar ul {
    gap: clamp(15px,3vw,35px);
}

.middle--header {
    padding-right: 20px;
    padding-left: 20px;
    gap: 10px;
}
.right--box, .middle--header > .logo {
    width: 120px;
}
}
@media (max-width:1024px) {
    div#file_name_display{
        max-width: 60%;
    }
    .right--box {
    display: none;
}
    .middle--header {
    justify-content: space-between;
    gap: 10px;
}
.header {
    position: fixed;
    width: 100%;
    top: 0px;
    background: #faf8f4;
            z-index: 999;
}

.nav-links > li > a {
    width: 100%;
    background: #faf8f4;
    display: block;
    padding: 18px 10px;
    border-bottom: 1px solid #ccc;
    font-size: 16px;
}
    .menu-toggle {
    display: block;
  }
  .nav-links {
    display: none !important;
        flex-direction: column;
        gap: 0px !important;
        position: absolute;
        top: 100%;
        right: 0px;
        background: #faf8f4;
        padding: 0px;
        width: 100%;
        border-top: 1px solid;
  }
   .nav-links.active {
    display: flex !important;
  }
    .hero > .hero-image-left {
    display: none;
}

.scroll-down {
    display: none;
}
.hero {
    flex-direction: column;
    padding: 20px;
            padding-top: 173px;
}
.hero > .hero-image-right > img {
    margin-top: 25px;
}

.hero > .hero-content {
    width: 100%;
    padding-top: 40px;
}

.hero > .hero-image-right {
    max-width: 100%;
    margin: 0;
}

.steps {
    grid-template-columns: 1fr;
}

.how-it-works {background-position-x: 50%;padding-top: 250px;margin-top: -200px;}

.steps > .step:nth-child(2) {
    border: none;
}

.steps .step {
    padding: 0px;
}

.hero > .hero-content > p {
    max-width: 100%;
    font-size: 18px;
}
.upload-info {
    font-size: 12px;
    gap: 5px;
}
.create-share--container {flex-direction: column;gap: 50px;}

.create-share--container > .form--video {
    padding: 0;
    border: none;
    width: 100%;
}

.proccess--video--message p {
    font-size: 14px;
}

.bg--video > .share--video > button {
    padding: 5px 10px;
    font-size: 18px;
    min-height: auto;
    
}

.bg--video > .share--video > button > img {
    width: 20px;
}

.create-share--container > .created--video {
    width: 100%;
    padding: 0;
    max-width: 527px;
    margin: 0 auto;
}
.video--view--container {
    width: 100%;
    padding: 0;
    max-width: 527px;
    margin: 0 auto;
}

.bg--video > img {
    max-width: 100%;
    transform: scaleY(0.9);
}

.video--view--container .priview--video {
    left: 45%;
}

.bg--video:before {
    left: 45%;
}

.tribute-form > .col-2 {
    flex-direction: column;
}

.add--address .gift--container {
    flex-direction: column;
}

.add--address .gift--container > .content--gift > h2 {
            text-align: center;
        font-size: 22px;
        line-height: 1.2;
        margin-bottom: 10px;
}

.add--address .gift--container > .button--gift {
    margin: 0 auto;
}

.add--address {
    padding-bottom: 100px;
}

.add--address .gift--container > .button--gift > button {
    max-width: fit-content;
    margin: 0 auto;
    font-size: 20px;
}

.add--address .gift--container > .button--gift > button {
    max-width: fit-content;
    margin: 0 auto;
    font-size: 20px;
}

.add--address .gift--container > .button--gift {
    max-width: fit-content;
}

.tribute-form .btn-primary {
    font-size: 16px;
    min-height: auto;
}

.tribute-form input, .tribute-form select {
    padding: 5px 15px;
    font-size: 14px;
    min-height: 45px;
}

.file-label {
    padding: 10px 15px;
}

.gallery {
    padding-right: 20px;
    padding-left: 20px;
    background-position-x: 100%;
}

.faq-question {
    font-size: 15px;
    padding: 6px 0px;
}
.faq-answer p {
    font-size: 15px;
}
.add--address .gift--container > .button--gift {
    max-width: fit-content;
}

.add--address > .container--bottle {
    flex-direction: column;
}


div#shareModal > .social-links > button > span {
    display: none;
}

div#shareModal > .social-links {
    width: fit-content;
}

div#shareModal.active {
    width: fit-content;
    right: 0;
}

.tribute-form .btn-primary {
    font-size: 16px;
    min-height: auto;
}

.footer-top .footer--menu > ul {
    flex-wrap: wrap;
    column-gap: 20px;
    row-gap: 10px;
}

.footer-bottom {
    flex-direction: column;
}

.footer-bottom > .copy--right {
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;
}

.faq {
    padding-right: 20px;
    padding-left: 20px;
}

.video--box {
    height: 325px;
    margin-left: -15px;
    padding-top: 14px;
    padding-bottom: 37px;
}

.share-btn > button {
    font-size: 19px;
    max-width: fit-content;
    min-height: auto;
}

.share-btn {
    right: -20px;
    max-width: fit-content;
}

.create-share--container > .created--video > .video--section {
    padding-right: 0px;
    max-width: 80%;
    margin: 0 auto;
}

.create-share {
    padding-right: 20px;
    padding-left: 20px;
    padding-top: 40px;
        padding-bottom: 40px;
}

    .inner--page {
        padding-top: 150px;
    }

.inner--page h1 {
    font-size: 2rem;
}

.inner--page h2 {
    font-size: 1.8rem;
}

.inner--page h3 {
    font-size: 1.5rem;
}
}

@media(max-width:768px){
      .inner--page {
        padding-top: 100px;
    }

    .middle--header > .logo > img {
    width: 85px;
}
.hero {
    padding-top: 100px;
}
.footer-top .footer--menu > ul {
    flex-direction: column;
}
.modal-content {
    width: 90%;
}
.gallery-slider .slick-track > .slick-slide:nth-child(even){
    margin: 0;
}
.gallery-slider .slick-track > .slick-slide img {
    height: 410px;
}

.footer-top .footer--head {
    font-size: 28px;
    margin-bottom: 20px;
}

.footer-top p {
    margin-bottom: 10px;
    font-size: 16px;
}
.galler--heading > p {
    font-size: 16px;
}
.text--with--img > p {
    font-size: 16px;
}
.step p {
    font-size: 15px;
}

}