/* animations */
@keyframes float {
	0% {

		transform: translatey(0px);
	}
  50% {
		transform: translate(0px,-20px);
	}
	100% {
		transform: translatey(0px);
	}
}
/* Style sheet*/

.square {
  height: 100px;
  width: 65px;
}
a {
  color: inherit;
  text-decoration: none;
}

.blur-overlay.active {
  opacity: 1;
  pointer-events: auto;
}
a:hover {
  color:#00A0C6; 
  text-decoration:none; 
  cursor:pointer;  
}
.container2 {
  position: relative;
  z-index: 1;
  display: grid;
  grid-auto-rows: max-content;
  gap: 0;
  float: left;
}
body{
    background-color: rgb(0, 0, 0);
    color: #FFFFFF;
    font-family: "Segoe UI", sans-serif; 
    background-image: url('../Images/background.jpg');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100% 100%;
}
body.active{
  overflow: hidden;
}
.map-section {
  display: flex;
  justify-content: space-between;
  gap: 2%;
  width: 100%;
  flex-wrap: wrap;
}

.map-section > div {
  width: 48%;
}

@media (max-width: 768px) {
  .map-section {
    flex-direction: column;
    align-items: center;
  }

  .map-section > div {
    width: 100%;
  }
}

.logo{
  height: 200px;
  width:100%;
  max-width: 200px;
}
img{
    display: flex;
}
.float{
  animation: float 4.5s ease-in-out infinite;
}
.pwindow{
  position: relative;
  z-index: -2;
  scale: 0.8;
  transform: translate(-4rem, 0rem);
  grid-auto-rows: max-content;
  gap: 0;
  float: left;
}
.pwindow2{
  z-index: -2;
  transform: translate(4rem, 0rem);
  grid-auto-rows: max-content;
  position: relative;
  gap: 0;
  float: left;
}
.glowingtext{
  z-index: -2;
  margin-left: 420px;
  float: right;
  color: #fff;
  text-shadow: 0 0 5px #f2e2e2, 0 0 10px #f4dddd, 0 0 20px #d0cbd0, 0 0 30px #f5e1e1,
    0 0 40px #dff2f2, 0 0 50px #fafafa, 0 0 60px #d8d5d8;
  animation: glow 1s infinite alternate;
  grid-auto-rows: max-content;
  gap: 0;
}

.glowtext{
  color: #fff;
  text-shadow: 0 0 5px #f2e2e2, 0 0 10px #f4dddd, 0 0 20px #d0cbd0, 0 0 30px #f5e1e1,
    0 0 40px #dff2f2, 0 0 50px #fafafa, 0 0 60px #d8d5d8;
  animation: glow 1s infinite alternate;
  grid-auto-rows: max-content;
  gap: 0;
}
.glowingtext2{
  z-index: -2;
  margin-left: 600px;
  float: right;
  color: #fff;
  text-shadow: 0 0 5px #f2e2e2, 0 0 10px #f4dddd, 0 0 20px #d0cbd0, 0 0 30px #f5e1e1,
    0 0 40px #dff2f2, 0 0 50px #fafafa, 0 0 60px #d8d5d8;
  animation: glow 1s infinite alternate;
  grid-auto-rows: max-content;
  gap: 0;
}
.container {
  position: relative;
  z-index: -1;
  display: grid;
  grid-auto-rows: max-content;
  gap: 0;
  float: left;
}
.page-home .center {
  text-align: left;
  margin: 2em auto;
  max-width: 90%;
}

.page-home .flexbox {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 2em auto;
  max-width: 90%;
}

.page-home img {
  max-width: 100%;
  height: auto;
}

.page-home .section {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  margin-bottom: 40px;
}

.page-home .section img {
  max-width: 400px;
  width: 100%;
  height: auto;
  flex: 1 1 300px;
}

.page-home .section-text {
  flex: 1 1 300px;
  padding: 20px;
  box-sizing: border-box;
  text-align: center;
}

.page-home .absolute-wrapper {
  position: relative;
  height: 700px;
}

.page-home .promo-block {
  position: absolute;
  display: flex;
  align-items: flex-start;
}

.page-home .promo1 {
  top: 50px;
  left: 60px;
}

.page-home .promo2 {
  top: 300px;
  left: 300px;
}

.page-home .promo-block img {
  width: 100%;
  max-width: 480px;
}

