/* Global styles */
@font-face {
    font-family: 'The Seasons Bold';
    src: URL('/fonts/theseasons-bd.ttf') format('truetype');
}

@font-face {
    font-family: 'The Seasons Light';
    src: URL('/fonts/theseasons-lt.ttf') format('truetype');
}

@font-face {
    font-family: 'The Seasons Regular';
    src: URL('/fonts/theseasons-reg.ttf') format('truetype');
}

@font-face {
    font-family: 'Garamond Premier Pro Semibold';
    src: URL('/fonts/Garamond Premier Pro Semibold.otf') format('opentype');
}

@font-face {
    font-family: 'Garamond Premier Pro Display';
    src: URL('/fonts/Garamond Premier Pro Display.otf') format('opentype');
}

@font-face {
    font-family: 'Garamond Premier Pro Light Display';
    src: URL('/fonts/Garamond Premier Pro Light Display.otf') format('opentype');
}

@font-face {
    font-family: 'Garamond Premier Pro Italic Display';
    src: URL('/fonts/Garamond Premier Pro Italic Display.otf') format('opentype');
}

@font-face {
    font-family: 'Garamond Premier Pro Light Italic Display';
    src: URL('/fonts/Garamond Premier Pro Light Italic Display.otf') format('opentype');
}


/* Hero Image Layouts */
.hero-image-container {
    margin-bottom: 2rem;
    overflow: hidden;
    max-height: 70vh;
}

.hero-image-container img {
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center;
}

/* Top layout specific styles */
.top-layout-content {
    max-width: 100%;
    width: 100%;
}

.top-layout-description {
    /* Wider description column for top layout */
    max-width: 100%;
}

/* Semantic Typography Classes */

/* Display Typography - For hero elements and large titles */
.display-hero {
    font-family: 'The Seasons Light', sans-serif;
    font-size: 110pt;
    line-height: 0.9;
    letter-spacing: 1px;
    color: #454545;
}

.display-large {
    font-family: "The Seasons", serif;
    font-size: 24pt;
    line-height: 1.2;
    letter-spacing: 1px;
    color: #000000;
}

/* Heading Typography */
.heading-primary {
    font-family: 'Garamond Premier Pro Display', serif;
    font-size: 16pt;
    line-height: 1.2;
    color: #000000;
    letter-spacing: 1px;
}

.heading-secondary {
    font-family: 'The Seasons Light', sans-serif;
    font-size: 12pt;
    line-height: 1.2;
    color: #454545;
    letter-spacing: 1px;
    margin-left: auto;
    margin-right: auto;
}

/* Body Typography */
.text-body {
    font-family: "Roboto Flex", sans-serif;
    font-optical-sizing: auto;
    font-weight: 200;
    font-style: normal;
    font-variation-settings:
        "slnt" 0,
        "wdth" 100,
        "GRAD" 0,
        "XOPQ" 96,
        "XTRA" 468,
        "YOPQ" 79,
        "YTAS" 750,
        "YTDE" -203,
        "YTFI" 738,
        "YTLC" 514,
        "YTUC" 712;
    font-size: 12px;
    line-height: 1.8;
    letter-spacing: 0.4px;
    color: #000000;
}

.text-body-light {
    font-family: 'Garamond Premier Pro Light Display', serif;
    font-size: 12pt;
    line-height: 2;
    letter-spacing: 1px;
    color: #000000;
}

.text-body-bold {
    font-family: 'Garamond Premier Pro Semibold', serif;
    font-size: 12pt;
    line-height: 1.6;
    letter-spacing: 1px;
    color: #000000;
    font-weight: 400;
}

.text-emphasis {
    font-family: 'Garamond Premier Pro Light Italic Display', serif;
    font-size: 20pt;
    line-height: 1.1;
    letter-spacing: 1px;
    color: #000000;
}

/* UI Element Typography */
.text-metadata {
    font-family: 'Garamond Premier Pro Semibold', serif;
    font-size: 12px;
    color: #000000;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.text-metadata-light {
    font-family: 'The Seasons Light', serif;
    font-size: 12pt;
    color: #000000;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.text-caption {
    font-family: 'Garamond Premier Pro Light Display', serif;
    font-style: italic;
    font-size: 11pt;
    line-height: 2;
    letter-spacing: 1px;
    color: #000000;
    margin-top: 0.5rem;
    text-align: center;
}

