.customSizing {
    aspect-ratio: 1/1;
    object-fit: cover;
}

.hover-box {
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

    .hover-box:hover {
        transform: scale(1.1);
        z-index: 1;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
    }

        .hover-box:hover .hover-content {
            display: block;
        }

.hover-content {
    display: none;
    background-color: white;
    padding: 20px;
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    z-index: 2;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.zoomed-image {
    transform: scale(0.9); /* Adjust the scale value (0.9) to control the degree of zoom */
    width: 100%;
    height: 100%;
}

.brand-images img {
    width: 120px; /* Adjust image width as needed */
    margin: 10px; /* Adjust margin as needed */
}
/* Custom CSS for navbar */
.navbar-custom {
    background-color: #333;
}

    .navbar-custom .navbar-brand {
        color: #ffffff;
    }

    .navbar-custom .navbar-nav .nav-link:hover {
        color: #ffcc00;
    }

    .navbar-custom .navbar-nav .nav-link:nth-child(2):hover {
        color: #ff6666;
    }

    .navbar-custom .navbar-nav .nav-link:nth-child(3):hover {
        color: #66ff66;
    }

    .navbar-custom .navbar-nav .nav-link:nth-child(4):hover {
        color: #6699ff;
    }

    .navbar-custom .navbar-nav .nav-link:nth-child(5):hover {
        color: #ff66ff;
    }

.bg-blue {
    background-color: #893323 !important;
}

.bg-lightblue {
    background-color: #f09537 !important;
}

.bg-pale {
    background-color: #b4b4b4 !important;
}

.bg-lightgrey {
    background-color: #379683;
}

.rounded-corners {
    border-radius: 3px !important; /* Adjust the value as needed */
    overflow: hidden !important;
}

/* Custom header code */
.home-background-image {
    position: relative;
    overflow: hidden;
}

/* New: Layer for the dynamic background image (darkened) */
.background-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    z-index: -2; /* Behind the color overlay */
}

/* Existing: Color overlay on top of the darkened image */
.background-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* Darker overlay (0.5 opacity black); adjust rgba(0,0,0,0.3-0.7) for brightness */
    z-index: -1;
}

/* Remove all .home-background-imageN::before rules (1-7) as they're no longer needed */

/* END OF HEADER */
.feature-heading {
    border-bottom: 1px solid black; /* Add a thick black line under each h2 block */
    padding-bottom: 10px; /* Add some spacing between the line and the text */
    margin-bottom: 20px; /* Add some spacing between each h2 block */
    height: 70px; /* Set a fixed height for each header */
    overflow: hidden; /* Hide overflow content */
}

.feature-content {
    height: 100%; /* Make content height same as header height */
}

