:root {
    /**** 
    /**** COLORS CLEAN THIS UP *****/
    /* Base */
    --singularity: #030303;
    --asteroid: #333333;
    --moonrock: #5c5c5c;
    --spacedust: #919191;
    --missioncontrol: #c2c2c2;
    --neutronstar: #ffffff;
    --northernlights: #1AC5B1;
    --jwst: #F6AA00;
    --stellardwarf: #D94949;
    --neptune: #50A0FE;
    --teesi-primary: #21409A;

    /* Backgrounds */
    --bg-primary: var(--neutronstar);
    --bg-secondary: var(--missioncontrol);
    --bg-tertiary: var(--spacedust);
    --bg-quaternary: var(--moonrock);
    --bg-quinary: var(--asteroid);
    --bg-inverse: var(--singularity);

    /* Text */
    --text-primary: var(--singularity);
    --text-secondary: var(--asteroid);
    --text-tertiary: var(--moonrock);
    --text-inverse: var(--neutronstar);
    --text-disabled: var(--missioncontrol);

    /* INVERSE THIS LATER */
    --text-positive: var(--northernlights);
    --text-positive-hover: #93F1E4;
    --text-positive-pressed: #BFF6EF;
    
    --text-warning: var(--jwst);
    --text-warning-hover: #FFDF99;
    --text-warning-pressed: #FFECC0;
    
    --text-negative: var(--stellardwarf);
    --text-negative-hover: #EA9A9A;
    --text-negative-pressed: #F8DDDD;
    
    --text-accent: var(--teesi-primary);
    --text-accent-hover: #254BBA;
    --text-accent-pressed: #3C63D2;

    /* Buttons */
    --btn-primary: var(--singularity);
    --btn-primary-hover: var(--asteroid);
    --btn-primary-pressed: var(--moonrock);

    --btn-secondary: var(--asteroid);
    --btn-secondary-hover: var(--moonrock);
    --btn-secondary-pressed: var(--spacedust);

    --btn-inverse: var(--neutronstar);
    --btn-inverse-hover: var(--missioncontrol);
    --btn-inverse-pressed: var(--spacedust);

    --btn-disabed: var(--missioncontrol);

    /* Surfaces */
    --surface: var(--neutronstar);
    --surface-hover: var(--missioncontrol);
    --surface-pressed: var(--spacedust);
    --surface-disabled: var(--asteroid);

    /* Outlines / Borders */
    --outline-primary: var(--neutronstar);
    --outline-secondary: var(--missioncontrol);
    --outline-tertiary: var(--spacedust);
    --outline-disabled: var(--asteroid);
    --outline-focused: var(--neptune);

    /* Inputs */
    --input-surface-primary: var(--neutronstar);

    /***** FONTS *****/
    /* Base */
    --font-family-primary: "Inter", sans-serif;

    --font-style-italic: italic;
    --font-style-uppercase: uppercase;
    --font-style-underline: underline;

    --font-letter-spacing: 16px;
    --font-line-height: 125%;

    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    --font-weight-black: 900;

    --font-core-94: 94px;
    --font-core-92: 92px;
    --font-core-75: 75px;
    --font-core-60: 60px;
    --font-core-48: 48px;
    --font-core-40: 40px;
    --font-core-32: 32px;
    --font-core-24: 24px;
    --font-core-20: 20px;
    --font-core-16: 16px;
    --font-core-14: 14px;
    --font-core-12: 12px;

    /* Headings */
    --heading-tagline: var(--font-core-92);
    --heading-3xlarge: var(--font-core-60);
    --heading-2xlarge: var(--font-core-48);
    --heading-xlarge: var(--font-core-40);
    --heading-large: var(--font-core-32);
    --heading-midsize: var(--font-core-24);
    --heading-small: var(--font-core-20);
    --heading-xsmall: var(--font-core-16);

    /* Body */
    --body-xlarge: var(--font-core-24);
    --body-large: var(--font-core-20);
    --body-midsize: var(--font-core-16);
    --body-small: var(--font-core-14);
    --body-xsmall: var(--font-core-12);

    /***** SPACING *****/
    /* Base */
    --spacing-core-80: 80px;
    --spacing-core-60: 60px;
    --spacing-core-48: 48px;
    --spacing-core-36: 32px;
    --spacing-core-24: 24px;
    --spacing-core-16: 16px;
    --spacing-core-8: 8px;
    --spacing-core-4: 4px;

    /* Spacing */
    --spacing-2xlarge: var(--spacing-core-80);
    --spacing-xlarge: var(--spacing-core-48);
    --spacing-large: var(--spacing-core-36);
    --spacing-midsize: var(--spacing-core-24);
    --spacing-small: var(--spacing-core-16);
    --spacing-xsmall: var(--spacing-core-8);
    --spacing-2xsmall: var(--spacing-core-4);

    /* Border Radius */
    --border-radius-midsize: var(--spacing-core-24);
    --border-radius-none: 0;

    /* Card Spacing */
    --spacing-card: 44px;
}

