*{
    font-family: 'Lato', sans-serif;
  }

:root {
    --step--2: clamp(0.7813rem, 0.7747rem + 0.0326vw, 0.8rem);
    --step--1: clamp(0.9375rem, 0.9158rem + 0.1087vw, 1rem);
    --step-0: clamp(1.125rem, 1.0815rem + 0.2174vw, 1.25rem);
    --step-1: clamp(1.35rem, 1.2761rem + 0.3696vw, 1.5625rem);
    --step-2: clamp(1.62rem, 1.5041rem + 0.5793vw, 1.9531rem);
    --step-3: clamp(1.944rem, 1.771rem + 0.8651vw, 2.4414rem);
    --step-4: clamp(2.3328rem, 2.0827rem + 1.2504vw, 3.0518rem);
    --step-5: clamp(2.7994rem, 2.4462rem + 1.7658vw, 3.8147rem);
    --step-6: clamp(3.3592rem, 2.8691rem + 2.4507vw, 4.7684rem);
    --step-7: clamp(4.0311rem, 3.36rem + 3.3555vw, 5.9605rem);
    --step-8: clamp(4.8373rem, 3.9283rem + 4.5448vw, 7.4506rem);
    --step-9: clamp(5.8048rem, 4.5844rem + 6.1017vw, 9.3132rem);
    --step-10: clamp(6.9657rem, 5.3393rem + 8.1319vw, 11.6415rem);
}

p{
    font-weight: 200;
}

a{
    font: inherit;
    color: inherit;
    text-decoration: none;
}

html{
    scroll-behavior: smooth;
}

h2{
    font-size: var(--step-5);
    font-weight: 300;
    color: #8e6947;
    text-transform: uppercase;
    margin: 0;
}

h3{
    font-size: var(--step-3);
    font-weight: 300;
}

h1{
    text-transform: uppercase;
}

h5{
    font-size: var(--step-0);
    font-weight: 200; 
    text-transform: uppercase;
}

h4{
    text-transform: uppercase;
    font-weight: 100;
}

li{
    font-weight: 300;
}

/*button reset*/
button{
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
    outline: none;
    text-decoration: none;
    box-shadow: none;
    -moz-appearance: none;
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
}

/* Styled buttons */
.styled-button {
    background-color: #8e6947;
    color: white;
    font-weight: 100;
    padding: 1rem 3rem;
    border-radius: 999px;
    font-size: var(--step-0);
}

.styled-button:hover{
    background-color: #515f4c;
}

.styled-button-reverse {
    color: #8e6947;
    background-color: #ebe7e4;
}

.styled-button-reverse:hover {
    background-color: #8e6947;
    color: #ebe7e4;
}

*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    max-width: 100%;
}

/*Header*/
header {
    position: relative;
}

.hamburger {
    display: none;
}

.mobile-nav {
    display: none;
}


.bar {
    display: block;
    width: 100%;
    height: 2px;
    background-color: #fff;
    transition: transform 0.3s ease, opacity 0.3s ease;
    transform-origin: center;
}

.hamburger.active .bar:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
}

.hamburger.active .bar:nth-child(2) {
    transform: translateY(-9px) rotate(-45deg);
}

nav {
    height: 100px;
    display: flex;
    background-color: #ebe7e4;
    justify-content: space-between;
    align-items: center;
}

nav img {
    height: 6rem;
}
nav img:hover {
   scale: 1.1;
}

nav ul {
    display: flex;
    list-style: none;
    font-weight: 100;
}

nav ul li {
    padding: 0 1rem;
}

nav li:hover{
    color: #8e6947;
}

.current-menu-item{
   color: #8e6947;
}

