/* ==========================================================================
   ING · Premium Theme Layer
   Loaded AFTER main.css. Refines typography, spacing, cards, buttons,
   header/footer and hover states to match the new ING brand identity
   (brand blue #014BCF / brand red #F7031F) without altering page
   structure, content, or existing functionality.
   ========================================================================== */

:root {
  --ing-blue: #014BCF;
  --ing-blue-deep: #0A2A6B;
  --ing-blue-soft: #E7EEFC;
  --ing-red: #F7031F;
  --ing-ink: #0B1220;
  --ing-slate: #3D4C5E;
  --ing-radius-lg: 20px;
  --ing-radius-md: 14px;
  --ing-radius-sm: 10px;
  --ing-shadow-sm: 0 2px 10px rgba(1, 18, 51, 0.06);
  --ing-shadow-md: 0 12px 30px rgba(1, 18, 51, 0.10);
  --ing-shadow-lg: 0 24px 60px rgba(1, 18, 51, 0.16);
  --ing-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------- Base typography polish ---------- */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  letter-spacing: -0.01em;
}

a {
  transition: color 0.3s var(--ing-ease), background 0.3s var(--ing-ease),
    border-color 0.3s var(--ing-ease), transform 0.3s var(--ing-ease),
    box-shadow 0.3s var(--ing-ease);
}

::selection {
  background: var(--ing-blue);
  color: #fff;
}

/* ---------- Logo sizing & polish ---------- */
.site-logo .brand-logo,
.mobile-logo .brand-logo {
  height: 62px;
  width: auto;
  max-width: none;
  object-fit: contain;
  display: block;
}

.logosicon-area .brand-logo {
  height: 56px;
  width: auto;
  object-fit: contain;
}

.footer-logo-area .brand-logo {
  height: 74px;
  width: auto;
  object-fit: contain;
  margin-bottom: 20px;
}

@media (max-width: 767px) {
  .site-logo .brand-logo,
  .mobile-logo .brand-logo {
    height: 46px;
  }
}

/* ---------- Header ---------- */
.header-area.header-sticky {
  transition: box-shadow 0.35s var(--ing-ease), background 0.35s var(--ing-ease);
}

.header-area.header-sticky.sticky {
  box-shadow: var(--ing-shadow-md);
  backdrop-filter: saturate(160%) blur(10px);
}

/* Primary CTA buttons */
.header-btn1,
.header-btn2,
a.btn-area1,
a.btn-area2,
.homemenu-btn {
  border-radius: 999px !important;
  letter-spacing: 0.01em;
  box-shadow: var(--ing-shadow-sm);
  transition: transform 0.35s var(--ing-ease), box-shadow 0.35s var(--ing-ease),
    background 0.35s var(--ing-ease), color 0.35s var(--ing-ease);
}

.header-btn1:hover,
.header-btn2:hover,
a.btn-area1:hover,
a.btn-area2:hover,
.homemenu-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--ing-shadow-md);
}

/* ---------- Cards / boxes (service, testimonial, contact, blog author) ---------- */
[class*="boxarea"],
[class*="-box"] {
  transition: transform 0.4s var(--ing-ease), box-shadow 0.4s var(--ing-ease),
    border-color 0.4s var(--ing-ease);
}

.service-boxarea,
.testimonial-boxarea,
.contact-boxarea,
.blog-author-boxarea,
.service2-auhtor-boxarea,
.service2-auhtor2-boxarea,
.contact-auhtor-box {
  border-radius: var(--ing-radius-lg) !important;
  box-shadow: var(--ing-shadow-sm);
}

.service-boxarea:hover,
.testimonial-boxarea:hover,
.contact-boxarea:hover,
.blog-author-boxarea:hover {
  transform: translateY(-6px);
  box-shadow: var(--ing-shadow-lg);
}

.service-boxarea img {
  transition: transform 0.5s var(--ing-ease);
}

.service-boxarea:hover img {
  transform: scale(1.06) rotate(-2deg);
}

/* ---------- Forms ---------- */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="search"],
textarea,
select {
  border-radius: var(--ing-radius-sm) !important;
  transition: border-color 0.3s var(--ing-ease), box-shadow 0.3s var(--ing-ease);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--ing-blue) !important;
  box-shadow: 0 0 0 4px var(--ing-blue-soft);
}

/* ---------- Generic content images (not logos/icons) get a soft radius ---------- */
.all-images img,
.about-img img,
.blog-img img,
.team-img img {
  border-radius: var(--ing-radius-md);
}

/* ---------- Footer ---------- */
.footer1-section-area {
  border-top: 1px solid var(--ztc-border-border-1, #E5E7EB);
}

.footer1-section-area a:hover {
  color: var(--ing-blue) !important;
}

/* ---------- Focus visibility for accessibility ---------- */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--ing-blue);
  outline-offset: 2px;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}