//Header Content Here

.header {
    position: absolute;
    width: 100%;
    z-index: 9;
    padding: 15px 0;
    @include transition;

    &.scrolled {
        position: fixed;
        top: 0;
        background-color: rgba(20, 20, 20, 0.8);

        // @include breakpoint(ipad) {
        //     bottom: 0;
        // }

    }



    .navbar-brand {
        @include breakpoint(x-large) {
            max-width: 130px;
        }
    }

    .navbar {
        background-color: transparent !important;
        padding: 15px 0;
        justify-content: space-between;

        @include breakpoint (ipad) {
            padding-left: 15px;
            padding-right: 15px;
        }

        @include breakpoint (mobile) {
            padding: 0 18px;
        }

    }
}


@media only screen and (max-width: 375px) {
    .header .navbar {
        padding: 0 18px;
        justify-content: center;
        gap: 10px;
    }

    .header .navbar-brand {
        margin: 0;
    }
}