/* Mobile layout fixes (needed once viewport is enabled) */

/* A) Hero carousel: phone sizing and crop position */
@media (max-width: 575.98px) {
  .header-carousel .owl-stage-outer,
  .header-carousel .owl-stage,
  .header-carousel .owl-item,
  .header-carousel .owl-carousel-item,
  .header-carousel .hero-slide {
   
    min-height: 183px !important;
    max-height: 340px !important;
    background: #ffffff !important;
  }

  .header-carousel .hero-picture,
  .header-carousel .hero-img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    background: #ffffff !important;
  }

  /* Key change: contain shows the whole image */
  .header-carousel .hero-img {
    object-fit: contain !important;
    object-position: center center !important;
  }
}




/* B) About images: your layout uses negative margin on desktop
   (example: style="margin-top: -150px;") which breaks on phones.
   This neutralizes the overlap on small screens.
*/
@media (max-width: 575.98px) {
  .about-img .col-6 {
    margin-top: 16px !important;
  }

  .about-img img {
    max-width: 100% !important;
    height: auto !important;
  }
  .blog-page{
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
}