/* PixelsCraft original page design CSS. Source ID 8129; path /blog/. Generated verbatim from approved page HTML. */


/* Original design section 1 */


@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Syne:wght@700;800;900&family=Space+Grotesk:wght@600;700;800&display=swap');



/* Page Wrapper & Reset */

#pc-blog-root {

  position: relative;

  background: #0a0a1a !important;

  color: #ffffff;

  font-family: 'Inter', sans-serif;

  overflow: hidden;

  box-sizing: border-box;

  width: 100%;

  max-width: 100vw;

  padding: 0;

  margin: 0;

}



#pc-blog-root *, #pc-blog-root *::before, #pc-blog-root *::after {

  box-sizing: border-box;

}



/* Ambient Cyberpunk Glow Orbs */

.pc-blog-glow-top {

  position: absolute;

  top: -100px;

  left: 50%;

  transform: translateX(-50%);

  width: 700px;

  max-width: 90vw;

  height: 400px;

  background: radial-gradient(circle, rgba(124, 58, 237, 0.28) 0%, transparent 70%);

  filter: blur(100px);

  pointer-events: none;

  z-index: 1;

}



.pc-blog-glow-side {

  position: absolute;

  top: 700px;

  right: -100px;

  width: 500px;

  height: 500px;

  background: radial-gradient(circle, rgba(6, 182, 212, 0.16) 0%, transparent 70%);

  filter: blur(120px);

  pointer-events: none;

  z-index: 1;

}



/* ============================================================

   1. HERO SECTION (155px Clearance to Prevent Fixed Header Clashing)

   ============================================================ */

#pc-blog-hero {

  position: relative;

  z-index: 2;

  text-align: center;

  padding: 155px 20px 45px !important;

  max-width: 1280px;

  margin: 0 auto;

}



.pc-hero-badge {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  padding: 7px 22px;

  background: rgba(124, 58, 237, 0.18);

  border: 1px solid rgba(124, 58, 237, 0.45);

  border-radius: 999px;

  font-family: 'Space Grotesk', sans-serif;

  font-size: 12px;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 2px;

  color: #c084fc;

  margin-bottom: 20px;

  box-shadow: 0 0 20px rgba(124, 58, 237, 0.2);

}



.pc-hero-badge-pulse {

  width: 8px;

  height: 8px;

  border-radius: 50%;

  background: #10b981;

  box-shadow: 0 0 10px #10b981;

  animation: pcPulseGreen 1.8s infinite ease-in-out;

}



@keyframes pcPulseGreen {

  0%, 100% { transform: scale(1); opacity: 1; }

  50% { transform: scale(1.4); opacity: 0.6; }

}



.pc-hero-title {

  font-family: 'Syne', sans-serif !important;

  font-size: clamp(2.2rem, 5.5vw, 4rem);

  font-weight: 900;

  color: #ffffff !important;

  line-height: 1.15;

  margin: 0 auto 16px;

  letter-spacing: -0.5px;

  max-width: 960px;

}



.pc-hero-title span {

  background: linear-gradient(135deg, #c084fc 0%, #06b6d4 50%, #38bdf8 100%);

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

}



.pc-hero-sub {

  font-size: clamp(14px, 1.8vw, 17px);

  color: #94a3b8;

  max-width: 680px;

  margin: 0 auto 35px;

  line-height: 1.65;

}



/* Category Filter Tabs Bar */

.pc-cat-nav-wrap {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 10px;

  flex-wrap: wrap;

  margin: 0 auto 10px;

  max-width: 1000px;

}



.pc-cat-btn {

  padding: 9px 20px;

  border-radius: 999px;

  font-family: 'Space Grotesk', sans-serif;

  font-size: 13px;

  font-weight: 700;

  background: rgba(18, 18, 38, 0.7);

  border: 1px solid rgba(255, 255, 255, 0.08);

  color: #94a3b8;

  cursor: pointer;

  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);

  outline: none;

}



.pc-cat-btn:hover {

  background: rgba(124, 58, 237, 0.2);

  border-color: rgba(124, 58, 237, 0.5);

  color: #ffffff;

  transform: translateY(-2px);

}



.pc-cat-btn.active {

  background: linear-gradient(135deg, #7c3aed, #06b6d4);

  border-color: transparent;

  color: #ffffff;

  box-shadow: 0 4px 18px rgba(124, 58, 237, 0.45);

}



/* ============================================================

   2. MAIN BLOG LAYOUT (2-Column Grid: Posts + Sticky Sidebar)

   ============================================================ */

#pc-blog-content {

  position: relative;

  z-index: 2;

  max-width: 1280px;

  margin: 0 auto;

  padding: 20px 20px 90px;

}



.pc-blog-grid-layout {

  display: grid;

  grid-template-columns: 1fr;

  gap: 40px;

}



@media (min-width: 992px) {

  .pc-blog-grid-layout {

    grid-template-columns: 1fr 370px;

  }

}



/* LEFT COLUMN: Dynamic Posts Container */

.pc-posts-col {

  width: 100%;

}



.pc-posts-grid {

  display: grid;

  grid-template-columns: 1fr;

  gap: 28px;

}



@media (min-width: 640px) {

  .pc-posts-grid {

    grid-template-columns: repeat(2, 1fr);

  }

}



/* Single Post Card */

.pc-post-card {

  background: rgba(18, 18, 38, 0.85);

  border: 1px solid rgba(124, 58, 237, 0.25);

  border-radius: 20px;

  overflow: hidden;

  display: flex;

  flex-direction: column;

  backdrop-filter: blur(12px);

  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);

  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);

  text-decoration: none !important;

  color: inherit;

  position: relative;

  cursor: pointer;

}



.pc-post-card:hover {

  transform: translateY(-6px);

  border-color: rgba(6, 182, 212, 0.65);

  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.5), 0 0 25px rgba(6, 182, 212, 0.2);

}



