/* ===== PORTFOLIO LISTING PAGE STYLES ===== */

.common_portfoliossection {
   padding: 40px 0 0;
   background: #ffffff;
   font-family: 'Inter', sans-serif;
}

.portfolios_headingbx {
   text-align: center;
   max-width: 800px;
   margin: 0 auto 50px auto;
}

.portfolios_headingbx h1 {
   font-size: 42px;
   font-weight: 600;
   color: #0F172A;
   margin-bottom: 12px;
   line-height: 1.2;
}

.portfolios_headingbx p {
   font-size: 18px;
   line-height: 1.7;
   color: #334155;
   margin-bottom: 24px;
}

.portfolios_headingbx .btn-contact {
   display: inline-block;
   background-color: #1b508e;
   color: #ffffff;
   padding: 10px 32px;
   border-radius: 6px;
   font-weight: 600;
   font-size: 15px;
   text-decoration: none;
   transition: background-color 0.3s ease, transform 0.2s ease;
}

.portfolios_headingbx .btn-contact:hover {
   background-color: #143f72;
   transform: translateY(-1px);
}

/* Grid Layout */
.nb-portfolio-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 40px 40px;
   max-width: 1200px;
   margin: 0 auto;
}

.nb-portfolio-card {
   display: flex;
   flex-direction: column;
   text-decoration: none;
   color: inherit;
   group-hover: pointer;
}

/* Card Image/Video Wrapper */
.nb-portfolio-card__media-wrap {
   position: relative;
   border-radius: 16px;
   overflow: hidden;
   aspect-ratio: 1.6;
   margin-bottom: 16px;
   background-color: #f8fafc;
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
}

