/*======================================================
Project Details
Part 1
======================================================*/

:root {
  --primary: #ba1515;
  --secondary: #0f172a;
  --light: #f8fafc;
  --border: #e5e7eb;
  --gray: #6b7280;
  --radius: 22px;
  --shadow: 0 15px 45px rgba(0, 0, 0, 0.08);
  --transition: 0.35s ease;
}

/*======================================================
General
======================================================*/

.project-details-page {
  background: #fafafa;
}

.project-details-page h1,
.project-details-page h2,
.project-details-page h3,
.project-details-page h4 {
  font-family: "Manrope", sans-serif;
  font-weight: 800;
}

.project-details-page p {
  font-family: "Inter", sans-serif;

  color: #666;

  line-height: 1.9;
}

/*======================================================
Hero
======================================================*/

.project-hero {
  position: relative;
  overflow: hidden;
}

.project-hero img {
  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;
}

.project-hero-overlay {
  position: absolute;

  inset: 0;

  background: linear-gradient(
    180deg,
    rgba(15, 23, 42, 0.25),
    rgba(15, 23, 42, 0.85)
  );

  display: flex;

  align-items: center;
}

.project-category {
  display: inline-block;

  padding: 10px 22px;

  background: rgba(255, 255, 255, 0.15);

  backdrop-filter: blur(10px);

  border-radius: 50px;

  color: #fff;

  font-size: 14px;

  margin-bottom: 25px;
}

.project-hero h1 {
  font-size: 60px;

  color: #fff;

  margin-bottom: 20px;

  max-width: 850px;
}

.project-hero p {
  font-size: 20px;

  color: #eee;

  margin-bottom: 30px;
}

.project-tags {
  display: flex;

  flex-wrap: wrap;

  gap: 12px;
}

.project-tags span {
  padding: 10px 18px;

  border-radius: 40px;

  background: rgba(255, 255, 255, 0.15);

  backdrop-filter: blur(12px);

  color: #fff;

  font-weight: 600;
}

/*======================================================
Quick Info
======================================================*/

.project-info-section {
  margin-top: -80px;

  position: relative;

  z-index: 50;

  padding-bottom: 80px;
}

.info-card {
  background: #fff;

  padding: 35px;

  border-radius: 20px;

  text-align: center;

  box-shadow: var(--shadow);

  transition: 0.35s;

  height: 100%;
}

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

.info-card h6 {
  color: #888;

  font-size: 13px;

  text-transform: uppercase;

  margin-bottom: 12px;

  letter-spacing: 1px;
}

.info-card h4 {
  font-size: 22px;

  color: var(--secondary);
}

/*======================================================
Overview
======================================================*/

.project-overview {
  padding: 80px 0;
}

.project-overview h2 {
  font-size: 42px;

  margin-bottom: 25px;

  color: var(--secondary);
}

.project-overview img {
  border-radius: 20px;

  box-shadow: var(--shadow);

  transition: 0.5s;
}

.project-overview img:hover {
  transform: scale(1.03);
}

/*======================================================
Scope
======================================================*/

.scope-section {
  padding: 90px 0;
}

.scope-card {
  background: #fff;

  padding: 45px 30px;

  border-radius: 22px;

  box-shadow: var(--shadow);

  text-align: center;

  transition: 0.35s;

  height: 100%;
}

.scope-card:hover {
  background: var(--primary);

  transform: translateY(-10px);
}

.scope-card i {
  font-size: 42px;

  color: var(--primary);

  margin-bottom: 25px;

  transition: 0.35s;
}

.scope-card h4 {
  font-size: 22px;

  transition: 0.35s;
}

.scope-card:hover i,
.scope-card:hover h4 {
  color: #fff;
}

/*======================================================
Section Title
======================================================*/

.section-title {
  margin-bottom: 60px;
}

.section-title h2 {
  font-size: 42px;

  margin-bottom: 15px;
}

.section-title p {
  max-width: 700px;

  margin: auto;
}

/*======================================================
Responsive
======================================================*/