.pc-card-thumb-wrap {

  position: relative;

  width: 100%;

  height: 220px;

  background: #080816;

  overflow: hidden;

}



.pc-card-img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);

  display: block;

}



.pc-post-card:hover .pc-card-img {

  transform: scale(1.06);

}



.pc-card-cat-badge {

  position: absolute;

  top: 14px;

  left: 14px;

  padding: 5px 14px;

  background: rgba(10, 10, 26, 0.88);

  border: 1px solid rgba(124, 58, 237, 0.4);

  border-radius: 999px;

  font-family: 'Space Grotesk', sans-serif;

  font-size: 11px;

  font-weight: 700;

  text-transform: uppercase;

  color: #38bdf8;

  backdrop-filter: blur(8px);

}



.pc-card-body {

  padding: 22px;

  display: flex;

  flex-direction: column;

  flex-grow: 1;

}



.pc-card-meta {

  display: flex;

  align-items: center;

  gap: 12px;

  font-size: 11.5px;

  font-family: 'Space Grotesk', sans-serif;

  color: #64748b;

  margin-bottom: 12px;

}



.pc-card-title {

  font-family: 'Syne', sans-serif !important;

  font-size: 18px;

  font-weight: 800;

  color: #ffffff;

  line-height: 1.35;

  margin: 0 0 10px 0;

  transition: color 0.25s ease;

}



.pc-post-card:hover .pc-card-title {

  color: #38bdf8;

}



.pc-card-excerpt {

  font-size: 13.5px;

  color: #94a3b8;

  line-height: 1.6;

  margin-bottom: 18px;

  flex-grow: 1;

  display: -webkit-box;

  -webkit-line-clamp: 3;

  -webkit-box-orient: vertical;

  overflow: hidden;

}



.pc-card-footer {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding-top: 14px;

  border-top: 1px solid rgba(255, 255, 255, 0.06);

}



.pc-card-author {

  display: flex;

  align-items: center;

  gap: 8px;

  font-size: 12px;

  color: #cbd5e1;

  font-weight: 600;

}



.pc-author-avatar-mini {

  width: 28px;

  height: 28px;

  border-radius: 50%;

  border: 1.5px solid #06b6d4;

  overflow: hidden;

  flex-shrink: 0;

}



.pc-author-avatar-mini img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;

}



.pc-read-arrow {

  font-family: 'Space Grotesk', sans-serif;

  font-size: 13px;

  font-weight: 700;

  color: #06b6d4;

  display: inline-flex;

  align-items: center;

  gap: 4px;

  transition: transform 0.25s;

}



.pc-post-card:hover .pc-read-arrow {

  transform: translateX(4px);

  color: #38bdf8;

}



/* Dynamic Pagination Navigator */

.pc-pagination-wrapper {

  margin-top: 45px;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

  flex-wrap: wrap;

}



.pc-page-btn {

  min-width: 44px;

  height: 44px;

  padding: 0 14px;

  border-radius: 12px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  background: rgba(18, 18, 38, 0.85);

  border: 1px solid rgba(124, 58, 237, 0.3);

  color: #cbd5e1;

  font-family: 'Space Grotesk', sans-serif;

  font-size: 14px;

  font-weight: 700;

  text-decoration: none !important;

  cursor: pointer;

  transition: all 0.25s ease;

  outline: none;

}



.pc-page-btn:hover:not(.disabled) {

  background: rgba(124, 58, 237, 0.25);

  border-color: #06b6d4;

  color: #ffffff;

  transform: translateY(-2px);

}



.pc-page-btn.active {

  background: linear-gradient(135deg, #7c3aed, #06b6d4);

  border-color: transparent;

  color: #ffffff;

  box-shadow: 0 4px 16px rgba(124, 58, 237, 0.5);

}



.pc-page-btn.disabled {

  opacity: 0.4;

  cursor: not-allowed;

  pointer-events: none;

}



/* Loading Spinner */

.pc-loader-wrap {

  grid-column: 1 / -1;

  text-align: center;

  padding: 60px 20px;

}



.pc-spinner {

  width: 46px;

  height: 46px;

  border: 3px solid rgba(124, 58, 237, 0.2);

  border-top-color: #06b6d4;

  border-radius: 50%;

  animation: pcSpin 0.9s linear infinite;

  margin: 0 auto 16px;

}



@keyframes pcSpin {

  to { transform: rotate(360deg); }

}



/* ============================================================

   3. RIGHT COLUMN: STICKY ANIMATED SIDEBAR

   ============================================================ */

.pc-sidebar-col {

  width: 100%;

}



.pc-sticky-sidebar {

  position: sticky;

  top: 100px;

  display: flex;

  flex-direction: column;

  gap: 24px;

}



.pc-side-widget {

  background: rgba(18, 18, 38, 0.9);

  border: 1px solid rgba(124, 58, 237, 0.32);

  border-radius: 20px;

  padding: 24px;

  backdrop-filter: blur(14px);

  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);

  transition: border-color 0.3s ease;

}



.pc-side-widget:hover {

  border-color: rgba(6, 182, 212, 0.55);

}



.pc-side-title {

  font-family: 'Syne', sans-serif !important;

  font-size: 16.5px;

  font-weight: 800;

  color: #ffffff;

  margin: 0 0 18px 0;

  display: flex;

  align-items: center;

  gap: 8px;

}



.pc-side-title::after {

  content: '';

  flex-grow: 1;

  height: 1px;

  background: linear-gradient(90deg, rgba(124, 58, 237, 0.4), transparent);

}



/* Search Box */

.pc-side-search {

  position: relative;

  width: 100%;

}



