/******************************************
/* VARIABLES & RESET
/*******************************************/
/* Variables */
:root {
  --primary-red: #91091E;
  --orange: #DA723C;
  --primary-orange: #F77F00;
  --secondary-orange: #C44A3A;
  --tertiary-tan: #C39E5C;
  --light-tan: #EED9B9;
  --cream: #FDF1D6;
  --banana: #FEFEA4;
  --primary-brown: #5D4037;
  --light-brown: #8D6E63;
  --dark-brown: #3E2723;
  --dark-black: #091413;
  --charcoal: #262626;

  --pure-black: #000;
  --french-vanilla: #E2DDB4;
  --vanilla: #F6EFD2;
  --bright-red: #E43636;
}


/* Box Model Hack */
* {
  box-sizing: border-box;
}

/* Clear fix hack */
.clearfix:after {
     content: ".";
     display: block;
     clear: both;
     visibility: hidden;
     line-height: 0;
     height: 0;
}

.clear {
	clear: both;
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/******************************************
/* BASE STYLES
/*******************************************/

html, body {
  height: 100%; /* Necessary for the body to know how tall the screen is */
}

body {
  background-color: var(--dark-black);
  color: var(--vanilla);

  /* Sticky Footer Logic */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Ensures content sectoin takes up all available space, pushing footer to the very bottom */
.mainpage, .about-page, .contact-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  padding-top: 80px;
  padding-bottom: 40px;
  text-align: center;
}

h1, h2, h3 {
  font-family: "DM Serif Text", serif;
  text-align: center;
}

h1 {
  font-size: clamp(3rem, 8vw, 6rem); /* Responsive: gets bigger on desktops */
  font-weight: 800;
  margin-top: 2rem;
  margin-bottom: 1.5rem;
  color: var(--cream);
  text-transform: uppercase;
  letter-spacing: 4px;
}

h2 {
  font-size: clamp(2rem, 5vw, 4rem); /* Slightly smaller than H1 */
  font-weight: 400;
  color: var(--cream);
  letter-spacing: 1px;
}

h3 {
     font-size: clamp(1.8rem, 3vw, 2.8rem);
     font-weight: 400;
     color: var(--cream);
     letter-spacing: 1px;
}

p {
     font-family: "Outfit", sans-serif;
     font-size: 1.5rem;
}
/***** Navigation (Desktop and Mobile *****/

nav {
  background-color: var(--primary-red);
  padding: 10px 40px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: space-between; /* makes sure spacing is correct */
  align-items: center; /* vertically centers everything */
  min-height: 70px; /* Gives the nav a consistent height */
}

/* Container for the logo to ensure it doesn't stretch */
.nav-logo {
  display: flex;
  align-items: center;
}

/* The Mini Nav Logo */
.nav-logo img {
  height: 50px; /* Fixed height keeps the nav bar from growing/shrinking */
  width: auto;
  border-radius: 4px; /* Softens the white square corners slightly */
}

/* Update Nav for Alignment */
.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: none;
  margin: 0 auto;
}

/* The Container for Links */
.nav-links {
     display: flex;
     gap: 20px; /* Tightens gap slightly to fit everything better */
     align-items: center;
}

/* The Links (Buttons) */
.nav-links a{
     text-decoration: none;
     background-color: var(--tertiary-tan);
     color: var(--dark-black);
     font-family: "Outfit", sans-serif;
     font-weight: 700;
     padding: 8px 18px;
     border-radius: 50px;
     transition: all 0.3s ease;
     white-space: nowrap;
}

