.elementor-7 .elementor-element.elementor-element-4668166{--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;}@media(max-width:767px){.elementor-7 .elementor-element.elementor-element-ada88a7{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 6px) -20px;}}/* Start custom CSS for html, class: .elementor-element-ada88a7 *//* ======================================================
   DEVVRAT REALTORS - 7D PREMIUM COMING SOON (LIGHT LUXURY)
   7D Depth Layers • Premium Glass • Animated Border
   NOT WHITE • Responsive • High-end Feel
   ====================================================== */

:root{
  /* Light premium background (not white) */
  --bg1:#eef4ff;   /* soft blue */
  --bg2:#f0fff7;   /* soft mint */
  --bg3:#fff1f6;   /* soft rose */
  --bg4:#f6f2ff;   /* soft lavender */

  /* Card */
  --card: rgba(255,255,255,0.58);
  --card2: rgba(255,255,255,0.38);
  --stroke: rgba(15,23,42,0.10);

  /* Text */
  --text: rgba(15,23,42,0.92);
  --muted: rgba(15,23,42,0.64);

  /* Accents */
  --a1:#2563eb; /* blue */
  --a2:#7c3aed; /* purple */
  --a3:#16a34a; /* green */
  --a4:#f97316; /* orange */

  /* Shadow */
  --shadow1: 0 22px 70px rgba(15,23,42,0.14);
  --shadow2: 0 55px 150px rgba(15,23,42,0.10);
}

*{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;}

body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  overflow:hidden;

  background:
    radial-gradient(1000px 700px at 12% 15%, rgba(37,99,235,0.18), transparent 62%),
    radial-gradient(900px 650px at 88% 25%, rgba(124,58,237,0.16), transparent 62%),
    radial-gradient(900px 650px at 55% 95%, rgba(22,163,74,0.14), transparent 62%),
    radial-gradient(1000px 700px at 40% 70%, rgba(249,115,22,0.10), transparent 62%),
    linear-gradient(135deg, var(--bg1), var(--bg2), var(--bg3), var(--bg4));
}

/* ======================
   Background System (7D)
   ====================== */
.bg{
  position:fixed;
  inset:0;
  z-index:-5;
}

/* 7D soft aurora layer */
.bg::before{
  content:"";
  position:absolute;
  inset:-35%;
  background:
    radial-gradient(circle at 25% 25%, rgba(37,99,235,0.22), transparent 58%),
    radial-gradient(circle at 75% 35%, rgba(124,58,237,0.18), transparent 58%),
    radial-gradient(circle at 45% 85%, rgba(22,163,74,0.14), transparent 58%),
    radial-gradient(circle at 60% 60%, rgba(249,115,22,0.12), transparent 58%);
  filter: blur(55px);
  opacity:0.85;
  animation: auroraMove 10s ease-in-out infinite;
}

@keyframes auroraMove{
  0%,100%{ transform: translate3d(0,0,0) scale(1); }
  50%{ transform: translate3d(26px,-18px,0) scale(1.05); }
}

/* 3D grid floor */
.grid{
  position:absolute;
  inset:-55%;
  background:
    linear-gradient(to right, rgba(15,23,42,0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15,23,42,0.06) 1px, transparent 1px);
  background-size: 100px 100px;
  transform: perspective(1100px) rotateX(68deg) translateY(240px);
  opacity:0.10;
  animation: gridFlow 9s linear infinite;
}

@keyframes gridFlow{
  0%{ background-position: 0 0; }
  100%{ background-position: -100px -100px; }
}

/* Floating Orbs */
.orbs .orb{
  position:absolute;
  border-radius:999px;
  filter: blur(48px);
  opacity:0.75;
  animation: orbFloat 8s ease-in-out infinite;
}

.orb.o1{
  width:420px;height:420px;
  left:-140px; top:10%;
  background: radial-gradient(circle at 30% 30%, rgba(37,99,235,0.36), transparent 72%);
}
.orb.o2{
  width:560px;height:560px;
  right:-190px; top:18%;
  background: radial-gradient(circle at 30% 30%, rgba(124,58,237,0.30), transparent 72%);
  animation-delay:-2s;
}
.orb.o3{
  width:420px;height:420px;
  left:26%; bottom:-200px;
  background: radial-gradient(circle at 30% 30%, rgba(22,163,74,0.22), transparent 72%);
  animation-delay:-4s;
}

