/* Custom Variables for Easy Customization */
:root {
    /* Background Colors */
    --hero-overlay-color: rgba(0, 0, 0, 0.6);
    --about-bg-start: #f5f7fa;
    --about-bg-end: #c3cfe2;
    --services-bg-start: #f8f9fa;
    --services-bg-end: #e9ecef;
    --special-offer-bg-start: #1a1a1a;
    --special-offer-bg-end: #2d2d2d;
    --contact-bg-start: #f5f7fa;
    --contact-bg-end: #c3cfe2;
    
    /* Header/Navigation Colors */
    --nav-bg: rgba(255, 255, 255, 0.95);
    --nav-btn-bg: #333;
    --nav-btn-color: white;
    --nav-btn-hover-bg: #555;
    
    /* Text Colors */
    --primary-text: #333;
    --secondary-text: #666;
    --light-text: #999;
    --white-text: white;
    
    /* Accent Colors */
    --primary-gradient-start: #667eea;
    --primary-gradient-end: #764ba2;
    --secondary-gradient-start: #fa709a;
    --secondary-gradient-end: #fee140;
    --success-color: #43e97b;
    --info-color: #4facfe;
    
    /* Button Colors */
    --btn-primary-bg: linear-gradient(135deg, var(--primary-gradient-start), var(--primary-gradient-end));
    --btn-secondary-bg: transparent;
    --btn-service-bg: linear-gradient(135deg, var(--secondary-gradient-start), var(--secondary-gradient-end));
    
    /* Card Colors */
    --card-bg: white;
    --card-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
    --card-border: 1px solid rgba(0, 0, 0, 0.05);
}

/* Easy Background Customization Classes */
.custom-hero-overlay {
    background: linear-gradient(135deg, var(--hero-overlay-color), var(--hero-overlay-color));
}

.custom-about-bg {
    background: linear-gradient(135deg, var(--about-bg-start), var(--about-bg-end));
}

.custom-services-bg {
    background: linear-gradient(135deg, var(--services-bg-start), var(--services-bg-end));
}

.custom-special-offer-bg {
    background: linear-gradient(135deg, var(--special-offer-bg-start), var(--special-offer-bg-end));
}

.custom-contact-bg {
    background: linear-gradient(135deg, var(--contact-bg-start), var(--contact-bg-end));
}

/* Easy Header Customization */
.custom-nav {
    background: var(--nav-bg);
}

.custom-nav-btn {
    background: var(--nav-btn-bg);
    color: var(--nav-btn-color);
}

.custom-nav-btn:hover {
    background: var(--nav-btn-hover-bg);
}

/* Easy Text Color Customization */
.custom-primary-text {
    color: var(--primary-text);
}

.custom-secondary-text {
    color: var(--secondary-text);
}

.custom-light-text {
    color: var(--light-text);
}

/* Easy Button Customization */
.custom-btn-primary {
    background: var(--btn-primary-bg);
    color: var(--white-text);
}

.custom-btn-secondary {
    background: var(--btn-secondary-bg);
    color: var(--white-text);
    border: 2px solid var(--white-text);
}

.custom-btn-service {
    background: var(--btn-service-bg);
    color: var(--white-text);
}

/* Instructions for Customization:
   
   To change background colors:
   1. Modify the --*-bg-start and --*-bg-end variables above
   2. Or add custom CSS classes using the .custom-*-bg classes
   
   To change header/navigation colors:
   1. Modify --nav-bg, --nav-btn-bg, --nav-btn-color variables
   2. Or use .custom-nav and .custom-nav-btn classes
   
   To change text colors:
   1. Modify --primary-text, --secondary-text, --light-text variables
   2. Or use .custom-*-text classes
   
   To change button colors:
   1. Modify --btn-*-bg variables
   2. Or use .custom-btn-* classes
   
   Example usage in HTML:
   <section class="about-section custom-about-bg">
   <nav class="navbar custom-nav">
   <button class="btn custom-btn-primary">
*/