/* Modern, Responsive, Interactive Contact Us Styles - Light Theme */

body, .contact-main {
  background: #f7fafc;
  color: #22334a;
}

.contact-main {
  max-width: 1280px;
  margin: 0 auto;
  padding: 2.5rem 1rem 3rem 1rem;
  font-family: inherit;
}

.section-title {
  font-size: 2.5rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  margin-bottom: 2rem;
  color: #0a2351;
  text-align: center;
  text-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

/* Modern Info Bar */
.contact-info-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.5rem;
  background: linear-gradient(90deg, #e3f0ff 0%, #fafdff 100%);
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.07);
  padding: 1.1rem 1.5rem;
  margin-bottom: 2.2rem;
  font-size: 1.17rem;
  color: #194d8a;
  font-weight: 600;
  flex-wrap: wrap;
  border: 1.5px solid #b5d6f7;
}
.contact-info-bar i {
  color: #008DD2;
  margin-right: 0.7em;
  font-size: 1.3em;
}

.contact-section {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 2px 18px rgba(20,40,60,0.07);
  padding: 2.2rem 2.5vw 2.5rem 2.5vw;
  margin-bottom: 2.5rem;
  border: 1.5px solid #e3eaf3;
}

.contact-head-office {
  margin-bottom: 2.7rem;
  padding-bottom: 1.5rem;
  border-bottom: 1.5px solid #e3eaf3;
}
.contact-subtitle {
  margin-top: 1.5rem;
  font-size: 1.35rem;
  font-weight: 700;
  margin-bottom: 1.2rem;
  color: #008DD2;
  letter-spacing: 0.01em;
}
.section-title {
  color: #008DD2;
  font-size: 1.35rem;
  font-weight: 700;
  margin-bottom: 1.2rem;
  letter-spacing: 0.01em;
  text-align: left;
}
.contact-info {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem 2.5rem;
}
.contact-info-block {
  min-width: 220px;
  margin-bottom: 0.3rem;
}
.contact-label {
  font-weight: 700;
  color: #1976d2;
  margin-right: 0.4em;
}
.contact-value {
  color: #0a2351;
  font-weight: 400;
}

/* Responsive Interactive Branch Grid */
.branch-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem 1.5rem;
  margin-top: 2.2rem;
  margin-bottom: 0.7rem;
}
.branch-card {
  background: linear-gradient(120deg, #fafdff 70%, #e3f0ff 100%);
  border-radius: 14px;
  padding: 1.5rem 1.1rem 1.3rem 1.1rem;
  box-shadow: 0 2px 12px rgba(20,40,60,0.07);
  transition: transform 0.18s cubic-bezier(.4,1.3,.7,1), box-shadow 0.18s, border 0.18s;
  border: 2px solid #e3eaf3;
  position: relative;
  cursor: pointer;
  overflow: hidden;
}
.branch-card:hover, .branch-card:focus {
  transform: translateY(-6px) scale(1.03);
  box-shadow: 0 8px 28px rgba(25, 118, 210, 0.13);
  border: 2px solid #008DD2;
  z-index: 1;
}
.branch-title {
  font-size: 1.18rem;
  font-weight: 800;
  color: #194d8a;
  margin-bottom: 0.5rem;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 6px rgba(0,0,0,0.06);
}
.branch-details {
  font-size: 1.04rem;
  color: #22334a;
  line-height: 1.6;
}
.branch-details a {
  color: #1565c0;
  text-decoration: underline dotted;
  transition: color 0.15s;
}
.branch-card:hover .branch-details a,
.branch-card:focus .branch-details a {
  color: #008DD2;
}

/* Responsive Grid Breakpoints */
@media (max-width: 1100px) {
  .branch-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 700px) {
  .branch-grid {
    grid-template-columns: 1fr;
  }
  .contact-section {
    padding: 1.3rem 1vw 1.7rem 1vw;
  }
  .contact-main {
    padding: 1rem 0.2rem 2rem 0.2rem;
  }
  .section-title { font-size: 1.6rem; }
  .branch-title { font-size: 1rem; }
  .branch-details, .contact-info-block { font-size: 0.97rem; }
}
@media (max-width: 500px) {
  .contact-main {
    padding: 0.7rem 0.1rem 1.3rem 0.1rem;
  }
  .section-title { font-size: 1.1rem; }
  .contact-subtitle { font-size: 1.01rem; }
  .branch-title { font-size: 0.98rem; }
  .branch-details, .contact-info-block { font-size: 0.92rem; }
  .branch-card { padding: 0.8rem 0.5rem; }
}

/* Interactive focus for accessibility */
.branch-card:focus {
  outline: 2px solid #ffc107;
  outline-offset: 2px;
}