/*
 Theme Name: Divi Child
 Theme URI: https://www.elegantthemes.com/gallery/divi/
 Description: Divi Child Theme
 Author: Elegant Themes
 Author URI: https://www.elegantthemes.com
 Template: Divi
 Version: 1.0.0
*/
 
/* =Theme customization starts here
------------------------------------------------------- */

/*--- Typography ---*/

h1,h2,h3,h4,h5,h6,p{
font-family: "neue-haas-grotesk-display", sans-serif;
}

p{
font-family: "neue-haas-grotesk-display", sans-serif;
line-height: 1.2;
}


/*==== Header Styles =====*/

.et_pb_menu__menu {
    font-family: "neue-haas-grotesk-display", sans-serif;
}

/* 1) Remove any legacy background on row and menu */
.et-l--header .et_pb_row,
.et-l--header .et_pb_menu,
.et-l--header .et_pb_menu .et_pb_menu__wrap,
.et-l--header .et_pb_menu .et_pb_menu__menu {
  background: transparent !important;
  box-shadow: none !important;
}

/* 2) Remove the pseudo-overlay from the header section */
.et-l--header .et_pb_section_0_tb_header:before {
  background: transparent !important;
  display: none !important;
}

/* 3) Apply the “glass/blur” to the header SECTION (Theme Builder) */
.et-l--header .et_pb_section_0_tb_header,
.et-l--header .et_pb_section--fixed { /* por si Divi le agrega esta clase al fijarlo */
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 9999;
  background: rgba(255, 255, 255, 0.80) !important;  /* clave: algo de alpha */
  -webkit-backdrop-filter: saturate(180%) blur(5px);
  backdrop-filter: saturate(180%) blur(5px);
  box-shadow: none !important;
  will-change: backdrop-filter, background;
}

/* 4) Avoid space above: content should rise below the header */
.et_fixed_nav #page-container,
.et_non_fixed_nav #page-container {
  padding-top: 0 !important;
}

/* 3) Improve readability of menu items (adjust colors to your palette) */
#main-header .nav li a,
#main-header .et_mobile_menu li a {
  color: #0a0a0a !important;
}

/* 4) When Divi adds the fixed scrolled class, slightly increase opacity */
#main-header.et-fixed-header {
  background: rgba(255, 255, 255, 0.80) !important;
}

/* 5) First section flush to the very top (your hero/slider) */
.et_pb_section:first-of-type {
  margin-top: 0 !important;
  padding-top: 0 !important;
  z-index: 1;
}

/* 6) Keep header above everything */
#main-header, .et-l--header { z-index: 9999 !important; }

/* 7) WP Admin bar offset when logged in */
body.logged-in.admin-bar #main-header { top: 32px; }
@media (max-width: 782px) {
  body.logged-in.admin-bar #main-header { top: 46px; }
}

/* 8) Optional: make the mobile menu background also blurred/translucent */
.et_mobile_menu {
  background: rgba(255, 255, 255, 0.80) !important;
  -webkit-backdrop-filter: saturate(180%) blur(5px);
  backdrop-filter: saturate(180%) blur(5px);
}

/*=== Footer Styles ===*/

a.footer-text {
    color: white;
}

a.footer-text2 {
    color: white;
    text-decoration: underline;
}

.et_pb_text_inner {
    font-family: "neue-haas-grotesk-display", sans-serif;
}

i.fab.fa-facebook {
    font-size: 25px;
    margin-right: 10px;
}

i.fab.fa-instagram {
	font-size: 25px;
}

/*--- Dynamic Text ---*/
/* 0) The slider must be a positioning context */
.hero-slider { position: relative; }

/* 1) Badge placement: stick to the left edge of the slider */
.hero-slider .hero-badge{
  position: absolute;
  left: 0;                               /* stick to left edge */
  top: clamp(120px, 24vh, 260px);        /* adjust as needed */
  transform: none;                       /* no -50% translate */
  z-index: 5;
  pointer-events: none;
}

