:root {
    /* Colors variable */
    --black: rgb(0, 0, 0);
    --darker-blue: rgb(5, 5, 29);
    --dark-blue: rgb(12, 12, 70);
    --light-blue: rgb(13, 100, 176);
    --lighter-blue: rgb(180, 220, 255);
    --gray: rgb(167, 167, 167);
    --light-gray: rgb(210, 210, 210);
    --lighter-gray: rgb(243, 243, 243);
    --off-white: rgb(252, 252, 252);
    --white: rgb(255, 255, 255);
  
    --primary-color: #0B151E;
    --secondary-color: #A2A2A2;
    --modal-background: #554806;
    --text-color: #F3F3E8;

    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);

    --green: rgba(125.001, 211.9968, 0, 1);
    --text-gray: rgba(
      173.99669999999998,
      173.99669999999998,
      173.99669999999998,
      1
    );
  
    /* font family variable */
    --font-1: ;
    --font-2: ;
    --font-3: ;
    /* UI element  variable */
  }
  
  @font-face {
    font-family: "Bahnschrift";
    src: url("../fonts/bahnschrift-regular.ttf") format("truetype");
  }
  
/* ======= Reset CSS ======= */

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}
/* Set core body defaults */
/* Improve media defaults */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

/* Remove built-in form typography styles */
input,
button,
textarea,
select {
  font: inherit;
}

/* Avoid text overflows */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

/* Remove list styles */
ul,
ol {
  list-style: none;
}

/* Reset links */
a {
  text-decoration: none;
  color: inherit;
}

/* ======= Custom CSS ======= */
.d-none{
    display: none !important;
}
body {
    font-family: 'Bahnschrift', sans-serif;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    background-color: var(--primary-color);
    color: var(--text-color);
    letter-spacing: 0.5px;
    font-weight: 700;
    font-size: 12px !important;
}


.hero{
    width: 100%;
    /* min-height: 100vh; */
}

