@font-face {
	font-family: EYInterstate-Light;
	src: url(code/fonts/ey/EYInterstate-Light.woff);
}

@font-face {
	font-family: EYInterstate;
	src: url(code/fonts/ey/EYInterstate-Regular.woff);
}

@font-face {
	font-family: Georgia;
	src: url(code/fonts/ey/georgia.ttf);
}

/* ========== buttons ========== */

.button1 {
    border: solid 1px #ffffff;
    background-color: #2e2e38;
    color: #ffffff;
    padding: .75em 1em;
    position: relative;
    top: 0;
    box-shadow: none;
    transition: .3s;
    font-weight: 700 !important;
}

.button1:hover,
.button1:focus {
    text-decoration: none;
    cursor: pointer;
    color: #2e2e38;
    background-color: #ffffff;
}

.button-white {
    border: solid 1px #ffffff;
    padding: .75em 1em;
    position: relative;
    top: 0;
    box-shadow: none;
    transition: .3s;
    font-weight: 700 !important;
    float: right;
    background-color: rgba(255, 255, 255, 0);
    color: #ffffff;
}

.button-white:hover,
.button-white:focus {
    text-decoration: none;
    cursor: pointer;
    color: #2e2e38;
    background-color: #ffffff;
}

.button-mobile {
    background-color: #ffe600 !important;
    margin: 5px;
    width: 11em;
    margin-bottom: 10px;
    border: none !important;
    padding-top: 5px;
    padding-bottom: 5px;
    font-family: EYInterstate-Light !important;
    font-size: 1.6em;
}

.button-mobile:hover,
.button-mobile:focus,
.button-mobile:visited {
    text-decoration: none;
    cursor: pointer;
    color: #2e2e38 !important;
}



/* ========== MISCELLANEOUS ========== */

.why {
    color: #ffffff;
    background-image: linear-gradient(180deg, rgba(0,0,0,.20) 0%, rgba(0,0,0,0.90) 100%), url("https://csgexternal.ey.com/2023/2303-4202103/images/4-column-crop-1920x700.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 0px 25px 0px 25px;
    text-shadow: 1px 1px #2e2e38;
}

/* .why h1 {
    padding: 60px 0px 60px 0px;
} */

.why h2 {
    padding: 0px 0px 0px 0px;
}

.why p {
    font-size: 1.25em;
    color: #ffe600;
    padding: 0px 0px 60px 0px;
}

.why a {
    color: #ffffff;
}

.why .col-1-4:hover,
.why .col-1-4:focus {
    color: #ffffff;
    background-color: rgba(0, 0, 0, .40);
}

.meet {
    color: #ffffff;
    background-image: linear-gradient(180deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,0) 100%), url("https://csgexternal.ey.com/2023/2303-4202103/images/team-crop-1920x1034.jpg");
    background-position: center;
    background-repeat: no-repeat;
}

.meet .card {
    background-color: #2e2e38; 
    padding: 0px 0px 20px 0px; 
    margin-left: 15px;
}

.img-responsive {
    width: 100%;
    height: auto;
}

.img-responsive2 {
    width: 25%;
    height: auto;
}

.zoom {
    transition: transform .2s;
    /* Animation */
    margin: 0 auto;
}

.zoom:hover {
    transform: scale(1.03);
    /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}

.icons {
    margin-top: 20px;
    padding-left: 20px;
    font-size: 20px;
    color: #ffffff;
}

.dark-gray {
	background-color: #747480;
    text-align: center;
}

.yellow-bar {
    background-color:  rgba(255, 230, 0, 1);
    text-align: center !important;
    color: #2e2e38 !important;
    padding: 12px 0px 8px 0px;
    font-size: 1.15em;
}

.yellow-bar:hover,
.yellow-bar:focus {
    text-decoration: none;
    cursor: pointer;
    background-color: rgba(246, 246, 250, .8);;
}

.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 99%;
  }

  .grid-container {
    display: grid;
    grid-template-columns: auto;
    gap: 15px;
    align-content: space-evenly;
  }

/* ========== background video ========== */

.viewport-header {
    display: block;
    box-sizing: border-box;
    overflow-y: hidden;
    position: relative;
    width: 100%;
    text-align: center;
    height: 40vh;
    min-height: 400px;
    background-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.60) 100%), url("https://csgexternal.ey.com/2023/2303-4202103/images/ey-ai-hong-kong-business-towers-at-night-1920x710px.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.viewport-header div {
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    box-sizing: border-box;
    overflow-y: hidden;
    position: relative;
    top: 125px;
}

.viewport-header h1 {
    font-family: 'EY-Interstate', sans-serif !important;
    color: #ffffff;
    letter-spacing: 3vw;
    font-weight: 100;
    font-size: 3.5em;
    text-align: center;
    letter-spacing: 2px;

}

.viewport-header h2 {
    font-family: 'EY-Interstate-Light', sans-serif;
    color: #ffffff;
    padding-top: 0% !important;
    margin-top: 30px;
    letter-spacing: 3vw;
    font-weight: 100;
    font-size: 1.75em;
    text-align: center;
    letter-spacing: 2px;

}

.viewport-header video {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    object-fit: cover;
    height: 100%
}