/* 2) Visuals + tokens
      NOTE: --padL will be set by JS to align the "B" with the logo */
.hero-badge{
  --bg: #0f2234;
  --accent: #e86a3a;
  --lh: 1.30;                            /* extra line-height to avoid clipping */

  /* base paddings */
  --padY: clamp(14px, 2.2vw, 24px);
  --padX: clamp(18px, 2.8vw, 32px);
  --padL: var(--padX);                   /* JS overrides this to align to logo */

  background: var(--bg);
  color: #fff;
  display: inline-flex;
  align-items: center;
  /* left padding controlled via --padL so text aligns with logo */
  padding: var(--padY) var(--padX) var(--padY) var(--padL);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  font-weight: 800;
  font-size: clamp(26px, 4vw, 58px);
}

/* 2.1) Apply brand font to the whole badge */
.hero-badge,
.hero-badge .fixed,
.hero-badge .words > span{
  font-family: "neue-haas-grotesk-display", sans-serif; /* brand font */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.hero-badge .fixed { color: #fff; }

/* 3) Smooth vertical ticker (JS-driven; no CSS keyframes here) */
.hero-badge .words-wrap{
  display: inline-block;
  height: calc(1em * var(--lh));         /* viewport = exactly one line */
  overflow: hidden;
  vertical-align: bottom;
}
.hero-badge .words{
  display: flex;
  flex-direction: column;
  will-change: transform;
  transform: translate3d(0,0,0);
  backface-visibility: hidden;
  transition: none;                      /* JS sets transition timing/curve */
}
/* Safety: kill any old animations/fades */
.hero-badge .words,
.hero-badge .words > span{
  animation: none !important;
  opacity: 1 !important;
}
.hero-badge .words > span{
  height: calc(1em * var(--lh));
  line-height: calc(1em * var(--lh));
  white-space: nowrap;
  color: var(--accent);
}

/* 4) Mount states (hide until inserted into the slider) */
.hero-badge.is-hidden { opacity: 0; }
.hero-badge.is-mounted { opacity: 1; transition: opacity .2s ease; }

/* 5) Responsive tweaks */
@media (max-width: 980px){
  .hero-slider .hero-badge{ top: 27vh; }
}
@media (max-width: 767px){
  .hero-slider .hero-badge{
    top: 27vh;
    /* keep same padding system; JS will keep aligning via --padL */
    font-size: clamp(20px, 6vw, 58px);
  }
}

/* 6) Reduce motion */
@media (prefers-reduced-motion: reduce){
  .hero-badge .words{ transition: none !important; }
}

/* ---- Divi-only button font ---- */
:root {
  /* Use exact Adobe Fonts family name */
  --btn-font: "neue-haas-grotesk-display", sans-serif;
}

/* Core Divi button selectors */
.et_pb_button,
.et_pb_module .et_pb_button,
.et_pb_button_module_wrapper .et_pb_button,
.et_pb_promo .et_pb_button,
.et_pb_more_button,
.et_pb_contact_submit,
.et_pb_newsletter_button,
.et_pb_login .et_pb_button,
.et_pb_promo_button,
.et_pb_pricing_table_button,
.et_pb_search .et_pb_searchsubmit {
  font-family: var(--btn-font) !important; /* override inline styles */
  font-weight: 450; /* adjust to weights available in your Adobe kit */
  font-style: normal;
  /* text-transform: none;  Uncomment if you don't want uppercase */
}

/* Ensure Divi button pseudo-elements inherit the font */
.et_pb_button:before,
.et_pb_button:after {
  font-family: inherit !important;
}

a.primary-button {
    background-color: #EB6A43;
    color: white;
    padding: 12px 40px;
    border-radius: 2px;
	transition: all 300ms ease 0ms;
    cursor: pointer;
}

a.primary-button:hover {
    background-color: #751B00;
    color: white;
}

a.secondary-button {
    background-color: #0F1A2C;
    color: white;
    padding: 12px 40px;
    border-radius: 2px;
	transition: all 300ms ease 0ms;
	cursor: pointer;
}

a.secondary-button:hover {
    background-color: #E72A00;
    color: white;
}

/*--- Highlighted Projects ---*/

.image-zoom-inner {
  overflow: hidden;
  display: block;
  position: relative;
}

.image-zoom-inner img {
  transition: transform 0.6s ease;
  will-change: transform;
}

.image-zoom-inner:hover img {
  transform: scale(0.3); 
}

/*--- What We Do Homepage ---*/

.card-link {
  cursor: pointer;
  display: block;
  text-decoration: none;
}

.card-link .card-image {
  overflow: hidden;
  display: block;
}

.card-link .card-image img {
  width: 100%;
  display: block;
  transition: transform 0.6s ease;
  will-change: transform;
}

.card-link .card-text {
  color: #ffffff;
  transition: color 0.3s ease;
}

.card-link:hover .card-image img {
  transform: scale(1.1);
}

.card-link:hover .card-text {
  color: #EB6A43 !important;
}

.card-link:hover .card-text2 {
  color: white;
}


/*===== Our Team Page ======*/
/* === 3-COLUMN GRID === */
.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 40px;
}

.team-grid > .team-card:only-child {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Responsive: 2 columns on tablets */
@media (max-width: 991px) {
  .team-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Responsive: 1 column on mobile */
@media (max-width: 640px) {
  .team-grid {
    grid-template-columns: 1fr;
  }
}

/* === MEMBER CARD === */
.team-card {
  background: #fff;
}

.team-photo img {
  width: 100%;
  height: auto;
  border-radius: 2px;
  display: block;
}

.team-name {
    margin: 16px 0 0px 0px;
    font-size: 32px;
    font-weight: 700;
    color: #EB6A43;
}

.team-role {
    color: #0F1A2C;
    margin: -6px 0px 0.6rem;
    font-size: 20px;
}

/* === VIEW MORE BUTTON === */
.view-more {
    cursor: pointer;
    color: #0F1A2C;
    border: none;
    font-weight: 450;
    margin-top: 8px;
    display: inline-block;
    font-size: 16px;
    background-color: transparent;
    letter-spacing: 3.04px;
    text-transform: uppercase;
}

.view-more:hover {
    color: #EB6A43;
}

/* === BUTTON CONTAINER + BIO === */
.bio-wrap {
  display: inline-block;
  width: 100%;
}

/* === BIO HIDDEN/ACTIVE === */
/* Closed state: does not occupy height */
.team-bio {
  overflow: hidden;
  height: 0;
  opacity: 0;
  margin-top: 0;           /* it is animated when opening */
  padding-top: 0;          /* it is animated when opening */
  padding-bottom: 0;       /* it is animated when opening */
  text-align: left;
  transition:
    height .28s ease,
    opacity .18s ease,
    margin-top .28s ease,
    padding-top .28s ease,
    padding-bottom .28s ease;
  will-change: height;
}

/* Open state: the final height is set by JS (inline) */
.bio-wrap.open .team-bio {
  opacity: 1;
  margin-top: 12px;
  padding-top: 12px;
  padding-bottom: 12px;
	font-size: 16px;
    color: #3E3E3E;
}

/* Hover only on devices with hover (desktop) */
@media (hover: hover) and (pointer: fine) {
  .bio-wrap:hover .team-bio,
  .bio-wrap:focus-within .team-bio {
    /* No height here - JS already animates it, this just prevents flickering */
  }
}

/* Center the only item in the last row (3-column grid) */
.team-grid > .team-card:nth-last-child(1):nth-child(3n+1) {
  grid-column: 2; /* lo coloca en la columna central */
}

/* On tablet/mobile (2 or 1 column), we return to the normal flow */
@media (max-width: 991px) {
  .team-grid > .team-card:nth-last-child(1):nth-child(3n+1) {
    grid-column: auto;
  }
}

/*=== SERVICES ===*/

@media (max-width: 981px) {
  .row-reverse {
    display: flex;
    flex-direction: column-reverse;
  }
}

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

/* ================================
   Portfolio grid
   - All cards: hover overlay + zoom
   - Caption (title + subtitle) always visible below the image
   - 3-col grid; last row auto-centers when 1 or 2 items
   ================================ */

/* --- Base wrappers --- */
.image-zoom-inner {
  position: relative;
  display: block;
  overflow: hidden;
}
.image-zoom-inner img {
  width: 100%;
  display: block;
  transition: transform 0.6s ease;
  will-change: transform;
}
.image-zoom-inner:hover img { transform: scale(1.1); }

/* Card (image + overlay lives inside the anchor) */
.project-hover-card {
  position: relative;
  display: block;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

/* Overlay background + text (shown on hover) */
.project-hover-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(235,106,67,.8);
  opacity: 0;
  transition: opacity .5s ease;
  z-index: 2;
}
.project-hover-card .hover-text {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #fff;
  opacity: 0;
  transition: opacity .5s ease;
  z-index: 3;
  padding: 0 20px;
  width: 100%;
  max-width: 90%;
  box-sizing: border-box;
}
.project-hover-card:hover::before,
.project-hover-card:hover .hover-text { opacity: 1; }

/* Overlay typography */
.project-hover-card .hover-text,
.project-hover-card .hover-text * {
  font-family: "neue-haas-grotesk-display", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
  font-synthesis: none;
}
.project-hover-card .hover-text h2 {
  font-size: 36px;
  font-weight: 800 !important;
  line-height: 1.1;
  margin: -10px;
  color: #fff;
}
.project-hover-card .hover-text p {
  font-size: 24px;
  font-weight: 500;
  line-height: 1.25;
  margin: 0;
}

/* Ribbon pinned on top of the image */
.project-hover-card .ribbon-badge {
  position: absolute;
  left: 18px;
  bottom: 18px;
  z-index: 4;
  pointer-events: none;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.25));
  max-width: 72px;
  margin: 0 !important;
  padding: 0 !important;
}

/* --- Grid wrapper --- */
.portfolio-highlighted { width: 100%; }

/* Row 1: 3-column grid aligned with fixed track widths */
.portfolio-highlighted .row-1 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  align-items: start;
}