/*animation*/
.fade-in-image {
  opacity: 0;
  transform: translateY(-40px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-in-image.visible {
  opacity: 1;
  transform: translateY(0);
}

.fade-in {
  opacity: 0;
  transform: translateY(4rem);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-in.visible {
  opacity: 1;
  transform: translateY(6rem);
}

/*Home page*/
.hero h1 {
    font-size: var(--step-7);
    font-weight: 300;
    color: #ffffff;
    background-color: rgb(35 31 32 / 0.5);
    text-align: center;
    width: 50%;
    padding: 4rem 4rem;
    margin: 5rem;
}

.hero div{
    width: auto;
    height: 45rem;
    display: flex;
    align-items: center;
    justify-content: start;
}

.test {
    color: #8e6947;
}

/*Mission Statement*/
.tan{
    background-color: #ebe7e4;
    display: flex;
    text-align: center;
    align-items: center;
    position: relative;
    overflow: visible;
}

.tan h2{
    margin: auto;
    width: 80%;
}

.tan img{
    width: 40%;
    margin: 2rem;
    transform: translateY(4rem);
}

.tan div {
    padding: 4rem;
}

.tan button{
    margin-top: 2rem;
}

/*Benefit*/
.black-white-section {
    text-align: center;
    height: 24rem;
    margin: 6rem 0rem 3rem 0rem;
    flex-direction: column;
    display: flex;
    align-items: center;
    justify-content: center;
}

.black-white-section h2 {
    color: #231f20;
    margin: 0;
}

.black-white-section p{
    width: 50%;
}

.line{
    background-color: #231f20;
    width: .13rem;
    height: 4rem;
}

/*Packages*/
#packages_section{
   text-align: center;
   display: flex;
   flex-direction: column;
   gap: 2rem;
   margin: 3rem 0rem 12rem 0rem;
}

#packages_section h2{
    margin: 0;
}

#tan_line {
    height: .2rem;
    width: 90%;
    background-color: #8e6947;
    margin: auto;
}

#package_grid{
    display: flex;
    gap: 3rem;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width: 80%;
    margin: auto;
}

.package{
    background-color: #515f4c;
    width: 18rem;
    height: 30rem;
    border-radius: 2rem;
    font-weight: 100;
    padding: 4rem 1rem;
}

.package h4{
    font-size: var(--step-2);
    color: #ebe7e4;
    text-transform: uppercase;
    font-weight: 100;
    margin: 0;
}

.package p{
    font-size: var(--step--1);
    color: #ebe7e4;
    font-weight: 100;
    height: 11rem;
}

.package button{
    padding: 1rem 1.5rem;
    border-radius: 999px;
    font-size: var(--step--1);
}

/*reviews*/
.review{
    background-color: #ebe7e4;
    height: 40rem;
    text-align: center; 
    display: flex;
    justify-content: center;
    align-items: center;
}

.review h2{
    margin: 1rem;
}

.review p{
    width: 50%;
    font-size: var(--step-3);
    font-weight: 100;
    margin: auto;
}

.review-rev p{
    font-size: var(--step-0);
}

.review-rev {
   height: auto;
   margin: auto;
padding: 15rem 2rem; 
display: block !important;
}

/*Blog*/
.category {
    background-color: #ebe7e4;
    padding: 5rem;
    text-align: center;
}

.category h2{
    margin-bottom: 4rem;
}

.category-container{
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-wrap: wrap;
}

.category p{
    text-transform: uppercase;
}

.category-style{
    display: flex;
    flex-direction: column;
    width: 30%;
    align-items: center;
    justify-content: center;
    flex: 1 1 120px; /* grow, shrink, min-width before wrapping */
  text-align: center;
}

.category-logo img{
    height: 3rem;
    width: 3rem;
}

.category-style:hover{
    scale: 1.1;
}

/*latest post */
.latest-post{
    padding: 5rem;
}

.latest-post-container{
    display: flex;
    justify-content: center;
    align-items: center;
}

.latest-post-container article {
    background-color: #515f4c;
    padding: 8rem 4rem;
    text-align: center;
}

.latest-post-container img{
    object-fit: cover;
    width: 30rem;
    height: 30rem;
} 

.latest-post-container h2{
    margin: 0;
    color: #ebe7e4;
}

.latest-post-container p {
    color: #ebe7e4;
}