.pc-side-search-input {

  width: 100%;

  background: #0a0a1a;

  border: 1px solid rgba(124, 58, 237, 0.4);

  border-radius: 12px;

  padding: 13px 44px 13px 16px;

  color: #ffffff;

  font-family: 'Inter', sans-serif;

  font-size: 13.5px;

  outline: none;

  transition: all 0.3s ease;

}



.pc-side-search-input:focus {

  border-color: #06b6d4;

  box-shadow: 0 0 18px rgba(6, 182, 212, 0.35);

}



.pc-side-search-btn {

  position: absolute;

  right: 12px;

  top: 50%;

  transform: translateY(-50%);

  background: none;

  border: none;

  color: #06b6d4;

  cursor: pointer;

  font-size: 17px;

  padding: 4px;

}



/* Core Team (Circular Neon Avatars) */

.pc-team-list {

  display: flex;

  flex-direction: column;

  gap: 15px;

}



.pc-team-item {

  display: flex;

  align-items: center;

  gap: 13px;

  background: rgba(10, 10, 26, 0.65);

  border: 1px solid rgba(255, 255, 255, 0.07);

  border-radius: 16px;

  padding: 12px 14px;

  transition: all 0.3s ease;

}



.pc-team-item:hover {

  background: rgba(24, 20, 52, 0.85);

  border-color: #06b6d4;

  transform: translateX(4px);

  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);

}



.pc-team-avatar-circ {

  position: relative;

  width: 52px;

  height: 52px;

  border-radius: 50% !important;

  padding: 2.5px;

  background: linear-gradient(135deg, #7c3aed 0%, #06b6d4 100%);

  box-shadow: 0 0 16px rgba(124, 58, 237, 0.4);

  flex-shrink: 0;

}



.pc-team-avatar-circ img {

  width: 100% !important;

  height: 100% !important;

  border-radius: 50% !important;

  object-fit: cover !important;

  object-position: center top !important;

  display: block !important;

  border: 2px solid #0a0a1a !important;

}



.pc-team-badge-icon {

  position: absolute;

  bottom: -2px;

  right: -2px;

  width: 20px;

  height: 20px;

  border-radius: 50%;

  background: #0a0a1a;

  border: 1.5px solid #06b6d4;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 10px;

  z-index: 3;

}



.pc-team-name {

  font-family: 'Syne', sans-serif;

  font-size: 14.5px;

  font-weight: 800;

  color: #ffffff;

  margin: 0 0 2px 0;

}



.pc-team-role {

  font-size: 11px;

  color: #06b6d4;

  font-weight: 700;

  font-family: 'Space Grotesk', sans-serif;

  margin-bottom: 3px;

  display: block;

}



.pc-team-badge {

  font-size: 10px;

  color: #c084fc;

  line-height: 1.3;

}



.pc-team-wa-btn {

  width: 32px;

  height: 32px;

  border-radius: 50%;

  background: rgba(37, 211, 102, 0.15);

  border: 1px solid rgba(37, 211, 102, 0.4);

  color: #25D366;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  text-decoration: none !important;

  font-size: 15px;

  flex-shrink: 0;

  margin-left: auto;

  transition: all 0.25s ease;

}



.pc-team-wa-btn:hover {

  background: #25D366;

  color: #ffffff;

  transform: scale(1.1);

  box-shadow: 0 0 14px rgba(37, 211, 102, 0.6);

}



/* Trending / Recent Posts in Sidebar */

.pc-recent-list {

  display: flex;

  flex-direction: column;

  gap: 14px;

}



.pc-recent-item {

  display: flex;

  align-items: center;

  gap: 12px;

  text-decoration: none !important;

  padding: 8px 0;

  border-bottom: 1px solid rgba(255, 255, 255, 0.05);

  transition: transform 0.25s ease;

}



.pc-recent-item:last-child {

  border-bottom: none;

}



.pc-recent-item:hover {

  transform: translateX(4px);

}



.pc-recent-num {

  font-family: 'Space Grotesk', sans-serif;

  font-size: 17px;

  font-weight: 800;

  color: #06b6d4;

  opacity: 0.85;

  min-width: 24px;

}



.pc-recent-title {

  font-size: 12.8px;

  font-weight: 600;

  color: #cbd5e1;

  line-height: 1.4;

  margin-bottom: 3px;

  transition: color 0.2s;

}



.pc-recent-item:hover .pc-recent-title {

  color: #38bdf8;

}



/* WhatsApp Direct CTA */

.pc-side-cta {

  background: linear-gradient(135deg, rgba(28, 20, 60, 0.95) 0%, rgba(10, 10, 26, 0.98) 100%);

  border: 1px solid rgba(6, 182, 212, 0.45);

  border-radius: 20px;

  padding: 26px 20px;

  text-align: center;

  box-shadow: 0 15px 35px rgba(0,0,0,0.5), 0 0 25px rgba(6, 182, 212, 0.15);

}



.pc-scta-title {

  font-family: 'Syne', sans-serif;

  font-size: 17.5px;

  font-weight: 800;

  color: #ffffff;

  margin: 0 0 8px 0;

}



.pc-scta-desc {

  font-size: 12.5px;

  color: #94a3b8;

  line-height: 1.6;

  margin-bottom: 18px;

}



.pc-scta-btn {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

  width: 100%;

  padding: 12px 18px;

  border-radius: 999px;

  background: #25D366;

  color: #ffffff !important;

  font-family: 'Space Grotesk', sans-serif;

  font-size: 13.5px;

  font-weight: 700;

  text-decoration: none !important;

  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4);

  transition: all 0.3s ease;

}



.pc-scta-btn:hover {

  transform: translateY(-2px);

  box-shadow: 0 10px 25px rgba(37, 211, 102, 0.6);

}



/* Original design section 2 */


@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Syne:wght@700;800;900&family=Space+Grotesk:wght@600;700&display=swap');



