/* --- CSS Variables for Colors (User will customize) --- */
:root {
    --primary-bg-color: #011627; /* Dark background */
    --secondary-bg-color: #1a2c3d; /* Slightly lighter dark background for cards/sections */
    --primary-text-color: #abb2bf; /* Light grey text */
    --secondary-text-color: #61afef; /* Blueish accent for headings/links */
    --accent-color-green: #43d9ad; /* Green accent */
    --accent-color-red: #ee8a80; /* Red accent */
    --border-color: #1b2c3d; /* Border color */
    --shadow-color: rgba(0, 0, 0, 0.3);
}

body {
    background-color: var(--primary-bg-color);
    color: var(--primary-text-color);
    font-family: 'Fira Code', monospace; /* Assuming a monospace font */
}

.single-project-main {
    max-width: 1200px;
    margin: 0px auto;
    padding: 20px;
}

.single-project-content {
    background-color: var(--secondary-bg-color);
    background-color: #04090d;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 8px var(--shadow-color);

    box-shadow: 0 4px 8px 0 rgba(55, 55, 55, 0.11), 0 6px 20px 0 rgba(102, 102, 102, 0.19);
    border: 2px #04090d double;
    margin: 3.2em 0;
}

/* Project Header */
.project-header {
    text-align: left;
    /*margin-bottom: 40px;
    padding-bottom: 20px;*/
    /*border-bottom: 1px solid var(--border-color);*/
    z-index: 4;
    position: relative;
}

.project-header .entry-title {
    font-size: 2.5em;
    color: var(--secondary-text-color);
    margin-bottom: 10px;
}

.project-intro {
    font-style: italic;
    color: var(--primary-text-color);
    margin-top: 0;
    font-size: 1.1em;
}

.project-meta-info{
    display: grid;
    grid-template-columns: 60% 40%;
}
.project-meta-info .half-1{
    line-height: 1.5em;
    margin-top: 20px;
    padding: 0px 20px 0 0;
    font-family: Fira Code;
}
.project-meta-info .half-2 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 30px;
    margin-top: 20px;
}

.project-meta-info .meta-label {
    font-weight: bold;
    color: var(--accent-color-green);
    margin-bottom: 5px;
    display: block;
    font-family: Fira Code;
}

@media (max-width: 1200px) {
    .project-meta-info{
        grid-template-columns: 50% 50%;
    }
}
@media (max-width: 1200px) {
    /*.project-meta-info{
        grid-template-columns: 40% 60%;
    }*/
}
@media (max-width: 768px) {
    
    .project-meta-info{
        display: flex;
        flex-direction: column;
    }
}

.project-dates {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    padding-left: 20px; /* Space for the timeline line/dots */
}

.project-dates .timeline-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-left: 15px; /* Adjust as needed */
    position: relative;
}

.project-dates .timeline-container::before {
    content: '';
    position: absolute;
    left: 4px; /* Align with dots */
    top: 5px;
    bottom: 5px;
    width: 2px;
    background-color: var(--border-color);
    z-index: 0;
}

.project-dates .timeline-item {
    display: flex;
    align-items: center;
    position: relative;
    margin-bottom: 10px;
    z-index: 1; /* Ensure dots are above the line */
}

.project-dates .timeline-item .dot {
    width: 10px;
    height: 10px;
    background-color: var(--accent-color-green); /* Dot color */
    border-radius: 50%;
    margin-right: 10px;
    flex-shrink: 0;
}

.project-dates .timeline-item .date-text {
    font-size: 0.95em;
    color: var(--primary-text-color);
}

/* Language Icons and Links */
.project-languages-links {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.project-languages .language-icons-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

.project-languages .language-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5em; 
    height: 2.5em;
    border-radius: 50%;
    padding: 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    transition: transform 0.2s ease-in-out;
    background: #eeeff0;
    border-radius: 0.25em;
}

.project-languages .language-icon svg {
    width: 95%;
    height: 95%;
    color: white; 
}

.project-languages .language-icon:hover {
    transform: scale(1.1);
}

.project-links {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
}

.project-link {
    display: inline-flex;
    align-items: center;
    color: var(--accent-color-green);
    text-decoration: none;
    font-weight: bold;
    transition: color 0.2s ease-in-out, transform 0.2s ease-in-out;
}

.project-link:hover {
    color: var(--secondary-text-color);
    transform: translateX(5px);
}

.project-link svg {
    margin-right: 8px;
    width: 18px;
    height: 18px;
    fill: currentColor; /* Inherit color from parent */
}

/* Content Sections */
.project-content-sections {
    margin-top: 40px;
}

.project-section {
    /*margin-bottom: 30px;*/
    padding-bottom: 20px;
    border-bottom: 1px dashed var(--border-color);
    font-family: Fira Code;
}

