@font-face{
	src: url(fonts/Tajawal-Medium.ttf);
	font-family: Tajawal-Medium;
}

*{
	box-sizing: border-box;
	padding: 0;
	margin: 0;
	border:0;
	direction: rtl;
	font-family: Tajawal-Medium;
	letter-spacing: 1px;
}
body {
  min-height: 100vh;
  background-color: #f8fdff;
}
ul{
	list-style: none;
}
a{
	text-decoration: none;
	color: inherit;
}
button{
	cursor: pointer;
	box-shadow: 1px 1px 2.5px black;
}
button:focus{
	outline: 0;
}
input:focus{
	outline: 0;
}
.abtn{
	min-width: 40px;
    display: inline-block;
    padding: 6px;
    border-radius: 6px;
    color: white;
    font-size: 16px;
    box-shadow: 1px 1px 2.5px black;
}
.abtn2{
    display: inline-block;
    margin: 4px;
    padding: 4px;
    border-radius: 6px;
    color: white;
    font-size: 14px;
    box-shadow: 1px 1px 2.5px black;
}
.button{
	display: flex;
    border-radius: 6px;
    color: white;
    justify-content: center;
    align-items: center;
    padding: 8px;
    box-shadow: 1px 1px 2.5px black;
}
.prosbtn{
	display: block;
	margin: 2px auto;
	padding: 2px;
	border-radius: 4px;
	color: white;
	font-size: 14px;
}
.coursedate{
  padding: 5px;
  font-size: 18px;
  display: block;
  cursor: pointer;
  background-color: #0066ff;
  border-radius: 8px;
  color: white;
}
.coursedate::-webkit-calendar-picker-indicator {
  width: 70px;
  height: 35px;
  text-align: center;
  border: 1px dashed red;
  cursor: pointer;
}
.raido-con{
    border: 1px solid grey;
    border-radius: 8px;
    padding: 4px;
    margin: 5px;
}
:root {
  --one:#0D3E5E;	
  --two:#c49951;
  --three:#ffc107;
  --nav-Bcolor: #485460;
  --nav-color:#808e9b;
  --secoundry-color: #ffdd59;
  --aside-color: #1e272e;
  --light-color: #d2dae2;
}
.bg-spink{
	background-color: #be2edd;
	transition: all 0.3s linear;
}
.bg-info {
    background-color: #17a2b8!important;
    transition: all 0.3s linear;
}
.bg-info:hover{
	background-color: #117687!important;
}
.bg-danger {
    background-color: #dc3545!important;
    transition: all 0.3s linear;
}
.bg-danger:hover{
    background-color: #bb2432!important;
}
.bg-success {
    background-color: #28a745!important;
    transition: all 0.3s linear;
}
.bg-success:hover{
	background-color: #13762a!important;
}
.bg-dark{
	background-color: #343a40 !important;
	transition: all 0.3s linear;
}
.bg-dark:hover{
	background-color: #1b1c1e !important;
}
.bg-warning {
    background-color: #ffc107!important;
    transition: all 0.3s linear;
}
.bg-spink:hover{
	background-color: #e056fd!important;
}
.bg-warning:hover{
	background-color: #b98c08!important;
}
.bg-new{
     background-color:#d35800!important;
     transition: all 0.3s linear;
}
.bg-new:hover{
	background-color: #b14e08!important;
}
.bg-white{
     background-color:#ffffff!important;
}
.f-info {
    color: #17a2b8!important;
    transition: all 0.2s linear;
}
.f-spink {
    color: #be2edd!important;
    transition: all 0.2s linear;
}
.f-danger {
    color: #dc3545!important;
    transition: all 0.2s linear;
}
.f-success {
    color: #28a745!important;
    transition: all 0.2s linear;
}
.f-dark{
	color: #343a40 !important;
	transition: all 0.2s linear;
}
.f-warning {
    color: #ffc107!important;
    transition: all 0.2s linear;
}
.f-new{
     color:#d35800!important;
     transition: all 0.2s linear;
     letter-spacing: 2px;
    font-weight: bold;
}
.text-info {
    color: #17a2b8!important;
    transition: all 0.3s linear;
}
.text-info:hover{
	color: #117687!important;
}
.text-danger {
    color: #dc3545!important;
    transition: all 0.3s linear;
}
.text-danger:hover{
    color: #bb2432!important;
}
.text-success {
    color: #28a745!important;
    transition: all 0.3s linear;
}
.text-success:hover{
	color: #13762a!important;
}
.text-dark{
	color: #343a40 !important;
	transition: all 0.3s linear;
}
.text-dark:hover{
	color: #1b1c1e !important;
}
.text-warning {
    color: #ffc107!important;
    transition: all 0.3s linear;
}
.text-warning:hover{
	color: #b98c08!important;
}
.text-new{
    color:#d35800!important;
    transition: all 0.3s linear;
}
.text-new:hover{
	color: #b14e08!important;
}
.text-white{
     color:#ffffff!important;
}


