.elementor-31 .elementor-element.elementor-element-3d29823{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:-78px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-31 .elementor-element.elementor-element-44aa9fd{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + -12px) 0px;}.elementor-31 .elementor-element.elementor-element-da7bc59{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-31 .elementor-element.elementor-element-da7bc59:not(.elementor-motion-effects-element-type-background), .elementor-31 .elementor-element.elementor-element-da7bc59 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F9FAFB;}/* Start custom CSS for shortcode, class: .elementor-element-6fcfcfd *//* -- Basic Form Styling (Adjust colors/fonts as needed) -- */
form.wpcf7-form {
    max-width: 600px; /* Limit form width */
    margin: 20px auto; /* Center the form */
    padding: 30px; /* Increased padding for better spacing */
    background-color: #f9f9f9; /* Light background */
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Slightly stronger shadow */
    font-family: sans-serif; /* Use a common font */
    color: #333; /* Default text color */
    line-height: 1.6;

    /* --- ADDED: Emoji Background --- */
    /* You can customize the emojis, color, size, and position */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cpattern id='p' patternUnits='userSpaceOnUse' width='80' height='80'%3E%3Ctext x='5' y='15' style='font-size:12px;fill:%23e0e0e0;'%3E⚖️%3C/text%3E%3Ctext x='45' y='35' style='font-size:12px;fill:%23e0e0e0;'%3E📚%3C/text%3E%3Ctext x='15' y='55' style='font-size:12px;fill:%23e0e0e0;'%3E🏛️%3C/text%3E%3Ctext x='60' y='75' style='font-size:12px;fill:%23e0e0e0;'%3E💼%3C/text%3E%3C/pattern%3E%3Crect width='100%25' height='100%25' fill='url(%23p)'/%3E%3C/svg%3E");
    background-repeat: repeat; /* Tile the emoji pattern */
    background-size: 80px 80px; /* Size of each pattern tile */
    /* Optional: Add background-blend-mode if you want to blend with the base color */
    /* background-blend-mode: multiply; */
}

form.wpcf7-form p {
    margin-bottom: 1.5em; /* Space between fields */
}

form.wpcf7-form label {
    display: block; /* Label on its own line */
    margin-bottom: 0.6em; /* Space between label and input */
    font-weight: bold; /* Make label text bold */
    color: #555; /* Slightly darker label color */
    font-size: 1rem;
}

/* Add a visual indicator for required fields (based on CF7 * tag in HTML) */
/* Note: This CSS adds a visual *, validation is handled by CF7 */
/* Use attribute .elementor-31 .elementor-element.elementor-element-6fcfcfd to be more specific if needed, e.g., label[for="your-name"] */
form.wpcf7-form label:not(.optional-label):not(.wpcf7-form-control-wrap) > .wpcf7-form-control-wrap::before {
    content: ''; /* Remove the asterisk here */
}

/* Add visual asterisk using the field name */
form.wpcf7-form label[for="your-name"]::after,
form.wpcf7-form label[for="your-email"]::after,
form.wpcf7-form label[for="service-interested-in"]::after,
form.wpcf7-form label[for="your-message"]::after {
     content: '*';
     color: #e74c3c; /* Red asterisk */
     margin-left: 4px;
}


/* To remove the asterisk from the optional Phone field, you'll need to
   either add a class="optional-label" to the Phone label in the CF7 form editor:
   <label class="optional-label">Phone (Optional)...</label>
   OR
   Target it specifically if the label text is consistent:
*/
/* Example using specific label text targeting (less robust than a class) */
/*
form.wpcf7-form label:contains("Phone (Optional)")::after {
   content: none;
}
*/


