/*
  styles.css — Konatek IT Consulting Website
  ============================================
  This single file controls the look and feel of every page on the site.
  All HTML pages link to this one file, so a change here affects everything.

  HOW CSS WORKS:
  - A "rule" looks like:  selector { property: value; }
  - The "selector" picks which HTML element(s) to style.
  - The "property" is what you want to change (e.g. color, font-size).
  - The "value" is what you want it to be (e.g. red, 16px).
*/


/* ─────────────────────────────────────────────────────────
   GOOGLE FONTS — Load custom fonts from the internet
   ─────────────────────────────────────────────────────────
   @import pulls in two font families from Google Fonts:
   - "Orbitron"  → used for headings (h1, h2, h3). It has a techy, futuristic look.
   - "Inter"     → used for all body text. It is clean and very readable.
   The browser downloads these font files automatically when the page loads.
*/
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Inter:wght@300;400;500;600&display=swap');


/* ─────────────────────────────────────────────────────────
   CSS VARIABLES (Custom Properties) — Our Design Tokens
   ─────────────────────────────────────────────────────────
   :root means "apply these to the whole page".
   Variables start with -- and let us reuse the same value everywhere.
   For example, instead of typing #00d4ff in 20 places, we write
   var(--accent-cyan) and only need to update it once here.
*/
:root {
  /* Background colors — from darkest to slightly lighter */
  --bg-primary:   #0a0e1a;   /* Very dark navy — the main page background */
  --bg-secondary: #111827;   /* Slightly lighter navy — used on alternating sections */
  --bg-card:      #1e2535;   /* Dark blue-gray — used for cards and form fields */

  /* Accent colors — the bright highlights that give the site its tech feel */
  --accent-cyan: #00d4ff;    /* Bright cyan/light-blue — used for links, borders, glows */
  --accent-blue: #0066ff;    /* Electric blue — used for primary buttons */

  /* Text colors */
  --text-primary:   #ffffff; /* Pure white — used for headings and important text */
  --text-secondary: #94a3b8; /* Muted blue-gray — used for body paragraphs */

  /* Border colors — semi-transparent so the background shows through slightly */
  --border:       rgba(0, 212, 255, 0.2); /* Faint cyan border (20% opacity) — default state */
  --border-hover: rgba(0, 212, 255, 0.6); /* Brighter cyan border (60% opacity) — on hover */

  /* Glow effect — a soft outer shadow used when hovering over cards and buttons */
  --glow: 0 0 20px rgba(0, 212, 255, 0.3);

  /* Shared values for consistent rounding and animation speed */
  --radius:     8px;    /* How rounded the corners of boxes are */
  --transition: 0.3s ease; /* How fast hover animations play (0.3 seconds, smooth) */
}


/* ─────────────────────────────────────────────────────────
   RESET — Remove browser default spacing
   ─────────────────────────────────────────────────────────
   Different browsers add their own default margins and padding.
   This rule resets everything to zero so our layout is consistent
   across Chrome, Firefox, Safari, Edge, etc.

   * means "every element"
   *::before and *::after are invisible elements browsers can add
   before/after real elements — we reset those too.

   box-sizing: border-box means padding and border are included in
   an element's width/height instead of added on top. This makes
   layout math much easier.
*/
*, *::before, *::after {
  box-sizing: border-box; /* Include padding and border in element size */
  margin: 0;              /* Remove all default outer spacing */
  padding: 0;             /* Remove all default inner spacing */
}


/* ─────────────────────────────────────────────────────────
   HTML — Page-level settings
   ─────────────────────────────────────────────────────────
*/
html {
  /* scroll-behavior: smooth means clicking an anchor link (like #contact)
     glides the page down instead of jumping instantly */
  scroll-behavior: smooth;
}


/* ─────────────────────────────────────────────────────────
   BODY — Default styles for all text and the page background
   ─────────────────────────────────────────────────────────
*/
body {
  font-family: 'Inter', sans-serif; /* Use Inter font; fall back to any sans-serif if it fails to load */
  background-color: var(--bg-primary); /* Dark navy background for the whole page */
  color: var(--text-primary);          /* Default text color is white */
  line-height: 1.7;                    /* Space between lines of text (1.7 = 170% of font size) */
}


