:root {
    --project-space: 0.5rem;
    --project-border-color: #252527;
    --project-text-color: smoke;
    --project-bg-color: #171719;
    --project-footer-height: 80px;
    --project-footer-cubic-bezier: cubic-bezier(.45, -0.39, .68, 1.41);
    --project-footer-animation-time: 1s;
}

:root.light-theme {
    --project-border-color: #dcdcdc;
    --project-text-color: #171719;
    --project-bg-color: white;
}

:root.light-theme .project-card,
:root.light-theme #about-me-section {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}



.project-section {
    /* display: grid;
    grid-template-columns: 1fr;
    width: 50vw; */
    display: flex;
    flex-direction: column;
    gap: 1rem;
    /* flex-wrap: wrap; */
    /* width: 100%; */
    /* padding: 1rem; */
    overflow: hidden;
}

.project-card {
    background: var(--project-bg-color);
    border: 1px solid var(--project-border-color);
    border-radius: 0.5rem;
    width: 100%;
    /* max-width: 400px; */
    position: relative;
    /* padding: var(--project-space) calc(var(--project-space)*1.2); */
    /* transform: scale(0.5); */
    opacity: 0.2;
    transform: translateY(var(--project-footer-height));
    transition:
        opacity 0.6s ease-out,
        transform 0.6s ease-out;
    will-change: opacity, transform;
    overflow: hidden;
}

.project-card.in-view {
    opacity: 1;
    transform: translateY(0);
}

.project-card :hover {}

.project-card-img-box {
    width: 100%;
    overflow: hidden;
    padding: calc(var(--project-space)*1.2);
  aspect-ratio: 16 / 9;   /* keeps space */

}

.project-card-img {
    border-radius: 0.5rem;
}



.project-card-img:hover {
    /* transform: scale(1.2); */

}

.project-name {
    padding: 0 !important;
    margin: 0 !important;
}

.project-desc {

    width: 100%;
    /* white-space: nowrap; */
    overflow: hidden;
    /* text-overflow: ellipsis; */
    position: relative;
    overflow: hidden;
    transition: 0.2s;
}


/* .project-desc:hover {
    height: auto;
    white-space: wrap;
    text-overflow: clip;
    overflow: visible;
    transition: 0.2s;
    transition: 0.2s;

} */

.project-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--project-footer-height)
}

.project-card-body {
    padding: 0 calc(var(--project-space)*1.2);
}


.project-skills {
    display: flex;
    align-items: center;
    /* margin: 0 var(--project-space); */
    padding: calc(var(--project-space));
    background-color: var(--project-border-color);
    /* margin-left: calc(var(--project-space) * 1); */
    border-radius: 0 0.5rem 0 0.5rem;
    position: absolute;
    left: -1px;
    bottom: -1px;

}




.project-skill {
    position: relative;
    display: flex;
    margin-left: calc(var(--project-space) * -1);

}

.project-card-action {
    gap: calc(var(--project-space)* 1);
    display: flex;
    align-items: center;
    padding: calc(var(--project-space)*0.8);
    background-color: var(--project-border-color);
    border-radius: 0.5rem;
    border-radius: 0.5rem 0 0.5rem 0;
    position: absolute;
    right: -1px;
    bottom: -1px;

}

.project-redirect-link {
    display: flex;
    align-items: center;
    background: var(--project-bg-color);
    border: 1px solid var(--project-border-color);
    border-radius: 0.5rem;
    padding: var(--project-space) calc(var(--project-space)*1.2);
    gap: calc(var(--project-space)* 1);
}

.animation-project-card-link-slide {
    animation: project-card-link-slide ease-in-out var(--project-footer-animation-time);

}


@keyframes project-card-link-slide {
    0% {
        transform: translate(0, calc(var(--project-footer-height) * -2));

    }

    80% {
        transform: translate(0, 0);
    }

    90% {
        transform: translate(0, calc(var(--project-footer-height) * -0.05));
    }

    100% {
        transform: translate(0, 0);
    }
}

.project-redirect-link-icon {
    display: flex;
    align-items: center;
    aspect-ratio: 1;
}

/* ========================================================
   PREMIUM PAGINATION CONTROLS (PROJECTS, EXPERIENCE & TESTIMONIALS)
   ======================================================== */
.project-pagination-controls,
.ex-pagination-controls,
.testimonials-pagination-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  margin-top: 2rem;
  padding: 1rem 0;
  width: 100%;
}

.project-pagination-btn,
.ex-pagination-btn,
.testimonials-pagination-btn {
  background: var(--project-bg-color, #171719);
  border: 1.5px solid var(--project-border-color, #252527);
  width: 48px;
  height: 48px;
  border-radius: 0.5rem; /* Elegant premium square layout with slightly rounded corners! */
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  outline: none;
}

.project-pagination-btn:hover:not(:disabled),
.ex-pagination-btn:hover:not(:disabled),
.testimonials-pagination-btn:hover:not(:disabled) {
  transform: scale(1.08);
  background: var(--body-text-color, snow);
  border-color: var(--body-text-color, snow);
}

.project-pagination-btn:hover:not(:disabled) .pagination-arrow-icon,
.ex-pagination-btn:hover:not(:disabled) .ex-pagination-arrow-icon,
.testimonials-pagination-btn:hover:not(:disabled) .testimonials-pagination-arrow-icon {
  color: var(--body-color, black) !important;
  stroke: var(--body-color, black) !important;
}

.project-pagination-btn:disabled,
.ex-pagination-btn:disabled,
.testimonials-pagination-btn:disabled {
  opacity: 0.25;
  cursor: not-allowed;
}

.project-pagination-info,
.ex-pagination-info,
.testimonials-pagination-info {
  font-family: "Delius", serif;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--body-text-color, snow);
  min-width: 130px;
  text-align: center;
}

/* Arrow rotation styles using existing span-svg-direct-top-right key layout */
.pagination-arrow-icon,
.ex-pagination-arrow-icon,
.testimonials-pagination-arrow-icon {
  display: block;
  width: 16px;
  height: 16px;
  transition: all 0.3s ease;
  aspect-ratio: 1;
}

.prev-btn .pagination-arrow-icon,
.prev-btn .ex-pagination-arrow-icon,
.prev-btn .testimonials-pagination-arrow-icon {
  transform: rotate(-135deg); /* Point left */
}

.next-btn .pagination-arrow-icon,
.next-btn .ex-pagination-arrow-icon,
.next-btn .testimonials-pagination-arrow-icon {
  transform: rotate(45deg); /* Point right */
}