html {
    scroll-behavior: smooth;
}
::selection {
    background: #d4a373;
    color: white;
}
 /* ==========================
   RESET
========================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    background: #fdfaf6;
    color: #333;
    line-height: 1.8;
}

/* ==========================
   HEADER
========================== */

header {
    background: #6f4e37;
    position: sticky;
    top: 0;
    z-index: 1000;
    padding: 18px 8%;
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    color: white;
    cursor: pointer;
    transition: transform 0.3s ease;
    font-family: "Merienda", cursive;
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 1px;
    color: #fff;
}


.logo:hover {
    transform: scale(1.05);
}
.logo a {
    color: inherit;
    text-decoration: none;
}

.nav-links {
    display: flex;
    list-style: none;
    gap: 25px;
}

.nav-links a {
    position: relative;
    color: white;
    text-decoration: none;
    transition: color 0.3s ease;
}

.nav-links a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -5px;
    width: 0;
    height: 2px;
    background-color: #f4d03f;
    transition: width 0.3s ease;
}

.nav-links a:hover {
    color: #f4d03f;
}

.nav-links a:hover::after {
    width: 100%;
}

.menu-toggle {
    display: none;
    color: white;
    font-size: 30px;
    cursor: pointer;
}

/* ==========================
   BUTTON
========================== */

.btn {
    display: inline-block;
    position: relative;
    overflow: hidden;
    padding: 12px 28px;
    background: #2f5233;
    color: white;
    text-decoration: none;
    border-radius: 30px;
    font-weight: 600;
    letter-spacing: 0.5px;
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        background-color 0.3s ease;
}

.btn:hover{
    background:#466b4a;
    transform:translateY(-4px);
    box-shadow:0 12px 30px rgba(47,82,51,.25);
}

.btn:active {
    transform: translateY(-2px) scale(0.98);
}
.btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        120deg,
        transparent,
        rgba(255, 255, 255, 0.45),
        transparent
    );
    transform: skewX(-25deg);
    transition: left 0.6s ease;
}

.btn:hover::before {
    left: 150%;
}
section h2{
    position:relative;
    display:inline-block;
    margin-bottom:25px;
}

section h2::after{
    content:"";
    width:70px;
    height:4px;
    background:#d4a373;
    display:block;
    margin:12px auto 0;
    border-radius:50px;
}

/* ==========================
   HERO SECTION
========================== */

.hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
    min-height: 90vh;
    padding: 80px 10%;
    background: #f8f5ef;
    flex-wrap: wrap;
}

.hero-text {
    flex: 1;
    min-width: 300px;
}

.hero-text h1 {
    font-size: 3rem;
    color: #2f5233;
    margin-bottom: 20px;
}

.hero-text p {
    font-size: 1.1rem;
    color: #555;
    line-height: 1.8;
    margin-bottom: 30px;
}

.hero-image {
    flex: 1;
    text-align: center;
    min-width: 300px;
}

