.elementor-6238 .elementor-element.elementor-element-d5fdcc6{--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;}.elementor-6238 .elementor-element.elementor-element-858f956{padding:0px 0px 0px 0px;}/* Start custom CSS for container, class: .elementor-element-d5fdcc6 *//* ---------- Elegant hero + floating card: Dribbble style ---------- */
/* desktop layout: floating card vertically centered on hero */
.elegant-contact { max-width: 1200px; margin: 40px auto; padding: 0 18px; box-sizing: border-box; }
.elegant-contact .columns { display: grid; grid-template-columns: 1fr 420px; gap: 28px; align-items: stretch; }

/* HERO (left) */
.elegant-hero {
  position: relative;
  min-height: 560px;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  align-items: center;
  color: #fff;
  background-size: cover;
  background-position: center center;
}

/* stronger dark overlay so white text reads well */
.elegant-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6,8,12,0.55), rgba(6,8,12,0.55));
  pointer-events: none;
}

/* left hero inner copy */
.elegant-hero .hero-inner {
  position: relative;
  z-index: 2;
  padding: 64px 56px;
  box-sizing: border-box;
  max-width: 680px;
}
.elegant-hero h1 {
  margin: 0 0 12px;
  font-size: 56px;
  line-height: 1.02;
  font-weight: 800;
  letter-spacing: -0.6px;
  color: rgba(255,255,255,0.95);
}
.elegant-hero p.lead {
  margin: 0 0 18px;
  color: rgba(255,255,255,0.9);
  max-width: 520px;
  font-size: 1rem;
}

/* contact-card: make it float inside the hero area (right) */
.contact-card {
  position: relative; /* default for mobile */
  margin-top: 0;
  background: #fff;
  border-radius: 16px;
  padding: 22px;
  box-shadow: 0 30px 60px rgba(15,15,40,0.08);
  border: 1px solid rgba(20,20,40,0.04);
  z-index: 6;
}

/* when desktop - position the card absolute inside the section for floating effect */
@media(min-width: 981px){
  .elegant-contact { padding-left: 18px; padding-right: 18px; }
  .elegant-contact .columns { grid-template-columns: 1fr 420px; }
  /* make the right column act as container for absolute card */
  .elegant-contact > .columns > .contact-card {
    /* keep normal if user placed the HTML inside column; if not, fallback below */
  }

  /* absolute float: positioned relative to hero */
  .elegant-hero + .contact-card,
  .elegant-contact .contact-card {
    position: absolute;
    right: 36px;              /* distance from the hero's right edge */
    top: 50%;
    transform: translateY(-50%);
    width: 380px;             /* narrower card like reference */
    margin: 0;
  }

  /* ensure hero and container produce correct stacking/context */
  .elegant-contact { position: relative; }
  .elegant-hero { border-radius: 16px; }
}

/* small screens: stack */
@media(max-width: 980px){
  .elegant-contact .columns { display:block; }
  .elegant-hero { min-height:420px; border-radius:12px; }
  .elegant-hero .hero-inner { padding:28px; }
  .contact-card { position: relative; margin-top: 18px; width: auto; transform:none; right:auto; left:auto; }
  .elegant-hero h1 { font-size:34px; }
  .elegant-hero p.lead { font-size:0.98rem; }
}/* End custom CSS */