.navbar-brand {
	font-size: smaller;
	margin-left: 12px;
}

.navbar-light .navbar-nav .nav-link {
    font-family: Verdana;
    color: black;
}

.navbar-nav img {
    vertical-align: middle; /* aligns with text */
    margin-top: -4px; /* move up */
    /* or margin-bottom: 2px; to move down */
}


body {
	padding-top: 90px;
	font-size: .8rem;
}

.navbar img {
  transition: 0.5s;
}

.navbar .nav-link:hover img {
  filter: brightness(0) saturate(100%) invert(60%);
}


.custom-navbar-color {
	background-color: #ffffff !important;
}

.nav-link {
      padding-top: 2px; /* Adjust as needed to raise the link */
      /* Other padding or styling */
    	}
.photo img {
  width: 100%; /* Ensures the image takes up 100% of the parent width */
  height: auto; /* Maintains aspect ratio */
  object-fit: contain; /* Or 'cover' depending on desired behavior */
}

.navbar .nav-link:hover {
  color:darkgray !important;
}

.navbar-toggler {
	border-color: transparent !important;
	color:transparent !important;
	background-color: transparent !important;
}

.navbar-collapse {
    text-align: center;
	padding-top: 12px !important;
	margin-right: 6px;
}

/*.img-fluid {
    height: 100vh; 
	min-width: 100%;
    background-position: center;
	background-size: cover;
	object-fit: cover;
    object-position: top; 
}*/

.fullscreen-img {
    height: 100vh;
    width: 100%;
    object-fit: cover;
    object-position: top;
}

/* SECOND GALLERY — portrait / landscape mix */

.gallery-wrapper {
  padding: 12px; /* Adds padding around the entire gallery */
}

/* Masonry Grid: Uses flexbox for layout, ensures wrapping of gallery items */
.masonry-grid {
  display: flex; /* Use flexbox to handle layout */
  flex-wrap: wrap; /* Ensure items wrap in the grid */
  margin-left: -6px; /* Adjust left margin to prevent initial overflow */
  margin-right: -6px; /* Adjust right margin to prevent overflow */
}

/* Gallery Item: Adjusts width and margin to create gaps around each image */
.gallery-item-vertical {
  width: 33.333%; /* Three items per row */
  padding-left: 6px; /* Adds 12px space to the left of each item */
  padding-right: 6px; /* Adds 12px space to the right of each item */
  box-sizing: border-box; /* Ensures padding and margin are included in the element's total width/height */
  margin-bottom: 12px; /* Keeps margin on the bottom between rows */
}

/* Two columns on smaller screens */
@media (max-width: 767px) {
  .gallery-item-vertical {
    width: 50%;  /* 50% width to create two items per row on smaller screens */
    padding-left: 6px; /* Adds 12px space to the left of each item */
    padding-right: 6px; /* Adds 12px space to the right of each item */
    margin-bottom: 12px;  /* Keeps margin on the bottom between rows */
  }
}

/* Images inside the gallery items: Ensures images are responsive */


.gallery-item-vertical img {
  width: 100%; /* Ensures image takes up the full width of the parent */
  display: block;
  height: auto; /* Maintains aspect ratio of images */
  object-fit: cover; /* Or 'contain' if you want images to fit inside their container */
}

/* Animation for gallery items: Fade and slide in */
.gallery-item-vertical {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}

.gallery-item-vertical.show {
  opacity: 1;
  transform: translateY(0);
}



/* Animation delays to create staggered effect */
.gallery-item-vertical:nth-child(1) { transition-delay: 0.05s; }
.gallery-item-vertical:nth-child(2) { transition-delay: 0.1s; }
.gallery-item-vertical:nth-child(3) { transition-delay: 0.15s; }
.gallery-item-vertical:nth-child(4) { transition-delay: 0.2s; }
.gallery-item-vertical:nth-child(5) { transition-delay: 0.25s; }
.gallery-item-vertical:nth-child(6) { transition-delay: 0.3s; }
.gallery-item-vertical:nth-child(7) { transition-delay: 0.35s; }
.gallery-item-vertical:nth-child(8) { transition-delay: 0.4s; }
.gallery-item-vertical:nth-child(9) { transition-delay: 0.45s; } 

/* SECOND GALLERY — portrait / landscape mix */



