/* Spurvalue custom overrides */

.whatsapp-fab {
  position: fixed;
  right: 25px;
  bottom: 25px;
  width: 58px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #25D366;
  color: #ffffff;
  border-radius: 50%;
  font-size: 30px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  z-index: 999;
  transition: transform 0.2s ease;
}

.whatsapp-fab:hover {
  transform: scale(1.08);
  color: #ffffff;
}

.preloader:after {
  width: 80px !important;
  height: 70px !important;
  margin-left: -40px !important;
  margin-top: -45px !important;
  background-size: contain !important;
  background-image: url(../images/splash-screen.png) !important;
}

@media (max-width: 767px) {
  .whatsapp-fab {
    width: 50px;
    height: 50px;
    font-size: 26px;
    right: 15px;
    bottom: 15px;
  }
}

/*
 * Logo sizing fix.
 * The template's .logo { width: 181px } + .logo a img { width: 100% }
 * assumes a wide horizontal logo. Spurvalue's mark is a square icon+wordmark
 * stack (1500x1500), so that fixed width forced a huge header (natural
 * height ~181px) and, combined with the sticky header's max-height:40px,
 * squashed the image non-uniformly (object-fit defaults to "fill").
 * These rules size by height instead and let width scale proportionally.
 */
.main-header .logo-box .logo,
.main-header .logo-box .logo a,
.main-footer .logo,
.main-footer .logo a,
.sticky-header .logo,
.sticky-header .logo a {
  width: auto;
}

.main-header .logo-box .logo img {
  width: auto;
  height: 64px;
  max-width: none;
  max-height: none;
  object-fit: contain;
}

.sticky-header .logo img {
  width: auto;
  height: 40px;
  max-width: none;
  object-fit: contain;
}

.main-footer .logo img {
  width: auto;
  height: 44px;
  max-width: none;
  object-fit: contain;
}

@media (max-width: 575.98px) {
  .main-header .logo-box .logo img {
    height: 48px;
  }
}

/* =====================================================================
 * AMENDMENTS (Oct 2026)
 * ===================================================================== */

/* --- Theme colours ---------------------------------------------------
 * NORMAL BLUE (deep royal blue, main logo)  #020C47  -> replaces all blues
 * LIGHT BLUE  (light logo)                  #349DFF  -> replaces all yellows
 */
:root {
  --theme-color1: #349dff;          /* was #c6d936 (yellow) */
  --theme-color1-rgb: 52, 157, 255;
  --theme-color8: #349dff;          /* was #B4E717 */
  --theme-color9: #349dff;          /* was #EDC701 */
  --theme-color2: #020c47;          /* was #1D4A8C */
  --theme-color2-rgb: 2, 12, 71;
  --theme-color3: #020c47;          /* was #16396b */
  --theme-color3-rgb: 2, 12, 71;
  --theme-color4: #020c47;          /* was #1a4278 */
  --theme-color4-rgb: 2, 12, 71;
  --theme-color5: #010833;          /* was #0d2a52 (darker shade) */
  --theme-color5-rgb: 1, 8, 51;
  --theme-color7: #020c47;          /* was #123566 */
  --theme-color7-rgb: 2, 12, 71;
  --theme-color10: #010833;         /* was #14305c */
}

/* --- Header logo: as big as the header allows (cropped file, no padding) */
.main-header .logo-box .logo img { height: 90px; }
.sticky-header .logo img { height: 52px; max-height: none; }
@media (max-width: 575.98px) {
  .main-header .logo-box .logo img { height: 58px; }
}
.main-footer .logo img { height: 70px; }

/* --- A2 Sliders ------------------------------------------------------ */
.banner-section .content-column .inner-column .sub-title {
  color: #ffffff;
  border-bottom-color: #ffffff;
}
.banner-section .content-column .inner-column .title span {
  font-weight: inherit;              /* same bold thickness for the whole heading */
}
.banner-section .content-column .inner-column .btn-one {
  background-color: var(--theme-color2);
  color: #ffffff;
}
.banner-section .content-column .inner-column .btn-one:hover { color: #ffffff; }
.banner-section .content-column .inner-column .btn-one { border: 1px solid rgba(255, 255, 255, 0.35); }
.banner-section .content-column .inner-column .btn-one::after { background-color: #ffffff; }

/* --- A3 About: two blocks, two statements each ------------------------ */
.about-block-two .item .con { max-width: 200px; }

/* --- Shared: white icon by default, black icon on hover --------------- */
.icon .icon-hover { display: none; }
.funfact-block-two .inner-box .icon img { width: 55px; height: 60px; object-fit: contain; margin-left: 10px; }
.steps-block .icon img { object-fit: contain; vertical-align: middle; }

/* A4 Insights */
.funfact-block-two:hover .inner-box .icon .icon-default { display: none; }
.funfact-block-two:hover .inner-box .icon .icon-hover { display: inline-block; }

/* A5 How it works: white icon on the circle; on hover the circle turns
 * light blue and the icon turns black (black on deep blue would vanish) */
.steps-block .icon img { width: 70px; height: 70px; transition: transform 900ms ease; }
.steps-block:hover .icon { background-color: var(--theme-color1); }
.steps-block:hover .icon .icon-default { display: none; }
.steps-block:hover .icon .icon-hover { display: inline-block; }
.steps-block:hover .icon img { transform: rotateY(360deg); }

/* --- A7 Service areas ------------------------------------------------- */
.service-section-dark { background-color: #1a1a1a; } /* very dark grey, 90% black */
.service-section-dark .sec-title .title { color: #ffffff; }
.service-block .content-box .icon img {
  height: 80px; width: auto; max-width: 100px; object-fit: contain;
  transition: all 900ms ease;
}
.service-block:hover .content-box .icon img { transform: rotateY(360deg); }

/* --- Services pages: smaller "STEP n" label so it stays on one line ---- */
.services-details .nr-list .title span {
  font-size: 22px;                   /* was 34px (approx. 35% smaller) */
  margin-right: 15px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* --- Business Essentials / Non-Profit Solutions: icons black -> white on the
 * highlighted (deep blue) accordion item */
.service-block-four .acc .acc-item.active .icon img { filter: brightness(0) invert(1); }

/* --- Why Choose Us: keep pictures 1 and 2 aligned (template 4/8 split) */
@media (max-width: 991.98px) {
  .why-choose-pics .project-details__img img { height: 320px; object-fit: cover; }
}

/* A9 Bottom banner: full logo; box toned down so the light-blue logo stays visible */
.footer-style-two .footer-top .logo {
  background-color: rgba(255, 255, 255, 0.06);
  padding: 30px 50px;
}
.footer-style-two .footer-top .logo img { height: 90px; }