/* ========================================================================== */
/* 1. GOOGLE FONTS IMPORT                                                     */
/* ========================================================================== */
/* This line loads custom fonts from Google so the page text looks nicer. */
@import url('https://fonts.googleapis.com/css2?family=Amatic+SC:wght@700&family=Arima:wght@400;700&family=Playfair+Display:wght@600;700&display=swap');

/* ========================================================================== */
/* 2. BRAND COLOR VARIABLES                                                   */
/* ========================================================================== */
/* The :root selector is the top-level element that holds variables we can reuse. */
:root {
    /* These are named colors that we can use throughout t  he stylesheet. */
    --amber-flame: #FFB000;    /* A warm gold color for buttons and highlights. */
    --carrot-orange: #EA8D22;  /* A stronger orange used for hover and bright accents. */
    --deep-walnut: #4A3525;    /* A dark brown color for text and headings. */
    --mint-cream: #F1FBF1;     /* A soft pale background color for the page. */
    --hunter-green: #2E5A44;   /* A rich green for links and footer background. */
}

/* ========================================================================== */
/* 3. GLOBAL RESET & BASE STYLES                                              */
/* ========================================================================== */
/* This block sets simple base rules for all elements so layout is predictable. */
* {
    box-sizing: border-box; /* Make width and height include padding and border. */
    margin: 0;              /* Remove default browser margins around every element. */
    padding: 0;             /* Remove default browser padding from every element. */
}

html, body {
    min-height: 100%;      /* Ensure the page can grow at least to full screen height. */
}

body {
    font-family: 'Arima', 'Segoe UI', system-ui, sans-serif; /* Set the default text font for the page with strong fallbacks. */
    background-color: var(--mint-cream);        /* Use the soft background color from variables. */
    color: var(--deep-walnut);                  /* Use the dark brown color for normal text. */
    padding: 15px;                              /* Add some space around the page edges. */
    max-width: 1200px;                          /* Keep the page from becoming too wide. */
    margin: 0 auto;                             /* Center the page horizontally in the browser. */
    background-image: url('images/HexagonBackgroundPattern.jpg'); /* Add a decorative background image. */
    background-size: cover;                     /* Make the background image cover the full area. */
    background-position: center;                /* Center the background image. */
    background-repeat: no-repeat;               /* Do not repeat the background image. */
}

img {
    max-width: 100%;    /* Prevent image width from overflowing its container. */
    height: auto;       /* Keep image proportions correct when resized. */
    display: block;     /* Remove default inline spacing below images. */
}

button, .btn {
    font-family: 'Arima', system-ui, sans-serif; /* Use the same font for buttons and links styled as buttons. */
}

/* ========================================================================== */
/* 4. TYPOGRAPHY RULES                                                        */
/* ========================================================================== */
/* These rules control how headings and text appear on the page. */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Playfair Display', Georgia, serif; /* Use a serif font for headings. */
    font-optical-sizing: auto;                       /* Let the browser choose the best font shape. */
    font-weight: 700;                               /* Make headings bold. */
    letter-spacing: 0.03em;                         /* Add a little space between letters. */
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.12);      /* Add a soft shadow for a lifted look. */
}

h1 {
    font-size: clamp(2.4rem, 4vw, 4rem); /* Make the main heading responsive to screen size. */
    line-height: 1.03;                    /* Control the spacing between lines in the heading. */
}

h2 {
    letter-spacing: 0.04em; /* Slightly more space between letters for section headings. */
}

p, span, li, a {
    font-family: 'Arima', system-ui, sans-serif; /* Use the body font for normal text and links. */
    line-height: 1.75;                            /* Increase line spacing for readability. */
}

p, li {
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.3); /* Light shadow to soften dark text on bright backgrounds. */
}

/* ========================================================================== */
/* 5. WIREFRAME LAYOUT STYLES                                                 */
/* ========================================================================== */

.main-header {
    display: flex;      /* Use flexible layout to place header items side by side. */
    flex-wrap: wrap;    /* Allow items to wrap onto a new line on smaller screens. */
    gap: 15px;          /* Add space between header items. */
    margin-bottom: 30px;/* Add space below the header. */
}

