/* ===========================================
   VIMANA – Services Page
   =========================================== */
:root {
  --primary: #2F5AA8;
  --primary-glow: #4C7BD1;
  --accent: #18A85B;
  --accent-glow: #2CC873;
  --charcoal: #1A2238;
  --charcoal-soft: #3C4666;
  --muted: #6B7391;
  --border: #E5E9F2;
  --bg: #ffffff;
  --soft: #F4F7FB;
  --radius: 1rem;
  --nav-height: 80px;
  --transition: 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  --gradient-brand: linear-gradient(135deg, #2F5AA8 0%, #3F6BC0 45%, #18A85B 100%);
  --gradient-cta: linear-gradient(135deg, #1E3A78 0%, #2F5AA8 50%, #18A85B 100%);
  --gradient-soft: rgba(47, 90, 168, 0.08);
  --shadow-card: 0 8px 30px -12px rgba(26, 34, 56, .12);
  --shadow-card-hover: 0 24px 60px -20px rgba(26, 34, 56, .22);
  --shadow-elegant: 0 20px 60px -20px rgba(47, 90, 168, .35);
  --shadow-glow: 0 0 60px rgba(76, 123, 209, .45);
  --shadow-accent: 0 20px 50px -20px rgba(24, 168, 91, .45);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-size: 16px;
  line-height: 1.65;
  color: var(--charcoal);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.container,
.vmn-container {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
}

/* =========================================================
   1. HERO SECTION
   ========================================================= */
/* =========================================================
   VIMANA PROJECT GALLERY
   Everything is scoped to .vimana-project-gallery
========================================================= */

.vpg-section,
.vimana-project-gallery {
    --vpg-gap: 18px;
    --vpg-max-width: 1440px;

    position: relative;
    width: 100%;
    padding: clamp(72px, 8vw, 112px) 32px clamp(80px, 9vw, 128px);
    background: var(--bg);
    color: var(--charcoal);
}


/* Container */

.vpg-container {
    width: min(100%, var(--vpg-max-width));
    margin: 0 auto;
}


/* =========================================================
   SECTION HEADING
========================================================= */

.vpg-heading-wrap {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: 58px;
}

.vpg-heading-content {
    max-width: 810px;
}

.vpg-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 11px;

    margin-bottom: 18px;

    font-family: inherit;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .18em;
    line-height: 1;

    color: var(--primary);
}

.vpg-eyebrow-line {
    width: 34px;
    height: 2px;
    border-radius: 10px;

    background: var(--accent);
}

.vpg-title {
    margin: 0;

    font-family: inherit;
    font-size: clamp(38px, 5vw, 68px);
    font-weight: 800;
    letter-spacing: -.055em;
    line-height: .98;

    color: var(--charcoal);
}

.vpg-title span {
    color: var(--primary);
}

.vpg-description {
    max-width: 650px;

    margin: 25px 0 0;

    font-family: inherit;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.75;

    color: var(--muted);
}


/* Project Count */

.vpg-heading-meta {
    flex: 0 0 auto;

    display: flex;
    align-items: center;
    gap: 13px;

    padding-bottom: 7px;
}

.vpg-count {
    font-size: 44px;
    font-weight: 800;
    letter-spacing: -.05em;
    line-height: 1;

    color: var(--charcoal);
}

.vpg-count-label {
    font-size: 9px;
    font-weight: 800;
    line-height: 1.45;
    letter-spacing: .13em;

    color: var(--muted);
}


/* =========================================================
   RESPONSIVE CSS GRID
========================================================= */

.vpg-gallery {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--vpg-gap);
    align-items: start;

    width: 100%;
}

.vpg-gallery > .vpg-gallery__item {
    display: block;
    min-width: 0;
    width: 100%;
    aspect-ratio: 4 / 3;
    margin: 0;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--soft);
    cursor: pointer;
}


/* =========================================================
   IMAGE CARD
========================================================= */

