@media screen and (min-width: 1025px) {
    :root {
        --heading-font: "Lora";
        --body-font: "Roboto";
        --heading-font-weight: bolder;
        --heading-font-size: 2.2rem;
        --heading-text-transform: uppercase;
        --font-size: 1.5rem;
        --font-family: "Roboto", "Lora", Arial;
        --font-weight: 400;
        --line-height: 1.5;
        --margin-bottom: 2rem;
        --margin-top: 2rem;
    }

    header,
    main,
    section,
    footer {
        max-width: 2400px;
        margin: 1rem auto;
        padding: 2rem;

    }

    header {
        margin: 0 auto 1rem auto;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        justify-content: center;
        align-items: center;
        gap: 1rem;
    }

    .navigation {
        display: flex;
        flex-direction: row;
        background-color: transparent;
        position: static;
        border: none;
        transition: none;
        gap: 1.5rem;
        padding: 0;
        justify-content: center;
    }

    .navigation a {
        color: black;
        font-size: var(--font-size);
        font-weight: var(--heading-font-weight);
        font-family: var(--heading-font);
        white-space: nowrap;
        padding: 0.5rem 1rem;
    }

    .navigation a:visited {
        color: rgb(9, 9, 9);
    }

    .menu::before {
        display: none;
    }

    h1 {
        font-size: var(--heading-font-size);
        justify-self: center;
    }

    footer {
        font-family: var(--font-family);
        font-size: var(--heading-font-size);
        color: white;
        font-weight: var(--heading-font-weight);
    }

    /* homepage structuting and styling begins here */


    .home {
        font-size: 3rem;
        font-weight: var(--heading-font-weight);
        font-family: var(--heading-font);
        padding: 1rem;
        margin-bottom: var(--margin-bottom);
        left: 50%;
        transform: translateX(-50%);
        top: 400px;
    }

    .warm {
        top: 600px;
        font-family: var(--heading-font);
        overflow-wrap: normal;
        font-size: var(--heading-font-size);
        font-weight: var(--heading-font-weight);
        left: 50%;
        transform: translateX(-50%);
        padding: 1rem 2rem;
    }

    .butt {
        top: 950px;
        text-decoration: none;
        padding: 1rem 2rem;
        color: #FFFFFF;
        font-family: var(--body-font);
        font-size: var(--heading-font-size);
        font-weight: var(--heading-font-weight);
        left: 50%;
        transform: translateX(-50%);
    }

    .give {
        position: absolute;
        top: 1050px;
        margin-top: 1rem;
        background-color: hsla(240, 100%, 25%, 0.863);
        text-decoration: none;
        padding: 0.5rem 2.2rem;
        color: #FFFFFF;
        font-family: var(--body-font);
        font-size: var(--heading-font-size);
        font-weight: var(--heading-font-weight);
        left: 50%;
        transform: translateX(-50%);
    }


    .hero {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
        justify-content: center;
        align-items: start;
        grid-template-rows: auto auto;
        /*Ensures grid fills the section */
        width: 100%;

    }

    .hero h3 {
        font-size: var(--heading-font-size);
        text-align: center;
        grid-column: 1 / -1;
    }

    .hero p,
    #history p,
    #vision p {
        font-family: var(--body-font);
        font-size: var(--font-size);
        text-align: center;
        margin: 0;
        overflow-wrap: break-word;
        hyphens: auto;
    }

    .hero p {
        grid-column: 1/2;
    }

    .hero picture img {
        max-width: 100%;
        margin: 0 auto;
        display: block;
        justify-content: center;
        align-items: center;
        grid-column: 2 / 3;
    }

    #history,
    #vision {
        display: grid;
        grid-template-columns: 1fr;
        justify-content: center;
    }

    #vision p,
    #history p {
        align-self: center;
        justify-content: center;
        grid-column: 1 / 2;
    }

    /* styling the about page */

    .bus {
        position: absolute;
        top: 550px;
        left: 50%;
        transform: translate(-50%);
        width: 96%;
        border-radius: 10px;
        gap: 2rem;
    }

    .first,
    .second {
        text-align: center;
        padding: 2rem;
        font-size: var(--font-size);
    }



    .bold {
        font-weight: var(--heading-font-weight);
    }

    /* styling the donation page */

    #support {
        font-size: var(--heading-font-size);
        font-family: var(--heading-font);
        font-weight: var(--heading-font-weight);
        padding: 1.5rem;
        border-radius: 8px;
    }

    #support-note {
        font-size: var(--font-size);
        font-family: var(--body-font);
        font-weight: var(--font-weight);
        padding: 1.5rem;
        border-radius: 8px;
    }

    #donation-form {

        margin: 5rem 0;
        border-radius: 8px;
        padding: 1.5rem 2%;

    }

    #donation-form legend {
        font-family: var(--heading-font);
        font-weight: var(--heading-font-weight);
        font-size: var(--heading-font-size);
        color: hsl(240, 14%, 99%);
        padding: 1rem 2rem;
        background-color: hsla(240, 100%, 25%, 0.863);
    }

    #donation-form label {
        font-family: var(--body-font);
        font-size: var(--heading-font-size);
        display: block;
        padding-top: 1rem;
        font-weight: var(--font-weight);
    }

    #donation-form div {
        padding-top: 1rem;
        color: blue;
        font-size: var(--font-size);
    }

    #donation-form input[type="text"],
    #donation-form textarea,
    #donation-form input[type="number"] {
        display: block;
        border: solid #999;
        border-radius: 8px;
        padding: 2.5rem;
        color: hsl(0, 0%, 2%);
        width: 100%;
        max-width: 2400px;
        appearance: none;
        font-size: 2rem;
    }

    #donation-form input[type="radio"] {
        width: 30px;
        height: 30px;
    }

    [role="group"] input[type="radio"]:focus+span,
    [role="group"] label:focus-within {
        outline: 2px solid #007bff;
        border-radius: 4px;
    }

    #donation-form input[type="submit"] {

        font-size: 2rem;
        border-radius: 15px;
        padding: 2.5rem;
        max-width: 2400px;
        margin: 1rem 2% 2rem 2%;
        box-shadow: 1px 1px 4px gray;
        cursor: pointer;

    }

    #donation-form input:required {
        border-bottom: solid 8px #cf200e;
    }

    #donation-form input:required:valid {
        border-bottom: solid 8px green;
    }

    /* designing the media and gallery page - Enhanced for large screens */
    .content-grid {
        display: grid;
        /* Auto 1-4+ cols: 1 on ~600px, fills wide screens without emptiness */
        grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
        gap: 2rem;
        justify-items: center;
        margin: 2rem auto;
        max-width: 2400px;
        padding: 1rem;
    }

    .media-post {
        margin: 0;
        border: 1px solid rgb(243, 7, 7);
        border-radius: 6px;
        padding: 2.5rem;
        /* Fills grid cell fully */
        width: 100%;
        /* Subtle pop for visibility */
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        /* Centers title/desc/media */
        text-align: center;
    }

    .media-post h3,
    .media-post p {
        text-align: center;
        font-family: var(--body-font);
        font-size: var(--heading-font-size);
        font-weight: var(--font-weight);
        line-height: var(--line-height);
        margin-bottom: 1rem;
    }

    .media-post audio,
    .media-post video {
        /* Scales naturally with content */
        height: auto;
        /* Ensures controls have vertical space (play bar visible) */
        min-height: 80px;
        /* Still caps to post width if huge */
        width: 100%;
        max-width: 100%;
        display: block;
        /* Centers with breathing room */
        margin: 1rem auto;
        border-radius: 8px;
        /* Clean look—no browser outline glitches */
        outline: none;
        border: 2px solid #F09A3E;
        box-shadow: 0 4px 12px rgba(240, 154, 62, 0.3);
        background-color: rgba(240, 154, 62, 0.05);

    }

    .media-post audio::-webkit-media-controls-panel {

        /* Extra padding inside controls (WebKit browsers) */
        padding: 1rem;

    }

    .gallery-item {
        width: 100%;
        /* Full grid cell */
        text-align: center;
        /* Centers figure/delete/figcaption */
        background: #f9f9f9;
        /* Light bg for subtle card feel */
        border-radius: 8px;
        padding: 1rem;
    }

    .gallery-item figure {
        margin: 0;
    }

    .gallery-item img {
        max-width: 100%;
        height: auto;
        min-height: 200px;
        /* Prevents squished small thumbs */
        object-fit: cover;
        /* Clean aspect ratio */
        border-radius: 4px;
        display: block;
        margin: 0 auto 0.5rem;
        /* Tight space below image */
    }

    .gallery-item figcaption {
        font-size: var(--font-size);
        font-style: italic;
        color: #666;
        margin-top: 0.5rem;
    }

    /* Bump search/add for easier interaction on large screens */
    #search-input,
    #search-media-input {
        max-width: 500px;
        /* Wider for big screens */
        font-size: 1.5rem;
        /* Matches bumped var if you added it */
        padding: 1.25rem;
        border-radius: 4px;
        border: 1px solid #ccc;
    }

    #search-btn,
    #add-gallery-btn,
    #add-media-btn {
        font-size: 1.5rem;
        padding: 1.25rem 2.5rem;
        /* Larger hit areas */
        margin: 1rem auto;
        background-color: #F09A3E;
        /* Ties to your theme */
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        transition: background-color 0.3s ease, transform 0.3s ease;
    }

    #search-btn:hover,
    #add-gallery-btn:hover,
    #add-media-btn:hover {
        background-color: hsla(240, 100%, 25%, 0.863);
        /* Your dark blue */
        transform: scale(1.05);
    }

    .delete-btn {
        position: absolute;
        /* For overlay on images/media */
        top: 0.5rem;
        right: 0.5rem;
        width: 30px;
        height: 30px;
        font-size: 16px;
        background-color: #cf200e;
        /* Red for delete */
        color: white;
        border: none;
        border-radius: 50%;
        cursor: pointer;
    }

    .delete-btn:hover {
        background-color: #a00;
        transform: scale(1.1);
    }

    /* styling the contact page for big screens */

    #contact-form {
        margin: 5rem 0;
        border-radius: 8px;
        padding: 1.5rem 2%;
    }

    #contact-form legend {
        font-family: var(--heading-font);
        font-weight: var(--heading-font-weight);
        font-size: var(--heading-font-size);
        color: hsl(240, 14%, 99%);
        padding: 1rem 2rem;
        background-color: hsla(240, 100%, 25%, 0.863);
    }

    #contact-form label {
        font-family: var(--body-font);
        font-size: var(--heading-font-size);
        display: block;
        padding-top: 1rem;
        font-weight: var(--font-weight);
    }

    #contact-form input[type="text"],
    #contact-form textarea,
    #contact-form input[type="email"] {
        display: block;
        border: solid #999;
        border-radius: 8px;
        padding: 2.5rem;
        color: hsl(0, 0%, 2%);
        width: 100%;
        max-width: 2400px;
        appearance: none;
        font-size: 2rem;
    }

    #contact-form input[type="submit"] {
        color: white;
        font-size: var(--heading-font-size);
        font-weight: var(--heading-font-weight);
        border-radius: 15px;
        padding: 2.5rem;
        max-width: 2400px;
        margin: 1rem 2% 2rem 2%;
        box-shadow: 1px 1px 4px gray;
        cursor: pointer;
        background-image: linear-gradient(hsl(251, 70%, 27%), hsl(243, 64%, 11%));
    }

}