/**
Theme Name: NorthArc
Author: PureLogics
Author URI: http://wpastra.com/about/
Description: NorthArc theme built on using Astra Template.
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: northarc
Template: astra
*/
.content-over-image {
	position:relative;
}
.content-over-image .elementor-image-box-content {
  position: absolute;
    bottom: 35px;
    
    padding: 20px;
    background: rgba(255, 255, 255, 0.01);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    width: 94%;
    left: 3%;
    border-radius: 10px;
    border: 1px solid #ffffff2e;
}
.arc-section{
    position:relative;
    max-width: 1614px;
    margin: 0 auto;
    height: 336px;
    overflow: visible;
  }

  /* Flip SVG horizontally so the reveal looks like RIGHT -> LEFT */
  .arc-svg{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    display:block;
    transform: scaleX(-1);
    transform-origin: center;
  }

  /* Mask reveal animation */
  #arcMaskPath{
    stroke-dasharray: var(--arcLen, 1);
    stroke-dashoffset: var(--arcLen, 1);
  }
  .arc-section.is-animating #arcMaskPath{
    animation: arcDraw var(--arcDuration, 1400ms) ease-in-out forwards;
  }
  @keyframes arcDraw{
    to { stroke-dashoffset: 0; }
  }

  /* ===== Common “pop in” animation (items) ===== */
  .pop-item{
    opacity: 0;
    transform: translateY(6px) scale(0.92);
    transition: opacity 350ms ease, transform 350ms ease;
    pointer-events: none;
  }

  /* ===== Bubbles ===== */
  .bubble{
    position:absolute;
    width: 54px;
    height: 54px;
    border-radius: 999px;
    background: rgba(18, 35, 62, 1);
    border: 1px solid rgba(255,255,255,0.25);
    box-shadow: 0 10px 22px rgba(0,0,0,0.25);
    cursor: pointer;
  }

  .bubble-1{ left: 8%; top: 57%; }
  .bubble-3{ right: 8%; top: 57%; }

  .bubble-badge{
    position:absolute;
    top: -10px;
    right: -10px;
    width: 26px;
    height: 26px;
    border-radius: 999px;
    background: #ffcc33;
    color: #173258;
    font-weight: 700;
    font-size: 14px;
    line-height: 26px;
    text-align:center;
    border: 3px solid #1b2f53;
  }

  .bubble-num{
    position:absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    color: rgba(255,255,255,0.9);
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 700;
    font-size: 16px;
  }

  /* ===== Tooltip ===== */
  .tooltip{
        position: absolute;
    left: 50%;
    bottom: calc(100% + 10px);
    transform: translateX(-50%) translateY(6px);
    min-width: 220px;
    max-width: 280px;
    background: #0f2240;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 12px;
    line-height: 18px;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35);
    opacity: 0;
    visibility: hidden;
    transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease;
    z-index: 10;
    pointer-events: none;
    white-space: normal;
    font-weight: 800;
  }

  .tooltip:after{
    content:"";
    position:absolute;
    left: 50%;
    top: 100%;
    transform: translateX(-50%);
    border: 7px solid transparent;
    border-top-color: #0f2240;
  }

  .bubble:hover .tooltip,
  .bubble:focus .tooltip,
  .bubble:focus-within .tooltip{
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
  }

  .bubble:focus{
    outline: none;
    box-shadow: 0 0 0 3px rgba(74,186,106,0.45), 0 10px 22px rgba(0,0,0,0.25);
  }

  /* ===== Center icon ===== */
  .center-icon{
    position:absolute;
    left: 50%;
    top: -8px;                 /* tweak this to match your screenshot */
    transform: translateX(-50%);
    width: 180px;
    height: 180px;
    z-index: 2;
  }

  .center-icon img{
    width: 100%;
    height: auto;
    display:block;
  }

  /* Assign pop behavior */
  .bubble,
  .center-icon{ /* both pop in */
    opacity: 0;
    transform: translateX(-50%) translateY(6px) scale(0.92);
    transition: opacity 350ms ease, transform 350ms ease;
    pointer-events: none;
  }

  /* Fix bubbles transform baseline (they don't use translateX(-50%)) */
  .bubble{
    transform: translateY(6px) scale(0.92);
  }

  /* ===== Step reveals ===== */
  .arc-section.step-1 .bubble-1{
    opacity: 1;
    transform: translateY(-25px) scale(1);
    pointer-events: auto;
  }

  .arc-section.step-2 .center-icon{
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
    pointer-events: auto;
  }

  .arc-section.step-3 .bubble-3{
    opacity: 1;
    transform: translateY(-25px) scale(1);
    pointer-events: auto;
  }
 /* =========================
   Ripple / Wave Pulse
========================= */