/* ─────────────────────────────────────────────────────────
   HEADINGS — h1, h2, h3
   ─────────────────────────────────────────────────────────
*/
h1, h2, h3 {
  font-family: 'Orbitron', monospace; /* Use the futuristic Orbitron font for all headings */
  font-weight: 700;                   /* Bold weight */
  line-height: 1.2;                   /* Tighter line spacing for large headings */
}


/* ─────────────────────────────────────────────────────────
   LINKS — <a> tags
   ─────────────────────────────────────────────────────────
*/
a {
  color: var(--accent-cyan);       /* Links are cyan by default */
  text-decoration: none;           /* Remove the default underline */
  transition: color var(--transition); /* Smoothly animate the color change on hover */
}

/* When the user hovers their mouse over a link */
a:hover {
  color: var(--text-primary); /* Turn white on hover */
}


/* ─────────────────────────────────────────────────────────
   IMAGES
   ─────────────────────────────────────────────────────────
*/
img {
  max-width: 100%; /* Prevent images from overflowing their container */
  display: block;  /* Remove the small gap that appears under images by default */
}


/* ═══════════════════════════════════════════════════════════
   NAV BAR — The sticky navigation at the top of every page
   ═══════════════════════════════════════════════════════════ */

/* The <nav> element itself */
nav {
  position: sticky; /* Sticks to the top of the screen as you scroll down */
  top: 0;           /* Stick to the very top edge */
  z-index: 100;     /* Stay on top of all other elements (higher number = on top) */
  background: rgba(10, 14, 26, 0.95); /* Near-opaque dark navy (95% solid) */
  backdrop-filter: blur(10px);        /* Blurs whatever is behind the nav (glassmorphism effect) */
  border-bottom: 1px solid var(--border); /* Subtle cyan line at the bottom of the nav */
  padding: 0 2rem;  /* Left and right padding (2rem = ~32px) */
}

/* The inner wrapper — centers content and limits max width */
.nav-inner {
  max-width: 1200px; /* Don't stretch wider than 1200px on large screens */
  margin: 0 auto;    /* Center the nav content on wide screens */
  display: flex;     /* Lay out children (logo + links) side by side */
  align-items: center;        /* Vertically center the logo and links */
  justify-content: space-between; /* Push logo to the left, links to the right */
  height: 70px;      /* Fixed height for the nav bar */
}

/* The logo + company name link on the left */
.nav-brand {
  display: flex;      /* Show logo image and "Konatek" text side by side */
  align-items: center; /* Vertically align them */
  gap: 0.75rem;       /* Space between the logo image and the text */
  text-decoration: none; /* No underline on this link */
}

/* The logo image inside the brand link */
.nav-brand img {
  height: 60px;      /* Original size — width scales automatically */
  width: auto;       /* Let the width scale proportionally so the image isn't stretched */
  border-radius: 6px; /* Slightly rounded corners on the logo */
}

/* The "Konatek" text next to the logo */
.nav-brand span {
  font-family: 'Orbitron', monospace; /* Use the techy font for the company name */
  font-size: 1.4rem;   /* Larger than body text */
  font-weight: 900;    /* Extra bold */
  color: var(--text-primary); /* White text */
  letter-spacing: 0.05em;     /* Slightly spread out the letters */
}

/* The list of navigation links on the right */
.nav-links {
  display: flex;       /* Show the links in a row */
  align-items: center; /* Vertically center them */
  gap: 2rem;           /* Space between each link */
  list-style: none;    /* Remove the bullet points from the <ul> list */
}

/* Individual nav link text styling */
.nav-links a {
  color: var(--text-secondary);    /* Muted gray-blue color */
  font-size: 0.9rem;               /* Slightly smaller than body text */
  font-weight: 500;                /* Medium weight */
  letter-spacing: 0.05em;          /* Spread the letters slightly */
  text-transform: uppercase;       /* Make all letters uppercase */
  transition: color var(--transition); /* Smooth color change on hover */
}

/* Nav link hover state */
.nav-links a:hover {
  color: var(--accent-cyan); /* Turn cyan on hover */
}

