/* Import Google Font (e.g., Poppins or a similar sans-serif font) */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');

:root {
    /* Define primary color for buttons and highlights (Dark Blue) */
    --bs-primary: #007bff; /* Example dark blue, adjust to match image exactly */
    --bs-light-blue: #0d6efd; /* Slightly lighter for hover */
    /* Define secondary color for buttons (Dark Red/Brownish from image) */
    --custom-secondary: #5e1717; 
    /* Define text color for links */
    --nav-link-color: #f1f1f1;
}

/* Base Body Style */
body {
    font-family: 'Poppins', sans-serif;
}

/* --- 1. Navigation Bar Styling --- */

.custom-navbar {
    /* Set a slight background color for the navbar for better visibility */
    background-color: rgba(0, 0, 0, 0.4); 
    /* Apply a backdrop filter for the glass/blur effect behind the navbar text */
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px); /* Safari support */
    transition: background-color 0.3s ease;
}

/* Style for individual nav links */
.custom-navbar .nav-link {
    color: var(--nav-link-color);
    font-weight: 400;
    margin-right: 1rem;
    padding: 0.5rem 0.75rem;
    border-radius: 5px;
    transition: background-color 0.2s;
}

.custom-navbar .nav-link:hover {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.1);
}

/* Style for the 'Get Started' button in the navbar */
.custom-btn-primary {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #fff;
    font-weight: 600;
    padding: 0.5rem 1rem;
    /* Match the subtle rounded corners from the image */
    border-radius: 4px; 
    transition: background-color 0.2s, border-color 0.2s;
}

.custom-btn-primary:hover {
    background-color: var(--bs-light-blue);
    border-color: var(--bs-light-blue);
    color: #fff;
}

/* Adjust navbar brand color */
.navbar-brand {
    color: #fff !important;
}

/* Mobile Toggler Icon color */
.navbar-toggler {
    border-color: rgba(255, 255, 255, 0.5);
}

.navbar-toggler-icon {
    background-image: url("https://media.istockphoto.com/id/1419539600/photo/business-presentation-and-man-on-a-laptop-in-a-corporate-conference-or-office-collaboration.jpg?s=612x612&w=0&k=20&c=viDl-Gtp68kqaCeh0WbnqM0EERvGec4i5C_Vk84VHKE=' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

/* --- 2. Hero Section Styling --- */

.hero-section {
    /* Set the minimum height of the hero section */
    min-height: 100vh;
    /* Replace '1.jpg' with the actual path to your uploaded background image */
    background-image: url('https://media.istockphoto.com/id/1419539600/photo/business-presentation-and-man-on-a-laptop-in-a-corporate-conference-or-office-collaboration.jpg?s=612x612&w=0&k=20&c=viDl-Gtp68kqaCeh0WbnqM0EERvGec4i5C_Vk84VHKE='); 
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    /* Ensure the content is visible above the navbar */
    padding-top: 56px; 
    position: relative;
    overflow: hidden; /* To contain the overlay */
}

/* Dark Overlay to make text pop and match the dark tone of the image */
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Subtle dark gradient/filter to enhance contrast */
    background: rgba(0, 0, 0, 0.5); 
    z-index: 1;
}

/* Styling for the large heading */
.hero-section h1 {
    font-size: clamp(2rem, 5vw, 4rem); /* Responsive font size */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Subtle shadow for depth */
}

/* Styling for the subheading/lead text */
.hero-section p.lead {
    font-weight: 300;
    font-size: clamp(1rem, 2.5vw, 1.5rem);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

/* Styling for the 'Get Started' button in the hero section */
.hero-section .custom-btn-primary {
    /* Match the larger size and color */
    padding: 0.8rem 2rem;
    font-size: 1.25rem;
}

/* Styling for the 'Our Services' (Secondary) button in the hero section */
.custom-btn-secondary {
    background-color: var(--custom-secondary);
    border: 1px solid var(--custom-secondary);
    color: #fff;
    font-weight: 600;
    padding: 0.8rem 2rem;
    font-size: 1.25rem;
    /* Match the subtle rounded corners from the image */
    border-radius: 4px; 
    transition: background-color 0.2s, border-color 0.2s;
}

.custom-btn-secondary:hover {
    /* Darken the background color slightly on hover */
    background-color: #4a1313; 
    border-color: #4a1313;
    color: #fff;
}


/* --- Mobile Responsiveness Adjustments (Optional but Recommended) --- */

@media (max-width: 991.98px) {
    /* Adjustments for smaller screens (Bootstrap 'lg' breakpoint) */
    .custom-navbar {
        /* Remove blur on mobile to prevent strange effects when collapsed */
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        /* Use a solid dark background when the menu is expanded on mobile */
        background-color: rgba(0, 0, 0, 0.95); 
    }

    /* Center the buttons on mobile */
    .hero-section .d-flex {
        flex-direction: column;
        align-items: center;
    }
    
    /* Give buttons full width on mobile */
    .hero-section .btn-lg {
        width: 100%;
        max-width: 300px; /* Limit max width for better appearance */
        margin-bottom: 1rem;
    }
}



/* Define a specific blue color used for icons and text */
        :root {
            --truecore-blue: #0056b3; /* A strong, but not too dark, blue */
        }

        /* Container for the entire section (optional, but helps with padding) */
        .truecore-section {
            padding: 80px 0;
            background-color: #ffffff; /* Override body background if this section needs a clean white background */
        }

        /* Style for the card wrapper to create the floating, white box effect */
        .feature-card {
            border: 1px solid #e9ecef; /* Very light gray border */
            border-radius: 8px; /* Slightly rounded corners */
            padding: 30px;
            text-align: center;
            height: 100%; /* Ensure all cards are the same height */
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04); /* Subtle shadow for lift */
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .feature-card:hover {
            transform: translateY(-5px); /* Lift card slightly on hover */
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
        }

        /* Icon styling */
        .feature-icon {
            color: var(--truecore-blue);
            font-size: 3rem;
            margin-bottom: 1.5rem;
        }

        /* Title styling */
        .feature-title {
            color: #212529; /* Dark gray for text */
            font-weight: 600;
            margin-bottom: 1rem;
            font-size: 1.25rem;
        }

        /* Description styling */
        .feature-description {
            color: #6c757d; /* Muted gray for description */
            font-size: 0.95rem;
            line-height: 1.4;
        }
        
        /* Top heading text */
        .section-tagline {
            color: #6c757d;
            font-size: 1.1rem;
        }
        
        
        /* Custom CSS to replicate the "About TrueCore" banner */

.about-hero {
    /* Set the minimum height and background properties */
    min-height: 70vh; /* Adjust height as needed */
    background: url('https://content-layout-tool.lovable.app/assets/partnership-Dwfnin7Q.jpg') no-repeat center center/cover;
    position: relative; /* Needed for the overlay */
    padding-top: 56px; /* Ensure content is below a fixed navbar */
}

/* Create the dark overlay effect */
.about-hero::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Use a dark color with transparency (rgba) */
    background-color: rgba(0, 0, 0, 0.5); /* Adjust 0.5 for darker/lighter effect */
    z-index: 1;
}

/* Ensure the text is on top of the overlay */
.about-hero .container {
    z-index: 2;
}

/* Optional: Styling for the title to match the bold, large text */
.about-hero h1 {
    font-size: 4rem; /* Making the font slightly larger */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Adding a slight shadow for readability */
}

/* Optional: You may also want to style the navbar to be dark or transparent over this section */
/* .custom-navbar {
    background-color: transparent !important;
} */
/* .custom-navbar .nav-link, .custom-navbar .navbar-brand {
    color: white !important;
} */