/* ========== Layout & Responsive ========== */
body, html {
    max-width: 100vw;
    overflow-x: hidden;
}
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding-left: 16px;
    padding-right: 16px;
}

/* ========== Hero Parallax Section ========== */
.parallax-hero-section {
    position: relative;
    height: 80vh;
    min-height: 600px;
    max-height: 100vh;
    width: 100%;
    overflow: hidden;
    margin-bottom: 0;
}
.parallax-bg {
    position: absolute;
    left: 0; top: 0;
    width: 100%;
    height: 100%;
    background-image: url('/images/home-1.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1;
    will-change: transform;
}
.parallax-overlay {
    position: absolute;
    left: 0; top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(120deg,rgba(40,65,106,0.68) 0%,rgba(40,65,106,0.38) 100%);
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.hero-heading {
    font-size: 2.6rem;
    color: #fff;
    text-shadow: 0 2px 16px rgba(40,65,106,0.18);
    font-weight: 700;
    margin-bottom: 1rem;
}
.hero-subheading {
    color: #fff;
    font-size: 1.25rem;
    max-width: 600px;
    text-shadow: 0 1px 8px rgba(40,65,106,0.12);
    margin-bottom: 0;
}

/* ========== Services Grid Section (Why Choose Us Style) ========== */
#services {
    background: #f8fafd;
    padding: 56px 0 56px 0;
}
.services-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px;
}
.services-header {
    text-align: center;
    margin-bottom: 32px;
}
.services-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    justify-content: center;
    align-items: stretch;
}
.service-card {
    flex: 1 1 22%;
    min-width: 220px;
    max-width: 320px;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 2px 16px rgba(40,65,106,0.09);
    padding: 36px 24px 28px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: all 0.3s cubic-bezier(.25,.8,.25,1);
    cursor: default;
    border: 1.5px solid #e7eaf3;
}
.service-card:hover,
.service-card:focus {
    box-shadow: 0 8px 32px rgba(40,65,106,0.16);
    transform: scale(1.03);
    background: #f8fafd;
    border-color: #1e40af;
}
.service-icon {
    font-size: 2.7rem;
    color: #1e40af;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(120deg,#e7f0fc 0%,#fff 100%);
    border-radius: 50%;
    width: 60px;
    height: 60px;
    box-shadow: 0 2px 8px rgba(40,65,106,0.08);
}
.service-title {
    font-size: 1.18rem;
    font-weight: 600;
    margin-bottom: 10px;
    color: #1e3a8a;
    letter-spacing: 0.01em;
}
.service-desc {
    font-size: 1.04rem;
    color: #1e3a8a;
    opacity: 0.92;
    margin-top: 2px;
}
@media (max-width: 900px) {
    .service-card { flex: 1 1 46%; max-width: 100%; }
}
@media (max-width: 600px) {
    .services-grid { gap: 18px; }
    .service-card { flex: 1 1 100%; max-width: 100%; padding: 22px 12px 18px 12px; }
    .service-card:hover,
    .service-card:focus {
        transform: scale(1.01);
        box-shadow: 0 4px 16px rgba(40,65,106,0.10);
    }
}

/* ========== Newsletter Section ========== */
#newsletter {
    background: #fff;
    padding-top: 48px;
    padding-bottom: 48px;
}
#newsletter .container {
    max-width: 500px;
}
#newsletter h2 {
    font-size: 1.6rem;
    font-weight: 700;
}
#newsletter p {
    font-size: 1.08rem;
}