/* The "Contact Us" button in the nav — styled differently from plain links */
.nav-cta {
  background: var(--accent-blue); /* Solid blue background */
  color: var(--text-primary) !important; /* White text — !important overrides the default link color */
  padding: 0.5rem 1.25rem;       /* Padding inside the button */
  border-radius: var(--radius);  /* Rounded corners */
  /* Animate both background color and the glow shadow on hover */
  transition: background var(--transition), box-shadow var(--transition) !important;
}

/* "Contact Us" button hover state */
.nav-cta:hover {
  background: var(--accent-cyan) !important;  /* Turn cyan on hover */
  color: var(--bg-primary) !important;        /* Dark text on cyan background */
  box-shadow: var(--glow);                    /* Add the cyan glow effect */
}


/* ═══════════════════════════════════════════════════════════
   HERO SECTION — The large banner at the top of each page
   ═══════════════════════════════════════════════════════════ */

/* The hero section container */
.hero {
  position: relative; /* Needed so the ::before glow effect can be positioned inside it */
  padding: 6rem 2rem 5rem; /* Top: 6rem, Left/Right: 2rem, Bottom: 5rem */
  text-align: center; /* Center all text on the home page hero */
  /* Diagonal gradient: dark navy → darker blue → dark navy */
  background: linear-gradient(135deg, #0a0e1a 0%, #0f1e3d 50%, #0a0e1a 100%);
  overflow: hidden;   /* Clip the glow circle so it doesn't spill outside the section */
}

/* A decorative glowing circle in the background of the hero
   ::before is a "pseudo-element" — a fake invisible element inserted before the content */
.hero::before {
  content: '';          /* Required for ::before — leave it empty (it's just decoration) */
  position: absolute;   /* Take it out of the normal flow so it doesn't push other content */
  top: -50%;            /* Move it upward so it's partially off-screen */
  left: 50%;            /* Start at the horizontal center */
  transform: translateX(-50%); /* Shift left by half its own width to truly center it */
  width: 800px;
  height: 800px;
  /* A radial gradient that fades from a faint blue in the center to transparent */
  background: radial-gradient(circle, rgba(0, 102, 255, 0.12) 0%, transparent 70%);
  pointer-events: none; /* Make sure mouse clicks pass through this decorative element */
}

/* The inner content wrapper — limits width and centers it */
.hero-inner {
  position: relative; /* Sit on top of the ::before glow circle */
  max-width: 800px;   /* Don't stretch too wide */
  margin: 0 auto;     /* Center horizontally */
}

/* The small label above the main heading (e.g. "Enterprise IT Solutions") */
.hero-eyebrow {
  display: inline-block;   /* Treat it like a block but only as wide as its content */
  font-size: 0.8rem;       /* Small text */
  font-weight: 600;        /* Semi-bold */
  letter-spacing: 0.15em;  /* Widely spaced letters */
  text-transform: uppercase; /* All caps */
  color: var(--accent-cyan); /* Cyan color */
  border: 1px solid var(--border); /* Thin cyan border around it */
  padding: 0.35rem 1rem;   /* Space inside the badge */
  border-radius: 100px;    /* Fully rounded pill shape */
  margin-bottom: 1.5rem;   /* Space below it before the heading */
}

/* The main h1 heading inside the hero */
.hero h1 {
  /* clamp(min, preferred, max) — the font scales with the screen width,
     but never smaller than 2rem or larger than 3.5rem */
  font-size: clamp(2rem, 5vw, 3.5rem);
  color: var(--text-primary); /* White */
  margin-bottom: 1.25rem;     /* Space below the heading */
}

/* A <span> inside the h1 gets a different color to highlight key words */
.hero h1 span {
  color: var(--accent-cyan); /* Highlight part of the heading in cyan */
}

/* The subtitle paragraph below the main heading */
.hero-sub {
  font-size: 1.1rem;
  color: var(--text-secondary); /* Muted gray-blue */
  max-width: 600px;             /* Keep it narrow and readable */
  margin: 0 auto 2rem;          /* Center it, and add space below before the button */
}

/* ── Service page hero variant ──
   On the individual service pages, the hero is left-aligned and shorter */
.hero-service {
  padding: 4rem 2rem 3rem; /* Less top/bottom padding than the home hero */
  text-align: left;        /* Left-align text instead of centering */
}

/* On service pages, the inner wrapper is wider (matches the rest of the page) */
.hero-service .hero-inner {
  max-width: 1200px; /* Match the width of other sections */
  text-align: left;
}

/* The short cyan decorative bar that appears below the heading on service pages */
.hero-accent-bar {
  width: 60px;                     /* Short horizontal bar */
  height: 4px;                     /* Thin */
  background: var(--accent-cyan);  /* Solid cyan */
  border-radius: 2px;              /* Slightly rounded ends */
  margin: 1.25rem 0;               /* Space above and below */
}


/* ═══════════════════════════════════════════════════════════
   BUTTONS — Reusable button styles
   ═══════════════════════════════════════════════════════════
   We have two button styles:
   - .btn-primary  → solid blue background
   - .btn-outline  → transparent background with a cyan border
   Both share the .btn base class for common styles.
*/

/* Base styles shared by all buttons */
.btn {
  display: inline-block;    /* Behave like a box, but sit inline with text */
  padding: 0.85rem 2rem;    /* Space inside the button (top/bottom, left/right) */
  border-radius: var(--radius); /* Rounded corners */
  font-family: 'Inter', sans-serif; /* Use the body font (headings use Orbitron) */
  font-weight: 600;         /* Semi-bold text */
  font-size: 0.95rem;       /* Slightly smaller than 1rem default */
  cursor: pointer;          /* Show a hand cursor when hovering */
  transition: all var(--transition); /* Animate all style changes smoothly */
  text-decoration: none;    /* No underline (since buttons are often <a> tags) */
  border: none;             /* No default border (outline buttons add their own) */
}

/* Solid blue primary button */
.btn-primary {
  background: var(--accent-blue); /* Blue background */
  color: var(--text-primary);     /* White text */
}

/* Primary button hover — turns cyan with a glow */
.btn-primary:hover {
  background: var(--accent-cyan); /* Swap to cyan */
  color: var(--bg-primary);       /* Dark text on cyan background for readability */
  box-shadow: var(--glow);        /* Add the glowing shadow */
}

/* Transparent outline button */
.btn-outline {
  background: transparent;        /* No fill */
  color: var(--accent-cyan);      /* Cyan text */
  border: 1px solid var(--accent-cyan); /* Cyan border */
}

/* Outline button hover — fills with cyan */
.btn-outline:hover {
  background: var(--accent-cyan); /* Fill with cyan */
  color: var(--bg-primary);       /* Dark text for readability */
  box-shadow: var(--glow);        /* Glow effect */
}


/* ═══════════════════════════════════════════════════════════
   SECTIONS — Shared layout for all content sections
   ═══════════════════════════════════════════════════════════ */

/* Every <section> element gets comfortable top and bottom padding */
section {
  padding: 5rem 2rem; /* 5rem top/bottom, 2rem left/right */
}

/* The inner div that limits content width and centers it */
.section-inner {
  max-width: 1200px; /* Content won't stretch beyond 1200px on wide screens */
  margin: 0 auto;    /* Centered horizontally */
}

/* Small uppercase label above a section title (e.g. "What We Do") */
.section-label {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.15em; /* Widely spaced */
  text-transform: uppercase;
  color: var(--accent-cyan); /* Cyan color */
  margin-bottom: 0.5rem;
}

/* The main heading of a section */
.section-title {
  /* Scales between 1.5rem and 2.25rem depending on screen width */
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  color: var(--text-primary);
  margin-bottom: 1rem;
}

/* The body paragraph text below a section title */
.section-body {
  color: var(--text-secondary); /* Muted gray-blue */
  font-size: 1.05rem;
  max-width: 720px; /* Keep paragraphs from getting too wide (hard to read) */
}

/* When two .section-body paragraphs are next to each other, add a gap between them */
.section-body + .section-body {
  margin-top: 1rem;
}

/* Utility class: apply to any section to give it the slightly lighter background */
.bg-secondary {
  background: var(--bg-secondary);
}


/* ═══════════════════════════════════════════════════════════
   SERVICES GRID — The 5-card grid on the home page
   ═══════════════════════════════════════════════════════════ */

/* The #services section gets a slightly lighter background to contrast with the hero */
#services {
  background: var(--bg-secondary);
}

