.primaryBtn, .primaryBtn:visited {
    background-color: #D1A354;
    color: #424242;
    border: none;
    padding: 10px 25px 10px 25px;
    text-decoration: none;
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-style: normal;
    margin: 0;
    font-size: 1.2rem;
    text-align: center;
}
.primaryBtn:hover {
    background-color: #165B13;
    color: #fff;
    border: none;
    transition: background-color 0.2s ease,color 0.2s ease;
}

.secondaryBtn {
    background-color: #D1A354;
    color: #424242;
    border: #165B13 3px solid;
    border-radius: 20px;
    padding: 10px 25px;
    text-decoration: none;
    text-align: center;
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-style: normal;
    transition: background-color 0.2s ease,color 0.2s ease;
}

.secondaryBtn:hover {
    background-color: #165B13;
    color: #fff;
}

p {
    font-family: "Baskervville", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-size: 1.5rem;
    margin: 0;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-style: normal;
    margin: 0
}

.logoImg {
    width: 200px;
    height: 100px;
}

.heroContainer {
    min-height: 100vh;
    max-width: 100vw;
    background-size: cover;
    background-position: left bottom;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: #fff;
}
.sliderNav {
    display: flex;
    flex-direction: row;
    justify-content: start;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}
.sliderArrows {
    width: 35px;
    height: 35px;
    fill: #D1A354;
}
#backSlideBtn {
    padding: 0;
    margin: 0;
}
#forwardSlideBtn {
    padding: 0;
    margin: 0;
}
.heroWrapper {
    width: 70%;
    margin-left: auto;
    margin-right: auto;
}
.navBar {
    display: flex;
    align-items: center;
    flex-direction: row;
    margin: 3% 0 0;
    justify-content: space-around;
}

.navLinks {
    height: 3rem;
    display: flex;
    align-items: stretch;

}
.navLinks ul {
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: #D1A354;
    display: flex;
    align-items: center;

}
.navLinks li, a {
    list-style: none;
    display: inline;
    text-decoration: none;
    padding: 0 10px;
    font-family: "Poppins", sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 1.2rem;
    color: #424242;
}
.navItems a:hover {
    color: #165B13;
}

.navSocials {
    background-color: #165B13;
    display: flex;
    align-items: center;
    gap: 20px;
    border-radius: 0 10px 10px 0;
    padding: 0 20px;
}
.navSocials a {
    padding: 0;
    line-height: 0;
}
.socialIcons {
    fill: #fff;
    width: 30px;
    height: 30px;
}
.socialIcons:hover {
    fill: #D1A354;
    width: 30px;
    height: 30px;
    transition: fill 0.3s;
}

.secondarySocialIcons {
    fill: #fff;
    width: 30px;
    height: 30px;
    transition: fill 0.5s;
}
.secondarySocialIcons:hover {
    fill: #165B13;
    width: 30px;
    height: 30px;
    transition: fill 0.5s;
}

.secondaryNav {
    width:  100%;
    background-color: #165B13;
    display:  flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap:  10rem;
    height: 5rem;
}
.mobileMenu {
    display: none;
}

.secondaryNav ul {
    background-color: #165B13;
}

.secondaryNav a {
    color: white;
}

.heroTextContainer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .5rem;
    margin-bottom: 10%;
}

.heroTextContainer h1{
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-style: normal;
    margin: 0;
    font-size: 3rem;
}

.heroTextContainer p {
    font-family: "Baskervville", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-size: 1.5rem;
    margin: 0 0 .5rem 0;
}

.aboutContainer {
    display: flex;
    flex-direction: column;
    gap: 20%;
    width: 100%;
    align-items: center;
    padding: 4rem;
}


.aboutTextContainer {
    display:  flex;
    flex-direction: column;
    width: 50%;
    justify-content: center;
    color: #424242;
    line-height: 1.5;
}

.aboutTextContainer h2 {
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 3rem;
    margin: 0;
    text-align: center;
}

.aboutTextContainer p {
    margin: 1rem 0 2rem;
}

.aboutTextContainer a {
    width: 50%;
    font-size: 1.5rem;
}

.aboutImageContainer {
    width: 35%;
}
.aboutImageContainer img {
    width: 100%;
    height: 100%;
}

.portfolioContainer {
    background-color: #165B13;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.portfolioTextContainer {
    display: flex;
    flex-direction: column;
    background-color: #D1A354;
    width: 20%;
    padding-left: 4%;
    padding-top: 2rem;
    padding-bottom: 2rem;
    color: #424242;
}
.portfolioTextContainer h2 {
    font-weight: bold;
    font-size: 2.5rem;
    line-height: 4rem;
    margin-bottom: 1rem;
}
.portfolioTextContainer p {
    width: 60%;
    margin-bottom: 2rem;
    line-height: 1.4;
}