/* make sure bubbles can host pseudo-elements */
.bubble{
  position: absolute; /* you already have this */
  overflow: visible;
}

/* the wave rings */
.bubble::before,
.bubble::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width: 100%;
  height: 100%;
  border-radius: 999px;
  transform: translate(-50%,-50%) scale(1);
  opacity: 0;
  pointer-events:none;
  z-index: -1; /* behind the bubble */
  border: 2px solid rgba(65,176,190,0.75);  /* wave color */
}

/* second ring starts later for continuous waves */
.bubble::after{
  animation-delay: 1.2s;
}

/* the ripple animation */
@keyframes rippleWave{
  0%{
    transform: translate(-50%,-50%) scale(1);
    opacity: 0.0;
  }
  15%{
    opacity: 0.65;
  }
  100%{
    transform: translate(-50%,-50%) scale(1.8);
    opacity: 0;
  }
}

/* enable waves only when bubble is shown */
.arc-section.step-1 .bubble-1::before,
.arc-section.step-1 .bubble-1::after{
  animation: rippleWave 2.4s ease-out infinite;
}

.arc-section.step-3 .bubble-3::before,
.arc-section.step-3 .bubble-3::after{
  animation: rippleWave 2.4s ease-out infinite;
}

.text-green{
	color:#41B0BE;
}
  @media (max-width: 600px){
    .arc-section{ height: 240px; }
    .bubble{ width: 48px; height: 48px; }
    .center-icon{ width: 140px; height: 140px; top: 4%; }
  }

.content-over-image .elementor-image-box-content{
    transform: translateY(70px);
    opacity: 0;
    transition:
        transform 1500ms cubic-bezier(.22,.61,.36,1),
        opacity 1000ms ease;
}

/* Activated after scroll */
.content-over-image.is-visible .elementor-image-box-content{
    transform: translateY(0);
    opacity: 1;
}
.steps-flow{
  list-style:none;
  margin:0;
  padding:0;
  font-size:0; /* remove inline-block gaps */
}

/* each step */
.steps-flow .step{
  display:inline-block;
  width:24%;
  position:relative;
  vertical-align:top;
  text-align:center;

  opacity:0;
  transform: translateY(20px);
  transition: all 600ms cubic-bezier(.22,.61,.36,1);
}

/* visible state */
.steps-flow .step.show{
  opacity:1;
  transform: translateY(0);
}

/* =========================
   CIRCLE
========================= */

.step-circle {
    width: 48px;
    height: 48px;
    line-height: 44px;
    margin: 0 auto 14px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .15);
    color: #fff;
    font-size: 18px;
    font-weight: 400;
    position: relative;
    background: #50959d;
    z-index: 11111;
}

/* =========================
   LABEL
========================= */

.step-label{
  color:#ffffff;
  font-size:14px;
  letter-spacing:.8px;
}

/* =========================
   CONNECTING LINE
========================= */

.step-line{
  position:absolute;
  top:22px;
  right:-50%;
  width:100%;
  height:2px;
  background:rgba(255,255,255,.35);
  overflow:hidden;
}

/* animated fill */
.step-line::after{
  content:"";
  position:absolute;
  left:0;
  top:0;
  height:100%;
  width:0%;
    background:rgba(255,255,255,.35);
  transition: width 700ms ease;
}

/* when line animates */
.step.draw-line .step-line::after{
  width:100%;
}

/* remove last connector */
.step-last .step-line{
  display:none;
}
 .phases-wrap{
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 18px 10px;
    font-family: Arial, Helvetica, sans-serif;
  }

  .phases-row{
    white-space: nowrap; /* keeps row in one line */
    font-size: 0;        /* remove inline-block gaps */
  }

  .phase{
    display: inline-block;
    vertical-align: top;
    width: 20%;
    padding: 0;
    box-sizing: border-box;

    opacity: 0;
    transform: translateY(10px);
    transition: opacity 420ms ease, transform 420ms ease;
  }

  .phase.is-visible{
    opacity: 1;
    transform: translateY(0);
  }

  /* ===== Top area ===== */
  .phase-top{
    position: relative;
    height: 56px;
  }
