/* Page Loader */
      #page-loader {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(135deg, #ffffff 0%, #f0f9ff 25%, #fef3f8 50%, #f7ffe6 75%, #ffffff 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 99999;
        transition: opacity 0.5s ease, visibility 0.5s ease;
      }
      
      #page-loader.hidden {
        opacity: 0;
        visibility: hidden;
      }
      
      .hash-loader {
        font-size: 120px;
        font-weight: 900;
        font-family: 'Space Grotesk', system-ui, -apple-system, sans-serif;
        background: linear-gradient(135deg, #68cecf 0%, #a0cd45 25%, #f876c0 50%, #f8c63f 75%, #68cecf 100%);
        background-size: 300% 300%;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        animation: gradientShift 3s ease infinite, hashPulse 2s ease-in-out infinite;
      }
      
      @keyframes hashPulse {
        0%, 100% { transform: scale(1); opacity: 0.8; }
        50% { transform: scale(1.1); opacity: 1; }
      }

      /* Cursor Glow Effect */
      #cursor-glow {
        position: fixed;
        width: 400px;
        height: 400px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(104, 206, 207, 0.3) 0%, rgba(248, 118, 192, 0.25) 25%, rgba(160, 205, 69, 0.25) 50%, rgba(248, 198, 63, 0.2) 75%, transparent 100%);
        pointer-events: none;
        z-index: 9998;
        transform: translate(-50%, -50%);
        transition: opacity 0.3s ease;
        opacity: 0;
        filter: blur(60px);
      }

      #cursor-glow.active {
        opacity: 1;
      }

      /* Animations from home page */
      @keyframes gradientShift {
        0%, 100% { background-position: 0% 50%; }
        50% { background-position: 100% 50%; }
      }
      
      @keyframes float {
        0%, 100% { transform: translateY(0px) rotate(0deg); }
        50% { transform: translateY(-20px) rotate(5deg); }
      }
      
      @keyframes pulse {
        0%, 100% { opacity: 0.6; transform: scale(1); }
        50% { opacity: 1; transform: scale(1.05); }
      }
      
      @keyframes slideUp {
        from {
          opacity: 0;
          transform: translateY(30px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }
      
      .hero-gradient-bg {
        background: linear-gradient(135deg, #ffffff 0%, #f0f9ff 25%, #fef3f8 50%, #f7ffe6 75%, #ffffff 100%);
        background-size: 400% 400%;
        animation: gradientShift 15s ease infinite;
      }
      
      .floating-element {
        animation: float 6s ease-in-out infinite;
      }
      
      .service-icon {
        transition: transform 0.4s ease-out;
      }

      /* Mobile Menu Styles */
      #mobile-menu {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease-out;
      }

      #mobile-menu.active {
        max-height: 400px;
      }

      .hamburger-line {
        width: 25px;
        height: 3px;
        background: #333333;
        transition: all 0.3s ease;
        border-radius: 3px;
      }

      #hamburger-btn.active .hamburger-line:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
      }

      #hamburger-btn.active .hamburger-line:nth-child(2) {
        opacity: 0;
      }

      #hamburger-btn.active .hamburger-line:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
      }

      /* Portfolio Hero Slider */
      .pf-carousel {
        width: 100%;
        height: min(92vh, 860px);
        min-height: 620px;
        overflow: hidden;
        position: relative;
      }

      .pf-carousel .pf-list .pf-item {
        width: 170px;
        height: 240px;
        position: absolute;
        top: 82%;
        transform: translateY(-70%);
        left: 68%;
        border-radius: 18px;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
        background-position: center;
        background-size: cover;
        z-index: 10;
        transition: 1s;
        overflow: hidden;
      }

      .pf-carousel .pf-list .pf-item::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(120deg, rgba(0, 0, 0, 0.48) 0%, rgba(0, 0, 0, 0.28) 45%, rgba(0, 0, 0, 0.22) 100%);
      }

      .pf-carousel .pf-list .pf-item:nth-child(1),
      .pf-carousel .pf-list .pf-item:nth-child(2) {
        top: 0;
        left: 0;
        transform: translate(0, 0);
        border-radius: 0;
        width: 100%;
        height: 100%;
      }

      .pf-carousel .pf-list .pf-item:nth-child(3) { left: 66%; }
      .pf-carousel .pf-list .pf-item:nth-child(4) { left: calc(66% + 190px); }
      .pf-carousel .pf-list .pf-item:nth-child(5) { left: calc(66% + 380px); }
      .pf-carousel .pf-list .pf-item:nth-child(6) { left: calc(66% + 570px); }
      .pf-carousel .pf-list .pf-item:nth-child(n + 7) {
        left: calc(66% + 760px);
        opacity: 0;
      }

      .pf-item .pf-content {
        position: absolute;
        top: 50%;
        left: min(8vw, 110px);
        transform: translateY(-50%);
        width: min(700px, 78vw);
        text-align: left;
        color: #ffffff;
        display: none;
        z-index: 2;
      }

      .pf-list .pf-item:nth-child(2) .pf-content {
        display: block;
      }

      .pf-content .pf-title {
        font-size: clamp(22px, 3.2vw, 44px);
        text-transform: uppercase;
        color: #68cecf;
        font-weight: 800;
        line-height: 1.1;
        opacity: 0;
        letter-spacing: 0.04em;
        animation: pfAnimate 0.8s ease-in-out 0.2s 1 forwards;
      }

      .pf-content .pf-name {
        font-size: clamp(34px, 6.2vw, 92px);
        text-transform: uppercase;
        font-weight: 900;
        line-height: 1;
        text-shadow: 2px 3px 18px rgba(0, 0, 0, 0.35);
        opacity: 0;
        animation: pfAnimate 0.8s ease-in-out 0.45s 1 forwards;
      }

      .pf-content .pf-des {
        margin-top: 12px;
        margin-bottom: 24px;
        font-size: clamp(15px, 1.4vw, 21px);
        max-width: 900px;
        line-height: 1.6;
        color: rgba(255, 255, 255, 0.95);
        opacity: 0;
        animation: pfAnimate 0.8s ease-in-out 0.7s 1 forwards;
      }

      .pf-content .pf-btn {
        display: flex;
        gap: 12px;
        opacity: 0;
        animation: pfAnimate 0.8s ease-in-out 0.9s 1 forwards;
      }

      .pf-content .pf-btn a {
        padding: 11px 20px;
        border-radius: 9999px;
        text-decoration: none;
        font-size: 15px;
        font-weight: 700;
        border: 2px solid rgba(255, 255, 255, 0.92);
        transition: 0.25s;
      }

      .pf-content .pf-btn a:first-child {
        background: #68cecf;
        border-color: #68cecf;
        color: #ffffff;
      }

      .pf-content .pf-btn a:first-child:hover {
        background: #5bb8b9;
        border-color: #5bb8b9;
      }

      .pf-content .pf-btn a:last-child {
        background: transparent;
        color: #ffffff;
      }

      .pf-content .pf-btn a:last-child:hover {
        background: rgba(255, 255, 255, 0.16);
      }

      @keyframes pfAnimate {
        from {
          opacity: 0;
          transform: translateY(44px);
          filter: blur(12px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
          filter: blur(0);
        }
      }

      .pf-arrows {
        position: absolute;
        right: clamp(18px, 4vw, 56px);
        bottom: clamp(18px, 4vw, 38px);
        z-index: 30;
        display: flex;
        gap: 10px;
      }

      .pf-arrows button {
        width: 46px;
        height: 46px;
        border-radius: 50%;
        background: rgba(104, 206, 207, 0.92);
        color: #ffffff;
        border: none;
        font-size: 18px;
        font-weight: 800;
        cursor: pointer;
        transition: 0.3s;
      }

      .pf-arrows button:hover {
        background: #ffffff;
        color: #111827;
      }

      .pf-timeRunning {
        position: absolute;
        z-index: 40;
        width: 0%;
        height: 4px;
        background: linear-gradient(90deg, #68cecf, #a0cd45, #f876c0);
        left: 0;
        top: 0;
        animation: pfRunningTime 7s linear 1 forwards;
      }

      @keyframes pfRunningTime {
        from { width: 0%; }
        to { width: 100%; }
      }

      @media screen and (max-width: 980px) {
        .pf-carousel { min-height: 580px; }
        .pf-item .pf-content { left: 48px; width: calc(100% - 80px); }
        .pf-arrows {
          right: 32px;
          bottom: 24px;
        }
        .pf-carousel .pf-list .pf-item:nth-child(3) { left: 62%; }
        .pf-carousel .pf-list .pf-item:nth-child(4) { left: calc(62% + 170px); }
      }

      @media screen and (max-width: 720px) {
        .pf-carousel { min-height: 560px; }
        .pf-item .pf-content { left: 20px; width: calc(100% - 34px); top: 45%; }
        .pf-content .pf-name { line-height: 1.05; }
        .pf-content .pf-btn { flex-wrap: wrap; }
        .pf-arrows {
          right: 16px;
          bottom: 20px;
        }
        .pf-carousel .pf-list .pf-item {
          width: 120px;
          height: 170px;
          top: 84%;
          left: 62%;
        }
        .pf-carousel .pf-list .pf-item:nth-child(3) { left: 61%; }
        .pf-carousel .pf-list .pf-item:nth-child(4) { left: calc(61% + 130px); }
        .pf-carousel .pf-list .pf-item:nth-child(5) { left: calc(61% + 260px); }
      }