/* Fix navbar & top-bar padding below 576px */
@media (max-width: 575px) {
  .container,
  .navbar .container,
  .top-bar {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* Keep search bar compact on very small screens */
  .search-bar {
    font-size: 13px;
    padding: 6px;
  }

  .srch_btn {
    font-size: 13px;
    padding: 6px 10px;
  }
}

/*Nav bar*/
/* Remove extra side padding of container in navbar for mobile/tablet */
@media (max-width: 767.98px) {
    /* Remove container padding issues */
    .navbar .container {
        padding-left: 0px !important;
        padding-right: 0px !important;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    /* Adjust search bar for small screens */
    .navbar .search-bar {
        width: 160px; /* slightly smaller */
    }

    /* Search button styling */
    .navbar .srch_btn {
        font-size: 14px;
        padding: 5px 10px;
    }

    /* Reduce logo size for balance */
    .navbar .logo-img {
        height: 40px;  /* was 50px */
    }
}


/* Extra small screens (≤575.98px) */
@media (max-width: 575.98px) {
    .navbar .container {
        flex-direction: row;  /* stay in one line */
        justify-content: space-between;
        align-items: center;
        padding-left: 25px !important;
        padding-right: 5px !important;
    }

    .navbar .logo-img {
        height: 32px;   /* shrink logo */
    }

    .navbar .search-bar {
        width: 120px;   /* smaller search input */
        font-size: 13px;
    }

    .navbar .srch_btn {
        font-size: 12px;
        padding: 4px 8px;
        margin-left: 3px; /* small gap from search box */
    }
}

/* Prevent collision on very small screens */
@media (max-width: 515px) {
  .top-bar {
    flex-wrap: wrap;
    justify-content: center; /* center items instead of squishing */
    gap: 8px;
  }

  .contacts {
    margin-left: 0;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
  }

  .social-icons {
    margin-right: 0;
    justify-content: center;
  }
}

/* Hero Section/Banner */
/* Tablets */
@media (max-width: 992px) {
  .banner-wrapper {
    height: 80dvh;
  }
}

/* Normal Phones */
@media (max-width: 768px) {
  .banner-wrapper {
    height: 65dvh;
  }
}

/* iPhone SE & Small Phones */
@media (max-width: 480px) {
  .banner-wrapper {
    height: 55dvh;
  }
}