.elementor-906 .elementor-element.elementor-element-6addbc3{--display:flex;--min-height:550px;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--gap:10px 10px;--row-gap:10px;--column-gap:10px;--overlay-opacity:0.39;--border-radius:0px 0px 50px 50px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-906 .elementor-element.elementor-element-6addbc3:not(.elementor-motion-effects-element-type-background), .elementor-906 .elementor-element.elementor-element-6addbc3 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://kamberconstruction.com.au/wp-content/uploads/2025/11/KamberBlakehurstProject-sydney.jpg");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-906 .elementor-element.elementor-element-6addbc3::before, .elementor-906 .elementor-element.elementor-element-6addbc3 > .elementor-background-video-container::before, .elementor-906 .elementor-element.elementor-element-6addbc3 > .e-con-inner > .elementor-background-video-container::before, .elementor-906 .elementor-element.elementor-element-6addbc3 > .elementor-background-slideshow::before, .elementor-906 .elementor-element.elementor-element-6addbc3 > .e-con-inner > .elementor-background-slideshow::before, .elementor-906 .elementor-element.elementor-element-6addbc3 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:#0A2B46;--background-overlay:'';}.elementor-906 .elementor-element.elementor-element-07ba433{width:100%;max-width:100%;text-align:center;}.elementor-906 .elementor-element.elementor-element-07ba433 .elementor-heading-title{font-family:"Bricolage Grotesque", Sans-serif;font-size:82px;font-weight:600;line-height:82px;color:var( --e-global-color-e06cfc9 );}.elementor-906 .elementor-element.elementor-element-6944f7c{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:center;--gap:30px 25px;--row-gap:30px;--column-gap:25px;--overflow:hidden;--border-radius:0px 0px 70px 70px;--padding-top:100px;--padding-bottom:150px;--padding-left:10px;--padding-right:10px;--z-index:4;}.elementor-906 .elementor-element.elementor-element-6944f7c:not(.elementor-motion-effects-element-type-background), .elementor-906 .elementor-element.elementor-element-6944f7c > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-906 .elementor-element.elementor-element-2b654cd{text-align:center;}.elementor-906 .elementor-element.elementor-element-2b654cd .elementor-heading-title{font-family:"Plus Jakarta Sans", Sans-serif;font-size:20px;font-weight:600;text-transform:uppercase;line-height:20px;letter-spacing:2px;color:#5199D3;}.elementor-906 .elementor-element.elementor-element-3023c8e{width:var( --container-widget-width, 1200px );max-width:1200px;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 60px) 0px;--container-widget-width:1200px;--container-widget-flex-grow:0;text-align:center;}.elementor-906 .elementor-element.elementor-element-3023c8e .elementor-heading-title{font-family:"Plus Jakarta Sans", Sans-serif;font-size:58px;font-weight:600;line-height:70px;letter-spacing:-1px;color:var( --e-global-color-primary );}.elementor-906 .elementor-element.elementor-element-34e4290{--grid-columns:3;}.elementor-906 .elementor-element.elementor-element-3862ee8{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-906 .elementor-element.elementor-element-0651c56{--display:flex;--min-height:600px;--justify-content:flex-end;--align-items:stretch;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--border-radius:35px 35px 35px 35px;--e-con-transform-transition-duration:300ms;}.elementor-906 .elementor-element.elementor-element-0651c56:not(.elementor-motion-effects-element-type-background), .elementor-906 .elementor-element.elementor-element-0651c56 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://kamberconstruction.com.au/wp-content/uploads/2025/08/Image4.png");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-906 .elementor-element.elementor-element-0651c56::before, .elementor-906 .elementor-element.elementor-element-0651c56 > .elementor-background-video-container::before, .elementor-906 .elementor-element.elementor-element-0651c56 > .e-con-inner > .elementor-background-video-container::before, .elementor-906 .elementor-element.elementor-element-0651c56 > .elementor-background-slideshow::before, .elementor-906 .elementor-element.elementor-element-0651c56 > .e-con-inner > .elementor-background-slideshow::before, .elementor-906 .elementor-element.elementor-element-0651c56 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:#FFFAFA00;--background-overlay:'';}.elementor-906 .elementor-element.elementor-element-0651c56:hover::before, .elementor-906 .elementor-element.elementor-element-0651c56:hover > .elementor-background-video-container::before, .elementor-906 .elementor-element.elementor-element-0651c56:hover > .e-con-inner > .elementor-background-video-container::before, .elementor-906 .elementor-element.elementor-element-0651c56 > .elementor-background-slideshow:hover::before, .elementor-906 .elementor-element.elementor-element-0651c56 > .e-con-inner > .elementor-background-slideshow:hover::before{background-color:transparent;--background-overlay:'';background-image:linear-gradient(180deg, #454545 0%, var( --e-global-color-primary ) 100%);}.elementor-906 .elementor-element.elementor-element-0651c56.e-con{--e-con-transform-scale:1;}.elementor-906 .elementor-element.elementor-element-0651c56.e-con:hover{--e-con-transform-scale:1.02;}.elementor-906 .elementor-element.elementor-element-0651c56:hover{--overlay-opacity:0.6;}.elementor-906 .elementor-element.elementor-element-173284b{padding:30px 30px 30px 30px;}.elementor-906 .elementor-element.elementor-element-173284b .elementor-image-box-wrapper{text-align:left;}.elementor-906 .elementor-element.elementor-element-173284b .elementor-image-box-title{margin-bottom:7px;font-family:"Plus Jakarta Sans", Sans-serif;font-size:32px;font-weight:600;color:#FFFFFF;}.elementor-906 .elementor-element.elementor-element-173284b .elementor-image-box-description{font-family:"Plus Jakarta Sans", Sans-serif;font-size:16px;font-weight:500;line-height:25px;color:#F7F7F7;}.elementor-906 .elementor-element.elementor-element-8e5495b{--display:flex;}.elementor-906 .elementor-element.elementor-element-256122c{--display:flex;}.elementor-906 .elementor-element.elementor-element-5cbdce8{width:100%;max-width:100%;padding:100px 0px 100px 0px;}.elementor-906 .elementor-element.elementor-element-1ef250e .elementor-button{background-color:var( --e-global-color-accent );font-family:"Quicksand", Sans-serif;font-size:15px;font-weight:600;line-height:1em;fill:var( --e-global-color-e06cfc9 );color:var( --e-global-color-e06cfc9 );border-radius:525px 525px 525px 525px;padding:12px 21px 12px 21px;}.elementor-906 .elementor-element.elementor-element-1ef250e .elementor-button:hover, .elementor-906 .elementor-element.elementor-element-1ef250e .elementor-button:focus{background-color:var( --e-global-color-e9135c3 );}.elementor-906 .elementor-element.elementor-element-1ef250e{width:100%;max-width:100%;}.elementor-906 .elementor-element.elementor-element-1ef250e .elementor-button-content-wrapper{flex-direction:row-reverse;}.elementor-906 .elementor-element.elementor-element-1ef250e .elementor-button .elementor-button-content-wrapper{gap:12px;}.elementor-906 .elementor-element.elementor-element-975e034{--display:flex;--min-height:100vh;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--overflow:hidden;--overlay-opacity:0.3;--border-radius:0px 0px 70px 70px;--margin-top:-70px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:100px;--padding-bottom:100px;--padding-left:10px;--padding-right:10px;--z-index:3;}.elementor-906 .elementor-element.elementor-element-975e034:not(.elementor-motion-effects-element-type-background), .elementor-906 .elementor-element.elementor-element-975e034 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://kamberconstruction.com.au/wp-content/uploads/2025/11/KamberKensingtonProject-32.jpg");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-906 .elementor-element.elementor-element-975e034::before, .elementor-906 .elementor-element.elementor-element-975e034 > .elementor-background-video-container::before, .elementor-906 .elementor-element.elementor-element-975e034 > .e-con-inner > .elementor-background-video-container::before, .elementor-906 .elementor-element.elementor-element-975e034 > .elementor-background-slideshow::before, .elementor-906 .elementor-element.elementor-element-975e034 > .e-con-inner > .elementor-background-slideshow::before, .elementor-906 .elementor-element.elementor-element-975e034 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:var( --e-global-color-text );--background-overlay:'';}.elementor-906 .elementor-element.elementor-element-71dd395{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--overflow:hidden;}.elementor-906 .elementor-element.elementor-element-71dd395.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-906 .elementor-element.elementor-element-3571fda{width:var( --container-widget-width, 1000px );max-width:1000px;--container-widget-width:1000px;--container-widget-flex-grow:0;text-align:center;}.elementor-906 .elementor-element.elementor-element-3571fda .elementor-heading-title{font-family:"Plus Jakarta Sans", Sans-serif;font-size:62px;font-weight:600;line-height:70px;letter-spacing:-0.5px;color:var( --e-global-color-e06cfc9 );}.elementor-906 .elementor-element.elementor-element-f71fe2c{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:center;--gap:25px 25px;--row-gap:25px;--column-gap:25px;--overflow:hidden;--border-radius:0px 0px 0px 0px;--margin-top:-70px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:220px;--padding-bottom:150px;--padding-left:10px;--padding-right:10px;--z-index:2;}.elementor-906 .elementor-element.elementor-element-f71fe2c:not(.elementor-motion-effects-element-type-background), .elementor-906 .elementor-element.elementor-element-f71fe2c > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F1F7FF;}.elementor-906 .elementor-element.elementor-element-9aad623{text-align:center;}.elementor-906 .elementor-element.elementor-element-9aad623 .elementor-heading-title{font-family:"Plus Jakarta Sans", Sans-serif;font-size:20px;font-weight:600;text-transform:uppercase;line-height:20px;letter-spacing:2px;color:#5199D3;}.elementor-906 .elementor-element.elementor-element-4dabca2{width:var( --container-widget-width, 1200px );max-width:1200px;--container-widget-width:1200px;--container-widget-flex-grow:0;text-align:center;}.elementor-906 .elementor-element.elementor-element-4dabca2 .elementor-heading-title{font-family:"Plus Jakarta Sans", Sans-serif;font-size:62px;font-weight:600;line-height:70px;letter-spacing:-1px;color:var( --e-global-color-primary );}.elementor-906 .elementor-element.elementor-element-7cc5ead > .elementor-widget-container{padding:80px 0px 0px 0px;}.elementor-906 .elementor-element.elementor-element-91999a8 .elementor-button{background-color:var( --e-global-color-accent );font-family:"Quicksand", Sans-serif;font-size:15px;font-weight:600;line-height:1em;fill:var( --e-global-color-e06cfc9 );color:var( --e-global-color-e06cfc9 );border-radius:525px 525px 525px 525px;padding:12px 21px 12px 21px;}.elementor-906 .elementor-element.elementor-element-91999a8 .elementor-button:hover, .elementor-906 .elementor-element.elementor-element-91999a8 .elementor-button:focus{background-color:var( --e-global-color-e9135c3 );}.elementor-906 .elementor-element.elementor-element-91999a8{width:100%;max-width:100%;margin:70px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-906 .elementor-element.elementor-element-91999a8 .elementor-button-content-wrapper{flex-direction:row-reverse;}.elementor-906 .elementor-element.elementor-element-91999a8 .elementor-button .elementor-button-content-wrapper{gap:12px;}.elementor-906 .elementor-element.elementor-element-13aeb8c{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}body.elementor-page-906:not(.elementor-motion-effects-element-type-background), body.elementor-page-906 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-2e68978 );}@media(max-width:1200px){.elementor-906 .elementor-element.elementor-element-6addbc3{--padding-top:40px;--padding-bottom:40px;--padding-left:20px;--padding-right:20px;}.elementor-906 .elementor-element.elementor-element-07ba433 .elementor-heading-title{font-size:75px;line-height:75px;}.elementor-906 .elementor-element.elementor-element-3023c8e .elementor-heading-title{font-size:48px;line-height:58px;}.elementor-906 .elementor-element.elementor-element-3571fda .elementor-heading-title{font-size:48px;line-height:58px;}.elementor-906 .elementor-element.elementor-element-4dabca2 .elementor-heading-title{font-size:48px;line-height:58px;}}@media(max-width:991px){.elementor-906 .elementor-element.elementor-element-6addbc3{--min-height:90vh;}.elementor-906 .elementor-element.elementor-element-07ba433 .elementor-heading-title{font-size:60px;line-height:60px;}.elementor-906 .elementor-element.elementor-element-6944f7c{--border-radius:0px 0px 50px 50px;--padding-top:50px;--padding-bottom:50px;--padding-left:10px;--padding-right:10px;}.elementor-906 .elementor-element.elementor-element-3023c8e{--container-widget-width:680px;--container-widget-flex-grow:0;width:var( --container-widget-width, 680px );max-width:680px;}.elementor-906 .elementor-element.elementor-element-3023c8e .elementor-heading-title{font-size:38px;line-height:48px;}.elementor-906 .elementor-element.elementor-element-34e4290{--grid-columns:2;}.elementor-906 .elementor-element.elementor-element-5cbdce8{padding:20px 0px 20px 0px;}.elementor-906 .elementor-element.elementor-element-975e034:not(.elementor-motion-effects-element-type-background), .elementor-906 .elementor-element.elementor-element-975e034 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://kamberconstruction.com.au/wp-content/uploads/2025/11/KamberBotanyProject-11-scaled.jpg");}.elementor-906 .elementor-element.elementor-element-975e034{--min-height:100vh;--border-radius:0px 0px 50px 50px;--margin-top:-50px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-906 .elementor-element.elementor-element-3571fda .elementor-heading-title{font-size:38px;line-height:48px;}.elementor-906 .elementor-element.elementor-element-f71fe2c{--border-radius:0px 0px 0px 0px;--margin-top:-50px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:100px;--padding-bottom:50px;--padding-left:10px;--padding-right:10px;}.elementor-906 .elementor-element.elementor-element-4dabca2{--container-widget-width:680px;--container-widget-flex-grow:0;width:var( --container-widget-width, 680px );max-width:680px;}.elementor-906 .elementor-element.elementor-element-4dabca2 .elementor-heading-title{font-size:38px;line-height:48px;}.elementor-906 .elementor-element.elementor-element-7cc5ead > .elementor-widget-container{padding:20px 0px 0px 0px;}.elementor-906 .elementor-element.elementor-element-91999a8{margin:20px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}}@media(max-width:767px){.elementor-906 .elementor-element.elementor-element-6addbc3{--border-radius:0px 0px 30px 30px;}.elementor-906 .elementor-element.elementor-element-07ba433 .elementor-heading-title{font-size:50px;line-height:50px;}.elementor-906 .elementor-element.elementor-element-6944f7c{--border-radius:0px 0px 30px 30px;}.elementor-906 .elementor-element.elementor-element-2b654cd .elementor-heading-title{font-size:18px;line-height:18px;letter-spacing:1px;}.elementor-906 .elementor-element.elementor-element-3023c8e .elementor-heading-title{font-size:30px;line-height:40px;}.elementor-906 .elementor-element.elementor-element-975e034{--border-radius:0px 0px 30px 30px;}.elementor-906 .elementor-element.elementor-element-3571fda .elementor-heading-title{font-size:30px;line-height:40px;}.elementor-906 .elementor-element.elementor-element-f71fe2c{--border-radius:0px 0px 0px 0px;}.elementor-906 .elementor-element.elementor-element-9aad623 .elementor-heading-title{font-size:18px;line-height:18px;letter-spacing:1px;}.elementor-906 .elementor-element.elementor-element-4dabca2 .elementor-heading-title{font-size:30px;line-height:40px;}}@media(max-width:478px){.elementor-906 .elementor-element.elementor-element-07ba433 .elementor-heading-title{font-size:40px;line-height:40px;}.elementor-906 .elementor-element.elementor-element-2b654cd .elementor-heading-title{font-size:18px;}.elementor-906 .elementor-element.elementor-element-34e4290{--grid-columns:1;}.elementor-906 .elementor-element.elementor-element-975e034:not(.elementor-motion-effects-element-type-background), .elementor-906 .elementor-element.elementor-element-975e034 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://kamberconstruction.com.au/wp-content/uploads/2025/11/KamberBotanyProject-11-scaled.jpg");}.elementor-906 .elementor-element.elementor-element-71dd395{--width:100%;}.elementor-906 .elementor-element.elementor-element-9aad623 .elementor-heading-title{font-size:18px;}}/* Start custom CSS for loop-grid, class: .elementor-element-34e4290 *//* === Project Grid Card Styling === */

.vp-modal-backdrop .vp-modal{
    max-width: 100%!important;padding:0px!important;
     border-radius: 20px !important;
  overflow: hidden;
}
.vp-modal-backdrop{
    padding:0px!important;
}
.vp-modal-backdrop .vp-modal .vp-prev,
.vp-modal-backdrop .vp-modal .vp-next{

    border-radius: 0px!important;
}
    .vp-modal-backdrop .vp-modal  .vp-prev{    left: 0;
       font-size: 4rem;
    height: 60px;
    line-height: 0;
            top: 50%;
    padding: 0px;
    }
.vp-modal-backdrop .vp-modal  .vp-next{    
        right: 0;
        font-size: 4rem;
        height: 60px;
        line-height: 0;
        top: 50%;
        padding: 0px;
        }
/* --- Fix rounded corners inside the Elementor modal / vp-modal --- */

/* Make sure the image container clips rounded edges */
.vp-modal .vp-image-wrap {
  position: relative;
  overflow: hidden !important;
  border-radius: 20px !important;
  display: flex;
  justify-content: center;
  align-items: center;

}

/* Apply radius and remove conflicting max-height behaviors */
.vp-modal .vp-image-wrap img {
  border-radius: 20px !important;
  width: auto !important;
  max-width: 100% !important;
  
  height: auto !important;
  object-fit: contain !important;
  display: block;
}

/* Optional – smooth transition when opening modal */
.vp-modal .vp-image-wrap img {
  transition: all 0.4s ease-in-out;
}

.project-card {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
 
  cursor: pointer;
}

.project-card img {
  width: 100%;
  height: 657px;               /* fixed height */
  object-fit: cover;           /* keeps image cropped nicely */
  transition: transform 0.4s ease;
  display: block;
  border-radius: inherit;
}

/* === Overlay (hidden by default) === */
.project-card .project-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px;
  background: linear-gradient(to top, rgba(0,30,60,0.8) 40%, rgba(0,0,0,0));
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s ease;
  border-radius: inherit;
  color: #fff;
}