@media (max-width: 992px) {
  .project-hero h1 {
    font-size: 46px;
  }

  .project-info-section {
    margin-top: -50px;
  }
}

@media (max-width: 768px) {
  .project-hero h1 {
    font-size: 34px;
  }

  .project-hero p {
    font-size: 17px;
  }

  .project-overview h2 {
    font-size: 34px;
  }

  .section-title h2 {
    font-size: 34px;
  }
}

@media (max-width: 576px) {
  .project-tags {
    gap: 8px;
  }

  .project-tags span {
    font-size: 13px;

    padding: 8px 14px;
  }

  .info-card {
    padding: 25px;
  }

  .scope-card {
    padding: 35px 20px;
  }
}

/*======================================================
Project Details
Part 2
Gallery | Statistics | Software | Challenges
======================================================*/

/*======================================================
Gallery
======================================================*/

.project-gallery {
  padding: 90px 0;

  background: #fff;
}

.gallery-item {
  position: relative;

  display: block;

  overflow: hidden;

  border-radius: 22px;

  box-shadow: var(--shadow);
}

.gallery-item img {
  width: 100%;

  height: 320px;

  object-fit: cover;

  display: block;

  transition: 0.5s;
}

.gallery-item:hover img {
  transform: scale(1.08);
}

.gallery-overlay {
  position: absolute;

  inset: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  background: rgba(15, 23, 42, 0.65);

  opacity: 0;

  transition: 0.35s;
}

.gallery-item:hover .gallery-overlay {
  opacity: 1;
}

.gallery-overlay i {
  width: 75px;

  height: 75px;

  border-radius: 50%;

  background: #fff;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 28px;

  color: var(--primary);

  transition: 0.35s;
}

.gallery-overlay i:hover {
  transform: scale(1.12);
}

/*======================================================
Statistics
======================================================*/

.project-statistics {
  padding: 90px 0;

  background: #f8fafc;
}

.stat-card {
  background: #fff;

  padding: 45px 25px;

  border-radius: 22px;

  text-align: center;

  box-shadow: var(--shadow);

  transition: var(--transition);

  height: 100%;
}

.stat-card:hover {
  transform: translateY(-10px);
}

.stat-card h2 {
  font-size: 54px;

  font-weight: 800;

  color: var(--primary);

  margin-bottom: 12px;
}

.stat-card p {
  margin: 0;

  font-size: 17px;

  font-weight: 600;

  color: #666;
}

/*======================================================
Software
======================================================*/

.software-section {
  padding: 90px 0;

  background: #fff;
}

.software-card {
  background: #fff;

  padding: 35px 20px;

  border-radius: 20px;

  text-align: center;

  border: 1px solid var(--border);

  transition: 0.35s;

  height: 100%;
}

.software-card:hover {
  transform: translateY(-10px);

  box-shadow: var(--shadow);

  border-color: var(--primary);
}

.software-card img {
  width: 65px;

  height: 65px;

  object-fit: contain;

  margin-bottom: 20px;
}

.software-card h5 {
  font-size: 18px;

  margin: 0;

  color: var(--secondary);
}

/*======================================================
Challenges & Solutions
======================================================*/

.challenge-section {
  padding: 90px 0;

  background: #fafafa;
}

.challenge-section h2 {
  font-size: 36px;

  margin-bottom: 35px;

  color: var(--secondary);
}

.challenge-list,
.solution-list {
  padding: 0;

  margin: 0;

  list-style: none;
}

.challenge-list li,
.solution-list li {
  position: relative;

  background: #fff;

  padding: 18px 20px 18px 60px;

  margin-bottom: 18px;

  border-radius: 16px;

  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);

  transition: 0.3s;
}

.challenge-list li:hover,
.solution-list li:hover {
  transform: translateX(8px);
}

.challenge-list li::before {
  content: "⚠";

  position: absolute;

  left: 22px;

  top: 50%;

  transform: translateY(-50%);

  font-size: 20px;
}

