/* =======================
   RESET & GLOBAL STYLES
========================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  font-family: 'Lato', sans-serif;
  font-weight: 400;
  font-size: 19px;
  color: #203354;
  line-height: 1.6;
}

/* Typography System for jingportfolio.com */
h1 {
  font-size: 2.5rem;
  font-weight: 700;
  color: #203354;
  line-height: 1.2;
  margin-bottom: 1.5rem;
}

h2 {
  font-size: 1.875rem;
  font-weight: 600;
  color: #203354;
  line-height: 1.3;
  margin-top: 3rem;
  margin-bottom: 1.25rem;
}

h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: #203354;
  margin-bottom: 0.75rem;
}

h4 {
  font-size: 1rem;
  font-weight: 500;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.5rem;
}

p {
  font-size: 1rem;
  line-height: 1.6;
  color: #444;
  margin-bottom: 1.25rem;
}

.meta {
  font-size: 0.875rem;
  color: #777;
  font-style: italic;
}

.section-description {
  font-size: 1.125rem;        /* Slightly larger than body text */
  line-height: 1.7;
  color: #555;
  max-width: 60ch;            /* Keeps it readable */
  margin-bottom: 2.5rem;
}

.format-label {
  font-size: 0.75rem;               /* Smaller */
  font-weight: 600;                /* Bolder */
  color: #555;
  text-transform: uppercase;
  letter-spacing: 0.75px;
  margin-bottom: 0.5rem;
}


/* =======================
   HEADER & NAVIGATION
========================== */
header {
  width: 100%;
  padding: 1.20rem 2.40rem;
}

.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.20rem 2.40rem;
}

.logo {
  font-weight: bold;
  font-size: 1.44rem;
}

.main-nav ul,
nav ul {
  display: flex;
  list-style: none;
  gap: 2.40rem;
  font-family: 'Lato', sans-serif;
  font-weight: 400;
  font-size: 1.08rem;
  color: #203354;
}

.main-nav a {
  text-decoration: none;
  color: #203354;
}

.hamburger {
  display: none;
  font-size: 2.40rem;
  background: none;
  border: none;
  cursor: pointer;
}


/* =======================
   HERO SECTION
========================== */
.hero {
  display: flex;
  height: calc(100vh - 96px);
  width: 100vw;
}

.hero-left,
.hero-right {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.20rem 2.40rem;
}

.hero-left {
  background-color: white;
  flex-direction: column;
}

.hero-right img {
  max-width: 100%;
  max-height: 90%;
  object-fit: cover;
}

.intro {
  font-size: clamp(1.80rem, 5vw, 3.60rem);
  color: #203354;
  font-family: 'Lato', sans-serif;
  font-weight: 400;
  font-style: normal;
}

.logo {
  text-decoration: none;
  color: inherit;
}


.about-hero {
  /* REMOVE the centering that conflicts */
  padding: 2.40rem;
  gap: 2.40rem;
}



.about-hero-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 720px;
  margin: 0 auto;
  padding: 0 1.20rem;
  gap: 1.20rem;
}


.about-texts .tagline {
  font-size: 2rem;           /* Bigger */
  font-weight: 600;
  color: #203354;
  line-height: 1.5;
  padding: 2.5rem 0;             /* Generous top & bottom padding */
  margin: 0 auto;
  max-width: 60ch;             /* Keeps it from stretching too wide */
  text-align: left;
}





.about-texts .text {
  font-size: 1.20rem;
  line-height: 1.6;
  color: #203354;
}


 .subheader {
  font-size: 1.25rem;
  font-weight: 600;
  color: #203354;
  margin-top: 3rem;
  margin-bottom: 1.25rem;
}

 }

.about-image img {
  width: 100%;
  max-width: 55%;
  height: auto;
  display: block;
  margin: 0 auto;
}






/* Give each job block breathing room */
.job {
  margin: 3.60rem 0;
  border-bottom: 1px solid #eee;  /* Optional visual separator */
  padding-bottom: 2.40rem;
}

.date {
  font-size: 0.875rem;
  font-weight: 600;
  color: #666;
  display: inline-block;
  margin-bottom: 0.25rem;
}
.job-description {
  margin: 0.5rem 0 1.5rem;
  padding-left: 1.25rem;
  list-style-type: disc;
  font-size: 1rem;
  line-height: 1.6;
  color: #333;
}