.container {
    padding: 20px;
    margin: 0 auto;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
.homepage .container{
    padding: 20px 10px !important;
}

/* Row Styles */
/* .wm-row {
    display: flex;
    width: 100%;
    gap: 8px;
    justify-content: space-between;
}

.wm-row-top {
    justify-content: flex-start;
    margin-bottom: auto;
}

.wm-row-bottom {
    justify-content: flex-start;
    margin-top: auto;
    align-items: flex-end;
} */

/* Image Items */
.image-item {
    position: relative;
    width: calc((100% - 40px) / 5) ;
    height: 280px;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    flex-shrink: 0;
}


/* Varied thumbnail sizing (row 1 & 3) */



.wm-row-top .image-item,
.wm-row-bottom .image-item,
.wm-row-middle > * {
    opacity: 0.001;
    will-change: transform, opacity;
}

.wm-row-top .image-item,
.wm-row-bottom .image-item {
    width: auto;
    flex: 1 0 var(--w, calc((100% - 40px) / 5));
    height: var(--h, 280px);
}

/* Row 1: 5 items, varied ratios (tweak these to match your exact screenshot) */
.wm-row-top .image-item:nth-child(1) { --w: 18%; --h: 128px; }
.wm-row-top .image-item:nth-child(2) { --w: 25%; --h: 210px; }
.wm-row-top .image-item:nth-child(3) { --w: 14%; --h: 136px; }
.wm-row-top .image-item:nth-child(4) { --w: 25%; --h: 210px; }
.wm-row-top .image-item:nth-child(5) { --w: 18%; --h: 178px; } 


/* Row 3: 5 items, varied ratios (tweak these to match your exact screenshot) */

.wm-row-bottom .image-item:nth-child(1) { --w: 28%; --h: 296px; }
.wm-row-bottom .image-item:nth-child(2) { --w: 14%; --h: 135px; }
.wm-row-bottom .image-item:nth-child(3) { --w: 28%; --h: 246px; }
.wm-row-bottom .image-item:nth-child(4) { --w: 16%; --h: 206px; }
.wm-row-bottom .image-item:nth-child(5) { --w: 14%; --h: 133px; } 


/* Grid layout for precise control */
.wm-row-top {
    display: grid;
    grid-template-columns: 18fr 24fr 14fr 24fr 18fr;
    gap: 8px;
    align-items: start;
    margin-bottom: auto;
}
.wm-row-bottom {
    display: grid;
    grid-template-columns: 28fr 14fr 26fr 16fr 14fr;
    gap: 8px;
    align-items: end;
    margin-top: auto;
}


.image-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* BOTH images stacked */

 /* .image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity 0.7s ease-in-out,
                transform 0.7s ease-in-out;
    will-change: opacity, transform;
}

.image-wrapper .item-gif,
.image-wrapper .item-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.7s ease-in-out,
                transform 0.7s ease-in-out;

    will-change: opacity, transform;
}  */

/* Default states */

 /* .image-wrapper > img:not(.item-gif) {
    opacity: 1;
    transform: scale(1);
    z-index: 1;
}

.image-wrapper .item-gif,
.image-wrapper .item-video {
    opacity: 0;
    transform: scale(1.03);
    z-index: 2;
    pointer-events: none;
}  */

/* Hover state */
 /* .image-item:hover .image-wrapper > img:not(.item-gif) {
    opacity: 0;
    transform: scale(1.03);
}  */

/* .image-item:hover .item-gif,
.image-item:hover .item-video {
    opacity: 1;
    transform: scale(1);
}  */

 
      /* Base thumbnail */
      .image-wrapper > img.thumb {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: 1;
        /* thumbnail stays, no scale on it */
        transition: none;
      }
    /* ─── COLOR OVERLAY ─── */
      .image-wrapper .color-overlay {
        position: absolute;
        inset: 0;
         /* background: linear-gradient(135deg, #1a1aff88 0%, #ff1a6688 100%);  */
         background: linear-gradient(135deg, #0b151e 0%, #14293b 100%); 

        z-index: 2;
        opacity: 0;
        /* slow reveal of the overlay */
        transition: opacity 1.2s ease;
        pointer-events: none;
      }
     
      .image-wrapper .item-gif {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: 3;
        opacity: 0;
        /* GIF fades in AFTER overlay starts — delayed + slower */
        transition: opacity 0.8s ease 0.6s;
        pointer-events: none;
      }

   /* ─── Hover triggers ─── */
      .image-item:hover .color-overlay {
        opacity: 1;
      }

      .image-item:hover .item-gif {
        opacity: 1;
      }



    /* ─── VARIANT B: blur + overlay (no gif, just overlay effect) ─── */
      .image-item.blur-variant .image-wrapper > img.thumb {
        transition:
          filter 1.2s ease,
          transform 1.4s ease;
        filter: blur(0px);
        transform: scale(1);
      }

      .image-item.blur-variant:hover .image-wrapper > img.thumb {
        filter: blur(3px);
        transform: scale(1.05);
      }

/* new on hover reveal effect */

      /* ─── GIF on top ─── */

      /*
      .image-wrapper .item-gif {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: 3;
        opacity: 0;
        transition: opacity 0.8s ease 0.6s;
        pointer-events: none;
      }
      .image-wrapper > img.thumb {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: 1;
        transition: none;
      }
      .image-item:hover .item-gif {
        opacity: 1;
      }
      .image-item.wipe-variant .item-gif {
        opacity: 1;
        clip-path: inset(0 100% 0 0);
        transition: clip-path 1.1s cubic-bezier(0.77, 0, 0.175, 1) 0.15s;
      }

      .image-item.wipe-variant .color-overlay {
        display: none;
      }

      .image-item.wipe-variant:hover .item-gif {
        clip-path: inset(0 0% 0 0);
      }
    */

/* Gray Overlay Effect */
.container.hover-active .image-item:not(:hover) {
    /* filter: grayscale(100%) brightness(0.7); */
    opacity: 0.7;
}

.container.hover-active .image-item:not(:hover)::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background-color: rgba(255, 255, 255, 0.6); */
    /* background-color:  rgba(0, 0, 0, 0.6); */
    background-color: rgba(11, 21, 30, 0.6);
    z-index: 1;
    opacity: 0.6;
}

/* Project Name on Hover - Center of Screen */
.project-name {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    font-size: 24px;
    font-weight: 400;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--text-color);
    z-index: 100;
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    text-align: center;
    white-space: nowrap;
    display: none;
}

 .image-item:hover .project-name {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}   