.nav-links a:hover {
     background-color: var(--dark-brown);
     color: var(--vanilla);
     transform: translateY(-2px);
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Hamburger Icon (Hidden on Desktop) */
.hamburger {
     display: none;
     font-size: 2rem;
     color: var(--vanilla);
     cursor: pointer;
     background: none;
     border: none;
     position: absolute;
     right: 20px;
     top: 15px;
}


/***************** FOOTER ****************/

footer {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
     background-color: var(--primary-red);
     color: var(--vanilla);
     padding: 15px 60px;
     margin-top: auto; /* Ensures footer stays at bottom */
     font-family: "Outfit", sans-serif;
}

/* Usiung individual zones with flex to stack their own text vertically */
.footer-side, .footer-center {
     display: flex;
     flex-direction: column;
     gap: 8px;
     flex: 1; /* forcing all three zones to take up equal width */
}

.footer-side img {
     height: auto;
     width: 5rem;
}

.footer-center {
     align-items: center; /* keep middle content centered */
     text-align: center;
}

.footer-side:first-child {
    align-items: flex-start;
    text-align: left; 
}

.footer-side:last-child {
     align-items: flex-end;
     text-align: right
}

/* Size the footer social icons */
.footer-social img {
     width: 50px;
     height: 50px;
     margin: 5px;
}

footer a {
     color: var(--cream);
     text-decoration: underline;
     transition: color 0.3s ease;
}

footer a:hover {
     color: var(--tertiary-tan);
}

#footer-placeholder {
     margin-top: auto;
}

/******************************************
/* LAYOUT
/*******************************************/

/****** Main Page ******/
.mainpage {
  display: flex;
  flex-direction: column;
  justify-content: center; /* Vertical center */
  align-items: center; /* Horizontal center */
  text-align: center;
  padding: 2rem;
}

.mainSubheading strong {
  color: var(--bright-red);
}

.mainStatement {
  font-size: clamp(1.5rem, 2.9vw, 2rem); /* Slightly smaller than the H2 */
  color: var(--french-vanilla); /* Separate color than titles for classy look */
  font-style: italic; /* add a little spritz to it with an italic look */
  font-weight: 300;
  margin-top: 1rem;
  letter-spacing: 1px;
  opacity: 0.9; /* Softens the text up slighly so it doesn't compete with the H1 */
}

.mainStatement, .support-page, .about-page p {
  margin-bottom: auto; /* Pushes the footer away from the bottom */
}

/****** About Page ******/

.about-page > h2 {
     margin: 5% 0;
}

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

.about-container {
     display: flex;
     align-items: flex-start;
}

.story-container {
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
}

.about-paragraph > strong {
     text-decoration: underline;
     font-weight: bold;
}

.about-page p {
     max-width: 55ch;
     line-height: 1.5;
     text-align: left;
     text-indent: 30px;
     margin: 10px 0;
     padding-left: 5%;
}

.about-image {
     margin-bottom: 5%;
}

.about-image > img{
     max-width: 1400px;
     width: 65%;
     height: auto;
     border-radius: 10%;
}

/****** Gallery Page ******/
.gallery-page {
     padding: 20px;
     max-width: 1400px;
     margin: 0 auto;
}

.gallery-page h2 {
     margin-bottom: 3rem;
     font-style: italic;
     opacity: 0.8;
}

/* Container for each tier */
.recent-projects {
     display: grid;
     /* Creates responsive grid: minimum 300px per item, fills the row */
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     gap: 30px;
     margin-bottom: 60px;
     padding: 0 20px;
}

/* Ensure the heading takes upthe full widt of the grid row */
.recent-projects h3 {
     grid-column: 1 / -1;
     margin-bottom: 20px;
     border-bottom: 1px solid var(--tertiary-tan);
     padding-bottom: 10px;
}

/* Figure Styling */
.recent-projects figure {
     display: flex;
     flex-direction: column;
     align-items: center;
     transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
     cursor: pointer;
}

/* Image Control */
.recent-projects img {
     width: 100%;
     height: 300px; /* Fixed height for uniformity */
     object-fit: cover; /* Prevents stretching */
     border-radius: 12px;
     border: 1px solid rgba(238, 217, 185, 0.2);
     transition: all 0.3s ease;
}

/* The "Pop and Glow" Effect */
.recent-projects figure:hover {
     transform: scale(1.25); /* The Pop */
}

