/* General Navbar and Button Styling */
/* Navbar links with transition effects for hover */
.navbar-light .navbar-nav .nav-link {
    color: #fff;
    transition: color 0.3s ease;
}

/* Navbar link hover effect */
.navbar-light .navbar-nav .nav-link:hover {
    color: #f8b400;
}

/* Primary button style and hover effect */
.btn-primary {
    background-color: #4CAF50;
    border-color: #4CAF50;
}

/* Primary button hover effect */
.btn-primary:hover {
    background-color: #45a049;
}

/* Responsive adjustments for navbar and logo size */
@media (max-width: 768px) {
    .navbar-nav {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .navbar-brand img {
        width: 150px; /* Smaller logo on mobile */
    }
}

/* Main content padding and minimum height */
main {
    padding: 60px 0;
    min-height: 400px; /* Ensure minimum height for main content */
}

/* Footer Section Styling */
/* Main footer background and text color */
.footer-area {
    background-color: #222; /* Dark footer background */
    color: white;
    padding: 110px 0; /* Add padding around the footer */
}

/* Footer content organized in flex layout */
.footer-content .row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; /* Space out footer columns */
}

/* Footer widget titles */
.single-footer-widget h6 {
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    margin-bottom: 20px;
}

/* Footer text color */
.single-footer-widget p,
.list_style li a {
    color: #ddd; /* Light gray text color */
}

/* Remove list styles for footer links */
.list_style {
    list-style: none;
    padding: 0;
}

/* Spacing between footer list items */
.list_style li {
    margin-bottom: 10px;
}

/* Footer link default and hover styles */
.list_style li a {
    color: #ddd;
    text-decoration: none;
}

/* Footer link hover effect */
.list_style li a:hover {
    color: #f8b400;
}

/* Footer bottom section layout */
.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 20px;
    border-top: 1px solid #444; /* Border separating the footer content from footer bottom */
}

/* Footer bottom text color */
.footer-bottom p {
    margin: 0;
    color: #ddd;
}