.text-small {
    font-family: 'Garamond Premier Pro Light Display', serif;
    font-size: 8pt;
    line-height: 1.8;
    letter-spacing: 0.5px;
    color: #000000;
}

/* UI Navigation Typography */
.ui-navigation {
    font-family: "Roboto Flex", sans-serif;
    font-optical-sizing: auto;
    font-weight: 200;
    font-style: normal;
    font-variation-settings:
        "slnt" 0,
        "wdth" 100,
        "GRAD" 0,
        "XOPQ" 96,
        "XTRA" 468,
        "YOPQ" 79,
        "YTAS" 750,
        "YTDE" -203,
        "YTFI" 738,
        "YTLC" 514,
        "YTUC" 712;
    letter-spacing: 0.4px;
    font-size: 12px;
}

/* Table Typography */
.ui-table-header {
    font-family: 'The Seasons Regular', serif !important;
    font-optical-sizing: auto !important;
    font-style: normal !important;
    font-variation-settings:
        "slnt" 0,
        "wdth" 100,
        "GRAD" 0,
        "XOPQ" 96,
        "XTRA" 468,
        "YOPQ" 79,
        "YTAS" 750,
        "YTDE" -203,
        "YTFI" 738,
        "YTLC" 514,
        "YTUC" 712 !important;
    font-size: 12px !important;
    letter-spacing: 0.4px !important;
    opacity: 0.6 !important;
}

.ui-table-cell {
    font-family: 'The Seasons Regular', serif !important;
    font-optical-sizing: auto !important;
    font-weight: 200 !important;
    font-style: normal !important;
    font-variation-settings:
        "slnt" 0,
        "wdth" 100,
        "GRAD" 0,
        "XOPQ" 96,
        "XTRA" 468,
        "YOPQ" 79,
        "YTAS" 750,
        "YTDE" -203,
        "YTFI" 738,
        "YTLC" 514,
        "YTUC" 712 !important;
    font-size: 12px !important;
    line-height: 1.8 !important;
    letter-spacing: 0.4px !important;
    color: #000000 !important;
}

/* Form Typography */
.ui-form-label {
    font-family: "Roboto Flex", sans-serif;
    font-optical-sizing: auto;
    font-weight: 200;
    font-style: normal;
    font-variation-settings:
        "slnt" 0,
        "wdth" 100,
        "GRAD" 0,
        "XOPQ" 96,
        "XTRA" 468,
        "YOPQ" 79,
        "YTAS" 750,
        "YTDE" -203,
        "YTFI" 738,
        "YTLC" 514,
        "YTUC" 712;
    font-size: 15px;
    line-height: 1.8;
    letter-spacing: 0.4px;
    color: rgb(45, 45, 45);
    margin-bottom: 0.5rem;
}

.ui-form-input {
    font-family: 'Garamond Premier Pro Light Display', serif;
    font-size: 12px;
    line-height: 1.5;
}

.ui-form-text {
    font-family: 'Garamond Premier Pro Light Display', serif;
    font-size: 10px;
    color: #6c757d;
    margin-top: 0.25rem;
}

