html {
    height: 100%; /* Ensure html takes full height for body's min-height to work reliably */
}

body {
    display: flex; /* Enable flexbox */
    flex-direction: column; /* Stack children vertically */
    min-height: 100vh; /* Make body at least full viewport height */
    background-color: #f0f0f0; /* Light gray background */
    color: #777777;
    font-family: 'Courier Prime', Courier, monospace;
    margin: 0;
    /* padding: 0; Removed, margin:0 is enough */
}

/* Navbar adjustments */
.navbar-brand h1 {
    font-size: 2rem; /* Increased font size for a 'bigger' header feel */
   
    margin-bottom: 0;
    font-family: 'Courier Prime', Courier, monospace;/* Ensure title also uses Courier */
    word-spacing: -2px; /* Adjust this value to control space between words */
    color: #777777; /* Lighter gray for the main title */
}

.navbar-brand .site-subtitle {
    font-size: 0.9rem; /* Adjust as needed */
    color: #6c757d; /* Bootstrap's muted text color - kept as is for contrast */
}

.navbar {
    /* background-color: #f8f9fa; */ /* This was effectively from Bootstrap's bg-light */
   /* background-color: #f0f0f0;  Match body background */
    /*border-bottom: 1px solid #ddd; /* Keep the bottom border for separation */
    padding-top: 1rem; /* Increase top padding to make header 'bigger' */
    padding-bottom: 1rem; /* Increase bottom padding to make header 'bigger' */
    z-index: 10490;
}

/* Homepage Portfolio Item Links */
.portfolio-link {
    display: block; /* Ensures the link takes up the block space of its content */
    text-decoration: none; /* Removes default link underline */
    color: inherit; /* Prevents default link color from overriding title color */
}

.portfolio-link:hover {
    text-decoration: none; /* Ensure no underline on hover either */
    color: inherit; /* Ensure color remains consistent on hover if default link behavior tries to change it */
}


.portfolio-container {
    margin-top: 30px;
}

/* This class is used for homepage category items and sub-category links on gallery pages */
.portfolio-item {
    position: relative;
    margin-bottom: 30px; /* Add some space between items if they stack on smaller screens */
    overflow: hidden; /* Needed for aspect ratio cropping */
}

/* This container is used for homepage category items and sub-category links */
.portfolio-image-container {
    width: 100%;
    padding-top: 66.66%; /* 3:2 Aspect Ratio (2 / 3 * 100) */
    position: relative; /* Crucial for absolute positioning of children */
    overflow: hidden; /* Clips children to its bounds, including border-radius */
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #fff; /* Fallback if image is missing or transparent */
}

/* Targets the image within .portfolio-image-container (used for category links) */
.portfolio-image-container img { 
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Crop the image to fit */
    display: block;
}

.portfolio-item .portfolio-title { /* Title overlay for category links */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; 
    height: 100%; 
    background-color: rgba(204, 204, 204, 0.7); 
    color: #4c4b4b; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    opacity: 1; 
    transition: opacity 0.3s ease; 
    font-size: 2em; 
    text-align: center; 
    padding: 10px; 
    box-sizing: border-box; 
    border-radius: 4px; 
}

.portfolio-item:hover .portfolio-title {
    opacity: 0; 
}

footer {
    background-color: #f0f0f0;
    color: #6c757d;
    font-size: 0.8rem;
}

.main-content {
    flex-grow: 1; 
}

/* Styling for Gallery Pages (generic container) */
.gallery-page-container {
    padding-top: 20px; 
    padding-bottom: 40px; 
}

/* Styling for individual image items in final galleries (if NOT using aspect ratio container) */
/* .gallery-item {
    margin-bottom: 30px; 
}

.gallery-item img {
    border: 1px solid #ddd; 
    border-radius: 4px; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); 
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; 
    width: 100%; 
    height: auto;
}

.gallery-item img:hover {
    transform: scale(1.03); 
    box-shadow: 0 4px 10px rgba(0,0,0,0.15); 
} */

