* {
    
}

body {
    overflow-x: hidden;
    font-family: 'Arial', sans-serif;
    color: #505962;
}

.intro {
    background-color: #f2f2f2;
}


/*--- Nav Scrolling Offset --*/
.offset:before {
    height: 4rem;
    margin-top: -4rem;
    content: "";
    display: block;
}

/*--- Extra Bootstrap Column Padding --*/
[class*="col-"] {
    padding: 1rem;
}

h1, h2 {
    font-family: "Lora", serif;
}

/*============= NAVIGATION =============*/

.navbar-brand {
    font-family: "Arial", Arial;
    font-weight: bold;
    color: #0597F2;
}

.navbar {
    padding: .7rem 1rem;
    text-transform: uppercase;
    font-size: .9rem;
    font-weight: 700;
    letter-spacing: .1rem;
    transition: background-color .5s ease 0s;
}

.navbar-brand img {
    height: 2rem;
}

.svg-inline--fa.fa-w-14 {
    color: white;
    font-size: 1.6rem;
}

.navbar-nav li {
    padding-right: .8rem;
}

.navbar-nav .nav-link {
    color: white;
    padding-top: .8rem;
}

.navbar-nav .nav-link.active,
.navbar-nav .nav-link:hover {
  color: #0597F2;
}

.navbar.solid {
    background: rgba(2, 18, 38, 0.7)!important;
    transition: background-color 1s ease 0s;
}



/*============= LANDING PAGE =============*/
.home-inner {
    background-image: url('images/fast-typing.png'); /* 'img/landing.png' */
}

.caption {
    width: 100%;
    max-width: 100%;
    position: absolute;
    top: 38%;
    z-index: 1;
}

.caption h3 {
    color: white;
    font-size: 1.5rem;
    text-transform: uppercase;
    font-weight: 400;
    text-shadow: .1rem .1rem .5rem black;
    padding-bottom: 2rem;
}

.caption h1 {
    color: #0597F2;
    font-size: 4rem;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: .3rem;
    text-shadow: .1rem .1rem .8rem black;
    padding-bottom: 1rem;
}


.header-title {
    font-size: 48px;
    font-weight: bold;
}

.btn-lg {
    border-width: medium;
    border-radius: 0;
    padding: .8rem 1.5rem;
    font-size: 1.1rem;
    font-weight: 400;
    text-transform: uppercase;
    display: inline-block!important;
}

/*============= FEATURES SECTION =============*/
.narrow {
    width: 75%;
    margin: 0 auto;
    padding-top: 2rem;
}

.btn-sm {
    border-width: medium;
    border-radius: 0;
    padding: .5rem 1.1rem;
    font-size: .9rem;
    font-weight: 400;
    text-transform: uppercase;
    margin: 1rem;
}

.jumbotron {
    margin-bottom: 0;
    border-radius: 0;
    padding: 1rem 0 3rem;
}

.feature {
    text-align: center;
}

.feature .fa-layers {
    color: #0597F2;
    margin: 0 auto;
    width: 3.9rem;
    height: 6rem;
}

.feature h3 {
    font-size: 1.3rem;
    text-transform: uppercase;
    padding-bottom: .4rem;
}

.feature p {
    font-size: 1.1rem;
}

h3.heading {
    font-size: 1.9rem;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 1.9rem;
}

.heading-underline {
    width: 3rem;
    height: .2rem;
    background-color: #0597F2;
    margin: 0 auto 2rem;
}

.btn-turquoise {
    border-color: #0597F2;
    background-color: #0597F2;
    color: white;
}

  .btn-turquoise:hover,
  .btn-turquoise:focus {
    border-color: #0597F2;
    background-color: #0597F2;
    color: white;
}

/*===== FIXED BACKGROUND IMG DARK =====*/

.dark {
    background-color: rgba(2, 18, 38, 0.75);
    padding: 7rem 2rem;
    text-align: center;
    z-index: 1000!important;
}

.dark h3, .dark p {
    color: #E9ECEF;
}

/*============= PORTFOLIO SECTION =============*/

.row.padding {
    padding: 2rem 0 1rem;
}
  img.example-image {
    max-width: 100%;
}
  .row.no-padding [class*=col-] {
    padding: 0;
}
  .portfolio-item img:hover {
    transform: scale(1.3);
    cursor: zoom-in;
}
  .portfolio-item img {
    transition: transform .4s ease;
}
  .portfolio-item {
    overflow: hidden;
}

.blue {
    background-color: #0597F2;
}

.dark {
    background-color: #021226;
}

.navbar-dark{
    background-color: #021226 !important; 
}

section {
    scroll-margin: 50px;
}

.title {
    font-weight: bold;
    margin-bottom: 3px;
}

.card {
    border: none;
}

.card:hover {
    transform: scale(1.05);
    transition: all 0.3s ease-in-out;
}

.card-service {
    background-color: #021226;
    color: #fff;
    cursor: pointer;
}

.card-service:hover {
    background-color: #0597F2;
    color: #021226;
}

.card-title {
    font-size: 18px;
    font-weight: bold;
}