.portfolioTextContainer a {
    width: 70%;
}

.portfolioImagesContainer {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    height: 50%;
    width: 43%;
    gap:  1rem;
    margin-left: -2rem;
}
.portfolioImagesContainer a {
    padding: 0;
}
.portfolioImage {
    width: 25rem;
    height: 30rem;
}
#testimonialTitle {
    width: 70%;
    margin: 5rem auto;
    font-style: italic;
    font-size: 4rem;
}
.testimonialWrapper {
    display: flex;
    flex-direction: column;
    gap: 10rem;
    width: 70%;
    margin: auto;
}
.testimonial {
    text-align: center;
    width: 40%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap:  1rem;
    color: #424242;
}
.testimonial:nth-child(even) {
    align-self:  flex-end;
}
.quoteIcon {
    font-size: 3rem;
}
.testimonialDivider {
    height: 1px;
    width: 80%;
    background-color: #424242;
}
.contactPageContainer {
    background-color: #fff;
}
.contactContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background-color: #D1A354;
    width: 50%;
    justify-content: center;
    margin: 10rem auto;
    padding: 3rem 0;
}
.contactTextContainer {
    display: flex;
    flex-direction: column;
    color: #424242;
    gap: 2.5rem;
}
.contactLinks {
    display: flex;
    flex-direction: row;
    align-items: center;
    text-align: start;
    gap: 3.5rem;
}
.contactSocials {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    justify-content: center;
}
.contactInfo {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2rem;
}
.contactPageInfo {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2rem;
    margin-top: 2rem;
}
.contactInfo a {
    text-decoration: none;
    margin: 0;
    padding: 0;
    font-size: 1.1rem;
    color: #000000;
    font-family: "Baskervville", serif
}
.contactPageText p {
    font-size: 1.1rem;
}
.contactPageInfo p {
    font-size: 2rem;
}

.contactTextContainer h1 {
    font-weight: bold;
    font-size: 2.5rem;
}
.aboutPageContainer {
    background-image: url("/imgs/mainAboutBg.jpg");
    background-repeat: no-repeat;
    background-size: cover;
}
.jonAbout {
    margin: 0 auto auto;
    padding: 2rem 0;
    display: flex;
    flex-direction: row;
    justify-content:  center;
    gap: 4rem;
}

.aboutText{
    display:  flex;
    flex-direction: column;
    width: 40%;
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    padding: 5rem;
}
.aboutText h1{
    margin: 0;
    color: #165B13;
}
.aboutText p {
    font-size: 1.1rem;
}
.aboutText ul {
    margin: 0;
    font-family: "Baskervville", serif;
    font-size: 1.1rem;
}
.aboutText h2 {
    margin: 1rem 0;
}
.aboutDivider {
    height: 10px;
    background-color: #D1A354;
    margin: 2rem 0;
}

.aboutPictures {
    display: flex;
    flex-direction: column;
    width: 17%;
    gap: 1rem;
}
.aboutPictures img {
    width: 110%;
    height: auto;
}
.contactPageText{
    display:  flex;
    flex-direction: column;
    width: 40%;
    background-color: #D1A354;
    padding: 5rem;
}
.contactWrapper {
    margin: 0 auto auto;
    padding: 2rem 0;
    display: flex;
    flex-direction: row;
    justify-content:  center;
    gap: 4rem;
    min-height: 80vh;
}
.contactPageText h1{
    margin: 0;
    color: #165B13;
}

.contactPageText ul {
    margin: 0;
    font-family: "Baskervville", serif;
    font-size: 1.1rem;
}
.contactPageText h2 {
    margin: 1rem 0;
}
.contactDivider {
    height: 10px;
    background-color: #165B13;
    margin: 2rem 0;
}
.aboutDivider {
    height: 10px;
    background-color: #D1A354;
    margin: 2rem 0;
}
.headerCard {
    background-size: cover;
    background-position: left center;
    text-align: center;
    padding: 3rem;
    color: #fff;
}

.portfolioHeader {
    background-image: url('../imgs/heroCourse.png');
}
.portfolioItems {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    width: 50%;
    margin: 4rem auto;
    gap: 3rem;
}
.portfolioItem {
    display: flex;
    flex-direction: column;
    text-align: center;
    width: 30%;
}
.portfolioItem img {
    width: 100%;
    height: 15rem;
}
.portfolioDescription {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    background-color: #165B13;
    padding: 1rem 0;
    color: white;
    min-height: 13rem;
}
.portfolioDescription a{
    width: 50%;
    font-size: 1rem;
}
.projectContainer {
    display: flex;
    flex-direction: row;
    justify-content: center;
    background-color: #fff;
    width: 100%;
    gap: 8rem;
}
.projectDetails {
    width: 30%;
    margin: 4rem 0;
}
.projectDetails p {
    margin-top: 1.5rem;
}
.projectDetails h2 {
    font-family: "Baskervville", serif;
    font-style: italic;
}
.projectDetails h1 {
    color: #165B13;
    font-weight: bold;
}
.courseDetailsWrapper {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 70%;
    margin-top: 2rem;
}

