@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;700&display=swap');

body {
    font-family: 'Montserrat', sans-serif;
    color: #333;
    background: linear-gradient(135deg, #000033 25%, #000044 25%, #000044 50%, #000033 50%, #000033 75%, #000044 75%, #000044 100%);
    background-size: 1600px 1600px;
    animation: wave 10s infinite linear;
    margin: 0;
    padding: 0;
}

.hero {
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), no-repeat center center/cover;
    padding: 100px 0;
    color: white;
}

.service {
    background: #333;
    padding: 20px;
    margin: 10px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.1);
    transition: transform 0.5s ease-in-out, box-shadow 0.5s ease-in-out;
    border-radius: 8px;
}

    .service:hover {
        transform: scale(1.05);
        box-shadow: 0px 12px 24px 0px rgba(0,0,0,0.2);
    }

.services {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.service {
    background: #333;
    padding: 20px;
    margin-bottom: 20px; /* Add some space between rows */
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-radius: 8px;
}

@media (max-width: 768px) {
    .service {
        flex: 0 0 100%; /* Full width on small screens */
        max-width: 100%; /* Full width on small screens */
    }
}

@media (min-width: 769px) and (max-width: 991px) {
    .service {
        flex: 0 0 50%; /* Half width on medium screens */
        max-width: 50%; /* Half width on medium screens */
    }
}

@media (min-width: 992px) {
    .service {
        flex: 0 0 20%; /* One-sixth width on large screens */
        max-width: 20%; /* One-sixth width on large screens */
    }
}

.footer {
    background-color: #f8f9fa; /* Light gray background, can be adjusted */
    padding: 20px 0; /* Padding for visual spacing */
    color: #6c757d; /* Muted text color */
    text-align: center; /* Center-align text */
    border-top: 1px solid #dee2e6; /* Adds a subtle border-top for definition */
}

.footer-details p {
    margin: 5px 0; /* Adds a little space between lines */
    line-height: 1.5; /* Enhances readability */
}

.footer-details a {
    color: #007bff; /* Bootstrap primary link color, adjust as necessary */
    text-decoration: none; /* No underline */
}

    .footer-details a:hover {
        text-decoration: underline; /* Underline on hover for better interaction */
    }

@media (max-width: 768px) {
    .footer-details {
        text-align: center; /* Ensures that the text aligns well on smaller screens */
        padding: 10px; /* Adjusts padding for smaller screens */
    }
}

.nav-menu li.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

    .dropdown-content a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
        text-align: left;
    }

        .dropdown-content a:hover {
            background-color: #f1f1f1;
        }

.dropdown:hover .dropdown-content {
    display: block;
}

/* Responsive sizes for the logo */
@media (max-width: 768px) { /* For tablets and smaller devices */
    .teamulogo img {
        width: 120px; /* Smaller size for smaller screens */
    }
}

@media (min-width: 769px) and (max-width: 1024px) { /* For small desktops and large tablets */
    .teamulogo img {
        width: 300px; /* Medium size for medium screens */
    }
}

@media (min-width: 1025px) { /* For large desktops */
    .teamulogo img {
        width: 400px; /* Large size for large screens */
    }
}

/* Additional custom styles for dropdown if needed */
.navbar-nav .dropdown-menu {
    background-color: #333; /* Background color for the dropdown */
}

    .navbar-nav .dropdown-menu .dropdown-item {
        color: white; /* Text color for dropdown items */
    }

        .navbar-nav .dropdown-menu .dropdown-item:hover {
            background-color: #444; /* Hover background color for dropdown items */
        }


/* Mobile view adjustments */
@media (max-width: 991px) {
    .navbar-nav {
        flex-direction: column;
        text-align: center;
    }
}

/* Other media queries */
@media (max-width: 600px) {
    .navbar-brand img {
        width: 100px; /* Adjust logo size for smaller screens */
    }

    .navbar-nav .nav-link {
        font-size: 14px;
        padding: 10px 0;
    }

    .tsti-mn {
        font-size: 14px;
    }
}

/* Default menu link color (white) */
.navbar-nav .nav-link {
    color: white !important; /* Default color */
    transition: color 0.3s ease; /* Smooth transition for color change */
}

    /* Hover state (when mouse is over the link) */
    .navbar-nav .nav-link:hover {
        color: gold !important; /* Change color on hover */
    }

    /* Active state (when clicked) */
    .navbar-nav .nav-link.active {
        color: gold !important; /* Change color when active */
    }


/* Default smaller logo size */
.navbar-logo {
    width: 100px !important; /* Reduced size */
    height: auto !important;
}

/* Adjustments for different screen sizes */

/* Smaller size for mobile devices */
@media (max-width: 768px) {
    .navbar-logo {
        width: 100px !important; /* Smaller logo for small screens */
    }
}

