/* =========================================================
   INTER DISPLAY — Self-hosted variable font
   ========================================================= */

@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter/Inter-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter/Inter-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'InterDisplay';
  src: url('../fonts/inter/InterDisplay-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'InterDisplay';
  src: url('../fonts/inter/InterDisplay-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* =========================================================
   GLOBAL DEFAULT
   ========================================================= */

html, body {
  font-family: 'InterDisplay', system-ui, -apple-system, sans-serif;
}

html, body,
h1, h2, h3, h4, h5, h6,
p, a, span, li, label,
button, input, textarea, select {
  font-family: 'InterDisplay', 'Inter', system-ui, -apple-system, sans-serif !important;
}

/* =========================================================
   CUSTOM CURSOR — HIDE NATIVE BROWSER CURSOR
   ========================================================= */

/* =========================================================
   CUSTOM CURSOR — HIDE NATIVE BROWSER CURSOR
========================================================= */

html,
html *,
body,
body * {
    cursor: none !important;
} 

.container {
    width: 1340px !important;
}
button,
input,
textarea,
select {
    font: inherit;
}



  /* FAQ answer starts closed */
  .faq-answer {
    height: 0;
    overflow: hidden;
    opacity: 0;

    transition:
      height 0.8s cubic-bezier(0.4, 0, 0.2, 1),
      opacity 0.6s ease;
  }


  /* Icon */
  .faq-icon {
    transition:
      transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .faq-item.active .faq-icon {
    transform: rotate(45deg);
  }


  /* Card */
  .faq-item {
    transition:
      border-color 0.5s ease,
      background-color 0.5s ease,
      box-shadow 0.5s ease;
  }

  .faq-item.active {
    background-color: #1c1c1c;
    border-color: rgba(255, 198, 0, 0.4);
    box-shadow: 0 0 30px rgba(255, 198, 0, 0.05);
  }


  /* =========================
       STICKY LEFT CONTENT
       ========================= */

  @media (min-width: 1024px) {

    .faq-left {
      position: sticky;
      top: 100px;
      align-self: start;
    }

  }


@media (max-width: 639px) {
    .mobile-responsive {
        padding-left: 20px;
        padding-right: 20px;
    }
    .mobile-responsive h1 {
        font-size: 32px!important;
        line-height: 42px!important;
    }
    .btcenter {
        display: block!important;
        margin: auto!important;
        width: 65%!important;
    }
    .mobile-responsive h2 {
        font-size: 32px !important;
        line-height: 42px!important;
    }
    .mobile-responsive h3 {
        font-size: 24px!important;
        line-height: 30px!important;
    }
    .mobile-responsive p {
        font-size: 15px!important;
        line-height: 22px!important;
    }
    
  .mobile-responsive h2 span {
        font-size: 32px !important;
        line-height: 42px !important;
    }
}

/* ////////////  mouse cursor style ////////// */
.banner-floating {
    animation: bannerFloat 2.8s ease-in-out infinite;
    will-change: transform;
}
@keyframes bannerFloat {
    0%   { transform: translateY(0); }
    50%  { transform: translateY(-20px); }
    100% { transform: translateY(0); }
}

.banner-floating-slow {
  animation: bannerFloat 3.5s ease-in-out infinite;
}

.portfolio-quote-mark {
  right: 35px;
  bottom: 35px;
  width: 90px;
  height: 69px;
  opacity: 0.14;
  transform: rotate(-180deg);
}

.digital-service-orbit-12 {
  animation-duration: 12s;
}

.digital-service-orbit-20-reverse {
  animation-duration: 20s;
  animation-direction: reverse;
}

.digital-service-orbit-30 {
  animation-duration: 30s;
}

/* ---------- Cursor base ---------- */
.cb-cursor {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999999;
    contain: layout style size;
    pointer-events: none;
    transition: color .3s 0s;
}

.cb-cursor:before {
    content: "";
    display: block;
    position: absolute;
    top: -5rem;
    left: -5rem;
    width: 10rem;
    height: 10rem;
    transform: scale(.12);
    background: currentColor;
    border-radius: 50%;
    transition: transform .3s, opacity .1s;
}

.cb-cursor.-active:before {
    transform: scale(.18);
}

.cb-cursor,
.cb-cursor.-exclusion,
.cb-cursor.-opaque,
.cb-cursor.-pointer {
    mix-blend-mode: exclusion;
    transition-duration: 0s;
    transition-delay: 999999s;
}

.cb-cursor.-exclusion:before,
.cb-cursor.-opaque:before,
.cb-cursor.-pointer:before,
.cb-cursor:before {
    background: #fff;
}

/* Link / Button pe hover — arrow ke saath circle */
.cb-cursor.-pointer:before {
    transform: scale(.42);
}

.cb-cursor.-pointer.-active:before {
    transform: scale(.48);
}

.cb-cursor.-opaque:before {
    transform: scale(.6);
}

.cb-cursor.-opaque.-active:before {
    transform: scale(.5);
}

.cb-cursor.-lg:before {
    transform: scale(1.05);
}

.cb-cursor.-lg.-active:before {
    transform: scale(1.15);
}

.cb-cursor.-text {
    transition-delay: 0s;
}

.cb-cursor.-text:before {
    opacity: 1;
    transform: scale(.55);
}

.cb-cursor.-text.-active:before {
    transform: scale(.5);
    transition-duration: .2s;
}

/* Icon state (play / cross) */
.cb-cursor.-icon {
    transition-delay: 0s;
}

.cb-cursor.-icon:before {
    transform: scale(.5);
}

.cb-cursor.-icon.-active:before {
    transform: scale(.45);
}

.cb-cursor.-hidden:before {
    transform: scale(0);
}

.cb-cursor.-under {
    z-index: 0;
}

/* ---------- Inner wrapper ---------- */
.cb-cursor-inner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

/* ---------- Icon / Text holder ---------- */
.cb-cursor-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    color: #000;
    font-size: 18px;
    line-height: 1;
    text-align: center;
    opacity: 0;
    transition: opacity .3s, transform .3s;
    pointer-events: none;
}

.cb-cursor.-icon .cb-cursor-text,
.cb-cursor.-text .cb-cursor-text {
    opacity: 1;
}

/* ---------- Font Awesome icons ---------- */
.cb-cursor-text i,
.cb-cursor-text .fa,
.cb-cursor-text .fa-solid,
.cb-cursor-text .fas,
.cb-cursor-text .fa-regular,
.cb-cursor-text .far,
.cb-cursor-text svg {
    font-size: 18px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
}

.cb-cursor.-icon .cb-cursor-text i {
    font-size: 20px;
}

.cb-cursor.-icon .cb-cursor-text svg {
    width: 20px;
    height: 20px;
}

/* ---------- Media ---------- */
.cb-cursor-media {
    position: absolute;
    width: 36rem;
    height: 36rem;
    margin: -18rem 0 0 -18rem;
}

.cb-cursor-media img,
.cb-cursor-media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: translateZ(0);
}

.cb-cursor-media-box {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    transform: scale(0) translateZ(0);
    opacity: 0;
    border-radius: 50%;
    transition: transform .35s, opacity .2s .2s;
}

.cb-cursor.-media .cb-cursor-media-box {
    opacity: 1;
    transform: scale(.696);
    transition-duration: .4s, .4s;
    transition-delay: 0s, 0s;
}

.cb-cursor.-media {
    z-index: 0;
    mix-blend-mode: normal;
    transition-delay: 0s;
}dialog#modal-showreel {
    overflow: visible;
}

.cb-cursor.-media.-media-lg .cb-cursor-media-box {
    transform: scale(1) !important;
}

.cb-cursor.-media.-media-blend {
    z-index: 150;
    mix-blend-mode: exclusion;
}

@supports (mix-blend-mode: exclusion) {
    .cb-cursor.-media.-media-blend .cb-cursor-media-box {
        filter: invert(1);
    }
}

/* CONSOLIDATED INTER FONT RULES */
/* Variable fonts usage:
:root { font-family: "Inter", sans-serif; }
@supports (font-variation-settings: normal) {
  :root { font-family: "InterVariable", sans-serif; font-optical-sizing: auto; }
} */
@font-face {
  font-family: InterVariable;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter/InterVariable.woff2") format("woff2");
}
@font-face {
  font-family: InterVariable;
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter/InterVariable-Italic.woff2") format("woff2");
}

