/* Balaji Services - Green Theme Color Scheme */
/* Based on the company logo colors */

:root {
    /* Primary Green Colors - From Logo */
    --balaji-primary: #2E8B57;      /* Sea Green - Main brand color */
    --balaji-secondary: #228B22;    /* Forest Green - Darker shade */
    --balaji-accent: #32CD32;       /* Lime Green - Bright accent */
    --balaji-light: #98FB98;        /* Pale Green - Light backgrounds */
    --balaji-lighter: #F0FFF0;      /* Honeydew - Very light backgrounds */
    
    /* Text Colors */
    --balaji-text-dark: #2F4F2F;    /* Dark Slate Gray */
    --balaji-text-medium: #556B2F;   /* Dark Olive Green */
    --balaji-text-light: #8FBC8F;   /* Dark Sea Green */
    
    /* Utility Colors */
    --balaji-white: #ffffff;
    --balaji-border: #90EE90;        /* Light Green borders */
    --balaji-shadow: rgba(46, 139, 87, 0.15);
    --balaji-hover: rgba(46, 139, 87, 0.1);
    
    /* Status Colors */
    --balaji-success: #228B22;       /* Forest Green */
    --balaji-warning: #FFD700;       /* Gold */
    --balaji-error: #DC143C;         /* Crimson */
    --balaji-info: #20B2AA;          /* Light Sea Green */
}

/* Apply theme colors to common elements */
.balaji-theme {
    --primary-color: var(--balaji-primary);
    --secondary-color: var(--balaji-secondary);
    --accent-color: var(--balaji-accent);
    --text-dark: var(--balaji-text-dark);
    --text-light: var(--balaji-text-medium);
    --bg-light: var(--balaji-lighter);
    --border-color: var(--balaji-border);
    --success-color: var(--balaji-success);
}

/* Button Styles with Green Theme */
.btn-balaji-primary {
    background: linear-gradient(135deg, var(--balaji-primary) 0%, var(--balaji-accent) 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 6px;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 3px 12px var(--balaji-shadow);
}

.btn-balaji-primary:hover {
    background: linear-gradient(135deg, var(--balaji-secondary) 0%, var(--balaji-primary) 100%);
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(46, 139, 87, 0.3);
}

.btn-balaji-secondary {
    background: transparent;
    color: var(--balaji-primary);
    border: 2px solid var(--balaji-primary);
    padding: 10px 22px;
    border-radius: 6px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-balaji-secondary:hover {
    background: var(--balaji-primary);
    color: white;
}

/* Card Styles */
.card-balaji {
    background: white;
    border: 1px solid var(--balaji-border);
    border-radius: 10px;
    box-shadow: 0 2px 10px var(--balaji-shadow);
    transition: all 0.3s ease;
}

.card-balaji:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 20px rgba(46, 139, 87, 0.2);
    border-color: var(--balaji-primary);
}

/* Header Styles */
.header-balaji {
    background: white;
    border-bottom: 2px solid var(--balaji-border);
    box-shadow: 0 2px 10px var(--balaji-shadow);
}

.nav-balaji {
    background: var(--balaji-lighter);
}

.nav-balaji a {
    color: var(--balaji-text-dark);
    transition: all 0.3s ease;
}

.nav-balaji a:hover {
    color: var(--balaji-primary);
    background: var(--balaji-hover);
}

/* Footer Styles */
.footer-balaji {
    background: var(--balaji-secondary);
    color: white;
}

.footer-balaji a {
    color: rgba(255, 255, 255, 0.8);
}

.footer-balaji a:hover {
    color: white;
}

/* Form Styles */
.form-balaji input,
.form-balaji select,
.form-balaji textarea {
    border: 2px solid var(--balaji-border);
    border-radius: 6px;
    padding: 10px 15px;
    transition: all 0.3s ease;
}

.form-balaji input:focus,
.form-balaji select:focus,
.form-balaji textarea:focus {
    border-color: var(--balaji-primary);
    box-shadow: 0 0 0 3px var(--balaji-hover);
    outline: none;
}

/* Alert Styles */
.alert-balaji-success {
    background: var(--balaji-lighter);
    border: 1px solid var(--balaji-success);
    color: var(--balaji-text-dark);
    padding: 12px 16px;
    border-radius: 6px;
}

.alert-balaji-info {
    background: #E0FFFF;
    border: 1px solid var(--balaji-info);
    color: var(--balaji-text-dark);
    padding: 12px 16px;
    border-radius: 6px;
}

/* Badge Styles */
.badge-balaji {
    background: var(--balaji-primary);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
}

.badge-balaji-light {
    background: var(--balaji-light);
    color: var(--balaji-text-dark);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
}

/* Progress Bar */
.progress-balaji {
    background: var(--balaji-lighter);
    border-radius: 10px;
    height: 8px;
    overflow: hidden;
}

.progress-balaji-bar {
    background: linear-gradient(90deg, var(--balaji-primary) 0%, var(--balaji-accent) 100%);
    height: 100%;
    transition: width 0.3s ease;
}

/* Utility Classes */
.text-balaji-primary { color: var(--balaji-primary) !important; }
.text-balaji-secondary { color: var(--balaji-secondary) !important; }
.text-balaji-accent { color: var(--balaji-accent) !important; }
.text-balaji-dark { color: var(--balaji-text-dark) !important; }

.bg-balaji-primary { background-color: var(--balaji-primary) !important; }
.bg-balaji-secondary { background-color: var(--balaji-secondary) !important; }
.bg-balaji-light { background-color: var(--balaji-light) !important; }
.bg-balaji-lighter { background-color: var(--balaji-lighter) !important; }

.border-balaji-primary { border-color: var(--balaji-primary) !important; }
.border-balaji-light { border-color: var(--balaji-border) !important; }

/* Hover Effects */
.hover-balaji-primary:hover { color: var(--balaji-primary) !important; }
.hover-balaji-bg:hover { background-color: var(--balaji-hover) !important; }

/* Gradient Backgrounds */
.gradient-balaji-primary {
    background: linear-gradient(135deg, var(--balaji-primary) 0%, var(--balaji-accent) 100%);
}

.gradient-balaji-secondary {
    background: linear-gradient(135deg, var(--balaji-secondary) 0%, var(--balaji-primary) 100%);
}

.gradient-balaji-light {
    background: linear-gradient(135deg, var(--balaji-lighter) 0%, var(--balaji-light) 100%);
}