.page-hero-section {
width: 100%;
height: 10rem;
padding: 5rem 0;
position: relative;
min-height: 100vh;
height: -webkit-fit-content;
height: -moz-fit-content;
height: fit-content;
overflow: hidden;
}
.page-hero-section .background-logo {
max-width: 632px;
max-height: 643px;
width: 80%;
position: absolute;
top: 20rem;
left: -10rem;
}
.page-hero-section .background-logo img {
width: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.page-hero-section .hero-content {
max-width: 1100px;
margin: 0 auto;
text-align: center;
padding-top: 12rem;
padding-bottom: 16rem;
}
.page-hero-section .hero-content .small-title {
padding-top: 16px;
}
.page-hero-section .hero-content .h1 {
padding-top: 16px;
padding-bottom: 24px;
max-width: 848px;
margin: 0 auto;
text-align: center;
}
@media only screen and (max-width: 768px) {
.page-hero-section .hero-content .h1 {
font-size: 4rem;
line-height: 1.2;
}
}
.page-hero-section .hero-content .description {
margin: 0 auto;
text-align: center;
max-width: 736px;
color: #5c5c70;
}
.page-hero-section .members-container .h2 {
max-width: 464px;
}
.page-hero-section .members-container .description {
padding: 2.4rem 0;
max-width: 464px;
color: #5c5c70;
}
.page-hero-section .team-members {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
gap: 16px;
}
.page-hero-section .team-members .team-member {
width: calc(50% - 16px);
}
@media only screen and (max-width: 768px) {
.page-hero-section .team-members .team-member {
width: 100%;
}
}
.page-hero-section .team-members .team-member .member-photo {
width: 100%;
height: 41.1rem;
border-radius: 4px;
overflow: hidden;
position: relative;
}
.page-hero-section .team-members .team-member .member-photo img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.page-hero-section .team-members .team-member .member-detail {
margin-top: 16px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.page-hero-section .team-members .team-member .member-detail .member-info {
width: calc(100% - 32px);
}
.page-hero-section .team-members .team-member .member-detail .member-info h3 {
font-weight: 700;
font-style: 14px;
line-height: 19.6px;
font-size: 14px;
line-height: 1.4;
text-align: left;
}
.page-hero-section .team-members .team-member .member-detail .member-info p {
color: #5c5c70;
font-size: 14px;
line-height: 1.4;
text-align: left;
}
.page-hero-section .team-members .team-member .member-detail .social-icon {
width: 32px;
height: 32px;
padding: 4px;
border-radius: 4px;
background: var(--secondary);
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;
}
.page-hero-section .team-members .team-member .member-detail .social-icon img,
.page-hero-section .team-members .team-member .member-detail .social-icon svg {
max-width: 100%;
-o-object-fit: cover;
object-fit: cover;
width: 24px;
height: 24px;
}
.page-hero-section .team-members .team-member:first-child {
position: relative;
}
@media only screen and (max-width: 768px) {
.page-hero-section .team-members .team-member:first-child {
top: 0;
margin-top: 3.2rem;
}
}
.partners-content {
width: 100%;
padding-top: 7rem;
}
.partners-content .sm-title {
font-size: 12px;
line-height: 1.4;
color: var(--secondary);
padding-bottom: 2.4rem;
text-transform: uppercase;
font-weight: 400;
}
.partners-item {
width: 100%;
height: 100%;
padding-bottom: 5rem;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.partners-item .img-box {
width: 100%;
max-width: 250px;
max-height: 50px;
position: relative;
}
.partners-item .img-box img,
.partners-item .img-box svg {
-o-object-fit: cover;
object-fit: cover;
width: 100%;
position: relative;
height: 100%;
max-height: 20rem;
}
.partners-item img,
.partners-item svg {
-o-object-fit: cover;
object-fit: cover;
width: 100%;
position: relative;
height: 100%;
max-height: 20rem;
max-height: 15rem;
-o-object-fit: contain;
object-fit: contain;
max-width: 80%;
}
.ab-projects-sec p {
padding-top: 24px;
max-width: 368px;
color: #5c5c70;
font-size: 14px;
line-height: 1.4;
}
.col-map-1 {
width: 368px;
}
@media only screen and (max-width: 992px) {
.col-map-1 {
width: 100%;
}
}
.col-map-2 {
width: calc(100% - 368px - 16px);
}
@media only screen and (max-width: 992px) {
.col-map-2 {
width: 100%;
}
}
.static-map {
width: 100%;
height: 300px;
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;
}
.static-map__fig {
position: relative;
max-width: 100%;
max-height: 100%;
aspect-ratio: 1280/720;
}
.static-map img,
.static-map svg {
-o-object-fit: contain;
object-fit: contain;
}
.static-map .green-point {
background: var(--secondary);
width: 8px;
height: 8px;
position: absolute;
top: 0;
left: 0;
z-index: 0;
}
.static-map .green-point .info-text {
padding: 16px;
background: var(--primary);
opacity: 0;
-webkit-transition: 0.3s;
transition: 0.3s;
width: 247px;
text-align: center;
min-height: 7rem;
border-radius: 8px;
z-index: 99;
position: absolute;
top: -85px;
left: -130px;
display: none;
}
.static-map .green-point .info-text::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 999;
background: var(--primary);
border-radius: 8px;
}
.static-map .green-point .info-text::after {
content: "";
position: absolute;
left: 50%;
bottom: -10px;
width: 0px;
height: 0px;
border-style: solid;
border-width: 0 10.5px 18.2px 10.5px;
border-color: transparent transparent var(--primary) transparent;
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
border-radius: 4px;
}
.static-map .green-point .info-text .town {
color: var(--secondary);
font-size: 12px;
line-height: 1.4;
padding: 0;
z-index: 999;
position: relative;
background: var(--primary);
}
.static-map .green-point .info-text .title {
font-weight: 700;
color: #fff;
font-size: 16px;
line-height: 1.4;
padding: 0;
z-index: 999;
position: relative;
background: var(--primary);
}
.static-map .green-point:hover {
cursor: pointer;
}
.static-map .green-point:hover .info-text {
opacity: 1;
display: block;
}
.green-point.hide {
opacity: 0;
}
.link-circle-button {
margin-top: 8px;
width: 24px;
height: 24px;
border-radius: 50%;
border: 1px solid var(--secondary);
display: block;
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;
-webkit-transition: 0.3s;
transition: 0.3s;
}
.link-circle-button:hover {
background: var(--secondary);
}
.link-circle-button:hover svg path {
stroke: #fff;
}