/* Unitz Dezignz sitewide polish. Loaded LAST on every page (after all theme,
   Elementor, and RevSlider stylesheets) and uses high-specificity selectors with
   !important so the theme cannot override it. No em dashes. */
:root{ --udz-accent:#2b2b2b; --udz-muted:#919191; --udz-gold:#B8946A; }
/* Mobile hero hidden by default (desktop). Shown via media query on phone. */
.udz-mobile-hero { display: none; }

/* Self-hosted Questrial (the site heading font) so headings render correctly even
   if Google Fonts is blocked or offline. This loads last, so it is the resolved
   source for the "Questrial" family; the Google Fonts link remains as a backup. */
@font-face{
  font-family:'Questrial';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('/wp-content/uploads/fonts/questrial-v18-latin-regular.woff2') format('woff2');
}

/* Hide the broken THE STUDIO dropdown glyph (missing icon font). */
.elementskit-navbar-nav .elementskit-submenu-indicator,
.elementskit-navbar-nav a > i.icon-down-arrow1{ display:none !important; }

/* Nav hover and active underline (animated, accent), stays under current page. */
.elementskit-navbar-nav > li > a{
  background-image:linear-gradient(var(--udz-accent),var(--udz-accent)) !important;
  background-repeat:no-repeat !important;
  background-position:0 100% !important;
  background-size:0% 2px !important;
  transition:background-size .3s ease, color .25s ease !important;
}
.elementskit-navbar-nav > li > a:hover,
.elementskit-navbar-nav > li > a:focus,
.elementskit-navbar-nav > li.udz-active > a,
.elementskit-navbar-nav > li.current-menu-item > a,
.elementskit-navbar-nav > li.current-menu-ancestor > a{ background-size:100% 2px !important; }
.elementskit-navbar-nav > li > a:hover{ color:var(--udz-accent) !important; }

/* Remove the oversized PROJECTS background-text watermark (also cleared at source). */
.elementor-element-b784dca .qodef-background-text-section,
.elementor-element-b784dca .qodef-m-background-text{ display:none !important; }

/* Readable body paragraphs sitewide. */
.elementor-widget-text-editor p,
.udz-post-body p,
.udz-post-body h6,
.udz-about p{
  line-height:1.75 !important;
  margin-top:0 !important;
  margin-bottom:1.15em !important;
  max-width:760px !important;
  font-size:16px !important;
  font-weight:400 !important;
  color:#4a4a4a !important;
}
.elementor-widget-text-editor.elementor-align-center p,
.qodef-alignment--center .elementor-widget-text-editor p{ margin-left:auto !important; margin-right:auto !important; }
.qodef-m-text{ line-height:1.75 !important; }
.qodef-m-text p{ line-height:1.75 !important; margin-bottom:1.1em !important; }

/* Homepage hero heading: a refined, confident hero statement. Moderately sized
   (down from before) with an elegant semibold weight and tight line-height. The
   paragraph layer below was nudged down via its RevSlider data-xy y-offset to add
   a comfortable gap, and the label layer above keeps its separation. */
#slider-4-slide-7-layer-1 .qodef-m-title,
#slider-4-slide-7-layer-1.qodef-m-title{
  font-size:24px !important;
  font-weight:600 !important;
  line-height:1.35 !important;
  letter-spacing:0.02em !important;
  max-width:460px !important;
  text-wrap:balance !important;
}
#slider-4-slide-7-layer-5 .qodef-m-title,
#slider-4-slide-7-layer-5.qodef-m-title{
  letter-spacing:2.4px !important;
  font-weight:600 !important;
}

/* ITEM 1. Footer: compact, balanced, vertically aligned, logo left at a proper
   size, contact in the middle, nav on the right, copyright centered. */
.ekit-template-content-footer .elementor-element-253e1f19{ padding-top:50px !important; padding-bottom:30px !important; }
.ekit-template-content-footer .elementor-element-253e1f19 > .elementor-container{ align-items:flex-start !important; }
.ekit-template-content-footer .elementor-element-253e1f19 > .elementor-container > .elementor-column > .elementor-element-populated{ padding-top:0 !important; }
.ekit-template-content-footer .elementor-element-253e1f19 > .elementor-container > .elementor-column{ width:33.3333% !important; }
.ekit-template-content-footer .elementor-element-253e1f19 .elementor-element-populated{ padding:6px 22px !important; }
/* Footer logo: a neat stacked unit, UD monogram over the wordmark, centered. */
.ekit-template-content-footer .elementor-widget-image{ text-align:center !important; }
.ekit-template-content-footer .udz-foot-logo{ display:flex !important; flex-direction:column !important; align-items:center !important; gap:14px !important; text-align:center !important; }
.ekit-template-content-footer .udz-foot-logo img{ height:auto !important; display:block !important; margin:0 auto !important; opacity:1 !important; filter:none !important; }
.ekit-template-content-footer .udz-foot-monogram{ width:100px !important; max-width:100px !important; }
.ekit-template-content-footer .udz-foot-wordmark{ width:210px !important; max-width:210px !important; }
/* The logo widget had a decorative transform (translateX -100px, translateY 50px)
   that dropped it below the other columns. Neutralise it so it sits at the top. */