.card-body {
    display: flex !important;
    flex-direction: column !important;
    }
    
    .card .btn {
    margin-top: auto !important;
    }

    .hidden {
        opacity: 0;
        filter: blur(5px);
        transform: translateX(-100%);
        transition: all 1s;
    }
    
    @media(prefers-reduced-motion) {
        .hidden {
            transition: none;
        }
    }
    
    .show {
        opacity: 1;
        filter: blur(0);
        transform: translateX(0);
    }
    
    .planos {
    
    }
    
    .plano:nth-child(2) {
      transition-delay: 200ms;
    }
    
    .plano:nth-child(3) {
      transition-delay: 400ms;
    }
    
    .plano:nth-child(4) {
      transition-delay: 600ms;
    }
    
    .plano:nth-child(5) {
        transition-delay: 800ms;
    }
    
    .plano:nth-child(6) {
        transition-delay: 1000ms;
    }

    .client-img {
        width: 150px;
        padding: 0 1%;
        aspect-ratio: 4/3;
        object-fit: contain;
    }


    .nav-link {
        position: relative;
    }

    .nav-link:hover {
        
    }

    .nav-link::after {
        content: '';
        opacity: 0;
        transition: all 0.2s;
        height: 2px;
        width: 100%;
        background-color: #0597F2;
        position: absolute;
        bottom: 0;
        left: 0;
    }
    
    .nav-link:hover::after {
        opacity: 1;
    }

    .active {
        color: #fff;
    }
   
    /*============= PRICING SECTION =============*/

.pricing-column {
    background-color: white;
    padding: 2rem;
    border-top: .2rem solid #0597F2;
    box-shadow: 0 0 .8rem rgba(2, 18, 38, 0.075);
    transition: transform .7s ease;
    overflow: hidden;
    position: relative;
  }
  .pricing-column:hover {
    transform: scale(1.1);
  }
  .pricing-column h3 {
    padding: 1rem;
    border-bottom: .1rem solid rgba(2, 18, 38, 0.1);
  }
  .pricing-column p {
    opacity: .8;
    margin-top: 1.3rem;
  }
  .pricing-column h4 {
    font-size: 1.1rem;
    padding: .4rem;
  }
  .pricing-column .item {
    font-weight: 700;
  }
  .pricing-column h1 {
    padding: .8rem 0;
  }
  .ribbon {
    background-color: #6c757d;
    color: white;
    width: 10rem;
    height: 2rem;
    font-size: .8rem;
    font-weight: 700;
    padding-top: .4rem;
    position: absolute;
    right: -2.8rem;
    top: 1.6rem;
    transform: rotate(45deg);
    box-shadow: 0 0 .2rem rgba(2, 18, 38, 0.25);
  }

  /*============= TEAM SECTION FIXED BG IMG LIGHT =============*/

#fixed-2 {
    background-image: url('../images/office.png');
    z-index: -1;
  }
  .light {
    background-color: rgba( 255, 255, 255, .85);
    padding: 3rem 2rem 2rem;
    z-index: 1000!important;
  }

  /*============= MEDIA QUERIES =============*/

/* Devices under 992px (lg) */
@media (max-width: 991px) {
    .caption h1 {
      font-size: 3.5rem;
      letter-spacing: .2rem;
      padding-bottom: .8rem;
    }
    .caption h3 {
      font-size: 2.2rem;
      padding-bottom: 1.7rem;
    }
    .btn-lg {
      padding: .7rem 1.2rem;
      font-size: 1rem;
    }
    .narrow h1 {
      font-size: 2.1rem;
    }
  }
  
  /* Devices under 768px (md) */
  @media (max-width: 767px) {
    .caption h1 {
      font-size: 2.7rem;
      letter-spacing: .15rem;
      padding-bottom: .5rem;
    }
    .caption h3 {
      font-size: 1.7rem;
      padding-bottom: 1.2rem;
    }
    .btn-lg {
      padding: .6rem 1.1rem;
      font-size: 1rem;
    }
    .narrow h1 {
      font-size: 1.8rem;
    }
    #fixed {
      background-image: url('../images/apple-mobile.png');
    }
    #fixed-2 {
      background-image: url('../images/office-mobile.png');
    }
    footer {
      background: url('../images/footer-mobile.png') no-repeat;
    }
    .clients img {
      max-width: 50%;
      margin: 0 auto;
    }
    .top-scroll {
      display: none!important;
    }
  }
  
  /* Devices under 576px (sm) */
  @media (max-width: 575px) {
    .caption h1 {
      font-size: 1.9rem;
      letter-spacing: .1rem;
      padding-bottom: .4rem;
    }
    .caption h3 {
      font-size: 1.2rem;
      padding-bottom: 1rem;
    }
    .btn-lg {
      padding: .4rem .9rem;
      font-size: .9rem;
    }
    .narrow {
      width: 85%;
    }
  }

  .client-logo {
    width: 100px;
  }

  /* Slider de logos */

  @keyframes slide {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(-100%);
    }
  }

  .logos {
    overflow: hidden;
    padding: 60px 0;
    background-color: white;
    white-space: nowrap;
  }

  .logos::before,
  .logos::after {
    position: absolute;
    width: 250px;
    height: 300px;
    content: "";
    z-index: 2;
  }

  .logos:before {
    left: 0;
    background: linear-gradient(to left, rgba(255, 255, 255, 0), white);
  }

  .logos::after {
    right: 0;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), white);
  }

  .logos:hover .logos-slide {
    animation-play-state: paused;
  }

  .logos-slide {
    animation: 35s slide infinite linear;
    display: inline-block;
  }

  .logos-slide img{
    height: 100px;
    margin: 0 40px;
  }