/* CSS Grid layout for the service cards */
.services-grid {
  display: grid;
  /* auto-fit: fill as many columns as fit.
     minmax(300px, 1fr): each column is at least 300px wide, but shares space equally.
     Result: 3 columns on desktop, 2 on tablet, 1 on mobile. */
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;       /* Space between cards */
  margin-top: 3rem;  /* Space above the grid (below the section heading) */
}

/* Each individual service card */
.service-card {
  background: var(--bg-card);   /* Dark card background */
  border: 1px solid var(--border); /* Subtle cyan border */
  border-radius: var(--radius); /* Rounded corners */
  padding: 2rem;                /* Space inside the card */
  /* Animate border color, glow shadow, and vertical position on hover */
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
  display: flex;                /* Stack the card's children (icon, title, text, link) vertically */
  flex-direction: column;
  gap: 0.75rem;                 /* Space between each child element */
}

/* Card hover state — it glows and lifts slightly */
.service-card:hover {
  border-color: var(--border-hover); /* Brighter border */
  box-shadow: var(--glow);           /* Cyan glow shadow */
  transform: translateY(-3px);       /* Move up 3 pixels for a "lift" effect */
}

/* The icon (emoji) at the top of each service card */
.service-icon {
  font-size: 2rem; /* Large emoji */
  line-height: 1;  /* Remove extra space above/below the emoji */
}

