@import 'base.css';

.header-wrapper {
   width:100%;
    top: 0;
    background: transparent   ;
    padding: var(--header-padding);
    position: -webkit-sticky; /* Safari */
    position: fixed;
    
    z-index: 2000;
}

.nav-wrapper {
    padding: var(--nav-padding);
    max-width: 1238px;
    width: 100%;
    margin: 0 auto;
}

.navbar-brand img {
    margin-right: 92px  ;
}
 
.per-margin{
    margin-right:44px    ;
}
.log-margin{
    margin-right:60px   ;
}

.navbar-brand h1 {
    font-size: var(--brand-h1-font-size);
    margin-right: var(--brand-h1-margin-right);
}

.navbar-toggler {
    margin-left: auto;
    color: #fff;
    border-color: #fff ;
}




@media (max-width: 1000px) {
    

    .header-wrapper {
        padding: var(--mobile-header-padding);
    }

    .nav-wrapper {
        padding: 0.625rem 0;
        width: 100%;
    }

      
      
    .navbar-toggler:focus {
        box-shadow: none;
    }

    .navbar-toggler-icon {
        background-image: url('../img/icons/Burger menu.svg') !important;
        width:32px;
        height:32px;
    }
   
   
}

@media (max-width:361px){
    .header-wrapper {
        padding: 25px;
    }
}

@media (max-width:345px) {
    .header-wrapper {
        padding: 10px;
    }
}

.header-wrapper {
    transition: background-color 0.3s ease, color 0.3s ease;
}

    .header-wrapper.scrolled {
        background-color: white ;
    }

        .header-wrapper.scrolled .navbar-brand h1,
        .header-wrapper.scrolled .nav-link,
        .header-wrapper.scrolled .fw-bolder {
            color: black !important;
        }

.navbar-toggler.scrolled {
    color: black !important;
}

.header-wrapper.scrolled .logo-default {
    display: none;
}

.header-wrapper.scrolled .logo-scrolled {
    display: inline-block;
}

.navbar-toggler.scrolled .navbar-toggler-icon {
    background-image: var(--bs-navbar-toggler-icon-bg) !important; /* Change icon when scrolled if needed */
}