.project-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    /*padding-bottom: 0;*/
}

.section-title {
    font-size: 1.8em;
    color: var(--secondary-text-color);
    margin-bottom: 15px;
}

.project-section p {
    line-height: 1.6;
    margin-bottom: 1em;
}

/* Lists for Implementation and Key Features */
.feature-list {
    list-style: none; /* Remove default list style */
    padding-left: 0;
    margin-top: 15px;
}

.feature-list li {
    position: relative;
    margin-bottom: 8px;
    padding-left: 20px;
    line-height: 1.5;
}

.feature-list li::before {
    content: '•'; /* Custom bullet point */
    color: var(--accent-color-green);
    position: absolute;
    left: 0;
    font-size: 1.2em;
    top: 0;
}

/* Main Project Image Animation */
.project-main-image {
    text-align: center;
    margin: 40px 0;
    padding: 0; /* Remove padding/border for image section itself */
    border: none;
}

.project-image-animated {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 8px 16px var(--shadow-color);
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    display: block; /* Ensure no extra space below image */
    margin: 0 auto; /* Center image */
}

.project-image-animated:hover {
    transform: translateY(-5px) scale(1.01);
    box-shadow: 0 12px 24px var(--shadow-color);
}

/* Gallery Images */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Responsive grid */
    gap: 20px;
    margin-top: 20px;
}

.gallery-item {
    background-color: #283747; /* Slightly different background for gallery items */
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 8px var(--shadow-color);
    position: relative;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    cursor: pointer;
}
.gallery-grid .gallery-item:nth-child(n+7) {
  display: none;
}

.show-more-btn {
  margin-top: 1rem;
  padding: 0.5rem 1rem;
  background: #222;
  color: white;
  border-radius: 5px;
  cursor: pointer;
}

.gallery-item:hover {
    transform: translateY(-3px) scale(1.005);
    box-shadow: 0 8px 16px var(--shadow-color);
}

.gallery-item img {
    max-width: 100%;
    height: auto;
    display: block;
}

.gallery-item .device-label {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 0.8em;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .project-header .entry-title {
        font-size: 2em;
    }

    .project-meta-info {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .project-languages-links,
    .project-dates {
        width: 100%;
    }
}



.StepProgress {
  position: relative;
  padding-left: 45px;
  list-style: none;
}
.StepProgress::before {
  display: inline-block;
  content: '';
  position: absolute;
  top: 0;
  left: 15px;
  width: 10px;
  height: 100%;
  border-left: 5px solid #CCC;
}
.StepProgress-item {
  position: relative;
  counter-increment: list;
}
.StepProgress-item:not(:last-child) {
  padding-bottom: 20px;
}
.StepProgress-item::before {
  display: inline-block;
  content: '';
  position: absolute;
  left: -30px;
  height: 100%;
  width: 10px;
}
.StepProgress-item::after {
  content: '';
  display: inline-block;
  position: absolute;
  top: 0;
  left: -38px;
  width: 12px;
  height: 12px;
  border: 5px solid #CCC;
  border-radius: 50%;
  background-color: #FFF;
}
.StepProgress-item.is-done::before {
  border-left: 5px solid green;
}
.StepProgress-item.is-done::after {
  content: "✔";
  font-size: 10px;
  color: #FFF;
  text-align: center;
  border: 5px solid green;
  background-color: green;
}
.StepProgress-item.current::before {
  border-left: 5px solid green;
}
.StepProgress-item.current::after {
  content: counter(list);
  padding-top: 1px;
  width: 19px;
  height: 18px;
  top: -4px;
  left: -42px;
  font-size: 14px;
  text-align: center;
  color: green;
  border: 5px solid green;
  background-color: white;
}
.StepProgress strong {
  display: block;
}


.fr{
    background: #43d9ad;
    width: 2px;
    height: 51%;
    position: absolute;
    top: 10px;
    left: 19px;
}

.rb-container {
  font-family: "PT Sans", sans-serif;
  /*width: 50%;*/
  /*margin: auto;*/
  display: block;
  position: relative;
}

.rb-container ul.rb, .timeline ul {
  margin: 0.5em 0;
  padding: 0;
  display: inline-block;
  margin-left: 0.5em;
}
.timestamp{
    color: var(--accent-color-green);
    font-size: 0.9em;
}

.rb-container ul.rb li, .timeline ul li {
  list-style: none;
  margin: auto;
  /*min-height: 50px;*/
  min-height: 0.5em;
  border-left: 1px dashed #fff;
  /*padding: 0 0 20px 20px;*/
  padding: 0 0 0.5em 1.5em;
  position: relative;
}

.rb-container ul.rb li:last-child, .timeline ul li:last-child {
  border-left: 0;
}

/*.rb-container ul.rb li::before, .timeline ul li::before {
  position: absolute;
  left: -13px;
  top: -5px;
  content: " ";
  border: 8px solid rgba(255, 255, 255, 1);
  border-radius: 500%;
  background: #50d890;
  height: 10px;
  width: 10px;
  transition: all 500ms ease-in-out;
}*/
.rb-container ul.rb li::before, .timeline ul li::before {
  position: absolute;
  left: -0.6em;
  top: 0;
  content: " ";
  border: 0.4em solid rgb(255, 255, 255);
  border-radius: 500%;
  background: #50d890;
  height: 0.5em;
  width: 0.5em;
  transition: all 500ms ease-in-out;
}

.rb-container ul.rb li:hover::before, .timeline ul  li:hover::before{
  border-color: #232931;
  transition: all 1000ms ease-in-out;
}
.rb-item .item-title{
    font-family: Fira Code;
    font-size: 70%;
}

.project-halfsections{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.2em;
    justify-content: space-between;
    padding: 50px 0;
}
.project-halfsections > section{
  /*width: 48%;*/
  background: #060b0f;
  padding: 2em;
  border-radius: 0.75em;
  /*box-shadow: 0 4px 8px 0 rgba(72, 72, 72, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  border: 2px #201f1f double;*/
  box-shadow: 0 4px 8px 0 rgba(55, 55, 55, 0.11), 0 6px 20px 0 rgba(102, 102, 102, 0.19);
  border: 2px #04090d double;
  line-height: 1.5em;   
}

  .carousel {
    overflow: hidden;
    /*border-radius: 14px;*/
    box-shadow: 0 0 40px rgba(0,0,0,0.5);
  }
  .carousel img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    top: 0;
    left: 0;
  }
  .shard2 {
    position: absolute;
    background-size: 800px 450px;
    background-repeat: no-repeat;
    will-change: transform;
    pointer-events: none;
  }

