#map {
    width: 100%; /* Set the width to 100% for responsiveness */
    height: 400px; /* Set a fixed height or use another unit, such as percentage, if desired */
}

/* Media query for smaller screens (adjust as needed) */
@media (max-width: 768px) {
    #map {
        height: 300px; /* Adjust the height for smaller screens */
    }
}

.responsive-image {
    max-width: 100%; /* The image will not exceed its original size */
    height: auto; /* The image's height will adjust proportionally */
    aspect-ratio: attr(width) / attr(height);
    object-fit: contain;
    display: block;
}

/* Fix for Safari: force aspect-ratio and override height if set by Bootstrap or inline */
img.img-fluid:not(.navbar-logo), 
img.responsive-image:not(.navbar-logo) {
    max-width: 100%;
    height: auto;
    width: auto; /* Let the image maintain its aspect ratio */
    display: block;
    margin: 0 auto; /* Center the image if it's not full width */
}

/* Optional: If you want to enforce a square aspect for icons */
img.square-icon {
    aspect-ratio: 1 / 1;
    object-fit: contain;
    width: 90px !important;
    height: 90px !important;
}

/* Target Safari specifically */
@media not all and (min-resolution:.001dpcm) {
  @supports (-webkit-appearance:none) {
    img {
      max-width: 100%;
      height: auto;
      width: auto; /* Let the image maintain its aspect ratio */
    }
    .carousel-item img, .about-img img, .project-item img {
      height: auto !important;
      width: 100% !important;
      aspect-ratio: auto !important;
      object-fit: contain !important;
      max-width: 100% !important;
      max-height: 100% !important;
      min-height: 0 !important;
    }
  }
}

/* PestKit overrides for all browsers */
.carousel-item img, .about-img img, .project-item img {
  max-width: 100%;
  height: auto;
  width: auto; /* Let the image maintain its aspect ratio */
  display: block;
  margin: 0 auto; /* Center the image if it's not full width */
  object-fit: contain;
  object-position: center;
}


/*custom*/
.nav-scroll {
    transition: top 0.3s;
}

.nav-hidden {
    top: -50px; /* Adjust the value as needed */
}

.navbar.fixed-top {
    transition: top 0.3s;
}

.navbar.fixed-top.nav-hidden {
    top: -50px; /* Adjust the value as needed */
}

.main-content {
    margin-top: 80px; /* Initial margin-top value */
    transition: margin-top 0.3s; /* Add a smooth transition effect */
}
.main-content.nav-hidden {
    margin-top: 20px; /* Adjusted margin-top value when hidden */
}

.navbar-logo {
    max-width: 40px; /* Adjust the value as needed */
    width: 40px; /* Fixed width */
    height: auto; /* Maintain aspect ratio */
    object-fit: contain; /* Ensure proper fitting */
}
.d-none {
    display: none !important;
}

.s-logo  {
    max-width: 40px !important;
    height: auto !important;
}