* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html,
body {
	width: 100%;
	height: 100vh;
	overflow: hidden;
	background: #eae1d6;
}
.block-2-container {
    color: #38322c;
}

.navbar {
	position: fixed;
	width: 40%;
	display: flex;
	justify-content: space-between;
    align-items: center;

}
.names {
    padding: 2em;
	font-family: "Neue Montreal", Arial, Helvetica, sans-serif;
	text-transform: uppercase;
}

.navbar-item {
	padding: 2em;
	font-family: "Neue Montreal", Arial, Helvetica, sans-serif;
	text-transform: uppercase;
}
.mail:hover {
    background: #131313;
    transition: all 0.3s ease;
    transform: scale(1.1);
}


.centerbar {
	position: absolute;
	top: 60%;
	transform: translateY(-50%);
	width: 100%;
	display: flex;
	justify-content: space-around;
	z-index: 2;
}

.centerbar-item:nth-child(1) {
	background: #541a01;
	font-family: "Carbon Bold";
	text-transform: uppercase;
	width: 240px;
	height: 280px;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #fbae1c;
	position: relative;
	left: -100px;
}
.centerbar-item:nth-child(1):hover {
    background: #131313;
    transition: all 0.3s ease;
}
.centerbar-item:nth-child(1):after  {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: #131313;
    transition: all 0.35s;
    border-radius: 4px;}

.centerbar-item:nth-child(2) {
	transform: rotate(-90deg);
	position: relative;
	top: -150px;
	left: 100px;
	font-family: "Neue Montreal";
	text-transform: uppercase;
}

.bottombar {
	position: absolute;
	bottom: 0;
	width: 40%;
	display: flex;
	justify-content: space-between;
}

.bottombar-item {
	padding: 2em;
	font-family: "Neue Montreal", Arial, Helvetica, sans-serif;
	text-transform: uppercase;
    
}

.year {
	font-style: italic;
}
.year:hover {
    color: #fbae1c;
    transition: all 0.3s;
    background-color: #541a01;

}

.mail {
    font-size: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    padding: 10px 20px;
    height: 100%;
    width: 20%;
    border: none;
    outline: none;
    border-radius: 4px;
    background-color: #541a01;
    color: #fbae1c;
}

.header {
	position: absolute;
	right: 90px;
	bottom: -200px;
	z-index: 2;
}

.header-container {
	display: flex;
    
}
.header-container:hover {
    .img-three {
        transition: all 1s;
        z-index: 100;
        width: 180px;
        height: 200px;
        background: url("./images/logo-svg.svg") no-repeat 50% 50%;
        background-size: cover;
    }
}
.fa-solid {
    transform: scale(2);
    
}
.fa-solid:hover {
    transition: all 0.3s ease;
    color:#541a01;
    
}
.fa-robot {
    padding-left: 29%;
    padding-top: 125%;
    color:#131313;
}

.header-item {
	font-family: "Neue Montreal";
	color: rgb(0, 0, 0);
	font-weight: bolder;
	font-size: 580px;
}

.img-one {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 280px;
	height: 340px;
	background: url("./images/logo-transparent-svg.svg") no-repeat 50% 50%;
	background-size: fill;
}
.img-one:hover {
    left: 50%;
    transition: all .5s;
	background: url("./images/horizons2.svg") no-repeat 50% 50%;

}

.img-two {
	position: absolute;
	top: 25%;
	right: 0%;
	width: 100px;
	height: 400px;
    background-color: #541a01;
    

}
.img-two:hover {
    transition: all 1s;
    z-index: 100;
    width: 540px;
	background: url("./images/logo-svgB.svg") no-repeat 50% 50%;
    background-size: cover;
    .fa-robot {
        opacity: 0;
    }
}

.img-three {
	position: absolute;
	left: 67%;
	bottom: 0%;
	transform: translateX(-50%);
	width: 180px;
	height: 200px;
    background-color: #541a01;
	background-size: cover;
}

.img-three:hover {
    transition: all 1s;
    z-index: 100;
    width: 180px;
	height: 200px;
	background: url("./images/logo-svg.svg") no-repeat 50% 50%;
    background-size: cover;
}