@keyframes orbFloat{
  0%,100%{ transform: translateY(0px) translateX(0px) scale(1); }
  50%{ transform: translateY(-26px) translateX(16px) scale(1.05); }
}

/* premium dust particles */
.stars{
  position:absolute;
  inset:0;
  background-image:
    radial-gradient(1px 1px at 10% 25%, rgba(15,23,42,0.22) 50%, transparent 55%),
    radial-gradient(1px 1px at 22% 70%, rgba(15,23,42,0.18) 50%, transparent 55%),
    radial-gradient(2px 2px at 40% 45%, rgba(15,23,42,0.16) 50%, transparent 55%),
    radial-gradient(1px 1px at 65% 20%, rgba(15,23,42,0.18) 50%, transparent 55%),
    radial-gradient(1px 1px at 82% 68%, rgba(15,23,42,0.16) 50%, transparent 55%),
    radial-gradient(1px 1px at 90% 35%, rgba(15,23,42,0.16) 50%, transparent 55%);
  opacity:0.18;
  animation: dust 7s ease-in-out infinite;
}

@keyframes dust{
  0%,100%{ opacity:0.14; }
  50%{ opacity:0.22; }
}

/* ======================
   Layout
   ====================== */
.wrap{
  height:100%;
  display:grid;
  place-items:center;
  padding:22px;
  position:relative;
  z-index:2;
}

/* ======================
   7D CARD (multi-depth)
   ====================== */
.card{
  width:min(1080px, 94vw);
  padding:48px 44px;
  border-radius:34px;
  position:relative;

  background: linear-gradient(180deg, var(--card), var(--card2));
  border:1px solid rgba(15,23,42,0.10);
  box-shadow: var(--shadow1), var(--shadow2);

  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  transform-style: preserve-3d;
  overflow:hidden;

  animation: floatCard 6.8s ease-in-out infinite;
}

@keyframes floatCard{
  0%,100%{ transform: translateY(0px); }
  50%{ transform: translateY(-12px); }
}

/* 7D: animated gradient edge */
.card::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:36px;
  background: conic-gradient(
    from 0deg,
    rgba(37,99,235,0.0),
    rgba(37,99,235,0.25),
    rgba(124,58,237,0.22),
    rgba(22,163,74,0.18),
    rgba(249,115,22,0.16),
    rgba(37,99,235,0.25),
    rgba(37,99,235,0.0)
  );
  filter: blur(18px);
  opacity:0.95;
  z-index:-1;
  animation: spinEdge 6s linear infinite;
}

@keyframes spinEdge{
  0%{ transform: rotate(0deg); }
  100%{ transform: rotate(360deg); }
}

/* 7D: top light reflection */
.card::after{
  content:"";
  position:absolute;
  top:-55%;
  left:-15%;
  width:130%;
  height:80%;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.55), transparent 70%);
  opacity:0.20;
  transform: rotate(-8deg);
  pointer-events:none;
}

/* 7D: inner glow lines */
.card .divider{
  height:1px;
  width:100%;
  margin:24px 0;
  background: linear-gradient(90deg, transparent, rgba(15,23,42,0.18), transparent);
}

/* ======================
   Text & UI
   ====================== */
.badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-radius:999px;
  background: rgba(15,23,42,0.04);
  border:1px solid rgba(15,23,42,0.08);
  color: rgba(15,23,42,0.62);
  font-size:14px;
  letter-spacing:0.35px;
  margin-bottom:18px;
}

.badge .dot{
  width:10px;height:10px;
  border-radius:999px;
  background: var(--a3);
  box-shadow: 0 0 16px rgba(22,163,74,0.25);
  animation: pulse 1.2s ease-in-out infinite;
}

@keyframes pulse{
  0%,100%{ transform: scale(1); opacity:0.85; }
  50%{ transform: scale(1.25); opacity:1; }
}

