/* Basic Reset / Box Sizing */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif; /* Or your site's font */
    line-height: 1.6;
    background-color: #f4f7f6; /* Light background for context */
}

/* Main Section Wrapper */
.shop-here-section {
    padding-top:37px;
    padding-bottom:29px;
}

/* Container Styling (from original classes) */
.responsive-container-block.container {
    max-width: 1150px; /* Adjust max width as needed */
    margin: 0 auto; /* Center the container */
    padding: 0 15px; /* Add horizontal padding */
}

/* Form Wrapper - Becomes Flex Container on larger screens */
.form-wrapper {
    background-color: #ffffff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    display: flex; /* Use Flexbox */
    flex-direction: column; /* Stack elements by default (mobile) */
}

/* Left side: Inputs container */
.form-inputs-container {
    width: 100%; /* Take full width on mobile */
    margin-bottom: 30px; /* Space below inputs on mobile */
}

    /* Using the nested responsive blocks for input layout */
    .form-inputs-container .responsive-container-block {
        display: flex;
        flex-wrap: wrap; /* Allow items to wrap */
        margin-left: -10px; /* Counteract padding on cells */
        margin-right: -10px;
    }

    .form-inputs-container .responsive-cell-block {
        padding-left: 10px; /* Gutter between fields */
        padding-right: 10px;
        margin-bottom: 20px; /* Space below each field group */
    }

    /* Widths based on original wk classes (Mobile First) */
    .form-inputs-container .wk-mobile-12 {
        width: 100%;
    }

/* Form Field Styling */
.form-label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #333;
    font-size: 0.9em;
}

.input,
.textinput {
    display: block;
    width: 100%;
    padding: 12px 15px;
    font-size: 1em;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #fff;
    transition: border-color 0.3s ease;
}

    .input:focus,
    .textinput:focus {
        border-color: #007bff; /* Highlight on focus */
        outline: none;
    }

textarea.textinput {
    resize: vertical; /* Allow vertical resize */
    min-height: 100px;
}

/* Button Styling */
.form-submit-group {
    margin-top: 10px; /* Space above button */
}

.submit-btn {
    display: inline-block;
    background-color: #007bff; /* Example blue */
    color: white;
    padding: 12px 30px;
    border: none;
    border-radius: 5px;
    font-size: 1.1em;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease;
    text-align: center;
    width: 100%; /* Full width button on mobile */
}

    .submit-btn:hover,
    .submit-btn:focus {
        background-color: #0056b3; /* Darker blue on hover */
        outline: none;
    }

/* Right Side: Text and Social Links */
.right-side-text {
    width: 100%; /* Full width on mobile */
    padding: 20px;
    background-color: #f8f9fa; /* Slightly different background */
    border-radius: 5px;
    text-align: center; /* Center text on mobile */
}

.text-blk {
    color: #333;
    line-height: 1.5;
}

.contactus-head {
    font-size: 1.8em;
    font-weight: 600;
    margin-bottom: 15px;
}

.contactus-subhead {
    font-size: 1em;
    color: #555;
    margin-bottom: 25px;
}

.social-media-links {
    margin-top: 20px;
}

    .social-media-links a {
        display: inline-block;
        margin: 0 10px;
    }

.link-img {
    width: 30px; /* Adjust size as needed */
    height: 30px;
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

    .link-img:hover {
        opacity: 1;
    }

/* --- Responsive Adjustments --- */

/* Tablets (adjust breakpoint as needed) */
@media (min-width: 768px) {
    .form-wrapper {
        flex-direction: row; /* Arrange items side-by-side */
        align-items: flex-start; /* Align items to the top */
        gap: 30px; /* Space between left and right columns */
    }

    .form-inputs-container {
        width: 60%; /* Example: Inputs take 60% */
        margin-bottom: 0; /* No bottom margin needed */
        order: 1; /* Keep inputs on the left */
    }

    .right-side-text {
        width: 40%; /* Example: Text takes 40% */
        order: 2; /* Keep text on the right */
        text-align: left; /* Align text left */
        padding: 30px;
        align-self: stretch; /* Make it same height as form potentially */
        display: flex;
        flex-direction: column;
        justify-content: center; /* Center content vertically */
    }

    /* Apply tablet widths for inputs */
    .form-inputs-container .wk-tab-12 {
        width: 100%;
    }

    .form-inputs-container .wk-ipadp-6 {
        width: 50%;
    }
    /* Assuming iPad Portrait uses 2 columns */

    .submit-btn {
        width: auto; /* Allow button to size to content */
        padding: 12px 40px;
    }

    .contactus-head {
        font-size: 2em;
    }
}

/* Desktops (adjust breakpoint as needed) */
@media (min-width: 992px) {
    .form-inputs-container {
        width: 65%; /* Adjust width split */
    }

    .right-side-text {
        width: 35%; /* Adjust width split */
    }

    /* Apply desktop widths (assuming 2 columns for most fields) */
    .form-inputs-container .wk-desk-6 {
        width: 50%;
    }

    .form-inputs-container .wk-desk-12 {
        width: 100%;
    }
    /* Ensure full width fields respect it */


    .contactus-head {
        font-size: 2.2em;
    }

    .contactus-subhead {
        font-size: 1.1em;
    }
}

/* Larger Desktops (Optional) */
@media (min-width: 1200px) {
    .form-wrapper {
        padding: 40px;
        gap: 40px;
    }

    .right-side-text {
        padding: 40px;
    }
}