/* Root variables for theme */
:root {
    --color-navy: #0F1822;
    --color-navy-dark: #0B1620;
    --color-gold: #C9A769;
    --color-gold-light: #D6BA7A;
    --color-charcoal: #1F2933;
    --color-warm-gray: #C7C9CC;
    --color-off-white: #F7F7F5;

    --font-heading: 'Cinzel', serif;
    --font-body: 'Inter', sans-serif;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-body);
    background-color: var(--color-navy);
    color: var(--color-off-white);
    line-height: 1.6;
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

/* Header */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: rgba(15, 24, 34, 0.9);
    backdrop-filter: blur(10px);
    z-index: 1000;
    border-bottom: 1px solid rgba(201, 167, 105, 0.2);
}
.header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Define an explicit height for the header so the dark bar is slim.
       Reduced height creates a compact top bar while still accommodating a larger logo */
    /* Slightly reduce header height for a slimmer top bar */
    height: 70px;
    padding: 0 0;
    /* Hide any overflow so that an oversized logo does not extend outside the bar */
    overflow: hidden;
}
/* Header logo styling: maintain header height while allowing a larger, more dominant wordmark. */
.logo {
    /* Scale the logo proportionally inside the header bar.  
       Height will adjust up to the header height, while width can grow to a sensible maximum.  This prevents cropping of the wing while preserving balance with the navigation. */
    height: auto;
    max-height: 100%;
    /* Slightly reduce the maximum width of the header logo so it doesn't feel cramped on wide screens. */
    /* Reduce the maximum width so the horizontal logo fits comfortably within the header
       without crowding the navigation or mobile menu. */
    max-width: 220px;
    width: auto;
    object-fit: contain;
    object-position: left center;
}

/* Adjust logo horizontal positioning in the header.  
   By applying a slight negative margin to the logo image, we ensure the complete horizontal logo (wing and wordmark) remains visible inside the container without clipping on the left. */
.logo-link img {
    /* Reset margin so the wing portion of the logo is fully visible within the header bar. */
    margin-left: 0;
}
.navigation a {
    margin-left: 1.5rem;
    color: var(--color-off-white);
    text-decoration: none;
    font-size: 0.95rem;
    transition: color 0.3s ease;
    position: relative;
    padding-bottom: 0.2rem;
}
.navigation a:hover {
    color: var(--color-gold);
}
.navigation a.active {
    color: var(--color-gold);
    border-bottom: 2px solid var(--color-gold);
}

/* Refine the call‑to‑action button in the header. A smaller padding and font size
   ensure it doesn’t crowd the navigation on larger screens. The button will be
   hidden on mobile via the responsive media query below. */
.header .primary-btn {
    padding: 0.4rem 1rem;
    font-size: 0.85rem;
}
.btn {
    padding: 0.6rem 1.4rem;
    border-radius: 2rem;
    font-weight: 500;
    text-decoration: none;
    display: inline-block;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}
.primary-btn {
    background: var(--color-gold);
    color: var(--color-navy);
}
.primary-btn:hover {
    background: var(--color-gold-light);
}
.secondary-btn {
    border: 1px solid var(--color-gold);
    color: var(--color-gold);
}
.secondary-btn:hover {
    background: var(--color-gold);
    color: var(--color-navy);
}

/* Hero Sections */
.hero-section {
    height: 75vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-size: cover;
    background-position: center;
    padding-top: 100px;
}
.hero-section.home {
    /* Home hero image is set inline in index.html; remove default background */
    /* Additional padding ensures the welcome text and CTAs sit comfortably between the fixed header and the next section.
       Reduced top padding brings the elements higher up, while bottom padding adds breathing room below. */
    /* Reduce top and bottom padding so the welcome text and CTAs sit closer to the middle of the hero
       and no longer crowd the section below. */
    /* Further reduce the hero section's vertical padding so the top bar appears smaller and content fits neatly */
    /* Adjust padding to position the hero content higher and reduce overall vertical space */
    padding-top: 90px;
    padding-bottom: 50px;
    /* Adjust the hero image positioning so the aircraft is more centrally framed */
    background-position: center;
}
.hero-section.page {
    background-image: url('assets/section-bg.png');
}
.hero-content h1 {
    font-family: var(--font-heading);
    font-size: 3rem;
    margin-bottom: 1rem;
    color: var(--color-gold);
}
.hero-content .sub {
    font-size: 1.25rem;
    color: var(--color-warm-gray);
    margin-bottom: 2rem;
}
.hero-buttons .btn {
    margin: 0 0.6rem;
}

