/* Styling for sticky navbar */
      .main-navbar {
        position: -webkit-sticky; /* For Safari */
        position: sticky;
        top: 0; /* Stick to the top of the viewport */
        z-index: 1000; /* Ensure it stays on top of other content */
        width: 100%;
        /* You might want to add a background color if it's not already set */
        background-color: #fff; /* Example: white background */
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Optional: Add a subtle shadow */
      }


/* General Body Styles */
body {
    font-family: Arial, sans-serif; /* Added a fallback font */
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Ensure consistent box model */
    line-height: 1.6;
    color: #333;
    background-color: #f8f9fa; /* Light background for the whole page */
    overflow-x: hidden; /* Prevent horizontal scroll on small screens */
}

/* --- Spinner Styles --- */
#spinner {
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s ease-out, visibility 0s linear .5s;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed; /* Ensures it covers the entire screen */
    top: 0;
    left: 0;
    width: 100vw; /* Use viewport width */
    height: 100vh; /* Use viewport height */
    background-color: rgba(255, 255, 255, 0.8); /* Semi-transparent background */
}

#spinner.show {
    transition: opacity .5s ease-out, visibility 0s linear 0s;
    visibility: visible;
    opacity: 1;
}

/* --- Sidebar Menu Styles --- */
#sidebarMenu {
    /* Adjusted for better responsiveness */
    width: 100%; /* Default to full width for mobile */
    max-width: 280px; /* Limit max width for larger screens */
    margin-left: 0; /* Reset margin for mobile */
    margin-top: 0; /* Reset margin for mobile */
    transition: all 0.3s ease;
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Soft shadow */
}

.navbar-brand img {
    max-height: 86px;
    width: auto; /* Ensure aspect ratio is maintained */
}

#menuToggle {
    color: #007bff; /* Blue icon */
}

.nav-link {
    color: #343a40; /* Dark text */
    padding: 12px 15px; /* Increased padding for links */
    border-radius: 5px; /* Rounded corners */
    transition: background-color 0.3s ease; /* Smooth background transition */
}

.nav-link:hover {
    background-color: #e2e6ea; /* Light gray background on hover */
}

.submenu {
    display: none;
    position: static; /* Change to static for flow in mobile, absolute for desktop */
    width: 100%; /* Full width on mobile */
    left: auto; /* Reset left positioning */
    top: auto; /* Reset top positioning */
    z-index: 100;
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Soft shadow */
    background-color: #ffffff; /* White background for submenu */
}

.submenu.show {
    display: block; /* Show submenu when it has the 'show' class */
}

.submenu .nav-link {
    background-color: #ffffff; /* White background for submenu */
    color: #495057; /* Darker text */
    border: 1px solid #dee2e6; /* Border for submenu items */
    margin-top: 5px; /* Space between submenu items */
    padding: 10px; /* Increased padding for submenu items */
}

.submenu .nav-link:hover {
    background-color: #007bff; /* Blue background on hover */
    color: white; /* White text on hover */
}

/* Contact Details in Header */
.contact-details {
    /* Ensure this is a flex container or an inline-flex container */
    display: flex; /* Key change: make it a flex container */
    align-items: center; /* Align items vertically in the middle */
    flex-wrap: wrap; /* Allow items to wrap to the next line if space is tight */
    margin-left: 20px; /* Space between logo and details */
}

.contact-details .icon-text {
    display: flex;
    align-items: center; /* Align items vertically */
    margin-right: 20px; /* Space between items */
    white-space: nowrap; /* Prevent text from wrapping within an item */
    margin-bottom: 0; /* Ensure no extra margin if flex-wrap is active */
}

.contact-details i {
    margin-right: 5px; /* Space between icon and text */
    color: #007bff; /* Icon color */
}

/* You might also need to check the parent container of contact-details
   and social-media to ensure they are laid out horizontally.
   For example, if they are direct children of a div, that div might need: */
/*
.header-info-container {
    display: flex;
    justify-content: space-between; // Or space-around, flex-start, etc.
    align-items: center;
    flex-wrap: wrap; // Allow wrapping on smaller screens
}
*/

