/* Spines-inspired visual theme — loaded after Bootstrap */
:root {
  --sp-ink: #133b49;
  --sp-ink-soft: #355a69;
  --sp-mint: #1cd5aa;
  --sp-mint-dark: #12b993;
  --sp-mint-pale: #e5faf5;
  --sp-blue-pale: #eaf6fb;
  --sp-page: #f7fbfc;
  --sp-white: #ffffff;
  --sp-copy: #52677f;
  --sp-line: #d8e8ec;
  --sp-shadow: 0 16px 44px rgba(19, 59, 73, .11);
}

body { background: var(--sp-page); color: var(--sp-ink); }
html body h1, html body h2, html body h3, html body h4,
html body h5, html body h6, .inner-page h1 { color: var(--sp-ink); }
html body p, html body li, html body label { color: var(--sp-copy); }
.clr-changed, .my-bigp.clr-changed { color: var(--sp-mint-dark) !important; }

/* Header */
header.my-nav { background: rgba(255, 255, 255, .96); box-shadow: 0 10px 32px rgba(19, 59, 73, .08); }
.my-nav .navbar, .my-nav .navbar.bg-gray { background: rgba(255, 255, 255, .96) !important; }
.my-nav .navbar a, .my-nav .navbar-nav .nav-link.active,
.my-nav .navbar-nav .nav-link.show, .my-nav .navbar-nav .nav-link { color: var(--sp-ink) !important; }
.my-nav .navbar ul li a:hover, .my-nav .navbar ul li a:focus { color: var(--sp-mint-dark) !important; }
.my-nav .dropdown-menu { border: 1px solid var(--sp-line); box-shadow: var(--sp-shadow); background: #fff; }
.my-nav .dropdown-item:hover { background: var(--sp-mint-pale); }
.navbar-toggler { border-color: var(--sp-mint) !important; background: var(--sp-ink); }

/* Main buttons */
a.web-blue-btn, button.web-blue-btn, input.web-blue-btn,
.btn-primary.web-blue-btn, .form-style button, .form-style input[type="submit"] {
  color: var(--sp-ink) !important;
  background: var(--sp-mint) !important;
  border-color: var(--sp-mint) !important;
  box-shadow: 0 10px 26px rgba(28, 213, 170, .25);
}
a.web-blue-btn:hover, button.web-blue-btn:hover, input.web-blue-btn:hover,
.btn-primary.web-blue-btn:hover, .form-style button:hover {
  color: var(--sp-ink) !important;
  background: var(--sp-mint-dark) !important;
  border-color: var(--sp-mint-dark) !important;
  transform: translateY(-2px);
}
a.web-black-btn { background: var(--sp-ink); border-color: var(--sp-ink); color: #fff; }
a.web-black-btn:hover { background: transparent; border-color: var(--sp-ink); color: var(--sp-ink); }

/* Hero and general section backgrounds */
.mainbanner, section.banner.hbanner, .banner.contact-banner, .inner-page .banner {
  background-color: var(--sp-page) !important;
  background-image:
    radial-gradient(circle at 0 0, rgba(132, 242, 220, .48) 0, rgba(210, 250, 242, .22) 25%, transparent 48%),
    radial-gradient(circle at 100% 5%, rgba(125, 207, 231, .42) 0, rgba(208, 239, 247, .20) 28%, transparent 52%) !important;
}
.bannerh1 h1, .bannerh1 h1 span { color: var(--sp-ink) !important; }
.bannerh1 h1 span, .bannerh1 .clr-changed { color: var(--sp-mint-dark) !important; }
.bg-gray, .bg-gray-box, .bg-gray-dark { background-color: var(--sp-page) !important; }
.bg-gray-dark { background-image: linear-gradient(135deg, var(--sp-mint-pale), var(--sp-blue-pale)) !important; }

/* Cards and content blocks */
.mybox-services-main, .services-box, .process-box, .testimonialsbox,
.contactboxs, .pricing-inner, .tab-content, .portfolio-slider .item {
  background: var(--sp-white) !important;
  border-color: rgba(19, 59, 73, .10) !important;
  box-shadow: var(--sp-shadow);
}
.mybox-services-main:hover, .services-box:hover, .process-box:hover,
.contactboxs:hover, .pricing-inner:hover {
  border-color: rgba(28, 213, 170, .55) !important;
  box-shadow: 0 22px 52px rgba(19, 59, 73, .15);
}
.content-services::after, .mybox-services-main .content-services::after {
  background: linear-gradient(90deg, var(--sp-mint), #70d9ed) !important;
}
.content-services h3, .content-services h4, .content-services h5,
.testimonials-content h4, .testimonials-content h5 { color: var(--sp-ink) !important; }

/* Tabs */
.tabscustom ul.nav {background: #fff;border: 1px solid var(--sp-line);box-shadow: 0 10px 30px rgba(19, 59, 73, .07);padding: 20px 0;}
.tabscustom .nav-link { color: var(--sp-ink) !important; }
.tabscustom .nav-link.active, .tabscustom .nav-link:hover {
  color: var(--sp-ink) !important;
  background: var(--sp-mint) !important;
}

/* CTA areas */
.cta-bg, .cta-one, .cta-ghost, .main-our-cta-section .cta-bg {
  background-color: var(--sp-ink) !important;
  background-image: radial-gradient(circle at 10% 0, rgba(28, 213, 170, .28), transparent 42%),
                    linear-gradient(135deg, #133b49, #205a69) !important;
}
.cta-bg h2, .cta-bg h3, .cta-bg h4, .cta-bg p,
.cta-one h2, .cta-one h3, .cta-one h4, .cta-one p,
.cta-ghost h2, .cta-ghost h3, .cta-ghost h4, .cta-ghost p { color: #fff !important; }
.cta-bg.custombluebg, .bg-ctabottom {
  background: radial-gradient(circle at 0 0, rgba(28, 213, 170, .26), transparent 40%),
              linear-gradient(135deg, #133b49, #205a69) !important;
}
.bg-ctabottom .form-style { background: rgba(255, 255, 255, .10); border: 1px solid rgba(255,255,255,.18); }
.bg-ctabottom .form-style input.form-control { background: #fff !important; color: var(--sp-ink) !important; border-color: transparent !important; }

/* Forms */
.form-style input, .form-style textarea, .form-style select,
.form-control, .modal-content .form-control {
  border-color: var(--sp-line) !important;
  color: var(--sp-ink) !important;
  background-color: #fff !important;
}
.form-style input:focus, .form-style textarea:focus, .form-control:focus {
  border-color: var(--sp-mint) !important;
  box-shadow: 0 0 0 4px rgba(28, 213, 170, .13) !important;
}

/* Pricing */
.pricing-section, .pricing-sec, .pricing-page {
  background: radial-gradient(circle at 0 0, rgba(28, 213, 170, .15), transparent 35%),
              radial-gradient(circle at 100% 10%, rgba(112, 217, 237, .16), transparent 38%),
              var(--sp-page) !important;
}
.pricing-inner { border-top: 4px solid var(--sp-mint) !important; }
.pricing-inner h3, .pricing-inner h4, .pricing-inner h5,
.pricing-inner .price { color: var(--sp-ink) !important; }
.pricing-inner li::before { color: var(--sp-mint-dark) !important; }

/* Inner service pages */
.bg-bgbacks, .bg-banner-inner-service, .inner-page section:nth-of-type(even) {
  background-color: var(--sp-page) !important;
}
.bg-banner-inner-service h1 span, .inner-page h2 span,
.inner-page h3 span, .inner-page h4 span { color: var(--sp-mint-dark) !important; }

/* Footer */
footer, .footer { background: var(--sp-ink) !important; border-top: 4px solid var(--sp-mint); }
footer h3, footer h4, footer h5, footer h6,
footer p, footer li, footer a, .footer-content p, .footer-content a { color: rgba(255,255,255,.82) !important; }
footer a:hover, .customulfooter ul li a:hover,
.customulfooter.footer-content a:hover { color: #8af0db !important; }
footer .form-style { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.16); }

/* Popup and notifications */
.modal-content { border: 1px solid rgba(19,59,73,.10); box-shadow: 0 26px 70px rgba(19,59,73,.22); }
.modal-header { background: linear-gradient(135deg, var(--sp-ink), #205a69); color: #fff; }
.sp-toast { border-left-color: var(--sp-mint); box-shadow: var(--sp-shadow); }
.sp-toast.sp-toast-success { border-left-color: var(--sp-mint-dark); }
.sp-toast-title { color: var(--sp-ink); }
.sp-toast-msg { color: var(--sp-copy); }

@media (max-width: 991px) {
  .my-nav .navbar-collapse { background: #fff; padding: 16px; border-radius: 0 0 18px 18px; box-shadow: var(--sp-shadow); }
  .my-nav .navbar li.nav-item { border-bottom-color: var(--sp-line); }
}