.vpg-card {
    position: relative;

    width: 100%;
    height: 100%;

    border-radius: inherit;

    background: var(--soft);

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

    isolation: isolate;

    transform: translateZ(0);

    transition:
        box-shadow .5s cubic-bezier(.2,.75,.25,1),
        transform .5s cubic-bezier(.2,.75,.25,1);
}

.vpg-gallery__item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: inherit;

    transition:
        filter .7s ease;
}

.vpg-item.is-image-error .vpg-card {
    min-height: 180px;
    display: grid;
    place-items: center;
    border: 1px dashed var(--border);
    box-shadow: none;
}

.vpg-item.is-image-error .vpg-card::after {
    content: "Project image unavailable";
    padding: 24px;
    color: var(--muted);
    font-size: 13px;
    text-align: center;
}

.vpg-item.is-image-error .vpg-card img {
    display: none;
}


/* Image gradient */

.vpg-image-overlay {
    position: absolute;
    inset: 0;

    z-index: 1;

    pointer-events: none;

    border-radius: inherit;

    background:
        linear-gradient(
            to bottom,
            rgba(26, 34, 56, 0) 35%,
            rgba(26, 34, 56, .05) 52%,
            rgba(26, 34, 56, .82) 100%
        );

    opacity: 0;

    transition:
        opacity .55s cubic-bezier(.2,.75,.25,1);
}


/* =========================================================
   PROJECT INFO
========================================================= */

.vpg-project-info {
    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    z-index: 3;

    padding: 30px 28px 27px;

    color: #fff;

    transform: translateY(18px);

    opacity: 0;

    transition:
        opacity .45s ease,
        transform .55s cubic-bezier(.2,.75,.25,1);
}

.vpg-project-category {
    margin-bottom: 8px;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: .18em;
    line-height: 1;

    color: rgba(255,255,255,.72);
}

.vpg-project-info h3 {
    margin: 0;

    font-family: inherit;
    font-size: clamp(18px, 1.6vw, 23px);
    font-weight: 700;
    letter-spacing: -.025em;
    line-height: 1.2;

    color: #fff;
}

.vpg-view-project {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    margin-top: 13px;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;

    color: rgba(255,255,255,.82);
}

.vpg-arrow {
    display: inline-flex;

    transition:
        transform .3s ease;
}


/* Expand icon */

.vpg-expand {
    position: absolute;

    top: 18px;
    right: 18px;

    z-index: 4;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    border: 1px solid rgba(255,255,255,.3);
    border-radius: 50%;

    background: rgba(255,255,255,.14);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    color: #fff;

    font-size: 17px;
    line-height: 1;

    opacity: 0;
    transform: translateY(-8px) scale(.9);

    transition:
        opacity .4s ease,
        transform .5s cubic-bezier(.2,.75,.25,1),
        background .3s ease;
}


/* =========================================================
   HOVER
========================================================= */