.recent-projects figure:hover img {
     /* Thje Glow - using the orange variable */
     box-shadow: 0 0 20px rgba(247, 127, 0, 0.4);
     border-color: var(--primary-orange);
}

/* Updated Centered & Tinted Captions */
.recent-projects figcaption {
     margin-top: 12px;
     padding: 12px 18px; /* Give the text breathign room inside the tint */

     /* A subtle dark tint using 60% opacity black */
     background-color: rgba(0, 0, 0, 0.6);

     /* An optional very thin border to define the edge */
     border: 1px solid rgba(238, 217, 185, 0.1);
     border-radius: 8px; /* To match the image corners */

     font-family: "Outfit", sans-serif;
     font-size: 1.05rem;
     line-height: 1.4;
     text-align: center;
     color: var(--vanilla);

     /* Ensuring the tint box doesn't look too stretched on wide screens */
     max-width: 95%;
     width: fit-content; /* Shrinks the background to fit the text length */
     margin-left: auto;
     margin-right: auto;

     transition: all 0.3s ease;
}

/* Optional: Make the caption tint slightly brighter when hovering over the whole figure */
.recent-projects figure:hover figcaption {
     background-color: rgba(0, 0, 0, 0.8);
     border-color: var(--tertiary-tan);
}

/****** Support/Form Page Styles ******/
.support-page {
     max-width: 850px;
     margin: 0 auto;
     padding: 60px 20px;
}

.form-header {
     text-align: center;
     margin-bottom: 50px;
}

.form-header h1 {
     font-family: 'DM Serif Text', serif;
     color: var(--tertiary-tan);
     font-size: 3.5rem;
     margin-bottom: 15px;
}

.form-header p {
     color: var(--vanilla);
     font-size: 1.1rem;
     max-width: 600px;
     margin: 0 auto;
     line-height: 1.6;
}

.quote-form {
     background: var(--charcoal);
     padding: 45px;
     border-radius: 25px;
     border: 1px solid rgba(195, 158, 92, 0.15); /* Subtle tan border */
     box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
}

.form-section {
     margin-bottom: 35px;
}

.form-section h3 {
     color: var(--vanilla);
     font-family: 'Outfit', sans-serif;
     font-size: 1.3rem;
     border-bottom: 1px solid var(--tertiary-tan);
     padding-bottom: 10px;
     margin-bottom: 25px;
     text-transform: uppercase;
     letter-spacing: 1px;
}

.form-group {
     margin-bottom: 25px;
     display: flex;
     flex-direction: column;
}

.form-row {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 25px;
}

.quote-form label {
     color: var(--tertiary-tan);
     font-weight: 700;
     margin-bottom: 10px;
     font-family: 'Outfit', sans-serif;
}

.quote-form input, .quote-form textarea {
     background: var(--dark-black);
     border: 1px solid #333;
     border-radius: 10px;
     padding: 14px;
     color: var(--vanilla);
     font-family: 'Outfit', sans-serif;
     font-size: 1rem;
     transition: all 0.3s ease;
}

quote-form input:focus, .quote-form textarea:focus {
     outline: none;
     border-color: var(--primary-orange);
     box-shadow: 0 0 8px rgba(247, 127, 0, 0.2);
}

.quote-form small {
     color: var(--light-tan);
     margin-top: 8px;
     font-size: 0.85rem;
     opacity: 0.8;
}

.quote-form small a {
     color: var(--primary-orange);
     text-decoration: underline;
}

/* Styling for the number input to match your text inputs */
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
    opacity: 1; /* Makes the arrows visible on the dark background */
    filter: invert(1); /* Inverts the color to be light so they stand out */
}

