* {
   
    font-family: 'Nunito Sans', sans-serif;}

    @import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css');

.container-nav {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 8px 0px;
    gap: 10px;
  justify-content: center;
    width: 100%;
  z-index: 99999;
    height: 88px;
    left: 0px;
   position: fixed;
    background-color: #fff;
    margin: 0 auto;
  box-shadow: 0px 4px 8px 0px rgba(12, 13, 20, 0.08);
  }

  .dropdown.active > a {
    color: blue;
  }
  

  
  nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
    background-color: #fff;
   max-width: 1076px;
    width:100%;
    height: 88px;
    left: 0px;
    top: 3px;
    display: flex;
    align-items: center;
    gap: 32px;
       justify-content: space-between;
  }

.grade-itens {
display: flex;
    gap: 32px;
    align-content: center;
    align-items: center;
}

}
  
  nav li {
    display: inline-block;
    margin-right: 10px;
  }
  
  nav li a {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #2d2c2c;
    font-size: 16px;
    line-height: 50px;
    text-align: center;
    text-decoration: none;
    font-family: 'Nunito Sans';
font-style: normal;
font-weight: 600;
font-size: 16px;
line-height: 100%;
    padding: 16px 0px;
  }

  nav li a:hover{
color: #0025E0 !important; text-decoration: none;

  }

  #chevron-menu:hover{color: #0025E0 !important;}

  .rotated {
    transform: rotate(180deg);
  }
  
  .dropdown-toggle.active i {
    color: #0025E0;
  }
  .active {
    color: #0025E0;
  }

  .dropdown-menu a.active {
    color: #0025E0; !important;
  }
  
  .dropdown {
    position: relative;
  }
  
  .dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    display: none;
    background: #FFFFFF;
    min-width: 200px;
    padding: 32px;
    gap: 40px;

  }
  
  .dropdown-item {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 30px;
    margin-bottom: 10px;
  }
  
  .dropdown-item a {
    text-decoration: none;
    color: #333;
    font-size: 16px;
  }
  
  svg {
    transition: transform 0.3s ease-in-out;
  }
  
  svg.rotated {
    transform: rotate(180deg);
  }

  .rotated {
    transform: rotate(180deg);
  }

  .dropdown:hover .dropdown-menu {
    display: flex;
    width: 100%;
    max-width: 751px;
height: 374px;
  }

  .dropdown-toggle i {
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
/* botões menu */


  .button-menu {
display: flex;
flex-direction: row;
align-items: center;
padding: 0px;
gap: 24px;
    margin-left: 86px;
  }

.button-entrar {
    width: 95px;
    height: 48px;
    border-radius: 500px;
    color: #0025E0;
    font-family: 'Nunito Sans';
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
     
}

.button-entrar:hover {background-color:#EBECF5; text-decoration:none;}

.button-criar {

    width: 132px;
    height: 48px;
    background: #0025E0;
    border-radius: 500px;
    color: #fff !important;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-family: 'Nunito Sans';
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 100%;
}

.button-criar:hover {background-color: #5872F5; text-decoration:none;}

/* botões menu */


/* Menu interno varejo */

#dropdown-retail {

    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    padding: 32px;
    gap: 40px;
    z-index: 9999;
    width: 751px;
    height: 411px;

}

#dropdown-industry {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    padding: 32px;
    gap: 40px;
    width: 535px;
    height: 374px;
    background: #FFFFFF;
    flex: none;
    order: 0;
    flex-grow: 0;
   z-index: 9999;

}

#varejo-banner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    justify-content: center;
    width: 263px;
    height: 310px;

    background-color: #F7F9FF;
border-radius: 16px;
flex: none;
order: 0;
flex-grow: 0;
}

.contents-banner {
    display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
padding: 0px 24px;

width: 263px;
height: 191px;

border-radius: 0px 12px 12px 0px;

flex: none;
order: 1;
flex-grow: 0;
}

.titulo-banner {
    width: 233px;
    height: 32px;  
    font-family: 'Nunito Sans';
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 100%;
    margin-bottom: 16px;  
    color: #393B47 !important;
}

.titulo-banner h4 {
font-weight: 700 !important;

}

.contents-banner p {
width: 215px;
height: 63px;
font-family: 'Nunito Sans';
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 21px;
color: #67697A;
}

.button-banner-nav {
display: flex;
flex-direction: row;
align-items: center;
padding: 0px;
gap: 4px;
width: 200px;
height: 16px;
font-family: 'Nunito Sans';
font-style: normal;
font-weight: 600;
font-size: 14px !important;
line-height: 100%;
color: #0025E0 !important;
}
.button-banner-nav:hover, .button-banner-nav-ind:hover{
    text-decoration-line: underline;
    color: #5872F5 !important;}


.button-banner-nav-ind {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px;
    gap: 4px;
    width: 224px;
    height: 16px;
    font-family: 'Nunito Sans';
    font-style: normal;
    font-weight: 600;
    font-size: 14px !important;
    line-height: 100%;
    color: #0025E0 !important;
    text-align: left;

}


#item2-varejo {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 8px;
    width: 168px;
    height: 300px;
    background: #FFFFFF;
  justify-content: flex-start;
}


