/* ---------------------------------------------
   Global Brand Styles – based on brandkit.md
--------------------------------------------- */

:root {
  /* Color Palette */
  --color-cornflower: #6ea8ff;        /* Cornflower Blue (Primary Accent) */
  --color-deep-slate: #2b4976;        /* Deep Slate Blue (Text / Headings) */
  --color-light-blue-wash: #e6f0ff;   /* Light Blue Wash (Backgrounds) */
  --color-soft-gray-bg: #f5f7fa;      /* Soft Gray Background (Body BG) */
  --color-white: #ffffff;             /* Pure White (Card bg, etc.) */
  
  --bg: var(--color-light-blue-wash); /* body background */
  --card:var(--color-white);
  --text:#0f1724;
  --muted:#556577;
  --accent:#6495ED;              /* cornflower blue */
  --accent-600:#4A86D8;
  --radius:0.75rem;
  --maxw:1100px;
  --site-padding:1.25rem;
  --border-style: none;
  
  /* Typography */
  --font-family-base: "Inter",system-ui,"Segoe UI","Roboto","Helvetica Neue",Arial;
  --font-size-base: 1rem;
  
  /* Spacing / Layout */
  --radius-card: 0.75rem;
  --shadow-card: 0 0.3rem 0.6rem rgba(0,0,0,.08);
  --brand-logo-height: 10rem;
  
  /* Theme variables - default (light blue) theme */
  --theme-bg: var(--color-light-blue-wash);
  --theme-card-bg: var(--color-white);
  --theme-text: #0f1724;
  --theme-muted: #556577;
  --theme-accent: var(--color-cornflower);
  --theme-accent-600: var(--color-deep-slate);
  --theme-header-bg: var(--color-light-blue-wash);
  --theme-btn-bg: var(--color-cornflower);
  --theme-btn-hover: #5a92e6;
  --theme-border-radius: var(--radius-card);
  --theme-shadow: var(--shadow-card);
}

/* --------------------------------------------------
   Pure‑Black Theme – “black” (or “darkest”) 
-------------------------------------------------- */
[data-theme="black"] {
  /* Backgrounds */
  --theme-bg: #000;                     /* page background      */
  --theme-card-bg: #111;                /* card panels          */

  /* Text & accents */
  --theme-text: #e0e0e0;                /* main body text       */
  --theme-muted: #a3a3a3;               /* muted / secondary    */
  --theme-accent: #fffb00;              /* accent (orange)      */
  --theme-accent-600: #ccb800;          /* darker accent        */

  /* Header & nav */
  --theme-header-bg: #111;              /* header background    */
  --theme-btn-bg: var(--theme-accent);  /* button bg            */
  --theme-btn-hover: var(--theme-accent-600); /* button hover     */

  /* Border radius / shadow – keep the flat look that matches your design */
  --theme-border-radius: 0.75rem;       /* or change to 0 if you prefer a completely square look   */
  --theme-shadow: 0 2px 6px rgba(0,0,0,.5);
}