/* New welcome styles for the hero section on the home page */
/* Hero welcome container: centre the logo and tagline more naturally within the hero.
   Remove large upward translation so the call‑to‑action area doesn't collide with the section below. */
.hero-welcome {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* Lift the content slightly but keep it largely centred vertically. A smaller negative translation
       lowers the logo and tagline so they sit more comfortably within the hero without overlapping
       the section below. */
    /* Reduce the upward translation further to lower the hero logo and text,
       positioning them closer to the vertical centre of the hero section. */
    /* Position the hero content closer to the vertical centre on all devices.  A smaller upward translation ensures it does not crowd the section below, particularly on mobile screens. */
    transform: translateY(-5%);
}
.hero-welcome .hero-logo {
    /* Larger hero logo for a more commanding presence on the welcome slide */
    max-width: 360px;
    width: 100%;
    margin-bottom: 1.75rem;
}
.hero-welcome h1 {
    font-family: var(--font-heading);
    font-size: 3rem;
    color: var(--color-gold);
    margin-bottom: 0.75rem;
}
/* Tagline: emphasize the brand promise with larger typography and subtle glow. */
.hero-welcome .tagline {
    font-size: 1.8rem;
    color: var(--color-gold);
    letter-spacing: 0.1rem;
    font-style: italic;
    text-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
    margin-bottom: 2rem;
}

/* Style for the welcome text above the hero logo */
.hero-welcome .welcome-text {
    font-family: var(--font-heading);
    font-size: 2.2rem;
    /* Use the gold color to ensure the welcome line stands out against the dark overlay */
    color: var(--color-gold);
    margin-bottom: 0.75rem;
}

/* Common Section Titles */
.section-title {
    font-family: var(--font-heading);
    font-size: 2rem;
    text-align: center;
    margin-bottom: 2rem;
    color: var(--color-gold);
}

/* Values Section */
.values-section {
    padding: 4rem 0;
    background: var(--color-navy-dark);
}
.values-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    text-align: center;
}
.value-item {
    flex: 1 1 300px;
    margin: 1rem;
    /* Add a card-like appearance to each value item with a soft border, rounded corners and
       a dark background. This organizes the text more formally and prevents the section from feeling
       disordered. */
    padding: 2rem;
    border: 1px solid rgba(201, 167, 105, 0.3);
    border-radius: 8px;
    background: rgba(11, 22, 32, 0.85);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.value-item h3 {
    font-family: var(--font-heading);
    /* Reduce heading size for a more polished, professional look */
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    color: var(--color-gold);
}
.value-item p {
    /* Slightly reduce paragraph font size and increase line-height for improved readability */
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--color-warm-gray);
}

/* Brands Strip */
/* Brands Section - white strip for OEM logos */
.brands-section {
    padding: 3rem 0;
    /* Use a crisp white background to let manufacturer logos stand out */
    background: #ffffff;
    border-top: 1px solid rgba(0,0,0,0.08);
    border-bottom: 1px solid rgba(0,0,0,0.08);
    color: var(--color-charcoal);
}
/* Override default brand strip with a horizontal logo bar */
.brand-strip, .brand {
    /* legacy classes retained for backward compatibility but not used */
}
.brand-logos {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: 2.5rem;
    overflow-x: auto;
    padding: 0.5rem 0;
}
.brand-logos img {
    height: 60px;
    width: auto;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: 0.8;
    transition: transform 0.3s ease, opacity 0.3s ease;
}
.brand-logos img:hover {
    opacity: 1;
    transform: scale(1.05);
}