/*--------------------------------------------*/
/******************* GENERAL ******************/
/*--------------------------------------------*/
/***** CORE CSS UTILITIES *****/
/* Font Weights */
.weight-light {
    font-weight: var(--font-weight-light);
}

.weight-regular {
    font-weight: var(--font-weight-regular);
}

.weight-medium {
    font-weight: var(--font-weight-medium);
}

.weight-semibold {
    font-weight: var(--font-weight-semibold);
}

.weight-semibold {
    font-weight: var(--font-weight-bold);
}

/* Font Styles */
.font-underline {
    text-decoration: var(--font-style-underline);
}

.weight-extrabold {
    font-weight: var(--font-weight-extrabold);
}

.weight-heavy {
    font-weight: var(--font-weight-heavy);
}

/* Headings */
.heading-tagline {
    font-size: var(--heading-tagline);
}

.heading-3xlarge {
    font-size: var(--heading-3xlarge);
}

.heading-2xlarge {
    font-size: var(--heading-2xlarge);
}

.heading-xlarge {
    font-size: var(--heading-xlarge);
}

.heading-large {
    font-size: var(--heading-large);
}

.heading-midsize {
    font-size: var(--heading-midsize);
}

.heading-small {
    font-size: var(--heading-small);
}

.heading-xsmall {
    font-size: var(--heading-xsmall);
}

.text-align-justify {
    text-align: justify;
    text-align-last: justify;
}

.text-align-justify.last {
    text-align-last: left;
}

/***** Inputs *****/
.input-form {
    /*margin: 0px 160px 48px 160px;*/
    margin-bottom: 48px;
}

.input-form label {
    margin-bottom: 12px;
}

.input-form input, .input-form textarea {
    background-color: var(--input-surface-primary);
    padding: 16px 24px;
    font-size: var(--body-large);
    border-radius: 8px;
    border-color: var(--outline-disabled);
}

.input-form input:focus, .input-form textarea:focus {
    background-color: var(--input-surface-primary);
    border: 1px solid var(--outline-focused);
}

/***** Layouts *****/
body {
    font-family: var(--font-family-primary);
    font-weight: var(--font-weight-regular);
    font-size: var(--body-large);
    line-height: var(--font-line-height);
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

.container {
    padding: 0 120px;
}

.container.main-layout {
    margin-top: 0;
}

.main-content {
    margin-bottom: var(--spacing-xlarge);
}

.main-content .description {
    margin: 36px 0 48px 0;
    color: var(--text-secondary);
}

header {
    margin-bottom: 52px;
    align-content: center;
}

.footer {
    font-size: var(--body-midsize);
    color: var(--text-secondary);
}

/***** Placeholders *****/
.image-placeholder {
    width: 100%;
    background-color: var(--bg-secondary);
    height: 600px;
}

/***** Headings *****/
h1 {
    font-size: var(--heading-3xlarge);
    font-weight: var(--font-weight-semibold);
}

/***** Headings Descriptions *****/
p.header-text {
    font-size: var(--body-large);
    margin-top: var(--spacing-small);
}

/***** Links *****/
a {
    color: var(--text-accent);
}

a:hover {
    color: var(--text-accent-hover);
}

header a  {
    display: block;
    color: var(--text-primary);
    margin: 0 0 16px 0;
    padding: 0;
    text-decoration: none;
}

header a:hover {
    color: var(--text-secondary);
    text-decoration: underline;
}

p {
    line-height: var(--font-line-height);
}

/***** Buttons *****/
.btn {
    border-radius: var(--border-radius-midsize);
    padding: 8px 16px;
}

.btn.btn-primary {
    background-color: var(--bg-inverse);
    border: 0px;
    color: var(--text-inverse);
}

.btn.btn-primary:hover {
    background-color: var(--bg-quinary);
    border: 0px;
    color: var(--text-inverse);
}

.btn.btn-secondary {
    background-color: transparent;
    border: 1px solid var(--outline-primary);
    color: var(--text-primary);
}

.btn.btn-secondary:hover {
    background-color: transparent;
    border: 1px solid var(--outline-secondary);
    color: var(--text-secondary);
}

.btn.btn-tertiary {
    background-color: transparent;
    border: 0px;
    color: var(--text-primary);
}

/***** Background Images *****/
#home {
    background-image: url('./assets/images/home/bg-home-2.png');
    background-size: cover;
    background-attachment: fixed;
    align-content: center;
}

