/* Custom CSS to override Bootstrap secondary color */
:root {
    --bs-secondary: #B6343B !important;
    --bs-secondary-rgb: 182, 52, 59 !important;
}
.fa {
  color: #B6343B !important;
}

.bg-secondary {
    background-color: #B6343B !important;
}

.text-secondary {
    color: #B6343B !important;
}

.btn-secondary {
    background-color: #B6343B !important;
    border-color: #B6343B !important;
}

.btn-outline-secondary {
    color: #B6343B !important;
    border-color: #B6343B !important;
}

/* Change breadcrumbs color to white on red background */
.breadcrumb-item,
.breadcrumb-item.active,
.breadcrumb-item a {
    color: #fff !important;
}

/* Change header h1 color from white to black */
.bg-header h1.text-white {
    color: #000 !important;
}

.breadcrumb-item + .breadcrumb-item::before {
    color: #fff !important;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-secondary:active {
    background-color: #B6343B !important;
    color: #fff !important;
}

.border-secondary {
    border-color: #B6343B !important;
}

/* Change accordion button text color to black in FAQ */
.accordion-button {
    color: #000 !important;
}

/* Change breadcrumb text color to black */
.breadcrumb-item a {
  color: #000 !important;
}
.breadcrumb-item.active {
  color: #000 !important;
}

/* Override table styles */
.table-secondary {
    --bs-table-bg: #f8d7da !important;
    --bs-table-striped-bg: #eccccf !important;
    --bs-table-active-bg: #dfc2c4 !important;
    --bs-table-hover-bg: #e5c7ca !important;
}

/* Change links color in FAQ page to red */
.faq-section a {
    color: #B6343B !important;
}

/* Center icons vertically in Benefits section */
.service-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80px; /* Fixed height for consistent spacing */
}

/* Change text-primary color to red, except in header */
.text-primary {
    color: #B6343B !important;
}

/* Keep text-primary color white in header */
.navbar .text-primary {
    color: #fff !important;
}

/* Mobile header background */
@media (max-width: 768px) {
    .bg-hero, .bg-header {
        background: #FEE569 !important;
        background-image: none !important;
    }
}

/* Responsive font size for header */
.fs-responsive {
    font-size: 2rem;
}

@media (max-width: 1200px) {
    .fs-responsive {
        font-size: 1.75rem;
    }
}

@media (max-width: 992px) {
    .fs-responsive {
        font-size: 1.5rem;
    }
}

@media (max-width: 768px) {
    .fs-responsive {
        font-size: 1.25rem;
    }
}

@media (max-width: 576px) {
    .fs-responsive {
        font-size: 1rem;
    }
}

/* Make h4 headings in footer white */
.bg-footer h4 {
    color: #fff !important;
}

/* Make specific URLs in contact page red */
.contact-page a[href*="www.imi.gov.my"],
.contact-page a[href*="mysafetravel.gov.my"] {
    color: #B6343B !important;
}

/* Limit image height and ensure it stays within its container */
.img-max-height {
    max-height: 400px !important;
    object-fit: cover;
    width: 100%;
    height: auto;
}

/* Ensure the image container properly contains the image */
.position-relative img.img-max-height {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}