/* =======================
   SECTION TITLES
========================== */
.section-title {
  display: block;
  text-align: center;
  padding-top: 1.20rem;
  padding-bottom: 1.20rem;
  font-size: 1.80rem;
}
.left
{
	text-align:left;
	padding-top:2.40rem;
	padding-bottom:2.40rem;
}


/* =======================
   TEXT
========================== */
.text
{
  color: black;
   font-size: 1.0rem;
  line-height: 1.8;
  }
  
 .summary{
   font-family: 'Lato', sans-serif;
  font-weight: 400;
  font-size: 1.25rem;
  color: #203354;
  font-style:italic;
 }
 
  .project-meta {
      font-size: 0.9rem;
      color: #666;
      margin-bottom: 4rem;
    }
/* =======================
   GALLERY & CARDS
========================== */
.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 2.40rem 1.20rem; /* top/bottom 2.40rem, sides 1.20rem */
  gap: 1.80rem;         /* space between cards */
  max-width: 1440px;
  margin: 0 auto;
}

.card {
  padding: 1.20rem;
    display: block;
  width: 100%;
  
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  max-width: 320px;
  margin-bottom: 2.40rem;
}



.card img {
  width: 100%;
  height: 200px;
  flex-shrink: 0;
  object-fit: cover;
  display: block;
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
}



.card-title {
  margin-top: 0.60rem;
  font-size: 1.20rem;
  color: #203354;
  word-break: break-word;
  line-height: 1.4;
}


.cover {
  width: 100%;
  height: 300px;
  object-fit: cover;
  display: block;
}
}

.about-cover {
  max-width: 55%;
  height: auto;
  display: block;
  margin-left: 0;
  margin-right: auto;
}

.asset_card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.asset_card img.cover {
  max-width: 100%;
  height: 300px;
  display: block;
  margin-left: 0;
  margin-right: auto;
}

.asset_card div {
  flex-grow: 1;
}


/* =======================
   CASE STUDY
========================== */
.wrapper {
display:flex;
justify-content:center;
margin-left:20%;
margin-right:20%;
}

.case-study > div {
  width: 100%;
}

.case-study h1 {
	 text-align: center;
  margin-top: 2.40rem;
  margin-bottom:2.40rem;
  color: #2b4470;
  font-size: 2.40rem;
  font-weight: 300;
}

.opening{
	 font-size: 1.44rem;
  font-weight: normal;
  color: #2b4470;
  line-height:1.8;
  text-align: center;
}

.inner-wrapper {
	
max-width:720px;
margin-left:auto;
margin-right:auto;
}

.two-column-wrapper{
display:flex;
justify-content:space-around;
margin-top:2.40rem;	
gap:1.20rem;
}

.flex-half {
  flex: 1 1 50%;
  min-width: 360px; /* helpful on narrow screens */
}


.left-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  max-width: 720px; /* Optional, for readable text width */
  text-align: left;
  gap: 1.80rem; /* Optional: adds spacing between stacked items */
}

}  

ul .list{
  font-size: 1.20rem;
  line-height: 2;
  color: #203354;
  margin-left: 1.20rem;
  margin-top: 2.40rem;

}

.large-gap{
	line-height:2.2;
}

h3.header{
	font-size:1.44rem;
	color:#6fa8dc;
	text-align:left;
	font-weight:400;
 margin-top: 1.80rem; /* instead of 3.60rem */
  margin-bottom: 0.90rem;
}
	