.ekit-template-content-footer .elementor-element-1c13e59,
.ekit-template-content-footer .elementor-element-1c13e59 > .elementor-widget-container{
  transform:none !important;
  --e-transform-translateX:0 !important;
  --e-transform-translateY:0 !important;
  margin:0 0 14px 0 !important;
}
.ekit-template-content-footer .udz-foot-contact p{ margin:0 0 8px !important; line-height:1.7 !important; font-size:15px !important; color:#3a3a3a !important; }
.ekit-template-content-footer .udz-foot-contact a{ color:#3a3a3a !important; }
.ekit-template-content-footer .udz-foot-contact strong{ color:#2b2b2b !important; }
/* Phone numbers stacked on their own lines under the Phone: label. */
.ekit-template-content-footer .udz-foot-phones a{ display:inline-block !important; margin-top:5px !important; }
.ekit-template-content-footer .elementor-element-11a03f10 p{ margin:0 0 8px !important; line-height:1.9 !important; }
/* Footer nav links: gold hover, left to right underline slide, slight nudge. */
.ekit-template-content-footer .elementor-element-11a03f10 a{
  position:relative !important; display:inline-block !important; text-decoration:none !important; color:#3a3a3a !important;
  background-image:linear-gradient(var(--udz-gold), var(--udz-gold)) !important;
  background-repeat:no-repeat !important; background-position:0 100% !important; background-size:0% 2px !important;
  transition:background-size .3s ease, color .3s ease, transform .3s ease !important;
}
.ekit-template-content-footer .elementor-element-11a03f10 a:hover,
.ekit-template-content-footer .elementor-element-11a03f10 a:focus{
  color:var(--udz-gold) !important; background-size:100% 2px !important; transform:translateX(4px) !important;
}
.ekit-template-content-footer .elementor-element-4bda64ea{ padding-top:14px !important; padding-bottom:14px !important; margin-bottom:0 !important; }
.ekit-template-content-footer .ekit-heading,
.ekit-template-content-footer .ekit-heading--title{ text-align:center !important; margin:0 !important; }

/* "Our clients say." heading: force the site heading font (Questrial, same as
   the other homepage section titles) and add clear spacing below before the
   reviews widget. */
/* "Our clients say." is a native qodef-m-title; the promo heading was tagged with
   the same class. Drop the custom size/weight so both inherit the exact theme
   section-title style (Questrial 400, the native section-title size), matching
   "Follow our projects". Keep only the family (safety), centering and spacing. */
.elementor-element-657ebee .qodef-m-title,
.elementor-element-657ebee h2.qodef-m-title{
  font-family:Questrial, sans-serif !important;
  text-align:center !important;
  margin:0 0 30px !important;
}

/* Google reviews: hard-clamp the live Trustindex widget so it cannot push past
   the divider line. Constrain to the homepage content width, centre it, and clip
   any overflow so the slider and arrows stay inside the line on every screen. */
/* The outer container is the hard boundary: capped at the 1140 content width,
   centred, and overflow clipped. Anything the live slider draws past 1140 (track,
   extra cards, arrows) is clipped here, so it never crosses the divider or the
   social rail. The slider itself is left free to work inside that box. */
.elementor-element-f6dd0ad,
.elementor-element-f6dd0ad > .elementor-widget-container,
.elementor-element-f6dd0ad .elementor-shortcode,
.elementor-element-f6dd0ad .udz-ti-mount{
  max-width:1140px !important;
  width:100% !important;
  margin-left:auto !important;
  margin-right:auto !important;
  overflow:hidden !important;
  box-sizing:border-box !important;
}
.elementor-element-f6dd0ad .ti-widget{
  max-width:100% !important;
  box-sizing:border-box !important;
}

/* Watch Our Promo. The heading and the video block are flex children of the
   Elementor column's widget-wrap, which defaults to a ROW flex layout that
   left-aligns them. Force the section container, the column, and the widget-wrap
   to a centered vertical flex column so the heading sits on top, the enlarged
   9:16 video centers directly below, and the link centers below that. Maximum
   force: every rule is scoped to this section and uses !important. */
.elementor-element-c0b524a{ padding-top:64px !important; padding-bottom:64px !important; }
.elementor-element-c0b524a > .elementor-container{
  display:flex !important; flex-direction:column !important;
  align-items:center !important; justify-content:center !important;
  text-align:center !important; max-width:1140px !important; margin-left:auto !important; margin-right:auto !important;
}
.elementor-element-c0b524a .elementor-column,
.elementor-element-c0b524a .elementor-top-column{ width:100% !important; max-width:100% !important; }
.elementor-element-c0b524a .elementor-widget-wrap,
.elementor-element-c0b524a .elementor-element-populated{
  display:flex !important; flex-direction:column !important;
  align-items:center !important; justify-content:center !important; text-align:center !important;
}
.elementor-element-c0b524a .udz-promo-heading-wrap{ display:block !important; width:100% !important; text-align:center !important; margin:0 0 30px !important; }
.elementor-element-c0b524a .udz-promo-heading{
  display:block !important; width:100% !important; text-align:center !important;
  margin-left:auto !important; margin-right:auto !important; margin-top:0 !important; margin-bottom:0 !important;
  font-family:Questrial, sans-serif !important;
}
.elementor-element-c0b524a .udz-video-block{ display:block !important; width:360px !important; max-width:90vw !important; margin-left:auto !important; margin-right:auto !important; text-align:center !important; }
.elementor-element-c0b524a .udz-video-block .udz-yt-frame{
  position:relative !important; display:block !important;
  width:100% !important; max-width:360px !important; margin-left:auto !important; margin-right:auto !important;
  height:0 !important; padding:0 0 177.78% 0 !important;
  overflow:hidden !important; border-radius:18px !important;
  box-shadow:0 24px 60px rgba(0,0,0,.22) !important;
  background:#f2f1ee !important; border:1px solid #e2ded7 !important;
}
.elementor-element-c0b524a .udz-video-block .udz-yt-frame iframe{
  position:absolute !important; top:0 !important; left:0 !important;
  width:100% !important; height:100% !important; border:0 !important;
  border-radius:18px !important; background:transparent !important; z-index:2 !important;
}
.elementor-element-c0b524a .udz-yt-link{ display:block !important; width:100% !important; text-align:center !important; margin:18px 0 0 !important; }
.udz-yt-link a{ font-family:Montserrat, sans-serif !important; font-size:12px !important; font-weight:600 !important; letter-spacing:.14em !important; text-transform:uppercase !important; color:var(--udz-accent) !important; text-decoration:none !important; border-bottom:1px solid var(--udz-gold) !important; padding-bottom:2px !important; transition:color .25s ease !important; }
.udz-yt-link a:hover{ color:var(--udz-gold) !important; }

/* Scroll to top: replica of the live site's qodef back-to-top control. An
   icon-only thin up-arrow (no background, no border, no circle), fixed at
   right:30px bottom:40px, revealed on scroll, with the arrowhead stroke-draw
   animation on hover. The small trailing chevron is the fixed light grey from
   the original SVG. */
.udz-totop{
  position:fixed !important; right:30px !important; bottom:40px !important;
  width:70px !important; height:70px !important; padding:0 !important; margin:0 !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  border:0 !important; background:transparent !important; color:#1a1a1a !important;
  cursor:pointer !important; z-index:10000 !important;
  opacity:0 !important; visibility:hidden !important;
  transition:opacity .3s ease, visibility 0s .3s !important;
}
.udz-totop.is-visible{ opacity:1 !important; visibility:visible !important; transition:opacity .3s ease !important; }
.udz-totop .udz-totop-icon{ display:flex !important; align-items:center !important; justify-content:center !important; height:100% !important; overflow:hidden !important; }
.udz-totop svg{ display:block !important; width:70px !important; height:35px !important; transform:rotate(-90deg) !important; fill:currentColor !important; overflow:visible !important; }
.udz-totop svg > g:last-child > g > line{ stroke-dashoffset:0 !important; stroke-dasharray:35 !important; transition:.6s ease !important; }
.udz-totop:hover svg > g:last-child > g > line{ stroke-dashoffset:70 !important; }
.udz-totop:hover svg > g:last-child > g > line:last-child{ transition-delay:.15s !important; }
@media (max-width:600px){
  .udz-totop{ right:16px !important; bottom:22px !important; }
}

/* Social rail on the right: brand-colored letters with a subtle interactive
   hover. It sits in the strip right of the divider line; hidden at 1024px down. */
.elementor-element-634e2fe a{ position:relative !important; display:inline-block !important; }
/* Each item shows its letter by default and fades to its brand icon on hover.
   The rail itself is rotated -90deg, so the icon is counter-rotated +90deg to sit
   upright. Each item swaps independently based on which is hovered. */
.elementor-element-634e2fe a .udz-soc-label{ display:inline-block !important; transition:opacity .25s ease, transform .25s ease !important; }
.elementor-element-634e2fe a .udz-soc-ic{
  position:absolute !important; top:50% !important; left:50% !important; line-height:0 !important;
  opacity:0 !important; pointer-events:none !important;
  transform:translate(-50%,-50%) rotate(90deg) scale(.6) !important;
  transition:opacity .25s ease, transform .25s ease !important;
}
.elementor-element-634e2fe a .udz-soc-ic svg{ width:19px !important; height:19px !important; display:block !important; }
.elementor-element-634e2fe a:hover .udz-soc-label{ opacity:0 !important; transform:scale(.55) !important; }
.elementor-element-634e2fe a:hover .udz-soc-ic{ opacity:1 !important; transform:translate(-50%,-50%) rotate(90deg) scale(1.18) !important; }
.elementor-element-634e2fe a[href*="instagram"]{ color:#E1306C !important; }
.elementor-element-634e2fe a[href*="facebook"]{ color:#1877F2 !important; }
.elementor-element-634e2fe a[href*="twitter"]{ color:#1DA1F2 !important; }
.elementor-element-634e2fe a[href*="linkedin"]{ color:#0A66C2 !important; }
.elementor-element-634e2fe a[href*="pin.it"],
.elementor-element-634e2fe a[href*="pinterest"]{ color:#E60023 !important; }
.elementor-element-634e2fe a[href*="wa.me"],
.elementor-element-634e2fe a[href*="whatsapp"]{ color:#25D366 !important; }
.elementor-element-634e2fe a[href*="youtube"]{ color:#FF0000 !important; }

/* Mobile responsiveness. */
@media (max-width:1024px){
  .elementor-element-4359220, .elementor-element-634e2fe{ display:none !important; }
  html,body{ overflow-x:hidden !important; }
  img,video{ max-width:100% !important; height:auto; }
}
@media (max-width:900px){
  .udz-project-grid{ flex-direction:column !important; gap:30px !important; }
  .udz-col{ flex:1 1 100% !important; width:100% !important; min-width:0 !important; }
}
@media (max-width:782px){
  .ekit-template-content-footer .elementor-element-253e1f19 > .elementor-container > .elementor-column{ width:100% !important; }
  .ekit-template-content-footer .elementor-element-253e1f19{ padding-top:34px !important; }
  .ekit-template-content-footer .elementor-widget-image{ text-align:center !important; }
  .ekit-template-content-footer .elementor-widget-image img{ margin:0 auto !important; }
  .ekit-template-content-footer .udz-foot-contact{ text-align:center !important; }
}
@media (max-width:600px){
  .udz-project,.udz-blog{ padding-left:18px !important; padding-right:18px !important; }
  .udz-project-title,.udz-post-title,.udz-blog-title{ font-size:24px !important; }
  #slider-4-slide-7-layer-1 .qodef-m-title{ font-size:20px !important; }
}

/* Reach Us page: keep the full-width content section (office photo + RING US /
   MAIL US + the form) inside the content boundary so nothing crosses the right
   divider line. */
.elementor-element-7b3e0a5 > .elementor-container{ max-width:1140px !important; margin-left:auto !important; margin-right:auto !important; }
.elementor-element-7b3e0a5{ overflow-x:clip !important; }
.elementor-element-7b3e0a5 img,
.elementor-element-27664ef img,
.elementor-element-60503d6 img{ max-width:100% !important; height:auto !important; }

/* Reach Us contact form (Web3Forms). A polished card with soft depth, Questrial
   title, Montserrat uppercase labels and button, gold accent, smooth focus lift
   and glow, button hover lift; stays inside the column and stacks on mobile. */
.udz-contact-widget{ max-width:640px !important; margin:34px 0 0 !important; padding:32px 32px 36px !important; background:#fff !important; border:1px solid #ededed !important; border-radius:16px !important; box-shadow:0 22px 50px rgba(0,0,0,.09), 0 6px 16px rgba(0,0,0,.05) !important; }
.udz-cf-title{ font-family:Questrial, sans-serif !important; font-weight:400 !important; color:#111 !important; font-size:28px !important; letter-spacing:.035em !important; margin:0 0 18px !important; }
.udz-contact-form .udz-cf-row{ display:flex !important; gap:18px !important; }
.udz-contact-form .udz-cf-field{ flex:1 1 0 !important; min-width:0 !important; margin-bottom:16px !important; }
.udz-contact-form label{ display:block !important; font-family:Montserrat, sans-serif !important; font-size:11px !important; font-weight:600 !important; letter-spacing:.18em !important; text-transform:uppercase !important; color:#2b2b2b !important; margin-bottom:7px !important; }
.udz-contact-form label span{ color:var(--udz-gold) !important; }
.udz-contact-form input, .udz-contact-form textarea{ width:100% !important; box-sizing:border-box !important; padding:12px 14px !important; border:1px solid #dcdcdc !important; border-radius:10px !important; background:#fcfbfa !important; font-family:Roboto, sans-serif !important; font-size:15px !important; color:#333 !important; transition:border-color .25s ease, box-shadow .25s ease, transform .2s ease, background .25s ease !important; }
.udz-contact-form input:focus, .udz-contact-form textarea:focus{ outline:none !important; border-color:var(--udz-gold) !important; background:#fff !important; box-shadow:0 0 0 3px rgba(184,148,106,.18), 0 6px 16px rgba(0,0,0,.06) !important; transform:translateY(-1px) !important; }
.udz-contact-form textarea{ resize:vertical !important; min-height:120px !important; }
.udz-contact-form .udz-cf-invalid{ border-color:#d9534f !important; box-shadow:0 0 0 3px rgba(217,83,79,.12) !important; }
.udz-cf-botcheck{ position:absolute !important; left:-9999px !important; width:1px !important; height:1px !important; overflow:hidden !important; }
.udz-cf-submit{ display:inline-block !important; margin-top:6px !important; padding:14px 36px !important; border:0 !important; border-radius:10px !important; background:var(--udz-accent) !important; color:#fff !important; font-family:Montserrat, sans-serif !important; font-size:12px !important; font-weight:600 !important; letter-spacing:.18em !important; text-transform:uppercase !important; cursor:pointer !important; box-shadow:0 6px 16px rgba(0,0,0,.12) !important; transition:background .25s ease, transform .2s ease, box-shadow .25s ease !important; }
.udz-cf-submit:hover{ background:var(--udz-gold) !important; transform:translateY(-3px) !important; box-shadow:0 12px 26px rgba(184,148,106,.4) !important; }
.udz-cf-submit:active{ transform:translateY(-1px) !important; }
.udz-cf-submit:disabled{ opacity:.6 !important; cursor:default !important; transform:none !important; box-shadow:none !important; }
#udz-cf-file{ display:block !important; width:100% !important; padding:10px !important; margin-top:6px !important; border:1px solid #ccc !important; border-radius:6px !important; font-family:Roboto, sans-serif !important; font-size:14px !important; background:#fafafa !important; cursor:pointer !important; }
.udz-cf-file-hint{ font-size:12px !important; color:#888 !important; font-weight:400 !important; }
.udz-cf-status{ margin:4px 0 12px !important; font-family:Roboto, sans-serif !important; font-size:14px !important; line-height:1.5 !important; }
.udz-cf-status.is-error{ color:#c0392b !important; }
.udz-cf-success{ padding:30px 26px !important; border:1px solid #ededed !important; border-radius:16px !important; background:#fff !important; text-align:center !important; max-width:640px !important; margin:34px 0 0 !important; box-shadow:0 22px 50px rgba(0,0,0,.09), 0 6px 16px rgba(0,0,0,.05) !important; }
.udz-cf-success-ic{ color:var(--udz-gold) !important; line-height:0 !important; }
.udz-cf-success p{ font-family:Roboto, sans-serif !important; font-size:16px !important; color:#2b2b2b !important; margin:12px 0 0 !important; line-height:1.6 !important; }
@media (max-width:600px){
  .udz-contact-widget, .udz-cf-success{ max-width:100% !important; width:100% !important; padding:24px 16px 28px !important; margin-left:0 !important; margin-right:0 !important; border-radius:12px !important; box-sizing:border-box !important; }
  .udz-contact-form .udz-cf-row{ flex-direction:column !important; gap:0 !important; }
  .udz-cf-submit{ width:100% !important; }
}

/* Portfolio listing tiles: premium 3D tilt-on-hover. JS sets the perspective
   rotate from the cursor position and toggles .udz-tilting; here we add the
   smooth return, the lift shadow, and a subtle contained image zoom. The tile
   clips the zoom (overflow:hidden) so nothing spills past the grid / divider. */
.udz-tile{ overflow:hidden !important; border-radius:0 !important; transition:transform .35s ease, box-shadow .35s ease; will-change:transform !important; transform-origin:center center !important; }
.udz-tile .udz-tile-img{ transition:transform .45s ease, opacity .3s ease !important; transform-origin:center center !important; }
.udz-tile.udz-tilting{ position:relative !important; z-index:3 !important; box-shadow:0 28px 55px rgba(0,0,0,.22) !important; }
.udz-tile.udz-tilting .udz-tile-img{ transform:scale(1.05) !important; opacity:1 !important; }
/* Keep the image bright on hover (override the theme dim) so the effect reads as
   a 3D tilt and lift, not a fade to white. */
.udz-tile:hover .udz-tile-img{ opacity:1 !important; }

/* Hero image slider: fills the RevSlider hero image layer exactly (same frame,
   size, position, responsive behavior as the original static image). Slides are
   stacked and pushed across horizontally by the JS; images cover the frame. */
#slider-4-slide-7-layer-0 .udz-hero-slider{ position:absolute !important; top:0 !important; left:0 !important; width:100% !important; height:100% !important; overflow:hidden !important; z-index:5 !important; }
#slider-4-slide-7-layer-0 .udz-hero-slide{ position:absolute !important; top:0 !important; left:0 !important; width:100% !important; height:100% !important; transform:translateX(100%); will-change:transform; }
#slider-4-slide-7-layer-0 .udz-hero-slide:first-child{ transform:translateX(0); }
#slider-4-slide-7-layer-0 .udz-hero-slide img{ width:100% !important; height:100% !important; object-fit:cover !important; object-position:center !important; display:block !important; }

/* About Us (The Studio) page: the left text column was a tiny h6 heading + short
   text top-aligned against the tall image, leaving an awkward empty left area.
   Centre the text against the image, turn the heading into a proper title, set
   an elegant lead quote, and let the paragraphs fill the column. Scoped to the
   about section (2dc0982) so no other page is affected. */
.elementor-element-2dc0982 > .elementor-container{ align-items:center !important; }
.elementor-element-2dc0982 .elementor-element-7112927 > .elementor-element-populated{ padding-right:46px !important; padding-left:0 !important; }
.elementor-element-d467aa1 h6{
  font-family:Questrial, sans-serif !important;
  font-size:clamp(26px, 2.6vw, 34px) !important;
  font-weight:600 !important;
  line-height:1.22 !important;
  letter-spacing:.4px !important;
  color:#1a1a1a !important;
  text-transform:none !important;
  margin:0 0 22px !important;
}
.elementor-element-d467aa1 h6 b, .elementor-element-d467aa1 h6 strong{ font-weight:600 !important; }
.elementor-element-d467aa1 p{
  font-size:16px !important;
  line-height:1.85 !important;
  color:#4a4a4a !important;
  margin:0 0 17px !important;
  max-width:none !important;
}
.elementor-element-d467aa1 p:first-of-type{
  font-style:italic !important;
  font-size:18px !important;
  line-height:1.6 !important;
  color:#2b2b2b !important;
  border-left:3px solid var(--udz-gold) !important;
  padding-left:18px !important;
  margin:0 0 26px !important;
}
@media (max-width:900px){
  .elementor-element-2dc0982 .elementor-element-7112927 > .elementor-element-populated{ padding-right:0 !important; }
}

/* ============================================
   Awards Page (.elementor-8493)
   Clean, authentic presentation of the 5 original GABA 2021 award items & winning projects
   ============================================ */
.elementor-8493 .elementor-element-228a8a2 {
  padding: 50px 0 80px !important;
}
.elementor-8493 .elementor-element-228a8a2 > .elementor-container {
  max-width: 1080px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
  box-sizing: border-box !important;
}

/* ===== AWARDS & ACCOLADES PAGE (doc 8493) ===== */
.elementor-8493 .udz-awards-header-wrap {
  text-align: center !important;
  margin: 0 auto 56px auto !important;
  padding: 0 !important;
  max-width: 820px !important;
}
.elementor-8493 .udz-awards-eyebrow {
  display: inline-block !important;
  font-family: Montserrat, sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 3px !important;
  color: #bfa054 !important;
  text-transform: uppercase !important;
  margin-bottom: 12px !important;
}
.elementor-8493 .udz-awards-main-title {
  font-family: Questrial, sans-serif !important;
  font-weight: 400 !important;
  font-size: clamp(32px, 3.8vw, 46px) !important;
  line-height: 1.2 !important;
  letter-spacing: .5px !important;
  color: #111 !important;
  margin: 0 0 14px 0 !important;
}
.elementor-8493 .udz-awards-subtitle {
  font-family: Questrial, sans-serif !important;
  font-size: clamp(16px, 1.8vw, 19px) !important;
  font-weight: 400 !important;
  letter-spacing: .3px !important;
  color: #666 !important;
  margin: 0 auto 20px auto !important;
  line-height: 1.6 !important;
}
.elementor-8493 .udz-awards-header-divider {
  width: 56px !important;
  height: 2px !important;
  background: #bfa054 !important;
  margin: 0 auto !important;
}

/* Major Awards Grid: 2 columns desktop, balanced layout */
.elementor-8493 .udz-awards-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 36px !important;
  max-width: 1200px !important;
  margin: 0 auto 76px auto !important;
}
.elementor-8493 .udz-award-card {
  background: #ffffff !important;
  border: 1px solid #e7e1d9 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.05) !important;
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease !important;
}
.elementor-8493 .udz-award-card:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 18px 40px rgba(0,0,0,0.1) !important;
  border-color: #d1c7b7 !important;
}
.elementor-8493 .udz-award-card--featured {
  grid-column: 1 / -1 !important;
  max-width: 720px !important;
  margin: 0 auto !important;
  width: 100% !important;
}

/* Award Media / Framing */
.elementor-8493 .udz-award-media {
  position: relative !important;
  width: 100% !important;
  height: 440px !important;
  background: #fbf9f6 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 20px !important;
  box-sizing: border-box !important;
  border-bottom: 1px solid #f0ebe2 !important;
  overflow: hidden !important;
}
.elementor-8493 .udz-award-media img {
  max-width: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
  transition: transform .45s ease !important;
}
.elementor-8493 .udz-award-card:hover .udz-award-media img {
  transform: scale(1.025) !important;
}
.elementor-8493 .udz-award-pill {
  position: absolute !important;
  top: 16px !important;
  right: 16px !important;
  background: #111111 !important;
  color: #ffffff !important;
  font-family: Montserrat, sans-serif !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  padding: 6px 14px !important;
  border-radius: 20px !important;
  text-transform: uppercase !important;
  box-shadow: 0 3px 10px rgba(0,0,0,0.15) !important;
}
.elementor-8493 .udz-pill-gold {
  background: #bfa054 !important;
  color: #ffffff !important;
}

/* Award Card Body */
.elementor-8493 .udz-award-body {
  padding: 28px 30px !important;
  display: flex !important;
  flex-direction: column !important;
  flex-grow: 1 !important;
  background: #fff !important;
  box-sizing: border-box !important;
}
.elementor-8493 .udz-award-tags {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 12px !important;
}
.elementor-8493 .udz-award-tag {
  font-family: Montserrat, sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 1.6px !important;
  color: #bfa054 !important;
  text-transform: uppercase !important;
}
.elementor-8493 .udz-award-date {
  font-family: Montserrat, sans-serif !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 1.2px !important;
  color: #888888 !important;
}
.elementor-8493 .udz-award-title {
  font-family: Questrial, sans-serif !important;
  font-size: 22px !important;
  font-weight: 400 !important;
  color: #111111 !important;
  line-height: 1.35 !important;
  margin: 0 0 14px 0 !important;
}
.elementor-8493 .udz-award-conferrer {
  font-family: Questrial, sans-serif !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
  color: #444444 !important;
  margin-bottom: 12px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px dashed #e7e1d9 !important;
}
.elementor-8493 .udz-award-conferrer strong {
  display: block !important;
  color: #222222 !important;
  font-weight: 600 !important;
  margin-bottom: 2px !important;
}
.elementor-8493 .udz-award-conferrer span {
  display: block !important;
  font-size: 13.5px !important;
  color: #777777 !important;
}
.elementor-8493 .udz-award-recipient {
  font-family: Questrial, sans-serif !important;
  font-size: 14.5px !important;
  color: #333333 !important;
  margin-bottom: 14px !important;
}
.elementor-8493 .udz-recipient-label {
  font-family: Montserrat, sans-serif !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 1.2px !important;
  color: #bfa054 !important;
  margin-right: 6px !important;
}
.elementor-8493 .udz-award-desc {
  font-family: Questrial, sans-serif !important;
  font-size: 16px !important;
  line-height: 1.65 !important;
  color: #555555 !important;
  margin: 0 !important;
  flex-grow: 1 !important;
}

/* Section 2: Recognized Landmarks (Projects) */
.elementor-8493 .udz-award-projects-section {
  background: #fbf9f6 !important;
  border: 1px solid #e7e1d9 !important;
  border-radius: 10px !important;
  padding: 52px 42px !important;
  margin-bottom: 40px !important;
}
.elementor-8493 .udz-award-projects-header {
  text-align: center !important;
  margin-bottom: 40px !important;
}
.elementor-8493 .udz-award-projects-title {
  font-family: Questrial, sans-serif !important;
  font-size: clamp(26px, 2.8vw, 34px) !important;
  font-weight: 400 !important;
  color: #111111 !important;
  margin: 6px 0 10px 0 !important;
}
.elementor-8493 .udz-award-projects-subtitle {
  font-family: Questrial, sans-serif !important;
  font-size: 16px !important;
  color: #666666 !important;
  margin: 0 !important;
}
.elementor-8493 .udz-award-projects-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 28px !important;
}
.elementor-8493 .udz-project-card {
  background: #ffffff !important;
  border: 1px solid #e7e1d9 !important;
  border-radius: 6px !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.04) !important;
  transition: transform .3s ease, box-shadow .3s ease !important;
}
.elementor-8493 .udz-project-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,0.08) !important;
}
.elementor-8493 .udz-project-media {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 16 / 11 !important;
  overflow: hidden !important;
  background: #f0ebe2 !important;
}
.elementor-8493 .udz-project-media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform .45s ease !important;
}
.elementor-8493 .udz-project-card:hover .udz-project-media img {
  transform: scale(1.05) !important;
}
.elementor-8493 .udz-project-award-badge {
  position: absolute !important;
  bottom: 10px !important;
  left: 10px !important;
  background: rgba(17,17,17,0.88) !important;
  backdrop-filter: blur(4px) !important;
  color: #bfa054 !important;
  font-family: Montserrat, sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 1.2px !important;
  padding: 4px 10px !important;
  border-radius: 3px !important;
  text-transform: uppercase !important;
}
.elementor-8493 .udz-project-content {
  padding: 24px 22px !important;
  display: flex !important;
  flex-direction: column !important;
  flex-grow: 1 !important;
}
.elementor-8493 .udz-project-loc {
  font-family: Montserrat, sans-serif !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: 1.5px !important;
  color: #888888 !important;
  margin-bottom: 6px !important;
  display: block !important;
}
.elementor-8493 .udz-project-name {
  font-family: Questrial, sans-serif !important;
  font-size: 20px !important;
  font-weight: 400 !important;
  color: #111111 !important;
  margin: 0 0 4px 0 !important;
}
.elementor-8493 .udz-project-type {
  font-family: Questrial, sans-serif !important;
  font-size: 14px !important;
  color: #bfa054 !important;
  font-weight: 600 !important;
  margin: 0 0 10px 0 !important;
}
.elementor-8493 .udz-project-summary {
  font-family: Questrial, sans-serif !important;
  font-size: 14.5px !important;
  line-height: 1.55 !important;
  color: #666666 !important;
  margin: 0 !important;
}

/* Responsive Tablet & Mobile */
@media (max-width: 992px) {
  .elementor-8493 .udz-awards-grid {
    gap: 24px !important;
  }
  .elementor-8493 .udz-award-media {
    height: 360px !important;
  }
  .elementor-8493 .udz-award-projects-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 768px) {
  .elementor-8493 .udz-awards-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    margin-bottom: 48px !important;
  }
  .elementor-8493 .udz-award-card--featured {
    max-width: 100% !important;
  }
  .elementor-8493 .udz-award-media {
    height: 320px !important;
    padding: 14px !important;
  }
  .elementor-8493 .udz-award-body {
    padding: 22px 20px !important;
  }
  .elementor-8493 .udz-award-title {
    font-size: 20px !important;
  }
  .elementor-8493 .udz-award-desc {
    font-size: 15px !important;
  }
  .elementor-8493 .udz-award-projects-section {
    padding: 32px 18px !important;
    border-radius: 8px !important;
  }
  .elementor-8493 .udz-award-projects-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
}


/* ===== Image-beside-text template: shared by Reach Us (doc 2630) and About Me
   (doc 2245). Both pages reuse the SAME Elementor IDs (7b3e0a5 / 4563847 /
   9c83512 / 60503d6), present on no other page. The left image fills its half
   via ABSOLUTE positioning so it never drives page height: this both removes the
   white gap beside the taller text column AND fixes the zoom/reflow flash on
   refresh (an in-flow image briefly rendered at its natural 2500px height before
   the flex layout settled). Sharp square edges. The content grid is widened from
   the theme default (1100px) to 1300px so the image sits closer to the left. */
.elementor-element-7b3e0a5 > .elementor-container{ width:1300px !important; max-width:1300px !important; align-items:stretch !important; }
.elementor-element-4563847{ display:flex !important; }
.elementor-element-4563847 > .elementor-element-populated{ position:relative !important; width:100% !important; min-height:100% !important; padding:0 !important; }
.elementor-element-27664ef{ display:none !important; } /* redundant square overlay (Reach Us only) */
.elementor-element-60503d6{ position:absolute !important; inset:0 !important; margin:0 !important; width:100% !important; height:100% !important; max-width:none !important; }
.elementor-element-60503d6 > .elementor-widget-container,
.elementor-element-60503d6 .qodef-single-image,
.elementor-element-60503d6 .qodef-m-image{ position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; margin:0 !important; transform:none !important; --e-transform-translateX:0 !important; border-radius:0 !important; overflow:hidden !important; }
.elementor-element-60503d6 img{ position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; object-fit:cover !important; object-position:center !important; display:block !important; border-radius:0 !important; }
/* gutter so the text column does not butt against the full-bleed image */
.elementor-element-9c83512 > .elementor-element-populated{ padding:40px 0 40px 7% !important; margin:0 !important; }
.elementor-element-9c83512 .elementor-widget-text-editor{ margin-bottom:14px !important; }

/* Reach Us only (doc 2630): organize the RING US / MAIL US blocks (label above
   value, gold links, tight), plus CTA + map side by side and the button hover.
   Scoped by page doc id so the About Me bio paragraphs keep their own spacing. */
[data-elementor-id="2630"] .elementor-element-9c83512 h6{ font-family:Questrial, sans-serif !important; font-size:20px !important; font-weight:600 !important; letter-spacing:.4px !important; color:#1a1a1a !important; margin:0 0 8px !important; }
[data-elementor-id="2630"] .elementor-element-9c83512 .elementor-widget-text-editor p{ margin:0 0 2px !important; line-height:1.5 !important; }
[data-elementor-id="2630"] .elementor-element-9c83512 .elementor-widget-text-editor p strong{ display:block !important; font-size:11px !important; letter-spacing:1.2px !important; text-transform:uppercase !important; color:#9a8e80 !important; font-weight:700 !important; margin-top:12px !important; }
[data-elementor-id="2630"] .elementor-element-9c83512 .elementor-widget-text-editor p a{ color:var(--udz-gold) !important; font-weight:600 !important; text-decoration:none !important; }
[data-elementor-id="2630"] .elementor-element-9c83512 .elementor-widget-text-editor p a:hover{ text-decoration:underline !important; }

/* CTA + map placed side by side (wrapped in .udz-cta-map-row): two panels of the
   SAME width and the SAME height (a fixed 480px, so they match exactly), top
   aligned. The grey card fills its panel as a flex column: heading and text at
   the top, "Book an Appointment" pinned to the bottom. */
.udz-cta-map-row{ display:flex !important; gap:26px !important; align-items:stretch !important; max-width:1300px !important; margin:0 auto !important; padding:0 20px !important; box-sizing:border-box !important; }
.udz-cta-map-row > .elementor-element{ flex:1 1 50% !important; width:50% !important; max-width:50% !important; min-width:0 !important; margin:0 !important; padding:0 !important; display:flex !important; }
.udz-cta-map-row .elementor-container, .udz-cta-map-row .elementor-column, .udz-cta-map-row .elementor-element-populated, .udz-cta-map-row .elementor-widget-wrap, .udz-cta-map-row .elementor-widget, .udz-cta-map-row .elementor-widget-container{ width:100% !important; height:100% !important; margin:0 !important; }
.udz-cta-map-row .elementor-container{ max-width:100% !important; }
/* CTA grey card: fill the panel, lay out as a column, beautified */
.udz-cta-map-row .elementor-element-d3591c9, .udz-cta-map-row .elementor-element-d3591c9 .elementor-widget-container{ display:flex !important; padding:0 !important; }
.udz-cta-map-row .qodef-qi-call-to-action{ height:480px !important; min-height:480px !important; width:100% !important; display:flex !important; padding:0 !important; box-sizing:border-box !important; box-shadow:0 18px 44px rgba(0,0,0,.12) !important; }
.udz-cta-map-row .qodef-qi-call-to-action > .qodef-m-inner{ display:flex !important; flex-direction:column !important; width:100% !important; height:100% !important; padding:48px !important; box-sizing:border-box !important; }
.udz-cta-map-row .qodef-m-content{ margin:0 !important; }
.udz-cta-map-row .qodef-m-title{ font-family:Questrial, sans-serif !important; font-size:34px !important; font-weight:400 !important; letter-spacing:.5px !important; color:#fff !important; margin:0 0 18px !important; }
.udz-cta-map-row .qodef-m-text{ font-size:15.5px !important; line-height:1.85 !important; color:rgba(255,255,255,.9) !important; }
.udz-cta-map-row .qodef-m-text br{ display:none !important; } /* drop the trailing manual breaks */
.udz-cta-map-row .qodef-m-button{ margin-top:auto !important; padding-top:30px !important; } /* pin button to the bottom */
/* beautified button */
.udz-cta-map-row .elementor-element-d3591c9 a.qodef-qi-button{ display:inline-flex !important; align-items:center !important; padding:15px 40px !important; border:2px solid #fff !important; border-radius:2px !important; background:transparent !important; letter-spacing:.12em !important; text-transform:uppercase !important; font-size:13px !important; transition:background-color .3s ease, color .3s ease, border-color .3s ease !important; }
.udz-cta-map-row .elementor-element-d3591c9 a.qodef-qi-button .qodef-m-text{ color:#fff !important; }
.udz-cta-map-row .elementor-element-d3591c9 a.qodef-qi-button:hover{ background:#fff !important; border-color:#fff !important; }
.udz-cta-map-row .elementor-element-d3591c9 a.qodef-qi-button:hover .qodef-m-text{ color:#2b2b2b !important; }
/* map: exactly the same height as the card */
[data-elementor-id="2630"] .elementor-element-1406be3 iframe{ width:100% !important; height:480px !important; min-height:480px !important; display:block !important; border:0 !important; }

@media (max-width:1024px){
  /* stacked layout: image returns to normal flow as a banner (absolute fill needs
     a sibling to set the height, which is gone once columns stack) */
  .elementor-element-7b3e0a5 > .elementor-container{ width:auto !important; max-width:100% !important; }
  .elementor-element-4563847 > .elementor-element-populated{ position:static !important; min-height:0 !important; }
  .elementor-element-60503d6, .elementor-element-60503d6 > .elementor-widget-container, .elementor-element-60503d6 .qodef-single-image, .elementor-element-60503d6 .qodef-m-image{ position:static !important; height:auto !important; }
  .elementor-element-60503d6 img{ position:static !important; height:360px !important; }
  .elementor-element-9c83512 > .elementor-element-populated{ padding:30px 20px !important; }
  .udz-cta-map-row{ flex-direction:column !important; }
  .udz-cta-map-row > .elementor-element{ width:100% !important; max-width:100% !important; flex-basis:auto !important; }
  .udz-cta-map-row .qodef-qi-call-to-action{ height:auto !important; min-height:0 !important; }
  [data-elementor-id="2630"] .elementor-element-1406be3 iframe{ height:340px !important; min-height:340px !important; }
}

/* SEO: the single per-page <h1> injected on pages whose visible main heading is
   not an h1 (home, studio, architect, awards, services, reach us). Visually
   hidden but present for search engines and assistive tech. No design change. */
.udz-seo-h1{ position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important; overflow:hidden !important; clip:rect(0,0,0,0) !important; white-space:nowrap !important; border:0 !important; }

/* Instant promo video: a lightweight thumbnail + play-button facade fills the
   video frame; the heavy YouTube player iframe is loaded only when clicked
   (udz-polish.js Feature 7). Big initial-load saving, especially on mobile. */
.elementor-element-c0b524a .udz-yt-frame .udz-yt-facade{ position:absolute !important; top:0 !important; left:0 !important; width:100% !important; height:100% !important; margin:0 !important; padding:0 !important; border:0 !important; cursor:pointer !important; display:block !important; background:#000 !important; }
.elementor-element-c0b524a .udz-yt-frame .udz-yt-thumb{ width:100% !important; height:100% !important; object-fit:cover !important; display:block !important; }
.elementor-element-c0b524a .udz-yt-frame .udz-yt-playbtn{ position:absolute !important; top:50% !important; left:50% !important; transform:translate(-50%,-50%) !important; width:72px !important; height:50px !important; background:rgba(20,20,20,.72) !important; border-radius:14px !important; transition:background .25s ease, transform .25s ease !important; }
.elementor-element-c0b524a .udz-yt-frame .udz-yt-playbtn::before{ content:"" !important; position:absolute !important; top:50% !important; left:50% !important; transform:translate(-35%,-50%) !important; border-style:solid !important; border-width:11px 0 11px 19px !important; border-color:transparent transparent transparent #fff !important; }
.elementor-element-c0b524a .udz-yt-frame .udz-yt-facade:hover .udz-yt-playbtn{ background:#cc0000 !important; transform:translate(-50%,-50%) scale(1.06) !important; }
.elementor-element-c0b524a .udz-yt-frame iframe.udz-yt-iframe{ position:absolute !important; top:0 !important; left:0 !important; width:100% !important; height:100% !important; border:0 !important; }

/* ===== Mobile fixes ===== */
/* Social links live only in the fixed right rail (hidden on phones) and not in
   the footer, so mobile had no social links. udz-polish.js Feature 8 clones them
   into this bar appended to the footer; it shows only on mobile. */
.udz-mobile-social{ display:none; }
@media (max-width:1024px){
  .udz-mobile-social{ display:flex !important; flex-wrap:wrap !important; justify-content:center !important; align-items:center !important; gap:10px 20px !important; padding:24px 16px !important; background:#faf8f6 !important; border-top:1px solid #e7e1d9 !important; }
  .udz-mobile-social a{ color:var(--udz-gold) !important; font-family:Montserrat, "Lato", sans-serif !important; font-size:13px !important; font-weight:700 !important; letter-spacing:.12em !important; text-transform:uppercase !important; text-decoration:none !important; }
  .udz-mobile-social a:hover{ color:#1a1a1a !important; }
}
/* ===== Global mobile overflow fix (the main cause of pages looking broken) =====
   The theme hard-codes content-grid containers to a fixed 1100-1400px width with
   NO mobile override, so on a phone almost every section was wider than the screen
   and clipped on the right (stats numbers, intro, etc.). Make those containers
   full-width and clamp everything to the viewport. */
@media (max-width:1024px){
  html, body{ overflow-x:hidden !important; max-width:100vw !important; }
  .qodef-elementor-content-grid > .elementor-container{ width:auto !important; max-width:100% !important; margin-left:auto !important; margin-right:auto !important; }
  .elementor-section > .elementor-container{ max-width:100% !important; }
  .elementor-widget img, .elementor-widget iframe{ max-width:100% !important; }
}

/* Footer on mobile: stack to one column, centre, wrap long text, fit the screen. */
@media (max-width:1024px){
  .ekit-template-content-footer{ overflow-x:hidden !important; }
  .ekit-template-content-footer .elementor-section,
  .ekit-template-content-footer .elementor-container,
  .ekit-template-content-footer .elementor-column,
  .ekit-template-content-footer .elementor-widget-wrap,
  .ekit-template-content-footer .elementor-widget{ max-width:100% !important; box-sizing:border-box !important; }
  .ekit-template-content-footer .elementor-container{ width:auto !important; flex-wrap:wrap !important; }
  .ekit-template-content-footer .elementor-column{ width:100% !important; flex:0 0 100% !important; }
  .ekit-template-content-footer .elementor-widget-text-editor,
  .ekit-template-content-footer .elementor-widget-text-editor *,
  .ekit-template-content-footer .elementskit-section-title-wraper,
  .ekit-template-content-footer .udz-foot-contact,
  .ekit-template-content-footer .udz-foot-logo{ text-align:center !important; }
  .ekit-template-content-footer .udz-foot-logo{ align-items:center !important; }
  .ekit-template-content-footer p,
  .ekit-template-content-footer a,
  .ekit-template-content-footer span,
  .ekit-template-content-footer li{ overflow-wrap:break-word !important; word-break:break-word !important; }
}

/* Header on mobile: keep ONE logo (the wordmark) on the left and the hamburger on
   the right; hide the duplicate ekit offcanvas logo; and draw the hamburger as 3
   bars because its icon-font glyph (icon-options) does not load (it was an empty
   square). The standalone logo was previously hidden, which removed the only logo;
   it is restored here. */
@media (max-width:1024px){
  .ekit-template-content-header .elementor-element-1d3dc175 > .elementor-container{ display:flex !important; flex-wrap:nowrap !important; align-items:center !important; justify-content:space-between !important; }
  .ekit-template-content-header .elementor-element-7b927424{ display:block !important; width:auto !important; max-width:62% !important; flex:0 1 auto !important; }
  .ekit-template-content-header .elementor-element-7b927424 img{ max-width:160px !important; width:auto !important; height:auto !important; }
  .ekit-template-content-header .elementor-element-112db804{ flex:0 0 auto !important; width:auto !important; }
  .elementskit-nav-logo{ display:none !important; }
  .elementskit-menu-hamburger{ border:0 !important; background:transparent !important; padding:8px 4px !important; }
  .elementskit-menu-hamburger .ekit-menu-icon{ font-size:0 !important; display:inline-block !important; width:26px !important; height:2px !important; background:#1a1a1a !important; position:relative !important; margin:9px 0 !important; box-shadow:0 -8px 0 #1a1a1a, 0 8px 0 #1a1a1a !important; vertical-align:middle !important; }
}

/* Scroll-to-top: the theme ships its own qodef back-to-top button on top of the
   custom replica (.udz-totop), which showed two arrows. Hide the theme one. */
#qodef-back-to-top, .qodef-back-to-top, a.qodef-back-to-top, .qodef-m-back-to-top, .qodef-back-to-top-holder{ display:none !important; }

/* ========================================================================
   MOBILE MASTER OVERRIDE  (defined LAST in the file so it wins every tie).
   Diagnosed root cause: the divider and social rail are position:fixed at
   left:625px / left:700px, which forces the page wider than the phone; and
   body{overflow-x:hidden} cannot clip a fixed element. So the whole page had
   horizontal overflow, which made the footer (and other centred content) look
   shifted-right and clipped. This block kills the overflow at the source and
   hard-stacks the footer. Tested selectors at 375px and 414px.
   ======================================================================== */
@media (max-width:1024px){
  html{ overflow-x:hidden !important; }
  body{ overflow-x:hidden !important; width:100% !important; max-width:100% !important; position:relative !important; }

  /* the fixed divider + social rail: remove AND neutralise their fixed position
     so they can never widen the page (belt and suspenders) */
  .elementor-element-4359220, .elementor-element-634e2fe,
  .ekit-template-content-header .elementor-element-4359220,
  .ekit-template-content-header .elementor-element-634e2fe{
    display:none !important; position:static !important; left:auto !important; right:auto !important; width:0 !important; height:0 !important; overflow:hidden !important;
  }

  /* nothing may exceed the viewport width */
  .elementor, .elementor-section, .elementor-top-section, .elementor-inner-section,
  .elementor-container, .elementor-column, .elementor-widget, .elementor-widget-wrap,
  #rev_slider_4_1_wrapper, .rev_slider_wrapper, .rev_slider, .rs-module, .rs-module-wrap{ max-width:100% !important; }
  img, iframe, video, svg{ max-width:100% !important; }

  /* FOOTER: hard-stack to one column, centred, fit the screen, wrap long text.
     Scoped with the footer doc wrapper (.elementor-9506) AND the ekit footer for
     maximum specificity so it beats the theme/Elementor column widths. */
  .ekit-template-content-footer{ overflow-x:hidden !important; }
  .elementor-9506 > .elementor-section > .elementor-container,
  .elementor-9506 .elementor-container,
  .ekit-template-content-footer .elementor-container{ display:flex !important; flex-direction:column !important; align-items:center !important; width:100% !important; max-width:100% !important; }
  .elementor-9506 .elementor-column,
  .ekit-template-content-footer .elementor-column{ width:100% !important; max-width:100% !important; flex:0 0 100% !important; }
  .elementor-9506 .elementor-widget-text-editor, .elementor-9506 .elementor-widget-text-editor *,
  .elementor-9506 .elementskit-heading, .elementor-9506 .elementskit-section-title-wraper,
  .ekit-template-content-footer .elementor-widget-text-editor, .ekit-template-content-footer .elementor-widget-text-editor *{ text-align:center !important; }
  .elementor-9506 p, .elementor-9506 a, .elementor-9506 span,
  .ekit-template-content-footer p, .ekit-template-content-footer a, .ekit-template-content-footer span{
    overflow-wrap:break-word !important; word-break:break-word !important; max-width:100% !important;
  }
  .elementor-9506 .elementor-column > .elementor-widget-wrap,
  .ekit-template-content-footer .elementor-column > .elementor-widget-wrap{ padding:8px 18px !important; }
}

/* ============================================
   MOBILE FIX v=mob6 - footer transforms + stats absolute
   Resets Elementor motion-effect translateX on footer contact/nav
   widgets and returns stats counters to normal flow.
   ============================================ */
@media (max-width: 767px) {

  /* FOOTER: kill the desktop translateX on ALL footer transform widgets.
     Previously only the logo (1c13e59) was reset. */
  .ekit-template-content-footer .elementor-element.e-transform,
  .ekit-template-content-footer .elementor-element-1c13e59,
  .ekit-template-content-footer .elementor-element-fc81713,
  .ekit-template-content-footer .elementor-element-66c16fe3 {
    transform: none !important;
    --e-transform-translateX: 0px !important;
    --e-transform-translateY: 0px !important;
  }
  .ekit-template-content-footer .elementor-element.e-transform > .elementor-widget-container {
    transform: none !important;
  }

  /* FOOTER: stack the three columns full width, centered. */
  .ekit-template-content-footer .elementor-element-253e1f19 .elementor-col-33 {
    width: 100% !important;
    text-align: center !important;
  }
  .ekit-template-content-footer .elementor-element-253e1f19 .elementor-container {
    flex-direction: column !important;
  }

  /* STATS: return the 5 absolute counters to normal flow so they stop
     overlapping and drifting off the left edge. */
  .elementor-element-55dc7e8 .elementor-widget.elementor-absolute {
    position: static !important;
    transform: none !important;
    --e-transform-translateX: 0px !important;
    --e-transform-translateY: 0px !important;
  }

  /* STATS: stack the 5 columns full width. */
  .elementor-element-55dc7e8 .elementor-col-20 {
    width: 100% !important;
    text-align: center !important;
  }
  .elementor-element-55dc7e8 .elementor-container {
    flex-direction: column !important;
  }

  /* STATS: shrink the 100px inline digit so it fits the viewport. */
  .elementor-element-55dc7e8 .qodef-m-digit {
    font-size: 44px !important;
  }
}

/* ============================================
   MOBILE FIX v=mob7 - open menu panel + STUDIO submenu + hero button
   ============================================ */
@media (max-width: 1024px) {

  /* 1. MENU PANEL: solid white background so the hero no longer shows through */
  #ekit-megamenu-home-page-udz.elementskit-menu-offcanvas-elements {
    background: #ffffff !important;
  }

  /* 2. PANEL LOGO: restore the logo at the top of the open panel (was hard-hidden) */
  #ekit-megamenu-home-page-udz .elementskit-nav-identity-panel {
    display: block !important;
    padding: 20px 20px 10px !important;
  }
  #ekit-megamenu-home-page-udz .elementskit-nav-logo {
    display: inline-block !important;
  }
  #ekit-megamenu-home-page-udz .elementskit-nav-logo img {
    max-width: 170px !important;
    height: auto !important;
  }

  /* 3. STUDIO SUBMENU: force always-open so all 3 children are visible (no JS/icon needed) */
  #ekit-megamenu-home-page-udz .elementskit-submenu-panel {
    display: block !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    max-height: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    padding-left: 18px !important;
  }

  /* 4. HERO "About Us" button: match the gray Montserrat AWARDS button (override inline color/font) */
  rs-layer a.qodef-button.qodef-layout--outlined,
  rs-layer a.qodef-button.qodef-layout--outlined .qodef-m-text {
    color: #121212 !important;
    font-family: Montserrat, sans-serif !important;
  }
}

/* ============================================
   RESPONSIVE FIX v=mob8 - overflow, stats band, footer, hero button, panel logo
   Overflow culprit(s) found: the theme hard-codes the content-grid section
   container to a fixed pixel width with NO mobile media override, in
   emaurri-core.min.css / main.min.css:
     .qodef-content-grid-1400 .qodef-elementor-content-grid > .elementor-container{ width:1400px; max-width:1400px }
     (also 1100px / 1300px variants). Used by about-us section
     .elementor-element-7dc10ed, our-services (3 such sections) and about-me (1).
   Aggravator: the theme sets overflow-x:hidden on body only, not html, so a
   child wider than the viewport can still scroll the root element on mobile.
   Ruled out (checked in the 3 pages, not guessed): no elementor-section-stretched,
   no layout width:100vw + left:50% (the 100vw / 1448px hits are the logo srcset
   "sizes" attribute; margin:-1px is the clipped SEO h1), no inline px width over
   400 on content, no negative inline margins, no position:fixed bleed (the
   homepage rail/divider 634e2fe and 4359220 are present in the DOM but are
   display:none at <=1024 via udz-polish, and no fixed rule uses a large left).
   ============================================ */

/* A. GLOBAL OVERFLOW GUARD - stop sideways scroll on all pages/widths */
@media (max-width: 1024px) {
  html, body { overflow-x: hidden !important; max-width: 100% !important; }
  .elementor-section, .elementor-container, .elementor-row, .elementor-widget-wrap {
    max-width: 100% !important;
  }
  /* neutralise full-bleed negative-margin rows that cause the bleed */
  .elementor-section.elementor-section-stretched,
  [style*="margin-left: -"], [style*="margin-right: -"] {
    margin-left: 0 !important; margin-right: 0 !important;
    width: 100% !important; left: auto !important;
  }
  /* content-grid section container: the fixed 1400px width offender found above */
  .qodef-content-grid-1400 .qodef-elementor-content-grid > .elementor-container,
  .qodef-elementor-content-grid > .elementor-container {
    width: 100% !important; position: static !important; left: auto !important; margin: 0 auto !important;
  }
}

/* B. STATS counters - also stack in the tablet/narrow band, not just <=767 */
@media (max-width: 1024px) {
  .elementor-element-55dc7e8 {
    padding-top: 40px !important;
    padding-bottom: 20px !important;
    overflow: visible !important;
  }
  .elementor-element-55dc7e8 .elementor-widget.elementor-absolute {
    position: static !important; transform: none !important;
    --e-transform-translateX: 0px !important; --e-transform-translateY: 0px !important;
  }
  .elementor-element-55dc7e8 .elementor-col-20 {
    width: 100% !important;
    text-align: center !important;
    margin-bottom: 20px !important;
  }
  .elementor-element-55dc7e8 .elementor-container { flex-direction: column !important; }
  .elementor-element-55dc7e8 .qodef-m-digit { font-size: 44px !important; }
}

/* C. FOOTER - extend the transform reset up to 1024 so the tablet band stops shifting */
@media (max-width: 1024px) {
  .ekit-template-content-footer .elementor-element.e-transform,
  .ekit-template-content-footer .elementor-element-1c13e59,
  .ekit-template-content-footer .elementor-element-fc81713,
  .ekit-template-content-footer .elementor-element-66c16fe3 {
    transform: none !important; --e-transform-translateX: 0px !important; --e-transform-translateY: 0px !important;
  }
  .ekit-template-content-footer .elementor-element-253e1f19 .elementor-col-33 { width: 100% !important; text-align: center !important; }
  .ekit-template-content-footer .elementor-element-253e1f19 .elementor-container { flex-direction: column !important; }
  /* tighten footer vertical rhythm so it reads cleaner */
  .ekit-template-content-footer .elementor-element-253e1f19 .elementor-col-33 { margin-bottom: 22px !important; }
}

/* D. PANEL LOGO - darken/enlarge the faint wordmark inside the open menu */
@media (max-width: 1024px) {
  #ekit-megamenu-home-page-udz .elementskit-nav-logo img {
    max-width: 190px !important; height: auto !important; filter: none !important; opacity: 1 !important;
  }
}

/* ---- HERO BUTTON DIAGNOSIS (not styled this round; confirm the id first) ----
   The layer I previously targeted, slider-4-slide-7-layer-2, is data-vbility="t,t,f,f"
   = visible on desktop and notebook only, HIDDEN on the two small breakpoints.
   The About Us button that IS visible on tablet and mobile is:
     rs-layer id="slider-4-slide-7-layer-6"
     data-vbility="f,f,t,t"    (hidden desktop/notebook, visible tablet + mobile)
     data-color="#000000"      (RevSlider JS writes inline color:#000000 = black)
     inline style="z-index:12;font-family:'Roboto';"
     anchor: a.qodef-shortcode.qodef-m.qodef-button.qodef-layout--outlined.qodef-underline--default.qodef-html--link
             href="/about-us/index.html", text "About Us"
   Its desktop/notebook twin is layer-2 (identical classes/color/font, vbility t,t,f,f).
   Note: the existing mob7 rule uses a bare "rs-layer a.qodef-button.qodef-layout--outlined"
   selector, so it ALREADY applies to layer-6 on mobile (color:#121212; font-family:Montserrat).
*/

/* ============================================
   MOBILE FIX v=mob9 - hero height fallback
   Root cause (diagnosed): on mobile the RevSlider hero height is set only by
   rs6.min.js at runtime (layout:fullscreen). When that JS does not finish
   initializing, layer-0 gets no height, .udz-hero-slider is height:100% of 0,
   and the hero collapses to a blank band. This adds the missing CSS height
   fallback so the hero always has a height on mobile, independent of the JS.
   Desktop is untouched (this is inside a max-width media query).
   ============================================ */
@media (max-width: 1024px) {
  /* Force a real height on the hero chain so it never collapses to 0 */
  #rev_slider_4_1_wrapper,
  #rev_slider_4_1,
  #rev_slider_4_1 rs-slide,
  #slider-4-slide-7-layer-0 {
    height: 70vh !important;
    min-height: 420px !important;
    max-height: 640px !important;
    visibility: visible !important;
  }
  /* The custom image slider fills that guaranteed height */
  #slider-4-slide-7-layer-0 .udz-hero-slider,
  #slider-4-slide-7-layer-0 .udz-hero-slide,
  #slider-4-slide-7-layer-0 .udz-hero-slide img {
    height: 100% !important;
    width: 100% !important;
  }
  /* Correct the sideways offset/oversize: on mobile layer-0 was width 1018px
     pushed 249px left. Pin it to the viewport so images are centered, not cropped off-screen. */
  #slider-4-slide-7-layer-0 {
    width: 100% !important;
    left: 0 !important;
    right: auto !important;
    transform: none !important;
    --e-transform-translateX: 0px !important;
  }
  #slider-4-slide-7-layer-0 .udz-hero-slide img {
    object-fit: cover !important;
    object-position: center !important;
  }
}

/* ============================================
   MOBILE FIX v=mob10 - hero WIDTH fix
   Diagnosed live: after mob9 the hero chain has height 420px (good) but the
   absolute-positioned .udz-hero-slide and its img compute to WIDTH 0, and the
   slides sit at left:372px (pushed off-screen). Height was fixed; width and
   horizontal offset were not. This forces full width and pins them to the left.
   ============================================ */
@media (max-width: 1024px) {
  #slider-4-slide-7-layer-0,
  #slider-4-slide-7-layer-0 .udz-hero-slider,
  #slider-4-slide-7-layer-0 .udz-hero-slide,
  #slider-4-slide-7-layer-0 .udz-hero-slide img {
    width: 100vw !important;
    max-width: 100vw !important;
    left: 0 !important;
    right: auto !important;
    margin: 0 !important;
    transform: none !important;
    --e-transform-translateX: 0px !important;
  }
  #slider-4-slide-7-layer-0 .udz-hero-slide img {
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
  }
}

/* ============================================
   MOBILE FIX v=mob11 - hero z-index (final piece)
   Diagnosed live: mob9 fixed height, mob10 fixed width, but RevSlider's own
   empty <rs-slide> paints at z-index 20 ON TOP of .udz-hero-slider (z-index 5),
   covering the images with a transparent layer = blank. Raise the custom slider
   above RevSlider's empty layers so the images show.
   ============================================ */
@media (max-width: 1024px) {
  #slider-4-slide-7-layer-0 .udz-hero-slider {
    z-index: 30 !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
  }
}

/* ============================================
   HERO SLIDER FIX v=mob12 - opacity cross-fade
   Diagnosed live: the 9 RevSlider hero slides were all frozen at the same
   translateX(709px), so only one image showed and it never advanced. This
   stacks all 9 slides in the same spot and cross-fades them via opacity,
   which RevSlider's re-applied transform cannot clobber. Applies all widths.
   ============================================ */
#slider-4-slide-7-layer-0 .udz-hero-slider{ position:absolute !important; inset:0 !important; }
#slider-4-slide-7-layer-0 .udz-hero-slide{
  position:absolute !important; inset:0 !important;
  transform:none !important;
  opacity:0 !important;
  transition:opacity 1.2s ease !important;
  z-index:1 !important;
}
#slider-4-slide-7-layer-0 .udz-hero-slide.udz-hero-active{
  opacity:1 !important;
  z-index:2 !important;
}
#slider-4-slide-7-layer-0 .udz-hero-slide img{
  width:100% !important; height:100% !important; object-fit:cover !important; object-position:center !important;
}

/* ============================================
   MOBILE MASTER FIX v=mob13 - comprehensive mobile override
   Audited all pages at 375px. Root cause: Elementor's e-transform system
   applies translateX(Npx) on dozens of widgets via inline styles, pushing
   content hundreds of pixels off-screen on mobile. This single block fixes
   every mobile issue found across all pages. Desktop is completely untouched.
   ============================================ */
@media (max-width: 1024px) {

  /* 1. NUCLEAR TRANSFORM KILL - every widget with an Elementor motion-effect
     transform gets it stripped. This is the single fix for footer, contact
     form, and off-screen content on every page. */
  .elementor-element.e-transform,
  .elementor-element.e-transform > .elementor-widget-container,
  .elementor-element[style*="translateX"],
  .elementor-element[style*="translateY"] {
    transform: none !important;
    --e-transform-translateX: 0px !important;
    --e-transform-translateY: 0px !important;
    --e-transform-rotateZ: 0deg !important;
    --e-transform-scaleX: 1 !important;
    --e-transform-scaleY: 1 !important;
  }

  /* 2. GLOBAL WIDTH CLAMP - nothing exceeds viewport */
  *, *::before, *::after { box-sizing: border-box !important; }
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100% !important;
  }
  .elementor-section,
  .elementor-top-section,
  .elementor-inner-section,
  .elementor-container,
  .elementor-row,
  .elementor-column,
  .elementor-widget-wrap,
  .elementor-widget,
  .elementor-widget-container,
  .elementor-element-populated {
    max-width: 100% !important;
    overflow-x: clip !important;
  }

  /* 3. COLUMN STACKING - force single-column on mobile */
  .elementor-container {
    flex-direction: column !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .elementor-column {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }

  /* 4. ABSOLUTE-POSITIONED SPACERS - the blank gaps on our-services and awards
     are from widgets with position:absolute that have no visible content but
     reserve vertical space. Return them to normal flow. */
  .elementor-widget.elementor-absolute {
    position: static !important;
    transform: none !important;
    --e-transform-translateX: 0px !important;
    --e-transform-translateY: 0px !important;
    width: 100% !important;
  }

  /* 5. HEADER - hamburger within viewport */
  .ekit-template-content-header .elementor-container {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 16px !important;
  }
  .ekit-template-content-header .elementor-column {
    width: auto !important;
    flex: 0 1 auto !important;
    max-width: none !important;
  }
  /* Logo column sizing now handled in section 21 below */
  /* Hamburger column: shrink to content */
  .ekit-template-content-header .elementor-element-112db804 {
    flex: 0 0 auto !important;
    width: auto !important;
  }
  .elementskit-menu-hamburger {
    position: relative !important;
    right: auto !important;
  }

  /* 6. MENU PANEL - use ElementsKit's native left-slide mechanism.
     Default: left:-100vw (off-screen). Active: left:0 (visible).
     CRITICAL: do NOT set left:auto here, that breaks the hide mechanism. */
  .elementskit-menu-offcanvas-elements {
    max-width: 85vw !important;
    width: 85vw !important;
    background: #ffffff !important;
    z-index: 99999 !important;
  }
  .elementskit-menu-offcanvas-elements.active {
    left: 0 !important;
  }
  .elementskit-menu-close {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    z-index: 100000 !important;
    cursor: pointer !important;
    font-size: 18px !important;
    padding: 8px 12px !important;
    background: transparent !important;
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
    color: #333 !important;
  }
  /* Overlay behind the menu panel */
  .elementskit-menu-overlay {
    display: none;
  }
  .elementskit-menu-overlay.active {
    display: block !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0,0,0,0.4) !important;
    z-index: 99998 !important;
  }

  /* 7. SCROLL TO TOP - inside viewport */
  .udz-totop {
    right: 12px !important;
    bottom: 16px !important;
    width: 44px !important;
    height: 44px !important;
  }
  .udz-totop svg {
    width: 44px !important;
    height: 22px !important;
  }

  /* 8. PORTFOLIO / BLOG GRID - full width tiles */
  .udz-tile,
  .udz-card {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    left: auto !important;
    transform: none !important;
  }
  /* Masonry/isotope grid - override absolute positioning */
  .qodef-grid.qodef-layout--masonry .qodef-grid-inner,
  .qodef-grid .qodef-grid-inner {
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    height: auto !important;
  }
  .qodef-grid .qodef-grid-inner .qodef-e {
    position: static !important;
    width: 100% !important;
    transform: none !important;
    margin-bottom: 20px !important;
  }

  /* 9. CONTACT FORM - full width centered */
  .udz-contact-widget {
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* 10. CTA + MAP - already handled by mob8, reinforce */
  .udz-cta-map-row {
    flex-direction: column !important;
    padding: 0 16px !important;
  }
  .udz-cta-map-row > .elementor-element {
    width: 100% !important;
    max-width: 100% !important;
    flex-basis: auto !important;
  }

  /* 11. TEXT READABILITY - clamp font sizes and max-widths */
  h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word !important;
    word-break: break-word !important;
  }
  .elementor-heading-title {
    max-width: 100% !important;
  }

  /* 12. IMAGES - never exceed container */
  img, video, iframe, svg, canvas {
    max-width: 100% !important;
    height: auto;
  }
  /* Hero images keep their fixed height */
  #slider-4-slide-7-layer-0 .udz-hero-slide img {
    height: 100% !important;
  }

  /* 13. SECTIONS WITH HARDCODED WIDTHS - override the theme 1100/1300/1400px */
  .qodef-content-grid-1400 .qodef-elementor-content-grid > .elementor-container,
  .qodef-content-grid-1300 .qodef-elementor-content-grid > .elementor-container,
  .qodef-content-grid-1100 .qodef-elementor-content-grid > .elementor-container,
  .qodef-elementor-content-grid > .elementor-container,
  [class*="qodef-content-grid"] .elementor-container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* 14. FOOTER MASTER - stack, center, fit, no transforms */
  .ekit-template-content-footer {
    overflow: hidden !important;
  }
  .ekit-template-content-footer .elementor-container {
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
  }
  .ekit-template-content-footer .elementor-column {
    width: 100% !important;
    flex: 0 0 100% !important;
    text-align: center !important;
  }
  .ekit-template-content-footer .elementor-widget-wrap {
    padding: 8px 16px !important;
    justify-content: center !important;
  }
  .ekit-template-content-footer .elementor-element.e-transform {
    transform: none !important;
  }
  .ekit-template-content-footer p,
  .ekit-template-content-footer a,
  .ekit-template-content-footer span,
  .ekit-template-content-footer li {
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    max-width: 100% !important;
  }
  .ekit-template-content-footer .udz-foot-contact,
  .ekit-template-content-footer .udz-foot-logo,
  .ekit-template-content-footer .elementskit-section-title-wraper,
  .ekit-template-content-footer .elementor-widget-text-editor,
  .ekit-template-content-footer .elementor-widget-text-editor * {
    text-align: center !important;
  }

  /* 15. AWARDS - kill the blank gap from empty absolute spacers */
  .elementor-element-228a8a2 .elementor-widget.elementor-absolute,
  .elementor-element-228a8a2 .elementor-widget.e-transform {
    position: static !important;
    transform: none !important;
  }
  /* Award images full width */
  .elementor-element-228a8a2 .elementor-inner-section .elementor-column {
    width: 100% !important;
    padding: 0 8px !important;
    margin-bottom: 16px !important;
  }

  /* 16. OUR SERVICES - fix the top gap and mid-section gap */
  [data-elementor-id] .elementor-section > .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget.elementor-absolute {
    position: static !important;
    height: auto !important;
    min-height: 0 !important;
  }

  /* 17. ABOUT US / ABOUT ME - image-beside-text override for stacked layout */
  .elementor-element-7b3e0a5 > .elementor-container {
    width: 100% !important;
    max-width: 100% !important;
  }
  .elementor-element-60503d6 {
    position: static !important;
    height: auto !important;
  }
  .elementor-element-60503d6 img {
    position: static !important;
    height: 300px !important;
    width: 100% !important;
  }

  /* 18. REVSLIDER - keep contained */
  #rev_slider_4_1_wrapper,
  .rs-module-wrap,
  .rs-module,
  rs-slides,
  rs-slide {
    max-width: 100% !important;
    overflow: hidden !important;
  }
  rs-layer {
    max-width: 100% !important;
    overflow-wrap: break-word !important;
  }

  /* 19. BLOG CARDS - stack full width */
  .udz-blog-listing {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
    padding: 0 16px !important;
  }
  .udz-card {
    width: 100% !important;
    flex: 0 0 100% !important;
  }

  /* 20. ELEMENTOR MOTION EFFECTS - disable the JS-driven motion on scroll */
  .elementor-motion-effects-element,
  .elementor-motion-effects-container,
  .elementor-motion-effects-layer {
    transform: none !important;
  }

  /* 21. HEADER LOGOS - show monogram + wordmark side by side on mobile.
     Monogram (column 33dfa08e) was hidden via elementor-hidden-tablet/phone.
     Wordmark (column 7b927424) stays visible. Both flex side by side,
     hamburger pushed to the right. */
  /* Monogram: square icon, fixed size */
  .ekit-template-content-header .elementor-element-33dfa08e {
    display: block !important;
    flex: 0 0 80px !important;
    width: 80px !important;
    order: -1 !important;
    padding: 0 !important;
  }
  .ekit-template-content-header .elementor-element-33dfa08e img {
    width: 80px !important;
    height: 80px !important;
    object-fit: contain !important;
  }
  /* Wordmark: crop whitespace with scale+overflow so text fills the header.
     The original image (1448x184) has ~30% padding on each side. Scale up
     to eliminate that whitespace and make the text visually bigger. */
  .ekit-template-content-header .elementor-element-7b927424 {
    display: block !important;
    flex: 1 1 0% !important;
    margin-right: auto !important;
    padding: 0 !important;
    max-width: 90% !important;
    overflow: hidden !important;
  }
  .ekit-template-content-header .elementor-element-7b927424 .elementor-widget-container {
    overflow: hidden !important;
  }
  .ekit-template-content-header .elementor-element-7b927424 img {
    width: 170% !important;
    height: auto !important;
    max-width: none !important;
    margin-left: -35% !important;
    object-fit: contain !important;
  }

  /* 22. MOBILE HERO - hide RevSlider, collapse ALL parent containers,
     show clean HTML mobile hero instead */
  .wp-block-themepunch-revslider {
    display: none !important;
  }
  /* Collapse the Elementor section + every container down to the widget */
  .elementor-element-24c185d,
  .elementor-element-24c185d > .elementor-container,
  .elementor-element-24c185d .elementor-element-40ad124,
  .elementor-element-24c185d .elementor-widget-wrap,
  .elementor-element-24c185d .elementor-element-8dd7eef,
  .elementor-element-24c185d .elementor-widget-container {
    min-height: 0 !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .udz-mobile-hero {
    display: block !important;
  }
  .udz-mobile-hero__content {
    padding: 24px 20px 40px;
  }
  .udz-mobile-hero__image {
    width: 100%;
    height: 260px;
    overflow: hidden;
    position: relative;
  }
  .udz-mobile-hero__image .udz-hero-slider {
    position: relative;
    width: 100%;
    height: 260px;
  }
  .udz-mobile-hero__image .udz-hero-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 260px;
    opacity: 0;
    transition: opacity 1.2s ease-in-out;
  }
  .udz-mobile-hero__image .udz-hero-slide.udz-hero-active {
    opacity: 1;
  }
  .udz-mobile-hero__image .udz-hero-slide img {
    width: 100%;
    height: 260px;
    object-fit: cover;
    display: block;
  }
  .udz-mobile-hero__subtitle {
    font-family: Montserrat, sans-serif;
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #111;
    margin: 0 0 14px 0;
  }
  .udz-mobile-hero__heading {
    font-family: Montserrat, sans-serif;
    font-size: 22px;
    font-weight: 400;
    line-height: 1.35;
    color: #111;
    margin: 0 0 18px 0;
  }
  .udz-mobile-hero__text {
    font-family: Roboto, sans-serif;
    font-size: 13px;
    line-height: 1.6;
    color: #444;
    margin: 0 0 60px 0 !important;
  }
  /* 23. ABOUT US button in mobile hero - match Awards button spacing */
  .udz-mobile-hero .qodef-button {
    margin-top: 10px !important;
  }

  /* 24. OUR SERVICES page - stack columns, full-width images, proper spacing */
  /* Hide fixed decorative divider and rotated social links on mobile */
  .elementor-3357 .elementor-fixed,
  .elementor-3357 .e-transform {
    display: none !important;
  }
  /* Stack the 50/50 columns vertically */
  .elementor-3357 .elementor-section > .elementor-container {
    flex-direction: column !important;
  }
  .elementor-3357 .elementor-col-50 {
    width: 100% !important;
  }
  /* Interior Design section: image column above text on mobile */
  .elementor-element-d2409d1 .elementor-element-8cef007 {
    order: -1 !important;
  }
  /* Full-width images */
  .elementor-3357 .qodef-single-image img {
    width: 100% !important;
    height: auto !important;
  }
  /* Fix text widgets that have constrained width */
  .elementor-3357 .elementor-widget__width-initial {
    width: 100% !important;
    max-width: 100% !important;
  }
  /* Spacing between service sections */
  .elementor-3357 .elementor-top-section {
    margin-bottom: 30px !important;
    padding: 0 15px !important;
  }
  /* Text size fix for mobile */
  .elementor-3357 .qodef-m-text {
    font-size: 14px !important;
    line-height: 1.7 !important;
  }
  .elementor-3357 .qodef-m-title {
    font-size: 26px !important;
    margin-bottom: 15px !important;
  }

  /* 25. REACH US (contact-us-2) page - stack columns, fix layout */
  /* Hide fixed decorative divider and social links on mobile (cause white space) */
  .elementor-8270 + .elementor-element-39df276,
  .elementor-element-39df276,
  .elementor-element-396360b {
    display: none !important;
  }
  /* Stack the 50/50 columns vertically */
  .elementor-2630 .elementor-section > .elementor-container {
    flex-direction: column !important;
  }
  .elementor-2630 .elementor-col-50,
  .elementor-2630 .elementor-col-100 {
    width: 100% !important;
  }
  /* Reset e-transform on image to prevent offset */
  .elementor-2630 .e-transform {
    transform: none !important;
  }
  /* Fix widget width constraints */
  .elementor-2630 .elementor-widget__width-initial {
    width: 100% !important;
    max-width: 100% !important;
  }
  /* Full-width images */
  .elementor-2630 .qodef-single-image img,
  .elementor-2630 .elementor-widget-image img {
    width: 100% !important;
    height: auto !important;
  }
  /* Remove excess top padding on main content (Elementor sets 90px on mobile) */
  .elementor-2630 .elementor-element-7b3e0a5 {
    padding-top: 15px !important;
    padding-bottom: 30px !important;
    margin-top: 0 !important;
  }
  /* Kill negative margin on RING US section that pulls it over the image */
  .elementor-2630 .elementor-element-0cf6ff3 {
    margin-top: 10px !important;
  }
  /* Kill negative margin on phone number widget container */
  .elementor-2630 .elementor-element-650a632 > .elementor-widget-container {
    margin-top: 0 !important;
  }
  /* Kill negative margin on mail section email widget */
  .elementor-2630 .elementor-element-c054690 > .elementor-widget-container {
    margin-top: 0 !important;
  }
  /* Remove 26% left padding from contact column on mobile */
  .elementor-2630 .elementor-element-9c83512 > .elementor-element-populated {
    padding: 0 !important;
    margin: 10px 0 0 0 !important;
  }
  /* Remove right padding from inner column */
  .elementor-2630 .elementor-element-1f51092 > .elementor-element-populated,
  .elementor-2630 .elementor-element-85ee1df > .elementor-element-populated {
    padding: 0 !important;
  }
  /* Spacing for contact info sections */
  .elementor-2630 .elementor-inner-section {
    margin-bottom: 20px !important;
  }
  /* CTA + map row: stack properly, full width */
  .udz-cta-map-row {
    padding: 0 15px !important;
  }
  .udz-cta-map-row .elementor-col-100 {
    width: 100% !important;
  }
  .udz-cta-map-row .elementor-widget__width-auto {
    width: 100% !important;
  }
  /* Map iframe full width */
  .elementor-2630 .elementor-custom-embed iframe {
    width: 100% !important;
  }
  /* Contact form full width + prevent overlap */
  .udz-contact-widget {
    width: 100% !important;
    margin-top: 0 !important;
    clear: both !important;
  }
  /* Mobile office photo: Frame as an elegant 220px architectural banner */
  .elementor-2630 .elementor-element-27664ef {
    display: block !important;
    max-height: 220px !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    margin-bottom: 20px !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.08) !important;
  }
  .elementor-2630 .elementor-element-27664ef img {
    width: 100% !important;
    height: 220px !important;
    object-fit: cover !important;
    object-position: center 35% !important;
    display: block !important;
    border-radius: 14px !important;
  }
}

/* ============================================
   FIX v=mob40 - portfolio video slide button placement
   The video element filled the whole slide box, so the picture letterboxed in
   the middle while the native play button and control bar attached to the box
   edges, floating over empty background (looked misplaced). Make the element
   hug the actual video picture in both orientations so the controls sit on the
   picture itself. Scoped ONLY to video slides; image slides are untouched.
   ============================================ */
.udz-swiper .swiper-slide.udz-slide--video{
  display:flex !important; align-items:center !important; justify-content:center !important;
}
.udz-swiper .swiper-slide.udz-slide--video video{
  width:auto !important; height:auto !important;
  max-width:100% !important; max-height:100% !important;
  object-fit:contain !important; background:#000 !important;
}
/* keep the slider arrows above the video but never over its control bar */
.udz-swiper .swiper-button-next, .udz-swiper .swiper-button-prev{ z-index:11 !important; }

/* ============================================
   FIX v=mob41 - mobile footer social bar: desktop-style hover
   Same mechanic as the desktop rail (lines 231-249): on hover the text label
   fades and shrinks while the brand SVG logo scales in, centered on the link,
   in the network's brand color. No rotation here because this bar is
   horizontal (the desktop rail carries +90deg only to cancel its own -90deg).
   Resting look (gold uppercase labels) is unchanged.
   ============================================ */
@media (max-width:1024px){
  .udz-mobile-social a{ position:relative !important; display:inline-block !important; }
  .udz-mobile-social a .udz-soc-label{ display:inline-block !important; transition:opacity .25s ease, transform .25s ease !important; }
  .udz-mobile-social a .udz-soc-ic{
    position:absolute !important; top:50% !important; left:50% !important; line-height:0 !important;
    opacity:0 !important; pointer-events:none !important;
    transform:translate(-50%,-50%) scale(.6) !important;
    transition:opacity .25s ease, transform .25s ease !important;
  }
  .udz-mobile-social a .udz-soc-ic svg{ width:19px !important; height:19px !important; display:block !important; }
  .udz-mobile-social a:hover .udz-soc-label{ opacity:0 !important; transform:scale(.55) !important; }
  .udz-mobile-social a:hover .udz-soc-ic{ opacity:1 !important; transform:translate(-50%,-50%) scale(1.18) !important; }
  .udz-mobile-social a[href*="instagram"]:hover{ color:#E1306C !important; }
  .udz-mobile-social a[href*="facebook"]:hover{ color:#1877F2 !important; }
  .udz-mobile-social a[href*="twitter"]:hover{ color:#1DA1F2 !important; }
  .udz-mobile-social a[href*="linkedin"]:hover{ color:#0A66C2 !important; }
  .udz-mobile-social a[href*="pin.it"]:hover,
  .udz-mobile-social a[href*="pinterest"]:hover{ color:#E60023 !important; }
  .udz-mobile-social a[href*="wa.me"]:hover,
  .udz-mobile-social a[href*="whatsapp"]:hover{ color:#25D366 !important; }
  .udz-mobile-social a[href*="youtube"]:hover{ color:#FF0000 !important; }
}

/* ============================================
   FIX v=mob42 - desktop social rail: pitch black text labels
   The per-network rules (instagram/facebook/...) color the whole <a>, so the
   text labels inherited each brand color. Override ONLY the label text to black.
   The hover SVG logos use currentColor from the <a>, so they KEEP their brand
   colors (logos untouched, exactly as requested).
   ============================================ */
.elementor-element-634e2fe a .udz-soc-label{ color:#000000 !important; }

/* ============================================
   FIX v=mob45 - restore the Unitz Dezignz brand logo lockup in the hero band (hi-res, larger)
   The original site showed the logo-2a wordmark here (ARCHITECTURE.INTERIOR.
   LANDSCAPE tagline + gold "Unitz" / dark "Dezignz"); the mirror had replaced it
   with plain white UNITZ / DEZIGNZ text. Restore the original: lighten the house
   so the dark logo reads, hide the DEZIGNZ text widget, and render the logo image
   in place of the UNITZ text widget. Client wants exactly like the original.
   ============================================ */
/* light wash over the house so the dark logo is readable (band overlay was opacity:0) */
.elementor-element-dde9968 > .elementor-element-populated > .elementor-background-overlay{
  opacity:1 !important; background-color:rgba(255,255,255,0.5) !important;
}
/* hide the leftover DEZIGNZ text widget */
.elementor-element-e62a496{ display:none !important; }
/* centre the lockup */
.elementor-element-dde9968 > .elementor-widget-wrap{ text-align:center !important; }
/* render the brand logo in place of the UNITZ text widget */
.elementor-element-acb653c .qodef-custom-font-588{
  display:block !important; margin:0 auto !important;
  width:min(1050px, 80vw) !important; aspect-ratio:1448 / 184 !important;
  font-size:0 !important; line-height:0 !important; letter-spacing:0 !important; color:transparent !important;
  background:url("/wp-content/uploads/2021/11/logo-2a-hd.webp") center center / contain no-repeat !important;
}

/* ============================================
   FIX v=mob48 - footer: monogram stacked exactly above a bigger wordmark, at the
   extreme left with a gap; shorter footer. Uses trimmed (flush-left) logo images
   so the two align exactly, and runs the footer full width so the logo reaches
   the left with a small gap.
   ============================================ */
.ekit-template-content-footer .udz-foot-monogram{ width:70px !important; max-width:70px !important; }
.ekit-template-content-footer .udz-foot-wordmark{ width:260px !important; max-width:260px !important; }
/* shorter footer */
.ekit-template-content-footer .elementor-element-253e1f19{ padding-top:30px !important; padding-bottom:18px !important; }
.ekit-template-content-footer .elementor-element-4bda64ea{ margin-bottom:0 !important; padding:8px 0 12px 0 !important; }
.ekit-template-content-footer .udz-foot-contact p{ margin:0 0 8px !important; line-height:1.55 !important; }
@media (min-width:1025px){
  /* full width so the logo reaches the extreme left, with a small left gap */
  .ekit-template-content-footer .elementor-element-253e1f19 > .elementor-container{ max-width:100% !important; width:100% !important; padding-left:clamp(34px,4.5vw,90px) !important; padding-right:clamp(24px,3vw,60px) !important; }
  /* logo: reset the entrance motion shift; monogram exactly above wordmark, hard-left */
  .ekit-template-content-footer .elementor-element-1c13e59{ transform:none !important; --e-transform-translateX:0px !important; --e-transform-translateY:0px !important; }
  .ekit-template-content-footer .elementor-element-5e0a8534 > .elementor-widget-wrap{ align-items:flex-start !important; }
  .ekit-template-content-footer .udz-foot-logo{ align-items:flex-start !important; text-align:left !important; gap:12px !important; margin:0 !important; }
  .ekit-template-content-footer .udz-foot-logo img{ margin:0 !important; }
  .ekit-template-content-footer .udz-foot-contact{ text-align:left !important; }
}

/* ============================================
   FIX v=mob49 - compact footer (desktop): emails beside phone/address, nav in
   horizontal rows instead of a tall vertical list, so the footer is shorter.
   ============================================ */
@media (min-width:1025px){
  /* contact: phone+address on the left, the two emails beside them (next to phone) */
  .ekit-template-content-footer .udz-foot-contact{
    display:grid !important; grid-template-columns:auto auto !important;
    column-gap:54px !important; row-gap:6px !important; align-items:start !important; justify-content:start !important;
  }
  .ekit-template-content-footer .udz-foot-contact > p:nth-child(1){ grid-column:1 !important; grid-row:1 !important; }  /* Phone */
  .ekit-template-content-footer .udz-foot-contact > p:nth-child(2){ grid-column:1 !important; grid-row:2 !important; max-width:280px !important; }  /* Address */
  .ekit-template-content-footer .udz-foot-contact > p:nth-child(3){ grid-column:2 !important; grid-row:1 !important; }  /* Email 1 */
  .ekit-template-content-footer .udz-foot-contact > p:nth-child(4){ grid-column:2 !important; grid-row:2 !important; }  /* Email 2 */
  /* nav: horizontal wrapping rows instead of 5 stacked links */
  .ekit-template-content-footer .elementor-element-66c16fe3 > .elementor-widget-container{
    display:flex !important; flex-wrap:wrap !important; gap:10px 28px !important; align-content:flex-start !important;
  }
  .ekit-template-content-footer .elementor-element-66c16fe3 > .elementor-widget-container > p{ margin:0 !important; }
}

/* ============================================
   FIX v=mob50 - footer: pull the contact + nav in close to the logo (cluster left)
   so the footer no longer spreads across the full width. Fixed-width logo column,
   controlled gaps, everything left-justified. Keep phone numbers on one line and
   give the address room so it stops wrapping into a thin strip.
   ============================================ */
@media (min-width:1025px){
  .ekit-template-content-footer .elementor-element-253e1f19 > .elementor-container{
    display:flex !important; flex-wrap:nowrap !important; justify-content:flex-start !important;
    align-items:flex-start !important; column-gap:clamp(34px,4vw,80px) !important;
  }
  .ekit-template-content-footer .elementor-element-5e0a8534{ width:auto !important; flex:0 0 300px !important; max-width:300px !important; }
  .ekit-template-content-footer .elementor-element-780c7774{ width:auto !important; flex:0 0 auto !important; }
  .ekit-template-content-footer .elementor-element-11a03f10{ width:auto !important; flex:0 1 auto !important; }
  /* phone stays on one line; address gets room */
  .ekit-template-content-footer .udz-foot-phones a{ white-space:nowrap !important; }
  .ekit-template-content-footer .udz-foot-contact > p:nth-child(2){ max-width:300px !important; }
  .ekit-template-content-footer .udz-foot-contact{ column-gap:46px !important; }
}

/* ============================================
   FIX v=mob51 - 4-column footer per client wireframe:
   [Logo] [Phone + Address] [Emails + About Us/The Architect] [Portfolio/Blog/Reach]
   Emails were moved out of the contact block into the links column, and the nav
   split into two stacks.
   ============================================ */
@media (min-width:1025px){
  /* contact is now just Phone over Address */
  .ekit-template-content-footer .udz-foot-contact{ display:block !important; }
  /* nav column = two stacks side by side (emails+about/architect | portfolio/blog/reach) */
  .ekit-template-content-footer .udz-foot-links{ display:flex !important; flex-wrap:nowrap !important; gap:clamp(36px,3.5vw,74px) !important; align-items:flex-start !important; }
  .ekit-template-content-footer .udz-foot-links-col{ display:flex !important; flex-direction:column !important; }
  .ekit-template-content-footer .udz-foot-links-col p{ margin:0 0 9px !important; line-height:1.55 !important; }
  .ekit-template-content-footer .udz-foot-links-col .udz-foot-eml{ white-space:nowrap !important; }
  /* gap between the emails and the nav links beneath them */
  .ekit-template-content-footer .udz-foot-links-col .udz-foot-eml + p:not(.udz-foot-eml){ margin-top:16px !important; }
}

/* ============================================
   FIX v=mob52 - footer: tighten the gaps so all four groups sit close together and
   the Portfolio/Blog/Reach column stays fully in view (it was pushed to the far
   right into the social rail). Fixed-width columns, clustered hard-left. Uses the
   Elementor doc selector so it deterministically wins over the 35/34/30% widths.
   ============================================ */
@media (min-width:1025px){
  .ekit-template-content-footer .elementor-9506 .elementor-element-253e1f19 > .elementor-container{
    justify-content:flex-start !important; align-items:flex-start !important; flex-wrap:nowrap !important;
    column-gap:clamp(30px,3vw,58px) !important;
  }
  .ekit-template-content-footer .elementor-9506 .elementor-element.elementor-element-5e0a8534{ width:300px !important; max-width:300px !important; flex:0 0 300px !important; }
  .ekit-template-content-footer .elementor-9506 .elementor-element.elementor-element-780c7774{ width:300px !important; max-width:300px !important; flex:0 0 300px !important; }
  .ekit-template-content-footer .elementor-9506 .elementor-element.elementor-element-11a03f10{ width:480px !important; max-width:480px !important; flex:0 0 480px !important; }
  .ekit-template-content-footer .udz-foot-links{ gap:clamp(26px,2.4vw,48px) !important; }
}

/* ============================================
   FIX v=mob53 - footer: pull the email column closer to the phone/address column
   (narrower contact column + smaller gaps) so there is no big empty space between
   the phone-number row and the email row.
   ============================================ */
@media (min-width:1025px){
  .ekit-template-content-footer .elementor-9506 .elementor-element-253e1f19 > .elementor-container{ column-gap:28px !important; }
  .ekit-template-content-footer .elementor-9506 .elementor-element.elementor-element-5e0a8534{ width:270px !important; max-width:270px !important; flex:0 0 270px !important; }
  .ekit-template-content-footer .elementor-9506 .elementor-element.elementor-element-780c7774{ width:210px !important; max-width:210px !important; flex:0 0 210px !important; }
  .ekit-template-content-footer .udz-foot-contact > p:nth-child(2){ max-width:200px !important; }
  .ekit-template-content-footer .udz-foot-links{ gap:clamp(22px,2vw,40px) !important; }
}

/* ============================================
   FIX v=mob55 - reduce three homepage section headings to ~70% size (client):
   "Our clients say." (657ebee), "Follow our projects" (b143538),
   "Watch Our Promo" (udz-promo-heading). Base was 55px -> ~38px (70%), responsive.
   ============================================ */
.elementor-element-657ebee .qodef-m-title,
.elementor-element-b143538 .qodef-m-title,
.udz-promo-heading{
  font-size: clamp(28px, 3.3vw, 38px) !important;
  line-height: 1.25 !important;
}

/* ============================================
   FIX v=mob56 - reduce the "Watch Our Promo" video to 80% (was 360px -> 288px).
   Aspect ratio is fixed via padding, so height scales down proportionally.
   ============================================ */
.elementor-element-c0b524a .udz-video-block{ width:288px !important; }
.elementor-element-c0b524a .udz-video-block .udz-yt-frame{ max-width:288px !important; }

/* ============================================
   FIX v=mob57 - footer contact: address in two lines, equal row gaps.
   Widen the contact column (was too narrow -> 4-line address), even out the gaps
   between the phone label, the two numbers and the address. Still fits the page.
   ============================================ */
@media (min-width:1025px){
  .ekit-template-content-footer .elementor-9506 .elementor-element.elementor-element-780c7774{ width:320px !important; max-width:320px !important; flex:0 0 320px !important; }
  .ekit-template-content-footer .udz-foot-contact{ line-height:1.5 !important; }
  .ekit-template-content-footer .udz-foot-contact > p{ margin:0 !important; }
  .ekit-template-content-footer .udz-foot-phones a{ display:inline-block !important; margin:11px 0 0 0 !important; }
  .ekit-template-content-footer .udz-foot-contact > p:nth-child(2){ max-width:300px !important; margin:11px 0 0 0 !important; line-height:1.55 !important; }
}

/* ============================================
   FIX v=mob58 - footer: reduce the gap between the phone/address column and the
   email column. Narrow the contact column to just fit the 2-line address and
   tighten the container gap.
   ============================================ */
@media (min-width:1025px){
  .ekit-template-content-footer .elementor-9506 .elementor-element-253e1f19 > .elementor-container{ column-gap:16px !important; }
  .ekit-template-content-footer .elementor-9506 .elementor-element.elementor-element-780c7774{ width:288px !important; max-width:288px !important; flex:0 0 288px !important; }
  .ekit-template-content-footer .udz-foot-contact > p:nth-child(2){ max-width:280px !important; }
}

/* ============================================
   FIX v=mob59 - mobile: the "Unitz Dezignz" hero band (dde9968) used
   background-attachment:fixed on its house image. Phones render fixed backgrounds
   sized to the whole viewport, so only a zoomed strip shows = broken look. Switch
   to scroll so the image covers the band correctly. Also give the band a sensible
   min-height so the house + logo read well on a phone.
   ============================================ */
@media (max-width:1024px){
  .elementor-8001 .elementor-element.elementor-element-dde9968 > .elementor-widget-wrap,
  .elementor-8001 .elementor-element.elementor-element-dde9968:not(.elementor-motion-effects-element-type-background) > .elementor-widget-wrap{
    background-attachment:scroll !important;
    background-size:cover !important;
    background-position:center center !important;
    min-height:220px !important;
  }
}

/* ============================================
   FIX v=mob60 - portfolio pages: remove the big project heading visually (kept
   off-screen for SEO, it is the page h1) and make the PROJECT meta row the
   standout: slightly bigger, semibold, gold underline accent.
   ============================================ */
.udz-project-title{
  position:absolute !important; width:1px !important; height:1px !important;
  padding:0 !important; margin:-1px !important; overflow:hidden !important;
  clip:rect(0,0,0,0) !important; white-space:nowrap !important; border:0 !important;
}
.udz-meta p:first-child .label{ font-size:13px !important; }
.udz-meta p:first-child .value{
  font-size:19px !important; font-weight:600 !important; color:#2b2b2b !important;
  border-bottom:2px solid var(--udz-gold, #b5975a) !important; padding-bottom:3px !important;
}
.udz-meta p:first-child{ margin-bottom:16px !important; }

/* ============================================
   FIX v=mob61 - blog project videos (moved from the portfolio sliders).
   Sized to their own aspect ratio, capped so portrait clips do not tower,
   centered in the post body like the images.
   ============================================ */
.udz-blog-video{
  display:block !important; margin:22px auto !important;
  max-width:100% !important; max-height:70vh !important;
  background:#000 !important; border-radius:4px !important;
}

/* ============================================
   FIX v=mob62 - blog videos: element hugs the actual picture (no black side
   bars on portrait clips). Width follows the video aspect within the caps.
   ============================================ */
.udz-blog-video{
  width:auto !important; height:auto !important;
  max-width:100% !important; max-height:70vh !important;
  background:transparent !important;
}

/* ============================================
   FIX v=mob63 - blog videos: same size/footprint as the post images. Full body
   width in a landscape frame like the photos; the footage fills the frame
   (object-fit:cover). Fullscreen still plays the complete clip.
   ============================================ */
.udz-blog-video{
  display:block !important; width:100% !important; height:auto !important;
  aspect-ratio:16 / 10 !important; max-height:none !important;
  object-fit:cover !important; object-position:center !important;
  margin:26px auto !important; background:#000 !important; border-radius:0 !important;
}

/* ============================================
   FIX v=mob64 - blog video blur-fill frame: full-width block like the images,
   entire footage visible (contained), sides filled by a blurred copy of the
   same clip instead of black bars or cropping.
   ============================================ */
.udz-vframe{
  position:relative !important; width:100% !important; aspect-ratio:16 / 10 !important;
  overflow:hidden !important; margin:26px auto !important; background:#111 !important;
}
.udz-vframe .udz-vback{
  position:absolute !important; top:0 !important; left:0 !important;
  width:100% !important; height:100% !important; object-fit:cover !important;
  filter:blur(26px) brightness(.7) !important; transform:scale(1.14) !important;
  pointer-events:none !important;
}
.udz-vframe .udz-blog-video{
  position:absolute !important; top:0 !important; left:0 !important;
  width:100% !important; height:100% !important; aspect-ratio:auto !important;
  object-fit:contain !important; margin:0 !important; background:transparent !important;
}

/* ============================================
   FIX v=mob65 - blog videos: identical treatment to the post images. Full body
   width, natural height from the clip's own aspect (portrait = tall block),
   whole footage visible, nothing added at the sides. Blur frame removed.
   ============================================ */
.udz-vframe{ position:static !important; aspect-ratio:auto !important; height:auto !important; background:transparent !important; overflow:visible !important; margin:0 !important; }
.udz-vback{ display:none !important; }
.udz-blog-video{
  position:static !important; display:block !important;
  width:100% !important; height:auto !important; aspect-ratio:auto !important;
  max-height:none !important; object-fit:initial !important;
  margin:26px auto !important; background:#000 !important; border-radius:0 !important;
}

/* ============================================
   FIX v=mob66 - homepage hero typography must match the site sections
   (client: hero heading/paragraph font+size must be uniform with the
   "We blend a curve..." section). The RevSlider layers force inline
   Montserrat/Roboto with their own sizes; the theme sections use
   Questrial headings (h5: 27px/1.29) and Roboto 300 20px/1.65 body.
   Only the headline + intro paragraph layers are retyped; the tagline
   and buttons keep the theme's own Montserrat treatment.
   ============================================ */
/* headline - desktop/notebook layer (h4 inside) and tablet/mobile raw-text layer */
rs-layer#slider-4-slide-7-layer-1,
#slider-4-slide-7-layer-1 .qodef-m-title,
rs-layer#slider-4-slide-7-layer-3{
  font-family:'Questrial',sans-serif !important;
  font-weight:400 !important;
  color:#111 !important;
  letter-spacing:.035em !important;
}
/* headline size on desktop: exactly the section-title (theme h5) metrics */
@media (min-width:1025px){
  #slider-4-slide-7-layer-1 .qodef-m-title{
    font-size:24px !important;
    line-height:1.35 !important;
  }
}
/* intro paragraph - match the section body text (Roboto 300 19px/1.7 #121212) */
rs-layer#slider-4-slide-7-layer-7,
#slider-4-slide-7-layer-7 .qodef-m-text{
  font-family:'Roboto',sans-serif !important;
  font-weight:300 !important;
  color:#121212 !important;
  letter-spacing:.01em !important;
}
@media (min-width:1025px){
  #slider-4-slide-7-layer-7 .qodef-m-text{
    font-size:19px !important;
    line-height:1.7 !important;
  }
}

/* ============================================
   FIX v=mob67 - mobile: the "We blend a curve..." section must read EXACTLY
   like the hero text (client ref: hero is the standard). The theme kept the
   section at desktop sizes on phones (27px title / 20px body) while the hero
   renders ~22px / ~14px. Pin BOTH blocks to the same fixed sizes on mobile so
   they render identically on any phone. Desktop is untouched (already equal).
   ============================================ */
@media (max-width:600px){
  /* section below the hero: mirror the hero text */
  .elementor-element-642f2ee .qodef-m-title{
    font-size:22px !important;
    line-height:1.35em !important;
  }
  .elementor-element-642f2ee .qodef-m-text{
    font-size:14px !important;
    line-height:1.65em !important;
  }
  /* hero: pin the RevSlider mobile sizes to the same fixed values
     (kills RS per-device scaling variance; visually same as today) */
  rs-layer#slider-4-slide-7-layer-3{
    font-size:22px !important;
    line-height:1.35em !important;
  }
  #slider-4-slide-7-layer-7 .qodef-m-text{
    font-size:14px !important;
    line-height:1.65em !important;
  }
}

/* ============================================
   FIX v=mob68 - replace the expired Trustindex trial widget with a permanent,
   self-hosted Google-reviews slider (5.0 stars, 107 reviews, real reviews).
   No third party, never expires. Slideable: arrows + native swipe + auto-rotate.
   'Review us on Google' / 'Read all reviews' link to the real Google page.
   ============================================ */
/* the old clamp clipped vertically too; let the section breathe, the viewport
   clips horizontally on its own now. */
.elementor-element-f6dd0ad,
.elementor-element-f6dd0ad > .elementor-widget-container{ overflow:visible !important; }
.udz-reviews{ max-width:1140px; margin:6px auto 0; padding:0 20px; box-sizing:border-box; font-family:'Roboto',sans-serif; color:#2b2b2b; }
.udz-reviews *{ box-sizing:border-box; }
.udz-reviews-head{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; justify-content:center; margin-bottom:26px; }
.udz-reviews-glogo svg{ display:block; }
.udz-reviews-sum{ text-align:left; }
.udz-reviews-toprow{ display:flex; align-items:center; gap:10px; }
.udz-reviews-score{ font-size:30px; font-weight:700; color:#1a1a1a; line-height:1; }
.udz-reviews-stars{ color:#fbbc05; font-size:23px; letter-spacing:2px; line-height:1; }
.udz-reviews-count{ font-size:14px; color:#5f6368; margin-top:3px; }
.udz-reviews-count strong{ font-weight:600; color:#2b2b2b; }
.udz-reviews-cta{ margin-left:6px; display:inline-block; padding:11px 22px; background:#1a1a1a; color:#fff !important; font-size:13px; letter-spacing:1.5px; text-transform:uppercase; text-decoration:none; border-radius:2px; transition:background .2s; }
.udz-reviews-cta:hover{ background:#b5975a; }
.udz-reviews-slider{ position:relative; display:flex; align-items:center; max-width:100%; }
/* the viewport is the scroll container AND the grid; grid-auto-columns resolves
   against the container's definite width (not intrinsic content), so cards size
   to the viewport reliably. The track just passes its children through. */
.udz-reviews-viewport{ overflow-x:auto; display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - 60px) / 4); gap:20px; align-items:stretch; scroll-snap-type:x mandatory; scroll-behavior:smooth; -ms-overflow-style:none; scrollbar-width:none; width:100%; min-width:0; flex:1 1 auto; padding:8px 2px; }
.udz-reviews-viewport::-webkit-scrollbar{ display:none; }
.udz-reviews-track{ display:contents; }
.udz-review{ scroll-snap-align:start; background:#fff; border:1px solid #ececec; border-radius:8px; padding:22px 22px 22px; box-shadow:0 2px 14px rgba(0,0,0,.05); display:flex; flex-direction:column; }
.udz-review-head{ display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.udz-review-ava{ flex:0 0 44px; width:44px; height:44px; border-radius:50%; color:#fff; font-size:20px; font-weight:500; display:flex; align-items:center; justify-content:center; }
.udz-review-id{ display:flex; flex-direction:column; flex:1 1 auto; min-width:0; }
.udz-review-name{ font-size:15px; font-weight:600; color:#1a1a1a; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.udz-review-date{ font-size:12px; color:#70757a; }
.udz-review-gmark svg{ display:block; }
.udz-review-stars{ color:#fbbc05; font-size:15px; letter-spacing:1px; margin-bottom:10px; }
.udz-review-text{ font-size:14px; line-height:1.6; color:#3c4043; margin:0; font-weight:300; overflow:hidden; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; }
.udz-reviews-arrow{ flex:0 0 40px; width:40px; height:40px; border-radius:50%; border:1px solid #e0e0e0; background:#fff; color:#5f6368; font-size:22px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 8px rgba(0,0,0,.08); transition:background .2s,color .2s,border-color .2s; z-index:2; padding:0; }
.udz-reviews-arrow:hover{ background:#b5975a; color:#fff; border-color:#b5975a; }
.udz-reviews-prev{ margin-right:14px; }
.udz-reviews-next{ margin-left:14px; }
.udz-reviews-foot{ text-align:center; margin-top:22px; }
.udz-reviews-foot a{ font-size:13px; letter-spacing:.5px; color:#5f6368 !important; text-decoration:none; border-bottom:1px solid #d0d0d0; padding-bottom:2px; }
.udz-reviews-foot a:hover{ color:#b5975a !important; border-color:#b5975a; }
@media (max-width:1024px){
  .udz-reviews-viewport{ grid-auto-columns:calc((100% - 20px) / 2); }
}
@media (max-width:600px){
  .udz-reviews{ padding:0 12px; }
  .udz-reviews-head{ gap:10px; margin-bottom:20px; }
  .udz-reviews-cta{ margin-left:0; max-width:100%; }
  /* block layout so the scroll viewport takes a definite width and flex-basis:100%
     resolves correctly; arrows off, native swipe + auto-rotate drive it */
  .udz-reviews-slider{ display:block; }
  .udz-reviews-arrow{ display:none; }
  .udz-reviews-viewport{ grid-auto-columns:100%; align-items:start; }
  .udz-review{ min-height:0; }
  .udz-review-text{ -webkit-line-clamp:9; }
}

/* ============================================
   FIX v=mob72 - reviews polish (client): (1) kill the big gap above the
   "Our clients say" section, (2) widen the slider past the 1140 column so it
   fills the side whitespace (centered on the viewport, kept clear of the social
   rail via the 100vw-200px cap), (3) bigger, more readable uniform tiles.
   ============================================ */
.elementor-element-84dfc08{ margin-top:42px !important; }
/* widen and center on the viewport, breaking out of the 1140 content column */
.udz-reviews{ width:min(1500px, calc(100vw - 200px)) !important; max-width:none !important; position:relative; left:50%; transform:translateX(-50%); margin:0; }
/* bigger tiles + more readable text (still uniform height via align-items:stretch) */
.udz-review{ padding:26px 26px 26px; }
.udz-review-name{ font-size:16px; }
.udz-review-date{ font-size:13px; }
.udz-review-stars{ font-size:16px; margin-bottom:12px; }
.udz-review-text{ font-size:15px; line-height:1.62; -webkit-line-clamp:6; }
@media (max-width:600px){
  /* on phones keep it within the screen (no viewport break-out) */
  .udz-reviews{ width:auto !important; max-width:none !important; left:auto; transform:none; }
  .udz-review-text{ -webkit-line-clamp:12; }
}

/* ============================================
   FIX v=mob73 - reviews section spacing/geometry (client):
   (1) the white gap above "Our clients say" was a STACK of margins:
       previous section f5e0e4a margin-bottom 111px + section 84dfc08
       margin-top + 45px under the heading. Collapse all three.
   (2) shift the review row left so it sits centered between the page's left
       edge and the social-rail divider (it was hugging the rail).
   (3) size the boxes down a touch (1500 -> 1360 max).
   ============================================ */
.elementor-element-f5e0e4a{ margin-bottom:36px !important; }
.elementor-element-84dfc08{ margin-top:0 !important; }
.elementor-element-657ebee > .elementor-widget-container{ margin-bottom:24px !important; }
.udz-reviews{ width:min(1360px, calc(100vw - 260px)) !important; }
@media (min-width:1025px){
  /* center within the content area left of the ~190px social rail */
  .udz-reviews{ transform:translateX(calc(-50% - 90px)); }
}

/* ============================================
   FIX v=mob74 - align the "Our clients say." heading with the review block:
   the block is shifted 90px left of the social rail, but the heading stayed
   page-centered, putting them on different axes. Give the heading (and the
   'Read all' foot is already inside the block) the same shift on desktop.
   ============================================ */
@media (min-width:1025px){
  .elementor-element-657ebee{ transform:translateX(-90px); }
}

/* ============================================
   FIX v=mob75 - center the whole reviews section on the page axis, matching
   "Follow our projects" (client). The earlier 90px left-shift (mob73/74) is
   reverted; instead the row's WIDTH is capped so a centered block still clears
   the social rail on smaller desktops (right edge <= 100vw - 210px). Between
   1025-1440px show 3 cards per view so tiles stay readable at reduced width.
   ============================================ */
@media (min-width:1025px){
  .elementor-element-657ebee{ transform:none; }   /* heading back to center */
  .udz-reviews{ transform:translateX(-50%); }     /* block back to center */
}
.udz-reviews{ width:min(1360px, calc(100vw - 420px)) !important; }
@media (min-width:1025px) and (max-width:1440px){
  .udz-reviews-viewport{ grid-auto-columns:calc((100% - 40px) / 3); }
}
/* the "Follow our projects" title (absolute-positioned by the theme) sits a
   constant 20px left of true center at any width; bring it onto the same axis
   so reviews, headings and this title all line up. */
@media (min-width:1025px){
  .elementor-element-b143538{ transform:translateX(20px); }
}

/* ============================================
   FIX v=mob76 - footer per client wireframe:
   [ horizontal logo lockup ] | Address / Email / Phone | single nav column
   (ABOUT US / THE ARCHITECT / PORTFOLIO / BLOGS / TESTIMONIALS / REACH US).
   Later rules here override the older stacked-logo / grid-contact layout.
   ============================================ */
.ekit-template-content-footer .udz-foot-logo{ display:block !important; text-align:left !important; }
.ekit-template-content-footer .udz-foot-lockup{
  width:330px !important; max-width:100% !important;
  height:auto !important; display:block !important; margin:0 !important;
}
.ekit-template-content-footer .udz-foot-contact{ display:block !important; text-align:left !important; }
.ekit-template-content-footer .udz-foot-contact > p{ max-width:340px !important; margin:0 0 14px !important; line-height:1.7 !important; }
.ekit-template-content-footer .udz-foot-contact > p:last-child{ margin-bottom:0 !important; }
.ekit-template-content-footer .udz-foot-phones a{ display:inline-block !important; margin-top:3px !important; }
.ekit-template-content-footer .udz-foot-links{ display:block !important; }
.ekit-template-content-footer .udz-foot-links p{ margin:0 0 10px !important; }
.ekit-template-content-footer .udz-foot-links p:last-child{ margin-bottom:0 !important; }
@media (max-width:1024px){
  .ekit-template-content-footer .udz-foot-logo{ text-align:center !important; }
  .ekit-template-content-footer .udz-foot-lockup{ margin:0 auto !important; }
  .ekit-template-content-footer .udz-foot-contact,
  .ekit-template-content-footer .udz-foot-links{ text-align:center !important; }
  .ekit-template-content-footer .udz-foot-contact > p{ margin-left:auto !important; margin-right:auto !important; }
}

/* ---- Testimonials page (/testimonials/) ---- */
.udz-testi-wrap{ max-width:1140px; margin:0 auto; padding:120px 30px 90px; font-family:'Roboto',sans-serif; color:#2b2b2b; }
.udz-testi-title{ font-family:'Questrial',sans-serif; font-weight:400; font-size:clamp(30px,3.4vw,44px); color:#111; text-align:center; margin:0 0 12px; }
.udz-testi-sub{ text-align:center; font-size:17px; font-weight:300; color:#555; margin:0 auto 46px; max-width:640px; line-height:1.7; }
.udz-testi-form-card{ background:#fff; border:1px solid #ececec; border-radius:8px; box-shadow:0 2px 14px rgba(0,0,0,.05); padding:30px 30px 26px; max-width:680px; margin:0 auto 60px; }
.udz-testi-form-heading{ font-family:'Questrial',sans-serif; font-weight:400; font-size:24px; color:#111; margin:0 0 22px; }
.udz-testi-row{ margin-bottom:16px; }
.udz-testi-row label{ display:block; font-size:13px; letter-spacing:.5px; color:#444; margin-bottom:6px; }
.udz-testi-row input[type="text"], .udz-testi-row textarea{
  width:100%; box-sizing:border-box; border:1px solid #d8d8d8; border-radius:4px;
  padding:11px 13px; font:300 15px/1.6 'Roboto',sans-serif; color:#2b2b2b; background:#fff;
}
.udz-testi-row input[type="text"]:focus, .udz-testi-row textarea:focus{ outline:none; border-color:#b5975a; }
.udz-testi-stars{ display:inline-flex; flex-direction:row-reverse; gap:4px; }
.udz-testi-stars input{ position:absolute; opacity:0; pointer-events:none; }
.udz-testi-stars label{ font-size:28px; line-height:1; color:#d8d8d8; cursor:pointer; margin:0; transition:color .15s; }
.udz-testi-stars input:checked ~ label, .udz-testi-stars label:hover, .udz-testi-stars label:hover ~ label{ color:#fbbc05; }
.udz-testi-submit{
  display:inline-block; margin-top:6px; padding:14px 38px; background:#b5975a !important; color:#ffffff !important;
  font:600 13px/1 'Roboto',sans-serif; letter-spacing:2px; text-transform:uppercase;
  border:0; border-radius:3px; cursor:pointer; transition:background .2s, transform .15s, box-shadow .2s;
  box-shadow:0 4px 14px rgba(181,151,90,0.38);
}
.udz-testi-submit:hover{ background:#9f8146 !important; transform:translateY(-2px); box-shadow:0 6px 18px rgba(181,151,90,0.48); }
.udz-testi-submit:disabled{ opacity:.6; cursor:default; }
#udz-testi-msg{ margin:12px 0 0; font-size:14px; }
.udz-testi-okmsg{ color:#1e7e34; }
.udz-testi-err{ color:#b00020; }
.udz-testi-list{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; align-items:start; }
.udz-testi-card{ background:#fff; border:1px solid #ececec; border-radius:8px; box-shadow:0 2px 14px rgba(0,0,0,.05); padding:22px; }
.udz-testi-card-head{ display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.udz-testi-ava{ flex:0 0 42px; width:42px; height:42px; border-radius:50%; background:#b5975a; color:#fff; font-size:19px; font-weight:500; display:flex; align-items:center; justify-content:center; }
.udz-testi-id{ display:flex; flex-direction:column; min-width:0; }
.udz-testi-name{ font-size:15px; font-weight:600; color:#1a1a1a; }
.udz-testi-project{ font-size:12px; color:#70757a; }
.udz-testi-cardstars{ color:#fbbc05; font-size:15px; letter-spacing:1px; margin-bottom:9px; }
.udz-testi-text{ font-size:14px; font-weight:300; line-height:1.65; color:#3c4043; margin:0; white-space:pre-line; }
.udz-testi-empty, .udz-testi-loading{ grid-column:1/-1; text-align:center; color:#777; font-size:15px; }
@media (max-width:1024px){ .udz-testi-list{ grid-template-columns:repeat(2,1fr); } .udz-testi-wrap{ padding-top:100px; } }
@media (max-width:640px){ .udz-testi-list{ grid-template-columns:1fr; } .udz-testi-wrap{ padding:90px 16px 60px; } .udz-testi-form-card{ padding:22px 18px; } }
/* the old stacked-logo column widths (300/270px) squeezed the new horizontal
   lockup; give the three wireframe columns roomier proportions on desktop */
@media (min-width:1025px){
  .ekit-template-content-footer .elementor-9506 .elementor-element.elementor-element-5e0a8534{ width:36% !important; max-width:36% !important; flex:0 0 36% !important; }
  .ekit-template-content-footer .elementor-9506 .elementor-element.elementor-element-780c7774{ width:36% !important; max-width:36% !important; flex:0 0 36% !important; }
  .ekit-template-content-footer .elementor-9506 .elementor-element.elementor-element-11a03f10{ width:28% !important; max-width:28% !important; flex:0 0 28% !important; }
}

/* ============================================
   FIX v=mob77 - footer polish (client vs wireframe):
   (1) monogram restored beside the text lockup (the hd image is text-only),
       and the whole lockup rendered larger like the wireframe;
   (2) footer content clamped INSIDE the social-rail ruler line - centered
       container capped at 100vw-420px (same clearance formula as the
       approved reviews row), so nothing crosses the divider.
   ============================================ */
@media (min-width:1025px){
  .ekit-template-content-footer .elementor-element-253e1f19 > .elementor-container{
    max-width:min(1400px, calc(100vw - 420px)) !important;
    margin:0 auto !important;
  }
}
.ekit-template-content-footer .udz-foot-logo{ display:flex !important; flex-direction:row !important; align-items:center !important; gap:18px !important; text-align:left !important; }
.ekit-template-content-footer .udz-foot-monoimg{ width:64px !important; flex:0 0 64px !important; height:auto !important; display:block !important; margin:0 !important; }
.ekit-template-content-footer .udz-foot-lockup{ width:calc(100% - 82px) !important; max-width:430px !important; margin:0 !important; }
@media (max-width:1024px){
  .ekit-template-content-footer .udz-foot-logo{ justify-content:center !important; }
}
/* composed single-image lockup (monogram + text in one file, like the wireframe) */
.ekit-template-content-footer .udz-foot-logo{ display:block !important; }
.ekit-template-content-footer .udz-foot-lockup{ width:440px !important; max-width:100% !important; height:auto !important; margin:0 !important; display:block !important; }
@media (max-width:1024px){
  .ekit-template-content-footer .udz-foot-lockup{ margin:0 auto !important; width:min(440px, 86vw) !important; }
}

/* ============================================
   FIX v=mob78 - footer final polish (client):
   (1) whole footer shifted left - centered within the content area LEFT of the
       social-rail ruler instead of the full viewport (rail is ~190px, so -95px);
   (2) contact block reformatted: label on its own line, values aligned under it
       (Address 2 lines, both emails, both phones) - no ragged inline wrapping;
   (3) logo lockup enlarged 440 -> 500px, logo column widened to fit.
   ============================================ */
@media (min-width:1025px){
  .ekit-template-content-footer .elementor-element-253e1f19 > .elementor-container{ transform:translateX(-95px); }
  .ekit-template-content-footer .elementor-9506 .elementor-element.elementor-element-5e0a8534{ width:40% !important; max-width:40% !important; flex:0 0 40% !important; }
  .ekit-template-content-footer .elementor-9506 .elementor-element.elementor-element-780c7774{ width:33% !important; max-width:33% !important; flex:0 0 33% !important; }
  .ekit-template-content-footer .elementor-9506 .elementor-element.elementor-element-11a03f10{ width:27% !important; max-width:27% !important; flex:0 0 27% !important; }
}
.ekit-template-content-footer .udz-foot-lockup{ width:500px !important; }
.ekit-template-content-footer .udz-foot-contact > p{ margin:0 0 20px !important; line-height:1.8 !important; max-width:none !important; font-size:15px !important; }
.ekit-template-content-footer .udz-foot-contact > p:last-child{ margin-bottom:0 !important; }
.ekit-template-content-footer .udz-foot-contact strong{ display:block !important; margin-bottom:3px !important; letter-spacing:.4px !important; }
/* strong is display:block, so the following <br> would double the break */
.ekit-template-content-footer .udz-foot-contact strong + br{ display:none !important; }

/* ============================================
   FIX v=mob79 - footer: shift further left (-95 -> -155px) and enlarge the
   lockup 500 -> 560px (logo column widened to 44% to carry it).
   ============================================ */
@media (min-width:1025px){
  .ekit-template-content-footer .elementor-element-253e1f19 > .elementor-container{ transform:translateX(-155px); }
  .ekit-template-content-footer .elementor-9506 .elementor-element.elementor-element-5e0a8534{ width:44% !important; max-width:44% !important; flex:0 0 44% !important; }
  .ekit-template-content-footer .elementor-9506 .elementor-element.elementor-element-780c7774{ width:30% !important; max-width:30% !important; flex:0 0 30% !important; }
  .ekit-template-content-footer .elementor-9506 .elementor-element.elementor-element-11a03f10{ width:26% !important; max-width:26% !important; flex:0 0 26% !important; }
}
.ekit-template-content-footer .udz-foot-lockup{ width:560px !important; }

/* ============================================
   FIX v=mob80 - homepage section body text 20px -> 22px on desktop/tablet
   (client verify). Covers all .qodef-m-text section paragraphs on the home
   page ("We blend a curve...", Ministration/Conception/Perception, etc.) AND
   the hero intro paragraph so hero and sections stay uniform (the mob66 rule
   pinned it to the old 20px). Mobile keeps the 14px hero-matched size (mob67).
   ============================================ */
@media (min-width:601px){
  .elementor-8001 .qodef-section-title .qodef-m-text{ font-size:19px !important; line-height:1.7 !important; }
}
@media (min-width:1025px){
  #slider-4-slide-7-layer-7 .qodef-m-text{ font-size:19px !important; line-height:1.7 !important; }
}

/* ============================================
   FIX v=mob81 - homepage section body text 16px on mobile (client; was 14px
   hero-matched / 20px theme on the cards). Hero intro included via its ID
   selector so it stays uniform (the mob67 ID rule would otherwise win at 14px).
   ============================================ */
@media (max-width:600px){
  .elementor-8001 .qodef-section-title .qodef-m-text{ font-size:16px !important; }
  #slider-4-slide-7-layer-7 .qodef-m-text{ font-size:16px !important; }
}

/* ============================================
   FIX v=mob82 - two mobile fixes:
   (1) BUG: the reviews block collapsed to a sliver on phones - the mob75/79
       width rule min(1360px, 100vw-420px) is negative below 420px viewport and
       it overrode mob72's earlier mobile reset (later-in-file wins). Restore
       normal in-flow full-width layout for <=1024px, where the social rail is
       hidden and the desktop break-out/clamp makes no sense.
   (2) footer organized on mobile: lockup centered (the desktop margin:0 from
       mob77-79 had overridden the old centering), even spacing throughout.
   ============================================ */
@media (max-width:1024px){
  .udz-reviews{ width:auto !important; max-width:none !important; left:auto !important; transform:none !important; margin:6px 0 0 !important; }
  .ekit-template-content-footer .udz-foot-lockup{ width:min(400px, 86vw) !important; margin:0 auto 8px !important; }
  .ekit-template-content-footer .udz-foot-contact > p{ margin:0 auto 16px !important; }
  .ekit-template-content-footer .udz-foot-links p{ margin:0 0 12px !important; }
  .ekit-template-content-footer .elementor-element-253e1f19{ padding-top:38px !important; padding-bottom:26px !important; }
  .ekit-template-content-footer .elementor-element-253e1f19 .elementor-element-populated{ padding:6px 18px !important; }
}

/* ============================================
   FIX v=mob83 - client round:
   (1) hero "Greetings!" paragraph on mobile: RevSlider scales its mobile canvas
       ~0.81x (design 480 vs ~390 phone), so 16px CSS showed ~13px. Compensate:
       20px CSS -> ~16px visual, matching the section text.
   (2) hero tagline "AN ARCHITECTURE AND INTERIOR DESIGN STUDIO" larger on
       desktop (17px) and mobile (15px CSS -> ~12px visual).
   (3) "We blend a curve..." heading on mobile: balance the line wrapping so it
       doesn't end in a ragged orphan word.
   (4) mobile review boxes: uniform size like desktop (stretch, not fit-content).
   ============================================ */
@media (max-width:600px){
  #slider-4-slide-7-layer-7 .qodef-m-text{ font-size:15px !important; line-height:1.65 !important; }
  rs-layer#slider-4-slide-7-layer-5,
  #slider-4-slide-7-layer-5 .qodef-m-tagline{ font-size:15px !important; line-height:1.5 !important; }
  .elementor-element-642f2ee .qodef-m-title{ text-wrap:balance; }
}
@media (min-width:1025px){
  rs-layer#slider-4-slide-7-layer-5,
  #slider-4-slide-7-layer-5 .qodef-m-tagline{ font-size:17px !important; line-height:1.6 !important; }
}
@media (max-width:1024px){
  .udz-reviews-viewport{ align-items:stretch !important; }
  .udz-review{ min-height:0 !important; }
}

/* ============================================
   FIX v=mob84 - mobile footer text organization (client; logo untouched):
   contact block left-aligned inside a centered column so the labels and values
   line up cleanly, nav links in a tidy 2-column grid (shorter footer).
   ============================================ */
@media (max-width:1024px){
  .ekit-template-content-footer .udz-foot-contact{ max-width:300px !important; margin:0 auto !important; text-align:left !important; }
  .ekit-template-content-footer .udz-foot-contact > p{ margin:0 0 16px !important; }
  .ekit-template-content-footer .udz-foot-contact strong{ margin-bottom:2px !important; }
  .ekit-template-content-footer .udz-foot-links{ display:grid !important; grid-template-columns:1fr 1fr !important; gap:14px 8px !important; max-width:360px !important; margin:26px auto 0 !important; }
  .ekit-template-content-footer .udz-foot-links p{ margin:0 !important; text-align:center !important; }
}
/* the old mobile rule centers every text-editor descendant with a `*` selector;
   the contact block needs a direct-descendant override to go left */
@media (max-width:1024px){
  .ekit-template-content-footer .udz-foot-contact,
  .ekit-template-content-footer .udz-foot-contact *{ text-align:left !important; }
}

/* ============================================
   FIX v=mob85 - hero mobile text, stronger compensation. RevSlider scales the
   mobile canvas by viewport/480, so CSS px inside the slider render smaller
   than everywhere else (0.81x at 390w, 0.75x at 360w, 0.67x at 320w). Tiered
   sizes so the paragraph reads ~16px visual and the tagline ~12px visual on
   any phone; About Us button nudged down to make room for the taller text.
   ============================================ */
@media (max-width:600px){
  #slider-4-slide-7-layer-7 .qodef-m-text{ font-size:15px !important; line-height:1.65 !important; }
  rs-layer#slider-4-slide-7-layer-5,
  #slider-4-slide-7-layer-5 .qodef-m-tagline{ font-size:16px !important; }
  rs-layer#slider-4-slide-7-layer-6{ margin-top:36px !important; }
}
@media (max-width:374px){
  #slider-4-slide-7-layer-7 .qodef-m-text{ font-size:15px !important; }
  rs-layer#slider-4-slide-7-layer-5,
  #slider-4-slide-7-layer-5 .qodef-m-tagline{ font-size:18px !important; }
}

/* ============================================
   FIX v=mob86 - mobile review cards: compact uniform height (5-line clamp) and
   a gold "Read more" toggle on overflowing cards (JS feature 13). Expanding
   shows the full text. Desktop untouched.
   ============================================ */
@media (max-width:1024px){
  .udz-review-text{ -webkit-line-clamp:5 !important; }
  .udz-review.udz-open .udz-review-text{ -webkit-line-clamp:100 !important; }
  .udz-review-more{
    background:none !important; border:0 !important; color:#b5975a !important;
    font:500 13px/1 'Roboto',sans-serif !important; letter-spacing:.3px !important;
    padding:10px 0 0 !important; margin:0 !important; cursor:pointer !important;
    text-align:left !important; display:inline-block !important; align-self:flex-start !important;
  }
}
@media (min-width:1025px){ .udz-review-more{ display:none !important; } }

/* ============================================
   FIX v=mob87 - THE REAL mobile hero text fix. Root cause of every failed
   attempt: on phones the hero is NOT RevSlider at all - a separate static
   block (.udz-mobile-hero, built in an earlier session) replaces it, and all
   the layer-targeted rules/JS styled the hidden slider. These are the elements
   the phone actually renders: subtitle was 9px, paragraph 13px.
   ============================================ */
@media (max-width:1024px){
  .udz-mobile-hero__subtitle{ font-size:12px !important; letter-spacing:2.5px !important; }
  .udz-mobile-hero__text{ font-size:16px !important; line-height:1.65 !important; color:#2b2b2b !important; }
}

/* ============================================
   FIX v=mob88 - portfolio pages (client): the PROJECT / STATUS / LOCATION /
   GENRE / ABOUT labels and values looked light and dull - now bold and dark;
   the About paragraph raised to the homepage section-paragraph size
   (22px desktop, 16px mobile). Applies to every portfolio-item page.
   ============================================ */
.udz-meta .label,
.udz-about > .label{
  color:#111 !important; font-weight:700 !important; letter-spacing:1.5px !important;
}
.udz-meta .value{
  color:#1a1a1a !important; font-weight:500 !important; font-size:17px !important;
}
.udz-about p{
  font-size:22px !important; line-height:1.7 !important; color:#2b2b2b !important;
}
@media (max-width:600px){
  .udz-about p{ font-size:16px !important; }
  .udz-meta .value{ font-size:16px !important; }
}

/* ============================================
   FIX v=mob89 - portfolio About paragraph: 22px was too large for the narrow
   text column (ugly ragged wrapping). 18px/1.8 reads balanced there; mobile
   stays 16px. All portfolio pages.
   ============================================ */
.udz-about p{ font-size:18px !important; line-height:1.8 !important; }
@media (max-width:600px){ .udz-about p{ font-size:16px !important; } }

/* FIX v=mob90 - portfolio About paragraph final size: 16px everywhere (client). */
.udz-about p{ font-size:16px !important; line-height:1.8 !important; }

/* FIX v=mob91 - portfolio About paragraph: 18px (client final). */
.udz-about p{ font-size:18px !important; }
@media (max-width:600px){ .udz-about p{ font-size:16px !important; } }

/* ============================================
   FIX v=mob92 - inner pages: body paragraphs 16 -> 18px (client). Applies to
   About Us (2405), The Architect (2245), Awards (8493), Our Services (3357),
   Reach Us (2630) and all blog post bodies. Home (8001) and portfolio pages
   deliberately untouched; blog/portfolio listings share 8001 so they are
   naturally excluded. Mobile stays 16px sitewide.
   ============================================ */
.elementor-2405 .elementor-widget-text-editor p,
.elementor-2245 .elementor-widget-text-editor p,
.elementor-8493 .elementor-widget-text-editor p,
.elementor-3357 .elementor-widget-text-editor p,
.elementor-2630 .elementor-widget-text-editor p,
.udz-post-body p,
.udz-post-body h6{
  font-size:18px !important;
}
@media (max-width:600px){
  .elementor-2405 .elementor-widget-text-editor p,
  .elementor-2245 .elementor-widget-text-editor p,
  .elementor-8493 .elementor-widget-text-editor p,
  .elementor-3357 .elementor-widget-text-editor p,
  .elementor-2630 .elementor-widget-text-editor p,
  .udz-post-body p,
  .udz-post-body h6{
    font-size:16px !important;
  }
}

/* ============================================
   FIX v=mob93 - Reach Us page tidy-up (client): smaller office image, whole
   block capped + nudged left of the rail, RING US and MAIL US now stacked
   together above the form (markup moved; the emptied section is hidden),
   consistent left alignment for the contact details.
   ============================================ */
.elementor-2630 .elementor-element-4563847 img{ width:100% !important; height:auto !important; max-height:700px !important; object-fit:cover !important; }
.elementor-2630 .elementor-element-29631c3{ display:none !important; }
.elementor-2630 .elementor-element-497ac07, .elementor-2630 .elementor-element-c5b87ad, .elementor-2630 .elementor-element-c054690{ text-align:left !important; }
.elementor-2630 .elementor-element-c5b87ad{ margin-top:20px !important; }
.elementor-2630 .elementor-element-c5b87ad .elementor-widget-container{ margin:0 !important; }
@media (min-width:1025px){
  .elementor-2630 .elementor-element-7b3e0a5 > .elementor-container{
    max-width:min(1200px, calc(100vw - 420px)) !important;
    margin:0 auto !important;
    transform:translateX(-70px);
  }
  .elementor-2630 .elementor-element-7b3e0a5 > .elementor-container > .elementor-element-4563847{ width:44% !important; }
  .elementor-2630 .elementor-element-7b3e0a5 > .elementor-container > .elementor-element-9c83512{ width:56% !important; }
  .udz-contact-widget{ margin-top:26px !important; }
}

/* ============================================
   FIX v=mob94 - Reach Us: proper split-screen composition. The capped photo
   left a large void under it while the form column ran long. Now the photo
   stretches to exactly match the right column height (flex chain + cover),
   and the contact details sit as two tidy columns (RING US | MAIL US) with
   the form directly beneath. Desktop only; mobile keeps stacked flow.
   ============================================ */
@media (min-width:1025px){
  .elementor-2630 .elementor-element-4563847 > .elementor-widget-wrap{ display:flex !important; flex-direction:column !important; }
  .elementor-2630 .elementor-element-60503d6{ flex:1 1 auto !important; display:flex !important; }
  .elementor-2630 .elementor-element-60503d6 .elementor-widget-container{ flex:1 1 auto !important; display:flex !important; width:100% !important; }
  .elementor-2630 .elementor-element-60503d6 img{ width:100% !important; height:100% !important; max-height:none !important; object-fit:cover !important; display:block !important; }
  .elementor-2630 .elementor-element-1f51092 > .elementor-widget-wrap{
    display:grid !important; grid-template-columns:1fr 1fr !important;
    column-gap:28px !important; row-gap:2px !important; align-content:start !important;
  }
  .elementor-2630 .elementor-element-497ac07{ grid-column:1 !important; grid-row:1 !important; }
  .elementor-2630 .elementor-element-650a632{ grid-column:1 !important; grid-row:2 !important; }
  .elementor-2630 .elementor-element-c5b87ad{ grid-column:2 !important; grid-row:1 !important; margin-top:0 !important; }
  .elementor-2630 .elementor-element-c054690{ grid-column:2 !important; grid-row:2 !important; }
  .udz-contact-widget{ margin-top:30px !important; }
}

/* ============================================
   FIX v=mob95 - The Architect page (2245) + blog post bodies: paragraphs
   18 -> 20px desktop (client); mobile stays 16px.
   ============================================ */
.elementor-2245 .elementor-widget-text-editor p,
.udz-post-body p,
.udz-post-body h6{ font-size:20px !important; }
@media (max-width:600px){
  .elementor-2245 .elementor-widget-text-editor p,
  .udz-post-body p,
  .udz-post-body h6{ font-size:16px !important; }
}

/* FIX v=mob96 - Our Services page (3357): paragraphs 18 -> 20px desktop, mobile 16px (client). */
.elementor-3357 .elementor-widget-text-editor p{ font-size:20px !important; }
@media (max-width:600px){
  .elementor-3357 .elementor-widget-text-editor p{ font-size:16px !important; }
}

/* ============================================
   FIX v=mob97 - The Architect writeup polish: the bio widget mixed <p>
   paragraphs with bare <div> lines and &nbsp; spacer divs (markup normalized -
   intro wrapped in <p>, quotes now real <blockquote>s, junk spacers removed).
   Quotes styled as gold pull-quotes; consistent rhythm throughout.
   ============================================ */
.elementor-2245 .elementor-widget-text-editor blockquote{
  margin:28px 0 !important;
  padding:8px 0 8px 24px !important;
  border-left:3px solid var(--udz-gold, #b5975a) !important;
  font-size:19px !important;
  line-height:1.75 !important;
  color:#555 !important;
  font-style:italic !important;
}
.elementor-2245 .elementor-widget-text-editor blockquote strong{
  font-weight:500 !important; color:#3a3a3a !important;
}

/* ============================================
   FIX v=mob98 - Testimonials page: remove the dead gap above the title and
   give the page an architectural identity - full-bleed hero band (studio
   project imagery + dark wash) with the title/subtitle in white, and the
   form card overlapping the band edge.
   ============================================ */
.udz-testi-wrap{ padding-top:0 !important; }
.udz-testi-hero{
  width:100vw; position:relative; left:50%; transform:translateX(-50%);
  background:linear-gradient(rgba(17,17,17,.52), rgba(17,17,17,.62)),
             url('/hero-slides/H1.webp') center 42%/cover no-repeat;
  padding:112px 24px 118px;
  margin:0 0 0;
  text-align:center;
}
.udz-testi-hero .udz-testi-title{ color:#fff; margin:0 0 14px; }
.udz-testi-hero .udz-testi-sub{ color:#e9e4dc; margin:0 auto; max-width:640px; }
.udz-testi-form-card{ position:relative; z-index:2; margin-top:-64px !important; }
@media (max-width:640px){
  .udz-testi-hero{ padding:70px 18px 96px; }
  .udz-testi-form-card{ margin-top:-56px !important; }
}

/* Note: The Architect page (.elementor-2245) is comprehensively styled in Section 1 below */

/* ============================================
   FIX v=mob101 - Testimonials pagination: show 6 at a time with a centered
   "Show more testimonials" button (client: the full wall looked ugly).
   ============================================ */
.udz-testi-morebtn{
  display:inline-block; margin:34px auto 0; padding:13px 34px;
  background:#fff; color:#1a1a1a; border:1px solid #1a1a1a; border-radius:2px;
  font:400 13px/1 'Roboto',sans-serif; letter-spacing:2px; text-transform:uppercase;
  cursor:pointer; transition:background .2s,color .2s,border-color .2s;
}
.udz-testi-morebtn:hover{ background:#b5975a; border-color:#b5975a; color:#fff; }
.udz-testi-wrap{ text-align:center; }
.udz-testi-wrap .udz-testi-form-card, .udz-testi-wrap .udz-testi-list{ text-align:left; }

/* ============================================
   FIX v=mob102 - footer: logo lockup moved to the BOTTOM of its column
   (client), bottom-aligned with the contact/nav content on desktop.
   ============================================ */
@media (min-width:1025px){
  .ekit-template-content-footer .elementor-9506 .elementor-element.elementor-element-5e0a8534{ align-self:flex-end !important; }
  .ekit-template-content-footer .udz-foot-lockup{ margin-bottom:4px !important; }
}

/* ============================================
   FIX v=mob103 - testimonial cards hardened (client):
   (1) uniform size and shape - fixed min-height + 4-line clamp;
   (2) unbreakable strings wrap (overflow-wrap:anywhere) so cards can never
       spill past the ruler or the phone screen;
   (3) per-card gold "Read more" that expands DOWNWARD only.
   ============================================ */
.udz-testi-list{ grid-template-columns:repeat(3, minmax(0,1fr)) !important; align-items:stretch !important; gap:24px !important; }
.udz-testi-card{ min-width:0 !important; overflow:hidden !important; display:flex !important; flex-direction:column !important; height:100% !important; min-height:240px !important; box-sizing:border-box !important; }
.udz-testi-name, .udz-testi-project{ overflow-wrap:anywhere !important; word-break:break-word !important; }
.udz-testi-text{
  overflow-wrap:anywhere !important; word-break:break-word !important;
  flex:1 1 auto !important;
  display:-webkit-box !important; -webkit-line-clamp:4 !important; -webkit-box-orient:vertical !important;
  overflow:hidden !important;
  line-height:1.65 !important;
}
.udz-testi-card.udz-open{ height:auto !important; }
.udz-testi-card.udz-open .udz-testi-text{ -webkit-line-clamp:unset !important; display:block !important; overflow:visible !important; }
.udz-testi-readmore{
  margin-top:auto !important;
  background:none !important; border:0 !important; color:#b5975a !important;
  font:600 13px/1 'Roboto',sans-serif !important; letter-spacing:.3px !important;
  padding:12px 0 0 !important; cursor:pointer !important;
  text-align:left !important; align-self:flex-start !important;
  transition:color .2s !important;
}
.udz-testi-readmore:hover{ color:#9f8146 !important; text-decoration:underline !important; }
@media (max-width:1024px){ .udz-testi-list{ grid-template-columns:repeat(2, minmax(0,1fr)) !important; } }
@media (max-width:640px){ .udz-testi-list{ grid-template-columns:minmax(0,1fr) !important; } .udz-testi-card{ min-height:0 !important; } }

/* ============================================
   FIX v=mob104 - Testimonials hero text: larger and highlighted (client).
   Bigger title with a gold accent bar beneath, brighter subtitle, soft
   shadows so both pop off the photo.
   ============================================ */
.udz-testi-hero .udz-testi-title{
  font-size:clamp(40px, 4.4vw, 58px) !important;
  color:#fff !important;
  text-shadow:0 2px 22px rgba(0,0,0,.5) !important;
  margin:0 0 18px !important;
}
.udz-testi-hero .udz-testi-title::after{
  content:''; display:block; width:72px; height:3px;
  background:var(--udz-gold, #b5975a); margin:16px auto 0;
}
.udz-testi-hero .udz-testi-sub{
  font-size:clamp(18px, 1.6vw, 21px) !important;
  color:#fff !important;
  font-weight:300 !important;
  text-shadow:0 1px 14px rgba(0,0,0,.55) !important;
  max-width:700px !important;
  line-height:1.75 !important;
}
@media (max-width:640px){
  .udz-testi-hero .udz-testi-title{ font-size:34px !important; }
  .udz-testi-hero .udz-testi-sub{ font-size:16px !important; }
}

/* ============================================
   FIX v=mob105 - BBMP Skywalk project only: all nine images are now cropped to
   the exact frame ratio (2400x1434 = 1600/956), so the slide fills edge to
   edge. object-fit:cover guarantees no letterbox bar or hairline even with
   sub-pixel rounding. Scoped via .udz-swiper--fill (that page alone).
   ============================================ */
.udz-swiper--fill .swiper-slide img{ object-fit:cover !important; }

/* ============================================
   FIX v=mob106 - footer per client wireframe: logo pulled further left with the
   ADDRESS directly beneath it (moved out of the contact column, which now holds
   just Email + Phone). Address text updated (Above Sangeetha Mobile Stores,
   560005).
   ============================================ */
.ekit-template-content-footer .udz-foot-logo{ text-align:left !important; }
.ekit-template-content-footer .udz-foot-address{
  margin:18px 0 0 !important; line-height:1.8 !important; font-size:15px !important;
  color:#3a3a3a !important; max-width:340px !important; text-align:left !important;
}
.ekit-template-content-footer .udz-foot-address strong{
  display:block !important; margin-bottom:3px !important; letter-spacing:.4px !important; color:#2b2b2b !important;
}
.ekit-template-content-footer .udz-foot-address a{ color:#3a3a3a !important; text-decoration:none !important; }
.ekit-template-content-footer .udz-foot-address a:hover{ color:var(--udz-gold, #b5975a) !important; }
@media (min-width:1025px){
  /* pull the whole footer row further left and align the logo column hard-left */
  .ekit-template-content-footer .elementor-element-253e1f19 > .elementor-container{ transform:translateX(-200px); }
  .ekit-template-content-footer .elementor-9506 .elementor-element.elementor-element-5e0a8534{
    align-self:flex-start !important; width:42% !important; max-width:42% !important; flex:0 0 42% !important;
  }
  .ekit-template-content-footer .elementor-9506 .elementor-element.elementor-element-780c7774{ width:32% !important; max-width:32% !important; flex:0 0 32% !important; }
  .ekit-template-content-footer .elementor-9506 .elementor-element.elementor-element-11a03f10{ width:26% !important; max-width:26% !important; flex:0 0 26% !important; }
  .ekit-template-content-footer .elementor-element-253e1f19 .elementor-element-populated{ padding:6px 14px !important; }
}
@media (max-width:1024px){
  .ekit-template-content-footer .udz-foot-logo{ text-align:center !important; }
  .ekit-template-content-footer .udz-foot-address{ margin:16px auto 0 !important; text-align:left !important; max-width:300px !important; }
}
/* strong is display:block, so the following <br> would double the break */
.ekit-template-content-footer .udz-foot-address strong + br{ display:none !important; }

/* ============================================
   FIX v=mob107 - footer: bold the Address label (it sits in the image widget
   now, which was not inheriting the bold the contact column had), and squeeze
   the cream band as tight as possible top and bottom (client).
   ============================================ */
.ekit-template-content-footer .udz-foot-address strong{ font-weight:700 !important; }
.ekit-template-content-footer .elementor-element-253e1f19{ padding-top:18px !important; padding-bottom:10px !important; }
.ekit-template-content-footer .elementor-element-253e1f19 .elementor-element-populated{ padding:2px 14px !important; }
.ekit-template-content-footer .elementor-element-253e1f19 .elementor-widget:last-child{ margin-bottom:0 !important; }
.ekit-template-content-footer .udz-foot-address{ margin-top:12px !important; margin-bottom:0 !important; }
.ekit-template-content-footer .udz-foot-links p:last-child{ margin-bottom:0 !important; }
/* copyright strip: minimal band under the cream area */
.ekit-template-content-footer .elementor-element-4bda64ea{ padding:6px 0 6px 0 !important; margin:0 !important; }
.ekit-template-content-footer .elementor-element-4bda64ea .elementor-element-populated{ padding:0 !important; }
@media (max-width:1024px){
  .ekit-template-content-footer .elementor-element-253e1f19{ padding-top:22px !important; padding-bottom:12px !important; }
  .ekit-template-content-footer .elementor-element-253e1f19 .elementor-col-33{ margin-bottom:10px !important; }
}

/* FIX v=mob108 - breathing room between the logo lockup and the address block. */
.ekit-template-content-footer .udz-foot-address{ margin-top:30px !important; }
@media (max-width:1024px){ .ekit-template-content-footer .udz-foot-address{ margin-top:24px !important; } }

/* ============================================
   FIX v=mob109 - footer address formatting & polish:
   (1) Address max-width expanded 340 -> 400px on desktop so the new 3-line
       hierarchy (#19 3rd Floor... Frazer Town / Above Sangeetha Mobile Stores /
       Bangalore, Karnataka - 560005) renders cleanly without orphan wraps;
   (2) Nav link BLOGS -> BLOG normalized across all pages.
   ============================================ */
@media (min-width:1025px){
  .ekit-template-content-footer .udz-foot-address{ max-width:400px !important; }
}
@media (max-width:1024px){
  .ekit-template-content-footer .udz-foot-address{ max-width:320px !important; }
}

/* ============================================
   FIX v=mob110 - footer typography & optical hierarchy:
   (1) Unified color tone across all 3 columns (#333 / #1a1a1a);
   (2) Section labels (Address / Email / Phone) raised to 16px bold (#1a1a1a);
   (3) Address & Contact values unified at 15px / 1.75 line-height;
   (4) Nav links refined from bulky 16px to architectural 14px with 1.5px tracking,
       balancing visual weight with the lowercase contact text across the columns.
   ============================================ */
.ekit-template-content-footer .udz-foot-address strong,
.ekit-template-content-footer .udz-foot-contact strong{
  font-size:16px !important;
  font-weight:700 !important;
  color:#1a1a1a !important;
  letter-spacing:.5px !important;
}
.ekit-template-content-footer .udz-foot-address,
.ekit-template-content-footer .udz-foot-address a,
.ekit-template-content-footer .udz-foot-contact p,
.ekit-template-content-footer .udz-foot-contact a{
  font-size:15px !important;
  line-height:1.75 !important;
  color:#333 !important;
}
.ekit-template-content-footer .udz-foot-links a{
  font-size:14px !important;
  font-weight:500 !important;
  letter-spacing:1.5px !important;
  color:#333 !important;
  transition:color .2s ease !important;
}
.ekit-template-content-footer .udz-foot-links p{
  line-height:2 !important;
  margin:0 0 4px !important;
}
.ekit-template-content-footer .udz-foot-links a:hover,
.ekit-template-content-footer .udz-foot-address a:hover,
.ekit-template-content-footer .udz-foot-contact a:hover{
  color:var(--udz-gold, #b5975a) !important;
}

/* ============================================
   FIX v=mob114 - mobile footer clean architectural layout:
   (1) Unify all elements along a single, crisp left axis (padding: 0 24px);
   (2) Standard typography hierarchy: Section labels in 15px bold (#1a1a1a);
       Address, emails, phones in 14.5px / 1.75 line-height (#333);
   (3) 24px natural breathing space between logo and address;
   (4) Nav links in 2 clean columns aligned to the left grid, no hairline dividers;
   (5) Floating back-to-top arrow lifted to bottom:76px so it never overlaps
       the mobile social bar.
   ============================================ */
@media (max-width:1024px){
  .ekit-template-content-footer .elementor-element-253e1f19 > .elementor-container{
    padding-left:24px !important;
    padding-right:24px !important;
    width:100% !important;
    max-width:100% !important;
  }
  .ekit-template-content-footer .elementor-element-253e1f19 .elementor-col-33{
    width:100% !important;
    text-align:left !important;
    margin-bottom:0 !important;
  }
  .ekit-template-content-footer .elementor-element-780c7774 > .elementor-element-populated,
  .ekit-template-content-footer .elementor-element-5e0a8534 > .elementor-element-populated,
  .ekit-template-content-footer .elementor-element-11a03f10 > .elementor-element-populated{
    padding:0 !important;
  }
  
  .ekit-template-content-footer .udz-foot-logo{
    text-align:left !important;
  }
  .ekit-template-content-footer .udz-foot-lockup{
    margin:0 0 36px 0 !important;
    width:min(280px, 76vw) !important;
    display:block !important;
  }
  
  .ekit-template-content-footer .udz-foot-address,
  .ekit-template-content-footer .udz-foot-contact{
    max-width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
    text-align:left !important;
  }
  .ekit-template-content-footer .udz-foot-address *,
  .ekit-template-content-footer .udz-foot-contact *{
    text-align:left !important;
  }
  
  .ekit-template-content-footer .udz-foot-address strong,
  .ekit-template-content-footer .udz-foot-contact strong{
    display:block !important;
    font-size:15px !important;
    font-weight:700 !important;
    color:#1a1a1a !important;
    margin-bottom:6px !important;
    letter-spacing:0.5px !important;
    text-transform:none !important;
  }
  
  .ekit-template-content-footer .udz-foot-address,
  .ekit-template-content-footer .udz-foot-address a,
  .ekit-template-content-footer .udz-foot-contact p,
  .ekit-template-content-footer .udz-foot-contact a{
    font-size:14.5px !important;
    line-height:1.75 !important;
    color:#333 !important;
  }
  
  .ekit-template-content-footer .udz-foot-address{
    padding-top:24px !important;
    margin-top:20px !important;
    margin-bottom:26px !important;
  }
  .ekit-template-content-footer .udz-foot-contact > p{
    margin:0 0 26px !important;
    text-align:left !important;
  }
  .ekit-template-content-footer .udz-foot-contact > p:last-child{
    margin-bottom:0 !important;
  }
  
  .ekit-template-content-footer .udz-foot-links{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:14px 24px !important;
    max-width:100% !important;
    margin:32px 0 0 !important;
    padding-top:0 !important;
    border-top:none !important;
  }
  .ekit-template-content-footer .udz-foot-links p{
    margin:0 !important;
    text-align:left !important;
  }
  .ekit-template-content-footer .udz-foot-links a{
    font-size:13.5px !important;
    font-weight:600 !important;
    letter-spacing:1.2px !important;
    color:#333 !important;
    text-transform:uppercase !important;
  }
  
  .ekit-template-content-footer .elementor-element-4bda64ea{
    padding-left:24px !important;
    padding-right:24px !important;
  }
  .ekit-template-content-footer .elementor-element-4bda64ea .elementor-container{
    padding:0 !important;
    margin:0 !important;
  }
  .ekit-template-content-footer .elementor-element-4bda64ea .ekit-heading,
  .ekit-template-content-footer .elementor-element-4bda64ea .ekit-heading--title,
  .ekit-template-content-footer .elementor-element-4bda64ea p{
    text-align:left !important;
    font-size:12px !important;
    white-space:nowrap !important;
    color:#777 !important;
    letter-spacing:0.3px !important;
  }

  /* Mobile back-to-top arrow: restored with full prominent 70px sizing and safe-area spacing */
  .udz-totop{
    display:flex !important;
    right:calc(16px + env(safe-area-inset-right, 0px)) !important;
    bottom:calc(24px + env(safe-area-inset-bottom, 0px)) !important;
    width:70px !important;
    height:70px !important;
  }
  .udz-totop svg{
    width:70px !important;
    height:35px !important;
  }
  .udz-mobile-social{
    padding:20px calc(80px + env(safe-area-inset-right, 0px)) 20px 20px !important;
  }
}

/* ============================================
   FIX v=mob124 - comprehensive visual overhaul:
   (1) Awards page (.elementor-8493):
       - Completely rebuilt with the 5 authentic original award images
         (GABA 2021 Certificate of Appreciation, GABA Trophy Plate, Al Tamyeez Mall,
         Makkah Mosque, and Sheabaz Residence);
       - Removed fake stock trophy cards, broken placeholders, and AI banner;
       - Symmetrically aligned 2-column grid with centered 5th project card;
       - Clean, elegant title: GABA 2021 Winner || Best Architect for Commercial Architecture in South Asia;
   (2) The Architect page (.elementor-2245):
       - Vertically expanded Ar. Umair's portrait to 780px (max 840px), spanning
         the bio column and displaying the architect at his glass studio desk;
       - Aligned top of photo precisely with "Ar. Umair Rehaman" heading;
       - Constrained text column width (580px, padding-right 36px) and cleared legacy
         mob99 padding-left: 64px, completely eliminating text overflow past the right border line;
       - Refined blockquote styling with 2px gold accent border and comfortable line height.
   (3) Testimonials page:
       - Ultra-HD 2400px hero background (/hero-slides/testi-hero.webp?v=mob124);
       - Admin key delete buttons and cleaned review grid styling.
   (4) Swiper sliders & project galleries:
       - Full cover-fit (.udz-swiper .swiper-slide img { object-fit: cover !important })
         eliminating side black lines and pillarbox gaps across all projects
         (Dar Al Arqam, InClover Osborne, etc.);
   (5) Portfolio grid listing:
       - Top-center framing (.udz-tile-img { background-position: top center !important })
         so high-rise cantilevers and building spires are never cut off.
   ============================================ */

/* 1. The Architect Page (scoped strictly to .elementor-2245) */
.elementor-2245 .elementor-element-7b3e0a5 {
  margin-top: 0 !important;
  margin-bottom: 60px !important;
  padding: 48px 0 80px !important;
}

@media (min-width: 1025px) {
  .elementor-2245 .elementor-element-7b3e0a5 > .elementor-container {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: clamp(40px, 4.5vw, 68px) !important;
    max-width: 1240px !important;
    margin: 0 auto !important;
    padding: 0 40px !important;
    box-sizing: border-box !important;
  }
  .elementor-2245 .elementor-element-4563847 {
    width: 44% !important;
    max-width: 490px !important;
    flex: 0 0 44% !important;
    position: sticky !important;
    top: 110px !important;
    margin: 0 !important;
  }
  .elementor-2245 .elementor-element-60503d6,
  .elementor-2245 .elementor-element-60503d6 > .elementor-widget-container,
  .elementor-2245 .elementor-element-60503d6 .qodef-single-image,
  .elementor-2245 .elementor-element-60503d6 .qodef-m-image {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    transform: none !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    background: #f7f5f2 !important;
    border: 1px solid rgba(0, 0, 0, 0.07) !important;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.12) !important;
  }
  .elementor-2245 .elementor-element-60503d6 img {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 5 !important;
    object-fit: cover !important;
    object-position: center 20% !important;
    display: block !important;
    border-radius: 16px !important;
  }
  .elementor-2245 .elementor-element-9c83512 {
    width: 56% !important;
    flex: 1 1 56% !important;
    max-width: 650px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    margin: 0 !important;
  }
  .elementor-2245 .elementor-element-9c83512 > .elementor-element-populated,
  .elementor-2245 .elementor-element-9c83512 > .elementor-widget-wrap {
    padding: 0 !important;
    margin: 0 !important;
  }
  .elementor-2245 .elementor-element-101f843 {
    margin-bottom: 24px !important;
  }
  .elementor-2245 .elementor-element-101f843 .elementor-heading-title {
    font-family: "Questrial", sans-serif !important;
    font-size: clamp(34px, 3vw, 44px) !important;
    line-height: 1.2 !important;
    color: #111111 !important;
    font-weight: 400 !important;
    letter-spacing: 0.5px !important;
    margin: 0 !important;
  }
  .elementor-2245 .elementor-element-25ab4fe {
    font-size: 20px !important;
  }
  .elementor-2245 .elementor-element-25ab4fe p {
    font-family: "Questrial", "Roboto", sans-serif !important;
    font-size: 20px !important;
    line-height: 1.85 !important;
    color: #2b2b2b !important;
    letter-spacing: 0.1px !important;
    margin: 0 0 24px 0 !important;
    text-align: justify !important;
    text-justify: inter-word !important;
  }
  .elementor-2245 .elementor-element-25ab4fe blockquote {
    margin: 28px 0 !important;
    padding: 14px 22px !important;
    border-left: 3px solid #b5975a !important;
    background: rgba(181, 151, 90, 0.06) !important;
    border-radius: 0 10px 10px 0 !important;
    font-style: italic !important;
    color: #1a1a1a !important;
    text-align: left !important;
  }
  .elementor-2245 .elementor-element-25ab4fe blockquote p {
    font-size: 19px !important;
    line-height: 1.75 !important;
    color: #1a1a1a !important;
    margin: 0 !important;
    text-align: left !important;
  }
  .elementor-2245 .elementor-element-25ab4fe blockquote .udz-quote-author {
    display: block !important;
    margin-top: 10px !important;
    font-size: 16px !important;
    font-style: normal !important;
    font-weight: 600 !important;
    color: #b5975a !important;
    letter-spacing: 0.4px !important;
  }
  .elementor-2245 .elementor-element-25ab4fe > .elementor-widget-container {
    margin: 0 !important;
  }
}

@media (max-width: 1024px) {
  .elementor-2245 .elementor-element-7b3e0a5 {
    margin-top: 0 !important;
    margin-bottom: 40px !important;
    padding: 24px 0 50px !important;
  }
  .elementor-2245 .elementor-element-7b3e0a5 > .elementor-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 30px !important;
    padding: 0 24px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .elementor-2245 .elementor-element-4563847,
  .elementor-2245 .elementor-element-9c83512 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .elementor-2245 .elementor-element-60503d6,
  .elementor-2245 .elementor-element-60503d6 > .elementor-widget-container,
  .elementor-2245 .elementor-element-60503d6 .qodef-single-image,
  .elementor-2245 .elementor-element-60503d6 .qodef-m-image {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12) !important;
  }
  .elementor-2245 .elementor-element-60503d6 img {
    position: static !important;
    width: 100% !important;
    height: 380px !important;
    max-height: 420px !important;
    aspect-ratio: 4 / 5 !important;
    object-fit: cover !important;
    object-position: center 20% !important;
    border-radius: 14px !important;
    display: block !important;
  }
  .elementor-2245 .elementor-element-9c83512 > .elementor-element-populated,
  .elementor-2245 .elementor-element-9c83512 > .elementor-widget-wrap {
    padding: 0 !important;
    margin: 0 !important;
  }
  .elementor-2245 .elementor-element-101f843 {
    margin-bottom: 18px !important;
  }
  .elementor-2245 .elementor-element-101f843 .elementor-heading-title {
    font-family: "Questrial", sans-serif !important;
    font-size: clamp(28px, 6.5vw, 36px) !important;
    line-height: 1.25 !important;
    color: #111111 !important;
    margin: 0 !important;
  }
  .elementor-2245 .elementor-element-25ab4fe p {
    font-family: "Questrial", "Roboto", sans-serif !important;
    font-size: 16px !important;
    line-height: 1.75 !important;
    color: #2b2b2b !important;
    margin: 0 0 18px 0 !important;
    text-align: left !important;
  }
  .elementor-2245 .elementor-element-25ab4fe blockquote {
    margin: 20px 0 !important;
    padding: 12px 16px !important;
    border-left: 3px solid #b5975a !important;
    background: rgba(181, 151, 90, 0.06) !important;
    border-radius: 0 8px 8px 0 !important;
    font-style: italic !important;
    color: #1a1a1a !important;
    text-align: left !important;
  }
  .elementor-2245 .elementor-element-25ab4fe blockquote p {
    font-size: 15px !important;
    line-height: 1.65 !important;
    margin: 0 !important;
  }
  .elementor-2245 .elementor-element-25ab4fe blockquote .udz-quote-author {
    display: block !important;
    margin-top: 8px !important;
    font-size: 14px !important;
    font-style: normal !important;
    font-weight: 600 !important;
    color: #b5975a !important;
  }
}


/* 3. Testimonials Hero: Destiny Villa courtyard dusk elevation with refined dark architectural overlay */
.udz-testi-hero {
  background: linear-gradient(180deg, rgba(14,16,20,0.68) 0%, rgba(14,16,20,0.82) 100%), url('/hero-slides/H8.webp?v=mob141') center 45%/cover no-repeat !important;
  padding: 124px 24px 136px !important;
}
@media (max-width:640px){
  .udz-testi-hero{
    padding: 85px 18px 110px !important;
    background-position: center 55% !important;
  }
}

/* 4. Portfolio Swiper cover fit (no black side lines) */
.udz-swiper .swiper-slide img,
.udz-swiper--fill .swiper-slide img {
  object-fit: cover !important;
  object-position: center !important;
}

/* 5. Portfolio Grid & Blog Listing Full Building Framing */
.udz-tile-img {
  width: 100% !important;
  padding-top: 100% !important;
  aspect-ratio: 1 / 1 !important;
  background-size: cover !important;
  background-position: center center !important;
  background-color: #faf8f7 !important;
}
.udz-tile[href*="masjid-e-farooq"] .udz-tile-img { background-position: center 3% !important; }
.udz-tile[href*="masjid-wafa"] .udz-tile-img { background-position: center 38% !important; }
.udz-tile[href*="atelier-eleven"] .udz-tile-img { background-position: center 18% !important; }
.udz-tile[href*="kamran-apartment"] .udz-tile-img { background-position: center 20% !important; }
.udz-tile[href*="inclover-osborne"] .udz-tile-img { background-position: center 25% !important; }
.udz-tile[href*="inclover-taj-avenue"] .udz-tile-img { background-position: center 25% !important; }
.udz-tile[href*="aedifice-signature"] .udz-tile-img { background-position: center 25% !important; }
.udz-tile[href*="shantinagar-residence"] .udz-tile-img { background-position: center 30% !important; }
.udz-tile[href*="abdul-kareem"] .udz-tile-img { background-position: center 30% !important; }
.udz-tile[href*="sheabaz-residence"] .udz-tile-img { background-position: center 35% !important; }

.udz-card-thumb {
  width: 100% !important;
  padding-top: 100% !important;
  aspect-ratio: 1 / 1 !important;
  background-size: cover !important;
  background-position: center center !important;
  background-color: #faf8f7 !important;
  display: block !important;
  transition: opacity .3s !important;
}
.udz-card:hover .udz-card-thumb { opacity: .85 !important; }
.udz-card[href*="masjid-e-farooq"] .udz-card-thumb { background-position: center 3% !important; }
.udz-card[href*="masjid-wafa"] .udz-card-thumb { background-position: center 38% !important; }
.udz-card[href*="atelier-eleven"] .udz-card-thumb { background-position: center 18% !important; }
.udz-card[href*="kamran-apartment"] .udz-card-thumb { background-position: center 20% !important; }
.udz-card[href*="inclover-osborne"] .udz-card-thumb { background-position: center 25% !important; }
.udz-card[href*="inclover-taj-avenue"] .udz-card-thumb { background-position: center 25% !important; }
.udz-card[href*="aedifice-signature"] .udz-card-thumb { background-position: center 25% !important; }
.udz-card[href*="shantinagar-residence"] .udz-card-thumb { background-position: center 30% !important; }
.udz-card[href*="abdul-kareem"] .udz-card-thumb { background-position: center 30% !important; }
.udz-card[href*="sheabaz-residence"] .udz-card-thumb { background-position: center 35% !important; }

/* ============================================
   FIX v=mob125: Hero Slider Uniform Sizing & Placement
   All 12 hero slides have identical 2400x1600 dimensions.
   Images cover the hero slider frame seamlessly.
   ============================================ */
#slider-4-slide-7-layer-0 .udz-hero-slide img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* ============================================
   FIX v=mob126: Homepage Hero Write-up Desktop Typography & Spacing
   ============================================ */
@media (min-width: 1025px) {
  #slider-4-slide-7-layer-5 .qodef-m-title {
    white-space: nowrap !important;
    letter-spacing: 2px !important;
    font-weight: 500 !important;
  }
  #slider-4-slide-7-layer-1 .qodef-m-title {
    line-height: 1.25 !important;
    margin: 0 !important;
  }
}

/* ============================================
   FIX v=mob129: Homepage Hero Greeting Typography Match Emphasizing Paragraph
   (1) Pinned to 19px font-size, 1.7 line-height, #121212 color, 300 weight,
       0.01em letter-spacing matching 'The emphasizing features...' section below.
   (2) Broadened to min-width: 601px so all desktop/laptop viewports render at 19px.
   ============================================ */
@media (min-width: 601px) {
  rs-layer#slider-4-slide-7-layer-7,
  #slider-4-slide-7-layer-7,
  #slider-4-slide-7-layer-7 .qodef-m-text,
  #slider-4-slide-7-layer-7 p {
    font-size: 22px !important;
    line-height: 1.75 !important;
    color: #121212 !important;
    font-weight: 300 !important;
    font-family: 'Roboto', sans-serif !important;
    letter-spacing: 0.01em !important;
    margin: 0 !important;
  }
}

/* ============================================
   FIX v=mob130: Homepage Hero Greeting 5-Line Balanced Alignment
   Sets desktop width to 560px with text-wrap: pretty for
   5 evenly balanced lines of ~50-60 characters each, eliminating
   awkward phrase splits and orphan lines.
   ============================================ */
@media (min-width: 1025px) {
  #slider-4-slide-7-layer-7 {
    width: 560px !important;
    max-width: 560px !important;
  }
  #slider-4-slide-7-layer-7 .qodef-m-text,
  #slider-4-slide-7-layer-7 p {
    max-width: 560px !important;
    text-wrap: pretty !important;
    text-align: left !important;
  }
}

/* ============================================
   FIX v=mob134: Blog Cards Complete 1:1 Parity with Portfolio Tiles
   1. Explicit image-rendering: auto ensures smooth bicubic downsampling.
   2. Keep thumbnail opacity at 1 on hover (no dimming/dulling).
   3. Identical framing, dimensions, and focal points to portfolio tiles.
   ============================================ */
.udz-card-thumb,
.udz-card-thumb.udz-tile-img {
  width: 100% !important;
  padding-top: 100% !important;
  aspect-ratio: 1 / 1 !important;
  background-size: cover !important;
  background-position: center center !important;
  background-color: #faf8f7 !important;
  display: block !important;
  image-rendering: auto !important;
  -webkit-image-rendering: auto !important;
  transition: opacity .3s !important;
}
.udz-card:hover .udz-card-thumb {
  opacity: 1 !important;
}
.udz-card[href*="masjid-e-farooq"] .udz-card-thumb,
.udz-card[href*="masjid-e-farooq"] .udz-card-thumb.udz-tile-img {
  background-position: center 3% !important;
}

/* ============================================
   FIX v=mob135: Soft-Luminance Anti-Aliasing for Masjid E Farooq & Card Parity
   Bakes soft daylight tone into F1.jpeg eliminating high-frequency
   jali lattice aliasing and pixel noise across all displays.
   ============================================ */
.udz-card-thumb,
.udz-card-thumb.udz-tile-img,
.udz-tile-img {
  image-rendering: auto !important;
  -webkit-image-rendering: auto !important;
}

/* ============================================
   FIX v=mob136: Blog Post Typography & Heading Hierarchy Polish
   - Normalizes article headings (h1, h2, h3) to balanced responsive sizes
   - Styles figure and figcaption for editorial imagery
   - Ensures body paragraphs have clean line-height and spacing
   ============================================ */
.udz-post-body {
  font-size: 16px !important;
  line-height: 1.9 !important;
  color: #2b2b2b !important;
}
.udz-post-body h1,
.udz-post-body h2,
.udz-post-body h3,
.udz-post-body h4,
.udz-post-body h5,
.udz-post-body h6 {
  font-family: "Montserrat", "Lato", sans-serif !important;
  font-size: 32px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  margin: 38px 0 16px !important;
  color: #2b2b2b !important;
}
@media (max-width: 700px) {
  .udz-post-body h1,
  .udz-post-body h2,
  .udz-post-body h3,
  .udz-post-body h4,
  .udz-post-body h5,
  .udz-post-body h6 {
    font-size: 24px !important;
  }
}
.udz-post-body p {
  font-size: 16px !important;
  line-height: 1.9 !important;
  margin: 0 0 20px !important;
  color: #333 !important;
}
.udz-post-body figure {
  margin: 28px 0 !important;
  padding: 0 !important;
}
.udz-post-body figcaption {
  font-size: 12px !important;
  color: #888 !important;
  text-align: center !important;
  margin-top: 8px !important;
  letter-spacing: .3px !important;
}

/* ============================================
   FIX v=mob144 - Testimonials hero contrast calibration:
   - Tuned architectural wash to balanced 0.44 -> 0.58 overlay on testi-bright.webp.
   - Text is 100% effortlessly readable with dark-glow text shadows.
   - Preserves vivid building exposure, cantilevers, sky, and greenery (not too dark).
   ============================================ */
.udz-testi-hero {
  background: linear-gradient(180deg, rgba(14,16,20,0.44) 0%, rgba(14,16,20,0.58) 100%),
              url('/hero-slides/testi-bright.webp?v=mob144') center 36%/cover no-repeat !important;
  padding: 124px 24px 136px !important;
  text-align: center !important;
}
.udz-testi-hero .udz-testi-title {
  font-family: 'Questrial', 'Montserrat', sans-serif !important;
  font-size: clamp(38px, 4.4vw, 54px) !important;
  font-weight: 400 !important;
  letter-spacing: 1px !important;
  color: #ffffff !important;
  text-shadow: 0 2px 14px rgba(0,0,0,0.95), 0 0 24px rgba(0,0,0,0.85) !important;
  margin: 0 0 16px !important;
}
.udz-testi-hero .udz-testi-title::after {
  content: '' !important;
  display: block !important;
  width: 64px !important;
  height: 3px !important;
  background: #b5975a !important;
  margin: 16px auto 0 !important;
  border-radius: 2px !important;
}
.udz-testi-hero .udz-testi-sub {
  font-size: clamp(17px, 1.5vw, 19.5px) !important;
  color: #ffffff !important;
  font-weight: 400 !important;
  line-height: 1.75 !important;
  letter-spacing: 0.3px !important;
  max-width: 660px !important;
  margin: 0 auto !important;
  text-shadow: 0 2px 10px rgba(0,0,0,0.95), 0 0 22px rgba(0,0,0,0.9) !important;
}
.udz-testi-form-card {
  border: 1px solid #e8e4dc !important;
  border-radius: 8px !important;
  box-shadow: 0 14px 44px rgba(0,0,0,0.07) !important;
  padding: 34px 34px 28px !important;
  margin-top: -60px !important;
}
.udz-testi-form-heading {
  font-family: 'Questrial', sans-serif !important;
  font-size: 25px !important;
  font-weight: 400 !important;
  color: #1a1a1a !important;
  margin-bottom: 24px !important;
}
.udz-testi-row input[type="text"],
.udz-testi-row textarea {
  border: 1px solid #ddd8cf !important;
  border-radius: 3px !important;
  font-size: 14px !important;
  padding: 11px 14px !important;
  transition: border-color .2s, box-shadow .2s !important;
}
.udz-testi-row input[type="text"]:focus,
.udz-testi-row textarea:focus {
  border-color: #b5975a !important;
  box-shadow: 0 0 0 3px rgba(181,151,90,0.15) !important;
}
.udz-testi-submit {
  display: inline-block !important;
  padding: 14px 36px !important;
  background: #b5975a !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 3px !important;
  letter-spacing: 2px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  box-shadow: 0 4px 14px rgba(181,151,90,0.35) !important;
  cursor: pointer !important;
  transition: background .2s, transform .15s, box-shadow .2s !important;
}
.udz-testi-submit:hover:not(:disabled) {
  background: #9f8146 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 18px rgba(181,151,90,0.45) !important;
}
.udz-testi-card {
  border: 1px solid #ece7e0 !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 14px rgba(0,0,0,0.04) !important;
  padding: 24px !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  min-height: 240px !important;
  box-sizing: border-box !important;
  transition: transform .25s ease, box-shadow .25s ease !important;
}
.udz-testi-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08) !important;
}
.udz-testi-delbtn:hover:not(:disabled) {
  background: #a82718 !important;
  transform: translateY(-1px) !important;
}
.udz-testi-admin-link:hover {
  color: #333 !important;
  text-decoration: underline !important;
}
@media (max-width: 640px) {
  .udz-testi-hero {
    padding: 82px 18px 105px !important;
    background-position: center 36% !important;
  }
  .udz-testi-hero .udz-testi-title {
    font-size: 32px !important;
  }
  .udz-testi-hero .udz-testi-sub {
    font-size: 15.5px !important;
    line-height: 1.65 !important;
  }
  .udz-testi-form-card {
    margin-top: -50px !important;
    padding: 24px 18px !important;
  }
}

/* ============================================
   FIX v=mob147 - Reach Us page: Modern, organized contact cards & mobile layout
   - Replace washed-out golden text with deep architectural charcoal (#1a1a1a / #111)
   - Structured side-by-side cards (Ring Us & Mail Us) with icons, clear hierarchy,
     and sleek hover interactions
   - Mobile: balanced image frame (no full-screen cutoff), seamless vertical stacking,
     eliminated negative margins, refined spacing, polished CTA and map
   ============================================ */
.udz-reach-grid {
  display: flex !important;
  gap: 16px !important;
  max-width: 640px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 0 24px 0 !important;
}
.udz-reach-card {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  background: #ffffff !important;
  border: 1px solid #e8e4dc !important;
  border-radius: 14px !important;
  padding: 20px 22px !important;
  box-shadow: 0 6px 20px rgba(0,0,0,.03) !important;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
}
.udz-reach-card:hover {
  transform: translateY(-2px) !important;
  border-color: #d6ccbd !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.07) !important;
}
.udz-reach-head {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 12px !important;
  padding-bottom: 10px !important;
  border-bottom: 1px solid #f0ece5 !important;
}
.udz-reach-ic {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  background: rgba(181,151,90,0.12) !important;
  color: #9c7b3c !important;
  flex-shrink: 0 !important;
}
.udz-reach-title {
  font-family: Montserrat, sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
  color: #111111 !important;
  margin: 0 !important;
  text-transform: uppercase !important;
  line-height: 1.2 !important;
}
.udz-reach-body {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  flex: 1 1 auto !important;
}
.udz-reach-entry {
  display: flex !important;
  flex-direction: column !important;
}
.udz-reach-label {
  display: block !important;
  font-family: Montserrat, sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  color: #8f8577 !important;
  margin-bottom: 3px !important;
}
.udz-reach-link {
  display: inline-block !important;
  font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #1a1a1a !important;
  text-decoration: none !important;
  line-height: 1.35 !important;
  word-break: break-word !important;
  transition: color .2s ease !important;
}
.udz-reach-link:hover {
  color: var(--udz-gold, #b5975a) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}
.udz-reach-tel {
  font-size: 16px !important;
  letter-spacing: .02em !important;
}

/* Clean container alignment */
.elementor-2630 .elementor-element-0cf6ff3 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
}
.elementor-2630 .elementor-element-9c83512 > .elementor-element-populated {
  padding-top: 0 !important;
  margin-top: 0 !important;
}
.udz-contact-widget {
  max-width: 640px !important;
  margin-top: 0 !important;
}

/* Modern architectural style for 'We Got You!' CTA card */
.elementor-2630 .elementor-element-256f552 .qodef-qi-call-to-action .qodef-m-inner {
  background: #181a1f !important;
  border-radius: 16px !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow: 0 14px 38px rgba(0,0,0,0.12) !important;
  padding: 36px 32px !important;
}
.elementor-2630 .elementor-element-256f552 .qodef-qi-call-to-action .qodef-m-content .qodef-m-title {
  font-family: Questrial, sans-serif !important;
  font-size: 26px !important;
  color: #ffffff !important;
  letter-spacing: .03em !important;
  margin-bottom: 12px !important;
}
.elementor-2630 .elementor-element-256f552 .qodef-qi-call-to-action .qodef-m-content .qodef-m-text {
  font-family: Roboto, sans-serif !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
  color: #c4c1ba !important;
}
.elementor-2630 .elementor-element-256f552 .qodef-qi-button {
  border-radius: 8px !important;
  border: 1px solid var(--udz-gold, #b5975a) !important;
  color: #ffffff !important;
  background: transparent !important;
  font-family: Montserrat, sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  padding: 12px 26px !important;
  transition: all .25s ease !important;
}
.elementor-2630 .elementor-element-256f552 .qodef-qi-button:hover {
  background: var(--udz-gold, #b5975a) !important;
  color: #111111 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(181,151,90,0.3) !important;
}

/* Google Maps embed */
.elementor-2630 .elementor-widget-google_maps .elementor-custom-embed {
  border-radius: 16px !important;
  overflow: hidden !important;
  border: 1px solid #e8e4dc !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.06) !important;
}
.elementor-2630 .elementor-widget-google_maps iframe {
  display: block !important;
  border: 0 !important;
  border-radius: 16px !important;
}

/* Mobile overrides */
@media (max-width: 767px) {
  .elementor-2630 .elementor-element-7b3e0a5 > .elementor-container {
    padding: 0 16px !important;
  }
  .elementor-2630 .elementor-element-27664ef {
    display: block !important;
    max-height: 220px !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    margin-bottom: 20px !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.08) !important;
  }
  .elementor-2630 .elementor-element-27664ef img {
    width: 100% !important;
    height: 220px !important;
    object-fit: cover !important;
    object-position: center 35% !important;
    display: block !important;
    border-radius: 14px !important;
  }
  .udz-reach-grid {
    flex-direction: column !important;
    gap: 12px !important;
    margin-bottom: 20px !important;
  }
  .udz-reach-card {
    padding: 16px 18px 15px !important;
  }
  .udz-reach-link {
    font-size: 14.5px !important;
  }
  .udz-reach-tel {
    font-size: 16px !important;
  }
  .udz-contact-widget {
    margin-top: 0 !important;
    padding: 22px 18px 26px !important;
  }
  .udz-cta-map-row {
    padding: 0 16px !important;
    margin-top: 24px !important;
  }
  .elementor-2630 .elementor-element-973ab65 {
    padding-bottom: 20px !important;
  }
  .elementor-2630 .elementor-element-256f552 .qodef-qi-call-to-action .qodef-m-inner {
    padding: 26px 20px !important;
  }
  .elementor-2630 .elementor-widget-google_maps iframe {
    height: 320px !important;
  }
}

/* ==========================================================================
   FIX v=mob149 - Blog Paragraph Font Size 20px & Typography Polish
   ========================================================================== */
.udz-card-excerpt {
  font-size: 15.5px !important;
  line-height: 1.75 !important;
  color: #555 !important;
  margin: 0 0 20px !important;
}

.udz-post-body {
  font-size: 20px !important;
  line-height: 1.85 !important;
  color: #2b2b2b !important;
}

.udz-post-body p {
  font-size: 20px !important;
  line-height: 1.85 !important;
  margin: 0 0 26px !important;
  color: #2b2b2b !important;
  letter-spacing: 0.15px;
}

.udz-post-body ul,
.udz-post-body ol {
  font-size: 20px !important;
  line-height: 1.85 !important;
  margin: 0 0 26px !important;
}

.udz-post-body li {
  margin-bottom: 12px !important;
}

.udz-post-body h2,
.udz-post-body h3 {
  letter-spacing: 0.2px;
}

@media (max-width: 700px) {
  .udz-card-excerpt {
    font-size: 14.5px !important;
    line-height: 1.65 !important;
  }
  .udz-post-body,
  .udz-post-body p,
  .udz-post-body ul,
  .udz-post-body ol {
    font-size: 18px !important;
    line-height: 1.75 !important;
  }
}

/* ==========================================================================
   FIX v=mob153 - Studio Page (The Studio / About Us) Layout, Mobile Typography & Margins
   - Desktop: text-align: justify with inter-word distribution creates flush
     rectangular column with clean 28px margin to the image, 20px font, 1.85 line-height
   - Quotes: Curated architectural ivory callout cards with gold left border
   - Mobile Phone Typography: Reduced paragraph size to clean, proportional 16px
     (with 1.75 line-height / 28px line rhythm and 18px margin) for natural readability
   - Mobile Image: Tall 440px vertical portrait framing (4:5 ratio) directly under quote
   ========================================================================== */
.elementor-2405 .elementor-element-2dc0982 {
  padding: 40px 0 40px !important;
}

.elementor-2405 .elementor-element-2dc0982 .elementor-container {
  max-width: 1400px !important;
  margin: 0 auto !important;
  padding: 0 120px 0 65px !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 28px !important;
}

.elementor-2405 .elementor-element-2dc0982 .elementor-column .elementor-element-populated {
  padding: 0 !important;
}

.elementor-2405 .elementor-element-7112927 {
  width: 58% !important;
  flex: 1 1 58% !important;
}

.elementor-2405 .elementor-element-fb669e0 {
  width: 42% !important;
  flex: 0 0 42% !important;
  max-width: 440px !important;
  position: sticky !important;
  top: 100px !important;
}

.elementor-2405 .elementor-element-d467aa1 h6 {
  font-family: "Montserrat", "Lato", -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 34px !important;
  font-weight: 700 !important;
  letter-spacing: 0.8px !important;
  line-height: 1.25 !important;
  color: #1a1a1a !important;
  margin: 0 0 24px !important;
  text-transform: uppercase !important;
}

.elementor-2405 .elementor-element-d467aa1 p {
  font-family: "Montserrat", "Lato", -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 20px !important;
  line-height: 1.85 !important;
  color: #2b2b2b !important;
  margin: 0 0 24px !important;
  letter-spacing: 0.1px !important;
  text-align: justify !important;
  text-justify: inter-word !important;
}

.elementor-2405 .elementor-element-d467aa1 p:first-of-type {
  border-left: 3px solid #b5975a !important;
  padding: 10px 18px !important;
  font-size: 20px !important;
  line-height: 1.65 !important;
  color: #1a1a1a !important;
  font-style: italic !important;
  margin-bottom: 26px !important;
  background: rgba(181, 151, 90, 0.05) !important;
  border-radius: 0 8px 8px 0 !important;
  text-align: left !important;
}

.elementor-2405 .elementor-element-d467aa1 p:last-of-type {
  border-left: 3px solid #b5975a !important;
  padding: 10px 18px !important;
  font-size: 20px !important;
  line-height: 1.65 !important;
  color: #1a1a1a !important;
  font-style: italic !important;
  margin-top: 26px !important;
  margin-bottom: 0 !important;
  background: rgba(181, 151, 90, 0.05) !important;
  border-radius: 0 8px 8px 0 !important;
  text-align: left !important;
}

.elementor-2405 .elementor-element-54c6103 img {
  width: 100% !important;
  max-height: 640px !important;
  aspect-ratio: 4 / 5 !important;
  object-fit: cover !important;
  object-position: center 36% !important;
  border-radius: 16px !important;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.05) !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  display: block !important;
  transition: transform 0.4s ease, box-shadow 0.4s ease !important;
}

.elementor-2405 .elementor-element-54c6103 img:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 24px 55px rgba(0, 0, 0, 0.16), 0 6px 16px rgba(0, 0, 0, 0.08) !important;
}

.udz-studio-mobile-img-wrap {
  display: none !important;
}

@media (max-width: 900px) {
  .elementor-2405 .elementor-element-2dc0982 {
    padding: 28px 0 36px !important;
  }
  .elementor-2405 .elementor-element-2dc0982 .elementor-container {
    flex-direction: column !important;
    margin: 0 !important;
    padding: 0 24px !important;
    gap: 0 !important;
    max-width: 100% !important;
  }
  .elementor-2405 .elementor-element-7112927 {
    width: 100% !important;
    flex: 1 1 100% !important;
  }
  .elementor-2405 .elementor-element-fb669e0 {
    display: none !important;
  }
  .udz-studio-mobile-img-wrap {
    display: block !important;
    margin: 22px 0 26px !important;
    width: 100% !important;
  }
  .udz-studio-mobile-img-wrap img {
    width: 100% !important;
    height: 440px !important;
    max-height: 480px !important;
    aspect-ratio: 4 / 5 !important;
    object-fit: cover !important;
    object-position: center 36% !important;
    border-radius: 16px !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.14) !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    display: block !important;
  }
  .elementor-2405 .elementor-element-d467aa1 h6 {
    font-size: 26px !important;
    line-height: 1.25 !important;
    margin-bottom: 18px !important;
    letter-spacing: 0.5px !important;
  }
  .elementor-2405 .elementor-element-d467aa1 p {
    font-size: 16px !important;
    line-height: 1.75 !important;
    color: #2b2b2b !important;
    margin-bottom: 18px !important;
    text-align: left !important;
    letter-spacing: 0.1px !important;
  }
  .elementor-2405 .elementor-element-d467aa1 p:first-of-type {
    font-size: 16px !important;
    line-height: 1.65 !important;
    padding: 10px 16px !important;
    border-left: 3px solid #b5975a !important;
    margin-bottom: 18px !important;
  }
  .elementor-2405 .elementor-element-d467aa1 p:last-of-type {
    font-size: 16px !important;
    line-height: 1.65 !important;
    padding: 10px 16px !important;
    border-left: 3px solid #b5975a !important;
    margin-top: 20px !important;
    margin-bottom: 0 !important;
  }
}

/* ==========================================================================
   FIX v=mob154 - Our Services (3357) Typography Enhancement
   - Paragraph font size increased to 22px Montserrat (400 weight, 1.85 line-height)
     for substantial architectural presence matching Studio and Blog pages
   - Mobile: increased from 14px to 16px with 1.75 line-height
   ========================================================================== */
.elementor-3357 .qodef-m-text,
.elementor-3357 .elementor-widget-text-editor p {
  font-family: "Montserrat", sans-serif !important;
  font-weight: 400 !important;
  font-size: 22px !important;
  line-height: 1.85 !important;
  color: #2b2b2b !important;
  letter-spacing: 0.1px !important;
}

@media (max-width: 900px) {
  .elementor-3357 .qodef-m-text,
  .elementor-3357 .elementor-widget-text-editor p {
    font-size: 16px !important;
    line-height: 1.75 !important;
    color: #2b2b2b !important;
    margin-bottom: 18px !important;
  }
}

/* ==========================================================================
   FIX v=mob157 - Awards Page (8493) Stage Presentation Ceremony & Citation Gallery
   - Spotlight stage ceremony card featuring Ar. Umair Rehaman receiving the 2024 Award
   - Responsive desktop 2-column grid and mobile single-column stacking
   - Divider section header for genuine certificates, plaques, and trophies
   ========================================================================== */
.elementor-8493 .udz-award-stage-card {
  background: #ffffff !important;
  border: 1px solid #dfd5c4 !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  display: grid !important;
  grid-template-columns: 1.15fr 1fr !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.07) !important;
  max-width: 1200px !important;
  margin: 0 auto 52px auto !important;
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease !important;
}

.elementor-8493 .udz-award-stage-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.12) !important;
  border-color: #bfa054 !important;
}

.elementor-8493 .udz-stage-media {
  position: relative !important;
  width: 100% !important;
  min-height: 400px !important;
  background: #161616 !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.elementor-8493 .udz-stage-media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center 20% !important;
  display: block !important;
  transition: transform .5s ease !important;
}

.elementor-8493 .udz-award-stage-card:hover .udz-stage-media img {
  transform: scale(1.03) !important;
}

.elementor-8493 .udz-stage-body {
  padding: 40px 42px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  background: #ffffff !important;
  box-sizing: border-box !important;
}

.elementor-8493 .udz-stage-title {
  font-family: Questrial, sans-serif !important;
  font-size: clamp(22px, 2.1vw, 27px) !important;
  font-weight: 400 !important;
  color: #111111 !important;
  line-height: 1.32 !important;
  margin: 0 0 16px 0 !important;
}

.elementor-8493 .udz-stage-conferrer {
  font-family: Questrial, sans-serif !important;
  font-size: 15.5px !important;
  line-height: 1.55 !important;
  color: #333333 !important;
  margin-bottom: 14px !important;
  padding-bottom: 14px !important;
  border-bottom: 1px dashed #e7e1d9 !important;
}

.elementor-8493 .udz-stage-conferrer strong {
  display: block !important;
  font-weight: 600 !important;
  color: #111111 !important;
  margin-bottom: 4px !important;
}

.elementor-8493 .udz-stage-conferrer span {
  display: block !important;
  font-size: 14px !important;
  color: #666666 !important;
}

.elementor-8493 .udz-stage-desc {
  font-family: Questrial, sans-serif !important;
  font-size: 15.5px !important;
  line-height: 1.65 !important;
  color: #555555 !important;
  margin: 0 !important;
}

.elementor-8493 .udz-awards-section-divider-wrap {
  text-align: center !important;
  max-width: 800px !important;
  margin: 10px auto 44px auto !important;
  padding-top: 24px !important;
  border-top: 1px solid #ede8e0 !important;
}

.elementor-8493 .udz-awards-sub-heading {
  font-family: Questrial, sans-serif !important;
  font-size: clamp(26px, 2.8vw, 34px) !important;
  font-weight: 400 !important;
  color: #111111 !important;
  margin: 6px 0 10px 0 !important;
}

.elementor-8493 .udz-awards-section-subtitle {
  font-family: Questrial, sans-serif !important;
  font-size: 16px !important;
  color: #666666 !important;
  margin: 0 !important;
  line-height: 1.6 !important;
}

@media (max-width: 992px) {
  .elementor-8493 .udz-stage-body {
    padding: 30px 28px !important;
  }
}

@media (max-width: 768px) {
  .elementor-8493 .udz-award-stage-card {
    grid-template-columns: 1fr !important;
    margin-bottom: 38px !important;
  }
  .elementor-8493 .udz-stage-media {
    min-height: 240px !important;
    max-height: 320px !important;
  }
  .elementor-8493 .udz-stage-media .udz-award-pill {
    font-size: 9px !important;
    padding: 4px 10px !important;
    letter-spacing: 1px !important;
    top: 12px !important;
    right: 12px !important;
  }
  .elementor-8493 .udz-stage-body {
    padding: 24px 20px !important;
  }
  .elementor-8493 .udz-stage-title {
    font-size: 20px !important;
  }
  .elementor-8493 .udz-stage-desc {
    font-size: 14.5px !important;
  }
}

/* GABA 2021 Official Winner Celebration Banner */
.elementor-8493 .udz-award-banner-wrap {
  width: 100% !important;
  max-width: 960px !important;
  margin: 10px auto 52px auto !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.08) !important;
  border: 1px solid #dfd5c4 !important;
  transition: transform .35s ease, box-shadow .35s ease !important;
}

.elementor-8493 .udz-award-banner-wrap:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.13) !important;
}

.elementor-8493 .udz-award-banner-img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
}

/* ========================================================================
   FIX v=mob161 - Mobile Back-to-Top Arrow Prominent Sizing Polish
   ======================================================================== */
@media (max-width: 1024px) {
  .udz-totop {
    display: flex !important;
    right: calc(16px + env(safe-area-inset-right, 0px)) !important;
    bottom: calc(24px + env(safe-area-inset-bottom, 0px)) !important;
    width: 70px !important;
    height: 70px !important;
    z-index: 99999 !important;
    background: transparent !important;
  }
  .udz-totop svg {
    width: 70px !important;
    height: 35px !important;
  }
  .udz-totop:active {
    transform: scale(0.92) !important;
  }
  .udz-mobile-social {
    padding: 20px calc(80px + env(safe-area-inset-right, 0px)) 20px 20px !important;
  }
}




/* ========================================================================
   FIX v=mob162 - Heading Font Size Harmonization Across Studio, Architect, Awards, Services, Blog & Testimonials
   ======================================================================== */

/* 1. The Studio Page (2405) - "AN ARCHITECTURE & INTERIOR DESIGN STUDIO" */
.elementor-2405 .elementor-element-d467aa1 h6 {
  font-size: 24px !important;
  letter-spacing: 0.6px !important;
  line-height: 1.3 !important;
  margin: 0 0 20px !important;
}
@media (max-width: 900px) {
  .elementor-2405 .elementor-element-d467aa1 h6 {
    font-size: 20px !important;
    margin-bottom: 16px !important;
  }
}

/* 2. The Architect Page (2245) - "Ar. Umair Rehaman" */
.elementor-2245 .elementor-element-101f843 .elementor-heading-title {
  font-size: clamp(25px, 2.4vw, 32px) !important;
  line-height: 1.25 !important;
}
@media (max-width: 900px) {
  .elementor-2245 .elementor-element-101f843 .elementor-heading-title {
    font-size: 22px !important;
  }
}

/* 3. Awards Page (8493) - "Awards & Accolades" */
.elementor-8493 .udz-awards-main-title {
  font-size: clamp(25px, 2.5vw, 32px) !important;
  line-height: 1.25 !important;
}
.elementor-8493 .udz-stage-title {
  font-size: 20px !important;
  line-height: 1.35 !important;
}
.elementor-8493 .udz-awards-sub-heading {
  font-size: 19px !important;
  line-height: 1.35 !important;
}
@media (max-width: 900px) {
  .elementor-8493 .udz-awards-main-title {
    font-size: 22px !important;
  }
  .elementor-8493 .udz-stage-title {
    font-size: 18px !important;
  }
}

/* 4. Our Services Page (3357) - "Architecture", "Interior Design", "Project Management" */
.elementor-3357 .qodef-m-title {
  font-size: 34px !important;
  line-height: 1.3 !important;
  letter-spacing: 0.5px !important;
}
@media (max-width: 900px) {
  .elementor-3357 .qodef-m-title {
    font-size: 26px !important;
  }
}

/* 5. Blog Pages - Listing title, post titles, and all in-body headings */
.udz-blog-title {
  font-size: 26px !important;
}
.udz-post-title {
  font-size: 26px !important;
  line-height: 1.25 !important;
}
.udz-post-body h1,
.udz-post-body h2,
.udz-post-body h3,
.udz-post-body h4,
.udz-post-body h5,
.udz-post-body h6 {
  font-size: 24px !important;
  line-height: 1.3 !important;
  margin: 40px 0 18px !important;
}
@media (max-width: 700px) {
  .udz-blog-title,
  .udz-post-title {
    font-size: 22px !important;
  }
  .udz-post-body h1,
  .udz-post-body h2,
  .udz-post-body h3,
  .udz-post-body h4,
  .udz-post-body h5,
  .udz-post-body h6 {
    font-size: 20px !important;
    margin: 32px 0 14px !important;
  }
}

/* 6. Testimonials Page - "Testimonials" Hero Heading */
.udz-testi-hero .udz-testi-title,
.udz-testi-title {
  font-size: clamp(25px, 2.7vw, 32px) !important;
  line-height: 1.25 !important;
}
@media (max-width: 700px) {
  .udz-testi-hero .udz-testi-title,
  .udz-testi-title {
    font-size: 24px !important;
  }
}

/* ==========================================================================
   FIX v=mob166 - Reach Us Side-by-Side Cards & Refined Architecture Typography
   - Side-by-side cards on desktop: Phone (RING US @:) on left, Mail (MAIL US @:) on right
   - Equal height alignment (align-items: stretch) with balanced proportions
   - Sleek typography: 500 weight for phones (+91 99162 11402, +91 98864 33108),
     clean 400 weight for emails without bullet dots, no awkward text breaks
   - Responsive stacking on mobile (<= 767px)
   ========================================================================== */
.udz-reach-grid {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  gap: 14px !important;
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 0 24px 0 !important;
}
.udz-reach-card {
  background: #ffffff !important;
  border: 1px solid #e8e4dc !important;
  border-radius: 14px !important;
  padding: 20px 18px 22px !important;
  box-shadow: 0 4px 18px rgba(0,0,0,0.03) !important;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
}
.udz-reach-card:hover {
  transform: translateY(-2px) !important;
  border-color: #d6ccbd !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.06) !important;
}
.udz-reach-card--phone {
  flex: 0 0 195px !important;
  min-width: 0 !important;
}
.udz-reach-card--mail {
  flex: 1 1 0 !important;
  min-width: 0 !important;
}
.udz-reach-head {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  margin-bottom: 14px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid #f0ece5 !important;
}
.udz-reach-ic {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 7px !important;
  background: rgba(181,151,90,0.1) !important;
  color: #9c7b3c !important;
  flex-shrink: 0 !important;
}
.udz-reach-ic svg {
  width: 15px !important;
  height: 15px !important;
}
.udz-reach-title {
  font-family: Montserrat, sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .12em !important;
  color: #111111 !important;
  margin: 0 !important;
  text-transform: uppercase !important;
  line-height: 1.2 !important;
}
.udz-reach-body {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  flex: 1 1 auto !important;
  justify-content: space-between !important;
}
.udz-reach-body--phones {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  justify-content: flex-start !important;
}
.udz-reach-entry {
  display: flex !important;
  flex-direction: column !important;
}
.udz-reach-label {
  display: block !important;
  font-family: Montserrat, sans-serif !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: #8c8273 !important;
  margin-bottom: 4px !important;
}
.udz-reach-link {
  display: inline-block !important;
  font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  text-decoration: none !important;
  transition: color .2s ease !important;
}
.udz-reach-link:hover {
  color: var(--udz-gold, #b5975a) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}
.udz-reach-tel {
  font-size: 16.5px !important;
  font-weight: 500 !important;
  color: #1a1a1a !important;
  letter-spacing: 0.2px !important;
  line-height: 1.3 !important;
}
.udz-reach-mail-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
}
.udz-reach-mail-row {
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
}
.udz-reach-mail-dot {
  display: none !important;
}
.udz-reach-mail {
  font-size: 14px !important;
  font-weight: 400 !important;
  color: #222222 !important;
  line-height: 1.38 !important;
  white-space: nowrap !important;
}
.udz-reach-divider {
  display: none !important;
}
@media (max-width: 767px) {
  .udz-reach-grid {
    flex-direction: column !important;
    gap: 12px !important;
    margin-bottom: 20px !important;
  }
  .udz-reach-card--phone,
  .udz-reach-card--mail {
    flex: 1 1 auto !important;
    width: 100% !important;
  }
  .udz-reach-mail {
    white-space: normal !important;
    word-break: break-all !important;
  }
}

/* ==========================================================================
   FIX v=mob164 - Our Services Heading Text Size Refinement
   - Increased .elementor-3357 .qodef-m-title from 26px to 34px on desktop (26px mobile)
     establishing clear, balanced visual hierarchy over the 22px body paragraph.
   ========================================================================== */

/* ==========================================================================
   FIX v=mob168 - Footer Logo & Monogram Alignment Refinement (0.5cm Up)
   - Raised footer logo and monogram lockup 0.5cm up (from 35px to 17px desktop,
     20px to 10px mobile) to harmonize visual baseline with Email and Nav headers.
   ========================================================================== */
.ekit-template-content-footer .udz-foot-logo .udz-foot-lockup,
.ekit-template-content-footer .elementor-widget-image .udz-foot-lockup,
.ekit-template-content-footer img.udz-foot-lockup {
  margin-top: 17px !important;
}
@media (max-width: 1024px) {
  .ekit-template-content-footer .udz-foot-logo .udz-foot-lockup,
  .ekit-template-content-footer .elementor-widget-image .udz-foot-lockup,
  .ekit-template-content-footer img.udz-foot-lockup {
    margin-top: 10px !important;
  }
}

/* ==========================================================================
   FIX v=mob169 - Homepage Headline & Intro Typography Refinement
   - Headings ("We blend a curve..." and "Recognizing the need..."):
     reduced text size a little (from 26-27px to 24px desktop, 20px mobile)
     and made a little bold (font-weight: 600) for balanced visual hierarchy.
   - Paragraphs ("The emphasizing features..." and "Greetings! Unitz Dezignz..."):
     reduced text size a little (from 22px to 19px desktop, 15px mobile)
     with comfortable 1.7 line-height.
   - Numbered card titles (Ministration, Conception, Perception):
     aligned with font-weight: 600.
   - Strictly scoped to the home page (.elementor-8001 / .elementor-element-642f2ee / hero).
   ========================================================================== */
.elementor-8001 .elementor-element-642f2ee .qodef-m-title,
.elementor-element-642f2ee .qodef-m-title,
.elementor-element-642f2ee h5.qodef-m-title {
  font-size: 24px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  letter-spacing: 0.02em !important;
}
.elementor-8001 .elementor-element-642f2ee .qodef-m-text,
.elementor-element-642f2ee .qodef-m-text,
.elementor-element-642f2ee p.qodef-m-text {
  font-size: 19px !important;
  line-height: 1.7 !important;
  letter-spacing: 0.01em !important;
  font-weight: 300 !important;
  color: #121212 !important;
  font-family: 'Roboto', sans-serif !important;
  margin-top: 16px !important;
}
/* ==========================================================================
   FIX v=mob171 - Homepage Hero Exact 1:1 Match with Below Section
   - Heading (layer-1): exact 24px, weight 600, line-height 1.35, letter-spacing 0.02em, text-wrap balance, width 460px.
   - Paragraph (layer-7): exact 19px, line-height 1.7, letter-spacing 0.01em, weight 300, color #121212, width 500px, text-wrap pretty.
   - Button (layer-2): pulled up to ~28px gap below paragraph matching AWARDS button.
   - Left baseline: 82px for layers 5, 1, 7, 2 on screens >= 768px.
   ========================================================================== */
#slider-4-slide-7-layer-1,
rs-layer#slider-4-slide-7-layer-1 {
  width: 460px !important;
  max-width: 460px !important;
}
#slider-4-slide-7-layer-1 .qodef-m-title,
#slider-4-slide-7-layer-1 h4.qodef-m-title {
  font-size: 24px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  letter-spacing: 0.02em !important;
  text-wrap: balance !important;
  max-width: 460px !important;
  margin: 0 !important;
}
#slider-4-slide-7-layer-7,
rs-layer#slider-4-slide-7-layer-7 {
  width: 500px !important;
  max-width: 500px !important;
}
rs-layer#slider-4-slide-7-layer-7,
#slider-4-slide-7-layer-7,
#slider-4-slide-7-layer-7 .qodef-m-text,
#slider-4-slide-7-layer-7 p {
  font-size: 19px !important;
  line-height: 1.7 !important;
  letter-spacing: 0.01em !important;
  font-weight: 300 !important;
  color: #121212 !important;
  font-family: 'Roboto', sans-serif !important;
  max-width: 500px !important;
  text-wrap: pretty !important;
  text-align: left !important;
  margin: 0 !important;
}
#slider-4-slide-7-layer-2,
rs-layer#slider-4-slide-7-layer-2 {
  margin-top: 0 !important;
}
@media (min-width: 768px) {
  #slider-4-slide-7-layer-5,
  #slider-4-slide-7-layer-1,
  #slider-4-slide-7-layer-7,
  #slider-4-slide-7-layer-2 {
    left: 82px !important;
  }
}
.elementor-element-77d1a9e .qodef-numbered-text .qodef-m-title {
  font-weight: 600 !important;
}
@media (max-width: 1024px) {
  .udz-hero-br {
    display: none;
  }
  .udz-mobile-hero__heading {
    font-size: 20px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    text-wrap: balance !important;
  }
  .udz-mobile-hero__text {
    font-size: 15px !important;
    line-height: 1.65 !important;
  }
}
@media (max-width: 600px) {
  .elementor-element-642f2ee .qodef-m-title {
    font-size: 20px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
  }
  .elementor-element-642f2ee .qodef-m-text {
    font-size: 15px !important;
    line-height: 1.65 !important;
  }
}
/* ==========================================================================
   FIX v=mob172 - Homepage Paragraphs Justified Alignment & Margins
   ========================================================================== */
.elementor-8001 .elementor-element-642f2ee .qodef-m-text {
  text-align: justify !important;
  text-justify: inter-word !important;
}

/* ==========================================================================
   FIX v=mob173 - Tighten Gap Between Hero Heading and Paragraph
   ========================================================================== */
@media (min-width: 1025px) {
  #slider-4-slide-7-layer-7,
  rs-layer#slider-4-slide-7-layer-7 {
    margin-top: -38px !important;
  }
  #slider-4-slide-7-layer-2,
  rs-layer#slider-4-slide-7-layer-2 {
    margin-top: -38px !important;
  }
}

/* ==========================================================================
   FIX v=mob174 - Portfolio Project Uncropped Full HD Images (Experiment)
   ========================================================================== */
.udz-project .udz-swiper .swiper-slide img,
.udz-project .udz-swiper--fill .swiper-slide img {
  object-fit: contain !important;
  background-color: #fff !important; /* gaps around uncropped images blend into the white page */
}
/* FIX v=mob175 - no dark/off-white bands beside uncropped portfolio images:
   the slider frame and every image slide match the white page background. */
.udz-project .udz-swiper,
.udz-project .udz-swiper .swiper-slide:not(.udz-slide--video) {
  background: #fff !important;
}

/* ==========================================================================
   FIX v=mob176 - Homepage "We blend a curve..." paragraph on phones/tablets
   mob172 justified it at every width; in the narrow mobile column that
   stretched word gaps into uneven rivers. Desktop stays justified; up to
   900px it reads left-aligned like the hero text above and the Studio page.
   ========================================================================== */
@media (max-width: 900px) {
  .elementor-8001 .elementor-element-642f2ee .qodef-m-text,
  .elementor-element-642f2ee .qodef-m-text {
    text-align: left !important;
    text-justify: auto !important;
  }
}

/* ==========================================================================
   FIX v=mob177 - Homepage "We blend a curve..." section matches the hero text on phones
   On mobile this section had Questrial 24px headings, 19px body (the desktop
   rule's 3-class selector beat the old mobile 15px rule) and ~50px side
   margins, so it looked unlike the "Recognizing the need..." block above.
   Up to 767px it now uses the hero's exact type: Montserrat 20/600 heading,
   Roboto 15/300 body, 20px side margins. Desktop untouched.
   ========================================================================== */
@media (max-width: 767px) {
  .elementor-8001 .elementor-element-6f0fea5 > .elementor-widget-wrap.elementor-element-populated {
    padding-left: 4px !important;
    padding-right: 4px !important;
  }
  .elementor-8001 .elementor-element-642f2ee,
  .elementor-8001 .elementor-element-642f2ee .elementor-widget-container {
    width: 100% !important;
    max-width: 100% !important;
  }
  .elementor-8001 .elementor-element-642f2ee h5.qodef-m-title {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    line-height: 27px !important;
    letter-spacing: 0.5px !important;
    color: #111 !important;
    text-wrap: pretty;
  }
  .elementor-8001 .elementor-element-642f2ee p.qodef-m-text {
    font-family: 'Roboto', sans-serif !important;
    font-size: 15px !important;
    font-weight: 300 !important;
    line-height: 1.65 !important;
    letter-spacing: 0.17px !important;
    color: #2b2b2b !important;
    text-align: left !important;
  }
}