/* =========================================
   VIP SOLUCIÓN INC.
   CUSTOMS.CSS
========================================= */


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

html,
body {
    background: #f4f6f5;
}

body {
    color: #1d2521;
}

#main-body {
    padding-top: 20px;
    padding-bottom: 40px;
}

#main-body > .container {
    max-width: 1500px;
}

.primary-content {
    width: 100%;
}


/* =========================
   HEADER
========================= */

.header {
    background: #050806;
    border-bottom: 1px solid #17301d;
}

.header .navbar-light {
    background: #050806;
    padding-top: 18px;
    padding-bottom: 18px;
}

.header .navbar-brand {
    color: #ffffff !important;
    font-weight: 900;
    letter-spacing: .5px;
    margin: 0;
    padding: 0;
}

.header .navbar-brand:hover {
    color: #39df57 !important;
}


/* =========================
   LOGO VIP SOLUCION
========================= */

.header .navbar-brand.vip-main-logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.header .navbar-brand.vip-main-logo .logo-img,
.header .logo-img {
    display: block;
    width: 390px;
    max-width: 100%;
    height: auto;
    max-height: none;
    object-fit: contain;
}


/* =========================
   TOP BAR
========================= */

.header .topbar {
    background: #08100b;
    border-bottom: 1px solid #18311f;
}

.header .topbar .btn,
.header .topbar .input-group-text {
    color: #ffffff !important;
}

.header .topbar .input-group-text {
    background: #101813;
    border-color: #24392a;
}


/* =========================
   NAVEGACION PRINCIPAL
========================= */

.header .main-navbar-wrapper {
    background: #0a100c;
    border-top: 1px solid #17281c;
    border-bottom: 1px solid #17321f;
}

.header .main-navbar-wrapper .nav-link {
    color: #ffffff !important;
    font-weight: 700;
    transition: .2s;
}

.header .main-navbar-wrapper .nav-link:hover,
.header .main-navbar-wrapper .nav-item.active > .nav-link {
    color: #39df57 !important;
}


/* =========================
   MENU MOVIL - LETRAS BLANCAS
========================= */

.header .main-navbar-wrapper .navbar-nav .nav-link,
.header .main-navbar-wrapper .navbar-nav a,
.header .navbar-collapse .navbar-nav .nav-link,
.header .navbar-collapse .navbar-nav a,
.header .navbar-collapse .nav-link,
.header .navbar-collapse a {
    color: #ffffff !important;
    opacity: 1 !important;
}

.header .main-navbar-wrapper .navbar-nav .nav-link:hover,
.header .main-navbar-wrapper .navbar-nav a:hover,
.header .navbar-collapse .navbar-nav .nav-link:hover,
.header .navbar-collapse .navbar-nav a:hover {
    color: #39df57 !important;
}


/* FLECHITAS DEL MENU */

.header .dropdown-toggle::after {
    color: #ffffff !important;
    border-top-color: #ffffff !important;
}


/* =========================
   DROPDOWN
========================= */

.header .dropdown-menu {
    background: #0c130f;
    border: 1px solid #23392a;
    box-shadow: 0 12px 30px rgba(0,0,0,.25);
}

.header .dropdown-item {
    color: #ffffff !important;
}

.header .dropdown-item:hover,
.header .dropdown-item:focus {
    background: #142019;
    color: #39df57 !important;
}


/* =========================
   SEARCH
========================= */

.header .search .form-control {
    background: #111814;
    border-color: #2a4030;
    color: #ffffff;
}

.header .search .form-control::placeholder {
    color: #9da8a0;
}

.header .search .btn {
    background: #172019;
    border-color: #2a4030;
    color: #39df57;
}

.header .search .form-control:focus {
    background: #111814;
    color: #ffffff;
    border-color: #39df57;
    box-shadow: 0 0 0 .2rem rgba(57,223,87,.12);
}


/* =========================
   CARRITO / TOOLBAR
========================= */

.header .toolbar .nav-link {
    color: #ffffff !important;
}

.header .cart-btn {
    background: #101a13;
    border: 1px solid #8b9890;
    border-radius: 8px;
}

.header .cart-btn:hover {
    border-color: #39df57;
    background: #142019;
}

.header .badge-info {
    background: #35db52;
    color: #061009;
}


/* =========================
   BREADCRUMB
========================= */

.master-breadcrumb {
    background: #0d140f;
    border-bottom: 1px solid #1b3020;
}

.master-breadcrumb .breadcrumb {
    background: transparent;
    margin-bottom: 0;
}

.master-breadcrumb a {
    color: #39df57;
}

.master-breadcrumb .breadcrumb-item {
    color: #aab4ad;
}

.master-breadcrumb .breadcrumb-item.active {
    color: #ffffff;
}


/* =========================
   HOMEPAGE
========================= */

.vip-homepage {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
}

.vip-hero {
    width: 100%;
}


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

.card {
    border-radius: 13px;
    border: 1px solid #dce6df;
    box-shadow: 0 8px 24px rgba(0,0,0,.05);
    transition: .2s;
}

.card:hover {
    border-color: #38d953;
}