/* The service name heading inside the card */
.service-card h3 {
  font-size: 1rem;
  color: var(--text-primary); /* White */
}

/* The description paragraph inside the card */
.service-card p {
  color: var(--text-secondary); /* Muted color */
  font-size: 0.9rem;
  flex: 1; /* Grow to fill available space, pushing the "Learn More" link to the bottom */
}

/* The "Learn More →" link at the bottom of each card */
.service-card .learn-more {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--accent-cyan);
  letter-spacing: 0.03em;
  margin-top: 0.5rem;
}

.service-card .learn-more:hover {
  color: var(--text-primary); /* Turn white on hover */
}


/* ═══════════════════════════════════════════════════════════
   OFFER CARDS — The 4-card grid on each service detail page
   ═══════════════════════════════════════════════════════════ */

/* Grid layout for the "What We Offer" cards on service pages */
.offer-grid {
  display: grid;
  /* Similar to services-grid but minimum 260px wide per column */
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  margin-top: 2.5rem;
}

/* Each "What We Offer" card */
.offer-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.75rem;
  transition: border-color var(--transition), box-shadow var(--transition);
}

/* Offer card hover state */
.offer-card:hover {
  border-color: var(--border-hover);
  box-shadow: var(--glow);
}

/* The icon at the top of each offer card */
.offer-card .offer-icon {
  font-size: 1.5rem;     /* Slightly smaller than the service card icons */
  margin-bottom: 0.75rem;
}

/* The title inside the offer card */
.offer-card h3 {
  font-size: 0.95rem;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}

/* The description text inside the offer card */
.offer-card p {
  color: var(--text-secondary);
  font-size: 0.875rem;
}


/* ═══════════════════════════════════════════════════════════
   WHY KONATEK — Stats section on the home page
   ═══════════════════════════════════════════════════════════ */

/* The section background */
.why-konatek {
  background: var(--bg-secondary); /* Slightly lighter background to alternate sections */
}

/* Two-column layout: text on the left, stats grid on the right */
.why-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr; /* Two equal columns */
  gap: 4rem;                       /* Wide gap between columns */
  align-items: center;             /* Vertically center both columns */
}

/* The heading inside the text column */
.why-text h2 {
  margin-bottom: 1rem;
}

/* The paragraph inside the text column */
.why-text p {
  color: var(--text-secondary);
  font-size: 1.05rem;
}

/* 2x2 grid for the four stat boxes */
.why-stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Two columns */
  gap: 1.5rem;
}

/* Each individual stat box (e.g. "200+ Enterprise Clients") */
.stat-box {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
  text-align: center; /* Center the number and label */
}

