/*
Theme Name: Stanleys
Theme URI: https://ionik.com.br
Author: Maicon Willi
Author URI: https://maiconexp.com.br
Description: Exclusive theme for development
Tags: landingpage
Version: 1.3
Requires at least: 5.0
Tested up to: 5.4
Requires PHP: 7.0
Text Domain: Ioniktheme
*/

@font-face {
    font-family: gi-regular;
    src: url("assets/font/Gilroy-Regular.ttf");
  }

  @font-face {
    font-family: gi-medium;
    src: url("assets/font/Gilroy-Medium.ttf");
  }

  @font-face {
    font-family: gi-bold;
    src: url("assets/font/Gilroy-Bold.ttf");
  }

  html{
    font-size: 1.318vw !important;
  }
  
  :root {
    --space-base: 0.168rem;
  
    /* Escala de fonte baseada no número de ouro */
    --tp-xxs: 14px;
    --tp-xs: 16px;
    --tp-sm: 19px;
    --tp-md: 24px;
    --tp-lg: 32px;
    --tp-xl: 38px;
    --tp-xxl: 46px;
  
    --cl-0: #141C1F;
    --cl-100: #20292C;
    --cl-200: #2D3639;
    --cl-300: #465053;
    --cl-400: #61686B;
    --cl-500: #7C8183;
    --cl-600: #969A9C;
    --cl-700: #B0B3B5;
    --cl-800: #CACCCE;
    --cl-900: #E4E5E6;
    --cl-1000: #FFFFFF;
  
    --cl-custom: #F9B03D;
  
    --x1: clamp(3px, calc(var(--space-base)), 6px);
    --x2: clamp(7px, calc(var(--space-base) * 1.618), 12px);
    --x3: clamp(12px, calc(var(--space-base) * (1.618 * 2)), 18px);
    --x4: clamp(16px, calc(var(--space-base) * (1.618 * 3)), 24px);
    --x5: clamp(20px, calc(var(--space-base) * (1.618 * 4)), 30px);
    --x6: clamp(24px, calc(var(--space-base) * (1.618 * 5)), 36px);
    --x7: clamp(28px, calc(var(--space-base) * (1.618 * 6)), 42px);
    --x8: clamp(32px, calc(var(--space-base) * (1.618 * 7)), 48px);
    --x9: clamp(36px, calc(var(--space-base) * (1.618 * 8)), 54px);
    --x10: clamp(40px, calc(var(--space-base) * (1.618 * 10)), 60px);
    --x11: clamp(48px, calc(var(--space-base) * (1.618 * 11)), 72px);
    --x12: clamp(56px, calc(var(--space-base) * (1.618 * 12)), 84px);
    --x13: clamp(64px, calc(var(--space-base) * (1.618 * 13)), 96px);
    --x14: clamp(72px, calc(var(--space-base) * (1.618 * 14)), 108px);
    --x15: clamp(80px, calc(var(--space-base) * (1.618 * 15)), 120px);
  }
  
  
  .x-1{
    height: var(--x1);
    box-sizing: border-box;
    background-color: #ccc;
  }
  
  .x-2{
    height: var(--x2);
    box-sizing: border-box;
    background-color: #ccc;
  }
  .x-3{
    height: var(--x3);
    box-sizing: border-box;
    background-color: #ccc;
  }
  .x-4{
    height: var(--x4);
    box-sizing: border-box;
    background-color: #ccc;
  }
  .x-5{
    height: var(--x5);
    box-sizing: border-box;
    background-color: #ccc;
  }
  .x-6{
    height: var(--x6);
    box-sizing: border-box;
    background-color: #ccc;
  }
  .x-7{
    height: var(--x7);
    box-sizing: border-box;
    background-color: #ccc;
  }
  .x-8{
    height: var(--x8);
    box-sizing: border-box;
    background-color: #ccc;
  }
  .x-9{
    height: var(--x9);
    box-sizing: border-box;
    background-color: #ccc;
  }
  
  .x-10{
    height: var(--x10);
    box-sizing: border-box;
    background-color: #ccc;
  }
  
  .x-11{
    height: var(--x11);
    box-sizing: border-box;
    background-color: #ccc;
  }
  
  .x-12{
    height: var(--x12);
    box-sizing: border-box;
    background-color: #ccc;
  }
  .x-13{
    height: var(--x13);
    box-sizing: border-box;
    background-color: #ccc;
  }
  .x-14{
    height: var(--x14);
    box-sizing: border-box;
    background-color: #ccc;
  }
  .x-15{
    height: var(--x15);
    box-sizing: border-box;
    background-color: #ccc;
  }
  
  
  /* normalise */
  body{
    overflow-x: hidden;
  }
  html,
  body {
    background: linear-gradient(90deg, #111A1D 0%, #1C292B 48%, #182122 100%);
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box;
    font-family: "gi-regular", sans-serif;
    font-optical-sizing: auto;
    font-weight: var(--tp-regular);
    font-size: var(--tp-xs);
    scroll-behavior: smooth !important;
    user-select: none;
    -webkit-user-select: none; /* Para navegadores baseados em WebKit */
    -moz-user-select: none;    /* Para Firefox */
    -ms-user-select: none;     /* Para Internet Explorer/Edge */
  }

  button{
    border: none;
  }
  
  section {
      position: relative;
  }
  
  ul {
      margin: 0;
      padding: 0;
  }
  
  li {
      list-style: none;
  }
  
  a {
      text-decoration: none;
  }
  
  h1,
  h2,
  h3,
  h4 {
      margin: 0;
      line-height: 100%;
      font-weight: initial;
  }
  
  h1 {
      font-size: var(--tp-xxl);
      font-weight: var(--tp-bold);
  }
  
  h2 {
      font-size: var(--tp-xl);
      font-weight: var(--tp-medium);
  }
  
  h3,
  h4 {
      font-size: var(--tp-xs);
  }
  
  p {
      font-size: var(--tp-xxs);
      padding: 0;
      margin: 0;
  }
  
  
  /* =============================== [grid] =============================== */
  .col__1--lg {
      width: calc((100% / 12) * 1);
    }
    
    .col__2--lg {
      width: calc((100% / 12) * 2);
    }
    
    .col__3--lg {
      width: calc((100% / 12) * 3);
    }
    
    .col__4--lg {
      width: calc((100% / 12) * 4);
    }
    
    .col__5--lg {
      width: calc((100% / 12) * 5);
    }
    
    .col__6--lg {
      width: calc((100% / 12) * 6);
    }
    
    .col__7--lg {
      width: calc((100% / 12) * 7);
    }
    
    .col__8--lg {
      width: calc((100% / 12) * 8);
    }
    
    .col__9--lg {
      width: calc((100% / 12) * 9);
    }
    
    .col__10--lg {
      width: calc((100% / 12) * 10);
    }
    
    .col__11--lg {
      width: calc((100% / 12) * 11);
    }
    
    .col__12--lg {
      width: calc((100% / 12) * 12);
    }
    
    @media (max-width: 1199px) {
      .col__1--md {
        width: calc((100% / 12) * 1);
      }
    
      .col__2--md {
        width: calc((100% / 12) * 2);
      }
    
      .col__3--md {
        width: calc((100% / 12) * 3);
      }
    
      .col__4--md {
        width: calc((100% / 12) * 4);
      }
    
      .col__5--md {
        width: calc((100% / 12) * 5);
      }
    
      .col__6--md {
        width: calc((100% / 12) * 6);
      }
    
      .col__7--md {
        width: calc((100% / 12) * 7);
      }
    
      .col__8--md {
        width: calc((100% / 12) * 8);
      }
    
      .col__9--md {
        width: calc((100% / 12) * 9);
      }
    
      .col__10--md {
        width: calc((100% / 12) * 10);
      }
    
      .col__11--md {
        width: calc((100% / 12) * 11);
      }
    
      .col__12--md {
        width: calc((100% / 12) * 12);
      }
  
      .order-0-md{
          order: 0;
      }
  
      .order-1-md{
          order: 1;
      }
    }
    
    @media (max-width: 768px) {
      .col__1--sm {
        width: calc((100% / 12) * 1);
      }
    
      .col__2--sm {
        width: calc((100% / 12) * 2);
      }
    
      .col__3--sm {
        width: calc((100% / 12) * 3);
      }
    
      .col__4--sm {
        width: calc((100% / 12) * 4);
      }
    
      .col__5--sm {
        width: calc((100% / 12) * 5);
      }
    
      .col__6--sm {
        width: calc((100% / 12) * 6);
      }
    
      .col__7--sm {
        width: calc((100% / 12) * 7);
      }
    
      .col__8--sm {
        width: calc((100% / 12) * 8);
      }
    
      .col__9--sm {
        width: calc((100% / 12) * 9);
      }
    
      .col__10--sm {
        width: calc((100% / 12) * 10);
      }
    
      .col__11--sm {
        width: calc((100% / 12) * 11);
      }
    
      .col__12--sm {
        width: calc((100% / 12) * 12);
      }
    }
    
    @media (max-width: 480px) {
      .col__1--xs {
        width: calc((100% / 12) * 1);
      }
    
      .col__2--xs {
        width: calc((100% / 12) * 2);
      }
    
      .col__3--xs {
        width: calc((100% / 12) * 3);
      }
    
      .col__4--xs {
        width: calc((100% / 12) * 4);
      }
    
      .col__5--xs {
        width: calc((100% / 12) * 5);
      }
    
      .col__6--xs {
        width: calc((100% / 12) * 6);
      }
    
      .col__7--xs {
        width: calc((100% / 12) * 7);
      }
    
      .col__8--xs {
        width: calc((100% / 12) * 8);
      }
    
      .col__9--xs {
        width: calc((100% / 12) * 9);
      }
    
      .col__10--xs {
        width: calc((100% / 12) * 10);
      }
    
      .col__11--xs {
        width: calc((100% / 12) * 11);
      }
    
      .col__12--xs {
        width: calc((100% / 12) * 12);
      }
    }
  
  
  .relative {
      position: relative;
  }
  
  .absolute{
      position: absolute;
  }
  
  .fixed {
    position: fixed;
  }
  
  .w100 {
      width: 100% !important;
  }
  
  .wfit {
      width: fit-content !important;
  }
  
  .h100 {
    height: 100vh;
  }
  
  .hfit {
      height: fit-content;
  }
  
  .container-xxs{
      max-width: 300px;
  }
  
  .container-xs{
      max-width: 400px;
  }
  
  .container-s{
      max-width: 520px;
  }
  
  .container-m{
      max-width: 800px;
  }
  
  .container-l{
      max-width: 1200px;
  }
  
  .pl-x4{
      padding-left: var(--x4);
      box-sizing: border-box;
  }
  
  .pr20{
      padding-right: 20px;
      box-sizing: border-box;
  }
  
  .pt20 {
      padding-top: 20px;
      box-sizing: border-box;
  }
  
  .pt40 {
      padding-top: 40px;
      box-sizing: border-box;
  }
  
  .pb60{
      padding-bottom: 60px;
      box-sizing: border-box;
  }
  
  .pad6 {
      padding: 6px;
      box-sizing: border-box;
  }
  
  .pad-x2 {
    padding: var(--x2);
    box-sizing: border-box;
  }
  .pad-x3 {
    padding: var(--x3);
    box-sizing: border-box;
  }
  .pad-x4 {
      padding: var(--x4);
      box-sizing: border-box;
  }
  
  .pad-x5 {
    padding: var(--x5);
    box-sizing: border-box;
  }
  
  .pad-x8{
    padding: var(--x8);
    box-sizing: border-box;
  }
  
  .ml-3x{
    margin-left: var(--3x);
  }
  .mr-3x{
    margin-right: var(--3x);
  }
  
  .pt40{
      padding-top: 40px;
      box-sizing: border-box;
  }
  
  .pb20{
      padding-bottom: 20px;
      box-sizing: border-box;
  }
  
  .pb40{
      padding-bottom: 40px;
      box-sizing: border-box;
  }
  
  .pt80{
      padding-top: 80px;
  }
  
  .pb80{
      padding-bottom: 80px;
  }
  
  .mt-x4{
      margin-top: var(--x4);
  }
  
  .mt-x10{
    margin-top: var(--x10);
  }
  
  .mt-x15{
    margin-top: var(--x15);
  }
  
  .mt20{
      margin-top: 20px;
  }
  
  .mt40{
      margin-top: 40px;
  }
  
  .mb20{
      margin-bottom: 20px;
  }
  
  .mb40{
      margin-bottom: 40px;
  }
  
  .mb-x10{
    margin-bottom: var(--x10);
  }
  
  .tp-xxs {
      font-size: var(--tp-xxs);
  }
  
  .tp-xs {
      font-size: var(--tp-xs);
  }
  
  .tp-sm {
      font-size: var(--tp-sm);
  }
  
  .tp-md {
    font-size: var(--tp-md);
  }
  
  
  .tp-lg {
      font-size: var(--tp-lg);
  }
  
  .tp-xl {
    font-size: var(--tp-xl);
  }
  
  .tp-xxl {
    font-size: var(--tp-xxl);
  }
  
  .tp-upper{
      text-transform: uppercase;
  }
  
  .tp-regular {
    font-family: gi-regular, sans-serif;
  }
  
  .tp-medium {
      font-family: gi-medium, sans-serif;
  }
  
  .tp-bold {
      font-family: gi-bold, sans-serif;
  }
  
  .tp-center {
      text-align: center;
  }
  
  .tp-end{
      text-align: end;
  }
  
  /* ===================== COLOR ====================== */
  .tp-0{
    color: var(--cl-0);
  }
  .tp-100{
    color: var(--cl-100);
  }
  .tp-200{
    color: var(--cl-200);
  }
  .tp-300{
    color: var(--cl-300);
  }
  .tp-400{
    color: var(--cl-400);
  }
  .tp-500{
    color: var(--cl-500);
  }
  .tp-600{
    color: var(--cl-600);
  }
  .tp-700{
    color: var(--cl-700);
  }
  .tp-800{
    color: var(--cl-800);
  }
  .tp-900{
    color: var(--cl-900);
  }
  .tp-1000{
    color: var(--cl-1000);
  }
  
  .tp-custom{
    color: var(--cl-custom);
  }
  
  .bg-0{
    background-color: var(--cl-0);
  }
  .bg-100{
    background-color: var(--cl-100);
  }
  .bg-200{
    background-color: var(--cl-200);
  }
  .bg-300{
    background-color: var(--cl-300);
  }
  .bg-400{
    background-color: var(--cl-400);
  }
  .bg-500{
    background-color: var(--cl-500);
  }
  .bg-600{
    background-color: var(--cl-600);
  }
  .bg-700{
    background-color: var(--cl-700);
  }
  .bg-800{
    background-color: var(--cl-800);
  }
  .bg-900{
    background-color: var(--cl-900);
  }
  .bg-1000{
    background-color: var(--cl-1000);
  }
  
  .bg-custom{
    background-color: var(--cl-custom);
    transition: 0.3s;
  }
  .bg-custom svg{
    stroke: var(--cl-0);
    transition: 0.3s;
  }
  .bg-custom:hover{
    background-color: var(--cl-0);
    color: var(--cl-custom);
    transition: 0.3s;
  }
  .bg-custom:hover svg{
    stroke: var(--cl-custom);
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transition: 0.3s;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
  }
  
  .d-flex {
      display: flex;
  }
  
  .flex-wrap {
      flex-wrap: wrap;
  }
  
  .flex-column {
      flex-direction: column;
  }
  
  .flex-center {
      justify-content: center;
      align-items: center;
  }
  
  .flex-end{
    justify-content: end;
  }
  .d-flex.flex-column.horizontal--start {
    justify-content: start;
  }
  
  .d-flex.flex-column.horizontal--end {
    justify-content: flex-end;
  }
  
  .d-flex.horizontal--end {
    justify-content: flex-end;
  }
  
  .vertical-start {
      align-items: flex-start
  }
  
  .d-flex.vertical-between {
      justify-content: space-between
  }
  
  .vertical-center {
      align-items: center;
  }
  
  
  .horizontal-between {
      justify-content: space-between;
  }
  
  .horizontal-around {
      justify-content: space-around;
  }
  
  .flex-column .horizontal-center {
    justify-content: center;
  }
  
  .horizontal-end {
    justify-content: end;
  }
  
  .gap-5 {
      gap: 5px;
  }
  
  .gap-10 {
      gap: 10px;
  }
  
  .gap-20 {
      gap: 20px;
  }
  
  .gap-40 {
      gap: 40px;
  }
  
  .gap-80 {
      gap: 80px;
  }
  
  .border-custom{
    border: 1px solid var(--cl-custom);
  }
  
  .border-200{
    border: 1px solid var(--cl-200);
  }
  
  .radius-20{
      border-radius: 20px;
      -webkit-border-radius: 20px;
      -moz-border-radius: 20px;
      -ms-border-radius: 20px;
      -o-border-radius: 20px;
  }
  
  .radius-40{
      border-radius: 40px;
      -webkit-border-radius: 40px;
      -moz-border-radius: 40px;
      -ms-border-radius: 40px;
      -o-border-radius: 40px;
  }
  
  .shadow{
      box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.05);
  }
  
  .overflow-hidden{
      overflow: hidden;
  }
  
  .divisor-h{
      width: 100%;
      height: 0.5px;
  }
  
  .img-section{
      width: 100%;
      max-width: 500px;
  }
  
  .btn-xs {
      padding: 8px 10px;
      border-radius: 8px;
      height: 54px;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: var(--tp-xxs);
      width: fit-content;
      transition: 0.3s;
  }
  
  .btn-s {
      padding: 8px 20px;
      border-radius: 8px;
      height: 54px;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: var(--tp-xs);
      transition: 0.3s;
  }
  
  .btn-m {
      padding: 8px 26px;
      border-radius: 12px;
      height: 64px;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: center;
      width: fit-content;
      transition: 0.3s;
      -webkit-border-radius: 12px;
      -moz-border-radius: 12px;
      -ms-border-radius: 12px;
      -o-border-radius: 12px;
  }
  
  .btn-l {
    padding: 16px 32px;
    height: 74px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    transition: 0.3s;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
  }
  
  .hover-1:hover{
      box-shadow: 0px 0px 0 6px rgba(255, 255, 255, 0.5);
      transition: 0.3s;
  }
  
  
  .btn-border{
    border: 1px solid var(--cl-1000);
  }
  
  /* ======================== NAVBAR ===================== */
  
  nav{
    z-index: 9999;
    top: 8px;
  }
  
  ul{
    backdrop-filter: blur(12px);
    border-radius: 12px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    -ms-border-radius: 12px;
    -o-border-radius: 12px;
  }
  
  ul > div:first-child::before{
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    background-color: var(--cl-400);
    left: 0;
    bottom: 0;
  }
  
  ul > div:last-child::before{
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    background-color: var(--cl-400);
    right: 0;
    bottom: 0;
  }
  
  nav ul svg{
    height: 60px;
  }
  
  ul a li{
    transition: 0.3s;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
  }
  
  ul a:hover li{
    color: var(--cl-900);
    transition: 0.3s;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
  }
  
  .hero{
    position: relative;
    box-sizing: border-box;
    border-bottom: 1px solid var(--cl-200);
  }
  
  .banner{
    padding: 0 20px;
    box-sizing: border-box;
  }
  
  .hero-desktop{
    display: initial;
  }
  .hero-mobile{
    display: none;
  }
  
  .banner img{
    position: relative;
    top: 50px;
    width: 100%;
    height: calc(100% - 50px);
    object-fit: contain;
  }
  
  .hero .hero-text{
    left: 10%;
    top: 180px;
    width: 50%;
    max-width: 750px;
  }
  
  .hero a{
    left: 10%;
    bottom: 20px;
  }
  
  .btn-round{
    width: 200px;
    height: 200px;
    border-radius: 50%;
    border: 1px solid var(--cl-200);
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    transition: 0.3s;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
  }
  
  .btn-round:hover{
    background-color: var(--cl-100);
    transform: scale(1.05);
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -ms-transform: scale(1.05);
    -o-transform: scale(1.05);
  }
  
  .btn-round:hover svg{
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transition: 0.3s;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
  }
  
  .card-numbers{
    position: absolute;
    display: grid;
    grid-template-columns: 1fr 1fr;
    bottom: 0;
    right: 10%;
    max-width: 90%;
    padding: 20px;
    border-radius: 20px 20px 0 0;
    -webkit-border-radius: 20px 20px 0 0;
    -moz-border-radius: 20px 20px 0 0;
    -ms-border-radius: 20px 20px 0 0;
    -o-border-radius: 20px 20px 0 0;
    border: 1px solid var(--cl-200);
    backdrop-filter: blur(12px);
  }
  
  .social-icons{
    height: 100vh;
    width: 80px;
    background: linear-gradient(180deg, #141D1E 0%, #293133 100%);
  }
  
  .container-social{
    width: 40px;
    height: 40px;
    
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--cl-300);
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
  }
  
  
  .social-icons > div::before{
    content: "";
    width: 1px;
    height: 30vh;
    background-color: var(--cl-300);
  }
  
  .social-icons > div::after{
    content: "";
    width: 1px;
    height: 30vh;
    background-color: var(--cl-300);
  }
  
  /* ========================== container-sticky ==================== */
  .container-sticky{
    padding: 40px 5% 40px 10px;
    box-sizing: border-box;
    position: relative;
  }
  
  .row-service{
    position: sticky;
    top: 15vh;
    height: 400px;
    background: linear-gradient(90deg, #111A1D 0%, #1C292B 48%, #182122 100%);
   
  }
  
  .row-service > div:first-child > img{
    width: 10vw;
    max-width: 50px;
    min-width: 20px;
  }
  
  .card-sticky{
    align-items: flex-end ;
    justify-content: flex-start ;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
    overflow: hidden;
    background-color: var(--cl-100);
    gap: 20px;
    max-width: 1200px;
  }
  .card-sticky > div:last-child{
    border-left: 1px solid var(--cl-300);
    padding: 20px;
  }
  
  /* ===================== ifue max =================== */
  
  .ifuemax{
    padding: 40px var(--x5);
    box-sizing: border-box;
  }
  
  .conainter-ifue{
    border: 1px solid var(--cl-custom);
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
    padding: var(--x4);
  }
  
  .logo-ifue{
    width: 310px;
    max-width: 100%;
  }
  
  .point-compare{
    writing-mode: vertical-rl; 
    text-orientation: upright;
  }
  .comparative > div{
    width: 280px;
    height: 400px;
    max-width: 80%;
  }
  
  .container {
    position: relative;
    width: 100%;
    height: 100%;
    background-image: url('assets/img/after.webp');
    background-position: center top;
    background-size: cover;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
  }
  
  .mask-container {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
  }
  
  .mask-image-container {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-image: url('assets/img/before.webp');
    background-position: center top;
    background-size: cover;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
  }
  
  .mask-image-container::before{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    
  }
  
  .border {
    position: absolute;
    width: 4px;
    height: 100%;
    left: 50%;
    margin-left: -2px;
    background-color: var(--cl-custom);
  }
  
  .circle {
    position: absolute;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: var(--cl-custom);
    top: 50%;
    margin-top: -25px;
    left: 50%;
    margin-left: -25px;
    cursor: ew-resize;
  }
  
  /* ======================== points ifue ===================== */
  
  #guarantee-seal-ifue{
    animation: rotateSeal 15s linear 0s infinite reverse none;
    -webkit-animation: rotateSeal 15s linear 0s infinite reverse none;
  }
  
  @keyframes rotateSeal {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  
  #logo-center-seal-ifue{
    width: 60px;
  }
  
  
  /* ================ slider ===================== */
  .container-card-testimonial{
    position: relative;
    overflow: hidden;
    height: 250px;
    max-width: 900px;
    width: 100%;
  }
  
  .card-testimonial{
    position: absolute;
    width: 260px;
    height: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 20px;
    border-radius: 20px;
    transition: all 0.4s ease-in-out;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    background-color: var(--cl-100);
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
  }
  
  .card-testimonial img{
    width: 90px;
    height: 90px;
    object-fit: cover;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
  }
  
  .carousel-btn{
    width: 80px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    border-radius: 12px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    -ms-border-radius: 12px;
    -o-border-radius: 12px;
    border: none;
    cursor: pointer;
    transition: 0.3s;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
  }
  
  .carousel-btn:hover{
    background-color: var(--cl-200);
  }
  
  .carousel-btn svg{
    stroke: var(--cl-custom);
  }
  
  .carousel-btn svg:hover{
    stroke: var(--cl-800);
  }
  
  .item-main{
    top: 0;
    transform: translateX(0) scale(1); /* Fica centralizado */
    opacity: 1; /* Totalmente visível */
  }
  
  .item-left{
    transform: translateX(-100%) scale(0.8);
    top: -20px;
    opacity: 0.5;
    transform: scale(0.8);
    -webkit-transform: translateX(-100%) scale(0.8);
    -moz-transform: translateX(-100%) scale(0.8);
    -ms-transform: translateX(-100%) scale(0.8);
    -o-transform: translateX(-100%) scale(0.8);
  }
  
  .item-right{
    transform: translateX(100%) scale(0.8);
    top: -20px;
    opacity: 0.5;
    transform: scale(0.8);
    -webkit-transform: translateX(100%) scale(0.8);
    -moz-transform: translateX(100%) scale(0.8);
    -ms-transform: translateX(100%) scale(0.8);
    -o-transform: translateX(100%) scale(0.8);
  }
  
  .item-left h2,
  .item-left p,
  .item-right h2,
  .item-right p{
    color: var(--cl-500) !important;
  }
  #asp-top{
    position: absolute;
    left: 10px;
    top: 0px;
    width: 60px;
  }
  
  #asp-bottom{
    position: absolute;
    right: 10px;
    bottom: 0px;
    width: 60px;
  }
  
  .title-testimonials{
    width: 100%;
    padding: 0 80px;
    box-sizing: border-box;
  }
  
  /* ================ UNIDADES ================ */
  .content-padding{
    padding: 0 5%;
    box-sizing: border-box;
    margin-bottom: var(--x4);
  }
  .gallery-row{
    display: flex;
    gap: 20px;
    padding: 10px;
    box-sizing: border-box;
  }
  
  .container-gallery{
    overflow: auto;
    max-width: 100%;
    cursor: url('assets/svg/drag.svg') 16 16, auto;
  }
  
  .container-gallery.dragging {
    cursor: url('assets/svg/dragging.svg') 16 16, auto;
  }
  /* Estiliza a barra de rolagem */
  .container-gallery::-webkit-scrollbar {
    width: 6px; /* Largura da barra vertical */
    height: 6px; /* Altura da barra horizontal */
  }
  
  /* Estiliza o trilho (fundo) da barra */
  .container-gallery::-webkit-scrollbar-track {
    background: var(--cl-0); /* Cor de fundo do trilho */
    border-radius: 10px; /* Arredondamento opcional */
  }
  
  /* Estiliza o "polegar" (a parte que se move) */
  .container-gallery::-webkit-scrollbar-thumb {
    background: var(--cl-400); /* Cor do polegar */
    border-radius: 10px; /* Arredondamento para visual mais elegante */
  }
  
  /* Adiciona um efeito ao passar o mouse sobre o polegar */
  .container-gallery::-webkit-scrollbar-thumb:hover {
    background: #a0a0a0; /* Cor mais escura ao passar o mouse */
  }
  
  
  /* ============== forms ============== */
  input{
    height: 48px;
    background-color: transparent;
    padding: 16px;
    box-sizing: border-box;
    font-size: var(--tp-sm);
    color: var(--cl-1000);
    border: 1px solid var(--cl-1000);
    border-radius: 12px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    -ms-border-radius: 12px;
    -o-border-radius: 12px;
  }
  
  input:focus{
    outline: none;
    outline: 3px solid var(--cl-600);
  }
  
  /* =================== static testimonials ============== */
  .static-testimonial img{
    width: 90px;
    height: 90px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
  }
  
  footer img{
    width: 400px;
    max-width: 90%;
  }

  .container-forms{
    overflow: hidden;
    position: relative;
}

  #modal-success{
    position: absolute;
    z-index: +1;
    display: none;
    top: 0;
    border-radius: 20px;
    left: 0;
    width: 100%;
    height: 100%;
}

