.elementor-kit-8{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-8 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* Scandia Knolls build tweaks. Elementor > Site Settings > Custom CSS. */

/* ===== BRANDING =========================================================
   The nexsas header and footer render from a theme template that is not
   exposed to the REST API, so logo files are overridden here. Each img keeps
   its alt text and link; only the rendered file changes. The source wordmark
   is white (built for the old navy header), so the light header gets a navy
   recolour and the dark footer keeps the white original. Explicit sizes are
   required: the SVG has a viewBox but no intrinsic width/height, so a replaced
   image would otherwise render at zero.
   ======================================================================== */
img.main-logo { content: url("https://scandia2.kiranbuilds.com/wp-content/uploads/2026/07/scandia-knolls-logo-navy.svg"); width: 200px; height: 15px; max-height: none; }
img.mobile-logo { content: url("https://scandia2.kiranbuilds.com/wp-content/uploads/2026/07/scandia-knolls-logo-navy.svg"); width: 165px; height: 13px; max-height: none; }
img.wp-image-39831 { content: url("https://scandia2.kiranbuilds.com/wp-content/uploads/2026/07/scandia-knolls-logo.svg"); width: 200px; height: 15px; }

/* ===== HEADER LAYOUT ====================================================
   Requested: logo hard left and CTA hard right, both OUTSIDE the rounded
   border; only the menu items sit inside it. The theme ships all three inside
   one pill, so the pill styling moves off the wrapper and onto the menu list.
   ======================================================================== */
.nav-menu.header-one {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  justify-content: space-between !important;
  gap: 24px;
  padding-left: 0 !important;
  padding-right: 0 !important;
  max-width: 1320px !important;
  width: 100%;
}

/* the menu list becomes the pill */
.nav-menu.header-one .nextsaas_nav_menu {
  background: #ffffff;
  border: 1px solid rgba(22, 34, 44, 0.10);
  border-radius: 999px;
  padding: 6px 14px;
  box-shadow: 0 10px 30px -14px rgba(22, 34, 44, 0.20);
  flex-wrap: nowrap;
  gap: 2px;
}

/* keep every label on one line; the wrapping looked broken */
.nav-menu.header-one .nextsaas_nav_menu > li > a {
  white-space: nowrap;
  padding-left: 13px;
  padding-right: 13px;
}

/* logo left, CTA right, neither stretching */
.nav-menu.header-one .header-logo { flex: 0 0 auto; margin-right: auto; }
.nav-menu.header-one > div:last-child { flex: 0 0 auto; margin-left: auto; }

/* ===== LAYOUT FIXES ===================================================== */

/* Apartments have one rent, so the monthly/yearly switch is meaningless. */
.pricing-toggle-container { display: none !important; }

/* Resident quotes carry no invented portrait, so reclaim the space. */
.nextsaas-testimonial-layout-3 .testimonial-image-wrapper:empty { display: none !important; }

/* A decorative demo image overhangs its section and adds horizontal scroll. */
.elementor-element-7fac2945 { overflow: hidden; }

/* Property photos are landscape; the demo slots expected tall screenshots. */
.elementor-widget-image img { object-fit: cover; }


/* The amenity grid's left card was sized around a tall product screenshot.
   With an icon instead it should hug its content rather than stretch to match
   the two stacked cards beside it. */
.elementor-element-cdda0e8 { align-items: flex-start; }
.elementor-element-bc4c76e, .elementor-element-e1b54b9 { align-items: flex-start; }
.elementor-element-490ace4, .elementor-element-ae0a1a2 { align-self: flex-start; }

/* --- round four polish --- */

/* The demo's violet blobs. gradient-36 is also what pushed the document 5px
   wide on Neighborhood and About, so hiding it fixes the overflow too. */
img[src*="gradient-36"],
img[src*="gradient-45"],
img[src*="gradient-4-2"],
img[src*="gradient-47"],
img[src*="price-bg"] { display: none !important; }

/* The accordion gradient is the effect the client liked, so keep it but pull it
   off violet and onto the brand navy. */
img[src*="gradient-23"] {
  filter: hue-rotate(178deg) saturate(0.45) brightness(1.06);
  opacity: 0.55;
}

/* The open-accordion look, now on hover for every question. */
.accordion-item { transition: background-color .28s ease, border-color .28s ease; }
.accordion-item:hover { background-color: #f4f5f8 !important; border-color: #d7dde5 !important; }
.accordion-item:hover .accordion-action { cursor: pointer; }

/* Footer: plain, no neon wash. */
.nextsaas-footer [class*="gradient"],
footer [class*="gradient"],
.nextsaas-footer img[src*="gradient"],
footer img[src*="gradient"] { display: none !important; }
.nextsaas-footer, footer.nextsaas-footer { background-image: none !important; }

/* Floor plan cards centred rather than left-packed. */
.nextsaas_pricing_wrapper .nextsaas-pricing-container { justify-content: center; }
.nextsaas_pricing_wrapper .pricing-cards,
.nextsaas_pricing_wrapper [class*="grid"] { justify-content: center; margin-inline: auto; }

/* Amenity cards: even heights so the column gap closes. */
.elementor-element-cdda0e8 .e-con-inner,
.elementor-element-bc4c76e,
.elementor-element-e1b54b9 { align-items: stretch; }
.elementor-element-490ace4,
.elementor-element-ae0a1a2 { align-self: stretch; }

/* Hover reveal on the amenity and feature cards. */
.sk-hover-card { position: relative; overflow: hidden; }
.sk-hover-card .sk-hover-img {
  position: absolute; inset: auto 0 0 0; height: 58%;
  opacity: 0; transform: translateY(14px) scale(1.02);
  transition: opacity .45s ease, transform .45s ease;
  pointer-events: none;
}
.sk-hover-card .sk-hover-img img {
  width: 100%; height: 100%; object-fit: cover;
  border-radius: 0 0 12px 12px; display: block;
}
.sk-hover-card:hover .sk-hover-img { opacity: 1; transform: translateY(0) scale(1); }

/* Hero image: full-bleed and tall. It is the first thing anyone sees. */
.sk-hero-full { width: 100vw !important; max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; }
.sk-hero-full img { width: 100vw !important; max-width: none !important;
  height: 78vh !important; min-height: 520px; object-fit: cover; object-position: center 58%;
  border-radius: 0 !important; display: block; }
@media (max-width: 767px) {
  .sk-hero-full img { height: 62vh !important; min-height: 380px; }
}

/* The hero sits inside a boxed container with padding; neutralise the ancestors
   so the image truly reaches both edges. */
.sk-hero-full { position: relative; left: 50%; right: 50%;
  margin-left: -50vw !important; margin-right: -50vw !important;
  width: 100vw !important; max-width: 100vw !important; padding: 0 !important; }
.sk-hero-full .elementor-widget-container { padding: 0 !important; }

/* The hero's parent container clips at the 1290px boxed width and adds padding,
   which is what stopped the image reaching the edges. */
.elementor-element-6b63001 { overflow: visible !important; padding: 0 !important; }
.elementor-element-6b63001 > .e-con-inner { max-width: none !important; padding: 0 !important; }/* End custom CSS */