:root {
  --color-primary: #88F26B;
  --color-secondary: #7AD95F;
  --color-tertiary: #34592A;
  --color-quaternary: #66A649;
  --color-background: #0D0D0D;
}

html{
    scroll-behavior: smooth;
    overflow-x: hidden;
}
body{
    margin: 0; /* Remove a margem padrão do navegador */
    position: relative;
    background-color: var(--color-background);
    box-sizing: border-box;
}
h1, h2, h3, h4, p, span, li, td, th{
    color: #a29484;
}

.description-title{
    color: white;
}
h2{
    color: var(--color-quaternary);
}
h3{
    color: var(--color-primary);
}
img{
    max-width: 100%;
}
a,
textarea,
input, th,li, span{
    font-family: "Quicksand", sans-serif;
    font-weight: 700;
    text-decoration: none;
    transition: all .7s;
}
p, td{
    font-family: "Cairo", sans-serif;
    font-size: clamp(1rem, 5vw, 1.5rem);
}
h2{
    font-size: clamp(1rem, 7vw, 1.7rem);
}
h3{
    font-size: clamp(1rem, 6vw, 1.6rem);
}
h2, h3, h4{
    font-family: "Cairo", sans-serif; 
}
ul{
    list-style: none;
    padding: 0;
}
button{
    border: none;
    text-transform: uppercase;
    cursor: pointer;
    font-family: "Cairo", sans-serif;
    font-weight: 700;
    transition: all .7s;
    font-size: large;
}

