/*
Theme Name:     divi-child
Theme URI:      http://childtheme-generator.com/
Description:    Divi-child is a child theme of Divi, created by ChildTheme-Generator.com
Author:         Elegant Themes
Author URI:     http://childtheme-generator.com/
Template:       Divi
Version:        1.1.0
Text Domain:    divi-child
Updated:        6/11/2025 3:24 PM MDT
*/

/* IN PROCESS FIXES */
/* Target the Divi main content area to remove the sidebar divider line */
.et_right_sidebar #main-content .container:before {
    /* Resets the position to the far right, effectively hiding it */
    /* right: 0 !important; */
    
    /* OR, if the line still appears, explicitly hide it */
    display: none !important;
}

/* ==========================================================================
   Sliders and Banners
   ========================================================================== */

/* Style the first Divi section to span the full width of its container. */
.et_pb_section.et_pb_section_first {
    width: 100%;
    /* Override Divi's default max-width to ensure full width. */
    max-width: none !important;
    /* Remove default left padding. */
    padding-left: 0 !important;
    /* Remove default right padding. */
    padding-right: 0 !important;
}

/* Make the slider go under the menu on the homepage. */
#header-homeslider.et_pb_section_0 {
  padding-top: 0px !important;
}

/*
* Set the menu section background to black on all pages
* EXCEPT the homepage (overridden in this file). This allows menu
* visibility while scrolling.
*/
header#main-header {
	background: #000; 
}

/*
* Set the row containing the hero images on all but the home page with no padding so image 
* fills most of the section.
*/
.custom-hero-row {	
	padding-top: 0;		
}

/* Make sure the text is white on the For Sale sections where user selects a property type. */
.forsale-tab-text h3 {
	color: white !important;
}

.forsalegridtext h3 {
	color: white !important;
}

/*
 * Ensure the first section on the homepage has a transparent background.
 * This is likely to allow a slider or banner image to be fully visible.
 */
body.home .et_pb_section.et_pb_section_first {
    background-color: transparent !important;
}

/* Style the first Divi row within the first section, likely containing the main banner. */
.et_pb_row.et_pb_row_0 {
    width: 100% !important;
    /* Ensure the row spans the full width of its parent section. */
    max-width: 100% !important;
    /* Center the row horizontally within its parent. */
    margin: 0 auto !important;
}

/* Style the main Divi slider module to take full width. */
.et_pb_slider {
    position: relative; /* Needed for absolute positioning of child elements. */
    width: 100%;
    /* Ensure the slider spans the full width. */
    max-width: 100% !important;	
}

/* Style the container for the individual slides within the slider. */
.et_pb_slides {
    width: 100%;
    max-width: 100%;
}

/*
 * Generic styling for hero banner text that is positioned over an image or slider
 * on non-homepage pages.
 */
.custom-hero-text {
    position: absolute; /* Allows precise positioning within its relative parent. */
    top: 50%; /* Vertically center the text. */
    left: 50%; /* Horizontally center the text. */
    transform: translate(-50%, -50%); /* Adjust for the element's own size to truly center. */
    width: 100%; /* Make the text container span the full width. */
    text-align: center; /* Center the text content. */
    z-index: 10; /* Ensure the text appears above other elements. */
}

/* ==========================================================================
   Homepage Slider Styles
   ========================================================================== */

/* Style individual slides within the homepage slider. */
.et_pb_slide {
    /* Set a minimum height to accommodate the intended desktop image size. */
    min-height: 600px;
    width: 100%;
    max-width: 100%;
    /* Ensure the background image covers the entire slide area. */
    background-size: cover !important;
    /* Position the background image to be centered horizontally and at the top vertically. */
    background-position: center top !important;
}

/*
 * Keyframe animation for a slide-up effect on text elements within the slider
 * on desktop screens.
 */
@keyframes slideUp {
    0% {
        top: 100%; /* Start the text below the visible area. */
        opacity: 0; /* Start with the text fully transparent. */
    }
    100% {
        top: 50%; /* Move the text to its final centered position. */
        opacity: 1; /* Make the text fully visible. */
    }
}

