/* Custom CSS */

.banner {
    background: url('../img/banner.jpg') center center / cover no-repeat;
   
    position: relative;
    padding: 100px 0; /* Adjust padding as needed */
}

/* Overlay effect */
.banner .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6); /* Dark overlay with 60% opacity */
    z-index: 1;
}

/* Container with text */
.banner .container {
    position: relative;
    z-index: 2; /* Ensures text appears above the overlay */
}

/* Text styling */
.banner h1,
.banner p {
    text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.7); /* Shadow to enhance text contrast */
}

.gallery-item {
    margin-bottom: 20px;
}
/* Initial logo style */
#navbar-logo {
    transition: max-width 0.3s ease, padding 0.3s ease;
}

/* Sticky style */
.sticky .navbar-brand #navbar-logo {
    max-width: 50px; /* Reduced size when sticky */
    padding: 5px 0; /* Optional: adjust padding for better alignment */
}

/* Global Styles for All Heading Tags */
  h2, h3, h4, h5, h6 {
    font-family: 'Arial', sans-serif; /* Font for all headings */
    font-weight: bold; /* Bold font weight */
    color: #000; /* Black color for the text */
    letter-spacing: 1px; /* Space between letters */
    text-transform: capitalize; /* Capitalize the first letter of each word */
    margin: 10px 0; /* Space around headings */
    padding: 0 5px; /* Optional: adds space inside the heading */
    position: relative; /* For positioning the underline */
    display: inline-block; /* Allow underline to be aligned with the text */
    transition: color 0.3s ease; /* Smooth transition for color change */
}

/* Stylish Underline Effect */
h1::after, h2::after, h3::after, h4::after, h5::after, h6::after {
    content: ''; /* Empty content */
    position: absolute; /* Position the underline */
    width: 0; /* Initially no underline */
    height: 3px; /* Thickness of the underline */
    background: linear-gradient(90deg, rgba(255,0,0,1) 0%, rgba(0,255,0,1) 50%, rgba(0,0,255,1) 100%); /* Gradient color */
    bottom: 0; /* Position the underline at the bottom */
    left: 0; /* Align the underline to the left */
    transition: width 0.4s ease-in-out; /* Smooth animation for the width */
}

/* Hover Effect: Show the underline with gradient color */
h1:hover::after, h2:hover::after, h3:hover::after, h4:hover::after, h5:hover::after, h6:hover::after {
    width: 100%; /* Expand the underline to the full width */
}