body.elementor-page-11326:not(.elementor-motion-effects-element-type-background), body.elementor-page-11326 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#EEF2F7;}:root{--page-title-display:none;}/* Start custom CSS *//* ============================================================
   UrbanCart — Contact Us: Hero Section (style)

   HOW TO INSTALL:
   1. WPCode → Add Snippet → New Snippet → Code Type: CSS Snippet
   2. Paste this whole file's content
   3. Insertion: "Site Wide Header"
   4. Save & activate
============================================================= */

#uc-contact-hero{
  /* ---- Adjust these to restyle independently of other snippets ---- */
  --uc-navy:#0f2340;
  --uc-gold:#e3a83b;
  --uc-bg:#eef2f7;
  /* ------------------------------------------------------------------ */
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  background:var(--uc-bg);
}
#uc-contact-hero *{ box-sizing:border-box; }

#uc-contact-hero .uc-contact-hero-inner{
  max-width:1240px; margin:0 auto;
  display:flex; align-items:center; gap:40px;
  padding:56px 24px;
}

#uc-contact-hero .uc-breadcrumb{
  display:flex; align-items:center; gap:6px;
  font-size:13px; color:#6b7686; margin-bottom:18px;
}
#uc-contact-hero .uc-breadcrumb a{ color:#6b7686; text-decoration:none; }
#uc-contact-hero .uc-breadcrumb a:hover{ color:var(--uc-navy); }
#uc-contact-hero .uc-breadcrumb svg{ color:#c7cdd6; }
#uc-contact-hero .uc-breadcrumb span{ color:var(--uc-navy); font-weight:600; }

#uc-contact-hero h1{
  font-family:'Poppins',-apple-system,BlinkMacSystemFont,sans-serif;
  font-size:42px; font-weight:700; letter-spacing:-.5px;
  color:var(--uc-navy); margin:0 0 14px;
}
#uc-contact-hero .uc-contact-hero-text p{
  font-size:15.5px; line-height:1.6; color:#5b6577; margin:0; max-width:440px;
}

#uc-contact-hero .uc-contact-hero-text{ flex:1 1 480px; }
#uc-contact-hero .uc-contact-hero-media{
  flex:1 1 380px; height:260px; border-radius:16px;
  background-size:cover; background-position:center;
  box-shadow:0 24px 48px -20px rgba(15,35,64,.25);
}

/* ---- Tablet / mobile ----
   FIX: the .uc-contact-hero-inner gap:40px above was carrying over
   into the stacked (column) layout below, creating a huge vertical
   gap between the text block and the image. It's now overridden per
   breakpoint so vertical spacing stays proportional to the smaller
   screen. Side padding is also stepped down so content isn't boxed
   in with the same 24px used on desktop. */
@media (max-width: 900px){
  #uc-contact-hero .uc-contact-hero-inner{
    flex-direction:column; text-align:center;
    padding:36px 16px; gap:24px;
  }
  #uc-contact-hero .uc-breadcrumb{ justify-content:center; }
  #uc-contact-hero .uc-contact-hero-text p{ margin:0 auto; }
  /* THE REAL BUG: flex:1 1 480px / flex:1 1 380px (set above, in the
     desktop rules) sets flex-basis. In row direction flex-basis sets
     WIDTH, but once we switch to flex-direction:column here, that same
     flex-basis sets HEIGHT instead — forcing the text block to ~480px
     tall regardless of its actual content. That's the giant empty gap.
     Resetting flex-basis to auto on both children fixes it. */
  #uc-contact-hero .uc-contact-hero-text{ flex:0 1 auto; width:100%; }
  #uc-contact-hero .uc-contact-hero-media{ flex:0 1 auto; width:100%; height:220px; }
  #uc-contact-hero h1{ font-size:32px; }
}
@media (max-width: 480px){
  #uc-contact-hero .uc-contact-hero-inner{ padding:28px 14px; gap:16px; }
  #uc-contact-hero h1{ font-size:26px; margin:0 0 10px; }
  #uc-contact-hero .uc-contact-hero-text p{ font-size:14.5px; max-width:100%; }
  #uc-contact-hero .uc-contact-hero-media{ flex:0 1 auto; width:100%; height:180px; border-radius:12px; }
}


/*FOrm*/