#pc-about-story {

  position: relative;

  background: #0a0a1a !important;

  color: #ffffff;

  padding: 80px 20px;

  font-family: 'Inter', sans-serif;

  overflow: hidden;

  box-sizing: border-box;

  width: 100%;

}



.pc-story-container {

  max-width: 1240px;

  margin: 0 auto;

  position: relative;

  z-index: 2;

  box-sizing: border-box;

}



.pc-story-grid {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 50px;

  align-items: center;

}



/* Left Card */

.pc-story-card {

  background: rgba(18, 18, 38, 0.85);

  border: 1px solid rgba(124, 58, 237, 0.28);

  border-radius: 28px;

  padding: 44px 38px;

  backdrop-filter: blur(16px);

  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 35px rgba(124, 58, 237, 0.2);

  position: relative;

  box-sizing: border-box;

}



.pc-story-card::before {

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  height: 2px;

  background: linear-gradient(90deg, transparent, #7c3aed, #06b6d4, transparent);

}



.pc-story-tag {

  font-family: 'Space Grotesk', sans-serif;

  font-size: 12px;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 2px;

  color: #06b6d4;

  margin-bottom: 14px;

  display: inline-block;

}



.pc-story-heading {

  font-family: 'Syne', sans-serif !important;

  font-size: clamp(1.8rem, 3.2vw, 2.4rem);

  font-weight: 800;

  color: #ffffff !important;

  line-height: 1.25;

  margin: 0 0 20px 0;

}



.pc-story-p {

  color: #94a3b8;

  font-size: 15px;

  line-height: 1.8;

  margin: 0 0 16px 0;

}



/* Right Column: 3D Cube Stage */

.pc-cube-stage {

  perspective: 1000px;

  width: 100%;

  height: 380px;

  display: flex;

  align-items: center;

  justify-content: center;

}



.pc-cube-3d {

  width: 200px;

  height: 200px;

  position: relative;

  transform-style: preserve-3d;

  animation: pcRotateCube 18s linear infinite;

}



@keyframes pcRotateCube {

  0% { transform: rotateX(15deg) rotateY(0deg); }

  100% { transform: rotateX(15deg) rotateY(360deg); }

}



.pc-cube-face {

  position: absolute;

  width: 200px;

  height: 200px;

  background: linear-gradient(135deg, rgba(124, 58, 237, 0.45), rgba(6, 182, 212, 0.35));

  border: 2px solid rgba(124, 58, 237, 0.8);

  box-shadow: 0 0 30px rgba(124, 58, 237, 0.5) inset;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  font-family: 'Space Grotesk', sans-serif;

  font-size: 14px;

  font-weight: 700;

  color: #ffffff;

  backdrop-filter: blur(10px);

  text-align: center;

  padding: 16px;

  border-radius: 18px;

  box-sizing: border-box;

}



.pc-cube-face span.icon {

  font-size: 38px;

  margin-bottom: 10px;

}



.pc-face-front  { transform: translateZ(100px); }

.pc-face-back   { transform: rotateY(180deg) translateZ(100px); }

.pc-face-right  { transform: rotateY(90deg) translateZ(100px); }

.pc-face-left   { transform: rotateY(-90deg) translateZ(100px); }

.pc-face-top    { transform: rotateX(90deg) translateZ(100px); }

.pc-face-bottom { transform: rotateX(-90deg) translateZ(100px); }



@media (max-width: 960px) {

  .pc-story-grid {

    grid-template-columns: 1fr;

    gap: 40px;

  }

  .pc-story-card {

    padding: 32px 24px;

  }

}



/* Original design section 3 */


@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Syne:wght@700;800;900&family=Space+Grotesk:wght@600;700&display=swap');



#pc-about-mv {

  position: relative;

  background: #0a0a1a !important;

  color: #ffffff;

  padding: 80px 20px 90px;

  font-family: 'Inter', sans-serif;

  overflow: hidden;

  box-sizing: border-box;

  width: 100%;

}



.pc-mv-container {

  max-width: 1240px;

  margin: 0 auto;

  position: relative;

  z-index: 2;

  box-sizing: border-box;

}



.pc-mv-header {

  text-align: center;

  margin-bottom: 55px;

}



.pc-mv-badge {

  display: inline-block;

  padding: 6px 18px;

  background: rgba(124, 58, 237, 0.15);

  border: 1px solid rgba(124, 58, 237, 0.4);

  border-radius: 999px;

  font-family: 'Space Grotesk', sans-serif;

  font-size: 13px;

  font-weight: 600;

  text-transform: uppercase;

  letter-spacing: 2px;

  color: #c084fc;

  margin-bottom: 16px;

}



.pc-mv-title {

  font-family: 'Syne', sans-serif !important;

  font-size: clamp(2.2rem, 5vw, 3.4rem);

  font-weight: 900;

  color: #ffffff !important;

  line-height: 1.2;

  margin: 0 0 16px 0;

}



.pc-mv-title span {

  background: linear-gradient(135deg, #a855f7 0%, #06b6d4 100%);

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

  background-clip: text;

  display: inline-block;

}



.pc-mv-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 28px;

  box-sizing: border-box;

}



.pc-mv-card {

  background: rgba(18, 18, 38, 0.82);

  border: 1px solid rgba(124, 58, 237, 0.28);

  border-radius: 24px;

  padding: 38px 30px;

  backdrop-filter: blur(16px);

  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease, box-shadow 0.35s ease;

  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);

  display: flex;

  flex-direction: column;

  box-sizing: border-box;

}



.pc-mv-card:hover {

  transform: translateY(-8px);

  border-color: rgba(6, 182, 212, 0.6);

  box-shadow: 0 20px 50px rgba(6, 182, 212, 0.25), 0 0 30px rgba(124, 58, 237, 0.2);

}



