/* Container styling */

.modal{
    width:102%;
}
.scroll-card {
  height: 450px; /* Adjust height as needed */
  position: relative;
  background-color: #f8f9fa; /* Prevents flicker on slow loads */
  border-radius: 20px !important; /* Forces a nice rounded corner */
  transition: box-shadow 0.3s ease;
}
.modal-card {
  position: relative;
  background-color: #f8f9fa; /* Prevents flicker on slow loads */
  border-radius: 20px !important; /* Forces a nice rounded corner */
  transition: box-shadow 0.3s ease;
}

/* Enhancing the Bootstrap shadow on hover */
.scroll-card:hover {
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important;
}

/* Image Scroll Logic */
.scroll-card img {
  width: 100%;
  height: auto;
  transition: transform 10s  ease-in-out; 
  transform: translateY(0);
  will-change: transform; /* Smoother animation performance */
}

.scroll-card:hover img {
  /* Calculation: move up 100% of image height, 
     then pull back the container height (450px) to show the bottom */
  transform: translateY(calc(-100% + 450px)); 
}


/* Ensure the container clips the enlarging image */
.modal-card {
  overflow: hidden;
}

/* Base state of the image */
.modal-card img {
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Hover state: Zoom + Slight Rotation */
.modal-card:hover img {
  /* scale(1.1) zooms in, rotate(2deg) tilts it slightly */
  transform: scale(1.1) rotate(2deg);
}

@media(max-width: 992px) {
	.fancynavbar-togglerbar{
		background: #000 !important;
	}
}
@media(min-width: 992px) {
.main, .footer {
    width: calc(100% - 4.375rem);
}
}
    
@media(max-width: 992px) {
.container{
		width: 90%;
	}
}