/**
 * Short description using Doxygen-style comment format
 *
 * The first sentence of the long description starts here and continues on this
 * line for a while finally concluding here at the end of this paragraph.
 *
 * The long description is ideal for more detailed explanations and
 * documentation. It can include example HTML, URLs, or any other information
 * that is deemed necessary or useful.
 *
 * @tag This is a tag named 'tag'
 *
 * TODO: This is a todo statement that describes an atomic task to be completed
 *   at a later date. It wraps after 80 characters and following lines are
 *   indented by 2 spaces.
 */

/* ==========================================================================
   TYPOGRAPHY
   ========================================================================== */
/* Import Changa & Poppins Font */
@import url('https://fonts.googleapis.com/css2?family=Changa:wght@200;300;400;500;523;600;700;800&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;1,100;1,200;1,300;1,400&display=swap');

h1,h2,h3,h4,h5 {
    font-family: 'Changa', sans-serif;
}

p {
    font-family: 'Poppins', sans-serif;
}

a {
    color: black;
}

a:hover {
    text-decoration: none;
    color: #f71454;
}

button {
    font-family: 'Changa', sans-serif;
}

footer {
    font-family: 'Changa', sans-serif;
}

footer a {
    color: #f71454;
}


/* ==========================================================================
   PAGE ELEMENTS
   ========================================================================== */

/* Hero Section
========================================================================== */
/* Hero Banner */
.hero-container {
    background-image: url('../img/hero-background.jpg');
    background-size: cover;
}

/* Hero Content Container */
.hero-content-container {
    /* width: 1280px; */
    max-width: 75%;
    margin: auto;
}

/* Logo Styling */
.logo {
    width: 300px;
    margin-top: 3em;    
}

/* Site main description */
.site-info {
    color: white;
    margin-top: 4em;
}

/* Login Banner */
.login-banner {
    display: flex;
    padding: 1.5em;
    background: #FFFFFF40 0% 0% no-repeat padding-box;
    box-shadow: 0px 3px 6px #00000029;
    border-radius: 10px;
    margin-top: 2em;
    margin-bottom: 2em;
    opacity: 1;
    justify-content: space-between;
}

.login-banner p {
    color: white;
    margin: auto 0;
}

.mockup-container {
    margin: auto;
}

.client-mockups {
    max-width: 100%;
}

/* Page Content Section
========================================================================== */
.page-content-container {
    max-width: 75%;
    margin: auto;
}

.page-content-container .page-info {
    display: block;
    margin: 4em auto;
    text-align: center;
    margin-bottom: 0;
}


/* System Cards
========================================================================== */
.card-container {
    margin: auto;
    text-align: center;
    display: flex;
    justify-content: space-evenly;
    padding: 15px;
    margin-bottom: 4em;
}

.system-card {
    background: #FFFFFF 0% 0% no-repeat padding-box;
    /* box-shadow: 0px 3px 10px #F71454; */
    border-radius: 20px;
    opacity: 1;
    max-width: 280px;
    margin: 0.25em;
    margin-bottom: 1em;
    padding: 1em;
    transition: box-shadow 0.2s ease-in-out;
    cursor: pointer;
}

.system-card img {
    height: 48px;
    width: 48px;
    color: #f71454
}

.system-card .card-description {
    margin-top: 0.75em;
    font-size: 15px;
    color: #B1B1B1;
}

.card-title {
    margin-top: 0.75em;
}

.system-card:hover {
    box-shadow: 0px 5px 15px #F71454;
    color: #f71454;
}

/* Footer
========================================================================== */
footer {
    background: #E8E8E8 0% 0% no-repeat padding-box;
    padding: 1em;
    position: fixed;
    bottom: 0;
    width: 100%;
    text-align: center;
}


/* ==========================================================================
   BUTTONS
   ========================================================================== */
/* Login Button */
.login-banner button {
    padding: 1em;
    color: white;
    border: 0px;
    background: transparent linear-gradient(106deg, #F71454 0%, #FF2128 100%) 0% 0% no-repeat padding-box;
    border-radius: 10px;
    opacity: 1;
}

/* ==========================================================================
   MEDIA QUERIES
   ========================================================================== */
/* Mobile Devices */
@media screen and (max-width: 1300px) {
    .login-banner {
        display: block;
    }
    
    .login-banner button {
        margin-top: 1em;
    }

    img.client-mockups {
        display: none;
    }
} 

@media screen and (max-width: 600px) {
    .hero-content-container {
        text-align: center;
        max-width: 90%;
    }

    .page-content-container {
        max-width: 90%;
    }

    .logo {
        max-width: 100%;
    }
}