/* Row 2 — center two cards but keep each card the same width as one column in the 3-col grid */
.portfolio-highlighted .row-2 {
  display: flex !important;
  justify-content: center;   /* centers the group when there are 1–2 items */
  align-items: flex-start;
  gap: 28px !important;                 /* must match .row-1 gap */
  margin-top: 28px;
  flex-wrap: wrap;
}

/* Make each child take exactly one "grid column" worth of width */
.portfolio-highlighted .row-2 > * {
  flex: 0 0 calc((100% - 2 * 28px) / 3);   /* (container - 2 gaps) / 3 columns */
  max-width: calc((100% - 2 * 28px) / 3);
}

/* --- Caption under the image (always visible) --- */
.portfolio-card .card-caption {   /* parent wrapper recommended: see note below */
  padding-top: 14px;
  text-align: left;
}
.portfolio-card .card-caption h3 {
  font-weight: 800;
  color: #0E2533;
  line-height: 1.1;
  font-size: clamp(22px, 2.6vw, 24px);
}
.portfolio-card .card-caption p {
  margin: 0;
  font-weight: 500;
  color: #EB6A43;
  font-size: clamp(15px, 1.8vw, 20px);
margin-top: -7px;
}

/*--- Single Portfolio ----*/

/* Hero image del proyecto */
.hero-container .portfolio-image {
    background-size: cover;
    background-position: center center;
    width: 100%;
    height: 610px; 
	margin-bottom: 20px;
}