.phase-icon img {
    height: 20px;
    margin: auto;
    display: block;
}
  .phase-icon{
    width: 42px;
    height: 42px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid #f2c9a7;
    display: flex;
    position: relative;
    z-index: 2;
  }

  .phase-icon.active{
    background: #f7941d;
    border-color: #f7941d;
  }

  /* placeholder dot inside (replace with your real icon) */
  .icon-dot{
    position:absolute;
    left:50%;
    top:50%;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: rgba(0,0,0,0.55);
    transform: translate(-50%,-50%);
  }

  .phase-icon.active .icon-dot{
    background: #fff;
  }

  /* ===== Connector line ===== */
  .connector{
    position: absolute;
    left: 42px; /* starts after icon */
    top: 21px;
    height: 3px;
    width: calc(100% - 42px);
    background: rgba(247,148,29,0.35);
    overflow: hidden;
    border-radius: 2px;
  }

  .connector-fill{
    display: block;
    height: 100%;
    width: 0%;
    background: #f7941d;
    border-radius: 2px;
    transition: width 650ms ease;
  }

  /* when connector animates */
  .phase.line-draw .connector-fill{
    width: 100%;
  }

  /* Last step has no connector */
  .phase-last .connector{ display:none; }

  /* ===== Text ===== */
  .phase-body{
    padding-top: 8px;
  }

  .phase-label{
    font-size: 14px;
    letter-spacing: .4px;
    color: #f7941d;
    font-weight: 700;
    margin-bottom: 6px;
  }

  .phase-label.phase-green{
    color: #4aba6a;
  }

  .phase-title{
    font-size: 18px;
 color: #1F3050;
    font-weight: 700;
    margin-bottom: 6px;
  }

  .phase-text{
    font-size: 16px;
    line-height: 1.35;
    white-space: normal; /* allow wrap */
	      padding-right: 25px;
  }

  /* ===== Responsive ===== */
  @media (max-width: 900px){
    .phase{ width: 50%; margin-bottom: 18px; }
    .phases-row{ white-space: normal; font-size: 0; }
    .connector{ width: calc(100% - 42px); }
  }

.text-backed-slider{
  padding: 40px 0;
}

.text-backed-slider .tbs-viewport{
  width: min(1280px, 96vw);
  margin: 0 auto;
  position: relative;
  overflow: visible;
  padding: 80px 0 90px;
  min-height: 520px;
}

.text-backed-slider .tbs-stage{
  position: relative;
  width: 100%;
  height: 420px;
  overflow: visible;
}

/* every slide is stacked in same center area */
.text-backed-slider .tbs-slide{
  position: absolute;
  top: 0;
  left: 50%;
  width: 280px;
  margin-left: -140px;
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  transition:
    transform .55s ease,
    opacity .3s ease,
    filter .3s ease;
  transform: translateX(0) rotate(0deg) scale(.98);
}

.text-backed-slider .tbs-card{
  width: 280px;
  height: 380px;
  border-radius: 18px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 22px 55px rgba(0,0,0,.18);
  background: #000;
}

.text-backed-slider .tbs-card img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.text-backed-slider .tbs-overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.78), rgba(0,0,0,.10));
  pointer-events: none;
}

.text-backed-slider .tbs-text{
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 2;
  color: #fff;
}

.text-backed-slider .tbs-text small{
  display: inline-block;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .12em;
  opacity: .85;
  margin-bottom: 6px;
}

.text-backed-slider .tbs-text h3{
  margin: 0;
  font-weight: 800;
  font-size: 18px;
  line-height: 1.15;
  color: #fff;
}

.text-backed-slider .tbs-plus{
  position: absolute;
  right: 16px;
  bottom: 108px;
  width: 58px;
  height: 58px;
  padding: 0;
  border-radius: 999px;
  border: none;
  background: #f59a23;
  color: #fff;
  font-size: 22px;
  font-weight: 800;
  cursor: pointer;
  z-index: 3;
  box-shadow: 0 12px 26px rgba(245,154,35,.35);
}

.text-backed-slider .tbs-tooltip{
  position: absolute;
  right: 16px;
  bottom: 178px;
  width: 240px;
  background: rgba(255,255,255,.96);
  color: #111827;
  border-radius: 12px;
  padding: 10px 12px;
  display: none;
  z-index: 5;
  box-shadow: 0 18px 50px rgba(0,0,0,.22);
  font: 600 12px/1.35 system-ui, -apple-system, Segoe UI, Roboto, Arial;
}

.text-backed-slider .tbs-tooltip::after{
  content: "";
  position: absolute;
  right: 18px;
  bottom: -7px;
  width: 14px;
  height: 14px;
  background: rgba(255,255,255,.96);
  transform: rotate(45deg);
}

.text-backed-slider .tbs-card.show-tip .tbs-tooltip{
  display: block;
}