/* NEW: Styling for final gallery images that need a 3:2 aspect ratio crop */
.aspect-ratio-container-3-2 {
    width: 100%;
    padding-top: 66.66%; /* 3:2 Aspect Ratio */
    position: relative;
    overflow: hidden;
    border: 1px solid #ddd; /* Consistent with .gallery-item img border */
    border-radius: 4px;    /* Consistent with .gallery-item img radius */
    background-color: #fff; /* Fallback if image is missing or transparent */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Consistent with .gallery-item img shadow */
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.aspect-ratio-container-3-2:hover {
    transform: scale(1.03); 
    box-shadow: 0 4px 10px rgba(0,0,0,0.15); 
}

.aspect-ratio-container-3-2 img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* This will crop the image to fit 3:2 */
    display: block; /* Remove any extra space below image */
}


/* Basic styling for other pages to ensure consistency */
.content-section {
    padding: 40px 15px;
    min-height: 60vh; 
}

.content-section h2 {
    margin-bottom: 20px;
}

.navbar-brand {
	display: inline-block;
	padding-top: 2.313rem;
	padding-bottom: .3125rem;
	margin-right: 1rem;
	font-size: 1.25rem;
	line-height: inherit;
	white-space: nowrap;
}

.justify-content-center h3{ /* This is for the "Portfolio" title on index.html */
    margin-bottom: 4rem;
}

/* Back links on gallery pages */
.gallery-page-container .text-muted {
    font-size: 0.9rem;
}
.gallery-page-container .text-muted:hover {
    text-decoration: underline;
}
/* Titles for homepage/category links */
.portfolio-item .portfolio-title {
    /* ... (existing styles) ... */
    text-transform: uppercase; /* ADD THIS LINE */
}

/* Main section/page titles */
.portfolio-container h3, /* For "Portfolio" on index.php */
.gallery-page-container h2 { /* For gallery page titles like "Photography Categories", "Events", "Making Of" */
    text-transform: uppercase;
}
/* NEW or MODIFIED styles for gallery thumbnails with varying aspect ratios */
.gallery-image-link { /* Keep this as it makes the whole area clickable */
    display: block;
    text-decoration: none;
    color: inherit;
}
.gallery-image-link:hover {
    text-decoration: none;
}

.gallery-image-wrapper {
    width: 100%;
    /* Define a max-height for consistency, or let height be fully dynamic */
    /* For example, to make landscape images (3:2) determine the row height: */
    /* padding-top: 66.66%; /* This would make it behave like the 3:2 container if all were landscape */
    /* A fixed height can also work if you want all thumbs to align vertically */
    /* max-height: 300px; */ /* Example max height */
    background-color: #e9e9e9; /* A light background for letterboxing */
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    overflow: hidden; /* Important if using fixed height and object-fit */
    display: flex; /* To center the image if using fixed height */
    align-items: center; /* To center the image if using fixed height */
    justify-content: center; /* To center the image if using fixed height */
}

.gallery-image-wrapper:hover {
    transform: scale(1.03); 
    box-shadow: 0 4px 10px rgba(0,0,0,0.15); 
}

.gallery-image-thumb {
    display: block;
    width: 100%;
    height: auto; /* Let height adjust to aspect ratio */
    /* If using a fixed height on .gallery-image-wrapper, use object-fit: contain */
    /* max-height: 100%; */ /* Ensure image doesn't overflow fixed height wrapper */
    /* object-fit: contain; */ /* Scales image down to fit, maintains aspect ratio, letterboxes */
}

/* If you want to ensure a more uniform grid look, 
   you can set a fixed height to .gallery-image-wrapper 
   and use object-fit: contain on .gallery-image-thumb.
   This will create letterboxing (or pillarboxing) within the thumbnail.
*/
.gallery-image-wrapper.fixed-thumb-height { /* Add this class to .gallery-image-wrapper in PHP if desired */
    height: 250px; /* Or your desired consistent thumbnail height */
    /* display: flex, align-items: center, justify-content: center already handle centering */
}
.gallery-image-wrapper.fixed-thumb-height .gallery-image-thumb {
    max-height: 100%;
    width: auto; /* Allow width to adjust if height is the constraint */
    object-fit: contain;
}