.header-title {
    flex: 1 1 320px;    /* Allow the title area to grow and shrink with the screen. */
    background-color: var(--amber-flame); /* Use the warm gold background color. */
    color: var(--deep-walnut);             /* Dark text on the golden background. */
    padding: 25px;                        /* Add internal spacing inside the box. */
    text-align: left;                     /* Align text to the left edge. */
    border-radius: 18px;                  /* Round the corners of the box. */
    box-shadow: inset 0 0 0 8px rgba(255, 255, 255, 0.1); /* Add a subtle inner outline. */
    display: flex;                        /* Use a vertical flex layout inside the title box. */
    flex-direction: column;               /* Stack the logo and text vertically. */
    gap: 12px;                            /* Add space between items in the box. */
}

.logo-heading {
    display: flex;      /* Place logo image and title side by side. */
    align-items: center;/* Center items vertically within the row. */
    gap: 15px;          /* Add space between the logo and the title. */
    flex-wrap: nowrap;  /* Keep the logo and title on the same line if possible. */
}

.header-title h1 {
    font-size: clamp(1.7rem, 3vw, 2.6rem); /* Make the heading resize on smaller screens. */
    margin: 0;                             /* Remove default spacing around the heading. */
    text-transform: uppercase;             /* Make the heading text all uppercase. */
    letter-spacing: 0.1em;                 /* Add extra spacing between letters. */
    white-space: nowrap;                   /* Prevent the heading from wrapping to a new line. */
}

.logo {
    display: block;       /* Make the logo behave like a block-level item. */
    max-width: 90px;      /* Keep the logo from growing too large. */
    margin: 0;            /* Remove any default margins. */
    flex-shrink: 0;       /* Prevent the logo from shrinking smaller than its size. */
}

.header-title p {
    margin-top: 10px;     /* Add space above the description text. */
    font-size: 1rem;      /* Use a normal readable size for the paragraph. */
    font-weight: 700;     /* Make the description text slightly bolder. */
}

.header-links {
    flex: 1 1 320px;      /* Allow the navigation box to grow and shrink too. */
    background-color: var(--hunter-green); /* Use the dark green background. */
    display: flex;        /* Use flex layout for the links. */
    justify-content: center; /* Center the links horizontally. */
    align-items: center;  /* Center the links vertically. */
    gap: 15px;            /* Add space between each link. */
    padding: 25px;        /* Add padding inside the navigation box. */
    border-radius: 18px;  /* Round the corners of the navigation box. */
}

.header-links a {
    font-family: 'Amatic SC', 'Segoe UI', system-ui, sans-serif; /* Use a handwritten-style font for the links with fallbacks. */
    font-size: 1.8rem;                    /* Make the navigation links larger. */
    font-weight: 700;                     /* Make the links bold. */
    color: var(--mint-cream);             /* Use pale text on the dark green background. */
    text-decoration: none;                /* Remove the underline from the links. */
    transition: color 0.2s ease;          /* Smoothly change the color on hover. */
}

.header-links a:hover {
    color: var(--carrot-orange); /* Change link color when the mouse moves over it. */
}

.hero-section {
    position: relative;                     /* Allow layered decorations inside this section. */
    overflow: hidden;                       /* Hide anything that spills outside the section edges. */
    background-color: rgba(241, 251, 241, 0.95); /* Light panel color for the hero area. */
    color: var(--deep-walnut);              /* Dark text color inside the hero area. */
    min-height: 260px;                      /* Give the hero section a minimum height. */
    display: flex;                          /* Use flex layout to center its content. */
    justify-content: center;                /* Center content horizontally. */
    align-items: center;                    /* Center content vertically. */
    text-align: center;                     /* Center the text inside. */
    padding: 40px 30px;                     /* Add padding inside the hero area. */
    border-radius: 18px;                    /* Round the corners of the hero section. */
    border: 3px solid var(--deep-walnut);   /* Add a dark border around the hero section. */
    box-shadow: 0 18px 36px rgba(74, 53, 37, 0.12); /* Add a soft shadow for depth. */
    margin-bottom: 30px;                    /* Add space below the hero section. */
}