.main-header{
    position: sticky;
    top: 0;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background-color: black;
    z-index: 50;
    flex-wrap: wrap;
    gap: 1.5rem;
    box-sizing: inherit;
}
.logo{
    display: flex;
    align-items: center;
}
.wrapp-logo{
    display: flex;
    column-gap: 1rem;
}
.logo img{
    width: 50px;
    height: 50px;
}
.name-logo{
    font-family: "Cairo", sans-serif;
    color: white;
    font-size: clamp(1.1rem, 3vw, 1.5rem);
    line-height: 1;
}
.name-logo span{
    background: #2656B0;
    background: linear-gradient(135deg, #2656B0, #C5030A);  
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}
header .navigation{
   margin-right: 1rem;
}
header .navigation ul{
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}
header .navigation ul li{
    list-style: none;
    display: flex;
    align-items: center;
}
header .navigation ul li a{
    text-decoration: none;
    color: #74A60A;
    text-transform: uppercase;
    transition: all .7s;
    margin: .5rem;
}
header .navigation ul li.dropdown button{
    background: #2656B0;
    background: linear-gradient(135deg, #2656B0, #C5030A);  
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}
header .navigation ul li:hover a,
header .navigation ul li:active a{
    color: #b4db29;
}
/*teste*/

/*teste*/
.wrapp-contact{
    border: solid 1px #74A60A;
    padding: .5rem;
    z-index: 50;
}
.wrapp-contact:hover a{
    color: #74A60A;
}
.wrapp-contact a{
    color: #D9F27E;
}
a.button-visit:hover{
    color: #74A60A !important;
}
.content-main .section-01{
    background-image: url(./img/skyscraper.jpg);
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    row-gap: 1.5rem;
    height: 100vh;
    /*justify-content: end;*/
    padding: 1rem;
}
.content-main .section-01 h1{
    font-family: "Workbench", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-size: clamp(1.5rem, 5vw, 3.5rem);
    text-transform: capitalize;
    color: var(--color-primary);
    background-color: var(--color-tertiary);
    display: flex;
    align-self: start;
    padding: 1rem;
}

.content-main .section-01 a{
    border: solid 1px var(--color-quaternary);
    color: var(--color-primary);
    background-color: var(--color-tertiary);
    align-self: flex-start;
    padding: 1rem;
    filter: drop-shadow(black 2px 4px 6px);
    backface-visibility: hidden;
}
.content-main .section-02{
    padding: 1rem;
}
.content-main .section-02 h2{
    text-align: center;
}
.section-01 p:nth-of-type(1),
.section-01 p:nth-of-type(2) {
    backdrop-filter: brightness(0.5);
    padding: 1rem;
}
.section-01 p{
    font-size: clamp(1.1rem, 6vw, 3rem);
}
section:nth-of-type(3) img{
    padding: 2rem;
}

.wrapp-consultoria{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
.consultoria{
    display: flex;
    flex-direction: column;
    width: 50%;
    row-gap: 1rem;
    justify-content: center;
    min-width: 20rem;
}
.consultoria a{
    background-color: var(--color-tertiary);
    padding: .5rem 1rem;
    align-self: flex-start;
    color: var(--color-primary);
    border: solid 1px var(--color-quaternary);
}
.img-consultoria{
    width: 50%;
}
.services{
    padding: 1rem;
    display: flex;
    flex-direction: column;
    row-gap: 3rem;
}
.services h2{
    text-align: center;
}
.cards{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    row-gap: 3rem;
}
.card{
    width: 20rem;
}
.card span{
    color: #74A60A;
}
section h2:nth-last-child(1){
    color: #D9F27E;
}
.newsletter{
    background: var(--color-quaternary);
    background: linear-gradient(135deg, var(--color-quaternary), var(--color-tertiary));
    padding: 2rem;
}
.newsletter h2{
    color: #D9F27E;
    text-align: center;
    font-size: clamp(1.1rem, 7vw, 3rem);
}
.newsletter p{
    color: #D9F27E;
}
.newsletter form{
    display: flex;
    flex-direction: column;
    row-gap: 1rem;
}
.newsletter form input:nth-of-type(3){
    align-self: center;
    padding: .5rem 1rem;
    border: #74A60A solid 2px;
    background: none;
    color: #D9F27E;
    text-transform: uppercase;
    letter-spacing: 2px;
    cursor: pointer;
}
.newsletter input:nth-of-type(1){
    border: none;
    padding: .5rem;
    background-color: #D9F27E;
    color: #204034;
    text-transform: capitalize;
}
.newsletter input:nth-of-type(1):focus-visible{
    border: none;
    outline:none;
}
.newsletter input:nth-of-type(1)::placeholder{
    color: #204034;
    text-transform: uppercase;
}

/* Estilo para a seção de depoimentos */
.testimonials {
    padding: 2rem;
    color: #D9F27E;
}

.testimonials h2 {
    text-align: center;
    font-size: clamp(1.5rem, 5vw, 2.5rem);
    margin-bottom: 2rem;
    color: #74A60A;
}

.testimonial-cards {
    overflow: auto;
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
    max-height: 25rem;
}

.testimonial-card {
    display: flex;
    flex-direction: column;
    row-gap: 1rem;
    background-color: var(--color-quaternary);
    padding: 1.5rem;
    border-radius: 10px;
    box-shadow: rgb(0 0 0 / 76%) 5px 5px 15px inset, rgb(255 255 255 / 48%) -5px -5px 15px inset;
    max-width: 350px;
    text-align: center;
}

.testimonial-card p {

    color: var(--color-background);
}

.testimonial-card span {
    background: #2656B0;
    background: linear-gradient(135deg, #2656B0, #C5030A);  
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent; 
}


.certification{
    position: relative;
    top: calc(50vh - 100px);
}
.certification p >a{
    color: #D9F27E;	
}
.certification h1{
    color: var(--color-primary);
    font-family: "Cairo", sans-serif;
    font-size: clamp(1.1rem, 7vw, 3rem);
    text-align: center;
    border: dotted 1px;
}
.wrapp-certification{
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    justify-content: center;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    
}
.wrapp-certification h2, .wrapp-certification span{
    width: 400px;
    text-align: justify;
    color: var(--color-primary);
}
.wrapp-certification img{
    width: 50%;
    min-width: 300px;
    display: block;
    margin: 0 auto;
}
.wrapp-certification img:hover{
  transform: scale(1.1);
  transition: all .3s;
}
.certification-news{
    position: relative;
    top: calc(60vh - 100px);
}
.certification-footer{
    position: relative;
    top: calc(70vh - 100px);
}
footer{
    display: flex;
    flex-direction: column;
}

.social-icons h2{
    text-align: center;
    padding: 1rem;
    font-size: clamp(1.1rem, 7vw, 3rem);
}
.wrapp-icons{
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    padding: 2rem;
}
.wrapp-icons .icon{
    display: flex;
    align-items: center;
    padding: 1rem;
    column-gap: .5rem;
}
.wrapp-icons .title-icon{
    font-family: "Cairo", sans-serif;
}
.wrapp-icons .title-icon:nth-of-type(1){
    color: #D9F27E;
}
.copyright{
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: solid 1px #204034;
    padding: .5rem;
}
.copyright p{
    background: #2656B0;
    background: linear-gradient(135deg, #2656B0, #C5030A);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}

.copyright span{
    color: #a29484;
}
/**About Page*/
.about{
    text-align: center;
}
.about p{
    font-family: "Cairo", sans-serif;
    font-size: clamp(1.1rem, 6vw, 3rem);
    backdrop-filter: brightness(0.5);
    padding: 1rem;
}
.about p > a{
    color: #74A60A;
}
.about p > a:hover{
    color: #b4db29;
}
.about-main,
.contact-newsletter{
    position: relative;
    top: calc(70vh - 100px);
}
.about-modify{
    top: calc(40vh - 100px);
}
section.contact-newsletter p{
    font-size: clamp(1rem, 3vw, 1.4rem) !important;
}
.about-footer{
    position: relative;
    top: 16rem;
}
.contact-footer{
    position: relative;
    top: calc(70vh - 10px);
}
.contact-form{
    position: relative;
    top: calc(40vh - 10px);
    display: flex;
    flex-direction: column;
    row-gap: 2rem;
    width: 75%;
    margin: auto;
    background: #74A60A;
    background: linear-gradient(135deg, #74A60A, #204034);
    padding: 3rem;
    border-radius: 5px;
}
.contact-form input,
.contact-form textarea{
    display: flex;
    width: 100%;
    background-color: #D9F27E;
    padding: .5rem;
    outline: none;
    border: #74A60A solid 2px;
    border-radius: 5px;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder{
    color: #204034;
}
.contact-form input:nth-of-type(3){
    align-self: center;
    width: auto;
    background-color: #204034;
    color: #D9F27E;
    padding: .5rem 1rem;
}
.contact-submit{
    cursor: pointer;
}
.about h1{
    font-family: "Cairo", sans-serif;
    color: #74A60A;
    font-size: clamp(1.2rem, 9vw, 5rem);
}
.line {
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    padding: 2rem 0;
}
.line span{
    font-family: "Cairo", sans-serif;
    font-size: clamp(1.1rem, 7vw, 2rem);
    color: #74A60A;
}
.line-before {
    width: 33%;
    height: 1px;
    background-color: #D9F27E;
}
.line-after {
    width: 33%;
    height: 1px;
    background-color: #D9F27E;
}
.categories {
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}
.categories section {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    row-gap: 1.5rem;
    align-self: self-start;
}
.categories section p {
    display: flex;
    align-items: center;
    column-gap: .5rem;
}
.categories section p span{
    color: #74A60A;
}
/**icons google */
/*Dropdown menu*/
.dropdown-content {
    position: fixed;
    top: 0;
    left: -100%;
    height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    row-gap: 1rem;
    background-color: #204034;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 100;
  }
  .dropdown-content button {
    background-color: #204034;
    color: #D9F27E;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: center;
    border: solid 1px #74A60A;
  }
  .dropdown-content a {
    color: #D9F27E;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: center;
  }
  
  .dropdown-content a:hover {background-color: #74A60A;}
  
  .dropdown:hover .dropdown-content {display: block;}
  .dropdown:hover .dropbtn {background-color: #74A60A;}
  /*icons*/
  .material-icons.icon{
    font-size: clamp(1rem, 7vw, 4rem);
    color: #74A60A;
  }
  .material-icons.icon:hover{
    color: #D9F27E;
  }
  .material-icons.icon:active{
    color: #b4db29;
  }
  .material-icons.icon:before{
    font-size: clamp(1rem, 7vw, 4rem);
  }
  .material-icons.icon:hover:before{
    color: #D9F27E;
  }
  .material-icons.icon:active:before{
    color: #b4db29;
  }
  .material-icons.icon:before{
    font-size: clamp(1rem, 7vw, 4rem);
  }
  .material-icons.icon:hover:before{
    color: #D9F27E;
  }
  .material-icons.icon:active:before{
    color: #b4db29;
  }
  .material-icons.icon:before{
    font-size: clamp(1rem, 7vw, 4rem);
  }
  .material-icons.icon:hover:before{
    color: #D9F27E;
  }
  .material-icons.icon:active:before{
    color: #b4db29;
  }
  .material-icons.icon:before{
    font-size: clamp(1rem, 7vw, 4rem);
  }
  .material-icons.icon:hover:before{
    color: #D9F27E;
  }
  .material-icons.icon:active:before{
    color: #b4db29;
  }

.material-icons.config-icon{
    font-size: clamp(1rem, 7vw, 4rem);
}
.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;  /* Preferred icon size */
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
  
    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;
    /* Support for Safari and Chrome. */
    text-rendering: optimizeLegibility;
  
    /* Support for Firefox. */
    -moz-osx-font-smoothing: grayscale;
  
    /* Support for IE. */
    font-feature-settings: 'liga';
  }
  .go-top-button span{
    background: #2656B0;
    background: linear-gradient(135deg, #2656B0, #C5030A);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
  }
  .go-top-button {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 100;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease-in-out;
  }
  .go-top-button.show-go-top {
      opacity: 1;
      pointer-events: auto;
  }
  .go-top-button .arrow {
    font-size: clamp(2.5rem, 6vw, 3rem);
  }
  .logo-partner img{
    transition: all .7s;
  }
  /**Media Query*/
  @media (max-width: 1024px)  {
    .img-consultoria,
    .consultoria{
        width: 100%;
    }  
    .line-before, .line-after {
        display: none;
    }
    .categories {
        flex-direction: column;
    }
    
  }
  /*test animation*/
  .chat-conversSoul {
      display: flex;
      justify-content: center;
      padding: 20px 0; /* Add some padding */
  }
  
  .chat-conversSoul {
      position: fixed;
      top: 50%;
      left: -100%; /* Initially off-screen */
      transform: translateY(-50%);
      width: 80%; /* Adjust as needed */
      height: 500px; /* Adjust as needed */
      z-index: 1000; /* Ensure it's on top */
      transition: left 0.5s ease; /* Smooth transition */
  }
  
  .chat-conversSoul iframe {
      width: 100%;
      height: 100%;
      border: none;
  }
  
  .hidden-chat {
      left: -100%;
  }
  
  .show-chat {
      left: 0; /* Move to center */
  }
  
  #toggleChatButton {
      position: fixed;
      bottom: 50vh;
      right: 1rem;
      z-index: 1001; /* Ensure it's on top of the chat */
      background-color: var(--color-primary);
      color: var(--color-background);
      padding: 10px 15px;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      font-family: "Cairo", sans-serif;
      font-weight: 700;
      transition: all 0.3s ease;
  }
  
  #toggleChatButton:hover {
      background-color: var(--color-secondary);
  }
