html, body {    
    margin: 0;
    padding: 0;
    font-family: "Roboto", sans-serif;
    font-optical-sizing: auto;
    font-weight: normal;
    font-style: normal;
    font-variation-settings: 100;
    padding: 0;
    margin: 0;
    }

.koho-semibold {
  font-family: "KoHo", sans-serif;
  font-weight: 37.5rem;
  font-style: normal;
}

h2{
    font-size: 5rem;
    font-weight: 600;
    font-style: italic;
    color: #234424; 
    text-shadow:
         8px 0 0 rgba(47, 93, 47, 0.6),
}

/* NAVIGATION */
nav {
    /* sticky */
    position: sticky;
    top: 0;
    z-index: 1000;

    display: flex;
    gap: 3rem;
    justify-content: space-between;
    align-items: center;
    background-color: #F4EBD7; 
    padding: 1rem 2.5rem;
}

.beige {
    background-color: #F4EBD7; 
}

.logoNav {
    width: 3rem;
    height: auto;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-weight: bold;
}

.menu {
    list-style: none;
    display:flex;
    gap: 3.125rem;
    margin: 0;
    padding: 0;
}
ul {
    display: flex;
    list-style-type: none;
    font-size: 1.05rem;
    gap: 5rem; 
}

.nav-item{
    text-decoration: none;
    color: #1f4d2b;
    font-family: "Koho", sans-serif;
    font-weight: 600;
    font-size: 1.2rem;
    background: none;
}

.nav-item a:hover {
    color: #907B6C;  
    text-decoration: none;
    position: relative;
    transition: all 0.3s ease;
}


.icon {
    display: flex;
    gap: 1.563rem;
    fill: #1f4d2b;
    background: none;
    height: auto;
    gap: 3.125rem; 
}

.icon :hover{
    fill: #907B6C;  
    position: relative;
    transition: 0.3s ease;
}

/*  HERO CONTENT*/
.hero {
    background: url('../images/background1.jpg') center/cover no-repeat;
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 4rem 8%;
    position: relative;
    flex-direction: column;
}
.hero-content img {
    width: 100%;
    max-width: 100%;
    height: auto;
}

.hero-content {
    position: absolute; 
    top: 50%;
    left: 8%;
    transform: translateY(-50%);
    color: #2f4f2f;

    width: 90%;
    max-width: 37.5rem;

    background: rgba(255, 255, 255, 0.6); 
    padding: 1rem;
    border-radius: 20px;
}

.hero-content p {
    font-size: 1rem;
    font-family: "Kufam", sans-serif;
    font-weight: 500;
    padding: 0;
    margin-top: 1rem;
    margin-bottom: 0;
}

.hero a {
    position: absolute;
    top: 58%;
    left: 8%;
    text-decoration: none;
    font-size: 1.15rem;
    font-family: "Kufam", sans-serif;
    
    background-color: #234424;
    color: white;

    padding: 0.8rem 1rem;
    border-radius: 15px;
    display: block;
    width: fit-content;
    margin-top: 3rem;
}
.hero a:hover{
    background-color: #907B6C;
    transform: translateY(-3px);
    transition: all 0.3s ease;
}



/* NEW ARRIVALS */
.new-arrivals {
    padding: 5rem 3.75rem;
    background: #e9e9e9;
}


.container {
    padding: 2rem ;
    display: flex;
    gap: 3.75rem;
    align-items: flex-start;
}

/* LEFT SIDE - NEW ARRIVALS*/
.arrivals-text {
    width: 30%;
}

.arrivals-text h2 {
    font-family:  "Montserrat Alternates", sans-serif;
    font-size: 2.5rem;
    font-weight: 700;
    font-style: normal;
    color: #234d2b;
    margin-bottom: 20px;
}

.arrivals-text p {
    color: #555;
    line-height: 1.6;
    font-size: 1rem;
    padding-bottom: 1rem;
}

.view-all {
    text-decoration: none;
    color: #234d2b;
    font-weight: bold;
    border-bottom: 1px solid #234d2b;
    padding-bottom: 3px;
}

/* RIGHT SIDE PRODUCTS - NEW ARRIVALS */
.arrivals-products {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 5rem;
    width: 100%;
}

.product img {
    object-fit: cover;
    width: 13rem;
    height: 15rem;
}

.product-info {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    font-size: 1rem;
}

.product-info span:last-child {
    color: #234d2b;
}


/* SECTION 2 - ABOUT US */
.aboutUs {
    padding: 3rem 7rem;
}
.aboutUs-container {
    display: flex;
    align-items: center;
    gap: 4rem;
}

