/* General Body Styles */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4; /* Light grey background */
    color: blue; /* Dark grey text color for general content */
    line-height: 1.6;
    box-sizing: border-box; /* Universal box-sizing for consistent layout */
}

*, *::before, *::after {
    box-sizing: inherit; /* Inherit box-sizing from body */
}

/* "My Services" Heading Section Styling */
.home-services-slider-section {
    width: 100%;
    background-color: white; /* Changed from White to white for consistency */
    min-height: auto;
    height: auto;
    position: relative;
    display: flex;
    flex-direction: column; /* Stack heading and black strip vertically */
    align-items: center; /* Center content horizontally */
    padding-top: 20px; /* Space above the title */
    padding-bottom: 30px; /* Add padding at the bottom for spacing */
    /* box-sizing: border-box; <-- Already set globally via body/* rule */
}

.section-title {
    font-size: 2.5em; /* Adjust font size as needed */
    color: #0b1360; /* Or your preferred color */
    margin-bottom: 30px; /* Space between title and the black strip/cards */
    text-align: center; /* Ensures the text itself is centered */
    width: 100%; /* Makes sure it takes full width for centering */
    font-family: "Ubuntu", sans-serif !important; /* !important used if another font rule overrides */
}

/* Styling for the inner black strip container (if used for extra wrapping) */
.black-strip {
    width: 100%;
    /* No fixed height here, let it adapt to Swiper container */
}

/* Swiper specific styling for the main container (where slides reside) */
.swiper-container.services-slider-container {
    width: 100%; /* Takes full width of its parent (.black-strip) */
    height: auto; /* Allow Swiper to determine height */
    /* padding: 0 40px; <--- REMOVED DEFAULT PADDING HERE */
    /* It will be applied in media queries for larger screens, or removed for mobile */
    /* box-sizing: border-box; <-- Already set globally */
}

/* Swiper slide styling (each individual card is also a swiper-slide) */
.swiper-slide {
    /* These flex properties are better handled by .card itself for consistent behavior */
    /* display: flex; */
    /* justify-content: center; */
    /* align-items: center; */
    height: auto; /* Allow height to be determined by the .card's content */
}

/* **Styling for each individual Card (.card)** */
.card {
    /* Removed min-width and max-width here. Swiper's slidesPerView will manage this. */
    /* Only apply max-width for desktop if you truly want to limit card size globally */
    /* max-width: 280px; <--- Consider moving this to a desktop-specific media query */
    width: 100%; /* Ensure card tries to take full width available from Swiper */
    min-height: 280px; /* Minimum height for the card to ensure content fits */

    background-color: #3d3c3c;
    color: #f0f0f0;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);

    padding: 0; /* Remove ALL padding from the card itself */
    overflow: hidden; /* Ensures image respects border-radius and doesn't spill out */

    display: flex;
    flex-direction: column;
    align-items: center; /* Horizontally centers content within card-content */
    text-align: center; /* Centers text within its container */
}

/* **Styling for Card Image (.card img)** */
.card img {
    width: 100%; /* Make the image fill the entire width of the card */
    height: 120px; /* Set a fixed height for the image container */
    object-fit: cover; /* This will crop the image to fit the container while maintaining aspect ratio */

    display: block; /* Removes any extra space below the image */
    margin: 0; /* Ensure no default margins are pushing the image */
    padding: 0; /* Ensure no default padding on the image */
}

/* **Styling for Card Content (.card-content) - the text area** */
.card-content {
    padding: 15px; /* Apply padding here for the text, not on the card itself */
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-grow: 1; /* Allows this block to take up available vertical space */
    justify-content: space-between; /* Distributes space between elements inside content */
    width: 100%; /* Ensure content takes full width to respect its padding */
}

.card-content h3 {
    margin-top: 0;
    margin-bottom: 5px;
    font-size: 1.1em;
    line-height: 1.2;
    color: #e0e0e0;
}

.card-content p {
    font-size: 0.85em;
    line-height: 1.4;
    margin-bottom: 10px;
    color: #c0c0c0;
}

