@charset "utf-8";
/* CSS Document */
@font-face{ src: url("../font/DroidKufi-Regular.ttf"); font-family:me;}
@font-face{ src: url("../font/MaterialIcons-Regular.ttf"); font-family:meicon;}
@font-face{ src: url("../font/Alger.ttf"); font-family:Algerr;}
*{font-family:me; margin: 0;padding: 0; box-sizing: border-box;text-decoration: none;height: }
/*header star*/
header{z-index: 1000; background:#a411f9;display: flex;position:relative;top: 0;right: 0;left: 0; box-shadow: 0px 10px rgba(0,0,0,.1);align-items: center;}
footer{z-index: 1001; background:#a411f9;display: flex;position:relative;bottom: 0;right: 0;left: 0; box-shadow: 0px 10px rgba(0,0,0,.1);align-items: center;justify-content: center;color: #fff;}
.page-navbar-logo{ padding: 5px; color: #fff; font-family:Algerr;  font-size: 38px}
header label {color: #fff; position: fixed; top: 0;left: 2%; font-weight: bold; font-size: 20px; padding: 5px;display: none;}
#page-navbar-menu{display: none;}
.page-navbar{}
.page-navbar ul{list-style: none;}
.page-navbar ul li{position: relative; float: right;}
.page-navbar ul li a{display: block;padding: 15px;color: #fff;}
.page-navbar ul li a:hover,.page-navbar ul li a:focus{background: #fff; color:#414147; }
.page-navbar ul li ul{background: #a411f9; position: absolute;right:0;display: none; width:300px;}
.page-navbar ul li ul li{width: 100%; border-top:1px solid rgba(0,0,0,.1);}
.page-navbar ul li:hover >ul,.page-navbar ul li:focus >ul{display: inherit;}
/*header end*/
 /*slide show start*/

#slider {
  margin-left: 10px;
  margin-right: 10px;
	overflow: hidden;
  margin-top: 15px;
   border-radius: 20px;
   box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
#slider figure {
	position: relative;
	width: 500%;
	margin: 0;
	right: 0;
	animation: 20s slider infinite;
}
#slider figure img {
	float: right;
	width: 20%;
}

@keyframes slider {
	0% {
		right: 0;
	}
	20% {
		right: 0;
	}
	25% {
		right: -100%;
	}
	45% {
		right: -100%;
	}
	50% {
		right: -200%;
	}
	70% {
		right: -200%;
	}
	75% {
		right: -300%;
	}
	95% {
		right: -300%;
	}
	100% {
		right: -400%;
	}
}
 /*slide show end*/
 /*content start*/
 .content{
  padding: 15px 0;
  opacity: 70%;
 text-align: center;
 }
 .content-titel{
  font-size: 50px;  
 }
 .content-titel-icon{font-size: 250px; font-family: meicon;color: #a411f9;}
 .content-paragraph {
  color: #a411f9;
  margin: 10px 10px;
 align-items: center;
 font-size: 25px;
 }
 .content-image img{
  width: 90%;
  border-radius: 10px;
 }
 /*content end*/

 /*button star*/
.pg-button {
display: inline-flex;
align-items: center;
gap: 6px;
background: #a411f9;
color: #fff;
outline: none;
border: none;
border-radius: 4px;
font-weight: 600;
font-size: 14px;
padding: 6px 14px;
cursor: pointer;
}
.bt-icon{ font-family: meicon;}
.pg-button:hover
{
  opacity: 90%;
}
 /*button end*/
 /*grid card star*/
 .grid-container{
  display: grid;
  
  grid-template-columns: repeat(auto-fit,minmax(300px,1fr));
  gap: 15px;
  justify-content: center;
  margin: 15px;
  
  color: aliceblue;

}
.card{
  padding: 1em;
  
  border-radius: 10px;
  background:#414147;
  opacity: 85%;
  text-align: center;
  margin: 10px;
}
.card:hover{
background: #04AA6D;
transition: 2s;
color: #fff;
}
.card a{
  color: #f6f6f6;
  }
.card-img img
{
  border-radius: 10px;
}
.card-titel{
  font-size: 20px;
  }
.card-paragraph{
  font-size: 15px;
}

/*grid card end*/
 /*page-table-1 star*/
.page-table-1 {width: 100%; border: 0px solid; color: #414147;}
.page-table-2 {width: 100%; border: 1px solid; color: #414147;}
.page-table-1 tr,td{ text-align: center; border: 0px solid; color: #414147;}
/*page-table-1 end*/
/*page-text-1 star*/
.page-text-1{color: #414147; position:relative;top:60%; right: 20%;left: 20%; width: 60%; text-align: center; font-size: 20px;  align-content: center;border: 0.5px solid #414147;box-shadow: rgba(0, 0, 0, .1) 0px 5px 10px;}
/*page-text-1 end*/
/*bt star*/
#bt1
{

    color: #fff;
	background: #a411f9;
                margin-bottom: 10px;
                padding: 10px 10px;
                font-size: 12px;
                border: 0px solid;
                border-radius: 15px;
}
/*bt end*/
.content-form{
  border-radius: 5px;
  padding: 20px;
  text-align: right;

}
input[type=text], select {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}
input[type=email], select {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}
textarea, select {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}
input[type=submit] {
  width: 100%;
  background-color: #04AA6D;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: #45a049;
}

.page-navbar-menu{
  padding: 0;
  font-family:meicon; 
  font-size: 50px;
  align-items: center;
}
@media(max-width:600px)
{
	.responsive {
  width: 100%;
  height: 50%;
}
	header{height: 50px;}
	header label{display: inherit; position:absolute;}
	header .page-navbar{z-index: 1000; background: #a411f9; position: absolute;top: 100%;right: 0px;left: 0px;border-top: 1px solid rgba(0,0,0,.1);text-align: center; align-items: center;display: none;}
	header .page-navbar ul li{width:100%;}
	header .page-navbar ul li ul{width:100%; position: relative;}
	#page-navbar-menu:checked ~ .page-navbar{ display:inherit;}
  #slider {min-height: 30vh;}
#slider figure img {
	min-height: 30vh;
}
}
