* {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }

 /* Theme Variables - Light Theme (Default) */
 :root {
     --bg-primary: #ffffff;
     --bg-secondary: #f5f5f7;
     --bg-tertiary: #e8e8ed;
     --bg-card: rgba(0, 0, 0, 0.03);
     --bg-card-hover: rgba(0, 0, 0, 0.05);
     --text-primary: #1d1d1f;
     --text-secondary: #515154;
     --text-tertiary: #86868b;
     --border-color: rgba(0, 0, 0, 0.1);
     --border-color-hover: rgba(0, 0, 0, 0.15);
     --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05);
     --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
     --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12);
     --gradient-primary: linear-gradient(135deg, #007AFF 0%, #0051D5 100%);
 }

 /* Dark Theme */
 body.dark-theme {
     --bg-primary: #000000;
     --bg-secondary: #1a1a1a;
     --bg-tertiary: #2d2d2d;
     --bg-card: rgba(255, 255, 255, 0.05);
     --bg-card-hover: rgba(255, 255, 255, 0.08);
     --text-primary: #ffffff;
     --text-secondary: #cccccc;
     --text-tertiary: #999999;
     --border-color: rgba(255, 255, 255, 0.1);
     --border-color-hover: rgba(255, 255, 255, 0.2);
     --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
     --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.2);
     --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.3);
     --gradient-primary: linear-gradient(135deg, #007AFF 0%, #00D4FF 100%);
 }

 body {
     font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
     background: var(--bg-primary);
     color: var(--text-primary);
     overflow-x: hidden;
     transition: background-color 0.3s ease, color 0.3s ease;
 }

 .container {
     max-width: 1200px;
     margin: 0 auto;
     padding: 40px 20px;
 }

 .header {
     text-align: center;
     margin-bottom: 80px;
 }

 .title {
     font-size: clamp(48px, 8vw, 80px);
     font-weight: 800;
     background: linear-gradient(135deg, #fff 0%, #ccc 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
     margin-bottom: 20px;
 }

 .subtitle {
     font-size: 24px;
     color: #ccc;
     margin-bottom: 40px;
 }

 .project-card {
     background: rgba(255, 255, 255, 0.05);
     backdrop-filter: blur(20px);
     border: 1px solid rgba(255, 255, 255, 0.1);
     border-radius: 20px;
     padding: 40px;
     margin-bottom: 60px;
     transition: all 0.3s ease;
 }

 .project-card:hover {
     transform: translateY(-10px);
     background: rgba(255, 255, 255, 0.08);
 }

 .project-title {
     font-size: 36px;
     font-weight: 700;
     margin-bottom: 20px;
     color: #007AFF;
 }

 .project-description {
     font-size: 18px;
     color: #ccc;
     margin-bottom: 30px;
     line-height: 1.6;
 }

 .screenshot-container {
     position: relative;
     margin: 40px 0;
     text-align: center;
 }

 .phone-mockup {
     display: inline-block;
     width: 200px;
     height: 400px;
     background: linear-gradient(145deg, #2c2c2e, #1c1c1e);
     border-radius: 30px;
     padding: 8px;
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
     position: relative;
     transition: all 0.3s ease;
 }

 .phone-mockup:hover {
     transform: scale(1.05) rotateY(5deg);
 }

 .phone-screen {
     width: 100%;
     height: 100%;
     background: #000;
     border-radius: 25px;
     overflow: hidden;
     position: relative;
 }

 .screenshot {
     width: 100%;
     height: 100%;
     object-fit: cover;
     border-radius: 25px;
 }

 .notch {
     position: absolute;
     top: 0;
     left: 50%;
     transform: translateX(-50%);
     width: 150px;
     height: 30px;
     background: #000;
     border-radius: 0 0 20px 20px;
     z-index: 2;
 }

 .features {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
     gap: 20px;
     margin: 40px 0;
 }

 .feature {
     background: rgba(255, 255, 255, 0.03);
     padding: 20px;
     border-radius: 15px;
     border: 1px solid rgba(255, 255, 255, 0.1);
 }

 .feature-icon {
     font-size: 24px;
     margin-bottom: 10px;
 }

 .feature-title {
     font-size: 18px;
     font-weight: 600;
     margin-bottom: 10px;
 }

 .feature-desc {
     font-size: 14px;
     color: #999;
     line-height: 1.5;
 }

 .tech-stack {
     display: flex;
     flex-wrap: wrap;
     gap: 10px;
     margin: 20px 0;
 }

 .tech-tag {
     background: rgba(0, 122, 255, 0.1);
     border: 1px solid rgba(0, 122, 255, 0.3);
     color: #007AFF;
     padding: 6px 15px;
     border-radius: 20px;
     font-size: 12px;
     font-weight: 500;
 }

 .metrics {
     display: flex;
     gap: 40px;
     justify-content: center;
     margin: 30px 0;
 }

 .metric {
     text-align: center;
 }

 .metric-value {
     font-size: 24px;
     font-weight: 700;
     color: #007AFF;
     display: block;
 }

 .metric-label {
     font-size: 12px;
     color: #999;
     text-transform: uppercase;
     letter-spacing: 0.5px;
 }

 .cta-buttons {
     display: flex;
     gap: 20px;
     justify-content: center;
     margin: 40px 0;
 }

 .btn {
     padding: 12px 24px;
     border-radius: 25px;
     font-weight: 600;
     text-decoration: none;
     transition: all 0.3s ease;
     border: none;
     cursor: pointer;
     display: inline-flex;
     align-items: center;
     gap: 8px;
 }

 .btn-primary {
     background: linear-gradient(135deg, #007AFF 0%, #00D4FF 100%);
     color: white;
 }

 .btn-secondary {
     background: rgba(255, 255, 255, 0.1);
     border: 1px solid rgba(255, 255, 255, 0.2);
     color: white;
 }

 .btn:hover {
     transform: translateY(-2px);
     box-shadow: 0 8px 25px rgba(0, 122, 255, 0.3);
 }

 .animation-demo {
     text-align: center;
     margin: 60px 0;
 }

 .floating-element {
     display: inline-block;
     animation: float 3s ease-in-out infinite;
 }

 @keyframes float {

     0%,
     100% {
         transform: translateY(0px);
     }

     50% {
         transform: translateY(-20px);
     }
 }

 .pulse-element {
     display: inline-block;
     animation: pulse 2s ease-in-out infinite;
 }

 @keyframes pulse {

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

     50% {
         transform: scale(1.1);
     }
 }

 @media (max-width: 768px) {
     .container {
         padding: 20px 15px;
     }

     .project-card {
         padding: 20px;
     }

     .phone-mockup {
         width: 150px;
         height: 300px;
     }

     .metrics {
         gap: 20px;
     }

     .cta-buttons {
         flex-direction: column;
         align-items: center;
     }
 }

 /* Navigation */
 .navigation {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     z-index: 1000;
     background: rgba(0, 0, 0, 0.8);
     backdrop-filter: blur(20px);
     border-bottom: 1px solid var(--border-color);
     transition: all 0.3s ease;
 }

 body.light-theme .navigation {
     background: rgba(255, 255, 255, 0.9);
     border-bottom: 1px solid var(--border-color);
 }

 .nav-container {
     max-width: 1200px;
     margin: 0 auto;
     padding: 0 40px;
     display: flex;
     align-items: center;
     justify-content: space-between;
     height: 80px;
 }

 .nav-logo {
     display: flex;
     align-items: center;
     gap: 12px;
     cursor: pointer;
 }

 .logo-icon {
     font-size: 32px;
 }

 .logo-text {
     font-size: 24px;
     font-weight: 700;
     background: linear-gradient(135deg, #fff 0%, #ccc 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
 }

 .nav-menu {
     display: flex;
     gap: 30px;
 }

 .nav-item {
     color: var(--text-secondary);
     text-decoration: none;
     font-weight: 500;
     transition: color 0.3s ease;
     padding: 10px 0;
 }

 .nav-item:hover,
 .nav-item.active {
     color: #007AFF;
 }

 /* Mobile Menu Toggle Button */
 .mobile-menu-toggle {
     display: none;
     flex-direction: column;
     justify-content: space-between;
     width: 30px;
     height: 24px;
     background: transparent;
     border: none;
     cursor: pointer;
     padding: 0;
     z-index: 1001;
     position: relative;
 }

 .hamburger-line {
     width: 100%;
     height: 3px;
     background: var(--text-primary);
     border-radius: 3px;
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     transform-origin: center;
 }

 /* Animated hamburger to X */
 .mobile-menu-toggle.active .hamburger-line:nth-child(1) {
     transform: translateY(10.5px) rotate(45deg);
 }

 .mobile-menu-toggle.active .hamburger-line:nth-child(2) {
     opacity: 0;
     transform: translateX(-20px);
 }

 .mobile-menu-toggle.active .hamburger-line:nth-child(3) {
     transform: translateY(-10.5px) rotate(-45deg);
 }

 /* Mobile Navigation Styles */
 @media (max-width: 768px) {
     .nav-container {
         padding: 0 20px;
     }

     .mobile-menu-toggle {
         display: flex;
     }

     .nav-menu {
         position: fixed;
         top: 80px;
         right: -100%;
         width: 280px;
         height: calc(100vh - 80px);
         background: var(--bg-primary);
         backdrop-filter: blur(20px);
         border-left: 1px solid var(--border-color);
         flex-direction: column;
         gap: 0;
         padding: 40px 0;
         transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
         box-shadow: -4px 0 20px rgba(0, 0, 0, 0.1);
         overflow-y: auto;
     }

     body.dark-theme .nav-menu {
         background: rgba(0, 0, 0, 0.95);
         border-left: 1px solid var(--border-color);
     }

     .nav-menu.active {
         right: 0;
     }

     .nav-item {
         padding: 18px 30px;
         font-size: 18px;
         border-bottom: 1px solid var(--border-color);
         transition: all 0.3s ease;
     }

     .nav-item:hover,
     .nav-item.active {
         background: var(--bg-card-hover);
         color: #007AFF;
         padding-left: 40px;
     }

     /* Hide logo text on mobile for more space */
     .logo-text {
         display: none;
     }
 }

 /* Tablet adjustments */
 @media (max-width: 1024px) and (min-width: 769px) {
     .nav-menu {
         gap: 20px;
     }

     .nav-container {
         padding: 0 30px;
     }
 }


 /* Floating Theme Toggle */
 .theme-toggle {
     position: fixed;
     bottom: 30px;
     right: 30px;
     width: 56px;
     height: 56px;
     border-radius: 50%;
     background: rgba(255, 255, 255, 0.95);
     backdrop-filter: blur(10px);
     border: 1px solid var(--border-color);
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     z-index: 999;
     box-shadow: var(--shadow-lg);
 }

 body.dark-theme .theme-toggle {
     background: rgba(0, 0, 0, 0.8);
     border: 1px solid var(--border-color);
 }

 .theme-toggle:hover {
     transform: scale(1.1) rotate(10deg);
     box-shadow: 0 12px 40px rgba(0, 122, 255, 0.3);
     border-color: #007AFF;
 }

 .theme-toggle svg {
     width: 24px;
     height: 24px;
     position: absolute;
     transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
 }

 .sun-icon {
     opacity: 0;
     transform: rotate(90deg) scale(0);
 }

 .moon-icon {
     opacity: 1;
     transform: rotate(0deg) scale(1);
 }

 body.dark-theme .sun-icon {
     opacity: 1;
     transform: rotate(0deg) scale(1);
 }

 body.dark-theme .moon-icon {
     opacity: 0;
     transform: rotate(-90deg) scale(0);
 }

 /* Mobile theme toggle */
 @media (max-width: 768px) {
     .hero-content {
         max-width: 600px;
         margin-right: 40px;
         display: flex;
         flex-direction: column;
         justify-content: space-between;
     }

     .theme-toggle {
         width: 50px;
         height: 50px;
         bottom: 20px;
         right: 20px;
     }

     .theme-toggle svg {
         width: 20px;
         height: 20px;
     }
 }

 /* Hero Section */
 .hero-section {
     min-height: 90vh;
     display: flex;
     align-items: center;
     padding: 100px 0;
     background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
     transition: background 0.3s ease;
 }

 .hero-content {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 80px;
     align-items: center;
 }

 .offers-grid-full {
     grid-template-columns: 1fr 1fr;
 }

 .offer-price {
     display: flex;
     align-items: baseline;
     gap: 4px;
 }

 .greeting {
     display: flex;
     align-items: center;
     gap: 15px;
     font-size: 20px;
     color: #ccc;
     margin-bottom: 20px;
 }

 .wave {
     font-size: 24px;
     animation: wave 2s ease-in-out infinite;
 }

 @keyframes wave {

     0%,
     100% {
         transform: rotate(0deg);
     }

     25% {
         transform: rotate(20deg);
     }

     75% {
         transform: rotate(-10deg);
     }
 }

 .hero-title {
     font-size: clamp(48px, 8vw, 96px);
     font-weight: 800;
     line-height: 1.1;
     margin-bottom: 30px;
 }

 .name {
     background: linear-gradient(135deg, #007AFF 0%, #00D4FF 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
 }

 .title-text {
     color: white;
 }

 .hero-description {
     font-size: 20px;
     color: #ccc;
     line-height: 1.6;
     margin-bottom: 40px;
 }

 /* ==================== SECTION TITLES ==================== */
 .section-header {
     text-align: center;
     margin-bottom: 80px;
     position: relative;
     padding: 0 20px;
     animation: fadeInUp 0.8s ease-out;
 }

 .section-title {
     font-size: 3.5rem;
     font-weight: 700;
     margin: 0 0 20px 0;
     padding: 0;
     display: inline-block;
     background: linear-gradient(135deg, #ffffff 0%, #e0e0e0 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
     position: relative;
     letter-spacing: -1px;
     line-height: 1.2;
 }

 /* Sparkle emoji or icon after title */
 .section-title::after {
     content: '✨';
     position: absolute;
     margin-left: 15px;
     font-size: 0.7em;
     animation: sparkle 2s ease-in-out infinite;
     -webkit-text-fill-color: initial;
     background: none;
 }

 @keyframes sparkle {

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

     50% {
         opacity: 0.6;
         transform: scale(1.1) rotate(10deg);
     }
 }

 .section-subtitle {
     font-size: 1.1rem;
     color: #8b8b8b;
     max-width: 700px;
     margin: 0 auto;
     line-height: 1.7;
     font-weight: 400;
     opacity: 0;
     animation: fadeIn 1s ease-out 0.3s forwards;
 }

 /* Fade in animations */
 @keyframes fadeInUp {
     from {
         opacity: 0;
         transform: translateY(30px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 @keyframes fadeIn {
     from {
         opacity: 0;
     }

     to {
         opacity: 1;
     }
 }

 /* Dark theme adjustments */
 body.dark-theme .section-title {
     background: linear-gradient(135deg, #ffffff 0%, #b0b0b0 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
 }

 body.dark-theme .section-subtitle {
     color: #a0a0a0;
 }

 /* Light theme adjustments */
 body:not(.dark-theme) .section-title {
     background: linear-gradient(135deg, #1a1a1a 0%, #4a4a4a 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
 }

 body:not(.dark-theme) .section-subtitle {
     color: #666;
 }

 /* Responsive adjustments */
 @media (max-width: 768px) {
     .section-header {
         margin-bottom: 50px;
     }

     .section-title {
         font-size: 2.5rem;
         letter-spacing: -0.5px;
     }

     .section-title::after {
         font-size: 0.6em;
         margin-left: 10px;
     }

     .section-subtitle {
         font-size: 1rem;
         padding: 0 15px;
     }
 }

 @media (max-width: 480px) {
     .section-title {
         font-size: 2rem;
     }

     .section-subtitle {
         font-size: 0.95rem;
     }
 }

 /* ==================== PROMINENT TITLE STYLE ==================== */
 /* Use this class for large, eye-catching animated gradient titles */
 /* Example: <h2 class="prominent-title"><span class="gradient-text">Ready to Build Something Amazing? 🚀</span></h2> */

 .prominent-title {
     font-size: clamp(32px, 6vw, 56px);
     font-weight: 800;
     margin-bottom: 20px;
     line-height: 1.2;
     letter-spacing: -1px;
     text-align: center;
     color: var(--text-primary);
 }

 /* Gradient text span inside prominent titles */
 .prominent-title .gradient-text {
     background: linear-gradient(135deg, #ffffff 0%, #007AFF 50%, #00D4FF 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
     background-size: 200% 200%;
     animation: gradientShift 3s ease infinite;
 }

 /* Light theme gradient text */
 body.light-theme .prominent-title .gradient-text {
     background: linear-gradient(135deg, #1d1d1f 0%, #007AFF 50%, #00D4FF 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
     background-size: 200% 200%;
 }

 /* Gradient animation for prominent titles */
 @keyframes gradientShift {

     0%,
     100% {
         background-position: 0% 50%;
     }

     50% {
         background-position: 100% 50%;
     }
 }

 /* Prominent subtitle - pairs with prominent-title */
 .prominent-subtitle {
     font-size: clamp(16px, 3vw, 22px);
     color: rgba(255, 255, 255, 0.7);
     max-width: 700px;
     margin: 0 auto 40px;
     line-height: 1.6;
     text-align: center;
 }

 body.light-theme .prominent-subtitle {
     color: rgba(0, 0, 0, 0.65);
 }

 /* Responsive adjustments for prominent titles */
 @media (max-width: 768px) {
     .prominent-title {
         letter-spacing: -0.5px;
         margin-bottom: 16px;
     }

     .prominent-subtitle {
         margin-bottom: 32px;
     }
 }

 /* want all item in same line */
 .hero-stats {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     margin: 0;
     padding: 8px 0;
     border-top: 1px solid rgba(255, 255, 255, 0.1);
     border-bottom: 1px solid rgba(255, 255, 255, 0.1);
     width: 100%;
     max-width: 100%;
     align-self: flex-end;
 }

 .hero-stats::-webkit-scrollbar {
     display: none;
 }

 .stat-item {
     text-align: center;
     padding: 0 5px;
     position: relative;
     display: flex;
     flex-direction: column;
     justify-content: center;
     height: 100%;
 }

 /* Add divider between items except the last one */
 .stat-item:not(:last-child)::after {
     content: '';
     position: absolute;
     right: 0;
     top: 50%;
     transform: translateY(-50%);
     width: 1px;
     height: 30px;
     background-color: rgba(255, 255, 255, 0.1);
 }

 .stat-number {
     display: block;
     font-size: 24px;
     font-weight: 700;
     color: #007AFF;
     margin-bottom: 2px;
     line-height: 1.2;
 }

 .stat-label {
     font-size: 12px;
     color: #a0a0a0;
     font-weight: 400;
     line-height: 1.3;
 }

 .stat-divider {
     width: 1px;
     height: 40px;
     background: rgba(255, 255, 255, 0.2);
 }

 .hero-actions {
     display: flex;
     gap: 20px;
 }

 .cta-button {
     display: flex;
     align-items: center;
     gap: 10px;
     padding: 18px 32px;
     border-radius: 50px;
     font-size: 16px;
     font-weight: 600;
     text-decoration: none;
     transition: all 0.3s ease;
 }

 .cta-button.primary {
     background: linear-gradient(135deg, #007AFF 0%, #00D4FF 100%);
     color: white;
     box-shadow: 0 8px 25px rgba(0, 122, 255, 0.3);
 }

 .cta-button.primary:hover {
     box-shadow: 0 12px 35px rgba(0, 122, 255, 0.4);
     transform: translateY(-2px);
 }

 .cta-button.secondary {
     background: rgba(255, 255, 255, 0.1);
     border: 1px solid rgba(255, 255, 255, 0.2);
     color: white;
 }

 .cta-button.secondary:hover {
     background: rgba(255, 255, 255, 0.15);
     border-color: rgba(255, 255, 255, 0.3);
     transform: translateY(-2px);
 }

 .hero-visual {
     display: flex;
     justify-content: center;
 }

 .phone-stack {
     position: relative;
     width: 200px;
     height: 400px;
 }

 .phone {
     position: absolute;
     width: 200px;
     height: 400px;
     background: linear-gradient(145deg, #2c2c2e, #1c1c1e);
     border-radius: 30px;
     padding: 8px;
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
     animation: float 3s ease-in-out infinite;
 }

 .phone-1 {
     animation-delay: 0s;
 }

 @keyframes float {

     0%,
     100% {
         transform: translateY(0px);
     }

     50% {
         transform: translateY(-20px);
     }
 }

 .phone-screen {
     width: 100%;
     height: 100%;
     background: #000;
     border-radius: 25px;
     overflow: hidden;
     position: relative;
 }

 .phone-screen img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     object-position: center;
     display: block;
 }

 .screen-content {
     padding: 20px;
     height: 100%;
     display: flex;
     flex-direction: column;
     gap: 20px;
 }

 .app-header {
     font-size: 16px;
     font-weight: 700;
     color: white;
     text-align: center;
 }

 .app-content {
     flex: 1;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     gap: 20px;
 }

 .progress-ring {
     width: 80px;
     height: 80px;
     border-radius: 50%;
     background: conic-gradient(#007AFF 0deg, #007AFF 270deg, #333 270deg, #333 360deg);
     display: flex;
     align-items: center;
     justify-content: center;
     position: relative;
 }

 .ring-fill {
     width: 60px;
     height: 60px;
     border-radius: 50%;
     background: #000;
 }

 .app-stats {
     display: flex;
     flex-direction: column;
     gap: 8px;
     width: 100%;
 }

 .stat {
     font-size: 12px;
     color: #ccc;
     text-align: center;
 }

 /* About Section */
 .about-section {
     padding: 100px 0;
     background: linear-gradient(135deg, #1a1a1a 0%, #000 100%);
 }

 /* Light Mode - About Section */
 body.light-theme .about-section {
     background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
 }

 body.light-theme .about-title {
     color: #1d1d1f;
 }

 body.light-theme .about-description {
     color: #515154;
 }

 .about-content {
     max-width: 1200px;
     margin: 0 auto;
     padding: 0 40px;
 }

 .about-hero {
     display: flex;
     align-items: center;
     gap: 60px;
 }

 .project-image-img {
     width: 100%;
     height: 100%;
     object-fit: cover;
 }

 .about-hero .profile-image {
     width: 200px;
     height: 200px;
     border-radius: 50%;
     overflow: hidden;
     display: flex;
     align-items: center;
     justify-content: center;
     border: 2px solid #ccc;
 }

 .about-hero .profile-image img {
     width: 100%;
     height: 100%;
     object-fit: cover;
 }

 .profile-placeholder {
     width: 200px;
     height: 200px;
     background: linear-gradient(135deg, #007AFF 0%, #00D4FF 100%);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     animation: pulse-glow 3s ease-in-out infinite;
 }

 @keyframes pulse-glow {

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

     50% {
         transform: scale(1.05);
     }
 }

 .profile-icon {
     font-size: 80px;
 }

 .about-text {
     flex: 1;
 }

 .about-title {
     font-size: 48px;
     font-weight: 700;
     color: white;
     margin-bottom: 20px;
 }

 .about-description {
     font-size: 18px;
     color: #ccc;
     line-height: 1.6;
     margin-bottom: 40px;
 }

 .get-in-touch-link {
     position: relative;
     color: #007AFF;
     font-weight: 600;
     text-decoration: none;
     background: linear-gradient(135deg, #007AFF, #00D4FF);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
     transition: all 0.3s ease;
     padding: 2px 4px;
 }

 .get-in-touch-link::before {
     content: '';
     position: absolute;
     bottom: 0;
     left: 0;
     width: 100%;
     height: 2px;
     background: linear-gradient(90deg, #007AFF, #00D4FF);
     transform: scaleX(0);
     transform-origin: right;
     transition: transform 0.3s ease;
 }

 .get-in-touch-link:hover::before {
     transform: scaleX(1);
     transform-origin: left;
 }

 .get-in-touch-link::after {
     content: '→';
     margin-left: 4px;
     display: inline-block;
     transition: transform 0.3s ease;
 }

 .get-in-touch-link:hover::after {
     transform: translateX(4px);
 }

 .get-in-touch-link:hover {
     background: linear-gradient(135deg, #00D4FF, #007AFF);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
 }

 .skills-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
     gap: 20px;
 }

 .skill-item {
     display: flex;
     align-items: center;
     gap: 10px;
     padding: 15px;
     background: rgba(255, 255, 255, 0.05);
     border-radius: 12px;
     border: 1px solid rgba(255, 255, 255, 0.1);
     transition: all 0.3s ease;
 }

 .skill-item:hover {
     background: rgba(255, 255, 255, 0.08);
     transform: translateY(-2px);
 }

 .skill-icon {
     font-size: 24px;
 }

 .skill-name {
     font-size: 16px;
     color: white;
     font-weight: 500;
 }

 /* Contact Section */
 .contact-section {
     padding: 100px 0;
     background: linear-gradient(135deg, #000 0%, #1a1a1a 100%);
 }

 .contact-content {
     max-width: 1200px;
     margin: 0 auto;
     padding: 0 40px;
 }

 .contact-header {
     text-align: center;
     margin-bottom: 80px;
 }

 /* ==================== SECTION TITLES ==================== */

 .section-subtitle {
     font-size: 20px;
     color: #ccc;
     max-width: 600px;
     margin: 0 auto 30px;
     line-height: 1.6;
 }

 body.light-theme .section-subtitle {
     color: #515154;
 }

 .quick-contact-buttons {
     display: flex;
     gap: 20px;
     justify-content: center;
     align-items: center;
     margin-top: 30px;
     flex-wrap: wrap;
 }

 .quick-btn {
     display: inline-flex;
     align-items: center;
     gap: 10px;
     padding: 14px 28px;
     border-radius: 12px;
     font-size: 16px;
     font-weight: 600;
     text-decoration: none;
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     position: relative;
     overflow: hidden;
 }

 .quick-btn svg {
     transition: transform 0.3s ease;
 }

 .quick-btn:hover svg {
     transform: scale(1.1) rotate(5deg);
 }

 .whatsapp-btn {
     background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
     color: white;
     box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3);
 }

 .whatsapp-btn:hover {
     background: linear-gradient(135deg, #2BE073 0%, #149B8D 100%);
     box-shadow: 0 6px 25px rgba(37, 211, 102, 0.5);
     transform: translateY(-3px);
 }

 .email-btn {
     background: linear-gradient(135deg, #007AFF 0%, #0051D5 100%);
     color: white;
     box-shadow: 0 4px 15px rgba(0, 122, 255, 0.3);
 }

 .email-btn:hover {
     background: linear-gradient(135deg, #0088FF 0%, #0062E6 100%);
     box-shadow: 0 6px 25px rgba(0, 122, 255, 0.5);
     transform: translateY(-3px);
 }

 .contact-info-wrapper {
     display: flex;
     justify-content: center;
     margin-top: 60px;
     max-width: 600px;
     margin-left: auto;
     margin-right: auto;
 }

 .form-title {
     font-size: 32px;
     font-weight: 700;
     color: white;
     margin-bottom: 30px;
 }

 .contact-form {
     display: flex;
     flex-direction: column;
     gap: 25px;
 }

 .form-group {
     display: flex;
     flex-direction: column;
     gap: 8px;
 }

 .form-label {
     font-size: 14px;
     font-weight: 600;
     color: #ccc;
 }

 .form-input,
 .form-textarea {
     background: rgba(255, 255, 255, 0.05);
     border: 1px solid rgba(255, 255, 255, 0.1);
     border-radius: 12px;
     padding: 15px 20px;
     color: white;
     font-size: 16px;
     transition: all 0.3s ease;
 }

 .form-input:focus,
 .form-textarea:focus {
     outline: none;
     border-color: #007AFF;
     background: rgba(255, 255, 255, 0.08);
 }

 .form-input::placeholder,
 .form-textarea::placeholder {
     color: #666;
 }

 .form-textarea {
     min-height: 120px;
     resize: vertical;
 }

 .submit-button {
     background: linear-gradient(135deg, #007AFF 0%, #00D4FF 100%);
     color: white;
     border: none;
     border-radius: 12px;
     padding: 18px 30px;
     font-size: 16px;
     font-weight: 600;
     cursor: pointer;
     transition: all 0.3s ease;
 }

 .submit-button:hover {
     box-shadow: 0 8px 25px rgba(0, 122, 255, 0.3);
     transform: translateY(-2px);
 }

 .contact-info {
     display: flex;
     flex-direction: column;
     gap: 40px;
     width: 100%;
 }

 .location-card {
     background: linear-gradient(135deg, rgba(0, 122, 255, 0.1) 0%, rgba(0, 212, 255, 0.05) 100%);
     border: 2px solid rgba(0, 122, 255, 0.3);
     border-radius: 20px;
     padding: 30px;
     display: flex;
     align-items: center;
     gap: 20px;
     transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
     position: relative;
     overflow: hidden;
 }

 body.light-theme .location-card {
     background: linear-gradient(135deg, rgba(0, 122, 255, 0.08) 0%, rgba(0, 212, 255, 0.04) 100%);
     border: 2px solid rgba(0, 122, 255, 0.25);
     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
 }

 body.light-theme .location-card:hover {
     border-color: rgba(0, 122, 255, 0.5);
     box-shadow: 0 8px 30px rgba(0, 122, 255, 0.2);
 }

 .location-card::before {
     content: '';
     position: absolute;
     top: -50%;
     right: -50%;
     width: 200%;
     height: 200%;
     background: radial-gradient(circle, rgba(0, 122, 255, 0.1), transparent 70%);
     animation: pulse 3s ease-in-out infinite;
 }

 @keyframes pulse {

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

     50% {
         transform: scale(1.1);
         opacity: 0.8;
     }
 }

 .location-card:hover {
     transform: translateY(-5px);
     border-color: rgba(0, 122, 255, 0.6);
     box-shadow: 0 15px 40px rgba(0, 122, 255, 0.3);
 }

 .location-card .info-icon {
     font-size: 36px;
     width: 70px;
     height: 70px;
     background: linear-gradient(135deg, rgba(0, 122, 255, 0.3) 0%, rgba(0, 212, 255, 0.2) 100%);
     border: 2px solid rgba(0, 122, 255, 0.4);
     border-radius: 18px;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
     transition: all 0.4s ease;
     position: relative;
     z-index: 1;
 }

 .location-card:hover .info-icon {
     transform: rotate(-10deg) scale(1.15);
     box-shadow: 0 10px 30px rgba(0, 122, 255, 0.4);
 }

 .location-card .info-content {
     position: relative;
     z-index: 1;
 }

 .location-card .info-content h4 {
     font-size: 20px;
     font-weight: 700;
     color: white;
     margin-bottom: 8px;
     letter-spacing: 0.5px;
 }

 body.light-theme .location-card .info-content h4 {
     color: #1d1d1f;
 }

 .location-card .info-content p {
     font-size: 17px;
     color: #e0e0e0;
     font-weight: 500;
 }

 body.light-theme .location-card .info-content p {
     color: #515154;
 }

 .social-section {
     text-align: center;
 }

 .social-title {
     font-size: 28px;
     font-weight: 700;
     background: linear-gradient(135deg, #ffffff 0%, #007AFF 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
     margin-bottom: 30px;
     position: relative;
     display: inline-block;
 }

 .social-title::after {
     content: '';
     position: absolute;
     bottom: -10px;
     left: 50%;
     transform: translateX(-50%);
     width: 60px;
     height: 3px;
     background: linear-gradient(90deg, #007AFF, #00D4FF);
     border-radius: 2px;
     animation: expandLine 0.6s ease-out forwards;
 }

 @keyframes expandLine {
     from {
         width: 0;
     }

     to {
         width: 60px;
     }
 }

 .contact-info-item {
     display: flex;
     align-items: center;
     gap: 20px;
     padding: 28px;
     background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
     border: 1px solid rgba(255, 255, 255, 0.1);
     border-radius: 16px;
     transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
     position: relative;
     overflow: hidden;
     cursor: pointer;
 }

 .contact-info-item::before {
     content: '';
     position: absolute;
     top: 0;
     left: -100%;
     width: 100%;
     height: 100%;
     background: linear-gradient(90deg, transparent, rgba(0, 122, 255, 0.1), transparent);
     transition: left 0.5s ease;
 }

 .contact-info-item:hover::before {
     left: 100%;
 }

 .contact-info-item:hover {
     background: linear-gradient(135deg, rgba(0, 122, 255, 0.15) 0%, rgba(0, 212, 255, 0.05) 100%);
     border-color: rgba(0, 122, 255, 0.5);
     transform: translateX(12px) scale(1.02);
     box-shadow: 0 10px 40px rgba(0, 122, 255, 0.2);
 }

 .info-icon {
     font-size: 28px;
     width: 60px;
     height: 60px;
     background: linear-gradient(135deg, rgba(0, 122, 255, 0.2) 0%, rgba(0, 212, 255, 0.1) 100%);
     border: 1px solid rgba(0, 122, 255, 0.3);
     border-radius: 14px;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
     flex-shrink: 0;
 }

 .contact-info-item:hover .info-icon {
     transform: rotate(10deg) scale(1.1);
     background: linear-gradient(135deg, rgba(0, 122, 255, 0.3) 0%, rgba(0, 212, 255, 0.2) 100%);
     box-shadow: 0 8px 20px rgba(0, 122, 255, 0.3);
 }

 .info-content {
     flex: 1;
 }

 .info-content h4 {
     font-size: 18px;
     font-weight: 600;
     color: white;
     margin-bottom: 6px;
     letter-spacing: 0.3px;
 }

 .info-content p {
     font-size: 15px;
     color: #b0b0b0;
     line-height: 1.5;
     transition: color 0.3s ease;
 }

 .contact-info-item:hover .info-content p {
     color: #e0e0e0;
 }

 .social-links {
     margin-top: 10px;
 }

 .social-links h4 {
     font-size: 22px;
     font-weight: 600;
     color: white;
     margin-bottom: 24px;
     position: relative;
     display: inline-block;
 }

 .social-links h4::after {
     content: '';
     position: absolute;
     bottom: -8px;
     left: 0;
     width: 40px;
     height: 3px;
     background: linear-gradient(90deg, #007AFF, #00D4FF);
     border-radius: 2px;
 }

 .social-grid {
     display: flex;
     gap: 20px;
     justify-content: center;
     flex-wrap: wrap;
 }

 .social-link {
     display: flex;
     align-items: center;
     gap: 12px;
     padding: 16px 32px;
     background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.03) 100%);
     border: 2px solid rgba(255, 255, 255, 0.15);
     border-radius: 16px;
     color: white;
     text-decoration: none;
     font-weight: 600;
     font-size: 16px;
     transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
     position: relative;
     overflow: hidden;
 }

 .social-link svg {
     transition: all 0.4s ease;
 }

 .social-link::before {
     content: '';
     position: absolute;
     top: 0;
     left: -100%;
     width: 100%;
     height: 100%;
     background: linear-gradient(90deg, transparent, rgba(0, 122, 255, 0.2), transparent);
     transition: left 0.6s ease;
 }

 .social-link:hover::before {
     left: 100%;
 }

 .social-link:hover {
     background: linear-gradient(135deg, rgba(0, 122, 255, 0.2) 0%, rgba(0, 212, 255, 0.1) 100%);
     border-color: rgba(0, 122, 255, 0.5);
     transform: translateY(-4px);
     box-shadow: 0 10px 30px rgba(0, 122, 255, 0.3);
 }

 .social-link:hover svg {
     transform: scale(1.2) rotate(5deg);
 }

 /* Light Theme - Social Links */
 body.light-theme .social-link {
     background: rgba(0, 0, 0, 0.04);
     border: 2px solid rgba(0, 0, 0, 0.12);
     color: #1d1d1f;
 }

 body.light-theme .social-link:hover {
     background: rgba(0, 122, 255, 0.1);
     border-color: rgba(0, 122, 255, 0.4);
     box-shadow: 0 10px 30px rgba(0, 122, 255, 0.15);
 }

 /* Responsive Design */
 @media (max-width: 768px) {
     .hero-content {
         grid-template-columns: 1fr;
         text-align: center;
     }

     .about-hero {
         flex-direction: column;
         text-align: center;
     }

     .contact-info-wrapper {
         margin-top: 40px;
         padding: 0 20px;
     }

     .section-title {
         font-size: 32px;
     }

     .section-subtitle {
         font-size: 18px;
     }

     .quick-contact-buttons {
         gap: 12px;
         margin-top: 24px;
     }

     .quick-btn {
         padding: 12px 24px;
         font-size: 15px;
         gap: 8px;
     }

     .info-title {
         font-size: 28px;
         margin-bottom: 20px;
     }

     .info-title::after {
         width: 50px;
         height: 3px;
     }

     .contact-info-item {
         padding: 20px;
         gap: 16px;
     }

     .contact-info-item:hover {
         transform: translateX(8px) scale(1.01);
     }

     .location-card {
         padding: 24px;
         gap: 16px;
     }

     .location-card .info-icon {
         font-size: 30px;
         width: 60px;
         height: 60px;
     }

     .location-card .info-content h4 {
         font-size: 18px;
     }

     .location-card .info-content p {
         font-size: 15px;
     }

     .social-title {
         font-size: 24px;
         margin-bottom: 24px;
     }

     .social-grid {
         gap: 14px;
     }

     .social-link {
         padding: 14px 28px;
         font-size: 15px;
     }

     .nav-menu {
         display: none;
     }

     .hero-stats {
         justify-content: center;
     }

     .hero-actions {
         justify-content: center;
     }

     .phone-stack {
         width: 280px;
         height: 560px;
     }

     .phone {
         width: 280px;
         height: 560px;
     }

     .phone-screen img {
         width: 100%;
         height: 100%;
         object-fit: cover;
         object-position: center;
     }
 }

 /* Showcase Grid */
 .showcase-grid {
     display: flex;
     flex-direction: column;
     gap: 50px;
     padding: 0;
     margin: 0;
 }

 /* Category Section */
 .showcase-category-section {
     width: 100%;
 }

 .category-header {
     display: flex;
     align-items: center;
     gap: 16px;
     padding: 20px 24px;
     background: linear-gradient(135deg, rgba(0, 122, 255, 0.08) 0%, rgba(0, 212, 255, 0.05) 100%);
     border: 1px solid rgba(0, 122, 255, 0.2);
     border-radius: 16px;
     margin-bottom: 24px;
     position: relative;
     overflow: hidden;
 }

 body.light-theme .category-header {
     background: linear-gradient(135deg, rgba(0, 122, 255, 0.06) 0%, rgba(0, 212, 255, 0.03) 100%);
     border-color: rgba(0, 122, 255, 0.15);
 }

 .category-header::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 4px;
     height: 100%;
     background: linear-gradient(180deg, #007AFF 0%, #00D4FF 100%);
 }

 .category-icon {
     font-size: 32px;
     width: 56px;
     height: 56px;
     display: flex;
     align-items: center;
     justify-content: center;
     background: rgba(0, 122, 255, 0.1);
     border-radius: 12px;
     border: 1px solid rgba(0, 122, 255, 0.2);
 }

 body.light-theme .category-icon {
     background: rgba(0, 122, 255, 0.08);
 }

 .category-info {
     flex: 1;
 }

 .category-title {
     font-size: 22px;
     font-weight: 700;
     margin: 0 0 4px 0;
     color: var(--text-primary);
     letter-spacing: 0.5px;
 }

 .category-description {
     font-size: 14px;
     color: rgba(255, 255, 255, 0.7);
     margin: 0;
 }

 body.light-theme .category-description {
     color: rgba(0, 0, 0, 0.6);
 }

 .category-count {
     font-size: 13px;
     font-weight: 600;
     padding: 6px 14px;
     background: rgba(0, 122, 255, 0.15);
     color: #00D4FF;
     border-radius: 20px;
     border: 1px solid rgba(0, 122, 255, 0.3);
 }

 body.light-theme .category-count {
     background: rgba(0, 122, 255, 0.12);
     color: #007AFF;
 }

 .category-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
     gap: 30px;
     width: 100%;
 }

 /* Projects Grid */
 .projects-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
     gap: 30px;
     padding: 0 20px;
     margin: 40px 0;
 }

 .project-card {
     background: rgba(255, 255, 255, 0.05);
     backdrop-filter: blur(20px);
     border: 1px solid rgba(255, 255, 255, 0.1);
     border-radius: 20px;
     overflow: hidden;
     cursor: pointer;
     transition: all 0.3s ease;
     position: relative;
 }

 .project-card:hover {
     background: rgba(255, 255, 255, 0.08);
     border-color: rgba(255, 255, 255, 0.2);
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
     transform: translateY(-10px);
 }

 .project-image {
     position: relative;
     height: 200px;
     display: flex;
     align-items: center;
     justify-content: center;
     background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
     overflow: hidden;
 }

 .project-overlay {
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: rgba(0, 0, 0, 0.8);
     display: flex;
     align-items: center;
     justify-content: center;
     opacity: 0;
     transition: all 0.3s ease;
     z-index: 2;
 }

 .project-card:hover .project-overlay {
     opacity: 1;
 }

 .overlay-content {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 10px;
     color: white;
     font-weight: 600;
 }

 .view-text {
     font-size: 18px;
 }

 .project-info {
     padding: 20px;
 }

 .project-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 15px;
 }

 .project-badge {
     display: inline-block;
 }

 .badge-text {
     background: linear-gradient(135deg, #007AFF 0%, #00D4FF 100%);
     color: white;
     padding: 6px 12px;
     border-radius: 15px;
     font-size: 12px;
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: 0.5px;
 }

 .project-platforms {
     display: flex;
     gap: 8px;
 }

 .platform-tag {
     background: rgba(255, 255, 255, 0.1);
     color: #ccc;
     padding: 4px 8px;
     border-radius: 8px;
     font-size: 11px;
     font-weight: 500;
 }

 .project-title {
     font-size: 20px;
     font-weight: 700;
     color: white;
     margin-bottom: 8px;
 }

 .project-description {
     font-size: 14px;
     color: #ccc;
     line-height: 1.5;
     margin-bottom: 15px;
 }

 .project-metrics {
     display: flex;
     gap: 20px;
     margin-bottom: 15px;
     padding: 12px 0;
     border-top: 1px solid rgba(255, 255, 255, 0.1);
     border-bottom: 1px solid rgba(255, 255, 255, 0.1);
 }

 .metric {
     text-align: center;
 }

 .metric-value {
     display: block;
     font-size: 20px;
     font-weight: 700;
     color: #007AFF;
     margin-bottom: 4px;
 }

 .metric-label {
     font-size: 12px;
     color: #999;
     text-transform: uppercase;
     letter-spacing: 0.5px;
     font-weight: 500;
 }

 .tech-stack {
     display: flex;
     flex-wrap: wrap;
     gap: 8px;

 }

 .tech-tag {
     background: rgba(0, 122, 255, 0.1);
     border: 1px solid rgba(0, 122, 255, 0.3);
     color: #007AFF;
     padding: 5px 10px;
     border-radius: 12px;
     font-size: 11px;
     font-weight: 500;
 }

 body.light-theme .tech-tag {
     background: rgba(0, 122, 255, 0.08);
     border: 1px solid rgba(0, 122, 255, 0.25);
 }

 .tech-tag.more {
     background: rgba(255, 255, 255, 0.1);
     border-color: rgba(255, 255, 255, 0.2);
     color: #ccc;
 }

 body.light-theme .tech-tag.more {
     background: rgba(0, 0, 0, 0.05);
     border-color: rgba(0, 0, 0, 0.12);
     color: #515154;
 }

 /* Modal Styles */
 .project-modal-overlay {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: rgba(0, 0, 0, 0.9);
     backdrop-filter: blur(20px);
     display: none;
     align-items: center;
     justify-content: center;
     z-index: 1000;
     padding: 20px;
 }

 body.light-theme .project-modal-overlay {
     background: rgba(0, 0, 0, 0.5);
 }

 .project-modal-overlay.active {
     display: flex;
 }

 .project-modal {
     background: rgba(0, 0, 0, 0.95);
     backdrop-filter: blur(20px);
     border: 1px solid rgba(255, 255, 255, 0.1);
     border-radius: 20px;
     max-width: 1200px;
     width: 100%;
     max-height: 90vh;
     overflow-y: auto;
     overflow-x: hidden;
     animation: modalSlideIn 0.3s ease-out;
     -webkit-overflow-scrolling: touch;
     scroll-behavior: smooth;
 }

 body.light-theme .project-modal {
     background: rgba(255, 255, 255, 0.98);
     border: 1px solid rgba(0, 0, 0, 0.1);
     box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
 }

 @keyframes modalSlideIn {
     from {
         transform: scale(0.8);
         opacity: 0;
     }

     to {
         transform: scale(1);
         opacity: 1;
     }
 }

 .modal-header {
     display: flex;
     justify-content: space-between;
     align-items: flex-start;
     padding: 30px 30px 20px;
     border-bottom: 1px solid rgba(255, 255, 255, 0.1);
 }

 body.light-theme .modal-header {
     border-bottom: 1px solid rgba(0, 0, 0, 0.1);
 }

 .modal-title-section {
     flex: 1;
 }

 .modal-title {
     font-size: 32px;
     font-weight: 700;
     color: white;
     margin-bottom: 8px;
 }

 body.light-theme .modal-title {
     color: #1d1d1f;
 }

 .modal-subtitle {
     font-size: 18px;
     color: #ccc;
     line-height: 1.5;
 }

 body.light-theme .modal-subtitle {
     color: #515154;
 }

 .close-button {
     width: 40px;
     height: 40px;
     background: rgba(255, 255, 255, 0.1);
     border: 1px solid rgba(255, 255, 255, 0.2);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     color: white;
     cursor: pointer;
 }

 body.light-theme .close-button {
     background: rgba(0, 0, 0, 0.05);
     border: 1px solid rgba(0, 0, 0, 0.1);
     color: #1d1d1f;
 }

 .close-button:hover {
     background: rgba(255, 255, 255, 0.2);
     border-color: rgba(255, 255, 255, 0.3);
     transform: scale(1.1);
 }

 body.light-theme .close-button:hover {
     background: rgba(0, 0, 0, 0.1);
     border-color: rgba(0, 0, 0, 0.15);
 }

 .modal-content {
     padding: 30px;
 }

 .project-modal::-webkit-scrollbar {
     width: 8px;
 }

 .project-modal::-webkit-scrollbar-track {
     background: rgba(255, 255, 255, 0.05);
     border-radius: 10px;
 }

 .project-modal::-webkit-scrollbar-thumb {
     background: rgba(0, 122, 255, 0.5);
     border-radius: 10px;
 }

 .project-modal::-webkit-scrollbar-thumb:hover {
     background: rgba(0, 122, 255, 0.7);
 }

 .modal-screenshots {
     margin-bottom: 40px;
 }

 .image-slider {
     position: relative;
     width: 100%;
     max-width: 800px;
     margin: 0 auto;
     border-radius: 20px;
     overflow: hidden;
 }

 .slider-container {
     display: flex;
     transition: transform 0.5s ease-in-out;
 }

 .slider-image {
     min-width: 100%;
     height: 500px;
     object-fit: contain;
     background: rgba(0, 0, 0, 0.3);
     border-radius: 20px;
 }

 body.light-theme .slider-image {
     background: rgba(0, 0, 0, 0.05);
 }

 .slider-btn {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     background: rgba(0, 0, 0, 0.7);
     border: 1px solid rgba(255, 255, 255, 0.2);
     color: white;
     width: 50px;
     height: 50px;
     border-radius: 50%;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     z-index: 10;
     transition: all 0.3s ease;
 }

 body.light-theme .slider-btn {
     background: rgba(255, 255, 255, 0.9);
     border: 1px solid rgba(0, 0, 0, 0.1);
     color: #1d1d1f;
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
 }

 .slider-btn:hover {
     transform: scale(1.1);
     background: rgba(255, 255, 255, 0.2);
 }

 /* ==================== PREMIUM CONTACT MODAL ==================== */
 .premium-contact-modal {
     max-width: 50%;
     width: 50%;
     text-align: center;
     background: linear-gradient(135deg, rgba(15, 15, 35, 0.97) 0%, rgba(25, 25, 50, 0.97) 100%);
     border: 1px solid rgba(0, 122, 255, 0.3);
     box-shadow:
         0 0 0 1px rgba(255, 255, 255, 0.1),
         0 20px 60px rgba(0, 0, 0, 0.5),
         0 0 100px rgba(0, 122, 255, 0.2);
 }

 /* Ensure premium modal overrides project-modal width */
 .project-modal.premium-contact-modal {
     max-width: 50% !important;
     width: 50% !important;
 }

 body.light-theme .premium-contact-modal {
     background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(250, 252, 255, 0.98) 100%);
     border-color: rgba(0, 122, 255, 0.2);
     box-shadow:
         0 0 0 1px rgba(0, 0, 0, 0.05),
         0 20px 60px rgba(0, 0, 0, 0.15),
         0 0 100px rgba(0, 122, 255, 0.1);
 }

 .premium-contact-modal::-webkit-scrollbar {
     width: 8px;
 }

 .premium-contact-modal::-webkit-scrollbar-track {
     background: rgba(255, 255, 255, 0.05);
     border-radius: 10px;
 }

 .premium-contact-modal::-webkit-scrollbar-thumb {
     background: linear-gradient(135deg, #007AFF 0%, #00D4FF 100%);
     border-radius: 10px;
 }

 .premium-contact-modal::-webkit-scrollbar-thumb:hover {
     background: linear-gradient(135deg, #0066DD 0%, #00BBEE 100%);
 }

 .premium-contact-modal .modal-title-section {
     text-align: center;
     padding: 0;
 }

 .premium-modal-title {
     font-size: 28px;
     font-weight: 800;
     background: linear-gradient(135deg, #007AFF 0%, #00D4FF 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
     margin: 0 0 12px 0;
     letter-spacing: -0.5px;
     animation: titleShine 3s ease-in-out infinite;
 }

 @keyframes titleShine {

     0%,
     100% {
         filter: brightness(1);
     }

     50% {
         filter: brightness(1.2);
     }
 }

 body.light-theme .premium-modal-title {
     background: linear-gradient(135deg, #007AFF 0%, #0055DD 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
 }

 .premium-modal-description {
     font-size: 15px;
     color: rgba(255, 255, 255, 0.65);
     line-height: 1.7;
     margin: 0 0 24px 0;
     padding: 16px 24px;
     background: rgba(0, 122, 255, 0.08);
     border-left: 3px solid rgba(0, 122, 255, 0.5);
     border-radius: 8px;
     font-style: italic;
 }

 body.light-theme .premium-modal-description {
     color: rgba(0, 0, 0, 0.65);
     background: rgba(0, 122, 255, 0.06);
 }

 .premium-contact-content {
     padding: 0;

     animation: contentFadeIn 0.6s ease-out 0.2s both;
 }

 @keyframes contentFadeIn {
     from {
         opacity: 0;
         transform: translateY(20px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 /* Business Card Layout */
 .business-card-layout {
     padding: 24px;
     background: rgba(0, 122, 255, 0.03);
     border: 1px solid rgba(0, 122, 255, 0.15);
     border-radius: 16px;
     margin-top: 8px;
 }

 body.light-theme .business-card-layout {
     background: rgba(0, 122, 255, 0.04);
     border-color: rgba(0, 122, 255, 0.12);
 }

 .card-header {
     display: flex;
     align-items: center;
     gap: 16px;
     margin-bottom: 20px;
     padding-bottom: 16px;
     border-bottom: 1px solid rgba(0, 122, 255, 0.15);
 }

 .card-logo {
     width: 64px;
     height: 64px;
     border-radius: 12px;
     background: black;
     padding: 12px;
     display: flex;
     align-items: center;
     justify-content: center;
     box-shadow: 0 4px 12px rgba(0, 122, 255, 0.2);
 }

 .card-logo img {
     width: 100%;
     height: 100%;
     object-fit: contain;
 }

 .card-info {
     text-align: left;
     flex: 1;
 }

 .card-brand {
     font-size: 18px;
     font-weight: 800;
     letter-spacing: 0.5px;
     margin: 0 0 4px 0;
     background: linear-gradient(135deg, #007AFF 0%, #00D4FF 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
 }

 body.light-theme .card-brand {
     background: linear-gradient(135deg, #007AFF 0%, #0055DD 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
 }

 .card-role {
     font-size: 13px;
     color: rgba(255, 255, 255, 0.7);
     margin: 0;
     font-weight: 500;
 }

 body.light-theme .card-role {
     color: rgba(0, 0, 0, 0.6);
 }

 .card-message {
     font-size: 15px;
     color: rgba(255, 255, 255, 0.75);
     margin: 0 0 20px 0;
     line-height: 1.5;
 }

 body.light-theme .card-message {
     color: rgba(0, 0, 0, 0.65);
 }

 /* Simple Business Card */
 .simple-business-card {
     position: relative;
     background: rgba(0, 0, 0, 0.4);
     border: 1px solid rgba(255, 255, 255, 0.1);
     border-radius: 24px;
     padding: 40px;
     margin: 30px 0;
     display: grid;
     grid-template-columns: 360px 1fr;
     gap: 40px;
     align-items: center;
     backdrop-filter: blur(20px);
 }

 body.light-theme .simple-business-card {
     background: rgba(255, 255, 255, 0.5);
     border-color: rgba(0, 0, 0, 0.1);
 }

 .card-blob-shape {
     position: relative;
     width: 320px;
     height: 420px;
     background: linear-gradient(135deg, #007AFF 0%, #5AC8FA 50%, #00D4FF 100%);
     border-radius: 45% 55% 50% 50% / 55% 45% 55% 45%;
     display: flex;
     align-items: center;
     justify-content: center;
     box-shadow:
         0 0 0 10px rgba(255, 215, 0, 0.2),
         0 0 0 20px rgba(100, 100, 100, 0.15),
         0 30px 80px rgba(0, 122, 255, 0.5);
     animation: blobFloat 6s ease-in-out infinite;
 }

 @keyframes blobFloat {

     0%,
     100% {
         transform: translateY(0px);
         border-radius: 45% 55% 50% 50% / 55% 45% 55% 45%;
     }

     50% {
         transform: translateY(-15px);
         border-radius: 55% 45% 60% 40% / 50% 50% 50% 50%;
     }
 }

 body.light-theme .card-blob-shape {
     box-shadow:
         0 0 0 10px rgba(255, 215, 0, 0.3),
         0 0 0 20px rgba(150, 150, 150, 0.1),
         0 30px 80px rgba(0, 122, 255, 0.3);
 }

 .profile-image-wrapper {
     width: 240px;
     height: 240px;
     border-radius: 50%;
     overflow: hidden;
     background: white;
     box-shadow: 0 15px 50px rgba(0, 0, 0, 0.4);
     border: 8px solid white;
     position: relative;
     z-index: 2;
 }

 .card-profile-img {
     width: 100%;
     height: 100%;
     object-fit: contain;
     background: white;
     padding: 20px;
 }

 .card-details {
     text-align: left;
 }

 .card-name {
     font-size: 28px;
     font-weight: 800;
     letter-spacing: 1px;
     margin: 0 0 8px 0;
     color: var(--text-primary);
     text-transform: uppercase;
 }

 .card-username {
     font-size: 16px;
     color: rgba(255, 255, 255, 0.5);
     margin: 0 0 20px 0;
 }

 body.light-theme .card-username {
     color: rgba(0, 0, 0, 0.4);
 }

 .card-description {
     font-size: 15px;
     line-height: 1.7;
     color: rgba(255, 255, 255, 0.7);
     margin: 0 0 16px 0;
 }

 body.light-theme .card-description {
     color: rgba(0, 0, 0, 0.6);
 }

 .card-position {
     font-size: 14px;
     color: rgba(255, 255, 255, 0.5);
     font-style: italic;
     margin: 0;
 }

 body.light-theme .card-position {
     color: rgba(0, 0, 0, 0.4);
 }

 .card-social-icons {
     display: flex;
     flex-direction: column;
     gap: 16px;
 }

 .card-social-link {
     width: 48px;
     height: 48px;
     border-radius: 12px;
     background: rgba(255, 255, 255, 0.05);
     border: 1px solid rgba(255, 255, 255, 0.1);
     display: flex;
     align-items: center;
     justify-content: center;
     color: var(--text-primary);
     transition: all 0.3s ease;
     text-decoration: none;
 }

 body.light-theme .card-social-link {
     background: rgba(0, 0, 0, 0.03);
     border-color: rgba(0, 0, 0, 0.1);
 }

 .card-social-link:hover {
     background: linear-gradient(135deg, #007AFF 0%, #00D4FF 100%);
     border-color: transparent;
     transform: translateX(8px) scale(1.1);
     color: white;
     box-shadow: 0 8px 20px rgba(0, 122, 255, 0.4);
 }

 body.light-theme .card-social-link:hover {
     color: white;
 }

 .card-social-link svg {
     width: 22px;
     height: 22px;
 }

 /* Responsive Simple Business Card */
 @media (max-width: 1024px) {
     .simple-business-card {
         grid-template-columns: 1fr;
         gap: 30px;
         padding: 30px;
         text-align: center;
     }

     .card-blob-shape {
         margin: 0 auto;
     }

     .card-details {
         text-align: center;
     }
 }

 @media (max-width: 768px) {
     .simple-business-card {
         padding: 24px;
     }

     .card-blob-shape {
         width: 280px;
         height: 360px;
     }

     .profile-image-wrapper {
         width: 200px;
         height: 200px;
     }

     .card-name {
         font-size: 22px;
     }

     .card-description {
         font-size: 14px;
     }
 }

 .premium-icon {
     margin: 20px auto 30px;
     animation: premiumFloat 3s ease-in-out infinite;
 }

 @keyframes premiumFloat {

     0%,
     100% {
         transform: translateY(0px);
     }

     50% {
         transform: translateY(-10px);
     }
 }

 .premium-subtitle {
     font-size: 24px;
     font-weight: 700;
     color: var(--text-primary);
     margin: 0 0 12px 0;
 }

 .premium-text {
     font-size: 16px;
     color: rgba(255, 255, 255, 0.8);
     line-height: 1.7;
     margin: 0 0 32px 0;
     max-width: 450px;
     margin-left: auto;
     margin-right: auto;
 }

 body.light-theme .premium-text {
     color: rgba(0, 0, 0, 0.7);
 }

 /* Compact Contact Buttons */
 .contact-buttons-compact {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 12px;
     margin: 0;
     animation: buttonsSlideIn 0.6s ease-out 0.4s both;
 }

 @keyframes buttonsSlideIn {
     from {
         opacity: 0;
         transform: translateY(30px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 .compact-btn {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 8px;
     padding: 12px 16px;
     border-radius: 10px;
     font-size: 14px;
     font-weight: 600;
     text-decoration: none;
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     position: relative;
     overflow: hidden;
     color: white;
     border: 1px solid rgba(255, 255, 255, 0.15);
     letter-spacing: 0.2px;
 }

 .compact-btn svg {
     width: 16px;
     height: 16px;
     transition: transform 0.3s ease;
 }

 .compact-btn span {
     font-size: 13px;
 }

 .compact-btn::before {
     content: '';
     position: absolute;
     top: 50%;
     left: 50%;
     width: 0;
     height: 0;
     border-radius: 50%;
     background: rgba(255, 255, 255, 0.2);
     transform: translate(-50%, -50%);
     transition: width 0.4s ease, height 0.4s ease;
 }

 .compact-btn:hover::before {
     width: 200px;
     height: 200px;
 }

 .compact-btn:hover {
     transform: translateY(-3px);
     border-color: rgba(255, 255, 255, 0.3);
 }

 .compact-btn:hover svg {
     transform: scale(1.1);
 }

 .compact-btn:active {
     transform: translateY(-1px);
 }

 .compact-btn.email-btn {
     background: linear-gradient(135deg, #007AFF 0%, #00D4FF 100%);
     box-shadow: 0 4px 12px rgba(0, 122, 255, 0.3);
 }

 .compact-btn.email-btn:hover {
     box-shadow: 0 6px 20px rgba(0, 122, 255, 0.45);
 }

 .compact-btn.whatsapp-btn {
     background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
     box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3);
 }

 .compact-btn.whatsapp-btn:hover {
     box-shadow: 0 6px 20px rgba(37, 211, 102, 0.45);
 }

 .contact-grid-btn {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 12px;
     padding: 22px 32px;
     border-radius: 14px;
     font-size: 16px;
     font-weight: 700;
     text-decoration: none;
     transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
     position: relative;
     overflow: hidden;
     color: white;
     border: 2px solid rgba(255, 255, 255, 0.1);
     letter-spacing: 0.3px;
 }

 .contact-grid-btn svg {
     width: 24px;
     height: 24px;
     transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
 }

 .contact-grid-btn::before {
     content: '';
     position: absolute;
     top: 50%;
     left: 50%;
     width: 0;
     height: 0;
     border-radius: 50%;
     background: rgba(255, 255, 255, 0.25);
     transform: translate(-50%, -50%);
     transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1), height 0.6s cubic-bezier(0.4, 0, 0.2, 1);
 }

 .contact-grid-btn::after {
     content: '';
     position: absolute;
     inset: 0;
     border-radius: 14px;
     padding: 2px;
     background: linear-gradient(135deg, rgba(255, 255, 255, 0.4), transparent);
     -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
     -webkit-mask-composite: xor;
     mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
     mask-composite: exclude;
     opacity: 0;
     transition: opacity 0.4s ease;
 }

 .contact-grid-btn:hover::before {
     width: 400px;
     height: 400px;
 }

 .contact-grid-btn:hover::after {
     opacity: 1;
 }

 .contact-grid-btn:hover svg {
     transform: scale(1.15) rotate(5deg);
 }

 .contact-grid-btn:active {
     transform: scale(0.98);
 }

 .email-btn {
     background: linear-gradient(135deg, #007AFF 0%, #5AC8FA 50%, #00D4FF 100%);
     box-shadow:
         0 8px 24px rgba(0, 122, 255, 0.35),
         inset 0 1px 0 rgba(255, 255, 255, 0.2);
 }

 .email-btn:hover {
     transform: translateY(-6px);
     box-shadow:
         0 12px 35px rgba(0, 122, 255, 0.5),
         0 0 50px rgba(0, 122, 255, 0.3),
         inset 0 1px 0 rgba(255, 255, 255, 0.3);
 }

 .whatsapp-btn {
     background: linear-gradient(135deg, #25D366 0%, #20BA5A 50%, #128C7E 100%);
     box-shadow:
         0 8px 24px rgba(37, 211, 102, 0.35),
         inset 0 1px 0 rgba(255, 255, 255, 0.2);
 }

 .whatsapp-btn:hover {
     transform: translateY(-6px);
     box-shadow:
         0 12px 35px rgba(37, 211, 102, 0.5),
         0 0 50px rgba(37, 211, 102, 0.3),
         inset 0 1px 0 rgba(255, 255, 255, 0.3);
 }

 .linkedin-btn {
     background: linear-gradient(135deg, #0077B5 0%, #00A0DC 100%);
     box-shadow: 0 6px 20px rgba(0, 119, 181, 0.3);
 }

 .linkedin-btn:hover {
     transform: translateY(-4px);
     box-shadow: 0 10px 30px rgba(0, 119, 181, 0.5);
 }

 .github-btn {
     background: linear-gradient(135deg, #24292e 0%, #4a5568 100%);
     box-shadow: 0 6px 20px rgba(36, 41, 46, 0.3);
 }

 .github-btn:hover {
     transform: translateY(-4px);
     box-shadow: 0 10px 30px rgba(36, 41, 46, 0.5);
 }

 .behance-btn {
     background: linear-gradient(135deg, #1769ff 0%, #4353ff 100%);
     box-shadow: 0 6px 20px rgba(23, 105, 255, 0.3);
 }

 .behance-btn:hover {
     transform: translateY(-4px);
     box-shadow: 0 10px 30px rgba(23, 105, 255, 0.5);
 }

 .instagram-btn {
     background: linear-gradient(135deg, #E1306C 0%, #F77737 50%, #FCAF45 100%);
     box-shadow: 0 6px 20px rgba(225, 48, 108, 0.3);
 }

 .instagram-btn:hover {
     transform: translateY(-4px);
     box-shadow: 0 10px 30px rgba(225, 48, 108, 0.5);
 }

 /* Responsive for Contact Grid */
 @media (max-width: 768px) {
     .contact-buttons-grid {
         grid-template-columns: 1fr;
         gap: 12px;
     }

     .contact-grid-btn {
         padding: 18px 20px;
         font-size: 15px;
     }
 }

 .premium-divider {
     position: relative;
     text-align: center;
     margin: 30px 0;
 }

 .premium-divider::before {
     content: '';
     position: absolute;
     top: 50%;
     left: 0;
     right: 0;
     height: 1px;
     background: rgba(255, 255, 255, 0.1);
 }

 body.light-theme .premium-divider::before {
     background: rgba(0, 0, 0, 0.1);
 }

 .premium-divider span {
     position: relative;
     padding: 0 20px;
     background: var(--bg-primary);
     color: rgba(255, 255, 255, 0.5);
     font-size: 14px;
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: 1px;
 }

 body.light-theme .premium-divider span {
     color: rgba(0, 0, 0, 0.4);
 }

 .premium-social-links {
     display: flex;
     justify-content: center;
     gap: 16px;
 }

 .premium-social-links .social-link {
     width: 48px;
     height: 48px;
     border-radius: 12px;
     background: rgba(255, 255, 255, 0.05);
     border: 1px solid rgba(255, 255, 255, 0.1);
     display: flex;
     align-items: center;
     justify-content: center;
     color: var(--text-primary);
     transition: all 0.3s ease;
     text-decoration: none;
 }

 body.light-theme .premium-social-links .social-link {
     background: rgba(0, 0, 0, 0.03);
     border-color: rgba(0, 0, 0, 0.1);
 }

 .premium-social-links .social-link:hover {
     background: rgba(0, 122, 255, 0.1);
     border-color: rgba(0, 122, 255, 0.3);
     transform: translateY(-3px);
 }

 body.light-theme .premium-social-links .social-link:hover {
     background: rgba(0, 122, 255, 0.08);
 }

 .premium-social-links .social-link svg {
     width: 24px;
     height: 24px;
 }

 /* Responsive for Premium Modal */
 @media (max-width: 768px) {
     .premium-contact-modal {
         max-width: 90%;
         margin: 20px;
     }

     .premium-modal-title {
         font-size: 20px;
     }

     .premium-modal-description {
         font-size: 14px;
         padding: 14px 20px;
     }

     .business-card-layout {
         padding: 20px;
     }

     .card-logo {
         width: 56px;
         height: 56px;
     }

     .card-brand {
         font-size: 16px;
     }

     .card-role {
         font-size: 12px;
     }

     .card-message {
         font-size: 14px;
     }
 }

 @media (max-width: 480px) {
     .premium-contact-modal {
         max-width: 95%;
         margin: 10px;
     }

     .premium-modal-title {
         font-size: 18px;
     }

     .business-card-layout {
         padding: 16px;
     }

     .card-header {
         gap: 12px;
     }

     .card-logo {
         width: 48px;
         height: 48px;
         padding: 8px;
     }

     .card-brand {
         font-size: 15px;
     }

     .contact-buttons-compact {
         grid-template-columns: 1fr;
         gap: 10px;
     }

     .compact-btn {
         padding: 12px 14px;
     }
 }

 .slider-btn.prev {
     left: 20px;
 }

 .slider-btn.next {
     right: 20px;
 }

 .slider-dots {
     display: flex;
     justify-content: center;
     gap: 10px;
     margin-top: 20px;
 }

 .slider-dot {
     width: 12px;
     height: 12px;
     border-radius: 50%;
     background: rgba(255, 255, 255, 0.3);
     cursor: pointer;
     transition: all 0.3s ease;
 }

 body.light-theme .slider-dot {
     background: rgba(0, 0, 0, 0.2);
 }

 .slider-dot.active {
     background: #007AFF;
     width: 30px;
     border-radius: 6px;
 }

 .slider-dot:hover {
     background: rgba(255, 255, 255, 0.5);
 }

 body.light-theme .slider-dot:hover {
     background: rgba(0, 0, 0, 0.4);
 }



 .feature-description {
     font-size: 14px;
     color: #ccc;
     line-height: 1.5;
 }

 body.light-theme .feature-description {
     color: #515154;
 }

 .tech-stack-list {
     display: flex;
     flex-wrap: wrap;
     gap: 10px;
 }

 .metrics-grid {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 15px;
 }

 .metric-card {
     background: rgba(255, 255, 255, 0.05);
     border: 1px solid rgba(255, 255, 255, 0.1);
     border-radius: 12px;
     padding: 20px;
     text-align: center;
     transition: all 0.3s ease;
 }

 body.light-theme .metric-card {
     background: rgba(0, 0, 0, 0.02);
     border: 1px solid rgba(0, 0, 0, 0.08);
 }

 .metric-card:hover {
     background: rgba(255, 255, 255, 0.08);
     border-color: rgba(255, 255, 255, 0.2);
 }

 body.light-theme .metric-card:hover {
     background: rgba(0, 0, 0, 0.04);
     border-color: rgba(0, 0, 0, 0.12);
 }

 .metric-card .metric-value {
     display: block;
     font-size: 24px;
     font-weight: 700;
     color: #007AFF;
     margin-bottom: 5px;
 }

 .metric-card .metric-label {
     font-size: 12px;
     color: #999;
     text-transform: uppercase;
     letter-spacing: 0.5px;
     font-weight: 500;
 }

 body.light-theme .metric-card .metric-label {
     color: #86868b;
 }

 .timeline {
     position: relative;
 }

 .timeline::before {
     content: '';
     position: absolute;
     left: 20px;
     top: 0;
     bottom: 0;
     width: 2px;
     background: linear-gradient(180deg, #007AFF 0%, #00D4FF 100%);
 }

 .timeline-item {
     position: relative;
     padding-left: 60px;
     margin-bottom: 25px;
 }

 .timeline-item::before {
     content: '';
     position: absolute;
     left: 12px;
     top: 8px;
     width: 16px;
     height: 16px;
     background: #007AFF;
     border-radius: 50%;
     border: 3px solid #000;
 }

 body.light-theme .timeline-item::before {
     border: 3px solid #fff;
 }

 .timeline-date {
     font-size: 12px;
     color: #007AFF;
     font-weight: 600;
     margin-bottom: 5px;
 }

 .timeline-title {
     font-size: 16px;
     font-weight: 600;
     color: white;
     margin-bottom: 5px;
 }

 body.light-theme .timeline-title {
     color: #1d1d1f;
 }

 .timeline-description {
     font-size: 14px;
     color: #ccc;
     line-height: 1.5;
 }

 body.light-theme .timeline-description {
     color: #515154;
 }

 .details-section {
     margin-bottom: 30px;
 }

 .details-section h3 {
     font-size: 20px;
     font-weight: 600;
     color: white;
     margin-bottom: 20px;
 }

 body.light-theme .details-section h3 {
     color: #1d1d1f;
 }

 .features-list {
     display: grid;
     grid-template-columns: 1fr;
     gap: 15px;
 }

 .feature-item {
     display: flex;
     gap: 15px;
     padding: 20px;
     background: rgba(255, 255, 255, 0.05);
     border: 1px solid rgba(255, 255, 255, 0.1);
     border-radius: 12px;
     transition: all 0.3s ease;
 }

 body.light-theme .feature-item {
     background: rgba(0, 0, 0, 0.02);
     border: 1px solid rgba(0, 0, 0, 0.08);
 }

 .feature-item:hover {
     background: rgba(255, 255, 255, 0.08);
     border-color: rgba(255, 255, 255, 0.2);
 }

 body.light-theme .feature-item:hover {
     background: rgba(0, 0, 0, 0.04);
     border-color: rgba(0, 0, 0, 0.12);
 }

 .feature-icon {
     font-size: 32px;
     flex-shrink: 0;
 }

 .feature-content {
     flex: 1;
 }

 .feature-title {
     font-size: 18px;
     font-weight: 600;
     color: white;
     margin-bottom: 8px;
 }

 body.light-theme .feature-title {
     color: #1d1d1f;
 }

 .details-grid {
     display: grid;
     gap: 40px;
 }

 .modal-footer {
     padding: 20px 30px 30px;
     border-top: 1px solid rgba(255, 255, 255, 0.1);
 }

 body.light-theme .modal-footer {
     border-top: 1px solid rgba(0, 0, 0, 0.1);
 }

 .action-buttons {
     display: flex;
     gap: 15px;
     justify-content: center;
 }

 .action-button {
     display: flex;
     align-items: center;
     gap: 8px;
     padding: 12px 24px;
     border-radius: 25px;
     font-size: 14px;
     font-weight: 600;
     text-decoration: none;
     transition: all 0.3s ease;
 }

 .action-button.primary {
     background: linear-gradient(135deg, #007AFF 0%, #00D4FF 100%);
     color: white;
     box-shadow: 0 8px 25px rgba(0, 122, 255, 0.3);
 }

 .action-button.primary:hover {
     box-shadow: 0 12px 35px rgba(0, 122, 255, 0.4);
     transform: translateY(-2px);
 }

 .action-button.secondary {
     background: rgba(255, 255, 255, 0.1);
     border: 1px solid rgba(255, 255, 255, 0.2);
     color: white;
 }

 body.light-theme .action-button.secondary {
     background: rgba(0, 0, 0, 0.05);
     border: 1px solid rgba(0, 0, 0, 0.12);
     color: #1d1d1f;
 }

 .action-button.secondary:hover {
     background: rgba(255, 255, 255, 0.15);
     border-color: rgba(255, 255, 255, 0.3);
     transform: translateY(-2px);
 }

 body.light-theme .action-button.secondary:hover {
     background: rgba(0, 0, 0, 0.08);
     border-color: rgba(0, 0, 0, 0.18);
 }

 /* Responsive Design for Grid */
 @media (max-width: 768px) {
     .projects-grid {
         grid-template-columns: 1fr;
         gap: 20px;
         padding: 0 15px;
     }

     .project-card {
         margin: 0 10px;
     }

     .project-image {
         height: 200px;
     }

     .project-info {
         padding: 20px;
     }

     .project-title {
         font-size: 20px;
     }

     .project-description {
         font-size: 14px;
     }

     .project-metrics {
         gap: 20px;
     }

     .project-modal-overlay {
         padding: 10px;
         align-items: flex-start;
     }

     .project-modal {
         max-height: 95vh;
         border-radius: 12px;
         margin-top: 10px;
     }

     .modal-header {
         padding: 15px 15px 12px;
         flex-direction: column;
         gap: 10px;
     }

     .modal-title-section {
         width: 100%;
     }

     .modal-title {
         font-size: 20px;
         line-height: 1.3;
     }

     .modal-subtitle {
         font-size: 14px;
         line-height: 1.4;
     }

     .close-button {
         position: absolute;
         top: 15px;
         right: 15px;
         width: 32px;
         height: 32px;
         z-index: 10;
     }

     .modal-content {
         padding: 15px;
     }

     .modal-screenshots {
         margin-bottom: 25px;
     }

     .image-slider {
         border-radius: 12px;
     }

     .details-grid {
         grid-template-columns: 1fr;
         gap: 25px;
     }

     .details-section {
         margin-bottom: 20px;
     }

     .details-section h3 {
         font-size: 18px;
         margin-bottom: 15px;
     }

     .features-list {
         gap: 12px;
     }

     .metrics-grid {
         grid-template-columns: 1fr 1fr;
         gap: 10px;
     }

     .metric-card {
         padding: 15px 10px;
     }

     .metric-card .metric-value {
         font-size: 20px;
     }

     .metric-card .metric-label {
         font-size: 11px;
     }

     .timeline {
         margin: 20px 0;
     }

     .timeline-item {
         padding-left: 40px;
         margin-bottom: 20px;
     }

     .modal-footer {
         padding: 15px 15px 20px;
     }

     .action-buttons {
         flex-direction: column;
         align-items: stretch;
         gap: 10px;
     }

     .action-button {
         width: 100%;
         justify-content: center;
         padding: 14px 20px;
     }

     .slider-image {
         height: 250px;
     }

     .slider-btn {
         width: 36px;
         height: 36px;
         font-size: 18px;
     }

     .slider-btn.prev {
         left: 8px;
     }

     .slider-btn.next {
         right: 8px;
     }

     .slider-dots {
         gap: 6px;
         margin-top: 15px;
     }

     .slider-dot {
         width: 8px;
         height: 8px;
     }

     .slider-dot.active {
         width: 20px;
     }

     .feature-item {
         padding: 15px;
         gap: 12px;
     }

     .feature-icon {
         font-size: 28px;
     }

     .feature-title {
         font-size: 16px;
     }

     .feature-description {
         font-size: 13px;
     }

     .tech-stack {
         gap: 6px;
     }

     .tech-tag {
         padding: 5px 10px;
         font-size: 11px;
     }
 }

 /* Ripple effect styles */
 .btn {
     position: relative;
     overflow: hidden;
 }

 .ripple {
     position: absolute;
     border-radius: 50%;
     background: rgba(255, 255, 255, 0.3);
     transform: scale(0);
     animation: ripple-animation 0.6s linear;
     pointer-events: none;
 }

 @keyframes ripple-animation {
     to {
         transform: scale(4);
         opacity: 0;
     }
 }

 /* View All Projects Button */
 .view-all-container {
     display: flex;
     justify-content: center;
     margin: 60px 0;
 }

 .view-all-button {
     display: inline-flex;
     align-items: center;
     gap: 12px;
     padding: 16px 32px;
     background: linear-gradient(135deg, #007AFF 0%, #00D4FF 100%);
     color: white;
     text-decoration: none;
     border-radius: 12px;
     font-size: 18px;
     font-weight: 600;
     transition: all 0.3s ease;
     box-shadow: 0 8px 25px rgba(0, 122, 255, 0.3);
 }

 .view-all-button:hover {
     transform: translateY(-2px);
     box-shadow: 0 12px 35px rgba(0, 122, 255, 0.5);
 }

 .view-all-button.secondary {
     background: rgba(255, 255, 255, 0.1);
     border: 1px solid rgba(255, 255, 255, 0.2);
 }

 .view-all-button.secondary:hover {
     background: rgba(255, 255, 255, 0.15);
     box-shadow: 0 8px 25px rgba(255, 255, 255, 0.1);
 }

 .view-all-button svg {
     transition: transform 0.3s ease;
 }

 .view-all-button:hover svg {
     transform: translateX(5px);
 }

 .view-all-button.secondary:hover svg {
     transform: translateX(-5px);
 }

 /* Light Theme - View All Button */
 body.light-theme .view-all-button.secondary {
     background: rgba(0, 0, 0, 0.05);
     border: 1px solid rgba(0, 0, 0, 0.1);
     color: var(--text-primary);
 }

 body.light-theme .view-all-button.secondary:hover {
     background: rgba(0, 0, 0, 0.08);
     box-shadow: 0 8px 25px rgba(0, 0, 0, 0.05);
     color: #007AFF;
 }

 @media (max-width: 768px) {
     .view-all-button {
         padding: 14px 24px;
         font-size: 16px;
     }
 }

 /* Extra small mobile devices */
 @media (max-width: 480px) {
     .section-title {
         font-size: 26px;
     }

     .section-subtitle {
         font-size: 16px;
     }

     .quick-contact-buttons {
         flex-direction: column;
         gap: 10px;
         margin-top: 20px;
     }

     .quick-btn {
         width: 100%;
         max-width: 280px;
         padding: 12px 20px;
         font-size: 14px;
         justify-content: center;
     }

     .info-title {
         font-size: 24px;
         margin-bottom: 16px;
     }

     .info-title::after {
         width: 40px;
         height: 2px;
     }

     .contact-info-item {
         padding: 16px;
         gap: 12px;
         border-radius: 12px;
     }

     .info-icon {
         font-size: 20px;
         width: 45px;
         height: 45px;
         min-width: 45px;
     }

     .info-content h4 {
         font-size: 15px;
     }

     .info-content p {
         font-size: 13px;
     }

     .social-links h4 {
         font-size: 18px;
         margin-bottom: 16px;
     }

     .social-link {
         padding: 14px 16px;
         font-size: 13px;
         gap: 10px;
     }

     .contact-info {
         gap: 30px;
     }

     .location-card {
         padding: 20px;
         gap: 14px;
     }

     .location-card .info-icon {
         font-size: 28px;
         width: 55px;
         height: 55px;
     }

     .location-card .info-content h4 {
         font-size: 16px;
     }

     .location-card .info-content p {
         font-size: 14px;
     }

     .social-title {
         font-size: 22px;
         margin-bottom: 20px;
     }

     .social-grid {
         flex-direction: column;
         gap: 12px;
         align-items: center;
     }

     .social-link {
         width: 100%;
         max-width: 280px;
         padding: 14px 24px;
         font-size: 14px;
         justify-content: center;
     }
 }

 /* ==================== HIRE ME / FREELANCER SECTION ==================== */
 .hire-section {
     padding: 50px 0;
     background: linear-gradient(135deg, rgba(10, 10, 30, 0.98) 0%, rgba(0, 0, 0, 0.95) 100%);
     position: relative;
     overflow: hidden;
 }

 .hire-section::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: radial-gradient(circle at 30% 20%, rgba(0, 122, 255, 0.1) 0%, transparent 50%),
         radial-gradient(circle at 70% 80%, rgba(0, 212, 255, 0.08) 0%, transparent 50%);
     pointer-events: none;
 }

 body.light-theme .hire-section {
     background: linear-gradient(135deg, #f5f7fa 0%, #e8ecf1 100%);
 }

 body.light-theme .hire-section::before {
     background: radial-gradient(circle at 30% 20%, rgba(0, 122, 255, 0.06) 0%, transparent 50%),
         radial-gradient(circle at 70% 80%, rgba(0, 212, 255, 0.04) 0%, transparent 50%);
 }

 .hire-content {
     max-width: 1400px;
     margin: 0 auto;
     padding: 0 40px;
     position: relative;
     z-index: 1;
 }

 /* Hire Hero CTA */
 .hire-hero {
     text-align: center;
     margin-bottom: 80px;
     padding: 60px 40px;
     background: linear-gradient(135deg, rgba(0, 122, 255, 0.12) 0%, rgba(0, 212, 255, 0.06) 100%);
     border-radius: 24px;
     border: 2px solid rgba(0, 122, 255, 0.3);
     box-shadow: 0 10px 50px rgba(0, 122, 255, 0.2);
     position: relative;
     overflow: hidden;
 }

 .hire-hero::before {
     content: '';
     position: absolute;
     top: -50%;
     left: -50%;
     width: 200%;
     height: 200%;
     background: radial-gradient(circle, rgba(0, 122, 255, 0.1) 0%, transparent 70%);
     animation: rotate 20s linear infinite;
 }

 @keyframes rotate {
     from {
         transform: rotate(0deg);
     }

     to {
         transform: rotate(360deg);
     }
 }

 body.light-theme .hire-hero {
     background: linear-gradient(135deg, rgba(0, 122, 255, 0.1) 0%, rgba(0, 212, 255, 0.05) 100%);
     border: 2px solid rgba(0, 122, 255, 0.2);
     box-shadow: 0 10px 50px rgba(0, 122, 255, 0.15);
 }

 .hire-title {
     font-size: 48px;
     font-weight: 700;
     background: linear-gradient(135deg, #ffffff 0%, #007AFF 50%, #00D4FF 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
     margin-bottom: 20px;
     position: relative;
     z-index: 1;
     animation: gradientShift 3s ease infinite;
     background-size: 200% 200%;
 }

 @keyframes gradientShift {

     0%,
     100% {
         background-position: 0% 50%;
     }

     50% {
         background-position: 100% 50%;
     }
 }

 body.light-theme .hire-title {
     background: linear-gradient(135deg, #1d1d1f 0%, #007AFF 50%, #00D4FF 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
     background-size: 200% 200%;
 }

 .hire-subtitle {
     font-size: 20px;
     color: #b0b0b0;
     margin-bottom: 40px;
     max-width: 700px;
     margin-left: auto;
     margin-right: auto;
     line-height: 1.6;
     position: relative;
     z-index: 1;
 }

 body.light-theme .hire-subtitle {
     color: #515154;
 }

 .hire-cta-button {
     display: inline-flex;
     align-items: center;
     gap: 12px;
     padding: 18px 40px;
     background: linear-gradient(135deg, #007AFF 0%, #00D4FF 100%);
     color: white;
     font-size: 18px;
     font-weight: 700;
     border-radius: 12px;
     text-decoration: none;
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     box-shadow: 0 8px 30px rgba(0, 122, 255, 0.4);
     position: relative;
     z-index: 1;
     overflow: hidden;
 }

 .hire-cta-button::before {
     content: '';
     position: absolute;
     top: 0;
     left: -100%;
     width: 100%;
     height: 100%;
     background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
     transition: left 0.5s;
 }

 .hire-cta-button:hover::before {
     left: 100%;
 }

 .hire-cta-button:hover {
     transform: translateY(-3px) scale(1.05);
     box-shadow: 0 15px 50px rgba(0, 122, 255, 0.6);
 }

 .hire-cta-button:active {
     transform: translateY(-1px) scale(1.02);
 }

 .hire-cta-button.secondary {
     background: rgba(255, 255, 255, 0.1);
     border: 2px solid rgba(0, 122, 255, 0.3);
 }

 body.light-theme .hire-cta-button.secondary {
     background: rgba(0, 0, 0, 0.05);
     color: #1d1d1f;
     border: 2px solid rgba(0, 122, 255, 0.25);
 }

 .hire-cta-button.secondary:hover {
     background: rgba(0, 122, 255, 0.15);
 }

 body.light-theme .hire-cta-button.secondary:hover {
     background: rgba(0, 122, 255, 0.1);
 }

 /* Services Section */
 .services-section {
     margin-bottom: 80px;
     padding: 60px 0;
 }

 .services-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
     gap: 25px;
     margin-top: 50px;
 }

 .service-card {
     background: linear-gradient(135deg,
             rgba(0, 122, 255, 0.03) 0%,
             rgba(0, 212, 255, 0.02) 50%,
             rgba(255, 255, 255, 0.02) 100%);
     backdrop-filter: blur(10px);
     border: 1px solid rgba(255, 255, 255, 0.1);
     border-radius: 24px;
     padding: 35px 28px;
     transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
     position: relative;
     overflow: hidden;
     animation: fadeInUp 0.6s ease-out forwards;
     opacity: 0;
     box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
 }

 .service-card:nth-child(1) {
     animation-delay: 0.1s;
 }

 .service-card:nth-child(2) {
     animation-delay: 0.2s;
 }

 .service-card:nth-child(3) {
     animation-delay: 0.3s;
 }

 .service-card:nth-child(4) {
     animation-delay: 0.4s;
 }

 .service-card:nth-child(5) {
     animation-delay: 0.5s;
 }

 .service-card:nth-child(6) {
     animation-delay: 0.6s;
 }

 @keyframes fadeInUp {
     from {
         opacity: 0;
         transform: translateY(30px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 /* Gradient overlay on hover */
 .service-card::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: linear-gradient(135deg,
             rgba(0, 122, 255, 0.1) 0%,
             rgba(0, 212, 255, 0.05) 100%);
     opacity: 0;
     transition: opacity 0.5s ease;
     z-index: 0;
     border-radius: 24px;
 }

 .service-card:hover::before {
     opacity: 1;
 }

 /* Top accent line */
 .service-card::after {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 3px;
     background: linear-gradient(90deg, #007AFF 0%, #00D4FF 100%);
     transform: scaleX(0);
     transform-origin: left;
     transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
 }

 .service-card:hover::after {
     transform: scaleX(1);
 }

 body.light-theme .service-card {
     background: linear-gradient(135deg,
             rgba(255, 255, 255, 0.95) 0%,
             rgba(245, 247, 250, 0.9) 100%);
     border: 1px solid rgba(0, 0, 0, 0.06);
     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
 }

 .service-card:hover {
     transform: translateY(-8px);
     border-color: rgba(0, 122, 255, 0.3);
     box-shadow: 0 20px 60px rgba(0, 122, 255, 0.2);
 }

 body.light-theme .service-card:hover {
     border-color: rgba(0, 122, 255, 0.25);
     box-shadow: 0 16px 50px rgba(0, 122, 255, 0.15);
 }

 .service-icon {
     font-size: 52px;
     margin-bottom: 20px;
     display: inline-block;
     transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
     position: relative;
     z-index: 1;
     filter: drop-shadow(0 4px 12px rgba(0, 122, 255, 0.2));
 }

 .service-card:hover .service-icon {
     transform: scale(1.15) rotate(5deg);
     filter: drop-shadow(0 8px 20px rgba(0, 122, 255, 0.4));
 }

 .service-title {
     font-size: 20px;
     font-weight: 700;
     color: white;
     margin-bottom: 14px;
     position: relative;
     z-index: 1;
     letter-spacing: -0.3px;
 }

 body.light-theme .service-title {
     color: #1d1d1f;
 }

 .service-description {
     font-size: 14px;
     color: rgba(255, 255, 255, 0.7);
     line-height: 1.7;
     margin-bottom: 22px;
     position: relative;
     z-index: 1;
 }

 body.light-theme .service-description {
     color: #515154;
 }

 .service-features {
     list-style: none;
     padding: 0;
     margin: 0;
     position: relative;
     z-index: 1;
 }

 .service-features li {
     font-size: 13px;
     color: rgba(255, 255, 255, 0.65);
     padding: 10px 0 10px 28px;
     position: relative;
     transition: all 0.3s ease;
 }

 body.light-theme .service-features li {
     color: #666;
 }

 .service-features li::before {
     content: '✓';
     position: absolute;
     left: 0;
     color: #007AFF;
     font-weight: 700;
     font-size: 16px;
     transition: all 0.3s ease;
 }

 .service-card:hover .service-features li::before {
     transform: scale(1.2);
     color: #00D4FF;
 }

 .service-features li:hover {
     color: rgba(255, 255, 255, 0.9);
     padding-left: 32px;
 }

 body.light-theme .service-features li:hover {
     color: #1d1d1f;
 }

 /* Offers Section - Premium UI */
 .offers-section {
     margin-top: 120px;
     padding: 0 20px;
     position: relative;
 }

 .offers-section::before {
     content: '';
     position: absolute;
     top: -100px;
     left: 50%;
     transform: translateX(-50%);
     width: 600px;
     height: 600px;
     background: radial-gradient(circle, rgba(59, 130, 246, 0.15) 0%, transparent 70%);
     pointer-events: none;
     z-index: -1;
 }

 .offers-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
     gap: 24px;
     margin-top: 50px;
 }

 /* ==================== HOME PAGE OFFER CARDS (COMPACT) ==================== */
 .offer-card-home {
     background: rgba(255, 255, 255, 0.05);
     backdrop-filter: blur(20px);
     -webkit-backdrop-filter: blur(20px);
     border: 1px solid rgba(255, 255, 255, 0.1);
     border-radius: 20px;
     position: relative;
     overflow: hidden;
     transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
     box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
     display: flex;
     flex-direction: column;
     opacity: 0;
     transform: translateY(20px);
     animation: fadeInUp 0.5s ease forwards;
 }

 .offer-card-home::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: linear-gradient(135deg, rgba(0, 122, 255, 0.08) 0%, rgba(0, 212, 255, 0.04) 100%);
     opacity: 0;
     transition: opacity 0.4s ease;
     pointer-events: none;
     z-index: 0;
 }

 .offer-card-home:hover {
     transform: translateY(-8px);
     box-shadow: 0 16px 40px rgba(0, 122, 255, 0.25);
     border-color: rgba(0, 122, 255, 0.3);
 }

 .offer-card-home:hover::before {
     opacity: 1;
 }

 /* Offer Image - Home */
 .offer-image-home {
     position: relative;
     width: 100%;
     height: 160px;
     overflow: hidden;
     border-radius: 20px 20px 0 0;
 }

 .offer-image-home img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform 0.5s ease;
 }

 .offer-card-home:hover .offer-image-home img {
     transform: scale(1.08);
 }

 /* Offer Badge positioned over image */
 .offer-badge-home {
     position: absolute;
     top: 12px;
     right: 12px;
     padding: 6px 14px;
     border-radius: 50px;
     font-size: 11px;
     font-weight: 700;
     z-index: 10;
     backdrop-filter: blur(10px);
 }

 /* Offer Content Container - Home */
 .offer-content-home {
     padding: 18px;
     display: flex;
     flex-direction: column;
     gap: 12px;
     flex: 1;
 }

 /* Badge types hover effects */
 .offer-card-home.premium:hover {
     box-shadow: 0 16px 40px rgba(255, 215, 0, 0.2);
     border-color: rgba(255, 215, 0, 0.3);
 }

 .offer-card-home.hot:hover {
     box-shadow: 0 16px 40px rgba(255, 107, 107, 0.2);
     border-color: rgba(255, 107, 107, 0.3);
 }

 .offer-badge-home.badge-premium {
     background: linear-gradient(135deg, rgba(255, 215, 0, 0.95), rgba(255, 165, 0, 0.95));
     color: #000;
     box-shadow: 0 4px 12px rgba(255, 215, 0, 0.3);
 }

 .offer-badge-home.badge-hot {
     background: linear-gradient(135deg, rgba(255, 107, 107, 0.95), rgba(255, 142, 83, 0.95));
     color: #fff;
     box-shadow: 0 4px 12px rgba(255, 107, 107, 0.3);
 }

 .offer-badge-home.badge-complete {
     background: linear-gradient(135deg, rgba(168, 85, 247, 0.95), rgba(99, 102, 241, 0.95));
     color: #fff;
     box-shadow: 0 4px 12px rgba(168, 85, 247, 0.3);
 }

 /* Offer Title - Home */
 .offer-title-home {
     font-size: 18px;
     font-weight: 700;
     color: var(--text-primary);
     margin: 0;
     line-height: 1.3;
 }

 /* Offer Description - Home (max 2 lines) */
 .offer-desc-home {
     font-size: 13px;
     color: var(--text-secondary);
     line-height: 1.5;
     margin: 0;
     display: -webkit-box;
     -webkit-line-clamp: 2;
     line-clamp: 2;
     -webkit-box-orient: vertical;
     overflow: hidden;
 }

 /* Features Grid - Home */
 .features-grid-home {
     display: flex;
     flex-wrap: wrap;
     gap: 6px;
     margin-top: 4px;
 }

 /* Feature Tag - Home (same style as Offers Page) */
 .feature-tag-home {
     display: inline-flex;
     align-items: center;
     gap: 5px;
     padding: 5px 10px;
     background: rgba(0, 122, 255, 0.1);
     border: 1px solid rgba(0, 122, 255, 0.2);
     border-radius: 50px;
     font-size: 11px;
     font-weight: 500;
     color: #007AFF;
     transition: all 0.2s ease;
     white-space: nowrap;
 }

 .feature-tag-home:hover {
     background: rgba(0, 122, 255, 0.18);
     border-color: rgba(0, 122, 255, 0.35);
 }

 .feature-tag-home .feature-icon {
     font-size: 12px;
     line-height: 1;
 }

 .feature-tag-home .feature-text {
     font-size: 11px;
     font-weight: 500;
     color: #007AFF;
 }

 /* Feature Tag More - Home (Interactive Button) */
 .feature-tag-home.more {
     background: linear-gradient(135deg, rgba(0, 122, 255, 0.15), rgba(0, 212, 255, 0.1));
     border-color: rgba(0, 122, 255, 0.3);
     color: #007AFF;
     cursor: pointer;
     font-weight: 600;
 }

 .feature-tag-home.more:hover {
     background: linear-gradient(135deg, rgba(0, 122, 255, 0.25), rgba(0, 212, 255, 0.15));
     border-color: rgba(0, 122, 255, 0.45);
     transform: translateY(-1px);
     box-shadow: 0 4px 12px rgba(0, 122, 255, 0.2);
 }

 /* Offer Footer - Home */
 .offer-footer-home {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding-top: 14px;
     border-top: 1px solid rgba(255, 255, 255, 0.1);
     margin-top: auto;
 }

 /* Offer Price - Home */
 .offer-price-home {
     display: flex;
     align-items: baseline;
     gap: 2px;
 }

 .offer-price-home .price-currency {
     font-size: 14px;
     color: var(--text-tertiary);
     font-weight: 600;
 }

 .offer-price-home .price-amount {
     font-size: 24px;
     font-weight: 800;
     background: linear-gradient(135deg, #007AFF 0%, #00D4FF 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
     line-height: 1;
 }

 /* Buy Button - Home */
 .btn-buy-home {
     padding: 10px 24px;
     background: linear-gradient(135deg, #007AFF 0%, #00D4FF 100%);
     color: white;
     border: none;
     border-radius: 12px;
     font-size: 14px;
     font-weight: 600;
     cursor: pointer;
     transition: all 0.3s ease;
     text-decoration: none;
     box-shadow: 0 4px 15px rgba(0, 122, 255, 0.3);
 }

 .btn-buy-home:hover {
     transform: translateY(-2px);
     box-shadow: 0 8px 25px rgba(0, 122, 255, 0.4);
 }

 /* Light Theme - Home Offer Cards */
 body.light-theme .offer-card-home {
     background: rgba(255, 255, 255, 0.95);
     border: 1px solid rgba(0, 0, 0, 0.08);
     box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
 }

 body.light-theme .offer-card-home::before {
     background: linear-gradient(135deg, rgba(0, 122, 255, 0.05) 0%, rgba(0, 212, 255, 0.02) 100%);
 }

 body.light-theme .offer-card-home:hover {
     box-shadow: 0 16px 40px rgba(0, 122, 255, 0.12);
     border-color: rgba(0, 122, 255, 0.2);
 }

 body.light-theme .offer-footer-home {
     border-top: 1px solid rgba(0, 0, 0, 0.08);
 }

 body.light-theme .feature-tag-home {
     background: rgba(0, 122, 255, 0.08);
     border-color: rgba(0, 122, 255, 0.2);
 }

 body.light-theme .feature-tag-home:hover {
     background: rgba(0, 122, 255, 0.14);
 }

 body.light-theme .feature-tag-home.more {
     background: linear-gradient(135deg, rgba(0, 122, 255, 0.1), rgba(0, 212, 255, 0.06));
 }

 body.light-theme .feature-tag-home.more:hover {
     background: linear-gradient(135deg, rgba(0, 122, 255, 0.18), rgba(0, 212, 255, 0.1));
 }

 /* Responsive - Home Offer Cards */
 @media (max-width: 768px) {
     .offers-grid {
         grid-template-columns: 1fr;
         gap: 20px;
     }

     .offer-card-home {
         padding: 20px;
     }

     .offer-title-home {
         font-size: 16px;
         padding-right: 70px;
     }

     .offer-desc-home {
         font-size: 12px;
     }

     .offer-price-home .price-amount {
         font-size: 22px;
     }
 }

 @keyframes fadeInUp {
     from {
         opacity: 0;
         transform: translateY(20px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 .offer-card {
     background: linear-gradient(135deg,
             rgba(255, 255, 255, 0.08) 0%,
             rgba(255, 255, 255, 0.03) 100%);
     backdrop-filter: blur(20px);
     -webkit-backdrop-filter: blur(20px);
     border-radius: 24px;
     overflow: hidden;
     transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
     border: 1px solid rgba(255, 255, 255, 0.1);
     position: relative;
     box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
 }

 .offer-card::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: linear-gradient(135deg,
             rgba(59, 130, 246, 0.1) 0%,
             rgba(139, 92, 246, 0.1) 100%);
     opacity: 0;
     transition: opacity 0.4s ease;
     pointer-events: none;
 }

 .offer-card:hover {
     transform: translateY(-12px) scale(1.02);
     box-shadow: 0 24px 48px rgba(59, 130, 246, 0.25),
         0 0 80px rgba(139, 92, 246, 0.15);
     border-color: rgba(59, 130, 246, 0.3);
 }

 .offer-card:hover::before {
     opacity: 1;
 }

 .offer-badge {
     position: absolute;
     top: 24px;
     right: 24px;
     background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
     color: white;
     padding: 10px 20px;
     border-radius: 24px;
     font-size: 13px;
     font-weight: 700;
     z-index: 10;
     box-shadow: 0 4px 16px rgba(59, 130, 246, 0.4);
     backdrop-filter: blur(10px);
     animation: pulse-badge 3s ease-in-out infinite;
 }

 @keyframes pulse-badge {

     0%,
     100% {
         box-shadow: 0 4px 16px rgba(59, 130, 246, 0.4);
     }

     50% {
         box-shadow: 0 4px 24px rgba(59, 130, 246, 0.6);
     }
 }

 .offer-image {
     width: 100%;
     height: 280px;
     overflow: hidden;
     background: linear-gradient(135deg, #1a1a2e 0%, #2d2d44 100%);
     display: flex;
     align-items: center;
     justify-content: center;
     position: relative;
 }

 .offer-image::after {
     content: '';
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     height: 100px;
     background: linear-gradient(to top, rgba(10, 10, 30, 0.8), transparent);
     pointer-events: none;
 }

 .offer-image img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
     filter: brightness(0.95);
 }

 .offer-card:hover .offer-image img {
     transform: scale(1.15);
     filter: brightness(1.05);
 }

 .offer-content {
     padding: 32px;
 }

 .offer-title {
     font-size: 24px;
     font-weight: 800;
     background: linear-gradient(135deg, #ffffff 0%, #e0e0e0 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
     margin-bottom: 14px;
     letter-spacing: -0.5px;
 }

 .offer-description {
     font-size: 14px;
     color: rgba(255, 255, 255, 0.7);
     line-height: 1.7;
     margin-bottom: 24px;
 }

 .offer-features {
     display: flex;
     flex-wrap: wrap;
     gap: 10px;
     margin-bottom: 20px;
 }

 .offer-feature-tag {
     padding: 8px 14px;
     background: linear-gradient(135deg,
             rgba(59, 130, 246, 0.15) 0%,
             rgba(59, 130, 246, 0.08) 100%);
     border: 1px solid rgba(59, 130, 246, 0.4);
     border-radius: 14px;
     font-size: 12px;
     color: #60a5fa;
     font-weight: 700;
     transition: all 0.3s ease;
     backdrop-filter: blur(10px);
 }

 .offer-feature-tag:hover {
     background: linear-gradient(135deg,
             rgba(59, 130, 246, 0.25) 0%,
             rgba(59, 130, 246, 0.15) 100%);
     transform: translateY(-2px);
     box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
 }

 .offer-tech {
     display: flex;
     flex-wrap: wrap;
     gap: 10px;
     margin-bottom: 24px;
     padding-top: 20px;
     border-top: 1px solid rgba(255, 255, 255, 0.08);
 }

 .offer-tech .tech-badge {
     padding: 6px 12px;
     background: linear-gradient(135deg,
             rgba(139, 92, 246, 0.2) 0%,
             rgba(139, 92, 246, 0.1) 100%);
     color: #c4b5fd;
     border-radius: 10px;
     font-size: 11px;
     font-weight: 700;
     border: 1px solid rgba(139, 92, 246, 0.3);
     transition: all 0.3s ease;
 }

 .offer-tech .tech-badge:hover {
     background: linear-gradient(135deg,
             rgba(139, 92, 246, 0.3) 0%,
             rgba(139, 92, 246, 0.15) 100%);
     transform: translateY(-2px);
 }

 .offer-footer {
     display: flex;
     flex-direction: column;
     gap: 20px;
     padding-top: 24px;
     border-top: 1px solid rgba(255, 255, 255, 0.08);
 }

 .offer-price {
     display: flex;
     align-items: baseline;
     gap: 4px;
 }

 .price-currency {
     font-size: 24px;
     color: rgba(255, 255, 255, 0.5);
     font-weight: 700;
 }

 .price-amount {
     font-size: 48px;
     font-weight: 900;
     background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
     letter-spacing: -2px;
     line-height: 1;
 }

 .price-period {
     font-size: 16px;
     color: rgba(255, 255, 255, 0.5);
     font-weight: 600;
 }

 .offer-btn {
     width: 100%;
     padding: 16px 28px;
     background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
     color: white;
     border: none;
     border-radius: 14px;
     font-weight: 700;
     font-size: 16px;
     cursor: pointer;
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 10px;
     box-shadow: 0 8px 24px rgba(59, 130, 246, 0.3);
     position: relative;
     overflow: hidden;
 }

 .offer-btn::before {
     content: '';
     position: absolute;
     top: 0;
     left: -100%;
     width: 100%;
     height: 100%;
     background: linear-gradient(90deg,
             transparent,
             rgba(255, 255, 255, 0.3),
             transparent);
     transition: left 0.5s ease;
 }

 .offer-btn:hover::before {
     left: 100%;
 }

 .offer-btn:hover {
     transform: translateY(-3px);
     box-shadow: 0 12px 28px rgba(59, 130, 246, 0.5),
         0 0 40px rgba(139, 92, 246, 0.3);
 }

 .offer-btn:active {
     transform: translateY(-1px);
 }

 .offers-note {
     margin-top: 50px;
     margin-bottom: 35px;
     padding: 24px 32px;
     background: linear-gradient(135deg,
             rgba(59, 130, 246, 0.15) 0%,
             rgba(139, 92, 246, 0.1) 100%);
     border: 1px solid rgba(59, 130, 246, 0.4);
     border-radius: 16px;
     text-align: center;
     color: #60a5fa;
     font-size: 14px;
     font-weight: 700;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 12px;
     backdrop-filter: blur(10px);
     box-shadow: 0 4px 16px rgba(59, 130, 246, 0.15);
 }

 .offers-note i {
     font-size: 18px;
 }

 /* Full Offers Page Grid */
 .offers-grid-full {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 40px;
     margin-top: 60px;
 }

 .all-offers-page .offer-card {
     animation: fadeInUp 0.6s ease-out forwards;
     opacity: 0;
 }

 .all-offers-page .offer-card:nth-child(1) {
     animation-delay: 0.1s;
 }

 .all-offers-page .offer-card:nth-child(2) {
     animation-delay: 0.2s;
 }

 .all-offers-page .offer-card:nth-child(3) {
     animation-delay: 0.3s;
 }

 .all-offers-page .offer-card:nth-child(4) {
     animation-delay: 0.4s;
 }

 .all-offers-page .offer-card:nth-child(5) {
     animation-delay: 0.5s;
 }

 .all-offers-page .offer-card:nth-child(6) {
     animation-delay: 0.6s;
 }

 /* All Offers Page Styling */
 .all-offers-page {
     background: var(--bg-primary);
     min-height: 100vh;
 }

 .all-offers-page .container {
     padding-bottom: 80px;
 }

 .all-offers-page .projects-header-section {
     background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
 }

 /* Responsive adjustments */
 /* Tablet */
 @media (max-width: 1024px) {
     .offers-grid {
         grid-template-columns: repeat(2, 1fr);
         gap: 25px;
     }

     /* offers-grid-full stays at 2 columns */
 }

 /* Mobile */
 @media (max-width: 768px) {
     .services-grid {
         grid-template-columns: 1fr;
         gap: 20px;
     }

     .service-card {
         padding: 28px 24px;
     }

     .service-icon {
         font-size: 44px;
     }

     .service-title {
         font-size: 18px;
     }

     .service-description {
         font-size: 13px;
     }

     .service-features li {
         font-size: 12px;
         padding: 8px 0 8px 24px;
     }

     .offers-grid {
         grid-template-columns: 1fr;
         gap: 30px;
     }

     .offers-grid-full {
         grid-template-columns: 1fr;
         gap: 30px;
     }

     .offer-price {
         flex-direction: column;
         align-items: flex-start;
         gap: 4px;
     }

     .price-amount {
         font-size: 36px;
     }
 }

 /* Light Mode Overrides for Offers Section */
 body.light-theme .offers-section::before {
     background: radial-gradient(circle, rgba(59, 130, 246, 0.08) 0%, transparent 70%);
 }

 body.light-theme .offer-card {
     background: linear-gradient(135deg,
             rgba(255, 255, 255, 0.95) 0%,
             rgba(249, 250, 251, 0.9) 100%);
     border: 1px solid rgba(0, 0, 0, 0.08);
     box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
 }

 body.light-theme .offer-card::before {
     background: linear-gradient(135deg,
             rgba(59, 130, 246, 0.05) 0%,
             rgba(139, 92, 246, 0.05) 100%);
 }

 body.light-theme .offer-card:hover {
     box-shadow: 0 24px 48px rgba(59, 130, 246, 0.15),
         0 0 80px rgba(139, 92, 246, 0.08);
     border-color: rgba(59, 130, 246, 0.2);
 }

 body.light-theme .offer-image {
     background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
 }

 body.light-theme .offer-image::after {
     background: linear-gradient(to top, rgba(255, 255, 255, 0.9), transparent);
 }

 body.light-theme .offer-title {
     background: linear-gradient(135deg, #0f172a 0%, #334155 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
 }

 body.light-theme .offer-description {
     color: #64748b;
 }

 body.light-theme .offer-feature-tag {
     background: linear-gradient(135deg,
             rgba(59, 130, 246, 0.12) 0%,
             rgba(59, 130, 246, 0.06) 100%);
     border: 1px solid rgba(59, 130, 246, 0.25);
     color: #2563eb;
 }

 body.light-theme .offer-feature-tag:hover {
     background: linear-gradient(135deg,
             rgba(59, 130, 246, 0.2) 0%,
             rgba(59, 130, 246, 0.12) 100%);
     box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
 }

 body.light-theme .offer-tech {
     border-top: 1px solid rgba(0, 0, 0, 0.06);
 }

 body.light-theme .offer-tech .tech-badge {
     background: linear-gradient(135deg,
             rgba(139, 92, 246, 0.15) 0%,
             rgba(139, 92, 246, 0.08) 100%);
     color: #7c3aed;
     border: 1px solid rgba(139, 92, 246, 0.25);
 }

 body.light-theme .offer-tech .tech-badge:hover {
     background: linear-gradient(135deg,
             rgba(139, 92, 246, 0.25) 0%,
             rgba(139, 92, 246, 0.15) 100%);
     box-shadow: 0 4px 12px rgba(139, 92, 246, 0.2);
 }

 body.light-theme .offer-footer {
     border-top: 1px solid rgba(0, 0, 0, 0.06);
 }

 body.light-theme .price-currency {
     color: #94a3b8;
 }

 body.light-theme .price-period {
     color: #94a3b8;
 }

 body.light-theme .offers-note {
     background: linear-gradient(135deg,
             rgba(59, 130, 246, 0.1) 0%,
             rgba(139, 92, 246, 0.06) 100%);
     border: 1px solid rgba(59, 130, 246, 0.25);
     color: #2563eb;
     box-shadow: 0 4px 16px rgba(59, 130, 246, 0.1);
 }

 /* ==================== HOME PAGE OFFERS (SIMPLE CARDS) ==================== */
 .offers-grid-home {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     gap: 32px;
     margin-top: 50px;
 }

 .offer-card-simple {
     background: linear-gradient(135deg,
             rgba(255, 255, 255, 0.05) 0%,
             rgba(255, 255, 255, 0.02) 100%);
     backdrop-filter: blur(20px);
     -webkit-backdrop-filter: blur(20px);
     border-radius: 20px;
     padding: 28px;
     border: 1px solid rgba(255, 255, 255, 0.1);
     position: relative;
     overflow: hidden;
     transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
     box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
     display: flex;
     flex-direction: column;
     gap: 20px;
 }

 .offer-card-simple::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: linear-gradient(135deg,
             rgba(0, 122, 255, 0.08) 0%,
             rgba(0, 212, 255, 0.04) 100%);
     opacity: 0;
     transition: opacity 0.4s ease;
     pointer-events: none;
 }

 .offer-card-simple:hover {
     transform: translateY(-8px);
     box-shadow: 0 16px 40px rgba(0, 122, 255, 0.25);
     border-color: rgba(0, 122, 255, 0.3);
 }

 .offer-card-simple:hover::before {
     opacity: 1;
 }

 .offer-card-simple .offer-badge {
     position: absolute;
     top: 20px;
     right: 20px;
     background: linear-gradient(135deg, #007AFF 0%, #00D4FF 100%);
     color: white;
     padding: 8px 16px;
     border-radius: 20px;
     font-size: 12px;
     font-weight: 700;
     z-index: 10;
     box-shadow: 0 4px 12px rgba(0, 122, 255, 0.4);
 }

 .offer-header {
     display: flex;
     justify-content: space-between;
     align-items: flex-start;
     gap: 16px;
     padding-right: 80px;
     /* Space for badge */
 }

 .offer-card-simple .offer-title {
     font-size: 22px;
     font-weight: 700;
     color: var(--text-primary);
     margin: 0;
     line-height: 1.3;
 }

 .offer-card-simple .offer-price {
     display: flex;
     align-items: baseline;
     gap: 4px;
     flex-shrink: 0;
 }

 .offer-card-simple .price-currency {
     font-size: 18px;
     color: var(--text-tertiary);
     font-weight: 600;
 }

 .offer-card-simple .price-amount {
     font-size: 32px;
     font-weight: 900;
     background: var(--gradient-primary);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
     line-height: 1;
 }

 .offer-description-short {
     font-size: 15px;
     color: var(--text-secondary);
     line-height: 1.6;
     margin: 0;
     display: -webkit-box;
     -webkit-line-clamp: 2;
     line-clamp: 2;
     -webkit-box-orient: vertical;
     overflow: hidden;
     min-height: 48px;
 }

 .offer-buy-btn {
     width: 100%;
     padding: 14px 24px;
     background: var(--gradient-primary);
     color: white;
     border: none;
     border-radius: 12px;
     font-size: 16px;
     font-weight: 600;
     cursor: pointer;
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 10px;
     box-shadow: 0 6px 20px rgba(0, 122, 255, 0.3);
     margin-top: auto;
 }

 .offer-buy-btn:hover {
     transform: translateY(-2px);
     box-shadow: 0 10px 30px rgba(0, 122, 255, 0.5);
 }

 .offer-buy-btn:active {
     transform: translateY(0);
 }

 /* Light Theme - Simple Cards */
 body.light-theme .offer-card-simple {
     background: linear-gradient(135deg,
             rgba(255, 255, 255, 0.95) 0%,
             rgba(249, 250, 251, 0.9) 100%);
     border: 1px solid rgba(0, 0, 0, 0.08);
     box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
 }

 body.light-theme .offer-card-simple::before {
     background: linear-gradient(135deg,
             rgba(0, 122, 255, 0.05) 0%,
             rgba(0, 212, 255, 0.02) 100%);
 }

 body.light-theme .offer-card-simple:hover {
     box-shadow: 0 16px 40px rgba(0, 122, 255, 0.15);
     border-color: rgba(0, 122, 255, 0.2);
 }

 /* ==================== OFFERS DETAILS PAGE ==================== */
 .offers-page {
     background: var(--bg-primary);
     min-height: 100vh;
 }

 .page-header {
     text-align: center;
     padding: 100px 20px 60px;
     position: relative;
 }

 .page-header::before {
     content: '';
     position: absolute;
     top: 0;
     left: 50%;
     transform: translateX(-50%);
     width: 600px;
     height: 600px;
     background: radial-gradient(circle, rgba(0, 122, 255, 0.15) 0%, transparent 70%);
     pointer-events: none;
     z-index: 0;
 }

 .page-title {
     font-size: 48px;
     font-weight: 800;
     background: linear-gradient(135deg, var(--text-primary) 0%, var(--text-secondary) 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
     margin-bottom: 16px;
     position: relative;
     z-index: 1;
 }

 .page-subtitle {
     font-size: 18px;
     color: var(--text-secondary);
     position: relative;
     z-index: 1;
 }

 .offers-grid-detailed {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
     gap: 40px;
     margin-top: 60px;
     margin-bottom: 60px;
 }

 .offer-card-detailed {
     background: linear-gradient(135deg,
             rgba(255, 255, 255, 0.05) 0%,
             rgba(255, 255, 255, 0.02) 100%);
     backdrop-filter: blur(20px);
     -webkit-backdrop-filter: blur(20px);
     border-radius: 24px;
     overflow: hidden;
     border: 1px solid rgba(255, 255, 255, 0.1);
     position: relative;
     transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
     box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
     animation: fadeInUp 0.6s ease-out forwards;
     opacity: 0;
 }

 .offer-card-detailed:nth-child(1) {
     animation-delay: 0.1s;
 }

 .offer-card-detailed:nth-child(2) {
     animation-delay: 0.2s;
 }

 .offer-card-detailed:nth-child(3) {
     animation-delay: 0.3s;
 }

 .offer-card-detailed::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: linear-gradient(135deg,
             rgba(0, 122, 255, 0.08) 0%,
             rgba(0, 212, 255, 0.04) 100%);
     opacity: 0;
     transition: opacity 0.4s ease;
     pointer-events: none;
     z-index: 0;
 }

 .offer-card-detailed:hover {
     transform: translateY(-8px);
     box-shadow: 0 20px 50px rgba(0, 122, 255, 0.3);
     border-color: rgba(0, 122, 255, 0.3);
 }

 .offer-card-detailed:hover::before {
     opacity: 1;
 }

 .offer-card-detailed .offer-badge {
     position: absolute;
     top: 24px;
     right: 24px;
     background: linear-gradient(135deg, #007AFF 0%, #00D4FF 100%);
     color: white;
     padding: 10px 20px;
     border-radius: 24px;
     font-size: 13px;
     font-weight: 700;
     z-index: 10;
     box-shadow: 0 4px 16px rgba(0, 122, 255, 0.4);
 }

 .offer-image-container {
     width: 100%;
     height: 300px;
     position: relative;
     overflow: hidden;
     background: linear-gradient(135deg, #1a1a2e 0%, #2d2d44 100%);
 }

 .offer-image-container img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
     filter: brightness(0.95);
 }

 .offer-card-detailed:hover .offer-image-container img {
     transform: scale(1.1);
     filter: brightness(1.05);
 }

 .offer-image-overlay {
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     height: 120px;
     background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
     pointer-events: none;
 }

 .offer-content-detailed {
     padding: 32px;
     position: relative;
     z-index: 1;
 }

 .offer-title-large {
     font-size: 28px;
     font-weight: 800;
     color: var(--text-primary);
     margin-bottom: 16px;
     line-height: 1.3;
 }

 .offer-description-full {
     font-size: 15px;
     color: var(--text-secondary);
     line-height: 1.7;
     margin-bottom: 24px;
 }

 .offer-features-grid {
     display: flex;
     flex-wrap: wrap;
     gap: 10px;
     margin-bottom: 24px;
 }

 .feature-tag {
     padding: 8px 14px;
     background: linear-gradient(135deg,
             rgba(59, 130, 246, 0.15) 0%,
             rgba(59, 130, 246, 0.08) 100%);
     border: 1px solid rgba(59, 130, 246, 0.4);
     border-radius: 14px;
     font-size: 12px;
     color: #60a5fa;
     font-weight: 700;
     transition: all 0.3s ease;
 }

 .feature-tag:hover {
     background: linear-gradient(135deg,
             rgba(59, 130, 246, 0.25) 0%,
             rgba(59, 130, 246, 0.15) 100%);
     transform: translateY(-2px);
     box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
 }

 .offer-tech-stack {
     padding-top: 20px;
     border-top: 1px solid rgba(255, 255, 255, 0.08);
     margin-bottom: 24px;
 }

 .tech-stack-title {
     font-size: 16px;
     font-weight: 700;
     color: var(--text-primary);
     margin-bottom: 12px;
 }

 .tech-stack-grid {
     display: flex;
     flex-wrap: wrap;
     gap: 8px;
 }

 .offer-tech-stack .tech-badge {
     padding: 6px 12px;
     background: linear-gradient(135deg,
             rgba(139, 92, 246, 0.2) 0%,
             rgba(139, 92, 246, 0.1) 100%);
     color: #c4b5fd;
     border-radius: 10px;
     font-size: 11px;
     font-weight: 700;
     border: 1px solid rgba(139, 92, 246, 0.3);
     transition: all 0.3s ease;
 }

 .offer-tech-stack .tech-badge:hover {
     background: linear-gradient(135deg,
             rgba(139, 92, 246, 0.3) 0%,
             rgba(139, 92, 246, 0.15) 100%);
     transform: translateY(-2px);
 }

 .offer-footer-detailed {
     padding-top: 24px;
     border-top: 1px solid rgba(255, 255, 255, 0.08);
 }

 .offer-price-large {
     margin-bottom: 24px;
 }

 .price-label {
     font-size: 14px;
     color: var(--text-tertiary);
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: 1px;
     display: block;
     margin-bottom: 8px;
 }

 .price-display {
     display: flex;
     align-items: baseline;
     gap: 6px;
 }

 .offer-price-large .price-currency {
     font-size: 28px;
     color: var(--text-tertiary);
     font-weight: 700;
 }

 .offer-price-large .price-amount {
     font-size: 60px;
     font-weight: 900;
     background: var(--gradient-primary);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
     letter-spacing: -2px;
     line-height: 1;
 }

 .offer-price-large .price-period {
     font-size: 18px;
     color: var(--text-tertiary);
     font-weight: 600;
 }

 .offer-buy-btn-large {
     width: 100%;
     padding: 18px 32px;
     background: var(--gradient-primary);
     color: white;
     border: none;
     border-radius: 14px;
     font-size: 18px;
     font-weight: 700;
     cursor: pointer;
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 12px;
     box-shadow: 0 8px 24px rgba(0, 122, 255, 0.3);
     position: relative;
     overflow: hidden;
 }

 .offer-buy-btn-large::before {
     content: '';
     position: absolute;
     top: 0;
     left: -100%;
     width: 100%;
     height: 100%;
     background: linear-gradient(90deg,
             transparent,
             rgba(255, 255, 255, 0.3),
             transparent);
     transition: left 0.5s ease;
 }

 .offer-buy-btn-large:hover::before {
     left: 100%;
 }

 .offer-buy-btn-large:hover {
     transform: translateY(-3px);
     box-shadow: 0 12px 36px rgba(0, 122, 255, 0.5);
 }

 .offer-buy-btn-large:active {
     transform: translateY(-1px);
 }

 /* Light Theme - Detailed Cards */
 body.light-theme .offer-card-detailed {
     background: linear-gradient(135deg,
             rgba(255, 255, 255, 0.95) 0%,
             rgba(249, 250, 251, 0.9) 100%);
     border: 1px solid rgba(0, 0, 0, 0.08);
     box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
 }

 body.light-theme .offer-card-detailed::before {
     background: linear-gradient(135deg,
             rgba(0, 122, 255, 0.05) 0%,
             rgba(0, 212, 255, 0.02) 100%);
 }

 body.light-theme .offer-card-detailed:hover {
     box-shadow: 0 20px 50px rgba(0, 122, 255, 0.15);
     border-color: rgba(0, 122, 255, 0.2);
 }

 body.light-theme .offer-image-container {
     background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
 }

 body.light-theme .offer-image-overlay {
     background: linear-gradient(to top, rgba(255, 255, 255, 0.9), transparent);
 }

 body.light-theme .feature-tag {
     background: linear-gradient(135deg,
             rgba(59, 130, 246, 0.12) 0%,
             rgba(59, 130, 246, 0.06) 100%);
     border: 1px solid rgba(59, 130, 246, 0.25);
     color: #2563eb;
 }

 body.light-theme .feature-tag:hover {
     background: linear-gradient(135deg,
             rgba(59, 130, 246, 0.2) 0%,
             rgba(59, 130, 246, 0.12) 100%);
     box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
 }

 body.light-theme .offer-tech-stack {
     border-top: 1px solid rgba(0, 0, 0, 0.06);
 }

 body.light-theme .offer-tech-stack .tech-badge {
     background: linear-gradient(135deg,
             rgba(139, 92, 246, 0.15) 0%,
             rgba(139, 92, 246, 0.08) 100%);
     color: #7c3aed;
     border: 1px solid rgba(139, 92, 246, 0.25);
 }

 body.light-theme .offer-tech-stack .tech-badge:hover {
     background: linear-gradient(135deg,
             rgba(139, 92, 246, 0.25) 0%,
             rgba(139, 92, 246, 0.15) 100%);
     box-shadow: 0 4px 12px rgba(139, 92, 246, 0.2);
 }

 body.light-theme .offer-footer-detailed {
     border-top: 1px solid rgba(0, 0, 0, 0.06);
 }

 /* Responsive - Offers */
 @media (max-width: 1024px) {
     .offers-grid-home {
         grid-template-columns: repeat(2, 1fr);
         gap: 24px;
     }

     .offers-grid-detailed {
         grid-template-columns: 1fr;
         gap: 32px;
     }
 }

 @media (max-width: 768px) {
     .offers-grid-home {
         grid-template-columns: 1fr;
         gap: 24px;
     }

     .page-title {
         font-size: 36px;
     }

     .page-subtitle {
         font-size: 16px;
     }

     .offer-card-simple {
         padding: 24px;
     }

     .offer-header {
         flex-direction: column;
         gap: 12px;
         padding-right: 60px;
     }

     .offer-card-simple .offer-price {
         flex-direction: column;
         align-items: flex-start;
     }

     .offer-content-detailed {
         padding: 24px;
     }

     .offer-title-large {
         font-size: 24px;
     }

     .offer-price-large .price-amount {
         font-size: 48px;
     }

     .offer-buy-btn-large {
         font-size: 16px;
         padding: 16px 24px;
     }
 }

 @media (max-width: 480px) {
     .offer-card-simple .offer-title {
         font-size: 18px;
     }

     .offer-card-simple .price-amount {
         font-size: 28px;
     }

     .offer-description-short {
         font-size: 14px;
     }

     .offer-buy-btn {
         padding: 12px 20px;
         font-size: 15px;
     }

     .page-header {
         padding: 80px 20px 40px;
     }

     .page-title {
         font-size: 28px;
     }
 }

 /* Pricing Section */
 .pricing-section {
     margin-bottom: 80px;
 }

 .pricing-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
     gap: 30px;
     margin-top: 50px;
 }

 .pricing-card {
     background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
     border: 2px solid rgba(255, 255, 255, 0.1);
     border-radius: 24px;
     padding: 40px 32px;
     transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
     position: relative;
     overflow: hidden;
     animation: scaleIn 0.6s ease-out forwards;
     opacity: 0;
 }

 .pricing-card:nth-child(1) {
     animation-delay: 0.2s;
 }

 .pricing-card:nth-child(2) {
     animation-delay: 0.4s;
 }

 .pricing-card:nth-child(3) {
     animation-delay: 0.6s;
 }

 @keyframes scaleIn {
     from {
         opacity: 0;
         transform: scale(0.9);
     }

     to {
         opacity: 1;
         transform: scale(1);
     }
 }

 .pricing-card::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: linear-gradient(135deg, rgba(0, 122, 255, 0.05) 0%, transparent 100%);
     opacity: 0;
     transition: opacity 0.4s ease;
     pointer-events: none;
 }

 .pricing-card:hover::before {
     opacity: 1;
 }

 body.light-theme .pricing-card {
     background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.9) 100%);
     border: 2px solid rgba(0, 0, 0, 0.08);
     box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
 }

 .pricing-card.featured {
     border-color: rgba(0, 122, 255, 0.6);
     background: linear-gradient(135deg, rgba(0, 122, 255, 0.12) 0%, rgba(0, 212, 255, 0.06) 100%);
     transform: scale(1.08);
     box-shadow: 0 15px 60px rgba(0, 122, 255, 0.3);
 }

 .pricing-card.featured::after {
     content: '';
     position: absolute;
     top: -2px;
     left: -2px;
     right: -2px;
     bottom: -2px;
     background: linear-gradient(135deg, #007AFF, #00D4FF);
     border-radius: 24px;
     z-index: -1;
     opacity: 0.5;
 }

 body.light-theme .pricing-card.featured {
     border-color: rgba(0, 122, 255, 0.5);
     background: linear-gradient(135deg, rgba(0, 122, 255, 0.1) 0%, rgba(0, 212, 255, 0.05) 100%);
     box-shadow: 0 15px 60px rgba(0, 122, 255, 0.25);
 }

 .pricing-card:hover {
     transform: translateY(-10px);
     box-shadow: 0 25px 60px rgba(0, 122, 255, 0.3);
     border-color: rgba(0, 122, 255, 0.5);
 }

 body.light-theme .pricing-card:hover {
     box-shadow: 0 20px 50px rgba(0, 122, 255, 0.2);
 }

 .pricing-card.featured:hover {
     transform: scale(1.08) translateY(-10px);
     box-shadow: 0 30px 70px rgba(0, 122, 255, 0.4);
 }

 .pricing-badge {
     position: absolute;
     top: 20px;
     right: 20px;
     padding: 6px 14px;
     background: rgba(0, 122, 255, 0.2);
     border: 1px solid rgba(0, 122, 255, 0.3);
     border-radius: 20px;
     font-size: 11px;
     font-weight: 700;
     color: #007AFF;
     text-transform: uppercase;
     letter-spacing: 0.5px;
 }

 .pricing-badge.popular {
     background: linear-gradient(135deg, #007AFF 0%, #00D4FF 100%);
     border-color: transparent;
     color: white;
 }

 .pricing-icon {
     font-size: 48px;
     margin-bottom: 20px;
 }

 .pricing-title {
     font-size: 24px;
     font-weight: 700;
     color: white;
     margin-bottom: 16px;
 }

 body.light-theme .pricing-title {
     color: #1d1d1f;
 }

 /* Pricing Price Display */
 .pricing-price {
     display: flex;
     align-items: baseline;
     gap: 6px;
     margin-bottom: 20px;
 }

 .price-amount {
     font-size: 42px;
     font-weight: 800;
     background: linear-gradient(135deg, #007AFF 0%, #00D4FF 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
     line-height: 1;
 }

 .pricing-card.featured .price-amount {
     font-size: 48px;
     animation: priceGlow 2s ease-in-out infinite;
 }

 @keyframes priceGlow {

     0%,
     100% {
         filter: drop-shadow(0 0 10px rgba(0, 122, 255, 0.5));
     }

     50% {
         filter: drop-shadow(0 0 20px rgba(0, 122, 255, 0.8));
     }
 }

 .price-period {
     font-size: 16px;
     color: #888;
     font-weight: 600;
 }

 body.light-theme .price-period {
     color: #666;
 }

 .pricing-description {
     font-size: 15px;
     color: #b0b0b0;
     line-height: 1.6;
     margin-bottom: 24px;
 }

 body.light-theme .pricing-description {
     color: #515154;
 }

 .pricing-features {
     display: flex;
     flex-direction: column;
     gap: 12px;
 }

 .pricing-features .feature-item {
     display: flex;
     align-items: center;
     gap: 12px;
     font-size: 14px;
     color: #ccc;
 }

 body.light-theme .pricing-features .feature-item {
     color: #515154;
 }

 /* Testimonials Inner Section */
 .testimonials-section-inner {
     margin-bottom: 60px;
 }

 /* Hire Bottom CTA */
 .hire-bottom-cta {
     text-align: center;
     padding: 40px 40px;
     background: linear-gradient(135deg, rgba(0, 122, 255, 0.08) 0%, rgba(0, 212, 255, 0.04) 100%);
     border-radius: 24px;
     border: 1px solid rgba(0, 122, 255, 0.2);
 }

 body.light-theme .hire-bottom-cta {
     background: linear-gradient(135deg, rgba(0, 122, 255, 0.06) 0%, rgba(0, 212, 255, 0.02) 100%);
     border: 1px solid rgba(0, 122, 255, 0.15);
 }

 .hire-bottom-cta h3 {
     font-size: 32px;
     font-weight: 700;
     color: white;
     margin-bottom: 16px;
 }

 body.light-theme .hire-bottom-cta h3 {
     color: #1d1d1f;
 }

 .hire-bottom-cta p {
     font-size: 18px;
     color: #b0b0b0;
     margin-bottom: 32px;
     max-width: 600px;
     margin-left: auto;
     margin-right: auto;
 }

 body.light-theme .hire-bottom-cta p {
     color: #515154;
 }

 /* Responsive for Hire Section */
 @media (max-width: 1024px) {
     .services-grid {
         grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     }
 }

 @media (max-width: 768px) {
     .hire-section {
         padding: 60px 0;
     }

     .hire-hero {
         padding: 40px 20px;
         margin-bottom: 50px;
     }

     .hire-title {
         font-size: 32px;
     }

     .hire-subtitle {
         font-size: 16px;
     }

     .services-grid {
         grid-template-columns: 1fr;
         gap: 20px;
     }

     .pricing-grid {
         grid-template-columns: 1fr;
         gap: 20px;
     }

     .pricing-card.featured {
         transform: scale(1);
     }

     .pricing-card.featured:hover {
         transform: translateY(-10px);
     }

     .price-amount {
         font-size: 36px;
     }

     .pricing-card.featured .price-amount {
         font-size: 38px;
     }

     .hire-bottom-cta {
         padding: 40px 20px;
     }

     .hire-bottom-cta h3 {
         font-size: 24px;
     }

     .hire-bottom-cta p {
         font-size: 16px;
     }

     .hire-cta-button {
         padding: 16px 32px;
         font-size: 16px;
     }
 }

 @media (max-width: 480px) {
     .hire-hero {
         padding: 30px 15px;
     }

     .hire-title {
         font-size: 28px;
     }

     .hire-subtitle {
         font-size: 15px;
     }

     .service-card {
         padding: 24px;
     }

     .service-icon {
         font-size: 40px;
     }

     .pricing-card {
         padding: 30px 24px;
     }

     .pricing-icon {
         font-size: 40px;
     }

     .price-amount {
         font-size: 32px;
     }

     .pricing-card.featured .price-amount {
         font-size: 34px;
     }

     .hire-bottom-cta {
         padding: 30px 15px;
     }

     .hire-bottom-cta h3 {
         font-size: 20px;
     }

     .hire-bottom-cta p {
         font-size: 14px;
     }
 }

 /* Testimonials Section */
 .testimonials-section {
     padding: 100px 0;
     background: linear-gradient(135deg, rgba(10, 10, 30, 0.98) 0%, rgba(0, 0, 0, 0.98) 100%);
     position: relative;
     overflow: hidden;
 }

 /* Light Mode - Testimonials Section */
 body.light-theme .testimonials-section {
     background: linear-gradient(135deg, #f0f4f8 0%, #e8eef4 100%);
 }

 body.light-theme .testimonials-section::before {
     background: radial-gradient(circle at 20% 50%, rgba(0, 122, 255, 0.08) 0%, transparent 50%);
 }

 .testimonials-section::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: radial-gradient(circle at 20% 50%, rgba(0, 122, 255, 0.05) 0%, transparent 50%);
     pointer-events: none;
 }

 .testimonials-content {
     max-width: 1200px;
     margin: 0 auto;
     padding: 0 40px;
     position: relative;
     z-index: 1;
 }

 .testimonials-grid {
     display: flex;
     gap: 30px;
     margin-top: 60px;
     overflow-x: auto;
     overflow-y: hidden;
     scroll-snap-type: x mandatory;
     scroll-behavior: smooth;
     padding: 10px 0 30px 0;
     -webkit-overflow-scrolling: touch;
 }

 .testimonials-grid::-webkit-scrollbar {
     height: 8px;
 }

 .testimonials-grid::-webkit-scrollbar-track {
     background: rgba(255, 255, 255, 0.05);
     border-radius: 10px;
 }

 .testimonials-grid::-webkit-scrollbar-thumb {
     background: rgba(0, 122, 255, 0.3);
     border-radius: 10px;
 }

 .testimonials-grid::-webkit-scrollbar-thumb:hover {
     background: rgba(0, 122, 255, 0.5);
 }

 body.light-theme .testimonials-grid::-webkit-scrollbar-track {
     background: rgba(0, 0, 0, 0.05);
 }

 body.light-theme .testimonials-grid::-webkit-scrollbar-thumb {
     background: rgba(0, 122, 255, 0.3);
 }

 body.light-theme .testimonials-grid::-webkit-scrollbar-thumb:hover {
     background: rgba(0, 122, 255, 0.5);
 }

 .testimonial-card {
     background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
     backdrop-filter: blur(20px);
     border: 1px solid rgba(255, 255, 255, 0.1);
     border-radius: 20px;
     padding: 30px;
     transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
     position: relative;
     overflow: hidden;
     min-width: 380px;
     max-width: 380px;
     flex-shrink: 0;
     scroll-snap-align: start;
 }

 /* Light Mode - Testimonial Cards */
 body.light-theme .testimonial-card {
     background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.85) 100%);
     border: 1px solid rgba(0, 0, 0, 0.08);
     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
 }

 body.light-theme .testimonial-card:hover {
     border-color: rgba(0, 122, 255, 0.3);
     box-shadow: 0 8px 30px rgba(0, 122, 255, 0.15);
 }

 .testimonial-card::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: linear-gradient(135deg, rgba(0, 122, 255, 0.1) 0%, transparent 100%);
     opacity: 0;
     transition: opacity 0.4s ease;
 }

 .testimonial-card:hover {
     transform: translateY(-10px);
     border-color: rgba(0, 122, 255, 0.4);
     box-shadow: 0 20px 50px rgba(0, 122, 255, 0.2);
 }

 .testimonial-card:hover::before {
     opacity: 1;
 }

 .quote-icon {
     font-size: 48px;
     color: rgba(0, 122, 255, 0.3);
     line-height: 1;
     margin-bottom: 15px;
 }

 .testimonial-text {
     font-size: 16px;
     color: #d0d0d0;
     line-height: 1.8;
     margin-bottom: 25px;
     font-style: italic;
     position: relative;
     z-index: 1;
 }

 body.light-theme .testimonial-text {
     color: #515154;
 }

 .testimonial-footer {
     display: flex;
     justify-content: space-between;
     align-items: center;
     gap: 15px;
     position: relative;
     z-index: 1;
 }

 .client-info {
     display: flex;
     align-items: center;
     gap: 12px;
 }

 .client-avatar {
     width: 50px;
     height: 50px;
     border-radius: 50%;
     background: linear-gradient(135deg, #007AFF 0%, #00D4FF 100%);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 20px;
     font-weight: 700;
     color: white;
     flex-shrink: 0;
     box-shadow: 0 4px 15px rgba(0, 122, 255, 0.3);
 }

 .client-details {
     flex: 1;
 }

 .client-name {
     font-size: 16px;
     font-weight: 600;
     color: white;
     margin: 0 0 4px 0;
 }

 body.light-theme .client-name {
     color: #1d1d1f;
 }

 .client-location {
     font-size: 14px;
     color: #999;
     margin: 0;
 }

 body.light-theme .client-location {
     color: #86868b;
 }

 .rating {
     display: flex;
     gap: 4px;
     flex-shrink: 0;
 }

 .star {
     font-size: 16px;
     animation: starGlow 2s ease-in-out infinite;
 }

 .star:nth-child(1) {
     animation-delay: 0s;
 }

 .star:nth-child(2) {
     animation-delay: 0.2s;
 }

 .star:nth-child(3) {
     animation-delay: 0.4s;
 }

 .star:nth-child(4) {
     animation-delay: 0.6s;
 }

 .star:nth-child(5) {
     animation-delay: 0.8s;
 }

 @keyframes starGlow {

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

     50% {
         opacity: 0.7;
         transform: scale(1.1);
     }
 }

 /* Mobile Responsive for Testimonials */
 @media (max-width: 768px) {
     .testimonials-section {
         padding: 60px 0;
     }

     .testimonials-content {
         padding: 0 20px;
     }

     .testimonials-grid {
         gap: 20px;
         margin-top: 40px;
         padding: 10px 20px 30px 20px;
     }

     .testimonial-card {
         padding: 24px;
         min-width: 320px;
         max-width: 320px;
     }

     .quote-icon {
         font-size: 40px;
     }

     .testimonial-text {
         font-size: 15px;
     }

     .client-avatar {
         width: 45px;
         height: 45px;
         font-size: 18px;
     }

     .client-name {
         font-size: 15px;
     }

     .client-location {
         font-size: 13px;
     }

     .star {
         font-size: 14px;
     }
 }

 @media (max-width: 480px) {
     .testimonials-section {
         padding: 50px 0;
     }

     .testimonial-card {
         padding: 20px;
     }

     .quote-icon {
         font-size: 36px;
     }

     .testimonial-text {
         font-size: 14px;
     }

     .testimonial-footer {
         flex-direction: column;
         align-items: flex-start;
         gap: 12px;
     }

     .rating {
         align-self: flex-start;
     }
 }

 /* Beyond Code Section */
 .beyond-code-section {
     padding: 100px 0;
     background: linear-gradient(135deg, rgba(0, 0, 0, 0.95) 0%, rgba(20, 20, 40, 0.95) 100%);
 }

 /* Light Mode - Beyond Code Section */
 body.light-theme .beyond-code-section {
     background: linear-gradient(135deg, #fafbfc 0%, #f0f2f5 100%);
 }

 .beyond-code-content {
     max-width: 1200px;
     margin: 0 auto;
     padding: 0 40px;
 }

 .beyond-code-grid {
     display: flex;
     gap: 30px;
     margin-top: 60px;
     overflow-x: auto;
     overflow-y: hidden;
     scroll-snap-type: x mandatory;
     scroll-behavior: smooth;
     padding: 10px 0 30px 0;
     -webkit-overflow-scrolling: touch;
 }

 .beyond-code-grid::-webkit-scrollbar {
     height: 8px;
 }

 .beyond-code-grid::-webkit-scrollbar-track {
     background: rgba(255, 255, 255, 0.05);
     border-radius: 10px;
 }

 .beyond-code-grid::-webkit-scrollbar-thumb {
     background: rgba(0, 122, 255, 0.3);
     border-radius: 10px;
 }

 .beyond-code-grid::-webkit-scrollbar-thumb:hover {
     background: rgba(0, 122, 255, 0.5);
 }

 body.light-theme .beyond-code-grid::-webkit-scrollbar-track {
     background: rgba(0, 0, 0, 0.05);
 }

 body.light-theme .beyond-code-grid::-webkit-scrollbar-thumb {
     background: rgba(0, 122, 255, 0.3);
 }

 body.light-theme .beyond-code-grid::-webkit-scrollbar-thumb:hover {
     background: rgba(0, 122, 255, 0.5);
 }

 .beyond-card {
     background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
     backdrop-filter: blur(20px);
     border: 1px solid rgba(255, 255, 255, 0.1);
     border-radius: 24px;
     padding: 35px;
     transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
     position: relative;
     overflow: hidden;
     min-width: 320px;
     max-width: 320px;
     flex-shrink: 0;
     scroll-snap-align: start;
 }

 body.light-theme .beyond-card {
     background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.92) 100%);
     border: 1px solid rgba(0, 0, 0, 0.08);
     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
 }

 body.light-theme .beyond-card:hover {
     border-color: rgba(0, 122, 255, 0.3);
     box-shadow: 0 8px 30px rgba(0, 122, 255, 0.15);
 }

 .beyond-card::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: linear-gradient(135deg, rgba(0, 122, 255, 0.1) 0%, transparent 100%);
     opacity: 0;
     transition: opacity 0.4s ease;
 }

 .beyond-card:hover::before {
     opacity: 1;
 }

 .beyond-card:hover {
     transform: translateY(-10px);
     border-color: rgba(0, 122, 255, 0.4);
     box-shadow: 0 20px 50px rgba(0, 122, 255, 0.2);
 }

 .card-icon {
     font-size: 48px;
     margin-bottom: 20px;
     display: inline-block;
     transition: transform 0.4s ease;
 }

 .beyond-card:hover .card-icon {
     transform: scale(1.2) rotate(10deg);
 }

 .card-title {
     font-size: 24px;
     font-weight: 700;
     color: white;
     margin-bottom: 16px;
     background: linear-gradient(135deg, #ffffff 0%, #007AFF 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
 }

 body.light-theme .card-title {
     background: linear-gradient(135deg, #1d1d1f 0%, #007AFF 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
 }

 .card-text {
     font-size: 16px;
     color: #b0b0b0;
     line-height: 1.7;
 }

 body.light-theme .card-text {
     color: #515154;
 }

 .profile-card {
     grid-column: span 1;
     display: flex;
     flex-direction: column;
     align-items: center;
     text-align: center;
     padding: 30px;
     background: linear-gradient(135deg, rgba(0, 122, 255, 0.15) 0%, rgba(0, 212, 255, 0.05) 100%);
     border: 2px solid rgba(0, 122, 255, 0.3);
 }

 body.light-theme .profile-card {
     background: linear-gradient(135deg, rgba(0, 122, 255, 0.08) 0%, rgba(0, 212, 255, 0.03) 100%);
     border: 2px solid rgba(0, 122, 255, 0.25);
 }

 .profile-image-wrapper {
     position: relative;
     width: 100%;
     max-width: 250px;
     aspect-ratio: 1;
     margin-bottom: 20px;
     overflow: hidden;
     border-radius: 20px;
     border: 3px solid rgba(0, 122, 255, 0.4);
 }

 .profile-image {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform 0.4s ease;
 }

 .profile-card:hover .profile-image {
     transform: scale(1.1);
 }

 .image-overlay {
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
     padding: 15px;
     transform: translateY(100%);
     transition: transform 0.4s ease;
 }

 .profile-card:hover .image-overlay {
     transform: translateY(0);
 }

 .overlay-text {
     color: white;
     font-size: 14px;
     font-weight: 600;
 }

 .profile-quote {
     font-size: 17px;
     color: #e0e0e0;
     font-style: italic;
     line-height: 1.6;
     position: relative;
     padding: 0 20px;
 }

 body.light-theme .profile-quote {
     color: #515154;
 }

 .profile-quote::before {
     content: '"';
     position: absolute;
     top: -10px;
     left: 0;
     font-size: 48px;
     color: rgba(0, 122, 255, 0.4);
     font-family: Georgia, serif;
 }

 .profile-quote::after {
     content: '"';
     position: absolute;
     bottom: -30px;
     right: 0;
     font-size: 48px;
     color: rgba(0, 122, 255, 0.4);
     font-family: Georgia, serif;
 }

 /* Mobile Responsive for Beyond Code */
 @media (max-width: 768px) {
     .beyond-code-section {
         padding: 60px 0;
     }

     .beyond-code-content {
         padding: 0 20px;
     }

     .beyond-code-grid {
         gap: 20px;
         margin-top: 40px;
         padding: 10px 20px 30px 20px;
     }

     .beyond-card {
         min-width: 280px;
         max-width: 280px;
     }

     .beyond-card {
         padding: 28px;
     }

     .card-icon {
         font-size: 40px;
     }

     .card-title {
         font-size: 22px;
     }

     .card-text {
         font-size: 15px;
     }

     .profile-image-wrapper {
         max-width: 200px;
     }

     .profile-quote {
         font-size: 16px;
     }
 }

 @media (max-width: 480px) {
     .beyond-code-section {
         padding: 50px 0;
     }

     .beyond-card {
         padding: 24px;
     }

     .card-icon {
         font-size: 36px;
     }

     .card-title {
         font-size: 20px;
     }

     .card-text {
         font-size: 14px;
     }

     .profile-quote {
         font-size: 15px;
         padding: 0 10px;
     }
 }

 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }

 /* ==================== THEME VARIABLES ==================== */
 /* Dark Theme (Default) */
 :root {
     --bg-primary: #000000;
     --bg-secondary: #1a1a1a;
     --bg-tertiary: #2d2d2d;
     --bg-card: rgba(255, 255, 255, 0.05);
     --bg-card-hover: rgba(255, 255, 255, 0.08);
     --text-primary: #ffffff;
     --text-secondary: #cccccc;
     --text-tertiary: #999999;
     --border-color: rgba(255, 255, 255, 0.1);
     --border-color-hover: rgba(255, 255, 255, 0.2);
     --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
     --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.2);
     --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.3);
     --gradient-primary: linear-gradient(135deg, #007AFF 0%, #00D4FF 100%);
     --gradient-text: linear-gradient(135deg, #fff 0%, #ccc 100%);
 }

 /* Light Theme - Optimized */
 body.light-theme {
     --bg-primary: #ffffff;
     --bg-secondary: #f5f5f7;
     --bg-tertiary: #e8e8ed;
     --bg-card: rgba(0, 0, 0, 0.03);
     --bg-card-hover: rgba(0, 0, 0, 0.06);
     --text-primary: #1d1d1f;
     --text-secondary: #515154;
     --text-tertiary: #86868b;
     --border-color: rgba(0, 0, 0, 0.1);
     --border-color-hover: rgba(0, 0, 0, 0.2);
     --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
     --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.12);
     --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.15);
     --gradient-primary: linear-gradient(135deg, #007AFF 0%, #0051D5 100%);
     --gradient-text: linear-gradient(135deg, #1d1d1f 0%, #515154 100%);
 }

 body {
     font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
     background: var(--bg-primary);
     color: var(--text-primary);
     overflow-x: hidden;
     transition: background-color 0.3s ease, color 0.3s ease;
     line-height: 1.6;
 }

 /* ==================== RESPONSIVE CONTAINER ==================== */
 .container {
     max-width: 1200px;
     margin: 0 auto;
     padding: clamp(20px, 5vw, 40px);
     width: 100%;
 }

 /* ==================== NAVIGATION ==================== */
 .navigation {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     z-index: 1000;
     background: rgba(0, 0, 0, 0.8);
     backdrop-filter: blur(20px);
     border-bottom: 1px solid var(--border-color);
     transition: all 0.3s ease;
 }

 body.light-theme .navigation {
     background: rgba(255, 255, 255, 0.95);
     box-shadow: var(--shadow-sm);
 }

 .nav-container {
     max-width: 1200px;
     margin: 0 auto;
     padding: 0 clamp(20px, 5vw, 40px);
     display: flex;
     align-items: center;
     justify-content: space-between;
     height: clamp(60px, 10vw, 80px);
 }

 .nav-logo {
     display: flex;
     align-items: center;
     gap: 12px;
     cursor: pointer;
 }

 .logo-icon {
     font-size: clamp(24px, 5vw, 32px);
 }

 .logo-text {
     font-size: clamp(18px, 4vw, 24px);
     font-weight: 700;
     background: var(--gradient-text);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
 }

 .nav-menu {
     display: flex;
     gap: clamp(15px, 3vw, 30px);
 }

 .nav-item {
     color: var(--text-secondary);
     text-decoration: none;
     font-weight: 500;
     transition: color 0.3s ease;
     padding: 10px 0;
     font-size: clamp(14px, 2vw, 16px);
 }

 .nav-item:hover,
 .nav-item.active {
     color: #007AFF;
 }

 /* ==================== THEME TOGGLE ==================== */
 .theme-toggle {
     position: fixed;
     bottom: clamp(20px, 4vw, 30px);
     right: clamp(20px, 4vw, 30px);
     width: clamp(50px, 8vw, 56px);
     height: clamp(50px, 8vw, 56px);
     border-radius: 50%;
     background: rgba(0, 0, 0, 0.8);
     backdrop-filter: blur(10px);
     border: 1px solid var(--border-color);
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     z-index: 999;
     box-shadow: var(--shadow-lg);
 }

 body.light-theme .theme-toggle {
     background: rgba(255, 255, 255, 0.95);
     box-shadow: var(--shadow-md);
 }

 .theme-toggle:hover {
     transform: scale(1.1) rotate(10deg);
     box-shadow: 0 12px 40px rgba(0, 122, 255, 0.3);
     border-color: #007AFF;
 }

 .theme-toggle svg {
     width: clamp(20px, 4vw, 24px);
     height: clamp(20px, 4vw, 24px);
     position: absolute;
     transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
 }

 .sun-icon {
     opacity: 1;
     transform: rotate(0deg) scale(1);
     fill: #FDB813;
 }

 .moon-icon {
     opacity: 0;
     transform: rotate(90deg) scale(0);
     fill: #7B68EE;
 }

 body.light-theme .sun-icon {
     opacity: 0;
     transform: rotate(-90deg) scale(0);
 }

 body.light-theme .moon-icon {
     opacity: 1;
     transform: rotate(0deg) scale(1);
 }

 /* ==================== HERO SECTION ==================== */
 .hero-section {
     min-height: 100vh;
     display: flex;
     align-items: center;
     padding: clamp(80px, 15vw, 100px) 0;
     background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
     transition: background 0.3s ease;
 }

 .hero-content {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
     gap: clamp(40px, 8vw, 80px);
     align-items: center;
 }

 .greeting {
     display: flex;
     align-items: center;
     gap: 15px;
     font-size: clamp(16px, 3vw, 20px);
     color: var(--text-secondary);
     margin-bottom: clamp(15px, 3vw, 20px);
 }

 .wave {
     font-size: clamp(20px, 4vw, 24px);
     animation: wave 2s ease-in-out infinite;
 }

 @keyframes wave {

     0%,
     100% {
         transform: rotate(0deg);
     }

     25% {
         transform: rotate(20deg);
     }

     75% {
         transform: rotate(-10deg);
     }
 }

 .hero-title {
     font-size: clamp(36px, 8vw, 96px);
     font-weight: 800;
     line-height: 1.1;
     margin-bottom: clamp(20px, 4vw, 30px);
 }

 .name {
     background: var(--gradient-primary);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
 }

 .title-text {
     color: var(--text-primary);
 }

 .hero-description {
     font-size: clamp(16px, 3vw, 20px);
     color: var(--text-secondary);
     line-height: 1.6;
     margin-bottom: clamp(30px, 5vw, 40px);
 }

 .hero-stats {
     display: flex;
     align-items: center;
     gap: clamp(15px, 4vw, 30px);
     margin-bottom: clamp(30px, 5vw, 40px);
     padding: clamp(15px, 3vw, 20px) 0;
     border-top: 1px solid var(--border-color);
     border-bottom: 1px solid var(--border-color);
     flex-wrap: wrap;
 }

 .stat-item {
     text-align: center;
 }

 .stat-number {
     display: block;
     font-size: clamp(24px, 5vw, 32px);
     font-weight: 800;
     color: #007AFF;
     margin-bottom: 5px;
 }

 .stat-label {
     font-size: clamp(11px, 2vw, 14px);
     color: var(--text-tertiary);
     text-transform: uppercase;
     letter-spacing: 0.5px;
 }

 .stat-divider {
     width: 1px;
     height: 40px;
     background: var(--border-color);
     display: none;
 }

 @media (min-width: 768px) {
     .stat-divider {
         display: block;
     }
 }

 .hero-actions {
     display: flex;
     gap: clamp(12px, 3vw, 20px);
     flex-wrap: wrap;
 }

 .cta-button {
     display: flex;
     align-items: center;
     gap: 10px;
     padding: clamp(14px, 3vw, 18px) clamp(24px, 5vw, 32px);
     border-radius: 50px;
     font-size: clamp(14px, 2.5vw, 16px);
     font-weight: 600;
     text-decoration: none;
     transition: all 0.3s ease;
     white-space: nowrap;
 }

 .cta-button.primary {
     background: var(--gradient-primary);
     color: white;
     box-shadow: 0 8px 25px rgba(0, 122, 255, 0.3);
 }

 .cta-button.primary:hover {
     box-shadow: 0 12px 35px rgba(0, 122, 255, 0.4);
     transform: translateY(-2px);
 }

 .cta-button.secondary {
     background: var(--bg-card);
     border: 1px solid var(--border-color);
     color: var(--text-primary);
 }

 body.light-theme .cta-button.secondary {
     background: var(--bg-card);
     border-color: var(--border-color);
 }

 .cta-button.secondary:hover {
     background: var(--bg-card-hover);
     border-color: var(--border-color-hover);
     transform: translateY(-2px);
 }

 .hero-visual {
     display: flex;
     justify-content: center;
     align-items: center;
 }

 .phone-stack {
     position: relative;
     width: clamp(180px, 30vw, 200px);
     height: clamp(360px, 60vw, 400px);
 }

 .phone {
     position: absolute;
     width: 100%;
     height: 100%;
     background: linear-gradient(145deg, #2c2c2e, #1c1c1e);
     border-radius: clamp(24px, 5vw, 30px);
     padding: clamp(6px, 1.5vw, 8px);
     box-shadow: var(--shadow-lg);
     animation: float 3s ease-in-out infinite;
 }

 body.light-theme .phone {
     background: linear-gradient(145deg, #f5f5f7, #e8e8ed);
     box-shadow: var(--shadow-md);
 }

 @keyframes float {

     0%,
     100% {
         transform: translateY(0px);
     }

     50% {
         transform: translateY(-20px);
     }
 }

 .phone-screen {
     width: 100%;
     height: 100%;
     background: var(--bg-tertiary);
     border-radius: clamp(20px, 4vw, 25px);
     overflow: hidden;
     position: relative;
 }

 .phone-screen img {
     width: 100%;
     height: 100%;
     object-fit: cover;
 }

 /* ==================== PROJECTS SECTION ==================== */
 .projects-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
     gap: clamp(20px, 4vw, 30px);
     padding: 0 clamp(15px, 3vw, 20px);
     margin: clamp(30px, 6vw, 40px) 0;
 }

 .project-card {
     background: var(--bg-card);
     backdrop-filter: blur(20px);
     border: 1px solid var(--border-color);
     border-radius: clamp(16px, 3vw, 20px);
     overflow: hidden;
     cursor: pointer;
     transition: all 0.3s ease;
 }

 body.light-theme .project-card {
     background: var(--bg-card);
     box-shadow: var(--shadow-sm);
 }

 .project-card:hover {
     background: var(--bg-card-hover);
     border-color: var(--border-color-hover);
     box-shadow: var(--shadow-md);
     transform: translateY(-10px);
 }

 .project-image {
     position: relative;
     height: clamp(180px, 25vw, 200px);
     display: flex;
     align-items: center;
     justify-content: center;
     background: var(--bg-secondary);
     overflow: hidden;
 }

 .project-info {
     padding: clamp(16px, 3vw, 20px);
 }

 .project-title {
     font-size: clamp(18px, 3vw, 20px);
     font-weight: 700;
     color: var(--text-primary);
     margin-bottom: clamp(6px, 1.5vw, 8px);
 }

 .project-description {
     font-size: clamp(13px, 2vw, 14px);
     color: var(--text-secondary);
     line-height: 1.5;
     margin-bottom: clamp(12px, 2.5vw, 15px);
 }

 /* ==================== FLUTTER NOTES PROMO SECTION ==================== */
 .flutter-notes-promo {
     padding: 80px 0;
     background: linear-gradient(135deg, rgba(0, 122, 255, 0.05) 0%, rgba(0, 212, 255, 0.02) 100%);
     position: relative;
 }

 body.light-theme .flutter-notes-promo {
     background: linear-gradient(135deg, rgba(0, 122, 255, 0.03) 0%, rgba(0, 212, 255, 0.01) 100%);
 }

 .flutter-notes-content {
     max-width: 1200px;
     margin: 0 auto;
     padding: 0 40px;
 }

 .notes-header {
     text-align: center;
     margin-bottom: 60px;
 }

 .notes-badge {
     display: inline-block;
     background: linear-gradient(135deg, rgba(0, 122, 255, 0.2) 0%, rgba(0, 122, 255, 0.1) 100%);
     color: #007AFF;
     padding: 8px 20px;
     border-radius: 20px;
     font-size: 14px;
     font-weight: 600;
     margin-bottom: 16px;
     border: 1px solid rgba(0, 122, 255, 0.3);
 }

 body.light-theme .notes-badge {
     background: linear-gradient(135deg, rgba(0, 122, 255, 0.15) 0%, rgba(0, 122, 255, 0.08) 100%);
 }

 .notes-promo-title {
     font-size: 42px;
     font-weight: 800;
     margin-bottom: 16px;
     color: white;
     background: linear-gradient(135deg, #ffffff 0%, #007AFF 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
 }

 body.light-theme .notes-promo-title {
     background: linear-gradient(135deg, #1d1d1f 0%, #007AFF 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
 }

 .notes-promo-subtitle {
     font-size: 18px;
     color: #b0b0b0;
     max-width: 700px;
     margin: 0 auto;
     line-height: 1.6;
 }

 body.light-theme .notes-promo-subtitle {
     color: #515154;
 }

 .notes-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
     gap: 24px;
     margin-bottom: 50px;
 }

 .note-preview {
     background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
     backdrop-filter: blur(20px);
     border: 1px solid rgba(255, 255, 255, 0.1);
     border-radius: 16px;
     padding: 28px;
     transition: all 0.3s ease;
     cursor: pointer;
 }

 body.light-theme .note-preview {
     background: white;
     border: 1px solid rgba(0, 0, 0, 0.1);
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
 }

 .note-preview:hover {
     transform: translateY(-5px);
     border-color: rgba(0, 122, 255, 0.4);
     box-shadow: 0 12px 30px rgba(0, 122, 255, 0.15);
 }

 body.light-theme .note-preview:hover {
     box-shadow: 0 12px 30px rgba(0, 122, 255, 0.12);
 }

 .note-icon {
     font-size: 36px;
     margin-bottom: 16px;
 }

 .note-preview h3 {
     font-size: 20px;
     font-weight: 700;
     color: white;
     margin-bottom: 8px;
 }

 body.light-theme .note-preview h3 {
     color: #1d1d1f;
 }

 .note-preview p {
     font-size: 15px;
     color: #b0b0b0;
     line-height: 1.5;
 }

 body.light-theme .note-preview p {
     color: #515154;
 }

 .notes-cta-wrapper {
     text-align: center;
 }

 .notes-cta-btn {
     display: inline-flex;
     align-items: center;
     gap: 12px;
     background: linear-gradient(135deg, #007AFF 0%, #0056d6 100%);
     color: white;
     padding: 16px 32px;
     border-radius: 12px;
     font-size: 16px;
     font-weight: 600;
     text-decoration: none;
     transition: all 0.3s ease;
 }

 .notes-cta-btn:hover {
     transform: translateY(-3px);
     box-shadow: 0 12px 30px rgba(0, 122, 255, 0.4);
 }

 .notes-cta-btn svg {
     transition: transform 0.3s ease;
 }

 .notes-cta-btn:hover svg {
     transform: translateX(4px);
 }

 /* Responsive for Flutter Notes Promo */
 @media (max-width: 768px) {
     .flutter-notes-promo {
         padding: 60px 0;
     }

     .flutter-notes-content {
         padding: 0 20px;
     }

     .notes-promo-title {
         font-size: 32px;
     }

     .notes-promo-subtitle {
         font-size: 16px;
     }

     .notes-grid {
         grid-template-columns: 1fr;
         gap: 16px;
         margin-bottom: 40px;
     }

     .note-preview {
         padding: 20px;
     }

     .note-icon {
         font-size: 32px;
     }

     .note-preview h3 {
         font-size: 18px;
     }
 }

 /* ==================== CONTACT SECTION ==================== */
 .contact-section {
     padding: clamp(60px, 12vw, 100px) 0;
     background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
 }

 .section-title {
     font-size: clamp(32px, 6vw, 48px);
     font-weight: 700;
     color: var(--text-primary);
     margin-bottom: clamp(15px, 3vw, 20px);
     text-align: center;
 }

 .section-subtitle {
     font-size: clamp(16px, 3vw, 20px);
     color: var(--text-secondary);
     max-width: 600px;
     margin: 0 auto clamp(20px, 4vw, 30px);
     line-height: 1.6;
     text-align: center;
 }

 .quick-contact-buttons {
     display: flex;
     gap: clamp(12px, 3vw, 20px);
     justify-content: center;
     align-items: center;
     margin-top: clamp(20px, 4vw, 30px);
     flex-wrap: wrap;
 }

 .quick-btn {
     display: inline-flex;
     align-items: center;
     gap: clamp(8px, 2vw, 10px);
     padding: clamp(12px, 2.5vw, 14px) clamp(20px, 4vw, 28px);
     border-radius: 12px;
     font-size: clamp(14px, 2.5vw, 16px);
     font-weight: 600;
     text-decoration: none;
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }

 .whatsapp-btn {
     background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
     color: white;
     box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3);
 }

 .whatsapp-btn:hover {
     box-shadow: 0 6px 25px rgba(37, 211, 102, 0.5);
     transform: translateY(-3px);
 }

 .email-btn {
     background: var(--gradient-primary);
     color: white;
     box-shadow: 0 4px 15px rgba(0, 122, 255, 0.3);
 }

 .email-btn:hover {
     box-shadow: 0 6px 25px rgba(0, 122, 255, 0.5);
     transform: translateY(-3px);
 }

 .contact-info {
     display: flex;
     flex-direction: column;
     gap: clamp(30px, 5vw, 40px);
     width: 100%;
 }

 .contact-info-item {
     display: flex;
     align-items: center;
     gap: clamp(16px, 3vw, 20px);
     padding: clamp(20px, 4vw, 28px);
     background: var(--bg-card);
     border: 1px solid var(--border-color);
     border-radius: 16px;
     transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
 }

 body.light-theme .contact-info-item {
     background: var(--bg-card);
     box-shadow: var(--shadow-sm);
 }

 .contact-info-item:hover {
     background: var(--bg-card-hover);
     border-color: rgba(0, 122, 255, 0.5);
     transform: translateX(12px) scale(1.02);
     box-shadow: var(--shadow-md);
 }

 .info-icon {
     font-size: clamp(24px, 4vw, 28px);
     width: clamp(50px, 8vw, 60px);
     height: clamp(50px, 8vw, 60px);
     background: rgba(0, 122, 255, 0.1);
     border: 1px solid rgba(0, 122, 255, 0.3);
     border-radius: 14px;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
     transition: all 0.4s ease;
 }

 .info-content h4 {
     font-size: clamp(16px, 3vw, 18px);
     font-weight: 600;
     color: var(--text-primary);
     margin-bottom: 6px;
 }

 .info-content p {
     font-size: clamp(14px, 2.5vw, 15px);
     color: var(--text-secondary);
     line-height: 1.5;
 }

 /* ==================== RESPONSIVE UTILITIES ==================== */
 @media (max-width: 1024px) {
     .container {
         padding: clamp(16px, 4vw, 32px);
     }
 }

 @media (max-width: 768px) {
     .nav-menu {
         display: none;
     }

     .hero-content {
         text-align: center;
     }

     .hero-stats {
         justify-content: center;
     }

     .hero-actions {
         justify-content: center;
     }

     .projects-grid {
         grid-template-columns: 1fr;
     }
 }

 @media (max-width: 480px) {
     .quick-contact-buttons {
         flex-direction: column;
         width: 100%;
     }

     .quick-btn {
         width: 100%;
         justify-content: center;
     }

     .contact-info-item:hover {
         transform: translateX(8px) scale(1.01);
     }
 }

 /* ==================== LIGHT THEME SPECIFIC ADJUSTMENTS ==================== */
 body.light-theme .title,
 body.light-theme .section__title {
     background: var(--gradient-text);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
 }

 body.light-theme .greeting,
 body.light-theme .hero-description,
 body.light-theme .section-subtitle {
     color: var(--text-secondary);
 }

 body.light-theme .project-card:hover {
     box-shadow: var(--shadow-md);
 }

 body.light-theme .phone {
     border: 2px solid var(--border-color);
 }

 /* ==================== SMOOTH SCROLLING ==================== */
 html {
     scroll-behavior: smooth;
 }

 /* ==================== LOADING PERFORMANCE ==================== */
 img {
     max-width: 100%;
     height: auto;
     display: block;
 }

 /* ==================== ACCESSIBILITY ==================== */
 *:focus-visible {
     outline: 2px solid #007AFF;
     outline-offset: 2px;
 }

 button,
 a {
     cursor: pointer;
 }

 /* ==================== UI SHOWCASE SECTION ==================== */
 .ui-showcase-section {
     padding: 100px 0;
     background: linear-gradient(135deg, rgba(5, 5, 20, 0.98) 0%, rgba(0, 0, 0, 0.95) 100%);
     position: relative;
     overflow: hidden;
 }

 .ui-showcase-section::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: radial-gradient(circle at 80% 20%, rgba(0, 122, 255, 0.05) 0%, transparent 50%);
     pointer-events: none;
 }

 body.light-theme .ui-showcase-section {
     background: linear-gradient(135deg, #fafbfc 0%, #f5f7fa 100%);
 }

 body.light-theme .ui-showcase-section::before {
     background: radial-gradient(circle at 80% 20%, rgba(0, 122, 255, 0.08) 0%, transparent 50%);
 }

 .ui-showcase-content {
     max-width: 1400px;
     margin: 0 auto;
     padding: 0 40px;
     position: relative;
     z-index: 1;
 }

 /* Showcase Tabs */
 .showcase-tabs {
     display: flex;
     gap: 12px;
     justify-content: center;
     flex-wrap: wrap;
     margin: 50px 0 60px;
     padding: 8px;
     background: rgba(255, 255, 255, 0.03);
     border-radius: 16px;
     border: 1px solid rgba(255, 255, 255, 0.05);
 }

 body.light-theme .showcase-tabs {
     background: rgba(0, 0, 0, 0.02);
     border: 1px solid rgba(0, 0, 0, 0.06);
 }

 .showcase-tab {
     padding: 12px 24px;
     background: transparent;
     border: 1px solid rgba(255, 255, 255, 0.1);
     border-radius: 10px;
     color: #ccc;
     font-size: 14px;
     font-weight: 600;
     cursor: pointer;
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     position: relative;
     overflow: hidden;
 }

 body.light-theme .showcase-tab {
     border: 1px solid rgba(0, 0, 0, 0.08);
     color: #515154;
 }

 .showcase-tab::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: linear-gradient(135deg, rgba(0, 122, 255, 0.15) 0%, rgba(0, 212, 255, 0.1) 100%);
     opacity: 0;
     transition: opacity 0.3s ease;
 }

 .showcase-tab:hover {
     border-color: rgba(0, 122, 255, 0.3);
     transform: translateY(-2px);
 }

 body.light-theme .showcase-tab:hover {
     border-color: rgba(0, 122, 255, 0.25);
 }

 .showcase-tab:hover::before {
     opacity: 1;
 }

 .showcase-tab.active {
     background: linear-gradient(135deg, #007AFF 0%, #00D4FF 100%);
     border-color: transparent;
     color: white;
     box-shadow: 0 4px 20px rgba(0, 122, 255, 0.3);
 }

 .showcase-tab span {
     position: relative;
     z-index: 1;
 }

 /* Showcase Grid - Now using flex column for category sections */
 .showcase-grid {
     display: flex;
     flex-direction: column;
     gap: 50px;
 }

 .showcase-item {
     animation: fadeInUp 0.6s ease-out forwards;
     opacity: 0;
 }

 .showcase-item:nth-child(1) {
     animation-delay: 0.1s;
 }

 .showcase-item:nth-child(2) {
     animation-delay: 0.2s;
 }

 .showcase-item:nth-child(3) {
     animation-delay: 0.3s;
 }

 .showcase-item:nth-child(4) {
     animation-delay: 0.4s;
 }

 .showcase-item:nth-child(5) {
     animation-delay: 0.5s;
 }

 .showcase-item:nth-child(6) {
     animation-delay: 0.6s;
 }

 @keyframes fadeInUp {
     from {
         opacity: 0;
         transform: translateY(30px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 /* Showcase Card */
 .showcase-card {
     background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
     backdrop-filter: blur(20px);
     border: 1px solid rgba(255, 255, 255, 0.1);
     border-radius: 20px;
     overflow: hidden;
     transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
     position: relative;
 }

 body.light-theme .showcase-card {
     background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.85) 100%);
     border: 1px solid rgba(0, 0, 0, 0.08);
     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
 }

 .showcase-card::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: linear-gradient(135deg, rgba(0, 122, 255, 0.1) 0%, transparent 100%);
     opacity: 0;
     transition: opacity 0.4s ease;
     pointer-events: none;
 }

 .showcase-card:hover {
     transform: translateY(-8px);
     border-color: rgba(0, 122, 255, 0.4);
     box-shadow: 0 20px 50px rgba(0, 122, 255, 0.2);
 }

 body.light-theme .showcase-card:hover {
     border-color: rgba(0, 122, 255, 0.3);
     box-shadow: 0 12px 40px rgba(0, 122, 255, 0.15);
 }

 .showcase-card:hover::before {
     opacity: 1;
 }

 /* Showcase Media */
 .showcase-media {
     position: relative;
     height: 280px;
     overflow: hidden;
 }

 .media-container {
     width: 100%;
     height: 100%;
     position: relative;
     background: linear-gradient(135deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.2) 100%);
     display: flex;
     align-items: center;
     justify-content: center;
 }

 body.light-theme .media-container {
     background: linear-gradient(135deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.02) 100%);
 }

 .showcase-media-content {
     width: 100%;
     height: 100%;
     object-fit: contain;
     border-radius: 24px;
     display: block;
 }

 .showcase-media-content video,
 .showcase-media-content[src$=".mp4"] {
     border-radius: 24px;
 }

 .demo-placeholder {
     width: 100%;
     height: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 18px;
     font-weight: 600;
     color: rgba(255, 255, 255, 0.5);
 }

 body.light-theme .demo-placeholder {
     color: rgba(0, 0, 0, 0.3);
 }

 /* Type Badge - Top Right */
 .type-badge {
     position: absolute;
     top: 16px;
     right: 16px;
     padding: 8px 16px;
     background: linear-gradient(135deg, rgba(0, 122, 255, 0.9) 0%, rgba(0, 212, 255, 0.9) 100%);
     backdrop-filter: blur(10px);
     border-radius: 20px;
     font-size: 12px;
     font-weight: 700;
     color: white;
     border: 1px solid rgba(255, 255, 255, 0.2);
     box-shadow: 0 4px 15px rgba(0, 122, 255, 0.3);
     text-transform: uppercase;
     letter-spacing: 0.5px;
     z-index: 10;
 }

 body.light-theme .type-badge {
     background: linear-gradient(135deg, rgba(0, 122, 255, 0.95) 0%, rgba(0, 212, 255, 0.95) 100%);
     border: 1px solid rgba(255, 255, 255, 0.3);
     box-shadow: 0 4px 15px rgba(0, 122, 255, 0.25);
 }

 /* Premium Badge - Top Left */
 .premium-badge {
     position: absolute;
     top: 16px;
     left: 16px;
     padding: 8px 16px;
     background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
     border-radius: 20px;
     font-size: 12px;
     font-weight: 700;
     color: #000;
     text-transform: uppercase;
     letter-spacing: 0.5px;
     box-shadow: 0 4px 20px rgba(255, 215, 0, 0.5);
     z-index: 10;
     animation: premiumPulse 2s ease-in-out infinite;
 }

 @keyframes premiumPulse {

     0%,
     100% {
         box-shadow: 0 4px 20px rgba(255, 215, 0, 0.5);
         transform: scale(1);
     }

     50% {
         box-shadow: 0 6px 30px rgba(255, 215, 0, 0.8);
         transform: scale(1.05);
     }
 }

 body.light-theme .premium-badge {
     background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
     box-shadow: 0 4px 20px rgba(255, 215, 0, 0.6);
 }

 /* Premium Item Card Enhancement */
 .showcase-item.premium-item .showcase-card {
     border-color: rgba(255, 215, 0, 0.4);
 }

 .showcase-item.premium-item .showcase-card:hover {
     border-color: rgba(255, 215, 0, 0.7);
     box-shadow: 0 20px 60px rgba(255, 215, 0, 0.3), 0 8px 30px rgba(0, 122, 255, 0.2);
 }

 body.light-theme .showcase-item.premium-item .showcase-card {
     border-color: rgba(255, 215, 0, 0.5);
 }

 body.light-theme .showcase-item.premium-item .showcase-card:hover {
     border-color: rgba(255, 215, 0, 0.8);
     box-shadow: 0 20px 60px rgba(255, 215, 0, 0.4), 0 8px 30px rgba(0, 122, 255, 0.2);
 }

 .media-placeholder {
     width: 100%;
     height: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
     position: relative;
     background: linear-gradient(135deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.2) 100%);
 }

 body.light-theme .media-placeholder {
     background: linear-gradient(135deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.02) 100%);
 }

 .media-label {
     position: absolute;
     top: 16px;
     right: 16px;
     padding: 8px 14px;
     background: rgba(0, 0, 0, 0.7);
     backdrop-filter: blur(10px);
     border-radius: 20px;
     font-size: 12px;
     font-weight: 600;
     color: white;
     border: 1px solid rgba(255, 255, 255, 0.1);
 }

 body.light-theme .media-label {
     background: rgba(255, 255, 255, 0.95);
     color: #1d1d1f;
     border: 1px solid rgba(0, 0, 0, 0.08);
 }

 /* Animation Demo */
 .loading-animation {
     display: flex;
     gap: 15px;
 }

 .pulse-circle {
     width: 20px;
     height: 20px;
     background: linear-gradient(135deg, #007AFF 0%, #00D4FF 100%);
     border-radius: 50%;
     animation: pulseAnimation 1.5s ease-in-out infinite;
 }

 .pulse-circle.delay-1 {
     animation-delay: 0.2s;
 }

 .pulse-circle.delay-2 {
     animation-delay: 0.4s;
 }

 @keyframes pulseAnimation {

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

     50% {
         transform: scale(1.5);
         opacity: 0.5;
     }
 }

 /* Widget Demo */
 .custom-widget {
     display: flex;
     align-items: center;
     gap: 20px;
     padding: 20px 30px;
     background: linear-gradient(135deg, rgba(0, 122, 255, 0.15) 0%, rgba(0, 212, 255, 0.1) 100%);
     border-radius: 16px;
     border: 1px solid rgba(0, 122, 255, 0.3);
 }

 body.light-theme .custom-widget {
     background: linear-gradient(135deg, rgba(0, 122, 255, 0.08) 0%, rgba(0, 212, 255, 0.05) 100%);
     border: 1px solid rgba(0, 122, 255, 0.2);
 }

 .widget-icon {
     font-size: 36px;
 }

 .widget-stats {
     display: flex;
     flex-direction: column;
     gap: 4px;
 }

 .stat-value {
     font-size: 28px;
     font-weight: 700;
     color: white;
     line-height: 1;
 }

 body.light-theme .stat-value {
     color: #1d1d1f;
 }

 .stat-trend {
     font-size: 14px;
     font-weight: 600;
     color: #4CAF50;
 }

 /* Islamic UI Demo */
 .prayer-card {
     display: flex;
     align-items: center;
     gap: 20px;
     padding: 20px 30px;
     background: linear-gradient(135deg, rgba(76, 175, 80, 0.15) 0%, rgba(67, 160, 71, 0.1) 100%);
     border-radius: 16px;
     border: 1px solid rgba(76, 175, 80, 0.3);
 }

 body.light-theme .prayer-card {
     background: linear-gradient(135deg, rgba(76, 175, 80, 0.08) 0%, rgba(67, 160, 71, 0.05) 100%);
     border: 1px solid rgba(76, 175, 80, 0.2);
 }

 .prayer-icon {
     font-size: 36px;
 }

 .prayer-info {
     display: flex;
     flex-direction: column;
     gap: 4px;
 }

 .prayer-name {
     font-size: 18px;
     font-weight: 600;
     color: white;
 }

 body.light-theme .prayer-name {
     color: #1d1d1f;
 }

 .prayer-time {
     font-size: 24px;
     font-weight: 700;
     color: #4CAF50;
 }

 /* Theme Toggle Demo */
 .theme-toggle-demo {
     display: flex;
     align-items: center;
     gap: 20px;
     padding: 20px;
 }

 .theme-preview {
     width: 80px;
     height: 80px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 32px;
     transition: all 0.4s ease;
     cursor: pointer;
 }

 .light-preview {
     background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
     box-shadow: 0 4px 20px rgba(255, 215, 0, 0.4);
 }

 .dark-preview {
     background: linear-gradient(135deg, #2C3E50 0%, #1a252f 100%);
     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
 }

 .theme-preview:hover {
     transform: scale(1.1) rotate(10deg);
 }

 .theme-divider {
     width: 2px;
     height: 60px;
     background: linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.3) 50%, transparent 100%);
 }

 body.light-theme .theme-divider {
     background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.2) 50%, transparent 100%);
 }

 /* Transition Demo */
 .transition-example {
     width: 100%;
     height: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
     overflow: hidden;
 }

 .slide-box {
     width: 80px;
     height: 80px;
     background: linear-gradient(135deg, #007AFF 0%, #00D4FF 100%);
     border-radius: 16px;
     animation: slideAnimation 2s ease-in-out infinite;
 }

 @keyframes slideAnimation {

     0%,
     100% {
         transform: translateX(-50px);
     }

     50% {
         transform: translateX(50px);
     }
 }

 /* Button Demo */
 .animated-button {
     position: relative;
     padding: 16px 40px;
     background: linear-gradient(135deg, #007AFF 0%, #00D4FF 100%);
     border: none;
     border-radius: 12px;
     color: white;
     font-size: 16px;
     font-weight: 600;
     cursor: pointer;
     overflow: hidden;
     transition: all 0.3s ease;
 }

 .animated-button:hover {
     transform: scale(1.05);
     box-shadow: 0 8px 25px rgba(0, 122, 255, 0.4);
 }

 .animated-button:active {
     transform: scale(0.95);
 }

 .button-text {
     position: relative;
     z-index: 1;
 }

 .button-ripple {
     position: absolute;
     top: 50%;
     left: 50%;
     width: 0;
     height: 0;
     border-radius: 50%;
     background: rgba(255, 255, 255, 0.5);
     transform: translate(-50%, -50%);
     transition: width 0.6s, height 0.6s;
 }

 .animated-button:active .button-ripple {
     width: 300px;
     height: 300px;
 }

 /* Showcase Info */
 .showcase-info {
     padding: 24px;
 }

 .showcase-title {
     font-size: 20px;
     font-weight: 700;
     color: white;
     margin-bottom: 12px;
 }

 body.light-theme .showcase-title {
     color: #1d1d1f;
 }

 .showcase-description {
     font-size: 15px;
     color: #b0b0b0;
     line-height: 1.6;
     margin-bottom: 16px;
 }

 body.light-theme .showcase-description {
     color: #515154;
 }

 .showcase-tags {
     display: flex;
     flex-wrap: wrap;
     gap: 8px;
 }

 .showcase-tag {
     padding: 6px 12px;
     background: rgba(0, 122, 255, 0.1);
     border: 1px solid rgba(0, 122, 255, 0.3);
     border-radius: 20px;
     font-size: 12px;
     font-weight: 600;
     color: #007AFF;
 }

 body.light-theme .showcase-tag {
     background: rgba(0, 122, 255, 0.08);
     border: 1px solid rgba(0, 122, 255, 0.2);
 }

 /* Responsive Design for UI Showcase */
 @media (max-width: 1200px) {
     .category-grid {
         grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
         gap: 24px;
     }

     .category-header {
         padding: 16px 20px;
     }

     .category-icon {
         width: 48px;
         height: 48px;
         font-size: 28px;
     }

     .category-title {
         font-size: 20px;
     }
 }

 @media (max-width: 768px) {
     .ui-showcase-section {
         padding: 60px 0;
     }

     .ui-showcase-content {
         padding: 0 20px;
     }

     .showcase-tabs {
         gap: 8px;
         margin: 30px 0 40px;
     }

     .showcase-tab {
         padding: 10px 16px;
         font-size: 13px;
     }

     .showcase-grid {
         gap: 40px;
     }

     .category-grid {
         grid-template-columns: 1fr;
         gap: 20px;
     }

     .category-header {
         flex-direction: column;
         align-items: flex-start;
         padding: 16px;
         gap: 12px;
     }

     .category-icon {
         width: 44px;
         height: 44px;
         font-size: 24px;
     }

     .category-title {
         font-size: 18px;
     }

     .category-description {
         font-size: 13px;
     }

     .category-count {
         align-self: flex-start;
     }

     .showcase-media {
         height: 220px;
     }

     .showcase-info {
         padding: 20px;
     }

     .showcase-title {
         font-size: 18px;
     }

     .showcase-description {
         font-size: 14px;
     }
 }

 @media (max-width: 480px) {
     .showcase-tab {
         padding: 8px 12px;
         font-size: 12px;
     }

     .showcase-media {
         height: 200px;
     }

     .media-label {
         font-size: 11px;
         padding: 6px 10px;
     }

     .custom-widget,
     .prayer-card {
         padding: 16px 20px;
         gap: 15px;
     }

     .widget-icon,
     .prayer-icon {
         font-size: 28px;
     }

     .stat-value {
         font-size: 24px;
     }

     .prayer-name {
         font-size: 16px;
     }

     .prayer-time {
         font-size: 20px;
     }
 }

 @media (prefers-reduced-motion: reduce) {
     * {
         animation-duration: 0.01ms !important;
         animation-iteration-count: 1 !important;
         transition-duration: 0.01ms !important;
     }
 }

 /* Project Video Support */
 .project-video {
     width: 100%;
     height: 100%;
     object-fit: contain;
     display: block;
 }

 /* YouTube Embed Specific Styles */
 .youtube-embed {
     width: 100%;
     height: 100%;
     border: none;
     border-radius: 0;
 }

 .project-image-img {
     width: 100%;
     height: 100%;
     object-fit: contain;
     display: block;
 }

 /* Project Cards - Showcase Style */
 .project-card-simple {
     cursor: pointer;
 }

 .project-card-simple .showcase-card::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: linear-gradient(135deg, rgba(0, 122, 255, 0.1) 0%, transparent 100%);
     opacity: 0;
     transition: opacity 0.4s ease;
     pointer-events: none;
     z-index: 1;
 }

 .project-card-simple .showcase-card:hover::before {
     opacity: 1;
 }

 /* Project Tags Styling */
 .project-tag {
     background: rgba(0, 122, 255, 0.15);
     border: 1px solid rgba(0, 122, 255, 0.3);
     color: #00D4FF;
     padding: 6px 12px;
     border-radius: 12px;
     font-size: 11px;
     font-weight: 600;
     letter-spacing: 0.3px;
     transition: all 0.3s ease;
 }

 .project-tag:hover {
     background: rgba(0, 122, 255, 0.25);
     border-color: rgba(0, 122, 255, 0.5);
     transform: translateY(-2px);
 }

 body.light-theme .project-tag {
     background: rgba(0, 122, 255, 0.12);
     border-color: rgba(0, 122, 255, 0.25);
     color: #007AFF;
 }

 body.light-theme .project-tag:hover {
     background: rgba(0, 122, 255, 0.2);
     border-color: rgba(0, 122, 255, 0.4);
 }

 /* Platform Tags - Keep existing style but update for new position */
 .platform-tag {
     background: rgba(255, 255, 255, 0.1);
     color: #ccc;
     padding: 4px 10px;
     border-radius: 10px;
     font-size: 11px;
     font-weight: 600;
     border: 1px solid rgba(255, 255, 255, 0.15);
 }

 body.light-theme .platform-tag {
     background: rgba(0, 0, 0, 0.08);
     color: var(--text-secondary);
     border-color: rgba(0, 0, 0, 0.12);
 }

 /* Project Header - For detailed cards */
 .project-header {
     display: flex;
     justify-content: flex-end;
     align-items: center;
     margin-bottom: 12px;
 }

 .project-platforms {
     display: flex;
     gap: 6px;
 }

 /* Project Metrics - Update for new layout */
 .project-metrics {
     display: flex;
     gap: 20px;
     margin: 16px 0;
     padding: 12px 0;
     border-top: 1px solid rgba(255, 255, 255, 0.1);
     border-bottom: 1px solid rgba(255, 255, 255, 0.1);
 }

 body.light-theme .project-metrics {
     border-color: rgba(0, 0, 0, 0.08);
 }

 .metric {
     text-align: left;
 }

 .metric-value {
     font-size: 20px;
     font-weight: 700;
     color: #007AFF;
     display: block;
     margin-bottom: 4px;
 }

 .metric-label {
     font-size: 11px;
     color: var(--text-tertiary);
     text-transform: uppercase;
     letter-spacing: 0.5px;
 }

 /* ==================== FLUTTER PACKAGES SECTION ==================== */
 .packages-section {
     padding: 100px 0;
     background: linear-gradient(180deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
 }

 .packages-content {
     max-width: 1200px;
     margin: 0 auto;
     padding: 0 20px;
 }

 .packages-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
     gap: 40px;
     margin-top: 60px;
 }

 .package-card {
     background: var(--bg-card);
     backdrop-filter: blur(20px);
     border: 1px solid var(--border-color);
     border-radius: 24px;
     padding: 32px;
     transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
     position: relative;
     overflow: hidden;
 }

 .package-card::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 4px;
     background: linear-gradient(90deg, #007AFF 0%, #00D4FF 50%, #00FF88 100%);
     opacity: 0;
     transition: opacity 0.3s ease;
 }

 .package-card:hover {
     transform: translateY(-8px);
     border-color: rgba(0, 122, 255, 0.3);
     box-shadow: 0 20px 60px rgba(0, 122, 255, 0.15);
 }

 .package-card:hover::before {
     opacity: 1;
 }

 .package-header {
     display: flex;
     justify-content: space-between;
     align-items: flex-start;
     margin-bottom: 20px;
 }

 .package-title-section {
     display: flex;
     align-items: center;
     gap: 16px;
 }

 .package-icon {
     font-size: 40px;
     animation: float 3s ease-in-out infinite;
 }

 .package-name-version {
     display: flex;
     flex-direction: column;
     gap: 4px;
 }

 .package-name {
     font-size: 28px;
     font-weight: 700;
     color: var(--text-primary);
     margin: 0;
     font-family: 'SF Mono', 'Fira Code', monospace;
 }

 .package-version {
     font-size: 14px;
     font-weight: 600;
     color: #00D4FF;
     background: rgba(0, 212, 255, 0.1);
     padding: 4px 10px;
     border-radius: 20px;
     display: inline-block;
     width: fit-content;
 }

 .package-platform-badge {
     display: flex;
     align-items: center;
     gap: 6px;
     background: linear-gradient(135deg, rgba(0, 122, 255, 0.1) 0%, rgba(0, 212, 255, 0.1) 100%);
     border: 1px solid rgba(0, 122, 255, 0.2);
     color: #007AFF;
     padding: 8px 14px;
     border-radius: 30px;
     font-size: 13px;
     font-weight: 600;
 }

 .package-description {
     font-size: 16px;
     color: var(--text-secondary);
     line-height: 1.7;
     margin-bottom: 24px;
 }

 .package-demo {
     margin-bottom: 24px;
     border-radius: 16px;
     overflow: hidden;
     background: #000;
     aspect-ratio: 9/16;
     max-height: 400px;
     position: relative;
 }

 .demo-container {
     width: 100%;
     height: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .package-video {
     width: 100%;
     height: 100%;
     object-fit: cover;
 }

 .package-video.youtube-shorts {
     aspect-ratio: 9/16;
 }

 .package-stats {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 16px;
     padding: 20px;
     background: var(--bg-secondary);
     border-radius: 16px;
     margin-bottom: 24px;
 }

 .package-stats .stat {
     display: flex;
     flex-direction: column;
     align-items: center;
     text-align: center;
     padding: 12px;
     background: var(--bg-card);
     border-radius: 12px;
     transition: all 0.3s ease;
 }

 .package-stats .stat:hover {
     transform: scale(1.05);
     background: var(--bg-card-hover);
 }

 .package-stats .stat-icon {
     font-size: 24px;
     margin-bottom: 8px;
 }

 .package-stats .stat-value {
     font-size: 20px;
     font-weight: 700;
     color: #007AFF;
     margin-bottom: 4px;
 }

 .package-stats .stat-label {
     font-size: 11px;
     color: var(--text-tertiary);
     text-transform: uppercase;
     letter-spacing: 0.5px;
 }

 .package-features {
     margin-bottom: 24px;
 }

 .features-title {
     font-size: 16px;
     font-weight: 600;
     color: var(--text-primary);
     margin-bottom: 16px;
 }

 .package-features .features-list {
     list-style: none;
     padding: 0;
     margin: 0;
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 12px;
 }

 .package-features .features-list li {
     font-size: 14px;
     color: var(--text-secondary);
     padding: 10px 14px;
     background: var(--bg-secondary);
     border-radius: 10px;
     transition: all 0.3s ease;
 }

 .package-features .features-list li:hover {
     background: var(--bg-card-hover);
     transform: translateX(4px);
 }

 .package-tags {
     display: flex;
     flex-wrap: wrap;
     gap: 8px;
     margin-bottom: 24px;
 }

 .package-tag {
     font-size: 12px;
     font-weight: 500;
     color: var(--text-secondary);
     background: var(--bg-secondary);
     padding: 6px 14px;
     border-radius: 20px;
     border: 1px solid var(--border-color);
     transition: all 0.3s ease;
 }

 .package-tag:hover {
     border-color: #007AFF;
     color: #007AFF;
     background: rgba(0, 122, 255, 0.1);
 }

 .package-actions {
     display: flex;
     gap: 12px;
     flex-wrap: wrap;
 }

 .package-btn {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     padding: 14px 24px;
     border-radius: 14px;
     font-size: 14px;
     font-weight: 600;
     text-decoration: none;
     cursor: pointer;
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     border: none;
     flex: 1;
     justify-content: center;
 }

 .package-btn.primary {
     background: linear-gradient(135deg, #007AFF 0%, #0051D5 100%);
     color: white;
 }

 .package-btn.primary:hover {
     background: linear-gradient(135deg, #0066CC 0%, #0041B5 100%);
     transform: translateY(-2px);
     box-shadow: 0 8px 25px rgba(0, 122, 255, 0.3);
 }

 .package-btn.secondary {
     background: var(--bg-secondary);
     color: var(--text-primary);
     border: 1px solid var(--border-color);
 }

 .package-btn.secondary:hover {
     background: var(--bg-card-hover);
     border-color: #007AFF;
     color: #007AFF;
     transform: translateY(-2px);
 }

 /* Toast Notification */
 .toast-notification {
     position: fixed;
     bottom: 100px;
     left: 50%;
     transform: translateX(-50%) translateY(100px);
     background: linear-gradient(135deg, #007AFF 0%, #00D4FF 100%);
     color: white;
     padding: 16px 28px;
     border-radius: 50px;
     display: flex;
     align-items: center;
     gap: 12px;
     font-size: 14px;
     font-weight: 600;
     box-shadow: 0 10px 40px rgba(0, 122, 255, 0.4);
     z-index: 10000;
     opacity: 0;
     transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
 }

 .toast-notification.show {
     opacity: 1;
     transform: translateX(-50%) translateY(0);
 }

 .toast-notification svg {
     stroke: white;
 }

 /* Packages Responsive Styles */
 @media (max-width: 900px) {
     .packages-grid {
         grid-template-columns: 1fr;
     }
 }

 @media (max-width: 768px) {
     .packages-section {
         padding: 60px 0;
     }

     .package-card {
         padding: 24px;
     }

     .package-header {
         flex-direction: column;
         gap: 16px;
     }

     .package-name {
         font-size: 24px;
     }

     .package-demo {
         max-height: 350px;
     }

     .package-features .features-list {
         grid-template-columns: 1fr;
     }

     .package-stats {
         grid-template-columns: repeat(3, 1fr);
         gap: 8px;
         padding: 16px;
     }

     .package-stats .stat {
         padding: 10px 8px;
     }

     .package-stats .stat-value {
         font-size: 16px;
     }

     .package-actions {
         flex-direction: column;
     }

     .package-btn {
         width: 100%;
     }
 }

 @media (max-width: 480px) {
     .package-stats {
         grid-template-columns: 1fr;
     }

     .package-title-section {
         flex-direction: column;
         align-items: flex-start;
         gap: 12px;
     }

     .package-icon {
         font-size: 32px;
     }
 }