@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-face{ src: url("../font/SocialLogosColor-od8V.ttf"); font-family:icons;}
*{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*/
 .serch_box{
  margin: 15px;
  align-items: center;
  justify-content: center;
}
 /*content start*/
 .content{
  padding: 15px 0;
  opacity: 70%;
 text-align: center;
 }
.content-titel{font-size: 50px;color: #a411f9;}
 .content-titel-icon{font-size: 250px; font-family: meicon;color: #a411f9;}
 .card-icon{font-size: 150px; font-family: meicon;}
 .card-icon-s{font-size: 150px; font-family: icons;}
 .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*/
  /*pg-button-card star*/
.pg-button-card {
display: inline-flex;
align-items: center;
gap: 6px;

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%;
}
 /*pg-button-card 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;
  
  opacity: 85%;
  text-align: center;
  margin: 10px;
}
.card:hover{

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*/

/*card-services star*/
.card-services{
  padding: 1em;
 border: 2px solid #a411f9;
  border-radius: 10px;
  text-align: center;
  color: #a411f9;
  margin: 10px;
}
.card-services button{background: #a411f9;}
.card-services:hover{
background: #a411f9;
transition: 2s;
color: #fff;
}
.card-services:hover button{
background: #fff;
color: #a411f9;

}
/*card-services end*/
/*card-services-fuchsia star*/
.card-services-fuchsia{
  padding: 1em;
 border: 2px solid #a411f9;
  border-radius: 10px;
  text-align: center;
  color: #fff;
  margin: 10px;
  background: #a411f9;
}
.card-services-fuchsia button{background: #a411f9;}
.card-services-fuchsia:hover{
background: #fff;
transition: 2s;
color: #a411f9;
}
.card-services-fuchsia:hover button{
background: #fff;
color: #a411f9;

}
/*card-services-fuchsia end*/
/*card-courses star*/
.card-courses {
  padding: 1em;
 border: 0px solid #a411f9;
  border-radius: 10px;
  text-align: center;
  color: #fff;
  margin: 10px;
  background: #a411f9;
}
/*table-courses star*/
.table-courses td, th
{
    border: 0px solid #a411f9;
  
    
}
.table-courses
{
   border-collapse: collapse;
  width: 100%;
}
.table-courses th{
  text-align: right;
}
.table-courses td{
  text-align: center;
}
.table-courses td{
  border: 0px solid #ddd;
  color: #a411f9;
  
}
/*table-courses end*/

.card-image-radius-courses
{
  height: 200px;
  width: 100%;
    border-radius: 3%;
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left: auto;
    margin-right: auto
    display: block;
}
.course-icon
{
font-family: meicon;
font-size: 35px;
color: #fff;
}
.course
{
display: inline-flex;

color: #fff;

border: none;
border-radius: 4px;
font-size: 20px;

}
.course-instructor-img 
{
  height: 70px;
  width: 70px;
    border-radius: 10%;
    margin-top: 15px;
    margin-bottom: 15px;
    margin-left: auto;
    display: flex;
}
.course_instructor
{
display: inline-flex;
align-items: center;
gap: 6px;
color: #fff;
outline: none;
border: none;
border-radius: 4px;
font-size: 14px;
padding: 0px 2px;
}
.payment
{
  padding: 10px;
color: #fff;
border: 2px solid #fff;
border-radius: 10%;
}
.course-titel
{
color: #fff;
font-size: 25px;
}
.course-box
{
    margin-top: 15px;
  margin-bottom: 15px;
  border-radius: 10px;
  padding: 10px;
  background-color: #690d9e;
  display: inline-flex;
  gap: 10px;
}
.course-box-icon-titel
{
 display:grid;
  text-align: center;
  color: #fff;
}

.course-button
{
gap: 6px;
background: #fff;
color: #a411f9;
outline: none;
border: none;
border-radius: 4px;
font-weight: 600;
font-size: 14px;
padding: 6px 14px;
cursor: pointer;
width: 100%;
text-align: center;
}
.course-button-icon{ font-family: meicon;}
.course-button:hover
{
  transition: 0.3s;
  opacity: 95%;
}
 /*button end*/
/*card-courses  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;
  color: #a411f9;

}
::placeholder {
  color: #a411f9; 
}
input[type=text],input[type=email],textarea, select {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
  border: 1px solid #a411f9;
  transition: 0.5s;
  outline: none;
  border-radius: 4px;
  color: #a411f9;
}
input[type=text]:focus
{
border: 1px solid #a411f9;
}


input[type=submit] {
  width: 100%;
  background-color: #a411f9;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: 3px solid #a411f9;
  border-radius: 4px;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: #fff;
  color: #a411f9;
}

.page-navbar-menu{
  padding: 0;
  font-family:meicon; 
  font-size: 50px;
  align-items: center;
}
/*table-lng star*/
.table-lng td, th
{
    border: 0px solid #a411f9;
  padding: 8px;
    width: 100%;
}
.table-lng
{
  margin-top: 15px;
    margin-bottom: 15px;
    margin-left: auto;
    margin-right: auto;
    display: block;
   border-collapse: collapse;
  width: 90%;
}
.table-lng td, th{
  text-align: center;
}
.table-lng #th-right {
  border-top-right-radius: 10px;
  
  padding-top: 12px;
  padding-bottom: 12px;
  background-color: #a411f9;
  color: white;
}
.table-lng #th-center {
  
  
  padding-top: 12px;
  padding-bottom: 12px;
  background-color: #a411f9;
  color: white;
}

.table-lng #th-left {
  
  border-top-left-radius: 10px;
  padding-top: 12px;
  padding-bottom: 12px;
  background-color: #a411f9;
  color: white;
}
.table-lng td{
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  color: #a411f9;
  background-color: #f2f2f2;
}
.table-lng tr:nth-child(even){background-color: #f2f2f2;}
.table-lng tr:hover {background-color: #ddd;}

/*table-lng end*/
/*table-index star*/
.table-index td, th
{
    border: 0px solid #a411f9;
  padding: 8px;
    width: 100%;
}
.table-index
{
   border-collapse: collapse;
  width: 100%;
}
.table-index td, th{
  text-align: center;
}
.table-index th {
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  padding-top: 12px;
  padding-bottom: 12px;
  background-color: #a411f9;
  color: white;
}
.table-index td{
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  color: #a411f9;
  background-color: #f2f2f2;
}
.table-index tr:nth-child(even){background-color: #f2f2f2;}
.table-index tr:hover {background-color: #ddd;}

/*table-index end*/
/*
table, td, th {
  border: 0px solid #a411f9;
  padding: 8px;
    width: 100%;
}

table {
  border-collapse: collapse;
  width: 100%;
}

td, th{
  text-align: center;
}
th {
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  padding-top: 12px;
  padding-bottom: 12px;
  background-color: #a411f9;
  color: white;
}
td{
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  color: #a411f9;
  background-color: #f2f2f2;
}
tr:nth-child(even){background-color: #f2f2f2;}
tr:hover {background-color: #ddd;}
/*table end*/

.content-image-radius
{
  height: 300px;
  width: 300px;
    border-radius: 50%;
    margin-top: 15px;
    margin-bottom: 15px;
    margin-left: auto;
    margin-right: auto;
    display: block;
}
.img-blog-person 
{
  height: 80px;
  width: 80px;
    border-radius: 50%;
    margin-top: 15px;
    margin-bottom: 15px;
    margin-left: auto;
    display: flex;
}
.card-image-radius
{
  height: 200px;
  width: 250px;
    border-radius: 10%;
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left: auto;
    margin-right: auto;
    display: block;
}
.content-titel-x-right
{
  margin-right: 15px;
  text-align: right;
  font-size: 30px;
  color: #a411f9;
}
.content-titel-m-right
{
  margin-right: 15px;
  text-align: right;
  font-size: px;
  color: #a411f9;
}
.square {
  border-radius: 10px;
    width: 350px;
    height: 30px;
    background-color: #a411f9;
    
}
/*grid-blog star*/
.grid-blog {
  display: grid;
 grid-template-columns: auto 10fr;
 grid-template-rows: auto 1fr;
 margin: 15px;
 gap: 5px;
}
.blog-img
{
  grid-column: 1/-1;
}
.blog-img img
{
  max-width: 750px;
  max-height: 450px;
   height: auto;
  width: 80%;
    border-radius: 10px;
    margin-top: 15px;
    margin-bottom: 15px;
    margin-left: auto;
    margin-right: auto;
    display: block;
}
.blog-content
{
grid-column: 1/-1;
}
.blog-content-pre
{
    white-space: pre-wrap;
    color: #a411f9;
}
#more {display: none;}
/*grid-blog end*/
@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;
  
}
.square {
    width: 100px;
}
.content-image-radius
{
  height: 150px;
  width: 150px;
    border-radius: 50%;
    margin-top: 15px;
    margin-bottom: 15px;
    margin-left: auto;
    margin-right: auto;
    display: block;
}
.content-paragraph {
  color: #a411f9;
  margin: 10px 10px;
 align-items: center;
 font-size: 16px;
 }
}