:root {
    --bga-green: #2E7D32;
    --bga-navy: #1A3A5A;
    --bga-sand: #E8D0A9;
    --bga-light: #F5F5F5;
    --bga-success: #4CAF50;
    --bga-warning: #FFA000;
    --bga-danger: #D32F2F;
}

/* General Styles */    
body {  
    font-family: 'Calibri', Arial, sans-serif;  
    font-size: 1.2rem;  
    background-color: #d2ddfd;  
    margin: 0;  
    padding: 0;  
}  
  
.container-fluid {  
    margin-top: 20px;  
}  
  
.about-bga {  
    width: 100%; /* Ensure it uses the full width */  
    padding: 0; /* Remove any padding that could cause overflow */  
    margin: 0 auto; /* Center in its parent */  
    box-sizing: border-box; /* Include padding in the width calculation */  
}  
  
p {  
    overflow-wrap: break-word; /* Allows long words to break into the next line */  
    margin: 0 1rem; /* Ensure some horizontal spacing */  
    line-height: 1.5; /* Improve readability */  
}  
  
/* Image Gallery Styles */    
.image-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 1px; /* Add space between images */
}

.image-gallery .image-container {
    flex: 1 1 calc(25% - 10px); /* Ensure no more than 4 images fit in a row */
    margin-bottom: 5px; /* Add some space between rows */
    position: relative;
    height: 150px; /* Reduced height */
}

.image-gallery .gallery-image {
    width: 100%; /* Ensure images take full width of their container */
    height: 100%; /* Ensure images take full height of their container */
    object-fit: cover; /* Changed to cover for better aspect ratio */
    position: absolute;
    top: 0;
    left: 0;
}

  
.card {  
    border-radius: 15px; /* Rounded corners for the card */  
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */  
    transition: box-shadow 0.3s ease; /* Smooth shadow transition */  
}  
  
.card-body {  
    padding: 2rem; /* More padding for the card body */  
}  
  
.btn {  
    transition: background-color 0.3s, transform 0.3s; /* Smooth transition for hover effects */  
}  
  
.btn:hover {  
    transform: translateY(-2px); /* Slight lift effect on hover */  
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Shadow effect on hover */  
}  
  
/* Navbar Styles */    
header {  
    display: flex; /* Ensures flex display */  
    flex-direction: row; /* Row layout */  
    align-items: center; /* Center items vertically */  
    padding: 5px; /* Padding around the header */  
    flex-wrap: nowrap; /* Prevent wrapping */  
}  
  
.navbar-brand-img {  
    min-height: 50px; /* Smaller logo size for phones */  
    max-height: 100px; /* Controls logo height for consistency */  
    width: auto; /* Ensure it maintains aspect ratio */  
}  
  
.welcome-container {  
    flex: 1; /* Allow this to grow */  
    min-height: auto; /* Minimum height */  
    margin-left: 5px; /* Space between logo and welcome text */  
    margin-right: 5px; /* Space to the right */  
    border-radius: 5px; /* Rounded corners */  
    overflow: hidden; /* Hide overflow content */  
    padding: 15px; /* Padding for text */  
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent; /* Remove any background */
}  

.welcome-message {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--bga-navy);
    text-align: center;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    background: transparent; /* Remove any background */
}

/* Responsive Styles */  
.navbar-toggler {  
    margin-left: auto; /* Align the toggler button to the right */  
}  

.email {
    word-wrap: break-word;
    overflow-wrap: break-word;
    font-size: 0.875em; /* Adjust the font size as needed */
}


/* Media Queries */    
@media (max-width: 768px) {  
    header {  
        flex-direction: row; /* Keep items in a row */  
        padding: 2px; /* Padding */  
    }  
    .welcome-container {  
        padding: 10px; /* Slightly reduce padding */  
        white-space: normal; /* Allow for wrapping text */  
    }  
      
    .welcome-message {  
        font-size: 1rem; /* Adjust font size for smaller screens */  
        /* Optional: you can change this based on design preference */  
    }  
    .navbar-nav {  
        flex-direction: column; /* Ensure vertical stacking in collapsible menu */  
        margin-left: 10px; /* Space between navbar items */  
    }  
  
    /* Collapse styles */  
    .collapse {  
        background-color: white; /* Background color for dropdown */  
        z-index: 1; /* Places dropdown above content */  
    }  
  
    .nav-item {  
        width: 100%; /* Full width for nav items for easier clicking */  
        text-align: center; /* Center the text in each link */  
    }  
  
    .nav-link {  
        padding: 10px; /* Add padding for touch responsiveness */  
        color: #000; /* Adjust link color for visibility */  
        text-decoration: none; /* Remove underline */  
    }  
  
    .nav-link:hover {  
        background-color: #f0f0f0; /* Add a hover effect */  
    }  
}  
  
@media (max-width: 480px) {  
    main {  
        padding: 0 0.5rem; /* Slight padding for aesthetics */  
        margin: 0; /* Ensure no margins that could cause overflow */  
    }  
  
    body {  
        font-family: 'Calibri', Arial, sans-serif;  
        font-size: 4vw; /* Responsive font size */  
    }  
  
    .navbar-brand-img {  
        min-height: 30px; /* Smaller logo size for phones */  
        max-height: 50px; /* Controls logo height for consistency */  
        width: auto; /* Ensure it maintains aspect ratio */  
    }  
  
    .welcome-container {  
        max-height: 55px;  
        min-height: 55px; /* Set a minimum height */  
        margin-left: 2px; /* Space to the left */  
        margin-right: 2px; /* Space to the right */  
        padding: 2px; /* Padding for the welcome container */  
        border-radius: 5px; /* Rounded corners */  
        overflow: hidden; /* Hide any overflow text */  
        background-image: none; /* Remove background image */  
        background-position: center; /* Center the background image */  
        background-size: cover; /* Now set as cover */  
        color: white; /* Text color */  
    }  
  
    .welcome-message {  
        font-size: 14px; /* Smaller font size for phones */
        color: var(--bga-navy); /* Matching color with desktop view */
    }  
  
    .navbar-toggler {  
        margin-left: 0px; /* Space between the toggle button and other elements */  
        margin-right: 75px; /* Space to the right of the toggle button */  
        width: 30px; /* Set a fixed width if needed */  
        height: 30px; /* Set a fixed height if needed */  
        border: none; /* Remove border */  
        border-radius: 5px; /* Optional: rounded corners */  
        color: white; /* Text/icon color */  
    }  
  
    /* Collapse styles */  
    .collapse {  
        position: absolute; /* Position the collapsible menu */  
        top: 60px; /* Adjust based on navbar height */  
        left: 0;  
        width: 100%; /* Full width for dropdown */  
        background-color: white; /* Background color for dropdown */  
        z-index: 1; /* Ensure it appears above other elements */  
    }  
  
    .navbar-nav {  
        padding: 10px; /* Padding around the menu */  
    }  
  
    h2 {  
        font-size: 5vw; /* Reduced size for mobile screens */  
        margin: 0.3em 0; /* Adjust margin for mobile */  
        text-align: center; /* Center align headings for mobile */  
    }  
  
    .about-bga {  
        padding: 0 0.5rem; /* Add small padding for aesthetics on small screens */  
    }  
}  
  
/* Optional: Add a media query for large screens to adjust the padding or other properties further */    
@media (min-width: 1024px) {  
    .welcome-container {  
        padding: 20px; /* More padding for large screens */  
    }  
}