@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');


/* ENQUIRY SECTION  */
/* Banner Image */
.contact-banner {
  width: 100%;
  height: 300px;
  overflow: hidden;
}

.contact-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Header Below Banner */
.contact-header {
  text-align: center;
  margin: 50px auto 20px;
  max-width: 800px;
  padding: 0 20px;
}

.contact-header h1 {
  font-size: 2.2rem;
  font-weight: 700;
  color: #003366;
  margin-bottom: 10px;
}

.contact-header p {
  font-size: 1.1rem;
  line-height: 1.6;
  color: #444;
}

/* Contact Section Layout */
#contact {
  background: #f8f9fb;
  padding-bottom: 60px;
}

.contact-container {
  display: flex;
  gap: 40px;
  align-items: flex-start;
  flex-wrap: wrap;
  padding: 0 40px;
  justify-content: center;
}

.contact-container article {
  flex: 1;
  min-width: 300px;
}

/* Contact Info Menu */
.contact-menu a {
  display: flex;
  align-items: center;
  gap: 15px;
  text-decoration: none;
  color: #222;
  margin-bottom: 25px;
  transition: all 0.3s ease;
}

.contact-menu a:hover {
  color: #007bff;
}

.contact-menu i {
  font-size: 1.8rem;
  color: #007bff;
}

.contact-menu h5 {
  font-weight: 600;
}

.contact-menu small {
  font-size: 0.9rem;
  color: #555;
}

/* Form Styling */
form {
  flex: 1;
  min-width: 320px;
  background: #fff;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.form-controller {
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
}

.form-controller label {
  font-weight: 600;
  margin-bottom: 6px;
}

.form-controller input,
.form-controller textarea {
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 1rem;
  width: 100%;
}

form button {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 12px 25px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.3s ease;
}

form button:hover {
  background-color: #0056b3;
}

/* Confirm Message */
.confirm-message {
  margin-top: 15px;
  font-weight: 600;
  color: green;
  display: none;
}

/* Responsive */
@media (max-width: 900px) {
  .contact-container {
    flex-direction: column;
    gap: 30px;
    padding: 0 20px;
  }

  .contact-banner {
    height: 220px;
  }

  .contact-header h1 {
    font-size: 1.7rem;
  }

  .contact-header p {
    font-size: 0.95rem;
  }
}

/* Google Map  */
/* --- MAP SECTION STYLING --- */
.map-section {
    padding: 50px 20px;
    background-color: #f8f8f8;
    text-align: center;
}

.map-section h2 {
    margin-bottom: 30px;
}

/* --- RESPONSIVE CONTAINER STYLING --- */
.map-responsive {
    /* Set the container to occupy the available width */
    max-width: 1000px; 
    margin: 0 auto;
    
    /* 1. Set position to relative for the absolute iframe positioning */
    position: relative; 
    
    /* 2. Aspect Ratio Trick (16:9 ratio in this example) */
    /* Height will be 56.25% of the width (9 / 16 = 0.5625) */
    padding-bottom: 56.25%; 
    
    height: 0;
    overflow: hidden; /* Ensures nothing spills out */
    border-radius: 8px; /* Optional: adds rounded corners */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* To get a 4:3 ratio instead, use:
.map-responsive {
    padding-bottom: 75%;  (3 / 4 = 0.75)
}
*/

/* --- IFRAME STYLING --- */
.map-responsive iframe {
    /* 3. Force the iframe to fill the container exactly */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0; /* Ensures no default border remains */
}

/* Media Query For Tablets  */
/* @media  (max-width: 960px){ 
    body{
        font-size: 1rem;
    }
    .container{
        width: 90%;
    }
    section{
        padding-block: 6rem;
    }
} */
/* MOBILE & TABLET (adjust breakpoint if needed) */
@media (max-width: 768px) {
  .contact-container {
    display: block;      /* or flex with column */
    padding: 1rem;
  }

  .contact-container article,
  .contact-container form {
    width: 100%;
  }

  .contact-menu a {
    flex-direction: row;
    align-items: center;
  }

  .contact-menu {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  form .form-controller {
    width: 100%;
  }

  form button {
    width: 100%;
  }
}

/* SMALLER PHONES */
@media (max-width: 480px) {
  .contact-container {
    padding: 0.5rem;
  }

  .contact-menu a div h5 {
    font-size: 1rem;
  }

  .contact-menu a div small {
    font-size: 0.8rem;
  }

  textarea,
  input {
    font-size: 1rem;
  }
}