/* Content - ABOUT US*/
.aboutUs-content {
    max-width: 50%;
    margin: 2rem 0;
    align-items: center;
}
/* Title - ABOUT US */
.aboutUs-content h2 {
    font-family: "Montserrat Alternates", sans-serif;
    font-size: 5rem;
    font-weight: 800;
    font-style: italic;
    color: #234d2b;
    margin: 1rem 0;

    /* Shadow effect giống hình */
    text-shadow: 4px 4px 0px rgba(35, 77, 43, 0.3);
}

/* Paragraph -  ABOUT US */
.aboutUs-content p {
    font-size: 1.15em;
    font-family: "Roboto", sans-serif;
    line-height: 1.7;
    color: #234d2b;
    margin: 1rem 0;
}
/* Image - ABOUT US */
.aboutUs-image {
    width: 50%;
}
.aboutUs-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* SECTION 3 - OUR WORK */
.ourWork {
  padding: 3rem 7rem;
}
.ourWork-container {
    display: flex;
    align-items: center;
    gap: 4rem;
}

/* Image - OUR WORK */
.ourWork-image {
    width:50%;
}

.ourWork-image img {
    /* width: 100%;
    height: auto;
    padding: 2rem;
    margin-left: 4rem; */
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* Content - OUR WORK */
.ourWork-content {
    /* width: 100%;
    padding: 0 7rem 0 3rem;
    margin-left: 4rem ; */
    max-width: 50%;
    margin-right: 2rem;
}

/* Title - OUR WORK*/
.ourWork-content h2 {
    font-family: "Montserrat Alternates", sans-serif;
    font-size: 5rem;
    font-weight: 800;
    font-style: italic;
    color: #234d2b;
    margin: 1rem 0;

    /* Shadow effect giống hình */
    text-shadow: 4px 4px 0px rgba(35, 77, 43, 0.3);
}

/* Paragraph - OUR WORK*/
.ourWork-content p {
    font-size: 1.15rem;
    font-family: "Roboto", sans-serif;
    line-height: 1.7;
    color: #234d2b;
    margin: 1rem 0;
}

/* Button - OUR WORK*/
.ourWork-content a {
    text-decoration: none;
    font-size: 1.15rem;
    font-family: "Kufam", sans-serif;
    
    /* add a color background*/
    background-color: #234424;
    color: white;

    /* short version */
    padding: 0.8rem 1rem;
    border-radius: 15px;
    display: block;
    width: fit-content;
    margin: 1.5rem auto; 

}
/* Button hover - OUR WORK*/
.ourWork-content a:hover {
    background-color: #907B6C;
    transform: translateY(-3px);
    transition: all 0.3s ease;
}

/* SECTION 4 - ZEN BLOG */
.zenBlog {
    padding: 3rem 7rem;
}
.zenBlog-container {
    display: flex;
    align-items: center;
    gap: 4rem
}

/* Content - ZEN BLOG */
.zenBlog-content {
    width: 50%;
    margin-right: 2rem;
}
/* Title - ZEN BLOG*/
.zenBlog-content h2 {
    font-family: "Montserrat Alternates", sans-serif;
    font-size: 5rem;
    font-weight: 800;
    font-style: italic;
    color: #234d2b;
    margin: 1rem 0;

    /* Shadow effect giống hình */
    text-shadow: 4px 4px 0px rgba(35, 77, 43, 0.3);
}

/* Paragraph - ZEN BLOG*/
.zenBlog-p1{
    font-size: 1.5rem;
    font-family: "Kufam", sans-serif;
    font-style: italic;
    color: #234d2b;
    margin: 1rem 0;
}
.zenBlog-p2 {
    font-size: 1.15em;
    font-family: "Roboto", sans-serif;
    line-height: 1.7;
    color: #234d2b;
    margin: 1rem 0;
}
/* Image - ZEN BLOG*/
.zenBlog-image {
    width: 50%;
}
.zenBlog-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
}
/* Button - ZEN BLOG*/
.zenBlog-content a {
    text-decoration: none;
    font-size: 1.15rem;
    font-family: "Kufam", sans-serif;
    
    /* add a color background*/
    background-color: #234424;
    color: white;

    /* short version */
    padding: 0.8rem 1rem;
    border-radius: 15px;
    display: block;
    width: fit-content;
    margin: 1.5rem auto; 
}
/* Button hover - ZEN BLOG*/
.zenBlog-content a:hover {
    background-color: #907B6C;
    transform: translateY(-3px);
    transition: all 0.3s ease;
}


/* SECTION 5 - VISION */
.vision{
  padding: 3rem 7rem;
}

.vision-container{
    display: flex;
    align-items: flex-start;
    gap: 4rem;
}

