.gallery {
    display: flex;
    justify-content: space-between;
    justify-items: center;
    margin-top: 20px;
    padding-bottom: 30px;
}

.gallery-item {
    flex: 1;
    margin: 0 10px;
}

.gallery-item img {
    width: 90%;
    height: auto;
}


/* hero:
p welcome to creatve
h2 Photographer, Videographer, and Graphic Designer
h1 charlize mcdaniel 
h3 quote
h4 quote name */

.hero {
    margin: 0 20px;
    width: 70%;
    align-content: center;
    align-items: center;
    margin-left:auto;
    margin-right:auto;
    padding-top: 30px;
    padding-bottom: 30px;
}

.hero p {
    font-size: 2em;
    text-align: center;
    align-content: center;
    font-family: "spectral", sans-serif;
    font-weight: 200;
    font-style: italic;     
}

.hero h3 {
    font-size: 1.75em;
    text-align: center;
    align-content: center;
    font-family: "basic-sans", sans-serif;
    font-weight: 200;
    font-style: normal;     
}

.hero h4 {
    font-size: 1em;
    text-align: center;
    align-content: center;
    font-family: "basic-sans", sans-serif;
    font-weight: 400;
    font-style: normal;     
}

/* about section */
.headshot {
    max-width: 500px;
    min-width: 500px;
    width: 100%;
    height: 50%;
    object-fit: cover;
}

.about-container {
    display: flex;
    flex-direction: row; /* Default: side by side */
    align-items: center;
    column-gap: 20px; /* Add space between image and text */
    padding-left: 50px;
    padding-top: 20px;
    align-content: center;
    justify-content: center; /* Center content */
}

.about-container h1 {
    font-size: 5em;
    font-weight: 300;
    font-family: "the-seasons", sans-serif;
    padding-left: 50px;
    margin-top: 30px;
    width: 70%;
}

.about-container h2 {
    font-size: 1.2em;
    font-weight: 75;
    font-family: "spectral", sans-serif;
    padding-left: 125px;
    width: 70%;
    color: #634332;
    line-height: 200%;
    margin-top: -20px;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .about-container {
        flex-direction: column; /* Stack vertically on smaller screens */
        padding-left: 0; /* Remove left padding */
        padding-top: 20px;
        column-gap: 0; /* Remove gap for mobile */
        align-items: center; /* Center both image and text */
        text-align: center; /* Center text for the entire container */
    }

    .headshot {
        max-width: 70%; /* Make image smaller on mobile */
        height: auto; /* Let the image resize with width */
        margin-bottom: 20px; /* Add space below the image */
    }

    .about-container h1 {
        font-size: 3.5em; /* Smaller heading on mobile */
        padding-left: 0; /* Remove left padding */
        width: 100%; /* Make heading full width */
        margin-top: 20px; /* Add margin on top */
        margin-bottom: 20px; /* Add margin on bottom */
    }

    .about-container h2 {
        font-size: 1em; /* Reduce text size for mobile */
        padding-left: 20px; /* Add padding to the left for better spacing */
        padding-right: 20px; /* Add padding to the right for better spacing */
        width: 100%; /* Ensure text doesn't overflow */
        line-height: 1.5; /* Reduce line height for readability */
        margin-top: 20px; /* Add margin on top */
        margin-bottom: 20px; /* Add margin on bottom */
        text-align: center; /* Center the text */
        box-sizing: border-box; /* Ensure padding is included in the width */
    }
}

/*resume container: 
h1 heading
h2 regular text
h3 bolded headings */
/* Resume container */
.resume-container {
    padding-left: 50px;
    padding-top: 25px;
    opacity: 90%;
    padding-right: 450px; /* This will be adjusted for mobile */
}

/* Heading 2 */
.resume-container h2 {
    font-size: 1.25em;
    font-family: "basic-sans", sans-serif;
    font-weight: 300;
    font-style: normal;
}

/* Heading 3 */
.resume-container h3 {
    font-size: 1.25em;
    font-family: "basic-sans", sans-serif;
    font-weight: 425;
    font-style: normal;
    letter-spacing: 1px;
}

