/* Projects Section */
 .projects-section {
     background-color: #1a1a1a;
     padding: 50px 0 45px;
     position: relative;
 }

 .projects-heading {
     text-align: center;
     font-size: 2.5rem;
     font-weight: 700;
     color: #ffffff;
     margin-bottom: 60px;
     letter-spacing: 1px;
     font-family: 'Poppins', sans-serif;
 }

 .projects-heading span {
     color: #ff3b3b;
 }

 /* Projects Grid - 3 Column Layout */
 .projects-grid {
     display: grid;
     grid-template-columns: 1fr 1fr 1fr;
     gap: 20px;
     margin-bottom: 10px;
     max-height: 600px;
     overflow: hidden;
 }

 /* Column Styling */
 .project-column {
     display: flex;
     flex-direction: column;
     gap: 20px;
 }

 /* Left and Right columns - Single tall card */
 .project-column.side-column {
     height: 600px;
 }

 /* Middle column - Multiple cards with overflow hidden */
 .project-column.middle-column {
     height: 600px;
     overflow: hidden;
 }

 /* Project Card */
 .project-card {
     position: relative;
     border-radius: 16px;
     overflow: hidden;
     cursor: pointer;
     transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
 }

 /* Middle column cards */
 .middle-column .project-card {
     /* height: 190px; */
 }

 .project-card:hover {
     transform: translateY(-8px);
 }

 /* Project Image */
 .project-image {
     width: 100%;
     position: relative;
     overflow: hidden;
 }

 .king-abdullah {
     height: 340px;
 }

 .arivu {
     height: 340px;
 }

 .casa-tower {
     height: 260px;
 }

 .armaco {
     height: 260px;
 }

 .madinat-jum {
     height: 250px;
 }

 .ceer-el {
     height: 250px;
 }

 .cove-2 {
     height: 100px;
 }

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

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

 /* Project Overlay - Always at bottom */
 .project-overlay {
     position: absolute;
     left: 0;
     right: 0;
     bottom: 0;
     background: linear-gradient(to top,
             rgba(0, 0, 0, 0.9) 0%,
             rgba(0, 0, 0, 0.7) 50%,
             rgba(0, 0, 0, 0) 100%);
     padding: 25px 20px 20px;
     display: flex;
     align-items: flex-end;
     justify-content: space-between;
     transition: background 0.4s ease;
 }

 .project-card:hover .project-overlay {
     background: linear-gradient(to top,
             rgba(0, 0, 0, 0.95) 0%,
             rgba(0, 0, 0, 0.8) 50%,
             rgba(0, 0, 0, 0.1) 100%);
 }

 /* Project Title */
 .project-title {
     color: #ffffff;
     font-size: 14px;
     font-weight: 400 !important;
     margin: 0;
     line-height: 1.3;
     max-width: 100%;
 }

 /* Project Icon */
 .project-icon {
     width: 50px;
     height: 50px;
     background: rgba(255, 255, 255, 0.15);
     backdrop-filter: blur(10px);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     border: 2px solid rgba(255, 255, 255, 0.3);
     flex-shrink: 0;
     transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
 }

 .project-card:hover .project-icon {
     background: rgba(255, 255, 255, 0.25);
     transform: scale(1.1) rotate(5deg);
     border-color: rgba(255, 255, 255, 0.5);
 }

 .project-icon span {
     color: #ffffff;
     font-size: 1.3rem;
     font-weight: 600;
 }

 /* More Projects Button */
 .more-projects-btn {
     display: block;
     margin: 0 auto;
     padding: 12px 0;
     background: transparent;
     border: none;
     color: #ffffff;
     font-size: 0.95rem;
     font-weight: 400;
     cursor: pointer;
     transition: all 0.3s ease;
     letter-spacing: 0.5px;
     position: relative;
 }

 .more-projects-btn:hover {
     color: #ff3b3b;
 }

 /* Responsive Design */
 @media (max-width: 992px) {
     .projects-grid {
         grid-template-columns: 1fr 1fr;
         max-height: none;
     }

     .project-column.middle-column {
         grid-column: 1 / -1;
         display: grid;
         grid-template-columns: repeat(3, 1fr);
         height: auto;
         gap: 20px;
     }

     .middle-column .project-card {
         /* height: 250px; */
     }
 }

 @media (max-width: 768px) {
     .projects-section {
         padding: 60px 0 80px;
     }

     .projects-heading {
         font-size: 2rem;
         margin-bottom: 40px;
     }

     .projects-grid {
         grid-template-columns: 1fr;
         gap: 15px;
     }

     .project-column {
         height: auto !important;
         gap: 15px;
     }

     .project-column.middle-column {
         display: flex;
         flex-direction: column;
     }

     .side-column .project-card,
     .middle-column .project-card {
         /* height: 250px; */
     }

     .project-title {
         font-size: 1rem;
     }

     .project-icon {
         width: 45px;
         height: 45px;
     }
 }

 @media (max-width: 480px) {
     .projects-heading {
         font-size: 1.75rem;
     }

     .project-title {
         font-size: 0.9rem;
         max-width: 100%;
     }
 }

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

 .modal-description {
     font-size: 13px;
     font-weight: 400;
 }