.front-page {
    width: 100%;
    min-height: 150vh;
    background: #06070e;
    overflow: hidden;
}
.front-page .bg-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 150vw;
    height: 150vh;
    background: radial-gradient(ellipse 40% 30% at 60% 50%, #06313a, #06070e);
    transform: rotate(297deg);
    transform-box: fill-box;
    transform-origin: center;
    z-index: 2;
}
.front-page > * {
    position: relative;
    z-index: 3;
}
.header-area {
    width: 100%;
    padding: 0 var(--vertical-padding);
}
.header-area .logo {
    line-height: var(--header-height);
    font-size: 1em;
    color: white;
    font-family: 'amifer', sans-serif;
    font-weight: 300;
    font-style: normal;
}
.header-area .logo img {
    height: 50px;
    margin-right: 15px;
    vertical-align: middle;
}

.content-area {
    width: 100%;
    padding: 0 var(--vertical-padding);
    padding-top: 30px;
    padding-bottom: 150px;
    min-height: 200px;
    position: relative;
}

.landing-view {
    min-height: calc(100vh - var(--header-height));
    padding-top: 100px;
    font-size: 1.1em;
}

.landing-view h1 {
    font-size: 2.7em;
    font-weight: 400;
    margin-bottom: 30px;
    font-family: 'amifer', sans-serif;
    font-weight: 400;
    font-style: normal;
}
.landing-view h2 {
    color: var(--theme-color);
    font-size: 2.2em;
    font-weight: 400;
    margin-bottom: 100px;
    margin-top: 20px;
    font-family: 'amifer', sans-serif;
    font-weight: 400;
    font-style: normal;
}

.landing-view p {
    margin-top: 20px;
    margin-bottom: 15px;
    width: 700px;
    line-height: 1.7em;
}

.landing-view .button {
    margin-top: 50px;
    display: inline-block;
    text-decoration: none;
}
.landing-view .social-links {
    position: absolute;
    top: calc(100vh - 50px - var(--header-height));
    right: var(--vertical-padding);
}
.landing-view .social-links a {
    color: #fff4;
    margin-left: 20px;
    font-size: 1.1em;
}
.landing-view  .br{
    display: block;
}
.content-area .header {
    display: flex;
    color: var(--theme-color);
    line-height: 30px;
    margin-bottom: 100px;
}
.content-area .header .line {
    height: 2px;
    flex: 1;
    background: linear-gradient(90deg, #072931, #0c626e, #072931);
    margin-top: 14px;
    margin-left: 40px;
}

.what-we-do-view .cards {
    display: flex;
    justify-content: space-between;
    flex-flow: row wrap;
}
.what-we-do-view .cards .card {
    flex-basis: 340px;
    margin-bottom: 70px;
}
.what-we-do-view .cards .card img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    border-radius: 20px;
    /*border: 1px solid var(--theme-color-dark);*/
}

.what-we-do-view .cards .card h3 {
    font-weight: 500;
    font-size: 1em;
    line-height: 1.7em;
}
.what-we-do-view .cards .card p {
    line-height: 1.5em;
}

.lab-view .container {
    display: flex;
}
.lab-view h3 {
    font-size: 1.4em;
    font-weight: 400;
}
.lab-view p {
    line-height: 1.7em;
}
.lab-view .text-area{
    padding-right: 40px;
}
.lab-view img {
    width: 45%;
    border-radius: 20px;
    /*border: 1px solid var(--theme-color-dark);*/
    display: inline-block;
}

.contact-view .container {
    display: flex;
    justify-content: space-between;
}

.contact-view .left-area {
    text-align: center;
    flex: 1;
}
.contact-view .row {
    display: block;
    margin-bottom: 20px;
    text-align: left;
}
.contact-view .row > i {
    vertical-align: middle;
    color: var(--theme-color);
    margin-right: 20px;
    width: 20px;
    display: inline-block;
}
.contact-view .row span {
    display: inline-block;
    vertical-align: top;
}
.contact-view .bottom-logo {
    margin-top: 200px;
    width: 250px;
}

.contact-view .container .right-area {
    width: 400px;
}

.contact-view .container .right-area .person {
    position: relative;
    width: 400px;
    height: 400px;
    overflow: hidden;
    border-radius: 20px;
    margin-bottom: 20px;
}
.contact-view .container .right-area .person img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.contact-view .container .right-area .person .text-content {
    position: absolute;
    bottom: 0px;
    width: 100%;
    left: 0px;
    background: linear-gradient(#06070e00, #06070eff);
    padding: 10px 20px;
    font-weight: 300;
    font-size: 0.9em;
}
.contact-view .container .right-area .person .text-content .name {
    font-size: 1.2em;
    display: block;
    margin-bottom: 10px;
    font-weight: 400;
}