/*==================================================
TABLE OF CONTENTS
====================================================

1. 1200px
2. 992px
3. 768px
4. 576px
5. 480px
6. 360px

==================================================*/


/*==================================================
1200px
==================================================*/

@media(max-width:1200px){

.nav-links{

gap:28px;

}

.nav-links a{
    font-size: 0.9rem;
}

.logo-title{
    font-size: 0.9rem;
}

.nav-actions .btn{
        min-height:42px;
        padding:0 16px;
        font-size:.58rem;
    }

}


/*==================================================
992px
==================================================*/

@media(max-width:992px){

.navbar{

padding:0 18px;

}

.nav-links{

gap:12px;

}

.nav-links a{
    font-size: 0.9rem;
   
}

.logo-title{

font-size:0.9rem;


}

.nav-actions{
        gap:8px;
    }

.nav-actions .btn{
        min-height:40px;
        padding:0 14px;
        font-size:.55rem;
        white-space:nowrap;
        display: none;
    }

}


/*==================================================
768px
==================================================*/

@media(max-width:768px){


.menu-toggle{

display:flex;

}

.nav-links{

position:absolute;

top:95px;

left:20px;

right:20px;

display:flex;

flex-direction:column;

align-items:center;

gap:25px;

padding:35px;

border-radius:24px;

background:rgba(8,17,32,.95);

backdrop-filter:blur(20px);

-webkit-backdrop-filter:blur(20px);

border:1px solid rgba(255,255,255,.08);

box-shadow:

0 20px 60px rgba(0,0,0,.35);

opacity:0;

visibility:hidden;

transform:translateY(-25px);

transition:var(--transition);

pointer-events:none;
z-index:999;

}

.nav-links.show{

opacity:1;

visibility:visible;

transform:translateY(0);

pointer-events:auto;

}

.nav-actions .btn{

display:none;

}

.logo-subtitle{

display:none;

}

}


/*==================================================
576px
==================================================*/

@media(max-width:576px){

.navbar{

width:calc(100% - 20px);

padding:0 18px;

height:72px;

margin-top:12px;

}

.logo img{

width:40px;

}

.logo-title{

font-size:1.1rem;

}

.nav-links{

left:10px;

right:10px;

top:84px;

padding:28px;

}

}


/*==================================================
480px
==================================================*/

@media(max-width:480px){

.navbar{

height:68px;

}

.logo{

gap:10px;

}

.logo img{

width:36px;

}

.logo-title{

font-size:1rem;

}

.menu-toggle{

width:44px;

height:44px;

}

.nav-links{

gap:22px;

}

}


/*==================================================
360px
==================================================*/

@media(max-width:360px){

.navbar{

padding:0 15px;

}

.logo-title{

font-size:.95rem;

}

.nav-links{

padding:24px;

}

}