header {
    display: flex;
    background-image: none
    z-index: 999;
    width: 100%;
    top: 7vh;
    padding: 5px 0px;
    position: absolute; background: #00000000;}

.nav-bar{    margin-top: 0vh;}

    .nav-content {
    position: absolute;
    width: calc(50vw);
    left: -4vh;
    top: 4vh;
    margin: 15px;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    box-shadow: 0 2px 10px 0 rgba(3, 3, 3, 0.3);
    min-width: 300px;
    border-radius: 0px;
    transition: 400ms 350ms;
    z-index: 999;
    overflow: scroll;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #00000000;
    height: 0;
    background-image: linear-gradient(to right, #55450b30 0%, #00000054 100%);}


#drawer-input:checked ~ .nav-content{height: calc(67vh);}

.dd-menu{border: 1px solid #cccccc40; background-color: #ffffff1a;
top: 7vh; border-radius: 50px;    left: -65vh;
}

header .navtext ul.dd-menu li a{color:#fff}

.dd-menu li:hover {
    background-color: #00000000;
}


header .navtext .btn-outline-primary{background: linear-gradient(to right, #fdd40794, #00000033);}

.futur-next{position: relative;}
.next-futur{    position: absolute;
    z-index: 888;
    top: 50vh;}

.next-futur h5{color: #fff}









.scattered-gallery-widget {
    position: relative;
    padding: clamp(24px, 4vw, 48px) 20px;
    top: -101vh;
}

/* --- Container Stage --- */
.gallery-stage {
    position: relative;
    width: min(1200px, 100%);
    margin: 0 auto;
}

/* --- Core Card Engineering --- */
.gallery-card {
  position: absolute;
  overflow: hidden;
  border-radius: 28px;
  box-shadow: var(--gallery-shadow);
  will-change: transform;
  transform-origin: center center;
  transition: transform 0.18s linear;
  box-sizing: border-box;
}

.gallery-media {
  width: 100%;
  height: 100%;
}

.gallery-card img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* --- Desktop Layout Positioning & Aspect Ratios --- */
.card-1 {
    width: clamp(190px, 22vw, 290px);
    top: -13vh;
    left: 4vh;
    z-index: 2;
}
.card-1 .gallery-media {
  transform: scale(1.06);
}

.card-2 {
    width: clamp(190px, 22vw, 290px);
    top: -21vh;
    left: 34%;
    z-index: 3;
}
.card-2 .gallery-media {
  transform: scale(1.04);
}

.card-3 {
    width: clamp(190px, 22vw, 290px);
    top: -22vh;
    right: -13vh;
    z-index: 1;
}
.card-3 .gallery-media {
  transform: scale(1.05);
}

.card-4 {
 width: clamp(190px, 22vw, 290px);
    top: 2vh;
    left: 21vh;
}
.card-4 .gallery-media {
  transform: scale(1.04);
}

.card-5 {
 width: clamp(190px, 22vw, 290px);
    top: 0%;
    left: 45%;
    z-index: 4;
}

.card-6 {
width: clamp(190px, 22vw, 290px);
    bottom: -41vh;
    right: 4vh;
    z-index: 2;
}
.card-6 .gallery-media {
  transform: scale(1.05);
}

/* --- CTA Promo Banner --- */
.redesignee-promo-banner {
  text-align: center;
  padding: 30px 24px;
  margin-top: 40px;
  border-top: 1px solid #eeeeee;
}

.redesignee-promo-banner p {
  font-size: 0.95rem;
  color: #666666;
  font-weight: 500;
}

.redesignee-promo-banner a {
  color: var(--accent-color);
  text-decoration: none;
  font-weight: 700;
  transition: opacity 0.2s;
}

.redesignee-promo-banner a:hover {
  text-decoration: underline;
}

/* --- Responsive Adaptations (Tablets) --- */
@media (max-width: 991px) {
  .gallery-stage {
    height: 760px;
  }
  .card-1 {
    top: 2%;
    left: 2%;
  }
  .card-2 {
    top: 14%;
    left: 24%;
  }
  .card-3 {
    top: 4%;
    right: 0;
  }
  .card-4 {
    top: 44%;
    left: 0;
  }
  .card-5 {
    top: 38%;
    left: 39%;
  }
  .card-6 {
    bottom: 2%;
    right: 2%;
  }
}

/* --- Responsive Adaptations (Mobile Snapping Grid) --- */
@media (max-width: 767px) {
  .scattered-gallery-widget {
    padding: 16px;
  }
  .gallery-stage {
    height: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }
  .gallery-card {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    width: 100% !important;
    height: 190px !important;
    transform: none !important;
    border-radius: 22px;
  }
  .card-5 {
    display: none; /* Hide minor structural layout details on tiny windows */
  }
}

/* --- Accessibility Configuration --- */
@media (prefers-reduced-motion: reduce) {
  .gallery-card {
    transition: none !important;
    transform: none !important;
  }
}






















/* responsive */

/*syt*/
@media only screen and (min-width : 1920px) and (max-width : 2559px){}

/*syt*/
@media only screen and (min-width : 1600px) and (max-width : 1919px){

	.next-futur{
    top: 45vh;
    left: 3vh;}
}

/*syt*/
@media only screen and (min-width : 1440px) and (max-width : 1599px){
.next-futur{
    top: 40vh;
    left: 4vh;}

}

/*syt*/
@media only screen and (min-width : 1366px) and (max-width : 1439px){
.next-futur{
    top: 38vh;
    left: 3vh;}
}

/*syt*/
@media only screen and (min-width : 1200px) and (max-width : 1365px){

  .next-futur{
    top: 35vh;
    left: 7vh;}


}

/*Tab-syt*/
@media only screen and (min-width : 1024px) and (max-width : 1199px){

   
.next-futur{top: 22vh;    left: 2vh;}

}

/*Tab-exta
@media only screen and (min-width : 911px) and (max-width : 1023px){


}*/



/*Tab*/
@media only screen and (min-width : 768px) and (max-width : 1023px){


  
.next-futur{top: 18vh;    left: 2vh;}


}




/*Mob*/
@media only screen and (min-width : 150px) and (max-width : 767px){

}


@media only screen and (max-width: 375px) {
    
}


@media only screen and (max-width: 320px) {

  
}