.portfolio {
          padding: 100px 0;
          background: linear-gradient(135deg, #0a192f 0%, #0d324d 100%);
          color: #fff;
          position: relative;
        }

        .section-title {
          text-align: center;
          margin-bottom: 50px;
        }

        .section-title h2 {
          font-size: 2.8rem;
          font-weight: 300;
          margin-bottom: 20px;
          color: #fff;
          position: relative;
          display: inline-block;
        }

        .section-title h2::after {
          content: '';
          position: absolute;
          bottom: -10px;
          left: 50%;
          transform: translateX(-50%);
          width: 80px;
          height: 3px;
          background: linear-gradient(to right, #4CBAEA, #4CBAEA);
        }

        .section-title p {
          color: #cfd8dc;
          font-size: 1.1rem;
          max-width: 800px;
          margin: 0 auto;
          line-height: 1.6;
        }

        #portfolio-flters {
          padding: 0;
          margin: 0 auto 30px auto;
          list-style: none;
          text-align: center;
          display: flex;
          justify-content: center;
          flex-wrap: wrap;
        }

        #portfolio-flters li {
          cursor: pointer;
          margin: 10px 15px;
          padding: 10px 20px;
          font-size: 1rem;
          font-weight: 500;
          line-height: 1;
          text-transform: uppercase;
          color: #cfd8dc;
          border-radius: 50px;
          transition: all 0.3s ease;
          border: 2px solid transparent;
        }

        #portfolio-flters li:hover,
        #portfolio-flters li.filter-active {
          color: #fff;
          background: linear-gradient(135deg, #4CBAEA, #4CBAEA);
          border-color: #4CBAEA;
        }

        .portfolio-container {
          display: grid;
          grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
          gap: 30px;
        }

        .portfolio-item {
          overflow: hidden;
          border-radius: 10px;
        }

        .portfolio-wrap {
          position: relative;
          overflow: hidden;
          border-radius: 10px;
          box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
          transition: all 0.4s ease;
        }

        .portfolio-wrap:hover {
          transform: translateY(-10px);
          box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
        }

        .portfolio-wrap img {
          width: 100%;
          height: 250px;
          object-fit: cover;
          transition: all 0.5s ease;
        }

        .portfolio-wrap:hover img {
          transform: scale(1.1);
        }

        .portfolio-info {
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0;
          background: rgba(10, 25, 47, 0.9);
          padding: 20px;
          transform: translateY(100%);
          transition: all 0.4s ease;
        }

        .portfolio-wrap:hover .portfolio-info {
          transform: translateY(0);
        }

        .portfolio-info h4 {
          font-size: 1.2rem;
          font-weight: 600;
          margin: 0 0 5px 0;
          color: #fff;
        }

        .portfolio-info p {
          color: #4CBAEA;
          font-size: 0.9rem;
          margin: 0 0 10px 0;
          font-weight: 500;
        }

        .portfolio-links {
          display: flex;
          justify-content: center;
        }

        .portfolio-details-link {
          color: #fff;
          background: linear-gradient(135deg, #4CBAEA, #4CBAEA);
          width: 40px;
          height: 40px;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          transition: all 0.3s ease;
        }

        .portfolio-details-link:hover {
          background: linear-gradient(135deg, #4CBAEA, #4CBAEA);
          transform: scale(1.1);
        }

        /* Lightbox Styles */
        .portfolio-lightbox {
          display: none;
          position: fixed;
          z-index: 9999;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          background-color: rgba(0, 0, 0, 0.9);
          overflow: auto;
          opacity: 0;
          transition: opacity 0.3s ease;
        }

        .portfolio-lightbox.active {
          display: block;
          opacity: 1;
        }

        .lightbox-content {
          position: relative;
          background-color: #0a192f;
          margin: 5% auto;
          padding: 0;
          width: 90%;
          max-width: 1200px;
          border-radius: 10px;
          overflow: hidden;
          box-shadow: 0 10px 50px rgba(0, 0, 0, 0.5);
          animation: lightboxFadeIn 0.3s ease;
        }

        @keyframes lightboxFadeIn {
          from {
            opacity: 0;
            transform: scale(0.9);
          }

          to {
            opacity: 1;
            transform: scale(1);
          }
        }

        .close-lightbox {
          position: absolute;
          top: 20px;
          right: 25px;
          color: #fff;
          font-size: 35px;
          font-weight: bold;
          cursor: pointer;
          z-index: 10;
          transition: color 0.3s ease;
        }

        .close-lightbox:hover {
          color: #4CBAEA;
        }

        .lightbox-container {
          display: flex;
          flex-direction: row;
          height: 80vh;
        }

        .lightbox-image-section {
          flex: 1;
          background: #fff;
          display: flex;
          align-items: center;
          justify-content: center;
          position: relative;
        }

        .lightbox-info-section {
          flex: 1;
          padding: 40px;
          overflow-y: auto;
          background: #0a192f;
        }

        .image-slider {
          position: relative;
          width: 100%;
          height: 100%;
        }

        .slider-main-image {
          width: 100%;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        #lightbox-main-image {
          max-width: 100%;
          max-height: 100%;
          object-fit: contain;
        }

        .slider-controls {
          position: absolute;
          bottom: 20px;
          left: 0;
          right: 0;
          display: flex;
          justify-content: center;
          gap: 20px;
        }

        .slider-prev,
        .slider-next {
          background: #4CBAEA;
          color: #fff;
          width: 50px;
          height: 50px;
          border-radius: 50%;
          border: none;
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: center;
          transition: all 0.3s ease;
        }

        .slider-prev:hover,
        .slider-next:hover {
          background: #4CBAEA;
          transform: scale(1.1);
        }

        .lightbox-info-section h3 {
          font-size: 2rem;
          margin-bottom: 15px;
          color: #fff;
        }

        .project-meta {
          display: flex;
          gap: 15px;
          margin-bottom: 20px;
        }

        .project-category,
        .project-date {
          padding: 5px 15px;
          border-radius: 20px;
          font-size: 0.8rem;
          font-weight: 500;
        }

        .project-category {
          background: linear-gradient(135deg, #4CBAEA, #4CBAEA);
          color: #fff;
        }

        .project-date {
          background: rgba(255, 255, 255, 0.1);
          color: #cfd8dc;
        }

        .project-description {
          color: #cfd8dc;
          line-height: 1.6;
          margin-bottom: 30px;
        }

        .project-details {
          margin-bottom: 30px;
        }

        .detail-item {
          display: flex;
          margin-bottom: 15px;
        }

        .detail-label {
          min-width: 80px;
          font-weight: 600;
          color: #4CBAEA;
        }

        .detail-value {
          color: #cfd8dc;
        }

        .cta-button {
          display: inline-block;
          padding: 12px 30px;
          background: linear-gradient(to right, #4CBAEA, #4CBAEA);
          color: white;
          border-radius: 50px;
          text-decoration: none;
          font-weight: 600;
          transition: all 0.3s ease;
          border: none;
          cursor: pointer;
          box-shadow: 0 5px 15px rgba(116, 182, 211, 0.3);
        }

        .cta-button:hover {
          transform: translateY(-3px);
          box-shadow: 0 8px 20px rgba(116, 182, 211, 0.4);
        }

        /* Responsive adjustments */
        @media (max-width: 992px) {
          .lightbox-container {
            flex-direction: column;
            height: auto;
          }

          .lightbox-image-section {
            height: 300px;
          }

          .portfolio-container {
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
          }
        }

        @media (max-width: 768px) {
          .portfolio {
            padding: 70px 0;
          }

          .section-title h2 {
            font-size: 2.2rem;
          }

          #portfolio-flters li {
            margin: 5px 10px;
            padding: 8px 15px;
            font-size: 0.9rem;
          }

          .portfolio-container {
            grid-template-columns: 1fr;
            gap: 20px;
          }

          .lightbox-content {
            width: 95%;
            margin: 10% auto;
          }

          .lightbox-info-section {
            padding: 20px;
          }

          .lightbox-info-section h3 {
            font-size: 1.5rem;
          }
        }