@font-face {
    font-family: "Avenir Medium";
    src: url("./font/AvenirLTStd-Medium.otf");
    font-family: "Avenir Book";
    src: url("./font/AvenirLTStd-Book.otf");
    font-family: "Avenir Heavy";
    src: url("./font/Avenir-Heavy-05.ttf");
}
/* Global Styles */
@import url("https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css");

@font-face {
    font-family: "Proxima Nova";
    src: url("./font/ProximaNova-Regular.otf");
}
@font-face {
    font-family: "Proxima Nova Alt";
    src: url("./font/MarkSimonson-ProximaNovaA.otf");
}
@font-face {
    font-family: "Proxima Nova Alt Bold";
    src: url("./font/ProximaNovaAltBold.otf");
}
@font-face {
    font-family: "Proxima Nova Alt Light";
    src: url("./font/ProximaNovaAltLight.otf");
}
@font-face {
    font-family: "Proxima Nova Alt Thin";
    src: url("./font/ProximaNovaAltThin.otf");
}
@font-face {
    font-family: "Proxima Nova Black";
    src: url("./font/ProximaNovaBlack.otf");
}
@font-face {
    font-family: "Proxima Nova Bold";
    src: url("./font/ProximaNovaBold.otf");
}
@font-face {
    font-family: "Proxima Nova Extrabold";
    src: url("./font/ProximaNovaExtrabold.otf");
}
@font-face {
    font-family: "Proxima Nova Thin";
    src: url("./font/ProximaNovaThin.otf");
}
@font-face {
  font-family: "Avenir-Medium";
  font-style: normal;
  font-weight: 500;
  src: url("../fonts/AvenirLTStd-Medium.otf") format("opentype");
}
@font-face {
  font-family: "Avenir-Book";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/AvenirArabic-Book.otf") format("opentype");
}
@font-face {
  font-family: "Avenir-Regular";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/Avenir-Roman.otf") format("opentype");
}
@font-face {
  font-family: "Avenir-Roman";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/Avenir.ttc");
}
@font-face {
  font-family: "Helvetica Neue-Regular";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/HLB.ttf") format("truetype");
}
@font-face {
  font-family: "Helvetica Neue-Bold";
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/HelveticaNeue-Bold.ttf") format("truetype");
}
@font-face {
  font-family: "Helvetica Neue-Thin";
  font-style: normal;
  font-weight: 100;
  src: url("../fonts/HelveticaNeue-Thin.otf") format("opentype");
}
@font-face {
  font-family: "Helvetica Neue-Medium";
  font-style: normal;
  font-weight: 500;
  src: url("../fonts/HelveticaNeueMedium.ttf") format("truetype");
}

#myTop{
  display: block;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  box-shadow: 0px 6px 6px 0px rgba(47,102,144,0.2);
  background-color: white;
  color: #18A999;
  cursor: pointer;
  padding: 15px;
  border-radius: 5px;
}
#myTop:hover{
  background-color: #2F6690;
  color:white;

}
.show{
  display: block;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  box-shadow: 0px 6px 6px 0px rgba(47,102,144,0.2);
  background-color: white;
  color: #18A999;
  cursor: pointer;
  padding: 15px;
  border-radius: 5px;
}
.screen a {
  display: contents;
  text-decoration: none;
}

.container-center-horizontal {
  display: flex;
  flex-direction: row;
  justify-content: center;
  pointer-events: none;
  width: 100%;
}
.container-fluid{
  max-width: 100vw;
}

.container-center-horizontal > * {
  flex-shrink: 0;
  pointer-events: auto;
}

.overlay {
  display: none;
  height: 100%;
  opacity: 0;
  position: fixed;
  top: 0;
  width: 100%;
}

.overlay.animate-appear {
  animation: reveal 0.3s ease-in-out 1 normal forwards;
  display: block;
  opacity: 0;
}

.overlay.animate-disappear {
  animation: reveal 0.3s ease-in-out 1 reverse forwards;
  display: block;
  opacity: 1;
}

.valign-text-middle {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.valign-text-bottom {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

input:focus {

  outline:none;
  background-color: rgba(229, 219, 251, 0.434);
  border-radius: 5px;
  border-color: #0037fc;

}

.hidden,
.hidden * {
  pointer-events: none;
  visibility: hidden;
}

.smart-layers-pointers,
.smart-layers-pointers * {
  pointer-events: auto;
  visibility: visible;
}



/* Local Styles */
* {
    box-sizing: border-box;
  }
html body {
    font-family: 'Avenir Medium', sans-serif;
    font-size: 16px;
    background-color: rgb(241, 241, 241);
}

h1{
    font-size: 40px;
}
h2{
    font-size: 24px;
}
h3{
    font-size: 20px;
}
h4{
    font-size: 16px;
    font-family: 'Avenir Book', sans-serif;
}
h5 {
    font-size: 14px;
    font-family: 'Avenir Medium', sans-serif;

}
h6 {
    font-size: 10px;
    font-family: 'Avenir Book', sans-serif;
}

html, body {
  overflow-x: hidden;
  max-width: 100vw;
  box-sizing: border-box;
}

body {
    background-color: #ffffff ;
    /* background-image: linear-gradient(to bottom right, skyblue,black, black, black, skyblue);*/
} 

ul {
  list-style-type:none;
  display: inline;
}

.header {
  position: fixed;
  top: 0;
  width: 100%;
  max-width: 100vw;
  height: 120px;
  z-index: 1;
  background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(15px) saturate(180%);
  box-shadow: 0px 4px 4px 0px rgba(148, 147, 147, 0.063) ;
  overflow-x: hidden;
  box-sizing: border-box;
}

.header::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(1px);
  box-shadow: inset -10px -8px 0px -11px rgba(255, 255, 255, 1),
              inset 0px -9px 0px -8px rgba(255, 255, 255, 1);
  opacity: 0.6;
  z-index: -1;
  filter: blur(1px) drop-shadow(10px 4px 6px black) brightness(115%);
}


.proj {
  font-size: 320px;
  overflow: hidden;
  font-family: var(--font-family-avenir-heavy);
  font-weight:bolder;
  margin: 0px;
  text-decoration: none;
  max-width: 100vw;
  background: rgba(213, 213, 213, 0.6);
    backdrop-filter: blur(15px) saturate(180%);
  /* Mask the color to the text, and remove the rest  */
-webkit-background-clip: text;
/* Make the text fill color value transparent so the masked background color comes through */
-webkit-text-fill-color: transparent;
}
.proj-small-1{
font-size: 180px;
}
.proj-small-2{
  font-size: 250px;
}
.proj-small-3{
  font-size: 270px;
}
/*ADDED for PROJECT DESCRIPTIONS 2025*/
.proj-desc{
  display: none;
  margin: -75px 20px 40px;
  font-family: var(--font-family-avenir-medium);
  font-size: 20px ;
  width: 80%;
  color: #212121;
}
h2.proj:hover ~ span.proj-desc {
  display: block;
  transition-duration: .5s
}
 div a {
  text-decoration: none;
}
.proj:hover {
  background: linear-gradient(to bottom right, #1ecfc9 20%, #0761bb 100%);
  /* Mask the color to the text, and remove the rest  */
-webkit-background-clip: text;
/* Make the text fill color value transparent so the masked background color comes through */
-webkit-text-fill-color: transparent;
transition: 1s;
transition: all 0.2s ease;
transition-duration: 1s;

}
.recent-proj{
  padding: 100px 50px;
  

}
.recent-proj:hover {
color: rgb(152, 151, 151);
}
.rec-proj-head{
background: linear-gradient(to bottom right, #1ecfc9 20%, #0761bb 100%);
/* Mask the color to the text, and remove the rest  */
-webkit-background-clip: text;
/* Make the text fill color value transparent so the masked background color comes through */
-webkit-text-fill-color: transparent;
}

.logo-container {
  float: left;
  max-width: 250px;
  margin-bottom: 10px;
}
/*
#imglogo {
  height: 50px; 
  margin-left: 60px;
  margin-top: 1rem;
}
  */


/* UPDATE 2025*/

#mob-ham-nav{
  display: none;
}


.site-logo{
  position: absolute;
  float: left;
  left: 5%;
  width: 80px;
  top: 16px;
  border-radius: 50px;
}

ul.nav-menu{
  float:right;
  margin-right: 1%;
  list-style: none;
  margin: 24px;
}
li.nav-item{
  display: inline-block;
  line-height: 50px;
  margin: 0 25px;
  margin-bottom: 25px;
}
.nav-item a{
  position: relative;
  padding: 25px 0;
  font-family: var(--font-family-avenir-medium);
  font-size: 24px;
  color: #343434;
  text-decoration: none;
}
.nav-item a:hover{
  color: #0d4a87;
  text-decoration: none;
}

label #res-sign-one, label #res-sign-two{
  display: none;
  position: absolute;
  right: 20px;
  top: 10px;
  font-size: 32px;
  color: #212121;
  line-height: 30px;
  cursor: pointer;
}
.nav-item.btn2:link {
  color: #F2f2f2;
}

@media (max-width:900px){
  .header{
    height: 75px;
  }
  .site-logo{
    width: 60px;
    align-content: center;
    top: 15px;
  }
  label #res-sign-one{
    display: block;
    padding-top: 20px;
  }
  label #res-sign-two{
    display: none;
    padding-top: 20px;
  }
  ul.nav-menu{
    display: none;
    position: absolute;
    width: 100vw;
    height: 100vh;
    text-align: center;
    background: white;
    top: 50px;
    right: -120%;
    text-align: left;
    padding-left: 0;
    transition: .5s;
    z-index: 3;
  
  }
  
  .nav-item{
    display: block;
    text-align: center;
    width: 100%;
    margin-top: 30px;
    margin-left: 0;
    line-height: 30px;
  }
  .nav-item a{
    font-size: 24px;
  }
  #mob-ham-nav:checked ~ ul{
    display: block;
    right:-20px;
  }
  #mob-ham-nav:checked~label #res-sign-one{
    display: none;
    
  }
  #mob-ham-nav:checked ~ label #res-sign-two{
    display: block;
    
  }
  .proj{
    font-size: 90px;
    padding-bottom: 30px;
    color: white;
    transition: all 0.3s ease;
    overflow: hidden;
    word-break: break-word;
    overflow-wrap: break-word;
    max-width: 100vw;
    box-sizing: border-box;
    padding-left: 8px;
    padding-right: 8px;
  }
  .proj-small-1{
    font-size: 50px;
    padding-bottom: 30px;
    color: white;
    transition: all 0.3s ease;
    overflow: hidden;
    word-break: break-word;
    overflow-wrap: break-word;
    max-width: 100vw;
    box-sizing: border-box;
    padding-left: 8px;
    padding-right: 8px;
  }
  .proj-small-2{
    font-size: 70px;
    padding-bottom: 30px;
    color: white;
    transition: all 0.3s ease;
    overflow: hidden;
    word-break: break-word;
    overflow-wrap: break-word;
    max-width: 100vw;
    box-sizing: border-box;
    padding-left: 8px;
    padding-right: 8px;
  }
  .proj-small-3{
    font-size: 70px;
    padding-bottom: 30px;
    color: white;
    transition: all 0.3s ease;
    overflow: hidden;
    word-break: break-word;
    overflow-wrap: break-word;
    max-width: 100vw;
    box-sizing: border-box;
    padding-left: 8px;
    padding-right: 8px;
  }
  /* Active state when centered in viewport on mobile */
  .proj.proj-centered,
  .proj-small-1.proj-centered,
  .proj-small-2.proj-centered,
  .proj-small-3.proj-centered {
    background: linear-gradient(to bottom right, #1ecfc9 20%, #0761bb 100%) !important;
    /* Mask the color to the text, and remove the rest  */
    -webkit-background-clip: text !important;
    background-clip: text !important;
    /* Make the text fill color value transparent so the masked background color comes through */
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
  }
  .recent-proj{
    padding: 8px;
    color: #6e6c6c;
  }
  
  /* Contact form mobile styles */
  #rectangle-contact {
    width: 90vw !important;
    max-width: 90vw !important;
    margin: 0 auto !important;
    box-sizing: border-box;
  }
  
  #rectangle-contact form {
    width: 100%;
    box-sizing: border-box;
  }
  
  #rectangle-contact input,
  #rectangle-contact textarea {
    width: 95% !important;
    max-width: 95% !important;
    box-sizing: border-box;
  }
  
  /* Visible trigger div for mobile scroll color change */
  .proj-trigger-zone {
    position: fixed;
    top: 50vh;
    left: 0;
    right: 0;
    width: 100%;
    height: 5px;
    background-color: rgb(255, 0, 0, 0.0);
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 0;
    /* Transparent - only used for intersection detection */
    
  }
 
}

/* END 2025 UPDATE - Hamburger Menu*/


.btn2 { 
  border: none;
  background: linear-gradient(to bottom right, #1ecfc9 20%, #0761bb 100%);
  color: #FFFFFF; 
  border-radius: 10px;
  text-align: center;
  padding-right: 24px;
  padding-left: 18px;
  width: 150px;
  height: 60px;
  padding-top: 8px;
  padding-bottom: 8px;
  transition: all 0.2s ease;
  margin-right:20px;
  transition-duration: 1s;
      border-style: none;
      box-shadow: 0px 6px 6px 0px rgba(47,102,144,0.1) ;
}
.btn2:hover{
  transform: scale(1.1);
}

.btn2:active{
  transform: scale(1.1);
  transition: all 0.2s ease;
  text-decoration: none; 
  color: white;
}

.btn2:link{
  transform: scale(1.1);
  text-decoration: none; 
  color: white;
}

.project-image {
  width: 85%;
  margin-left: 80px;
  margin-bottom: 30px;
  margin-right: 80px;
  height: auto;
  display: block;
  overflow: hidden;
  transition: transform 0.3s ease-in-out;
  border-radius: 20px;
}

.project-image img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.3s ease-in-out;
}

.overlay2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  padding: 50px;
  padding-top: 100px;
  text-align: left;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.overlay2 h6 {
  padding: 20px;
  margin-top: 10px;
  font-size: 18px;
  
transition: transform 1.0s ease-in 3.0s;
}

.overlay-description{
  display:block;
  align-items: left;
}
.overlay-title:hover{
text-decoration: underline;
}

.overlay2 p {
  margin-left: 20px;
  font-size: 16px;
  
transition: transform 1.0s ease-in 3.0s;
}
.project-image:hover {
  transform: scale(1.05);
}

