html { scroll-behavior: smooth; }
body { font-family: 'Roboto'; background-color: #fff; color: #333; }
html, body { height: 100%; }
a { color: rgb(23, 149, 197); }
a:focus,
a:hover { text-decoration: none; color: rgb(3, 129, 177); }
h1, h2, h3, h4, h5, h6 { font-weight: 500; color: rgb(23, 149, 197); }

/**
 * Top
 */
header { color: #333; background-color: rgba(255, 255, 255, .85); box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.25); padding: .75rem 0; -webkit-backdrop-filter: saturate(180%) blur(10px); backdrop-filter: saturate(180%) blur(10px); }
  header a.nav-link { font-size: .85rem; font-weight: 500; color: #333; text-transform: uppercase; border-radius: .5rem; margin-left: .5rem; transition-duration: .25s; background-color: transparent; transition-property: background-color color; }
  header a.nav-link:hover,
  header .nav-item.active a.nav-link { color: rgb(23, 149, 197); }
  header a.nav-link.btn-primary { color: rgb(23, 149, 197); }
  header a.nav-link.btn-primary:hover,
  header a.nav-link.btn-primary.active { color: white; }
  
  header .navbar-toggler { color: rgb(23, 149, 197); border-color: rgb(23, 149, 197); }
  header .navbar-toggler .navbar-toggler-icon { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(23, 149, 197, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"); }

/**
 * Sections
 */
section .anchor { position: absolute; margin-top: -4rem; }
section .container { padding-top: 5rem; padding-bottom: 5rem; }

section#home { color: white; background-image: url(../img/bg-cover.webp); background-size: cover; background-repeat: no-repeat; background-position: bottom; }
  section#home .laptop { position: absolute; z-index: 1; }
  section#home p { font-size: 2rem; }
  section#home .phrase { line-height: 2rem; }

section#products { background-color: transparent; padding: 0; }
  section#products .heading { background-color: rgb(229, 249, 255); font-size: 1.5rem; padding: 2rem; text-align: center; color: rgba(23, 149, 197); font-weight: 500; }
    section#products .heading i.fas { font-size: 2.5rem; margin-right: 1rem; vertical-align: bottom; }
  section#products .item { width: 22%; margin: 2% 5%; text-align: center; padding: 1rem; border-top: 5px solid rgb(23, 149, 197); box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.25); background-image: -webkit-linear-gradient(-55deg, #fff 50%, rgba(23, 149, 197, .05) 50%); transition-duration: .25s; transition-property:  box-shadow transform; position: relative; }
  section#products .item:hover { box-shadow: 10px 10px 0.5rem rgba(0, 0, 0, 0.25); transform: scale(1.1); }
    section#products .item .cover { opacity: 1; transition-duration: .25s; transition-property: opacity transform; }
    section#products .item:hover .cover { opacity: 0; }
    section#products .item .description { position: absolute; width: 100%; max-height: 100%; overflow: auto; color: #666; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 10px; opacity: 0; transition-duration: .25s; transition-property: opacity; text-align: center; }
    section#products .item:hover .description { opacity: 1; }

section#customer { color: white; background-image: linear-gradient(0deg, rgba(03, 129, 177, .5), rgba(23, 149, 197, .5)), url(../img/bg-numbers.webp);  background-size: cover; background-repeat: no-repeat; background-position: center; background-attachment: fixed; }
section#customer h2 { font-size: 3rem; color: white; }
section#customer p { font-size: 1.5rem; }
    section#customer .profile img { filter: none; -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); }

section#company { background-image: url(../img/bg-company.webp); background-size: 100%; background-repeat: no-repeat; background-position: bottom; }
  section#company h1 { color: #666; }
    section#company h1 span { color: rgb(23, 149, 197); }
  section#company ul { list-style: none; padding: 0; }

section#contact { color: rgb(23, 149, 197); background-color: rgb(237 251 254); }
  section#contact h1 { font-weight: 400; }
  .contact-alert { display: none; }
    .contact-alert a { color: blue; }

.form-control { border: none; background: transparent; border-bottom: 1px solid rgb(23, 149, 197); border-radius: 0; }
.form-control:focus { background: transparent; -webkit-box-shadow: none; box-shadow: none; border-bottom: 1px solid rgb(23, 149, 197); }
.form-group > label { top: 40px; position: relative; transition-duration: .25s; transition-property: top;
    -webkit-touch-callout: none; /* iOS Safari */
      -webkit-user-select: none; /* Safari */
       -khtml-user-select: none; /* Konqueror HTML */
         -moz-user-select: none; /* Old versions of Firefox */
          -ms-user-select: none; /* Internet Explorer/Edge */
              user-select: none; /* Non-prefixed version, currently
                                    supported by Chrome, Edge, Opera and Firefox */ }
.form-group.active > label { top: 0; }

.btn-primary { color: #fff; background-color: rgb(23, 149, 197); border-color: rgb(23, 149, 197); }
.btn-primary:hover,
.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active,
.show>.btn-primary.dropdown-toggle {
    color: #fff;
    background-color: rgb(13, 139, 187);
    border-color: rgb(13, 139, 187);
}

/**
 * Footer
 */
footer { background-color: rgb(68, 68, 68); color: white; }
  footer .partners { background-color: snow; box-shadow: inset 0 0 .5rem rgba(0, 0, 0, .5);  }
    footer .partners h1 { font-size: 2rem; font-weight: 400; }
    footer .partners a { display: block; width: 10%; }
    footer .partners img { width: 100%; transition-duration: .25s; transition-property: filter transform; }
    footer .partners img.bigger { width: 120%; }
    footer .partners a:hover img { transform: scale(1.1); }

  footer .container { position: relative; }
  footer .container p { font-family: "Roboto Light"; font-size: .8rem; }
  footer .container small { font-size: .65rem; color: rgb(150, 150, 150); }
  footer .container small a { color: rgb(150, 150, 150); }
    footer .container a.top { position: absolute; z-index: 100; right: .5rem; font-size: 3rem; width: 2.5rem; height: 2.5rem; line-height: 2.5rem; background-color: white; border-radius: 50%; box-shadow: 0.25rem 0.25rem 0.5rem rgba(0, 0, 0, 0.5); transition-duration: .25s; transition-property: margin-top transform; }
    footer .container a.top i {  margin-top: -0.25rem;  margin-left: -0.25rem; }
    footer .container a.top:hover { margin-top: -5px; transform: scale(1.1) }
    footer .social a i { color: #ccc; font-size: 2rem; margin: 1rem; transition-duration: .25s; transition-property: color transform; }
    footer .social a:hover i { color: white; transform: scale(1.25); }
    
    footer .container a.rb { position: absolute; z-index: 1; bottom: 0; right: 0; background-color: rgba(255, 255, 255, .1); color: rgb(68, 68, 68); font-family: 'Roboto'; font-weight: 600; font-size: 1.25rem; padding: .5rem; transition-duration: .25s; transition-property: background padding color box-shadow; }
    footer .container a.rb:hover { background-color: rgb(86, 61, 124); color: white; padding-bottom: 1rem; box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.5); }

 /**
 * Extras
 */
.btn-light,
.btn-outline-light:hover,
.btn-outline-light:not(:disabled):not(.disabled).active,
.btn-outline-light:not(:disabled):not(.disabled):active,
.btn-light:active,
.btn-light:hover,
.btn-light:not(:disabled):not(.disabled).active,
.btn-light:not(:disabled):not(.disabled):active { color: rgb(23, 149, 197); }
.btn-outline-primary { color: rgb(23, 149, 197); border-color: rgb(23, 149, 197); }
.btn-outline-primary:hover,
.btn-outline-primary:not(:disabled):not(.disabled).active,
.btn-outline-primary:not(:disabled):not(.disabled):active,
.show>.btn-outline-primary.dropdown-toggle {
  color: #efefdb;
  background-color: rgb(23, 149, 197);
  border-color: rgb(23, 149, 197);
}

/**
 * Tablet
 */
@media (max-width: 767px) {
  header { padding: 0; }
  section#products .item { width: 40%; }
  section#customer .col { margin: 2rem 0; }

  footer .partners a { width: 20%; margin: 3%; }
}

/**
 * Mobile
 */
@media (max-width: 575px) {
  header a.nav-link { border-radius: .25rem; margin-left: .25rem; padding: .5rem; }

  section#home .cover-icons img { width: 15%; }
  section#home .cover-icons i { font-size: 1rem; line-height: 1.25rem; }
  section#home .phrase { font-size: 1.25rem; line-height: 1.25rem; }

  section#products .item { width: 100%; }
  section#products i { display: block; }
  section#products { text-align: center; }

  footer .partners a { width: 30%; }
}

.loader { margin: auto; display: none; border: 5px solid rgba(255, 255, 255, .15); border-top: 5px solid rgb(23, 149, 197); border-radius: 50%; width: 32px; height: 32px; animation: spin 1s linear infinite; }
@keyframes spin {
  0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); }
}