/* Heritage Marketing Philosophy Section & Section Separators */

/* =========================================
   1. Global Section Separators & Parallax
   ========================================= */

/* Section Separator - Adds depth and separation between sections */
.section-separator {
    position: relative;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    z-index: 10;
}

/* Subtle gradient line at the bottom */
.section-separator::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.1), transparent);
    z-index: 11;
}

section {
    position: relative;
    z-index: 1;
}

/* Global Parallax Effect (Excluding Category Section) */
.what-we-offer-section,
.why-choose-us-section,
.brand-section {
    background:
        linear-gradient(rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.96)),
        url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23bfa37c' fill-opacity='0.25'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") !important;
    background-attachment: fixed !important;
    background-position: center !important;
    background-repeat: repeat !important;
    background-size: auto !important;
    background-color: #ffffff !important;
}

/* Category Section - Original Background Color */
.category-section {
    background: #f8f3ef !important;
    /* Original Cream Color */
    /* Ensure no parallax image interferes */
    background-image: none !important;
}

/* Disable existing pseudo-elements that might block parallax */
.what-we-offer-section::before,
.why-choose-us-section::before,
.brand-section::before {
    display: none !important;
}

/* =========================================
   2. Philosophy Section - Elegant, Minimal & Open
   ========================================= */

.philosophy-section {
    /* New Polygonal Background */
    background-image: url('../images/bg/philosophy-bg.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 100px 0;
    /* Generous vertical space */
    position: relative;

    background-attachment: fixed;
    /* Parallax Effect */
}

/* Add a subtle overlay to ensure text readability */
.philosophy-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.9);
    /* More transparent overlay */
    z-index: 0;
}

.philosophy-content {
    position: relative;
    max-width: 800px;
    /* Compact width */
    margin: 0 auto;
    padding: 0 20px;
    /* No box padding, just spacing */
    background: transparent;
    /* No background box */
    border: none;
    /* No borders */
    box-shadow: none;
    /* No shadows */
    text-align: center;
}

/* Elegant Heading */
.philosophy-content h2 {
    font-family: "Playfair Display", serif;
    font-size: 36px;
    color: #1a1a1a;
    font-weight: 400;
    letter-spacing: 2px;
    /* Airy letter spacing */
    margin-bottom: 30px;
    text-transform: uppercase;
    position: relative;
    display: inline-block;
}

/* Minimal Divider - Floating below heading */
.philosophy-content h2::after {
    content: '';
    display: block;
    width: 40px;
    /* Short, elegant line */
    height: 1px;
    /* Thin line */
    background-color: #bfa37c;
    /* Gold accent */
    margin: 20px auto 0;
}

/* Classic Body Text */
.philosophy-content .lead-text {
    font-family: "Jost", sans-serif;
    font-size: 18px;
    line-height: 2;
    /* Very generous line height for elegance */
    color: #444;
    font-weight: 300;
    margin-bottom: 0;
}

/* Hide the old decoration elements */
.philosophy-decoration {
    display: none;
}

/* Responsive */
@media (max-width: 767px) {
    .philosophy-section {
        /* New Polygonal Background */
        background-image: url('../images/bg/philosophy-bg.jpg');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        padding: 100px 0;
        /* Generous vertical space */
        position: relative;

        background-attachment: fixed;
        /* Parallax Effect */
    }

    /* Add a subtle overlay to ensure text readability */
    .philosophy-section::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(255, 255, 255, 0.5);
        /* More transparent overlay */
        z-index: 0;
    }

    .philosophy-content h2 {
        font-size: 26px;
        letter-spacing: 1px;
    }

    .philosophy-content .lead-text {
        font-size: 16px;
        line-height: 1.8;
    }
}