@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

:root {
    --lz-primary: #8EC741;
    --lz-secondary: #196299;
}

.poppins-thin {
  font-family: "Poppins", sans-serif;
  font-weight: 100;
  font-style: normal;
}

.poppins-extralight {
  font-family: "Poppins", sans-serif;
  font-weight: 200;
  font-style: normal;
}

.poppins-light {
  font-family: "Poppins", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.poppins-regular {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.poppins-medium {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.poppins-semibold {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-style: normal;
}

.poppins-bold {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.poppins-extrabold {
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-style: normal;
}

.poppins-black {
  font-family: "Poppins", sans-serif;
  font-weight: 900;
  font-style: normal;
}

.poppins-thin-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 100;
  font-style: italic;
}

.poppins-extralight-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 200;
  font-style: italic;
}

.poppins-light-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 300;
  font-style: italic;
}

.poppins-regular-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.poppins-medium-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-style: italic;
}

.poppins-semibold-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-style: italic;
}

.poppins-bold-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-style: italic;
}

.poppins-extrabold-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-style: italic;
}

.poppins-black-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 900;
  font-style: italic;
}

*{
    font-family: "Poppins", "Inter", sans-serif;
}

.bg-primary{
    background: var(--lz-primary);
}

.bg-secondary{
    background: var(--lz-secondary);
}

.inter{
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

.header::before{
    content: "";
    width: 6px;
    height: 100%;
    left: 0;
    top: 0;
    position: absolute;
    background: var(--lz-primary);
}

.lz-carousel-item{
    max-height: 340px;
    min-height: 340px;
    overflow: hidden;
}

.lz-carousel-item img{
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.lz-carousel-indicators .lz-carousel-indicator{
    background: var(--lz-slate-50);
}

.lz-carousel-indicators .lz-carousel-indicator.active{
    background: var(--lz-primary);
}

@media (min-width: 641px) {
    .lz-carousel-item {
        flex: 0 0 calc(50% - (var(--lz-space-4) / 2));
        min-height: 420px;
        max-height: 420px;
    }
}

@layer components.carousel {
    /* Flex container for side-by-side layout + gap */
    .lz-carousel-track {
        display: flex;
        gap: var(--lz-space-4); /* adjust this for bigger/smaller gap */
        /* optional: align-items: center; */
    }

    /* Base: make each item span full width */
    .lz-carousel-item {
        flex: 0 0 100%;  
    }

    /* Desktop: two items visible, each takes half minus half the gap */
    @media (min-width: 641px) {
        .lz-carousel-item {
            flex: 0 0 calc(50% - (var(--lz-space-4) / 2));
            min-height: 520px;
            max-height: 520px;
        }
    }

    /* Your existing show/hide logic still works */
    .lz-carousel-item {
        display: none;
    }
    .lz-carousel-item.active {
        display: block; /* flex children respect this */
    }
}

.lz-project-grid {
    /* two “masonry” columns */
    column-count: 2;
    column-gap: var(--lz-space-4);       /* horizontal gap */
}

@media (min-width: 641px) {
    .lz-project-grid {
        /* two “masonry” columns */
        column-count: 3;
    }
}

@media (min-width: 729px) {
    .lz-project-grid {
        /* two “masonry” columns */
        column-count: 4;
    }
}


.lz-project-item {
    break-inside: avoid-column;          /* keep each item intact in a column */
    margin-bottom: var(--lz-space-4);
    height: auto;    /* vertical gap = same size */
}

.lz-project-item img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--lz-rounded-md);
}

/* start hidden off-screen right */
.navbar-collapse {
  transform: translateX(100%);
  transition: transform 0.3s ease-in-out;
}

/* when this class is on, menu is full-screen and visible */
.navbar-collapse.open {
  transform: translateX(0);
}

#lightbox {
    transition: opacity 0.3s ease;
}
#lightbox.d-none {
    opacity: 0;
    pointer-events: none;
}
#lightbox.d-flex {
    opacity: 1;
    pointer-events: all;
}

.nav-items {
  position: relative;           /* establish positioning context */
  display: inline-block;        /* so width shrinks to content */
  cursor: pointer;
}

.nav-items::before {
  content: "";
  position: absolute;
  bottom: -8px;                    /* sit at the bottom of the nav item */
  left: 0;                      /* start on the left edge */
  width: 0;                     /* hidden by default */
  height: 2px;                  /* thickness of the underline */
  background-color: currentColor;
  transition: width 0.3s ease;  /* animate width expansion */
}

.nav-items:hover::before {
  width: 100%;                  /* grows to full width on hover */
}

.scroll-top-button {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: white;
  border: none;
  box-shadow: 0 0 10px rgba(0,0,0,0.15);
  cursor: pointer;
  z-index: 999;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.scroll-top-button svg.arrow-icon {
  position: absolute;
  z-index: 2;
  width: 24px;
  height: 24px;
}

.scroll-top-button .scroll-circle {
  position: absolute;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  z-index: 1;
}

.scroll-top-button .scroll-circle circle {
  fill: none;
  stroke-width: 6;
  cx: 50;
  cy: 50;
  r: 45;
}

.scroll-top-button .scroll-circle .track {
  stroke: #eee;
}

.scroll-top-button .scroll-circle .progress {
  stroke: #000;
  stroke-dasharray: 283; /* 2πr ≈ 2 * 3.14 * 45 */
  stroke-dashoffset: 283;
  transition: stroke-dashoffset 0.2s ease;
}