/* =========================================================
   HOME - SERVIÇOS
========================================================= */

.services-overview{
    position: relative;

    padding: 60px 0;

    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(255,255,255,.055),
            transparent 32%
        ),
        #405c4c;

    color: #ffffff;

    overflow: hidden;
}


/* detalhe decorativo */
.services-overview::before{
    content: "";

    position: absolute;

    width: 520px;
    height: 520px;

    right: -220px;
    bottom: -260px;

    border: 1px solid rgba(255,255,255,.08);

    border-radius: 50%;

    pointer-events: none;
}


/* =========================================================
   CONTAINER / GRID
========================================================= */

.services-overview .container{
    position: relative;
    z-index: 2;

    width: min(100% - 80px, 1380px);

    margin: 0 auto;
}


.services-overview-grid{
    display: grid;

    grid-template-columns:
        minmax(320px, .8fr)
        minmax(560px, 1.2fr);

    gap: 110px;

    align-items: start;
}


/* =========================================================
   TÍTULO
========================================================= */

.services-title{
    position: sticky;
    top: 150px;
}


.services-title .section-tag{
    display: block;

    margin: 0 0 24px;

    font-size: 12px;
    font-weight: 700;

    letter-spacing: .18em;

    color: #c3a17b;
}


.services-title h2{
    max-width: 560px;

    margin: 0;

    font-family: var(--font-secondary);

    font-size: clamp(46px, 4.4vw, 68px);
    font-weight: 500;

    line-height: .98;
    letter-spacing: -.04em;

    color: #ffffff;
}


.services-title p{
    max-width: 500px;

    margin: 32px 0 0;

    font-size: 16px;
    line-height: 1.8;

    color: rgba(255,255,255,.68);
}


/* =========================================================
   LISTA
========================================================= */

.services-list{
    width: 100%;

    border-top:
        1px solid rgba(255,255,255,.18);
}


/* =========================================================
   SERVIÇO
========================================================= */

.service-item{
    position: relative;

    display: grid;

    grid-template-columns:
        45px
        64px
        1fr;

    gap: 24px;

    align-items: center;

    min-height: 135px;

    padding: 28px 10px;

    border-bottom:
        1px solid rgba(255,255,255,.18);

    transition:
        padding .35s ease,
        background .35s ease;
}


.service-item:hover{
    padding-left: 22px;
    padding-right: 22px;

    background: rgba(255,255,255,.045);
}


/* =========================================================
   NÚMERO
========================================================= */

.service-number{
    align-self: start;

    padding-top: 8px;

    font-size: 11px;
    font-weight: 600;

    letter-spacing: .12em;

    color: #c3a17b;
}


/* =========================================================
   ÍCONE
========================================================= */

.service-icon{
    width: 56px;
    height: 56px;

    display: flex;

    align-items: center;
    justify-content: center;

    border:
        1px solid rgba(255,255,255,.20);

    border-radius: 50%;

    transition:
        background .35s ease,
        border-color .35s ease,
        transform .35s ease;
}


.service-icon i{
    font-size: 21px;

    color: #ffffff;
}


.service-item:hover .service-icon{
    transform: rotate(-6deg);

    background: #c3a17b;

    border-color: #c3a17b;
}


/* =========================================================
   CONTEÚDO
========================================================= */

.service-content{
    display: grid;

    grid-template-columns:
        minmax(150px, .7fr)
        minmax(220px, 1.3fr);

    gap: 30px;

    align-items: center;
}


.service-content h3{
    margin: 0;

    font-size: 14px;
    font-weight: 700;

    letter-spacing: .12em;

    color: #ffffff;
}


