/* Logo Responsive Fixes - Higher Specificity */
.mainHeader .logo {
  position: absolute !important;
  right: 0;
  left: 0;
  top: 0;
  bottom: inherit;
  text-align: center;
  z-index: 0;
}

.mainHeader .logo img {
  max-width: 100% !important;
  height: auto !important;
  width: auto !important;
  transition: all 0.3s ease;
  object-fit: contain !important;
}

/* Desktop and Large Screens */
@media (min-width: 1367px) {
  .mainHeader .logo img {
    height: 120px !important;
    width: auto !important;
  }
}

/* Medium Desktop */
@media (max-width: 1366px) {
  .mainHeader .logo img {
    height: 100px !important;
    width: auto !important;
  }
}

/* Small Desktop / Large Tablet */
@media (max-width: 1199px) {
  .mainHeader .logo img {
    height: 80px !important;
    width: auto !important;
  }
}

/* Tablet */
@media (max-width: 991px) {
  .mainHeader .logo {
    position: relative !important;
    top: inherit !important;
    left: inherit !important;
    bottom: inherit !important;
    right: inherit !important;
    text-align: left !important;
  }
  
  .mainHeader .logo img {
    height: 70px !important;
    width: auto !important;
  }
}

/* Large Mobile */
@media (max-width: 767px) {
  .mainHeader .logo img {
    height: 60px !important;
    width: auto !important;
  }
}

/* Medium Mobile */
@media (max-width: 575px) {
  .mainHeader .logo img {
    height: 50px !important;
    width: auto !important;
  }
}

/* Small Mobile */
@media (max-width: 480px) {
  .mainHeader .logo img {
    height: 45px !important;
    width: auto !important;
  }
}

/* Extra Small Mobile */
@media (max-width: 380px) {
  .mainHeader .logo img {
    height: 40px !important;
    width: auto !important;
  }
}

/* Ensure logo doesn't overflow on very small screens */
@media (max-width: 320px) {
  .mainHeader .logo img {
    height: 35px !important;
    width: auto !important;
    max-width: 150px !important;
  }
}