/* static fonts */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100; font-display: swap; src: url("../fonts/inter/Inter-Thin.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: italic; font-weight: 100; font-display: swap; src: url("../fonts/inter/Inter-ThinItalic.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 200; font-display: swap; src: url("../fonts/inter/Inter-ExtraLight.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: italic; font-weight: 200; font-display: swap; src: url("../fonts/inter/Inter-ExtraLightItalic.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 300; font-display: swap; src: url("../fonts/inter/Inter-Light.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: italic; font-weight: 300; font-display: swap; src: url("../fonts/inter/Inter-LightItalic.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/inter/Inter-Regular.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/inter/Inter-Italic.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/inter/Inter-Medium.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: italic; font-weight: 500; font-display: swap; src: url("../fonts/inter/Inter-MediumItalic.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/inter/Inter-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: italic; font-weight: 600; font-display: swap; src: url("../fonts/inter/Inter-SemiBoldItalic.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/inter/Inter-Bold.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: italic; font-weight: 700; font-display: swap; src: url("../fonts/inter/Inter-BoldItalic.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/inter/Inter-ExtraBold.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: italic; font-weight: 800; font-display: swap; src: url("../fonts/inter/Inter-ExtraBoldItalic.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 900; font-display: swap; src: url("../fonts/inter/Inter-Black.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: italic; font-weight: 900; font-display: swap; src: url("../fonts/inter/Inter-BlackItalic.woff2") format("woff2"); }
@font-face { font-family: "InterDisplay"; font-style: normal; font-weight: 100; font-display: swap; src: url("../fonts/inter/InterDisplay-Thin.woff2") format("woff2"); }
@font-face { font-family: "InterDisplay"; font-style: italic; font-weight: 100; font-display: swap; src: url("../fonts/inter/InterDisplay-ThinItalic.woff2") format("woff2"); }
@font-face { font-family: "InterDisplay"; font-style: normal; font-weight: 200; font-display: swap; src: url("../fonts/inter/InterDisplay-ExtraLight.woff2") format("woff2"); }
@font-face { font-family: "InterDisplay"; font-style: italic; font-weight: 200; font-display: swap; src: url("../fonts/inter/InterDisplay-ExtraLightItalic.woff2") format("woff2"); }
@font-face { font-family: "InterDisplay"; font-style: normal; font-weight: 300; font-display: swap; src: url("../fonts/inter/InterDisplay-Light.woff2") format("woff2"); }
@font-face { font-family: "InterDisplay"; font-style: italic; font-weight: 300; font-display: swap; src: url("../fonts/inter/InterDisplay-LightItalic.woff2") format("woff2"); }
@font-face { font-family: "InterDisplay"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/inter/InterDisplay-Regular.woff2") format("woff2"); }
@font-face { font-family: "InterDisplay"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/inter/InterDisplay-Italic.woff2") format("woff2"); }
@font-face { font-family: "InterDisplay"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/inter/InterDisplay-Medium.woff2") format("woff2"); }
@font-face { font-family: "InterDisplay"; font-style: italic; font-weight: 500; font-display: swap; src: url("../fonts/inter/InterDisplay-MediumItalic.woff2") format("woff2"); }
@font-face { font-family: "InterDisplay"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/inter/InterDisplay-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "InterDisplay"; font-style: italic; font-weight: 600; font-display: swap; src: url("../fonts/inter/InterDisplay-SemiBoldItalic.woff2") format("woff2"); }
@font-face { font-family: "InterDisplay"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/inter/InterDisplay-Bold.woff2") format("woff2"); }
@font-face { font-family: "InterDisplay"; font-style: italic; font-weight: 700; font-display: swap; src: url("../fonts/inter/InterDisplay-BoldItalic.woff2") format("woff2"); }
@font-face { font-family: "InterDisplay"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/inter/InterDisplay-ExtraBold.woff2") format("woff2"); }
@font-face { font-family: "InterDisplay"; font-style: italic; font-weight: 800; font-display: swap; src: url("../fonts/inter/InterDisplay-ExtraBoldItalic.woff2") format("woff2"); }
@font-face { font-family: "InterDisplay"; font-style: normal; font-weight: 900; font-display: swap; src: url("../fonts/inter/InterDisplay-Black.woff2") format("woff2"); }
@font-face { font-family: "InterDisplay"; font-style: italic; font-weight: 900; font-display: swap; src: url("../fonts/inter/InterDisplay-BlackItalic.woff2") format("woff2"); }

@font-feature-values InterVariable {
    @character-variant {
        cv01: 1; cv02: 2; cv03: 3; cv04: 4; cv05: 5; cv06: 6; cv07: 7; cv08: 8;
        cv09: 9; cv10: 10; cv11: 11; cv12: 12; cv13: 13;
        alt-1:            1; /* Alternate one */
        alt-3:            9; /* Flat-top three */
        open-4:           2; /* Open four */
        open-6:           3; /* Open six */
        open-9:           4; /* Open nine */
        lc-l-with-tail:   5; /* Lower-case L with tail */
        simplified-u:     6; /* Simplified u */
        alt-double-s:     7; /* Alternate German double s */
        uc-i-with-serif:  8; /* Upper-case i with serif */
        uc-g-with-spur:  10; /* Capital G with spur */
        single-story-a:  11; /* Single-story a */
        compact-lc-f:    12; /* Compact f */
        compact-lc-t:    13; /* Compact t */
    }
    @styleset {
        ss01: 1; ss02: 2; ss03: 3; ss04: 4; ss05: 5; ss06: 6; ss07: 7; ss08: 8;
        open-digits: 1;                /* Open digits */
        disambiguation: 2;             /* Disambiguation (with zero) */
        disambiguation-except-zero: 4; /* Disambiguation (no zero) */
        round-quotes-and-commas: 3;    /* Round quotes & commas */
        square-punctuation: 7;         /* Square punctuation */
        square-quotes: 8;              /* Square quotes */
        circled-characters: 5;         /* Circled characters */
        squared-characters: 6;         /* Squared characters */
    }
}
@font-feature-values Inter {
    @character-variant {
        cv01: 1; cv02: 2; cv03: 3; cv04: 4; cv05: 5; cv06: 6; cv07: 7; cv08: 8;
        cv09: 9; cv10: 10; cv11: 11; cv12: 12; cv13: 13;
        alt-1:            1; /* Alternate one */
        alt-3:            9; /* Flat-top three */
        open-4:           2; /* Open four */
        open-6:           3; /* Open six */
        open-9:           4; /* Open nine */
        lc-l-with-tail:   5; /* Lower-case L with tail */
        simplified-u:     6; /* Simplified u */
        alt-double-s:     7; /* Alternate German double s */
        uc-i-with-serif:  8; /* Upper-case i with serif */
        uc-g-with-spur:  10; /* Capital G with spur */
        single-story-a:  11; /* Single-story a */
        compact-lc-f:    12; /* Compact f */
        compact-lc-t:    13; /* Compact t */
    }
    @styleset {
        ss01: 1; ss02: 2; ss03: 3; ss04: 4; ss05: 5; ss06: 6; ss07: 7; ss08: 8;
        open-digits: 1;                /* Open digits */
        disambiguation: 2;             /* Disambiguation (with zero) */
        disambiguation-except-zero: 4; /* Disambiguation (no zero) */
        round-quotes-and-commas: 3;    /* Round quotes & commas */
        square-punctuation: 7;         /* Square punctuation */
        square-quotes: 8;              /* Square quotes */
        circled-characters: 5;         /* Circled characters */
        squared-characters: 6;         /* Squared characters */
    }
}
@font-feature-values InterDisplay {
    @character-variant {
        cv01: 1; cv02: 2; cv03: 3; cv04: 4; cv05: 5; cv06: 6; cv07: 7; cv08: 8;
        cv09: 9; cv10: 10; cv11: 11; cv12: 12; cv13: 13;
        alt-1:            1; /* Alternate one */
        alt-3:            9; /* Flat-top three */
        open-4:           2; /* Open four */
        open-6:           3; /* Open six */
        open-9:           4; /* Open nine */
        lc-l-with-tail:   5; /* Lower-case L with tail */
        simplified-u:     6; /* Simplified u */
        alt-double-s:     7; /* Alternate German double s */
        uc-i-with-serif:  8; /* Upper-case i with serif */
        uc-g-with-spur:  10; /* Capital G with spur */
        single-story-a:  11; /* Single-story a */
        compact-lc-f:    12; /* Compact f */
        compact-lc-t:    13; /* Compact t */
    }
    @styleset {
        ss01: 1; ss02: 2; ss03: 3; ss04: 4; ss05: 5; ss06: 6; ss07: 7; ss08: 8;
        open-digits: 1;                /* Open digits */
        disambiguation: 2;             /* Disambiguation (with zero) */
        disambiguation-except-zero: 4; /* Disambiguation (no zero) */
        round-quotes-and-commas: 3;    /* Round quotes & commas */
        square-punctuation: 7;         /* Square punctuation */
        square-quotes: 8;              /* Square quotes */
        circled-characters: 5;         /* Circled characters */
        squared-characters: 6;         /* Squared characters */
    }
}



/* PAGE-SCOPED STYLES */
/* Page styles: our-services */

  /* Orbit Animation Container */
  body[data-page="our-services"] .hero-orbit {
    position: relative;
    width: 450px;
    height: 450px;
  }
  
  /* Center Core */
  body[data-page="our-services"] .orbit-core {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90px;
    height: 90px;
    background: #FFC800;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 60px 10px rgba(255, 200, 0, 0.4);
    z-index: 10;
  }

  /* Orbit Rings - Bulletproof centering using margin: auto */
  body[data-page="our-services"] .orbit-ring {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    border: 2px dashed rgba(255, 255, 255, 0.25); /* Brighter so it's clearly visible */
    border-radius: 50%;
  }
  body[data-page="our-services"] .orbit-ring.r1 { width: 200px; height: 200px; animation: spin 12s linear infinite; }
  body[data-page="our-services"] .orbit-ring.r2 { width: 320px; height: 320px; animation: spin 20s linear infinite reverse; border-color: rgba(255, 200, 0, 0.25); }
  body[data-page="our-services"] .orbit-ring.r3 { width: 450px; height: 450px; animation: spin 30s linear infinite; }

  /* Position Wrapper - Places the pill exactly on the ring line */
  body[data-page="our-services"] .orbit-pos {
    position: absolute;
    width: 44px; /* Base width of the pill */
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  body[data-page="our-services"] .pos-top { top: -22px; left: 50%; transform: translateX(-50%); }
  body[data-page="our-services"] .pos-right { right: -22px; top: 50%; transform: translateY(-50%); }
  body[data-page="our-services"] .pos-bottom { bottom: -22px; left: 50%; transform: translateX(-50%); }

  /* Orbiting Service Pills */
  body[data-page="our-services"] .orbit-icon {
    height: 44px;
    background: #111111;
    border: 1px solid #333333;
    border-radius: 22px; /* Fully rounded pill */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    color: #ffffff;
    white-space: nowrap;
    transition: all 0.3s ease;
    z-index: 5;
    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
    /* Counter-rotation applied here to keep the pill upright as it orbits */
  }
  body[data-page="our-services"] .orbit-ring.r1 .orbit-icon { animation: spin-reverse 12s linear infinite; }
  body[data-page="our-services"] .orbit-ring.r2 .orbit-icon { animation: spin 20s linear infinite; } /* Reverse of reverse */
  body[data-page="our-services"] .orbit-ring.r3 .orbit-icon { animation: spin-reverse 30s linear infinite; }

  body[data-page="our-services"] .orbit-icon svg { width: 20px; height: 20px; flex-shrink: 0; }

  /* Hidden Text State */
  body[data-page="our-services"] .orbit-text {
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    margin-left: 0;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* HOVER STATE: Reveal all texts at once when hovering anywhere on the orbit */
  body[data-page="our-services"] .hero-orbit:hover .orbit-icon {
    border-color: #FFC800;
    color: #FFC800;
    background: #1a1a1a;
    box-shadow: 0 0 20px rgba(255,200,0,0.3);
  }
  body[data-page="our-services"] .hero-orbit:hover .orbit-text {
    max-width: 150px; /* Wide enough to fit "DIGITAL MARKETING" */
    opacity: 1;
    margin-left: 10px;
  }

  /* Explicit Keyframes */
 @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
 @keyframes spin-reverse { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }


/* Page styles: logo-design-branding */

  /* ============================================
     LOGO DESIGN & BRANDING HERO ORBIT ANIMATION
  ============================================ */
  body[data-page="logo-design-branding"] .shopify-orbit {
    position: relative;
    width: 450px;
    height: 450px;
  }
  
  body[data-page="logo-design-branding"] .shopify-core {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 110px;
    height: 110px;
    background: #FFC800;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 60px 10px rgba(255, 200, 0, 0.4);
    z-index: 10;
  }

  body[data-page="logo-design-branding"] .shopify-ring {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    border: 2px dashed rgba(255, 255, 255, 0.25);
    border-radius: 50%;
  }
  body[data-page="logo-design-branding"] .shopify-ring.r1 { width: 200px; height: 200px; animation: spin 12s linear infinite; }
  body[data-page="logo-design-branding"] .shopify-ring.r2 { width: 320px; height: 320px; animation: spin 20s linear infinite reverse; border-color: rgba(255, 200, 0, 0.25); }
  body[data-page="logo-design-branding"] .shopify-ring.r3 { width: 450px; height: 450px; animation: spin 30s linear infinite; }

  body[data-page="logo-design-branding"] .orbit-pos {
    position: absolute;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  body[data-page="logo-design-branding"] .pos-top { top: -22px; left: 50%; transform: translateX(-50%); }
  body[data-page="logo-design-branding"] .pos-right { right: -22px; top: 50%; transform: translateY(-50%); }
  body[data-page="logo-design-branding"] .pos-bottom { bottom: -22px; left: 50%; transform: translateX(-50%); }
  body[data-page="logo-design-branding"] .pos-left { left: -22px; top: 50%; transform: translateY(-50%); }

  body[data-page="logo-design-branding"] .orbit-icon {
    height: 44px;
    background: #111111;
    border: 1px solid #333333;
    border-radius: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    color: #ffffff;
    white-space: nowrap;
    transition: all 0.3s ease;
    z-index: 5;
    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
  }
  body[data-page="logo-design-branding"] .shopify-ring.r1 .orbit-icon { animation: spin-reverse 12s linear infinite; }
  body[data-page="logo-design-branding"] .shopify-ring.r2 .orbit-icon { animation: spin 20s linear infinite; }
  body[data-page="logo-design-branding"] .shopify-ring.r3 .orbit-icon { animation: spin-reverse 30s linear infinite; }

  body[data-page="logo-design-branding"] .orbit-icon svg { width: 20px; height: 20px; flex-shrink: 0; }

  body[data-page="logo-design-branding"] .orbit-text {
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    margin-left: 0;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }

  body[data-page="logo-design-branding"] .shopify-orbit:hover .orbit-icon {
    border-color: #FFC800;
    color: #FFC800;
    background: #1a1a1a;
    box-shadow: 0 0 20px rgba(255,200,0,0.3);
  }
  body[data-page="logo-design-branding"] .shopify-orbit:hover .orbit-text {
    max-width: 180px;
    opacity: 1;
    margin-left: 10px;
  }

 @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
 @keyframes spin-reverse { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }

  /* ============================================
     OUR WORK MARQUEE (Right to Left Continuous Scroll)
  ============================================ */
 @keyframes marqueeScroll {
   0% { transform: translateX(0); }
   100% { transform: translateX(-50%); }
  }

  body[data-page="logo-design-branding"] .work-marquee {
    display: flex;
    width: max-content;
    gap: 24px;
    animation: marqueeScroll 40s linear infinite;
  }

  body[data-page="logo-design-branding"] .work-marquee:hover {
    animation-play-state: paused;
  }

  body[data-page="logo-design-branding"] .work-card {
    width: 420px;
    flex-shrink: 0;
    background: #1a1a1a;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.08);
    transition: all 0.5s ease;
  }

  body[data-page="logo-design-branding"] .work-card:hover {
    border-color: rgba(255,200,0,0.4);
    transform: translateY(-8px);
  }

  body[data-page="logo-design-branding"] .work-card-image {
    height: 220px;
    width: 100%;
    overflow: hidden;
    position: relative;
  }

  body[data-page="logo-design-branding"] .work-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s ease;
  }

  body[data-page="logo-design-branding"] .work-card:hover .work-card-image img {
    transform: scale(1.08);
  }

  body[data-page="logo-design-branding"] .work-card-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent 60%);
  }

  /* ============================================
     FAQ ACCORDION
  ============================================ */
  body[data-page="logo-design-branding"] .faq-item {
    transition: all 0.4s ease;
  }

  body[data-page="logo-design-branding"] .faq-item.active {
    border-color: rgba(255, 200, 0, 0.4);
    background: #1e1e1e;
  }

  body[data-page="logo-design-branding"] .faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  }

  body[data-page="logo-design-branding"] .faq-item.active .faq-answer {
    max-height: 500px;
  }

  body[data-page="logo-design-branding"] .faq-icon {
    transition: transform 0.4s ease, background 0.4s ease;
  }

  body[data-page="logo-design-branding"] .faq-item.active .faq-icon {
    transform: rotate(45deg);
    background: #ffc600;
  }

  body[data-page="logo-design-branding"] .faq-item.active .faq-icon svg {
    color: #000;
  }


/* Page styles: ui-ux-design */

  /* ============================================
     UI/UX DESIGN HERO ORBIT ANIMATION
  ============================================ */
  body[data-page="ui-ux-design"] .shopify-orbit {
    position: relative;
    width: 450px;
    height: 450px;
  }
  
  body[data-page="ui-ux-design"] .shopify-core {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 110px;
    height: 110px;
    background: #FFC800;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 60px 10px rgba(255, 200, 0, 0.4);
    z-index: 10;
  }

  body[data-page="ui-ux-design"] .shopify-ring {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    border: 2px dashed rgba(255, 255, 255, 0.25);
    border-radius: 50%;
  }
  body[data-page="ui-ux-design"] .shopify-ring.r1 { width: 200px; height: 200px; animation: spin 12s linear infinite; }
  body[data-page="ui-ux-design"] .shopify-ring.r2 { width: 320px; height: 320px; animation: spin 20s linear infinite reverse; border-color: rgba(255, 200, 0, 0.25); }
  body[data-page="ui-ux-design"] .shopify-ring.r3 { width: 450px; height: 450px; animation: spin 30s linear infinite; }

  body[data-page="ui-ux-design"] .orbit-pos {
    position: absolute;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  body[data-page="ui-ux-design"] .pos-top { top: -22px; left: 50%; transform: translateX(-50%); }
  body[data-page="ui-ux-design"] .pos-right { right: -22px; top: 50%; transform: translateY(-50%); }
  body[data-page="ui-ux-design"] .pos-bottom { bottom: -22px; left: 50%; transform: translateX(-50%); }
  body[data-page="ui-ux-design"] .pos-left { left: -22px; top: 50%; transform: translateY(-50%); }

  body[data-page="ui-ux-design"] .orbit-icon {
    height: 44px;
    background: #111111;
    border: 1px solid #333333;
    border-radius: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    color: #ffffff;
    white-space: nowrap;
    transition: all 0.3s ease;
    z-index: 5;
    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
  }
  body[data-page="ui-ux-design"] .shopify-ring.r1 .orbit-icon { animation: spin-reverse 12s linear infinite; }
  body[data-page="ui-ux-design"] .shopify-ring.r2 .orbit-icon { animation: spin 20s linear infinite; }
  body[data-page="ui-ux-design"] .shopify-ring.r3 .orbit-icon { animation: spin-reverse 30s linear infinite; }

  body[data-page="ui-ux-design"] .orbit-icon svg { width: 20px; height: 20px; flex-shrink: 0; }

  body[data-page="ui-ux-design"] .orbit-text {
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    margin-left: 0;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }

  body[data-page="ui-ux-design"] .shopify-orbit:hover .orbit-icon {
    border-color: #FFC800;
    color: #FFC800;
    background: #1a1a1a;
    box-shadow: 0 0 20px rgba(255,200,0,0.3);
  }
  body[data-page="ui-ux-design"] .shopify-orbit:hover .orbit-text {
    max-width: 180px;
    opacity: 1;
    margin-left: 10px;
  }

 @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
 @keyframes spin-reverse { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }

  /* ============================================
     OUR WORK MARQUEE (Right to Left Continuous Scroll)
  ============================================ */
 @keyframes marqueeScroll {
   0% { transform: translateX(0); }
   100% { transform: translateX(-50%); }
  }

  body[data-page="ui-ux-design"] .work-marquee {
    display: flex;
    width: max-content;
    gap: 24px;
    animation: marqueeScroll 40s linear infinite;
  }

  body[data-page="ui-ux-design"] .work-marquee:hover {
    animation-play-state: paused;
  }

  body[data-page="ui-ux-design"] .work-card {
    width: 420px;
    flex-shrink: 0;
    background: #1a1a1a;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.08);
    transition: all 0.5s ease;
  }

  body[data-page="ui-ux-design"] .work-card:hover {
    border-color: rgba(255,200,0,0.4);
    transform: translateY(-8px);
  }

  body[data-page="ui-ux-design"] .work-card-image {
    height: 220px;
    width: 100%;
    overflow: hidden;
    position: relative;
  }

  body[data-page="ui-ux-design"] .work-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s ease;
  }

  body[data-page="ui-ux-design"] .work-card:hover .work-card-image img {
    transform: scale(1.08);
  }

  body[data-page="ui-ux-design"] .work-card-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent 60%);
  }

  /* ============================================
     FAQ ACCORDION
  ============================================ */
  body[data-page="ui-ux-design"] .faq-item {
    transition: all 0.4s ease;
  }

  body[data-page="ui-ux-design"] .faq-item.active {
    border-color: rgba(255, 200, 0, 0.4);
    background: #1e1e1e;
  }

  body[data-page="ui-ux-design"] .faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  }

  body[data-page="ui-ux-design"] .faq-item.active .faq-answer {
    max-height: 500px;
  }

  body[data-page="ui-ux-design"] .faq-icon {
    transition: transform 0.4s ease, background 0.4s ease;
  }

  body[data-page="ui-ux-design"] .faq-item.active .faq-icon {
    transform: rotate(45deg);
    background: #ffc600;
  }

  body[data-page="ui-ux-design"] .faq-item.active .faq-icon svg {
    color: #000;
  }


/* Page styles: website-design */

  /* ============================================
     WEBSITE DESIGN HERO ORBIT ANIMATION
  ============================================ */
  body[data-page="website-design"] .shopify-orbit {
    position: relative;
    width: 450px;
    height: 450px;
  }
  
  body[data-page="website-design"] .shopify-core {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 110px;
    height: 110px;
    background: #FFC800;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 60px 10px rgba(255, 200, 0, 0.4);
    z-index: 10;
  }

  body[data-page="website-design"] .shopify-ring {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    border: 2px dashed rgba(255, 255, 255, 0.25);
    border-radius: 50%;
  }
  body[data-page="website-design"] .shopify-ring.r1 { width: 200px; height: 200px; animation: spin 12s linear infinite; }
  body[data-page="website-design"] .shopify-ring.r2 { width: 320px; height: 320px; animation: spin 20s linear infinite reverse; border-color: rgba(255, 200, 0, 0.25); }
  body[data-page="website-design"] .shopify-ring.r3 { width: 450px; height: 450px; animation: spin 30s linear infinite; }

  body[data-page="website-design"] .orbit-pos {
    position: absolute;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  body[data-page="website-design"] .pos-top { top: -22px; left: 50%; transform: translateX(-50%); }
  body[data-page="website-design"] .pos-right { right: -22px; top: 50%; transform: translateY(-50%); }
  body[data-page="website-design"] .pos-bottom { bottom: -22px; left: 50%; transform: translateX(-50%); }
  body[data-page="website-design"] .pos-left { left: -22px; top: 50%; transform: translateY(-50%); }

  body[data-page="website-design"] .orbit-icon {
    height: 44px;
    background: #111111;
    border: 1px solid #333333;
    border-radius: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    color: #ffffff;
    white-space: nowrap;
    transition: all 0.3s ease;
    z-index: 5;
    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
  }
  body[data-page="website-design"] .shopify-ring.r1 .orbit-icon { animation: spin-reverse 12s linear infinite; }
  body[data-page="website-design"] .shopify-ring.r2 .orbit-icon { animation: spin 20s linear infinite; }
  body[data-page="website-design"] .shopify-ring.r3 .orbit-icon { animation: spin-reverse 30s linear infinite; }

  body[data-page="website-design"] .orbit-icon svg { width: 20px; height: 20px; flex-shrink: 0; }

  body[data-page="website-design"] .orbit-text {
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    margin-left: 0;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }

  body[data-page="website-design"] .shopify-orbit:hover .orbit-icon {
    border-color: #FFC800;
    color: #FFC800;
    background: #1a1a1a;
    box-shadow: 0 0 20px rgba(255,200,0,0.3);
  }
  body[data-page="website-design"] .shopify-orbit:hover .orbit-text {
    max-width: 180px;
    opacity: 1;
    margin-left: 10px;
  }

 @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
 @keyframes spin-reverse { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }

  /* ============================================
     OUR WORK MARQUEE (Right to Left Continuous Scroll)
  ============================================ */
 @keyframes marqueeScroll {
   0% { transform: translateX(0); }
   100% { transform: translateX(-50%); }
  }

  body[data-page="website-design"] .work-marquee {
    display: flex;
    width: max-content;
    gap: 24px;
    animation: marqueeScroll 40s linear infinite;
  }

  body[data-page="website-design"] .work-marquee:hover {
    animation-play-state: paused;
  }

  body[data-page="website-design"] .work-card {
    width: 420px;
    flex-shrink: 0;
    background: #1a1a1a;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.08);
    transition: all 0.5s ease;
  }

  body[data-page="website-design"] .work-card:hover {
    border-color: rgba(255,200,0,0.4);
    transform: translateY(-8px);
  }

  body[data-page="website-design"] .work-card-image {
    height: 220px;
    width: 100%;
    overflow: hidden;
    position: relative;
  }

  body[data-page="website-design"] .work-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s ease;
  }

  body[data-page="website-design"] .work-card:hover .work-card-image img {
    transform: scale(1.08);
  }

  body[data-page="website-design"] .work-card-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent 60%);
  }

  /* ============================================
     FAQ ACCORDION
  ============================================ */
  body[data-page="website-design"] .faq-item {
    transition: all 0.4s ease;
  }

  body[data-page="website-design"] .faq-item.active {
    border-color: rgba(255, 200, 0, 0.4);
    background: #1e1e1e;
  }

  body[data-page="website-design"] .faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  }

  body[data-page="website-design"] .faq-item.active .faq-answer {
    max-height: 500px;
  }

  body[data-page="website-design"] .faq-icon {
    transition: transform 0.4s ease, background 0.4s ease;
  }

  body[data-page="website-design"] .faq-item.active .faq-icon {
    transform: rotate(45deg);
    background: #ffc600;
  }

  body[data-page="website-design"] .faq-item.active .faq-icon svg {
    color: #000;
  }


/* Page styles: shopify2 */

  /* ============================================
     SHOPIFY HERO ORBIT ANIMATION
  ============================================ */
  body[data-page="shopify2"] .shopify-orbit {
    position: relative;
    width: 450px;
    height: 450px;
  }
  
  body[data-page="shopify2"] .shopify-core {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 110px;
    height: 110px;
    background: #FFC800;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 60px 10px rgba(255, 200, 0, 0.4);
    z-index: 10;
  }

  body[data-page="shopify2"] .shopify-ring {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    border: 2px dashed rgba(255, 255, 255, 0.25);
    border-radius: 50%;
  }
  body[data-page="shopify2"] .shopify-ring.r1 { width: 200px; height: 200px; animation: spin 12s linear infinite; }
  body[data-page="shopify2"] .shopify-ring.r2 { width: 320px; height: 320px; animation: spin 20s linear infinite reverse; border-color: rgba(255, 200, 0, 0.25); }
  body[data-page="shopify2"] .shopify-ring.r3 { width: 450px; height: 450px; animation: spin 30s linear infinite; }

  body[data-page="shopify2"] .orbit-pos {
    position: absolute;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  body[data-page="shopify2"] .pos-top { top: -22px; left: 50%; transform: translateX(-50%); }
  body[data-page="shopify2"] .pos-right { right: -22px; top: 50%; transform: translateY(-50%); }
  body[data-page="shopify2"] .pos-bottom { bottom: -22px; left: 50%; transform: translateX(-50%); }

  body[data-page="shopify2"] .orbit-icon {
    height: 44px;
    background: #111111;
    border: 1px solid #333333;
    border-radius: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    color: #ffffff;
    white-space: nowrap;
    transition: all 0.3s ease;
    z-index: 5;
    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
  }
  body[data-page="shopify2"] .shopify-ring.r1 .orbit-icon { animation: spin-reverse 12s linear infinite; }
  body[data-page="shopify2"] .shopify-ring.r2 .orbit-icon { animation: spin 20s linear infinite; }
  body[data-page="shopify2"] .shopify-ring.r3 .orbit-icon { animation: spin-reverse 30s linear infinite; }

  body[data-page="shopify2"] .orbit-icon svg { width: 20px; height: 20px; flex-shrink: 0; }

  body[data-page="shopify2"] .orbit-text {
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    margin-left: 0;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }

  body[data-page="shopify2"] .shopify-orbit:hover .orbit-icon {
    border-color: #FFC800;
    color: #FFC800;
    background: #1a1a1a;
    box-shadow: 0 0 20px rgba(255,200,0,0.3);
  }
  body[data-page="shopify2"] .shopify-orbit:hover .orbit-text {
    max-width: 180px;
    opacity: 1;
    margin-left: 10px;
  }

 @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
 @keyframes spin-reverse { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }

  /* ============================================
     OUR WORK MARQUEE (Right to Left Continuous Scroll)
  ============================================ */
 @keyframes marqueeScroll {
   0% { transform: translateX(0); }
   100% { transform: translateX(-50%); }
  }

  body[data-page="shopify2"] .work-marquee {
    display: flex;
    width: max-content;
    gap: 24px;
    animation: marqueeScroll 40s linear infinite;
  }

  body[data-page="shopify2"] .work-marquee:hover {
    animation-play-state: paused;
  }

  body[data-page="shopify2"] .work-card {
    width: 420px;
    flex-shrink: 0;
    background: #1a1a1a;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.08);
    transition: all 0.5s ease;
  }

  body[data-page="shopify2"] .work-card:hover {
    border-color: rgba(255,200,0,0.4);
    transform: translateY(-8px);
  }

  body[data-page="shopify2"] .work-card-image {
    height: 220px;
    width: 100%;
    overflow: hidden;
    position: relative;
  }

  body[data-page="shopify2"] .work-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s ease;
  }

  body[data-page="shopify2"] .work-card:hover .work-card-image img {
    transform: scale(1.08);
  }

  body[data-page="shopify2"] .work-card-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent 60%);
  }

  /* ============================================
     FAQ ACCORDION
  ============================================ */
  body[data-page="shopify2"] .faq-item {
    transition: all 0.4s ease;
  }

  body[data-page="shopify2"] .faq-item.active {
    border-color: rgba(255, 200, 0, 0.4);
    background: #1e1e1e;
  }

  body[data-page="shopify2"] .faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  }

  body[data-page="shopify2"] .faq-item.active .faq-answer {
    max-height: 500px;
  }

  body[data-page="shopify2"] .faq-icon {
    transition: transform 0.4s ease, background 0.4s ease;
  }

  body[data-page="shopify2"] .faq-item.active .faq-icon {
    transform: rotate(45deg);
    background: #ffc600;
  }

  body[data-page="shopify2"] .faq-item.active .faq-icon svg {
    color: #000;
  }


/* Page styles: ecommerce-store */

  /* ============================================
     ECOMMERCE HERO ORBIT ANIMATION
  ============================================ */
  body[data-page="ecommerce-store"] .ecommerce-orbit {
    position: relative;
    width: 450px;
    height: 450px;
  }
  
  body[data-page="ecommerce-store"] .ecommerce-core {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 110px;
    height: 110px;
    background: #FFC800;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 60px 10px rgba(255, 200, 0, 0.4);
    z-index: 10;
  }

  body[data-page="ecommerce-store"] .ecommerce-ring {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    border: 2px dashed rgba(255, 255, 255, 0.25);
    border-radius: 50%;
  }
  body[data-page="ecommerce-store"] .ecommerce-ring.r1 { width: 200px; height: 200px; animation: spin 12s linear infinite; }
  body[data-page="ecommerce-store"] .ecommerce-ring.r2 { width: 320px; height: 320px; animation: spin 20s linear infinite reverse; border-color: rgba(255, 200, 0, 0.25); }
  body[data-page="ecommerce-store"] .ecommerce-ring.r3 { width: 450px; height: 450px; animation: spin 30s linear infinite; }

  body[data-page="ecommerce-store"] .orbit-pos {
    position: absolute;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  body[data-page="ecommerce-store"] .pos-top { top: -22px; left: 50%; transform: translateX(-50%); }
  body[data-page="ecommerce-store"] .pos-right { right: -22px; top: 50%; transform: translateY(-50%); }
  body[data-page="ecommerce-store"] .pos-bottom { bottom: -22px; left: 50%; transform: translateX(-50%); }

  body[data-page="ecommerce-store"] .orbit-icon {
    height: 44px;
    background: #111111;
    border: 1px solid #333333;
    border-radius: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    color: #ffffff;
    white-space: nowrap;
    transition: all 0.3s ease;
    z-index: 5;
    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
  }
  body[data-page="ecommerce-store"] .ecommerce-ring.r1 .orbit-icon { animation: spin-reverse 12s linear infinite; }
  body[data-page="ecommerce-store"] .ecommerce-ring.r2 .orbit-icon { animation: spin 20s linear infinite; }
  body[data-page="ecommerce-store"] .ecommerce-ring.r3 .orbit-icon { animation: spin-reverse 30s linear infinite; }

  body[data-page="ecommerce-store"] .orbit-icon svg { width: 20px; height: 20px; flex-shrink: 0; }

  body[data-page="ecommerce-store"] .orbit-text {
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    margin-left: 0;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }

  body[data-page="ecommerce-store"] .ecommerce-orbit:hover .orbit-icon {
    border-color: #FFC800;
    color: #FFC800;
    background: #1a1a1a;
    box-shadow: 0 0 20px rgba(255,200,0,0.3);
  }
  body[data-page="ecommerce-store"] .ecommerce-orbit:hover .orbit-text {
    max-width: 180px;
    opacity: 1;
    margin-left: 10px;
  }

@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes spin-reverse { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }

  /* ============================================
     OUR WORK MARQUEE (Right to Left Continuous Scroll)
  ============================================ */
@keyframes marqueeScroll {
   0% { transform: translateX(0); }
   100% { transform: translateX(-50%); }
  }

  body[data-page="ecommerce-store"] .work-marquee {
    display: flex;
    width: max-content;
    gap: 24px;
    animation: marqueeScroll 40s linear infinite;
  }

  body[data-page="ecommerce-store"] .work-marquee:hover {
    animation-play-state: paused;
  }

  body[data-page="ecommerce-store"] .work-card {
    width: 420px;
    flex-shrink: 0;
    background: #1a1a1a;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.08);
    transition: all 0.5s ease;
  }

  body[data-page="ecommerce-store"] .work-card:hover {
    border-color: rgba(255,200,0,0.4);
    transform: translateY(-8px);
  }

  body[data-page="ecommerce-store"] .work-card-image {
    height: 220px;
    width: 100%;
    overflow: hidden;
    position: relative;
  }

  body[data-page="ecommerce-store"] .work-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s ease;
  }

  body[data-page="ecommerce-store"] .work-card:hover .work-card-image img {
    transform: scale(1.08);
  }

  body[data-page="ecommerce-store"] .work-card-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent 60%);
  }

  /* ============================================
     FAQ ACCORDION
  ============================================ */
  body[data-page="ecommerce-store"] .faq-item {
    transition: all 0.4s ease;
  }

  body[data-page="ecommerce-store"] .faq-item.active {
    border-color: rgba(255, 200, 0, 0.4);
    background: #1e1e1e;
  }

  body[data-page="ecommerce-store"] .faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  }

  body[data-page="ecommerce-store"] .faq-item.active .faq-answer {
    max-height: 500px;
  }

  body[data-page="ecommerce-store"] .faq-icon {
    transition: transform 0.4s ease, background 0.4s ease;
  }

  body[data-page="ecommerce-store"] .faq-item.active .faq-icon {
    transform: rotate(45deg);
    background: #ffc600;
  }

  body[data-page="ecommerce-store"] .faq-item.active .faq-icon svg {
    color: #000;
  }


