@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&display=swap');
body{
    padding: 0;
    margin: 0;
    /* overflow: hidden; */
    font-family: 'Montserrat', sans-serif;
}
.main-box {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.shape {
    width: 90px;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    cursor: pointer;
    transition: .3s;
}
.shape.middle-shape img {
    max-width: 100%;
}
.shape.middle-shape {
    width: 100px;
}
.shape svg {
    width: 100%;
}
.shape.home {
    top: 5px;
    transform: rotate(0deg) translateX(-50px);
}
.shape.technology {top: 5px ;transform: rotate(0deg) translateX(50px);}
.shape.pipeline {
    top: 150px;
    transform: rotate(0deg) translateX(102px);
}
.shape.team {
    transform: rotate(0deg) translateX(48px);
    bottom: 5px;
}
.shape.news {
    transform: rotate(0deg) translateX(-48px);
    bottom: 5px;
}
.shape.contact {
    top: 150px;
    transform: rotate(0deg) translateX(-102px);
}
.shape svg path:hover {
    fill: #00000000 !important;
    stroke: #fff !important;
}
.shapes-group {
    position: relative;
    width: 370px;
    height: 550px;
    margin: auto;
    display: flex;
    align-items: center;
}
#overlay {
    width: 0px;
    height: 100vh;
    margin: auto;
    font-size: 130px;
    text-transform: uppercase;
    font-weight: bold;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
#overlay{
    transition: 1s;
}
.overlay-active{
    width: 100% !important;
}
h2{
    opacity: 0;
    transform: scale(0.1);
    transition: 1.5s;
    -webkit-transition: 1.5s;
    -moz-transition: 1.5s;
    -ms-transition: 1.5s;
    -o-transition: 1.5s;
}
.overlay-text{
    opacity: 1;
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
}
.menu-text {
    position: absolute;
    top: 0px;
    left: 0;
    color: black;
    font-size: 18px;
    font-weight: bold;
    text-transform: uppercase;
    margin: 0;
}
.shape:hover .menu-text{
    color: white !important;
}
.shape.home p {
    transform: rotate(-45deg) translateX(-25px);
    top: 22px;
}
.shape.technology p {
    transform: rotate(45deg) translateX(65px) ; 
    top: -10px;
}
.shape.pipeline p {
    transform: rotate(90deg) translateX(112px);
    left: 58px;
}
.shape.team p {
    right: 0;
    left: auto;
    bottom: 28px;
    top: auto;
    transform: rotate(-45deg) translateX(20px);
}
.shape.news p {
    bottom: 28px;
    top: auto;
    transform: rotate(45deg) translateX(-22px);
}
.shape.contact p {
    left: -55px;
    transform: rotate(-90deg) translateX(-112px);
}
.logo {
    width: 290px;
    margin: auto;
    position: relative;
    margin-top: -222px;
}
.logo img {
    max-width: 100%;
}
.copyright {
    text-align: center;
    padding: 25px 0px;
    background: #4d86b9;
    color: white;
}
.copyright a{
    color: white;
    text-decoration: none;
}