.vpg-item:hover .vpg-card {
    transform: translateY(-5px);

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

.vpg-item:hover .vpg-card img {
    filter: saturate(1.04);
}

.vpg-item:hover .vpg-image-overlay {
    opacity: 1;
}

.vpg-item:hover .vpg-project-info {
    opacity: 1;
    transform: translateY(0);
}

.vpg-item:hover .vpg-expand {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.vpg-item:hover .vpg-arrow {
    transform: translate(3px, -3px);
}

.vpg-expand:hover {
    background: rgba(255,255,255,.27);
}


/* =========================================================
   LIGHTBOX
========================================================= */

.vpg-lightbox {
    position: fixed;

    inset: 0;

    z-index: 999999;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 40px;

    visibility: hidden;
    opacity: 0;

    pointer-events: none;

    transition:
        opacity .4s ease,
        visibility .4s ease;
}

.vpg-lightbox.is-open {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}


/* Backdrop */

.vpg-lightbox-backdrop {
    position: absolute;
    inset: 0;

    background:
        rgba(10, 16, 29, .88);

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}


/* =========================================================
   LIGHTBOX STAGE
========================================================= */

.vpg-lightbox-stage {
    position: relative;

    z-index: 2;

    display: flex;
    flex-direction: column;
    align-items: center;

    width: min(100%, 1100px);
    max-height: calc(100vh - 80px);

    pointer-events: none;
}

.vpg-lightbox-image-wrap {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    max-height: calc(100vh - 175px);

    pointer-events: auto;
}

.vpg-lightbox-image-wrap img {
    display: block;

    max-width: 100%;
    max-height: calc(100vh - 175px);

    width: auto;
    height: auto;


    border-radius: 10px;

    box-shadow:
        0 35px 100px rgba(0,0,0,.5),
        0 8px 30px rgba(0,0,0,.3);

    opacity: 0;

    transform: scale(.96);

    transition:
        opacity .35s ease,
        transform .45s cubic-bezier(.2,.75,.25,1);
}

.vpg-lightbox.is-open .vpg-lightbox-image-wrap img {
    opacity: 1;
    transform: scale(1);
}


/* =========================================================
   LIGHTBOX CAPTION
========================================================= */

.vpg-lightbox-caption {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 100%;

    padding: 19px 5px 0;

    color: #fff;

    pointer-events: auto;
}

.vpg-lightbox-caption h3 {
    margin: 0;

    font-size: 17px;
    font-weight: 700;
    letter-spacing: -.01em;

    color: #fff;
}

.vpg-lightbox-category {
    position: absolute;

    left: 0;
    bottom: -18px;

    font-size: 8px;
    font-weight: 800;
    letter-spacing: .17em;

    color: rgba(255,255,255,.52);
}

.vpg-lightbox-counter {
    display: flex;
    align-items: center;
    gap: 10px;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;

    color: rgba(255,255,255,.58);
}

.vpg-lightbox-counter span:first-child {
    color: #fff;
}

.vpg-counter-divider {
    width: 25px;
    height: 1px;

    background: rgba(255,255,255,.25);
}


/* =========================================================
   CLOSE BUTTON
========================================================= */

.vpg-lightbox-close {
    position: absolute;

    top: 28px;
    right: 30px;

    z-index: 10;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 48px;
    height: 48px;

    padding: 0;

    border: 1px solid rgba(255,255,255,.2);
    border-radius: 50%;

    background: rgba(255,255,255,.08);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    cursor: pointer;

    transition:
        background .3s ease,
        transform .35s ease,
        border-color .3s ease;
}

.vpg-lightbox-close span {
    position: absolute;

    width: 18px;
    height: 1.5px;

    border-radius: 10px;

    background: #fff;
}

.vpg-lightbox-close span:first-child {
    transform: rotate(45deg);
}

.vpg-lightbox-close span:last-child {
    transform: rotate(-45deg);
}

.vpg-lightbox-close:hover {
    background: rgba(255,255,255,.17);

    border-color: rgba(255,255,255,.35);

    transform: rotate(90deg);
}


/* =========================================================
   PREVIOUS / NEXT
========================================================= */

.vpg-lightbox-nav {
    position: absolute;

    top: 50%;

    z-index: 10;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 54px;
    height: 54px;

    padding: 0;

    border: 1px solid rgba(255,255,255,.2);
    border-radius: 50%;

    background: rgba(255,255,255,.08);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    color: #fff;

    cursor: pointer;

    transform: translateY(-50%);

    transition:
        background .3s ease,
        border-color .3s ease,
        transform .35s cubic-bezier(.2,.75,.25,1);
}

.vpg-lightbox-nav span {
    font-size: 21px;
    font-weight: 300;
    line-height: 1;

    transition:
        transform .3s ease;
}

.vpg-lightbox-prev {
    left: 28px;
}

.vpg-lightbox-next {
    right: 28px;
}

.vpg-lightbox-nav:hover {
    background: rgba(255,255,255,.17);
    border-color: rgba(255,255,255,.35);
}

.vpg-lightbox-prev:hover {
    transform: translate(-4px, -50%);
}

.vpg-lightbox-next:hover {
    transform: translate(4px, -50%);
}


/* =========================================================
   LOADING STATE
========================================================= */

.vpg-lightbox-image-wrap.is-loading::after {
    content: "";

    position: absolute;

    width: 30px;
    height: 30px;

    border: 2px solid rgba(255,255,255,.2);
    border-top-color: #fff;

    border-radius: 50%;

    animation: vpgSpin .7s linear infinite;
}

@keyframes vpgSpin {
    to {
        transform: rotate(360deg);
    }
}


/* =========================================================
   RESPONSIVE — TABLET
========================================================= */

@media (min-width: 768px) and (max-width: 1199px) {

    .vimana-project-gallery {
        padding-inline: 24px;
    }

    .vpg-gallery {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
    }

    .vpg-heading-wrap {
        margin-bottom: 45px;
    }

    .vpg-lightbox {
        padding: 30px;
    }

    .vpg-lightbox-prev {
        left: 15px;
    }

    .vpg-lightbox-next {
        right: 15px;
    }

}

@media (min-width: 1200px) {
    .vpg-gallery {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 22px;
    }
}


/* =========================================================
   RESPONSIVE — MOBILE
========================================================= */

@media (max-width: 767px) {

    .vimana-project-gallery {
        --vpg-gap: 12px;

        padding-inline: 16px;
    }

    .vpg-heading-wrap {
        display: block;

        margin-bottom: 34px;
    }

    .vpg-heading-content {
        max-width: 100%;
    }

    .vpg-eyebrow {
        margin-bottom: 15px;

        font-size: 9px;
    }

    .vpg-eyebrow-line {
        width: 25px;
    }

    .vpg-title {
        font-size: clamp(34px, 10vw, 48px);
        line-height: 1;
    }

    .vpg-description {
        margin-top: 18px;

        font-size: 14px;
        line-height: 1.7;
    }

    .vpg-heading-meta {
        margin-top: 24px;
    }

    .vpg-count {
        font-size: 32px;
    }


    /*
       On touch devices, show the project information
       slightly after interaction / keep it accessible.
    */

    .vpg-project-info {
        padding: 22px 17px 18px;

        transform: translateY(0);
    }

    .vpg-project-info h3 {
        font-size: 15px;
    }

    .vpg-project-category {
        font-size: 7px;
    }

    .vpg-view-project {
        margin-top: 9px;

        font-size: 9px;
    }

    .vpg-expand {
        top: 10px;
        right: 10px;

        width: 31px;
        height: 31px;

        font-size: 14px;
    }

    .vpg-lightbox {
        padding: 65px 14px 35px;
    }

    .vpg-lightbox-stage {
        max-height: calc(100vh - 100px);
    }

    .vpg-lightbox-image-wrap {
        max-height: calc(100vh - 165px);
    }

    .vpg-lightbox-image-wrap img {
        max-height: calc(100vh - 165px);

        border-radius: 7px;
    }

    .vpg-lightbox-close {
        top: 15px;
        right: 15px;

        width: 42px;
        height: 42px;
    }

    .vpg-lightbox-nav {
        top: auto;
        bottom: 25px;

        width: 45px;
        height: 45px;

        transform: none;
    }

    .vpg-lightbox-prev {
        left: 18px;
    }

    .vpg-lightbox-next {
        right: 18px;
    }

    .vpg-lightbox-prev:hover,
    .vpg-lightbox-next:hover {
        transform: none;
    }

    .vpg-lightbox-caption {
        padding-top: 15px;
    }

    .vpg-lightbox-caption h3 {
        font-size: 14px;

        max-width: 65%;
    }

    .vpg-lightbox-counter {
        font-size: 9px;
    }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 430px) {
    .vpg-title {
        font-size: 37px;
    }

    .vpg-description {
        font-size: 13px;
    }

}

/* =========================================================
   ACCESSIBILITY / REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .vimana-project-gallery *,
    .vimana-project-gallery *::before,
    .vimana-project-gallery *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }

}
/*************************************/
@media (max-width: 480px) {
  .container,
  .vmn-container {
    padding: 0 16px;
  }

}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  [data-animate] {
    opacity: 1;
    transform: none;
  }
}