.menu-titulo {
    width: 180px;
    gap: 8px;
    height: 14px;
    font-family: 'Nunito Sans';
    font-style: normal;
    font-weight: 600;
    font-size: 14px !important;
    line-height: 100%;
    display: flex;
    align-items: center;
    color: #393B47 !important;
    flex: none;
    order: 1;
    flex-grow: 0;
    padding: 16px 0px;
 

}
.menu-titulo:hover{color: #0025E0;}


.menu-option{
    width: 180px;
    height: 14px !important;
    font-family: 'Nunito Sans';
    font-style: normal;
    font-weight: 400;
    font-size: 12px !important;
    line-height: 100%;
    display: flex;
    align-items: center;
    color: #67697A;
    padding: 12px 0px;
    }

#spacing {
margin-bottom: 16px;

}

    .menu-option:hover{color: #0025E0; text-decoration: none;}


.dollar-icon {
padding: 0px;

}

    .divider {
        width: 168px;
        height: 1px;
        background: #EBECF5;
        flex: none;
        order: 1;
        flex-grow: 0;
    }
     .container-nav-mobile {
      display: none;
     }

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

      .container-nav {
       gap: 10px;
        width: 1076px;
      }

      nav ul {
        width: 918px;
        gap: 24px;
        
      }
      .container-nav-mobile {
        display: none;
       }

     }

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

      .container-nav {display: none;}

      .container-nav-mobile {
        display: flex;
        max-width: 768px;
        width: 100%;
        align-content: space-between;
       flex-direction: column;
       align-items: center;
       gap: 16px;
       }

       .hamburguer {
        display: flex;
        max-width: 768px;
        width: 100%;
        justify-content: space-between;
       flex-direction: row;
       align-items: center;
       padding: 8px 16px;
       gap: 16px;
         background-color: #fff;
    position: fixed;
z-index: 999;
         top: -1px;
       }

       #cta-hamburguer {margin: 0px;}
       
       #itens-burguer {
      width: 100%;
    padding: 8px 16px;
    max-width: 786px;
    display: none;
    justify-content: flex-start;
         position: fixed;
    background-color: rgb(255, 255, 255);
    top: 50px;
    z-index: 9999;
    height: 100vh;
       }

       .dropdown-retail-mb {

        display: none;
       }

       .menu-mb a{

        font-family: 'Nunito Sans';
        font-style: normal;
        font-weight: 600;
        font-size: 16px;
        line-height: 100%;
        color: #67697A;
        text-decoration: none;

       }
       .menun-mb a:hover, .cta-vareja:hover, .cta-industria:hover { text-decoration: none;}
       .menu-mb {

        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 8px 16px;
        gap: 16px;
       }

       .dropdown-item-mb {

        margin-top: 8px;
       }

       .menu-titulo {
        margin-top: 8px;
        padding: 20px 0px;

       }

.option-menu  {
  padding: 8px 16px;
  gap: 8px;
  width: 100%;
  max-width: 320px;
 }

 .menu-option {
  font-weight: 400 !important;
  padding: 20px 0px;
 }

 .button-menu-mb {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 8px 16px;
  gap: 16px;
  width: 100%;
  max-width: 320px;
  justify-content: center;
  
  background: #FFFFFF;

 }

 
 .dropdown-industry-mb {
  display: none;
}


.banner-menu-mb {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 8px 16px;
  width: 100%;
  max-width: 288px;
  height: 148px;
  margin-top: 24px;
  background: #F7F9FF;
  border-radius: 12px;


}

.titulo-banner-mb{
  width: 100%;
  max-width: 200px;
height: 32px;
display: block;
font-family: 'Nunito Sans';
font-style: normal;
font-weight: 700;
font-size: 16px;
line-height: 100%;
/* or 16px */


/* Interface Dark / Deep */

color: #393B47;

}

.contents-banner-mb p {
  width: 100%;
  max-width: 266px;
  /* Caption */
  
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 600;
  font-size: 12px;
  line-height: 18px;
  /* or 150% */
  
  
  /* Interface Dark / Down */
  
  color: #67697A;
  
}

.contents-banner-mb a {
width: 100%;
  max-width: 217px;
height: 14px;
gap: 8px;
font-family: 'Nunito Sans';
font-style: normal;
font-weight: 600;
font-size: 14px;
line-height: 100%;
/* identical to box height, or 14px */

display: flex;
align-items: center;

/* Brand Primary / Pure */

color: #0025E0;
}


      }