.service-content p{
    max-width: 390px;

    margin: 0;

    font-size: 15px;
    line-height: 1.65;

    color: rgba(255,255,255,.66);
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px){

  .services-overview{
    width:100%;
    padding:0;
  }

  .services-overview .container{
    width:100%;
    max-width:none;
    padding:0 22px 45px;
  }

  .services-overview-grid{
    display:flex;
    flex-direction:column;
    gap:0;
  }


  /* =======================================================
     TÍTULO
  ======================================================= */

  .services-title{
    width:100%;
    margin:0 0 34px;
    text-align:left;
  }

  .services-title span{
    display:block;
    margin-bottom:16px;
	transform: translatey(-120px);  
  }

  .services-title h2{
    width:100%;
    max-width:100%;
    margin:0;
	transform: translatey(-120px);  

    font-size:40px;
    line-height:1.02;
  }

  .services-title p{
    width:100%;
    max-width:100%;

	transform: translatey(-120px);  
    margin:22px 0 0;

    font-size:15px;
    line-height:1.7;
  }


  /* =======================================================
     CADA SERVIÇO
  ======================================================= */

  .service-item{
    width:100%;
    min-height:0;

    margin:0;
    padding:22px 0;

    display:grid;
    grid-template-columns:32px 48px 1fr;

    align-items:center;
    gap:14px;

    border-top:1px solid rgba(255,255,255,.16);
  }

  .service-item:last-child{
    border-bottom:1px solid rgba(255,255,255,.16);
  }


  /* =======================================================
     NÚMERO
  ======================================================= */

  .service-number{
    width:auto;
    margin:0;

    font-size:11px;
    line-height:1;

    align-self:center;
  }


  /* =======================================================
     ÍCONE
  ======================================================= */

  .service-icon{
    width:44px;
    height:44px;

    margin:0;

    display:flex;
    align-items:center;
    justify-content:center;
  }

  .service-icon i{
    font-size:17px;
  }


  /* =======================================================
     CONTEÚDO
  ======================================================= */

  .service-content{
    width:100%;
    min-width:0;

    margin:0;
    padding:0;

    display:block;
  }

  .service-content h3{
    margin:0 0 5px;

    font-size:13px;
    line-height:1.2;
  }

  .service-content p{
    width:100%;

    margin:0;

    font-size:13px;
    line-height:1.5;

    white-space:normal;
    overflow:visible;
  }


  /* =======================================================
     REMOVE EFEITOS DO DESKTOP
  ======================================================= */

  .service-item:hover{
    padding-left:0;
    padding-right:0;

    background:transparent;
    transform:none;
  }

}

/* =========================================================
   TABLET
   768PX ATÉ 1024PX
========================================================= */

@media (min-width:768px) and (max-width:1024px){

  /* =======================================================
     SEÇÃO
  ======================================================= */

  .services-overview{
    width:100%;
    padding:80px 0;
  }

  /* =======================================================
     CONTAINER
  ======================================================= */

  .services-overview .container{
    width:100%;
    max-width:none;

    padding:0 42px;
  }

  /* =======================================================
     GRID PRINCIPAL
  ======================================================= */

  .services-overview-grid{
    display:grid;

    grid-template-columns:
      minmax(0, .9fr)
      minmax(0, 1.1fr);

    align-items:center;

    column-gap:52px;
    row-gap:0;
  }

  /* =======================================================
     TÍTULO
  ======================================================= */

  .services-title{
    width:100%;
    max-width:330px;

    align-self:center;

    text-align:left;
  }

  .services-title span{
    display:block;

    margin-bottom:24px;

    font-size:11px;
  }

  .services-title h2{
    width:100%;
    max-width:330px;

    margin:0;

    font-size:46px;
    line-height:1.02;
  }

  .services-title p{
    width:100%;
    max-width:320px;

    margin:26px 0 0;

    font-size:15px;
    line-height:1.75;
  }

  /* =======================================================
     ITENS
  ======================================================= */

  .service-item{
    width:100%;
    min-width:0;
    min-height:118px;

    margin:0;

    padding:20px 0;

    display:grid;

    grid-template-columns:
      34px
      54px
      minmax(0, 1fr);

    align-items:center;

    gap:14px;

    overflow:visible;
  }

  /* =======================================================
     NÚMERO
  ======================================================= */

  .service-number{
    width:auto;

    margin:0;

    font-size:11px;
    line-height:1;

    white-space:nowrap;
  }

  /* =======================================================
     ÍCONE
  ======================================================= */

  .service-icon{
    width:50px;
    height:50px;

    margin:0;

    flex-shrink:0;
  }

  .service-icon i{
    font-size:18px;
  }

  /* =======================================================
     CONTEÚDO
  ======================================================= */

  .service-content{
    width:100%;
    min-width:0;

    margin:0;
    padding:0;

    display:block;
  }

  .service-content h3{
    margin:0 0 7px;

    font-size:13px;
    line-height:1.2;

    white-space:normal;
  }

  .service-content p{
    width:100%;
    max-width:none;

    margin:0;

    font-size:13px;
    line-height:1.5;

    white-space:normal;
    overflow:visible;
    text-overflow:unset;
  }

  /* =======================================================
     REMOVE EFEITO DESKTOP
  ======================================================= */

  .service-item:hover{
    padding-left:0;
    padding-right:0;

    transform:none;
  }

  /* SEÇÃO */
  .team-section{
    width:100%;
    margin:0;
    padding-left:0;
    padding-right:0;
	
  }

  /* REMOVE AS MARGENS DO CONTAINER */
  .team-section > .container{
    width:100% !important;
    max-width:none !important;

    margin:0 !important;
    padding-left:0 !important;
    padding-right:0 !important;
	
  }

  /* CARD */
  .team-card{
    width:100% !important;
    max-width:none !important;
	border-radius: 0 !important;
    margin:0 !important;
  }
	
	/* =====================================================
       SEÇÃO
    ===================================================== */

    .home-cta-final {
        width: 100%;
        margin: 0;

        padding: 60px 24px;
    }


    /* =====================================================
       CONTAINER
    ===================================================== */

    .home-cta-final > .container {
        width: 100%;
        max-width: none;

        margin: 0 auto;
        padding: 0;
    }


    /* =====================================================
       CARD
    ===================================================== */

    .home-cta-final-card {
        width: 100%;
        max-width: none;

        margin: 0;

        padding: 55px 50px;

        border-radius: 42px;
    }


    /* =====================================================
       GRID / ESTRUTURA
    ===================================================== */

    .final-cta-box {
        display: grid;

        grid-template-columns: 42% 58%;
        grid-template-areas:
            "image title"
            "image text"
            "image action";

        column-gap: 42px;
        row-gap: 20px;

        align-items: center;

        width: 100%;
        min-height: auto;

        padding: 0;

        text-align: left;
    }


    /* =====================================================
       IMAGEM
    ===================================================== */

    .final-cta-image {
        grid-area: image;

        display: flex;
        align-items: center;
        justify-content: center;

        width: 100%;
        height: auto;
    }

    .final-cta-image img {
        display: block;

        width: 100%;
        max-width: 290px;
        height: auto;

        object-fit: contain;
    }


    /* =====================================================
       TÍTULO
    ===================================================== */

    .final-cta-title {
        grid-area: title;

        width: 100%;
    }

    .final-cta-title h2 {
        width: 100%;
        max-width: 100%;

        margin: 0;

        font-size: clamp(46px, 6vw, 64px);
        line-height: .92;
    }


    /* =====================================================
       TEXTO
    ===================================================== */

    .final-cta-text {
        grid-area: text;

        width: 100%;

        margin: 0;
    }

    .final-cta-text p {
        width: 100%;
        max-width: 390px;

        margin: 0;

        font-size: 15px;
        line-height: 1.65;
    }


    /* =====================================================
       BOTÃO
    ===================================================== */

    .final-cta-action {
        grid-area: action;

        width: 100%;

        margin: 4px 0 0;
    }

    .final-cta-action a {
        width: 100%;
        max-width: 360px;

        margin: 0;
    }

}