/* --- Social Media Links in Header --- */
.social-media {
    display: flex; /* Already good, but ensuring it's here for context */
    align-items: center; /* Align icons vertically */
    margin-top: 0; /* Reset this if it's adding unwanted space */
}

/* ... rest of your CSS ... */

/* Responsive adjustments for header (existing from previous response) */
@media (max-width: 991px) {
    .contact-details,
    .social-media {
        /* You might want to adjust how these are displayed on small screens.
           If they were hidden previously, they'll remain hidden.
           If you want them visible but stacked, you'd make them flex-direction: column. */
        display: flex; /* Override 'none' if you want them visible */
        flex-direction: column; /* Stack them vertically on mobile */
        width: 100%;
        margin-left: 0;
        text-align: center; /* Center content */
        margin-bottom: 10px; /* Add space if stacked */
    }

    .contact-details .icon-text {
        justify-content: center; /* Center text and icon on mobile */
        margin-right: 0; /* Remove horizontal margin for stacked items */
        margin-bottom: 8px; /* Add vertical space between stacked items */
    }

    .social-media a {
        margin: 5px 8px; /* Adjust margin for stacked social icons */
    }

}
.social-media a:hover {
    color: #007bff; /* Change color on hover */
}

/* Custom Banner Styles */
.custom-banner {
    max-width: 1090px;
    width: 90%; /* Make it responsive to screen width */
    min-height: 150px;
    height: auto;
    background-color: #3e4095;
    margin: -140px auto 30px auto; /* adjust spacing above and below */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    border-radius: 8px;
    z-index: 10;
    position: relative;
    padding: 10px; /* Add padding to prevent text from touching edges */
}

.custom-banner p {
    margin: 0;
    padding: 10px;
    font-size: 40px;
    color: #fff;
    font-weight: 500;
    word-break: break-word; /* Allow long words to break */
}

@media (max-width: 768px) {
    .custom-banner p {
        font-size: 28px; /* Smaller font size on tablets */
    }
}

@media (max-width: 576px) {
    .custom-banner p {
        font-size: 20px; /* Even smaller font size on mobile */
        padding: 5px;
    }
    .custom-banner {
        margin-top: -100px; /* Adjust top margin for smaller screens */
    }
}

/* Icon Link Styles for Product/Service Lists */
.icon-link {
    color: #fff;
    transition: color 0.3s ease;
}

.icon-link:hover {
    color: #dc3545; /* Bootstrap red */
}

.circle-icon {
    background-color: #dc3545; /* Bootstrap red */
    color: #fff;
    width: 32px;
    height: 32px;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    line-height: 32px;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.3s ease;
}

/* --- Footer Link Hover Effect --- */
.footer-item ul li a {
    color: #ffffff;
    text-decoration: none;
    position: relative;
    transition: color 0.3s ease;
}

.footer-item ul li a::after {
    content: '';
    position: absolute;
    width: 0%;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: #ffffff;
    transition: width 0.3s ease;
}

.footer-item ul li a:hover {
    color: #ed3237; /* gold shimmer */
}

.footer-item ul li a:hover::after {
    width: 100%;
}

/* --- Back to Top Button --- */
.back-to-top {
    position: fixed;
    right: 20px; /* Adjusted for smaller screens */
    bottom: 20px; /* Adjusted for smaller screens */
    transition: 0.5s;
    z-index: 99;
}

/* --- Buttons --- */
.btn {
    font-weight: 600;
    transition: .5s;
    padding: 10px 20px; /* Added default padding for better button appearance */
    text-align: center; /* Ensure text is centered */
    display: inline-block; /* Allow proper padding and margin */
    text-decoration: none; /* Remove underline from anchor buttons */
    border-radius: 5px; /* Slightly rounded corners */
}

.btn-square {
    width: 32px;
    height: 32px;
}

.btn-sm-square {
    width: 34px;
    height: 34px;
}

.btn-md-square {
    width: 40px;
    height: 40px;
}

.btn-lg-square {
    width: 46px;
    height: 46px;
}

.btn-xl-square {
    width: 56px;
    height: 56px;
}

.btn-square,
.btn-sm-square,
.btn-md-square,
.btn-lg-square,
.btn-xl-square {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: normal;
    border-radius: 50%; /* Make them perfectly round */
}