/* The large number inside the stat box */
.stat-box .stat-number {
  font-family: 'Orbitron', monospace; /* Techy font for numbers */
  font-size: 2rem;
  font-weight: 900;                   /* Extra bold */
  color: var(--accent-cyan);          /* Cyan color makes the numbers stand out */
}

/* The descriptive label below the number */
.stat-box .stat-label {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-top: 0.25rem;
}


/* ═══════════════════════════════════════════════════════════
   CTA BANNER — "Ready to get started?" section on service pages
   ═══════════════════════════════════════════════════════════ */

.cta-banner {
  /* A dark blue gradient background — different from the rest to stand out */
  background: linear-gradient(135deg, #0a1929 0%, #0f2d5a 100%);
  border-top: 1px solid var(--border);    /* Cyan lines above and below */
  border-bottom: 1px solid var(--border);
  text-align: center;
  padding: 4rem 2rem;
}

/* The heading inside the CTA banner */
.cta-banner h2 {
  font-size: clamp(1.25rem, 2.5vw, 1.75rem); /* Scales with screen size */
  margin-bottom: 1rem;
}

/* The supporting text below the heading */
.cta-banner p {
  color: var(--text-secondary);
  margin-bottom: 1.75rem; /* Space above the button */
}


/* ═══════════════════════════════════════════════════════════
   CONTACT SECTION — Form and contact info on the home page
   ═══════════════════════════════════════════════════════════ */

/* The contact section uses the darkest background to contrast with the section above */
#contact {
  background: var(--bg-primary);
}

/* Two-column layout: contact info on the left (1 part), form on the right (1.5 parts) */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr; /* Right column is 1.5x wider than left */
  gap: 4rem;
  align-items: start; /* Align to the top, not the middle */
  margin-top: 3rem;
}

/* The heading in the contact info column */
.contact-info h3 {
  font-size: 1rem;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}

/* The introductory text in the contact info column */
.contact-info p {
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin-bottom: 1.5rem;
}

/* A single contact detail row (icon + text, e.g. email, phone, location) */
.contact-item {
  display: flex;        /* Place icon and text side by side */
  align-items: center;  /* Vertically center them */
  gap: 0.75rem;         /* Space between icon and text */
  margin-bottom: 1rem;
  color: var(--text-secondary);
  font-size: 0.9rem;
}

/* The icon (emoji) inside a contact item */
.contact-item span:first-child {
  font-size: 1.1rem; /* Slightly larger than the text next to it */
}

/* The contact form — stacks all inputs vertically */
form {
  display: flex;
  flex-direction: column; /* Stack children (inputs, button) top to bottom */
  gap: 1rem;              /* Space between each input field */
}

/* Side-by-side row for two inputs (First Name / Last Name) */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Two equal columns */
  gap: 1rem;
}

/* Styling for all form input fields, the message textarea, and the dropdown */
input, textarea, select {
  background: var(--bg-card);          /* Dark background */
  border: 1px solid var(--border);     /* Subtle cyan border */
  border-radius: var(--radius);        /* Rounded corners */
  padding: 0.75rem 1rem;               /* Inner spacing */
  color: var(--text-primary);          /* White text when typing */
  font-family: 'Inter', sans-serif;    /* Match the page font */
  font-size: 0.9rem;
  width: 100%;                         /* Fill the full width of the column */
  transition: border-color var(--transition); /* Animate border color on focus */
  outline: none;                       /* Remove the browser's default blue focus ring */
}

/* Style the placeholder text (the hint text before the user types) */
input::placeholder, textarea::placeholder {
  color: var(--text-secondary); /* Muted color so it doesn't compete with typed text */
}

/* When the user clicks into an input field (it becomes "focused") */
input:focus, textarea:focus, select:focus {
  border-color: var(--accent-cyan); /* Make the border bright cyan to highlight the active field */
}

/* The message textarea — resizable and taller than regular inputs */
textarea {
  resize: vertical;   /* Allow the user to drag it taller/shorter (not left/right) */
  min-height: 140px;  /* Start at a comfortable height */
}