.border-info {
	border: 1px solid #17a2b8!important;
}
.border-danger {
    border: 1px solid #dc3545!important;
    transition: all 0.3s linear;
}
.border-success {
    border: 1px solid #28a745!important;
    transition: all 0.3s linear;
}

.border-dark{
	border: 1px solid #343a40 !important;
	transition: all 0.3s linear;
}
.border-warning {
    border: 1px solid #ffc107!important;
    transition: all 0.3s linear;
}
.border-new{
    border: 1px solid #d35800!important;
    transition: all 0.3s linear;
}
.border-white{
     border: 1px solid #ffffff!important;
}

/*###########################################
########## Start header & Nav  Style #######
###########################################
*/
header{
    position: relative;
    overflow: hidden;
}

.splide{
    height: 400px;
    width: 96%;
    margin: auto;
}
aside .splide{
    height: auto;
    width: 100%;
    margin: auto;
}
aside .splide img{
    height: auto;
    width: 100%;
    border-radius: 6px;
    background-color: black;
}
.splide__slide{
    margin: 0;
}
.splide img{
    height: 400px;
    width: 100%;
    border-radius: 6px;
    background-color: black;
}
.splide iframe{
    width: 100%;
}
.panner > img{
box-shadow: 2px 2px 4px gray;
width: 100%;
height: 200px;
}
main{
    display: flex;
    flex-wrap: wrap;
    align-items: self-start;
}
aside{
    width: 25%;
    max-width: 285px;
    padding: 0px 10px;
}
.tab{
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--one);
    color: var(--secoundry-color);
    font-size: 20px;
    letter-spacing: 2px;
    padding: 8px 15px;
    margin: 10px 0px;
    border-radius: 25px;
    text-align: center;
    box-shadow: 3px 3px 6px #000;
    font-weight: bold;
    text-shadow: 1px 1px 2px #000;
}
.asidli{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    background-color: var(--one);
    color: white;
    font-size: 17px;
    letter-spacing: 2px;
    padding: 8px 15px;
    margin: 10px 0px;
    border-radius: 25px 0px 55px 25px;
    text-align: center;
    box-shadow: 3px 3px 6px #000;
    font-weight: bold;
    text-shadow: 1px 1px 2px #000;
    transition: all  0.2s linear;
}
.asidli:hover{
    color: var(--secoundry-color);
    padding: 8px 19px 8px 11px;
}
.splideasid{
    background-color: var(--one);
    color: white;
    font-size: 20px;
    letter-spacing: 2px;
    padding: 8px 15px;
    margin: 10px 0px;
    border-radius: 25px;
    text-align: center;
    box-shadow: 3px 3px 6px #000;
    font-weight: bold;
    text-shadow: 1px 1px 2px #000;
    transition: all  0.2s linear;
}
.splideasid:hover{
    color: var(--secoundry-color);
    padding: 8px 19px 8px 11px;
}
.subyou{
    width: 100%;
    text-align: center;
    margin: 10px 0px;
    background-color: white;
    padding: 10px;
    border-radius: 8px; 
    background-image: linear-gradient(to bottom right, #cac7c7, white,#cac7c7);
}
/*###########################################
########## End Header & Nav  Style #######
###########################################
*/




/*###########################################
########## Start news  Style #######
###########################################
*/
.newsimg{
    width: 45px;
    height: 45px;
    border-radius: 50%;
}
@-webkit-keyframes ticker {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }
  100% {
    -webkit-transform: translate3d(+100%, 0, 0);
    transform: translate3d(+100%, 0, 0);
  }
}
@keyframes ticker {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }
  100% {
    -webkit-transform: translate3d(+100%, 0, 0);
    transform: translate3d(+100%, 0, 0);
  }
}
.ticker-wrap {
  bottom: 0;
  margin-top: 5px;
  width: 100%;
  overflow: hidden;
  height: 3rem;
  background-color: var(--one);
  padding-left: 100%;
  box-sizing: content-box;
}
.ticker-wrap .ticker {
  display: inline-flex;
  align-items: center;
  height: 3rem;
  line-height: 3rem;
  white-space: nowrap;
  padding-right: 100%;
  box-sizing: content-box;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-name: ticker;
  animation-name: ticker;
  -webkit-animation-duration: 60s;
  animation-duration: 60s;
}
.ticker-wrap .ticker__item {
  display: inline-block;
  padding: 0 2rem;
  font-size: 1.5rem;
  color: white;
}