/* visual states */
.text-backed-slider .tbs-slide.is-center{
  opacity: 1;
  pointer-events: auto;
  z-index: 3;
  transform: translateX(0) rotate(0deg) scale(1.12);
}

.text-backed-slider .tbs-slide.is-left{
  opacity: 1;
  pointer-events: auto;
  z-index: 2;
  transform: translateX(-485px) rotate(-14deg) scale(.98);
}

.text-backed-slider .tbs-slide.is-right{
  opacity: 1;
  pointer-events: auto;
  z-index: 2;
  transform: translateX(485px) rotate(14deg) scale(.98);
}

.text-backed-slider .tbs-slide.is-left .tbs-card,
.text-backed-slider .tbs-slide.is-right .tbs-card{
  filter: saturate(.95);
}

/* arrows */
.text-backed-slider .tbs-nav {
    position: absolute;
    top: 50%;
    transform: scale(1.5) translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 999px;
    border: none;
    background: #f3f4f6;
    z-index: 20;
    cursor: pointer;
    box-shadow: 0 14px 30px rgba(0, 0, 0, .10);
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.text-backed-slider .tbs-prev{ left: 40px; }
.text-backed-slider .tbs-next{ right: 40px; }

.text-backed-slider .tbs-nav::before{
  content:"";
  position:absolute;
  inset:0;
  margin:auto;
  width: 10px;
  height: 10px;
  border-right: 2px solid #111827;
  border-bottom: 2px solid #111827;
  transform: rotate(135deg);
}

.text-backed-slider .tbs-next::before{
  transform: rotate(-45deg);
}

@media (max-width: 900px){
  .text-backed-slider .tbs-slide.is-left{
    transform: translateX(-215px) rotate(-12deg) scale(.96);
  }

  .text-backed-slider .tbs-slide.is-right{
    transform: translateX(215px) rotate(12deg) scale(.96);
  }
}

@media (max-width: 650px){
  .text-backed-slider .tbs-viewport{
    min-height: 420px;
    padding: 40px 0 60px;
  }

  .text-backed-slider .tbs-stage{
    height: 340px;
  }

  .text-backed-slider .tbs-slide{
    width: 230px;
    margin-left: -115px;
  }

  .text-backed-slider .tbs-card{
    width: 230px;
    height: 320px;
  }

  .text-backed-slider .tbs-slide.is-center{
    transform: translateX(0) rotate(0deg) scale(1.05);
  }

  .text-backed-slider .tbs-slide.is-left{
    transform: translateX(-145px) rotate(-10deg) scale(.94);
  }

  .text-backed-slider .tbs-slide.is-right{
    transform: translateX(145px) rotate(10deg) scale(.94);
  }

  .text-backed-slider .tbs-prev,
  .text-backed-slider .tbs-next{
    display: none;
  }
}
footer #block-13 ul {
    display: flex;
    justify-content: center;
    gap: 16px;
    font-size: 14px;
}
footer section#block-14 {
    text-align: center;
    font-size: 14px;
}
footer .widget {
    margin: 0 0 30px;
}
footer section#block-14 p {
    margin: 0;
}
.site-logo-img .transparent-custom-logo img, .ast-theme-transparent-header .site-logo-img img{
	filter:none;
}
.gradient-heading-soft {
background: linear-gradient(90deg, #1F3050, #2c818c);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.gradient-heading-dark-bg {
 
  background: linear-gradient(90deg, #2c818c, #6fd0d6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

footer section#block-12 img {
    width: 175px;
}
footer section#block-14 p {
    margin: 0;
    color: #fff;
    text-align: left;
}
footer h2.widget-title {
    color: #fff;
	font-size:20px;
}

footer .menu-primary-container li a{
	color:#fff;
}
.monitoring-page .phase{
	width:25%;
}
.phase-title{
	white-space:normal;
	padding-right:20px;
}
.mc4wp-form-fields {
    position: relative;
    display: flex;
    justify-content: center;
    max-width: 800px;
    margin: 0 auto;
}
.mc4wp-form-fields .form-row{
	width:100%;
}
.mc4wp-form-fields input#email {
    width: 100%;
    display: block;
    padding: 20px;
    border-radius: 10px;
    border: 2px solid #1f3050;
}
.mc4wp-form-fields  input[type="submit"] {
    position: absolute;
    right: 10px;
    top: 9px;
}
footer .sub-menu {
    display: none;
}
footer section#block-9 h5 {
    color: #fff;
    text-align: center;
    max-width: 500px;
    margin: 0 auto;
    font-size: 20px;
    font-weight: 800;
}
footer section#block-9 {
    margin: 0;
}
footer .mc4wp-form-fields{
	max-width:440px;
}
.mc4wp-alert.mc4wp-notice {
    text-align: center;
    color: #fff;
    font-size: 14px;
    margin-top: 10px;
    opacity: 0.75;
}
.mc4wp-alert.mc4wp-success {
    text-align: center;
    font-size: 14px;
    color: #baf5ba;
    margin-top: 10px;
}
.mc4wp-alert.mc4wp-error {
    text-align: center;
    font-size: 14px;
    color: #ff5947;
    margin-top: 10px;
}
.ast-theme-transparent-header #masthead{
	position: relative;
}
.site-logo-img img {
    filter: none;
}
.ast-single-entry-banner[data-post-type="post"][data-banner-layout="layout-2"] .entry-title {
    max-width: 80%;
    margin: 0 auto 30px;
	  background: linear-gradient(90deg, #2c818c, #6fd0d6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.ast-single-entry-banner[data-post-type="post"][data-banner-layout="layout-2"] .post-thumb-img-content.post-thumb {
    margin-bottom: -150px !important;
}
article {
    background: none !important;
}
.post-thumb-img-content.post-thumb img {
    border: 5px solid #51adb5;
    border-radius: 10px;
    box-shadow: 5px 5px 5px 5px #51adb538;
}
.post h2 {
    font-size: 30px;
    font-weight: 800 !important;
}
.post  h2 strong,
.post  h3 strong,
.post  h4 strong{
	font-weight:800;
}
.post h3 {
    font-size: 27px;
	font-weight: 800 !important;
}
.post h4 {
    font-size: 24px;
	font-weight: 800 !important;
}
ul.wp-block-list {
    padding: 0 0 0 18px;
    list-style: square;
}
/* .home .site-content {
    margin-top: -92px;
} */
.pl-fs-slider .pl-slide-heading {
    font-size: clamp(34px, 6vw, 54px) !important;
    line-height: 1.08;
    font-weight: 800 !important;
    margin: 0 0 18px;
    color: #fff;
    font-family: 'Inter';
	max-width:640px;
}
.pl-fs-slider .pl-slide-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: 0 26px;
    border-radius: 8px !important;
    background: #f2921b !important;
    color: #fff !important;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.25s ease;
}
.pl-fs-slider,
.pl-fs-slider .swiper-slide{
	height:95vh !important;
}
span.hfe-post-author {
    display: none;
}
.pl-fs-slider .swiper-slide:first-child h2.pl-slide-heading::before{
	display:none;
}
div[data-swiper-slide-index="0"]  h2.pl-slide-heading::before{
	display:none !important;
}
h2.pl-slide-heading::before {
    content: 'Our Services';
    display: block;
    font-size: 14px;
    max-width: 150px;
    text-align: center;
    font-weight: 800;
    padding: 8px 10px;
    border-radius: 5px;
    margin-bottom: 10px;
    color: rgba(255, 255, 255, 0.75);
    background: #2c818c;
    border: none;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.bubble-num img {
    border: none;
    border-radius: 0;
    box-shadow: none;
    height: auto;
    max-width: 100%;
    transform: scale(4);
}
.bubble{
	width:100px;
	height:100px;
}
i.bubble-desc {
    position: absolute;
    bottom: -53px;
    color: #fff;
    font-weight: 800;
    font-style: normal;
    width: 200px;
    display: block;
    text-align: center;
    transform: translate(-26%, 0);
    font-size: 14px;
    line-height: 20px;
}
@media screen and (min-width:320px) and (max-width:767px){
	.text-backed-slider {
    padding: 40px 0;
    overflow: hidden;
}
	.text-backed-slider .tbs-prev, .text-backed-slider .tbs-next{
		display:block !important;
	}
	.elementor-49 .elementor-element.elementor-element-e132ecc > .elementor-widget-container{
		padding:10px;
	}
	.bubble {
    width: 50px;
    height: 50px;
}
	i.bubble-desc {
    position: absolute;
    bottom: -55px;
    color: #fff;
    font-weight: 800;
    font-style: normal;
    width: 95px;
    display: block;
    text-align: center;
    transform: translate(-25%, 40%);
    font-size: 12px;
    line-height: 17px;
}
	.steps-flow .step{
		opacity:1;
	}
	.elementor-widget .elementor-icon-list-item, .elementor-widget .elementor-icon-list-item a{
		text-align:center;
	}
	.mc4wp-form-fields input#email{
		padding:15px;
	}
}