/* ==========================================================================
   KloudKradle brand layer — tokens + site-wide overrides
   Source: kloudkradle-brand-rules-for-cursor.md
   Load AFTER theme CSS so these rules win.
   ========================================================================== */

.kk-sr-only {
  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;
}

.kk-home-focus-list .applghu-single-progress-parent {
  margin-bottom: 16px;
}

.kk-home-focus-list .kk-focus-line {
  margin: 4px 0 0;
  font-size: 15px;
  line-height: 24px;
  color: var(--kk-slate, #51626F);
}

.kk-home-focus-list h3 {
  margin-bottom: 0;
}

:root {
  --kk-blue: #1D75BD;
  --kk-navy: #0B2540;
  --kk-cyan: #17E1F9;
  --kk-azure: #028BE5;
  --kk-sky: #E6F7FB;
  --kk-slate: #51626F;
  --kk-gray: #ABABAB;
  --kk-white: #FFFFFF;
  --kk-border: #D5DDE3;
  --kk-font-heading: "Manrope", Inter, "Segoe UI", Arial, sans-serif;
  --kk-font-body: "Inter", "Segoe UI", Arial, sans-serif;
  --kk-font-code: "JetBrains Mono", monospace;
  --kk-radius-btn: 6px;
  --kk-radius-card: 8px;
  --kk-blue-hover: #1A69AA; /* ~10% darker primary */
}

/* ----- Base typography ----- */
html,
body {
  font-family: var(--kk-font-body);
  font-size: 16px;
  line-height: 26px;
  font-weight: 400;
  color: var(--kk-navy);
  background-color: var(--kk-white);
}

h1, h2, h3, h4, h5, h6,
.saas2-headline h1,
.saas2-headline h2,
.saas2-headline h3,
.appeight-headline h1,
.appeight-headline h2,
.appeight-headline h3,
.xis-it-main-headline h1,
.xis-it-main-headline h2,
.xis-it-main-headline h3,
.breadcurmb-title h2,
.eight-section-title h2,
.s2_widget_title,
.applghu-header-area .applghu-navigation ul li a,
.btn, button, .nws-button button, .hover-btn {
  font-family: var(--kk-font-heading);
  font-style: normal;
}

h1,
.saas2-headline h1 {
  font-weight: 800;
  font-size: 40px;
  line-height: 48px;
  color: var(--kk-navy);
}

h2,
.saas2-headline h2,
.appeight-headline h2,
.eight-section-title h2,
.breadcurmb-title h2 {
  font-weight: 700;
  font-size: 30px;
  line-height: 38px;
  color: var(--kk-navy);
}

h3,
.saas2-headline h3,
.appeight-headline h3,
.feature-text8 h3,
.service_text_box h3,
.xis-it-main-headline h3,
.s2_widget_title span {
  font-weight: 700;
  font-size: 22px;
  line-height: 30px;
  color: var(--kk-blue);
}

p,
.pera-content,
.footer_about,
.service_text_box p,
.feature-text8 p {
  font-family: var(--kk-font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 26px;
  color: var(--kk-navy);
}

.subpoints,
.subpoints li,
caption,
.caption,
small {
  font-family: var(--kk-font-body);
  font-size: 13px;
  line-height: 20px;
  color: var(--kk-slate);
}

strong,
b,
.body-strong {
  font-weight: 600;
  color: var(--kk-navy);
}

code, pre, kbd {
  font-family: var(--kk-font-code);
  font-size: 14px;
  line-height: 22px;
  color: var(--kk-navy);
  background: var(--kk-sky);
}

/* ----- Links ----- */
a {
  color: var(--kk-blue);
  text-decoration: none;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

a:hover {
  color: var(--kk-blue-hover);
  text-decoration: underline;
}

/* ----- Buttons ----- */
.btn,
button.hover-btn,
.nws-button button,
.nws-button .hover-btn,
a.read-more-btn,
.saasio-btn,
.xis-it-btn a,
.ei-btn a {
  font-family: var(--kk-font-heading);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.02em;
  border-radius: var(--kk-radius-btn);
}

.btn-primary,
button.hover-btn,
.nws-button button,
.nws-button .hover-btn {
  background: var(--kk-blue) !important;
  border: none !important;
  color: var(--kk-white) !important;
  box-shadow: none !important;
}

.btn-primary:hover,
button.hover-btn:hover,
.nws-button button:hover,
.nws-button .hover-btn:hover {
  background: var(--kk-blue-hover) !important;
  color: var(--kk-white) !important;
  text-decoration: none;
}

.btn-secondary,
.kk-btn-secondary {
  background: transparent;
  border: 1.5px solid var(--kk-blue);
  color: var(--kk-blue);
  border-radius: var(--kk-radius-btn);
  font-family: var(--kk-font-heading);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.02em;
}

.btn-secondary:hover,
.kk-btn-secondary:hover {
  background: var(--kk-sky);
  color: var(--kk-blue);
  text-decoration: none;
}

button:disabled,
.btn:disabled {
  background: var(--kk-slate) !important;
  opacity: 0.4;
  color: var(--kk-white) !important;
}

/* ----- Cards / sections ----- */
.eight-feature-box,
.service_content_box,
.kk-feature-box,
.s2_service_feed_item .eight-feature-box,
.ximsa-it-service-inner-item,
.whychoose-feature {
  background: var(--kk-sky);
  border: 1px solid var(--kk-border);
  border-radius: var(--kk-radius-card);
  box-shadow: none;
}

.eight-feature-box:hover,
.service_content_box:hover,
.ximsa-it-service-inner-item:hover {
  background: var(--kk-white);
  border-color: var(--kk-blue);
}

a.eight-feature-box,
a.eight-feature-box:hover {
  text-decoration: none;
}

a.eight-feature-box h3 {
  color: var(--kk-blue);
}

/* Replace purple numbered bullets site-wide */
.kk-num {
  background: var(--kk-blue) !important;
  color: var(--kk-white) !important;
  border-radius: 50%;
}

.kk-feature-box {
  background: var(--kk-sky) !important;
  box-shadow: none !important;
}

.kk-feature-box:hover {
  background: var(--kk-white) !important;
}

.kk-numbered-list .kk-feature-box p,
.kk-feature-box p {
  color: var(--kk-navy) !important;
}

.whychoose-feature {
  border-left: 4px solid var(--kk-blue) !important;
  background: var(--kk-sky) !important;
  box-shadow: none !important;
  color: var(--kk-navy) !important;
}

.whychoose-feature:hover {
  background: var(--kk-white) !important;
}

.whychoose-feature .icon {
  color: var(--kk-blue) !important;
}

.whychoose-feature strong {
  color: var(--kk-navy) !important;
}

/* Home "Why choose" was theme-styled for a dark image; brand sky bg needs dark type */
.applghu-whychoose-us-area .applghu-whychoose-us-left .applghu-whychoose-us-left-subtitle {
  color: var(--kk-blue) !important;
  font-family: var(--kk-font-heading);
}

.applghu-whychoose-us-area .applghu-whychoose-us-left .applghu-whychoose-us-left-title,
.applghu-whychoose-us-area .applghu-whychoose-us-left .applghu-whychoose-us-left-text {
  color: var(--kk-navy) !important;
  font-family: var(--kk-font-heading);
}

/* ----- Dark surfaces: header sticky home, mobile drawer, footer, hero ----- */
.applghu-mobile-menu {
  background-color: var(--kk-navy) !important;
}

.applghu-mobile-menu a,
.applghu-mobile-menu ul li a {
  color: var(--kk-white) !important;
}

.applghu-mobile-menu .kk-mobile-label {
  color: var(--kk-cyan) !important; /* cyan OK on navy */
  text-transform: none; /* brand: avoid all-caps except short labels */
  font-size: 12px;
  letter-spacing: 0.02em;
  font-family: var(--kk-font-heading);
  font-weight: 700;
}

.applghu-header-area .applghu-header-cta .applghu-header-cta-icon {
  background: var(--kk-blue) !important;
}

.applghu-header-area .applghu-header-cta .applghu-header-cta-icon:hover {
  background: var(--kk-blue-hover) !important;
}

.applghu-header-area .applghu-mobile-menu-hamburger a {
  background-color: var(--kk-navy) !important;
}

body.saas-classic .applghu-header-area .applghu-mobile-menu-hamburger a {
  background-color: var(--kk-blue) !important;
}

.applghu-header-sticky {
  background-color: var(--kk-white) !important;
}

.applghu-header-sticky .applghu-navigation ul li a {
  color: var(--kk-navy) !important;
}

.applghu-header-sticky .applghu-navigation ul li a:before {
  background-color: var(--kk-blue) !important;
}

.applghu-header-area .applghu-navigation ul .applghu-dropdown .applghu-dropdown-menu li a:hover,
.applghu-header-area .applghu-navigation ul .applghu-dropdown .applghu-dropdown-menu .kk-mega-col a:hover,
.applghu-header-area .applghu-navigation ul .applghu-dropdown .applghu-dropdown-menu.kk-products-menu a:hover {
  background: var(--kk-blue) !important;
  color: var(--kk-white) !important;
  text-decoration: none;
}

/* Inner-page hero: navy dark surface + cyan accent sparingly */
body.saas-classic .saasio-breadcurmb-section {
  background-color: var(--kk-navy);
  background-image:
    linear-gradient(120deg, rgba(11, 37, 64, 0.94) 0%, rgba(11, 37, 64, 0.82) 45%, rgba(29, 117, 189, 0.78) 100%),
    url("../img/studio-img-32/service-bg.jpg");
  position: relative;
  overflow: hidden;
}

body.saas-classic .saasio-breadcurmb-section::before,
body.saas-classic .saasio-breadcurmb-section::after {
  content: "";
  position: absolute;
  width: 18vmin;
  height: 6vmin;
  background: rgba(2, 139, 229, 0.35); /* azure swash on navy area */
  border-radius: 999px;
  transform: rotate(45deg);
  pointer-events: none;
  z-index: 0;
}

body.saas-classic .saasio-breadcurmb-section::before {
  top: -2vmin;
  left: -4vmin;
}

body.saas-classic .saasio-breadcurmb-section::after {
  bottom: -2vmin;
  right: -4vmin;
  background: rgba(255, 255, 255, 0.12); /* white swash on navy */
}

body.saas-classic .saasio-breadcurmb-section .container {
  position: relative;
  z-index: 1;
}

body.saas-classic .breadcurmb-title h1,
body.saas-classic .breadcurmb-title h2 {
  color: var(--kk-white) !important;
  font-family: var(--kk-font-heading);
  font-weight: 800;
  font-size: 40px;
  line-height: 48px;
  margin: 0;
  padding-bottom: 20px;
}

.breadcurmb-title h1 {
  color: #fff;
  font-weight: 700;
  font-size: 36px;
  font-family: var(--kk-font-heading);
  padding-bottom: 20px;
  margin: 0;
}

body.saas-classic .saasio-page-breadcurmb,
.saasio-page-breadcurmb {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.saas-classic .saasio-page-breadcurmb li,
.saasio-page-breadcurmb li {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 0;
  line-height: 1;
}

body.saas-classic .saasio-page-breadcurmb li a {
  color: var(--kk-white) !important;
  font-family: var(--kk-font-body);
  font-size: 13px;
  line-height: 20px;
  margin: 0 18px 0 0;
  position: relative;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

body.saas-classic .saasio-page-breadcurmb li a:after,
.saasio-page-breadcurmb li a:after {
  content: '\f054';
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  font-size: 10px;
  line-height: 1;
  position: absolute;
  right: -14px;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
}

body.saas-classic .saasio-page-breadcurmb li:last-child a {
  margin-right: 0;
}

body.saas-classic .saasio-page-breadcurmb li:last-child a:after,
.saasio-page-breadcurmb li:last-child a:after {
  display: none;
}

body.saas-classic .saasio-page-breadcurmb li a:hover {
  color: var(--kk-cyan) !important; /* cyan accent on navy */
  text-decoration: none;
}

/* ==========================================================================
   Footer / subscribe transition — site-wide (all pages using footer.php)
   Soft sky bridge + CSS wave + brand subscribe card (replaces harsh fobg.png)
   ========================================================================== */

.ei-appdownload-section,
.kk-why-section,
.saas_two_service_section,
.applghu-whychoose-us-area,
.sa-contact-page-2,
.dia-newslatter-section {
  position: relative;
  z-index: 2;
}

/* Sky fade into footer — avoid stacked padding + theme margin that leave a white band */
.ei-appdownload-section,
.kk-why-section,
.applghu-whychoose-us-area,
.sa-contact-page-2,
.dia-privacy-content-section,
.dia-service-details-text {
  padding-bottom: 48px !important;
  margin-bottom: 0 !important;
}

.ei-appdownload-section,
.kk-why-section,
.applghu-whychoose-us-area {
  background-image: none !important;
  background-color: var(--kk-sky) !important;
}

#saas_two_footer.saas_two_footer_section,
.saas_two_footer_section {
  margin-top: 0 !important;
  padding-top: 70px !important;
  padding-bottom: 65px;
  position: relative;
  overflow: visible;
  background: var(--kk-sky) !important;
  z-index: 1;
}

/* Sky bridge band behind the overlapping subscribe card */
.saas_two_footer_section::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 120px;
  background: var(--kk-sky);
  z-index: 0;
  pointer-events: none;
}

/* Navy footer panel with soft wave */
.saas_two_footer_section::before {
  top: 48px !important;
  left: 0;
  width: 100%;
  height: calc(100% - 48px) !important;
  content: "";
  position: absolute;
  z-index: 0;
  background-color: var(--kk-navy) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 900' preserveAspectRatio='none'%3E%3Cpath fill='%230B2540' d='M0,70 C300,150 540,10 780,70 C1020,130 1260,30 1440,80 L1440,900 L0,900 Z'/%3E%3Ccircle cx='260' cy='420' r='180' fill='%231D75BD' fill-opacity='0.12'/%3E%3Ccircle cx='1180' cy='520' r='220' fill='%2317E1F9' fill-opacity='0.06'/%3E%3C/svg%3E") !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  background-position: center top !important;
}

.saas_two_footer_section .footer_content,
.saas_two_footer_section .s2-newslatter_content {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  position: relative;
  z-index: 2;
}

/* Subscribe card: brand blue → navy */
.saas_two_footer_section .s2-newslatter_section {
  top: -28px !important;
  z-index: 3;
  background: linear-gradient(135deg, var(--kk-blue) 0%, #155f9c 48%, var(--kk-navy) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px !important;
  box-shadow: 0 24px 48px rgba(11, 37, 64, 0.28) !important;
  padding: 40px 24px 48px !important;
}

.saas_two_footer_section .s2-newslatter_section .s2-newslatter_title h2,
.saas_two_footer_section .s2-newslatter_section .s2-newslatter_title p {
  color: #fff !important;
  font-family: var(--kk-font-heading);
}

.saas_two_footer_section .s2-newslatter_section .s2-newslatter-form input {
  border-radius: 6px !important;
  border: 1px solid transparent;
  box-shadow: 0 4px 14px rgba(11, 37, 64, 0.12);
}

.saas_two_footer_section .s2-newslatter_section .s2-newslatter-form button,
.saas_two_footer_section .s2-newslatter_section .s2-newslatter-form .hover-btn {
  background: var(--kk-white) !important;
  color: var(--kk-navy) !important;
  border-radius: 6px !important;
  font-family: var(--kk-font-heading);
  font-weight: 700;
}

.saas_two_footer_section .s2-newslatter_section .s2-newslatter-form button:hover,
.saas_two_footer_section .s2-newslatter_section .s2-newslatter-form .hover-btn:hover {
  background: var(--kk-sky) !important;
  color: var(--kk-navy) !important;
}

.saas_two_footer_section .newsletter_pattern_4,
.saas_two_footer_section .newsletter_pattern_5 {
  opacity: 0.25;
}

.saas_two_footer_section .s2_footer_widget .s2_widget_title span {
  font-family: var(--kk-font-heading);
  font-weight: 700;
  color: var(--kk-cyan) !important;
}

.saas_two_footer_section .s2_footer_widget .footer_about,
.saas_two_footer_section .s2_footer_widget p,
.saas_two_footer_section .s2_footer_widget .s2_footer_menu li a {
  font-family: var(--kk-font-body);
  color: rgba(255, 255, 255, 0.9) !important;
}

@media screen and (max-width: 1140px) {
  .saas_two_footer_section {
    padding-top: 40px !important;
  }

  .saas_two_footer_section .s2-newslatter_section {
    top: 0 !important;
    margin-bottom: 40px !important;
  }

  .saas_two_footer_section::before {
    top: 0 !important;
    height: 100% !important;
  }

  .saas_two_footer_section::after {
    display: none;
  }
}

/* ----- Theme color remaps (common brand blue already close) ----- */
.saasio-breadcurmb-section {
  background-color: var(--kk-navy);
}

/* Common accent replacements that themes hardcode */
.feature-icon8 .ei-icon-bg,
.ei-icon-bg {
  background: var(--kk-sky) !important;
}

/* Home service slider cards */
.ximsa-it-service-inner-item .inner-text h3 a,
.ximsa-it-service-inner-item .inner-text h3 {
  color: var(--kk-blue) !important;
  text-transform: none !important; /* avoid all-caps headings */
  font-size: 22px !important;
  line-height: 30px !important;
  font-weight: 700;
}

.ximsa-it-service-inner-item .read-more-btn {
  color: var(--kk-blue) !important;
  text-transform: none !important;
  font-family: var(--kk-font-heading);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.02em;
}

.ximsa-it-service-inner-item .read-more-btn:hover {
  color: var(--kk-blue-hover) !important;
  text-decoration: underline;
}

/* Dropdown panel tokens */
.kk-dropdown-panel {
  border-radius: var(--kk-radius-card) !important;
  border-color: var(--kk-border) !important;
}

.kk-mega-title {
  color: var(--kk-blue) !important;
  font-family: var(--kk-font-heading) !important;
  font-weight: 700 !important;
  text-transform: none !important;
  font-size: 13px !important;
  line-height: 20px !important;
  letter-spacing: 0.02em;
  color: var(--kk-slate) !important; /* caption-like label */
}

.applghu-header-area .applghu-navigation ul li a {
  font-family: var(--kk-font-heading);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.02em;
}

body.saas-classic .applghu-header-area {
  background: var(--kk-white);
  box-shadow: 0 8px 24px rgba(11, 37, 64, 0.08);
}

body.saas-classic .applghu-header-area .applghu-navigation ul li a {
  color: var(--kk-navy);
}

body.saas-classic .applghu-header-area .applghu-header-cta-content .applghu-header-cta-text,
body.saas-classic .applghu-header-area .applghu-header-cta-content .applghu-header-cta-num {
  color: var(--kk-navy) !important;
}

body.saas-classic .applghu-header-area .applghu-header-cta-content .applghu-header-cta-text {
  font-size: 13px;
  line-height: 20px;
  color: var(--kk-slate) !important;
  font-weight: 400;
  font-family: var(--kk-font-body);
}

body.saas-classic .applghu-header-area .applghu-header-cta-content .applghu-header-cta-num {
  font-family: var(--kk-font-heading);
  font-weight: 700;
}

/* Product page icon */
.kk-product-icon {
  width: 72px;
  height: 72px;
  object-fit: contain;
}

/* Soft-kill cyan/azure as body text on light bg if theme leaks it */
body.saas-classic p,
body.saas-classic li,
body p,
body li {
  /* cyan/azure must not be body text on light — enforced via inheritance from navy */
}

/* Scroll-up button */
.saas-classic-scrollup,
#scrollup {
  background: var(--kk-blue) !important;
  color: var(--kk-white) !important;
  border-radius: var(--kk-radius-btn);
}

/* Contact / forms */
input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
select {
  border: 1px solid var(--kk-border);
  border-radius: var(--kk-radius-btn);
  color: var(--kk-navy);
  font-family: var(--kk-font-body);
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--kk-blue);
  outline: none;
  box-shadow: 0 0 0 3px rgba(29, 117, 189, 0.15);
}

/* Gradient CTAs → solid brand blue (reduce cyan gradients as primary chrome) */
.applghu-header-area .applghu-header-cta .applghu-header-cta-icon,
[style*="linear-gradient"] .hover-btn {
  background-image: none;
}

/* App download why section text on light stays navy */
.ei-app-down-text h2,
.ei-app-down-text h2 span {
  font-family: var(--kk-font-heading);
  color: var(--kk-navy) !important;
}

.ei-app-down-text h2 span {
  color: var(--kk-blue) !important; /* h3-level accent */
  display: inline;
}

/* Revolution slider hero text → brand fonts */
.applghu-hero-subtitle,
.rs-layer.applghu-hero-subtitle,
.applghu-hero-content-wrapper .rs-layer {
  font-family: var(--kk-font-heading) !important;
}

.applghu-hero-btn.rev-btn {
  font-family: var(--kk-font-heading) !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em;
  border-radius: var(--kk-radius-btn) !important;
  background: var(--kk-blue) !important;
  border-color: var(--kk-blue) !important;
}

.applghu-hero-btn.rev-btn:hover {
  background: var(--kk-blue-hover) !important;
  border-color: var(--kk-blue-hover) !important;
}

.s2-blue .s2-feature_icon,
.s2-orange .s2-feature_icon {
  background-color: var(--kk-blue) !important;
  color: var(--kk-white) !important;
}

/* Prefer sky section bands where themes use vague grays */
.feature-eight-section,
#s2_service_feed {
  background: var(--kk-white);
}

.feature-eight-section .eight-feature-box h3 {
  color: var(--kk-blue);
}