/* Pixelartist shared stylesheet — consolidated replacement, not an add-on.
   Keep vendor styles before this file; remove duplicate old custom CSS links.
   Inter is optional: system fonts are used unless Inter is loaded in your HTML. */

:root {
  --font-sans: "Inter", system-ui, -apple-system, sans-serif;

  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-h3: clamp(1.25rem, 2vw, 1.5rem);
  --text-h2: clamp(1.75rem, 3vw, 2.5rem);
  --text-h1: clamp(2.25rem, 5vw, 4rem);

  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4.5rem;

  --color-text: #172033;
  --color-muted: #526074;
  --color-border: #dbe2ea;
  --color-surface: #f5f7fa;
  --color-accent: #175cd3;

  --radius: 0.75rem;
  --content-width: 72rem;

}

/* Existing layout, navigation, and compatibility classes */
.wbg {
  background: #fff;
  color: #333;
}

.bg1 {
  background: #fafafa;
  color: #333;
}

.bg2 {
  background: #fff;
  border-top: 1px solid #f5f5f5;
  border-bottom: 1px solid #f5f5f5;
  color: #333;
}

.bg3 {
  background: #1e1e1e;
}

.bg4 {
  background: #f6f3ec;
  color: #000;
}

.bg5 {
  background: #f9f9f9;
}

.bg7 {
  background: #3598dc;
  color: #fff;
}

.bg8 {
  background: #dde3de;
}

.bgku {
  background: #011520;
  color: #fff;
}

.bbg {
  background: #000;
  color: #efefef;
}

.card, .list-group {
  border-radius: var(--radius);
}

.border {
  border: 1px solid #e5e5e5;
}

.f2 {
  font-family: 'Spectral', serif;
}

.color-1-type {
  color: #3598dc;
}

.cw {
  color: #fff;
}

.c1 {
  color: #e1c796;
}

.c2 {
  color: #e9e5f9;
}

.c5 {
  color: #ffe89f;
}

.c7 {
  color: #3598dc;
}

.c8 {
  color: #f5f3ff;
}

.top {
  margin-top: 200px;
}

.padding {
  padding: 15px;
}

.p-t {
  padding-top: 15px;
}

h3 > a {
  text-decoration: none;
}

.heading-no-margin h1, .heading-no-margin h2, .heading-no-margin h3, .heading-no-margin h4 {
  margin-top: 0;
}

q {
  font-size: 21px;
  color: #8a8a8a;
  font-style: italic;
}

a:hover {
  text-decoration: underline;
}

.section {
  width: 100%;
}

.container, .container-sm, .container-fl {
  position: relative;
  margin: 0 auto;
}

.section .container {
  padding: 10px 10px 30px 15px;
}

.section .container-sm {
  padding: 30px 0 10px 0;
  position: relative;
}

.section .container-fl {
  padding: 0 15px;
  position: relative;
}

.hold {
  min-height: 70px;
}

.hold.small {
  min-height: 60px;
}

.header {
  width: 100%;
  transition: line-height .2s linear, box-shadow .2s linear;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  background-color: #000;
  min-height: 70px;
}

.header-white {
  width: 100%;
  transition: line-height .2s linear, box-shadow .2s linear;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  background-color: #fff;
  min-height: 70px;
}

.logomark {
  margin-right: 15px;
  height: 23px;
  top: -2px;
  position: relative;
}

.image-fit img {
  width: 100%;
}

.header.small {
  box-shadow: 0 1px 6px 0 rgba(50,50,50,0.6);
  min-height: 60px;
}

.header.small > .container > #logo {
  float: left;
}

.header.small > div.container > div#mainnav ul.nav {
  margin: 22px 0 0;
}

#logo {
  position: relative;
  font-size: 30px;
  float: left;
  top: 11px;
}

.header .container #logo a:link,
.header .container #logo a:hover, 
.header .container #logo a:visited {
  color: #fff !important;
  text-decoration: none;
}

.header-white .container #logo a:link,
.header-white .container #logo a:hover, 
.header-white .container #logo a:visited {
  color: #000!important;
  text-decoration: none;
}

.logo-box {
  width: 130px;
  height: 110px;
  border: 1px solid #efefef;
  border-radius: 8px;
  margin: 4px;
  padding: 10px;
  display: inline-block;
  overflow: hidden;
}

.ul-left ol, .ul-left ul {
  padding-left: 15px;
}

.nav>li>a {
  padding: 10px;
}

