/*
Theme Name: Hub Child
Theme URI: http://hub.liquid-themes.com/
Author: Liquid Themes
Author URI: https://themeforest.net/user/liquidthemes
Template: hub
Description: Smart, Powerful and Unlimited Customizable WordPress Theme.
Version: 1.0
License: GNU General Public License
License URI: license.txt
Text Domain: hub-child
Tags: responsive, retina, rtl-language-support, blog, portfolio, custom-colors, live-editor
*/

:root {
  --color-primary: #e5884a;
  --color-secondary: #282b2d;
  --color-white: #fff;
  --color-black: #000;

  --font-primary: 'Gotham', sans-serif;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 2rem;
  --text-3xl: 2.5rem;
  --text-4xl: 3rem;
  --text-5xl: 3.5rem;
  --text-6xl: 4rem;
  --text-7xl: 4.5rem;
}

body {
  font-family: var(--font-primary);
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--color-black);
}

h1,h2,h3,h4,h5,h6,
.h1,.h2,.h3,.h4,.h5,.h6 {
  font-family: var(--font-primary);
  line-height: 1.2;
  color: var(--color-secondary);
}

h1,.h1 {
  font-size: var(--text-3xl);
}

/* Colors */
.text-primary {
  color: var(--color-primary) !important;
}
.text-secondary {
  color: var(--color-secondary) !important;
}

/* Font Size */
@media (width >= 768px) {
	.text-sm-6xl {
		font-size: var(--text-6xl);
	}
	.text-sm-7xl {
		font-size: var(--text-7xl);
	}
}

/* Custom CSS */

.visually-hidden,
.visually-hidden-focusable:not(:focus, :focus-within) {
	border: 0 !important;
	clip-path: inset(50%) !important; /* 2 */
	height: 1px !important;
	margin: -1px !important;
	overflow: hidden !important;
	padding: 0 !important;
	width: 1px !important;
	white-space: nowrap !important; /* 3 */
}

.container,
.main-header .container {
  width: 100%;
  max-width: 78.25rem;
}

.btn {
  font-weight: 500;

  > span:not(.btn-icon):not(.btn-txt) {
    padding: .625em 1.25em;
  }

  &.btn-solid {
    border-color: var(--color-secondary);
    background-color: var(--color-secondary);

    &.btn-primary {
      border-color: var(--color-primary);
      background-color: var(--color-primary);

      &:hover {
        border-color: var(--color-secondary);
        background-color: var(--color-secondary);
      }
    }

    &:hover {
      border-color: var(--color-primary);
      background-color: var(--color-primary);
      color: var(--color-white);
      transform: unset;
      box-shadow: unset;
    }
  }
}

#header {
  box-shadow: 0 .5rem 1rem #00000012;

  /* Desktop */
  .lqd-head-sec-wrap {
    .lqd-head-sec {
      .lqd-head-col {
        .module-logo {
          padding: 1.25rem 0;
          > a {
            max-width: 7.75rem;
          }
        }
        .main-nav {
          li {
			  
			  &:last-child {
				  display: none;
			  }
			  
            > a {
              font-weight: 600;
              color: var(--color-black);
              
              &:hover {
                color: var(--color-primary);
              }
            }
          }
        }
      }
    }
  }

  /* Mobile */
  .lqd-mobile-sec {
    &:before {
      background-color: var(--color-white);
    }
    > .lqd-mobile-sec-inner {
      background-color: var(--color-white);

      > .navbar-toggle {

      }
      > a.navbar-brand {
        max-width: 8rem !important;
      }
    }
    > .lqd-mobile-sec-nav {
      .mobile-navbar-collapse {
        .navbar-toggle {
          color: var(--color-secondary);
          .bars {
            border-color: var(--color-secondary);
            .bar {
              background-color: var(--color-secondary);
            }
          }
        }
      }
      li {
        a {
          color: var(--color-secondary);
        }
        .submenu-expander {
          top: .5rem !important;
          color: var(--color-secondary);
        }
      }
    }
  }
}

#footer {
  padding: 2rem 0;
  background-color: var(--color-black);
}

