:root {

    --default-font: "Poppins",  sans-serif;

    --heading-font: "Poppins",  sans-serif;

    --nav-font: "Poppins",  sans-serif;

  }

  

  /* Global Colors - The following color variables are used throughout the website. Updating them here will change the color scheme of the entire website */

  :root { 

    --background-color: #ffffff; /* Background color for the entire website, including individual sections */

    --default-color: #222222; /* Default color used for the majority of the text content across the entire website */

    --heading-color: #172a28; /* Color for headings, subheadings and title throughout the website */

    --accent-color: #008374; /* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */

    --surface-color: #ffffff; /* The surface color is used as a background of boxed elements within sections, such as cards, icon boxes, or other elements that require a visual separation from the global background. */

    --contrast-color: #ffffff; /* Contrast color for text, ensuring readability against backgrounds of accent, heading, or default colors. */

  }

  

  /* Nav Menu Colors */

  :root {

    --colornavbar: #10351ece;

    --verdeoscuro: #10351E;

    --verdeclaro: #1D9C00;

    --verdemasclaro: #6DDF00;

    --verdehover: #A3FF00;

  }

  

  /* Color Presets - These classes override global colors when applied to any section or element, providing reuse of the sam color scheme. */

  

  .light-background {

    --background-color: #f2f9f9;

    --surface-color: #ffffff;

  }

  

  .dark-background {

    --background-color: #060606;

    --default-color: #ffffff;

    --heading-color: #ffffff;

    --surface-color: #252525;

    --contrast-color: #ffffff;

  }

  

  .accent-background {

    --background-color: #008374;

    --default-color: #ffffff;

    --heading-color: #ffffff;

    --accent-color: #ffffff;

    --surface-color: #00b6a1;

    --contrast-color: #ffffff;

  }

  

  /* Smooth scroll */

  :root {

    scroll-behavior: smooth;

  }

  

  /*--------------------------------------------------------------

  # General Styling & Shared Classes

  --------------------------------------------------------------*/

  body {

    color: var(--default-color);

    background-color: var(--background-color);

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

  }

  

  a {

    color: var(--accent-color);

    text-decoration: none;

    transition: 0.3s;

  }

  

  a:hover {

    color: color-mix(in srgb, var(--accent-color), transparent 25%);

    text-decoration: none;

  }

  

  h1,

  h2,

  h3,

  h4,

  h5,

  h6 {

    color: var(--heading-color);

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

  }



/*--------------------------------------------------------------

# Back to top button

--------------------------------------------------------------*/