/* Page styles: shopify */

  /* ============================================
     SHOPIFY HERO ORBIT ANIMATION
  ============================================ */
  body[data-page="shopify"] .shopify-orbit {
    position: relative;
    width: 450px;
    height: 450px;
  }
  
  body[data-page="shopify"] .shopify-core {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 110px;
    height: 110px;
    background: #FFC800;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 60px 10px rgba(255, 200, 0, 0.4);
    z-index: 10;
  }

  body[data-page="shopify"] .shopify-ring {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    border: 2px dashed rgba(255, 255, 255, 0.25);
    border-radius: 50%;
  }
  body[data-page="shopify"] .shopify-ring.r1 { width: 200px; height: 200px; animation: spin 12s linear infinite; }
  body[data-page="shopify"] .shopify-ring.r2 { width: 320px; height: 320px; animation: spin 20s linear infinite reverse; border-color: rgba(255, 200, 0, 0.25); }
  body[data-page="shopify"] .shopify-ring.r3 { width: 450px; height: 450px; animation: spin 30s linear infinite; }

  body[data-page="shopify"] .orbit-pos {
    position: absolute;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  body[data-page="shopify"] .pos-top { top: -22px; left: 50%; transform: translateX(-50%); }
  body[data-page="shopify"] .pos-right { right: -22px; top: 50%; transform: translateY(-50%); }
  body[data-page="shopify"] .pos-bottom { bottom: -22px; left: 50%; transform: translateX(-50%); }

  body[data-page="shopify"] .orbit-icon {
    height: 44px;
    background: #111111;
    border: 1px solid #333333;
    border-radius: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    color: #ffffff;
    white-space: nowrap;
    transition: all 0.3s ease;
    z-index: 5;
    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
  }
  body[data-page="shopify"] .shopify-ring.r1 .orbit-icon { animation: spin-reverse 12s linear infinite; }
  body[data-page="shopify"] .shopify-ring.r2 .orbit-icon { animation: spin 20s linear infinite; }
  body[data-page="shopify"] .shopify-ring.r3 .orbit-icon { animation: spin-reverse 30s linear infinite; }

  body[data-page="shopify"] .orbit-icon svg { width: 20px; height: 20px; flex-shrink: 0; }

  body[data-page="shopify"] .orbit-text {
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    margin-left: 0;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }

  body[data-page="shopify"] .shopify-orbit:hover .orbit-icon {
    border-color: #FFC800;
    color: #FFC800;
    background: #1a1a1a;
    box-shadow: 0 0 20px rgba(255,200,0,0.3);
  }
  body[data-page="shopify"] .shopify-orbit:hover .orbit-text {
    max-width: 180px;
    opacity: 1;
    margin-left: 10px;
  }

 @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
 @keyframes spin-reverse { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }

  /* ============================================
     OUR WORK MARQUEE (Right to Left Continuous Scroll)
  ============================================ */
 @keyframes marqueeScroll {
   0% { transform: translateX(0); }
   100% { transform: translateX(-50%); }
  }

  body[data-page="shopify"] .work-marquee {
    display: flex;
    width: max-content;
    gap: 24px;
    animation: marqueeScroll 40s linear infinite;
  }

  body[data-page="shopify"] .work-marquee:hover {
    animation-play-state: paused;
  }

  body[data-page="shopify"] .work-card {
    width: 420px;
    flex-shrink: 0;
    background: #1a1a1a;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.08);
    transition: all 0.5s ease;
  }

  body[data-page="shopify"] .work-card:hover {
    border-color: rgba(255,200,0,0.4);
    transform: translateY(-8px);
  }

  body[data-page="shopify"] .work-card-image {
    height: 220px;
    width: 100%;
    overflow: hidden;
    position: relative;
  }

  body[data-page="shopify"] .work-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s ease;
  }

  body[data-page="shopify"] .work-card:hover .work-card-image img {
    transform: scale(1.08);
  }

  body[data-page="shopify"] .work-card-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent 60%);
  }

  /* ============================================
     FAQ ACCORDION
  ============================================ */
  body[data-page="shopify"] .faq-item {
    transition: all 0.4s ease;
  }

  body[data-page="shopify"] .faq-item.active {
    border-color: rgba(255, 200, 0, 0.4);
    background: #1e1e1e;
  }

  body[data-page="shopify"] .faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  }

  body[data-page="shopify"] .faq-item.active .faq-answer {
    max-height: 500px;
  }

  body[data-page="shopify"] .faq-icon {
    transition: transform 0.4s ease, background 0.4s ease;
  }

  body[data-page="shopify"] .faq-item.active .faq-icon {
    transform: rotate(45deg);
    background: #ffc600;
  }

  body[data-page="shopify"] .faq-item.active .faq-icon svg {
    color: #000;
  }


