/* GMAIL */
.btn-gmail {
    background-color: #fce8e6;
    color: #202124;
    border: 1px solid #d93025; /* Gmail red border */
}
.btn-gmail:hover {
    background-color: #ffffff;
    border-color: #d93025;
}
.btn-gmail::before {
    background-image: url('../images/btn-gmail.png');
}

/* Google Calendar */
.btn-calendar {
  background-color: #e8f0fe;
  color: #202124;
  border: 1px solid #1a73e8; /* Google Calendar blue */
}

.btn-calendar::before {
  background-image: url('../images/btn-calendar.png');
}

.btn-calendar:hover {
  background-color: #ffffff;  /* Light blue tint */
  border-color: #1967d2;
}

/* Google Drive */
.btn-drive {
  background-color: #e6f4ea;
  color: #202124;
  border: 1px solid #0f9d58; /* Google Drive green */
}

.btn-drive::before {
  background-image: url('../images/btn-drive.png');
}

.btn-drive:hover {
  background-color: #ffffff;  /* Light green tint */
  border-color: #0b8043;
}

/* Chat GPT */
.btn-chatgpt {
    background-color: #e6f4f1; /* light green tint */
    color: #10a37f;
    border: 1px solid #10a37f;
}

.btn-chatgpt::before {
    background-image: url('../images/btn-chatgpt.png');
}

.btn-chatgpt:hover {
    background-color: #ffffff; /* white on hover */
    border-color: #0e8c6e;
}
/* GitHub */
.btn-github {
    background-color: #f6f8fa; /* light gray tint */
    color: #24292e;
    border: 1px solid #24292e;
}

.btn-github::before {
    background-image: url('../images/btn-github.png');
}

.btn-github:hover {
    background-color: #ffffff; /* white on hover */
    border-color: #1b1f23;
}

.btn-dayone {
    background-color: #e8f0fa;  /* light blue tint */
    color: #0066cc;             /* branded blue */
    border: 1px solid #0066cc;
}

.btn-dayone::before {
    background-image: url('../images/btn-dayone.png');  /* your Day One logo */
}

.btn-dayone:hover {
    background-color: #ffffff;  /* white on hover */
    border-color: #004a99;
}
.btn-tools {
    background-color: #e6f0fe;         /* light blue tint background */
    color: #1a73e8;                    /* bold Google-style blue for text */
    border: 1px solid #1a73e8;
}

.btn-tools::before {
    background-image: url('../images/btn-tools.png'); /* adjust path */
}

.btn-tools:hover {
    background-color: #ffffff;         /* white on hover */
    border-color: #1967d2;
}

.btn-vscode {
    background-color: #e8f0fe;         /* light blue tint */
    color: #007acc;                    /* VS Code blue */
    border: 1px solid #007acc;
}

.btn-vscode::before {
    background-image: url('../images/btn-vscode.png');  /* adjust path if needed */
}

.btn-vscode:hover {
    background-color: #ffffff;         /* white on hover */
    border-color: #005a9e;             /* darker blue for hover effect */
}
.btn-placeholder {
    background-color: #f8f9fa;           /* neutral gray background */
    color: #6c757d;                      /* muted gray text */
    border: 1px dashed #ced4da;          /* dashed border to indicate placeholder */
    font-style: italic;
}

.btn-placeholder::before {
    background-image: url('../images/btn-placeholder.png');  /* your placeholder icon */
}

.btn-placeholder:hover {
    background-color: #ffffff;
    border-color: #adb5bd;
    color: #495057;
}

.btn-adobe {
    background-color: #fce8e6; /* Adobe red */
    border: 1px solid #ff0000;
    color: #202124;
}

.btn-adobe:hover {
    background-color: #ffffff;
    border-color: #d93025;
}

.btn-adobe::before {
    background-image: url('../images/btn-adobe.png');
}

.btn-mongodb {
      background-color: #e6f4ea;
  color: #202124;
  border: 1px solid #0f9d58; /* Google Drive green */
}

.btn-mongodb:hover {
      background-color: #ffffff;  /* Light green tint */
  border-color: #0b8043;
}

.btn-mongodb::before {
    background-image: url('../images/btn-mongodb.png');
}

.btn-cloudflare {
  background-color: #f4f4f5; /* light neutral base */
  color: #f38020;           /* Cloudflare orange */
  border: 1px solid #f38020;
}

.btn-cloudflare:hover {
  background-color: #ffffff;
  border-color: #d96500;
}

.btn-cloudflare::before {
  background-image: url('../images/btn-cloudflare.png');
}

.btn-clients {
  background-color: #e6f4fa; /* soft blue tint */
  color: #0b3e61;            /* navy text for readability */
  border: 1px solid #2a8e91; /* teal-ish tone from bars */
}

.btn-clients:hover {
  background-color: #ffffff;
  border-color: #1e6c6e;
}

.btn-clients::before {
  background-image: url('../images/btn-clients.png');
}

.btn-eventscan {
  background-color: #fef6eb;     /* soft orange tint */
  color: #7a3e00;                /* deep orange-brown text */
  border: 1px solid #d66500;     /* orange tone from chart bars */
}

.btn-eventscan:hover {
  background-color: #ffffff;
  border-color: #aa4f00;
}

.btn-eventscan::before {
  background-image: url('../images/btn-eventscan.png');
}