*{
    margin: 0;padding:0;
    font-family: 'Droid Arabic Kufi';
    font-size: 14px;
}
body{
    font-size: 14px;
    height: 100%;
}
.header{
    background-color: #e15110;
    padding: 20px;
    text-align: center;
    color: white;
    font-weight: bold;
}
a{
    text-decoration: none;
}
a:hover{
    text-decoration: none;
}
.android_btn{
    background-color: #009c00;
    color: white;
    padding: 10px;
    border-radius: 5px;
}
.ios_btn{
    background-color: #27a7bc;
    color: white;
    padding: 10px;
    border-radius: 5px;
}
.version{
    margin: 35px 20px;
    text-align: center;
}
.version_text{
    background: #e2e2e2cc;
    padding: 5px;
    border-radius: 4px;
    color: black;
}
.version_value{
    background: #ffad88;
    padding: 5px;
    border-radius: 4px;
    color: white;
    margin: 0 9px;
    font-weight: bold;
}
.downloads{
    margin: 20px;
    text-align: center;
}
.first_desc{
    padding: 20px;
    background-color: #f4f4f4;
    border-radius: 5px;
    margin: 2rem;
}
.join_telegram{
    margin: 20px;
    
    text-align: center;
}
.telegram_photo{
    height: 15px;
    position: relative;
    top: 3px;
}
.telegram_join_btn{

    background-color: #08c;
    color: white;
    padding: 10px;
    border-radius: 5px;
    
}
.logo_place{
    padding: 2rem;
    text-align: center;
}
.logo_img{
    
    padding: 2rem;
    text-align: center;
    background-color: blanchedalmond;
    width: 175px;
    border-radius: 7px;

}
.footer{
    margin: 30px 0;
    background-color: #e15110; 
    padding: 0 30px;
}
.footer li{
    text-align: center;
    padding: 0 1rem;
}
.footer a{
    color:white;
}
    
.justify{
    text-align: justify;
}
.text_bold{
    font-weight: bold;
}

.font_size{
    font-size: 20px;
}
.p_title_left{
    background-color: white;
    padding: 0 10px;
    border-left: solid;
    width: auto;
    
}
.p_title_right{
    background-color: white;
    padding: 0 10px;
    border-right: solid;
    width: auto;
    
}
.site_color{
    color:#e15110;
}
.justify p{
   padding: 1rem 0;
}
ul{
    padding: 1rem 2rem;
}
li{
    padding: 0.7rem;
}
.alert{
    position: relative;
    padding: 0.75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: 0.25rem;
}
.alert-success{
    color: #155724;
    background-color: #d4edda;
    border-color: #c3e6cb;
}

	
.rows{
	display: flex;
    flex-direction: row; /* Set flex direction to row */
    flex-wrap: wrap; /* Allow wrapping to the next row */
}
    
.cats{
	box-sizing: border-box; /* Include padding and border in the width */
	padding: 2px; /* Optional: Add padding to create space between the cats */
}
.container{
	margin: 0 8%;
}
.program_title{
	font-size: 17px;
    font-weight: bold;
}
.program_icon{
	width: 16px;margin: 0 2px;
}
.downloadAll{
	padding: 6px;
    background-color: #568edd;
    color: white;
    border-radius: 5px;
    margin: 12px 0;
    display: block;
    text-align: center;
}
.downloadAll:hover{
    background-color: #446ea9;
}
@media (max-width: 767px){

    
	.cats{
		width: 99%;
		 box-sizing: border-box; /* Include padding and border in the width */
		padding: 10px; /* Optional: Add padding to create space between the cats */
	}
    .telegram_join_btn{display: block;margin: 7px 0;}
    .ios_btn{display: block;margin: 7px 62px;}
    .android_btn{display: block;margin: 7px 62px;}
    
    .footer ul {
        display: block;
        list-style: none;
        text-align: center;
        align-content: center;
    }
    
}
@media (min-width: 768px) and (max-width: 991px){
	
	.cats{
		width: 49%;
	}
    .footer ul {
        display: block;
        list-style: none;
        text-align: center;
        align-content: center;
    }
    .telegram_join_btn{display: block;margin: 7px 0;}
    .ios_btn{display: block;margin: 7px 62px;}
    .android_btn{display: block;margin: 7px 62px;}
}
@media (min-width: 992px) and (max-width: 1199px){
    
	.cats{
		width: 33%;
	}
    .footer ul {
        display: flex;
        list-style: none;
        text-align: center;
        align-content: center;
    }
    
}
@media (min-width: 1200px){
    
	.cats{
		width: 20%;
	}
    .footer ul {
        display: flex;
        list-style: none;
        text-align: center;
        align-content: center;
    }
}



    