/* ===============================
   IMI – BASE
   =============================== */

.navbar-brand {
  padding: 10px 15px;
}

.brand-logo {
  height: 45px;
  width: auto;
}

/* ===============================
   MOBILE ADJUSTMENTS
   =============================== */

@media (max-width: 768px) {
  .hero-tagline {
    font-size: 12px;
    letter-spacing: 1.5px;
  }
}

/* ===============================
   TEXT SEPARATORS
   =============================== */

#text-separator h2 {
  text-transform: none;
  font-size: 28px;
  letter-spacing: 1px;
  font-weight: 600;
}

/* ===============================
   ABOUT
   =============================== */

.aboutRow {
  display: flex;
  flex-wrap: wrap;
}

.aboutRow .aboutItem {
  display: flex;
}

/* ===============================
   NAVBAR
   =============================== */

.navbar {
  min-height: 70px;
  border: none;
  transition: all 0.3s ease;
}

.navbar-nav > li.imi-hide {
  display: none !important;
}

/* ===============================
   SECTIONS DISABLED
   =============================== */

#team,
#services,
#pricing,
#text-separator-clients,
#text-separator-timers,
#text-separator-testimonials,
#blog {
  display: none;
}

/* ===============================
   PORTFOLIO
   =============================== */

#portfolio {
  background-color: #f2f2f2 !important;
}

#portfolio .featureWrapper {
  background: #fff;
  border: 1px solid #e0e0e0;
  margin: 10px;
}

#portfolio .feature-inner {
  position: relative;
}

#portfolio .galleryImage {
  width: 100%;
  height: auto;
  display: block;
}

#portfolio .caption-heading {
  padding: 15px;
  background: #fff;
}

#portfolio .caption-heading h5 {
  margin-top: 0;
  font-weight: 600;
}

#portfolio .caption-heading p {
  font-size: 13px;
  color: #555;
}

#portfolio::before,
#portfolio::after {
  display: none !important;
}

/* ===============================
   PRELOADER
   =============================== */

.ip-header {
  position: fixed !important;
  inset: 0;
  width: 100%;
  height: 100vh;
  background: #000;
  z-index: 99999;

  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.ip-header .ip-logo img.preloaderLogo {
  max-width: 250px;
  display: block;
}

.ip-header .ip-loader {
  margin-top: 30px;
}

/* ===============================
   INTRO / HERO
   =============================== */

html, body {
  height: 100%;
}

#intro {
  position: relative;
  overflow: hidden;
}

#intro .intro-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

#intro canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
}

#intro .black-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
}

#intro .container {
  position: relative;
  z-index: 3;
}

/* ===============================
   OWL CAROUSEL v2 – MODAL FIX
   =============================== */

#projectModal .owl-carousel {
  width: 100%;
}

#projectModal .owl-stage-outer {
  overflow: hidden;
}

#owl-blog-single .owl-wrapper-outer {
  overflow: hidden; /* evita que se vean 2 imágenes a la vez */
}

#projectModal .close {
  font-size: 36px; /* antes tal vez era 16px */
  color: #5a5a5a;
  opacity: 1;      /* que no se vea transparente */
}

/* ===============================
   OWL FEATURED – ACOMODAR ITEMS
   =============================== */
#owl-featured .item {
  width: 100% !important;       /* Cada item ocupa el 100% del espacio disponible en el carousel */
  box-sizing: border-box;       /* Padding/margin no rompe el ancho */
}

#owl-featured .owl-wrapper-outer {
  overflow: hidden;             /* Oculta los items que se mueven fuera del área visible */
}

/* ===============================
   OWL FEATURED – Quitar fondo oval de botones
   =============================== */
#owl-featured .owl-prev,
#owl-featured .owl-next {
  background: none !important;  /* elimina cualquier fondo */
  padding: 0 !important;        /* quita el padding que crea el óvalo */
  border-radius: 0 !important;  /* elimina bordes redondeados */
  width: auto;
  height: auto;
}

#owl-featured .owl-prev i,
#owl-featured .owl-next i {
  line-height: 1; /* centra el icono verticalmente */
}

/* ===============================
   OWL BLOG SINGLE – Quitar fondo oval de botones
   =============================== */
#owl-blog-single .owl-prev,
#owl-blog-single .owl-next {
  background: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  width: auto;
  height: auto;
}

#owl-blog-single .owl-prev i,
#owl-blog-single .owl-next i {
  line-height: 1;
}

/* ===============================
   OWL CAROUSEL – Quitar puntitos de paginación
   =============================== */
#owl-featured .owl-pagination,
#owl-blog-single .owl-pagination {
  display: none !important; /* oculta los puntitos de avance */
}


/* ===============================
   MODAL – Imágenes responsive del carousel
   =============================== */
#owl-blog-single .item img {
  width: 100%;           /* ocupa todo el ancho del contenedor */
  height: auto;          /* mantiene proporción */
  max-height: 70vh;      /* no crece más que el 70% de la altura de la ventana */
  object-fit: contain;   /* asegura que la imagen se vea completa sin recortarse */
  display: block;
  margin: 0 auto;        /* centra la imagen horizontalmente */
}

/* =========================================
   Contact Form - ajustes adicionales
   ========================================= */
#contactform input,
#contactform textarea {
  width: 100%;
  padding: 10px;
  margin-bottom: 15px;
  box-sizing: border-box;
}

#contactform textarea {
  min-height: 120px;
  resize: vertical;
}

#contactform .submit {
  width: 100%;
  padding: 12px;
}

@media (max-width: 767px) {
  .listwrapper {
    margin-bottom: 15px;
  }
}

/* Contact Form */
#contactform input,
#contactform textarea {
  width: 100%;
  padding: 10px;
  margin-bottom: 15px;
  box-sizing: border-box;
}

#contactform textarea {
  min-height: 120px;
  resize: vertical;
}

#contactform .submit {
  width: 100%;
  padding: 12px;
}

@media (max-width: 767px) {
  .listwrapper {
    margin-bottom: 15px;
  }
}

/* Pop-up de Gracias */
.popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.popup-content {
  background: #fff;
  padding: 30px 20px;
  max-width: 400px;
  width: 90%;
  text-align: center;
  border-radius: 8px;
  position: relative;
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.popup-content h3 {
  margin-top: 0;
  color: #333;
}

.popup-close {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 22px;
  cursor: pointer;
}

/* =========================
   Contacto
   ========================= */
.contact-info {
  margin-top: 40px;
}

.contact-box {
  padding: 30px 20px;
}

.contact-box i {
  margin-bottom: 15px;
  color: #111;
}

.contact-box h4 {
  margin-bottom: 15px;
  font-weight: 600;
}

.contact-box p {
  margin-bottom: 10px;
}