.hero-section::before {
    content: '';
    /* This adds a decorative image behind the hero content. */
    position: absolute;
    right: -18%;
    top: 50%;
    width: 420px;
    height: 420px;
    transform: translateY(-50%) rotate(8deg);
    background: url('images/GoldAndGirlHoneyPic.jpg') center/contain no-repeat;
    opacity: 0.18;                           /* Make it very subtle. */
    filter: blur(0.7px);                     /* Slightly blur the decoration. */
    pointer-events: none;                    /* Prevent the decoration from catching mouse clicks. */
}

.hero-section > div {
    position: relative; /* Keep the hero text above the decorative background. */
    z-index: 1;         /* Ensure the text stays in front. */
}

.hero-section h2 {
    font-size: clamp(2.4rem, 4vw, 3.8rem); /* Make the hero headline scale with screen width. */
    margin-bottom: 18px;                  /* Add space below the headline. */
    text-transform: uppercase;            /* Make the headline all uppercase letters. */
    letter-spacing: 0.08em;               /* Slightly space out the letters. */
}

.hero-section p {
    max-width: 760px;     /* Limit the line length for easier reading. */
    margin: 0 auto 25px;  /* Center the paragraph and add space below it. */
    line-height: 1.85;    /* Make the text lines more readable. */
    letter-spacing: 0.01em;
}

.bee-flight-section,
.product-showcase {
    padding: 25px 0;      /* Add vertical space above and below these sections. */
    margin-bottom: 30px;  /* Add extra space below each section. */
}

.bee-flight-card,
.product-card {
    display: flex;        /* Use flex layout to position inner elements. */
    flex-wrap: wrap;      /* Allow content to wrap on narrow screens. */
    gap: 25px;            /* Add space between the card contents. */
    align-items: center;  /* Align content vertically within the card. */
    background-color: rgba(241, 251, 241, 0.95); /* Light card background. */
    border: 2px solid rgba(46, 90, 68, 0.18);    /* Soft border around the card. */
    border-radius: 24px;
    box-shadow: 0 18px 45px rgba(74, 53, 37, 0.08); /* Light shadow for depth. */
    padding: 25px;
    overflow: hidden;     /* Hide overflow from child elements. */
    position: relative;   /* Allow absolute-positioned decorations inside. */
    background-image: radial-gradient(circle at top left, rgba(255, 176, 0, 0.08), transparent 16%),
        radial-gradient(circle at bottom right, rgba(255, 212, 134, 0.08), transparent 22%);
    /* Very subtle gradient decoration in the card background. */
}

.bee-flight-card > * {
    position: relative;   /* Keep child items above any decorative background. */
    z-index: 1;           /* Ensure the text and video show in front. */
}

.product-card::before {
    content: '';
    position: absolute;
    right: -10px;
    bottom: -10px;
    width: 260px;
    height: 260px;
    background: url('images/GoldAndGirlHoneyPic.jpg') center/contain no-repeat;
    opacity: 0.12;
    transform: rotate(10deg);
    pointer-events: none;
    /* Decorative background image for product cards. */
}

.product-card > * {
    position: relative; /* Keep the card content above the decoration. */
    z-index: 1;
}

.product-grid {
    display: grid;                 /* Use a grid layout for the products. */
    grid-template-columns: repeat(3, minmax(240px, 1fr)); /* Three columns that shrink but never get smaller than 240px. */
    gap: 20px;                     /* Add space between product cards. */
    margin-top: 30px;              /* Add space above the product grid. */
}

.product-item {
    background-color: rgba(241, 251, 241, 0.98); /* Light background for the product card. */
    border: 2px solid rgba(46, 90, 68, 0.18);    /* Soft green border. */
    border-radius: 24px;                      /* Round the card corners. */
    padding: 22px;                            /* Add space inside the card. */
    box-shadow: 0 18px 30px rgba(74, 53, 37, 0.08); /* Soft drop shadow. */
    display: flex;                            /* Use flex so the card can stack content vertically. */
    flex-direction: column;                   /* Stack child elements top to bottom. */
    gap: 16px;                                /* Add space between child elements. */
}

.product-item-img {
    width: 100%;      /* Make the image fill the card width. */
    height: 180px;    /* Fix the image height so cards line up nicely. */
    object-fit: cover;/* Crop the image to fill the box without stretching. */
    border-radius: 18px; /* Round the image corners. */
}