.projectImage {
    width: 30%;
    overflow: clip;
    margin-top: 4rem;
}
.projectImage img {
    width: 100%;
    min-height: 40rem;
}
.courseDivider {
    height: 6px;
    background-color: #D1A354;
    margin: 2rem 0;
    width: 75%;
}
.courseDetails {
    text-align: center;
}
.courseDetails h3 {
    font-weight: 500;
    margin-bottom: .5rem;
    font-size: 1.4rem;
}
.courseDetails p {
    font-size: 1.5rem;
}
.courseDetailSub {
    font-size: 1rem;
}

.topImages {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    margin: 2rem 0;
}
.topImages img {
    width: 50%;
    height: auto;
}
.bottomImage img {
    width: 100%;
    height: auto;
}

.footer {
    background-color: #165B13;
    color: #ffffff;
    padding: 2rem 1rem;
}

.footer-container {
    max-width: 1100px;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    text-align: center;
}

.footer-nav,
.footer-social {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.footer-nav a,
.footer-copy a {
    color: #ffffff;
    text-decoration: none;
    font-weight: 500;
    font-size: 1rem;
    transition: color 0.3s ease;
}

.footer-nav a:hover, .footer-copy a:hover {
    color: #D1A354;
}

.footer-nav a:active {
    color: #D1A354;
}

.footer-copy, .footer-copy a {
    font-size: 0.9rem;
}
.footer-copy a {
    font-family: "Baskervville", serif;
}

@media (min-width: 1901px) and (max-width: 2000px) {
    .footer-container {
        flex-direction: row-reverse;
        justify-content: space-between;
        align-items: center;
        text-align: left;
    }
    .footer-nav,
    .footer-social {
        flex-direction: row;
    }
    .aboutTextContainer a {
        font-size: 1.2rem;
    }
    .portfolioTextContainer {
        padding-left: 2rem;
        width: 35%;
    }
    .portfolioItems {
        width: 60%;
    }
    .courseDetailsWrapper {
        width: 80%;
    }
}

@media (min-width: 2100px) {
    .footer-container {
        flex-direction: row-reverse;
        justify-content: space-between;
        align-items: center;
        text-align: left;
    }
    .footer-nav,
    .footer-social {
        flex-direction: row;
    }
    .contactContainer {
        width: 70%;
    }
    .footer-copy {
        flex-basis: 100%;
        text-align: center;
        margin-top: 1rem;
    }
}
@media (min-width: 992px) and (max-width: 1900px) {
    .aboutContainer {
        gap: 0;
        justify-content: space-between;
    }
    .aboutTextContainer {
        width: 100%;
        padding: 2rem 4rem;
        line-height: normal;
    }
    .portfolioImagesContainer {
        width: 58%;
    }
    .portfolioTextContainer {
        width: 37%;
    }
    .portfolioTextContainer h2 {
        line-height: 3rem;
    }
    .portfolioTextContainer p {
        width: 70%;
    }
    /*.portfolioImage:nth-child(odd) {*/
    /*    display: none;*/
    /*}*/
    .portfolioImage {
        height: 20rem;
    }
    .aboutTextContainer a {
        font-size: 1.2rem;
    }
    .portfolioItems {
        width: 80%;
    }
    .footer-container {
        flex-direction: row-reverse;
        justify-content: space-between;
        align-items: center;
        text-align: left;
    }
    .footer-nav,
    .footer-social {
        flex-direction: row;
    }
    .contactContainer {
        width: 70%;
    }
    .footer-copy {
        flex-basis: 100%;
        text-align: center;
        margin-top: 1rem;
    }
}

@media (min-width: 792px) and (max-width: 1100px) {
    .jonAbout {
        width: 85%;
    }
    .aboutPictures img {
        height: 25%;
    }
    .aboutText {
        width: 60%;
    }
    .projectContainer {
        gap: 5rem;
    }
    .projectDetails {
        width: 100%;
        padding-left: 1rem;
    }
    .courseDetailsWrapper {
        width: 100%;
    }
    .courseDivider {
        width: 100%;
    }
    .portfolioTextcontainer p {
        width: 80%;
    }
    .jonAbout {
        flex-direction: column-reverse;
        align-items: center;
    }
    .aboutPictures {
        flex-direction: row;
        width: 100%;
    }
    .aboutText {
        width: 100%;
        padding-bottom: 0;
    }
    .aboutPictures img {
        width: 100%;
        height: auto;
    }
}

@media (min-width: 751px) and (max-width: 991px) {
    .aboutContainer {
        gap: 0;
        justify-content: space-between;
    }
    .aboutTextContainer {
        width: 100%;
        padding: 2rem 4rem;
    }
    .portfolioTextContainer {
        width: 40%;
    }
    .portfolioTextContainer h2 {
        line-height: 3rem;
    }
    .portfolioTextContainer p {
        width: 70%;
    }
    .portfolioImage:nth-child(odd) {
        display: none;
    }
    .portfolioImage {
        height: 20rem;
    }
    .portfolioItems {
        width: 100%;
    }
    .secondaryNav {
        flex-direction: column;
        gap: 2rem;
        height: 8rem;
        padding: 2rem;
    }
    .testimonial {
        width: 80%;
    }
    .contactContainer {
        width: 70%;
    }

    .footer-container {
        flex-direction: row-reverse;
        justify-content: space-between;
        align-items: center;
        text-align: left;
    }
    .footer-nav,
    .footer-social {
        flex-direction: row;
    }

    .footer-copy {
        flex-basis: 100%;
        text-align: center;
        margin-top: 1rem;
    }
}

@media (min-width: 0px) and (max-width: 750px) {
    .portfolioItems {
        width: 80%;
    }
    .portfolioTextContainer h2 {
        font-size: 2rem;
        line-height: 2rem;
    }
    .portfolioTextContainer p {
        width: 90%;
        font-size: 1.3rem;
    }
    .mobileMenu {
        display: flex;
    }
    .navBar {
        flex-direction: column;
        gap: 1rem
    }
    .navLinks {
        flex-direction: column;
        width: 95%;
        height: 100%;

    }
    .navLinks ul {
        padding: 1rem;
    }
    .navLinks li {
        padding: 0;
    }
    .navItems {
        justify-content: center;
        align-items: center;
    }
    .navSocials {
        border-radius: 0 0 10px 10px;
        padding: 10px;
        width: 60%;
        justify-content: center;
        margin: 0 auto;
    }
    .heroContainer {
        min-height: 90vh;
    }
    .aboutContainer {
        flex-direction: column;
        align-items: center;
        gap: 1rem;
        padding-top: 2rem;
    }
    .aboutTextContainer {
        width: 95%;
        text-align: center;
        justify-content: center;
        align-items: center;
    }

    .aboutImageContainer {
        margin-top: 3rem;
        width: 100%;
    }
    .aboutTextContainer a{
        width: 60%;
        font-size: 1.3rem;
    }

    .portfolioContainer {
        flex-direction: column-reverse;
        padding: 2rem 0;
        margin-top: -2rem;
    }
    .portfolioTextContainer {
        width: 80%;
        text-align: center;
        padding: 2rem 0;
        justify-content: center;
        align-items: center;
        margin-top: 1rem;
    }
    .portfolioImagesContainer {
        width: 80%;
        margin: 2rem 0 0;

    }
    .portfolioImage {
        width: 47%;
        height: 40%;
    }
    #testimonialTitle {
        width: 100%;
        text-align: center;
        font-size: 3rem;
    }
    .testimonial {
        width: 100%;
    }
    .testimonialWrapper {
        width: 80%;
        gap: 6rem;
    }
    .testimonial p {
        font-size: 1.2rem;
    }
    .contactContainer {
        width: 90%;
        margin: 5rem auto;
    }
    #topNavBar {
        flex-direction: column-reverse;
    }

    .jonAbout {
        flex-direction: column-reverse;
        align-items: center;
    }
    .aboutPictures {
        display: flex;
        flex-direction: row;
        width: 100%;
    }
    .aboutPictures img {
        width: 100%;
        height: 100%;
    }
    .aboutText {
        width: 120%;
        padding-bottom: 0;
    }
    .aboutText h1 {
        font-size: 1.5rem;
        text-align: center;
    }
    .aboutText p {
        font-size: 1.3rem;
    }
    .topImages img {
       height: 10rem;
    }
    .projectContainer {
        flex-direction: column;
        gap: 0;
    }
    .projectDetails {
        width: 80%;
        margin: 4rem auto;
    }
    .courseDetailsWrapper {
        width: 100%;
    }
    .courseDivider {
        width: 100%;
    }
    .projectImage {
        width: 100%;
    }
    .projectImage img {
        width: 100%;
    }
}