/*--------------------------------------------------------------
# Projects Section
--------------------------------------------------------------*/
.portfolio {
     background: #000;
     max-width: 1200px;
     margin: auto;
     padding: 60px 20px;
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     grid-template-rows: auto;
     gap: 30px;
}

.portfolio .section-title {
     grid-column: span 2;
     text-align: center;
     color: #fff;
     margin-bottom: 40px;
}

.portfolio .section-title h2 {
     font-size: 2.5rem;
     color: #ffcc00;
     margin-bottom: 10px;
}

.portfolio .section-title p {
     color: #aaa;
     font-size: 1.1rem;
}

.portfolio .card {
     background: #111;
     border-radius: 15px;
     overflow: hidden;
     transition: all 0.6s ease;
     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
     cursor: pointer;
     transform-style: preserve-3d;
     perspective: 1000px;
}

.portfolio .card:hover {
     transform: rotateY(8deg) rotateX(8deg) scale(1.03);
     box-shadow: 0 10px 30px rgba(255, 255, 255, 0.1);
}

.portfolio .card img {
     width: 100%;
     height: 200px;
     object-fit: cover;
     display: block;
}

.portfolio .card-content {
     padding: 20px;
     background-color: #1a1a1a;
     transition: background-color 0.3s ease;
}

.portfolio .card:hover .card-content {
     background-color: #222;
}

.portfolio .card-title {
     font-size: 1.4rem;
     margin-bottom: 10px;
     color: #ffcc00;
     transition: color 0.3s ease;
}

.portfolio .card-desc {
     font-size: 1rem;
     color: #ccc;
     line-height: 1.4;
     transition: color 0.3s ease;
}

.portfolio .card:hover .card-title,
.portfolio .card:hover .card-desc {
     color: #fff;
}

@media (max-width: 768px) {
     .portfolio .card img {
          height: 180px;
     }
}

@media (max-width: 600px) {
     .portfolio {
          grid-template-columns: 1fr;
     }

     .portfolio .section-title {
          grid-column: span 1;
     }
}