* {
    margin: 0;  /* removes all spacing around elements */
    padding: 0;  /* removes all spacing within elements */
    box-sizing: border-box;  /* include border & padding in width & height */
  }

html{
  width: 100vw;
}

  header article{
    background-color: bisque;
    width: 100vmax;
    height: 62.5vmax;
    display: grid;
    grid-template-columns: 8% auto 35% 15% 8%;
    grid-template-rows: 5% 10% 17% auto 50%;
    box-shadow: 0 2vmin 6vmin rgba(0, 0, 0, 0.25);
    background-image: url(../images/header_BG_1920.png);
    background-size: cover;
  }


#logo{
    grid-area: 2 / 2;
    justify-self: left;
    height: 15vmin;
    padding-bottom: 8vmin;

  }

  header nav{
    grid-area: 2 / 3;
    margin-top: 1vmax;
  }


header nav li{
    display: inline;
    padding: 4vmin;
    text-transform: uppercase;
    font-family: 'Montserrat', sans-serif;
    font-size: 2.5vmin;
    

}

header nav li a{
  text-decoration: none;
}

nav a:hover{
  color: white;
}


header h1{
    grid-area: 4 / 2;
    font-size: 18vmin;
    position:relative;
    font-family: 'Lobster', cursive;
    letter-spacing: 3vmin;
}

header div{
  grid-area: 5 / 2;
}


header h2{
  font-size: 6vmin;
  font-family: 'Lobster', cursive;
  letter-spacing: 0.23vmin;
  padding-left: 9vmin;
}


header h1::after{
    display: block;
    position:absolute;
    top: 20vmin;
    width: 65vmin;
    height: 1vmin;
    content:"";
    background-color: bisque;
    text-align: center;
}


#Buy_now{
  padding: 3vmin 9vmin 3vmin 9vmin;
  margin-top: 5vmin;
  margin-left: 15vmin;
  font-family: 'Montserrat', sans-serif;
  border-radius: 4vmin;
  font-size: 3vmin;
  background-color: bisque;
  font-weight: bold;
  box-shadow: 0 0.4vmin 1.5vmin rgba(0, 0, 0, 0.25);
}


#sign_in{
  grid-area: 2/4;
  background-color: #a28282;
  border-radius: 3vmin;
  font-size: 3vmin;
  height: 7vmin;
  width: 20vmin;
  justify-self: right;

}


.sectiontitle_aligncenter{
  font-family: 'Righteous', cursive;
  letter-spacing: 2.5px;
  color: white;
}


/*section2 why Alohi*/
#two{
  height: 100vh;
  width:100%;
    display: grid;
    grid-template-columns: 5% 12% 20% 26% 20% 12% 5%;
    grid-template-rows:10% 8% 33% 8% 33% 7%;
    background-image: url(../images/whyalohi_BG\(1920\).png);
    background-position: center;
    background-size: cover;
}


#two h2{
  grid-area: 1/4;
  align-self: center;
  font-size: 7vmin;
  color: #064420;
}

#experts{
  grid-area: 2/2;
  align-self: center;
  font-size: 2.5vmin;
}


#experts_img{
  grid-area: 3/2;
  align-self:center;
  width: 15vmin;
}


#experts_text{
  grid-area: 3/3;
  align-self: center;
  font-size: 2vmin;
}

#play{
  grid-area: 2/6;
  align-self: center;
  font-size: 2.5vmin;
}


#play_img{
  grid-area: 3/6;
  align-self:center;
  margin-left: 5vmin;
  width: 15vmin;
}


#play_text{
  grid-area: 3/5;
  align-self: center;
  font-size: 2vmin;
}


#robot_image{
  grid-area: 3/4/5/4;
  height: 65vmin;
  width: 40vmin;

}

#individual{
  grid-area: 4/2;
  align-self: center;
  font-size: 2.5vmin;

}

#individual_img{
  grid-area: 5/2;
  align-self:center;
  width: 15vmin;
}

#individual_text{
  grid-area: 5/3;
  align-self: center;
  font-size: 2vmin;
}


#various{
  grid-area: 4/6;
  align-self: center;
  font-size: 2.5vmin;
}

