/* CSS BY MEQUILA MURARIK */

/* IMPORTED FONTS*/
/* IMPORT "INTER" FROM GOOGLE FONTS" */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

/* CSS RESET */
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
    font-family: 'Inter', sans-serif;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* ROOT VARIABLES */
:root {
    --blue: #007BFF;
    --red: #FF4500;
    --white: #EAEAEA;
    --black: #000000;
    --charcoal: #333333;
    --font: "Inter", sans-serif;
}

/* GLOBAL STYLES (MOBILE FIRST (SMALL) */
body{
    font-family: var(--font);
    background-color: var(--white);
    margin: auto;
    width: 100%;
    min-width: 400px;
}
header {
    background-color: var(--black);
    color: var(--blue);
    padding: 16px 0;
    display: flex;
    justify-content: space-between;
    position: relative;
}
h1 {
    font-size: 1.5rem;
    font-weight: bold;
    position: relative;
    display: flex;
    align-items: center;
}
nav {
    background-color: var(--black);
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    z-index: 9999;
    padding: 0;
}
nav label[for="menu-toggle"] {
    position: absolute;
    top: 0.5rem;
    right: 1rem;
}
nav ul {
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow: hidden;
    text-align: center;
    max-height: 0;
}
nav h2 {
    visibility: hidden;
    height: 1px;
    margin: 0;
}
nav li {
    display: block;
    font-family: sans-serif;
    font-size: 1.5rem;
    padding: 1rem;
    text-transform: uppercase;
    font-weight: bold;
    text-decoration: none;
}
nav a{
    text-decoration: none;
    color: var(--blue);
}
nav a:hover, nav input:hover{
    background-color: var(--blue);
    color: var(--black);
    padding: 8px 16px;
} 
nav label {
    cursor: pointer;
    display: inline-block;
    padding: 1.5rem;
    user-select: none;
}
label span {
    background-color: white;
    display: block;
    height: .25rem;
    position: relative;
    transition: background-color .3s ease-out;
    width: 2rem;
}
label span:before, label span:after {
    background: white;
    content: '';
    display: block;
    height: 100%;
    position: absolute;
    transition: all .2s ease-out;
    width: 100%;
}
label span:before {
    top: .75rem;
}
label span:after {
    top: -.75rem;
}
nav input {
  display: none;
}
input:checked ~ ul {
    max-height: 500px;
}
h2{
    color: var(--black);
    font-size: 1.5rem;
    font-weight: bold;
    margin: 16px 0 16px 16px;
}
#innovation h2{
    color: var(--white);
    padding-bottom: 16px;
}
p{
    color: var(--black);
    font-size: 1rem;
    padding-bottom: 16px;
}
#innovation p{
    color: var(--white);
}
/* MIN-WIDTH OF THE PAGE SHOULD NOT GO BELOW 400PX */
#innovation > div {
    background-color: rgba(0, 0, 0, 0);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    padding: 8px;
    max-width: 90%;
}
#expertise {
    padding-top: 16px;
}
/* ADD A DIV WITH THE CLASS OF CONTAINER TO EVERY CONTENT CONTAINER THIS IS ALLOW THE BASE ELEMENTS TO BE 100% WIDTH, BUT CONSTRAIN THE ACTUAL CONTENT TO 90% */
.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}
h3 {
    font-size: 1.25rem;
    font-weight: bold;
    padding-bottom: 8px;
    padding-left: 16px;
}
#services{
    padding-bottom: 32px;
}
#services p{
    color: var(--white);
    padding-left: 8px;
}
.items {
    color: var(--white);
    background-color: var(--blue);
    margin-bottom: 16px;
    padding: 16px 16px 8px 8px;
    border-radius: 8px;
}
.items:hover {
    animation: float 2s ease-in-out ;
}
#results {
    background-color: var(--blue);
    padding-top: 16px;
    padding-bottom: 16px;
    color: var(--white);
}
#results h2, #results p {
    color: var(--white);
}
#results h3{
    padding-top: 24px;
    padding-bottom: 16px;
}
#results p {
    padding-left: 8px;
}
#results h3{
    font-size: 1.5rem;
}