/* Style the description area (text overlay) of the homepage slider slides. */
.homepagenewslider .et_pb_slide_description {
    position: absolute; /* Position the description over the image. */
    top: 50% !important; /* Vertically center the description. */
    left: 50% !important; /* Horizontally center the description. */
    transform: translate(-50%, -50%) !important; /* Adjust for the description's size. */
    width: 100%; /* Make the description container full width. */
    text-align: center; /* Center the text within the description. */
    z-index: 10; /* Ensure it's above the image. */
    opacity: 0; /* Initially hide the description. */
}

/*
 * Apply the slide-up animation and make the description visible
 * when a slide becomes the active slide.
 */
.homepagenewslider .et_pb_slide.et-pb-active-slide .et_pb_slide_description {
    animation: slideUp 1s ease-in-out forwards; /* Apply the animation. */
    opacity: 1 !important; /* Make the description fully visible. */
}

/* Ensure the slide description and content are always displayed and visible. */
.homepagenewslider .et_pb_slide_description,
.homepagenewslider .et_pb_slide_content {
    display: block !important;
    visibility: visible !important;
}

/* Style the main heading (h2) within the homepage slider description. */
.homepagenewslider .et_pb_slide_description h2 {
    font-size: 60px;
    line-height: 75px;
    color: #fff !important;
    /* Add a subtle text shadow for better readability on images. */
    text-shadow: 0px 10px 23px rgba(0, 0, 0, 0.65);
    font-family: 'Montserrat', sans-serif;
    font-weight: 900; /* Make the heading very bold. */
}

/* Style the paragraph text (p) within the homepage slider description. */
.homepagenewslider .et_pb_slide_description p {
    font-family: 'Montserrat', sans-serif;
    color: #fff !important;
    /* Add a subtle text shadow. */
    text-shadow: 0px 3px 5px rgba(0, 0, 0, 0.65);
    font-size: 27px;
    line-height: 60px;
    font-weight: 600; /* Make the paragraph text semi-bold. */
    word-spacing: 2px; /* Add a little space between words. */
}

/* Style the image within the slider section, ensuring it covers the container. */
#slidersec_first span.et_pb_image_wrap img {
    height: auto; /* Maintain image aspect ratio. */
    width: 100%; /* Make the image fill the width of its container. */
    object-fit: cover; /* Ensure the image covers the entire area without distortion. */
    object-position: center top; /* Position the image focus to the center top. */
}

/* Style text likely used for a quick search overlay on the banner. */
.quicksearchtext {
    top: 86%; /* Position the text towards the bottom of the banner. */
    color: #fff;
    font-weight: 900; /* Make the text very bold. */
    font-size: 16px;
    line-height: 20px;
    text-transform: uppercase; /* Display the text in all capital letters. */
}

/* Remove default bottom margin from the homepage slider banner section and make sure it goes under the translucent menu. */
div#homeslider-banner {
    margin-bottom: 0;
	padding-top: 0px !important;
}

/* Remove default padding from the first slider section. */
div#slidersec_first {
    padding: unset !important; /* Remove any set padding. */
}

/*
 * Style the heading text within the banner on non-homepage pages.
 * Targeting a specific text module by ID and class.
 */
body:not(.home) .slidersec_first #about-heading.et_pb_text {
    margin: 0 !important;
    padding: 0 !important;
}

/* ==========================================================================
   Responsive Styles
   ========================================================================== */

/* --------------------------------------------------------------------------
   Max Width: 991px (Tablet and smaller)
   -------------------------------------------------------------------------- */