.project-image:hover .overlay2 {
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 1;
}

.hero {
  background-image: url("hero-bg.jpg");
  background-size: cover;
  background-position: center;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: white;
}

.hero h1 {
  font-size: 3em;
  margin-bottom: 10px;
}

.hero h2 {
  font-size: 2em;
  margin: 0;
}

@media only screen and (max-width: 465px) {
  .project-image {

      width: 100%;
      margin: 20px;
  }
}

.sticky{
    position: -webkit-sticky;
    background-color: #FFFFFF;
    position: sticky;
    top: 0;
    padding: 5px;
}

 button {
    background-color: #FFFFFF;
    color:#2F6690;
    font-size: 10px;
    box-shadow: 0px 6px 6px 0px rgba(47,102,144,0.1);
    font-family: 'Avenir Medium',sans-serif; 
     background-color: #2F6690; 
     border-radius: 10px;
   
}

button:hover {
    background-color: #FFFFFF;
    color: #2F6690;
  }  
  
  #lets-chat{
      position: relative;
      background-color: #FFFFFF;
      color: #094D92;
      border-radius: 10px;
      align-items: flex-start;
      width: 120px;
      height: 45px;
      padding: 3px;
      margin-top: 40px;
      bottom: 5px;
      left:  10px;
      transition-duration: 1s;
      border-style: none;
      box-shadow: 0px 6px 6px 0px rgba(47,102,144,0.1) ;
      
  }
  @media screen and (max-width:920px) {
      #lets-chat{
          position: relative;
          bottom: 10px;
          right: 20px;
      }
  }
  #lets-chat:hover{
      transform: scale(1.1);


  }
  .send-icon{
      position: relative;
      margin-bottom: 3px;
      margin-left: 5px;
  }

#rectangle {
    position:relative;
    background-color: #ffffff;
    min-width: 500px;
    min-height: 400px;
    box-shadow: 0px 6px 6px 0px rgba(47,102,144,0.2);
    border-radius: 15px 0px 15px 0px;
    padding: 12px 16px;
    height: 80%;
    width: 80%;
    padding: 50px;
    max-width: 100%;
}
#rectangle-contact {
    position: relative;
    background-color: #f2f2f2;
    min-width: 60%;
    min-height: 300px;
    border-radius: 20px;
    padding: 16px;
    height: 50%;
    width: 50%;
    margin: 0 20%;
    max-width: 100%;
    margin-bottom:100px;
    box-shadow: 0px 6px 6px 0px rgba(47,102,144,0.2);
  
}
form{
  padding: 8px;
}
.rectangle{
    position:relative;
    background-color: #f55355;
    min-width: 90%;
    min-height: 100px;
    box-shadow: 0px 6px 6px 0px rgba(47,102,144,0.2);
    border-radius: 15px 0px 15px 0px;
    padding: 12px 16px;
    height: 175px;
    width: 80%;
    padding: 50px;
}
.sub_head {
 font-size: 14px;
}
#imglogo {
    width: 30%;
    height: 30%;
}

#contact-btn {
    color: #ffffff;
    text-decoration: none;
    background-color: #2d2d2d; 
    min-width: 90px;
    min-height: 30px;
    border-radius: 15px;
    border-style: solid ;
    border: 2px;
    border-color: #ffffff;
    width: 120px;
    height: 35px;
    padding-top: 8px;
    padding: 3px, 1px;
    text-align: center;
    align-items: center;
    margin-left: 10px;
    cursor: pointer;
    letter-spacing: 0; 
    pointer-events: auto;
    transition: all 0.2s ease;
    margin-right:20px;
  }
  #contact-btn:hover{
    transform: scale(1.1);
  }



.menu{
    color: #1d069c;
    font-weight: bold;
    /* background-image: linear-gradient( to bottom right,skyblue,lightblue, black);
} */
}

a.work:active{
    color: #1d069c;
    text-decoration: none;
}
a.work:hover{
    color: #1d069c;
    text-decoration: none;
}
a.work:link{
    color: #1d069c;
    text-decoration: none;
}
a.work:visited {
    color: #2F6690;
   text-decoration: none;
}

a.nav-link:active{
    color: #123840;
    text-decoration: none;
}
a.nav-link:hover{
    color: #123840;
}
a.nav-link:link{
    color: #123840;
}
a.nav-link:visited {
    color: #123840;
   text-decoration: none;
}



#WhoAmI {
    /* background-image: linear-gradient( to bottom right,skyblue, lightblue,black); */
    color: #555355;
   
}

#ID {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 5px;
}
#ID2{
  font-size: 0.75rem;
  font-weight: 300;
  margin-bottom: 30px;

}
#MyName {
  font-size: 50px;
  margin-top: 40px;
  margin-bottom: 20px;
  font-family: 'Avenir Bold', sans-serif;
  font-weight: 700;
  color: #343434;
}
#what{
  font: 'Avenir Book', sans-serif;
  font-size: 2rem;
  margin-top: 20px;
  margin-bottom: 20px;
  color: #343434;
}

.att_info{
  font-size: 56px;
 font-family:var(--font-family-avenir-book) ;
  color: #293241;
  margin-top: -100px;

}

.values{
  font-weight: bolder;
  font-size: 5rem;
  background: linear-gradient(to bottom right, #1ecfc9 20%, #0761bb 100%);
  /* Mask the color to the text, and remove the rest  */
  -webkit-background-clip: text;
  /* Make the text fill color value transparent so the masked background color comes through */
  -webkit-text-fill-color: transparent;
}
@media (max-width:900px){
.values{
  font-size: 2.5rem;


}

}

#img-me{
  margin-top: 60px;
}
#profile{
    /* height: 400px; */
    height: 500px;
    border-radius: 5px;
    margin: 50px;
}

@media (max-width: 600px) {
    #profile{
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 50%;
    }
}
@media (max-width:920px) {
    #profile{
       height: 400px;
        margin: 0;
    }
}

#name {
    padding-top: 50px;
}
#metrologo {
    position: relative;
    width: 350px;
    height: 55px;
  }

  #metrodisplay{
position: absolute;
width: 347px;
height: 380px;
right: 50px;
top: 20px;
  }

@media screen and (max-width: 600px) {
    #metrodisplay{
        position: relative;
    }
}
@media  screen and (max-width: 920px) {
    #metrodisplay{
        position: relative;
        width:500px;
        height:550px;
}
}

#Budget{
      color: #2F6690;
  }
#kbdisplay{
    position: absolute;
    width: 347px;
    height: 380px;
    right: 50px;
    top: 20px;
}

@media screen and (max-width:600px) {
    #kbdisplay{
        position: relative;
}
}
@media  screen and (max-width: 920px) {
    #kbdisplay{
        position: relative;
        width:400px;
        height:400px;
}}

label {
    color: #212121;
    margin-top: 10px;
}
input {
   position: relative;
   /* -webkit-appearance: none;
    -ms-appearance: none;
    -moz-appearance: none;*/
    border: none;
    background: linear-gradient(#d5d6d6, #094D92) center bottom 3px /calc(100% - 10px) 2px no-repeat;
    min-width: 250px;
    min-height: 40x;
    margin-top: 20px;
    padding: 20px;
    height: 35px;
    width: 100%;
}

#message{
    position: relative;
    height: 70px;
    width:  100%;
}
textarea {
    border: none;
    appearance: none;
    -webkit-appearance: none;
    -ms-appearance: none;
    -moz-appearance: none;
    border: none;
    background: linear-gradient(#d5d6d6, #094D92) center bottom 3px /calc(100% - 10px) 2px no-repeat;
    min-width: 250px;
    min-height: 40px;
    padding: 10px;
    height: 30px;
    width: 90%;
}
@media screen and (max-width:600px) {
    #message{
        width: 100%;
}
}
@media  screen and (max-width: 920px) {
    #message{
        width: 100%;
}
}
@media screen and (min-width:921px){
    #message{
        width: 100%;
    }
}
  .group-2 {
    align-self: center;
    display: block;
    height: 373px;
    margin-right: 115.0px;
    margin-top: 196px;
    pointer-events: auto;
    transition: all 0.2s ease-in-out;
    width: 1023px;
    opacity: 0;
  }
  
  .group-2.bp1-animate-enter4 {
    animation: bp1-animate-enter4-frames 2.00s ease-in-out 0.00s 1 normal forwards;
    display: block;
    opacity: 0;
  }
  .group-2:hover {
    transform: scale(1.1);
  }
  .text-54 {
    opacity: 0;
  transform: translate(-25px, 0);
  }

  .text-54.bp1-animate-enter {
    animation: bp1-animate-enter-frames 2.00s ease-in-out 0.00s 1 normal forwards;
    opacity: 0;
  transform: translate(-25px, 0);
  }
  
  @keyframes bp1-animate-enter-frames {
    from{opacity: 0;
  transform: translate(-25px, 0);
  }
  to{opacity: 1;
  transform: translate(0,0);
  }
  }
  @keyframes bp1-animate-enter4-frames {
    from{opacity: 0;
  }
  to{opacity: 1;
  }
  }
  .rowap {
      animation: appear 2.00s ease-in-out 0,50s 1 normal forwards;
      opacity: 0;
      transform: translate(-25px,0);
  }
  @keyframes apppear{
      from{opacity: 0;
    transform: translateY(-25px,0);
}
to{opacity: 1;
transform: translateY(0, 0);
}
  }

  .bp1-animate-enter1 {
    animation: bp1-animate-enter1-frames 3.00s ease-in-out 0.50s 1 normal forwards;
    opacity: 0;
  transform: scale(1.1);
  }
  
  @keyframes bp1-animate-enter1-frames {
    from{opacity: 0;
  transform: scale(1.1);
  }
  to{opacity: 1;
  transform: scale(1);
  }
  }

/* Card Flip
.flip-card {
    background-color: transparent;
    width: 500x;
    height: 400px;
    perspective: 1000px;
  }
  
  .flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
    box-shadow: 0 4px 8px 0 rgba(151, 151, 151, 0.2);

  }
  
  .flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
  }
  
  .flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  
  .flip-card-front {
    background-color: #bbb;
    color: black;
  }
  
  .flip-card-back {
    background-image: linear-gradient(to bottom right, rgb(0, 183, 255),skyblue,white); 
    color: black;
    transform: rotateY(180deg);
  } */

#skillset {
    height: fit-content;
    /* background-image: linear-gradient( to top left,white, rgb(235, 237, 237)); */
}
.skills:hover {
    background-color: rgb(180, 241, 246);
}
.advice {
    align-items: center;
    text-align: center;
    color: #292f36;
    text-decoration: none;
    /* background-image: linear-gradient(to top left , lightblue,white,white); */
}
#insertAdvice {
    font-size: medium;
    margin-bottom: 20px;
}
 .footer{
 background-color: rgb(241, 241, 241); 
 color: rgb(80, 80, 80);
 

}

iconify-icon{
  max-width: 50px;
  margin: 20px;
  margin-left:90px;
  align-content: center;
  justify-content: space-around;
}

#insertAdvice{
   text-align: center;
}
#gitlogo{
    width: 50px;
    height: 50px;
    color: 292f36;
}
 .image{visibility: hidden;}

.slideIn {
    animation-name: slide;
    animation-duration: 1s;
    visibility: visible;
}
@keyframes slide {
   from {
       opacity: 0;
       /* transform: translateX(100%); */
   }
   to {
       opacity: 1;
       /* transform: translateX(0%); */
   }
} 

.headline {
    font-size: 32px;
    text-align: left;
    background: linear-gradient(to bottom right, #1ecfc9 20%, #0761bb 100%);
    /* Mask the color to the text, and remove the rest  */
  -webkit-background-clip: text;
  /* Make the text fill color value transparent so the masked background color comes through */
  -webkit-text-fill-color: transparent;
    font-family: 'AvenirLTStd-Medium', sans-serif;
   
}

/* About Page */

#about-page{
    color: #1e1f20;
    text-decoration: none;
}

.sk-display{
    color: #1e1f20;
    background-color: #FFFFFF;
    box-shadow: 0px 6px 6px 0px rgba(47,102,144,0.1);
    border-radius: 20px;
    min-width: 50px;
    font-family: 'Avenir Medium', sans-serif;
    width: 150px;
    height: 30px;
    font-size: 14px;
    padding: 4px 14px;
    margin-top:15px;
    margin-right:15px;
}
@media (max-width: 920px){
    .sk-display{
        font-size: 12px;
    }
}
@media (max-width: 600px){
    .sk-display{
        font-size: 10px;
    }
}
.sk-display:hover{
    color: #2F6690;
    background-color: #FFFFFF;
    border: 2px;
    border-color: #2F6690;
    border: 1px;
    border-style: solid;
    transition: 1s;
    
}
#btn-resume{
    border-radius: 20px;
    color:#2F6690;
    background-color: #FFFFFF;
    box-shadow: 0px 6px 6px 0px rgba(47,102,144,0.1);
    border-style: none;
    width: 150px;
    height: 30px;
    transition-duration: 1s;
      
}
#btn-resume:hover{
    transform: scale(1.1);
}

.doc-icon{
    margin-bottom: 3px;
      margin-left: 2px;
}

#about-me{
    color: white;
    margin-top: 100px;
    margin-left: 100px;
    font-size: 20px;
    
}
/*Added for Q&A's 2025*/
.qa-block{
  margin: 50px;
}
.q-title{
  font-family: var(--font-family-avenir-heavy);
  font-size: 24px;
  color: whitesmoke;
}
.answer{
  font-family: var(--font-family-avenir-book);
  font-size: 18px;
  color: lightslategrey
}
@media (max-width: 920px) {
    #about-me{
        font-size: 16px;
        margin-left: 0;
        margin-top: 0;
}}
@media (max-width:600px) {
    #about-me{
        font-size: 14px;
        margin-top: 0;
        margin-left: 0;

    }
}

a.social-link{
    color: #292f36;
    text-decoration: none;
}
a.social-link:active{
    color: #292f36;
    text-decoration: none;
}
a.social-link:hover{
    color: rgb(45, 131, 244);
}
a.social-link:link{
    color: #292f36;
}
a.social-link:visited {
    color: #292f36;
   text-decoration: none;
}

/* Metro */