/* New marquee animation for the manufacturer logos on the white strip */
.logo-marquee {
    overflow: hidden;
    position: relative;
}
.logo-track {
    display: flex;
    align-items: center;
    /* Reduce the spacing between logos so more can be displayed within the same viewport */
    gap: 2rem;
    animation: logo-scroll 40s linear infinite;
}
.logo-track img {
    /* Reduce the logo height slightly to fit more logos in the marquee.  A height of 50px maintains clarity
       while allowing additional logos to be visible at once. */
    /* Standardise the height of each logo and cap the maximum width so that wide wordmarks do not
       overpower the strip. */
    height: 48px;
    max-height: 48px;
    width: auto;
    max-width: 150px;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: 0.9;
    transition: opacity 0.3s ease;
}
.logo-track img:hover {
    opacity: 1;
}
@keyframes logo-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* Responsive navigation: show a hamburger icon on small screens and toggle the nav links */
.nav-toggle {
    display: none;
}
.nav-icon {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 24px;
    height: 18px;
    cursor: pointer;
}
.nav-icon span {
    display: block;
    height: 3px;
    width: 100%;
    background: var(--color-gold);
    border-radius: 2px;
}

@media (max-width: 768px) {
    /* Stack header items neatly on mobile */
    .header-container {
        position: relative;
        /* Allow the drop‑down navigation menu to overflow beyond the header bar. Without this,
           the absolute‑positioned menu gets clipped within the 70px header height. */
        overflow: visible;
    }
    .navigation {
        position: absolute;
        top: 70px; /* just below the header bar */
        left: 0;
        right: 0;
        background: rgba(15, 24, 34, 0.95);
        flex-direction: column;
        align-items: center;
        display: none;
        gap: 1rem;
        padding: 1rem 0;
        z-index: 999;
    }
    /* Display the hamburger icon on mobile */
    .nav-icon {
        display: flex;
        margin-left: 1rem;
    }
    /* When the nav toggle is checked, show the navigation menu */
    .nav-toggle:checked + .nav-icon + .navigation {
        display: flex;
    }
}

/* Additional responsiveness for smaller devices (phones) */
@media (max-width: 600px) {
    /* Resize the hero logo and tagline for better readability on small screens */
    .hero-welcome .hero-logo {
        max-width: 240px;
        margin-bottom: 1.25rem;
    }
    .hero-welcome .tagline {
        font-size: 1.4rem;
        margin-bottom: 1.5rem;
    }
    /* Stack value items vertically on mobile */
    .values-container {
        flex-direction: column;
        align-items: center;
    }
    .value-item {
        flex: 1 1 100%;
        margin-bottom: 1.5rem;
    }
    /* Stack form rows vertically and ensure form inputs fill the available width */
    .request-form .form-row {
        flex-direction: column;
    }
    .request-form .form-group {
        width: 100%;
    }
    /* Reduce the size of the logo in the header on small devices */
    .logo {
        max-width: 180px;
    }
    /* Hide the header CTA button on mobile to prevent overcrowding */
    .header .primary-btn {
        display: none;
    }

    /* Centre the hero image and adjust its height on mobile.  The Falcon jet should remain
       centred within the viewport, preventing the nose from being cropped or shifting off-screen. */
    .hero-section.home {
        /* Set the vertical height slightly lower on mobile to bring content into view */
        height: 70vh;
        /* Shift the background image slightly to the right to centre the aircraft nose
           on narrow screens. Using 55% horizontally keeps the plane balanced within
           the limited viewport height. */
        background-position: 55% center;
    }
    /* Further lower the hero welcome position on mobile for better centring of the logo and tagline */
    .hero-welcome {
        transform: translateY(-2%);
    }
    /* Increase the speed of the OEM logo marquee on small screens so the motion feels consistent with desktop */
    .logo-track {
        /* Speed up the horizontal scrolling on mobile by shortening the cycle further. A 10 second cycle
           will keep the animation smooth but noticeably quicker on phones. */
        animation-duration: 10s;
    }
    /* Further reduce logo size on phones to show more logos at once */
    .logo-track img {
        height: 40px;
        max-height: 40px;
        max-width: 120px;
    }
}

/* Systems Grid */
.systems-section {
    padding: 4rem 0;
    background: var(--color-navy-dark);
}
.systems-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}
.system-item {
    padding: 1.5rem;
    border: 1px solid var(--color-gold);
    border-radius: 8px;
    color: var(--color-gold);
    font-weight: 600;
    text-align: center;
    transition: background 0.3s ease, color 0.3s ease;
}
.system-item:hover {
    background: var(--color-gold);
    color: var(--color-navy);
}