.hero-image img {
    width: 100%;
    max-width: 550px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

/* ==========================
   ABOUT SECTION
========================== */

.about {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
    padding: 80px 10%;
    background: #fffaf5;
    flex-wrap: wrap;
}

.about-image {
    flex: 1;
    text-align: center;
    min-width: 300px;
}

.about-image img {
    width: 100%;
    max-width: 450px;
    border-radius: 15px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

.about-text {
    flex: 1;
    min-width: 300px;
}

.about-text h2 {
    font-size: 2.5rem;
    color: #5c4033;
    margin-bottom: 20px;
}

.about-text p {
    font-size: 1.1rem;
    color: #555;
    line-height: 1.8;
    margin-bottom: 20px;
}

/* ==========================
   MOBILE RESPONSIVE
========================== */

@media (max-width:768px){

    /* Navigation */

    .menu-toggle{
        display:block;
    }

    .nav-links{
        display:none;
        flex-direction:column;
        position:absolute;
        top:70px;
        right:5%;
        width:220px;
        background:#6f4e37;
        padding:20px;
        border-radius:12px;
        box-shadow:0 10px 20px rgba(0,0,0,.15);
    }

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

    .nav-links a{
        padding:10px 0;
    }

    /* Hero */

    .hero{
        flex-direction:column-reverse;
        text-align:center;
        padding:60px 20px;
    }

    .hero-text h1{
        font-size:2rem;
    }

    .hero-text p{
        font-size:1rem;
    }

    .hero-image img{
        width:90%;
        margin-bottom:30px;
    }

    /* About */

    .about{
        flex-direction:column;
        text-align:center;
        padding:60px 20px;
    }

    .about-image img{
        width:90%;
    }

    /* Founder */

    .founder-container{
        flex-direction:column;
        text-align:center;
    }

    .founder-image img{
        width:220px;
        height:220px;
    }

    /* Blog */

    .blog{
        padding:60px 20px;
    }

    .blog h2{
        font-size:2rem;
    }

    .blog-container{
        grid-template-columns:1fr;
    }

    /* Search */

    .search-box input{
        width:100%;
    }

    /* Share */

    .share{
        padding:60px 20px;
    }

    .share-container{
        padding:35px 20px;
    }

    /* Newsletter */

    .newsletter{
        padding:60px 20px;
    }

    .newsletter form{
        flex-direction:column;
    }

    /* Footer */

    .footer-container{
        flex-direction:column;
        text-align:center;
        gap:30px;
    }

}
/* ==========================
   FEATURED POSTS
========================== */

.featured {
    padding: 80px 10%;
    background: #f8f5ef;
    text-align: center;
}

.featured h2 {
    font-size: 2.5rem;
    color: #5c4033;
    margin-bottom: 15px;
}

.featured-subtitle {
    color: #666;
    margin-bottom: 50px;
    font-size: 1.1rem;
}

.featured-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}

.featured-card {
    background: #ffffff;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
    transition: transform 0.3s ease;
    padding-bottom: 25px;
}

.featured-card:hover {
    transform: translateY(-8px);
}

.featured-card img {
    width: 100%;
    height: 220px;
    object-fit: cover;
}

.featured-card h3 {
    margin: 20px 0 15px;
    color: #2f5233;
}

.featured-card p {
    color: #555;
    padding: 0 20px 20px;
    line-height: 1.7;
}
/* ==========================
   BLOG SECTION
========================== */

.blog {
    padding: 80px 10%;
    background: #ffffff;
    text-align: center;
}

.blog h2 {
    font-size: 2.5rem;
    color: #5c4033;
    margin-bottom: 15px;
}

.blog-subtitle {
    font-size: 1.1rem;
    color: #666;
    margin-bottom: 50px;
}

.blog-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
}