.title{
  font-size: clamp(36px, 5.2vw, 66px);
  line-height:1.04;
  letter-spacing:-1px;
  margin-bottom:12px;
  text-shadow: 0 12px 40px rgba(15,23,42,0.10);
}

.brand{
  background: linear-gradient(90deg, var(--a1), var(--a2), var(--a3));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.subtitle{
  max-width: 900px;
  color: var(--muted);
  font-size: clamp(14px, 2vw, 18px);
  line-height:1.7;
}

.subtitle b{
  color: rgba(15,23,42,0.92);
}

/* ======================
   Info grid (7D depth)
   ====================== */
.info-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:14px;
  margin-bottom:22px;
}

.info-box{
  padding:18px 18px;
  border-radius:22px;
  background: rgba(255,255,255,0.62);
  border:1px solid rgba(15,23,42,0.08);

  box-shadow:
    0 18px 40px rgba(15,23,42,0.08),
    inset 0 1px 0 rgba(255,255,255,0.60);

  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.info-box:hover{
  transform: translateY(-4px);
  box-shadow:
    0 28px 70px rgba(15,23,42,0.12),
    inset 0 1px 0 rgba(255,255,255,0.65);
}

.info-box h3{
  font-size:15px;
  margin-bottom:6px;
  color: rgba(15,23,42,0.92);
}

.info-box p{
  font-size:14px;
  color: rgba(15,23,42,0.64);
}

/* ======================
   Buttons (premium)
   ====================== */
.cta{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:6px;
}

.btn{
  text-decoration:none;
  padding:13px 20px;
  border-radius:18px;
  font-weight:800;
  font-size:15px;
  letter-spacing:0.2px;
  border:1px solid rgba(15,23,42,0.10);

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

  min-width:170px;
  position:relative;
  overflow:hidden;

  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* shine */
.btn::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.70), transparent);
  transform: translateX(-120%);
  transition: transform 0.7s ease;
}

.btn:hover::before{
  transform: translateX(120%);
}

.btn.primary{
  background: linear-gradient(90deg, rgba(37,99,235,0.18), rgba(124,58,237,0.16));
  box-shadow: 0 18px 60px rgba(37,99,235,0.12);
}

.btn.primary:hover{
  transform: translateY(-2px);
  box-shadow: 0 28px 95px rgba(124,58,237,0.16);
}

.btn.ghost{
  background: rgba(255,255,255,0.55);
  box-shadow: 0 16px 50px rgba(15,23,42,0.08);
}

.btn.ghost:hover{
  transform: translateY(-2px);
  box-shadow: 0 26px 90px rgba(22,163,74,0.12);
}

.footer-text{
  margin-top:18px;
  font-size:13px;
  color: rgba(15,23,42,0.55);
}

/* ======================
   7D Floating Layers
   ====================== */
.layers{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:-1;
}

.layer{
  position:absolute;
  border-radius:50px;
  border:1px solid rgba(15,23,42,0.06);
  background: rgba(255,255,255,0.35);

  box-shadow:
    0 30px 80px rgba(15,23,42,0.10),
    inset 0 1px 0 rgba(255,255,255,0.55);

  animation: layerFloat 7.5s ease-in-out infinite;
}

.layer.l1{
  width:280px;height:280px;
  left:6%;
  top:14%;
  transform: rotate(16deg);
}

.layer.l2{
  width:340px;height:340px;
  right:8%;
  top:50%;
  transform: rotate(-14deg);
  animation-delay:-2.2s;
}

.layer.l3{
  width:260px;height:260px;
  left:42%;
  bottom:10%;
  transform: rotate(8deg);
  animation-delay:-4.4s;
}

@keyframes layerFloat{
  0%,100%{ transform: translateY(0px) translateX(0px); }
  50%{ transform: translateY(-20px) translateX(14px); }
}

/* ======================
   Responsive
   ====================== */
@media (max-width: 860px){
  body{ overflow:auto; }
  .card{ padding:28px 20px; border-radius:26px; }
  .info-grid{ grid-template-columns:1fr; }
  .btn{ width:100%; min-width:100%; }
}/* End custom CSS */