.back-to-top {

    position: fixed;

    visibility: hidden;

    opacity: 0;

    right: 15px;

    bottom: 15px;

    z-index: 996;

    background: var(--verdemasclaro);

    width: 40px;

    height: 40px;

    border-radius: 25px;

    transition: all 0.4s;

  }

  

  .back-to-top i {

    font-size: 28px;

    color: var(--verdeoscuro);

    line-height: 0;

  }

  

  .back-to-top:hover {

    background: var(--verdeoscuro);

  }

  

  .back-to-top:hover i {

    color: var(--verdehover);

  }

  

  .back-to-top.active {

    visibility: visible;

    opacity: 1;

  }

  

  /*--------------------------------------------------------------

  # Whatsapp button

  --------------------------------------------------------------*/

  .btn-ws {

    position: fixed;

    visibility: hidden;

    opacity: 0;

    right: 15px;

    bottom: 60px;

    z-index: 996;

    background: var(--verdemasclaro);

    width: 60px;

    height: 60px;

    border-radius: 30px;

    transition: all 0.4s;

  }

  

  .btn-ws i {

    font-size: 35px;

    color: var(--verdeoscuro);

    /*line-height: 1.6;*/

  }

  

  .btn-ws:hover {

    background: #09CD56;

  }

  

  .btn-ws:hover i {

    color: #fff;

  }

  

  .btn-ws.active {

    visibility: visible;

    opacity: 1;

  }

  

  /*--------------------------------------------------------------

  # Preloader

  --------------------------------------------------------------*/

  #preloader {

    position: fixed;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    z-index: 9999;

    overflow: hidden;

    background: var(--verdeoscuro);

  }

  

  #preloader:before {

    content: "";

    position: fixed;

    inset: 0;

    margin: auto;

    border: 6px solid var(--verdemasclaro);

    border-top-color: var(--verdeoscuro);

    border-bottom-color: var(--verdeoscuro);

    border-radius: 50%;

    width: 90px;

    height: 90px;

    -webkit-animation: animate-preloader 1s linear infinite;

    animation: animate-preloader 1s linear infinite;

  }

  

  #preloader .logo {

    position: absolute;

    width: 10vh;

    height: 10vh;

    inset: 0;

    margin: auto;

    z-index: 5;

  }

  

  @-webkit-keyframes animate-preloader {

    0% {

      transform: rotate(0deg);

    }

    100% {

      transform: rotate(360deg);

    }

  }

  

  @keyframes animate-preloader {

    0% {

      transform: rotate(0deg);

    }

    100% {

      transform: rotate(360deg);

    }

  }

  

  /*--------------------------------------------------------------

  # Disable aos animation delay on mobile devices

  --------------------------------------------------------------*/

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

    [data-aos-delay] {

      transition-delay: 0 !important;

    }

  }

  

  /*--------------------------------------------------------------

  # Header

  --------------------------------------------------------------*/

  #header {

    transition: all 0.5s;

    z-index: 997;

    padding: 40px 0;

  }

  

  #header.header-scrolled, #header.header-inner-pages {

    background: var(--colornavbar);

    padding: 6px;

  }

  

  #header .logo {

    font-size: 18px;

    margin: 0;

    padding: 0;

    font-weight: 100;

    letter-spacing: 2px;

    animation: fadeInDown 1.3s both 1.5s;

  }

  

  #header .logo img {

    max-height: 50px; 

    transition: all 0.3s ease-in-out 0s;

  }

  

  #header .logo img:hover {

    max-height: 60px; 

  }

  

  #header.header-scrolled .logo img{

    max-height: 30px;

    /*top: 35px;*/

  }

  

  #header.header-scrolled .logo img:hover{

    max-height: 30px;

    /*top: 35px;*/

  }

  

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

    #header {

      padding: 6px;

    }

    #header .logo img {

      max-height: 25px;

      padding: 2px;

    }

    #header .logo a {

      display: none;

    }

    #header .logo a span {

      display: none;

    }

  

  }

  

  /*--------------------------------------------------------------

  #  Get Startet Button

  --------------------------------------------------------------*/

  .get-started-btn {

    color: #fff;

    border-radius: 4px;

    margin-top: 20px;

    padding: 4px 25px 4px 25px;

    white-space: nowrap;

    transition: 0.3s;

    font-family: "Poppins";

    font-size: 14px;

    display: inline-block;

    border: 2px solid var(--verdeclaro);

    animation: fadeInDown 1.3s both 1.5s;

  }

  

  .get-started-btn:hover {

    background: var(--verdemasclaro);

    color: var(--verdeoscuro);

  }

  

  #header.header-scrolled .get-started-btn {

    margin-top: 0;

  }

  

  @media (max-width: 992px) {

    .get-started-btn {

      font-size: 12px;

      padding: 4px 20px 4px 20px;

      margin-right: 15px;

    }

  }

  

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

    .get-started-btn {

      font-size: 12px;

      padding: 4px 20px 4px 20px;

      margin-top: 0;

      margin-left: 20px;

    }

  }



  /*--------------------------------------------------------------

# Sections General

--------------------------------------------------------------*/

