* {
    box-sizing: border-box; /* Ensure padding and borders are included in width/height */
}
body{
    font-family: 'Poppins', sans-serif;
    background: #f5f5f7;
}
.contact-in {
    width: 80%;
    margin: auto auto 5rem auto;
    display: flex; /* Use flexbox to align children side by side */
    flex-wrap: wrap; /* Allow wrapping for responsiveness */
    padding: 10px;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0px 0px 8px 0px #e0e0e0; /* Adjust shadow size */
    
    margin-top: 3%;
}

.contact-map {
    flex: 1; /* Allow the map to take available space */
    margin-right: 2rem; /* Add some space between the map and form */
    min-width: 300px; /* Ensure the map has a minimum width */
}

.contact-map iframe {
    width: 100%;
    height: 450px; /* Set a specific height for the map */
}

.contact-form {
    flex: 1; /* Allow the form to take available space */
    display: flex;
    flex-direction: column; /* Align items vertically */
    min-width: 300px; /* Ensure the form has a minimum width */
}

.contact-form input,
.contact-form textarea {
    width: 95%; /* Set a uniform width */
    height: 50px; /* Uniform height for inputs */
    color: #000;
    border: 1px solid #bcbcbc;
    border-radius: 50px; /* Rounded corners */
    outline: none;
    margin: 10px auto; /* Centering with margin auto */
    padding: 0 15px; /* Consistent padding */
}

.contact-form textarea {
    height: 130px; /* Set height for textarea */
    border-radius: 10px; /* Different radius for textarea */
}

.contact-form-btn {
    outline: none;
    border: none;
    border-radius: 5rem;
    background: #ff7542;
    border-style: groove;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    height: 3.5rem; /* Ensure uniform height for button */
    width: 15rem; /* Set a uniform width for button */
    display: block; /* Block element to enable centering */
    margin: 20px auto; /* Center the button and add margin */
    box-shadow: 0 .2rem .5rem rgba(0, 0, 0, .3);
}



/* Placeholder styling (optional) */
.contact-form input::placeholder,
.contact-form textarea::placeholder {
    color: #aaa;
    font-size: 1.3rem; /* Keep placeholder font size consistent */
}
.locations-section {
    width: 65%;
    margin: auto auto 5rem auto;
    display: flex; /* Use flexbox to align children side by side */
    flex-wrap: wrap; /* Allow wrapping for responsiveness */
    padding: 10px;
    border-radius: 10px;
    background:white;
    margin-top: 3%;
    align-items: center;
}
.locations-section1 {
    width: 65%;
    margin: auto auto 5rem auto;
    display: flex; /* Use flexbox to align children side by side */
    flex-wrap: wrap; /* Allow wrapping for responsiveness */
    padding: 10px;
    border-radius: 10px;
    background:white;
    margin-top: 3%;
    align-items: center;
}




h1 {
    font-size: 3rem;
    color: #ff7542; /* Yellow color */
    margin-bottom: 28px;
    margin-left: auto;
    text-align: center;
    
}

.locations {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    text-align: center;
    align-items: center;
}

.location h2 {
    font-size: 2rem;
    color: black; 
    margin-bottom: 5px;
    font-family: 40%;
    text-align: center;
    
}

.location p {
    font-size: 1.8rem;
    line-height: 1.5;
    color: black;
    text-align: center;
    
}

/* Responsive design */
@media (max-width: 768px) {
    .locations {
        grid-template-columns: 1fr; /* Stack columns on small screens */
    }
   
}

@media (max-width: 768px) {
    h1 {
        font-size: 2.5rem; /* Smaller font for h1 on tablets and smaller screens */
    }

    .location h2 {
        font-size: 1.5rem; /* Smaller font for h2 on tablets and smaller screens */
    }

    .location p {
        font-size: 1.2rem; /* Smaller font for p on tablets and smaller screens */
    }
}

@media (max-width: 480px) {
    h1 {
        font-size: 2rem; /* Even smaller font for h1 on small mobile screens */
    }

    .location h2 {
        font-size: 1.2rem; /* Even smaller font for h2 on small mobile screens */
    }

    .location p {
        font-size: 1rem; /* Even smaller font for p on small mobile screens */
    }
}

.operating-hour {
    width: 65%; /* Make it wider on small screens */
    margin: 3% auto 5rem; /* Maintain centering */
    padding: 15px; /* Increase padding for better touch accessibility */
    border-radius: 10px;
    background: white;
    text-align: center;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Add slight shadow for better visibility */
}

.operating-hours {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px; /* Slightly increase gap for better spacing on smaller screens */
}

.operating-hours .hours h2,
.operating-hours .days h2 {
    font-size: 20px; /* Reduce font size for smaller screens */
    margin-bottom: 5px;
}

.operating-hours p {
    font-size: 16px; /* Adjust paragraph font size for readability */
    margin: 0;
}

/* Media query for smaller devices */
@media (max-width: 768px) {
    .operating-hour {
        width: 65%; /* Use almost full width on small screens */
    }

    .operating-hours .hours h2,
    .operating-hours .days h2 {
        font-size: 18px; /* Further adjust headings font size */
    }

    .operating-hours p {
        font-size: 14px; /* Reduce font size for better fit */
    }
}

/* Media query for very small devices */
@media (max-width: 480px) {
    .operating-hour {
        margin: 3% auto 2rem; /* Adjust bottom margin */
        padding: 10px; /* Reduce padding to conserve space */
    }

    .operating-hours {
        gap: 10px; /* Slightly reduce gap */
    }

    .operating-hours .hours h2,
    .operating-hours .days h2 {
        font-size: 16px; /* Smaller font size for small devices */
    }

    .operating-hours p {
        font-size: 12px; /* Make paragraph font even smaller */
    }
}