/* Home Page */
 nav{
    display: flex;
    background-color: rgba(0, 0, 0, 0.543);
   backdrop-filter: blur(10px);
    padding: 1em;
    height: 50px;
    width: 100%;
    flex-direction: row-reverse;
    flex-wrap: nowrap;
    border:none;
     border-radius: 80px;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .menu{
    display: flex;
 }

 li {
    margin: 8px 16px;
 color:rgb(255, 255, 255);
    /* get rid of bullets */
    list-style-type: none;
 align-content: center;
 justify-content: center;
transition: background-color 0.3s ease;
    
}
a{
   display:flex;
    color: aliceblue;
    text-decoration: none;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    transition: background-color 0.3s ease;
}
p{
    color: rgb(0, 0, 0);
}
html,
body {
  margin: 0;
  padding: 0;
  font-family: "Noto Sans", sans-serif;
}

.hero {
  display: grid;
  position: relative;
  grid-template-columns: 100vw;
  grid-template-rows: 100vh;
  place-items: center;
  overflow: hidden;
  animation: clip-hero-anim 1.25s cubic-bezier(0.29, 0.8, 0.8, 0.98);
  will-change: clip-path;
}
.hero__bg, .hero__cnt {
  align-self: center;
  grid-column: 1/2;
  grid-row: 1/2;
}
.hero__bg {
  display: grid;
  position: relative;
  z-index: 0;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  place-items: center;
  animation: fade-in 0.75s linear;
  will-change: opacity;
}
.hero__bg::before {
  content: "";
  display: block;
  position: absolute;
  z-index: 5;
  top: -10%;
  right: -10%;
  bottom: -10%;
  left: -10%;
  background: rgba(254, 254, 254, 0);
  background-blend-mode: screen;
}
.hero__bg picture {
  display: flex;
  height: 100vh;
  width: 100vw;
  animation: scaling-hero-anim 4s 0.25s cubic-bezier(0, 0.71, 0.4, 0.97) forwards;
  will-change: transform;
}
.hero__bg img {
  display: block;
  object-fit: cover;
  object-position: 77% 50%;
  height: auto;
  width: 100%;
}
.hero__cnt {
  display: grid;
  position: relative;
  place-items: center;
  z-index: 10;
  color: #FFF;
  font-size: 2.5vw;
  text-transform: uppercase;
  opacity: 0;
  animation: fade-in 0.75s 1.5s linear forwards;
}
.hero__cnt svg {
  height: 12vw;
}
.hero__cnt svg path {
  fill: #FFF;
}
.hero__cnt h1 {
  margin-bottom: 0;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes scaling-hero-anim {
  from {
    transform: scale(1.25);
  }
  to {
    transform: scale(1.1);
  }
}
@keyframes clip-hero-anim {
  from {
    clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
  }
  to {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  }
}
body{
   
   background-image: url(../Images/72f73e03e134d091171fc0ff0d3fe5b8.jpg);
   
   font-family: 'Times New Roman', Times, serif;
    backdrop-filter: blur(10px);
  margin: 20px;
    place-items: center;
}
html, body {
  overflow-x: hidden;
}
.hero-section{ 
  
    

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items:center;

   font-size: sans-serif;
   font-size: 45px;
   text-align:center;
   
}
.hero-headline{
    display: flex;
    color: whitesmoke;
font-size: 55px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.hero-subheadline{
    display: flex;
    font-size: 25px;
    color:rgb(245, 245, 245);
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}



.section{
    display:flex;
 justify-content: center;
 align-items: center;
 
}


.introContent {
    display: flex;
    justify-content: center;
    align-items: center;
  
    
    
}

.introText {
    
    opacity: 5;
    transform: translateY(20px);
    transition: all 3s ease-in-out;
   
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    flex-wrap: wrap;
    align-content: flex-start;
    height:450px;
    text-align: left;
}
.introAppear {
    opacity: 5;
    transform: translateY(0px);
}

h2{
    font-size: 45px;
    text-align: center;
    color: darkolivegreen;
}
img{
    display: flex;
    justify-content: center;
    align-items: center;

}
.grid {
    /* turns on CSS Grid */
    display: grid;
    height: 80vh;

    
    grid-template-columns: 1fr 1fr ;
    grid-template-rows: 300px 300px 300px;
}




footer{
    background-color: rgb(0, 0, 0);
}











/* Contact Page */



form  {
    margin: 25px;
    width: 50%;
    height: auto;
    padding: 32px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    background: rgba(255, 255, 255, .35);
   
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, .18);
    box-shadow: rgba(0, 0, 0, 0.35) 0 8px 32px;
    
}


label{
    color: rgb(0, 0, 0);
}

/* Target Input */
input[type=text], input[type=email], input[type=password] {
  width: 100%;  
  height: 32px;
  background-color: rgb(186, 185, 185);
  border-radius: 4px;
}

input[type=text]:focus, input[type=email]:focus, input[type=password]:focus {
    /* change colour of the highlight */
    outline-color: rgb(55, 84, 60);
}