/* Theme Definitions */
/* Dark Theme */
[data-theme="dark"] {
  --theme-bg: #121212;
  --theme-card-bg: #1e1e1e;
  --theme-text: #f0f0f0;
  --theme-muted: #aaa;
  --theme-accent: #4dabf7;
  --theme-accent-600: #339af0;
  --theme-header-bg: #1a1a1a;
  --theme-btn-bg: #4dabf7;
  --theme-btn-hover: #339af0;
  --theme-border-radius: var(--radius);
  --theme-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

/* Blue Theme */
[data-theme="blue"] {
  --theme-bg: #e6f0ff;
  --theme-card-bg: #ffffff;
  --theme-text: #1a365d;
  --theme-muted: #4a5568;
  --theme-accent: #2b6cb0;
  --theme-accent-600: #2c5282;
  --theme-header-bg: #3182ce;
  --theme-btn-bg: #3182ce;
  --theme-btn-hover: #2b6cb0;
  --theme-border-radius: var(--radius);
  --theme-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

/* Grey Theme */
[data-theme="grey"] {
  --theme-bg: #f8fafc;
  --theme-card-bg: #ffffff;
  --theme-text: #334155;
  --theme-muted: #64748b;
  --theme-accent: #64748b;
  --theme-accent-600: #475569;
  --theme-header-bg: #e2e8f0;
  --theme-btn-bg: #94a3b8;
  --theme-btn-hover: #64748b;
  --theme-border-radius: var(--radius);
  --theme-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

/* Modern Flat Theme */
[data-theme="flat"] {
  --theme-bg: #f1f5f9;
  --theme-card-bg: #ffffff;
  --theme-text: #334155;
  --theme-muted: #64748b;
  --theme-accent: #0ea5e9;
  --theme-accent-600: #0284c7;
  --theme-header-bg: #ffffff;
  --theme-btn-bg: #0ea5e9;
  --theme-btn-hover: #0284c7;
  --theme-border-radius: 0;
  --theme-shadow: none;
}

/* Light Gradient Theme */
[data-theme="gradient"] {
  --theme-bg: linear-gradient(135deg, #e0f2fe, #dbeafe);
  --theme-card-bg: #ffffff;
  --theme-text: #1e293b;
  --theme-muted: #64748b;
  --theme-accent: #0ea5e9;
  --theme-accent-600: #0284c7;
  --theme-header-bg: linear-gradient(135deg, #dbeafe, #bfdbfe);
  --theme-btn-bg: #0ea5e9;
  --theme-btn-hover: #0284c7;
  --theme-border-radius: var(--radius);
  --theme-shadow: 0 4px 6px rgba(0,0,0,0.05);
}

/* Vibrant Theme */
[data-theme="vibrant"] {
  --theme-bg: linear-gradient(135deg, #f093fb, #f5576c);
  --theme-card-bg: #ffffff;
  --theme-text: #1e293b;
  --theme-muted: #475569;
  --theme-accent: #f5576c;
  --theme-accent-600: #f093fb;
  --theme-header-bg: linear-gradient(135deg, #f5576c, #f093fb);
  --theme-btn-bg: #f5576c;
  --theme-btn-hover: #f093fb;
  --theme-border-radius: var(--radius);
  --theme-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* Colorful High Contrast Theme */
[data-theme="contrast"] {
  --theme-bg: #000000;
  --theme-card-bg: #ffffff;
  --theme-text: #ffffff;
  --theme-muted: #cccccc;
  --theme-accent: #ff00ff;
  --theme-accent-600: #ff0099;
  --theme-header-bg: #000000;
  --theme-btn-bg: #ff00ff;
  --theme-btn-hover: #ff0099;
  --theme-border-radius: var(--radius);
  --theme-shadow: 0 4px 8px rgba(255,255,255,0.2);
}

/* Additional Theme Suggestions */
/* Minimalist Theme */
[data-theme="minimal"] {
  --theme-bg: #ffffff;
  --theme-card-bg: #ffffff;
  --theme-text: #333333;
  --theme-muted: #777777;
  --theme-accent: #007acc;
  --theme-accent-600: #005a9e;
  --theme-header-bg: #ffffff;
  --theme-btn-bg: #007acc;
  --theme-btn-hover: #005a9e;
  --theme-border-radius: 0;
  --theme-shadow: none;
}

/* Nature Theme */
[data-theme="nature"] {
  --theme-bg: linear-gradient(135deg, #c8e6c9, #a5d6a7);
  --theme-card-bg: #ffffff;
  --theme-text: #2e7d32;
  --theme-muted: #388e3c;
  --theme-accent: #4caf50;
  --theme-accent-600: #388e3c;
  --theme-header-bg: linear-gradient(135deg, #a5d6a7, #81c784);
  --theme-btn-bg: #4caf50;
  --theme-btn-hover: #388e3c;
  --theme-border-radius: var(--radius);
  --theme-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

/* Tech Theme */
[data-theme="tech"] {
  --theme-bg: #0f172a;
  --theme-card-bg: #1e293b;
  --theme-text: #f8fafc;
  --theme-muted: #94a3b8;
  --theme-accent: #38bdf8;
  --theme-accent-600: #0ea5e9;
  --theme-header-bg: #1e293b;
  --theme-btn-bg: #38bdf8;
  --theme-btn-hover: #0ea5e9;
  --theme-border-radius: var(--radius);
  --theme-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

/* Reset & Base */
*, *::before, *::after { box-sizing:border-box; }
html,body{height:100%;}
body{
  margin:0;
  font-family:var(--font-family-base);
  background:var(--theme-bg);color:var(--theme-text);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
.container{
    max-width:var(--maxw);
    margin:0 auto;
    padding:1.75rem var(--site-padding);
}

a { text-decoration:none; color:inherit; }

/* Header – full width, logo left, nav right */
header {
  background-color:var(--theme-header-bg);
  padding:1rem 2.5rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
}
nav a {
  margin-left:0.9375rem;   /* 15px → 0.9375rem */
  font-weight:600;
  color:#555;
  padding-bottom:0.2rem;
}
nav a:hover { color:var(--theme-accent-600); }
nav a.active {
  border-bottom:0.1875rem solid var(--theme-accent);
}

/* Card */
.card {
    background-color: var(--theme-card-bg);
    border-radius:var(--theme-border-radius);
    box-shadow:var(--theme-shadow);
    padding:1.25rem;
    margin-bottom:1rem;
    border: black;
    border-style: var(--border-style);
}

/* Buttons */
.btn {
  display:inline-block;
  background-color:var(--theme-btn-bg);
  color:white;
  padding:0.75rem 1.5rem;   /* 12px 24px → 0.75rem 1.5rem */
  border-radius:0.5rem;     /* 8px → 0.5rem */
  font-weight:700;
  transition: all 0.3s ease;
}
.btn:hover { 
  opacity:.9; 
  background-color: var(--theme-btn-hover);
}

/* Utility */
.mt-10 { margin-top:2.5rem; }      /* 40px → 2.5rem */
.mb-5 { margin-bottom:1.5625rem; } /* 25px → 1.5625rem */
.ml-5 { margin-left:1.5625rem; }   /* 25px → 1.5625rem */
.text-muted { color:var(--theme-muted); font-size:.95rem; }

.about-container {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    border: yellow;
    border-style: var(--border-style);
}
.about-container-right {
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-start;
    border: yellow;
    border-style: var(--border-style);
}
.about-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    border: purple;
    border-style: var(--border-style);
}

.about-image {
    flex: 0 0 30%;
    min-width:var(--brand-logo-height);
    padding-right:1.25rem;
    border: darkgoldenrod;
    border-style: var(--border-style);
}

.about-image img {
    display: block;          /* removes that tiny bottom gap of inline images */
    max-width: 100%;         /* caps width at 100% of the flex item */
    height: auto;            /* keeps aspect ratio */
}

.contact-container {
    display: flex;
    flex-direction: column;
    height: 900;
}
.contact-content {
    display: flex;
    flex-direction: row;
}

.contact-left {
    flex: 0 0 30%;
    min-width: var(--brand-logo-height);
    padding-right: 0.75rem;
}
.contact-left-content {
    flex-direction: column;
    align-items: center;
}

.contact-right {
    flex: 1;
}
/* 1️⃣  Make the card itself a flex container   */
.contact-left .card {
    display: flex;                 /* horizontal layout */
    align-items: center;           /* vertical centering of children */
    gap: 0.75rem;                  /* small space between icon & text */
}

/* 2️⃣  Icon column – reserve ~20 % of the width   */
.contact-left .card .icon {
    flex: 0 0 20%;                 /* keep it at 20 % (≈1/5) */
    max-width: 20%;
    display: flex;                 /* centre icon inside this box */
    justify-content: center;
    align-items: center;
}

/* 3️⃣  Text column – take the rest of the space   */
.contact-left .card .text {
    flex: 1;                       /* take all remaining width */
}

/* 4️⃣  If you decide to give the icon a fixed size,
      you can override it here (e.g. 48 px)        */
.icon img, .icon svg {
    max-width: 100%;
    height: auto;
}


.service-container {
    display: flex;
    flex-direction: column;
}

/* Ensure nav is aligned to the right */
.brand-logo { max-width:var(--brand-logo-height); max-height:var(--brand-logo-height); width:auto; height:auto; border-radius:0.25rem; }
.brand-header {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
}
.brand-overlap {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    display: flex;
}
.brand-title {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  font-size:1.2rem;
  color:var(--theme-accent-600);
  padding: 1rem;
}

.brand-content {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  height:10rem; /* Same as logo height */
}

.brand-nav {
  flex-direction: row;
  justify-content: flex-end;
  display: flex;
}
/* Header title */
.brand-title-content h1 {
    margin: 0;          /* remove default top/bottom margins */
}
.services-content {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 160px;
}

.grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.125rem;           /* 18px → 1.125rem */
  margin-top:1.75rem;     /* 28px → 1.75rem */
}
.service h3{margin:0 0 0.5rem;}          /* 8px → 0.5rem */
.service p{margin:0;color:var(--theme-muted);}

/* --------------------------------------------------
   Card‑styled service header
-------------------------------------------------- */
.label-header {
    display: flex;
    align-items: center;
    justify-content: space-between;   /* space for icon/cta if needed */
    padding: 0.75rem 0.75rem;               /* tighter than normal card padding */
    background: linear-gradient(
        to bottom,
        #e1e5f0,          /* ≈ 10 % darker than #e6f0ff */
        var(--theme-bg) /* fade to pure white at the bottom */
    );    
    background-color: var(--theme-header-bg); /* subtle accent */
    border-radius: var(--theme-border-radius);
    box-shadow: var(--theme-shadow);                 /* optional – keep it flat like a heading */
    margin-bottom: 0.5rem;
    }

.label-title {
  font-size: 1.4rem;
  color: var(--theme-accent-600);
  margin: 0;
}

.site-footer{
  color:var(--theme-muted);
  font-size:0.875rem;        /* 14px → 0.875rem */
  text-align:center;
}

@media (max-width:60rem){ /* 960px → 60rem */
  .hero{flex-direction:column;}
  .brand-title .site{font-size:1.125rem;}   /* 18px → 1.125rem */
  .hero h1{font-size:2.875rem;}             /* 46px → 2.875rem */
  .grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:40rem){ /* 640px → 40rem */
  nav{display:none;}
  .grid{grid-template-columns:1fr;}
  .mark{width:3.5rem;height:3.5rem;}        /* 56px → 3.5rem */
  .hero h1{font-size:2.25rem;}             /* 36px → 2.25rem */
}