@media (max-width: 480px) {
  /* General mobile fixes */
  body {
    overflow-x: hidden !important;
    width: 100vw !important;
    max-width: 100% !important;
    font-size: 14px !important;
  }

  html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
  }

  /* Navbar mobile - EXACT COPY FROM MAIN_480px.css */
  /* Navbar mobile - EXACT COPY FROM MAIN_480px.css */
    .navbar {
        padding: 0.3rem 0 !important;
    background: rgba(0, 6, 61, 0.201);
    }

  .nav-container {
        gap: 0.2rem !important;
        padding: 0.3rem 0.5rem !important;
        flex-direction: column !important;
        align-items: center !important;
    }

  .logo-profile-container {
    order: 1;
    margin-bottom: 0 !important;
    gap: 0.4rem !important;
  }

  .logo-profile-img {
    width: 25px !important;
    height: 25px !important;
    border-width: 1px !important;
  }

  .profile-name {
    font-size: 0.75rem !important;
    font-weight: 500 !important;
  }

  .nav-links {
    order: 2;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.3rem !important;
  }

  .nav-link {
    padding: 0.25rem 0.5rem !important;
    font-size: 0.65rem !important;
    border-radius: 4px !important;
    min-width: 60px !important;
    text-align: center !important;
  }

  /* Profile card mobile - EXACT COPY FROM MAIN_480px.css */
  .profile-card {
    top: 60px !important;
    width: 300px !important;
    max-width: calc(100vw - 1.5rem) !important;
    padding: 1.2rem !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(-10px) !important;
    border-radius: 10px !important;
  }

  .logo-profile-container:hover .profile-card {
    transform: translateX(-50%) translateY(0) !important;
  }

  .profile-card-header {
        gap: 0.7rem !important;
        margin-bottom: 0.8rem !important;
        padding-bottom: 0.8rem !important;
        flex-direction: row !important;
        text-align: left !important;
    }

    .profile-card-img {
        width: 45px !important;
        height: 45px !important;
    }

    .profile-card-info {
        text-align: left !important;
    }

    .profile-card-info h3 {
        font-size: 0.95rem !important;
        margin-bottom: 0.2rem !important;
    }

    .job-title {
        font-size: 0.8rem !important;
        margin-top: 0.1rem !important;
    }

    .profile-card-details {
        gap: 0.5rem !important;
    }

    .profile-detail {
        padding: 0.3rem 0 !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

  .detail-label {
        font-size: 0.75rem !important;
        min-width: 60px !important;
        color: #4da3ff !important;
        font-weight: 600 !important;
    }

  .detail-value,
  .detail-value-avl {
    font-size: 0.75rem !important;
    margin-left: 0 !important;
    text-align: right !important;
  }

  /* PROJECT SPECIFIC STYLES - FIXED SPACING */
  .project-hero {
    padding-top: 0 !important; /* Use padding instead of margin */
    margin-top: 60px !important; /* Remove margin */
    height: 90vh !important;
    padding-bottom: 1rem !important;
  }

  .project-hero-content {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    z-index: 12;
    padding-bottom: 2rem;
    position: relative;
    min-height: 200px; 
}

  .project-hero-title {
    font-size: clamp(1.8rem, 7vw, 2.2rem) !important;
    margin: 0 0 1.5rem 0 !important;
    line-height: 1.2 !important;
  }

  .project-hero-description {
    font-size: clamp(1.1rem, 4vw, 1.1rem);
    padding: 0 1rem !important;
    margin: 0 auto !important;
    max-width: 100% !important;
    line-height: 1.4 !important;
  }

  /* Services Bar */
  .services-bar {
    bottom: 25vh !important;
    padding: 1.5rem 1rem !important;
    margin-top: 2rem !important;
    z-index: 15 !important;
  }

  .services-container {
    flex-direction: row;
    align-items: center;
    gap: 2rem !important;
    padding: 0px !important;
    max-width: 100% !important;
  }

  .service-item {
    min-width: auto !important;
    padding-top: 20%;

  }
  #service-item-1{
    left: 2% !important;
}
  .service-icon-1,
  .service-icon-2,
  .service-icon-3 {
    width: 55px !important;
    height: 55px !important;
  }

  .service-icon-1 img,
  .service-icon-2 img,
  .service-icon-3 img {
    width: 25px ;
    height: 25px ;
  }

  .service-label {
    font-size: 0.65rem !important;
  }

  /* Projects Content - FIXED SPACING */
  .projects-content {
    padding: 3rem 1rem 2rem 1rem !important;
    margin-top: 0 !important; /* REMOVED EXTRA MARGIN */
    border-radius: 30px !important;
  }

  .projects-grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
    max-width: 100% !important;
    padding: 0 !important;
  }

  .project-card {
    max-width: 100% !important;
    margin: 0 auto !important;
    width: 100% !important;
  }

  .project-image {
    height: 140px !important;
  }

  .project-content {
      margin-top: 0 !important; /* Removed extra margin */

  }

  .project-content h3 {
    font-size: 1.1rem !important;
    line-height: 1.3 !important;
    margin-bottom: 0.5rem !important;
  }

  .project-content p {
    font-size: 0.9rem !important;
    line-height: 1.4 !important;
    margin-bottom: 0.8rem !important;
  }

  .project-tags {
    gap: 0.3rem !important;
  }

  .project-tag {
    font-size: 0.75rem !important;
    padding: 0.2rem 0.5rem !important;
  }

  /* Project Overlay */
  .project-overlay-content {
    top: 60px !important; /* Match navbar height */
    width: 95vw !important;
    height: calc(100vh - 120px) !important;
    border-radius: 12px !important;
  }

  .project-slide-image {
    flex: 0 0 40% !important;
    max-height: 40% !important;
  }

  #overlayTitle {
    padding: 0.8rem 1rem !important;
    font-size: 1.2rem !important;
  }

  #overlayDescription {
    padding: 0.5rem 1rem !important;
    font-size: 0.6rem !important;
    line-height: 1.5 !important;
  }