ul.nav li {
  float: left;
  position: relative;
}

ul.nav li a {
  color: #fff;
  text-decoration: initial;
}

#mainnav ul.nav {
  text-align: right;
  float: right;
  position: relative;
  margin: 25px 0 0;
  padding: 0;
  border-radius: 8px;
}

#mainnav ul.nav li {
  display: inline-block;
}

#mainnav ul.nav li a {
  font-size: 14px;
  border-radius: 8px;
  padding: 10px;
}

#mainnav ul.nav li:last-child {
  border-right: none;
}

#mainnav ul.nav li:hover a,#mainnav ul.nav li:visited a {
  background: #1e1e1e;
}

#sidenav ul.nav li {
  width: 100%;
  border-bottom: 1px solid #333;
}

#sidenav ul.nav li a {
  font-size: 23px;
  float: left;
  width: 100%;
}

#sidenav ul.nav li:hover a {
  background: #333;
}

.sidenav {
  display: none;
  height: 100%;
  max-width: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: rgb(0 0 0 / 90%);
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.sidenav .closeNav {
  position: absolute;
  top: 10px;
  right: 25px;
  color: #fff;
  font-size: 28px;
  text-decoration: none;
}

.openNav {
  float: left;
  font-size: 20px;
  padding: 6px 20px 0 0;
}

.closeNav {
  float: left;
  font-size: 20px;
  padding: 6px 20px 0 0;
}

.p-links {
  list-style: none;
  margin: 16px 0;
  padding: 0;
  font-size: 14px;
  display: inline-block;
}

.p-links li {
  list-style: none;
  display: inline-block;
  padding: 2px 20px;
}

.p-links li.active a {
  border-bottom: 3px solid #d9edf7;
  padding-bottom: 4px;
}

.p-links li a:link,.p-links li a:visited, .p-links li a:hover {
  text-decoration: none;
}

q a:link, q a:visited, q a:hover {
  text-decoration: none;
  color: #8a8a8a;
}

ul.nav li a:visited {
  color: #efefef;
}

ul.navlinks {
  font-size: 30px;
  list-style-type: none;
  margin: 0 3px;
  color: #efefef;
}

ul.navlinks li {
  display: inline-block;
  margin: 0 8px;
}

ul.navlinks li a, ul.navlinks li a:visited, ul.navlinks li a:hover {
  color: #efefef;
}

.uppercase {
  text-transform: uppercase;
}

.reference {
  color: var(--color-muted);
  font-style: italic;
}

.rounded {
  border-radius: 5px;
}

.rounded-top {
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.section .slider {
  background: #dde3de;
}

.hero {
  color: #FFF;
}

h1.hero:after {
  content: "";
  width: 300px;
  position: relative;
  border-bottom: 1px solid #aaa;
  text-align: center;
  margin: 15px auto auto;
}

.call {
  color: #FFF;
  display: block;
  margin-bottom: 20px;
}

.call span {
  display: inline;
  border: 1px solid #FFF;
  font-size: 20px;
  transition: background .15s linear;
  padding: 8px 13px;
}

.call span:hover {
  background: #efefef;
  cursor: pointer;
}

.col {
  float: left;
  position: relative;
  margin: 0;
  padding: 0;
}

.col.four {
  width: 23%;
  margin: 10px 0;
  padding: 5px 1%;
}

.col.three {
  width: 31%;
  margin: 10px 1%;
  padding: 5px 1%;
}

.col.two {
  width: 48%;
  margin: 10px 1%;
  padding: 10px 1%;
}

.col.one {
  width: 98%;
  margin: 10px 1%;
  padding: 10px 1%;
}

.col.one-plain {
  padding: 20px 0;
}

.col.extrapad {
  padding-top: 20px;
  padding-bottom: 20px;
}

.col .service:after {
  content: "";
  width: 50px;
  position: relative;
  border-bottom: 1px solid #eee;
  display: block;
  text-align: center;
  margin: 15px auto auto;
}

.col .feature {
  font-size: 19px;
  font-weight: 400;
}

.col h1.side,.col p.side,.col span.side:first-of-type {
  margin-left: 50px;
  text-align: left;
}

.icon-circle {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: #f5f3ff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #7367f0;
  font-size: 20px;
}

.icon-small {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #f5f3ff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #7367f0;
  flex-shrink: 0;
}

.outcome-card {
  border: 1px solid #e8e8ef;
  border-radius: 14px;
  padding: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.outcome-stat {
  font-size: 2rem;
  font-weight: 700;
  color: #7367f0;
  white-space: nowrap;
}

.col .icon a {
  color: #333;
}

.col .icon {
  border-radius: 50%;
  height: 85px;
  width: 85px;
  line-height: 85px;
  text-align: center;
  background: #efefef;
  transition: background .25s linear, color .25s linear;
  margin: 0 auto;
}

.col .icon .glyphicons {
  font-size: 40px;
  top: 27%;
}

.col .icon.side {
  position: absolute;
  top: -15px;
  height: 50px;
  width: 50px;
  margin: 0;
  padding: 0;
}

.col:hover > .icon {
  background: #8dcdc1;
  color: #FFF;
}

.col:hover > .icon.side {
  background: initial;
  color: initial;
}

.col p,.col h1 {
  text-decoration: none;
}

.margin {
  margin-bottom: 20px;
}

.col .imgholder {
  height: 300px;
  width: 100%;
  border-bottom: 1px solid #d5d5d5;
  transition: background .3s linear;
  background-size: cover;
  background-repeat: no-repeat;
}

.col .wbg {
  background: #FFF;
}

.col.pointer {
  cursor: pointer;
}

.col.bg:hover .imgholder {
  background-repeat: no-repeat;
}

.col span.feature {
  font-size: 20px;
}

.container > h1:not(.hero) {
  margin-bottom: 30px;
  text-align: center;
}

.border-bottom {
  border-bottom: 1px solid #eee;
}

.number {
  padding: 2px 6px;
  border-radius: 100%;
  background: #ffe89f;
  margin-right: 3px;
  display: inline-block;
}

.left,.left > h1,.left > p {
  text-align: left;
}

.right,.right > h1,.right > p {
  text-align: right;
}

.reset {
  text-align: left!important;
}

.reset:after {
  display: none!important;
}

.shadow {
  box-shadow: 0 1px 7px 0 rgba(50,50,50,0.1);
}

.shadow:hover {
  box-shadow: 0 1px 5px 0 rgba(50,50,50,0.2);
}

.tablet {
  display: block;
}

.group:after {
  content: "";
  display: table;
  clear: both;
}

div.c-wrapper {
  width: 80%;
  margin: auto;
}

.carousel-inner > .item > img,.carousel-inner > .item > a > img {
  width: 100%;
  margin: auto;
}

.carousel-indicators li {
  border: 1px solid #333;
}

.carousel-indicators.active {
  width: 14px;
  height: 14px;
}

a.carousel-control {
  color: #333 !important;
  opacity: 1;
  text-shadow: none;
}

.carousel-control:hover {
  color: #337ab7 !important;
}

ul.skill-list {
  padding-left: 15px;
}

.skill-list li {
  padding: 4px 10px;
  margin: 2px 1px;
  background-color: #f4f3f6;
  display: inline;
  border-radius: 10px;
  float: left;
}

.skill-list:after {
  content: '';
  display: block;
  clear: both;
}

.slidercontent,.center,.center > h1,.center > p {
  text-align: center;
}

.responsivegroup,.mobile {
  display: none;
}

.mobile-hide {
  display: block;
}

.font-weight-bold {
  font-weight: bold;
}

@media only screen and (max-width: 768px) {
  .container {
    width: 95%;
  }
  
  .col.four {
    width: 48%;
    margin: 1%;
  }
  
  .col.three, .col.two {
    display: block;
    width: 95%;
    float: none;
    margin: 0 auto 20px;
    padding: 5px 5%;
  }
  
  #logo {
    position: initial;
    display: block;
    transform: none;
    margin: 10px auto 0;
  }
  
  .responsivegroup {
    display: block;
  }
  
  .responsivegroup:after {
    content: "";
    display: table;
    clear: both;
  }
  
  .header,.hold {
    min-height: 60px;
  }
}

.keyword {
  border: 1px solid #e9e5f9;
  background: #f5f3ff;
  font-size: smaller;
  padding: 4px 8px;
  border-radius: 14px;
  margin: 2px 0px;
  display: inline-block;
}

@media only screen and (min-width: 450px) {
  .section .container,  .section .container-sm, .section .container-fl {
    padding: 20px 5px 30px 15px;
  }
}

@media only screen and (min-width: 768px) {
  .quote {
    width: auto;
  }
  
  .container, .container-sm, .container-fl {
    width: 750px;
  }
  
  #logo {
    font-size: 30px;
  }
  
  .css2col {
    columns: 2;
    -webkit-columns: 2;
    -moz-columns: 2;
  }
}

@media only screen and (min-width: 992px) {
  .container, .container-sm, .container-fl {
    width: 970px;
  }
}

@media only screen and (min-width: 1200px) {
  .container, .container-sm, .container-fl {
    width: 1170px;
  }
}

@media only screen and (max-width: 450px) {
  .shadow , .shadow:hover {
    box-shadow: none;
  }
  
  .col,.col.four,.col.three,.col.two {
    display: block;
    width: 95%;
  }
  
  .col.extrapad {
    margin-bottom: 10px;
    padding: 1%;
  }
  
  #logo {
    width: 100%;
  }
  
  ul.nav .fa {
    font-size: 27px;
  }
  
  .mobile {
    display: block;
  }
  
  .mobile-hide {
    display: none !important;
  }
  
  .group, .tablet {
    display: none;
  }
}

