/**
Theme Name: Nayus Creative
Author: Brainstorm Force
Author URI: http://wpastra.com/about/
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: nayus-creative
Template: astra
*/

@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400;700;800;900&family=IBM+Plex+Sans:wght@400;500;600&display=swap');

/* ═══════════════════════════════════════════════════
   HEADER — transparent
═══════════════════════════════════════════════════ */


#site-header.nayus-header {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  z-index: 999;
  background: transparent;
  transition: background 0.3s ease, box-shadow 0.3s ease;
  padding: 20px 0;
}

#site-header.nayus-header.is-scrolled {
  background: rgba(255, 255, 255, 0.97) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 2px 20px rgba(18, 16, 130, 0.08) !important;
}

#site-header.nayus-header .nayus-header-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 30px;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: nowrap !important;
  gap: 24px;
}

#site-header.nayus-header .nayus-logo-wrap {
  display: inline-grid;
  height: 40px;
}
#site-header.nayus-header .nayus-logo-mark {
  grid-area: 1 / 1;
  height: 40px; width: auto;
  transition: opacity 0.3s ease;
}
#site-header.nayus-header .logo-default { opacity: 1; }
#site-header.nayus-header .logo-scrolled { opacity: 0; }
#site-header.nayus-header.is-scrolled .logo-default { opacity: 0; }
#site-header.nayus-header.is-scrolled .logo-scrolled { opacity: 1; }

#site-header.nayus-header .nayus-header-right {
  display: flex !important;
  align-items: center !important;
  gap: 28px !important;
  margin-left: auto !important; 
  float: none !important;
  position: static !important;
}


#site-header.nayus-header .nayus-nav-list {
  display: flex !important;
  align-items: center !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  position: static !important;
}

#site-header.nayus-header .nayus-nav-list li,
#site-header.nayus-header .nayus-nav-list .menu-item {
  float: none !important;
  position: static !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  display: block !important;
}

#site-header.nayus-header .nayus-nav-list li a,
#site-header.nayus-header .nayus-nav-list a.menu-link {
  float: none !important;
  position: relative !important;
  display: inline-block !important;
  padding: 8px 16px !important;
  margin: 0 !important;
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: rgba(255, 255, 255, 0.88) !important;
  text-decoration: none !important;
  background: none !important;
  border: none !important;
}

#site-header.nayus-header.is-scrolled .nayus-nav-list li a,
#site-header.nayus-header.is-scrolled .nayus-nav-list a.menu-link {
  color: #0f0e3a !important;
}

/* Sliding underline hover — grows left to right, smoothly */
#site-header.nayus-header .nayus-nav-list li a::after,
#site-header.nayus-header .nayus-nav-list a.menu-link::after {
  content: '';
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 4px;
  height: 2px;
  background: #0099d5;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

#site-header.nayus-header .nayus-nav-list li a:hover::after,
#site-header.nayus-header .nayus-nav-list a.menu-link:hover::after {
  transform: scaleX(1);
}

#site-header.nayus-header .nayus-cta-btn {
  display: inline-block !important;
  background: #0099d5 !important;
  color: #fff !important;
  font-family: 'Source Sans 3', sans-serif !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  padding: 10px 20px !important;
  border-radius: 5px !important;
  text-decoration: none !important;
  transition: box-shadow 0.25s ease, transform 0.25s ease !important;
}

#site-header.nayus-header .nayus-cta-btn:hover {
  box-shadow: 0 8px 24px rgba(0,153,213,0.4);
  transform: translateY(-2px);
  color: #fff !important;
}


/* ── Mobile toggle button  ── */
#site-header.nayus-header .nayus-mobile-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 8px;
  cursor: pointer;
  color: #fff !important;
  transition: color 0.3s ease;
}
#site-header.nayus-header.is-scrolled .nayus-mobile-toggle {
  color: #121082 !important;
}
@media (max-width: 900px) {
  #site-header.nayus-header .nayus-header-right {
    display: none !important;
  }
  #site-header.nayus-header .nayus-mobile-toggle {
    display: flex !important;
  }
}

