/*@font-face {
    font-family: 'Inter';
    font-style:  normal;
    font-weight: 400;
    font-display: swap;
    src: url("fonts/Inter-Regular.woff2") format("woff2"),
         url("fonts/Inter-Regular.woff") format("woff");
         
}
  
@font-face {
    font-family: 'Inter';
    font-style:  normal;
    font-weight: 600;
    font-display: swap;
    src: url("fonts/Inter-SemiBold.woff2") format("woff2"),
         url("fonts/Inter-SemiBold.woff") format("woff");
}*/

html {
    font-family:'Inter', sans-serif;
    font-weight:400;
    font-size:min(max(1rem, 2vw), 1.2rem);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    color:var(--gray-98);
    background-color:var(--gray-14);

}

:root {
    --gray-14:#000000;
    --gray-30:#293951;
    --gray-51:#A0A9B5;
    --gray-72:#ABB4C2;
    --gray-93:#EAEDF1;
    --gray-98:#F7F9FC;
    --link-color:#5e5bf1;

  }

  body {
    margin:0;
  }

ul {
      line-height: 1.75em;
      padding-inline-start: 24px;
      margin-block-start: .75em;

    }

ol {
    line-height: 1.75em;
    padding-inline-start: 24px;
    margin-block-start: .75em;
    }
  
h1 {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: min(max(1.728rem, 2.2vw), 2.488rem);
    color: var(--gray-98);
    margin: 0;
}

h2 {
    font-family:'Inter', sans-serif;
    font-weight: 600;
    font-size: min(max(1.728rem, 3vw), 2.488rem);
    color: var(--gray-98);
    margin:0;
}

h3 {
    font-family:'Inter', sans-serif;
    font-weight: 600;
    font-size: min(max(1.728rem, 2vw), 2.074rem);
    color: var(--gray-98);
    margin:0;
}

h4 {
    font-family:'Inter', sans-serif;
    font-weight: 500;
    font-size: min(max(1.728rem, 2vw), 1.44rem);
    line-height: min(max(2.074rem, 2vw), 2.488rem);
    color: var(--gray-98);
    margin:0;
}

p {
    margin-top:.694em;
    margin-bottom:18px;
    font-family:'Inter', san-serif;
    line-height:1.75em;
    color: var(--gray-98);
}

/* LINK STYLES */

/*a:link {
    color: var(--gray-51);
    text-decoration: none;
  }
  
a:hover {
    color: var(--gray-98);
    text-decoration: none;
  }
  
a:visited {
    color: var(--gray-51);
    text-decoration: none;
  }

a:active {
    color: var(--gray-51);
    text-decoration: none;
  }
  */

#nav-wrapper {
    width: 100%;
    position: fixed;
    padding-left: 0em;
    padding-right: 0em;
    top: 0;
    background-color: #000000d6;
    z-index: 1;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
#navigation {
    display:flex;
    justify-content:space-between;
    height:88px;
    margin-left:2.5em;
    margin-right:2.5em;
    font-size: 16px;
}


#logo {
    align-self: center;
}

#logo a:link, a:visited, a:hover {
    text-decoration: none;
    color:var(--gray-51);
    font-weight: 600; 
    letter-spacing: 0px;
}

#nav-menu {
    display:flex;
    align-self: center;
    font-weight:400;
}

#container {
    max-width: 1900px;
    margin: auto;
    padding-left: 0em;
    padding-right: 0em;
    padding-top: 2.5em;
    padding-bottom: 0em;
}
@media only screen and (max-width: 600px){
    #container {
        max-width: 1900px;
        margin: auto;
        padding-left: 0em;
        padding-right: 0em;
        padding-top: 1.728em;
        padding-bottom: 0em;
    }
}

.about-container {
    padding-left: 2.5em;
    padding-right: 2.5em;
    margin: auto;
    max-width: 1152px;
    position: relative;
    justify-content: space-between;
    display: flex;
}

.about-image {
    max-width: 300px;
    margin-left:48px;
}

.about-image img {
    max-width: 300px;
}

.about-text {
    max-width: 700px;
    float: left;
}

.about-text a:link {
    color: #5398f0;
    text-decoration:none;
}

.about-text a:hover {
    color: #5398f0;
    font-weight:400;
}

.about-text a:visited {
    color: #5398f0;
    font-weight:400;
}

.menu-item {
    margin-left:2.25em;
}

.menu-item a:link {
    color: var(--gray-51);
    text-decoration: none;
    /*letter-spacing: -0.2px;*/
}
  
.menu-item a:hover {
    color: var(--gray-98);
    text-decoration: none;
    font-weight: 400;
}
  
.menu-item a:visited {
    text-decoration: none;
}

.menu-item a:active {
    color: var(--gray-51);
    text-decoration: none;
}

.hero-text {
    width:90%;
}

.content {
    margin-bottom:96px;
}

#footer {
    font-size: 12px;
    height: 48px;
    max-width: 1152px;
    text-align: center;
    justify-content: center;
    margin: auto;
    color:var(--gray-51);
    padding-bottom:0;
    padding-left:2.5em;
    padding-right:2.5em;
    opacity: 0.7;

}

.intro-text a:link {
    color: #5398f0;
    text-decoration:none;
}

.intro-text a:hover {
    color: #5398f0;
    font-weight:400;

}