/* Ensure desktop layout remains unchanged */
@media (min-width: 768px) {
    .navbar-custom {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .navbar-brand-text {
        display: inline;
    }

    .navbar-header {
        display: none;
    }
}

/* Mobile layout adjustments (max-width: 767px) */
@media (max-width: 767px) {
    .navbar-custom {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.5rem 1rem;
    }

    .navbar-brand {
        margin-right: 0;
        flex-shrink: 0;
    }

    .navbar-brand-text {
        display: none; /* Hide the inline brand text on mobile */
    }

    .navbar-header {
        flex-grow: 1;
        text-align: center;
    }

    .navbar-text {
        font-size: 1.2rem;
        line-height: 1.2;
        margin: 0;
    }

    .navbar-collapse {
        position: absolute;
        top: 100%;
        right: 0;
        width: 200px;
        background-color: #343a40;
        padding: 1rem;
        border-radius: 0 0 5px 5px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    }

    .navbar-nav {
        flex-direction: column;
        padding-left: 0;
    }

        .navbar-nav .nav-item {
            margin-bottom: 0.5rem;
        }

    .navbar-toggler {
        order: 3;
        margin-left: auto;
    }
}



/* Ensure the carousel-inner has proper overflow handling */
.carousel-inner {
    overflow: hidden; /* Prevent overflow issues during transitions */
}

/* Smooth transition for the entire carousel-item */
.carousel-item {
    transition: transform 0.6s ease-in-out; /* Bootstrap default transition */
    width: 100%; /* Ensure full width */
}

    /* Ensure the row inside carousel-item is treated as a single unit */
    .carousel-item .row {
        margin: 0; /* Remove default row margins */
        width: 100%; /* Ensure the row takes full width */
        display: flex; /* Use flexbox to keep image and text aligned */
    }

    /* Prevent individual transitions on images */
    .carousel-item img {
        transition: none; /* Disable image-specific transitions */
    }

    /* Ensure columns stay aligned and move together */
    .carousel-item .col-md-6 {
        display: flex; /* Keep image and text columns aligned */
        flex: 1 1 auto; /* Allow columns to take equal space */
    }

    /* Fix positioning during transitions to prevent overlap */
    .carousel-item.active,
    .carousel-item-next,
    .carousel-item-prev {
        display: block; /* Use block to respect Bootstrap's default positioning */
    }

        /* Ensure no overlap during slide transitions */
        .carousel-item-next.carousel-item-start,
        .carousel-item-prev.carousel-item-end {
            transform: translateX(0); /* Reset transform to avoid overlap */
        }

/* Optional: Adjust transition timing if needed */
.carousel-item {
    backface-visibility: hidden; /* Prevent flickering on some browsers */
    -webkit-backface-visibility: hidden; /* For Safari */
}

/* Hover dropdowns for desktop - Fixed gap issue */
@media (min-width: 992px) {
    .dropdown:hover .dropdown-menu {
        display: block !important;
        opacity: 1;
    }

    /* Bridge the gap: Zero margin and slight overlap if needed */
    .dropdown-menu {
        margin-top: 0 !important; /* Closes the 2px Bootstrap gap */
        transition: opacity 0.2s ease-in-out;
    }

    /* Optional: Extra padding on parent link for buffer zone */
    .nav-link.dropdown-toggle {
        padding-bottom: 0.125rem; /* Tiny extension to cover any residual gap */
    }
}


/* Navbar Transparency */
.navbar-transparent {
    background-color: rgba(51, 51, 51, 0.95) !important; /* Semi-transparent initial (#333 with 95% opacity) */
    backdrop-filter: blur(10px); /* Subtle blur for modern look */
    transition: background-color 0.3s ease, backdrop-filter 0.3s ease; /* Smooth fade */
}

    .navbar-transparent.navbar-scrolled {
        background-color: rgba(51, 51, 51, 0.8) !important; /* More transparent on scroll (80% opacity) */
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
    }

    /* Hover fixes for transparent nav */
    .navbar-transparent .nav-link:hover {
        color: #ffcc00 !important; /* Ensure hovers pop on transparent bg */
        background-color: rgba(255, 255, 255, 0.1); /* Subtle hover bg */
        border-radius: 4px;
    }

/* Mobile tweaks for better spacing with 1 item */
@media (max-width: 991px) {
    .navbar-collapse .navbar-nav {
        text-align: center; /* Center items on mobile if sparse */
    }
}


.background-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
}


/*Buttons override*/
/* Custom button color override for #893323 */
.btn-primary,
.btn.btn-primary.btn-lg.btn-warning {
    background-color: #893323;
    border-color: #893323;
    color: #fff; /* Ensure white text for contrast */
}

    .btn-primary:hover,
    .btn.btn-primary.btn-lg.btn-warning:hover {
        background-color: #6f2a1a; /* Darker shade for hover (adjust as needed) */
        border-color: #6f2a1a;
        color: #fff;
    }

    .btn-primary:focus,
    .btn-primary:active,
    .btn.btn-primary.btn-lg.btn-warning:focus,
    .btn.btn-primary.btn-lg.btn-warning:active {
        background-color: #893323;
        border-color: #5e2617; /* Slightly darker for focus/active */
        box-shadow: 0 0 0 0.25rem rgba(137, 51, 35, 0.25); /* Focus ring matching color */
        color: #fff;
    }

    .btn-primary:disabled,
    .btn.btn-primary.btn-lg.btn-warning:disabled {
        background-color: #a67c6e; /* Muted grayish version for disabled */
        border-color: #a67c6e;
        color: #fff;
        opacity: 0.65;
    }

/* Preserve your padding/margin if needed */
.btn-primary {
    padding-left: 1.5rem; /* Matches px-4 */
    padding-right: 1.5rem;
    margin-right: 1rem; /* Matches me-sm-3 on sm+; adjust for xs if needed */
}