/* Store Location Section Styling */
#store {
    padding: 40px 0; /* Adjust padding for top and bottom */
    background-color: #24292f; /* Background color */
    color: white; /* Text color */
    display: flex;
    white-space: nowrap;
    font-family: 'Roboto';
    padding-top: 80px !important;
}

#store h2 {
    font-size: 32px; /* Adjust font size */
    font-weight: bold; /* Make the title bold */
    line-height: 1.2; /* Line height for better spacing */
}

#store p {
    font-size: 16px; /* Adjust font size */
    line-height: 1.5; /* Line height for better readability */
    margin: 0; /* Remove default margin */
    flex-grow: 1; /* Ensure the text takes available space */
}

#store .store-title {
    margin-left: 80px; /* Add left margin to the title */
    font-size: 32px; /* Adjust font size */
    font-weight: bold; /* Make the title bold */
    line-height: 1.2; /* Line height for better spacing */
}

#store .store-desc {
    flex-grow: 1; /* Ensure the text takes available space */
    font-size: 16px; /* Adjust font size */
    line-height: 1.5; /* Line height for better readability */
    margin: 0; /* Remove default margin */
    margin-left: 40px;
}

#store .d-flex {
    display: flex;
    align-items: center; /* Align items vertically centered */
    width: 100%; /* Ensure the flex container takes full width */
}

#store .ml-auto {
    margin-left: auto; /* Push the button to the right */
}

#store .store-image {
    flex: 1; /* Allow images to take equal space */
    max-width: 30%; /* Reduce maximum width for images */
    margin: 0 10px; /* Add margin between images */
    transition: transform 0.3s, box-shadow 0.3s; /* Smooth transition for hover effect */
}

#store .store-image img {
    width: 100%; /* Ensure images are responsive */
    height: auto; /* Maintain aspect ratio */
    object-fit: cover; /* Ensure the images maintain their aspect ratio */
}

/* Hover effect for store images */
#store .store-image:hover {
    transform: scale(1.05); /* Slightly enlarge the image */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important; /* Add a subtle shadow */
}

/* Hover effect for store images */
#store .store-image:hover img {
    filter: grayscale(100%) brightness(80%); /* Apply grayscale and darken the image */
}

.etc-button {
    margin-right: 25px;
}

.responsive-iframe {
    width: 100%;
    height: 500px; /* Adjust the height based on your design requirements */
    border: none;
    position: relative;
    top: -50px; /* Adjust this value to move the iframe up and hide the black bar */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Optional: Adds a subtle shadow for visual separation */
}

.map-container {
    width: 100%;
    max-width: 1200px; /* Adjust this value as needed */
    margin: 0 auto; /* Centers the map within the section */
    padding: 0 15px; /* Adds padding to prevent content from touching the edges */
    overflow: hidden; /* Hides any overflow that might include the black bar */
}