@charset "utf-8";
/*
# ---------------------- #
# Developed by Volkertek #
# All rights reserved    #
# ---------------------- #
*/
/* -------------------------------------------------- */


:root{--transition: .15s all}

html {
  overflow-x: hidden;
  overflow-y: scroll
}

body {
  display: flex;
  flex-direction: column;
  margin: 0 !important;
  min-height: 100vh;
  padding-left: 0 !important;
  padding-right: 0 !important
}

header {
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 10
}

header,
footer {
  flex: none
}

main {
  flex: 1 0 auto
}

a {
  transition: .15s all
}

section {
  padding: 120px 0
}



/* -------------------------------------------------- */
.btn-wpp       {background-color: #25d366; border-radius: 50%; bottom: 20px; color: #FFF !important; display: block; font-size: 28px; height: 60px; line-height: 60px; position: fixed; text-align: center; width: 60px; right: 20px; z-index: 99;}
.btn-wpp:hover {background-color: #075E54; color: #EEE !important;}
/* -------------------------------------------------- */

header {background-color: #FFF;}

.navbar {
  border-top: 1px solid #F1F1F1;
  transition: var(--transition)
}




.navbar .navbar-brand {
  height: 80px;
  padding: 15px 0
}

.navbar .navbar-brand svg {
  height: 100%;
  width: auto
}

.navbar .navbar-nav .nav-link {
  color: var(--bs-primary);
  font-weight: 600;
  text-transform: uppercase;
}

.navbar .navbar-nav .nav-link:hover {
  color: var(--bs-gold)
}













/* -------------------------------------------------- */
    .hero-home {
      padding: 180px 0 180px;
      background:
        linear-gradient(180deg, rgba(43, 66, 97,1), rgba(43, 66, 97,.6)),
        url('/assets/img/neutral/backgrounds/bg-hero-home.webp') top center/cover no-repeat;
      color: #fff;
    }





.bg-half {background: linear-gradient(to right bottom, #FFFFFF 50%, #F8F8F8 50%);}
.bg-data {background-image: url('https://datasoftsolucoes.com.br/assets/img/backgrounds/bg-data.png'); background-position: center; background-repeat: no-repeat;}


.cta-hardware {background-image: url('https://datasoftsolucoes.com.br/assets/img/backgrounds/bg-cables.jpg'); background-position: center; background-repeat: no-repeat; padding: 80px 0;}
/* -------------------------------------------------- */
/* -------------------------------------------------- */

/* -------------------------------------------------- */
/* Titles */
/* -------------------------------------------------- */
.t-start, .t-center {margin-bottom: 20px; position: relative; text-transform: uppercase;}
.t-start            {text-align: left;}
.t-center           {text-align: center;}
/* -------------------------------------------------- */
.t-start:before, .t-center:before {color: var(--secondary-color-1); content: '\f105'; font-family: 'Font Awesome 5 Free'; font-weight: 900; margin-right: 10px;}
.t-center:after                   {color: var(--secondary-color-1); content: '\f104'; font-family: 'Font Awesome 5 Free'; font-weight: 900; margin-left: 10px;}








/* -------------------------------------------------- */
/* Hero */
/* -------------------------------------------------- */

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

/* -------------------------------------------------- */
/* Highlights */
/* -------------------------------------------------- */
/* .highlights                {transform: translateY(-50%);} */
.highlights a.card         {border: none; border-radius: 0; text-align: center; }
.highlights a h5           {background: var(--primary-color-1); color: #FFFFFF; margin: 0; padding: 10px; text-transform: uppercase;}
.highlights a i            {color: var(--secondary-color-1); transition: .3s all; -moz-transition: .3s all; -o-transition: .3s all; -webkit-transition: .3s all;}
.highlights a.card:hover i {color: var(--primary-color-1);}




.features h5 {text-transform: uppercase;}


.numbers {background: var(--primary-color-1); padding: 50px 0;}
.numbers i {color: #D6B36E}
.counter {color: #FFFFFF; font-size: 32px; font-weight: 700;}
.subcounter {color: var(--secondary-color-1); font-size: 20px;}



.corners {
  position: relative;


}

/* Corner Effect */
.corners:after,
.corners:before {
  background: #E6E6E6;
  content: '';
  height: 40px;
  position: absolute;

  width: 100px;
  box-shadow: 0 5px 10px -7px hsla(0, 0% ,0%, 0.5);
}
.corners:after {
  left: -45px;
  transform: rotate(-45deg);
}
.corners:before {
  right: -45px;
  transform: rotate(135deg);
}

.corners:after { top: -20px;}
.corners:before  {bottom: -20px;}






/* -------------------------------------------------- */
.nav-pills>li                        {padding: 2px 0;}
.nav-pills>li:first-child            {padding-top: 0;}
.nav-pills>li:last-child             {padding-bottom: 0;}
/* -------------------------------------------------- */
.nav-pills>li>.nav-link              {background: var(--primary-color-1); color: #FFFFFF; font-weight: 700;}
.nav-pills>li>.nav-link:hover        {background: var(--primary-color-2);}
/* -------------------------------------------------- */
.nav-pills>li>.nav-link.active       {background: var(--primary-color-1); color: var(--secondary-color-1);}
.nav-pills>li>.nav-link.active:hover {background-color: #0C1934;}
/* -------------------------------------------------- */







/* -------------------------------------------------- */
/* Footer */
/* -------------------------------------------------- */
footer    {background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' width='8' height='8'%3E%3Ccircle fill='%23091B34' opacity='0.4' cx='6' cy='6' r='2'/%3E%3C/svg%3E") top left repeat, #191919; color: #F2F2F2; font-size: 13px; padding: 60px 0 30px;}
footer h5 {color: var(--secondary-color-1); font-size: 14px; margin-bottom: 21px!important; text-transform: uppercase;}
footer hr {border-top: 1px solid rgba(255,255,255,0.1); opacity: 1;}
/* -------------------------------------------------- */
footer ul.list-unstyled li a:is(:link, :active, :visited):not(.btn) {color: #DDDDDD!important;}
footer ul.list-unstyled li a:hover:not(.btn)                        {color: #FFFFFF!important;}




/* -------------------------------------------------- */
@media (min-width: 992px)
{
  /* -------------------------------------------------- */
  /* -------------------------------------------------- */
  @keyframes MoveUpDown { 0%, 100% {transform: translateY(0);} 50% {transform: translateY(-32px);}}
  /* -------------------------------------------------- */
  .offcanvas                                  {display: none;}
  .offcanvas:is(.hiding, .show, .showing)     {visibility: hidden;}
  /* -------------------------------------------------- */
  /* -------------------------------------------------- */
  .dropdown-menu                                           {background:#333; border-radius: 3px; display: block; margin-top: 60px; opacity: 0; pointer-events: none; transition: var(--transition);}
  .dropdown-menu.show                                      {margin-top: 30px; opacity:1; pointer-events: auto;}
  .dropdown-menu .dropdown-item:is(:link,:active,:visited) {color: #fff; padding:8px 32px;}
  .dropdown-menu .dropdown-item:hover                      {background:none;color:var(--primary-color-1)}
  /* -------------------------------------------------- */
  footer ul.list-unstyled li a::before {color: var(--secondary-color-1); content: '\f105'; float: left; font-family: 'Font Awesome 6 Free'; font-size: 10px; font-weight: 900; line-height: 28px; padding-right: 14px;}
  /* -------------------------------------------------- */
}
/* -------------------------------------------------- */
@media (max-width: 991.98px)
{
  /* -------------------------------------------------- */
  .hero-home    {padding: 40px 0;}
  .hero-home h1 {font-size: 26px;}
  .hero-home h2 {font-size: 18px;}
  /* -------------------------------------------------- */
}


@media (min-width: 992px) {
  .navbar .navbar-nav .nav-item {
    margin-left: 20px
  }
  .navbar .navbar-nav .nav-item:first-of-type {
    margin-left: 0
  }
  .offcanvas {
    display: none
  }
  .offcanvas:is(.hiding,
  .show,
  .showing) {
    visibility: hidden
  }
  .btn-wpp {
    font-size: 24px;
    height: 48px;
    line-height: 48px;
    width: 48px
  }
}