/*
 Theme Name:   Rakar Child  
 Theme URI:    https://wordpress.themeholy.com/rakar
 Description:  This is a child theme for Rakar - WordPress Theme
 Author:       Themeholy
 Author URI:   https://themeforest.net/user/themeholy 
 Template:     rakar
 Version:      1.0
 Tags:         two-columns, three-columns, left-sidebar, right-sidebar, flexible-header, custom-background, custom-colors, custom-header, custom-menu, theme-options, editor-style, featured-images, microformats, post-formats,  sticky-post, threaded-comments, translation-ready
 Text Domain:  rakar-child
*/

/*  [ Add your custom css below ] 
- - - - - - - - - - - - - - - - - - - - */     
/* Header 2 ---------------------------------- */
.header-layout2 {
    .row {
        --bs-gutter-x: 16px;
    }

    position: absolute;
    top: 0;
    left: 0;
    width: 100%;

    .header-top {
        background-color: transparent;
    }

    .header-logo {
        /*background-color: $white-color;*/
        padding: 8px 9px;
        border-radius: 50px;

        img {
            max-width: 180px;
            margin-right: 1px;
        }
    }

    .menu-area {
        --body-bg: #fff;
        background-color: $body-bg;
        border-radius: 48px;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 10px;
    }

    .main-menu {
        margin-left: 12px;

        >ul>li>a {
            padding: 18px 0;

            &:before {
                height: 40px;
                top: calc(50% - 20px);
                right: -12px;
                border-radius: 20px;
                z-index: -1;
            }

            &:hover {
                color: $white-color;
            }

            &:hover {
                color: $white-color;

                &:before {
                    width: calc(100% + 24px);
                    right: unset;
                    left: -12px;
                }
            }
        }

        .sub-menu {
            border-radius: 24px;
        }
    }

    .icon-btn {
        background-color: $title-color;
        color: $white-color;
    }

    .header-search {
        display: flex;
        align-items: center;

        input {
            height: 48px;
            border-radius: 27px;
            margin-right: -48px;
            max-width: 240px;
        }

        .icon-btn {
            min-width: 48px;
        }
    }

    .sticky-wrapper {
        &.sticky {
            .header-logo {
                padding-top: 18px;
                padding-bottom: 18px;
            }
        }
    }

    .th-menu-toggle {
        margin-left: auto;
    }
}
.th-menu-wrapper .th-menu-area {
    
    background-color: #1c404d;
}