.top-header {
    padding: 1.5rem 0;

    .top-header-in {
        @include display-flex(flex);
        @include justify-content-between;
        @include align-items-center;

        .site-branding {
            text-align: center;

            .site-title {
                font-size: 3.5rem;
                margin: 0;
                text-transform: capitalize;
                color: $heading-color;
                font-family: $logo-fonts;
                a {
                    text-transform: capitalize;
                    color: $heading-color;
                    font-weight: 700;
                    font-family: $logo-fonts;
                }
                @media #{$breakpoint-lg}{
                    font-size: 2rem;
                }
            }

            p {
                color: $body-color;
                margin: 0;
                font-size: 0.775rem;
                text-transform: capitalize;
                &.site-title {
                    font-size: 3.5rem;
                    margin: 0;
                    text-transform: capitalize;
                    color: $heading-color;
                    font-family: $logo-fonts;
    
                    a {
                        text-transform: capitalize;
                        color: $heading-color;
                        font-weight: 700;
                        font-family: $logo-fonts;
                    }
                    @media #{$breakpoint-lg}{
                        font-size: 2rem;
                    }
                }
            }
        }

        .custom-logo-link {
            text-align: center;
            max-width: 300px;
            display: inline-block;
            margin: 0 auto;

            @media #{$breakpoint-md} {
                max-width: 150px;
            }

        }

        button {
            &.is-border {
                @include display-flex(flex);
                @include justify-content-between;
                @include align-items-center;
                color: $body-color;
                @include radius(24px);
            }
        }

        ul {
            &.social-list {
                @include display-flex(flex);
                @include justify-content-start;
                @include align-items-center;

                li {
                    @include display-flex(flex);
                    @include justify-content-start;
                    @include align-items-center;
                    font-weight: 500;

                    a {
                        font-size: .775rem;
                        color: $body-color;
                        width: 40px;
                        height: 40px;
                        @include radius(50%);
                        @include display-flex(flex);
                        @include justify-content-center;
                        @include align-items-center;
                        @include flex-direction-column(column);
                        background-color: $white-color;
                        @include transition(all .5s ease-in-out);
                        border: 1.5px solid $border-color;

                        &:hover {
                            background-color: $secondary-color;

                            svg {
                                color: $white-color;
                            }
                        }
                    }

                    &:not(:last-child) {
                        margin-right: 1rem;
                    }
                }
            }

        }
        .top-header-right{
            @include display-flex(flex);
            @include justify-content-end;
            @include align-items-center;
        }
    }

    @media #{$breakpoint-md} {
        .top-header-in {
            @include flex-wrap(wrap);

            ul.social-list,
            .suscribe-header {
                @include flex(0 0 50%);
                max-width: 50%;
            }

            .site-branding {
                @include flex(0 0 100%);
                max-width: 100%;
                text-align: center;
                @include order(0);
                margin-bottom: 1rem;
            }

            ul {
                &.social-list {
                    @include order(1);

                    li {
                        @include display-flex(flex);
                        @include justify-content-start;
                        @include align-items-center;
                        font-weight: 500;

                        a {
                            width: 30px;
                            height: 30px;
                            border: 1px solid $border-color;
                        }

                        &:not(:last-child) {
                            margin-right: .5rem;
                        }
                    }
                }
            }

            .top-header-right {
                @include order(2);
                @include display-flex(flex);
                @include justify-content-end;
            }
        }

    }
}