/*
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
*/





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

/* Reserve space for the SVG logo and kill layout shift */
.image-logo,
.site-logo,
.header-logo img {
  aspect-ratio: 990 / 236;
  height: auto;
  width: auto; /* let your container or max-width control the size */
}

/* PARENT: full-viewport hero */
.hero{
  position: relative;
  width: 100%;
  min-height: 90vh !important;          /* full screen */
  overflow: hidden;           /* crop any overflow */
  display: block;             /* keep Elementor happy */
  max-height: 92vh !important;
}

@supports (height: 100svh) {
  .hero {
    min-height: 90svh !important;
    max-height: 92svh !important;
  }
}

@supports (height: 100dvh) {
  .hero {
    min-height: 90dvh !important;
    max-height: 92dvh !important;
  }
}


/* MEDIA LAYER: spans the hero */
.hero-media{
  position: absolute;
  inset: 0;                   /* top/right/bottom/left: 0 */
  z-index: 0;
}

/* If your Elementor CSS linter complains about 'inset', swap to explicit edges:
   .hero-media{position:absolute; top:0; right:0; bottom:0; left:0; z-index:0;} */

/* Ensure the HTML/Image widget stretches */
.hero-media .elementor-widget-container,
.hero-media .elementor-widget-html,
.hero-media .elementor-widget-image{
  height: 100%;
}

/* The <img> itself: behave like background-size: cover */
.hero-media img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;    /* adjust if you need a different focal point */
}

/* OVERLAY above the image (click-through) */
.hero-overlay{
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;       /* overlay is decorative */
  /* Example tint: */
  background: linear-gradient(180deg, rgba(0,0,0,.1), rgba(0,0,0,.25));
}

/* CONTENT always on top */
.hero-content{
  position: relative;
  z-index: 2;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0,0,0,.25); /* readability */
  /* comfortable default spacing; tune by breakpoint in Elementor if you prefer */
  padding: clamp(20px, 5vw, 64px);
  
}

/* Optional: left-align content and pin to top-left a bit on wide screens */
@media (min-width: 1025px){
  .hero-content{ padding: 80px 64px; }
}
@media (max-width: 1024px){
  .hero-content{ padding: 64px 24px; }
}
@media (max-width: 767px){
  .hero-content{ padding: 40px 16px; }
}