/*These are the basic stuff copied from index page css*/
body{
	margin: 0px;
	font-family: Arial, Helvetica, sans-serif;
  /*overflow: hidden;*/
  background-size: cover;
  background-color: #141d2b;
  background-blend-mode: darken;
  color: white;
}
@font-face {
  font-family: font1;
  src: url('../fonts/demo.ttf');
  color: #679a10 ;
}

 @font-face {
  font-family: font2;
  src: url('../fonts/bold.ttf');

}


* {box-sizing: border-box;}

.title{
  padding-top: 4.5px;
  cursor: pointer;
  color: white;
  text-decoration: none;
}
.left a{
  text-decoration: none;
}



.nav{

  display: flex;
  height: 70px;
  /*overflow: hidden;*/
  max-width: 100%;
  background-color: rgba(17, 24, 38, 0.7);

}
.left{
  font-family: font1;
  padding-left: 70px;
  font-size: 14px;
  flex: 2;
  padding-top: 3px;
  color: #f7f4e9;
}
.right{
  padding-top: 10px;
  padding-left: 10px;
  display: flex;
  flex: 1;
  color: white;
}



.button-in-nav{
  position: relative;
  margin-top: -10px;
  background-color: transparent;
  background-blend-mode: lighten;
  backface-visibility: 100%;
  width: 100px;
  border-width: 0px;
  color: white;
  cursor: pointer;
}


.button-in-nav::after{
  content: '';
  position: absolute;

  width: 100%;
  margin-bottom: -4px;
  height: 3px;  
  background-color:#7e196d;

  left: 0;
  bottom: 0;
}
.button-in-nav::after{
  transform: scale(0,1);
  transition: transform 0.5s ease;
  transform-origin: center;

}
.button-in-nav:hover::after{
  transform: scale(1,1);

}


/*main para ma mathi gap chodeko */
.main-body{
  /*padding-top: 150px;*/
  /*background-color: black;*/
  /*background:rgba(0,0,0,0.5);*/
  width: 1000px;
  /*border-radius: 20px;*/
  margin: 10px 150px;
  /*height: 86.5vh;*/
}
a{
  text-decoration: none;
}


/* this is for the heading aka cybersecurity */
.heading{
  text-align: center;
  font-size: 50px;
  margin-top: 10px;
  padding-top: 20px;
  font-family: font1 ;
}



form{
  font-family: sans-serif;
  font-size: 18px;
  text-align: center;
  font-weight: bold;
}




iframe{
  /*creating 16:9 ratio*/
  width: 800px;
  height:450px;

}
.video{
  text-align: center;
}

img{
  width: 800px;
  height:450px;


}

.img{
  text-align: center;
  margin-bottom: 30px;
}

hr{
  size: 4;
  background-color: white;
}


ul{
  color: purple;
  font-size: 15px;
}

input{
  width: 400px;
  height: 30px;
  border-radius: 5px;
  border-width: 0px;
  padding-left: 10px;
}


textarea{
  height:90px;
  width: 400px;
  border-radius: 5px;
  border-width: 0px;
  padding-left: 10px;

}

legend{
  text-align: center;
  align-content: center;
  padding-left: 100px;
}

button {
  margin: 1px;

  cursor: pointer;
  border-radius: 1px;
  border-color: #221d24;
  border-width: 1px;

}

.main-body button{
  margin: 0px;
  text-align: center;
  width: 400px;
  height: 30px;
  background-color: #7e196d;
  transition: transform .1s; 
  font-size: 15px;
  color: white;
  border-radius: 9px;
  border-width: 0px;
}


input:focus,textarea:focus{
  outline: none;
}




.theme{
  padding-top: 15px;
  background-color: #111927;

}
.inside {
  display: none;

  margin-top: 16px;
  background-color: #111927;
  z-index: 1;
}

.theme:hover .inside {
  display: block;
}

.inside button{
  position: relative;
  text-align: center;
  width: 100px;
  height: 40px;
  background-color: #111927;
  color: white;
  font-weight: normal;
  padding: 0px;
  border-width: 0px;
  /*font-size: ;*/
}





.dropdown {
  width:  200px;
}




.dropdown::after{
  content: '';
  position: absolute;

  width: 100%;
  margin-bottom: -2px;
  height: 3px;  
  background-color:#7e196d;

  left: 0;
  bottom: 0;
}
.dropdown::after{
  transform: scale(0,1);
  transition: transform 0.5s ease;
  transform-origin: center;

}
.dropdown:hover::after{
  transform: scale(1,1);

}

.right a{
  padding-top: 15px;
}