/* ... existing styles ... */
.contact-header
{
    margin-top: 90px;
}
/* Container for the form and map */
.contactUs-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin: 50px 42px 50px 42px;
}

/* Form styles */
.contactUs-container-form {
    flex: 1;
    margin-right: 50px; /* Space between form and map */
    background-color: var(--ssbond-whiteGray); /* Light background for form */
    padding: 20px; /* Padding inside the form */
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    height: 100%;
}

/* Form content (the form itself) */
.contactUs-container-form-container {
    width: 100%; /* Ensure the form takes full width of its container */
    margin-top: -165px;
}
.field-parent {
    display: grid;
    grid-template-columns: 1fr; /* Default single column layout */
    gap: 20px;
    margin-bottom: 15px;
}

/* If field-parent has two children, display them in two columns */
.field-parent .field-child {
    width: 100%;  /* Ensure children take full width in their respective column */
}
.single-field{
    width: 210%;
}
.single-field button{
    width: 100%;
}
/* This will apply when the parent container has two children (two columns layout) */
.field-parent > .field-child:nth-child(2) {
    grid-column: span 1;
}

/* On larger screens (tablet and up), adjust to display two columns for fields with two children */
@media (min-width: 768px) {
    .field-parent {
        grid-template-columns: 1fr 1fr; /* Two columns layout */
    }
    
}

.map-head {
    display: flex;
    justify-content: space-between;  /* Space between the two map-head sections */
    flex-wrap: wrap; /* Allow the items to wrap in smaller screen sizes */
    gap: 20px;  /* Add space between each map-head item */
}

.map-head-1, .map-head-2 {
    display: flex;
    align-items: flex-start;  /* Align items in the center */
    gap: 10px;  /* Add space between the image and text */
    width: 45%; /* Set each item to take 45% of the width */
}

.map-head-image {
    width: 130px;   /* Fixed width for the image */
    height: 75px;  /* Fixed height for the image */
    overflow: hidden;  /* Ensures the image stays within the container */
}

.map-head-image img {
    width: 100%;
    height: 100%; /* Stretch the image to fill the fixed container */
    object-fit: cover;  /* Keeps the aspect ratio of the image and ensures it covers the entire container */
    border-radius: 8px;  /* Optional: Rounded corners for the image */
}
.field-child label h2{
    text-align: left;
}
.map-head-text {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;  /* Center the text vertically */
}

.map-head-text h2 {
    font-size: var(--ssbond-m-b5);  /* Set heading size */
    margin: 0;  /* Remove default margin */
}

.map-head-text p {
    font-size: var(--ssbond-m-desc1);  /* Set paragraph size */
    margin: 5px 0 0 0;  /* Add some margin to the paragraph below the heading */
}

/* Responsive adjustments for smaller screens */
@media (max-width: 576px) {
    .map-head-image{
        width: 130px;
        height: 70px;
    }
}
@media (max-width: 768px) {
    .map-head-1, .map-head-2 {
        width: 100%; /* Make each section full width on small screens */
        margin-bottom: 20px;  /* Space between sections */
    }
}
/* Base styling for contactUs and social sections */
.map-head-contactUs, .map-head-social {
    margin-top: 25px;
}

.map-head-contactUs-child div, .map-head-social-child div {
    display: flex;
    flex-direction: row;
    gap: 30px; /* Space between each item */
    margin-top: 1%;
}
.map-head-contactUs-child div h2, .map-head-social-child div h2 {
  font-size: var(--ssbond-m-b5);
}

/* Styling for icons in the contactUs/social sections */
.map-icon i {
    margin-right: 10px;
}
.map-icon p{
    font-size: var(--ssbond-m-desc2);
}
/* Responsive Design for smaller screens */
@media (max-width: 1200px) {
    .map-head-contactUs-child div, .map-head-social-child div {
        gap: 20px; /* Reduce gap on medium screens */
    }
}

@media (max-width: 992px) {
    .map-head-contactUs, .map-head-social {
        margin-top: 15px;  /* Reduce margin on medium screens */
    }

    .map-head-contactUs-child div, .map-head-social-child div {
        flex-direction: column;  /* Stack items vertically on smaller screens */
        gap: 15px;  /* Adjust gap between items */
    }
}

@media (max-width: 768px) {
    .map-head-contactUs, .map-head-social {
        margin-top: 10px;  /* Smaller margin on mobile */
        padding: 15px;  /* Add padding inside for better spacing */
    }

    .map-head-contactUs-child div, .map-head-social-child div {
        flex-direction: column;  /* Stack items vertically */
        gap: 10px;  /* Reduce the gap between items */
    }

    .map-icon i {
        margin-right: 5px;  /* Less margin between icon and text */
    }

    /* Font size adjustments for better readability on mobile */
    .map-head-contactUs h2, .map-head-social h2 {
        font-size: 18px;  /* Smaller font size for headings */
    }

    .map-head-contactUs p, .map-head-social p {
        font-size: var(--ssbond-d-desc2);  /* Smaller font size for text */
    }
}

@media (max-width: 480px) {
    /* For very small screens (e.g., phones in portrait mode) */
    .contactUs-container-form-container{
        margin-top: 0px;
    }
    .map-head-contactUs, .map-head-social {
        padding: 10px;  /* Less padding */
    }

    .map-head-contactUs h2, .map-head-social h2 {
        font-size: 16px;  /* Smaller font size for very small screens */
    }

    .map-head-contactUs p, .map-head-social p {
        font-size: var(--ssbond-d-btn-card);  /* Smaller text for very small screens */
    }
    .single-field{
        width: 260px !important;
    }
   
}

#map{
    margin-top: 30px;
    height: 300px;
}
/* Map styles */
.contactUs-map {
    flex: 2;
    background-color: var(--ssbond-whiteGray); /* Light background for map section */
    padding: 20px; /* Padding inside the map section */
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}

/* Input styles */
.contactUs-field-text,
.contactUs-field-tel,
.contactUs-field-email,
.contactUs-field-submit,
select {
    width: 100%; /* Full width */
    padding: 10px; /* Padding inside inputs */
    margin: 10px 0; /* Margin between inputs */
    border: 1px solid #ccc; /* Border style */
    border-radius: 4px; /* Rounded corners */
    background-color: var(--ssbond-white);
    color: var(--ssbond-black);
}
.field-parent div button{
    color:var(--ssbond-white);
    background:var(--ssbond-red);
}
/* Button styles */
button {
    background: var(--ssbond-primaryLinear); /* Button color */
    color: var(--ssbond-white); /* Text color */
    padding: 10px 15px; /* Padding inside button */
    border: none; /* No border */
    border-radius: 4px; /* Rounded corners */
    cursor: pointer; /* Pointer cursor on hover */
}


/* Responsive styles */
@media (max-width: 768px) {
    .contactUs-container {
        flex-direction: column; /* Stack on small screens */
        width: 325px;
        margin-left: 15px;
        width: calc(100% - 30px);
    }
    .contactUs-container-form {
        margin-right: 0; /* Remove margin on small screens */
        margin-bottom: 20px; /* Space below form */
    }
    .field-child label h2{
        font-size: var(--ssbond-d-desc1) !important;
    }
    .field-parent .single-field{
        width: 285px !important;
        max-width: 285px !important;
    }
    /* shoplist input */
    #dataForm .field-parent .single-field{
        width: 285px !important;
    }
    .job-modal-form .field-parent .single-field .contactUs-field-submit{
        width: 260px !important;
    }
    .single-field button{
        width: 285px !important;
    }
}

/* ... existing styles ... */