.sec-head{
    color:#995B85;
    margin-top: 30px;
    margin-bottom: 30px;
    font-size: 24px;
}
.prime-head{
    color: #18A999;
    margin-bottom: 30px;
    margin-top: 100px;
}
.text{
    margin-bottom: 50px;
    color:#2F6690;
}

.vl {
    border-left: 3px solid #995B85;
    height: 100px;
  }

  #timetable{
      width: 100%;
  }
  #main-menu{
      margin-top: 50px;
  }

  #trip-planner{
    margin-top: 100px;
}
#wireframe-intro{
    margin-top: 100px;
    margin-left: 100px;
}

#wireframe-intro-1{
    visibility: hidden;
    display: none;
}

@media  screen and (max-width: 920px) {
    #wireframe-intro{
       visibility: hidden;
       display: none;
    }
    #wireframe-intro-1{
        visibility:visible;
        display: block;
    }
}
.case-image{
    width: 100%;
}
.case-image-sm{
    width: 75%;
}
.case-image-wire{
    width:60%;
}
#user-persona{
    display: inline-flex;
}
.user-person2{
    margin-left:50px;
}
@media screen and (max-width: 920px){
    #user-persona{
        display: block;
    }
    .user-person2{
        margin-left:0;
        margin-top:50px;
    }
    .case-image{
        width:60%;
    }
    .case-image-wire{
        width: 50%;
    }
}

@media (max-width: 600px) {
    .case-image-ill{
        max-width: 50%;
        margin-left: 0;
        margin-top: 50px;
    }
    .case-image{
        width:100%;
    }
    .case-iimage-wire{
      width: 70%;
    }

}

@media (max-width: 920px) {
    .case-image-ill{
        max-width: 70%;
        margin-left: 0;
        margin-top: 10px;
    }
}
#myrole3{
    margin-left: 90px; 
    margin-top: 10px;
}
@media screen and (max-width: 920px){
    #myrole3{
        margin-left: 0;
    }
}
#looking{
    margin-top: 300px;
     margin-left:100px;
}
@media  screen and (max-width: 920px) {
    #looking{
        margin-top: 0;
    }
    
}

.space1{
    margin-left: 110px;
}
.space{
    margin-left: 60px;
}
@media (max-width: 920px){
    .space{
        margin-left: 0;
    }
    .space1{
        margin-left: 0;
    }
}
#use-ill{
    width:100%;
    margin-top: 500px;
    justify-content: end;
}
@media (max-width: 920px){
    #use-ill{
        width:60%;
        margin-top: 0;
    }
}

.style-prox-1{
    font-family: var(--font-family-proxima_nova-bold);
    font-size: 40pt;
}
.style-prox-2{
    font-family: var(--font-family-proxima_nova-bold);
    font-size: 35pt;
}
.style-prox-3{
    font-family: var(--font-family-proxima_nova-bold);
    font-size: 30pt;
}
.style-prox-4{
    font-family: var(--font-family-proxima_nova-semibold);
    font-size: 25pt;
}

.style-prox-5{
    font-family: var(--font-family-proxima_nova-semibold);
    font-size: 18pt;
}
.style-prox-6{
    font-family:var(--font-family-proxima_nova-medium);
    font-size: 18pt;
}
.style-prox-7{
    font-family: var(--font-family-proxima_nova-semibold);
    font-size: 16pt;
}

#color-pal{
    margin-top:200px;
}
@media ( max-width: 920px) {
    #color-pal{
        margin-top: 0;
    }
}

#showoff-start{
    margin-top: 100px;
}
.display-items{
    margin-top: 300px;
}

@media (max-width: 600px){
    .display-items{
        margin-top: 50px;
    }
}

#bg-image{
position: static;
background-image: url('img/Frame-126.png'); 
background-repeat: no-repeat;  
align-self: center;
margin-top: 500px;
margin-left: 500px;
}

/* Budget */

.prime-head-b{
    color: var(--secondaryheader);
    margin-bottom: 30px;
    margin-top: 100px;
}
.sec-head-b{
    color:var(--header-text);
    margin-top: 30px;
    margin-bottom: 30px;
    font-size: 24px;

}
#floating{
    position:relative;
    right: 100px;
    top: -50px;
}
@media (max-width:920px){
    #floating{
        right:0;
        top: 0;
    }
}
.persona{
    margin-top:200px;
}
.persona2{
    margin-top: 150px;
}

@media (max-width:920px){
    .persona{
        margin-top: 20px;
    }
    .persona2{
        margin-top: 20px;
    }
}

.helv-1{
    font-family: 'HelveticaNeue-Bold', sans-serif;
    font-size: 40pt;
    color:var(--main-text);
}
.helv-2{
    font-family: 'HelveticaNeue-Bold', sans-serif;
    font-size: 22pt;
}
.helv-3{
    font-family: 'HelveticaNeue-Bold', sans-serif;
    font-size: 18pt;
}
.helv-4{
    font-family: 'HelveticaNeue-Bold', sans-serif;
    font-size: 14pt;
}

.helv-5{
    font-family: var(--font-family-helvetica_neue-regular);
    font-size: 12pt;
}
.helv-6{
    font-family: var(--font-family-helvetica_neue-thin);
    font-size: 12pt;
}


/* Style Guide */
:root { 
    --desert-storm: #f8f8f8;
    --header-text: #18a999;
    --lilac: #c990ea;
    --main-text: #2f6690;
    --mist-gray: #c4c4c480;
    --primarywhite: #ffffff;
    --secondary-dark-blue: #123840;
    --secondaryheader: #995b85;
    --shakespeare: #49b7d1;
   
    --font-size-l: 18px;
    --font-size-m: 16px;
    --font-size-s: 14px;
    --font-size-xl: 20px;
    --font-size-xs: 10px;
    --font-size-xxl: 24px;
    --font-size-xxxl: 40px;
   
    --font-family-avenir-book: "Avenir-Book", Helvetica;
    --font-family-avenir-heavy: "Avenir-Heavy", Helvetica;
    --font-family-avenir-medium: "Avenir-Medium", Helvetica;
    --font-family-avenir-regular: "Avenir-Regular", Helvetica;
    --font-family-avenir-roman: "Avenir-Roman", Helvetica;
    --font-family-helvetica_neue-bold: "Helvetica Neue-Bold", Helvetica;
    --font-family-helvetica_neue-medium: "Helvetica Neue-Medium", Helvetica;
    --font-family-helvetica_neue-regular: "Helvetica Neue-Regular", Helvetica;
    --font-family-helvetica_neue-thin: "Helvetica Neue-Thin", Helvetica;
    --font-family-proxima_nova-bold: "Proxima Nova-Bold", Helvetica;
    --font-family-proxima_nova-medium: "Proxima Nova-Medium", Helvetica;
    --font-family-proxima_nova-semibold: "Proxima Nova-Semibold", Helvetica;
  }
  .avenir-book-normal-calypso-16px {
    color: var(--main-text);
    font-family: var(--font-family-avenir-book);
    font-size: var(--font-size-m);
    font-style: normal;
    font-weight: 400;
  }
  
  .avenir-regular-normal-calypso-16px {
    color: var(--main-text);
    font-family: var(--font-family-avenir-regular);
    font-size: var(--font-size-m);
    font-style: normal;
    font-weight: 400;
  }
  
  .avenir-regular-normal-emerald-40px {
    color: var(--header-text);
    font-family: var(--font-family-avenir-regular);
    font-size: var(--font-size-xxxl);
    font-style: normal;
    font-weight: 400;
  }
  
  .avenir-regular-normal-strikemaster-24px {
    color: var(--secondaryheader);
    font-family: var(--font-family-avenir-regular);
    font-size: var(--font-size-xxl);
    font-style: normal;
    font-weight: 400;
  }
  
  .avenir-medium-strikemaster-20px {
    color: var(--secondaryheader);
    font-family: var(--font-family-avenir-medium);
    font-size: var(--font-size-xl);
    font-style: normal;
    font-weight: 500;
  }
  
  .avenir-roman-normal-strikemaster-40px {
    color: var(--secondaryheader);
    font-family: var(--font-family-avenir-roman);
    font-size: var(--font-size-xxxl);
    font-style: normal;
    font-weight: 400;
  }
  
  .avenir-medium-white-20px {
    color: var(--primarywhite);
    font-family: var(--font-family-avenir-medium);
    font-size: var(--font-size-xl);
    font-style: normal;
    font-weight: 500;
  }
  
  .avenir-medium-elephant-20px {
    color: var(--secondary-dark-blue);
    font-family: var(--font-family-avenir-medium);
    font-size: var(--font-size-xl);
    font-style: normal;
    font-weight: 500;
  }
  
  .avenir-medium-calypso-20px {
    color: var(--main-text);
    font-family: var(--font-family-avenir-medium);
    font-size: var(--font-size-xl);
    font-style: normal;
    font-weight: 500;
  }
  
  .avenir-medium-emerald-20px {
    color: var(--header-text);
    font-family: var(--font-family-avenir-medium);
    font-size: var(--font-size-xl);
    font-style: normal;
    font-weight: 500;
  }
  
  .avenir-book-normal-white-16px {
    color: var(--primarywhite);
    font-family: var(--font-family-avenir-book);
    font-size: var(--font-size-m);
    font-style: normal;
    font-weight: 400;
  }
  
  .avenir-regular-normal-calypso-14px {
    color: var(--main-text);
    font-family: var(--font-family-avenir-regular);
    font-size: var(--font-size-s);
    font-style: normal;
    font-weight: 400;
  }
  
  .avenir-book-normal-calypso-20px {
    color: var(--main-text);
    font-family: var(--font-family-avenir-book);
    font-size: var(--font-size-xl);
    font-style: normal;
    font-weight: 400;
  }
  
  .avenir-book-normal-strikemaster-24px {
    color: var(--secondaryheader);
    font-family: var(--font-family-avenir-book);
    font-size: var(--font-size-xxl);
    font-style: normal;
    font-weight: 400;
  }
  
  .avenir-roman-normal-emerald-24px {
    color: var(--header-text);
    font-family: var(--font-family-avenir-roman);
    font-size: var(--font-size-xxl);
    font-style: normal;
    font-weight: 400;
  }
  
  .avenir-roman-normal-calypso-100px {
    color: var(--main-text);
    font-family: var(--font-family-avenir-roman);
    font-size: 100px;
    font-style: normal;
    font-weight: 400;
  }
  
  .avenir-roman-normal-calypso-20px {
    color: var(--main-text);
    font-family: var(--font-family-avenir-roman);
    font-size: var(--font-size-xl);
    font-style: normal;
    font-weight: 400;
  }
  
  .avenir-medium-calypso-10px {
    color: var(--main-text);
    font-family: var(--font-family-avenir-medium);
    font-size: var(--font-size-xs);
    font-style: normal;
    font-weight: 500;
  }
  
  .avenir-book-normal-white-24px {
    color: var(--primarywhite);
    font-family: var(--font-family-avenir-book);
    font-size: var(--font-size-xxl);
    font-style: normal;
    font-weight: 400;
  }
  
  .avenir-regular-normal-strikemaster-40px {
    color: var(--secondaryheader);
    font-family: var(--font-family-avenir-regular);
    font-size: var(--font-size-xxxl);
    font-style: normal;
    font-weight: 400;
  }
  
  .avenir-medium-emerald-24px {
    color: var(--header-text);
    font-family: var(--font-family-avenir-medium);
    font-size: var(--font-size-xxl);
    font-style: normal;
    font-weight: 500;
  }
  
  .avenir-heavy-normal-emerald-40px {
    color: var(--header-text);
    font-family: var(--font-family-avenir-heavy);
    font-size: var(--font-size-xxxl);
    font-style: normal;
    font-weight: 400;
  }
  
  .avenir-book-normal-strikemaster-14px {
    color: var(--secondaryheader);
    font-family: var(--font-family-avenir-book);
    font-size: var(--font-size-s);
    font-style: normal;
    font-weight: 400;
  }
  
  /* screen - metro-case-study */

