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

@media (max-width:991px){

    .container{
        width:94%;
    }

    h1{
        font-size:2.4rem;
    }

    h2{
        font-size:2rem;
    }

    p{
        font-size:1rem;
    }

    /*=========================
        HEADER
    =========================*/

    .navbar{
        width:94%;
        padding:14px 0;
    }

    .logo{
        width:52px;
    }

    .logo-text h2{
        font-size:.95rem;
    }

    .logo-text p{
        font-size:.72rem;
    }

    .menu-btn{

        display:flex;
        flex-direction:column;
        justify-content:center;
        gap:5px;

        width:46px;
        height:46px;

        background:none;
        border:none;
        cursor:pointer;
    }

    .menu-btn span{

        width:26px;
        height:3px;

        background:var(--gold);

        border-radius:10px;

        transition:.35s;
    }

    .nav-menu{

        position:absolute;

        left:0;
        top:100%;

        width:100%;

        background:#111;

        flex-direction:column;

        align-items:center;

        gap:25px;

        padding:0;

        margin-top:0;

        overflow:hidden;

        max-height:0;

        transition:max-height .35s ease,
                   padding .35s ease;

        border-bottom:1px solid var(--border);
    }

    .nav-menu.active{

        max-height:500px;

        padding:30px 0;
    }

    .nav-links{

        flex-direction:column;

        gap:22px;

        text-align:center;
    }

    .nav-btn{
        margin-top:5px;
    }

    /*=========================
        ARTICLE
    =========================*/

    .breadcrumb{
        margin:28px 0;
        font-size:.85rem;
        gap:8px;
    }

    .article-image img{
        height:240px;
    }

    .article-meta{
        gap:10px;
    }

    .article-meta span{
        font-size:.78rem;
        padding:7px 14px;
    }

    .article-title{
        margin-bottom:20px;
    }

    .article-intro{
        font-size:1rem;
    }

    .article-body{
        display:block;
    }

    .toc{
        position:relative;
        top:auto;
        margin-bottom:40px;
    }

    .blog-content section{
        margin-bottom:55px;
    }

    blockquote{
        padding:22px;
        font-size:1rem;
    }

    .info-box{
        padding:24px;
    }

    .article-cta{
        padding:45px 20px;
    }

    .cta-buttons{
        flex-direction:column;
        align-items:center;
    }

    .premium-btn,
    .glass-btn{
        width:100%;
        max-width:320px;
    }

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

    .related-card{
        padding:28px;
    }

    .faq-question{
        padding:18px;
        font-size:.95rem;
    }

    .faq-answer p{
        padding:0 18px 18px;
    }

    .footer{
        padding:55px 0;
    }

    .footer-links{
        gap:16px;
    }

    .footer-links a{
        width:48px;
        height:48px;
    }

    .back-to-top{
        right:16px;
        bottom:16px;
        width:48px;
        height:48px;
    }

}

/*==========================================
        SMALL PHONES
==========================================*/

@media (max-width:480px){

    h1{
        font-size:2rem;
    }

    h2{
        font-size:1.7rem;
    }

    .logo-text{
        display:none;
    }

    .article-image img{
        height:200px;
    }

    .article-meta{
        flex-direction:column;
        align-items:flex-start;
    }

    .article-meta span{
        width:fit-content;
    }

    .toc{
        padding:20px;
    }

    .info-box{
        padding:18px;
    }

    .article-cta{
        padding:35px 18px;
    }

}