.elementor-66 .elementor-element.elementor-element-f2afd6c{--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-66 .elementor-element.elementor-element-8d94930{--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;}:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-003c585 *//* --- 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 */