/* ==========================================
   IDENTIDAD CORPORATIVA SIONLINE
========================================== */

:root {

    --sionline-blue: #1B2341;
    --sionline-orange: #EA630B;
    --sionline-yellow: #FAB513;

    --sionline-shadow:
        0 8px 25px rgba(0, 0, 0, .08);

    --sionline-radius: 12px;
    --sionline-radius-lg: 18px;
}

/* ==========================================
   GENERAL
========================================== */

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Poppins', sans-serif;
    color: var(--sionline-blue);
}

/* ==========================================
   COLORES TEXTO
========================================== */

.text-sionline {
    color: var(--sionline-blue) !important;
}

.text-sionline-orange {
    color: var(--sionline-orange) !important;
}

.text-sionline-yellow {
    color: var(--sionline-yellow) !important;
}

/* ==========================================
   COLORES FONDO
========================================== */

.bg-sionline {
    background-color: var(--sionline-blue) !important;
}

.bg-sionline-orange {
    background-color: var(--sionline-orange) !important;
}

.bg-sionline-yellow {
    background-color: var(--sionline-yellow) !important;
}

/* ==========================================
   BOTÓN PRINCIPAL
========================================== */

.btn-sionline {

    background: var(--sionline-orange);
    color: white;

    border: none;
    border-radius: var(--sionline-radius);

    padding: 14px 28px;

    font-weight: 600;

    transition: all .3s ease;
}

.btn-sionline:hover {

    background: #cf5808;
    color: white;

    transform: translateY(-2px);
}

.btn-sionline:focus,
.btn-sionline:active {

    background: #cf5808 !important;
    color: white !important;

    box-shadow: none !important;
}

/* ==========================================
   BOTÓN SECUNDARIO
========================================== */

.btn-outline-sionline {

    border: 2px solid var(--sionline-blue);

    color: var(--sionline-blue);
    background: transparent;

    border-radius: var(--sionline-radius);

    font-weight: 600;

    transition: all .3s ease;
}

.btn-outline-sionline:hover {

    background: var(--sionline-blue);
    color: white;

    transform: translateY(-2px);
}

/* ==========================================
   TITULOS
========================================== */

.title-sionline {

    color: var(--sionline-blue);
    font-weight: 800;
}

.subtitle-sionline {

    color: var(--sionline-orange);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* ==========================================
   PRECIOS
========================================== */

.price-sionline{
    font-size: 6rem;
    line-height: 1;
    font-weight: 800;
    color: var(--sionline-orange);
}

/* ==========================================
   CARDS
========================================== */

.card-sionline {

    border: none;
    border-radius: var(--sionline-radius-lg);

    box-shadow: var(--sionline-shadow);
}


/* ==========================================
   LINKS
========================================== */

a {
    transition: .3s;
}

a:hover {
    text-decoration: none;
}

/* ==========================================
   BOOTSTRAP OVERRIDES
========================================== */

.text-primary {
    color: var(--sionline-blue) !important;
}

.bg-primary {
    background-color: var(--sionline-blue) !important;
}

.btn-primary {
    background-color: var(--sionline-orange) !important;
    border-color: var(--sionline-orange) !important;
}

.btn-primary:hover {
    background-color: #cf5808 !important;
    border-color: #cf5808 !important;
}

.hero-image{
    width: 120%;
    max-width: 850px;
    height: auto;

    margin-left: -30px;

    filter: drop-shadow(0 15px 35px rgba(0,0,0,.20));
}