/* General Styles */
body {
    font: 18px "Montserrat", sans-serif;
    line-height: 1.8;
    color: black;
    background-color: #f2f2f2;
    padding-top: 60px;
    margin: 0;
}

/* Container Padding */
.container {
    padding: 0 15px;
}

/* Links Styling */
a {
    color: black; /* Black color for links by default */
    text-decoration: none; /* Remove underline from links */
}

a:hover, a:focus {
    color: red; /* Red color on hover or focus */
    text-decoration: none; /* Keep underline removed on hover */
}

/* Flexbox Layout for Articles */
.article-row {
    display: flex;
    align-items: flex-start; /* Align items to the top */
    margin-bottom: 20px;
    border: 1px solid #ddd;
    padding: 15px;
    background-color: #fff;
}

/* Image Column */
.img-col {
    flex: 0 0 25%; /* Image column takes up 25% on larger screens */
}

/* Text Column */
.text-col {
    flex: 1; /* Text column takes the rest */
    max-width: 75%; /* Set a maximum width to prevent overflow */
}

/* Image Container */
.img-container {
    width: 100%;
    height: auto; /* Allow height to adjust based on the image */
    overflow: hidden; /* Ensures that images that exceed height will be cropped */
}

/* Image Styles */
.img-container img {
    width: 100%;
    height: auto; /* Allow height to adjust based on aspect ratio */
    max-height: 200px; /* Set a maximum height for images to maintain consistency */
    object-fit: cover; /* Ensures the image covers the container without distortion */
}

/* Header Navbar Styling */
.navbar-custom {
    background-color: #444;  /* Match the footer's background color */
    border: none; /* Remove any border if present */
}

/* Navbar Links */
.navbar-custom .navbar-nav > li > a {
    color: #cccccc; /* Set the menu text to a light gray */
    text-transform: uppercase; /* Optional: Keep text uppercase for a bold look */
    font-weight: normal; /* Remove the bold effect */
    font-family: "Montserrat", sans-serif; /* Uniform font for all menu items */
}

/* Navbar Hover and Active States */
.navbar-custom .navbar-nav > li > a:hover,
.navbar-custom .navbar-nav > li > a:focus {
    background-color: #444; /* Darker color on hover */
    color: red; /* Red text on hover */
}

.navbar-custom .navbar-nav > li.active > a {
    background-color: #444; /* Active link background color */
    color: #ffffff; /* Active link text color */
}

/* Navbar Brand */
.navbar-custom .navbar-brand {
    color: #cccccc; /* Same light gray color as menu links */
    font-family: "Montserrat", sans-serif; /* Consistent font */
    text-transform: uppercase; /* Optional: uppercase styling */
}

/* Navbar Brand Hover */
.navbar-custom .navbar-brand:hover,
.navbar-custom .navbar-brand:focus {
    color: red; /* Red text on hover for the brand link */
}

/* Navbar Toggle Button (for mobile view) */
.navbar-custom .navbar-toggle {
    background-color: #444; /* Dark background for the toggle button */
    border-color: #444; /* Border matches the background */
}

.navbar-custom .navbar-toggle .icon-bar {
    background-color: #fff; /* Make the toggle button lines white */
}

/* Responsive Design */
@media (max-width: 1024px) {
    .article-row {
        flex-direction: row; /* Keep articles in row layout on larger tablets */
    }

    .img-col {
        flex: 0 0 40%; /* Image takes 40% width on medium screens */
        max-width: 40%; /* Maintain maximum width */
    }

    .text-col {
        flex: 1; /* Keep taking the rest */
        max-width: 60%; /* Maintain maximum width */
    }
}

@media only screen and (max-width: 768px) {
    .article-row {
        flex-direction: column; /* Stack elements vertically on smaller screens */
    }

    .img-col {
        display: none !important; /* Hide the image column on mobile devices */
    }

    .text-col {
        max-width: 100%; /* Text takes full width on smaller screens */
    }
}

/* Miscellaneous Styles */
.blazina {
    padding-top: 60px;
}

.border-bottom-only {
    border-bottom: 1px solid black;
}

/* Footer Styles */
footer {
    background-color: #f1f1f13; /* Change to your desired background color */
    text-align: center; 
    padding: 10px; /* Adds padding around the footer content */
}

footer a {
    color: #cccccc; /* Light gray links instead of bright white */
    text-decoration: none;
}

footer a:hover {
    color: #ffffff; /* Make links white on hover for contrast */
}

/* Media Queries for Very Small Screens */
@media only screen and (max-width: 576px) {
    body {
        font-size: 16px;
    }

    .article-row {
        flex-direction: column;
    }

    .text-col {
        max-width: 100%;
    }

    footer {
        padding: 10px 0;
    }
}