/* === Overlay Text === */
.project-card .project-overlay h3 {
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 8px;
}

.project-card .project-overlay p {
  font-size: 15px;
  line-height: 1.4;
  margin: 0;
  opacity: 0.9;
}

/* === Hover Effect === */
.project-card:hover img {
  transform: scale(1.06);
}

.project-card:hover .project-overlay {
  opacity: 1;
  visibility: visible;
}

/* Optional shadow lift on hover */
.project-card:hover {

  transform: translateY(-6px);
}



/* Force modal to stack vertically: image on top, thumbs below */
.vp-modal {
  width: 100% !important;
  max-width: 1200px !important;
  max-height: 90vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  padding: 0 !important;
  box-sizing: border-box;
}

/* Make image fill the modal width while preserving height */
/* make sure wrapper provides layout room (important) */
.vp-modal .vp-image-wrap {
  position: relative;
  width: 100%;
  max-width: 1100px;
  max-height: 84vh;
  height: 84vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.02); /* avoids empty white gap during transitions */
}

/* image base style — used by new node inline styles too */
.vp-modal .vp-image-wrap img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  transition: transform 600ms cubic-bezier(.22,.9,.24,1), opacity 600ms ease;
  max-height: 84vh;
  width: auto;
  height: auto;
  object-fit: contain;
  visibility: visible;
  z-index: 2;
  backface-visibility: hidden;
}


