header{
    position: fixed;
    background: none;
    width: 100%;
    height: 95px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    justify-items: center;
    margin: auto;
    z-index: 999;
}

header nav{
    position: relative;
    height: 100%;
    max-width: 1050px;
    width: 100%;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    list-style: none;
    user-select: none;
    padding: 0 20px;
    background-color: transparent;
    transition: all .4s ease;
        border-bottom-left-radius: 25px;
    border-bottom-right-radius: 25px;
}
header nav a{
    display: flex;
    margin: auto;
}
header.scrolled nav{
width:92%;
height:75px;
max-width:1020px;

background: #121212a6;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);

border-radius:30px;

border:1px solid rgba(255,255,255,0.06);

box-shadow:
0 10px 40px rgba(0,0,0,0.45),
inset 0 1px 0 rgba(255,255,255,0.04);

transform: translateY(12px);

transition: all .35s ease;
}
.twosidelogocntr{
    position: relative;
    display: flex;
    justify-items: flex-start;
    margin-left: 10px;
}

.twosidelogo{
    position: relative;
    width: clamp(50px,4vw,100px);
}

.twosidelogo img{
width:100%;
max-width:100px;
height:auto;
display:block;
user-select:none;
}

.buttons{
    position: relative;
    display: flex;
    flex-direction: row;
    gap: 10px;
    height: 100%;
    width: auto;
    margin-right: 10px;
}   

.pricing , .contact , .dashboard {
    position: relative;
    text-decoration: none;
    height: 50%;
    display: flex;
    width: auto;
    border-radius: 10px;
    align-items: center;
    transition: all .5s ease-in-out;
}

.dashboard{
background: linear-gradient(135deg,#e73c45,#ff6a73);
border-radius:12px;
padding:0 5px;
box-shadow:0 8px 25px rgba(231,60,69,0.35);
}

.dashboard button{
font-weight:600;
}

.dashboard:hover{
box-shadow:0 12px 30px rgba(231,60,69,0.5);
}

header nav button{
    position: relative;
    height: 100%;
    width: 100px;
    border-radius: 5px;
    border: 0;
    color: #ffffff;
    font-family: 'sf-pro-title';
    cursor: pointer;
    background: none;
    transition: all .1s ease-in-out;
}
.contact button:hover , .pricing button:hover{
    border-radius: 0px;
    border-bottom: 1px solid white;
    color: #d5d5d5;
}

.dropdown {
  position: relative;
  display: flex;      
  align-items: center; 
  height: 100%;        
}

.dropdown-content {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
    min-width: 160px;
  border-radius: 6px;
  box-shadow: 0px 8px 16px rgba(0,0,0,0.4);
  z-index: 10;
background: #121212;

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

border:1px solid rgba(255,255,255,0.06);

border-radius:14px;

padding:8px;

box-shadow:0 15px 40px rgba(0,0,0,0.45);
}
.dropdown-content a {
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  font-family: 'sf-pro-title';
  font-size: 14px;
  border-radius: 6px;
  transition: all .3s ease-in-out;
}

.dropdown-content a:hover{
background:rgba(255,255,255,0.06);
}

.dropdown:hover .dropdown-content {
  display: block;
  animation: fadeIn 0.5s ease;
}
.dropdown.active .dropdown-content {
  display: block;
  animation: fadeIn 0.5s ease;
}
.dropdown h2 button {
  position: relative;
  padding-right: 25px; 
}

.dropdown h2 button::after {
  content: url('../img/arrow.svg'); 
  position: absolute;
  right: 8px;
  top: 50%;
 transform: translateY(-50%) scale(1.2); 
  width: 10px;
  height: auto;
  pointer-events: none; 
  transition: transform 0.5s ease;
   filter: invert(100%);
}


.dropdown.active h2 button::after {
  transform: translateY(-50%) rotate(180deg);
}

@keyframes fadeIn {
  from {opacity: 0; transform: translateY(10px);}
  to {opacity: 1; transform: translateY(0);}
}


@media (max-width:1200px){

header nav{
max-width:1000px;
}

.twosidelogo img{
width:90px;
}

header nav button{
width:90px;
}

}


@media (max-width:900px){

header{
height:85px;
}

header nav{
height:85px;
padding:0 15px;
}

header.scrolled nav{
height:70px;
}

.twosidelogo img{
width:85px;
}

.buttons{
gap:6px;
}

header nav button{
width:80px;
font-size:0.9rem;
}

.dropdown-content{
min-width:140px;
}

}


@media (max-width:600px){

header{
height:75px;
}

header nav{
height:75px;
}

header.scrolled nav{
height:65px;
}
.logo-symbol img{
  max-width: 320px;
}
.buttons{
gap:4px;
}

header nav button{
width:70px;
font-size:0.8rem;
}

.dropdown-content{
min-width:130px;
}

}


@media (max-width:400px){

header nav{
padding:0 10px;
}

.twosidelogo img{
width:65px;
}

header nav button{
width:60px;
font-size:0.75rem;
}

.buttons{
gap:2px;
}

}
.mobile-menu{
position:absolute;
top:100%;
left:50%;
transform:translateX(-50%) translateY(-20px);
width:95%;
max-width:500px;

background:#111;
border-radius:20px;
border:1px solid #2a2a2a;

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

padding:30px;

opacity:0;
pointer-events:none;

transition:all .35s ease;

box-shadow:0 20px 60px rgba(0,0,0,.6);
}

.mobile-menu.active{
opacity:1;
pointer-events:auto;
transform:translateX(-50%) translateY(10px);
}

.mobile-links{
display:grid;
grid-template-columns:1fr 1fr;
gap:30px;
}

.mobile-col h4{
color:#fff;
font-size:13px;
letter-spacing:1px;
margin-bottom:15px;
opacity:.6;
text-transform:uppercase;
}

.mobile-col a{
display:block;
color:#888;
text-decoration:none;
margin-bottom:10px;
font-size:14px;
transition:.25s;
}

.mobile-col a:hover{
color:white;
transform:translateX(4px);
}
@media(max-width:768px){

.buttons{
display:none;
}

header nav{
justify-content:center;
}

.twosidelogocntr{
margin:0;
}

}