/* ============================================================
   UrbanCart — Contact Us: Form + Contact Info (style)

   HOW TO INSTALL:
   1. WPCode → Add Snippet → New Snippet → Code Type: CSS Snippet
   2. Paste this whole file's content
   3. Insertion: "Site Wide Header"
   4. Save & activate
============================================================= */

#uc-contact-section{
  /* ---- Adjust these to restyle independently of other snippets ---- */
  --uc-navy:#0f2340;
  --uc-blue:#2563eb;
  --uc-border:#e6e9ee;
  --uc-bg:#eef2f7;
  /* ------------------------------------------------------------------ */
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  background:var(--uc-bg);
  padding:0 24px 56px;
}
#uc-contact-section *{ box-sizing:border-box; }
#uc-contact-section .uc-contact-inner{ max-width:1240px; margin:0 auto; overflow-x:hidden; }

#uc-contact-section .uc-contact-notice{
  padding:14px 18px; border-radius:8px; font-size:14px; font-weight:500;
  margin-bottom:20px;
}
#uc-contact-section .uc-contact-notice--success{ background:#e8f7ee; color:#1f9e4a; border:1px solid #c8e6d3; }
#uc-contact-section .uc-contact-notice--error{ background:#fdecec; color:#c0392b; border:1px solid #f3c9c5; }

#uc-contact-section .uc-contact-grid{
  background:#fff; border-radius:16px;
  box-shadow:0 24px 48px -28px rgba(15,35,64,.25);
  display:grid; grid-template-columns:1.1fr 1fr; gap:0;
  overflow:hidden;
}
#uc-contact-section .uc-contact-form-col{ padding:40px; border-right:1px solid var(--uc-border); }
#uc-contact-section .uc-contact-info-col{ padding:40px; }

#uc-contact-section h2{
  display:flex; align-items:center; gap:9px;
  font-family:'Poppins',-apple-system,BlinkMacSystemFont,sans-serif;
  font-size:19px; font-weight:700; color:var(--uc-navy); margin:0 0 6px;
}
#uc-contact-section h2 svg{ color:var(--uc-blue); }
#uc-contact-section .uc-contact-sub{ font-size:13.5px; color:#6b7686; margin:0 0 24px; }

/* ---- Form fields ---- */
#uc-contact-section .uc-contact-form{ display:flex; flex-direction:column; gap:16px; }
#uc-contact-section .uc-contact-form label{
  display:flex; flex-direction:column; gap:6px;
  font-size:13px; font-weight:600; color:#2c3648;
}
#uc-contact-section .uc-contact-form input,
#uc-contact-section .uc-contact-form select,
#uc-contact-section .uc-contact-form textarea{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  font-size:14px; font-weight:400; color:#1a2438;
  border:1.5px solid var(--uc-border); border-radius:8px;
  padding:11px 14px; outline:none; width:100%;
  transition:border-color .2s ease;
}
#uc-contact-section .uc-contact-form input:focus,
#uc-contact-section .uc-contact-form select:focus,
#uc-contact-section .uc-contact-form textarea:focus{ border-color:var(--uc-blue); }
#uc-contact-section .uc-contact-form textarea{ resize:vertical; }
#uc-contact-section .uc-honeypot{ position:absolute !important; left:-9999px !important; width:1px; height:1px; opacity:0; }

#uc-contact-section .uc-contact-submit{
  display:flex; align-items:center; justify-content:center; gap:9px;
  background:var(--uc-blue); color:#fff; border:none; cursor:pointer;
  font-size:14.5px; font-weight:600;
  padding:13px 20px; border-radius:8px;
  transition:background .2s ease;
}
#uc-contact-section .uc-contact-submit:hover{ background:#1d4fc4; }

#uc-contact-section .uc-contact-note{
  display:flex; align-items:center; gap:6px;
  font-size:11.5px; color:#8892a3;
}

/* ---- Contact method rows ---- */
#uc-contact-section .uc-contact-methods{
  display:flex; flex-direction:column; gap:10px; margin-bottom:28px;
}
#uc-contact-section .uc-contact-method{
  display:flex; align-items:center; gap:14px;
  border:1px solid var(--uc-border); border-radius:10px;
  padding:14px 16px;
}
#uc-contact-section .uc-cm-icon{
  flex:0 0 auto; width:38px; height:38px; border-radius:9px;
  display:flex; align-items:center; justify-content:center;
}
#uc-contact-section .uc-cm-whatsapp{ background:#e8f7ee; color:#1f9e4a; }
#uc-contact-section .uc-cm-email,
#uc-contact-section .uc-cm-clock,
#uc-contact-section .uc-cm-pin{ background:#eaf1ff; color:var(--uc-blue); }

