/*
Theme Name: MasterLife Child
Theme URI: https://masterlife.jwsuperthemes.com
Template: masterlife
Author: the JWSThemes team
Author URI: https://themeforest.net/user/jwsthemes/portfolio
Description: MasterLife is a modern WordPress theme designed and built specifically for Education LMS and Online Training. It offers a comprehensive suite of tools to seamlessly set up your learning management system. With five distinct and visually appealing demos, MasterLife makes it easy to create professional websites for online education, instructors, academies, universities, and more. The intuitive demo importer simplifies the process, providing ready-made content to help you get started effortlessly. Empower your students and transform the learning experience with MasterLife.
Tags: one-column,flexible-header,accessibility-ready,custom-colors,custom-menu,custom-logo,editor-style,featured-images,footer-widgets,rtl-language-support,sticky-post,threaded-comments,translation-ready
Version: 1.1.5
Updated: 2024-11-12 09:32:50
*/
:root {
  --main: #030f40;
  --secondary: #FFB700;
  --third: #fffaf5;
  --light: #ffffff;
  --dark: #000000;
  --heading: #0e1316;
  --body: #667085;
  --body2: #f4f7ff;
  --body3: #ebebeb;
  --body4: #f8f8f8;

  --bodybg: #ffffff;
  --btn-bgcolor: #09205c;
  --btn-color: #ffffff;
  --btn-bgcolor2: transparent;
  --btn-color2: #09205c;
  --font-size-sm: 14px;
  --line-height-sm: 22.5px;
  --font-size-md: 18px;
  --line-height-md: 25.2px;
  --input-background: #ffffff;
  --input-background2: #ffffff;
  --background-item: #fef8e6;
  --background-body: #ffffff;
  --border-color: #626262;
  --border-color2: #eff1f2;
  --border-color3: #b7b7b7;
  --full-fd: 70px;
  --link: #232323;
  --font-size-md: 18px;
  --line-height-md: 25px;
  --inscolor: var(--bodybg);
  --jws-sticky-header-height: 0px;
}
@media (max-width: 767px) {
  :root {
    --font-size-sm: 12px;
    --line-height-sm: 16px;
  }
}
.btn-theme {
  background: var(--main);
  color: #ffffff;
  height: 50px;
  padding: 0 40px;
  text-align: center;
  line-height: 50px;
}

button.btn-theme {
  border: 0;
}


/* Codigo CSS Personalizado */
/* ====== CONTENEDOR (este widget/section) ====== */
selector .elementor-container{
  display: flex;          /* Asegura layout flex */
  flex-wrap: nowrap;      /* Importante para que las columnas no bajen de línea */
  gap: var(--gap, 16px);  /* opcional, separación entre columnas */
}

/* ====== COLUMNA (marco que se ensancha) ====== */
selector .elementor-column{
  /* Tamaño base de cada columna (ajusta a tu diseño) */
  flex: 0 0 320px;          /* basis inicial */
  height: 360px;            /* altura fija del marco (puedes usar aspect-ratio) */
  overflow: hidden;         /* recorta lo que sobresale */
  transition: 
    flex-basis .5s linear,
    width .5s linear,
    opacity .3s ease;
  position: relative;
}

/* Alternativa moderna si prefieres mantener proporción:
selector .elementor-column{ aspect-ratio: 16/9; height: auto; } 
*/

/* ====== IMAGEN DENTRO DE LA COLUMNA ====== */
/* Importante: la imagen NO debe atarse al ancho de la columna */
selector .elementor-column .elementor-widget-image img,
selector .elementor-column img{
  display: block;
  height: 100%;       /* la imagen llena la altura del marco */
  width: auto;        /* el ancho es el natural -> no se deforma */
  max-width: none;    /* permite que la imagen sea más ancha que el marco */
  /* Centrado horizontal “real” sin object-fit */
  margin-left: 50%;
  transform: translateX(-50%);
  transition: transform .4s ease; /* por si luego quieres sutil movimiento */
}

/* ====== EFECTO AL HOVER: la columna se ensancha ====== */
selector .elementor-column:hover{
  /* Le damos más espacio horizontal */
  flex-basis: 520px;   /* ajusta 480–640px a gusto */
}

/* (Opcional) Un pelín de desplazamiento para efecto premium */
selector .elementor-column:hover .elementor-widget-image img,
selector .elementor-column:hover img{
  /* por ejemplo, muévete un 3% para “respirar” */
  transform: translateX(-50%) translateX(-3%);
}

/* ====== MEJORAS DE UX EN MÓVIL ====== */
@media (max-width: 767px){
  selector .elementor-container{
    flex-wrap: wrap;        /* en móvil que puedan apilarse */
  }
  selector .elementor-column{
    flex: 1 1 100%;
    height: 260px;          /* reduce altura en móvil si quieres */
  }
  selector .elementor-column:hover{
    flex-basis: 100%;       /* el hover no cambia mucho en táctil */
  }
}

/* Hacer desaparecer el breadcrum */
.single-sfwd-courses .post-breadcrumb {
  display: none !important;
}
.single-blog .post-breadcrumb {
  display: none !important;
}

.wpforms-submit-container {
	font-family: "Plus Jakarta Sans" !important;
	font-weight: lighter !important;
}