h3.img-title{
	font-size:1.44rem;
	color:#2b4470;
	text-align:left;
	font-weight:400;
	margin-top:0;
	margin-bottom:0;
}
.img-block {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.img-block img {
  display: block;         /* removes inline spacing quirks */
  max-width: 100%;
  height: auto;
  margin-bottom: 0.60rem;  /* control space under image */
}

.smalltext{

  font-size: 0.90rem;
  color: #203354;

}



.two-column {
	display: flex;
	justify-content:center;
	gap:1rem;
}

.case-study-page {
  max-width: 900px;
  margin: 0 auto;
  padding: 4rem 1.5rem;
}

.case-study-page .two-column-wrapper {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  margin: 2rem 0;
}

.case-study-page .img-block {
  flex: 1 1 45%;
  text-align: center;
}

.case-study-page img {
  max-width: 100%;
  display:block;
  height: auto;
  border: 1px solid #ddd;
  margin-bottom: 1rem;
}

.case-study-page img.funnel {
  max-width: 100%;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
}


.download-button {
  background-color: #e6f0fa;
  color: #123e66;
  border: 1px solid #c2d9ef;
  border-radius: 10px;
  padding: 14px 48px;
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.2s ease;
  white-space: nowrap;
  margin-top:2rem;
}
.download-wrapper {
  padding-top: 2rem;
}


.screenshot {
	display:block;
	max-width:800px;
	padding-top:1rem;
	padding-bottom:2rem;

}







.download-button:hover {
  background-color: #d3e5f7;           /* slightly deeper blue */
  cursor: pointer;
}





.btn-secondary {
  display: block;
  width: 100%;
  padding: 1.20rem;
  text-align: center;
  margin: 1.20rem auto;
  box-sizing: border-box;
      max-width: 320px;
}








.button {
  background-color: #207399;
  border: none;
  color: white;
  padding: 12px 96px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 0.90rem;
  margin-top: 3.60rem;
  margin-bottom: 3.60rem;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.button:hover {
  background-color: #1c6788;
  transform: translateY(-1px);
}

.button:active {
  background-color: #185b77;
  transform: translateY(1px);
}

.button:disabled {
  background-color: #7aaec1;
  cursor: not-allowed;
  opacity: 0.7;
}





hr.soft-line {
  border: none;
   border-top: 1px solid rgba(0, 0, 0, 0.08); /* slightly more visible */
   margin: 1.80rem auto; /* slightly smaller */
  width: 100%;
}



  .links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem; /* decrease if needed */
  margin-top: 1.2rem;
}


.links a {
  flex: 1 1 140px;         /* Minimum width per button */
  max-width: 180px;        /* Cap their width */
  padding: 0.75rem 1rem;   /* Trim vertical padding */
  white-space: nowrap;     /* Prevent wrapping */
  text-align: center;
}




.links a {
  flex: 0 0 auto; /* ← stops the buttons from stretching */
}


/* =======================
   PROJECT PAGES
========================== */
.project-page {
  max-width: 900px;
  margin: 0 auto;
  padding: 4rem 1.5rem;
  text-align: left;
}

.project-image {
  max-width: 100%;
  display:block;
  height: auto;

}

.project-meta {
  font-size: 0.9rem;
  color: #666;
  margin-bottom: 4rem;
  line-height: 1.6;
  margin-top: 1rem;
}


/* =======================
   TABLES
========================== */
.funnel-table {
  width: 100%;
  max-width: 480px;
  margin-top: 2.40rem;
  margin-bottom: 2.40rem;
  margin-left: 0;
  margin-right: 0;
  border-collapse: collapse;
  font-size: 1.20rem;
}

.funnel-table th,
.funnel-table td {
  padding: 0.90rem 1.20rem;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

.funnel-table th {
  font-weight: 600;
  color: #203354; /* your heading navy */
}

.funnel-table td {
  color: #111;
}

.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 1.20rem 0;
  width: 100%;
}

.table-scroll table {
  width: 100%;
  min-width: 600px; /* forces scroll if screen is smaller */
  border-collapse: collapse;

}



/* =======================
   FOOTER
========================== */
.site-footer {
  text-align: center;
  padding: 2.40rem 1.20rem;
  background-color: #f9f9f9;
  color: #203354;
  font-family: 'Lato', sans-serif;
  font-size: 1.14rem;
  margin-top: 4.80rem;
}

.footer-links {
  margin: 0.60rem 0;
}

.footer-links a {
  color: #203354;
  text-decoration: none;
  margin: 0 0.60rem;
}

.footer-links a:hover {
  text-decoration: underline;
}

.footer-note {
  font-size: 1.02rem;
  color: #666;
}

.pinefowl-anim {
  width: 75px;
  transition: transform 0.3s ease-in-out;
  animation: crownGlow 4s ease-in-out infinite;
}

.pinefowl-anim:hover {
  transform: rotate(2deg);
}

/* Simulated glowing crown using drop shadow */
@keyframes crownGlow {
  0%, 100% {
    filter: drop-shadow(0 0 4px gold);
  }
  50% {
    filter: drop-shadow(0 0 12px gold);
  }
}
  .pinefowl-footer {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 2rem;
  font-size: 1rem;
  color: #666;
}

.pinefowl-footer img {
  width: 36px;
  height: auto;
  display: inline-block;
  vertical-align: baseline;
  margin-bottom: -2px; /* adjust as needed */
}

  
  
  
  
  
  
  
  
  
  
  
  
  
  
}


@media screen and (min-width: 923px) {
  .main-nav {
    display: block !important; /* Always show nav on desktop */
  }

  .main-nav.hidden {
    display: block !important; /* Override hidden on large screens */
  }

  .hamburger {
    display: none; /* Hide hamburger button on desktop */
  }
}


