/* ===================================
   BOTANICAL BACKGROUNDS - COLORFUL VERSION
   More vibrant and visible natural elements
   =================================== */

/* Dual Brands Section - BIGGER & MORE VISIBLE */
.dual-brands {
    position: relative;
    overflow: hidden;
}

.dual-brands::after {
    content: '';
    position: absolute;
    width: 550px;
    height: 550px;
    background-image: url('images/6b2d720c-67c0-4b30-9a05-555c95cb0565_removalai_preview.png');
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.25;
    bottom: -80px;
    left: -80px;
    z-index: 0;
    animation: sway 15s ease-in-out infinite;
    filter: saturate(1.5) brightness(1.1);
}

.dual-brands::before {
    content: '';
    position: absolute;
    width: 480px;
    height: 480px;
    background-image: url('images/olivebean.png');
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.22;
    top: 30px;
    right: 30px;
    z-index: 0;
    animation: sway 12s ease-in-out infinite reverse;
    filter: saturate(1.6) brightness(1.15);
}

/* Why Anointing Section - MORE VISIBLE */
.why-anointing {
    position: relative;
    overflow: hidden;
}

.why-anointing::after {
    content: '';
    position: absolute;
    width: 500px;
    height: 500px;
    background-image: url('images/8c726876-5745-4570-80a2-358e3e4fe0c9_removalai_preview.png');
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.24;
    bottom: 30px;
    right: 30px;
    z-index: 0;
    transform: rotate(-15deg);
    animation: sway 13s ease-in-out infinite;
    filter: saturate(1.5) brightness(1.1);
}

.why-anointing::before {
    content: '';
    position: absolute;
    width: 420px;
    height: 420px;
    background-image: url('../images/palm-leaf.png');
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.18;
    top: 50px;
    left: -50px;
    z-index: 0;
    animation: float 14s ease-in-out infinite;
    filter: saturate(1.4) brightness(1.1);
}

/* Product Hero - Aloe Vera */
.product-hero {
    position: relative;
    overflow: hidden;
}

.product-hero::after {
    content: '';
    position: absolute;
    width: 520px;
    height: 520px;
    background-image: url('../images/aloe-vera.png');
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.22;
    top: 80px;
    right: 50px;
    z-index: 0;
    animation: float 14s ease-in-out infinite;
    filter: saturate(1.5) brightness(1.15);
}

/* Shop Hero - Multiple Leaves */
.shop-hero {
    position: relative;
    overflow: hidden;
}

.shop-hero::before {
    content: '';
    position: absolute;
    width: 580px;
    height: 680px;
    background-image: url('images/olive leaves.png');
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.25;
    top: 20px;
    left: -100px;
    z-index: 0;
    animation: float 16s ease-in-out infinite;
    filter: saturate(1.6) brightness(1.2);
}

.shop-hero::after {
    content: '';
    position: absolute;
    width: 480px;
    height: 580px;
    background-image: url('../images/botanical-leaves.png');
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.2;
    bottom: 50px;
    right: 20px;
    z-index: 0;
    transform: rotate(25deg);
    animation: sway 11s ease-in-out infinite;
    filter: saturate(1.5) brightness(1.15);
}

/* Contact Hero - Oil Drops */
.contact-hero {
    position: relative;
    overflow: hidden;
}

.contact-hero::after {
    content: '';
    position: absolute;
    width: 380px;
    height: 380px;
    background-image: url('../images/oil-drops.png');
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.28;
    bottom: 40px;
    right: 60px;
    z-index: 0;
    animation: float 16s ease-in-out infinite;
    filter: saturate(1.6) brightness(1.2) hue-rotate(-5deg);
}

/* Biblical Uses - Eucalyptus */
.biblical-uses {
    position: relative;
    overflow: hidden;
}

.biblical-uses::before {
    content: '';
    position: absolute;
    width: 500px;
    height: 600px;
    background-image: url('../images/eucalyptus.png');
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.22;
    top: 80px;
    right: 30px;
    z-index: 0;
    animation: float 12s ease-in-out infinite;
    filter: saturate(1.5) brightness(1.15);
}

/* Six Ways - Lavender */
.six-ways {
    position: relative;
    overflow: hidden;
}

.six-ways::after {
    content: '';
    position: absolute;
    width: 450px;
    height: 550px;
    background-image: url('../images/lavender.png');
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.24;
    top: 20px;
    left: 20px;
    z-index: 0;
    animation: sway 14s ease-in-out infinite;
    filter: saturate(1.7) brightness(1.2);
}

/* Calm Mind - Rosemary */
.calm-mind-method {
    position: relative;
    overflow: hidden;
}

