/* @import url('https://fonts.googleapis.com/css2?family=DM+Serif+Text&display=swap'); */
@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@400;500;700&display=swap');

:root {
/*     --off-white: #f9faf4; */
  --nav-primary: #b43b2b;
  --primary-accent: #bd5438;
  
    --off-white: #131110;
    --primary-color: #4a6163;
    --secondary-color: #ffc94b;
    --red-color: #ac3d39;
    --red-color-10: #bf443f;
    --red-color-20: #ff904b;
    --red-color-30: #cc6965;
    --red-color-40: #d27c79;
    --red-color-50: #d98e8c;
    --red-color-60: #dfa19f;
    --red-color-70: #e5b4b2;
    --red-color-80: #ecc7c5;
}

body {
    background-color: #f8f2f1;
    font-family: "Lexend", sans-serif;
    color: #f9faf4;
    margin: 0 !important;
}

/* Generic elements */
a {
    color: white;
}

a:hover {
    text-decoration: none !important;
}

hr {
    border-color: #c7c7c7;
}

/* -- bootstrap overrides -- */
.container-fluid {
    padding: 0;
}

.btn {
    border: none !important;
    border-radius: 0.3em !important;
}

.btn-default,
.btn-default:hover {
    color: white !important;
    background-color: #f3900e;
}

.btn-info,
.btn-info:hover {
    background-color: var(--secondary-color);
}

.btn-gift {
    margin-top: 5px;
}

.form-control {
    border-radius: 4px !important;
}

.close {
    color: white;
    opacity: 1.0;
    text-shadow: none;
}

.modal-content {
    background-color: #302C2A;
    border: none;
    border-radius: 0.7em;
}

.banner img {
    height: 20rem;
    width: 100%;
    object-fit: cover;
    margin-bottom: 20px;
}

.toolbar {
    display: flex;
    padding: 0 0 1.25em 0;
    gap: 10px;
}

.panel {
    background-color: #302C2A;
    border: none;
    border-radius: 0.3em !important;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
}

.panel-heading {
    background-color: var(--primary-accent) !important;
    border: none;
    border-radius: 4px 4px 0 0;
    font-size: 1.1em;
    color: white !important;
    font-family: "Lexend", sans-serif;
    letter-spacing: .06rem;
    font-weight: 300 !important;
}

.panel-body {
    padding: 1.4em;
    background-color: #3b3331;
    border-radius: 4px !important;
}

.packages-image {
    padding: 0 1em;
}

.package {
    border-color: #272f3b;
    border-width: 0.15em;
    border-radius: 0.5em;
    border-style: solid;
    padding: 0.5em;

    margin: 0 0.9em 0.9em 0 !important;
    float: left;
}

.modal-header {
    background-color: var(--red-color-20);
    border-radius: 0.7em 0.7em 0 0;
    color: white;
}

.modal-title {
    font-family: "Lexend", sans-serif;
}


/* Recent purchases */
.payments li {
    border: none !important;
}

.avatar {
    margin-right: 0.55em !important;
}


.avatar img {
    border-radius: 0.2em;
}

/* Dropdowns */
.dropdown-menu li a {
    color: black !important;
}

/* Navbar */
.navbar {
    background-color: var(--nav-primary);
    color: #727122 !important;
    margin-bottom: 0 !important;
    border-top: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-bottom: 0.5em solid rgba(0, 0, 0, .1);
    border-radius: 0px;
}

.navbar a {
    color: #fcfcfc !important;
    font-family: "Lexend", sans-serif;
    font-size: 1.05em;
    font-weight: 300;
}

/* Footer */
.footer {
    border: none;
}


/* -- generic packages -- */
.package {
    float: left;
    width: 19.3em !important;
    padding: 1.2em 1em;
    border-style: none !important;
}

.img-rounded {
    border-radius: 4px;
}

.category .packages-image .package .info .text .name,
.module .featured-package .info .text .name {
    font-family: "Lexend", sans-serif;
    font-size: 1.4rem;
}

.category .packages-image .package .info {
    max-width: 99%;
}

.price,
.module .featured-package .info .text .price {
    color: #679f11;
    font-size: 1.4rem;
    font-family: "Lexend", sans-serif;
}

.discount {
    color: #ef4444 !important;
    font-size: 1.2rem;
}


/* -- featured package module -- */
.module .featured-package .info {
    max-width: 99%;
}

/* -- recent purchases module -- */
.module .payments li .info .ign {
    font-family: "Lexend", sans-serif;
}


/* special sale banner 📣 */
.sale-banner {
    background-color: #6f261d;
    color: white;
    text-align: center;
    padding: 10px;
    position: sticky;
    top: 0;
    z-index: 10;
}

.sale-banner p {
    margin: 0;
}

/* site footer */
.footer {
    background-color: #131110;
    margin-bottom: 0 !important;
    text-align: center;
    padding: 3.5em 0;
}

.mug-disclaimer {
    color: #57534e;
}

.contact-us {
    color: #78716c !important;
}






/* extra whitespace for tebex editor mishap */