/* Default styles for inner-title */
section.page .inner-title {
    font-size: 2.75rem;
    font-weight: 700;
    margin: 30px 0; /* Top and bottom margin */
}

/* Default styles for page section */
section.page {
    margin-top: 10px; /* Top margin */
}
section.page .our-story,
section.page .contact {
    background-color: #ebebe9;
    padding: 30px;
}

#submitButton {
    display: block;
    margin: 0 auto; /* Center horizontally */
}

/* Ensure the container of the submit button uses flexbox */
section.page .form .form-group:nth-last-child(2) {
    display: flex;
    justify-content: center;
    width: 100%;
}

/* Medium to large screens */

@media (min-width: 901px) and (max-width: 1199px) {

    section.page .our-story {
        width: 100%;
        margin-bottom: 10px;
    }
    section.page .row {
        display: flex; /* Flex display */
        flex-direction: column; /* Stack vertically */
        align-items: center; /* Align items */
    }

    /* Adjust inner-title for larger screens */
    section.page .inner-title {
        max-width: 65%; /* Limit width of inner-title */
        margin: 0 0 80px 0; /* Adjust margins (top, right, bottom, left) */
    }

    /* Styling for contact section */
    section.page .contact {
        padding-right: 5%; /* Right padding */
    }
    section.page .page-img {
        width: 52%; /* Full width */
        height: auto; /* Maintain aspect ratio */
        display: block; /* Block display */
    }
    section.page .form {
        margin-top:430px !important; /* Add top margin to create space */
        width: 67% !important;
        text-align: left; /* Align text to the left */
    }


    /* Ensure form groups are properly aligned */
    section.page .form .form-group {
        width: 100%; /* Full width */
        text-align: left; /* Align text to the left */
    }

    /* Ensure form inputs and textareas are aligned to the left */
    section.page .form input,
    section.page .form textarea {
        display: block; /* Ensure block display */
        width: 100%; /* Full width */
        margin: 0; /* Remove auto margins */
        text-align: left; /* Align text to the left */
    }
}



/* Styles for h4 in our-story section */
section.page .our-story h4 {
    text-transform: uppercase; /* Uppercase text */
    font-size: 1.1rem; /* Font size */
    color: #454847; /* Text color */
}

/* Styles for h3 in our-story section */
section.page .our-story h3 {
    font-size: 2.25rem; /* Font size */
    font-weight: 700; /* Font weight */
    color: color-mix(in srgb, var(--default-color), transparent 20%); /* Text color */
}

/* Styles for p in our-story section */
section.page .our-story p {
    font-size: 1rem; /* Font size */
}

/* Adjust last-child p in our-story section */
section.page .our-story p:last-child {
    margin-bottom: 0; /* Remove bottom margin for last paragraph */
}

/* Styles for anchor tags */
section.page a {
    color: darkorange; /* Anchor text color */
}

/* Styles for ul in page section */
section.page ul {
    list-style: circle; /* List style */
    padding: 0; /* Reset padding */
    font-size: 15px; /* Font size */
}

/* Styles for li in ul */
section.page ul li {
    padding: 5px 0; /* Padding (top and bottom) */
    display: flex; /* Flex display */
    align-items: center; /* Align items */
}

/* Styles for i in ul */
section.page ul i {
    font-size: 1.25rem; /* Font size */
    margin-right: 0.5rem; /* Right margin */
    line-height: 1.2; /* Line height */
    color: var(--accent-color); /* Text color */
}



@media (min-width: 480px) and (max-width: 900px) {

    section.page .page-img {
        width: 95% !important;
        outline: 2px solid darkorange;
    }
    section.page .page-img {
        width: 100%; /* Full width */
        height: auto; /* Maintain aspect ratio */
        display: block; /* Block display */
    }
    section.page .page-img img{
        width: 100%; /* Full width */
        height: auto; /* Maintain aspect ratio */
        margin-bottom:100px;
    }
    section.page .form {
        margin-top: 300px !important; /* Add top margin to create space */
        width: 100% !important;
    }
    #submitButton {
        width: 80%; /* Set a width that fits well on small screens */
        height: 60px;
        font-size: 1rem; /* Adjust font size if needed */
        padding: 10px; /* Ensure padding doesn't make the button too large */
    }
}