@charset "utf-8";
/*  Designed and programmed by : Munaf Aqeel Mahdi - Web , Android and Java developer  */

body{
    margin: 0px;
    font-family: 'Amaranth', sans-serif;
    background: #F5F5F5;
}
.btn{
    border: none;
    border-radius: 4px;
    color: white;
    padding: 30px 50px 30px 50px;
    margin: 5px;
    font-size: 17px;
    transition: all 0.5s;
    text-decoration: none;
    display: inline-block;
    }    
    .btn:hover{
     box-shadow: 1px 1px 20px #828282;
    }
 #navbar{
    background: #607D8B;
    position: fixed;
    top: 0px;
    right: 0px;
    left: 0px;
    color: white;
    border-bottom: 5px solid #7999A9;
    }
#navbar ul{
    list-style: none;
    margin: 0px;
    }
#navbar ul li{
    padding-bottom: 21px;
    padding-top: 21px;
    transition: all 0.5s;
    float: left;
    }
#navbar ul li:hover{
        box-shadow: inset 0px 100px #486471;
    }
#navbar ul li a{
    padding: 21px;
    text-decoration: none;
    color: white;
    text-shadow: 0px 0px 15px #353535;
    }
#footer{
    background: #607D8B;
    color: white;
    text-shadow: 0px 0px 15px #353535;
    border-top: 5px solid #7999A9;
    height: 60px;
    text-align: center;
    }
.caret {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 2px;
    vertical-align: middle;
    border-top: 4px solid;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
}
.caret2 {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 2px;
    vertical-align: middle;
    border-bottom: 6px solid;
    border-right: 6px solid transparent;
    border-left: 6px solid transparent;
}
    #dropdownmenu{
    display: none;
    position: fixed;
    background: #486471;
    color: white;
    padding: 15px;
    right: 0px;
    left: 0px;
    top: 60px;
    box-shadow: 0px 5px 20px #6B6B6B;
    overflow-x: auto;
    overflow-y: auto;

    }
.item-title{
    margin: 0px;
    padding: 10px;
    background: rgba(96, 125, 139, 0.67);
}
.item-title a{
    text-decoration: none;
        color:white;
    transition: all 0.32s;
}
.item-title a:hover{
    box-shadow: 0px 4px 0px #000;
        margin-left: 8px;
}
#about_dialog{
position: relative;
background: #007C96;
color: white;
top: 100px;
border-radius: 10px;
padding: 10px;
box-shadow: 0px 0px 10px #A1A1A1;
max-width: 400px;
min-width: 150px;
margin: 20px;
border: 5px solid #00B8DE;
}
#close_dialog{
    float: right;
    background: url('../images/close.png') no-repeat;
    height: 30px;
    width: 30px;
    position: relative;
    top: -20px;
    right: -5px;
    cursor: pointer;
}
#close_dialog:hover{
    opacity: 0.8;
}
#about_dialog_bg{
    display: none;
    background: rgba(255, 255, 255, 0.66);
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow-x: hidden;
    overflow-y: auto;
}
#about_dialog a{
    margin: 5px;
    color: white;
    text-decoration: none;
    transition: all 0.5s;
    border-radius: 3px;
    padding: 3px;
}
#about_dialog a:hover{
            background: #0389a5;
}
.contact_div{
    margin: 15px;
    background: #ffffff;
    padding: 20px;
    border-radius: 3px;
    max-width: 400px;
    border: 1px solid #C5C5C5;
    box-shadow: 0px 0px 3px #DBDBDB;
    transition: all 1s;
}
.contact_fields{
padding: 5px 10px 5px 10px;
width: 300px;
border-radius: 3px;
border: 1px solid #ececec;
border-bottom: 2px solid #607d8b;
background: transparent;
transition: width 1s;
}
.contact_fields:focus{
border-bottom: 2px solid #00acff;
}
.contact_btn{
    padding: 5px 15px 5px 15px;
    background: rgb(121, 153, 169);
    border: 2px solid #7999A9;
    border-radius: 2px;
    color: white;
    cursor: pointer;
    box-shadow: inset 0px 0px rgba(121, 153, 169, 0.77);
    transition: box-shadow 0.5s;
}
.contact_btn:hover{
    background: rgb(78, 119, 140);
    border: 2px solid rgb(78, 119, 140);
}
.contact_btn:active{
    box-shadow: inset 0px 100px rgba(121, 153, 169, 0.77);
}
.items_area{
    display: inline-block;
}
.item{
    display: inline-block;
    background: #ffffff;
    padding: 10px;
    margin: 1px;
    border: 1px solid #F0F0F0;
    border-radius: 3px;
    margin-bottom: 3px;
    transition: all 0.5s;
}
.item:hover{
    background: #fbfbfb;
}
.item p{
    max-width: 150px;
    color: #606060;
}
.item a{
    background: #607d8b;
    padding: 5px 10px 5px 10px;
    border-radius: 2px;
    text-decoration: none;
    color: white;
}
.item a:hover{
    background: #499ac2;
}
.search_app{
    width: 600px;
    margin-bottom: 30px;
    border: 3px solid #efefef;
    border-radius: 30px;
    padding: 10px;
    transition: all 1s;
}
.search_app:focus{
    border: 3px solid rgba(96, 125, 139, 0.56);
}
.news_articles{
    display: inline-block;
}
.article{
    display: inline-block;
    max-width: 350px;
    width: 350px;
    background: white;
    padding: 15px;
    margin: 5px;
    border: 1px solid #DBDBDB;
    transition: width 1s;
}
.article p{
    color: #606060;
}
.article a{
    background: #607d8b;
    padding: 5px 10px 5px 10px;
    border-radius: 2px;
    text-decoration: none;
    color: white;
    border: 1px solid #dedede;
}
.article a:hover{
    background: #499ac2;
}
.article h5{
    color: rgb(173, 173, 173);
    font-size: 11px;
    font-family: sans-serif;
}
.article img{
    width: 350px;
    height: 196px;
}
#main_img{
width: 350px;
transition: all 0.3s;
}
/* =============================== Mobile styles =========================== */
#m_navbar{
display:none;
background: #607D8B;
position: fixed;
top: 0px;
right: 0px;
left: 0px;
color: white;
border-bottom: 5px solid #7999A9;
text-align:center;
}
#m_navbar a{
display: inline-block;
cursor: pointer;
padding: 14px;
color: white;
text-decoration: none;
box-shadow: inset 0px 0px #486471;
    font-size: 23px;
transition: box-shadow 0.5s;
}
#m_navbar a:hover{
box-shadow: inset 0px 100px #486471;
}

@media only screen and (max-width: 750px) {
/* For mobile phones: */
#navbar{
display:none;
}
#m_navbar{
display: inline-block;
}
.search_app{
width:200px;
}
.item p{
display:none;
}
.item h2{
font-size:15px;
}
.article{
    width: 270px;
}
.article img {
    width: 270px;
    height: 170px;
}
#main_img{
width: 280px;
}
.contact_fields{
width:235px;
}
.contact_div{
width:250px;
}

}

/*  Designed and programmed by : Munaf Aqeel Mahdi - Web , Android and Java developer  */