/* Page styles: webflow-development */

  /* ============================================
     WEBFLOW HERO ORBIT ANIMATION
  ============================================ */
  body[data-page="webflow-development"] .webflow-orbit {
    position: relative;
    width: 450px;
    height: 450px;
  }
  
  body[data-page="webflow-development"] .webflow-core {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 110px;
    height: 110px;
    background: #FFC800;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 60px 10px rgba(255, 200, 0, 0.4);
    z-index: 10;
  }

  body[data-page="webflow-development"] .webflow-ring {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    border: 2px dashed rgba(255, 255, 255, 0.25);
    border-radius: 50%;
  }
  body[data-page="webflow-development"] .webflow-ring.r1 { width: 200px; height: 200px; animation: spin 12s linear infinite; }
  body[data-page="webflow-development"] .webflow-ring.r2 { width: 320px; height: 320px; animation: spin 20s linear infinite reverse; border-color: rgba(255, 200, 0, 0.25); }
  body[data-page="webflow-development"] .webflow-ring.r3 { width: 450px; height: 450px; animation: spin 30s linear infinite; }

  body[data-page="webflow-development"] .orbit-pos {
    position: absolute;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  body[data-page="webflow-development"] .pos-top { top: -22px; left: 50%; transform: translateX(-50%); }
  body[data-page="webflow-development"] .pos-right { right: -22px; top: 50%; transform: translateY(-50%); }
  body[data-page="webflow-development"] .pos-bottom { bottom: -22px; left: 50%; transform: translateX(-50%); }

  body[data-page="webflow-development"] .orbit-icon {
    height: 44px;
    background: #111111;
    border: 1px solid #333333;
    border-radius: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    color: #ffffff;
    white-space: nowrap;
    transition: all 0.3s ease;
    z-index: 5;
    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
  }
  body[data-page="webflow-development"] .webflow-ring.r1 .orbit-icon { animation: spin-reverse 12s linear infinite; }
  body[data-page="webflow-development"] .webflow-ring.r2 .orbit-icon { animation: spin 20s linear infinite; }
  body[data-page="webflow-development"] .webflow-ring.r3 .orbit-icon { animation: spin-reverse 30s linear infinite; }

  body[data-page="webflow-development"] .orbit-icon svg { width: 20px; height: 20px; flex-shrink: 0; }

  body[data-page="webflow-development"] .orbit-text {
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    margin-left: 0;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }

  body[data-page="webflow-development"] .webflow-orbit:hover .orbit-icon {
    border-color: #FFC800;
    color: #FFC800;
    background: #1a1a1a;
    box-shadow: 0 0 20px rgba(255,200,0,0.3);
  }
  body[data-page="webflow-development"] .webflow-orbit:hover .orbit-text {
    max-width: 180px;
    opacity: 1;
    margin-left: 10px;
  }

 @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
 @keyframes spin-reverse { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }

  /* ============================================
     OUR WORK MARQUEE (Right to Left Continuous Scroll)
  ============================================ */
 @keyframes marqueeScroll {
   0% { transform: translateX(0); }
   100% { transform: translateX(-50%); }
  }

  body[data-page="webflow-development"] .work-marquee {
    display: flex;
    width: max-content;
    gap: 24px;
    animation: marqueeScroll 40s linear infinite;
  }

  body[data-page="webflow-development"] .work-marquee:hover {
    animation-play-state: paused;
  }

  body[data-page="webflow-development"] .work-card {
    width: 420px;
    flex-shrink: 0;
    background: #1a1a1a;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.08);
    transition: all 0.5s ease;
  }

  body[data-page="webflow-development"] .work-card:hover {
    border-color: rgba(255,200,0,0.4);
    transform: translateY(-8px);
  }

  body[data-page="webflow-development"] .work-card-image {
    height: 220px;
    width: 100%;
    overflow: hidden;
    position: relative;
  }

  body[data-page="webflow-development"] .work-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s ease;
  }

  body[data-page="webflow-development"] .work-card:hover .work-card-image img {
    transform: scale(1.08);
  }

  body[data-page="webflow-development"] .work-card-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent 60%);
  }

  /* ============================================
     FAQ ACCORDION
  ============================================ */
  body[data-page="webflow-development"] .faq-item {
    transition: all 0.4s ease;
  }

  body[data-page="webflow-development"] .faq-item.active {
    border-color: rgba(255, 200, 0, 0.4);
    background: #1e1e1e;
  }

  body[data-page="webflow-development"] .faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  }

  body[data-page="webflow-development"] .faq-item.active .faq-answer {
    max-height: 500px;
  }

  body[data-page="webflow-development"] .faq-icon {
    transition: transform 0.4s ease, background 0.4s ease;
  }

  body[data-page="webflow-development"] .faq-item.active .faq-icon {
    transform: rotate(45deg);
    background: #ffc600;
  }

  body[data-page="webflow-development"] .faq-item.active .faq-icon svg {
    color: #000;
  }


