/* Main container holding both the map and contact info */
.contact-map-container {
  display: flex;
  justify-content: space-between; /* Distribute space between the items */
  flex-wrap: wrap; /* Ensures responsiveness on smaller screens */
  gap: 0px; /* Add some space between the elements */
  background:#412B6C;
}

/* Map section styling */
.map-section {
  flex: 1; /* Allow the map section to grow */
  max-width: 50%; /* Ensure the section doesn't exceed 50% width */
  box-sizing: border-box;
  display: flex;
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
}

.map-section iframe {
  width: 100%;
  height: 410px; /* Set the iframe height to 450px */
  /* border-radius: 0 50px 0 0; */
}

/* Contact info styling */
.contact-info {
  flex: 1; /* Allow the contact info section to grow */
  max-width: 50%; /* Ensure the section doesn't exceed 50% width */
  padding: 20px; /* Add some padding */
  font-family: "Quicksand", sans-serif; /* Set the font family */
  background-color: #292734; 
  /* border-radius: 50px 0 0 0; */
}

.contact-info h1 {
  font-family: "Raleway", sans-serif;
  color: #ffffff;
  font-size: 32px;
}

.contact-info h2 {
  font-family: "Raleway", sans-serif;
  color: #ffffff;
  font-size: 25px;
}

@media (max-width: 450px) {
  .contact-info h1 {
    font-size: 20px;
  }
  
  .contact-info h2 {
    font-size: 13px;
  }
}

.contact-info p {
  margin: 5px 0;
  color: #ffffff; /* Text color */
}

.info-item {
  display: flex;
  align-items: center;
}

.info-item img {
  margin-right: 10px; /* Adjust the spacing as needed */
  width: 24px; /* Set the desired width */
  height: 24px; /* Set the desired height */
  object-fit: cover; /* Ensures the image maintains its aspect ratio */
}

/* Responsive adjustment */
@media (max-width: 993px) {
  .contact-map-container{
    margin-top: -20px; /* Remove top margin */
    padding-top: 20px; /* Remove top padding */
  }

}

@media (max-width: 768px) {
  .map-section, 
  .contact-info {
    flex: 1 1 100%; /* Make each section take full width */
    max-width: 100%; /* Ensure the section takes up full width */
    margin-top: 0; /* Remove top margin */
    padding-top: 0; /* Remove top padding */
    border-radius:0;
  }
  
  .contact-map-container {
    gap: 0; /* Remove gap between elements */
  }

  .map-section iframe {
    height: 300px; /* Reduce the height for smaller screens */
    border-radius: 20px 20px 0 0;
  }

  .contact-info h1{
    text-align: center;
  }
}

@media (max-width: 480px) {
  .map-section iframe {
    height: 200px; /* Further reduce the height for very small screens */
  }
}

.info-item a {
  color: white; /* Change to your desired color */
  text-decoration: none; /* Remove underline if desired */
}

.info-item p {
  font-size: 16px;
}

@media (max-width: 768px) {
  .info-item p {
    font-size: 10px;
  }
}

@media (max-width: 295px) {
  .info-item p {
    font-size: 6px;
  }
}

.info-item a:hover {
  color: grey; /* Optional: Change color on hover */
}

/* Copyright and animation */
@keyframes slideUp {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* .attribution {
  background-color: #412B6C;
  text-align: end;
  padding-right: 5px;
}

.attribution a {
  color: white; 
  text-decoration: none;  
  font-family: "Quicksand", sans-serif;
}

.attribution a:hover {
  text-decoration: underline;  
} */


.copyright {
  background: #412B6C;
  text-align: center;
  padding: 1px;
  font-family: "Quicksand", sans-serif;
  position: relative;  /* Ensure the container is a positioning context */
  height: 50px;  /* Adjust height as needed */
  padding: 1px;
}

.copyright-text {
  color: white;
  position: absolute;  /* Position within the container */
  width: 100%;
  top: 0%;  /* Move to vertical center */
  left: 0;
  transform: translateY(20px);
  opacity: 0;
  transition: transform 0.5s ease-out, opacity 0.5s ease-out;
  font-size: 16px;
}

.copyright-text.animate {
  animation: slideUp 0.5s forwards;
}

@media (max-width: 450px) {
  .copyright-text {
    font-size: 10px;
  }
}

/* @media (max-width: 420px) {
  .copyright {
    padding-bottom: 15px;
  }
} */

.attribution-icon {
  position: absolute;
  bottom: 0;
  right: 0;
  font-size: 4px;
  text-decoration: none;
  color: white;
  padding-top: 10px;
  padding-right: 10px;
  text-align: right;
}

.attribution-icon a {
  color: grey; /* Change to your desired color */
  text-decoration: none; /* Remove underline if desired */
}