:root {
    /* Base Colors */
    --primary-color: #499AD3; /* Main color (soft blue) */
    --overlay-color: rgba(73, 154, 211, 0.90); /* Overlay color with opacity */
    --dark-color: #000000; /* Black */
    --light-color: #FFFFFF; /* White */
    --text-dark: #000000; /* Black for text */
    --secondary-color: #2E6FA8; /* Deeper blue as secondary tone */
    --input-gray: #6b7280; /* Gray for input text */
    --border-gray: #e0e0e0; /* Light gray for borders */
    --shadow-color: rgba(0, 0, 0, 0.05); /* Shadow color */
    --dark-overlay: rgba(27, 27, 27, 0.61); /* Dark overlay for clientReview background */
    --radio-border: #DDE3EC; /* Light gray for radio button border */
    --radio-active: #3B82F6; /* Bright blue for radio active state */
    --input-text-dark: #07074D; /* Dark blue for input text */
    --placeholder-gray: #536387; /* Gray for placeholder text */
    --footer-dark: #062B4F; /* Deep navy for footer top background */
    --background-light: #F3F6F9; /* Light background for productDetails */
    --text-dark-alt: #191C24; /* Dark text/icon color */
    --error-color: #EF4444; /* Red for errors */
    --border-light: #D1D5DB; /* Gray for borders (alternative to border-gray) */
    --hover-primary: #357EB5; /* Darker blue for hover */
    --shadow-light: rgba(0, 0, 0, 0.1); /* Lighter shadow */
    --project-blue: #1E88E5; /* Bright blue for project highlights */
    --project-purple: #5B5FC7; /* Complementary purple tone */
    --project-red: #C62828; /* Red for alert elements */
    --background-gray: #EEEEEE; /* Light gray for body background */
    --button-gray: #AAAAAA; /* Gray for button default state */
    --button-hover: #222222; /* Dark gray for button hover */
    --shadow-medium: rgba(0, 0, 0, 0.15); /* Medium shadow for hover */
    --shadow-dark: rgba(0, 0, 0, 0.3); /* Dark shadow for depth */
    --primary-overlay-color: rgba(73, 154, 211, 0.3); /* Light blue overlay */

    
 

    /* Button Colors (Normal) */
    --btn-primary-bg: var(--primary-color);
    --btn-primary-border: var(--primary-color);
    --btn-primary-text: var(--light-color);

    --btn-secondary-bg: var(--dark-color);
    --btn-secondary-border: var(--dark-color);
    --btn-secondary-text: var(--light-color);

    --btn-success-bg: #770047;
    --btn-success-border: #81004e;
    --btn-success-text: var(--light-color);

    --btn-danger-bg: #dc3545;
    --btn-danger-border: #dc3545;
    --btn-danger-text: var(--light-color);

    --btn-warning-bg: #ffc107;
    --btn-warning-border: #ffc107;
    --btn-warning-text: var(--dark-color);

    --btn-info-bg: #17a2b8;
    --btn-info-border: #17a2b8;
    --btn-info-text: var(--light-color);

    --btn-light-bg: var(--light-color);
    --btn-light-border: var(--light-color);
    --btn-light-text: var(--dark-color);

    --btn-dark-bg: var(--dark-color);
    --btn-dark-border: var(--dark-color);
    --btn-dark-text: var(--light-color);

    /* Button Colors (Outline) */
    --btn-outline-primary-text: var(--primary-color);
    --btn-outline-primary-border: var(--primary-color);
    
    --btn-outline-secondary-text: var(--dark-color);
    --btn-outline-secondary-border: var(--dark-color);

    --btn-outline-success-text: #920158;
    --btn-outline-success-border: #920158;

    --btn-outline-danger-text: #dc3545;
    --btn-outline-danger-border: #dc3545;

    --btn-outline-warning-text: #ffc107;
    --btn-outline-warning-border: #ffc107;

    --btn-outline-info-text: #17a2b8;
    --btn-outline-info-border: #17a2b8;

    --btn-outline-light-text: var(--dark-color);
    --btn-outline-light-border: var(--dark-color);

    --btn-outline-dark-text: var(--dark-color);
    --btn-outline-dark-border: var(--dark-color);

    --btn-outline-link-text: var(--primary-color);
    --bs-btn-hover-bg: var(--hover-primary);
    --bs-btn-hover-border: var(--hover-primary);
    --btn-outline-link-border: transparent;
}
/* Toast Notification Colors */
.toast-message {
    color: var(--light-color);
}
.toast-error {
    background-color: var(--btn-danger-bg);
}
.fa, .fas{
    color: var(--light-color) !important;
}
.up-button .fas {
    color: var(--primary-color) !important;
}
.down-button .fas {
    color: var(--primary-color) !important;
}
.nav-link .fa {
    background-color: var(--primary-color) !important;
}
.sidebar-toggler{
    background-color: var(--primary-color) !important;
}
.left-slide div h1{
    color: var(--light-color) !important;
}
.AboutUsInnerInnerLeft h2{
    color: var(--light-color) !important;
}
.team-contact-info .fas{
    color: var(--primary-color) !important;
}


/* Normal Buttons (Filled) */

/* Primary Button */
.btn-primary {
    background-color: var(--btn-primary-bg);
    border-color: var(--btn-primary-border);
    color: var(--btn-primary-text);
}
.bg-primar{
    background-color: var(--primary-color);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--overlay-color);
    border-color: var(--overlay-color);
    color: var(--light-color);
}