/* Button Typography */
.ui-button {
    font-family: 'The Seasons Light', sans-serif;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Legacy classes removed - now using semantic typography system */

.process-title.text-center {
    margin-left: auto;
    margin-right: auto;
}

.process-title span {
    font-style: italic;
}

.brief-survey-title.text-center {
    margin-left: auto;
    margin-right: auto;
}

.design-style-title.text-center {
    margin-left: auto;
    margin-right: auto;
}

/* Centered text content */
.centered-text-content {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

/* Plant List Section Styles */
.plant-list-container {
    background-color: #ffffff;
    padding: 7rem 0 3rem 0;
    margin-bottom: 3rem;
}

.plant-list-images img {
    margin-bottom: 0.5rem;
    width: 75%;
    height: auto;
    object-fit: cover;
    aspect-ratio: 1/1;
}

/* Plant image container and caption styling */
.plant-image-container {
    margin-bottom: 1.5rem;
    text-align: center;
}

.plant-caption {
    font-family: 'Garamond Premier Pro Light Display', serif;
    font-style: italic;
    font-size: 15px;
    line-height: 2;
    letter-spacing: 1px;
    color: #000000;
    margin-top: 0.5rem;
    text-align: center;
}

/* All legacy style classes removed - using semantic typography system */

/* Plant list specific styling */
.plant-list-text {
    font-family: "Roboto Flex", sans-serif;
    font-optical-sizing: auto;
    font-weight: 200;
    font-style: normal;
    font-variation-settings:
        "slnt" 0,
        "wdth" 100,
        "GRAD" 0,
        "XOPQ" 96,
        "XTRA" 468,
        "YOPQ" 79,
        "YTAS" 750,
        "YTDE" -203,
        "YTFI" 738,
        "YTLC" 514,
        "YTUC" 712;
    font-size: 12px;
    line-height: 1.8;
    letter-spacing: 0.4px;
    color: #000000;
}

.plant-list-text strong,
.plant-list-text b {
    font-family: 'Garamond Premier Pro Semibold', serif;
    font-size: 12px;
    color: #000000;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.8;
    font-weight: 400;
}

.plant-list-text p {
    margin: 0;
}

/* Add spacing after paragraphs that contain bold text (subheadings) */
.plant-list-text p:has(strong),
.plant-list-text p:has(b) {
    margin-bottom: 0.6em;
}

/* Add spacing before paragraphs that contain bold text, except the first one */
.plant-list-text p:has(strong):not(:first-child),
.plant-list-text p:has(b):not(:first-child) {
    margin-top: 0.6em;
}

/* Image row spacing */
.image-row-spacing {
    margin-top: 16px;
    margin-bottom: 16px;
}

/* Process Section - Meadow Background with Darkening Effect */
.meadow-background-container {
    background-image: url('/img/about/Meadow Flowers.jpg');
    background-size: cover;
    background-position: center;
    padding: 60px 0;
    position: relative;
    width: 100%;
}

.meadow-background-container::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5); /* Darkening overlay */
    backdrop-filter: blur(2px); /* Slight blur effect */
    z-index: 0;
}

.meadow-background-container .container {
    position: relative;
    z-index: 1;
}

.meadow-background-container .heading-secondary {
    color: white;
}

.meadow-background-container .text-body {
    color: white;
}

/* Project Details Table */
.project-details-grid {
    display: block;
}

.project-detail-item {
    /* position: relative; */
    padding: 0.5rem 0;
    border-top: 1px solid rgba(176, 165, 129, 0.8);
    border-bottom: 1px solid rgba(176, 165, 129, 0.8);
}

.project-detail-item:last-child {
    border-bottom: 0px;
}

/* Project detail labels styling */
.project-detail-item > div:first-child {
    font-size: 12px;
    color: #000000;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Project detail content styling */
.project-details .project-detail-item .text-break {
    font-family: "Roboto Flex", sans-serif !important;
    font-optical-sizing: auto !important;
    font-weight: 200 !important;
    font-style: italic !important;
    font-variation-settings:
        "slnt" 0,
        "wdth" 100,
        "GRAD" 0,
        "XOPQ" 96,
        "XTRA" 468,
        "YOPQ" 79,
        "YTAS" 750,
        "YTDE" -203,
        "YTFI" 738,
        "YTLC" 514,
        "YTUC" 712 !important;
    font-size: 12px !important;
    line-height: 1.8 !important;
    letter-spacing: 0.4px !important;
    color: #000000;
}

/* Remove underline from links in project details */
.project-detail-item a {
    text-decoration: none !important;
}

.project-detail-item a:hover {
    text-decoration: none !important;
}

/* Text break content styling */
.text-break-content {
    font-family: "Garamond Premier Pro Light Display", serif;
    font-size: 12px;
    line-height: 1.6;
    letter-spacing: 0.3px;
    color: #000000;
}

/* RHS Chelsea Banner */
.rhs-banner {
    background-color: #fff;
    padding: 20px 0;
    border-bottom: 1px solid rgba(176, 165, 129, 0.3);
}

.rhs-banner-link {
    font-family: 'The Seasons Light', sans-serif;
    font-size: 18px;
    letter-spacing: 1px;
    color: #454545 !important;
    text-decoration: none !important;
    text-transform: uppercase;
    transition: color 0.3s ease;
}

.rhs-banner-link:hover {
    color: #847c58 !important;
    text-decoration: none !important;
}

@media screen and (max-width: 768px) {
    .rhs-banner-link {
        font-size: 14px;
    }
}

/* Homepage layout */
.home-page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.site-header {
    background-color: #fff;
}

.site-header, .site-footer {
    padding: 10px 0; /* Reduced padding */
    position: relative;
    z-index: 10;
}

.site-footer,
.site-footer * {
    color: #847c58 !important;
}

/* Specific footer heading text in lighter green */
.site-footer .mb-1:first-child,
.site-footer .text-metadata-light {
    color: #afb649 !important;
}

 .home-center-section {
    flex: 1;
    background-image: url('/img/home-background - 8.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 60px 0;
    min-height: 100vh;
    position: relative;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
}

.home-center-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.2);
    z-index: -1;
}