#uc-contact-section .uc-cm-body{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px; }
#uc-contact-section .uc-cm-body strong{ font-size:13.5px; font-weight:600; color:var(--uc-navy); }
#uc-contact-section .uc-cm-body span{ font-size:12px; color:#6b7686; line-height:1.4; }

#uc-contact-section .uc-cm-tag{
  flex:0 0 auto; font-size:11px; font-weight:600; text-decoration:none;
  padding:5px 11px; border-radius:999px; white-space:nowrap;
}
#uc-contact-section .uc-cm-tag--green{ color:#1f9e4a; background:#e8f7ee; border:1px solid #c8e6d3; }
#uc-contact-section .uc-cm-tag--blue{ color:var(--uc-blue); background:#eaf1ff; border:1px solid #cfe0ff; }

/* ---- Find Us map card ---- */
#uc-contact-section .uc-find-us h3{
  font-family:'Poppins',-apple-system,BlinkMacSystemFont,sans-serif;
  font-size:15px; font-weight:700; color:var(--uc-navy); margin:0 0 4px;
}
#uc-contact-section .uc-find-us > p{ font-size:12.5px; color:#6b7686; margin:0 0 12px; }

#uc-contact-section .uc-find-us-media{
  position:relative; display:block; height:170px; border-radius:12px;
  background:#e3e7ee
    linear-gradient(135deg, transparent 40%, rgba(37,99,235,.06) 40% 60%, transparent 60%);
  text-decoration:none; overflow:hidden;
}
#uc-contact-section .uc-find-us-pin{
  position:absolute; top:50%; left:32%; transform:translate(-50%,-50%);
  width:36px; height:36px; border-radius:50% 50% 50% 0;
  background:var(--uc-blue); display:flex; align-items:center; justify-content:center;
  transform-origin:bottom center;
  transform:translate(-50%,-100%) rotate(-45deg);
}
#uc-contact-section .uc-find-us-pin svg{ transform:rotate(45deg); }
#uc-contact-section .uc-find-us-card{
  position:absolute; bottom:12px; left:12px; right:12px;
  background:#fff; border-radius:8px; padding:12px 14px;
  box-shadow:0 10px 24px -10px rgba(15,35,64,.3);
  display:flex; flex-direction:column; gap:2px;
}
#uc-contact-section .uc-find-us-card strong{ font-size:13px; font-weight:700; color:var(--uc-navy); }
#uc-contact-section .uc-find-us-card span{ font-size:11.5px; color:#6b7686; line-height:1.4; }
#uc-contact-section .uc-find-us-card em{ font-style:normal; font-size:11.5px; font-weight:600; color:var(--uc-blue); margin-top:4px; }

/* ---- Tablet / mobile ----
   FIX: side padding on the outer section (0 24px 56px) and the
   40px inner padding on each column both stayed fixed regardless
   of viewport, which is what made things feel "boxed" on phones —
   too much dead space on the sides relative to how narrow the
   screen already is. Stepped down at both breakpoints below. */
@media (max-width: 900px){
  #uc-contact-section{ padding:0 16px 40px; }
  /* THE OVERFLOW BUG: "1fr" alone has an implicit min-width of "auto",
     which means the track refuses to shrink below the min-content size
     of what's inside it. The nowrap tags below (.uc-cm-tag, e.g. "We
     reply within 24 hours") have a wide min-content width, so the
     column — and everything inside it, including unrelated inputs —
     gets forced wider than the phone screen. Your theme clips instead
     of scrolling, so it just looks cut off. minmax(0,1fr) removes that
     implicit floor and lets the column actually shrink to the screen. */
  #uc-contact-section .uc-contact-grid{ grid-template-columns:minmax(0,1fr); border-radius:12px; }
  #uc-contact-section .uc-contact-form-col{ border-right:none; border-bottom:1px solid var(--uc-border); min-width:0; }
  #uc-contact-section .uc-contact-info-col{ min-width:0; }
  #uc-contact-section .uc-contact-form-col,
  #uc-contact-section .uc-contact-info-col{ padding:28px 24px; }
  /* Let the icon/body/tag row wrap so the tag drops to its own line
     instead of forcing the row wider than the screen. */
  #uc-contact-section .uc-contact-method{ flex-wrap:wrap; row-gap:8px; }
  #uc-contact-section .uc-cm-tag{ margin-left:52px; }
}
@media (max-width: 480px){
  #uc-contact-section{ padding:0 12px 32px; }
  #uc-contact-section .uc-contact-form-col,
  #uc-contact-section .uc-contact-info-col{ padding:22px 16px; }
  #uc-contact-section h2{ font-size:17px; }
}



