/* base.css */
/* Remaining files: header-footer.css, layout.css, colors.css, hero.css, services.css, penguin-platform.css, human-centered.css, why-choose.css, start-conversation.css, utilities.css */

/* Global resets, base typography, default anchors, common tag styles */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap');

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: #444;
  font-size: 16px; /* Comfortable base size */
  line-height: 1.5; /* Improves readability */
  /*background: linear-gradient(135deg, #0f0f23 0%, #1a1a3a 50%, #2d2d5a 100%);*/
  background: #ffffff;
  min-height: 100vh;
}

a {
  color: #4fa2d5;
  text-decoration: none;
  transition: color 0.3s ease;
}

a:hover {
  color: #45beff;
}

h1,
h2,
h3,
h4,
h5,
h6,
.font-primary {
  font-family: inherit; /* Inherit 'Inter' from body */
  color: #222;
}

p, li {
  line-height: 1.5;
  color: #555;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Utility for text alignment */
.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

/* Force left-align for footer content to override overrides */
#footer,
#footer .footer-top,
#footer .container,
#footer .row {
  text-align: left;
  justify-content: flex-start;
}


.dark-bg h1,
.dark-bg h2,
.dark-bg h3,
.dark-bg h4,
.dark-bg h5,
.dark-bg h6,
.dark-bg p,
.dark-bg li {
  color: #f0f0f0; /* light or white text for dark backgrounds */
}

/* Optionally links */
.dark-bg a {
  color: #aad4ff;
}

.dark-bg a:hover {
  color: #ffffff;
}

.text-outline {
  position: relative;
  z-index: 1; /* Ensure text stays on top */
  /* Add subtle dark outline with text-shadow */
  text-shadow:
    0 0 1px rgba(0, 0, 0, 0.7),
    0 0 2px rgba(0, 0, 0, 0.5);
}

/* Optional: combine with WebKit text stroke for supported browsers */
.text-outline.webkit-outline {
  -webkit-text-stroke: 0.5px rgba(0, 0, 0, 0.7);
}


.btn-get-started {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 1px;
  padding: 12px 32px;
  border-radius: 50px;
  color: #fff;
  border: none;
  background-image: linear-gradient(to right, #4facfe 0%, #00f2fe 50%, #4facfe 100%);
  background-size: 200% auto;
  box-shadow: 0 4px 15px rgba(65, 132, 234, 0.75);
  transition: all 0.5s ease;
}

.btn-get-started:hover {
  background-position: right center;
  color: #fff;
  text-decoration: none;
  transform: translateY(-2px);
}