section {

    padding: 60px 0;

    overflow: hidden;

  }

  

  .section-title {

    padding-bottom: 40px;

  }

  

  .section-title h2 {

    position: absolute;

    left: 45px;

    font-size: 14px;

    font-weight: 500;

    padding: 0;

    line-height: 1px;

    margin: 0 0 5px 0;

    letter-spacing: 2px;

    text-transform: uppercase;

    color: #aaaaaa;

    font-family: "Poppins", sans-serif;

  }

  

  .section-title img {

    width: 50px;

    position: absolute;

    top: -26px;

    left: 0;

  }

  

  .section-title p {

    margin: 0;

    font-size: 36px;

    font-weight: 700;

    text-transform: uppercase;

    font-family: "Poppins", sans-serif;

    color: var(--verdeoscuro);

  }

  

  @media (max-width: 768px) {

    .section-title h2{

      font-size: 12px;

    }

    

    .section-title p {

      font-size: 24px;

    }

  }

  

  /*--------------------------------------------------------------

  # Navigation Menu

  --------------------------------------------------------------*/

  /**

  * Desktop Navigation 

  */

  .navbar {

    padding: 0;

    animation: fadeInDown 1.3s both 1.5s;

  }

  

  .navbar ul {

    margin: 0;

    padding: 0;

    display: flex;

    list-style: none;

    align-items: center;

  }

  

  .navbar li {

    position: relative;

    margin-top: 20px;

  }

  

  #header.header-scrolled .navbar li {

    margin-top: 0;

  }

  

  .navbar li + li {

    margin-left: 30px;

  }

  

  .navbar a {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 0;

    font-family: "Poppins", sans-serif;

    font-size: 14px;

    font-weight: 400;

    color: #fff;

    white-space: nowrap;

    transition: 0.3s;

  }

  

  .navbar a i {

    font-size: 12px;

    line-height: 0;

    margin-left: 5px;

  }

  

  .navbar a img {

    display: none;

  }

  

  .navbar a:before {

    content: "";

    position: absolute;

    width: 0;

    height: 2px;

    bottom: -4px;

    left: 0;

    background-color: #fff;

    visibility: hidden;

    transition: all 0.3s ease-in-out 0s;

  }

  

  .navbar a:hover:before, .navbar li:hover > a:before, .navbar .active:before {

    visibility: visible;

    width: 25px;

  }

  

  .navbar a:hover, .navbar .active, .navbar li:hover > a {

    color: var(--verdemasclaro);

  }

  .navbar .resaltado {
  color: #fff;
  border-radius: 4px;
  margin-top: 0;
  padding: 4px 25px 4px 25px;
  white-space: nowrap;
  transition: 0.3s;
  font-family: "Poppins";
  font-size: 14px;
  display: inline-block;
  border: 2px solid var(--verdeclaro);
  animation: fadeInDown 1.3s both 1.5s;
}

.navbar .resaltado:hover {
  background: var(--verdemasclaro);
  color: var(--verdeoscuro);
}

  /**

  * Mobile Navigation 

  */

  .mobile-nav-toggle {

    color: #fff;

    font-size: 28px;

    cursor: pointer;

    display: none;

    line-height: 0;

    transition: 0.5s;

  }

  

  @media (max-width: 991px) {

    .mobile-nav-toggle {

      display: block;

    }

    .navbar ul {

      display: none;

    }

  }

  

  .navbar-mobile {

    position: fixed;

    overflow: hidden;

    top: 0;

    right: 0;

    left: 0;

    bottom: 0;

    background: rgba(0, 0, 0, 0.8);

    transition: 0.3s;

  }

  

  .navbar-mobile .mobile-nav-toggle {

    position: absolute;

    top: 6px;

    right: 15px;

  }

  

  .navbar-mobile ul {

    display: block;

    position: absolute;

    top: 55px;

    right: 15px;

    bottom: 15px;

    left: 15px;

    padding: 10px 0;

    overflow-y: auto;

    transition: 0.3s;

    border: 2px solid rgba(255, 255, 255, 0.2);

  }

  

  .navbar-mobile li {

    padding: 12px 20px;

  }

  

  .navbar-mobile li + li {

    margin: 0;

  }

  

  .navbar-mobile a {

    font-size: 16px;

    position: relative;

  }



/*--------------------------------------------------------------

# Hero Section

--------------------------------------------------------------*/