/* ========== Testimonial Section ========== */
#testimonials {
    background: #f4f6fa;
    padding: 56px 0 56px 0;
}
.testimonial-carousel {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    overflow: hidden;
}
.testimonial-track {
    display: flex;
    transition: transform 0.7s cubic-bezier(.4,2,.3,1);
    will-change: transform;
}
.testimonial-item {
    flex: 0 0 25%;
    box-sizing: border-box;
    padding: 24px;
    margin: 0 8px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(40,65,106,0.07);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    min-height: 160px;
    font-size: 1.08rem;
    color: #1e3a8a;
}
.testimonial-client {
    font-weight: 600;
    color: #1e40af;
    margin-top: 12px;
    font-size: 1rem;
}
.testimonial-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: #fff;
    border: none;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(40,65,106,0.10);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 3;
    font-size: 1.5rem;
    color: #1e3a8a;
    transition: background 0.18s;
}
.testimonial-arrow:hover {
    background: #e7f0fc;
}
.testimonial-arrow.left { left: 8px; }
.testimonial-arrow.right { right: 8px; }
/* ========== Why Choose Us Section ========== */
#why-choose-us {
    background: #fff;
    padding: 56px 0 56px 0;
}
.why-choose-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px;
}
.why-choose-header {
    text-align: center;
    margin-bottom: 32px;
}
.why-choose-features {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    justify-content: center;
    align-items: stretch;
}
.why-feature {
    flex: 1 1 22%;
    min-width: 220px;
    max-width: 320px;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 2px 16px rgba(40,65,106,0.09);
    padding: 36px 24px 28px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: box-shadow 0.18s, background 0.18s, transform 0.18s;
    cursor: default;
    border: 1.5px solid #e7eaf3;
}
.why-feature:hover {
    box-shadow: 0 8px 32px rgba(40,65,106,0.13);
    background: #f8fafd;
    transform: translateY(-4px) scale(1.03);
    border-color: #d0d8e6;
}
.why-feature-icon {
    font-size: 2.7rem;
    color: #1e40af;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(120deg,#e7f0fc 0%,#fff 100%);
    border-radius: 50%;
    width: 60px;
    height: 60px;
    box-shadow: 0 2px 8px rgba(40,65,106,0.08);
}
.why-feature-title {
    font-size: 1.18rem;
    font-weight: 600;
    margin-bottom: 10px;
    color: #1e3a8a;
    letter-spacing: 0.01em;
}
.why-feature-desc {
    font-size: 1.04rem;
    color: #1e3a8a;
    opacity: 0.92;
    margin-top: 2px;
}
@media (max-width: 900px) {
    .parallax-hero-section { min-height: 400px !important; height: 48vh !important; }
    .hero-heading { font-size: 1.6rem !important; }
    .hero-subheading { font-size: 1rem !important; }
    .service-card { flex: 0 0 50%; }
    .testimonial-item { flex: 0 0 50%; }
    .why-feature { flex: 1 1 46%; max-width: 100%; }
}
@media (max-width: 600px) {
    .parallax-hero-section { min-height: 220px !important; height: 28vh !important; }
    .hero-heading { font-size: 1.1rem !important; }
    .hero-subheading { font-size: 0.95rem !important; }
    .service-block { min-height: 120px; padding: 1rem; }
    .service-card { flex: 0 0 100%; padding: 18px; font-size: 1rem; }
    #newsletter h2 { font-size: 1.1rem; }
    #newsletter p { font-size: 0.95rem; }
    .testimonial-item { flex: 0 0 100%; padding: 18px; font-size: 1rem; }
    .testimonial-carousel { max-width: 98vw; }
    .services-carousel { max-width: 98vw; }
    .why-choose-features { gap: 18px; }
    .why-feature { flex: 1 1 100%; max-width: 100%; padding: 22px 12px 18px 12px; }
}

/* ========== Footer Section ========== */
.site-footer {
    background: #22304a;
    color: #f4f6fa;
    padding: 56px 0 32px 0;
    font-family: 'Segoe UI', 'Arial', sans-serif;
    border-top: 2px solid #e7eaf3;
    margin-top: 64px;
}
.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 48px;
    justify-content: space-between;
    align-items: flex-start;
}
.footer-col {
    flex: 1 1 28%;
    min-width: 220px;
    margin-bottom: 32px;
}
.footer-title {
    font-size: 1.18rem;
    font-weight: 600;
    margin-bottom: 18px;
    color: #fff;
    letter-spacing: 0.01em;
}
.footer-info, .footer-links, .footer-newsletter {
    font-size: 1.04rem;
    line-height: 1.7;
    color: #f4f6fa;
}
.footer-links a {
    display: block;
    color: #f4f6fa;
    text-decoration: none;
    margin-bottom: 10px;
    transition: color 0.18s;
    font-weight: 500;
}
.footer-links a:hover {
    color: #1e40af;
    text-decoration: underline;
}
.footer-social {
    margin-top: 18px;
    display: flex;
    gap: 18px;
}
.footer-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background: #2d3d5a;
    border-radius: 50%;
    color: #f4f6fa;
    font-size: 1.3rem;
    transition: background 0.18s, color 0.18s;
    text-decoration: none;
}
.footer-social a:hover {
    background: #1e40af;
    color: #fff;
}
.footer-newsletter input[type="email"] {
    width: 100%;
    padding: 10px 12px;
    border-radius: 8px;
    border: none;
    margin-bottom: 12px;
    font-size: 1rem;
}
.footer-newsletter button {
    background: #1e40af;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 10px 22px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.18s;
}
.footer-newsletter button:hover {
    background: #d95e1a;
}
.footer-bottom {
    text-align: center;
    color: #bfc8db;
    font-size: 0.98rem;
    margin-top: 32px;
    padding-top: 16px;
    border-top: 1px solid #2d3d5a;
}
/* a11y utility */
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}
@media (max-width: 900px) {
    .footer-container { flex-direction: column; gap: 32px; }
    .footer-col { min-width: 0; margin-bottom: 0; }
}
@media (max-width: 600px) {
    .site-footer { padding: 38px 0 18px 0; }
    .footer-title { font-size: 1.05rem; }
    .footer-info, .footer-links, .footer-newsletter { font-size: 0.98rem; }
    .footer-social a { width: 32px; height: 32px; font-size: 1.1rem; }
}