.blog-card img {
    width: 100%;
    height: 240px;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.blog-card:hover img {
    transform: scale(1.08);
}

.blog-content {
    padding: 25px;
    text-align: left;
}

.blog-content h3 {
    color: #2f5233;
    margin-bottom: 15px;
}

.blog-content p {
    color: #555;
    line-height: 1.7;
    margin-bottom: 20px;
}
/* ==========================
   CONTACT SECTION
========================== */

   .contact{
    padding:100px 0;
    background:#F9F9FB;
}

.contact-text{
    max-width:700px;
    margin:20px auto;
    text-align:center;
    color:var(--gray);
}

.contact-box{
    max-width:700px;
    margin:50px auto;
    background:#fff;
    padding:40px;
    border-radius:20px;
    box-shadow:var(--shadow-sm);
    text-align:center;
}

.contact-box h3{
    color:var(--primary);
    margin-bottom:15px;
}

.email-link{
    margin:20px 0;
    font-weight:600;
    color:var(--charcoal);
}

.follow-links{
    display:flex;
    justify-content:center;
    gap:15px;
    flex-wrap:wrap;
    margin-top:25px;
}

.follow-links a{
    text-decoration:none;
    background:var(--primary);
    color:#fff;
    padding:12px 20px;
    border-radius:30px;
    transition:0.3s ease;
}

.follow-links a:hover{
    transform:translateY(-3px);
}

.contact-closing{
    text-align:center;
    margin-top:40px;
}

.tea-icon{
    display:block;
    font-size:2rem;
    margin-bottom:10px;
}
.section-title{
    text-align:center;
    margin-bottom:50px;
}

.section-title h2{
    font-size:2.5rem;
    color:var(--charcoal);
    margin-bottom:15px;
}

.section-title p{
    color:var(--gray);
}





/* ==========================
   FOOTER
========================== */

footer {
    background: #4b2e2e;
    color: white;
    text-align: center;
    padding: 35px 20px;
}

footer p {
    margin: 10px 0;
    line-height: 1.6;
}
/* ==========================
   SHARE YOUR THOUGHTS
========================== */

.share {
    padding: 90px 10%;
    background: linear-gradient(180deg, #fffdfb, #fff4ea);
    text-align: center;
}

.share-container {
    max-width: 800px;
    margin: auto;
    background: #ffffff;
    padding: 50px 40px;
    border-radius: 20px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.08);
}

.share h2 {
    font-size: 2.6rem;
    color: #4b2e2e;
    margin-bottom: 20px;
}

.share-subtitle {
    max-width: 650px;
    margin: 0 auto 35px;
    color: #666;
    line-height: 1.8;
    font-size: 1.05rem;
}

.share-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.share-form input,
.share-form textarea {
    width: 100%;
    padding: 16px 20px;
    border: 2px solid #ececec;
    border-radius: 12px;
    font-size: 16px;
    background: #fafafa;
    transition: all .3s ease;
}

.share-form input::placeholder,
.share-form textarea::placeholder {
    color: #999;
}

.share-form input:focus,
.share-form textarea:focus {
    border-color: #d4a373;
    background: #fff;
    box-shadow: 0 0 15px rgba(212,163,115,.25);
    transform: translateY(-2px);
}

.share-form textarea {
    resize: vertical;
    min-height: 180px;
}
.anonymous-option {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.95rem;
    color: #555;
    margin-top: -5px;
}

.anonymous-option input {
    width: auto;
    cursor: pointer;
}
.share-form .btn {
    align-self: center;
    min-width: 230px;
}

.success-message {
    display: none;
    margin-top: 20px;
    padding: 16px;
    border-radius: 12px;
    background: #eaf8ec;
    color: #2f5233;
    font-weight: 600;
    line-height: 1.6;
}

.logo a {
    color: inherit;
    text-decoration: none;
}
.share-quote {
    font-style: italic;
    color: #8B5E3C;
    font-size: 1.1rem;
    margin: -5px auto 25px;
    max-width: 500px;
    line-height: 1.7;
}
.privacy-note{
    font-size: 0.95rem;
    color: #666;
    margin: 15px 0 25px;
    text-align: center;
    line-height: 1.6;
}

/* ==========================
   ARTICLE PAGE
========================== */

.article {
    max-width: 900px;
    margin: 120px auto 80px;
    padding: 0 20px;
    line-height: 1.9;
}

.article h1 {
    font-size: 2.8rem;
    color: #4b2e2e;
    margin-bottom: 25px;
}

.article h2 {
    color: #8B4513;
    margin-top: 35px;
    margin-bottom: 15px;
}

.article p {
    color: #555;
    margin-bottom: 20px;
    font-size: 1.05rem;
}
.article-image {
    width: 100%;
    max-height: 450px;
    object-fit: cover;
    border-radius: 15px;
    margin-bottom: 30px;
}
.article-meta {
    color: #777;
    font-size: 0.95rem;
    margin-bottom: 30px;
    font-style: italic;
}
.article-divider {
    border: none;
    height: 2px;
    background: #e8d8c4;
    margin: 30px 0;
}
/* ==========================
   SEARCH BOX
========================== */

.search-box {
    text-align: center;
    margin: 30px 0;
}

.search-box input {
    width: 60%;
    max-width: 500px;
    padding: 14px 20px;
    border: 2px solid #8B4513;
    border-radius: 30px;
    font-size: 1rem;
    outline: none;
    background: #fff;s
    color: #333;
    transition:
        border-color 0.3s ease,
        box-shadow 0.3s ease,
        transform 0.3s ease;
}

.search-box input::placeholder {
    color: #999;
    transition: color 0.3s ease;
}

.search-box input:focus {
    border-color: #d4a373;
    box-shadow: 0 0 15px rgba(212, 163, 115, 0.35);
    transform: scale(1.02);
}

.search-box input:focus::placeholder {
    color: #d4a373;
}
/* ==========================
   NO SEARCH RESULTS
========================== */

.no-results {
    display: none;
    text-align: center;
    font-size: 1.2rem;
    color: #8B4513;
    margin-top: 30px;
    font-weight: bold;
}
/* ==========================
   CATEGORY FILTERS
========================== */

.filter-buttons {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 30px;
}

.filter-btn {
    background: #fff;
    color: #8B4513;
    border: 2px solid #8B4513;
    padding: 10px 20px;
    border-radius: 25px;
    cursor: pointer;
    font-size: 1rem;
    transition: 0.3s ease;
}

.filter-btn:hover,
.filter-btn.active {
    background: #8B4513;
    color: #fff;
}
/* ==========================
   BLOG POST META
========================== */

.post-meta {
    font-size: 0.9rem;
    color: #777;
    margin: 8px 0 15px;
    font-style: italic;
}
/* ==========================
   CATEGORY BADGES
========================== */

.category {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
    color: #fff;
}

.health {
    background-color: #6B8E23;
}

.relationships {
    background-color: #B56576;
}

.growth {
    background-color: #C68B59;
}
/* ==========================
   ABOUT PAGE
========================== */

.about-hero {
    min-height: 80vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 100px 10%;
    background: #fdf8f3;
    text-align: center;
}

.about-content {
    max-width: 750px;
}

.about-content h1 {
    font-family: 'Merienda', cursive;
    font-size: 3rem;
    color: #6f4e37;
    margin-bottom: 20px;
}

.about-content h1 span {
    color: #b56576;
}

.about-content p {
    font-size: 1.15rem;
    line-height: 1.8;
    color: #555;
}
/* ==========================
   MY STORY
========================== */

.my-story {
    padding: 80px 10%;
    background: #ffffff;
}

.story-container {
    max-width: 800px;
    margin: auto;
}

.story-container h2 {
    font-family: 'Merienda', cursive;
    font-size: 2.5rem;
    color: #6f4e37;
    margin-bottom: 25px;
    text-align: center;
}

.story-container p {
    font-size: 1.1rem;
    line-height: 1.9;
    color: #555;
    margin-bottom: 20px;
}
/* ==========================
   WHAT YOU'LL FIND HERE
========================== */

.what-youll-find {
    padding: 80px 10%;
    background: #fdf8f3;
}

.find-container {
    max-width: 1100px;
    margin: auto;
}

.find-container h2 {
    text-align: center;
    font-family: 'Merienda', cursive;
    color: #6f4e37;
    font-size: 2.5rem;
    margin-bottom: 50px;
}

.find-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 25px;
}