.single-portfolio-container {
  max-width: 1200px;
  margin: 0px auto 80px;
  padding: 20px;
}

.portfolio-title {
  font-size: 56px;
  font-weight: bold;
  margin-top: 40px;
}

.portfolio-description h2 {
  margin-top: 16px;
  font-size: 32px;
}

.award-info {
    font-size: 32px;
    font-weight: 900;
    color: #0F1A2C;
    font-family: "neue-haas-grotesk-display", sans-serif;
	margin-top: 36px;
}

.award-info a {
    text-decoration: underline;
	color: #0F1A2C;
}


/* Move the Ribbon below the description */
.single-portfolio .ribbon-badge {
  position: relative;
  display: block;
  margin: 16px 0 51px;  
  max-width: 150px;  
  margin-right: auto;  
}

.single-portfolio .ribbon-badge img {
  width: 100%;
  height: auto;
}

/* Collaborators - Adjusted for two columns */
.single-portfolio .portfolio-columns {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 69px;
  margin-top: -11px;
}

.single-portfolio .portfolio-left {
  display: flex;
  flex-direction: column;
}

.single-portfolio .portfolio-right {
  display: flex;
  flex-direction: column;
}

.portfolio-collaborators {
    background-color: #0F1A2C;
    padding: 40px 32px;
    border-radius: 2px;
    color: white;
    font-size: 19px;
    font-family: "neue-haas-grotesk-display", sans-serif;
	margin-top: -60px;
}

