/*
Theme Name: Houzez Child
Theme URI: http://www.favethemes.com/
Author: Favethemes
Author URI: http://www.favethemes.com/
Description: Houzez is a premium WordPress theme for real estate agents where modern aesthetics are combined with tasteful simplicity, and where the ease of use is achieved without compromise in your ability to customise the design. Whether you are a real estate agent looking to build a website for your company or a web developer seeking a perfect WordPress theme for your next project, you are certain to appreciate the numerous features and benefits that our theme provides.
Version: 1.0
Tags: white, right-sidebar, left-sidebar, custom-colors, custom-menu, featured-images, post-formats, theme-options, translation-ready
License: GNU General Public License version 3.0
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Text Domain: houzez
Template: houzez
*/


@import url("../houzez/style.css");

/* Your CSS code goes here
-------------------------------------- */


/* Style for the horizontal scrolling menu */
.menu {
    display: flex; /* Arrange menu items in a horizontal row */
    overflow-x: auto; /* Enable horizontal scrolling */
    white-space: nowrap; /* Prevent menu items from wrapping to the next line */
    -webkit-overflow-scrolling: touch; /* Enable smooth scrolling on touch devices */
}

.menu li {
    list-style: none; /* Remove default list bullet points */
    margin-right: 20px; /* Adjust spacing between menu items */
}

.menu a {
    text-decoration: none; /* Remove underline from menu links */
    color: #333; /* Text color */
    font-weight: bold; /* Text font weight */
    padding: 10px 15px; /* Spacing around menu items */
    border: 1px solid #ccc; /* Border for menu items */
    border-radius: 5px; /* Rounded corners for menu items */
    background-color: #fff; /* Background color for menu items */
    transition: background-color 0.3s ease; /* Smooth background color transition on hover */

    /* Hover state */
    &:hover {
        background-color: #0073e6; /* Background color on hover */
        color: #fff; /* Text color on hover */
    }
}

/* Additional styles for mobile devices (adjust as needed) */
@media (max-width: 768px) {
    .menu {
        padding: 10px 0; /* Add spacing above and below the menu */
        margin-bottom: 20px; /* Add margin below the menu */
    }

    .menu li {
        margin-right: 10px; /* Adjust spacing between menu items for mobile */
    }
}