:root {
  /* Border sizes */
  --main-border-size: 4px;
  --secondary-border-size: 2px;

  /* Border radius */
  --primary-border-radius: 4px;
  --secondary-border-radius: 2px;
  --tertiary-border-radius: 50%;

  /* Background & layout colors */
  --background-color: #fffffd;
  --secondary-bg-color: #0d0d0d;
  --nav-background: #ffffff; /* Crisp white navbar */
  --secondary-background: #f2f2f2; /* Slightly darker footer background */

  /* Typography sizes */
  --timer-font-size: 160px;
  --font-size-large: 20px;
  --font-size-first: 16px;
  --font-size-second: 14px;
  --font-size-third: 12px;

  /* Text colors */
  --primary-text-color: #1f1f1f; /* Dark neutral text */
  --secondary-text-color: #4a4a4a; /* Subtext color */
  --nav-text-color: #1f1f1f; /* Navigation links */
  --footer-text-color: #4a4a4a; /* Footer text */

  /* Accent colors (softened for light mode) */
  --color-red: #f87171;
  --color-green: #7ed957;
  --color-orange: #f7b168;
  --color-white: #ffffff;

  /* Border colors */
  --border-color-white: rgba(0, 0, 0, 0.05); /* Very subtle borders for light mode */
  --border-color-red: rgba(229, 115, 115, 0.5);
  --border-color-green: rgba(129, 199, 132, 0.5);

  /* Optional shadows for depth */
  --soft-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.use-case-main {
    min-height: calc(100dvh - 100px);
    margin: 20px 200px;
}

.use-case-example {
    /* border: 2px solid green; */
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 20px;
    margin-bottom: 20px;
}

.use-case-example-img {
    /* border: 2px solid blue; */
}

.use-case-example-img img{
    width: 100%;
}

.use-case-example-desc {
    /* border: 2px solid red; */
}

.use-case-example-title {
    font-size: var(--font-size-large);
    font-weight: 600;
    /* color: var(--color-green); */
}

.use-case-example-sub-title {
    margin: 20px 0 10px;
    font-size: var(--font-size-second);
    font-weight: 600;
    color: var(--color-red);
}

.use-case-example-list {
    margin-left: 25px;
    font-size: var(--font-size-third);
    color: lightslategrey;
}

.use-case-example-list li{
    margin: 4px 0;
}

.page-bold {
    font-weight: 600;
    color: var(--primary-text-color);
}

@media screen and (max-width: 1040px) {
    .use-case-main {
        margin: 20px;
    }

}

@media screen and (max-width: 900px) {
    .use-case-main {
        margin: 10px;
    }

}

@media screen and (max-width: 620px) {
    .use-case-example {
        grid-template-columns: 1fr;
    }
}