/* =========================================================
   Custom modern overrides for the AI-driven redesign
   ========================================================= */

/* Text logo: mirrors the rounded, geometric letterforms of the original
   "dunics" wordmark (previously a red raster logo) using Comfortaa, a
   free rounded sans-serif that is a very close match, recolored to fit
   the new AI-driven theme instead of the old red. */
.logo-text {
  font-family: 'Comfortaa', 'Poppins', sans-serif;
  font-size: 26px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px;
  text-transform: lowercase;
  display: inline-flex;
  align-items: center;
}
.fixed-header .header-nav .logo-text {
  color: #4F46E5;
}
.logo-text .logo-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 3px;
  margin-top: -16px;
  border-radius: 50%;
  background-image: linear-gradient(45deg, #4F46E5 0%, #7C3AED 55%, #06B6D4 100%);
}

/* Hero badge */
.hero-badge {
  display: inline-block;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-weight: 600;
  position: relative;
  z-index: 2;
}

/* Hero section needs breathing room below the fixed header so the badge
   and heading are never clipped/overlapped by the navbar */
#home .full-screen {
  padding-top: 40px;
}

/* Outline button used next to the primary white CTA in the hero */
.btn-outline-white {
  border: 1px solid rgba(255, 255, 255, 0.6);
  color: #fff;
  background: transparent;
}
.btn-outline-white:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border-color: #fff;
}

/* Small label above the tech logo carousel */
.tech-stack-label {
  color: #8a8fa3;
  font-size: 13px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 20px;
}

/* Tech stack chips (replaces the old raster brand logos) */
.tech-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: #4b4f63;
  transition: color 0.25s ease, transform 0.25s ease;
}
.tech-badge .tech-badge-icon {
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(79, 70, 229, 0.1) 0%, rgba(6, 182, 212, 0.1) 100%);
  color: #4F46E5;
  font-size: 20px;
  transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.tech-badge span {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.tech-badge:hover {
  color: #4F46E5;
}
.tech-badge:hover .tech-badge-icon {
  background: linear-gradient(135deg, #4F46E5 0%, #06B6D4 100%);
  color: #fff;
  transform: translateY(-4px);
}

/* Slightly more modern, rounded feel for cards and buttons */
.feature-box,
.feature-box-01,
.feature-box-02 {
  border-radius: 12px;
}

.btn {
  border-radius: 6px;
}

.contact-form,
.feature-box-01 {
  border-radius: 14px;
}

/* Equal-height cards: Bootstrap rows are flex containers, so stretching the
   column is automatic, but feature-box-01 itself was display:inline-block
   (sized to its own content) which made cards in the same row uneven
   heights. Making it a full-height flex column fixes that while keeping
   the icon + text layout intact. */
.row > [class*="col-"]:has(> .feature-box-01) {
  display: flex;
}
.row > [class*="col-"] > .feature-box-01 {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
}
.feature-box-01 .feature-content {
  box-sizing: border-box;
}

/* The "About Us" cards (.feature-box) were being stretched to fill the
   row's cross-axis height (Bootstrap's default flex align-items: stretch),
   which left a lot of empty space below shorter blocks of text. Let them
   size to their own content instead, and tighten the padding/icon spacing
   so the cards feel proportionate rather than oversized. */
.row > [class*="col-"]:has(> .feature-box) {
  align-items: flex-start;
}
.feature-box {
  padding: 30px 25px;
}
.feature-box .icon {
  margin-bottom: 16px;
}

/* Smooth hover lift for service/process cards */
.feature-box-01 {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.feature-box-01:hover {
  transform: translateY(-6px);
  box-shadow: 0px 20px 35px -12px rgba(79, 70, 229, 0.18);
}

/* Footer readability: the theme's gradient background (purple to cyan)
   makes low-opacity white text hard to read, especially over the lighter
   cyan half. Bump text/link opacity up across the board for contrast. */
.footer-section p,
.footer-section .footer-text,
.footer-copy p {
  color: rgba(255, 255, 255, 0.9);
}
.footer-section .fot-link a {
  color: rgba(255, 255, 255, 0.85);
}
.footer-section .fot-link a:hover {
  color: #fff;
}
.footer-section p a {
  color: #fff;
  font-weight: 600;
  text-decoration: underline;
}
.footer-section p a:hover {
  color: #e6e8ff;
}