/* Tech-Strik site overrides — layered on top of the Sinco theme's own CSS.
   Only additive/overriding rules live here; the vendor stylesheets are untouched. */

.block-style-four .icon{
  height:52px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:2.5rem;
  color:var(--prime-one);
}
.block-style-four .more-btn i{
  font-size:1.25rem;
  color:var(--prime-one);
  transition:transform .3s ease;
  display:inline-block;
}
.block-style-four .more-btn:hover i{ transform:translateX(5px); }

.block-style-ten .icon i{
  font-size:2rem;
  color:var(--prime-one);
}

/* Simple two-column service/area detail layout, standing in for the
   template's own (fabricated-data-heavy) sidebar */
.ts-detail{ padding:70px 0 120px; }

/* The theme's own inner-banner has 115px of bottom padding baked in, which
   stacks with .ts-detail's (or the hub sections') own top padding above and
   leaves a huge empty gap on pages with short banner content (About, Contact,
   Services, Service Areas, and every service/city detail page). Cut it down
   site-wide instead of padding each page individually. */
.theme-inner-banner{ padding-bottom:50px; }
.theme-inner-banner + .fancy-feature-twentyFour{ padding-top:70px; }
.ts-detail .ts-sidebar{
  background:#F8FBFF;
  border-radius:12px;
  padding:30px;
}
.ts-detail .ts-sidebar h6{
  font-family:'gorditamedium';
  color:var(--heading);
  margin-bottom:18px;
  font-size:16px;
  text-transform:uppercase;
  letter-spacing:.05em;
}
.ts-detail .ts-sidebar ul{ list-style:none; padding:0; margin:0; }
.ts-detail .ts-sidebar li{ border-bottom:1px solid #e7edf7; }
.ts-detail .ts-sidebar li:last-child{ border-bottom:none; }
.ts-detail .ts-sidebar a{
  display:block;
  padding:11px 4px;
  color:var(--text-color);
  font-size:15px;
  text-decoration:none;
}
.ts-detail .ts-sidebar a:hover{ color:var(--prime-one); }

.ts-footer-note{
  font-size:14px;
  color:var(--text-color);
  margin-top:14px;
}

/* Footer newsletter without a fabricated subscriber count */
.footer-style-three .newsletter p{ margin-bottom:14px; }

/* Tech-Strik wordmark logo (icon + text) replacing the theme's own raster logo */
.site-logo{ text-decoration:none; }
.site-logo-text{
  font-family:'gorditabold';
  font-size:22px;
  line-height:1;
  color:#fff;
  margin-left:9px;
  letter-spacing:.01em;
}
.footer-style-three .site-logo-text{ color:#fff; }

/* Inner pages (services, service areas, about, contact and every detail page)
   sit on a light banner background, so the header needs a solid fill from the
   very first paint instead of waiting for the scroll-triggered .fixed state —
   otherwise the white nav text/logo is invisible until the user scrolls. */
.theme-main-menu.theme-menu-three.inner-header{
  background:transparent;
}

/* Homepage "view all" buttons under the trimmed services/service-areas grids */
.view-all-wrap{ margin-top:10px; }
.view-all-wrap .btn-one{ display:inline-flex; align-items:center; gap:8px; }

/* Short intro line on the services/service-areas hub banners, filling the
   space the banner's own padding leaves above the grid */
.theme-inner-banner .intro-desc{
  max-width:640px;
  margin:18px 0 0;
  color:rgba(0,40,78,0.75);
  font-size:18px;
  line-height:1.6em;
}

/* Service detail page body content: "What's Included" list and the
   "Who it's for" callout, added below each service's intro paragraph(s) */
.ts-detail .ts-subhead{
  font-family:'gorditamedium';
  color:var(--heading);
  font-size:20px;
  margin:30px 0 16px;
}
.ts-detail .ts-list{
  list-style:none;
  padding:0;
  margin:0 0 6px;
}
.ts-detail .ts-list li{
  position:relative;
  padding-left:30px;
  margin-bottom:12px;
  color:var(--text-color);
}
.ts-detail .ts-list li::before{
  content:"\f26a";
  font-family:"bootstrap-icons" !important;
  position:absolute;
  left:0;
  top:1px;
  color:var(--prime-one);
  font-size:18px;
}
.ts-detail .who-for{
  background:#F8FBFF;
  border-left:3px solid var(--prime-one);
  padding:16px 20px;
  border-radius:6px;
  margin:24px 0 20px;
  font-size:16px;
  line-height:1.6em;
}
.ts-detail .who-for strong{ color:var(--heading); }

/* Project portfolio cards (homepage "Recent Work" section + the Projects hub) */
.project-card{
  background:#fff;
  box-shadow:0px 25px 50px rgba(0, 73, 171, 0.05);
  border-radius:15px;
  overflow:hidden;
  display:block;
  height:100%;
  text-decoration:none;
  transition:all 0.3s ease-in-out;
}
.project-card:hover{
  transform:translateY(-4px);
  box-shadow:0px 30px 60px rgba(0, 73, 171, 0.12);
}
.project-card .project-thumb-wrap{
  display:block;
  width:100%;
  aspect-ratio:760/480;
  overflow:hidden;
  background:#F6FCFF;
}
.project-card .project-thumb-wrap img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:top center;
  transition:transform 0.4s ease-in-out;
}
.project-card:hover .project-thumb-wrap img{ transform:scale(1.04); }
.project-card .project-body{ padding:28px 28px 30px; }
.project-card h5{
  font-family:'gorditamedium';
  font-size:22px;
  color:var(--heading);
  margin-bottom:10px;
}
.project-card p{
  font-size:16px;
  line-height:1.6em;
  margin-bottom:18px;
  color:var(--text-color);
}
.project-card .visit-link{
  font-family:'gorditamedium';
  color:var(--prime-one);
  font-size:15px;
  display:inline-flex;
  align-items:center;
  gap:7px;
}
.project-card .visit-link i{ font-size:13px; transition:transform .25s ease; }
.project-card:hover .visit-link i{ transform:translate(3px, -3px); }

/* ---------- Homepage hero: work-first ---------- */
.hero-work{
  position:relative;
  overflow:hidden;
  background:var(--prime-five);
  padding:112px 0 0;
  /* fill the first screen so the next section never peeks in below the hero */
  min-height:100vh;
  min-height:100svh;
  display:flex;
  flex-direction:column;
}
.hero-work > .container{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.hero-work .hw-strip{ margin-top:auto; }
.hero-work::before{
  content:"";
  position:absolute;
  right:-180px;
  top:-220px;
  width:560px;
  height:560px;
  border-radius:50%;
  background:rgba(255,255,255,0.06);
}
.hero-work .container{ position:relative; z-index:1; }
.hero-work .hw-row{ padding:0 0 clamp(28px, 5vh, 44px); }
.hero-work .hw-pill{
  display:inline-flex;
  align-items:center;
  padding:8px 16px;
  border-radius:999px;
  background:rgba(255,255,255,0.14);
  color:#fff;
  font-family:'gorditamedium';
  font-size:14px;
  line-height:1.2;
}
.hero-work .hw-title{
  font-family:'gorditabold';
  font-size:clamp(38px, min(7.4vh, 4.4vw), 58px);
  line-height:1.08;
  letter-spacing:-0.02em;
  color:#fff;
  margin:clamp(12px, 2.4vh, 20px) 0 clamp(12px, 2.4vh, 20px);
}
.hero-work .hw-title span{ color:#FFB08A; }
.hero-work .hw-lead{
  max-width:530px;
  text-wrap:pretty;
  font-size:clamp(16px, 2.8vh, 19px);
  line-height:1.5em;
  color:rgba(255,255,255,0.9);
  margin:0 0 clamp(20px, 4vh, 30px);
}
.hero-work .hw-cta{ display:flex; flex-wrap:wrap; gap:14px; }
.hero-work .hw-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  height:54px;
  box-sizing:border-box;
  padding:0 30px;
  border-radius:10px;
  font-family:'gorditamedium';
  font-size:17px;
  line-height:1;
  transition:all 0.3s ease-in-out;
}
.hero-work .hw-btn-primary{ background:var(--prime-two); color:#010D4C; }
.hero-work .hw-btn-primary:hover{ background:#FF9463; color:#010D4C; }
.hero-work .hw-btn-ghost{ border:1.5px solid #fff; color:#fff; }
.hero-work .hw-btn-ghost:hover{ background:#fff; color:#4E15C9; }

.hw-stack{
  position:relative;
  width:100%;
  max-width:572px;
  aspect-ratio:572/468;
  margin-left:auto;
}
.hw-frame{
  position:absolute;
  width:80.4%;
  display:block;
  border-radius:14px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 24px 48px rgba(1,13,76,0.35);
  transition:transform 0.3s ease-in-out;
}
.hw-frame:hover{ transform:translateY(-4px); }
.hw-frame-3{ left:19.58%; top:0; z-index:1; }
.hw-frame-2{ left:9.79%; top:11.97%; z-index:2; }
.hw-frame-1{ left:0; top:23.93%; z-index:3; }
.hw-frame-bar{
  height:36px;
  box-sizing:border-box;
  padding:0 14px;
  display:flex;
  align-items:center;
  gap:6px;
  background:#F1EEFB;
}
.hw-dot{ width:10px; height:10px; border-radius:50%; background:#D5CDEB; display:block; flex:none; }
.hw-url{
  margin-left:10px;
  flex:1;
  min-width:0;
  height:22px;
  display:flex;
  align-items:center;
  padding:0 12px;
  border-radius:999px;
  background:#fff;
  font-size:12px;
  line-height:1;
  color:#4B4770;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.hw-frame img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:460/320;
  object-fit:cover;
  object-position:top center;
}
.hw-all{
  position:absolute;
  right:18px;
  bottom:12px;
  z-index:4;
  display:inline-flex;
  align-items:center;
  gap:8px;
  height:46px;
  box-sizing:border-box;
  padding:0 20px;
  border-radius:999px;
  background:#fff;
  color:#4E15C9;
  font-family:'gorditamedium';
  font-size:15px;
  line-height:1;
  box-shadow:0 12px 28px rgba(1,13,76,0.3);
  transition:all 0.3s ease-in-out;
}
.hw-all:hover{ background:#FFB08A; color:#010D4C; }

.hw-strip{ background:#4E15C9; padding:18px 0; position:relative; z-index:1; }
.hw-strip-list{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:10px 28px;
  margin:0;
  padding:0 15px;
}
.hw-strip-list li{
  display:flex;
  align-items:center;
  gap:28px;
  font-family:'gorditamedium';
  font-size:16px;
  line-height:1.4;
  color:#fff;
}
.hw-strip-list li + li::before{
  content:"";
  width:8px;
  height:8px;
  background:#FFB08A;
  transform:rotate(45deg);
  flex:none;
}

/* ---------- Homepage "where to start" cards ---------- */
.need-section{ background:#F6FCFF; padding:100px 0 70px; }
.need-card{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:14px;
  width:100%;
  box-sizing:border-box;
  padding:28px 26px;
  border-radius:16px;
  background:#fff;
  box-shadow:0 18px 40px rgba(0, 73, 171, 0.08);
  text-decoration:none;
  transition:all 0.3s ease-in-out;
}
.need-card:hover{ transform:translateY(-4px); box-shadow:0 26px 50px rgba(0, 73, 171, 0.15); }
.need-card .need-icon{
  width:52px;
  height:52px;
  border-radius:50%;
  background:#EFE8FF;
  color:var(--prime-five);
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.need-card h5{
  font-family:'gorditamedium';
  font-size:22px;
  color:var(--heading);
  margin:0;
}
.need-card p{
  font-size:16px;
  line-height:1.55em;
  color:var(--text-color);
  margin:0;
}
.need-card .need-link{
  margin-top:auto;
  padding-top:4px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:'gorditamedium';
  font-size:15px;
  color:#4E15C9;
}
.need-card .need-link svg{ transition:transform 0.25s ease; }
.need-card:hover .need-link svg{ transform:translateX(3px); }

@media (max-width: 991.98px){
  .hero-work{ padding-top:120px; }
  .hero-work .hw-row{ padding:20px 0 60px; }
  .hero-work .hw-title{ font-size:46px; }
  .hw-stack{ margin:56px auto 0; max-width:520px; }
  .need-section{ padding:70px 0 40px; }
}
@media (max-width: 575.98px){
  .hero-work .hw-title{ font-size:36px; }
  .hero-work .hw-lead{ font-size:17px; }
  .hero-work .hw-btn{ height:50px; padding:0 22px; font-size:16px; }
  .hw-all{ height:40px; padding:0 16px; font-size:14px; right:8px; }
  .hw-strip-list{ gap:6px 22px; }
  .hw-strip-list li{ font-size:15px; }
  .hw-strip-list li + li::before{ display:none; }
}

/* =====================================================================
   Site-wide restyle: the homepage's new look (flat purple, big rounded
   type, lilac-circle cards, orange primary buttons) applied everywhere
   ===================================================================== */

/* Inner-page banners: flat purple like the hero, white type */
.theme-inner-banner{
  background:var(--prime-five);
  padding:150px 0 64px;
  position:relative;
  overflow:hidden;
}
.theme-inner-banner::before{
  content:"";
  position:absolute;
  right:-180px;
  top:-220px;
  width:520px;
  height:520px;
  border-radius:50%;
  background:rgba(255,255,255,0.06);
}
.theme-inner-banner .container{ position:relative; z-index:1; }
.theme-inner-banner .intro-title{
  font-family:'gorditabold';
  font-size:clamp(38px, 5vw, 56px);
  line-height:1.1;
  letter-spacing:-0.02em;
  color:#fff;
  margin-bottom:16px;
}
.theme-inner-banner .page-breadcrumb li{ color:rgba(255,255,255,0.85); }
.theme-inner-banner .page-breadcrumb li a{ color:#fff; }
.theme-inner-banner .page-breadcrumb li:after{ color:#FFB08A; }
.theme-inner-banner .page-breadcrumb li.current-page{ color:#FFB08A; }
.theme-inner-banner .intro-desc{ color:rgba(255,255,255,0.9); }

/* Primary buttons: orange with navy text (readable, matches the hero CTA) */
body .btn-one{
  background:var(--prime-two);
  color:#010D4C;
  border-radius:10px;
}
body .btn-one:hover{ background:#FF9463; color:#010D4C; }
.fancy-short-banner-five .msg-btn{
  background:var(--prime-two);
  color:#010D4C;
}
.fancy-short-banner-five .msg-btn:hover{ background:#FF9463; color:#010D4C; }

/* Section rhythm: tighter padding, alternating tint */
.fancy-feature-twentyFour.pt-160{ padding-top:90px; }
.fancy-feature-twentyFour.pb-150{ padding-bottom:50px; }
.theme-inner-banner + .fancy-feature-twentyFour{ padding-top:70px; }
.section-tint{ background:#F6FCFF; }
.need-section{ padding:84px 0 54px; }

/* Service / city cards: left-aligned, lilac icon circle, lift on hover */
.block-style-four{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:14px;
  text-align:left;
  padding:28px 26px 30px;
  border-radius:16px;
  box-shadow:0 18px 40px rgba(0, 73, 171, 0.08);
}
.block-style-four:hover{
  background:#fff;
  transform:translateY(-4px);
  box-shadow:0 26px 50px rgba(0, 73, 171, 0.15);
}
.block-style-four .icon{
  width:52px;
  height:52px;
  border-radius:50%;
  background:#EFE8FF;
  align-items:center !important;
  justify-content:center !important;
}
.block-style-four .icon i{ font-size:24px; line-height:1; color:var(--prime-five); }
.block-style-four h5{ font-size:22px; margin:0; }
.block-style-four h5:hover{ color:var(--prime-five); }
.block-style-four p{ font-size:16px; line-height:1.55em; margin:0; }
.block-style-four .more-btn{
  position:static;
  transform:none;
  margin-top:auto;
  width:40px;
  height:40px;
  border-radius:50%;
  background:#EFE8FF;
  color:var(--prime-five);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  transition:all 0.3s ease-in-out;
}
.block-style-four:hover .more-btn{ background:var(--prime-five); color:#fff; }

/* Detail pages: sidebar and callouts in the same card language */
.ts-detail .ts-sidebar{
  background:#fff;
  box-shadow:0 18px 40px rgba(0, 73, 171, 0.08);
  border-radius:16px;
  padding:28px;
}
.ts-detail .ts-sidebar li{ border-bottom-color:#EEE9FB; }
.ts-detail .ts-sidebar a:hover{ color:var(--prime-five); }
.ts-detail .ts-list li::before{ color:var(--prime-five); }
.ts-detail .who-for{
  background:#F4EFFF;
  border-left:0;
  border-radius:14px;
  padding:18px 22px;
}
.ts-detail .ts-footer-note a{ color:var(--prime-five); }

/* Contact form */
.form-field{
  width:100%;
  padding:14px 18px;
  border-radius:10px;
  border:1.5px solid #DDD6F3;
  background:#fff;
  font-size:16px;
  color:var(--heading);
  transition:border-color 0.2s ease, box-shadow 0.2s ease;
}
.form-field:focus{
  outline:none;
  border-color:var(--prime-five);
  box-shadow:0 0 0 3px rgba(107, 37, 255, 0.12);
}

/* Footer: drop the template's colourful cube decorations */
.footer-style-three > .shapes{ display:none; }

/* Chat widget: brand purple instead of the template's red/blue */
.chatbot-toggle-btn,
.chatbot-header{ background:var(--prime-five); }
.chatbot-avatar.sm,
.chatbot-msg.user .bubble,
.chatbot-send-btn{ background:var(--prime-five); }
.quick-reply-btn{ border-color:rgba(107, 37, 255, 0.3); color:var(--prime-five); }
.quick-reply-btn:hover{ background:var(--prime-five); color:#fff; }
.chatbot-input-row input:focus{ border-color:var(--prime-five); }

@media (max-width: 991.98px){
  .theme-inner-banner{ padding:126px 0 48px; }
  .fancy-feature-twentyFour.pt-160{ padding-top:70px; }
}

/* Detail/about/contact body copy: match the hero's type rhythm */
.ts-detail .main-title{
  font-family:'gorditamedium';
  font-size:clamp(30px, 3.4vw, 40px);
  line-height:1.15;
  letter-spacing:-0.01em;
}
.ts-detail p{ font-size:18px; line-height:1.7em; }

/* The template paints a light band across the top 22% of every feature
   section (meant to blend into its old light banner); with the purple
   banners and alternating tints it just creates a seam, so drop it */
.fancy-feature-twentyFour:before{ display:none; }
.block-style-four .more-btn i{ color:inherit; }
.project-card .visit-link{ color:#4E15C9; }

/* =====================================================================
   One card language everywhere: services, cities, projects and the
   "where to start" cards all share the same box, type, spacing and link
   ===================================================================== */
.need-section{ padding:84px 0 54px; }

/* project cards: same radius, shadow, padding, type and link as need-card */
.project-card{
  border-radius:16px;
  box-shadow:0 18px 40px rgba(0, 73, 171, 0.08);
  width:100%;
  box-sizing:border-box;
}
.project-card:hover{ box-shadow:0 26px 50px rgba(0, 73, 171, 0.15); }
.project-card .project-body{
  padding:28px 26px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:14px;
}
.project-card h5{ font-size:22px; margin:0; }
.project-card p{ font-size:16px; line-height:1.55em; margin:0; color:var(--text-color); }
.project-card .visit-link{
  margin-top:auto;
  padding-top:4px;
  font-family:'gorditamedium';
  font-size:15px;
  color:#4E15C9;
  display:inline-flex;
  align-items:center;
  gap:8px;
}

/* closing CTA banner: same purple family, same corner radius */
.fancy-short-banner-five .bg-wrapper{
  background:#4E15C9;
  border-radius:16px;
  padding:46px 56px;
}
.fancy-short-banner-five h3{
  font-family:'gorditabold';
  font-size:clamp(28px, 3.2vw, 40px);
  line-height:1.15;
  letter-spacing:-0.01em;
}
.fancy-short-banner-five .msg-btn{ height:54px; line-height:54px; padding:0 30px; font-size:17px; }

/* footer: orange primary button like everywhere else */
.theme-basic-footer .newsletter form button{
  background:var(--prime-two);
  color:#010D4C;
}
.theme-basic-footer .newsletter form button:hover{ background:#FF9463; color:#010D4C; }
.theme-basic-footer .footer-title{ font-family:'gorditamedium'; }
.theme-basic-footer .footer-nav-link a:hover{ color:#FFB08A; }

@media (max-width: 991.98px){
  .need-section{ padding:64px 0 36px; }
  .fancy-short-banner-five .bg-wrapper{ padding:36px 28px; }
}

/* beat the template's more specific footer rules */
.theme-basic-footer.footer-style-three .newsletter form button{
  background:var(--prime-two);
  color:#010D4C;
}
.theme-basic-footer.footer-style-three .newsletter form button:hover{
  background:#FF9463;
  color:#010D4C;
}
.fancy-short-banner-five h3{ text-wrap:balance; }
.ts-detail .ts-list li{ font-size:18px; line-height:1.55em; }

/* The tinted section runs straight into the closing CTA: the tint continues
   behind the top half of the banner, which straddles it and the purple footer */
.need-section + .fancy-short-banner-five::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  bottom:100px;
  background:#F6FCFF;
  z-index:-1;
}
.need-section .view-all-wrap{ margin-top:10px; }

/* "How It Works" numbered steps (service pages + service-city pages) */
.ts-detail .ts-steps{
  list-style:none;
  padding:0;
  margin:0 0 10px;
  counter-reset:ts-step;
}
.ts-detail .ts-steps li{
  position:relative;
  padding-left:46px;
  margin-bottom:20px;
}
.ts-detail .ts-steps li:last-child{ margin-bottom:0; }
.ts-detail .ts-steps li::before{
  counter-increment:ts-step;
  content:counter(ts-step);
  position:absolute;
  left:0;
  top:0;
  width:32px;
  height:32px;
  border-radius:50%;
  background:var(--prime-five);
  color:#fff;
  font-family:'gorditamedium';
  font-size:15px;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
}
.ts-detail .ts-steps strong{
  display:block;
  font-family:'gorditamedium';
  color:var(--heading);
  font-size:18px;
  margin-bottom:4px;
}
.ts-detail .ts-steps span{ font-size:16px; line-height:1.55em; color:var(--text-color); }

/* Short, static FAQ blocks (service pages, city pages, service-city pages) */
.ts-detail .ts-faq{ margin:0 0 10px; }
.ts-detail .ts-faq-item{
  border-bottom:1px solid #EEE9FB;
  padding:18px 0;
}
.ts-detail .ts-faq-item:first-child{ padding-top:0; }
.ts-detail .ts-faq-item:last-child{ border-bottom:none; padding-bottom:0; }
.ts-detail .ts-faq-item h6{
  font-family:'gorditamedium';
  font-size:18px;
  color:var(--heading);
  margin:0 0 8px;
}
.ts-detail .ts-faq-item p{
  font-size:16px;
  line-height:1.6em;
  margin:0;
  color:var(--text-color);
}

/* Two stacked sidebar boxes on a page (e.g. "Popular Here" above "Other Locations") */
.ts-sidebar + .ts-sidebar{ margin-top:24px; }

/* =====================================================================
   Homepage pricing section
   ===================================================================== */
.pricing-section{ background:#fff; padding:84px 0 70px; }
.pricing-card{
  display:flex;
  flex-direction:column;
  gap:14px;
  width:100%;
  box-sizing:border-box;
  background:#fff;
  border:1px solid #EEE9FB;
  border-radius:16px;
  padding:34px 30px;
  box-shadow:0 18px 40px rgba(0, 73, 171, 0.08);
  position:relative;
  transition:all 0.3s ease-in-out;
}
.pricing-card:hover{ transform:translateY(-4px); box-shadow:0 26px 50px rgba(0, 73, 171, 0.15); }
.pricing-card.is-popular{
  border:2px solid var(--prime-five);
  box-shadow:0 26px 50px rgba(107, 37, 255, 0.18);
}
.pricing-badge{
  position:absolute;
  top:-14px;
  left:30px;
  background:var(--prime-five);
  color:#fff;
  font-family:'gorditamedium';
  font-size:13px;
  line-height:1;
  padding:7px 16px;
  border-radius:999px;
}
.pricing-card h5{ font-size:22px; margin:0; color:var(--heading); }
.pricing-tagline{
  font-size:15px;
  line-height:1.5em;
  color:var(--text-color);
  margin:0;
  min-height:3em;
  display:flex;
  align-items:flex-start;
}
.pricing-price{
  font-family:'gorditabold';
  font-size:34px;
  line-height:1.1;
  color:var(--heading);
  margin:6px 0 4px;
}
.pricing-price small{
  display:block;
  font-family:'gorditaregular';
  font-size:14px;
  color:var(--text-color);
  margin-top:4px;
}
.pricing-list{ list-style:none; padding:0; margin:6px 0 4px; flex-grow:1; }
.pricing-list li{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin-bottom:12px;
  font-size:15px;
  line-height:1.5em;
  color:var(--text-color);
}
.pricing-list li svg{ flex:none; margin-top:3px; color:var(--prime-five); }
.pricing-note{
  font-size:13px;
  line-height:1.5em;
  color:#8A85A8;
  font-style:italic;
  margin:0 0 10px;
}
.pricing-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  height:52px;
  border-radius:10px;
  font-family:'gorditamedium';
  font-size:16px;
  text-decoration:none;
  margin-top:auto;
}
.pricing-cta.primary{ background:var(--prime-two); color:#010D4C; }
.pricing-cta.primary:hover{ background:#FF9463; color:#010D4C; }
.pricing-cta.ghost{ background:#fff; color:var(--prime-five); border:1.5px solid var(--prime-five); }
.pricing-cta.ghost:hover{ background:var(--prime-five); color:#fff; }
.pricing-footnote{
  max-width:640px;
  margin:20px auto 0;
  text-align:center;
  font-size:15px;
  line-height:1.6em;
  color:var(--text-color);
}
@media (max-width: 991.98px){
  .pricing-section{ padding:64px 0 46px; }
  .pricing-card.is-popular{ margin-top:14px; }
}