html, body {
    font-family: 'Quicksand',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    font-size: 16px;
    color: #64768c;
}
h2 { font-weight: 700; color: #43596f; text-align: center; }
.font-18 { font-size: 18px; }
.text-warning { color: #ff9900; }
.rounded { border-radius: .5rem!important; }
.btn { border-radius: 50px; }
.btn-lg { padding: .8rem 2.5rem; }
.btn-outline-primary, .btn-outline-success { border-width: 2px; font-weight: bold; color: #a2b4c1; border-color: #a2b4c1; }
.btn-outline-success:hover { background-color: #00b128; border-color: #00b128; }
.card { border: 1px solid rgba(54, 53, 113, .13); }
.banner {
    padding-top: 170px;
    font-size: 20px;
    color: #84a2c1;
    background-image: url("/images/top-banner-sm.webp");
    background-position: center;
    background-size: cover;
}
.no-webp .banner {
    background-image: url("/images/top-banner-sm.png");
}
.banner h2 { font-size: 54px; }
a, .btn { transition:  all 300ms linear 0s; }
section { padding: 5rem 0; }
label { margin-bottom: .5rem; margin-left: .5rem; color: #a2b4c1; }
#popup {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1050;
    position: fixed;
    background: rgba(255, 255, 255, .85);
    display: none;
}
#inicio .navbar { transition:  all 300ms linear 0s; }
#inicio .navbar.scroll { background: #fff; box-shadow: 0 2px 42px rgba(0,0,0,.1); }
#inicio .navbar li a {
    font-weight: 700;
    line-height: 40px;
    text-transform: uppercase;
    color: #84a2c1;
    padding: 0 14px;
    font-size: 16px;
}
#inicio .navbar li a:hover, #inicio .navbar li.active a { color: #0072ff; }
#inicio .navbar-toggler { color: #43596f; }
#servicios svg > path { fill: #04d0ca; }
#paquetes { background: #eef6fb url("/images/gears-bg.webp") no-repeat 0 14%; }
.no-webp #paquetes { background-image: url("/images/gears-bg.png"); }
#paquetes .card { box-shadow: 0 4px 18px rgba(0,0,0,.05); }
#contacto textarea { border-radius: 26px; min-height: 2rem; max-height: 20rem; height: 5rem; }

@media (min-width: 768px) {
    .banner {
        background-image: url("/images/top-banner.webp");
    }
    .no-webp .banner {
        background-image: url("/images/top-banner.png");
    }
    #paquetes { background-position: 50% 50%; }
}

@media (max-width: 991.98px) {
    #inicio ul.navbar {
        background: #fff;
        margin: .5rem;
        border-radius: .5rem;
    }
    #inicio .navbar li {
        display: block;
        width: 100%;
    }
}