.find-card {
    background: white;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
    transition: transform 0.3s ease;
}

.find-card:hover {
    transform: translateY(-8px);
}

.find-card h3 {
    color: #6f4e37;
    margin-bottom: 15px;
}

.find-card p {
    color: #555;
    line-height: 1.7;
}
/* ==========================
   JOIN ME
========================== */

.join-me {
    padding: 80px 10%;
    text-align: center;
    background: #fff;
}

.join-container {
    max-width: 750px;
    margin: auto;
}

.join-container h2 {
    font-family: 'Merienda', cursive;
    color: #6f4e37;
    font-size: 2.5rem;
    margin-bottom: 20px;
}

.join-container p {
    color: #555;
    line-height: 1.8;
    margin-bottom: 20px;
}
/* ==========================
   ABOUT PREVIEW
========================== */

.about-preview {
    background: #fdf8f3;
    padding: 80px 10%;
    text-align: center;
}

.about-preview-content {
    max-width: 750px;
    margin: auto;
}

.about-preview-content h2 {
    font-family: 'Merienda', cursive;
    font-size: 2.5rem;
    color: #6f4e37;
    margin-bottom: 20px;
}

.about-preview-content p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #555;
    margin-bottom: 20px;
}/* ==========================
   FOOTER
========================== */

.footer{
    background:#4b2e2b;
    color:#fff;
    padding:60px 10%;
    margin-top:80px;
}

.footer-container{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:40px;
}

.footer h2,
.footer h3{
    margin-bottom:15px;
}

.footer p{
    line-height:1.8;
}

.footer-links ul{
    list-style:none;
    padding:0;
}

.footer-links li{
    margin-bottom:10px;
}

.footer a{
    color:#fff;
    text-decoration:none;
    transition:.3s;
}

.footer a:hover{
    color:#d4a373;
    padding-left:5px;
}

.social-icons {
    display: flex;
    gap: 15px;
    margin-top: 15px;
}

.social-icons a {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-decoration: none;
    font-size: 20px;
    transition: transform 0.3s ease,
                background-color 0.3s ease,
                color 0.3s ease,
                box-shadow 0.3s ease;
}

.social-icons a:hover {
    background: #d4a373;
    color: #5c4033;
    transform: translateY(-6px) scale(1.08);
    box-shadow: 0 8px 20px rgba(212, 163, 115, 0.4);
}