.solution-list li::before {
  content: "✓";

  position: absolute;

  left: 22px;

  top: 50%;

  transform: translateY(-50%);

  font-size: 18px;

  font-weight: bold;

  color: var(--primary);
}

/*======================================================
Animation
======================================================*/

.fade-up {
  opacity: 0;

  transform: translateY(35px);

  transition: 0.8s ease;
}

.fade-up.show {
  opacity: 1;

  transform: none;
}

/*======================================================
Responsive
======================================================*/

@media (max-width: 992px) {
  .gallery-item img {
    height: 260px;
  }

  .stat-card h2 {
    font-size: 44px;
  }
}

@media (max-width: 768px) {
  .challenge-section h2 {
    font-size: 30px;
  }

  .gallery-item img {
    height: 230px;
  }

  .software-card {
    padding: 30px 15px;
  }
}

@media (max-width: 576px) {
  .stat-card {
    padding: 35px 20px;
  }

  .stat-card h2 {
    font-size: 36px;
  }

  .gallery-item img {
    height: 200px;
  }
}

/*======================================================
Project Details
Part 3
Related Projects | Navigation | Download | CTA
======================================================*/

/*======================================================
Related Projects
======================================================*/

.related-projects {
  padding: 100px 0;

  background: #ffffff;
}

.related-projects .project-card {
  background: #fff;

  border-radius: 22px;

  overflow: hidden;

  box-shadow: var(--shadow);

  transition: var(--transition);

  height: 100%;
}

.related-projects .project-card:hover {
  transform: translateY(-10px);

  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
}

.related-projects .project-image {
  position: relative;

  height: 260px;

  overflow: hidden;
}

.related-projects .project-image img {
  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: 0.5s;
}

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

.related-projects .project-overlay {
  position: absolute;

  inset: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  background: rgba(15, 23, 42, 0.65);

  opacity: 0;

  transition: 0.35s;
}

.related-projects .project-card:hover .project-overlay {
  opacity: 1;
}

.related-projects .project-overlay a {
  padding: 14px 30px;

  background: #fff;

  color: var(--primary);

  border-radius: 50px;

  font-weight: 700;

  text-decoration: none;

  transition: 0.3s;
}

.related-projects .project-overlay a:hover {
  background: var(--primary);

  color: #fff;
}

.related-projects .project-body {
  padding: 28px;
}

.related-projects .project-body h3 {
  font-size: 24px;

  margin-bottom: 15px;

  color: var(--secondary);
}

.related-projects .project-location {
  display: flex;

  align-items: center;

  gap: 10px;

  margin-bottom: 18px;

  color: #666;
}

.related-projects .project-location i {
  color: var(--primary);
}

.related-projects .sector {
  display: inline-block;

  padding: 8px 18px;

  background: #f1f5f9;

  border-radius: 30px;

  font-size: 13px;

  font-weight: 700;
}

/*======================================================
Project Navigation
======================================================*/

.project-navigation {
  padding: 80px 0;

  background: #fafafa;
}

.nav-project {
  display: block;

  padding: 35px;

  background: #fff;

  border-radius: 20px;

  box-shadow: var(--shadow);

  text-decoration: none;

  transition: 0.35s;
}

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

.nav-project small {
  display: block;

  color: #999;

  margin-bottom: 10px;

  text-transform: uppercase;

  letter-spacing: 1px;
}

.nav-project h4 {
  color: var(--secondary);

  margin: 0;

  font-size: 24px;
}

/*======================================================
Download Card
======================================================*/

.download-section {
  padding-bottom: 100px;

  background: #fafafa;
}

.download-card {
  background: linear-gradient(135deg, #0f172a, #1e293b);

  padding: 60px;

  border-radius: 28px;

  color: #fff;
}

.download-card h2 {
  font-size: 38px;

  margin-bottom: 18px;

  color: #fff;
}

.download-card p {
  color: rgba(255, 255, 255, 0.85);

  margin-bottom: 0;
}

.download-card .btn {
  padding: 16px 35px;

  border-radius: 50px;

  font-weight: 700;
}

/*======================================================
Utility
======================================================*/

.rounded-xl {
  border-radius: 22px;
}

.shadow-lg {
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.15);
}

