@media screen and (max-width: 1280px) {
    header {
        padding: 2.4rem 5rem;
    }

    .hero__container {
        padding: 5.5rem 5rem;
        justify-content: center;
    }

    .hero__img img {
        width: 500px;
    }
}

@media screen and (max-width: 1024px) {
    .hero{
        background-image: none;
    }
    .hero__container{
        flex-direction: column-reverse;
    }

    .logo__hero img{
        width: 200px;
        display: block;
        margin: 0 auto;
    }

    .hero__img img {
        width: 280px;
    }

    header,
    .hero__container{
        padding: 2.4rem
    }
    .hero__caption__social{
        justify-content: center;
     /*    gap: 15px; */
    }

    h1,
    .hero__caption__text p{
        text-align: center;
    }
    .hero__caption{
        width: 100%;
    }
}


@media screen and (max-width: 500px) {
    header,
    .hero__container{
        padding: 1.6rem
    }

    .hero__img img {
        width: 200px;
    }

    .hero__container{
        padding: 3rem 1.6rem;
    }
    h1{
        font-size: 1.8rem;
        letter-spacing: 10px;
    }
    .hero__caption{
        width: 100%;
    }
    .hero__caption__social{
        gap: 0;
        justify-content: space-around;
    }

    .hero__caption__text p{
        margin: 20px 0;
    }
}