/* Base styles for the navigation tabs */
.nav-tabs {
    margin-top: 8px;
    border-bottom: none; /* Remove bottom border entirely */
    justify-content: center; /* Center tabs within the container */
    background-color: #265594; /* Uniform blue background for the tab bar */
    padding: 5px; /* Padding around the tab for better spacing */
    border-radius: 4px;
}

/* Style for all tabs */
.nav-tabs .nav-link {
    color: #FFFFFF; /* White text for all tabs */
    font-size: 1rem; /* Consistent font size */
    padding: 10px 20px; /* Ample padding for easy interaction */
    letter-spacing: 0.5px; /* Added letter spacing */
    line-height: 1.4; /* Added line height */
    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out; /* Smooth transition for background and text color */
    border-radius: 0.375rem; /* Rounded corners for a modern touch */
    margin-right: 5px; /* Spacing between tabs */
    box-shadow: none; /* No shadow for a flatter design */
    border: none; /* No borders to keep it clean */
}

/* Dynamic styling for the active tab */
.nav-tabs .nav-link.active {
    background-color: #af0413; /* Slightly darker blue for the active tab */
    color: black !important; /* Keeping text black on active tab */
}

/* Hover effect */
.nav-tabs .nav-link:hover {
    background-color: #092650; /* Darker blue on hover for a subtle effect */
    color: white !important; /* Ensure text is white on hover */
}

/* Prevent change in text color for active tab on hover */
.nav-tabs .nav-link.active:hover {
    color: black !important; /* Keep text color black when active tab is hovered */
}

@media (max-width: 768px) {
    .nav-tabs .nav-link {
        padding: 8px 16px; /* Slightly smaller padding on smaller screens */
        font-size: 0.9rem; /* Slightly smaller font size for better fit */
    }
}

.iframe {
    width: 100%;
    height: 500px;
    /*height: calc(100vh - 80px);*/
    border: none;
}

.button-custom-style {
    background-color: #265594 !important;
    border: 2px solid #265594 !important;
    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
    font-weight: 500 !important;
    letter-spacing: 0.5px !important;
}

.button-custom-style:hover {
    background-color: #092650 !important;
    transform: scale(1.05) !important;
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2) !important;
}

.icon-size {
    max-width: 40px !important;  /* Maximum width for all screens */
    max-height: 40px !important; /* Maximum height for all screens */
    width: auto !important;      /* Maintain aspect ratio */
    height: auto !important;     /* Maintain aspect ratio */
    object-fit: contain !important; /* Prevent any stretching */
}

@media (max-width: 768px) {
    .icon-size {
        max-width: 30px !important; /* Smaller width for mobile */
        max-height: 30px !important; /* Smaller height for mobile */
        width: auto !important;
        height: auto !important;
    }

    /* Custom class for titles */
    .icon-title {
        margin-top: 0.1rem !important; /* Reduced margin between icon and text */
        font-size: 0.85rem !important; /* Smaller font size for mobile */
        line-height: 1rem !important;  /* Compact line-height for titles */
    }
}

@media (min-width: 768px) and (max-width: 992px) {
    .icon-size {
        max-width: 35px !important; /* Adjusted width for tablets */
        max-height: 35px !important; /* Adjusted height for tablets */
        width: auto !important;
        height: auto !important;
    }

    .icon-title {
        margin-top: 0.2rem !important; /* Slightly more margin for larger screens */
        font-size: 1rem !important;    /* Regular font size for tablets */
    }
}


.responsive-title {
    font-size: 32px;
}

@media (max-width: 768px) {
    .responsive-title {
        font-size: 24px; /* Adjust this size for tablets and small screens */
    }
}

@media (max-width: 576px) {
    .responsive-title {
        font-size: 18px; /* Adjust this size for mobile screens */
    }
}

/* Ensure the title has a fixed number of lines */
.post-item h2 {
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Limit the title to 2 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Ensure the description has a fixed number of lines */
.post-item-description p {
    display: -webkit-box;
    -webkit-line-clamp: 3; /* Limit the description to 3 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (max-width: 1024px) {
    .post-item {
        min-height: 60vh; /* Increase the height a bit more for better coverage */
    }

    .post-item img {
        max-height: 200px; /* Control the image height to fit within the card */
    }
}

@media (max-width: 768px) {
    .post-item {
        min-height: 40vh; /* For smaller screens like tablets */
    }

    .post-item img {
        max-height: 180px;
    }
}

@media (min-width: 1200px) {
    .post-item {
        min-height: 30vh; /* For large screens */
    }
}

/* Base min-height for cards on most screens */
.post-item {
    min-height: 50vh; /* Default for most screens */
}

/* Reduce min-height for larger screens (desktop and above) */
@media (min-width: 1200px) {
    .post-item {
        min-height: 40vh; /* Reduce the height for large screens (e.g., desktops) */
    }
}

/* For smaller screens like tablets, adjust accordingly */
@media (max-width: 1024px) {
    .post-item {
        min-height: 40vh; /* Increase height for medium screens */
    }
}

@media (max-width: 768px) {
    .post-item {
        min-height: 40vh; /* Smaller height for smaller screens */
    }

    .post-item img {
        max-height: 180px;
    }
}




/* Optional: Ensure carousel items have consistent padding and spacing */
.carousel .post-item {
    margin-right: 15px;
}