html {
--secondary-color: #1F3F2F;
--primary-color: #C8F564;
--body-text: #D5EFDB;
--brown: #FFF7EF;
--lord-icon-primary: var(--primary-color);
--lord-icon-secondary: var(--primary-color);
}
.section--person-top {
padding: 8rem 0;
min-height: 50rem;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
@media screen and (max-width: 600px) {
.section--person-top {
display: block;
padding-top: 0;
padding-bottom: 6rem;
}
}
.section--person-top.section--in-view .bg {
opacity: 1;
-webkit-transform: translate(-50%, -50%) scale(1);
transform: translate(-50%, -50%) scale(1);
}
@media screen and (max-width: 600px) {
.section--person-top.section--in-view .bg {
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
.section--person-top.section--in-view .container p.subheader,
.section--person-top.section--in-view .container .h2,
.section--person-top.section--in-view .container .fields {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
.section--person-top.section--in-view .container .text, .section--person-top.section--in-view .container .btn {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
.section--person-top .bg {
overflow: hidden;
position: absolute;
height: 100%;
width: 100%;
max-width: 1440px;
left: 50%;
top: 50%;
font-size: 0;
-webkit-transition: 0.7s ease-out;
transition: 0.7s ease-out;
opacity: 0;
-webkit-transform: translate(-50%, -50%) scale(1.05);
transform: translate(-50%, -50%) scale(1.05);
}
@media screen and (max-width: 600px) {
.section--person-top .bg {
-webkit-transform: translateY(-5rem);
transform: translateY(-5rem);
position: relative;
left: 0;
top: 0;
height: 30rem;
}
}
.section--person-top .bg img {
position: relative;
z-index: 1;
width: 100%;
height: 100%;
max-width: initial;
-o-object-fit: cover;
object-fit: cover;
}
.section--person-top .bg .gradient-left {
position: absolute;
z-index: 4;
width: 20rem;
height: 100%; background: -webkit-gradient(linear, left top, right top, from(rgb(31, 63, 47)), to(rgba(31, 63, 47, 0)));
background: linear-gradient(to right, rgb(31, 63, 47) 0%, rgba(31, 63, 47, 0) 100%); left: 0;
bottom: 0;
opacity: 0;
}
@media screen and (min-width: 1440px) {
.section--person-top .bg .gradient-left {
opacity: 1;
}
}
.section--person-top .bg .gradient-right {
position: absolute;
z-index: 4;
width: 20rem;
height: 100%; background: -webkit-gradient(linear, left top, right top, from(rgb(31, 63, 47)), to(rgba(31, 63, 47, 0)));
background: linear-gradient(to right, rgb(31, 63, 47) 0%, rgba(31, 63, 47, 0) 100%); right: 0;
bottom: 0;
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
opacity: 0;
}
@media screen and (min-width: 1440px) {
.section--person-top .bg .gradient-right {
opacity: 1;
}
}
.section--person-top .bg .gradient {
position: absolute;
z-index: 4;
width: 100%;
height: 60%;   background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgb(31, 63, 47)));
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgb(31, 63, 47) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#00000000", endColorstr="#a61f3f2f",GradientType=0 ); left: 0;
bottom: 0;
}
@media screen and (max-width: 600px) {
.section--person-top .bg .gradient {
height: 49%;
}
}
.section--person-top .bg:before {
position: absolute;
content: "";
width: 100%;
height: 100%;
left: 0;
top: 0;
background: #1F3F2F;
opacity: 0.71;
z-index: 3;
}
.section--person-top .bg:after {
position: absolute;
content: "";
width: 100%;
height: 100%;
left: 0;
top: 0;
background: #1F3F2F;
opacity: 0.71;
z-index: 2;
mix-blend-mode: color;
}
.section--person-top .container {
position: relative;
z-index: 10;
}
@media screen and (max-width: 600px) {
.section--person-top .container {
padding-top: 5rem;
}
}
.section--person-top .container .fields {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: 2.4rem;
margin-top: 0.8rem;
-webkit-transition: all 0.7s ease-out;
transition: all 0.7s ease-out;
-webkit-transform: translateY(-5rem);
transform: translateY(-5rem);
opacity: 0;
}
@media screen and (max-width: 740px) {
.section--person-top .container .fields {
gap: 1.6rem;
}
}
.section--person-top .container .subheader {
-webkit-transition: all 0.7s ease-out;
transition: all 0.7s ease-out;
-webkit-transform: translateY(-5rem);
transform: translateY(-5rem);
opacity: 0;
margin-bottom: 1.6rem;
}
.section--person-top .container .h2 {
-webkit-transition: all 0.7s ease-out;
transition: all 0.7s ease-out;
-webkit-transform: translateY(-5rem);
transform: translateY(-5rem);
opacity: 0;
}
@media screen and (max-width: 450px) {
.section--person-top .container .h2 {
font-size: 3rem;
}
}
.section--person-top .container .text {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
max-width: 41rem;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 2.4rem;
margin: 4rem 0;
-webkit-transition: all 0.7s ease-out;
transition: all 0.7s ease-out;
-webkit-transform: translateY(5rem);
transform: translateY(5rem);
opacity: 0;
}
@media screen and (max-width: 600px) {
.section--person-top .container .text {
margin: 2rem 0;
}
}
.section--person-top .container .text p, .section--person-top .container .text ul, .section--person-top .container .text ol {
-webkit-box-flex: 0;
-ms-flex: 0 0 100%;
flex: 0 0 100%;
}
.section--person-top .container .text ul, .section--person-top .container .text ol {
margin-left: 1.7rem;
}
@media screen and (max-width: 740px) {
.section--person-top .container .text ul, .section--person-top .container .text ol {
text-align: left;
}
}
.section--person-top .container .text ul li::marker, .section--person-top .container .text ol li::marker {
color: white;
}
.section--person-top .container .btn {
-webkit-transition: all 0.7s ease-out;
transition: all 0.7s ease-out;
-webkit-transform: translateY(5rem);
transform: translateY(5rem);
opacity: 0;
}
.section--person-top .container .btn:hover {
border-color: white;
}
.section--person-contacts {
padding: 2.4rem 0;
border-bottom: 1px solid #EEF4EE;
-webkit-transition: all 0.7s ease-out;
transition: all 0.7s ease-out;
-webkit-transform: translateY(5rem);
transform: translateY(5rem);
opacity: 0;
}
.section--person-contacts.section--in-view {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
.section--person-contacts .contacts-and-social {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 4rem;
max-width: 100%;
margin-top: 0;
}
@media screen and (max-width: 600px) {
.section--person-contacts .contacts-and-social {
gap: 2rem;
}
}
.section--person-contacts .contacts-and-social .contact-item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: 1.6rem;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
color: #1F3F2F;
}
@media screen and (max-width: 600px) {
.section--person-contacts .contacts-and-social .contact-item {
gap: 0.8rem;
-webkit-box-flex: 0;
-ms-flex: 0 0 100%;
flex: 0 0 100%;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
}
.section--person-contacts .contacts-and-social .contact-item__icon {
color: #A9BBA8;
}
.section--person-contacts .contacts-and-social .contact-item.contact-item--address {
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
.section--person-contacts .contacts-and-social .contact-item.contact-item--address .contact-item__text {
text-align: left;
}
.section--person-contacts .contacts-and-social .social {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: 5.6rem;
aspect-ratio: 1/1;
border-radius: 2.8rem;
border: 1px solid #A9BBA8;
font-size: 0;
text-decoration: none;
color: #1F3F2F;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.section--person-contacts .contacts-and-social .social:hover {
background: #C8F564;
border-color: #C8F564;
color: #1F3F2F;
}
.section--person-contacts .contacts-and-social .social svg {
stroke-width: 1;
}
.section--team {
padding-bottom: 12rem;
}
.section--team.section--in-view .btn {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
.section--team .btn {
-webkit-transition: all 0.7s ease-out;
transition: all 0.7s ease-out;
-webkit-transform: translateX(5rem);
transform: translateX(5rem);
opacity: 0;
}
@media screen and (max-width: 1290px) {
.section--team .btn {
-webkit-transform: translateX(1.5rem);
transform: translateX(1.5rem);
}
}