.elementor-276 .elementor-element.elementor-element-94bf8ff{--display:flex;--justify-content:flex-start;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-276 .elementor-element.elementor-element-7b6ad7a{--e-transform-translateY:-49px;}@media(max-width:1024px){.elementor-276 .elementor-element.elementor-element-94bf8ff{--flex-wrap:wrap;}.elementor-276 .elementor-element.elementor-element-7b6ad7a{--e-transform-translateY:-49px;}}@media(max-width:767px){.elementor-276 .elementor-element.elementor-element-94bf8ff{--min-height:0px;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:flex-start;--align-items:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--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-276 .elementor-element.elementor-element-7b6ad7a{--e-transform-translateX:0px;--e-transform-translateY:-33px;}}/* Start custom CSS for html, class: .elementor-element-7b6ad7a */<!--
  DUBAI HOMES — Hero Section (with video background)
  ---------------------------------------------------
  Video source is already set to:
  https://dubaihomes.ae/wp-content/uploads/2026/07/video_for_mobile_dh_compressed.mp4

  HOW TO USE IN WORDPRESS:
  1. Edit the page where you want this hero.
  2. Add a "Custom HTML" block (Gutenberg) — or if you use Elementor/Divi,
     drag in an "HTML" / "Code" widget instead.
  3. Paste this ENTIRE file's contents into that block.
  That's it — no plugins required.
-->

<section class="dh-hero">
  <video class="dh-hero-video" autoplay muted loop playsinline>
    <source src="https://dubaihomes.ae/wp-content/uploads/2026/07/video_for_mobile_dh_compressed.mp4" type="video/mp4">
  </video>

  <div class="dh-overlay"></div>

  <div class="dh-content">
    <p class="dh-eyebrow">Welcome to</p>
    <h1 class="dh-title">Dubai Homes</h1>
    <div class="dh-rule"></div>
    <p class="dh-sub">Dubai's trusted digital media platform covering the city's news, real estate, business and lifestyle.</p>

    <nav class="dh-links" aria-label="Dubai Homes quick links">
      <a class="dh-link" href="https://dubaihomes.ae/brand-collaboration/" target="_blank" rel="noopener">
        Brand Collaboration
      </a>
      <a class="dh-link" href="https://dubaihomes.ae/property-investment-application/" target="_blank" rel="noopener">
        Property Investment Application
      </a>
      <a class="dh-link" href="https://whatsapp.com/channel/0029VbCasN6IyPtTZpVj3i1w" target="_blank" rel="noopener">
        Link From Our Latest Post
      </a>
      <a class="dh-link" href="#" target="_blank" rel="noopener">
        <!-- REPLACE ME: Dubai Offers link (add once page is created) -->
        Dubai Offers
      </a>
    </nav>
  </div>
</section>

<style>
  @import url('https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500&family=Inter:wght@300;400;500&display=swap');

  .dh-hero {
    --dh-ink: #F5F1E8;
    --dh-ink-muted: rgba(245, 241, 232, 0.72);
    --dh-gold: #9A9A94;
    --dh-border: rgba(245, 241, 232, 0.38);
    --dh-border-hover: #9A9A94;

    position: relative;
    width: 100vw;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;

    background-color: #000000; /* shows briefly while video loads */

    box-sizing: border-box;
    padding: 0;
    overflow: hidden;
  }

  .dh-hero * { box-sizing: border-box; }

  .dh-hero-video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    object-fit: cover;
    z-index: 0;
  }

  .dh-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6); /* darkens whole video so text stays readable everywhere */
    z-index: 1;
  }

  .dh-content {
    position: relative;
    z-index: 2;
    max-width: 720px;
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 48px 32px;
  }

  .dh-eyebrow {
    font-family: 'Jost', sans-serif;
    font-weight: 400;
    font-size: 13px;
    letter-spacing: 0.45em;
    text-transform: uppercase;
    color: var(--dh-ink-muted);
    margin: 0 0 18px 0;
  }

  .dh-title {
    font-family: 'Jost', sans-serif;
    font-weight: 300;
    font-size: clamp(40px, 8vw, 84px);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--dh-ink);
    margin: 0;
    line-height: 1.05;
  }

  .dh-rule {
    width: 0;
    height: 1px;
    background: var(--dh-gold);
    margin: 28px 0;
    animation: dh-draw 1.1s ease-out 0.3s forwards;
  }

  @keyframes dh-draw {
    to { width: 96px; }
  }

  .dh-sub {
    font-family: 'Inter', sans-serif;
    font-weight: 300;
    font-size: clamp(15px, 2vw, 18px);
    line-height: 1.6;
    color: var(--dh-ink-muted);
    margin: 0 0 48px 0;
    max-width: 520px;
  }

  .dh-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    width: 100%;
    max-width: 560px;
  }

  .dh-link {
    flex: 1 1 calc(50% - 7px);
    max-width: calc(50% - 7px);
    font-family: 'Jost', sans-serif;
    font-weight: 400;
    font-size: 12.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--dh-ink);
    text-decoration: none;
    border: 1px solid var(--dh-border);
    padding: 18px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.4;
    transition: border-color 0.25s ease, background-color 0.25s ease, color 0.25s ease;
    background: rgba(0,0,0,0.08);
  }

  .dh-link:hover,
  .dh-link:focus-visible {
    border-color: var(--dh-border-hover);
    background: var(--dh-gold);
    color: #17140a;
  }

  .dh-link:focus-visible {
    outline: 2px solid var(--dh-ink);
    outline-offset: 3px;
  }

  @media (prefers-reduced-motion: reduce) {
    .dh-rule { animation: none; width: 96px; }
  }

  @media (max-width: 900px) {
    .dh-content { padding: 36px 20px; }
    .dh-eyebrow { letter-spacing: 0.32em; }
  }

  @media (max-width: 560px) {
    .dh-link { max-width: 100%; flex-basis: 100%; }
  }
</style>/* End custom CSS */