.page-wrangler {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

body {
    margin: 0;
    padding: 0;
}

ul {
    margin: 0;
}

h1 {
    font-family: "Libre Baskerville", Georgia, 'Times New Roman', Times, serif;
    font-size: 32px;
    line-height: 170%;
    font-weight: normal;
    margin-block-start: 0;
    margin-block-end: 0;
    text-align: center;
}

h2 {
    font-family: "Libre Baskerville", Georgia, 'Times New Roman', Times, serif;
    font-size: 24px;
    font-weight: normal;
    line-height: 150%;
    margin-block-start: 0;
    margin-block-end: 0;
    text-align: center;
}

p {
    font-family: "Nunito", Arial, Helvetica, sans-serif; 
    font-size: 16px;
    font-weight: 500;
    line-height: 150%;
    letter-spacing: 1%;
    margin-block-start: 0;
    margin-block-end: 0;
}

.button-primary {
    background-color: #D2A517;
    color: #34302D;
    padding-top: 1rem;
    padding-bottom: 1rem;
    padding-left: 2rem;
    padding-right: 2rem;
    font-family: "Nunito", Arial, Helvetica, sans-serif;
    font-size: 24px;
    letter-spacing: 6%;
    font-weight: 600;
    margin-top: 0.5rem;
    text-decoration: none;
    border-top: 3px;
    border-top-color: #EBC54C;
    border-top-style: solid;
    border-bottom: 2px;
    border-bottom-color: #A58212;
    border-bottom-style: solid;
    display: inline-block;
}

.subtext-large {
    font-size: 18px;
}

.text-footer-title {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 4%;
    padding-bottom: 0.5rem;
}

.text-footer {
    font-family: "Nunito", Arial, Helvetica, sans-serif;
    color: #FFFAF5;
    font-size: 16px;
    letter-spacing: 2%;
    text-decoration: none;
    line-height: 170%;
}

.footer-links {
    color: #FFFAF5;
    text-decoration: none;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 4%;
}

.text-faq {
    font-weight: 700;
    font-size: 20px;
}

.text-medium {
    font-size: 18px;
}

.text-contact-item {
    font-size: 20px;
    font-weight: 700;
}

.text-contact-link {
    font-family: "Nunito", Arial, Helvetica, sans-serif;
    color: #301A63;
    font-size: 18px;
    text-decoration: none;
    line-height: 170%;
}

.text-home-contact {
    font-family: "Nunito", Arial, Helvetica, sans-serif;
    color: #301A63;
    font-size: 16px;
    text-decoration: none;
    line-height: 170%;
}

.text-overline {
    font-size: 32px;
}

.container-nav-bar,
.container-footer,
.container-home-hero,
.container-home-intro,
.container-home-about,
.container-home-services,
.container-home-practice {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.container-about-hero,
.container-about-education,
.container-about-working,
.container-about-practice {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.container-faq {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.container-contact {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.container-404 {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

header {
    background-color: #FBF4E9;
}

.container-nav-bar {
    padding-bottom: 2.25rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.container-mobile-menu {
    padding-top: 1.5rem;
    padding-bottom: 1rem;
    display: flex;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    justify-content: end;
}

.container-nav-links {
    display: none;
    flex-direction: column;
    gap: 2rem;
    align-items: center;
    list-style-type: none;
    padding: 0;
    padding-top: 2rem;
    align-items: center;
    justify-content: baseline;
    font-family: "Nunito", Arial, Helvetica, sans-serif;
    
}

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

.gradient-line {
    height: 3px;
    width: 100%;
    background-image: linear-gradient(to right, #a67d00, #ffda73, #a67d00);
}

.links-nav-bar {
    text-decoration: none;
    color: #58514B;
    font-family: "Nunito", Arial, Helvetica, sans-serif;
    font-size: 20px;
    font-weight: 500;
}

footer {
    background-color: #58514B;
}

.container-footer {
    padding-top: 0rem;
    padding-bottom: 2.5rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 2.5rem;
}

.container-footer-main {
    color:#FFFAF5;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.container-footer-text {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    row-gap: 4rem;
    column-gap: 4rem;
    text-align: center;
}

.container-footer-links {
    list-style-type: none;
    font-family: "Nunito", Arial, Helvetica, sans-serif;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    display: none;
}

.container-footer-address {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    grid-column: 1;
    grid-row: 2;
    
}

.container-footer-contact {
    display: flex;
    flex-direction: column;
    grid-column: 1;
    grid-row: 3;
}

.gradient-line-footer {
    height: 3px;
    width: 100%;
    background-image: linear-gradient(to right, #a67d00, #ffda73, #a67d00);
}

.line-faq {
    height: 2px;
    width: 100%;
    background-color: #506096;
}

.logo-nav {
    width: 100%;
    height: auto;
    padding-bottom: 1.5rem;
}

.logo-footer {
    width: 464px;
    height: auto;
    grid-column: 1 / 3;
    grid-row: 1;
    display: none;
}

.section-home-hero {
    background-color: #FFFAF5;
}

.container-home-hero {
    color: #1A3263;
    padding-top: 3rem;
    padding-bottom: 3rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 3rem;
    align-items: center;
    text-align: center;
}

.container-home-hero-text {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.section-home-intro {
    background-color: #D1DEFF;
}

.container-home-intro {
    color: #301A63;
    padding-top: 4rem;
    padding-bottom: 4rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    text-align: center;
}

.section-home-services {
    background-color: #506096;
}

.container-home-services {
    color: #E9EFFF;
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}

.container-home-services-text {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.container-home-services-list {
    display: flex;
    gap: 2rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.home-services-list {
    font-family: "Nunito", Arial, Helvetica, sans-serif;
    font-size: 16px;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    line-height: 170%;
    padding-inline-start: 1.5rem;
    column-count: 2;
}

.section-home-about {
    background-color: #FFFAF5;
}

.container-home-about {
    color: #1A3263;
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    text-align: center;
}

.container-home-about-text {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.section-home-practice {
    background-color: #D1DEFF;
}

.container-home-practice {
    color: #301A63;
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    align-items: center;
}

.container-home-practice-text {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    align-items: center;
    text-align: center;
}

.container-home-practice-contact {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.container-contact-icon {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.section-about-hero {
    background-color: #FFFAF5;
}

.container-about-hero {
    color: #1A3263;
    padding-top: 2rem;
    padding-bottom: 2rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    text-align: center;
}

.section-about-education {
    background-color: #D1DEFF;
}

.container-about-education {
    color: #301A63;
    padding-top: 2rem;
    padding-bottom: 2rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    align-items: center;
}

.container-about-education-text {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    align-items: center;
}

.section-about-working {
    background-color: #506096;
}

.container-about-working {
    color: #E9EFFF;
    padding-top: 3rem;
    padding-bottom: 2rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    align-items: center;
}

.section-about-practice {
    background-color: #FFFAF5;
}

.container-about-practice {
    color: #1A3263;
    padding-top: 3rem;
    padding-bottom: 2rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    align-items: center;
}

.container-about-practice-text {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.section-faq {
    background-color: #FFFAF5;
}

.container-faq {
    color: #1A3263;
    padding-top: 4rem;
    padding-bottom: 4rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 4rem;
    align-items: center;
}

.container-faq-questions-answers {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.container-faq-item {
    padding-top: 2rem;
    padding-bottom: 1.5rem;
    padding-left: 2rem;
    padding-right: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background-color: white;
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.25);

}

.section-contact {
    background-color: #FFFAF5;
}

.container-contact {
    color: #1A3263;
    padding-top: 3rem;
    padding-bottom: 5rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.container-contact-heading {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    text-align: center;
}

.container-contact-main {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.container-contact-info {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.container-contact-item {
    background-color: white;
    padding-top: 2rem;
    padding-bottom: 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    align-items: center;
    text-align: center;
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.25);
}

.section-404 {
    background-color: #FFFAF5;
}

.container-404 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 2rem;
    padding-bottom: 2rem;
    height: 50vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    color: #301A63;
}

.image-home-painting {
    width: 354px;
    height: 375px;
    object-fit: cover;
    box-shadow: 6px 6px 6px rgba(0, 0, 0, 0.25);
}

.image-home-city {
    width: 354px;
    height: 480px;
    object-fit: cover;
    box-shadow: 6px 6px 6px rgba(0, 0, 0, 0.25);
}

.image-home-headshot {
    width: 354px;
    height: 420px;
    object-fit: cover;
    object-position: 40% 80%;
    box-shadow: 6px 6px 6px rgba(0, 0, 0, 0.25);
}

.image-about-headshot {
    width: 354px;
    height: 420px;
    object-fit: cover;
    object-position: 40% 80%;
    box-shadow: 6px 6px 6px rgba(0, 0, 0, 0.25);
}

.image-home-office {
    width: 354px;
    height: 322px;
    object-fit: cover;
    box-shadow: 6px 6px 6px rgba(0, 0, 0, 0.25);
}

.image-home-contact-icons {
    width: 1.5rem;
    height: 1.5rem;
}

.image-about-practice {
    width: 354px;
    height: 322px;
    object-fit: cover;
    box-shadow: 6px 6px 6px rgba(0, 0, 0, 0.25);
}

.image-contact {
    width: 400px;
    height: 480px;
    object-fit: cover;
    box-shadow: 6px 6px 6px rgba(0, 0, 0, 0.25);
    display: none;
}

.image-contact-icon {
    width: 2.5rem;
    height: 2.5rem;
}

/* =============================
   TABLET BREAKPOINT (768px+)
   ============================= */
@media (min-width: 768px) {

    h1 {
        text-align: left;
    }

    h2 {
        font-size: 30px;
        text-align: left;
    }

    .button-primary {
        padding-left: 2rem;
        padding-right: 2rem;
        font-size: 20px;
    }

    /* NAVIGATION */
    .container-mobile-menu {
        display: none;
    }

    .container-nav-bar {
        padding-top: 2.5rem;
    }

    .container-nav-links {
        display: flex;
        flex-direction: row;
        padding-top: 1.5rem;
    }
    

    .logo-nav {
        width: 80%;
    }

    .gradient-line {
        width: 80%;
    }

    /* HERO */
    .container-home-hero {
        max-width: 1000px;
        flex-direction: row;
        text-align: left;
        align-items: center;
        justify-content: space-around;
        padding-left: 2rem;
        padding-right: 2rem;
    }

    .container-home-hero-text {
        align-items: flex-start;
    }

    .image-home-painting {
        width: 35%;
        height: 400px;
    }

    .container-home-intro {
        max-width: 850px;
        padding-bottom: 3rem;
        padding-left: 4rem;
        padding-right: 4rem;
    }

    /* SERVICES LIST */
    .container-home-services {
        padding-left: 2rem;
        padding-right: 2rem;
        flex-direction: row;
    }

    .image-home-city {
        width: 45%;
        height: 700px;
    }

    /* ABOUT + PRACTICE TEXT ALIGNMENT */
    .container-home-about {
        flex-direction: row;
    }
    
    .container-home-about-text,
    .container-home-practice-text {
        align-items: flex-start;
        text-align: left;
    }

    .image-home-headshot {
        width: 350px;
        height: 750px;
        object-position: 40% 10%;
    }

    .image-about-headshot {
        width: 500px;
        height: 500px;
        object-position: 40% 10%;
    }

    .container-home-practice {
        flex-direction: row;
    }

    .image-home-office {
        width: 45%;
        height: 650px;
    }

    /* FOOTER LINKS SHOW */
    .container-footer-links {
        display: flex;
        padding-top: 0;
        padding-bottom: 0;
    }

    .logo-footer {
        display: block;
    }


    .container-footer {
        padding-top: 5rem;
        padding-bottom: 2.5rem;
        padding-left: 2rem;
        padding-right: 2rem;
    }

    .container-footer-main {
        flex-direction: row;
    }

    .container-footer-text {
        text-align: left;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
    }

    .container-footer-contact {
        grid-column: 2;
        grid-row: 2;
    }
    
    .container-about-education,
    .container-about-practice {
        padding-left: 2rem;
        padding-right: 2rem;
        padding-top: 3rem;
        padding-bottom: 3rem;
    }

    .container-about-hero {
        padding-left: 5rem;
        padding-right: 5rem;
        padding-top: 3rem;
        max-width: 900px;
    }

    .container-about-working {
        padding-left: 3.5rem;
        padding-right: 3.5rem;
        padding-top: 5rem;
        padding-bottom: 5rem;
    }

    .container-about-education {
        gap: 3rem;
    }

    .container-about-practice {
        flex-direction: row;
    }

    .image-about-practice {
        width: 45%;
        height: 800px;
    }

    .container-faq {
        padding-left: 2rem;
        padding-right: 2rem;
        max-width: 900px;
    }

    .container-contact {
        padding-left: 2rem;
        padding-right: 2rem;
        padding-top: 3rem;
    }

    .container-contact-main {
        flex-direction: row;
        padding-top: 1rem;
        gap: 2rem;
    }

    .container-contact-heading {
        text-align: left;
        width: 80%;
    }

    .image-contact {
        display: block;
        width: 100%;
        height: 650px;
        overflow: hidden;
    }

    .container-contact-item {
        background-color: transparent;
        box-shadow: none;
        align-items: flex-start;
        text-align: left;
        padding-top: 0;
        padding-bottom: 0;
        gap: 0.25rem;
        
    }

    .container-404 {
        padding-left: 5rem;
        padding-right: 5rem;
        padding-top: 3rem;
        height: 50vh;
        justify-content: flex-start;
    }

}

/*  =========================
    LARGE BREAKPOINT (992px+)
    ========================= */
@media (min-width: 992px) {
    .container-home-hero,
    .container-home-services,
    .container-home-about,
    .container-home-practice {
        padding-left: 6.5rem;
        padding-right: 6.5rem;
    }

    .container-home-intro {
        padding-left: 9.5rem;
        padding-right: 9.5rem;
    }

    .container-footer {
        padding-top: 5rem;
        padding-bottom: 3rem;
        padding-left: 6.5rem;
        padding-right: 6.5rem;
    }

    .logo-nav {
        width: 675px;
    }

    .container-about-education,
    .container-about-practice {
        padding-left: 6.5rem;
        padding-right: 6.5rem;
        padding-top: 3rem;
        padding-bottom: 3rem;
    }

    .container-about-hero {
        padding-left: 9.5rem;
        padding-right: 9.5rem;
        padding-top: 3rem;
    }

    .container-about-education {
        flex-direction: row;
    }

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

    .image-about-headshot {
        height: 900px;
        width: 50%;
    }

    .container-about-working {
        padding-left: 7.5rem;
        padding-right: 7.5rem;
    }

    .container-faq {
        padding-left: 6.5rem;
        padding-right: 6.5rem;
    }

    .container-contact {
        padding-left: 6.5rem;
        padding-right: 6.5rem;
        padding-top: 4rem;
    }

    .container-contact-main {
        gap: 3rem;
    }
}



/* =============================
   DESKTOP BREAKPOINT (1024px+)
   ============================= */
@media (min-width: 1200px) {

    /* NAV BAR */
    .container-nav-bar {
        padding-left: 9.25rem;
        padding-right: 9.25rem;
    }

    .gradient-line {
        width: 60%;
    }

    /* HERO */
    .container-home-hero {
        flex-direction: row;
        align-items: center;
        gap: 6.5rem;
        padding-left: 9.5rem;
        padding-right: 9.5rem;
    }

    .image-home-painting {
        width: 40%;
    }

    /* INTRO */
    .container-home-intro {
        width: 60%;
    }

    /* SERVICES */
    .container-home-services {
        flex-direction: row;
        align-items: center;
        gap: 3.5rem;
        padding-left: 9.5rem;
        padding-right: 9.5rem;
    }

    .image-home-city {
        width: 45%;
    }

    /* ABOUT */
    .container-home-about {
        flex-direction: row;
        align-items: center;
        gap: 3.5rem;
        padding-left: 9.5rem;
        padding-right: 9.5rem;
        text-align: left;
    }

    .image-home-headshot {
        width: 45%;
    }

    .image-about-headshot {
        width: 45%;
    }
    

    /* PRACTICE */
    .container-home-practice {
        flex-direction: row;
        gap: 3.5rem;
        padding-left: 9.5rem;
        padding-right: 9.5rem;
    }

    .image-home-office {
        width: 50%;
    }

    .container-about-hero,
    .container-about-education,
    .container-about-working,
    .container-about-practice {
        padding-left: 9.5rem;
        padding-right: 9.5rem;
    }

    .container-faq {
        padding-left: 14rem;
        padding-right: 14rem;
    }

    .container-contact {
        padding-left: 9.5rem;
        padding-right: 9.5rem;
    }

    /* FOOTER */
    .container-footer {
        padding-top: 5.625rem;
        padding-left: 9.5rem;
        padding-right: 9.5rem;
    }

    .container-footer-main {
        flex-direction: row;
    }

    .container-footer-text {
        grid-template-columns: 1fr 1fr;
        text-align: left;
    }
}