/* ── Off-canvas panel — true full height on mobile ── */
.nayus-offcanvas {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  height: 100dvh; 
  width: min(320px, 80vw);
  background: #0d0b5e;
  border-top-left-radius: 16px;
  border-bottom-left-radius: 16px;
  z-index: 1001;
  display: flex;
  flex-direction: column;
  padding: 28px 24px;
  transform: translateX(100%);
  transition: transform 0.35s ease;
  overflow-y: auto;
}
.nayus-offcanvas.is-open {
  transform: translateX(0);
}
.nayus-offcanvas-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(13,11,94,0.5);
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}
.nayus-offcanvas-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}
.nayus-offcanvas-close {
  align-self: flex-end;
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  padding: 8px;
  margin-bottom: 16px;
}
.nayus-offcanvas-nav {
  margin-top: 12px;
}
.nayus-offcanvas-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.nayus-offcanvas-list li a {
  display: block;
  padding: 14px 12px;
  border-radius: 8px;
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 17px;
  font-weight: 500;
  color: rgba(255,255,255,0.9);
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}
.nayus-offcanvas-list li a:hover,
.nayus-offcanvas-list li a:active {
  background: rgba(255,255,255,0.08);
  color: #fff;
}

/* CTA  */
.nayus-offcanvas-cta {
  margin-top: 24px;
  text-align: center;
  width: 100%;
  box-sizing: border-box;
}

/* Socials */
.nayus-offcanvas-socials {
  margin-top: 20px;
  justify-content: center;
}

/* Prevents background scrolling while the off-canvas is open */
body.nayus-offcanvas-open {
  overflow: hidden;
}

/* ── Mobile Header CTA hover ── */
.nayus-cta-btn:hover,
.nayus-cta-btn:active {
  box-shadow: 0 8px 24px rgba(0,153,213,0.4);
  transform: translateY(-2px);
  color: #fff !important;
}

/* ── Header socials  ── */
.nayus-footer-socials a:active {
  background: rgba(0,153,213,0.15);
  border-color: rgba(0,153,213,0.4);
  color: #0099d5;
}
.footer-link:active {
  color: #0099d5 !important;
}


/* ═══════════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════════ */

.nayus-footer {
  background: #0d0b5e;
  padding: 80px 32px 0;
  font-family: var(--nayus-font-body, 'IBM Plex Sans', sans-serif);
}

.nayus-footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  padding-bottom: 60px;
}

.nayus-footer-inner > div:nth-child(1) { flex: 2 1 240px; } 
.nayus-footer-inner > div:nth-child(2) { flex: 1 1 140px; }   
.nayus-footer-inner > div:nth-child(3) { flex: 1 1 140px; }   
.nayus-footer-inner > div:nth-child(4) { flex: 1.2 1 160px; } 

.nayus-footer-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  margin-bottom: 16px;
}

.nayus-footer-logo img { height: 40px; }

.nayus-footer-logo span {
  font-family: var(--nayus-font-heading, 'Source Sans 3', sans-serif);
  font-weight: 800;
  font-size: 17px;
  color: #fff;
}

.nayus-footer-tagline {
  color: rgba(255,255,255,0.55);
  font-size: 14px;
  line-height: 1.7;
  margin: 0 0 20px;
  margin-right: 120px;
}

.nayus-footer-socials { display: flex; gap: 10px; }

.nayus-footer-socials a {
  width: 44px;
  height: 44px;
  border-radius: 12px;             
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.75);  
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease;
}
 
.nayus-footer-socials a svg {
  width: 18px;
  height: 18px;
}
 
.nayus-footer-socials a:hover {
  background: rgba(0,153,213,0.15);
  border-color: rgba(0,153,213,0.4);
  color: #0099d5;
}

.nayus-footer-col h4 {
  font-family: var(--nayus-font-heading, 'Source Sans 3', sans-serif);
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #ffffff;
  margin: 0 0 20px;
}

.nayus-footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nayus-footer-col ul li { margin-bottom: 8px; }

.nayus-footer-col ul li a {
  color: rgba(255,255,255,0.55);
  text-decoration: none;
  font-size: 14px;
  transition: color 0.2s ease;
}