.submit-btn {
     width: 100%;
     background-color: var(--primary-red);
     color: var(--vanilla);
     padding: 22px;
     border: none;
     border-radius: 12px;
     font-size: 1.3rem;
     font-weight: 800;
     font-family: 'Outfit', sans-serif;
     cursor: pointer;
     transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.submit-btn:hover {
     background-color: var(--bright-red);
     transform: translateY(-4px);
     box-shadow: 0 8px 20px rgba(228, 54, 54, 0.3);
}

/****** Support/Form Page ******/
.form-row {
     grid-template-columns: 1fr;
}

.quote-form {
     padding: 25px;
}

.form-header h1 {
     font-size: 2.5rem;
}

.quote-form select {
     background: var(--dark-black);
     border: 1px solid #333;
     border-radius: 10px;
     padding: 14px;
     color: var(--vanilla);
     font-family: 'Outfit', sans-serif;
     font-size: 1rem;
     width: 100%;
     cursor: pointer;
     appearance: none; /* Removes default browser styling */
     background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
     background-repeat: no-repeat;
     background-position: right 15px center;
     background-size: 15px;
}

.quote-form select:focus {
     outline: none;
     border-color: var(--primary-orange);
     box-shadow: 0 0 8px rgba(247, 127, 0, 0.2);
}

/****** Contact Page ******/
.contact-page {
     display: flex;
     flex-direction: column;
     align-items: center;
     text-align: center;
     padding: 40px 20px;
}

.contact-page > h1 {
     margin-bottom: 7%;
}

.address-title {
     color: var(--tertiary-tan); /* Give the address a distinct "Title" look */
     text-transform: uppercase;
     letter-spacing: 2px;
     margin-bottom: 5px;
     border-bottom: 2px solid var(--primary-red); /* adds nice "underline" anchor */ 
     display: inline-block; /* Keeps border from stretching across whole screen */
     width: fit-content; /* Shrinks width to match text */
     margin: 0 auto 10px; /* Centers box and adds some bottom spacing */
     padding-bottom: 5px;
     font-size: 2rem; /* adjusting address for a little more punch */
}

.store-img {
     max-width: 50%;
     width: auto;
     height: auto;
     border-radius: 15px;
     margin-bottom: 25px;
     padding: 0 1%;
}

/* Style the IMPORTANT parts of the directions */
.self-service strong,
.directions strong,
.payment strong {
    color: var(--primary-orange); /* Or --bright-red */
    font-weight: 900;
    /* This creates a subtle "glow" or highlight effect */
    background-color: rgba(247, 127, 0, 0.15); 
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase; /* Makes it look like a road sign */
    border: 1px solid rgba(247, 127, 0, 0.3);
}

/* Give the italics a subtle glow so they don't get lost on the dark background */
.self-service em,
.directions em,
.payment em {
    font-style: italic;
    color: var(--french-vanilla);
    border-bottom: 1px dashed var(--tertiary-tan);
}

.email-link {
     color: var(--banana);
     text-decoration: none;
     font-weight: 700;
     border-bottom: 2px solid rgba(254, 254, 164, 0.3);
     transition: all 0.4s ease;
     cursor: pointer;
}

.email-link:hover,
.email-link:active {
     color: #fff; /* Swaps to pure white for maximum contrast */
     border-bottom-color: var(--banana);

     /* The Glow Effect */
     text-shadow: 0 0 10px var(--banana),
                  0 0 20px rgba(254, 254, 164, 0.5);
     /* Subtle lift to show it's active */
     transform: tranlateY(-1px);
     display: inline-block; /* Needed for transform to work properly */
}

.map-btn {
     display: inline-block;
     margin: 15px auto;
     padding: 10px 20px;
     border: 1px solid var(--tertiary-tan);
     color: var(--tertiary-tan);
     text-decoration: none;
     font-family: "Outfit", sans-serif;
     font-weight: 600px;
     line-height: 1.3;
     border-radius: 5px;
     transition: all 3s ease;
     font-size: 1.1rem;
}

.map-btn:hover {
     background-color: var(--tertiary-tan);
     color: var(--dark-black);
}

.garage-note {
     opacity: 0.8;
     margin-top: 5px;
}

.suppliers-title {
     margin-bottom: 20px; /* forcing space between title and note */
}

.service-hours > h3 {
     color: var(--bright-red);
     margin-top: 20px;
     
}

.directions > h3 {
     color: var(--tertiary-tan)
}

/* Supplier Section Styling */
.suppliers-container {
    /* margin: 40px 0; */
     margin-top: 60px;
     margin-bottom: 40px;
     width: 100%;
     max-width: 600px; /* Keeps it tight like the directions */
}

.supplier-note {
     font-size: 1.3rem !important; /* hate using these, but necessary here (smaller than main txt */
     line-height: 1.5;
     font-style: italic;
     color: var(--french-vanilla);
     margin-bottom: 30px;
}

.supplier-links {
     display: flex;
     gap: 20px;
     justify-content: center;
}

.supplier-btn {
     flex: 1;
     background-color: transparent;
     border: 2px solid var(--tertiary-tan);
     color: var(--vanilla);
     padding: 18px 30px;
     text-decoration: none;
     font-family: "Outfit", sans-serif;
     font-weight: 700;
     font-size: 1.2rem;
     border-radius: 8px;
     transition: all 0.3s ease;
     text-align: center;
}

.supplier-btn:hover {
     background-color: var(--tertiary-tan);
     color: var(--dark-black);
}

.social-row {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 15px;
}

.contact-info {
     font-family: "Outfit", sans-serif;
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 10px;
     margin: 1% 0;
     /* fix for mobile as email address is so long */
     font-size: clamp(1.2rem, 6vw, 2.5rem);
     /* saftey net if address is still too long */
     word-wrap: break-word;
     overflow-wrap: break-word;
     width: 100%;
     max-width: 90vw; /* prevents from touching edge of screen */
     margin-left: auto;
     margin-right: auto;
}

.entryway-img {
     width: 100%;
     max-width: 600px;
     height: auto;
     border-radius: 12px;
     margin: 20px 0;
}  

/* Mirroring teh directions style for the service hours text */
.directions p,
.self-service,
.payment p {
     max-width: 55ch; /* Limits line length to ~55 characters per line */
     margin-left: auto;
     margin-right: auto;
     line-height: 1.6; /* Adds some vertical breathing room */
     text-align: left; /* making left aligned since this is long text and easier to read this way */
     width: 100%;
}

.payment h3 {
     color: var(--tertiary-tan);
     text-align: center;
     margin-top: 40px;
     margin-bottom: 20px;
}

/* Making sure the headers stay centered */
.service-hours h3, .directions h3 {
     text-align: center;
     margin-bottom: 10px;
}    

.social-icons img {
     width: 50px;
     height: 50px;
     margin: 0;
     transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.social-icons img:hover {
     transform: scale(1.1) translateY(-4px); 
     filter: drop-shadow(0 8px 15px rgba(247, 127, 0, 0.5));
}

/* Thanks page styles - hidden styling for the form submission success message */
/* Thanks Page Styles */
.thanks-page {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 60vh; /* Keeps the content vertically balanced */
    padding: 60px 20px;
    text-align: center;
}

.thanks-content {
    max-width: 600px;
    background-color: var(--vanilla); /* Uses your existing variable for a soft background */
    padding: 50px 40px;
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); /* Optional: adds a subtle depth */
}

/* Fixes the giant checkmark */
.success-icon svg {
    width: 80px;
    height: 80px;
    color: var(--primary-red); /* Brands the icon with your main red */
    margin-bottom: 20px;
}

.thanks-content h1 {
    color: var(--dark-black);
    margin-bottom: 15px;
    font-size: 2.5rem;
}

.thanks-content p {
    color: var(--charcoal);
    margin-bottom: 15px;
    font-size: 1.1rem;
    line-height: 1.6;
}

/* Aligns the buttons nicely */
.thanks-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-top: 35px;
    flex-wrap: wrap; /* Ensures buttons stack cleanly on mobile */
}