.product-item h3 {
    margin: 0;        /* Remove default heading margin. */
    font-size: 1.4rem; /* Make the product title a little larger. */
}

.product-item ul {
    list-style: none; /* Remove default bullet styling from the list. */
    padding: 0;
    margin: 0;
    display: grid;    /* Use a grid so list items stack cleanly with gaps. */
    gap: 8px;         /* Add space between list items. */
}

.product-item li {
    position: relative; /* Allow a custom bullet to be positioned. */
    padding-left: 22px; /* Make room for the custom bullet. */
    line-height: 1.6;   /* Increase line spacing for readability. */
}

.product-item li::before {
    content: '•';         /* Add a custom bullet character before each item. */
    position: absolute;   /* Position it absolutely inside the list item. */
    left: 0;              /* Place it at the left edge. */
    color: var(--carrot-orange); /* Use the accent orange for the bullet. */
}

.product-note {
    margin-top: auto;      /* Push this note to the bottom of the card if space allows. */
    color: var(--deep-walnut);
    opacity: 0.8;          /* Make the note a little lighter than regular text. */
    font-size: 0.95rem;    /* Slightly smaller text for the note. */
}

.product-action {
    display: flex;         /* Arrange the price and button in a row. */
    align-items: center;   /* Align the price and button vertically. */
    justify-content: space-between; /* Put them at opposite ends of the row. */
    gap: 12px;             /* Add space between the price and button. */
    margin-top: 12px;      /* Add space above this action row. */
}

.price {
    font-weight: 700;      /* Make the price bold. */
    color: var(--deep-walnut); /* Use dark color for readability. */
    background: rgba(255, 176, 0, 0.08); /* Add a soft gold background. */
    padding: 8px 12px;     /* Give the price some padding. */
    border-radius: 12px;   /* Round the edges of the price badge. */
}

@media (max-width: 920px) {
    .product-grid {
        grid-template-columns: 1fr; /* On smaller screens, stack product cards vertically. */
    }
}

.bee-flight-text,
.product-copy {
    flex: 1; /* Allow text blocks to take up available space inside their containers. */
}

.bee-flight-text h2,
.product-copy h2 {
    margin-bottom: 15px; /* Add space below section headings. */
}

.bee-flight-text p,
.product-copy p {
    margin-bottom: 15px; /* Add space below paragraphs. */
    line-height: 1.7;    /* Make paragraph text easier to read. */
}

.product-card {
    flex-wrap: wrap; /* Allow product card content to wrap on narrow screens. */
}

.jar-img {
    width: min(100%, 400px); /* Limit jar image width to 400px but allow it to shrink. */
    border-radius: 24px;
    box-shadow: 0 15px 40px rgba(74, 53, 37, 0.14); /* Add a soft shadow to the jar image. */
}

.product-copy ul {
    list-style: none; /* Remove default bullet points from this list too. */
    padding: 0;
    margin: 0 0 18px;
    display: grid;
    gap: 10px;
}

.product-copy li {
    position: relative;
    padding-left: 24px; /* Add room for the custom bullet. */
    line-height: 1.7;
}

.product-copy li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--carrot-orange); /* Use the same orange bullet style. */
}

.btn {
    display: inline-block; /* Make the button behave like text but with block properties. */
    padding: 14px 28px;    /* Add space inside the button. */
    border-radius: 999px;  /* Make the button pill-shaped. */
    background-color: var(--amber-flame); /* Use the warm gold color for buttons. */
    color: var(--deep-walnut);            /* Dark text on the button. */
    text-decoration: none; /* Remove the underline from link buttons. */
    font-weight: 700;      /* Make button text bold. */
    letter-spacing: 0.08em;/* Add space between letters in button text. */
    text-transform: uppercase; /* Make button text uppercase. */
    box-shadow: 0 12px 20px rgba(255, 176, 0, 0.22); /* Soft glow around the button. */
    transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
    /* Smooth transition for hover effects. */
}

.btn:hover {
    transform: translateY(-2px); /* Slightly lift the button when hovered. */
    background-color: var(--carrot-orange); /* Darken the button on hover. */
}