/* Thumbnails bar: centered, fixed height, scrollable if many thumbs */
.vp-modal .vp-thumb-row {
    display: none!important;
  position: relative !important;
  width: calc(100% - 40px);
  max-width: 1100px;
  margin: 0 auto;
  justify-content: flex-start;
  overflow-x: auto;
  padding: 8px 12px;
  background: rgba(255,255,255,0.02);
  border-radius: 8px;
  box-sizing: border-box;
}

/* Thumb images */
.vp-modal .vp-thumb-row img {
  width: 86px;
  height: 60px;
  object-fit: cover;
  border-radius: 6px;
  margin-right: 10px;
  opacity: 0.75;
  transition: opacity .15s ease, transform .15s ease;
}
.vp-modal .vp-thumb-row img:hover { opacity: 1; transform: translateY(-3px); }
.vp-modal .vp-thumb-row img.active { opacity: 1; outline: 2px solid rgba(255,255,255,0.9); transform: translateY(-2px); }


/* keep center/enter classes used by JS (if present) */
.vp-modal .vp-image-wrap img.center { transform: translate(-50%,-50%) translateX(0) !important; visibility: visible !important; opacity: 1 !important; z-index: 4 !important; }
.vp-modal .vp-image-wrap img.enter-right { transform: translate(-50%,-50%) translateX(120%) !important; visibility: visible !important; }
.vp-modal .vp-image-wrap img.enter-left  { transform: translate(-50%,-50%) translateX(-120%) !important; visibility: visible !important; }