.home-center-section .big-project-name {
    color: #e6e0d0 !important;
    text-shadow: none;
}

.home-center-section .big-project-name a {
    color: #e6e0d0 !important;
}

.home-center-section .big-project-name a:hover {
    color: #c2c961 !important;
}

.home {
    background-color: transparent !important;
}


.home .container-fluid,
.home .row,
.home footer {
    position: relative;
    z-index: 2;
}

.home .big-project-name {
    color: #e6e0d0 !important;
    text-shadow: none;
}

.home .big-project-name a {
    color: #e6e0d0 !important;
}

.home .heading-title,
.home footer,
.home .fa {
    color: #847c58 !important;
}

.home-content {
    text-align: center;
    position: relative;
    z-index: 2;
}

/* Universal font color override */
* {
    color: #000000 !important;
}

/* Override for homepage project names */
.home .big-project-name,
.home .big-project-name *,
.home-center-section .big-project-name,
.home-center-section .big-project-name *,
.big-project-name a {
    color: #e6e0d0 !important;
}

/* Override for philosophy paragraph */
.centered-text-content {
    color: #afa580 !important;
    font-weight: 500 !important;
}

body {
    background-color: #fffdfa;
    font-size: 14px;
    font-family: "Roboto Flex", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    line-height: 30px;
    color: #000000;
}

p {
    color: #312a28 !important;
}


/* margin top */

.mt-xl {
    margin-top: 15px; /* Reduced from 40px */
}

/* link */

a {
    color: #151515 !important;
    text-decoration: underline;
    background-color: transparent;

}

a:active,
a:hover {
    color: #151515;
    outline-width: 0;
}

a:hover,
a:focus {
    text-decoration: underline;
}
/* horizontal rule */


hr {
    border-top: 1px solid #b0a581;
    opacity: 100%;
}

.content .markdown hr {
    margin-left: 1.52rem;
    margin-right: 1.52rem;
}

/* Partial: Header */
a.no-underline {
    text-decoration: none;
}

.header a:hover {
    text-decoration: underline;
}

.header h1 {
    font-size: 28px;
    font-family: "The Seasons Bold";
    letter-spacing: 10px;
    text-decoration: none !important;
}

.heading-title {
    font-size: 20px !important;
    color: rgb(34, 34, 34) !important;
}


.nav {
    font-family: "Roboto Flex", sans-serif;
    font-optical-sizing: auto;
    font-weight: 200;
    font-style: normal;
    font-variation-settings:
        "slnt" 0,
        "wdth" 100,
        "GRAD" 0,
        "XOPQ" 96,
        "XTRA" 468,
        "YOPQ" 79,
        "YTAS" 750,
        "YTDE" -203,
        "YTFI" 738,
        "YTLC" 514,
        "YTUC" 712;
    letter-spacing: 0.4px;
    font-size: 12px;
}

.big-project-name {
    font-family: "The Seasons Light";
    text-transform: none;
    font-size: 80px;
    letter-spacing: -3px;
    text-decoration: none;
}

.big-project-name a {
    color: rgb(34, 34, 34) !important;
}

.big-project-name sup {
    font-size: 15px;
    letter-spacing: 0px;
    vertical-align: super;
}

@media screen and (min-width: 769px)  {
    .big-project-name sup {
        top: -1.1rem;
    }
}

.big-project-name a:hover {
    color: rgb(82,79,72) !important;
    text-decoration: none;
}

@media screen and (max-width: 768px) {
    .big-project-name {
        font-size: 3rem;
    }
}

.mobile-break {
    height: 1.2rem;
}

@media screen and (min-width: 600px)  {
    .mobile-break { display: none; }
}