.portfolio-collaborators h3 {
 font-size: 32px;
    margin: 30px 0 10px;
    color: white;
    font-weight: 700;
}

.portfolio-collaborators ul {
  padding-left: 0;
}

.portfolio-collaborators ul li {
  margin-bottom: 10px;
  font-size: 20px;
}

.portfolio-collaborators ul li strong {
  display: block;
  margin-bottom: -8px;
}

.portfolio-collaborators ul li a {
    color: white;
    text-decoration: underline;
    display: block;
	margin-top: -12px;
}

/* Styles for collaborator links */
.portfolio-collaborators a {
  color: #1a73e8; /* Color de enlace */
  text-decoration: none;
}

.portfolio-collaborators a {
    color: white;
    text-decoration: underline;
}

span.collab-role {
    font-weight: 700;
}

.portfolio-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 34px;
  margin-top: 20px;
}

.portfolio-gallery img {
  width: 100%;
  height: auto;
  border-radius: 2px;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
  /* Hero Image */
  .single-portfolio .portfolio-image img {
    max-height: 400px;
  }

  /* Column layout for small screens */
  .portfolio-columns {
    flex-direction: column;
  }

	.single-portfolio .portfolio-columns {
    display: grid;
    grid-template-columns: none;
    gap: 69px;
    margin-top: -11px;
}

  .portfolio-left,
  .portfolio-right {
    flex: 1 1 100%; /* One column on small devices */
  }

  .portfolio-title {
    font-size: 36px;
  }

  .portfolio-description h2 {
    font-size: 28px;
  }

  /* Make the gallery display in a single column */
  .portfolio-gallery {
    grid-template-columns: 1fr;
  }

  /* Adjust the size of the Ribbon on small screens */
  .single-portfolio .ribbon-badge {
    max-width: 120px;
  }
}

@media (max-width: 480px) {
  .portfolio-title {
    font-size: 28px;
  }

  .portfolio-description h2 {
    font-size: 24px;
  }

  /* Ensure gallery images are larger on small devices */
  .portfolio-gallery img {
    width: 100%;
    height: auto;
  }
}

