/*=====================================
TABLETS (992px and below)
=====================================*/

@media (max-width:992px){

.container{
    width:92%;
}

.hero-text h1{
    font-size:72px;
}

.hero-text h3{
    font-size:34px;
}

.description{
    font-size:22px;
}

.hero-image img{
    max-width:520px;
}

}

/*=====================================
MOBILE (768px and below)
=====================================*/

@media (max-width:768px){

.navbar{

    padding:20px;

    height:80px;

}

.menu-toggle{

    display:block;

    z-index:2000;

}

.social-icons{

    display:none;

}

.nav-links{

    position:fixed;

    top:0;

    right:-100%;

    width:280px;

    height:100vh;

    background:#0D1B2A;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:35px;

    transition:.4s;

}

.nav-links.active{

    right:0;

}

}

.hero-container{

    flex-direction:column;

    justify-content:center;

    text-align:center;

    gap:50px;

    padding-top:120px;

    padding-bottom:80px;

}

.hero-text{

    width:100%;

}

.hero-image{

    width:100%;

    height:auto;

    justify-content:center;

}

.hero-text h1{

    font-size:56px;

}

.hero-text h3{

    font-size:28px;

}

.description{

    font-size:18px;

}

.subtitle{

    font-size:15px;

    letter-spacing:3px;

}

.hero-buttons{

    flex-direction:column;

    align-items:center;

}

.btn-primary,

.btn-secondary{

    width:100%;

    max-width:320px;

    justify-content:center;

}

.gold-divider{

    width:180px;

    margin:25px auto;

}