/* Slightly larger for medium devices */
@media (min-width: 769px) and (max-width: 1024px) {
    .navbar-logo {
        width: 100px !important; /* Medium size for tablets */
    }
}

/* Full size for larger devices */
@media (min-width: 1025px) {
    .navbar-logo {
        width: 100px !important; /* Larger size for desktops */
    }
}

/* Customize the navbar-toggler icon to be white */
.navbar-light .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba%28255, 255, 255, 1%29' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

/* Optional: Adjust the color for navbar toggler border */
.navbar-toggler {
    border-color: rgba(255, 255, 255, 0.5); /* Makes the button border white */
}

@media (max-width: 768px) {
    .life-member-content {
        flex-direction: column;
        text-align: center;
    }

    .life-member-photo {
        margin-right: 0;
        margin-bottom: 20px;
    }

    .life-member-title {
        flex-direction: column;
    }

    .life-member-name, .life-member-title {
        text-align: center;
    }
}

/* Customize the navbar-toggler icon to be white */
.navbar-light .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 1)' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

/* Optional: Make the button border white */
.navbar-toggler {
    border-color: white;
    background-color:white;
}
/* Responsive layout */
@media (max-width: 768px) {
    .resource-cards {
        flex-direction: column;
        align-items: center;
    }
}

@media (max-width: 768px) {
    .training-content {
        font-size: 16px;
    }

    iframe {
        height: 300px;
    }
}

/* Responsive styling */
@media (max-width: 768px) {
    .media-card {
        width: 100%;
    }
}

/* Make the gallery responsive */
@media (max-width: 768px) {
    .gallery-item {
        width: 150px;
        height: 150px;
    }
}


/* Custom dark navy blue background for navbar */
.navbar-dark-custom {
    background-color: #0C1C33; /* Dark Navy Blue */
    padding-top: 5px; /* Reduced top padding */
    padding-bottom: 5px; /* Reduced bottom padding */
}

/* Custom logo size */
.navbar-brand img {
    width: 100px; /* Adjust logo size */
    height: auto; /* Keep aspect ratio of the logo */
}

/* Reduce height of the navbar items */
.navbar-nav .nav-link {
    color: #ffffff !important; /* White text for the links */
    padding-top: 6px; /* Reduce top padding of each link */
    padding-bottom: 6px; /* Reduce bottom padding of each link */
}

    .navbar-nav .nav-link:hover {
        color: #ffd700 !important; /* Gold color when hovering */
    }

/* For mobile screens - Add a margin for dropdown icon and text */
.navbar-nav .dropdown-menu {
    background-color: #0C1C33; /* Same dark navy blue background for dropdown */
}

/* Add spacing between the logo and the navbar links */
.navbar-nav {
    margin-left: 10px; /* Adjust space between logo and menu items */
}
.navbar-brand {
    display: flex; /* Align logo and title horizontally */
    align-items: center; /* Center vertically */
}

/* Style for the title */
.navbar-title {
    font-size: 1.5rem;
    font-weight: bold;
    color: white;
    margin-left: 10px; /* Space between the logo and title */
}
/* Mobile-specific adjustments */
@media (max-width: 1100px) {
    /* Set a larger height for the navbar to match the logo height and a bit more space */
    .navbar-dark-custom {
        padding-top: 0px; /* No top padding */
        padding-bottom: 0px; /* No bottom padding */
        height: 120px; /* Increased height to match logo and give more space */
    }

    /* Adjust the navbar link padding for mobile */
    .navbar-nav .nav-link {
        padding-top: 10px; /* Adjust padding for each link */
        padding-bottom: 10px; /* Adjust padding for each link */
        text-align: center; /* Center the text in the navbar */
    }

    /* Adjust the logo size for mobile - Increased size */
    .navbar-brand img {
        width: 100px; /* Increase logo size for mobile */
        /*margin-top: 20px;*/ /* You can add some margin to fine-tune vertical placement */
    }

    /* Adjust dropdown menu padding for mobile */
    .navbar-nav .dropdown-menu {
        padding-top: 0px; /* No padding in dropdown items */
        padding-bottom: 0px; /* No padding in dropdown items */
        background-color: #0C1C33; /* Ensure the same dark navy blue background for dropdown */
    }

    /* Ensure the background color for the navbar is visible on mobile */
    .navbar-nav, .navbar-brand, .navbar-toggler {
        background-color: #0C1C33 !important; /* Set navbar background color */
    }

    .navbar-title {
        font-size: 1.2rem; /* Adjust font size on mobile */
    }
}

/* Default for screens larger than 1024px (Desktop version) */
@media (min-width: 1025px) {
    .navbar-collapse {
        display: block; /* Ensure menu is shown */
    }

    .navbar-toggler {
        display: none; /* Hide the hamburger button on larger screens */
    }
}