/* Counter placed below image (not overlapping) */
.vp-modal .vp-counter {
  position: absolute !important;
  bottom: 12px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  background: rgba(0,0,0,0.45);
  padding: 6px 12px;
  border-radius: 999px;
  color: #fff;
  font-size: 14px;
  z-index: 10;
}


/* Prev/Next buttons: overlay on the sides of the image */
.vp-modal .vp-prev, .vp-modal .vp-next {
    
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 100000;
 background: none!important;
  border: none;
  padding: 12px;
  border-radius: 50%;
}
.vp-modal .vp-prev { left: 16px; }
.vp-modal .vp-next { right: 16px; }

/* Smaller screens: tighten things up */
/* small responsive tweak */
@media (max-width: 860px) {
  .vp-modal .vp-image-wrap { height: 64vh !important; max-height: 64vh !important; }
  .vp-modal .vp-image-wrap img { max-height: calc(64vh - 0px) !important; max-width: calc(100vw - 80px) !important; }
}


/* Ensure the modal container clips rounded corners */
.vp-modal .vp-image-wrap {
  overflow: hidden;
  border-radius: 20px; /* same as the image’s radius */
}

/* Keep the image filling properly inside */
.vp-modal .vp-image-wrap img {
  border-radius: 20px; /* optional, for smoother blending */
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}



