html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

/* --- 1. Muted Color Palette Definition --- */

/* Muted Steel Blue/Teal (Primary Accent) */
/*:root { --color-primary-accent: #4682B4;*/ /* Steel Blue */ /*--color-primary-dark: #37648d;*/ /* Darker for hover */ /*--color-secondary-accent: #238E2F;*/ /*6B8E23;*/ /* Olive Drab/Muted Green */ /*--color-dark-gray: #333333;*/ /* Dark Text */ /*--color-light-bg: #F5F5F5;*/ /* Off-White Background */ /*--color-blue-light: #E8F1F8;*/ /* Lightest blue for card BG */ /*--color-green-light: #F0F5E8;*/ /* Lightest green for card BG */ /*}*/
:root { --primary-color: #e0f2fe; --secondary-color: #bae6fd; --accent-color: #0ea5e9; --text-color: #0c4a6e; --bg-light: #f8f9fa; --color-primary-accent: #4682B4; /* Steel Blue */ --color-primary-dark: #37648d; /* Darker for hover */ --color-secondary-accent: #238E2F; /*6B8E23;*/ /* Olive Drab/Muted Green */ --color-dark-gray: #333333; /* Dark Text */ --color-light-bg: #F5F5F5; /* Off-White Background */ --color-blue-light: #E8F1F8; /* Lightest blue for card BG */ --color-blue-light-lighter: #eaf2f8; --color-green-light: #F0F5E8; /* Lightest green for card BG */ --color-dark-gray2: #999999; }
/* --- 2. Custom Bootstrap Color Classes --- */

/* Text colors  */
.text-primary-accent { color: var(--color-primary-accent) !important; }
.text-secondary-accent { color: var(--color-secondary-accent) !important; }
.text-dark-gray { color: var(--color-dark-gray) !important; }
.text-light-gray { color: #4d5b7c !important; }

/* Background colors for cards/badges */
.bg-primary-accent { background-color: var(--color-primary-accent) !important; }
.bg-green-accent { background-color: var(--color-secondary-accent) !important; }
.bg-blue-light { background-color: var(--color-blue-light) !important; }
.bg-blue-light-lighter { background-color: var(--color-blue-light-lighter) !important; }
/*b5cde1*/
.bg-green-light { background-color: var(--color-green-light) !important; }
.bg-light-blue { background-color: #f9fafe !important; }
.alert-orange-colour { background-color: #fce5c5 !important; }
.bg-light-blue-counterpart { background-color: #ebeef2 !important; }

/*Borders  */
.border-dark-grey { border-color: var(--color-dark-gray2) !important; }
.border-light-grey { border-color: #e2e4e9 !important; }

/* --- 3. Custom Button Styling --- */

/* Applies to all CTA buttons */
.btn-custom-accent { background-color: var(--color-primary-accent); color: white; /* Always white text for contrast */ border: 1px solid var(--color-primary-accent); transition: background-color 0.3s, transform 0.2s; }
.btn-custom-accent:hover { background-color: var(--color-primary-dark); /* Subtle darker hover */ border-color: var(--color-primary-dark); color: white; transform: translateY(-1px); /* Little lift effect */ }

/* --- 4. Global Appearance Improvements --- */

/* Sets a clean global font (e.g., system-ui or a linked Google Font) var(--color-light-bg)*/
body { font-family: 'Inter', 'Roboto', sans-serif; /* Link an actual font here */ background-color: white; /* Use the off-white base */ color: var(--color-dark-gray); /* Darker text for readability */ }

/* Ensures all default links use your accent color */
a { color: var(--color-primary-accent); }
a:hover { color: var(--color-primary-dark); }

h1 { color: var(--text-secondary-accent); font-weight: bold; }
h2 { color: var(--text-secondary-accent); font-weight:bold; }
.med-image { border: 1px solid rgb(201, 201, 201); border-radius: 6px; box-shadow: rgb(201, 201, 201) 2px 2px 8px; }
/* Increase max width of container element */
@media (min-width: 1200px) { .container {
    max-width: 1240px;
  }
}
/* --- Styling for the overall badge container --- var(--color-green-light)*/
.tech-badge { display: flex; align-items: center; gap: 8px; background-color: white; color: var(--color-dark-gray); padding: 8px 12px; border-radius: 6px; border: 1px solid #999999; font-size: 1rem; font-weight: 500; }
  /*.tech-badge {#dee2e6 display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; background: #f8f9fa; border: 1px solid #e9ecef; border-radius: 8px; font-size: 0.95rem; font-weight: 500; color: #2c3e50; transition: all 0.2s ease; cursor: default; }*/
.tech-badge:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); border-color: #dee2e6; }
/* --- Styling for Font Awesome Icons --- */
.tech-badge i { font-size: 1.2rem; /* Make FA icons slightly larger than text */ color: var(--color-primary-accent); /* Use your accent color for FA icons */ }
/* --- Styling for Embedded SVG/Image Icons --- */
.tech-icon-svg { /* Crucial: Set a fixed size so the SVG matches the FA icons */ width: 20px; height: 20px; /* Often SVGs are monochrome; use filter if needed to match color scheme */ /* filter: grayscale(100%); */ }
.project-card-hover { /* Sets the speed of the transition */ transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out; }
.project-card-hover:hover { /* Lifts the card up by 5 pixels */ transform: translateY(-2px); /* Makes the shadow bigger and darker */ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15) !important; }
/*.tech-badge i { font-size: 1.2rem; }
.tech-badge img { width: 20px; height: 20px; object-fit: contain; }*/
.badge { color: white; background-color: #238e2f; border-radius: 4px; border: 1px solid var(--color-secondary-accent); padding: 6px 10px; font-size: 0.8rem; font-weight: 500; }
.hp-check {position: absolute; left: -9999px;}