@media (max-width: 980px) {
  .portfolio-columns {
    flex-direction: column; /* Single column on small screens */
  }

  .portfolio-left,
  .portfolio-right {
    flex: 1 1 100%;  /* Occupies the entire width */
  }

  .portfolio-gallery {
    grid-template-columns: 1fr;  /* Single column in gallery */
  }

  .portfolio-title {
    font-size: 36px;
  }

  .portfolio-description h2 {
    font-size: 28px;
  }

  /* Ajustar el tamaño del Ribbon en pantallas más pequeñas */
  .single-portfolio .ribbon-badge {
    max-width: 120px;
  }
}

/* --- Responsive --- */

/* Tablet: switch to 2 columns, fill the space better */
@media (max-width: 980px) {
  .portfolio-highlighted .row-1 {
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* 2 columns */
  }

  .portfolio-highlighted .row-2 {
    display: flex;
    justify-content: space-between;  /* Ensure both cards take full width and space out */
    gap: 28px;  /* Same gap as Row 1 */
    margin-top: 24px;
  }

  /* Ensure each card in Row 2 takes equal width and fills the space */
  .portfolio-highlighted .row-2 > * {
    flex: 1 1 calc(50% - 14px); /* This makes the items fill the 2-column space */
    max-width: calc(50% - 14px); /* Consistent sizing */
  }
}

/* Mobile: 1 column */
@media (max-width: 640px) {
  .portfolio-highlighted .row-1,
  .portfolio-highlighted .row-2 { 
    grid-template-columns: 1fr !important;
  }

  /* Adjust row-2 to stack the items vertically */
  .portfolio-highlighted .row-2 > * {
    flex-basis: 100%;    /* Takes the full width of the screen */
    max-width: 100%;
  }
}

/* Estilo para Home (solo se aplicará en la página de inicio) */
body.page-id-11 .portfolio-highlighted .row-1 {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 columnas */
  gap: 28px;
}

body.page-id-11 .portfolio-highlighted .row-2 {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 columnas */
  gap: 28px;
}

/* Estilo para Our Team (solo se aplicará en la página Our Team) */
body.page-id-14 .portfolio-highlighted .row-1 {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 columnas */
  gap: 28px;
}

/* Ajustes de estilo para el Ribbon */
.portfolio-card .ribbon-badge {
  position: absolute;
  bottom: 10px;  /* Ajusta según sea necesario */
  left: 10px;    /* Ajusta según sea necesario */
  width: 75px;   /* Tamaño del ribbon */
  height: auto;
}

/*===== Contact Us ====*/

/*--- Form ---*/

input#input_1_1_3,input#input_1_3,input#input_1_4,input#input_1_6_1,textarea#input_1_8,input#input_1_9,input#input_1_10 {
    background-color: transparent;
    border: none;
    color: white;
    border-bottom: 1px solid white;
    padding: 10px 10px 10px 0;
    border-radius: 0;
    font-size: 20px;
    font-family: "neue-haas-grotesk-display", sans-serif;
}

legend.gfield_label.gform-field-label {
	color: white;
	font-size: 20px;
    font-family: "neue-haas-grotesk-display", sans-serif;
}

.gform-theme--foundation .gform-field-label:where([class*=gform-field-label--type-]) {
    color: white !important;
    font-size: 20px !important;
font-family: "neue-haas-grotesk-display", sans-serif;
}

.gform-theme--framework input[type=radio]:where(:not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)) {
    --gf-local-radius: var(--gf-ctrl-radio-check-radius);
    background-color: transparent;
}


element.style {
}
.gform-theme--framework input[type=radio]:where(:not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)) {
    --gf-local-radius: var(--gf-ctrl-radio-check-radius);
    background-color: transparent;
}

.gform-footer.gform_footer.top_label {
    justify-content: center !important;
}

input#gform_submit_button_1 {
    background-color: #EB6A43;
    padding: 12px 40px;
    border-radius: 2px;
    font-size: 20px;
    font-family: "neue-haas-grotesk-display", sans-serif;
	transition: all 300ms ease 0ms;
}

input#gform_submit_button_1:hover {
    background-color: #751B00;
}