.post{
    display: grid;
    grid-template-rows: auto auto;
    justify-items: center;
    align-items: center;
    padding: 5rem;
    row-gap: 1rem;
    background-color: #ebe7e4;
}

.container{
    display: flex;
    justify-content: center;
    align-items: center;
    grid-row: 1;
}

.post-item {
    text-align: center;
    width: 60%;
    background-color: #ffffff;
    margin: auto;
    box-shadow: 8px 8px 10px rgba(0, 0, 0, 0.15);
}

.post-item article{
    padding: 1rem;
}

.post-item img{
    width: 100%;
}

.paginate{
    margin: 2rem;
    grid-row: 2;
    grid-column: span 2;
    font-weight: 100;
}

.paginate:hover{
    color: #8e6947;
}

/* Post single */
.post-single{
    padding: 4rem;
    background-color: #ebe7e4;
    color: #231f20;
}

.post-single h2{
    margin: 0;
}

.post-single h4{
    font-weight: 100;
}

/*contact*/
.form-container{
    background-color: #ebe7e4;
    padding: 5rem;
    display: flex;
    justify-content: center;
    gap: 2rem;
}

.form-container form{
    display: flex;
    flex-direction: column;
    width: 50%;
}

form input{
    background: rgba(0, 0, 0, 0.15);
    border: none;
    height: 4rem;
}

form textarea{
    background: rgba(0, 0, 0, 0.15);
    border: none;
    height: 10rem;
}

.form-container img{
    width: 50%;
}

.form-container div{
    margin-top: 3rem;
}

.social{
    display: none;
    gap: 2rem;
    
}

.social img{
    width: 2rem;
}

/*Staff*/
.staff-container{
    padding: 5rem;
    text-align: center;
    background-color: #515f4c;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.staff-container h2{
    color: #ebe7e4;
}

.staff-container p{
    color: #ebe7e4;
}

.staff-container h3{
    color: #ebe7e4;
    font-weight: 200;
    margin: 1rem;
}

.staff-container img{
    width: 50%;
}

.staff-container h5{
    color: white;
    margin: 1rem;
}

.staff-bio {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4rem;
    margin: 2rem 0;
}

.staff-bio article{
    width: 50%;
}

.no-bg {
    background-color: #ffffff;
}

.no-bg h2{
    color: #8e6947;
}

.no-bg p{
    color: #231f20;
}

.no-bg h3{
    color: #231f20;
}

.no-bg h5{
    color: #231f20;
}

/*Footer*/
footer {
    display: flex;
}

#FooterInfo {
    text-align: center;
    margin: auto;
    display: flex;
    flex-direction: column;
    gap: 3rem;
    width: 40%;
}

address {
    font-style: normal;
    margin: auto;
    font-size: var(--step-1);
    font-weight: 100;
}

footer h2 {
    margin-bottom: 1rem;
}

footer img{
    max-width: 40%;
}

#TOS{
    font-size: var(--step--1);
}

/*Responsive*/
@media (max-width: 1400px) {
    .hero h1{
        font-size: var(--step-7);
    }
}

@media (max-width: 1200px) {
    .hero h1{
        font-size: var(--step-6);
    }
}