@media only screen and (max-width: 991px) {
    /* Make the professional search and MLS sections wrap their content on smaller screens. */
    .prosearch_Sec1,
    .mls_sec2 {
        flex-wrap: wrap;
    }

    /* Reverse the flex direction of the professional search section on smaller screens. */
    .prosearch_Sec1 {
        flex-direction: column-reverse;
    }

    /* Adjust the minimum height of the slider slides for tablet view. */
    .et_pb_slide {
        min-height: 320px;
        width: 100%;
        background-size: cover !important;
        background-position: center top !important;
    }

    /* Reduce the font size and line height of the main heading in the homepage slider on tablet. */
    .homepagenewslider .et_pb_slide_description h2 {
        font-size: 36px;
        line-height: 45px;
    }

    /* Reduce the font size and line height of the paragraph text in the homepage slider on tablet. */
    .homepagenewslider .et_pb_slide_description p {
        font-size: 20px;
        line-height: 40px;
    }

    /* Ensure the logo on the left-aligned header on the homepage scales down on tablet. */
    .home .et_header_style_left #logo {
        max-width: 100%;
        height: 61px;
    }

    /* Make testimonial and block images full width on tablet. */
    div#sp-testimonial-free-wrapper-9179,
    div#block-42 img {
        width: 100%;
    }

    /* Add some top padding to footer widgets on tablet. */
    .footer-widget {
        padding-top: 10px;
    }

    /* Ensure footer widgets display as a block (stacked) on tablet. */
    #footer-widgets {
        display: block;
    }

    /* Ensure the fixed header has a solid black background on tablet. */
    header#main-header.et_fixed_nav {
        background: #000 !important;
        height: 76px;
    }

    /* Center the social icons in the header on tablet. */
    ul.et-social-icons {
        display: flex !important;
        justify-content: center;
        margin-bottom: 10px;
    }

    /* Adjust the vertical position of the logo link on tablet. */
    .logo_container a {
        top: 8px;
    }

    /* Set the background color and top position of the mobile menu on tablet. */
    ul#mobile_menu {
        background: #000 !important;
        top: 76px;
    }

    /* Remove bottom margin from mobile menu items on tablet. */
    ul#mobile_menu li {
        margin-bottom: 0;
    }

    /* Style sub-menus in the mobile menu on tablet. */
    ul#mobile_menu .sub-menu {
        position: relative;
        top: 0;
        margin-top: 0;
        margin-bottom: 0;
        padding: 0;
        background: #000 !important;
    }

    /* Remove bottom margin from sub-menu items on tablet. */
    ul#mobile_menu .sub-menu li {
        margin-bottom: 0;
    }

    /* Add top margin to the homepage slider banner on tablet. */
    div#homeslider-banner {
        margin-top: 50px;
    }

    /* Remove padding from specific homepage sections on tablet. */
    .homepage-listing,
    .homepage-whowe,
    .homepage-testi,
    .homepage-posts {
        padding: 0;
    }

    /* Override padding for specific sections on the homepage on tablet. */
    body.home .homepage-listing,
    body.home .homepage-whowe,
    body.home .homepage-testi,
    body.home .homepage-posts {
        padding-left: 5px !important;
        padding-right: 5px !important;
    }

    /* Adjust the font size and line height of the banner heading on non-homepage pages on tablet. */
    body:not(.home) .slidersec_first #about-heading .et_pb_text_inner h2 {
        font-size: 18px !important;
        line-height: unset !important;
    }
}

/* --------------------------------------------------------------------------
   Max Width: 980px (Smaller Tablets and wider Phones)
   -------------------------------------------------------------------------- */
@media only screen and (max-width: 980px) {
    /* Reduce font size for contact icons in a row on smaller tablets. */
    .contacticon_row .et_pb_column {
        font-size: 14px;
    }

    /* Reduce padding for the contact icon row on smaller tablets. */
    .contacticon_row {
        padding: 15px 0;
    }

    /* Remove default margin from modules within contact icon columns on smaller tablets. */
    .contacticon_row .et_pb_column .et_pb_module {
        margin: 0;
    }

    /* Override Divi's default maximum width for rows on smaller screens. */
    .et_pb_row {
        max-width: 100% !important;
    }
}

/* --------------------------------------------------------------------------
   Max Width: 767px (Phones)
   -------------------------------------------------------------------------- */