/* Page styles: website-maintenance */

  /* ============================================
     WEBSITE MAINTENANCE HERO ORBIT ANIMATION
  ============================================ */
  body[data-page="website-maintenance"] .shopify-orbit {
    position: relative;
    width: 450px;
    height: 450px;
  }
  
  body[data-page="website-maintenance"] .shopify-core {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 110px;
    height: 110px;
    background: #FFC800;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 60px 10px rgba(255, 200, 0, 0.4);
    z-index: 10;
  }

  body[data-page="website-maintenance"] .shopify-ring {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    border: 2px dashed rgba(255, 255, 255, 0.25);
    border-radius: 50%;
  }
  body[data-page="website-maintenance"] .shopify-ring.r1 { width: 200px; height: 200px; animation: spin 12s linear infinite; }
  body[data-page="website-maintenance"] .shopify-ring.r2 { width: 320px; height: 320px; animation: spin 20s linear infinite reverse; border-color: rgba(255, 200, 0, 0.25); }
  body[data-page="website-maintenance"] .shopify-ring.r3 { width: 450px; height: 450px; animation: spin 30s linear infinite; }

  body[data-page="website-maintenance"] .orbit-pos {
    position: absolute;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  body[data-page="website-maintenance"] .pos-top { top: -22px; left: 50%; transform: translateX(-50%); }
  body[data-page="website-maintenance"] .pos-right { right: -22px; top: 50%; transform: translateY(-50%); }
  body[data-page="website-maintenance"] .pos-bottom { bottom: -22px; left: 50%; transform: translateX(-50%); }
  body[data-page="website-maintenance"] .pos-left { left: -22px; top: 50%; transform: translateY(-50%); }

  body[data-page="website-maintenance"] .orbit-icon {
    height: 44px;
    background: #111111;
    border: 1px solid #333333;
    border-radius: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    color: #ffffff;
    white-space: nowrap;
    transition: all 0.3s ease;
    z-index: 5;
    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
  }
  body[data-page="website-maintenance"] .shopify-ring.r1 .orbit-icon { animation: spin-reverse 12s linear infinite; }
  body[data-page="website-maintenance"] .shopify-ring.r2 .orbit-icon { animation: spin 20s linear infinite; }
  body[data-page="website-maintenance"] .shopify-ring.r3 .orbit-icon { animation: spin-reverse 30s linear infinite; }

  body[data-page="website-maintenance"] .orbit-icon svg { width: 20px; height: 20px; flex-shrink: 0; }

  body[data-page="website-maintenance"] .orbit-text {
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    margin-left: 0;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }

  body[data-page="website-maintenance"] .shopify-orbit:hover .orbit-icon {
    border-color: #FFC800;
    color: #FFC800;
    background: #1a1a1a;
    box-shadow: 0 0 20px rgba(255,200,0,0.3);
  }
  body[data-page="website-maintenance"] .shopify-orbit:hover .orbit-text {
    max-width: 180px;
    opacity: 1;
    margin-left: 10px;
  }

 @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
 @keyframes spin-reverse { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }

  /* ============================================
     OUR WORK MARQUEE (Right to Left Continuous Scroll)
  ============================================ */
 @keyframes marqueeScroll {
   0% { transform: translateX(0); }
   100% { transform: translateX(-50%); }
  }

  body[data-page="website-maintenance"] .work-marquee {
    display: flex;
    width: max-content;
    gap: 24px;
    animation: marqueeScroll 40s linear infinite;
  }

  body[data-page="website-maintenance"] .work-marquee:hover {
    animation-play-state: paused;
  }

  body[data-page="website-maintenance"] .work-card {
    width: 420px;
    flex-shrink: 0;
    background: #1a1a1a;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.08);
    transition: all 0.5s ease;
  }

  body[data-page="website-maintenance"] .work-card:hover {
    border-color: rgba(255,200,0,0.4);
    transform: translateY(-8px);
  }

  body[data-page="website-maintenance"] .work-card-image {
    height: 220px;
    width: 100%;
    overflow: hidden;
    position: relative;
  }

  body[data-page="website-maintenance"] .work-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s ease;
  }

  body[data-page="website-maintenance"] .work-card:hover .work-card-image img {
    transform: scale(1.08);
  }

  body[data-page="website-maintenance"] .work-card-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent 60%);
  }

  /* ============================================
     FAQ ACCORDION
  ============================================ */
  body[data-page="website-maintenance"] .faq-item {
    transition: all 0.4s ease;
  }

  body[data-page="website-maintenance"] .faq-item.active {
    border-color: rgba(255, 200, 0, 0.4);
    background: #1e1e1e;
  }

  body[data-page="website-maintenance"] .faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  }

  body[data-page="website-maintenance"] .faq-item.active .faq-answer {
    max-height: 500px;
  }

  body[data-page="website-maintenance"] .faq-icon {
    transition: transform 0.4s ease, background 0.4s ease;
  }

  body[data-page="website-maintenance"] .faq-item.active .faq-icon {
    transform: rotate(45deg);
    background: #ffc600;
  }

  body[data-page="website-maintenance"] .faq-item.active .faq-icon svg {
    color: #000;
  }