/* Partial: Content */
.project-type {
    font-size: 14px;
    font-family: "Roboto Flex", sans-serif;
    text-transform: uppercase;
    font-weight: 100;
    font-style: normal;
    letter-spacing: 0.4rem;
}

.project-title {
    font-family: "The Seasons Bold";
    font-size: 16px
}

.project-description h3 {
    font-family: "The Seasons Bold";
    font-size: 16px
}


.project-description {
    text-align: justify;
}

.projects-table th {
    font-family: 'The Seasons Regular', serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-variation-settings:
        "slnt" 0,
        "wdth" 100,
        "GRAD" 0,
        "XOPQ" 96,
        "XTRA" 468,
        "YOPQ" 79,
        "YTAS" 750,
        "YTDE" -203,
        "YTFI" 738,
        "YTLC" 514,
        "YTUC" 712;
    font-size: 12px;
    letter-spacing: 0.4px;
    opacity: 0.6;
}

.projects-table td {
    font-family: 'The Seasons Regular', serif;
    font-optical-sizing: auto;
    font-weight: 200;
    font-style: normal;
    font-variation-settings:
        "slnt" 0,
        "wdth" 100,
        "GRAD" 0,
        "XOPQ" 96,
        "XTRA" 468,
        "YOPQ" 79,
        "YTAS" 750,
        "YTDE" -203,
        "YTFI" 738,
        "YTLC" 514,
        "YTUC" 712;
    font-size: 12px;
    line-height: 1.8;
    letter-spacing: 0.4px;
    color: #000000;
    border-top: 0.5px solid rgba(176, 165, 129, 0.8);
}

.projects-table tbody tr:first-child td {
    border-top: 0.5px solid rgba(176, 165, 129, 0.8);
}

/* Override Bootstrap table borders */
.projects-table tbody tr td {
    border-top: 0.5px solid rgba(176, 165, 129, 0.3) !important;
}

.projects-table thead tr th {
    border-bottom: 0.5px solid rgba(176, 165, 129, 0.8) !important;
}

/* Apply style-14 font to all table headers (th) */
table th {
    font-family: 'The Seasons Regular', serif !important;
    font-optical-sizing: auto !important;
    font-style: normal !important;
    font-variation-settings:
        "slnt" 0,
        "wdth" 100,
        "GRAD" 0,
        "XOPQ" 96,
        "XTRA" 468,
        "YOPQ" 79,
        "YTAS" 750,
        "YTDE" -203,
        "YTFI" 738,
        "YTLC" 514,
        "YTUC" 712 !important;
    font-size: 12px !important;
    letter-spacing: 0.4px !important;
    opacity: 0.6 !important;
}

/* Apply projects-table styling to all table cells (td) for consistency */
table td {
    font-family: 'The Seasons Regular', serif !important;
    font-optical-sizing: auto !important;
    font-weight: 200 !important;
    font-style: normal !important;
    font-variation-settings:
        "slnt" 0,
        "wdth" 100,
        "GRAD" 0,
        "XOPQ" 96,
        "XTRA" 468,
        "YOPQ" 79,
        "YTAS" 750,
        "YTDE" -203,
        "YTFI" 738,
        "YTLC" 514,
        "YTUC" 712 !important;
    font-size: 12px !important;
    line-height: 1.8 !important;
    letter-spacing: 0.4px !important;
    color: #000000 !important;
}

/* About */
#a-little-bit {
    font-size: 45px;
    font-family: "The Seasons Light";
}

@media screen and (max-width: 768px) {
    #a-little-bit {
        margin-top: 1rem;
    }
}

a.aylett-studio {
    text-decoration: none !important;
}


#about-me {
    margin-top: 12rem !important;
    font-size: 75px;
    z-index: 99000;
    position: relative;
    overflow: visible;
    width: 25rem;
    font-family: "The Seasons Bold";
}

#ashleigh-picture {
    width: 100%;
    /* max-height: 100%; */
}

.straight-font {
    font-size: 14px;
    font-family: "Roboto Flex", sans-serif;
    font-weight: 100;
    letter-spacing: 3px;
    text-transform: uppercase;
}

#design-philosophy {
    font-size: 20px
}


.content .meta {
    font-weight: 400;
    font-size: 1rem;
    color: #738491;
    margin-bottom: 10px;
}

.content .meta a {
    text-decoration: none;
}

.content .middot:before {
    margin: 0 3px;
    content: "·";
}

