/* Styling for the Background Image */
.bg-breadcrumb {
    background-image: url('../images/fff.jpeg'); /* Replace with your image URL */
    background-size: cover;
    background-position: center center;
    padding: 80px 0; /* Adjust the top and bottom padding as needed */
    position: relative;
}

.bg-breadcrumb-single {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4); /* Dark overlay for better text visibility */
}

/* Styling the Text Centering and Margin in Container */
.container {
    position: relative;
    z-index: 1;
}

/* Header Text */
h4.text-white {
    font-size: 3rem; /* Adjust the font size */
    font-weight: 700; /* Set the font weight */
    text-transform: uppercase; /* Capitalize all letters */
    color: #fff; /* White text */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Optional: Add shadow to the text */
}

/* Styling the Breadcrumb */
.breadcrumb {
    background: transparent;
    padding: 0;
    margin-bottom: 0;
    display: inline-block;
}

.breadcrumb-item {
    display: inline-block;
    font-size: 1.125rem; /* Adjust font size */
}

.breadcrumb-item a {
    color: #fff; /* White color for links */
    text-decoration: none;
    transition: color 0.3s ease;
}

.breadcrumb-item a:hover {
    color: #ffc107; /* Change color on hover */
}

.breadcrumb-item.active {
    color: #007bff; /* Primary color for active breadcrumb item */
}

/* Add fade-in animation */
.wow.fadeInDown {
    animation: fadeInDown 1s ease-in-out;
}

@keyframes fadeInDown {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    h4.text-white {
        font-size: 2rem; /* Reduce font size on smaller screens */
    }

    .breadcrumb-item {
        font-size: 1rem; /* Adjust breadcrumb font size */
    }
}






/* Custom navbar styles */
 
 * {
     text-decoration: none !important;
 }
 
 .topbar {
     background-color: #0B3D60;
 }
 
 .navbar-light .navbar-nav .nav-link {
     color: #0B3D60;
     /* Default text color */
     font-weight: 600;
     padding: 10px 20px;
     margin: 0 3px;
     border-radius: 8px;
 }
 
 .navbar-light .navbar-nav .nav-link:hover {
     color: white;
     background-color: #0B3D60;
     /* Hover color */
 }
 
 .navbar-light .navbar-nav .nav-link.active {
     background-color: #0B3D60;
     /* Active link background color */
     color: white;
     border-radius: 8px;
     /* Active link text color */
 }
 
 .navbar {
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
     /* Light shadow effect */
 }
 
 .navbar-brand img {
     height: 50px;
     /* Logo height */
 }
 
 .btn-primary {
     background-color: #0B3D60;
     border-color: #0B3D60;
     font-weight: 600;
 }
 
 .btn-primary:hover {
     background-color: #5cbeb5;
     border-color: #5cbeb5;
     color: #0B3D60;
 }
 /* swiper slider banne start */
 
 .swiper {
     width: 100%;
     height: 676px !important;
 }
 
 .swiper-slide {
     text-align: center;
     font-size: 18px;
     background: #fff;
     display: flex;
     justify-content: center;
     align-items: center;
 }
 
 .swiper-slide img {
     display: block;
     width: 100%;
     height: 100%;
     object-fit: fill;
 }
 
 .autoplay-progress {
     position: absolute;
     right: 16px;
     bottom: 16px;
     z-index: 10;
     width: 48px;
     height: 48px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-weight: bold;
     color: var(--swiper-theme-color);
 }
 
 .autoplay-progress svg {
     --progress: 0;
     position: absolute;
     left: 0;
     top: 0px;
     z-index: 10;
     width: 100%;
     height: 100%;
     stroke-width: 4px;
     stroke: var(--swiper-theme-color);
     fill: none;
     stroke-dashoffset: calc(125.6px * (1 - var(--progress)));
     stroke-dasharray: 125.6;
     transform: rotate(-90deg);
 }
 /* swiper slider banne end */
 /* Ensure swiper container is correctly sized */
 
 .mySwiper {
     position: relative;
     width: 100%;
     height: 100%;
 }
 /* Style for the overlay container */
 
 .overlay-container {
     position: relative;
     width: 100%;
     height: 100%;
 }
 /* Style for the image, make it fill the slide */
 
 .swiper-slide img {
     width: 100%;
     height: 100%;
     object-fit: cover;
 }
 /* Style the overlay */
 
 .overlay {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-color: rgba(0, 0, 0, 0.5);
     /* Dark overlay */
     color: white;
     display: flex;
     justify-content: center;
     align-items: center;
     opacity: 1;
     /* Initially hidden */
     transition: opacity 0.3s ease;
 }
 /* When hovering over the swiper slide, show the overlay */
 /* Style for the text within the overlay */
 
 .overlay-text {
     font-size: 20px;
     text-align: center;
     padding: 10px;
     line-height: 1.5;
 }
 /* Optional: Style for autoplay progress circle */
 
 .card-title {
     text-align: center;
 }
 
 .card {
     border: 1px solid #ddd;
     border-radius: 8px;
     transition: transform 0.3s ease;
 }
 
 .card:hover {
     transform: translateY(-5px);
     /* Slight lift effect on hover */
 }
 
 .card-img-top {
     height: 200px;
     object-fit: fill;
 }
 /* fact static  */
 
 .fact-box {
     color: #5cbeb5;
 }
 /* testimonial color */
 
 .blockquote-footer {
     color: white !important;
 }
 /* footer */
 
 .ft-head {
     color: #5cbeb5 !important;
     font-size: 25px;
 }