/* Page styles: website-redesign */

  /* ============================================
     WEBSITE REDESIGN HERO ORBIT ANIMATION
  ============================================ */
  body[data-page="website-redesign"] .shopify-orbit {
    position: relative;
    width: 450px;
    height: 450px;
  }
  
  body[data-page="website-redesign"] .shopify-core {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 110px;
    height: 110px;
    background: #FFC800;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 60px 10px rgba(255, 200, 0, 0.4);
    z-index: 10;
  }

  body[data-page="website-redesign"] .shopify-ring {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    border: 2px dashed rgba(255, 255, 255, 0.25);
    border-radius: 50%;
  }
  body[data-page="website-redesign"] .shopify-ring.r1 { width: 200px; height: 200px; animation: spin 12s linear infinite; }
  body[data-page="website-redesign"] .shopify-ring.r2 { width: 320px; height: 320px; animation: spin 20s linear infinite reverse; border-color: rgba(255, 200, 0, 0.25); }
  body[data-page="website-redesign"] .shopify-ring.r3 { width: 450px; height: 450px; animation: spin 30s linear infinite; }

  body[data-page="website-redesign"] .orbit-pos {
    position: absolute;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  body[data-page="website-redesign"] .pos-top { top: -22px; left: 50%; transform: translateX(-50%); }
  body[data-page="website-redesign"] .pos-right { right: -22px; top: 50%; transform: translateY(-50%); }
  body[data-page="website-redesign"] .pos-bottom { bottom: -22px; left: 50%; transform: translateX(-50%); }
  body[data-page="website-redesign"] .pos-left { left: -22px; top: 50%; transform: translateY(-50%); }

  body[data-page="website-redesign"] .orbit-icon {
    height: 44px;
    background: #111111;
    border: 1px solid #333333;
    border-radius: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    color: #ffffff;
    white-space: nowrap;
    transition: all 0.3s ease;
    z-index: 5;
    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
  }
  body[data-page="website-redesign"] .shopify-ring.r1 .orbit-icon { animation: spin-reverse 12s linear infinite; }
  body[data-page="website-redesign"] .shopify-ring.r2 .orbit-icon { animation: spin 20s linear infinite; }
  body[data-page="website-redesign"] .shopify-ring.r3 .orbit-icon { animation: spin-reverse 30s linear infinite; }

  body[data-page="website-redesign"] .orbit-icon svg { width: 20px; height: 20px; flex-shrink: 0; }

  body[data-page="website-redesign"] .orbit-text {
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    margin-left: 0;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }

  body[data-page="website-redesign"] .shopify-orbit:hover .orbit-icon {
    border-color: #FFC800;
    color: #FFC800;
    background: #1a1a1a;
    box-shadow: 0 0 20px rgba(255,200,0,0.3);
  }
  body[data-page="website-redesign"] .shopify-orbit:hover .orbit-text {
    max-width: 180px;
    opacity: 1;
    margin-left: 10px;
  }

 @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
 @keyframes spin-reverse { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }

  /* ============================================
     OUR WORK MARQUEE (Right to Left Continuous Scroll)
  ============================================ */
 @keyframes marqueeScroll {
   0% { transform: translateX(0); }
   100% { transform: translateX(-50%); }
  }

  body[data-page="website-redesign"] .work-marquee {
    display: flex;
    width: max-content;
    gap: 24px;
    animation: marqueeScroll 40s linear infinite;
  }

  body[data-page="website-redesign"] .work-marquee:hover {
    animation-play-state: paused;
  }

  body[data-page="website-redesign"] .work-card {
    width: 420px;
    flex-shrink: 0;
    background: #1a1a1a;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.08);
    transition: all 0.5s ease;
  }

  body[data-page="website-redesign"] .work-card:hover {
    border-color: rgba(255,200,0,0.4);
    transform: translateY(-8px);
  }

  body[data-page="website-redesign"] .work-card-image {
    height: 220px;
    width: 100%;
    overflow: hidden;
    position: relative;
  }

  body[data-page="website-redesign"] .work-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s ease;
  }

  body[data-page="website-redesign"] .work-card:hover .work-card-image img {
    transform: scale(1.08);
  }

  body[data-page="website-redesign"] .work-card-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent 60%);
  }

  /* ============================================
     FAQ ACCORDION
  ============================================ */
  body[data-page="website-redesign"] .faq-item {
    transition: all 0.4s ease;
  }

  body[data-page="website-redesign"] .faq-item.active {
    border-color: rgba(255, 200, 0, 0.4);
    background: #1e1e1e;
  }

  body[data-page="website-redesign"] .faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  }

  body[data-page="website-redesign"] .faq-item.active .faq-answer {
    max-height: 500px;
  }

  body[data-page="website-redesign"] .faq-icon {
    transition: transform 0.4s ease, background 0.4s ease;
  }

  body[data-page="website-redesign"] .faq-item.active .faq-icon {
    transform: rotate(45deg);
    background: #ffc600;
  }

  body[data-page="website-redesign"] .faq-item.active .faq-icon svg {
    color: #000;
  }