.text-primary {
  color: var(--primary) !important;
}

.bg-light {
  background: #f8fafc !important;
}

/*======================================================
Print
======================================================*/

@media print {
  .project-hero,
  .project-gallery,
  .related-projects,
  .project-navigation,
  .download-section,
  .project-cta {
    display: none !important;
  }

  .info-card,
  .scope-card,
  .stat-card {
    box-shadow: none;

    border: 1px solid #ddd;
  }
}

/*======================================================
Responsive
======================================================*/

@media (max-width: 992px) {
  .download-card {
    padding: 40px;

    text-align: center;
  }

  .download-card .btn {
    margin-top: 25px;
  }

  .project-cta h2 {
    font-size: 38px;
  }
}

@media (max-width: 768px) {
  .nav-project {
    margin-bottom: 20px;
  }

  .download-card {
    padding: 30px;
  }

  .download-card h2 {
    font-size: 30px;
  }

  .project-cta {
    padding: 80px 0;
  }

  .project-cta h2 {
    font-size: 32px;
  }

  .project-cta p {
    font-size: 16px;
  }
}

@media (max-width: 576px) {
  .related-projects .project-image {
    height: 220px;
  }

  .related-projects .project-body {
    padding: 20px;
  }

  .download-card {
    border-radius: 20px;
  }

  .project-cta .btn {
    width: 100%;
  }
}

/*======================================================
Lightbox
======================================================*/

.lightbox {
  position: fixed;

  inset: 0;

  background: rgba(0, 0, 0, 0.92);

  display: flex;

  justify-content: center;

  align-items: center;

  opacity: 0;

  visibility: hidden;

  transition: 0.3s;

  z-index: 9999;
}

.lightbox.show {
  opacity: 1;

  visibility: visible;
}

.lightbox-image {
  max-width: 90%;

  max-height: 85vh;

  border-radius: 16px;

  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

.lightbox-close,
.lightbox-prev,
.lightbox-next {
  position: absolute;

  color: #fff;

  font-size: 34px;

  cursor: pointer;

  user-select: none;

  transition: 0.3s;
}

.lightbox-close {
  top: 25px;

  right: 35px;
}

.lightbox-prev {
  left: 35px;
}

.lightbox-next {
  right: 35px;
}

.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover {
  color: #dc3545;
}

@media (max-width: 768px) {
  .lightbox-prev {
    left: 15px;
  }

  .lightbox-next {
    right: 15px;
  }

  .lightbox-close {
    right: 20px;

    top: 15px;
  }

  .lightbox-image {
    max-width: 95%;
  }
}
/*==================================
Hero
==================================*/

.project-hero {
  padding: 190px 0 140px;

  background-size: cover;

  background-position: center;

  color: #fff;
}

.project-category {
  display: inline-block;

  padding: 8px 18px;

  background: #ba1515;

  border-radius: 40px;

  font-weight: 600;

  margin-bottom: 25px;
}

.project-hero h1 {
  font-size: 64px;

  font-weight: 800;

  margin-bottom: 25px;
}

.project-hero p {
  font-size: 20px;

  line-height: 1.9;

  max-width: 700px;
}

/*==================================
Facts
==================================*/

.project-facts {
  padding: 70px 0;

  background: #fff;
}

.fact-card {
  text-align: center;

  padding: 30px 20px;

  border-radius: 18px;

  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.07);

  height: 100%;
}

.fact-card:hover i {
  color: #fff;
}
.fact-card:hover .fact-icon {
  background: #ba1515;
  color: #fff;
}

.fact-card h6 {
  font-weight: 700;

  margin-bottom: 8px;
}

.fact-card p {
  margin: 0;

  color: #666;
}

/*==================================
Overview
==================================*/

.project-overview {
  padding: 110px 0;
}