/* Middle Row - 4 Columns */
.wm-row-middle {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr ;
    gap: 40px;
    align-items: center;
    /* padding: 80px 0; */
    /* min-height: 300px; */
    position: relative;
    z-index: 10;
}

.menu-col-root{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.middle-column {
    display: flex;
    gap: 8px;
}

/* Menu Column */

.wm-logo{
    width: 370px;
    height: 55px;
    object-fit: contain;

}
.menu-column {
    align-items: flex-start;
}

.wm-menu {
    display: flex;
    flex-direction: column;
    gap: 0px;
}
.phone-bottom-nav {
    position: fixed;
    left: 8%;
    right: 8%;
    bottom: 5%;
    display: none;
}
.phone-bottom-nav .wm-menu{
    display: flex;
    gap: 25px;
    flex-direction: row;
    justify-content: space-between;

}

.menu-item {
    text-decoration: none;
    color: var(--secondary-color);
    font-size: 12px;
    text-transform: uppercase;
    transition: opacity 0.3s ease;
    font-weight: 700;
    letter-spacing: 0.1px;
}
.phone-bottom-nav .menu-item {
    color: #C0C0C0;
}

.menu-item:hover {
    opacity: 0.6;
}
.menu-item.active {
    font-weight: 700;
    color: #FAF8EE;
}

/* Project Name Column */
.project-name-column {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    opacity: 1;
    padding-right: 50px;

}

/* .current-project-name {
    transform: scale(0);
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
} */

.homepage .project-status {
    width: 17px;
    height: 17px;
    background-color: var(--text-color);
    clip-path: circle(50%); 
    border-radius: 50%;
    opacity: 0;    
    display: block;
    flex-shrink: 0;
  }

.homepage .project-status.is-hovered {
  animation: dotFadeIn 0.4s ease forwards;
}

.homepage .project-status.is-leaving {
  animation: dotFadeOut 0.4s ease forwards;
}

@keyframes dotFadeIn {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes dotFadeOut {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}

.current-project-name {
     position: absolute;
    top: 10%;
    left: 30px;  
    opacity: 0;
    pointer-events: none;
    text-transform: uppercase;
    text-align: center;
    white-space: nowrap;
}

  .current-project-name.is-project-active{
    opacity: 1;
}

  .current-project-name.is-name-leaving {
    opacity: 0;
}  

/* Show when ANY image-item is hovered */
.container:has(.image-item:hover) .current-project-name {
    opacity: 1;
}

 .image-item:hover .current-project-name {
    opacity: 1;
}    

/* Logo/Tagline Column */
.logo-column {
    align-items: center;
    justify-content: center;
}

.logo-tagline {
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    line-height: 120%;
}

/* View Column */
.view-column {
    align-items: flex-end;
    justify-content: end;
}

.view-list-btn {
    text-decoration: none;
    color: var(--secondary-color);
    text-transform: uppercase;
    transition: opacity 0.3s ease;
    font-weight: 700;
}

.view-list-btn:hover {
    opacity: 0.6;
}

/* ======== Modal Styles ======= */

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0.9);
    /* background-color: #554806cc; */
    text-align: center;
    z-index: 11;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
  }
.modal {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    z-index: 100;
    justify-content: center;
    align-items: center;
    pointer-events: none;
    /* overflow-y: auto; */
    padding: 40px;
    color: var(--text-color);
   
}



