/* Make the entire page take at least full height */
      html, body {
        height: 100%;
        margin: 0;
      }

      /* Ensure the content stretches to take available space */
      .main-container {
        min-height: calc(100vh - 120px); /* Subtract height of the footer and button */
        padding-bottom: 100px; /* Add space for the button */
      }

      /* Animation for logo */
      .logo-container {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        padding-bottom: 20px;
        margin-bottom: 20px;
        opacity: 0;
        animation: fadeInLogo 2s forwards;
      }

      @keyframes fadeInLogo {
        0% {
          opacity: 0;
          transform: translateY(-50px);
        }
        100% {
          opacity: 1;
          transform: translateY(0);
        }
      }

      /* Animation for navbar items */
      .nav-item {
        opacity: 0;
        transform: translateX(-20px);
        animation: fadeInNavItem 0.8s ease-out forwards;
        animation-delay: 0.2s;
      }

      @keyframes fadeInNavItem {
        0% {
          opacity: 0;
          transform: translateX(-20px);
        }
        100% {
          opacity: 1;
          transform: translateX(0);
        }
      }

      .nav-item:nth-child(1) {
        animation-delay: 0.2s;
      }
      .nav-item:nth-child(2) {
        animation-delay: 0.4s;
      }
      .nav-item:nth-child(3) {
        animation-delay: 0.6s;
      }

      /* Animation for content */
      .content-section {
        opacity: 0;
        animation: fadeInContent 1.5s ease-out forwards;
      }

      @keyframes fadeInContent {
        0% {
          opacity: 0;
          transform: translateY(20px);
        }
        100% {
          opacity: 1;
          transform: translateY(0);
        }
      }

      /* Floating "Get in Touch" Button with Chat Icon */
      .fixed-btn {
        position: fixed;
        right: 20px; /* Distance from the right edge of the page */
        bottom: 20px; /* Distance from the bottom edge of the page */
        z-index: 1000; /* Ensure it's on top of other elements */
        padding: 16px 24px; /* Increased padding for a larger button */
        font-size: 24px; /* Font size for icon */
        border-radius: 30px; /* More rounded edges */
        background-color: #007bff; /* Button color */
        color: white; /* Text color */
        text-align: center; /* Center text */
        display: inline-block; /* Block for clickable area */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Subtle shadow */
        transition: all 0.3s ease; /* Smooth transition for hover effect */
      }

      /* Hover effect to add a shadow when the button is hovered */
      .fixed-btn:hover {
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
      }

      /* Adjust icon size to fit well inside the button */
      .fixed-btn i {
        font-size: 24px; /* Icon size */
      }

      /* Spacing for footer */
      footer {
        margin-top: 50px;
      }

    .social-icons a {
      color: white;
      margin: 0 10px;
      font-size: 1.5rem;
      transition: color 0.3s;
    }

    .social-icons a:hover {
      color: #17a2b8;
    }

    .map-container {
      width: 100%;
      margin: 0;
      border: 2px solid #ddd;
      border-radius: 8px;
      overflow: hidden;
    }

    .content-section p {
      margin-bottom: 15px;
      line-height: 1.8;
      color: #555;
      text-align: justify;
    }