/* Custom navbar styles */
.navbar-nav {
    justify-content: center; /* Center the navigation items within their container */
}

/* Ensure the navbar brand stays on the left */
.navbar-brand {
    margin-right: auto; /* Keeps the logo on the left and pushes everything else to the right */
}

/* nav bar style */
/* Custom navbar styles */
.navbar-custom {
    background-color: #004085; /* Dark blue background */
    border-color: #004085; /* Dark blue border if needed */
}

.navbar-custom .navbar-brand,
.navbar-custom .nav-link {
    color: #ffffff; /* White text */
}

.navbar-custom .nav-link:hover,
.navbar-custom .nav-link:focus {
    color: #cccccc; /* Light grey for hover/focus */
}

.navbar-custom .navbar-toggler {
    border-color: #cccccc; /* Light grey border for the toggler */
}

.navbar-custom .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(255, 255, 255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    /* Custom icon color */
}
/* Custom styles for service cards */
.card {
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out; /* Smooth transition for transform and shadow */
    cursor: pointer; /* Indicates that the card is interactive */
}

.card:hover {
    transform: scale(1.05); /* Scales up the card to 105% of its original size */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Adds shadow for depth */
}

.container .row .col-md-4 {
    display: flex;
    flex: 1;
}

.card {
    width: 100%;  /* Ensures all cards are the same width */
    height: 100%; /* Ensures all cards stretch to the same height in their columns */
    background-color: #f8f9fa; /* Sets a light background color for all cards */
    display: flex;
    flex-direction: column;  /* Organizes the card content in a column */
    justify-content: space-between; /* Distributes space between content */
}

.card-body {
    flex: 1; /* Allows the card body to expand to fill available space */
    display: flex;
    flex-direction: column; /* Ensures content inside card body is organized vertically */
    justify-content: space-between; /* Distributes space between items inside card body */
}

.btn-primary {
    margin-top: 10px; /* Adds space above the button */
}

/* ------------------------------- */