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

/* Normalize import */
@import url('https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css');

/* Explicit resets for top space */
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

@supports (display: grid) {
    #element {
        display: grid;
    }
}
/* Fallback for non-supporting browsers */
#element {
    display: flex; /* Or another alternative */
}

body {
    font-family: 'Inter', sans-serif;
    background-color: #f8f9fa;
    color: #333;
    padding-top: 56px;    /* Offset for fixed navbar height */
    padding-bottom: 60px; /* Adjust based on your footer's height, e.g., 60px */
}

.navbar {
    background-color: #001F3F; /* Navy blue */
    /* Remove manual fixed styles; use Bootstrap's fixed-top class in HTML instead */
}

.navbar-brand, .nav-link {
    color: #fff !important;
}

.navbar-brand:hover, .nav-link:hover {
    color: #00A0B0 !important; /* Teal accent */
}

.navbar-graphic {
    height: auto;          /* Allows natural scaling */
    max-height: 40px;      /* Caps height to fit standard navbar (~56px total) */
    width: auto;           /* Preserves aspect ratio */
    max-width: 100px;      /* Optional: Caps width to prevent overflow; adjust as needed */
    object-fit: contain;   /* Scales without distortion or cropping */
    margin-left: 10px;     /* Space from left edge; adjust if needed */
    margin-right: 20px;

;    /* Increased buffer between image and text; tweak to 20px or more for bigger gap */
    align-self: center;    /* Vertically centers in flex container */
}

}@media
 (max-width: 991px) {
    .navbar-graphic {
        max-height: 30px;  /* Smaller on mobile for better fit */
    }
}



.hero {
    background-color: #001F3F;
    color: #fff;
    padding: 100px 0;
    text-align: center;
}

.card {
    border: none;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    transition: transform 0.3s;
}

.card:hover {
    transform: translateY(-5px);
}

.btn-primary {
    background-color: #00A0B0;
    border-color: #00A0B0;
}

.footer {
    background-color: #001F3F;
    color: #fff;
    padding: 20px 0;
    text-align: center;
}

.hero-image {
    background-color: #001F3F; /* Navy blue to make continuous with navbar and hero */
    padding: 20px 0; /* Adjust padding for spacing around the image */
    text-align: center; /* Center the image horizontally */
}

.hero-img {
    width: 20%;      /* Scales to 20% of the parent container's width */
    height: auto;    /* Maintains aspect ratio */
    max-width: 100%; /* Optional: Ensures it doesn't exceed container on small screens */
}

/* Sample responsive adjustments */
@media (max-width: 768px) {
    .hero {
        padding: 50px 0;
    }
    .hero-img {
        width: 50%;
    }
    body {
        padding-top: 52px; /* Adjust for smaller navbar on mobile if needed */
    }
}