@import url('https://v1.fontapi.ir/css/Shabnam');

body {
    background-color: #546E7A;
}
.navbar {
    direction: rtl;
    text-align: right;
    background-color: darkgray;
    border: 2px solid darkgray;
    border-radius: 5px;
}

ul.main-menu li {
    display: inline-block;
    list-style: none;
    position: relative;
    border: 2px solid #cccc;
    border-radius: 10px;
}

ul.main-menu li a {
    display: inline-block;
    padding: 12px;
    color: #fff;
    text-decoration: none;
    font-family: 'Shabnam', 'sans-serif';
    transition: all 0.5s;
}
li.submenu ul {
    display: none;
    text-align: center !important;
    position: absolute;
    background-color: darkgray;
    border: 2px solid #cccc;
    padding: 0px;
    margin: 0px;
    z-index: 1;
}
li.submenu::after {
    content: "\25BC";
    font-size: 0.7em;
    padding-right: 2px;
}
li.submenu:hover::after {
    content: "\25B2";
    font-size: 0.7em;
    padding-right: 2px;
}
ul.main-menu li a:hover {background-color: darkgreen; border-radius: 10px;}
li.submenu:hover ul {
    display: block;
}
div.gallery {
    border: 1px solid #cccc;
    transition: all 0.5s;
}
div.gallery:hover {
    border: 2px solid #777;
    transform: scale(1.1);
}

div.gallery img {
    width: 100%;
    height: 300px;
    filter: blur(3px) grayscale(100%);
    transition: all 0.5s;
}
div.gallery:hover img {
    filter: blur(0) grayscale(0);
}
div.desc {
    padding: 15px;
    text-align: center;
    font-size: 19px;
}
* {
    box-sizing: border-box;
}
.responsive {
    padding: 0px 6px;
    float: left;
    width: 32.9%;
}

@media only screen and (max-width:700px) {
    .responsive {
        width: 50%;
        margin-bottom: 9px;
    }
}

@media only screen and (max-width:500px) {
    .responsive {
        width: 100%;
    }
}