.footer-bottom{
    border-top:1px solid rgba(255,255,255,.2);
    margin-top:40px;
    padding-top:20px;
    text-align:center;
    font-size:.9rem;
}
.footer-bottom strong{
    color:#8fd694;
}
/* ==========================
   BACK TO TOP BUTTON
========================== */

#backToTop{
    position:fixed;
    bottom:25px;
    right:25px;
    width:50px;
    height:50px;
    border:none;
    border-radius:50%;
    background:#6f4e37;
    color:#fff;
    font-size:22px;
    cursor:pointer;
    display:block;
    box-shadow:0 5px 15px rgba(0,0,0,.3);
    transition:.3s;
    z-index:1000;
}

#backToTop:hover{
    background:#d4a373;
    transform:translateY(-5px) scale(1.08);
}
button,
.btn,
.hero-btn,
.blog-btn{
    transition:all .3s ease;
}

button:hover,
.btn:hover,
.hero-btn:hover,
.blog-btn:hover{
    transform:translateY(-3px);
}
section{
    scroll-margin-top:80px;
}
/* ==========================
   QUOTE OF THE DAY
========================== */

.quote-section{
    padding:80px 10%;
    background:#fdf8f3;
    text-align:center;
}

.quote-container{
    max-width:800px;
    margin:auto;
}

.quote-section h2{
    color:#6f4e37;
    margin-bottom:25px;
}

.quote-section blockquote{
    font-size:1.5rem;
    font-style:italic;
    color:#444;
    line-height:1.8;
}

.quote-author{
    margin-top:20px;
    color:#6f4e37;
    font-weight:bold;
}
/* ===========================
   Newsletter Section
=========================== */

.newsletter{
    background:#6f4e37;
    color:#fff;
    padding:80px 10%;
    text-align:center;
}

.newsletter-container{
    max-width:700px;
    margin:auto;
}

.newsletter h2{
    font-size:2.3rem;
    margin-bottom:15px;
}

.newsletter p{
    line-height:1.8;
    margin-bottom:30px;
}

#newsletterForm{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:15px;
}

#newsletterForm input{
    flex:1;
    min-width:260px;
    padding:15px;
    border:none;
    border-radius:50px;
    outline:none;
    font-size:1rem;
}

#newsletterForm button{
    background:#d4a373;
    color:#fff;
    border:none;
    padding:15px 30px;
    border-radius:50px;
    cursor:pointer;
    transition:.3s;
    font-size:1rem;
}

#newsletterForm button:hover{
    background:#bc8a5f;
    transform:translateY(-2px);
}

#newsletter-message{
    margin-top:20px;
    font-weight:bold;
}
/* ==========================
   Categories Section
========================== */

.categories{
    padding:80px 10%;
    background:#faf7f2;
    text-align:center;
}

.categories-container{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:30px;
    margin-top:50px;
}

.category-card{
    background:#fff;
    padding:35px 25px;
    border-radius:18px;
    box-shadow:0 10px 25px rgba(0,0,0,.08);
    transition:0.3s;
}

.category-card:hover{
    transform:translateY(-8px);
    box-shadow:0 15px 35px rgba(0,0,0,.15);
}

.category-card span{
    font-size:3rem;
}

.category-card h3{
    margin:20px 0 15px;
    color:#6f4e37;
}

.category-card p{
    color:#666;
    line-height:1.7;
}
/* ==========================
   Meet the Founder
========================== */

.founder{
    padding:80px 10%;
    background:#fff;
}

.founder-container{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:50px;
    flex-wrap:wrap;
}

.founder-image{
    flex:1;
    text-align:center;
}

.founder-image img{
    width:320px;
    max-width:100%;
    border-radius:20px;
    box-shadow:0 12px 30px rgba(0,0,0,.15);
}

.founder-content{
    flex:1;
}

.founder-content h2{
    color:#6f4e37;
    font-size:2.2rem;
    margin-bottom:15px;
}

.founder-content h3{
    margin-bottom:10px;
}

.role{
    color:#b07d52;
    font-weight:bold;
    margin-bottom:20px;
}

.founder-content p{
    line-height:1.8;
    color:#555;
    margin-bottom:25px;
}

.founder-btn{
    display:inline-block;
    background:#6f4e37;
    color:#fff;
    text-decoration:none;
    padding:14px 28px;
    border-radius:30px;
    transition:.3s;
}