.print {
  display: none;
}

@media print {
  .row {
    width: 100%;
  }
  
  .print {
    display: block;
  }
  
  .print-hide {
    display: none;
    border: none;
  }
  
  #mainnav,.navlinks {
    display: none;
  }
  
  * {
    border: none;
  }
  
  .shadow {
    box-shadow: none;
  }
}

.testimonials {
  max-width: 1400px;
  margin: 0 auto;
  padding: clamp(3rem, 6vw, 5rem) clamp(1rem, 4vw, 2.5rem);
}

.section-header {
  text-align: center;
  margin-bottom: 70px;
}

.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.testimonial-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 24px;
  padding: 32px;
  transition: all .25s ease;
  box-shadow: 0 8px 30px rgba(0,0,0,.04);
}

.testimonial-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 50px rgba(0,0,0,.10);
}

.person {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 28px;
}

.person img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
}

.person h3 {
  margin: 0;
  font-size: 1.1rem;
  color: #111827;
}

.person span {
  display: block;
  color: #4B5563;
  font-size: .95rem;
}

.person small {
  color: #8B8B8B;
}

.read-more {
  text-decoration: none;
  color: #4F46E5;
  font-weight: 600;
}

.read-more:hover {
  opacity: .8;
}

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-padding-top: 5.5rem;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--color-text);
  background: #fff;
}

