/*
 * Medina Core - Image Sizing & Object Fit
 * Fecha: 2026-01-03
 *
 * Este archivo contiene reglas CSS para garantizar que todas las imágenes
 * respeten el tamaño de sus contenedores y mantengan un aspect ratio consistente
 */

/* ===================================
   Banner Images (Home)
   =================================== */
.banner-slider-img img,
.banner-slider-img .images-area img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
    border-radius: 143px 0px 0px 0px;
}

/* ===================================
   What Did Area (Manifiesto)
   =================================== */
.what-did-left img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 5px;
}

/* ===================================
   Services Slider (Home)
   =================================== */
.services-slider-img img {
  width: 100%;
  height: 400px;
  object-fit: cover;
  border-radius: 5px;
}

/* ===================================
   Choose Cards (Valores/Metodología)
   =================================== */
.choose-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 5px;
  display: block;
}

/* ===================================
   Services Details Images
   =================================== */
.services-details-img {
  overflow: hidden;
  border-radius: 5px;
  height: 250px;
}

.services-details-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 5px;
  transition: transform 0.3s ease;
}

.services-details-img:hover img {
  transform: scale(1.05);
}

/* ===================================
   Brand Area (Logos)
   =================================== */
.brand-item img {
  width: 100%;
  height: 80px;
  object-fit: contain;
  display: block;
  padding: 10px;
}

/* ===================================
   Blog Sidebar Images
   =================================== */
.widget-popular-post .item .thumb {
  overflow: hidden;
  border-radius: 5px;
}

.widget-popular-post .item .thumb img,
.widget-popular-post .item .thumb .full-image {
  width: 100%;
  height: 100px;
  object-fit: cover;
}

/* ===================================
   FAQ Images
   =================================== */
.faq-img ul li img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 5px;
}

/* ===================================
   Testimonials Images
   =================================== */
.testimonials-img img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 50%;
}

/* ===================================
   Responsive Adjustments
   =================================== */

/* Tablets */
@media (max-width: 991px) {
  .services-slider-img img {
    height: 300px;
  }

  .choose-card img {
    height: 180px;
  }

  .services-details-img {
    height: 200px;
  }
}

/* Mobile */
@media (max-width: 767px) {
  .services-slider-img img {
    height: 250px;
  }

  .choose-card img {
    height: 200px;
  }

  .services-details-img {
    height: 180px;
  }

  .brand-item img {
    height: 60px;
  }
}

/* Small Mobile */
@media (max-width: 575px) {
  .services-slider-img img {
    height: 200px;
  }

  .choose-card img {
    height: 180px;
  }
}

/* ===================================
   General Image Fixes
   =================================== */

/* Asegurar que todas las imágenes sean responsive por defecto */
img {
  max-width: 100%;
  height: auto;
}

/* Prevenir overflow de imágenes */
.services-item img,
.blog-item img,
.portfolio-item img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}