.btn-light {
    background-color: var(--mint-cream); /* A lighter button style with a pale background. */
    color: var(--deep-walnut);           /* Dark text for contrast. */
}

main {
    display: flex;        /* Use flex layout to stack the main content sections. */
    flex-direction: column;/* Stack sections vertically. */
    gap: 20px;            /* Add space between main sections. */
}
.content-cta.contact.hero p {
    max-width: 100%;      /* Gives the text more room to breathe horizontally */
    margin: 10px auto;   /* Centers the text block inside the brown banner */
    line-height: 1.5;    /* Makes the paragraph readable */
}
.content-about,
.content-cta {
    padding: 30px;        /* Add padding inside these content sections. */
    border-radius: 18px;  /* Round the corners of the sections. */
}

.content-about {
    background-color: var(--mint-cream); /* Use a pale background for these text sections. */
    border: 3px solid var(--hunter-green); /* Add a green border around the section. */
    color: var(--deep-walnut);            /* Use dark text. */
    display: grid;                        /* Use grid layout to place text and images side by side. */
    grid-template-columns: minmax(0, 1fr) minmax(240px, 360px); /* Two columns: text and image. */
    gap: 25px;                            /* Add space between the columns. */
    align-items: center;                  /* Align content vertically in the center. */
}

.content-about .about-text {
    text-align: left; /* Keep the about text aligned to the left side. */
}

.content-about h2 {
    margin-bottom: 15px; /* Add space under each section heading. */
}

.content-about p {
    margin-bottom: 15px; /* Add space below paragraphs. */
    line-height: 1.8;    /* Make paragraphs easier to read. */
}

.product-img {
    width: 100%;        /* Make the section image fill its column width. */
    border-radius: 18px; /* Round the image corners. */
    box-shadow: 0 10px 30px rgba(74, 53, 37, 0.15); /* Add a soft shadow around the image. */
}

.content-cta {
    background-color: var(--deep-walnut); /* Use a dark background for the call-to-action section. */
    color: var(--mint-cream);             /* Use pale text on the dark background. */
    text-align: center;                   /* Center the content inside. */
}

.content-cta h2 {
    margin-bottom: 15px; /* Add space under the call-to-action heading. */
}

.content-cta p {
    margin-bottom: 20px; /* Add space below call-to-action paragraphs. */
    max-width: 820px;    /* Limit line length for readability. */
    margin-left: auto;   /* Center the paragraph block. */
    margin-right: auto;  /* Center the paragraph block. */
    line-height: 1.8;
}

.product-video {
    width: min(100%, 560px); /* Make the video responsive up to 560px wide. */
    border-radius: 24px;     /* Round the video corners. */
    box-shadow: 0 18px 40px rgba(74, 53, 37, 0.14); /* Add a soft shadow under the video. */
}



.main-footer {
    background-color: var(--hunter-green); /* Use the dark footer background color. */
    color: var(--mint-cream);             /* Make footer text light. */
    min-height: 60px;                     /* Give the footer a minimum height. */
    display: flex;                        /* Use flex layout to center content. */
    justify-content: center;              /* Center the footer text horizontally. */
    align-items: center;                  /* Center the footer text vertically. */
    padding: 15px;                        /* Add padding inside the footer. */
    border-radius: 18px;                  /* Round the footer corners too. */
    margin-top: 30px;                     /* Add space above the footer. */
}

.contact-page {
    display: flex;        /* Use flex layout to arrange contact form and info side by side. */
    flex-wrap: wrap;      /* Allow content to wrap on smaller screens. */
    gap: 50px;            /* Add space between the two main sections. */
    padding: 30px;        /* Add padding inside the contact page section. */
    background-color: var(--mint-cream); /* Use a light background for the contact page. */
    border-radius: 18px;  /* Round the corners of the contact page section. */
    border: 3px solid var(--hunter-green); /* Add a green border around the contact page section. */
}

.socials-section {
    background-color: rgba(245, 247, 242, 0.9);
    border-radius: 16px;
    padding: 30px;
    margin: 40px auto;
    max-width: 800px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
}

.socials-section h3 {
    margin-top: 0;
    margin-bottom: 25px;
    color: #4a3319;
    font-family: inherit;
    
}