.hero {

    width: 100%;

    position: relative;

    padding: 140px 0 0 0;

    background-color: var(--verdeoscuro);

    text-align: center;

  }

  

  .hero .container {

    position: relative;

    z-index: 3;

  }

  

  .hero h2 {

    font-size: 48px;

    font-weight: 700;

    margin-bottom: 20px;

  }

  

  .hero h2 .accent {

    color: var(--conrast-color);

  }



  .hero .eslogan {

    text-align: left;

  }

  

  .hero p {

    color: color-mix(in srgb, var(--default-color), transparent 40%);

    font-weight: 400;

    margin-bottom: 30px;

  }

 

 .hero .videophone {

    display: none;

 }

    

  @media (max-width: 768px) {

    .hero h2 {

      font-size: 36px;

    }

  

    .hero .btn-get-started,

    .hero .btn-watch-video {

      font-size: 14px;

    }



    .hero .video {

       display: none;

      }



    .hero .videophone{

        display: flex;

        border-radius: 10px;

    }



    .hero .videophone video{

        border-radius: 10px;

    }

  }

  

  .hero .icon-boxes {

    padding-bottom: 60px;

    z-index: 4;

  }



  .hero .video video{

    border-radius: 20px;

  }

    

  @media (min-width: 1200px) {

    .hero .icon-boxes:before {

      content: "";

      position: absolute;

      bottom: 0;

      left: 0;

      right: 0;

      height: calc(50% + 20px);

      background-color: var(--default-color);

      border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);

    }

  }

  

  .hero .icon-box {

    padding: 60px 30px;

    position: relative;

    overflow: hidden;

    background: var(--background-color);

    box-shadow: 0 0 29px 0 rgba(0, 0, 0, 0.1);

    transition: all 0.3s ease-in-out;

    border-radius: 8px;

    z-index: 1;

    height: 100%;

    width: 100%;

    text-align: center;

  }

  

  .hero .icon-box .title {

    font-weight: 700;

    margin-bottom: 15px;

    font-size: 24px;

  }

  

  .hero .icon-box .title a {

    color: color-mix(in srgb, var(--default-color), transparent 20%);

    transition: 0.3s;

  }

  

  .hero .icon-box .icon {

    margin-bottom: 20px;

    padding-top: 10px;

    display: inline-block;

    transition: all 0.3s ease-in-out;

    font-size: 48px;

    line-height: 1;

    color: color-mix(in srgb, var(--default-color), transparent 20%);

  }

  

  .hero .icon-box:hover {

    background-color: color-mix(in srgb, var(--background-color), white 10%);

  }

  

  .hero .icon-box:hover .title a,

  .hero .icon-box:hover .icon {

    color: var(--contrast-color);

  }

 

  /*--------------------------------------------------------------

# About Section

--------------------------------------------------------------*/

.about h3 {

    font-weight: 700;

    font-size: 28px;

    margin-bottom: 20px;

    color: var(--verdeoscuro);

  }



.about h4 {

    color: var(--verdeclaro);

}

  

  .about .fst-italic {

    color: color-mix(in srgb, var(--default-color), var(--contrast-color) 50%);

  }

  

  .about .content ul {

    list-style: none;

    padding: 0;

  }

  

  .about .content ul li {

    padding: 0 0 10px 30px;

    position: relative;

  }

  

  .about .content ul i {

    position: absolute;

    font-size: 20px;

    left: 0;

    top: -3px;

    color: var(--accent-color);

  }



  .about p{

    text-align: justify;

  }

  .about span{
    font-weight: 700;
  }

  

  .about .content p:last-child {

    margin-bottom: 0;

  }

  

  .about .pulsating-play-btn {

    position: absolute;

    left: calc(50% - 47px);

    top: calc(50% - 47px);

  }



  .about .logogray {

    position: absolute;

    filter: grayscale(1);

    opacity: 30%;

    top: 19%;

    z-index: -1;

  }



  .about img {

    border-radius: 20px;

  }



  /*--------------------------------------------------------------

# Team

--------------------------------------------------------------*/

.team {

    background: #fff;

    padding-top: 30px;

    

  }

  

  .team .member {

    margin-bottom: 10px;

    overflow: hidden;

    border-radius: 10px;

    background: #fff;

    box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.6);

  }

  

  .team .member .member-img {

    position: relative;

    overflow: hidden;

  }

  

  /*.team .member .social {

    position: absolute;

    left: 0;

    bottom: 30px;

    right: 0;

    opacity: 0;

    transition: ease-in-out 0.3s;

    text-align: center;

  }*/

  

  /*.team .member .social a {

    transition: color 0.3s;

    color: #151515;

    margin: 0 3px;

    border-radius: 4px;

    width: 36px;

    height: 36px;

    background: rgba(255, 255, 255, 0.8);

    transition: ease-in-out 0.3s;

    color: #484848;

    display: inline-flex;

    justify-content: center;

    align-items: center;

  }*/

  

  /*.team .member .social a:hover {

    color: #151515;

    background: #E9D03F;

  }*/

  

  /*.team .member .social i {

    font-size: 18px;

    line-height: 0;

  }*/

  

  .team .member .member-info {

    padding: 25px 15px;

  }

  

  .team .member .member-info h4 {

    font-weight: 700;

    margin-bottom: 5px;

    font-size: 18px;

    color: var(--verdeoscuro);

    font-family: "Poppins";

  }

  

  .team .member .member-info span {

    display: block;

    font-size: 13px;

    font-weight: 400;

    color: #aaaaaa;

  }

  

  .team .member .member-info p {

    font-style: italic;

    font-size: 14px;

    line-height: 26px;

    color: #777777;

  }

  

  /*.team .member:hover .social {

    opacity: 1;

    bottom: 15px;

  }*/

  

  .team .phone {

    display: none;

  }

  

  @media (max-width: 768px){

    .team {

      padding-bottom: 0;

      margin-left: 28px;

      margin-bottom: 0;

    }

  

    .team .web {

      display: none;

    }

    

    .team .phone {

      display: flex;

    }

  }



  /*--------------------------------------------------------------

# Footer

--------------------------------------------------------------*/

