@font-face {
    font-family: 'matn';
    src: url(../fonts/bhoma.eot);
    src: url(../fonts/bhoma.eot?#iefix) format('embedded-opentype'), url(../fonts/bhoma.woff) format('woff'), url(../fonts/bhoma.ttf) format('truetype'), url(../fonts/bhoma.svg#glr.svg#glyphicons_halflingsregular) format('svg');
    /*src: url(../fonts/bnazanin.eot);
    src: url(../fonts/bnazanin.eot?#iefix) format('embedded-opentype'), url(../fonts/bnazanin.woff) format('woff'), url(../fonts/bnazanin.ttf) format('truetype'), url(../fonts/bnazanin.svg#glr.svg#glyphicons_halflingsregular) format('svg');*/
}

@font-face {
    font-family: 'title';
    src: url(../fonts/byekan.eot);
    src: url(../fonts/byekan.eot?#iefix) format('embedded-opentype'), url(../fonts/byekan.woff) format('woff'), url(../fonts/byekan.ttf) format('truetype'), url(../fonts/byekan.svg#glr.svg#glyphicons_halflingsregular) format('svg');
}

@font-face {
    font-family: 'nav';
    src: url(../fonts/bhoma.eot);
    src: url(../fonts/bhoma.eot?#iefix) format('embedded-opentype'), url(../fonts/bhoma.woff) format('woff'), url(../fonts/bhoma.ttf) format('truetype'), url(../fonts/bhoma.svg#glr.svg#glyphicons_halflingsregular) format('svg');
}

body {
    direction: rtl;
    font-family: matn, 'Roboto';
    font-size: 18px;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    font-family: title;
}

.close {
    float: left !important;
}

.glyphicon {
    padding-left: 5px;
}

.gradient-custom {
    background: #37ecba !important;
    background: -webkit-linear-gradient(to right, rgba(55, 236, 186, 0.5), rgba(114, 175, 211, 0.5)) !important;
    background: linear-gradient(to right, rgba(55, 236, 186, 0.5), rgba(114, 175, 211, 0.5)) !important;
    color: rgb(56, 54, 72) !important;
    height: 250px !important;
    font-size: 35px !important;
    border-radius: 1rem !important;
    border: none !important;
    margin-bottom: 3rem !important;
}

.gradient-custom:hover {
    background: #30cfd0 !important;
    background: -webkit-linear-gradient(90deg, #30cfd0, #330867) !important;
    background: linear-gradient(90deg, #30cfd0, #330867) !important;
    color: white !important;
}

.ripple-surface {
    display: inline-block;
    overflow: hidden;
    position: relative;
    vertical-align: bottom;
    box-shadow: 0 4px 9px -4px #3b71ca;
}

.my-shadow {
    text-shadow: 0 4px 9px #3b71ca;
}

.rounded-6 {
    border-radius: .75rem !important;
}

.gradient-lemon {
    background: #56ab2f !important;
    background: -webkit-linear-gradient(to right, #a8e063, #56ab2f) !important;
    background: linear-gradient(to right, #a8e063, #56ab2f) !important;
    color: white !important;
    height: 250px !important;
    font-size: 35px !important;
    border-radius: 1rem !important;
    border: none !important;
    margin-bottom: 3rem !important;
}

.gradient-lemon:hover {
    background: #6A9113 !important;
    background: -webkit-linear-gradient(to right, #141517, #6A9113) !important;
    background: linear-gradient(to right, #141517, #6A9113) !important;
    color: white !important;
}

.spinner-border {
    width: 3rem;
    height: 3rem;
    border-width: 0.25em;
}

.modal-content {
    border-radius: 10px;
}

.team-img {
    width: 100%;
    max-width: 150px !important;
    border-radius: 10px;
    max-height: 150px;
}

.animated-scale-logo {
    animation: sizeChange 2s infinite ease-in-out;
}

@keyframes sizeChange {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.3);
    }

    100% {
        transform: scale(1);
    }
}

#divSuprList {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    justify-content: center;
    padding: 10px;
}

.team {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 10px;
    box-sizing: border-box;
    height: 100%;
}

.team .caption {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
}

.team img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
}

.team h3 {
    margin: 10px 0;
    font-size: 1.2em;
}

.team p.small {
    margin: 5px 0;
    font-size: 0.9em;
	min-height: 35px !important;
}

.team button {
    margin-top: 10px;
    width: 100%;
}

@media (max-width: 767px) {
    #divSuprList {
        grid-template-columns: repeat(1, 1fr);
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    #divSuprList {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 992px) {
    #divSuprList {
        grid-template-columns: repeat(4, 1fr);
    }
}