/* Existing styles */
@media (min-width: 320px) and (max-width: 425px) {
    .product-section h1 {
        font-size: 1.4rem !important;
    }
    .product-section {
        height: 50vh !important;
    }
    .navbar-brand img {
        max-width: 100px !important;
        height: auto;
    }
}

/* Responsive background colors for different device sizes */
/* Extra small devices: 320px to 425px */
@media (min-width: 320px) and (max-width: 425px) {
  body {
    background-color: lightblue;
  }
}

/* Small devices: 426px to 600px */
@media (min-width: 426px) and (max-width: 600px) {
  body {
    background-color: lightgreen;
  }
}

/* Medium devices: 601px to 768px */
@media (min-width: 601px) and (max-width: 768px) {
  body {
    background-color: lightyellow;
  }
}

/* Large devices: 769px to 1024px */
@media (min-width: 769px) and (max-width: 1024px) {
  body {
    background-color: lightcoral;
  }
  .floating-orange {
    display: none !important;
  }
  .banner_content {
    font-size: 3rem;
  }
  .logo {
    max-width: 150px !important;
    height: auto;
    transition: all 0.3s ease;
    display: block;
  }
      .position-absolute {
        /* max-width: 150px; */
        display: none !important;
    }

}

/* Extra large devices: 1025px to 1200px */
@media (min-width: 1025px) and (max-width: 1200px) {
  body {
    background-color: lightpink;
  }
  .floating-orange {
    position: absolute;
    width: 143px;
    z-index: 9999;
    animation: float 6s ease-in-out infinite;
  }
}

/* Ultra wide screens: 1201px and above */
@media (min-width: 1201px) {
  body {
    background-color: white;
  }
}