.nayus-footer-col ul li a:hover { color: #0099d5; }

.nayus-footer-cta p {
  color: rgba(255,255,255,0.55);
  font-size: 14px;
  line-height: 1.6;
  margin: 0 0 20px;
}

.nayus-footer-bottom {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 0;
  border-top: 1px solid rgba(255,255,255,0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.nayus-footer-bottom p {
  color: rgba(255,255,255,0.45);
  font-size: 13px;
  margin: 0;
}

.nayus-footer-bottom-links { display: flex; gap: 20px; }

.nayus-footer-bottom-links a {
  color: rgba(255,255,255,0.45);
  font-size: 13px;
  text-decoration: none;
}

.nayus-footer-bottom-links a:hover { color: #0099d5; }

.nayus-footer .nayus-cta-btn {
  display: inline-block;
  background: #0099d5;
  color: #fff;
  font-family: 'Source Sans 3', sans-serif;
  font-weight: 700;
  font-size: 14px;
  padding: 10px 20px;
  border-radius: 5px;
  text-decoration: none;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.nayus-footer .nayus-cta-btn:hover {
  box-shadow: 0 8px 24px rgba(0,153,213,0.4);
  transform: translateY(-2px);
  color: #fff;
}

@media (max-width: 900px) {
  .nayus-footer-inner > div { flex: 1 1 45%; }
}
@media (max-width: 560px) {
  .nayus-footer-inner > div { flex: 1 1 100%; }
}

/* ═══════════════════════════════════════════════════
   HOMEPAGE
═══════════════════════════════════════════════════ */

.nayus-hero-gradient {
  background: linear-gradient(
    140deg,
    #0d0b5e 0%,
    #121082 45%,
    #0e1a8a 70%,
    #0a3a6e 100%
  );
}

.hero-headline {
  font-family: 'Source Sans 3', sans-serif;
  font-weight: 900;
  font-size: clamp(2.4rem, 4.5vw, 3.6rem);
  line-height: 1.1;
  color: #fff;
  letter-spacing: -0.02em;
  margin: 0 !important;
}

.gradient-text {
  background: linear-gradient(135deg, #0099d5 0%, #00c8ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

@media (max-width: 768px) {
  .hero-headline {
    font-size: clamp(2.6rem, 7vw, 3.2rem);
    text-align: center;
  }
}

@media (max-width: 767px) {
  .elementor-element.btn-hover-lift.elementor-widget-mobile__width-inherit {
    width: 100% !important;
  }
  .elementor-element.btn-hover-lift .elementor-button.elementor-button-link {
    width: 100% !important;
    justify-content: center !important;
  }
}

.browser-mockup {
  position: relative;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  overflow: visible;
  backdrop-filter: blur(12px);
  box-shadow: 0 32px 80px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.08);
  animation: floatY 4s ease-in-out infinite;
}
@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}
.browser-bar {
  padding: 12px 16px;
  background: rgba(0,0,0,0.25);
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.dot {
  width: 10px; height: 10px; border-radius: 50%;
}
.dot.red { background: #ff5f57; }
.dot.yellow { background: #ffbd2e; }
.dot.green { background: #28ca41; }
.address-bar {
  flex: 1; height: 22px;
  background: rgba(255,255,255,0.08);
  border-radius: 4px; margin: 0 12px;
}
.browser-body { padding: 24px; min-height: 280px; }
.mock-line {
  height: 12px; border-radius: 4px;
  background: rgba(255,255,255,0.08);
  margin-bottom: 10px;
}
.mock-line.wide { width: 60%; height: 20px; background: rgba(255,255,255,0.15); }
.mock-line.medium { width: 85%; }
.mock-line.narrow { width: 70%; margin-bottom: 24px; }
.mock-cards {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: 12px; margin-bottom: 20px;
}
.mock-card {
  height: 80px; border-radius: 8px; opacity: 0.85;
}
.mock-card.cyan { background: linear-gradient(135deg, #0099d5, #0099d588); }
.mock-card.navy { background: linear-gradient(135deg, #121082, #12108288); }
.mock-card.teal { background: linear-gradient(135deg, #0077a8, #0077a888); }
.mock-btn {
  width: 140px; height: 36px; border-radius: 6px;
  background: #0099d5;
}
.hero-mockup { animation: floatY 4s ease-in-out infinite; }

/* ── Floating badges ── */
.hero-badge {
  position: absolute;
  background: #fff;
  border-radius: 12px;
  padding: 10px 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}
.badge-top { top: -20px; right: -24px; }
.badge-bottom { bottom: -20px; left: -24px; }
.badge-icon {
  width: 34px; height: 34px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.seo-icon { background: linear-gradient(135deg, #0099d5, #121082); }
.speed-icon { background: linear-gradient(135deg, #121082, #0099d5); }
.badge-title {
  font-family: 'Source Sans 3', sans-serif;
  font-weight: 700; font-size: 13px; color: #121082;
}
.badge-sub {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 11px; color: #7b7b9a;
}

.btn-hover-lift { transition: transform 0.18s, box-shadow 0.22s !important; }
.btn-hover-lift:hover { transform: translateY(-2px) !important;
box-shadow: 0 8px 24px rgba(0,153,213,0.35);}

.scroll-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  opacity: 0.5;
}
.scroll-label {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 11px;
  color: #fff;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.scroll-line {
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, #fff, transparent);
}

.service-card {
  transition: transform 0.28s ease, box-shadow 0.28s ease;
  height: 100%;
}
.service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 48px rgba(18,16,130,0.14);
}

.card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Source Sans 3', sans-serif;
  font-weight: 600;
  font-size: 15px;
  color: #0099d5 !important;
  text-decoration: none;
  transition: gap 0.2s;
}
.card-link:hover { gap: 10px; }

.about-section {
  position: relative;
  overflow: hidden;
}
.about-section::before {
  content: '';
  position: absolute;
  top: -60px;
  right: -60px;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,153,213,0.15) 0%, transparent 65%);
  pointer-events: none;
}

.section-tag {
  display: inline-block;
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #0099d5;
  margin-bottom: 12px;
}

.white-heading {
  font-family: 'Source Sans 3', sans-serif;
  font-weight: 900;
  font-size: clamp(2rem, 3.5vw, 3rem);
  color: #fff;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 12px 0 24px;
}
.body-muted {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 16px;
  color: rgba(255,255,255,0.7);
  line-height: 1.8;
  margin-bottom: 32px;
  max-width: 480px;
}
.about-section .check-list,
ul.check-list { list-style: none !important; padding: 0; margin-bottom: 30px !important; display: flex; flex-direction: column; gap: 18px; }

.check-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  list-style: none !important;
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 15px;
  color: rgba(255,255,255,0.8);
}

.check-icon {
  width: 22px; height: 22px; border-radius: 50%;
  background: #0099d5;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin-top: 1px;
}

/* ── Buttons ── */

.btn-primary, a.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 32px;
  background: #0099d5;
  color: #fff !important;
  font-family: 'Source Sans 3', sans-serif;
  font-weight: 600;
  font-size: 16px;
  border-radius: 4px;
  border: 2px solid #0099d5;
  text-decoration: none;
  transition: background 0.22s, transform 0.18s, box-shadow 0.22s;
  cursor: pointer;
}
.btn-primary:hover, a.btn-primary:hover {
  background: #007ab5;
  border-color: #007ab5;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,153,213,0.35);
}
.btn-primary.large { font-size: 17px; padding: 16px 36px; }

.btn-outline, a.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 32px;
  background: transparent;
  color: #fff !important;
  font-family: 'Source Sans 3', sans-serif;
  font-weight: 600;
  font-size: 16px;
  border-radius: 4px;
  border: 2px solid rgba(255,255,255,0.5);
  text-decoration: none;
  transition: border-color 0.22s, background 0.22s, transform 0.18s;
}
.btn-outline:hover, a.btn-outline:hover {
  border-color: #fff;
  background: rgba(255,255,255,0.08);
  transform: translateY(-2px);
}
.btn-outline.large { font-size: 17px; padding: 16px 36px; }

.btn-dark, a.btn-dark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 16px 36px;
  background: #121082;
  color: #fff !important;
  font-family: 'Source Sans 3', sans-serif;
  font-weight: 700;
  font-size: 17px;
  border-radius: 4px;
  border: none;
  text-decoration: none;
  transition: background 0.22s, transform 0.18s, box-shadow 0.22s;
}
.btn-dark:hover, a.btn-dark:hover {
  background: #0d0b5e;
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(18,16,130,0.4);
}

.btn-start-project, a.btn-start-project {
  transition: background 0.22s, transform 0.18s, box-shadow 0.22s;
}
.btn-start-project:hover, a.btn-start-project:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(18,16,130,0.4);
}

.cta-buttons { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-top: 36px; }

.stats-grid-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

/* ── Stat tiles ── */
.stat-tile {
  flex: 1 1 calc(50% - 8px);
  box-sizing: border-box;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px;
  padding: 24px 20px;
  backdrop-filter: blur(8px);
  transition: background 0.25s, transform 0.25s;
}

.stat-tile:hover {
  background: rgba(0,153,213,0.12);
  transform: translateY(-4px);
}

.stat-icon {
  color: #0099d5;
  width: 30px;
  height: 30px;
  margin-bottom: 12px;
}

.stat-number {
  font-family: 'Source Sans 3', sans-serif;
  font-weight: 900;
  font-size: 2.4rem;
  color: #0099d5;
  line-height: 1;
}

.stat-label {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 13px;
  color: rgba(255,255,255,0.6);
  margin-top: 6px;
}

/* ── Project Card Details ── */
/* ── Grid ── */
.project-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0;
}

@media (max-width: 768px) {
  .project-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

/* ── Project Card ── */
.project-card {
  position: relative;
  display: block;
  aspect-ratio: 4 / 2.8;
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  box-shadow: 0 2px 16px rgba(18,16,130,0.07);
  transition: box-shadow 0.28s ease, transform 0.28s ease;
}

.project-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 48px rgba(18,16,130,0.15);
}


.project-card-img,
.project-card-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.project-card:hover .project-card-img img {
  transform: scale(1.01);
}

/* Solid dark tint on the image itself (behind the card) */
.project-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(13,11,94,0.45);
  opacity: 0;
  transition: opacity 0.35s ease;
  z-index: 1;
  pointer-events: none;
}

.project-card:hover::before {
  opacity: 1;
}

/* Floating card that pops up from the bottom */
.project-card-overlay {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  background: #0d0b5e;
  border-radius: 10px;
  padding: 22px 24px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 20px 48px rgba(18,16,130,0.35);
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  pointer-events: none;
}

.project-card:hover .project-card-overlay {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.project-card-overlay h3 {
  font-family: 'Source Sans 3', sans-serif;
  font-weight: 800;
  font-size: 22px;
  color: #fff;
  margin: 0;
}

.project-card-overlay p {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255,255,255,0.75);
  margin: 0;
}

.project-card-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.project-card-year {
  font-family: 'Source Sans 3', sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: #0099d5;
}

.project-card-label {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.6);
}

.project-card-icon {
  width: 18px;
  height: 18px;
  fill: rgba(255,255,255,0.75);
}

.project-card-built-in {
  justify-content: flex-start;
  gap: 8px;
  margin-top: 10px;
}

@media (max-width: 767px) {
  .elementor-element.btn-start-project.elementor-widget-mobile__width-inherit {
    width: 100% !important;
  }
  .elementor-element.btn-start-project .elementor-button.elementor-button-link {
    width: 100% !important;
    justify-content: center !important;
  }
}


/* process steps section */
.process-grid-wrap,
.process-grid-wrap .e-con-inner {
  position: relative;
}

.process-grid-wrap::before,
.process-grid-wrap .e-con-inner::before {
  content: '';
  position: absolute;
  top: 40px;
  left: 12.5%;
  right: 12.5%;
  height: 2px;
  background: linear-gradient(90deg, #0099d5, #121082);
  z-index: 0;
}

/* Responsive */
@media (max-width: 768px) {
  .process-grid-wrap .e-con-inner::before {
    display: none;
  }
}
.step-circle {
  position: relative;
  z-index: 1;
}

.process-step { text-align: center; padding: 0 20px; position: relative; z-index: 1; }
.step-circle {
  width: 80px; height: 80px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 28px;
  font-family: 'Source Sans 3', sans-serif;
  font-weight: 900; font-size: 22px; color: #fff;
}
.step-circle.navy {
  background: #121082;
  box-shadow: 0 8px 24px rgba(18,16,130,0.3);
}
.step-circle.cyan {
  background: #0099d5;
  box-shadow: 0 8px 24px rgba(0,153,213,0.35);
}
.process-step h3 {
  font-family: 'Source Sans 3', sans-serif;
  font-weight: 700; font-size: 18px;
  color: #121082; margin-bottom: 12px;
}
.process-step p {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 14px; color: #4a4a6a; line-height: 1.7;
}

/* TESTIMONIAL CAROUSELS. */

.testimonial-card {
  background: #fff;
  border: 1.5px solid #e4e6ea;
  border-radius: 16px;
  padding: 36px 32px;
  position: relative;
  transition: transform 0.28s ease, box-shadow 0.28s ease;
  height: 100%;
  box-sizing: border-box;
}
 
.testimonial-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(18,16,130,0.12);
}
 
.quote-mark {
  position: absolute;
  top: 24px; right: 28px;
  font-family: Georgia, serif;
  font-size: 72px;
  color: #e4e6ea;
  line-height: 1;
  user-select: none;
}
 
.star-row {
  display: flex;
  gap: 4px;
  margin-bottom: 20px;
}
 
.testimonial-quote {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 15px;
  color: #4a4a6a;
  line-height: 1.8;
  font-style: italic;
  margin-bottom: 28px;
  position: relative;
  z-index: 1;
}
 
.testimonial-author {
  display: flex;
  align-items: center;
  gap: 14px;
}
 
.author-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #121082, #0099d5);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Source Sans 3', sans-serif;
  font-weight: 800;
  font-size: 18px;
  color: #fff;
  flex-shrink: 0;
}
 
.author-name {
  font-family: 'Source Sans 3', sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: #121082;
}
 
.author-role {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 13px;
  color: #7b7b9a;
}
 
 
/* ── Carousel wrapper — unchanged from before ── */
 
.testimonial-carousel {
  overflow: hidden;
  position: relative;
  padding: 40px 24px;
  margin: -40px -24px;
}
 
.testimonial-track {
  display: flex;
  gap: 32px;
  transition: transform 0.5s ease;
}
 
.testimonial-slide {
  flex: 0 0 calc((100% - 64px) / 3);
}
 
@media (max-width: 768px) {
  .testimonial-slide {
    flex: 0 0 100%;
  }
}
 
.testimonial-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 32px;
}
 
.testimonial-arrow {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid #e4e6ea;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #121082; /* chevrons use currentColor, so this sets their color */
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
 
.testimonial-arrow svg {
  flex-shrink: 0;
  width: 10px;
  height: 18px;
}
 
.testimonial-arrow:hover {
  background: #0099d5;
  border-color: #0099d5;
  color: #fff;
}

.cta-title {
  font-size: clamp(2rem, 4vw, 3rem) !important;
}

.btn-cta-section {
  text-decoration: none;
  transition: background 0.22s, transform 0.18s, box-shadow 0.22s;
  cursor: pointer;
}
.btn-cta-section:hover{
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,153,213,0.35);
}

.btn-cta-outline {
  text-decoration: none;
  transition: border-color 0.22s, background 0.22s, transform 0.18s;
}
.btn-cta-outline:hover {
  transform: translateY(-2px);
}

@media (max-width: 767px) {
  .elementor-element.btn-cta-section.elementor-widget-mobile__width-inherit {
    width: 100% !important;
  }
  .elementor-element.btn-cta-section .elementor-button.elementor-button-link {
    width: 100% !important;
    justify-content: center !important;
  }
}

@media (max-width: 767px) {
  .elementor-element.btn-cta-outline.elementor-widget-mobile__width-inherit {
    width: 100% !important;
  }
  .elementor-element.btn-cta-outline .elementor-button.elementor-button-link {
    width: 100% !important;
    justify-content: center !important;
  }
}

.contact-item {
  display: flex; gap: 16px; align-items: flex-start;
  margin-bottom: 24px;
}
.contact-icon {
  width: 44px; height: 44px; border-radius: 10px;
  background: rgba(0,153,213,0.1);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.contact-label {
  font-family: 'Source Sans 3', sans-serif;
  font-weight: 700; font-size: 14px; color: #121082;
  margin-bottom: 2px;
}
.contact-val {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 15px; color: #4a4a6a;
}

button.metform-btn.metform-submit-btn {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 18px 36px !important;
  background: #121082 !important;
  color: #fff !important;
  font-family: 'Source Sans 3', sans-serif !important;
  font-weight: 700 !important;
  font-size: 17px !important;
  border-radius: 6px !important;
  border: none !important;
  transition: background 0.22s, transform 0.18s !important;
  cursor: pointer !important;
}

button.metform-btn.metform-submit-btn:hover {
  background: #0d0b5e !important;
  transform: translateY(-2px) !important;
}

button.metform-btn.metform-submit-btn svg {
  margin-left: 10px !important;
  margin-bottom: 4px !important;
}


/* ═══════════════════════════════════════════════════
   WORKPAGE
═══════════════════════════════════════════════════ */

.work-hero-gradient {
  background: linear-gradient(
    140deg,
    #0d0b5e 0%,
    #121082 45%,
    #0e1a8a 70%,
    #0a3a6e 100%
  );
}

.work-card {
  box-shadow: 0 4px 20px rgba(18,16,130,0.1)
  transition: transform 0.28s ease, box-shadow 0.28s ease;
  height: 100%;
}
.work-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 48px rgba(18,16,130,0.14);
}

/* ═══════════════════════════════════════════════════
   SERVICES
═══════════════════════════════════════════════════ */

.services-hero-gradient {
  background: linear-gradient(
    140deg,
    #0d0b5e 0%,
    #121082 45%,
    #0e1a8a 70%,
    #0a3a6e 100%
  );
}

.btn-start-service, a.btn-start-service {
  transition: background 0.22s, transform 0.18s, box-shadow 0.22s;
}
.btn-start-service:hover, a.btn-start-service:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(18,16,130,0.4);
}

/* ── Floating badges ── */
.srv-float-badge {
  position: absolute;
  background: #fff;
  border-radius: 12px; padding: 10px 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.15);
  display: flex; align-items: center; gap: 10px;
  z-index: 2; white-space: nowrap;
}
.badge-br { bottom: -12px; right: -16px; }
.badge-tl { top: -14px; left: -16px; }
.badge-tr { top: -14px; right: -16px; }
.srv-float-badge.dark-badge { background: #121082; }
.srv-float-badge.white-badge { background: #fff; }
.srv-float-badge.grad-badge {
  background: linear-gradient(135deg, #121082, #0099d5);
}
.srv-badge-icon {
  width: 40px; height: 40px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.srv-badge-icon.grad-icon {
  background: linear-gradient(135deg, #0099d5, #121082);
}
.srv-badge-val {
  font-family: 'Source Sans 3', sans-serif;
  font-weight: 800; font-size: 18px; color: #121082; line-height: 1;
}
.srv-badge-sub {
  font-size: 11px; color: #7b7b9a;
}
.srv-badge-sub.muted-white { color: rgba(255,255,255,0.55); }
.srv-badge-sub.white-sub { color: rgba(255,255,255,0.65); }
.srv-badge-title { font-family: 'Source Sans 3', sans-serif; font-weight: 700; font-size: 12px; color: #121082; }
.srv-badge-title.white-title { color: #fff; }
.srv-dot-green {
  width: 8px; height: 8px; border-radius: 50%; background: #28ca41; flex-shrink: 0;
}
.srv-rank-val {
  font-family: 'Source Sans 3', sans-serif;
  font-weight: 900; font-size: 22px; color: #fff; line-height: 1;
}

.btn-start-services, a.btn-start-services {
  transition: transform 0.18s, box-shadow 0.22s !important;
}
.btn-start-services:hover, a.btn-start-services:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(0,153,213,0.35);
}

/* ── Pricing Card ── */
.pricing-card {
  background: #fff;
  border: 2px solid #e4e6ea;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
  box-shadow: 0 4px 20px rgba(18,16,130,0.08); /* NEW: visible at rest, not just on hover */
  transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.22s ease;
}

/* Row/parent wrapping the cards needs this too, or height:100% above has nothing to stretch against.
   Add this class to your Elementor container/column row wrapping the 3 cards. */
.pricing-grid-row {
  display: flex;
  align-items: stretch;
}

.pricing-card:hover,
.pricing-card.pricing-featured {
  transform: translateY(-6px);
  box-shadow: 0 24px 60px rgba(18,16,130,0.18); /* NEW: slightly stronger than before */
}

.pricing-card:hover {
  border-color: #0099d5;
}

.pricing-card.pricing-featured {
  transform: translateY(-4px);
  border-color: #121082;
}

.pricing-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: #0099d5;
  color: #fff;
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 5px 16px;
  border-radius: 20px;
  box-shadow: 0 4px 16px rgba(0,153,213,0.4);
  white-space: nowrap;
  z-index: 2;
}

/* ── Header ── */
.pricing-header {
  padding: 28px 32px;
  border-radius: 14px 14px 0 0; /* NEW: rounds the corners directly, so .pricing-card no longer needs overflow:hidden */
}

.pricing-header-light { background: #f2f3f5; }
.pricing-header-navy  { background: #121082; }
.pricing-header-cyan  { background: #0099d5; }

.pricing-tagline {
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #0099d5;
  margin-bottom: 8px;
}

.pricing-name {
  font-family: 'Source Sans 3', sans-serif;
  font-weight: 900;
  font-size: clamp(1.8rem, 2.5vw, 2.2rem);
  color: #121082;
  line-height: 1;
  letter-spacing: -0.02em;
}

.pricing-price {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 14px;
  color: #7b7b9a;
  margin-top: 8px;
}

.pricing-header-navy .pricing-name,
.pricing-header-cyan .pricing-name {
  color: #fff;
}

.pricing-header-navy .pricing-price,
.pricing-header-cyan .pricing-price {
  color: rgba(255,255,255,0.65);
}

/* ── Body ── */
.pricing-body {
  padding: 32px 32px 28px;
  flex: 1;
  display: flex;
  flex-direction: column;
  border-radius: 0 0 14px 14px; /* NEW: rounds the bottom corners now that the card itself doesn't clip */
}

.pricing-includes-label {
  font-family: 'Source Sans 3', sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: #7b7b9a;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 20px;
}

.pricing-includes {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px; /* slightly more room since the checkmark now hangs outside the text flow */
}

.pricing-includes li {
  position: relative; /* NEW: anchors the checkmark below */
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 14px;
  color: #4a4a6a;
  line-height: 1.5;
}

.pricing-includes li::before {
  content: '';
  position: absolute;
  left: -30px; /* NEW: hangs into the card's existing side padding instead of pushing the text over */
  top: 1px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(0,153,213,0.1);
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.5 5l2.5 2.5 4.5-4.5' stroke='%230099d5' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

/* ── CTA button ── */
.pricing-cta-btn {
  display: block;
  width: 100%;
  padding: 16px 0;
  font-family: 'Source Sans 3', sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: #fff !important;
  text-align: center;
  text-decoration: none;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.18s ease;
}

.pricing-cta-btn:hover {
  opacity: 0.9;
  transform: translateY(-2px);
}

.pricing-cta-dark { background: #0f0e3a; }
.pricing-cta-navy { background: #121082; }
.pricing-cta-cyan { background: #0099d5; }

/* Make Privacy Policy page completely full-width */
body.privacy-policy #content,
body.privacy-policy .ast-container,
body.privacy-policy #primary,
body.privacy-policy #main,
body.privacy-policy .entry-content {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding-left: 0;
    padding-right: 0;
}

body.privacy-policy .elementor,
body.privacy-policy .e-con {
    width: 100%;
    max-width: 100%;
}

/* ═══════════════════════════════════════════════════
   ABOUT
═══════════════════════════════════════════════════ */

.about-lead { color: #121082; font: 600 21px/1.55 "Source Sans 3",sans-serif !important; }
.about-callout { margin-top: 32px; padding: 24px 28px; border-left: 4px solid #0099d5; background: #F2F3F5; }
.about-callout span { display: block; color: #0099d5; font: 600 10px "IBM Plex Sans",sans-serif; letter-spacing: .14em; text-transform: uppercase; }
.about-callout strong { color: #121082; font: 700 16px/1.55 "Source Sans 3",sans-serif; }

.contact-faqs { box-shadow: 0 8px 24px rgba(18, 16, 130, 0.12); }


/* ═══════════════════════════════════════════════════
   THANK YOU
═══════════════════════════════════════════════════ */

.thank-you-status{
  padding:38px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:14px;
  background:rgba(255,255,255,.065);
  backdrop-filter:blur(12px);
}
.thank-you-check{
  width:62px;
  height:62px;
  display:grid;
  place-items:center;
  margin-bottom:25px;
  border-radius:50%;
  color:#fff;
  background:#0099D6;
  box-shadow:0 0 0 14px rgba(0,153,214,.2);
}
.thank-you-check svg{width:32px;height:32px}
.thank-you-status>span{
  display:block;
  margin-top:34px;
  color:#00AEEF;
  font:600 10px "IBM Plex Sans",sans-serif;
  letter-spacing:.15em;
  text-transform:uppercase;
}
.thank-you-status ol{margin:24px 0 0;padding:0;list-style:none}
.thank-you-status li{
  display:grid;
  grid-template-columns:56px 1fr;
  gap:14px;
  padding:18px 0;
  border-top:1px solid rgba(255,255,255,.12);
}
.thank-you-status li>b{
  color:#00AEEF;
  font:600 10px "IBM Plex Sans",sans-serif;
}
.thank-you-status li strong{
  display:block;
  color:#fff;
  font:700 15px "Source Sans 3",sans-serif;
}
.thank-you-status li p{
  margin:5px 0 0;
  color:rgba(255,255,255,.55);
  font:400 12px/1.6 "IBM Plex Sans",sans-serif;
}

@media(max-width:640px){
  .thank-you-status{padding:28px 22px}
}

.system-shell{width:min(1200px,calc(100% - 64px));margin-inline:auto}

.system-section-tag{
  display:inline-block;
  color:#0099D6;
  font:600 12px "IBM Plex Sans",sans-serif;
  letter-spacing:.18em;
  text-transform:uppercase;
}

.thank-you-note{padding:92px 0;background:#F1F2F4}
.thank-you-note .system-shell{
  display:grid;
  grid-template-columns:1.1fr .9fr auto;
  gap:70px;
  align-items:center;
}
.thank-you-note h2{
  margin:12px 0 0;
  color:#0F0B6B;
  font:900 36px/1.1 "Source Sans 3",sans-serif;
}
.thank-you-note p{
  margin:0;
  color:#4A4A6A;
  font:400 14px/1.75 "IBM Plex Sans",sans-serif;
}

.note-button{
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding:14px 28px;
  border:2px solid transparent;
  border-radius:4px;
  color:#fff;
  background:#0F0B6B;
  text-decoration:none;
  font:700 15px "Source Sans 3",sans-serif;
}
.note-button svg{width:16px;height:16px;flex-shrink:0}

@media(max-width:900px){
  .thank-you-note .system-shell{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .system-shell{width:min(100% - 40px,1200px)}
  .thank-you-note .system-shell{grid-template-columns:1fr}
}

.system-kicker{
  display:inline-block;
  color:#00AEEF;
  font:600 12px "IBM Plex Sans",sans-serif;
  letter-spacing:.18em;
  text-transform:uppercase;
}