/* =========================================================
   G20NET SERVICE
   MAIN STYLESHEET
   ========================================================= */


/* =========================================================
   GLOBAL RESET
   ========================================================= */

   *,
   *::before,
   *::after {
       box-sizing: border-box;
   }
   
   
   html {
       width: 100%;
       max-width: 100%;
   
       margin: 0;
       padding: 0;
   
       scroll-behavior: smooth;
   
       overflow-x: hidden;
   
       background: #070b12;
   }
   
   
   body {
       width: 100%;
       max-width: 100%;
   
       min-width: 0;
   
       margin: 0;
       padding: 0;
   
       overflow-x: hidden;
   
       background: #090d16;
   
       color: #090d16;
   
       font-family:
           "DM Sans",
           Arial,
           sans-serif;
   }
   
   
   main,
   section,
   header,
   footer {
       width: 100%;
       max-width: 100%;
   }
   
   
   img,
   video,
   iframe {
       display: block;
   
       max-width: 100%;
   }
   
   
   button,
   input,
   select,
   textarea {
       max-width: 100%;
   
       font: inherit;
   }
   
   
   a {
       max-width: 100%;
   }
   
   
   button {
       cursor: pointer;
   }
   
   
   em {
       font-style: normal;
   }
   
   
   /* =========================================================
      CSS VARIABLES
      ========================================================= */
   
   :root {
   
       --bg-deep: #070b12;
       --bg-main: #090d16;
       --bg-soft: #0c121d;
       --bg-light: #f5f7f9;
   
       --surface-white: #ffffff;
   
       --accent: #00e5a3;
   
       --text-dark: #090d16;
       --text-light: #ffffff;
   
       --text-muted: #667080;
   
       --border-light: #dfe4ea;
   
   }
   
   
   /* =========================================================
      LOADER
      ========================================================= */
   
   .loader {
       position: fixed;
   
       inset: 0;
   
       z-index: 99999;
   
       display: grid;
       place-items: center;
   
       overflow: hidden;
   
       background: white;
   
       color: #090d16;
   
       opacity: 1;
       visibility: visible;
   
       pointer-events: auto;
   
       transition:
           opacity .55s ease,
           visibility .55s ease;
   }
   
   
   .loader.is-hidden {
       opacity: 0;
   
       visibility: hidden;
   
       pointer-events: none;
   }
   
   
   /* IMAGE LOGO IN LOADER */
   
   .loader-logo {
       position: relative;
   
       z-index: 3;
   
       width: clamp(150px, 22vw, 280px);
       height: auto;
   
       object-fit: contain;
   }
   
   
   .loader p {
       position: absolute;
   
       bottom: 8%;
   
       margin: 0;
   
       padding: 0 20px;
   
       color: #8b95a6;
   
       font-size: 9px;
   
       letter-spacing: .35em;
   
       text-align: center;
   }
   
   
   .loader-glass {
       position: absolute;
   
       inset: 0;
   
       background: rgba(255, 255, 255, .06);
   
       backdrop-filter: blur(14px);
   }
   
   
   .squeegee {
       position: absolute;
   
       top: -10%;
       left: -15%;
   
       width: 18%;
       height: 120%;
   
       background: var(--accent);
   
       filter: blur(8px);
   
       box-shadow:
           0 0 70px var(--accent);
   
       transform: skewX(-12deg);
   
       animation:
           wipe 2s cubic-bezier(.7, 0, .2, 1) forwards;
   }
   
   
   @keyframes wipe {
   
       to {
           left: 110%;
       }
   
   }
   
   
   /* =========================================================
      STATUS BAR
      ========================================================= */
   
   .statusbar {
       position: fixed;
   
       top: 0;
       left: 0;
   
       width: 100%;
       max-width: 100vw;
   
       min-height: 30px;
   
       padding: 6px 15px;
   
       z-index: 5000;
   
       display: flex;
   
       align-items: center;
       justify-content: center;
   
       flex-wrap: wrap;
   
       gap: 8px;
   
       background: var(--accent);
   
       color: #06130f;
   
       font-size: 10px;
   
       font-weight: 800;
   
       letter-spacing: .13em;
   
       line-height: 1.4;
   
       text-align: center;
   
       text-transform: uppercase;
   }
   
   
   .live-dot {
       flex: 0 0 auto;
   
       width: 7px;
       height: 7px;
   
       border-radius: 50%;
   
       background: #06251b;
   
       box-shadow:
           0 0 0 3px rgba(6, 37, 27, .12);
   
       animation:
           livePulse 1.4s ease-in-out infinite;
   }
   
   
   @keyframes livePulse {
   
       0%,
       100% {
   
           opacity: 1;
   
           transform: scale(1);
   
           box-shadow:
               0 0 0 3px rgba(6, 37, 27, .12),
               0 0 0 0 rgba(6, 37, 27, .28);
   
       }
   
   
       50% {
   
           opacity: .35;
   
           transform: scale(.72);
   
           box-shadow:
               0 0 0 3px rgba(6, 37, 27, .12),
               0 0 0 7px rgba(6, 37, 27, .08);
   
       }
   
   }
   
   
   /* =========================================================
      HEADER
      WHITE NAVIGATION BAR
      ========================================================= */
   
   .header {
       position: fixed;
   
       top: 30px;
       left: 0;
   
       width: 100%;
       max-width: 100vw;
   
       height: 76px;
   
       padding: 0 clamp(20px, 4vw, 60px);
   
       z-index: 4000;
   
       display: flex;
   
       align-items: center;
   
       gap: 20px;
   
       overflow: visible;
   
       background: #ffffff;
   
       backdrop-filter: blur(18px);
   
       border-bottom:
           1px solid #e3e7ec;
   
       color: #090d16;
   
       transition:
           background .3s ease,
           box-shadow .3s ease;
   }
   
   
   .header.scrolled {
       background: #ffffff;
   
       box-shadow:
           0 8px 30px rgba(0, 0, 0, .12);
   }
   
   
   /* =========================================================
      BRAND / NAVIGATION LOGO
      ========================================================= */
   
   .brand {
       flex: 0 0 auto;
   
       display: flex;
   
       align-items: center;
   
       justify-content: flex-start;
   
       width: 175px;
       height: 54px;
   
       overflow: hidden;
   
       color: #090d16;
   
       text-decoration: none;
   
       white-space: nowrap;
   }
   
   
   .brand-logo {
       display: block;
   
       width: 175px;
       height: 54px;
   
       max-width: none;
   
       object-fit: contain;
   
       object-position: center;
   
       transition:
           transform .25s ease,
           opacity .25s ease;
   }
   
   
   .brand:hover .brand-logo {
       transform: translateY(-1px);
   
       opacity: .92;
   }
   
   
   /* =========================================================
      NAVIGATION
      ========================================================= */
   
   .nav {
       position: relative;
   
       flex: 1 1 auto;
   
       display: flex;
   
       align-items: center;
       justify-content: center;
   
       gap: clamp(18px, 2.5vw, 35px);
   
       margin: 0 20px;
   
       min-width: 0;
   }
   
   
   .nav a {
       color: #090d16;
   
       text-decoration: none;
   
       font-size: 11px;
   
       font-weight: 600;
   
       white-space: nowrap;
   
       transition:
           color .25s ease;
   }
   
   
   .nav a:hover {
       color: #00a878;
   }
   
   
   /* =========================================================
      HEADER ACTIONS
      ========================================================= */
   
   .header-actions {
       flex: 0 0 auto;
   
       display: flex;
   
       align-items: center;
   
       gap: clamp(10px, 1.5vw, 20px);
   }
   
   
   .phone {
       color: #090d16;
   
       text-decoration: none;
   
       font-size: 11px;
   
       font-weight: 600;
   
       white-space: nowrap;
   
       transition:
           color .25s ease;
   }
   
   
   .phone:hover {
       color: #00a878;
   }
   
   
   /* =========================================================
      BUTTONS
      ========================================================= */
   
   .button {
       display: inline-flex;
   
       align-items: center;
       justify-content: center;
   
       gap: 20px;
   
       min-height: 52px;
   
       max-width: 100%;
   
       padding: 0 22px;
   
       border: 0;
   
       background: var(--accent);
   
       color: #06130f;
   
       text-decoration: none;
   
       font-family:
           "DM Sans",
           sans-serif;
   
       font-size: 11px;
   
       font-weight: 800;
   
       letter-spacing: .1em;
   
       text-transform: uppercase;
   
       cursor: pointer;
   
       transition:
           transform .25s ease,
           box-shadow .25s ease;
   }
   
   
   .button:hover {
       transform: translateY(-2px);
   
       box-shadow:
           0 12px 35px rgba(0, 229, 163, .22);
   }
   
   
   /* =========================================================
      PROFESSIONAL FONT AWESOME ARROWS
      ========================================================= */
   
   .button-arrow {
       display: inline-flex;
   
       align-items: center;
       justify-content: center;
   
       width: 16px;
       height: 16px;
   
       font-size: 12px;
   
       line-height: 1;
   
       flex: 0 0 auto;
   
       transition:
           transform .25s ease;
   }
   
   
   .button:hover .button-arrow {
       transform:
           translate(2px, -2px);
   }
   
   
   .text-link .button-arrow {
       display: inline-flex;
   
       align-items: center;
       justify-content: center;
   
       width: auto;
       height: auto;
   
       margin-left: 3px;
   
       font-size: 11px;
   
       line-height: 1;
   
       transition:
           transform .25s ease;
   }
   
   
   .text-link:hover .button-arrow {
       transform:
           translate(2px, -2px);
   }
   
   
   /* =========================================================
      WHATSAPP BUTTON
      ========================================================= */
   
   .whatsapp-button {
       background: #25D366;
   
       color: #ffffff;
   
       gap: 10px;
   
       box-shadow:
           0 10px 30px rgba(37, 211, 102, .18);
   }
   
   
   .whatsapp-button i {
       font-size: 17px;
   }
   
   
   .whatsapp-button:hover {
       background: #1ebe5d;
   
       color: #ffffff;
   
       box-shadow:
           0 14px 35px rgba(37, 211, 102, .28);
   }
   
   
   /* Keep Contact Us visually distinct */
   
   .hero-contact-button {
       background: var(--accent);
   
       color: #06130f;
   }
   
   
   .button-small {
       min-height: 42px;
   
       gap: 14px;
   
       padding: 0 20px;
   }
   
   
   /* =========================================================
      MOBILE MENU BUTTON
      ========================================================= */
   
   .menu {
       display: none;
   
       flex: 0 0 auto;
   
       position: relative;
   
       width: 42px;
       height: 42px;
   
       padding: 5px;
   
       border: 0;
   
       background: transparent;
   
       z-index: 5000;
   
       cursor: pointer;
   }
   
   
   .menu i {
       display: block;
   
       width: 25px;
       height: 2px;
   
       margin: 6px auto;
   
       background: #090d16;
   
       transition:
           transform .25s ease,
           opacity .25s ease;
   }
   
   
   .menu.active i:first-child {
       transform:
           translateY(4px)
           rotate(45deg);
   }
   
   
   .menu.active i:last-child {
       transform:
           translateY(-4px)
           rotate(-45deg);
   }
   
   
   /* =========================================================
      HERO
      ========================================================= */
   
   .hero {
       position: relative;
   
       width: 100%;
   
       height: 100vh;
   
       min-height: 650px;
   
       margin: 0;
   
       padding: 0 6vw;
   
       display: flex;
   
       align-items: center;
       justify-content: center;
   
       overflow: hidden;
   
       background: #090d16;
   
       color: #ffffff;
   }
   
   
   /* =========================================================
      HERO VIDEO
      ========================================================= */
   
      .hero-video {
        position: absolute;
    
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    
        width: 100%;
        height: 100%;
    
        max-width: none;
    
        object-fit: cover;
    
        object-position: center center;
    
        z-index: 0;
    
        display: block;
    
        pointer-events: none;
    
        border: 0;
    
        outline: 0;
    
        appearance: none;
        -webkit-appearance: none;
    }
    
    /* =========================================================
   MOBILE HERO BACKGROUND
   ========================================================= */

