.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: 10rem;
}
.page-hero-section .hero-content .small-title {
padding-top: 16px;
}
.page-hero-section .hero-content .h1 {
padding-top: 16px;
padding-bottom: 24px;
}
.page-hero-section .hero-content .description {
margin: 0 auto;
text-align: center;
max-width: 736px;
color: #5C5C70;
}
.page-hero-section .projects-categories-list {
width: 100%;
}
.page-hero-section .projects-categories-list .project-item {
width: 100%;
height: 45.3rem;
background: lightgray;
border-radius: 4px;
overflow: hidden;
}
@media only screen and (max-width: 768px) {
.page-hero-section .projects-categories-list .project-item {
height: auto;
}
}
.page-hero-section .projects-categories-list .project-item .image-box {
width: 100%;
height: 35rem;
position: relative;
}
.page-hero-section .projects-categories-list .project-item .image-box img, .page-hero-section .projects-categories-list .project-item .image-box svg {
width: 100%;
position: absolute;
top: 0;
left: 0;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.page-hero-section .projects-categories-list .project-item .info-box {
position: relative;
background: var(--primary);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 26px;
}
.page-hero-section .projects-categories-list .project-item .info-box .content .title {
font-size: 16px;
line-height: calc(normal / 16px);
padding-bottom: 8px;
font-weight: 700;
color: var(--white);
}
.page-hero-section .projects-categories-list .project-item .info-box .content .a {
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;
}
.page-hero-section .projects-categories-list .project-item .info-box .content .a:hover {
background: var(--secondary);
}
.page-hero-section .projects-categories-list .project-item .info-box .content .a:hover svg path {
stroke: #fff;
}