#footer {

    background: black;

    padding: 0 0 30px 0;

    color: #fff;

    font-size: 14px;

  }

  

  #footer .footer-top {

    background: var(--verdeoscuro);

    border-bottom: 1px solid var(--verdeclaro);

    padding: 40px 0 0 0;

  }

  

  #footer .footer-top .footer-info {

    margin-bottom: 10px;

  }

  

  #footer .footer-top .footer-info h3 {

    font-size: 28px;

    margin: 0 0 20px 0;

    padding: 2px 0 2px 0;

    line-height: 1;

    font-weight: 100;

    }

  

  #footer .footer-top .footer-info .logo img {

    max-height: 55px;

    margin-bottom: 20px;

  }

  

  #footer .footer-top .footer-info h3 span {

    font-weight: 700;

    text-decoration: 4px solid;

    text-decoration-line: underline;

    text-underline-offset: 6px;

  }

  

  #footer .footer-top .footer-info p {

    font-size: 14px;

    line-height: 24px;

    margin-bottom: 0;

    font-family: "Raleway", sans-serif;

    color: #fff;

  }

  

  #footer .footer-top .social-links a {

    font-size: 25px;

    display: inline-block;

    background: var(--verdeoscuro);

    color: #fff;

    line-height: 1;

    padding: 8px 0;

    margin-right: 4px;

    border-radius: 4px;

    text-align: center;

    width: 40px;

    height: 40px;

    transition: 0.3s;

  }

  

  #footer .footer-top .social-links a:hover {

    background: var(--verdemasclaro);

    color: var(--verdeoscuro);

    text-decoration: none;

  }

  

  #footer .footer-top h4 {

    font-size: 16px;

    font-weight: 600;

    color: #fff;

    position: relative;

    padding-bottom: 12px;

  }

  

  #footer .footer-top .footer-links {

    margin-bottom: 0;

  }

  

  #footer .footer-top .footer-links h4{

    font-family: "Poppins";

  }

  

  #footer .footer-top .footer-links ul {

    list-style: none;

    padding: 0;

    margin: 0;

  }

  

  #footer .footer-top .footer-links ul i {

    padding-right: 2px;

    color: var(--verdemasclaro);

    font-size: 18px;

    line-height: 1;

  }

  

  #footer .footer-top .footer-links ul li {

    padding: 10px 0;

    display: flex;

    align-items: center;

  }

  

  #footer .footer-top .footer-links ul li:first-child {

    padding-top: 0;

  }

  

  #footer .footer-top .footer-links ul a {

    color: #fff;

    transition: 0.3s;

    display: inline-block;

    line-height: 1;

  }

  

  #footer .footer-top .footer-links ul a:hover {

    color: var(--verdemasclaro);

  }

  

  #footer .footer-top .footer-links .btn{

    margin-left: 20px;

    margin-bottom: 0;

    color: transparent;

    font-family: "Poppins";

    font-size: 15px;

    font-weight: 500;

  }

  

  #footer .footer-top .footer-links .btn:hover {

    color: #fff;

    border-color: #fff;

  }

  

  #footer .footer-top .footer-logo img {

    max-width: 200px;

    margin-left: 180px;

  }

  

  #footer .copyright {

    text-align: center;

    padding-top: 30px;

  }

  

  #footer .credits {

    padding-top: 10px;

    text-align: center;

    font-size: 13px;

    color: #fff;

  }

  

  @media (max-width: 768px){

    #footer .footer-top .footer-logo img {

      max-width: 20vh;

      margin-top: -80%;

    }

  }