:root {

    /* Header Colors */

    --header-bg-color: #ffffff;

    --header-text-color: #000000;

    --header-link-color: #000000;

    --header-link-hover-color: #49889d;

    

    /* Hero Section Colors */
    --hero-bg-color: #0e3c31;
    --hero-title-color: #ffffff;
    --hero-subtitle-color: #ffffff;
    --hero-overlay-color: rgba(10, 25, 15, 0.70);

    /* Custom Packaging Colors */
    --cp-bg-color: #ffffff;
    --cp-title-color: #0e3c31;
    --cp-subtitle-color: #666666;
    --cp-card-bg-color: #f9f9f9;
    --cp-card-border-color: #eeeeee;
    --cp-card-hover-border-color: #49889d;
    --cp-text-color: #666666;

    

    /* About Section Colors */

    --about-bg-color: #ffffff;

    --about-title-color: #0e3c31;

    --about-text-color: #0e3c31;

    --about-icon-bg-color: #49889d;

    --about-icon-color: #ffffff;

    --about-card-bg-color: #ffffff;

    --about-card-border-color: #e9ecef;

    --about-card-hover-border-color: #49889d;

    

    /* Statistics Colors */

    --stats-bg-start: #49889d;

    --stats-bg-end: #bdbdbd;

    --stats-text-color: #ffffff;

    --stats-number-color: #ffffff;

    

    /* Products Section Colors */

    --products-bg-color: #f8f9fa;

    --products-title-color: #0e3c31;

    --products-card-bg-color: #ffffff;

    --products-card-shadow-color: rgba(42, 128, 90, 0.1);

    --products-card-hover-shadow-color: rgba(42, 128, 90, 0.2);

    --products-title-text-color: #0e3c31;

    --products-desc-color: #666666;

    --products-overlay-bg: rgba(73, 136, 157, 0.5);

    

    /* Contact Section Colors */

    --contact-bg-color: #ededed;

    --contact-title-color: #0e3c31;

    --contact-text-color: #333333;

    --contact-icon-bg-color: #49889d;

    --contact-icon-color: #ffffff;

    --contact-form-bg-color: #49889d;

    --contact-input-bg-color: #ffffff;

    --contact-input-border-color: #000000;

    --contact-input-focus-border-color: #6e6e6e;

    --contact-button-bg-color: #0e3c31;

    --contact-button-text-color: #ffffff;

    --contact-button-hover-bg-color: #000000;

    

    /* Footer Colors */

    --footer-bg-color: #212121;

    --footer-text-color: #ffffff;

    --footer-link-color: #ffffff;

    --footer-link-hover-color: #8f8f8f;

    

    /* Global Colors */

    --primary-color: #0e3c31;

    --secondary-color: #4caf50;

    --accent-color: #66bb6a;

    --success-color: #000000;

    --warning-color: #ffc107;

    --error-color: #dc3545;

    --info-color: #17a2b8;

}



/* Apply CSS Variables to Elements */



/* Navigation */

.navbar {

    background: #ffffff !important;

}



.nav-logo h2 {

    color: var(--header-text-color) !important;

}



.nav-link {

    color: var(--header-link-color) !important;

}



.nav-link:hover {

    color: var(--header-link-hover-color) !important;

}



.nav-link::after {

    background-color: var(--header-link-hover-color) !important;

}



/* Hero Section - Only apply background color when no background image exists */
.hero:not([style*="background-image"]) {
    background-color: var(--hero-bg-color) !important;
}

.hero-overlay {
    background: var(--hero-overlay-color) !important;
}



.hero-content h1 {

    color: var(--hero-title-color) !important;

}



.hero-content p {

    color: var(--hero-subtitle-color) !important;

}



/* About Section */

.about {

    background: var(--about-bg-color) !important;

}



.about .section-title {

    color: var(--about-title-color) !important;

}



.section-title::after {

    background: linear-gradient(to right, var(--about-title-color), var(--header-link-hover-color)) !important;

}



.about-details h3 {

    color: var(--about-title-color) !important;

}



.about-details p {

    color: var(--about-text-color) !important;

}



.about-icon {

    background: linear-gradient(135deg, var(--about-icon-bg-color), var(--header-link-hover-color)) !important;

    color: var(--about-icon-color) !important;

}



.about-item {

    background: var(--about-card-bg-color) !important;

    border-left-color: var(--about-card-border-color) !important;

}



.about-item:hover {

    border-left-color: var(--about-card-hover-border-color) !important;

}



/* Statistics */

.stat-card {

    background: linear-gradient(135deg, var(--stats-bg-start), var(--stats-bg-end)) !important;

    color: var(--stats-text-color) !important;

}



.stat-number {

    color: var(--stats-number-color) !important;

}



/* Products Section */

.products {

    background: var(--products-bg-color) !important;

}



.products .section-title {

    color: var(--products-title-color) !important;

}



.product-card {

    background: var(--products-card-bg-color) !important;

    box-shadow: 0 10px 30px var(--products-card-shadow-color) !important;

}



.product-card:hover {

    box-shadow: 0 15px 40px var(--products-card-hover-shadow-color) !important;

}



.product-card h3 {

    color: var(--products-title-text-color) !important;

}



.product-card p {

    color: var(--products-desc-color) !important;

}



.image-overlay {

    background: var(--products-overlay-bg) !important;

}



/* Contact Section */

.contact {

    background: var(--contact-bg-color) !important;

}



.contact .section-title {

    color: var(--contact-title-color) !important;

}



.contact-details h3 {

    color: var(--contact-title-color) !important;

}



.contact-details p {

    color: var(--contact-text-color) !important;

}



.contact-icon {

    background: var(--contact-icon-bg-color) !important;

    color: var(--contact-icon-color) !important;

}



.contact-form {

    background: var(--contact-form-bg-color) !important;

}



.form-group input,

.form-group textarea {

    background: var(--contact-input-bg-color) !important;

    border-color: var(--contact-input-border-color) !important;

}



.form-group input:focus,

.form-group textarea:focus {

    border-color: var(--contact-input-focus-border-color) !important;

}



.btn-submit {

    background: var(--contact-button-bg-color) !important;

    color: var(--contact-button-text-color) !important;

}



.btn-submit:hover {

    background: var(--contact-button-hover-bg-color) !important;

}



/* Footer */

.footer {

    background: var(--footer-bg-color) !important;

    color: var(--footer-text-color) !important;

}



.footer-links a {

    color: var(--footer-link-color) !important;

}



.footer-links a:hover {

    color: var(--footer-link-hover-color) !important;

}



.social-links a {

    color: var(--footer-link-color) !important;

}



.social-links a:hover {

    color: var(--footer-link-hover-color) !important;

}



/* Form Messages */

.form-message.success {

    background-color: var(--success-color) !important;

}



.form-message.error {

    background-color: var(--error-color) !important;

}



/* Global Elements */

.btn-primary {

    background-color: var(--primary-color) !important;

}



.btn-secondary {

    background-color: var(--secondary-color) !important;

}



.alert-success {

    background-color: var(--success-color) !important;

}



.alert-warning {

    background-color: var(--warning-color) !important;

}



.alert-error {

    background-color: var(--error-color) !important;

}



.alert-info {

    background-color: var(--info-color) !important;

}