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

body {
    background-color: #f7f4ec;
    color: #4d5743;
    font-family: Georgia, "Times New Roman", serif;
}

header {
    padding: 25px 7%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #d6c6a0;
}

.logo {
    font-size: 26px;
    letter-spacing: 5px;
    color: #4d5743;
}

nav a {
    color: #4d5743;
    text-decoration: none;
    margin-left: 25px;
    font-size: 14px;
    letter-spacing: 1px;
}

.hero {
    min-height: 75vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 60px 20px;
}

.hero h1 {
    font-size: clamp(55px, 10vw, 110px);
    font-weight: normal;
    letter-spacing: 12px;
    color: #4d5743;
}

.hero .tagline {
    color: #a48648;
    letter-spacing: 6px;
    font-size: 15px;
    margin-top: 15px;
    text-transform: uppercase;
}

.hero p {
    max-width: 600px;
    margin: 35px auto;
    line-height: 1.8;
    font-size: 18px;
    color: #5f6558;
}

.button {
    display: inline-block;
    padding: 15px 30px;
    border: 1px solid #a48648;
    color: #4d5743;
    text-decoration: none;
    letter-spacing: 2px;
    font-size: 13px;
    transition: 0.3s;
}

.button:hover {
    background-color: #4d5743;
    color: #f7f4ec;
}

.explore {
    padding: 80px 7%;
    text-align: center;
}

.explore h2 {
    font-size: 36px;
    font-weight: normal;
    margin-bottom: 15px;
}

.explore-intro {
    margin-bottom: 50px;
    color: #777b70;
}