@media (max-width: 950px) {

    h2{
    font-size: var(--step-4);
    }
    .hero div{
        justify-content: center;
    }

    .hero h1{
        font-size: var(--step-6);
        width: auto;
    }

    /*Mission Statement*/
    .tan{
        flex-direction: column;
    }

    .tan img{
        width: 60%;
        transform: translateY(6rem)
    }

    .tan div {
        padding-bottom: 2rem;
    }

    /*latest-post*/
    .latest-post-container{
        display: grid;
        grid-template: 1 / 1 / 1 / 1;
    }

    .latest-post-container article{
        width: 100%;
        grid-area: 2 / 1 / 3 / 2;
    }

    .latest-post-container img{
        width: 100%;
        grid-area: 1 / 1 / 2 / 2;
    } 

    /* Post single */
    .post-item {
        width: 80%;
    }

    /*Staff About Us */
    .staff-bio {
        display: grid;
        grid-template: repeat(2, auto) / auto;
        justify-items: center;
        align-items: center;
        gap: 0;
        margin: 0;
    }

    .staff-container{
        padding: 2rem;
    }

    .staff-container img{
       grid-area: 1 / 1 / 2 / 1;
       width: 75%;
    }

    .staff-bio article{
        grid-area: 2 / 1 / 3 / 1;
        width: 75%;
    }

    .staff-container h2{
       margin: 2rem;
    }

    /*contact*/
    .form-container{
        padding: 0 3rem;
    }

    .form-container img{
        display: none;
    }

    .form-container form{
        width: 100%;
    }

    .social img{
       display: block;
       padding-bottom: 2rem;
    }

    /*Footer*/
    footer {
        flex-direction: column;
    }

    footer img{
        max-width: 100%;
        max-height: 20rem;
        object-fit: cover;
    }

    #FooterInfo {
        padding: 4rem;
        width: 70%;
    }
}

@media (max-width: 600px) {

    .desktop-nav {
        display: none;
    }

    .bar {
        background-color: #8e6947;
    }

    .hamburger {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 30px;
        height: 20px;
        background: none;
        border: none;
        cursor: pointer;
        padding: 0;
        z-index: 3;
        position: relative;
        background-color: transparent;
        border-radius: 0;
        padding: 0;
        margin: 2rem;
    }

    .hamburger.active .bar:nth-child(1) {
        transform: translateY(9px) rotate(45deg);
        color: #fff;
    }

    .hamburger.active .bar:nth-child(2) {
        transform: translateY(-9px) rotate(-45deg);
        color: #fff;
    }

    .mobile-nav.active {
        display: flex;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.85);
        z-index: 2;
        justify-content: center;
        align-items: center;
    }

    .mobile-nav ul {
        list-style: none;
        padding: 0;
        margin: 0;
        text-align: center;
        display: flex;
        flex-direction: column;
    }

    .mobile-nav ul li {
        
        margin: 1.5rem 0;
    }

    .mobile-nav ul li a {
        color: #fff;
        text-decoration: none;
        font-size: 1.8rem;
    }

    .mobile-nav ul li a:hover {
        color: #8e6947;
        
    }

    /*Categories*/
    .post{
        display: flex;
        flex-direction: column;
    }

    .category{
        padding: 1rem;
    }
}

@media (max-width: 420px) {

    h2{
        font-size: var(--step-3);
    }
    .hero{
        height: 20rem;
    }

    .hero div{
        align-items: center;
        height: 20rem;
    }

    .hero h1 {
        font-size: var(--step-5);
        padding: 2rem 2rem;
        margin: 2.5rem;
    }

    /*tan bg */
    .tan img{
        width: 80%;
        transform: translateY(4rem)
    }

    .tan div {
        padding: 2rem;
    }

    .black-white-section p{
        width: 70%;
    }

    .review p{
        font-size: var(--step-0);
        width: 80%;
    }

    /*Footer*/
    #FooterInfo {
        text-align: center;
        padding: auto 0;
    }

    footer h2 {
        font-size: var(--step-4);
    }

    /*blog*/
    .latest-post-container article{
        padding: 3rem 4rem;
    }

    .latest-post-container img{
        height: 100%;
    }

    .category h2{
        margin-bottom: 1rem;
    }

    .category-container{
        width: 100%;
    }

    .category-style{
        scale: 0.75;
        width: 1rem;
    }

    /* Post single */
    .post{
        padding: 3rem 2rem;
        gap: 3rem;
    }

    .post-item {
        width: 100%;
    }

    /*contact*/
    .form-container{
        padding: 0 2rem;
        gap: 0;
    }

    .form-container form{
        width: 100%;
    }

    #form div{
       margin: 2rem auto;
    }
    /*footer*/

    #FooterInfo {
    width: 100%;
}
}