/* -------------------------------------------
1. Site Typography
--------------------------------------------*/
@import url("https://fonts.googleapis.com/css2?family=Titillium+Web&display=swap");
html {
  font-size: 16px; }

body {
  font-family: 'Titillium Web',sans-serif; }

/* -------------------------------------------
2. General Button Styles
--------------------------------------------*/
.btn-primary {
  background-color: #00c0f3;
  border: none;
  border-radius: 7px;
  font-size: 13px; }

.btn-primary:hover {
  background-color: #00c0f3; }

.btn.btn-primary.accounting {
  background-color: #005eb8;
  border-radius: 20px;
  border: solid 2px #ffffff; }

.btn.btn-primary.accounting:hover {
  background-color: #ffffff;
  border: solid 2px #005eb8;
  color: #005eb8; }

.btn-info {
  background-color: #291289;
  color: #ffffff;
  border: none;
  border-radius: 23px; }

.btn-info:hover {
  background-color: #291289;
  color: #ffffff; }

.btn-info.accounting {
  background-color: rgba(255, 255, 255, 0.15);
  -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.5);
          box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.5);
  border: solid 1px #ffffff; }

.btn-info.accounting:hover {
  -webkit-box-shadow: 0 9px 6px 0 rgba(0, 0, 0, 0.5);
          box-shadow: 0 9px 6px 0 rgba(0, 0, 0, 0.5); }

/* -------------------------------------------
3. Main Color Styles
--------------------------------------------*/
.bg-primary {
  background-color: #003a70 !important; }

.bg-custom {
  background: #4b3ffb;
  background: -webkit-gradient(linear, left top, right top, from(#4b3ffb), color-stop(19%, #6e35c4), color-stop(55%, #9800bb), to(#fc466b));
  background: linear-gradient(90deg, #4b3ffb 0%, #6e35c4 19%, #9800bb 55%, #fc466b 100%); }

.text-primary {
  color: #003a70 !important; }

/* -------------------------------------------
4. Secondary Color Styles
--------------------------------------------*/
.bg-secondary {
  background-color: #110f81 !important; }

.text-secondary {
  color: #110f81 !important; }

/* -------------------------------------------
5. Header Styles
--------------------------------------------*/
header {
  background: #4b3ffb;
  background: -webkit-gradient(linear, left top, right top, from(#4b3ffb), color-stop(19%, #6e35c4), color-stop(55%, #9800bb), to(#fc466b));
  background: linear-gradient(90deg, #4b3ffb 0%, #6e35c4 19%, #9800bb 55%, #fc466b 100%); }

header h1, p {
  color: #ffffff; }

#diagonal {
  background-image: linear-gradient(100deg, white 50%, #00d4ff 50%);
  background-position: center center;
  background-size: cover;
  width: auto;
  height: auto; }

/* -------------------------------------------
6. Navbar Styles
--------------------------------------------*/
.navbar-light .navbar-nav .nav-link {
  color: yellow; }

.navbar-nav > li > .dropdown-menu {
  background: #4b4bf1;
  background: -webkit-gradient(linear, left top, left bottom, from(#4b4bf1), to(#00d4ff));
  background: linear-gradient(180deg, #4b4bf1 0%, #00d4ff 100%);
  border: 0px; }

.navbar-nav > li > .dropdown-menu a:hover {
  background-color: #9208BD; }

.navbar-nav > li > .dropdown-menu a:focus {
  background-color: #EE3C76; }

.navbar-brand {
  background-color: #ffffff;
  border-radius: 5px;
  padding: 2px; }

.dropdown-menu .shadow {
  background: #4b4bf1;
  background: -webkit-gradient(linear, left top, left bottom, from(#4b4bf1), to(#00d4ff));
  background: linear-gradient(180deg, #4b4bf1 0%, #00d4ff 100%);
  border: 0px; }

.dropdown-divider {
  border-color: #ffffff; }

.navbar-nav > li > .dropdown-menu a {
  color: #ffffff; }

@-webkit-keyframes fadeIn {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

@keyframes fadeIn {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }
.dropdown-menu.show {
  -webkit-animation: fadeIn 0.3s alternate;
  /* Safari 4.0 - 8.0 */
  animation: fadeIn 0.3s alternate; }

.nav-item.dropdown.dropdown-mega {
  position: static; }
  .nav-item.dropdown.dropdown-mega .dropdown-menu {
    width: 90%;
    top: auto;
    left: 5%; }

.navbar-light .navbar-nav .nav-link {
  color: #ffffff; }

.navbar-light .navbar-nav .nav-link:focus {
  color: #ffff00; }

.navbar-light .navbar-nav .nav-link:hover {
  color: #00c0f3; }

.navbar-toggler {
  border: none;
  padding: 0;
  outline: none; }
  .navbar-toggler:focus {
    -webkit-box-shadow: none;
            box-shadow: none; }
  .navbar-toggler .hamburger-toggle {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 50px;
    z-index: 11;
    float: right; }
    .navbar-toggler .hamburger-toggle .hamburger {
      position: absolute;
      -webkit-transform: translate(-50%, -50%) rotate(0deg);
              transform: translate(-50%, -50%) rotate(0deg);
      left: 50%;
      top: 50%;
      width: 50%;
      height: 50%;
      pointer-events: none; }
      .navbar-toggler .hamburger-toggle .hamburger span {
        width: 100%;
        height: 4px;
        position: absolute;
        background: #ffffff;
        border-radius: 2px;
        z-index: 1;
        -webkit-transition: background 0.2s cubic-bezier(0.77, 0.2, 0.05, 1), all 0.2s ease-in-out, -webkit-transform 0.2s cubic-bezier(0.77, 0.2, 0.05, 1);
        transition: background 0.2s cubic-bezier(0.77, 0.2, 0.05, 1), all 0.2s ease-in-out, -webkit-transform 0.2s cubic-bezier(0.77, 0.2, 0.05, 1);
        transition: transform 0.2s cubic-bezier(0.77, 0.2, 0.05, 1), background 0.2s cubic-bezier(0.77, 0.2, 0.05, 1), all 0.2s ease-in-out;
        transition: transform 0.2s cubic-bezier(0.77, 0.2, 0.05, 1), background 0.2s cubic-bezier(0.77, 0.2, 0.05, 1), all 0.2s ease-in-out, -webkit-transform 0.2s cubic-bezier(0.77, 0.2, 0.05, 1);
        left: 0px; }
        .navbar-toggler .hamburger-toggle .hamburger span:first-child {
          top: 10%;
          -webkit-transform-origin: 50% 50%;
                  transform-origin: 50% 50%;
          -webkit-transform: translate(0% -50%) !important;
                  transform: translate(0% -50%) !important; }
        .navbar-toggler .hamburger-toggle .hamburger span:nth-child(2) {
          top: 50%;
          -webkit-transform: translate(0, -50%);
                  transform: translate(0, -50%); }
        .navbar-toggler .hamburger-toggle .hamburger span:last-child {
          left: 0px;
          top: auto;
          bottom: 10%;
          -webkit-transform-origin: 50% 50%;
                  transform-origin: 50% 50%; }
      .navbar-toggler .hamburger-toggle .hamburger.active span {
        position: absolute;
        margin: 0; }
        .navbar-toggler .hamburger-toggle .hamburger.active span:first-child {
          top: 45%;
          -webkit-transform: rotate(45deg);
                  transform: rotate(45deg); }
        .navbar-toggler .hamburger-toggle .hamburger.active span:nth-child(2) {
          left: 50%;
          width: 0px; }
        .navbar-toggler .hamburger-toggle .hamburger.active span:last-child {
          top: 45%;
          -webkit-transform: rotate(-45deg);
                  transform: rotate(-45deg); }

.icons {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  margin-left: auto; }
  .icons a {
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    padding: 0.2rem 0.4rem;
    color: #ccc !important;
    text-decoration: none; }
    .icons a:hover {
      color: white;
      text-shadow: 0 0 30px white; }

/* -------------------------------------------
7. Section Home Cards
--------------------------------------------*/
#section-cards {
  background: #4b3ffb;
  background: -webkit-gradient(linear, left top, right top, from(#4b3ffb), color-stop(19%, #6e35c4), color-stop(55%, #9800bb), to(#fc466b));
  background: linear-gradient(90deg, #4b3ffb 0%, #6e35c4 19%, #9800bb 55%, #fc466b 100%); }

#section-cards .card-img-top {
  width: 150px;
  height: 50px; }

#section-cards .btn.btn-primary {
  border-radius: 50px;
  border: 0;
  background-color: #ffffff;
  color: #110f81; }

.card {
  border: 0px; }

.card .card-body .card-text {
  font-size: 12.5px; }

.bg-card {
  background: #3fc1fb;
  background: -webkit-gradient(linear, left top, left bottom, from(#3fc1fb), to(#087ae8));
  background: linear-gradient(180deg, #3fc1fb 0%, #087ae8 100%);
  border: 0; }

.bg-wopen {
  background: #3fc1fb;
  background: -webkit-gradient(linear, left top, left bottom, from(#3fc1fb), to(#087ae8));
  background: linear-gradient(180deg, #3fc1fb 0%, #087ae8 100%); }

.bg-personia {
  background: #3fc1fb;
  background: -webkit-gradient(linear, left top, left bottom, from(#3fc1fb), to(#087ae8));
  background: linear-gradient(180deg, #3fc1fb 0%, #087ae8 100%); }

/* -------------------------------------------
8. Section Home Call
--------------------------------------------*/
#call {
  background: #3fc1fb;
  background: -webkit-gradient(linear, left top, left bottom, from(#3fc1fb), to(#087ae8));
  background: linear-gradient(180deg, #3fc1fb 0%, #087ae8 100%); }

#call a {
  color: #ffffff; }

/* -------------------------------------------
9. Section Home Carousel
--------------------------------------------*/
.carousel.home {
  max-width: 709px;
  max-height: 265px; }

.carousel-inner > .item > img {
  max-width: 709px;
  max-height: 265px; }

.carousel-indicators [data-bs-target] {
  width: 12px;
  height: 12px;
  border-radius: 50%; }

/* -------------------------------------------
10. Section Home Wopen
--------------------------------------------*/
#wopen {
  background-color: #f2f2f2; }

#wopen p {
  color: #110f81; }

/* -------------------------------------------
11. Section Home Footer
--------------------------------------------*/
.footer {
  background: #4b3ffb;
  background: -webkit-gradient(linear, left top, right top, from(#4b3ffb), color-stop(19%, #6e35c4), color-stop(55%, #9800bb), to(#fc466b));
  background: linear-gradient(90deg, #4b3ffb 0%, #6e35c4 19%, #9800bb 55%, #fc466b 100%); }

.footer p {
  font-size: 12px; }

.footer ul {
  font-size: 12.5px; }

.footer a {
  text-decoration: none;
  color: #ffffff; }

/* -------------------------------------------
12. Section Product System
--------------------------------------------*/
#system h4 {
  color: #036eb9; }

#system h6 {
  color: #555; }

#system p {
  color: #555;
  font-size: 18px; }

#system span {
  color: #00c0f3;
  font-size: 15px; }

#system span.facturing {
  font-size: 11px; }

#system p.polity {
  opacity: 0.1;
  font-size: 11px; }

.grecaptcha-badge {
  visibility: hidden; }

/* -------------------------------------------
13. Section Services
--------------------------------------------*/
#services h4 {
  color: #036eb9; }

#services p {
  color: #555;
  font-size: 18px; }

/* -------------------------------------------
14. Section Video Slider
--------------------------------------------*/
.carousel.video {
  width: auto;
  height: auto; }

.carousel.video .carousel-indicators [data-bs-target] {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color: #00c0f3;
  margin-bottom: 0.2rem; }

.carousel.video .carousel-control-prev.video span.carousel-control-prev-icon,
.carousel-control-next.video span.carousel-control-next-icon {
  border-radius: 50%;
  background-color: #003a70; }

/* -------------------------------------------
15. Section Slider System
--------------------------------------------*/
#slider-system {
  background-color: #f6f7f9; }

#slider-system h3 {
  color: #707070; }

/* -------------------------------------------
16. Section Slider System Images
--------------------------------------------*/
.brand-carousel {
  background-color: #f6f7f9; }

.brand-carousel .single-logo {
  background-color: #ffffff;
  height: 140px;
  border-radius: 30px; }

.brand-carousel .single-logo img {
  width: 147px;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  position: absolute;
  top: 50%;
  left: 50%; }

.owl-dots {
  text-align: center;
  margin-top: 4%; }

.owl-dot {
  display: inline-block;
  height: 15px !important;
  width: 15px !important;
  background-color: #878787 !important;
  opacity: 0.8;
  border-radius: 50%;
  margin: 0 5px; }

.owl-dot.active {
  background-color: #000 !important; }

/* -------------------------------------------
17. Media query
--------------------------------------------*/
@media (min-width: 280px) and (max-width: 576px) {
  #diagonal h4 {
    color: #003a70 !important; }

  #diagonal p {
    color: #003a70; } }

/*# sourceMappingURL=estilos.css.map */