#various_img{
  grid-area: 5/6;
  align-self:center;
  margin-left: 5vmin;
  width: 15vmin;
}

#various_text{
  grid-area: 5/5;
  align-self: center;
  font-size: 2vmin;


}

#two p{
  font-family: 'Montserrat', sans-serif;

}


#two h3{
  font-family: 'Architects Daughter', cursive;
  color: #302d2d;

}

/*section 3 connect to minizoid, video*/

#three{
  height: 100vh;
  width:100%;
  display: flex;
  flex-direction: column;
justify-content: center;

}

.section3 h2{
  font-size: 7vmin;
  text-align: center;
  color: #064420;

  
}
.section3 h4{
  font-size: 3vmin;
  font-family: 'Montserrat', sans-serif;
  text-align: end;
  margin: 1vmin 25vmin 3vmin 0;
  font-weight: bold;
  color: rgb(59, 82, 82);


}



.player{
  background-color: black;
  width: 80%;
  height: 80%;
  display: grid;
  margin-left: 13vmin;
}

.player video{
  width: 100%;
  height: 100%;
  grid-area: 1 / 1;
  object-fit: cover;
}

.player .controls{
  width: 100%;
  height: 100%;
  grid-area: 1 / 1;
  z-index: 1;
  display: grid;
  grid-template-rows: 10% 80% 5% 5%;
  grid-template-columns:5% 83% 2% 5% 5%;
  opacity: 0;
  transition: 0.5s;
}

.player .controls:hover{
  opacity: 1;
  transition-delay: 0s;
}

@media screen and (pointer: fine){
  .player .controls:hover{
      opacity: 1;
  }

  .player .controls{
      transition-delay: 1s;

  }
}

@media screen and (point: coarse){
  .player .controls.visible{
      opacity: 1;
  }
}




.player .play, .player .pause{
  grid-area: 2 / 2 / 3 / 5;
  width: 25%;
  justify-self: center;
  align-self: center;
}

.player .hidden{
  display: none;
  pointer-events: none;
}

.player .fullscreen{
  grid-area: 3 / 4;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.player .progress{
  grid-area: 3 / 2;
  background-color: gray;
  border-radius: 100vw;
  overflow: hidden;
}

.player .bar{
  width: 0%;
  height: 100%;
  background-color: white;
}


/*Section4: about us*/

#four{
  height: 100vh;
  width:100vw;
  background-image: url(../images/support_BG.png);
  background-position: center;
  background-size: cover;
}

#four h2{
  font-size: 7vmin;
text-align: center;
margin-bottom: 8vmin;
color: #064420;
padding-top: 5vmin;

}

#same_line{
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-evenly;

}

#four p{
  font-family: 'Montserrat', sans-serif;
  font-size: 2vmin;
  line-height: 3vmin;
  width: 70vmin;

}

#four img{  
  width: 65vmin;
  height: 50vmin;
  border-radius: 5%;


}


#four button{
  padding: 3vmin 9vmin 3vmin 9vmin;
  font-family: 'Montserrat', sans-serif;
  border-radius: 4vmin;
  font-size: 3vmin;
  background-color: bisque;
  font-weight: bold;
  box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.25);


}

#Fbutton{
  display: flex;
  align-items: center;  
  justify-content: space-around;
  margin-top: 8vmin;



}




/* section5 experts*/

#five{
  display: grid;
  height: 100vh;
  width:100%;
  grid-template-columns:8% 25% auto 30% auto 25% auto 8%;
  grid-template-rows: 13% auto 2% 25% 10% 25% 10%;
  background-image: url(../images/experts_BG\(1920\).png);
  background-position: center;
  background-size: cover;

}

#five h2{
  grid-area: 1/3/2/6;
  text-align: center;
  font-size: 6vmin;
  color: #064420;
  
  
}

#brief{
  grid-area: 2/2/2/7;
  font-family: 'Montserrat', sans-serif;
  text-align: center;
  font-size: 3vmin;

}


#five p{
  font-family: 'Montserrat', sans-serif;
  text-align: center;
  

}

#person1{
  grid-area: 4/2;
  text-align: center;

}

#person1 h4, #person2 h4, #person3 h4, #person4 h4, #person5 h4, #person6 h4{
  padding: 0.4vmin;
}