.modal-content {
    font-weight: 700;
    text-transform: uppercase;
    position: relative;
    width: 100%;
    /* max-width: 1600px; */
    max-width: 1728px;
    margin: 0 auto;
    padding: 0;
    display: flex;
    flex-direction: column;
    /* gap: 0;
    transform: scale(0.7);
    transform-origin: center center;
    transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
    height: 100vh; */


    z-index: 12;
    opacity: 0;
    /* Remove fixed height to allow content to flow */
    max-height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    transform-origin: center center;
    /* Add pointer events so scrolling works */
    pointer-events: auto;
    scroll-behavior: smooth;
    /* scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.3) transparent; */
    /* Hide scrollbar for all browsers */
    scrollbar-width: none; 
    -ms-overflow-style: none;
    
}

.modal-content::-webkit-scrollbar {
    display: none;
  }

/* .modal.active .modal-content {
    transform: scale(1);
} */

.modal-close {
    position: fixed;
    top: 50px;
    right: 50px;
    font-size: 48px;
    color: #fff;
    cursor: pointer;
    z-index: 1001;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease;
    background-color: transparent;
    border: none;
}

.modal-close:hover {
    opacity: 0.6;
}
 .contact-modal-close{
    /* transition: opacity 0.3s ease; */
    opacity: 1;
    cursor: pointer;
    display: block;
}

.back-to-home{
    position: fixed;
    left: 0;
    right: 0;
    bottom: 4%;
    text-align: center;
    z-index: 1001;
    opacity: 0;
    transition: opacity 0.6s ease, transform 0.6s ease;
    will-change: opacity, transform;
    cursor: pointer;
    pointer-events: auto;
    display: none;    
}

.modal-header {
    display: flex;
    justify-content: center;
    /* padding: 40px 60px;
    height: 100%; */
    
}
.modal-header .logo-tagline{
    color: var(--text-color);
}
.wm-header .logo-tagline{
    text-align: end !important;
}

.modal-title {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.modal-name {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-color);
}

.modal-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    color: #fff;
}

.modal-year {
    font-size: 12px;
    font-weight: 400;
    text-transform: uppercase;
    color: #fff;
}

.modal-credits {
    font-size: 12px;
    font-weight: 400;
    text-transform: uppercase;
    color: #fff;
}

