/* ===== Contact.CSS ===== */
/* About Page Specific Styles */

/* === Contact Hero Section === */
.contact-hero {
  background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
    url('../img/banners/contact.webp') no-repeat center center;
  background-size: cover; /* Change back to cover */
  height: 500px; /* Fixed height */
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-align: left;
  padding: 120px 1rem 0; /* Top padding for navbar */
  position: relative;
  margin-top: 0;
  width: 100%;
  overflow: hidden;
}

.contact-hero h1 {
  font-size: 3.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.contact-hero p.lead {
  font-size: 1.5rem;
  max-width: 800px;
  margin: 0 auto 2rem;
}

@media (max-width: 768px) {
  .contact-hero {
    height: 400px;
    padding-top: 100px;
  }

  .contact-hero h1 {
    font-size: 2.5rem;
  }

  .contact-hero p.lead {
    font-size: 1.1rem;
  }
}

.breadcrumb {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
}

.breadcrumb-item {
  margin-right: 10px;
}

.breadcrumb-item a {
  text-decoration: none;
  color: #ffffff;
  transition: color 0.3s; /* Smooth transition for color change */
}

.breadcrumb-item a:hover,
.breadcrumb-item a:active {
  color: #007bff; /* Change this to your desired hover/active color */
}

.breadcrumb-item.active {
  color: #ffffff;
}

.breadcrumb-item + .breadcrumb-item::before {
  content: '>';
  margin: 0 10px;
  color: #ffffff;
}

/* === Contact Cards === */
.contact-section .card-common {
  background-color: #ffffff; /* White background for cards */
  border: 1px solid rgba(0, 0, 0, 0.1); /* Subtle border for separation */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); /* Soft shadow for depth */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth hover effect */
  border-radius: 8px; /* Rounded corners for a modern look */
}

/* Hover Effect for Cards */
.contact-section .card-common:hover {
  transform: translateY(-5px); /* Slight upward movement */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1); /* Enhanced shadow on hover */
}

/* Card Icons */
.contact-section .card-icon {
  transition: transform 0.3s ease; /* Smooth animation for icons */
}

.contact-section .card-common:hover .card-icon {
  transform: translateY(-5px); /* Icons move slightly upward on hover */
}

/* Card Titles */
.contact-section h3 {
  font-size: 1.5rem;
  font-weight: 600;
  color: #333; /* Dark text for card titles */
}

/* Card Text */
.contact-section p {
  font-size: 0.9rem;
  color: #666; /* Lighter text for descriptions */
}

/* Buttons in Cards */
.contact-section .btn-outline-primary {
  border-color: #007bff; /* Blue border */
  color: #007bff; /* Blue text */
}

.contact-section .btn-outline-primary:hover {
  background-color: #007bff; /* Solid blue background on hover */
  color: #fff; /* White text on hover */
}

.contact-section .btn-outline-success {
  border-color: #28a745; /* Green border */
  color: #28a745; /* Green text */
}

.contact-section .btn-outline-success:hover {
  background-color: #28a745; /* Solid green background on hover */
  color: #fff; /* White text on hover */
}

/* === Get in Touch Section === */
.contact-section {
  padding-top: 4rem;
  padding-bottom: 4rem;
  background-color: #f8f9fa; /* Light gray background */
}

.contact-section h2 {
  font-size: 2.5rem; /* Increased font size */
  font-weight: 700;
  margin-bottom: 1rem;
}

.contact-section p.lead {
  font-size: 1.25rem; /* Increased font size */
  color: #666;
  max-width: 800px;
  margin: 0 auto 2rem;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .contact-section h2 {
    font-size: 2rem; /* Slightly smaller on mobile */
  }

  .contact-section p.lead {
    font-size: 1rem; /* Slightly smaller on mobile */
  }
}

/* === Maps and Image Section === */
.maps-image-section {
  padding-top: 4rem;
  padding-bottom: 4rem;
  background-color: #fff; /* White background */
}

.maps-image-section h2 {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.maps-image-section p.lead {
  font-size: 1.25rem;
  color: #666;
  max-width: 800px;
  margin: 0 auto 2rem;
}

/* Maps Container */
.maps-container iframe {
  border-radius: 10px; /* Rounded corners for modern look */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
  transition: transform 0.3s ease; /* Smooth hover effect */
}

.maps-container iframe:hover {
  transform: scale(1.02); /* Slight zoom effect on hover */
}

/* Image Container */
.image-container img {
  border: none; /* Remove borders */
  box-shadow: none; /* Remove shadows */
  transition: transform 0.3s ease; /* Smooth hover effect */
}

.image-container img:hover {
  transform: scale(1.02); /* Slight zoom effect on hover */
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .maps-image-section h2 {
    font-size: 2rem;
  }

  .maps-image-section p.lead {
    font-size: 1rem;
  }

  .maps-container iframe {
    height: 150px; /* Reduced height for smaller screens */
  }
}