/* Mobile View */
/* Responsive adjustment for Mobile */
@media (max-width: 768px) {
  .circle { width: 180px; height: 180px; filter: blur(50px); }
  .c-top, .c-left, .c-right { --dist: 35vw; }
  .content-2 h1{
    font-size: 50px!important;
  }
}
@media (min-width: 320px) and (max-width: 425px) {
  .content-2 h1 {
    font-size: 28px!important;
  }
}
/* --- iPhone SE / Small Phones (375px) --- */
@media (min-width: 321px) and (max-width: 375px) {
    #card-container {
        gap: 4.2rem !important; /* Gap ko thoda kam kiya */
        max-width: 345px!important; /* Center alignment maintain karne ke liye */
        margin: auto!important;
    }
}

/* --- Extra Small Phones (320px) --- */
@media (max-width: 320px) {
    #card-container {
        gap: 1.2rem !important;
        max-width: 290px; /* Taki edges se touch na ho */
        padding: 0 10px;
    }
}
@media (min-width: 425px) {
    #card-container {
        margin-left: 0!important;
        gap: 1rem!important;
    }
}
/* Mobile Responsiveness */
@media (max-width: 768px) {
  .vibe-glow-overlay {
    width: 300px;
    height: 200px;
  }
  .vibe-header h2 {
    font-size: 1.8rem;
  }
  .vibe-item {
    padding: 10px 20px;
    margin: 0 8px;
  }
  .vibe-item img {
    height: 25px;
  }
  .vibe-item span {
    font-size: 0.9rem;
  }
  :root {
    --vibe-speed: 20s;
  }
}

@keyframes vibeScroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* --- MOBILE SPECIFIC FIX --- */
@media (max-width: 500px) {
  .slider-container {
    flex-direction: column; /* Stack vertically */
    height: 80vh; /* Use viewport height for mobile */
    gap: 10px;
  }

  .slide {
    width: 100%;
    flex: 1; /* All slides take equal small height */
    min-height: 60px; /* Collapsed height */
  }

  .slide.active {
    flex: 5; /* The active slide takes most of the vertical space */
  }

  .content {
    bottom: 15px;
    left: 15px;
  }

  .label {
    font-size: 18px;
  }
}

/* --- MOBILE & TABLET FIXES --- */
@media (max-width: 1024px) {
    .scroll-container {
        height: auto; /* Remove artificial height on mobile */
        padding: 60px 0;
    }

    .sticky-box {
        position: relative; /* Disable sticky on mobile */
        height: auto;
        overflow: visible;
    }

    .steps-wrapper {
        grid-template-columns: 1fr; /* Stack cards vertically */
        gap: 50px;
        margin-top: 40px;
    }

    .progress-line-track {
        display: none; /* Progress bar usually feels broken on mobile vertical scroll */
    }

    .step-inner {
        opacity: 0.2; /* Slightly more visible for mobile readability */
        transform: translateY(30px);
    }
}
/* Mobile Responsiveness */
@media (max-width: 768px) {
  .v-testimonial-track {
    flex-direction: column;
    align-items: center;
  }
  .v-column {
    width: 100%;
  }
  .v-offset-col {
    margin-top: 0;
  }
}
/* Responsive Adjustments */
@media (max-width: 768px) {
  .hero h1 {
    font-size: 2.5rem;
  }
  .nav-search {
    display: none;
  }
  .card {
    flex-direction: column;
    text-align: center;
  }
}
/* RESPONSIVE DESIGN FOR MOBILE */
@media (max-width: 768px) {
  .banner-wrapper {
    flex-direction: column;
    text-align: center;
    gap: 40px;
  }

  .expert-title {
    font-size: 38px;
  }

  .expert-subtitle {
    font-size: 18px;
    padding: 0 10px;
  }

  .primary-glow-btn {
    width: 100%; /* Full width on small phones */
    justify-content: center;
    padding: 18px;
  }
}
/* MOBILE RESPONSIVE */
@media (max-width: 850px) {
    .ui-container { grid-template-columns: 1fr; }
    
    .side-navigation ul {
        display: flex;
        overflow-x: auto;
        gap: 20px;
        white-space: nowrap;
        padding-bottom: 15px;
        scrollbar-width: none;
    }

    .nav-item { border-bottom: none; background: rgba(255,255,255,0.05); padding: 10px 20px; border-radius: 30px; }
    .nav-item.active { padding-left: 20px; background: var(--primary-cyan); color: #000; }
    
    .content-viewport { height: 500px; }
}

/* RESPONSIVE DESIGN */
@media (max-width: 768px) {
    .content-wrapper {
        flex-direction: column;
    }

    .side-menu {
        max-width: 100%;
        margin-bottom: 20px;
    }

    .side-menu ul {
        display: flex;
        overflow-x: auto;
        white-space: nowrap;
        gap: 20px;
        padding-bottom: 10px;
    }

    .side-menu li {
        border-bottom: none;
        padding: 5px 0;
    }
}

/* Zig-Zag Effect (Sirf bade screens par) */
    @media (min-width: 769px) {
        .slide-2:nth-child(even) .card { margin-top: 60px; }
    }

    .card { 
        width: 100%; 
        border-radius: 24px; 
        overflow: hidden; 
        box-shadow: 0 10px 30px rgba(0,0,0,0.08); 
        background: #f9f9f9;
    }

    .card img { width: 100%; height: auto; display: block; }
    
    .dots-container { display: flex; justify-content: center; gap: 8px; margin-top: 20px; }
    .dot { width: 10px; height: 10px; border-radius: 50%; background: #ddd; cursor: pointer; transition: 0.3s; }
    .dot.active { background: #333; transform: scale(1.3); }

    /* Responsive Adjustments */
    @media (max-width: 1024px) {
        :root { --card-width: 300px; }
    }

    @media (max-width: 768px) {
        :root { --card-width: 80%; } /* Tablet par cards thode bade */
        .carousel-container { padding-bottom: 60px; }
    }

    @media (max-width: 480px) {
        :root { --card-width: 100%; } /* Mobile par ek screen par ek card */
        .header h2 { font-size: 1.5rem; }
        .slide-2 { padding: 0 10px; }
    }

/* Responsive Adjustments */
@media (max-width: 768px) {
    .cta-container {
        flex-direction: column;
        text-align: center;
        padding: 60px 20px 40px 20px;
        margin-top: 80px;
    }

    .cta-text {
        margin-bottom: 20px;
        font-size: 1.5rem;
    }

    .phone-wrapper {
        right: 18%;
        transform: translateX(50%);
        top: 74px;
        width: 150px;
    }
    .phone-img {
      width:100px!important;
    }
    .projects-section {
      padding: 80px 20px!important;
    }
    .service-card {
      height: 180px!important;
    }
}

/* contact section popup modal start */
/* Mobile Adjustments */
@media (max-width: 480px) {
    .modal-card {
        padding: 24px 20px;
        border-radius: 16px;
    }
    
    h2 {
        font-size: 22px;
    }
}
/* contact section popup modal end */