.contact-socials {
    display: flex;        /* Use flex layout for social links. */
    gap: 30px;            /* Add space between social icons. */
    justify-content: center; /* Center the social links horizontally. */
    margin: 20px 0;     /* Add space above the social links. */
    gap: 40px;
    align-items: center;
    flex-wrap: wrap;
}

.social-link-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

.social-link-item img {
    width: 55px;
    height: 55px;
    object-fit: contain;
    transition: transform 0.2 ease;

}

.social-link-item span {
    font-size: 14px;
    font-weight: bold;
    color: #2b1d0c;
    font-family: sans-serif;
}

.social-link-item:hover img {
    transform: scale(1.1);
}

.social-link-item:hover span{
    text-decoration: underline;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-family: inherit;
    box-sizing: border-box;
    background-color: #fff;
}

.contact-form textarea{
    resize: vertical;
    min-height: 120px;
}



.contact-socials img {
    width: 45px;
    height: 45px;
    object-fit: contain;
    transition: transform 0.2 ease;
}

.contact-socials a:hover img {
    transform: scale(1.1);
}

.contact-hero{
    background-color: var(--deep-walnut);
        color: var(--mint-cream);
    text-align: center;
    padding: 30px;
    border-radius: 18px;
}

.contact-layout {
    display: grid;
    align-items: stretch;   
    grid-template-columns: minmax(250px, 320px) minmax(0, 1fr);
        gap: 20px;
}

.contact-card {
    background-color: rgba(241, 251, 241, 0.95); /* Light card background for contact info. */
    border: 2px solid rgba(46, 90, 68, 0.18);    /* Soft border around the card. */
    border-radius: 24px;                      /* Round the corners of the card. */
    box-shadow: 0 18px 45px rgba(74, 53, 37, 0.08); /* Light shadow for depth. */
    padding: 25px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.contact-details h3 {
    margin-bottom: 12px;        /* Remove default heading margin. */
    font-size: 1.4rem; /* Make the contact detail title a little larger. */
}

.contact-details p {
    margin-bottom: 16px;                  /* Remove default paragraph margin. */
}

.contact-details ul {
    list-style: none; /* Remove default bullet styling from the list. */
    padding: 0;
    margin: 0;
    display: grid;    /* Use a grid so list items stack cleanly with gaps. */
    gap: 10px;         /* Add space between list items. */
}

.contact-form {
    display: flex;        /* Use flex layout to arrange form fields vertically. */
    flex-direction: column; /* Stack form fields on top of each other. */
    gap: 16px;            /* Add space between form fields. */
}

.form-row{
    display: flex;        /* Use flex layout to arrange label and input side by side. */
    flex-direction: column; /* Stack label and input vertically on smaller screens. */
    gap: 8px;             /* Add space between label and input. */
}

.form-row label {
    font-weight: 700;     /* Make the label text bold. */
    color: var(--deep-walnut); /* Use dark color for labels. */
}

.form-row input,
.form-row textarea
.form-row select {
    padding: 12px 14px;        /* Add padding inside input fields. */
    border-radius: 12px;   /* Round the corners of input fields. */
    border: 1px solid rgba(46, 90, 68, 0.18); /* Soft border around input fields. */
    font-family: 'Arima', system-ui, sans-serif; /* Use the same font for inputs. */
    font-size: 1rem;      /* Set a readable font size for inputs. */
    background-color: #fffdf8; /* Light background for input fields. */
}

.form-row textarea {
    min-height: 120px;    /* Ensure the textarea is tall enough for multiple lines. */
    resize: vertical;     /* Allow users to resize the textarea vertically only. */
}

.form-message.success {
    color: var(--hunter-green); /* Use green color for success messages. */
    font-weight: 700;           /* Make the success message bold. */
}


@media (max-width: 920px) {
    .product-grid {
        grid-template-columns: 1fr; /* Stack products vertically on narrower screens. */
    }
    .bee-flight-card,
    .product-card {
        flex-direction: column; /* Stack card contents vertically on smaller screens. */
    }
    .contact-layout {
        grid-template-columns: 1fr; /* Stack contact form and info vertically on smaller screens. */
    }
}