h1, h2, h3, h4, h5, h6 {
  font-family: inherit;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.025em;
  margin: 0 0 var(--space-2);
  color: inherit;
}

h1, h1.hero {
  font-size: var(--text-h1);
}

h2, h2.hero, .col h2, .section-header h2 {
  font-size: var(--text-h2);
}

h3 {
  font-size: var(--text-h3);
}

h4 {
  font-size: var(--text-lg);
}

h5, h6 {
  font-size: var(--text-base);
}

p {
  margin: 0 0 var(--space-3);
}

img {
  max-width: 100%;
  height: auto;
}

button, input, select, textarea {
  font: inherit;
}

a:link, a:visited {
  color: var(--color-accent);
  text-underline-offset: 0.2em;
}

a:hover {
  text-decoration: underline;
}

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 4px;
}

.f1, .f8, ul.nav {
  font-family: var(--font-sans);
}

.fw100, .fw300 {
  font-weight: 400;
}

.fw500 {
  font-weight: 500;
}

:is(h1, h2, h3, h4, h5, h6):is(.fw100, .fw300) {
  font-weight: 600;
}

.section-header p {
  font-size: var(--text-lg);
  color: var(--color-muted);
  max-width: 65ch;
  margin-inline: auto;
}

.col .service, .col .feature {
  font-size: var(--text-lg);
  font-weight: 500;
}

.bbg, .bg3, .bg6, .bgku, .theme-dark {
  --color-text: #f1f5f9;
  --color-muted: #cbd5e1;
  --color-border: #475569;
  --color-surface: #243247;
  color: var(--color-text);
}

.theme-dark {
  background: #101828;
}

.bg6 {
  background: #004945;
}

:is(.bbg, .bg3, .bg6, .bgku, .theme-dark) a:where(:not(.button, .button-primary, .button--primary, .btn)) {
  color: #bfdbfe;
}

:is(.bbg, .bg3, .bg6, .bgku, .theme-dark) :is(q, .reference) {
  color: var(--color-muted);
}

#mainnav ul.nav li a, #sidenav ul.nav li a, ul.navlinks li a {
  color: #f1f5f9;
}