/* Modal styling should already ensure the image fits */
.modal-image { /* Already in footer.php structure */
    max-width: 100%;
    max-height: 85vh; /* Prevent modal image from being taller than viewport */
    height: auto; /* Maintain aspect ratio */
    width: auto;  /* Maintain aspect ratio */
    margin: 0 auto; /* Center image in modal if it's narrower than modal-body */
}
.modal-image { /* Existing style, ensure it's there */
    max-width: 100%;
    max-height: 85vh; 
    height: auto; 
    width: auto;  
    margin: 0 auto; 
}

/* Styles for Modal Navigation Arrows */
.modal-content.position-relative { /* Ensure modal-content can be a positioning context */
    position: relative;
}

.modal-control-prev,
.modal-control-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1055; /* Higher than modal backdrop (1050 by default in Bootstrap 4 if modal-dialog is 1050) */
    width: 10%; /* Adjust width as needed */
    height: 100%; /* Make clickable area cover full height of modal content */
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-decoration: none;
    opacity: 0.7;
    transition: opacity .15s ease;
    font-size: 3rem; /* Size of the arrow character */
    line-height: 1;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.modal-control-prev:hover,
.modal-control-next:hover {
    opacity: 1;
    color: #fff;
    text-decoration: none;
}

.modal-control-prev {
    left: 0; /* Position on the left */
}

.modal-control-next {
    right: 0; /* Position on the right */
}

/* Hide arrows if they have the 'disabled' class (added by JS) */
.modal-control-prev.disabled,
.modal-control-next.disabled {
    opacity: 0.2;
    pointer-events: none; /* Make them unclickable */
}
/* .modal-header .close {
    position: relative; /* Sometimes needed for z-index to take effect properly on non-positioned elements */
    /* z-index: 1060; Higher than modal content, backdrop, and our custom arrows */
    /* The inline styles for opacity and font-size are fine, but can be moved here for consistency if you prefer */
    /* opacity: 1 !important; */ /* Use !important if Bootstrap's default opacity overrides */
    /* font-size: 2rem; */
    /* color: #fff; */ /* Ensure it's visible against potentially dark images */
    /* text-shadow: 0 1px 0 #000; */ /* Optional: for better visibility against light images */
/* } */ 
.modal-content.position-relative { 
    position: relative;
}

.modal-header{
    margin-bottom: -45px;
}


.modal-control-prev,
.modal-control-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1055; /* Close button z-index (1060) should be higher than this */
    /* ... other arrow styles ... */
}
/* ... (your existing CSS) ... */


#imageModal .modal-content { /* Target the specific modal content */
    background-color: rgba(26, 25, 25, 0.9); /* Already there, good for fullscreen feel */
    border: none;
    /* Add padding to the modal-content itself to push arrows outwards */
    /* This padding will be the "safe zone" for the arrows */
    padding-left: 60px;  /* Adjust this value as needed */
    padding-right: 60px; /* Adjust this value as needed */
    box-sizing: border-box; /* Ensure padding doesn't add to width if modal-dialog has fixed width */
    position: relative; /* Ensure it's the positioning context for arrows */
}

.modal-body { /* Keep this centered */
    text-align: center;
    padding: 20px; /* Remove default modal body padding as content padding handles it */
    margin-top:60px
}

.modal-image {
    max-width: 100%;    /* Image will fill the available width within modal-body */
    max-height: 100vh;   /* Limit vertical height */
    height: auto;
    width: auto;
    display: block; /* Can help with centering or if margin auto is used */
    margin: 0 auto; /* Center image if it's narrower than its container */
}


/* Styles for Modal Navigation Arrows */
/* .modal-content.position-relative is already handled by #imageModal .modal-content */