@media (max-width: 899px) {
  .page-home .absolute-wrapper {
    position: static;
    height: auto;
    padding: 20px;
  }

  .page-home .promo-block {
    position: static;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 50px;
  }

  .page-home .glowingtext3 {
    margin: 20px 0 0 0 !important;
    padding: 0 15px;
  }

  .page-home .promo-block img {
    max-width: 90vw;
  }

  .page-home h1 {
    font-size: 1.5em;
  }

  .page-home p {
    font-size: 1em;
  }

  .page-home .float {
    position: static !important;
    margin-bottom: 1em;
  }

  .page-home .container2,
  .page-home .container {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .page-home .win7 {
    width: 100% !important;
    margin-right: 0 !important;
  }

  .page-home .win7 + div {
    width: 100% !important;
  }
}

.center {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px;
    border: 3px;
    color: #fff;
    text-shadow: 0 0 5px #f2e2e2, 0 0 10px #f4dddd, 0 0 20px #d0cbd0, 0 0 30px #f5e1e1,
      0 0 40px #dff2f2, 0 0 50px #fafafa, 0 0 60px #d8d5d8;
    animation: glow 1s infinite alternate;
    gap: 0;
  }
.windowcomment{
  transform: translate(20rem,-4rem);
}
.header {
  z-index: 2;
  top: 0;
  padding: 10px 16px;
  transform: translate(-10px,-10px);
  width: 100%;
  color: #f1f1f1;
  -webkit-filter: drop-shadow(12px 12px 7px rgba(175, 246, 251, 0.6));
  filter: drop-shadow(12px 12px 7px rgba(175, 246, 251, 0.6));
  display: flex;
  justify-content: space-between;
  height: 150px;
  border: 0px;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 2000px 100%;
}

.flexbox{
  margin-top: auto;
  margin-bottom: auto;
  display:flex;
  flex-direction: row;
  align-content:center;
  align-items: center;
  justify-items: center;
  gap: 2em;
}   

h1 {
  font-weight: 300;
  font-family: "Segoe UI", sans-serif;
}

li {
  font-weight: 300;
  font-family: "Segoe UI", sans-serif;
}

p{
  font-weight: 200;
  font-family: "Segoe UI", sans-serif;
}
body {
  overflow-x: hidden;
  overflow-y: auto;
}


.pwindow img {
  width: 100%;
  /*height: 646px;*/
  aspect-ratio: 1.977808599167822;
}
.pwindow2 img {
  width: 100%;
  /*height: 646px;*/
  aspect-ratio: 1.977808599167822;
}
#main-content {
  transition: transform 0.3s ease;
  position: relative;
  z-index: 1;
}

body.menu-open #main-content {
  transform: translateX(450px); /* shift equal to menu width */
}

/* burger menu shenanigans */
.off-screen-menu {
  background-color: rgb(239, 242, 255, 0.1);
  height: 100vh;
  width: 100%;
  opacity: 100%;
  max-width: 450px;
  position: fixed;
  z-index: 999; /* Make sure it’s above all content */
  top: 0;
  left: -450px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 3rem;
  transition: .3s ease;
}
#main-content.blurred {
  filter: blur(8px);
  transition: filter 0.3s ease, transform 0.3s ease;
  pointer-events: none; /* Prevent clicks under the blur */
}
.off-screen-menu.active{
  left: 0;
}
.pwindow2.active{
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
.pwindow.active{
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
.container2.active{
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
.glowingtext3 {
  text-shadow: 0 0 5px #fff, 0 0 10px #ccf, 0 0 15px #bbf;
  color: white;
}
.All.active{
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
nav {
  padding: 2.5rem;
}

.ham-menu{
  z-index: 99999999;
 height: 50px;
 width: 50px;
 margin-left: auto;
 position:relative;
}
.ham-menu span {
  height: 5px;
  width: 100%;
  background-color: #e6eafb;
  border-radius: 25px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  transition: .3 ease;
}
/* ham menu animations */
.ham-menu span:nth-child(1){
  top: 25%;
}
.ham-menu span:nth-child(3){
  top: 75%;
}
.ham-menu.active span:nth-child(1){
  top: 50%;
  transform: translate(-50%,-50%) rotate(45deg);
}
.ham-menu.active span:nth-child(2){
  opacity: 0;
}
.ham-menu.active span:nth-child(3){
  top:50%;
  transform: translate(-50%, 50%) rotate(-45deg)
}
/* fonts and media queries */
@media screen and (max-width: 800px) {
  .container {
    z-index: -1;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
  }
  .glowingtext {
    padding: 0 10%;
    grid-row: 2/2;
    margin-top: -120px;
    margin-left:-80px;
    grid-column: 1/1;
    text-align: center;
    transform:translateX(150px)
  }
  .pwindow {
    position: relative;
    grid-row: 1/1;
    grid-column: 1/1;
    scale: 0.9;
    transform: translateX(20px);
  }
  .container2 {
    position: relative;
    z-index: 1;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
  }
  .pwindow2 {
    position: relative;
    transform:translate(-20px,-150px);
    margin-top: -250px;
    scale: 0.8;
    grid-row: 1/1;
    grid-column: 1/1;
  }
  .glowingtext2 {
    padding: 0 10%;
    grid-row: 2/2;
    margin-left:-100px;
    text-align: center;
    grid-column: 1/1;
    transform:translate(200px,-400px);
  }
}

@font-face {
  font-family: "Segoe UI";
  font-weight: 200;
  src: local("fonts/Segoe UI Light.ttf");
}
@font-face {
  font-family: "Segoe UI";
  font-weight: 300;
  src: local("fonts/Segoe UI Semilight.ttf");
}
@font-face {
  font-family: "Segoe UI";
  font-weight: 400;
  src: local("fonts/Segoe UI.ttf");
}
@font-face {
  font-family: "Segoe UI";
  font-weight: 600;
  src: local("fonts/Segoe UI Semibold.ttf");
}
@font-face {
  font-family: "Segoe UI";
  font-weight: 700;
  src: local("fonts/Segoe UI Bold.ttf");
}