/*CONTACT EXTRAS*/

/* ============================================================
   UrbanCart — Contact Us: Business Inquiries + Trust Columns (style)

   HOW TO INSTALL:
   1. WPCode → Add Snippet → New Snippet → Code Type: CSS Snippet
   2. Paste this whole file's content
   3. Insertion: "Site Wide Header"
   4. Save & activate
============================================================= */

#uc-contact-extras{
  /* ---- Adjust these to restyle independently of other snippets ---- */
  --uc-navy:#0f2340;
  --uc-blue:#2563eb;
  --uc-border:#e6e9ee;
  /* ------------------------------------------------------------------ */
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  background:#eef2f7;
  padding:0 24px 40px;
}
#uc-contact-extras *{ box-sizing:border-box; }
#uc-contact-extras .uc-extras-inner{ max-width:1240px; margin:0 auto; }

/* ---- Business Inquiries banner ---- */
#uc-contact-extras .uc-biz-banner{
  display:flex; align-items:center; gap:16px;
  background:#fff; border:1px solid var(--uc-border); border-radius:12px;
  padding:20px 24px; margin-bottom:16px;
}
#uc-contact-extras .uc-biz-icon{
  flex:0 0 auto; width:42px; height:42px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  background:#eaf1ff; color:var(--uc-blue);
}
#uc-contact-extras .uc-biz-text{ flex:1 1 auto; min-width:0; }
#uc-contact-extras .uc-biz-text strong{ display:block; font-size:14.5px; font-weight:700; color:var(--uc-navy); margin-bottom:3px; }
#uc-contact-extras .uc-biz-text p{ font-size:12.5px; color:#6b7686; margin:0; line-height:1.5; }
#uc-contact-extras .uc-biz-btn{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:8px;
  border:1.5px solid var(--uc-border); border-radius:8px;
  padding:11px 16px; font-size:13px; font-weight:600; color:var(--uc-blue);
  text-decoration:none; white-space:nowrap;
  transition:background .2s ease;
}
#uc-contact-extras .uc-biz-btn:hover{ background:#f5f8ff; }

/* ---- Trust row ---- */
#uc-contact-extras .uc-trust-row{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:16px;
  background:#fff; border:1px solid var(--uc-border); border-radius:12px;
  padding:22px 24px;
}
#uc-contact-extras .uc-trust-item{ display:flex; align-items:flex-start; gap:12px; }
#uc-contact-extras .uc-ti-icon{
  flex:0 0 auto; width:38px; height:38px; border-radius:9px;
  display:flex; align-items:center; justify-content:center;
  background:#eaf1ff; color:var(--uc-blue);
}
#uc-contact-extras .uc-trust-item strong{ display:block; font-size:13.5px; font-weight:600; color:var(--uc-navy); margin-bottom:3px; }
#uc-contact-extras .uc-trust-item p{ font-size:12px; color:#6b7686; margin:0; line-height:1.5; }

/* ---- Tablet / mobile ----
   FIX: same padding issue as the sections above — 0 24px 40px on
   the outer wrapper plus 20-22px inner padding on the banner/row
   didn't shrink for small screens. Also confirmed the banner and
   trust row wrap to a stacked layout cleanly below 760px. */
@media (max-width: 760px){
  #uc-contact-extras{ padding:0 16px 32px; }
  #uc-contact-extras .uc-biz-banner{
    flex-direction:column; align-items:flex-start; text-align:left;
    padding:18px 18px; gap:12px;
  }
  #uc-contact-extras .uc-biz-btn{ width:100%; justify-content:center; }
  #uc-contact-extras .uc-trust-row{ grid-template-columns:1fr; padding:18px 18px; gap:18px; }
}
@media (max-width: 480px){
  #uc-contact-extras{ padding:0 12px 28px; }
  #uc-contact-extras .uc-biz-banner,
  #uc-contact-extras .uc-trust-row{ padding:16px; }
}/* End custom CSS */