.content .caption {
    text-align: center;
    margin-top: 10px;
    color: #586069;
    font-size: 0.9rem;
}

.content .markdown {
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.75rem;
}

.content .markdown li {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.content twitterwidget {
    margin: auto;
}

.content .meta,
.content .markdown h1,
.content .markdown h2,
.content .markdown h3,
.content .markdown h4,
.content .markdown h5,
.content .markdown h6,
.content .markdown p,
.content .markdown ul,
.content .markdown ol,
.content .markdown dl,
.content .markdown blockquote,
div.alert,
form,
.gist-file {
    margin-left: 1.5rem;
    margin-right: 1.5rem;
}

/* blog post typography */

.content .blog-post-title {
    font-size: 1rem;
    line-height: 2.625rem;
}

.content .blog-post-content {
    font-size: 1rem;
    line-height: 2rem;
}

/* centered, boxed blog post images */

.content .figure img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
}


.content .markdown code {
    /* enclosed by single backtick (`) */
    color: #333;
    padding: .2em .4em;
    margin: 0;
    font-size: 1rem;
    background-color: rgba(27, 31, 35, .05);
    border-radius: 6px;
}

.content .markdown pre {
    /* Hugo specific: consider using the 'highlight' shortcode */
    display: block;
    margin-top: 1rem;
    margin-bottom: 2rem;
    padding: 1rem;
    line-height: 20px;
    white-space: pre;
    word-break: break-all;
    word-wrap: break-word;
    margin-left: 1.5rem;
    margin-right: 1.5rem;
    border: 1px solid #b0a581;
    border-radius: 6px;
}

.content .markdown pre code,
.content .markdown pre output {
    /* enclosed by 4 backticks (````) */
    padding: 0;
    font-size: 0.75rem;
    line-height: 20px;
    background-color: #fff;
    border-radius: 0;
}

.content .markdown blockquote {
    padding: 0.5rem 0.5rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
    color: #7a7a7a;
    border-left: 0.25rem solid #b0a581;
}

.content .markdown blockquote p:last-child {
    margin-bottom: 0;
}

.content .markdown figure {
    background: #fff;
}

.content .post-item {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: -ms-flex;
    display: flex;
    margin-bottom: 1rem;
}

.content .meta-title a {
    text-decoration: none;
}

.content .meta-title a:hover {
    text-decoration: underline;
}

.content .meta-date {
    font-size: 1rem;
    color: #738491;
    margin-bottom: 2rem;
}

.content .navigation .icon {
    width: 16px;
    height: 16px;
}

/* Partial: Utterances Comments */

.comments {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    max-width: 100%;
}

/* Header navigation */
.header-nav {
    display: flex;
    align-items: center;
    gap: 20px;
    justify-content: flex-end;
}

.header-nav .nav-link {
    font-family: "Roboto Flex", sans-serif;
    font-optical-sizing: auto;
    font-weight: 200;
    font-style: normal;
    font-variation-settings:
        "slnt" 0,
        "wdth" 100,
        "GRAD" 0,
        "XOPQ" 96,
        "XTRA" 468,
        "YOPQ" 79,
        "YTAS" 750,
        "YTDE" -203,
        "YTFI" 738,
        "YTLC" 514,
        "YTUC" 712;
    font-size: 12px;
    text-transform: none;
    text-decoration: none;
    letter-spacing: 0.4px;
    color: #454545 !important;
    transition: color 0.2s ease;
    white-space: nowrap;
}

.header-nav .nav-link:hover {
    color: rgb(82, 79, 72) !important;
    text-decoration: none;
}

/* Fix for Instagram icon */
.header-nav .instagram-icon i {
    font-size: 18px;
    color: #454545 !important;
    display: inline-block;
}

.header-nav .instagram-icon:hover i {
    color: rgb(82, 79, 72) !important;
}

.featured-projects-heading {
    font-family: 'The Seasons Light', sans-serif;
    font-size: 15px;
    color: #454545;
    text-align: center;
    margin-bottom: 15px;
    letter-spacing: 0.75px;
}

.home-center-section .featured-projects-heading {
    color: #ffffff !important;
    text-shadow: none;
}

@media screen and (max-width: 768px) {
    .header-nav {
        gap: 10px;
        justify-content: flex-end;
    }
    
    .header-nav .nav-link {
        font-size: 12px;
    }
    
    .header-nav .instagram-icon i {
        font-size: 16px;
    }
    
    /* Hide all nav links except Instagram on very small screens */
    @media screen and (max-width: 576px) {
        .header-nav .nav-link:not(:last-child) {
            display: none;
        }
    }
}

