.elementor-7025 .elementor-element.elementor-element-c7f77bf{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-7025 .elementor-element.elementor-element-8ea456d{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-7025 .elementor-element.elementor-element-3324610{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-7025 .elementor-element.elementor-element-e1f8708{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-7025 .elementor-element.elementor-element-2341bdf{width:100%;max-width:100%;}.elementor-7025 .elementor-element.elementor-element-e826922{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-7025 .elementor-element.elementor-element-d85d0bb{--display:flex;--padding-top:50px;--padding-bottom:50px;--padding-left:0px;--padding-right:0px;}.elementor-7025 .elementor-element.elementor-element-6f6374c{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-7025 .elementor-element.elementor-element-b77350a{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-7025 .elementor-element.elementor-element-6be5eab{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-7025 .elementor-element.elementor-element-611c14b{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-7025 .elementor-element.elementor-element-ce735db{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-7025 .elementor-element.elementor-element-33935a2{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-7025 .elementor-element.elementor-element-23e7011{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-7025 .elementor-element.elementor-element-047bab4{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-7025 .elementor-element.elementor-element-bb9fa8c{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-7025 .elementor-element.elementor-element-84c2373{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-7025 .elementor-element.elementor-element-3cb1e53{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-7025 .elementor-element.elementor-element-81c3d0f{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-7025 .elementor-element.elementor-element-1e079283{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--overflow:hidden;--overlay-opacity:1;--padding-top:50px;--padding-bottom:50px;--padding-left:20px;--padding-right:20px;}.elementor-7025 .elementor-element.elementor-element-1e079283::before, .elementor-7025 .elementor-element.elementor-element-1e079283 > .elementor-background-video-container::before, .elementor-7025 .elementor-element.elementor-element-1e079283 > .e-con-inner > .elementor-background-video-container::before, .elementor-7025 .elementor-element.elementor-element-1e079283 > .elementor-background-slideshow::before, .elementor-7025 .elementor-element.elementor-element-1e079283 > .e-con-inner > .elementor-background-slideshow::before, .elementor-7025 .elementor-element.elementor-element-1e079283 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{--background-overlay:'';}.elementor-7025 .elementor-element.elementor-element-1b5e7054{--display:flex;--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--gap:10px 10px;--row-gap:10px;--column-gap:10px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-7025 .elementor-element.elementor-element-459fa524{width:100%;max-width:100%;}.elementor-7025 .elementor-element.elementor-element-34b18a99{--display:flex;--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:center;--align-items:center;--gap:10px 10px;--row-gap:10px;--column-gap:10px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-7025 .elementor-element.elementor-element-2687cff7{width:var( --container-widget-width, 92% );max-width:92%;--container-widget-width:92%;--container-widget-flex-grow:0;}.elementor-7025 .elementor-element.elementor-element-08290e3{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-7025 .elementor-element.elementor-element-74d16f0{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-7025 .elementor-element.elementor-element-5b2e8c7{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-7025 .elementor-element.elementor-element-f272796{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-7025 .elementor-element.elementor-element-301bd5b{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-7025 .elementor-element.elementor-element-f1de5ab{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}@media(max-width:1366px){.elementor-7025 .elementor-element.elementor-element-1e079283{--padding-top:100px;--padding-bottom:100px;--padding-left:20px;--padding-right:20px;}}@media(max-width:1024px){.elementor-7025 .elementor-element.elementor-element-1e079283{--padding-top:70px;--padding-bottom:70px;--padding-left:20px;--padding-right:20px;}.elementor-7025 .elementor-element.elementor-element-1b5e7054{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-7025 .elementor-element.elementor-element-34b18a99{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}}@media(max-width:767px){.elementor-7025 .elementor-element.elementor-element-1e079283{--padding-top:50px;--padding-bottom:50px;--padding-left:15px;--padding-right:15px;}.elementor-7025 .elementor-element.elementor-element-1b5e7054{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-7025 .elementor-element.elementor-element-34b18a99{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}}@media(min-width:768px){.elementor-7025 .elementor-element.elementor-element-8ea456d{--width:100%;}.elementor-7025 .elementor-element.elementor-element-1b5e7054{--width:100%;}}/* Start custom CSS for html, class: .elementor-element-c6f83c0 *//* =========================================================
   DUA ESTATE & MARKETING
   ABOUT US — PREMIUM PHOTOGRAPHIC HERO
   WIDTH SYSTEM: MAX 1280PX
   DESIGN UNCHANGED
   ========================================================= */

.dem-photo-about-hero {
  width: 100%;
  max-width: 100%;
  min-width: 0;

  min-height: 590px;

  position: relative;
  overflow: hidden;

  background-image:
    url("https://duaestatemarketing.com.pk/wp-content/uploads/2026/10/Luxury-Terrace-Overlooking-Faisal-Mosque-at-Sunset.jpg");

  background-size: cover;
  background-position: center center;

  color: #ffffff;
}


/* =========================================================
   STRONG BRAND OVERLAY
   ========================================================= */

.dem-photo-about-overlay {
  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      90deg,
      rgba(4,22,43,.995) 0%,
      rgba(4,22,43,.985) 23%,
      rgba(4,22,43,.965) 37%,
      rgba(5,29,54,.925) 49%,
      rgba(7,42,76,.76) 64%,
      rgba(5,31,58,.43) 82%,
      rgba(4,22,43,.22) 100%
    );

  z-index: 1;
}


/* =========================================================
   BLUE BRAND GLOW
   ========================================================= */

.dem-photo-about-glow {
  position: absolute;
  inset: 0;

  z-index: 2;

  pointer-events: none;

  background:
    radial-gradient(
      circle at 74% 48%,
      rgba(15,92,170,.20) 0%,
      rgba(15,92,170,.07) 30%,
      transparent 61%
    );
}


/* =========================================================
   MAIN CONTENT
   MAX WIDTH = 1280PX
   LEFT / RIGHT PADDING = 0
   ========================================================= */

.dem-photo-about-inner {
  width: 100%;
  max-width: 1380px;

  min-height: 590px;

  margin: 0 auto;

  padding: 78px 0 70px;

  box-sizing: border-box;

  position: relative;
  z-index: 5;

  display: flex;
  align-items: center;
}


/* =========================================================
   LEFT CONTENT
   ========================================================= */

.dem-photo-about-content {
  width: 66%;

  position: relative;
  z-index: 10;
}


/* =========================================================
   ABOUT US LABEL
   ========================================================= */

.dem-photo-about-label {
  display: flex;
  align-items: center;

  gap: 16px;

  margin-bottom: 26px;

  color: #ff7a1a;

  font-size: 13px;
  font-weight: 700;

  letter-spacing: 4px;
  line-height: 1;
}


.dem-photo-about-label span {
  display: block;

  width: 30px;
  height: 2px;

  background: #ff7a1a;
}


/* =========================================================
   HEADING
   ========================================================= */

.dem-photo-about-content h1 {
  margin: 0 0 31px;

  max-width: 760px;

  color: #ffffff;

  font-size: clamp(48px, 5vw, 70px);

  font-weight: 700;

  line-height: 1.04;

  letter-spacing: -2.7px;
}


/* =========================================================
   DESCRIPTION
   ========================================================= */

.dem-photo-about-description {
  max-width: 735px;

  margin: 0 0 32px;

  color: rgba(239,246,252,.93);

  font-size: 16.5px;

  line-height: 1.82;

  font-weight: 400;
}


/* =========================================================
   PREMIUM CTA
   ========================================================= */

.dem-photo-about-button {
  display: inline-flex;

  align-items: stretch;
  justify-content: flex-start;

  width: 250px;
  height: 58px;

  overflow: hidden;

  border-radius: 8px;

  background:
    linear-gradient(
      135deg,
      #ff821f 0%,
      #ff7415 100%
    );

  border: 1px solid rgba(255,151,76,.75);

  color: #ffffff !important;

  text-decoration: none !important;

  box-shadow:
    0 10px 28px rgba(0,0,0,.20);

  transition:
    transform .25s ease,
    box-shadow .25s ease,
    background .25s ease;
}


/* BUTTON TEXT */

.dem-photo-about-button-text {
  flex: 1;

  display: flex;

  align-items: center;

  padding-left: 22px;

  color: #ffffff;

  font-size: 15px;

  font-weight: 600;

  letter-spacing: .1px;

  white-space: nowrap;
}


/* BUTTON ARROW */

.dem-photo-about-button-arrow {
  width: 56px;

  display: flex;

  align-items: center;
  justify-content: center;

  border-left: 1px solid rgba(255,255,255,.22);

  color: #ffffff;

  font-size: 23px;

  font-weight: 300;

  line-height: 1;

  transition:
    background .25s ease,
    transform .25s ease;
}


/* BUTTON HOVER */

.dem-photo-about-button:hover {
  background:
    linear-gradient(
      135deg,
      #ff8b2b 0%,
      #f36d0d 100%
    );

  color: #ffffff !important;

  transform: translateY(-2px);

  box-shadow:
    0 14px 34px rgba(0,0,0,.28);
}


.dem-photo-about-button:hover
.dem-photo-about-button-arrow {
  background: rgba(255,255,255,.08);

  transform: translateX(2px);
}


/* =========================================================
   RIGHT INFORMATION
   ========================================================= */

.dem-photo-about-side {
  position: absolute;

  top: 76px;
  right: 0;

  z-index: 15;

  display: flex;

  flex-direction: column;

  gap: 10px;

  padding-left: 23px;

  border-left: 1px solid rgba(219,235,248,.30);
}


.dem-photo-about-side span {
  color: rgba(235,245,252,.72);

  font-size: 10px;

  font-weight: 500;

  letter-spacing: 3px;

  line-height: 1.2;
}


.dem-photo-about-side i {
  display: block;

  width: 52px;
  height: 2px;

  margin-top: 7px;

  background: #ff7a1a;
}


/* =========================================================
   DECORATIVE DETAIL
   ========================================================= */

.dem-photo-about-detail {
  position: absolute;

  right: 19%;
  bottom: 11%;

  width: 190px;
  height: 190px;

  z-index: 4;

  pointer-events: none;
}


.dem-photo-about-detail-line {
  position: absolute;

  left: 50%;
  top: 0;

  width: 1px;
  height: 100%;

  background:
    linear-gradient(
      to bottom,
      transparent,
      rgba(255,122,26,.75) 25%,
      rgba(255,122,26,.75) 75%,
      transparent
    );
}


.dem-photo-about-detail-circle {
  position: absolute;

  width: 170px;
  height: 170px;

  top: 10px;
  left: 10px;

  border: 1px solid rgba(117,175,222,.18);

  border-radius: 50%;
}


/* =========================================================
   LARGE DESKTOP
   ========================================================= */

@media (min-width: 1400px) {

  .dem-photo-about-hero {
    background-position: center 55%;
  }

  .dem-photo-about-inner {
    padding-left: 0;
    padding-right: 0;
  }

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {

  .dem-photo-about-hero {
    min-height: 540px;
  }

  .dem-photo-about-inner {
    width: 100%;
    max-width: 100%;

    min-height: 540px;

    padding: 65px 0;
  }

  .dem-photo-about-content {
    width: 70%;
  }

  .dem-photo-about-content h1 {
    font-size: 52px;

    letter-spacing: -2px;
  }

  .dem-photo-about-description {
    max-width: 650px;

    font-size: 15.5px;
  }

  .dem-photo-about-side {
    right: 0;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

  .dem-photo-about-hero {
    min-height: 0;

    background-position: 63% center;
  }


  /* MOBILE OVERLAY */

  .dem-photo-about-overlay {
    background:
      linear-gradient(
        180deg,
        rgba(4,22,43,.99) 0%,
        rgba(4,22,43,.975) 30%,
        rgba(5,29,54,.93) 56%,
        rgba(4,22,43,.78) 100%
      );
  }


  /* MAIN */

  .dem-photo-about-inner {
    width: 100%;
    max-width: 100%;

    min-height: 0;

    padding: 50px 20px 48px;

    display: block;
  }


  /* CONTENT */

  .dem-photo-about-content {
    width: 100%;
  }


  /* LABEL */

  .dem-photo-about-label {
    gap: 10px;

    margin-bottom: 21px;

    font-size: 10px;

    letter-spacing: 3px;
  }


  .dem-photo-about-label span {
    width: 43px;
  }


  /* HEADING */

  .dem-photo-about-content h1 {
    margin-bottom: 22px;

    font-size: 36px;

    line-height: 1.08;

    letter-spacing: -1.2px;
  }


  /* DESCRIPTION */

  .dem-photo-about-description {
    max-width: 100%;

    margin-bottom: 25px;

    font-size: 14.5px;

    line-height: 1.72;
  }


  /* CTA */

  .dem-photo-about-button {
    width: 100%;

    max-width: 200px !important;

    height: 55px;

    border-radius: 8px;
  }


  .dem-photo-about-button-text {
    padding-left: 19px;

    font-size: 14px;
  }


  .dem-photo-about-button-arrow {
    width: 52px;

    font-size: 21px;
  }


  /* SIDE INFORMATION */

  .dem-photo-about-side {
    position: relative;

    top: auto;
    right: auto;

    margin-top: 40px;

    width: max-content;

    padding-left: 17px;

    gap: 8px;
  }


  .dem-photo-about-side span {
    font-size: 9px;

    letter-spacing: 2.5px;
  }


  .dem-photo-about-side i {
    width: 42px;

    height: 2px;

    margin-top: 5px;
  }


  /* DECORATIVE CIRCLE */

  .dem-photo-about-detail {
    right: -30px;

    bottom: 20px;

    width: 145px;
    height: 145px;

    opacity: .50;
  }


  .dem-photo-about-detail-circle {
    width: 130px;
    height: 130px;
  }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

  .dem-photo-about-hero {
    background-position: 64% center;
  }


  .dem-photo-about-inner {
    width: 100%;

    padding: 46px 18px 45px;
  }


  .dem-photo-about-content h1 {
    font-size: 32px;

    letter-spacing: -1px;
  }


  .dem-photo-about-description {
    font-size: 14px;

    line-height: 1.7;
  }


  .dem-photo-about-button {
    max-width: 200px !important;

    height: 53px;
  }


  .dem-photo-about-button-text {
    padding-left: 17px;

    font-size: 13.5px;
  }


  .dem-photo-about-button-arrow {
    width: 49px;
  }


  .dem-photo-about-side {
    margin-top: 35px;
  }


  .dem-photo-about-detail {
    right: -60px;

    bottom: 15px;

    opacity: .35;
  }

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-2341bdf *//* =========================================================
   DUA ESTATE & MARKETING
   OUR STORY
   PREMIUM 1280px VERSION
   ========================================================= */

.dem-story-section {
    width: 100%;
    padding: 95px 0;
    background: #f6f8fb;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
}

.dem-story-section *,
.dem-story-section *::before,
.dem-story-section *::after {
    box-sizing: border-box;
}


/* =========================================================
   BACKGROUND DETAILS
   ========================================================= */

.dem-story-section::before {
    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    right: -250px;
    top: -260px;

    border: 1px solid rgba(6, 27, 51, 0.045);
    border-radius: 50%;

    pointer-events: none;
}

.dem-story-section::after {
    content: "";

    position: absolute;

    width: 320px;
    height: 320px;

    left: -180px;
    bottom: -190px;

    border: 1px solid rgba(244, 123, 32, 0.055);
    border-radius: 50%;

    pointer-events: none;
}


/* =========================================================
   MAIN CONTAINER
   ========================================================= */

.dem-story-inner {
    width: 100%;
    max-width: 1380px;

    margin: 0 auto;
    padding: 0;

    display: grid;
    grid-template-columns: 1.12fr 0.88fr;

    gap: 80px;

    align-items: stretch;

    position: relative;
    z-index: 2;
}


/* =========================================================
   LEFT CONTENT
   ========================================================= */

.dem-story-content {
    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 10px 0;
}


/* =========================================================
   EYEBROW
   ========================================================= */

.dem-story-eyebrow {
    display: flex;
    align-items: center;

    gap: 14px;

    margin-bottom: 19px;

    color: #f47b20;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: 700;

    letter-spacing: 3.5px;
    line-height: 1;

    text-transform: uppercase;
}

.dem-story-eyebrow span {
    display: block;

    width: 42px;
    height: 2px;

    background: #f47b20;

    flex-shrink: 0;
}


/* =========================================================
   TITLE
   ========================================================= */

.dem-story-title {
    margin: 0 0 24px;

    color: #061b33;

    font-family: Arial, Helvetica, sans-serif;
    font-size: clamp(45px, 4.7vw, 64px);
    font-weight: 700;

    line-height: 1.02;
    letter-spacing: -2.7px;
}

.dem-story-title em {
    color: #f47b20;
    font-style: normal;
}


/* =========================================================
   LEAD
   ========================================================= */

.dem-story-lead {
    max-width: 760px;

    margin: 0 0 21px;

    color: #40556d;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    font-weight: 500;

    line-height: 1.72;
}


/* =========================================================
   SECOND PARAGRAPH
   ========================================================= */

.dem-story-text {
    max-width: 735px;

    margin: 0;

    color: #697b8e;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: 400;

    line-height: 1.72;
}


/* =========================================================
   RIGHT PANEL
   ========================================================= */

.dem-story-panel {
    min-height: 455px;

    position: relative;
    overflow: hidden;

    padding: 35px 36px 32px;

    display: flex;
    flex-direction: column;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(244, 123, 32, 0.16) 0,
            rgba(244, 123, 32, 0.045) 120px,
            transparent 235px
        ),
        #061b33;

    border-radius: 15px;

    box-shadow:
        0 20px 48px rgba(6, 27, 51, 0.14);
}


/* =========================================================
   PANEL DECORATION
   ========================================================= */

.dem-story-panel::before {
    content: "";

    position: absolute;

    width: 310px;
    height: 310px;

    right: -175px;
    top: -175px;

    border: 1px solid rgba(244, 123, 32, 0.20);

    border-radius: 50%;
}

.dem-story-panel::after {
    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    left: -110px;
    bottom: -120px;

    border: 1px solid rgba(255, 255, 255, 0.07);

    border-radius: 50%;
}


/* =========================================================
   PANEL TOP
   ========================================================= */

.dem-story-panel-number {
    position: relative;
    z-index: 2;

    color: rgba(255, 255, 255, 0.12);

    font-family: Arial, Helvetica, sans-serif;
    font-size: 54px;
    font-weight: 300;

    line-height: 0.8;
    letter-spacing: -3px;
}

.dem-story-panel-label {
    position: relative;
    z-index: 2;

    margin-top: 17px;

    color: #f47b20;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-weight: 700;

    letter-spacing: 2.7px;

    text-transform: uppercase;
}


/* =========================================================
   DIVIDER
   ========================================================= */

.dem-story-divider {
    width: 100%;
    height: 1px;

    margin: 27px 0 30px;

    background: rgba(255, 255, 255, 0.11);

    position: relative;
    z-index: 2;
}


/* =========================================================
   STAT
   ========================================================= */

.dem-story-stat {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: baseline;

    gap: 13px;
}

.dem-story-stat strong {
    color: #ffffff;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 72px;
    font-weight: 700;

    line-height: 0.95;
    letter-spacing: -3px;
}

.dem-story-stat span {
    color: #f47b20;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: 700;

    letter-spacing: 2.5px;
}


/* =========================================================
   PANEL TEXT
   ========================================================= */

.dem-story-panel-text {
    max-width: 340px;

    margin: 18px 0 0;

    position: relative;
    z-index: 2;

    color: rgba(255, 255, 255, 0.68);

    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;

    line-height: 1.65;
}


/* =========================================================
   PANEL BOTTOM
   ========================================================= */

.dem-story-panel-bottom {
    margin-top: auto;

    display: flex;
    align-items: center;

    gap: 13px;

    position: relative;
    z-index: 2;
}

.dem-story-panel-bottom span {
    width: 30px;
    height: 2px;

    display: block;

    background: #f47b20;
}

.dem-story-panel-bottom p {
    margin: 0;

    color: rgba(255, 255, 255, 0.58);

    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-weight: 700;

    line-height: 1.5;
    letter-spacing: 1.8px;

    text-transform: uppercase;
}


/* =========================================================
   EXACT 1280px DESKTOP
   ========================================================= */

@media (min-width: 1281px) {

    .dem-story-inner {
        width: 1280px;
        max-width: 1280px;
    }

}


/* =========================================================
   LAPTOP
   ========================================================= */

@media (max-width: 1280px) {

    .dem-story-inner {
        width: calc(100% - 60px);

        gap: 55px;
    }

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 950px) {

    .dem-story-section {
        padding: 80px 0;
    }

    .dem-story-inner {
        width: calc(100% - 44px);

        grid-template-columns: 1fr;

        gap: 40px;
    }

    .dem-story-content {
        padding: 0;
    }

    .dem-story-title {
        font-size: 53px;
    }

    .dem-story-panel {
        min-height: 400px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .dem-story-section {
        padding: 62px 0;
    }

    .dem-story-inner {
        width: calc(100% - 28px);

        gap: 30px;
    }

    .dem-story-eyebrow {
        gap: 11px;

        margin-bottom: 16px;

        font-size: 10px;
        letter-spacing: 2.8px;
    }

    .dem-story-eyebrow span {
        width: 30px;
    }

    .dem-story-title {
        margin-bottom: 19px;

        font-size: clamp(39px, 11vw, 51px);

        line-height: 1;
        letter-spacing: -2px;
    }

    .dem-story-lead {
        margin-bottom: 18px;

        font-size: 16px;
        line-height: 1.65;
    }

    .dem-story-text {
        font-size: 15px;
        line-height: 1.65;
    }

    .dem-story-panel {
        min-height: 375px;

        padding: 28px 24px 26px;

        border-radius: 14px;
    }

    .dem-story-panel-number {
        font-size: 45px;
    }

    .dem-story-panel-label {
        margin-top: 14px;

        font-size: 9px;
        letter-spacing: 2.2px;
    }

    .dem-story-divider {
        margin: 23px 0 25px;
    }

    .dem-story-stat strong {
        font-size: 59px;
    }

    .dem-story-panel-text {
        font-size: 13.5px;
    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 420px) {

    .dem-story-section {
        padding: 54px 0;
    }

    .dem-story-inner {
        width: calc(100% - 22px);
    }

    .dem-story-title {
        font-size: 36px;
    }

    .dem-story-lead {
        font-size: 15px;
    }

    .dem-story-text {
        font-size: 14.5px;
    }

    .dem-story-panel {
        min-height: 360px;

        padding: 25px 20px 23px;
    }

    .dem-story-stat strong {
        font-size: 54px;
    }

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-002a78c *//* =========================================
   DUA ESTATE — FOUNDER SECTION
========================================= */

.dem-founder,
.dem-founder * {
  box-sizing: border-box;
}

.dem-founder {
  --dem-navy: #0b2744;
  --dem-deep-navy: #061b33;
  --dem-orange: #f47b20;
  --dem-white: #ffffff;

  width: 100%;
  max-width: 1300px;
  margin: 0 auto;

  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;

  min-height: 560px;
  overflow: hidden;
  position: relative;
  isolation: isolate;

  border-radius: 12px;
  background: var(--dem-navy);
  box-shadow: 0 22px 50px rgba(6, 27, 51, 0.13);
}

/* LEFT CONTENT */

.dem-founder__content {
  position: relative;
  isolation: isolate;
  overflow: hidden;

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;

  min-width: 0;
  padding: 54px 52px;

  color: var(--dem-white);

  background:
    radial-gradient(
      circle at 0% 100%,
      rgba(244, 123, 32, 0.10),
      transparent 36%
    ),
    linear-gradient(
      145deg,
      #0b2744 0%,
      #061b33 100%
    );
}

/* Subtle Circle Decoration */

.dem-founder__content::before,
.dem-founder__content::after {
  content: "";
  position: absolute;
  z-index: -1;

  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 50%;
  pointer-events: none;
}

.dem-founder__content::before {
  width: 290px;
  height: 290px;
  top: -145px;
  right: -150px;
}

.dem-founder__content::after {
  width: 205px;
  height: 205px;
  top: -102px;
  right: -108px;
}

/* Orange Accent */

.dem-founder__accent {
  display: block;
  flex-shrink: 0;

  width: 56px;
  height: 4px;
  margin-bottom: 23px;

  border-radius: 10px;
  background: var(--dem-orange);
}

/* Eyebrow */

.dem-founder__eyebrow {
  display: block;
  margin: 0 0 15px;

  color: #ffb77e;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 1.8px;
  text-transform: uppercase;
}

/* Heading */

.dem-founder__quote {
  width: 100%;
  max-width: 540px;

  position: relative;
  z-index: 1;

  margin: 0 0 20px;
  padding: 0;
  border: 0;

  color: #ffffff;
  font-size: clamp(27px, 2.35vw, 34px);
  font-weight: 700;
  line-height: 1.42;
  letter-spacing: -0.55px;
  overflow-wrap: break-word;
}

/* Description */

.dem-founder__description {
  width: 100%;
  max-width: 465px;

  margin: 0 0 25px;
  padding: 0;

  color: rgba(255, 255, 255, 0.80);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.85;
}

/* Founder Details */

.dem-founder__profile {
  margin: 0 0 24px;
  padding: 0;
}

.dem-founder__name {
  margin: 0 0 4px;
  padding: 0;

  color: #ffffff;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
}

.dem-founder__role {
  margin: 0 0 5px;
  padding: 0;

  color: #ffb77e;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: 1.1px;
  text-transform: uppercase;
}

.dem-founder__company {
  margin: 0;
  padding: 0;

  color: rgba(255, 255, 255, 0.72);
  font-size: 13px;
  line-height: 1.7;
}

/* Facebook Button */

.dem-founder__button {
  position: relative;
  z-index: 2;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;

  max-width: 100%;
  min-height: 46px;
  padding: 11px 18px;

  border: 1px solid rgba(255, 255, 255, 0.38);
  border-radius: 8px;

  background: transparent;
  color: #ffffff;

  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  text-decoration: none;
}

.dem-founder__button span {
  color: var(--dem-orange);
  font-size: 18px;
  line-height: 1;
}

/* RIGHT IMAGE AREA */

.dem-founder__image-wrap {
  position: relative;
  min-width: 0;
  min-height: 560px;
  overflow: hidden;

  background: #e9edf1;
}

/* Image centered both vertically and horizontally */

.dem-founder__image {
  display: block;

  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;
  min-height: 0;
  max-width: none;

  object-fit: cover;
  object-position: 50% 50%;
}

/* Image Label */

.dem-founder__image-label {
  position: absolute;
  right: 20px;
  bottom: 20px;

  display: flex;
  align-items: center;
  gap: 10px;

  max-width: calc(100% - 40px);
  padding: 12px 15px;

  border: 1px solid rgba(255, 255, 255, 0.20);
  border-radius: 8px;

  background: rgba(6, 27, 51, 0.90);
  color: #ffffff;

  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
}

.dem-founder__label-line {
  display: block;
  flex: 0 0 22px;

  width: 22px;
  height: 3px;

  border-radius: 10px;
  background: var(--dem-orange);
}

/* =========================================
   TABLET
========================================= */

@media (max-width: 1024px) {
  .dem-founder {
    grid-template-columns: 1fr 0.9fr;
    min-height: 500px;
  }

  .dem-founder__content {
    padding: 40px 30px;
  }

  .dem-founder__quote {
    font-size: 28px;
    line-height: 1.45;
  }

  .dem-founder__description {
    font-size: 14px;
    line-height: 1.8;
  }

  .dem-founder__image-wrap {
    min-height: 500px;
  }
}

/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {
  .dem-founder {
    width: 100%;
    grid-template-columns: minmax(0, 1fr);

    min-height: 0;
    border-radius: 12px;

    box-shadow: 0 15px 35px rgba(6, 27, 51, 0.12);
  }

  .dem-founder__content {
    width: 100%;
    min-width: 0;

    padding: 32px 24px 30px;
  }

  .dem-founder__accent {
    width: 48px;
    margin-bottom: 20px;
  }

  .dem-founder__eyebrow {
    margin-bottom: 13px;
    font-size: 10px;
    letter-spacing: 1.6px;
  }

  .dem-founder__quote {
    max-width: 100%;
    margin-bottom: 16px;

    font-size: clamp(24px, 6vw, 29px);
    line-height: 1.43;
    letter-spacing: -0.3px;
  }

  .dem-founder__description {
    max-width: 100%;
    margin-bottom: 22px;

    font-size: 14px;
    line-height: 1.8;
  }

  .dem-founder__profile {
    margin-bottom: 21px;
  }

  .dem-founder__name {
    font-size: 19px;
  }

  .dem-founder__role {
    font-size: 11px;
  }

  .dem-founder__company {
    font-size: 13px;
  }

  .dem-founder__button {
    min-height: 46px;
    padding: 11px 16px;
    gap: 12px;
    font-size: 13px;
  }

  .dem-founder__image-wrap {
    width: 100%;
    height: clamp(320px, 95vw, 430px);
    min-height: 0;
  }

  .dem-founder__image {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: 50% 50%;
  }

  .dem-founder__image-label {
    right: 14px;
    bottom: 14px;

    gap: 8px;
    padding: 10px 12px;
    font-size: 11px;
  }
}

/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 380px) {
  .dem-founder__content {
    padding: 27px 19px;
  }

  .dem-founder__quote {
    font-size: 24px;
    line-height: 1.45;
  }

  .dem-founder__description {
    font-size: 13px;
  }

  .dem-founder__image-wrap {
    height: 300px;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-8931a3b *//* =========================================================
   DUA ESTATE & MARKETING
   WHAT WE DO — WIDTH CORRECTION
   MAX WIDTH: 1280PX
   DESIGN UNCHANGED
   ========================================================= */

.dem-about-services {
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow: hidden;

  background:
    radial-gradient(
      circle at 72% 48%,
      rgba(48,91,162,.07) 0%,
      rgba(48,91,162,0) 38%
    ),
    #f7f9fc;

  color: #04162b;
}


/* =========================================================
   MAIN INNER — 1280PX
   ========================================================= */

.dem-about-services-inner {
  position: relative;

  width: 100%;
  max-width: 1380px;

  min-height: 650px;

  margin: 0 auto;

  padding: 90px 0;

  box-sizing: border-box;

  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;

  gap: 70px;
}


/* =========================================================
   LEFT CONTENT
   ========================================================= */

.dem-about-services-content {
  position: relative;
  z-index: 3;

  max-width: 620px;
}


/* =========================================================
   LABEL
   ========================================================= */

.dem-about-services-label {
  display: flex;
  align-items: center;
  gap: 16px;

  margin-bottom: 22px;

  color: #ff7a1a;

  font-size: 12px;
  font-weight: 700;

  letter-spacing: 3px;
  text-transform: uppercase;
}

.dem-about-services-label span {
  width: 42px;
  height: 2px;

  display: block;

  background: #ff7a1a;
}


/* =========================================================
   HEADING
   ========================================================= */

.dem-about-services-title {
  margin: 0 0 28px;

  color: #08213d;

  font-size: clamp(46px, 5vw, 68px);
  line-height: 1;

  font-weight: 700;
  letter-spacing: -2.5px;
}

.dem-about-services-title strong {
  color: #ff7a1a;
  font-weight: 700;
}


/* =========================================================
   PARAGRAPHS
   ========================================================= */

.dem-about-services-text {
  margin: 0 0 24px;

  max-width: 610px;

  color: #34465b;

  font-size: 17px;
  line-height: 1.8;

  font-weight: 400;
}

.dem-about-services-text a {
  color: #082f59;

  font-weight: 600;

  text-decoration: underline;
  text-decoration-color: #ff7a1a;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;

  transition: color .25s ease;
}

.dem-about-services-text a:hover {
  color: #ff7a1a;
}


/* =========================================================
   CTA
   ========================================================= */

.dem-about-services-btn {
  display: inline-flex;

  align-items: center;
  justify-content: space-between;

  min-width: 265px;

  margin-top: 12px;

  padding: 18px 22px 18px 26px;

  background: #ff7a1a;
  color: #ffffff !important;

  border: 1px solid #ff7a1a;
  border-radius: 4px;

  text-decoration: none !important;

  font-size: 15px;
  font-weight: 700;

  transition:
    background .25s ease,
    transform .25s ease,
    box-shadow .25s ease;
}

.dem-about-services-arrow {
  margin-left: 35px;

  font-size: 25px;
  line-height: 1;

  transition: transform .25s ease;
}

.dem-about-services-btn:hover {
  background: #e9680b;
  color: #ffffff !important;

  transform: translateY(-2px);

  box-shadow:
    0 12px 30px rgba(255,122,26,.20);
}

.dem-about-services-btn:hover .dem-about-services-arrow {
  transform: translateX(6px);
}


/* =========================================================
   RIGHT VISUAL
   ========================================================= */

.dem-about-services-visual {
  position: relative;

  width: 100%;
  max-width: 570px;

  min-height: 490px;

  justify-self: end;

  display: flex;
  align-items: center;
  justify-content: center;
}


/* =========================================================
   ORANGE FRAME
   ========================================================= */

.dem-about-services-orange-frame {
  position: absolute;

  top: 34px;
  left: 24px;

  width: calc(100% - 38px);
  height: 420px;

  border-radius: 28px;

  background: #ff7a1a;

  transform: skewX(-10deg);

  opacity: .95;
}


/* =========================================================
   IMAGE
   ========================================================= */

.dem-about-services-image-wrap {
  position: relative;
  z-index: 2;

  width: 92%;
  height: 420px;

  overflow: hidden;

  border-radius: 26px;

  background: #08213d;

  box-shadow:
    0 24px 55px rgba(4,22,43,.18);
}

.dem-about-services-image {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;

  transition: transform .7s ease;
}

.dem-about-services-image-wrap:hover
.dem-about-services-image {
  transform: scale(1.035);
}


/* IMAGE OVERLAY */

.dem-about-services-image-wrap::after {
  content: "";

  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      180deg,
      rgba(4,22,43,.05) 0%,
      rgba(4,22,43,.12) 55%,
      rgba(4,22,43,.38) 100%
    );

  pointer-events: none;
}


/* =========================================================
   FLOATING CARD
   ========================================================= */

.dem-about-services-card {
  position: absolute;

  z-index: 4;

  left: -5px;
  bottom: 35px;

  width: 390px;
  min-height: 125px;

  padding: 22px 26px;

  display: flex;
  align-items: center;

  gap: 20px;

  background: rgba(255,255,255,.97);

  border-radius: 18px;

  box-shadow:
    0 20px 45px rgba(4,22,43,.16);

  border: 1px solid rgba(8,33,61,.05);

  box-sizing: border-box;
}


/* ICON */

.dem-about-services-card-icon {
  width: 68px;
  height: 68px;

  flex: 0 0 68px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background: rgba(255,122,26,.09);

  color: #ff7a1a;

  border: 1px solid rgba(255,122,26,.16);
}

.dem-about-services-card-icon span {
  font-size: 37px;
  line-height: 1;

  transform: translateY(-2px);
}


/* CARD TEXT */

.dem-about-services-card-label {
  margin-bottom: 7px;

  color: #ff7a1a;

  font-size: 11px;
  font-weight: 700;

  letter-spacing: 2.5px;
}

.dem-about-services-card-title {
  color: #08213d;

  font-size: 20px;
  line-height: 1.35;

  font-weight: 700;
}

.dem-about-services-card-title i {
  color: #ff7a1a;

  font-style: normal;

  margin: 0 4px;
}


/* =========================================================
   DOT PATTERN
   ========================================================= */

.dem-about-services-visual::after {
  content: "";

  position: absolute;

  right: -20px;
  bottom: 5px;

  width: 95px;
  height: 95px;

  opacity: .35;

  background-image:
    radial-gradient(
      #305ba2 1.4px,
      transparent 1.4px
    );

  background-size: 12px 12px;

  pointer-events: none;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1024px) {

  .dem-about-services-inner {
    width: 100%;
    max-width: 100%;

    padding: 75px 0;

    grid-template-columns: 1fr 1fr;

    gap: 40px;
  }

  .dem-about-services-title {
    font-size: 52px;
  }

  .dem-about-services-text {
    font-size: 16px;
    line-height: 1.75;
  }

  .dem-about-services-visual {
    min-height: 450px;
  }

  .dem-about-services-image-wrap {
    height: 370px;
  }

  .dem-about-services-orange-frame {
    height: 370px;
  }

  .dem-about-services-card {
    left: -15px;
    bottom: 25px;

    width: 340px;

    padding: 18px 20px;
  }

  .dem-about-services-card-title {
    font-size: 18px;
  }

  .dem-about-services-card-icon {
    width: 58px;
    height: 58px;
    flex-basis: 58px;
  }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

  .dem-about-services-inner {
    width: 100%;
    max-width: 100%;

    display: flex;
    flex-direction: column;

    align-items: stretch;

    gap: 55px;

    min-height: auto;

    padding: 65px 20px 75px;

    box-sizing: border-box;
  }

  .dem-about-services-content {
    max-width: 100%;
  }

  .dem-about-services-label {
    margin-bottom: 17px;

    font-size: 10px;
    letter-spacing: 2.2px;
  }

  .dem-about-services-label span {
    width: 30px;
  }

  .dem-about-services-title {
    margin-bottom: 23px;

    font-size: 42px;
    line-height: 1.04;

    letter-spacing: -1.5px;
  }

  .dem-about-services-text {
    margin-bottom: 20px;

    font-size: 15.5px;
    line-height: 1.75;
  }

  .dem-about-services-btn {
    width: 100%;
    max-width: 285px;

    min-width: 0;

    padding: 17px 20px 17px 22px;
  }

  .dem-about-services-visual {
    width: 100%;
    max-width: 100%;

    min-height: 390px;

    justify-self: auto;
  }

  .dem-about-services-orange-frame {
    top: 18px;
    left: 12px;

    width: calc(100% - 24px);

    height: 310px;

    border-radius: 20px;

    transform: skewX(-7deg);
  }

  .dem-about-services-image-wrap {
    width: 94%;
    height: 310px;

    border-radius: 20px;
  }

  .dem-about-services-card {
    left: 3px;
    bottom: 5px;

    width: calc(100% - 20px);

    min-height: 105px;

    padding: 17px 18px;

    gap: 14px;

    border-radius: 15px;
  }

  .dem-about-services-card-icon {
    width: 52px;
    height: 52px;

    flex-basis: 52px;
  }

  .dem-about-services-card-icon span {
    font-size: 29px;
  }

  .dem-about-services-card-label {
    font-size: 9px;
    letter-spacing: 2px;
  }

  .dem-about-services-card-title {
    font-size: 16px;
  }

  .dem-about-services-visual::after {
    display: none;
  }
}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

  .dem-about-services-inner {
    padding: 55px 18px 65px;

    gap: 48px;
  }

  .dem-about-services-title {
    font-size: 36px;
    letter-spacing: -1.2px;
  }

  .dem-about-services-text {
    font-size: 15px;
  }

  .dem-about-services-btn {
    max-width: 100%;
  }

  .dem-about-services-visual {
    min-height: 355px;
  }

  .dem-about-services-orange-frame {
    height: 275px;
  }

  .dem-about-services-image-wrap {
    height: 275px;
    width: 95%;
  }

  .dem-about-services-card {
    width: calc(100% - 10px);

    left: 0;
    bottom: 0;

    padding: 15px;
  }

  .dem-about-services-card-title {
    font-size: 15px;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-58a29b8 *//* =========================================================
   DUA ESTATE & MARKETING
   VERIFICATION & DOCUMENTATION
   FINAL 1280PX VERSION
   ========================================================= */

.dem-verification-section {
  --dem-navy: #0d3157;
  --dem-navy-dark: #062746;
  --dem-orange: #ff741f;
  --dem-orange-light: #fff0e7;
  --dem-text: #173f69;
  --dem-muted: #667c96;
  --dem-border: rgba(13,49,87,.10);
  --dem-bg: #f6faff;

  position: relative;
  width: 100%;
  overflow: hidden;

  background:
    radial-gradient(
      circle at 10% 50%,
      rgba(218,237,255,.65),
      transparent 28%
    ),
    radial-gradient(
      circle at 82% 35%,
      rgba(228,241,255,.65),
      transparent 30%
    ),
    var(--dem-bg);

  padding: 78px 0 72px;

  box-sizing: border-box;
}


/* =========================================================
   BACKGROUND DECORATION
   ========================================================= */

.dem-verification-bg-circle {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.dem-v-circle-1 {
  width: 500px;
  height: 500px;

  left: -330px;
  top: -90px;

  border: 1px solid rgba(132,177,222,.12);
}

.dem-v-circle-2 {
  width: 620px;
  height: 620px;

  right: -390px;
  bottom: -300px;

  border: 1px solid rgba(132,177,222,.12);
}


/* DOT PATTERN */

.dem-verification-dots {
  position: absolute;

  width: 260px;
  height: 260px;

  background-image:
    radial-gradient(
      circle,
      rgba(81,143,202,.30) 1.4px,
      transparent 1.7px
    );

  background-size: 8px 8px;

  opacity: .45;

  pointer-events: none;
}

.dem-v-dots-1 {
  right: -55px;
  top: 35px;

  -webkit-mask-image:
    radial-gradient(
      ellipse at center,
      black 15%,
      transparent 72%
    );

  mask-image:
    radial-gradient(
      ellipse at center,
      black 15%,
      transparent 72%
    );
}


/* =========================================================
   MAIN CONTAINER
   EXACT 1280PX DESKTOP WIDTH
   ========================================================= */

.dem-verification-container {
  position: relative;
  z-index: 5;

  width: 100%;
  max-width: 1380px;

  margin: 0 auto;
  padding: 0;

  box-sizing: border-box;

  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    370px;

  gap: 70px;

  align-items: stretch;
}


/* =========================================================
   LEFT SIDE
   ========================================================= */

.dem-verification-left {
  position: relative;
  min-width: 0;
}


/* =========================================================
   LABEL
   ========================================================= */

.dem-verification-label {
  display: flex;
  align-items: center;
  gap: 14px;

  margin-bottom: 25px;

  color: var(--dem-orange);

  font-size: 12px;
  line-height: 1;

  font-weight: 700;

  letter-spacing: 3.4px;
  text-transform: uppercase;
}

.dem-label-line {
  width: 37px;
  height: 2px;

  display: block;

  background: var(--dem-orange);
}


/* =========================================================
   MAIN HEADING
   ========================================================= */

.dem-verification-title {
  margin: 0 0 28px;

  max-width: 780px;

  color: var(--dem-navy);

  font-size: clamp(43px,4.1vw,62px);

  line-height: 1.03;

  font-weight: 700;

  letter-spacing: -2.5px;
}

.dem-verification-title span {
  position: relative;

  color: var(--dem-orange);
}

.dem-verification-title span::after {
  content: "";

  position: absolute;

  left: 0;
  right: 0;

  bottom: -5px;

  height: 5px;

  border-radius: 4px;

  background: rgba(255,116,31,.78);

  transform: rotate(-1deg);
}


/* =========================================================
   DESCRIPTION
   ========================================================= */

.dem-verification-description {
  max-width: 790px;

  margin: 0 0 28px;

  color: var(--dem-text);

  font-size: 16px;

  line-height: 1.62;

  font-weight: 400;
}


/* =========================================================
   RELATED GUIDES
   ========================================================= */

.dem-guides {
  max-width: 790px;

  margin-top: 28px;
}

.dem-guides-heading {
  margin-bottom: 11px;

  color: #91a8c2;

  font-size: 10px;

  line-height: 1;

  font-weight: 700;

  letter-spacing: 3px;

  text-transform: uppercase;
}

.dem-guides-line {
  width: 100%;
  height: 1px;

  margin-top: 20px;
  margin-bottom: 20px;

  background: rgba(13,49,87,.13);
}


/* =========================================================
   GUIDE GRID
   ========================================================= */

.dem-guide-grid {
  display: grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap: 18px;
}


/* =========================================================
   GUIDE CARD
   ========================================================= */

.dem-guide-card {
  position: relative;

  min-height: 100px;

  display: flex;

  align-items: center;

  gap: 16px;

  padding: 15px 16px;

  box-sizing: border-box;

  text-decoration: none;

  background: rgba(255,255,255,.70);

  border: 1px solid rgba(126,163,200,.20);

  border-radius: 13px;

  box-shadow:
    0 8px 22px rgba(13,49,87,.025);

  transition:
    transform .25s ease,
    border-color .25s ease,
    box-shadow .25s ease;
}

.dem-guide-card:hover {
  transform: translateY(-3px);

  border-color: rgba(255,116,31,.30);

  box-shadow:
    0 13px 30px rgba(13,49,87,.08);
}


/* =========================================================
   GUIDE ICON
   ========================================================= */

.dem-guide-icon {
  width: 56px;
  height: 56px;

  flex: 0 0 56px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background:
    linear-gradient(
      145deg,
      #fff8f3,
      #ffede2
    );

  border: 1px solid rgba(255,116,31,.12);
}

.dem-guide-icon svg {
  width: 29px;
  height: 29px;

  fill: none;

  stroke: var(--dem-orange);

  stroke-width: 1.5;

  stroke-linecap: round;
  stroke-linejoin: round;
}


/* =========================================================
   GUIDE TEXT
   ========================================================= */

.dem-guide-text {
  min-width: 0;
}

.dem-guide-text h3 {
  margin: 0 0 5px;

  color: var(--dem-navy);

  font-size: 15px;

  line-height: 1.15;

  font-weight: 700;

  letter-spacing: -.2px;
}

.dem-guide-text p {
  margin: 0;

  color: var(--dem-muted);

  font-size: 13px;

  line-height: 1.3;
}


/* =========================================================
   GUIDE ARROW
   ========================================================= */

.dem-guide-arrow {
  margin-left: auto;

  width: 35px;
  height: 35px;

  flex: 0 0 35px;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 1px solid var(--dem-orange);

  border-radius: 50%;

  color: var(--dem-orange);

  font-size: 18px;

  transition:
    background .25s ease,
    color .25s ease,
    transform .25s ease;
}

.dem-guide-card:hover .dem-guide-arrow {
  background: var(--dem-orange);

  color: #fff;

  transform: translateX(2px);
}


/* =========================================================
   RIGHT DARK PREMIUM PANEL
   ========================================================= */

.dem-verification-panel {
  position: relative;

  min-height: 475px;

  overflow: hidden;

  background:
    linear-gradient(
      145deg,
      #092d50 0%,
      #0b355e 48%,
      #082a4b 100%
    );

  border-radius: 10px;

  box-shadow:
    0 25px 55px rgba(7,38,68,.13);
}


/* =========================================================
   ORANGE EDGE
   ========================================================= */

.dem-panel-orange-line {
  position: absolute;

  left: 0;
  top: 0;

  width: 4px;
  height: 154px;

  background: var(--dem-orange);
}


/* =========================================================
   PANEL CIRCLES
   ========================================================= */

.dem-panel-circle {
  position: absolute;

  border-radius: 50%;

  border: 1px solid rgba(255,255,255,.13);

  pointer-events: none;
}

.dem-panel-circle-1 {
  width: 245px;
  height: 245px;

  right: -82px;
  top: -83px;
}

.dem-panel-circle-2 {
  width: 230px;
  height: 230px;

  right: -100px;
  bottom: -90px;
}

.dem-panel-circle-3 {
  width: 95px;
  height: 95px;

  right: -23px;
  bottom: 43px;

  border-color: rgba(255,255,255,.08);
}


/* =========================================================
   PANEL NUMBER
   ========================================================= */

.dem-panel-number {
  position: absolute;

  top: 31px;
  right: 36px;

  color: rgba(255,255,255,.18);

  font-size: 25px;

  line-height: 1;

  font-weight: 700;

  letter-spacing: 1px;
}


/* =========================================================
   PANEL CONTENT
   ========================================================= */

.dem-panel-content {
  position: absolute;

  left: 34px;
  right: 34px;

  top: 145px;
}


/* SMALL LABEL */

.dem-panel-small-label {
  display: flex;
  align-items: center;

  gap: 15px;

  margin-bottom: 22px;

  color: var(--dem-orange);

  font-size: 11px;

  font-weight: 700;

  letter-spacing: 3.2px;
}

.dem-panel-small-label i {
  display: block;

  width: 42px;
  height: 1px;

  background: rgba(255,116,31,.75);
}


/* =========================================================
   PANEL TITLE
   ========================================================= */

.dem-panel-content h3 {
  margin: 0;

  color: #fff;

  font-size: 38px;

  line-height: .98;

  font-weight: 700;

  letter-spacing: -1.2px;
}

.dem-panel-content h3 span {
  display: inline-block;

  margin-top: 5px;

  color: var(--dem-orange);
}


/* =========================================================
   PANEL DESCRIPTION
   ========================================================= */

.dem-panel-content p {
  max-width: 250px;

  margin: 28px 0 0;

  color: rgba(232,241,250,.66);

  font-size: 15px;

  line-height: 1.5;
}


/* =========================================================
   BOTTOM LINE
   USER REQUEST:
   WHITE LINE
   ========================================================= */

.dem-panel-bottom-line {
  width: 40px;
  height: 2px;

  margin-top: 30px;

  background: var(--dem-orange);
}


/* =========================================================
   PANEL ORANGE DOT
   ========================================================= */

.dem-panel-dot {
  position: absolute;

  right: 50px;
  bottom: 112px;

  width: 9px;
  height: 9px;

  background: var(--dem-orange);

  border-radius: 50%;

  box-shadow:
    0 0 0 4px rgba(255,116,31,.08);
}


/* =========================================================
   PANEL DOT PATTERN
   ========================================================= */

.dem-panel-dots {
  position: absolute;

  left: 0;
  bottom: 28px;

  width: 105px;
  height: 105px;

  background-image:
    radial-gradient(
      circle,
      rgba(255,255,255,.22) 1.1px,
      transparent 1.4px
    );

  background-size: 8px 8px;

  opacity: .55;

  -webkit-mask-image:
    linear-gradient(
      135deg,
      black,
      transparent
    );

  mask-image:
    linear-gradient(
      135deg,
      black,
      transparent
    );
}


/* =========================================================
   LARGE TABLET
   ========================================================= */

@media (max-width:1100px) {

  .dem-verification-container {
    width: 100%;
    max-width: 900px;

    padding: 0;

    grid-template-columns: 1fr;

    gap: 55px;
  }

  .dem-verification-panel {
    min-height: 570px;

    max-width: 430px;

    width: 100%;

    margin: 0 auto;
  }

  .dem-verification-title {
    font-size: clamp(43px,6vw,60px);
  }
}


/* =========================================================
   TABLET / MOBILE
   ========================================================= */

@media (max-width:760px) {

  .dem-verification-section {
    padding: 65px 0;
  }

  .dem-verification-container {
    width: calc(100% - 36px);

    gap: 42px;
  }

  .dem-verification-title {
    font-size: clamp(38px,8vw,52px);

    letter-spacing: -1.8px;
  }

  .dem-verification-description {
    font-size: 15px;
  }

  .dem-guide-grid {
    grid-template-columns: 1fr;
  }

  .dem-verification-panel {
    min-height: 540px;
  }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width:520px) {

  .dem-verification-section {
    padding: 55px 0 60px;
  }

  .dem-verification-container {
    width: calc(100% - 28px);
  }

  .dem-verification-label {
    font-size: 10px;

    letter-spacing: 2.5px;

    gap: 10px;
  }

  .dem-label-line {
    width: 30px;
  }

  .dem-verification-title {
    font-size: 38px;

    line-height: 1.03;

    letter-spacing: -1.5px;

    margin-bottom: 23px;
  }

  .dem-verification-description {
    font-size: 14px;

    line-height: 1.62;
  }


  /* GUIDE */

  .dem-guide-card {
    min-height: 95px;

    padding: 13px;
  }

  .dem-guide-icon {
    width: 50px;
    height: 50px;

    flex-basis: 50px;
  }

  .dem-guide-text h3 {
    font-size: 14px;
  }

  .dem-guide-text p {
    font-size: 12px;
  }

  .dem-guide-arrow {
    width: 31px;
    height: 31px;

    flex-basis: 31px;

    font-size: 16px;
  }


  /* DARK PANEL */

  .dem-verification-panel {
    min-height: 500px;

    border-radius: 10px;
  }

  .dem-panel-content {
    left: 27px;
    right: 27px;

    top: 120px;
  }

  .dem-panel-content h3 {
    font-size: 35px;
  }

  .dem-panel-content p {
    font-size: 14px;

    max-width: 235px;
  }

  .dem-panel-number {
    top: 25px;
    right: 27px;

    font-size: 22px;
  }
}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width:370px) {

  .dem-verification-title {
    font-size: 34px;
  }

  .dem-panel-content h3 {
    font-size: 31px;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-3cbaa9f *//* =========================================================
   DUA ESTATE & MARKETING
   HOW WE WORK — PREMIUM V2
   COMPLETE RESPONSIVE CSS
   ========================================================= */

.dem-howwork-v2 {

  --navy: #0d3157;
  --navy-dark: #062746;
  --orange: #ff741f;
  --orange-soft: #fff0e7;
  --text: #173f69;
  --muted: #667c96;

  position: relative;
  width: 100%;
  box-sizing: border-box;

  overflow: hidden;

  background:
    radial-gradient(
      circle at 8% 45%,
      rgba(219, 237, 253, .60),
      transparent 27%
    ),
    radial-gradient(
      circle at 92% 70%,
      rgba(231, 242, 253, .70),
      transparent 30%
    ),
    #f7faff;

  padding: 92px 0 100px;
}


/* =========================================================
   RESET / BOX SIZING
   ========================================================= */

.dem-howwork-v2 *,
.dem-howwork-v2 *::before,
.dem-howwork-v2 *::after {
  box-sizing: border-box;
}


/* =========================================================
   MAIN 1280px CONTAINER
   ========================================================= */

.dem-howwork-v2-inner {

  position: relative;
  z-index: 2;

  width: 100%;
  max-width: 1380px;

  margin: 0 auto;
  padding: 0;

}


/* =========================================================
   HEADER
   ========================================================= */

.dem-howwork-v2-header {

  width: 100%;
  max-width: 900px;

  margin: 0 0 55px;
}


/* =========================================================
   EYEBROW
   ========================================================= */

.dem-howwork-v2-eyebrow {

  display: flex;
  align-items: center;

  gap: 13px;

  margin: 0 0 21px;

  color: var(--orange);

  font-size: 11px;
  font-weight: 700;

  line-height: 1.2;
  letter-spacing: 3px;

  text-transform: uppercase;
}


.dem-howwork-v2-eyebrow span {

  display: block;

  width: 38px;
  height: 2px;

  flex: 0 0 38px;

  background: var(--orange);
}


/* =========================================================
   MAIN HEADING
   ========================================================= */

.dem-howwork-v2-title {

  margin: 0;

  color: var(--navy);

  font-size: clamp(44px, 5vw, 67px);

  line-height: 1.02;

  font-weight: 700;

  letter-spacing: -2.8px;
}


.dem-howwork-v2-title span {

  position: relative;

  display: inline-block;

  color: var(--orange);
}


.dem-howwork-v2-title span::after {

  content: "";

  position: absolute;

  left: 2px;
  right: 0;

  bottom: -5px;

  width: auto;
  height: 4px;

  background: rgba(255, 116, 31, .75);

  border-radius: 4px;

  transform: rotate(-1deg);
}


/* =========================================================
   PROCESS GRID
   ========================================================= */

.dem-howwork-v2-process {

  position: relative;

  display: grid;

  width: 100%;

  grid-template-columns:
    minmax(0, 1fr)
    52px
    minmax(0, 1fr)
    52px
    minmax(0, 1fr);

  align-items: stretch;

  gap: 0;
}


/* =========================================================
   STEP CARDS
   ========================================================= */

.dem-howwork-v2-step {

  position: relative;

  min-width: 0;
  min-height: 390px;

  padding: 34px 34px 42px;

  background: rgba(255, 255, 255, .82);

  border: 1px solid rgba(13, 49, 87, .11);

  border-radius: 10px;

  box-shadow:
    0 15px 35px rgba(13, 49, 87, .035);

  overflow: hidden;

  transition:
    transform .3s ease,
    box-shadow .3s ease,
    border-color .3s ease;
}


.dem-howwork-v2-step:hover {

  transform: translateY(-5px);

  border-color: rgba(255, 116, 31, .28);

  box-shadow:
    0 22px 45px rgba(13, 49, 87, .09);
}


/* =========================================================
   STEP TOP
   ========================================================= */

.dem-howwork-v2-top {

  display: flex;
  align-items: center;

  gap: 13px;

  margin: 0 0 39px;
}


.dem-howwork-v2-number {

  flex-shrink: 0;

  color: var(--orange);

  font-size: 12px;
  font-weight: 700;

  line-height: 1;

  letter-spacing: 2px;
}


.dem-howwork-v2-line {

  width: 48px;
  height: 1px;

  flex: 0 0 48px;

  background: var(--navy);

  opacity: .25;
}


/* =========================================================
   OPTIONAL ICON
   ========================================================= */

.dem-howwork-v2-icon {

  width: 68px;
  height: 68px;

  display: flex;
  align-items: center;
  justify-content: center;

  margin: 0 0 27px;

  border-radius: 50%;

  background:
    linear-gradient(
      145deg,
      #fffaf6,
      var(--orange-soft)
    );

  border: 1px solid rgba(255, 116, 31, .18);
}


.dem-howwork-v2-icon span {

  color: var(--orange);

  font-size: 12px;
  font-weight: 700;

  letter-spacing: 1.5px;
}


/* =========================================================
   STEP HEADING
   ========================================================= */

.dem-howwork-v2-step h3 {

  max-width: 280px;

  margin: 0 0 17px;

  color: var(--navy);

  font-size: 24px;

  line-height: 1.16;

  font-weight: 700;

  letter-spacing: -.5px;
}


/* =========================================================
   STEP DESCRIPTION
   ========================================================= */

.dem-howwork-v2-step p {

  max-width: 330px;

  margin: 0;

  color: var(--text);

  font-size: 15px;

  line-height: 1.72;

  font-weight: 400;
}


/* =========================================================
   CONNECTORS
   ========================================================= */

.dem-howwork-v2-connector {

  position: relative;

  display: flex;

  align-items: center;
  justify-content: center;

  min-width: 0;
}


.dem-howwork-v2-connector::before {

  content: "";

  position: absolute;

  left: 0;
  right: 0;

  top: 50%;

  width: 100%;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      rgba(13, 49, 87, .18),
      rgba(255, 116, 31, .45),
      rgba(13, 49, 87, .18)
    );
}


.dem-howwork-v2-connector span {

  position: relative;

  z-index: 2;

  width: 10px;
  height: 10px;

  flex: 0 0 10px;

  background: #ffffff;

  border: 2px solid var(--orange);

  border-radius: 50%;
}


/* =========================================================
   DARK THIRD CARD
   ========================================================= */

.dem-howwork-v2-step-dark {

  background:
    linear-gradient(
      145deg,
      var(--navy-dark) 0%,
      #0b355e 100%
    );

  border-color: transparent;

  box-shadow:
    0 20px 45px rgba(6, 39, 70, .14);
}


.dem-howwork-v2-step-dark:hover {

  border-color: transparent;
}


.dem-howwork-v2-step-dark
.dem-howwork-v2-number {

  color: var(--orange);
}


.dem-howwork-v2-step-dark
.dem-howwork-v2-line {

  background: #ffffff;

  opacity: .25;
}


.dem-howwork-v2-step-dark
.dem-howwork-v2-icon {

  background: rgba(255, 116, 31, .10);

  border-color: rgba(255, 116, 31, .30);
}


.dem-howwork-v2-step-dark h3 {

  color: #ffffff;
}


.dem-howwork-v2-step-dark p {

  color: rgba(255, 255, 255, .72);
}


/* =========================================================
   DARK CARD DECORATIVE CIRCLES
   ========================================================= */

.dem-howwork-v2-step-dark::before {

  content: "";

  position: absolute;

  width: 210px;
  height: 210px;

  right: -110px;
  bottom: -110px;

  border: 1px solid rgba(255, 255, 255, .10);

  border-radius: 50%;

  pointer-events: none;
}


.dem-howwork-v2-step-dark::after {

  content: "";

  position: absolute;

  width: 120px;
  height: 120px;

  right: -65px;
  bottom: -65px;

  border: 1px solid rgba(255, 255, 255, .07);

  border-radius: 50%;

  pointer-events: none;
}


/* =========================================================
   ORANGE ACCENT
   ========================================================= */

.dem-howwork-v2-accent {

  position: absolute;

  left: 34px;
  bottom: 29px;

  width: 42px;
  height: 2px;

  background: var(--orange);
}


/* =========================================================
   LARGE DESKTOP
   1280px CONTENT / NO SIDE PADDING
   ========================================================= */

@media (min-width: 1301px) {

  .dem-howwork-v2-inner {

    width: 1280px;
    max-width: 1280px;

    padding-left: 0;
    padding-right: 0;
  }

}


/* =========================================================
   DESKTOP / LAPTOP
   ========================================================= */

@media (max-width: 1300px) {

  .dem-howwork-v2-inner {

    width: calc(100% - 60px);

    max-width: 1280px;
  }

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1050px) {

  .dem-howwork-v2 {

    padding: 75px 0 85px;
  }


  .dem-howwork-v2-inner {

    width: calc(100% - 50px);

    max-width: 900px;
  }


  .dem-howwork-v2-header {

    max-width: 850px;

    margin-bottom: 45px;
  }


  .dem-howwork-v2-title {

    font-size: 48px;

    letter-spacing: -2px;
  }


  .dem-howwork-v2-process {

    grid-template-columns: 1fr;

    gap: 18px;
  }


  .dem-howwork-v2-connector {

    display: none;
  }


  .dem-howwork-v2-step {

    min-height: auto;

    padding: 32px 32px 42px;
  }


  .dem-howwork-v2-step h3 {

    max-width: 100%;
  }


  .dem-howwork-v2-step p {

    max-width: 700px;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

  .dem-howwork-v2 {

    padding: 62px 0 70px;
  }


  .dem-howwork-v2-inner {

    width: calc(100% - 34px);

    max-width: none;
  }


  .dem-howwork-v2-header {

    width: 100%;

    margin-bottom: 38px;
  }


  .dem-howwork-v2-eyebrow {

    gap: 10px;

    margin-bottom: 18px;

    font-size: 10px;

    letter-spacing: 2.3px;
  }


  .dem-howwork-v2-eyebrow span {

    width: 30px;

    flex-basis: 30px;
  }


  .dem-howwork-v2-title {

    font-size: clamp(36px, 9vw, 50px);

    line-height: 1.04;

    letter-spacing: -1.7px;
  }


  .dem-howwork-v2-title span::after {

    bottom: -4px;

    height: 3px;
  }


  .dem-howwork-v2-process {

    display: flex;

    flex-direction: column;

    width: 100%;

    gap: 14px;
  }


  .dem-howwork-v2-step {

    width: 100%;

    min-height: auto;

    padding: 28px 24px 45px;

    border-radius: 10px;
  }


  .dem-howwork-v2-top {

    margin-bottom: 30px;
  }


  .dem-howwork-v2-step h3 {

    max-width: 100%;

    margin-bottom: 14px;

    font-size: 22px;

    line-height: 1.2;
  }


  .dem-howwork-v2-step p {

    max-width: 100%;

    font-size: 14.5px;

    line-height: 1.68;
  }


  .dem-howwork-v2-icon {

    width: 60px;
    height: 60px;

    margin-bottom: 22px;
  }


  .dem-howwork-v2-accent {

    left: 24px;
    bottom: 25px;
  }


  .dem-howwork-v2-step-dark::before {

    width: 180px;
    height: 180px;

    right: -100px;
    bottom: -100px;
  }


  .dem-howwork-v2-step-dark::after {

    width: 105px;
    height: 105px;

    right: -55px;
    bottom: -55px;
  }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 430px) {

  .dem-howwork-v2 {

    padding: 52px 0 60px;
  }


  .dem-howwork-v2-inner {

    width: calc(100% - 28px);
  }


  .dem-howwork-v2-title {

    font-size: 34px;

    letter-spacing: -1.4px;
  }


  .dem-howwork-v2-step {

    padding: 25px 20px 43px;

    border-radius: 10px;
  }


  .dem-howwork-v2-top {

    margin-bottom: 27px;
  }


  .dem-howwork-v2-step h3 {

    font-size: 20px;
  }


  .dem-howwork-v2-step p {

    font-size: 14px;

    line-height: 1.68;
  }


  .dem-howwork-v2-accent {

    left: 20px;
  }

}


/* =========================================================
   VERY SMALL SCREENS
   ========================================================= */

@media (max-width: 360px) {

  .dem-howwork-v2-inner {

    width: calc(100% - 24px);
  }


  .dem-howwork-v2-title {

    font-size: 31px;
  }


  .dem-howwork-v2-step {

    padding-left: 18px;
    padding-right: 18px;
  }

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-717d98b *//* =========================================================
   DUA ESTATE & MARKETING
   AREAS WE COVER
   PREMIUM COVERAGE — V2
   ========================================================= */

.dem-coverage {

  --navy: #0d3157;
  --deep: #062746;
  --orange: #ff741f;
  --orange-soft: #fff0e7;
  --text: #274c73;
  --muted: #667c96;
  --border: rgba(13,49,87,.12);
  --bg: #f7faff;

  position: relative;
  width: 100%;

  overflow: hidden;

  background:
    radial-gradient(
      circle at 8% 35%,
      rgba(210,229,248,.48),
      transparent 25%
    ),
    radial-gradient(
      circle at 94% 78%,
      rgba(222,237,251,.55),
      transparent 27%
    ),
    var(--bg);

  padding: 100px 0 105px;

  color: var(--navy);
}


/* =========================================================
   BOX SIZING
   ========================================================= */

.dem-coverage *,
.dem-coverage *::before,
.dem-coverage *::after {
  box-sizing: border-box;
}


/* =========================================================
   BACKGROUND DECORATION
   ========================================================= */

.dem-coverage-bg-circle {
  position: absolute;

  border: 1px solid rgba(82,143,201,.16);

  border-radius: 50%;

  pointer-events: none;
}


.dem-coverage-bg-circle-1 {

  width: 520px;
  height: 520px;

  top: -315px;
  right: 5%;
}


.dem-coverage-bg-circle-2 {

  width: 420px;
  height: 420px;

  bottom: -280px;
  left: -190px;
}


.dem-coverage-dots {

  position: absolute;

  width: 130px;
  height: 130px;

  background-image:
    radial-gradient(
      circle,
      rgba(72,137,203,.22) 1.4px,
      transparent 1.7px
    );

  background-size: 10px 10px;

  pointer-events: none;
}


.dem-coverage-dots-top {

  top: 28px;
  right: 3%;
}


.dem-coverage-dots-bottom {

  bottom: 35px;
  left: 1%;

  opacity: .55;
}


/* =========================================================
   MAIN CONTAINER
   ========================================================= */

.dem-coverage-inner {

  position: relative;

  z-index: 2;

  width: 100%;
  max-width: 1380px;

  margin: 0 auto;

  padding: 0;
}


/* =========================================================
   INTRO
   ========================================================= */

.dem-coverage-intro {

  width: 100%;

  max-width: 850px;

  margin-bottom: 48px;
}


/* =========================================================
   EYEBROW
   ========================================================= */

.dem-coverage-eyebrow {

  display: flex;
  align-items: center;

  gap: 13px;

  margin-bottom: 18px;

  color: var(--orange);

  font-size: 11px;
  font-weight: 700;

  line-height: 1.2;

  letter-spacing: 3px;

  text-transform: uppercase;
}


.dem-coverage-eyebrow span {

  width: 38px;
  height: 2px;

  flex: 0 0 38px;

  background: var(--orange);
}


/* =========================================================
   TITLE
   ========================================================= */

.dem-coverage-title {

  margin: 0 0 20px;

  color: var(--navy);

  font-size: clamp(48px, 5.2vw, 70px);

  line-height: 1;

  font-weight: 700;

  letter-spacing: -2.8px;
}


.dem-coverage-title strong {

  position: relative;

  color: var(--orange);

  font-weight: 700;
}


.dem-coverage-title strong::after {

  content: "";

  position: absolute;

  left: 2px;
  right: 0;

  bottom: -6px;

  height: 4px;

  background: rgba(255,116,31,.72);

  border-radius: 4px;

  transform: rotate(-1deg);
}


/* =========================================================
   DESCRIPTION
   ========================================================= */

.dem-coverage-description {

  max-width: 820px;

  margin: 0;

  color: var(--text);

  font-size: 17px;

  line-height: 1.72;
}


/* =========================================================
   FEATURED CARD
   ========================================================= */

.dem-coverage-feature {

  position: relative;

  display: block;

  width: 100%;

  min-height: 310px;

  padding: 38px 48px;

  margin-bottom: 18px;

  overflow: hidden;

  background:
    linear-gradient(
      135deg,
      #062746 0%,
      #0b355e 58%,
      #0d3157 100%
    );

  border-radius: 12px;

  color: #ffffff;

  text-decoration: none;

  box-shadow:
    0 22px 55px rgba(6,39,70,.13);

  transition:
    transform .3s ease,
    box-shadow .3s ease;
}


.dem-coverage-feature:hover {

  transform: translateY(-5px);

  box-shadow:
    0 30px 65px rgba(6,39,70,.20);
}


/* FEATURE DECORATION */

.dem-coverage-feature::before {

  content: "";

  position: absolute;

  width: 330px;
  height: 330px;

  right: -130px;
  top: -170px;

  border: 1px solid rgba(255,255,255,.10);

  border-radius: 50%;
}


.dem-coverage-feature::after {

  content: "";

  position: absolute;

  width: 190px;
  height: 190px;

  right: 70px;
  bottom: -130px;

  border: 1px solid rgba(255,255,255,.08);

  border-radius: 50%;
}


/* =========================================================
   FEATURE TOP
   ========================================================= */

.dem-coverage-feature-top {

  position: relative;

  z-index: 3;

  display: flex;
  align-items: center;

  gap: 15px;

  margin-bottom: 38px;
}


.dem-coverage-number {

  color: var(--orange);

  font-size: 12px;

  font-weight: 700;

  letter-spacing: 2px;
}


.dem-coverage-line {

  width: 58px;
  height: 1px;

  background: rgba(255,255,255,.35);
}


/* =========================================================
   FEATURE CONTENT
   ========================================================= */

.dem-coverage-feature-content {

  position: relative;

  z-index: 3;

  display: flex;

  align-items: flex-end;

  justify-content: space-between;

  gap: 40px;
}


.dem-coverage-feature-content > div:first-child {

  min-width: 0;
}


.dem-coverage-feature h3 {

  margin: 0 0 17px;

  color: #ffffff;

  font-size: clamp(38px, 4vw, 52px);

  line-height: .98;

  font-weight: 700;

  letter-spacing: -1.5px;
}


.dem-coverage-feature p {

  max-width: 500px;

  margin: 0 0 23px;

  color: rgba(255,255,255,.70);

  font-size: 15px;

  line-height: 1.6;
}


/* =========================================================
   FEATURE LINK
   ========================================================= */

.dem-coverage-link {

  display: inline-flex;

  align-items: center;

  gap: 17px;

  color: #ffffff;

  font-size: 10px;

  font-weight: 700;

  letter-spacing: 2px;
}


.dem-coverage-link b {

  color: var(--orange);

  font-size: 22px;

  font-weight: 400;

  transition: transform .25s ease;
}


.dem-coverage-feature:hover
.dem-coverage-link b {

  transform: translateX(5px);
}


/* =========================================================
   FEATURE ICON
   ========================================================= */

.dem-coverage-feature-icon {

  flex: 0 0 112px;

  width: 112px;
  height: 112px;

  display: flex;

  align-items: center;
  justify-content: center;

  border: 1px solid rgba(255,116,31,.48);

  border-radius: 50%;
}


.dem-coverage-feature-icon svg {

  width: 55px;
  height: 55px;

  fill: none;

  stroke: var(--orange);

  stroke-width: 1.35;

  stroke-linecap: round;

  stroke-linejoin: round;
}


/* =========================================================
   SECONDARY CARDS
   ========================================================= */

.dem-coverage-grid {

  display: grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap: 16px;

  width: 100%;
}


/* =========================================================
   SECONDARY CARD
   ========================================================= */

.dem-coverage-card {

  position: relative;

  min-width: 0;

  min-height: 285px;

  display: flex;

  flex-direction: column;

  padding: 25px 26px 27px;

  overflow: hidden;

  background: rgba(255,255,255,.88);

  border: 1px solid var(--border);

  border-radius: 12px;

  text-decoration: none;

  box-shadow:
    0 10px 30px rgba(13,49,87,.035);

  transition:
    transform .3s ease,
    border-color .3s ease,
    box-shadow .3s ease;
}


.dem-coverage-card::before {

  content: "";

  position: absolute;

  width: 125px;
  height: 125px;

  right: -70px;
  bottom: -70px;

  border: 1px solid rgba(80,143,207,.13);

  border-radius: 50%;

  pointer-events: none;
}


.dem-coverage-card:hover {

  transform: translateY(-6px);

  border-color: rgba(255,116,31,.28);

  box-shadow:
    0 22px 42px rgba(13,49,87,.09);
}


/* =========================================================
   CARD TOP
   ========================================================= */

.dem-coverage-card-top {

  display: flex;

  align-items: flex-start;

  justify-content: space-between;

  margin-bottom: 32px;
}


/* =========================================================
   CARD ICON
   ========================================================= */

.dem-coverage-card-icon {

  width: 65px;
  height: 65px;

  display: flex;

  align-items: center;
  justify-content: center;

  background: var(--orange-soft);

  border: 1px solid rgba(255,116,31,.12);

  border-radius: 50%;
}


.dem-coverage-card-icon svg {

  width: 34px;
  height: 34px;

  fill: none;

  stroke: var(--orange);

  stroke-width: 1.55;

  stroke-linecap: round;

  stroke-linejoin: round;
}


/* =========================================================
   CARD NUMBER
   ========================================================= */

.dem-coverage-card-number {

  display: flex;

  align-items: center;

  gap: 11px;

  padding-top: 8px;
}


.dem-coverage-card-number span {

  color: var(--orange);

  font-size: 12px;

  font-weight: 700;

  letter-spacing: 1.5px;
}


.dem-coverage-card-number i {

  display: block;

  width: 35px;
  height: 1px;

  background: rgba(13,49,87,.24);
}


/* =========================================================
   CARD TITLE
   ========================================================= */

.dem-coverage-card h3 {

  position: relative;

  z-index: 2;

  margin: 0 0 12px;

  color: var(--navy);

  font-size: 22px;

  line-height: 1.12;

  font-weight: 700;

  letter-spacing: -.4px;
}


/* =========================================================
   CARD DESCRIPTION
   ========================================================= */

.dem-coverage-card p {

  position: relative;

  z-index: 2;

  max-width: 245px;

  margin: 0;

  color: var(--muted);

  font-size: 13.5px;

  line-height: 1.58;
}


/* =========================================================
   CARD LINK
   ========================================================= */

.dem-coverage-card-link {

  position: relative;

  z-index: 3;

  display: flex;

  align-items: center;

  gap: 13px;

  margin-top: auto;

  padding-top: 22px;

  color: var(--navy);

  font-size: 9px;

  font-weight: 700;

  letter-spacing: 1.7px;
}


.dem-coverage-card-link b {

  color: var(--orange);

  font-size: 20px;

  font-weight: 400;

  transition: transform .25s ease;
}


.dem-coverage-card:hover
.dem-coverage-card-link b {

  transform: translateX(5px);
}


/* =========================================================
   DESKTOP — EXACT 1280px
   ========================================================= */

@media (min-width: 1301px) {

  .dem-coverage-inner {

    width: 1280px;

    max-width: 1280px;

    padding-left: 0;
    padding-right: 0;
  }

}


/* =========================================================
   LAPTOP
   ========================================================= */

@media (max-width: 1300px) {

  .dem-coverage-inner {

    width: calc(100% - 60px);

    max-width: 1280px;
  }

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1050px) {

  .dem-coverage {

    padding: 80px 0 85px;
  }


  .dem-coverage-inner {

    width: calc(100% - 50px);

    max-width: 900px;
  }


  .dem-coverage-intro {

    max-width: 760px;

    margin-bottom: 38px;
  }


  .dem-coverage-title {

    font-size: 54px;
  }


  .dem-coverage-feature {

    min-height: 310px;

    padding: 34px 38px;
  }


  .dem-coverage-grid {

    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap: 15px;
  }


  .dem-coverage-card {

    min-height: 270px;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

  .dem-coverage {

    padding: 65px 0 70px;
  }


  .dem-coverage-inner {

    width: calc(100% - 34px);

    max-width: none;
  }


  .dem-coverage-dots {

    opacity: .45;
  }


  .dem-coverage-bg-circle-1 {

    width: 300px;
    height: 300px;

    top: -160px;
    right: -160px;
  }


  .dem-coverage-intro {

    margin-bottom: 32px;
  }


  .dem-coverage-eyebrow {

    gap: 10px;

    margin-bottom: 17px;

    font-size: 10px;

    letter-spacing: 2.2px;
  }


  .dem-coverage-eyebrow span {

    width: 30px;

    flex-basis: 30px;
  }


  .dem-coverage-title {

    font-size: clamp(42px, 12vw, 58px);

    line-height: 1;

    letter-spacing: -2px;

    margin-bottom: 18px;
  }


  .dem-coverage-title strong::after {

    bottom: -4px;

    height: 3px;
  }


  .dem-coverage-description {

    font-size: 15px;

    line-height: 1.65;
  }


  /* FEATURED */

  .dem-coverage-feature {

    min-height: 350px;

    padding: 27px 25px;

    margin-bottom: 13px;

    border-radius: 11px;
  }


  .dem-coverage-feature-top {

    margin-bottom: 37px;
  }


  .dem-coverage-feature-content {

    display: block;
  }


  .dem-coverage-feature h3 {

    font-size: 37px;

    margin-bottom: 15px;
  }


  .dem-coverage-feature p {

    max-width: 285px;

    font-size: 14px;
  }


  .dem-coverage-feature-icon {

    position: absolute;

    width: 86px;
    height: 86px;

    right: 20px;
    bottom: 23px;
  }


  .dem-coverage-feature-icon svg {

    width: 43px;
    height: 43px;
  }


  /* SECONDARY */

  .dem-coverage-grid {

    grid-template-columns: 1fr;

    gap: 13px;
  }


  .dem-coverage-card {

    min-height: 245px;

    padding: 22px 23px 24px;

    border-radius: 11px;
  }


  .dem-coverage-card-top {

    margin-bottom: 27px;
  }


  .dem-coverage-card-icon {

    width: 62px;
    height: 62px;
  }


  .dem-coverage-card-icon svg {

    width: 32px;
    height: 32px;
  }


  .dem-coverage-card h3 {

    font-size: 22px;
  }


  .dem-coverage-card p {

    font-size: 14px;
  }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 430px) {

  .dem-coverage-inner {

    width: calc(100% - 26px);
  }


  .dem-coverage-title {

    font-size: 40px;
  }


  .dem-coverage-feature {

    min-height: 335px;

    padding: 25px 21px;
  }


  .dem-coverage-feature h3 {

    font-size: 33px;
  }


  .dem-coverage-feature-icon {

    width: 76px;
    height: 76px;

    right: 15px;
    bottom: 21px;
  }


  .dem-coverage-feature-icon svg {

    width: 38px;
    height: 38px;
  }


  .dem-coverage-card {

    min-height: 230px;
  }

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-4f385bc *//* =========================================================
   DUA ESTATE & MARKETING
   INTERNATIONAL CLIENTS
   PREMIUM V2 — FINAL 1280PX VERSION
   ========================================================= */

.dem-overseas-v2 {

  --dem-navy: #0d3157;
  --dem-navy-dark: #082844;

  --dem-orange: #ff741f;
  --dem-orange-soft: #fff0e7;

  --dem-text: #24496f;
  --dem-muted: #647a95;

  --dem-bg: #f5f9fd;

  position: relative;

  width: 100%;

  overflow: hidden;

  isolation: isolate;

  box-sizing: border-box;

  background:
    linear-gradient(
      135deg,
      #f8fbff 0%,
      #f3f8fd 52%,
      #edf5fb 100%
    );

  padding: 100px 0 105px;
}


/* =========================================================
   BOX SIZING
   ========================================================= */

.dem-overseas-v2 *,
.dem-overseas-v2 *::before,
.dem-overseas-v2 *::after {
  box-sizing: border-box;
}


/* =========================================================
   WORLD MAP BACKGROUND
   ========================================================= */

.dem-overseas-v2-map {

  position: absolute;

  width: 1100px;
  height: 650px;

  right: -100px;
  top: -15px;

  opacity: .40;

  pointer-events: none;

  z-index: 0;

  background-image:
    radial-gradient(
      circle,
      rgba(99,158,218,.34) 1.5px,
      transparent 1.9px
    );

  background-size: 9px 9px;

  -webkit-mask-image:
    radial-gradient(
      ellipse at center,
      #000 20%,
      rgba(0,0,0,.8) 48%,
      transparent 78%
    );

  mask-image:
    radial-gradient(
      ellipse at center,
      #000 20%,
      rgba(0,0,0,.8) 48%,
      transparent 78%
    );

  transform:
    rotate(-2deg)
    translateZ(0);
}


/* =========================================================
   MAIN 1280PX CONTAINER
   ========================================================= */

.dem-overseas-v2-inner {

  position: relative;

  z-index: 3;

  width: 100%;
  max-width: 1380px;

  margin: 0 auto;

  padding: 0;

  display: grid;

  grid-template-columns:
    minmax(0, 1.04fr)
    minmax(0, .96fr);

  align-items: center;

  gap: 55px;
}


/* =========================================================
   LEFT CONTENT
   ========================================================= */

.dem-overseas-v2-content {

  position: relative;

  z-index: 5;

  min-width: 0;
}


/* =========================================================
   SECTION LABEL
   ========================================================= */

.dem-overseas-v2-label {

  display: flex;

  align-items: center;

  gap: 13px;

  margin: 0 0 23px;

  color: var(--dem-orange);

  font-size: 12px;

  line-height: 1;

  font-weight: 700;

  letter-spacing: 2.8px;

  text-transform: uppercase;
}


.dem-overseas-v2-label span {

  display: block;

  width: 39px;
  height: 2px;

  flex: 0 0 39px;

  background: var(--dem-orange);
}


/* =========================================================
   MAIN HEADING
   ========================================================= */

.dem-overseas-v2-title {

  max-width: 700px;

  margin: 0 0 25px;

  color: var(--dem-navy);

  font-size:
    clamp(
      48px,
      4.25vw,
      68px
    );

  line-height: .99;

  font-weight: 700;

  letter-spacing: -2.7px;
}


.dem-overseas-v2-title span {

  position: relative;

  display: inline-block;

  color: var(--dem-orange);
}


.dem-overseas-v2-title span::after {

  content: "";

  position: absolute;

  left: 0;
  right: 0;

  bottom: -5px;

  height: 4px;

  border-radius: 10px;

  background: var(--dem-orange);

  opacity: .92;
}


/* =========================================================
   DESCRIPTION
   ========================================================= */

.dem-overseas-v2-description {

  max-width: 690px;

  margin: 0 0 32px;

  color: var(--dem-text);

  font-size: 16px;

  line-height: 1.72;

  font-weight: 400;
}


/* =========================================================
   FEATURE GRID — 2 x 2
   ========================================================= */

.dem-overseas-v2-features {

  width: 100%;

  max-width: 800px;

  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 15px;
}


/* =========================================================
   FEATURE CARD
   ========================================================= */

.dem-overseas-v2-card {

  position: relative;

  min-width: 0;

  min-height: 135px;

  display: flex;

  align-items: center;

  gap: 18px;

  padding: 21px 21px;

  overflow: hidden;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.98),
      rgba(255,255,255,.84)
    );

  border: 1px solid rgba(13,49,87,.10);

  border-radius: 15px;

  box-shadow:
    0 10px 28px rgba(13,49,87,.045);

  transition:
    transform .3s ease,
    box-shadow .3s ease,
    border-color .3s ease;
}


.dem-overseas-v2-card::after {

  content: "";

  position: absolute;

  width: 65px;
  height: 65px;

  right: -32px;
  bottom: -32px;

  border-radius: 50%;

  background:
    rgba(255,116,31,.07);

  pointer-events: none;
}


.dem-overseas-v2-card:hover {

  transform: translateY(-4px);

  border-color:
    rgba(255,116,31,.28);

  box-shadow:
    0 18px 38px rgba(13,49,87,.09);
}


/* =========================================================
   CARD ICON
   ========================================================= */

.dem-overseas-v2-icon {

  width: 64px;
  height: 64px;

  flex: 0 0 64px;

  display: flex;

  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background:
    linear-gradient(
      145deg,
      #fff6ef,
      #fff0e7
    );

  border: 1px solid
    rgba(255,116,31,.15);
}


.dem-overseas-v2-icon svg {

  width: 30px;
  height: 30px;

  fill: none;

  stroke:
    var(--dem-orange);

  stroke-width: 1.6;

  stroke-linecap: round;

  stroke-linejoin: round;
}


/* =========================================================
   CARD CONTENT
   ========================================================= */

.dem-overseas-v2-card-content {

  min-width: 0;
}


.dem-overseas-v2-number {

  margin: 0 0 5px;

  color: var(--dem-orange);

  font-size: 10px;

  line-height: 1;

  font-weight: 700;

  letter-spacing: 2px;
}


.dem-overseas-v2-card h3 {

  margin: 0 0 7px;

  color: var(--dem-navy);

  font-size: 18px;

  line-height: 1.13;

  font-weight: 700;

  letter-spacing: -.25px;
}


.dem-overseas-v2-card p {

  margin: 0;

  color: var(--dem-muted);

  font-size: 13.5px;

  line-height: 1.42;
}


/* =========================================================
   RIGHT VISUAL
   ========================================================= */

.dem-overseas-v2-visual {

  position: relative;

  min-width: 0;

  min-height: 570px;

  display: flex;

  align-items: center;

  justify-content: center;
}


/* =========================================================
   ORANGE OFFSET FRAME
   ========================================================= */

.dem-overseas-v2-orange-frame {

  position: absolute;

  z-index: 1;

  width: 91%;

  height: 84%;

  right: -1%;

  top: 8%;

  background:
    linear-gradient(
      135deg,
      #ff812f,
      #ff6e18
    );

  border-radius: 28px;

  transform: rotate(-3deg);

  box-shadow:
    0 20px 45px
    rgba(255,116,31,.10);
}


/* =========================================================
   IMAGE WRAPPER
   ========================================================= */

.dem-overseas-v2-image-wrap {

  position: relative;

  z-index: 3;

  width: 91%;

  height: 545px;

  overflow: hidden;

  border-radius: 25px;

  background:
    var(--dem-navy-dark);

  box-shadow:
    0 28px 65px
    rgba(8,37,67,.19);
}


/* =========================================================
   IMAGE
   ========================================================= */

.dem-overseas-v2-image {

  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;

  object-position: center;

  transition:
    transform .8s ease;
}


.dem-overseas-v2-image-wrap:hover
.dem-overseas-v2-image {

  transform: scale(1.035);
}


/* =========================================================
   IMAGE LABEL
   ========================================================= */

.dem-overseas-v2-image-label {

  position: absolute;

  z-index: 6;

  left: 7%;

  bottom: 7%;

  min-width: 215px;

  padding: 16px 21px;

  background:
    rgba(8,40,68,.93);

  border-left:
    3px solid var(--dem-orange);

  box-shadow:
    0 15px 35px
    rgba(8,37,67,.18);

  backdrop-filter:
    blur(8px);

  -webkit-backdrop-filter:
    blur(8px);
}


.dem-overseas-v2-image-label-small {

  display: block;

  margin: 0 0 7px;

  color: var(--dem-orange);

  font-size: 9px;

  line-height: 1;

  font-weight: 700;

  letter-spacing: 2px;
}


.dem-overseas-v2-image-label strong {

  display: block;

  color: #fff;

  font-size: 14px;

  line-height: 1.2;

  font-weight: 700;

  letter-spacing: .2px;
}


/* =========================================================
   ROUTE POINTS
   ========================================================= */

.dem-overseas-v2-route-point {

  position: absolute;

  z-index: 7;

  width: 13px;
  height: 13px;

  border-radius: 50%;

  background:
    var(--dem-orange);

  border:
    3px solid #fff;

  box-shadow:
    0 0 0 1px
    rgba(255,116,31,.35);
}


.dem-overseas-v2-route-point::after {

  content: "";

  position: absolute;

  width: 5px;
  height: 5px;

  left: 50%;
  top: 50%;

  transform:
    translate(-50%, -50%);

  border-radius: 50%;

  background: #fff;
}


.dem-overseas-v2 .point-one {

  top: 21%;

  right: 4%;
}


.dem-overseas-v2 .point-two {

  top: 37%;

  left: 3%;
}


/* =========================================================
   LARGE DESKTOP
   EXACT 1280PX
   ========================================================= */

@media (min-width: 1301px) {

  .dem-overseas-v2-inner {

    width: 1280px;

    max-width: 1280px;

    padding-left: 0;
    padding-right: 0;
  }

}


/* =========================================================
   LAPTOP
   ========================================================= */

@media (max-width: 1300px) {

  .dem-overseas-v2-inner {

    width:
      calc(100% - 60px);

    max-width: 1280px;
  }

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {

  .dem-overseas-v2 {

    padding:
      80px 0 90px;
  }


  .dem-overseas-v2-inner {

    width:
      calc(100% - 50px);

    max-width: 900px;

    grid-template-columns: 1fr;

    gap: 50px;
  }


  .dem-overseas-v2-content {

    max-width: 850px;

    margin: 0 auto;
  }


  .dem-overseas-v2-title {

    max-width: 800px;
  }


  .dem-overseas-v2-description {

    max-width: 800px;
  }


  .dem-overseas-v2-features {

    max-width: 850px;
  }


  .dem-overseas-v2-visual {

    width: 100%;

    min-height: 555px;

    max-width: 720px;

    margin: 0 auto;
  }


  .dem-overseas-v2-image-wrap {

    width: 92%;

    height: 520px;
  }


  .dem-overseas-v2-orange-frame {

    width: 92%;

    height: 86%;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

  .dem-overseas-v2 {

    padding:
      68px 0 75px;
  }


  .dem-overseas-v2-inner {

    width:
      calc(100% - 32px);

    max-width: none;

    gap: 42px;
  }


  .dem-overseas-v2-label {

    font-size: 10px;

    letter-spacing: 2px;

    gap: 9px;

    margin-bottom: 18px;
  }


  .dem-overseas-v2-label span {

    width: 31px;

    flex-basis: 31px;
  }


  .dem-overseas-v2-title {

    font-size:
      clamp(
        39px,
        11vw,
        54px
      );

    line-height: 1;

    letter-spacing: -1.7px;

    margin-bottom: 22px;
  }


  .dem-overseas-v2-title span::after {

    height: 3px;

    bottom: -3px;
  }


  .dem-overseas-v2-description {

    font-size: 15px;

    line-height: 1.65;

    margin-bottom: 27px;
  }


  /* =====================
     CARDS
     ===================== */

  .dem-overseas-v2-features {

    grid-template-columns: 1fr;

    gap: 12px;
  }


  .dem-overseas-v2-card {

    min-height: 112px;

    padding: 18px;

    gap: 15px;

    border-radius: 15px;
  }


  .dem-overseas-v2-icon {

    width: 57px;
    height: 57px;

    flex: 0 0 57px;
  }


  .dem-overseas-v2-icon svg {

    width: 27px;
    height: 27px;
  }


  .dem-overseas-v2-card h3 {

    font-size: 17px;

    margin-bottom: 5px;
  }


  .dem-overseas-v2-card p {

    font-size: 13px;
  }


  /* =====================
     IMAGE
     ===================== */

  .dem-overseas-v2-visual {

    width: 100%;

    min-height: 385px;

    max-width: none;
  }


  .dem-overseas-v2-image-wrap {

    width: 93%;

    height: 385px;

    border-radius: 22px;
  }


  .dem-overseas-v2-orange-frame {

    width: 91%;

    height: 88%;

    border-radius: 22px;
  }


  .dem-overseas-v2-image-label {

    left: 7%;

    bottom: 7%;

    min-width: 175px;

    padding:
      13px 16px;
  }


  .dem-overseas-v2-image-label-small {

    font-size: 8px;

    margin-bottom: 5px;
  }


  .dem-overseas-v2-image-label strong {

    font-size: 12px;
  }


  /* MAP */

  .dem-overseas-v2-map {

    width: 600px;

    height: 420px;

    right: -260px;

    top: 360px;

    opacity: .25;
  }


  /* HIDE ROUTE POINTS */

  .dem-overseas-v2-route-point {

    display: none;
  }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 430px) {

  .dem-overseas-v2-inner {

    width:
      calc(100% - 26px);
  }


  .dem-overseas-v2-card {

    padding: 16px;
  }


  .dem-overseas-v2-icon {

    flex-basis: 53px;

    width: 53px;
    height: 53px;
  }


  .dem-overseas-v2-card h3 {

    font-size: 16px;
  }


  .dem-overseas-v2-card p {

    font-size: 12px;
  }


  .dem-overseas-v2-visual {

    min-height: 330px;
  }


  .dem-overseas-v2-image-wrap {

    height: 330px;

    border-radius: 20px;
  }


  .dem-overseas-v2-orange-frame {

    border-radius: 20px;
  }

}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 360px) {

  .dem-overseas-v2-inner {

    width:
      calc(100% - 22px);
  }


  .dem-overseas-v2-title {

    font-size: 36px;
  }


  .dem-overseas-v2-card {

    gap: 12px;
  }

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-a136ebf *//* =========================================================
   DUA ESTATE & MARKETING
   OUR OFFICE SECTION
   PREMIUM 1280px VERSION
   ========================================================= */

.dem-office-section {
    width: 100%;
    padding: 85px 0;
    background: #ffffff;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
}

.dem-office-section *,
.dem-office-section *::before,
.dem-office-section *::after {
    box-sizing: border-box;
}


/* =========================================================
   SUBTLE BACKGROUND DETAIL
   ========================================================= */

.dem-office-section::before {
    content: "";
    position: absolute;

    width: 430px;
    height: 430px;

    right: -220px;
    top: -210px;

    border: 1px solid rgba(6, 27, 51, 0.045);
    border-radius: 50%;

    pointer-events: none;
}

.dem-office-section::after {
    content: "";
    position: absolute;

    width: 280px;
    height: 280px;

    left: -150px;
    bottom: -170px;

    border: 1px solid rgba(244, 123, 32, 0.055);
    border-radius: 50%;

    pointer-events: none;
}


/* =========================================================
   MAIN CONTAINER
   ========================================================= */

.dem-office-inner {
    width: 100%;
    max-width: 1380px;

    margin: 0 auto;
    padding: 0;

    display: grid;
    grid-template-columns: 1.08fr 0.92fr;

    gap: 70px;

    align-items: stretch;

    position: relative;
    z-index: 2;
}


/* =========================================================
   LEFT CONTENT
   ========================================================= */

.dem-office-content {
    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 15px 0;
}


/* =========================================================
   EYEBROW
   ========================================================= */

.dem-office-eyebrow {
    display: flex;
    align-items: center;

    gap: 14px;
    margin-bottom: 19px;

    color: #f47b20;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: 700;

    letter-spacing: 3.5px;
    line-height: 1;

    text-transform: uppercase;
}

.dem-office-eyebrow span {
    display: block;

    width: 42px;
    height: 2px;

    background: #f47b20;
}


/* =========================================================
   TITLE
   ========================================================= */

.dem-office-title {
    margin: 0 0 21px;

    color: #061b33;

    font-family: Arial, Helvetica, sans-serif;
    font-size: clamp(43px, 4.5vw, 62px);
    font-weight: 700;

    line-height: 1.02;
    letter-spacing: -2.4px;
}

.dem-office-title em {
    color: #f47b20;
    font-style: normal;
}


/* =========================================================
   DESCRIPTION
   ========================================================= */

.dem-office-description {
    max-width: 670px;

    margin: 0 0 32px;

    color: #61738a;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 17px;
    font-weight: 400;

    line-height: 1.7;
}


/* =========================================================
   ADDRESS
   ========================================================= */

.dem-office-address {
    display: flex;
    align-items: center;

    gap: 17px;

    max-width: 600px;

    padding: 19px 21px;

    background: #f7f9fc;

    border-left: 3px solid #f47b20;

    margin-bottom: 29px;
}

.dem-office-icon {
    width: 48px;
    height: 48px;

    flex: 0 0 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #ffffff;

    color: #f47b20;

    border: 1px solid #e7edf3;
}

.dem-office-icon svg {
    width: 23px;
    height: 23px;

    fill: none;
    stroke: currentColor;

    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.dem-office-small-label {
    display: block;

    margin-bottom: 7px;

    color: #8a98a8;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-weight: 700;

    letter-spacing: 2px;
}

.dem-office-address strong {
    display: block;

    color: #061b33;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    font-weight: 700;

    line-height: 1.55;
}


/* =========================================================
   CONTACT LINK
   ========================================================= */

.dem-office-link {
    width: fit-content;

    display: inline-flex;
    align-items: center;

    gap: 23px;

    color: #061b33;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: 700;

    text-decoration: none;

    transition: color 0.25s ease;
}

.dem-office-link:hover {
    color: #f47b20;
}

.dem-office-arrow {
    font-size: 21px;
    line-height: 1;

    color: #f47b20;

    transition: transform 0.25s ease;
}

.dem-office-link:hover .dem-office-arrow {
    transform: translateX(5px);
}


/* =========================================================
   RIGHT INFORMATION PANEL
   ========================================================= */

.dem-office-panel {
    position: relative;

    min-height: 390px;

    padding: 34px 35px 31px;

    display: flex;
    flex-direction: column;

    justify-content: space-between;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(244, 123, 32, 0.15) 0,
            rgba(244, 123, 32, 0.04) 125px,
            transparent 230px
        ),
        #061b33;

    border-radius: 15px;

    box-shadow:
        0 20px 45px rgba(6, 27, 51, 0.13);
}


/* =========================================================
   PANEL DECORATION
   ========================================================= */

.dem-office-panel::before {
    content: "";

    position: absolute;

    width: 270px;
    height: 270px;

    right: -145px;
    top: -145px;

    border: 1px solid rgba(244, 123, 32, 0.22);

    border-radius: 50%;

    pointer-events: none;
}

.dem-office-panel::after {
    content: "";

    position: absolute;

    width: 170px;
    height: 170px;

    left: -105px;
    bottom: -110px;

    border: 1px solid rgba(255, 255, 255, 0.08);

    border-radius: 50%;

    pointer-events: none;
}


/* =========================================================
   PANEL TOP
   ========================================================= */

.dem-office-panel-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    position: relative;
    z-index: 2;
}

.dem-office-panel-number {
    color: rgba(255, 255, 255, 0.13);

    font-family: Arial, Helvetica, sans-serif;
    font-size: 53px;
    font-weight: 300;

    line-height: 0.8;
    letter-spacing: -3px;
}

.dem-office-panel-label {
    padding-top: 3px;

    color: #f47b20;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-weight: 700;

    letter-spacing: 2.5px;

    text-transform: uppercase;
}


/* =========================================================
   WORKING HOURS
   ========================================================= */

.dem-office-hours {
    display: flex;
    align-items: flex-start;

    gap: 19px;

    position: relative;
    z-index: 2;

    padding: 25px 0;

    border-top: 1px solid rgba(255, 255, 255, 0.11);
    border-bottom: 1px solid rgba(255, 255, 255, 0.11);
}

.dem-office-hours-icon {
    width: 50px;
    height: 50px;

    flex: 0 0 50px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: rgba(244, 123, 32, 0.12);

    border: 1px solid rgba(244, 123, 32, 0.30);

    color: #f47b20;
}

.dem-office-hours-icon svg {
    width: 23px;
    height: 23px;

    fill: none;
    stroke: currentColor;

    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.dem-office-hours-content > span {
    display: block;

    margin-bottom: 7px;

    color: rgba(255, 255, 255, 0.52);

    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-weight: 700;

    letter-spacing: 2.2px;
}

.dem-office-hours-content strong {
    display: block;

    color: #ffffff;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 28px;
    font-weight: 700;

    line-height: 1.2;
    letter-spacing: -0.7px;
}

.dem-office-hours-content strong i {
    color: #f47b20;

    font-style: normal;
    padding: 0 4px;
}

.dem-office-hours-content p {
    max-width: 330px;

    margin: 9px 0 0;

    color: rgba(255, 255, 255, 0.67);

    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;

    line-height: 1.55;
}


/* =========================================================
   PANEL BOTTOM
   ========================================================= */

.dem-office-panel-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    position: relative;
    z-index: 2;
}

.dem-office-panel-bottom span {
    display: block;

    margin-bottom: 5px;

    color: #f47b20;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 9px;
    font-weight: 700;

    letter-spacing: 2px;
}

.dem-office-panel-bottom p {
    margin: 0;

    color: rgba(255, 255, 255, 0.67);

    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;

    line-height: 1.5;
}

.dem-office-panel-bottom > a {
    width: 45px;
    height: 45px;

    flex: 0 0 45px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #f47b20;
    color: #ffffff;

    font-size: 20px;
    line-height: 1;

    text-decoration: none;

    transition:
        transform 0.25s ease,
        background 0.25s ease;
}

.dem-office-panel-bottom > a:hover {
    color: #ffffff;

    background: #df6913;

    transform: translateX(4px);
}


/* =========================================================
   EXACT 1280px DESKTOP
   ========================================================= */

@media (min-width: 1281px) {

    .dem-office-inner {
        width: 1280px;
        max-width: 1280px;
    }

}


/* =========================================================
   LAPTOP
   ========================================================= */

@media (max-width: 1280px) {

    .dem-office-inner {
        width: calc(100% - 60px);
    }

    .dem-office-inner {
        gap: 50px;
    }

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 950px) {

    .dem-office-section {
        padding: 75px 0;
    }

    .dem-office-inner {
        width: calc(100% - 44px);

        grid-template-columns: 1fr;

        gap: 40px;
    }

    .dem-office-content {
        padding: 0;
    }

    .dem-office-title {
        font-size: 52px;
    }

    .dem-office-panel {
        min-height: 370px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .dem-office-section {
        padding: 60px 0;
    }

    .dem-office-inner {
        width: calc(100% - 28px);

        grid-template-columns: 1fr;

        gap: 30px;
    }

    .dem-office-eyebrow {
        gap: 11px;

        margin-bottom: 16px;

        font-size: 10px;
        letter-spacing: 2.8px;
    }

    .dem-office-eyebrow span {
        width: 30px;
    }

    .dem-office-title {
        margin-bottom: 17px;

        font-size: clamp(38px, 11vw, 50px);

        line-height: 1;
        letter-spacing: -1.8px;
    }

    .dem-office-description {
        margin-bottom: 25px;

        font-size: 15.5px;
        line-height: 1.65;
    }

    .dem-office-address {
        align-items: flex-start;

        gap: 14px;

        padding: 17px;

        margin-bottom: 24px;
    }

    .dem-office-icon {
        width: 44px;
        height: 44px;

        flex-basis: 44px;
    }

    .dem-office-icon svg {
        width: 21px;
        height: 21px;
    }

    .dem-office-address strong {
        font-size: 14px;
    }

    .dem-office-panel {
        min-height: 360px;

        padding: 28px 24px 25px;

        border-radius: 14px;
    }

    .dem-office-panel-number {
        font-size: 45px;
    }

    .dem-office-panel-label {
        font-size: 9px;
        letter-spacing: 2px;
    }

    .dem-office-hours {
        gap: 14px;

        padding: 22px 0;
    }

    .dem-office-hours-icon {
        width: 44px;
        height: 44px;

        flex-basis: 44px;
    }

    .dem-office-hours-icon svg {
        width: 20px;
        height: 20px;
    }

    .dem-office-hours-content strong {
        font-size: 24px;
    }

    .dem-office-hours-content p {
        font-size: 12.5px;
    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 420px) {

    .dem-office-section {
        padding: 52px 0;
    }

    .dem-office-inner {
        width: calc(100% - 22px);
    }

    .dem-office-title {
        font-size: 36px;
    }

    .dem-office-panel {
        padding: 25px 20px 22px;
    }

    .dem-office-panel-bottom p {
        font-size: 12px;
    }

    .dem-office-panel-bottom > a {
        width: 40px;
        height: 40px;

        flex-basis: 40px;
    }

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-459fa524 *//* =========================================================
   DUA ESTATE — TESTIMONIALS HEADER
========================================================= */

.dua-testimonials-header {
    width: 100%;
    max-width: 1380px;
    margin: 0 auto;
    padding: 85px 0 45px;

    text-align: left;
}


/* EYEBROW */

.dua-testimonials-eyebrow {
    display: flex;
    align-items: center;
    gap: 11px;

    margin-bottom: 16px;

    color: #f47b20;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2.8px;
    line-height: 1.2;
}

.dua-testimonials-eyebrow span {
    width: 34px;
    height: 2px;

    display: block;

    background: #f47b20;
    border-radius: 2px;
}


/* HEADING */

.dua-testimonials-header h2 {
    max-width: 800px;

    margin: 0;

    color: #ffffff;

    font-size: clamp(46px, 5vw, 66px);
    line-height: .98;
    letter-spacing: -3px;
    font-weight: 700;

    border: 0 !important;
    border-bottom: 0 !important;
    text-decoration: none !important;
    box-shadow: none !important;
}

.dua-testimonials-header h2 em {
    display: block;

    color: #f47b20;
    font-style: normal;

    border: 0 !important;
    border-bottom: 0 !important;
    text-decoration: none !important;
    box-shadow: none !important;
}

.dua-testimonials-header h2::before,
.dua-testimonials-header h2::after,
.dua-testimonials-header h2 em::before,
.dua-testimonials-header h2 em::after {
    display: none !important;
    content: none !important;
}


/* DESCRIPTION */

.dua-testimonials-header p {
    max-width: 700px;

    margin: 20px 0 0;

    color: #a9bfd2;

    font-size: 15px;
    line-height: 1.75;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .dua-testimonials-header {
        padding: 60px 20px 32px;
    }

    .dua-testimonials-header h2 {
        font-size: clamp(38px, 10vw, 52px);
        letter-spacing: -2px;
    }

    .dua-testimonials-header p {
        font-size: 14px;
        line-height: 1.7;
    }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1e079283 *//* =========================================================
   DUA ESTATE — TESTIMONIALS BACKGROUND
========================================================= */

.dua-home-testimonials {
    position: relative;
    width: 100%;
    background: #061b33 !important;
    overflow: hidden;
}


/* Subtle premium architectural accent */
.dua-home-testimonials::before {
    content: "";
    position: absolute;

    width: 520px;
    height: 520px;

    right: -250px;
    top: -260px;

    border: 1px solid rgba(244, 123, 32, 0.18);
    border-radius: 50%;

    pointer-events: none;
}


/* Second subtle circle */
.dua-home-testimonials::after {
    content: "";
    position: absolute;

    width: 300px;
    height: 300px;

    left: -180px;
    bottom: -180px;

    border: 1px solid rgba(157, 184, 210, 0.14);
    border-radius: 50%;

    pointer-events: none;
}


/* Keep Elementor / Trustindex content above decoration */
.dua-home-testimonials > .e-con,
.dua-home-testimonials > .elementor-container,
.dua-home-testimonials > .elementor-widget-wrap {
    position: relative;
    z-index: 2;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-49937a5 *//* =========================================================
   DUA ESTATE & MARKETING
   WHY CHOOSE US / WHY WORK WITH US
   PREMIUM 1280px VERSION
   ========================================================= */

.dem-why-section {
    width: 100%;
    padding: 100px 0 105px;
    background: #f6f8fb;
    position: relative;
    overflow: hidden;
}

/* BACKGROUND DETAILS */

.dem-why-section::before {
    content: "";
    position: absolute;
    width: 560px;
    height: 560px;
    border: 1px solid rgba(6, 27, 51, 0.045);
    border-radius: 50%;
    top: -300px;
    right: -180px;
    pointer-events: none;
}

.dem-why-section::after {
    content: "";
    position: absolute;
    width: 400px;
    height: 400px;
    border: 1px solid rgba(244, 123, 32, 0.055);
    border-radius: 50%;
    bottom: -250px;
    left: -190px;
    pointer-events: none;
}


/* =========================================================
   MAIN CONTAINER
   ========================================================= */

.dem-why-container {
    width: 100%;
    max-width: 1380px;
    margin: 0 auto;
    padding: 0;
    position: relative;
    z-index: 2;
}


/* =========================================================
   INTRO
   ========================================================= */

.dem-why-intro {
    max-width: 900px;
    margin-bottom: 52px;
}

.dem-why-eyebrow {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;

    font-family: Arial, sans-serif;
    font-size: 12px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 3.5px;
    color: #f47b20;
    text-transform: uppercase;
}

.dem-why-eyebrow span {
    display: block;
    width: 42px;
    height: 2px;
    background: #f47b20;
    flex-shrink: 0;
}

.dem-why-title {
    margin: 0 0 19px;

    font-family: Arial, sans-serif;
    font-size: clamp(46px, 5vw, 68px);
    line-height: 0.98;
    font-weight: 700;
    letter-spacing: -2.8px;
    color: #061b33;
}

.dem-why-title em {
    color: #f47b20;
    font-style: normal;
}

.dem-why-description {
    max-width: 820px;
    margin: 0;

    font-family: Arial, sans-serif;
    font-size: 17px;
    line-height: 1.7;
    font-weight: 400;
    color: #607188;
}


/* =========================================================
   GRID
   ========================================================= */

.dem-why-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}


/* =========================================================
   STANDARD CARDS
   ========================================================= */

.dem-why-card {
    min-height: 292px;
    padding: 29px 30px 28px;

    position: relative;
    overflow: hidden;

    background: #ffffff;
    border: 1px solid #e2e8ef;
    border-radius: 14px;

    box-shadow: 0 8px 30px rgba(6, 27, 51, 0.035);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}

.dem-why-card:hover {
    transform: translateY(-5px);

    border-color: rgba(244, 123, 32, 0.30);

    box-shadow: 0 18px 42px rgba(6, 27, 51, 0.09);
}


/* =========================================================
   CARD TOP
   ========================================================= */

.dem-why-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 25px;
}


/* =========================================================
   ICON
   ========================================================= */

.dem-why-icon {
    width: 62px;
    height: 62px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #fff7f0;
    border: 1px solid #f8dfcc;

    color: #f47b20;

    transition:
        background 0.3s ease,
        transform 0.3s ease;
}

.dem-why-card:hover .dem-why-icon {
    background: #fff1e5;
    transform: translateY(-2px);
}

.dem-why-icon svg {
    width: 29px;
    height: 29px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.55;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* =========================================================
   NUMBER
   ========================================================= */

.dem-why-number {
    font-family: Arial, sans-serif;
    font-size: 50px;
    line-height: 0.8;
    font-weight: 300;
    letter-spacing: -3px;

    color: rgba(6, 27, 51, 0.105);

    user-select: none;
}


/* =========================================================
   CARD HEADING
   ========================================================= */

.dem-why-card h3 {
    margin: 0 0 10px;

    font-family: Arial, sans-serif;
    font-size: 19px;
    line-height: 1.3;
    font-weight: 700;
    letter-spacing: -0.2px;

    color: #061b33;
}


/* =========================================================
   CARD TEXT
   ========================================================= */

.dem-why-card p {
    margin: 0;
    max-width: 365px;

    font-family: Arial, sans-serif;
    font-size: 15px;
    line-height: 1.62;
    font-weight: 400;

    color: #61738a;
}


/* =========================================================
   ORANGE BOTTOM DETAIL
   ========================================================= */

.dem-why-line {
    display: block;

    width: 38px;
    height: 2px;

    position: absolute;
    left: 30px;
    bottom: 24px;

    background: #f47b20;
}


/* =========================================================
   CTA CARD
   ========================================================= */

.dem-why-cta {
    min-height: 292px;
    padding: 31px 32px;
    
    background:
        radial-gradient(
            circle at 92% 4%,
            rgba(244, 123, 32, 0.16) 0,
            rgba(244, 123, 32, 0.045) 95px,
            transparent 200px
        ),
        #061b33;

    border: 1px solid #061b33;

    box-shadow: 0 16px 42px rgba(6, 27, 51, 0.14);
}

.dem-why-cta:hover {
    border-color: #061b33;
    box-shadow: 0 22px 50px rgba(6, 27, 51, 0.19);
}


/* =========================================================
   CTA DECORATION
   ========================================================= */

.dem-why-cta::before {
    content: "";

    width: 175px;
    height: 175px;

    position: absolute;
    right: -80px;
    top: -78px;

    border: 1px solid rgba(244, 123, 32, 0.23);
    border-radius: 50%;
}

.dem-why-cta::after {
    content: "";

    width: 125px;
    height: 125px;

    position: absolute;
    right: -55px;
    bottom: -65px;

    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 50%;
}


/* =========================================================
   CTA LABEL
   ========================================================= */

.dem-why-cta-label {
    display: flex;
    align-items: center;
    gap: 12px;

    margin-bottom: 17px;

    position: relative;
    z-index: 2;

    font-family: Arial, sans-serif;
    font-size: 10px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 2.8px;
    color: #f47b20;
}

.dem-why-cta-label span {
    width: 27px;
    height: 2px;

    display: block;

    background: #f47b20;
}


/* =========================================================
   CTA HEADING
   ========================================================= */

.dem-why-cta h3 {
    margin: 0 0 12px;

    position: relative;
    z-index: 2;

    font-family: Arial, sans-serif;
    font-size: 26px;
    line-height: 1.16;
    font-weight: 700;
    letter-spacing: -0.6px;

    color: #ffffff;
}


/* =========================================================
   CTA TEXT
   ========================================================= */

.dem-why-cta p {
    max-width: 350px;

    margin: 0 0 22px;

    position: relative;
    z-index: 2;

    font-family: Arial, sans-serif;
    font-size: 14.5px;
    line-height: 1.6;

    color: rgba(255, 255, 255, 0.72);
}


/* =========================================================
   CTA BUTTON
   ========================================================= */

.dem-why-cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;

    min-width: 152px;
    padding: 12px 16px 12px 18px;

    position: relative;
    z-index: 5;

    border-radius: 6px;

    background: #f47b20;
    color: #ffffff !important;

    text-decoration: none;

    font-family: Arial, sans-serif;
    font-size: 13px;
    font-weight: 700;

    transition:
        background 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.dem-why-cta-button:hover {
    background: #df6913;
    color: #ffffff;

    transform: translateY(-2px);

    box-shadow: 0 8px 22px rgba(244, 123, 32, 0.30);
}

.dem-why-arrow {
    font-size: 20px;
    line-height: 1;

    transition: transform 0.25s ease;
}

.dem-why-cta-button:hover .dem-why-arrow {
    transform: translateX(4px);
}


/* =========================================================
   LARGE DESKTOP
   EXACT 1280px CONTENT WIDTH
   ========================================================= */

@media (min-width: 1281px) {

    .dem-why-container {
        width: 1280px;
        max-width: 1280px;
    }

}


/* =========================================================
   LAPTOP
   ========================================================= */

@media (max-width: 1280px) {

    .dem-why-container {
        width: calc(100% - 60px);
        max-width: 1280px;
    }

    .dem-why-section {
        padding: 90px 0 95px;
    }

    .dem-why-grid {
        gap: 18px;
    }

    .dem-why-card {
        padding-left: 27px;
        padding-right: 27px;
    }

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1050px) {

    .dem-why-container {
        width: calc(100% - 44px);
    }

    .dem-why-section {
        padding: 80px 0 85px;
    }

    .dem-why-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
    }

    .dem-why-card,
    .dem-why-cta {
        min-height: 280px;
    }

    .dem-why-title {
        font-size: clamp(43px, 6vw, 60px);
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .dem-why-section {
        padding: 65px 0 70px;
    }

    .dem-why-container {
        width: calc(100% - 30px);
        max-width: none;
    }

    .dem-why-intro {
        margin-bottom: 34px;
    }

    .dem-why-eyebrow {
        gap: 11px;
        margin-bottom: 15px;

        font-size: 10px;
        letter-spacing: 2.7px;
    }

    .dem-why-eyebrow span {
        width: 30px;
    }

    .dem-why-title {
        font-size: clamp(39px, 11vw, 52px);
        line-height: 1;
        letter-spacing: -2px;

        margin-bottom: 16px;
    }

    .dem-why-description {
        font-size: 15.5px;
        line-height: 1.65;
    }

    .dem-why-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .dem-why-card,
    .dem-why-cta {
        min-height: auto;
        padding: 25px 23px 27px;
        border-radius: 14px;
    }

    .dem-why-card-top {
        margin-bottom: 22px;
    }

    .dem-why-icon {
        width: 58px;
        height: 58px;
    }

    .dem-why-icon svg {
        width: 27px;
        height: 27px;
    }

    .dem-why-number {
        font-size: 45px;
    }

    .dem-why-card h3 {
        font-size: 18px;
        line-height: 1.3;
    }

    .dem-why-card p {
        font-size: 14.5px;
        line-height: 1.6;
    }

    .dem-why-line {
        position: static;
        margin-top: 22px;
        width: 33px;
    }

    .dem-why-cta {
        padding: 28px 24px 30px;
    }

    .dem-why-cta h3 {
        font-size: 24px;
    }

    .dem-why-cta p {
        font-size: 14.5px;
        margin-bottom: 20px;
    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 420px) {

    .dem-why-section {
        padding: 58px 0 63px;
    }

    .dem-why-container {
        width: calc(100% - 24px);
    }

    .dem-why-title {
        font-size: 38px;
        letter-spacing: -1.8px;
    }

    .dem-why-card,
    .dem-why-cta {
        padding-left: 20px;
        padding-right: 20px;
    }

    .dem-why-number {
        font-size: 42px;
    }

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-56403ac *//* =========================================================
   DUA ESTATE & MARKETING
   FINAL CTA — PREMIUM 1280px VERSION
   ========================================================= */

.dem-final-cta {
    width: 100%;
    padding: 80px 0;
    background: #f5f7fa;
    box-sizing: border-box;
}

.dem-final-cta *,
.dem-final-cta *::before,
.dem-final-cta *::after {
    box-sizing: border-box;
}


/* =========================================================
   MAIN CTA
   ========================================================= */

.dem-final-cta-inner {
    position: relative;

    width: 100%;
    max-width: 1380px;
    min-height: 535px;

    margin: 0 auto;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;
    border-radius: 18px;

    background:
        linear-gradient(
            90deg,
            rgba(4, 25, 47, 0.98) 0%,
            rgba(5, 34, 62, 0.96) 34%,
            rgba(5, 38, 68, 0.82) 62%,
            rgba(5, 31, 55, 0.58) 100%
        ),
        url("https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?auto=format&fit=crop&w=2000&q=90")
        center center / cover no-repeat;

    box-shadow:
        0 20px 50px rgba(5, 30, 55, 0.13);
}


/* =========================================================
   IMAGE OVERLAY
   ========================================================= */

.dem-final-cta-inner::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(2, 22, 42, 0.08),
            rgba(2, 22, 42, 0.16)
        );

    pointer-events: none;
}


/* =========================================================
   CONTENT
   ========================================================= */

.dem-cta-content {
    position: relative;
    z-index: 5;

    width: 100%;
    max-width: 980px;

    margin: 0 auto;
    padding: 0 30px;

    text-align: center;
}


/* =========================================================
   LABEL
   ========================================================= */

.dem-cta-label {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 18px;
    margin-bottom: 22px;

    color: #f47b20;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 3.5px;
    line-height: 1;

    text-transform: uppercase;
}

.dem-cta-label span {
    display: block;

    width: 42px;
    height: 2px;

    background: #f47b20;
}


/* =========================================================
   HEADING
   ========================================================= */

.dem-cta-title {
    max-width: 950px;

    margin: 0 auto 20px;

    color: #ffffff;

    font-family: Arial, Helvetica, sans-serif;
    font-size: clamp(40px, 4.5vw, 62px);
    font-weight: 700;
    line-height: 1.08;

    letter-spacing: -2px;
}

.dem-cta-title strong {
    color: #f47b20;
    font-weight: 700;
}


/* =========================================================
   DESCRIPTION
   ========================================================= */

.dem-cta-text {
    max-width: 760px;

    margin: 0 auto;

    color: rgba(255, 255, 255, 0.82);

    font-family: Arial, Helvetica, sans-serif;
    font-size: 17px;
    font-weight: 400;
    line-height: 1.65;
}


/* =========================================================
   BUTTONS
   ========================================================= */

.dem-cta-buttons {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 14px;

    margin-top: 32px;
}

.dem-cta-btn {
    min-width: 245px;
    min-height: 58px;

    display: inline-flex;
    align-items: center;
    justify-content: space-between;

    gap: 25px;

    padding: 0 20px;

    border-radius: 7px;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;

    text-decoration: none;

    transition:
        transform 0.25s ease,
        background-color 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}


/* =========================================================
   PRIMARY BUTTON
   ========================================================= */

.dem-cta-btn-primary {
    color: #ffffff !important;

    background: #f47b20;
    border: 1px solid #f47b20;

    box-shadow:
        0 9px 24px rgba(244, 123, 32, 0.20);
}

.dem-cta-btn-primary:hover {
    color: #ffffff;

    background: #df6913;
    border-color: #df6913;

    transform: translateY(-3px);

    box-shadow:
        0 13px 28px rgba(244, 123, 32, 0.28);
}


/* =========================================================
   SECONDARY BUTTON
   ========================================================= */

.dem-cta-btn-secondary {
    color: #ffffff !important;

    background: rgba(4, 25, 47, 0.30);

    border: 1px solid rgba(255, 255, 255, 0.70);
}

.dem-cta-btn-secondary:hover {
    color: #ffffff;

    background: rgba(255, 255, 255, 0.10);

    border-color: #ffffff;

    transform: translateY(-3px);

    box-shadow:
        0 8px 22px rgba(0, 0, 0, 0.10);
}


/* =========================================================
   ARROW
   ========================================================= */

.dem-cta-arrow {
    font-size: 21px;
    font-weight: 400;
    line-height: 1;

    transition: transform 0.25s ease;
}

.dem-cta-btn:hover .dem-cta-arrow {
    transform: translateX(5px);
}


/* =========================================================
   DECORATIVE CIRCLES
   ========================================================= */

.dem-cta-circle {
    position: absolute;
    z-index: 2;

    width: 380px;
    height: 380px;

    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 50%;

    pointer-events: none;
}

.dem-cta-circle-top {
    top: -255px;
    left: -120px;
}

.dem-cta-circle-bottom {
    right: -180px;
    bottom: -285px;
}


/* =========================================================
   DOT PATTERN
   ========================================================= */

.dem-cta-dots {
    position: absolute;
    z-index: 3;

    left: 42px;
    bottom: 40px;

    display: grid;

    grid-template-columns: repeat(4, 5px);

    gap: 9px;

    opacity: 0.60;
}

.dem-cta-dots span {
    width: 4px;
    height: 4px;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.75);
}


/* =========================================================
   LARGE DESKTOP
   EXACT 1280px
   ========================================================= */

@media (min-width: 1281px) {

    .dem-final-cta-inner {
        width: 1280px;
        max-width: 1280px;
    }

}


/* =========================================================
   LAPTOP
   ========================================================= */

@media (max-width: 1280px) {

    .dem-final-cta-inner {
        width: calc(100% - 60px);
    }

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 991px) {

    .dem-final-cta {
        padding: 35px 0;
    }

    .dem-final-cta-inner {
        width: calc(100% - 40px);
        min-height: 500px;

        border-radius: 16px;
    }

    .dem-cta-content {
        max-width: 850px;
        padding: 0 25px;
    }

    .dem-cta-title {
        font-size: 46px;
        line-height: 1.10;
    }

    .dem-cta-text {
        font-size: 17px;
    }

    .dem-cta-buttons {
        margin-top: 29px;
    }

    .dem-cta-btn {
        min-width: 225px;
    }

    .dem-cta-dots {
        left: 30px;
        bottom: 30px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .dem-final-cta {
        padding: 20px 0;
    }

    .dem-final-cta-inner {
        width: calc(100% - 24px);
        min-height: 500px;

        border-radius: 15px;

        background:
            linear-gradient(
                180deg,
                rgba(4, 27, 50, 0.93) 0%,
                rgba(4, 27, 50, 0.96) 100%
            ),
            url("https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?auto=format&fit=crop&w=1200&q=85")
            center center / cover no-repeat;
    }

    .dem-cta-content {
        width: 100%;
        max-width: 520px;

        padding: 0 18px;
    }

    .dem-cta-label {
        gap: 11px;

        margin-bottom: 18px;

        font-size: 10px;
        letter-spacing: 2.8px;
    }

    .dem-cta-label span {
        width: 27px;
    }

    .dem-cta-title {
        margin-bottom: 17px;

        font-size: 34px;
        line-height: 1.12;

        letter-spacing: -0.8px;
    }

    .dem-cta-text {
        font-size: 15.5px;
        line-height: 1.6;
    }

    .dem-desktop-break {
        display: none;
    }

    .dem-cta-buttons {
        flex-direction: column;

        width: 100%;

        gap: 11px;

        margin-top: 27px;
    }

    .dem-cta-btn {
        width: 100%;

        min-width: 0;
        min-height: 56px;

        padding: 0 18px;

        font-size: 14px;
    }

    .dem-cta-arrow {
        font-size: 21px;
    }

    .dem-cta-circle {
        width: 260px;
        height: 260px;
    }

    .dem-cta-circle-top {
        top: -190px;
        left: -135px;
    }

    .dem-cta-circle-bottom {
        right: -155px;
        bottom: -195px;
    }

    .dem-cta-dots {
        left: 20px;
        bottom: 18px;

        grid-template-columns: repeat(4, 4px);
        gap: 7px;
    }

    .dem-cta-dots span {
        width: 3px;
        height: 3px;
    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 420px) {

    .dem-final-cta {
        padding: 16px 0;
    }

    .dem-final-cta-inner {
        width: calc(100% - 20px);
        min-height: 505px;
    }

    .dem-cta-content {
        padding: 0 15px;
    }

    .dem-cta-title {
        font-size: 30px;
        letter-spacing: -0.6px;
    }

    .dem-cta-text {
        font-size: 14.5px;
    }

    .dem-cta-btn {
        min-height: 54px;
        font-size: 13.5px;
    }

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-9fa2ca7 *//* =========================================================
   DUA ESTATE & MARKETING
   PREMIUM FAQ — RESPONSIVE
   ========================================================= */

.dem-faq {
    --dem-navy: #071D35;
    --dem-blue: #0B5EA8;
    --dem-orange: #F47B20;

    --dem-text: #1C3046;
    --dem-muted: #6F8194;
    --dem-line: #E4E8EC;
    --dem-soft: #F8F9FA;
    --dem-cream: #FCF9F5;

    width: 100%;
    min-width: 0;
    max-width: 100%;

    position: relative;
    overflow: hidden;

    padding: 80px 0;

    background: #F9FAFB;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    box-sizing: border-box;
}

.dem-faq *,
.dem-faq *::before,
.dem-faq *::after {
    box-sizing: border-box;
}


/* =========================================================
   DECORATIVE ELEMENTS
   ========================================================= */

.dem-faq::before {
    content: "";

    position: absolute;

    width: 520px;
    height: 520px;

    border: 1px solid rgba(11, 94, 168, 0.045);

    border-radius: 50%;

    right: -300px;
    top: -300px;

    pointer-events: none;
}

.dem-faq::after {
    content: "";

    position: absolute;

    width: 360px;
    height: 360px;

    border: 1px solid rgba(244, 123, 32, 0.035);

    border-radius: 50%;

    left: -250px;
    bottom: -260px;

    pointer-events: none;
}


/* =========================================================
   MAIN WRAPPER
   ========================================================= */

.dem-faq-container {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 1380px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        minmax(280px, 0.72fr)
        minmax(0, 1.28fr);

    gap: 80px;

    align-items: start;
}


/* =========================================================
   LEFT SIDE
   ========================================================= */

.dem-faq-left {
    padding-top: 8px;

    width: 100%;
    min-width: 0;
}


.dem-faq-eyebrow {
    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 21px;

    color: var(--dem-orange);

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 2.7px;

    text-transform: uppercase;
}


.dem-faq-eyebrow::before {
    content: "";

    width: 31px;
    height: 2px;

    background: var(--dem-orange);

    flex-shrink: 0;
}


.dem-faq-heading {
    margin: 0;

    color: var(--dem-navy);

    font-size: 48px;

    line-height: 1.08;

    font-weight: 600;

    letter-spacing: -1.8px;
}


.dem-faq-intro {
    max-width: 420px;

    margin: 24px 0 0;

    color: var(--dem-muted);

    font-size: 15px;

    line-height: 1.8;
}


/* =========================================================
   LEFT PREMIUM CONTACT PANEL
   ========================================================= */

.dem-faq-contact {
    position: relative;

    width: 100%;
    max-width: 420px;

    margin-top: 48px;

    padding: 28px 30px;

    background: var(--dem-navy);

    border-radius: 10px;

    overflow: hidden;

    box-shadow:
        0 20px 45px rgba(7, 29, 53, 0.10);
}


.dem-faq-contact::after {
    content: "";

    position: absolute;

    width: 150px;
    height: 150px;

    right: -80px;
    bottom: -85px;

    border: 1px solid rgba(244, 123, 32, 0.20);

    border-radius: 50%;
}


.dem-faq-contact-label {
    position: relative;
    z-index: 2;

    margin-bottom: 10px;

    color: var(--dem-orange);

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 1.7px;

    text-transform: uppercase;
}


.dem-faq-contact-title {
    position: relative;
    z-index: 2;

    margin: 0 0 10px;

    color: #FFFFFF;

    font-size: 21px;

    line-height: 1.3;

    font-weight: 600;
}


.dem-faq-contact-text {
    position: relative;
    z-index: 2;

    margin: 0;

    color: rgba(255,255,255,0.70);

    font-size: 13px;

    line-height: 1.75;
}


.dem-faq-contact-line {
    position: relative;
    z-index: 2;

    width: 34px;
    height: 2px;

    margin-top: 20px;

    background: var(--dem-orange);
}


/* =========================================================
   RIGHT FAQ LIST
   ========================================================= */

.dem-faq-list {
    width: 100%;
    min-width: 0;

    display: flex;

    flex-direction: column;

    gap: 12px;
}


/* =========================================================
   FAQ CARD
   ========================================================= */

.dem-faq-item {
    width: 100%;
    min-width: 0;

    background: #FFFFFF;

    border: 1px solid var(--dem-line);

    border-radius: 10px;

    overflow: hidden;

    box-sizing: border-box;

    transition:
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}


.dem-faq-item.active {
    border-color: #D9E1E8;

    box-shadow:
        0 14px 35px rgba(7, 29, 53, 0.065);
}


/* =========================================================
   QUESTION BUTTON
   ========================================================= */

.dem-faq-question {
    width: 100%;

    min-height: 76px;

    padding: 0 22px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    border: 0 !important;

    outline: none !important;

    background: #FFFFFF !important;

    color: var(--dem-navy) !important;

    font-family: inherit;

    font-size: 15px;

    font-weight: 600;

    line-height: 1.45;

    text-align: left;

    cursor: pointer;

    appearance: none;

    -webkit-appearance: none;

    box-shadow: none !important;

    transition:
        color 0.25s ease,
        background 0.25s ease;
}


.dem-faq-question:hover,
.dem-faq-question:focus,
.dem-faq-question:active {
    background: #FFFFFF !important;

    color: var(--dem-navy) !important;

    outline: none !important;

    box-shadow: none !important;
}


/* =========================================================
   QUESTION LEFT
   ========================================================= */

.dem-faq-question-left {
    display: flex;

    align-items: center;

    gap: 17px;

    min-width: 0;

    flex: 1 1 auto;
}


/* =========================================================
   NUMBER
   ========================================================= */

.dem-faq-number {
    width: 35px;
    height: 35px;

    flex: 0 0 35px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: var(--dem-cream);

    color: var(--dem-orange);

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 0.3px;

    transition:
        background 0.3s ease,
        color 0.3s ease;
}


.dem-faq-item.active .dem-faq-number {
    background: var(--dem-orange);

    color: #FFFFFF;
}


/* =========================================================
   ICON
   ========================================================= */

.dem-faq-toggle {
    position: relative;

    width: 34px;
    height: 34px;

    flex: 0 0 34px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid #DCE3E9;

    border-radius: 50%;

    background: #FFFFFF;

    transition:
        border-color 0.3s ease,
        background 0.3s ease;
}


.dem-faq-toggle::before,
.dem-faq-toggle::after {
    content: "";

    position: absolute;

    width: 10px;
    height: 1.5px;

    background: var(--dem-blue);

    left: 50%;
    top: 50%;

    transform:
        translate(-50%, -50%);

    transition:
        transform 0.35s ease,
        background 0.3s ease;
}


.dem-faq-toggle::after {
    transform:
        translate(-50%, -50%)
        rotate(90deg);
}


.dem-faq-item.active .dem-faq-toggle {
    background: var(--dem-navy);

    border-color: var(--dem-navy);
}


.dem-faq-item.active .dem-faq-toggle::before,
.dem-faq-item.active .dem-faq-toggle::after {
    background: #FFFFFF;
}


.dem-faq-item.active .dem-faq-toggle::after {
    transform:
        translate(-50%, -50%)
        rotate(0deg);
}


/* =========================================================
   ANSWER
   ========================================================= */

.dem-faq-answer {
    height: 0;

    overflow: hidden;

    background: #FFFFFF;

    border: 0 !important;

    box-shadow: none !important;

    transition:
        height 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}


.dem-faq-answer-inner {
    padding:
        0
        72px
        25px
        74px;

    background: #FFFFFF;

    border: 0 !important;

    box-shadow: none !important;
}


.dem-faq-answer-text {
    position: relative;

    margin: 0;

    padding-left: 18px;

    color: var(--dem-muted);

    font-size: 14px;

    line-height: 1.8;

    border: 0 !important;
}


.dem-faq-answer-text::before {
    content: "";

    position: absolute;

    left: 0;

    top: 5px;

    width: 2px;

    height: 28px;

    background: var(--dem-orange);

    border-radius: 2px;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {

    .dem-faq {
        padding: 75px 24px;
    }


    .dem-faq-container {
        width: 100%;
        max-width: 900px;

        grid-template-columns: 1fr;

        gap: 50px;
    }


    .dem-faq-left {
        max-width: 760px;
    }


    .dem-faq-intro {
        max-width: 650px;
    }


    .dem-faq-contact {
        max-width: 600px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .dem-faq {
        width: 100%;
        min-width: 0;
        max-width: 100%;

        padding: 55px 15px;

        overflow: hidden;
    }


    /* Decorative elements stay inside mobile visual area */

    .dem-faq::before {
        width: 300px;
        height: 300px;

        right: -190px;
        top: -160px;
    }


    .dem-faq::after {
        width: 240px;
        height: 240px;

        left: -170px;
        bottom: -170px;
    }


    /* Main wrapper */

    .dem-faq-container {
        width: 100%;
        max-width: 100%;

        display: grid;

        grid-template-columns: 1fr;

        gap: 38px;
    }


    /* Left */

    .dem-faq-left {
        width: 100%;
        max-width: 100%;

        padding-top: 0;
    }


    .dem-faq-eyebrow {
        gap: 10px;

        margin-bottom: 17px;

        font-size: 10px;

        letter-spacing: 2.2px;
    }


    .dem-faq-eyebrow::before {
        width: 26px;
    }


    .dem-faq-heading {
        width: 100%;
        max-width: 100%;

        font-size: 34px;

        line-height: 1.1;

        letter-spacing: -1px;

        overflow-wrap: normal;
    }


    .dem-faq-intro {
        width: 100%;
        max-width: 100%;

        margin-top: 18px;

        font-size: 14px;

        line-height: 1.75;
    }


    /* Contact panel */

    .dem-faq-contact {
        width: 100%;
        max-width: 100%;

        margin-top: 30px;

        padding: 24px 22px;

        border-radius: 10px;
    }


    .dem-faq-contact-title {
        font-size: 19px;
    }


    .dem-faq-contact-text {
        font-size: 13px;

        line-height: 1.7;
    }


    /* FAQ list */

    .dem-faq-list {
        width: 100%;
        max-width: 100%;

        gap: 10px;
    }


    /* FAQ card */

    .dem-faq-item {
        width: 100%;
        max-width: 100%;

        border-radius: 10px;
    }


    /* Question */

    .dem-faq-question {
        width: 100%;
        max-width: 100%;

        min-height: 70px;

        padding: 14px 14px;

        gap: 10px;

        font-size: 14px;

        line-height: 1.45;
    }


    .dem-faq-question-left {
        width: auto;
        max-width: 100%;

        flex: 1 1 auto;

        gap: 11px;

        min-width: 0;

        align-items: center;
    }


    /* Question text */

    .dem-faq-question-left > span:last-child {
        min-width: 0;

        max-width: 100%;

        overflow-wrap: anywhere;

        word-break: normal;
    }


    /* Number */

    .dem-faq-number {
        width: 31px;
        height: 31px;

        flex: 0 0 31px;

        font-size: 9px;
    }


    /* Toggle */

    .dem-faq-toggle {
        width: 31px;
        height: 31px;

        flex: 0 0 31px;
    }


    .dem-faq-toggle::before,
    .dem-faq-toggle::after {
        width: 9px;
    }


    /* Answer */

    .dem-faq-answer-inner {
        width: 100%;

        padding:
            0
            18px
            22px
            56px;
    }


    .dem-faq-answer-text {
        width: 100%;
        max-width: 100%;

        padding-left: 16px;

        font-size: 13px;

        line-height: 1.75;

        overflow-wrap: anywhere;
    }


    .dem-faq-answer-text::before {
        top: 5px;

        height: 25px;
    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 390px) {

    .dem-faq {
        padding-left: 13px;
        padding-right: 13px;
    }


    .dem-faq-heading {
        font-size: 30px;
    }


    .dem-faq-question {
        min-height: 68px;

        padding-left: 12px;
        padding-right: 12px;

        font-size: 13px;

        gap: 8px;
    }


    .dem-faq-question-left {
        gap: 9px;
    }


    .dem-faq-number {
        width: 29px;
        height: 29px;

        flex-basis: 29px;
    }


    .dem-faq-toggle {
        width: 29px;
        height: 29px;

        flex-basis: 29px;
    }


    .dem-faq-answer-inner {
        padding-left: 51px;
        padding-right: 15px;
    }


    .dem-faq-answer-text {
        font-size: 13px;
    }

}/* End custom CSS */