/* Styles for the product page footer's lead capture section */

.new-footer-section {
    position: relative; /* To allow z-index stacking for the lead-capture section */
    /* Add other general new-footer-section styles if needed, like background for the area below the lead capture */
}

.lead-capture-section {
    box-sizing: border-box;
    width: 1240px; /* Figma: LeadBanner width */
    max-width: 90%; /* Ensure it's responsive on smaller screens */
    height: 455px; /* Figma: LeadBanner height */
    background: #1181D0; /* Figma: LeadBanner background */
    border-radius: 12px; /* Figma: LeadBanner border-radius */
    margin: -170px auto 0 auto; /* Figma: margin-top for overlap, centered horizontally */
    position: relative; /* For z-index and absolute positioning of children if needed */
    z-index: 1; /* Figma: z-index */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; /* Align content towards the top */
    padding: 80px 20px 40px 20px; /* Top padding from Figma (Frame 1984079605 top: 80px), side/bottom padding for content */
    overflow: hidden; /* To contain decorative elements if they overflow */
}

.lead-capture-text-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px; /* Figma: Frame 1984079502 gap */
    width: auto; /* Allow it to take the width of its content or parent constraints */
    max-width: 1150px; /* Increased to accommodate h2 width (Figma: 1133px) */
    text-align: center;
}

.lead-capture-text-content h2 {
    font-family: 'Be Vietnam Pro', sans-serif;
    font-weight: 600;
    font-size: 48px;
    line-height: 61px;
    color: #FFFFFF;
    margin: 0;
    white-space: nowrap; /* Prevent wrapping */
}

.lead-capture-text-content p {
    font-family: 'Geist', sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 31px;
    color: #C0D4FA; /* Figma: Colours/BF Primary Blue/blue-100 */
    margin: 0;
    max-width: 700px; /* To control line length for readability */
}

.lead-capture-buttons {
    display: flex;
    flex-direction: row;
    align-items: center; /* Vertically center buttons */
    justify-content: center; /* Horizontally center buttons container */
    gap: 27px; /* Figma: Frame 1984079836 gap */
    margin-top: 20px; /* Figma: Frame 1984079605 gap (between text block and buttons) */
}

.btn-lead-demo, .btn-lead-contact {
    box-sizing: border-box;
    display: inline-flex; /* Use inline-flex for better alignment */
    justify-content: center;
    align-items: center;
    padding: 14px 24px;
    border-radius: 12px;
    font-family: 'Be Vietnam Pro', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
    text-decoration: none;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.btn-lead-demo {
    background: #FFFFFF;
    border: 2px solid #FFFFFF; /* Figma spec says #1583D0, but image looks like white or none */
    color: #141414; /* Figma: Monochromes/Dark BG */
}

.btn-lead-demo:hover {
    background-color: #f0f0f0;
    border-color: #f0f0f0;
}

.btn-lead-contact {
    background: transparent;
    border: 2px solid #FFFFFF;
    color: #FFFFFF;
}

.btn-lead-contact:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

/* Styles for the container of the decorative footer image */
.lead-capture-decorative-icons-image-container {
    width: 100%;
    padding-top: 0px;    /* Space above image */
    padding-bottom: 30px; /* Space below image */
    margin-top: 0px;     /* Space between buttons and image */
    text-align: center;   /* Center the image */
}

/* Styles for the decorative footer image itself */
.footer-decorative-image {
    max-width: 100%;      /* Ensure image is responsive */
    height: auto;         /* Maintain aspect ratio */
    display: inline-block; /* Allows text-align:center on parent and respects max-width */
    position: relative;   /* Allow positioning without affecting layout flow */
    top: -60px;           /* Move image up; adjust value as needed */
    /* You might want to add a specific max-width here if the image is too large by default, e.g. max-width: 450px; */
}