/* Logo styling */
.logo-image {
    max-width: 100%;
    height: auto;
    display: block;
    max-height: 120px; /* Control the height of the logo */
}

.w-10 { width: 10% !important; }
.w-15 { width: 15% !important; }
.w-20 { width: 20% !important; }
.w-35 { width: 35% !important; }

/* Contact Form Styles */
.contact-form {
    margin-bottom: 3rem;
}

.contact-form .form-label {
    font-family: "Roboto Flex", sans-serif;
    font-optical-sizing: auto;
    font-weight: 200;
    font-style: normal;
    font-variation-settings:
        "slnt" 0,
        "wdth" 100,
        "GRAD" 0,
        "XOPQ" 96,
        "XTRA" 468,
        "YOPQ" 79,
        "YTAS" 750,
        "YTDE" -203,
        "YTFI" 738,
        "YTLC" 514,
        "YTUC" 712;
    font-size: 15px;
    line-height: 1.8;
    letter-spacing: 0.4px;
    color: rgb(45, 45, 45);
    margin-bottom: 0.5rem;
}

.contact-form .form-label .helper-text {
    font-size: 12px;
}

.contact-form .form-label.required {
    font-weight: bold;
}

.contact-form .form-control {
    font-family: 'Garamond Premier Pro Light Display', serif;
    font-size: 16px;
    line-height: 1.5;
    padding: 0.75rem 0;
    border: none;
    border-bottom: 1px solid #ccc;
    border-radius: 0;
    background-color: #fffdfa;
    transition: border-color 0.2s ease;
}

.contact-form .form-control:focus {
    border-bottom-color: #454545;
    box-shadow: none;
    outline: none;
}

.contact-form .form-control.is-invalid {
    border-bottom-color: #dc3545;
}

.contact-form .form-control.is-valid {
    border-bottom-color: #ccc;
}

.contact-form .invalid-feedback {
    display: block;
    font-family: 'Garamond Premier Pro Light Display', serif;
    font-size: 15px;
    color: #dc3545;
    margin-top: 0.25rem;
}

.contact-form select.form-control {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
    padding-right: 2.5rem;
}

.contact-form .form-check-input {
    margin-top: 0.25rem;
}

.contact-form .form-check-label {
    margin-left: 0.5rem;
    line-height: 1.6;
}

.contact-submit {
    font-family: 'The Seasons Light', sans-serif;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 0.75rem 2rem;
    border: none;
    border-radius: 4px;
    transition: all 0.2s ease;
    min-width: 150px;
}

.contact-submit:disabled {
    background-color: #6c757d;
    border-color: #6c757d;
    cursor: not-allowed;
}

.contact-submit:not(:disabled) {
    background-color: white;
    border-color: #454545;
    color: #454545;
}

.contact-submit:not(:disabled):hover {
    background-color: #f8f9fa;
    border-color: #333;
    color: #333;
}

.form-text.text-muted {
    font-family: 'Garamond Premier Pro Light Display', serif;
    font-size: 13px;
    color: #6c757d;
    margin-top: 0.25rem;
}

@media (max-width: 768px) {
    .contact-form {
        padding: 2rem 1rem;
        margin: 0 1rem 2rem 1rem;
    }
}

/* Project Preview Overlay */
.project-preview-overlay {
    position: fixed;
    pointer-events: none;
    z-index: 6;
    opacity: 0;
    visibility: hidden;
    transition: opacity 2s ease, visibility 2s ease;
    border-radius: 3px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    width: 200px;
    height: 260px;
}

.project-preview-overlay.show {
    opacity: 1;
    visibility: visible;
}

.project-preview-overlay img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Ensure project links can receive focus */
.big-project-name a {
    outline: none;
    transition: color 0.2s ease;
    position: relative;
    z-index: 15;
}

.big-project-name a:focus {
    color: #c2c961 !important;
}

/* Mobile adjustments for project preview */
@media (max-width: 768px) {
    .project-preview-overlay {
        width: 160px;
        height: 210px;
    }
}

@media (max-width: 576px) {
    .project-preview-overlay {
        width: 140px;
        height: 180px;
    }
}