/* Social media icons aligned to the right by default */
.social-icons {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

/* Styling for individual social media icons */
.social-icons a {
    color: white;
    font-size: 18px; /* Icon size */
    margin-right: 15px; /* Spacing between icons */
    transition: color 0.3s ease; /* Smooth hover transition */
}

/* Social media icon hover effect */
.social-icons a:hover {
    color: #f8b400; /* Change color on hover */
}

/* Border line between footer content and copyright section */
.border_line {
    border-top: 1px solid #444;
    padding-top: 10px;
}

/* Mobile footer adjustments */
@media (max-width: 768px) {
    .footer-content .row {
        flex-direction: column;
        text-align: center; /* Center-align text on smaller screens */
    }

    .footer-bottom {
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .social-icons {
        margin-top: 20px;
    }
}

/* Footer Social Media Icon Styling */
/* Define spacing and size for social media icons */
.social-icon-space {
    margin-right: 15px; /* Adjust the spacing between icons */
    color: white;
    font-size: 18px; /* Icon size */
}

/* Social media icon hover color */
.social-icon-space:hover {
    color: #f8b400; /* Hover color */
}

/* InstaFeed Styling */
/* Remove bullet points from InstaFeed list */
.instafeed li {
    list-style-type: none;
    padding: 5px; /* Space around each image */
}

/* Set InstaFeed image size and appearance */
.instafeed li img {
    width: 60px; /* Set width for InstaFeed images */
    height: 60px; /* Set height for InstaFeed images */
    object-fit: cover; /* Crop image to fit the box */
    border-radius: 8px; /* Rounded corners for the images */
}

/* Layout for InstaFeed */
.instafeed {
    display: flex;
    justify-content: center; /* Center InstaFeed images */
    flex-wrap: wrap;
    padding: 0;
    list-style: none;
}

/* Add spacing around InstaFeed images */
.instafeed li {
    margin: 5px;
}

/* InstaFeed image size and styling */
.instafeed li img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 8px;
}

/* FOOTER OVERRIDES (Shared) - moved from per-page injections */
/* Ensures footer bottom is visible and social icons sized consistently */
.footer-social a i { font-size: 18px; line-height: 1; }
.footer-area { position: relative !important; z-index: 5 !important; padding-bottom: 50px !important; }
.border_line { margin-top: 20px !important; padding-top: 12px !important; }
.footer-bottom { padding-top: 12px !important; padding-bottom: 8px !important; }
.border_line center { display: block; color: #ddd; padding: 8px 0; }

/* ===== START OF PAYFAST DONATE BUTTON STYLES (DO NOT MODIFY) ===== */
.header_top {
    background-color: #1B2434;
    padding: 5px 0;
}

.donate-container {
    text-align: right;
    background: transparent;
    padding-right: 15px;
}

.donate-form {
    margin: 0;
    padding: 0;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.amount-group {
    display: flex;
    align-items: center;
    gap: 5px;
}

.donate-form label {
    color: #FFE135;
    font-size: 11px;
    font-family: Arial, sans-serif;
}

.donate-form input[type="number"] {
    width: 60px;
    padding: 2px 8px;
    border-radius: 15px;
    border: 1px solid #FFE135;
    background: transparent;
    color: #FFE135;
    font-size: 11px;
    outline: none;
}

.donate-button {
    display: inline-block;
    background: #FFE135;
    color: #000;
    text-decoration: none;
    padding: 4px 15px;
    border-radius: 15px;
    font-family: Arial, sans-serif;
    font-weight: bold;
    font-size: 11px;
    text-transform: uppercase;
    border: none;
    cursor: pointer;
    line-height: 1;
}

.donate-button span {
    font-size: 9px;
    margin-left: 5px;
    opacity: 0.8;
}

.donate-button:hover {
    background: #FFD700;
}

/* ===== END OF PAYFAST DONATE BUTTON STYLES ===== */

/* Handshake Icon Styling */
.handshake-icon {
    color: #fff !important;
    font-size: 2.5rem;
    margin-left: 10px;
    position: relative;
    z-index: 2;
}

/* ===== START: Business Connect partners + featured carousel (moved from business-connect.html) ===== */
.partners-area { padding: 14px 0 48px; }
.partners-area .group-heading { margin: 28px 0 18px; font-size: 1.125rem; font-weight: 800; color: #111; }
.partners-area .partners-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 28px;
    align-items: start;
    margin-top: 12px;
}
.partners-area .partner-item {
    background: transparent; /* outer card made transparent to avoid double containers */
    border-radius: 12px;
    padding: 14px 12px; /* small padding around the visible logo-screen */
    min-height: 180px; /* reserve space so cards align */
    box-shadow: none;
    border: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: transform .12s ease;
}
.partners-area .partner-item:hover { transform: translateY(-6px); }
.partners-area .partner-logo-wrapper { display:flex; justify-content:center; align-items:center; width:100%; }
.partners-area .logo-screen {
    /* single visible card: larger, centered, strong shadow */
    width: 100%;
    max-width: 380px;
    height: 200px;
    min-height: 160px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    border-radius: 14px;
    background: #fff; /* white background keeps light logos readable */
    box-shadow: 0 40px 90px rgba(0,0,0,0.5); /* deep, blacker shadow */
    border: 1px solid rgba(0,0,0,0.06);
    flex: 0 0 auto;
}
.partners-area .logo-screen img {
    /* make logo fill the visual card consistently (preserve aspect ratio) */
    width: 92%;
    height: 92%;
    max-width: 92%;
    max-height: 92%;
    object-fit: contain;
    border-radius: 12px;
    box-shadow: none; /* inner shadow removed to avoid double-shadow effect */
    display: block;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* small equalizing rule: if an image has visible whitespace making it appear small,
   slightly scale it up so visual sizes match — applies gently */
.partners-area .logo-screen img.small-visual {
    transform: scale(1.06);
}

/* Universal rule: force small logos to visually scale to match larger ones */
.partners-area .logo-screen img.force-scale {
    transform: scale(1.085) !important;
    transition: transform .14s ease;
}

/* make the anchor around the logo clearly clickable and centered */
.partners-area .partner-item > a { display:flex; flex-direction:column; align-items:center; text-decoration:none; color:inherit; }
.partners-area .partner-item > a .partner-name { margin-top:10px; }
.partners-area .partner-name { margin-top: 10px; font-weight: 700; font-size: 0.92rem; color: #222; line-height: 1.15; }
.partners-area .partner-item .sample-text { margin-top: 6px; color: #8b8b8b; font-weight: 400; font-size: 0.86rem; }
@media (max-width: 900px) {
    .partners-area .partners-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
    .partners-area .logo-screen { max-width: 240px; height: 120px; border-radius: 14px; }
    .partners-area .logo-screen img { height: 78%; max-width: 90%; }
}
@media (max-width: 576px) {
    .partners-area .partners-grid { grid-template-columns: 1fr; gap: 18px; }
    .partners-area .partner-item { min-height: 150px; padding: 14px; }
    .partners-area .logo-screen { max-width: 200px; height: 92px; }
}
.featured-carousel { margin: 12px 0 18px; position: relative; }
.featured-slide { position: relative; overflow: hidden; border-radius: 12px; background: linear-gradient(180deg,#0b0c0d,#0a0a0a); color:#fff; min-height:220px; display:flex; align-items:center; padding:18px; }
.featured-slide .thumb { flex: 0 0 220px; display:flex; align-items:center; justify-content:center; padding: 8px 12px; }
.featured-slide .thumb img { max-width: 200px; max-height: 140px; object-fit:contain; filter: drop-shadow(0 8px 24px rgba(0,0,0,0.6)); }
.featured-slide .meta { flex:1; padding: 8px 26px; }
.featured-slide .meta h3 { margin: 0 0 6px; font-size: 1.6rem; font-weight: 800; letter-spacing: 0.4px; }
.featured-slide .meta p { margin: 0; color: rgba(255,255,255,0.85); }
.featured-controls { position:absolute; right: 14px; top: 50%; transform: translateY(-50%); display:flex; gap:8px; }
.featured-controls button { background: rgba(255,255,255,0.06); border: none; color: #fff; padding: 8px 10px; border-radius:10px; cursor:pointer; font-weight:700; }
.featured-indicators { position:absolute; left: 18px; bottom: 12px; display:flex; gap:8px; }
.featured-indicators button { width:10px; height:10px; border-radius:50%; border:none; background: rgba(255,255,255,0.18); }
.featured-indicators button.active { background: #ffd100; box-shadow: 0 2px 6px rgba(0,0,0,0.4); }
@media (max-width:700px){ .featured-slide{flex-direction:column;min-height:200px}.featured-slide .thumb{flex:0 0 auto;padding:12px}.featured-slide .meta{padding:12px} }

/* Utility styles moved from inline attributes */
.btn-donate-custom {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #1f2b30;
    color: #fff;
    border-radius: 20px;
    padding: 4px 16px;
    font-size: 1rem;
    font-weight: 600;
    border: none;

}

/* ===== Business Connect page header (breadcrumb used as main header) ===== */
.breadcrumb_area.blog_banner_two{
    /* path is relative to this CSS file */
    /* corrected: the project's images are in /image/ (singular) and css/ is one level above, so use ../image/ */
    background-image: url('../image/business-connect-banner.jpg');
    background-size: cover;
    background-position: center center;
    padding: 100px 0;
    position: relative;
    color: #fff;
}
.breadcrumb_area.blog_banner_two .overlay{ background: rgba(0,0,0,0.35); position:absolute; inset:0; }
.breadcrumb_area.blog_banner_two .container{ position: relative; z-index: 2; }
.page-cover-tittle, .page-cover .breadcrumb { color: #fff; }

/* Responsive tweaks for smaller screens */
@media (max-width: 768px) {
    .breadcrumb_area.blog_banner_two{ padding: 60px 0; }
    .page-cover-tittle { font-size: 2rem; }
}
.page-cover-tittle { gap: 12px; display:flex; align-items:center; }

/* Override: ensure page-cover banners and titles are centered across the site */
.page-cover {
    /* Make the banner wrapper use a centered column layout so title & breadcrumbs stack and center */
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-direction: column !important;
    text-align: center !important;
}

.page-cover-tittle {
    /* Keep internal layout for possible inline icons, but force horizontal centering */
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 0 auto !important;
    text-align: center !important;
}
/* ===== END: Business Connect partners + featured carousel ===== */

/* Donate button internal helpers - centralized so pages don't need inline styles */
.btn-donate-custom .donate-icon {
    font-size: 1.2em;
    display: flex;
    align-items: center;
    line-height: 1;
}
.btn-donate-custom .donate-text {
    letter-spacing: 1px;
    display: inline-block;
}


/* Specific overrides for Graceful Dreams when it needs a slight boost */
.graceful-logo {
    /* force height to occupy most of the card and override inline/js sizes */
    height: 96% !important;
    width: auto !important;
    transform: scale(1.06);
    display: block;
}

/* FOOTER / LAYOUT OVERRIDES -- moved here to ensure valid CSS and proper cascade */
/* Neutralize vendor rules that force a fixed footer height and negative margin */
.footer-area {
    height: auto !important;
    padding-top: 30px !important;
    padding-bottom: 30px !important;
}
.footer-content {
    margin-top: 0 !important;
}
.footer-area .border_line {
    margin-top: 20px !important;
}

/* Disable site-wide sticky-flex footer behavior when pages don't include the expected main.container */
html, body {
    height: auto !important;
}
body {
    display: block !important;
    /* min-height reset removed for better cross-browser compatibility */
}

/* Give gallery area breathing room above footer */
.gallery_area {
    padding-bottom: 40px !important;
}

/* Navbar inline donate button: white inner pill with yellow border and dark icon/text */
.nav-donate-wrapper { margin-left: 48px; }
.btn-donate-inline {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px;
    background: transparent !important; /* remove white inner */
    color: #ffd100 !important; /* yellow text/icon on transparent */
    border: 3px solid #ffd100 !important; /* thicker yellow outline */
    padding: 10px 20px !important;
    height: 48px !important;
    min-width: 140px !important;
    border-radius: 999px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    letter-spacing: 1px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.12);
    transition: background .18s ease, color .18s ease, transform .08s ease;
}
.btn-donate-inline .donate-icon,
.btn-donate-inline .donate-text { display:inline-flex; align-items:center; justify-content:center; }
.btn-donate-inline .donate-icon i { color: inherit; font-size: 1.15em; }

/* Hover: invert to dark inner with white text */
.btn-donate-inline:hover,
.btn-donate-inline:focus {
    background: #ffd100 !important;
    color: #1f2b30 !important;
    text-decoration: none !important;
}

/* Small-screen: show inside collapsed navbar - make wrapper visible */
@media (max-width: 991px) {
    .nav-donate-wrapper { display: flex !important; }
}

/* On large screens place the donate wrapper almost at the extreme right of the header */
@media (min-width: 992px) {
    /* remove inline margin and take it out of normal flow */
    .nav-donate-wrapper { margin-left: 0 !important; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); z-index: 1200; }
    /* ensure header is the positioning ancestor so right:0 maps to page edge */
    .header_area { position: relative; }
}

/* ==== FIX: remove unexpected white gap between the navbar/header and the banner ===== */
/* These are intentionally high-specificity + !important to override theme defaults that
   sometimes add margins/padding between header and the banner image. */
.header_area, header.header_area, .header_area.header {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}
.header_top, .header_top .container {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}
.navbar, .navbar.navbar-light, .navbar.navbar-default {
    margin-bottom: 0 !important;
}
/* Breadcrumb/banner section: remove any top spacing so it sits directly under the header */
.breadcrumb_area, section.breadcrumb_area, .breadcrumb_area.br_image {
    margin-top: 0 !important;
    padding-top: 0 !important;
}
.page-cover, .page-cover.text-center, .page-cover.text-center .page-cover-tittle {
    margin-top: 0 !important;
    padding-top: 0 !important;
}
/* defensive: body/top-level reset to ensure no default browser/user-agent gap */
body {
    margin-top: 0 !important;
}

/* If any spacer divs were accidentally left above the banner, hide them here (safe and reversible) */
.header-area-spacer, .banner-spacer, .spacer-above-banner { display: none !important; }

/* If the theme inserts a small pseudo-element gap, collapse it */
.header_area::after, .navbar::after { content: none !important; }

/* ===== TIGHTEN BREADCRUMB / BANNER VERTICAL SPACING ===== */
/* Make the breadcrumb/banner area a bit shorter top-to-bottom while keeping centered title */
.breadcrumb_area.br_image, .breadcrumb_area, section.breadcrumb_area {
    padding-top: 8px !important;    /* reduce top padding */
    padding-bottom: 8px !important; /* reduce bottom padding */
}
.page-cover, .page-cover.text-center {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
}
.page-cover-tittle {
    margin-top: 0 !important;
    margin-bottom: 6px !important;
    line-height: 1.05 !important;
}
@media (max-width: 768px) {
    .breadcrumb_area.br_image, .page-cover { padding-top: 10px !important; padding-bottom: 10px !important; }
    .page-cover-tittle { font-size: 28px !important; }
}