html { scroll-behavior: smooth; }

      /* ================================
         PROFESSIONAL SCROLLBAR
      ================================ */
      
      /* Chrome, Edge, Safari */
      ::-webkit-scrollbar {
        width: 10px;
      }
      
      ::-webkit-scrollbar-track {
        background: #f2f2f2;
      }
      
      ::-webkit-scrollbar-thumb {
        background: linear-gradient(
          180deg,
          #00303A,
          #0a5c66
        );
        border-radius: 50px;
        border: 2px solid #f2f2f2;
        transition: all .3s ease;
      }
      
      ::-webkit-scrollbar-thumb:hover {
        background: #cdd51c;
      }
      
      /* Firefox */
      html {
        scrollbar-width: thin;
        scrollbar-color: #00303A #f2f2f2;
      }


    
/* Animaciones */
.fade-up {
  opacity: 0;
  transform: translateY(40px);
  transition: all .8s ease;
}
.fade-up.active {
  opacity: 1;
  transform: translateY(0);
}

.stagger > * {
  opacity: 0;
  transform: translateY(30px);
  transition: all .6s ease;
}
.stagger.active > *:nth-child(1){transition-delay:.1s}
.stagger.active > *:nth-child(2){transition-delay:.2s}
.stagger.active > *:nth-child(3){transition-delay:.3s}
.stagger.active > *:nth-child(4){transition-delay:.4s}
.stagger.active > * {
  opacity: 1;
  transform: translateY(0);
}

body{font-family:'Montserrat',sans-serif}
.hero-overlay{background:rgba(0,47,52,.72)}
.fade{opacity:0;transform:translateY(50px);transition:all .9s cubic-bezier(.22,.61,.36,1)}
.fade.active{opacity:1;transform:translateY(0)}
.btn-outline{
border:1px solid #fff;
padding:16px 40px;
letter-spacing:.2em;
}
.btn-outline2{
border:1px solid #cdd51c;
background-color: #cdd51c;
color: #00303A;
padding:16px 40px;
letter-spacing:.2em;
}
.btn-outline:hover{
background:#fff;
color:#002F34;
}
.btn-outline2:hover{
background:transparent;
color:#fff;
}
.card-shadow{
box-shadow:0 20px 40px rgba(0,0,0,.25);
}



/*** FAQ -- Acordeon ***/
.accordion-content{
max-height:0;
overflow:hidden;
transition:max-height .5s ease, opacity .3s ease;
opacity:0;
}
.accordion.active .accordion-content{
opacity:1;
max-height:500px;
}
.rotate{
transition:transform .3s ease;
}
.accordion.active .rotate{
transform:rotate(45deg);
}  


/**  Contact - Form */
input, select, textarea{
  background:#dcdcdc;
  height:38px;
  padding-left:12px;
  font-size:14px;
  outline:none;
  }
  textarea{
  height:90px;
  padding-top:8px;
  resize:none;
  }
  input:focus, select:focus, textarea:focus{
  background:#ffffff;
  border:1px solid #C9D52B;
  }


  /**  Ansi  **/
  .card{
    background:linear-gradient(180deg,#1B5A5E 0%, #0C3B3F 100%);
    box-shadow:0 10px 25px rgba(0,0,0,.18);
    transition:all .4s cubic-bezier(.4,0,.2,1);
    position:relative;
    overflow:hidden;
    cursor:pointer;
    }
    
    .card-icon{
    transition:opacity .3s ease, transform .3s ease;
    }
    
    .card-text{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:30px;
    text-align:center;
    opacity:0;
    transform:translateY(10px);
    transition:all .4s ease;
    color:white;
    font-size:14px;
    line-height:22px;
    letter-spacing:.4px;
    }
    
    .card:hover{
    transform:translateY(-6px);
    }
    
    .card:hover .card-icon{
    opacity:0;
    transform:scale(.9);
    }
    
    .card:hover .card-text{
    opacity:1;
    transform:translateY(0);
    }