.founder-btn:hover{
    background:#8b5e3c;
}
/*==========================
   Testimonials
===========================*/

.testimonials{
    padding:80px 10%;
    background:#f9f5f0;
    text-align:center;
}

.testimonial-container{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:30px;
    margin-top:50px;
}

.testimonial-card{
    background:#fff;
    padding:30px;
    border-radius:20px;
    box-shadow:0 10px 25px rgba(0,0,0,.08);
    transition:.3s;
}

.testimonial-card:hover{
    transform:translateY(-8px);
    box-shadow:0 15px 35px rgba(0,0,0,.15);
}

.stars{
    font-size:1.2rem;
    margin-bottom:20px;
}

.testimonial-card p{
    line-height:1.8;
    color:#555;
    font-style:italic;
    margin-bottom:20px;
}

.testimonial-card h4{
    color:#6f4e37;
}
/* ==========================
   HERO ANIMATIONS
========================== */

.hero-text {
    opacity: 0;
    transform: translateY(40px);
    animation: fadeUp 1s ease forwards;
    animation-delay: 0.3s;
}

.hero-image {
    opacity: 0;
    transform: translateX(40px);
    animation: slideLeft 1s ease forwards;
    animation-delay: 0.6s;
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideLeft {
    from {
        opacity: 0;
        transform: translateX(40px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}
.footer-bottom {
    animation: fadeUpFooter 1s ease;
}

@keyframes fadeUpFooter {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* ==========================
   TYPING TEXT
========================== */

.typing-text {
    font-size: 1.2rem;
    color: #d4a373;
    font-weight: 600;
    margin: 20px 0;
    min-height: 30px;
}

#typing {
    border-right: 2px solid #d4a373;
    padding-right: 3px;
    animation: blinkCursor 0.8s infinite;
}

@keyframes blinkCursor {
    50% {
        border-color: transparent;
    }
}
/* ==========================
   SCROLL PROGRESS BAR
========================== */

#progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 4px;
    background: linear-gradient(90deg, #2f5233, #d4a373);
    z-index: 9999;
    transition: width 0.1s linear;
}
/* ==========================
   WELCOME TOAST
========================== */

#welcome-toast {
    position: fixed;
    bottom: 25px;
    right: -400px;
    max-width: 320px;
    background: #2f5233;
    color: white;
    padding: 15px 20px;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    transition: right 0.6s ease;
    z-index: 9999;
    line-height: 1.5;
}

#welcome-toast.show {
    right: 25px;
}
/* ==========================
   ACCESSIBILITY
========================== */

a:focus-visible,
button:focus-visible,
input:focus-visible {
    outline: 3px solid #d4a373;
    outline-offset: 3px;
    border-radius: 4px;
}
section{
    position:relative;
}

section:not(:last-child){
    margin-bottom:40px;
}
.hero-image img,
.about-image img,
.founder-image img,
.blog-card img{
    transition: transform 0.4s ease;
}

.hero-image img:hover,
.about-image img:hover,
.founder-image img:hover,
.blog-card img:hover{
    transform: scale(1.02);
}
/* ==========================
   STORY PAGE
========================== */

.story-hero{

    min-height:70vh;

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

    padding:120px 20px;

    background:linear-gradient(
    rgba(245,243,238,.92),
    rgba(245,243,238,.92)),
    url("images/tea-bg.jpg");

    background-size:cover;

    background-position:center;

}

.story-content{

    max-width:800px;

}

.story-subtitle{

    color:#8B5E3C;

    font-size:1.2rem;

    letter-spacing:2px;

    text-transform:uppercase;

    margin-bottom:15px;

    font-weight:600;

}

.story-content h1{

    font-size:3.3rem;

    color:#2F4F4F;

    margin-bottom:25px;

    font-family:'Merienda',cursive;

}

.story-content p{

    font-size:1.2rem;

    line-height:1.7;

    color:#555;

}
.story-section{

    padding:90px 20px;

}

.story-container{

    max-width:900px;

    margin:auto;

}

.section-tag{

    display:inline-block;

    background:#E8F5E9;

    color:#2F4F4F;

    padding:8px 20px;

    border-radius:30px;

    margin-bottom:20px;

    font-weight:600;

}

.story-section h2{

    font-size:2.2rem;

    margin-bottom:25px;

    color:#2F4F4F;

    font-family:'Merienda',cursive;

}

.story-section p{

    line-height:1.7;

    margin-bottom:20px;

    color:#555;

    font-size:1.08rem;

}

.alt-bg{

    background:#FAFAF7;

}
.story-quote{

    padding:70px 20px;

    text-align:center;

    background:#F8F5F0;

}

.story-quote blockquote{

    max-width:800px;

    margin:auto;

    font-size:1.7rem;

    font-style:italic;

    color:#8B5E3C;

    line-height:1.8;

    font-family:'Merienda',cursive;

}
.letter-section{

    padding:100px 20px;

    background:#FFFDF8;

}

.letter-card{

    max-width:850px;

    margin:auto;

    background:white;

    padding:60px;

    border-radius:20px;

    box-shadow:0 15px 40px rgba(0,0,0,.08);

}

.letter-card h2{

    text-align:center;

    margin-bottom:40px;

    color:#2F4F4F;

    font-family:'Merienda',cursive;

}

.letter-card p{

    line-height:1.6;

    margin-bottom:15px;

    color:#555;

}

.signature{

    margin-top:50px;

    font-size:1.15rem;

}
.story-section{

    transition:.4s ease;

}

.story-section:hover{

    transform:translateY(-5px);

}
.reveal{

    opacity:0;

    transform:translateY(60px);

    transition:all .8s ease;

}

.reveal.active{

    opacity:1;

    transform:translateY(0);

}
/* Reading Progress Bar */

#progress-bar{

    position:fixed;

    top:0;

    left:0;

    width:0%;

    height:5px;

    background:#8B5E3C;

    z-index:9999;

    transition:width .1s linear;

}
.logo a{

    text-decoration:none;

    color:inherit;

    display:flex;

    align-items:center;

    gap:10px;

}
.cup{

    transition:transform .3s ease;

}