/* Image - VISION */
.vision-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* Content - VISION*/
.vision-content {
    max-width: 50%;
    margin-right: 2rem;
}
.vision-content img{
    width: 60%;
    height: auto;
}
.vision-content h2{
    font-family: "Exo", sans-serif;
    font-style: italic;
    color: #234d2b;
    font-size: 2rem;
    margin-top: 0.5rem ;
}

.vision-content h3{
    font-family: "Exo", sans-serif;
    font-style: italic;
    color: #234d2b;
    font-size: 2rem;
    margin-top: 0.5rem ;
    margin-left: 3rem;
}

.vision-item {
    margin: 0.5rem;
}

.vision-item h3 {
    font-family: "Exo", sans-serif;
    font-size: 1.5rem;
    font-style: italic;
    color: #234d2b;
    margin-bottom: 0.5rem;
}

.vision-item p {
    font-family: "Exo", sans-serif;
    font-size: 1.2rem;
    line-height: 1.7;
    color: #234d2b;
    margin: 0;
}


/* SECTION 6 - PHILOSOPHY */
.philosophy {
    background-image: url('../images/background2.jpg');
    background-size: cover;
    background-position-x: center;
    height: 50rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.philosophy h2 {
    font-family: "Exo", sans-serif;
    font-size: 4rem;
    font-style: italic;
    color: #234d2b;
    margin-bottom: 1rem;
}

.philosophy p {
    font-family: "Kufam", sans-serif;
    font-size: 2rem;
    color: #234d2b;
    margin-bottom: 30rem;
} 


.footer {
    padding: 3rem 6rem;
    background-color: #F4EBD7; 
}

.footer-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    border-bottom: 1px solid #234d2b;
    padding-bottom: 2rem;
}

/* Left */
.footer-left h2 {
    font-family: "Montserrat Alternates", sans-serif;
    font-size: 2rem;
    color: #234d2b;
}

.socials span {
    margin-right: 1rem;
    font-size: 1.2rem;
    cursor: pointer;
}

.socials {
    margin-top: 1rem;
}

.socials img{
    width: 2.5rem;
    height: 2.5rem;
    margin-right: 1rem;
}

/* Middle */
.footer-middle p {
    font-family: "Kufam", sans-serif;
    font-size: 1.15rem;
    color: #234d2b;
    margin-bottom: 0.5rem;
}

/* Right */
.footer-right a {
    display: block;
    text-decoration: none;
    font-family: "Exo", sans-serif;
    color: #234d2b;
    margin-bottom: 0.8rem;
    font-size: 1rem;
    font-weight: 600;
}

.footer-right a:hover {
    text-decoration: underline;
}

/* Bottom */
.footer-bottom {
    display: flex;
    justify-content: space-between;
    margin-top: 1rem;
    font-size: 0.8rem;
    color: #234d2b;
}

/* ======================================
   RESPONSIVE DESIGN
====================================== */

/* ---------- LARGE LAPTOP (1200px ↓) ---------- */
@media (max-width: 1200px) {
    .aboutUs,
    .ourWork,
    .zenBlog,
    .vision {
        padding: 3rem 3rem;
    }

    .arrivals-products {
        grid-template-columns: repeat(3, 1fr);
    }
}


/* ---------- TABLET (992px ↓) ---------- */
@media (max-width: 992px) {
    .aboutUs-container,
    .ourWork-container,
    .zenBlog-container,
    .vision-container,
    .container {
        flex-direction: column;
        gap: 2rem;
    }

    .aboutUs-content,
    .aboutUs-image,
    .ourWork-content,
    .ourWork-image,
    .zenBlog-content,
    .zenBlog-image,
    .vision-content {
        max-width: 100%;
        width: 100%;
    }

    .arrivals-text {
        width: 100%;
    }

    .arrivals-products {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }

}


/* ---------- MOBILE (576px ↓) ---------- */
@media (max-width: 576px) {
    .hero {
        height: auto;
        padding: 4rem 1rem;
    }

    .hero-content {
        position: static;
        transform: none;
        margin: 0 auto;
        width: 95%;
    }

    .hero a {
        position: static;
        margin: 1rem auto 0;
    }


    
    ul {
        flex-direction: column;
        gap: 1rem;
    }

    .icon {
        gap: 1rem;
    }

    .arrivals-products {
        grid-template-columns: 1fr;
    }

    .philosophy {
        height: auto;
        padding: 4rem 2rem;
    }

    .philosophy h2 {
        font-size: clamp(1.8rem, 6vw, 3rem);
    }

    .philosophy p {
        font-size: clamp(1rem, 4vw, 1.5rem);
        margin-bottom: 0;
    }

    .footer-container {
        flex-direction: column;
        gap: 2rem;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }
}