#hero {
  border-bottom: .625rem solid var(--color-primary);
  overflow: hidden;

  /* &:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    border-style: solid;
    border-width: 75vh 25vw 0 0;
    border-color: transparent #ffffff transparent transparent;
    rotate: 180deg;
    opacity: .2;
    pointer-events: none;
    z-index: 1;
  } */

  &:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
      linear-gradient(280.42deg, rgba(0, 0, 0, 0.45) 50.68%, rgba(229, 136, 74, 0.435) 85.13%),
      radial-gradient(100% 113.1% at 0% 71.95%, rgba(240, 126, 45, 0.338) 51%, rgba(0, 0, 0, 0) 86.5%);
    pointer-events: none;
    z-index: 1;
  }

  &:after {
    content: '';
    width: 1px;
    height: 100vw;
    position: absolute;
    bottom: -25vw;
    right: 0;
    rotate: 38deg;
    background-color: var(--color-white);
    pointer-events: none;
    z-index: 1;
  }

  
  > .ld-container {
    &:after {
      content: '';
      position: absolute;
      bottom: 0;
      right: 0;
      border-style: solid;
      border-width: 20vw 15vw 0 0;
      border-color: transparent var(--color-primary) transparent transparent;
      pointer-events: none;
      z-index: 1;
    }
    .vc_row.vc_inner.fixed-box {
      width: 100%;
      max-width: calc(78.25rem - 30px);
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      margin-inline: unset;
      pointer-events: none;
      z-index: 9;

      .wpb_column {
        .vc_column-inner {
          .wpb_wrapper {
            display: inline-flex;
            flex-direction: column;
            align-items: start;

            .ld-fancy-heading {
              h1,h2,h3,h4,h5,h6 {
                color: var(--color-white);
                text-shadow: 0 .25rem .625rem #00000054;
                line-height: 1;

                .text-top {
                  font-size: 4rem;
                }
                .text-bot-left {
                  font-size: 1.5rem;
                }
                .text-bot-right {
                  font-size: 2.5rem;
                }

                @media (width >= 768px) {
                  .text-top {
                    font-size: 8rem;
                  }
                  .text-bot-left {
                    font-size: 2.5rem;
                  }
                  .text-bot-right {
                    font-size: 4.5rem;
                  }
                }
              }
            }

            a.btn.btn-solid {
              min-width: 9.5rem;
              justify-content: center;
              pointer-events: all;
            }
          }
        }
      }
    }
    /* .row.ld-row {
      .wpb_column {
        height: 100%;
        .vc_column-inner {
          height: 100%;
          .wpb_wrapper {
            height: 100%;
          }
        }
      }
    } */
  }
  .carousel-container {
    --carousel-height: calc(100vh - 6rem);
    height: 100%;
    
    /* @media (width >= 768px) {
      --carousel-height: calc(100vh - 6rem);
    } */

    &:after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      border-style: solid;
      border-width: 30vw 25vw 0 0;
      border-color: transparent var(--color-white) transparent transparent;
      rotate: 180deg;
      opacity: .2;
      pointer-events: none;
      z-index: 1;
    }

    > .carousel-items {
      height: 100%;
      
      .flickity-viewport {
        min-height: 75vh;
        
        .flickity-slider {
          .carousel-item {
            .carousel-item-inner {
              .carousel-item-content {
                min-height: var(--carousel-height);
                
                .vc_row.vc_inner {
                  min-height: var(--carousel-height);
                  
                  .ld-container.container {
                    display: flex;
                    align-items: center;
                    
                    /* &:before {
                      content: '';
                      position: absolute;
                      top: 0;
                      left: 0;
                      width: 100%;
                      height: 100%;
                      background:
                        linear-gradient(280.42deg, rgba(0, 0, 0, 0.45) 50.68%, rgba(229, 136, 74, 0.435) 85.13%),
                        radial-gradient(100% 113.1% at 0% 71.95%, rgba(240, 126, 45, 0.338) 51%, rgba(0, 0, 0, 0) 86.5%);
                      pointer-events: none;
                    } */
                    
                    .row.ld-row {
                      .wpb_column {
                        z-index: 9;
                        .vc_column-inner {
                          .wpb_wrapper {
                            .ld-fancy-heading {
                              h1,h2,h3,h4,h5,h6 {
                                font-size: var(--text-3xl);
                                color: var(--color-white);
                                text-shadow: 0 .25rem .625rem #00000054;

                                @media (width >= 768px) {
                                  font-size: 5.5rem;
                                }
                              }
                            }
                            a.btn.btn-solid {
                              min-width: 9.5rem;
                              justify-content: center;
                            }
                          }
                        }
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
    > .carousel-dots, > .carousel-dots-mobile {
      width: 100%;
      z-index: 1;
      .flickity-page-dots {
        .dot {
          width: 1.125rem;
          height: 1.125rem;
          background-color: var(--color-primary);
          margin-inline: .75rem;
          transition: all .3s;
          
          &:before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 1.75rem;
            height: 1.75rem;
            border-radius: 50em;
            background-color: transparent;
            border: 2px solid transparent;
            transition: all .3s;
          }

          &.is-selected {
            &:before {
              border-color: var(--color-primary);
            }
          }
        }
      }
    }
    > .carousel-dots-mobile {
      left: unset;
      right: unset;
    }
  }
}

.featured-projects {
  .featured-project {
    > .vc_column-inner {
      min-height: 80vh;
      padding: 3rem 2rem;
      transition: all .3s;
      
      &:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(0deg, var(--color-black) 0%, transparent 100%);
        opacity: .5;
        pointer-events: none;
        z-index: 1;
        transition: all .5s;
      }

      > .wpb_wrapper {
        flex-grow: 1;


        .featured-project-title {
          position: absolute;
          bottom: 0;
          z-index: 2;
          transition: all .5s;
          > * {
            font-size: var(--text-xl);
          }
        }
      }

      &:hover {
        &:before {
          background: linear-gradient(0deg, color-mix(in srgb, var(--color-black) 75%, var(--color-primary)) 0%, transparent 100%),
          linear-gradient(0deg, var(--color-primary) 0%, var(--color-primary) 100%);
          opacity: .85;
        }
        > .wpb_wrapper {
          .featured-project-title {
            bottom: 50%;
            transform: translateY(50%);
          }
        }
      }
    }
  }
}

#contacto {
  .cto-map-col {
    > .vc_column-inner {
      flex-grow: 1;
      height: 100%;
      
      > .wpb_wrapper {
        display: flex;
        flex-grow: 1;
        
        > .wpb_gmaps_widget {
          width: 100%;
          
          > .wpb_wrapper {
            height: 100%;
            padding: 0;

            .wpb_map_wraper {
              height: 100%;
              min-height: 24rem;

              iframe {
                height: 100%;
              }
            }
          }
        }
      }
    }
  }
}

.wpforms-container {
  margin-bottom: 0;

  .wpforms-form {
    .wpforms-field-container {
      .wpforms-field {
        padding: .75rem 0;
        overflow-x: unset !important;

        .ui-selectmenu-button.ui-button {
          display: none !important;
        }
        /* .wpforms-field-label {} */

        input,
        textarea,
        select {
          padding: 1em 1.375em;
          border: none;
          border-radius: .25rem;
          line-height: 1.33;
          outline: none;
          transition: all .2s;
          color: var(--color-secondary);

          &:hover,
          &:focus {
            box-shadow: 0 0 0 .125rem var(--color-primary);
          }

          &::placeholder {
            opacity: 1;
          }
        }

        textarea {
          padding: 1.375em;
          height: auto;
          min-height: 11.25rem;
          resize: none;
          field-sizing: content;
        }

        select {
          display: block !important;
        }

        &.wpforms-one-half {
          width: 100%;
          margin-left: 0;
          
          @media (width >= 768px) {
            width: calc(50% - 2px);
            margin-left: 4px;
          }
        }
      }
    }
    .wpforms-submit-container {
      margin-top: .5rem;
      button {
        padding: .625em 1.25em;
        border: none;
        outline: none;
        background-color: var(--color-primary);
        color: var(--color-white);
        font-weight: 500;
      }
    }
  }
}

.projects-list {
  .ld-media-row {
    .ld-media-item {
      .ld-media-bg {
        background-color: color-mix(in srgb, var(--color-primary) 50%, transparent);
      }
      .ld-media-txt {
        > * {
          font-size: var(--text-xl);
          margin-bottom: 0;
        }
      }
    }
  }
}

.project-titlebar {
  min-height: 24rem;
  overflow: hidden;

  &:before {
    content: '';
    width: 1px;
    height: 100vw;
    position: absolute;
    bottom: -30vw;
    right: 0;
    rotate: 34deg;
    background-color: var(--color-white);
    pointer-events: none;
    z-index: 1;
  }
  &:after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    border-style: solid;
    border-width: 15vw 10vw 0 0;
    border-color: transparent var(--color-primary) transparent transparent;
    pointer-events: none;
  }

  .liquid-row-overlay {
    background-blend-mode: color !important;
    background: linear-gradient(180deg, color-mix(in srgb, var(--color-primary) 25%, var(--color-black) 50%) 0%, var(--color-black) 200%) !important;
  }

  > .ld-container {
    display: flex;
    align-items: center;

    .ld-fancy-heading {
      > * {
        color: var(--color-white);
        text-wrap: balance;
      }
    }
  }

}
.project-images {
  .ld-media-row {
    .ld-media-item {
      .ld-media-bg {
        background-color: color-mix(in srgb, var(--color-primary) 50%, transparent);
      }
    }
  }
}
.project-info-box {
  color: var(--color-primary);
  background-color: color-mix(in srgb, var(--color-white) 20%, transparent 0%);
  text-align: center;

  .info-col {
    > .vc_column-inner {
      padding: 1rem;
      > .wpb_wrapper {
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        flex-wrap: wrap;
        gap: 2rem;
      }
    }
  }
}

.servicios-img-col > div > div {
	position: sticky;
	top: 0;
}
.servicios-img-col {
	.vc_single_image-wrapper {
		width: 100%;
		img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}
}