.calm-mind-method::before {
    content: '';
    position: absolute;
    width: 460px;
    height: 560px;
    background-image: url('../images/rosemary.png');
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.22;
    bottom: 30px;
    right: 60px;
    z-index: 0;
    animation: float 13s ease-in-out infinite;
    filter: saturate(1.5) brightness(1.15);
}

/* Stay Young - Jasmine Flowers */
.stay-young-hero .container {
    position: relative;
}

.stay-young-hero .container::after {
    content: '';
    position: absolute;
    width: 420px;
    height: 420px;
    background-image: url('../images/jasmine.png');
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.28;
    bottom: -80px;
    left: -80px;
    z-index: 0;
    animation: float 15s ease-in-out infinite;
    filter: saturate(1.8) brightness(1.25) hue-rotate(5deg);
}

/* Psalm Section - Palm Frond */
.psalm-section {
    position: relative;
    overflow: hidden;
}

.psalm-content::after {
    content: '';
    position: absolute;
    width: 600px;
    height: 700px;
    background-image: url('../images/palm-leaf.png');
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.2;
    bottom: -120px;
    left: -120px;
    z-index: -1;
    animation: sway 16s ease-in-out infinite;
    filter: saturate(1.3) brightness(1.15);
}

/* Brand Cards - More Visible Icons */
.brand-card {
    position: relative;
    overflow: hidden;
}

.brand-card::after {
    content: '';
    position: absolute;
    width: 320px;
    height: 320px;
    background-image: url('../images/oil-drops.png');
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.12;
    bottom: -60px;
    left: -60px;
    z-index: 0;
    filter: saturate(1.6) brightness(1.2) hue-rotate(-5deg);
}

.brand-card:last-child::after {
    background-image: url('../images/green-leaves.png');
    filter: saturate(1.5) brightness(1.15);
}

/* Why Cards - Colorful Corners */
.why-card {
    position: relative;
    overflow: hidden;
}

.why-card:nth-child(1)::after {
    content: '';
    position: absolute;
    width: 180px;
    height: 180px;
    background-image: url('../images/olive-branch.png');
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.14;
    bottom: -40px;
    right: -40px;
    z-index: 0;
    filter: saturate(1.5) brightness(1.15);
}

.why-card:nth-child(2)::after {
    content: '';
    position: absolute;
    width: 180px;
    height: 180px;
    background-image: url('../images/green-leaves.png');
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.14;
    bottom: -40px;
    right: -40px;
    z-index: 0;
    filter: saturate(1.6) brightness(1.2);
}

.why-card:nth-child(3)::after {
    content: '';
    position: absolute;
    width: 180px;
    height: 180px;
    background-image: url('../images/oil-drops.png');
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.15;
    bottom: -40px;
    right: -40px;
    z-index: 0;
    filter: saturate(1.7) brightness(1.25) hue-rotate(-5deg);
}

/* Product Cards - Visible Botanical Elements */
.product-card {
    position: relative;
    overflow: hidden;
}

.product-card::before {
    content: '';
    position: absolute;
    width: 240px;
    height: 240px;
    background-image: url('../images/green-leaves.png');
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.1;
    top: -50px;
    right: -50px;
    z-index: 0;
    pointer-events: none;
    filter: saturate(1.5) brightness(1.15);
}

.product-card:nth-child(2)::before {
    background-image: url('../images/olive-branch.png');
    filter: saturate(1.4) brightness(1.1);
}

.product-card:nth-child(3)::before {
    background-image: url('../images/oil-drops.png');
    filter: saturate(1.6) brightness(1.2) hue-rotate(-5deg);
}

/* Footer - Subtle Botanical */
.footer-grid {
    position: relative;
}

.footer-grid::after {
    content: '';
    position: absolute;
    width: 480px;
    height: 580px;
    background-image: url('../images/botanical-leaves.png');
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.08;
    top: 20px;
    left: 40px;
    z-index: 0;
    animation: sway 14s ease-in-out infinite;
    filter: saturate(1.3) brightness(1.1);
}

/* Cart Section */
.cart-section {
    position: relative;
    overflow: hidden;
}

.cart-section::before {
    content: '';
    position: absolute;
    width: 400px;
    height: 400px;
    background-image: url('../images/botanical-leaves.png');
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.2;
    top: 60px;
    right: 60px;
    z-index: 0;
    animation: float 12s ease-in-out infinite;
    filter: saturate(1.5) brightness(1.15);
}

/* Enhanced Animations */
@keyframes sway {
    0%, 100% {
        transform: rotate(-10deg);
    }
    50% {
        transform: rotate(10deg);
    }
}

@keyframes float {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    50% {
        transform: translateY(-30px) rotate(6deg);
    }
}

/* Make sure content stays on top */
.container {
    position: relative;
    z-index: 10;
}

.brand-card > *,
.product-card > *,
.why-card > * {
    position: relative;
    z-index: 1;
}