/* ======================================== */
/* LAPTOP */
/* ======================================== */

@media(max-width:1400px){

.hero-title{

    font-size:56px;
}

.hero-content{

    margin-left:70px;
}

}

/* ======================================== */
/* TABLET */
/* ======================================== */

@media(max-width:992px){

nav{

    display:none;
}

.menu-toggle{

    display:flex;
}

.hero-content{

    margin-left:45px;

    margin-top:100px;

    max-width:500px;
}

.hero-title{

    font-size:46px;

    line-height:1;
}

.hero-text{

    font-size:16px;

    max-width:420px;
}

}

/* ======================================== */
/* MOBILE */
/* ======================================== */

@media(max-width:768px){

.hero{

    min-height:100vh;
}

.hero-content{

    margin-left:24px;

    margin-top:140px;

    max-width:320px;
}

.hero-title{

    font-size:38px;

    line-height:1;

    letter-spacing:-1px;

    margin-bottom:20px;
}

.hero-text{

    font-size:15px;

    line-height:1.7;

    max-width:300px;

    margin-bottom:35px;
}

.hero-button{

    padding:
    14px
    24px;

    font-size:14px;
}

}

/* ========================================
LARGE DESKTOP
======================================== */

@media(min-width:1600px){

.hero-content{

    max-width:760px;

    margin-left:100px;
}

.hero-title{

    font-size:72px;
}

.hero-text{

    font-size:20px;

    max-width:560px;
}

}

/* ========================================
SMALL MOBILE
======================================== */

@media(max-width:480px){

.hero-content{

    margin-left:18px;

    margin-top:120px;

    max-width:260px;
}

.hero-title{

    font-size:32px;

    line-height:1.05;

    letter-spacing:-1px;
}

.hero-text{

    font-size:14px;

    line-height:1.6;

    max-width:250px;

    margin-bottom:28px;
}

.hero-button{

    padding:
    12px
    20px;

    font-size:13px;
}

}