.modal-media {
    position: relative;
    width: 100%;
    height: auto;
    min-height: 600px;
    max-height: 900px;
    /* background-color: rgba(0, 0, 0, 0.5); */
    /* background-color: rgba(11, 21, 30, 0.9); */
    background-color: rgba(0,0, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.modal-image,
.modal-video {
    width: 100%;
    height: auto;
    /* max-height: 80vh; */
    object-fit: contain;
}

.modal-video {
    display: none;
}

.modal-video.active {
    display: block;
}
.modal-description {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 40px 20px;
    gap: 150px;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
}

.credits-desc{
    padding-bottom: 30px;
}

.mobile-view {
    display: none !important;
}
 .desktop-view {
    display: block !important;
}

/* sticky header css with smooth animation   */
/* .sticky-header {
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 100;
    transition: all 0.3s ease;
} */

/* .wm-header {
    width: 100%;
    z-index: 10;
    
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;

}

.wm-header.sticky-header {
    position: sticky;
    top: 0;
    transform: translateY(0);
    width: 100%;
    z-index: 10;
    transition: all 0.3s ease;
    background-color: var(--primary-color);
    padding: 10px 0;
} */

/* ==== new */

/* Make the actual header wrapper sticky, not the logo div */
.wm-header {
    position: sticky;
    top: 15px;
    z-index: 1;
    transition:   padding 0.3s ease;
}

/* Logo shrinks on scroll */
.wm-logo img {
    transition:  0.35s cubic-bezier(0.4, 0, 0.2, 1);
    /* width: 180px; */
}

.wm-logo.sticky-header {
    padding: 10px 0;
}

/* Initial state - larger padding */
.menu-col-root {
    transition: padding 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Sticky state - smaller padding */
.wm-header.sticky-header .menu-col-root {
    padding: 15px 0;
}

/* ====== Archive page style ====== */

.archive-list{
    padding: 50px 0;
    font-size: 12px;
    width: 80vw;
}

.archive-item {
    display: grid;
    grid-template-columns: 350px 1fr ;
    align-items: center;
    gap: 100px;
    padding: 25px 0;
    text-transform: uppercase;
    /* border-top: 1px solid #000; */
    cursor: pointer;
    transition: opacity 0.3s ease;
}

.archive-item:last-child {
    border-bottom: none;
}
.archive-item-col-2 {
    display: flex;
    gap: 100px;
    justify-content: space-between;
}

.project-image {
    width: 400px;
    height: auto;
    object-fit: cover;
    transition: transform 0.4s ease, opacity 0.3s ease;

}
.archive-item:hover .project-image {
    transform: scale(1.03);
    opacity: 0.85;
}
/* ====== Photography page style New ====== */

/* ─── GRID ────────────────────────────────── */
      .gallery-grid-wrap {
        padding: 100px 40px 60px;
      }
      .gallery-grid {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 60px;
      }
   
      .grid-item {
        position: relative;
        overflow: hidden;
        cursor: pointer;
        aspect-ratio: 16 / 10;
      }
      .grid-item::after {
        content: "";
        position: absolute;
        inset: 0;
      }

      .grid-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform 0.6s var(--ease-out-expo);
      }
      .grid-item:hover img {
        transform: scale(1.05);
      }

      /* ─── LIGHTBOX OVERLAY ────────────────────── */
      .lb-overlay {
        position: fixed;
        inset: 0;
        z-index: 999 !important;
        background: rgba(0, 0, 0, 0.9) !important;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.4s ease;
        backdrop-filter: blur(4px);
      }
      .lb-overlay.open {
        opacity: 1;
        pointer-events: all;
      }

      /* ─── CLOSE ───────────────────────────────── */
      .lb-close {
        position: absolute;
        /* top: 28px;
        right: 36px; */
        top: 15%;
        right: 17%;
        font-size: 22px;
        font-weight: normal !important;
        color: #fff;
        cursor: pointer;
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition:
          color 0.2s;
        user-select: none;
        z-index: 10;
        line-height: 1;
      }
      .lb-close:hover {
        color: #fff;
      }

      /* ─── STAGE: prev thumb | main image | next thumb ── */
      .lb-stage {
        position: relative;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        touch-action: pan-y;
        user-select: none;
      }

      /* ─── SIDE THUMBNAILS ─────────────────────── */
      .lb-side {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        /* width: clamp(80px, 11vw, 140px); */
        cursor: pointer;
        z-index: 5;
        transition: opacity 0.3s ease;
      }
      .lb-side.prev {
        left: 0px;
      }
      .lb-side.next {
        right: 0px;
      }
      .lb-side-inner {
        position: relative;
        overflow: hidden;
      }
      .lb-side img {
        /* width: 100%; */
        width: 250px;
        height: 160px;
        /* aspect-ratio: 16 / 10; */
        object-fit: cover;
        display: block;
      }
      .lb-side-label {
        font-size: 8px;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.3);
        margin-top: 6px;
        text-align: center;
        display: none;
      }
      .lb-side.hidden {
        opacity: 0;
        pointer-events: none;
      }

      /* ─── MAIN IMAGE TRACK (for drag/slide) ───── */
      .lb-track {
        position: relative;
        width: clamp(300px, 65vw, 820px);
        max-height: 78vh;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 2;
      }

      /* Individual slide cards */
      .lb-slide {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .lb-slide img {
        /* max-width: 100%; */
        width: 100%;
        max-height: 78vh;
        object-fit: contain;
        display: block;
        user-select: none;
        -webkit-user-drag: none;
      }

      /* Animated states */
      .lb-slide {
        transition:
          transform 0.45s var(--ease-out-expo),
          opacity 0.45s ease;
      }
      .lb-slide.state-center {
        transform: translateX(0) scale(1);
        opacity: 1;
        z-index: 3;
      }
      .lb-slide.state-left {
        transform: translateX(-110%) scale(0.88);
        opacity: 0;
        z-index: 1;
      }
      .lb-slide.state-right {
        transform: translateX(110%) scale(0.88);
        opacity: 0;
        z-index: 1;
      }
      .lb-slide.state-hidden {
        opacity: 0;
        z-index: 0;
        pointer-events: none;
      }

      /* During drag */
      .lb-slide.dragging {
        transition: none !important;
      }


      @media (max-width: 900px) {
        .gallery-grid {
          grid-template-columns: repeat(3, 1fr);
        }
      }
      @media (max-width: 768px) {
        .gallery-grid {
          grid-template-columns: 1fr;
          gap: 20px;
        }
        .gallery-grid-wrap {
          padding: 20px 0 60px 0;
        }

        .lb-side img {
          display: none;
        }
      }

/* ====== Photography page style ====== */

.photography-gallery{
    padding: 50px 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center; 
    /* max-width: 1728px;
    margin: 0 auto;
    display: grid;
     grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));  */
    gap: 60px;
    /* transition:  transform 0.3s ease; */
    cursor: pointer;
}

    .photography-gallery-item img {
        width: 270px;
        height: 180px;
        object-fit: cover;
        display: block;
        transition: transform 0.3s ease;
      }

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

      /* Lightbox Modal */
      .lightbox {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.4);
        z-index: 9999;
        align-items: center;
        justify-content: center;
        padding: 20px;
        animation: fadeIn 0.3s ease;
      }

      .lightbox.active {
        display: flex;
      }

      @keyframes fadeIn {
        from {
          opacity: 0;
        }
        to {
          opacity: 1;
        }
      }

      .lightbox-content {
        max-width: 98%;
        max-height: 98%;
        position: relative;
        animation: scaleIn 0.3s ease;
      }

      @keyframes scaleIn {
        from {
          transform: scale(0.9);
          opacity: 0;
        }
        to {
          transform: scale(1);
          opacity: 1;
        }
      }

      .lightbox-content img {
        
        max-width: 100%;
        /* max-height: calc(100vh - 40px); */
        /* width: 600px; */
        height: auto;
        display: block;
      }

      .lightbox-close {
        position: absolute;
        top: -50px;
        right: -45px;
        width: 45px;
        height: 45px;
        border: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
        z-index: 10000;
        background: transparent;
      }

      .lightbox-close:hover {
        transform: rotate(90deg);
      }

      .lightbox-close::before,
      .lightbox-close::after {
        content: "";
        position: absolute;
        width: 22px;
        height: 2.5px;
        background: white;
      }

      .lightbox-close::before {
        transform: rotate(45deg);
      }

      .lightbox-close::after {
        transform: rotate(-45deg);
      }

/* ==== Contact Modal Style ==== */

.contact-modal{
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
    /* padding: 40px; */
    color: var(--text-color);
    text-transform: uppercase;
}

.contact-modal.active {
    align-items: center;
    justify-content: center;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    /* background-color: rgba(0, 0, 0, 0.9); */
}

.c-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--modal-background);
    z-index: 999;
    opacity: 0.75;
}
.contact-modal-content {
    position: relative;
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 0;
    display: flex;
    flex-direction: column;
    transform: scale(0.7);
    transform-origin: center center;
    transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
    padding: 40px;
    gap: 50px;
    height: 100vh;
    justify-content: space-between;
    
}