@media only screen and (max-width: 767px) {
    /* Adjust the minimum and auto height of slider slides for mobile view. */
    .et_pb_slide {
        min-height: 240px;
        height: auto !important;
    }

    /* Adjust the positioning and disable animation of the slide description on mobile. */
    .homepagenewslider .et_pb_slide.et-pb-active-slide .et_pb_slide_description {
        animation: none !important;
        top: 60% !important; /* Move text down further on mobile. */
        transform: translate(-50%, -60%) !important;
        opacity: 1 !important; /* Ensure text is visible. */
    }

    /* Further reduce font size and line height of the main heading in the homepage slider on mobile. */
    .homepagenewslider .et_pb_slide_description h2 {
        font-size: 16px !important;
        line-height: 22px !important;
    }

    /* Further reduce font size and line height of the paragraph text in the homepage slider on mobile. */
    .homepagenewslider .et_pb_slide_description p {
        font-size: 10px !important;
        line-height: 18px !important;
    }

    /* Adjust font size and weight for contact icons on mobile. */
    .contacticon_row .et_pb_column {
        font-size: 13px;
        font-weight: 400;
    }

    /* Apply 5px padding to all homepage sections on mobile, except the first. */
    body.home .et_pb_section {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 5px !important;
        padding-right: 5px !important;
    }

    /* Ensure the first section on the homepage has no side padding on mobile. */
    body.home .et_pb_section.et_pb_section_first {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Ensure rows within homepage sections take full width and have no side padding/margin on mobile. */
    body.home .et_pb_section .et_pb_row {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin: 0 auto !important;
    }
	
	/* Remove any custom left/right padding on specific rows within homepage sections on mobile. */
    body.home .et_pb_section.et_section_regular .et_pb_row_9.et_pb_row,
    body.home .et_pb_section.et_section_regular .et_pb_row_6.et_pb_row,
    body.home .et_pb_section.et_section_regular .et_pb_row_7.et_pb_row,
    body.home .et_pb_section.et_section_regular .et_pb_row_8.et_pb_row {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Ensure columns within homepage rows stack vertically on mobile. */
    body.home .et_pb_section .et_pb_row .et_pb_column {
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 20px; /* Add some space between stacked columns. */
    }

    /* Fix for the Featured Listings heading (likely within et_pb_row_2) on mobile. */
    body.home .et_pb_row.et_pb_row_2 .et_pb_text_inner h1 {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Style individual Featured Listing items on mobile. */
    .ihf-grid-result {
        padding: 0 !important;
        margin-bottom: 20px; /* Add space between listings. */
    }

    /* Ensure the container for Featured Listings takes full width on mobile. */
    .ihf-grid-result-container {
        width: 100% !important;
        margin: 0 auto !important; /* Center the container. */
    }

    /* Style the container for Recently Sold listings on mobile. */
    .ihf-slider-col {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important; /* Force each item to take full width in flex context. */
        padding: 0 !important;
        margin-bottom: 20px; /* Add space between sold listings. */
    }

    /* Ensure the Recently Sold slideshow takes full width on mobile. */
    .ihf-slideshow {
        width: 100% !important;
    }

    /* Style individual slides within the Recently Sold slideshow on mobile. */
    .ihf-slide {
        width: 100% !important;
    }

    /* Style the image within the "Who We Are" section on mobile. */
    .who_We .et_pb_image img {
        width: 100% !important;
        height: auto !important; /* Maintain aspect ratio. */
    }

    /* Center the text within the "Who We Are" section on mobile. */
    .who_We .et_pb_text_inner {
        text-align: center;
    }

    /* Center the button within the "Who We Are" section on mobile. */
    .who_We .et_pb_button_module_wrapper {
        text-align: center;
    }
}

/* --------------------------------------------------------------------------
   Min Width: 981px (Desktop)
   -------------------------------------------------------------------------- */
@media only screen and (min-width: 981px) {
    /* Make the main header on the homepage have a semi-transparent black background on desktop. */
    body.home #main-header {
        background: rgba(0, 0, 0, 0.3) !important;
    }	
    /* Make sub-menus have a semi-transparent black background on all pages on desktop. */
    ul.sub-menu {
        background: rgba(0, 0, 0, 0.7) !important;
    }
	
	/* Pad the sub menu so it doesn't overflow the viewport. */
	.nav li ul {
        right: 10px; /* Adding !important for extra specificity, if needed */
        left: auto; /* Good practice to reset left */
        transform: translateX(0%); /* Good practice to reset transform */
    }	
}

/* In the team post content, make the icon on the same line as the phone and email. */
.member-phone-numer,
.member-email {
  display: flex;
  align-items: center;
  margin-bottom: 0.5em;
}

.bicon {
  margin-right: 8px;
  color: #0077cc; /* Adjust color to your theme */
  font-size: 1.1em;
}

.mtext span,
.mtext a {
  font-size: 1em;
  color: #333; /* Adjust if needed */
  text-decoration: none;
}

.mtext a:hover {
  text-decoration: underline;
  color: #005fa3;
}