.project-overview h2 {
  font-size: 42px;

  font-weight: 800;

  margin: 20px 0;
}

.project-overview p {
  line-height: 1.9;

  color: #666;
}

/*==========================================
Scope
==========================================*/

.project-scope {
  padding: 120px 0;

  background: #f8f9fa;
}

.scope-card {
  background: #fff;

  padding: 45px 35px;

  border-radius: 20px;

  text-align: center;

  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.08);

  transition: 0.35s;

  height: 100%;
}

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

.scope-card i {
  font-size: 46px;

  color: #ba1515;

  margin-bottom: 25px;
}

.scope-card h4 {
  font-weight: 700;

  margin-bottom: 18px;
}

.scope-card p {
  color: #666;

  line-height: 1.8;
}

/*==========================================
Story
==========================================*/

.project-story {
  padding: 120px 0;
}

.project-story h2 {
  margin-bottom: 40px;

  font-weight: 800;
}

.story-item {
  display: flex;

  gap: 22px;

  margin-bottom: 35px;

  align-items: flex-start;
}

.story-item i {
  font-size: 30px;

  margin-top: 5px;
}

.story-item .fa-circle-check {
  color: #28a745;
}

.story-item .fa-circle-exclamation {
  color: #ba1515;
}

.story-item h5 {
  font-weight: 700;

  margin-bottom: 10px;
}

.story-item p {
  color: #666;

  line-height: 1.8;
}

/*==========================================
Deliverables
==========================================*/

.deliverables {
  padding: 120px 0;

  background: #f8f9fa;
}

.deliver-card {
  background: #fff;

  padding: 40px;

  text-align: center;

  border-radius: 18px;

  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.07);

  height: 100%;
}

.deliver-card i {
  font-size: 42px;

  color: #ba1515;

  margin-bottom: 20px;
}

/*==========================================
Gallery
==========================================*/

.project-gallery {
  padding: 120px 0;
}

.gallery-img {
  width: 100%;

  height: 320px;

  object-fit: cover;

  border-radius: 18px;

  transition: 0.35s;

  cursor: pointer;
}

.gallery-img:hover {
  transform: scale(1.04);

  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.15);
}

/*==========================================
Related Projects
==========================================*/

.related-projects {
  padding: 120px 0;

  background: #f8f9fa;
}

.related-card {
  background: #fff;

  border-radius: 20px;

  overflow: hidden;

  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);

  transition: 0.35s;

  height: 100%;
}

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

.related-image {
  overflow: hidden;
}

.related-image img {
  width: 100%;

  height: 240px;

  object-fit: cover;

  transition: 0.4s;
}

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

.related-content {
  padding: 30px;
}

.related-content span {
  color: #ba1515;

  font-weight: 700;

  font-size: 14px;
}

.related-content h4 {
  margin: 15px 0;

  font-weight: 700;
}

.related-content p {
  color: #666;

  line-height: 1.8;

  margin-bottom: 25px;
}

.related-content a {
  text-decoration: none;

  font-weight: 700;

  color: #ba1515;
}

.related-content a i {
  margin-left: 8px;
}

/*==========================================
Project Navigation
==========================================*/

.project-navigation {
  padding: 70px 0;

  border-top: 1px solid #eee;
}

.nav-project {
  display: block;

  text-decoration: none;

  color: #222;

  transition: 0.3s;
}

.nav-project span {
  display: block;

  color: #999;

  font-size: 14px;

  margin-bottom: 10px;
}

.nav-project h5 {
  font-weight: 700;
}

.nav-project:hover {
  color: #ba1515;
}

/*==========================================
Responsive
==========================================*/

@media (max-width: 991px) {
  .project-cta .cta-box {
    padding: 60px 35px;
  }

  .project-cta h2 {
    font-size: 34px;
  }
}

@media (max-width: 576px) {
  .project-navigation .col-6 {
    margin-bottom: 25px;

    text-align: left !important;
  }

  .project-cta h2 {
    font-size: 28px;
  }

  .project-cta p {
    font-size: 16px;
  }
}