.categories {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

.category {
    min-height: 220px;
    padding: 40px 25px;
    border: 1px solid #ded7c7;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: 0.3s;
}

.category:hover {
    transform: translateY(-5px);
    border-color: #a48648;
}

.category h3 {
    font-size: 23px;
    font-weight: normal;
    margin-bottom: 12px;
}

.category p {
    color: #777b70;
    line-height: 1.6;
    margin-bottom: 20px;
}

.category a {
    color: #a48648;
    text-decoration: none;
    letter-spacing: 2px;
    font-size: 12px;
}

footer {
    text-align: center;
    padding: 50px 20px;
    border-top: 1px solid #d6c6a0;
    color: #777b70;
}

footer .footer-logo {
    letter-spacing: 6px;
    color: #4d5743;
    margin-bottom: 10px;
}

@media (max-width: 800px) {
    header {
        flex-direction: column;
        gap: 20px;
    }

    nav a {
        margin: 0 7px;
    }

    .categories {
        grid-template-columns: 1fr;
    }
}/* =========================
   ADDY'S WORLD
   CHILDREN'S BOOKS
   ========================= */

.books-hero {
    min-height: 70vh;
    padding: 100px 8%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative;
    overflow: hidden;

   background-color: #f8dc86;
}
.books-hero .button {
    background-color: #88a66f;
    color: white;
    border: none;
    border-radius: 40px;
    padding: 16px 32px;
    font-family: "Trebuchet MS", Arial, sans-serif;
    letter-spacing: 2px;
    transition: 0.3s ease;
}

.books-hero .button:hover {
    background-color: #6f8e5b;
    transform: translateY(-2px);
}

/* Decorative clouds */

.books-hero::before {
    content: "☁";
    position: absolute;
    left: 5%;
    top: 18%;
    font-size: 90px;
    color: #fff3cf;
    opacity: 0.9;
}

.books-hero::after {
    content: "☁";
    position: absolute;
    right: 5%;
    top: 25%;
    font-size: 110px;
    color: #fff3cf;
    opacity: 0.9;
}

.books-hero > p:first-child {
    color: #55715a;
    letter-spacing: 4px;
    font-size: 13px;
    margin-bottom: 20px;
    text-transform: uppercase;
    position: relative;
    z-index: 2;
}

.books-hero h1 {
    font-family: "Trebuchet MS", Arial, sans-serif;
    font-size: clamp(55px, 8vw, 95px);
    font-weight: bold;
    line-height: 0.95;
    letter-spacing: 2px;
    color: #527052;
    margin-bottom: 15px;
    position: relative;
    z-index: 2;
}
.books-hero .welcome {
    color: #41473d;
    font-family: "Trebuchet MS", Arial, sans-serif;
    font-size: 18px;
    letter-spacing: 5px;
    margin-bottom: 10px;
}

.hero-stars {
    font-size: 28px;
    color: #e98f83;
    margin-bottom: 25px;
    letter-spacing: 8px;
}

.books-hero p:last-child {
    max-width: 650px;
    margin: 0 auto 30px;
    color: #454d42;
    font-family: "Trebuchet MS", Arial, sans-serif;
    font-size: 19px;
    line-height: 1.7;
    position: relative;
    z-index: 2;
}


/* =========================
   ADDY INTRO
   ========================= */

.book-intro {
    padding: 90px 8%;
    text-align: center;
    position: relative;
    background-color: #fff7e3;
    overflow: hidden;
}

.book-intro::before {
    content: "♥";
    position: absolute;
    left: 12%;
    top: 35px;
    font-size: 45px;
    color: #f29a8f;
}

.book-intro::after {
    content: "♥";
    position: absolute;
    right: 12%;
    top: 45px;
    font-size: 40px;
    color: #f29a8f;
}

.book-intro h2 {
    font-family: "Trebuchet MS", Arial, sans-serif;
    font-size: clamp(42px, 6vw, 65px);
    font-weight: bold;
    color: #527052;
    margin-bottom: 20px;
}

.book-intro p {
    max-width: 680px;
    margin: 0 auto 35px;
    color: #555c52;
    line-height: 1.8;
    font-family: "Trebuchet MS", Arial, sans-serif;
    font-size: 18px;
}


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

.book-intro .button {
    background-color: #88a66f;
    color: white;
    border: none;
    border-radius: 40px;
    padding: 16px 32px;
}

.book-intro .button:hover {
    background-color: #6f8e5b;
    color: white;
}


/* =========================
   FEATURED BOOKS
   ========================= */

.featured-books {
    padding: 90px 8%;
    text-align: center;
    background-color: #f9dc82;
    position: relative;
}

.featured-books h2 {
    font-family: "Trebuchet MS", Arial, sans-serif;
    font-size: clamp(42px, 6vw, 60px);
    font-weight: bold;
    color: #41473d;
    margin-bottom: 55px;
}


/* Book cards */

.book-grid {
    max-width: 1050px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 45px;
}

.book-card {
    background-color: #fff8e9;
    padding: 25px;
    border-radius: 28px;
    box-shadow: 0 12px 25px rgba(80, 90, 60, 0.12);
    transition: transform 0.3s ease;
}

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


/* Temporary book-cover area */

.book-placeholder {
    height: 360px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    background-color: #dce6cf;
    color: #64765a;

    border: 2px dashed #a8b99b;
    border-radius: 20px;
    margin-bottom: 25px;

    font-family: "Trebuchet MS", Arial, sans-serif;
    letter-spacing: 2px;
    font-size: 15px;
}


/* Book titles */

.book-card h3 {
    font-family: "Trebuchet MS", Arial, sans-serif;
    font-size: 28px;
    font-weight: bold;
    color: #527052;
    margin-bottom: 12px;
}

.book-card p {
    color: #555c52;
    line-height: 1.7;
    margin-bottom: 22px;
    font-family: "Trebuchet MS", Arial, sans-serif;
}

.book-card a {
    display: inline-block;
    background-color: #f29a8f;
    color: white;
    text-decoration: none;
    padding: 13px 25px;
    border-radius: 30px;
    letter-spacing: 2px;
    font-size: 12px;
    font-family: Arial, sans-serif;
}

.book-card a:hover {
    background-color: #dd8177;
}


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

@media (max-width: 700px) {

    .books-hero {
        min-height: 65vh;
        padding: 80px 25px;
    }

    .books-hero h1 {
        font-size: 55px;
    }

    .book-grid {
        grid-template-columns: 1fr;
    }

    .book-placeholder {
        height: 350px;
    }

    .book-intro::before {
        left: 5%;
    }

    .book-intro::after {
        right: 5%;
    }
}
/* =========================
   STORIES FOR LITTLE HEARTS
   ========================= */

.little-hearts {
    position: relative;
    padding: 95px 8%;
    text-align: center;
    background-color: #fff7e3;
    overflow: hidden;
}

.little-hearts h2 {
    max-width: 850px;
    margin: 0 auto 20px;
    font-family: "Trebuchet MS", Arial, sans-serif;
    font-size: clamp(40px, 6vw, 65px);
    font-weight: bold;
    color: #e58c83;
    line-height: 1.1;
}

.little-hearts p {
    max-width: 700px;
    margin: 0 auto;
    font-family: "Trebuchet MS", Arial, sans-serif;
    font-size: 18px;
    line-height: 1.8;
    color: #50574c;
}

.heart-decoration {
    position: absolute;
    left: 12%;
    top: 50%;
    transform: translateY(-50%);
    font-size: 48px;
    color: #f29a8f;
}

.right-heart {
    left: auto;
    right: 12%;
}

@media (max-width: 700px) {

    .little-hearts {
        padding: 75px 25px;
    }

    .heart-decoration {
        left: 5%;
        font-size: 30px;
    }

    .right-heart {
        right: 5%;
        left: auto;
    }

}
/* =========================
   BOOK SECTION DECORATIONS
   ========================= */

.book-decorations {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 25px;
    margin-bottom: 12px;
}

.book-decorations span {
    font-size: 28px;
}

.book-decorations span:nth-child(1) {
    color: #e58c83;
}

.book-decorations span:nth-child(2) {
    color: #88a66f;
    font-size: 34px;
}

.book-decorations span:nth-child(3) {
    color: #9b82b5;
}
/* =========================
   EVERY CHILD HAS A STORY
   ========================= */

.little-hearts-message {
    padding: 90px 8%;
    text-align: center;
    background-color: #cfdab9;
    position: relative;
}

.little-hearts-message h2 {
    margin-bottom: 15px;
    font-family: "Trebuchet MS", Arial, sans-serif;
    font-size: clamp(35px, 5vw, 55px);
    font-weight: bold;
    color: #4f654b;
}

.little-hearts-message p {
    margin-bottom: 30px;
    font-family: "Trebuchet MS", Arial, sans-serif;
    font-size: 20px;
    color: #53604f;
}

.message-flowers {
    margin-bottom: 15px;
    font-size: 30px;
    color: #e58c83;
    letter-spacing: 12px;
}

.parent-button {
    display: inline-block;
    padding: 15px 28px;
    border-radius: 35px;
    background-color: #f29a8f;
    color: white;
    text-decoration: none;
    font-family: "Trebuchet MS", Arial, sans-serif;
    font-size: 12px;
    letter-spacing: 1.5px;
    transition: 0.3s ease;
}

.parent-button:hover {
    background-color: #dd8177;
    transform: translateY(-3px);
}

/* =========================
   JOURNALS
   ========================= */

.journal-hero {
    min-height: 70vh;
    padding: 100px 8%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    align-items: center;
    background-color: #ffffff;
}

.journal-hero > p:first-child {
    color: #9a7b43;
    letter-spacing: 4px;
    font-size: 12px;
    margin-bottom: 25px;
    text-transform: uppercase;
}

.journal-hero h1 {
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(48px, 7vw, 85px);
    font-weight: normal;
    line-height: 1.05;
    color: #4e5d49;
    margin-bottom: 30px;
}

.journal-hero p:last-child {
    max-width: 600px;
    font-size: 19px;
    line-height: 1.8;
    color: #62675d;
}

.journal-intro {
    padding: 100px 8%;
    text-align: center;
    background-color: #ffffff;
}

.journal-intro h2 {
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(40px, 6vw, 60px);
    font-weight: normal;
    color: #4e5d49;
    margin-bottom: 20px;
}

.journal-intro p {
    max-width: 650px;
    margin: 0 auto;
    font-size: 18px;
    line-height: 1.8;
    color: #666b61;
}

@media (max-width: 700px) {

    .journal-hero {
        min-height: 65vh;
        padding: 80px 25px;
    }

    .journal-hero h1 {
        font-size: 52px;
    }

}
/* Journal Collection */

.journal-collection {
    padding: 110px 8%;
    text-align: center;
    background-color: #f7f5ee;
}

.collection-label {
    color: #9a7b43;
    letter-spacing: 4px;
    font-size: 12px;
    margin-bottom: 20px;
}

.journal-collection h2 {
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(42px, 6vw, 65px);
    font-weight: normal;
    color: #4e5d49;
    margin-bottom: 25px;
}

.collection-intro {
    max-width: 600px;
    margin: 0 auto;
    font-size: 18px;
    line-height: 1.8;
    color: #666b61;
}
/* Journal Products */

.journal-products {
    padding: 100px 8%;
    background-color: #ffffff;
}

.journal-card {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;
    align-items: center;
}

.journal-placeholder {
    height: 520px;
    background-color: #eee9dc;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.journal-placeholder span {
    font-size: 30px;
    color: #a48648;
    margin-bottom: 30px;
}

.journal-placeholder strong {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 38px;
    line-height: 1.2;
    font-weight: normal;
    color: #4e5d49;
}

.journal-placeholder small {
    margin-top: 20px;
    letter-spacing: 4px;
    color: #9a7b43;
}

.journal-category {
    color: #9a7b43;
    letter-spacing: 3px;
    font-size: 11px;
    margin-bottom: 20px;
}

.journal-info h2 {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 48px;
    font-weight: normal;
    color: #4e5d49;
    margin-bottom: 25px;
}

.journal-info > p:not(.journal-category):not(.journal-price) {
    color: #666b61;
    font-size: 17px;
    line-height: 1.8;
    margin-bottom: 30px;
}

.journal-price {
    color: #4e5d49;
    letter-spacing: 2px;
    font-size: 13px;
    margin-bottom: 25px;
}

.journal-button {
    display: inline-block;
    padding: 14px 28px;
    border: 1px solid #4e5d49;
    color: #4e5d49;
    text-decoration: none;
    letter-spacing: 2px;
    font-size: 12px;
}

.journal-button:hover {
    background-color: #4e5d49;
    color: #ffffff;
}

@media (max-width: 700px) {

    .journal-card {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .journal-placeholder {
        height: 400px;
    }

    .journal-info h2 {
        font-size: 40px;
    }

}
/* Journal Message */

.journal-message {
    padding: 120px 8%;
    text-align: center;
    background-color: #4e5d49;
}

.message-label {
    color: #d2b56b;
    letter-spacing: 4px;
    font-size: 11px;
    margin-bottom: 30px;
}

.journal-message h2 {
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(45px, 6vw, 70px);
    line-height: 1.1;
    font-weight: normal;
    color: #ffffff;
    margin-bottom: 30px;
}

.journal-message > p:not(.message-label) {
    max-width: 650px;
    margin: 0 auto;
    color: #f1eee6;
    font-size: 18px;
    line-height: 1.9;
}

.message-symbol {
    margin-top: 45px;
    color: #d2b56b;
    font-size: 25px;
}
/* What's Inside */

.journal-inside {
    padding: 110px 8%;
    text-align: center;
    background-color: #ffffff;
}

.inside-label {
    color: #9a7b43;
    letter-spacing: 4px;
    font-size: 11px;
    margin-bottom: 20px;
}

.journal-inside h2 {
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(42px, 6vw, 62px);
    font-weight: normal;
    color: #4e5d49;
    margin-bottom: 25px;
}

.journal-inside > p {
    max-width: 650px;
    margin: 0 auto 70px;
    color: #666b61;
    font-size: 18px;
    line-height: 1.8;
}

.inside-points {
    max-width: 1000px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 50px;
}

.inside-points span {
    color: #a48648;
    letter-spacing: 3px;
    font-size: 12px;
}

.inside-points h3 {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 30px;
    font-weight: normal;
    color: #4e5d49;
    margin: 15px 0;
}

.inside-points p {
    color: #666b61;
    line-height: 1.7;
    font-size: 16px;
}

@media (max-width: 700px) {

    .inside-points {
        grid-template-columns: 1fr;
        gap: 45px;
    }

}
/* =========================
   FAITH
   ========================= */

.faith-hero {
    min-height: 72vh;
    padding: 100px 8%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: #f3f0e7;
}

.faith-label {
    color: #9a7b43;
    letter-spacing: 4px;
    font-size: 11px;
    margin-bottom: 25px;
}

.faith-hero h1 {
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(55px, 8vw, 95px);
    font-weight: normal;
    line-height: 1.05;
    color: #4e5d49;
    margin-bottom: 30px;
}

.faith-hero > p:last-child {
    max-width: 600px;
    color: #666b61;
    font-size: 19px;
    line-height: 1.8;
}


/* Faith introduction */

.faith-intro {
    padding: 120px 8%;
    text-align: center;
    background-color: #ffffff;
}

.faith-small-label {
    color: #9a7b43;
    letter-spacing: 4px;
    font-size: 11px;
    margin-bottom: 25px;
}

.faith-intro h2 {
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(45px, 6vw, 68px);
    font-weight: normal;
    line-height: 1.1;
    color: #4e5d49;
    margin-bottom: 30px;
}

.faith-intro > p:last-child {
    max-width: 650px;
    margin: 0 auto;
    color: #666b61;
    font-size: 18px;
    line-height: 1.9;
}


@media (max-width: 700px) {

    .faith-hero {
        min-height: 65vh;
        padding: 80px 25px;
    }

    .faith-hero h1 {
        font-size: 55px;
    }

}
/* Faith Explore */

.faith-explore {
    padding: 120px 8%;
    background-color: #f7f5ee;
    text-align: center;
}

.explore-label {
    color: #9a7b43;
    letter-spacing: 4px;
    font-size: 11px;
    margin-bottom: 20px;
}

.faith-explore h2 {
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(45px, 6vw, 65px);
    font-weight: normal;
    color: #4e5d49;
    margin-bottom: 70px;
}

.faith-cards {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.faith-card {
    padding: 45px 35px;
    background-color: #ffffff;
    text-align: left;
    border-top: 2px solid #a48648;
}

.faith-card > span {
    color: #a48648;
    letter-spacing: 3px;
    font-size: 11px;
}

.faith-card h3 {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 30px;
    font-weight: normal;
    color: #4e5d49;
    margin: 20px 0;
}

.faith-card p {
    color: #666b61;
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 30px;
}

.faith-card a {
    color: #4e5d49;
    text-decoration: none;
    font-size: 11px;
    letter-spacing: 2px;
}

.faith-card a:hover {
    color: #9a7b43;
}

@media (max-width: 700px) {

    .faith-cards {
        grid-template-columns: 1fr;
    }

}
/* =========================
   BLOG
   ========================= */

.blog-hero {
    min-height: 72vh;
    padding: 100px 8%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: #ffffff;
}

.blog-label {
    color: #9a7b43;
    letter-spacing: 4px;
    font-size: 11px;
    margin-bottom: 30px;
}

.blog-hero h1 {
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(60px, 9vw, 110px);
    font-weight: normal;
    line-height: 0.95;
    color: #4e5d49;
    margin-bottom: 40px;
}

.blog-hero > p:last-child {
    max-width: 560px;
    color: #666b61;
    font-size: 19px;
    line-height: 1.8;
}


/* Blog introduction */

.blog-intro {
    padding: 120px 8%;
    text-align: center;
    background-color: #f3f0e7;
}

.blog-small-label {
    color: #9a7b43;
    letter-spacing: 4px;
    font-size: 11px;
    margin-bottom: 25px;
}

.blog-intro h2 {
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(48px, 7vw, 75px);
    font-weight: normal;
    line-height: 1.05;
    color: #4e5d49;
    margin-bottom: 30px;
}

.blog-intro > p:last-child {
    max-width: 650px;
    margin: 0 auto;
    color: #666b61;
    font-size: 18px;
    line-height: 1.9;
}


@media (max-width: 700px) {

    .blog-hero {
        min-height: 65vh;
        padding: 80px 25px;
    }

    .blog-hero h1 {
        font-size: 60px;
    }

}
/* =========================
   BLOG POSTS
   ========================= */

.featured-posts {
    padding: 120px 8%;
    background-color: #ffffff;
    text-align: center;
}

.posts-label {
    color: #9a7b43;
    letter-spacing: 4px;
    font-size: 11px;
    margin-bottom: 20px;
}

.featured-posts h2 {
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(45px, 6vw, 65px);
    font-weight: normal;
    color: #4e5d49;
    margin-bottom: 70px;
}

.post-grid {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.post-card {
    background-color: #f7f5ee;
    text-align: left;
}

.post-placeholder {
    height: 260px;
    background-color: #eee9dc;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.post-placeholder span {
    color: #a48648;
    font-size: 28px;
    margin-bottom: 20px;
}

.post-placeholder small {
    color: #4e5d49;
    letter-spacing: 3px;
    font-size: 10px;
}

.post-content {
    padding: 30px;
}

.post-content > p:first-child {
    color: #9a7b43;
    letter-spacing: 2px;
    font-size: 10px;
}

.post-content h3 {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 27px;
    font-weight: normal;
    line-height: 1.2;
    color: #4e5d49;
    margin: 15px 0;
}

.post-content p:not(:first-child) {
    color: #666b61;
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 25px;
}

.post-content a {
    color: #4e5d49;
    text-decoration: none;
    letter-spacing: 2px;
    font-size: 10px;
}

.post-content a:hover {
    color: #9a7b43;
}

@media (max-width: 700px) {

    .post-grid {
        grid-template-columns: 1fr;
    }

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

.article-page {
    background-color: #ffffff;
}

.article-header {
    padding: 120px 8% 90px;
    text-align: center;
    background-color: #f3f0e7;
}

.article-category {
    color: #9a7b43;
    letter-spacing: 4px;
    font-size: 11px;
    margin-bottom: 25px;
}

.article-header h1 {
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(55px, 8vw, 90px);
    font-weight: normal;
    line-height: 1;
    color: #4e5d49;
    margin-bottom: 30px;
}

.article-subtitle {
    max-width: 650px;
    margin: 0 auto;
    color: #666b61;
    font-size: 19px;
    line-height: 1.8;
}

.article-body {
    max-width: 760px;
    margin: 0 auto;
    padding: 100px 25px 120px;
}

.article-body > p {
    color: #4f534c;
    font-size: 18px;
    line-height: 2;
    margin-bottom: 30px;
}

.article-body h2 {
    font-family: Georgia, "Times New Roman", serif;
    color: #4e5d49;
    font-size: 40px;
    font-weight: normal;
    margin: 65px 0 25px;
}

.scripture {
    margin: 60px 0;
    padding: 45px;
    background-color: #f7f5ee;
    border-left: 3px solid #a48648;
}

.scripture p {
    font-family: Georgia, "Times New Roman", serif;
    color: #4e5d49;
    font-size: 22px;
    line-height: 1.8;
    font-style: italic;
    margin-bottom: 20px;
}

.scripture span {
    color: #9a7b43;
    letter-spacing: 2px;
    font-size: 12px;
}

.article-ending {
    margin-top: 80px;
    padding: 60px 30px;
    text-align: center;
    background-color: #4e5d49;
}

.article-ending p {
    font-family: Georgia, "Times New Roman", serif;
    color: #ffffff;
    font-size: 25px;
    line-height: 1.7;
}

.article-ending span {
    display: block;
    margin-top: 30px;
    color: #d2b56b;
    font-size: 25px;
}


@media (max-width: 700px) {

    .article-header {
        padding: 90px 25px 70px;
    }

    .article-header h1 {
        font-size: 55px;
    }

    .article-body {
        padding: 70px 25px 90px;
    }

    .scripture {
        padding: 30px;
    }

}
/* =========================
   APPAREL
   ========================= */

.apparel-hero {
    min-height: 75vh;
    padding: 100px 8%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    background-color: #20231f;
}

.apparel-label {
    color: #d2b56b;
    letter-spacing: 4px;
    font-size: 11px;
    margin-bottom: 30px;
}

.apparel-hero h1 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: clamp(60px, 9vw, 120px);
    font-weight: 700;
    line-height: 0.9;
    letter-spacing: -4px;
    text-transform: uppercase;
    color: #ffffff;
    margin-bottom: 40px;
}

.apparel-hero > p:last-child {
    max-width: 550px;
    color: #d8d8d2;
    font-size: 18px;
    line-height: 1.8;
}


/* Apparel introduction */

.apparel-intro {
    padding: 120px 8%;
    text-align: center;
    background-color: #f7f5ee;
}

.apparel-small-label {
    color: #9a7b43;
    letter-spacing: 4px;
    font-size: 11px;
    margin-bottom: 25px;
}

.apparel-intro h2 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: clamp(45px, 7vw, 75px);
    font-weight: 700;
    letter-spacing: -2px;
    text-transform: uppercase;
    color: #20231f;
    margin-bottom: 30px;
}

.apparel-intro > p:last-child {
    max-width: 650px;
    margin: 0 auto;
    color: #666b61;
    font-size: 18px;
    line-height: 1.9;
}


@media (max-width: 700px) {

    .apparel-hero {
        min-height: 65vh;
        padding: 80px 25px;
    }

    .apparel-hero h1 {
        font-size: 60px;
        letter-spacing: -2px;
    }

}
/* =========================
   APPAREL COLLECTION
   ========================= */

.apparel-collection {
    padding: 120px 8%;
    background-color: #ffffff;
    text-align: center;
}

.apparel-collection-label {
    color: #9a7b43;
    letter-spacing: 4px;
    font-size: 11px;
    margin-bottom: 20px;
}

.apparel-collection h2 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: clamp(48px, 7vw, 75px);
    font-weight: 700;
    letter-spacing: -3px;
    text-transform: uppercase;
    color: #20231f;
    margin-bottom: 70px;
}

.apparel-grid {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

.apparel-card {
    text-align: left;
}

.apparel-placeholder {
    height: 430px;
    background-color: #20231f;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 25px;
}

.apparel-placeholder span {
    color: #ffffff;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 25px;
    font-weight: 700;
    letter-spacing: 2px;
}

.apparel-placeholder small {
    color: #d2b56b;
    letter-spacing: 3px;
    font-size: 10px;
    margin-top: 20px;
}

.apparel-card h3 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 22px;
    font-weight: 600;
    color: #20231f;
    margin: 25px 0 10px;
}

.apparel-card > p {
    color: #666b61;
    font-size: 15px;
    line-height: 1.7;
}

@media (max-width: 700px) {

    .apparel-grid {
        grid-template-columns: 1fr;
    }

    .apparel-placeholder {
        height: 400px;
    }

}
/* Navigation Hover Animation */

/* Playful Navigation Bounce */

nav a {
    display: inline-block;
    transition: color 0.2s ease;
}

nav a:hover {
    color: #a48648;
    animation: navBounce 0.5s ease;
}

@keyframes navBounce {

    0% {
        transform: translateY(0) rotate(0);
    }

    30% {
        transform: translateY(-8px) rotate(-4deg);
    }

    55% {
        transform: translateY(2px) rotate(2deg);
    }

    75% {
        transform: translateY(-4px) rotate(-2deg);
    }

    100% {
        transform: translateY(0) rotate(0);
    }

}
/* Homepage Title Fade */

.hero-title {
    animation: heroFade 2.5s ease-in-out;
}

@keyframes heroFade {

    0% {
        opacity: 0;
        color: #f7f4ec;
    }

    45% {
        opacity: 1;
        color: #ffffff;
    }

    100% {
        opacity: 1;
        color: #4d5743;
    }

}
/* BE YE TRANSFORMED - Elegant Transformation */

.transformed-title {
    margin-top: 22px;
    text-align: center;
}

.transformed-title span {
    display: inline-block;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(18px, 2.2vw, 30px);
    font-weight: normal;
    letter-spacing: 7px;
    color: #a48648;
    animation: elegantTransformation 2.6s ease-out forwards;
}

@keyframes elegantTransformation {

    0% {
        opacity: 0;
        transform: scale(0.65);
        letter-spacing: 22px;
        filter: blur(8px);
        text-shadow:
            -30px 0 12px rgba(164, 134, 72, 0.35),
            30px 0 12px rgba(164, 134, 72, 0.35);
    }

    35% {
        opacity: 1;
        transform: scale(1.08);
        letter-spacing: 12px;
        filter: blur(2px);
        text-shadow:
            -18px 0 10px rgba(164, 134, 72, 0.25),
            18px 0 10px rgba(164, 134, 72, 0.25);
    }

    65% {
        transform: scale(0.96);
        letter-spacing: 8px;
        filter: blur(0);
        text-shadow:
            -7px 0 6px rgba(164, 134, 72, 0.15),
            7px 0 6px rgba(164, 134, 72, 0.15);
    }

    100% {
        opacity: 1;
        transform: scale(1);
        letter-spacing: 7px;
        filter: blur(0);
        text-shadow: none;
    }

}
/* SuperSaint Logo */

header .logo {
    display: flex;
    align-items: center;
}

header .logo img {
    width: 200px;
    height: auto;
    mix-blend-mode: multiply;
}
/* =========================
   ABOUT SUPERSAINT
   ========================= */

.about-hero {
    min-height: 70vh;
    padding: 110px 8%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: #f3f0e7;
}

.about-hero > p:first-child {
    color: #9a7b43;
    letter-spacing: 4px;
    font-size: 11px;
    margin-bottom: 30px;
}

.about-hero h1 {
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(48px, 7vw, 80px);
    font-weight: normal;
    line-height: 1.08;
    color: #4e5d49;
    margin-bottom: 30px;
}

.about-hero > p:last-child {
    max-width: 620px;
    color: #666b61;
    font-size: 18px;
    line-height: 1.9;
}


/* Our Story */

.about-story {
    padding: 120px 8%;
    text-align: center;
    background-color: #ffffff;
}

.about-story > p:first-child {
    color: #9a7b43;
    letter-spacing: 4px;
    font-size: 11px;
    margin-bottom: 25px;
}

.about-story h2 {
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(48px, 7vw, 75px);
    font-weight: normal;
    color: #4e5d49;
    margin-bottom: 30px;
}

.about-story > p:last-child {
    max-width: 700px;
    margin: 0 auto;
    color: #666b61;
    font-size: 18px;
    line-height: 2;
}


@media (max-width: 700px) {

    .about-hero {
        min-height: 65vh;
        padding: 80px 25px;
    }

    .about-hero h1 {
        font-size: 48px;
    }

}
/* =========================
   ABOUT - THE MEANING
   ========================= */

.about-meaning {
    padding: 120px 10%;
    text-align: center;
    background-color: #f7f4ec;
}

.about-meaning > p:first-child {
    color: #9a7b43;
    letter-spacing: 4px;
    font-size: 11px;
    margin-bottom: 30px;
}

.about-meaning h2 {
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(45px, 6vw, 72px);
    font-weight: normal;
    line-height: 1.1;
    color: #4e5d49;
    margin-bottom: 45px;
}

.about-meaning > p {
    max-width: 720px;
    margin: 0 auto 25px;
    color: #666b61;
    font-size: 17px;
    line-height: 1.9;
}

.about-meaning-lines {
    max-width: 650px;
    margin: 55px auto;
    padding: 35px 20px;
    border-top: 1px solid #d8cfbd;
    border-bottom: 1px solid #d8cfbd;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.about-meaning-lines span {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 22px;
    color: #4e5d49;
}

.about-meaning h3 {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 38px;
    font-weight: normal;
    color: #9a7b43;
    margin: 55px 0 30px;
}

.about-meaning-ending {
    margin-top: 60px;
    padding: 45px 20px;
    background-color: #4e5d49;
    color: #ffffff;
}

.about-meaning-ending strong {
    display: block;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 30px;
    font-weight: normal;
    margin-bottom: 12px;
}

.about-meaning-ending span {
    color: #d8c28a;
    letter-spacing: 4px;
    font-size: 11px;
}

@media (max-width: 700px) {

    .about-meaning {
        padding: 80px 25px;
    }

    .about-meaning h2 {
        font-size: 46px;
    }

    .about-meaning > p {
        font-size: 16px;
    }

}
/* =========================
   ABOUT - WHY SUPERSAINT
   ========================= */

.about-story-real {
    padding: 120px 10%;
    text-align: center;
    background-color: #ffffff;
}

.about-story-real > p:first-child {
    color: #9a7b43;
    letter-spacing: 4px;
    font-size: 11px;
    margin-bottom: 30px;
}

.about-story-real h2 {
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(45px, 6vw, 72px);
    font-weight: normal;
    line-height: 1.1;
    color: #4e5d49;
    margin-bottom: 45px;
}

.about-story-real > p {
    max-width: 720px;
    margin: 0 auto 25px;
    color: #666b61;
    font-size: 17px;
    line-height: 1.9;
}

.about-story-highlight {
    max-width: 700px;
    margin: 65px auto;
    padding: 55px 30px;
    background-color: #f3f0e7;
    border-left: 3px solid #a48648;
    border-right: 3px solid #a48648;
}

.about-story-highlight span {
    display: block;
    color: #9a7b43;
    letter-spacing: 4px;
    font-size: 11px;
    margin-bottom: 20px;
}

.about-story-highlight strong {
    display: block;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 32px;
    font-weight: normal;
    line-height: 1.4;
    color: #4e5d49;
}

.about-story-real .about-praise {
    margin-top: 50px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 22px;
    color: #4e5d49;
}

.about-story-real .about-praise strong {
    color: #a48648;
}

@media (max-width: 700px) {

    .about-story-real {
        padding: 80px 25px;
    }

    .about-story-real h2 {
        font-size: 46px;
    }

    .about-story-real > p {
        font-size: 16px;
    }

    .about-story-highlight {
        padding: 40px 20px;
    }

}
/* =========================
   SUPERSAINT KIDS STORIES
   ========================= */

.kids-series-card {
    padding: 100px 10%;
    text-align: center;
    background-color:#dff1ff;
}

.kids-series-card .kids-series-label {
    color: #9a7b43;
    letter-spacing: 4px;
    font-size: 11px;
    margin-bottom: 25px;
}

.kids-series-card h2 {
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(44px, 6vw, 68px);
    font-weight: normal;
    color: #4e5d49;
    margin-bottom: 25px;
}

.kids-series-card > p:not(.kids-series-label):not(.series-coming-soon) {
    max-width: 600px;
    margin: 0 auto 30px;
    color: #666b61;
    font-size: 17px;
    line-height: 1.9;
}

.series-symbol {
    color: #d69aaa;
    font-size: 28px;
    margin: 25px 0;
}

.series-coming-soon {
    color: #9a7b43;
    letter-spacing: 3px;
    font-size: 10px;
}

@media (max-width: 700px) {
    .kids-series-card {
        padding: 75px 25px;
    }

    .kids-series-card h2 {
        font-size: 45px;
    }
}
/* Averie star decorations */

.kids-series-card {
    position: relative;
    overflow: hidden;
}

.averie-stars {
    position: absolute;
    color: #e5b84b;
    font-size: 30px;
    letter-spacing: 4px;
    top: 50%;
    transform: translateY(-50%);
}

.left-stars {
    left: 6%;
}

.right-stars {
    right: 6%;
}
/* Averie bubble title */

/* =========================
   AVERIE THE BRAVERY TITLE
   ========================= */

.averie-title {
    text-align: center;
    margin: 15px auto 35px;
    position: relative;
}

.averie-main {
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "Arial Rounded MT Bold", "Trebuchet MS", sans-serif;
    font-size: clamp(55px, 7vw, 88px);
    font-weight: 900;
    line-height: 0.95;
    letter-spacing: -3px;
   color: #e98fa3;
    text-shadow:
        3px 3px 0 #ffffff,
        -2px -2px 0 #ffffff,
        0 5px 8px rgba(77, 87, 67, 0.12);
}

.averie-a {
    position: relative;
    display: inline-block;
    color: #e98fa3;
    z-index: 2;
}

/* Crown */

.averie-crown {
    position: absolute;
    top: -28px;
    left: 50%;
    transform: translateX(-50%) rotate(-8deg);
    color: #e8b84f;
    font-size: 28px;
    line-height: 1;
    text-shadow:
        1px 1px 0 #ffffff;
    z-index: 4;
}

/* Cape */




/* The Bravery */

.averie-subtitle {
    margin-top: 4px;
    font-family: "Arial Rounded MT Bold", "Trebuchet MS", sans-serif;
   font-size: clamp(55px, 7vw, 88px);
    font-weight: 900;
    color: #e98fa3;
    letter-spacing: -1px;
    text-shadow:
        2px 2px 0 #ffffff,
        -1px -1px 0 #ffffff;
}

.averie-heart {
    display: inline-block;
    color: #e98fa3;
    font-size: 0.8em;
    margin-left: 5px;
    animation: heartBounce 1.5s ease-in-out infinite;
}

@keyframes heartBounce {

    0%, 100% {
        transform: translateY(0) rotate(0);
    }

    50% {
        transform: translateY(-5px) rotate(5deg);
    }
}

.averie-a {
    color: #e98fa3;
    display: inline-block;
    position: relative;
}
/* Averie's superhero cape */

.averie-cape {
    position: absolute;
    width: 58px;
    height: 72px;
    left: -42px;
    top: 27px;
    background: #e98fa3;
    border-radius: 8px 8px 35px 35px;
    transform-origin: right top;
    transform: rotate(10deg) skewY(-8deg);
    z-index: -1;
    animation: averieCapeWave 1.8s ease-in-out infinite;
    box-shadow: 3px 4px 0 rgba(255, 255, 255, 0.45);
}

@keyframes averieCapeWave {
    0% {
        transform: rotate(10deg) skewY(-8deg);
    }

    50% {
        transform: rotate(3deg) skewY(-15deg);
    }

    100% {
        transform: rotate(10deg) skewY(-8deg);
    }
}
.averie-coming-soon {
    display: inline-block;
    margin-top: 10px;
    padding: 14px 32px;
    background-color: #78a9d6;
    color: #ffffff;
    text-decoration: none;
    font-size: 11px;
    letter-spacing: 3px;
    border-radius: 30px;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.averie-coming-soon:hover {
    transform: translateY(-3px);
    background-color: #6398ca;
}
/* =========================
   MORE SUPERSAINT KIDS STORIES
   ========================= */

.more-kids-stories {
    padding: 100px 10%;
    text-align: center;
    background-color: #fff7d6;
}

.more-kids-stories > p:first-child {
    color: #9a7b43;
    letter-spacing: 4px;
    font-size: 11px;
    margin-bottom: 25px;
}

.more-kids-stories h2 {
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(45px, 6vw, 68px);
    font-weight: normal;
    line-height: 1.1;
    color: #4e5d49;
    margin-bottom: 25px;
}

.more-kids-stars {
    color: #e98fa3;
    font-size: 24px;
    letter-spacing: 6px;
    margin: 25px 0;
}

.more-kids-stories > p:not(:first-child) {
    max-width: 600px;
    margin: 0 auto 35px;
    color: #666b61;
    font-size: 17px;
    line-height: 1.9;
}

.more-kids-message {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
}

.more-kids-message span {
    padding: 10px 18px;
    border-radius: 30px;
    background-color: #ffffff;
    color: #4e5d49;
    font-size: 10px;
    letter-spacing: 2px;
}

@media (max-width: 700px) {
    .more-kids-stories {
        padding: 75px 25px;
    }

    .more-kids-stories h2 {
        font-size: 46px;
    }

    .more-kids-stories > p {
        font-size: 16px;
    }
}
/* =========================
   CONTACT PAGE
   ========================= */

.contact-hero {
    min-height: 65vh;
    padding: 100px 8%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: #f3f0e7;
}

.contact-hero p:first-child {
    color: #9a7b43;
    letter-spacing: 4px;
    font-size: 11px;
    margin-bottom: 30px;
}

.contact-hero h1 {
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(55px, 7vw, 80px);
    font-weight: normal;
    color: #4e5d49;
    margin-bottom: 30px;
}

.contact-hero p:last-child {
    max-width: 600px;
    color: #666b61;
    font-size: 18px;
    line-height: 1.9;
}

.contact-section {
    padding: 110px 8%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 90px;
    background-color: #ffffff;
}

.contact-intro {
    padding-top: 20px;
}

.contact-intro > p:first-child {
    color: #9a7b43;
    letter-spacing: 4px;
    font-size: 11px;
    margin-bottom: 25px;
}

.contact-intro h2 {
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(45px, 5vw, 65px);
    font-weight: normal;
    line-height: 1.1;
    color: #4e5d49;
    margin-bottom: 30px;
}

.contact-intro > p:last-child {
    max-width: 500px;
    color: #666b61;
    font-size: 17px;
    line-height: 1.9;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.contact-form label {
    margin-top: 10px;
    color: #9a7b43;
    letter-spacing: 3px;
    font-size: 10px;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 16px;
    border: 1px solid #d8d2c5;
    background-color: #f7f4ec;
    font-family: Arial, sans-serif;
    font-size: 15px;
    color: #4e5d49;
    outline: none;
}

.contact-form textarea {
    resize: vertical;
}

.contact-form input:focus,
.contact-form textarea:focus {
    border-color: #a48648;
}

.contact-form button {
    margin-top: 15px;
    padding: 16px 28px;
    border: none;
    background-color: #4e5d49;
    color: #ffffff;
    font-size: 11px;
    letter-spacing: 3px;
    cursor: pointer;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.contact-form button:hover {
    background-color: #3f4b3b;
    transform: translateY(-2px);
}

@media (max-width: 700px) {

    .contact-hero {
        min-height: 60vh;
        padding: 80px 25px;
    }

    .contact-section {
        grid-template-columns: 1fr;
        gap: 50px;
        padding: 75px 25px;
    }

}
/* MOBILE NAVIGATION */
@media (max-width: 700px) {

    header {
        flex-direction: column;
        gap: 20px;
        padding: 20px;
    }

    header .logo img {
        width: 115px;
    }

    nav {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 12px 18px;
    }

    nav a {
        font-size: 10px;
        letter-spacing: 1.5px;
    }

}
@media (max-width: 700px) {

    .averie-cape {
        left: -28px;
        width: 45px;
        height: 60px;
    }

}
@media (max-width: 700px) {

   .hero h1 {
    font-size: 26px;
    letter-spacing: 0;
    white-space: nowrap;
}
}
@media (max-width: 700px) {
    html, body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }
}