/* Remove underline from all links inside service cards */
.service-card a,
.service-card a:visited,
.service-card a:active,
.service-card a:focus {
    text-decoration: none !important;
    color: inherit;
    transition: color 0.18s;
}
.service-card a:hover {
    text-decoration: none !important;
    color: #1e40af;
}

/* Also remove underline when the entire card is an anchor */
a.service-card,
a.service-card:visited,
a.service-card:active,
a.service-card:focus,
a.service-card:hover {
    text-decoration: none !important;
    color: inherit;
}

/* ========== Quote Wizard ========== */
:root {
  --qw-accent: #1e40af;
  --qw-dark: #1e3a8a;
  --qw-muted: #8b98ac;
  --qw-bg: #ffffff;
  --qw-border: #e7eaf3;
}

.quote-wizard, .quote-wizard * { transition: all .3s ease-in-out; }

.quote-wizard { display:block; max-width: 820px; margin: 0 auto; }

.qw-progress { position: relative; height: 8px; background: #eef2f7; border-radius: 999px; overflow: hidden; margin: 12px 4px 18px 4px; }
.qw-bar { position:absolute; left:0; top:0; height:100%; width:0%; background: linear-gradient(90deg, var(--qw-accent), #ffa85f); border-radius: 999px; }

.qw-dots { display:flex; justify-content:center; gap:10px; margin-bottom: 16px; }
.qw-dots .qw-dot { width: 10px; height: 10px; border-radius: 50%; background: #d6deea; border: 2px solid #c9d4e6; }
.qw-dots .qw-dot.qw-active { background: var(--qw-accent); border-color: var(--qw-accent); transform: scale(1.15); }

.qw-steps { position: relative; min-height: 220px; }
.qw-step { display:none; opacity:0; transform: translateX(24px); }
.qw-step.qw-active { display:block; opacity:1; transform: translateX(0); }

/* Step card */
.qw-card { background: var(--qw-bg); border: 1px solid var(--qw-border); border-radius: 16px; padding: 22px 18px; box-shadow: 0 6px 24px rgba(40,65,106,0.06); }
.qw-summary-title { font-size: 1.25rem; color: var(--qw-dark); margin-bottom: 12px; }
.qw-summary .qw-item { display:flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px dashed #e8eef7; }
.qw-summary .qw-item:last-child { border-bottom: none; }
.qw-summary .qw-edit { color: var(--qw-accent); cursor: pointer; text-decoration: underline; }

/* Range slider */
.qw-range { width: 100%; accent-color: var(--qw-accent); }
.qw-range-value { margin-top: 8px; font-weight: 600; color: var(--qw-dark); }
.qw-ticks { display:flex; justify-content: space-between; font-size: .92rem; color: var(--qw-muted); margin-top: 6px; }

/* Nav */
.qw-nav { display:flex; align-items:center; gap:10px; margin-top: 14px; }
.qw-nav .btn { border-radius: 10px; padding: 10px 18px; font-weight: 600; }
.qw-nav .btn:disabled { opacity: .5; cursor: not-allowed; }
.qw-nav .btn-primary { background: var(--qw-accent); border: none; box-shadow: 0 4px 12px rgba(255,127,50,0.36); }
.qw-nav .btn-primary:hover { transform: translateY(-1px) scale(1.02); box-shadow: 0 10px 20px rgba(255,127,50,0.30); }
.qw-nav .btn-secondary { background: #e7f0fc; color: var(--qw-dark); border: 1px solid #d6e3f8; }
.qw-nav .btn-secondary:hover { transform: translateY(-1px) scale(1.02); }

/* Errors */
.qw-error { color: #c0392b; font-weight: 600; font-size: .95rem; margin-top: 6px; min-height: 1.2em; }
.qw-hint { color: var(--qw-muted); font-size: .95rem; margin-top: 6px; }

/* Animations with classes */
.qw-exit-left { animation: qwExitLeft .35s ease forwards; }
.qw-enter-right { animation: qwEnterRight .35s ease forwards; }
.qw-exit-right { animation: qwExitRight .35s ease forwards; }
.qw-enter-left { animation: qwEnterLeft .35s ease forwards; }

@keyframes qwExitLeft { from { opacity:1; transform: translateX(0); } to { opacity:0; transform: translateX(-24px); } }
@keyframes qwEnterRight { from { opacity:0; transform: translateX(24px); } to { opacity:1; transform: translateX(0); } }
@keyframes qwExitRight { from { opacity:1; transform: translateX(0); } to { opacity:0; transform: translateX(24px); } }
@keyframes qwEnterLeft { from { opacity:0; transform: translateX(-24px); } to { opacity:1; transform: translateX(0); } }

/* Success message animation */
.js-quote-success { display:none; opacity:0; transform: translateY(6px); }
.js-quote-success.qw-show { display:inline-block; opacity:1; transform: translateY(0); }
/* Hide error until triggered by JS */
.js-quote-error { display: none; }

/* Utility */
.qw-hidden { display:none !important; }

@media (max-width: 600px) {
  .quote-wizard { max-width: 100%; }
  .qw-card { padding: 16px 14px; border-radius: 12px; }
  .qw-dots { gap: 8px; }
}

/* ========== Subtle Entrance Animations (used across services pages) ========== */
.js-animate { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.js-animate.fade-up { transform: translateY(18px); }
.js-animate.from-left { transform: translateX(-26px); }
.js-animate.from-right { transform: translateX(26px); }
.js-animate.visible { opacity: 1; transform: none; }

/* Optional delays */
.anim-delay-1 { transition-delay: .08s; }
.anim-delay-2 { transition-delay: .16s; }
.anim-delay-3 { transition-delay: .24s; }
.anim-delay-4 { transition-delay: .32s; }
.anim-delay-5 { transition-delay: .40s; }
.anim-delay-6 { transition-delay: .48s; }
.anim-delay-7 { transition-delay: .56s; }
.anim-delay-8 { transition-delay: .64s; }

/* --- Redesigned Key Benefits card on service pages --- */
.service-aside .service-card {
  background: #ffffff;
  border: 1px solid #e6ebf3;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(27, 36, 48, 0.08), 0 2px 10px rgba(27, 36, 48, 0.05);
}
.service-aside .service-card h4 {
  color: #1e3a8a;
  font-weight: 700;
  font-size: 1.05rem;
  margin-bottom: 12px;
  border-bottom: 1px dashed #e6ebf3;
  padding-bottom: 8px;
}
.service-aside .feature-list { 
  list-style: none; 
  margin: 0; 
  padding: 0; 
  display: grid; 
  gap: 10px; 
}
.service-aside .feature-list li {
  position: relative;
  color: #2a3342;
  padding: 12px 12px 12px 16px;
  border-radius: 12px;
  border: 1px solid #e6ebf3;
  background: #ffffff;
  box-shadow: 0 2px 10px rgba(27, 36, 48, 0.06);
  transition: background .18s ease, box-shadow .18s ease, border-color .18s ease, transform .06s ease;
}
.service-aside .feature-list li::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(180deg, #1e40af, #ffa85f);
}
.service-aside .feature-list li:hover {
  background: #f8fafd;
  border-color: #d6e3f8;
  box-shadow: 0 6px 16px rgba(27, 36, 48, 0.10);
}
/* Hide the old tick icons */
.service-aside .feature-list .icon { display: none !important; }

/* --- Services Aside Navigation --- */
.service-aside .service-nav {
  margin-bottom: 16px;
}
.service-aside .service-nav h4 {
  color: #1e3a8a;
  font-weight: 700;
  font-size: 1.05rem;
  margin-bottom: 10px;
}
.service-aside .service-nav-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.service-aside .service-nav-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-decoration: none;
  color: #1e3a8a;
  background: #fff;
  border: 1px solid #e6ebf3;
  border-radius: 10px;
  padding: 10px 12px;
  transition: background .18s ease, border-color .18s ease, transform .06s ease, color .18s ease;
}
.service-aside .service-nav-link:hover { background: #f8fafd; border-color: #d6e3f8; transform: translateY(-1px); }
.service-aside .service-nav-link.active { background: #fff7f1; border-color: #1e40af; color: #1e40af; }
.service-aside .service-nav-link .svc-arrow { color: #8b98ac; transition: color .18s; }
.service-aside .service-nav-link:hover .svc-arrow { color: #1e40af; }