.elementor-3880 .elementor-element.elementor-element-0bd543e{--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;overflow:visible;}#elementor-popup-modal-3880{background-color:rgba(0,0,0,.8);justify-content:center;align-items:center;pointer-events:all;}#elementor-popup-modal-3880 .dialog-message{width:640px;height:auto;}#elementor-popup-modal-3880 .dialog-close-button{display:flex;}#elementor-popup-modal-3880 .dialog-widget-content{box-shadow:2px 8px 23px 3px rgba(0,0,0,0.2);}/* Start custom CSS for shortcode, class: .elementor-element-5a0e06f *//*
 * This CSS is designed to style a Gravity Form with ID "3"
 * to match the modern, professional design using a green, orange,
 * and deep brown color palette.
 *
 * To use this, add the code to your WordPress site's
 * Appearance -> Customize -> Additional CSS section.
 */

/* Define custom deep brown color for Tailwind-like styling */
:root {
    --deep-brown: #4A2A1A;
}

/* Base form container styling */
#gform_wrapper_3 {
    max-width: 42rem; /* Sets a maximum width for the form container to keep it from getting too wide on large screens */
    width: 100%; /* Makes the container full-width on smaller screens */
    background-color: #fff; /* Sets the background color of the form to white */
    border-radius: 1.5rem; /* Adds rounded corners to the form container */
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); /* Adds a drop shadow for a floating effect */
    padding: 2rem 3rem; /* Adds padding inside the form container */
}



/* Grouping for form fields */
#gform_fields_3 {
    display: grid; /* Uses CSS Grid for a flexible layout */
    gap: 1.5rem; /* Adds space between form fields */
}



/* Required field indicator */
.gfield_required {
    color: #EF4444; /* Sets the color of the required asterisk to red */
    margin-left: 0.25rem; /* Adds a small space to the left of the asterisk */
}

/* Style for text inputs, phone, email, and select dropdowns */
.ginput_container_text input,
.ginput_container_phone input,
.ginput_container_email input,
.ginput_container_select select {
   
    border-radius: 0.375rem; /* Adds rounded corners to the input fields */
    border-width: 1px; /* Sets the border thickness */
    border-color: #D1D5DB; /* Sets the border color to a light gray */
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* Adds a subtle shadow to the input fields */
    padding: 0.75rem; /* Adds padding inside the input fields */
    transition-property: border-color, box-shadow; /* Adds a smooth transition effect for border and shadow changes */
    transition-duration: 150ms; /* Sets the duration of the transition */
}

.ginput_container_text input:focus,
.ginput_container_phone input:focus,
.ginput_container_email input:focus,
.ginput_container_select select:focus {
    border-color: #22C55E !important; /* Sets the border color to green when the input is focused */
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.5) !important; /* Adds a green ring shadow when the input is focused */
    outline: none !important; /* Removes the default browser outline */
}

/* Responsive grid for side-by-side fields on larger screens, like in your photo */

@media (min-width: 640px) { /* Applies styles only when the screen width is 640px or more (mobile breakpoint) */
    .gfield--width-half {
        grid-template-columns: 1fr 1fr; /* Changes to two equal columns on larger screens */
    }
}

.applying-for {
    
    display:none;
    
}

/* Custom styles for the drag-and-drop area */
.gform_drop_area {
    display: flex; /* Uses Flexbox for easy alignment of children */
    flex-direction: column; /* Arranges items vertically */
    align-items: center; /* Centers items horizontally */
    justify-content: center; /* Centers items vertically */
    border: 2px dashed; /* Adds a dashed border */
    border-radius: 0.5rem; /* Adds rounded corners to the drop area */
    padding: 1.5rem; /* Adds padding inside the drop area */
    text-align: center; /* Centers the text within the drop area */
    transition-property: background-color, border-color, color; /* Adds a smooth transition for colors */
    transition-duration: 300ms; /* Sets the duration of the transition */
    border-color: var(--deep-brown) !important; /* Sets the border color to deep brown */
    color: #F97316 !important; /* Sets the color of the icon and text to orange */
}

.gform_drop_area:hover {
    border-color: #F97316 !important; /* Changes the border color to orange on hover */
    background-color: #FFFBEB !important; /* Changes the background to a very light orange on hover */
}

/* Style the select files button */
.gform_button_select_files {
    margin-top: 0.75rem; /* Adds space above the button */
    padding: 0.5rem 1.5rem; /* Adds padding inside the button */
    border-width: 1px; /* Sets the border thickness */
    font-weight: 600; /* Makes the font medium bold */
    border-radius: 9999px; /* Makes the button fully rounded */
    transition-property: background-color, color; /* Adds a smooth transition for background and text colors */
    transition-duration: 300ms; /* Sets the duration of the transition */
    border-color: var(--deep-brown) !important; /* Sets the border color to deep brown */
    color: var(--deep-brown); /* Sets the text color to deep brown */
    background-color: #F97316 !important; /* Sets the background color to orange */
}

.gform_button_select_files:hover {
    color: #fff !important; /* Changes text color to white on hover */
    background-color: #EA580C !important; /* Changes background color to a darker orange on hover */
}

/* File upload rules and messages */
.gform_fileupload_rules,
.gform_fileupload_messages {
    display: block; /* Makes the element a block for spacing */
    font-size: 0.875rem; /* Sets a small font size */
    color: #6B7280 !important; /* Sets the text color to gray */
    margin-top: 0.5rem; /* Adds space above the element */
}

/* Style the submit button */
.gform_button.button {
    width: 100%; /* Makes the button take up the full width */
    padding: 1rem 1.5rem; /* Adds generous padding to the button */
    border-radius: 9999px; /* Makes the button fully rounded */
    color: #fff !important; /* Sets the text color to white */
    background-color: #F97316 !important; /* Sets the background color to orange */
    font-weight: 700; /* Makes the text bold */
    font-size: 1.125rem; /* Sets a large font size for the button text */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); /* Adds a shadow for depth */
    transition-property: background-color, transform; /* Adds a smooth transition for background color and transform */
    transition-duration: 300ms; /* Sets the duration of the transition */
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); /* Sets a smooth timing function for the transition */
}

.gform_button.button:hover {
    background-color: #EA580C !important; /* Changes background to a darker orange on hover */
    transform: scale(1.05); /* Slightly enlarges the button on hover */
}/* End custom CSS */