/* ==========================================================================
   1. FONTS
   ========================================================================== */

/* 1.1 Import Custom Fonts */
@font-face {
  font-family: 'Bahnschrift';
  src: url('../fonts/Bahnschrift/BAHNSCHRIFT.ttf');
}

@font-face {
  font-family: 'barlowCondensed';
  src: url('../fonts/Barlow_Condensed/BarlowCondensed-Medium.ttf');
}

@font-face {
  font-family: 'Staatliches-Regular';
  src: url('../fonts/Staatliches/Staatliches-Regular.ttf');
}

@font-face {
  font-family: 'BigShouldersDisplay';
  src: url('../fonts/Big_Shoulders_Display/BigShouldersDisplay-VariableFont_wght.ttf');
}

@font-face {
  font-family: 'SourceSans3 VariableFont';
  src: url('../fonts/SourceSans3/SourceSans3-VariableFont_wght.ttf');
}

@font-face {
  font-family: 'SpaceMono';
  src: url('../fonts/Space_Mono/SpaceMono-Regular.ttf');
}

@font-face {
  font-family: "Sohne";
  src: url("../fonts/TestSohan/woff/sohne-book.woff") format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Sohne";
  src: url("../fonts/TestSohan/woff/sohne-semi-fat.woff") format('woff');
  font-weight: bold;
  font-style: normal;
}

/* 1.2 Font Family Utility Classes */
.fs-primary {
  font-family: 'Sohne', sans-serif;
}

.fs-secondary {
  font-family: 'barlowCondensed', sans-serif;
}

.fs-heading {
  font-family: 'Staatliches-Regular', cursive;
}

.fs-display {
  font-family: 'BigShouldersDisplay', sans-serif;
}

.fs-spacemono {
  font-family: 'SpaceMono', monospace;
}

/* ==========================================================================
   2. THEME VARIABLES & BODY DEFAULTS
   ========================================================================== */