/* =======================
   MEDIA QUERIES: MOBILE
========================== */
@media (max-width: 922px) {
  .hero {
    flex-direction: column;
    height: auto;
    padding: 2.40rem 1.20rem;
  }

  .hero-left,
  .hero-right {
    flex: none;
    width: 100%;
    padding: 1.20rem 0;
    text-align: center;
  }

  .hero-right img {
    max-width: 80%;
    height: auto;
  }

  .intro {
    font-size: clamp(1.80rem, 6vw, 3.00rem);
    line-height: 1.2;
  }

  nav ul,
  .main-nav ul {
    flex-direction: column;
    gap: 0.90rem;
    align-items: center;
    margin-top: 1.20rem;
  }

  .main-nav.active ul {
    display: flex;
  }

  .hamburger {
    display: block;
  }

  .gallery {
    flex-direction: column;
    align-items: center;
    padding: 1.20rem;
  }

  .gallery img {
    width: 90%;
    max-width: 480px;
    height: auto;
  }

  .gallery > div {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .section-title {
    font-size: 1.80rem;
  }
  
  
  .about-hero {
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1.20rem;
}

.about-texts {
  width: 100%;
  padding: 0; /* Remove extra spacing */
}



  .about-texts {
    width: 100%;
  }

  .about-texts {
    padding-top: 1.20rem;
  }




img.about-photo {
  width: 100% !important;
  max-width: 55% !important;
  display: block;
  margin: 0 auto;
  height: auto;
}



.full-width {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  display: block;
}



section.wrapper {
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 1.20rem !important;
  padding-right: 1.20rem !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.case-study .inner-wrapper {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: auto;
  margin-right: auto;
  max-width: 720px;
  width: 100%;
  box-sizing: border-box;
}


  section.wrapper.wrapper-mobile {
    display: block !important;
    padding: 0 1.20rem !important;
    margin: 0 auto !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  
}


.two-column-wrapper {
  flex-direction: column;
  align-items: center;
  gap: 2.40rem;
}

ul.list {
  padding-left: 1.20rem;
  margin-left: 0;
  list-style-position: inside;
}


.table-scroll {
  max-width: 100vw;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 1.20rem;
  background: none; /* remove yellow when confirmed */
}

.table-scroll table {
  min-width: 600px;
  width: auto;
}

/* Reduce excessive padding between sections on mobile */
hr.soft-line {
  margin-top: 1rem !important;
  margin-bottom: 1rem !important;
}

h3.header {
  margin-top: 1rem !important;
}


/* Tighten overall vertical rhythm */
.case-study > hr.soft-line {
  margin: 1.20rem auto !important;
}

.case-study h3.header {
  margin-top: 1.20rem !important;
  margin-bottom: 0.60rem !important;
}



/* Step 1: Parent container must allow centering */
.button-row,
.button-container,
button-wrapper, /* whatever your container class is */
footer p {
  text-align: center;
}

/* Step 2: Center the buttons */
.button,
.btn-secondary {
  display: inline-block;
  width: 100%;
  max-width: 100%;
  padding: 1.20rem;
  text-align: center;
  margin: 1.20rem 0; /* vertical margin only */
  box-sizing: border-box;

}

  nav ul,
  .main-nav ul {
    align-items: flex-start;  /* ← change from center */
    text-align: left;         /* ← add this */
    padding-left: 1.20rem;    /* ← soft spacing from left edge */
  }

  .main-nav ul li {
    width: 100%;
  }

  .main-nav ul li a {
    display: block;
    width: 100%;
  }

  .links {
    flex-direction: column;
    align-items: stretch;
    gap: 1.2rem; /* optional: adjust spacing between stacked buttons */
  }

  .links a {
    width: 100%;
    text-align: center;
  }




}


/* =======================
   MEDIA QUERIES: TABLET
========================== */
@media (min-width: 922px) and (max-width: 1229px) {
  section {
    padding: 2.40rem 3.60rem;
  }

  .main-nav {
    flex-direction: row;
    justify-content: space-between;
    padding: 1.20rem 2.40rem;
  }

  .hero {
    flex-direction: row;
    height: auto;
    flex-wrap: wrap;
    padding-top: 3.60rem;
    padding-bottom: 3.60rem;
  }

  .hero-left,
  .hero-right {
    flex: 1 1 50%;
    text-align: center;
    padding: 1.80rem;
  }

  .hero-right img {
    max-width: 80%;
    height: auto;
  }

  .gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2.40rem;
    padding: 2.40rem 1.80rem;
  }

  .card {
    flex: 1 1 40%;
    max-width: 300px;
    margin: 1.20rem;
  }
}

/* =======================
   MEDIA QUERIES: MOBILE LANDSCAPE
========================== */

@media (min-width: 667px) and (max-width: 921px) {
  .two-column-wrapper {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 1.20rem;
  }

  .img-block {
    flex: 1 1 45%;
    max-width: 45%;
  }

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

  .img-title,
  .smalltext {
    text-align: center;
  }
}


@media screen and (min-width: 923px) {
  .main-nav {
    display: block !important; /* Always show nav on desktop */
  }

  .main-nav.hidden {
    display: block !important; /* Override hidden class on desktop */
  }

  .hamburger {
    display: none; /* Hide hamburger button on desktop */
  }
}




/* =======================
   SPACING UTILITIES
========================== */
.mt-1 { margin-top: 0.60rem; }
.mt-2 { margin-top: 1.20rem; }
.mt-3 { margin-top: 1.80rem; }
.mt-4 { margin-top: 2.40rem; }

.mb-1 { margin-bottom: 0.60rem; }
.mb-2 { margin-bottom: 1.20rem; }
.mb-3 { margin-bottom: 1.80rem; }
.mb-4 { margin-bottom: 2.40rem; }

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

/* =======================
   TEXT ALIGNMENT
========================== */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

/* =======================
   FONT SIZES
========================== */
.text-sm { font-size: 1.05rem; }
.text-base { font-size: 1.20rem; }
.text-lg { font-size: 1.50rem; }

/* =======================
   MAX WIDTHS
========================== */
.max-w-400 { max-width: 480px; }
.max-w-600 { max-width: 720px; }
.max-w-800 { max-width: 960px; }

/* =======================
   DISPLAY HELPERS
========================== */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }

