@font-face {
    font-family: "Quadrat";
    src: url('../fonts/QuadratRegular.ttf');
}
@font-face {
    font-family: "QuadratBold";
    src: url('../fonts/QuadratBold.ttf');
}
body {
    font-family: "Quadrat";
	color: #02050A;
}
a {
	color: #02050A;
	text-decoration: none;
}
img {
    max-width: 100%;
}

h1 {
    font-size: 56px;
    line-height: 84px;
    font-weight: 400;
}

h2 {
    font-size: 40px;
    line-height: 60px;
    font-weight: 700;
}

h3 {
    font-size: 32px;
    line-height: 48px ;
    font-weight: 400;
}

h4 {
    font-size: 24px;
    line-height: 36px ;
    font-weight: 400;
}

h5 {
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
}

h6 {
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
}

p {
    font-size: 12px;
    line-height: 18px ;
    font-weight: 400;
}

button,
a.button,
input[type="submit"]{
    font-size: 16px;
    background-color: #02050A;
    color: #FFFFFF;
    border-radius: 8px;
    padding: 16px 32px;
    line-height: 24px;
	text-decoration: none;
	display: inline-block;
	text-align: center;
}
input[type="text"],
input[type="email"],
textarea {
	width: 100%;
	border-radius: 8px;
	border: none;
	background-color: #FAFAFA;
	padding: 16px;
	font-size: 16px;
	font-family: "Raleway", serif;
}
textarea {
	height: 140px;
}
.modal p,
.wpcf7-response-output {
	font-family: "Raleway", serif;
	font-size: 20px;
	line-height: 30px;
	color: #1C2128;
}
.modal p a {
	color: #000;
}
.modal input[type="submit"] {
	float: right;
}
header {
	padding: 16px 0;
}
header .logo {
    display: flex;
    justify-content: center;
}
header nav {
    margin-top: 16px;
    display: flex;
    justify-content: center;
}
header nav ul {
    list-style-type: none;
    display: flex;
    padding: 0;
    margin: 0;
    gap: 6vw;
}
header nav ul li  {
	min-height: 44px;
}
header nav ul li a {
    text-decoration: none;
    color: #353940;
	display: inline-block;
	text-align: center;
}

