/* CSS BY ESTHER DRONYI */

/* 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;
}
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) */

/* MIN-WIDTH OF THE PAGE SHOULD NOT GO BELOW 400PX */
body{
    min-width: 400px;
    margin: 0 auto;
    background-color: var(--white);
    color: var(--white);
    font-family: var(--font);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
}

header, main, footer{
    width: 100vw;
    max-width: 1200px;
    margin: 0 auto;
}

header .container, #about .container, #services .container, #results .container, footer .container, nav .container {
    margin: 0 auto;
    padding-top: 16px;
    box-sizing: border-box;

}

h1,h2, h3 {
    font-weight: 700;
    font-size: 1.5rem;
    padding: 24px;
}

.hero a, h2, h3{
    animation-name: drop-in;
}


h3, h2, .container a {
    animation: entry 500ms ease-in forwards;
}

@keyframes entry {
    FROM{
        translate: 0 -30px;
    }
    to{
        translate: 0;
    }
} 

p{
    padding: 8px;
    font-size: .8rem;
}

a{
    display: block;
    text-decoration: none;
    padding: 10px 8px;
    margin-top: 8px;
    color: var(--white);
    font-weight: 600;
}
  
main a:hover{
    background-color: var(--red);
    transform: scale(1.05);
    transition: all 300ms ease-in ;
}

/* 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;
}

/* --- HEADER STYLES --- */
header{
    color: var(--blue);
    background-color: var(--black);
    filter: drop-shadow(0 0 10px var(--blue));
    width: 100vw;
}

header .container{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items:normal;
    justify-content: space-between;
}

h1{
    font-size: 1.15rem;
    margin-left: 40px;
    padding: 24px;
}

/* ADD FLOATING SVG LOGO BEFORE THE H1 */

h1::before {
    content: "";
    position: absolute;
    left: 1.5em;
    width: 2em;
    height: 2em;
    background: url('images/vanguard-logo.svg') no-repeat center/contain;
    animation: graceful-hover 7s ease-in-out infinite;
}

@keyframes graceful-hover {
 0% {
    transform: translate(0,-3px);
 }
 50% {
    transform: translate(0, 3px);
 }
100%{
    transform: translate(0, -3px);
}
}

/*---- MOBILE MENU STYLES -----*/
nav .container{
    width: 100%;
    box-sizing: border-box;
    float: right;
    display: flex;
    flex: row;
}

nav ul{
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow: hidden;
    text-align: center;
    max-height: 0;
    order: 1;
}

nav h2{
    visibility: hidden;
    height: 1px;

}

nav li a{
    display: block;
    font-family: var(--font);
    font-size: 1rem;
    padding: 1rem;
    margin: 0;
    text-transform: uppercase;
    font-weight: 600;
    text-decoration: none;
    background-color: var(--black);
    color: var(--blue);
    transition: background-color 300ms;
}

nav a:hover, nav input:hover {
    background-color: var(--blue);
    color: var(--black);
    transition: all 200ms ease;
}

nav label{
    cursor: pointer;
    display: inline-block;
    padding: 1.5rem;
    user-select: none;
    width: 2rem;
    order: 2;
}


/*----MAKE THE HAMBURGER! ===*/

label span{
    background-color: var(--white);
    display: block;
    height: .25rem;
    position: relative;
    transition: background-color 300ms ease-out;
    width: 2rem;
    margin: 0 auto;
}

label span::before, label span::after{
    background-color: var(--white);
    content: "";
    display: block;
    height: 100%;
    position: absolute;
    transition: all 200ms ease-out;
    width: 100%;
}

label span::before{
    top: .75rem;
}

label span::after{
    top: -.75rem;
}

input[type=checkbox]{
    display: none;
}

input:checked ~ ul  {
    max-height: 500px;
}

/*---- HAMBURGER TO CLOSE BUTTON STYLES ---*/
input:checked ~ label span{
    background: transparent;
}

input:checked ~ label span::before{
    transform: rotate(-45deg);
}

input:checked ~ label span::after{
    transform: rotate(45deg);
}

input:checked ~ label:not(.steps) span:before, input:checked ~ label:not(.steps) span:after {
    top: 0;
}


/*----MAIN STYLES---*/

