/* Global Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Playfair Display', serif;
  list-style: none;
}

body {
  background-image: url(aofimage.jpg);
  background-attachment: fixed;
  background-size: cover;
  font-family: Arial, sans-serif;
  overflow: auto;
}

header {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
}

.text {
  display: flex;
  justify-content: center;
  margin: 12.5%;
  color: #ffffff;
  border-radius: 25px;
  font-size: 40px;
}

.pic2 {
  display: flex;
  justify-content: center;
  clip-path: circle();
  margin-top: 110px;
}

.gallpics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  align-items: center;
  max-width: 100%;
  padding: 0 20px; /* Added padding for a better look */
}


.gallpics img {
  max-width: 100%; /* Ensures images don't exceed their container width */
  height: auto;    /* Maintains aspect ratio */
  border-radius: 10px; /* Optional: rounded corners for a more modern look */
}
.contactbar {
  display: flex;
  justify-content: center;
}

.contactbar ul {
  display: flex;
  gap: 60px;
}

.contactbar li a {
  text-decoration: none;
  color: #ffffff;
  padding: 10px;
  font-size: 1rem;
}

/* Add heartbeat animation for the contact bar list items */
.contactbar li a:hover {
  animation: heartbeat 1s ease-in-out infinite;
  color: #ff0000; /* Change this color to your preferred hover color */
}

/* Define the heartbeat animation */
@keyframes heartbeat {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
}


.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #333;
  padding: 10px 20px;
}

.logo {
  color: white;
  font-size: 40px;
}

.nav-links {
  display: flex;
  gap: 20px;
}

.nav-links li a {
  color: white;
  text-decoration: none;
}

.burger {
  display: none;
  flex-direction: column;
  cursor: pointer;
}

.line {
  width: 25px;
  height: 3px;
  background-color: white;
  margin: 3px;
}

@media screen and (max-width: 768px) {
  .nav-links {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 70px;
    right: 0;
    background-color: #333;
    width: 100%;
    padding: 10px 0; /* Add padding to the top and bottom */
    align-items: center; /* Center-aligns text within the dropdown */
  }

  .nav-links.active {
    display: flex;
  }

  .nav-links li {
    width: 100%;
    text-align: center; /* Center-aligns each link */
    padding: 10px 0; /* Space each link vertically */
  }

  .burger {
    display: flex;
  }

  .gallpics {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .text {
    font-size: 20px;
  }
}
.pic2 {
    margin-top: 150px; /* Adjust as needed to push the logo below the navbar */
  }

footer {
  background-color: #222;
  color: #fff;
  text-align: center;
  padding: 20px 0;
  font-size: 16px;
}