/* Link styling */
.resume-container a {
    color: black;
    font-size: 1em;
    font-family: "basic-sans", sans-serif;
    font-style: normal;
    text-align: center; /* Center text inside the link */
    margin-top: 20px; /* Adjust spacing as needed */
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    /* Adjust the resume container's padding for smaller screens */
    .resume-container {
        padding-left: 20px; /* Reduce left padding for mobile */
        padding-top: 20px; /* Slightly reduced top padding */
        padding-right: 20px; /* Reduce right padding */
    }

    /* Adjust heading 2 font size for mobile */
    .resume-container h2 {
        font-size: 1em; /* Make the font smaller on mobile */
    }

    /* Adjust heading 3 font size for mobile */
    .resume-container h3 {
        font-size: 1.1em; /* Make the font slightly smaller */
    }

    /* Adjust link styling for mobile */
    .resume-container a {
        padding-top: 30px; /* Adjust top padding */
        padding-left: 0; /* Remove large left padding */
        text-align: center; /* Center-align the link */
        display: block; /* Make the link block-level for better alignment */
    }
}


/*connect container: 
h1 heading
h2 "FAQ""
p FAQ responses
h3 email
h4 FAQ questions */


.connect-container {
    padding-left: 50px;
    padding-top: 25px;
    opacity: 90%;
    padding-right: 450px;
}

.connect-container h1 {
    font-family: "the-seasons", sans-serif;
    font-size: 3.5em;
    font-weight: 300;
}

.connect-container h2 {
    font-family: "basic-sans", sans-serif;
    font-size: 2em;
    font-weight: 300;
}
.connect-container p {
    font-family: "basic-sans", sans-serif;
    font-size: 1.2em;
    font-weight: 300;
}


.connect-container h3 {
    font-family: "basic-sans", sans-serif;
    font-size: 1.3em;
    font-weight: 400;
    line-height: 175%;
}

.connect-container h4 {
    font-family: "basic-sans", sans-serif;
    font-size: 1.6em;
    font-weight: 300;
}

/*investment container: 
h1 heading
h2 package titles
h3 information & sessions
h4 caption */

/* Default (desktop) styles */
/* Default (desktop) styles */
.investment-container {
    padding-left: 50px;
    padding-top: 25px;
    opacity: 90%;
    padding-right: 50px;
}

.investment-container h1 {
    font-family: "the-seasons", sans-serif;
    font-size: 3em;
    font-weight: 300;
    padding-left: 0; /* Remove any padding to allow centering */
    text-align: center; /* Center the h1 */
}

.investment-container h2 {
    font-family: "the-seasons", sans-serif;
    font-size: 2.5em;
    font-weight: 300;
}

.investment-container h3 {
    font-family: "basic-sans", sans-serif;
    font-size: 1.5em;
    font-weight: 300;
}

.investment-container h4 {
    font-family: "basic-sans", sans-serif;
    font-size: 1.3em;
    font-weight: 300;
    padding-left: 0; /* Remove any padding to allow centering */
    text-align: center; /* Center the h4 */
}

/* Mobile styles */
@media (max-width: 768px) {
    /* Adjust padding */
    .investment-container {
        padding-left: 20px;
        padding-right: 20px;
    }

    /* Center H1 and adjust font size */
    .investment-container h1 {
        font-size: 2em;
        padding-left: 0;
        text-align: center; /* Center the heading */
    }

    /* Center H2 and adjust font size */
    .investment-container h2 {
        font-size: 2em;
        text-align: center; /* Center the heading */
    }

    /* Adjust font size and remove extra padding for H3 */
    .investment-container h3 {
        font-size: 1.2em;
        text-align: center; /* Center the heading */
    }

    /* Adjust font size and padding for H4 */
    .investment-container h4 {
        font-size: 1.1em;
        padding-left: 0;
        text-align: center; /* Center the heading */
    }
}


/*case studies container: 
h1 heading
h2 package titles
h3 information & sessions
h4 caption */

.casestudies-container {
    padding-left: 50px;
    padding-top: 25px;
    opacity: 90%;
    padding-right: 50px;
}


.casestudies-container h1{
    font-family: "the-seasons", sans-serif;
    font-size: 3em;
    font-weight: 300;
    padding-left: 450px;
}

.casestudies-container h2{
    font-family: "the-seasons", sans-serif;
    font-size: 2.5em;
    font-weight: 300;
}

.casestudies-container h3{
    font-family: "basic-sans", sans-serif;
    font-size: 1.5em;
    font-weight: 300;
}

.casestudies-container h4{
    font-family: "basic-sans", sans-serif;
    font-size: 1.3em;
    font-weight: 300;
    padding-left: 245px;
}