/* start variables */
:root {
    --main-color: #2196F3;
    --main-color-alt: #1787E0;
    --main-transition: 0.3s;
    --section-padding: 15px;
    --section-background: #ececec;
}

/* ens variables */

/* strat global rules */
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

body {
    font-family: "Cairo", sans-serif;
}

html {
    scroll-behavior: smooth;
}

ul {
    list-style: none;
}

a {
    text-decoration: none;
    display: block;
}

.container {
    padding-left: 15px;
    padding-right: 15px;
    margin-left: auto;
    margin-right: auto;
}
/* Small */
@media (min-width: 768px) {
    .container, content, .full-banner.small-slider {
        width: 750px;
    }
}
@media (max-width: 768px) {
    .full-banner.small-slider {
       margin-left:10px !important;
       margin-right:10px !important
    }
}

/* Medium */
@media (min-width: 992px) {
    .container, content, .full-banner.small-slider {
        width: 970px;
    }
}
/* Large */
@media (min-width: 1200px) {
    .container, content, .full-banner.small-slider {
        width: 1170px;
    }
}
/* end global rules */

/* start Article  */
.Article {
    padding: var(--section-padding) 0;
}


    .Article .container .images {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(250px,1fr));
        gap: 20px;
    }

        .Article .container .images div {
            box-shadow: 0 2px 15px rgb(0 0 0 / 10%);
            border-radius: 6px;
            overflow: hidden;
            transition: all var(--main-transition);
        }

            .Article .container .images div:hover {
                transform: translateY(-10px);
                box-shadow: 0 2px 15px rgb(0 0 0 / 20%);
            }

        .Article .container .images img {
            max-width: 100%;
            width: 100%;
            height: 135px;
        }

        .Article .container .images h4 {
            margin: 25px 0;
            font-size: 20px;
            font-weight: bold;
            margin-left: 10px;
            min-height: 40px;
            max-height: 40px;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
        }

        .Article .container .images p {
            line-height: 1.8;
            padding-bottom: 10px;
            border-bottom: 1px solid #cdcdcd;
            margin-left: 10px;
            max-width: 95%;
            max-height: 42px;
            min-height: 42px;
            overflow: hidden;
            margin-top: -8px;
            white-space: nowrap;
            text-overflow: ellipsis;
            direction: rtl;
        }

        .Article .container .images a {
            margin: 15px 0 10px 10px;
            color: var(--main-color);
            text-transform: capitalize;
            font-weight: bold;
            position: relative;
            font-size: 16px;
        }

        .Article .container .images i {
            position: absolute;
            right: 20px;
        }

        .Article .container .images div:hover i {
            animation-name: move-arrow;
            animation-duration: .6s;
            animation-timing-function: linear;
            animation-iteration-count: infinite;
        }
.brand-logo{
    display :flex !important;
    justify-content:center !important;
    align-items:center !important;
}
.fa fa-bars sidebar-bar{
    color:white !important;
}

@keyframes move-arrow {
    100% {
        transform: translateX(10px);
    }
}
/* end Article  */