.projects{padding:60px 20px}
.container{max-width:1200px;
    margin:auto;
    width: 100%;
}

/* Toggle */
.view-options{
  text-align:center;
  margin-bottom:40px;
  font-size:14px;
  color:#8a99a8;
}
.toggle{
  margin:0 10px;
  cursor:pointer;
}
.toggle.active{
  color:#fff;
  font-weight:bold;
}

/* Views */
.view{display:none}
.view.active{display:block}

/* Grid */
.project-grid{
  display: grid;
  grid-template-columns: 1fr; /* default: single column for mobile */
  gap: 24px;
}

/* Tablet: two columns on medium/large screens */
@media (min-width: 768px) {
  .project-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }
}



/* Desktop: ensure comfortable spacing on very large screens */
@media (min-width: 1200px) {
  .desktop-grid { grid-template-columns: repeat(2, 1fr); gap: 40px; }
}

/* Stronger desktop override for containers explicitly marked with .desktop-grid */
@media (min-width: 992px) {
  .desktop-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 40px; }
}

.card-image{
  position:relative;
  overflow:hidden;
  border-radius:20px;
}
.card img{
  width:100%;
  height:320px;
  object-fit:cover;
  transition:0.5s;
}
.card:hover img{
  transform:scale(1.08);
}


/* Marquee */
.marquee{
  overflow:hidden;
}
.marquee-track{
  display:flex;
  gap:30px;
  animation:scroll 20s linear infinite;
}
.marquee-card{
  min-width:300px;
}
.marquee-card img{
  width:100%;
  height:220px;
  object-fit:cover;
  border-radius:20px;
}

/* Animation */
@keyframes scroll{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

/* Responsive */
@media(max-width:768px){
  .project-grid{ grid-template-columns:1fr; gap:18px; }
}

/* Ensure only the active view displays */
.view{display:none}
.view.active{display:block}

/* Pause marquee animation when not visible */
.view .marquee-track{ animation-play-state: paused; }
.view.active .marquee-track{ animation-play-state: running; }