/* 
Theme Name: Sorelli Soluções
Theme URI: https://lyon.dev/
Description: Sorelli Soluções
Author: Lyon.dev_
Author URI: https://lyon.dev/
Template: hello-elementor
Version: 2.0.0
Text Domain: sorelli-solucoes
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */

:root {
  --e-global-color-secondary: #1F2681;
  --e-global-color-primary: #595959;
  --e-global-color-text: #FFFFFF;
  --e-global-color-accent: #FFFFFF2B;
  --e-global-color-d49ac81: #1F2681;
  --e-global-color-332724a: #003594;
  --e-global-color-4d462f5: #D8D8D8;
  --e-global-color-cfa1f76: #F7F9FC;
  --e-global-color-7fbea4f: #EEF1F9;
  --e-global-color-c94d9ab: #1B365D;
  --e-global-color-044b931: #001A70;
  --e-global-color-638d055: #111111;
  --e-global-color-ec3c7a7: #003A70;
  --e-global-color-3ee16e7: #001E62;
  --e-global-color-4a928a8: #FFC700;
}

body {
  overflow-x: clip;
}

.logo-header {
  filter: brightness(0) invert(1);
}

.text-balance {
  text-wrap: balance;
}

#navbar-top {
  transition: all 0.3s ease;
  .elementor-button {
    border: 2px solid var(--e-global-color-text);
  }
  &.nav-fixed {
    background-color: #fff;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
    @media (width >= 768px) {
      .ekit-menu-nav-link {
        --e-global-color-text: var(--e-global-color-332724a);
      }
    }
    .elementor-button {
      border: 2px solid var(--e-global-color-d49ac81);
    }
  
    .logo-header {
      filter: none;
    }
  }
}

main .elementor-button-link {
  text-decoration: none;
}
.banner {
  h1, h2, h3, p {
    text-wrap: balance;
  }
}
.header-title.animated {
  --color: var(--e-global-color-d49ac81);
  &.primary {
    --color: var(--e-global-color-d49ac81);
  }
  &.secondary {
    --color: var(--e-global-color-044b931);
  }
  span {
    position: relative;
    isolation: isolate;
    display: inline-block;
    &:before {
      --spacing: -0.35rem;
      content: '';
      position: absolute;
      display: block;
      inset: 10% var(--spacing) 0 var(--spacing);
      width: 0;
      height: 80%;
      background-color: var(--color);
      z-index: -1;
      transform: skewX(-10deg);
      animation: width-100 3s forwards;
    }
  }
}


.title-underline.animated {
  --color: var(--e-global-color-d49ac81);
  &.primary {
    --color: var(--e-global-color-d49ac81);
  }
  &.secondary {
    --color: var(--e-global-color-044b931);
  }
  span {
    position: relative;
    isolation: isolate;
    display: inline-block;
    &:before {
      --spacing: -0.35rem;
      content: '';
      position: absolute;
      display: block;
      inset: auto 0 var(--spacing) 0;
      width: 0;
      height: 10%;
      background-color: var(--color);
      z-index: -1;
      animation: width-100 3s forwards;
    }
  }
}

.avatar-consultoria img{
  object-fit: cover;
  object-position: top;
  aspect-ratio: 1;
}

.no-underline,
.no-underline a,
.no-underline * {
  text-decoration: none !important;
}

.btn-bigger-icon {
  .elementor-button span{
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .e-font-icon-svg {
    width: 1.25rem;
    height: 1.25rem;
    transition: all .3s ease;
    margin-block: -.25rem;
  }
}

.text-primary-b :is(b, strong) {
  color: var(--e-global-color-d49ac81);
}

.image-triangles {
  position: relative;
  &::after {
    content: '';
    position: absolute;
    width: 14rem;
    height: 14rem;
    background-color: rgb(0 53 148 / 8);
    mask: url('data:image/svg+xml;utf8,<svg width="407" height="364" viewBox="0 0 407 364" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M168.811 20.4205C184.185 -6.35793 222.815 -6.35794 238.189 20.4205L400.762 303.584C416.072 330.25 396.822 363.5 366.073 363.5H40.9272C10.1782 363.5 -9.07221 330.25 6.23788 303.584L168.811 20.4205Z" fill="currentColor"/></svg>') no-repeat center/contain;
    z-index: 1;
    pointer-events: none;
    bottom: -4rem;
    right: -3rem;
    z-index: 1;
    opacity: .95;
    rotate: -3deg;
  }
}

.btn-wpp a{
  animation: shadow-pulse 1.5s infinite;
}

.move-parallax {
  will-change: transform;
}


.wpforms-field-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  .wpforms-field-textarea, :is(.span-2) {
    grid-column: span 2;
  }
}
.wpforms-submit-container {
  display: flex;
  justify-content: flex-end;
  button {
    float: right;
  }
}
@media (width > 768px) {
  .solucoes > div[data-element_type="container"] {
    display: grid;
    &:after {
      content: '';
      width: calc(100% + 2rem);
      left: -2rem;
      height: 2rem;
      background-color: var(--e-global-color-d49ac81);
      border-radius: .5rem 0 0 .5rem;
      position: relative;
    }
    &:not(:first-child) {
      &:before {
        content: '';
        mask: url('data:image/svg+xml;utf8,<svg width="395" height="501" viewBox="0 0 395 501" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M30.9667 53.3196L314.13 215.892C340.908 231.267 340.908 269.897 314.13 285.271L30.9667 447.844" stroke="currentColor" stroke-width="121"/></svg>') no-repeat center/contain;
        position: absolute;
        left: -1rem;
        bottom: 0rem;
        top: auto;
        translate: 0 7%;
        width: 3.5rem;
        height: 3.5rem;
        background-color: var( --e-global-color-cfa1f76 );
        z-index: 1;
      }
    }
    &:last-child{
      &:after {
        border-radius: .5rem;
      }
    }
  }
  .copyright {
    br {
      display: none;
    }
  }
}

@media (width <= 768px) {
  html {
    overflow-x: clip;
  }
  .menu-principal {
    --e-global-typography-accent-font-size: 1.5rem;

    ul {
      display: grid;
      height: auto;
      gap: 2rem;
    }
  }

  .cta-bg {
    --e-global-typography-7044a64-font-size: 14px;
  }
  
  .wpforms-field-container {
    grid-template-columns: 1fr;
    gap: .35rem;
    .wpforms-field-textarea, :is(.span-2) {
      grid-column: span 1;
    }
  }
  .copyright {
    --e-global-typography-112b6c4-font-size: 14px;
    .divider {
      display: none;
    }
    .dev {
      margin-top: .5rem;
      display: block;
    }
  }
}
@keyframes shadow-pulse {
  0% {
    box-shadow: 0 0 0 0px rgba(37, 211, 101, 0.7);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(37, 211, 101, 0);
  }
  100% {
    box-shadow: 0 0 0 0px rgba(37, 211, 101, 0);
  }
}
@keyframes width-100 {
  0% {
    width: 0;
  }
  100% {
    width: calc(100% + .5rem);
  }
}