:root {
    --clr-stone300: #d6d3d1;
  --clr-slate800: #0F172A;
  --clr-ntrl400: #A3A3A3;
  --clr-stn300: #413b38;
  --clr-org: #f97316;
  --clr-amb: #f59e0b;
  --clr-dtrq: #00ced1;
  --clr-trq: #212b4b;
  --clr-rd800: #991b1b;
  --clr-drkrse: #4c0519;
  --clr-lrs: #fb7185;
  --clr-fsa: #c026d3;
  --clr-rse: #e11d48;
  --clr-drk: #030712;
  --clr-lgt: #e5e7eb;
  --clr-dre: #e11d48;
  --clr-ind: #354496;
  --clr-ind-2: #2f3d87; /* slightly darker */
  --clr-ind-3: #293678; /* medium-dark */
  --clr-ind-4: #232f69; /* deep indigo */
  --clr-ind-5: #1d285a; /* very dark / near-navy */
  --clr-purp: #4a044e;
  --clr-ylw: #f4f802;
  --clr-grry: #5e5e5e;
  --clr-wtrb: #1e3cff;
   --clr-wtrb-2: #1a36e6; /* slightly darker */
  --clr-wtrb-3: #162ecc; /* medium-dark */
  --clr-wtrb-4: #1226b3; /* deep blue */
  --clr-wtrb-5: #0e1e99; /* very dark */

  --clr-aqa00: #DEF4FC;
  --clr-aqa0: #00FFFF;
  --clr-aqa1: #ADD8E6;
  --clr-aqa2: #00BFFF;
  --clr-aqa3: #008080;
  --clr-aqa4: #0E87CC;
--size-xxs: 0.5rem;
--size-xs:  0.75rem;
--size-sm:   0.95rem; 
--size-base: 1rem;
--size-lg: 1.125rem;
--size-xl: 1.25rem;
--size-2xl: 1.5rem;
--size-3xl: 1.875rem;
--size-4xl: 2.25rem;
--size-5xl: 3rem;
--size-6xl: 3.75rem;
--size-7xl: 4.5rem;
--size-8xl: 5rem;
--size-9xl: 6rem;
--size-10xl: 7rem;
--size-11xl: 8rem;
--size-12xl:9rem;
--size-13xl:10rem;
--size-xxl:11rem;
--size-2xxl:12rem;

  
}

#page-loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 140svh; /* Safari-safe full viewport */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  animation: loaderBG 2.5s linear infinite;
}

/* background gradient animation with your aqua palette */
@keyframes loaderBG {
  0% { background-color: var(--clr-aqa00); }
  20% { background-color: var(--clr-aqa0); }
  40% { background-color: var(--clr-aqa1); }
  60% { background-color: var(--clr-aqa2); }
  80% { background-color: var(--clr-aqa3); }
  100% { background-color: var(--clr-aqa4); }
}

/* optional loader spinner in center */
#page-loader .spinner {
  width: 60px;
  height: 60px;
  border: 6px solid rgba(255, 255, 255, 0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* hide loader when page is ready */
body.loaded #page-loader {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease-out;
}



body {
    width: 100%; 
    margin-inline: auto;
    background: linear-gradient(to right, #ffffff, #979494);
      font-family: 'Clash Display', sans-serif;;
      font-weight: 400;
      font-style: normal;

  box-sizing: border-box;

    }
    
  
  strong {
    color: var(--clr-ind-4);
  }
 /* ===============================
   FULL PAGE LOADER
=============================== */

/* Initial state: slightly shifted but visible */
.box__serv {
  opacity: 1;                      /* always visible */
  transform: translateY(10px);     /* subtle vertical offset */
  transition: transform 0.6s ease; /* only animate movement */
}

/* Active state: triggered by scroll */
.box__serv.serv--active {
  transform: translateY(0);        /* slide into final position */
}

/* Icon initial state */
.box__serv .inner .need__icon {
  background: var(--clr-bg);       /* subtle background color so it’s visible */
  transition: all 1.9s ease;
  transform: scale(1);
  border-radius: 50%;
}

/* Icon active state */
.box__serv.serv--active .inner .need__icon {
  background: var(--clr-wtrb);      /* fills in on scroll */
  transform: scale(1.1);           /* slight pop */
}

/* Optional: icon itself can pop slightly */
.box__serv.serv--active .inner .need__icon i {
  transform: scale(1.1);
  transition: transform 1.9s ease;
}


@font-face {
  font-family:"PiperAlpha";
  src: url("./fonts/PiperAlpha.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;

  
}
@font-face {
    font-family:'DownTheDrain';
    src: url('./fonts/DownTheDrain.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Copper';
    src: url('./fonts/Copper.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}