.card-title {
    font-weight: 800;
}


/* =========================
   BOTONES
========================= */

.btn-primary {
    background: #25c544;
    border-color: #25c544;
    color: #061009;
    font-weight: 700;
}

.btn-primary:hover,
.btn-primary:focus {
    background: #31dd50;
    border-color: #31dd50;
    color: #061009;
}

.btn-outline-primary {
    color: #1caf38;
    border-color: #1caf38;
    font-weight: 700;
}

.btn-outline-primary:hover {
    background: #25c544;
    border-color: #25c544;
    color: #061009;
}

.btn-success {
    background: #25c544;
    border-color: #25c544;
}

.btn-success:hover {
    background: #31dd50;
    border-color: #31dd50;
}


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

a {
    color: #1caf38;
}

a:hover {
    color: #13852a;
}


/* =========================
   FORMULARIOS
========================= */

.form-control {
    border-radius: 8px;
}

.form-control:focus {
    border-color: #32d64f;
    box-shadow: 0 0 0 .2rem rgba(50,214,79,.14);
}


/* =========================
   SIDEBAR
========================= */

.sidebar .panel,
.sidebar .card {
    border-radius: 11px;
    overflow: hidden;
}

.sidebar .card-header,
.sidebar .panel-heading {
    background: #0c140f;
    color: #ffffff;
    border-bottom: 1px solid #1c3422;
}

.sidebar a {
    color: #1caf38;
}

.sidebar a:hover {
    color: #22be40;
}


/* =========================
   STORE / PRODUCTOS
========================= */

.product-order-container .card,
.products .card,
.product .card {
    border-radius: 14px;
    overflow: hidden;
}

.product-order-container .card:hover,
.products .card:hover,
.product .card:hover {
    border-color: #35d852;
    box-shadow: 0 14px 32px rgba(33,153,57,.10);
}

.product-order-container .card-header,
.products .card-header {
    background: #0b130e;
    color: #ffffff;
}

.product-order-container .price,
.products .price {
    color: #1fbd3e;
    font-weight: 900;
}


/* =========================
   TABLAS
========================= */

.table thead th {
    background: #0c140f;
    color: #ffffff;
    border-color: #1d3524;
}

.table-hover tbody tr:hover {
    background: #f0f8f2;
}


/* =========================
   ALERTAS
========================= */

.alert-success {
    background: #e8f9ec;
    border-color: #b9eec3;
    color: #16692a;
}

.alert-info {
    background: #edf7f0;
    border-color: #c7e7ce;
    color: #226238;
}


/* =========================
   PAGINACION
========================= */

.page-item.active .page-link {
    background: #25c544;
    border-color: #25c544;
}

.page-link {
    color: #1caf38;
}

.page-link:hover {
    color: #13852a;
}


/* =========================
   FOOTER
========================= */

.footer,
section#footer,
footer {
    background: #050806 !important;
    color: #aeb9b1 !important;
    border-top: 1px solid #1c3723;
}

.footer a,
section#footer a,
footer a {
    color: #39df57 !important;
}

.footer a:hover,
section#footer a:hover,
footer a:hover {
    color: #66f17d !important;
}


/* =========================
   TABLET
========================= */

@media (max-width: 1200px) {

    #main-body > .container {
        max-width: 100%;
    }

    .header .navbar-brand.vip-main-logo .logo-img,
    .header .logo-img {
        width: 330px;
        max-height: none;
    }

}


/* =========================
   MOVIL
========================= */

@media (max-width: 991px) {

    .header .navbar-brand {
        font-size: 21px;
    }

    .header .navbar-collapse {
        background: #08100b;
    }

    .header .navbar-collapse .nav-link,
    .header .navbar-collapse a {
        color: #ffffff !important;
        opacity: 1 !important;
    }

    .header .navbar-collapse .nav-link:hover,
    .header .navbar-collapse a:hover {
        color: #39df57 !important;
    }

}


/* =========================
   TELEFONO
========================= */

@media (max-width: 768px) {

    #main-body {
        padding-top: 10px;
    }

    .header .navbar-light {
        padding-top: 15px;
        padding-bottom: 15px;
    }

    .header .navbar-brand.vip-main-logo {
        max-width: calc(100% - 145px);
    }

    .header .navbar-brand.vip-main-logo .logo-img,
    .header .logo-img {
        width: 280px;
        max-width: 100%;
        height: auto;
        max-height: none;
    }

    /* FUERZA TODO EL MENU MOVIL A BLANCO */

    .header .main-navbar-wrapper a,
    .header .main-navbar-wrapper .nav-link,
    .header .navbar-collapse a,
    .header .navbar-collapse .nav-link {
        color: #ffffff !important;
        opacity: 1 !important;
    }

}


/* =========================
   TELEFONOS PEQUEÑOS
========================= */

@media (max-width: 480px) {

    .header .navbar-brand.vip-main-logo {
        max-width: calc(100% - 135px);
    }

    .header .navbar-brand.vip-main-logo .logo-img,
    .header .logo-img {
        width: 245px;
        max-width: 100%;
        height: auto;
    }

}