.header {
    position: fixed;
    top: 30px;
    right: 0;
    left: 0;
    z-index: 1030;
}
.header .navbar {
    background-color: var(--bg-one);
    color: var(--white);
    --bs-navbar-color: var(--white);
    --bs-navbar-hover-color: var(--offwhite);
    --bs-navbar-active-color: var(--offwhite);
    padding: 12px 16px;
    font-weight: var(--font-medium);
    font-size: var(--nav-font-size);
    text-transform: capitalize;
    --bs-navbar-toggler-focus-width: 0;
 
}
.header .navbar-collapse {
    justify-content: space-between;
}
.header .navbar-brand {
    flex: 0 0 auto;
    width: 28.333333%;
    margin-right: 0;
}
.header .navbar>.container-fluid {
    gap: 10px;
}
.header .btn-light {
   --bs-btn-hover-border-color: var(--white);

}
header .navbar-brand img {
    max-width: 100%;
    height: auto;
}
 @media (max-width: 575.98px) {
    .header {
    top: 0;
}
.header .navbar-brand img {
    height: 35px;
}
.navbar-toggler {
    padding-left: 10px;
    padding-left: 10px;
}
.header .row > [class*="col-"] {
    padding-left: 0;
    padding-right: 0;
}
}
 @media (min-width: 992px) {
    .header .navbar {
       border-radius: var(--rounded);
    -webkit-border-radius: var(--rounded);
    -moz-border-radius: var(--rounded);
    -ms-border-radius: var(--rounded);
    -o-border-radius: var(--rounded);
}
.header .navbar-nav {
    gap: 30px;
}
}
 @media (max-width: 991.98px) {
.header .navbar-brand {
    width: auto;
}
.header .btn-light {
    margin-top: 10px;
}
}
 @media (min-width: 1200px) and (max-width: 1536.98px) { 
   .header .navbar {
padding: 8px 20px;
}
  }

 @media (min-width: 1200px) and (max-width: 1366.98px) { 
   .header .navbar-brand img {
    height: 45px;
   }
   .header .navbar-nav {
    gap: 20px;
}
.header {
    top: 24px;
}
 }
 @media (min-width: 1367px) and (max-width: 1536.98px) { 
   .header .navbar-brand img {
    height: 55px;
   }
   .header .navbar {
padding: 8px 20px;
}
 }