.pc-mv-icon {

  width: 64px;

  height: 64px;

  border-radius: 18px;

  background: linear-gradient(135deg, rgba(124, 58, 237, 0.3), rgba(6, 182, 212, 0.2));

  border: 1px solid rgba(124, 58, 237, 0.5);

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 30px;

  margin-bottom: 24px;

  box-shadow: 0 0 25px rgba(124, 58, 237, 0.4);

}



.pc-mv-card h3 {

  font-family: 'Syne', sans-serif !important;

  font-size: 22px;

  font-weight: 800;

  margin: 0 0 14px 0;

  color: #ffffff !important;

}



.pc-mv-card p {

  color: #94a3b8;

  line-height: 1.7;

  font-size: 15px;

  margin: 0;

}



@media (max-width: 960px) {

  .pc-mv-grid {

    grid-template-columns: 1fr;

    gap: 24px;

  }

  #pc-about-mv {

    padding: 60px 16px 70px;

  }

}



/* Original design section 4 */


@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Syne:wght@700;800;900&family=Space+Grotesk:wght@600;700&display=swap');



#pc-about-team {

  position: relative;

  background: #0a0a1a !important;

  color: #ffffff;

  padding: 85px 20px 105px;

  font-family: 'Inter', sans-serif;

  overflow: hidden;

  box-sizing: border-box;

  width: 100%;

}



.pc-ateam-container {

  max-width: 1240px;

  margin: 0 auto;

  position: relative;

  z-index: 2;

  box-sizing: border-box;

}



.pc-ateam-header {

  text-align: center;

  margin-bottom: 60px;

}



.pc-ateam-badge {

  display: inline-block;

  padding: 6px 18px;

  background: rgba(124, 58, 237, 0.15);

  border: 1px solid rgba(124, 58, 237, 0.4);

  border-radius: 999px;

  font-family: 'Space Grotesk', sans-serif;

  font-size: 13px;

  font-weight: 600;

  text-transform: uppercase;

  letter-spacing: 2px;

  color: #c084fc;

  margin-bottom: 16px;

}



.pc-ateam-title {

  font-family: 'Syne', sans-serif !important;

  font-size: clamp(2.2rem, 5vw, 3.6rem);

  font-weight: 900;

  color: #ffffff !important;

  line-height: 1.2;

  margin: 0 0 16px 0;

  letter-spacing: -0.02em;

}



.pc-ateam-title span {

  background: linear-gradient(135deg, #a855f7 0%, #06b6d4 100%);

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

  background-clip: text;

  display: inline-block;

}



.pc-ateam-desc {

  color: #94a3b8;

  font-size: clamp(14px, 1.8vw, 17px);

  max-width: 650px;

  margin: 0 auto;

  line-height: 1.65;

}



/* Grid */

.pc-ateam-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 32px;

  box-sizing: border-box;

}



.pc-ateam-card {

  background: rgba(18, 18, 38, 0.82);

  border: 1px solid rgba(124, 58, 237, 0.28);

  border-radius: 26px;

  padding: 40px 28px 36px;

  text-align: center;

  display: flex;

  flex-direction: column;

  align-items: center;

  backdrop-filter: blur(14px);

  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease, box-shadow 0.35s ease;

  position: relative;

  box-sizing: border-box;

}



.pc-ateam-card:hover {

  transform: translateY(-8px);

  border-color: rgba(6, 182, 212, 0.6);

  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), 0 0 35px rgba(124, 58, 237, 0.25);

}



/* Circular Avatar with Glowing Neon Frame */

#pc-about-team .pc-ateam-avatar-wrap {

  position: relative;

  width: 156px;

  height: 156px;

  margin: 0 auto 26px;

  border-radius: 50% !important;

  padding: 4px;

  background: linear-gradient(135deg, #7c3aed 0%, #06b6d4 100%);

  box-shadow: 0 0 30px rgba(124, 58, 237, 0.45), 0 0 15px rgba(6, 182, 212, 0.3);

  display: flex;

  align-items: center;

  justify-content: center;

  box-sizing: border-box;

  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;

}



#pc-about-team .pc-ateam-card:hover .pc-ateam-avatar-wrap {

  transform: scale(1.06);

  box-shadow: 0 0 45px rgba(6, 182, 212, 0.65), 0 0 25px rgba(124, 58, 237, 0.5);

}



#pc-about-team .pc-ateam-avatar-img,

#pc-about-team img.pc-ateam-avatar-img,

#pc-about-team .pc-ateam-avatar-wrap img {

  width: 100% !important;

  height: 100% !important;

  border-radius: 50% !important;

  object-fit: cover !important;

  object-position: center top !important;

  display: block !important;

  border: 3px solid #0a0a1a !important;

  box-sizing: border-box !important;

  background: #181434;

}



.pc-ateam-badge-tag {

  position: absolute;

  bottom: 2px;

  right: 2px;

  width: 40px;

  height: 40px;

  border-radius: 50%;

  background: #0a0a1a;

  border: 2px solid #06b6d4;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 17px;

  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.8), 0 0 12px rgba(6, 182, 212, 0.4);

  z-index: 3;

}



.pc-ateam-name {

  font-family: 'Syne', sans-serif !important;

  font-size: clamp(1.4rem, 2.2vw, 1.65rem);

  font-weight: 800;

  color: #ffffff !important;

  margin: 0 0 8px 0;

  letter-spacing: -0.01em;

}



.pc-ateam-role {

  font-family: 'Space Grotesk', sans-serif;

  font-size: 12px;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 1.8px;

  color: #06b6d4;

  margin-bottom: 18px;

  display: inline-block;

}



.pc-ateam-bio {

  font-size: 14px;

  color: #94a3b8;

  line-height: 1.65;

  margin: 0 0 22px 0;

  flex-grow: 1;

}