#mainnav ul.nav li.active a, #mainnav ul.nav li a[aria-current="page"] {
  color: #bfdbfe;
  text-decoration: underline;
  text-underline-offset: 0.35em;
}

.header-white #mainnav ul.nav li a {
  color: #172033;
}

.header-white #mainnav ul.nav li a:hover {
  background: #e8eef7;
}

.picture {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0.5rem;
  background: var(--color-surface);
  box-shadow: 0 4px 16px rgb(16 24 40 / 6%);
}

.glowing-box {
  background: #1a1a1a;
  color: #fff;
  border: 1px solid #475569;
  border-radius: var(--radius);
  padding: var(--space-3);
}

.testimonial-card blockquote {
  font-size: var(--text-lg);
  line-height: 1.6;
  font-weight: 500;
  color: #172033;
  margin: 0 0 var(--space-3);
}

/* Reusable portfolio components */
.site-container {
  width: min(
    calc(100% - 2 * var(--space-3)),
    var(--content-width)
  );
  margin-inline: auto;
}

.page-section {
  padding-block: clamp(3rem, 6vw, 5rem);
}

.section-intro {
  max-width: 65ch;
  margin-bottom: var(--space-4);
}

.section-intro p {
  font-size: var(--text-lg);
  color: var(--color-muted);
}

.eyebrow {
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.project-header h1 {
  max-width: 22ch;
}

.project-summary {
  max-width: 65ch;
  font-size: var(--text-lg);
}

.project-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  margin-top: var(--space-4);
}

.project-meta dt {
  font-size: var(--text-sm);
  color: var(--color-muted);
}

.project-meta dd {
  margin: 0;
  font-weight: 600;
}

.project-figure {
  margin: var(--space-4) 0;
}

.project-figure__frame {
  padding: clamp(0.5rem, 2vw, 1.5rem);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.project-figure img {
  display: block;
  width: 100%;
  height: auto;
}

.project-figure figcaption {
  max-width: 75ch;
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--color-muted);
}

.feature-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  align-items: center;
  gap: var(--space-5);
}

.feature-grid > * {
  min-width: 0;
}

.feature-grid {
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

.button, .button-primary, .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0.75rem 1.25rem;
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  font: inherit;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: normal;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  background: #fff;
  color: #172033;
}

:is(.button, .button-primary, .btn):is(:link, :visited) {
  color: #172033;
  text-decoration: none;
}

:is(.button, .btn):hover {
  background: #eef2f6;
  text-decoration: none;
}

.button--primary, .button-primary, .btn-primary, :is(.button--primary, .button-primary, .btn-primary):is(:link, :visited) {
  background: #175cd3;
  border-color: #175cd3;
  color: #fff;
}

:is(.button--primary, .button-primary, .btn-primary):hover {
  background: #124aa8;
  border-color: #124aa8;
  color: #fff;
}

.button--secondary, .btn-secondary {
  background: #fff;
  color: #172033;
  border-color: #cbd5e1;
}

:is(.button--secondary, .btn-secondary):hover {
  background: #eef2f6;
  color: #172033;
}

:is(.button, .button-primary, .btn):focus-visible {
  outline: 3px solid #175cd3;
  outline-offset: 4px;
}

:is(.button, .button-primary, .btn):disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.button-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.project-header {
  padding-block: clamp(3rem, 6vw, 5rem);
}

.project-header .project-summary {
  color: var(--color-muted);
}

.feature-grid > .col {
  float: none;
  width: auto;
  margin: 0;
  padding: 0;
}

.project-figure__frame {
  overflow: hidden;
}

.project-figure img {
  border-radius: 0.25rem;
}

.testimonial-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.testimonial-card {
  min-width: 0;
}

.person {
  flex-wrap: wrap;
}

.outcome-card {
  gap: var(--space-2);
  flex-wrap: wrap;
}

@media (max-width: 60rem) {
  .testimonial-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 48rem) {
  .feature-grid, .testimonial-grid {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }
  
  .testimonial-card {
    padding: var(--space-3);
  }
  
  .feature-grid > .col {
    width: auto;
    margin: 0;
    padding: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .header, .header-white, .sidenav, .testimonial-card, .col .icon, .col .imgholder {
    transition: none;
  }
  
  .testimonial-card:hover {
    transform: none;
  }
}

@media print {
  .header, .header-white, .hold, .sidenav {
    display: none;
  }
  
  body {
    color: #000;
    background: #fff;
  }
  
  .project-figure, .testimonial-card {
    break-inside: avoid;
  }
}