/* =========================================================
   SERVIÇOS - NOTEBOOK / DESKTOP MENOR
   1025PX ATÉ 1336PX
========================================================= */

@media (min-width:1025px) and (max-width:1336px){

  .services-overview{
    width:100%;
    padding:80px 0;
  }


  /* CONTAINER */

  .services-overview .container{
    width:100%;
    max-width:none;

    padding-left:44px;
    padding-right:44px;
  }


  /* GRID PRINCIPAL */

  .services-overview-grid{
    display:grid;

    grid-template-columns:
      minmax(320px, .8fr)
      minmax(0, 1.2fr);

    column-gap:70px;

    align-items:center;
  }


  /* TÍTULO */

  .services-title{
    width:100%;
    max-width:390px;
  }

  .services-title h2{
    max-width:390px;

    font-size:56px;
    line-height:1.02;
  }

  .services-title p{
    max-width:360px;

    font-size:15px;
    line-height:1.7;
  }


  /* ITENS */

  .service-item{
    width:100%;
    min-width:0;

    grid-template-columns:
      38px
      58px
      160px
      minmax(0, 1fr);

    gap:16px;

    padding:24px 0;

    overflow:visible;
  }


  /* NÚMERO */

  .service-number{
    font-size:11px;
    white-space:nowrap;
  }


  /* ÍCONE */

  .service-icon{
    width:54px;
    height:54px;
  }

  .service-icon i{
    font-size:19px;
  }


  /* CONTEÚDO */

  .service-content{
    display:contents;
  }

  .service-content h3{
    margin:0;

    font-size:13px;
    line-height:1.2;

    white-space:nowrap;
  }

  .service-content p{
    width:100%;
    max-width:none;

    margin:0;

    font-size:14px;
    line-height:1.55;

    white-space:normal;
    overflow:visible;
  }

}