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

html {
    scroll-behavior: smooth;
}

body {
    font-family: Arial, sans-serif;
    background-color: #fffaf7;
    color: #4b3832;
    line-height: 1.6;
}

/* Navigation Bar */

header {
    background-color: #ffffff;
    border-bottom: 1px solid #eaded8;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.navbar {
    max-width: 1200px;
    margin: auto;
    padding: 18px 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo {
    color: #8b5e4b;
    font-family: Georgia, serif;
    font-size: 23px;
    font-weight: bold;
}

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

.nav-links a {
    color: #4b3832;
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;
}

.nav-links a:hover,
.nav-links .active {
    color: #b57962;
}

.login-button {
    padding: 9px 18px;
    border: 1px solid #b57962;
    border-radius: 20px;
}

/* Hero Section */

.hero {
    min-height: 520px;
    padding: 80px 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: linear-gradient(
        rgba(255, 245, 240, 0.88),
        rgba(255, 245, 240, 0.88)
    );
}

.hero-content > p:not(.small-title) {
    font-family: "Segoe UI", Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.7;
}

.hero .small-title {
    font-family: "Segoe UI", Arial, sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 3px;
}


/* Homepage Main Heading */
.hero h1 {
    font-family: 'Playfair Display', serif;
    font-size: 45px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0;
    color: #704b3d;
}


.hero p {
    margin-bottom: 30px;
    color: #725b52;
}

.main-button,
.whatsapp-button {
    display: inline-block;
    padding: 12px 28px;
    border-radius: 25px;
    background-color: #9b6855;
    color: #ffffff;
    text-decoration: none;
}

.main-button:hover,
.whatsapp-button:hover {
    background-color: #754b3b;
	
}.hero {
    min-height: 520px;
    padding: 80px 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;

    background:
        linear-gradient(
            rgba(255, 245, 240, 0.72),
            rgba(255, 245, 240, 0.72)
        ),
        url("../images/banner2_shop.jpg");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}



/* General Section */

.section {
    padding: 75px 25px;
    text-align: center;
}

.section h2 {
    margin: 8px 0 25px;
    color: #6f493c;
    font-family: Georgia, serif;
    font-size: 36px;
}

.about {
    background-color: #ffffff;
}

.about-text {
    max-width: 750px;
    margin: auto;
    color: #725b52;
}

/* Products */

.products-section {
    background-color: #f8eee9;
}

.product-container {
    max-width: 1050px;
    margin: auto;
    display: flex;
    justify-content: center;
    gap: 25px;
}

.product-card {
    width: 31%;
    padding: 35px 25px;
    border-radius: 12px;
    background-color: #ffffff;
    box-shadow: 0 4px 15px rgba(111, 73, 60, 0.1);
}

.product-icon {
    margin-bottom: 15px;
    font-size: 55px;
}

.product-card h3 {
    margin-bottom: 10px;
    color: #7d5140;
}

.product-card p {
    color: #725b52;
    font-size: 14px;
}

/* Gallery */

.gallery-section {
    background-color: #ffffff;
}

.gallery-container {
    max-width: 1000px;
    margin: auto;
    display: flex;
    justify-content: center;
    gap: 20px;
}

.gallery-box {
    width: 31%;
    min-height: 180px;
    border-radius: 10px;
    background-color: #e9d6cc;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6f493c;
    font-size: 18px;
    font-weight: bold;
}

/* Contact */

.contact-section {
    background-color: #f8eee9;
}

.contact-section p {
    margin: 8px 0;
}

.whatsapp-button {
    margin-top: 22px;
}

/* Footer */

footer {
    padding: 22px;
    background-color: #5d4035;
    color: #ffffff;
    text-align: center;
    font-size: 14px;
}

/* Mobile Responsive */

@media screen and (max-width: 768px) {
    .navbar {
        flex-direction: column;
        gap: 15px;
    }

    .nav-links {
        flex-wrap: wrap;
        justify-content: center;
        gap: 14px;
    }

    .hero h1 {
        font-size: 38px;
    }

    .product-container,
    .gallery-container {
        flex-direction: column;
        align-items: center;
    }

    .product-card,
    .gallery-box {
        width: 90%;
    }
}

/* About Page */

.page-banner {
    padding: 70px 25px;
    background-color: #f8eee9;
    text-align: center;
}

.page-banner h1 {
    margin: 10px 0;
    color: #6f493c;
    font-family: Georgia, serif;
    font-size: 42px;
}

.page-banner p {
    color: #725b52;
}

.about-page {
    max-width: 1100px;
    margin: auto;
    padding: 80px 30px;
    display: flex;
    align-items: center;
    gap: 55px;
}

.about-image,
.about-content {
    width: 50%;
}

.image-placeholder {
    min-height: 380px;
    border-radius: 15px;
    background-color: #ead8cf;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #6f493c;
}

.image-placeholder span {
    font-size: 80px;
}

.about-content h2 {
    margin: 10px 0 20px;
    color: #6f493c;
    font-family: Georgia, serif;
    font-size: 36px;
    line-height: 1.3;
}

.about-content p {
    margin-bottom: 16px;
    color: #725b52;
}

.business-info {
    padding: 65px 25px;
    background-color: #f8eee9;
    display: flex;
    justify-content: center;
    gap: 25px;
}

.info-card {
    width: 300px;
    padding: 30px 22px;
    border-radius: 12px;
    background-color: #ffffff;
    text-align: center;
}

.info-card span {
    font-size: 45px;
}

.info-card h3 {
    margin: 12px 0 8px;
    color: #6f493c;
}

.info-card p {
    color: #725b52;
    font-size: 14px;
}

@media screen and (max-width: 768px) {
    .about-page,
    .business-info {
        flex-direction: column;
    }

    .about-image,
    .about-content,
    .info-card {
        width: 100%;
    }

    .page-banner h1 {
        font-size: 34px;
    }
}


/* Products Page */

.products-page {
    max-width: 1200px;
    margin: auto;
    padding: 65px 30px;
    display: flex;
    align-items: flex-start;
    gap: 35px;
}

/* Categories */

.categories {
    width: 230px;
    padding: 25px;
    border: 1px solid #e4d5ce;
    border-radius: 12px;
    background-color: #ffffff;
    position: sticky;
    top: 100px;
}

.categories h3 {
    margin-bottom: 18px;
    color: #6f493c;
    font-family: Georgia, serif;
    font-size: 23px;
}

.categories ul {
    list-style: none;
}

.categories li {
    border-bottom: 1px solid #eee2dc;
}

.categories a {
    display: block;
    padding: 12px 0;
    color: #725b52;
    text-decoration: none;
}

.categories a:hover {
    color: #b57962;
    padding-left: 5px;
}

.unavailable-note {
    margin-top: 20px;
    padding: 12px;
    border-radius: 8px;
    background-color: #f3e4df;
    color: #8a5d50;
    font-size: 12px;
}

/* Product List */

.product-list {
    flex: 1;
}

.product-title {
    margin-bottom: 30px;
}

.product-title h2 {
    color: #6f493c;
    font-family: Georgia, serif;
    font-size: 32px;
}

.product-title p {
    color: #725b52;
}

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

.shop-product-card {
    overflow: hidden;
    border-radius: 12px;
    background-color: #ffffff;
    box-shadow: 0 5px 18px rgba(111, 73, 60, 0.12);
    transition: 0.3s;
}

.shop-product-card:hover {
    transform: translateY(-5px);
}

.shop-product-image {
    height: 210px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.shop-product-image span {
    font-size: 75px;
}

.bouquet-colour {
    background-color: #f2d9d5;
}

.chocolate-colour {
    background-color: #e4d4cc;
}

.gift-colour {
    background-color: #eadfd0;
}

.balloon-colour {
    background-color: #ead9e3;
}

.birthday-colour {
    background-color: #f3e1cb;
}

.cake-colour {
    background-color: #e8e4e2;
}

.shop-product-details {
    padding: 22px;
}

.product-category {
    color: #b57962;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 1.5px;
}

.shop-product-details h3 {
    margin: 6px 0 10px;
    color: #6f493c;
    font-size: 20px;
}

.shop-product-details p {
    margin-bottom: 18px;
    color: #725b52;
    font-size: 14px;
}

.order-button,
.unavailable-button {
    display: inline-block;
    padding: 9px 18px;
    border-radius: 20px;
    font-size: 13px;
    text-decoration: none;
}

.order-button {
    background-color: #9b6855;
    color: #ffffff;
}

.order-button:hover {
    background-color: #754b3b;
}

.unavailable-product {
    opacity: 0.7;
}

.unavailable-button {
    background-color: #d6ceca;
    color: #6d625d;
    cursor: not-allowed;
}

/* Products Mobile Responsive */

@media screen and (max-width: 950px) {
    .product-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 768px) {
    .products-page {
        flex-direction: column;
    }

    .categories {
        width: 100%;
        position: static;
    }

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

/* Gallery Page */

.gallery-page {
    max-width: 1150px;
    margin: auto;
    padding: 60px 30px 80px;
}

.gallery-categories {
    margin-bottom: 65px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
}

.gallery-categories a {
    padding: 11px 23px;
    border: 1px solid #b57962;
    border-radius: 25px;
    color: #8b5e4b;
    text-decoration: none;
    transition: 0.3s;
}

.gallery-categories a:hover {
    background-color: #9b6855;
    color: #ffffff;
}

.gallery-group {
    margin-bottom: 75px;
    scroll-margin-top: 110px;
}

.gallery-heading {
    margin-bottom: 27px;
    text-align: center;
}

.gallery-heading h2 {
    margin-top: 6px;
    color: #6f493c;
    font-family: Georgia, serif;
    font-size: 34px;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}

.gallery-item {
    overflow: hidden;
    border-radius: 12px;
    background-color: #ffffff;
    box-shadow: 0 5px 18px rgba(111, 73, 60, 0.12);
    transition: 0.3s;
}

.gallery-item:hover {
    transform: translateY(-5px);
}

.gallery-placeholder {
    height: 230px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 70px;
}

.pink-gallery {
    background-color: #efd7d5;
}

.brown-gallery {
    background-color: #decac0;
}

.cream-gallery {
    background-color: #eee1cf;
}

.purple-gallery {
    background-color: #eadbe5;
}

.peach-gallery {
    background-color: #f3d9c9;
}

.gallery-caption {
    padding: 18px;
    color: #6f493c;
    font-weight: bold;
    text-align: center;
}

/* Gallery Mobile Responsive */

@media screen and (max-width: 950px) {
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 600px) {
    .gallery-grid {
        grid-template-columns: 1fr;
    }

    .gallery-categories {
        flex-direction: column;
        text-align: center;
    }
}

/* Contact Page */

.contact-page {
    max-width: 1100px;
    margin: auto;
    padding: 75px 30px;
    display: flex;
    align-items: center;
    gap: 60px;
}

.contact-information,
.map-section {
    width: 50%;
}

.contact-information h2 {
    margin: 8px 0 15px;
    color: #6f493c;
    font-family: Georgia, serif;
    font-size: 36px;
    line-height: 1.3;
}

.contact-introduction {
    margin-bottom: 30px;
    color: #725b52;
}

.contact-item {
    margin-bottom: 20px;
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

.contact-icon {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background-color: #f1dfd7;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.contact-item h3 {
    color: #6f493c;
    font-size: 16px;
}

.contact-item p {
    color: #725b52;
    font-size: 14px;
}

.contact-whatsapp-button {
    display: inline-block;
    margin-top: 10px;
    padding: 12px 25px;
    border-radius: 25px;
    background-color: #9b6855;
    color: #ffffff;
    text-decoration: none;
}

.contact-whatsapp-button:hover {
    background-color: #754b3b;
}

.map-placeholder {
    min-height: 480px;
    padding: 30px;
    border: 2px dashed #caa99b;
    border-radius: 15px;
    background-color: #f3e8e2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #6f493c;
    text-align: center;
}

.map-placeholder span {
    margin-bottom: 15px;
    font-size: 70px;
}

.map-placeholder h3 {
    margin-bottom: 5px;
    font-size: 24px;
}

.map-placeholder small {
    margin-top: 15px;
    color: #9a7b6f;
}

/* Order Steps */

.order-information {
    padding: 70px 30px;
    background-color: #f8eee9;
    text-align: center;
}

.order-information h2 {
    margin: 8px 0 35px;
    color: #6f493c;
    font-family: Georgia, serif;
    font-size: 35px;
}

.order-steps {
    max-width: 950px;
    margin: auto;
    display: flex;
    justify-content: center;
    gap: 25px;
}

.order-step {
    width: 31%;
    padding: 30px 20px;
    border-radius: 12px;
    background-color: #ffffff;
}

.order-step span {
    width: 42px;
    height: 42px;
    margin: auto auto 15px;
    border-radius: 50%;
    background-color: #9b6855;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-weight: bold;
}

.order-step h3 {
    margin-bottom: 8px;
    color: #6f493c;
}

.order-step p {
    color: #725b52;
    font-size: 14px;
}

/* Contact Mobile Responsive */

@media screen and (max-width: 768px) {
    .contact-page,
    .order-steps {
        flex-direction: column;
    }

    .contact-information,
    .map-section,
    .order-step {
        width: 100%;
    }
}

/* Login and Account Page */

.account-body {
    min-height: 100vh;
    background-color: #f8eee9;
}

.account-header {
    padding: 20px 40px;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #eaded8;
}

.account-logo {
    color: #8b5e4b;
    font-family: Georgia, serif;
    font-size: 23px;
    font-weight: bold;
    text-decoration: none;
}

.back-home {
    color: #725b52;
    font-size: 14px;
    text-decoration: none;
}

.back-home:hover {
    color: #b57962;
}

.account-page {
    min-height: 690px;
    padding: 70px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.account-box {
    width: 100%;
    max-width: 480px;
    padding: 45px;
    border-radius: 15px;
    background-color: #ffffff;
    box-shadow: 0 8px 30px rgba(111, 73, 60, 0.14);
}

.account-heading {
    margin-bottom: 30px;
    text-align: center;
}

.account-heading h1 {
    margin: 7px 0;
    color: #6f493c;
    font-family: Georgia, serif;
    font-size: 35px;
}

.account-heading p {
    color: #725b52;
    font-size: 14px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 7px;
    color: #5f443b;
    font-size: 14px;
    font-weight: bold;
}

.form-group input {
    width: 100%;
    padding: 13px 15px;
    border: 1px solid #d9c8c0;
    border-radius: 8px;
    outline: none;
    color: #4b3832;
    font-size: 14px;
}

.form-group input:focus {
    border-color: #b57962;
    box-shadow: 0 0 0 3px rgba(181, 121, 98, 0.12);
}

.form-options {
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.remember-me {
    color: #725b52;
    font-size: 13px;
}

.remember-me input {
    margin-right: 5px;
}

.forgot-password {
    color: #a56d58;
    font-size: 13px;
    text-decoration: none;
}

.forgot-password:hover {
    text-decoration: underline;
}

.account-button {
    width: 100%;
    padding: 13px;
    border: none;
    border-radius: 25px;
    background-color: #9b6855;
    color: #ffffff;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
}

.account-button:hover {
    background-color: #754b3b;
}

.account-link {
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid #eee2dc;
    color: #725b52;
    text-align: center;
    font-size: 14px;
}

.account-link a {
    color: #9b6855;
    font-weight: bold;
    text-decoration: none;
}

.account-link a:hover {
    text-decoration: underline;
}

/* Login Mobile Responsive */

@media screen and (max-width: 600px) {
    .account-header {
        padding: 18px 20px;
    }

    .account-logo {
        font-size: 18px;
    }

    .account-box {
        padding: 32px 22px;
    }

    .account-heading h1 {
        font-size: 30px;
    }

    .form-options {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }
}

/* Form Messages */

.form-message {
    margin-bottom: 20px;
    padding: 12px 15px;
    border-radius: 8px;
    text-align: center;
    font-size: 14px;
}

.form-message.success {
    border: 1px solid #8fc69d;
    background-color: #e7f5ea;
    color: #286438;
}

.form-message.error {
    border: 1px solid #dca2a2;
    background-color: #fbe8e8;
    color: #9a3333;
}

/* Simple Dashboard */

.dashboard-information {
    margin-bottom: 25px;
    padding: 20px;
    border-radius: 10px;
    background-color: #f8eee9;
}

.dashboard-information h3 {
    margin-bottom: 12px;
    color: #6f493c;
}

.dashboard-information p {
    margin: 7px 0;
    color: #725b52;
}

.dashboard-button {
    display: block;
    text-align: center;
    text-decoration: none;
}

/* Order Page */

.account-navigation {
    display: flex;
    align-items: center;
    gap: 20px;
}

.account-navigation a {
    color: #725b52;
    font-size: 14px;
    text-decoration: none;
}

.account-navigation a:hover {
    color: #b57962;
}

.form-group select {
    width: 100%;
    padding: 13px 15px;
    border: 1px solid #d9c8c0;
    border-radius: 8px;
    outline: none;
    background-color: #ffffff;
    color: #4b3832;
    font-size: 14px;
}

.form-group select:focus {
    border-color: #b57962;
    box-shadow: 0 0 0 3px rgba(181, 121, 98, 0.12);
}

.order-reminder {
    margin-bottom: 22px;
    padding: 15px;
    border-radius: 8px;
    background-color: #f8eee9;
    color: #725b52;
    font-size: 13px;
}

.order-reminder p {
    margin: 5px 0;
}

@media screen and (max-width: 600px) {
    .account-navigation {
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 10px;
    }
}

/* Customer Dashboard */

.dashboard-body {
    min-height: 100vh;
    background-color: #f8f3f0;
}

.dashboard-header {
    height: 75px;
    padding: 0 35px;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.dashboard-user {
    color: #725b52;
    font-size: 14px;
}

.dashboard-user a {
    margin-left: 18px;
    color: #9b6855;
    font-weight: bold;
    text-decoration: none;
}

.dashboard-layout {
    max-width: 1400px;
    min-height: calc(100vh - 75px);
    margin: auto;
    display: flex;
}

.dashboard-sidebar {
    width: 240px;
    padding: 35px 20px;
    background-color: #ffffff;
    border-right: 1px solid #eaded8;
}

.dashboard-sidebar nav {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dashboard-sidebar a {
    padding: 13px 15px;
    border-radius: 8px;
    color: #725b52;
    text-decoration: none;
}

.dashboard-sidebar a:hover,
.dashboard-sidebar .dashboard-active {
    background-color: #f1dfd7;
    color: #8b5e4b;
}

.dashboard-content {
    flex: 1;
    padding: 45px;
}

.dashboard-title {
    margin-bottom: 30px;
}

.dashboard-title h1 {
    margin: 5px 0;
    color: #6f493c;
    font-family: Georgia, serif;
    font-size: 38px;
}

.dashboard-title p {
    color: #725b52;
}

.dashboard-cards {
    margin-bottom: 35px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.dashboard-card {
    padding: 25px;
    border-radius: 12px;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    gap: 18px;
    box-shadow: 0 4px 15px rgba(111, 73, 60, 0.08);
}

.dashboard-card > span {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    background-color: #f1dfd7;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
}

.dashboard-card h3 {
    color: #725b52;
    font-size: 14px;
}

.dashboard-card strong {
    color: #6f493c;
    font-size: 27px;
}

.dashboard-section {
    margin-bottom: 30px;
    padding: 28px;
    border-radius: 12px;
    background-color: #ffffff;
    box-shadow: 0 4px 15px rgba(111, 73, 60, 0.08);
}

.dashboard-section-heading {
    margin-bottom: 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.dashboard-section-heading h2 {
    color: #6f493c;
    font-family: Georgia, serif;
    font-size: 25px;
}

.dashboard-section-heading a {
    color: #9b6855;
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
}

.profile-information {
    padding: 20px;
    border-radius: 8px;
    background-color: #f8eee9;
}

.profile-information p {
    margin: 8px 0;
    color: #725b52;
}

.orders-table-container {
    overflow-x: auto;
}

.orders-table {
    width: 100%;
    border-collapse: collapse;
}

.orders-table th,
.orders-table td {
    padding: 14px;
    border-bottom: 1px solid #eee2dc;
    text-align: left;
    font-size: 14px;
}

.orders-table th {
    color: #6f493c;
    background-color: #f8eee9;
}

.orders-table td {
    color: #725b52;
}

.order-status {
    padding: 6px 12px;
    border-radius: 15px;
    background-color: #fff0cc;
    color: #90691a;
    font-size: 12px;
    font-weight: bold;
}

.empty-orders {
    padding: 40px 20px;
    text-align: center;
}

.empty-orders span {
    font-size: 55px;
}

.empty-orders h3 {
    margin: 10px 0 5px;
    color: #6f493c;
}

.empty-orders p {
    margin-bottom: 20px;
    color: #725b52;
}

@media screen and (max-width: 900px) {
    .dashboard-layout {
        flex-direction: column;
    }

    .dashboard-sidebar {
        width: 100%;
        border-right: none;
    }

    .dashboard-sidebar nav {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .dashboard-content {
        padding: 25px;
    }

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

/* About Us Image */

.about-image {
    overflow: hidden;
    border-radius: 15px;
}

.about-image img {
    width: 100%;
    height: 380px;
    display: block;
    border-radius: 15px;
    object-fit: cover;
    box-shadow: 0 5px 18px rgba(111, 73, 60, 0.15);
}

/* Navigation Design */

.nav-links a {
    font-weight: 600;
    transition: all 0.3s ease;
}

.nav-links a:not(.login-button):not(.cart-button) {
    padding: 8px 0;
    border-bottom: 2px solid transparent;
}

.nav-links a:not(.login-button):not(.cart-button):hover,
.nav-links a.active {
    color: #a86758;
    border-bottom-color: #b57962;
}

/* Login Button */

.nav-links .login-button {
    padding: 9px 20px;
    border: none;
    border-radius: 25px;
    background-color: #8b5e4b;
    color: #ffffff;
}

.nav-links .login-button:hover {
    background-color: #6f493c;
    color: #ffffff;
    transform: translateY(-2px);
}

/* Cart Button */

.cart-button {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background-color: #f3e5df;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.cart-button:hover {
    background-color: #e6cfc5;
    transform: translateY(-2px);
}

/* Fix Product Image Size */

.shop-product-card {
    overflow: hidden;
}

.shop-product-image {
    width: 100%;
    height: 230px;
    overflow: hidden;
    background-color: #ead8cf;
}

.shop-product-image img {
    width: 100%;
    height: 230px;
    display: block;
    object-fit: cover;
    object-position: center;
}
	
	/* Gallery Photo Grid */

.gallery-heading p:last-child {
    margin-top: 5px;
    color: #725b52;
    font-size: 14px;
}

.photo-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
}

.photo-card {
    width: 100%;
    min-width: 0;
    padding: 0;
    overflow: hidden;
    border: none;
    border-radius: 12px;
    background-color: #ffffff;
    box-shadow: 0 5px 18px rgba(111, 73, 60, 0.12);
    cursor: pointer;
    transition: transform 0.3s ease;
}

.photo-card:hover {
    transform: translateY(-5px);
}

.photo-card img {
    width: 100% !important;
    height: 230px !important;
    display: block !important;
    object-fit: cover !important;
    object-position: center !important;
    transition: transform 0.3s ease;
}

.photo-card:hover img {
    transform: scale(1.05);
}

.photo-card span {
    display: block;
    padding: 16px;
    background-color: #ffffff;
    color: #6f493c;
    font-family: Arial, sans-serif;
    font-size: 15px;
    font-weight: bold;
    text-align: center;
}


/* Gallery Lightbox */

.lightbox {
    width: 100%;
    height: 100%;
    padding: 30px;
    background-color: rgba(30, 20, 17, 0.92);
    display: none;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 5000;
}

.lightbox.lightbox-open {
    display: flex;
}

.lightbox-content {
    max-width: 1000px;
    max-height: 90vh;
    text-align: center;
}

.lightbox-content img {
    max-width: 100%;
    max-height: 75vh;
    border-radius: 10px;
    object-fit: contain;
}

.lightbox-content p {
    margin-top: 13px;
    color: #ffffff;
    font-size: 16px;
}

.lightbox-content small {
    color: #d9c8c0;
}

.lightbox-close {
    border: none;
    background: transparent;
    color: #ffffff;
    font-size: 45px;
    cursor: pointer;
    position: absolute;
    top: 15px;
    right: 30px;
}

.lightbox-arrow {
    width: 50px;
    height: 50px;
    border: none;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.18);
    color: #ffffff;
    font-size: 27px;
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.lightbox-arrow:hover {
    background-color: #9b6855;
}

.lightbox-previous {
    left: 30px;
}

.lightbox-next {
    right: 30px;
}


/* Gallery Responsive */

@media screen and (max-width: 950px) {
    .photo-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 600px) {
    .photo-grid {
        grid-template-columns: 1fr;
    }

    .lightbox {
        padding: 15px;
    }

    .lightbox-arrow {
        width: 40px;
        height: 40px;
        font-size: 21px;
    }

    .lightbox-previous {
        left: 10px;
    }

    .lightbox-next {
        right: 10px;
    }

    .lightbox-close {
        top: 8px;
        right: 15px;
    }
}
	
	@media screen and (max-width: 950px) {
    .photo-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media screen and (max-width: 600px) {
    .photo-grid {
        grid-template-columns: 1fr;
    }
}
	
	/* Featured Products Cards */

.products-section .product-container {
    max-width: 1050px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 25px;
}

.products-section .product-card {
    width: 31%;
    padding: 35px 25px;
    border-radius: 12px;
    background-color: #ffffff;
    box-shadow: 0 4px 15px rgba(111, 73, 60, 0.1);
}

.products-section .product-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.products-section .product-link:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 25px rgba(111, 73, 60, 0.2);
}

.products-section .product-icon {
    margin-bottom: 15px;
    font-size: 55px;
}

.products-section .product-card h3 {
    margin-bottom: 10px;
    color: #7d5140;
}

.products-section .product-card p {
    flex-grow: 1;
    color: #725b52;
    font-size: 14px;
    text-align: center;
}

.products-section .view-product {
    display: inline-block;
    margin-top: 20px;
    padding: 10px 24px;
    border-radius: 25px;
    background-color: #9b6855;
    color: #ffffff;
    font-family: Arial, sans-serif;
    font-size: 14px;
    font-weight: bold;
    line-height: 1.4;
    text-align: center;
    text-decoration: none;
    transition:
        background-color 0.3s ease,
        transform 0.3s ease;
}

.products-section .product-link:hover .view-product {
    background-color: #754b3b;
    transform: translateY(-2px);
}

/* Featured Products Mobile */

@media screen and (max-width: 768px) {
    .products-section .product-container {
        flex-direction: column;
        align-items: center;
    }

    .products-section .product-card {
        width: 90%;
    }
}
	
/* HOMEPAGE GALLERY BOXES */

.gallery-container {
    display: flex;
    justify-content: center;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 25px;
    margin: 35px auto;
}

.gallery-box {
    flex: 1;
    min-width: 220px;
    max-width: 300px;
    min-height: 180px;
    padding: 30px 20px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;

    background: #ffffff;
    border: 1px solid #eaded8;
    border-radius: 16px;
    box-shadow: 0 6px 20px rgba(75, 56, 50, 0.08);

    transition: transform 0.3s ease,
                box-shadow 0.3s ease;
}

.gallery-box:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 28px rgba(75, 56, 50, 0.14);
}

.gallery-icon {
    font-size: 42px;
    line-height: 1.2;
}

.gallery-box h3 {
    margin: 0;
    color: #6f4939;
    font-size: 17px;
    font-weight: 600;
    text-align: center;
}
	
	
/* ==============================
   SHOPPING CART REDESIGN
================================ */

.products-page:has(.cart-layout) {
    max-width: 1200px;
    padding: 65px 30px 90px;
}

.cart-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(270px, 0.8fr);
    gap: 30px;
    align-items: start;
}

.cart-items {
    min-width: 0;
}

.cart-layout .product-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 22px;
}

.cart-layout .shop-product-card {
    border: 1px solid #f0e4de;
    border-radius: 16px;
    box-shadow: 0 5px 20px rgba(111, 73, 60, 0.08);
    transition: transform 0.25s ease,
                box-shadow 0.25s ease;
}

.cart-layout .shop-product-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 9px 25px rgba(111, 73, 60, 0.12);
}

.cart-layout .shop-product-details {
    padding: 28px;
}

.cart-layout .shop-product-details h3 {
    font-size: 22px;
    margin-bottom: 18px;
}

.cart-layout .shop-product-details p {
    margin-bottom: 14px;
    line-height: 1.7;
}

.cart-layout .product-price {
    padding-top: 10px;
    border-top: 1px solid #f0e4de;
    font-weight: 600;
}

/* Order Summary Card */

.cart-summary {
    padding: 30px;
    background: #ffffff;
    border: 1px solid #eaded8;
    border-radius: 16px;
    box-shadow: 0 5px 20px rgba(111, 73, 60, 0.08);
}

.summary-label {
    margin-bottom: 10px;
    color: #a36d56;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 2px;
}

.cart-summary h2 {
    margin-bottom: 25px;
    color: #6f493c;
    font-family: Georgia, serif;
    font-size: 24px;
}

.summary-row,
.summary-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
}

.summary-row {
    padding-bottom: 20px;
    color: #725b52;
    font-size: 14px;
}

.summary-total {
    padding: 20px 0;
    margin-bottom: 20px;
    border-top: 1px solid #eaded8;
    border-bottom: 1px solid #eaded8;
    color: #4b3832;
}

.summary-total strong {
    color: #8b5e4b;
    font-size: 23px;
}

/* Cart Buttons */

.checkout-button,
.continue-button {
    display: block;
    width: 100%;
    padding: 14px 16px;
    border-radius: 25px;
    text-align: center;
    text-decoration: none;
    font-size: 14px;
    transition: background-color 0.25s ease,
                transform 0.25s ease;
}

.checkout-button {
    margin-bottom: 14px;
    background: #9b6855;
    color: #ffffff;
    font-weight: bold;
}

.checkout-button:hover {
    background: #754b3b;
    transform: translateY(-2px);
}

.continue-button {
    border: 1px solid #b57962;
    background: #ffffff;
    color: #8b5e4b;
}

.continue-button:hover {
    background: #f8eee9;
}

.summary-note {
    margin-top: 22px;
    color: #9a7b6f;
    font-size: 12px;
    text-align: center;
    line-height: 1.7;
}

/* Mobile Responsive */

@media screen and (max-width: 768px) {
    .products-page:has(.cart-layout) {
        padding: 35px 18px 60px;
    }

    .cart-layout {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .cart-layout .shop-product-details {
        padding: 22px;
    }

    .cart-summary {
        padding: 25px;
    }
}

/* Shopping Cart Banner */

.cart-banner {
    min-height: 190px;
    margin-top: 25px;
    padding: 30px;
    border-radius: 16px;

    background:
        linear-gradient(
            90deg,
            rgba(255, 250, 247, 0.95),
            rgba(255, 250, 247, 0.15)
        ),
        url("../images/cart-banner.jpg");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    display: flex;
    align-items: center;
}

.cart-banner-text h2 {
    color: #704b3d;
    font-family: Georgia, serif;
    font-size: 25px;
}

.cart-banner-text p {
    max-width: 260px;
    margin-top: 8px;
    color: #725b52;
    font-size: 14px;
}

@media screen and (max-width: 600px) {
    .cart-banner {
        min-height: 160px;
        padding: 20px;
    }

    .cart-banner-text h2 {
        font-size: 21px;
    }
}

/* Cart Banner Image */
.cart-banner {
    width: 100%;
    min-height: 200px;
    margin-top: 25px;
    padding: 30px;
    border-radius: 16px;

    background-image:
        linear-gradient(
            90deg,
            rgba(255, 250, 247, 0.92),
            rgba(255, 250, 247, 0.15)
        ),
       url("../images/banner_shopcart2.jpg");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    display: flex;
    align-items: center;
}

.cart-banner-text h2 {
    color: #704b3d;
    font-family: Georgia, serif;
    font-size: 25px;
}

.cart-banner-text p {
    margin-top: 8px;
    color: #725b52;
    font-size: 14px;
}

@media screen and (max-width: 600px) {
    .cart-banner {
        min-height: 160px;
        padding: 20px;
    }

    .cart-banner-text h2 {
        font-size: 21px;
    }
}


/* Shopping Cart Page Heading */
.product-title {
    position: relative;
    margin-bottom: 30px;
    padding-top: 5px;
}

.product-title h1 {
    color: #49352d;
    font-size: 34px;
    margin-bottom: 10px;
    letter-spacing: -0.5px;
}

.product-title > p {
    color: #896b5d;
    font-size: 16px;
    margin-bottom: 0;
}

/* Small decorative accent */
.product-title h1::after {
    content: "";
    display: block;
    width: 65px;
    height: 3px;
    background: #b17a61;
    border-radius: 5px;
    margin-top: 12px;
}

.cart-banner {
    margin-top: 25px;
}


/* Clean Minimal Shopping Cart Heading */

.product-title {
    margin-bottom: 30px;
    padding-top: 5px;
}

.product-title h1 {
    color: #49352d;
    font-size: 34px;
    font-weight: 700;
    letter-spacing: -0.5px;
    margin: 0 0 12px;
}

.product-title h1::after {
    content: "";
    display: block;
    width: 55px;
    height: 3px;
    margin-top: 14px;
    background-color: #a36d56;
    border-radius: 5px;
}

.product-title > p {
    color: #896b5d;
    font-size: 16px;
    line-height: 1.7;
    margin: 0;
}

/* Space before the floral banner */

.cart-banner {
    margin-top: 25px;
}

/* Elegant Moving Announcement Bar */

.announcement-bar {
    width: 100%;
    overflow: hidden;
    background: #f3e8e0;
    border-top: 1px solid #eadbd1;
    border-bottom: 1px solid #eadbd1;
    padding: 14px 0;
}

.announcement-track {
    display: flex;
    align-items: center;
    width: max-content;
    animation: slowMarquee 35s linear infinite;
}

.announcement-track span {
    flex-shrink: 0;
    padding: 0 35px;
    color: #805743;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 14px;
    letter-spacing: 1px;
    white-space: nowrap;
}

@keyframes slowMarquee {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

/* Pause movement when hovered */
.announcement-bar:hover .announcement-track {
    animation-play-state: paused;
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    .announcement-track {
        animation: none;
    }
}


/* =================================
   ABOUT US - SCROLL ANIMATIONS
================================= */

/* Enable animation only when JavaScript is available */
.js-ready .reveal {
    opacity: 0;
    transition:
        opacity 0.9s ease,
        transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.js-ready .reveal-left {
    transform: translateX(-55px);
}

.js-ready .reveal-right {
    transform: translateX(55px);
}

.js-ready .reveal-up {
    transform: translateY(35px);
}

/* Reveal elements when they enter the screen */
.js-ready .reveal.show {
    opacity: 1;
    transform: translate(0, 0);
}

/* Cards appear one after another */
.js-ready .business-info .info-card:nth-child(1) {
    transition-delay: 0.1s;
}

.js-ready .business-info .info-card:nth-child(2) {
    transition-delay: 0.25s;
}

.js-ready .business-info .info-card:nth-child(3) {
    transition-delay: 0.4s;
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
    .js-ready .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}


/* Smooth About Us Page Entrance */

@keyframes aboutPageFade {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

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

.page-banner,
.about-page,
.business-info {
    animation: aboutPageFade 1.5s ease-out both;
}

.about-page {
    animation-delay: 0.2s;
}

.business-info {
    animation-delay: 0.4s;
}

@media (prefers-reduced-motion: reduce) {
    .page-banner,
    .about-page,
    .business-info {
        animation: none;
    }
}

.about-image:has(.about-logo) {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #ffffff;
    border-radius: 16px;
    padding: 20px;
    min-height: 280px;
    box-sizing: border-box;
    overflow: hidden;
}
.about-image .about-logo {
    display: block;
    width: 65%;
    max-width: 240px;
    max-height: 240px;
    height: auto;
    object-fit: contain;
    border-radius: 0;
    margin: auto;
}

/* Moving Text Animation */
.moving-text {
    width: 100%;
    max-width: 650px;
    overflow: hidden;
    margin: 20px auto;
    white-space: nowrap;
}

.moving-text-track {
    display: flex;
    width: max-content;
    animation: kotakChentaMove 22s linear infinite;
}

.moving-text-track span {
    flex-shrink: 0;
    display: block;
    padding-right: 20px;
    font-size: 13px;
    letter-spacing: 2px;
    line-height: 1.8;
}

@keyframes kotakChentaMove {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

/* Button Hover Effects */
.main-button,
.login-button,
.cart-button,
.whatsapp-button {
    transition: all 0.3s ease;
}

.main-button:hover,
.login-button:hover,
.cart-button:hover,
.whatsapp-button:hover {
    transform: translateY(-3px);
}

/* Product Card Hover */
.product-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.product-card:hover {
    transform: translateY(-6px);
}