/*###########################################
########## End news  Style #######
###########################################
*/


.reziz{
    padding: 0 10px;
}
.stat a{
    transition: all 0.3s linear;
}
.stat a:hover{
    box-shadow: 2px 2px 6px var(--three);
    border: 2px solid;
}
.statitem{
    text-align: center;
    padding: 20px;
    border: 1px solid;
    margin: 6px;
    border-radius: 6px 26px;
    box-shadow: 2px 2px 6px black;
    background-image: linear-gradient(to bottom right, #cac7c7, white,#cac7c7);
}
.statitem i{
    font-size: 30px;
    color: var(--two);
}
.statitem h3{
    color: var(--one);
}
.statitem span{
    font-size: 20px;
    color: var(--two);
}
.sitehr{
    width: calc(100% - 40px);
    height: 2px;
    box-shadow: 1px 1px 3px black;
    background-color: var(--two);
    margin: 10px auto;
}
.visitcon{
    background-image: linear-gradient(to top, #CFD0D0, #FBFCFC);
    width: 200px;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    margin: 10px 20px;
    box-shadow: 2px 2px 6px black;
}
.visitson{
    width: 160px;
    height: 160px;
    border: 3px solid;
    border-radius: 50%;
    padding: 15px;
    background-image: linear-gradient(to top, #FBFCFC, #CFD0D0);
}

.visitson i{
    font-size: 35px;
    padding: 5px;
    color: var(--one);
}
.visitson h3, .visitson span{
    color: var(--two);
    font-size:14px;
}
.visitcon2{
    background-image: linear-gradient(to top, #CFD0D0, #FBFCFC);
    width: 200px;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    margin: 10px 20px;
    box-shadow: 2px 2px 6px black;
}
.visitson2{
    width: 150px;
    height: 150px;
    border: 3px solid;
    border-radius: 50%;
    padding: 20px;
    background-image: linear-gradient(to top, #FBFCFC, #CFD0D0);
}

.visitson2 i{
    font-size: 40px;
    padding: 5px;
    color: var(--one);
}
.visitson2 h3, .visitson span{
    color: var(--two);
    font-size: 16px;
}
.pdfimg{
        max-width: 90%;
    box-shadow: 1px 1px 4px black;
    margin: 8px auto;
    display: block;
        border-radius: 8px;
}
.visitcountry{

}
.visitcountry li{
    background-color: var(--one);
    color: white;
    font-size: 12px;
    letter-spacing: 2px;
    padding: 2px 10px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 3px 3px 6px #000;
    font-weight: bold;
    text-shadow: 1px 1px 2px #000;
    transition: all 0.2s linear;
}
.visitcountry li > *{
    margin: 4px;
}
.visitcountry img{
    width: 50px;
    height: 25px;
}
.circ{
    width: 44px;
    height: 44px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background-color: var(--two);
}

/*## S footer ##*/
.footer-con{
    background-color: var(--nav-Bcolor);
    color: white;
    padding: 10px;
}
.main-footer{
    width: 50%;
    margin: auto;
}
.main-footer img{
    width: 250px;
}
.wcolor{
    color: white;
}
.fa-facebook-f{
    background-color: #4267B2;
}
.fa-twitter{
    background-color: #1DA1F2;
}
.fa-instagram{
    background-color: #C13584;
}
.fa-linkedin-in{
    background-color: #4267B2;
}
.fa-youtube{
    background-color: #FF0000;
}
.fa-whatsapp{
    background-color: #25D366;
}
.fa-telegram-plane{
    background-color: #0088cc;
}

.soical2 i{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 26px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin: 0 6px;
}
.soical2 .fa-facebook-f{
    color: #4267B2;
    background-color: white;
}
.soical2 .fa-twitter{
    color: #1DA1F2;
    background-color: white;
}
.soical2 .fa-instagram{
    color: #C13584;
    background-color: white;
}
.soical2 .fa-linkedin-in{
    color: #4267B2;
    background-color: white;
}
.soical2 .fa-youtube{
    color: #FF0000;
    background-color: white;
}
.soical2 .fa-whatsapp{
    color: #25D366;
    background-color: white;
}
.soical2 .fa-telegram-plane{
    color: #0088cc;
    background-color: white;
}
/*## E footer ##*/

/*## S Index ##*/
    .counter{
        background-color: var(--two);
        padding: 2px;
        border-radius: 4px;
    }
/*## E Index ##*/

.book img{
    width: 110px;
    height: 55px;
    border-radius: 8px;
    box-shadow: 1px 1px 4px black;
}

/*## S About ##*/
.aboutcon{
    background-image: url(../image/def/p2.jpg);
    background-repeat: repeat-y;
    background-size: 100%;
    background-position: center top;
    min-height: 100vh;
}
.aboutcon > div{
 background-color:rgba(0, 0, 0, 0.85);
 color: white;
 margin: 10px 25px;
 border-radius: 10px;
 padding: 20px;
}
.td_title1{
 font-weight: bold;
 color: var(--three);
 font-size: 18px;
}
.aboutcon p{
    font-size: 20px;
    letter-spacing: 1.5px;
    word-spacing: 2px;
    line-height: 38px;
}
.aboutcon ul{
    font-size: 17px;
    letter-spacing: 1.5px;
    word-spacing: 2px;
    line-height: 30px;
}
.aboutcon li::before {
  content: "- ";
  color: var(--three);
}
.aboutcon img{
        margin: auto;
    display: block;
    min-width: 250px;
    max-width: 350px;
    border-radius: 10px;
    box-shadow: 3px 3px 5px white;
}
/*## E About ##*/

/* ## S Lesson ##*/
.video-audio{

}

.video-audio img{
    width: 135px;
}
.video-audio i {
    position: absolute;
    position: absolute;
    top: 50%;
    font-size: 40px;
    left: 50%;
    background-color: rgb(13 62 94 / 70%);
    transform: translate(-50%, -50%);
    padding: 20px;
    border-radius: 50%;
    width: 80px;
    height: 80px;
    color: var(--three);
    visibility: hidden;
}

/* ## S Lesson ##*/

/* ## S footer ##*/
    footer{
        background-image: linear-gradient(to right, #cac7c7, var(--one));
        text-align: center;
        width: 100%;
        bottom: 0;
        border-top: 3px solid white;
    }
/* ## E footer ## */

/*
####################################
########## Start Contact Style #######
####################################
*/
.contect-header{
    text-align: center;
    color: var(--nav-Bcolor);
    margin: 30px 0;
}
.contact-con{
    color: var(--nav-color);
    display: flex;
    flex-wrap: wrap;
}
.form-contect-con{
        width: 70%;
}
.contact-con h3{
 text-align: center;
 margin-bottom: 15px;
 color: var(--nav-Bcolor);
}
.contact-form{
    padding: 10px;
    display: flex;
    flex-wrap: wrap;
}
.contact-form div{
    width: 50%;
    padding: 5px;
}
.message{
    width: 100% !important;
}
.contact-form div input{
    width: 100%;
    background-color: #d6d6d6;
    font-size: 18px;
    padding: 10px;
    border-radius: 8px;
    margin: 5px;
}
.contact-form div textarea{
    width: 100%;
    background-color: #d6d6d6;
    padding: 10px;
    font-size: 18px;
    border-radius: 8px;
    margin: 5px;
    height: 200px;
}
.contect-btn{
    padding: 10px 30px;
    border-radius: 8px;
    font-size: 18px;
    width: 20%;
    margin-right: 80%;
    color: white;
    cursor: pointer;
    transition: all 0.2s linear;
}
.contect-btn:hover{
    transform: scale(1.07);
    background-color: #1d8e37;
}
.contact-info-con{
    width: 30%;
}
.contact-info{

}
.contact-info address{

}
.contact-info address p{
    text-align: center;
    margin: 10px;
    padding: 10px;
}
.contact-info address p span{
    display: block;
    padding: 5px;
}
.social{

}
.social ul{
    display: flex;
    justify-content: center;
    align-items: center;
}
.social ul li{
    padding: 10px 20px;
    font-size: 25px;
    transition: all 0.2s linear;
}
.social ul li:hover{
    color: var(--secoundry-color);
    transform: scale(1.07);
}
.sosialc{
    color: white;
}
.sosialc i{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    padding: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 4px 0;
}
/*
####################################
########## Start Contact Style #######
####################################
*/


/*###########################################
########## Start def  Style #######
###########################################
*/
.pointer{
	cursor: pointer;
}
.myProgress {
  width: 100%;
  background-color: #ddd;
  border-radius: 3px;
  margin: 4px 0;
}
.myBar {
  border-radius: 3px;
  width: 0%;
  height: 20px;
  background-color: #04AA6D;
  text-align: center;
  line-height: 20px;
  color: white;
}
.relative {
  position: relative;

 }
.container {
  position: relative;
  overflow: hidden;
  width: 75%;
  padding-top: 33%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
      box-shadow: 8px 8px 9px var(--one);
    border: 5px solid var(--two);
    border-radius: 10px;
}
.main-box{
	box-shadow: 1px 1px 4px white, -0.2px -0.2px 1px white;
}
.main-box > *{
	display: block;
	margin-bottom: 4px;
}
/* Then style the iframe to fit in the container div with full height and width */
.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}
.h{
	text-align: center;
	color: var(--two);
	text-shadow: 0.5px 0.5px 1px var(--three);
}
.h2{
	text-align: center;
	color: white;
	text-shadow: 0.5px 0.5px 3px var(--one);
}
.input{
    padding: 8px;
    border-radius: 6px;
    font-size: 16px;
    margin: 20px auto;
    box-shadow: 1px 1px 3px black;
}
 .mypad{
 	padding: 20px;
 }
.myhr{
	width: calc(100% - 40px);
    height: 1px;
    background-color: white;
    margin: auto;
}
.vertical{
    width: 2px;
    background-color: white;
    margin:  20px auto;
}
.nhr{
    overflow: visible;
    height: 30px;
    border-style: solid;
    border-color: white;
    border-width: 1px 0 0 0;
    border-radius: 20px;
    margin: 25px auto;	
}
.nhr:before {
    display: block;
    content: "";
    height: 30px;
    margin-top: -31px;
    border-style: solid;
    border-color: white;
    border-width: 0 0 1px 0;
    border-radius: 20px;
}
.button{
	display: block;
	padding: 6px 14px;
	color: white;
	box-shadow: 1px 1px 3px black;
	margin: 2px;
	font-size: 16px;
	border-radius: 6px;
	background-color: var(--three);
	transition: all 0.1s linear;
}
.button:active {
  box-shadow: 0px 0px 0px ;
}
.linkbut{
	display: block;
	padding: 6px 14px;
	color: white;
	box-shadow: 1px 1px 3px black;
	margin: 2px;
	font-size: 16px;
	border-radius: 6px;
	background-color: var(--three);
	transition: all 0.1s linear;
}
.linkbut:active {
  box-shadow: 0px 0px 0px ;
}
.myflex1{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
}
.myflex2{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}
.myflex3{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
	align-items: center;
}
.myflex1 a,
.myflex2 a,
.myflex3 a{
    display: block;
}
.stretch{
	align-items: stretch !important;
}
.start{
	justify-content: start !important;
}
.center{
	justify-content: center !important;
}
.qwidthmirg{
	width: calc(25% - 8px) !important;
}
.width25{
	width: 25% !important;
}
.width33{
    width: 33% !important;
}
.width50{
	width: 50% !important;
}
.width100{
	width: 100% !important;
}
.width15-mirg6{
	width: calc(14.28% - 12px) !important;
}
.width25-mirg6{
	width: calc(25% - 12px) !important;
}
.width33-mirg6{
    width: calc(33% - 12px) !important;
}
.width50-mirg6{
	width: calc(50% - 12px) !important;
}
.width100-mirg6{
	width: calc(100% - 12px) !important;
}
.auto{
	margin: auto !important;
}
.inline{
    display: inline-block;
}
.block{
	display: block;
}
.mirg4{
	margin: 4px;
}
.mirg6{
	margin: 6px;
}
.mirg8{
	margin: 8px;
}
.mirg10{
    margin: 10px;
}
.mrigtb{
    margin: 10px 0;
}
.fsize14{
	font-size: 14px;
}
.fsize16{
	font-size: 16px;
}
.fsize18{
	font-size: 18px;
}
.fsize20{
	font-size: 20px;
}
.fsize22{
	font-size: 22px;
}
.fsize24{
	font-size: 24px;
}
.radius6{
	border-radius: 6px;
}
.radius8{
	border-radius: 8px;
}
.tc{
	text-align: center;
}
.padd4{
	padding: 4px;
}
.padd6{
	padding: 6px;
}
.padd8{
	padding: 8px;
}
.padd10{
	padding: 10px;
}
.shado{
	box-shadow: 1px 1px 3px black;
}
.over{
    overflow: hidden !important;
}
.hide{
    display: none !important;
}
.showb{
    display: block !important;
}
.showf{
    display: flex !important;
}
.remain{
    flex: 1;
}
img{
    max-width: 100%;
}
/*
#########################################
########## End def  Style #######
#########################################
*/



/*
#########################################
########## Start search  Style #######
#########################################
*/
.containerch {
  width: 90%;
  height: 50px;
  background-color: var(--light-color);;
    margin: auto;
    display: block;
  border-radius: 4rem;
}

.search__box {
  float: right;
  line-height: 22px;
  width: 0;
  height: 50px;
/*   display: inline; */
  background: none;
  color: var(--two);
  font-size: 22px;
  border-radius: 2rem;
  outline: none;
  border: none;
  position: relative;
  opacity: 1;
  transition: all .75s ease-in;
  cursor: pointer;
/*   border: 2px solid tomato; */
/*   margin-top: 5px; */
}

/* .search__box:focus, .search__box:hover {
  background-color: #f1f2f6;
} */

.search__icon {
  box-sizing: border-box;
  float: left;
  font-size: 28px;
  display: inline-block;
/*   justify-content: center;
  align-items: center; */
  margin-left: .8rem;
  margin-top: 0;
  cursor: pointer;
  position: absolute;
  color: #fa983a;
  transition: all .25s ease-in;
  padding: .7rem;
  border-radius: 50%;
}

.containerch:hover > .search__box {
  width: 85%;
  padding: 0 1rem;
}

.containerch:hover > .search__icon , .iconshow{
  background-color: var(--one);
}

.showch {
  width: 85%;
  border: 1px solid var(--one);
}
.splide__slide{
    max-width: 100%;
}
/*
#########################################
########## End search  Style #######
#########################################
*/





.a4{
	width: 595px;
}
@media print {
	aside{
		display: none;
	}
	.add-search{
		display: none;
	}
	.wide-input{
		width: 50%;
	}
     h1, .dashboard-menu, header{
        display:none;
    }
    .add-form{
    	width: 95%;
    	margin: 90px 5px auto;

    }
    .codeprint{
        page-break-inside: always;
        align-items: stretch;
    }
    ul {page-break-inside: avoid;}
    
    .codeprint ul{
        width:33.33%;
        page-break-before: always;
        page-break-after: always;
         page-break-inside: avoid;
         margin-bottom:100px;
    }
  body {
    margin: 0;
    padding: 0;
  }

}
.classmenu{
	width: 50%;
	position: fixed;
    top: 50%;
    background-color: var(--three);
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 20px;
    border-radius: 8px;
    box-shadow: 1px 1px 3px black;
    font-size: 16px;
    color: var(--aside-color);
    z-index: 1009;
}
.closebu{
	cursor: pointer;
    position: absolute;
    top: 6px;
    right: 6px;
    font-size: 24px;
    color: red;
    width: 20%;
    text-align: right;
}
.classmenu > h3 {
	padding: 4px 0;
    cursor: auto;
}
.classmenu > h3:hover {
	color: inherit;
}
.classmenu  li {
	display: flex;
	width: 100%;
	padding: 4px 0;
	text-align: right;
}
.classmenu  li > * {
	width: 50%;
	display: block;
}
.fb-like{
    text-align: center;
    padding: 25px 4px;
    border: 1px solid;
    margin: 3px;
    width:calc(100% - 6px);
    border-radius: 6px 26px;
    box-shadow: 2px 2px 6px black;
    background-image: url('https://cdn.dhakapost.com/media/imgAll/BG/2021July/facebook-20210717155507.jpg');
}
@media only screen and (max-width: 1200px) {

}
@media only screen and (max-width: 992px) {
	.asidli{
    
    font-size: 14px;
    }
}
@media only screen and (max-width: 768px) {
    .splide__arrow{
        width: 1.5em;
        height: 1.5em;
    }
    .asidli{
    
    font-size: 16px;
    }
    .width100s{
        width: calc(100% - 12px) !important;
    }
    .panner img , .splide{
        height: auto;
    }
    .splide img{
        height: 110px;
    }
    .tab{
        font-size: 12px;
    }
    .statitem h3{
        font-size: 16px;
    }
    .ticker-wrap , .ticker-wrap .ticker{
        height: 2rem;
            line-height: 2rem;
    }
    .ticker-wrap .ticker__item{
        font-size: 1rem;
    }
    .newsimg{
        width: 28px;
        height: 28px;
    }
    aside {
        padding: 10px;
        position: fixed;
        z-index: 999;
        width: 100%;
        height: 100vh;
        top: 0;
        background-color: rgb(72 84 96 / 80%);
            max-width: initial;
        right: -100%;
        border-radius: 8px;
        transition: all 0.4s linear;
    }
    .handle1{
        margin: 12px 0;
    }
    .handle1 form{
        height: 60px;
    }
    .visitcon{
        width: 290px;
        height: 290px;
    }
    .visitson{
        width: 220px;
        height: 220px;
    }
    .visitson i {
        font-size: 55px;
    }
    .handel2 a{
        width: calc(50% - 20px);
        margin: 10px;
    }
    header{
        position: sticky;
        top: 0;
        z-index: 999;
    }
    .logos{
        text-align: center;
        flex: 1;
    }
    .logos img{
        width: 66px;
        margin: auto;
        transform: translateX(28px);
    }
    .panner{
        display: flex;
        align-items: center;
        background-color: var(--light-color);
    }
    .panner i{
        font-size: 30px;
        margin: 15px;
    }
    .hides{
        display: none !important;
    }
    .shows{
        display: block !important;
    }
    .slidermenu{
        position: relative;
    }
    .slidermenu > i{
        position: absolute;
        left: 5px;
        top: 5px;
        font-size: 18px;
        color: red;
    }
    .slidermenu > ul{
        width: 80%;
    }
    .aboutcon img{
        max-width: 95% !important;
    }

    .aboutcon > div {
        margin: 5px 8px;
        padding: 5px;
    }
    .aboutcon p{
        font-size: 18px;
    }
    h2{
        font-size: 18px;
        padding: 5px;
    }
    .mirg10{
        margin: 10px 0;
    }
    .statitem span{
        font-size: 16px;
    }
}
@media only screen and (max-width: 576px) {

}
.slid{
    right: 0%;
    overflow: scroll;
}
.pright{
	right: 50% !important;
	transform: translate(50%, -50%) !important;
}
.swapmain{
	left: 101% !important;
}