/* Page styles: wordpress-development */

  /* ============================================
     WORDPRESS HERO ORBIT ANIMATION
  ============================================ */
  body[data-page="wordpress-development"] .shopify-orbit {
    position: relative;
    width: 450px;
    height: 450px;
  }
  
  body[data-page="wordpress-development"] .shopify-core {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 110px;
    height: 110px;
    background: #FFC800;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 60px 10px rgba(255, 200, 0, 0.4);
    z-index: 10;
  }

  body[data-page="wordpress-development"] .shopify-ring {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    border: 2px dashed rgba(255, 255, 255, 0.25);
    border-radius: 50%;
  }
  body[data-page="wordpress-development"] .shopify-ring.r1 { width: 200px; height: 200px; animation: spin 12s linear infinite; }
  body[data-page="wordpress-development"] .shopify-ring.r2 { width: 320px; height: 320px; animation: spin 20s linear infinite reverse; border-color: rgba(255, 200, 0, 0.25); }
  body[data-page="wordpress-development"] .shopify-ring.r3 { width: 450px; height: 450px; animation: spin 30s linear infinite; }

  body[data-page="wordpress-development"] .orbit-pos {
    position: absolute;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  body[data-page="wordpress-development"] .pos-top { top: -22px; left: 50%; transform: translateX(-50%); }
  body[data-page="wordpress-development"] .pos-right { right: -22px; top: 50%; transform: translateY(-50%); }
  body[data-page="wordpress-development"] .pos-bottom { bottom: -22px; left: 50%; transform: translateX(-50%); }
  body[data-page="wordpress-development"] .pos-left { left: -22px; top: 50%; transform: translateY(-50%); }

  body[data-page="wordpress-development"] .orbit-icon {
    height: 44px;
    background: #111111;
    border: 1px solid #333333;
    border-radius: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    color: #ffffff;
    white-space: nowrap;
    transition: all 0.3s ease;
    z-index: 5;
    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
  }
  body[data-page="wordpress-development"] .shopify-ring.r1 .orbit-icon { animation: spin-reverse 12s linear infinite; }
  body[data-page="wordpress-development"] .shopify-ring.r2 .orbit-icon { animation: spin 20s linear infinite; }
  body[data-page="wordpress-development"] .shopify-ring.r3 .orbit-icon { animation: spin-reverse 30s linear infinite; }

  body[data-page="wordpress-development"] .orbit-icon svg { width: 20px; height: 20px; flex-shrink: 0; }

  body[data-page="wordpress-development"] .orbit-text {
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    margin-left: 0;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }

  body[data-page="wordpress-development"] .shopify-orbit:hover .orbit-icon {
    border-color: #FFC800;
    color: #FFC800;
    background: #1a1a1a;
    box-shadow: 0 0 20px rgba(255,200,0,0.3);
  }
  body[data-page="wordpress-development"] .shopify-orbit:hover .orbit-text {
    max-width: 180px;
    opacity: 1;
    margin-left: 10px;
  }

 @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
 @keyframes spin-reverse { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }

  /* ============================================
     OUR WORK MARQUEE (Right to Left Continuous Scroll)
  ============================================ */
 @keyframes marqueeScroll {
   0% { transform: translateX(0); }
   100% { transform: translateX(-50%); }
  }

  body[data-page="wordpress-development"] .work-marquee {
    display: flex;
    width: max-content;
    gap: 24px;
    animation: marqueeScroll 40s linear infinite;
  }

  body[data-page="wordpress-development"] .work-marquee:hover {
    animation-play-state: paused;
  }

  body[data-page="wordpress-development"] .work-card {
    width: 420px;
    flex-shrink: 0;
    background: #1a1a1a;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.08);
    transition: all 0.5s ease;
  }

  body[data-page="wordpress-development"] .work-card:hover {
    border-color: rgba(255,200,0,0.4);
    transform: translateY(-8px);
  }

  body[data-page="wordpress-development"] .work-card-image {
    height: 220px;
    width: 100%;
    overflow: hidden;
    position: relative;
  }

  body[data-page="wordpress-development"] .work-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s ease;
  }

  body[data-page="wordpress-development"] .work-card:hover .work-card-image img {
    transform: scale(1.08);
  }

  body[data-page="wordpress-development"] .work-card-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent 60%);
  }

  /* ============================================
     FAQ ACCORDION
  ============================================ */
  body[data-page="wordpress-development"] .faq-item {
    transition: all 0.4s ease;
  }

  body[data-page="wordpress-development"] .faq-item.active {
    border-color: rgba(255, 200, 0, 0.4);
    background: #1e1e1e;
  }

  body[data-page="wordpress-development"] .faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  }

  body[data-page="wordpress-development"] .faq-item.active .faq-answer {
    max-height: 500px;
  }

  body[data-page="wordpress-development"] .faq-icon {
    transition: transform 0.4s ease, background 0.4s ease;
  }

  body[data-page="wordpress-development"] .faq-item.active .faq-icon {
    transform: rotate(45deg);
    background: #ffc600;
  }

  body[data-page="wordpress-development"] .faq-item.active .faq-icon svg {
    color: #000;
  }

/* SHARED HEADER */
#site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1000;
  background: #000;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
  transform: translateY(0);
}

#site-header.is-hidden {
  transform: translateY(-110%);
}

body {
  padding-top: 108px;
}

@media (min-width: 640px) {
  body {
    padding-top: 116px;
  }
}

@media (min-width: 1024px) {
  body {
    padding-top: 130px;
  }
}

/* SHARED FOOTER MARQUEE */
@keyframes mozack-marquee {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-33.333333%);
  }
}

.animate-marquee {
  animation: mozack-marquee 5s linear infinite;
  will-change: transform;
}

.animate-marquee:hover {
  animation-play-state: paused;
}

/* Sticky work cards on design and web-development service pages */
body[data-page="logo-design-branding"] #dev-portfolio,
body[data-page="ui-ux-design"] #dev-portfolio,
body[data-page="website-design"] #dev-portfolio,
body[data-page="ecommerce-store"] #dev-portfolio,
body[data-page="shopify"] #dev-portfolio,
body[data-page="webflow-development"] #dev-portfolio,
body[data-page="website-maintenance"] #dev-portfolio,
body[data-page="website-redesign"] #dev-portfolio,
body[data-page="wordpress-development"] #dev-portfolio {
  overflow: visible;
}

body[data-page="logo-design-branding"] #dev-portfolio .relative.mt-16,
body[data-page="ui-ux-design"] #dev-portfolio .relative.mt-16,
body[data-page="website-design"] #dev-portfolio .relative.mt-16,
body[data-page="ecommerce-store"] #dev-portfolio .relative.mt-16,
body[data-page="shopify"] #dev-portfolio .relative.mt-16,
body[data-page="webflow-development"] #dev-portfolio .relative.mt-16,
body[data-page="website-maintenance"] #dev-portfolio .relative.mt-16,
body[data-page="website-redesign"] #dev-portfolio .relative.mt-16,
body[data-page="wordpress-development"] #dev-portfolio .relative.mt-16 {
  margin-top: 0;
  overflow: visible;
}

body[data-page="logo-design-branding"] #dev-portfolio .relative.mt-16 > .pointer-events-none,
body[data-page="ui-ux-design"] #dev-portfolio .relative.mt-16 > .pointer-events-none,
body[data-page="website-design"] #dev-portfolio .relative.mt-16 > .pointer-events-none,
body[data-page="ecommerce-store"] #dev-portfolio .relative.mt-16 > .pointer-events-none,
body[data-page="shopify"] #dev-portfolio .relative.mt-16 > .pointer-events-none,
body[data-page="webflow-development"] #dev-portfolio .relative.mt-16 > .pointer-events-none,
body[data-page="website-maintenance"] #dev-portfolio .relative.mt-16 > .pointer-events-none,
body[data-page="website-redesign"] #dev-portfolio .relative.mt-16 > .pointer-events-none,
body[data-page="wordpress-development"] #dev-portfolio .relative.mt-16 > .pointer-events-none {
  display: none;
}

body[data-page="logo-design-branding"] #dev-portfolio .work-marquee,
body[data-page="ui-ux-design"] #dev-portfolio .work-marquee,
body[data-page="website-design"] #dev-portfolio .work-marquee,
body[data-page="ecommerce-store"] #dev-portfolio .work-marquee,
body[data-page="shopify"] #dev-portfolio .work-marquee,
body[data-page="webflow-development"] #dev-portfolio .work-marquee,
body[data-page="website-maintenance"] #dev-portfolio .work-marquee,
body[data-page="website-redesign"] #dev-portfolio .work-marquee,
body[data-page="wordpress-development"] #dev-portfolio .work-marquee {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 0;
  animation: none;
}

body[data-page="logo-design-branding"] #dev-portfolio .work-card,
body[data-page="ui-ux-design"] #dev-portfolio .work-card,
body[data-page="website-design"] #dev-portfolio .work-card,
body[data-page="ecommerce-store"] #dev-portfolio .work-card,
body[data-page="shopify"] #dev-portfolio .work-card,
body[data-page="webflow-development"] #dev-portfolio .work-card,
body[data-page="website-maintenance"] #dev-portfolio .work-card,
body[data-page="website-redesign"] #dev-portfolio .work-card,
body[data-page="wordpress-development"] #dev-portfolio .work-card {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column-reverse;
  width: 100%;
  max-width: 1046px;
  min-height: 360px;
  height: auto;
  margin: 0 auto 90px;
  flex-shrink: 0;
  background: #222;
  border-radius: 16px;
}

body[data-page="logo-design-branding"] #dev-portfolio .work-card:nth-child(1),
body[data-page="ui-ux-design"] #dev-portfolio .work-card:nth-child(1),
body[data-page="website-design"] #dev-portfolio .work-card:nth-child(1),
body[data-page="ecommerce-store"] #dev-portfolio .work-card:nth-child(1),
body[data-page="shopify"] #dev-portfolio .work-card:nth-child(1),
body[data-page="webflow-development"] #dev-portfolio .work-card:nth-child(1),
body[data-page="website-maintenance"] #dev-portfolio .work-card:nth-child(1),
body[data-page="website-redesign"] #dev-portfolio .work-card:nth-child(1),
body[data-page="wordpress-development"] #dev-portfolio .work-card:nth-child(1) { z-index: 20; }

body[data-page="logo-design-branding"] #dev-portfolio .work-card:nth-child(2),
body[data-page="ui-ux-design"] #dev-portfolio .work-card:nth-child(2),
body[data-page="website-design"] #dev-portfolio .work-card:nth-child(2),
body[data-page="ecommerce-store"] #dev-portfolio .work-card:nth-child(2),
body[data-page="shopify"] #dev-portfolio .work-card:nth-child(2),
body[data-page="webflow-development"] #dev-portfolio .work-card:nth-child(2),
body[data-page="website-maintenance"] #dev-portfolio .work-card:nth-child(2),
body[data-page="website-redesign"] #dev-portfolio .work-card:nth-child(2),
body[data-page="wordpress-development"] #dev-portfolio .work-card:nth-child(2) { z-index: 30; }

