@import "./middle-header";
@import "./menu";
header{
    &.site-header{
        border-bottom: 1px solid $border-color;
        padding-bottom: 1.5rem;
        @media #{$breakpoint-ls}{
            margin-bottom: 0;
        }
        .custom-logo-link,.site-branding{
            text-align: center;
            padding-top:20px;
            max-width: 330px;
            margin:0 auto;
            
            .site-title{
                font-family: $cookie;
                font-size:4rem;
                margin:0;
                text-transform: capitalize;
                line-height: 1;
                font-weight: 700;
                margin-bottom: .5rem;
                a{
                    font-size:4rem;
                    color:$heading-color;
                }
            }
            p{
                color:$pink-color;
                margin:0;
                font-size:0.775rem;
                text-transform: capitalize;
            }
            @media #{$breakpoint-md}{
                max-width: 280px;
                .site-title{
                    font-size:2rem;
                    a{
                        font-size:2rem;
                    }
                }
            }
        }
        .site-logo{
            @include display-flex(flex);
            @include justify-content-center;
            @include align-items-center;
            padding:0 15px;
            margin:0 auto;
            
        }
        @media (min-width: 576px) {
            .site-logo {
              max-width: 540px;
            }
          }
          
          @media (min-width: 768px) {
            .site-logo {
              max-width: 720px;
            }
          }
          
          @media (min-width: 992px) {
            .site-logo {
              max-width: 960px;
            }
          }
          
          @media (min-width: 1200px) {
           .site-logo {
              max-width: 1140px;
            }
          }
        
    }
}
.custom-breadcrumb{
    margin-top:2rem;
    h1{
        font-size: 1.2rem;
        margin-bottom: 0;
    }
}
body{
    &.home-2{
        header{
            &.site-header{
                .custom-logo-link{
                    padding-bottom:0;
                    max-width: 200px;
                    @media #{$breakpoint-xs}{
                        max-width: 150px;
                    }
                    .site-title{
                        font-size:2.5rem;
                    }
                    p{
                        display: none;
                    }
                } 
            }
        }
    }
}