/* About Section */
.about-section {
    padding: 4rem 0;
    background: var(--color-navy);
}
.about-intro {
    margin: 0 auto;
    max-width: 700px;
    font-size: 1rem;
    color: var(--color-warm-gray);
    text-align: center;
    margin-bottom: 2rem;
}
.about-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem;
}
.about-item {
    flex: 1 1 280px;
    padding: 1.5rem;
    border: 1px solid var(--color-gold);
    border-radius: 8px;
    text-align: center;
    transition: background 0.3s ease;
}
.about-item h4 {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    color: var(--color-gold);
    margin-bottom: 0.5rem;
}
.about-item p {
    font-size: 0.9rem;
    color: var(--color-warm-gray);
}
.about-item:hover {
    background: var(--color-navy-dark);
}

/* Process Section */
.process-section {
    padding: 4rem 0;
    background: var(--color-navy);
}
.process-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}
.step {
    text-align: center;
    border: 1px solid var(--color-gold);
    padding: 1.5rem;
    border-radius: 8px;
    transition: background 0.3s ease;
}
.step-number {
    font-size: 2.5rem;
    font-family: var(--font-heading);
    color: var(--color-gold);
    margin-bottom: 0.5rem;
}
.step h4 {
    font-size: 1.3rem;
    color: var(--color-off-white);
    margin-bottom: 0.5rem;
}
.step p {
    font-size: 0.9rem;
    color: var(--color-warm-gray);
}
.step:hover {
    background: var(--color-navy-dark);
}

/* Quality Section */
.quality-section {
    padding: 4rem 0;
    background: var(--color-navy-dark);
}
.quality-items {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    justify-content: center;
}
.quality-item {
    flex: 1 1 280px;
    border: 1px solid var(--color-gold);
    border-radius: 8px;
    padding: 1.5rem;
    text-align: center;
    transition: background 0.3s ease;
}
.quality-item h4 {
    font-size: 1.3rem;
    font-family: var(--font-heading);
    color: var(--color-gold);
    margin-bottom: 0.5rem;
}
.quality-item p {
    font-size: 0.9rem;
    color: var(--color-warm-gray);
}
.quality-item:hover {
    background: var(--color-navy);
}

/* Cases Section */
.cases-section {
    padding: 4rem 0;
    background: var(--color-navy);
}
.cases-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}
.case-item {
    border: 1px solid var(--color-gold);
    border-radius: 8px;
    padding: 1.5rem;
    transition: background 0.3s ease;
}
.case-item h4 {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    color: var(--color-gold);
    margin-bottom: 0.5rem;
}
.case-item p {
    font-size: 0.9rem;
    color: var(--color-warm-gray);
}
.case-item:hover {
    background: var(--color-navy-dark);
}

/* Contact Section */
.contact-section {
    padding: 4rem 0;
    background: var(--color-navy);
    text-align: center;
}
.contact-container p {
    font-size: 0.9rem;
    color: var(--color-warm-gray);
}
.contact-container a {
    color: var(--color-gold);
    text-decoration: none;
}
.contact-container a:hover {
    text-decoration: underline;
}

/* Request Form */
.request-section {
    padding: 4rem 0;
    background: var(--color-navy-dark);
}
.request-container {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}
.request-sub {
    color: var(--color-warm-gray);
    margin-bottom: 2rem;
}
.request-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}
.form-group {
    flex: 1 1 200px;
    display: flex;
    flex-direction: column;
}
.form-group label {
    margin-bottom: 0.3rem;
    font-size: 0.9rem;
    color: var(--color-gold);
}
.form-group input,
.form-group select,
.form-group textarea {
    padding: 0.6rem;
    border: 1px solid var(--color-gold);
    border-radius: 4px;
    background: transparent;
    color: var(--color-off-white);
    font-size: 0.9rem;
    resize: vertical;
}
.form-group input::placeholder,
.form-group textarea::placeholder {
    color: var(--color-warm-gray);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--color-gold-light);
    box-shadow: 0 0 4px rgba(214, 186, 122, 0.5);
}
.checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-size: 0.9rem;
    color: var(--color-off-white);
}
.consent-group {
    margin-top: 1rem;
    font-size: 0.8rem;
    color: var(--color-off-white);
    text-align: left;
}
.submit-btn {
    margin-top: 1rem;
}