.project-slide-text p {
    color: #243650;
    line-height: 1.5;
  font-size: clamp(1rem, 2.1vh, 2.5rem) !important;
    margin-bottom: 1rem;
    text-align: justify;
}
.project-slide-text h2{
  font-size: clamp(1.2rem,2.5vh,2.8rem) !important ;
}
  .project-slide-nav {
    bottom: 15px !important;
    padding: 0.3rem 0.6rem !important;
    height: 45px !important;
    min-width: 150px !important;
    gap: 0.5rem !important;
  }

  .slide-prev,
  .slide-next {
    width: 32px !important;
    height: 32px !important;
    font-size: 1.5rem !important;
  }

  .slide-dot {
    width: 6px !important;
    height: 6px !important;
  }

  .slide-indicators {
    gap: 0.4rem !important;
  }

  /* GitHub link */
  .github-link {
    width: 28px !important;
    height: 28px !important;
  }

  .github-link svg {
    width: 16px !important;
    height: 16px !important;
  }
  /* Add this to your Projects_480px.css file */


  
  /* Mobile scroll-based visibility for navigation elements */
  .mobile-scroll-hidden {
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(20px) scale(0.9) !important;
    pointer-events: none !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }

  /* Enhanced transition for service labels */
  .service-label {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }

  /* Enhanced transition for project slide navigation */
  .project-slide-nav {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }

 

  /* Smooth scroll behavior for mobile */
  html {
    scroll-behavior: smooth !important;
  }

  /* Add scroll padding to account for fixed navbar */
  .services-bar {
    scroll-margin-top: 70px !important;
  }

  .projects-content {
    scroll-margin-top: 70px !important;
  }

  /* Enhanced service item interactions on mobile */
  .service-item {
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  /* Better touch targets for mobile */
  .service-item {
    padding-left: 1.1rem !important;
    border-radius: 12px !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }

  .service-item:active {
    transform: scale(0.95) !important;
    background: rgba(255, 255, 255, 0.05) !important;
  }

  /* Enhanced project card touch interactions */
  .project-card {
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  .project-card:active {
    transform: translateY(-4px) scale(0.98) !important;
  }

  /* Ensure overlay is not affected by scroll hiding */
  .project-overlay.active .mobile-scroll-hidden {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    pointer-events: all !important;
  }

  /* Additional mobile optimizations */
  .project-hero {
    -webkit-overflow-scrolling: touch !important;
  }

  .projects-content {
    -webkit-overflow-scrolling: touch !important;
  }

  /* Prevent zoom on input focus (if applicable) */
  input, select, textarea {
    font-size: 16px !important;
  }

  /* Better mobile scrolling performance */
  .project-overlay-content {
    -webkit-overflow-scrolling: touch !important;
    will-change: scroll-position !important;
  }

  /* Smooth transition zones */
  .services-bar {
    position: relative !important;
    z-index: 15 !important;
  }

  /* Add scroll indicator for mobile users */


  
  .scroll-indicator {
    display: block;
    position: fixed;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255,255,255,0.7);
    font-size: 0.8rem;
    font-weight: bold; 
    animation: bounce 2s infinite;
    z-index: 20;
    transition: opacity 0.4s;
    opacity: 1;
    pointer-events: none;
  }
  /* Hide pseudo for mobile */
  .project-hero::after {
    content: none !important;
  }

@keyframes bounce {
  0%,20%,50%,80%,100% { transform: translateX(-50%) translateY(0);}
  40% { transform: translateX(-50%) translateY(-10px);}
  60% { transform: translateX(-50%) translateY(-5px);}
}


  /* Hide scroll indicator when in services area */
  .project-hero.services-active::after {
    opacity: 0 !important;
    visibility: hidden !important;
  }

.service-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: #ffffff;
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-align: center;
    white-space: nowrap;
    position: relative;
    z-index: 15; /* Ensure labels appear above everything */}
}

@media (max-width: 350px) {
.services-bar{
  left: 5px;
  margin-top: 100px !important;
}

.service-icon-1{
  width: 20px;
  height: 20px;

}

.service-icon-2{
  width: 20px;
  height: 20px;
  
}

.service-icon-3{
  width: 20px;
  height: 20px;
  
}
.project-hero-content{
  top: 100px !important;
}
.project-hero-description{
  font-size:clamp(0.9rem, 3vw, 0.9rem) !important;
}
.project-hero-title{
  font-size: clamp(1.4rem, 7vw, 1.6rem) !important;

}
.service-icon-1,
  .service-icon-2,
  .service-icon-3 {
    width: 45px !important;
    height: 45px !important;
  }
}