#about, #services h2{
    color: var(--black);
}

/*---HERO STYLES---*/

/* ADD TO "INNOVATION & INVESTMENT SECTION (Photo by Kevin Matos on Unsplash)*/ 
.hero {
    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;
}
 .hero .container{
    backdrop-filter: blur(5px);
    padding-top: 16px;
    justify-content: space-between;
}

.hero p{
    margin: 0 auto;
}

.hero a{
    background-color: var(--blue);
    border-radius: 8px;
}

.hero a:hover{
    background-color: var(--red);
}



/*---SERVICES STYLES---*/
#services{
    display: grid;
    grid-template-columns: 1fr;
}

#services section{
    margin: 16px auto;
    background-color: var(--blue);
    padding: 8px;
    border-radius: 8px; 
     width: 90%;
    max-width: 1200px;
    transition: all 300ms ease-in-out;
}

#services div section:hover{
    transform: translate(0 -20px); /* from to neededto get  the pinch look?*/
    transform: scale(1.1);
}

#services h3{
    font-size: 1.1rem;
    padding: 8px;
}

/*---RESULTS STYLES ---*/
#results{
    background-color: var(--blue);
    padding-bottom: 24px;
}

.results-container{
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 24px;
}

#results-table{
    max-width: 800px;
    box-sizing: border-box;
}
.results-container h3{
    font-size: 1.5rem;
}

table{
    text-align: center;
    height: 300px;
    width: 100%;
}

thead{
    background-color: black;
}

th{
    padding: 24px 0;
    border: 2px solid var(--charcoal);
}

tr:nth-of-type(odd){
    background-color: var(--black);
}

tr:nth-of-type(even){
    background-color: var(--charcoal);
}

td{
    border: 2px solid var(--charcoal);
    padding: 16px 24px;
}

/* 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" 200ms 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;
}


/*---- CONTACT FORM STYLES----*/
#contact{
    background-color: var(--black);
}

#contact .container{
    margin: 0 auto;
}

form{
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}

label {
   width: 50vw;
   display: block;
   text-align: left;
   font-size: .8rem;
   padding: 8px 0;
}

input[type=text], input[type=email], textarea {
   box-sizing: border-box;
   width: 100%;
   padding: 10px;
   border: 2px solid var(--blue);
}

input[type=submit] {
   width: 100%;
   background-color:var(--blue);
   color: var(--white);
   padding: 15px;
   margin: 10px 0;
   border: none;
   border-radius: 4px;
   cursor: pointer;
   transition: all 200ms ease-in;
}

input[type=submit]:hover {
   background-color: var(--red);
}


/*----FOOTER STYLES -----*/
footer{
    color:var(--white);
    text-align: center;
    background-color: var(--black);
    padding: 32px;
    box-sizing: border-box;
}

footer p{
    text-align: center;
}

footer a{
    display: inline;
    text-decoration:underline;
    font-weight: 400;
    color: var(--blue);
    background-color: transparent;
}

footer a:hover{
    background-color: transparent;
}

/* MEDIA QUERIES (MEDIUM) */ 
    @media all and (min-width:800px){
        
        nav ul{
            overflow: visible;
            position:absolute;
            top: 1.5rem;
            left:.5rem;
            display: grid;
            grid-template-columns:1fr 1fr 1fr;
        }

        nav li a{
            display: inline-block;
        }

        label span, input[type=checkbox]{
            display: none;
        }
    
        #services .container{
            display: grid;
            grid-template-columns: 1fr 1fr;
            padding-bottom: 32px;
            }

        #services .container h2{
            grid-column: 1 / -1;
        }

        #results {
            grid-template-columns: 1fr 1fr;
        }
        .results-container {
            flex-direction: row;
            justify-content: space-between;
        }
        .results-table {
            width: 50%;
        }
        .bar-chart {
            width: 50%;
        }
    }


/* MEDIA QUERIES (LARGE) */
     @media all and (min-width:1024px){
        
  
        
        #services .container{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    padding-bottom: 32px;
    }

    #services .container h2{
        grid-column: 1 / -1;
    }

        /*.contact-form{
            display: grid;
            grid-template-columns: auto;
            grid-template-areas: "name email company industry details";
        }*/
    }
     /*... ran out of time.... deep sigh*/