/*
* Base (Mobile-First) Styles
* Target: All devices (default)
*/
:root {
    --primary-color: #007bff;
    --secondary-color: #6c757d;
    --light-gray-color: #f8f9fa;
    --dark-text-color: #343a40;
    --light-text-color: #fff;
    --yellow-color: #ffc107;
}

body {
    font-family: 'Montserrat', sans-serif;
    color: var(--dark-text-color);
    font-size: 1rem; /* Base font size */
}

.bg-dark {
    background: var(--dark-text-color) !important;
}

.navbar {
    background-color: var(--light-gray-color);
    border-bottom: 1px solid #dee2e6;
}

.navbar-brand {
    font-weight: 700;
}


.nav-link {
    color: var(--dark-text-color) !important;
    font-weight: 500;
}

.nav-link.active,
.nav-link:hover {
    color: var(--primary-color) !important;
}

.btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.btn-primary:hover {
    background-color: #0056b3;
    border-color: #0056b3;
}

.btn-yellow {
    background-color: var(--yellow-color);
    border-color: var(--yellow-color);
    color: #000;
}

.btn-yellow:hover {
    background-color: #e0a800;
    border-color: #d39e00;
    color: #000;
}

.card {
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s ease;
}

.card:hover {
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.15);
}

.card-title {
    font-weight: 700;
}

.news-card {
    padding: 0;
}

.news-card .card-title {
    font-size: 1rem;
    padding: 0.5rem;
}

.news-card .card-text {
    font-size: 0.875rem;
    padding: 0 0.5rem 0.5rem;
}

/* Responsive image wrapper for news */
.news-image-wrapper {
    height: 250px; /* Default height for mobile */
    overflow: hidden;
}

.news-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: fill; /* Use cover for better image scaling */
}

/* Utility class to hide elements on mobile */
.hide-on-mobile {
    display: none;
}

/* Service Page Title Styles */
.services-title h1 {
    font-size: 2.2rem; /* Mobile-first font size */
    font-weight: 300;
    color: #0056b3; /* A calming blue */
    word-wrap: break-word; /* Ensure long words don't overflow */
}

/*
* Small mobile
* Target: 320px and up
*/
@media (min-width: 320px) {
    /* Future styles for small mobiles */
}

/*
* Mobile
* Target: 480px and up
*/
@media (min-width: 480px) {
    .hide-on-mobile {
        display: initial; /* Show element on tablets and larger */
    }

    .news-image-wrapper {
        height: 300px; /* Increase height for tablets */
    }

    /* --- Tablet Icon and Button Styles --- */
    .header-top-bar .fa-lg {
        font-size: 1.75rem; /* Larger icons in the top bar */
    }

    .navbar-toggler {
        font-size: 1.5rem; /* Larger menu button */
        padding: 0.5rem;
    }
}

/*
* Tablet
* Target: 768px and up
*/
@media (min-width: 768px) {
    .header-top-bar .fa-lg {
        font-size: 2rem; /* Example of adjusting icon size */
        vertical-align: middle;
    }

    .news-image-wrapper {
        height: 350px; /* Increase height for laptops */
    }

    .services-title h1 {
        font-size: 3rem; /* Tablet font size */
    }
}

/*
* Laptop
* Target: 1024px and up
*/
@media (min-width: 1024px) {
    .news-image-wrapper {
        height: 400px; /* Full height for desktops */
    }

    .services-title h1 {
        font-size: 3.5rem; /* Desktop font size */
    }
}

/*
* Desktop
* Target: 1280px and up
*/
@media (min-width: 1280px) {
    /* Future styles for desktops */
}

/*
* Large desktop / 4K
* Target: 1536px and up
*/
@media (min-width: 1536px) {
    /* Future styles for large desktops */
}