.c-modal-description {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 150px;
    color: var(--text-color);
    text-align: center;
    font-size: 12px;
    font-weight: 700;
}
.contact-details{
    max-width: 600px;
    margin: 0 auto;
}

 #contactModal.active{
    align-items: center;
    justify-content: center;
     background-color: #0B151ECC !important; 
    /* opacity: 0.75; */

}

.contact-modal.active .contact-modal-content {
    transform: scale(1);
}



/* ======= End of CSS ======= */


.modal-header,
.modal-description {
  opacity: 0;
  transition: opacity 0.6s ease, transform 0.6s ease;
  will-change: opacity, transform;
}
.modal-header {
  display: none;
}

/* STICKY HEADER - Separate from modal content, fixed at window top */
.modal-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 30px 60px;

  z-index: 1002;
  pointer-events: none;
}

.contact-modal-header, .about-img{
    margin: 0 auto;
}
 .contact-modal-close{
        padding-bottom: 40px;
 }



/* ======= Media Queries ======= */


@media (max-width: 767px) {
    .project-status{
        display: none !important;
    }

    .wm-d-none{
        display: none !important;
    }
    body{
        overflow-y: auto !important;
    }

    body.is-item-open {
        overflow-y: hidden !important;
    }
    .phone-bottom-nav{
        display: block;
    }
    .archive-list {
        padding: 0 0;
        width: 100%;

    }
    .wm-logo{
        width: 200px;
        height: 30px;
    }

    .menu-column,.view-column{
        display: none;
    }
    
   .wm-row-middle {
        gap: 20px;
        padding:  0 !important;
        min-height: auto !important;
        margin-bottom: 40px;
    }
    
 
    .wm-row {
        flex-direction: column;
        gap: 20px;
        /* padding: 0px 20px; */
    }
   .mobile-view  .image-item {
        /* height: auto !important;
        width: 100% !important; */
        width: auto;
       height: auto; 

    }
     .mobile-view  .image-item:first-child{
         /* margin-top: -120px; */
         padding-top: 120px;
     }
    .mobile-view .image-item{
        margin: 0 0 120px 0;
    }
    .mobile-view .image-item img {
        /* width: auto !important; */
        margin: 0 auto;
        height: auto;
        width: auto !important;

    }
    .project-name{
        display: block;
    }

    .image-item .middle-column{
        justify-content: center;
        padding-top: 10px;
    }

    .menu-col-root .project-name-column{
        /* display: none; */
        display: block;

    }

    .modal-media{
        min-height: 270px;
    }
  .mobile-view {
        display: block !important;
    }
   .desktop-view {
        display: none !important;
    }

    .archive-item {
        grid-template-columns: 1fr 2fr ;
        gap: 20px;
    }
    .archive-item:last-child{
    margin-bottom: 40px;
    }
   
    .archive-item-col-2 {
        gap: 20px !important;
        justify-content: space-between;
    }


    /* Base styles for image items */
    .image-item {
        position: relative;
        cursor: pointer;
        /* will-change: transform, opacity; */
        /* opacity: 0; */
        /* transform: translateY(60px) scale(0.95); */


        /* css for card phone animation */

        transition: none;
    }

    /* Ensure smooth transitions */

    .wm-row-top .image-item,
    .wm-row-bottom .image-item,
    .wm-row-middle > * {
        opacity: 1;
    }


    .image-item .image-wrapper {
        overflow: hidden;
        /* transition: box-shadow 0.3s ease; */
        height: auto;
    }


    .image-wrapper img{
        transition: none !important;
        width: 100%;
        height: 300px;
        object-fit: cover;

    }

    /* Project name styling */
    .current-project-name-X {
        transition: color 0.3s ease, transform 0.3s ease;
    }

    .image-item:hover .current-project-name-X {
        transform: translateX(5px);
    }

    /* Optimize for performance */
    .wm-row {
        transform: translateZ(0);
        backface-visibility: hidden;
        padding-bottom: 130px;
    }

    /* .image-item:hover .image-wrapper img {
        opacity: 1;
    } */

    .contact-modal-content{
        padding: 40px 20px;
    }
    .contact-modal-close{
        padding-bottom: 20px;
    }

    .modal-description{
        gap: 80px;
        padding: 40px 10px;
    }



    /* ====== Photography page style ====== */


        .photography-gallery {
          /* grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); */
          gap: 30px;
        }
        .photography-gallery{
          padding: 0;
        }
        .photography-gallery-item:last-child{
            padding-bottom: 60px;
        }
         .photography-gallery-item img {
            width: 300px;
        }

        .lightbox {
          padding: 20px;
        }
         .lightbox-close{
          right: -20px;
         }


    .image-wrapper .item-video,
    .image-wrapper .item-gif {
        display: none !important;
    }
     /* Prevent mobile hover/focus bug */
    .image-item:hover .image-wrapper > img,
    .image-item:focus .image-wrapper > img,
    .image-item:active .image-wrapper > img {
        opacity: 1 !important;
        transform: none !important;
    }

    /* .image-item:hover .item-video,
    .image-item:hover .item-gif {
        opacity: 0 !important;
    } */


}