/* :root contains global CSS variables for the light theme (default) */
:root,
[data-bs-theme="light"] {
  /* Core Theme Colors */
  --primary-color: #ff9d00;
  --primary-color-rgb: rgb(255, 157, 0, ); /* Note: trailing comma in rgb() might be an issue in some parsers */
  --accent-color: #ffbc00;
  --accent-color-rgb: 255, 188, 0;
  --bg-gradient: linear-gradient(315deg, #ffc400, #ff6f00);

  /* Base Theme Colors (Light Mode Defaults) */
  --bg-main-color: #e8e9ec;
  --panel-bg-color: rgba(255, 255, 255, 0.8); /* Semi-transparent white for panels */
  --panel-bg-color-in: rgba(0, 0, 0, 0.774); /* Semi-transparent black for inner panel elements */
  --panel-bg-mode: #d4d5d6; /* Solid background for panels, distinct from main bg */
  --border-color: #cdcdcd;
  --text-color: #383838;
  --text-color-rgb: 29, 29, 29;
  --text-color-in: #ffffff; /* Text color for elements on dark/colored backgrounds */
  --placeholder-color: #909090;
  --hover-bg-color: rgba(0, 0, 0, 0.05); /* Light hover background color */
  --inverse: #ffffff; /* Typically used for text on primary color backgrounds */

  /* Transparency Layers (Black-based for Light Mode) */
  --transparent-01: rgba(0, 0, 0, 0.1);
  --transparent-02: rgba(0, 0, 0, 0.2);
  --transparent-03: rgba(0, 0, 0, 0.3);
  --transparent-04: rgba(0, 0, 0, 0.4);
  --transparent-05: rgba(0, 0, 0, 0.5);

  /* Transparency Layers (White-based for Light Mode, e.g., on dark elements) */
  --transparent-in-01: rgba(255, 255, 255, 0.1);
  --transparent-in-02: rgba(255, 255, 255, 0.2);
  --transparent-in-03: rgba(255, 255, 255, 0.3);
  --transparent-in-04: rgba(255, 255, 255, 0.4);
  --transparent-in-05: rgba(255, 255, 255, 0.5);

  /* Note: --hover-bg-color is defined twice. The second one will take precedence if not a typo. */
  /* --hover-bg-color: rgba(0, 0, 0, 0.05); */ /* Already defined above */
  --inverse-color: #000000; /* Contrast color for inverse backgrounds (e.g., text on white) */

  /* Fixed Colors (Unaffected by Theme Mode) */
  --fixed-black: #000000;
  --fixed-black-rgb: 0, 0, 0;
  --fixed-white: #ffffff;
  --fixed-white-rgb: 255, 255, 255;

  /* Footer Specific */
  --footer-gradient-start: #212529;
  --footer-gradient-end: #000000;
  --text-on-fixed-dark: #e0e0e0; /* Text color for use on fixed dark backgrounds like the footer */

  /* Variables for About Us Section (Light Mode) */
  --about-section-bg: var(--panel-bg-mode);
  --about-section-text: var(--text-color);
  --about-section-muted-text: var(--placeholder-color);
  --about-vertical-text-color: rgba(var(--text-color-rgb), 0.05); /* Very subtle text for decorative purposes */
  --about-certified-box-bg: var(--panel-bg-color);
  --about-image-shadow: var(--transparent-black-03); /* Renamed from --transparent-black-03 for clarity, assuming it's black */

  /* Variables for Our Services Section (Light Mode) */
  --services-section-bg: var(--panel-bg-mode);
  --services-section-text: var(--text-color);
  --services-section-muted-text: var(--placeholder-color);
  --services-card-bg-blur: rgba(var(--text-color-rgb), 0.05); /* Background for blurred card effect */
  --services-card-border-blur: var(--transparent-black-004); /* Assuming this means a very light black border, e.g., rgba(0,0,0,0.04) */
  --services-card-hover-shadow: var(--transparent-black-03); /* Shadow on hover for service cards */
  --services-lines-stroke: var(--transparent-black-02); /* Color for decorative lines/strokes */

  /* Default Font & Cursor */
  font-family: 'Sohne', sans-serif; /* Default font for the root, inherited by the body */
  cursor: auto; /* Default cursor */
}

/* 2.2 Dark Mode Theme Variables */
/* These variables override the :root variables when data-bs-theme="dark" is active */
[data-bs-theme="dark"] {
  /* Base Theme Colors (Dark Mode Overrides) */
  --bg-main-color: #0e0505;
  --panel-bg-color: rgba(31, 31, 31, 0.774); /* Semi-transparent dark grey for panels */
  --panel-bg-color-in: rgba(255, 255, 255, 0.8); /* Semi-transparent light for inner panel elements */
  --panel-bg-mode: #130000; /* Solid dark background for panels */
  --border-color: #606060;
  --text-color: white;
  --placeholder-color: #e1e1e1;
  --text-color-rgb: 255, 255, 255;
  --text-color-in: #1d1d1d; /* Text color for elements on light/colored backgrounds */
  --text-hover-color: white; /* Explicit text hover color for dark mode */
  --hover-bg-color: rgba(255, 255, 255, 0.06); /* Light hover background color for dark mode */
  --inverse: #000000; /* Typically used for text on primary color backgrounds */

  /* Transparency Layers (White-based for Dark Mode) */
  --transparent-01: rgba(255, 255, 255, 0.1);
  --transparent-02: rgba(255, 255, 255, 0.2);
  --transparent-03: rgba(255, 255, 255, 0.3);
  --transparent-04: rgba(255, 255, 255, 0.4);
  --transparent-05: rgba(255, 255, 255, 0.5);

  /* Transparency Layers (Black-based for Dark Mode, e.g., on light elements) */
  --transparent-in-01: rgba(0, 0, 0, 0.1);
  --transparent-in-02: rgba(0, 0, 0, 0.2);
  --transparent-in-03: rgba(0, 0, 0, 0.3);
  --transparent-in-04: rgba(0, 0, 0, 0.4);
  --transparent-in-05: rgba(0, 0, 0, 0.5);

  /* Note: --hover-bg-color is defined twice. The second one will take precedence. */
  /* --hover-bg-color: rgba(255, 255, 255, 0.06); */ /* Already defined above in this block */
  --inverse-color: #ffffff; /* Contrast color for inverse backgrounds (e.g., text on black) */

  /* Variables for About Us Section (Dark Mode) */
  --about-section-bg: #0f0f0f;
  --about-vertical-text-color: rgba(var(--fixed-white-rgb), 0.05); /* Subtle white text for decorative purposes */
  --about-certified-box-bg: #222222;
  --about-image-shadow: rgba(var(--fixed-black-rgb), 0.3); /* Darker shadow for images */

  /* Variables for Our Services Section (Dark Mode) */
  --services-section-bg: #1a1a2e; /* A distinct dark blue/purple background */
  --services-card-bg-blur: rgba(var(--fixed-white-rgb), 0.05); /* Background for blurred card effect */
  --services-card-border-blur: rgba(var(--fixed-white-rgb), 0.1); /* Light border for blurred cards */
  --services-card-hover-shadow: rgba(var(--fixed-black-rgb), 0.3); /* Shadow on hover for service cards */
  --services-lines-stroke: rgba(var(--fixed-white-rgb), 0.2); /* Color for decorative lines/strokes */
}

/* 2.1 Default Theme (Applied to body) */
/* This comment might be slightly misnumbered or refers to the default setup before dark mode overrides */
body {
  font-family: var(--fs-primary-font, 'Sohne', sans-serif); /* Uses --fs-primary-font if defined, otherwise Sohne */
  background-color: var(--bg-main-color);
  color: var(--text-color);
  margin: 0;
  line-height: 1.6;
}

/* Theme Color Utility Classes */
.bg-primary {
  background-color: var(--primary-color) !important;
}
.text-primary{
  color: var(--primary-color) !important;
}
.text-primary-hvr:hover{
  color: var(--primary-color) !important;
}

/* ==========================================================================
   3. W3 METRO & AKG COLOR UTILITIES (Example Color Palettes)
   ========================================================================== */

/*-------------- W3 Metro COLORS --------------*/
/* These are standalone utility classes providing specific background and text colors. */
.w3-metro-light-green {
  color: #fff;
  background-color: #99b433;
}
.w3-metro-green {
  color: #fff;
  background-color: #00a300;
}
.w3-metro-dark-green {
  color: #fff;
  background-color: #1e7145;
}
.w3-metro-magenta {
  color: #fff;
  background-color: #ff0097;
}
.w3-metro-light-purple {
  color: #fff;
  background-color: #9f00a7;
}
.w3-metro-purple {
  color: #fff;
  background-color: #7e3878;
}
.w3-metro-dark-purple {
  color: #fff;
  background-color: #603cba;
}
.w3-metro-darken {
  color: #fff;
  background-color: #1d1d1d;
}
.w3-metro-teal {
  color: #fff;
  background-color: #00aba9;
}
.w3-metro-light-blue {
  color: #000; /* Note: Text color is black for this light blue background */
  background-color: #eff4ff;
}
.w3-metro-blue {
  color: #fff;
  background-color: #2d89ef;
}
.w3-metro-dark-blue {
  color: #fff;
  background-color: #2b5797;
}
.w3-metro-yellow {
  color: #fff;
  background-color: #ffc40d;
}
.w3-metro-orange {
  color: #fff;
  background-color: #e3a21a;
}
.w3-metro-dark-orange {
  color: #fff;
  background-color: #da532c;
}
.w3-metro-red {
  color: #fff;
  background-color: #ee1111;
}
.w3-metro-dark-red {
  color: #fff;
  background-color: #b91d47;
}

/*-------------- AKG COLORS --------------*/
/* Generic heading and paragraph colors, assuming --h-color and --p-color are defined elsewhere or within theme vars */
h1,h2,h3,h4,h5,h6{
    color:var(--h-color); /* Heading color variable */
}
p{
    color:var(--p-color); /* Paragraph color variable */
}

/* AKG Background Color Utilities */
.akg-primary{
    background-color: #1976d2;
    color:white;
}
.akg-secondary{
    background-color: #26a69a;
    color:white;
}
.akg-accent{
    background-color: #9c27b0;
    color:white;
}
.akg-dark{
    background-color: #1d1d1d;
    color:white;
}
.akg-positive{
    background-color: #21ba45;
    color:white;
}
.akg-negative{
    background-color: #c10015;
    color:white;
}
.akg-info{
    background-color: #31ccec;
    color:black;
}
.akg-warning{
    background-color: #f2c037;
    color:black;
}

/* AKG Red Shades */
.akg-red{ background-color: #f44336; color:white; }
.akg-red-1{ background-color: #ffcdd2; color:black; }
.akg-red-2{ background-color: #ff8a80; color:black; }
.akg-red-3{ background-color: #e57373; color:black; }
.akg-red-4{ background-color: #f44336; color: white; } /* Same as .akg-red */
.akg-red-5{ background-color: #c62828; color:white; }

/* AKG Pink Shades */
.akg-pink{ background-color: #e63a70; color:white; }
.akg-pink-1{ background-color: #f8bbd0; color:black; }
.akg-pink-2{ background-color: #ff80ab; color:black; }
.akg-pink-3{ background-color: #ff4081; color:white; }
.akg-pink-4{ background-color: #d81b60; color:white; }
.akg-pink-5{ background-color: #c51162; color:white; }

/* AKG Purple Shades */
.akg-purple{ background-color: #9c27b0; color:white; }
.akg-purple-1{ background-color: #ea80fc; color:black; }
.akg-purple-2{ background-color: #d500f9; color:white; }
.akg-purple-3{ background-color: #aa00ff; color:white; }
.akg-purple-4{ background-color: #ab47bc; color:white; }
.akg-purple-5{ background-color: #6a1b9a; color:white; }

/* AKG Blue Shades */
.akg-blue{ background-color: #2196f3; color:white; }
.akg-blue-1{ background-color: #bbdefb; color:black; }
.akg-blue-2{ background-color: #64b5f6; color:black; }
.akg-blue-3{ background-color: #039be5; color:white; }
.akg-blue-4{ background-color: #0277bd; color:white; }
.akg-blue-5{ background-color: #0d47a1; color:white; }

/* AKG Cyan Shades */
.akg-cyan{ background-color: #00bcd4; color:black; }
.akg-cyan-1{ background-color: #84ffff; color:black; }
.akg-cyan-2{ background-color: #18ffff; color:black; }
.akg-cyan-3{ background-color: #00b8d4; color:black; }
.akg-cyan-4{ background-color: #0097a7; color:white; }
.akg-cyan-5{ background-color: #006064; color:white; }

/* AKG Teal Shades */
.akg-teal{ background-color: #009688; color:white; }
.akg-teal-1{ background-color: #80cbc4; color:black; }
.akg-teal-2{ background-color: #26a69a; color:black; } /* Also .akg-secondary */
.akg-teal-3{ background-color: #00bfa5; color:black; }
.akg-teal-4{ background-color: #00897b; color:white; }
.akg-teal-5{ background-color: #004d40; color:white; }

/* AKG Green Shades */
.akg-green{ background-color: #4caf50; color:white; }
.akg-green-1{ background-color: #b9f6ca; color:black; }
.akg-green-2{ background-color: #69f0ae; color:black; }
.akg-green-3{ background-color: #aeea00; color:black; }
.akg-green-4{ background-color: #8bc34a; color:black; }
.akg-green-5{ background-color: #1b5e20; color:white; }

/* AKG Yellow Shades */
.akg-yellow{ background-color: #ffeb3b; color:black; }
.akg-yellow-1{ background-color: #ffff8d; color:black; }
.akg-yellow-2{ background-color: #ffea00; color:black; }
.akg-yellow-3{ background-color: #fdd835; color:black; }
.akg-yellow-4{ background-color: #ffd600; color:black; }
.akg-yellow-5{ background-color: #fbc02d; color:white; } /* Note: text color change */

/* AKG Orange Shades */
.akg-orange{ background-color: #ff9800; color:white; }
.akg-orange-1{ background-color: #ffcc80; color:black; }
.akg-orange-2{ background-color: #ffa726; color:white; }
.akg-orange-3{ background-color: #fb8c00; color:black; }
.akg-orange-4{ background-color: #ef6c00; color:black; }
.akg-orange-5{ background-color: #ff5722; color:white; }

/* AKG Brown Shades */
.akg-brown{ background-color: #795548; color:white; }
.akg-brown-1{ background-color: #bcaaa4; color:black; }
.akg-brown-2{ background-color: #a1887f; color:black; }
.akg-brown-3{ background-color: #795548; color:white; } /* Same as .akg-brown */
.akg-brown-4{ background-color: #5d4037; color:white; }
.akg-brown-5{ background-color: #3e2723; color:white; }

/* AKG Grey Shades */
.akg-grey{ background-color: #9e9e9e; color:black; }
.akg-grey-1{ background-color: #fafafa; color:black; }
.akg-grey-2{ background-color: #f5f5f5; color:black; }
.akg-grey-3{ background-color: #eeeeee; color:black; }
.akg-grey-4{ background-color: #e0e0e0; color:black; }
.akg-grey-5{ background-color: #bdbdbd; color:black; }

/* AKG Blue Grey Shades */
.akg-blue-grey{ background-color: #607d8b; color:white; }
.akg-blue-grey-1{ background-color: #cfd8dc; color:black; }
.akg-blue-grey-2{ background-color: #b0bec5; color:black; }
.akg-blue-grey-3{ background-color: #90a4ae; color:black; }
.akg-blue-grey-4{ background-color: #607d8b; color:black; } /* Note: Text color black vs .akg-blue-grey */
.akg-blue-grey-5{ background-color: #455a64; color:white; }

/*-------------- AKG Text Color Utilities --------------*/
.akg-text-primary{ color: #1976d2; }
.akg-text-secondary{ color: #26a69a; }
.akg-text-accent{ color: #9c27b0; }
.akg-text-dark{ color: #1d1d1d; }
.akg-text-positive{ color: #21ba45; }
.akg-text-negative{ color: #c10015; }
.akg-text-info{ color: #31ccec; }
.akg-text-warning{ color: #f2c037; }

/* AKG Text Red Shades */
.akg-text-red{ color: #f44336; }
.akg-text-red-1{ color: #ffcdd2; }
.akg-text-red-2{ color: #ff8a80; }
.akg-text-red-3{ color: #e57373; }
.akg-text-red-4{ color: #f44336; }
.akg-text-red-5{ color: #c62828; }

/* AKG Text Pink Shades */
.akg-text-pink{ color: #e63a70; }
.akg-text-pink-1{ color: #f8bbd0; }
.akg-text-pink-2{ color: #ff80ab; }
.akg-text-pink-3{ color: #ff4081; }
.akg-text-pink-4{ color: #d81b60; }
.akg-text-pink-5{ color: #c51162; }

/* AKG Text Purple Shades */
.akg-text-purple{ color: #9c27b0; }
.akg-text-purple-1{ color: #ea80fc; }
.akg-text-purple-2{ color: #d500f9; }
.akg-text-purple-3{ color: #aa00ff; }
.akg-text-purple-4{ color: #ab47bc; }
.akg-text-purple-5{ color: #6a1b9a; }

/* AKG Text Blue Shades */
.akg-text-blue{ color: #2196f3; }
.akg-text-blue-1{ color: #bbdefb; }
.akg-text-blue-2{ color: #64b5f6; }
.akg-text-blue-3{ color: #039be5; }
.akg-text-blue-4{ color: #0277bd; }
.akg-text-blue-5{ color: #0d47a1; }

/* AKG Text Cyan Shades */
.akg-text-cyan{ color: #00bcd4; }
.akg-text-cyan-1{ color: #84ffff; }
.akg-text-cyan-2{ color: #18ffff; }
.akg-text-cyan-3{ color: #00b8d4; }
.akg-text-cyan-4{ color: #0097a7; }
.akg-text-cyan-5{ color: #006064; }

/* AKG Text Teal Shades */
.akg-text-teal{ color: #009688; }
.akg-text-teal-1{ color: #80cbc4; }
.akg-text-teal-2{ color: #26a69a; }
.akg-text-teal-3{ color: #00bfa5; }
.akg-text-teal-4{ color: #00897b; }
.akg-text-teal-5{ color: #004d40; }

/* AKG Text Green Shades */
.akg-text-green{ color: #4caf50; }
.akg-text-green-1{ color: #b9f6ca; }
.akg-text-green-2{ color: #69f0ae; }
.akg-text-green-3{ color: #aeea00; }
.akg-text-green-4{ color: #8bc34a; }
.akg-text-green-5{ color: #1b5e20; }

/* AKG Text Yellow Shades */
.akg-text-yellow{ color: #ffeb3b; }
.akg-text-yellow-1{ color: #ffff8d; }
.akg-text-yellow-2{ color: #ffea00; }
.akg-text-yellow-3{ color: #fdd835; }
.akg-text-yellow-4{ color: #ffd600; }
.akg-text-yellow-5{ color: #fbc02d; }

/* AKG Text Orange Shades */
.akg-text-orange{ color: #ff9800; }
.akg-text-orange-1{ color: #ffcc80; }
.akg-text-orange-2{ color: #ffa726; }
.akg-text-orange-3{ color: #fb8c00; }
.akg-text-orange-4{ color: #ef6c00; }
.akg-text-orange-5{ color: #ff5722; }

/* AKG Text Brown Shades */
.akg-text-brown{ color: #795548; }
.akg-text-brown-1{ color: #bcaaa4; }
.akg-text-brown-2{ color: #a1887f; }
.akg-text-brown-3{ color: #795548; }
.akg-text-brown-4{ color: #5d4037; }
.akg-text-brown-5{ color: #3e2723; }

/* AKG Text Grey Shades */
.akg-text-grey{ color: #9e9e9e; }
.akg-text-grey-1{ color: #fafafa; }
.akg-text-grey-2{ color: #f5f5f5; }
.akg-text-grey-3{ color: #eeeeee; }
.akg-text-grey-4{ color: #e0e0e0; }
.akg-text-grey-5{ color: #bdbdbd; }

/* AKG Text Blue Grey Shades */
.akg-text-blue-grey{ color: #607d8b; }
.akg-text-blue-grey-1{ color: #cfd8dc; }
.akg-text-blue-grey-2{ color: #b0bec5; }
.akg-text-blue-grey-3{ color: #90a4ae; }
.akg-text-blue-grey-4{ color: #607d8b; }
.akg-text-blue-grey-5{ color: #455a64; }

/* ==========================================================================
   4. SELECTION & SCROLLBAR STYLES (Re-numerated for logical flow, was 4)
   ========================================================================== */

/* Selection style - Using theme color */
::selection {
    background-color: var(--primary-color); /* Theme color for text selection background */
    color: white; /* Text color during selection */
}

/* Custom scrollbar - Using theme color (WebKit browsers) */
::-webkit-scrollbar {
    background-color: black; /* Scrollbar track color */
    width: 5px; /* Width of the scrollbar */
}

::-webkit-scrollbar-thumb {
    background-color: var(--primary-color); /* Scrollbar thumb color (theme color) */
}

::-webkit-scrollbar-thumb:active {
    background-color: white; /* Scrollbar thumb color when active/clicked */
}

/* ==========================================================================
   5. AKG UTILITIES (Theme-aware) & SHADOWS
   ========================================================================== */
/* --- AKG Utility Classes (using theme variables) --- */
.akg-hover-border:hover {
  box-shadow: var(--transparent-black-02, rgba(0,0,0,0.2)) 0px 0px 5px; /* Subtle shadow on hover, fallback if variable not found */
}

.akg-no-background {
  background: none;
  border: none;
  /* color:var(--text-color); */ /* This was in original, removed as .akg-no-background usually implies only bg/border reset */
}

.akg-border-color {
  border-color: var(--transparent-black-05, rgba(0,0,0,0.5)); /* Border color using a transparency variable, with fallback */
}

/* --- Simplified Shadow Classes --- */
.akg-shadow-1 {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  transition: box-shadow 0.25s ease-in-out;
}
.akg-shadow-1:hover {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}
.akg-shadow-2 {
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}
.akg-shadow-3 {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}
.akg-shadow-4 {
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}
.akg-shadow-5 {
  box-shadow: 0 19px 38px rgba(0, 0, 0, 0.30), 0 15px 12px rgba(0, 0, 0, 0.22);
}

/* --- Text Shadow Classes --- */
.akg-text-shadow-1 {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  transition: text-shadow 0.25s ease-in-out;
}
.akg-text-shadow-1:hover {
  text-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}
.akg-text-shadow-2 {
  text-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}
.akg-text-shadow-3 {
  text-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}
.akg-text-shadow-4 {
  text-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}
.akg-text-shadow-5 {
  text-shadow: 0 19px 38px rgba(0, 0, 0, 0.30), 0 15px 12px rgba(0, 0, 0, 0.22);
}

/* ==========================================================================
   6. FORM ELEMENT STYLES
   ========================================================================== */

/* Custom styles for various input types, select, textarea, and input groups */


select{
    display: inline-block; /* Ensures select behaves like other inputs */
}

select option{
    background-color: var(--panel-bg-mode); /* Background for dropdown options */
    color: var(--p-color, var(--text-color)); /* Text color for dropdown options, fallback to text-color */
}

textarea,select{
    border-top: 0px !important;
    border-left: 0px !important;
    border-right: 0px !important;
    /* Only bottom border will be styled on focus */
}



/* Placeholder text color styling for various browsers */
::-webkit-input-placeholder{
    color: var(--p-color, var(--placeholder-color)); /* Fallback to placeholder-color if --p-color is not defined */
}
::-ms-input-placeholder{ /* Microsoft Edge */
    color: var(--p-color, var(--placeholder-color));
}
::-moz-placeholder{ /* Firefox */
    color: var(--p-color, var(--placeholder-color));
    opacity: 1; /* Firefox Fix */
}
::placeholder{
    color: var(--p-color, var(--placeholder-color));
}

/* ==========================================================================
   7. GENERAL LAYOUT & UTILITIES
   ========================================================================== */

/* Base background and text color for body and .bg-main class */
body, .bg-main { /* .bg-main allows applying main background to specific containers */
    background: var(--bg-main-color);
    color: var(--text-color);
}

/* Styles for elements with .bg-item class (e.g., cards, panels) */
.bg-item{
    background: var(--panel-bg-color); /* Uses semi-transparent panel background */
    color:var(--text-color); /* Inherits text color, or specify if different */
}

/* Styles for inner elements within .bg-item, potentially with contrasting background/text */
.bg-item-in{
  background-color: var(--panel-bg-color-in); /* Contrasting panel inner background */
  color: var(--text-color-in); /* Contrasting text color for inner panel */
}

main,header{
    display:block; /* Ensures proper block-level rendering for semantic HTML5 elements */
}

html, body {
  overflow-x: hidden; /* Prevent horizontal scrolling on the page */
}

.item-border{
    border:1px solid var(--border-color); /* Utility class for adding a standard border */
}

/* Centering utility for text and flex items */
.all-center{
    height: 100%; /* Useful for vertical centering in flex containers */
    text-align: center; /* Center inline content */
    align-items: center; /* For flexbox vertical alignment */
    /* display: flex; justify-content: center; might be needed depending on context */
}

/* Forces text color on all child elements, useful for overriding nested styles */
.text-color *{
    color:var(--text-color) !important;
}

/* Custom box style with centered text, large font, and bold weight */
.akg-box{
    text-align: center;
    font-size: x-large;
    font-weight: bold;
}

/* Item box with margin, border-radius, and overflow hidden */
.item-box{
    margin: 15px;
    border-radius: 15px;
    overflow: hidden; /* Clips content exceeding rounded corners */
}

/* Dark transparent overlay */
.transparent-dark{
    background: rgba(0, 0, 0, 0.4); /* Semi-transparent black background */
    color: white; /* Text color for readability on dark overlay */
}

/* ==========================================================================
   8. MARQUEE TEXT STYLES
   ========================================================================== */
.marquee-text {
    box-sizing: border-box;
    display: flex; /* Changed from original comment to actual display flex */
    align-items: center;
    overflow: hidden; /* Essential for marquee effect */
}

.marquee-text .top-info-bar {
    font-size: 18px;
    width: 200%; /* Double width to allow for continuous scroll */
    display: flex;
    animation: marquee 25s linear infinite running; /* CSS animation for marquee */
}

.marquee-text .top-info-bar:hover {
    animation-play-state: paused; /* Pause marquee on hover */
}

.marquee-text .top-info-bar .info-text {
    padding: 10px 30px;
    white-space: nowrap; /* Prevent text from wrapping */
    display: inline-flex; /* Aligns items correctly within the flex bar */
    align-items: center;
    justify-content: center;
    transition: all .2s ease; /* Smooth transition for any interactive elements */
}

.marquee-text .top-info-bar a {
  text-decoration:none;
  color: inherit; /* Inherit color from parent .info-text or .top-info-bar */
}
.marquee-text .top-info-bar a:hover{
  color: var(--primary-color); /* Change link color on hover */
}

/* --- Marquee Animation Keyframes --- */
@-moz-keyframes marquee { /* Firefox */
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
@-webkit-keyframes marquee { /* Safari & Chrome */
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
@-o-keyframes marquee { /* Opera */
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
@keyframes marquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); /* Moves content left by half its width */ }
}

/* ==========================================================================
   9. UPDATE BOX STYLES (e.g., for news, announcements)
   ========================================================================== */
.update-box tr{
    border: 0px; /* Remove borders from table rows within update-box */
}

.update-box li:hover{
    background:var(--hover-bg-color); /* Background color on list item hover */
}

.update-box a{
    text-decoration: none;
    transition: 0.5s; /* Smooth transition for hover effects */
    display: block; /* Make entire link area clickable */
    color: inherit; /* Inherit text color */
}

.update-box a:hover,
.update-box li:hover > a { /* Target link when list item or link itself is hovered */
    padding-left: 15px; /* Indent text on hover */
    text-decoration: underline;
    color: var(--text-color); /* Ensure text color is consistent on hover */
}

.update-box .scrollable-box{
    overflow-y: scroll; /* Enable vertical scrolling */
    height: 305px; /* Fixed height for the scrollable area */
}

.update-box ul{
    padding-left: 0px; /* Remove default list padding */
    margin-bottom: 0; /* Remove default list margin */
}

.update-box li{
    padding: 10px;
    list-style: none; /* Remove default list bullets */
}

.update-box li .fas{ /* Assuming Font Awesome icons */
    visibility: hidden; /* Hide icons by default */
    margin-right: 5px; /* Space between icon and text */
}

.update-box li:hover > a .fas{ /* Show icon on list item hover when link is a child */
    visibility: visible;
}

/* ==========================================================================
   10. LOGIN & REGISTER WINDOW STYLES
   ========================================================================== */
.login-window, .register-window{
    padding: 20px;
    margin: 20px -11px; /* Negative margin might be for alignment compensation */
    background-size: 100% auto; /* Background image sizing */
    background-repeat: repeat; /* Background image repeat behavior */
    /* background-image: url(...); was likely intended here */
}

.login-window .card,
.login-window .login-info,
.register-window .card{
    background: var(--panel-bg-color); /* Use theme panel background */
    box-shadow: 1px 1px 2px #000; /* Simple shadow for depth (consider using theme shadow variables) */
    border-radius: 5px;
}

/* ==========================================================================
   11. HERO IMAGE & OVERLAYS
   ========================================================================== */
.hero-img {
  position: relative; /* Needed for absolute positioning of child overlay elements */
  text-align: center; /* Centers the image if it's inline-block or has margin auto */
}

.hero-img img {
  max-width: 350px; /* Example constraint, adjust as needed */
  height: auto; /* Maintain aspect ratio */
  margin: auto; /* Center block-level image */
  display: block; /* Ensure margin auto works */
}

/* --- Overlay Elements for Hero Image --- */
/* General styles for overlay tags/badges/cards on the hero image */
.projects-tag,
.rating-badge,
.profile-card {
  position: absolute; /* Positioned relative to .hero-img */
  background-color: var(--panel-bg-color, rgba(255, 255, 255, 0.9)); /* Default to panel bg or light semi-transparent */
  color: var(--text-color, #333); /* Default to theme text color */
  padding: 0.5rem 1rem;
  border-radius: 0.375rem; /* Bootstrap's rounded-2 equivalent */
  box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075); /* Bootstrap's shadow-sm */
  font-size: 0.875rem;
  text-align: center;
}

/* Example positioning for specific overlay elements */
.projects-tag {
  top: 20px;
  left: 0px;
  /* Additional styling specific to projects-tag can go here */
}

.rating-badge {
  bottom: 50px;
  left: 0px;
  /* Additional styling specific to rating-badge */
}

.profile-card {
  top: 50%;
  right: 0px;
  transform: translateY(-50%); /* Vertically center if height is known or content dictates */
  /* Additional styling specific to profile-card */
}

/* Animation Note:
   If using data-aos for animations, ensure the AOS library is initialized.
   If using animate.css, ensure it's linked in your HTML.
*/

/* For the slideUp animation if not defined elsewhere by a library */
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* Elements using this animation would need a class like:
   .animate-slideUp { animation: slideUp 0.5s ease-out forwards; }
*/

/* ==========================================================================
   12. PUBLIC PAGES HEADER STYLES
   ========================================================================== */
.public-main-header .navbar a.nav-link {
  color: var(--primary-color); /* Nav links use primary theme color */
}

.public-main-header .nav-link:hover,
.public-main-header .nav-link:focus {
  color: var(--accent-color); /* Nav links use accent theme color on hover/focus */
}
/* End of Public Pages Header Style */


/* --- Glassmorphism Background for Navbar/Elements --- */
.bg-glass {
  /* background: rgba(255, 255, 255, 0.2); /* Example glass effect, adjust as needed */
  background-color: var(--primary-color); /* Fallback or base color, primary might be too opaque for glass */
  /* Consider using a semi-transparent version of panel-bg-color or a new variable */
  /* backdrop-filter: blur(10px); */ /* Key for glassmorphism, uncomment if desired */
  /* -webkit-backdrop-filter: blur(10px); */ /* Safari support */
  /* border: 1px solid rgba(255, 255, 255, 0.3); */ /* Optional subtle border */
  /* box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); */ /* Optional shadow */
}

.bg-glass .nav-link {
  color: #000 !important; /* Text color for links on glass background (ensure contrast) */
}

.bg-glass .nav-link:hover {
  background-color: wheat; /* Example hover background, adjust for theme */
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); /* Shadow appears on hover */
  /* The backdrop-filter properties are usually on the parent .bg-glass, not on hover of child */
}

/* ==========================================================================
   13. CARD & LINK STYLES
   ========================================================================== */

/* Optional: Subtle hover effect for cards */
.card.shadow-sm:hover {
  transform: translateY(-3px); /* Slight lift effect */
  box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15) !important; /* Bootstrap's shadow-lg, more prominent shadow */
  transition: transform .2s ease-out, box-shadow .2s ease-out;
}

/* --- Service Link Card Style --- */
.service-link-card {
  display: block; /* Makes the entire card clickable if it's an <a> tag */
  text-decoration: none;
  border: 2px solid rgba(255, 193, 7, 0.3); /* Soft warning/primary color border */
  border-radius: 0.30rem; /* Rounded corners */
  padding: 1.25rem;
  text-align: center;
  transition: all 0.3s ease-in-out; /* Smooth transitions for all properties */
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.04); /* Subtle default shadow */
  background-color: var(--panel-bg-color, white); /* Use panel background or default white */
}

.service-link-card:hover,
.service-link-card:focus {
  transform: translateY(-6px); /* More prominent lift on hover */
  box-shadow: 0 1rem 1.5rem rgba(255, 193, 7, 0.2); /* Yellowish glow shadow */
  border-color: var(--primary-color, #ffc107); /* Solid warning/primary border on hover */
}

.service-link-card .icon-wrapper {
  width: 60px;
  height: 60px;
  border-radius: 50%; /* Circular icon background */
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem auto; /* Center icon and add space below */
  font-size: 1.75rem; /* Icon size */
  transition: all 0.3s ease;
  background-color: var(--primary-color-rgb, rgba(255,157,0,0.1)); /* Light primary bg for icon wrapper */
  color: var(--primary-color, #ff9d00); /* Icon color */
}

.service-link-card:hover .icon-wrapper,
.service-link-card:focus .icon-wrapper {
  transform: scale(1.1); /* Enlarge icon wrapper on hover */
  background-color: var(--primary-color, #e6ac00); /* Darker primary color on hover */
  color: var(--text-color-in, white); /* Text color for icon on hover */
}

.service-link-card .service-title {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
  color: var(--text-color, var(--panel-bg-color-in)); /* Service title color */
  display: block; /* Ensures it takes full width if needed */
}

.service-link-card .service-description {
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--placeholder-color, #6c757d); /* Muted color for description */
}

/* --- Custom Search Input --- */
.search-input-custom {
  border-radius: 0.5rem; /* Match card radius or standard rounding */
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); /* Subtle shadow */
  padding: 0.75rem 1rem; /* More padding for input field */
  border: 1px solid var(--border-color, #ced4da); /* Standard border */
  /* Inherits background and color from general input styles or specify here */
}

/* --- Mini Service Item (Style 1) --- */
/* This seems to be the more complete definition for a mini service item. */
.mini-service-item {
  display: block; /* Makes the entire <a> tag a block element */
  text-decoration: none;
  transition: all 0.25s ease-in-out;
  border-radius: 0.10rem; /* Standard Bootstrap border-radius */
  background-color: var(--panel-bg-mode, #f8f9fa); /* Light grey or panel mode color */
  color: var(--text-color, #212529); /* Dark text or theme text color */
  padding: 1rem 0.75rem;
  text-align: center;
  border: 1px solid var(--border-color, #dee2e6); /* Light border */
}

.mini-service-item:hover,
.mini-service-item:focus {
  transform: translateY(-4px);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1); /* Standard hover shadow */
  background-color: var(--hover-bg-color, #e9ecef); /* Hover background */
  border-color: var(--primary-color, #adb5bd); /* Primary or darker border on hover */
}

.mini-service-item i { /* Icon style within mini service item */
  font-size: 1.75rem; /* Smaller icon */
  margin-bottom: 0.5rem;
  display: block; /* Icon on its own line */
  color: var(--primary-color); /* Icon color, using Bootstrap primary variable as an example */
}

.mini-service-item span { /* Text style within mini service item */
  font-size: 0.8rem; /* Smaller text */
  font-weight: 600;
  display: block; /* Text on its own line */
  line-height: 1.2;
}

/* --- Mini Service Item (Style 2 - Potentially redundant or base style) --- */
/* This definition is a subset of the one above. If used on the same element,
   properties from the above rule (like background-color, color, padding, border) will still apply
   unless overridden by a more specific rule.
   The hover effect below will override the previous .mini-service-item:hover. */
.mini-service-item { /* This re-declares some common properties. */
  display: block; /* Makes the entire <a> tag a block element */
  text-decoration: none;
  transition: all 0.25s ease-in-out;
  border-radius: 0.375rem; /* Standard Bootstrap border-radius */
}

.mini-service-item:hover, /* This hover rule will apply to ALL .mini-service-item elements due to CSS cascade order. */
.mini-service-item:focus {
  transform: translateY(-4px);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
  /* Note: This hover does not re-specify background-color or border-color,
     so the ones from the previous .mini-service-item:hover will be used if that rule also matched.
     This can lead to unexpected styling if not managed carefully. */
}

/* --- Link Box Style 12: Color-Coded Icon Circle with Text --- */
.link-box-12 {
  display: block; text-decoration: none; /* Common for link boxes */
  color: var(--text-color, #343a40);
  padding: 0.75rem;
  text-align: center;
  border: 1px solid transparent; /* For hover effect alignment */
  background-color: var(--panel-bg-color, var(--bs-white, white)); /* Panel bg or white */
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); /* Subtle shadow */
  border-radius: 0.15rem; /* Added for consistency */
  transition: all 0.25s ease-in-out; /* Smooth transition */
}
.link-box-12:hover,
.link-box-12:focus {
  border-color: var(--primary-color, var(--bs-primary-border-subtle, #ffc107)); /* Primary border on hover */
  background-color: var(--hover-bg-color, var(--bs-primary-bg-subtle, #fff3cd)); /* Light primary bg on hover */
  transform: translateY(-2px); /* Subtle lift */
}
.link-box-12 .icon-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%; /* Circular background for icon */
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 0.5rem auto; /* Center and space below */
  font-size: 1.25rem; /* Icon size */
  background-color: var(--primary-color, #0d6efd); /* Example: primary color for circle */
  color: var(--text-color-in, white); /* Icon color inside circle */
  transition: transform 0.2s ease;
}
.link-box-12:hover .icon-circle,
.link-box-12:focus .icon-circle {
    transform: scale(1.1); /* Scale icon on hover */
}
.link-box-12 span {
  font-size: 0.75rem; /* Text size */
  font-weight: 500;
  display: block;
  line-height: 1.3;
}

/* --- Link Box Style 13: Minimalist Text with Subtle Icon & Bottom Border --- */
.link-box-13 {
  display: block; text-decoration: none; /* Common for link boxes */
  color: var(--text-color, #495057);
  padding: 0.75rem;
  border-bottom: 2px solid var(--border-color, #e9ecef); /* Bottom border */
  transition: all 0.25s ease-in-out; /* Smooth transition */
}
.link-box-13:hover,
.link-box-13:focus {
  color: var(--primary-color);
  border-bottom-color: var(--primary-color);
  background-color: rgba(var(--primary-color-rgb, 255,157,0), 0.05); /* Very light primary bg on hover */
}
.link-box-13 i {
  font-size: 0.9rem; /* Very small icon */
  margin-right: 0.4rem;
  opacity: 0.7; /* Subtle icon */
  vertical-align: middle; /* Align icon with text */
}
.link-box-13 span {
  font-size: 0.8rem;
  font-weight: 500;
  vertical-align: middle; /* Align text with icon */
}

/* --- Link Box Style 14: Pill Shaped Links --- */
.link-box-14 {
  display: inline-block; text-decoration: none; /* Inline block for pill shape */
  color: var(--primary-color);
  padding: 0.5rem 1rem;
  text-align: center;
  border: 1px solid var(--primary-color, var(--bs-primary-border-subtle, #ffc107));
  background-color: var(--transparent-01, var(--bs-primary-bg-subtle, #fff3cd)); /* Light primary bg */
  border-radius: 50rem; /* Pill shape */
  font-size: 0.8rem;
  font-weight: 500;
  transition: all 0.25s ease-in-out; /* Smooth transition */
}
.link-box-14:hover,
.link-box-14:focus {
  background-color: var(--primary-color);
  color: var(--text-color-in, var(--bs-white, white)); /* Text color for on-primary background */
  border-color: var(--primary-color);
}
.link-box-14 i {
  margin-right: 0.3rem; /* Space between icon and text */
  font-size: 0.9em; /* Slightly smaller icon relative to text */
}