/* --- Keep Close Button Fixed at Top-Right of Modal, Not Image --- */

/* Make modal the positioning context */
.vp-modal {
  position: relative !important;
}

/* Fix the close button to top-right of the visible modal area */
.vp-modal .vp-close {
  position: fixed !important;
  top: 32px !important;
  right: 42px !important;
  z-index: 100000 !important;

  color: #fff !important;
  border: none !important;
  border-radius: 50% !important;
  width: 38px !important;
  height: 38px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 4rem !important;
  line-height: 1 !important;
  cursor: pointer;
  transition: all 0.25s ease;
  backdrop-filter: blur(6px);
}

/* Hover effect */
.vp-modal .vp-close:hover {
 background-color: transparent;
}

/* On smaller screens, bring it closer in */
@media (max-width: 768px) {
  .vp-modal .vp-close {
    top: 18px !important;
    right: 18px !important;
    width: 34px !important;
    height: 34px !important;
    font-size: 34px !important;
  }
}



/* === Fix: Fade out previous image cleanly during slide transition === */

/* Default all modal images invisible until active */
.vp-modal .vp-image-wrap img {
  opacity: 0;
  transition: 
    transform 600ms cubic-bezier(.22,.9,.24,1),
    opacity 400ms ease;
  z-index: 1;
}

/* The active/center image fades in */
.vp-modal .vp-image-wrap img.center {
  opacity: 1;
  z-index: 3;
}

/* The entering image starts slightly transparent */
.vp-modal .vp-image-wrap img.enter-left,
.vp-modal .vp-image-wrap img.enter-right {
  opacity: 0.2;
  z-index: 2;
}

/* Fade-in effect while sliding in */
.vp-modal .vp-image-wrap img.center {
  animation: vpFadeIn 0.6s ease forwards;
}

/* When leaving (old) image slides out and fades */
.vp-modal .vp-image-wrap img.leaving {
  opacity: 0;
  z-index: 1;
  transition: 
    transform 600ms cubic-bezier(.22,.9,.24,1),
    opacity 400ms ease;
}

@keyframes vpFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}/* End custom CSS */