header nav ul li a:hover::after,
header nav ul li.current-menu-item a::after{
	content: "";
    background-image: url(http://wphglobal.com/wp-content/uploads/2024/12/wph-icon.svg);
    display: block;
    height: 20px;
    width: 20px;
    background-size: contain;
    background-repeat: no-repeat;
    margin-left: calc((100% - 20px) / 2);
	animation: rotate 8s linear infinite;
}
header .menu-toggle {
    display: none;
	background-color: transparent;
    padding: 0;
    border: none;
}
header .menu-toggle .close {
	display: none;
}


section.first {
/*     background-image: url(http://wphglobal.com/wp-content/uploads/2024/12/image.svg); */
    background-size: cover;
    background-repeat: no-repeat;
    background-position: bottom center;
	position: relative;
	overflow: hidden;
}
section.first .overlay {
	padding: 112px 0px;
    background: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 80.5%);
	min-height: 750px;
    position: relative;
    z-index: 9;
    display: flex;
    align-items: center;
}
section.first h1 {
    margin-bottom: 24px;
}
section.first h4 {
    font-size: 20px;
    line-height: 30px;
    margin-bottom: 56px;
    font-family: "Raleway", serif;
}
section.first video {
	min-width: 100%;
	height: auto;
	min-height: 500px;
	position: absolute;
	left: 0;
	top: -16%;    
}
section.second {
    padding: 112px 0;
	position: relative;
	overflow: hidden;
}
section.second h4{
    max-width: 800px;
	color: #353940;
    font-family: "Raleway", serif;
}
section.second::before {
	content: "";
    background-image: url(http://wphglobal.com/wp-content/uploads/2024/12/left.svg);
    background-size: contain;
    background-repeat: no-repeat;
/*     background-position: top left -5%; */
    height: 300px;
    width: 304px;
    position: absolute;
    z-index: -1;
    left: -84px;
	top: 112px;
    animation: rotate 15s linear infinite;
}
section.second::after {
	content: "";
    background-image: url(http://wphglobal.com/wp-content/uploads/2024/12/right.svg);
    background-size: contain;
    background-repeat: no-repeat;
/*     background-position: top right -5%; */
    height: 300px;
    width: 304px;
    position: absolute;
    z-index: -1;
    right: -84px;
	top: 112px;
    animation: rotate 15s linear infinite;
}


section.locations{
    padding: 50px 0;
    margin-bottom: 120px;
}
section.locations .address {
	font-size: 15px;
    line-height: 24px;
    font-weight: 400;
    font-family: "Raleway", serif;
	color: #353940;
	height: 0;
	overflow: hidden;
	transition: height 0.3s linear;
}
section.locations .big {
	background-color: #FAFAFA;
	border-radius: 8px;
	margin-bottom: 24px;
	position: relative;
	overflow: hidden;
}
section.locations .big::before {
	content: "";
	background-image: url(http://wphglobal.com/wp-content/uploads/2024/12/vector.svg);
    background-size: contain;
    background-repeat: no-repeat;
/*     background-position: left -12% center; */
	height: 436px;
    width: 442px;
    position: absolute;
    z-index: 0;
    left: -100px;
	top: -20px;
    animation: rotate 15s linear infinite;
	
}
section.locations .big .left {
	padding: 32px 32px 32px 48px;
	display: flex;
	align-items: flex-start;
	justify-content: center;
    flex-direction: column;
	position: relative;
    z-index: 9;
}
section.locations .big .left:hover .address {
	height: 22px;
}
section.locations .group {
	font-family: Quadrat;
    font-weight: 400;
    font-size: 20px;
    line-height: 30px;
	padding: 32px 16px;
	background-color: #FAFAFA;
	border-radius: 8px;	
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 330px;
	position: relative;
	overflow: hidden;
}
section.locations .group::before {
	content: "";
	background-image: url(http://wphglobal.com/wp-content/uploads/2024/12/vector.svg);
	background-size: contain;
    background-repeat: no-repeat;
/*     background-position: top -125px center; */
	height: 272px;
    width: 276px;
    position: absolute;
    z-index: 0;
    left: calc((100% - 276px) / 2);
    top: -130px;
    animation: rotate 15s linear infinite;
}
section.locations .group-1::before {
	animation-delay: 0s;
}
section.locations .group-2::before {
	animation-delay: -2s;
}
section.locations .group-3::before {
	animation-delay: -4s;
}
section.locations .group-4::before {
	animation-delay: -6s;
}
section.locations .group>img{
	width: 100%;
	position: relative;
	z-index: 9;
}
section.locations .group>div{
	position: relative;
	z-index: 9;
}
section.locations .group:hover .address {
	height: 22px;
}



footer .second{
    display: flex;
    gap: 50px;
    align-items: center;
    justify-content: center;
}
footer h5{
    color: #686B70;
}
footer .mail a{
    color: #686B70;
	text-decoration: underline;
}
footer .last {
    color: #686B70;
}
footer .copyright{
    display:flex;
    align-items: center;
}




/* pages */
section.page-title {
    background-image: url(../images/image2.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top 40% right;
}

section.page-title .overlay {
	padding: 112px 0px;
    background: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 80.5%);
}

section.page-content {
    padding: 112px 0px;
}
section.page-content h4{
	color: #353940;
    font-family: "Raleway", serif;
}
section.page-content .container {
	position: relative;
}
section.page-content .container::before {
	content: "";
    background-image: url(http://wphglobal.com/wp-content/uploads/2024/12/left.svg);
    background-size: contain;
    background-repeat: no-repeat;
/*     background-position: top left -5%; */
	height: 166px;
    width: 169px;
    position: absolute;
    z-index: -1;
    left: 5%;
    top: -24px;
    animation: rotate 15s linear infinite;
}
section.page-content .container::after {
	content: "";
    background-image: url(http://wphglobal.com/wp-content/uploads/2024/12/right.svg);
    background-size: contain;
    background-repeat: no-repeat;
/*     background-position: top right -5%; */
    height: 166px;
    width: 169px;
    position: absolute;
    z-index: -1;
    right: 5%;
    top: -24px;
    animation: rotate 15s linear infinite;
}
section.page-content .container>div {
    max-width: 62%;
	margin: 0 auto;
}

@keyframes rotate{
	0% {
		transform: rotate(0deg);
	}
	
	100% {
		transform: rotate(360deg);
	}
}

/* Tablet */
@media screen and (max-width: 992px)  {

}

@media screen and (max-width: 768px){
	h1 {
		font-size: 32px;
		line-height: 48px;
	}
	h2 {
		font-size: 32px;
		line-height: 48px;
	}
	h3 {
		font-size: 24px;
		line-height: 32px;
	}
	h4 {
		font-size: 20px;
		line-height: 30px;
	}
	header .logo {
		max-width: 65px;
	}
	header nav {
		margin-top: 0px;
		display: flex;
		justify-content: flex-end;
	}
	header .menu-toggle {
		display: block;
	}
	header .main-navigation ul {
		display: none;
	}
	header .main-navigation.toggled ul {
		display: block;
	}
	header .main-navigation.toggled .menu-toggle .close {
		display: block;
	}
	header .main-navigation.toggled .menu-toggle .bars {
		display: none;
	}
	header .main-navigation.toggled>div {
		position: absolute;
		background-color: #fff;
		width: 100%;
		top: 80px;
		left: 0;
		padding: 16px;
		z-index: 999;
	}
	section.first .overlay {
		padding: 64px 0 112px;
		background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%);
		min-height: 500px;
	}
	section.first video {
		top: 0;
	}
	section.second::before {
		bottom: 0;
		top: auto;
		left: -112px;
	}
	section.second::after {
		top: -112px;
		right: -112px;
	}
	section.locations .button {
		width: 100%;
	}
	section.locations .big {
		background-size: 200px;
		background-position: top -50px right -40px;
	}
	section.locations .big::before {
		height: 218px;
		width: 221px;
		left: auto;
		right: -44px;
		top: -64px;
	}
	section.locations .group {
		flex-direction: column-reverse;
	}
	section.locations .address {
		height: auto;
	}
	section.page-title .overlay {
		background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%);
	}
	section.page-title .button {
		width: 100%;
	}
	section.page-content {
		padding: 0 0 64px 0;
	}
	section.page-content .container {
		padding: 0;
	}
	section.page-content div.left {
		background-position: bottom -120px left -120px;
	}
	section.page-content div.right {
		background-position: top -120px right -120px;
		padding: 64px 16px;
	}
	section.page-content .right>div {
		max-width: 100%;
	}
	footer .second {
		align-items: flex-start;
		flex-direction: column;
		gap: 24px;
	}
	footer .button {
		width: 100%;
	}
}