.show{
    display: flex !important;
    align-items: center;
    justify-content: center;
} 

#loading {
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(8px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: +1;
  top: 0;
  left: 0;
  border-radius: 20px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  -ms-border-radius: 20px;
  -o-border-radius: 20px;
}

.loading-animation {
  width: 170px;
  height: 170px;
  border-radius: 50%;
  border: 4px solid transparent;
  border-top-color: #fff;
  border-bottom-color: #fff;
  position: absolute;
  animation: animationLogo 1s cubic-bezier(0.36, 0, 0.66, -0.56) infinite;
}

@keyframes animationLogo {
  100% {
      transform: rotate(360deg);
  }
}
  
  
  @media (max-width: 998px){
    .hero .hero-text{
      top: 150px;
    }
  
    .hero .hero-text h1{
      font-size: var(--tp-lg);
    }
  
    .hero .btn-round{
      width: 150px;
      height: 150px;
    }
  
    .container-sticky{
      padding: 14px;
    }
  
    .row-service > div > img{
      width: 30px;
    }
  
    .row-service > div{
      gap: 14px;
    }
  }
  
  @media (max-width: 768px){
    .row-service{
      height: 90vh;
      max-height: 800px;
      top: 5vh;
    }
    .card-sticky > div:last-child{
      border-left: none;
    }
    .card-sticky > div{
      align-items: center;
      text-align: center;
      padding-top: 0 !important;
    }
  }
  
  
  @media (max-width: 698px){
    .hero{
      flex-direction: column;
      overflow: hidden;
      max-height: 720px !important;
    }
  
    .banner{
      height: calc(100vh - 80px);
      max-width: 620px;
    }
  
    .hero-desktop{
      display: none;
    }
    .hero-mobile{
      display: initial;
    }
  
    .banner img{
      height: auto;
      width: 95%;
    }
  
    .hero .hero-text, .hero .btn-round{
      left: 5%;
    }
  
    .social-icons{
      width: 100%;
      height: 80px;
      background: linear-gradient(90deg, #141D1E 0%, #293133 100%);
      z-index: +2;
    }
  
    .social-icons > div{
      flex-direction: row;
    }
    .social-icons > div::before,
    .social-icons > div::after{
      width: 30vh;
      height: 1px;
    }
  
    .card-numbers{
      max-width: 50%;
      right: 0;
      border-bottom: none;
      border-right: none;
      border-radius: 20px 0 0 0;
      -webkit-border-radius: 20px 0 0 0;
      -moz-border-radius: 20px 0 0 0;
      -ms-border-radius: 20px 0 0 0;
      -o-border-radius: 20px 0 0 0;
  }
  
    .card-numbers h3{
      font-size: var(--tp-sm);
    }
  
  .static-testimonial > div{
    gap: 20px;
  }
  
  footer .w100,
  footer .w100 div{
    justify-content: center;
  }
  
  }
  
  @media (max-width: 460px){
    .hero .btn-round{
      font-size: var(--tp-xs);
      width: 25vw;
      height: 25vw;
      left: 3%;
    }
    .hero .btn-round svg{
      display: none;
    }
    .card-numbers{
      max-width: 57%;
    }
  
    .card-sticky > div h2{
      font-size: var(--tp-md);
    }
  
    form input[type='button']{
      font-size: var(--tp-xs);
      max-width: 100%;
    }
  }