body[data-page="logo-design-branding"] #dev-portfolio .work-card:nth-child(3),
body[data-page="ui-ux-design"] #dev-portfolio .work-card:nth-child(3),
body[data-page="website-design"] #dev-portfolio .work-card:nth-child(3),
body[data-page="ecommerce-store"] #dev-portfolio .work-card:nth-child(3),
body[data-page="shopify"] #dev-portfolio .work-card:nth-child(3),
body[data-page="webflow-development"] #dev-portfolio .work-card:nth-child(3),
body[data-page="website-maintenance"] #dev-portfolio .work-card:nth-child(3),
body[data-page="website-redesign"] #dev-portfolio .work-card:nth-child(3),
body[data-page="wordpress-development"] #dev-portfolio .work-card:nth-child(3) { z-index: 40; }

body[data-page="logo-design-branding"] #dev-portfolio .work-card:nth-child(4),
body[data-page="ui-ux-design"] #dev-portfolio .work-card:nth-child(4),
body[data-page="website-design"] #dev-portfolio .work-card:nth-child(4),
body[data-page="ecommerce-store"] #dev-portfolio .work-card:nth-child(4),
body[data-page="shopify"] #dev-portfolio .work-card:nth-child(4),
body[data-page="webflow-development"] #dev-portfolio .work-card:nth-child(4),
body[data-page="website-maintenance"] #dev-portfolio .work-card:nth-child(4),
body[data-page="website-redesign"] #dev-portfolio .work-card:nth-child(4),
body[data-page="wordpress-development"] #dev-portfolio .work-card:nth-child(4) { z-index: 50; }

body[data-page="logo-design-branding"] #dev-portfolio .work-card:nth-child(5),
body[data-page="ui-ux-design"] #dev-portfolio .work-card:nth-child(5),
body[data-page="website-design"] #dev-portfolio .work-card:nth-child(5),
body[data-page="ecommerce-store"] #dev-portfolio .work-card:nth-child(5),
body[data-page="shopify"] #dev-portfolio .work-card:nth-child(5),
body[data-page="webflow-development"] #dev-portfolio .work-card:nth-child(5),
body[data-page="website-maintenance"] #dev-portfolio .work-card:nth-child(5),
body[data-page="website-redesign"] #dev-portfolio .work-card:nth-child(5),
body[data-page="wordpress-development"] #dev-portfolio .work-card:nth-child(5) { z-index: 60; }

body[data-page="logo-design-branding"] #dev-portfolio .work-card:nth-child(6),
body[data-page="ui-ux-design"] #dev-portfolio .work-card:nth-child(6),
body[data-page="website-design"] #dev-portfolio .work-card:nth-child(6),
body[data-page="ecommerce-store"] #dev-portfolio .work-card:nth-child(6),
body[data-page="shopify"] #dev-portfolio .work-card:nth-child(6),
body[data-page="webflow-development"] #dev-portfolio .work-card:nth-child(6),
body[data-page="website-maintenance"] #dev-portfolio .work-card:nth-child(6),
body[data-page="website-redesign"] #dev-portfolio .work-card:nth-child(6),
body[data-page="wordpress-development"] #dev-portfolio .work-card:nth-child(6) { z-index: 70; }

body[data-page="logo-design-branding"] #dev-portfolio .work-card > .p-6,
body[data-page="ui-ux-design"] #dev-portfolio .work-card > .p-6,
body[data-page="website-design"] #dev-portfolio .work-card > .p-6,
body[data-page="ecommerce-store"] #dev-portfolio .work-card > .p-6,
body[data-page="shopify"] #dev-portfolio .work-card > .p-6,
body[data-page="webflow-development"] #dev-portfolio .work-card > .p-6,
body[data-page="website-maintenance"] #dev-portfolio .work-card > .p-6,
body[data-page="website-redesign"] #dev-portfolio .work-card > .p-6,
body[data-page="wordpress-development"] #dev-portfolio .work-card > .p-6 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  padding: 28px 24px;
}

body[data-page="logo-design-branding"] #dev-portfolio .work-card-image,
body[data-page="ui-ux-design"] #dev-portfolio .work-card-image,
body[data-page="website-design"] #dev-portfolio .work-card-image,
body[data-page="ecommerce-store"] #dev-portfolio .work-card-image,
body[data-page="shopify"] #dev-portfolio .work-card-image,
body[data-page="webflow-development"] #dev-portfolio .work-card-image,
body[data-page="website-maintenance"] #dev-portfolio .work-card-image,
body[data-page="website-redesign"] #dev-portfolio .work-card-image,
body[data-page="wordpress-development"] #dev-portfolio .work-card-image {
  width: 100%;
  height: 200px;
  flex-shrink: 0;
}

@media (min-width: 1024px) {
  body[data-page="logo-design-branding"] #dev-portfolio .work-card,
  body[data-page="ui-ux-design"] #dev-portfolio .work-card,
  body[data-page="website-design"] #dev-portfolio .work-card,
  body[data-page="ecommerce-store"] #dev-portfolio .work-card,
  body[data-page="shopify"] #dev-portfolio .work-card,
  body[data-page="webflow-development"] #dev-portfolio .work-card,
  body[data-page="website-maintenance"] #dev-portfolio .work-card,
  body[data-page="website-redesign"] #dev-portfolio .work-card,
  body[data-page="wordpress-development"] #dev-portfolio .work-card {
    height: 260px;
    min-height: 0;
    flex-direction: row;
  }

  body[data-page="logo-design-branding"] #dev-portfolio .work-card:nth-child(even),
  body[data-page="ui-ux-design"] #dev-portfolio .work-card:nth-child(even),
  body[data-page="website-design"] #dev-portfolio .work-card:nth-child(even),
  body[data-page="ecommerce-store"] #dev-portfolio .work-card:nth-child(even),
  body[data-page="shopify"] #dev-portfolio .work-card:nth-child(even),
  body[data-page="webflow-development"] #dev-portfolio .work-card:nth-child(even),
  body[data-page="website-maintenance"] #dev-portfolio .work-card:nth-child(even),
  body[data-page="website-redesign"] #dev-portfolio .work-card:nth-child(even),
  body[data-page="wordpress-development"] #dev-portfolio .work-card:nth-child(even) {
    flex-direction: row-reverse;
  }

  body[data-page="logo-design-branding"] #dev-portfolio .work-card > .p-6,
  body[data-page="ui-ux-design"] #dev-portfolio .work-card > .p-6,
  body[data-page="website-design"] #dev-portfolio .work-card > .p-6,
  body[data-page="ecommerce-store"] #dev-portfolio .work-card > .p-6,
  body[data-page="shopify"] #dev-portfolio .work-card > .p-6,
  body[data-page="webflow-development"] #dev-portfolio .work-card > .p-6,
  body[data-page="website-maintenance"] #dev-portfolio .work-card > .p-6,
  body[data-page="website-redesign"] #dev-portfolio .work-card > .p-6,
  body[data-page="wordpress-development"] #dev-portfolio .work-card > .p-6 {
    width: 60%;
    padding: 0 40px;
  }

  body[data-page="logo-design-branding"] #dev-portfolio .work-card-image,
  body[data-page="ui-ux-design"] #dev-portfolio .work-card-image,
  body[data-page="website-design"] #dev-portfolio .work-card-image,
  body[data-page="ecommerce-store"] #dev-portfolio .work-card-image,
  body[data-page="shopify"] #dev-portfolio .work-card-image,
  body[data-page="webflow-development"] #dev-portfolio .work-card-image,
  body[data-page="website-maintenance"] #dev-portfolio .work-card-image,
  body[data-page="website-redesign"] #dev-portfolio .work-card-image,
  body[data-page="wordpress-development"] #dev-portfolio .work-card-image {
    width: 40%;
    height: 100%;
  }
}

:is(
  body[data-page="logo-design-branding"],
  body[data-page="ui-ux-design"],
  body[data-page="website-design"],
  body[data-page="ecommerce-store"],
  body[data-page="shopify"],
  body[data-page="webflow-development"],
  body[data-page="website-maintenance"],
  body[data-page="website-redesign"],
  body[data-page="wordpress-development"]
) #dev-portfolio .work-card {
  border: 0;
}

:is(
  body[data-page="logo-design-branding"],
  body[data-page="ui-ux-design"],
  body[data-page="website-design"],
  body[data-page="ecommerce-store"],
  body[data-page="shopify"],
  body[data-page="webflow-development"],
  body[data-page="website-maintenance"],
  body[data-page="website-redesign"],
  body[data-page="wordpress-development"]
) #dev-portfolio .work-card:nth-child(even) {
  background: #242424;
}

:is(
  body[data-page="logo-design-branding"],
  body[data-page="ui-ux-design"],
  body[data-page="website-design"],
  body[data-page="ecommerce-store"],
  body[data-page="shopify"],
  body[data-page="webflow-development"],
  body[data-page="website-maintenance"],
  body[data-page="website-redesign"],
  body[data-page="wordpress-development"]
) #dev-portfolio .work-card > .p-6 > p:first-child {
  margin-bottom: 6px;
  color: rgba(255, 255, 255, 0.4);
  font-size: 12px;
}

:is(
  body[data-page="logo-design-branding"],
  body[data-page="ui-ux-design"],
  body[data-page="website-design"],
  body[data-page="ecommerce-store"],
  body[data-page="shopify"],
  body[data-page="webflow-development"],
  body[data-page="website-maintenance"],
  body[data-page="website-redesign"],
  body[data-page="wordpress-development"]
) #dev-portfolio .work-card h3 {
  font-size: 22px;
  line-height: 1.2;
}

@media (min-width: 1024px) {
  :is(
    body[data-page="logo-design-branding"],
    body[data-page="ui-ux-design"],
    body[data-page="website-design"],
    body[data-page="ecommerce-store"],
    body[data-page="shopify"],
    body[data-page="webflow-development"],
    body[data-page="website-maintenance"],
    body[data-page="website-redesign"],
    body[data-page="wordpress-development"]
  ) #dev-portfolio .work-card {
    flex-direction: row-reverse;
  }

  :is(
    body[data-page="logo-design-branding"],
    body[data-page="ui-ux-design"],
    body[data-page="website-design"],
    body[data-page="ecommerce-store"],
    body[data-page="shopify"],
    body[data-page="webflow-development"],
    body[data-page="website-maintenance"],
    body[data-page="website-redesign"],
    body[data-page="wordpress-development"]
  ) #dev-portfolio .work-card:nth-child(even) {
    flex-direction: row;
  }

  :is(
    body[data-page="logo-design-branding"],
    body[data-page="ui-ux-design"],
    body[data-page="website-design"],
    body[data-page="ecommerce-store"],
    body[data-page="shopify"],
    body[data-page="webflow-development"],
    body[data-page="website-maintenance"],
    body[data-page="website-redesign"],
    body[data-page="wordpress-development"]
  ) #dev-portfolio .work-card h3 {
    font-size: 28px;
    line-height: 1.1;
  }
}