/* ================================================================
   Apex Global Xolutions — Interaction Layer
   ----------------------------------------------------------------
   This file is 100% additive. It never sets width, height, margin,
   padding, position, display, or font sizing on anything that
   already exists in style.css / globals.css — only transform,
   opacity, box-shadow and filter, which are compositor-only
   properties and cannot shift or resize anything on the page.
   Load this AFTER style.css / globals.css.
   ================================================================ */
@import url('https://api.fontshare.com/v2/css?f[]=satoshi@400,500,700&display=swap');
html {
  scroll-behavior: smooth;
}

/* ---------------------------------------------------------------
   1. CURSORS — every clickable-looking element gets a pointer
   --------------------------------------------------------------- */
.link,
.link2,
.link3,
.link4,
.link5,
.link6,
.link8,
.link9,
.link12,
.link15,
.link16,
.item-link,
.item-link3,
.item-link4,
.item15,
.button,
.background20 {
  cursor: pointer;
}

/* ---------------------------------------------------------------
   2. FILLED / PILL / CIRCLE BUTTONS
   (Explore Our Services, View All Services, Visit Ink Sprink,
   Get Started Now, Schedule Your Consultation, Get A Quote,
   hero floating icon, about circular badge, subscribe button)
   --------------------------------------------------------------- */
.link,
.link3,
.link4,
.link8,
.link9,
.link15,
.button {
  transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease;
}
.link:hover,
.link3:hover,
.link4:hover,
.link8:hover,
.link9:hover,
.link15:hover,
.button:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0, 138, 228, 0.35);
  filter: brightness(1.06);
}
.link:active,
.link3:active,
.link4:active,
.link9:active,
.link15:active,
.button:active {
  transform: translateY(-1px);
}
.link:focus-visible,
.link3:focus-visible,
.link4:focus-visible,
.link9:focus-visible,
.link15:focus-visible {
  outline: 2px solid #008ae4;
  outline-offset: 3px;
}

/* ---------------------------------------------------------------
   3. OUTLINE / GHOST BUTTON (Schedule a Consultation)
   --------------------------------------------------------------- */