/* ═══════════════════════════════════════════════════════════
   FOOTER — Bottom bar on every page
   ═══════════════════════════════════════════════════════════ */

footer {
  background: #060911;                  /* Even darker than the page background */
  border-top: 1px solid var(--border); /* Thin cyan line above the footer */
  padding: 2rem;
}

/* The inner wrapper — centers content and limits width */
.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;           /* Lay out logo, copyright, and links in a row */
  align-items: center;
  justify-content: space-between; /* Spread them across the footer */
  flex-wrap: wrap; /* If the screen is narrow, let items wrap to a new line */
  gap: 1rem;
}

/* The logo + company name in the footer */
.footer-brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

/* Footer logo image — smaller than the nav logo */
.footer-brand img {
  height: 40px;
  width: auto;
  border-radius: 4px;
}

/* "Konatek" text in the footer */
.footer-brand span {
  font-family: 'Orbitron', monospace;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
}

/* The copyright text in the middle of the footer */
.footer-copy {
  color: var(--text-secondary);
  font-size: 0.8rem;
}

/* The list of links on the right side of the footer */
.footer-links {
  display: flex;
  gap: 1.5rem;
  list-style: none; /* Remove bullet points */
}

/* Footer link text styling */
.footer-links a {
  color: var(--text-secondary);
  font-size: 0.8rem;
  transition: color var(--transition);
}

.footer-links a:hover {
  color: var(--accent-cyan);
}


/* ═══════════════════════════════════════════════════════════
   OVERVIEW GRID — Two-column text layout on service pages
   ═══════════════════════════════════════════════════════════ */

/* Splits the overview text into two side-by-side paragraphs */
.overview-grid {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Two equal columns */
  gap: 3rem;
  align-items: start;  /* Align paragraphs to the top */
  margin-top: 2rem;
}

/* Allow the paragraphs inside the grid to use the full column width */
.overview-grid .section-body {
  max-width: 100%; /* Override the default 720px max-width */
}


/* ═══════════════════════════════════════════════════════════
   BACK LINK — "← All Services" link on service pages
   ═══════════════════════════════════════════════════════════ */

.back-link {
  display: inline-flex;  /* Align the arrow and text side by side */
  align-items: center;
  gap: 0.4rem;           /* Small space between the arrow and the text */
  color: var(--text-secondary); /* Muted color — secondary to the main heading */
  font-size: 0.875rem;
  margin-bottom: 1.5rem; /* Space below the link before the page title */
  transition: color var(--transition);
}

.back-link:hover {
  color: var(--accent-cyan); /* Turn cyan on hover */
}


/* ═══════════════════════════════════════════════════════════
   RESPONSIVE DESIGN — Adjustments for small screens (mobile)
   ═══════════════════════════════════════════════════════════
   @media rules apply ONLY when the screen width matches the condition.
   "max-width: 768px" means: apply these styles when the screen is 768px wide or narrower.
   768px is a common breakpoint for tablets and phones.
*/
@media (max-width: 768px) {

  /* Hide the navigation links on small screens
     (a real site would replace this with a hamburger menu) */
  .nav-links {
    display: none;
  }

  /* Stack service cards into a single column instead of a grid */
  .services-grid {
    grid-template-columns: 1fr; /* One column */
  }

  /* Stack the "Why Konatek" two-column layout into a single column */
  .why-inner {
    grid-template-columns: 1fr;
    gap: 2rem; /* Less gap when stacked vertically */
  }

  /* Stack the contact grid (info + form) into a single column */
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  /* Stack the First Name / Last Name inputs vertically */
  .form-row {
    grid-template-columns: 1fr;
  }

  /* Stack the overview paragraphs vertically on service pages */
  .overview-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  /* Center the footer items when they wrap onto multiple lines */
  .footer-inner {
    flex-direction: column;
    text-align: center;
  }

  /* On mobile, center the service page hero text (it's left-aligned on desktop) */
  .hero-service {
    text-align: center;
  }

  .hero-service .hero-inner {
    text-align: center;
  }

  /* Center the cyan accent bar on mobile (it's left-aligned on desktop) */
  .hero-accent-bar {
    margin: 1.25rem auto; /* auto left/right margins = centered */
  }
}