table {
    background-color: var(--black);
    width: 100%;
    font-size: 0.75rem;
    font-weight: bold;
}
th, td {
    text-align: center;
    border-bottom: 1px solid #333333;
    padding: 16px;
}
th:first-of-type, td:first-of-type{
    border-right: 1px solid #333333;
}
th:nth-child(2), td:nth-child(2){
    border-right: 1px solid #333333;
}
tr:nth-child(even) {
    background-color: var(--charcoal);
}
#growth {
    padding-top: 32px;
    padding-bottom: 8px;
}
#contact {
    background-color: var(--black);
    padding-top: 16px;
}
#contact h2 {
    font-size: 1.5rem;
    color: var(--white);
    padding-bottom: 16px;
}
#contact p{
    color: var(--white);
}
form {
    color: var(--white);
}
form input {
    width: 100%;
    padding: 8px 0;
    margin: 6px 0 20px 0;
    border: 2px solid #007BFF;
}
textarea {
    width: 100%;
    padding: 0;
    margin: 6px 0 20px 0;
    border: 2px solid #007BFF;
}
@keyframes floatText {
  from {
    transform: translateY(-20px); 
  }
  to {
    transform: translateY(0); 
  }
}
.animated-text {
    animation-name: floatText;
    animation-duration: 1.2s;
    animation-timing-function: ease-in-out;
}
/* ADD TO "INNOVATION & INVESTMENT SECTION (Photo by Kevin Matos on Unsplash) */
 #innovation {
    background: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)), url('images/vanguard-hero.jpg') no-repeat center center/cover;
    height: 80vh;
    display: grid;
    place-items: center;
    text-align: center;
    padding: 1rem;
    overflow: hidden;
    box-shadow: 0px 5px 5px #007BFF inset;
}
button, input[type="submit"] {
    background-color: var(--blue);
    border: none;
    color: var(--white);
    padding: 16px 24px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 1.15rem;
    font-weight: bold;
    border-radius: 8px;
    width: 100%;
}
@keyframes float {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(10px);
    }
    100% {
        transform: translateY(0);
    }
}
/* ADD FLOATING SVG LOGO BEFORE THE H1 */
h1::before {
    display: inline-block;
    content: "";
    left:-.5rem;
    width: 3.75rem;
    height: 3.75rem;
    background: url('images/vanguard-logo.svg') no-repeat center/contain;
    padding-right: 16px;
    animation: float 5s ease-in-out infinite;
}
.expand-button {
  transition: transform 0.5s ease-in-out; 
}
.expand-button:hover {
  transform: scale(1.02); 
  background-color: #FF4500;
}
footer {
    background-color: var(--black);
    text-align: center;
}
footer p {
    color: var(--white);
}
footer a {
    text-decoration: none;
    color: var(--white);
}
/* THIS ONE IS DONE FOR YOU */
#bar-chart {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: flex-end;
    justify-content: space-around;
    gap: 1rem;
    height: 300px;
    width: 100%;
    max-width: 800px;
    padding: 1rem;
    position: relative;
}
/* ADD ON TRANSITION ON HEIGHT */
.bar {
    width: 50px;
    background: var(--charcoal);
    border-radius: 10px;
    position: relative;
    transition: height 0.5s ease-in;
    height: 0;
}
/* THIS ONE IS DONE FOR YOU */
.bar::after {
    content: attr(data-year);
    position: absolute;
    bottom: -25px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1rem;
    font-weight: bold;
    color: var(--white);
}
@keyframes stepUp {
    0% {
        height: 0;
    }
    100% {
        height: var(--height);
    }
}
/* ADD ANIMATION ON stepUp for 1s ease-in-out forwards */
.bar {
    animation: stepUp 1s ease-in-out forwards;
}


/* MEDIA QUERIES (MEDIUM) */ 
@media screen and (min-width: 800px) {
    .results-container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        flex-direction: row;
        justify-content: space-between;
    }
    .results-table {
        width: 50%;
    }
    .bar-chart {
        width: 50%;
        grid-column: 2/3;
    }
    nav input[type="checkbox"],
    nav label[for="menu-toggle"] {
        display: none;
    }
    nav ul {
        max-height: none;  
        overflow: visible;
        display: flex;                
        gap: 8px;                   
        padding: 0;
        margin: 0;
        text-align: left;
    }
    nav a {
        font-size: 1rem;
        padding: 0.5rem 1rem;
        color: var(--blue);
    }
    nav a:hover {
        background-color: var(--blue);
        color: var(--black);
        border-radius: 4px;
    }
    #services .container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 16px;
    }
    #services h2 {
        grid-column: 1/-1;
    }
}


/* MEDIA QUERIES (LARGE) */
@media screen and (min-width: 1024px) {
    nav {
        margin-right: 150px;
    }
    #innovation button {
        max-width: 1024px;
    }
}