.inline-block { display: inline-block; }
.block { display: block; }

.hidden { display: none; }

/* =======================
   TEXT COLORS
========================== */
.text-primary { color: #203354; }      /* Deep navy */
.text-muted  { color: #7a8ba3; }       /* Soft slate gray */
.text-blue   { color: #6fa8dc; }       /* Brand blue (header) */
.text-accent { color: #207399; }       /* Teal CTA highlight */
.text-light  { color: #f5f5f5; }       /* Very light for dark backgrounds */

/* =======================
   BACKGROUND COLORS
========================== */
.bg-light    { background-color: #f9f9f9; }
.bg-muted    { background-color: #eef2f7; }
.bg-blue     { background-color: #6fa8dc; }
.bg-accent   { background-color: #207399; }
.bg-white    { background-color: #ffffff; }
.bg-dark     { background-color: #203354; }

/* =======================
   BORDER COLORS
========================== */
.border-muted { border-color: #dce3ea; }
.border-dark  { border-color: #203354; }

.funnel-table {
  width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  margin-top: 2rem;
}

.download-button {
  margin-top: 2rem;
}

.gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

.project-image {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
}

.pinefowl-anim {
  max-width: 100%;
  display: block;
  margin: 2rem auto;
}

@media screen and (min-width: 923px) {
  .about-image img {
    max-width: 55%;
    width: 100%;
    display: block;
    margin: 0 auto;
    height: auto;
  }
}

@media (max-width: 600px) {
  .links {
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
  }

  .links a {
    flex: 1 1 45%;
    text-align: center;
  }
}



.links {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 600px;
  margin: 0 auto;
  gap: 2rem; /* adds breathing room */
}

.links a {
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  min-width: 150px;
  text-align: center;
}

.download-wrapper {
  text-align: center;
  margin-bottom: 2rem;
}

.download-button {
  display: inline-block;
  padding: 0.75rem 2rem;
  font-size: 1rem;
  border-radius: 8px;
}

.buttons-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 600px;
  margin: 0 auto;
  gap: 1rem;
  flex-wrap: wrap; /* Allows fallback stacking on small screens */
}

.buttons-row a {
  padding: 0.75rem 1.2rem;
  font-size: 1rem;
  text-align: center;
  white-space: nowrap;
  flex: 1 1 45%;
  min-width: 140px;
  max-width: 100%;
}


@media (min-width: 923px) {
  .buttons-row {
    flex-direction: row !important;
  }
}

@media (max-width: 600px) {
  .buttons-row {
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
  }