.metro-case-study {
    background-color: var(--primarywhite);
    height: 17402px;
    overflow: hidden;
    position: relative;
    width: 1440px;
  }
  
  .metro-case-study .overlap-group2 {
    height: 1419px;
    left: 0;
    position: absolute;
    top: 3421px;
    width: 1440px;
  }
  
  .metro-case-study .workspacesolidiii {
    display: block;
    height: 667px;
    left: 1px;
    position: absolute;
    top: 752px;
    width: 1421px;
    opacity: 0;
  }
  
  .metro-case-study .workspacesolidiii.animate-enter97 {
    animation: animate-enter97-frames 2.00s ease-in-out 0.00s 1 normal forwards;
    display: block;
    opacity: 0;
  }
  
  @keyframes animate-enter97-frames {
    from{opacity: 0;
  }
  to{opacity: 1;
  }
  }
  
  .metro-case-study .rectangle-256 {
    background-color: var(--desert-storm);
    height: 761px;
    left: 0;
    position: absolute;
    top: 0;
    width: 1440px;
  }
  
  .metro-case-study .user-insights {
    height: 55px;
    left: 117px;
    letter-spacing: 0;
    position: absolute;
    top: 59px;
    opacity: 0;
  transform: translate(0, 25px);
  }
  
  .metro-case-study .user-insights.animate-enter113 {
    animation: animate-enter113-frames 2.00s ease-in-out 0.00s 1 normal forwards;
    opacity: 0;
  transform: translate(0, 25px);
  }
  
  @keyframes animate-enter113-frames {
    from{opacity: 0;
  transform: translate(0, 25px);
  }
  to{opacity: 1;
  transform: translate(0,0);
  }
  }
  
  .metro-case-study .user-personas {
    height: 55px;
    left: 118px;
    letter-spacing: 0;
    position: absolute;
    top: 779px;
    opacity: 0;
  transform: translate(0, 25px);
  }
  
  .metro-case-study .user-personas.animate-enter114 {
    animation: animate-enter114-frames 2.00s ease-in-out 0.00s 1 normal forwards;
    opacity: 0;
  transform: translate(0, 25px);
  }
  
  @keyframes animate-enter114-frames {
    from{opacity: 0;
  transform: translate(0, 25px);
  }
  to{opacity: 1;
  transform: translate(0,0);
  }
  }
  
  .metro-case-study .surname {
    height: 27px;
    left: 117px;
    letter-spacing: 0;
    position: absolute;
    top: 153px;
    opacity: 0;
  transform: translate(0, 25px);
  }
  
  .metro-case-study .surname.animate-enter135 {
    animation: animate-enter135-frames 2.00s ease-in-out 0.00s 1 normal forwards;
    opacity: 0;
  transform: translate(0, 25px);
  }
  
  @keyframes animate-enter135-frames {
    from{opacity: 0;
  transform: translate(0, 25px);
  }
  to{opacity: 1;
  transform: translate(0,0);
  }
  }
  
  .metro-case-study .surname-1 {
    height: 27px;
    left: 117px;
    letter-spacing: 0;
    position: absolute;
    top: 313px;
    opacity: 0;
  transform: translate(0, 25px);
  }
  
  .metro-case-study .surname-1.animate-enter136 {
    animation: animate-enter136-frames 2.00s ease-in-out 0.00s 1 normal forwards;
    opacity: 0;
  transform: translate(0, 25px);
  }
  
  @keyframes animate-enter136-frames {
    from{opacity: 0;
  transform: translate(0, 25px);
  }
  to{opacity: 1;
  transform: translate(0,0);
  }
  }
  
  .metro-case-study .surname-2 {
    height: 27px;
    left: 117px;
    letter-spacing: 0;
    position: absolute;
    top: 499px;
    opacity: 0;
  transform: translate(0, 25px);
  }
  
  .metro-case-study .surname-2.animate-enter137 {
    animation: animate-enter137-frames 2.00s ease-in-out 0.00s 1 normal forwards;
    opacity: 0;
  transform: translate(0, 25px);
  }
  
  @keyframes animate-enter137-frames {
    from{opacity: 0;
  transform: translate(0, 25px);
  }
  to{opacity: 1;
  transform: translate(0,0);
  }
  }
  
  .metro-case-study .text-72 {
    left: 117px;
    letter-spacing: 0;
    position: absolute;
    top: 199px;
    width: 584px;
    opacity: 0;
  transform: translate(0, 25px);
  }
  
  .metro-case-study .text-72.animate-enter138 {
    animation: animate-enter138-frames 2.00s ease-in-out 0.00s 1 normal forwards;
    opacity: 0;
  transform: translate(0, 25px);
  }
  
  @keyframes animate-enter138-frames {
    from{opacity: 0;
  transform: translate(0, 25px);
  }
  to{opacity: 1;
  transform: translate(0,0);
  }
  }
  
  .metro-case-study .text-73 {
    left: 117px;
    letter-spacing: 0;
    position: absolute;
    top: 359px;
    width: 584px;
    opacity: 0;
  transform: translate(0, 25px);
  }
  
  .metro-case-study .text-73.animate-enter139 {
    animation: animate-enter139-frames 2.00s ease-in-out 0.00s 1 normal forwards;
    opacity: 0;
  transform: translate(0, 25px);
  }
  
  @keyframes animate-enter139-frames {
    from{opacity: 0;
  transform: translate(0, 25px);
  }
  to{opacity: 1;
  transform: translate(0,0);
  }
  }
  
  .metro-case-study .text-74 {
    left: 117px;
    letter-spacing: 0;
    position: absolute;
    top: 546px;
    width: 584px;
    opacity: 0;
  transform: translate(0, 25px);
  }
  
  .metro-case-study .text-74.animate-enter140 {
    animation: animate-enter140-frames 2.00s ease-in-out 0.00s 1 normal forwards;
    opacity: 0;
  transform: translate(0, 25px);
  }
  
  @keyframes animate-enter140-frames {
    from{opacity: 0;
  transform: translate(0, 25px);
  }
  to{opacity: 1;
  transform: translate(0,0);
  }
  }
  
  .metro-case-study .text-75 {
    left: 117px;
    letter-spacing: 0;
    position: absolute;
    top: 859px;
    width: 584px;
    opacity: 0;
  transform: translate(0, 25px);
  }
  
  .metro-case-study .text-75.animate-enter141 {
    animation: animate-enter141-frames 2.00s ease-in-out 0.00s 1 normal forwards;
    opacity: 0;
  transform: translate(0, 25px);
  }
  
  @keyframes animate-enter141-frames {
    from{opacity: 0;
  transform: translate(0, 25px);
  }
  to{opacity: 1;
  transform: translate(0,0);
  }
  }
  
  .metro-case-study .image-7 {
    display: block;
    height: 269px;
    left: 882px;
    object-fit: cover;
    position: absolute;
    top: 250px;
    width: 543px;
    opacity: 0;
  transform: translate(25px, 0);
  }
  
  .metro-case-study .image-7.animate-enter142 {
    animation: animate-enter142-frames 2.00s ease-in-out 0.00s 1 normal forwards;
    display: block;
    opacity: 0;
  transform: translate(25px, 0);
  }
  
  @keyframes animate-enter142-frames {
    from{opacity: 0;
  transform: translate(25px, 0);
  }
  to{opacity: 1;
  transform: translate(0,0);
  }
  }
  
  .metro-case-study .image-9 {
    display: block;
    height: 328px;
    left: 118px;
    object-fit: cover;
    position: absolute;
    top: 979px;
    width: 583px;
    opacity: 0;
  transform: translate(-25px, 0);
  }
  
  .metro-case-study .image-9.animate-enter143 {
    animation: animate-enter143-frames 2.00s ease-in-out 0.00s 1 normal forwards;
    display: block;
    opacity: 0;
  transform: translate(-25px, 0);
  }
  
  @keyframes animate-enter143-frames {
    from{opacity: 0;
  transform: translate(-25px, 0);
  }
  to{opacity: 1;
  transform: translate(0,0);
  }
  }
  
  .metro-case-study .image-10 {
    display: block;
    height: 328px;
    left: 740px;
    object-fit: cover;
    position: absolute;
    top: 981px;
    width: 583px;
    opacity: 0;
  transform: translate(25px, 0);
  }
  
  .metro-case-study .image-10.animate-enter144 {
    animation: animate-enter144-frames 2.00s ease-in-out 0.00s 1 normal forwards;
    display: block;
    opacity: 0;
  transform: translate(25px, 0);
  }
  
  @keyframes animate-enter144-frames {
    from{opacity: 0;
  transform: translate(25px, 0);
  }
  to{opacity: 1;
  transform: translate(0,0);
  }
  }
  
  .metro-case-study .overlap-group5 {
    height: 761px;
    left: 0;
    position: absolute;
    top: 16641px;
    width: 1440px;
  }
  
  .metro-case-study .rectangle-255 {
    background-color: var(--desert-storm);
    height: 761px;
    left: 0;
    position: absolute;
    top: 0;
    width: 1440px;
    opacity: 0;
  }
  
  .metro-case-study .rectangle-255.animate-enter98 {
    animation: animate-enter98-frames 1.00s ease-in-out 0.00s 1 normal forwards;
    opacity: 0;
  }
  
  @keyframes animate-enter98-frames {
    from{opacity: 0;
  }
  to{opacity: 1;
  }
  }
  
  .metro-case-study .wrap-up {
    height: 55px;
    left: 115px;
    letter-spacing: 0;
    position: absolute;
    top: 77px;
  }
  
  .metro-case-study .text-95 {
    left: 119px;
    letter-spacing: 0;
    position: absolute;
    top: 157px;
    width: 581px;
  }
  
  .metro-case-study .image-25 {
    height: 39px;
    left: 115px;
    object-fit: cover;
    position: absolute;
    top: 437px;
    width: 25px;
  }
  
  .metro-case-study .view-the-prototype {
    color: var(--secondaryheader);
    cursor: pointer;
    font-family: var(--font-family-avenir-book);
    font-size: var(--font-size-m);
    left: 155px;
    letter-spacing: 0;
    position: absolute;
    text-decoration: underline;
    top: 458px;
  }
  
  .metro-case-study .overlap-group10 {
    height: 823px;
    left: -28px;
    position: absolute;
    top: 8854px;
    width: 1470px;
  }
  
  .metro-case-study .rectangle-255-1 {
    background-color: var(--desert-storm);
    height: 761px;
    left: 30px;
    position: absolute;
    top: 43px;
    width: 1440px;
    opacity: 0;
  }
  
  .metro-case-study .rectangle-255-1.animate-enter99 {
    animation: animate-enter99-frames 1.00s ease-in-out 0.00s 1 normal forwards;
    opacity: 0;
  }
  
  @keyframes animate-enter99-frames {
    from{opacity: 0;
  }
  to{opacity: 1;
  }
  }
  
  .metro-case-study .image-12 {
    display: block;
    height: 823px;
    left: 0;
    object-fit: cover;
    position: absolute;
    top: 0;
    width: 1406px;
    opacity: 0;
  transform: translate(-25px, 0);
  }
  
  .metro-case-study .image-12.animate-enter100 {
    animation: animate-enter100-frames 2.00s ease-in-out 0.00s 1 normal forwards;
    display: block;
    opacity: 0;
  transform: translate(-25px, 0);
  }
  
  @keyframes animate-enter100-frames {
    from{opacity: 0;
  transform: translate(-25px, 0);
  }
  to{opacity: 1;
  transform: translate(0,0);
  }
  }
  
  .metro-case-study .text-78 {
    left: 1002px;
    letter-spacing: 0;
    position: absolute;
    top: 386px;
    width: 236px;
    opacity: 0;
  transform: translate(0, 25px);
  }
  
  .metro-case-study .text-78.animate-enter149 {
    animation: animate-enter149-frames 2.00s ease-in-out 0.00s 1 normal forwards;
    opacity: 0;
  transform: translate(0, 25px);
  }
  
  @keyframes animate-enter149-frames {
    from{opacity: 0;
  transform: translate(0, 25px);
  }
  to{opacity: 1;
  transform: translate(0,0);
  }
  }
  
  .metro-case-study .wireframes {
    height: 55px;
    left: 1002px;
    letter-spacing: 0;
    position: absolute;
    top: 307px;
    opacity: 0;
  transform: translate(0, 25px);
  }
  
  .metro-case-study .wireframes.animate-enter150 {
    animation: animate-enter150-frames 2.00s ease-in-out 0.00s 1 normal forwards;
    opacity: 0;
  transform: translate(0, 25px);
  }
  
  @keyframes animate-enter150-frames {
    from{opacity: 0;
  transform: translate(0, 25px);
  }
  to{opacity: 1;
  transform: translate(0,0);
  }
  }
  
  .metro-case-study .overlap-group1 {
    height: 4160px;
    left: -72px;
    position: absolute;
    top: 12478px;
    width: 1636px;
  }
  
  .metro-case-study .image-24 {
    height: 677px;
    left: 0;
    object-fit: cover;
    position: absolute;
    top: 3483px;
    width: 922px;
  }
  
  .metro-case-study .surname-3 {
    height: 55px;
    left: 930px;
    letter-spacing: 0;
    position: absolute;
    top: 920px;
  }
  
  .metro-case-study .quick-view {
    height: 55px;
    left: 228px;
    letter-spacing: 0;
    position: absolute;
    top: 1520px;
  }
  
  .metro-case-study .text-82 {
    height: 55px;
    left: 930px;
    letter-spacing: 0;
    position: absolute;
    top: 2200px;
  }
  
  .metro-case-study .text-83 {
    height: 55px;
    left: 228px;
    letter-spacing: 0;
    position: absolute;
    top: 3040px;
  }
  
  .metro-case-study .text-90 {
    left: 930px;
    letter-spacing: 0;
    position: absolute;
    top: 1000px;
    width: 425px;
  }
  
  .metro-case-study .text-91 {
    left: 228px;
    letter-spacing: 0;
    position: absolute;
    top: 1600px;
    width: 425px;
  }
  
  .metro-case-study .text-92 {
    left: 930px;
    letter-spacing: 0;
    position: absolute;
    top: 2280px;
    width: 425px;
  }
  
  .metro-case-study .text-93 {
    left: 228px;
    letter-spacing: 0;
    position: absolute;
    top: 3120px;
    width: 425px;
  }
  
  .metro-case-study .image-19 {
    display: block;
    height: 640px;
    left: 814px;
    position: absolute;
    top: 0;
    width: 579px;
    opacity: 0;
  transform: translate(25px, 0);
  }
  
  .metro-case-study .image-19.animate-enter170 {
    animation: animate-enter170-frames 2.00s ease-in-out 0.00s 1 normal forwards;
    display: block;
    opacity: 0;
  transform: translate(25px, 0);
  }
  
  @keyframes animate-enter170-frames {
    from{opacity: 0;
  transform: translate(25px, 0);
  }
  to{opacity: 1;
  transform: translate(0,0);
  }
  }
  
  .metro-case-study .vector-4 {
    height: 1782px;
    left: 416px;
    position: absolute;
    top: 1043px;
    width: 832px;
  }
  
  .metro-case-study .vector-5 {
    height: 820px;
    left: 611px;
    position: absolute;
    top: 2815px;
    width: 573px;
  }
  
  .metro-case-study .image-20 {
    height: 813px;
    left: 4px;
    object-fit: cover;
    position: absolute;
    top: 547px;
    width: 931px;
  }
  
  .metro-case-study .image-21 {
    height: 677px;
    left: 818px;
    object-fit: cover;
    position: absolute;
    top: 1204px;
    width: 819px;
  }
  
  .metro-case-study .image-22 {
    height: 677px;
    left: 0;
    object-fit: cover;
    position: absolute;
    top: 1880px;
    width: 922px;
  }
  
  .metro-case-study .image-23 {
    height: 677px;
    left: 774px;
    object-fit: cover;
    position: absolute;
    top: 2720px;
    width: 848px;
  }
  
  .metro-case-study .overlap-group3 {
    height: 564px;
    left: 118px;
    position: absolute;
    top: 4982px;
    width: 1260px;
  }
  
  .metro-case-study .frame-1 {
    display: block;
    height: 564px;
    left: 0;
    position: absolute;
    top: 0;
    width: 1260px;
    opacity: 0;
  transform: translate(0, 25px);
  }
  
  .metro-case-study .frame-1.animate-enter101 {
    animation: animate-enter101-frames 2.00s ease-in-out 0.00s 1 normal forwards;
    display: block;
    opacity: 0;
  transform: translate(0, 25px);
  }
  
  @keyframes animate-enter101-frames {
    from{opacity: 0;
  transform: translate(0, 25px);
  }
  to{opacity: 1;
  transform: translate(0,0);
  }
  }
  
  .metro-case-study .main-menu {
    left: 37px;
    letter-spacing: 0;
    position: absolute;
    top: 109px;
    opacity: 0;
  transform: translate(0, 25px);
  }
  
  .metro-case-study .main-menu.animate-enter102 {
    animation: animate-enter102-frames 2.00s ease-in-out 0.00s 1 normal forwards;
    opacity: 0;
  transform: translate(0, 25px);
  }
  
  @keyframes animate-enter102-frames {
    from{opacity: 0;
  transform: translate(0, 25px);
  }
  to{opacity: 1;
  transform: translate(0,0);
  }
  }
  
  .metro-case-study .trip-planner {
    left: 427px;
    letter-spacing: 0;
    position: absolute;
    top: 109px;
    opacity: 0;
  transform: translate(0, 25px);
  }
  
  .metro-case-study .trip-planner.animate-enter103 {
    animation: animate-enter103-frames 2.00s ease-in-out 0.00s 1 normal forwards;
    opacity: 0;
  transform: translate(0, 25px);
  }
  
  @keyframes animate-enter103-frames {
    from{opacity: 0;
  transform: translate(0, 25px);
  }
  to{opacity: 1;
  transform: translate(0,0);
  }
  }
  
  .metro-case-study .footer-menu {
    left: 812px;
    letter-spacing: 0;
    position: absolute;
    top: 109px;
    opacity: 0;
  transform: translate(0, 25px);
  }
  
  .metro-case-study .footer-menu.animate-enter104 {
    animation: animate-enter104-frames 2.00s ease-in-out 0.00s 1 normal forwards;
    opacity: 0;
  transform: translate(0, 25px);
  }
  
  @keyframes animate-enter104-frames {
    from{opacity: 0;
  transform: translate(0, 25px);
  }
  to{opacity: 1;
  transform: translate(0,0);
  }
  }
  
  .metro-case-study .text-58 {
    left: 1px;
    letter-spacing: 0;
    position: absolute;
    top: 17px;
    width: 465px;
    opacity: 0;
  transform: translate(0, 25px);
  }
  
  .metro-case-study .text-58.animate-enter105 {
    animation: animate-enter105-frames 2.00s ease-in-out 0.00s 1 normal forwards;
    opacity: 0;
  transform: translate(0, 25px);
  }
  
  @keyframes animate-enter105-frames {
    from{opacity: 0;
  transform: translate(0, 25px);
  }
  to{opacity: 1;
  transform: translate(0,0);
  }
  }
  
  .metro-case-study .text-59 {
    left: 119px;
    letter-spacing: 0;
    position: absolute;
    top: 5961px;
    width: 350px;
    opacity: 0;
  transform: translate(0, 25px);
  }
  
  .metro-case-study .text-59.animate-enter106 {
    animation: animate-enter106-frames 2.00s ease-in-out 0.00s 1 normal forwards;
    opacity: 0;
  transform: translate(0, 25px);
  }
  
  @keyframes animate-enter106-frames {
    from{opacity: 0;
  transform: translate(0, 25px);
  }
  to{opacity: 1;
  transform: translate(0,0);
  }
  }
  
  .metro-case-study .text-60 {
    left: 119px;
    letter-spacing: 0;
    position: absolute;
    top: 6796px;
    width: 350px;
    opacity: 0;
  transform: translate(0, 25px);
  }
  
  .metro-case-study .text-60.animate-enter107 {
    animation: animate-enter107-frames 2.00s ease-in-out 0.00s 1 normal forwards;
    opacity: 0;
  transform: translate(0, 25px);
  }
  
  @keyframes animate-enter107-frames {
    from{opacity: 0;
  transform: translate(0, 25px);
  }
  to{opacity: 1;
  transform: translate(0,0);
  }
  }
  
  .metro-case-study .overlap-group7 {
    height: 659px;
    left: 116px;
    position: absolute;
    top: 7282px;
    width: 1262px;
  }
  
  .metro-case-study .text-61 {
    left: 3px;
    letter-spacing: 0;
    position: absolute;
    top: 0;
    width: 517px;
    opacity: 0;
  transform: translate(0, 25px);
  }
  
  .metro-case-study .text-61.animate-enter108 {
    animation: animate-enter108-frames 2.00s ease-in-out 0.00s 1 normal forwards;
    opacity: 0;
  transform: translate(0, 25px);
  }
  
  @keyframes animate-enter108-frames {
    from{opacity: 0;
  transform: translate(0, 25px);
  }
  to{opacity: 1;
  transform: translate(0,0);
  }
  }
  
  .metro-case-study .frame-9 {
    display: block;
    height: 584px;
    left: 0;
    position: absolute;
    top: 75px;
    width: 1262px;
    opacity: 0;
  transform: translate(25px, 0);
  }
  
  .metro-case-study .frame-9.animate-enter145 {
    animation: animate-enter145-frames 2.00s ease-in-out 0.00s 1 normal forwards;
    display: block;
    opacity: 0;
  transform: translate(25px, 0);
  }
  
  @keyframes animate-enter145-frames {
    from{opacity: 0;
  transform: translate(25px, 0);
  }
  to{opacity: 1;
  transform: translate(0,0);
  }
  }
  
  .metro-case-study .overlap-group8 {
    height: 881px;
    left: 119px;
    position: absolute;
    top: 157px;
    width: 1330px;
  }
  
  .metro-case-study .text-62 {
    height: 51px;
    left: 0;
    letter-spacing: 0;
    position: absolute;
    top: 47px;
    width: 1027px;
  }
  
  .metro-case-study .span1 {
    color: var(--main-text);
    font-family: var(--font-family-avenir-regular);
    font-size: var(--font-size-xs);
  }
  
  .metro-case-study .home-page-display-1 {
    display: block;
    height: 881px;
    left: 547px;
    object-fit: cover;
    position: absolute;
    top: 0;
    width: 783px;
    opacity: 0;
  transform: translate(25px, 0);
  }
  
  .metro-case-study .home-page-display-1.animate-enter171 {
    animation: animate-enter171-frames 3.00s ease-in-out 0.00s 1 normal forwards;
    display: block;
    opacity: 0;
  transform: translate(25px, 0);
  }
  
  @keyframes animate-enter171-frames {
    from{opacity: 0;
  transform: translate(25px, 0);
  }
  to{opacity: 1;
  transform: translate(0,0);
  }
  }
  
  .metro-case-study .overview {
    height: 39px;
    left: 115px;
    letter-spacing: 0;
    position: absolute;
    top: 1038px;
    width: 89px;
    opacity: 0;
  transform: translate(0, 25px);
  }
  
  .metro-case-study .overview.animate-enter109 {
    animation: animate-enter109-frames 2.00s ease-in-out 0.00s 1 normal forwards;
    opacity: 0;
  transform: translate(0, 25px);
  }
  
  @keyframes animate-enter109-frames {
    from{opacity: 0;
  transform: translate(0, 25px);
  }
  to{opacity: 1;
  transform: translate(0,0);
  }
  }
  
  .metro-case-study .my-role {
    height: 55px;
    left: 121px;
    letter-spacing: 0;
    position: absolute;
    top: 1586px;
    opacity: 0;
  transform: translate(0, 25px);
  }
  
  .metro-case-study .span1-1 {
    color: var(--header-text);
    font-family: var(--font-family-avenir-medium);
    font-size: var(--font-size-xxxl);
    font-weight: 500;
  }
  
  .metro-case-study .my-role.animate-enter110 {
    animation: animate-enter110-frames 2.00s ease-in-out 0.00s 1 normal forwards;
    opacity: 0;
  transform: translate(0, 25px);
  }
  
  @keyframes animate-enter110-frames {
    from{opacity: 0;
  transform: translate(0, 25px);
  }
  to{opacity: 1;
  transform: translate(0,0);
  }
  }
  
  .metro-case-study .project-timeline {
    height: 55px;
    left: 118px;
    letter-spacing: 0;
    position: absolute;
    top: 2147px;
    opacity: 0;
  transform: translate(0, 25px);
  }
  
  .metro-case-study .project-timeline.animate-enter111 {
    animation: animate-enter111-frames 2.00s ease-in-out 0.00s 1 normal forwards;
    opacity: 0;
  transform: translate(0, 25px);
  }
  
  @keyframes animate-enter111-frames {
    from{opacity: 0;
  transform: translate(0, 25px);
  }
  to{opacity: 1;
  transform: translate(0,0);
  }
  }
  
  .metro-case-study .market-analysis {
    height: 55px;
    left: 117px;
    letter-spacing: 0;
    position: absolute;
    top: 2960px;
    opacity: 0;
  transform: translate(0, 25px);
  }
  
  .metro-case-study .market-analysis.animate-enter112 {
    animation: animate-enter112-frames 2.00s ease-in-out 0.00s 1 normal forwards;
    opacity: 0;
  transform: translate(0, 25px);
  }
  
  @keyframes animate-enter112-frames {
    from{opacity: 0;
  transform: translate(0, 25px);
  }
  to{opacity: 1;
  transform: translate(0,0);
  }
  }
  
  .metro-case-study .site-map {
    height: 55px;
    left: 119px;
    letter-spacing: 0;
    position: absolute;
    top: 4920px;
    opacity: 0;
  transform: translate(0, 25px);
  }
  
  .metro-case-study .site-map.animate-enter115 {
    animation: animate-enter115-frames 2.00s ease-in-out 0.00s 1 normal forwards;
    opacity: 0;
  transform: translate(0, 25px);
  }
  
  @keyframes animate-enter115-frames {
    from{opacity: 0;
  transform: translate(0, 25px);
  }
  to{opacity: 1;
  transform: translate(0,0);
  }
  }
  
  .metro-case-study .main-menu-1 {
    height: 33px;
    left: 117px;
    letter-spacing: 0;
    position: absolute;
    top: 5896px;
    opacity: 0;
  transform: translate(0, 25px);
  }
  
  .metro-case-study .main-menu-1.animate-enter116 {
    animation: animate-enter116-frames 2.00s ease-in-out 0.00s 1 normal forwards;
    opacity: 0;
  transform: translate(0, 25px);
  }
  
  @keyframes animate-enter116-frames {
    from{opacity: 0;
  transform: translate(0, 25px);
  }
  to{opacity: 1;
  transform: translate(0,0);
  }
  }
  
  .metro-case-study .trip-planner-1 {
    height: 33px;
    left: 117px;
    letter-spacing: 0;
    position: absolute;
    top: 6733px;
    opacity: 0;
  transform: translate(0, 25px);
  }
  
  .metro-case-study .trip-planner-1.animate-enter117 {
    animation: animate-enter117-frames 2.00s ease-in-out 0.00s 1 normal forwards;
    opacity: 0;
  transform: translate(0, 25px);
  }
  
  @keyframes animate-enter117-frames {
    from{opacity: 0;
  transform: translate(0, 25px);
  }
  to{opacity: 1;
  transform: translate(0,0);
  }
  }
  
  .metro-case-study .footer-menu-1 {
    height: 33px;
    left: 117px;
    letter-spacing: 0;
    position: absolute;
    top: 7214px;
    opacity: 0;
  transform: translate(0, 25px);
  }
  
  .metro-case-study .footer-menu-1.animate-enter118 {
    animation: animate-enter118-frames 2.00s ease-in-out 0.00s 1 normal forwards;
    opacity: 0;
  transform: translate(0, 25px);
  }
  
  @keyframes animate-enter118-frames {
    from{opacity: 0;
  transform: translate(0, 25px);
  }
  to{opacity: 1;
  transform: translate(0,0);
  }
  }
  
  .metro-case-study .overlap-group11 {
    height: 118px;
    left: 117px;
    position: absolute;
    top: 1240px;
    width: 545px;
  }
  
  .metro-case-study .the-problem {
    height: 42px;
    left: 0;
    letter-spacing: 0;
    position: absolute;
    top: 0;
    width: 118px;
    opacity: 0;
  transform: translate(0, 25px);
  }
  
  .metro-case-study .the-problem.animate-enter119 {
    animation: animate-enter119-frames 2.00s ease-in-out 0.00s 1 normal forwards;
    opacity: 0;
  transform: translate(0, 25px);
  }
  
  @keyframes animate-enter119-frames {
    from{opacity: 0;
  transform: translate(0, 25px);
  }
  to{opacity: 1;
  transform: translate(0,0);
  }
  }
  
  .metro-case-study .text-65 {
    height: 78px;
    left: 0;
    letter-spacing: 0;
    line-height: 23.1px;
    position: absolute;
    top: 40px;
    width: 545px;
    opacity: 0;
  transform: translate(0, 25px);
  }
  
  .metro-case-study .text-65.animate-enter123 {
    animation: animate-enter123-frames 2.00s ease-in-out 0.00s 1 normal forwards;
    opacity: 0;
  transform: translate(0, 25px);
  }
  
  @keyframes animate-enter123-frames {
    from{opacity: 0;
  transform: translate(0, 25px);
  }
  to{opacity: 1;
  transform: translate(0,0);
  }
  }
  
  .metro-case-study .overlap-group9 {
    height: 102px;
    left: 117px;
    position: absolute;
    top: 1400px;
    width: 582px;
  }
  
  .metro-case-study .the-solution {
    height: 45px;
    left: 0;
    letter-spacing: 0;
    position: absolute;
    top: 0;
    width: 116px;
    opacity: 0;
  transform: translate(0, 25px);
  }
  
  .metro-case-study .the-solution.animate-enter120 {
    animation: animate-enter120-frames 2.00s ease-in-out 0.00s 1 normal forwards;
    opacity: 0;
  transform: translate(0, 25px);
  }
  
  @keyframes animate-enter120-frames {
    from{opacity: 0;
  transform: translate(0, 25px);
  }
  to{opacity: 1;
  transform: translate(0,0);
  }
  }
  
  .metro-case-study .text-71 {
    height: 62px;
    left: 1px;
    letter-spacing: 0;
    line-height: 23.1px;
    position: absolute;
    top: 40px;
    width: 581px;
  }
  
  .metro-case-study .text-63 {
    height: 115px;
    left: 117px;
    letter-spacing: 0;
    line-height: 23.1px;
    position: absolute;
    top: 565px;
    width: 326px;
    opacity: 0;
  transform: translate(0, 25px);
  }
  
  .metro-case-study .text-63.animate-enter121 {
    animation: animate-enter121-frames 2.00s ease-in-out 0.00s 1 normal forwards;
    opacity: 0;
  transform: translate(0, 25px);
  }
  
  @keyframes animate-enter121-frames {
    from{opacity: 0;
  transform: translate(0, 25px);
  }
  to{opacity: 1;
  transform: translate(0,0);
  }
  }
  
  .metro-case-study .text-64 {
    height: 122px;
    left: 115px;
    letter-spacing: 0;
    line-height: 23.1px;
    position: absolute;
    top: 1080px;
    width: 587px;
    opacity: 0;
  transform: translate(0, 25px);
  }
  
  .metro-case-study .text-64.animate-enter122 {
    animation: animate-enter122-frames 2.00s ease-in-out 0.00s 1 normal forwards;
    opacity: 0;
  transform: translate(0, 25px);
  }
  
  @keyframes animate-enter122-frames {
    from{opacity: 0;
  transform: translate(0, 25px);
  }
  to{opacity: 1;
  transform: translate(0,0);
  }
  }
  
  .metro-case-study .image-4 {
    display: block;
    height: 48px;
    left: 117px;
    object-fit: cover;
    position: absolute;
    top: 504px;
    width: 350px;
    opacity: 0;
  transform: translate(0, 25px);
  }
  
  .metro-case-study .image-4.animate-enter124 {
    animation: animate-enter124-frames 1.00s ease-in-out 0.00s 1 normal forwards;
    display: block;
    opacity: 0;
  transform: translate(0, 25px);
  }
  
  @keyframes animate-enter124-frames {
    from{opacity: 0;
  transform: translate(0, 25px);
  }
  to{opacity: 1;
  transform: translate(0,0);
  }
  }
  
  .metro-case-study .overlap-group4 {
    height: 168px;
    left: 507px;
    position: absolute;
    top: 2272px;
    width: 545px;
  }
  
  .metro-case-study .number {
    height: 137px;
    left: 0;
    letter-spacing: 0;
    position: absolute;
    top: 0;
    opacity: 0;
  transform: translate(0, 25px);
  }
  
  .metro-case-study .number.animate-enter125 {
    animation: animate-enter125-frames 2.00s ease-in-out 0.00s 1 normal forwards;
    opacity: 0;
  transform: translate(0, 25px);
  }
  
  @keyframes animate-enter125-frames {
    from{opacity: 0;
  transform: translate(0, 25px);
  }
  to{opacity: 1;
  transform: translate(0,0);
  }
  }
  
  .metro-case-study .text-66 {
    height: 137px;
    left: 233px;
    letter-spacing: 0;
    position: absolute;
    top: 0;
    opacity: 0;
  transform: translate(0, 25px);
  }
  
  .metro-case-study .text-66.animate-enter126 {
    animation: animate-enter126-frames 2.00s ease-in-out 0.00s 1 normal forwards;
    opacity: 0;
  transform: translate(0, 25px);
  }
  
  @keyframes animate-enter126-frames {
    from{opacity: 0;
  transform: translate(0, 25px);
  }
  to{opacity: 1;
  transform: translate(0,0);
  }
  }
  
  .metro-case-study .surname-4 {
    height: 40px;
    left: 1px;
    letter-spacing: 0;
    position: absolute;
    top: 128px;
    width: 235px;
  }
  
  .metro-case-study .frames {
    height: 40px;
    left: 310px;
    letter-spacing: 0;
    position: absolute;
    top: 128px;
    width: 235px;
    opacity: 0;
  transform: translate(0, 25px);
  }
  
  .metro-case-study .frames.animate-enter127 {
    animation: animate-enter127-frames 2.00s ease-in-out 0.00s 1 normal forwards;
    opacity: 0;
  transform: translate(0, 25px);
  }
  
  @keyframes animate-enter127-frames {
    from{opacity: 0;
  transform: translate(0, 25px);
  }
  to{opacity: 1;
  transform: translate(0,0);
  }
  }
  
  .metro-case-study .line-4 {
    display: block;
    height: 160px;
    left: 156px;
    position: absolute;
    top: 8px;
    width: 2px;
    opacity: 0;
  transform: translate(0, 25px);
  }
  
  .metro-case-study .line-4.animate-enter128 {
    animation: animate-enter128-frames 2.00s ease-in-out 0.00s 1 normal forwards;
    display: block;
    opacity: 0;
  transform: translate(0, 25px);
  }
  
  @keyframes animate-enter128-frames {
    from{opacity: 0;
  transform: translate(0, 25px);
  }
  to{opacity: 1;
  transform: translate(0,0);
  }
  }
  
  .metro-case-study .text-67 {
    height: 108px;
    left: 210px;
    letter-spacing: 0;
    position: absolute;
    top: 1876px;
    opacity: 0;
  transform: translate(0, 25px);
  }
  
  .metro-case-study .text-67.animate-enter129 {
    animation: animate-enter129-frames 2.00s ease-in-out 0.00s 1 normal forwards;
    opacity: 0;
  transform: translate(0, 25px);
  }
  
  @keyframes animate-enter129-frames {
    from{opacity: 0;
  transform: translate(0, 25px);
  }
  to{opacity: 1;
  transform: translate(0,0);
  }
  }
  
  .metro-case-study .text-68 {
    height: 135px;
    left: 624px;
    letter-spacing: 0;
    position: absolute;
    top: 1876px;
    opacity: 0;
  transform: translate(0, 25px);
  }
  
  .metro-case-study .text-68.animate-enter130 {
    animation: animate-enter130-frames 2.00s ease-in-out 0.00s 1 normal forwards;
    opacity: 0;
  transform: translate(0, 25px);
  }
  
  @keyframes animate-enter130-frames {
    from{opacity: 0;
  transform: translate(0, 25px);
  }
  to{opacity: 1;
  transform: translate(0,0);
  }
  }
  
  .metro-case-study .text-69 {
    height: 108px;
    left: 1091px;
    letter-spacing: 0;
    position: absolute;
    top: 1880px;
    opacity: 0;
  transform: translate(0, 25px);
  }
  
  .metro-case-study .text-69.animate-enter131 {
    animation: animate-enter131-frames 2.00s ease-in-out 0.00s 1 normal forwards;
    opacity: 0;
  transform: translate(0, 25px);
  }
  
  @keyframes animate-enter131-frames {
    from{opacity: 0;
  transform: translate(0, 25px);
  }
  to{opacity: 1;
  transform: translate(0,0);
  }
  }
  
  .metro-case-study .image-6 {
    display: block;
    height: 170px;
    left: 151px;
    object-fit: cover;
    position: absolute;
    top: 2489px;
    width: 1126px;
    opacity: 0;
  transform: translate(0, 25px);
  }
  
  .metro-case-study .image-6.animate-enter132 {
    animation: animate-enter132-frames 2.00s ease-in-out 0.00s 1 normal forwards;
    display: block;
    opacity: 0;
  transform: translate(0, 25px);
  }
  
  @keyframes animate-enter132-frames {
    from{opacity: 0;
  transform: translate(0, 25px);
  }
  to{opacity: 1;
  transform: translate(0,0);
  }
  }
  
  .metro-case-study .text-70 {
    height: 184px;
    left: 117px;
    letter-spacing: 0;
    line-height: 23.1px;
    position: absolute;
    top: 3040px;
    width: 352px;
    opacity: 0;
  transform: translate(0, 25px);
  }
  
  .metro-case-study .text-70.animate-enter133 {
    animation: animate-enter133-frames 2.00s ease-in-out 0.00s 1 normal forwards;
    opacity: 0;
  transform: translate(0, 25px);
  }
  
  @keyframes animate-enter133-frames {
    from{opacity: 0;
  transform: translate(0, 25px);
  }
  to{opacity: 1;
  transform: translate(0,0);
  }
  }
  
  .metro-case-study .market-analysis-1 {
    display: block;
    height: 466px;
    left: 550px;
    object-fit: cover;
    position: absolute;
    top: 2893px;
    width: 890px;
    opacity: 0;
  transform: translate(-25px, 0);
  }
  
  .metro-case-study .market-analysis-1.animate-enter134 {
    animation: animate-enter134-frames 2.00s ease-in-out 0.00s 1 normal forwards;
    display: block;
    opacity: 0;
  transform: translate(-25px, 0);
  }
  
  @keyframes animate-enter134-frames {
    from{opacity: 0;
  transform: translate(-25px, 0);
  }
  to{opacity: 1;
  transform: translate(0,0);
  }
  }
  
  .metro-case-study .overlap-group {
    height: 654px;
    left: 89px;
    position: absolute;
    top: 8037px;
    width: 1235px;
  }
  
  .metro-case-study .text-76 {
    left: 24px;
    letter-spacing: 0;
    position: absolute;
    top: 0;
    width: 469px;
    opacity: 0;
  transform: translate(0, 25px);
  }
  
  .metro-case-study .text-76.animate-enter146 {
    animation: animate-enter146-frames 2.00s ease-in-out 0.00s 1 normal forwards;
    opacity: 0;
  transform: translate(0, 25px);
  }
  
  @keyframes animate-enter146-frames {
    from{opacity: 0;
  transform: translate(0, 25px);
  }
  to{opacity: 1;
  transform: translate(0,0);
  }
  }
  
  .metro-case-study .image-11 {
    display: block;
    height: 588px;
    left: 0;
    position: absolute;
    top: 66px;
    width: 1235px;
    opacity: 0;
  transform: translate(0, 25px);
  }
  
  .metro-case-study .image-11.animate-enter151 {
    animation: animate-enter151-frames 2.00s ease-in-out 0.00s 1 normal forwards;
    display: block;
    opacity: 0;
  transform: translate(0, 25px);
  }
  
  @keyframes animate-enter151-frames {
    from{opacity: 0;
  transform: translate(0, 25px);
  }
  to{opacity: 1;
  transform: translate(0,0);
  }
  }
  
  .metro-case-study .user-flow {
    height: 55px;
    left: 113px;
    letter-spacing: 0;
    position: absolute;
    top: 7958px;
    opacity: 0;
  transform: translate(0, 25px);
  }
  
  .metro-case-study .user-flow.animate-enter147 {
    animation: animate-enter147-frames 2.00s ease-in-out 0.00s 1 normal forwards;
    opacity: 0;
  transform: translate(0, 25px);
  }
  
  @keyframes animate-enter147-frames {
    from{opacity: 0;
  transform: translate(0, 25px);
  }
  to{opacity: 1;
  transform: translate(0,0);
  }
  }
  
  .metro-case-study .text-77 {
    height: 33px;
    left: 115px;
    letter-spacing: 0;
    position: absolute;
    top: 10477px;
    opacity: 0;
  transform: translate(-25px, 0);
  }
  
  .metro-case-study .text-77.animate-enter148 {
    animation: animate-enter148-frames 2.00s ease-in-out 0.00s 1 normal forwards;
    opacity: 0;
  transform: translate(-25px, 0);
  }
  
  @keyframes animate-enter148-frames {
    from{opacity: 0;
  transform: translate(-25px, 0);
  }
  to{opacity: 1;
  transform: translate(0,0);
  }
  }
  
  .metro-case-study .text-79 {
    left: 118px;
    letter-spacing: 0;
    position: absolute;
    top: 11040px;
    width: 469px;
    opacity: 0;
  transform: translate(0, 25px);
  }
  
  .metro-case-study .text-79.animate-enter152 {
    animation: animate-enter152-frames 2.00s ease-in-out 0.00s 1 normal forwards;
    opacity: 0;
  transform: translate(0, 25px);
  }
  
  @keyframes animate-enter152-frames {
    from{opacity: 0;
  transform: translate(0, 25px);
  }
  to{opacity: 1;
  transform: translate(0,0);
  }
  }
  
  .metro-case-study .text-80 {
    left: 118px;
    letter-spacing: 0;
    position: absolute;
    top: 11201px;
    width: 469px;
    opacity: 0;
  transform: translate(0, 25px);
  }
  
  .metro-case-study .text-80.animate-enter153 {
    animation: animate-enter153-frames 2.00s ease-in-out 0.00s 1 normal forwards;
    opacity: 0;
  transform: translate(0, 25px);
  }
  
  @keyframes animate-enter153-frames {
    from{opacity: 0;
  transform: translate(0, 25px);
  }
  to{opacity: 1;
  transform: translate(0,0);
  }
  }
  
  .metro-case-study .text-81 {
    left: 119px;
    letter-spacing: 0;
    position: absolute;
    top: 11361px;
    width: 469px;
    opacity: 0;
  transform: translate(0, 25px);
  }
  
  .metro-case-study .text-81.animate-enter154 {
    animation: animate-enter154-frames 2.00s ease-in-out 0.00s 1 normal forwards;
    opacity: 0;
  transform: translate(0, 25px);
  }
  
  @keyframes animate-enter154-frames {
    from{opacity: 0;
  transform: translate(0, 25px);
  }
  to{opacity: 1;
  transform: translate(0,0);
  }
  }
  
  .metro-case-study .usability-testing {
    height: 55px;
    left: 118px;
    letter-spacing: 0;
    position: absolute;
    top: 10961px;
    opacity: 0;
  transform: translate(0, 25px);
  }
  
  .metro-case-study .usability-testing.animate-enter155 {
    animation: animate-enter155-frames 2.00s ease-in-out 0.00s 1 normal forwards;
    opacity: 0;
  transform: translate(0, 25px);
  }
  
  @keyframes animate-enter155-frames {
    from{opacity: 0;
  transform: translate(0, 25px);
  }
  to{opacity: 1;
  transform: translate(0,0);
  }
  }
  
  .metro-case-study .style-guide {
    height: 55px;
    left: 114px;
    letter-spacing: 0;
    position: absolute;
    top: 11632px;
    opacity: 0;
  transform: translate(0, 25px);
  }
  
  .metro-case-study .style-guide.animate-enter156 {
    animation: animate-enter156-frames 2.00s ease-in-out 0.00s 1 normal forwards;
    opacity: 0;
  transform: translate(0, 25px);
  }
  
  @keyframes animate-enter156-frames {
    from{opacity: 0;
  transform: translate(0, 25px);
  }
  to{opacity: 1;
  transform: translate(0,0);
  }
  }
  
  .metro-case-study .simple-ui {
    height: 55px;
    left: 158px;
    letter-spacing: 0;
    position: absolute;
    top: 12758px;
    opacity: 0;
  transform: translate(0, 25px);
  }
  
  .metro-case-study .simple-ui.animate-enter157 {
    animation: animate-enter157-frames 2.00s ease-in-out 0.00s 1 normal forwards;
    opacity: 0;
  transform: translate(0, 25px);
  }
  
  @keyframes animate-enter157-frames {
    from{opacity: 0;
  transform: translate(0, 25px);
  }
  to{opacity: 1;
  transform: translate(0,0);
  }
  }
  
  .metro-case-study .favorite-routes {
    height: 55px;
    left: 855px;
    letter-spacing: 0;
    position: absolute;
    top: 16278px;
  }
  
  .metro-case-study .pros {
    height: 27px;
    left: 119px;
    letter-spacing: 0;
    position: absolute;
    top: 11161px;
    opacity: 0;
  transform: translate(0, 25px);
  }
  
  .metro-case-study .pros.animate-enter158 {
    animation: animate-enter158-frames 2.00s ease-in-out 0.00s 1 normal forwards;
    opacity: 0;
  transform: translate(0, 25px);
  }
  
  @keyframes animate-enter158-frames {
    from{opacity: 0;
  transform: translate(0, 25px);
  }
  to{opacity: 1;
  transform: translate(0,0);
  }
  }
  
  .metro-case-study .cons {
    height: 27px;
    left: 119px;
    letter-spacing: 0;
    position: absolute;
    top: 11321px;
    opacity: 0;
  transform: translate(0, 25px);
  }
  
  .metro-case-study .cons.animate-enter159 {
    animation: animate-enter159-frames 2.00s ease-in-out 0.00s 1 normal forwards;
    opacity: 0;
  transform: translate(0, 25px);
  }
  
  @keyframes animate-enter159-frames {
    from{opacity: 0;
  transform: translate(0, 25px);
  }
  to{opacity: 1;
  transform: translate(0,0);
  }
  }
  
  .metro-case-study .overlap-group6 {
    height: 693px;
    left: 725px;
    position: absolute;
    top: 11388px;
    width: 678px;
  }
  
  .metro-case-study .teamsolidiii {
    display: block;
    height: 693px;
    left: 16px;
    position: absolute;
    top: 0;
    width: 663px;
    opacity: 0;
  transform: translate(25px, 0);
  }
  
  .metro-case-study .teamsolidiii.animate-enter160 {
    animation: animate-enter160-frames 2.00s ease-in-out 0.00s 1 normal forwards;
    display: block;
    opacity: 0;
  transform: translate(25px, 0);
  }
  
  @keyframes animate-enter160-frames {
    from{opacity: 0;
  transform: translate(25px, 0);
  }
  to{opacity: 1;
  transform: translate(0,0);
  }
  }
  
  .metro-case-study .frame-45 {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    left: 0;
    position: absolute;
    top: 386px;
    width: 643px;
  }
  
  .metro-case-study .flex-row {
    align-items: flex-start;
    display: flex;
    height: 19px;
    margin-left: 13px;
    min-width: 534px;
  }
  
  .metro-case-study .primary {
    height: 18px;
    letter-spacing: 0;
    width: 79px;
  }
  
  .metro-case-study .secondary {
    align-self: flex-end;
    height: 18px;
    letter-spacing: 0;
    margin-left: 348px;
    width: 107px;
  }
  
  .metro-case-study .image-18 {
    display: block;
    height: 257px;
    margin-top: 2px;
    object-fit: cover;
    width: 643px;
    opacity: 0;
  transform: translate(0, 25px);
  }
  
  .metro-case-study .image-18.animate-enter166 {
    animation: animate-enter166-frames 2.00s ease-in-out 0.00s 1 normal forwards;
    display: block;
    opacity: 0;
  transform: translate(0, 25px);
  }
  
  @keyframes animate-enter166-frames {
    from{opacity: 0;
  transform: translate(0, 25px);
  }
  to{opacity: 1;
  transform: translate(0,0);
  }
  }
  
  .metro-case-study .graphs-and-stat-sticsoutlineii {
    display: block;
    height: 138px;
    left: 116px;
    position: absolute;
    top: 1703px;
    width: 341px;
    opacity: 0;
  transform: translate(-25px, 0);
  }
  
  .metro-case-study .graphs-and-stat-sticsoutlineii.animate-enter161 {
    animation: animate-enter161-frames 2.00s ease-in-out 0.00s 1 normal forwards;
    display: block;
    opacity: 0;
  transform: translate(-25px, 0);
  }
  
  @keyframes animate-enter161-frames {
    from{opacity: 0;
  transform: translate(-25px, 0);
  }
  to{opacity: 1;
  transform: translate(0,0);
  }
  }
  
  .metro-case-study .team-at-worksolid {
    display: block;
    height: 130px;
    left: 507px;
    position: absolute;
    top: 1712px;
    width: 424px;
    opacity: 0;
  transform: translate(0, 25px);
  }
  
  .metro-case-study .team-at-worksolid.animate-enter162 {
    animation: animate-enter162-frames 2.00s ease-in-out 0.00s 1 normal forwards;
    display: block;
    opacity: 0;
  transform: translate(0, 25px);
  }
  
  @keyframes animate-enter162-frames {
    from{opacity: 0;
  transform: translate(0, 25px);
  }
  to{opacity: 1;
  transform: translate(0,0);
  }
  }
  
  .metro-case-study .teachingoutlineii {
    display: block;
    height: 128px;
    left: 972px;
    position: absolute;
    top: 1712px;
    width: 395px;
    opacity: 0;
  transform: translate(25px, 0);
  }
  
  .metro-case-study .teachingoutlineii.animate-enter163 {
    animation: animate-enter163-frames 2.00s ease-in-out 0.00s 1 normal forwards;
    display: block;
    opacity: 0;
  transform: translate(25px, 0);
  }
  
  @keyframes animate-enter163-frames {
    from{opacity: 0;
  transform: translate(25px, 0);
  }
  to{opacity: 1;
  transform: translate(0,0);
  }
  }
  
  .metro-case-study .image-16 {
    height: 1px;
    left: -311px;
    object-fit: cover;
    position: absolute;
    top: 13294px;
    width: 1px;
  }
  
  .metro-case-study .frame-44 {
    height: 279px;
    left: 114px;
    position: absolute;
    top: 11758px;
    width: 466px;
    opacity: 0;
  transform: translate(0, 25px);
  }
  
  .metro-case-study .frame-44.animate-enter165 {
    animation: animate-enter165-frames 2.00s ease-in-out 0.00s 1 normal forwards;
    opacity: 0;
  transform: translate(0, 25px);
  }
  
  @keyframes animate-enter165-frames {
    from{opacity: 0;
  transform: translate(0, 25px);
  }
  to{opacity: 1;
  transform: translate(0,0);
  }
  }
  
  .metro-case-study .group-5 {
    height: 279px;
    position: relative;
    width: 480px;
    opacity: 0;
  transform: translate(0, 25px);
  }
  
  .metro-case-study .group-5.animate-enter164 {
    animation: animate-enter164-frames 2.00s ease-in-out 0.00s 1 normal forwards;
    opacity: 0;
  transform: translate(0, 25px);
  }
  
  @keyframes animate-enter164-frames {
    from{opacity: 0;
  transform: translate(0, 25px);
  }
  to{opacity: 1;
  transform: translate(0,0);
  }
  }
  
  .metro-case-study .proxima-nova {
    color: var(--main-text);
    font-family: var(--font-family-proxima_nova-medium);
    font-size: var(--font-size-xxxl);
    font-weight: 500;
    height: 40px;
    left: 1px;
    letter-spacing: 0;
    position: absolute;
    top: 0;
  }
  
  .metro-case-study .overlap-group12 {
    height: 226px;
    left: 0;
    position: absolute;
    top: 53px;
    width: 468px;
  }
  
  .metro-case-study .surname-5 {
    color: var(--main-text);
    font-family: var(--font-family-proxima_nova-bold);
    font-size: 35px;
    font-weight: 700;
    height: 35px;
    left: 0;
    letter-spacing: 0;
    position: absolute;
    top: 0;
  }
  
  .metro-case-study .text-84 {
    color: var(--main-text);
    font-family: var(--font-family-proxima_nova-bold);
    font-size: 30px;
    font-weight: 700;
    height: 46px;
    left: 0;
    letter-spacing: 0;
    position: absolute;
    top: 32px;
    width: 368px;
  }
  
  .metro-case-study .text-85 {
    color: var(--main-text);
    font-family: var(--font-family-proxima_nova-semibold);
    font-size: 25px;
    height: 40px;
    left: 1px;
    letter-spacing: 0;
    position: absolute;
    top: 75px;
    width: 466px;
  }
  
  .metro-case-study .text-86 {
    color: var(--main-text);
    font-family: var(--font-family-proxima_nova-semibold);
    font-size: var(--font-size-l);
    height: 40px;
    left: 2px;
    letter-spacing: 0;
    position: absolute;
    top: 112px;
    width: 466px;
  }
  
  .metro-case-study .text-87 {
    color: var(--main-text);
    font-family: var(--font-family-proxima_nova-medium);
    font-size: var(--font-size-l);
    font-weight: 500;
    height: 40px;
    left: 2px;
    letter-spacing: 0;
    position: absolute;
    top: 149px;
    width: 466px;
  }
  
  .metro-case-study .text-88 {
    color: var(--main-text);
    font-family: var(--font-family-proxima_nova-semibold);
    font-size: var(--font-size-m);
    height: 40px;
    left: 1px;
    letter-spacing: 0;
    position: absolute;
    top: 186px;
    width: 466px;
  }
  
  .metro-case-study .frame-46 {
    height: 128px;
    left: 121px;
    position: absolute;
    top: 12123px;
    width: 384px;
    opacity: 0;
  }
  
  .metro-case-study .frame-46.animate-enter167 {
    animation: animate-enter167-frames 2.00s ease-in-out 0.00s 1 normal forwards;
    opacity: 0;
  }
  
  @keyframes animate-enter167-frames {
    from{opacity: 0;
  }
  to{opacity: 1;
  }
  }
  
  .metro-case-study .overlap-group13 {
    height: 128px;
    left: -1px;
    position: relative;
    width: 387px;
  }
  
  .metro-case-study .group-11 {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    left: 1px;
    position: absolute;
    top: 0;
    width: 386px;
  }
  
  .metro-case-study .icons {
    height: 18px;
    letter-spacing: 0;
    width: 79px;
  }
  
  .metro-case-study .flex-row-1 {
    align-items: flex-end;
    display: flex;
    height: 31px;
    margin-left: 2px;
    margin-top: 16px;
    min-width: 382px;
  }
  
  .metro-case-study .bathroom {
    align-items: flex-start;
    background-image: url(../img/vector-105@2x.png);
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
    min-height: 30px;
    width: 27px;
  }
  
  .metro-case-study .vector {
    height: 22px;
    margin-left: 2.95px;
    margin-top: 3px;
    width: 21px;
  }
  
  .metro-case-study .vector-1 {
    height: 4px;
    margin-left: -0.05px;
    width: 27px;
  }
  
  .metro-case-study .child {
    background-image: url(../img/vector-108@2x.png);
    background-size: 100% 100%;
    height: 30px;
    margin-left: 45px;
    width: 21px;
  }
  
  .metro-case-study .group {
    align-items: flex-start;
    align-self: flex-start;
    display: flex;
    margin-left: 43px;
    min-width: 30px;
  }
  
  .metro-case-study .overlap-group12-1 {
    height: 30px;
    margin-top: -0.07px;
    position: relative;
    width: 30px;
  }
  
  .metro-case-study .vector-2 {
    height: 20px;
    left: 0;
    position: absolute;
    top: 11px;
    width: 30px;
  }
  
  .metro-case-study .vector-3 {
    height: 6px;
    left: 18px;
    position: absolute;
    top: 0;
    width: 7px;
  }
  
  .metro-case-study .vector-6 {
    height: 6px;
    left: 13px;
    position: absolute;
    top: 5px;
    width: 12px;
  }
  
  .metro-case-study .vector-7 {
    height: 6px;
    left: 4px;
    position: absolute;
    top: 7px;
    width: 9px;
  }
  
  .metro-case-study .food {
    align-items: flex-start;
    align-self: flex-start;
    display: flex;
    margin-left: 47px;
    min-width: 30px;
  }
  
  .metro-case-study .overlap-group14 {
    align-items: flex-start;
    background-image: url(../img/vector-114@2x.png);
    background-size: 100% 100%;
    display: flex;
    height: 30px;
    justify-content: flex-end;
    margin-top: -0.06px;
    min-width: 14px;
    padding: 0 4.9px;
  }
  
  .metro-case-study .vector-8 {
    height: 10px;
    width: 3px;
  }
  
  .metro-case-study .vector-9 {
    height: 30px;
    margin-left: 3px;
    width: 12px;
  }
  
  .metro-case-study .coffee {
    align-items: center;
    display: flex;
    flex-direction: column;
    margin-left: 43px;
    min-height: 30px;
    width: 27px;
  }
  
  .metro-case-study .vector-10 {
    height: 8px;
    margin-right: 1.11px;
    width: 8px;
  }
  
  .metro-case-study .vector-11 {
    height: 16px;
    margin-left: 3.33px;
    margin-top: 1px;
    width: 22px;
  }
  
  .metro-case-study .vector-12 {
    height: 2px;
    margin-top: 1px;
    width: 27px;
  }
  
  .metro-case-study .icbaseline-pool {
    height: 30px;
    margin-left: 39px;
    width: 30px;
  }
  
  .metro-case-study .icround-bed {
    align-self: flex-end;
    height: 30px;
    margin-right: 2px;
    margin-top: 33px;
    width: 30px;
  }
  
  .metro-case-study .vector-13 {
    height: 17px;
    left: 354px;
    position: absolute;
    top: 91px;
    width: 26px;
  }
  
  .metro-case-study .vector-14 {
    height: 22px;
    left: 0;
    position: absolute;
    top: 89px;
    width: 25px;
  }
  
  .metro-case-study .vector-15 {
    height: 22px;
    left: 282px;
    position: absolute;
    top: 86px;
    width: 30px;
  }
  
  .metro-case-study .vector-16 {
    height: 24px;
    left: 69px;
    position: absolute;
    top: 87px;
    width: 26px;
  }
  
  .metro-case-study .vector-17 {
    height: 4px;
    left: 74px;
    position: absolute;
    top: 101px;
    width: 4px;
  }
  
  .metro-case-study .vector-18 {
    height: 4px;
    left: 85px;
    position: absolute;
    top: 101px;
    width: 4px;
  }
  
  .metro-case-study .vector-19 {
    height: 22px;
    left: 136px;
    position: absolute;
    top: 85px;
    width: 30px;
  }
  
  .metro-case-study .vector-20 {
    height: 2px;
    left: 140px;
    position: absolute;
    top: 100px;
    width: 2px;
  }
  
  .metro-case-study .vector-21 {
    height: 2px;
    left: 144px;
    position: absolute;
    top: 100px;
    width: 2px;
  }
  
  .metro-case-study .vector-22 {
    height: 2px;
    left: 148px;
    position: absolute;
    top: 100px;
    width: 2px;
  }
  
  .metro-case-study .vector-23 {
    height: 2px;
    left: 152px;
    position: absolute;
    top: 100px;
    width: 2px;
  }
  
  .metro-case-study .vector-24 {
    height: 2px;
    left: 156px;
    position: absolute;
    top: 100px;
    width: 2px;
  }
  
  .metro-case-study .vector-25 {
    height: 28px;
    left: 209px;
    position: absolute;
    top: 83px;
    width: 38px;
  }
  
  .metro-case-study .frame-47 {
    height: 143px;
    left: 741px;
    position: absolute;
    top: 12126px;
    width: 476px;
    opacity: 0;
  transform: translate(0, 25px);
  }
  
  .metro-case-study .frame-47.animate-enter168 {
    animation: animate-enter168-frames 2.00s ease-in-out 0.00s 1 normal forwards;
    opacity: 0;
  transform: translate(0, 25px);
  }
  
  @keyframes animate-enter168-frames {
    from{opacity: 0;
  transform: translate(0, 25px);
  }
  to{opacity: 1;
  transform: translate(0,0);
  }
  }
  
  .metro-case-study .buttons {
    height: 18px;
    left: 0;
    letter-spacing: 0;
    position: absolute;
    top: 0;
    width: 79px;
  }
  
  .metro-case-study .button-primary {
    align-items: flex-start;
    display: flex;
    height: 30px;
    left: 0;
    position: absolute;
    top: 31px;
  }
  
  .metro-case-study .overlap-group12-2 {
    height: 30px;
    position: relative;
    width: 147px;
  }
  
  .metro-case-study .rectangle-14 {
    background-color: #286c95;
    border-radius: 10px;
    height: 30px;
    left: 0;
    position: absolute;
    top: 0;
    width: 144px;
  }
  
  .metro-case-study .find {
    color: var(--primarywhite);
    font-family: var(--font-family-proxima_nova-semibold);
    font-size: var(--font-size-l);
    height: 18px;
    left: 1px;
    letter-spacing: 0;
    position: absolute;
    text-align: center;
    top: 6px;
    width: 146px;
  }
  
  .metro-case-study .button-primary-1 {
    align-items: flex-end;
    background-color: #286c95;
    border-radius: 10px;
    display: flex;
    height: 29px;
    justify-content: flex-end;
    left: 27px;
    padding: 5.8px 0;
    position: absolute;
    top: 72px;
  }
  
  .metro-case-study .find-1 {
    color: var(--primarywhite);
    font-family: var(--font-family-proxima_nova-semibold);
    font-size: var(--font-size-m);
    height: 17px;
    letter-spacing: 0;
    text-align: center;
    width: 95px;
  }
  
  .metro-case-study .bus {
    height: 30px;
    left: 272px;
    position: absolute;
    top: 30px;
    width: 92px;
  }
  
  .metro-case-study .ferry {
    height: 32px;
    left: 384px;
    position: absolute;
    top: 28px;
    width: 92px;
  }
  
  .metro-case-study .drive {
    height: 30px;
    left: 160px;
    position: absolute;
    top: 30px;
    width: 92px;
  }
  
  .metro-case-study .ferry-1 {
    cursor: pointer;
    height: 31px;
    left: 384px;
    position: absolute;
    top: 71px;
    width: 92px;
  }
  
  .metro-case-study .bus-1 {
    cursor: pointer;
    height: 30px;
    left: 272px;
    position: absolute;
    top: 71px;
    width: 92px;
  }
  
  .metro-case-study .drive-1 {
    cursor: pointer;
    height: 30px;
    left: 160px;
    position: absolute;
    top: 71px;
    width: 92px;
  }
  
  .metro-case-study .counter {
    align-items: flex-start;
    display: flex;
    height: 24px;
    left: 20px;
    padding: 0 11px;
    position: absolute;
    top: 118px;
  }
  
  .metro-case-study .ant-design {
    align-items: center;
    display: flex;
    height: 24px;
    padding: 0 2.5px;
    width: 24px;
  }
  
  .metro-case-study .overlap-group12-3 {
    background-image: url(../img/vector-130@2x.png);
    background-size: 100% 100%;
    height: 19px;
    position: relative;
    width: 19px;
  }
  
  .metro-case-study .vector-26 {
    height: 16px;
    left: 2px;
    position: absolute;
    top: 2px;
    width: 16px;
  }
  
  .metro-case-study .vector-27 {
    height: 2px;
    left: 5px;
    position: absolute;
    top: 8px;
    width: 9px;
  }
  
  .metro-case-study .rectangle-13 {
    background-color: var(--primarywhite);
    border-radius: 20px;
    box-shadow: 0px 4px 4px #0000001a;
    height: 24px;
    width: 37px;
  }
  
  .metro-case-study .vector-28 {
    height: 19px;
    width: 19px;
  }
  
  .metro-case-study .text-89 {
    left: 158px;
    letter-spacing: 0;
    position: absolute;
    top: 12842px;
    width: 309px;
    opacity: 0;
  transform: translate(0, 25px);
  }
  
  .metro-case-study .text-89.animate-enter169 {
    animation: animate-enter169-frames 2.00s ease-in-out 0.00s 1 normal forwards;
    opacity: 0;
  transform: translate(0, 25px);
  }
  
  @keyframes animate-enter169-frames {
    from{opacity: 0;
  transform: translate(0, 25px);
  }
  to{opacity: 1;
  transform: translate(0,0);
  }
  }
  
  .metro-case-study .text-94 {
    left: 855px;
    letter-spacing: 0;
    position: absolute;
    top: 16358px;
    width: 425px;
  }
  
  .metro-case-study .image-13 {
    display: block;
    height: 316px;
    left: -34px;
    position: absolute;
    top: 9725px;
    width: 740px;
    opacity: 0;
  }
  
  .metro-case-study .image-13.animate-enter172 {
    animation: animate-enter172-frames 2.00s ease-in-out 0.00s 1 normal forwards;
    display: block;
    opacity: 0;
  }
  
  @keyframes animate-enter172-frames {
    from{opacity: 0;
  }
  to{opacity: 1;
  }
  }
  
  .metro-case-study .image-14 {
    display: block;
    height: 316px;
    left: 764px;
    position: absolute;
    top: 9725px;
    width: 720px;
    opacity: 0;
  }
  
  .metro-case-study .image-14.animate-enter173 {
    animation: animate-enter173-frames 2.00s ease-in-out 0.00s 1 normal forwards;
    display: block;
    opacity: 0;
  }
  
  @keyframes animate-enter173-frames {
    from{opacity: 0;
  }
  to{opacity: 1;
  }
  }
  
  .metro-case-study .frame-103-1 {
    display: block;
    height: 316px;
    left: 0;
    object-fit: cover;
    position: absolute;
    top: 10517px;
    width: 1440px;
    opacity: 0;
  }
  
  .metro-case-study .frame-103-1.animate-enter174 {
    animation: animate-enter174-frames 2.00s ease-in-out 0.00s 1 normal forwards;
    display: block;
    opacity: 0;
  }
  
  @keyframes animate-enter174-frames {
    from{opacity: 0;
  }
  to{opacity: 1;
  }
  }
  
  .metro-case-study .frame-102-1 {
    display: block;
    height: 316px;
    left: 37px;
    object-fit: cover;
    position: absolute;
    top: 10121px;
    width: 1440px;
    opacity: 0;
  }
  
  .metro-case-study .frame-102-1.animate-enter175 {
    animation: animate-enter175-frames 2.00s ease-in-out 0.00s 1 normal forwards;
    display: block;
    opacity: 0;
  }
  
  @keyframes animate-enter175-frames {
    from{opacity: 0;
  }
  to{opacity: 1;
  }
  }
  
  .metro-case-study .wireframe-sketches {
    height: 33px;
    left: 117px;
    letter-spacing: 0;
    position: absolute;
    top: 9681px;
    opacity: 0;
  transform: translate(-25px, 0);
  }
  
  .metro-case-study .wireframe-sketches.animate-enter176 {
    animation: animate-enter176-frames 2.00s ease-in-out 0.00s 1 normal forwards;
    opacity: 0;
  transform: translate(-25px, 0);
  }
  
  @keyframes animate-enter176-frames {
    from{opacity: 0;
  transform: translate(-25px, 0);
  }
  to{opacity: 1;
  transform: translate(0,0);
  }
  }
  
  .metro-case-study .text-96 {
    height: 33px;
    left: 117px;
    letter-spacing: 0;
    position: absolute;
    top: 10081px;
    opacity: 0;
  transform: translate(-25px, 0);
  }
  
  .metro-case-study .text-96.animate-enter177 {
    animation: animate-enter177-frames 2.00s ease-in-out 0.00s 1 normal forwards;
    opacity: 0;
  transform: translate(-25px, 0);
  }
  
  @keyframes animate-enter177-frames {
    from{opacity: 0;
  transform: translate(-25px, 0);
  }
  to{opacity: 1;
  transform: translate(0,0);
  }
  }
  
  .metro-case-study .frame-4 {
    display: block;
    height: 621px;
    left: 472px;
    object-fit: cover;
    position: absolute;
    top: 5720px;
    width: 903px;
    opacity: 0;
  transform: translate(25px, 0);
  }
  
  .metro-case-study .frame-4.animate-enter178 {
    animation: animate-enter178-frames 2.00s ease-in-out 0.00s 1 normal forwards;
    display: block;
    opacity: 0;
  transform: translate(25px, 0);
  }
  
  @keyframes animate-enter178-frames {
    from{opacity: 0;
  transform: translate(25px, 0);
  }
  to{opacity: 1;
  transform: translate(0,0);
  }
  }
  
  .metro-case-study .frame-6 {
    display: block;
    height: 621px;
    left: 618px;
    object-fit: cover;
    position: absolute;
    top: 6513px;
    width: 632px;
    opacity: 0;
  transform: translate(25px, 0);
  }
  
  .metro-case-study .frame-6.animate-enter179 {
    animation: animate-enter179-frames 2.00s ease-in-out 0.00s 1 normal forwards;
    display: block;
    opacity: 0;
  transform: translate(25px, 0);
  }
  
  @keyframes animate-enter179-frames {
    from{opacity: 0;
  transform: translate(25px, 0);
  }
  to{opacity: 1;
  transform: translate(0,0);
  }
  }
  
  .metro-case-study .group-6 {
    align-items: flex-start;
    display: flex;
    height: 83px;
    left: 0;
    position: absolute;
    top: 0;
  }
  
  .metro-case-study .overlap-group15 {
    align-items: flex-end;
    background-color: var(--primarywhite);
    display: flex;
    height: 83px;
    justify-content: flex-end;
    min-width: 1440px;
    padding: 3px 47px;
  }
  
  .metro-case-study .artboard-1-copy-6 {
    height: 65px;
    object-fit: cover;
    width: 85px;
  }
  
  .metro-case-study .work {
    height: 40px;
    letter-spacing: 0;
    margin-left: 737px;
    pointer-events: auto;
    transition: all 0.2s ease;
    width: 79px;
  }
  
  .metro-case-study .work:hover {
    color: #18A999
  }
  
  .metro-case-study .resume {
    height: 40px;
    letter-spacing: 0;
    margin-left: 22px;
    pointer-events: auto;
    transition: all 0.2s ease;
    width: 95px;
  }
  
  .metro-case-study .resume:hover {
    background-color: #fff
  }
  
  .metro-case-study .creative {
    height: 40px;
    letter-spacing: 0;
    margin-left: 22px;
    pointer-events: auto;
    transition: all 0.2s ease;
    width: 94px;
  }
  
  .metro-case-study .creative:hover {
    color: #18A999
  }
  
  .metro-case-study .overlap-group12-4 {
    height: 40px;
    margin-left: 9px;
    position: relative;
    width: 171px;
  }
  
  .metro-case-study .rectangle-1 {
    background-color: var(--main-text);
    border-radius: 10px;
    height: 32px;
    left: 0;
    pointer-events: auto;
    position: absolute;
    top: 4px;
    transition: all 0.2s ease;
    width: 105px;
  }
  
  .metro-case-study .rectangle-1:hover {
    transform: scale(1.1);
  }
  
  .metro-case-study .place {
    height: 40px;
    left: 13px;
    letter-spacing: 0;
    position: absolute;
    top: 0;
    width: 158px;
  }
  a.nic-prof:active{
    color:white;
    text-decoration: none;
}
a.nic-prof:hover{
    color: white;
    text-decoration: none;
}
a.nic-prof:link{
    color: white;
    text-decoration: none;
}
a.nic-prof:visited {
    color: white;
   text-decoration: none;
}

.case-image-ill-2{
  width: 90%
}
.case-image-ill-2b{
  height: 50%
}
@media (max-width: 600px) {
  .case-image-ill-2{
      max-width: 50%;
      margin-left: 0;
      margin-top: 50px;
  }
  .case-image-ill-2b{
    max-width: 50%;
    margin-left: 0;
    margin-top: 50px;
  }

}

@media (max-width: 920px) {
  .case-image-ill-2{
      max-width: 70%;
      margin-left: 0;
      margin-top: 10px;
  }
  .case-image-ill-2b{
    max-width: 70%;
    margin-left: 0;
    margin-top: 10px;
  }
}
.vl-r{
  border-left: 3px solid #FFA631;
  height: 100px;
}

.dpz{
  width: 85%;
}

.round-point{
  background-color: #7BE8D6;
  border: 3px solid #7BE8D6;
  border-radius: 50px;
  width: 40px;
  height: 40px;
  color: white;
  text-align: center;
  font-size: 20pt;
  font-family: var(--font-family-avenir-book);
}

@media (max-width: 600px) {
  .video{
      
      margin-left: 0;
  }
}
@media (max-width:920px) {
  .video{
    
      margin: 0;
  }
}