/* Styles the secondary link to complement the main button */
.thanks-actions .secondary-link {
    color: var(--primary-red);
    text-decoration: underline;
    font-weight: 600;
    transition: color 0.3s ease;
}

.thanks-actions .secondary-link:hover {
    color: var(--primary-orange);
}

/******************************************
/* ADDITIONAL STYLES
/*******************************************/

/* Main Storefront Image (Centered & Promenant on Main Page */
.mainLogoImage {
  display: block;
  margin: 1.5rem auto;
  max-width: 60rem; /* Kept a bit smaller for elegance */
  width: 90%;
  border: 3px solid var(--french-vanilla);
  border-radius: 15px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}



/******************************************
/* MEDIA QUERIES
/*******************************************/
@media screen and (max-width: 768px) {
     /* Base Layout */
     h1 {
          font-size: 2.5rem;
          margin-top: 4rem; /* Extra space for the fixed nav on mobile */
     }

     h2 {
          font-size: 1.8rem;
     }

     /* Navigation Switch to Hamburger */
     .hamburger {
          display: block;
     }

     .nav-links {
          display: none;
          flex-direction: column;
          width: 100%;
          position: absolute;
          top: 60px;
          left: 0;
          background-color: var(--dark-black);
          padding: 20px 0;
          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
          z-index: 100;
     }

     .nav-links.active {
          display: flex;
     }

     .nav-links a {
          background-color: transparent;
          color: var(--vanilla);
          border-radius: 0;
          width: 100%;
          text-align: center;
          padding: 15px;
          border-bottom: 1px solid #eee;
     }

     .nav-links a:hover {
          background-color: var(--french-vanilla);
          box-shadow: none;
          transform: none;
     }
     /* Footer fix for mobile */
      footer {
          flex-direction: column;
          text-align: center;
          width: 100%;
          padding: 30px 15px;
     }

     .footer-side, .footer-center {
          width: 100%;
          margin-bottom: 20px;
          align-items: center !important; /* Forces all footer items to center */
          text-align: center !important;
     }
     /* About me page for mobile */
     .about-container {
          flex-direction: column;
          align-items: center;
     }

     .story-container {
          width: 100%;
     }

     .about-page p {
          padding-left: 0; /* Removes the 5% offset so text doesn't get squished */
          max-width: 100%; /* Allows text to use full screen width */
          text-align: center; /* Looks cleaner on mobile when text is center instead of left-aligned */
          text-indent: 0; /* Removes indedn on mobile (looks broken with indent on mobile screens) */
          padding: 0 20px; /* Gives text some breathing room from screen edges. */
     }

     .about-image {
          width: 100%;
          order: -1; /* Moves the photo above text on mobile */
          margin-top: 20px;
     }

     .about-image > img {
          width: 90%; /* Makes the photo prominent on mobile */
          max-width: 400px; /* Prevents it from getting giant on tablets */
          border-radius: 20px;
     }

     /* Gallery page for mobile */
     .recent-projects {
          grid-template-columns: 1fr; /* Strict single column for mobile */
          gap: 40px;
     }

     .recent-projects img {
          height: 250px; /* Slightly shorter for mobile */
     }

     /* Contact page for mobile */
     .contact-page {
          gap: 45px; /* adjust this as necessary to get perfect mobile fit */
          padding-top: 40px; /* tighten up the padding if necessary - can change or remove */
     }

     .contact-info, .store-img {
          margin: 0 auto;
          width: 95%; /* gives text a little more room on the sides */
     }

     .directions {
          margin-bottom: 10px;
     }

     .contact-details {
          flex-direction: column;
          align-items: center;
          justify-content: space-between;
     }

     .store-img {
          max-width: 95%; /* let it be wider on mobile */
          padding: 0;
     }

     /* Mobile handling for suppliers */
     .supplier-links {
          flex-direction: column;
          width: 100%;
     }
}