/*
Theme Name: Betheme
Theme URI: https://themes.muffingroup.com/betheme/
Author: Muffin group
Author URI: https://muffingroup.com/
Description: The biggest WordPress Theme ever - Modernized with local alignment and slider fixes
License: Themeforest Split Licence
License URI: https://themeforest.net/licenses/standard
Text Domain: betheme
Version: 21.4.3

All /css files are placed in /css/ folder. The below styles are layout/alignment overrides.
*/

/* ----------------------------------------------------
   1. REVOLUTION SLIDER PRE-LOAD & LAYOUT FIXES
---------------------------------------------------- */

/* Prevent Revolution Slider from displaying as a vertical stack of elements before JS loads */
rs-module-wrap {
    overflow: hidden !important;
    position: relative !important;
    display: block !important;
    background-color: #eceff2;
    min-height: 400px;
    max-height: 600px;
}

rs-module {
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

/* Once Revolution Slider is initialized by JS, make it fully visible */
rs-module.revslider-initialised, 
.revslider-initialised rs-module,
rs-module-wrap.revslider-active rs-module {
    opacity: 1 !important;
    display: block !important;
}

/* Fallback: Hide all slides except the first one until the JS initializes */
rs-slides {
    display: block !important;
    position: relative !important;
}

rs-slides > rs-slide {
    display: none !important;
}

rs-slides > rs-slide:first-child {
    display: block !important;
    position: relative !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Make sure slide /images fit their containers */
rs-slide img {
    max-width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
}


/* ----------------------------------------------------
   2. MAIN MENU ALIGNMENT & INTERACTION FIXES
---------------------------------------------------- */

/* Ensure the header top bar has a proper flexbox or clean float layout to prevent menu shifting */
#Top_bar {
    display: block !important;
    background-color: #ffffff !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    border-bottom: 1px solid #f1f5f9;
}

#Top_bar .container {
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

#Top_bar .top_bar_left {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    float: none !important;
    width: 100% !important;
    height: 90px;
}

#Top_bar .logo {
    display: flex !important;
    align-items: center !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 100% !important;
}

#Top_bar .logo img {
    max-height: 50px !important;
    width: auto !important;
    transition: transform 0.3s ease;
}

#Top_bar .logo:hover img {
    transform: scale(1.03);
}

#Top_bar .menu_wrapper {
    display: flex !important;
    align-items: center !important;
    float: none !important;
    margin: 0 !important;
    height: 100% !important;
}

#Top_bar #menu {
    display: block !important;
    float: none !important;
    background: transparent !important;
}

#Top_bar .menu {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

#Top_bar .menu > li {
    position: relative !important;
    float: none !important;
    display: inline-block !important;
    padding: 0 !important;
    margin: 0 15px !important;
}

#Top_bar .menu > li > a {
    font-family: 'Poppins', sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #1e293b !important;
    text-transform: uppercase !important;
    padding: 10px 0 !important;
    letter-spacing: 0.5px !important;
    transition: color 0.3s ease !important;
    position: relative;
}

/* Modern Sliding Underline on Hover */
#Top_bar .menu > li > a::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 2px !important;
    background-color: #01cd61 !important;
    transform: scaleX(0) !important;
    transform-origin: bottom right !important;
    transition: transform 0.3s ease-out !important;
}

#Top_bar .menu > li:hover > a::after,
#Top_bar .menu > li.current-menu-item > a::after,
#Top_bar .menu > li.current_page_item > a::after {
    transform: scaleX(1) !important;
    transform-origin: bottom left !important;
}

#Top_bar .menu > li:hover > a,
#Top_bar .menu > li.current-menu-item > a,
#Top_bar .menu > li.current_page_item > a {
    color: #01cd61 !important;
}

/* Submenu Dropdown Styling & Animating */
#Top_bar .menu > li ul.sub-menu {
    display: block !important;
    position: absolute !important;
    top: 100% !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(15px) !important;
    width: 230px !important;
    background: #ffffff !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1) !important;
    border: 1px solid #f1f5f9 !important;
    padding: 10px 0 !important;
    margin: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s ease !important;
    z-index: 9999 !important;
}

#Top_bar .menu > li:hover ul.sub-menu {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(-50%) translateY(0) !important;
}

#Top_bar .menu > li ul.sub-menu li {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

#Top_bar .menu > li ul.sub-menu li a {
    display: block !important;
    padding: 10px 20px !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    color: #475569 !important;
    transition: background-color 0.2s ease, color 0.2s ease !important;
}

#Top_bar .menu > li ul.sub-menu li a:hover {
    background-color: #f8fafc !important;
    color: #01cd61 !important;
    padding-left: 24px !important;
}


/* ----------------------------------------------------
   3. MOBILE RESPONSIVENESS ALIGNMENTS
---------------------------------------------------- */

@media only screen and (max-width: 1239px) {
    #Top_bar .top_bar_left {
        height: 70px;
    }
    
    #Top_bar .logo img {
        max-height: 40px !important;
    }
    
    #Top_bar #menu {
        display: none !important; /* Managed by mobile toggle */
    }
    
    #Top_bar .responsive-menu-toggle {
        display: block !important;
        font-size: 24px !important;
        color: #01cd61 !important;
        padding: 5px !important;
        cursor: pointer !important;
    }
}