.btn.btn-primary {
    color: #fff;
    background-color: #3e4095; /* Set primary background color */
    border: none;
}

.btn.btn-primary:hover {
    background: #0dcaf0;
    color: #3e4095;
}

.btn.btn-light {
    color: #3e4095;
    background-color: #f8f9fa; /* Light background color */
    border: none;
}

.btn.btn-light:hover {
    color: var(--bs-white, #fff); /* Use CSS variable or fallback */
    background: #ed3237;
}

/* --- Navbar --- */
.header-top .topbar .dropdown-toggle::after {
    border: none;
    content: "\f107";
    font-family: "Font Awesome 5 Free";
    font-weight: 600;
    vertical-align: middle;
    margin-left: 8px;
    color: #fff;
}

.header-top .topbar .dropdown .dropdown-menu {
    transform: rotateX(0deg);
    visibility: visible;
    background: white;
    padding-top: 12px;
    border: 0;
    transition: .5s;
    opacity: 1;
}

.header-top {
    height: auto; /* Changed to auto for better responsiveness */
    min-height: 80px; /* Minimum height */
    position: relative;
    overflow: hidden;
}

.header-top::after {
    content: "";
    position: absolute;
    width: 16%;
    height: 100%;
    top: 0;
    left: 0;
    background: #fff;
    z-index: 1;
}

@media (min-width: 992px) {
    .header-top::before {
        content: "";
        position: absolute;
        overflow: hidden;
        width: 100%;
        height: 50px;
        top: 0;
        right: 0;
        background: #3e4095;
        z-index: -1;
    }

    .navbar-brand-2 {
        display: none;
    }

    .navbar {
        padding: 20px 0;
    }

    .navbar .nav-btn {
        display: flex;
        align-items: center;
        justify-content: end;
    }

    .navbar .navbar-nav {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        background: var(--bs-light, #f8f9fa); /* Use CSS variable or fallback */
        border-radius: 10px;
    }

    .navbar .navbar-nav .nav-btn {
        width: 100%;
        display: flex;
        margin-left: auto;
    }

    .navbar .nav-item .dropdown-menu {
        display: block;
        visibility: hidden;
        top: 100%;
        transform: rotateX(-75deg);
        transform-origin: 0% 0%;
        border: 0;
        transition: .5s;
        opacity: 0;
    }

    .navbar .nav-item:hover .dropdown-menu {
        transform: rotateX(0deg);
        visibility: visible;
        margin-top: 19px;
        background: var(--bs-white, #fff);
        transition: .5s;
        opacity: 1;
    }

    .header-top .navbar-brand {
        position: relative;
        overflow: hidden;
        padding: 40px 50px 40px 0;
        z-index: 99;
    }

    .navbar-brand::before {
        content: "";
        position: absolute;
        overflow: hidden;
        width: 300px;
        height: 600px;
        top: -200px;
        right: 18px;
        background: #fff;
        transform: rotate(-18deg);
        z-index: -1;
    }

    .navbar-brand::after {
        content: "";
        position: absolute;
        overflow: hidden;
        width: 5px;
        height: 600px;
        top: -200px;
        right: 18px;
        background: #3e4095;
        transform: rotate(-18deg);
        z-index: -1;
    }

    #sidebarMenu {
        margin-left: 240px;
        margin-top: -9px;
        width: 200px; /* Increased width for better usability */
    }

    .submenu {
        position: absolute;
        left: 200px; /* Position submenu to the right */
        top: 0;
        width: 250px; /* Set width for submenu */
    }
}

@media (max-width: 991px) {
    .header-top {
        max-height: none; /* Remove max-height for better content flow */
        height: auto;
    }

    .navbar {
        justify-content: space-between;
        padding: 15px; /* Adjusted horizontal padding for small screens */
    }

    .header-top .container {
        max-height: none; /* Remove max-height */
    }

    .navbar-brand {
        display: none;
    }

    .navbar-brand-2 {
        position: relative;
        overflow: hidden;
        width: 180px; /* Adjust width for mobile logo */
        height: 100%;
        padding: 0;
        display: flex;
        align-items: center;
        z-index: 99;
    }

    .navbar-brand-2::before {
        content: "";
        position: absolute;
        overflow: hidden;
        width: 100%;
        height: 600px;
        top: -200px;
        right: 18px;
        background: var(--bs-dark, #343a40);
        transform: rotate(-18deg);
        z-index: -1;
    }

    .navbar-brand-2::after {
        content: "";
        position: absolute;
        overflow: hidden;
        width: 5px;
        height: 600px;
        top: -200px;
        right: 18px;
        background: white;
        transform: rotate(-18deg);
        z-index: -1;
    }

    .navbar.navbar-light {
        height: auto; /* Adjusted to auto */
        padding: 0;
    }

    .navbar .navbar-collapse {
        margin-top: 10px; /* Adjusted margin */
        padding-bottom: 10px; /* Added padding */
    }

    .navbar .navbar-nav .nav-link {
        padding: 8px 15px; /* Added padding to nav links for touch targets */
    }

    .navbar .navbar-nav .nav-item {
        display: flex;
        padding: 0; /* Removed fixed padding here, using nav-link padding */
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
    }

    .navbar .navbar-nav .nav-btn {
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 10px; /* Space between buttons */
        padding: 10px 15px; /* Padding for button container */
    }

    .navbar .navbar-nav {
        width: 100%;
        display: flex;
        margin-top: 20px;
        padding-bottom: 20px;
        margin-left: 0;
        background: var(--bs-light, #f8f9fa);
        flex-direction: column;
    }

    .navbar .navbar-nav .nav-btn a.btn {
        margin-right: 0;
        flex-grow: 1; /* Allow buttons to grow and fill space */
    }

    .navbar.navbar-expand-lg .navbar-toggler {
        padding: 8px 15px;
        border: 1px solid var(--bs-primary, #3e4095);
        color: var(--bs-primary, #3e4095);
    }

    .contact-details,
    .social-media {
        display: none; /* Hide contact and social media in header on small screens */
    }
}

.nav-bar .navbar {
    z-index: 9;
}

.navbar-light .navbar-brand img {
    max-height: 60px;
    transition: .5s;
}

.nav-bar .navbar-light .navbar-brand img {
    max-height: 50px;
}

.navbar .navbar-nav .nav-item .nav-link {
    padding: 0;
}

.navbar .navbar-nav .nav-item {
    display: flex;
    align-items: center;
    padding: 0;
    margin-right: 20px;
}

.navbar-light .navbar-nav .nav-item:hover,
.navbar-light .navbar-nav .nav-item.active,
.navbar-light .navbar-nav .nav-item:hover .nav-link,
.navbar-light .navbar-nav .nav-item.active .nav-link {
    color: #3e4095;
}

.navbar .dropdown-toggle::after {
    border: none;
    content: "\f107";
    font-family: "Font Awesome 5 Free";
    font-weight: 600;
    vertical-align: middle;
    margin-left: 8px;
}

.dropdown .dropdown-menu .dropdown-item:hover {
    background: var(--bs-primary, #3e4095);
    color: var(--bs-white, #fff);
}

.header-carousel .header-carousel-item {
    height: 700px; /* Keep fixed height for large screens */
}

.header-carousel .owl-nav .owl-prev,
.header-carousel .owl-nav .owl-next {
    position: absolute;
    width: 60px;
    height: 60px;
    background: var(--bs-white, #fff);
    color: #3e4095;
    font-size: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.5s;
}

.header-carousel .owl-nav .owl-prev {
    bottom: 30px;
    left: 0;
}
.header-carousel .owl-nav .owl-next {
    bottom: 30px;
    right: 0;
}

.header-carousel .owl-nav .owl-prev:hover,
.header-carousel .owl-nav .owl-next:hover {
    box-shadow: inset 0 0 65px 0 #3e4095;
    color: #fff;
}

.header-carousel .header-carousel-item .carousel-caption {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    bottom: 0;
    background: rgba(0, 0, 0, .2);
    display: flex;
    align-items: center;
    z-index: 9;
}

@media (max-width: 991px) {
    .header-carousel .header-carousel-item .carousel-caption {
        padding-top: 45px;
        text-align: center;
        flex-direction: column;
        justify-content: center;
    }

    .header-carousel.owl-carousel,
    .header-carousel .header-carousel-item {
        height: auto;
        min-height: 300px; /* Reduced min-height for very small screens */
    }
    .header-carousel .owl-nav {
        position: static; /* Place nav below carousel for better mobile visibility */
        margin-top: 20px; /* Space between carousel and nav */
        display: flex;
        justify-content: space-between;
        padding: 0 15px; /* Add some horizontal padding */
    }
    .header-carousel .owl-nav .owl-prev,
    .header-carousel .owl-nav .owl-next {
        position: static; /* Remove absolute positioning */
        margin: 0 5px; /* Add margin between buttons */
    }
}

/* --- Single Page Hero Header --- */
.bg-breadcrumb, .bg-breadcrumb-2 {
    position: relative;
    overflow: hidden;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 60px 15px; /* Added horizontal padding */
    transition: 0.5s;
}

.bg-breadcrumb {
    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(../img/banner-img.jpg);
}
.bg-breadcrumb-2{
    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(../img/banner-img2.jpg);
}

.bg-breadcrumb .breadcrumb {
    position: relative;
}

.bg-breadcrumb .breadcrumb .breadcrumb-item a {
    color: var(--bs-white, #fff);
}

/* --- Banner --- */
.banner {
    position: relative;
    overflow: hidden;
    background: linear-gradient(rgba(62, 64, 149, 0.5), rgba(0, 0, 0, 0.8)), url(../img/banner-img.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 9;
    padding: 50px 15px; /* Add some vertical and horizontal padding to the banner */
}

.banner .container {
    position: relative;
    z-index: 99;
}

.banner::after, .banner::before {
    content: "";
    position: absolute;
    width: 100px;
    height: 500px;
    background: #3e4095;
    transform: rotate(45deg);
    z-index: 1;
}

.banner::after {
    top: -200px;
    left: 0;
}

.banner::before {
    bottom: -200px;
    right: 0;
}

.banner .banner-design-1, .banner .banner-design-2 {
    position: absolute;
    width: 30px;
    height: 500px;
    background: var(--bs-dark, #343a40);
    transform: rotate(45deg);
    z-index: 2;
}

.banner .banner-design-1 {
    top: -165px;
    left: 0;
}

.banner .banner-design-2 {
    bottom: -165px;
    right: 0;
}

/* --- Service --- */
.service {
    background-color: #ffffff;
    padding-top: 5rem;
    padding-bottom: 5rem;
}

.service .nav {
    flex-direction: column; /* Stack navigation items vertically */
    flex-wrap: wrap; /* Allow wrapping for horizontal tabs on small screens */
}

.service .nav-item {
    width: 100%; /* Default to full width for mobile */
    max-width: 300px; /* Limit max width for larger screens */
    border: 1px solid #3e4095;
    background: var(--bs-light, #f8f9fa);
    margin-bottom: 10px; /* Add some spacing between nav items */
}

.service .nav-item a {
    display: flex;
    justify-content: center;
    padding: 15px; /* Add padding to nav links */
    color: #333;
    text-decoration: none;
    transition: background-color 0.3s ease; /* Smooth transition for hover effects */
    border-radius: 0.25rem; /* Slightly rounded corners */
}

.owl-stage-outer {
    margin-right: -1px;
}
.service .nav-item a.active {
    background: #3e4095;
    color: #ffffff; /* White text for active tab */
    border-radius: 0.25rem; /* Slightly rounded corners */
}

.service .nav-item a span {
    color: var(--bs-dark, #343a40);
}

.service .nav-item a.active span {
    color: var(--bs-white, #fff);
}

.service .nav-item a:hover:not(.active) {
    background-color: #e9ecef; /* Light background on hover for inactive tabs */
}

.service .tab-content {
    background-color: #ffffff;
    padding: 1rem;
    border: 1px solid #dee2e6;
    border-top: none; /* No top border as it connects to the active tab */
    border-radius: 0 0 0.25rem 0.25rem; /* Rounded bottom corners */
}

.service-carousel .owl-nav .owl-prev,
.service-carousel .owl-nav .owl-next {
    position: absolute;
    padding: 10px 35px;
    border: 1px solid #3e4095;
    color: var(--bs-dark, #343a40);
    background: var(--bs-light, #f8f9fa);
    transition: 0.5s;
}

.service-carousel .owl-nav .owl-prev:hover,
.service-carousel .owl-nav .owl-next:hover {
    background: #3e4095;
    color: var(--bs-white, #fff);
}

@media (min-width: 992px) {
    .service-carousel .owl-nav .owl-prev {
        top: 0;
        left: -115px;
    }

    .service-carousel .owl-nav .owl-next {
        bottom: 0;
        left: -115px;
    }
}

@media (max-width: 991px) {
    .owl-stage-outer {
        margin-bottom: 70px;
    }
    .service-carousel .owl-nav .owl-prev {
        bottom: -70px;
        left: 0;
    }

    .service-carousel .owl-nav .owl-next {
        bottom: -70px;
        right: 0;
    }

    .service .nav {
        flex-direction: row; /* Horizontal tabs on smaller screens */
        flex-wrap: wrap; /* Allow tabs to wrap */
        justify-content: center; /* Center tabs */
        width: 100%; /* Ensure nav takes full width */
    }

    .service .nav-item {
        width: auto; /* Make nav items adjust their width */
        max-width: 180px; /* Limit width for better appearance on very small screens */
        margin-right: 0.5rem; /* Space between horizontal tabs */
        margin-bottom: 0.5rem; /* Space below tabs when wrapping */
    }

    .service .tab-content {
        border-top: 1px solid #dee2e6; /* Re-add top border for tab content */
        border-radius: 0.25rem; /* Rounded corners on all sides */
    }
}

/* --- Margin (Consider refactoring these if possible) --- */
/* These fixed negative margins are generally problematic for responsiveness.
   It's highly recommended to replace these with flexible layout techniques (flexbox gap,
   margin-bottom for spacing between elements, or CSS Grid) if their purpose is
   for general element spacing. If they are used for very specific absolute/relative
   positioning that is crucial to a design element, they might need individual
   responsive adjustments within media queries. For now, I'm adjusting them to be less
   aggressive or removing them where they might cause issues. */

/* --- Projects --- */
.projects .nav-item {
    box-shadow: 0 0 30px rgba(0, 0, 0, .09);
    margin-bottom: 15px; /* Added spacing between project nav items */
}

.projects-item .projects-content {
    box-shadow: 0 0 30px rgba(0, 0, 0, .1);
}

.projects .nav-item a.active {
    background: #3e4095;
}

.projects .nav-item a span {
    color: var(--bs-dark, #343a40);
}

.projects .nav-item a.active span {
    color: var(--bs-white, #fff);
}

.projects .nav-item a.active .projects-icon {
    background: #06a7d8 !important;
}

.projects .nav-item a.active .projects-icon span {
    color: #3e4095;
}

/* --- Blog --- */
.blog .blog-item {
    height: 100%;
    background: var(--bs-light, #f8f9fa);
    margin-bottom: 30px; /* Add spacing between blog items */
}

.blog .blog-item .blog-img {
    position: relative;
    overflow: hidden;
}

.blog .blog-item .blog-img::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    top: 0;
    left: 0;
    display: flex;
    background: rgba(246, 138, 10, .3);
    transition: 0.5s;
}

.blog .blog-item:hover .blog-img::after {
    width: 100%;
    height: 100%;
}

.blog .blog-item .blog-img img {
    transition: 0.5s;
    width: 100%; /* Ensure image fills its container */
    height: auto; /* Maintain aspect ratio */
    display: block; /* Remove extra space below image */
}

.blog .blog-item:hover .blog-img img {
    transform: scale(1.2);
}

.blog .blog-item .blog-heading {
    position: relative;
    background: var(--bs-white, #fff);
    padding: 15px; /* Added padding to blog heading */
}

.blog .blog-item .blog-heading a.h4 {
    position: relative;
    width: 100%;
    display: inline-flex;
    transition: 0.5s;
    z-index: 2;
    text-decoration: none; /* Remove underline */
    color: inherit; /* Inherit color initially */
}

.blog .blog-item .blog-heading::after {
    content: "";
    position: absolute;
    width: 0%;
    height: 100%;
    right: 0;
    bottom: 0;
    transition: 0.5s;
    z-index: 1;
}

.blog .blog-item:hover .blog-heading::after {
    width: 100%;
    background: var(--bs-primary, #3e4095);
}

.blog .blog-item:hover .blog-heading a.h4 {
    color: var(--bs-white, #fff);
}

.blog .blog-item:hover .blog-heading a.h4:hover {
    color: var(--bs-dark, #343a40);
}

/* --- Team --- */
.team .team-item {
    margin-bottom: 30px; /* Add spacing between team members */
}

.team .team-item .team-img {
    position: relative;
    overflow: hidden;
}

.team .team-item .team-img img {
    transition: 0.5s;
    width: 100%; /* Ensure image fills its container */
    height: auto; /* Maintain aspect ratio */
    display: block;
}

.team .team-item:hover .team-img img {
    transform: scale(1.1);
}

.team .team-item .team-img .team-icon {
    position: absolute;
    bottom: 20px;
    right: -100%; /* Keep this for animation */
    z-index: 9;
    transition: 0.5s;
    display: flex;
    gap: 10px;
    justify-content: center; /* Center icons horizontally */
    width: 100%; /* Make icon container full width for centering */
}

.team .team-item:hover .team-img .team-icon {
    right: 0; /* Bring to full width */
}

.team .team-item .team-img::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 0;
    top: 0;
    left: 0;
    background: rgba(246, 138, 10, .2);
    transition: 0.5s;
    z-index: 1;
}

.team .team-item:hover .team-img::after {
    height: 100%;
}

.team .team-item .team-content {
    transition: 0.5s;
    padding: 15px; /* Added padding to team content */
    text-align: center; /* Center align text */
}

.team .team-item:hover .team-content {
    box-shadow: 0 0 20px rgba(0, 0, 0, .2);
}

/* --- FAQs --- */
.faq-section .accordion .accordion-item {
    margin-bottom: 20px;
    box-shadow: 0 0 30px rgba(0, 0, 0, .08);
    border: none;
}

.faq-section .accordion .accordion-item .accordion-header .accordion-button {
    color: var(--bs-white, #fff);
    background: rgba(246, 138, 10, .9);
    font-size: 18px;
    padding: 15px 20px; /* Added padding for better click area */
    width: 100%; /* Ensure button takes full width */
    text-align: left; /* Align text to the left */
}

.faq-section .accordion .accordion-item .accordion-header .accordion-button.collapsed {
    color: var(--bs-dark, #343a40);
    background: var(--bs-light, #f8f9fa);
}

/* --- Vendor Carousel Styling --- */
.vendor-carousel .owl-item img {
    max-height: 80px;
    width: auto;
    margin: auto;
}

.vendor-carousel .bg-light {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100px; /* Adjusted height for better responsiveness */
    border: 1px solid #e9ecef;
    border-radius: 0.25rem;
}

/* --- Footer --- */
.footer {
    background-color: #3e4095 !important;
    color: #ffffff;
    padding-top: 50px;
    padding-bottom: 30px;
}

.footer h4 {
    color: #ffffff;
    margin-bottom: 1.5rem;
}

.footer .footer-item a {
    line-height: 35px;
    color: var(--bs-white, #fff);
    transition: 0.5s;
    text-decoration: none;
    display: block;
}

.footer .footer-item p {
    line-height: 35px;
    color: rgba(255, 255, 255, 0.7);
}

.footer .footer-item i {
    width: 20px;
}

.footer ul {
    list-style: none;
    padding: 0;
}

.footer ul li {
    margin-bottom: 0.5rem;
    color: #cccccc;
}

.footer .footer-item a:hover {
    letter-spacing: 1px;
    color: var(--bs-primary, #3e4095);
}

.footer .footer-item .footer-btn {
    display: flex; /* Use flexbox for button alignment */
    flex-wrap: wrap; /* Allow buttons to wrap */
    gap: 10px; /* Space between buttons */
    justify-content: center; /* Center buttons on small screens */
}

.footer .footer-item .footer-btn a {
    transition: 0.5s;
    border: 1px solid var(--bs-white, #fff);
    padding: 8px 15px;
    margin-right: 0; /* Reset margin from original */
    margin-bottom: 0; /* Reset margin from original */
    display: inline-block;
}

.footer .btn-md-square {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: #6c757d;
    color: #ffffff;
    transition: background-color 0.3s ease;
}

.footer .btn-md-square:hover {
    background-color: #007bff;
}

.footer .footer-item .footer-btn a:hover {
    background: var(--bs-white, #fff);
    color: var(--bs-primary, #3e4095);
}

/* --- Copyright --- */
.copyright {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: var(--bs-dark, #343a40);
    padding: 20px 15px; /* Added horizontal padding */
    color: rgba(255, 255, 255, 0.6);
    text-align: center;
}

/* Service Item (Carousel) Styling */
.service-item {
    border: 1px solid #dee2e6;
    border-radius: 0.25rem;
    overflow: hidden;
    margin-bottom: 1.5rem;
}

.service-item img {
    border-bottom: 1px solid #dee2e6;
    width: 100%; /* Ensure image is responsive */
    height: auto; /* Maintain aspect ratio */
}

.service-item h4 {
    color: #007bff;
}

/* Header Text Styling */
h1.display-4 {
    font-size: 2.5rem;
    font-weight: 700;
    color: #343a40;
    word-break: break-word; /* Allow long words to break */
}

h4.text-primary {
    color: #007bff !important;
}

/* Utility Classes and Overrides */
.text-muted {
    color: #adb5bd !important;
}

.mb-4 {
    margin-bottom: 1.5rem !important;
}

.py-5 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
}

/* Responsive Adjustments for general elements */
@media (max-width: 767.98px) {
    h1.display-4 {
        font-size: 2rem;
    }
    .footer .footer-item {
        margin-bottom: 2rem;
        text-align: center;
    }
    .footer .d-flex.pt-2 {
        justify-content: center;
    }
}

@media (max-width: 575.98px) {
    /* Further adjustments for very small mobile screens */
    h1.display-4 {
        font-size: 1.8rem;
    }
    .contact-details .icon-text {
        margin-right: 10px;
        margin-bottom: 8px;
    }
    .custom-banner {
        margin-top: -80px; /* Further adjust for very small screens */
        width: 95%; /* Make it slightly wider */
        padding: 5px;
    }
    .custom-banner p {
        font-size: 18px;
    }
}

.container-sidebar {
            display: flex;
            margin-top: 20px; /* Add margin to the top */
        }
        .sidebar {
            width: 20%;
            padding: 20px;
            border-right: 1px solid #ccc;
            background-color: #f8f9fa;
            margin-right: 20px; /* Space between sidebar and content */
        }
        .sidebar ul {
            list-style: none;
            padding: 0;
        }
        .sidebar ul li {
            margin: 15px 0; /* Increased margin for better spacing */
        }
        .sidebar ul li a {
            text-decoration: none;
            color: #007bff;
            font-weight: bold;
        }
        .sidebar ul li a:hover {
            text-decoration: underline;
        }
        .content {
            width: 80%;
            padding: 20px;
        }
		.images {
			display: flex;
			flex-direction: row; /* or column */
			gap: 50px; /* Space between items */
		}
		
        .images img {
			height:auto;
			width:1080px;
            margin: 10px 0;
        }
        .info {
            margin-top: 20px;
        }
.img-large-panel {
    width: 100%; /* Adjust width as necessary */
    max-height: 400px; /* Set a max height */
    object-fit: cover; /* Cover the area properly */
}

.img-small-box {
    width: 50%; /* Adjust size for small image */
    max-height: 200px; /* Set a max height */
    display: block;
    margin: 10px auto; /* Center the image */
    border: 1px solid #ccc; /* Optional border */
}

.img-vertical {
    width: 30%; /* Adjust width for vertical image */
    float: right; /* Align to the right */
    margin: 10px; /* Add margin for spacing */
}

.full-width-text {
    clear: both; /* Ensure it clears the floated image */
    text-align: justify; /* Justify text for full width */
}