#imageModal .modal-content{
    top: -20px;
}

.modal-control-prev,
.modal-control-next {
    position: absolute;
    top: 0; /* Align to top of modal-content */
    bottom: 0; /* Stretch to bottom of modal-content */
    height: 100%; /* Cover full height of the padded modal-content */
    width: 60px;  /* Match the padding-left/right of .modal-content */
    transform: none; /* Reset previous transform */
    z-index: 1055; 
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-decoration: none;
    opacity: 0.7;
    transition: opacity .15s ease;
    font-size: 3rem; 
    line-height: 1;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
    margin-top: 36px;
}

.modal-control-prev:hover,
.modal-control-next:hover {
    opacity: 1;
    color: #fff;
    text-decoration: none;
}

.modal-control-prev {
    left: 0; /* Sit within the left padding of modal-content */
}

.modal-control-next {
    right: 0; /* Sit within the right padding of modal-content */
}

.modal-control-prev.disabled,
.modal-control-next.disabled {
    opacity: 0.0;
    pointer-events: none;
}

/* Styling for Social Media Icons in Navbar */
.navbar-nav .social-icon {
    font-size: 1.3rem; /* Adjust size of the icon */
    padding-top: 0.5rem; /* Align vertically if needed, adjust with other nav-link padding */
    padding-bottom: 0.5rem;
    color: #555;
}

a {
	cursor: pointer;
}

.navbar-nav .social-icon:hover {
    color: #000; /* Example hover color */
    /* Or a specific Instagram color: color: #E1306C; */
}


#navbarNav > ul.navbar-nav:not(:first-child) {
    margin-left: 1rem; /* Adds some space to the left of the social icon group */
}

.ml-auto, .mx-auto {
	margin-left: 1rem !important;
}

.modal-backdrop {
    background-color: #f0f0f0 !important; /* White with 60% opacity */

}

#imageModal{
        /* backdrop-filter: blur(2.69px) !important; */
        background-color: #f0f0f0 !important; /* White with 60% opacity */
        z-index: 999999;
}

/* Ensure modal close button is on top and visible against the new backdrop */
.modal-header .close {
    position: absolute; 
    top: -15px;         
    right: -15px;       
    z-index: 1060; 
    opacity: 1;
    font-size: 2rem;
    /* Change color if white on white is an issue, though shadow should help */
    color: #333 !important; /* Darker color for close button against light backdrop */
    text-shadow: 0 1px 1px rgba(255,255,255,0.7); /* Light shadow for contrast */
    padding: 0.5rem; 
    line-height: 1;
}


/* Styles for Modal Navigation Arrows - ensure they are visible */
.modal-control-prev,
.modal-control-next {
    /* ... existing styles ... */
    color: #333; /* Darker color for arrows against light backdrop */
    text-shadow: 0 1px 1px rgba(255,255,255,0.7); /* Light shadow for contrast */
    /* ... existing styles ... */
}

.modal-control-prev:hover,
.modal-control-next:hover {
    /* ... existing styles ... */
    color: #000 !important; /* Darker hover color */
    /* ... existing styles ... */
}

#imageModal .modal-dialog {
    margin-top: 2%; 
}

/* Adjust max-height for the image considering the new top margin of the modal */
#imageModal .modal-image {
    max-width: 100%;
    /* Reduce max-height to account for navbar height + modal's own margins/padding */
    max-height: calc(85vh - 100px); /* Example: 85vh minus the margin-top value */
    height: auto;
    width: auto;
    display: block;
    margin: 0 auto;
    background-color: #e9e9e9;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    overflow: hidden;
    
}
/* Responsive YouTube/Vimeo Video Embed */
.video-responsive-wrapper {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding-top: 56.25%; /* 16:9 Aspect Ratio ( (9 / 16) * 100% ) */
    margin-bottom: 15px; /* Space below the video before the title */
    background-color: #000; /* Optional: black background while video loads */
    border-radius: 4px;    /* Optional: match other gallery item styling */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Optional: match other gallery item styling */
}