.hero-mobile-bg {
    display: none;

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    background-image:
        url("Images/video-poster.jpg");

    background-size: cover;

    background-position: center center;

    background-repeat: no-repeat;

    z-index: 0;
}


/* =========================================================
   MOBILE — REMOVE VIDEO COMPLETELY
   ========================================================= */

@media (max-width: 700px) {

    .hero-video {
        display: none !important;

        visibility: hidden !important;

        opacity: 0 !important;

        pointer-events: none !important;
    }


    .hero-mobile-bg {
        display: block;
    }

}
    
    /* =========================================================
       HIDE SAFARI / IOS VIDEO PLAYBACK UI
       ========================================================= */
    
    .hero-video::-webkit-media-controls {
        display: none !important;
    }
    
    .hero-video::-webkit-media-controls-enclosure {
        display: none !important;
    }
    
    .hero-video::-webkit-media-controls-panel {
        display: none !important;
    }
    
    .hero-video::-webkit-media-controls-play-button {
        display: none !important;
        -webkit-appearance: none !important;
    }
    
    .hero-video::-webkit-media-controls-start-playback-button {
        display: none !important;
        -webkit-appearance: none !important;
    }
    
    .hero-video::-webkit-media-controls-overlay-play-button {
        display: none !important;
        -webkit-appearance: none !important;
    }
   
   
   /* =========================================================
      HERO OVERLAY
      ========================================================= */
   
   .hero-overlay {
       position: absolute;
   
       inset: 0;
   
       z-index: 1;
   
       background:
           linear-gradient(
               180deg,
               rgba(5, 10, 8, .55),
               rgba(5, 10, 8, .30),
               rgba(5, 10, 8, .60)
           );
   }
   
   
   /* =========================================================
      HERO CONTENT
      ========================================================= */
   
   .hero-content {
       position: relative;
   
       z-index: 2;
   
       width: 100%;
   
       max-width: 1000px;
   
       margin: 0 auto;
   
       display: flex;
   
       flex-direction: column;
   
       align-items: center;
   
       justify-content: center;
   
       text-align: center;
   }
   
   
   /* =========================================================
      HERO EYEBROW
      ========================================================= */
   
   .hero .eyebrow {
       display: flex;
   
       align-items: center;
       justify-content: center;
   
       gap: 12px;
   
       margin-bottom: 22px;
   
       color: #dce3eb;
   
       font-size: 10px;
   
       font-weight: 700;
   
       letter-spacing: .18em;
   
       text-align: center;
   
       text-transform: uppercase;
   }
   
   
   .hero .eyebrow span {
       display: block;
   
       width: 26px;
       height: 1px;
   
       background: var(--accent);
   }
   
   
   /* =========================================================
      HERO HEADING
      ========================================================= */
   
   .hero h1 {
       width: 100%;
   
       max-width: 950px;
   
       margin: 0 auto 25px;
   
       font-family:
           "Plus Jakarta Sans",
           sans-serif;
   
       font-size:
           clamp(48px, 5.5vw, 86px);
   
       font-weight: 800;
   
       line-height: .95;
   
       letter-spacing: -.065em;
   
       text-align: center;
   }
   
   
   .hero h1 em {
       color: var(--accent);
   
       font-style: normal;
   }
   
   
   /* =========================================================
      HERO DESCRIPTION
      ========================================================= */
   
   .hero p {
       width: 100%;
   
       max-width: 680px;
   
       margin: 0 auto;
   
       color: #edf1f5;
   
       font-size: 15px;
   
       line-height: 1.7;
   
       text-align: center;
   }
   
   
   /* =========================================================
      HERO ACTIONS
      ========================================================= */
   
   .hero-actions {
       width: 100%;
   
       margin-top: 32px;
   
       display: flex;
   
       align-items: center;
       justify-content: center;
   
       gap: 14px;
   
       flex-wrap: wrap;
   }
   
   
   .hero-actions .button {
       min-width: 195px;
   }
   
   
   /* =========================================================
      HERO 24/7 STAMP
      ========================================================= */
   
   .hero-stamp {
       position: absolute;
   
       right: 5vw;
       bottom: 45px;
   
       z-index: 3;
   
       display: flex;
   
       align-items: center;
   
       gap: 10px;
   
       color: #ffffff;
   }
   
   
   .hero-stamp strong {
       font-family:
           "Plus Jakarta Sans",
           sans-serif;
   
       font-size: 20px;
   
       font-weight: 800;
   }
   
   
   .hero-stamp span {
       color: #c1cad5;
   
       font-size: 7px;
   
       line-height: 1.4;
   
       letter-spacing: .18em;
   
       text-transform: uppercase;
   }
   
   
   /* =========================================================
      GENERAL SECTIONS
      ========================================================= */
   
   section {
       position: relative;
   
       width: 100%;
   
       isolation: isolate;
   }
   
   
   .section-pad {
       width: 100%;
   
       padding:
           clamp(75px, 9vw, 130px)
           clamp(20px, 9vw, 130px);
   
       overflow: hidden;
   }
   
   
   .section-label {
       color: #687384;
   
       font-size: 9px;
   
       font-weight: 700;
   
       letter-spacing: .18em;
   
       text-transform: uppercase;
   }
   
   
   /* =========================================================
      SECTION BACKGROUNDS
      ========================================================= */
   
   .intro {
       background: #f3f6f9;
   }
   
   
   .services {
       background: #f1f4f7;
   }
   
   
   .service-areas {
       background: #ffffff;
   
       color: var(--text-dark);
   }
   
   
   .why {
       background: #f5f7f9;
   }
   
   
   .contact {
       background: #111827;
   
       color: #ffffff;
   }
   
   
   /* =========================================================
      HEADINGS
      ========================================================= */
   
   .intro h2,
   .services h2,
   .why h2,
   .contact h2,
   .service-areas h2 {
       max-width: 100%;
   
       margin: 0;
   
       font-family:
           "Plus Jakarta Sans",
           sans-serif;
   
       font-size:
           clamp(40px, 5vw, 72px);
   
       font-weight: 800;
   
       line-height: .98;
   
       letter-spacing: -.06em;
   
       overflow-wrap: anywhere;
   }
   
   
   .intro h2 em,
   .services h2 em,
   .why h2 em,
   .contact h2 em,
   .service-areas h2 em {
       font-style: normal;
   }
   
   
   /* =========================================================
      INTRO
      ========================================================= */
   
   .intro-grid {
       display: grid;
   
       grid-template-columns:
           minmax(0, 1.25fr)
           minmax(0, .75fr);
   
       gap:
           clamp(40px, 10vw, 140px);
   
       margin: 35px 0 90px;
   }
   
   
   .intro-grid p,
   .services-head p,
   .why p,
   .contact-top p {
       max-width: 500px;
   
       margin-top: 0;
   
       color: #5d6674;
   
       font-size: 15px;
   
       line-height: 1.8;
   }
   
   
   .text-link {
       display: inline-flex;
   
       align-items: center;
   
       gap: 18px;
   
       max-width: 100%;
   
       margin-top: 20px;
   
       padding-bottom: 9px;
   
       border-bottom:
           1px solid #090d16;
   
       color: #090d16;
   
       text-decoration: none;
   
       font-size: 10px;
   
       font-weight: 800;
   
       letter-spacing: .13em;
   
       text-transform: uppercase;
   }
   
   
   /* =========================================================
      METRICS
      ========================================================= */
   
   .metrics {
       display: grid;
   
       grid-template-columns:
           repeat(4, minmax(0, 1fr));
   
       border-top:
           1px solid #dfe4ea;
   }
   
   
   .metrics div {
       min-width: 0;
   
       padding: 25px 15px;
   
       border-right:
           1px solid #dfe4ea;
   }
   
   
   .metrics div:last-child {
       border-right: 0;
   }
   
   
   .metrics strong {
       display: block;
   
       font-family:
           "Plus Jakarta Sans",
           sans-serif;
   
       font-size: 35px;
   
       font-weight: 800;
   
       letter-spacing: -.05em;
   }
   
   
   .metrics span {
       color: #7b8490;
   
       font-size: 9px;
   
       letter-spacing: .12em;
   
       text-transform: uppercase;
   }
   
   
   /* =========================================================
      SERVICES
      ========================================================= */
   
   .services-head {
       display: grid;
   
       grid-template-columns:
           minmax(0, 1fr)
           minmax(0, .6fr);
   
       gap:
           clamp(40px, 10vw, 140px);
   
       margin: 35px 0 55px;
   }
   
   
   .service-bento {
       display: grid;
   
       grid-template-columns:
           minmax(0, 1.3fr)
           minmax(0, .7fr);
   
       gap: 14px;
   }
   
   
   .service-card {
       position: relative;
   
       min-width: 0;
   
       min-height: 330px;
   
       padding: 30px;
   
       display: flex;
   
       flex-direction: column;
   
       justify-content: flex-end;
   
       overflow: hidden;
   
       background: #ffffff;
   
       border:
           1px solid #e5e9ef;
   }
   
   
   .service-card.large {
       grid-row: span 2;
   
       min-height: 670px;
   }
   
   
   .service-card.small {
       min-height: 260px;
   }
   
   
   .service-card.dark {
       background: #090d16;
   
       color: #ffffff;
   
       border-color: #090d16;
   }
   
   
   .service-card.cyan {
       background: var(--accent);
   
       color: #06130f;
   
       border-color: var(--accent);
   }
   
   
   .service-number {
       position: absolute;
   
       top: 25px;
       left: 28px;
   
       z-index: 2;
   
       color: #77818e;
   
       font-size: 9px;
   
       letter-spacing: .2em;
   }
   
   
   .service-content {
       position: relative;
   
       z-index: 2;
   
       max-width: 560px;
   }
   
   
   .service-content h3 {
       margin: 0 0 10px;
   
       font-family:
           "Plus Jakarta Sans",
           sans-serif;
   
       font-size: 27px;
   
       font-weight: 800;
   
       line-height: 1.05;
   
       letter-spacing: -.05em;
   
       overflow-wrap: anywhere;
   }
   
   
   .service-content p {
       margin: 0;
   
       color: #818b9b;
   
       font-size: 11px;
   
       line-height: 1.65;
   }
   
   
   .dark .service-content h3 {
       color: #ffffff;
   }
   
   
   .dark .service-content p {
       color: #8994a4;
   }
   
   
   .cyan .service-content h3 {
       color: #06130f;
   }
   
   
   .cyan .service-content p {
       color: #16382f;
   }
   
   
   .micro {
       position: absolute;
   
       top: 30px;
       right: 30px;
   
       color: var(--accent);
   
       font-size: 8px;
   
       line-height: 1.5;
   
       letter-spacing: .18em;
   }
   
   
   .arrow {
       position: absolute;
   
       right: 30px;
       bottom: 30px;
   
       font-size: 22px;
   }
   
   
   /* =========================================================
      SERVICE CARD BACKGROUND IMAGES
      ========================================================= */
   
   .service-card {
       isolation: isolate;
   
       background-color: #0b1119;
   
       color: #ffffff;
   
       border:
           1px solid rgba(255, 255, 255, .08);
   
       background-image:
           var(--service-bg);
   
       background-position: center;
   
       background-size: cover;
   
       background-repeat: no-repeat;
   
       transition:
           transform .45s cubic-bezier(.2, .7, .2, 1),
           box-shadow .45s ease,
           background-position .8s cubic-bezier(.2, .7, .2, 1);
   }
   
   
   .service-card.dark,
   .service-card.cyan,
   .service-card.large,
   .service-card.wide,
   .service-card.small {
       background-color: #0b1119;
   
       color: #ffffff;
   }
   
   
   .service-card::before {
       content: "";
   
       position: absolute;
   
       inset: 0;
   
       z-index: -1;
   
       pointer-events: none;
   
       background:
           linear-gradient(
               180deg,
               rgba(4, 8, 13, .18) 0%,
               rgba(4, 8, 13, .22) 32%,
               rgba(4, 8, 13, .72) 72%,
               rgba(4, 8, 13, .94) 100%
           );
   
       transition:
           background .45s ease;
   }
   
   
   .service-card::after {
       content: "";
   
       position: absolute;
   
       inset: 0;
   
       z-index: -1;
   
       pointer-events: none;
   
       background:
           linear-gradient(
               135deg,
               rgba(0, 229, 163, .08),
               transparent 42%
           );
   
       opacity: .7;
   }
   
   
   .service-card:hover {
       transform:
           translateY(-7px);
   
       box-shadow:
           0 24px 60px rgba(0, 0, 0, .22);
   
       background-position:
           center 45%;
   }
   
   
   .service-card:hover::before {
       background:
           linear-gradient(
               180deg,
               rgba(4, 8, 13, .14) 0%,
               rgba(4, 8, 13, .20) 30%,
               rgba(4, 8, 13, .68) 68%,
               rgba(4, 8, 13, .92) 100%
           );
   }
   
   
   .service-card .service-number {
       color:
           rgba(255, 255, 255, .72);
   }
   
   
   .service-card .service-content h3,
   .service-card.dark .service-content h3,
   .service-card.cyan .service-content h3 {
       color: #ffffff;
   
       text-shadow:
           0 2px 18px rgba(0, 0, 0, .25);
   }
   
   
   .service-card .service-content p,
   .service-card.dark .service-content p,
   .service-card.cyan .service-content p {
       color:
           rgba(255, 255, 255, .78);
   
       text-shadow:
           0 1px 12px rgba(0, 0, 0, .25);
   }
   
   
   .service-card .micro {
       color:
           rgba(255, 255, 255, .72);
   }
   
   
   .service-card .arrow {
       color: #ffffff;
   }
   
   
   .service-card.large::before {
       background:
           linear-gradient(
               180deg,
               rgba(4, 8, 13, .10) 0%,
               rgba(4, 8, 13, .16) 30%,
               rgba(4, 8, 13, .66) 65%,
               rgba(4, 8, 13, .95) 100%
           );
   }
   
   @media (max-width: 700px) {

    .hero-video {
        position: absolute;

        inset: 0;

        width: 100%;
        height: 100%;

        min-width: 100%;
        min-height: 100%;

        max-width: none;

        object-fit: cover;

        object-position: center center;

        display: block;

        pointer-events: none;

        border: 0;

        outline: 0;

        appearance: none;
        -webkit-appearance: none;

        z-index: 0;
    }

    .hero-video::-webkit-media-controls,
    .hero-video::-webkit-media-controls-enclosure,
    .hero-video::-webkit-media-controls-panel,
    .hero-video::-webkit-media-controls-play-button,
    .hero-video::-webkit-media-controls-start-playback-button,
    .hero-video::-webkit-media-controls-overlay-play-button {
        display: none !important;
        -webkit-appearance: none !important;
    }

}

   
   @media (max-width: 700px) {
   
       .service-card,
       .service-card.large,
       .service-card.small,
       .service-card.wide {
   
           min-height: 390px;
   
       }
   
   
       .service-card {
   
           padding: 25px;
   
           background-position: center;
   
       }
   
   
       .service-card:hover {
   
           transform: none;
   
           box-shadow: none;
   
           background-position: center;
   
       }
   
   }
   
   
   @media (prefers-reduced-motion: reduce) {
   
       .service-card {
   
           transition: none;
   
       }
   
   
       .service-card:hover {
   
           transform: none;
   
           background-position: center;
   
       }
   
   }
   
   
   /* =========================================================
      SERVICE AREAS
      ========================================================= */
   
   .service-areas-content {
       width: 100%;
   
       max-width: 1200px;
   
       margin:
           35px auto 0;
   }
   
   
   .service-areas h2 {
       max-width: 850px;
   }
   
   
   .service-areas h2 em {
       color: var(--accent);
   }
   
   
   .service-areas-intro {
       max-width: 600px;
   
       margin:
           30px 0 0;
   
       color: #5d6674;
   
       font-size: 15px;
   
       line-height: 1.8;
   }
   
   
   /* =========================================================
      SERVICE AREA LIST
      ========================================================= */
   
   .service-area-list {
       display: grid;
   
       grid-template-columns:
           repeat(3, minmax(0, 1fr));
   
       column-gap:
           clamp(30px, 7vw, 100px);
   
       margin-top: 55px;
   
       padding:
           25px 0;
   
       border-top:
           1px solid #dfe4ea;
   
       border-bottom:
           1px solid #dfe4ea;
   }
   
   
   .service-area-column {
       display: flex;
   
       flex-direction: column;
   
       gap: 0;
   }
   
   
   .service-area-column span {
       position: relative;
   
       display: flex;
   
       align-items: center;
   
       min-height: 30px;
   
       padding:
           7px 0 7px 25px;
   
       color: #090d16;
   
       font-family:
           "Plus Jakarta Sans",
           sans-serif;
   
       font-size:
           clamp(13px, 1.25vw, 17px);
   
       font-weight: 600;
   
       line-height: 1.35;
   
       letter-spacing: -.02em;
   
       white-space: normal;
   }
   
   
   .service-area-column span::before {
       content: "";
   
       position: absolute;
   
       left: 0;
   
       top: 50%;
   
       width: 10px;
       height: 10px;
   
       border-radius: 50%;
   
       background: #1670d2;
   
       transform:
           translateY(-50%);
   }
   
   
   .service-area-list span:not(:last-child)::after {
       display: none;
   }
   
   
   .service-areas-content .text-link {
       margin-top: 30px;
   }
   
   
   /* =========================================================
      WHY G20NET
      ========================================================= */
   
   .why {
       display: grid;
   
       grid-template-columns:
           minmax(0, .7fr)
           minmax(0, 1.3fr);
   
       gap:
           clamp(40px, 10vw, 140px);
   }
   
   
   .why-left p {
       margin:
           35px 0;
   }
   
   
   /* =========================================================
      TRUST GRID
      ========================================================= */
   
   .trust-grid {
       display: grid;
   
       grid-template-columns:
           repeat(2, minmax(0, 1fr));
   
       border-top:
           1px solid #dfe4ea;
   }
   
   
   .trust {
       min-width: 0;
   
       padding:
           35px 20px 35px 0;
   
       border-bottom:
           1px solid #dfe4ea;
   }
   
   
   .trust:nth-child(odd) {
       padding-right: 35px;
   
       border-right:
           1px solid #dfe4ea;
   }
   
   
   .trust:nth-child(even) {
       padding-left: 35px;
   }
   
   
   .trust span {
       color: #00a878;
   
       font-size: 9px;
   }
   
   
   .trust h3 {
       margin:
           12px 0;
   
       font-family:
           "Plus Jakarta Sans",
           sans-serif;
   
       font-size: 21px;
   
       font-weight: 800;
   
       letter-spacing: -.04em;
   
       overflow-wrap: anywhere;
   }
   
   
   .trust p {
       color: #727b87;
   
       font-size: 11px;
   
       line-height: 1.7;
   }
   
   
   /* =========================================================
      CONTACT
      ========================================================= */
   
   .contact-top {
       max-width: 850px;
   }
   
   
   .contact-top p {
       color: #9da6b5;
   }
   
   
   .contact-grid {
       display: grid;
   
       grid-template-columns:
           minmax(0, .75fr)
           minmax(0, 1.25fr);
   
       gap:
           clamp(35px, 8vw, 110px);
   
       margin-top: 65px;
   }
   
   
   /* =========================================================
      CONTACT INFORMATION
      ========================================================= */
   
   .info-block {
       margin-bottom: 27px;
   }
   
   
   .info-block span {
       display: block;
   
       margin-bottom: 7px;
   
       color: #687384;
   
       font-size: 8px;
   
       letter-spacing: .2em;
   }
   
   
   .info-block strong,
   .info-block a {
       color: #ffffff;
   
       text-decoration: none;
   
       font-size: 12px;
   
       line-height: 1.7;
   
       overflow-wrap: anywhere;
   }
   
   
   .info-block a:hover {
       color: var(--accent);
   }
   
   
   /* =========================================================
      QUOTE FORM
      ========================================================= */
   
   .quote-form {
       width: 100%;
   
       min-width: 0;
   
       padding:
           clamp(25px, 4vw, 40px);
   
       background: #111827;
   
       border:
           1px solid rgba(255, 255, 255, .09);
   }
   
   
   .form-row {
       display: grid;
   
       grid-template-columns:
           repeat(2, minmax(0, 1fr));
   
       gap: 18px;
   }
   
   
   .quote-form label {
       display: block;
   
       margin-bottom: 22px;
   
       color: #8792a3;
   
       font-size: 10px;
   
       letter-spacing: .08em;
   }
   
   
   .quote-form input,
   .quote-form select,
   .quote-form textarea {
       display: block;
   
       width: 100%;
   
       min-width: 0;
   
       margin-top: 9px;
   
       padding: 14px;
   
       border:
           1px solid #293345;
   
       outline: none;
   
       background: #0b111d;
   
       color: #ffffff;
   
       font-family:
           "DM Sans",
           sans-serif;
   
       font-size: 12px;
   }
   
   
   .quote-form input::placeholder,
   .quote-form textarea::placeholder {
       color: #5d6878;
   }
   
   
   .quote-form input:focus,
   .quote-form select:focus,
   .quote-form textarea:focus {
       border-color: var(--accent);
   }
   
   
   .quote-form textarea {
       min-height: 130px;
   
       resize: vertical;
   }
   
   
   .quote-form .button {
       border: 0;
   }
   
   
   .quote-form small {
       display: block;
   
       margin-top: 18px;
   
       color: #596575;
   
       font-size: 8px;
   
       line-height: 1.6;
   }
   
   
   .form-status {
       min-height: 15px;
   
       margin:
           15px 0 0;
   
       color: var(--accent);
   
       font-size: 10px;
   
       line-height: 1.5;
   }
   
   
   /* =========================================================
      FOOTER
      ========================================================= */
   
   footer {
       position: relative;
   
       z-index: 1;
   
       width: 100%;
   
       padding:
           80px
           clamp(20px, 9vw, 130px)
           25px;
   
       display: grid;
   
       grid-template-columns:
           minmax(0, 1.5fr)
           minmax(0, .7fr)
           minmax(0, .7fr)
           minmax(0, .8fr);
   
       gap: 5vw;
   
       background: #070b12;
   
       color: #ffffff;
   }
   
   
   /* =========================================================
      FOOTER LOGO
      ========================================================= */
   
   .footer-logo-link {
       display: inline-flex;
   
       align-items: center;
   
       width: fit-content;
   
       text-decoration: none;
   }
   
   
   .footer-logo {
       display: block;
   
       width: clamp(145px, 13vw, 190px);
   
       height: auto;
   
       max-width: 190px;
   
       object-fit: contain;
   
       transition:
           opacity .25s ease,
           transform .25s ease;
   
       border-radius: 15px;
   }
   
   
   .footer-logo-link:hover .footer-logo {
       opacity: .9;
   
       transform:
           translateY(-1px);
   }
   
   
   .footer-brand p {
       max-width: 260px;
   
       margin-top: 20px;
   
       color: #667080;
   
       font-size: 11px;
   
       line-height: 1.7;
   }
   
   
   .footer-col > span {
       color: #596474;
   
       font-size: 8px;
   
       letter-spacing: .2em;
   }
   
   
   .footer-col a,
   .footer-col p {
       display: block;
   
       color: #a6afbd;
   
       text-decoration: none;
   
       font-size: 10px;
   
       line-height: 2;
   
       overflow-wrap: anywhere;
   }
   
   
   .footer-col a:hover {
       color: var(--accent);
   }
   
   
   .footer-bottom {
       grid-column: 1 / -1;
   
       display: flex;
   
       justify-content: space-between;
   
       flex-wrap: wrap;
   
       gap: 10px;
   
       margin-top: 40px;
   
       padding-top: 20px;
   
       border-top:
           1px solid #1b222c;
   
       color: #46505e;
   
       font-size: 7px;
   
       letter-spacing: .12em;
   }
   
   
   /* =========================================================
      FOOTER CREDIT
      ========================================================= */
   
   .footer-credit {
       grid-column:
           1 / -1 !important;
   
       width:
           100% !important;
   
       margin:
           25px 0 0 !important;
   
       padding:
           15px 0 0 !important;
   
       text-align:
           center !important;
   
       justify-self:
           stretch !important;
   
       border-top:
           1px solid rgba(255, 255, 255, .12);
   }
   
   
   .footer-credit a {
       text-decoration:
           none !important;
   
       color:
           #00e5a3 !important;
   
       font-weight:
           bolder !important;
   }
   
   
   .footer-credit a:hover {
       text-decoration:
           underline !important;
   }
   
   
   .footer-infinity {
       margin-right: 6px;
   
       font-size: 13px;
   }
   
   
   /* =========================================================
      TABLET
      ========================================================= */
   
   @media (max-width: 1100px) {
   
       .nav {
           gap: 18px;
   
           margin: 0 10px;
       }
   
   
       .phone {
           display: none;
       }
   
   
       .hero h1 {
           font-size:
               clamp(46px, 6vw, 72px);
       }
   
   
       .brand {
           width: 150px;
       }
   
   
       .brand-logo {
           width: 150px;
           height: 50px;
       }
   
   }
   
   
   /* =========================================================
      TABLET / SMALL LAPTOP
      ========================================================= */
   
   @media (max-width: 900px) {
   
       .header {
           padding:
               0 5vw;
   
           z-index: 4000;
       }
   
   
       .brand {
           width: 145px;
           height: 52px;
   
           overflow: hidden;
   
           flex-shrink: 0;
       }
   
   
       .brand-logo {
           width: 145px;
           height: 52px;
   
           max-width: none;
   
           object-fit: contain;
       }
   
   
       .nav {
           display: none;
       }
   
   
       .header-actions {
           margin-left: auto;
   
           display: flex;
   
           align-items: center;
       }
   
   
       .menu {
           display: block;
   
           flex-shrink: 0;
   
           z-index: 5000;
       }
   
   
       .nav.open {
           position: absolute;
   
           top: 76px;
           left: 0;
           right: 0;
   
           width: 100%;
   
           max-width: 100vw;
   
           display: flex;
   
           flex-direction: column;
   
           align-items: stretch;
   
           justify-content: flex-start;
   
           gap: 0;
   
           margin: 0;
   
           padding:
               8px 6vw 22px;
   
           background:
               rgba(255, 255, 255, .98);
   
           backdrop-filter:
               blur(18px);
   
           -webkit-backdrop-filter:
               blur(18px);
   
           border-top:
               1px solid #e3e7ec;
   
           border-bottom:
               1px solid #e3e7ec;
   
           box-shadow:
               0 18px 40px rgba(0, 0, 0, .15);
   
           z-index: 4500;
   
           overflow: visible;
       }
   
   
       .nav.open a {
           display: flex;
   
           align-items: center;
   
           width: 100%;
   
           min-height: 48px;
   
           padding:
               14px 0;
   
           border-bottom:
               1px solid #e3e7ec;
   
           color: #090d16;
   
           font-size: 12px;
   
           font-weight: 600;
   
           text-decoration: none;
       }
   
   
       .nav.open a:last-child {
           border-bottom: 0;
       }
   
   
       .nav.open a:hover {
           color: #00a878;
       }
   
   
       .hero {
           height:
               calc(100svh - 30px);
   
           min-height: 600px;
   
           padding:
               0 7vw;
       }
   
   
       .hero-content {
           max-width: 800px;
       }
   
   
       .hero h1 {
           max-width: 750px;
       }
   
   
       .hero p {
           max-width: 620px;
       }
   
   
       .hero-stamp {
           display: none;
       }
   
   
       .intro-grid,
       .services-head,
       .why,
       .contact-grid {
           grid-template-columns: 1fr;
       }
   
   
       .metrics {
           grid-template-columns:
               repeat(2, minmax(0, 1fr));
       }
   
   
       .service-bento {
           grid-template-columns: 1fr;
       }
   
   
       .service-card.large {
           grid-row: auto;
   
           min-height: 500px;
       }
   
   
       .service-area-list {
           grid-template-columns:
               repeat(3, minmax(0, 1fr));
   
           column-gap: 25px;
       }
   
   
       .service-area-column span {
           font-size: 13px;
   
           padding-left: 22px;
       }
   
   
       .service-area-column span::before {
           width: 8px;
           height: 8px;
       }
   
   
       footer {
           grid-template-columns:
               repeat(2, minmax(0, 1fr));
       }
   
   
       .footer-brand {
           grid-column:
               1 / -1;
       }
   
   }
   
   
   /* =========================================================
      MOBILE
      ========================================================= */
   
   @media (max-width: 600px) {
   
   
       /* =====================================================
          STATUS BAR
          ===================================================== */
   
       .statusbar {
           min-height: 30px;
   
           padding:
               7px 12px;
   
           font-size: 7px;
   
           letter-spacing: .06em;
       }
   
   
       /* =====================================================
          MOBILE HEADER
          ===================================================== */
   
       .header {
           top: 30px;
   
           height: 68px;
   
           padding:
               0 5vw;
   
           z-index: 4000;
   
           background: #ffffff;
       }
   
   
       .brand {
           width: 125px;
           height: 50px;
   
           overflow: hidden;
   
           flex-shrink: 0;
       }
   
   
       .brand-logo {
           width: 125px;
           height: 50px;
   
           max-width: none;
   
           object-fit: contain;
   
           object-position: center;
       }
   
   
       .header-actions {
           margin-left: auto;
   
           display: flex;
   
           align-items: center;
   
           gap: 8px;
       }
   
   
       .header-actions .button-small {
           min-height: 38px;
   
           padding:
               0 13px;
   
           font-size: 9px;
       }
   
   
       /* =====================================================
          MOBILE MENU BUTTON
          ===================================================== */
   
       .menu {
           display: flex;
   
           align-items: center;
           justify-content: center;
   
           width: 40px;
           height: 40px;
   
           padding: 0;
   
           margin: 0;
   
           border: 0;
   
           background: transparent;
   
           z-index: 5000;
       }
   
   
       .menu i {
           position: absolute;
   
           width: 24px;
           height: 2px;
   
           margin: 0;
   
           left: 8px;
   
           background: #090d16;
       }
   
   
       .menu i:first-child {
           top: 14px;
       }
   
   
       .menu i:last-child {
           bottom: 14px;
       }
   
   
       .menu.active i:first-child {
           top: 19px;
   
           transform:
               rotate(45deg);
       }
   
   
       .menu.active i:last-child {
           bottom: 19px;
   
           transform:
               rotate(-45deg);
       }
   
   
       /* =====================================================
          MOBILE NAVIGATION
          ===================================================== */
   
       .nav.open {
           position: absolute;
   
           top: 68px;
           left: 0;
           right: 0;
   
           width: 100vw;
   
           max-width: 100vw;
   
           display: flex;
   
           flex-direction: column;
   
           align-items: stretch;
   
           justify-content: flex-start;
   
           gap: 0;
   
           margin: 0;
   
           padding:
               10px 6vw 24px;
   
           background:
               rgba(255, 255, 255, .99);
   
           backdrop-filter:
               blur(18px);
   
           -webkit-backdrop-filter:
               blur(18px);
   
           border-top:
               1px solid #e3e7ec;
   
           border-bottom:
               1px solid #e3e7ec;
   
           box-shadow:
               0 20px 40px rgba(0, 0, 0, .15);
   
           z-index: 4500;
   
           visibility: visible;
   
           opacity: 1;
   
           transform:
               translateY(0);
   
           pointer-events: auto;
       }
   
   
       .nav.open a {
           display: flex;
   
           align-items: center;
   
           width: 100%;
   
           min-height: 48px;
   
           padding:
               14px 0;
   
           color: #090d16;
   
           border-bottom:
               1px solid #e3e7ec;
   
           font-size: 12px;
   
           font-weight: 600;
   
           text-decoration: none;
       }
   
   
       .nav.open a:last-child {
           border-bottom: 0;
       }
   
   
       .nav.open a:hover,
       .nav.open a:focus {
           color: #00a878;
       }
   
   
       /* =====================================================
          MOBILE HERO
          ===================================================== */
   
       .hero {
           height:
               calc(100svh - 98px);
   
           min-height: 620px;
   
           padding:
               0 6vw;
       }
   
   
       /* =====================================================
          FULL-SCREEN MOBILE VIDEO
          ===================================================== */
   
       .hero-video {
           position: absolute;
   
           inset: 0;
   
           width: 100%;
           height: 100%;
   
           min-width: 100%;
           min-height: 100%;
   
           max-width: none;
   
           object-fit: cover;
   
           object-position:
               center center;
   
           z-index: 0;
   
           display: block;
   
           pointer-events: none;
       }
   
   
       .hero-overlay {
           background:
               linear-gradient(
                   180deg,
                   rgba(5, 10, 8, .60),
                   rgba(5, 10, 8, .30),
                   rgba(5, 10, 8, .68)
               );
       }
   
   
       .hero-content {
           width: 100%;
       }
   
   
       .hero .eyebrow {
           font-size: 7px;
   
           letter-spacing: .13em;
   
           gap: 8px;
       }
   
   
       .hero .eyebrow span {
           width: 18px;
       }
   
   
       .hero h1 {
           margin-bottom: 20px;
   
           font-size:
               clamp(38px, 11vw, 54px);
   
           line-height: .96;
       }
   
   
       .hero p {
           font-size: 12px;
   
           line-height: 1.7;
       }
   
   
       /* =====================================================
          MOBILE HERO BUTTONS
          ===================================================== */
   
       .hero-actions {
           margin-top: 26px;
   
           flex-direction: column;
   
           justify-content: center;
   
           align-items: center;
   
           gap: 12px;
   
           width: 100%;
       }
   
   
       .hero-actions .button {
           width: 100%;
   
           max-width: 300px;
   
           min-width: 0;
       }
   
   
       /* =====================================================
          SECTIONS
          ===================================================== */
   
       .section-pad {
           padding:
               75px 6vw;
       }
   
   
       .section-label {
           font-size: 8px;
   
           letter-spacing: .18em;
       }
   
   
       .intro-grid {
           margin:
               30px 0 60px;
       }
   
   
       .intro h2,
       .services h2,
       .why h2,
       .contact h2,
       .service-areas h2 {
           font-size:
               clamp(38px, 11vw, 50px);
   
           line-height: .98;
       }
   
   
       .intro-grid p,
       .services-head p,
       .why p,
       .contact-top p,
       .service-areas-intro {
           font-size: 13px;
   
           line-height: 1.75;
       }
   
   
       /* =====================================================
          METRICS
          ===================================================== */
   
       .metrics {
           grid-template-columns:
               repeat(2, minmax(0, 1fr));
       }
   
   
       .metrics div {
           padding:
               20px 10px;
       }
   
   
       .metrics strong {
           font-size: 26px;
       }
   
   
       .metrics span {
           font-size: 7px;
   
           line-height: 1.4;
       }
   
   
       /* =====================================================
          SERVICES
          ===================================================== */
   
       .services-head {
           margin:
               30px 0 40px;
       }
   
   
       .service-card,
       .service-card.large,
       .service-card.small,
       .service-card.wide {
           min-height: 380px;
   
           padding: 25px;
       }
   
   
       .service-card.large {
           min-height: 430px;
       }
   
   
       .service-content h3 {
           font-size: 23px;
   
           line-height: 1.05;
       }
   
   
       .service-content p {
           font-size: 10px;
       }
   
   
       /* =====================================================
          SERVICE AREAS MOBILE — FULLY CENTERED
          ===================================================== */
   
       .service-areas {
           text-align: center;
       }
   
   
       .service-areas .section-label {
           text-align: center;
       }
   
   
       .service-areas-content {
           width: 100%;
   
           max-width: 100%;
   
           margin:
               30px auto 0;
   
           text-align: center;
       }
   
   
       .service-areas h2 {
           width: 100%;
   
           max-width: 100%;
   
           margin:
               0 auto;
   
           text-align: center;
       }
   
   
       .service-areas-intro {
           width: 100%;
   
           max-width: 600px;
   
           margin:
               25px auto 0;
   
           text-align: center;
       }
   
   
       .service-area-list {
           display: grid;
   
           grid-template-columns: 1fr;
   
           gap: 0;
   
           width: 100%;
   
           margin:
               35px auto 0;
   
           padding:
               15px 0;
   
           text-align: center;
       }
   
   
       .service-area-column {
           width: 100%;
   
           border-bottom:
               1px solid #e3e7ec;
   
           padding:
               8px 0;
   
           align-items: center;
   
           text-align: center;
       }
   
   
       .service-area-column:last-child {
           border-bottom: 0;
       }
   
   
       .service-area-column span {
           position: relative;
   
           width: 100%;
   
           min-height: 0;
   
           display: flex;
   
           align-items: center;
   
           justify-content: center;
   
           padding:
               11px 10px;
   
           font-size: 16px;
   
           font-weight: 600;
   
           text-align: center;
       }
   
   
       /* Remove the left-side bullets on mobile
          so the entire area name is genuinely centered. */
   
       .service-area-column span::before {
           display: none;
       }
   
   
       .service-areas-content .text-link {
           display: inline-flex;
   
           align-items: center;
   
           justify-content: center;
   
           margin:
               25px auto 0;
   
           text-align: center;
       }
   
   
       /* =====================================================
          TRUST
          ===================================================== */
   
       .trust-grid {
           grid-template-columns: 1fr;
       }
   
   
       .trust,
       .trust:nth-child(odd),
       .trust:nth-child(even) {
           padding:
               28px 0;
   
           border-right: 0;
       }
   
   
       /* =====================================================
          CONTACT
          ===================================================== */
   
       .contact-grid {
           margin-top: 45px;
       }
   
   
       .form-row {
           grid-template-columns: 1fr;
   
           gap: 0;
       }
   
   
       .quote-form {
           padding: 22px;
       }
   
   
       .quote-form .button {
           width: 100%;
       }
   
   
       /* =====================================================
          FOOTER — EVERYTHING CENTERED
          ===================================================== */
   
       footer {
           width: 100%;
   
           grid-template-columns: 1fr;
   
           justify-items: center;
   
           align-items: center;
   
           padding:
               65px 6vw 25px;
   
           text-align: center;
       }
   
   
       .footer-brand {
           width: 100%;
   
           grid-column: auto;
   
           display: flex;
   
           flex-direction: column;
   
           align-items: center;
   
           justify-content: center;
   
           text-align: center;
       }
   
   
       .footer-logo-link {
           display: flex;
   
           align-items: center;
   
           justify-content: center;
   
           margin:
               0 auto;
       }
   
   
       .footer-logo {
           width: 145px;
   
           max-width: 145px;
   
           margin:
               0 auto;
       }
   
   
       .footer-brand p {
           width: 100%;
   
           max-width: 320px;
   
           margin:
               20px auto 0;
   
           text-align: center;
       }
   
   
       .footer-col {
           width: 100%;
   
           display: flex;
   
           flex-direction: column;
   
           align-items: center;
   
           justify-content: center;
   
           text-align: center;
       }
   
   
       .footer-col > span {
           display: block;
   
           width: 100%;
   
           text-align: center;
       }
   
   
       .footer-col a {
           display: block;
   
           width: 100%;
   
           text-align: center;
       }
   
   
       .footer-col p {
           width: 100%;
   
           margin:
               0 auto;
   
           text-align: center;
       }
   
   
       .footer-bottom {
           grid-column:
               1 / -1;
   
           width: 100%;
   
           display: flex;
   
           flex-direction: column;
   
           align-items: center;
   
           justify-content: center;
   
           gap: 10px;
   
           margin-top: 40px;
   
           text-align: center;
       }
   
   
       .footer-bottom span {
           display: block;
   
           width: 100%;
   
           text-align: center;
       }
   
   
       .footer-credit {
           grid-column:
               1 / -1 !important;
   
           width:
               100% !important;
   
           margin:
               25px 0 0 !important;
   
           padding:
               15px 0 0 !important;
   
           display: flex;
   
           flex-wrap: wrap;
   
           align-items: center;
   
           justify-content: center;
   
           gap: 5px;
   
           text-align:
               center !important;
   
           justify-self:
               stretch !important;
       }
   
   
       .footer-credit a {
           display: inline-flex;
   
           align-items: center;
   
           justify-content: center;
   
           text-align: center;
   
           white-space: normal;
       }
   
   
       .footer-infinity {
           margin-right: 6px;
       }
   
   }
   
   
   /* =========================================================
      VERY SMALL PHONES
      ========================================================= */
   
   @media (max-width: 380px) {
   
       .header {
           padding:
               0 4vw;
       }
   
   
       .brand {
           width: 110px;
           height: 46px;
       }
   
   
       .brand-logo {
           width: 110px;
           height: 46px;
       }
   
   
       .header-actions .button-small {
           display: none;
       }
   
   
       .menu {
           width: 38px;
           height: 38px;
       }
   
   
       .nav.open {
           top: 68px;
   
           padding-left: 5vw;
   
           padding-right: 5vw;
       }
   
   
       .hero {
           min-height: 600px;
   
           padding:
               0 5vw;
       }
   
   
       .hero h1 {
           font-size: 37px;
       }
   
   
       .section-pad {
           padding-left: 5vw;
   
           padding-right: 5vw;
       }
   
   
       .metrics {
           grid-template-columns: 1fr;
       }
   
   
       .metrics div {
           border-right: 0;
   
           border-bottom:
               1px solid #dfe4ea;
       }
   
   
       .metrics div:last-child {
           border-bottom: 0;
       }
   
   
       .service-card,
       .service-card.large,
       .service-card.small,
       .service-card.wide {
           min-height: 350px;
       }
   
   
       .quote-form {
           padding: 18px;
       }
   
   
       .service-area-column span {
           font-size: 15px;
   
           padding:
               11px 8px;
       }
   
   
       .footer-logo {
           width: 135px;
   
           max-width: 135px;
       }
   
   }
   
   
   /* =========================================================
      REDUCED MOTION
      ========================================================= */
   
   @media (prefers-reduced-motion: reduce) {
   
       html {
           scroll-behavior: auto;
       }
   
   
       *,
       *::before,
       *::after {
   
           animation-duration:
               .01ms !important;
   
           animation-iteration-count:
               1 !important;
   
           transition-duration:
               .01ms !important;
       }
   
   }
   
   
   /* =========================================================
      FINAL SERVICE BACKGROUND IMAGE FIX
      ========================================================= */
   
   .service-card.service-01,
   .service-card.service-02,
   .service-card.service-03,
   .service-card.service-04,
   .service-card.service-05,
   .service-card.service-06 {
   
       background-color:
           #0b1119 !important;
   
       background-image:
           var(--service-bg) !important;
   
       background-position:
           center !important;
   
       background-size:
           cover !important;
   
       background-repeat:
           no-repeat !important;
   }
   
   
   .service-card.dark,
   .service-card.cyan {
       background-image:
           var(--service-bg) !important;
   }
   
   
   .service-card::before {
       background:
           linear-gradient(
               180deg,
               rgba(4, 8, 13, 0.12) 0%,
               rgba(4, 8, 13, 0.20) 30%,
               rgba(4, 8, 13, 0.65) 68%,
               rgba(4, 8, 13, 0.92) 100%
           ) !important;
   }
   
   
   @media (max-width: 700px) {
   
       .service-card.service-01,
       .service-card.service-02,
       .service-card.service-03,
       .service-card.service-04,
       .service-card.service-05,
       .service-card.service-06 {
   
           background-image:
               var(--service-bg) !important;
   
           background-size:
               cover !important;
   
           background-position:
               center !important;
   
       }
   
   }
   
   
   /* =========================================================
      FINAL PROFESSIONAL ARROW FIX
      ========================================================= */
   
   /*
      Any remaining span inside a button should no longer
      render as a large Unicode arrow.
   */
   
   .button > span:not(.button-arrow) {
       font-size: 0;
   }
   
   
   .button > span:not(.button-arrow)::before {
       display: none;
   }
   
   
   /*
      Font Awesome arrow icon
   */
   
   .button-arrow i {
       display: inline-block;
   
       font-size: inherit;
   
       line-height: 1;
   
       font-style: normal;
   }
   
   
   /* =========================================================
      FINAL MOBILE SERVICE AREA CENTERING
      ========================================================= */
   
   @media (max-width: 700px) {
   
       .service-areas {
           text-align: center !important;
       }
   
   
       .service-areas .section-label {
           text-align: center !important;
       }
   
   
       .service-areas-content {
           width: 100% !important;
   
           max-width: 100% !important;
   
           margin-left: auto !important;
   
           margin-right: auto !important;
   
           text-align: center !important;
       }
   
   
       .service-areas-content h2 {
           width: 100% !important;
   
           max-width: 100% !important;
   
           margin-left: auto !important;
   
           margin-right: auto !important;
   
           text-align: center !important;
       }
   
   
       .service-areas-intro {
           width: 100% !important;
   
           max-width: 600px !important;
   
           margin-left: auto !important;
   
           margin-right: auto !important;
   
           text-align: center !important;
       }
   
   
       .service-area-list {
           width: 100% !important;
   
           grid-template-columns: 1fr !important;
   
           margin-left: auto !important;
   
           margin-right: auto !important;
   
           text-align: center !important;
       }
   
   
       .service-area-column {
           width: 100% !important;
   
           align-items: center !important;
   
           text-align: center !important;
       }
   
   
       .service-area-column span {
           width: 100% !important;
   
           justify-content: center !important;
   
           padding-left: 10px !important;
   
           padding-right: 10px !important;
   
           text-align: center !important;
       }
   
   
       .service-area-column span::before {
           display: none !important;
       }
   
   
       .service-areas-content .text-link {
           margin-left: auto !important;
   
           margin-right: auto !important;
   
           justify-content: center !important;
       }
   
   }
   
   
   /* =========================================================
      FINAL MOBILE FOOTER CENTERING
      ========================================================= */
   
   @media (max-width: 700px) {
   
       footer {
           display: grid !important;
   
           grid-template-columns: 1fr !important;
   
           justify-items: center !important;
   
           align-items: center !important;
   
           text-align: center !important;
       }
   
   
       .footer-brand,
       .footer-col,
       .footer-bottom,
       .footer-credit {
           width: 100% !important;
   
           margin-left: auto !important;
   
           margin-right: auto !important;
   
           text-align: center !important;
       }
   
   
       .footer-brand,
       .footer-col {
           display: flex !important;
   
           flex-direction: column !important;
   
           align-items: center !important;
   
           justify-content: center !important;
       }
   
   
       .footer-logo-link {
           margin-left: auto !important;
   
           margin-right: auto !important;
   
           justify-content: center !important;
       }
   
   
       .footer-logo {
           margin-left: auto !important;
   
           margin-right: auto !important;
       }
   
   
       .footer-brand p,
       .footer-col p {
           margin-left: auto !important;
   
           margin-right: auto !important;
   
           text-align: center !important;
       }
   
   
       .footer-col > span,
       .footer-col a {
           width: 100% !important;
   
           text-align: center !important;
       }
   
   
       .footer-bottom {
           display: flex !important;
   
           flex-direction: column !important;
   
           align-items: center !important;
   
           justify-content: center !important;
   
           text-align: center !important;
       }
   
   
       .footer-bottom span {
           width: 100% !important;
   
           text-align: center !important;
       }
   
   
       .footer-credit {
           display: flex !important;
   
           flex-wrap: wrap !important;
   
           align-items: center !important;
   
           justify-content: center !important;
   
           text-align: center !important;
       }
   
   
       .footer-credit a {
           display: inline-flex !important;
   
           align-items: center !important;
   
           justify-content: center !important;
   
           text-align: center !important;
       }
   
   }