@font-face {
	font-family: ITC;
	src: url(ITC.ttf);
}
body {
	text-align: center;
	color: white;
	font-family: ITC;
	max-width: 100vw;
	overflow-x: hidden;
}
.backgroundcontainer {
	z-index: 0;
	max-width: 100vw;
	max-height: 100vh;
	position: fixed;
}
@keyframes Pulsate {
  from { opacity: 1; }
  50% { opacity: 0; }
  to { opacity: 1; }
}

header img {
	filter: drop-shadow(5px 5px 5px #222);
	z-index: 50;
}
.intro {
	position: relative;
	display: block;
	height: 100vh;
	width: 100vw;
	z-index: 5;
}
.intro div h1 {
	font-size: 48px;
}
.intro div {
	position: relative;
	top: 50%;
	left: 50%;
	transform:translate(-50%, -50%);
	display: block;
}
.intro div h2 {
	position: relative;
	display: block;
	font-size: 64px;
	padding-top: 150px;
	animation: Pulsate 2s linear infinite;
}

.services {
	box-sizing: border-box;
	display: block;
	position: relative;
	width: 100vw;
	background-color: rgba(255,255,255,0.75);
	padding: 30px 0px 100px 0px;
	color: darkslategray;
	z-index: 5;
}
.services h1 {
	font-size: 48px;
	padding-bottom: 100px;
}
.services div {
	width: 100vw;
	margin: 0 auto;
	display: table;
}
.services div div {
	display: table-cell;
	box-sizing: border-box;
	padding: 15px;
	max-width: 500px;
	height: auto;
	bottom: 0;
}

.services div div h2 {
	top: 50;
	font-size: 36px;
	padding-bottom: 20px;
	position: relative;
}
.services div div p {
	font-size: 24px;
}
header {
	display: block;
	top: 0;
	position: fixed;
	width: 500px;
	left: 0;
	overflow: hidden;
	box-sizing: border-box;
	z-index: 1999;
}
header img {
	display: block;
	margin: 15px;
	top: 0;
	left: 0;
	width: 350px;
}
h1 {
	display: block;
	font-size: 36px;
    padding-top: 25px;
    margin: 0px;
    z-index: 5;
}
h2 {
	font-size: 24px;
	margin: 0px;
}
footer {
	position: fixed;
	display: block;
	overflow: hidden;
	bottom: 0;
	right: 0;
	text-align: right;
	padding: 10px;
	margin-bottom: 0;
	filter: drop-shadow(5px 5px 5px #222);
}
.contact {
	position: relative;
	height: 500px;
	z-index: 5;
}
.contact div h1 {
	padding: 50px;
}
.contact div {
	position: relative;
	top: 50%;
	left: 50%;
	transform:translate(-50%, -50%);
	display: block;
}
a {
	color: white;
}
a:visted {
	color: white;
}
a:hover {
	color: gray;
}

/* Responsive adjustments for mobile devices */
@media screen and (max-width: 1024px) {
  body {
    padding: 0 10px;
  }

  .intro div h1, .services h1, .services div div h2, .services div div p {
    font-size: 30px; /* Reduce font sizes */
  }

  header img {
    width: 250px; /* Resize logo on mobile */
  }

  .services div {
    display: block; /* Change layout to block for smaller screens */
  }

  .services div div {
  	display: inline-block;
    max-width: 100%; /* Ensure each item takes up full width */
    margin-bottom: 20px; /* Add space between each item */
  }

  .contact div {
    width: 90vw; /* Adjust width for contact section */
  }

  footer {
    text-align: center;
    padding: 5px;
  }
}