.elementor-61 .elementor-element.elementor-element-54c9906{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-61 .elementor-element.elementor-element-03465e9{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-61 .elementor-element.elementor-element-cdd652b{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-c7e25f7 *//* --- Cinematic Hero --- */
  .gr-hero {
    position: relative;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: ##fafafa;
    background-image: url('https://quarters-projects-6hjoleql3k.live-website.com/wp-content/uploads/2026/06/IMG_4913.webp');
    background-size: cover;
    background-position: center;
    filter: contrast(1.1) saturate(1.1); 
    overflow: hidden;

    /* ADD THESE TWO LINES FOR THE FADE EFFECT */
    mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
  }/* End custom CSS */