@media screen and (max-width: 1366px){
    header,
    .hero-callto,
    .info{
        padding: 1em 4em;
    }
    .hero-2{
        padding: 4em;
    }

    .content-pricing{
        padding: 4em;
    }
    footer{
        padding: 2em 4em;
    }


    .navigation{
        padding-left: 50px;
    }

    .form-shorter{
        gap: 40px;
    }

    .image img{
        width: 500px;
    }

    .content-hero-2{
        gap: 50px;
    }

    .caption-hero2 p{
        width: 90%;
    }
}

@media screen and (max-width: 1100px){
    .content-info{
        grid-template-columns: minmax(100%, 700px);
        justify-content: center;
        gap: 80px;
    }

    .single-info{
        border: 2px solid #DEDEDE;
        padding: 1em;
        border-radius: 15px;
    }

    .content-info h3{
        text-align: center;
    }

}
@media screen and (max-width: 1024px){
    .hero-callto{
        flex-direction: column-reverse;
        gap: 40px;
    }
    .heroimg img{
        width: 100%;
        max-width: 400px;
    }
    .caption p {
        margin: 30px 0;
    }
    .hero-callto .btn_callto{
        width: 100%;
    }

    /* hERO 2 */

    .content-hero-2{
        flex-direction: column-reverse;
    }

    .caption-hero2{
        text-align: center;
    }
    .caption-hero2 p{
        width: 100%;
    }

    .image img{
        width: 100%;
    }
}


@media screen and (max-width: 900px){

    header,
    .hero-callto,
    .info{
        padding: 1em 2em;
    }
    .hero-2{
        padding: 3em 2em;
    }

    .shorter-block{
        padding: 2.5em 2em;
    }
    .content-pricing{
        padding: 4em 2em;
    }

    footer{
        padding: 2em;
    }

    .hero-callto{
        margin-bottom: 50px;
    }

    header {
        position: relative;
    }

    .container-header{
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
    .menu-bar{
        display: block;
        position: absolute;
        right: 2em;
        top: 55px;
        cursor: pointer;
    }
    .navigation {
        background-color: #F6F6F6;
        padding: 0;
        width: 100%;
        gap: 50px;
        padding-left: 0;
        height: 0;
        overflow: hidden;
        transition: 300ms ease all;
    }

    .navigation.open{
        height: 277px;
        padding: 30px 0;
        transition: 300ms ease all;
    }

    .navigation ul,
    .navigation{
        flex-direction: column;
        align-items: center;
    }
    .navigation ul{
        gap: 25px;
    }

    .navigation ul li a{
        text-decoration: none;
        font-size: 1.2em;
    }
    .navigation ul li .btn_login{
        padding: 12px 30px;
        border: 1px solid #DEDEDE;
        border-radius: 5px;
        background: #FFF;
    }

    .navigation ul li .btn-start{
        display: block;
        width: 175px;
        text-align: center;
    }
    .navigation ul li .btn_login:hover{
        background: #E8E8E8;
    }


    /* SHORTER */

    .form-shorter{
        flex-direction: column;
        gap: 15px;
    }
    .input-link,
    .btn-short{
        width: 100%;
    }
}


@media screen and (max-width: 768px){
    .caption h1{
        font-size: 2em;
    }

    .caption p {
        font-size: 1.2em;
    }

    .plan{
        width: 300px;
    }

    /* CALL TO ACTION 2 */

    .call-to-2 p{
        font-size: 1.5em;
        width: 80%;
    }
}


@media screen and (max-width: 665px){
    .netdreams-about{
        width: 100%;
        margin-bottom: 30px;
    }

    .logo-footer img{
        display: block;
        margin: auto;
    }

    .netdreams-about p{
        text-align: center;
        width: auto;
        margin: 15px;
    }

    .social{
        justify-content: center;
    }

}
@media screen and (max-width: 450px){
    .logo img{
        width: 95px;
    }

    .menu-bar{
        right: 1em;
        top: 45px;
    }

    header, 
    .hero-callto,
    .info{
        padding: 1em;
    }

    .shorter-block{
        padding: 2em 1em;
    }

    .content-pricing{
        padding: 4em 10px;
    }

    .form-shorter input{
        font-size: 1.1em;
    }

    .btn_callto {
        font-size: 1.2em;
    }
}