/* Secondary Button */
.btn-secondary {
    background-color: var(--btn-secondary-bg);
    border-color: var(--btn-secondary-border);
    color: var(--btn-secondary-text);
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active {
    background-color: var(--btn-primary-bg);
    border-color: var(--btn-primary-border);
    color: var(--light-color);
}

/* Success Button */
.btn-success {
    background-color: var(--btn-success-bg);
    border-color: var(--btn-success-border);
    color: var(--btn-success-text);
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active {
    background-color: #218838;
    border-color: #218838;
    color: var(--btn-success-text);
}

/* Danger Button */
.btn-danger {
    background-color: var(--btn-danger-bg);
    border-color: var(--btn-danger-border);
    color: var(--btn-danger-text);
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active {
    background-color: #c82333;
    border-color: #c82333;
    color: var(--btn-danger-text);
}

/* Warning Button */
.btn-warning {
    background-color: var(--btn-warning-bg);
    border-color: var(--btn-warning-border);
    color: var(--btn-warning-text);
}

.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active {
    background-color: #e0a800;
    border-color: #e0a800;
    color: var(--btn-warning-text);
}

/* Info Button */
.btn-info {
    background-color: var(--btn-info-bg);
    border-color: var(--btn-info-border);
    color: var(--btn-info-text);
}

.btn-info:hover,
.btn-info:focus,
.btn-info:active {
    background-color: #138496;
    border-color: #138496;
    color: var(--btn-info-text);
}

/* Light Button */
.btn-light {
    background-color: var(--btn-light-bg);
    border-color: var(--btn-light-border);
    color: var(--btn-light-text);
}

.btn-light:hover,
.btn-light:focus,
.btn-light:active {
    background-color: var(--dark-color);
    border-color: var(--dark-color);
    color: var(--light-color);
}

/* Dark Button */
.btn-dark {
    background-color: var(--btn-dark-bg);
    border-color: var(--btn-dark-border);
    color: var(--btn-dark-text);
}

.btn-dark:hover,
.btn-dark:focus,
.btn-dark:active {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--light-color);
}

/* Link Button */
.btn-link {
    color: var(--primary-color);
}

.btn-link:hover,
.btn-link:focus {
    color: var(--overlay-color);
}


/* Outline Buttons */

/* Primary Outline Button */
.btn-outline-primary {
    color: var(--btn-outline-primary-text);
    border-color: var(--btn-outline-primary-border);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
    background-color: var(--btn-outline-primary-border);
    color: var(--light-color);
    border-color: var(--btn-outline-primary-border);
}

/* Secondary Outline Button */
.btn-outline-secondary {
    color: var(--btn-outline-secondary-text);
    border-color: var(--btn-outline-secondary-border);
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-secondary:active {
    background-color: var(--btn-outline-secondary-border);
    color: var(--light-color);
    border-color: var(--btn-outline-secondary-border);
}

/* Success Outline Button */
.btn-outline-success {
    color: var(--btn-outline-success-text);
    border-color: var(--btn-outline-success-border);
}

.btn-outline-success:hover,
.btn-outline-success:focus,
.btn-outline-success:active {
    background-color: var(--btn-outline-success-border);
    color: var(--light-color);
    border-color: var(--btn-outline-success-border);
}

/* Danger Outline Button */
.btn-outline-danger {
    color: var(--btn-outline-danger-text);
    border-color: var(--btn-outline-danger-border);
}

.btn-outline-danger:hover,
.btn-outline-danger:focus,
.btn-outline-danger:active {
    background-color: var(--btn-outline-danger-border);
    color: var(--light-color);
    border-color: var(--btn-outline-danger-border);
}

/* Warning Outline Button */
.btn-outline-warning {
    color: var(--btn-outline-warning-text);
    border-color: var(--btn-outline-warning-border);
}

.btn-outline-warning:hover,
.btn-outline-warning:focus,
.btn-outline-warning:active {
    background-color: var(--btn-outline-warning-border);
    color: var(--light-color);
    border-color: var(--btn-outline-warning-border);
}

/* Info Outline Button */
.btn-outline-info {
    color: var(--btn-outline-info-text);
    border-color: var(--btn-outline-info-border);
}

.btn-outline-info:hover,
.btn-outline-info:focus,
.btn-outline-info:active {
    background-color: var(--btn-outline-info-border);
    color: var(--light-color);
    border-color: var(--btn-outline-info-border);
}

/* Light Outline Button */
.btn-outline-light {
    color: var(--btn-outline-light-text);
    border-color: var(--btn-outline-light-border);
}

.btn-outline-light:hover,
.btn-outline-light:focus,
.btn-outline-light:active {
    background-color: var(--btn-outline-light-border);
    color: var(--light-color);
    border-color: var(--btn-outline-light-border);
}

/* Dark Outline Button */
.btn-outline-dark {
    color: var(--btn-outline-dark-text);
    border-color: var(--btn-outline-dark-border);
}

.btn-outline-dark:hover,
.btn-outline-dark:focus,
.btn-outline-dark:active {
    background-color: var(--btn-outline-dark-border);
    color: var(--light-color);
    border-color: var(--btn-outline-dark-border);
}

/* Link Outline Button */
.btn-outline-link {
    color: var(--btn-outline-link-text);
    border-color: transparent;
}

.btn-outline-link:hover,
.btn-outline-link:focus {
    color: var(--overlay-color);
    border-color: transparent;
}