@import url("https://fonts.googleapis.com/css2?family=Tajawal&display=swap");
@media (max-width: 991px) {
  body nav .brand {
    margin-left: 50px;
  }
  body .top-nav .links ul {
    display: none;
  }
  body #open-left {
    display: block;
  }
  body .slider-item .content {
    padding: 50px 2%;
    width: 100%;
    text-align: center;
    height: 100%;
  }
  body .slider-item .overlay {
    -webkit-transform: none;
            transform: none;
    width: 100%;
    left: 0;
    top: 0;
  }
  body .slider-tri {
    width: 140%;
  }
  body .member-head .content {
    width: 100%;
  }
  body .member-head .content h1 {
    font-size: 3.5rem;
  }
}

@media (max-width: 800px) {
  body .banner3 .box {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    padding: 0 3%;
  }
  body .banner3 .box .mdl,
  body .banner3 .box .right,
  body .banner3 .box .left {
    width: 100%;
  }
  body .banner3 .box .mdl .img {
    padding-top: 200px;
    width: 200px;
    display: block;
    margin: 25px auto;
  }
}

@media (max-width: 767px) {
  body .event-title {
    margin-top: -3px;
  }
  body .mem-types-sec ul {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  body .mem-types-sec ul li {
    width: 100%;
    margin-bottom: 60px;
  }
  body footer {
    padding-left: 11%;
    padding-right: 11%;
  }
  body .member-card {
    width: 48%;
  }
  body .container-box.sm {
    width: 95%;
  }
  body .text-box {
    padding: 5px;
  }
  body .member-head .content img {
    margin-right: 0;
  }
  body .member-head .content h1 {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    font-size: 1.9rem;
    text-align: center;
  }
  body .member-head .content ul {
    margin-top: 35px;
  }
  body .member-head .content ul li {
    line-height: 1;
  }
  body .banner1 {
    padding: 0 3%;
  }
  body .banner1 h1 {
    font-size: 2.3rem;
    color: #483949;
    line-height: 1;
    text-align: center;
    padding: 18px 0;
  }
  body .banner1 h3 {
    text-align: center;
    line-height: 1;
    padding: 10px 0;
    font-size: 1.5rem;
  }
  body .banner3 h1,
  body .banner2 h1 {
    font-size: 2.3rem;
    line-height: 1;
  }
  body .ss-box {
    width: 46%;
  }
}

@media (max-width: 600px) {
  body nav .brand img {
    height: 40px;
  }
  body nav .brand div h1 {
    font-size: 16px;
  }
  body nav .brand div h2 {
    font-size: 13px;
  }
  body .page {
    padding-top: 60px;
  }
  body .ss-box {
    width: 95%;
    margin: auto;
  }
  body .albums-home-box {
    padding: 50px 3%;
  }
  body .album-box {
    width: 100%;
  }
  body .member-card {
    width: 98%;
  }
  body .donates-list {
    padding: 0;
  }
  body .donates-list a {
    padding: 18px;
    margin: 6px;
  }
  body .donates-list a img {
    max-width: 150px;
    height: auto;
  }
  body #open-left {
    padding-left: 15px;
  }
  body .meet-box ul li {
    width: 100%;
  }
  body .meet-box ul li a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}