#person1 img, #person2 img, #person3 img, #person4 img, #person5 img, #person6 img{
  border-radius: 30%;
  filter: blur(1px);
  width: 15vmax;
  border: 1vmin solid #0644206b; 

}


#person1 img:hover, #person2 img:hover, #person3 img:hover, 
#person4 img:hover, #person5 img:hover, #person6 img:hover{
  transform: translateY(-3.5vmin) scale(1.3);   
    box-shadow: 0 1.8vmin 2.5vmin -0.1vmin rgba(165, 152, 144, 0.79);   
     transition: 0.5s;
    filter: blur(0px);
}


#person2{
  grid-area: 4/4;
  text-align: center;

}


#person3{
  grid-area: 4/6;
  text-align: center;

}

#person4{
  grid-area: 6/2;
  text-align: center;

}

#person5{
  grid-area: 6/4;
  text-align: center;
}


#person6{
  grid-area: 6/6;
  text-align: center;
}


/*Section 6: free trials*/ 
#six{
      display: flex;
      flex-direction: column;
      width: 100vw;
      height: 100vh;
      justify-content: space-around;
      align-items: center;
      position: relative;
  }


#six h2{
  font-size: 8vmin;
  color: white;
}
  #six p{
    font-size: 8vmin;
    color: rgb(255, 255, 255);
    margin: 0 10vmin 0 10vmin;
    font-family: 'Handlee', cursive;
    

  }

  .background_video{
    width: 100vw;
    height: 100vh;
    position:absolute;
    z-index: -1;
    object-fit: cover;
  
  }

  #six button{
  padding: 3vmin 9vmin 3vmin 9vmin;
  font-family: 'Montserrat', sans-serif;
  border-radius: 4vmin;
  font-size: 3vmin;
  background-color: bisque;
  font-weight: bold;
  box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.25);
  opacity: 60%;

  }
  #six button:hover, #six input:hover{
    opacity:100%
  }


  #six input{
      width: 70vmin;
      height: 20vmin;
      border: 0;
      border-bottom: 1px solid #999999;
      font-family: 'Montserrat', sans-serif;
      border-radius: 4vmin;
      opacity: 70%;

  }


  #seven{
      display: flex;
      flex-direction: column;
      height: 100vh;
      width:100%;
      justify-content: center;
      align-items: center;
      background-image: url(../images/support_BG.png);
      background-position: center;
      background-size: cover;
    
  }

#seven h2{
  font-size: 8vmin;
  color: #064420;
}

#seven p{
  font-size: 3vmin;
  color:black;
  margin: 5% 5% 0% 5%;
  font-family: 'Montserrat', sans-serif;
  line-height: 5vmin;

}


#seven button{
  padding: 6vmin 15vmin 6vmin 15vmin;
  font-family: 'Montserrat', sans-serif;
  border-radius: 4vmin;
  font-size: 3vmin;
  background-color: bisque;
  font-weight: bold;
  box-shadow: 0 0.4vmin 1.5vmin rgba(0, 0, 0, 0.25);
}



/* footer section*/

footer{
  display: grid;
  grid-template-columns: 5% 45% 45%  5% ;
  grid-template-rows: 30% 30% 20% auto;
  background-color: rgb(247, 255, 253);

}

footer p1{
  grid-area: 1/3;
  font-family: 'Montserrat', sans-serif;
  justify-self: flex-end;
  margin-top: 3vmin;
  margin-right: 13vmin;
  font-size: 4vmin;
  
}

footer div{
  grid-area: 2/3;
  justify-self: flex-end;

}


footer img{
  margin: 4vmin;
  width: 6vmin;


}


footer ul{
font-family: 'Montserrat', sans-serif;
grid-area:1/2/2/2;
margin-top: 3vmin;
}

footer ul li{
  margin-top: 2vmin;
  font-size: 2.6vmin;

}

a{
  color: black;
  text-decoration: none;

}

a:hover{
  color: bisque;
}

footer p{
  grid-area:4/2;
  font-size: 2.5vmin;

}

#two { background-color:  #e4efe7;}
#three { background-color:  #e4efe7;}