.pc-ateam-skills {

  display: flex;

  flex-wrap: wrap;

  gap: 8px;

  justify-content: center;

  margin-bottom: 24px;

}



.pc-askill-pill {

  font-family: 'Space Grotesk', sans-serif;

  font-size: 11px;

  font-weight: 600;

  padding: 5px 14px;

  background: rgba(124, 58, 237, 0.14);

  border: 1px solid rgba(124, 58, 237, 0.35);

  border-radius: 999px;

  color: #c084fc;

}



.pc-ateam-socials {

  display: flex;

  gap: 12px;

  margin-top: auto;

}



.pc-asocial-btn {

  width: 40px;

  height: 40px;

  border-radius: 50%;

  background: rgba(255, 255, 255, 0.08);

  border: 1px solid rgba(255, 255, 255, 0.18);

  color: #ffffff;

  display: flex;

  align-items: center;

  justify-content: center;

  text-decoration: none;

  font-size: 16px;

  transition: all 0.3s ease;

  cursor: pointer;

}



.pc-asocial-btn:hover {

  background: linear-gradient(135deg, #7c3aed 0%, #06b6d4 100%);

  border-color: transparent;

  transform: translateY(-3px);

  box-shadow: 0 6px 16px rgba(6, 182, 212, 0.4);

  color: #ffffff;

}



@media (max-width: 960px) {

  .pc-ateam-grid {

    grid-template-columns: 1fr;

    gap: 26px;

    max-width: 480px;

    margin: 0 auto;

  }

  #pc-about-team {

    padding: 60px 16px 85px;

  }

}



/* Original design section 5 */


@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Syne:wght@700;800;900&family=Space+Grotesk:wght@600;700&display=swap');



#pc-about-skills {

  position: relative;

  background: #0a0a1a !important;

  color: #ffffff;

  padding: 80px 20px 90px;

  font-family: 'Inter', sans-serif;

  overflow: hidden;

  box-sizing: border-box;

  width: 100%;

  max-width: 100vw;

}



.pc-skills-container {

  max-width: 1240px;

  margin: 0 auto;

  position: relative;

  z-index: 2;

  box-sizing: border-box;

  width: 100%;

}



.pc-skills-box {

  background: rgba(18, 18, 38, 0.82);

  border: 1px solid rgba(124, 58, 237, 0.28);

  border-radius: 28px;

  padding: 50px 44px;

  backdrop-filter: blur(16px);

  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);

  box-sizing: border-box;

  width: 100%;

  overflow: hidden;

}



.pc-skills-header {

  text-align: center;

  margin-bottom: 40px;

  width: 100%;

  box-sizing: border-box;

}



.pc-skills-badge {

  display: inline-block;

  padding: 6px 18px;

  background: rgba(124, 58, 237, 0.15);

  border: 1px solid rgba(124, 58, 237, 0.4);

  border-radius: 999px;

  font-family: 'Space Grotesk', sans-serif;

  font-size: 13px;

  font-weight: 600;

  text-transform: uppercase;

  letter-spacing: 2px;

  color: #c084fc;

  margin-bottom: 16px;

  box-sizing: border-box;

}



.pc-skills-title {

  font-family: 'Syne', sans-serif !important;

  font-size: clamp(1.9rem, 4.2vw, 3rem);

  font-weight: 900;

  color: #ffffff !important;

  margin: 0 0 12px 0;

  line-height: 1.2;

  text-align: center;

  word-break: break-word;

  overflow-wrap: break-word;

  max-width: 100%;

}



.pc-skills-title span {

  background: linear-gradient(135deg, #a855f7 0%, #06b6d4 100%);

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

  background-clip: text;

  display: inline-block;

}



.pc-skills-grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

  gap: 24px;

  box-sizing: border-box;

  width: 100%;

}



.pc-skill-item {

  background: rgba(255, 255, 255, 0.03);

  border: 1px solid rgba(255, 255, 255, 0.08);

  border-radius: 18px;

  padding: 22px 24px;

  transition: all 0.3s ease;

  box-sizing: border-box;

  width: 100%;

}



.pc-skill-item:hover {

  border-color: rgba(6, 182, 212, 0.5);

  background: rgba(124, 58, 237, 0.08);

  transform: translateY(-4px);

  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);

}



.pc-skill-top {

  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 8px;

  margin-bottom: 12px;

  font-family: 'Space Grotesk', sans-serif;

  font-weight: 700;

  font-size: 14px;

  color: #f1f5f9;

}



.pc-skill-top span.percent {

  color: #22d3ee;

  flex-shrink: 0;

}



.pc-skill-bar {

  width: 100%;

  height: 8px;

  background: rgba(255, 255, 255, 0.1);

  border-radius: 999px;

  overflow: hidden;

}



.pc-skill-fill {

  height: 100%;

  border-radius: 999px;

  background: linear-gradient(90deg, #7c3aed, #06b6d4);

  box-shadow: 0 0 10px rgba(6, 182, 212, 0.6);

  width: 0%;

  transition: width 1.5s cubic-bezier(0.165, 0.84, 0.44, 1);

}



/* ============================================================

   MOBILE RESPONSIVE (ZERO HEADING CUT-OFF)

   ============================================================ */

@media (max-width: 768px) {

  #pc-about-skills {

    padding: 50px 12px 65px;

  }

  .pc-skills-box {

    padding: 30px 16px;

    border-radius: 20px;

  }

  .pc-skills-badge {

    font-size: 11px;

    letter-spacing: 1.2px;

    padding: 5px 14px;

    margin-bottom: 14px;

  }

  /* Competencies Heading smoothly scales so 'Competencies' never breaks or wraps letters */

  .pc-skills-title {

    font-size: clamp(1.15rem, 5.1vw, 1.5rem) !important;

    line-height: 1.25;

    margin-bottom: 10px;

    letter-spacing: -0.3px;

    word-break: normal !important;

    overflow-wrap: normal !important;

  }

  .pc-skills-title span {

    display: inline-block;

    white-space: nowrap;

  }

  .pc-skills-grid {

    grid-template-columns: 100%;

    gap: 16px;

  }

  .pc-skill-item {

    padding: 16px 16px;

    border-radius: 14px;

  }

  .pc-skill-top {

    font-size: 13px;

  }

}