/*--------------------------------------------*/
/****************** BOOTSTRAP *****************/
/*--------------------------------------------*/
/***** Badge *****/
.badge.primary {
    font-weight: var(--font-weight-light);
    font-size: var(--body-midsize);
    background-color: transparent;
    border: 1px solid var(--outline-tertiary);
}

/***** Global Header *****/
.navbar {
    padding: var(--spacing-small) var(--spacing-midsize);
    color: var(--text-primary);
    align-content: center;
}

.navbar .nav-item .nav-link {
    padding: var(--spacing-xsmall) 0;
    margin: var(--spacing-xsmall);
}

.navbar .nav-item .nav-link.active {
    border-bottom: 1px solid var(--outline-primary);
}

.navbar.navbar-custom {
    background-color: var(--bg-primary);
}

.navbar ul li {
    padding: 0 var(--spacing-xsmall);
}

.navbar ul li a:hover {
    border-bottom: 1px solid var(--outline-primary);
}

.navbar-brand {
    font-family: "Midnight Motion", sans-serif;
    font-size: var(--body-xlarge);
    font-weight: var(--font-weight-medium);
    text-transform: var(--font-style-uppercase);
    color: var(--text-primary);
}

/**** Card *****/
.card {
    justify-content: flex-end;
    position: relative;
    color: var(--text-primary);
    border: 1px solid var(--outline-primary);
}

.card, .card-img-top, .card img {
    border-radius: var(--border-radius-none);
    border: 0;
}

.card .card-title {
    font-size: var(--heading-large);
    font-weight: var(--font-weight-medium);
}

.card .card-text {
    font-weight: var(--font-weight-light);
    color: var(--text-secondary);
}

.card .card-text.large {
    font-size: var(--body-xlarge);
}

.card .card-content {
    padding: 16px 0 0 0;
}

.card-image-hover {
    display: none;
}

.card:hover .card-image-hover {
    display: block;
}

.card:hover .card-image {
    display: none;
}

.main-content .card {
    background-image: url('./assets/images/home/bg-blueabstract-4.jpeg');
    background-size: cover;
    align-content: center;
    border-radius: 12px;
    color: var(--text-inverse);
    padding: 48px 60px;
    margin-bottom: 24px;
}

.main-content .contact .card {
    background-image: none;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    padding: 0;
    border: 1px solid var(--outline-secondary);
}

.main-content .contact .card img {
    border-radius: 11px 11px 0 0;
}

.main-content .contact .card p {
    color: var(--text-secondary);
}

.main-content .contact .card .bottom-spacer {
    padding-bottom: 50px;
}

.card-collection h3 {
    margin-bottom: 16px;
}

.card-collection .card {
    padding-bottom: 48px;
}

.card-collection .row {
    margin-bottom: 48px;
}

.card-collection .card .card-text.category {
    text-transform: var(--font-style-uppercase);
    font-size: var(--body-midsize);
}

/*--------------------------------------------*/
/****************** HOME PAGE *****************/
/*--------------------------------------------*/
.main-content section {
    text-align: justify;
    text-justify: inter-word;
}

.card .contact-info {
    margin-top: 36px;
    background-image: none;
}

.card .contact-info .phone {
    margin-bottom: 36px;
}

section.callout {
    margin-bottom: 24px;
}

/*--------------------------------------------*/
/***************** RESPONSIVE *****************/
/*--------------------------------------------*/
@media only screen and (min-width: 320px) {
    
    .container.main-layout {
        margin-top: var(--spacing-midsize);
    }

    .container {
        padding: 0 24px;
    }

    .container .main-logo {
        width: 75%;
    }

    .main-content header {
        margin-bottom: 24px;
    }
 
}

@media only screen and (min-width: 576px) {

    .container.main-layout {
        margin-top: var(--spacing-large);
    }

    .container {
        padding: 0 24px;
    }

    .container .main-logo {
        width: 75%;
    }

    .main-content header {
        margin-bottom: 24px;
    }
 
}

@media only screen and (min-width: 768px) {

    .container.main-layout {
        margin-top: var(--spacing-large);
    }

    .container {
        padding: 0 48px;
    }

    .container .main-logo {
        width: 75%;
    }

    .main-content header {
        margin-bottom: 36px;
    }
 
}

@media only screen and (min-width: 992px) {

    .container.main-layout {
        margin-top: var(--spacing-large);
    }

    .container {
        padding: 0 60px;
    }
    
    .container .main-logo {
        width: 50%;
    }
}

@media only screen and (min-width: 1200px) {

    .container.main-layout {
        margin-top: var(--spacing-xlarge);
    }

    .container {
        padding: 0 120px;
    }
 
}

@media only screen and (min-width: 1400px) {

    .container.main-layout {
        margin-top: var(--spacing-large);
    }
 
}