/* IMAGE GRID */

.grid-image-inner-wrapper img {
    max-width: 100%;
    max-height: 100%;
}

.work-grid {
    display: grid;
	grid-template-columns: repeat(2,minmax(0,1fr));
	grid-column-gap: 2.15em;
    grid-row-gap: 2.15em;
	grid-auto-rows: min-content;

}
@media only screen and (max-width: 600px){
    .work-grid {
        display: grid;
        grid-template-columns: repeat(1,minmax(0,1fr));
        grid-column-gap: 48px;
        grid-row-gap: 48px;
        grid-auto-rows: min-content;
    }
    .hero-text {
        width:100%;
    }
}

.grid-image-inner-wrapper {
    overflow: hidden;
}

.grid-image-inner-wrapper img {
    transition: transform .5s ease;
}
.grid-image-inner-wrapper:hover img {
    transform: scale(1.1);
  }

.grid-text {
    margin-top:0.6em;
}

.grid-text h4{
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size:min(max(1rem, 2vw), 1rem);
    line-height: min(max(2.074rem, 2vw), 2.488rem);
    color: var(--gray-98);
    margin: 0;
}

.title-block {
    padding-left: 2.5em;
    padding-right: 2.5em;
    max-width: 1152px;
    margin: auto;
    margin-top: 64px;
    margin-bottom: 72px;
    padding-top:100px;
}


.hero-image-block {
    height: min(max(18rem, 58vw), 60rem);
    position: relative;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    
}


.intro-block {
    padding-left:2.5em;
    padding-right:2.5em;
    background-color:var(--gray-14);
    height:auto;
    color:var(--gray-98);
}

.intro-text {
    padding-top: 0px;
    padding-bottom: 120px;
    max-width: 640px;
    margin: auto;
    

}

.intro-text h4 {
    color:var(--gray-98);
}

.summary-text {
    max-width: 640px;
    margin: auto;
    margin-top: 120px;
    margin-bottom: 52px;
}



.intro-columns {
    padding-top:18px;
    padding-bottom: 100px;
    max-width: 640px;
    margin: auto;
    height: 58px;
}

.column {
    float:left;
    margin-right:48px;
}
.column p{
    color:var(--gray-98);
    margin-top:0px;
}
.column b {
    color:var(--gray-51);
    font-weight: 400;

}
.intro-image-wrapper{
    width:100%;
    margin:auto;
    background-color:var(--gray-14);
}
.intro-image-block {
    padding-left:2.5em;
    padding-right:2.5em;
    margin:auto;
    max-width:1152px;
    position: relative;
    background-position: center;
    background-repeat: no-repeat;
    background-size:100%;
}
.image-caption {
    font-size: 12px;
    height: 48px;
    max-width: 1152px;
    text-align: center;
    justify-content: center;
    margin: auto;
    color:var(--gray-51);
    padding-bottom:88px;
    padding-left:2.5em;
    padding-right:2.5em;
    opacity: 0.7;
}
.white-rectangle{
    height:200px;
    background-color:#FFFFFF;
    margin-top:-200px;
}

.intro-image-block img {
    height: 100%;
    width: 100%;
}

.intro-image-block-end {
    background-color:var(--gray-14);

}

.text-content {
    max-width: 640px;
    margin:auto;
    margin-top:20px;
    margin-bottom:100px;
    padding-left:2.5em;
    padding-right:2.5em;

}

@media only screen and (max-width: 600px){
 
    .menu-item {
        margin-left:1.44em;
    }

    .about-container {
        padding-left: 1.2em;
        padding-right: 1.2em;
        margin: auto;
        max-width: 1152px;
        position: relative;
        justify-content: space-between;
        display:block;
    }

    .about-image {
        max-width: 300px;
        margin:auto;
        margin-top:48px;
    }

    .about-text {
        max-width: 700px;
        float:none;
    }

    #navigation {
        display: flex;
        justify-content: space-between;
        height: 72px;
        margin-left: 1.2em;
        margin-right: 1.2em;

    }
    .summary-text {
        max-width: 640px;
        margin: auto;
        margin-top: 120px;
        margin-bottom: 52px;
        font-size: min(max(1.728rem, 2vw), 2.074rem);
    }
    .title-block {
        padding-left:1.2em;
        padding-right:1.2em;
        margin-top:60px;
        margin-bottom:36px;
    }
    .text-content {
        max-width: 585px;
        margin:auto;
        margin-top:20px;
        margin-bottom:80px;
        padding-left:1.2em;
        padding-right:1.2em;
    
    }
    .intro-image-block {
        padding-left:1.2em;
        padding-right:1.2em;
        margin:auto;
        max-width:1152px;
        position: relative;
        background-position: center;
        background-repeat: no-repeat;
        background-size:100%;
    }
    .image-caption {
        font-size: 12px;
        height: 48px;
        max-width: 1152px;
        text-align: center;
        justify-content: center;
        margin: auto;
        color:var(--gray-51);
        padding-bottom:32px;
        padding-left:1.2em;
        padding-right:1.2em;
    }
    .intro-block {
        padding-left:1.2em;
        padding-right:1.2em;
        background-color:var(--gray-14);
        height:auto;
        color:var(--gray-98);
        margin-top: -35px;
    }
    
}