/* Original design section 6 */


@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Syne:wght@700;800;900&family=Space+Grotesk:wght@600;700&display=swap');



#pc-recent-projects {

  position: relative;

  background: #0a0a1a !important;

  color: #ffffff;

  padding: 90px 20px;

  font-family: 'Inter', sans-serif;

  overflow: hidden;

  box-sizing: border-box;

}



.pc-recent-container {

  max-width: 1280px;

  margin: 0 auto;

  position: relative;

  z-index: 2;

}



.pc-section-header {

  text-align: center;

  margin-bottom: 60px;

}



.pc-badge {

  display: inline-block;

  padding: 6px 18px;

  background: rgba(124, 58, 237, 0.15);

  border: 1px solid rgba(124, 58, 237, 0.4);

  border-radius: 999px;

  font-family: 'Space Grotesk', sans-serif;

  font-size: 13px;

  font-weight: 600;

  text-transform: uppercase;

  letter-spacing: 2px;

  color: #c084fc;

  margin-bottom: 16px;

}



.pc-section-title {

  font-family: 'Syne', sans-serif !important;

  font-size: clamp(2.2rem, 4.5vw, 3.4rem);

  font-weight: 900;

  color: #ffffff !important;

  line-height: 1.2;

  margin-bottom: 18px;

}



.pc-section-title span {

  background: linear-gradient(135deg, #c084fc 0%, #06b6d4 100%);

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

}



.pc-section-desc {

  color: #94a3b8;

  font-size: clamp(15px, 1.8vw, 17px);

  max-width: 680px;

  margin: 0 auto;

  line-height: 1.7;

}



/* Projects 3-Card Grid */

.pc-projects-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 30px;

  margin-bottom: 50px;

}



.pc-project-card {

  background: rgba(18, 18, 38, 0.75);

  border: 1px solid rgba(124, 58, 237, 0.25);

  border-radius: 24px;

  overflow: hidden;

  display: flex;

  flex-direction: column;

  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.35s ease;

  backdrop-filter: blur(12px);

}



.pc-project-card:hover {

  transform: translateY(-8px);

  border-color: rgba(6, 182, 212, 0.6);

  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), 0 0 30px rgba(124, 58, 237, 0.25);

}



/* 1. Top Image */

.pc-project-image-box {

  position: relative;

  width: 100%;

  aspect-ratio: 16 / 10;

  overflow: hidden;

  background: #121226;

}



.pc-project-image-box img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;

  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);

}



.pc-project-card:hover .pc-project-image-box img {

  transform: scale(1.08);

}



.pc-project-badge-tag {

  position: absolute;

  top: 16px;

  left: 16px;

  padding: 6px 14px;

  background: rgba(10, 10, 26, 0.85);

  border: 1px solid rgba(255, 255, 255, 0.2);

  border-radius: 999px;

  font-family: 'Space Grotesk', sans-serif;

  font-size: 11px;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 1.5px;

  color: #22d3ee;

  backdrop-filter: blur(8px);

}



/* 2. Details Below */

.pc-project-content {

  padding: 26px;

  display: flex;

  flex-direction: column;

  flex-grow: 1;

}



.pc-project-client {

  font-family: 'Space Grotesk', sans-serif;

  font-size: 12px;

  font-weight: 700;

  color: #a855f7;

  text-transform: uppercase;

  letter-spacing: 1.5px;

  margin-bottom: 6px;

}



.pc-project-title {

  font-family: 'Syne', sans-serif !important;

  font-size: 22px;

  font-weight: 800;

  color: #ffffff !important;

  margin-bottom: 12px;

  line-height: 1.3;

}



.pc-project-desc {

  font-size: 14px;

  color: #94a3b8;

  line-height: 1.65;

  margin-bottom: 20px;

  flex-grow: 1;

}



.pc-project-tags {

  display: flex;

  flex-wrap: wrap;

  gap: 8px;

  margin-bottom: 24px;

}



.pc-tag-pill {

  font-family: 'Space Grotesk', sans-serif;

  font-size: 11px;

  font-weight: 600;

  padding: 4px 10px;

  background: rgba(255, 255, 255, 0.06);

  border: 1px solid rgba(255, 255, 255, 0.1);

  border-radius: 6px;

  color: #cbd5e1;

}



/* 3. Bottom Button: View Live Project (Opens in New Tab) */

.pc-project-link-btn {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 10px;

  padding: 14px 22px;

  border-radius: 12px;

  font-family: 'Space Grotesk', sans-serif;

  font-size: 14px;

  font-weight: 700;

  text-decoration: none;

  background: linear-gradient(135deg, rgba(124, 58, 237, 0.2) 0%, rgba(6, 182, 212, 0.2) 100%);

  border: 1px solid rgba(6, 182, 212, 0.4);

  color: #ffffff !important;

  transition: all 0.3s ease;

  cursor: pointer;

}



.pc-project-link-btn:hover {

  background: linear-gradient(135deg, #7c3aed 0%, #06b6d4 100%);

  border-color: transparent;

  color: #ffffff !important;

  box-shadow: 0 10px 25px rgba(6, 182, 212, 0.4);

  transform: translateY(-2px);

}



.pc-project-link-btn span {

  font-size: 16px;

  transition: transform 0.3s;

}



.pc-project-link-btn:hover span {

  transform: translate(3px, -3px);

}



@media (max-width: 990px) {

  .pc-projects-grid {

    grid-template-columns: 1fr;

    gap: 26px;

  }

  #pc-recent-projects {

    padding: 70px 16px;

  }

}