/* Footer */
.footer {
    background: var(--color-navy-dark);
    padding: 2rem 0;
    text-align: center;
    border-top: 1px solid rgba(201, 167, 105, 0.2);
}
.footer-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}
.footer-logo {
    /* Enlarge the footer logo further to make the brand unmistakable at the bottom */
    height: 360px;
}
.footer-tagline {
    color: var(--color-warm-gray);
    font-size: 0.9rem;
    margin-top: 0.5rem;
}
.footer-nav {
    display: flex;
    gap: 1.5rem;
    margin: 1rem 0;
}
.footer-nav a {
    color: var(--color-gold);
    text-decoration: none;
    font-size: 0.9rem;
}
.footer-nav a:hover {
    text-decoration: underline;
}
.copyright {
    font-size: 0.8rem;
    color: var(--color-warm-gray);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    /* Ensure the navigation menu can be toggled on small screens. The display property is controlled
       via the nav‑toggle checkbox; do not force the navigation to be hidden at this breakpoint. */
    .hero-section { height: 70vh; }
    .hero-content h1 { font-size: 2.4rem; }
    .values-container { flex-direction: column; align-items: center; }
    .systems-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
    .process-steps { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
    .brand { width: 100px; height: 60px; font-size: 0.7rem; }

    /* Hide the call‑to‑action button in the header on mobile to reduce crowding */
    .header .primary-btn {
        display: none;
    }

    /* Adjust the hero welcome container to sit lower on mobile screens. Reducing the negative
       translate value lowers the logo and tagline so they don’t collide with the next section. */
    .hero-welcome {
        /* On mobile, lower the hero content even more to avoid crowding the top
           of the viewport. */
        transform: translateY(-5%);
    }
    .hero-welcome .hero-logo {
        max-width: 280px;
        margin-bottom: 1.25rem;
    }
    .hero-welcome .tagline {
        font-size: 1.4rem;
        margin-bottom: 2rem;
    }

    /* Stack form fields vertically on small screens for better readability */
    .request-form .form-row {
        flex-direction: column;
    }
    .request-form .form-group {
        flex: 1 1 100%;
    }
}



/* Added styles for improved design */
:root {
    /* Height for each manufacturer logo in the brand strip */
    /* Reduce logo strip height slightly so logos appear balanced on a light band */
    --logo-strip-height: 72px;
    --section-padding: 4rem;
}

.brand-logos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
    margin: 2rem auto;
    padding: 1rem 0;
}

.brand-logos img {
    /* Constrain the height and max-width so all logos share a consistent footprint. */
    height: var(--logo-strip-height);
    width: auto;
    max-width: 160px;
    object-fit: contain;
    /* Remove heavy drop-shadow; simple subtle shadow for clarity */
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.15));
    opacity: 1;
    margin: 0 1rem;
    transition: transform 0.3s ease;
}

.brand-logos img:hover {
    /* Slight scale on hover for interactivity */
    transform: scale(1.05);
}

.section-bg {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}

.section-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
}

.section-content {
    position: relative;
    z-index: 2;
    padding: var(--section-padding);
    color: var(--light-color);
}

/* Gallery Section */
.gallery-section {
    /* Reduce padding so the gallery sits closer to the brands section */
    padding: 3rem 0;
    background: var(--color-navy);
}
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}
.gallery-grid img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.gallery-grid img:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
}

/* Products and Services Section */
.products-section {
    padding: 4rem 0;
    background: var(--color-navy-dark);
}
.products-section .section-title {
    margin-bottom: 1.5rem;
}
.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}
.product-card {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
    cursor: pointer;
    height: 220px;
}
.product-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}
.product-card:hover img {
    transform: scale(1.05);
}
.product-card .product-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 24, 34, 0.65);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    padding: 1rem;
    transition: background 0.3s ease;
}
.product-card:hover .product-overlay {
    background: rgba(15, 24, 34, 0.75);
}
.product-overlay h4 {
    font-family: var(--font-heading);
    font-size: 1.4rem;
    color: var(--color-gold);
    margin-bottom: 0.3rem;
}
.product-overlay span {
    font-size: 0.85rem;
    color: var(--color-warm-gray);
}