.link2 {
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.link2:hover {
  transform: translateY(-3px);
  opacity: 0.75;
}

/* ---------------------------------------------------------------
   4. ARROW TEXT-LINKS INSIDE SERVICE CARDS + BLOG "READ MORE"
   --------------------------------------------------------------- */
.link5,
.link6,
.link12 {
  transition: transform 0.3s ease;
}
.link5:hover,
.link6:hover,
.link12:hover {
  transform: translateX(6px);
}

/* ---------------------------------------------------------------
   5. NAV LINKS + FOOTER QUICK LINKS + LEGAL LINKS
   --------------------------------------------------------------- */
.item-link,
.item-link3,
.item-link4,
.item15,
.link16 {
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.item-link:hover,
.item-link3:hover,
.item-link4:hover,
.item15:hover,
.link16:hover {
  transform: translateY(-2px);
  opacity: 0.7;
}

/* ---------------------------------------------------------------
   6. NEWSLETTER INPUT FOCUS RING
   --------------------------------------------------------------- */
.input {
  transition: box-shadow 0.3s ease;
}
.input:focus-within {
  box-shadow: 0 0 0 2px rgba(0, 138, 228, 0.6);
}

/* ---------------------------------------------------------------
   7. CARD HOVERS — shadow/brightness only (never transform), so
   these can safely also use a transform for scroll-reveal below
   without the two effects fighting each other.
   --------------------------------------------------------------- */
.background,
.background6,
.background19 {
  transition: box-shadow 0.4s ease;
}
.feature-item:hover .background,
.feature-item2:hover .background,
.feature-item2:hover .background6 {
  box-shadow: 0 24px 45px rgba(5, 84, 162, 0.25);
}
.container120:hover .background19 {
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}
.background10,
.background15 {
  transition: box-shadow 0.35s ease, filter 0.35s ease;
}
.background10:hover,
.background15:hover {
  box-shadow: 0 20px 40px rgba(5, 84, 162, 0.18);
  filter: brightness(1.02);
}
.background20 {
  transition: transform 0.3s ease, filter 0.3s ease;
}
.background20:hover {
  transform: scale(1.06);
  filter: brightness(1.08);
}

/* ---------------------------------------------------------------
   8. BRAND LOGOS + RATING BADGE + FOOTER ICON CIRCLES
   (transform applied to the CHILD, never the reveal target itself)
   --------------------------------------------------------------- */
.brand-1png,
.brand-2png,
.brand-3png,
.brand-4png,
.brand-5png {
  transition: transform 0.3s ease;
}
.container13:hover .brand-1png,
.container13:hover .brand-2png,
.container13:hover .brand-3png,
.container13:hover .brand-4png,
.container13:hover .brand-5png {
  transform: scale(1.06);
}
.background16 {
  transition: transform 0.3s ease;
}
.container98:hover .background16 {
  transform: scale(1.1);
}
.background34,
.background35 {
  transition: transform 0.3s ease;
}
.footer-widget-address:hover .background34,
.footer-widget-address2:hover .background35,
.footer-widget-address3:hover .background34 {
  transform: scale(1.1);
}

/* ================================================================
   9. SCROLL REVEAL
   ----------------------------------------------------------------
   Only activates once html.js-reveal is present (added by an
   inline script in <head> the instant JS runs). If JS is disabled,
   that class never appears, so every rule below simply never
   matches and the page renders exactly as it always has.
   ================================================================ */
html.js-reveal .welcome-to-apex,
html.js-reveal .practical-solutions-for,
html.js-reveal .apex-global-xolutions,
html.js-reveal .slider-button,
html.js-reveal .one-trusted-company,
html.js-reveal .important-personal-and,
html.js-reveal .container13,
html.js-reveal .our-professional-services,
html.js-reveal .consulting,
html.js-reveal .about-thumbpng,
html.js-reveal .heading-34,
html.js-reveal .looking-for-book,
html.js-reveal .every-client-has,
html.js-reveal .professional-solutions-for,
html.js-reveal .paragraph,
html.js-reveal .paragraph2,
html.js-reveal .professional-support-built,
html.js-reveal .a-clear-and,
html.js-reveal .tell-us-what,
html.js-reveal .container96,
html.js-reveal .better-business-beauro,
html.js-reveal .container111,
html.js-reveal .trusted-companies,
html.js-reveal .link-logopng,
html.js-reveal .container151,
html.js-reveal .feature-item,
html.js-reveal .feature-item2,
html.js-reveal .background10,
html.js-reveal .background15,
html.js-reveal .container120 {
  opacity: 0;
  transform: translateY(16px); /* was 36px — much less "shove" */
  transition: opacity 0.5s ease-out,
    transform 0.5s ease-out; /* was 0.7s / bouncy cubic-bezier */
}

html.js-reveal .welcome-to-apex.reveal-visible,
html.js-reveal .practical-solutions-for.reveal-visible,
html.js-reveal .apex-global-xolutions.reveal-visible,
html.js-reveal .slider-button.reveal-visible,
html.js-reveal .one-trusted-company.reveal-visible,
html.js-reveal .important-personal-and.reveal-visible,
html.js-reveal .container13.reveal-visible,
html.js-reveal .our-professional-services.reveal-visible,
html.js-reveal .consulting.reveal-visible,
html.js-reveal .about-thumbpng.reveal-visible,
html.js-reveal .heading-34.reveal-visible,
html.js-reveal .looking-for-book.reveal-visible,
html.js-reveal .every-client-has.reveal-visible,
html.js-reveal .professional-solutions-for.reveal-visible,
html.js-reveal .paragraph.reveal-visible,
html.js-reveal .paragraph2.reveal-visible,
html.js-reveal .professional-support-built.reveal-visible,
html.js-reveal .a-clear-and.reveal-visible,
html.js-reveal .tell-us-what.reveal-visible,
html.js-reveal .container96.reveal-visible,
html.js-reveal .better-business-beauro.reveal-visible,
html.js-reveal .container111.reveal-visible,
html.js-reveal .trusted-companies.reveal-visible,
html.js-reveal .link-logopng.reveal-visible,
html.js-reveal .container151.reveal-visible,
html.js-reveal .feature-item.reveal-visible,
html.js-reveal .feature-item2.reveal-visible,
html.js-reveal .background10.reveal-visible,
html.js-reveal .background15.reveal-visible,
html.js-reveal .container120.reveal-visible {
  opacity: 1;
  transform: none;
}
/* ===== AGX Consultation Popup — v2, pixel-matched to mockup ===== */
/* =========================================================
   MANROPE FONT
========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');


/* =========================================================
   MODAL OVERLAY
========================================================= */
.agx-modal-overlay{
  display:none;
  position:fixed;
  inset:0;
  z-index:2147483647;
  background:rgba(5,84,162,0.6);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  align-items:center;
  justify-content:center;
  padding:20px;
}

.agx-modal-overlay.agx-active{
  display:flex;
}


/* =========================================================
   MANROPE THROUGHOUT THE MODAL
========================================================= */
.agx-modal-overlay,
.agx-modal-overlay *{
  font-family:"Manrope",sans-serif !important;
}


/* =========================================================
   MODAL BOX
========================================================= */
.agx-modal-box{
  position:relative;
  background:#fff;
  border-radius:20px;
  display:flex;
  max-width:1380px;
  width:100%;
  overflow:hidden;
  box-shadow:0 40px 80px rgba(0,0,0,0.35);
  max-height:92vh;
}


/* =========================================================
   CLOSE BUTTON
========================================================= */
.agx-modal-close{
  position:absolute;
  top:20px;
  right:20px;
  width:34px;
  height:34px;
  border-radius:50%;
  border:1px solid #1a1a1a;
  background:#fff;
  cursor:pointer;
  font-size:16px;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:2;
  color:#1a1a1a;
}


/* =========================================================
   IMAGE SECTION
========================================================= */
.agx-modal-image{
  flex:0 0 56%;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:visible;
  position:relative;
}

.agx-modal-image img{
  width:600px;
  height:600px;
  object-fit:contain;
  object-position:center;
  display:block;
  position:relative;
  left:0;
  top:0;
}


/* =========================================================
   MODAL CONTENT
========================================================= */
.agx-modal-content{
  flex:1;
  padding:48px 56px;
  overflow-y:auto;
}


/* =========================================================
   TITLE
========================================================= */
.agx-modal-title{
  font-size:30px;
  color:#0f2a4a;
  margin:0 0 14px;
  font-weight:600;
}


/* =========================================================
   DESCRIPTION
========================================================= */
.agx-modal-desc{
  color:#5b6b6b;
  font-size:15px;
  line-height:23px;
  margin:0 0 24px;
}


/* =========================================================
   FORM
========================================================= */
.agx-modal-form{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.agx-row{
  display:flex;
  gap:14px;
}


/* =========================================================
   INPUTS + SELECT
========================================================= */
.agx-row input,
.agx-row select,
.agx-modal-form > select{
  flex:1;
  height:50px;
  border:1.5px solid #1a1a1a;
  border-radius:8px;
  padding:0 16px;
  font-size:14px;
  font-weight:400;
  color:#333;
  outline:none;
  background:#fff;
  appearance:none;
  -webkit-appearance:none;
}


/* =========================================================
   SELECT ARROW
========================================================= */
.agx-row select,
.agx-modal-form > select{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' stroke='%230f2a4a' stroke-width='1.5' fill='none'/></svg>");
  background-repeat:no-repeat;
  background-position:right 16px center;
}


/* =========================================================
   PHONE FIELD
========================================================= */
.agx-phone-field{
  display:flex;
  align-items:center;
  border:1.5px solid #1a1a1a;
  border-radius:8px;
  padding:0 16px;
  height:50px;
  flex:1;
}

.agx-flag{
  margin-right:10px;
  font-size:16px;
}

.agx-phone-field input{
  border:none;
  flex:1;
  height:100%;
  padding:0;
  outline:none;
  font-size:14px;
}


/* =========================================================
   TEXTAREA
========================================================= */
.agx-modal-form textarea{
  border:1.5px solid #1a1a1a;
  border-radius:8px;
  padding:16px;
  min-height:100px;
  font-size:14px;
  font-weight:400;
  resize:none;
  outline:none;
  color:#333;
}


/* =========================================================
   CHECKBOX
========================================================= */
.agx-checkbox{
  display:flex;
  align-items:flex-start;
  gap:8px;
  font-size:12.5px;
  font-weight:400;
  color:#5b6b6b;
  line-height:18px;
}

.agx-checkbox input{
  margin-top:3px;
  accent-color:#008ae4;
}


/* =========================================================
   SUBMIT BUTTON
========================================================= */
.agx-submit-btn{
  background:linear-gradient(
    180deg,
    #008AE4 0%,
    #087FCF 50%,
    #0554A2 100%
  );
  color:#fff;
  border:none;
  border-radius:18px;
  padding:17px;
  font-size:15px;
  font-weight:600;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  transition:filter .2s ease, transform .2s ease;
}

.agx-submit-btn:hover{
  background:linear-gradient(
    180deg,
    #008AE4 0%,
    #087FCF 50%,
    #0554A2 100%
  );
  filter:brightness(1.04);
}


/* =========================================================
   ARROW IMAGE
========================================================= */
.up-arrow{
  width:10px;
  height:10px;
  object-fit:contain;
  display:block;
}


/* =========================================================
   MOBILE
========================================================= */
@media (max-width:900px){

  .agx-modal-box{
    flex-direction:column;
    max-height:none;
  }

  .agx-modal-image{
    display:none;
  }

}


/* =========================================================
   HIDE BODY DECORATIONS WHEN MODAL IS ACTIVE
========================================================= */
body:has(.agx-modal-overlay.agx-active)::before,
body:has(.agx-modal-overlay.agx-active)::after{
  visibility:hidden !important;
}