@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Aclonica&display=swap');

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
} 

html , body {
	height: 100%;
	width: 100%;
  background: #BA7855;
}

nav{
  display: flex;
  height: 10%;
  width: 100%;
  background: #AD5C41;
  align-items: center;
  justify-content: space-between;
  padding: 0 5% 0 11%;
  flex-wrap: wrap;
}
nav .name{
  color: #fff;
  font-size: 200%;
  font-weight: 400;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Aclonica', sans-serif;
}

.logo{
	height: 8vh;
	width:auto;
  padding-right: 1vh;
}
nav ul{
  display: flex;
  flex-wrap: wrap;
  list-style: none;
}
nav ul li{
  margin: 0 5px;
}
nav ul li a{
  color: #f2f2f2;
  text-decoration: none;
  font-size: 100%;
  font-weight: 500;
  padding: 8px 15px;
  border-radius: 5px;
  letter-spacing: 1px;
  transition: all 0.3s ease;
}
nav ul li a.active,
nav ul li a:hover{
  color: white;
  background: #E2A061;
}
nav .menu-btn i{
  color: #60300C;
  font-size: 200%;
  cursor: pointer;
  display: none;
}
input[type="checkbox"]{
  display: none;
}

.container{
	background: #BA7855;	
	height: calc(100% - (20%));
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: space-around;	
	flex-flow: wrap;
}

.box{
	width:45%;
	height: 95%;
	margin: 1%;
	box-sizing: border-box;
	font-size: 50px;
	text-align: center;
}

.bot_cont{
	text-align:center;
	background: #AD5C41;
	height: 10%;
}

.icons{
	width: 3%;
	margin-left: 1%;
	margin-right: 1%;
	height: auto;
}

.terms{
	color: white;
	font-size: 90%;
}

.preview{
	height: 100%;
	width:70%;
  vertical-align:middle;
  animation: fade_in 1s;
}

@keyframes fade_in {
  from{
    opacity: 0;
  }
  to{
    opacity: 1;
  }
  
}

.playstore {
  margin-top: 20vh;
	height:auto;
	width:75%;
  vertical-align:middle;
  animation: fade_in 1s;
 
}


.newbr{
  display: block;
  margin-bottom: -1em;
}

.drdl{
  color: #60300C;
  font-size: 50%;
  animation-name: fade_in;
  animation-duration: 1s;
}


/*
tutorial.html
*/
.content{
  margin: 3%;
	height: 80%;
	width: 80%;
	display:flex;
	align-items: center;	
	justify-content: center;	
}

.ytvid{
	width: 90%;
	height: 90%;
	border-style: solid;
	border-width: 1vh;
	border-color: #AD5C41;
	border-radius: 1vh;
  animation-name: fade_in;
  animation-duration: 1s;
}


/* 
FAQs.html
 */

 .collapsible {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  animation-name: fade_in;
  animation-duration: 1s;
}

.active, .collapsible:hover {
  background-color: #AD5C41;
}

.collapsible{
  border-radius: 1vh;
  background-color: #553331  ;
  color: white;
  width: 100%;
}

.ans_cont {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color: #612f0b;
  color: white;
  border-radius: 1vh;
  text-align: justify;
  text-justify: inter-word;
}
 
.question{
  font-size: 100%;
  margin-top: 10%;
  margin-left: 2vh;
  margin-right: 2vh;
  margin-bottom: 5vh;
}
.answer{
  font-size: 50%;
  text-align: justify;
  margin-left: 2vh;
  margin-right: 2vh;
}

.ans{
  font-size: 40%;
}

.newbr2{
  display: block;
  margin-bottom: 1em;
}

.newbr3{
  display: block;
  margin-bottom: 0em;
}


/*
Features.html
*/
.default{
  width: auto;
  height: 100%;
  animation-name: fade_in;
  animation-duration: 1s;
}

h5{
  font-size: 50%;
  animation-name: fade_in;
  animation-duration: 1s;
}


.screenshot{
  margin-top: 10vh;
  height: 60%;
  width: auto;
  border-style: double;
	border-width: 1vh;
	border-color: #AD5C41;
	border-radius: 1vh;
  animation-name: fade_in;
  animation-duration: 1s;
}

/*
About.html
*/

.about_cont{
  width: 100%;
  height: 100%;
  padding: 5vh;
}

.app_name{
  text-align: center;
  animation-name: fade_in;
  animation-duration: 1s;
}

.about_class{
  font-size: 3vh;
  text-align: justify;
  animation-name: fade_in;
  animation-duration: 1s;
}

/*
policy.html
*/
.policy{
  text-align: justify;
  padding: 5vh;
}

/* Switch */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #AD5C41;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: #BA7855;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: white;
}

input:focus + .slider {
  box-shadow: 0 0 1px white;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}




@media (max-width: 1000px){
  nav{
    padding: 0 40px 0 50px;
    }
      
}			                  
@media (max-width: 920px) {
  nav .menu-btn i{
    display: block;
  }
  #click:checked ~ .menu-btn i:before{
    content: "\f00d";
  }
  nav ul{
    position: fixed;
    top: 10%;
    left: -100%;
    background: #60300C;
    height: 100vh;
    width: 100%;
    text-align: center;
    display: block;
    transition: all 0.3s ease;
  }
  #click:checked ~ ul{
    left: 0;
  }
  nav ul li{
    width: 100%;
    margin: 40px 0;
  }
  nav ul li a{
    width: 100%;
    margin-left: -100%;
    display: block;
    font-size: 20px;
    transition: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  }
  #click:checked ~ ul li a{
    margin-left: 0px;
  }
  nav ul li a.active,
  nav ul li a:hover{
    background: none;
  	color: #E09F60;
  }
  
  nav{
  height: 10%;
  }


  .preview{
    height: 100%;
    width:70%;
  }


  
  .box{
  	width: 100%;
  	height: calc(65% - 20%);
  }
  
  .icons{
  	width: 9%;
		margin-left: 2%;
		margin-right: 2%;
  }
  
  .bot_cont{
  height: 10%;
  }
  
  .logo{
  	height: 5vh;
  }

  .playstore {
    margin-top: 5vh;
	  height:auto;
	  width:80%;
  }

  .drdl{
    font-size: 35%;
  }



  
  
  
  /*
  tutorial.html
  */
  .content{
  	height: calc(100% - 10%);
  }
  
  .ytvid{
  	width: 100%;
  	height: 50%;
  }
  
  /*
  FAQs.html
  */
  .question{
    font-size: 40%;
    margin-top: 2vh;
    margin-left: 2vh;
    margin-right: 2vh;
    margin-bottom: 1vh;
  }
  .answer{
    font-size:30%;
  }

  .collapsible{
    border-radius: 1vh;
    height:17%;
    font-size: 22%;
    padding-top: 2vh;
    margin-bottom: 0%;
    margin-top: 0%;
  }

  .ans{
    font-size: 25%;
  }
  
  .newbr2{
    display: block;
    margin-bottom:-2em;
  }

  .newbr3{
    display: block;
    margin-bottom: -.7em;
    margin-top: 0em;
    height: .3em;
  }

  .ans_cont{
    margin-top: -.1em;
    margin-bottom: 0em;
  }

  /*
  features.html
  */

  h5{
    font-size: 50%;
  }

  .screenshot{
    margin-top: 0;
  }


  /*
  about.html
  */
  .about_cont{
    padding: 1vh;
  }
  
  .about_class{
    font-size: 2vh;
  }
  
}