/* Original design section 7 */


@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Syne:wght@700;800;900&family=Space+Grotesk:wght@600;700&display=swap');



#pc-cta {

  position: relative;

  background: #0a0a1a !important;

  color: #ffffff;

  padding: 80px 16px 100px;

  font-family: 'Inter', sans-serif;

  overflow: hidden;

  box-sizing: border-box;

  width: 100%;

}



.pc-cta-container {

  max-width: 1080px;

  width: 100%;

  margin: 0 auto;

  position: relative;

  z-index: 2;

  box-sizing: border-box;

}



.pc-cta-box {

  position: relative;

  border-radius: 28px;

  overflow: hidden;

  background: linear-gradient(135deg, rgba(24, 20, 52, 0.92) 0%, rgba(10, 10, 26, 0.98) 100%);

  border: 1px solid rgba(124, 58, 237, 0.35);

  padding: 65px 36px;

  text-align: center;

  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6), 0 0 40px rgba(124, 58, 237, 0.2);

  box-sizing: border-box;

  width: 100%;

  margin: 0 auto;

}



.pc-cta-bg-art {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: linear-gradient(180deg, rgba(10,10,26,0.82) 0%, rgba(10,10,26,0.92) 100%), url('https://pixelscraftagency.com/wp-content/uploads/2026/09/pc-home-cta-collaboration.jpeg') center/cover no-repeat;

  pointer-events: none;

  z-index: 1;

}



.pc-cta-content {

  position: relative;

  z-index: 2;

  width: 100%;

  box-sizing: border-box;

}



.pc-cta-badge {

  display: inline-block;

  padding: 6px 18px;

  background: rgba(6, 182, 212, 0.15);

  border: 1px solid rgba(6, 182, 212, 0.4);

  border-radius: 999px;

  font-family: 'Space Grotesk', sans-serif;

  font-size: 12px;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 2px;

  color: #22d3ee;

  margin-bottom: 20px;

}



.pc-cta-title {

  font-family: 'Syne', sans-serif !important;

  font-size: clamp(1.8rem, 4.5vw, 3.4rem);

  font-weight: 900;

  color: #ffffff !important;

  line-height: 1.25;

  margin-bottom: 18px;

  word-wrap: break-word;

  overflow-wrap: break-word;

}



.pc-cta-title span {

  background: linear-gradient(135deg, #c084fc 0%, #06b6d4 100%);

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

  display: inline-block;

}



.pc-cta-desc {

  font-size: clamp(14px, 1.8vw, 17px);

  color: #94a3b8;

  max-width: 650px;

  margin: 0 auto 32px;

  line-height: 1.7;

}



/* Value Checkmarks */

.pc-cta-checkmarks {

  display: flex;

  justify-content: center;

  align-items: center;

  gap: 24px;

  margin-bottom: 38px;

  flex-wrap: wrap;

}



.pc-cta-check {

  font-family: 'Space Grotesk', sans-serif;

  font-size: 13.5px;

  font-weight: 600;

  color: #cbd5e1;

  display: inline-flex;

  align-items: center;

  gap: 8px;

}



.pc-cta-check span {

  color: #06b6d4;

  font-weight: 900;

  font-size: 15px;

}



/* Action Buttons */

.pc-cta-buttons {

  display: flex;

  justify-content: center;

  align-items: center;

  gap: 16px;

  flex-wrap: wrap;

  width: 100%;

}



.pc-btn {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 10px;

  padding: 16px 36px;

  font-family: 'Space Grotesk', sans-serif;

  font-size: 15px;

  font-weight: 700;

  text-decoration: none;

  border-radius: 999px;

  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);

  cursor: pointer;

  box-sizing: border-box;

}



.pc-btn-primary {

  background: linear-gradient(135deg, #7c3aed 0%, #06b6d4 100%);

  color: #ffffff !important;

  box-shadow: 0 10px 30px rgba(124, 58, 237, 0.4);

  border: 1px solid rgba(255, 255, 255, 0.25);

}



.pc-btn-primary:hover {

  transform: translateY(-3px) scale(1.02);

  box-shadow: 0 15px 40px rgba(6, 182, 212, 0.5);

  color: #ffffff !important;

}



.pc-btn-whatsapp {

  background: #25d366;

  color: #ffffff !important;

  box-shadow: 0 10px 25px rgba(37, 211, 102, 0.35);

  border: 1px solid rgba(255, 255, 255, 0.2);

}



.pc-btn-whatsapp:hover {

  background: #20bd5a;

  transform: translateY(-3px);

  box-shadow: 0 15px 35px rgba(37, 211, 102, 0.5);

  color: #ffffff !important;

}



/* Extra Mobile Precision to Prevent Side Clipping */

@media (max-width: 640px) {

  #pc-cta {

    padding: 60px 12px 80px;

  }

  .pc-cta-box {

    padding: 40px 16px;

    border-radius: 20px;

  }

  .pc-cta-title {

    font-size: 1.65rem !important;

    line-height: 1.3;

    letter-spacing: -0.01em;

  }

  .pc-cta-desc {

    font-size: 14px;

    line-height: 1.6;

    margin-bottom: 24px;

  }

  .pc-cta-checkmarks {

    flex-direction: column;

    align-items: center;

    gap: 10px;

    margin-bottom: 28px;

  }

  .pc-cta-check {

    font-size: 13px;

  }

  .pc-cta-buttons {

    flex-direction: column;

    width: 100%;

    max-width: 360px;

    margin: 0 auto;

    gap: 12px;

  }

  .pc-btn {

    width: 100%;

    padding: 14px 20px;

    font-size: 14px;

  }

}