.nb-portfolio-card__media-wrap > img,
.nb-portfolio-card__media-wrap > video {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
   transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.nb-portfolio-card:hover .nb-portfolio-card__media-wrap > img,
.nb-portfolio-card:hover .nb-portfolio-card__media-wrap > video {
   transform: scale(1.04);
}

/* Brand Logo Badge */
.nb-portfolio-card__logo {
   position: absolute;
   bottom: 24px;
   left: 24px;
   background: #ffffff;
   border-radius: 16px;
   padding: 10px 20px;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
   display: flex;
   align-items: center;
   justify-content: center;
   height: 70px;
   min-width: 220px;
   z-index: 5;
}

.nb-portfolio-card__logo img {
   max-height: 100%;
   max-width: 100%;
   object-fit: contain;
   transform: none !important;
}

.nb-portfolio-card__logo .logo-text-fallback {
   font-size: 16px;
   font-weight: 700;
   color: #1b508e;
   white-space: nowrap;
}

/* Meta info */
.nb-portfolio-card__meta {
   font-size: 16px;
   font-weight: 500;
   color: #475569;
   margin-bottom: 12px;
}

/* Title and Arrow Row */
.nb-portfolio-card__content {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
   gap: 20px;
}

.nb-portfolio-card__title-col {
   flex: 1;
}

.nb-portfolio-card__title-col h2 {
   font-size: 24px;
   font-weight: 700;
   color: #0F172A;
   margin: 0 0 10px 0;
   line-height: 1.6;
   transition: color 0.3s ease;
}

.nb-portfolio-card:hover .nb-portfolio-card__title-col h2 {
   color: #1b508e;
}

.nb-portfolio-card__desc {
   font-size: 15px;
   color: #475569;
   line-height: 1.6;
   margin: 0;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
   text-overflow: ellipsis;
}

/* Circle Arrow Icon */
.nb-portfolio-card__arrow {
   width: 48px;
   height: 48px;
   border-radius: 50%;
   background-color: #f1f5f9;
   display: flex;
   align-items: center;
   justify-content: center;
   color: #1b508e;
   flex-shrink: 0;
   transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.nb-portfolio-card__arrow::after {
   content: "";
   display: block;
   width: 20px;
   height: 20px;
   background-color: currentColor;
   -webkit-mask: url('data:image/svg+xml;utf8,<svg viewBox="0 0 25 25" xmlns="http://www.w3.org/2000/svg"><path d="M2.82841 24.0422L20.0394 6.83124L20.0535 16.9711H24.0416L24.0416 2.00058C24.0416 0.896035 23.1462 0.000612407 22.0416 0.000569923L7.07105 0.000584759V3.98867L17.211 4.00281L-1.89952e-05 21.2138L2.82841 24.0422Z"/></svg>') no-repeat center / contain;
   mask: url('data:image/svg+xml;utf8,<svg viewBox="0 0 25 25" xmlns="http://www.w3.org/2000/svg"><path d="M2.82841 24.0422L20.0394 6.83124L20.0535 16.9711H24.0416L24.0416 2.00058C24.0416 0.896035 23.1462 0.000612407 22.0416 0.000569923L7.07105 0.000584759V3.98867L17.211 4.00281L-1.89952e-05 21.2138L2.82841 24.0422Z"/></svg>') no-repeat center / contain;
   transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.nb-portfolio-card:hover .nb-portfolio-card__arrow {
   background-color: #1b508e;
   color: #ffffff;
}

.nb-portfolio-card:hover .nb-portfolio-card__arrow::after {
   transform: translate(2px, -2px);
}



/* Responsive Styles */
@media (max-width: 1024px) {
   .nb-portfolio-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 30px 20px;
   }
   .portfolios_headingbx h1 {
      font-size: 38px;
   }
}

@media (max-width: 768px) {
   .common_portfoliossection {
      padding:20px 0 0;
   }
   .nb-portfolio-grid {
      grid-template-columns: 1fr;
      gap: 24px;
   }
   .nb-portfolio-card__media-wrap {
      aspect-ratio: 1.7;
      margin-bottom: 12px;
   }
   .portfolios_headingbx {
      margin-bottom: 24px;
   }
   .portfolios_headingbx h1 {
      font-size: 28px;
      line-height: 1.3;
   }
   .portfolios_headingbx p {
      font-size: 15px;
      line-height: 1.6;
      margin-bottom: 16px;
   }
   .portfolios_headingbx p br{display:none}
   .nb-portfolio-card__logo {
      bottom: 16px;
      left: 16px;
      height: 48px;
      min-width: 90px;
      padding: 6px 12px;
   }
   .nb-portfolio-card__title-col h2 {
      font-size: 18px;
     
      margin-bottom: 6px;
   }
   .nb-portfolio-card__desc {
      font-size: 13px;
      line-height: 1.5;
   }
   .nb-portfolio-card__meta {
      font-size: 12px;
      margin-bottom: 6px;
   }
   .nb-portfolio-card__arrow {
      width: 36px;
      height: 36px;
   }
   .nb-portfolio-card__arrow::after {
      width: 14px;
      height: 14px;
   }
}

@media (max-width: 480px) {
   .portfolios_headingbx h1 {
      font-size: 24px;
   }
   .portfolios_headingbx p {
      font-size: 13px;
   }
   .nb-portfolio-card__media-wrap {
      aspect-ratio: 1.7;
   }
   .nb-portfolio-card__title-col h2 {
      font-size: 16px;
   }
   .nb-portfolio-card__desc {
      font-size: 12px;
   }
}

/* Pagination Styles matching the blog page */
.pagenation_list {
   display: inline-block;
   width: 100%;
   text-align: center;
   margin-top: 40px;
   margin-bottom: 20px;
}
.pagenation_list nav {
   height: auto !important;
   line-height: inherit !important;
   background: transparent !important;
   border: none !important;
   box-shadow: none !important;
}
.pagination {
   display: flex;
   justify-content: center;
   padding-left: 0;
   margin: 40px 0 10px;
   border-radius: 4px;
   list-style: none;
   flex-wrap: wrap;
}
.pagination li {
   font-size: 1rem;
   padding: 0 3px;
   text-align: center;
   height: auto !important;
}
.pagination .page-item .page-link {
   position: relative;
   display: inline-flex !important;
   align-items: center;
   justify-content: center;
   min-width: 32px;
   height: 32px !important;
   padding: 0 10px !important;
   line-height: 1 !important;
   color: #333 !important;
   text-decoration: none;
   background-color: #fff !important;
   border: 1px solid #E2E8F0 !important;
   border-radius: 5px !important; 
   font-weight: 500 !important;
   float: none !important; font-size:14px;
}
.pagination .page-item.active .page-link,
.pagination .page-item.active .page-link:hover,
.pagination .page-item.active .page-link:focus {
   background-color: #1a508e !important;
   border: 1px solid #1a508e !important;
   color: #fff !important;
   z-index: 3;
   cursor: default;
}

@media (max-width: 480px) {
   .pagination {
      margin: 20px 0 10px;
      gap: 8px 0;
   }
   .pagination li {
      font-size: 14px;
      padding: 0 2px;
   }
   .pagination .page-item .page-link {
      min-width: 28px;
      height: 28px !important;
      padding: 0 6px !important;
   }
   .pagenation_list{margin-top:10px;margin-bottom:0}
}