.logo:hover .cup{

    transform:rotate(-10deg);

}
/* =========================
   BLOG ARTICLE PAGE
========================= */

.blog-post {
    padding: 80px 0 100px;
    background: #fffaf7;
}

.blog-post-header {
    max-width: 850px;
    margin: 0 auto 50px;
    text-align: center;
}

.blog-post-header .blog-category {
    color: #8b5e3c;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 15px;
}

.blog-post-header h1 {
    font-family: "Merienda", cursive;
    color: #3d2b1f;
    font-size: 3rem;
    line-height: 1.3;
    margin-bottom: 20px;
}

.blog-date {
    color: #888;
    font-size: 0.9rem;
}

.blog-post-content {
    max-width: 800px;
    margin: auto;
    background: #ffffff;
    padding: 50px;
    border-radius: 24px;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.06);
}

.blog-post-content p {
    color: #555;
    font-size: 1.05rem;
    line-height: 1.9;
    margin-bottom: 25px;
}

.blog-post-content em {
    color: #6f4e37;
}

.blog-highlight {
    margin: 40px 0;
    padding: 25px 30px;
    background: #f3e8dc;
    border-left: 5px solid #8b5e3c;
    border-radius: 12px;
}

.blog-highlight p {
    margin: 0;
    color: #4a3428;
    font-family: "Merienda", cursive;
    font-size: 1.2rem;
}

.tea-ending {
    font-family: "Merienda", cursive;
    color: #6f4e37 !important;
    font-size: 1.3rem !important;
    text-align: center;
}

.back-to-blog {
    text-align: center;
    margin-top: 40px;
}

.back-to-blog .btn {
    display: inline-block;
    text-decoration: none;
    background: #6f4e37;
    color: #fff;
    padding: 13px 28px;
    border-radius: 30px;
    transition: 0.3s ease;
}

.back-to-blog .btn:hover {
    background: #4e3526;
    transform: translateY(-3px);
}


/* =========================
   BLOG ARTICLE MOBILE
========================= */

@media (max-width: 768px) {

    .blog-post {
        padding: 50px 0 70px;
    }

    .blog-post-header {
        margin-bottom: 35px;
    }

    .blog-post-header h1 {
        font-size: 2rem;
    }

    .blog-post-content {
        padding: 30px 22px;
        border-radius: 18px;
    }

    .blog-post-content p {
        font-size: 1rem;
        line-height: 1.8;
    }

    .blog-highlight {
        padding: 20px;
    }

    .blog-highlight p {
        font-size: 1.05rem;
    }

}