@media (max-width: 767px) {
	.navbar-nav > li > a {
		font-size: 20px !important;
	    padding-top: 14px !important;
	}
	
	/**This targets the intagram svg for the mobile version*/
	.navbar-nav > a{
		padding-top: 14px !important;
	}
}

@media (max-width: 767px) {
	.navbar-collapse {
	  height: 100vh  !important;
	  width: 100vw  !important;
	  top: 0  !important;
	  left: 0  !important;	
	}
}

.navbar-brand img {
  max-width: 200px;
  height: auto;
  margin-block: .35rem;
  margin-right: 30px;
}

.navbar-item img {
  max-width: 200px;
  height: auto;
  margin-block: .35rem;
}

@media (max-width: 767px) {
  body {
    padding-top: 60px; /* adjust until it sits perfectly */
  }
}

@media (min-width: 576px) {
	.navbar-brand img {
		max-width: 280px;
		height: auto;
		margin-block: 1rem;
	} 
}
 
@media (min-width: 576px) {
	.navbar-item img {
		max-width: 280px;
		height: auto;
		margin-block: 1rem;
		/*(max-width: 760px)*/
	}
}


/* FIRST GALLERY — portrait */

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;   /* this controls ALL spacing */
}

@media (min-width: 767px) {
  .gallery-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
	
.gallery-grid img {
  width: 100%;
  height: auto;
  display: block;
}

.gallery-wrapper {
  padding-left: 12px;
  padding-right: 12px;
}

.gallery-item {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.4s ease-out, transform 0.4s ease-out;
  will-change: opacity, transform;
}

.gallery-item.show {
  opacity: 1;
  transform: translateY(0);
}


.gallery-item:nth-child(1) { transition-delay: 0.05s; }
.gallery-item:nth-child(2) { transition-delay: 0.1s; }
.gallery-item:nth-child(3) { transition-delay: 0.15s; }
.gallery-item:nth-child(4) { transition-delay: 0.2s; }
.gallery-item:nth-child(5) { transition-delay: 0.25s; }
.gallery-item:nth-child(6) { transition-delay: 0.3s; }
.gallery-item:nth-child(7) { transition-delay: 0.35s; }
.gallery-item:nth-child(8) { transition-delay: 0.4s; }
.gallery-item:nth-child(9) { transition-delay: 0.45s; }



/** {
    padding: 0;
	margin: 0;
}*/

/*.photo-gallery {
	column-count: 3; 
    column-gap: 15px
	}


.photo {
	break-inside: avoid;
	margin-bottom: 15px;
}

@media (max-width: 576px) {
     .photo-gallery {
	column-count: 2;
	}
}

.photo {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}

.photo.show {
    opacity: 1;
    transform: translateY(0);
	}*/


/* ABOUT GALLERY — portrait */

.about-section {
  margin-top: 120px;
}

.about-section p {
  color: #808080;
}

.about-section {
  max-width: 1100px; /* or whatever you want */
}

.rotating-graphic {
  margin-top: 200px; /* adjust this value */
}

.about-logo {
  max-width: 370px; /* adjust as needed */
  height: auto;
}

/* ABOUT GALLERY — portrait */

.hero {
    height: 100vh;
    width: 100%;
    overflow: hidden;
}

.hero-img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: top;
    display: block;

    opacity: 0;
    transition: opacity 1.4s ease-in-out, transform 6s ease;
    transform: scale(1.03);
}

.hero-img.loaded {
    opacity: 1;
    transform: scale(1);
}

@media (max-width: 767px) {

  /* Move logo slightly left */
  .navbar-brand {
    margin-left: 0 !important;   /* remove the 12px margin */
  }

  /* Make logo slightly larger */
  .navbar-brand img {
    max-width: 240px;   /* increase from 200px */
    margin-left: -4px;  /* gently shift left */
  }

}

@media (max-width: 767px) {

  /* Reduce navbar height */
  .navbar {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }

  /* Slightly smaller logo */
  .navbar-brand img {
    max-width: 200px;   /* adjust to taste */
    margin-block: 0.2rem;
  }

  /* Adjust body offset since navbar is smaller */
  body {
    padding-top: 46px; /* moves grid closer to navbar adjust */
  }

}

@media (max-width: 767px) {

  .navbar-toggler {
    margin-right: -14px; /* adjust value until perfect */
  }

}

@media (max-width: 767px) {
  .hero-img {
    object-position: 40% top; /* Moves image in index.html to the right */
	  margin-bottom: 0;	  
  }
}