.video-responsive-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    border: none; /* Ensure no default iframe border */
}

.video-info-button {
    /* Add any specific styling you want for the button */
    /* e.g., margin-bottom: 15px; */
}

.video-info-button .fa-info-circle {
    margin-right: 5px; /* Space between icon and text */
}

/* Styling for the text in the info modal if needed */
#textInfoModalBody p {
    margin-bottom: 1rem; /* Standard paragraph spacing */
    line-height: 1.6;
}
#textInfoModalBody p:last-child {
    margin-bottom: 0;
}
.btn-primary {
	color: #fefefe;
	background-color: #777;
	border-color: #888;
}
.btn-primary:hover {
	color: #fefefe;
	background-color: #979595;
	border-color: #888;
}
.profile-photo {
    max-width: 250px; /* Adjust as needed */
    height: auto;
    border: 3px solid #ddd; /* Optional border */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Optional subtle shadow */
}

.content-section .lead {
    font-size: 1.15rem; /* Slightly larger lead paragraph */
    font-weight: 400;
    margin-bottom: 1.5rem;
}

.content-section p {
    line-height: 1.7;
    margin-bottom: 1rem;
}

.profile-photo-camera-container {
    width: 250px; /* Or your desired width for the camera-shaped image */
    height: 200px; /* Or your desired height - try to match the aspect ratio of your camera SVG shape */
    /* Alternatively, use aspect-ratio property if supported and desired */
    /* aspect-ratio: 4 / 3; */ 
    margin: 0 auto; /* Center the container if its parent is text-center */
    
    /* Apply the clip-path to the container if you want the border/shadow to also be clipped */
    /* clip-path: url(#camera-clip-path); */
    /* -webkit-clip-path: url(#camera-clip-path); */
}

.profile-photo-camera-shape { /* This is the <img> tag */
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the image covers the entire area of its container, cropping if necessary to fit the camera shape */
    clip-path: url(#camera-clip-path);
    -webkit-clip-path: url(#camera-clip-path); /* For older Safari versions */
}


.content-section .lead {
    font-size: 1.15rem;
    font-weight: 400;
    margin-bottom: 1.5rem;
}

.content-section p {
    line-height: 1.7;
    margin-bottom: 1rem;
}

.underlineAlter{
  position: relative;
  width: 85px;
  height: 1.2px;
  background-color: #808080;
  top: -7px;
  left: 9px;
  display: block;
}
.underlineAlter:hover{
    position: relative;
    width: 85px;
    height: 1.2px;
    background-color: #2b2b2b;
    top: -7px;
    left: 9px;
    display: block;
  }

  html {
    /* Replace the URL with the path to your own camera icon */
    /* The '16 16' are the x and y coordinates of the cursor's 'hotspot' (the clicking point) */
    /* 'auto' is a fallback if the image can't be loaded */
    cursor: url('/imgs/camera.png') 1 1, auto;
  }
  
  /* 2. Override the cursor for links, buttons, and other interactive elements */
  a,
  button,
  img,
  label,
  input[type="submit"],
  input[type="button"],
  select {
    cursor: url('/imgs/hand.png') 1 1, auto !important;
  }

@media only screen and (max-width: 960px){
.navbar .container {
	display: flex;
	flex-direction: column;
	align-content: flex-start;
	align-items: flex-start !important;
}
#imageModal .modal-dialog {
	margin-top: 30px;
}
.modal {
	z-index: 999999999999;
}
.modal-header .close {
	position: absolute;
	top: 25px;
	right: 25px;
	z-index: 1060;
	opacity: 1;
	font-size: 2rem;
	color: #333 !important;
	text-shadow: 0 1px 1px rgba(255,255,255,0.7);
	padding: 0.5rem;
	line-height: 1;
}

.col-md-6 {
	-ms-flex: 0 0 100% !important;
	flex: 0 0 100% !important;
    max-width: 100% !important;
}
}