.card-content a {
    display: inline-block;
    background-color: #007bff;
    color: white;
    padding: 8px 15px;
    border-radius: 5px;
    text-decoration: none;
    font-size: 0.8em;
    margin-top: auto;
    transition: background-color 0.3s ease;
}

.card-content a:hover {
    background-color: #0056b3;
}

/* --- Swiper Navigation (Arrows) Styling --- */
.swiper-button-next,
.swiper-button-prev {
    color: white !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 2em !important;
    width: 40px !important;
    height: 40px !important;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    transition: background-color 0.3s ease;
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

/* --- Swiper Pagination (Dots) Styling --- */
.swiper-pagination-bullet {
    background-color: white !important;
    opacity: 0.6 !important;
}

.swiper-pagination-bullet-active {
    background-color: white !important;
    opacity: 1 !important;
}

/* --- Responsive Adjustments (Media Queries) --- */

/* For screens larger than 992px (Desktop view) */
/* This is effectively your default for desktop */
@media (min-width: 993px) {
    .swiper-container.services-slider-container {
        padding: 0 40px; /* Apply padding for arrows only on larger screens */
    }
    .card {
        max-width: 280px; /* Limit card width on desktop if desired */
    }
}


/* For screens up to 1200px wide (e.g., smaller desktops, large tablets) */
@media (max-width: 1200px) {
    .services-heading-container h2 {
        font-size: 2.2em;
    }
    .card {
        min-height: 260px; /* Adjusted min-height */
    }
    .card img {
        height: 110px; /* Adjust image height */
    }
}

/* For screens up to 992px wide (e.g., tablet landscape) */
@media (max-width: 992px) {
    .services-heading-container h2 {
        font-size: 2em;
    }
    .swiper-container.services-slider-container {
        padding: 0 20px; /* Reduced padding for arrows or general spacing */
    }
    .card {
        min-height: 240px; /* Adjusted min-height */
    }
    .card img {
        height: 100px; /* Adjust image height */
    }
    .card-content h3 {
        font-size: 1em;
    }
    .card-content p {
        font-size: 0.8em;
    }
    .card-content a {
        font-size: 0.75em;
    }
}

/* For screens up to 768px wide (e.g., tablet portrait, large phones) */
@media (max-width: 768px) {
    .services-heading-container h2 {
        font-size: 1.8em;
    }
    .swiper-container.services-slider-container {
        /* No padding here, let Swiper handle the spacing for centered cards */
        padding: 0;
    }
    .swiper-button-next,
    .swiper-button-prev {
        display: none; /* Hide navigation buttons on smaller screens */
    }
    .card {
        min-height: 250px; /* Slightly increased min-height for content */
        /* max-width: none; <--- Ensure no max-width is restricting Swiper's calculations */
    }
    .card img {
        height: 100px; /* Image height */
        /* object-fit: cover; and width: 100% are inherited */
    }
    .card-content h3 {
        font-size: 0.95em;
    }
    .card-content p {
        font-size: 0.8em;
    }
    .card-content a {
        font-size: 0.75em;
    }
}

/* For screens up to 576px wide (e.g., mobile phones) */
@media (max-width: 576px) {
    .card {
        min-width: unset; /* Ensure this is unset */
        max-width: none; /* <--- CRITICAL: Remove any max-width that hinders Swiper's sizing */
        min-height: 300px; /* Adjusted height for mobile */
        border-radius: 10px;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }

    .card img {
        height: 150px; /* Increased image height for prominence on mobile */
        width: 100%;
        object-fit: cover;
        /* If you want absolutely no cropping, change to object-fit: contain; */
    }

    .card-content {
        padding: 14px 12px;
        font-size: 0.9em;
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .card-content h3 {
        font-size: 1em;
        margin-bottom: 8px;
    }

    .card-content p {
        font-size: 0.8em;
        line-height: 1.4;
        margin-bottom: 12px;
    }

    .card-content a {
        font-size: 0.85em;
        padding: 8px 12px;
        margin-top: auto;
    }

    .swiper-pagination {
        margin-top: 15px;
        position: relative;
        z-index: 1;
    }
}