/* -- Style for Input Fields, Select, and Textarea -- */
form.wpcf7-form input[type="text"],
form.wpcf7-form input[type="email"],
form.wpcf7-form input[type="tel"],
form.wpcf7-form select,
form.wpcf7-form textarea {
    display: block; /* Make them block level */
    width: 100%; /* Full width */
    padding: 12px 15px; /* Internal padding */
    border: 1px solid #ccc; /* Light grey border */
    border-radius: 4px; /* Small rounded corners */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    font-size: 1rem; /* Base font size */
    color: #333; /* Text color */
    background-color: #fff; /* White background */
    /* Remove default outline */
    outline: none;

    /* -- Unique Animation Properties (Underline effect on focus) -- */
    background-image: linear-gradient(to right, #3498db, #2ecc71); /* Blue to green gradient */
    background-size: 0% 2px; /* Initially invisible (width 0, height 2px) */
    background-repeat: no-repeat;
    background-position: 0 100%; /* Position at the bottom-left */
    transition: border-color 0.3s ease-in-out, background-size 0.4s ease-in-out; /* Smooth transition for border and background size */
}

/* Style for Textarea height */
form.wpcf7-form textarea {
    min-height: 150px; /* Minimum height for message box */
    resize: vertical; /* Allow vertical resizing only */
}

/* Style Placeholder Text */
form.wpcf7-form input::placeholder,
form.wpcf7-form textarea::placeholder {
    color: #999; /* Lighter color for placeholder */
    opacity: 1; /* Ensure placeholder is visible in all browsers */
    font-style: italic; /* Italicize placeholder */
}


/* -- Focus State (The Animation Trigger) -- */
form.wpcf7-form input[type="text"]:focus,
form.wpcf7-form input[type="email"]:focus,
form.wpcf7-form input[type="tel"]:focus,
form.wpcf7-form select:focus,
form.wpcf7-form textarea:focus {
    border-color: #3498db; /* Change border color on focus */
    box-shadow: 0 0 8px rgba(52, 152, 219, 0.3); /* Add a subtle glow */
    /* Expand the background gradient to full width on focus */
    background-size: 100% 2px;
}


/* -- Style for Submit Button -- */
form.wpcf7-form input[type="submit"] {
    display: block; /* Make button block to center it */
    margin: 20px auto 0; /* Center the button and add space above */
    width: auto; /* Button width based on content */
    padding: 12px 30px; /* Internal padding */
    /* --- MODIFIED: Black button color --- */
    background-color: #000; /* Black background */
    color: white; /* White text */
    border: none; /* No border */
    border-radius: 4px; /* Rounded corners */
    cursor: pointer; /* Indicate it's clickable */
    font-size: 1.1rem; /* Slightly larger font */
    font-weight: bold;
    text-transform: uppercase; /* Optional: Match original image */
    transition: background-color 0.3s ease-in-out, transform 0.1s ease; /* Smooth transition for hover/active */
    -webkit-appearance: none; /* Remove default browser styling */
    -moz-appearance: none;
    appearance: none;
}

/* --- ADDED: Button Hover Effect (Darker shade of black/grey) --- */
form.wpcf7-form input[type="submit"]:hover {
    background-color: #333; /* Darker grey on hover */
}

/* Existing button active effect */
form.wpcf7-form input[type="submit"]:active {
    transform: scale(0.98); /* Slightly shrink on click */
}


/* -- Style for CF7 Response Messages (Optional but Recommended) -- */
div.wpcf7-response-output {
    margin-top: 1.5em;
    padding: 1em;
    border-radius: 4px;
    font-weight: bold;
    text-align: center;
    opacity: 0; /* Start hidden */
    transform: translateY(10px); /* Start slightly below */
    transition: opacity 0.4s ease-out, transform 0.4s ease-out; /* Animation */
}

div.wpcf7-response-output:not(.wpcf7-display-none) {
    opacity: 1; /* Fade in */
    transform: translateY(0); /* Slide up */
}


div.wpcf7-mail-sent-ok { /* Success message */
    border: 1px solid #2ecc71;
    color: #2ecc71;
    background-color: #e9f5eb;
}

div.wpcf7-mail-sent-failed, /* Failure message */
div.wpcf7-validation-errors { /* Validation errors */
    border: 1px solid #e74c3c;
    color: #e74c3c;
    background-color: #fdedec;
}

/* Style for validation tips below fields */
span.wpcf7-not-valid-tip {
    color: #e74c3c;
    font-size: 0.9em;
    display: block; /* Ensure it appears below the field */
    margin-top: 0.5em;
}

/* Style for the wrapper that appears around fields with validation errors */
span.wpcf7-not-valid .wpcf7-form-control {
    border-color: #e74c3c !important; /* Highlight fields with errors */
}

/* Ensure label text is visible above the underline */
form.wpcf7-form label {
    position: relative; /* Needed for z-index */
    z-index: 1; /* Ensure label is above the input background */
}

/* Hide default browser focus outline if using box-shadow */
form.wpcf7-form input:focus,
form.wpcf7-form textarea:focus,
form.wpcf7-form select:focus {
    outline: none;
}

/* Optional: Remove default dropdown arrow appearance */
form.wpcf7-form select {
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
     /* You might need to add a custom arrow icon background if you remove default appearance */
     /* background-image: url('path/to/your/arrow.svg'); */
     /* background-repeat: no-repeat; */
     /* background-position: right 15px center; */
}/* End custom CSS */