.shard {
  position: absolute;
  box-sizing: border-box;
  background-repeat: no-repeat;
  background-position: 0 0;
  will-change: transform, opacity;
  pointer-events: none;
  transform-origin: center center;
   border: 0.5px solid rgba(255,255,255,0.03); 
}
#article-header{
    position: relative;
    overflow: hidden;
}

#article-header:before{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    content: '';
    background-color: rgba(4,9,13, 0.95);
    background-color: rgba(0, 0, 0, 0.92);
    z-index: 2;
}

#carousel{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: 1;
}



@media screen and (max-width:1200px){
 .project-halfsections{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
 }
 .project-halfsections > section{
    /*width: 90%;*/
 }   
}
@media screen and (max-width:768px){
    .project-dates{
        padding-left: 0;
    }
    .project-languages-links, .project-dates{
        width: fit-content;
    }
    .project-meta-info .half-2{
        width: 100%;
        flex-direction: row-reverse;
    }
    .project-halfsections{
        grid-template-columns: 1fr;
    }
}



  .image-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
  }

  .image-modal-content {
    position: relative;
    max-width: 90%;
    max-height: 90%;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
    transform: scale(0.9);
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0,0,0,0.2);
  }

  .image-modal-content img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: inherit;
    user-select: none;
    pointer-events: none;
  }

  .image-modal-close {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(255,255,255,0.15);
    background: rgb(255, 0, 0);
    border: none;
    color: white;
    font-size: 26px;
    cursor: pointer;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(4px);
    transition: background 0.3s;
    z-index: 10000;
  }

  .image-modal-close:hover {
    background: rgba(255,255,255,0.8);
    color: red;
  }

  .image-strip{
    display: flex;
    overflow: hidden;
    position: relative;
    width: 100%;
  }
  .image-modal-content {
    position: relative;
    width: 80%;
    max-width: 1000px;
    overflow: hidden;
    border-radius: 10px;
  }

  .image-strip img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
  }

  .nav-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.15);
    color: white;
    border: none;
    font-size: 32px;
    width: 50px;
    height: 70px;
    cursor: pointer;
    border-radius: 8px;
    backdrop-filter: blur(4px);
    transition: background 0.3s;
    z-index: 10000;
  }

  .nav-arrow:hover {
    background: rgba(255,255,255,0.3);
  }

  .nav-arrow.prev {
    left: 15px;
    opacity: 0;
  }

  .nav-arrow.next {
    right: 15px;
  }

  @media (max-width: 768px) {
    .image-modal-content {
      max-width: 95%;
      max-height: 80%;
      border-radius: 10px;
    }

    .nav-arrow {
      width: 40px;
      height: 60px;
      font-size: 24px;
    }
  }